I tutorial per sezione
- [x]html: creazione di layout stabili e grammaticalmente corretti
- CSS: tutorial sui fogli di stile, trucchi e segreti per la resa sui vari browsers
- Inkscape: grafica vettoriale con Inkscape, presentazione e tutorial
- Gimp: grafica raster con Gimp, presentazione e tutorial
- Irfanview: programma di fotoritocco, rinomina files e altre operazioni veloci sulle immagini
- PhotoFiltre: programma di fotoritocco più complesso di Irfanview, ma più semplice, leggero e intuitivo di Gimp
- Miscellanea di grafica:Cosa sono i DPI, creare una gif animata, studio di un logo, restyling di un guestbook...
- Motori: posizionamento e analisi
- IPCop: installazione del firewall IPCop e delle sue estensioni
- Miscellanea di reti, sicurezza e hw: notizie generali sul funzionamento delle reti, alcune regole di sicurezza e brevi pillole di hardware
- Tutto il resto: progettazione siti, software gratuiti vari...
- Strumenti utili: segnalazione di strumenti utili e brevi spiegazioni sul loro funzionamento
Rebelia.it
03 - Il Doctype, la lingua e il set di caratteri
Notizia del 16/04/2007
Dopo aver visto a grandi linee i meccanismi di marcatura dei contenuti, entriamo ora più nel dettaglio e vediamo come ci siano diversi linguaggi o meglio: diverse versioni di html e xhtml, i due linguaggi finora citati.
I linguaggi per il web e le relative versioni sono scritti e poi resi pubblici da un organismo internazionale chiamato World Wide Web Consortium o più brevemente il W3C composto da rappresentanti di tutti i maggiori produttori di software e hardware mondiali.
Ogni linguaggio e le relative versioni seguono delle regole ben precise ed è importante - una volta deciso quale linguaggio e quale versione usare - attenersi alle relative regole ma soprattutto comunicare al browser quali sono in modo che possa visualizzare al meglio le nostre pagine.
Per far ciò esiste un comando che va inserito prima di qualsiasi altro elemento nella pagina: la Document Type Definition, in breve DTD ovvero la dichiarazione del tipo di documento che andremo a creare ("dichiarazione del Doctype").
Prendiamo come esempio la stringa che dichiara l'uso di xhtml strict:
Nel dettaglio i vari elementi:
- PUBLIC: le regole sono pubbliche; alcuni linguaggi (xml) danno la possibilità di creare una propria grammatica (linkandola si da la possibilità ai browser di interpretare correttamente la pagina).
- - (segno meno): il linguaggio NON è stato registrato dall'ISO (l'organizzazione di standardizzazione internazionale).
- W3C: il documento si riferisce alle specifiche create dal W3C.
- DTD XHTML 1.0: nello specifico il linguaggio è xhtml 1.0.
- Strict: la versione usata; le altre due sono Frameset (usata per le pagine fatte a frames) e Transitional meno restrittiva per consentire una più facile transizione dal precedente linguaggio; nella transitional sono ammessi tag e attributi che la Strict dichiara deprecati.
- EN: la lingua in cui è scritta la specifica.
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd: l'indirizzo a cui è possibile trovare la specifica originale.
Qui di seguito le varie stringhe:
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
IMPORTANTE! Ogni pagina vuole la sua dichiarazione e non è necessario usare lo stesso linguaggio per tutto il sito, anche se è più logico farlo: volendo potrei dichiarare xhtml strict in una pagina e html transitional nell'altra e sarebbe corretto a patto che EFFETTIVAMENTE il linguaggio usato nella pagina sia quello dichiarato nella prima stringa.
Ci sono casi in cui è obbligatorio usare più dichirarazioni all'interno dei siti ed è il caso dei siti a frames; il frameset infatti userà per esempio la DTD HTML 4.01 Frameset, mentre le varie pagine dichiarate useranno la DTD HTML 4.01 Transitional.
***
Per una corretta visualizzazione dei contenuti è inoltre necessario dichiarare nella pagina anche il set di caratteri usato; vi è mai capitato di incontrare pagine dove c'erano dei punti di domanda o dei quadratini al posto delle lettere accentate? Ecco, in quel caso non era stato dichiarato il set di caratteri oppure era stato dichiarato un set sbagliato.
Una stringa che dichiari il set di caratteri può essere questa:
Per dichiararla, si fa uso di un meta-tag, cioè un tag speciale inserito all'interno dell'head che può contenere diversi tipi di informazione (parole chiave, descrizione della pagina, autore del sito etc); questo in particolare informa il browser che il set di caratteri usato è l'UTF-8.
Da Wikipedia:
UTF-8 (Unicode Transformation Format, 8 bit) è una codifica dei caratteri Unicode in sequenze di lunghezza variabile di byte.
E ancora:
Unicode è un sistema di codifica che assegna un numero (o meglio, una combinazione di bit) a ogni carattere in maniera indipendente dal programma, piattaforma e dalla lingua (e dal suo sistema di scrittura).
Perciò dichiarando che userò il set UTF-8 spiegherò che quello che per me sulla tastiera è "ì" (un esempio a caso) corrisponde nella tabella UTF-8 a una determinata sequenza di bit e questo permetterà di visualizzare "ì" allo stesso modo su tutti i dispositivi del mondo che supportino l'alfabeto occidentale.
***
Oltre a questi due tag, nelle prime righe della pagina è utile inserire altri due elementi:
- la lingua principale usata nella pagina
- la direzione del testo
e lo si fa aggiungendo due attributi al tag html in questo modo:
cioè lingua italiana orientata da sinistra a destra (ltr -> left to right).
Questi attributi sono molto utili per esempio per i browser vocali: dichiarando la lingua usata infatti questo tipo di browser adotta un determinato accento rendendo più comprensibili i contenuti per il navigatore.
***
Ricapitolando, le prime stringhe di una pagina web saranno quindi così composte:
Torna a inizio pagina
Aggiungi il tuo commento
I campi con * sono obbligatori.
Torna a inizio pagina
Torna a inizio pagina
Commenti
1 - Scritto da Marco GRAZIA il 17/04/2007 alle 22:07
Ottima spiegazione davvero, magari avrei insistito di più con l'utf-8 dicendo che usandolo bisogna anche che il documento sia salvato in utf-8.
Purtroppo, i formati UTF non sono come gli altri formati di carattere che hanno la codifica in due byte, ma UTF-8 ad esempio arriva fino a 4 byte.
Questo significa che non basta dichiaralo nella pagina per poterlo usare, ma anche l'editor deve poter salvare il documento in quel formato.
Ad esempio il classico Notepad per Windows non è in grado salvare un file in UTF-8 e questo a volte può creare dei problemi, infatti se tentiamo di fare una modifica veloce ad un file UTF con Notepad per Windows e poi lo salviamo, quel file non sarà più in UTF e la sua dichiarazione perderà di validità.
Non so se sono stato chiaro, ma è importante saperlo se si vuole usare il formato Unicode; probabilmente è meglio usare il classico ISO-8859-1 se non ha interesse di scrivere una pagina in una lingua che non sia del "ceppo occidentale", così da poter salvare la pagina con qualsiasi editor di testo.
M.
2 - Scritto da reb il 17/04/2007 alle 22:13
ciao marco :)
in realta' ho sempre timore a scrivere di cose di questo genere, perche' so che dimentico sempre qualcosa, percio' ben vengano le integrazioni: chi legge non puo' che avvantaggiarsene e quindi... senz'altro grazie per l'aggiunta :)
3 - Scritto da Marco GRAZIA il 17/04/2007 alle 23:01
Figurati dovere, e so che è difficile rendere semplici argomenti così complessi che pongono più domande di quante ne risolvono, vai che ci stai riuscendo benissimo.
M.
4 - Scritto da reb il 17/04/2007 alle 23:31
grazie, sei gentile :)
in realta' sto cercando di metter giu' un po' di riepiloghi per un gruppo di ragazzi a cui sto spiegando un minimo sindacale di questa roba: mi viene comodo farlo in questo modo, cosi' resta anche per gli altri
5 - Scritto da Andrea il 22/05/2007 alle 00:13
Ciao Rebelia! son sempre io, il nottambulo :-).
Scherzi e battute a parte, leggendo questo documento sul doctype mi sono venute in mente 2 cose, dato che l'altra l'ha appena detta, perfettamente, Marco GRAZIA.
Allora:
1) Io utilizzo l'XHTML con la DTD Transitional.
Rispetto al codice postato da te io, su indicazione del forum HTML.IT, ho anche, ad inizio pagina, prima cioè del DOCTYPE, la seguente scritta: <?xml version="1.0" encoding="iso-8859-1"?>. Posso farne a meno?
Inoltre ho, prima dell'head la seguente stringa:
<html xmlns="http://www.w3.org/1999/xhtml">. Anche qui, si può escludere? telo chiedo perché grazie a te ho capito bene ORA cosa rappresentano le stringhe che definiscono DOCTYPE.etc.., ma io ne ho (:-)) delle altre, e ... per dirtela tutta "non mi piace fare indigestione": meglio poco, chiaro, semplice e pulito, anziché un codice "pieno di orpelli e toppe".
2) L'unica cosa che mi frena nel passare dalla DTD transitional alla STRICT è che non so' bene dove vado a finire. Quali sono i principali cambiamenti? E' davvero così dura? Per me che sono uno ordinato, sarebbe l'ideale. Ma i pro e i contro di tale DTD ho bisogno chi me li faccia dire da chi, come te, è diventata esperta (e in più si spiega pure BENE, ed è da POCHI oggi).
Mi spiace, ma hai trovato uno che a chiedere le cose preferisce dire qualche frase in più, che 2 parole di meno :-).
Abbi pazienza.
Puoi darmi una mano, per favore?
Ciao :-)
6 - Scritto da Andrea il 23/05/2007 alle 15:07
niente niente Rebelia :-( ?
7 - Scritto da reb il 23/05/2007 alle 20:59
ciao andrea :)
scusa, ma sono piuttosto presa in questo periodo e ti leggo ora: dammi il tempo di documentarmi correttamente e ti rispondo, promesso :)
8 - Scritto da Andrea il 23/05/2007 alle 21:30
GRAZIEEEEE :-) :-)!!!!
9 - Scritto da reb il 23/05/2007 alle 23:21
rieccomi :)
mi spiace di non averti risposto direttamente, ma volevo avere la sicurezza di non scrivere bischerate troppo grandi :D
la prima riga si riferisce al fatto che xhtml fa comunque parte della famiglia xml; non e' essenziale, ma se lo usi devi mettere la versione, mentre la codifica usata (il secondo attributo) e' opzionale
per quanto riguarda la stringa successiva che segnali, fa anch'essa riferimento al fatto che xhtml e' parte di xml: puoi cioe' usare non solo i tag predefiniti (il "namespace" che si trova all'indirizzo http://www.w3.org/1999/xhtml), ma potresti averne degli altri, personalizzati
per rispondere alla tua domanda, puoi togliere entrambi o averli entrambi; grammaticalmente credo sia meglio averli, ma so che a volte qualche browser da problemi con la prima stringa (ie 5.x mi pare, ma non vorrei scrivere una cavolata, quindi prendila con beneficio d'inventario)
spero di essere stata utile :)
ciao
10 - Scritto da Andrea il 24/05/2007 alle 15:43
ah! ho capito :)!
riguardo al punto n.2 (delle mie 2 domande)? secondo te ci sono vantaggi a passare dalla DTD transitional dell'xhtml 1.0 alla DTD Strict, che poi altro non è che l'xhtml 1.1 ?
Non ho fretta, se trovi un "buco" tra i tuoi impegni per rispondermi, anche brevemente ... mi faresti un piacere.
Ciao
P.S. vedessi che bei bottoni traslucidi mi sono venuti seguendo le tue linee guida :-) !
11 - Scritto da reb il 24/05/2007 alle 19:24
ops, dimenticata di quella domanda :(
allora: intanto xhtml 1.1 non e' esattamente xhtml 1.0 strict, ma una sua rivisitazione; a ogni modo poco importa, tanto se dichiari un linguaggio e poi sbagli qualcosa nella sintassi della pagina, non devi fare altro che validare il codice: ci pensera' il validatore a segnalarti eventuali errori :)
per quanto riguarda il passare dall'uno all'altro, non e' una cosa difficile, anzi! se vogliamo metterla giu' molto rudemente, ti consiglio esattamente quel che ho scritto sopra: dichiari lo strict e poi validi il codice
ti accorgerai a) che con le segnalazioni del validatore e' un attimo correggere e b) che le differenze non sono poi cosi' penalizzanti e vale la pena di fare un tentativo
attenzione! dichiarare un determinato linguaggio e validare la pagina non e' sinonimo di aver creato una pagina accessibile, perche' potresti avere del codice valido anche annidando 4 tabelle oppure scrivendo "foto uno" sull'alt delle immagini
dichiarare un linguaggio nella versione strict e validare il codice e' un ottimo primo passo, poi da li' si inizia col resto :)
sono contenta per i pulsanti: so che hanno provato a riprodurli in diversi, mi fa piacere che il tutorial sia stato utile!
ciao