1. Bevezető a webes szabványokba

By Karbonade

• Következő leírás — Az internet és a web története, a webes szabványok evolúciója
• Tartalomjegyzék

Bevezető

Régóta volt már egy álmom. A munkám az utóbbi 8-9 évben elég erőteljesen az oktatás körül alakult, néha technikai jellegű könyvek készítésében segédkeztem, amelyekben az emberekkel megismertettük az új technológiákat, máskor új alkalmazottakat kellett betanítanom a cégeknél, amelyeknél dolgoztam, vagy éppen leírásokat szerkesztettem arról, hogy hogyan kell használni az Opera szoftvereit. Természetesen érdeklődök a web iránt is, és nagy támogatója vagyok a webes szabványoknak. Szerettem volna hozzáadni a magam kis szeletét ahhoz, hogy a web egy jobb hely legyen, és itt jön vissza ismét az oktatás, kezdve onnan, hogy az embereket megtanítjuk, hogyan dolgozhatnak együtt, egészen addig, hogy hogyan készíthetnek olyan weboldalakat, amelyek különböző platformokon és eszközökön is működnek. Az utóbbi esetben a webes szabványok használatának kulcsszerepe van, ezért úgy döntöttem, hogy egy olyan dologba fogom fektetni az időm és energiám nagy részét, amellyel segíthetem a webes szabványok elterjedését mind a mai, mind a jövőbeli weben. Ez már egy ideje a fejemben volt, és végül itt az Operánál érett be ennek a gyümölcse. Köszönettel tartozom a munkaadóimnak, hogy még fizettek is azért, hogy ezt megtehessem! Így az egyik álmom végre valóra vált.

Ezekben a leírásokban több hónap kemény munkája van benne (az enyém és még sok más emberé), és egy rendkívül stabil alapot fog nyújtani mindenkinek a webfejlesztés témakörében, függetlenül attól, hogy kiről van szó — ráadásul teljesen ingyenes, elérhető, és nem alapoz korábbi ismeretekre. Főleg az egyetemek számára tartom ezeket hasznosnak, sőt úgy érzem, hogy az egyetemek manapság elég rosszul állnak a webes szabványok oktatása terén. Többször hallottam, hogy egyes diákok azért nem foglalkoznak webfejlesztéssel az egyetemeken, mert most is a már évekkel ezelőtt elavult sablonokat kell használniuk; többször hallottam különböző cégeket panaszkodni arról, hogy az állásra jelentkező ifjú egyetemistákról az interjúkon kiderül, hogy valójában fogalmuk sincs a mindennapi életben használt webfejlesztésről. De ha olyan haladó egyetemen vagy, amelyik a webes szabványok oktatását valóban komolyan veszi, akkor le a kalappal előtte.

Ebben a bejegyzésben a következő témákról lesz szó:

• Miért használd a webes szabványokat? Ebben a részben részletesen bemutatjuk, hogy milyen előnyei vannak a webes szabványok használatának, miért nincsenek még most sem kihasználva, és hogyan segíthetnek neked ezek a leckék, hogy mindezt megoldhasd.
• A tananyag felépítése. Avagy miről lesz szó. Ebben a részben megemlítjük azt is, hogy az oktatók hogyan használhatják fel hatékonyan a leírásokat a kurzusokon.
• Kinek van szüksége ezekre a leírásokra? Kire gondoltunk pontosan, amikor azt mondtuk, „bárki”?
• Tartalomjegyzék. Ugorj ide, ha már eleged van a szövegelésemből, és el szeretnéd kezdeni a tanulást.
• Köszönetnyilvánítás

Miért használd a webes szabványokat?

A fő okok arra, hogy miért érdemes bevonni a webes szabványokat a fejlesztésbe, majd csak a negyedik fejezetben lesz részletesen elemezve, de egy átfogó képet már itt is felállíthatunk. A webes szabványok használatának a következő előnyei vannak:

1. Hatékony kód: ahogy haladsz majd a leírásokban, észreveheted, hogy legjobb módszerek a webfejlesztésben sokszor a kód újra használhatóságára alapoznak — a HTML tartalmat szétválaszthatod a stílustól (CSS) és a működéstől (JavaScript), így a fájlok kisebbek maradnak, a kódot csak egyszer kell megírni, és később bárhol felhasználhatod, ahol újra szükség van rá.
2. Egyszerű karbantartás: ez nagyon közel áll az előző ponthoz — ha a HTML részt csak egyszer írod meg, aztán a stílusokat és a működést csak akkor definiálod (osztályokkal és függvényekkel), amikor szükséged van rájuk, akkor egy későbbi időpontban elég lesz a változást egyetlen helyen elvégezned, és ez az egész webhelyen azonnal megváltozik, ahelyett, hogy mindenütt egyenként elvégezd a módosítást!
3. Hozzáférés: a következő két pont ismét összetartozik — az egyik legnagyobb probléma a weboldalakkal az, hogy hozzáférhetővé tegyük mindenki számára, függetlenül attól, hogy kiről és milyen körülményekről van szó. Ebbe beletartozik az olyan weboldalak készítése is, amelyeket fogyatékos személyek is használnak, mint például vakok vagy gyengénlátók, mozgássérültek (akik nehezen, vagy egyáltalán nem tudják használni a kezeiket). Ha webes szabványokat és a legjobb módszereket használod, akkor képes leszel olyan weboldalakat készíteni, amelyeket a fogyatékkal élők is használhatnak, ráadásul semmilyen extra munkára nem lesz szükséged ehhez.
4. Kompatibilitás: ez alatt azt értem, hogy a weboldalaid nem csak a különböző platformokon (mint például Windows, Mac vagy Linux) fognak megbízhatóan működni, hanem a különböző eszközökön is, amelyekbe manapság beletartoznak a mobiltelefonok, a tévék és a játékkonzolok is. Ezeknek az eszközöknek különböző korlátai vannak, mint például a képernyőméret, a számítási kapacitás, az irányíthatóság vagy sok más egyéb, de a jó hír az, hogy a webes szabványok és a legjobb módszerek használatával szinte egészen biztosan garantálható, hogy a weboldalad a legtöbb ilyen eszközön is működni fog. Jelenleg több mobiltelefon van a világon, mint PC, és ezek nagy része internetképes. Biztosan megengedheted magadnak, hogy egy ekkora piacot teljesen figyelmen kívül hagyj?
5. Webes keresők és keresőrobotok: ez alatt azt értem, amire sok helyen keresőoptimalizálás névvel hivatkoznak. Ismét csak azt tudom mondani, hogy ha a webes szabványokat és a legjobb módszereket használod, akkor a weboldalad a lehető legátláthatóbb lesz a keresőrobotok számára, amelyek pásztázzák a weboldalakat, így az oldalad jobb eredményt fog elérni az olyan keresőkben, mint például a Google. Ennek már saját tudománya van, a SEO, de ismétlem, már csak annyival, hogy webes szabványokat használsz, máris sokat tettél a pozíciódért a keresők találati listájában.

A fenti előnyök ellenére a legtöbb weboldal a weben mégsem követi a webes szabványokat, és rengeteg webfejlesztő még ma is régi, elavult módszerekkel dolgozik szerte a világon. Vajon miért? Ennek sok oka van — sokszor az oktatás hiányosságára vagy a cégük házirendjére hivatkoznak, esetleg hogy nincs szükségük megtanulni a webes szabványokat, mert anélkül is megkapják a fizetést, túl nehéz megtanulni a szabványok használatát… Nézzük meg kicsit részletesebben ezeket az okokat, hogy eloszlathassuk a kifogásokban felmerült félreértéseket.

1. Az oktatás hiánya: ez egy elég nyomós érv, és éppen ez volt a fő oka annak, hogy ez a sorozat elindult. Az egyetemek többsége egyáltalán nem foglalkozik a webes szabványokkal a webfejlesztéssel kapcsolatos kurzusokon, de ha mégis, akkor leginkább csak régi, elavult módszereket tanítanak, és ezen bürokratikus okok miatt általában nehéz változtatni. A könyvek és a speciális oktatások általában drágák. De várj csak! Éppen itt van egy kurzus, ami ingyenes, elérhető az egyetemek számára is, így ez már nem lehet valódi kifogás többé.
2. Céges policy: semmi kétség nincs afelől, hogy rengeteg olyan cég létezik, amelynek régi és elavult a weboldala, ráadásul a házirendben arra kényszerítik az alkalmazottakat, hogy kiöregedett böngészőket használjanak. De a helyzet javul. Most, hogy ingyen elérhető ez a kurzus, amely megmutatja, hogyan léphetnek át ezen a helyzeten, még könnyebb lesz a változás. A webes szabványok használata ráveheti arra is a cégeket, hogy modernebb böngészőket is használjanak, mert a régi böngészőkben a szabványos oldalak már nem mutatnak olyan jól — bár továbbra is működnek azokban is. A felhasználóikat is rávehetik ezáltal a frissítésre. Üzleti előnye is van a váltásnak: azok a weblapok, amelyek webes szabványokat használnak — amint azt fentebb már kifejtettük — jobb eredményeket érnek el a keresőkben, és elérhetőek lesznek a fogyatékkal élő emberek, valamint a más eszközökön internetezők számára is. Biztosan megengedhetik maguknak a cégek, hogy ezeket az előnyöket figyelmen kívül hagyják?
3. „Nincs rájuk szükségem!”: tudom, hogy néhány fejlesztő azt mondja minderre, hogy „de hát én még régi módszereket használok, és mégis megfizetnek — miért vacakoljak ezekkel az új dolgokkal?” Ahogy már fentebb is kifejtettük, a webes szabványokkal a kód sokkal hatékonyabb lesz, könnyebb megírni és könnyebb karbantartani is. Lehetőséged lesz olyan modern kódot írni, amely mindenhol hozzáférhető és használható az alternatív eszközökön is — mindez nem elég izgalmas számodra? De a képességeidet is használhatóbbá teszi a jövőre nézve, így lehetőséged lesz többet keresni. Sok cég már most is megköveteli a webes szabványokban való jártasságot.
4. „Túl nehéz megtanulni!”: badarság. Ha átolvasol néhány leírást ebből a kurzusból, rá fogsz jönni, mennyire egyszerű megérteni a webes szabványok alapjait, akár új vagy a webfejlesztésben, akár csak a tudásodat frissíted. Semmivel sem nehezebb, mint a régi, elavult módszerek használata, viszont rengeteg előnye van ezekkel szemben.
5. Nem minden böngésző támogatja a szabványt: a szabványtámogatás a böngészőkben sokszor jelentősen eltért egymástól, és ez valódi rémálommá változtatta a munkát. De ezeknek az időknek már vége, a modern böngészők mindegyike kiváló szabványtámogatással rendelkezik. Természetesen szükség van arra, hogy régebbi böngészőket is támogassunk, amelyeknek nincs olyan jó szabványtámogatásuk. De ha a legjobb módszereket használod, biztos lehetsz benne, hogy az ilyen régi böngészők felhasználói is még megfelelő támogatást kaphassanak.

Amint láthatod, nem sok kifogásod maradt arra, hogy miért ne használd a webes szabványokat a munkád során. Ha kezdőként érkeztél ide, akkor máris sokkal jobb helyzetből indulsz, mert azonnal a legjobb módszereket tanulhatod meg, és nem kell előtte „elfelejtened” a régieket.

A tananyag felépítése

A kurzus több önálló cikkből épül fel — a végére már több mint 50 cikk lesz —, és mindegyik cikk néhány ezer szóból áll. Mindegyik cikk egy kisebb témára koncentrál, és ha szükséges, megemlít fontos háttérinformációkat és lényeges elméleteket, mindezt hasznos példákkal és egy követhető leírással támasztva alá. A végén a tesztkérdésekkel ellenőrizheted a tudásodat.

Ezen felül hamarosan elkészítünk egy részletes leírást is, amely lépésenként végigvezet egy teljes website elkészítésén az elejétől a végéig.

Egy logikus módszer a kurzus tanítására, hogy számold meg, hány órád van az oktatásra, majd oszd el a cikkek számával. Minden leckénél add ki a diákoknak, hogy előre olvassák át a kapcsolódó cikkeket. Ezután az előadás során mutass be praktikus példákat a témával kapcsolatban, és tedd fel az ellenőrző kérdéseket a diákoknak. Véleményem szerint nagyjából egy óra elég egy-egy téma átvételére, feltéve, hogy korábban már önállóan átolvasták az ehhez kapcsolódó cikket. Így 50 óra tanítás és 50 óra háttérolvasás szükséges a teljes kurzushoz.

Természetesen neked kell eldöntened, hogy mennyi időt fordítasz a kurzus tanítására, és pontosan mit fogsz leadni az egyes leckékben. Egy kis tapasztalattal már könnyen feloszthatod a leckéket.

Kinek van szüksége ezekre a leírásokra?

Ez a webes szabványokról szóló kurzus több részből épül fel, így szinte bárkinek segítségére lehet, aki webes szabványokról szeretne tanulni. A célja az, hogy az olvasót az egyszerű böngészéstől elvigye a CSS és HTML világába, egyszerű tudást adjon JavaScriptek készítéséhez, és hogy átlássa, hogyan illeszkednek mindezek egymáshoz. Mindez elég ahhoz, hogy az ember bizalommal léphessen be a munkapiacra (bár tapasztalatot sajnos nem tudunk adni).

Kinek van minderre szüksége? Azt szeretném, hogy bárki használhassa ezeket, aki szeretné megtanulni a webfejlesztés „helyes útját”:

1. Egyetemi oktatók és diákok: erről már beszéltünk — ezek a cikkek ideálisak egy saját kurzus felépítéséhez, esetleg egy meglévő kurzusod felújításához vagy frissítéséhez. Ha diákként már jársz valamilyen webfejlesztéssel kapcsolatos előadásra, akkor ezzel kiegészítheted a tudásodat, és szólhatsz a tanárodnak is, hogy vegye ezeket figyelembe! Minden tanárnak és diáknak csak ajánlani tudom, hogy nézzék át ezeket a leírásokat, hogy a kurzusokban biztosan a jelenleg elérhető legjobb módszereket taníthassák és tanulhassák.
2. Iskolások már az egyetem/főiskola előtt: bár ezek a leírások elsősorban felnőtteknek készültek, ez nem jelenti azt, hogy a fiatalabbak nem tanulhatnak belőle — egyszerűen nézz körül, és kezdd el a tanulást.
3. Jelenlegi webfejlesztők és webdesignerek: rengeteg olyan webfejlesztő és webdesigner dolgozik, aki nem használja a webes szabványokat és a legjobb módszereket, esetleg szüksége lenne egy könnyen elérhető referenciára, ha utána szeretne nézni valaminek, vagy szívesen felfrissítené a tudását. Ha az első csoportba tartozol, adj egy esélyt ennek a kurzusnak, hogy megtudhasd, miért hasznos a számodra is a webes szabványok használata. Az utóbbi csoportnak ez a sorozat hasznos lehet a képességeik frissítésére, a nehezen felidézhető részletek áttekintésére, vagy olyan indokok keresésére, amelyekkel meg lehet győzni a főnököt a webes szabványok használatának hasznosságáról.
4. Céges oktatók: ez egy ideális mód az alkalmazottak olcsó oktatására.
5. Bárki más: ha egyik csoportba sem tartozol, de szeretnél tanulni valamit a webdesignról és a webfejlesztésről, akkor ez a kurzus egy egyszerű és olcsó mód a számodra.

Tartalomjegyzék

A kezdetek

1. Bevezető a webes szabványokba (Chris Mills) — ezt olvasod jelenleg

A szabványok világa

2. Az internet és a web története, a webes szabványok evolúciója (Mark Norman Francis)
3. Hogyan működik az internet? (Jonathan Lane)
4. A webes szabványok modellje — HTML, CSS és JavaScript (Jonathan Lane)
5. Szép álom, de mi a valóság? (Jonathan Lane)

Webdesign fogalmak

6. Információs Architektúra — egy website tervezése (Jonathan Lane)
7. Mi kell egy jó weblaphoz? (Mark Norman Francis)
8. A színek elmélete (Linda Goin)
9. Egy site keretének felépítése (Linda Goin)
10. Színsémák és designtervek (Linda Goin)
11. Tipográfia a weben (Paul Haine)

HTML alapok

12. A HTML alapjai (Mark Norman Francis)
13. A HTML <head> eleme (Christian Heilmann)
14. Megfelelő doctype választása a HTML dokumentumokhoz (Roger Johansson)

A HTML felépítése

15. Szöveges részek megjelölése HTML-ben (Mark Norman Francis)
16. HTML listák (Ben Buchanan)
17. Képek a HTML-ben (Christian Heilmann)
18. HTML hivatkozások — építsük fel a webet! (Christian Heilmann)
19. HTML táblázatok (Jen Hanen)
20. HTML űrlapok — az alapok (Jen Hanen)
21. Kevéssé ismert szemantikus elemek (Mark Norman Francis)
22. Általános tárolók — a div és a span elemek (Mark Norman Francis)
23. Több lap létrehozása navigációs menüvel (Christian Heilmann)
24. A HTML validálása (Mark Norman Francis)

Hozzáférhetőség

25. A hozzáférhetőség alapjai (Tom Hughes-Croucher)
26. A hozzáférhetőség tesztelése (Ben Hawkes-Lewis)

CSS

27. CSS alapok (Christian Heilmann)
28. Öröklődés és kapcsolódás (Tommy Olsson)
29. Szöveg stílusozása CSS-sel (Ben Henick)
30. A CSS elrendezés modell — box, border, margin és padding (Ben Henick)
31. Háttérképek CSS-ben (Nicole Sullivan)
32. Listák és hivatkozások stílusozása (Ben Buchanan)
33. Táblázatok stílusozása (Ben Buchanan)
34. Űrlapok stílusozása (Ben Henick)
35. Float és clear (Tommy Olsson)
36. Statikus és relatív pozícionálás CSS-ben (Tommy Olsson)
37. Fix és abszolút pozícionálás CSS-ben (Tommy Olsson)

Haladó CSS anyagok

38. Fejlécek, láblécek, oszlopok és sablonok (Ben Henick)

JavaScript alapok

39. Programozás — a valódi alapok! (Christian Heilmann)
40. Mire jó a JavaScript? (Christian Heilmann)
41. Első lépések JavaScriptben (Christian Heilmann)
42. Legjobb JavaScript módszerek (Christian Heilmann)
43. A nem feltűnő JavaScript alapelvei (PPK)
44. JavaScript függvények (Mike West)
45. Objektumok JavaScriptben (Mike West)
46. A DOM bejárása (Mike West)
47. HTML létrehozása és módosítása (Stuart Langridge)
48. Dinamikus stílus — CSS kezelése JavaScripttel (Greg Schechter)
49. Események kezelése JavaScripttel (Robert Nyman)
50. JavaScript animáció (Stuart Langridge)
51. Könnyed leépítés kontra folyamatos fejlesztés (Christian Heilmann)

Kiegészítő leírások

• Tartalom feltöltése online (Craig Grannell)
• Még néhány szó a <head> elemről (Chris Heilmann)
• Kiegészítő: Közös HTML entitások a tipográfiában (Ben Henick)
• Az Opera Webes szabványok tanfolyam fogalomtára — Nem teljes, folyamatosan bővítjük!

Köszönetnyilvánítás

Túl sokan segítettek nekem ahhoz ennek a kurzusnak az elkészítésében, hogy mindenkit fel tudjak itt részletesen sorolni, de remélhetőleg mindenki belekerült. Ezek az emberek nagyszerűek, vegyétek fel velük a kapcsolatot: írjatok nekik, vegyétek meg a könyveiket, olvassátok a blogjaikat és támogassátok őket. Le a kalappal előttük.

1. A szerzők: nagy köszönet nektek, Ben Buchanan, Tom Hughes-Croucher, Mark Norman “Norm” Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes-Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter-Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan és Mike West. Nélkületek ez a kurzus nem lenne.
2. Az Opera csapat: üdvözletemet küldöm Jan Standalnak és David Storey-nek, a csapat többi tagjának, valamint mindenkinek az Operától, aki támogatta az ötletemet, és segített a megvalósításban.
3. A szervezetek: mindenkinek köszönöm a Yahootól (a szerzőknek és Sophie Majornak a szervezést és a reklámozást), a WaSP-nak (különösen Gareth Rushgrove, Stephanie Troeth és Aarron Walter), a Britpack-nek, a Geekup fiúknak és az összes egyetemnek, amelyik érdeklődést mutatott a kurzus iránt és segített a továbblépésben.
4. A személyek: egy kis köszönet jár még a következő embereknek is: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. Remélem nem maradt ki senki.
5. Az olvasók: és végül sokáig éljenek az olvasók, akik időt szánnak erre a kurzusra, hogy jobbá tehessék a webet!

• Következő leírás — Az internet és a web története, a webes szabványok evolúciója
• Tartalomjegyzék

A szerzőről

Chris Mills fejlesztő kapcsolat manager az Operánál. Cikkeket ír és publikál a dev.opera.com és a labs.opera.com oldalakon, kapcsolatot tart az Opera közösséggel a visszajelzések és az Opera népszerűsítésének érdekében, valamint reklámozza az Operát, ahol lehet. Ő szervezte és készítette a Webes szabványok sorozatot.

A munkán kívül nagy zenerajongó, a zenék széles skáláját szereti játszani és hallgatni, többek között metál, folk, punk, elektronika, prog és sok más stílust. A kedvenc zenekara jelenleg a híres Conquest of Steel.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.