Cu ceva vreme in urma stateam de vorba cu un amic despre evolutia rapida a tehnologiilor web si despre felul in care lucrurile devin foarte usor depasite.

Sa luam un exemplu simplu: fonturile. E adevarat ca exista niste adevaruri generale. Astea nu se vor schimba foarte curand. De exemplu scrisul alb pe fundal negru este strict interzis. Evident, nu ne opreste nimeni sa-l folosim dar cu siguranta rezultatul va fi unul slab.

Dar mai sunt si informatii cumva contradictorii. Acum ceva timp, urmarind un tutorial de web design si web development aflam urmatoarea informatie: Fonturile cu serife (Times, Georgia) sunt pentru print si fonturile fara serife (Verdana, Arial) sunt pentru screen/web.

Si argumentele pe care le-am primit atunci pareau valide. Am respectat regula. Numai ca intre timp au venit alti experti care spun sa nu mai folosim fonturi fara serife. Georgia e bun acum. E frumos si odihnitor, de aceea trebuie folosit cat mai des. Bun, facem si asta si ce facem cand se descopera noul trend?

Un alt exemplu este metoda de layout. Mult timp tabelele au fost de baza in asezarea elementelor in pagina. Dupa aceea a evoluat CSS-ul si tabelele au fost inlocuite de div-uri. Mai nou a venit HTML5 cu toate elementele sale si div-ul nu mai e la moda. In specificatia W3C pentru HTML5 se scrie ca div-ul ar trebui folosit doar in lipsa de altceva. Deci s-a mai dus un reper.

Flash era de baza pana de curand in creearea de site-uri interactive. Acum nu mai este bun; mananca prea multe resurse si nu e consistent. HTML5 e noul trend si ar trebui cat mai des posibil.

Nu ma intelegeti gresit, nu sunt impotriva progresului. Tehnologiile noi si adoptarea lor au adus web-ul unde este acum si vor continua sa-l propulseze. Tot ce spun este sa nu ne lasam dusi de val, furati de trend-uri.

Ar trebui sa luam sfaturile expertilor si sa vedem care din ele se potrivesc la ceea ce avem nevoie. Abia dupa ce ne asiguram ca nu suntem tentati de un trend trecator ar trebui sa implementam solutii web pe termen lung.

Un lucru pe care l-am apreciat intotdeauna la compania Adobe a fost politica lor cu privire la produsele concurente. Niciodata nu i-am vazut sa loveasca in concurenta prin altceva decat calitatea produselor pe care le ofera. Mai mult, focusul a fost intotdeauna indreptat catre dezvoltatori si catre metode de a le face viata mai usoara.

Astfel ca Flex, meta-limbajul lor indreptat catre aplicatii media pe web nu se integreaza numai cu ColdFusion, ci si cu PHP. De ce? Pentru ca multi dezvoltatori il folosesc. Ei de ce sa nu beneficieze de interfete dinamice si de puterea pe care Flex o pune la dispozitie?

Exemple ar mai fi, dar nu asta tratam in acest articol. Aici vom vorbi despre proiectul Wallaby. El vine intr-o perioada in care multi se grabesc sa spuna ca HTML5 va duce la disparitia Flash-ului de pe web. Acum ca HTML5 ofera playere video native si posibilitatea unor animatii, Flash a devenit inutil.

Fals. Si cei de la Adobe stiu asta. Flash este mult mai mult decat un player video si o interfata animata. Dezvoltatorii l-au folosit pentru construirea de aplicatii cu capabilitati mult peste ceea ce poate oferi HTML5.

De aceea s-a nascut proiectul Wallaby. Ce face el de fapt? Ia un proiect Flash si-l transforma in HTML5. Atentie, vorbim de sursa acestuia, fisierul .fla . Nu va asteptati sa va transforme un .swf luat de pe internet intr-un proiect HTML5.

Deci, de ce ar face Adobe asa ceva? Eu vad doua motive. Primul este filozofia Adobe de a face viata dezvoltatorilor mai usoara. Vrei sa dezvolti pentru iPhone, ai nevoie de HTML5 dar te desfasori mai bine in Flash? Nicio problema, de acum ai la dispozitie o unealta cu care sa iei un proiect facut intr-un mediu care-ti este familiar si sa il transformi in ceea ce ai nevoie.

Al doi-lea motiv este unul financiar, evident. Wallaby este un nume de cod. Dupa ce tehnologia va fi pusa la punct, ea va fi incorporata in Adobe Flash Professional. Asa ca daca esti dezvoltator si ai nevoie sa faci proiecte atat in flash cat si in HTML5, de ce sa nu folosesti un soft cumparat tot de la ei?

Eu nu lucrez in flash, asa ca tehnologia aceasta este cumva irelevanta pentru mine, dar ma bucur ca exista si ma bucur ca Adobe pastreaza filozofia de a se adapta pietei in loc de a o forta sa se plieze pe produsele sale.

Inca un semn ca specificatia HTML5 se apropie de finalizare, este faptul ca in sfarsit a aparut un logo oficial din partea celor de la w3c. Lansarea lui a creat reactii diverse, unele bune altele mai putin. Unii s-au bucurat ca exista, atlii au spus ca web-ul nu e mai bun datorita unui simplu logo.

Altii, ca mine, s-au bucurat ca au ce sa puna la inceputul articolelor cu aceasta tema (daca va uitati in urma, veti vedea ca la articolele din categoria HTML5 am pus un logo, nu prea reusit, facut de mine).

Iata cateva din versiunile de logo pe care w3c le pune la dispozitie la aceasta adresa:

Ce cred eu despre noul logo? Pai, sunt intr-un fel de impas. In primul rand ma bucur ca exista. E normal ca orice entitate cu prezenta pe web, cu atat mai mult markup-ul de baza, sa aiba si un logo. In schimb, aspectul sau nu ma incanta. Arata ca sigla unui erou din desenele animate. E colturos si nu-mi inspira nimic web 2.0.

Asta nu inseamna ca e un lucru rau. E doar impresia care mi-o lasa mie. Oricum singurul loc in care il voi folosi va fi pe blog, pentru ca am trecut de faza in care puneam pe site-urile construite de mine badge-ul cu “W3C valid XHTML”.

Intr-un articol precedent va prezentam cateva din tag-urile pe care HTML5 le pune la dispozitie pentru structurarea paginii. De asemenea, acolo spuneam ca astept cu nerabdare ca standardul sa fie definitivat si adoptam de toate browser-ele (sau macar majoritatea lor).

Realitatea este ca HTML5 nu este suportat 100% de niciun browser la acest moment (cel putin nu din ce stiu eu). Si chiar daca exista un browser care ofera suport, nu putem dezvolta numai pentru el.

Deci nu putem inca sa dezvoltam website-uri in HTML5. Putem, in schimb, sa dezvoltam site-uri HTML5 ready. Cu alte cuvinte putem sa folosim un markup XHTML care sa poata fi transformat ulterior foarte usor in HTML5.

Bazat pe reprezentarea din articolul trecut, layout-ul XHTML ar trebui sa arate asa:

Continuam seria articolelor dedicate noului standard de markup, HTML5. Astazi vom vorbi despre o serie de tag-uri noi care au fost concepute special pentru definirea layout-ului paginii.

Acestea vin in intampinarea nevoilor de structurare corecta a elementelor in pagina. Astfel vom vedea ca avem de-a face cu tag-uri precum <nav> pentru bara de navigatie, <aside> pentru sidebar si <footer> evident pentru footer-ul paginii.

N-am sa insist foarte mult pe ce face fiecare tag in parte, pentru ca sunt destul de descriptive prin natura lor si nu au nevoie de prea multe explicatii. Am sa va arat in schimb cum ar trebui sa arate codul unei pagini scrise in HTML5.

<!DOCTYPE HTML>
<html>
<head>
	<title>HTML5 page</title>
<head>
<body>
	<header>
		<!-- Continut pentru header -->
	</header>
	<nav>
		<!-- Aici vom avea bara de navigatie -->
	</nav>
	<section>
		<!-- Continut principal impartit in elemente -->
		<article>
			<!-- Primul element din continut -->
		</article>
		<article>
			<!-- Al doi-lea element din continut -->
		</article>
		<article>
			<!-- ... -->
		</article>
	</section>
	<aside>
		<!-- Continut pentru sidebar -->
	</aside>
	<footer>
		<!-- Continut footer -->
	</footer>
</body>
</html>

Pentru a va face o idee mai buna despre unde se foloseste fiecare tag in parte am facut o mica reprezentare a elementelor in pagina. Va rog sa iertati culorile alese; sunt developer nu designer.

Vorbeam intr-un articol anterior despre un nou tip de input pe care ni-l aduce standardul HTML5.

Este vorba despre input-ul de tip range, despre care spuneam ca este mai deosebit, pentru ca nu genereaza un camp obisnuit. In schimb, apare sub forma unui slider, care ne permite sa alegem o valoare dintr-un interval predefinit. Astfel, in capetele slider-ului se for gasi valorile minime si maxime ale intervalului, iar pe tot parcursul acestuia, vom avea valori intermediare.

Astfel, codul urmator:

	<input type='range' min='100' max='500' name='range' id='range' />

Va genera un rezultat care arata cam asa:

Daca mutam slider-ul la stanga, valoarea trimisa in formular va fi 100. Daca il mutam la dreapta, va trimite 500. Din pacate, pentru orice valoare intermediara, nu avem niciun indicator vizual care sa ne spuna la ce facem submit. Din acest motiv m-am gandit ca ar fi bine daca am imbunatati putin acest input.