Creare una piantina per la prenotazione di posti con Javascript e SVG

In seguito al mio precedente articolo di qualche tempo fa su come creare una piantina con la libreria Processing.js ho pensato di aggiornarmi sulle nuove tecnologie disponibili.
La mia attenzione è caduta sull’interazione tra Javascript e le immagini SVG.

Lo standard SVG (Scalable Vector Graphics) è una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. Nello specifico si tratta di un linguaggio derivato dall’XML che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

Per la parte Javascript ho scelto la libreria Snap.svg perché è completamente nuova, è stata progettata appositamente per sfruttare le potenzialità dei nuovi browser, inoltre è stata scritta dallo stesso autore della famosa libreria Raphaël.

La caratteristica che rende unica Snap è l’abilità di importare una immagine SVG già esistente, che può essere creata con un software come Illustrator, Inkscape o Sketch e poi animata con Snap. Si possono addirittura caricare via Ajax delle stringhe di SVG e manipolate prima del rendering.
Approfondisci

Processing.js: creare una piantina per la prenotazione di posti in HTML5

Una delle potenzialità più interessanti di HTML5 è l’introduzione dell’elemento Canvas, il quale permette di effettuare un rendering dinamico di immagini tramite un linguaggio di scripting.
Per sfruttarlo al massimo, sono nate numerose librerie Javascript che ne semplificano l’utilizzo, tra cui Processing.js

Processing.js è un progetto imparentato con il più popolare linguaggio di programmazione visuale Processing.
Questa libreria permette di scrivere codice in linguaggio Processing e visualizzare il risultato su una pagina web: la magia avviene trasformando il sorgente in codice Javascript.

In seguito ad un progetto su cui ho lavorato recentemente, ho pensato di sviluppare una demo più vicina alla realtà rispetto agli esempi che si possono trovare sul sito ufficiale.

Utilizzando questa tecnologia, ho creato la piantina di un teatro, sulla quale è possibile selezionare i posti per effettuare la prenotazione di uno spettacolo.
Approfondisci