Domino e HTML5, #dd13

842 views

Published on

Domino e HTML5

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

No Downloads
Views
Total views
842
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • < details > < summary > < label for = "name" > Una volta le chiamavamo sezioni : </ label > </ summary > < p > e nel mezzo ci mettevano campi o sub form nascosti ... < xp:br ></ xp:br > adesso quelli dell'HTML5 vogliono fare i fighi </ p > </ details >
  • Domino e HTML5, #dd13

    1. 1. Domino e HTML5 Xpage & HTML5 “Standard” Tozzi Luca
    2. 2. Chi Sono Tozzi Luca: ● Lavoro in Domino da 15 anni circa ● Nel corso degli anni mi sono ri-certificato ● Ho seguito un prodotto in ambito HR sviluppato in Domino ● Attualmente lavoro per avviare un nuovo progetto : HR2O ● Credo nel Cloud e nel Mobile
    3. 3. Index • Cos'è l'HTML5Cos'è l'HTML5 • Tra semantica e stileTra semantica e stile • Utilizzare il Drag & DropUtilizzare il Drag & Drop • Leggere un fileLeggere un file • Scrivere in localeScrivere in locale • DisegnareDisegnare • Sapere dove sei?Sapere dove sei? • Effettuare una fotoEffettuare una foto
    4. 4. Cos'e' l'HTML5 - Storia • E' la quinta revisioneE' la quinta revisione dello “Standard” HTMLdello “Standard” HTML • HTML5 è ancora in via di sviluppo.HTML5 è ancora in via di sviluppo. Nonostante ciò i browser principaliNonostante ciò i browser principali supportano molti dei nuovi elementisupportano molti dei nuovi elementi • Nasce nel 2006 dalla collaborazione WHATWGNasce nel 2006 dalla collaborazione WHATWG (Apple, Mozilla, Opera,..) ed il W3C quando quest'ultimo(Apple, Mozilla, Opera,..) ed il W3C quando quest'ultimo lascia il percorso verso l'icompatibilità dell'XHTML 2.0lascia il percorso verso l'icompatibilità dell'XHTML 2.0 • Candidate Recommendation pubblicata il 17/12/2012Candidate Recommendation pubblicata il 17/12/2012 • W3C annuncia la prima versione per fine 2014W3C annuncia la prima versione per fine 2014
    5. 5. Cos'e' l'HTML5 – Scope • Disaccoppiamento tra :Disaccoppiamento tra : - struttura (markup)- struttura (markup) - resa (carattere, colori, ecc..)- resa (carattere, colori, ecc..) - contenuti di una pagina web- contenuti di una pagina web • Usare metafore di interazioneUsare metafore di interazione tipiche di applicazioni desktoptipiche di applicazioni desktop • Linguaggio indipendente dal dispositivoLinguaggio indipendente dal dispositivo
    6. 6. Cos'e' l'HTML5 – Funzioni Possibili applicazioni :Possibili applicazioni : • salvare informazioni sul device dell’utentesalvare informazioni sul device dell’utente • accedere all’applicazione anche off-lineaccedere all’applicazione anche off-line • pilotare flussi multimediali (video, audio)pilotare flussi multimediali (video, audio) • drag and dropdrag and drop • generare grafica 2D/3D in tempo realegenerare grafica 2D/3D in tempo reale • eseguire operazioni in backgroundeseguire operazioni in background • comunicare in modo bidirezionale con il servercomunicare in modo bidirezionale con il server • accedere informazioni dei sensori qualiaccedere informazioni dei sensori quali • gps, microfono e webcamgps, microfono e webcam
    7. 7. Cos'e' l'HTML5 – Sintesi • • ~= + +~= + +
    8. 8. Tra semantica e stileTra semantica e stile – New TAGs Lista dei tags già supportati dai browser <article> <rp> <aside> <rt> <audio> <ruby> <canvas> <section> <header> <source> <hrgroup> <video> <nav>
    9. 9. Tra semantica e stileTra semantica e stile – Other TAG Ancora non tutti i tag sono standard su tutti i browser <command> <progress> <datalist> <summary> <details> <time> <meter> <track> <output> <wbr>
    10. 10. Tra semantica e stileTra semantica e stile – Old TAGs I seguenti elementi HTML 4.01 sono stati rimossi dal nuovo standard <acronym> <applet> (<object>) <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>
    11. 11. Tra semantica e stileTra semantica e stile - DocType Document Type Definition La sintassi HTML di HTML5 richiede la dichiarazione di un doctype in testa al documento stesso. – <!DOCTYPE html> Come configurare il DocType? ● Notes.ini – DominoCompleteDoctype ● $$HTMLFrontMatter con valore "<!doctype html>" (per programmazione standard da Domino 7.0.2) ● xsp.html.doctype=<!DOCTYPE html>
    12. 12. Tra semantica e stile – Use XPageTra semantica e stile – Use XPage Come utilizzare i nuovi tag nelle Xpages ● I tags possono essere inseriti direttamente in Source <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"> <details> <summary> <label for="name">Una volta le chiamavamo sezioni:</label> </summary> <p> e nel mezzo ci mettevano campi o sub form nascosti... <xp:br></xp:br> adesso quelli dell'HTML5 vogliono fare i fighi </p> </details> </xp:view>
    13. 13. Tra semantica e stile – TryTra semantica e stile – Try <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header> <nav> <ul> Navigation... </ul> </nav> <section> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> </section> <aside> Top links... </aside> <figure> <img src="..."/> <figcaption>Chart 1.1</figcaption> </figure> <footer> Copyright © <time datetime="2010-11-08">2010</time> </footer> </body>
    14. 14. Tra semantica e stile – TryTra semantica e stile – Try ● Visualizzazione dello stato di avanzamento tramite min max e values <progress>/<meter> ● Selezionare i valori Lista di valori predefinita <datalist>
    15. 15. Tra semantica e stile – TryTra semantica e stile – Try DEMO
    16. 16. Tra semantica e stile – AttributeTra semantica e stile – Attribute Pochi Attribute possono “rivestire a festa” la ns. app. ● Download per definire il nome del file da scaricare <xp:link escape="true" text="Download controllato dei files" id="link2" value="province.csv?OpenFileResource"> <xp:this.attrs> <xp:attr name="download" value="province.csv"> </xp:attr> </xp:this.attrs> </xp:link>
    17. 17. Tra semantica e stile – AttributeTra semantica e stile – Attribute Gà presente nel Designer i nuovi type del control Edit Box ● <input type="range" min="0" max="50" value="10" /> ● <input type="date" min="2013-01-01" max="2013-31-12" value="2013-01-01"/> ● <input type="color" placeholder="e.g. #bbbbbb" /> <xp:inputText id="inputRange" type="range" value="50"> <xp:this.attrs> <xp:attr name="min" value="0"></xp:attr> <xp:attr name="max" value="100"></xp:attr> </xp:this.attrs> </xp:inputText>
    18. 18. Tra semantica e stile – AttributeTra semantica e stile – Attribute Alcuni attributi non sono implementati e quindi dovranno essere aggiunti tramite la gestione degli Attributes nelle XPage ● Required (rende il campo obbligatorio) ● PlaceHolder (per impostare un valore di aiuto) ● Min e Max (imposta i valori minimi e massimi) ● Pattern (regexp) (regola il pattern dei valori inseribili) ● X-webkit-speech (per impostare la scrittura vocale)
    19. 19. Tra semantica e stile – AttributeTra semantica e stile – Attribute DEMO
    20. 20. Tra semantica e stile – AttributeTra semantica e stile – Attribute Input type for Mobile type = “number” type=”email” type=”tel”
    21. 21. HTML5 e CSS3 Il sogno dei Designers utilizzare il Font preferito!! Web font permette di definire nel file css anche il source del font @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('https://themes.googleusercontent.com/font? kit=7KXg6nyyqN8gyMoNwQ7aOQ') format('woff'); } Dopo è sufficiente utilizzarlo come un font già installato <xp:text style="font-family:roboto;font-size:18pt"> Questo è stato scritto in Robotos </xp:text>
    22. 22. HTML5 e CSS3 ● Colori differenti nelle viste per righe pari e dispari .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; } ● Possibilità di arrotondare i bordi border-radius: -webkit-border-image:
    23. 23. HTML5 e CSS3 ● Shadow (Ombre) attorno testo e boxs Box-shadow: Text-shadow: ● Immagini al posto di Bordi border-image:
    24. 24. Tra semantica e stile – AttributeTra semantica e stile – Attribute DEMO
    25. 25. Drag & Drop Il Drag&Drop è una delle user experience più utili nel Desktop. Che bello sarebbe nella WebApp?? Aggiungere la proprietà “Draggable” all'oggetto trasportabile draggable =”true” L'attributo genera la possibilità di intercettare i seguenti eventi dragstart,drag, dragenter, dragleave, dragover, dragend A questo punto con onDragStart si informa l'evento dell'ID sorgente event.dataTransfer.setData("Text", event.target.id); n.b. <img> ed <a> hanno insita la proprietà draggable
    26. 26. Drag & Drop Nelle XPage si può facilmente abbinare ad una DataTable gli attributi utili : <xp:text escape="true" id="dragItevent" value="#{draggable.desProvincia}"> <xp:this.attrs> <xp:attr name="draggable" value="true"></xp:attr> <xp:attr name="ondragstart" value="dragIt(event);"></xp:attr> </xp:this.attrs> </xp:text> Con la relativa funzione di salvataggio ID: function dragIt(theEvent) { //tell the browser what to drag theEvent.dataTransfer.setData("Text", theEvent.target.id); }
    27. 27. Drag & Drop A questo punto non ci resta altro che stare in ascolto dell'evento onDrop nell'oggetto di destinazione <xp:panel style="background-color:rgb(255,255,0);height:100px;width:px; border- color:rgb(0,0,0);border-width:thin;border-style:solid" id="dropplace"> <xp:this.attrs> <xp:attr name="ondrop" value="dropIt(event);"></xp:attr> <xp:attr name="ondragover" value="event.preventDefault();"></xp:attr> </xp:this.attrs> </xp:panel> Ove tramite l'oggetto event è possibile richiedere l'id dell'oggetto che ha attivato il Drag event.dataTransfer.getData("Text"); n.b. prevenire gli eventi default del browser rispondendo all' onDragOver e rispondendo “event.preventDefault();”
    28. 28. Drag & DropDrag & Drop DEMO
    29. 29. Read File HTML5 finalmente fornisce uno standard per interagire con i files, grazie alle File API specification Le Api non hanno markup o attributi, ma possono essere utilizzate solo attraverso il javascript. Per cominciare istanziamo l'oggetto reader var reader = new FileReader();
    30. 30. Read File E possibile iniziare a leggere il file in una delle seguenti modalità : – FileReader.readAsBinaryString(Blob|File) – FileReader.readAsText(Blob|File, opt_encoding) – FileReader.readAsDataURL(Blob|File) – FileReader.readAsArrayBuffer(Blob|File) Esempio // Read file into memory as UTF-16 reader.readAsText(readFile, "UTF-8")
    31. 31. Read File La funzione di lettura attiva tre interfaccie ● reader.onprogress = updateProgress; ● reader.onload = loaded; ● reader.onerror = errorHandler; Dall'ascolto della funzione onload si può, a questo punto riempire un campo di testo function loaded(evt) { // Obtain the read file data var fileString = evt.target.result; document.getElementById('result').textContent = fileString; }
    32. 32. Read FileRead File DEMO
    33. 33. Scrivere in Locale Prima dell'Html5 le possibilità di leggere e scrivere i dati off-line erano: ● Cookies ● Flash Storage ● Google Gears ● Dojo Storage
    34. 34. Scrivere in Locale Mentre con l'HTML5 le potenzialità sono: ● Web Storage APIs: localStorage / sessionStorage ● Web SQL Database ● IndexedDB ● ...Cookies
    35. 35. Scrivere in Locale – Web Storage In sostituzione dei cookie sono stati implementati i web storage: più veloci/più sicuri (il dato passa solo quando è necessario) Ci sono 2 tipi di storage ● LocalStorage - window.localStorage (persistente) ● SessionStorage - window.sessionStorage (vive e muore nel tempo di una sessione)
    36. 36. Scrivere in Locale – Web Storage ● per memorizzare un valore localStorage.setItem('someKey', someValue); ● per leggere un valore localStorage.getItem('someKey'); Le Xpage Mobile Controls usano questa tecnologia per l'off-line. N.B.: I web storage possono memorizzare solo testo
    37. 37. Scrivi in Locale - IndexDB ● Web Sql Database Implementazione di accesso ai dati locali tramite stringhe simil SQL non è più una specifica mantenuta dal W3C ● IndexDB In sostituzione a localStorage e WebSql è stata implementa la possibilità di scrivere database indicizzabili tramite questa nuova funzione. Supportato solo da Chrome e Firefox
    38. 38. Scrivi in localeScrivi in locale DEMO
    39. 39. Disegnare con il canvas Canvas è un'area rettangolare nella pagina HTML specificata dal relativo TAG <canvas id="canvas" width="800" height="200"></canvas> E' un elemento usato per disegnare grafica al volo, via Javascript Per istanziare il piano cartesiano relativo è sufficiente var canvasContext = document.getElementById("canvas").getContext("2d");
    40. 40. Disegnare con il canvas Nel canvas è possibile effettuare .. ● effettuare operazioni dirette di disegno context.fillStyle="#FF0000"; context.fillRect(0,0,150,75); ● oppure caricare una immagine tramite URL var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 69, 50); }; imageObj.src = 'http://www.html5.com/demos/assets/darth-vader.jpg';
    41. 41. Disegnare con il canvas I modificatori del canvas permettono di scalare, ruotare o traslare l'immagine tramite i relativi metodi. ● context.scale(0.5,0.5); ● context.rotate(0.5); ● context.translate(300,-100); Tra le librerie Javascript basate in canvas ricordiamo http://processingjs.org/
    42. 42. Disegnare con SVG SVG (Scalable Vector Graphics) è lo standard per fornire immagini vettoriali via Browser. Permettendo all'immagine trasformazioni e scalabilità senza perdere qualità Può essere inserito embedded nelle pagine HTML utilizzando i tag <embed>, <object>, or <iframe> : <embed src="circle.svg" type="image/svg+xml" /> <object data="circle.svg" type="image/svg+xml"></object> <iframe src="circle.svg"></iframe> Esempio di file svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
    43. 43. Disegnare con SVG Inoltre può essere inserito direttamente all'interno della pagina HTML utilizzando il tag SVG <svg version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> ● Librerie Javascript che utilizzano l'SVG possiamo ricordare http://raphaeljs.com/
    44. 44. Geolocalizzazione DEMO
    45. 45. Geolocalizzazione Anche se non ufficialmente parte dell'HTML5 Geolocation Api sono uno facile strumento per rilevare i dati geospaziali dell'utente collegato, basandosi sulla classe Javascript: navigator.geolocation Ed esattamente su i due metodi ● navigator.geolocation.getCurrentPosition (inCasoDiSuccesso, opzInCasoDiErrore, opzioni); ● navigator.geolocation.watchPosition (inCasoDiSuccesso, opzInCasoDiErrore, opzioni); La seconda a differenza della prima fornisce il dato ogni qualvolta che cambia
    46. 46. Geolocalizzazione In caso di successo del metodo possono essere rilevate direttamente le proprietà dell'oggetto position.coordsposition.coords ● Latitude : per la latitudineLatitude : per la latitudine ● Longitude : per la longitudineLongitude : per la longitudine ● Altitude : per l'altezza (se presente)Altitude : per l'altezza (se presente) ● Speed : per la velocità (se presente)Speed : per la velocità (se presente)
    47. 47. GeolocalizzazioneGeolocalizzazione DEMO
    48. 48. Audio/Video stream HTML5 introduce un supporto integrato per i media attraverso gli elementi <audio> e <video>, grazie ai quali Incorporare i media nel documento HTML è banale!! E' sufficiente il tag <audio> <video> con pochi attributi ● src : dove definire la sorgente URL locale o remota ● controls : visualizza i controlli standard di HTML5 ● autoplay : Rende automatica la riproduzione dell'audio. ● loop : Rende automatica la ripetizione (ciclo) dell'audio. ● preload : è un attributo che permette di attivare o meno strumenti di prefetching
    49. 49. Audio/Video stream L'utilizzo dei Custom Control permette di governare queste nuove opportunità in maniera semplice <video width="#{compositeData.width}" height="#{compositeData.height}" autoplay="#{compositeData.autoplay}" loop="#{compositeData.loop}" poster="#{compositeData.poster}" controls="#{compositeData.controls}" muted="#{compositeData.muted}" preload="#{compositeData.preload}"> <source src="#{compositeData.source}" type="#{compositeData.type}" /> <xp:text styleClass="" value="#{compositeData.noHTML5}" escape="false" /> </video>
    50. 50. Audio/VideoAudio/Video DEMO
    51. 51. Fare una foto - WebRTC PROVIAMO a mettere alla prova fin qui appreso!! WebRTC è una tecnologia open source nata il 1º giugno 2011 che consente ai browser di effettuare in tempo reale la videochat. ● l'oggetto navigator.getUserMedia permette di prendere il controllo (previa approvazione dell'utente) del device CAMERA ● A questo punto prendo lo stream video e lo abbino al tag <video> navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); ● Ed in fine abbinato al bottone catturo l'immagine e la abbino al tag <canvas> context.drawImage(video, 0, 0, 640, 480);
    52. 52. Web RTCWeb RTC DEMO
    53. 53. Web Workers I Web Workers nascono per consentire l’esecuzione di codice Javascript in thread separati, senza intaccare le performance della pagina web in visualizzazione. ● Attivazione – e' sufficiente dichiarare il Worker ed abbinarlo ad un libreria js, per eseguire la libreria in un thread parallelo. thread = new Worker('thread.js'); ● La pagina principale rimane in ascolto di eventali messaggi di ritorno thread.onmessage = function(event){ thread.postMessage(prompt(event.data)); } ● thread.js può mandare messaggi al thread principale semplicemente postMessage('messagge');
    54. 54. WebSocket I WebSockets forniscono una comunicazione bidirezionale in tempo reale tra client e server Utili per fare in modo che il server inoltri aggiornamenti in push al client Web Socket non è stata implementato nella gestione servlet di Domino Cerchiamo volontari!! che implementino il socket (jwebsoket) a livello OSGI
    55. 55. Compatibilità ● Ma Html5 è “STANDARD”? ● Verificare lo stato di compatibilità delle funzioni utili prima di utilizzarle !!! http://www.caniuse.com ● IOS7 ha rimosso : – Markup Tags video tracks, <progress>, REMOVED support for input type=datetime – APIs Page Visibility, AirPlay API, canvas enhancements, REMOVED support for Shared Workers,BIG PROBLEM with WebSQL using more than 5Mb.
    56. 56. Links ● Tutorial http://www.html5rocks.com/en/ http://www.w3schools.com/html/html5_intro.asp ● Showcase http://html5-showcase.com/ http://html5demos.com/ ● Compatibility Table http://caniuse.com/ http://html5test.com/
    57. 57. GRAZIE!! l.tozzi@hr2o.it it.linkedin.com/in/ltozzi/
    58. 58. Grazie agli sponsor per aver reso possibile il Dominopoint Days 2013! Main SponsorMain Sponsor Vad sponsorVad sponsor Platinum sponsorPlatinum sponsor Gold sponsorGold sponsor

    ×