16/04/15mb.unisalento.it/fondinfo14-15/allegati/html5.pdf · 1997 – html 4 – ”cougar” –...

16/04/15

1

Ing. Donato TARANTINO

[email protected]

“HTML5 is one of the fastest-growing technologies in web development. The reason for such a quick adoption is the technology’s usability across desktops and mobile devices. In theory, you program an application once, and it magically works everywhere. It also gives powerful native functionality through simple API access”

Fonte: [HTML5 in action ´  ROB CROWTHER

´  JOE LENNON

´  ASH BLUE

´  GREG WANISH]

16/04/15

2

16/04/15

3

Inizialmente il Web (HTML 4.0) era un insieme di documenti. Nel 1993, si registra l’aggiunta dei form, che erano dei semplici data entry. Tutta la logica era sui server. La svolta si ebbe nel ’99, con l’arrivo delle “XMLHTTPRequest” à HTML 4.01, e con l’affermarsi del codice Javascript.

Non è un caso infatti che è dal ‘99 che non si hanno aggiornamenti di specifiche, sino ad oggi!

Le differenze che scopriremo e che andremo ad approfondire, ed i miglioramenti nel passaggio tra HTML 4.01 ed HTML5 sono proprio nella facilità di costruire una applicazione browser-based con il linguaggio di programmazione Javascript.

´  HTML5 è una suite di tools per: ´  Markup (HTML 5)

´  Presentazione (CSS 3)

´  Interazione (DOM, Ajax, APIs)

´  ESTENSIONI:

´  Gestione Documentale: div, section, article, nav, aside, header, footer

´  Gestione Multimediale: Audio, Video and Embed

´  Canvas: Percorsi, Gradienti, manipolazione immagini, Eventi

´  Aggiunta di Microdati per risultati di ricerca maggiormente soddisfacenti (Google Rich Snippets)

16/04/15

4

´  1991 – HTML first mentioned – Tim Berners-Lee – HTML tags ´  1993 – HTML (first public version, published at IETF) ´  1993 – HTML 2 draft ´  1995 – HTML 2 – W3C ´  1995 – HTML 3 draft ´  1997 – HTML 3.2 – “Wilbur” ´  1997 – HTML 4 – ”Cougar” – CSS ´  1999 – HTML 4.01 (final) ´  2000 – XHTML draft ´  2001 – XHTML (final) ´  2008 – HTML5 / XHTML5 draft ´  2011 – feature complete HTML5 ´  2022 – HTML5 – final specification

´  Rendering Engine ´  Trident (IE)

´  WebKit (Chrome, Safari, Android, iPhone)

´  Gecko (Mozilla/Firefox)

´  Presto (Opera)

16/04/15

5

1.  Sintassi di markup;

2.  Canvas vs SVG;

3.  Local Storage;

4.  API(Application Programming Interface);

5.  Input Validations;

6.  Geolocalizzazione;

7.  WebSockets.







7.  WebSockets.

16/04/15

6

´  Uso base di HTML5;

´  Le Form “Enhancements”;

´  Nuovi markup semantici e funzionalità multimediali;

´  Gli Effetti del CSS.

<!DOCTYPE html>

<html lang="it">

<head> <meta charset="utf-8"> <script src="app.js"></script>

codice per il server: meta comandi, script, fogli di style, ecc.

</head>

<body> <h1>Hello, HTML5!</h1>

Codice per visualizzare: testo, immagini, moduli, ecc.

</body>

</html>

16/04/15

7

´  <section>

´  <header>

´  <nav>

´  <article>

´  <aside>

´  <footer>

Header

Navigation

Aside

Footer

Section

Article Footer

Article Footer

Article Footer

Figure

Image, Video, Quote, Table, etc…

Legend

´  Placeholder text

´  Specific text input: email, URL, number, search

´  Slider

´  Date picker

´  User Agent validation

16/04/15

8

´  New Input Types ´  Search

´  Number (spinboxes)

´  Range (sliders)

´  Color (color pickers)

´  Tel (for phone numbers)

´  Url

´  Email

´  Date (calendars)

´  Month

´  Week

´  Time

´  Datetime

´  Datetime+local (localized DateTime)

16/04/15

9

´  I nuovi Media Tags:

<video> Attributes: autoplay, controls, loop, height, width, src

<video width=“640" height=“480" preload controls> <source src=“../Siamo_Uguali.mp4“ /> <source src=“../Siamo_Uguali.ogg“ /> <source src=“../Siamo_Uguali.webm“ /> Video tag is not supported </video>

´  I nuovi Media Tags:

<audio> Attributes: autoplay, controls, loop, src

<audio width="360" height="240" controls= "controls" > <source src=“Siamo_Uguali.mp3" type="audio/mp3"> </source> Audio tag is not supported </audio>

16/04/15

10

´  E’ possibile ora realizzare:

http://mattbango.com/notebook/web-development/pure-css-timeline/

16/04/15

11

´ Rounded corners ´ Gradients ´ Box and text shadows ´ Fonts ´ Transparencies ´ Multiple background images and border images ´ Multiple columns and grid layout ´ Box sizing ´ Stroke and outlines ´ Animation, movement and rotation ´ Improved selectors

.amazing {

border: 1px solid blue;

color: red;

background-color: gold;

-webkit-border-radius: 40px;

-moz-border-radius: 40px;

border-radius: 40px;

-webkit-box-shadow: 8px 8px 6px #474747;

-moz-box-shadow: 8px 8px 6px #474747;

box-shadow: 8px 8px 6px #474747;

text-shadow: 8px 8px 2px #595959;

filter: dropshadow(color=#595959, offx=8, offy=8);

}

Amazing CSS Effects

http://css3generator.com/

16/04/15

12







7.  WebSockets.

16/04/15

13

´  Permette di definire dei rendering diamici basati su degli script, di forme in 2D ed immagini bitmap.

´  Modello Procedurale, a basso livello ´  E’ una grande matrice di pixel, ognuno dei quali modificabile singolarmente nelle sue

quattro componenti RGBA, rosso, verde, blu e alpha, la trasparenza.

´  Non ha un grafico di scena built-in;

´  Consiste in regioni disegnabili definite nell’HTML ´  Possiede attributi di larghezza ed altezza;

´  Accessibile tramite codice Javascript;

´  Usato per costruire grafici, animazioni,

giochi e composizioni di immagini.

´  In HTML:

26

<canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not supported. </canvas>

´  In JavaScript:

var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

16/04/15

14

<canvas id=“canvas” width=“150” height=“150”>

</canvas>

function draw() {

var canvas = document.getElementById(“canvas”);

if (canvas.getContext) {

var ctx = canvas.getContext(“2d”);

ctx.fillStyle = “rgb(200,0,0)”;

ctx.fillRect (10,10,55,50);

ctx.fillStyle = “rgb(0,0,200)”;

ctx.fillRect (30,30,55,50);

}

}

´  SVG è l’acronimo di Scalable Vector Graphics ´  E’ un linguaggio atto a descrivere grafica 2D;

´  Usato per applicazioni grafiche;

´  Definito tramite i tag XML propri;

´  Oramai, tutti I browser renderizzano SVG quasi fosse un PNG, GIF, o JPG

´  Gli utenti di IE (Internet Explorer) avranno bisogno di utilizzare il plugin “Adobe SVG Viewer”;

´  HTML5 permette l’embedding di SVG

´  Direttamente usando i tag <svg>...</svg>

´  https://developer.mozilla.org/en/SVG

28

16/04/15

15

29

“……..SVG images are defined in XML. As a result, every SVG element is appended to the Document Object Model (DOM) and can be manipulated using a combination of JavaScript and CSS. Moreover, you can attach an event handlers to a SVG element or update its properties based on another document event. Canvas, on the other hand, is a simple graphics API. It draws pixels (extremely well I might add) and nothing more. Hence, there's no way to alter existing drawings or react to events. If you want to update the Canvas image, you have to redraw it……..”

http://www.htmlgoodies.com/html5/other/html5-canvas-vs.-svg-choose-the-best-tool-for-the-job.html#fbid=xAbBQ463mco

30 https://msdn.microsoft.com/it-it/library/ie/gg193983(v=vs.85).aspx#Using_Canvas_AndOr_SVG

In genere, man mano che le dimensioni dello schermo aumentano e quindi man mano che aumenta il numero dei pixel da disegnare, le prestazioni della tecnologia Canvas peggiorano. Man mano che il numero di oggetti sullo schermo aumenta e che gli oggetti vengono aggiunti al modello DOM, le prestazioni della tecnologia SVG peggiorano.

16/04/15

16

16/04/15

17







7.  WebSockets.

´  Le WebStorage API nascono per risolvere due problematiche tipiche dei cookies; la loro limitata dimensione massima (tipicamente 4K) e l’impossibilità di avere cookies differenziati tra due diverse sessioni di navigazione sullo stesso dominio dallo stesso browser. Il secondo punto si esplicita molto bene cercando di mantenere aperti contemporaneamente due account Gmail sullo stesso browser, ogni navigazione sul primo comporterà il logout del secondo e viceversa.

´  I problemi in questione sono stati risolti creando due nuovi oggetti. sessionStorage consente di avere un meccanismo di persistenza dei dati distinto per ogni sessione di navigazione in ogni finestra, o tab, del browser. Usando sessionStorage sarebbe quindi possibile coordinare l’apertura contemporanea di due distinti account GMail sullo stesso browser. localStorage mantiene il comportamento del cookie essendo comune a tutte finestre del browser che condividono lo stesso dominio. Entrambi sono inoltre stati studiati per ospitare molti più dati, almeno 5Mb, ed essere persistenti anche alla chiusura ed alla riapertura del browser.

16/04/15

18

´  localStorage.setItem('nome',‘Donato');

´  ………

´  localStorage.getItem('nome'); // ritorna ‘Donato'

(CTRL + SHIFT + J in Chrome)

<form> <fieldset> <label for="value">enter key name:</label> <input type="text" id="key" /> <label for="value">enter key value:</label> <input type="text" id="value" /> </fieldset> <fieldset> <button type="button" onclick="setValue()"> store the key value</button> <button type="button" onclick="getValue()"> retrieve the key value</button> <button type="button" onclick="getCount()"> retrieve the number of keys</button> <button type="button" onclick="clearAll()"> clear all key values</button> </fieldset> </form>

´  In HTML:

16/04/15

19

var $ = function (id) { return document.getElementById(id); } function setValue() { window.localStorage.setItem($("key").value, $("value").value); } function getValue() {

alert(window.localStorage.getItem($("key").value)); } function getCount() {alert(window.localStorage.length);} function clearAll() {window.localStorage.clear();}

´  In Javascript:

´ Ricapitolando: ´ Oltre I cookies; ´ Manipolato da Javascript; ´ Persistenza; ´ 5MB di spazio per “origine”;

´ Sicurezza (nessuna comunicazione al di fuori del browser).

16/04/15

20

´ La property “sessionStorage” permette di accedere ad un’oggetto dello storage di Sessione. E’ molto simile a LocalStorage, la sola differenza è che la variabile che contiene il dato sarà ripulita alla chiusura della sessione in corso. L’aperture di una nuova pagina o di una nuova istanza del browser, farà in modo che una nuova sessione sia inizializzata, ripulendo automaticamente le variabili.

´ Ricapitolando: ´ Mantenuta sino a che il browser rimane aperto; ´ Ciascuna pagina o nuova tab ha una sua sessione; ´ Uso di DBMS quali IndexedDB o SQLite (Safari e Chrome

hanno implementato questa soluzione ad oggi). ´ E’ in ascesa WebDB, soluzione studiata ad-hoc.

16/04/15

21







7.  WebSockets.

What a programmer must know?

16/04/15

22

´ User Interface APIs: ´ Canvas;

´ Drag and Drop;

´ Applicazioni Offline;

´ Local Storage;

´ Estensioni all’oggetto HTMLDocument.

<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);

´  fillStyle; ´  fillRect(x, y, width, height)

16/04/15

23

´ strokeStyle: Sets the stroke color ´ strokeRect(x, y, width, height): Draws an rectangle with the

current strokeStyle ´ strokeRect: doesn’t fill in the middle. It just draws the edges ´ clearRect(x, y, width, height) clears the pixels in the specified

rectangle







7.  WebSockets.

16/04/15

24

´  Your Name: <input type="text" name="name" required>

´  Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

´  <input type="number“ min="0“ max="10“ step="2“ value="6">

´  Area Code: <input type= "text" name= "area_code" pattern= "[0-9] {3}" title= "Three digit area code."/>

16/04/15

25







7.  WebSockets.

´  L’utilizzo del metodo getCurrentPosition() permette all’engine che lo esegue di catturare la posizione dell’utente. L’esempio proposto in basso è un semplice geolocalizzatore, il quale ritorna latitudine e longitudine della posizione dell’utente attualmente occupata:

´  <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

http://www.w3schools.com/html/html5_geolocation.asp

16/04/15

26

´  function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center= "+latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; }

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map

´  getCurrentPosition()

coords.latitude The latitude as a decimal number

coords.longitude The longitude as a decimal number

coords.accuracy The accuracy of position

coords.altitude The altitude in meters above the mean sea level

coords.altitudeAccuracy The altitude accuracy of position

coords.heading The heading as degrees clockwise from North

coords.speed The speed in meters per second

timestamp The date/time of the response

16/04/15

27







7.  WebSockets.

´  Le WebSockets API introducono, nella loro estrema semplicità, una funzionalità tra le più attese ed emulate: la possibilità di stabilire e mantenere una connessione dati tra browser e server remoto sulla quale far transitare messaggi in entrambe le direzioni. Le attuali specifiche, che lasciano ben poco spazio per implementazioni del genere, hanno, nel corso degli anni, dato luogo a workaround più o meno esotici tra i quali l’utilizzo di socket in Flash pilotati via Javascript e della famosa tecnica di long polling (l’utilizzo continuo di chiamate AJAX mantenute aperte fino alla ricezione del dato o al tempo di timeout).

´  Le nuove API offrono invece un meccanismo ben più semplice grazie all’oggetto WebSocket, al metodo send e all’evento onmessage.

16/04/15

28

´  Questa tecnologia non consente di creare connessioni verso altri ben conosciuti protocolli, come ad esempio telnet, SMTP, IRC, etc., per due distinti motivi: ´  In primo luogo lo user agent implementa una policy che blocca l’accesso verso porte riservate

a servizi conosciuti (fanno eccezione solo la 80 e la 443);

´  In seconda istanza le comunicazioni viaggiano all’interno di un nuovo e specifico protocollo, chiamato con molta fantasia ‘The WebSocket Protocol‘ che richiama per certi aspetti, soprattutto durante l’handshake, una conversazione HTTP.

´  Tre Metodi:

var echo_service = new WebSocket('ws://echo.websocket.org');

´  La creazione di un nuovo WebSocket richiede come unico parametro obbligatorio l’url verso la quale si vuole stabilire la connessione. Il protocollo può essere ws o wss, dove il secondo indica la richiesta di una connessione sicura. Opzionalmente è possibile passare al costruttore anche una stringa o un array di sub-protocolli: valori arbitrari utili per comunicare al server un elenco di servizi che l’oggetto in costruzione può supportare. Ad esempio un server di chat potrebbe rispondere solo a richieste con protocollo ‘server_di_chat’, e via dicendo…

echo_service.onmessage = function(event){ alert(event.data);}

echo_service.onopen = function(){echo_service.send("hello!");}

´  La funzione associata all’handler onmessage non fa altro che stampare a video il messaggio ricevuto sul socket ogni qualvolta giunga qualcosa. La funzione send provvede all’invio, verso il server remoto, del testo passato come argomento. Da notare che l’invio deve essere necessariamente subordinato alla condizione di avvenuta connessione, notificata tramite l’evento onopen. Esistono altri eventi all’interno del ciclo vita di un WebSocket…

16/04/15

29

´  La possibilità di realizzare delle chiamate client con pochissimo codice JavaScript potrebbe diventare molto interessante. Dobbiamo però considerare che la maggior parte delle applicazioni concrete molto probabilmente richiede un server specifico, con una business logic realizzata in base alle esigenze del progetto. Questo rimane il punto debole della tecnologia, perché potrebbe richiedere tempi di sviluppo quasi paragonabili alle normali architetture client-server.

´  Ecco perché la possibilità di realizzare dei server tramite una soluzione come Node.js (o simile) rappresenta forse uno degli scenari più interessanti, che permetterebbe di ridurre tempi i costi di sviluppo realizzando applicazioni robuste e professionali. Data la crescente popolarità di Node.js possiamo ipotizzare che i WebSockets diventeranno presto uno strumento efficiente nella nostra cassetta degli attrezzi.







7.  WebSockets.

16/04/15

30

´  Consentire a tutti di avere il pieno controllo sulle applicaizioni in maniera native;

´  App cross-platform (Windows, Linux, iPhone, Android, etc.);

´  Le nuove funzionalità si basano su HTML, CSS, DOM e JavaScript;

´  Ridurre la necessità di installazioni di plugin esterne;

´  Migliorare la gestione degli errori;

´  Nuovi markup, per rimpiazzare le tecniche di scripting introdotte negli anni.

59

´  L’implementazione, nel browser è da considerarsi moooolto frammentata; ´  Nuovi standard sono in continuo sviluppo; ´  La specifica definitiva del HTML5 è prevista per il 2022;

´  L’HTML versione 5 arriva alle spalle dei sistemi di chat, di videofonia, delle super piattaforme di gaming : possibilità di gestire immagini e audio direttamente attraverso JavaScript, prefigurando un ritorno alla centralità del client;

´  Con HTML5 si respira aria nuova, il client e le connessioni paritetiche tornano al centro della scena, tutti editors e tutti producers, audio e immagini gestibili direttamente attraverso la semplice connessione web;

´  L’Html5 infilerà nei nostri hard disk una quantità impressionante di dati, ben oltre i vecchi cookies. Per leggere i contenuti multimediali, finisce la “dittatura dei software proprietario” (come Flash o Silverlight);

´  I cookies erano “fastidiosi”, ma “banali” (memorizzavano password per non doverle ridigitare ogni volta) e soprattutto potevano essere cancellati se sospetti. Invece Html 5 contiene un lato più oscuro: “consentirà, a chi ne avrà i mezzi e l’intenzione, di acquisire la nostra posizione geografica, le nostre foto, i testi (…), le nostre mail e altri dati ‘sensibili‘”: il tutto senza poterla eliminare.

´  Se le associazioni per la privacy temono la “rivoluzione Html5″, qualche motivo l’avranno: quando si smussano troppo gli angoli, come succede con certe tecnologie, c’è sotto qualcosa.

16/04/15

31

´  Total clearing house of HTML5 (start with the presentation) http://html5rocks.com

´  HTML5 Watch is a list of interesting RIA advances http://html5watch.tumblr.com

´  CSS3 Blog http://www.css3.info

´  Esperimenti in Chrome http://www.chromeexperiments.com

´  Apple HTML5 showcases http://www.apple.com/html5/

´  Canvas Demos http://www.canvasdemos.com

´  RIA Demos with browser support listed http://html5demos.com

´  Our Solar System http://neography.com/experiment/circles/solarsystem/

´  Pure CSS3 Animated AT-AT Walker from Star Wars http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-walker-from-star-wars-2.html

16/04/15

32

´  W3C http://dev.w3.org/html5/html-author/ http://w3.org/TR/css3-roadmap/

´  W3Schools HTML 5 Reference http://www.w3schools.com/html5/

´  Dive Into HTML 5 (prerelease site for an O’Reilly book) http://diveintohtml5.org

´  WebKit (Safari and Chromium) http://developer.apple.com/safari/library/navigation/ http://www.chromium/home/

´  Mozilla http://developer.mozilla.org/en/html/html5/

´  IE 8 & 9 http://msdn.microsoft.com/en-us/library/aa737439.aspx http://ie.microsoft.com/testdrive/

´ HTML5 non si presta ad essere rilevato, ma gli elementi visti oggi ne riveleranno la presenza o meno all’interno della nostra pagina web: ´ Ci ritroveremo a dover affrontare tag quali: <canvas>, <video>, etc.

´ Le specifiche di HTML5 definiscono come i tags interagiscono con il codice Javascript attraverso il DOM (Document Object Model);

64

16/04/15

33

´ HTML 5 Rocks – Examples, Demos, Tutorials ´ http://www.html5rocks.com/

´ HTML 5 Demos ´ http://html5demos.com/

´ Internet Explorer 9 Test Drive for HTML 5 ´ http://ie.microsoft.com/testdrive/

´ Apple Safari HTML 5 Showcases ´ http://www.apple.com/html5/

´ Dive into HTML 5 ´ http://diveintohtml5.org/

65

16/04/15

34

Domande?

[email protected]

16/04/15mb.unisalento.it/fondinfo14-15/allegati/html5.pdf · 1997 – html 4 – ”cougar” –...

Documents