Strutturazione XHTML parte 1: Ristrutturazione del sito web utilizzando XHTML

Il titolo che abbiamo scritto per questa sezione è: “XHTML: regole semplici, linee guida facili”. Una delle ragioni è che le regole e le linee guida discusse in questa sezione sono semplici e facili. Un'altra ragione è che un libro di design web semplice e facile, come i nuovi prodotti gratuiti nei supermercati, anche se comuni, può attirare efficacemente l'attenzione delle persone e stimolare il loro interesse, e incoraggiare le persone a provarci.

Spero davvero che il contenuto di questa sezione susciti il tuo interesse e ti incoraggi a provarci. Perché? Perché una volta che avrai compreso le semplici idee facili contenute in questa sezione, ripenserai al modo in cui funzionano le pagine web e inizierai a cambiarne il modo di costruirle. Tuttavia, non voglio che tu cambi semplicemente il codice. Voglio che tu pensi e lavori in modo diverso.

D'altra parte, la rifattorizzazione è il vero significato di XHTML.

In questa sezione, esploreremo il meccanismo e il significato dei markup strutturati. Se stai integrando standard web nel tuo progetto di sviluppo, potresti trovare i contenuti di questa sezione familiari. Tuttavia, anche gli esperti in questo campo possono trovare sorprese in questa sezione.

Sommario delle regole XHTML

Convertire il tradizionale HTML in XHTML 1.0 è veloce e senza dolore, purché segui alcune semplici regole e linee guida. Non importa se hai già usato HTML, non ti impedirà di usare XHTML.

  • Utilizza il dichiarativo di tipo di documento appropriato e lo spazio dei nomi.
  • Utilizza l'elemento meta per dichiarare il tipo di contenuto del tuo documento.
  • Scrivi tutti gli elementi e gli attributi in minuscolo.
  • Aggiungi virgolette ai valori degli attributi.
  • Assegna un valore a tutti gli attributi.
  • Chiudi tutti i tag.
  • Chiudi i tag vuoti con spazi e trattini diapositivi.
  • Non scrivere doppi underscore nei commenti.
  • Assicurati che i simboli di less than e and siano < e &

Unicode e altre set di caratteri

Il set di caratteri predefinito dei documenti XML, XHTML e HTML 4.0 è Unicode, uno standard definito dall'Unione Unicode. Unicode è un set di caratteri completo che assegna un numero specifico e unico a ogni carattere, indipendentemente dalla piattaforma, dal programma e dal linguaggio. Unicode è anche la cosa più vicina a un alfabeto che possediamo, anche se non è un alfabeto, ma un sistema di mappatura numerica.

Nonostante Unicode sia il set di caratteri predefinito dei documenti web, gli sviluppatori possono liberamente scegliere altri set di caratteri più adatti ai loro bisogni. Ad esempio, i siti web americani e europei spesso usano la codifica ISO-8859-1 (Latin-1), mentre lo standard nazionale della Repubblica Popolare Cinese è gb2312.

Marchia i documenti per esprimere semantiche, non per stili

Ricorda: usa CSS il più possibile per il layout. Nel mondo degli standard web, i tag XHTML non hanno nulla a che fare con la presentazione, ma solo con la struttura del documento.

Documenti ben strutturati possono comunicare al browser il maggior numero possibile di semantiche, sia che il browser si trovi su un palmare o su un browser grafico desktop alla moda. Documenti ben strutturati possono comunicare semantiche visive agli utenti, anche nei vecchi browser o nei browser moderni in cui l'utente ha disattivato CSS.

Non ogni sito può abbandonare immediatamente la disposizione a tabella HTML. Il creatore di CSS, W3C, ha convertito il proprio sito ufficiale in layout CSS solo nel novembre 2002. Tuttavia, nemmeno i più testardi degli integralisti delle norme non separano sempre completamente la presentazione dalla struttura, almeno non in XHTML 1. Ma ora possiamo fare un passo significativo verso questo ideale, separando la presentazione dalla struttura (o i dati dal design), persino i layout tradizionali possono beneficiarne.

Ecco alcuni suggerimenti che possono aiutarti a pensare in modo più strutturato:

Colori all'interno dell'indice

In una scuola di grammatica, la maggior parte di noi è stata costretta a scrivere articoli con un formato di indice standard. Ora, essendo designer, possiamo liberarci dei vincoli dell'indice con grande libertà e poi affrontare coraggiosamente il campo della libera espressione personale (forse i nostri cataloghi e siti aziendali non sono così unici e personalizzati). Ma almeno non saremo più disturbati dall'indice.

In realtà, secondo HTML, dovremmo strutturare il contenuto in livelli organizzati. Durante il periodo in cui i browser non supportavano CSS, non potevamo fare questo senza compromettere la consegna di layout vendibili. Ma oggi, mentre realizziamo il nostro design senza compromessi, abbiamo la capacità di consegnare documenti con una struttura interna ben organizzata.

Quando marchi il testo per l'uso in rete o quando converti un documento di testo esistente in una pagina web, pensa a questi elementi tradizionali dell'indice.

<h1>Il mio argomento</h1>
<p>Testo introduttivo</p>
<h2>Punti di vista complementari</h2>
<p>Testo correlato</p>

Allo stesso tempo, evita di utilizzare elementi HTML abbandonati come <font>, o elementi senza senso come <br />, per simulare strutture logiche inesistenti.

Ad esempio, evita di fare così:

<font size="7">Il mio argomento</font><br />
Testo introduttivo<br /><br />
<font size="6">Punti di vista complementari</font><br />
Testo correlato<br />

Usa gli elementi basandoti sul loro significato, non sul loro aspetto

Alcuni di noi sono caduti in una cattiva abitudine, quando abbiamo bisogno solo di un testo grande utilizziamo h1, o quando dobbiamo aggiungere un punto all'inizio utilizziamo li. Come abbiamo discusso nei capitoli precedenti, i browser sono sempre abituati a imporre attributi di design agli elementi HTML. Siamo sempre abituati a pensare che h1 significa carattere grande, mentre li significa punti, o che blockquote significa testo rientrato. La maggior parte di noi continua a scrivere HTML in modo disordinato, utilizzando elementi strutturati per simulare effetti di presentazione.

Allo stesso modo, se un designer desidera che tutti i titoli abbiano la stessa dimensione, metterà tutti i titoli in h1, anche se non ha senso in termini di semantica strutturale.

Questo è il titolo principale, quando organizzo il testo in modo strutturato.
Questo non è il titolo principale, ma vorrei che avesse lo stesso tipo di carattere del titolo sopra, ma non so come usare CSS.
Questo non è affatto un titolo. Ma spero che il testo nella pagina utilizzi lo stesso tipo di carattere, per raggiungere il risultato che desidero,
Se conoscessi CSS, potrei raggiungere questo design senza rovinare la struttura del documento.

Dobbiamo mettere da parte i nostri trucchi e iniziare a usarli basandoci sul significato degli elementi, non sul loro aspetto. In realtà, h1 può diventare qualsiasi aspetto desideri. Attraverso CSS, h1 può diventare un tipo romano piccolo e non grassetto, mentre il testo p può diventare un carattere grande e grassetto, e li può anche non avere punti (puoi utilizzare immagini PNG, GIF o JPEG di gatti, cani o loghi aziendali al loro posto) ecc.

Da oggi in poi, utilizzeremo CSS per determinare l'aspetto degli elementi. Possiamo persino cambiare il loro aspetto in base alla loro posizione nella pagina o nel sito. CSS può completamente separare l'espressione dalla struttura e ti permette di formattare qualsiasi elemento secondo il tuo stile preferito.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Perché lo fai? Lo fai per ottenere un aspetto e una sensazione di marca personalizzati nei browser grafici, mantenendo la struttura del documento nei browser di testo, nei dispositivi wireless e nelle email in formato HTML.

Non vogliamo parlare di più di CSS in questo capitolo su XHTML. Semplicemente vogliamo mostrare che la struttura del documento e l'espressione visiva sono due cose completamente diverse, e gli elementi strutturati dovrebbero essere usati per trasformare il testo, non per imporre effetti visivi.

Usa elementi strutturati, non spazzatura senza senso

Poiché abbiamo dimenticato o non sappiamo nemmeno l'uso di HTML e XHTML per trasmettere significati strutturati, molti sostenitori di HTML usano i tag per inserire elenchi in questo modo:

Progetto uno<br />
Progetto due<br />
Progetto tre<br />

Considera di usare elenchi ordinati o non ordinati al loro posto:

<ul>
<li>Progetto uno</li>
<li>Progetto due</li>
<li>Progetto tre</li>
</ul>

"Ma li mi da un punto, e non ho bisogno di un punto!" Potresti dire. Secondo il capitolo precedente, il CSS non fa assunzioni su come un elemento dovrebbe apparire. Aspetta che tu gli diccia come dovrebbe apparire l'elemento che ti aspetti. Il punto di chiusura è una delle capacità più fondamentali del CSS. Ha la capacità di far apparire un elenco come testo normale, ma anche come una barra di navigazione grafica, con un effetto di inversione completo.

Quindi, usa gli elementi di elenco per indicare gli elenchi. Allo stesso modo, usa strong al posto di b, em al posto di i, ecc. Nella maggior parte dei browser desktop, la visualizzazione di strong è la stessa di b, mentre em e i sono gli stessi, e puoi anche creare l'effetto visivo atteso senza rovinare la struttura del documento.

Nonostante il CSS non faccia assunzioni su come qualsiasi elemento deve essere visualizzato, i browser fanno molte assunzioni e non abbiamo mai incontrato un browser che visualizza strong in modo diverso dalla grassetto (a meno che non sia stato indicato diversamente da un designer CSS). Se ti preoccupi che un browser sconosciuto non visualizzi strong come grassetto, puoi scrivere una regola CSS del genere:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Elementi visivi e struttura

Le standard web non richiedono solo che utilizziamo quale tecnologia, ma anche che rispettiamo il modo in cui utilizziamo queste tecnologie. Scrivere markup utilizzando XHTML e gestire parte o tutto il layout utilizzando CSS non renderà necessariamente il sito più facile da usare e più leggero, né risparmierà necessariamente più banda. Come nelle tecnologie che abbiamo utilizzato nei primi tempi, XHTML e CSS possono essere utilizzati in modo errato e abusato. Un XHTML eccessivamente lungo e un HTML eccessivamente lungo consumeranno anche la banda e il tempo degli utenti. Un CSS eccessivamente lungo non può sostituire completamente il codice HTML di presentazione; questo non è altro che un cattivo sostituto di un altro cattivo.