() translation by (you can also view the original English article)
Köszöntünk Tuts+ városában, ahol mindenki szereti a web design-t! Ebben a cikksorozatban a weboldalak és azok stílusának készítéséről fogunk tanulni. Segíts nekünk, hogy együtt készítsünk el egy weboldalt.
Ezek a leckék lépésről-lépésre mutatják majd be, hogy hogyan hozz életre egy weboldalt. A feladatokhoz tartozó fájlok a leckék végén lesznek csatolva, így tanulás közben össze tudod hasonlítani a munkádat a miénkkel.
Szóval, gyere, helyezd magad kényelembe és készítsünk valamit Tuts+ város lakosainak!
Hogyan működik a világháló?
Lépjünk egyet vissza és gondolkozzunk el, hogyan is működik a világháló.
Mikor két számítógép az Internetre kapcsolódik (ami a lenti képen sárga vonallal van jelölve) ők beszélgetni tudnak egymással.
A szerver (a kék doboz) egy speciális számítógép ami weboldal fájlokat tartalmat. A te számítógéped otthon vagy az iskolában nem szerver, mert nem kapcsolódik közvetlenül az Internethez. Az Internethez Internet szolgáltatón (ISP - Internet Servie Provider) keresztül csatlakozunk.
Az oldal tartalma (az összes olyan dolog, amiről a weboldal beszél) speciális szabályok szerint van rendszerezve amit a számítógép megért; mintha titkos dolgokról beszélnénk, kódolt nyelven, nemsokára a titok részesei leszünk mi is!
Ezen a képen a böngésző kéri, hogy láthassa a www.tutsplus.com oldalt a szerverről, ahol az oldal fájljai élnek. A szerver visszaküldi a fájlokat és a böngésző lefordítja őket, hogy megjelenítse az oldalt a képernyőn. És ez nagyon gyorsan történik!
Ez a kommunikációról és az információ megosztásáról szól.
Emiatt, egy oldal, amit lokálisan (a számítógépeden) írsz nem látható mások számára más számítógépeken mindaddig, amíg a fájlokat nem helyezed át egy szerverre. Erre később visszatérünk részletesebben.
Egy Web Designer munkája
A web designer-ek munkája nagyon fontos. Minden, ami a fenti képeken látható, egy dolog miatt történik: hogy láthassuk a weboldalt. A web designer munkája, hogy eldöntse hogyan nézzen ki és működjön a weboldal, és más dolgok, mint például, hogy a weboldal használható legyen sérült látogatók számára is (ugyan úgy, ahogy te most a Tuts+ oldalát használod).
A mi tervünk
Ebben a cikksorozatban Tuts+ város számára fogunk weboldalt készíteni. A városnak kell egy hely, ahol a turisták hasznos információkat kaphat a városról, mielőtt meglátogatják.
Itt egy előnézet a weboldalról:
A weboldal az összes web design elemet tartalmazni fogja amiről majd tanulunk. Ez egy szép, letisztult első web design projekt lesz számodra!
Vázolás és Felépítés
Beszéljünk egy picit arról, hogy mit kell készítenünk.
Először is, felvázoljuk az oldaladat, majd egy speciális fájl segítségével beletesszük az oldalba amit szeretnénk. Hivatkozásokat is hozzáadunk, hogy a látogatók más helyekre is eljuthassanak, mint például az üzletek weboldalára.
Stílus
Miután felvázoltuk az oldalt és speciális fájlt írtunk hozzá, szép külalakot is kell készítenünk hozzá. Ez az a rész, ahol az összes színezéssel és elhelyezkedéssel kapcsolatos ötletünk (mi, hol és hogyan legyen látható a képernyőn) életre fog kelni.
Hogyan tehetjük könnyen használhatóvá az oldalunkat? Milyen érzést szeretnénk, hogy keltsenek a kiválasztott színek? Hogyan nézzen ki az oldal az okostelefonok képernyőjén? És mi van a nagy, számítógépes képernyővel? Melyik betűtípus nézne ki a legjobban? Mindezekről a dolgokról el kell gondolkodnunk, de ne aggódj, ez egy nagyon érdekes folyamat és ezek a kérdések idővel természetesek lesznek számodra.
Útiterv
Lent láthatod az "útitervünket". Ezeket a lépéseket fogjuk megtenni a weboldalunk elkészítése során. Mindegyik blokk egy bevezető egy témába és minden blokk kisebb részekre van lebontva.
Bevezető
A rózsaszín csillagnál láthatod, hogy jelenleg a bevezetőt olvassuk. Most már van egy alapötletünk, hogy hogyan is működik a világháló, a web designer munkájáról, és megtekintettük a projektet, amit együtt fogunk megtervezni és felépíteni.
Weboldal készítése
Most következik az ötletelés és a vázlat rajzolása. A rajzolás, vázolás egy nagyon szórakoztató módja az ötleteid összegyűjtésének mielőtt elkezdenél kódokat írni. Sok időt tudunk vele megspórolni és segít nekünk rendszerezve haladni.
Ezután azokról a fájlokról és eszközökről fogunk beszélni, amelyekre szükségünk lesz a weboldalunk egyes elemeinek a kódolásához.
HTML
A Hiperszöveges jelölőnyelv (avagy HyperText Markup Language - HTML) az a titokzatos (de már nem sokáig!) nyelv, amit a már korábban említett szöveges fájlunk rendszerezésére használunk. Ez a nyelv segít a böngészőnek megérteni és megjeleníteni a weboldal fájljait.
Az oldalunkon minden, és ebből kifolyólag az összes weboldal élni fog HTML elemek nélkül. Az elemek a nyelv darabjai, amelyeknek van jelentésük és segítenek leírni mindent amit elhelyeztünk az oldalon.
Egyelőre ne gondolkozz azon, hogy mit is jelent ez a kód valójában, a lényeg, hogy minden weboldal írott dokumentumokból van elkészítve.
CSS
A Cascading Stylesheets, avagy CSS segítségével tudunk stílust (színek, betűtípusok, stb.) adni weboldalunkhoz, ami vonzóvá és használhatóvá teszi weboldalunkat a látogatók számára.
CSS elrendezés
A CSS abban is segít, hogy megfelelően el tudjuk rendezni az oldalunk egyes részeit.
Képek
Utazásunk ezen állomásán arról fogunk beszélni, hogy milyen típusú képeket tudunk elhelyezni az oldalunkon és hogyan tudunk stílust adni ezekhez. Ezeket a szép képeket fogjuk az oldalunkba tenni. Mit gondolsz róluk?
A tervezés alapjai
Ebben a részben a "blokkok építésére" vetünk egy pillantást. Olyan dolgot szeretnénk készíteni, amit az emberek könnyen tudnak használni és szépen is néz ki.
Tipográfia
A tipográfia az elrendezési típus és az új design-leckénk nagyszerű nyomon követésének művészete, mely nagyszerűen adhat hozzá vagy vehet el a weboldalunk sikeréből.
Az első példa a tipográfiára az oldalunk felső részén található:
Színek
A színek nagyon fontosak és szórakoztatóak is tudnak lenni. Csinossá varázsolják az oldalt, de akár jelentésük is lehet, amiről később fogunk beszélni.
A sorozat vége
A cikksorozat végén már azt is meg fogjuk mutatni, hogy hogyan tudod a weboldalad fájljait egy speciális számítógépre, egy szerverre tenni, hogy a barátaid és a családod is meg tudja nézni weboldalad az Interneten. Arról is beszélni fogunk, hogy hol tudod hasznosítani a tudásodat a "Tuts+ város web designer-e" titulusoddal.
Egyelőre viszont ne gondolkozzunk ezen, még csak most kezdtük a tanulást!
Hamarosan találkozunk!
A következő leckében megtanuljuk, hogy hogyan készüljünk fel a weboldalunk felépítésére HTML segítségével. Már alig várom, találkozunk a városban!
