Dott.Ing.Ivan Ferrazzi
HTML5
Introduzione
ai
concetti base
Dott. Ing. Ivan Ferrazzi
V1.2 del 30/05/2014
1/31
Dott.Ing.Ivan Ferrazzi
Copyright ©2013 Dott.Ing. Ivan Ferrazzi
Permission is granted to copy, distribute and/or modify this
document under the terms of the GNU Free Documentation
License, Version 1.2 or any later version published by the
Free Software Foundation; with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts.
2/31
Dott.Ing.Ivan Ferrazzi
Indice generale
INTRODUZIONE....................................................................................................5
Semplificazione del DOCTYPE..........................................................................5
Omissione dei tag............................................................................................5
La sintassi dei tag............................................................................................6
La sintassi degli attributi..................................................................................6
Blocchi style e script........................................................................................6
Tag ed attributi deprecati................................................................................6
IL NUOVO CONTENT MODEL................................................................................8
Tag per definire le sezioni ...............................................................................8
Il tag <header>............................................................................................................................8
Il tag <footer>.............................................................................................................................9
Il tag <section>............................................................................................................................9
Il tag <nav>.................................................................................................................................9
Il tag <article>.............................................................................................................................9
Il tag <aside>.............................................................................................................................10
Tag per definire i titoli...................................................................................10
I tag dei titoli <h1>...<h6>........................................................................................................10
Tag aggiuntivi................................................................................................10
Il tag <mark>.............................................................................................................................10
I tag <figure> e <figcaption>....................................................................................................10
Il tag <datalist>.........................................................................................................................11
Il tag <meter>............................................................................................................................11
Il tag <progress>.......................................................................................................................11
I NUOVI ATTRIBUTI.............................................................................................13
L'attributo autofocus......................................................................................13
L'attributo placeholder...................................................................................13
L'attributo form..............................................................................................14
L'attributo required........................................................................................14
L'attributo pattern..........................................................................................14
L'attributo contenteditable............................................................................14
L'attributo hidden..........................................................................................15
L'attributo spellcheck.....................................................................................15
I NUOVI TIPI DI INPUT........................................................................................16
type=”tel”.....................................................................................................16
type=”search”...............................................................................................16
type=”url”.....................................................................................................17
type=”email”.................................................................................................17
type=”range”................................................................................................17
I CANVAS...........................................................................................................18
Le proprietà e i metodi per i canvas..............................................................19
Stile di riempimento con fillStyle.............................................................................................19
Riempimento graduale..............................................................................................................19
Riempimento a pattern..............................................................................................................20
Disegnare percorsi.....................................................................................................................21
Disegnare tratti curvi.................................................................................................................21
Disegnare testo..........................................................................................................................22
Posizionare un'immagine..........................................................................................................22
3/31
Dott.Ing.Ivan Ferrazzi
SCALABLE VECTOR GRAPHICS (SVG).................................................................24
Le principali figure geometriche....................................................................25
La linea......................................................................................................................................26
Il tracciato..................................................................................................................................26
Il cerchio....................................................................................................................................26
Il poligono.................................................................................................................................26
Il rettangolo...............................................................................................................................26
L'ellisse......................................................................................................................................27
Il percorso..................................................................................................................................27
Il testo............................................................................................................28
Posizionamento assoluto...........................................................................................................28
Posizionamento relativo............................................................................................................28
Attributi per <text> e <tspan>..................................................................................................28
Testo lungo un percorso ...........................................................................................................29
Le immagini...................................................................................................29
TAG MULTIMEDIALI............................................................................................30
File video.......................................................................................................30
File audio.......................................................................................................31
4/31
Dott.Ing.Ivan Ferrazzi
INTRODUZIONE
Sempre più browser stanno cercando di soddisfare le direttive del HTML5.
Questo tutorial vi aiuterà a capire i concetti base. Prima di iniziare con il codice
vediamo quali sono le definizioni da un punto di vista di sintassi del codice.
Semplificazione del DOCTYPE.
Per definire il tipo di documento come HTML5 scriviamo semplicemente:
<!DOCTYPE html>
Omissione dei tag.
In HTML5 possiamo, in alcuni casi, non indicare dei tag. Questo è possibile nel
caso in cui il browser sia in grado di definire i limiti del raggio di azione del tag
stesso. Una pagina HTML5 potrebbe quindi essere scritta come segue:
<meta charset=”utf-8”>
<title>Questa è una prova</title>
<p>Questo è il contenuto della pagina</p>
Come potete notare mancano i tag <html>, <head> e <body>. In questo caso il
browser è in grado di identificare le appartenenze dei vari vari tag.
5/31
Dott.Ing.Ivan Ferrazzi
La sintassi dei tag.
In XHTML i tag vanno definiti utilizzando il minuscolo. In HTML5 li possiamo
invece scrivere anche in maiuscolo. Es.:
<INPUT type=”text” />
La sintassi degli attributi.
Anche per gli attributi XHTML prevedeva una sintassi molto rigida. Ogni
attributo doveva (per forza) avere un valore (definito tra virgolette). In HTML5
possiamo definire attributi vuoti dove possibile come segue:
<INPUT type=”checkbox” checked />
L'attributo checked non ha quindi più bisogno di un valore assegnato come in
XHTML.
Nel caso in cui l'attributo venisse definito con un particolare valore questo lo si
potrebbe scrivere con o senza virgolette (o apici), come segue:
<INPUT type=checked checked />
Blocchi style e script.
In questo caso HTML5 ci permette di semplificare i codice per definire i blocchi
di stile o di scripting. In HTML5 possiamo infatti evitare di specificare il
type=”text/css” oppure type=”text/javascript”. I due blocchi possono quindi
essere definiti come segue:
<style></style>
<script></script>
HTML5 si basa quindi su una maggiore flessibilità e semplicità, caratteristiche
già note in HTML4.01. Possiamo comunque vincolare anche HTML5 alle
direttive XML definendo il tag <html> come segue:
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
Tag ed attributi deprecati.
Le specifiche HTML5 rendono deprecati uno svariato numero di tag ed attributi.
Non vengono quindi più utilizzati i tag che possono essere sostituiti
dall'appropriato utilizzo dei fogli di stile, come basefont, big, center, font, s,
strike, tt e u, o che sono diventati obsoleti, come acronym, applet, isindex e dir,
6/31
Dott.Ing.Ivan Ferrazzi
rimpiazzati ormai da tempo da altri tag.
Anche gli attributi come align, valign, background, bgcolor, cellpadding, border,
cellspacing, ecc. o elementi dannosi per l'usabilità e accessibilità come frame,
frameset e noframe vengono banditi dalle nuove specifiche.
7/31
Dott.Ing.Ivan Ferrazzi
IL NUOVO CONTENT MODEL
In HTML4.01 si utilizzavano diversi <div> per definire le varie sezioni del nostro
sito web. Il più delle volte si aggiungeva l'attributo id con il relativo nome della
sezione in questione. Questo rendeve molto difficile l'identificazione di
determinate sezioni all'interno della pagina, perchè non esisteva una specifica
globale per la definizione dei nomi da utilizzare all'interno degli id.
La sezione che conteneva il menu di navigazione in alcuni casi veniva definito
come id=”nav”, oppure id=”menu”, o altro ancora.
In HTML5 si è cercato di porre rimedio a questo problema definendo tag diversi
da utilizzare per specifiche sezioni. Ecco che entrano in scena tag come
article, aside, nav, section, ecc.
Tag per definire le sezioni
HTML5 mette a disposizione nuovi tag che permettono di definire la tipologia di
sezione che si vuole creare. All'interno di ogniuno di questi tag dovrà essere
presente almeno uno dei tag che definiscono i titoli (vedi capitolo seguente) e
si consiglia di posizionarli subito dopo l'apertura del tag della sezione. Questo
permetterà anche a sistemi automatici di identificare in maniera precisa il titolo
assegnato ad ogni sezione.
Il tag <header>.
Questo tag può essere utilizzato per definire l'intestazione di particolari sezioni
all'interno della pagina stessa. Attenzione a non confondere questo tag con il
tag <head> che identifica il blocco di intestazione dell'intera pagina. Il tag in
questione va utilizzato se aumenta la comprensione (anche da un punto di
8/31
Dott.Ing.Ivan Ferrazzi
vista strutturale) della sezione che stiamo creando. Es.:
<header>
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
</header>
Il tag <footer>.
Così come il tag <header> anche questo tag permette di definire le informazioni
di piè di pagina all'interno di una sezione ben definita. Possiamo utilizzare
questo tag per definire il piè di pagina dell'intera pagina o di sezioni particolari.
Il tag <section>.
Questo tag viene utilizzato per definire delle sezioni generiche all'interno della
struttura concettuale del sito. Questo non deve però in nessun caso sostituire
l'utilizzo dei <div> nella definizione della struttura grafica del sito.
Ogni sezione che contiene determinati elementi può essere definita utilizzando
il tag <section>. Un contenitore che all'interno del sito visualizza l'elenco degli
articoli di un blog, oppure l'elenco di articoli messi in vendita, può essere
definito con il tag in question. Es.
<section>
<h1>Elenco degli articoli:</h1>
<article>
…
</article>
<article>
…
</article>
…
</section>
Il tag <nav>.
Questo blocco permette di identificare con esattezza il menu di navigazione
messo a disposizione all'interno del sito. Ogni menu di navigazione orizzontale,
oppure verticale verrà inserito all'interno di questo blocco. Sarà quindi possibile
identificare in maniera automatica la o le sezioni che contengono i link ad altre
parti del sito. Es.:
<nav>
<h1>Navigazione:</h1>
<ul>
<li>Chi siamo</li>
…
</ul
</nav>
Il tag <article>.
Questo tag permette di definire sezioni autonome all'interno del proprio sito.
Queste sezioni potrebbere essere riprese all'interno di altri siti, oppure
9/31
Dott.Ing.Ivan Ferrazzi
all'interno di altre sezioni del nostro sito. Es.
<article>
<header>
<h1>Art. 1515 – Titolo dell'articolo</h1>
</header>
<p>Descrizione dell'articolo</p>
</article>
Il tag <aside>.
Possiamo utilizzare questo tag per definire delle sezioni che contengono delle
informazioni marginali (o aggiuntive) in base al proprio contenitore che lo
contiene.
Tag per definire i titoli.
Tutti i tag definiti all'interno di questa sezione permettono di aggiungere un
titolo ad una delle sezioni definite con i tag precedentemente citati.
I tag dei titoli <h1>...<h6>
Questi tag dovrebbero essere già noti perchè comunque già disponibili nella
versione HTML4.01. Ricordiamoci di utilizzare questi tag per definire i titoli
delle varie sezioni che definiamo all'interno del nostro sito web.
Tag aggiuntivi.
In questa sezione identifichiamo alcuni dei tag che sono stati aggiunti per
definire determinate parti della struttura o del codice.
Il tag <mark>.
Questo tag viene utilizzato per marcare in particolare porzioni di testo
all'interno di un blocco. Es.:
<p>Il nome <mark>Pinco Palla</mark> deriva dal...</p>
I tag <figure> e <figcaption>.
Questi due tag permettono di identificare delle sezioni contenenti delle
immagini con relativa didascalia. Es.:
<figure>
<img src=”foto.jpg” alt=”articolo2” />
<figcaption>
Foto dell'articolo 2
</figcaption>
</figure>
10/31
Dott.Ing.Ivan Ferrazzi
Il tag <datalist>.
Questo tag ci permette di combinare le funzionalità del tag <select> e <input> di
tipo testo. Possiamo scegliere l'elemento desiderato da una lista di opzioni, ma
abbiamo anche la possibilità di inserire nuove opzioni scrivendole direttamente.
Per attivare il tag datalist dobbiamo prima definire un campo input al quale poi
verrà abbinato il datalist in questione. Per abbinare l'input al datalist
utilizziamo l'attributo list. Es.:
<input type="text" name="stato" list="elenco_stati" />
<datalist id="elenco_stati">
<option value="Italia">
<option value="Germania">
<option value="Austria">
<option value="Svizzera">
</datalist>
Il tag <meter>.
Questo tag ci permette di creare una barra grafica per indicare lo stato di una
determinata cosa, come ad esempio lo spazio usato su disco fisso, l'attuale
stato di avanzamento di un determinato lavoro a lungo termine, ecc. Si
consiglia di non utilizzare questo tag per la visualizzazione di uno stato di
avanzamento dinamico, come stato di avanzamento di download, oppure di
elaborazione dinamica.
Gli attributi che possiamo utilizzare sono min, max e value, dove min definisce il
valore iniziale della barra, max il valore e finale e value il valore attuale di
visualizzazione.
<meter min=”0” max=”100” value=”75”></meter>
E possibile lasciare via gli attributi min e max e definire lo stato attuale in
percentuale con value compreso tra 0 e 1 come segue:
<meter value=”0.75”></meter>
Il tag <progress>.
Questo tag ci permette di visualizzare una barra grafica che indica lo stato di
avanzamento dinamico, come ad esempio lo stato di avanzamento di un
download oppure di un'elaborazione dinamica. Non utilizzare questo tag per
visualizzare informazioni statiche, come ad esempio lo spazio disponibile su
disco fisso ecc.
Questo tag mette a disposizione gli attributi max e value, dove max indica il valore
da raggiungere ad elaborazione finita e value il valore di elaborazione attuale.
<progress max=”100” value=”75”></progress>
E possibile lasciare via l'attributo max e definire lo stato attuale in percentuale
con value compreso tra 0 e 1 come segue:
11/31
Dott.Ing.Ivan Ferrazzi
<progress value=”0.75”></progress>
12/31
Dott.Ing.Ivan Ferrazzi
I NUOVI ATTRIBUTI
In HTML4.01 uno dei più grandi problemi è la validazione di determinati
contenuti all'interno di un form, oppure la gestione di determinati eventi. Per
far fronte alle varie richiesta bisogna integrare codice Javascript in grado di
effettuare i dovuti controlli.
In HTML5 si è cercato di riprendere le situazioni più utilizzate per riuscire a
definire quanto più possibili con l'apporto di determinati attributi direttamente
all'interno dei tag in questione. Vediamo nelle seguenti pagine quali sono i
nuovi attributi che HTML5 mette a disposizione.
L'attributo autofocus.
Questo attributo permette di posizionare il focus all'interno di un determinato
campo presente sulla pagina. Se l'attributo in questione viene definito
all'interno di vari elementi verrà preso in considerazione l'ultimo elemento
inserito. Es.:
<input type=”text” name=”cognome” autofocus />
L'attributo placeholder.
Il valore assegnato mediante questo attributo verrà visualizzato all'interno del
campo di inserimento testo o del textarea fino a quando il cursore non verrà
posizionato al suo interno. In questo caso la stringa definita verrà cancellata
permettendo l'inserimento del valore richiesto. Es.:
13/31
Dott.Ing.Ivan Ferrazzi
<input type=”text” name=”cognome” placeholder=”inserire il cognome” />
L'attributo form.
Con l'aiuto di questo attributo possiamo assegnare dei tag <input> ad uno
specifico <form> anche se questo è stato definito all'esterno di esso. Es.:
<form id=”modulo” action=”...” method=”post”>
<input type=”text” name=”cognome” />
<input type=”submit” />
</form>
<input type=”text” name=”nome” form=”modulo” />
L'attributo required.
Questo attributo permette di definire gli elementi obbligatori all'interno di un
form di compilazione. I campi verranno verificato al momento del submit. Es.:
<input type=”text” name=”cognome” required />
L'attributo pattern.
Per controllare la sintassi di un valore inserito all'interno di un campo di testo
fino ad ora era indispensabile l'utilizzo di Javascript. Questo attributo ci da la
possibilità di definire mediante espressioni regolari l'esatta struttura del valore
da aggiungere. Es.:
<input type=”text” name=”nickname” pattern=”[a-z]{1}[a-z_]{2,19}” />
In questo caso il nickname deve essere composto da almeno 20 caratteri
minuscoli, oppure “_”, dove quest'ultimo non può essere utilizzato come primo
elemento. La lunghezza minima da inserire è pari a 3.
L'attributo contenteditable.
Questo attributo permette di rendere editabile l'elemento HTML in questione.
Attiviamo questa proprietà assegnando il valore true e la spegnamo mediante il
valore false. Es.:
<p contenteditable=”true”>Provate a modificare questo testo.</p>
14/31
Dott.Ing.Ivan Ferrazzi
L'attributo hidden.
Questo attributo va a sostituire lo stile in linea “display:none”. Es.:
<div hidden>Questo testo non si vede più</div>
L'attributo spellcheck.
Questo attributo abilita o disabilità il controllo di sintassi. Attiviamo questa
proprietà assegnando il valore true e la spegnamo mediante il valore false. Es.:
<div spellcheck>Questo testo è da controllare</div>
15/31
Dott.Ing.Ivan Ferrazzi
I NUOVI TIPI DI INPUT
I dati che vengono richiesti direttamente dall'utente che compila un form sono
bene o male sempre gli stessi. Per questo motivo HTML5 mette a disposizione
alcuni tipi di input in più che permettono di definire la sintassi del valore da
inserire.
type=”tel”
Questo tipo di input mette a disposizione il campo per l'inserimento di un
numero di telefono. Su alcuni dispositivi mobile questo campo attiva un
pannello appositamente creato per l'inserimento di numeri di telefono (simile
alla tastiera numerica di un telefono). Es.:
<input type=”tel” name=”telefono” />
type=”search”
Questo campo nella maggior parte dei casi è uguale ad un campo di
inserimento testo. Anche questo è un campo libero svincolato da un pattern di
default. Es.:
<input type=”search” name=”cerca” />
16/31
Dott.Ing.Ivan Ferrazzi
type=”url”
Questo tipo di input permette l'inserimento di una url. Anche per questo campo
alcuni dispositivi mobile mettono a disposizione un pannello dedicato
all'inserimento di valori url. Es.:
<input type=”url” name=”www” />
type=”email”
Questo tipo di input mette a disposizione un campo che permette l'inserimento
di indirizzi email. Anche per questo campo alcuni dispositivi mobile mettono a
disposizione un pannello dedicato. Es.:
<input type=”email” name=”email” />
type=”range”
Questo tipo di input mette a disposizione un elemento che permette di
scegliere un valore numerico tra un valore minimo ( min) e un valore massimo
(max) con una determinata distanza tra una tacca e l'altra ( step). L'attuale
valore può essere definito con l'attributo value. Es.:
<input type=”range” min=”0” max=”10” step=”2” value=”8” />
17/31
Dott.Ing.Ivan Ferrazzi
I CANVAS
Un canvas è un contenitore messo a disposizione da HTML5 per effettuare dei
disegni “al volo” utilizzando un linguaggio script come ad esempio JavaScript.
Come prima cosa dobbiamo definire quindi lo spazio che vogliamo utilizzare
come superficie di disegno. Per fare questo utilizziamo il tag <canvas> all'interno
del quale dobbiamo definire l'attributo id che ci permetterà di riconoscere
l'elemento direttamente da JavaScript.
<canvas id=”canvas” width=”400” height=”400”></canvas>
Poi possiamo passare al codice JavaScript dove come prima cosa dobbiamo
creare l'oggetto dal nostro canvas in questione con
var canvas = document.getElementById(“canvas”);
Una volta creato l'oggetto dobbiamo recuperare la superficie di disegno. In
questo caso usiamo il metodo getContext() con il quale recuperiamo la
superficie 2D del nostro oggetto canvas come segue
var context = canvas.getContext(“2d”);
L'oggetto context creato dalla superficie del nostro canvas mette ora a
disposizione una serie di proprietà e metodi con i quali saremo in grado di
disegnare all'interno dello spazio messo a disposizione.
Nel prossimo esempio vediamo la proprietà fillStyle, che permette di definire
il colore di riempimento, e fillRect, che permette di disegnare un rettangolo
colorato utilizzando proprio il colore definito con fillStyle.
18/31
Dott.Ing.Ivan Ferrazzi
<html>
<head>
<title>Prova Rettangolo</title>
<meta charset=”utf-8” />
</head>
<body>
<canvas id=”canvas” width=”400” height=”400”></canvas>
<script>
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
context.fillStyle = “#00ff00”;
context.fillRect(50,50,100,100);
</script>
</body>
</html>
Le proprietà e i metodi per i canvas
Il linguaggio JavaScript mette a disposizione una serie di proprietà e metodi che
possiamo utilizzare su una superficie di disegno. Vediamo qui di seguito quelli
più utilizzati:
Stile di riempimento con fillStyle
Questa proprietà permette di definire lo stile da utilizzare come riempimento
dei vari oggetti grafici. Possiamo definire lo stile utilizzando tre modi diversi:
color
gradient
pattern
è possibile definire un colore CSS, ossia come valore
esadecimale (#ff0000), con il relativo nome del colore ( red),
oppure utilizzando la funzione rgb ( rgb(255,0,0) )
è possibile utilizzare un riempimento graduale lineare (
getLinearGradient() ) oppure circolare ( getRadialGradient() )
è possibile definire come elemento di riempimento
un'immagine impostando poi una serie di funzioni che ne
definiscono il comportamento
Riempimento graduale
Per
definire
un
riempimento
graduale
lineare
usiamo
createLinearGradient() messo a disposizione dall'oggetto context
canvas. La sintassi di questo metodo è la seguente:
il metodo
del nostro
var grad = context.createLinearGradient(x0,y0,x1,y1);
dove x0 e y0 identificano le coordinate del punto di partenza dell'effetto, mentre
x1 e y1 ne identificano il punto di arrivo. Questo oggetto mette a disposizione il
metodo addColorStop() che permette di indicare quale colore utilizzare fino a
che punto dell'effetto in questione. La sintassi di questo metodo è
19/31
Dott.Ing.Ivan Ferrazzi
grad.addColorStop(stop,color);
dove stop è un valore decimale compreso tra 0 e 1 che determina fino a che
punto va utilizzato il colore definito con color. Vediamo il seguente esempio:
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
var grad = context.createLinearGradient(0,0,170,0);
grad.addColorStop(0,”black”);
grad.addColorStop(0.5,”green”);
grad.addColorStop(1,”yellow”);
context.fillStyle = grad;
context.fillRect(0,0,170,100);
Per
definire
un
riempimento
graduale
circolare
usiamo
createRadialGradient() messo a disposizione dall'oggetto context
canvas. La sintassi di questo metodo è la seguente:
il metodo
del nostro
var grad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
dove x0 e y0 identificano le coordinate del punto di partenza dell'effetto con il
relativo raggio r0, mentre x1 e y1 ne identificano il punto di arrivo con il relativo
raggio r1. Anche questo oggetto mette a disposizione il metodo addColorStop()
che permette di indicare quale colore utilizzare fino a che punto dell'effetto in
questione.
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
var grad = context.createLinearGradient(85,50,5,85,50,100);
grad.addColorStop(0,”green”);
grad.addColorStop(1,”white”);
context.fillStyle = grad;
context.fillRect(0,0,170,100);
Riempimento a pattern
Questo tipo di riempimento ci permette di utilizzare un'immagine e definirne
poi il comportamento di riempimento. Il metodo in grado di creare un
riempimento simile è il createPattern() con la seguente sintassi:
var pat = context.createPattern(img,direction);
dove img identifica l'immagine che vogliamo utilizzare, mentre direction
permette di utilizzare una delle seguenti direzioni di riempimento: repeat,
repeat-x, repeat-y, oppure no-repeat. Vediamo un semplice esempio:
<html>
<head>
<title>Prova Pattern</title>
<meta charset=”utf-8” />
</head>
<body>
20/31
Dott.Ing.Ivan Ferrazzi
<img id=”id_img” src=”image.png” />
<canvas id=”canvas” width=”400” height=”400”></canvas>
<script>
var img = document.getElementById(“id_img”);
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
var pat = context.createPattern(img,”repeat”);
context.fillStyle = pat;
context.fillRect(50,50,100,100);
</script>
</body>
</html>
Disegnare percorsi
Per disegnare un percorso all'interno di un cavas definiamo il punto di partenza
con il metodo moveTo() per poi spostarci di punto in punto con lineTo(). Una
volta definito l'intero percorso che vogliamo disegnare dobbiamo confermare il
tutto con stroke() in maniera tale da visualizzare effettivamente quanto voluto.
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
context.moveTo(100,10);
context.lineTo(150,110);
context.lineTo(50,110);
context.lineTo(100,10);
context.stroke();
Disegnare tratti curvi
Per disegnare dei tratti curvi possiamo usare il metodo arc() che utilizza il
seguente formato:
context.arc(x,y,r,start,stop);
dove x e y identificano le coordinate interne e r la distanza dal punto di
partenza dove si inizierà a disegnare. Il punto di inizio start è un valore
compreso tra 0 e 6.28 ( 2 x PI ) dove il valore 0 parte alla coordinata (x + r, y).
Il punto di fine corsa stop è un valore compreso tra 0 e 6.28 (2 x PI) e identifica
fino a dove disegnare la linea curva. La linea verrà disegnata dal punto di
partenza al punto di fine corso in senso orario.
Per raggruppare più elemento all'interno dello stesso percorso utilizziamo il
metodo beginPath() e confermiamo l'effettiva scrittura con stroke() come
segue:
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
context.beginPath();
context.arc(100,100,50,0,2*Math.PI);
context.stroke();
21/31
Dott.Ing.Ivan Ferrazzi
Disegnare testo
Per disegnare del testo all'interno del nostro canvas dobbiamo come prima cosa
definire le proprietà del font con font per poi poter scrivere un testo riempito (
fillText() ) oppure senza riempimento ( strokeText() ). La sintassi utilizzata è la
seguente:
context.font = “font-style font-variant font-weight font-size font-family”;
context.fillText(text,x,y);
context.strokeText(text,x,y);
Nei metodi fillText() e strokeText() il parametro text identifica il testo che
vogliamo scrivere, mentre x e y ne identificano le coordinate di posizionamento
dell'angolo in basso a sinistra.
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
context.font=”italic small-caps bold 30px Arial”;
context.fillText(“Hello World”,0,30);
Posizionare un'immagine
Per posizionare un'immagine all'interno di un canvas possiamo utilizzare il
metodo drawImage(). La sintassi più semplice che possiamo utilizzare è:
context.drawImage(img,x,y);
dove img identifica l'immagine che vogliamo inserire, mentre x e y le coordinate
di posizionamento dell'angolo in alto a sinistra. Esempio:
var img = new Image();
img.src = 'image.png';
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
img.onload = function() {
context.drawImage(img,10,10);
}
La proprietà onload permette di attendere il completo caricamento
dell'immagine prima di inserirla nel canvas.
Il metodo drawImage() mette a disposizione una sintassi in grado di definire
anche l'altezza e la larghezza dell'immagine da inserire:
context.drawImage(img,x,y,width,height);
Oppure possiamo definire una clip di visualizzazione se non vogliamo mostrare
l'intera immagine con
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
22/31
Dott.Ing.Ivan Ferrazzi
dove sx, sy, swidth e sheight permetto di definire la clip di visualizzazione.
23/31
Dott.Ing.Ivan Ferrazzi
SCALABLE VECTOR GRAPHICS
(SVG)
VG viene usato per sfruttare la grafica vettoriale all'interno del Web e viene
definito con un formato XML. Il tag che utilizziamo è <svg></svg> e al suo interno
va definito il tipo di XML e la versione da utilizzare:
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”></svg>
I parametri XML vengono messi direttamente all'interno del tag <svg> come nel
seguente esempio:
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1” width=”200” height=”200”>
<polygon
points=”100,10 150,110 50,110 100,10”
style=”fill:blue;stroke:lightblue;stroke-width:10px;fill-rule:evenodd;” />
<text x=”45” y=”135” style=”fill:black;font-family:verdana;font-size:20px;”>Il
triangolo</text>
</svg>
L'unità di misura di default per le dimensioni width e height del tag <svg> è pixel,
ma è possibile utilizzare anche altre unità di misura come ad esempio em, ex, px,
pt, pc, cm, mm e %.
SVG ci permette di disegnare in vettoriale e proprio per questo motivo ci viene
data anche la possibilità di definire le proporzioni di visualizzazione a
piacimento. Nel tag <svg> abbiamo a disposizione l'attributo viewBox che ci
permette di definire un nuovo sistema di coordinamento dello spazio messo a
disposizione. L'esempio precedente mette a disposizione una tela di
24/31
Dott.Ing.Ivan Ferrazzi
dimensione 200px x 200px, ma possiamo diminuire l'immagine riprodotta
aumentando il numero di pixel all'interno dello stesso riquadro come segue:
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”
width=”200” height=”200” viewBox=”0 0 400 400”>
<polygon
points=”100,10 150,110 50,110 100,10”
style=”fill:blue;stroke:lightblue;stroke-width:10px;fill-rule:evenodd;” />
<text x=”45” y=”135” style=”fill:black;font-family:verdana;font-size:20px;”>Il
triangolo</text>
</svg>
L'attributo viewBox si aspetta i parametri x1, y1, x2 e y2 separati da uno spazio
per definire il nuovo punto in alto a sinistra e quello in basso a destra
dell'attuale riquadro.
E' possibile creare anche un file SVG esterno che possiamo importare
utilizzando il tag <object> oppure <embed>. Il file che creiamo deve avere la
seguente forma:
<?xml version=”1.0” encoding=”utf-8” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//Dtd SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd”>
<svg width=”200” height=”200” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
...
</svg>
Come possiamo notare definiamo il file come file XML nella prima riga, mentre
nella seconda dobbiamo definire il tipo di documento che stiamo utilizzando.
Dopo aver salvato il file con il nome file.svg lo possiamo inserire all'interno
della nostra pagina con
<object width=”200” height=”200” data=”file.svg” type=”image/xml+svg”>
SVG non supportato! Scaricare i plugin!
</object>
oppure con
<embed src=”file.svg” width=”200” height=”200” type=”image/xml+svg”>
In entrambi i casi la cosa importante è definire in maniera corretta il MIME
TYPE, ossia image/xml+svg.
Le principali figure geometriche
Vediamo ora il codice XML per riprodurre le principali figure geometriche
all'interno del nostro tag <svg>
25/31
Dott.Ing.Ivan Ferrazzi
La linea
Per disegnare una linea usiamo
<line x1=”20” y1=”20” x2=”100” y2=”100” style=”stroke:green” />
Gli attributi x1, y1, x2 e y2 identificano le coordinate di inizio e fine punto.
Il tracciato
Per disegnare un tracciato usiamo
<polyline points=”100,10 150,110 50,110 100,10” style=”stroke:green;” />
L'attributo points contiene i vari punti di unione x,y separati da uno spazio.
Il cerchio
Per disegnare un cerchio usiamo
<circle cx=”100” cy=”100” r=”50” style=”stroke:green;fill:yellow;” />
Gli attributi cx e cy identificano le coordinate del punto al centro del cerchio,
mentre r permette di specificare il raggio da utilizzare.
Il poligono
Per disegnare un poligono usiamo
<polygon points=”100,10 150,110 50,110” style=”stroke:green;fill:yellow;” />
Questo elemento è simile al tracciato con l'unica differenza che con il poligono
non è possibile creare un tracciato aperto, ossia il primo e l'ultimo punto
verranno sempre chiusi da una linea.
Il rettangolo
Per disegnare un rettangolo usiamo
<rect x=”20” y=”20” rx=”5” ry=”5” width=”200” height=”200”
style=”fill:blue;” />
Gli attributi x e y definiscono il punto di partenza, mentre width e height
rispettivamente la larghezza e l'altezza del rettangolo. Gli attributi rx e ry, se
diversi da 0, definiscono l'arrotondamento degli angoli.
26/31
Dott.Ing.Ivan Ferrazzi
L'ellisse
Per disegnare un'ellisse usiamo
<ellipse cx=”100” cy=”100” rx=”40” ry=”80” style=”fill:blue;” />
Gli attributi cx e cy definiscono il centro dell'ellisse, mentre rx e ry
rispettivamente il raggio utilizzato per l'asse x e y.
Il percorso
Per disegnare un percorso usiamo
<path d=”M10,10 L150,100 L100,150 Z” style=”fill:blue;” />
L'attributo d permette di definire una serie di codici separati da spazio in grado
di aiutarci nel disegnare il nostro percorso. I codici che possiamo utilizzare
sono:
Mx,y
Lx,y
Z
Hx
Vy
Cx1,y1 x2,y2 x,y
Sx2,y2 x,y
Qx1,y1 x,y
Tx,y
Permette di definire il punto di partenza per il nostro
percorso.
Permette di unire l'ultimo punto inserito con quello
definito.
Permette di unire l'ultimo punto inserito con il punto di
partenza.
Permette di unire l'ultimo punto con un punto spostato
sull'asse x (ossia orizzontalmente).
Permette di unire l'ultimo punto con un punto spostato
sull'asse y (ossia verticalmente).
Permette di creare una linea curva dall'ultimo punto
inserto al punto x,y utilizzando il punto x1,y1 come
direzione per la curva di partenza ed il punto x2,y2
come direzione per la curva di arrivo.
Permette di creare una linea curva cubica dall'ultimo
punto inserito al punto x,y utilizzando il punto x2,y2
come direzione per la curva di arrivo. La direzione della
curva in partenza è simmetrica al secondo punto
definito all'interno del comando precedente.
Permette di creare una linea curva quadratica
dall'ultimo punto inserito al punto x,y utilizzando il
punto x1,y1 come parametro di controllo.
Permette di creare una linea curva quadratica
dall'ultimo punto inserito al punto x,y utilizzando come
parametro di controllo il valore simmetrico del punto di
controllo del comando precedente.
27/31
Dott.Ing.Ivan Ferrazzi
Il testo
Vediamo ora il codice XML per l'inserimento di testo all'interno del nostro tag
<svg>
Posizionamento assoluto
Quando inseriamo del testo abbiamo la possibilità di definire il punto x,y
all'interno del quale verrà inserito l'angolo in basso a sinistra del nostro testo. Il
tag XML che utilizziamo è il seguente
<text x=”20” y=”20”>Ciao a tutti</text>
dove gli attributi x e y permetto di definire il punto di inserimento.
Posizionamento relativo
Per non inserire ogni volta le coordinate assolute per il posizionamento del
testo possiamo utilizzare un riferimento relativo. In questo caso utilizziamo il
seguente tag XML
<tspan dx=”20” dy=”20”>Ciao</tspan>
In questo caso gli attributi dx e dy permettono di definire lo spostamento in
relazione agli ultimi valori x e y utilizzati. E' comunque possibile utilizzare anche
gli attributi x e y per combinare il posizionamento relativo con quello assoluto.
Attributi per <text> e <tspan>
All'interno di entrambi i tag possiamo inserire i seguenti attributi che ci
permettono di formattare il testo a dovere:
font-family
font-size
font-style
font-weight
text-decoration
fill
stroke
text-anchor
baseline-shift
letter-spacing
word-spacing
Permette di definire il font da utilizzare per il testo.
Per la dimensione del testo.
Permette di definire lo stile (italic, oblique, normal).
Permette lo spessore del testo (normal, bold, ecc.).
Permette di definire l'aspetto del testo (normal,
underline, line-through, ecc.).
Permette di definire il colore interno della scritta.
Permette di definire il colore del bordo della scritta.
Permette di definire l'allineamento del testo (start,
middle, end).
Permette di definire il testo come apice o pedice (super,
sub).
Permette di definire lo spazio tra i caratteri.
Permette di definire lo spazio tra le parole.
28/31
Dott.Ing.Ivan Ferrazzi
Questi attributi possono essere definiti anche come elenco CSS all'interno
dell'attributo style. Questo attributo aumenta le proprietà di stile che possiamo
utilizzare. Si aggiungono in fatti:
opacity
fill-rule
stroke-width
stroke-dasharray
stroke-linecap
stroke-linejoin
display
Permette di definire il livello di opacità.
Permette di definire la regola di riempimento, molto
comodo quando disegniamo un percorso. I valori
possibili sono nonzero (viene riempita l'intera area) e
evenodd (viene riempita l'area esterna, mentre quelle
interne rimangono vuote).
Permette di definire lo spessore della linea di disegno.
Permette di definire lo stile della linea di disegno.
Permette di definire il simbolo da usare per gli estremi
della linea. I valori possibili sono butt, round oppure
square.
Permette di definire il come disegnare l'intersezione tra
due linee. I valori possibili sono miter, round oppure
bevel.
Permette di definire la visibilità dell'elemento (none
oppure inline).
Testo lungo un percorso
E' possibile definire un percorso sopra il quale si fa scorrere un determinato
testo. Come prima cosa dobbiamo definire il percorso con path, il testo con
text, ed infine, dobbiamo definire il posizionamento del testo sul percorso con
textPath. Per funzionare è necessario l'utilizzo del namespace xlink. Ecco
perché è fondamentale dichiararlo all'interno del tag <svg>. Vediamo il seguente
esempio:
<svg width=”200” height=”200” xmlns:xlink=”http://www.w3.org/1999/xlink”>
<path id=”percorso” d=”M10,10 L150,100 L100,150 Z” style=”fill:blue;” />
<text style=”font-family:Verdana; font-size:12px; fill:blue;”>
<textPath xlink:href=”#percorso”>
Questo è il testo!
</textPath>
</text>
</svg>
Le immagini
I formati delle immagini supportati da SVG sono PNG e JPEG. Anche qui è
fondamentale l'utilizzo del namespace xlink. Vediamo il seguente esempio:
<svg width=”200” height=”200” xmlns:xlink=”http://www.w3.org/1999/xlink”>
<image x=”0” y=”0” width=”100” height=”100” xlink:href=”image.png” />
</svg>
29/31
Dott.Ing.Ivan Ferrazzi
TAG MULTIMEDIALI
HTML5 mette a disposizione dei tag multimediali per la riproduzione di file
audio e video, integrando già una serie di codec compatibili.
File video
Il tag che permette di riprodurre dei video è <video>. Attualmente sono
supportati tre tipi di formati video, ossia MP4, WebM e Ogg, anche se non tutti
sono compatibili con tutti i browser attualmente disponibili.
<video width=”320” height=”240” controls>
<source src=”video.ogg” type=”video/ogg” />
Attenzione! I video non sono supportati!
</video>
Gli attributi che possiamo utilizzare con questo tag sono:
autoplay
controls
height
loop
muted
poster
La
riproduzione
del
video
parte
subito
automaticamente.
Mette a disposizione un pannello di controllo.
Definisce l'altezza del riquadro messo a disposizione per
la riproduzione del video.
Il video verrà riprodotto all'infinito.
Il video verrà riprodotto senza audio.
Permette di definire un'immagine da visualizzare
quando il video non viene riprodotto. L'immagine viene
30/31
Dott.Ing.Ivan Ferrazzi
src
width
inserita come percorso url.
Indica il file video.
Definisce la larghezza del riquadro messo a disposizione
per la riproduzione del video.
File audio
Il tag che permette di riprodurre dei file audio è <audio>. Attualmente sono
supportati tre tipi di formati audio, ossia MP3, WAV e Ogg, anche se non tutti
sono compatibili con tutti i browser attualmente disponibili.
<audio controls>
<source src=”audio.ogg” type=”audio/ogg” />
Attenzione! Gli audio non sono supportati!
</audio>
Gli attributi che possiamo utilizzare con questo tag sono:
autoplay
controls
loop
muted
src
La riproduzione audio parte subito automaticamente.
Mette a disposizione un pannello di controllo.
L'audio verrà riprodotto all'infinito.
Il file verrà riprodotto senza audio.
Indica il file audio.
31/31