Ottimizzazione della struttura HTML

Alla luce dei test e dell’osservazione del codice di marcatura dalla home page del portale Italia.gov.it è possibile elencare rapidamente una serie di aspetti che sarebbe bene correggere in vista di una pubblicazione per dispositivi mobili:

1. andrebbe eliminato il reindirizzamento lato-client che si verifica all’apertura del file index.html: non abbiamo infatti la certezza che tutti i browser, soprattutto quelli meno performanti, siano capaci di spostarsi sulla pagina di destinazione;
2. si dovrebbe cambiare la DTD di riferimento (passando almeno ad un XHTML transitional);
3. si dovrebbero eliminare tutti gli elementi e gli attributi deprecati dalla nuova DTD;
4. tutti gli elementi importanti della pagina dovrebbero essere associati ad un ancora di destinazione di eventuali link interni;
5. queste ancore potrebbero essere sfruttate per costruire ed inserire ad inizio pagina un menu di accesso rapido per saltare direttamente ai contenuti o ad altre sezioni della pagina non appena questa viene visualizzata dal browser;
6. dovrebbero essere tolti tutti i riferimenti ad immagini di natura puramente decorativa e spostare il loro richiamo nel foglio di stile per lo schermo desktop;
7. sarebbe opportuno controllare ed eventualmente migliorare i testi alternativi delle immagini che, invece, appartengono al contenuto e sono quindi cruciali per la fruizione;
8. si dovrebbero inserire gli elementi noscript sia per la funzione che apre il pop-up sia per il contatore a fondo pagina;
9. andrebbe modificato il richiamo di eventi dipendenti dal dispositivo di interazione con l’applicazione di eventi logici;
10. nel caso del menu di navigazione principale potrebbe essere interessante l’applicazione dell’attributo acceskey ai link assegnando ad esso valori numerici (richiamabili quindi anche dalle tastiere alfanumeriche dei cellulari);
11. dovrebbe essere migliorato l’ordine di linearizzazione: idealmente questo requisito potrebbe essere pienamente soddisfatto passando ad una tecnica di impaginazione priva di tabelle;
12. dovrebbero essere eliminati dal codice XHTML tutti i riferimenti a larghezze o ad altezze di elementi (per esempio, le dimensioni delle immagini o l’ampiezza delle tabelle) e si dovrebbe spostare tali indicazioni nel CSS per il desktop; simili dimensioni, inoltre, andrebbero specificate in forma percentuale, se possibile.
13. si potrebbe infine alleggerire il codice eliminando numerosi spazi e cambi di riga interni al codice sorgente;

Infine, andrebbe aggiunto il richiamo ad un css ottimizzato per i dipositivi mobili attraverso un’istruzione come:

<style type=”text/css” media=”handheld”>
  <!–
    @import url(“stile/stile_mobile.css”);
  –>
</style>

Vedremo nella prossima lezione come costruire praticamente questo CSS.