INTERATTIVITÀ

a

Il tag  <a>  definisce un collegamento ipertestuale, che viene utilizzato per collegare una risorsa internet.

• L'attributo più importante dell'elemento  <a>  è l'attributo  href , che indica la destinazione del collegamento.
• Il collegamento può essere un URL assoluta o un URL relativa
  • In un URL Assoluta l'indirizzo inizia sempre con il nome host che deve essere preceduto dalla doppia barra ( //www.google.com )
  • Se il browser non trova il nome host considererà l'url come relativa e completerà l'indirizzo generando un'URL assoluta.
  • Se l'URL relativa inizia con la barra semplice ( / ) come punto di riferimento per il calcolo sarà presa la cartella iniziale del sito (root) e quindi verrà aggiunto solo il nome host
  • In caso contrario il calcolo verrà fatta partendo dalla cartella in cui si trova la pagina cliccata.
  • All'URL posso aggiungere un segnalibro (anchor) che mi fa saltare ad un determinato punto di una pagina. Il segno dell'anchor è il cancelletto ( # ), va aggiunto alla fine dell'URL e va scorrere la pagina al punto in cui viene visualizzato l'elemento che ha come l'attributo id corrispondente.
• Per impostazione predefinita, i collegamenti verranno visualizzati come segue in tutti i browser:
  • Un collegamento non visitato è sottolineato e blu
  • Un link visitati è sottolineato e viola
  • Un collegamento attivo è sottolineato e rosso

<a href="#su-di-me" >Su di me</a> 
<a class="btn btn-primary" href="https://github.com/magicbruno" target="_blank">
  magicbruno su GitHub
</a>

form

Il tag <form> viene utilizzato per creare un modulo HTML per l'input dell'utente.

• L'elemento <form> può contenere uno o più dei seguenti elementi del modulo:
  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <button>

<form action="demo_form.asp" method="get">
  <label>Nome</label>
  <input type="text" name="nome"><br />
  <label>Cognome</label>
  <input type="text" name="cognome"><br />
  <input type="submit" value="Invia">
</form>

input

Il tag  <input>  specifica un campo di input in cui l'utente può inserire i dati.

• Gli elementi  <input>  vengono utilizzati all'interno di un elemento <form>
• La funzione di imput cambia a secondo del valore definito dall'attributo type:
  • button,
  • checkbox,
  • color,
  • date,
  • datetime,
  • datetime-local,
  • email,
  • file,
  • hidden,
  • image,
  • month,
  • number,
  • password,
  • radio,
  • range,
  • reset,
  • search,
  • submit,
  • tel,
  • text,
  • time,
  • url,
  • week 

<form action="demo_form.asp" method="get">
  <label>Nome</label>
  <input type="text" name="nome"><br />
  <label>Cognome</label>
  <input type="text" name="cognome"><br />
  <input type="submit" value="Invia">
</form>

textarea

Il tag <textarea> definisce un controllo di input di testo multilinea.

• Un'area di testo può contenere un numero illimitato di caratteri.
• Per default il testo viene reso in un font a larghezza fissa (di solito Courier).

<textarea rows="5" maxlength="500"> 
  Testo contenuto nella casella editabile 
</textarea>

button

Il tag  <button>  definisce un pulsante cliccabile.

• Contrariamente che per l'elemento input all'interno di un elemento  <button>  Posso inserire qualsiasi tipo di contenuto.
• Browser diversi utilizzano diversi tipi di default per l'elemento  <button>
• <button>  supporta l'attributo type che può assumere i valori: button, submit e reset, gli stessi usati quando l'elemento <input> viene usato come pulsante e con lo stesso significato

<button type="button">Cliccami!</button>

select

L'elemento  <select>  viene utilizzato per creare un elenco a discesa.

• I tag  <option>  all'interno dell'elemento  <select>  definiscono le opzioni disponibili nella lista.  <select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

ELEMENTI MULTIMEDIALI

img

Il tag  <img>  definisce un'immagine in una pagina HTML.

• Il tag  <img>  ha due attributi obbligatori: src e alt.
• Le immagini non sono tecnicamente inserite in una pagina HTML, ma collegate attraverso l'URL, l'indirizzo univoco la identifica. Il tag <img> crea lo spazio di per l'immagine caricata.

<img src="smiley.gif" alt="Smiley face" height="42" width="42" /> 
<img src="https://unsplash.it/1280/720?random" alt="Immagine caricata da unsplash.it" /> 

video

Il tag  <video>  consente di inserire un video in una pagina WEB, ad esempio un clip filmato o un video in streaming.

• Attualmente sono tre i formati video supportati dall'elemento  <video> :
  • MP4 (Internet Explorer, Chrome, Safari, Firefox su Windows),
  • WebM (Chrome, Firefox, Opera)
  • Ogg (Chrome, Firefox, Opera).

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Il tuo browser non supporta il tag video.
</video>

audio

Il tag  <audio>  consente di inserire una risorsa audio in una pagina WEB, ad esempio una clip audioo un audio in streaming.

• Attualmente sono tre i formati audio supportati dall'elemento  <audio> :
  • MP3 (Internet Explorer, Chrome, Safari, Firefox su Windows),
  • Wav(Chrome, Firefox, Opera. Safari) e
  • Ogg (Chrome, Firefox, Opera).

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Il tuo browser non supporta il tag audio. 
</audio>

canvas

Il tag HTML5  <canvas>  viene usato per disegnare la grafica, al volo, tramite scripting (di solito Javascript). L'elemento  <canvas>  non ha capacità di disegno proprie (è solo un contenitore per la grafica). È necessario utilizzare uno script per disegnare effettivamente la grafica.

esempi di effetti realizzati con canvas

iframe

Il tag  <iframe>  specifica un frame in linea.

Un frame viene utilizzato per incorporare un altro documento nel documento HTML corrente.

<iframe src="https://www.google.com"></iframe>

CSS

I FOGLI DI STILE 

HTML serve ad informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.

• I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno mostrati su un media specifico (schermo, stampante, dispositivo mobile).
• CSS è il linguaggio che usa il web designer per realizzare un interfaccia.
• La prima fase di un design è la progettazione.

Progettazione WEB e concetto di accessibilità

ACCESSIBILITÀ 

• Consentire l’accesso a tutti gli utenti indipendentemente dal dispositivo che usano.
• Consentire l’accesso a tutti gli utenti indipendentemente dalla loro abilità.
• Tenere conto dei dispositivi che supportano gli utenti diversamente abili.
• Con legge 9 gennaio 2004 n.4 e i successivi decreti attuativi è obbligatorio per i siti Web della Pubblica Amministrazione e della aziende private che lavorano con la Pubblica Amministrazione seguire precise regole di accessibilità. http://www.webaccessibile.org/

TECNICHE RESPONSIVE

• Progettare interfacce diverse che consentano di mostrare con efficienza le stesse informazioni su dispositivi diversi.
• Utilizzare specifiche tecniche CSS per mostrare lo stesso contenuto HTML in maniera diversa sui diversi dispositivi sulla base di quanto progettato.

DEVICE PIXEL RATIO

• Il device pixel ratio è il rapporto tra le dimensioni fisiche (in pixel) dello schermo di un dispositivo e le sue dimensioni logiche, le dimensioni usate, cioè, per visualizzare gli oggetti sullo schermo.
• Se visualizzo la pagina di facebook su uno schermo desk top di 1920 per 1080 ottengo una visualizzazione perfetta:
• Se uno smartphone 1920x1080 (ad esempio un Samsung Note III) avesse la stessa pixel ratio otterrei una pagina assolutamente illegibile:
• Quindi uso delle dimensione logicheutilizzo le dimensioni logiche. In altri termini.
  • Su un desktop da 23 pollici uso 96 pixel per ogni pollice
  • Su un samsung Note III uso circa 400 pixel per ogni pollice.

ESEMPI DI PIXEL RATIO

Modello	Dimensioni fisiche	Dimensioni logiche	Pixel ratio
APPLE IPAD	1536 x 2048	768 x 1024	2.0
APPLE IPHONE 6	750 x 1254	375 x 627	2.0
NOKIA LUMIA 520	448 x 746	320 x 533	1.4
SAMSUNG GALAXY NOTE III	1080 x 1920	360 x 640	3.0
LG G4	1440 x 2560	360 x 640	4.0

COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB

Un foglio di stile può essere esterno e interno:

• È esterno un foglio di stile definito in un file separato dal documento.
• Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.

FOGLI COLLEGATI

Uso dell'elemento <link>

• La dichiarazione va sempre collocata all'interno della sezione <head> del documento:

	<html> 
		<head> 
			. . . . 
			<link rel="stylesheet" type="text/css" href="stile.css"> 
		</head> 
	<body>
    . . . .

• L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
  • rel descrive il tipo di relazione tra il documento e il file collegato. È sempre obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
  • href serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
  • type identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
  • media con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.

FOGLI INCORPORATI

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>:

	<html>    
		<head>        
			<title>Inserire i fogli di stile in un documento</title>     
			<style type="text/css">           
				body {                   
					background: #FFFFCC;           
				}      
			</style>     
		</head> 
		<body>
        ..........

STILI IN LINEA

• L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'.
• Esso fa parte della collezione di attributi HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi.
• La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente: <elemento style="regole_di_stile">

COME SONO COSTRUITE LE REGOLE

Un foglio di stile è costituito da una serie di regole che stabiliscono come un gruppo di elementi html (identificati da un selettore) viene reso su un media.

selettore {
    proprietà1: valore; 
    proprietà2: valore;
}

}

• selettore: definisce a quali elementi si applicano le regole che seguono
• {...} Parentesi graffe: racchiudono l'elenco delle regole 
• Regola: è composta dal nome di una proprietà e da un valore: color:#333333;
• proprietà: indica l'elemento visuale che viene modificato
• : [due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato.
• valore: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato.

MPORTANZA DELLA SINTASSI

• Un linguaggio è l’insieme di regole (sintassi, ortografia, punteggiatura) che fa si che il codice (istruzioni) che scrivo siano correttamente interpretate dal computer
• In CSS l’elemento sintattico principale è la punteggiatura: h2{ color:#333333; font-weight: bold; font-size: 40px; }
• Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata
• Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l’intero codice. Se tralascio, ad esempio, la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.

SELETTORI

• I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile.

 ELEMENTO

• Inserendo un selettore senza prefisso si identifica un elemento HTML.
• Se si inseriscono più selettori separati da virgola il gruppo di regole viene attribuito ad ogni selettore 

body, html { 
	height: 100%; 
} 
body { 
	font-family: 'Open Sans', sans-serif; 
	font-size: 16px; 
	font-weight: 300; 
	color: #333333; 
	background-color: #ffffff; 
} 
h1, h2, h3, h4, h5, h6 { 
	font-weight:700; 
} 

CLASSE

• Un selettore preceduto da un punto identifica una classe.
• Una classe è un nome che identifica un gruppo di regole di stile.
• Gli elementi della pagina che contengono quel nome nell’attributo class seguono le regole di stile che la classe identifica 

.red { 
	color: #dd0000; 
} 
.text-center { 
	text-align:center; 
} 
.text-right { 
	text-align:right; 
}