HTML5

1,434 views
1,384 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,434
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
48
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. HTML5<br />RaffaeleFanizzi<br />
  2. 2. Chi sono<br />RaffaeleFanizzi<br />Vicepresidente e Technical Architect diSkyray Solutions<br />Sitoaziendale: www.skyraysolutions.com<br />Blog: www.vifani.com<br />Email: raffaele.fanizzi@skyraysolutions.com<br />MCTS e MCPD su ASP.NET, ADO.NET e WCF<br />
  3. 3. Agenda<br />Un po’ distoria<br />Introduzione ad HTML5<br />Le novità<br />Tag semantici<br />Video, audio, canvas e SVG<br />Drag And Drop e File API<br />Application Cache API<br />Web Workers<br />CSS 3<br />Form Validation API<br />La guerradei browser<br />Q&A<br />
  4. 4. Un po’ distoria<br />
  5. 5. 1991 – HTML prima menzione – Tim Berners-Lee<br />1993 – HTML<br />1993 – HTML 2 draft<br />1995 – HTML 2 – W3C<br />1995 – HTML 3 draft <br />1997 – HTML 3.2 – “Wilbur”<br />1997 – HTML 4 – ”Cougar” – CSS <br />Un po’ distoria<br />
  6. 6. 1999 – HTML 4.01 (final)<br />2000 – XHTML draft <br />2001 – XHTML (final)<br />2008 – HTML5 / XHTML5 draft<br />2011 – funzionalità definite HTML5<br />2014 – HTML5 (final)<br />Un po’ distoria<br />
  7. 7. Introduzione ad HTML5<br />
  8. 8. Progettato per <br />Superare i limiti dei suoi predecessori<br />Realizzare applicazioni dalle potenzialità più vicine a quelle native<br />Ridurre la necessità di utilizzare plugin aggiuntivi (ActiveX, Flash e Silverlight)<br />Dare più spazio alle funzionalità per via dichiarativa rispetto a quella programmatica<br />Introduzione ad HTML5<br />
  9. 9. E’ composto da molteplici standard<br />Nuovi tag HTML<br />Nuovo DOM<br />CSS 3<br />Nuove API Javascript<br />Mantiene i punti di forza dei predecessori<br />Cross platform<br />Cross browser (si spera )<br />Introduzione ad HTML5<br />
  10. 10. Sviluppo<br />Visual Studio 2010 SP1<br />Expression Web e Blend<br />Estensioni per il CSS 3<br />Introduzione ad HTML5<br />
  11. 11. Introduzione ad HTML5<br />Doctype tag:<br />HTML tag:<br />Meta tag:<br />Link tag:<br /><!DOCTYPE html><br /><html lang="en" xml:lang="en"> <br /><meta charset="utf-8"> <br /><link rel="stylesheet" href="style-original.css"><br />
  12. 12. Tag semantici<br />
  13. 13. Obiettivi<br />Dare un significato alle varie porzioni di una pagina web<br />Rendere l’HTML più comprensibile per gli uomini e soprattutto per le macchine (SEO friendly)<br />Mettere ordine nel caos creato dai molteplici DIV di una pagina<br />Tag semantici<br /><header><br /><nav><br /><aside><br /><section><br /><header><br /><article><br /><footer><br /><footer><br />
  14. 14. <article><br />Puòrappresentare un contenuto, come una news, il post di un blog o un articolodi un sito<br /><aside><br />Puòrappresentare un contenutocorrelato a ciòcheaffianca<br /><details><br />Utile per definireildettagliodi un documento o diuna parte diesso<br /><summary><br />Utile per riassumereilcontenutodi un articolo o di un dettaglio<br />Tag semantici<br />
  15. 15. <mark><br />Denota un testodiparticolarerilevanza (semantica, non grafica)<br /><nav><br />Rappresentaunasezionedinavigazione<br /><section> <br />Rappresentaunasezionegenerica<br />Tag semantici<br />
  16. 16. Tag semantici<br /><h3>Wormhole Physics Introduction</h3><br /><p><mark>Momentum is preserved across the wormhole. Electromagnetic radiation can travel in both directions through a wormhole, but matter cannot.</mark></p><br /><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><br /><p>An obstruction in a gate will prevent it from accepting a wormhole connection.</p><br />
  17. 17. Video,canvas e SVG<br />
  18. 18. Tag canvas<br />Introduce la possibilitàdidisegnare in unaregione<br />Si basasull’usodi API Javascript per ildisegno<br />Non è ditipovettoriale, ma è basatasuuna bitmap<br />Video, canvas e SVG<br /><canvas id="ExampleCanvas" width="200" height="200"> <br /> This text is displayed if your browser does not support <br /> HTML5 Canvas. <br /></canvas> <br />var example = document.getElementById('ExampleCanvas'); <br />var context = example.getContext('2d'); <br />context.fillStyle = "rgb(255,0,0)"; <br />context.fillRect(30, 30, 50, 50); <br />
  19. 19. Scalable Vector Graphics<br />Contrariamentealle canvas è ditipovettoriale<br />Non silavora a livellodi pixel, ma dioggetti, ognunodeiquali ha le sue proprietà<br />Puòesseredefinito inline in unapagina HTML o referenziato come file a parte<br /><body> <br /><svgxmlns="http://www.w3.org/2000/svg" width="600" height="300"> <br /><rect width="200" height="300" fill="#009246" /> <br /><rect width="200" height="300" x="200" fill="#fff" /> <br /><rect width="200" height="300" x="400" fill="#ce2b37" /> <br /></svg> <br /></body><br />Video, canvas e SVG<br />
  20. 20. Tagvideo<br />Ha l’obiettivo di sostituire il tagobject per la riproduzione di contenuti video<br />Consente la riproduzione video senza l’ausilio di plugin di terze parti<br />Attualmente già utilizzato in alcuni siti per supportare dispositivi mobile e tablet<br />Futuro incerto<br />Non supporta la variazione dinamica del bitrate in base alla banda disponibile<br />Non ha messo d’accordo tutti i membri del consorzio per la definizione di un formato video di default<br />Video, canvas e SVG<br />
  21. 21. Drag And Drop e File API<br />
  22. 22. Drag And Drop<br />Nuovo attributo draggable che supporta tre possibili valori<br />true – Il contenuto è draggable<br />false – Il contenuto non è draggable<br />auto – Viene utilizzato il comportamento di default del browser (text, link e immagini sono draggable su Internet Explorer 10) <br />Drag And Drop e File API<br /><buttonid="mybutton" draggable="true">Drag me</button><imgsrc="photo.png" draggable="true" /><divid="mydiv" draggable="true">Moveable text</div><br />
  23. 23. Drag And Drop<br />Nuove API Javascript per la gestione degli eventi di drop e drag<br />drop-scatta quando viene eseguito il drop su un elemento<br />dragover- scatta quanto viene trascinato un elemento<br />Drag And Drop e File API<br />vardropArea = document.getElementById("dropspot");dropArea.addEventListener("drop", dropHandler, false);dropArea.addEventListener("dragover", doNothing, false);<br />
  24. 24. <input type="file" name="pic" multiple accept="image/gif, image/jpeg" /><br /><script><br />varreader = newFileReader();reader.readAsText(readFile);reader.onprogress= updateProgress;reader.onload = loaded;reader.onerror = errorHandler;<br /></script><br />File API<br />Miglioramenti al tag input di tipo file: selezioni multiple e filtro sul MIME type<br />Nuove API Javascript per la lettura dei file in maniera sincrona e asincrona<br />Drag And Drop e File API<br />
  25. 25. Drag And Drop e File API<br />demo <br />
  26. 26. Application Cache API<br />
  27. 27. Consente di salvare porzioni di un’applicazione web in locale<br />Si basa sulla definizione di un file manifest per definire<br />documenti da includere (CACHE)<br />documenti da escludere (NETWORK)<br />documenti da utilizzare in locale al posto di quelli online (FALLBACK)<br />Il manifesto va specificato nel tag html<br />Lavora in maniera trasparente, ma integra anche una corposa API Javascript per gestire la cache<br />Application Cache API<br />
  28. 28. Application Cache API<br /><html manifest="appcache.manifest"><br />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<br />
  29. 29. Web Workers<br />
  30. 30. Risolvono una delle più grandi limitazioni di Javascript: la sua natura single thread<br />Consentono di eseguire codice Javascript su thread diversi da quello della UI<br />Il codice da eseguire deve essere inserito in un file Javascript dedicato<br />Non hanno accesso al DOM della pagina web<br />Web Workers<br />
  31. 31. La comunicazione da e verso i worker avviene utilizzando messaggi<br />postmessage – consente di inviare un messaggio all’host del worker<br />onmessage – è l’evento del worker al quale registrarsi per ricevere messaggi<br />Web Workers<br />
  32. 32. Web Workers<br />//Default.html<br /><script><br />varhello = newWorker('hello.js');hello.onmessage = function(e) {alert(e.data);};<br /></script><br />//hello.js<br />postMessage('Hello world!');<br />
  33. 33. Web Workers<br />demo <br />
  34. 34. CSS 3<br />
  35. 35. Impossibile da affrontare nella sua interezza in questa sessione <br />Racchiude una miriade di novità<br />Borders (Radius, Shadow, Image)<br />Background (Size e Origin)<br />Text (Shadow e Word Wrap)<br />Trasformazioni 2D e 3D (traslazioni, rotazioni, scaling, matriciali)<br />Transizioni<br />Animazioni<br />…<br />CSS 3<br />
  36. 36. Segna la fine di uno dei più antichi problemi del web<br />rendere tondo ciò che è quadrato <br />CSS 3 – Rounded Corners<br />
  37. 37. Consentono di definire l’effetto da applicare al cambio di uno stile senza utilizzare plugin o Javascript<br />E’ basato sulle seguenti proprietà<br />transition-property: il nome della proprietà sottoposta alla transizione<br />transition-duration: la durata della transizione<br />transition-timing-function: la funzione di interpolazione<br />transition-delay: il ritardo dell’inizio della transizione<br />CSS 3 – Transizioni<br />
  38. 38. div {<br />width:100px;height:100px;background:red;<br />transition:width 2s;<br />-moz-transition:width 2s; /* Firefox */<br />-webkit-transition:width 2s; /* Safari and Chrome */<br />-ms-transition:width 2s; /* IE 10 */<br />}<br />div:hover {<br />width:300px;<br />}<br />CSS 3 – Transizioni<br />
  39. 39. Simili alle transizioni, le animazioni non gestiscono semplicemente il passaggio di stato di una proprietà, ma possono essere definite mediante keyframe su più proprietà<br />CSS 3 – Animazioni<br />div{animation: myfirst 5s;}<br />@keyframesmyfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}<br />
  40. 40. Transizioni<br />demo <br />
  41. 41. Form Validation<br />
  42. 42. Introduce nuovi tipi per il tag input e nuovi attributi<br />Rappresenta una boccata d’ossigeno per l’implementazione di applicazioni web data centriche (molte form e griglie)<br />Consente di definire regole di validazione implementate e gestite interamente dal browser<br />Form Validation<br />
  43. 43. Nuovi tipi per il tag input<br />Form Validation<br />
  44. 44. Nuovi attributi per il tag input<br />Form Validation<br />
  45. 45. Nuovi pseudo classi CSS<br />Form Validation<br />
  46. 46. Form Validation<br />demo <br />
  47. 47. La guerradei browser<br />
  48. 48. HTML5 è composto da numerosi standard<br />La ratifica degli standard è in continua evoluzione…<br />… ma anche i browser sono in continua evoluzione<br />Chrome 7 … 8 … 9 … 10 … 11 … 12 … 13 … 14 …<br />Firefox 3.5 … 3.6 … 4 … 5 … 6 … 7 …<br />Internet Explorer 7 … 8 … 9 … 10 …<br />La guerradei browser<br />
  49. 49. La filosofia Microsoft è quella di supportare con una versione finale di Internet Explorer solo le specifiche ratificate<br />La filosofia di altri competitors è di supportare alcuni standard anche se sono solo in stato di bozza<br />HTML5 => ottimizzazione dei browser<br />Motori Javascript sempre più veloci<br />Accelerazione in hardware via GPU di video, svg, canvas, ecc…<br />La guerradei browser<br />
  50. 50. Cosa fare per i comuni mortali che non corrono dietro l’ultima versione del browser?<br />Modernizer – libreria Javascript per rilevare il supporto del browser<br />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<br />Aggiungere un’API Javascript per interrogare il supporto del browser<br />Cross Browser Polyfills<br />La guerradei browser<br />if (Modernizr.geolocation) {<br />}<br />
  51. 51. Q&A<br />
  52. 52. Grazie per l’attenzione<br />

×