Post on 24-Jun-2015
www.buildwindows.com
HTML5
Raffaele Fanizzi
www.buildwindows.com
Chi sono
• Raffaele Fanizzi• Vicepresidente e Technical Architect di Skyray Solutions• Sito aziendale: www.skyraysolutions.com• Blog: www.vifani.com• Email: raffaele.fanizzi@skyraysolutions.com• MCTS e MCPD su ASP.NET, ADO.NET e WCF
www.buildwindows.com
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
www.buildwindows.com
• 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
www.buildwindows.com
• 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
www.buildwindows.com
• 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
Introduzione ad HTML5
www.buildwindows.com
• 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 )
Introduzione ad HTML5
www.buildwindows.com
• Sviluppo
• Visual Studio 2010 SP1
• Expression Web e Blend
• Estensioni per il CSS 3
Introduzione ad HTML5
www.buildwindows.com
Introduzione ad HTML5
• 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
www.buildwindows.com
• 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>
www.buildwindows.com
• <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
www.buildwindows.com
• <mark>• Denota un testo di particolare rilevanza (semantica, non
grafica)• <nav>• Rappresenta una sezione di navigazione• <section> • Rappresenta una sezione generica
Tag semantici
www.buildwindows.com
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
www.buildwindows.com
• 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);
www.buildwindows.com
• 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>
www.buildwindows.com
• 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
www.buildwindows.com
• 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)
Drag And Drop e File API
<button id="mybutton" draggable="true">Drag me</button><img src="photo.png" draggable="true" /><div id="mydiv" draggable="true">Moveable text</div>
www.buildwindows.com
• 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
Drag And Drop e File API
var dropArea = document.getElementById("dropspot");dropArea.addEventListener("drop", dropHandler, false);dropArea.addEventListener("dragover", doNothing, false);
www.buildwindows.com
• 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
Drag And Drop e File API
<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>
www.buildwindows.com
Drag And Drop e File API
demo
Application Cache API
www.buildwindows.com
• 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
Application Cache API
www.buildwindows.com
Application Cache API
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
www.buildwindows.com
• 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
www.buildwindows.com
• 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
www.buildwindows.com
Web Workers//Default.html
<script>
var hello = new Worker('hello.js');hello.onmessage = function(e) {alert(e.data);};
</script>
//hello.js
postMessage('Hello world!');
www.buildwindows.com
Web Workers
demo
CSS 3
www.buildwindows.com
• 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
www.buildwindows.com
• Segna la fine di uno dei più antichi problemi del web
• rendere tondo ciò che è quadrato
CSS 3 – Rounded Corners
www.buildwindows.com
• 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
www.buildwindows.com
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;
}
www.buildwindows.com
• 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;}}
www.buildwindows.com
Transizioni
demo
Form Validation
www.buildwindows.com
• 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
www.buildwindows.com
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
www.buildwindows.com
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!!!
www.buildwindows.com
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
www.buildwindows.com
Form Validation
demo
La guerra dei browser
www.buildwindows.com
• 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 guerra dei browser
www.buildwindows.com
• 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…
La guerra dei browser
www.buildwindows.com
• 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
La guerra dei browser
if (Modernizr.geolocation) {}
Q&A
Grazie per l’attenzione