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 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; 
}