Még okosabb lesz a Google kereső

Google kereso

Eddig is az egyik legintelligensebb keresőmotor volt a Google kereső, de ez nem jelenti azt, hogy egy másodpercre is leállnának a fejlesztéssel. Néhány napja a Google blogjában jelent meg egy cikk, amiben a szerző beszámol a legújabb fejlesztésről. Ennek a cikknek a magyar változatát olvashatjátok.

MUM: Egy új mesterséges intelligencia mérföldkő az információ megértéséhez

Amikor azt mondom az embereknek, hogy a Google keresésen dolgozom, néha megkérdezik tőlem: “Van még tennivaló?”. A rövid válaszom egy határozott “Igen!”. Számtalan kihívást próbálunk megoldani, hogy a Google kereső jobban működjön az Ön számára. Ma arról számolunk be, hogy hogyan kezeljük az egyiket, amellyel sokan közülünk azonosulni tudnak: sok lekérdezést kell begépelni és sok keresést kell végrehajtani ahhoz, hogy megkapjuk a kívánt választ.

Mesterseges-Inteligencia

Vegyük például ezt a forgatókönyvet: Az Adams-hegyre túrázott. Most jövő ősszel a Fuji hegyet szeretné megmászni, és szeretné tudni, hogy mit kell másképp tennie a felkészüléshez. Ma a Google segíthetne ebben, de ehhez sok átgondolt keresésre lenne szükség – meg kellene keresnie az egyes hegyek magasságát, az őszi átlaghőmérsékletet, a túraútvonalak nehézségét, a megfelelő felszerelést és még sok minden mást. Számos keresés után végül megkaphatná a szükséges választ.

De ha egy túraszakértővel beszélgetne; egyetlen kérdést tehetne fel: “mit kellene másképp tennem, hogy felkészüljek?”. Átgondolt választ kapna, amely figyelembe veszi az Ön előtt álló feladat árnyalatait, és végigvezeti Önt a sok megfontolandó dolgon.

Ez a példa nem egyedi – sokan közülünk mindenféle, több lépést igénylő feladatot oldanak meg nap mint nap a Google segítségével. Valójában azt tapasztaljuk, hogy az emberek átlagosan nyolc lekérdezést adnak ki az ehhez hasonló összetett feladatokhoz

A mai keresőmotorok nem elég kifinomultak ahhoz, hogy úgy válaszoljanak, ahogy egy szakértő tenné. A Multitask Unified Model, azaz MUM nevű új technológiával azonban egyre közelebb kerülünk ahhoz, hogy segítsünk az ilyen típusú összetett igényekben. Így a jövőben kevesebb keresésre lesz szüksége a dolgok elvégzéséhez.

“Segítünk, ha nincs egyszerű válasz”

A MUM képes átalakítani azt, ahogyan a Google segít az összetett feladatok elvégzésében. A BERT-hez hasonlóan a MUM is a Transformer architektúrára épül, de ezerszer erősebb. A MUM nemcsak megérti a nyelvet, hanem generálja is. Egyszerre 75 különböző nyelven és sok különböző feladatra képezték ki, így a korábbi modelleknél átfogóbb információ- és világismeretet tud kialakítani. A MUM ráadásul multimodális, tehát szöveges és képi információkat is megért, és a jövőben további modalitásokra, például videóra és hangra is kiterjeszthető.

Vegyük például a Fuji hegy megmászására vonatkozó kérdést: A MUM megérti, hogy két hegyet hasonlítasz össze, így a magassági és útvonal-információk is relevánsak lehetnek. Azt is megértheti, hogy a túrázás kontextusában a “felkészülés” olyan dolgokat is magában foglalhat, mint a fitneszedzés, valamint a megfelelő felszerelés megtalálása.

turista-hatizsakkal

Mivel a MUM a világ mélyreható ismereteire támaszkodva képes felszínre hozni a világot, kiemelheti, hogy bár a két hegy nagyjából azonos magasságban van, a Fuji hegyén az ősz az esős évszak, így szükség lehet vízálló kabátra. A MUM a mélyebb felfedezéshez hasznos altémákat is felszínre hozhat – például a legjobban értékelt felszereléseket vagy a legjobb edzésgyakorlatokat -, hasznos cikkekre, videókra és képekre mutató hivatkozásokkal a világhálóról.

A nyelvi akadályok megszüntetése

A nyelv jelentős akadálya lehet az információhoz való hozzáférésnek. A MUM a nyelvek közötti tudásátadás révén képes lebontani ezeket a határokat. Képes olyan forrásokból is tanulni, amelyek nem azon a nyelven íródtak, amelyen Ön a keresését írta, és segít elhozni Önnek ezeket az információkat.

Tegyük fel, hogy a Fuji-hegyről japánul van egy nagyon hasznos információ; ma valószínűleg nem találja meg, ha nem japánul keres. A MUM azonban képes lenne átvenni a nyelvek közötti forrásokból származó tudást, és ezeket a felismeréseket felhasználva megtalálni a leglényegesebb találatokat az Ön által preferált nyelven. Így a jövőben, amikor a Fuji hegy meglátogatásával kapcsolatos információkat keres, olyan találatokat láthat, mint például, hogy honnan nyílik a legjobb kilátás a hegyre, a környékbeli onsenek és a népszerű szuvenírboltok – ezek mind olyan információk, amelyeket japán nyelven keresve gyakrabban talál meg.

Onsen

Az információ típusok közötti megértése

A MUM multimodális, ami azt jelenti, hogy egyszerre képes megérteni a különböző formátumú információkat, például weboldalakat, képeket és egyebeket. Végül talán képes lesz lefotózni a túrabakancsát, és megkérdezni, hogy “használhatom-e ezeket a Fuji hegy megmászásához?”. A MUM megértené a képet, és összekapcsolná a kérdéseddel, hogy tudassa veled, a bakancsod tökéletesen megfelel. Ezután egy blogra mutathatna, ahol az ajánlott felszerelések listája található. 

Fejlett mesterséges intelligencia alkalmazása a keresésben, felelősségteljesen

Amikor a mesterséges intelligencia segítségével előrelépünk, hogy a világ információit hozzáférhetőbbé tegyük, ezt felelősségteljesen tesszük. A Google kereső minden egyes fejlesztése szigorú értékelési folyamaton megy keresztül, hogy biztosítsuk, hogy relevánsabb és hasznosabb találatokat adunk. A keresésminőség-értékelési irányelveinket követő emberi értékelők segítenek megérteni, hogy eredményeink mennyire segítik az embereket az információkeresésben.

Ahogyan a 2019 óta bevezetett BERT számos alkalmazását is gondosan teszteltük, a MUM is ugyanezen a folyamaton megy keresztül, amikor ezeket a modelleket a Keresésben alkalmazzuk. Konkrétan olyan mintákat fogunk keresni, amelyek elfogultságra utalhatnak a gépi tanulásban, hogy elkerüljük az elfogultság bevezetését a rendszereinkbe. Alkalmazni fogjuk továbbá a legújabb kutatásunk tanulságait arról, hogyan csökkenthetjük a MUM-hoz hasonló képzési rendszerek szénlábnyomát, hogy a Search a lehető leghatékonyabban működjön.

Az elkövetkező hónapokban és években a MUM-alapú funkciókat és fejlesztéseket fogjuk bevezetni termékeinkbe. Bár a MUM felfedezésének korai szakaszában vagyunk, ez egy fontos mérföldkő egy olyan jövő felé, amelyben a Google képes megérteni az emberek természetes kommunikációjának és információértelmezésének minden különböző módját.

Pandu Nayak

Google Fellow and Vice President, Search

(Az eredeti cikk megtekinthető ezen a linken: https://blog.google/products/search/introducing-mum/ Ezer köszönet és hála a DeepL-nek a fordításért.)

Hallgassátok velünk 2020 legjobb dalait

Boldog karácsonyt, és boldog új évet kívánunk!

Hallgassátok a kedvenceinket, tartsatok velünk 2021-ben.

2020 visszahozta a köztudatba a PC világát, segített a kapcsolattartásban, az oktatásban és a munkában. 2021 is nagy jelentőségű év lesz a számítástechnikában. Az 5. generációs mobilhálózatok elterjedésével soha nem látott lehetőségek nyílnak meg az interneten. Az adattárolás és adatfeldolgozás elsődleges helye a számítási felhő. Az IoT a “Dolgok Internete” minden eszközünket hozzákapcsolja majd a hálózathoz. Ezeknek egy részét már most is megtapasztalhatjuk.

Jönnek az okos-autók, már nem csak mozifilmeket nézhetünk majd a TV-ken, de a legújabb játékokkal is játszhatunk drága hardver nélkül. 2021-ben egy kicsit talán a valóságból is többet kapunk, okostelefonjainkon keresztül a kiterjesztett valóság segíti majd a világ megismerését. A Google Lens már most is sok dolgot felismer a környezetből, a gépi fordítás pedig mindennapos dologgá vált.

A mesterséges intelligenciát már lassan vissza kell fogni a szemtelensége miatt, reméljük hogy 2021 mindenki számára egy izgalmas és jobb év lesz.


Android vírus az okoskarkötőn

Ki gondolta volna? Ez a vírus az okoskarkötővel érkezett.

Yoho Sport trojai vírus

Az okoskarkötőhöz mellékelt kezelőprogram, amit a biztonságos Google Play forrásból telepítettem. Az hétvégi szokásos víruskeresés során fennakadt a rostán.

2017.okt 6-án bukkant fel ennek a Trójai vírusnak az első variánsa.

Néhány éve még hallani sem lehetett az Android vírusokról, most meg egy okoskarkötő, mint trójai faló ott éktelenkedik a személyes teremben.

Android Trójai Ügynök

Egy olyan rosszindulatú alkalmazás, amely egy mobileszközön fut a háttérben a felhasználó tudta nélkül.

Csendben várja a parancsokat egy C&C szervertől. Ezek a parancsok bármilyenek lehetnek kezdve a személyes adatok távoli kiszolgálóra lopásától, egy célzott DDOS támadásig ahol az eszközünket zombiként állítják csatarendbe egy internetes célpont ellen.

Az Android rendszeren gyakran elrejti magát, nem hoz létre ikont, és egy általános név alatt jelenik meg a rendszerben. Előfordul, hogy rendszeralkalmazásként tünteti fel magát, ezzel még jobban megnehezítve az azonosítást.

mt okoskarkotő

Melyik a legjobb vírusirtó androidra?

Szerencsére ma már számtalan ismert vírusvédelmi szoftver letölthető androidra. A teljesség igénye nélkül itt van néhány ingyenes megoldás az ismertebb nevek márkák kínálatából:

A Huawei/Honor mobilokon alapértelmezetten már telepítve van az Avast. A fenti trójai vírust is ez a program szűrte ki nálam a héten.

Meg kell említenem, hogy az ilyen mintázatú rosszindulatú alkalmazás őse már 2017. Október óta szerepel az ESET nyilvántartásában. Az ESET mobilvírusirtóját itt tölthetitek le, de ez sajnos nem ingyenes.

A kémprogram eltávolítók királya asztali gépeken a személyes kedvencem a Malwarebytes is kínál megoldást az okostelefonok védelmére. A fenti linken egy hónapig korlátozás nélkül használható változatot tölthettek le.

Ne legyetek védtelenek, legyetek óvatosak, és mindig tartsátok nyitva a szemeteket, ha a személyes adataitokról van szó.

Címsor és fejrész

A weblapok strukturált szerkesztéséről már beszéltünk itt korábban. Emlékeztetőül, különböző címsorokat használtunk, hogy formailag elkülönítsük az oldalon lévő szöveg tartalmát. Ez egyaránt jó volt az embernek és a gépnek is. A különböző erősségű címsorokat különböző méretben jelenítették meg a böngészők. A HTML tag-ekből pedig a keresőrobotok is ügyesen tudják értelmezni a szöveg logikai összefüggéseit. De mi van akkor, ha ez nekünk nem elég? Mi van akkor, ha szeretnénk kiemelni egy címsort, de nem akarunk az alá- és fölérendeltségi viszonyon változtatni? Beszúrhatunk egy kis CSS formázást.

Extra címsor

Minden HTML címsor rendelkezik egy alapértelmezett beállítással. Egy oldal főcímét <h1> tag-el jelöljük. Minden oldalnak ajánlott , hogy csak egyetlen h1 címsora legyen, ebben helyezzük el a legfontosabb kulcsszavakat., majd ezt követik az alcímek h2,h3… jelöléssel. Ez megkönnyíti az oldal értelmezését. A címsorok rendelkeznek egy alapértelmezett formázással Ha ettől el szeretnénk térni módosíthatjuk az adott címsor megjelenését a style attribútum segítségével egy CSS szabály hozzáadásával akár a címsoron belül.

<h1 style=“font-size:60px;”>Címsor 2</h1>

h1-css h1 címsor

A fenti példában a h1 nyitótag után következik az attribútum, ez esetben style azaz egy stílus szabály, aminek az egyik paramétere a font-size (betűméret) és az értéke 60 pixel. A style paramétereit és a lehetséges értékeket később részletesen tárgyaljuk majd.

Vízszintes elválasztás

A <hr> elem régen egy vízszintes elválasztóvonalat jelentett egy bekezdésen belül. HTML5-ben a jelentése inkább szemantikai elválasztás, mint grafikai, bár a leggyakrabban még mindig vízszintes vonalként jelenítik meg a böngészők. HTML5 szabványú weboldalon nem nem szükséges lezárni, a <br> sortöréshez hasonlóan használjuk, és egy horizontális elválasztást szúrhatunk be vele a dokumentumba.HTML hr tag

A <HEAD> elemről

A <head></head> tag-ekkel jelöljük a dokumentum fejrészét. A fejrészbe kerülő információk nem jelennek meg a weblapon, viszont gyakran nagyon fontos extra információt szolgáltatnak a böngészőknek és a keresőrobotok is beleolvasnak, miközben az oldalunkat próbálják értelmezni. A <head> elem gyakorlatilag a META adatok tárolására szolgál, itt helyezzük el böngésző lapfülén megjelenő címet, a betöltendő formázásokat, szkriptek hivatkozását, a karakterkódolást és más kiegészítő információkat. Helye a <html>… és <body> (törzs) elem között van.

<!DOCTYPE html>
<html>
<head>
<title>Az én honlapom</title>
<meta charset=”UTF-8″>
</head>
<body>

<p>A HTML head elem tartalmazza a META adatokat.</p>
<p>A metaadatok a html dokumentum adatait tartalmazzák.</p>

</body>
</html>

HTML head elem

Angol nyelvű területen gyakran összetévesztik a HEAD (fej) elemet a HEADING (leginkább cím h1,h2,h3…) elemmel, angolul rengeteg nagyszerű ingyenes forrás áll rendelkezésre a webfejlesztéssel kapcsolatban, ha ilyen oldalakat is olvasol vigyázz mert a head elemnek önmagában semmi köze a heading-hez.

Forráskód, hogyan puskázzunk

Most már tudod, hogy ha látsz egy gyönyörű honlapot, azt a böngésző a betöltött forráskód alapján jeleníti meg a képernyőn. A tanulás során előfordul, hogy kíváncsiságból vagy hibakeresés során meg szeretnénk nézni a megjelenített tartalom forráskódját. Ehhez minden modern böngésző tartalmaz eszközöket, a legegyszerűbb az egér jobb gombjával kattintani a weboldalra, és a felugró menüben kiválasztani az “oldal forrása” parancsot. Gyakorlatilag ezt a kódot tölti le a böngésző a webszerverekről, és ezt alakítja át a szabványnak megfelelően emberi fogyasztásra.

forráskod képe
“AJÁNLATOT KÉREK” gomb vizsgálata Firefox böngészőben

A bonyolult forráskód megjelenítésén kívül, lehetőségünk van egy-egy elem alapos vizsgálatára is működés közben, ez hasznos lehet a hibakeresés során. A fentiekhez hasonlóan kell eljárnunk, de ezúttal elem vizsgálata parancsot kell keresnünk. Az elemzés során nem csak a forráskódot láthatjuk, hanem az ahhoz kapcsolódó stílus beállításokat, szkripteket, különböző képernyőméreteken nézhetjük meg az oldalunkat, a sebességét figyelhetjük és kipróbálhatunk módosításokat is a forráskódban.

Ennyi fért bele a leckébe mára, a végére egy kis kód a <hr> (horizontal rule) különböző változataihoz. Másold az editorba, mentsd el a megfelelő formátumban, és nézd meg hogy jelenik meg a böngészőben. Elemezd a forráskódot és próbáld meg módosítani a böngésző paneljein (röptében).

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<style>
body{
background-color: #f0f0f0;
width: 700px;
float: center;
}

hr.style1{
border-top: 1px solid #8c8b8b;
}

hr.style2 {
border-top: 3px double #8c8b8b;
}

hr.style3 {
border-top: 1px dashed #8c8b8b;
}

hr.style4 {
border-top: 1px dotted #8c8b8b;
}

hr.style5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}

hr.style6 {
background-color: #fff;
border-top: 2px dotted #8c8b8b;
}

hr.style7 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

hr.style8 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8:after {
content: ”;
display: block;
margin-top: 2px;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

hr.style9 {
border-top: 1px dashed #8c8b8b;
border-bottom: 1px dashed #fff;
}

hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}

hr.style11 {
height: 6px;
background: url(https://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
border: 0;
}

hr.style12 {
height: 6px;
background: url(https://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
border: 0;
}

hr.style13 {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

hr.style15 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.style15:after {
content: ‘\002665’;
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}

hr.style16 {
border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
content: ‘\002702’;
display: inline-block;
position: relative;
top: -12px;
left: 40px;
padding: 0 3px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}

hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: ‘§’;
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}

hr.style18 {
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style18:before {
display: block;
content: “”;
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 1px 0;
border-radius: 20px;
}
</style>
</head>
<body>

<h1>Normál Címsor</h1>
<h1 style=”font-size:60px;”>Nagyobb h1 Címor</h1>
<br>1
<hr class=”style1″>
<br>2
<hr class=”style2″>
<br>3
<hr class=”style3″>
<br>4
<hr class=”style4″>
<br>5
<hr class=”style5″>
<br>6
<hr class=”style6″>
<br>7
<hr class=”style7″>
<br>8
<hr class=”style8″>
<br>9
<hr class=”style9″>
<br>10
<hr class=”style10″>
<br>11
<hr class=”style11″>
<br>12
<hr class=”style12″>
<br>13
<hr class=”style13″>
<br>14
<hr class=”style14″>
<br>15
<hr class=”style15″>
<br>16
<hr class=”style16″>
<br>17
<hr class=”style17″>
<br>18
<hr class=”style18″>

</body>
</html>

 

Új számítógép vs. régi monitor

D-sub konnektor

Hamarosan itt a szeptember, sokan most vesznek új számítógépet. Az elmúlt hetekben nagyon sokan megkerestek bennünket monitor kompatibilitás problémával. Ime egy tipp arról konyhanyelven, hogy az elmúlt években mi változott a botlok polcain.

Új számítógép csatlakoztatása régi monitorhoz

Vettél egy új gépet, vagy egy új videokártyát, de csak otthon derül ki, hogy nem tudod használni a régi monitoroddal, mert nincs kompatibilis csatlakozó. Ilyenkor jön a rohangálós rész, persze minnél hamarabb szeretnéd kipróbálni az új vasat, ezért szétnézel a helyi üzletekben ahol vagy tudnak segíteni, vagy azt mondják vegyél új monitort :).

HDMI – DVI átalakítók

DVI-csatlakozoLassan teljesen eltűnik a videókártyákról a D-SUB (VGA) csatlakozó. A helyét átvette a HDMI – amivel a modern TV-re is rá lehet kötni a számítógépet. Aki viszont a régi monitorját szeretné használni, viszonylag olcsón vehet átalakítót… Na de milyet? Legyetek óvatosak! A DVI csatlakozókból 8 fajta van, és a legtöbb hirdetésben nem tüntetik fel azt, hogy az adott eszköz milyennel rendelkezik. Szóval mielőtt bevásárolsz alaposan tájékozódj, mert a reszelő nem fogja megoldani a problémát.

HDMI – VGA átalakítók

Ez egy nagyon jó alternatíva, mert a legtöbb szaküzletben még lehet kapni olyan HDMI – VGA átalakítót amivel a számítógépeden lévő HDMI kimenetetre tudod a hagyományos monitorodat kötni. Egy kicsit nagyobb helyet foglal, mint a fenti egyszerű dugók, de néhány ezer forintért ez is könnyen beszerezhető.

delock hdmi-vga converter
forrás : www.delock.com

Display port

Hát ez az a majdnem trapéz alakú luk amit a leggyakrabban tévesztenek össze a HDMI kimenettel. Erővel mindent meg lehet oldani, de nem mindig kifizetődő.

display-port
forrás: Abisys – wikipedia.com

HTML attribútumok – 4. óra

Asz attribútumokról már volt szó a korábbi jegyzetekben is. Néhányat használtunk is a gyakorlatok során.  Az attribútumok feladata a HTML kódolás során az, hogy kiegészítő információval lássák el a HTML elemeket. Minden HTML elemnek lehet attribútuma, de az attribútumokat mindig a kezdőcímkében kell megadni. Az attribútumokat általában név-érték párban szoktuk megadni.

attribútumnév=”érték

A href attribútum

Az egyik leggyakrabban használt elem-attribútum pár az <a href=”… “>hivatkozás szövege</a>

A href attribútum értéke egy URL, amely meghatározza azt, hogy hova mutatnak a hivatkozások.

  • Ez lehet egy abszolút URL, amely pontosan meghatározza a hivatkozás célját (pl.: href=”http://dongopc.atw.hu/zene.html”),
  • lehet relatív URL, valamihez viszonyítva adjuk meg az elérhetőségét ez esetben az aktuális könyvtárhoz képest (pl.: a fenti oldalon elhelyezett linkben href=”zene.html”),
  • de mutathat egy oldalon belüli elemre is, ha az megfelelően azonosítható (pl.: href=”#azonosito”),
  • vagy egy másik protokollra (pl: https://, mailto:, ftp://… stb.),
  • vagy akár egy script is lehet az értéke.

Fájlok forrása

Amikor egy fájl forrását szeretnénk meghatározni egy HTML elemben az src attribútumot használjuk. A korábban bemutatott példákban az src értékét állítottuk be amikor egy audio fájlt hívtunk be a böngészőbe, alább pedig egy kép forrását határoztuk meg vele.

<img src=“viragok.jpg” width=“250” height=“300” alt=“viragos rét”>

Méretező attribútumok

A képek forrása mellett meg kell említeni a méretezés attribútumait is melyekkel a képek és videók szélességét (width) és magasságát (height) állíthatjuk be. A modern weboldalaknak különböző felbontású kijelzőkön is jól kell megjelennie. Másrészt célszerű takarékoskodni a kódolással, egy adott formázási beállítást többször is felhasználhatunk egy webhelyen. Ezért ritka, hogy pl. a képek méretezését a HTML elemekben végezzük el. A dokumentumok formázását a jövőben stíluslapokon fogjuk elvégezni, ám most még a könnyebb érthetőség miatt az elemcímkékben is kísérletezhetünk ennek az értékeivel.

<img src=“viragok.jpg”width=”250” height=”300alt=”viragos rét>

Alternatíva – alt

Ahogy már korábbi példákban szerepelt az <img> elem nélkülözhetetlen attribútuma az alt attribútum. Abban az esetben jelenik meg a tartalma, amikor a weblapon elhelyezett kép valamilyen oknál fogva nem jeleníthető meg. Ez leggyakrabban e-mailben érkező weboldalaknál fordul elő, ugyanis a legtöbb levelezőprogram alapértelmezetten biztonsági okokból letiltja a képek megjelenítését. Gondolnunk kell azokra  a látogatókra is, akik valamilyen kisegítő lehetőségként felolvasó szoftvert használnak az internet böngészésére. Számukra az egyetlen információ az oldalon elhelyezett képek tartalmáról az amit az alt értékeként megadtunk.

<img src=“viragok.jpg” width=“250” height=“300” alt=“viragos rét”>

Style – stílus mint attribútum

Egy elem megjelenését azaz stílusát módosíthatjuk ennek az értékével soron belül is. A dokumentum további részére nem hat ki. Értéke lehet szín, méretezés, szövegrendezés és még sok lehetőség, de ezeket a CSS résznél bőségesen fogjuk tárgyalni. Soron belüli használat során felülír minden globálisan meghatározott formázást.

<p style=“color:blue;font-size:46px;”>
Nagy kék <strong>vastag</strong> szöveg
</p>

Lang – nyelv beállítása

Ez egy fontos érték, a segítségével közölhetjük a böngészővel, hogy az adott elem milyen nyelven íródott. A nyelvi beállítás nem azonos a betűkódolás beállításával.

<!DOCTYPE html>
<html lang=”en-US>
<body>

</body>

</html>

Helyes szintaxisa: <elemcímke lang=“nyelvi kód”>. HTML5-ben már bármelyik elemhez hozzáadhatjuk, a régebbi verziókban még voltak kivételek. A fenti példában globálisan adtuk meg az attribútumot, tehát az egész HTML dokumentumra vonatkozni fog. Az értéke “en-US” a kisbetűvel szedett rész a nyelvi kód, a nagybetűs rész pedig a dialektusra utal, ha van ilyen. Jelen esetben amerikai angol. A nyelvi kódokat egy ISO szabványban az ISO 639-1 szabványban határozták meg. A magyar nyelv kódja hu, vagy hu-HU.

Kódolási ajánlás

A HTML5 címkékben nincs előírás arra, hogy kicsi vagy nagybetűvel kell e beírnunk a kódot. Az általános ajánlás az, hogy ahol csak lehet használjunk kisbetűt. A példákban általában mi is kisbetűvel kódolunk. A paraméterértékeket ajánlott idézőjelek vagy aposztrófjelek közé tenni, nem létfontosságú, de ajánlott. Ha értékként idézőjelet szeretnénk használni, tehetjük azt aposztrófjelek közé is.

<h1 title=‘Don “Dragon” Wilson’>A véres játék hőse</h1>

Végül összefoglalva a mai leckét videó helyett a szélesebb kijelzővel rendelkező olvasók működés közben is megtekinthetik az attribútumokat az alábbi kód mellett. Bal oldalon a forrsákód látható, jobb oldalon pedig az eredményét lehet kipróbálni.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XqeGoR” default_tab=”html,result” user=”dongopc”]See the Pen <a href=’https://codepen.io/dongopc/pen/XqeGoR/’>XqeGoR</a> by Zoltán Tábit (<a href=’https://codepen.io/dongopc’>@dongopc</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

 

 

Megőrült a billentyűzet

Megőrült a billentyűzet, vagy nem tudom mi történhetett? Nem tudom járt-e már valaki úgy, hogy amikor pont szüksége lett volna rá, bemondta az unalmast a munkaeszköze. Hát én pont így jártam ma. Megőrült a laptopom, vagy elromlott a billentyűzete, vagy ki tudja mi történhetett vele?!

Laptopbillentyűzet hibakeresés

Amikor elkopik a suszter cipője… kb. ahhoz hasonló szituáció amikor megadja magát az informatikus számítógépe. Régóta javítok már számítógépeket. A Dongó PC-ben én végzem a szoftverhibák felderítését, én vagyok a szoftveres. Ám ilyen hibával még nem találkoztam (a rövidzárlatot kivéve), amikor a billentyűzet valami őrült tudós körmönfont terve alapján a lehető legrosszabb pillanatban kezd furcsán viselkedni. örult-tudos

Mit tesz ilyenkor egy informatikus?

  1. kétségbeesik,
  2. iszik még egy kávét,
  3. megkeresi a hibát.

Az első két lépésen 10 perc alatt túljutottam, aztán szépen összeszedtem a gondolataimat és nekiálltam a munkának – csak úgy óvatosan – szoftveresen. Miután átgondoltam hogy víz nedvesség nem érhette, melegedés nem volt, sőt amikor kikapcsoltam még minden rendbe ment reménykedni kezdtem, hogy biztos csak valami szoftveres probléma lehet. Néhány évet megélt már velem, és talán már az ideje is itt van, hogy nyugdíjba küldjem ezt a 4-5 éves ultrabook-ot, azért még egy picit kibírhatná velem.

Belépés a BIOS-ba

Ha Windows-ban van a hiba akkor annak nem kéne jelentkeznie a rendszer betöltődése előtt. Több felhasználói fiók van a gépen, először is megpróbálok belépni egy másik fiókkal, hátha csak az adott fiókba íródott bele valami programhiba. Miután kitapasztaltam az “új billentyűzetet”, sikerült elővarázsolnom a megfelelő jelszavat (kis ollózgatás, némi BS), belépés után sem szűnt meg a probléma, még az oly nagyra értékelt Jegyzettömb is rejtett képességekkel rukkolt elő: az [e] betűre beírta a pontos időt és dátumot. Ez a trükk a jövőben még jó lehet – gondoltam -, de a bejelentkezési problémák is előrevetítették, hogy legalább rendszerszintű a probléma. Irány a BIOS. UEFI alaplapoknál a megfelelően telepített rendszer nem engedi olyan könnyen a belépést a BIOS-ba, Windows esetén (8-tól felfele), a rendszert kell megkérni rá, hogy a következő indításkor lépjen be nekünk. A helyreállítási konzolon “Speciális rendszerindítás” parancs alatt be is tudjuk állítani ezt. De nekem nem volt szerencsém, a BIOS-ban is furcsán viselkedett a laptop billentyűzete.laptop billentyűzet

Google a barátom

Nagyon úgy néz ki, hogy a probléma hardveres, itt az ideje felkeresni közös barátunkat Google-t. A problémát megtaláltam idegen nyelven, de néhány troll okoskodásán kívül tényleges megoldást nem találtam. Ha a Google nem is, van valaki aki mindent tud… “Nekem nincs szükségem a Google-ra, a feleségem tud mindent” tartja a mondás, hát írtam is neki…

…És tényleg! 😀 A családban ő a hardveres, és találkozott már hasonló hibával egy szervizelt laptopon, emlékei szerint a bejelentkező-képernyőn a nyelvi beállításokkal kellett valamit vacakolni. Még egy próba… de sajna Windows 8.1 alatt nincs ilyen lehetőség.

Rosszindulatú programok, vírusok

Az informatikus lusta ember. A Tesco messze van. Szóval mielőtt elugrottam volna egy másik billentyűzetért gondoltam adok egy utolsó esélyt a sokat emlegetett Windows-elmebajnak, és megnézem a vírusokat. Jogtiszta szoftvereket használok, de még aktív vírusvédelmi szoftver mellett is előfordulhat, hogy egy számítógép megfertőződik valamivel még a nagy nevű cégek termékei esetén is, ahogy volt infótanárom mondta sokszor:

“Egy fecske nem csinál nyarat.”

Valamikor amikor a kéretlen reklámprogramokra vadásztam a Chrome beépített víruskeresőjével persze eredménytelenül, maga a Google ajánlott fel egy programot, ha a Chrome nem jár sikerrel. Most is ezt a programot poroltam le, a frissítések telepítése után el is indult a keresés…

És láss csodát talált is 6 fertőzött fájlt valahol a Chrome felhasználói profilomon beleül. Én használom a Chrome felhőszolgáltatását a böngészési adatok szinkronizálásához, és ez a funkció talán egy bővítménnyel együtt átvitte a másik Windows profilba is a fertőzött fájlokat.

Vírusok eltávolítása

Nálam a Windows 10-re frissítés sajnos tönkre vágta a merevlemezre telepített gyári helyreállító fájlokat, szóval rendszer-visszaállítás egyelőre nem működik. Ráadásul az öreg ultrabook szoftvertámogatása is megszűnt a Windows 8.1-el, szóval driver-hiány miatt kénytelen voltam rövid idő múlva “Downgrade”-elni a Windowst. Ez azt a problémát hozta magával, hogy nincs automatikus helyreállítás.

Csak óvatosan a fertőzésekkel… első lépésben karanténba helyeztem a fertőzött fájlokat. És megtörtént a csoda! A következő bejelentkezésnél minden jól működött… Na de ilyet, még most sem teljesen világos, hogy akkor hova mi íródhatott be, hogy még a BIOS-ban is rendetlenkedett a billentyűzetem. De a probléma megoldódott.

A következő lépésben gyors kitakarítottam a Chrome böngészőt, töröltem a mentett fájlokat és visszaállítottam a gyári beállításokat. A mai nap telepített bővítményeket remélhetőleg más gépeken nem frissíti majd. Végül a karantén tartalmát is töröltem biztos ami biztos alapon. Az vírusvédelemnek úgyis meg volt már ez az “ajándék” az adatbázisában.

Lehet hogy lesz még folytatása ennek a történetnek, vagy lehet hogy más is jár hasonlóan a jövőben. Én a gyors keresésben nem találtam megoldást az interneten, ezért talán neked is segítségedre lehet az esetem, ha te is így járnál a jövőben.

számítógép vírus

Dokumentum struktúra és az alapelemek – 3. óra

Ahogy a nyomtatott dokumentumokban kialakítunk egy struktúrát, ugyanígy szükség van valamilyen rendezettség kialakítására a HTML dokumentumokban is. Egy nyomtatott dokumentummal szemben egy weboldalnak nem csak az olvashatóság miatt kell bizonyos formai követelményeknek megfelelni. Bár kétség kívül a legfontosabb a tartalom emberi fogyasztásra való alkalmassá tétele.

 

Figura nagyítoval
Kattints a figurára!

A XXI. század modern eszközei olykor még a “mesterséges intelligencia” felhasználásával is fürkészik minden egyes másodpercben viselkedésünket, és az általunk fogyasztott tartalmakat. Talán mindenki hallotta már a keresőrobot kifejezést, de ha nem, az biztos hogy senkinek sem kell bemutatni a Google-t az egyik legismertebb internetes keresőprogramot. Nem a Google az egyetlen keresőprogram az interneten, ott van még mellette a Bing, a Yahoo és a Yandex, hogy csak az ismertebbeket említsük, vagy ott a különc DuckDuckGo is.

Keresőrobotok a XXI. században

Mit várunk mi a keresőrobotoktól, és hogy lehetséges ez?

Nekem kicsi koromban mindig azt mondta az édesanyám, hogy az a jó számítógép, amelyik minden kérdésre tudja a választ. Ha csak ennyi lenne az elvárásunk a modern keresőprogramokkal, és az internet segítségével már nagyon sok “jó számítógépet” el lehetne adni a boltokban.

Amikor elromlott a közel húsz éves autóm rákerestem a hibákra az interneten és azt vártam a Google majd megmondja mit kell csinálnom. Majd amikor egy pár hét múlva még valami elromlott, már a gondolataimat is kitalálta és néhány szó begépelése után kiegészítette velük a keresőkifejezést

– Hogy lehetséges ez?

Azt, aki valami titkos összeesküvést sejt a jelenség hátterében, ki kell ábrándítanom nem történt csoda, és nem az UFO-nauták ültettek telepatikus képességekkel rendelkező halacskát a fülünkbe, hogy lehallgassák a gondolatainkat. Egyszerűen az adatok világméretű feldolgozásának eredményét, strukturált értelmezését látjuk viszont egy weboldalon megjelenítve a mi igényeinkre szabva.

Strukturált tartalom és egy kis SEO

Azt a munkát, amit azért végzünk, hogy egy webhely minél jobb pozíciót foglaljon el a keresőmotorok találatai között keresőoptimalizálásnak, vagy idegen szóval SEO-nak (Search Engine Optimization) hívjuk. Ezen belül is megkülönböztetünk on-site és off-site SEO-t. Ennek a cikksorozatnak nem célja hogy a SEO eszközeit tárgyalja, de időnkét említést teszünk majd egy-egy eleméről, ha az szorosan kapcsolódik a tanult anyaghoz. Ám fontos tudni hogy a technika villámgyors fejlődésével a keresőoptimalizálás külön szakmává vált a weboldalkészítésen belül. Egy modern mobiltelefonra optimalizált weboldalnál még az is szempont, hogy a felhasználó hol érinti meg a képernyőt, miközben az általunk gyártott tartalmat fogyasztja. A jövőben valószínűleg a tartalom által kiváltott érzelmi reakció is egy szempont lesz (pl. iphone 3d face recognition) a keresők által készített rangsorban ugyanazon keresőkifejezésre.

 

érintések egy weboldalon
Érintéstérkép a heatmap oldalán

A címek hierarchiája

Ahhoz hogy a keresőmotorok is tudják mit tartalmaz az oldalunk, mik a kulcsfontosságú információk, illetve az olvasók is könnyen áttekinthessék a szöveget, elengedhetetlen valamiféle ügyesen megtervezett hierarchia kialakítása. Szerencsére a HTML mindkettőre szinte egyetlen lépésben ad lehetőséget.  Az egyik ilyen elem a Címsor.

A HTML5 dokumentum alapvető felépítéséről az előző óra anyagában már volt szó, de ott még csak egyetlen címsort használtunk. Ahogy a szövegszerkesztőben úgy a HTML dokumentumokban is lehetőségünk van címek és alcímek segítségével hierarchia kialakítására az oldalon. A szabvány szerint a HTML hat különböző cím jelölésére ad lehetőséget, ezeket az elemeket szokás szerint nyitó és záró tag-ekkel jelöljük.

<h1>Legnagyobb és legfontosabb cím</h1>

<h2>nagyobb és fontosabb</h2>

<h3>nagy és fontos</h3>

<h4>kicsi és kevésbé fontos</h4>

<h5>még kisebb és kevésbé fontosabb</h5>

<h6>legkisebb és legkevésbé fontosabb címsor</h6>

H1-H6-ig tag

Ennek ellenére nagyon ritka az, hogy mind a hat tag-et felhasználjuk egy weboldalon. A Dongó PC webhelyén legtöbbször a h1 és h2 címsorokat használjuk, néha h3 is előfordul, de ennél kisebb kiemelésre még nem volt szükség. A címsorok a keresőmotorok számára is fontos információt hordoznak az oldal tartalmáról.

Bekezdések a weblapon

Miután kigondoltuk a figyelemfelhívó címsorokat, ki is kell fejtenünk azokat. A könyebb olvashatóság érdekében gondolatainkat érdemes bekezdésekre tagoltan megjeleníteni. Erre az angol paragraph (bekezdés, cikkecske) szó rövidítéséből a <p> tag szolgál. A bekezdéseket nyitó és zárótagok közé kell helyeznünk valahogy így:

<p>Ide kerül az új bekezdés szövege…</p>

Megfigyelhetjük, hogy egy HTML dokumentumban az internetböngésző csak azokat a formázásokat hajtja végre, amire mi utasítást adunk. A sortörést automatikusan elvégzi a képernyő széléhez érve, hacsak valami más parancsot nem adtunk. Ha mi magunk szeretnénk sortörést beszúrni, akkor erre egy üres elem a <br>  szolgál. Az üres elemeket HTML5 szabványban nem szükséges bezárni, ha valamiért mégis szükségünk lenne rá (XML kompatibilis dokumentum), rögtön a nyitó tag-ben kell megtennünk: <br />.

A HTML dokumentumok nem szabványos A4 papírméretre készülnek, hanem a különböző méretű és felbontású monitorok képernyőjére. Ráadásul a mobilinternet elterjedésével nem csak számítógép monitorára, hanem az okostelefon apró kijelzősére is gondolnunk kell. Erről még sokat fogunk beszélni a CSS résznél a HTML alapok után.

html5 paragraph
Bekezdés a HTML-ben

Lista és a felsorolás

A háziasszonyok biztosan néztek már receptet az interneten. A hozzávalókat nem biztos hogy könnyű lenne megtalálni egy bekezdésen belül folyó szövegben. Szerencsére erre is van megoldása a HTML két fajta lista megjelenítésére is lehetőséget ad, az egyik a rendezetlen (unordered), a másik pedig a számozott rendezett (ordered) lista. A listák készítése eltér az eddigi gyakorlattól, mert nem csak a lista kezdetét és végét kell jelölnünk tag-ekkel, hanem a listán belüli listaelemek kezdetét és végét. Ezek a tag-ek szintén az angol szavak rövidítéséből származnak. Rendezett listát jelölő tag: <ol>, a rendezetlen listáé <ul>, a listaelemeket pedig <li> tag-gel kezdjük. A HTML elemek egymásba ágyazhatók, de mindig figyelni kell arra hogy a belső elemet még a külső elem lezárása előtt zárjuk.

lista
HTML lista

Hivatkozások és attribútumok

A weboldalakon a navigáció megkönnyítése érdekében linkeket (hivatkozások) helyezhetünk el. Alapvetően megkülönböztethetünk külső és belső linkeket az alapján hogy az a mi webhelyünkre, vagy egy másik külső helyre mutat. A link jelölésére a HTML-ben az <a> tag szolgál. A link célját a href attribútum határozza meg, értéke pedig a hivatkozás címe lesz, ahova a link mutat, kattintáskor ide viszi az olvasót. az attribútumot a nyitó tag-en belül kell elhelyezni, plusz információval egészíti ki a különböző elemeket. Az értéket idézőjelek között kell megadni. A HTML5 nem kis-nagybetű érzékeny, de ajánlott minden a tag-eket kisbetűvel írni. Az alábbi példa egy olyan linket tartalmaz ami külső hivatkozásként a zagyva szövegek oldalára visz.

<a href=”https://hu.lipsum.com/”>Lorem ipsum</a>

Természetesen a böngésző csak a Lorem ipsum feliratot jeleníti meg, a tag-eket nem. A hivatkozások mutathatnak ugyanabban a mappában egy másik HTML dokumentumra is, vagy egy másik mappában lévő fájlra is, de akkor az elérési utat is meg kell adnunk.

<a href=”/pictures/pictures.html“>Képek</a>

Ezzel viszont legyünk óvatosak, mert bár a Windows nem tesz különbséget a kis- és nagybetűk között, más operációs rendszereknél /pictures/pictures.html és a /pictures/Pictures.html két különböző fájlt jelent. Nem biztos hogy beállították ennek a kiküszöbölését a webszerveren.

Még egy gondolat: ha elvittük a  látogatót egy oldalra a webhelyünkön belül érdemes abban is segíteni, hogy visszataláljon. Erre is készítsünk neki egy linket. Legyen a példa kedvéért a kezdőoldalunk neve index.html (szabványos kezdőoldal), ahol egy listában soroljuk fel a receptekre mutató linkeket. Amikor az olvasó egy ilyen hivatkozást követve elolvasta a pörkölt receptet gondoskodnunk kell arról, hogy visszajusson a receptlistát tartalmazó oldalunkra, ha meggondolta volna magát és valami mást főzne.

<a href=”/index.html”>Vissza a főoldalra</a>

Képek a weblapon

A fenti példákat követve tegyük fel, hogy szeretnénk egy szakácskönyvet készíteni. Tudjuk már hogy adhatunk címet neki, azt is tudjuk hogyan adhatjuk meg a különböző ételek alcímeit, és a hozzávalókat szépen listában felsorolva. De szeretnénk az elkészült ételekről fotókat is közzé tenni a honlapon.

A képek dokumentumba ágyazására az <img> tag szolgál. A képeknek több attribútuma is van ezeket illik mind megadni.

<img src=”dongo.jpg” alt=”rovar” width=”100″ height=”150″>
Az attribútumok pedig:
  • src – a kép forrása, ha ugyanabban a mappában van mint az oldal akkor elég csak a kép neve, egyébként viszont az elérési út is kell,
  • alt – egy alternatív szöveg, ha a kép nem jelenik meg valamilyen oknál fogva (letiltották a képeket, vagy át lett helyezve máshova), vagy ha a látogató felolvasó programot használ,
  • width – a kép szélességét határozza meg képpontban,
  • height – a kép magassága szintén képpontban.

Ennyi fért bele a mai leckébe, az oldal alján pedig a gyakorlatról készült videót láthatjátok. Érintőlegesen végigmentünk néhány alapelemen, a későbbiekben még részleteiben is beszélni fogunk a paraméterekről. Tanulni csak úgy lehet, ha eleget gyakorolunk. A <!DOCTYPE html> nevű Facebook-csoportban várunk benneteket a feladatokkal, és ha elakadnátok, vagy valami nem működne nálatok, ott a kérdéseiteket is feltehetitek.

 

A videóban, és gyakorlaton mi a Notepad++ programot használtuk, amely ingyenes és a linkre kattintva letölthető.

Text Editorok és az első kód – 2. óra

Beszéljünk egy kicsit a szövegszerkesztőkről. Számtalan különböző tulajdonságokkal felvértezett program elérhető az interneten, de általában a különböző operációs rendszerek beépítve tartalmaznak egy, vagy két szövegszerkesztő programot.

Szövegszerkesztők csoportosítása

Alapvetően a szövegszerkesztőket három különböző típusra különíthetjük el:

  • Egyszerű – Text editor
  • Professzionális – Word processor
  • Kiadványszerkesztő – Desktop publishing

Bár a weboldal készítéséhez számtalan program fellelhető az interneten, még a profi webprogramozók is gyakran csak egy egyszerű szövegszerkesztőt “editort” használnak. Hogy kinek melyik a legjobb választás, az egyrészt ízlés, másrészt az adott feladatok függvénye.

Word processor

Kezdjük talán a legrosszabb választással (weboldal készítés szempontjából), ez a széles körben ismert MS Word.

MS Word
Microsoft Word – Office 365

A Word alapvetően egy WYSIWYG ((!) What You See, Is What You Get – Amit látsz azt kapod) szövegszerkesztő, nyomtatott dokumentumokat hozhatunk vele létre, ezek a dokumentumok rengeteg szövegformázást, és láthatatlan formázási jelet tartalmaznak. A Word képes a dokumentumokat html formátumba konvertálni, de az így átalakított szöveg sok fölösleges elemet tartalmazhat, ami a későbbi optimalizálás során még problémákhoz is vezethet.

Desktop publishing

A kiadványszerkesztőket alapvetően nyomdai célokra tervezték, erősségük a tipográfiában van. Bár ezek között is vannak már “hibrid” termékek (pl. Adobe InDesign), melyek képesek weboldalak előállítására, egy oldal funkcióinak beállításakor lehetnek nehézségeink. Az ilyen programok több nyomdai szakember munkáját hivatottak kiváltani, és professzionális oldalak létrehozásához, nagyon magas szinten kell elsajátítani kezelésüket.

Text editor

A text editor, vagy más néven egyszerű szövegszerkesztő az egyik legjobb választás kódolására. A különböző programozási nyelvekhez rengeteg segítséget nyújthatnak a parancsok szintaktikai kiemelésével, vagy a kód automatikus tagolásával, rendezésével.

Egy weboldal készítésekor a kódolás során mi magunk mondjuk meg a böngészőnek hogyan kezelje különböző tartalmakat. Az internet fejlődésével egyre szélesebb körű tartalmak megjelenítését várták el a böngészőtől az emberek. Kezdetben elég volt az egyszerű szöveg, meg néhány kép. Később mindenféle bővítményekkel (plugin) egészítették ki a böngészőjüket, hogy az képes legyen megjeleníteni animációkat, zenét, videót. A HTML5 ezen a téren is követte a fejlődést a W3C sztenderdjei szabványosították az új elemek kódolását is, így a modern böngészők bővítmény nélkül is képesek megjeleníteni pl. egy HTML5 weboldalon lévő videót. Egy nagyobb weboldal szerkesztése közben több különböző kódnyelvet használhatunk a html-be ágyazva.

Notepad – Jegyzettömb (Windows)

Tanulás szempontjából úgy hisszük a legjobb választás mindenképp egy egyszerű szövegszerkesztő. A Windows beépített szövegszerkesztője a Notepad, melyet a Windows-menübe gépelve könnyen megtalálhatunk megfelel erre a célra.

notepad editor

A weboldalkészítést csak gyakorlattal lehet elsajátítani, a legjobb módszer a tanulásra, ha mindent kipróbálunk. Keressük meg a számítógépen a Notepadot, gépeljünk bele egy tetszőleges kódot, és mentsük el.

Én ezt a kódot használtam:

<!DOCTYPE html>
<html>
<body>

<h1>Címsor</h1>

<p>Bekezdés…</p>

</body>
</html>

Néhány dologra viszont nem árt figyelni! A Windows a fájlok kiterjesztése alapján dönti el, mihez milyen programot kell társítani. A fájl kiterjesztése az utolsó pont utáni karaktersorozat: “valami.txt” az egyszerű szövegé, “valami.htm” vagy “valami.html” a HTML fájloké. Az, hogy a Notepad bezárása után milyen ikont és milyen programot társít majd a Windows attól függ milyen kiterjesztéssel mentjük el. Az alapértelmezett kiterjesztés a “.txt” Ezért nekünk másképp kell mentenünk, válasszuk a “Fájl” menü “Mentés másként…” parancsát, majd a fájl típusa mező “Minden fájl (*.*)” típus kiválasztása után saját magunk adhatjuk meg a kívánt név után a kiterjesztést.

notepad-mentes
Notepad mentés másként parancsa után

A másik fontos dolog a karakter kódolás beállítása. Dióhéjban a karakterkódolásra azért van szükség, mert a számítógép a betűket vagy más karaktereket számok formájában tárolja. Különböző szabványok terjedtek el arra vonatkozóan melyik számérték milyen karaktert jelent. Erről részletesen olvashatsz a Wikipedia cikkében. Hogy a világ minden pontján ugyanaz a betű jelenjen meg a weboldalakon a különböző számítógépeken ezt is szabványosítani kellett valahogy. Erről a későbbiekben még lesz szó, de most elég annyit tudni, hogy a HTML5 szabványos karakterkészlete az UTF-8. Ne felejtsük el beállítani a jegyzettömbben a megfelelő karakterkódolást is.

Feladat:

Gyakoroljunk, hozzunk létre különböző dokumentumokat, próbáljuk ki mi történik ha átírjuk a kódot, használjunk több sorközt, nézzük meg milyen fájlt kapunk ha nem .html kiterjesztést használunk.

Végül pedig egy kis videó Windows 8.1 és a Notepad használatával.

A Dongó PC és a HTML?

Az Univerzum furcsa összefüggései…

Néhányan feltették a kérdést miért pont Dongó PC, és mi köze van a Dongó PC-nek a weboldalkészítéshez?

A közelmúltban zajló kutatások érdekes összefüggésekre derítettek fényt. Sokan asszociáltak a Transformers című mozifilmben szereplő Űrdongó nevű intelligens, de jószívű segítőkész földönkívüli alakváltó robotra, aki a távoli űrből érkezett a földre  egy Bárka nevű űrhajóval.

űrdongó rajzfilm
Űrdongó az autobot, aki egy volkswagen bogár

Az eredeti rajzfilmsorozatban Űrdongó egy Volkswagen bogárrá tudott átváltozni, és így álcázta magát a Földön. Robottársaitól egy ember iránt érzett barátsága, bátorsága és furfangossága emelte ki.

Ám nem ő volt az egyetlen furcsa bogárhátú csodaautó… vagy talán nem is 1986-ban volt az elő “nulladik típusú” találkozás a kis Dongóval.

Az idősebbek biztosan emlékeznek a ’60-as évek csodakocsijára Herbie-re, aki szintén, egy Volkswagen bogár (!) volt, és különösen erős baráti érzelmek fűzték egy emberhez… Talán arra is emlékeznek, hogy Herbie szívének hihetetlen erejéről tett tanúbizonyságot azzal sorra nyerte embertárásával a versenyeket. A közelmúltban egy különös összefüggést fedeztek fel kutatóink, melyben talán az téridő furcsa jelenségének is szerepe van. Herbie a versenyeken a 53-as rajtszámmal indult, de a csomagtartón (elöl) jól látható egy függőleges elválasztó vonal 5|3…

Herbie a csodakocsi
Herbie a csodakocsi – 5|3

Elképzelhető hogy Herbie száma nem is 53, hanem 5 és 3? A Dongó PC a weboldalkészítéssel foglalkozó cikksorozatában a HTML/CSS legújabb verzióját oktatja. A HTML jelenlegi verziója az 5., a CSS pedig a 3. Vétlen lenne csupán, hogy pont most és pont a mi korunkban találkozunk a kis Dongóval?

A szkeptikusoknak akkor álljon itt még egy érdekesség:

A HTML ami a weboldalak alap építő nyelvezete egy mozaikszó. Kibontva pedig így néz ki:

Hyper Text Markup Language

Ugye, hogy nem hangzik emberinek? Hiper-Szöveg-Jelölő-Nyelv. Talán a földönkívüli intelligencia nyelve ez, mellyel furcsa kódokban jeleznek egymásnak a hipertéren és időn át?

Herbie 5|3, Űrdongó, Dongó PC, HTML5/CSS3… Tarts velünk, kövess minket az interneten és fejtsük meg együtt a földönkívüliek nyelvét hétről hétre jelentkezünk újabb és újabb információval erről a furcsa nyelvről, melyet talán ez a barátságos alakváltó földönkívüli hozott el nekünk ezúttal egy számítógépnek álcázva magát.