Civileknek! Jópofa weblapdesign felépítő videó
Na, ennek a bejegyzésnek sem találtam jobb címet. Arról van szó, hogy kijött egy aranyos izé, amivel meg lehet mutatni, hogyan épül fel egy weblap designja lépésről-lépésre, szabályról szabályra.
Kifejezetten civileknek írtam ezt a bejegyzést, de fejlesztők is olvashatják, hogy megtudják mivel kell ilyet csinálni. És persze a videó mindenkinek tetszeni fog (ha már ennyit szenvedtem vele).
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ő!
iMect means internet, media and other cool things. We're a small company located in Hungary. There is a big footer on every page where you can discover what we do and what happens with us.
Az iMect jelentése: internet, média és egyéb király dolgok. Egy kis magyar cég vagyunk. Minden oldalon van egy nagy lábléc, ahol felfedezheted, hogy mivel foglalkozunk.