Use the left/right arrow keys to navigate, 's' to enable/disable scrolling.

(X)HMTL, CSS e XML

Obiettivi della lezione

Conoscere

le basi di HTML
le basi di CSS
le basi di XML
la separazione tra aspetto e contenuto
le principali differenze tra HTML e XHTML

Sapere

costruire un semplice documento HTML
costruire un foglio di stile associato ad un documento HTML
costruire un documento XML
costruire un documento XHTML

Cos’è l’HTML?

HyperText Markup Language
è un linguaggio per la definizione di documenti ipertestuali
è composto da nodi identificati da un insieme di etichette (tag)
ha una struttura ad albero

Ciao web!

1<html>
2  <head>
3    <title>Ciao Web!</title>
4  </head>
5  <body>
6    <p>Il mio primo paragrafo HTML!</p>
7  </body>
8</html>

Struttura ad albero

Relazioni tra nodi

La struttura ad albero è una struttura gerarchica
I nodi sono legati da relazioni di parentela
Un nodo contenuto in un altro nodo si dice nodo figlio (_child node_)
Un nodo contenitore di altri nodi si dice nodo genitore (_parent node_)
Il nodo che contiene tutti i nodi del documento HTML si dice radice (_root node_)
I nodi appartenenti allo stesso genitore si dicono nodi fratelli (_siblings_)

Relazioni tra nodi

tag

sono l’elemento fondamentale di un documento HTML
la sintassi base di un tag:

`1`	`<nometag>`

tag

l’insieme dei tag HTML è definito da uno standard (W3C)
molti tag possono contenerne altri
ad ogni tag aperto deve corrisponderne uno di chiusura!

1<p>
2linea1<br>
3linea2
4</p>

Attributi di un tag

ogni tag può avere diversi attributi per meglio definirne le caratteristiche
la sintassi base di un attributo: nome_attributo=”valore_attributo”
gli attributi di un tag sono un insieme di coppie chiave/valore
gli attributi sono contenuti all’interno di un tag (aperto)

1<p>
2  Some random text... <img src="imageurl.png">
3  Some other text
4</p>

Debugging: Cos’è?

Un insieme di tecniche e procedure utili necessarie a scovare e correggere gli errori (_bug_) all’interno di un programma
Nessun software è esente da bug!
Gli strumenti utili al debugging sono genericamente denominati debugger
Nelle prossime slide introdurremo un debugger per HTML, CSS, Javascript

Firebug

E’ un’estensione Firefox utile per il debugging di HTML, CSS, Javascript
Consente di ispezionare e navigare il documento HTML (e modificarne il CSS)
In seguito sarà fondamentale per scovare gli errori (_bug_) nel codice Javascript

FIREBUG

Firebug: Installazione

A portata di click!

Mozilla Firefox + Firebug

Mozilla Firefox e Firebug sono due tool FONDAMENTALI per lo sviluppo web!

Esercizio: Creazione di un documento HTML

Riproducete il seguente documento HTML utilizzando un editor di testi:

1<html>
2  <head>
3    <title>Ciao Web!</title>
4  </head>
5  <body>
6    <h1>Titolo</h1>
7    <p>Il mio primo paragrafo HTML!</p>
8  </body>
9</html>

Firebug: Modificare l’HTML al volo!

Firebug permette di modificare il documento HTML ispezionato senza necessità di ricaricamento
E’ sufficiente entrare nella modalità HTML e cliccare sul nodo che si vuole modificare
La modifica verrà visualizzata dopo aver premuto INVIO

CSS: HTML ma con STILE

Cascading Style Sheets

Fogli di Stile a Cascata

mentre mediante HTML è possibile definire i contenuti e la struttura di un documento

con i CSS è possibile applicare a tale documento degli stili

colore dei caratteri e dello sfondo (color, background …)
tipo e dimensione del font (font-family, font-size …)
margini e riempimento (margin e padding)

In passato HTML prevedeva degli appositi tag e attributi di styling ma

questo ha rappresentato rapidamente

un grosso problema

poichè per modificare l’aspetto era necessario editare il documento e

spesso l’applicazione di stili arrivava a cambiare la struttura stessa del documento

I tag di stile sono di conseguenza stati

DEPRECATED

DEPRECATI

CSS Rule (regola)

CSS RULE

CSS Selector (selettore)

regola di selezione dei nodi di un documento HTML di cui si vuole modificare lo stile

CSS Property (proprietà)

proprietà (dei nodi HTML selezionati) di cui si vuole cambiare il valore

ATTENZIONE

CSS Property !== Tag Attribute

Un esempio di CSS …

01.warning {
02  background-color: red;
03  color: black;
04}
05 
06#sidebar, #footer {
07  font-size: 8pt;
08  margin-right: 20px;
09}
10 
11 
12#sidebar a:hover {
13  background-color: yellow;
14}

… e l’HTML corrispondente

1<div id="sidebar">
2  <a href="http://learn.alcacoop.it">Link text</a>
3  <span class="warning">warning message</span>
4</div>
5 
6<div id="footer" class="warning">random text</div>

Selezione per id

`1`	`#sidebar {...}`

l’id associato ad un nodo deve essere unico all’interno del documento… ma il browser non effettua nessun controllo sull’unicità di tale identificativo

la presenza di più nodi con il medesimo id può generare problemi di rendering o interazione

Selezione per classe

`1`	`.warning {...}`

consente di selezione un gruppo di nodi attraverso una delle classi associate

Selezione di gruppo

`1`	`#sidebar, #footer {...}`

consente di associare lo stesso corpo di configurazione CSS ad un insieme di selettori

Selezioni per annidamento

`1`	`#sidebar a {...}`

consente di selezionare dei nodi sulla base della loro posizione all’interno della struttura ad albero di un documento HTML

Pseudo Selettori

`1`	`a:hover {...}`

ricoprono selezioni non rappresentabili altrimenti come la selezione dei link visitati (pseudo classes) o la selezione di elementi non rappresentati da elementi HTML veri e propri (pseudo elements), come ‘first-letter’ o ‘first-line’

HTML con CSS definito internamente

01<html>
02  <head>
03    <title>example</title>
04    <style>
05       .warning {
06         background-color: red;
07           color: black;
08       }
09 
10       #sidebar, #footer {
11         font-size: 8pt;
12         margin-right: 20px;
13             }
14 
15       #sidebar a:hover {
16         background-color: yellow;
17       }
18     </style>
19  </head>
20  <body>
21    <div id="sidebar">
22      <a href="http://learn.alcacoop.it">Link text</a>
23      <span class="warning">warning message</span>
24    </div>
25    <div id="footer" class="warning">random text</div>
26  </body>
27</html>

HTML con CSS definito esternamente

01<html>
02  <head>
03     <title>example</title>
04         <link rel="stylesheet" type="text/css" href="test.css">
05    </head>
06    <body>
07      <div id="sidebar">
08      <a href="http://learn.alcacoop.it">Link text</a>
09      <span class="warning">warning message</span>
10    </div>
11    <div id="footer" class="warning">random text</div>
12  </body>
13</html>

Cascading

Spesso il cascading è la principale causa di gran mal di testa…

grazie a Firebug è possibile:

modificare il foglio di stile al volo per valutarne l’impatto

o per risalire alla regola CSS che ha applicato un determinato stile

HTML: un po’ di esempi… (1/2)

HTML: un po’ di esempi… (2/2)

CSS: un po’ di esempi… (1/2)

CSS: un po’ di esempi… (2/2)

CSS e il layouting…

CSS… Frameworks

Anche se CSS non è in realtà un linguaggio di programmazione, sono nati recentemente dei Framework che semplificano la creazione di design web che utilizzino le moderne tecniche di layouting e styling mediante CSS definendo una serie di classi CSS pronte per l’uso.

http://en.wikipedia.org/wiki/CSS_framework

http://atatonic.timbenniks.nl/about.html

http://www.blueprintcss.org

http://elasticss.com

http://www.yaml.de/en/

http://baselinecss.com

CSS Framework… un esempio

Layouting con Atatonic CSS Framework

CSS3 by examples

Tra le nuove caratteristiche di CSS3 che i browser iniziano a supportare abbiamo:

CSS3 Links

http://css3generator.com

http://css3please.com

http://gradients.glrzad.com

http://svay.com/experiences/css3-spotlight

http://www.css3.info/preview

css3 slicky menu

where-to-get-web-fonts

webfonts.info

Cos'è XML?

eXstensible Markup Language
un linguaggio di markup simile all’HTML
un formato di testo semplice e flessibile
derivato dall’SGML

Perchè XML?

studiato per trasportare e memorizzare dati, non per visualizzarli
progettato per essere auto-descrittivo
è uno standard del Web promosso e messo a punto dalla W3C
…facile da imparare!

XML ed HTML hanno diversi obiettivi

E' importante capire che XML non è un sostituto dell'HTML

XML non è nulla di speciale, è solo plain text!

qualunque software che possa gestire plain text può anche gestire XML
ogni applicazione definisce in autonomia il significato dei propri tag XML

La struttura ed i tag di un documento XML non sono predefiniti ma vengono inventati dall’autore del documento

Tree structure

1<root>
2  <child>
3    <subchild>.....</subchild>
4  </child>
5</root>

Un po' di terminologia

elemento (element)
contenuto ed attributi (content and attributes)
radice (root)
genitore (parent)
figlio (child)
fratelli (siblings)

Ma se i tag sono liberi, cosa ha realmente regolamentato la W3C?

Regole sintattiche

Tutti gli elementi devono essere chiusi
XML fa differenza tra maiuscole e minuscole (case sensitive)
Gli elementi XML devono essere aperti e chiusi con l’ordine corretto
I documenti XML devono avere un elemento root
I valori degli attributi di un elemento XML devono sempre essere racchiusi tra apici (quoted)

XML: un esempio

1<?xml version="1.0" encoding="ISO-8859-1"?>
2<note>
3  <to>Tove</to>
4  <from>Jani</from>
5  <heading>Reminder</heading>
6  <body>Don't forget me this weekend!</body>
7  <attachment type="gif">computer.gif</attachment>
8</note>

Cosa fa questo esempio?

NULLA!!

[Guarda l'esempio nell'editor]

Un documento XML di suo non fa niente

è puramente descrittivo
necessita di codice che ne consenta l’interpretazione e successiva manipolazione (es: invio, ricezione, visualizzazione dati, etc.)

Se ogni applicazione definisce il proprio dialetto XML…

come possiamo riconoscere il particolare dialetto utilizzato da un documento XML?

come possiamo far convivere diversi dialetti all’interno dello stesso documento?

I namespace

vengono utilizzati per evitare conflitti sui tag XML

Namespace: un esempio

01<root xmlns="http://alcacoop.it/randomdata/">
02<h:table xmlns:h="http://www.w3.org/TR/html4/">
03  <h:tr>
04    <h:td>Apples</h:td>
05    <h:td>Bananas</h:td>
06  </h:tr>
07</h:table>
08<f:table xmlns:f="http://www.w3schools.com/furniture">
09  <f:name>African Coffee Table</f:name>
10  <f:width>80</f:width>
11  <f:length>120</f:length>
12</f:table>
13</root>

Guarda l'esempio nell'editor

HTML + XML = XHTML

Vantaggi dell’XHTML rispetto all’HTML

Possibilità di mescolare più dialetti XML all’interno dello stesso documento XHTML:

XHTML + SVG

XHTML + MathML

XHTML + XML

Svantaggi dell’XHTML rispetto all’HTML

Maggiore verbosità

Maggiore sensibilità rispetto agli errori

Un documento XHMTL deve essere un

documento XML ben formato

XHTML: un esempio

01<?xml version="1.0" encoding="UTF-8"?>
02<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04  <head>
05    <title>Title goes here</title>
06  </head>
07 
08  <body>
09    Body content!
10  </body>
11</html>

Guarda l'esempio nell'editor

SVG: un esempio

01<?xml version="1.0" standalone="no"?>
02 
03<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
04  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
05 
06<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
07 
08  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
09 
10</svg> 

Guarda l'esempio nell'editor

XHTML + SVG: un esempio

01<?xml version="1.0" encoding="UTF-8"?>
02<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04  <head>
05    <title>Title goes here</title>
06  </head>
07 
08  <body>
09    <h1>XHTML + SVG: un esempio</h1>
10 
11    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
12      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
13    </svg>
14  </body>
15</html>

Guarda l'esempio nell'editor

Esercizio n.1

Costruire un documento XML che rappresenti struttura e contenuto di un messaggio di posta elettronica

Esercizio n.1

1<?xml version="1.0" encoding="ISO-8859-1"?>
2 
3  <mail>
4    <to>Jack</to>
5    <from>Davide</from>
6    <subject>NOT PENNY'S BOAT</subject>
7    <message>Corpo del messaggio di posta inviato</message>
8  </mail>

Guarda l'esempio nell'editor

Esercizio n.2

Costruire un documento XML che rappresenti struttura e contenuto di un archivio di file musicali

Esercizio n.2

01<?xml version="1.0" encoding="ISO-8859-1"?>
02<mymusic> 
03  <track> 
04    <title>Revolution</title> 
05    <artist>Bob Marley & The Wailers</artist> 
06    <album>Natty Dread</album>
07    <genre>Reggae</genre>
08    <length>4.24</length> 
09    <year>1978</year> 
10  </track>
11  <track> 
12    <title>Silver and Gold</title> 
13    <artist>Joe Strummer</artist> 
14    <album>Streetcore</album>
15    <genre>Rock</genre>
16    <length>4.56</length> 
17    <year>2003</year>
18  </track>
19</mymusic>

Guarda l'esempio nell'editor

XML, approfondimenti…

http://learn.alcacoop.it - learn@alcacoop.it

released under CreativeCommons 2.5 by-nc-sa