HTML5

Chi sono RaffaeleFanizzi Vicepresidente e Technical Architect diSkyray Solutions Sitoaziendale: www.skyraysolutions.com Blog: www.vifani.com Email: raffaele.fanizzi@skyraysolutions.com MCTS e MCPD su ASP.NET, ADO.NET e WCF

Agenda Un po’ distoria 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 guerradei browser Q&A

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’ distoria

1999 – HTML 4.01 (final) 2000 – XHTML draft 2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft 2011 – funzionalità definite HTML5 2014 – HTML5 (final) Un po’ distoria

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

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

Sviluppo Visual Studio 2010 SP1 Expression Web e Blend Estensioni per il CSS 3 Introduzione ad HTML5

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">

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> <nav> <aside> <section> <header> <article> <footer> <footer>

<article> Puòrappresentare un contenuto, come una news, il post di un blog o un articolodi un sito <aside> Puòrappresentare un contenutocorrelato a ciòcheaffianca <details> Utile per definireildettagliodi un documento o diuna parte diesso <summary> Utile per riassumereilcontenutodi un articolo o di un dettaglio Tag semantici

<mark> Denota un testodiparticolarerilevanza (semantica, non grafica) <nav> Rappresentaunasezionedinavigazione <section> Rappresentaunasezionegenerica 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>

Tag canvas Introduce la possibilitàdidisegnare in unaregione Si basasull’usodi API Javascript per ildisegno Non è ditipovettoriale, ma è basatasuuna 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 Contrariamentealle canvas è ditipovettoriale Non silavora a livellodi pixel, ma dioggetti, ognunodeiquali ha le sue proprietà Puòesseredefinito inline in unapagina HTML o referenziato come file a parte <body> <svgxmlns="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> Video, canvas e SVG

Tagvideo Ha l’obiettivo di sostituire il tagobject 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 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 <buttonid="mybutton" draggable="true">Drag me</button><imgsrc="photo.png" draggable="true" /><divid="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 Drag And Drop e File API vardropArea = document.getElementById("dropspot");dropArea.addEventListener("drop", dropHandler, false);dropArea.addEventListener("dragover", doNothing, false);

<input type="file" name="pic" multiple accept="image/gif, image/jpeg" /> <script> varreader = newFileReader();reader.readAsText(readFile);reader.onprogress= updateProgress;reader.onload = loaded;reader.onerror = errorHandler; </script> 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

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

Application Cache API <html manifest="appcache.manifest"> CACHE MANIFESTCACHE:# Defines resources to be cached.script/library.jscss/stylesheet.cssimages/figure1.pngFALLBACK:# Defines resources to be used if non-cached# resources cannot be downloadedphotos/ figure2.pngNETWORK:# Defines resources that will not be cached.figure3.png

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> varhello = newWorker('hello.js');hello.onmessage = function(e) {alert(e.data);}; </script> //hello.js postMessage('Hello world!');

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

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; } CSS 3 – Transizioni

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;} @keyframesmyfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}

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

Nuovi tipi per il tag input Form Validation

Nuovi attributi per il tag input Form Validation

Nuovi pseudo classi CSS Form Validation

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 guerradei browser

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 guerradei browser

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 guerradei browser if (Modernizr.geolocation) { }

HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (10)

Semelhante a HTML5

Semelhante a HTML5 (20)

Mais de Raffaele Fanizzi

Mais de Raffaele Fanizzi (8)

HTML5