html5

www.buildwindows.com

HTML5

Raffaele Fanizzi


Chi sono

• Raffaele Fanizzi• Vicepresidente e Technical Architect di Skyray Solutions• Sito aziendale: www.skyraysolutions.com• Blog: www.vifani.com• Email: [email protected]• MCTS e MCPD su ASP.NET, ADO.NET e WCF

http://www.skyraysolutions.com/

http://www.vifani.com/

mailto:[email protected]


Agenda

• Un po’ di storia• Introduzione ad HTML5• Le novità

• Tag semantici• Video, audio, canvas e SVG• Drag And Drop e File API• Application Cache API• Web Workers• CSS 3• Form Validation API

• La guerra dei browser• Q&A

Un po’ di storia


• 1991 – HTML prima menzione – Tim Berners-Lee

• 1993 – HTML

• 1993 – HTML 2 draft

• 1995 – HTML 2 – W3C

• 1995 – HTML 3 draft

• 1997 – HTML 3.2 – “Wilbur”

• 1997 – HTML 4 – ”Cougar” – CSS

Un po’ di storia


• 1999 – HTML 4.01 (final)

• 2000 – XHTML draft

• 2001 – XHTML (final)

• 2008 – HTML5 / XHTML5 draft

• 2011 – funzionalità definite HTML5

• 2014 – HTML5 (final)

Un po’ di storia

Introduzione ad HTML5


• Progettato per

• Superare i limiti dei suoi predecessori

• Realizzare applicazioni dalle potenzialità più vicine a quelle native

• Ridurre la necessità di utilizzare plugin aggiuntivi (ActiveX, Flash e Silverlight)

• Dare più spazio alle funzionalità per via dichiarativa rispetto a quella programmatica



• E’ composto da molteplici standard

• Nuovi tag HTML

• Nuovo DOM

• CSS 3

• Nuove API Javascript

• Mantiene i punti di forza dei predecessori

• Cross platform

• Cross browser (si spera )



• Sviluppo

• Visual Studio 2010 SP1

• Expression Web e Blend

• Estensioni per il CSS 3




• Doctype tag:

• HTML tag:

• Meta tag:

• Link tag:

<!DOCTYPE html>

<html lang="en" xml:lang="en">

<meta charset="utf-8">

<link rel="stylesheet" href="style-original.css">

Tag semantici


• Obiettivi

• Dare un significato alle varie porzioni di una pagina web

• Rendere l’HTML più comprensibile per gli uomini e soprattutto per le macchine (SEO friendly)

• Mettere ordine nel caos creato dai molteplici DIV di una pagina

Tag semantici

<header>

<footer>

<nav> <aside>

<section><header>

<article>

<footer>


• <article>• Può rappresentare un contenuto, come una news, il post di

un blog o un articolo di un sito

• <aside>• Può rappresentare un contenuto correlato a ciò che

affianca

• <details>• Utile per definire il dettaglio di un documento o di una

parte di esso

• <summary>• Utile per riassumere il contenuto di un articolo o di un

dettaglio

Tag semantici


• <mark>• Denota un testo di particolare rilevanza (semantica, non

grafica)• <nav>• Rappresenta una sezione di navigazione• <section> • Rappresenta una sezione generica

Tag semantici


Tag semantici

<h3>Wormhole Physics Introduction</h3>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic radiation can travel in both directions through a wormhole, but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms. <strong>Warning: The vortex caused by the wormhole opening will annihilate anything in its path.</strong> Vortexes can be avoided when using sufficiently advanced dialing technology.</p>

<p>An obstruction in a gate will prevent it from accepting a wormhole connection.</p>

Video,canvas e SVG


• Tag canvas

• Introduce la possibilità di disegnare in una regione

• Si basa sull’uso di API Javascript per il disegno

• Non è di tipo vettoriale, ma è basata su una bitmap

Video, canvas e SVG

<canvas id="ExampleCanvas" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>

var example = document.getElementById('ExampleCanvas'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);


• Scalable Vector Graphics

• Contrariamente alle canvas è di tipo vettoriale

• Non si lavora a livello di pixel, ma di oggetti, ognuno dei quali ha le sue proprietà

• Può essere definito inline in una pagina HTML o referenziato come file a parte

Video, canvas e SVG

<body>

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">

<rect width="200" height="300" fill="#009246" />

<rect width="200" height="300" x="200" fill="#fff" />

<rect width="200" height="300" x="400" fill="#ce2b37" />

</svg>

</body>


• Tag video

• Ha l’obiettivo di sostituire il tag object per la riproduzione di contenuti video

• Consente la riproduzione video senza l’ausilio di plugin di terze parti

• Attualmente già utilizzato in alcuni siti per supportare dispositivi mobile e tablet

• Futuro incerto

• Non supporta la variazione dinamica del bitrate in base alla banda disponibile

• Non ha messo d’accordo tutti i membri del consorzio per la definizione di un formato video di default

Video, canvas e SVG

Drag And Drop e File API


• Drag And Drop

• Nuovo attributo draggable che supporta tre possibili valori

• true – Il contenuto è draggable

• false – Il contenuto non è draggable

• auto – Viene utilizzato il comportamento di default del browser (text, link e immagini sono draggable su Internet Explorer 10)


<button id="mybutton" draggable="true">Drag me</button><img src="photo.png" draggable="true" /><div id="mydiv" draggable="true">Moveable text</div>


• Drag And Drop

• Nuove API Javascript per la gestione degli eventi di drop e drag

• drop -scatta quando viene eseguito il drop su un elemento

• dragover - scatta quanto viene trascinato un elemento


var dropArea = document.getElementById("dropspot");dropArea.addEventListener("drop", dropHandler, false);dropArea.addEventListener("dragover", doNothing, false);


• File API

• Miglioramenti al tag input di tipo file: selezioni multiple e filtro sul MIME type

• Nuove API Javascript per la lettura dei file in maniera sincrona e asincrona


<input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

<script>

var reader = new FileReader();reader.readAsText(readFile);reader.onprogress = updateProgress;reader.onload = loaded;reader.onerror = errorHandler;

</script>



demo

Application Cache API


• Consente di salvare porzioni di un’applicazione web in locale

• Si basa sulla definizione di un file manifest per definire

• documenti da includere (CACHE)

• documenti da escludere (NETWORK)

• documenti da utilizzare in locale al posto di quelli online (FALLBACK)

• Il manifesto va specificato nel tag html

• Lavora in maniera trasparente, ma integra anche una corposa API Javascript per gestire la cache




CACHE MANIFEST

CACHE:# Defines resources to be cached.script/library.jscss/stylesheet.cssimages/figure1.png

FALLBACK:# Defines resources to be used if non-cached# resources cannot be downloadedphotos/ figure2.png

NETWORK:# Defines resources that will not be cached.figure3.png

<html manifest="appcache.manifest">

Web Workers


• Risolvono una delle più grandi limitazioni di Javascript: la sua natura single thread

• Consentono di eseguire codice Javascript su thread diversi da quello della UI

• Il codice da eseguire deve essere inserito in un file Javascript dedicato

• Non hanno accesso al DOM della pagina web

Web Workers


• La comunicazione da e verso i worker avviene utilizzando messaggi

• postmessage – consente di inviare un messaggio all’host del worker

• onmessage – è l’evento del worker al quale registrarsi per ricevere messaggi

Web Workers


Web Workers//Default.html

<script>

var hello = new Worker('hello.js');hello.onmessage = function(e) {alert(e.data);};

</script>

//hello.js

postMessage('Hello world!');


Web Workers

demo


• Impossibile da affrontare nella sua interezza in questa sessione

• Racchiude una miriade di novità

• Borders (Radius, Shadow, Image)

• Background (Size e Origin)

• Text (Shadow e Word Wrap)

• Trasformazioni 2D e 3D (traslazioni, rotazioni, scaling, matriciali)

• Transizioni

• Animazioni

• …

CSS 3


• Segna la fine di uno dei più antichi problemi del web

• rendere tondo ciò che è quadrato

CSS 3 – Rounded Corners


• Consentono di definire l’effetto da applicare al cambio di uno stile senza utilizzare plugin o Javascript

• E’ basato sulle seguenti proprietà

• transition-property: il nome della proprietà sottoposta alla transizione

• transition-duration: la durata della transizione

• transition-timing-function: la funzione di interpolazione

• transition-delay: il ritardo dell’inizio della transizione

CSS 3 – Transizioni


CSS 3 – Transizioni

div {

width:100px;height:100px;background:red;

transition:width 2s;

-moz-transition:width 2s; /* Firefox */

-webkit-transition:width 2s; /* Safari and Chrome */

-ms-transition:width 2s; /* IE 10 */

}

div:hover {

width:300px;

}


• Simili alle transizioni, le animazioni non gestiscono semplicemente il passaggio di stato di una proprietà, ma possono essere definite mediante keyframe su più proprietà

CSS 3 – Animazioni

div{animation: myfirst 5s;}

@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}


Transizioni

demo

Form Validation


• Introduce nuovi tipi per il tag input e nuovi attributi

• Rappresenta una boccata d’ossigeno per l’implementazione di applicazioni web data centriche (molte form e griglie)

• Consente di definire regole di validazione implementate e gestite interamente dal browser

Form Validation


Form Validation

• Nuovi tipi per il tag input

Tipo Descrizionenumber/range Consente di inserire solo

numeri

date, month, week, time, date + time, and date + time - time zone

Visualizza un date picker (alleluia!!!) e

email Input delle email

url Input degli URL

telephone Input di numeri telefonici


Form Validation

• Nuovi attributi per il tag input

Tipo Descrizionerequired Sapete bene cosa significa

autocomplete Conserva l’input e lo ripropone in futuro

Autofocus Imposta il focus sul controllo

min, max e step Utile nella definizione dei range e number

pattern Espressioni regolari

placeholder Watermark!!!


Form Validation

• Nuovi pseudo classi CSS

Tipo Descrizionevalid Controlli con dati validi

invalid Controlli con dati non validi

required Controlli con attributo required

optional Controlli senza attributo required


Form Validation

demo

La guerra dei browser


• HTML5 è composto da numerosi standard

• La ratifica degli standard è in continua evoluzione…

• … ma anche i browser sono in continua evoluzione

• Chrome 7 … 8 … 9 … 10 … 11 … 12 … 13 … 14 …

• Firefox 3.5 … 3.6 … 4 … 5 … 6 … 7 …

• Internet Explorer 7 … 8 … 9 … 10 …



• La filosofia Microsoft è quella di supportare con una versione finale di Internet Explorer solo le specifiche ratificate

• La filosofia di altri competitors è di supportare alcuni standard anche se sono solo in stato di bozza

• HTML5 => ottimizzazione dei browser

• Motori Javascript sempre più veloci

• Accelerazione in hardware via GPU di video, svg, canvas, ecc…



• Cosa fare per i comuni mortali che non corrono dietro l’ultima versione del browser?

• Modernizer – libreria Javascript per rilevare il supporto del browser

• Aggiunge una classe css ad ogni elementi della pagina definendo le funzioni che supporta il browser => utile per definire stili diversi in base al supporto

• Aggiungere un’API Javascript per interrogare il supporto del browser

• Cross Browser Polyfills


if (Modernizr.geolocation) {}

Grazie per l’attenzione

html5

Technology