Webes szabványok

A fordítások hamarosan új oldalra költöznek (az első három cikk fordítása már át is került), és nemsokára mindegyik fordítás elköltözik, mégpedig az eredeti cikkek oldalára, a Dev.Opera oldalra. Ennek több előnye is van, egyrészt így az angol cikkben is lesz egy direkt hivatkozás a fordításra, ráadásul végre teljesen valid lesz az oldal.

Hogy az RSS, a kommentek és más hivatkozások megmaradjanak, az itteni fordításokat nem törlöm, hanem ezentúl az új helyre fognak mutatni. Ha kerül fel új fordítás, arról is lesz itt még egy rövid bejegyzés, így nem maradtok le semmiről.

Ez a bejegyzés a webes szabványok huszonkettedik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.

Bevezető

Ebben a leírásban be fogom mutatni, hogyan és mikor használatod a HTML-ben azt a két elemet, amelyek nem a tartalom leírására szolgálnak. A div és a span elemek ugyanis semmilyen jelentést nem rendelnek ahhoz a tartalomhoz, amit közrefognak, hanem egy általános módszert biztosítanak ahhoz, hogy a tartalmat olyan saját struktúrába vagy csoportokba rendezd, amelyre nincs más, odavaló HTML elem. Az ilyen csoportokat aztán CSS-ből stílusozhatod és JavaScripttel módosíthatod is. Habár a div önmagában nem tartalmaz szemantikus jelentést a dokumentumban, mégis tekinthetjük úgy, mint egy strukturált felosztást elősegítő jelölést, a megfelelő szemantikus osztály- vagy azonosító névvel együtt.

Ezeket a tageket csak „végső esetben” használjuk, amikor már semmilyen más HTML elemet nem tudunk felhasználni, mivel ezek az elemek már semmilyen plusz információt nem hordoznak például a kisegítő technológiák, keresőmotorok számára.

A leírás felépítése a következő:

• Szemantikailag semleges
• Inline kontra blokk
• Példa a tartalom felosztására
• Extra információk
• Kapaszkodók a JavaScriptekhez és CSS-hez
• div-itis
• Helytelen szemantika
  • Általános „bekezdések”
  • Prezentációs elemek
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok huszonegyedik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.

Bevezető

Ebben a leírásban néhány kevéssé ismert és ritkán használt szemantikus elemet fogok bemutatni a HTML-ből. Megnézzük, hogyan lehet programozási kódot megjelölni, számítógép kimenetet jelölni, idézeteket és rövidítéseket megadni, a dokumentumok változásait megjelölni, stb. A végén még bemutatok néhány új szemantikus jelölést a HTML 5 vázlatából.

• Kapcsolat információk kiemelése
• Programozási nyelvek és kódok
• Számítógépes kimenet megjelenítése
• Változók
• Idézetek
• Rövidítések
• Példányok definiálása
• Felső- és alsó index
• Sortörések
• Vízszintes vonalak
• Dokumentumok változása (beillesztés és törlés)
• Néhány jövőbeli HTML elem
• Összefoglaló

Megjegyzés: minden példakód mögött találsz egy „Forrás megtekintése” hivatkozást, amelyre ha rákattintasz, akkor megnyithatod a példakódhoz tartozó oldalt, hogy láthasd, hogyan jelenik meg a böngészőben — így élő példákat kapsz a felsorolt elemekhez, és a forrást is könnyen megnézheted vagy módosíthatod.

Ez a bejegyzés a webes szabványok huszadik leírása. Az eredeti, angol nyelvű cikket Jenifer Hanen írta.

Bevezető

Mindenki látott már űrlapot. Minden használt már űrlapot. De kódoltál már ilyet valaha?

Az online világban űrlapnak nevezünk minden olyan részt a weblapokon, ahová információt tudsz begépelni, például amikor szöveget és számokat írsz egy szövegmezőbe, amikor bejelölsz egy mezőt, amellyel ki tudsz választani egy pontot, vagy kiválasztasz egy lehetőséget egy listából. Az űrlap tartalmát ezután egy gombra kattintva küldheted el a weblapnak.

A weben nagyon sok helyen találkozhatsz űrlapokkal, például amikor meg kell adnod a felhasználóneved és a jelszavad egy belépéshez, ha hozzászólsz egy blogon, kitöltöd a profilodat egy közösségi oldalon, vagy amikor megadod a fizetési adatokat egy vásárlás során.

Űrlapot könnyű készíteni, de mi a helyzet a webes szabványoknak megfelelő űrlapokkal? Mostanra már remélhetőleg sikerült meggyőznünk arról a tanfolyam korábbi részeiben, hogy a követendő út mindig a szabványos megoldás kell legyen. Szerencsére a hozzáférhető, szabványos kód megírása egyáltalán nem igényel nagyobb ráfordítást, mint egy akármilyen űrlap összedobása.

Szóval kezdjük egy alapvető és egyszerű űrlap készítésével, amelyet már használni lehet, és ebből készítsünk egy összetettebb űrlapot. Ebben a leírásban bemutatjuk az alapokat, amelyek segítségével már képes leszel egy elegáns, hozzáférhető HTML-alapú űrlapot készíteni. A leírás felépítése a következő:

• Első lépés: Az alap kód
• Második lépés: Struktúra és funkció
• Harmadik lépés: Szemantika, stílus és még egy kis struktúra
• Összefoglaló
• További olvasnivalók
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizenkilencedik leírása. Az eredeti, angol nyelvű cikket Jenifer Hanen írta.

Bevezető

„Ó jaj!” — hogyan tudom a webes szabványokkal ezt a rengeteg adatot megjeleníteni? A lelki szemeid előtt talán már meg is jelentek a többszörösen egymásba ágyazott elemek, amelyek szépen sorokba és cellákba szabályozzák az adathalmazt… de nem kell aggódnod, van megoldás — a táblázatok segítenek!

A webdesignban a táblázatokat nagyon jól lehet használni arra, hogy az adatokat rendezett módon jelenítsd meg. Más szóval, a táblázatokra, diagramokra és a többi hasonló grafikonra gondolhatsz úgy is, hogy ezek segítenek az információk összehasonlításában, kontrasztba állítják a különböző adatrészeket. Gyakran láthatsz ilyeneket weblapokon, például az elnökválasztás szavazatainak összehasonlításakor, sport statisztikákról, árak összehasonlításakor, méretek megjelenítésekor és még sok másféle adat esetén.

Az internet őskorában, még mielőtt a CSS elterjedt volna, mint egy HTML-től különálló prezentációs réteg, a táblázatokat gyakran használták a weblapok elrendezésének beállítására — oszlopokat, dobozokat hoztak így létre, és ezzel helyezték el a weblap különböző részeit az oldalon. Ez a lehető legrosszabb módszer az elrendezés megvalósítására; a táblázatos elrendezéssel kusza, zavaros lapokat kapunk egy halom egymásba ágyazott táblázattal — a végén csak hatalmas fájlok maradnak, amelyeket nehéz karbantartani és még nehezebb módosítani. Manapság még mindig nagyon sok oldalt találhatsz a neten, amelyek így épülnek fel, de a biztonság kedvéért te már a táblázatokat csak arra használd, amire készültek — vagyis adatok megjelenítésére —, és az elrendezés kialakításához használd inkább a CSS-t.

Ebben a leírásban megnézzük, hogyan kell helyesen használni a HTML táblázatokat. A felépítés a következő:

• A lehető legegyszerűbb táblázat
• Adjunk hozzá több funkciót
• Alakítsuk tovább a táblázatot
• Segít a CSS: legyen szebb táblázatunk
• Összefoglaló
• További olvasnivalók
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizennyolcadik leírása. Az eredeti, angol nyelvű cikket Chris Heilmann írta.

Bevezető

Ebben a leírásban mindent meg fogsz tudni a web történetének egyik legnagyobb dobásáról — a hivatkozásokról. Egy dokumentum olvasója a hivatkozást követve átugorhat egy másik dokumentumra, és egyik kiszolgálóról átléphet egy másik kiszolgálóra úgy, hogy közben nem kell újra kapcsolódnia minden alkalommal. Mióta feltalálták, már nagyon sok minden történt, de egy dolog változatlan maradt: a hivatkozások most is különösen fontos részei a webes életnek, és a használatukkal jelentősen megkönnyítheted, de akár meg is nehezítheted a látogatóid dolgát.

Miután végigolvasod ezt a leírást, tudni fogod, hogyan készíthetsz olyan hivatkozásokat, amelyek jól érthetőek, és minden környezetben működnek. Azt is meg fogod ismerni, hogyan befolyásolják a hivatkozások az oldalad népszerűségét a keresőkben, és kapsz néhány tippet a hivatkozások elnevezéséhez is. Szokás szerint most is van egy kapcsolódó csomagolt zip fájl, amely a leírásban hivatkozott fájlokat tartalmazza. A mai anyag felépítése a következő:

• Mik azok a hivatkozások?
• Egy hivatkozás felépítése
• Hivatkozás vagy cél? Az id és href attribútumok
• Ne hagyj kétséget afelől, hogy mire hivatkozol
  • Extra információk a title attribútummal
  • Hivatkozás nem HTML erőforrásokra — ne hagyd, hogy találgassanak
  • Külső kontra belső hivatkozások
• Keretek és felugrók — mondj nemet rájuk
• A bejövő és kimenő hivatkozások haszna
• Hivatkozások elnevezése
• Hivatkozások stílusozása
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizenhetedik leírása. Az eredeti, angol nyelvű cikket Chris Heilmann írta.

Bevezető

Ebben a leírásban azon dolgok egyikét mutatjuk be, amelyik a webdesignt széppé teheti — a képekről. Az anyag végére tudni fogod, hogyan adj hozzá képeket a weboldalakhoz hozzáférhető módon (vagyis hogy a látássérült emberek is képesek legyenek használni az oldaladon található információkat), hogyan használhatsz beágyazott képeket információk közlésére, valamint hogyan adhatsz háttérképeket a lapod elrendezéséhez. A leírásban használt példa fájlokat innen töltheted le — ezekre többször is hivatkozni fogunk a leírás során. A mai anyag tartalma a következő:

• Egy kép többet mond ezer szónál — vagy mégsem?
• A weben található képek különböző típusai — tartalmi- és háttérképek
• Az img elem és az attribútumai
  • Alternatív szöveg megadása az alt attribútummal
  • Hasznos információk megadása a title attribútummal
  • longdesc használata komplex képeknél alternatív leírás biztosítására
  • Gyorsabb képbetöltés a kép méreteinek megadásával
• Ennyit az inline képekről
• Háttérképek CSS-sel
  • Hogyan adható meg a háttér CSS-ben?
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizenhatodik leírása. Az eredeti, angol nyelvű cikket Ben Buchanan írta.

Bevezető

A listákat arra használjuk, hogy az egymáshoz kapcsolódó információkat egy csoportba gyűjtsük össze, így ezek világosan kapcsolódnak egymáshoz, ezáltal könnyen olvashatóak. A modern webfejlesztésben a listák gyakori igáslovak, sokszor használják például a navigációban, de az általános tartalmakban is.

A listák strukturális szempontból is kiválóak, mivel a segítségükkel egy könnyen kezelhető, könnyen hozzáférhető és jól strukturált dokumentumot hozhatunk létre. Ezen kívül a listák rendkívül praktikusak is — az extra elemek segítenek abban, hogy különböző CSS stílusokat kapcsolhass hozzájuk.

Ebben a leírásban megnézzük, hogy milyen listatípusokat érhetünk el a HTML-ben, mikor és hogyan használhatjuk ezeket, és hogyan rendelhetünk hozzájuk pár egyszerű stílust. A leírás tartalma a következő (nézd csak — egy lista!):

• A listák három típusa
  • Rendezetlen lista
    • Rendezetlen lista jelölése
  • Rendezett lista
    • Rendezett lista jelölése
    • Rendezett lista kezdése 1-től eltérő számmal
  • Definíciós lista
• Választás a listatípusok között
• A különbség a szöveg és a HTML lista között
• Listák egybeágyazása
• Példa lépésről lépésre
  • A főoldal kódja
  • Adjunk hozzá stílust
  • A recept lap
  • A recept lap kódja
  • A recept lap stílusozása
• Összefoglaló
• További olvasnivaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizenötödik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.

Bevezető

Ebben a leírásban megismerkedhetsz a HTML alapszintű használatával, mégpedig hogy hogyan adhatod meg a jelölésekkel a dokumentumod különböző részeinek az értelmét.

Megnézzük az általános strukturális elemeket, mint például a címsorok, a paragrafusok vagy a beágyazott idézetek és kódok. Ezután néhány belső tartalommal is megismerkedünk, mint a rövid idézetek és a kiemelések, majd a végén még gyorsan átnézünk néhány régimódi megjelenítési elemet is. A leírás felépítése a következő:

• Space — az űr a legvégső határ
• Blokk szintű elemek
  • A lap szakaszcímei
  • Általános bekezdések
  • Más források idézése
  • Előformázott szöveg
• Inline elemek
  • Rövid idézetek
  • Kiemelés
  • Dőlt kiemelés
• Megjelenítési elemek — soha ne használd őket
• Összefoglaló

Ez a bejegyzés a webes szabványok tizennegyedik leírása. Az eredeti, angol nyelvű cikket Roger Johansson írta.

Bevezető

A 13. leírásban a HTML dokumentum head elemének anatómiájáról volt szó, amelyben részletesen megnéztük, hogy milyen különböző elemeket tartalmazhat a head, és ezek mire valók. Ebben a leírásban részletesebben megnézzük a doctype elemet, megmutatjuk, mire szolgál, hogyan segíthet a HTML validálásában, hogyan választható ki a megfelelő doctype típus a dokumentumhoz, és megnézzük az XML deklarációt, amelyre ritkán ugyan, de szükséged lehet.

• Első a doctype
• Doctype sniffing és renderelési módok
• Validálás
• Doctype választása
• XML deklaráció
• Összefoglaló
• Tesztkérdések
• További olvasnivaló

Ez a bejegyzés a webes szabványok tizenharmadik leírása. Az eredeti, angol nyelvű cikket Chris Heilmann írta.

Bevezető

Ebben a leírásban a HTML dokumentumoknak egy olyan részével fogunk foglalkozni, amely méltánytalanul kevés figyelmet kap: ezek azok a jelölések, amelyek a head elemben találhatóak. A leírás végére tudni fogod, hogy mire szolgálnak ennek a résznek a különböző elemei, beleértve a title elemet, a kulcsszót és a leírást (amelyeket meta elemekkel adhatsz meg), valamint a head előtt található doctype elemet is megemlítjük. Fogunk beszélni még a JavaScriptről és a CSS-ről is (külső és belső megvalósításról egyaránt), valamint arról, hogy mit ne tegyünk a head elembe. A demo forrásfájlokat innen töltheted le, erre fogunk hivatkozni ebben a leckében; ebben nyugodtan próbálkozhatsz, miután átolvastad ezt az anyagot. A leckében foglaltakat olvasd el elejétől a végéig, mivel fokozatosan építjük fel a head elem használatának a legjobb módszereit. Minden rész önmagában is érvényes, de a végén az összefoglalóban, ahol a legjobb módszerekről beszélünk, újragondolhatod a korábbi tanácsokat. Ebben a leírásban a következő témákról lesz szó:

• Miféle head? Miről beszélsz?
• A dokumentum elsődleges nyelvének beállítása
• A dokumentum megítélése a címe alapján
• Kulcsszavak és leírás hozzáfűzése
• Mi a helyzet a megjelenéssel? Stílusok hozzáadása
• Dinamikus funkciók hozzáadása JavaScripttel
• Állj! A beágyazott CSS és JavaScript nem jó ötlet!
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizenkettedik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.

Bevezető

Ebben a leírásban megismerheted a HTML alapjait — mi az, mire jó, hogyan alakult ki, valamint hogyan épül fel egy HTML dokumentum szerkezete. A következő leírásokban majd részletesebben is megismerheted a HTML különböző részeit. Ebben a leírásban a következő témákról lesz szó:

• Mi a HTML?
• Hogyan néz ki a HTML?
• A HTML története
• A HTML dokumentum szerkezete
• A HTML elemek szintaxisa
• Blokk szintű és inline elemek
• Karakter referenciák
• Összefoglaló

Ez a bejegyzés a webes szabványok tizenegyedik leírása. Az eredeti, angol nyelvű cikket Paul Haine írta.

Bevezető

Mi a tipográfia? Egyszerűen fogalmazva ez a szövegek megjelenése, designja és elrendezése (erre típusként is hivatkoznak); egy olyan fogalom, amely még a nyomtatott médiából származik. Legalább annyira szól arról, hogy mit nem tehetsz meg a típusaiddal, mint arról, hogy mit tehetsz meg velük. A weben a tipográfia gyakran túl kevés figyelmet kap, ráadásul több olyan technológiai hiányosság is van, amely miatt a webes tipográfia nem olyan hatékony, mint a nyomtatott. Ennek ellenére a mai rendelkezésre álló eszközök mellett már semmi okod nem lehet arra, hogy ne használd ki a webes tipográfia előnyeit szép és stílusos típusok használatával.

Ebben a leírásban megnézzük alaposabban, hogy miért korlátozott a webes tipográfia a nyomtatotthoz képest, majd adunk néhány jó követendő tippet a webes tipográfia használatára, mindezt egy példán keresztül bemutatva. Ne aggódj, ha ezen a ponton még nem érted meg teljesen a CSS és HTML kódokat – most csak a designra kell figyelned. Az olvasás közben érdemes lehet magadnál tartani egy papírt és egy ceruzát, így közben papírra tudod vetni a szöveg elrendezésével kapcsolatos ötleteidet. Ennek a bejegyzésben a következő témákról lesz szó:

• A webes tipográfia korlátai
  • Korlátozott számú betűtípus
  • Szóelválasztás
  • Alávágás
  • Az irányítás hiánya
• Hogyan készül a tipográfia a weben?
• Gyors tippek
  • Több betűtípus választása
  • A sorok hossza
  • A sorok magassága
  • Iniciálék
  • Kiskapitálisok
  • Kilógó írásjelek
  • Tipográfiailag helyes írásjelek és más elemek
  • Kiemelt idézetek
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok tizedik leírása. Az eredeti, angol nyelvű cikket Linda Goin írta.

Bevezető

Miután a webdesigner bemutatja a kliensnek a site vázlatos szerkezetét, felépítését, a következő lépés a színek és grafikák segítségével elkészíteni az oldal megjelenését. Ebben a leírásban bemutatjuk, hogyan lehet ez egyszerűen elvégezni mind a kliens, mind a saját részünkről. Én az egyszerűségben hiszek, aminek két fő oka van: először is, az élet éppen elég bonyolult anélkül is, hogy külön kanyarokat adnánk hozzá, másodszor pedig egy egyszerű terv jobban segít az oldal hozzáférhetőségének és használhatóságának megtartásában. Ebben a cikkben a következőket tanulhatod meg:

• Meghatározni a címsorok, alcímek és a szövegtörzs betűképét, más tipográfiai elemekkel együtt.
• Több különböző színsémát készíteni az oldalhoz.
• Egy designtervet készíteni a kliensnek, hogy dönthessen a színekről és grafikákról.
• Eldönteni, hogyan tesztelheted a websiteot az „élesítés” előtt.

A leírásban a következőkről lesz szó:

• Első lépés: néhány szó a tipográfiáról
  • Betűképek, betűtípusok
  • Olvashatóság
• Második lépés: a tipográfia alkalmazása
  • Fontos az igazítás
• Harmadik lépés: színek
• Negyedik lépés: tesztelés
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok kilencedik leírása. Az eredeti, angol nyelvű cikket Linda Goin írta.

Bevezető

Minden webdesignernek ismernie kellene és meg kellene értenie a websiteok paramétereit, mielőtt egyáltalán belekezdene a kódolásba. Ebben a leírásban meg fogod ismerni az üzleti weboldalak készítésének alapjait. Bár ezek az információk elsősorban a mások számára készített weblapokra vonatkoznak, de felhasználhatod akkor is, amikor a saját oldaladat tervezed meg. Ez a lépés általában azonnal az információs architektúra után következik, össze kell gyűjtened azokat az információkat, hogy mit szeretnének tenni a kliensek a weblapra, hogyan képzelik el a struktúráját, milyen márkajegyeket kell felhasználni, majd ezeknek az információknak az alapján készíthetsz egy vizuális designtervet, amelyet már meg tudsz mutatni a kliensnek még mielőtt elkészítenéd a grafikákat és a használni kívánt színsémákat. Egészen pontosan az alábbiakról fogunk beszélni:

• Bár a színek és a design nagyon fontosak, először tudnod kell, hogy a kliens mit szeretne elérni a website-tal. Ennek az információnak aztán tükröződnie kell a site megjelenésében is.
• Ezért szükséged van egy ellenőrző listára, amelyen végig kell futni a design elkészítése előtt.
• Meg kell ismerned azt is, hogy korábban milyen marketing tevékenységek voltak a cégnél, beleértve a márkajegyeket is. Ez később ugyancsak hatással lehet a website designjára.
• Az klienstől összegyűjtött információk alapján elkészítheted a website első vizuális designtervét, amelyet megmutathatsz a kliensnek, így megalapozhatod a további grafikai- és tartalomterveket.

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

• Mit kell tudnod?
• Az első lépések
  • Az elképzelt példa oldal
  • A logó
  • Az elrendezés
  • A reklámozásról az oldalakon
  • Az elrendezés ellenőrzése validátorral és a klienssel
• Összefoglaló
• Olvasnivaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok nyolcadik leírása. Az eredeti, angol nyelvű cikket Linda Goin írta.

Bevezető

Színek és grafikák nélkül minden oldal Jakob Nielsen álomoldala lehetne. Habár Nielsen filozófiája a lecsupaszított weboldalakkal igencsak hasznos a hozzáférhetőségi és használhatósági szempontok szerint, mégis a legtöbb webdesigner a felhasznált design elemekkel ott szeretné hagyni a keze nyomát azon, amin dolgozott. Szerencsére egy jó design úgy vihet színt egy weboldalra, hogy közben nem veszítjük el a használhatósági és hozzáférhetőségi előnyöket, feltéve, hogy a weblapot eleve így terveztük meg. Bár sok designernek semmilyen gondot nem okoz egy többfelhasználós website tervezése, mégis sokan kényelmetlenül érzik magukat, amikor ki kell válasszák a színeket és a grafikákat.

Ebben a leírásban átnézzük a színek alapjait és három egyszerű színsémát, amelyek alapján már képes leszel megtalálni a megfelelő színeket az oldaladhoz. Később lesz még egy másik leírás is a témáról, amelyben arról lesz szó, hogy hogyan választhatsz magadnak egyszerűen színeket. Végül is jobb a dicséreteket hallgatni az új webdesignnal kapcsolatban, mint vért izzadni a színválasztással. Ebben a leírásban a következő témákról lesz szó:

• Színek és árnyalatok
  • Monokróm színsémák
  • Kiegészítő színsémák
  • Hideg kontra meleg színek
  • Harmadolós színsémák
  • Negyedelős színsémák
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok hetedik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.

Bevezető

Az előző leírás folytatásaként ebben a cikkben részletesebben megnézzük, hogy milyen tartalom kerüljön a Dung Beatles weboldalára, közben megtudhatod azt is, hogy mi szükséges egy jó website-hoz.

Még most sem fogunk foglalkozni a kódolással, csak megvizsgáljuk a különböző lapokat, és közben megpróbáljuk kitalálni, hogy mi jelenjen meg rajta, figyelembe véve a következetességet, a használhatóságot és a hozzáférhetőséget. Ebben a bejegyzésben a következő témákról lesz szó:

• A kezdőlap
  • Mit jelent mindez a mi oldalainkra nézve?
• Navigáció
• Más gyakori elemek az oldalakon
• A környezet minden
  • Releváns tartalom
  • Fejlécek
• Használhatóság
• Hozzáférhetőség
• Összefoglaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok hatodik leírása. Az eredeti, angol nyelvű cikket Jonathan Lane írta.

Bevezető

Hagyományosan egy website tervezése (vagy bármilyen más projekt) elég kimerítő lehet. Mindenkinek van valamilyen véleménye, hogy egy website-ot hogyan kell felépíteni, és ezek a vélemények gyakran ütköznek egymással. Az első számú célod egy website felépítésénél az kellene legyen, hogy az eredmény legyen hasznos a felhasználók számára. Nem számít, hogy mit mond a főnököd, hogy mit mond a srác az alsó szintről a doktori diplomájával, és az sem számít, hogy te mit gondolsz. A végén úgyis csak annak a csoport embernek a véleménye számít majd, akik számára a weblapot valójában készíted.

Ebben a cikkben egy website tervezésének a korai fázisait nézzük át, amelyre sokszor Információs Architektúra, vagy röviden IA névvel hivatkoznak. Ennek keretében át kell gondolni, hogy ki lesz az új website célközönsége, milyen információk és szolgáltatások kellenek a website-ra, és mindezt hogyan rendezd el, hogy elérhetővé tehesd a látogatóknak. Át kell nézd az összes információhalmazt, amelyet az oldalra szánsz, és el kell döntened, hogy hogyan darabolhatod szét ezeket, valamint hogy a darabok hogyan viszonyulnak majd egymáshoz. Ebben a bejegyzésben a következő témákról lesz szó:

• Tervezd meg előre a készülő weboldalt
  • A „Dung Beatles” együttes
  • És most? Rajzoljunk oldaltérképet
  • Nevezd el az oldalakat
  • Ne felejtsd el a részleteket
• Összefoglaló
• Tesztkérdések

Bevezető

Néha előfordul, hogy szeretnél betekintést nyerni a dolgok mögé, hogy lásd a fogaskerekeket és az ékszíjakat az események mögött. A mai a te szerencsés napod. Bevezetlek a legújabb technológiák működésébe, melyek segítségével már elboldogulsz a világhálóval.

Ez a leírás az alapvető technológiákról szól, melyek a világhálót éltetik:

• Hiperszöveg jelölőnyelv (HTML)
• Hiperszöveg-átviteli protokoll (HTTP)
• Domainnév rendszer (DNS)
• Webszerverek és internetböngészők
• Statikus és dinamikus tartalom

Ezek mind nagyon alapvető dolgok – még ha az itt leírtak nagy része nem is segít egy jobb weboldal elkészítésében, megadja a megfelelő nyelvezetet ahhoz, hogy az ügyfeleiddel vagy másokkal beszélgethess a webről. Ez olyan, mint ahogy egy bölcs apáca mondta A muzsika hangja c. filmben: „Mert az olvasását hogy kezdik? - Á, B, C; Az éneklést így kezdik: Dó, Ré, Mi”. Ebben a leírásban röviden áttekintjük, hogyan kommunikálnak egymással a számítógépek a HTTP és TCP/IP használatával, aztán megnézzük a különböző nyelveket, melyek együtt alkotják az internetet képező weboldalakat.

A bejegyzést a Dev.Opera oldalán olvashatod tovább »

Ez a bejegyzés a webes szabványok ötödik leírása. Az eredeti, angol nyelvű cikket Jonathan Lane írta.

Bevezető

Egészen mostanáig a webes szabványok ideális, szép világáról volt szó. A szabványok segítségével ugyanúgy működnek a weblapok minden böngészőben, minden operációs rendszeren és minden elérhető elektronikus eszközön. De valóban ez a valóság? Valóban minden böngésző 100%-ig támogatja a szabványokat? Vajon minden fejlesztő egyformán jól használja a szabványokat? Szabványosan építik-e fel a webfejlesztők az oldalaikat, és aztán nyugodtan hátradőlnek, mert mindenhol tökéletesen működik az oldaluk?

Egy nagyon egyszerű válasz van ezekre a kérdésekre: nem. A fenti kérdések egy ideális helyzetre vonatkoznak, amely távol esik a valóságtól. Ebben a cikkben a következő témákkal fogunk foglalkozni:

• Hogyan ellenőrizheted, hogy megfelelsz-e a szabványoknak?
• Szabványtámogatás a jelenlegi weblapokon
  • Amazon: Vásárlás szabványosan?
  • CNN: Szabványos hírek?
  • Apple: az elegancia és a design csúcsa … de a validálásé is?
  • Egy kis szabványtámogatási vizsgálat
• Miért hiányoznak a szabványos oldalak?
  • Oktatás
  • Üzleti okok
• Összefoglaló
• Olvasnivaló
• Tesztkérdések

Ez a bejegyzés a webes szabványok negyedik leírása. Az eredeti, angol nyelvű cikket Jonathan Lane írta.

Bevezető

Az előző cikkben röviden érintettük a web alapköveit, a HTML-t (vagy XHTML-t), a CSS-t és a JavaScriptet. Most ideje egy kicsit mélyebbre ásni és megnézni, hogy mire jók ezek, mit csinálnak, hogyan tudnak együttműködni, és hogyan építhetünk fel velük egy weblapot. Ebben a leírásban a következő témákról lesz szó:

• Miért kell szétválasztani?
• Jelölés, minden weblap alapja
  • Mi az az XHTML?
  • Mi az a validáció?
• CSS - kell egy kis stílus
• JavaScript - a weblapok működése
• Egy példa oldal
  • index.html
  • styles.css
• Összefoglaló
• Tesztkérdések

Bevezető

— Hol kezdjem, felség? — kérdezte.
— Kezdd a kezdetén — mondta a Király —, és leghelyesebb, ha a végén végzed.
Lewis Carroll — Alice Csodaországban; fordította: Kosztolányi Dezső

Mindent el kell kezdeni valahol, így aztán a mi utazásunk egy történelemórával kezdődik. Az alábbiakban egy rövid áttekintést fogok adni az internet, a World Wide Web és a webes szabványok létrejöttéről, amelyek miatt ez a kurzus valójában készült. Úgy érzem, hasznos tudni azt, hogy honnan és hogyan érkeztünk ide, és elég rövid lesz ahhoz, hogy ne aludj el közben, úgyhogy a részleteket csak szépen és gyorsan említjük meg. Ha bizonyos kifejezések idegenül hangzanak, ne aggódj; ha fontosak a webfejlesztéshez, akkor később úgyis részletesen értelmezve lesznek egy másik téma keretében, vagy egyszerűen rákereshetsz a Google-lel! Ha már ismerős számodra az internet és a World Wide Web története, egyszerűen hagyd ki a webes szabványoknak ezt a részét, és olvasd tovább a következő cikket.

A bejegyzést a Dev.Opera oldalán olvashatod tovább »

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.

A bejegyzést a Dev.Opera oldalán olvashatod tovább »

Ennek a blognak a célja, hogy népszerűsítse és terjessze a webfejlesztéshez nélkülözhetetlen szabványok használatát, amelyekre manapság igencsak ráfér a terjesztés. A leírások az Opera Web Standards Curriculum alapján készültek.

Az itt található leírásokkal könnyebben használhatod majd a szabványokat. Miután mindent elolvastál, tisztában leszel az összes szabványos webfejlesztési technológiával, beleértve a HTML-t, a CSS-t, a design alapelveket és a kapcsolódó elméleteket, valamint a JavaScript alapjait. A projektet már több nemzetközi vállalat is támogatja, köztük a Yahoo! és a Web Standards Project.