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.

Am sa dedic acest articol unei metode de ascundere a elementelor din pagina folosind JavaScript. Sigur ca daca folosim jQuery acest lucru se poate realiza cu o singura linie de cod, dar poate nu vrem sa includem o librarie de 29k  pentru un lucru atat de simplu.

In acest caz, va trebui sa facem un pas inapoi si sa vedem cum putem face acest lucru folosind-u-ne numai de motorul JavaScript prezent in orice browser din ziua de azi.

Asadar, sa nu mai pierdem timpul. Incepem mica noastra demonstratie cu un cod html de baza. Avem de-a face cu un div care va fi ascuns si un buton pe post de declansator:

<div id="wrapper">
	<input type="button" id="button" value="Ascunde" onclick="toggle('theDiv')" />
	<div id="theDiv">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat turpis quis sem aliquet dignissim. Sed pellentesque eros lacinia lorem malesuada ornare. Aenean eget elementum justo. Donec ut justo sem, non volutpat sapien...</p>
	</div>
</div>

Observati ca input-ul de tip button are un atribut onclick care cheama o anume functie toggle(). De ce se numeste asa? Pentru ca functia nu numai ascunde elementul vizat. Il ascunde daca este vizibil si il arata daca este ascuns. Deci cum arata functia javascript?

<script type="text/javascript">
	function toggle(id)
	{
		var obj = document.getElementById(id);
		var button = document.getElementById('button');

		if(obj.style.visibility == 'hidden')
		{
			button.value = 'Ascunde';
			obj.style.visibility = 'visible';
		}
		else
		{
			button.value = 'Arata';
			obj.style.visibility = 'hidden';
		}
	}
</script>

Nu e prea mult de explicat. Functia ia ca parametru, id-ul elementului pe care trebuie sa-l ascunda. Mai departe, analizeaza elementul si decide daca trebuie sa ascunda sau sa arate elementul. Mai mult, are grija sa schimbe textul scris pe buton in functie de starea elementului.

Gata. E atat de simplu. Evident ca acest exemplu este unul cat se poate de simplu. Codul poate fi rafinat sa tina cont de mai multe situatii. Daca aveti intrebari sau nelamuriri legate de codul de mai sus, va astept cu comentarii sau in sectiunea Intreaba-ma.

Vezi Demo

In acest articol vom vorbi despre modul in care putem sa folosim fonturi non-standard in paginile web. Cu totii stim ca atunci cand alegem fontul pentru un proiect, trebuie sa avem grija ca acesta sa fie unul care se gaseste pe toate (sau majoritatea) calculatoarelor. Mai mult, de cele mai multe ori, desi folosim un font precum Arial tot trecem si familia generala sans-serif in eventualitatea ca ar exista vreun calculator care sa nu aiba acest font instalat.

CSS vine in ajutorul nostru si ne permite sa importam  orice font dintr-o locatie de pe disc. Astfel, nu mai avem nevoie sa ne limitam la cele cateva fonturi “web safe” si nu mai trebuie sa folosim imagini pentru titluri mai deosebite. Deci cum functioneaza?

Mai intai trebuie sa identificam fontul pe care dorim sa-l folosim. Eu am ales Elder Gods de pehttp://www.1001freefonts.com. Am folosit urmatorul markup:

<!DOCTYPE html>
<html>
	<head>
		<title>Sa ne jucam cu font-uri</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	</head>
	<body>
		<div id="wrapper">
			<h1>Fonturi diverse cu CSS3</h1>
		</div>
	</body>
</html>

Rezultatul va arata asa:

Acum sa vedem cum arata style.css:

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.