Creaza un website elegant in HTML5 si CSS 3

Cred ca sunt unul din sustinatorii complet cuceriti de noile tehnologii care incep sa-si faca aparitia in domeniul web tot mai mult : HTML 5 si CSS 3.

Creativitatea noastra este o chestie foarte subiectiva, dar care poate fi parsata prin prisma obiectivitatii, prin noi, programatorii. In orice creatie exista un proces extrem de logistic si tehnic, parte ce dovedeste ca acest domeniu nu e pentru toti. Daca incercam sa privim si domeniul design intr-un mod mai itist, pot spune ca tot procesul crearii urmeaza niste algoritmi, algoritmi mai mult sau putin eficienti. Ca si in cazul limbajelor de programare, si design-ul are nevoie de optimizare, eficienta si sporirea productiei prin noi metode : HTML 5 si CSS 3. Aceste noi tehnologii urmaresc exact aceasta dorinta : depasirea unor probleme plicticoase ce intarzie finalizarea proiectului si in acelasi timp ce sporesc costul productiei.

Cum HTML 5 si CSS3 schimba regulile productiei?

Desi, nu sunt designer aproape deloc (cu totii stiti asta), pot spune cu mare siguranta ca multe opinii s-au schimbat o data cu aparitia noilor tehnologii. Se schimba conceptia dezvoltarii deoarece s-a imbunatatit extrem de mult procesarea imaginilor din interiorul codul HTML/CSS. Aud tot mai des parerea ca Photoshop incepe sa-si piarda din autoritate o data cu efectele puse la dispozitie de CSS 3. Trebuie subliniat faptul ca nu il inlocuieste, ci doar ii reduce necesitatea. In cazul HTML 5, putem spune cu siguranta ca aduce noi efecte in discutie, reduce utilizarea unor librarii foarte populare precum flash sau java.

Introducere efectiva in HTML 5

Am tot vorbit teoretic in cateva articole pe blog, dar cred ca e cazul sa dovedim si dezvoltatorilor cateva din noile functii oferite de aceasta tehnologie. Trebuie remarcat si faptul ca aceasta tehnologie nu este un standard W3C, deci tot ce prezentam urmareste introducerea in noua tehnologie.

Ma voi focaliza doar asupra elementelor ce imbunatatesc structurarea paginilor.
<section> – elementul este o solutie generica a unei sectiuni din document sau a intregii pagini, o grupare tematica a continutului ce contine un antet. Trebuie avut in vedere faptul ca „<section> nu este doar un <div> semantic”.

<aside> este o sectiune din pagina ce consta in continut ce este asemanator doar tangential cu subiectul principal al paginii. Il putem folosi spre exemplu in sidebar, la reclame, la bara de navigare(meniul) sau orice alt continut ce este mai putin relevant cu contentul propriu-zis.

<article> – este un element, sa spunem, principal deoarece contine practic contentul propriu-zis al paginii : postul unui forum, un articol pe blog, o stire etc). Acest element ar trebui folosit in aceste situatii in locul elementului <section>, deoarece e mai logic.

<footer> este un element ce reprezinta footerul celui mai apropiat parinte fata de sectiune curenta a contentului. Poate contine informatii relevante la sectiune, linkuri related pentru documente, copyright etc. Il putem folosi in cazul in care folosim tagurile article, respectiv section.

<header> – reprezinta un element similar cu precedentul, doar ca va contine o grupare de elemente reprezentative pentru sectiunea curenta (grupari de h1-6).

<nav> – este un element pentru sectiunea de navigare (meniul). In acest tag trebuie incluse doar blocurile majore de adrese.
<time> – element folosit pentru a reprezenta data

Introducere efectiva in CSS3

CSS 3, ca in cazul HTML 5, nu este un standard W3C, dar avem posibilitatea de a testa deja pe browserele compatibile diverse functii din noua tehnologie.

RGBa – este modelul standard RGB folosit in paletele de culori (0,0,0 – 255,255,255) la care se adauga o noua optiune (a) pentru opacitate.

background: rgba(196,89,30,0.65);

box-shadow – aceasta optiune CSS urmareste crearea unor efecte de umbra.

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

border-radius – o alta proprietate foarte interesanta, ne permite sa rotunjim colturile. Aceasta proprietate este folosita in acest moment pe blog, vizibila pe browserele ce sunt compatibile cu aceasta (gen Mozilla Firefox).

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

text-shadow – proprietate ce ne ofera posibilitatea de a aplica diverse umbre pe text.

text-shadow: 1px 1px 1px #2c0306;

Un website elegant in HTML5 si CSS 3

Dupa o introducere succinta, putem vedea rezultatele acestor tehnologii. Mai jos aveti un demo al website-ului, alaturi de toate sursele.

Cum sa faci un website elegant?

Ca in cazul oricarui proiect, modul profesionist de a lucra consta in organizarea eficienta a unui plan de lucru. Mai jos urmeaza pasii crearii eficiente.

„Mazgaleste” ideile

Cred ca cea mai buna idee este crearea unui mic sablon pe o coala de hartie, pe care iti sintetizezi structurarea paginii astfel incat sa o poti interpreta mai tarziu cand urmeaza implementarea efectiva in cod.

Detaliile grafice

Paleta de culori

Elemente grafice

Codeaza efectiv website-ul cu HTML 5

Urmeaza stabilirea structurii de baza si trecerea efectiva la lucru. Mai jos aveti structurarea aproximativa a paginii.

Arhiva o puteti descarca de aici. Puteti vedea informatii suplimentare legate de implementare in articolul original. 🙂