Ghid HTML in pasi simplii - de la PSD către CSS (PARTEA I)

Acesta e primul din seria de 4 tutoriale ce te vor invata cum sa transformi un fisier PSD intr-o pagina html cu ajutorul CSS. In continuare vom construi un site Photography complet operational in Xhtml si CSS. Toate codurile, fisierele si template-urile iti stau la dispozitie pentru a te juca cu ele si chiar te incurajez sa o faci.

Acum sa ne concentram asupra tutorialului.

Unul din cele mai grele lucruri in a transforma un design PSD intr-un layout CSS/HTML bine structurat consta in a sti de unde sa incepi. Desi ar putea suna simplist si chiar evident, conteaza foarte mult felul cum incepi si fundatia pe care vei construi. In aceasta serie de articole te voi invata pas cu pas etapele acestui proces de converse si vom analiza deciziile pe care trebuie sa le iei, precum si modul in care aceste decizii se vor adapta pe masura ce lucrurile progreseaza. Articolul nu va aborda tehnici grafice anume ( ex: taierea imaginilor si optimizare) deoarece acestea variaza de la un program la altul si nu reprezinta scopul acestui tutorial. In mod evident, va trebui sa stii cum sa faci aceste lucruri si presupun ca deja ai aceste cunostiinte elementare.

Pentru inceput ne vom inchipui ca doar ce ai primit un PSD de la un designer si ai fost rugat sa-l transformi intr-o pagina CSS/HTML valida si functionala. Iata o imagine a layout-ului pe care il vom obtine la final:

PASUL 1
La prima vedere pare destul de usor, dar inainte sa incepem hai sa ne uitam mai indeaproape la elemente si sa identificam eventualele zone problema. E posibil sa fii nevoit sa iei unele decizii importante in ceea ce priveste design-ul in aceasta etapa incipienta, asa ca inca de la inceput trebuie sa ai o idee clara despre cum poate fi realizat design-ul. Daca gasesti zone imposibil de creat pe o pagina web adevarata sau care ar crea prea multe probleme cu browser-ul, atunci e mai bine sa le localizezi acum si sa anunti designerul inainte sa incepi.

Daca lucrezi pentru cineva, e important sa mentionez ca pana in acest moment ar fi trebuit sa stabilesti cu clientul volumul tau de munca, precum si suma cu care te va plati. Daca nu fixezi parametrii exacti ai job-ului el va putea sa se foloseasca de asta pentru a te obliga sa adaugi orice doreste, ori de cate ori doreste, fara ca tu sa ai vreo scapare. ( Nu toti clientii sunt asa, dar se mai gasesc si unii de genul acesta)

Fix, fluid sau em based
Acum ca am stabilit aceste lucruri, hai sa trecem la fapte si sa vedem cu ce ne confruntam; imparte layout-ul in sectiuni mai usor de manevrat. Prima intrebare pe care trebuie sa ti-o pui este daca avem de a face cu un layout cu o latime fixa sau unul cu o latime variabila in care dimensiunea fiecarei coloane poate varia in functie de rezolutia ecranului. Bineinteles ca te poti consulta cu clientul in aceste privinte, dar , pentru acest prim tutorial, sa presupunem ca e vorba de un layout cu o latime fixa. In tutorialele viitoare vom analiza felul in care se poate transforma exemplul intr-un layout cu latime variabila sau intr-unul em based. Pentru moment insa, vom ramane la pixeli pentru a ne fi mai usor.

Reactia mea initiala cand am vazut PSD-ul a fost ca designer-ul a folosit mult gradient si efecte de umbra in locuri diferite, dar si ca a adaugat colturi rotunjite la cateva din elementele de design. De exemplu, backgroundul are un gradient vertical de la #282f27 la #000000, pe o portiune de 880 pixeli. Acest lucru nu reprezinta o problema propriu-zisa deoarece putem repeta o imagine pe axa x, iar in acelasi timp putem seta culoarea de fundal in tag-ul body la valoarea pe care o va avea fade-ul final (#000). Aceasta operatiune va permite layout-ului sa se extinda vertical oricat va fi nevoie. Complicatiile vor consta in faptul ca elementele header vor avea un fundal usor mai intunecat plasat in jurul lor, care va varia in functie de culoarea backgroundului.

Avem 2 optiuni in acest moment:

Creeaza efectul de intunecare in jurul elementului folosind transparenta PNG, astfel incat fundalul intunecat din body sa se poata vedea prin imaginea PNG opaca. Cu toate ca acest lucru e posibil cu majoritatea browser-elor, exista probleme grave cu IE6, in sensul ca el nu va reda PNG-ul transparent in mod corespunzator. Ai putea folosi filtrul alpha-image loader pentru a compensa in IE5 si 5.5 daca nu ai de ales, dar si acest lucru aduce alte probleme, de aceea ar trebui utilizat numai daca nu exista alta alternativa.
Imparte elementele fundalului cu umbra gradientului la locul ei si potriveste-o cu fondul din body. Atat timp cat elementele din header au o inaltime fixa, atunci totul va merge bine. Desigur, daca textul va fi reorganizat si elementelor li se va permite sa se mareasca, atunci e posibil ca acestea sa nu se mai imbine corect. Totusi, cred ca acesta este un pret mic de platit pentru a lasa codul cat mai simplu. Asadar, vom alege aceasta metoda, iar daca aflam mai tarziu ca nu e indeajuns de buna, va trebui sa o regandim.
Structura paginii
Pentru a iti face o idee despre ce elemente ai nevoie pentru intreaga pagina, poti crea o schita a site-ului tau (fie in mintea ta, fie pe hartie). Iata o macheta a paginii noastre:

Chiar daca in realitate nu vom folosi exact aceasta structura, aceasta poza iti ofera un punct de reper vizual legat de ceea ce trebuie realizat si furnizeaza o ordine logica a pasilor urmatori. Unele persoane vor respecta aceasta versiune wire-frame, dar in unele cazuri ea te poate incurca, asa ca este de preferat sa te concentrezi asupra elementelor unul cate unul, de la primul la ultimul.

Fiecare zona va pune anumite probleme, dar structura esentiala e urmatoarea: un layout centrat cu 3 sectiuni orizontale statice urmate de 3 coloane care vor fi inserate de-a lungul ecranului. Partea principala a site-ului va consta in cele 3 coloane, iar problemele importante ce vor trebui rezolvate sunt legate tot de cele 3 coloane aparent egale. Acest lucru poate fi reglat destul de usor in layout-ul cu latime fixa prin folosirea unei imagini de fundal care se repeta si care creeaza cele 3 coloane automat.

Vor exista si probleme legate de sectiunea principala deoarece trebuiesc luate in considerare gradientele verticale si imaginile aliniate in partea de jos, iar design-ul ar putea fi modificat pe masura ce avansam. Dar, pentru moment e bine ca am realizat acest lucru si ca am luat aminte de optiunile pe care le avem. Daca in acest moment consideri ca un anumit lucru e imposibil, intrucat nu toate desenele pot fi transpuse pe web, ar trebui sa il contactezi pe client si sa cauti strategii alternative daca design-ul trebuie schimbat.

Dupa ce am identificat problemele principale si am ratificat posibilele modificari de design, e timpul sa incepem adevarata munca, sa scriem codul si sa taiem imaginile. Sa le luam pe rand.

Alege marimea font-ului, tipul font-ului si culorile principale din PSD si stabileste-le clasele CSS default. De asemenea, defineste marimea default a fontului, ce va permite redimensionarea textului in IE6 sau in versiunile mai vechi ale IE. De fapt, acest proces este atat de uzual, incat ar trebui sa ai deja un template setat pentru a incepe munca imediat si pentru a iti permite sa modifici tipul fontului si culorile.
Masoara layout-ul astfel incat sa creezi un container pentru continut, deoarece intreg continutul poate fi centrat cu ajutorul containerului. Unii designeri folosesc atributul width in tag-ul body, in locul unui container intern, dar aceasta abordare poate crea probleme pe versiunile anterioare ale IE, si eu recomand sa lasi body-ul in pace. Totusi, daca vrei sa fii minimalist poti lua in vedere si aceasta optiune.
De multe ori vei primi PSD-uri cu latimea de 800px deoarece designerului i s-a spus ca site-ul trebuie sa fie vizibil la rezolutia de 800x600, iar el nu si-a dat seama ca dimensiunea de 800px este prea mare pentru 800x600 datorita marginilor browserului si a barei de scroll. Latimea maxima in acest caz este de aproximativ 760px (in functie de browser), pentru a evita aparitia barei de scroll orizontal. Acesta este un exemplu de lucruri pe care trebuie sa le iei in considerare la masurarea layout-ului si crearea unui container pentru intreg continutul paginii.

Incepe de sus in jos. Lucrand logic iti poti imparti munca in sectiuni astfel incat poti lua fiecare lucru pe rand si face planuri in functie de necesitati. Intotdeauna trebuie sa fii atent la ce va urma, dar daca te concentrezi asupra fiecarui lucru pe rand, eforturile tale vor fi canalizate catre acel lucru, iar cand fiecare element va fi terminat si nu vei avea doar lucruri pe jumatate facute te vei simti implinit.
In PSD-ul nostru avem meniul in partea de sus, urmat de logo si de slogan. Apoi urmeaza o imagine header cu un casuta de cautare si in final,3 coloane si un mic footer cu un mesaj de copyright.

Imi place sa folosesc nume logice pentru sectiuni. Daca de exemplu,coloana din stanga se numeste #leftcol si mai tarziu o vei schimba folosind CSS pentru a deveni cea din dreapta, totul va deveni confuz. E mai bine sa folosesti nume generice, dar functionale, cum ar fi #sidebar1 pentru coloana din stanga si #sidebar2 pentru coloana din dreapta, sau chiar #col1 si #col2. Totusi, in cazul in care te decizi sa schimbi ceva, gandeste-te cu atentie la numele pe care le vei alege, dar nici nu exagera ajungand in punctul in care nu mai stii ce reprezinta fiecare.Pentru layout-ul nostru vom folosi urmatoarele denumiri:

#outer � retine intreg continutul paginii
#header - contine meniul si alte elemente din header cum ar fi logo-ul si casuta de cautare.
#nav � meniul principal
#tagline - logo si slogan
#search � casuta de cautare si imaginea de fundal
#main � acesta este un container pentru cele 3 coloane
#col1 � coloana stanga
#maincol � coloana din centru
#col3 � coloana din dreapta
#footer � Footer

Pentru alte elemente interne vom folosi clase. Tine minte ca denumirile trebuie sa fie unice si ca nu pot fi folosite decat o data pe pagina.


V-a fost de folos?
Daca da , da-mi un +!
Merci