jeudi 26 avril 2012

Les outils de communication digitale en 2012

Adobe vient de lancer la Creative Suite CS6, c'est donc l'heure du bilan des solutions disponibles pour votre communication digitale. Les circuits traditionnels de la vidéo, de la 3D et de la PAO ne sont pas évoqués dans cet article. Notre attention se focalise ici sur les deux secteurs qui cherchent le plus leurs marques : le Web et le mobile.

Voici une liste des principaux acteurs du métiers en 2012. N'hésitez pas à proposer des solutions alternatives et leurs particularités en répondant à cet article pour le compléter.

1) Communication Web

HTML5, CSS3, Javascript, PHP/MySQL :
  • Dreamweaver (Mise en page CSS sur mesure et responsive design)
  • Edge (animation SVG)
  • Flash Pro (animation Canvas)
  • Aquafadas MotionComposer (animation Canvas)
  • JQuery (interactions en Javascript tous navigateurs)
  • Sencha animator (animation CSS3) 
  • Hype (Javascript)
  • Radi (Canvas et vidéo)
  • Wordpress (CMS)
  • Joomla (CMS)
  • SPip (CMS)
  • Drupal (CMS)
  • Typo3 (CMS)
Tableau comparatif des CMS :
http://comparatif-cms.com/tableau-comparatif/
2) Communication Mobile

Librairies HTML5, CSS3, Javascript spécifiques pour le mobile :
Compilateurs d'applications iOS et Android à partir de modèles HTML/JS et des précédentes librairies :
  • PhoneGap (rendu Web, interactivité limitée du navigateur) intégré dans Dreamweaver CS6
  • Titanium (rendu natif et interactivité plus proche des OS mobiles)
Compilateurs d'applications iOS et Android à partir de modèles natifs, sans programmer et sous licence :
Compilateurs d'applications iOS et Android à partir de modèles natifs, sans programmer et sous licence :
Compilateurs d'applications iOS et Android à partir de modèles Ruby ou Java :
Compilateurs d'applications iOS à partir de modèles Objective-c :
Compilateurs d'applications iOS à partir de modèles Java :
Compilateurs d'applications Air encapsulées (donc ralenties) dans une coque native iOS et Android à partir de modèles Actionscript 3 :
Pour mieux comprendre les langages standards du Web en 2012, utilisés par chacun de ces outils, lisez aussi ce précédent article :
http://bloc-notes-arzhur.blogspot.fr/2012/04/les-standards-du-web-en-2012.html
3) Quel outil choisir ?
  • Si vous êtes graphiste et ne souhaitez pas programmer, l'extension de InDesign : Aquafadas, répondra à vos besoins. Vous saurez aisément réaliser des publications interactives sans programmer avec un prix de revient faible.
  • Si vous souhaitez ajouter un peu plus d'interactivité, la solution HTML5/CSS/Javascript et les librairies associées seront très simples à déployer à travers PhoneGap intégré dans désormais à Dreamweaver. la diffusion est en outre gratuite. Mais un pré-requis solide en HTML/CSS/JS demeure incontournable.
  • Si vous souhaitez créer des applications plus personnelles, dans une logique de développement proche de Flash, mais à partir de Javascript, vous préférerez Titanium. Solution diffusable également gratuitement.
  • Enfin, si vous êtes puriste et un vrai programmeur POO que les pointeurs et les allocations de mémoire n'effrayent pas, et souhaitez tirer partie de fonctionnalités avancées des plateformes mobiles, vous adopterez directement Eclipse et Xcode.
Lire aussi :
http://bloc-notes-arzhur.blogspot.fr/2012/08/comparatif-des-outils-de-publication.html

mardi 24 avril 2012

Du Print au Web, le schéma d'Adobe

Le Web a toujours été un tabou pour nombre de graphistes effrayés par les contraintes de codage des pages HTML, et je les comprends. J'ai moi-même toujours préféré développer des applications compilées (Flash SWF, Applis mobiles) pour lesquelles, même si on programme d'une manière plus avancée, au moins, ce que l'on code est utile et apporte réellement une valeur au projet alors que le codeur HTML déploie autant d'énergie sinon plus pour simplement rendre compatibles des mises en forme souvent limitées en fonctionnalités. C'est d'ailleurs ce qui motive les flasheurs à réaliser des applis mobiles en langages natifs ou en HTML5 plus qu'à migrer vers le HTML5 pour l'affichage de pages dans les navigateurs.

Dans la CS6, Adobe semble avoir trouvé un point d'appui qui doit en théorie réconcilier les graphistes du Print avec le Web, mais seulement en apparence ! C'est bien sûr sans compter sur la réalité du terrain, hostile pour les idéalistes et designers démunis que nous sommes.

Les graphistes Print utilisent le fameux trio de logiciels : Photoshop, Illustrator et Indesign. Photoshop pour les bitmaps, Illustrator pour les dessins vectoriels, et Indesign pour agréger le tout dans une mise en page homogène. Ce schéma est connu et a pérennisé le succès des solutions initiales Adobe.

Adobe souhaite remettre le couvert, mais oublie les exigences de ses utilisateurs qui ont d'autres obligations que de mettre la main dans le cambouis.

Les nouveautés CS6 déclinent le schéma connu du Print vers le Web, ainsi. Désormais, il convient d'utiliser Flash, Edge et Dreamweaver de la même manière que nous utilisons Photoshop, Illustrator et InDesign. Flash exporte des animations de rendu bitmap au format HTML5/Canvas. Edge exporte des animations de rendu vectoriel au format HTML5/SVG. Et Dreamweaver permet d’agréger le tout dans une mise en page "unifiée" (à dire rapidement).
Mais c'est sans compter sur les caprices des navigateurs que ne contrôle pas Adobe, contrairement au format de publication Acrobat PDF qui finalise la mise en page dans Indesign et a tant contribué au succès de la marque.

Amis graphistes, détrompez-vous, le Web reste et restera ingrat. Les caprices des navigateurs devront être traités manuellement dans le code même en publiant des animations depuis des interfaces telles que Flash ou Edge. Si vous vous sentez capables de mettre la main dans le code, allez-y. En revanche, si vous préférez ne pas coder, privilégiez le développement de fichiers compilés/aplatis (maquettes graphiques, vidéos, animations 3D, magazines et livres interactifs).

Mais une question s'impose : Flash n'est-il pas initialement un logiciel d'animation vectorielle ? A quoi sert par conséquent Edge ?

En effet, concernant les outils vidéo de Adobe, nous reconnaissons volontiers le schéma suivant : After Effects, Flash, Premiere. After Effects génère des animations vidéo bitmaps, Flash génère des animation vidéo vectorielles, et Premiere agrège le tout dans un montage homogène et broadcastable. Même si les animateurs traditionnels privilégient bien souvent d'autres solutions (softs 3D ou 2D tiers), nous pouvons, du fait de son origine full vectorielle, considérer que Flash est l'outil référent de Adobe pour l'animation vectorielle.
Ainsi, nous aurions très bien pu accepter l'idée que After Effects produise des animations bitmaps HTML5/Canvas, que Flash produise des animations vectorielles HTML5/SVG (comme Illustrator lui-même compatible avec Flash), et cela n'aurait choqué personne.

La vérité est que Edge a été conçu à une période où Flash devait encore être la solution du Web compilé. Mais aujourd'hui, cette option a été retirée du cahier des charges de l'éditeur. Edge se retrouve donc dans une logique éditoriale qui peut sembler sous certains aspects évidente, mais légèrement en porte-à-faux puisque Flash remplit initialement la même fonction.

Avec l'expérience que nous connaissons des éditeurs propriétaires ayant tendance à offrir des solutions puis à les abandonner sans préavis lorsque le marché bouge (cas de Flash Catalyst lancé puis abandonné, du lecteur Flash intégré à Acrobat puis retiré), soyez par conséquent les premiers avertis d'un possible revirement futur de situation. Si vous souhaitez animer en HTML5, apprenez d'abord HTML/CSS et Javascript. Puis, utilisez ces outils comme assistants de la même manière que vous apprenez HTML/CSS avant d'utiliser Dreamweaver. Il vous sera alors plus simple de migrer vers d'autres solutions si cela devait être nécessaire le jour venu et apprécierez pleinement Edge ou Flash pour l'aide uniquement contextuelle qu'ils peuvent vous apporter.

Nouveautés Adobe Creative CS6

C'est à partir du 07 mai 2012 que la Creative Suite CS6 est rendue disponible. Le détail des fonctionnalités de la suite est visible sur www.adobe.com/fr.

En résumé,

Logiciels graphiques : y a bon !
La suite intègre quelques fonctionnalités utiles pour les logiciels graphiques que l'on attendait depuis longtemps comme la refonte de l'outil de recadrage dans Photoshop ou celui du contour de forme dans Illustrator. Des basiques que nous utilisons tous quotidiennement. Des avancées simples mais incontournables et qui changent la donne.

Publication : le minimum syndical
Dreamweaver, que plus personne n'utilisait pour créer des sites, intègre enfin le kit PhoneGap qui permet de créer des applications mobiles, ainsi que des librairies pour adapter la mise en forme selon la configuration de l'écran de destination (responsive design). Il intègre aussi les librairies JQuery Mobile comprenant de nombreux thèmes d'applications mobiles. Des fonctionnalités très utiles qui placent le logiciel à son meilleur niveau.
Indesign intègre également un dispositif intelligent de mise en forme automatique des blocs et des colonnes selon la résolution du document (même principe de responsive design que Dreamweaver). Mais si l'on considère que l'écriture d'un magazine diffère complètement selon la plateforme d'affichage, ces fonctionnalités nouvelles permettront seulement de gérer l'affichage entre résolutions proches (un iPad 4/3 et une tablette Android 16/9 par exemple).
La Digital Publishing Suite propose un modèle économique opaque et peu accessible aux petits éditeurs (compter peut-être un euro par magazine téléchargé !). Les gros éditeurs, quand à eux, développent leurs applications eux-même ou la font développer. La DPS de Adobe demeure cela dit compatible Android et iOS (contrairement à Aquafadas qui attendra octobre pour cela).

La vidéo : bon point pour la couleur et la 3D
Un puissant logiciel de colorimétrie (SpeedGrade) a été intégré à la suite et satisfera les utilisateurs de Apple Color.
Un moteur 3D apparaît dans After et l'interface de Premiere est entièrement personnalisable. Les graphistes animateurs d'objets 3D pour l'habillage Web et télé apprécieront. Les vidéastes utilisateurs de Reflex qui chercheront des outils intégrés pour réaliser rapidement des clips vidéo très graphiques et colorisés aussi.

Interactivité : Exit Flash !
Le moteur 3D de Flash CS6 que tout le monde attendait se voit remplacé in-extremis par un partenariat avec Unity, l'éditeur de jeux interactifs en 3D codés en C# et en Javascript. Une technologie inaccessible pour des flasheurs qui ne codent pas en C ! Et qui confirme l'orientation nouvelle de Flash vers l'abandon progressif du format SWF au profit du tout HTML. Même Air, n'est plus à l'ordre du jour. Les faibles performances observées par cette technologie hybride incluant une couche d'interprétation aurait-elle eu raison de ce revirement de situation ? Flash Builder est effectivement retiré de la suite (sauf version cloud) et Catalyst a simplement été arrêté pour être remplacé par un catalyst Cloud qui devient un simple outil de gestion de données marketing n'ayant plus rien de commun avec Flash Catalyst (une manière non assumée sans doute retirer Flash Catalyst). Côté Flash Pro, un export en HTML5/Canvas prépare les utilisateurs à l'abandon progressif du format SWF déjà amorcé par Adobe en automne dernier (fin du développement du lecteur Flash pour les mobiles) et en avril dernier (retrait du lecteur Flash dans Acrobat). Gageons que le Javascript fourni saura à terme rattraper les prouesses inégalées de Flash qui tapissent le Web depuis plus d'une décennie, dans les navigateurs. Le standard HTML5/Canvas n'est actuellement pas encore à la hauteur des exigences des flasheurs tant les interactions restent limitées et les performances faibles. Donc, aucune innovation côté SWF et un retrait en douceur de Air. Adobe mise cette année sur du full HTML5.

Applications mobiles : l'incroyable impasse sur les formats natifs !
Adobe ne présente enfin aucune solution probante pour réaliser des applications mobiles 100% natives (Objective-C pour iOS, Java pour Android). Seule la DPS et Air initient cette approche. La DPS est une coque gérant des mises en formes non connectées. Air intègre des données connectées mais graphiquement plus limitées que si l'application était développée en C.

Pour résumer, nous retiendrons que la CS6 se recentre sur les logiciels purement graphiques. Pour ce qui est de la publication... peu mieux faire : les fonctionnalités connectées de la DPS (boutique virtuelle, galeries de photos dynamiques, vidéo en streaming) manquent pour de réelles problématiques de publication. Mais nous ne sommes qu'au début de l'aire de la publication digitale. Vivement les prochaines mises-à-jour !


vendredi 13 avril 2012

Résolutions d'écrans et responsive design

Comme le rappelle Mac4Ever, les statistiques de résolution des écrans pour le Web et dans le monde évoluent.

Mais si le format 1024x768 commun reste le minimum observé, selon W3CSchool et Screenresolution, le ratio 4:3 disparaît au profit de ratios panoramiques.

Mais c'est aussi sans compter les usages des smartphones pour lesquels la résolution se mesure plutôt dans un ratio vertical, à moins d'incliner le périphérique.

Il en résulte qu'un projet Web plus que jamais doit s'adapter en fonction des différentes résolutions car aucune n'est plus vraiment la référence. Utilisez pour cela les bibliothèques de mise en forme élastiques (dites : responsive design). Voici une page qui illustre parfaitement ce concept, tutoriels à l'appui et bibliothèques en ligne :

http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/

Voir le wikipédia qui reprend les fondamentaux des problématiques de la résolution écran :

http://fr.wikipedia.org/wiki/D%C3%A9finition_d%27%C3%A9cran

Le responsive design est un concept de plus en plus intégré dans les logiciels traditionnels de mise en page pour contenus numériques à destination du Web, du mobile et du Print. Des dispositifs de mise en forme automatisés, des feuilles de styles ou des objets dynamiques, y permettent d'éviter de recomposer la mise en forme afin qu'elle s'adapte en grande partie et automatiquement à la résolution finale de la plateforme de diffusion. Si votre version de logiciel n'inclut pas encore ces fonctionnalités, reportez-vous aux sites précédemment cités.

Pour en savoir plus sur les nouvelles fonctionnalités des logiciels, rendez-vous sur www.adobe.fr.

Lisez aussi cet article de designer interactif sur le responsive design (mai 2012) :
http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/

jeudi 12 avril 2012

L'origine de la fragmentation des formats

La fragmentation des supports, et la nécessité de publier vers toutes les plateformes, induit à toute personne intervenant dans le codage ou la conception d'une quelconque interactivité, de comprendre ce qu'est finalement un programme et sur quoi se base en fin de compte chacune des plateformes.

Les techniques fragmentées que nous utilisons sont-elles si disparates ? La logique informatique ne trouve-t-elle pas une corrélation quelque part entre toutes les formes de publication ? Nous traitons pourtant toujours des images, des textes, des sons, des chiffres ? Alors, où est la vraie différence ? J'ai trouvé une réponse en m'initiant à la programmation en C. Voici quelques observations pour aider tous les codeurs qui se torturent sans jamais comprendre ce qu'ils font :

Au fond, la machine est la même partout et la gestion des données diffère assez peu si l'on observe l'informatique à un "bas niveau", c'est-à-dire à un niveau de programmation qui affecte directement les allocations mémoires du système d'exploitation, comme en langage C par exemple. En C, on déclare des variables qui allouent de la mémoire. On remplie ces variables. Puis, on gère des calculs entre les valeurs stockées dans les variables tout en vérifiant au passage que la mémoire sollicitée et l'environnement le permettent, en plus élaboré bien sûr. Mais fondamentalement, c'est ce principe

Qu'est-ce qui fait alors que nous devons publier dans un format ou dans un autre, selon l'environnement ?

Le langage C est puissant, mais limité d'un point de vue sémiotique. Pour simplifier la programmation, les ingénieurs de l'informatique (dont Bjarne Stroustrup en premier en 1983), ont amélioré le langage des années 70 en y apportant un dictionnaire plus étoffé, le C++ pour ne citer que lui, qui automatise sous la forme d'expressions pré-machées, tout un tas de processus.

Le plus parlant d'entre eux est le principe même de la chaîne de caractère. En mémoire informatique, les données stockées ne sont que des chiffres. Les lettres n'existent pas. Lorsque l'on programme en C, on doit donc coder chaque lettre (à l'aide de librairies heureusement) en chiffre. Ce qui reste tout de même très fastidieux. Alors qu'en C++, par exemple, on utilisera un objet particulier appelé String pour ce faire qui fait référence à une série d'instructions chargées de recomposer une suite de lettres en série de tableaux comportant des chiffres. L'appel à un objet qui automatise un process s'appelle la programmation orientée objet (POO). C'est une des grandes caractéristiques de C++ par rapport à C.

Il en est ainsi pour de nombreux langages inspirés du C mais dont la mission respective a été de s'adapter plus ou moins à son environnement de développement. chaque version apporte ainsi son lot d'amélioration rendant toujours la finalité compatible avec la plateforme d'exécution du fait qu'elle repose sur le même vocabulaire initial, mais sans rétrocompatibilité du fait que l'initial ne dispose pas de ce nouveau vocable.

A ces langages, des interfaces ont permis de simplifier plus encore le travail en évitant même parfois de coder. C'est le rôle du logiciel. Qu'il soit libre ou propriétaire, plus le logiciel code à bas niveau (proche des numéros stockés dans la mémoire de l'ordinateur) et plus l'interface est de haut niveau (sans programmer), plus il y a un grand écart en somme entre ce que l'on code et ce que l'on obtient, plus le logiciel apparaît comme performant.

Inversement, un logiciel qui oblige à programmer dans un dictionnaire farfelu et illogique pour obtenir au final un objet même pas compilé dans un format natif de bas niveau, c'est assez limite d'un point de vue éthique. C'est la distinction que l'on peut faire par exemple aujourd'hui entre une application iOS codée depuis Flash Pro (via SWF, puis Air) qui utilise de nombreuses couches logicielles d'interprétation tout en atreignant l'utilisateur à coder pourtant beaucoup, et une application native et stable pour iOS réalisée depuis une solution Aquafadas, sans programmer. La première n'est pas performante et reste complexe à mettre en oeuvre tandis que la seconde est facile à déployer, très fluide et stable.

Mais, à chaque couche supplémentaire de conversion, l'auteur de l'interface ou de l'environnement, ajoute aussi ses propres contraintes : licences, limites des fonctionnalités, limites de publication. C'est la raison pour laquelle aujourd'hui le Web est devenu une sorte de chienlit de formats standards non interprétés et de formats propriétaires non disponibles sur certaines machines. Les intérêts des éditeurs ne vont pas dans le sens d'un Web ou de formats homogènes. Cela n'est pas sans nous rappeler l'adage bien connu qu'il faut en effet diviser pour mieux régner.

Pour en savoir plus sur cette logique complexité de l'informatique, et pour mieux comprendre l'enjeu trouver la bonne solution logicielle la mieux adaptée à ses besoins, je vous recommande vivement la lecture du cours de programmation en C de M@téo sur le site du zéro : http://www.siteduzero.com/tutoriel-3-14189-apprenez-a-programmer-en-c.html

Plus qu'un cours d'histoire très accessible et rapide, vous y apprendrez les rudiments de la vraie programmation. Ce qui vous aidera à appréhender ensuite tous les autres langages : Objective-c, C#, Java, et même PHP, ActionScript, Javascript et même encore pourquoi pas HTML5. Réalisez les exercices de l'étape I de la programmation en C, puis lisez l'étape II, au moins. Parcourez ensuite les autres langages.

Chaque langage, finalement aussi simple soit-il, utilise un dictionnaire qui fait référence au vocabulaire d'un autre dictionnaire plus ancien, et ainsi de suite jusqu'à atteindre la couche de programmation de bas niveau. Rien n'est inventé. Tout n'est qu'adapté et étiqueté iOS ou Android, Flash ou HTML, bitmap ou vectoriel...

mardi 10 avril 2012

Le trans-média avec Mr Morris


Un ex-animateur de Pixar (William Joyce) a réalisé un film d'animation innovent intitulé "The fantastic flying books of Mr Morris Lessmore". Il s'agit d'une animation classique, diffusée dans les circuits traditionnels, d'une durée d'environ 15 minutes, mais à laquelle est également associée, en option et en téléchargement payant (4,99 dollars sur App store), une application audio-visuelle.

Lien de la version interactive, pour iPad bien sûr (Disney = Pixar = Apple) :
http://itunes.apple.com/us/app/the-fantastic-flying-books/id438052647?mt=8&ign-mpt=uo%3D4

Cette application, ou plutôt cette animation interactive, offre à l'utilisateur d'une tablette iPad, un document animé aux vertus ludiques et pédagogiques, basée sur les mêmes scènes que l'animation initiale. Voici un beau projet d'écriture trans-média qui a retenu toute ma considération. En voici les raisons.

L'utilisation des supports est ici agréablement valorisée. Le film n'est pas réduit à un objet stérile de sorte qu'il soit visible sur tous les supports en postant la vidéo sur un simple Youtube. Au contraire, le film traditionnel est assez long et prend idéalement place sur un grand écran de cinéma ou de télévision, où l'image est sublimée et où la poésie du récit assoit littéralement le spectateur. Le circuit de diffusion est traditionnel et l'on suppose qu'il respecte à ce titre les convention d'usage et la chronologie des médias. Mais, c'est naturellement l'objet interactif qui retient ici mon attention. Celui-ci, en revanche, est disponible instantanément, et adopte comme il se doit une toute autre écriture. Pour ne pas concurrencer le premier, bien sûr, mais surtout pour valoriser le support et l'expérience de l'utilisateur sur ledit support iPad, évidement. Et ce faisant, plus l'expérience sur le support est valorisée, plus l'idée d'acquérir l'animation interactive moyennant quelques dollars se justifie.

L'animation dans sa présentation interactive prend ainsi du sens uniquement sur la tablette. Par exemple, Mr Morris abandonne la lecture des livres de papier avec le temps qui passe et ces derniers dépérissent et le film lui-même passe en noir-et-blanc. Le lecteur est amené à s'engager dans le récit par impulsions tactiles, afin de faire progresser l'histoire, voire, coloriser des éléments du décors, rendus inertes par la démotivation du personnage principal. Et c'est cette couleur qui fait quasiment reprendre au personnage l'inspiration et relance en somme l'animation.

Voilà une approche nouvelle et trans-média qui permet de rendre le support interactif intéressant en ceci que le spectateur, et plus particulièrement ici l'enfant, ne demeure plus passif devant une oeuvre (télévisuelle ?). Il est convié à participer à l'imaginaire. Il est même poussé à l'apprentissage et ce de manière autrement plus aboutie et sensible que depuis un jeu vidéo "occupant" plus que réellement "participatif". L'écriture est ici rondement menée. L'oeuvre adopte un sens différent selon chaque support de diffusion. Mais plus encore, lorsque l'on voit le film d'animation en complément de vivre l'expérience interactive, c'est toute la dimension littéraire de l'oeuvre qui jaillit de ces expériences de narration multiples. L'oeuvre est bien trans-média, c'est-à-dire plus que simplement pluri-média ou multi-canale.

On déplorera cela dit le manque d'originalité du récit, directement inspiré du film Kerity, réalisé par La Fabrique, entreprise française, à Montpellier. Le thème musical de l'animation n'est pas non plus sans rappeler le titre Heal the world de Mickael Jackson.

Mais, le sujet invite à considérer le livre traditionnel comme un bel objet que ledit iPad ne gagnerait pas à remplacer. Il réitère ainsi notre propos qui est de déployer toujours une oeuvre sur un support en fonction de sa spécificité, et non de niveler les contenus vers le bas, sinon, c'est bien sûr inutile et avilissant.

Pour en savoir plus sur ce projet admirable, lisez l'article suivant (V.O) :
http://www.fastcodesign.com/1664419/an-ex-pixar-designer-creates-astounding-kids-book-on-ipad

Extrait vidéo du film :

Dans la lignée de Pixar, pour en savoir plus sur la mécanique narrative d'un récit animé classique à la sauce Disney, lisez aussi cet article :
http://www.linternaute.com/cinema/magazine/la-recette-des-dessins-animes-disney/

Lisez aussi l'article suivant :

http://bloc-notes-arzhur.blogspot.fr/2012/05/le-trans-media-suite.html

jeudi 5 avril 2012

Les standards du Web en 2012

Comme observé dans un article précédent, le format SWF étant promu à une évidente disparition, observons quels sont désormais les standards qui nous restent pour créer des environnements interactifs fixes et/ou mobiles et les logiciels qui pourraient faciliter l'édition de ces standard :
  • HTML/CSS3
  • Javascript
  • SVG
  • Canvas
  • Air
  • Objective-c
  • Java
HTML5/CSS3
Il permet de réaliser des mises en page sémantiques propres avec du style. Mais n'offre point de grandes options d'interactivité ni d'animation réellement exploitables car subordonnées aux contraintes des navigateurs (mise en cache limitée à 5Mo/site, partage de la mémoire RAM limitée au navigateur, propriétés d'animation et d'interaction souvent non prise en charge par l'un ou l'autre des navigateurs). Compatible à long terme avec tous les navigateurs. Les mises en forme peuvent également être compilées dans des applications fixes et mobiles pour accompagner les développements réalisés en langage natifs. C'est le B-A-BA du Web aujourd'hui.

Javascript
Il introduit le calcul dans la page Web et permet d'apporter une interactivité, une logique, une intelligence face au comportement de l'utilisateur. Il peut également animer les objets et être compilé comme le HTML5. Son utilisation est désormais incontournable dans tout projet Web non compilé souhaitant apporter une plus-value.

SVG
C'est une extension de la norme HTML5 qui utilise du Javascript pour animer des objets structurés sémantiquement et vectoriels. Comme on utilise ici des données vectorielles, ce principe est donc adapté à la cartographie et aux interfaces compliquées emboitant de nombreuses connexions. Mais comme c'est du vectoriel, c'est également très gourmand en calcul dès lors que le nombre de données augmente. On utilise ce langage uniquement pour des cartes interactives, des interfaces, ou des organigrammes.

Canvas
C'est également une extension de la norme HTML5 qui créer une fenêtre dans la page HTML et utilise aussi le Javascript pour animer. Mais, contrairement au SVG, les objets animés sont des bitmaps ou en tous cas, ce qui en résulte est un bitmap. Le rendu est équivalent à celui obtenu à partir d'une vidéo. Cette technique est donc adaptée aux animations riches graphiquement mais fera fi de leur relation sémantique. Et à la différence d'une vraie vidéo, elle est ici rendue en temps réel. Cette technique est donc idéale pour la création de jeux 2D et 3D interactifs, de photomontages, et les web documentaires graphiques. Les web documentaires basés davantage sur un principe d’organigramme ou de carte interactive utiliseront plutôt SVG. Canvas est enfin le standard amené à plus long terme à gérer l'affichage et les interactions d'objets en 3D.

Air
Air est le format post-Flash et qui permet de compiler dans un seul objet autonome et stable, quel que soit son environnement d'exécution et toutes plateformes confondues : du HTML, des CSS, du Javascript, du SWF et tous type de médias (vidéo, 3D, sons, images, vecteurs). C'est donc à priori le format idéal, si ce n'est qu'il requiert un player peu répandu et ne permet pas une organisation vraiment sémantique des données. Ses performances sont correctes bien que les formats natifs (Objective-C, C#) prévalent sur la fluidité des animations bien entendu. Adobe a annoncé un partenariat avec Unity, solution de développement de jeux vidéos en 3D, afin de porter les jeux sur toutes les plateformes via Air. Mais attention, les jeux se programment non pas en AS3 mais en Javascript/C#/BOO dans Unity. Pas d'espoir de lier réellement les deux plateformes donc et encore moins de les customiser dans Flash Pro. Cette option permettra néanmoins de retrouver des jeux 3D sur tout le Web et les tablettes. Air, en plus des applications spécifiques de bureau, sera donc désormais associé au portage simplifié de la 3D.

Objective-c
Dérivé du C, Objective-c est le langage de la plateforme iOS (Apple mobile) qui permet de développer des applications connectées et fluides pour iPhones, iPods et iPads et uniquement pour ces plateformes.

Java
Dérivé du C, Java est le langage de développement d'applications pour les plateformes mobiles Android et BlackBerry RIM, mais aussi pour certaines applications de bureau.

C#
Dérivé du C, C# est le langage de programmation utilisé pour les plateformes Microsoft mobile.

Pour en savoir plus sur SVG vs Canvas, lisez aussi ce brillant article :

http://blogs.msdn.com/b/davrous/archive/2011/05/20/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-2-4.aspx

Pour connaître la vérité sur HTML5 :
http://www.alsacreations.com/actu/lire/1324-mythes-et-verites-html5.html

Pour connaître enfin les outils disponibles en 2012 et qui utilisent chacun de ces standards, consultez également l'article suivant :
http://bloc-notes-arzhur.blogspot.fr/2012/04/les-outils-de-communication-digitale-en.html

Pour mieux comprendre la fragmentation des formats et le rôle du langage C dans les développements, lisez cet article :
http://bloc-notes-arzhur.blogspot.fr/2012/04/lorigine-de-la-fragmentation-des.html

mardi 3 avril 2012

Animer pour le mobile (les spriteSheets)


Illustration : Preston Blair.

Indépendamment du talent de l'animateur, l'animation pour le Web demeure aisée d'un point de vue purement mécanique, dans la mesure où la performance des cartes graphiques autorise le calcul ainsi que l'animation des points d'ancrage vectoriels, et ce, de manière fluide (c'est le traditionnel morphing 2D de Flash).

En revanche, les équipements mobiles, eux, ne permettent pas de gérer l'animation des points d'ancrage du fait des performances limitées des tablettes et des smartPhones. Voici la solution pour animer sur ces plateformes :

Vous devez animer uniquement des suites d'images bitmap et en afficher seulement la partie visible à l'écran, afin d'épargner au système des calculs inutiles. Ainsi, convertissez vos interpolations vectorielles en séries d'images bitmaps, vos textes animés par translation en bitmaps, vos tweens sophistiqués en suites d'images bitmaps. Cette technique d'animation par image est également appelée le spriteSheet (feuille de styles de blocs successifs) ou le blitting (technique employée par XEROX PARK en 1975 pour le système Smalltalk).

Le principe est celui du Gif animé et de la vidéo, en somme. La vidéo permet cela dit une plus grande qualité d'affichage pour un poids moindre du fait de la disponibilité d'excellents algorithmes de compression spatio-temporels (h264). N'hésitez donc pas à convertir également vos animations en vidéos. Elle n'en sera que plus légère et fluide.

Ces techniques sont employées par les nouvelles classes d'animation GreenSock pour iOS (http://www.greensock.com/blitmask/) si vous publiez en Air (non natif), et par Aquafadas DPS et Adobe DPS, lors de la génération d'une application native iOS ou Android, où l'application convertit automatiquement vos pages et vos animations en suites d'images via Photoshop.

C'est plus lourd que du vecteur, mais plus fluide aussi. Le poids pour une Apps ayant un rôle moins important que ses performances d'affichage, du fait de la lecture généralement différée du contenu, il est préférable, que dis-je ?, il est incontournable de créer des bitmaps plutôt que d'animer des formes.

Lire aussi l'article sur GreenSock pour iOS :
http://bloc-notes-arzhur.blogspot.fr/2012/02/greensock-sur-ios.html

Capture vidéo de la différence entre une appli qui utilise la classe Blitmask de Greensock et une qui ne l'utilise pas :

Adobe Creative Week 2012

Comme lors de chaque nouvelle version de la suite creative de Adobe, ne manquez pas l'événement en ligne qui présente les nouveautés des logiciels Photoshop, Illustrator, Indesign, Dreamweaver, Flash (s'il en est), Edge, Premiere pro, After Effects, et les autres composants connexes à la suite. L'événement initulé La creative Week est diffusé en ligne. Pour assister à l'événement, rendez-vous sur l'Adobe Live, à l'adresse suivante, du 21 au 25 mai 2012 :

http://www.adobelive.fr/

Remarquez que le site de l'événement n'est désormais plus en Flash, mais bien en HTML ; )

Nous ne manquerons pas de commenter les nouveautés des logiciels dès que nous serons autorisés à les dévoiler, sur ce blog, à partir du 23 avril 2012, ainsi que les nouvelles stratégies de création de contenu émanant du développement de certains formats très attendus et de l'abandon programmé d'autres solutions, pour ne pas en dire plus ; )

A bientôt,

Sites de statistiques pour concepteurs Web et transmédia

L'Express entreprise a publié une liste de sites utiles pour réaliser des études de marché. Voici le lien de cet article :

http://lentreprise.lexpress.fr/etude-de-marche/ou-trouver-des-donnees-pour-une-etude-de-marche_32290.html?xtor=EPR-11-%5BENT_Zapping%5D-20120403--108094231@203020106-20120403071416

Dans cet article, Les sites suivants sont repris mais j'ai synthétisé ici leur objet respectif et ai ajouté celui incontournable de designer interactif, l'excellent site informationisbeautiful.net qui propose de belles infographies et des enquêtes atypiques, W3schools qui offre des données actualisées, et le Monde informatique :

  1. VGChartz : consoles de jeux
  2. Marketing Charts : marché USA.
  3. IT Facts : marché du numérique en général.
  4. InternetWorkdStats : usages mondiaux du web.
  5. Display Search : marché de l'affichage numérique (écrans plats, TV, etc).
  6. Consumer Electronics Association : étude de marchés dans le secteur électronique.
  7. IDATE : télécommunications, télévision et mobilité.
  8. CIPA : appareils photo.
  9. GFK : panels de la distribution, audience sur Internet et sur mobiles basé sur les données réelles des opérateurs télécoms.
  10. Credoc : conditions de vie en France.
  11. DDM : médias en France, presse écrite, chaines de télévision.
  12. ARCEP : télécommunications en France, ADSL et mobiles.
  13. CSA : équipement des foyers en réception de télévision numérique, audiences radio et télévision en France.
  14. CNC : industrie audio-visuelle et chaîne de production et de diffusion du cinéma.
  15. Observatoire européen de l’audiovisuel : marché du cinéma et de la télévision.
  16. SIPEC : marché de la photo numérique.
  17. IDC : logiciels, ordinateurs et des services informatiques.
  18. Pierre Audoin Consultants : marché entreprise.
  19. Gartner Group : informatique d'entreprise.
  20. Jupiter Research : loisirs numériques (blog fermé mais toujours en ligne).
  21. Flurry.com : logiciels pour mobiles.
  22. IAB : marché publicitaire en ligne en France et dans le monde.
  23. UDA : marché de la publicité en France.
  24. IREP : marché publicitaire en France (payant).
  25. SNPTV : consommation de la télévision en France.
  26. INSEE : données démographiques sur la population et les entreprises en France.
  27. Eurostat : données démographiques sur la population et les entreprises en Europe, usages des technologies dans le grand public et en entreprise.
  28. AFIC : baromètre du capital risque.
  29. Indicateurs Chausson Finances : financement par le capital risque en France.
  30. NVCA (équivalent US de l'AFIC) : capital risque aux USA.
  31. Designer interactif : marché du design numérique et des usages des professionnels du webdesign, salaires des professionnels du design et de l'interactivité.
  32. http://www.informationisbeautiful.net/ : tous types d'enquêtes sociétales bien illustrées.
  33. Le Monde informatique (les chiffres 2012 sur iOS et Android).
  34. W3Schools : les statistiques de pénétration des navigateurs, des systèmes, de manière très lisible et actualisée. Un incontournable !