Nézzük hogyan épül fel egy weboldal:

• Van egy bonyolult rendszer, egy vagy több szerveren. Rajta mindenféle varázslatos programok, adatbázisok, satöbbik futnak, ők tárolják és dolgozzák fel a zadatokat. Nevezzük motornak.
  
• A motor aztán kiköp magából egy halom kódot, amit a böngésződ a saját gépeden értelmez és weboldalként jelenít meg.
  
• Ennek a kódnak több része van.
  

A fő része, ami az egészet összefogja egy szöveges kód, ezt nevezzük HTML-nek. Olyan, mint egy sima dokumentum, mert főként a megjelenítendő szöveget látod benne. A szövegben azonban vannak speciális "struktúra-utasítások" is, amik megmondják, hogy a következő halom szöveg egy bekezdés, vagy azt, hogy ez a sor éppen egy lista eleme.

Ez még nem lenne elég ahhoz, hogy szép weboldalunk legyen. Hiába tartalmazza a HTML, hogy ez egy bekezdés amaz pedig egy beágyazott kép, a bekezdés szélessége, betűtípusa, színe, háttérképe, satöbbi nincs benne.

A designt, amitől szép lesz az oldal a CSS kód határozza meg. Ebben van leírva, leprogramozva a design. Könnyebben megérted, ha elmondom, hogyan lesz egy weboldalnak "designja":

• A grafikus megrajzolja az oldalt. Ekkor még az egész egy rajz, egy szimpla kép.
• A fejlesztő leprogramozza a CSS kódban amit lát.
• Amit nem tud leprogramozni, mert valami grafikus elem, azt kivágja a rajzból és trükkösen "beleprogramozza" a CSS kódba.

Egyszóval most megtanultad, hogy egy weboldal "designja" egy CSS kódnak nevezett dologban csücsül. Ebben a kódban sok-sok (általában több száz!) soron keresztül írják le, hogy hogyan nézzen ki, egy sorban pedig akár tíz szabály is lehet egyszerre.

A lényeg

Találtam egy olyan megoldást a neten, ami sorról-sorra, szabályról-szabályra "hozza be" a CSS kódot és így kvázi egy animáción keresztül mutatja be, hogy hogyan épül fel egy weboldal designja. Nagyon érdekes!

Gyorsan rá is tettem a Webcsatornára és felvettem videóra. A videón valós időben látjátok, ahogy minden tizedmásodpercben behoz egy újabb CSS szabályt a program.

Vannak benne "akadások" is, amik valójában nem azok: olyan szabályok betöltése, amik a Webcsatorna más oldalaira vonatkoznak vagy valamilyen bonyolult ügyet készítenek elő.

Emitt a videó, nyisd meg új ablakban vagy jobb-klikk mentés másként, esetleg szimplán klikkelj rá. Lényeg, hogy csinálj valamit és utána ámulhatsz-bámulhatsz.

Fejlesztőknek

Itt vannak a részletek. Az oldal alján letöltheted a JavaScript fájlt, mert ennyi az egész, szimpla JS. Töröld ki az utolsó sort, hogy ne induljon egyből és írj egy rövidke window-onload kezelőt, hogy akkor indítson, amikor már minden betöltődött.

Még arra is jó eszköz lehet, hogy bemutasd mennyi meló van a CSS-ben, mert az ügyfelek minimum álmélkodnak, mikor benyögöd, hogy X (ahol X > 10) munkaóra.

0 hozzászólás - Te lehetsz az első!

Legutolsó hozzászólások

DJ PLAYER Blue Edition: Gábor: Ja, és természetesen megy iPad-en is, hiszen _minden_ iOS app megy iPad-en.

DJ PLAYER Blue Edition: Gábor: Bug report-okat itt fogadunk: http://djplayer.net/page/bug_report_fixes

DJ PLAYER Blue Edition: hohand: Hello!A dj player mukodik iPad-on is?Tegnap feltettem, wifi-n athuztam ra zeneket,de amikor ranyomtam egy zeneszamra,error-t dobott es valami is!...

Uzsidoboz LED!: zo via Google Reader: vicces dolog, csak nem értem mire való

Uzsidoboz LED!: Gábor: @Benjamin Minek forogjanak? Egy falszínezőnek olyat nem kell tudnia, így is épp elég hatásosak.