I linguaggi del web - seconda edizione (1° giornata)

I linguaggi del Web – 2ª Ed. (1° Giorno)

Diego La Monica – Web Solution Developer
Email: me@diegolamonica.info
Web: http://diegolamonica.info
Twitter: http://twitter.com/jast/
Slide Share: http://slideshare.net/diego.la.monica/
Skype: diego.la.monica
Mobile: +39 333 7235382

Chi sono?
● Web solution developer
● Membro di IWA/HWG
● Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009

2
● Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per
conto di IWA/HWG
● Autore del tool “Wi.Li.” http://wili.diegolamonica.info
● Autore del framework JavaScript “JAST” http://jastegg.it
● Autore del framework PHP “ALPHA”
http://github.com/diegolamonica/ALPHA/

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

Il programma della giornata

 Cos’è HTML
 I tag e la loro rappresentazione

3
 Differenze tra le grammatiche HTML e XHTML
 La suddivisione di una pagina
 Strutturare una pagina autodescrittiva
 HTML 5

Nota sulla slide

Nell'angolo inferiore destro di alcune slide è
presente un “pallino” come è visibile in

4
questa slide.
Esso indica che per la slide è prevista una
sessione pratica.


Modulo 1 - (X)HTML
5

Cos’è HTML
 HTML = HyperText Markup Language

 È un linguaggio di strutturazione dei contenuti

6
 È un documento di testo opportunamente strutturato e
servito al browser tipicamente come text/html (tramite
l’estensione .htm o .html)

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

La sintassi di HTML
 Non è rigorosa

 Ogni tag ha il suo scopo

7
 Esistono diverse versioni di HTML

 L’ultima ufficiale è HTML 4.01

 La nuova edizione (l’evoluzione) è HTML 5 ancora in
stato di Working Draft

Commentare il markup

8

I tag e la loro rappresentazione
Un tag è un'informazione che struttura un
contenuto presente nella pagina.
 Un tag è identificato da una parola chiave

9
<li>
racchiusa tra parentesi triangolari ( < e > )
 Un tag può essere vuoto o può <img>
contenere informazioni aggiuntive <p>Testo</p>

 Un tag può contenere altre informazioni, e <p>Testo <em>in
quindi eventuali altri tag al suo interno corsivo</em></p>

 Un tag aperto non deve essere necessariamente chiuso


Elementi essenziali

<html> … </html>
Contenitore principale che racchiude il contenuto della pagina

10
<head> … </head>
Contenitore le informazioni da trasmettere al browser
<title> … </title>
Indica al browser cosa scrivere sulla barra del titolo.
<body> … </body>
Contiene il documento che verrà renderizzato dal browser


Le entità
In dipendenza della codifica della pagina potremmo
avere specifiche entità.
Tuttavia tutti i browser implementano quei i riservati al

11
markup ( <, >, ", ', & ).
In base alla codifica le entità disponibili nella pagina
possono variare:
http://www.w3schools.com/tags/ref_entities.asp e
http://www.w3schools.com/tags/ref_symbols.asp

HTML4.01
Direttiva: indica che si specifica la definizione del tipo di documento

Specifica pubblica (distribuzione pubblica) altrimenti
potrebbe essere SYSTEM.

12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Identificatore: quando la specifica è pubblica
questa informazione risulta obbligatoria e ne
descrive il nome pubblico della DTD

La presenza di un URL indica che si tratta di una DTD esterna


Elementi dell'HTML
Gli elementi (o tag) dell'HTML
definiscono la struttura di una parte del
documento.
Gli elementi si suddividono in:
Block-level
Inline
13

Elementi Block-level
Possono contenere testo o elementi di
tipo

14
Block-level
Inline
Alcuni elementi di tipo block level:
body, div, blockquote

Elementi inline

Possono contenere testo e solo elementi

15
di tipo Inline.
Alcuni elementi di tipo inline level:
a, span, em, strong, q, img


Gli attributi

Ciascun tag ha una serie di
caratteristiche (attributi) che ne

16
descrivono l'aspetto semantico,
rappresentativo e lo stato. Altri
consentono di gestire gli eventi
legati allo specifico elemento.

Attributi semantici

Attributi che aiutano l'uomo o la
tecnologia nella corretta comprensione e
identificazione dell'elemento:

alt, longdesc, title, for, lang …
17

Attributi presentazionali
Attributi che alterano l'aspetto
estetico* dell'elemento:

border, backcolor, background,
forecolor, align …

*Solo nelle DTD di tipo Transitional
18

Attributi di stato

Speciali attributi che descrivono
lo stato dell'elemento in un
preciso istante:

checked, selected, readonly, disabled
19

Attributi per gli eventi

Attributi che consentono di programmare il
comportamento della pagina, dell'elemento
o di eseguire determinate azioni al verificarsi

20
di un preciso evento:
onclick, onfocus, onblur …
Attenzione! Questi attributi violano i principi di accessibilità della pagina
(Dlgs 4/2004) se non si prevede un comportamento analogo in caso di
disattivazione del JavaScript.

Specifiche di HTML 4.01

Documentazione
Ufficiale: http://www.w3.org/TR/html401/

21
Trad. italiana: http://www.diodati.org/w3c/html401/cover.html

DTD
Ufficiale: http://www.w3.org/TR/html401/sgml/dtd.html
Trad. italiana: http://www.diodati.org/w3c/html401/sgml/dtd.html


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

22
commento strutturati in modo particolare:

… e per tutti gli altri?
Secondo Microsoft per servire delle parti di HTML
a tutti browser ad eccezione di IE è necessario

23
utilizzare la seguente sintassi:
<![if !IE]> … <![endif]>

Ma il markup diventerà invalido... Soluzione?
 …

Codici condizionali di IE
Operatore Descrizione
IE Identifica Internet Explorer o se seguito da un numero è
un vettore di versionamento
lt “Less Than” = Minore Di

24
lte “Less Than Equal” = Minore o uguale a
gt “Greater Than” = Maggiore di
gte “Greater Than Equal” = Maggiore o uguale a
! Negazione (NOT)
&,| Operatori And e Or
() Raggruppamento di sottoespressioni
True, False Costanti booleane Vero Falso


Introdurre l'XML

<?xml version="1.0" encoding="utf-8"?>
 Tutti i browser interpretano correttamente XML

25
(servito come application/xml)
 A Internet Explorer (fino alla versione 8) bisogna
servire il contenuto come text/html.
 Internet Explorer dalla versione 9 supporta XML con
il corretto mime-type.


La sintassi XML
 XML = eXtensible Markup Language
 XML è più rigoroso: ogni tag aperto deve essere
necessariamente chiuso

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

Il dialetto XHTML
 XHTML = eXtensible HyperText Markup Language
 È una grammatica XML per descrivere documenti HTML
 Esistono diverse versioni di questo dialetto, tra cui:

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

Alcune grammatiche di XHTML
Frameset , frame
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC noframes, ecc...
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

elementi inline

28
XHTML 1.0 Transitional nel body, alcuni
<!DOCTYPE html PUBLIC attributi(es. name,
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> bgcolor,align, target)

XHTML 1.0 Strict Focalizzato sullo scopo di
<!DOCTYPE html PUBLIC ciascun elemento e non su
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> come esso appare!


XHTML come una matrioska
<?xml version="1.0" encodin="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ciao mondo!</title>
</head>

29
<body>
<div>
<h1>Questo è il titolo di primo livello</h1>
<p>
Paragrafo 1
</p>
<div>
Sottocontenuto della prima sezione
</div>
</div>
…
<body>
</html>


La struttura di un documento
Le informazioni contenute in un documento
HTML/XHTML sono (o possono essere) rivolte a tre
diversi fruitori (target della pagina):

 Utente

 Browser

 Motore di ricerca
30

Strutturare l'header
Elementi che aiutano a strutturare un buon header:
 La codifica della pagina ( UTF-8, UTF-16 …)
 Indicare un titolo (es. <title>Titolo della pagina</title>)

31
 Una FavIcon
 È buona prassi inserire l'autore della pagina
 Indicazioni sulla lingua del documento
 Indicazioni sui contenuti della pagina
 Indicare la durata, parole chiave e descrizione del documento


Strutturare il documento
Significa progettare un documento di testo con i corretti
accorgimenti.
Ciascun capitolo di un libro viene identificato da un numero di

32
capitolo formattato secondo un preciso stile (un intestazione di
secondo livello) mentre il titolo di un libro corrisponde 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 è un buon sito.

Suddividere una pagina

Intestazione
Esistono diverse
varianti di una

33
Corpo rappresentazione
comunque
sintetizzata in
Piè di pagina questo schema


Suddividere una pagina
Una pagina web è tipicamente progettata con le seguenti sezioni:
 Intestazione
 Logo e altre informazioni primarie

34
 Corpo
 Contenuti generali (con struttura che tipicamente va da 1 a 4
colonne)
 Piè di pagina
 Recapiti aziendali copyright e Partita IVA


Back to the future: HTML 5
Il “W3C HTML Working Group” dal 2004 (prima si era
costituito il WHATWG non facente parte del W3C) sta
lavorando alle nuove specifiche denominate HTML 5.

35
Pro: molto più orientato al “Web 2.0” e alle applicazioni
basate su Web

Contro: finquando i vari browser non adotteranno la
specifica avremo da occuparci della retrocompatibilità

Alcuni particolari di HTML 5
● Il namespace: <!DOCTYPE HTML>

● Nuovi elementi più semantici: nav, header,
footer, figure

36
● Nuove caratteristiche per gli elementi di un form:
required, placeholder

● contemplati nuovi type: email, tel, number,
date, url

Elemento HEADER

L'elemento header rappresenta una

37
sezione di introduzione o di supporto alla

navigazione.


Elemento FOOTER
L'elemento footer rappresenta la parte inferiore della

sezione in cui è situato. footer, solitamente, contiene

38
informazioni inerenti la sua sezione come, per esempio, chi ha

scritto un articolo, collegamenti a documenti correlati, dati di

copyright e simili.

Elemento ASIDE

L'elemento aside rappresenta la parte della pagina,

contenente del testo ed affiancata ai contenuti principali

39
del sito, separato dai contenuti stessi. Tale sezione è da

considerarsi come una barra laterale nella pagina web.


Elemento NAV
L'elemento nav rappresenta la sezione di una pagina dalla quale è possibile
accedere ad altre pagine oppure a link àncora all'interno dello stesso
documento: una sezione con link di navigazione (per esempio l'indice di una

40
pagina di un Wiki).

Non tutti i link del documento dovranno essere necessariamente inclusi in un
elemento nav ma bisogna ricordare che la semantica di questo elemento
descrive proprio un contenitore di link per la navigazione primaria.


HTML5 per tutti
L'attuale problema di HTML5 è di non essere supportato da tutti i
browser. Tuttavia esistono diverse soluzioni che ci consentono di
implementare le nostre pagine in HTML5 e garantirci una

41
rappresentazione quasi equivalente riproducendo buona parte delle
regole definite per il nuovo markup.
Per Internet Explorer:
http://remysharp.com/downloads/html5.js
Per Firefox 2:
http://blog.whatwg.org/supporting-new-elements-in-firefox-2


XHTML 2.0… sogno di una notte di mezza estate

Nella calda estate del 2009 il W3C ha decretato la chiusura del gruppo
di lavoro che si era dedicato alla definizione delle specifiche di
XHTML 2. Tra gli italiani del gruppo c'era Alessio Cartocci.

42
Lo scopo ufficiale è stato di veicolare tutte le risorse verso HTML5.

XHTML è una serializzazione XML della sintassi HTML pertanto
deve seguire e implementare le specifiche HTML con le regole
imposte da XML.

Il futuro è in HTML5 o, nella versione XML, XHTML 5!


I linguaggi del web - seconda edizione (1° giornata)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to I linguaggi del web - seconda edizione (1° giornata)

Similar to I linguaggi del web - seconda edizione (1° giornata) (20)

More from Diego La Monica

More from Diego La Monica (20)

I linguaggi del web - seconda edizione (1° giornata)