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.

 

 

HTML bevezetés – az 1. óra

Mi is az a HTML?

A HTML egy angol mozaikszó “HiperText Markup Language” azaz hiperszöveg jelölőnyelv. Szerencsére ez nem valami földöntúli kód, hanem egy egyszerű leíró nyelv, amely megmondja a böngészőknek, hogyan kell megjeleníteni a dokumentumokat. A weboldalak HTML elemekből épülnek fel. A HTML elemeket címkék jelölik. A címkéket idegen szóval “tag“-nek mondjuk. Ezekkel a címkékkel jelöljük a különböző típusú tartalmakat egy dokumentumban. Ilyen tartalom lehet a dokumentum fejrésze, egy táblázat vagy egy bekezdés. A webböngészők nem jelenítik meg ezeket a címkéket, de ezeket használjuk a tartalom elrendezésére az oldalon.

Nézzünk egy konkrét példát egy egyszerű HTML dokumentumra:

html kód

És akkor jöhet egy kis magyarázat a különböző elemekről:

  1. <!DOCTYPE html> minden HTML5 dokumentumot ezzel kezdünk. Ez a tag mondja el a böngészőnek, hogy ez egy HTML5 dokumentumot fog beolvasni.
  2. <html> gyakorlatilag a dokumentum kezdete,
  3. <head> fejrész elem, ide kerülnek majd a meta információk a dokumentumról,
  4. <title> ez az elem meghatározza a dokumentum címét,
  5. <body> a dokumentum teste, gyakorlatilag a látható tartalom,
  6. <h1> Címsor a dokumentumon belül (a legnagyobb),
  7. <p>bekezdés a dokumentumban.

Az oldal elemit nyitó és záró címkék közé helyezzük

<címkenév>tartalom…</címkenév>

Ahogy a fenti példában látható a zárótag abban különbözik a nyitótagtól, hogy egy / jelet is tartalmaz. Ahogy korábban említettük, a webböngészők beolvassák a HTML dokumentumot és megjelenítik a tartalmát, a címkéket kivéve. Azt hogy hogyan kell kialakítani a megjelenített oldal felépítését ezek a címkék mondják meg a böngészőnek.

HTML oldal szerkezete

Most nézzük meg egy egyszerű oldal szerkezetét!

forraskod
Oldal forráskód (nodepad++)

A könnyebb olvashatóság érdekében a kód begépelésekor tabulátorokat és soremelést is használtunk. Később ez jó gyakorlat lehet számodra is mert így áttekinthetőbb a forráskód.

Most pedig nézzük, hogy jeleníti meg a böngésző a fenti kódot!

firefox html dokumentum
HTML megjelenítése a Firefox böngészőben

Ha összevetjük a kódot a megjelenített lappal, látható, hogy a böngésző csak a <body>…</body> elemcímkék közötti tartalmat jeleníti meg. Hamarosan azt is megtudjuk, mire való a többi terület.

HTML verziók, a <!DOCTYPE> címke

A WWW fejlődésével fejlődött a weboldalakon megjeleníthető tartalom is. Ahhoz hogy a böngészők helyesen tudják megjeleníteni a különböző verziójú HTML webhelyeket, fontos hogy valahol megmondjuk a böngészőnek, hogy most épp melyik verziót kell értelmeznie.

A különböző HTML verziókról olvashatsz a Wikipedián is. Ez a tanfolyam a HTML legújabb verziójával a HTML5-el foglalkozik. A <!DOCTYPE> címkét használjuk a HTML verzió meghatározásához. Rögtön a dokumentum elején egyetlen egyszer kell zárótag nélkül használni. A HTML5 dokumentum helyes címkézése:

<!DOCTYPE html>

Ha kíváncsi vagy a HTML fejlődésére a Wikipedián is olvashatsz róla.

Egy kis történelmi áttekintés:

  • 1991 – HTML
  • 1995 – HTML 2.0
  • 1997 – HTML 3.2
  • 1999 – HTML 4.01
  • 2000 – XHTML
  • 2014 – HTML5

A szabványosítást a W3C konzorcium végzi világszerte vannak irodái, többek között Magyarországon is.

Ennyi volt mára a Webprogramozás óra. A következő alkalommal beszélünk egy kicsit a munkakörnyezetről, a megfelelő szerkesztőprogramról és elkészítjük az első weboldalunkat is. Lehet hogy annak aki egy kicsit már ismeri a weboldalakat unalmas ez a néhány óra, de ahhoz hogy később el tudjátok hárítani a hibákat, fontos hogy az alapjaitól értsétek a weboldalak működését. Ha kérdésetek van, tegyétek fel bátran itt, vagy a Facebook oldalunkon! Ha szeretnétek, csatlakozhattok a tanulócsoportunkhoz is, amit <!DOCTYPE html> néven találtok meg a Facebookon. Ha tetszett a cikk, osszátok meg bátran – segítsétek vele a mi munkánkat – és reméljük mi is segíthetünk vele nektek. Ha véletlen hibát találtok azt is jelezzétek, igyekszünk minél hamarabb kijavítani.

Webprogramozás, a 0. óra

A XXI. században az életünk nagy részét az Interneten töltjük. Híreket olvasunk, magazinokat nézegetünk, bújjuk a közösségi oldalakat, képeket és videókat töltünk fel és zenét hallgatunk az internetről. De vajon hogy lehetséges ez, mi van a színfalak mögött? Ha érdekelnek a válaszok, vagy esetleg szeretnél egy saját weboldalt, akkor ez a tanfolyam neked szól.

html kód

Egy olyan témában szeretnénk a segítségedre lenni, melyre nem csak hobbiként, hanem akár pénzkereseti lehetőségként is tekinthetsz a jövőben. Ez a téma pedig  a webprogramozás. Nagyon sok tanfolyam van az interneten, és egyre divatosabb az online tanulás. Egyre többen csinálnak weboldalakat is, de sajnos egyre több a mekmester-képző, ahol jó pénzért rövid idő alatt hihetetlen tudást ígérnek. Hát van egy jó hírünk és egy rossz is. A mi első két tananyagsorozatunk a HTML5 és a CSS3 teljesen ingyen hozzáférhető lesz a honlapon. Ha végigköveted velünk ezeket a leckéket képes leszel arra, hogy rendezett formában elhelyezz tartalmakat egy weboldalon, és azt is megtanulhatod, hogyan módosítsd ennek a tartalomnak a megjelenítést, beleértve a mai világban elengedhetetlen reszponzív (képernyőmérethez illeszkedő) weboldal készítését is.

Mi mindent megteszünk azért hogy segítsünk, és elmélyíthesd a tudásodat, mert hisszük azt, hogy ez a tudás mindenkié. Bármekkora munkát is fektetünk bele, kevesek vagyunk, ahhoz hogy megértsd hogy működik ez az egész, hogy sikeres legyél, kell még hozzá egy nagyon fontos tényező! Ez pedig te vagy. A te munkád, a szorgalmad az egyik legfontosabb. Hosszú lesz az út, és sok gyakorlás kell a sikerhez, de nem leszel egyedül, mert mi ott leszünk neked, ha elakadtál segíteni tudunk. És ott lesz még veled az élmény, ahogy lassan lépésről lépésre kialakul a saját weboldalad, melynek minden egyes centimétere, vagy pixelje a te kezed műve lesz.

 “Saját weboldalt szeretnék, mi kell hozzá?”

Nekem három dolog is eszembe jutott. Mindháromnak van előnye és hátránya is.

  1. Valamilyen weboldal készítő programot használsz. Az előnye, hogy gyorsan elkészítheted a weboldalad, csak a programot kell megtanulni használni. Viszont két hátránya is van; bármennyit is gyakorolsz vele csak annyit fogsz tudni, mint amennyit a program. Ahogy fejlődik a technika ez a tudás elavult lehet, és egy új programot kell vásárolnod, és kezdheted elölről a tanulást, ráadásul bonyolultabb dolgokat lehet meg sem tudsz majd valósítani vele.
  2. Valamilyen előre gyártott tartalomkezelő rendszert (CMS) rendszert használsz, ezzel már valószínűleg dinamikus tartalmat is (pl. adatbázisból generált adatokat) feldolgozhatsz, a Dongó PC is egy ilyen rendszerre épül (bár van benne kis szegelgetés), azért ennek is van hátránya. Ha valami egyedi dolgot szeretnél megvalósítani vagy vársz hogy valaki megírja neked a funkciót, vagy megbízol egy webprogramozót aki nem csak a programozáshoz ért, hanem ismeri a te kedvenc CMS-edet is. A másik nagy probléma, hogy ezek a rendszerek egy általános, mindenkinek mindenre jó legyen séma alapján készülnek. Sokszor fölöslegesen bonyolultak, és néha felesleges funkciókat is tartalmaznak. A bonyolult kód több hibalehetőséget és lassabb működést eredményez. Néha a hibák elhárítása komoly webprogramozói tudást is igényelhet.
  3. A végére hagytam a jó hírt meg a rosszat is. Mi a harmadik utat fogjuk bejárni, és talán akkor kezdjük a hátrányokkal. Ez a legnehezebb út, de nem kell megijedni a HTML/CSS-t bárki meg tudja tanulni, könnyebb lesz, mint egy idegen nyelvet elsajátítani. A jó hír pedig az, hogy teljes a szabadság, a weboldaladnak csak a fantáziád szabhat határt. Az itt megszerzett tudást pedig később még tartalomkezelő rendszerek szegelgetésére is felhasználhatod.

Nos, ha még mindig nem menekültél el akkor még egy jó hírem van, ehhez az egészhez nem lesz szükséged semmilyen különleges eszközre, vagy programra, csak egy webböngészőre (Chrome, Firefox), és egy egyszerű szövegszerkesztőre, mint a Notepad (Windows), a TextEdit (MAC) vagy a Gedit (Linux) alatt. És természetesen egy számítógépre billentyűzettel, elektromos feszültségre a konnektorban, és ha van macskád szükséged lesz egy radiátorra vagy legalább egy kartondobozra is, mert a macskák előszeretettel ülnek a monitor elé, vagy a laptop billentyűzetre ha az a legmelegebb pont a lakásban.

Remélem sikerült egy kis kedvet csinálni a tanuláshoz, és ha úgy érzed hasznos volt ez az információ legyen a napi jó cselekedeted hogy megosztod másokkal is.

cica dobozban