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.

HYPE

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.

compatibilita

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.

compatibilit

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.

forme

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.

record

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.

easy

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.

button

Si può scegliere anche di agganciare come evento un Javascript e l’applicazione comprende un pratico editor per scriverla direttamente:

javascript

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.

collegamenti

Ecco l’esempio concluso (è HTML5 non tutti i browser lo leggono correttamente).

voto 4Conclusioni
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
ico.piu.png Interfaccia pulita, semplice, comprensibile
ico.piu.png Paradigma TimeLine/Keyframe già rodato e di sicura efficacia
ico.piu.png Pochi ma buoni gli strumenti di controllo ed allineamento diretto degli elementi (basta trascinare)
ico.piu.png Prezzo molto interessante
ico.piu.png Animazioni HTML5 pronte in pochi istanti

CONTRO
Pro Alcune carenze dovute alla gioventù, come l’impossibilità di nascondere un livello temporaneamente

DA CONSIDERARE
Non localizzato in italiano

Maurizio Natali

Titolare e caporedattore di SaggiaMente, è "in rete" da quando ancora non c'era, con un BBS nell'era dei dinosauri informatici. Nel 2009 ha creato questo sito nel tempo libero, ma ora richiede più tempo di quanto ne abbia da offrire. Profondo sostenitore delle giornate di 36 ore, influencer di sé stesso e guru nella pausa pranzo, da anni si abbronza solo con la luce del monitor. Fotografo e videografo per lavoro e passione.

Commenti controllati Oltre a richiedere rispetto ed educazione, vi ricordiamo che tutti i commenti con un link entrano in coda di moderazione e possono passare diverse ore prima che un admin li attivi. Anche i punti senza uno spazio dopo possono essere considerati link causando lo stesso problema.