Tecnologie di Sviluppo per il Web

G. Mecca – [email protected] – Università della Basilicata G. Mecca – [email protected] – Università della Basilicata

Tecnologie di Sviluppo per il Web

XHTMLIntroduzione

versione 2.0Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons

(vedi ultima pagina)

http://creativecommons.org/licenses/by-sa/1.0/

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


La Storia di HTML HTML

un linguaggio per descrivere documenti ipermediali

documenti 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


La Storia di HTML SGML

sintassi per descrivere la struttura gerarchica di documenti

il 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



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>


>> esempio.html


La Storia di HTML HTML 1.0: La prima versione di HTML

Tim 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



La Storia di HTML Primi browser testuali

Lynx, 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)



La Storia di HTML I prodotti commerciali

Netscape 1.1, aprile ’95, introduce le tabelle e il tag <blink>

Internet Explorer 1.0, agosto ’95, distribuito gratuitamente

Nel 1995Netscape ha l’80% del mercatonascono i primi motori di ricercainizia la guerra dei browser (“browser war”)



La Storia di HTML Lo sviluppo dei prodotti

Netscape Navigator 2.0, marzo ’96, frame, plug-in, applet, Javascript

filosofia: HTML come linguaggio “tuttofare” Il consorzio

da 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



La Storia di HTML L’evoluzione del mercato

Netscape Navigator 4.0, giugno ’97, layer, limitato supporto per CSS1

Internet Explorer 4.0, ottobre ’97, versione migliorata, limitato supporto per CSS1

la filosofia iniziale è ancora predominante Gennaio 1998

la quota di Netscape è scesa al 40% circail browser diventa gratuitostrategia “open source” (nasce Mozilla)il mercato diventa più “stabile”



La Storia di HTML Il consorzio assume il controllo

HTML 4.0 e CSS Livello 2 Filosofia

standardizzare definitivamente il linguaggio HTML fermandone lo sviluppo

fornire un’alternativa sofisticata per specificare la presentazione (CSS)

tentativo di imporre gli standard in modo incrementale e compatibilità all’indietro



La Storia di HTML HTML 4.0

giugno ’97 – aprile ’98DTD “strict”: solo elementi strutturaliDTD “transitional”DTD “frameset”

CSS Livello 2maggio ’98estensione di CSS Livello 1



La Storia di HTML Si affacciano altre tecnologie

DHTML “Dynamic HTML”combinazione di DOM, CSS e JavaScriptpossibilità di animare elementi della pagina

Macromedia Flashgrafica vettorialeanimazioni

Alcuni fallimenti autorevoliil problema dell’inerzia tecnologica



La Storia di HTML Perché questa storia

consente 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.)



Principali Problemi del Linguaggio Problema 1: Evoluzione molto rapida

mancanza 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


Principali Problemi del Linguaggio Problema 2: Codice scorretto

i 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



Principali Problemi del Linguaggio Problema 3: Diverse capacità dei browser

diverse versioni di HTML, diversi DTDdiverse piattaforme (palmari, WebTV, …)

Indicazione del Consorzioprincipio di “accessibilità” modularizzazione di XHTMLXHTML Basic e negoziazioneestensibilità



Standard Rilevanti XHTML 1.0

gennaio 2000 CSS livello 1, CSS livello 2

dicembre ‘96, maggio ’98 Modularization of XHTML

aprile 2001 XHTML Basic

dicembre 2000

XHTML >> Introduzione >> Standard Rilevanti


XHTML 1.0 Riformulazione di HTML 4.0

formato e DTD XML e non SGML In altri termini

i documenti XHTML corretti sono alberi validi rispetto ad un DTD XML fissato dal consorzio

il DTD descrive quali elementi e quali attributi possono comparire in una pagina XHTML



XHTML 1.0 DTD di riferimento

DTD strict XHTML1-strict.dtdè quello di riferimento; presentazione CSS

DTD transitional XHTML1-transitional.dtdè da intendersi come temporaneo

DTD frameset XHTML1-frameset.dtdè di fatto “deprecato”

Ci occuperemo solo di XHTML1-strict



XHTML 1.0


>> 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


XHTML 1.0 Vincoli sulla sintassi

preambolo 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 1.0 Vincoli sulla sintassi

il 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



Modularizzazione Idea

divisione 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



Elenco dei Moduli Nucleo (“Core”)

Structure, Text, Hypertext, List

Estensioni del testoPresentation, Edit,

Bidirectional Text Maschere

Basic Forms, Forms Tabelle

Basic 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



Modularizzazione Evoluzione dello standard

lo 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



Modularizzazione Obiettivo di questa lezione

presentare i moduli fondamentali del linguaggio XHTML 1.0

Impostazionecominciamo da XHTML Basic di cui verrà

presentata una panoramica completaquesto dovrebbe fornire gli strumenti per

utilizzare XHTML 1.0 Strict nel complesso



XHTML Basic Insieme minimale di moduli

ma ampia capacità di formattazione Funzionalità di XHTML Basic

moduli 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


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-basic10.dtd>> esempioXHTMLbasic.html


XHTML Basic Dove reperire i DTD

tutti i DTD sono reperibili dal sito del W3C www.w3.org

sezione 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 Basic: Principali Elementi Structure

html, head, body Text

p, 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



Principi di Visualizzazione Funzione del browser

visualizzare il contenuto della pagina sullo schermo Visualizzazione

per il browser, ad ogni elemento corrisponde un riquadro

spazio 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


Principi di Visualizzazione Disposizione dei riquadri

sono 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.



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



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


Classificazione degli Elementi Attenzione

gli elementi di XHTML non prevedono uno stile di visualizzazione per il relativo riquadro

Il browsercome 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: Mozilla

mozilla.org\Mozilla\res\html.css



Riassumendo Storia di HTML Principali Problemi Tecnologici Standard rilevanti

XHTML 1.0 StrictModularizzazione di XHTMLXHTML Basic

Principi di VisualizzazioneClassificazione degli Elementi

XHTML >> Introduzione >> Sommario


Namespace di XHTMLHTML e XHTML


Termini della LicenzaTermini 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.



Tecnologie di Sviluppo per il Web

Documents

Transcript of Tecnologie di Sviluppo per il Web