HTML5
-
Upload
raffaele-fanizzi -
Category
Technology
-
view
1.261 -
download
0
Transcript of HTML5
![Page 1: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/1.jpg)
www.buildwindows.com
HTML5
Raffaele Fanizzi
![Page 2: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/2.jpg)
www.buildwindows.com
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
![Page 3: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/3.jpg)
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
![Page 4: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/4.jpg)
Un po’ di storia
![Page 5: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/5.jpg)
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
![Page 6: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/6.jpg)
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
![Page 7: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/7.jpg)
Introduzione ad HTML5
![Page 8: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/8.jpg)
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
![Page 9: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/9.jpg)
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
![Page 10: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/10.jpg)
www.buildwindows.com
• Sviluppo
• Visual Studio 2010 SP1
• Expression Web e Blend
• Estensioni per il CSS 3
Introduzione ad HTML5
![Page 11: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/11.jpg)
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">
![Page 12: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/12.jpg)
Tag semantici
![Page 13: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/13.jpg)
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>
![Page 14: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/14.jpg)
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
![Page 15: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/15.jpg)
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
![Page 16: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/16.jpg)
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>
![Page 17: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/17.jpg)
Video,canvas e SVG
![Page 18: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/18.jpg)
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);
![Page 19: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/19.jpg)
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>
![Page 20: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/20.jpg)
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
![Page 21: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/21.jpg)
Drag And Drop e File API
![Page 22: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/22.jpg)
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>
![Page 23: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/23.jpg)
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);
![Page 24: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/24.jpg)
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>
![Page 25: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/25.jpg)
www.buildwindows.com
Drag And Drop e File API
demo
![Page 26: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/26.jpg)
Application Cache API
![Page 27: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/27.jpg)
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
![Page 28: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/28.jpg)
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">
![Page 29: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/29.jpg)
Web Workers
![Page 30: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/30.jpg)
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
![Page 31: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/31.jpg)
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
![Page 32: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/32.jpg)
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!');
![Page 33: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/33.jpg)
www.buildwindows.com
Web Workers
demo
![Page 34: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/34.jpg)
CSS 3
![Page 35: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/35.jpg)
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
![Page 36: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/36.jpg)
www.buildwindows.com
• Segna la fine di uno dei più antichi problemi del web
• rendere tondo ciò che è quadrato
CSS 3 – Rounded Corners
![Page 37: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/37.jpg)
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
![Page 38: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/38.jpg)
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;
}
![Page 39: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/39.jpg)
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;}}
![Page 40: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/40.jpg)
www.buildwindows.com
Transizioni
demo
![Page 41: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/41.jpg)
Form Validation
![Page 42: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/42.jpg)
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
![Page 43: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/43.jpg)
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
![Page 44: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/44.jpg)
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!!!
![Page 45: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/45.jpg)
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
![Page 46: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/46.jpg)
www.buildwindows.com
Form Validation
demo
![Page 47: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/47.jpg)
La guerra dei browser
![Page 48: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/48.jpg)
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
![Page 49: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/49.jpg)
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
![Page 50: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/50.jpg)
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) {}
![Page 51: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/51.jpg)
Q&A
![Page 52: HTML5](https://reader038.fdocument.pub/reader038/viewer/2022103001/558a1c1ad8b42acd618b4741/html5/thumbnails/52.jpg)
Grazie per l’attenzione