g. mecca – [email protected] – università della basilicata tecnologie di sviluppo per il web...
TRANSCRIPT
G. Mecca – [email protected] – Università della Basilicata G. Mecca – [email protected] – Università della Basilicata
Tecnologie di Sviluppo per il Web
XHTML
Introduzione
versione 2.0Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons
(vedi ultima pagina)
2G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Sommario
Storia di HTML Principali Problemi Tecnologici Standard rilevanti
XHTML 1.0 StrictModularizzazione di XHTMLXHTML Basic
Principi di VisualizzazioneClassificazione degli Elementi
XHTML >> Introduzione >> Sommario
3G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
HTMLun linguaggio per descrivere documenti
ipermedialidocumenti fatti di titoli, paragrafi, testo ecc.collegamenti (link) ad altri documenticontenuti di altri media (es: immagini)
Linguaggio di marcaturaobbedisce ad un DTD di SGML
XHTML >> Introduzione >> Storia di HTML
4G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
SGMLsintassi per descrivere la struttura gerarchica
di documentiil padre di XML (anni ’70); più complessoDTD: schemi per i documenti
Meno restrittivo di XMLi tag di chiusura possono mancaremaiuscole e minuscoleapici opzionali per gli attributi
XHTML >> Introduzione >> Storia di HTML
5G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><HTML> <HEAD> <TITLE>Programma del Corso di Sviluppo Web</TITLE> </HEAD> <BODY> <H1>Corso di Tecnologie di Sviluppo per il Web</H1> <P>Questa è una pagina di <B>esempio</B>.</P> <P><img src=lavagna.gif> <A href=“altraPagina.html”>
Questo e’ un collegamento ad un’altra pagina </A> <I>G. Mecca, ultima modifica Marzo 2003 </BODY> </HTML>
XHTML >> Introduzione >> Storia di HTML
>> esempio.html
6G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
HTML 1.0: La prima versione di HTMLTim Berners Lee, Dave Raggett, giugno ‘93
Il DTD di HTML 1.0 (basato su SGML)titoli (“headings”)paragrafi e formattazione del testoliste e glossaricollegamenti ad altre pagineimmagini
XHTML >> Introduzione >> Storia di HTML
7G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
Primi browser testualiLynx, 1991 – 1992
Mosaic v. 1.0, novembre ’93, Marc Andreesen, NCSA-UIUCv. 2.0, gennaio ’94, introduce le maschere (“form”)
Il 1994 Andreesen e Jim Clark fordano la NetscapeW3C, ottobre ’94, fondato dal MIT, comincia l’attività
di standardizzazione (HTML 2.0)
XHTML >> Introduzione >> Storia di HTML
8G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
I prodotti commercialiNetscape 1.1, aprile ’95, introduce le tabelle
e il tag <blink>Internet Explorer 1.0, agosto ’95, distribuito
gratuitamente Nel 1995
Netscape ha l’80% del mercatonascono i primi motori di ricercainizia la guerra dei browser (“browser war”)
XHTML >> Introduzione >> Storia di HTML
9G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
Lo sviluppo dei prodottiNetscape Navigator 2.0, marzo ’96, frame, plug-in,
applet, Javascriptfilosofia: HTML come linguaggio “tuttofare”
Il consorzioda una parte continua la rincorsaHTML 3.2, standard W3C, maggio ’96 – gennaio ’97,
introduce script e tag <font>ma nello stesso tempo comincia ad introdurre le
metodologie corretteCSS1, Cascading Style Sheets Livello 1, novembre
’95 – dicembre ’96
XHTML >> Introduzione >> Storia di HTML
10G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
L’evoluzione del mercatoNetscape Navigator 4.0, giugno ’97, layer, limitato
supporto per CSS1Internet Explorer 4.0, ottobre ’97, versione
migliorata, limitato supporto per CSS1la filosofia iniziale è ancora predominante
Gennaio 1998la quota di Netscape è scesa al 40% circail browser diventa gratuitostrategia “open source” (nasce Mozilla)il mercato diventa più “stabile”
XHTML >> Introduzione >> Storia di HTML
11G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
Il consorzio assume il controlloHTML 4.0 e CSS Livello 2
Filosofiastandardizzare definitivamente il linguaggio
HTML fermandone lo sviluppofornire un’alternativa sofisticata per
specificare la presentazione (CSS)tentativo di imporre gli standard in modo
incrementale e compatibilità all’indietro
XHTML >> Introduzione >> Storia di HTML
12G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
HTML 4.0giugno ’97 – aprile ’98DTD “strict”: solo elementi strutturaliDTD “transitional”DTD “frameset”
CSS Livello 2maggio ’98estensione di CSS Livello 1
XHTML >> Introduzione >> Storia di HTML
13G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
Si affacciano altre tecnologieDHTML “Dynamic HTML”combinazione di DOM, CSS e JavaScriptpossibilità di animare elementi della pagina
Macromedia Flashgrafica vettorialeanimazioni
Alcuni fallimenti autorevoliil problema dell’inerzia tecnologica
XHTML >> Introduzione >> Storia di HTML
14G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
La Storia di HTML
Perché questa storiaconsente di capire lo stato della tecnologia e i nuovi standard del W3C
Alla fine degli anni ‘90mercato stabilizzatoil Consorzio finalmente autorevoleun pesante retaggio tecnologicoulteriori evoluzioni tecnologiche e sociali
(dispositivi mobili, disabili ecc.)
XHTML >> Introduzione >> Storia di HTML
15G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Principali Problemi del Linguaggio
Problema 1: Evoluzione molto rapidamancanza di metodologie consolidaterapporto tra contenuto (struttura) e
presentazione; es: tabellespesso evolvono in modo indipendente
Indicazione del Consorzioseparare struttura e presentazioneHTML per il contenutoCSS per la presentazione
XHTML >> Introduzione >> Principali Problemi del linguaggio
16G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Principali Problemi del Linguaggio
Problema 2: Codice scorrettoi browser sono “onnivori”i DTD dello standard non sono rispettatiproblemi per le applicazioni
Indicazione del Consorzioadottare la sintassi XMLXHTML 1.0: una riformulazione di HTML 4.0
secondo lo standard di XML
XHTML >> Introduzione >> Principali Problemi del linguaggio
17G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Principali Problemi del Linguaggio
Problema 3: Diverse capacità dei browserdiverse versioni di HTML, diversi DTDdiverse piattaforme (palmari, WebTV, …)
Indicazione del Consorzioprincipio di “accessibilità” modularizzazione di XHTMLXHTML Basic e negoziazioneestensibilità
XHTML >> Introduzione >> Principali Problemi del linguaggio
18G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Standard Rilevanti
XHTML 1.0gennaio 2000
CSS livello 1, CSS livello 2dicembre ‘96, maggio ’98
Modularization of XHTMLaprile 2001
XHTML Basic dicembre 2000
XHTML >> Introduzione >> Standard Rilevanti
19G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML 1.0
Riformulazione di HTML 4.0formato e DTD XML e non SGML
In altri terminii documenti XHTML corretti sono alberi validi
rispetto ad un DTD XML fissato dal consorzioil DTD descrive quali elementi e quali attributi
possono comparire in una pagina XHTML
XHTML >> Introduzione >> Standard Rilevanti
20G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML 1.0
DTD di riferimentoDTD strict XHTML1-strict.dtd
è quello di riferimento; presentazione CSSDTD transitional XHTML1-transitional.dtd
è da intendersi come temporaneoDTD frameset XHTML1-frameset.dtd
è di fatto “deprecato” Ci occuperemo solo di XHTML1-strict
XHTML >> Introduzione >> Standard Rilevanti
21G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML 1.0
XHTML >> Introduzione >> Standard Rilevanti
>> xhtml1-strict.dtd>> esempioXHTML1-strict.html
HTML4-frameset.dtd
HTML4-transitional.dtd
HTML4-strict.dtd
HTML3.2.dtd
XHTML1-frameset
XHTML1-transitional
XHTML1-strict
XHTML-basic.dtdHTML2.0.dtd
22G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML 1.0
Vincoli sulla sintassipreambolo XMLdichiarazione del DTD es:<!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”“-//W3C//DTD XHTML 1.0 Strict//EN” “xhtml1-strict.dtd”>“xhtml1-strict.dtd”>
l’elemento radice è <html>il namespace del documento è
http://www.w3.org/1999/xhtmlvalgono le regole della sintassi di XML
XHTML >> Introduzione >> Standard Rilevanti
23G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML 1.0
Vincoli sulla sintassiil documento deve essere ben formatoelementi vuoti; es: <br />valori degli attributi tra apici;
es: xmlns=“http://www.w3.org/1999/xhtml”codifica delle entità; es: &numerose entità predefinite: Latin-1
characters, Special characters, Symbols
XHTML >> Introduzione >> Standard Rilevanti
24G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modularizzazione
Ideadivisione del linguaggio in moduliper consentire di implementare frammenti
diversi del linguaggio in client diversimeccanismo di estensibilità: è possibile per
lo sviluppatore definire nuovi moduli Modulo
frammento del DTD di XHTML1-strictcollezione di elementi e relativi attributi
XHTML >> Introduzione >> Standard Rilevanti
25G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Elenco dei Moduli
Nucleo (“Core”)Structure, Text, Hypertext,
List Estensioni del testo
Presentation, Edit, Bidirectional Text
MaschereBasic Forms, Forms
TabelleBasic Table, Table
Immagini Image
MappeClient Side Map, Server
Side Map Frame
Frame, Target, Iframe Fogli di stile
Stylesheet, Link Altri
Intrinsic Events, Metainformation, Scripting, Object, Base, Name, Legacy
XHTML >> Introduzione >> Standard Rilevanti
26G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modularizzazione
Evoluzione dello standardlo standard stabilisce come definire altri modulile successive versioni di XHTML saranno ottenute
combinando moduli di XHTML 1.0 e nuovi modulidevono contenere almeno i moduli “core”
(Structure, Text, Hypertext, List) XHTML 1.1: “Module Based XHTML”
selezione di moduli di XHTML 1.0 + modulo Ruby Attualmente: XHTML 2.0
XHTML >> Introduzione >> Standard Rilevanti
27G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Modularizzazione
Obiettivo di questa lezionepresentare i moduli fondamentali del
linguaggio XHTML 1.0 Impostazione
cominciamo da XHTML Basic di cui verrà presentata una panoramica completa
questo dovrebbe fornire gli strumenti per utilizzare XHTML 1.0 Strict nel complesso
XHTML >> Introduzione >> Standard Rilevanti
28G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML Basic
Insieme minimale di modulima ampia capacità di formattazione
Funzionalità di XHTML Basicmoduli del nucleo (struttura, testo, ipertesto,
liste)modulo per fogli di stile esternimodulo per le immaginimodulo per semplici mascheremodulo per semplici tabelle
XHTML >> Introduzione >> XHTML Basic
29G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML Basic
Intestazione di una pagina XHTML-basic <?xml version="1.0“ ?> <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN“ "DTD-xhtmlbasic/xhtml-basic10.dtd">
Il DTD di XHTML Basicxhtml-basic10.dtdnumerosi file, uno per ciascun modulo
XHTML >> Introduzione >> XHTML Basic
>> xhtml-basic10.dtd>> esempioXHTMLbasic.html
30G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML Basic
Dove reperire i DTDtutti i DTD sono reperibili dal sito del W3C
www.w3.orgsezione dedicata a HTML e XHTMLsono in linea tutti gli standardi DTD sono distribuiti con i documenti relativi
agli standard (XHTML Basic e XHTML 1.0)
XHTML >> Introduzione >> XHTML Basic
31G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
XHTML Basic: Principali Elementi
Structurehtml, head, body
Textp, br, em, strong, ...h1, h2, h3, h4...
Hypertexta href=“”
Listul, ol, li
Link (fogli di stile)link
Imageimg src=“”
Basic Formsform, input, select,
radio ... Basic Tables
table, th, tr, td
XHTML >> Introduzione >> XHTML Basic
32G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Principi di Visualizzazione
Funzione del browservisualizzare il contenuto della pagina sullo schermo
Visualizzazioneper il browser, ad ogni elemento corrisponde un
riquadrospazio rettangolare della finestra del browsertutti gli elementi sono detti di flusso (“flow”) perché
influenzano il flusso di disposizione sulla paginala visualizzazione consiste nella disposizione dei
riquadri nella finestra del browser
XHTML >> Introduzione >> Principi di Visualizzazione
33G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Principi di Visualizzazione
Disposizione dei riquadrisono nidificati gli uni negli altrila nidificazione dei riquadri corrisponde alle
relazioni di nidificazione nell’InfoSet Funzione di CSS
stabilire le caratteristiche di presentazione dei riquadri
forma, dimensione, colore, caratteri ecc.
XHTML >> Introduzione >> Principi di Visualizzazione
34G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Classificazione degli Elementi
Esistono due tipi di elementi Elementi a livello di blocco (“block level”)
i relativi riquadri cominciano sempre una nuova lineatitoli (headings”), i cosiddetti blocchi (paragrafi,
tabelle, ecc.), liste Elementi in linea (“inline”)
i relativi riquadri possono essere disposti sulla stessa linea
testo, collegamenti, immagini
XHTML >> Introduzione >> Principi di Visualizzazione
35G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Principi di Visualizzazione
XHTML >> Introduzione >> Principi di Visualizzazione
>> esempio-riquadri.html>> esempio-riquadri-CSS.html
html
head body
h1
Titolo Principale
p...
xmlns=http://www.w3.org/
1999/xhtml
Questo è un documento di esempio
relativo a
em
HTML Basic
a
Una paginadi prova
ul p table
... ... ...
href=esempio.html
brSono
andatoa capo
36G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Classificazione degli Elementi
Attenzionegli elementi di XHTML non prevedono uno stile di
visualizzazione per il relativo riquadro Il browser
come fa a visualizzare una pagina a cui manca il foglio di stile ?
foglio di stile standard del browser; es: testo in carattere Times 10 punti tondo
Esempio: Mozillamozilla.org\Mozilla\res\html.css
XHTML >> Introduzione >> Principi di Visualizzazione
37G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Riassumendo
Storia di HTML Principali Problemi Tecnologici Standard rilevanti
XHTML 1.0 StrictModularizzazione di XHTMLXHTML Basic
Principi di VisualizzazioneClassificazione degli Elementi
XHTML >> Introduzione >> Sommario
38G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Namespace di XHTML
HTML e XHTML
39G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web
Termini della Licenza
Termini della Licenza
This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
Questo lavoro viene concesso in uso secondo i termini della licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.