HTML 5. on-line cartaceo. Mark Pilgrim. diveintohtml5.ep.io O'Reilly. Tecnologie di Sviluppo per il WEB 1

Transcript

1 HTML 5 diveintohtml5.ep.io O'Reilly Mark Pilgrim on-line cartaceo Tecnologie di Sviluppo per il WEB 1

2 Scopo di HTML 5 Tra gli obiettivi che gli sviluppatori si sono proposti ci sono: C o n t i n u a r e a m a n t e n e r e l e potenzialità delle versioni precedenti. Mark-up semantici per una migliore leggibilità del codice Per esseri umani (non-vedenti, etc...) Per spider e SEO Ridurre u so d i plug-in nelle applicazioni web Tecnologie di Sviluppo per il WEB 2

3 Sintassi HTML5 è compatibile con HTML4 e XHTML1, ma non è compatibile con caratteristiche SGML esoteriche di HTML4, processing instructions shorthand markup (Che noi non abbiamo neanche visto dato che non sono supportati dai browser) I documenti che usano sintassi HTML sono serviti con il text/html media type (MIME TYPE) Tecnologie di Sviluppo per il WEB 3

4 MIME Types Web-server spedisce vari header prima di spedire la pagina di mark-up Tra i più importanti: Content-type: text/html È detto MIME-type della pagina Questo header è l'unica cosa che determina cosa è una particolare risorsa E quindi come deve essere resa Tecnologie di Sviluppo per il WEB 4

5 Rilevare HTML5 Il DOM costruito dal browser per una pagina è costituito da oggetti, che rappresentano gli elementi HTML della pagina: Ognuno ha delle proprietà In HTML5, ci sono oggetti che hanno una proprietà unica Li identifica quindi univocamente. Ci sono 4 tecniche per il rilevamento Tecnologie di Sviluppo per il WEB 5

6 Rilevare HTML5: Le 4 tecniche 1) Testare se una certa proprietà esiste Su un oggetto globale (ad esempio) 2) Creare un elemento e...goto 1 3) Creare un elemento, verificare se esiste un metodo, chiamarlo e verificare il valore restituito 4)Creare un elemento, settare una proprietà ad un valore e verificare se la proprietà ha mantenuto quel valore. Tecnologie di Sviluppo per il WEB 6

7 Rilevare HTML5: Modernizr Una facile alternativa è quella di usare la libreria open-source Javascript (valida anche per CSS3) Modernizr <script src="modernizr.min.js"> </script> if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } Esempio Tecnologie di Sviluppo per il WEB 7

8 Geolocation Dove sei? Indirizzo IP, wireless, cellullare, gps Le API geolocation consentono di condividere la propria posizione con siti ritenuti affidabili Latitudine e longitudine sono rese disponibili a JS nella pagina web, che quindi le può mandare al server web. Tecnologie di Sviluppo per il WEB 8

9 Proprietà geolocation È una nuova proprietà di navigator Esempio: function getlocation() { if (Modernizr.geolocation) { navigator.geolocation.getcurrentposition(showmap); } else { // non c'è supporto nativo} } A questo punto il browser mostra una finestra pop-up (non bloccante) chiedendo se l'applicazione può spedire i dati. showmap è una call-back function (definita dal programmatore) Tecnologie di Sviluppo per il WEB 9

10 Geolocation: funzione showmap function showmap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // qui qualcosa da mostrare: una mappa? } La funzione callback è chiamata con un singolo parametro, che è un oggetto con due proprietà: 1. coords 2. timestamp Tecnologie di Sviluppo per il WEB 10

11 Geolocation:Proprietà dell'oggetto position 1. coords: coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeaccuracy coords.heading coords.speed 2. timestamp Tecnologie di Sviluppo per il WEB 11

12 Geolocation: Esempio Esempio Tecnologie di Sviluppo per il WEB 12

13 Local Storage HTML5 ha introdotto il concetto di localstorage, ovvero un sistema di memorizzazione e gestione delle informazioni sul computer dell'utente che ci consente di memorizzare fino a 5 mega di dati. Ma esiste già? I cookie, ma: 1. Inclusi in ogni request a) rallenta il server b) trasmessi in chiaro (ma se si usa https...) 2. Limitati a 4KB Sufficienti a rallentare, ma non sufficienti per memorizzare qualcosa di significativo Tecnologie di Sviluppo per il WEB 13

14 Local storage: desiderata Più spazio......sul client che persista dopo un refresh......e che non sia trasmesso al server! è chiamato anche HTML5 storage DOM storage limite di 5MB Tecnologie di Sviluppo per il WEB 14

15 Local Storage: storage detection usiamo Modernizr if (Modernizr.localstorage) { // window.localstorage è disponibile } else { // non c'è supporto nativo } È una proprietà dell'oggetto window Tecnologie di Sviluppo per il WEB 15

16 Local Storage: HTML5 storage È basato su coppie chiave/valore - Att.ne: valori sono stringhe (...nel caso usare parseinteger/parsefloat) Metodi dell'oggetto localstorage: var foo = localstorage.getitem( bar ); localstorage.setitem( bar, foo); Il codice sopra può essere riscritto con un array associativo: var foo = localstorage[ bar ]; localstorage[ bar ] = foo; Altri metodi removeitem(key); clear(); key(n) per ottenere l' n-ma chiave Tecnologie di Sviluppo per il WEB 16

17 Local Storage: tracciare modifiche Viene lanciato l'evento storage sull'oggetto window quando... setitem() removeitem() clear() effettivamente provocano un cambiamento dello stato della memoria se si setta una chiave al suo valore attuale o si cancella una memoria vuota, allora non viene lanciato l'evento Qualche problema con IE per la gestione degli eventi... Tecnologie di Sviluppo per il WEB 17

18 Nota La funzione associata all'evento storage avrà un solo parametro che sarà inizializzato di default con un oggetto StorageEvent Tecnologie di Sviluppo per il WEB 18

19 Proprietà evento EventStorage key La chiave che è stata aggiunta, rimossa, o modificata oldvalue Il valore precedente o null se l'item è nuovo newvalue Il valore nuovo o null se l'item è stato rimosso url La url che ha chiamato il metodo che ha scatenato l'evento Tecnologie di Sviluppo per il WEB 19

20 Lavorare offline Semplificando il tutto... È una lista di URL dirette a : HTML, CSS e JS file con immagini e altre risorse La home page punta al manifest file Il browser legge questa lista, scarica le risorse elencate, le mette in cache e le mantiene aggiornate da questo momento in poi. Quando si tenta di accedere al Web senza connessione, si viene rediretti lì Tecnologie di Sviluppo per il WEB 20

21 Local Storage: lavorare offline Gran parte del lavoro spetta ora allo sviluppatore. Come si stabilisce se si è off-line? c'è una variabile nel DOM indicante se si è off-line ci sono eventi scatenati al passaggio di stato on/off Tecnologie di Sviluppo per il WEB 21

22 Local Storage: Il file cache.manifest Per iniziare il download ed il caching delle risorse: <!DOCTYPE html> <html manifest= /cache.manifest > <body>... Necessario il content-type text/cache-manifest Tecnologie di Sviluppo per il WEB 22

23 Configurazione di Apache In Apache nel file httpd.conf # Apache mimetype configuration text/cache-manifest manifest Se non possiamo accedere al file httpd.conf, allora nel file.htaccess AddType text/cache-manifest.manifest Accertarsi che l'estensione dei file sia.manifest Tecnologie di Sviluppo per il WEB 23

24 Local Storage: Manifest file La prima linea del file è: CACHE MANIFEST Ha tre sezioni, marcate da header: explicit CACHE online whitelist NETWORK fallback FALLBACK Se non sono esplicitate, il default è la sezione explicit Tecnologie di Sviluppo per il WEB 24

25 Local Storage: explicit CACHE MANIFEST /clock.css /clock.js /clock-face.jpg Non ha header, quindi questa è la sezione explicit Queste risorse sono scaricate e messe in cache e rese disponibili se si va offline Tecnologie di Sviluppo per il WEB 25

26 Local Storage: online-whitelist CACHE MANIFEST NETWORK: /tracking.php CACHE: /clock.css /clock.js /clock-face.jpg NETWORK è la online-whitelist Non va mai in cache CACHE è la explicit Tecnologie di Sviluppo per il WEB 26

27 Local Storage: fallback CACHE MANIFEST FALLBACK: / /offline.html NETWORK:... Risorse sostitutive di quelle online che per qualche motivo non sono andate in cache. Lo slash indica qualsiasi pagina del nostro sito e se non c'è la risorsa disponibile in cache si usa /offline.html Tecnologie di Sviluppo per il WEB 27

28 Warning: L'aggiornamento di un file incluso nel manifest non comporta l'aggiornamento della versione in cache Perché il browser, per verificare se ci sono stati aggiornamenti, controlla il contenuto del file manifest e... questo non è cambiato! Ogni volta che viene modificato un file della cache è necessario cambiare anche il file manifest Ad esempio cambiare un commento Tecnologie di Sviluppo per il WEB 28

29 Abbreviare i tag (1) HTML 4: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict EN > HTML 5: <!DOCTYPE html> Tecnologie di Sviluppo per il WEB 29

30 Abbreviare i tag (2) HTML 4: <html xmlns= lang= en xml:lang= en > HTML 5: <html lang= en > Tecnologie di Sviluppo per il WEB 30

31 Abbreviare i tag (3) HTML 4: <meta http-equiv= Content-Type content= text/html ; charset= utf-8 /> HTML 5: <meta charset= utf-8 > Tecnologie di Sviluppo per il WEB 31

32 Abbreviare i tag (4) Tag <link> con attributo rel Link a risorse esterne Per arricchire il documento Link a risorse interne Esempio: <link rel=stylesheet href= file.css /> Piccola ottimizzazione: Eliminazione di type= text/css Tecnologie di Sviluppo per il WEB 32

33 ...non solo abbreviare Ma anche nuovi elementi semantici: article embed aside figcaption audio figure bdo footer canvas header command hgroup datalist keygen details mark meter nav output, progress rp rt ruby section source summary time video wbr Tecnologie di Sviluppo per il WEB 33

34 TAG SEMANTICI header nav section article aside footer Ad esempio, header Sostituisce <div id= header...> In maniera molto naturale utile per blind-people e motori-di-ricerca Tecnologie di Sviluppo per il WEB 34

35 Tag Semantici: Terminologia <section> Definisce un contenuto generico <article> Rappresentare articoli indipendenti <header>, <footer> Blocchi di contenuti topmost e bottommost <nav> Crea un menu di navigazione <aside> Contenitore di approfondimento SKIP Tecnologie di Sviluppo per il WEB 35

36 Tag Semantici: esempio (1) Tecnologie di Sviluppo per il WEB 36

37 Article Il tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito (infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine). In sostanza, anche se nelle specifiche non è espresso, l'elemento <article> rappresenta una forma particolare di <section> Tecnologie di Sviluppo per il WEB 37

38 Navigation Il tag <nav> è definito per quella parte della pagina che contiene i link di navigazione interni al sito. Questo contenitore di link deve essere la barra di navigazione principale del sito e può essere un menu verticale, orizzontale, con sottomenu a comparsa ecc... Tecnologie di Sviluppo per il WEB 38

39 Navigation: Esempio VECCHIO CODICE <div id= nav > <ul> <li><a href= # >home</a></li> <li><a href= # >blog</a></li> <li><a href= # >gallery</a></li> <li><a href= # >about</a></li> </ul> </div> Tecnologie di Sviluppo per il WEB 39

40 Navigation: Esempio HTML5 <nav> <ul> <li><a href= # >home</a></li> <li><a href= # >blog</a></li> <li><a href= # >gallery</a></li> <li><a href= # >about</a></li> </ul> </nav> Cosa c'è di nuovo? Semanticamente si sta dicendo che è la lista di navigazione e non una semplice lista Tecnologie di Sviluppo per il WEB 40

41 Footers Non si deve però intendere il tag footer come piè di pagina ma come footer della section in cui è incluso (come con il tag header): - Non necessariamente deve essere inserito solo alla fine di un documento - All'interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo stesso elemento. Semplifica di molto il mark-up delle pagine Tecnologie di Sviluppo per il WEB 41

42 Footer: Esempio HTML4 <div id= footer > <p> qui ci va tutto quello che normalmente va in un footer... </p> </div> HTML5 <footer> qui ci va tutto quello che normalmente va in un footer... </footer> Tecnologie di Sviluppo per il WEB 42

43 Section Il tag <section> è utile per definire porzioni di pagina che indicano elementi differenti. Questo elemento contiene, spesso, un <header> e un <footer>. L utilità non è solo pratica (nella divisione del codice), ma anche semantica per permettere di differenziare le sezioni del sito. Tecnologie di Sviluppo per il WEB 43

44 Section: Esempio... <section> <h1>wwf</h1> <p>the World Wildlife Foundation was born in </p> </section>... Tecnologie di Sviluppo per il WEB 44

45 Aside Rappresenta una sezione di una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell'elemento padre che la contiene, e che potrebbero essere considerate distinte da quest'ultimo. Ѐ contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità, bookmark e così via Tecnologie di Sviluppo per il WEB 45

46 Aside: Esempio... <p>la mia famiglia ha visitato il centro Epcot questa estate.</p> <aside> <h4>epcot Center</h4> Il Centro Epcot è un parco tematico a Disney World, in Florida. </aside> Tecnologie di Sviluppo per il WEB 46

47 TAG DI INTERATTIVITÀ CANVAS COMMAND DETAILS BACK Tecnologie di Sviluppo per il WEB 47

48 Canvas RFC: area (tela) bitmap, dipendente dalla risoluzione per grafici, giochi, immagini visuali al volo. Area rettangolare in cui usare JS per disegnarci. Non ha un suo contenuto o un suo bordo... <canvas id= a width= 300 height= 225 ></canvas> var acanvas=document.getelementbyid( a );... Tecnologie di Sviluppo per il WEB 48

49 Canvas: Alcune funzioni getcontext( 2d ) Il contesto: dove accade tutto fillrect(x,y,widht, height) Disegna un rettangolo riempito con lo stile definito da... fillstyle, strokestyle Colore strokerect(x,y,width, height) Disegna un rettangolo ma solo con i bordi colorati con il colore indicato da strokestyle ClearRect Cancella il rettangolo Tecnologie di Sviluppo per il WEB 49

50 Canvas: Esempio var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); //Quadrato ctx.fillstyle='#ff0000'; ctx.fillrect(20,30,100,100);... Esempio Tecnologie di Sviluppo per il WEB 50

51 Command Il tag <command> rappresenta un comando che l'utente può invocare ed è solitamente utilizzabile all'interno di toolbar e nel tag menu.... <menu> <command onclick="alert('hello')">click Me!</command> </menu> Esempio Tecnologie di Sviluppo per il WEB 51

52 Details Il tag details rappresenta un widget informativo da cui l'utente può ottenere informazioni supplementari o controlli. Utilizzato con summary <details> <summary>copyright </summary> <p>all pages and graphics on this web site are the property of </details> the company Refsnes Data.</p> Funziona sotto Chrome Tecnologie di Sviluppo per il WEB 52

53 TAG DI MULTIMEDIALITÀ NATIVA VIDEO AUDIO EMBED Tecnologie di Sviluppo per il WEB 53

54 Video Youtube: incanalati con plug-in Flash (altri con QuickTime, RealPlayer) HTML5 ha uno standard per far girare i video in una pagina web con <video> È responsabilità nostra stabilire quale browser supporta quale container (avi,mp4, ogg, flash, etc.) e quale codec Tecnologie di Sviluppo per il WEB 54

55 Video Il container in realtà stabilisce come memorizzare i file, non cosa memorizzare Analogamente a zip, tar, etc. che comprimono qualsiasi tipo di file Il codec è il formato vero e proprio Tecnologie di Sviluppo per il WEB 55

56 Video: Attributi Il tag <video> propone alcuni attributi specifici, oltre a quelli generici di ogni tag: poster: l indirizzo di una immagine statica per rimpiazzare il video se il browser non è in grado di visualizzarlo controls: indica se deve essere visualizzata una interfaccia per controllare la riproduzione, l interfaccia può permettere le funzioni: play, pause, salto ad una posizione del video (seek), cambio del volume, loop: indica se la riproduzione deve riprendere dall inizio automaticamente al momento che arriva alla fine del video Tecnologie di Sviluppo per il WEB 56

57 Video: un semplice mark-up <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> controls: saranno mostrati i controlli. Ci sono software per fare l'encoding nei diversi container e codec (e.g.: firefogg) Tecnologie di Sviluppo per il WEB 57

58 Video: Esempio <video controls="true" height="350" width="350" poster="asd.jpg"> <source src="auto.mp4" type="video/mp4"> <!--Chrome efirefox --> </source><source src="auto.webm" type="video/webm"> <!-- Firefox e Opera --> </source><source src="auto.ogg" type="video/ogg"> Il tuo browser non supporta il tag video. Aggiornalo! </video> Esempio Tecnologie di Sviluppo per il WEB 58

59 Audio Il tag <audio> rappresenta un suono o uno stream audio.... <audio controls="controls"> <source src="horse.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio> Esempio Tecnologie di Sviluppo per il WEB 59

60 Embed L'elemento <embed> è già utilizzato da anni per inserire contenuti interattivi o multimediali. Era stato deprecato in HTML 4, ora è stato reintrodotto <body> <embed src="helloworld.swf" /> </body Embed Tecnologie di Sviluppo per il WEB 60

61 TAG DI TEMPO E UNITÀ DI MISURA MATTER PROGRESS TIME Tecnologie di Sviluppo per il WEB 61

62 Meter Il tag <meter> rappresenta una misura scalare all'interno di un intervallo noto, o un valore frazionario.... <body> <meter value="2" min="0" max="10">2 out of 10</meter> <br /> <meter value="0.6">60%</meter> </body> Esempio Tecnologie di Sviluppo per il WEB 62

63 Progress Il tag <progress> rappresenta lo stato di completamento di un compito e può essere di due tipi: - indeterminato - determinato... <body> The object's downloading progress: <progress value="22" max="100"></progress> </body> Esempio Tecnologie di Sviluppo per il WEB 63

64 Times Questo elemento è inteso come un modo moderno per codificare le date e gli orari in maniera leggibile anche per i computer Non è supportato da nessun browser <article> <header> <time pubdate datetime= > October 22, 2012 </time> </article> Esempio Tecnologie di Sviluppo per il WEB 64

65 Moduli: (1/12) Tutti i browser se non riconoscono un tipo, lo rendono come text Placeholder L attributo placeholder di HTML5 consente di visualizzare un breve suggerimento all interno delle caselle input di tipo testo e delle textarea che scompare quando si dà il focus. <form> <input name= q placeholder= mittente... > <input type= submit value= ricerca tra le > </form> Esempio Tecnologie di Sviluppo per il WEB 65

66 Moduli: (2/12) Autofocus <form> <input name=q autofocus> <script> if (!( autofocus in document.createelement( input ))){ document.getelementbyid( q ).focus(); } </script> <input type=submit value=ricerca> </form> Esmepio Tecnologie di Sviluppo per il WEB 66

67 Moduli: (3/12) <form> <input type= > <input type= submit value= VAI > </form> La resa è identica al tipo text, ma in alcuni casi, come per l'iphone/htc, cambia la tastiera offerta per comprendere tasti utili ) Esempio Tecnologie di Sviluppo per il WEB 67

68 Moduli: (4/12) Indirizzi Web <form> <input type= url > <input type= submit value= VAI > </form> La resa è identica al tipo text, ma in alcuni casi, come per l'iphone/htc, cambia la tastiera offerta per comprendere tasti utili (.com, ) Esempio Tecnologie di Sviluppo per il WEB 68

69 Moduli: (5/12) Numeri <form> <input type= number min= 0 max= 10 step= 2 value= 6 <input type= submit value= VAI > </form> Alcune funzioni JS gratis a corredo Input.stepUp(n), input.stepdown(n), input.valueasnumber Iphone/HTC: Tastierino numerico, operatori,... Esempio Tecnologie di Sviluppo per il WEB 69

70 Moduli: (6/12) Numeri come slider <form> <input type= range min= 0 max= 10 step= 2 value= 6 <input type= submit value= VAI > </form> ESEMPIO Tecnologie di Sviluppo per il WEB 70

71 Moduli: (7/12) Calendario per scelta data <form> <input type= date > </form> <script> var i=document.createelement( input ); i.setattribute( type, date ); if (i.type == text ) { //usa alternative... } </script> ESEMPIO Tecnologie di Sviluppo per il WEB 71

72 Moduli: (7/12) Calendario per scelta data Esempio di validazione non andata a buon fine Tecnologie di Sviluppo per il WEB 72

73 Moduli: (8/12) Caselle di ricerca <form> <input name= q type= search > <input type= submit value= Find > </form> In Safari la casella ha gli angoli arrotondati In Chrome e Safari Guardate a destra quando si inizia a scrivere... Non è detto che funzioni... ESEMPIO Tecnologie di Sviluppo per il WEB 73

74 Moduli: (9/12) Scelta di colori <form> <input type= color > </form> Scelto un colore, restituisce la rappresentazione esadecimale Supportato solo da Opera 11, per il momento Tecnologie di Sviluppo per il WEB 74

75 Il browser supporta HTML 5? Provate Fornisce un punteggio (max 500) che indica quanto il browser supporti HTML 5 Firefox Safari Chrome Tecnologie di Sviluppo per il WEB 75