:::: MENU ::::
Posts tagged with: html5

Il Canvas in HTML5

HTML5_Logo_512Una delle caratteristiche salienti dell’HTML5 è sicuramente il nuovo elemento Canvas. Del tutto simile a qualsiasi altro tag HTML ma con l’unica eccezione che il suo contenuto viene renderizzato tramite Javascript. Canvas è quindi una “tela” digitale utilizzata per disegnare in maniera digitale. Avendo delle basi di Javascript, è possibile “disegnare” all’interno del canvas. Il funzionamento è abbastanza semplice: si definisce un <canvas> all’interno del body della pagina, vi si accede tramite Javascript, si crea un contesto e si inizia a disegnare. Fin qui, è tutto molto semplice.

Quando si utilizza un canvas, è importante capire la differenza tra l’elemento canvas e il contesto canvas (context), poichè tle differenza potrebbe portare confusione. L’elemento canvas è il tag HTML, il nodo DOM, che viene scritto all’interno di una pagina HTML. Il contesto è un oggetto con delle proprietà e metodi che puoi utilizzare per disegnare forme all’interno dell’elemento canvas. Il contesto può essere 2D o 3D. Ogni canvas contiene un solo context. Se ustiamo il metodo getContext() più volte, ritornerà come riferimento l ostesso oggetto context. Continue Reading


R.I.P. Flash, benvenuto HTML5

MK-BQ351A_HTML5_G_20111110180025

Cos’hanno in comune cassette, mini-dv e Flash? Sono tre tecnologie che hanno bisogno di un player per funzionare, tre tecnologie che sono “morte” o stanno morendo. Proprio come i CD hanno sostituito i nastri magnetici per migliorare l’efficienza nella riproduzione di musica e file digitali, HTML5 sta facendo lo stesso con Flash.

Il dibattito HTML5 vs Flash è un tema discusso da molti anni tra gli sviluppatori Web – e lo è diventato ancora di più da quando Steve Jobs ha pubblicato nel 2010 la sua lettera descrivendo l’HTML5 come il futuro e Flash come “non è più necessario”. Checché se ne dica, non si può negare che le implicazioni di HTML5 nei video e nel web sono reali.

Per i video online, HTML5 offre due cose che Flash non fa: interoperabilità nei sistemi mobilimarkup semantico. La spinta verso i sistemi “portatili”, la proliferazione di video interattivi per l’intrattenimento, la pubblicità e l’ecommerce e la struttura aperta di HTML5 si combinano per creare il futuro di un web basato su HTML5, a discapito della tecnologia Flash sempre più obsoleta e destinata ad essere annoverata nella Tech Hall of Fame (come Windows XP, Palm Treo). Continue Reading


Responsive design vs Adaptive design: cosa scegliere?

Il Responsive Web Design (RWD) è ormai diventato lo standard per la creazione di siti web accessibili sia su pc desktop / notebook che su una vasta gamma di dispositivi mobili come smartphone e tablet. Ma siamo sicuri che il responsive design sia la risposta per coinvolgere a pieno gli utenti di dispositivi mobile? Ha un senso rendere un sito web responsive se poi la mobile user experience è la stessa di un utente desktop, se non addirittura peggiore dovuta ai tempi di latenza della connessione, la lentezza e dulcis in fundo proprio il dispositivo?

Probabilmente no, o forse, decisamente no.

Continue Reading


Centrare un DIV in verticale e orizzontale

Spesso ci capita di dover centrare degli elementi contenuti all’interno di un <div> più grande e di dimensioni prefissate. Sappiamo che se utilizziamo l’attributo margin: 0 auto; l’oggetto viene centrato in orizzontale. Scrivere margin: 0 auto; equivale a dichiarare:

Tuttavia, questo metodo non centra l’oggetto contenuto nel <div> in verticale. In realtà, anche utilizzando margin-top: auto e margin-bottom: auto, non risolveremmo un bel niente. 

Per risolvere questo piccolo grande problema, ci viene in aiuto un trucchetto che permette di risolvere il problema. Vedremo come centrare l’oggetto in verticale e in orizzontale relativamente alla pagina, quindi al tag <body>. Per fare questo, occorre definire un #ID nel nostro foglio di stile come di seguito specificato:

e poi applicarlo al tag <div>

Con lo stesso meccanismo, possiamo centrare un <div> all’interno di un altro <div>, ma sarà necessario specificare delle dimensioni prefissate sia in altezza che in larghezza anche per il <div> più esterno.

e quindi, in html, scriveremo:

Semplice, no?


Progetto completo di una chat con Server-Sent Event e HTML5 + Jquery

Continuiamo la panoramica sulle API Server-Sent Event in HTML5. In questo caso scopriremo e analizzaremo passo dopo passo come creare una chat funzionante. La ragione di questo esempio è principalmente applicare i concetti visti negli articoli precedenti, per meglio comprendere la potente tecnologia che HTML5 ci offre.

Avremo bisogno al solito di un web server, va bene anche XAMPP o qualsiasi altro web server Apache+PHP+MySQL.

Il database

La prima cosa da fare è creare il database con la tabella che conterrà i messaggi che gli utenti invieranno alla chat e che saranno consegnati a tutti i client in ascolto. Il database ha una sola tabella, mediante la quale, oltre a fare da intermediario potrebbe anche rappresentare un’ottimo strumento per filtrare parole non gradite. Lo script SQL è il seguente, potete eseguirlo facilmente su PhpMyAdmin.

La chat

 Chiamiamo questo file chat.html, ed è il file che conterrà il codice HTML+CSS e gli script Javascript del client. L’interfaccia è molto semplice ed è composta principalmente da un contenitore DIV in cui vengono aggiunti man mano i sotto-contenitori DIV dei messaggi. Per completare, ho posizionato sotto la chat due caselle di testo per inserire il nome, il messaggio e il pulsante per inviare tutto al server e di conseguenza agli altri client connessi.

Stream chat

Chiamiamo questo file chatlist.php. Lo stream dei messaggi sarà formato da un file PHP, in particolare in ciclo infinito che effettua un’interrogazione al database MySQL per poi “addormentarsi” per un secondo. Le prime due righe di intestazione sono molto importanti per il meccanismo SSE di HTML5, in quanto per il corretto funzionamento della chat, è necessario impostare il Content-Type come “text/event-stream” e definire il Cache-Control uguale a “no-cache”. Non dimenticatelo.

Le operazioni sul database

Tutte le operazioni sul database preferisco scriverle in un file diverso dagli altri, per mettere un po’ di ordine. Lo chiamiamo dbfunctions.inc e contiene tra l’altro la gestione della connessione al database, oltre alla stampa a video del messaggio necessario al Server-Sent Event.

Il blocco più interessante è quello della funzione ListChat(). Questa funzione interroga il messaggio cercando tutti quei messaggi che sono stati spediti al server nel periodo compreso tra l’ultima interrogazione $MM_LastTime e l’ora corrente $MM_Time. In questo modo vengono pescati solo le ultime righe senza far perdere alcun messaggio. Quindi vengono estratti i campi, formattati in HTML e restituiti alla funzione sendMsg() che si occupa di comporre il messaggio per SSE.

File di supporto

Nell’ultimo file, chiamato chatsubmit.php, inserisco la procedura che viene attivata durante la chiamata di chatTimerHandler() nel file chat.html tramite Ajax con metodo GET. Lo script non fa altro che inserire nel database MySQL il nome e il messaggio digitato dall’utente in modo da poter essere “comunicato” a tutti quanti i client in ascolto.

 


Server-Sent Events in HTML5

Tradizionalmente in un’architettura client-server, come mostrato in figura, una pagina web residente nel client invia una richiesta al server per ricevere una risposta con dei dati. Con l’avvento dell’HTML5, e in particolare della libreria API Server-Sent Events, è possibile, per un server, inviare dei dati a una pagina web “in qualsiasi momento”, tramite dei messaggi push, senza che la pagina in questione ne faccia esplicita richiesta. I messaggi in arrivo possono essere trattati come eventi + dati all’interno della pagina web. 

client-server

Lo sviluppo di un’applicazione web che utilizza le API Server-Sent Events è abbastanza facile. Avrete bisogno di un po’ di codice sul server per lo effettuare lo streaming degli eventi al client; per quanto riguarda il lato client, la gestione di tale eventi è identica a qualsiasi altro tipo di evento.

Le API Server-Sent Events sono contenute nell’interfaccia EventSource. Per aprire una connessione al server e iniziare a ricevere gli eventi, bisogna creare un nuovo oggetto EventSource, specificando l’URI dello script sul server che genera lo stream di eventi. Per esempio:

Una volta istanziato l’oggetto, è possibile iniziare  ad intercettare i messaggi che verranno creati dallo script in sse_test.php:

Lo script sopra non fa altro che “ascoltare” eventuali messaggi in arrivo (cioè, dei messaggi standard dal server ) e aggiungere il testo del messaggio in un contenitore div che poi viene mostrato nella pagina.

È anche possibile ascoltare eventi personalizzati, utilizzando la funzione addEventListener():

Questo codice è simile al precedente, tranne per il fatto che verrà chiamato solo quando il server invierà un messaggio di tipo ping al client.

Il formato del messaggio

Il messaggio che viene inviato dal server al client è un semplice streaming di testo in formato JSON, codificati in UTF-8. Ogni messaggio è separato da una coppia di caratteri speciali \n\n. Una riga del emessaggio che inizia con : è, in sostanza, una riga di commento e viene ignorata. La riga di commento può essere usata per impedire il timeout della connessione: un server può inviare periodicamente un commento per mantenere aperta la connessione.

Ogni messaggio è costituito da una o più righe di testo scritte secondo la notazione nomecampo: valore + \n

Campi

I campi che possono essere utilizzati in un messaggio sono 4. Altri campi, al di fuori di questi, vengono sostanzialmente ignorati.

  • event – rappresenta il tipo di evento. Se nel messaggio viene specificato questo campo, l’evento inviato al browser potrà essere intercettato solo utilizzando addEventListener(). L’handler onMessage() invece intercetta qualsiasi messaggio privo del campo event.
  • data – rappresenta il campo dati per il messaggio, cioè il contenuto che dovrebbe essere visualizzato sul browser. Quando EventSource() riceve più linee che iniziano con “data:”, li concatena, e inserisce un ritorno a capo \n tra ciascuno di essi.
  • id – rappresenta l’ID del messaggio.
  • retry – rappresenta il tempo di riconnessione in millisecondi da utilizzare quando si tenta di inviare un messaggio. Se non viene specificato un valore intero, il campo viene ignorato.

Esempi

Messaggi “data only”

In questo esempio, si ipotizza l’invio di tre messaggi. Il primo messaggio è solo un commento, poiché comincia con i due punti. Come accennato in precedenza, può essere utile come keep-alive della connessione se lo streaming di dati non è costante e c’è il rischio di far cadere la connessione. Il secondo messaggio contiene il campo data con il valore “testo di esempio“. Il terzo messaggio contiene il campo data con il valore “un altro messaggio \n con due linee“.

Eventi specifici

In questo esempio abbiamo alcuni eventi specifici. Ciascun messaggio viene settato il campo event, con il nome della tipologia di evento, e il campo data il cui valore è specificato secondo la notazione JSON con i dati che poi il client “parserizzerà” a dovere.

Miscelazione e la congruenza

Ovviamente è possibile mescolare insieme in un unico flusso di dati sia messaggi generici (solo con il campo data) che messaggi personalizzati.

 Risorse utili

http://dev.w3.org/html5/eventsource/


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close