Creaza un website elegant in HTML5 si CSS 3
15Cred 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. 🙂
Ca tot mi-a sarit in ochi paleta de culori.Pentru cei interesati sau doar curiosi de diverse combinatii/palete de culori, accesati http://kuler.adobe.com
O sa va fie de folos.
Sunt de parare ca html 5 e doar o complicatie inutile si nenecesara pentru aspectul unei pagini, insa CSS3 ofera multe avantaje (unele cum ar fi selectors, care nu le’ai prezentat) si sustin adaptarea cat mai rapida a standardului
Nu stiu cat ajuta HTML 5 pe viitor, dar in schimb CSS 3 e mana cereasca:)) oricum la unele chestii s-au inspirat de la efectele CSS 2 care rulau doar pe mozilla, de exemplu rounded corners fara photoshop.
Aproape degeaba cu html5/css3 pana cand oamenii vor folosi browsere compatibile cu noile standarde.
@dr. Parazitu HTML 5 e bun la asemenea chestii :http://www.worldit.info/noutati/google-dezvaluie-puterea-noului-html-5/
@iosif Si la ce te astepti? toata lumea sa foloseasca noile tehnologii dintr-o data? Pana sa devina standard mai dureaza putin.
@iosif banuiesc ca te referi la vechea poveste in legatura cu utilizatorii ce inca mai folosesc IE6(doar un exemplu).
@andrei: o sa dureze un pic mai mult decat „putin”; cel putin 2-3 ani pana cand populatia o sa foloseasca browsere compatibile cu noile standarde. Uita-te si tu, Internet Explorer 6 aparut prin 2002, parca, si dupa 8 ani aproape jumatate dintre cei ce navigheaza pe internet folosesc inca relicva asta.
Sunt destul de interesat de html5 si css3, insa va dura mult pana cand o sa apara siteuri in aceste limbaje. Pe langa scosul unor tehnologi ar trebui facut ceva pentru ca oamenii sa inteleaga de ce este necesar sa aiba un browser cu ultima versiune. Pentru ca degeaba scoti o tehnologie daca nu poti sa o utilizezi.
Oare de ce nu face cineva vrun virus care sa le faca upgrade la browser(in cazul ie 6)… dar deja visez…
Oameni buni, cum sa dureze mult pana sa apara site-uri in asemenea limbaje? 🙂 Tot ce trebuie sa faci ca sa treci pe HTML 5 e sa schimbi doctype-ul (cum a facut Google). IE va citi doctype-ul, va ramane masca, il va ignora si va continua sa randeze ca pana acum.
In alta ordine de idei, welcome HTML5. Tag-urile noi vor fii si ele ignorate, ceea ce face problema mai delicata, dar puteti folosi alte feature-uri HTML 5 cum ar fii tipurile noi de inputuri (mail, date and so on). De asemenea, HTML 5 stie sa randeze video, audio si e foarte ok pentru canvas (canvas + JS = love). Youtube a implementat deja un player HTML 5 iar niste baieti au recreat Quake 2D pe canvas. La inputuri, daca typul nu este recunoscut (cum ar fii email sa zicem) va fii tratat ca input de tip text, pe orice browser, deci nu ne deranjeaza cu nimic.
@drParazitu Nu e inspirat din CSS 2, e chiar CSS 3. Fiecare browser a inceput sa implementeze anumite feature-uri CSS 3, de acolo si denumirea dubioasa (moz-, webkit-). Asta e un lucru bun pentru ca putem sa ne jucam cu cateva lucruri inainte sa fie implementate toate optiunile.
Sunt extrem de multi (fata de cati ar fi normal) care folosesc inca IE6, so what? IE se pregateste sa scoata versiunea 9, iar Win 7 devine din ce in ce mai comun. Majoritari sunt cei care folosesc browsere moderne si se va ajunge la o uniformizare. Standardele actuale (HTML 4.01 + CSS 2) erau perfect ok pana acum ceva vreme, cand s-a cam renuntat la design table based (all the time) si evident nu toate browserele au tratat problema la fel.
Se lucreaza foarte intensiv pe partea de HTML 5, CSS 3 si motoare Javascript mai eficiente. It’s gonna come with a bang 😛
@claudiu: frate, poti sa schimbi tu ce vrei, css 3 nu-ti va fi recunoscut de multe browsere.
@iosif Ma’ nigga, cred ca tu ai citit alt comment 🙂 Unde am scris ca daca schimbi ceva, va fii recunoscut CSS 3? Sau prima oara aruncam cu pietre si dupa gandim?
Am spus ca trecerea de la HTML 4 la HTML 5, dpdv al fisierului in sine, consta in schimbarea doctype-ului (aka <!DOCTYPE html>, simplu, fara complicatii ca pana acum). Si am mai spus ca sunt elemente HTML5 care pot fii folosite fara a crea probleme pe browsere care nu suporta HTML 5 pentru ca atributele necunoscute sunt inlocuite cu altele existente (input type=”email” de exemplu e inlocuit de type=”text”). Iar asta se intampla fara sa faci update-uri la browser sau ceva.
CSS 3 e suportat de browserele moderne partial, asa cum am si specificat, folosind extensiile specifice motoarelor de randare ale lor (moz- si webkit- for example). Ei bine, cu astea ne putem juca. Daca un alt browser nu recunoaste proprietatea CSS o va ignora, no harm done.
Diferentele intre CSS si HTML sunt fundamentale, HTML e limbaj de markup iar CSS de styling. De altfel, doctype-ul de care spuneam ca e safe sa fie schimbat la orice ora, nu are nicio legatura cu CSS, ca nu citeste CSS doctype-ul si daca vrei poti sa folosesti HTML 4 cu CSS 3 sau HTML 5 cu CSS 2, whatever makes you feel good.
So, „frate” vorbim la coltul blocului si acuzam fara argumente tot acolo, deal?
Tema de research: http://diveintohtml5.org/forms.html
a) din pacate, ritmul de actualizare a browserelor in Romania este foarte foarte lent; daca vreti sa avem site-uri romanesti pe HTML 5 in viitorul apropiat, promovati la maxim necesitatea utilizarii unei versiuni cat mai recente a browserului.
b) macheta grafica a unui site nu are nici o legatura cu limbajul de programare; faptul ca prin css se pot reproduce anumite efecte grafice PSD, nu inseamna ca graficianul va incepe sa se limiteze doar la utilizarea unor elemente din biblioteca CSS; menirea programatorului este de a transpune creeatia graficianului, conform structurii site-ului
a) Sunt total deacord, dar nu e suficient un singur om sa faca asta. 🙂
b) Ai dreptate si aici. Eu am incercat sa subliniez faptul ca numai e nevoie de cunostinte PS pentru a face anumite lucruri. Dupa cum vezi si in articolul asta, nu toate chestiile au fost facute in HTML 5 &CSS 3, ci s-a folosit, la minim, PS. 🙂
Eu vad treaba asta cu efecte PS simulate foarte ok cu CSS 3 altfel. Primesc designul in PS de la designer (evident) si nu mai trantesc imagini acolo unde am nevoie de un drop-shadow sau colturi rotunjite. Imi usureaza si mie munca, ofera si o experienta mai placuta utilizatorului (caruia i se incarca mai repede site-ul) si ma iubeste si designer-ul cand nu ii spun sa-mi schimbe design-ul pentru ca daca ii fac tot site-ul din imagini ne injura userii. Everybody happy 🙂
[…] Creaza un website elegant in HTML5 si CSS3 […]