Già da anni si parla di HTML5 e ancora il cammino per la maturità ed il pieno supporto su tutti i browser è lungo. La zavorra sarà sempre Microsoft con il suo Internet Explorer. Questo è stato per molto tempo il browser predefinito che la gente si trovava nelle varie versioni di 2000, Me, Xp e che continuava ad usare per ignoranza più che per scelta. Le pessime politiche di aggiornamento Microsoft hanno permesso di avere nel 2011 una larga fetta di utenza ancorata a queste ancestrali versioni di browser come Internet Explorer 6, il peggior browser di tutti i tempi, secondo soltanto alle versioni 5 e 5.5.
Chi usa Safari sa che già le versioni attuali sono ben aderenti agli standard in oggetto, così come lo è il suo cugino Chrome, che usa lo stesso motore. Quest’ultimo, così come il nuovo Firefox, prevede un sistema di aggiornamento silente automatico, per cui sarà impossibile che tra 10 anni un utente di questi browser si trovi ancora con la versione del 2011.
Il problema di Explorer non è l’ultima versione che, anzi, pare essere finalmente aderente agli standard ma la pandemica diffusione delle schifezze fatte in passato. Presto o tardi però, sperando nella totale estinzione di Internet Explorer 6, 7 ed 8, noi sviluppatori potremmo finalmente sfruttare le potenzialità di CSS3 ed HTML5 offrendo agli utenti una esperienza di navigazione degna di questo nome. Il tutto secondo “standard” senza doversi preoccupare di gestire eccezioni per browser assurdi come è sempre stato explorer. La diffusione completa dell’HTML5 potrebbe arrivare tra 5 anni, ma già tra 1 o 2 si inizieranno ad usare in modo intensivo queste tecnologie, specie in quegli ambiti dove in passato si impiegava Adobe Flash. I primi a giovarne potrebbero essere gli smartphone che, essendo di recente concezione, sono equipaggiati con browser moderni e compatibili. Già oggi si può fare molto in HTML5 in ambito mobile.
Insomma, ci si può divertire già oggi ed il modo migliore per farlo è sfruttare Hype. L’applicazione, creata da ex dipendenti Apple, sta facendo parlare di sè per una interfaccia semplice e funzionale fin da questa prima versione.
Appena lanciata Hype parte anche una maschera introduttiva con un breve filmato di presentazione ed il collegamento a tutorial e gallerie. La struttura è quella classica della TimeLine con i KeyFrame sulle animazioni. Chiunque possieda già la conoscenza di questi strumenti si muoverà agevolmente.
Importante sottolineare come l’applicazione si preoccupi anche di generare in esportazione una tabella completa delle incompatibilità rispetto i browser indicati nell’inspector del filmato. Tenendoli attivi tutti e creando un po’ di animazioni sulla timeline, l’esportazione genererà un report piuttosto lungo elencando tutte le proprietà e i metodi non presenti nelle vecchie versioni dei browser.
Si importano facilmente elementi di tutti i tipi, immagini vettoriali SVG o PDF, immagini raster JPG, PNG e tanto altro. È anche possibile includere un filmato direttamente dal disco o sfruttando il media browser incluso che pesca come sempre in tutte le nostre librerie di iPhoto e compagni. Una nota curiosa è che non esistono i cerchi, in effetti questi si ottengono con i rettangoli agendo successivamente sulla proprietà border-radius, che ne arrotonda gli angoli.
Tutto avviene attraverso semplici palette senza che l’utente debba conoscere nulla di CSS3 o HTML5. Attivando il tasto di registrazione ogni modifica sull’oggetto attivo nel fotogramma corrente della TimeLine (espressa in secondi) sarà memorizzato in un keyframe.
Ho anche notato con piacere che si può scegliere la forma della curva d’animazione scegliendo tra il valore predefinito Ease In & Out (che rallenta ad inizio e fine del segmento tra due keyframe), Ease In, Ease Out o Linear.
Inserendo un bottone si possono personalizzare gli stati alternativi “hover” e “pressed” in modo da modificarne l’aspetto durante gli eventi generati dall’utente e, cosa molto importante, si possono associare differenti tra cui il “Jump to Scene..” con tanto di effetti di transizione.
Si può scegliere anche di agganciare come evento un Javascript e l’applicazione comprende un pratico editor per scriverla direttamente:
Altro aspetto importante è che alcuni file, a me è successo con un SVG, vengono inclusi con collegamento. Un po’ come con Illustrator a seguito di una modifica del logo incluso nella scena mi sono visto apparire questa richiesta di aggiornamento automatico. Eccellente.
Ecco l’esempio concluso (è HTML5 non tutti i browser lo leggono correttamente).
Conclusioni
Come versione 1.0 è davvero ben fatta e completa. Pensare che con HTML5 potremmo gestire queste cose con la stessa semplicità con la quale si faceva in Flash con l’ausilio di un player dedicato è veramente impressionante. In Hype ritroviamo la logica semplicità di rappresentazione sotto forma di TimeLine e far muovere gli oggetti a piacimento è veramente intuitivo, il limite è solo la nostra fantasia. Una volta esportato il progetto si ottiene un file HTML5 ed una cartelle con le risorse, per cui si può anche aggiungere a qualsiasi pagina web. L’applicazione non è ancora matura al 100% e conserva alcune carenza come l’impossibilità di nascondere temporaneamente un livello ma avrà sicuramente un futuro importante perché offre veramente tanto per il prezzo cui è proposta. Merita un 4 sicuramente anche perché è veramente una bella novità accessibile a tutti.
Costi
Al momento siamo ancora nella fase di “lancio” e quindi si compra 23,99€ sul Mac App Store. Certo non ha minimamente la complessità e completezza di un Flash Professional al quale non si può proprio paragonare. Tuttavia molto spesso questi strumenti si usano a sproposito ed anche per gestire una semplice apparizione o movimento si ricorre agli SWF anche quando basterebbero due righe di javascript o, ora come ora, anche un po’ di animazione con Hype 1.0.
PRO
Interfaccia pulita, semplice, comprensibile
Paradigma TimeLine/Keyframe già rodato e di sicura efficacia
Pochi ma buoni gli strumenti di controllo ed allineamento diretto degli elementi (basta trascinare)
Prezzo molto interessante
Animazioni HTML5 pronte in pochi istanti
CONTRO
Alcune carenze dovute alla gioventù, come l’impossibilità di nascondere un livello temporaneamente
DA CONSIDERARE
Non localizzato in italiano