Visualizzazione post con etichetta html. Mostra tutti i post
Visualizzazione post con etichetta html. Mostra tutti i post

DTD - Document Type Definition

Introduzione

Supponiamo di aver bisogno di un XML (ben formato / well formed) per rappresentare lo scambio di messaggi tra utenti.

Il singolo messaggio dovrà contenere la data di invio, il mittente, il destinatario e il corpo del messaggio. I valori sono da intendersi tutti obbligatori.

Possiamo inventarci e utilizzare un documento XML di questo tipo:

<messaggio data="data_del_messaggio">
   <mittente>nome_mittente</mittente>
   <destinatario>nome_destinatario</destinatario>
   <corpo>corpo_del_messaggio</corpo>
</messaggio>

chiamiamo questo nuovo linguaggio MSGXML.

Supponiamo, inoltre, che questi messaggi debbano essere letti o generati da software diversi, sviluppati da persone diverse. In tal caso occorrerà:

  • stabilire un modo formale (esatto/"matematico"/univoco) per condividere la sua struttura e le sue regole con altri sviluppatori
  • avere un meccanismo che ci permetta di validare i messaggi di questo "nuovo" formato

In questi casi una soluzione è il DTD (Document Type Definition) che ci permette di definire il documento specificando la struttura e gli elementi/attributi/valori ammessi.

Un documento XML ben formato che rispetta le regole indicate in un DTD si dice valido, non valido altrimenti.

La stessa cosa è stata fatta ad esempio per l'HTML o l'XHTML:

... e un documento XHTML che non rispetta le regole previste nel suo DTD si dice non valido.

Procediamo quindi con una descrizione del DTD che ci aiuterà a definire formalmente il nostro linguaggio.

Struttura di un DTD

Il DTD ci permette di descrivere la struttura e tutti i "mattoni" fondamentali di un doc. XML (elementi, attributi, entità) attraverso l'uso di dichiarazioni che specificano:

  • gli elementi, il loro nome e il contenuto ammesso
  • gli attributi degli elementi, il loro nome e i valori ammessi
  • definire nuove entità

Un DTD è in sostanza un documento che contiene un elenco di dichiarazioni che hanno la forma seguente:

<!tipo_dichiarazione parametri_dichiarazione >

dove tipo_dichiarazione può essere ELEMENT, ATTLIST, ENTITY e parametri_dichiarazione varia in base al tipo_dichiarazione indicato.

Definizione degli elementi

Con DTD possiamo definire gli elementi del nostro documento in questo modo:

<!ELEMENT elemento_contenitore contenuto>

Ad esempio la definizione del tag img in xhtml è

<!ELEMENT img EMPTY>

dove con EMPTY si indica che l'elemento non ha contenuto.

I possibili valori che possiamo assegnare a contenuto sono:

ContenutoDescrizioneEsempio XML
EMPTYnon è ammesso contenuto
<img />
(#PCDATA)Sta per Parsed Character Data ed è una stringa che può contenere elementi o entità che il parser deve riconoscere (es. &lt; diventerà <, <p> sarè riconosciuto come tag di apertura etc.).
ANY
(elemento)1 sola occorrenza di elemento
(elemento?)0 o 1 occorrenze di elemento
(elemento*)0 o più occorrenze di elemento
(elemento+)1 o più occorrenze di elemento
(elemento1, elemento2, ...)gli elementi devono presentarsi nella stessa sequenza indicata
(elemento1 | elemento2)o un elemento o l'altro

Per MSGXML possiamo definire la struttura del documento:

<!ELEMENT messaggio (mittente, destinatario, contenuto)>
<!ELEMENT mittente (#PCDATA)>
<!ELEMENT destinatario (#PCDATA)>
<!ELEMENT contenuto (#PCDATA)>

in cui gli elementi mittente, destinatario, contenuto devono apparire esattamente in questo ordine.

Definizione degli attributi

Gli attributi possono essere definiti in questo modo:

<!ATTLIST nome-elemento nome-attributo tipo-attributo valore-default>

I valori che possiamo assegnare a tipo-attributo sono:

Tipo attributoDescrizioneEsempio
CDATAinterpetato come normale testo: le entità vengono prese così come sono e non convertite, i tag presi così come sono, etc.
(val1|val2|..)deve essere un valore tra quelli indicati
IDè un id univoco
IDREFè un riferimento a un id di un altro elemento
IDREFSelenco di IDREF
NMTOKENè un nome XML
NMTOKENSelenco di NMTOKEN
ENTITYè un entità
ENTITIESelenco di ENTITY
NOTATIONil nome di una notation
xml:valore xml predefinito

I valori che possiamo assegnare a valore-default sono:

Valore defaultDescrizioneEsempio
valoreil valore di default
#REQUIREDil valore è obbligatorio
#IMPLIEDil valore è opzionale
#FIXED valoreil valore dell'attributo è fisso

Per MSGXML possiamo definire l'attributo dell'elemento messaggio in questo modo:

<!ATTLIST messaggio data CDATA #REQUIRED>

Definizione delle entità

<!ENTITY nome-entita "valore-entita">

Dichiarazione del DTD

Ciò che manca ora è l'indicazione di quale sia l'elemento di root e del modo per utilizzare il DTD o indicare che un doc. XML deve rispettare le regole/dichiarazioni definite in un DTD.

Ciò può essere fatto attraverso la dichiarazione DOCTYPE che ci permette di utilizzare il nostro DTD o includendolo nel nostro file XML o richiamando un file di dichiarazioni .dtd direttamente dal file XML.

Nel primo caso avremo:

<?xml version="1.0"?>
<!DOCTYPE elemento_root [
    dichiarazioni
]>

...

nel secondo:

<?xml version="1.0"?>
<!DOCTYPE elemento_root SYSTEM "URI" >

oppure

<?xml version="1.0"?>
<!DOCTYPE elemento_root PUBLIC "FPI" "URI" >

dove con elemento_root indichiamo l'elemento root del nostro linguaggio XML .

La differenza tra i due sta nella parola chiave SYSTEM o PUBLIC.

A SYSTEM può seguire subito l'URI (assoluto o relativo) del dtd.

Nel secondo l'URI del DTD è opzionale ma deve essere presente l' FPI (Formal Public Identifier) che in poche parole identifica la specifica. Ad esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD di MSGXML

Ora che abbiamo visto tutti gli argomenti possiamo assemblare il nostro msgxml.dtd.

<!ELEMENT messaggio (mittente, destinatario, contenuto)*>
<!ATTLIST messaggio data CDATA #REQUIRED>
<!ELEMENT mittente (#PCDATA)>
<!ELEMENT destinatario (#PCDATA)>
<!ELEMENT contenuto (#PCDATA)>

L'XML corrispondente sarà:

<?xml version="1.0"?>
<!DOCTYPE messaggio SYSTEM "msgxml.dtd" >
<messaggio data="1/1/2011">
   <mittente>superman</mittente>
   <destinatario>batman</destinatario>
   <contenuto>ciao come stai?</contenuto>
</messaggio>

HTML/XHTML - Elementi strutturali

Requisiti

Per proseguire potrebbe essere utile la lettura di:

Introduzione

Nell'introduzione abbiamo visto la struttura tipica di un documento HTML/XHTML che per comodità si riporta di seguito:

<!DOCTYPE ... >
<html>
  <head>
    <title>Titolo del documento</title>
    <!-- elementi intestazione -->
  </head>
  <body>
    <!-- elementi a livello di blocco -->
  </body>
</html>

Segue una descrizione dettagliata degli elementi strutturali.

html

Attributi definibili i18n .

L'elemento radice del documento, html ha al suo interno i 2 elementi head e body.

head

AttributoTipo valoreObbligatorio
profileURINO

L'elemento head contiene informazioni sul documento. Queste informazioni sono descritte attraverso gli elementi di intestazione, tra i quali c'è l'elemento obbligatorio title.

body

Al suo interno possono esserci solo elementi a livello di blocco. Gli elementi inline possono stare solo all'interno degli elementi a livello di blocco.

L'elemento body contiene l'informazione che si vuole trasmettere all'utente descritta attraverso elementi suddivisi in 2 categorie:

HTML/XHTML - Tipi di dati

Di seguito vengono descritti i tipi di dati utilizzati per i valori degli attributi. Sono stati esclusi quelli utilizzati su attributi il cui uso è sconsigliato (ad es. Color) perchè l'obiettivo è la formattazione/presentazione del documento.

Id

Identifica un elemento in maniera univoca attraverso un nome. Il nome deve iniziare con una lettera [A-Za-z] e può essere seguito da numeri [0-9], lettere, o i caratteri "-", "_", ":", "."

Name

Come per Id.

Text

E' semplicemente testo

Uri

Sono URI assoluti o relativi. In generale sono case-sensitive.

Pixels

Indica una dimensione in pixel. Ad esempio un'immagine può essere larga 250px per 50px. Può essere usato per indicare le dimensioni di un'immagine o la dimensione del bordo di una tabella.

Length

E' una dimensione indicata o in Pixels o in percentuale (es. 50%). Usato per indicare la dimensione di un'immagine o di una tabella.

MiltiLength

E' una dimensione indicata o con i valori di Length o con una dimensione relativa indicata nella forma "i*", dove i è un numero intero (se non specificato vale 1).

Quando i browser allocano spazio agli elementi che competono per esso, iniziano ad assegnare i pixel e le percentuali. Lo spazio rimanente viene assegnato in base al valore indicato per le dimensioni relative in maniera proporzionale.

Ad es. supponiamo che dopo aver assegnato lo spazio alle dimensioni in pixel e percentuali sia rimasto libero uno spazio di 60px che deve essere suddiviso tra 3 dimensioni relative di 1*, 2*, 3*. La somma dei relativi è 6 (1+2+3). In tal caso a 1* saranno assegnati 1/6*60 = 10px, a 2* saranno assegnati 2/6*20 = 20px e a 3* saranno assegnati 3/6*60 = 30px.

ContentType

Fa riferimento al MIME Type. Ad esempio: text/css, text/javascript, text/html, image/png, etc.

LanguageCode

Identifica la lingua (parlata). I valori hanno la forma seguente:

language-code = primary-code ( "-" subcode )*

primary-code e' l'abbreviazione della lingua. Ad esempio it, en, de.

subcode è il country code.

Esempi:

  • en - inglese
  • en-US - la versione inglese USA
  • it - italiano

Charset

Fa riferimento alla codifica dei caratteri: il metodo per convertire una sequenza di byte in una sequenza di caratteri.

L'elenco dei valori registrati è reperibile alla pagina dello IANA

Usato ad es. per indicare la codifica dei caratteri del documento o delle risorse riferite.

Character

E' un singolo carattere.

Usato ad esempio nell'attributo accesskey dell'elemento a.

DateTime

I valori di questo tipo hanno il formato seguente:

YYYY-MM-DDThh:mm:ssTZD

Usato ad es. nell'attributo datetime degli elementi ins o del.

LinkType

Utilizzato per indicare il tipo di relazione tra documenti. Possono essere usati negli elementi link e a.

Di seguito i possibili valori che possiamo assegnare per questo tipo di dato:

  • alternate: indica una versione alternativa del documento
  • stylesheet: riferisce un CSS esterno
  • alternate stylesheet: riferisce un CSS esterno alternativo
  • start
  • next
  • prev
  • contents
  • index
  • glossary
  • copyright
  • chapter
  • section
  • subsection
  • appendix
  • help
  • bookmark

Il valore può comprendere uno o più LinkType separati da uno spazio. Ad esempio alternate stylesheet

MediaDesc

Indica il tipo di dispositivo. In genere usato insieme all'elemento link per includere CSS e indicare per quale dispositivo deono essere applicate.

  • screen
  • tty
  • tv
  • projection
  • handheld
  • print
  • braille
  • aural
  • all

... TO BE CONTINUED ...

HTML/XHTML - Elementi intestazione

Requisiti

Prima di procedere potrebbe essere utile la lettura di:

Introduzione

Possono stare solo all'interno dell'elemento head.

Sono utilizzati per fornire informazioni sul documento che, in generale, l'utente non vedrà ad esclusione del contenuto dell'elemento title (il titolo del documento).

Segue una descrizione dettagliata di tutti gli elementi di questa categoria ad esclusione di quelli che violano la regola di separazione degli strati contenuto/presentazione/comportamento (es. l'elemento style)

base

AttributoTipo valoreObbligatorio
hrefURISI

Definisce l'URI base del documento, indicato nell'attributo obbligatorio href, utilizzato per risolvere gli URI relativi presenti all'interno del documento stesso.

Ad esempio con:

<base href="http://www.example.com" />

l'uri relativo ./css/default.css sarà risolto in http://www.example.com/css/default.css

Può essere definito 1 sola volta e se non specificato gli URI relativi saranno risolti in base all'URI del documento.

Poichè, in generale, l'URI base è quello del documento, non sarà necessario utilizzare questo elemento se non in casi particolari quali ad esempio:

  • lo stesso documento è raggiungibile anche attraverso un altro URI (es. attraverso un particolare URL rewriting). In tal caso tutti i riferimenti relativi potrebbero andare persi. L'elemento base risolve il problema
  • in tutti quei casi in cui il documento non ha un URI. Tipico è il caso di documenti presenti in una email: o si trasformano tutti gli URI in assoluto oppure si lasciano relativi utilizzando l'elemento base

link

AttributoTipo valoreObbligatorio
relLinkTypesNO
hrefURINO
typeContentTypeNO
mediaMediaDescNO
revLinkTypesNO
hreflangLanguageCodeNO
charsetCharsetNO

L'elemento definisce una relazione tra il documento e un'altra risorsa (documenti, css, etc.). E' possibile definire più di una relazione.

L'attributo rel indica il tipo di relazione tra il documento e la risorsa, rev indica il tipo di relazione tra la risorsa e il documento.

L'attributo href indica l'URI della risorsa con la quale il documento ha una relazione.

type indica il MIME Type del documento riferito da href.

Uno degli utilizzi dell'elemento link è riferire file CSS esterni. Attraverso l'elemento link indichiamo una relazione tra il documento e il css:

<link rel="stylesheet" href="css/default.css" type="text/css" />

Per il documento si possono indicare altri tipi di relazioni ad es. :

<link rel="index" href="../index.html" />
<link rel="next"  href="capitolo3.html" />
<link rel="prev"  href="capitolo1.html" />

in questo caso, supponendo di essere nel documento capitolo2.html, indichiamo che:

  • il documento ha un indice che lo riferisce che è in ../index.html
  • il seguito del documento corrente è su capitolo3.html
  • ciò che precede il documento corrente è in capitolo1.html

E' possibile approfondire tutte le possibili relazioni che possiamo associare al documento nella sezione Tipi di dati / LinkTypes

meta

AttributoTipo valoreObbligatorio
nameNameNO
contentCDATASI
http-equivNameNO
schemeCDATANO

Permette di specificare i metadati del documento: informazioni sul documento e non sul suo contenuto.

Ad esempio per indicare l'autore del documento si utilizzerà:

<meta name="Author" content="nome dell'autore">

In questo caso l'informazione è stata fornita indicando la coppia proprietà/valore attraverso gli attributi name e content.

L'attributo http-equiv può essere utilizzato al posto dell'attributo name per far sì che il server HTTP che legge il documento per inviarlo al client, modifichi l'header del suo messaggio HTTP di risposta includendo un'intestazione che ha per nome il valore dell'attributo (http-equiv) e per valore ciò che è specificato nell'attributo content.

Ad esempio:

<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT" />

farà in modo che il server HTTP abbia questa intestazione:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Se non si conosce l'HTTP è possibile approfondire il funzionamento del protocollo nella sezione Il protocollo HTTP.

In generale non esiste una specifica per i metadati. Il significato e le proprietà dei metadati dovrebbero dipendere da ciò che è specificato nell'attributo profile dell'elemento head.

I metadati possono essere indicati anche attraverso l'elemento link

title

L'elemento title è l'unico elemento obbligatorio all'interno dell'elemento head.

All'interno dell'elemento è contenuto il titolo del documento che ne identifica il contenuto.

script

AttributoTipo valoreObbligatorio
typeContentTypeSI
srcURINO ma per non violare separzione 3 strati SI!
charsetCharsetNO

Permette di includere uno script (Javascript) nel documento.

type (obbligatorio) indica il MIME Type dello script. Poichè sarà sicuramente Javascript il suo valore sarà text/javascript

L'attributo src è l'URI della risorsa che contiene lo script Javascript.

Se src non è specificato il contenuto sarà all'interno dell'elemento script. Questa è comunque pratica sconsigliata.

Sviluppare documenti web: HTML, CSS, Javascript

Una guida più o meno completa su tutto ciò che serve sapere per sviluppare documenti web. Continuamente aggiornata. Attualmente è ancora incompleta e in fase di scrittura.

Indice

Appendice

Documenti Web - Vantaggi della separazione degli strati

Requisiti

Potrebbe essere utile la lettura di:

Inoltre, poichè si riprende l'esempio del tutorial:

Perchè è utile separare strato contenuto / presentazione / comportamento

Quando si sviluppa codice di qualsiasi natura (non solo per documenti web) il problema non solo quello di arrivare all'obiettivo. Il problema più grande spesso è manutenere il codice scritto. Di conseguenza ogni volta che si inizia un nuovo progetto la manutenzione di ciò che si andra a sviluppare deve essere un problema da tenere sempre in conto e si deve pensare sempre a come rendersi la vita più semplice.

Detto questo, e se si è letto il tutorial si dovrebbe aver intuito come sia semplice manutenere documenti creati mantenendo i tre strati separati.

Proviamo ora ad immaginare una situazione in cui non si sia mantenuta la separazione degli strati e vediamo cosa poteva succedere.

Supponiamo di avere centinaia o migliaia di documenti web per i quali non abbiamo rispettato la separazione. Ad esempio i documenti potevano:

  • includere codice javascript inline
  • usare HTML / XHTML per formattare il contenuto: ad es. usando l'elemento br per distanziare paragrafi o altri elementi, o ad esempio il deprecatissimo tag font
  • includendo CSS direttamente inline negli elementi del contenuto (attraverso l'attributo style)

Dopo un certo periodo si decide di cambiare la presentazione del sito modificando:

  • colore paragrafi (p) in precedenza impostato tramite css inline.
  • le distanze tra i paragrafi separati da elementi di formattazione br

In questo caso si dovrebbero riprendere tutti i documenti andando a ricercare i tag br per aggiungerli o eliminarli e tutti i css inline cambiando codice del colore. Tradotto: un'enorme spreco di tempo.

Supponiamo ancora di aver incluso codice Javascript direttamente nel contenuto. Ad esempio il codice per l'area che diventava rossa al passaggio del mouse è replicato su n documenti differenti. Se si dovesse decidere di cambiare comportamento al codice, ad es. facendo diventare gialla l'area sensibile si dovrebbe anche in questo caso andare alla ricerca del codice su tutti i documenti modificandone il comportamento. Anche in questo il tutto si tradurrebbe, ancora una volta, in un enorme spreco di tempo.

Se avessimo rispettato le regole descritte in precedenza, i contenuti sarebbero rimasti invariati. Le modifiche si sarebbero dovute effettuare solamente su 2 file (presentazione e comportamento) e al max. su 2 righe di codice.

Documenti Web / Tutorial

Requisiti

A livello "teorico" potrebbe essere utile la lettura di:

a livello "pratico" abbiamo bisogno di:

  • Notepad++, editor free scaricabile da http://notepad-plus-plus.org
  • Firefox, browser usato in questo tutorial insieme a
  • Firebug (opzionale) utile per il debug

Per evitare qualche problema con browser e css è utile scaricare:

Per semplificarci il lavoro sullo strato comportamento, riducendo al minimo il codice Javascript che dobbiamo scrivere, ci occorrerà:

Introduzione

In questo tutorial vedremo come sviluppare correttamente un documento web, mantenendo completamente separati i 3 strati descritti in precedenza: contenuto (XHTML), presentazione (CSS), comportamento (Javascript).

L'obiettivo è: creare 2 documenti, nei quali saranno presenti un titolo, un menu (per passare da un contenuto all'altro) e qualche paragrafo. Oltre a questo dovranno contenere un'area sensibile che si attiva e cambia colore al passaggio del mouse.

Al termine capiremo perchè è vantaggioso mantenere gli strati separati e distinti.

Struttura directory e file

Iniziamo creando la nostra directory/cartella di "lavoro" che chiameremo tutorial in cui andremo a mettere i nostri file.

All'interno di questa directory/cartella creiamo altre 2 sotto-directory che chiameremo css e js.

La prima (css) conterrà il/i file relativi allo strato presentazione (con estensione .css), la seconda (js) quelli relativi allo strato comportamento (con estensione .js). La "radice" (tutorial), invece, conterrà i file relativi allo strato contenuto (con estensione .html).

In definitiva dobbiamo avere una struttura di questo tipo:

  • tutorial
    • css
      • presentazione.css
    • js
      • comportamento.js
    • contenuto1.html
    • contenuto2.html
    • ...

Possiamo anche da subito crearci i file riportati nella struttura lasciandoli vuoti (li riempiremo mano a mano).

Reset CSS

Il motivo per cui è necessario fare un reset dei CSS è descritto nella sezione CSS - Reset! di questa guida.

Nel sito indicato sopra preleviamo il codice CSS e incolliamolo nel file reset.css all'interno della directory css.

La directory css dovrà quindi avere (se si sono già creati i file del punto precedente) i file seguenti:

  • ...
  • css
    • presentazione.css
    • reset.css
  • ...

JQuery

Se abbiamo già scaricato JQuery, ci ritroveremo un file jquery-1.5.2.min.js che dovremo posizionare all'interno della directory/cartella js.

La directory js dovrà quindi avere (se si sono già creati i file del punto precedente) i file seguenti:

  • ...
  • js
    • comportamento.js
    • jquery-1.5.2.min.js
  • ...

Strato contenuto

I contenuti sono memorizzati su file .html e contengono solo codice HTML / XHTML con riferimenti a file .css e .js esterni.

Vediamo ora di scrivere i contenuti i 2 file partendo da contenuto1.html nel quale andremo ad inserire il codice riportato di seguito:


<html>
 <head>
  <title>Contenuto 1</title>
  <link rel="stylesheet" href="./css/reset.css" type="text/css" />
  <link rel="stylesheet" href="./css/presentazione.css" type="text/css" />
  <script type="text/javascript" src="./js/jquery-1.5.2.min.js" ></script>
  <script type="text/javascript" src="./js/comportamento.js" ></script>
 </head>
 <body>
  <h1>Contenuto 1</h1>
  <ul class="menu">
   <li>Contenuto 1</li>
   <li><a href="contenuto2.html">Contenuto 2</a></li>
  </ul>
  <div class="testo">
   <p>Questo è un semplice testo di prova.</p>
   <p>Questo è un secondo paragrafo.</p>
  </div>
  <div id="area_sensibile">Passa sopra con il mouse</div>
 </body>
</html>

Il file contenuti2.html conterrà invece il codice seguente:


<html>
 <head>
  <title>Contenuto 2</title>
  <link rel="stylesheet" href="./css/reset.css" type="text/css" />
  <link rel="stylesheet" href="./css/presentazione.css" type="text/css" />
  <script type="text/javascript" src="./js/jquery-1.5.2.min.js" ></script>
  <script type="text/javascript" src="./js/comportamento.js" ></script>
 </head>
 <body>
  <h1>Contenuto 2</h1>
  <ul class="menu">
   <li><a href="contenuto1.html">Contenuto 1</a></li>
   <li>Contenuto 2</li>
  </ul>
  <div class="testo">
   <p>Questo è un semplice testo di prova.</p>
   <p>Questo è un secondo paragrafo.</p>
  </div>
  <div id="area_sensibile">Passa sopra con il mouse</div>
 </body>
</html>

Dai contenuti richiamiamo i file esterni e condivisi che si occupano dello strato presentazione e comportamento.

Da notare, anche se i contenuti sono molto semplici, di come non esista traccia, all'interno del documento, dei linguaggi CSS e Javascript, ma solo richiami a questi.

Strato presentazione

I file presentazione sono memorizzati su file .css e come abbiamo visto sono richiamati dai file .html (evitando di includere linguaggio CSS nel documento HTML/XHTML).

Nel file css dobbiamo dire come visualizzare i contenuti:


body {
 font-family: Verdana, Arial;
 padding: 15px;
}

h1 {
 font-size: 24px;
 font-weight: bold;
}

ul.menu {
 margin-top: 15px;
 font-weight: bold;
 height: 30px;
}

ul.menu li {
 float: left;
 margin-right: 15px;
}

.testo p {
 margin-top: 15px;
}

#area_sensibile {
 margin-top: 15px;
 padding: 15px;
 font-size: 20px;
 font-weight: bold;
 border: 1px solid #999;
 color: #999;
}

Strato comportamento

Buona norma è evitare di includere codice Javascript direttamente nei documenti HTML ma scriverlo in un file esterno con estensione .js e richiamarlo dalla pagina .html in modo da condividere lo stesso file .js su più file .html .

Vediamo ora, riprendendo il solito documento di esempio come far diventare rosso il div al passaggio del mouse.


$(document).ready( function() {
 $('#area_sensibile').mouseover( function() {
  $(this).css('background', 'red');
  $(this).css('color', 'green');
 });
 $('#area_sensibile').mouseout( function() {
  $(this).css('background', 'green');
  $(this).css('color', 'red');
 });
});

Modifiche ai documenti

I documenti, organizzati in questo modo richiedono una manutenzione minima. Ogni modifica sulla presentazione richiede solo la modifica di un file, così è per modifiche a livello di comportamento.

Se non avessimo rispettato la separazione degli strati probabilmente avremmo avuto qualche problema in più.

HTML/XHTML - Evitare alcuni errori tipici

E' stato più volte detto che quando si scrive codice HTML o XHTML si deve porre l'attenzione sulla descrizione dei contenuti del documento e non ci si deve preoccupare ne' della presentazione del documento (compito dello strato presentazione / CSS) ne' del suo comportamento (compito dello strato comportamento / Javascript).

Di seguito vengono riportati alcuni suggerimenti per evitare di ricadere nell'errore di utilizzare HTML o XHTML per formattare il contenuto:

  • non usare le tabelle per dare un layout alla pagina
  • il tag h1 non deve essere usato perchè il carattere è più grande ma SOLO ED ESCLUSIVAMENTE per indicare un titolo.
  • non usare l'elemento b poichè pensato per formattare il documento. Usare invece l'elemento strong che "trasporta" un significato semantico e serve per dire che il testo in esso contenuto ha un significato particolare che richiede maggior enfasi rispetto a quello che lo precede e lo segue.
  • il tag br non deve essere usato per iniziare un nuovo paragrafo o per distanziare un paragrafo (o qualsiasi altro elemento) da un altro. Semplicemente non dovrebbe essere usato, perchè lo scopo del tag è formattare il documento e non descriverlo.
  • Se vogliamo che un'area (racchiusa ad es. da un div) abbia sfondo rosso al passaggio del mouse evitare l'uso degli attributi onmouseover e onmouseout ma agganciare questi eventi su un file javascript esterno.
  • evitare di includere javascript o css direttamente nel contenuto ma metterli su file separati in modo da renderli riutilizzabili in altri contenuti

HTML/XHTML - Differenze

Requisiti

Per comprendere quanto riportato di seguito potrebbe essere utile la lettura di:

Introduzione

XHTML e HTML pur avendo una sintassi molto simile hanno origini differenti: HTML deriva da SGML, XHTML da XML. In poche parole possiamo dire che XHTML è un documento HTML ben formato (secondo le regole dei doc. XML). Vediamo più in dettaglio cosa significa:

  • in XHTML l'annidamento degli elementi deve essere corretto, in HTML no!
  • in XHTML è obbligatorio il tag di chiusura, e per gli elementi che non hanno contenuto (es. img) si deve usare la forma di chiusura abbreviata />
  • in XHTML tutti gli elementi e i nomi degli attributi devono essere in caratteri minuscoli
  • in XHTML deve esserci un solo elemento di root
  • in XHTML il valore degli attributi deve essere racchiuso tra doppi apici
  • in XHTML gli elementi di un documento si identificano solo con l'attributo id e non con l'attributo name

HTML/XHTML - Elenchi

Requisiti

Prima di proseguire potrebbe essere utile la lettura di:

Intro

In HTML/XHTML possiamo definire elenchi non ordinati, elenchi ordinati e liste di definizione

Elenchi non ordinati

Si definiscono attraverso l'uso dell'elemento ul (unordered list). Le singole voci dell'elenco non ordinato sono definite attraverso l'elemento li (list item).

Ad esempio:


<ul>
   <li>Voce 1</li>
   <li>Voce 2</li>
   <li>Voce 3lt;/li>
</ul>

Elenchi ordinati

Come per gli elenchi non ordinati, con l'unica differenza che per definirli si utilizza l'elemento ol (ordered list).

Ad esempio:


<ol>
   <li>Voce 1</li>
   <li>Voce 2</li>
   <li>Voce 3lt;/li>
</ol>

Liste di definizione

Le liste di definizione (racchiuse dall'elemento dl), sono un elenco di voci costituite da 2 parti: termine (racchiuso dall'elemento dt) e descrizione (racchiuso dall'elemento dd).

Gli elementi dd e dt possono stare solo all'interno dell'elemento dl, e l'elemento dl può contenere solo questi 2 elementi.

HTML/XHTML - Tabelle

Requisiti

Prima di procedere potrebbe essere utile la lettura di:

Intro

Per descrivere tabelle in HTML/XHTML si utilizza l'elemento a livello di blocco table che definisce una tabella per dati organizzati in righe e colonne.

Possiamo aggiungere "informazione" alla tabella utilizzando gli elementi, non obbligatori, caption, thead, tbody, tfoot che possono stare solo all'interno dell'elemento table.

L'elemento table dovrà invece obbligatoriamente contenere righe (elemento tr) le quali a loro volta conterranno colonne (elemento td) o intestazioni di colonna (elemento th).

Una tabella, quindi, potrebbe essere strutturata nel modo seguente:


<table>
   <caption>titolo/didascalia per la tabella</caption>
   <thead>
      <tr>
          <th>Intestazione 1</th><th>Intestazione 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>valore 1</td><td>valore 2</td>
      </tr>
   </tbody>
</table>

oppure, tralasciando gli elementi opzionali, in questa forma più semplice:


<table>
   <tr>
       <th>Intestazione 1</th><th>Intestazione 2</th>
   </tr>
   <tr>
       <td>valore 1</td><td>valore 2</td>
   </tr>
</table>

Segue una descrizione degli elementi che possiamo utilizzare nella definizione della tabella.

TABLE [summary=Text] [width=Length] [border=Pixels] [cellspacing=Length] [cellpadding=Length]

CAPTION

THEAD

TBODY

TFOOT

TR

TH

TD

Qualche nota ...

Anche se ormai scontato è bene ripeterlo: le tabelle non devono essere usate per dare un layout alla pagina (questo è sempre compito dello strato presentazione/CSS).

HTML/XHTML - Elementi inline (DRAFT)

Requisiti

Prima di procedere nella lettura di questo appunto potrebbe essere utile leggere:

Intro

Gli elementi inline sono contenuti in elementi a livello di blocco e possono contenere testo e altri elementi inline (NON possono contenere elementi a livello di blocco).

Nell'elenco che segue sono stati esclusi quegli elementi e attributi che hanno lo scopo di formattare il contenuto (compito esclusivo dello strato presentazione) o assegnare un comportamento (compito esclusivo dello strato comportamento) e che sono deprecati (= obsoleti, se ne sconsiglia l'utilizzo, c'e' un nuovo modo più corretto per farlo)

Sono considerati impliciti gli attributi comuni (opzionali): id, class, lang

A [href=URI] [title=Text]

Indica che il suo contenuto è un link ipertestuale la cui risorsa è reperibile attraverso l'URI indicato nell'attributo href .

L'attributo title è usato per descrivere brevemente il contenuto del link.

E' doveroso anche precisare che il contenuto dell'elemento a, che sarà un link, dovrà dare un'idea di cosa riferisce: le forme, spesso utilizzate, del tipo "clicca qui" si dovrebbero evitare.

Ad esempio:

<a href="http://www.google.it" title="Form di ricerca di google">GOOGLE</a>

ABBR [title=Text]

Usato per indicare che il testo contenuto è un'abbreviazione.

E' possibile usare l'attributo comune title per indicare il testo non abbreviato. I browser visualizzeranno in genere il contenuto di title sottoforma di tooltip.

Se, invece, il testo abbreviato è pronunciabile si utilizzerà l'elemento acronym.

Esempio:

<abbr title="chilogrammi">Kg</abbr>

ACRONYM [title=Text]

Come per abbr ma usato per indicare testi abbreviati e pronunciabili (acronimi).

Esempio:

<acronym title="hypertext markup language">HTML</acronym>

CITE

Usato per indicare che il suo contenuto è una citazione: es. il titolo di un giornale, il nome di un film, etc.

CODE

Usato per indicare che il suo contenuto è un codice: es. codice del linguaggio Java, PHP etc. oppure HTML, CSS o altro.

DFN

Usato per indicare una definizione.

EM

Utilizzato per dare enfasi al contenuto, che non significa metterlo in grassetto (anche se i browser lo fanno, attraverso CSS è possibile assegnare un modo qualsiasi di visualizzarlo).

Per dare enfasi al testo in maniera più forte utilizzare l'elemento strong

IMG alt=Text src=URI [longdesc=URI] [width=Length] [height=Length]

Indica la presenza di un'immagine reperibile attraverso l'URI indicato con l'attributo obbligatorio src.

L'attributo obbligatorio alt indica il testo alternativo all'immagine per quei client che non possono visualizzarla/caricarla.

Q [cite=URI]

Usato per indicare che il suo contenuto è una breve citazione, il cui riferimento è indicato attraverso l'attributo cite.

Ad esempio:

<p>According to Dave Raggett, <q cite="http://www.w3.org/Press/HTML4-REC">HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all.</q></p>

SAMP

Indica che il testo contenuto è un risultato/output di qualche cosa, come ad esempio la risposta di un programma o di uno script.

<p>When an undefined element is used in an HTML document, a validator will give an error like the following:</p> <p><samp>C:\SP\BIN\NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined</samp></p>

SPAN

È un contenutore generico. Non fornisce alcun significato al suo contenuto.

E' usato per assegnare una particolare presentazione (attraverso CSS) o comportamenti (javascript) al suo contenuto.

STRONG

Utilizzato per dare un'enfasi "forte" al testo contenuto (che non significa metterlo in grassetto!!!). E' possibile usare anche il tag em che però indica minor enfasi rispetto a strong.

VAR

Usato per indicare variabili o argomenti di un programma.

Ad esempio:

<p>Versions of HTML are typically numbered in an <var>x</var>.<var>y</var> format.</p>

HTML/XHTML - Elementi a livello di blocco

Requisiti

Prima di proseguire potrebbe essere utile leggere:

Intro

Gli elementi a livello di blocco, in generale, contengono o elementi inline o altri elementi a livello di blocco.

Non sono presenti tag e attributi che non dovrebbero essere utilizzati: perchè lo scopo è la formattazione e non la strutturazione o descrizione semantica del documento.

Si considerano impliciti gli attributi comuni (opzionali): id, class, lang.

address

Caratteristiche:

  • contiene solo elementi inline

Contiene informazioni utili a contattare il possessore/manutentore del documento/sito web o parte di questo. Può contenere il nome, l'indirizzo, l'email, etc.

Esempio:

<address>
Per qualsiasi informazione potete contattarci all'indirizzo email
<a href="mailto:info@example.com">info@example.com</a>
, o presso i nostri uffici al numero 123456.
</address>

blockquote

Attributi:

AttributoTipo valoreObbligatorio
citeURINO

Caratteristiche:

  • può contenere solo elementi a livello di blocco

Indica che il contenuto dell'elemento è citazione, eventualmente ripresa da altro sito per la quale è possibile indicare l'url attraverso l'attributo cite.

Esiste un corrispondente inline Q, ma BLOCKQUOTE, essendo un elemento a livello di blocco, permette di inserire altri elementi a livello di blocco (Q non lo permette essendo inline).

Esempio:

<blockquote cite="http://www.bibliomania.com/Fiction/joyce/ulysses/telemac.html">
<p>He pointed his finger in friendly jest and went over to the parapet, laughing to himself. Stephen Dedalus stepped up, followed him wearily half way and sat down on the edge of the gunrest, watching him still as he propped his mirror on the parapet, dipped the brush in the bowl and lathered cheeks and neck.</p>
<p>Buck Mulligan's gay voice went on.</p>
</blockquote>

del

Attributi:

AttributoTipo valoreObbligatorio
citeURINO
datetimeDatetimeNO

Indica che il suo contenuto è stato eliminato a seguito di un aggiornamento del documento (il contenuto resta ma tramite presentazione/CSS possiamo visualizzarlo con una riga sopra).

div

Definisce un contenitore generico a livello di blocco. Permette di assegnare stili classi etc. per il blocco stesso o per gli elementi contenuti.

Il corrispondente a livello inline è il tag SPAN.

h1, h2, ..., h6

Caratteristiche:

  • Può contenere solo elementi inline

Si utilizza per indicare che il suo contenuto rappresenta un titolo di 1° o 2° ... 6° livello (più il numero è alto e più il titolo è meno importante).

Attraverso l'uso di questi elementi è possibile strutturare il documento in titoli, sottotitoli, etc.

Un documento dovrebbe contenere un solo H1 come titolo principale.

Esempio:

<h1>Titolo del libro</h1>
<h2>Capitolo 1</h2>
<p>...paragrafi...</p>
<h3>Sezione 1.1</h3>
<p>...paragrafi...</p>
<h3>Sezione 1.2</h3>
<p>...paragrafi...</p>
<h2>Capitolo 2</h2>
<p>...paragrafi...</p>
<h3>Sezione 2.1</h3>
<p>...paragrafi...</p>

ins

Attributi:

AttributoTipo valoreObbligatorio
citeURINO
datetimeDatetimeNO

Serve per indicare che il suo contenuto è un testo aggiunto ad preesistente. È un modo per differenziare contenuti/testi nelle varie versioni di un documento.

Gli attributi opzionali cite e datetime servono rispettivamente per indicare l'URI contenente l'informazione per cui si è aggiunto il documento e per indicare la data e l'ora dell'inserimento (nella forma YYYY-MM-DDThh:mm:ssTZD)

Ad esempio:

<p>The CENTER element defines a block whose contents are centered horizontally on visual browsers. <ins cite="http://www.w3.org/TR/REC-html40-971218/appendix/changes.html#h-A.1.2" datetime="1997-12-19T00:00:00-05:00">Note that CENTER is deprecated in HTML 4.0.</ins></p>

p

Caratteristiche:

  • Può contenere solo elementi inline

Serve per indicare che il suo contenuto è un paragrafo.

Pur essendo un elemento a livello di blocco può contenere solo elementi inline.

Tabelle ed elenchi

In HTML/XHTML possiamo descrivere anche tabelle ed elenchi che sono casi particolari di elementi a livello di blocco.

Poichè hanno qualche particolarità in più gli elementi sono stati descritti in note separate:

HTML/XHTML - Introduzione

Requisiti

Prima di procedere potrebbe essere utile la lettura di:

Introduzione, HTML, XHTML, differenze

XHTML e HTML sono linguaggi di markup utilizzati per descrivere il contenuto di un documento web, attraverso l'uso di elementi che ne marcano il contenuto dandone un significato. In altri termini gli elementi sono usati per dire: "questo è un titolo", "questo è un paragrafo", "questa è una citazione" etc.

XHTML e HTML pur avendo una sintassi molto simile hanno origini differenti: HTML deriva da SGML, XHTML da XML. In poche parole possiamo dire che XHTML è un documento HTML ben formato secondo le regole dei documenti XML. E' possibile trovare una descrizione più dettagliata delle differenze nella nota HTML/XHTML - differenze.

Struttura di un documento

Un documento HTML/XHTML ha sempre la struttura riportata di seguito:

<!DOCTYPE ... >
<html>
  <head>
    <title>Titolo del documento</title>
    <!-- elementi intestazione -->
  </head>
  <body>
    <!-- elementi a livello di blocco -->
  </body>
</html>

Di seguito analizzeremo le varie parti che lo costituiscono.

DOCTYPE - Document Type Definition

La prima riga <!DOCTYPE ... > è la dichiarazione del tipo di documento (DTD - Document Type Definition) ed indica su quale standard HTML o XHTML si basa il documento. Al posto di ... andrà l'indicazione della versione per la quale si intende scrivere il documento.

StandardDOCTYPE
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 (ancora non standard)<!DOCTYPE HTML>

Per entrambi i linguaggi abbiamo 3 tipologie di "standard": strict, transitional e frameset. Noi consideremo solo la prima (strict) perchè orientata alla descrizione del documento. Le altre includono anche la presentazione e sono presenti solo per compatibilità verso vecchi standard.

Elementi

Le porzioni di testo che iniziano e finiscono con parentesi angolari (< e >) sono dette tag di apertura e tag di chiusura. I primi iniziano con < i secondi con </ e per entrambi segue sempre un nome.

I tag di apertura e di chiusura che hanno lo stesso nome individuano un elemento e il suo contenuto (testo o altri elementi).

Dalla struttura riportata sopra si possono individuare gli elementi html, head, title, body che, come già detto, sono sempre presenti e obbligatori in qualsiasi documento HTML/XHTML.

L'elemento html ha come tag di apertura <html> e come tag di chiusura </html>, lo stesso è per gli altri elementi. Tra il tag di apertura e di chiusura c'è il contenuto dell'elemento html: gli elementi head e body.

L'elemento head, a sua volta, contiene l'elemento obbligatorio title il quale contiene testo.

Come vedremo in seguito, alcuni elementi non hanno contenuto. In tal caso possiamo omettere il tag di chiusura terminando il tag di apertura con un />:

<tag ... />

Attributi

Utilizzati per indicare informazioni aggiuntive per l'elemento. In alcuni casi sono obbligatori.

Sono inclusi solo nel tag di apertura ed hanno la forma:

nome_attributo="valore_attributo"

Ad esempio:

<a href="http://www.example.com/esempio.html">esempio</a>

In questo caso l'elemento a indica che il suo contenuto è un link ipertestuale che rimanda alla pagina indicata dal valore dell'attributo href.

Attributi comuni

A praticamente tutti gli elementi possiamo indicare questi attributi comuni:

  • id: il valore di questo attributo deve essere univoco ed identifica l'elemento nel documento. Possiamo così individuare da strato presentazione o strato comportamento questo elemento per associargli un aspetto grafico o una funzione particolare.
  • class: il valore di questo attributo è un elenco di classi separate da uno spazio cui l'elemento appartiene. Ad una stessa classe possono appartenere più elementi. La classe serve per applicare una presentazione o un particolare comportamento ad un insieme di elementi.
  • lang: il valore specifica la lingua sia degli altri attributi dell'elemento che del suo contenuto

Commenti

Nel documento È possibile inserire commenti che agevolano la lettura del codice HTML/XHTML. Iniziano con <!-- e finiscono con --> . Ad esempio:

<!-- questo e' un commento -->

Caratteri speciali

Alcuni caratteri sono riservati perchè usati per il linguaggio (HTML o XHTML), pertanto ne è vietato l'uso sia nel contenuto dell'elemento che nei valori degli attributi. Per utilizzare questi caratteri c'è ovviamente un metodo alternativo.

I caratteri e i modi alternativi per utilizzarli sono:

  • < e > : usati nei tag, devono essere scritti come &lt; e &gt;
  • " : usate per racchiudere i valori degli attributi. Devono essere scritti con &quot;
  • & : usati per i caratteri speciali. Vanno scritti come &amp;

Significato semantico degli elementi

Gli elementi attribuiscono un significato al loro contenuto.

Ad esempio:

<p>ciao mondo!</p>

In questo caso abbiamo l'elemento p che ha un tag di apertura <p> e un tag di chiusura </p>. L'elemento racchiude una stringa indicando che quella stringa è un paragrafo.

<h1>Titolo</h1>

In questo caso abbiamo l'elemento h1 che ha un tag di apertura <h1> e un tag di chiusura </h1>. L'elemento racchiude una stringa indicando che quella stringa è il titolo principale.

<img ... />

In questo caso l'elemento img è chiuso senza tag di chiusura. Indica che quell'elemento è un'immagine. Al posto dei ... vanno gli attributi, descritti di seguito, che definiscono le proprietà dell'immagine.

Per approfondire

Si può ora proseguire la lettura con:

Documenti Web - HTML / CSS / Javascript

Un documento web "ben formato" è composto da 3 componenti distinti e separati (si capirà meglio in seguito il motivo):

  • strato contenuto (HTML/XHTML)
  • strato presentazione (CSS)
  • strato comportamento (Javascript)

Strato contenuto - HTML/XHTML

Il contenuto è l'informazione che si vuole trasmettere all'utente. Comprende testo, immagini, suoni, video, altro.

L'informazione è descritta strutturalmente e semanticamente attraverso i linguaggi HTML o XHTML (o l'uno o l'altro).

Vediamo di capire meglio cosa si intende: un contenuto (es. il testo di un libro) è strutturato in titoli, sottotitoli e paragrafi i quali possono comprendere citazioni, indirizzi, codici, immagini, suoni, video etc.

HTML o XHTML devono essere usati solo ed esclusivamente per descrivere il contenuto. In altri termini è utilizzato per dire: "questo è un titolo" (h1, h2, ...), "questo è un paragrafo"(p), "questa è una citazione" (cite), "questa è una tabella che ha queste intestazioni di colonna" (table, tr, th, td) etc.

HTML o XHTML, pur permettendolo, non devono essere usati per definire l'aspetto del documento (compito dello strato presentazione e dei CSS) e non devono includere regole di comportamento (poichè compito dello strato comportamento).

Da qui è possibile proseguire con l'introduzione a HTML/XHTML.

Strato presentazione - CSS

Definisce l'aspetto dei contenuti. Per aspetto non si intende solo quello grafico: un documento può essere visualizzato anche in altre forme su altri dispositivi. Ad esempio per i non vedendi potrebbe esserci un lettore vocale, oppure potrebbe essere una "visualizzazione cartacea" su stampante.

L'aspetto dei contenuti è definito attraverso l'uso dei CSS che permettono di specificare, attraverso i selettori, come visualizzare/presentare gli elementi del contenuto.

HTML e XHTML permettono di includere CSS direttamente inline negli elementi. Questa è una pratica da evitare. I CSS devono essere su file esterni richiamati dai file dello strato contenuto.

Da qui è possibile proseguire con un'introduzione ai CSS.

Strato comportamento - Javascript

Definisce l'interazione con l'utente attraverso il linguaggio di scripting Javascript. Con interazione si intende ad es. la semplice validazione dei dati immessi dall'utente in un form oppure anche la gestione di un'interfaccia simile alle applicazioni standalone.

In questo strato è utile l'uso di librerie o framework che ci semplificano il lavoro. Tra i vari framework disponibili segnalo JQuery.

HTML e XHTML permettono di includere codice Javascript direttamente inline negli elementi o nel contenuto. Anche questa è una pratica da evitare e sarebbe opportuno portare tutto all'esterno su file separati.

Da quì è possibile proseguire con Introduzione a Javascript.

Per approfondire ...

È possibile approfondire gli argomenti trattati nelle pagine seguenti:

Se invece si ha già una conoscenza di base è possibile proseguire con il tutorial che mostra come creare un documento web mantenendo la separazione dei 3 strati descritti:

Riferimenti

Lettori fissi

 
DISCLAIMER: Questo blog non costituisce una testata giornalistica. Non ha carattere periodico ed è aggiornato secondo la disponibilità e la reperibilità dei materiali. Pertanto non può essere considerato in alcun modo un prodotto editoriale ai sensi della Legge. n. 62 del 2001.
COPYRIGHT: Tutti i diritti sui testi/contenuti presenti su questo blog sono di proprietà dell'autore. Per utilizzare il materiale contattarmi all'indirizzo: nevit76@gmail.com