Chiar daca HTML5 si CSS3 nu sunt inca total implementate, acordarea unui mici parti de timp pentru a te familiariza cu unele din trucurile prezentate in acest articol te vor ajuta sa obtii acel design elegant pentru site-ul tau.Am mai scris cateva postari legate de aceste limbaje, dar consider ca trebuie sa discutam si mai amanuntit fiindca aceste limbaje sunt foarte importante si cel mai important poti utiliza cateva din noile optiuni.

Prefata – ce trebuie sa tii minte

Inainte de a incepe articolul in sine vreau sa subliniez un lucru.HTML5 si CSS3 nu sunt inca total implementate.Chiar si astazi, in cele mai moderne browsere exista o problema majora legata de implementarea unor taguri.Daca am vrea sa cream colturi rotunjite la un div in CSS3 ar trebui sa facem urmatoarele:

div {
   width:200px;
   height:200px;
   margin:100px;
   background:red;

   /*Tagul global sugerat de W3C*/
   border-radius:10px;
}

Tagul Border Radius creeaza colturile rotunjite la div.Dar nu este atat de simplu.Acel tag este introdus doar in IE9 si ultima versiune de Safari.Acum te intrebi…deci in restul browserelor nu mai pot?Ba da!In exemplul de mai jos o sa vedeti cum vom crea colturi rotunjite in IE9, Chrome, Safari si Firefox.

div {
   width:200px;
   height:200px;
   margin:100px;
   background:red;
   border-radius:10px; /*Tagul global sugerat de W3C*/
   -webkit-border-radius:10px;/*In Safari si Chrome*/
   -moz-border-radius:10px;/*In Mozzila*/
}

Deja puteti vedea ca implementarea este detul de complicata.Asa ca prin exemplul de mai sus vreau sa atentionez ca aceste limbaje inca nu sunt total implementate.Asa ca daca vrei sa creezi un site cu aceste limbaje va trebui sa te gandesti cu siguranta la crearea acestuia si pentru browserele mai vechi, utilizand metodele clasice care din pacate pot fi mai complicate(scripturi terta Javascript etc.)

HTML5

HTML 5 este ultima versiune de HTML sau Hypertext Markup Language.Este complet implementat  intr-o mana de browsere, dar in urmatorul an ar trebui sa vedem o crestere semnificativa a utilizarii acestuia.Se crede ca limbajul nu va fi terminat nici macar in 2014, dar partea buna este ca unele din facilitati sunt disponibile si sunt metode grozave pentru a adauga niste efecte interesante site-ului.

 

De cand Google a inceput proiectarea unei versiuni HTML5 al YouTube-ului, multi webmasteri si-au dat seama de importanta acestui sistem in viitorul apropiat.Totusi, Firefox se opune la unele din tagurile si optiunile din HTML5 asa ca webmasterii si designerii inca simt ca trebuie sa invete toate cunostiintele de baza din versiunile mai vechi.

Idea din spatele HTML5 este ca limbajul nu este unul unitar, ci mai degraba un limbaj creat din bucatele ce merg laolalta pentru a creat ceva inovativ si avansat.Fiecare browser poate suporta diferite optiuni de HTML5, lucru foarte important pentru cei care codeaza pentru a-si da seama ce facilitati au nevoie sa fie suportate de browsere.

HTML 5 este construit pe versiunea de succes HTML4.Asta inseamna ca programatorul actual nu trebuie sa arunce “la cos” tagurile existente, dar mai degraba sa construiasca pe acestea si sa utilizeze alte taguri imbunatatite.De exemplu formele au fost imbunatatite asa ca s-au ajuns si la campuri speciale pentru email, dar cel mai important securizarea formei a progresat enorm.Chiar si asa, userii din IE6 vor vedea in locul inputului pentru email unul pentru text.

Dupa o simpla cautare pe google dupa “HTML5 websites” am gasi cateva site-uri ce mi s-au parut sugestive.

Ce este nou

  • Orice sintaxa HTML5 are nevoie de un doctype pentru a anunta browserul ca pagina trebuie sa fie vizualizata intr-un anumit mod.Vestea buna e ca declaratia doctype a fost simplificata comparativ cu cea veche.Acum e doar :[cc lang=”html” escaped=”true”]<!Doctype html>[/cc]
  • Suportul pentru aplicatii media, in HTML5, este grozav.Cand toate browsrele vor implementa HTML5 o sa fie foarte usor sa adaugi muzica si video neavand nevoie de plugin-uri.
  • Editarea continutului va fi simplificata in HTML5.Daca vei adauga contenteditable=“true” la un element editarea continutului acestuia va fi o joaca de copii.
  • Cu ajutorul tagului <canvas> vei putea cu usurinta sa creezi imagini 2D
  • Atributul aplication cache te va ajuta sa utilizezi la maxim un website chair si cand nu esti online

De ce sa-l utilizezi

  • HTML5 se va incarca mult mai rapid decat fratele sau mai batran fiindca implementeaza WebSockets.
  • Aplicatiile pentru telefonul mobil vor fi mult mai accesibile fiindca nu va mai trebui sa creezi aplicatii pentru un anumit telefon ci vei crea aplicatii universale pentru toate telefoanele mobile.
  • Ai mai multa flexibilitate cand creezi un website.
  • Videoclipurile, imaginile si muzica vor fi mult mai usor de inserat in cod, eliminand nevoia pentru orice script terta.
  • Acest limbaj se perfectioneaza si numai va rezulta la noi implementari, taguri si facilitati ce vor face un website vechi sa arate neconventional, chiar respingator.
  • HTML5 este construit pe HTMl4, asa ca tagurile vechi se vor mentine in timp ce codezi cu noi taguri!
  • HTML5 si CSS3  iti vor aduce o incredere serioasa ca designer.

CSS 3

Cascading Style Sheets (CSS) ofera o flexibilitate crescuta in prezentarea continutului unui website.In esenta, face lucrurile mai frumoase.Chiar daca CSS3 inca nu este implementat in toate browserele, devine tot mai popular deoarece face lucrurile mult mai usoare decat sa obtii acelasi efect utilizand Javascript sau ceva asemanator.

CSS3 ofera o multime de lucruri noi pentru a imbunatati un website.Multe dintre noile optiuni nu sunt axate pe functionalitate, dar pe parcursul anilor webmasterii au observat ca utilizatorii vor pe langa functionalitate, un design modern si bestial.

Unele facilitati, ca meniurile, sunt necesare in aproape orice website.Dar cu CSS3, functionalitatea si designul cresc exponential.Submeniuri cand treci peste un link, meniuri orizontale, meniuri cu colturi rotunjite, submeniuri cu taburi, submeniuri cu continut descriptiv, mega-meniuri.Userii ar aprecia sa vada un pic mai mult din pagina inainte de pierde potentialul timp.

Noi trucuri interesante

Box Shadow – Pana nu de mult, crearea unei umbre la o pagina era destul de grea.Trebuia ca webmasterul sa foloseasca o imagine sau un plugin Javascript.Cu Box Shadow poti adauga umbre printr-o singura linie de cod, dand un aspect de adancime website-ului.

Text Shadow – poti adauga umbra la continut, sau mai bine zis la un anumit font

 

h1 {
     text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Adaugarea fonturilor mai usoara – Pentru a adauga un font, trebuie doar ai sursa acestuia, sa-l incarci, iar apoi sa-l chemi la un element.Poti face asta foarte usor prin @font-face.

Fundale multiple – Pentru a adauga fundale multiple la o pagina poti utiliza metoda de mai jos:

body {
     background:
     url(../images/bottom-left.png) top right fixed no-repeat,
     url(../images/bottom-right.png) top left fixed no-repeat,
     url(../images/top-left.png) bottom left fixed no-repeat,
     url(../images/top-right.png) bottom right fixed no-repeat;
     background-color:#ffffff;
}

Border images – In locul la un border grosolan si simplist poti utiliza o imagine pe care sa o utilizezi ca un border.

Nivelul opacitatii– Inainte trebuie sa creezi o noua imagine sau sa utilizezi filtrele CSS care erau bune doar in IE.Acum poti doar sa adaugi “opacity: 0.5;” sau alt numar intre 0 si 1 pentru a obtine efectul dorit.

Transform – Acest cod iti permite sa alegi cat de mare vrei sa fie o suprafata cand treci cu mouse-ul peste ea.

Colturi rotunjite – Inainte de CSS3, acestea erau destul de complicate, dar acum poti sa elimini acele colturi enervante fara a utiliza imagini.

 

div {
     border: 2px solid #434343;
     padding: 10px;
     background: #e3e3e3;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     width: 500px;
}

Nota: Moz vine de la Mozilla, in timp ce webkit este pentru Safari si Chrome.

Redimensionarea elementelor – Acest cod merge in Safari pentru a adauga un triunghi ce le permite userilor sa…redimensioneze ceva.

div {
     resize: both;
}

Concluzie

Cam aceasta ar fi o mica introducere in HTML5 si CSS3.Ce vreau sa subliniez este ca putem utiliza unele din functionalitatile noilor limbaje, doar ca trebuie sa fim atenti la suportul pentru browsrele mai vechi.Eu cred ca voi userii puteti accelera si mai mult procesul utilizand cele mai noi browsere, iar webmasterii utilizand mai mult aceste limbaje.

 

Leave a comment

Your email address will not be published. Required fields are marked *

Send this to a friend