lundi 30 juillet 2012

Idée cadeau d'entreprise : des tutos vidéo

La surprise du jour ! Suite à mes derniers enregistrements, je viens de recevoir quelques cartes cadeau Elephorm donnant droit à une sélection libre de cessions de formation sur le site elephorm.com. Prix de vente 49 euros.

Premier intéressé évidemment, je ne suis pas bien placé pour émettre un avis neutre et objectif sur ce produit puisque je vends moi-même de la formation chez Elephorm ; ) Mais je ne connaissais pas jusqu'ici ce produit et j'avoue le trouver très intéressant.

Je n'imagine sans doute pas que des proches nous les offrent, du fait de la connotation trop professionnelle de cet article. Quand un ami vous fait un cadeau, ce n'est pas pour vous rappeler que vous devez encore travailler ! Mais si vous êtes un partenaire professionnel d'un graphiste, d'un informaticien, ou autre, cela peut en revanche devenir un très beau cadeau de remerciement ou de fin d'année ! Et ayant apprécié en recevoir quelques-unes, je me dis que d'autres apprécieraient tout bonnement d'en recevoir aussi.

Alors, je n'hésite pas à faire de la promo. Pour vos relations commerciales, la carte Elephorm, c'est sympa, offrez-la ; )

> Lien d'achat de la carte Elephorm.

samedi 28 juillet 2012

Les 4 grands standard d'animation HTML5 (2/2)

Interview N°2, donnée pour Elephorm, dans le cadre du lancement de la formation VOD intitulée "Flash Pro CS6, export HTML5", disponible à cette adresse :
http://blog.elephorm.com/technologie-flash#a_aid=AZ 


Les 4 grands standard d'animation HTML5

En HTML5, on distingue 4 grands standards d’animation : le CSS, le Javascript, le SVG et le Canvas. Certains sont plus ouverts et garantissent une meilleure accessibilité. D’autres, bien que structurellement ouverts, demeurent peu accessibles et non référençables, mais vont permettre d’apporter une couche interactive et graphique avancée proches des possibilités jusqu’ici réservées au format Flash SWF. Je vous propose de revenir rapidement sur ces différents formats afin de bien identifier le segment occupé par Canvas, le nouveau format HTML5 disponible dans Flash Pro CS6.

  • Le CSS a vocation à accompagner la mise en forme des données textes en y ajoutant des styles. Ces styles peuvent être animés. Mais les animations produites se limitent généralement à de l’accompagnement de données par des effets de transition ou des blocs défilants, davantage réservés donc à des sites éditoriaux, des books en ligne, plus qu’à de véritables environnements graphiques et ludiques. Des outils comme Sencha permettent de générer des animations CSS. Nous illustrons cette technique dans la formation.
  • Le SVG est un standard d’animation vectoriel et sémantique. Il permet d’offrir un rendu épuré de type infographique ou BD, et conviendra, idéalement, à de l’animation de données au sein d’une interface de site Web. Le calcul de l’animation des points d’ancrage et des points d’inflexion requiert cependant des ressources importantes que ne possèdent pas encore la plupart des périphériques mobiles. Les animations peuvent, hélas, dans ce contexte, parfois apparaître saccadées en dehors d’un ordinateur classique. Ce standard reste en revanche intéressant pour la représentation animée de menus, de cartes géographiques, de listes de personnes, de profiloscopes, de cartographies et tout ce qui repose sur de l’information structurée et sémantique avec une approche déjà plus graphique qu’en CSS seul. Le logiciel Adobe Edge a été conçu pour ce type d’animation. Nous montrons également quelques exemples en SVG dans notre formation.
  • Le Canvas est un standard d’animation qui propose un rendu bitmap, par opposition au rendu vectoriel du SVG. C’est, en somme, une fenêtre vidéo, dans laquelle on peut afficher des données graphiques, avec un rendu vidéo. A la différence du format vidéo, l’affichage en Canvas est traité dynamiquement par le navigateur. C’est en quelque sorte de la vidéo, mais lue et interprétée par le navigateur en temps réel, ce qui en fait format interactif. C’est du coup un peu plus gourmand que la vidéo car les données affichées doivent être calculée pendant le rendu. Mais moins gourmand que le SVG qui doit, en plus, gérer le calcul des données vectorielles des formes graphiques. Le standard Canvas s’apprête à des compositions graphiques élaborées, mêlant toutes sortes de médias, des images, des vidéos, de la 3D, de l’interactivité, grâce à la complétion Javascript. A terme, nous pouvons tout-à-fait envisager que le standard Canvas viendra remplacer le format SWF si les éditeurs de logiciels ou de librairies exploitent pleinement ses capacités. Ce que nous pouvons produire aujourd’hui en Canvas est de plus en plus proche de ce que nous réalisions jusqu’à lors en SWF. Canvas, associé désormais à Flash Pro, ouvre donc une nouvelle voie dans l’animation, plus que durable. Les logiciels Flash Pro CS6 et Hype sont conçus pour ce type d’animation. De nombreuses librairies gratuites existent aussi sur le Web pour réaliser ce type de contenu. J’ai rassemblé quelques liens que vous retrouverez dans les fichiers de travail associés à la formation pour illustrer également ce format, en plus de tous les exercices que nous produisons ensemble tout au long de la formation.
  • Le Javascript, pour finir, apparaît de loin le plus avancé des standards puisque c’est le langage que l’on utilise pour ajouter de l’interactivité dans le navigateur et accessoirement pour étendre les fonctionnalités de nombreuses solutions propriétaires. C’est aussi ce langage qui permettra d’étendre les fonctionnalités des standards HTML5 de l’animation que sont CSS, SVG ou Canvas.
Et quand doit-on alors utiliser Canvas ?

Canvas, de par sa vocation plutôt graphique, doit être privilégié pour les contenus qui accompagnent les textes, complémentaires aux textes. Nous réserverons les standards SVG et CSS pour le traitement graphique des textes eux-mêmes. SVG et CSS ne complètent pas un texte, c’est la forme du texte ! En revanche, si votre projet doit être mobile, il vaut mieux le réaliser en Canvas. Il apparaîtra plus fluide et disposera de plus amples fonctionnalités interactives. Notez que si vous préférez les standards SVG ou CSS pour produire des animations, tout comme Canvas, celles-ci perdront de toutes façons leur côté sémantique et accessible au moment de la compilation.

Une conclusion ?

Flash Pro CS6 et le standard Canvas répondent à un nouvel éventail de possibilité, plus large que tous les autres standards HTML5 d’animation réunis, et réalisables depuis un seul environnement déclinable en Canvas, en SWF et sous la forme d’applications mobiles, qui plus est déjà bien connu de bon nombre d’utilisateurs, et disponible dans la suite creative de bon nombre de studios graphiques. Apprendre à dompter l’export HTML5 de Flash CS6 m’apparaît donc la solution la plus raisonnable, la plus efficace, aujourd’hui, pour préparer vos projets à destination de tous les environnements, et ce, à moindre coût.

Le point sur la technologie Flash (1/2)

Interview N°1, donnée pour Elephorm, dans le cadre du lancement de la formation VOD intitulée "Flash Pro CS6, export HTML5", disponible à cette adresse :
http://blog.elephorm.com/technologie-flash#a_aid=AZ

Le point sur la technologie Flash

Dans sa dernière formation Flash CS6, Arzhur Caouissin vous propose d'aborder le standard Canvas, un segment de l’animation HTML5. L'occasion de revenir avec votre formateur sur les atouts de ce logiciel pour vos productions web multimédia.

Pour publier une animation sur le Web, les périphériques mobiles et tous les types d’écran, nous avons le choix entre deux techniques principales : les animations rendues (comme les vidéos ou le cinéma, typiquement sur les plateformes de vidéo comme Youtube, Dailymotion, etc.) ou bien : les animations interactives et connectables comme le HTML5 et le SWF, c’est-à-dire liées à des données localisées sur un serveur distant. Pour ces raisons, ces animations souvent plus légères donc plus rapides à charger.

Les animations interactives et connectables se présentent, elles, en deux sous-catégories :
  1. Elles peuvent être compilées dans des formats propriétaires. C’est le cas du format Flash SWF, de Shockwave Director, mais aussi des formats d’application mobiles ou de publications digitales qui prolifèrent aujourd’hui sur les plateformes mobiles.
  2. Les animations Web peuvent aussi apparaître sous la forme de médias ouverts directement interprétés par les navigateurs (comme Chrome, Firefox, Safari), par un moteur de recherche (comme Google) ou un parseur d’informations (comme Netvibes, Twitter ou Facebook). Dans ce contexte ouvert, les animations apparaissent moins stables et plus complexes à mettre en forme parce que librement interprétées par les navigateurs au moment de la lecture. Du coup, elles sont plus chères à produire, par rapport au SWF et à la vidéo, qui bien que plus riches, et à contenu égale, restent bien plus simples à implémenter.
Pour y voir plus clair dans cette constellation d’applications désormais disponibles pour réaliser des animations, revenons peut-être sur le schéma traditionnel des outils utilisés pour l’impression. Pour réaliser un document imprimé, nous utilisons Photoshop/Illustrator.InDesign/Xpress. Photoshop est utilisé pour produire des images bitmaps. Illustrator pour produire des images vectorielles. Et InDesign ou Xpress pour agréger le tout dans une mise en forme homogène prête à être imprimée.
De la même manière, nous pouvons désormais concevoir que Flash sera utilisé pour produire des animations bitmaps, Edge, des animations vectorielles et dreamweaver ou un quelconque CMS pour agréger le tout dans une mise en forme interactive homogène, mais en ligne.
Dans votre démarche d’apprentissage de Flash, afin produire des animations HTML5, je peux imaginer combien vous vous interrogez sur la problématique des formats d’animation ouverts (comme le HTML5) par opposition à celle des formats propriétaires (comme le SWF).

Rappelons pour l’anecdote, qui me semble tout-à-fait appropriée ici, que le plus grand défenseur du format libre est aussi le plus grand propriétaire du format compilé puisqu’en moins de 5 ans, l’entreprise Apple a généré pas moins de 150 milliards de dollars de profit grâce à l’iPhone et ses nombreuses applications et animations embarquées dans un format propriétaire ! Et qu’inversement, le plus grand défenseur du format propriétaire Flash SWF, Adobe, a permis le développement de sites gratuits souvent financés par des espaces publicitaires et aux fonctionnalités généralement plus poussées que ne le permettaient les formats libres, sans devoir monétiser ces derniers, et sans possibilité en outre pour les navigateurs, de mémoriser les actions menées par l’utilisateur. Ainsi, le format dit « libre » n’a donc, à mon sens, pas d’exclusivité sur l’aspect mercantile du format pas plus que les formats propriétaires n’ont de vocation purement astreignante pour les utilisateurs. Un format n’est qu’une technique. C’est ce que nous en faisons qui détermine son caractère. Tous les formats d’animation peuvent être utilisés conjointement. La véritable maturité consiste à exploiter un format pour ce qu’il apporte de mieux et toujours au service de ses utilisateurs.

Aujourd’hui sur le Web et les mobiles, les trois formats : HTML5, SWF et vidéo, sont donc utilisés selon des objectifs bien ciblés. L’un prévaut-il toutefois sur l’autre ?

Les animations rendues au format vidéo permettent de préserver la richesse des images filmées, des photographies et des effets spéciaux. On les retrouve dans les sites de bande-annonce, de consultation vidéo, de luxe pour présenter fidèlement la qualité de produits hauts-de-gamme (ex : Elephorm.com). Le grand avantage de ce format est sa compatibilité avec tous les périphériques. Mais c’est aussi son inconvénient, car il est souvent lourd, long à charger, et ne peut être mis à jour instantanément.

Les animations compilées comme le SWF ou les applications mobiles offrent des fonctionnalités souvent plus avancées et plus séduisantes et justifient bien souvent qu’on les utilise pour des campagnes de communication impactantes, ou des développements de services inédits et originaux (ex : thefwa.com). Liées à des lecteurs propriétaires, ces animations évidemment ne sont disponibles que dans certains contextes.

Les animations HTML5 enfin (ex : createJS.com), apportent une meilleure lisibilité pour les moteurs de recherche et les lecteurs d’écran des personnes à mobilité réduite, et peuvent être intégrées dans tous les périphériques y compris au travers d’applications mobiles (comme les publications digitales GQ, Géo, Le Figaro, etc.).

Ainsi, différents formats d’animation cohabitent désormais et il n’y a pas de suprématie de l’un par rapport à l’autre. Simplement, des évolutions techniques qui obligent à des choix parfois cornéliens :
  • Si votre projet est un projet de communication éditoriale, axé sur le texte et la sémantique (comme un magazine de presse, un site de profils professionnels, les réseaux sociaux, même un petit site d’entreprise), il est clair que vous privilégierez les formats ouverts comme le HTML5.
  • Si votre projet a vocation à créer un environnement très graphique, et répondre à des besoins techniques avancés, les formats SWF ou une application mobile apporteront la meilleure réponse.
  •  Si enfin vous souhaitez simplement rendre visible une séquence d’images fixes de grande qualité et sans véritable interaction, privilégiez alors le format vidéo.

lundi 23 juillet 2012

Wigoo, DPS pour designers


Vous connaissez Adobe DPS, facile, mais onéreuse. Vous connaissez Aquafadas, moins chère mais plus complexe et limitée à iOS. Voici Wigoo, facile et pas chère ; ) mais limitée à iOS.

http://www.wigoo.com/services.html

Wigoo est un service en ligne qui permet de monter ses propres publications digitales, sans programmer. La mécanique repose sur de l'enrichissement de PDF. Elle n'est pour le moment disponible que pour iOS mais ne tardera pas à l'être aussi pour Android. Elle convient particulièrement aux maquettistes.


1) Version gratuite
La version gratuite permet de présenter un book dans un format d'application peu personnalisable. C'est déjà ça !

2) Version Standard
La version Standard coûte 69€ et permet de rendre disponible sa publication dans l'app store et de la monétiser, sous la forme d'un livre unique et autonome. Bien moins chère que Adobe et Aquafadas donc !

3) Version Professionnelle
La version pro donne accès aux options d'abonnement pour la publication de périodiques pour 169€ seulement.

Voici un petit aperçu des fonctionnalités de Wigoo :

http://www.wigoo.com/what-is-wigoo.html

Un point complémentaire s'imposera dans un prochain article, après un tour d'horizon plus approfondi sur ce service très prometteur. Rendez-vous prochainement sur ce blog pour plus d'information sur Wigoo ; )