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!

Struttura ad albero

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

Relazioni tra nodi

tag

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

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!

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)

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:

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 …

… e l’HTML corrispondente

Selezione per id


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


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

Selezione di gruppo


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

Selezioni per annidamento


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

Pseudo Selettori


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

HTML con CSS definito esternamente

Cascading

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

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

  1. Diamo dimensione ai font
  2. Liste & CSS
  3. Margin
  4. Padding

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:

  1. Box Shadow
  2. Box Sizing
  3. Multi Columns
  4. Border Radius
  5. RGBA Colors
  6. Text Shadow
  7. Font Face
  8. Transform
  9. Gradients

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

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

Cosa fa questo esempio?

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

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

Guarda l'esempio nell'editor

SVG: un esempio

Guarda l'esempio nell'editor

XHTML + SVG: un esempio

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

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

Guarda l'esempio nell'editor

Copyright (C) 2010 - Alca Società Cooperativa

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

released under CreativeCommons 2.5 by-nc-sa