Aceasta este traducerea in romana a documentului original in engleza realizat de Karl Dubost. Aceasta traducere poate contine erori. In caz de neclaritati, versiunea in engleza este cea autoritativa.

Traducere de Andrei Stanescu, Aprilie 2005.

Siteul meu este standard! Dar al tau?

Statut

Acest articol a fost sris ca parte a activitatii W3C Quality Assurance Interest Group. Please send any public feedback on it to the publicly archived mailing list public-evangelist@w3.org or for a private feedback to karl@w3.org. Autorul le multumeste celor care au contribuit la acest articol.

Introducere

Aici vei gasi tehnici usor de aplicat, pentru a folosi cod valid si a imbunatati calitatea site-ului tau. Acest document se adreseaza celor care folosesc HTML, web developerilor si webmasterilor.

Majoritatea site-urilor web nu sunt valide. Presupunem ca acest lucru este valabil pentru 99% din paginile web, dar nu exista statistici clare care sa sustina acest lucru. Ar fi interesant sa se efectueze un astfel de studiu pentru a stabili un procent exact.

De ce?

HTML si standardele

Comentarii

Am auzit multe comentarii despre acest subiect. Majoritatea se datoreaza lipsei de intelegere a validarii HTML. Urmatoarele sunt cateva exemple:

Steve, CEO, spune: Daca site-ul meu e facut cu standarde, va fi neinteresant si voi pierde clienti.

Cu standardele W3C poti crea siteuri web foarte interesante. A crea o pagina web care respecta standardele nu inseamna nici pe departe a crea pagini doar cu text.

W3C prezinta un set de tehnologii integrate. Poti crea un site multimedia cu tehnologii W3C existente XHTML (Structured XML markup), CSS (Style sheets), SVG (2D vector animated graphics), si SMIL (Synchronized Multimedia). Aceste tehnologii au fost construite prin consens de catre cele mai importante organizatii care activeaza pe web.
Alan, Director Tehnic, spune: Nu am resursele financiare care sa-mi permita sa folosesc standardele. Costa prea mult!

Un design conform cu standardele va simplifica mentenanta site-ului, in primul rand pentru ca nu va fi nevoie de mai multe versiuni de cod pentru browsere diferite. Paginile tale vor avea o viata mai lunga si nu vor depinde de tehnologii efemere. Deci un design conform standardelor te va costa de fapt mai putin.
Dean, Director Artistic, spune: Daca respect standardele, imi voi limita creativitatea.

Limite de ordin tehnic exista in orice mediu artistic, spre exemplu in pictura sau sculptura, ca si in web design. Culorile in ulei sau apa aduc unele constrangeri, dar acestea nu sufoca creativitatea, ci reprezinta structura fizica prin care este exprimata creativitatea artistica.

Standardele web deschid o noua lume de tehnici si medii de exprimare. Acesta este un domeniu vast, care abia incepe sa fie explorat.
Claudia, Graphic Designer, spune: Nu ma intereseaza accesibilitatea. Site-ul meu nu se adreseaza persoanelor cu disabilitati.

Un design accesibil este in avantajul tau. Persoanele cu disabilitati reprezinta 8% - 10% din populatie. Este mai usor sa mentii un site care respecta standardele de accesibilitate. Vei avea mai multi vizitatori si site-ul va putea fi accesat de toate browserele.

In unele tari accesibilitatea este ceruta prin lege: Australia (Disability Discrimination Act Advisory Notes Version 3.1 May 1999), USA (Section 508 - Web-based Intranet and Internet Information and Applications). Uniunea Europeana va implementa ceva similar in curand (e-accessibility).
Aminata, Web Programmer, spune: De ce sa respect standardele? Web-ul e un loc liber.

Web-ul e un loc liber, dar e folosit de utilizatori diferiti si e posibil sa nu fii constienta de nevoile tuturor. Standardele au fost dezvoltate tinand cont de nevoile tuturor utilizatorilor. Web-ul este un loc liber datorita standardelor, deoarece acestea nu apartin unei anumite companii si nu depind de o anumita platforma sau program.
Karl, Web Developer, spune: Eu doar am urmat instructiunile din carti.

Din pacate, multe carti nu invata programare buna. Cand faci un site, trebuie sa verifici corectitudinea markup-ului. Daca esti Web developer, fii atent ce carti folosesti cand iti dezvolti aplicatiile si citeste specificatiile pentru tehnologiile pe care le folosesti.

Exista site-uri care contin materiale care te ajuta in realizarea site-urilor conform cu standardele W3C. Pe site-ul W3C vei gasi o lista in continua crestere de tutoriale.

Anumite persoane de la W3C au creat software pe care il poti folosi gratis. Iti sugeram sa folosesti acest software cand ai nevoie, pentru ca implementeaza tehnologiile W3C.
Tim, Contabil, spune: Editorul meu web genereaza markup care nu este valid.

Multe astfel de editoare nu genereaza markup valid. Unele verifica sintaxa, altele creaza cod bun, dar majoritatea pur si simplu nu genereaza cod valid. Ca o solutie intermediara, poti verifica paginile cu un validator HTML. Contacteaza producatorul editorului sau programului care genereaza cod invalid (prin e-mail, telefon sau scrisoare) si spune-le despre aceasta problema. Companiile de software isi vor repara produsele daca primesc destule plangeri.
Valerie, Web Content Developer, spune: Nu e vina mea. Asa a fost construit motorul de template-uri. (De obicei un sistem cu interfata online).

Ai dreptate. De multe ori nu e vina ta. Daca e vorba de un formular on-line si nu scrii niciodata markup-ul HTML, cotacteaza developerul care a facut sistemul sau persoana care este responsabila pentru functionarea site-ului. Daca nu stii daca paginile produse respecta standardele, valideaza-le cu un validator HTML, si trimite rezultatul Webmaster-ului, sau persoanei responsabila de sistemul de content management.
Mihai, Software Developer, spune: Nu exista informatii care sa ma ajute. Toate materialele sunt in engleza.

Exista persoane care au tradus documente si specificatii in alte limbi, inclusiv romana. Pe site-ul W3C exista o lista cu traduceri.

HTML este un standard (la fel ca si XHTML!)

HTML a evoluat in timp, si are mai multe versiuni. Toate aceste versiuni sunt standarde, si o poti alege pe cea mai mai potrivita nevoilor tale. In general, ultima versiune reprezinta cea mai buna alegere. Versiunea aleasa determina elementele si atributele pe care le poti folosi.

Spre exemplu, in HTML 4.01, ai o lista de elemente si o lista de atribute pe care ai voie sa le folosesti. Poti edita paginile manual, scriind direct sursa.

HTML 4.01 iti permite sa scrii un paragraf si un identificator pentru el astfel:

<p id="ref">Acesta este un paragraf</p>

Fii atent unde pui elementele. Unele elemente nu pot aparea in interiorul unor anumite elemente si unele atribute pot fi folosite doar pentru anumite elemente.

Elementele pe care le poti folosi in pagini depinde de versiunea HTML. Acest tabel contine o lista cu versiunile HTML si modul de declarare al lor (DOCTYPE):

Versiune	DTD	declaratia DOCTYPE
HTML 2.0	DTD	<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2	DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01	Strict, Transitional, Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0	Strict, Transitional, Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	DTD	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

No poti valida un document daca nu folosesti una din aceste declaratii la inceputul documentului.

Editoare HTML: Toate editoarele HTML trebuie sa propuna un DOCTYPE si sa genereze markup in functie de acesta.
Template HTML: Orice template HTML trebuie sa aiba un DOCTYPE.
Librarie HTML sau motor de template-uri (server side): Orice librarie HTML sau motor de template-uri trebuie sa produca un DOCTYPE.

Acesta este un exemplu de document XHTML 1.0 Strict.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">

<head>
	<title>Template de document XHTML 1.0 Strict</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

     ... Continutul vine aici ...

</body>
</html>

Un template XHTML Strict este usor de facut. Modificarea si validarea sunt simple.

Validarea documentelor

Validarea HTML-ului

Un validator HTML verfica daca documentul este corect pentru DOCTYPE-ul lui.

Daca vrei sa verifici validitatea documentului final (documentul care ajunge la browser), poti folosi validatorul HTML al W3C. Validatorul va arata o lista a erorilor, in functie de DOCTYPE. Daca documentul nu are erori, validatorul afiseaza mesajul No errors found!.

Daca editezi site-ul cu ajutorul unor formulare (si nu trebuie sa scrii tag-uri in acestea), poti sa informezi Webmaster-ul despre erori si sa-i ceri sa repare sistemul care genereaza paginile.

Daca ai creat pagina manual, repara erorile raportate de validator; acesta raporteaza tipul erorii si numarul liniei pe care se afla.

Validatorul incepe validarea de la inceputul paginii si raporteaza erorile in ordine. Aceasta inseamna ca o eroare la inceput poate genera mai multe erori mai tarziu. O metoda buna este sa corectezi prima eroare si apoi sa revalidezi pagina. Vei observa ca daca repari o problema rezolvi deseori mai multe erori. Continua sa faci acest lucru pana cand validatorul nu mai gaseste erori si pagina este valida.

Daca folosesti un editor HTML si paginile nu sunt valide dupa editare, semnaleaza acest lucru companiei care a produs programul.

Daca dezvolti un motor de template-uri, editor, sau sistem de content management, foloseste validatorul HTML pentru a decoperi si rezolva eventualele probleme. Poti incorpora validatorul chiar in aplicatie. Codul sursa al validatorului HTML este disponibil si poate fi folosit de oricine. Validatorul este imbunatatit pe zi ce trece si poti participa si tu la dezvoltarea lui.

Nota: Unele documente sunt valide din punctul de vedere al DTD-ului dar totusi nu respecta complet specificatia HTML. In viitorul apropiat vom face o lista cu erorile care nu sunt detectate de validatorul HTML.

Lista validatoarelor HTML

Validarea link-urilor

Un alt aspect important pentru un site il reprezinta URI-urile. Cand adaugi link-uri spre alte site-uri, te astepti ca acestea vor ramane stabile, adica informatia la care te referi va fi acolo cand un vizitator va da click pe link. De asemenea, vrei sa te asiguri ca link-urile interne si externe nu sunt scrise gresit. A fost creata o unealta care face exact acest lucru: W3C Link Checker.

Checklink genereaza un raport de link-uri. Lungimea raportului depinde de numarul de link-uri si de timpul necesar verificarii lor. Pentru a verifica un link, programul foloseste HEAD HTTP request-ul documentului. Daca serverul nu este configurat bine si nu prezinta informantia necesara in head, este posibil sa obtii un raport negativ chiar daca link-ul este bun. In acest caz, poti sa ii scrii webmasterului si sa ii ceri sa corecteze problema.

Checking link http://webstandards.org/
HEAD http://webstandards.org/  fetched in 0.1s

Deasupra este un exemplu de lista. La fetched in 0.1s este dat timpul necesar pentru contactarea link-ului.

Dupa lista link-urilor vei avea un raport cu link-urile care nu merg sau care sunt redirectionate, care te va ajuta sa le repari.

Daca vrei mai multe informatii, te invit sa citesti documentul Cool URIs don't change scris de Tim Berners-Lee.

Daca tu, ca Webmaster, vrei sa instalezi un program in site-ul tau care sa le permita utilizatorilor sa-si verifice paginile, codul sursa al W3C Link Checker este disponibil gratis.

Validarea CSS

Din 1996, Cascading Style Sheets (CSS) reprezinta un mod elegant si eficient de separare al continutului de prezentare. Inca din 2001, multe browsere au implementat CSS 1 si CSS 2. Folosind style sheets (numite si foi de stil, foi CSS sau simplu CSS) poti tine informatia legata de prezentarea site-ului intr-un singur loc.

Deocamdata poti alege intre CSS 1 si CSS 2. In momentul de fata (Aprilie 2005), CSS 3 e inca in dezvoltare.

Designul cu style sheets are multe beneficii, cum ar fi reducerea costurilor de design si mentinere, si face site-ul accesibil unui numar mai mare de browsere sau alte dispozitive. Un design cu tabele si JavaScript, cu diferite versiuni pentru diferite browsere poate creste costul initial cu 30%.

Nu folosi elementul FONT cu atributul FACE. Este considerat daunator din punctul de vedere al internationalizarii. Daca vrei sa scapi de elementul font si sa folosesti style sheets, iti recomandam sa citesti tutorialul scris de Todd Fahrner Beyond the FONT tag: Practical HTML text styling.

La fel ca pentru validarea HTML, poti verifica validitatea style sheet-urilor externe. Daca vrei sa iti instalezi acest serviciu pe site-ul tau, pentru vizitatori, sau sa il adaptezi nevoilor tale, codul sursa al validatorului CSS este disponibil.

Validarea accesibilitatii

Nu e de ajuns doar sa ai un site, acesta trebuie sa poata fi accesat de vizitatori. Nu poti ghici exact care va fi audienta ta. Persoanele care iti vor accesa site-ul vor avea diferite browsere, hardware diferit si e posibil ca unii sa aibe disabilitati. Daca ai un design accesibil, exista multe avantaje pentru afacerea ta. Din pacate nu este asa de usor sa validezi accesibilitatea. Exista unele, ca Bobby, care te pot ajuta, dar nu dau un raspuns definitiv. Accesibilitatea trebuie verificata de o persoana. Web Accessibility Initiative are o lista de resurse care te va ajuta sa creezi site-uri accesibile.

Unelte care te ajuta sa imbunatatesti calitatea

Deseori developerii nu fac site-urile valide pentru ca au un numar mare de pagini invalide sau nu stiu de unde sa inceapa. Cu pasi mici, luand fiecare lucru in parte, vei avea pana la urma un site valid fara sa fii coplesit de lucrurile care trebuie facute. Gandeste-te si la solutii care ar putea sa-ti usureze munca, spre exemplu un motor de template-uri.

O lista de unelte care te pot ajuta in crearea unui site mai bun:

HTML Tidy

Tidy a fost dezvoltat initial de Dave Raggett. Te va ajuta sa faci un site valid. Uneori Tidy nu va putea rezolva toate problemele. Tidy nu este un editor, el doar repara paginile invalide.

Validare pregresiva

Este dificil de stabilit ce pagini trebuie validate mai intai. Daca rulezi un script care verifica toate paginile, e destul de probabil ca vei avea o lista foarte mare de erori.

Care este solutia?

La W3C, Gerald Oskoboiny a creat o unealta de validare progresiva care nu te copleseste cu un numar foarte mare de erori. Aceasta creaza un raport cu cele mai invalide 10 pagini si da informatii despre repararea lor. In fiecare saptamana vei primi o lista cu urmatoarele 10 pagini. Aceasta unealta este disponibila public. Poti sa o adaptezi nevoilor tale.

Olivier Théreaux, de la W3C, a creat o versiune mai adaptabila: LogValidator.

Aceasta foloseste log-urile serverului pentru a valida cele mai des vizitate pagini mai intai. Se poate valida codul HTML, dar nu numai atat.

Vei putea verifica greseli de scriere in text, daca ai inclus metadata, daca link-urile mai sunt bune, etc. O documentatie API te va ajuta sa creezi noi module conform nevoilor tale.

Multumiri

Le multumesc celor care au contribuit la acest articol: Ian Jacobs, Susan Lesch, Olivier Théreaux, Stephanie Troeth, Jeffrey Zeldman si celor din public-evangelist mailing-list.

Acest articol nu ar fi fost posibil fara contributia lui Kim Nylander.

Created Date: 2002-04-08 by Karl Dubost
Last modified $Date: 2004/09/28 21:44:59 $ by $Author: kdubost $

Copyright © 2000-2003 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.