Your SlideShare is downloading. ×
  • Like
HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5

  • 1,216 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,216
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
33
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5
    RaffaeleFanizzi
  • 2. 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
  • 3. 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
  • 4. Un po’ distoria
  • 5. 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
  • 6. 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
  • 7. Introduzione ad HTML5
  • 8. 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
  • 9. 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
  • 10. Sviluppo
    Visual Studio 2010 SP1
    Expression Web e Blend
    Estensioni per il CSS 3
    Introduzione ad HTML5
  • 11. 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">
  • 12. Tag semantici
  • 13. 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>
  • 14. <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
  • 15. <mark>
    Denota un testodiparticolarerilevanza (semantica, non grafica)
    <nav>
    Rappresentaunasezionedinavigazione
    <section>
    Rappresentaunasezionegenerica
    Tag semantici
  • 16. 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>
  • 17. Video,canvas e SVG
  • 18. 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);
  • 19. 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
  • 20. 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
  • 21. Drag And Drop e File API
  • 22. 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>
  • 23. 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);
  • 24. <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
  • 25. Drag And Drop e File API
    demo
  • 26. Application Cache API
  • 27. 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
  • 28. 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
  • 29. Web Workers
  • 30. 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
  • 31. 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
  • 32. Web Workers
    //Default.html
    <script>
    varhello = newWorker('hello.js');hello.onmessage = function(e) {alert(e.data);};
    </script>
    //hello.js
    postMessage('Hello world!');
  • 33. Web Workers
    demo
  • 34. CSS 3
  • 35. 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
  • 36. Segna la fine di uno dei più antichi problemi del web
    rendere tondo ciò che è quadrato 
    CSS 3 – Rounded Corners
  • 37. 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
  • 38. 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
  • 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à
    CSS 3 – Animazioni
    div{animation: myfirst 5s;}
    @keyframesmyfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}
  • 40. Transizioni
    demo
  • 41. Form Validation
  • 42. 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
  • 43. Nuovi tipi per il tag input
    Form Validation
  • 44. Nuovi attributi per il tag input
    Form Validation
  • 45. Nuovi pseudo classi CSS
    Form Validation
  • 46. Form Validation
    demo
  • 47. La guerradei browser
  • 48. 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
  • 49. 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
  • 50. 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) {
    }
  • 51. Q&A
  • 52. Grazie per l’attenzione