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.

In acest articol vom vorbi despre cateva efecte pe care le putem obtine folosind proprietatea text-shadow. Desi face parte teoretic din specificatia CSS3, proprietatea text-shadow este suportata mai demult de majoritatea browserelor de pe piata (dovada ca nu are nevoie de prefixe de genul -moz sau -webkit).

Bineinteles ca Internet Explorer nu suporta inca aceasta specificatie. Nu am instalat inca versiunea 9 a acestui browser, dar am auzit ca desi suporta proprietatea box-shadow, inca nu stie sa interpreteze text-shadow. Nici nu am de gand sa instalez browser-ul doar ca sa vad daca merge. Cand se va intampla acest lucru, am sa revin cu un update sa va anunt.

Dar inainte sa vedem ce putem face cu text-shadow, sa vedem cum functioneaza:

	text-shadow: 1px 1px 2px #DEDEDE;
	text-shadow: x-offset y-offset blur #color;

Sa vedem deci, cateva din efectele pe care le putem obtine folosind aceasta proprietate:

Primul este acela de  text embosat sau “ingropat”. Acesta se obtine in doua moduri, in functie de culorile cu care lucram. Daca textul este inchis la culoare, efectul se obtine prin adaugarea unui shadow de culoare foarte deschisa (chiar alba) in partea de jos. Codul arata asa:

	text-shadow: 0px 1px 1px #eee;
	background-color: #228B22;
	color: #333;

Iar rezultatul va arata asa:

Daca, in schimb, textul este de culoare deschisa acelasi efect poate fi obtinut aplicand un shadow de culoare inchisa in partea de sus a textului:

	text-shadow: 0px -1px 1px #111;
	background-color: #eee;
	color: #339C33;

Rezultat:

Dar cum facem daca vrem sa obtinem exact efectul invers? Daca vrem ca textul sa apara putin ridicat fata de restul continutului? In acest caz trebuie sa tinem minte ca ochiul uman tinde sa perceapa lumina ca venind din partea din stanga sus. Asta inseamna ca va trebui sa aplicam o umbra departata in jos si in dreapta fata de obiect.

Codul arata asa:

	text-shadow: 1px 1px 2px #000;
	background-color: #eee;
	color: #339C33;

Si va produce un rezultat care apare asa:

Bun, am vazut cateva efecte pe care le putem obtine cu jucand-u-ne cu offset-ul lui text-shadow. Dar sa ne concentram putin asupra valorii de blur. Ce putem face cu ea? Pai, sa va dau un exemplu.

Sa zicem ca vrem sa avem un text discret undeva in header-ul site-ului (sau in orice alta parte). Putem sa folosim un text de aceeasi culoare cu background-ul, pe care sa-l punem un evidenta cu o umbra fara offset, dar cu un blur mare. Sa vedem codul:

	color: #fff;
	text-shadow: 0px 0px 20px #000;

Iar rezultatul va arata asa:

Acestea sunt cateva din efectele care se pot obtine cu ajutorul lui text-shadow. Daca aveti idei pentru alte efecte interesante obtinute cu aceasta proprietate, va astept cu sugestii.

Vezi Demo

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

Zilele astea s-a facut zarva mare pe internet cu lansarea noilor browsere IE 9 si Firefox 4. Evident, ca acest lucru a dat nastere la vechea discutie despre care e mai bun, mai rapid, mai versatil.

Si era normal ca discutia sa nu ramana la IE si Firefox. Sustinatorii Chrome si Opera au sarit si ei cu argumentele lor. In fine, nu despre razboiul browserelor vreau sa vorbesc in acest articol. Aceste lansari si felul in care s-a facut trecerea pentru fiecare in parte m-a pus pe ganduri.

Sa le luam pe fiecare in parte si sa discutam despre ele:

Firefox si Opera au optiunea Check for updates. Daca utilizatorul n-o foloseste timp indelungat, browser-ul descarca noua versiune si cere permisiunea sa o instaleze.

Google Chrome poate fi upgradat prin optiunea Check for updates, dar poate fi setat si sa instaleze versiunile noi fara sa mai ceara permisiune.

Internet Explorer vine in mod normal prin Windows Updates, dar numai la mult timp dupa ce a fost lansata o noua versiune, iar Check for updates nu exista. Daca vrei noua versiune te duci pe site la Microsoft si o descarci.

Deci cum e mai bine? Pai, depinde din ce punct de vedere privim. In mod normal utilizatorul ar trebui sa aiba control total al programelor pe care le are in calculator. El ar trebui sa decida cand si daca vrea sa treaca la o noua versiune.

Dar sa privim si punctul de vedere al dezvoltatorilor web. Ai celor care trebuie sa ofere utilizatorului o experienta web corecta si placuta. Ei bine, aici lucrurile stau altfel.

Daca ar fi dupa mine, browserele ar trebui sa instaleze cea mai recenta versiune fara sa sufle nicio vorba. De ce? Pentru ca de prea multe ori am lucrat la o aplicatie web care desi mergea pe toate browserele (inclusiv IE), nu mergea pe IE6. Si da, sunt in continuare foarte multi utilizatori care il folosesc.

Si asta nu e cea mai mare problema. Pentru ca IE6 este notoriu pentru problemele de randare, asa ca se poate testa separat pentru el. Mai mult, exista softuri de development (cum ar fi Dreamweaver), care iti analizeaza codul si iti arata unde ar putea aparea probleme cu acest browser buclucas.

Dar ce te faci in situatii mai delicate de atat? Am testat la un moment dat o aplicatie de-a mea pe Firefox 3.x si mergea. Din pacate, lucrurile nu se asezau la fel de bine si in Firefox 2.x, care inca mai era folosit destul de mult la vremea aia. La fel si Chrome, care pana de curand a suferit multe imbunatatiri, ceea ce inseamna ca de la o versiune la alta puteau exista multe diferente de comportament.

O sa vedem in acest articol un exemplu rapid pentru rezolvarea unei probleme cu care m-a abordat un cititor. Sa vedem despre ce este vorba.

Avem o lista de elemente, sa zicem melodii, ordonate dupa note. In dreptul fiecarei melodii utilizatorul are posibilitatea sa dea o nota pentru a o ridica in clasament. Dupa vot, trebuie sa fim redirectati inapoi la lista ordonata dupa noile note.

O sa rezolvam aceasta problema in cativa pasi simpli, pentru ca lucrurile sa fie cat mai clare. Pentru ca exemplul sa fie complet, eu am sa includ si fisierul care defineste baza de date cu care vom lucra.

Sa vedem, deci, cum arata structura bazei de date:

CREATE DATABASE music_test;

USE music_test;

CREATE TABLE song
(
	id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
	name VARCHAR(64) NOT NULL,
	rating INT NOT NULL
);

INSERT INTO song(name, rating) VALUES('Calexico - Pepita', 0);
INSERT INTO song(name, rating) VALUES('Clannad - I Will Find You', 0);
INSERT INTO song(name, rating) VALUES('Sven Van Hees - Flute Salad', 0);
INSERT INTO song(name, rating) VALUES('M.O.P. - Cold As Ice', 0);
INSERT INTO song(name, rating) VALUES('Gloria Gaynor - I Love You Baby', 0);
INSERT INTO song(name, rating) VALUES('Queen - Love of My Life', 0);
INSERT INTO song(name, rating) VALUES('Sally Oldfield - Mirror', 0);
INSERT INTO song(name, rating) VALUES('Linkin Park - Somewhere I Belong', 0);
INSERT INTO song(name, rating) VALUES('Holograf - Viata Are Gust', 0);
INSERT INTO song(name, rating) VALUES('Joey Diggs - Always Coca-Cola', 0);
INSERT INTO song(name, rating) VALUES('Mission Belle - Just What I Want', 0);
INSERT INTO song(name, rating) VALUES('Dj Bobo - Chihuahua', 0);

Dupa cum se vede, avem o tabela simpla in care tinem un id (pentru identificare unica), un nume si nota pe care a primit-o melodia. Observati ca toate melodiile pleaca de la nota zero.

Sa vedem acum fisierul index.php unde vom afisa melodiile si de unde utilizatorii vor putea vota

<!DOCTYPE html>
<html>

<head>
	<title>Lista melodii</title>
	<style type="text/css">
		body {
			font-family: sans-serif;
			font-size: 13px;
			color: #000;
		}

		table tr td {
			padding: 3px;
		}

		#wrapper {
			width: 304px;
			padding: 15px;
			border: 1px solid #CCC;
			margin: auto;
		}
	</style>
</head>

<body>
	<div id="wrapper">
		<form method="post" action="save.php">
			<?php include("table.php"); ?>
			<div style="text-align: right; margin: 0px; padding: 0px">
				<input type="submit" value="Voteaza" />
			</div>
		</form>
	</div>
</body>

</html>

Este o structura HMTL simpla, dar o scriem intr-un fisier cu extensia .php pentru a putea diviza putin codul. Astfel, observati ca includem la un moment dat fisierul table.php. Sa vedem cum arata el si ce face: