dimanche 29 septembre 2013

Android : compatibilité DPS/Aquafadas

Les deux grands systèmes de création de magazine enrichi qui exportent aux formats ePub et application mobile, se déclinent depuis plus d'un an maintenant vers la plateforme Android, devenue, depuis, majoritaire dans la répartition des usages (voir études de Comscore). Il devient donc indispensable de prévoir, dans vos projets de publication, leur adaptabilité pour l'environnement Android. Voici les deux liens où sont listées les fonctionnalités Adobe et Aquafadas, compatibles avec iOS et Android.

Comparatif des fonctionnalités Adobe DPS compatibles iOS versus Android :
http://helpx.adobe.com/fr/digital-publishing-suite/help/supported-feature-list.html

Comparatif des fonctionnalités Aquafadas compatibles iOS versus Android :
http://helpdesk.aquafadas.com/index.php?/Knowledgebase/Article/View/103/0/les-pre-requis--pour-creer-un-ave-pour-android

L'export Aquafadas Webreader permet également de décliner votre publication pour le Web au format Flash SWF en préservant la majorité des enrichissements développés initialement pour la tablette. Pour accéder à la liste des enrichissements compatibles, consultez le PDF à l'adresse suivante :
http://ftp.ave-comics.com/public/serviceclient/Apps/Tutorial/pre-requis_AVEWeb_FR.pdf

mercredi 25 septembre 2013

WebGL : le Web HTML5 en 3D


Pour animer en 3D sur le Web vers tous les navigateurs, il fallait jusqu'à lors composer quasi exclusivement avec le Player Flash et ses animations au format SWF. Le player Flash n'étant pas disponible sous iOS ni sous certaines versions d'Android, seule la norme WebGL (Javascript qui invoque la carte graphique pour jouer avec un objet 3D) permettait de le faire, mais Internet Explorer était le seul à ne pas intégrer cette spécification.

Or, IE 11 vient d'intégrer, dans sa nouvelle version, la spécification WebGL. C'est une révolution !

Pour réaliser des interfaces en 3D pour le Web, désormais, il est viable de se pencher sur la norme WebGL. Le temps d'implémentation de la nouvelle version de IE peut prendre encore quelques mois voire quelques années, mais à terme, la 3D au format HTML5 n'aura plus de barrière.

Pour en savoir plus sur le mécanisme de WebGL, consultez l'article du Wikipédia assez explicite sur le sujet, à l'adresse suivante :

http://fr.wikipedia.org/wiki/WebGL

jeudi 19 septembre 2013

Les formations webdesigner


Depuis quelques mois, de nouveaux programmes de formation sont en vogue dans vos centres de formation préférés et permettent, rapidement, de réaliser de superbes projets interactifs pour tous les supports et sans coder. Voici un florilège des cursus tendances. Je les ai organisés dans un ordre logique de progression pédagogique. L'ensemble de ces stages constitue pour ainsi dire la voie royale pour devenir un bon webdesigner.
  • Photoshop : La base de la création numérique passe par l'indétrônable Photoshop. Tout ce qui se voit à l'écran passe par Photoshop. C'est la matière première du designer.
  • After Effects : Animation vidéo, effets spéciaux, compatible tous supports mais zéro interactivité.
  • Edge Animate : Animations simples et interactivité HTML5/JS/JQuery/CSS3, sans coder, avec tous types de médias (images, svg, vidéo, son, texte, typos). Remplace Flash. Les dernières versions de Edge codent proprement.
  • InDesign : Mise en page avancée pour la presse et l'édition numérique (PDF). Incontournable pour diffuser sur les tablettes et accessoirement, imprimer flyers, livres et magazines.
  • Extension Adobe DPS pour Indesign : Réalisation de parutions interactives pour les tablettes (ePubs, Magazines natifs enrichis d'animations HTML5 et de vidéos). DPS est utilisé surtout par les groupes anglo-saxons.
  • Extension Aquafadas pour InDesign : Réalisation de parutions interactives pour les tablettes (ePubs, Magazines natifs enrichis d'animations HTML5 et de vidéos). Aquafadas est utilisé surtout par les groupes de presse français.
  • PhoneGap : Permet de convertir facilement des pages Web HTML5 en Webapp, afin de publier une application légère sans passer par l'app store ni Google play et sans payer de licences à chaque diffusion, mais limité à des données légères (textes et vignettes).
  • HTML/CSS : un à deux jours d'initiation au HTML suffira amplement pour ajuster vos pages si vous souhaitez travailler également pour du Web. Inutile aujourd'hui de vous embarquer dans des formations interminables et indigestes de codage HTML/CSS3/Javascript qui vous éloigneront plus de vos velléités d'artistes qu'autre chose. Après, on devient développeur. Et ça, c'est un autre métier (JS/PHP/MySQL/Obj-C/C#/Java).
  • Wordpress : CMS (sites prédéfinis en kit) pour créer des sites Web standardisés et faciles à mettre à jour, car un système de gestion de base de données y est intégré. Dispositif par ailleurs compatible avec les publications digitales et les webApps.
Voilà. Avec ça, vous êtes parés pour devenir un vrai webdesigner, capable, et concentré sur ses préoccupations graphiques. Des notions de HTML vous seront appréciables. Mais il n'y a plus aucune nécessité de coder quoi que ce soit avec les outils actuels pour réaliser une bonne campagne transversale de communication.

mardi 17 septembre 2013

Adobe DPS : l'export ePub


Les systèmes de publication digitale Adobe DPS ou Aquafadas, compatibles avec inDesign, permettent de réaliser des magazines au format natif (apps), des ePubs, des PDF, voire un export Web au format SWF. Bien rares sont les formations ou les ouvrages qui se concentrent sur le format ePub, souvent délaissé car assimilé au parent pauvre du digital. En voici un, et de bonne facture : L'édition numérique avec InDesign Publishing Suite, aux éditions Eyrolles, par Pierre Labbe.

Le ePub est un format limité graphiquement, car basé sur du HTML standard. Mais son texte étant flexible, il offre un grand intérêt pour les contenus essentiellement basés sur de grandes quantités de texte (romans, essais, contes). Le texte y est zoomable et indexable, au détriment d'une mise en forme bien moins élaborée que dans un export natif du type folio ou ave.

Le livre de Pierre Labbe revient sur l'idée que le format ePub n'est autre qu'un HTML couplé à une feuille de styles CSS, mais zippés. Le ePub2 équivaut à du XHTML/CSS, là où le ePub3 équivaut à du HTML5, mais se révèle bien moins compatible avec les versions actuelles des liseuses.

On y apprend comment bien structurer son document dans InDesign pour ne pas avoir à revenir dans le code HTML généré ou, à défaut, quelles interventions effectuer en mode code pour assurer l'affichage des styles CSS. Rappelons que les formatages contextuels placés dans le corps du texte au sein de InDesign se révèlent souvent infructueux, alors que les formatages CSS de balises, s'ils sont traités à partir d'une feuille de styles, apparaîtront, à l'export, isolés dans une feuille CSS externe, et, de ce fait, fonctionneront généralement assez bien.

Toute la problématique consiste donc à bien placer les styles dans InDesign et à identifier lesquels seront ou ne seront pas affichables. En résumé, seuls les styles de spécification CSS purs (pas ceux disponibles dans InDesign contextuellement), et externalisés, sont vraiment utilisables. Il est incontestable qu'une bonne connaissance des spécifications HTML/CSS de base (celle des années 2000) aide à comprendre les limites du format ePub. Si vous possédez de bonnes notions de HTML/CSS, vous n'aurez aucune difficulté à appréhender le format ePub. Vous pourrez même en produire sans passer par InDesign. Ce livre n'aborde pas les spécifications CSS pour le Web mais uniquement celles qui sont disponibles dans InDesign. Leur connaissance vous sera néanmoins d'un grand atout en production, car au fond, un ePub n'est jamais qu'une simple page Web un peu plus stylée.

Dans cet ouvrage, hélas, n'est pas abordé la problématique de conversion des formats de fichier ePub pour Amazon. Pour le compléter, je vous invite à consulter cet article qui reprend les étapes requises, via Calibre (le convertisseur de ePub au format MOBI pour Amazon) :

http://www.redrag.fr/blog/?p=574

En revanche, Pierre Labbe revient sur le plugin DPS-MSO Maker pour InDesign CS6 qui vous épargne quelques lourdeurs de manipulations pour monter des composants interactifs avancés tels que des diaporamas animés, en un clic ! Une extension incontournable si vous travaillez avec DPS et vers un export magazine (et non ePub) :

http://expertsgraphiques.free.fr/index.php?post/2013/01/30/Un-panneau-pour-InDesign-CS6

Pour acquérir le livre de Pierre Labbe au format papier, PDF ou ePub, consultez le lien suivant :

http://www.eyrolles.com/Audiovisuel/Livre/edition-numerique-avec-indesign-digital-publishing-suite-epub-9782212854213

vendredi 13 septembre 2013

BD animée : Je vous ai compris !


Je vous ai compris ! C'est le titre d'une série de BD animée produite par MagnificatFilms. Elle est vendue 3,99€ pièce et se consulte sur vos tablettes.

Mais attention, cette bande-dessinée animée ne propose pas un simple défilement de planches graphiques ou de zooms. C'est une suite de cases contenant réellement de l'animation et quelle animation ! Un bijou incontournable de création.


Cette bande-dessinée animée (ou motion comics) offre un niveau simple d'interactivité et zéro gadgétisation. Pas de jeux inutiles. Pas de boutons ou d'actions intrusives à chaque page. Tout repose sur l'oeuvre et sa mise en forme narrative spécifique, adaptée au format tablette. Ici, nous vivons pleinement l'oeuvre audiovisuelle en appréciant sa facture, son scénario (d'où certainement son prix SACD) et l'interactivité imperceptible qui en découle. Si l'interaction ne se sent pas, ni par son absence, ni par ses excès, c'est qu'elle a alors trouvé sa juste place, simple, économe, ni plus ni moins. Je vous invite vivement à télécharger cette application et à lire au moins le premier épisode de cette série, gratuit. L'immersion et l'expérience sur la tablette en ressortent grandis.

Voici le teaser de cette expérience immersive, pîle dans la ligne éditoriale de ma propre société Swipe & Swipe, spécialisée dans la création de publications digitales enrichies en audiovisuel :


A ce titre, pour vous accompagner dans ce type de création, si vous produisez déjà des oeuvres audiovisuelles (séries animées, fictions, docu, films, musique), n'hésitez pas à me contacter à travers ma propre structure. Je me ferai un plaisir de vous accompagner pour réaliser ensemble ce type de produit :
http://www.swipe-et-swipe.fr

Pour télécharger la bande-dessinée directement depuis l'appStore :
https://itunes.apple.com/fr/app/je-vous-ai-compris/id595312079?mt=8

Ou Android Google play :
https://play.google.com/store/apps/details?id=com.magnificat.jvac2

mardi 10 septembre 2013

Abonnement illimité à Elephorm


Elephorm, la formation à partir de tutoriels vidéos orientée métier, propose une formule par abonnement, vous permettant de disposer à moindre frais de l'ensemble des formations du catalogue, dont celle que je viens de publier sur Adobe Edge Animate CC.

Une promo est disponible ce jour jusqu'au 15 septembre avec 100€ de ristourne pour tout engagement d'un an. Pour en profiter, utilisez le code promo suivant 100EUROS-PASS-ELE et suivez ce lien :

http://www.elephorm.com/vod-elephorm/abonnements/abonnement-vod-12mois.html?utm_source=Base+email+clients+Elephorm&utm_campaign=5e0134a0e9-26-08-Elephorm&utm_medium=email&utm_term=0_43e1e5959b-5e0134a0e9-201690293

lundi 9 septembre 2013

Extensions Photoshop : Generator/Reflow


Edge Reflow fait partie de la suite logicielle Adobe Edge tools. En complément de Edge Animate qui permet de réaliser des animations interactives comme dans Flash Pro, mais au format HTML5, Edge Reflow va offrir des outils pour créer des interfaces responsives, c'est-à-dire, qui s'adaptent à chaque résolution d'écran. Les deux logiciels offrent naturellement une compatibilité transversale.

Photoshop, de son côté, qu'on ne présente plus, permet de réaliser des maquettes graphiques de sites Web (surtout depuis l'arrêt annoncé du développement de Fireworks par Adobe), mais aucune liaison ne permettait jusqu'à lors de publier à la volée de Photoshop vers Edge ou vers les standards d'images HTML/HTML5. Voici qui est résolu dans la mise à jour de Photoshop CC contenant deux nouvelles extensions nommées Generator et Projet Edge Reflow, sorties ce jour.

1) L'extension Generator pour Photoshop CC
Generator permet de générer des images jpg, gif ou png, sans enregistrer ni exporter votre document, à mesure de vos modifications. Il suffit de nommer vos calques Photoshop avec l'extension qui correspond au format d'image que vous souhaitez obtenir (.gif, .jpg, .png) et d'y ajouter, sans espace ni séparation le pourcentage de compression Jpeg si c'est un Jpeg sur une échelle de 1 à 10 (exemple de nommage de calque : monJoliFond.jpg7) et Photoshop convertit automatiquement les calques en bitmaps dans le bon format, en temps réel, à chaque modification de ce calque ! Les fichiers sont placés à côté du fichier Photoshop, dans un répertoire nommé Assets.

Il devient aisé de produire à la volée les vignettes d'une application mobile nombreuses et répétitives, une suite d'images défilante pour une publication digitale ou les sources d'une maquette de page HTML. En organisant intelligemment votre flux de production, vous pouvez ainsi placer le fichier natif Photoshop (.psd) directement dans le répertoire de votre projet et, sans même exporter vos images, elles écrasent en temps réel celles qui seront invoquées directement depuis vos pages HTML. Une révolution dans le flux de production Web et mobile que l'on n'a pas connue depuis la création de l'outil Tranches.

2) L'extension Projet Edge Reflow pour Photoshop CC
L'extension Projet Edge Reflow permet d'exporter directement un fichier Photoshop au format Edge Reflow. Le texte demeure éditable en CSS au sein de Edge.Les images peuvent être organisées dans des divs si elles ont préalablement été rassemblées dans des groupes de calque Photoshop. Les balises HTML5 sont même reconnues si vous nommez vos groupes de calques du nom de chaque balise (header, footer...). En somme, vous construisez votre page HTML5 dans Photoshop ! Que reste-t-il à Dreamweaver ? Une révolution pour les webdesigners !

L'option Projet Edge reflow n'est naturellement disponible que si Edge Reflow CC est installé sur votre poste. Assurez-vous, dans la fenêtre de notififcation Creative Cloud que Edge Reflow apparaît bien comme un logiciel installé. Les versions préliminaires (beta) de Edge Reflow ne permettent pas d'activer cette option. Seule la version CC la rend disponible dans Photoshop CC.

Pour en savoir plus sur ces fonctionnalités, consultez les vidéos suivantes.




Pour en savoir plus sur Edge Animate, lisez également l'article consacré à ce nouvel outil absolument incontournable :

http://bloc-notes-arzhur.blogspot.fr/2013/09/formation-edge-animate.html

Pour télécharger Edge tools (Animate, Reflow, Code, Typekit, Webfont, Phonegap, Inspect), suivez le lien :

http://html.adobe.com/fr/edge/

dimanche 1 septembre 2013

Formation Edge Animate

C'est la rentrée et son lot de bonnes résolutions. En voici une que je vous recommande vivement. Formez-vous à Edge Animate, le successeur attendu de Flash Pro. Pourquoi Edge ? Petit récap :
  • Edge Animate permet de réaliser, sans coder, des animations aussi fluides qu'au format Flash SWF, mais sans plugin ;
  • Edge Animate permet d'exporter pour le Web en HTML5 en respectant les règles de codage CSS3 et JQuery ;
  • Edge Animate permet d'exporter vers Adobe DPS et Aquafadas ;
  • Edge Animate est compatible avec des classes d'animations de Flash Pro (GreenSock) ;
  • Les navigateurs prennent en compte désormais les récentes spécifications HTML5 incluses dans Edge ;
  • Edge Animate permet de personnaliser des actions à partir de commandes simplifiées ou via une fenêtre d'édition Javascript entièrement libre ;
  • Edge Animate est disponible dans votre abonnement Creative Cloud, sous la forme d'un logiciel physique installé dans votre ordinateur (il ne s'agit pas d'un service en ligne) ;
  • Des formations existent. pour vous aider à prendre en main le logiciel, quel que soit votre environnement de production.
L'iPhone est arrivé en 2007. l'iPad en 2010. Il aura donc fallu attendre 2013, soit 6 ans, pour qu'une solution viable (Edge Animate CC), des navigateurs compatibles, et des programmes de formation, puissent rendre l'animation HTML5 accessible. C'est chose faite !

Voici les formations disponibles.

1) Formation continue
Votre hôte sera heureux de vous accompagner sur l'apprentissage de Edge Animate dans les centres de formation agréés. N'hésitez pas à me demander auprès de ces organismes (Pyramyd, Gobelins, Ziggourat, Ellipse). Une formation continue sera la plus efficace des solutions pour vous permettre de réellement prendre en main le logiciel. Et la moins onéreuse puisque les formations que je dispense sont prises en charge par les OPCA. Profitez-en !

2) Tutoriels vidéo
Je viens de publier aux éditions Elephorm une formation de plus de 8h sur Edge Animate (mise en forme, animation, intéractivité). On y apprend à réaliser des animations avec des accélérations, des interfaces parallaxes mêlant animations et vidéo, des interfaces 2D/3D en utilisant les classes Greensock pour Edge Animate. Prix TTC 49,99€.
www.elephorm.com/web-multimedia/formation-edge/apprendre-adobe-edge-cc.html