Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

 Concetti di base: linguaggi markup, un minimo di storia
 HTML5 (+ DOM) + CSS3 + JavaScript: il quadro generale
 Minima introduzione su HMTL
 Minima introduzione su CSS
 Minima introduzione su DOM
 Considerazioni varie
 Cosa c’è di nuovo in HTML5?
 Looking forward: JavaScript

 Linguaggio di programmazione: utilizzato per comunicare istruzioni a
una macchina di calcolo, per definire programmi che controllino il
comportamento di un calcolatore
 Linguaggio di markup: utilizzato per annotare un documento in modo
tale che l'annotazione sia sintatticamente distinguibile dal testo
 Esempi di linguaggi di markup:
 TeX (e LaTeX)
 SGML
 HTML, XHTML, XML
 Le annotazioni possono avere diverse finalità:
 di presentazione (definiscono come visualizzare il testo al quale sono
associate)
 procedurali (definiscono istruzioni per programmi che elaborino il testo al
quale sono associate)
 descrittive (etichettano semplicemente parti del testo, disaccoppiando la
struttura dalla presentazione del testo stesso)

http://visual.ly/html5-past-present-and-future
Dal web degli
autori di pagine
HTML scritte a
mano…
… al web delle
pagine HTML
generate da
programmi
(sistemi di
gestione di blog o
CMS)

 Cos’è l’HTML?
 HTML (Hyper Text Markup Language) è un linguaggio di
markup per dare struttura ai contenuti (web)
 La specifica HTML è definita dal W3C (World Wide Web
Consortium)

whichElement?
Trying to answer that age old
question:
Should that be a div, a span, or
something else?
Home
Contribute
About
One of the main challenges we see in
building semantic content is picking
what tag to use when.
Esempio da: http://www.slideshare.net/tpryan/introduction-to-html5-11711719

<h1>whichElement?</h1>
<h2>Trying to answer that age old
question:</h2>
<h2>Should that be a div, a span, or
something else?</h2>
<ul>
<li>Home</li>
<li>Contribute</li>
<li>About</li>
</ul>
<p>One of the main challenges we see in
building semantic content is picking what
tag to use when. This site seeks to help with
that. Now, before we get all judgy and
preachy let me get a few tenants out
there:</p>

 Cosa si intende per CSS?
 CSS (Cascading Style Sheets) è un linguaggio per dare uno
stile (di presentazione/visuale) ai contenuti (web)
 La specifica dei CSS è definita dal W3C

 Cosa si intende per DOM?
 DOM (Document Object Model) è una interfaccia neutrale
rispetto al linguaggio di programmazione e alla piattaforma
utilizzata per consentire ai programmi l’accesso e la modifica
dinamica di contenuto, struttura e stile di un documento (web)
 DOM è una API definita dal W3C (e implementata da ogni
browser moderno) per l’accesso e la gestione dinamica di
documenti XML e HTML

<html>
<head>
<title>Example ...</title>
<meta charset="UTF-8">
<meta name="author" content="John Doe">
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

 Ogni nodo può essere caratterizzato da
attributi che ne facilitano
l’identificazione, la ricerca, la selezione
 Un identificatore univoco (attenzione: il
DOM non garantisce l’unicità)
 Una “classe” che indica l’appartenenza ad
un insieme che ci è utile definire
 Il browser stesso fornisce funzionalità di
ricerca:
 getElementById(IdName)
 getElementsByClassName(ClassName)
 … diverse altre meno interessanti
<h1>A One Page FAQ</h1>
<div id=”introText">
<p>bla bla bla</p>
</div>
<h2>I've heard that JavaScript is the
long-lost fountain of youth. Is this
true?</h2>
<div class="answer">
<p>bla bla bla</p>
</div>
<h2>Can JavaScript really solve all of
my problems?</h2>
<div class="answer”>
<bla bla bla</p>
</div>

<p id="foo">
This is a paragraph of text with a
<a href="/path/to/page.html">link</a>
.
</p>

Se volessimo cambiare lo stile di un singolo paragrafo? O
tutti paragrafi di una certa classe?
Possiamo specificare un selettore più preciso rispetto al
nome del tag, per esempio specificando il nome di una
classe o un identificatore di elemento del DOM:
p.intro {
color: red;
}
Questo stile sarà applicato solo ai tag di classe intro
<p class="intro">

I principali selettori sono
● tag name: il semplice nome del tag
o p { ... } //affects to all <p> tags
● dot (.): applicabile a un tag, indica una classe
o p.highlight { ... } //affects all <p> tags with class="highlight"
● sharp character (#): applicabile a un tag, indica un
identificativo
o p#intro { ... } //affects to the <p> tag with the id="intro"
● two dots (:): stati comportamentali (ad esempio evento
mouseover)
o p:hover { ... } //affects to <p> tags with the mouse over
● brackets ([attr='value']): tag con un valore specifico per un
attributo 'value'
o input[type="text"] {...} // affects to the input tags of the type text

 Le media query possono essere
viste come particolari selettori
capaci di valutare le capacità
del device di accesso alla pagina
 Non solo schermi, anche
stampanti o sistemi text-to-
speech!
 Si possono controllare ad
esempio:
 Larghezza e altezza (width,
height) del device o della finestra
 Orientamento dello schemo
(landscape/portrait)
 Risoluzione
 Se la pagina è più larga di 480
pixel (e si sta visualizzando
sullo schermo), applica
determinati stili agli elementi
con id “leftsidebar” (un menu)
e “main” (la colonna centrale)
@media screen and (min-width: 480px){
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}

 Esistono potenzialmente diversi stylesheet:
 L’autore della pagina in genere ne specifica uno (il modo più
comunemente inteso) o più d’uno
 Il browser ne ha uno, o un vero e proprio CSS o simulato nel loro codice
 Il lettore, l’utente del browser, ne può definire uno proprio per
customizzare la propria esperienza
 Dei conflitti sono quindi possibili (inevitabili), ed è necessario
definire un algoritmo per decidere quale stile vada applicato a un
elemento
 Non entriamo nel dettaglio, ma la priorità tiene conto, in ordine di
importanza, dei seguenti fattori associati alle regole:
 Importanza (flag specifico !important per un attributo)
 Specificità (per esempio, id > class > tag)
 Ordine nel sorgente (lo più “recente” vince)

 L’impostazione di HTML e CSS separa nettamente il
contenuto dalla modalità di visualizzazione
 Ricordo che quello di “separation of concerns” è un principio di
design altamente desiderabile in contesto informatico
 Purtroppo lo stile invece può avere un forte coupling con il
contenuto, come risulta dagli esempi precedenti
 Il browser non è solamente un banale visualizzatore di pagine
scritte in HTML, è un vero e proprio ambiente di sviluppo (in
particolare contiene un interprete Javascript e vari strumenti
di debug, ma ne parleremo più avanti) che fornisce numerose
funzionalità abilitanti

 Non ho senso estetico, non ho
voglia / tempo di definire un
CSS decente (che peraltro è un
lavoro non banale) come posso
fare?
 Esistono numerosi “front-end
framework”, dai più sofisticati ai
più semplici, naturalmente open
source, ad esempio:
 Bootstrap
(http://getbootstrap.com)
 Foundation
(http://foundation.zurb.com)
 Skeleton (http://getskeleton.com)

 Nuovi elementi semantici per la strutturazione delle pagine
 article, section, aside, header, footer, etc
 Nuovi elementi di input e multimediali
 Widget per input search, email, url, number, tel, ma anche range,
date…
 … purtroppo supporto non uniforme da tutti i browser
 audio, video, canvas
 Nuove API JavaScript per la manipolazione delle pagine
 Offline data, drag and drop, web storage
 Chiariamo brevemente cosa si intende per semantica in HTML5 e
facciamo qualche esempio di widget per l’input

 Parleremo di web semantico nella seconda parte del corso qui intendiamo un
utilizzo sensato e comprensibile dei tag HTML
 Esempi di usi sensati:
 <p> per definire un paragrafo
 <ul> per definire una lista di elementi il cui ordine non è importante
 <address> per indicare informazioni relative a un indirizzo
 <div> e <span> per contenere informazione che si vuole delimitare per qualche motivo
(successive manipolazioni)
 Esempi di usi non ragionevoli rispetto alla semantica dei tag:
 <p> per andare a capo
 <blockquote> per gestire l’indantazione
 <h1> per ingrandire del testo
 L’HTML dovrebbe non contenere informazione di presentazione, riservata ai
CSS
 Nessun tag <font>, <b>, <i>
 No a utilizzo di stili definiti “in linea”

<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">Awesome is a State of Mind</p>
</div>
<header>
<h1>The Awesome Blog of Awesome</h1>
<h2>Awesome is a State of Mind</h2>
</header>
 HTML 5
 Prima...
Analogamente
esiste un tag footer

<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
 Prima  HTML 5

<div class="post”>
<div class="postheader">
<h3><a href="">I Scream My Thoughts</a></h3>
<p class="date">August 10, 2011</p>
</div>
<p>You probably haven't heard of them duis</p>
</div>
<article>
<header>
<h1><a href="">I Scream My Thoughts</a></h1>
<time>August 10, 2011</time>
</header>
<p>You probably haven't heard of them duis </p>
</article>
 Prima  HTML5

<div class=”content”>
...
</div>
...
</div>
...
</div>
</div>
<section>
<article>
...
</article>
<article>
...
</article>
<article>
...
<article>
</section>
 Prima  HTML5
Nota: questo è un suggerimento,
non una prescrizione dura. In
particolare, nulla vieta di avere
delle sezioni all’interno di un
articolo stesso…
https://www.w3schools.com/html/h
tml5_semantic_elements.asp

…
</div>
</div>
</div>
<div id=“footer”>
</div>
</body>
…
</div>
</article>
</section>
<footer>
</footer>
</body>
 Prima di questi tag, la chiusura
della pagina appariva così:
 Con i nuovi tag HTML5 è più
leggibile:
In generale, a parte essere una notazione più concisa e che richiede
meno definizioni di classi, le gerarchie di contenuti più leggibili e
analizzabili in fase di progettazione, manutenzione e debug

• Supporto non uniforme…
• I diversi browser tendono a customizzare
l’aspetto del box
<input type=“search” name=“search” />

• Fornisce una forma di validazione del dato inserito
• Forza la tastiera specifica per l’email su dispositivi iOS
<input type=“email” name=“email” />

• Fornisce una forma di validazione del dato inserito
• Nei diversi browser presenta apparenze
diverse
<input type=“date” name=“dob” />

 Abbiamo capito cosa sono HTML, CSS e DOM…
 … che ci forniscono il necessario per definire contenuti (web), loro stuttura
(comprese regole di accesso e modifica), stile grafico
 Per approfondimenti specifici ed esempi:
 https://www.w3.org/Style/Examples/011/firstcss.en.html
 https://www.w3schools.com
 https://www.tutorialspoint.com/css/
 Manca il modo di definire e governare la dinamicità della pagina, il modo
della pagina di cambiare in modo reattivo al comportamento dell’utente o
anche proattivo, senza necessariamente dover attendere uno stimolo
dall’utente
 Javascript è il linguaggio di scripting che svolge questa funzione, ne
parleremo più avanti in esercitazioni dedicate
 Domande su questa parte sono previste tanto nel compitino quanto negli
scritti successivi

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

Similar to Breve introduzione alle tecnologie HTML5 + (DOM) + CSS (20)

More from Giuseppe Vizzari

More from Giuseppe Vizzari (16)

Recently uploaded

Recently uploaded (10)

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS