Original source: https://www.maxdesign.com.au/articles/benefits.html
Pubblicato:23 febbraio 2004
Questo articolo esplora i vantaggi degli standard web per gli sviluppatori, incluso il markup valido, semantico e accessibile, e chi trae maggiori vantaggi da queste pratiche.
1. Gli standard Web
“Gli standard web sono destinati ad essere una base comune … una base per il world wide web in modo che i browser e altri software comprendano lo stesso vocabolario di base “.
Eric Mayer
Il W3C (World Wide Web Consortium) e altri organismi di standardizzazione hanno stabilito tecnologie per la creazione e l’interpretazione dei contenuti basati sul web. Gli standard attuali sono:
1.1. Linguaggi strutturali
- Linguaggio di markup ipertestuale estensibile ( XHTML ) 1.0
- XHTML 1.1
- Linguaggio di markup estensibile ( XML ) 1.0
1.2. Lingue di presentazione
1.3. Modelli di oggetti
1.4. Linguaggi di scripting
- ECMAScript 262 (la versione standard di JavaScript)
1.5. Lingue di presentazione aggiuntive (markup)
2. A cosa servono gli standard Web?
Questi “standard Web” sono progettati per:
- offrire i maggiori vantaggi al maggior numero di utenti web
- garantire la fattibilità a lungo termine di qualsiasi documento web
- semplificare il codice e ridurre i costi di produzione
- fornire siti accessibili a più persone e a più tipi di dispositivi Internet
- continuare a funzionare correttamente con l’evoluzione dei browser e con l’arrivo sul mercato di nuovi dispositivi
Per i web designer e gli sviluppatori, gli standard Web riguardano l’utilizzo di standard (linguaggi strutturali, di presentazione, di oggetti e di scripting) e le migliori pratiche (codice valido, semantico e accessibile) a vantaggio dei tuoi utenti, dei tuoi clienti e di te stesso.
3. Un cambiamento di mentalità
3.1.Sito web tradizionale
Lo sviluppo tradizionale di siti web è un’estensione dei supporti stampati , progettato per far sì che i siti abbiano un aspetto pixel-perfetto nei 5-6 browser principali. Le caratteristiche comuni includono:
- Layout basati su tabelle
- Presentazione all’interno del contenuto (tag font)
- Codice non VALIDO
- Codice inaccessibile
- Codice semanticamente errato
3.2. Sito web “Standard Web”.
Gli standard Web riguardano l’accettazione del Web come un ampio strumento di comunicazione a cui può accedere un’ampia varietà di utenti e una varietà di dispositivi . Le caratteristiche comuni includono:
- Markup semanticamente corretto
- Codice valido
- Codice accessibile (per esseri umani e dispositivi)
- Fogli di stile a cascata (CSS) per separare il contenuto dalla presentazione
4. Markup semanticamente corretto
Il markup semanticamente corretto utilizza gli elementi html per il loro scopo specifico . L’HTML ben strutturato ha un significato semantico per un’ampia gamma di programmi utente (browser senza fogli di stile, browser testuali, PDA, motori di ricerca ecc.)
Dovresti utilizzare elementi HTML standard per il markup ed evitare di applicare stili agli elementi HTML in modo che assomiglino ad altri elementi HTML . In termini semplici, questo significa:
- per i titoli, utilizzare elementi di titolo che iniziano con H1
- per i paragrafi di testo, utilizzare un elemento paragrafo
- per gli elenchi, utilizzare gli elementi di un elenco
5. Qual è il codice valido?
La convalida è un processo di controllo dei tuoi documenti rispetto a uno standard formale , come quelli pubblicati dal W3C. Un documento che è stato controllato e superato è considerato valido.
5.1. Perché utilizzare un codice valido?
- Il codice valido verrà visualizzato più velocemente del codice con errori
- Il codice valido verrà visualizzato meglio del codice non valido
- I browser stanno diventando sempre più conformi agli standard e sta diventando sempre più necessario scrivere HTML valido e conforme agli standard
5.2. Come controlli se il tuo codice è valido
- Servizio di convalida del markup W3C
- Servizio di convalida CSS del W3C
- Validatore HTML WDG
- Molti prodotti software ora dispongono di strumenti di convalida integrati
5.3. Come rendi valido il tuo codice?
- Inizia con il doctype giusto
- Fai attenzione alle modalità doctype (conformità agli standard, modalità quirk, ecc.)
- Utilizza un set di caratteri
- Chiudi gli elementi HTML
- Usa i tag alt per le immagini
- Evita gli hack HTML
- Utilizza regolarmente i validatori HTML
- Correggi tutti i bug che trovi prima di andare in diretta
- Rendi la convalida parte del tuo normale processo di lavoro
6. Perché utilizzare un codice accessibile?
- Consente al tuo sito di essere accessibile a un pubblico più vasto (con problemi di vista, con difficoltà motorie, con problemi cognitivi)
- Consente l’accesso al tuo sito da una gamma più ampia di dispositivi (palmari, lettori di schermo, browser di testo, motori di ricerca)
- È un requisito per i siti del governo federale e statale
6.1. Come rendi il tuo codice accessibile?
- Fornire equivalenti testuali per gli elementi non testuali
- Utilizzare tabelle di dati accessibili (identificare intestazioni di righe e colonne)
- Utilizza moduli accessibili (etichetta per, id, fieldset, legenda)
- Utilizza il markup anziché le immagini per trasmettere informazioni.
- Fornire menu di salto visibili
- Fornire le chiavi di accesso
- Utilizza i fogli di stile con le relative unità per controllare il layout e la presentazione
- Assicurati che i documenti possano essere letti senza fogli di stile
- Fornire metadati per aggiungere informazioni semantiche
7. Perché utilizzare i CSS per separare il contenuto dalla presentazione?
Lo scopo degli sviluppatori web è rimuovere tutta la presentazione dal codice html, lasciandolo pulito e semanticamente corretto.
- Più accessibile a una più ampia varietà di dispositivi
- È più semplice apportare modifiche a tutto il sito : un file CSS anziché tutte le pagine
- File più piccoli/download più veloce : meno codice sulla pagina
- Meno codice sulla pagina: più facile da codificare
- Consente agli utenti di personalizzare in base alle proprie esigenze: commutatori di stile
- Maggiore controllo sul codice: può fornire il codice nell’ordine preferito per gli screen reader
8. Un sito basato su CSS in azione
Uno degli aspetti più potenti dei CSS è che il contenuto può essere riproposto in base alle proprie esigenze, senza modificare una riga di codice html.
9. In che modo i tuoi VISITATORI beneficiano degli standard Web?
- I file verranno scaricati più velocemente (meno codice, nessuna tabella complessiva, codice valido)
- Il contenuto è accessibile a una gamma più ampia di utenti (utenti normali, utenti non vedenti, utenti con problemi di vista, utenti dislessici, utenti con difficoltà motorie, ecc.)
- Il contenuto è accessibile a una gamma più ampia di dispositivi (lettori di schermo, browser, browser testuali, dispositivi portatili, robot di ricerca, stampanti, frigoriferi, ecc.)
- Consente agli utenti di personalizzare l’aspetto del sito (commutatori di stile)
- Fornisce versioni stampabili per tutte le pagine
10. In che modo i tuoi CLIENTI traggono vantaggio dagli standard Web?
- Più facile da mantenere (meno codice, codice modulare)
- Costi di hosting più economici (meno codice)
- Migliore posizionamento nei motori di ricerca
- Il contenuto può essere facilmente rinnovato senza modificare il codice
- Fornisce agli utenti la personalizzazione
- Fornisce versioni stampate senza replicare il contenuto
- Migliora l’accessibilità (essenziale per i clienti governativi)
11. Come puoi trarre vantaggio dagli standard Web?
- Più facile da codificare (codice modulare)
- Più facile da mantenere (meno codice, codice modulare)
- Codifica meno dipendente dal dispositivo (stabile su una più ampia varietà di dispositivi)
- Fornisce un vantaggio competitivo man mano che sempre più parti del mondo utilizzano gli standard Web.
12. Quali sono gli svantaggi
- Ripida curva di apprendimento
- Problemi di compatibilità del browser
- Alcuni layout possono essere ottenuti molto più facilmente utilizzando le tabelle piuttosto che i CSS
13. Come si raggiungono gli standard Web?
Gli standard Web non sono una questione in bianco e nero . Tutti gli sviluppatori dovrebbero mirare a spostarsi gradualmente verso siti basati sugli standard Web.
Il passaggio dallo sviluppo tradizionale a quello basato sugli standard Web richiede tempo e pratica . Invece di buttarsi a capofitto e sentirsi rapidamente frustrati, stabilire obiettivi realizzabili e spostarsi gradualmente verso gli standard Web. Per esempio:
13.1. Cambiamenti fondamentali
- Aggiungi un doctype corretto a tutte le pagine
- Aggiungi testo alternativo a tutte le immagini
- Aggiungi titoli di pagina significativi
13.2. Cambiamenti intermedi
- codice valido
- codice semanticamente corretto
- sostituendo i tag dei caratteri in linea e il colore in linea con i CSS
- moduli accessibili, tabelle dati e menu di salto
13.3. Modifiche avanzate
- Posizionamento di base con CSS (imbottitura, margini, ecc.) durante l’utilizzo della tabella generale per il layout
- posizionamento completo con CSS – nessuna tabella per il layout
13.4. Esercitati con i layout CSS
- leggi tutorial e libri sui CSS per comprendere i CSS pratici
- dedica del tempo per imparare il posizionamento dei CSS senza pressioni esterne
- esercitati con una varietà di layout CSS fino a quando non sarai sicuro
14. Conclusione
Gli standard Web offrono:
- download dei file più veloce
- codice accessibile a una gamma più ampia di utenti e dispositivi
- personalizzazione dell’utente
- facile implementazione di versioni stampabili
- costi di hosting più economici
- migliore posizionamento sui motori di ricerca
- manutenzione del sito più rapida ed efficiente
- un vantaggio competitivo rispetto ai concorrenti
Gli standard Web avvantaggiano i tuoi utenti, i tuoi clienti e te stesso.
15. Risorse sugli standard Web
15.1. Standard Web
- http://www.zeldman.com
- http://webstandards.org
- http://webstandardsgroup.org
- http://www.nypl.org/styleguide/
15.2. Codice semantico
15.3. Validazione
- http://validator.w3.org/
- http://www.htmlhelp.com/tools/validator/
- http://webboy.net/presentation/ict2004/validation.htm
- http://webboy.net/presentation/validation.cfm
15.4. Accessibilità
15.5. CSS
- http://webboy.net/presentation/ict2004/01.htm
- http://webboy.net/presentation/ict2004/02.htm
- http://webboy.net/presentation/ict2004/03.htm
- http://westciv.com/style_master/academy/css_tutorial/
- http://css.maxdesign.com.au
- http://www.thenoodleincident.com/tutorials/css/
I’ve always been captivated by the wonders of science, particularly the intricate workings of the human mind. With a degree in psychology under my belt, I’ve delved deep into the realms of cognition, behavior, and everything in between. Pouring over academic papers and research studies has become somewhat of a passion of mine – there’s just something exhilarating about uncovering new insights and perspectives.