Mac4Ever Refurb Guide d'achat Apple - Des conseils sur toute la gamme Apple Débuter sur Mac
Hype, animations web interactives compatibles iOS
Actu Dossiers Forum Photos/Podcasts Petites Annonces V.I.P.
1446 connectés

Hype, animations web interactives compatibles iOS

Le 29/05/2011 à 15h34
Depuis que le Web est Web (quelque part au milieu des années 90), la création de sites interactifs est au cœur des préoccupations des webmasters. Multi-plateforme et simple à prendre en main, Flash a très longtemps régné en maître sur les pages web animées, ne laissant comme alternative animée hors de son container que les images en GIF qui bougent, très limitées.

Contexte historique : Flash et iOS


Quand Apple présente l'iPhone début 2007, il parait donc impensable qu'il n'embarque pas de plug-in Flash pour accéder à tous les sites web proposant du contenu interactif. Et pourtant...

Hype, des animations web compatibles iOS
La réponse du berger à la bergère


Il aura fallu attendre 2008 et les premières ébauches du HTML 5 pour envisager les éléments interactifs d'une page web (videos, sons, ...) sans nécessiter leur habituel plug-in : les navigateurs deviennent capables de prendre en charge du contenu "riche" eux-mêmes.

Parallèlement, les styles CSS ajoutent de nouvelles possibilités de présentation du contenu d'une page web (ombres, reflet, ...).

Quatre ans après le lancement du premier iPhone et peu après l'iPad 2, le nombre d'iBidules disséminés aux quatre coins du globe remet en cause la suprématie de Flash comme distributeur de contenu interactif : Apple ayant tenu bon son bras de fer avec Adobe, les iBidules sont toujours privés de Flash.

Les développeurs de sites Internet, pragmatiques, se sont donc progressivement tournés vers les alternatives à Flash pour le contenu animé, ne pouvant faire l'impasse sur la part de marché grandissante de clients accédant au web depuis un périphériques iOS.

Principe de base


Hype est un logiciel de création d'animation et de contenu interactif, qui utilise le HTML 5, le CSS, et JavaScript pour générer des pages web animées. Hype n'est pas pensé pour gérer un site web intégralement, même s'il est possible de le faire : le système de scènes montrerait vite ses limites. Mais le système de transition entre lesdites scènes rappelle fortement les diapositives d'un PowerPoint ou d'un Keynote, adapté pour le web. Hype se trouve en fait à à la convergence de plusieurs types de logiciels. Il emprunte autant à iWeb (disposition d'éléments texte, photos et vidéos sur une page web), à DVD Studio Pro (création de pages de menus avec boutons et comportements associés), et à Motion ou AfterFX (animation d'objets temporelle, en fonction d'images-clés). Combinez tout ça, secouez dans un shaker, et publiez le tout sur le web.

Hype, des animations web compatibles iOS
Un alignement d'objet qui n'est pas sans rappeler iWeb


Hype peut être utilisé pour fabriquer tout type d'animation, du simple zoom et déplacement d'images avec ombre portées, jusqu'à la création entière d'un mini-site à la iTunes LP.

Fonctionnement et premiers essais


Pour paramétrer les animations (au sens large : il peut s'agir d'une variation de la couleur de l'ombre, de l'opacité, du reflet, ...), Hype utilise un système bien connu du compositing : une timeline, et des keyframes. Le principe réside dans la notion du temps qui s'écoule entre deux états. Supposons qu'on veuille déplacer une image de gauche à droite pendant 3 secondes. On définit donc deux points-clés, l'un à la position initiale au début du mouvement, et le second à la position finale, 3 secondes plus tard :

Hype, des animations web compatibles iOS
1 seconde d'attente, 3 secondes de mouvement, 1 d'attente, et on recommence !


Et le résultat animé :

(Voir l'animation seule dans une nouvelle page)

Déjà là, ami lecteur, tu pleures de bonheur devant l'émotion véhiculée par la beauté pure de cette bien belle animation. Mais ça n'est pas terminé, car maintenant nous allons cumuler divers paramètres comme la rotation et l'opacité pour faire... heu... n'importe quoi :


(Voir l'animation seule une nouvelle page)

Joie du HTML 5 et de la balise
on peut également jouer avec une vidéo, comme sur cet exemple :
http://podcast.mac4ever.com/articles/2011-05_Hype/manipulation_video.html

Rotation, échelle, ombre portée, reflet, opacité, le tout généré en temps réel par le navigateur. Notez que l'animation JavaScript est indépendante de la lecture de la vidéo, qui n'est qu'un objet : on peut mettre la vidéo en pause (si on arrive à cliquer sur le bouton), l'animation continuera.

Bien entendu, qui dit "interactivité" dit "boutons, comportements et liens". Chaque objet dans Hype (image, bouton, calque de texte, ...) peut devenir un bouton en y assignant un comportement (change de scène, ouvre une URL, appelle une fonction JavaScript) lorsque que le pointeur de la souris le survole, le clique, le relâche, ou s'en éloigne.

Hype, animations web interactives compatibles iOS
Un pioupiou à comportement


On peut donc aisément réaliser des animations à interactions (avec ou sans transitions, à la manière des diapos d'un document PowerPoint ou Keynote), et ainsi être subjugué par une beauté plastique désarmante, en cliquant simplement sur les petits pioupious de l'animation suivante :

(Voir l'animation seule dans une nouvelle page)

JavaScript inside


Quand on en a marre de faire joujou avec des oiseaux qui tournent, on peut passer à l'étape supérieure, et éditer le code JavaScript et ses fonctions. Tumult, l'éditeur, propose même une API pour interagir de manière externe avec les éléments ainsi générés. Puisqu'on parle de l'éditeur, notons au passage que les deux fondateurs de Tumult sont d'anciens employés d'Apple qui ont travaillé au développement de Mac OS X, autant dire que l'interface de Hype a été pensée pour être avant tout simple d'accès et fonctionnelle, et que les pages de support et la documentation visent avant tout les débutants.

Publication et compatibilité


Qui publie sur le web doit prendre garde à la compatibilité entre les différents navigateurs. On comprend aisément qu'il n'est pas très utile de publier des animations lisibles sur iPhone, si la contrepartie est de se couper d'une autre famille de navigateurs web comme Internet Explorer ou Firefox. Là encore, Hype fait simple et fonctionnel : des avertissements sont affichés au besoin lors de l'usage de certaines fonctions qui passeront avec plus ou moins de bonheur sur certains navigateurs de génération précédente, laissant au créateur le choix du compromis entre compatibilité et fonctions avancées :

Hype, des animations web compatibles iOS


Pensez aussi que le code JavaScript de l'animation est calculé en temps réel par le navigateur du client (donc l'ordinateur de l'internaute qui visite la page contenant l'animation) : évitez de faire pivoter 15 vidéos HD avec une ombre portée qui se diffuse progressivement+ un reflet dégradé + une opacité variable, sur la page d'un site web qui sera visité par Tata Lucette et son pauvre iMac G4...

Lors de nos tests, tant en terme de consommation de ressources ("ramage") que de compatibilité avec les derniers raffinements esthétiques, c'est Chrome qui s'en sort le mieux, suivi par Safari, puis Firefox.

L'intégration dans une page existante peut se faire via un simple copier-coller des quelques lignes du fichier HTML appelant le Javascript, le tout dans un
partage email

Painter 12, du nouveau chez Corel

iOS 5 : le tour d'horizon et vidéo des nouveautés

chargement des réactions

Réagissez à ce dossier !

Pour réagir directement dans le forum, cliquez ici.
Pour réagir, vous devez être identifié.
Si vous ne possédez pas de compte, créez-en un !
Identifiant :
Mot de passe :
Gras Italique Souligné Image URL Smiley confus Smiley cool Smiley M. Vert Smiley malsain Smiley mort de rire Smiley geek Smiley surpris
Important : soyez concis, courtois et pertinents. (plus d'infos ?) Les messages injurieux et hors sujet seront effacés. En cas de non respect de ces instructions, le compte d'un utilisateur pourra être bloqué sans préavis.
Pour toute erreur dans un article, merci de nous le signaler en nous contactant ici.

Conseils d'achat

  • Macintosh

  • iPhone, iPad & iPod

iMac 27" 5k Indicateur rouge Informations 03/2019 2099 € L'iMac 27" (Retina) a été mis à jour le 18 mars 2019 avec des modèles Coffee Lake ( 6 à 8 coeurs) et des GPU Radeon Vega. Vous pouvez acheter sans crainte, les iMac ne sont mis à jour qu'une fois tous les 12/18 mois en moyenne. Une mise à jour n'est pas à écarter début 2020 !
iMac 21,5" 4k Indicateur orange Informations 03/2019 1499 € L'iMac 21,5" (Retina) a été mis à jour le 18 mars 2019 avec des modèles Coffee Lake ( 6 à 8 coeurs) et des GPU Radeon Vega. Les iMac ne sont mis à jour qu'une fois tous les 12/18 mois en moyenne. Une mise à jour est donc probable autour du printemps 2020 ! En attendant, privilégiez plutôt le Refurb !
Apple TV 4k Indicateur rouge Informations 09/2017 199 € L'Apple TV 4k est une petite évolution de l'Apple TV pour les téléviseurs 4k. Il gère le HDR, le HDMI 2a et tous les codecs récents. Si vous avez une télévision OLED 4k, il s'agit du modèle idéal. Son prix est raisonnable par rapport à la version HD, qui reste au catalogue. Attention, une rumeur évoque un modèle plus puissant pour la fin 2019.
iMac Indicateur rouge Informations 06/2017 1299 € L'iMac 21,5" (non Retina) a été mis à jour le 5 juin 2017 avec Thunderbolt 3 et puces Kaby-Lake. On attendait des modèles Coffee Lake (à 6 coeurs) d'ici le courant du printemps/été 2019 mais Apple n'a pas renouvelé cette version.. qui ne vaut plus vraiment le coup en 2019.
iMac Pro Indicateur rouge Informations 12/2017 5499 € L'iMac Pro est actuellement le Mac le plus puissant du marché, même s'il a déjà 2 bonnes années d'existence. Apple a rajouté une petite option GPU Vega 64X et 256Go de RAM courant mars 2019, mais rien de bien folichon. N'hésitez pas à consulter nos tests et nos vidéos avant de vous décider ! A noter qu'Apple va sortir un Mac Pro fin 2019, donc si vous n'êtes pas trop pressé, il sera + modulaire...
Mac Mini Indicateur orange Informations 10/2018 899 € Le Mac mini a été mis à jour fin 2018 avec un tout nouveau CPU à 4 coeurs. Une mise à jour est souhaitable en ce démi/mi 2020, que ce soit au niveau du CPU ou des SSD, un peu justes pour le prix. Attention toutefois, Apple laisse souvent "mourrir" les Mac mini pendant plusieurs années
Mac Pro Indicateur vert Informations 12/2019 6499 € Le nouveau Mac Pro est enfin là ! Certes, sont prix est élevé, mais la cible est très claire : les ultra-pro. Vous pouvez acheter sans crainte, (presque) tout est modifiable dans le temps et les modules MPX sont proposés à part par Apple.
MacBook Pro 13" Indicateur vert Informations 05/2020 1499 € Le MacBook Pro 13" a été mis à jour le 04 mai 2020 avec les nouveaux claviers Magic Keyboard (enfin fiables) et des puces de 10e génération sur le haut de gamme. Vous pouvez acheter sans risque (regardez nos tests !), un modèle 14" est envisagé pour fin 2020 ou début 2021.
MacBook Pro 16" Indicateur vert Informations 11/2019 2699 € Le MacBook Pro 15" est remplacé par un modèle 16" le 13 novembre 2019 avec de nombreuses nouveautés : grosse batterie de 100Wh, clavier totalement revu, touche ESC physique, nouveau GPU AMD (5500M) et du stockage plus généreux. Apple propose depuis juin 2020 une option GPU (5600M) très puissante (voir notre test). Pas de MAJ probable avant fin 2020, voire début 2021.
MacBook Air Indicateur vert Informations 03/2020 1199 € Le MacBook Air a été mis à jour en mars 2020 : processeur à 4 coeurs, nouveau clavier (qui ne se bloque plus) et stockage doublé pour le même prix ! Cette nouvelle version est bien plus intéressante, n'hésitez pas à voir nos tests !
Apple TV 2015 Indicateur rouge Informations 10/2015 159 € L'Apple TV 2015 est sortie fin 2015 et Apple le garde au catalogue malgré l'arrivée de la version 4k. Avec en prime, une petite baisse de prix ! Si vous n'avez pas de TV 4k, cela reste une bonne affaire.
Téléchargez nos
applications mobiles
À découvrir sur Mac4Ever
b 1 
Mon Mac4Ever
Pour participer, vous devez être identifié.
Si vous ne possédez pas de compte, vous pouvez en créer un gratuitement !
Identifiant :
Mot de passe :
Sondage
Seriez-vou tenté par une Apple Watch low-cost ?
1893 votes
app
A propos | Mentions légales | Infos Cookies | Contacts | Emploi | RSS | Apps