Il fenomeno HTML5 cresce sempre di più col passare del tempo, se ne discute molto in rete e sembra non terminare mai la battaglia tra HTML5 e Flash. Se poi si finisce sul mobile iniziano i confronti tra WEB e NATIVO, ma non è di questo che voglio parlare.
Così come cresce la moda di HTML5 iniziano a proliferare anche diversi strumenti e framework. Quello che segue è uno strumento che attribuisce al canvas un potenziale enorme per lo sviluppo di animazioni ed interfacce vettoriali che prima era molto complicato ottenere e che funzionano bene su tutti i moderni browser e dispositivi mobili.
Lo strumento in questione è un plug-in per Adobe Illustrator che converte questo:
in questo:
Se notate bene l’interfaccia, nella prima siamo in Illustrator e nella seconda in un browser e vi assicuro che nella seconda non è un’immagine :) ma solo tracciati disegnati nel canvas.
Per citare la descrizione ufficiale sul sito Ai->Canvas:
The Ai->Canvas plug-in enables Adobe® Illustrator® to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps.
Come si può notare oltre ad esportare quello che disegniamo, possiamo anche aggiungere animazioni che vanno a lavorare su rotazione, scaling, fading, movimento che segue un tracciato, ecc…
Insomma le potenzialità sono enormi ed apre un modo nuovo di sviluppare con il
Consiglio la visione del video di introduzione che potete trovare a questo link: http://visitmix.com/labs/ai2canvas/introduction.html
La documentazione non è il massimo, ma ci sono una serie di esempi che chiariscono molti concetti: http://visitmix.com/labs/ai2canvas/documentation.html
Il plugin ha delle limitazioni e non supporta tutto quello che illistrator riesce a fare (sarebbe troppo :), purtroppo i sorgenti non sono disponibili per via dell’EULA di Illustrator che lo impedisce (se ne è parlato in un commento su questo post: Introducing the Ai to Canvas Plug-In) e quindi non essendo open source non è possibile rimediare in alcun modo, andrebbe riscritto O.o
Nei prossimi post mostrerò altri strumenti che vanno a formare un trinomio (forse 4) perfetto per uno sviluppo cross-platform senza problemi.