Come creare siti web animati in HTML5 semplicemente grazie ad Hype!

Creare un sito web secondo alcuni (sicuramente NON del mestiere) potrebbe essere una cosa di poco conto. Ci sono molte piattaforme online che offrono la possibilità di pubblicare un sito (di qualche paginetta non troppo originale) in pochi minuti, magari anche gratis, senza alcun impegno da parte dell'interessato.
Ma a noi questo non interessa. Quello che ci interessa è la vera creatività, la possibilità di esprimere con ogni dettaglio l'idea, l'anima, l'intenzione di chi desidera realizzare quel determinato sito, il suo "perché": e per fare questo servono strumenti professionali, che vadano oltre il semplice sito informativo. Ci vuole una grafica ben concepita, e magari, perché no, qualche affascinante animazione qui e lì. Ma se pensate ale animazioni, dimenticatevi (PER SEMPRE, VI PREGO) Flash!
Ormai da tempo non è quello lo standard per creare siti web animati, bensì il più leggero e funzionale HTML5. Ma non temete, non dovete imparare da zero un nuovo linguaggio di programmazione per realizzare un sito in HTML5 (animano o meno che sia). C'è un'Applicazione Mac in grado di farvi comporre tutto ciò che sfiora la vostra fantasia all'interno di ogni pagina web senza dover scrivere alcun codice: più che un sito, potrebbe diventare un film!
Ci riferiamo all'ultima versione di Hype, Hype 3.5, da cui è possibile anche passare alla versione professionale, Hype 3,5 Pro.
Con Hype creare siti web è semplice quanto rilassante: non avrete i limiti delle rigide grafiche imposte dalle piattaforme online (come wordpress o blogger). Sarete liberi di dar forma ad ogni vostra idea. Avete presente la semplicità e immediatezza con cui potete comporre testo e grafiche con l'applicazione Pages di Apple? O come potete realizzare sorprendenti presentazioni animate con Keynote?
Ecco, pensate che con Hype potete ottenere tutto questo (e anche di più) realizzando siti web. Una pagina web realizzata con Hype sembra prendere vita mentre la si consulta, e i vari elementi che entrano ed escono di scena, possono essere animati dal web-designer su Hype (anche nella versione standard, non solo Pro) sulla timeline che raccoglie tutti gli elementi che vogliamo inserire nel sito, registrandone i movimenti che desideriamo imporgli: il concetto è molto simile a quello del video-editing, dunque se sapete montare un video, non vi sembrerà difficile realizzare un sito animato in HTML5 con Hype!
Per quanto riguarda le animazioni dei vari elementi che compongono le pagine web, qui troviamo una prima grande differenza tra la versione standard e la versione Pro di Hype: nella versione standard, come dicevamo prima, l'animazione avviene tramite l'uso dei keyframes (proprio come si fa con Final Cut Pro per i video, ad esempio); mentre nella versione PRO si ha anche un'opzione che oltre ad essere utile e comoda e davvero sorprendente!
Ogni elemento che compone la pagina web, può essere animato, se lo si desidera, anziché usando i keyframe, usando le "forze naturali": se si seleziona l'oggetto come "dinamico", questo potrà acquisire su di sé gli effetti della forza di gravità, dunque muoversi verso il basso, cadendo, finché non interagisce con un altro oggetto a cui si dà la definizione di "statico", ma che possa interagire nella collisione con altri oggetti. Questo fermerà la caduta del primo oggetto, e la conseguenza della collezione dipenderà dal "comportamento" che affidiamo ad entrambi gli oggetti. Questi concetti sono normalmente alla base dei programmi di grafica e animazione 3D di altissimo livello come Maya. E il modo con cui possono essere applicati al proprio lavoro sul web grazie ad Hype lascia sbalorditi. Potete vederne gli effetti nel VIDEO che vi riportiamo qui di seguito.
E questi sono solo alcuni degli esempi che rendono speciale Hype, e ancora di più la sua versione PRO.
Ma anche nell'ultima release della versione standard di Hype, ci sono interessantissime novità che rendono quest'App ancora più comoda e versatile: fino a poco tempo fa il sito in HTML5 fatto con questo sistema, imponeva che si scegliessero font nel ristretto gruppo dei "web-safe" (poco più di una dozzina di font). Adesso le cose non stanno più così e si può spaziare al punto da poter aggiungere in un memento qualsiasi font del vastissimo pacchetto google (tanto per fare un esempio).
Ma è quasi impossibile elencare tutte le novità importanti di Hype 3.5: dai "simboli" (scene all'interno di scene che possono essere salvate per riottenere la stessa animazione più facilmente in altre pagine) al responsive layout, adattabile a qualsiasi dispositivo (computer desktop, portatile, smartphone e tablet); e con la versione pro è possibile vedere in tempo reale i risultati dell'adattamento del layout, come anteprima, direttamente sui vari dispositivi Apple di cui disponiamo, grazie alla comunicazione diretta (via wifi) con l'app gratuita Hype Reflect.
Sempre con la versione PRO è possibile scegliere l'opzione dell'esportazione Avanzata, che consente di non esportare solo l'intero sito web una volta finito, ma anche di esportare singolarmente ogni elemento che lo compone, come le slider animate, le singole scene, ecc.
Se desiderate maggiori informazioni sulle nuove funzioni di Hype 3.5 potete consultare il sito degli sviluppatori a questo link; se volete maggiori dettagli sulle differenze tra la versione standard e la versione PRO, potete consultare questa pagina.
Hype 3.5 è disponibile nel Mac App Store a questo link (click qui).
La versione PRO è disponibile come acquisto in App (dopo aver scaricato la versione standard) o dal sito dagli sviluppatori.

Buon divertimento con le vostre creazioni web!