HTML per l'Editoria

Linguaggio HTML per l'editoria

Diego La MonicaARPAT17-03-2010

Chi sono?

Sviluppo applicazioni intranet

Membro di IWA/HWG

Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009

Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per conto di IWA/HWG

Modulo 1 (X)HTML

Cos HTML

I tag e la loro rappresentazione

Differenze tra le grammatiche HTML e XHTML

La suddivisione di una pagina

Strutturare una pagina che si descriva

Modulo 2 Stili e Crossbrowsing

Cos' uno stile?

Come si pu descrivere lo stile di un elemento

Una cascata di... colori.

Separare l'informazione dalla sua presentazione

Rendere l'idea cross-browser.

L'accessibilit sempre in testa!

Modulo 1

(eXtensible) HyperText Markup Language

Cos' HTML

HTML = HyperText Markup Lanaguage

un linguaggio di strutturazione dei contenuti

Non sono necessari editor per la composizione di una pagina HTML anche se aiutano e rendono veloce lo sviluppo

un documento di testo opportunamente strutturato e servito al browser tipicamente come text/html (tramite lestensione .htm o .html)

I tag e la loro rappresentazione

Un tag un informazione che struttura un contenuto presente nella pagina.

Un tag identificato da una parola chiave racchiusa tra parentesi triangolari

Un tag pu essere vuoto o pu contenere informazioni aggiuntive

Un tag pu contenere altre informazioni, e quindi eventuali altri tag al suo interno

Testo

Testo in corsivo

Grammatica dei tag

Ciascun tag ha una serie di caratteristiche (attributi) che ne descrivono l'aspetto semantico e rappresentativo:ASPETTO SEMANTICO: Attributi aumentano la comprensione dell'elemento (alt, longdesc. Title )

ASPETTO RAPPRESENTATIVO: Attributi che alterano l'aspetto estetico di un elemento: (border, backcolor, background, forecolor, )

GESTIONE DEGLI EVENTI: Attributi che consentono di programmare il comportamento all'occorrenza di determinati eventi (onclick, onfocus, onblur )

La sintassi di HTML

Non rigorosa

Ogni tag ha il suo scopo

Esistono diverse versioni di HTMLLultima ufficiale HTML 4.01

La nuova edizione (levoluzione) HTML 5 ancora in stato di Working Draft

La sintassi di XML

XML = eXtensible Markup Language

XML pi rigoroso: ogni tag aperto deve essere necessariamente chiuso

Esiste una differenza tra documenti XML ben strutturati e documenti XML validi.

XML una grammatica di base, ciascuna implementazione un particolare dialetto che aderisce a precise regole.

La sintassi di XHTML

XHTML = eXtensible HyperText Markup Language

una grammatica XML per descrivere documenti HTML

Esistono diverse versioni di questo dialetto:XHTML 1.0 Transitional pensato per consentire una graduale migrazione dei contenuti prodotti in HTML 4.01 verso la nuova grammatica.

XHTML 1.0 Strict per chi produce un contenuto HTML seguendo la strutturazione formale di XML

La struttura di un documento

Le informazioni contenute in un documento web sono (o lo possono essere) rivolte a tre diversi fruitori (target della pagina):Informazioni rivolte agli utenti

Informazioni utili per il browser

Informazioni per i motori di ricerca

Schematizzare una pagina

Esistono diverse varianti di una rappresentazione comunque sintetizzata in questo schema

Intestazione

Corpo

Pi di pagina

Suddividere una pagina

Una pagina web tipicamente progettata con le seguenti sezioni:Intestazione

Logo e altre informazioni primarie

CorpoContenuti generali (con struttura che tipicamente va da 1 a 4 colonne)

Pi di paginaRecapiti aziendali copyright e Partita IVA

Strutturare un buon header

Elementi che aiutano a strutturare un buon header: La codifica della pagina ( UTF-8, UTF-16 )

Indicare un titolo (es. Titolo della pagina)

Una FavIcon

buona prassi inserire l'autore della pagina

Indicazioni sulla lingua del documento

Indicazioni sui contenuti della pagina

Indicare la durata del documento (solo per il web)

Strutturare il documento

Significa progettare un documento di testo con i corretti accorgimenti.Ciascun capitolo di un libro viene identificato da un numero di capitolo formattato secondo un preciso stile (un intestazione di secondo livello) mentre il titolo di un libro corrisponder concettualmente ad un'intestazione di primo livello.Una casa con le finestre al posto delle porte non sarebbe una buona casa.Un sito non strutturato rispettando il valore semantico di ciascun elemento, non sarebbe un buon sito.

Uno stile che... fa la differenza

Fino al 2004 (ma ancora oggi) molti professionisti utilizzavano ForeColor e BackgroundColor o il tag Font per formattare i contenuti di una pagina.Anche l'elemento Table ancora oggi viene impropriamente utilizzato per la strutturazione di layout per il web.Cosa ha contribuito a tutto ci?Il non aggiornamento professionale dei web-designer

Professionisti non in grado e/o non disponibili ad informare gli altri.

Il mancato o parziale supporto dei browser ai fogli di stile.

Modulo 2 Stili e Crossbrowsing

Cos' uno stile?

Come si pu descrivere lo stile di un elemento

Una cascata di... colori.

Separare l'informazione dalla sua presentazione

Rendere l'idea cross-browser.

L'accessibilit sempre in testa!

Uno sguardo al futuro: HTML 5 vs. XHTML 2

Cos' uno stile?

una regola che descrive la presentazione di uno o pi elementi (tag) presenti su un documento.border: 1px solid red;Background-color: #ffe;Font-size: 2em;Color: #800;

Stilizzare un elemento - 1

Stile in linea.

Lorem Ipsum dolor sit amet

Stilizzare un elemento - 1

Stile sulla pagina.div{ border: 1px solid red; Color: #f00;Background-color: #ffe;}

Stilizzare un elemento - 3

Stile separato dalla pagina.

Descrivere lo stile di un tag

h1{display: block;text-indent: 1em;}

div{font-family: Verdana, Arial, Sans-serif;font-size: 0.8em;}

Attributi speciali id e class

Lorem Ipsum

Dolor Sit

Amet

Stile in base a id e class

#mio-div{ In base all'ID}

.altro-elemento{ In base alla Classe }

Una cascata di colori

p{ } Applicato a tutti i paragrafi

div p{ } Applicato a tutti i paragrafi
che sono sotto un DIV

div p.myclass{ } Applicato a tutti iparagrafi con classe
myclass sotto un DIV

Separare la presentazione dal contenuto

Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.DM 8 Luglio 2005 Requisito n. 11

Oppure:

@import "myStyle.css"

Rendere l'idea cross-browser

Ciascun browser interpreta alcune caratteristiche dei CSS indicate nella documentazione W3C in modo arbitrario.Talvolta le caratteristiche vengono implementate solo da alcuni di essi.border-radius: 5px; Specifica per angoli arrotondati in CSS3-moz-border-radius: 5px; Versione dello stile definita da Mozilla (non consente la validazione del CSS)-webkit-border-radius:5px Versione supportata da Safari e Chrome (non consente la validazione del CSS)

Cross-browser... un po' opaco...

Una caratteristica trattata secondo interpretazione soggettiva la trasparenza:opacity: 0.9; Indica che l'opacit dell'oggetto del 90%.Su Internet Explorer non funziona Filter: opacity(alpha=90); Versione funzionante per IE... ma il CSS non viene validato

Per pochi... solo per IE...

Per consentire a Internet Explorer di caricare dei contenuti che gli altri browser non dovranno interpretare necessario utilizzare dei tag di commento strutturati in modo particolare:

e per tutti gli altri?

Secondo Microsfot per servire delle parti di HTML a tutti browser ad eccezione di IE necessario utilizzare la seguente sintassi: Ma il markup diventer invalido... Soluzione?

Autore: Diego La MonicaCorso HTML per l'editoria

Cliccate per modificare il formato del testo del titoloFare clic per modificare lo stile del titolo

Cliccate per modificare il formato del testo della strutturaSecondo livello strutturaTerzo livello strutturaQuarto livello strutturaQuinto livello strutturaSesto livello strutturaSettimo livello strutturaOttavo livello struttura

Nono livello strutturaFare clic per modificare stili del testo dello schema

Secondo livello

Terzo livello

Quarto livello

Quinto livello

I linguaggi del Web Diego La Monica http://diegolamonica.info International Webmasters Association - http://www.iwa.it