Domino e HTML5, #dd13

Domino e HTML5
Xpage & HTML5 “Standard”
Tozzi Luca

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

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

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

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

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

Cos'e' l'HTML5 – Sintesi
•
•
~= + +~= + +

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>

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>

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>

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>

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>

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>

●
Visualizzazione dello stato di avanzamento
tramite min max e values
<progress>/<meter>
●
Selezionare i valori Lista di valori predefinita
<datalist>

DEMO

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>

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>

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)

DEMO

Input type for Mobile
type = “number” type=”email” type=”tel”

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>

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:

HTML5 e CSS3
●
Shadow (Ombre) attorno testo e boxs
Box-shadow:
Text-shadow:
●
Immagini al posto di Bordi
border-image:

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

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

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

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

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

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

Scrivere in Locale
Prima dell'Html5 le possibilità di leggere e
scrivere i dati off-line erano:
●
Cookies
●
Flash Storage
●
Google Gears
●
Dojo Storage

Scrivere in Locale
Mentre con l'HTML5 le potenzialità sono:
●
Web Storage APIs:
localStorage / sessionStorage
●
Web SQL Database
●
IndexedDB
●
...Cookies

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)

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

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

Scrivi in localeScrivi in locale
DEMO

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

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

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/

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>

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/

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

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)

GeolocalizzazioneGeolocalizzazione
DEMO

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

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>

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

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

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

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.

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/

GRAZIE!!
l.tozzi@hr2o.it
it.linkedin.com/in/ltozzi/

Grazie agli sponsor per aver reso possibile
il Dominopoint Days 2013!
Main SponsorMain Sponsor
Vad sponsorVad sponsor
Platinum sponsorPlatinum sponsor
Gold sponsorGold sponsor

Domino e HTML5, #dd13

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Domino e HTML5, #dd13

Semelhante a Domino e HTML5, #dd13 (20)

Mais de Dominopoint - Italian Lotus User Group

Mais de Dominopoint - Italian Lotus User Group (20)

Domino e HTML5, #dd13

Notas do Editor