/!\ Cet article est un peu long, si vous voulez le lire plus tard je vous conseil de l'ajouter à Pocket
Il y a une an, je testais la nouvelle suite d'adobe: Adobe Edge. Cette suite était encore en Beta et accessible gratuitement. Aujourd'hui comprise dans le service créative cloud cette suite reste mystérieuse pour beaucoup.
Adobe et le web design (au sens large) ont une
histoire plutôt compliquée. Il est difficile de savoir s’ils veulent
aider les développeurs ou les remplacer. Aujourd’hui
nous allons jeter un coup d’œil à Adobe Edge Tools &
Services, une nouvelle initiative d’Adobe qui pourra peut-être vous faire
changer d’avis sur la façon dont Adobe voit le développement web.
La nouvelle famille Edge au grand complet
Adobe Edge Tools
and Services… Sous ce nom à rallonge se cache une suite
de logiciels et de services qui devrait régir le développement web de demain. Je vous
vois sceptique, c’est vrai que
Dreamweaver ou même GoLive ont plutôt laissé un mauvais
souvenir aux développeurs. Ne perdons pas de vu qu’à
la base Adobe s’adressait exclusivement à un publique de
graphistes (par opposition à Macromedia qu’ils ont absorbé). Qui aurait pu
prévoir que Photoshop deviendrait l’outil de base pour le design web !? La
réponse est personne, même Adobe n’y avait pas songé initialement.
Mais l’heure du changement semble arrivée, Adobe a pris conscience
que le web était transverse, que les graphistes, les codeurs, les designers,
tout le monde avaient besoin d’outils adaptés pour le web. Et c’est ainsi
qu’est né Adobe Edge. Encore au stade de beta, ces logiciels sont accessibles
(gratuitement) sur la nouvelle plateforme de cloud “créatif” adobe.
Lien: http://html.adobe.com/fr/edge/
Il est maintenant
temps de faire les présentations, la nouvelle famille d’Adobe est une famille
nombreuse et chacun a sa spécialité.
Edge Animate
Sous ses aires de cockpit d’avion Animate est vraiment
simple à prendre en main
Animate pourrait
être comparé a Flash, il s’agit d’un logiciel d’animation orienté web. Mais
attention, point de flash ici ! Animate génère du JavaScript et
de l’ HTML/css à partir de votre animation, la rendant donc compatible avec la
majorité des navigateurs et tous les devices.
Si vous êtes familiarisé avec Flash ou After effect vous ne serez pas perdu.
Edge Reflow
Edge Reflow, l’outil responsive par excellence?
J’avoue que Reflow est mon
préféré dans la suite Edge. Simple, efficace et graphique, Reflow permet
de prévisualiser votre site, d’adapter celui ci aux différents
formats en fixant vos breakpoint et en personnalisant le comportement
de votre site sur une grille fluide. Et le top Reflow vous génère une
feuille css contenant tous les paramètres que vous avez définis, il
ne vous reste plus qu’à la lier à votre HTML et le tour est joué.
Il y a un an c'était précurseur aujourd'hui on trouve des logiciels équivalents qui sortent un code beaucoup plus propre tel que
Macaw ou
Webflow. La comparaison est difficile entre ces trois logiciels puisqu'elle dépend grandement de l'utilisation qu'on en fait et de votre niveau de compétence en Html/css. Si le sujet vous interesse je vous conseil d'aller jeter un oeil a l'article de smashing magazine entiérement dédié a ce sujet.
L’Aperçu de chaque format est
vraiment très utile pour conserver une cohérence
Au-delà de
l’outil en lui-même, la visualisation de chaque format permet vraiment de
jauger leur cohérence et de vérifier que la navigation
ne diffère pas du tout-au-tout. Vraiment un must pour se mettre à la
place de l’utilisateur, et ce dès la phase initiale.
Edge Code
Un peu plus qu’un simple notepad…
Là, ça devient sérieux. Finis l’ambiance graphique. Adobe nous
offre un moyen de faire du code. Mais attention Edge Code est destiné à l’HTML, au
css et au javascript avant tout. Dans les features on notera l’apparition de la
palette lorsque l’on doit définir certains paramètres. On sera
également sensible à l’accès instantané au CSS grâce à une
combinaison de touches. Et plus que tout le reste, on sera heureux de découvrir
que les web fonts Typekit, google, etc… sont pré-installées et
accessibles grâce à Edge Web Fonts. Un outils sympa pour web developer.
Les web fonts classées par genre, propriété,
et recommandation.
Voila
quelque chose d’astucieux ! Fini l’époque où nous allions chercher nos
bouts de code pour notre police “spéciale”. Web
Fonts intègre directement le code à votre feuille principale.
Fini la galère de chercher quelle police est compatible avec tel OS
ou tel navigateur, tout est la à portée de clic. Fini l’Arial et le Georgia qui
il y a encore quelques années régissaient le web, les
études montrent que maintenant chacun fait comme il
l’entend !
Au-delà de l’aspect purement technique Edge Code dispose
d’une communauté très active, et quelle communauté !
Code était en fait “Bracket” un projet basé sur la communauté avant
d’être repris par Adobe. Heureusement cette communauté est restée et a
développé des
dizaines de plugins pour Code, rendant l’expérience du code
encore plus fluide et agréable.
Edge Inspect
Edge Inspect, parfait pour vérifier son
travail sur tous les devices
Edge Inspect vous permet de prévisualiser et
de vérifier votre page web sur vos différents devices de
test. Inspect fait le lien entre tout les browsers sur tous les devices et
synchronise votre page web et la rafraîchit à la moindre
modification, changeant ainsi la page simultanément sur tous les devices. Il
permet également de prendre des screenshots, chose qui peut s’avérer utile
(pour la rédaction de specs par exemple). Néanmoins, à l’instar de Browser
Stack, Inspect nécessite que
vous possédiez les devices, ce qui est plutôt onéreux et
encombrant. Malgré ça, si vous avez un banc de test à votre
disposition, Inspect s’avère vraiment utile pour faire de la recette
multi-device.
PhoneGap
PhoneGap Builder
une usine a gaz?
PhoneGap Builder vous aide
à créer une application cross platform à l’aide des technologies web…
Les fameuses Web app. C’est actuellement un grand débat car en soi, la web app
est la solution pour déployer une application sur toute les
plateformes sans avoir à connaître les langages natifs d’iOS et d’Android.
Néanmoins la question ne réside pas dans le logiciel qui
est plutôt pratique, mais plus dans la stratégie à adopter face à ce
choix. À noter que PhoneGap permet d’accéder aux API natives
(stockage local, géolocalisation, accéléromètre, capture son et
image, etc..) ce qui est vraiment utile. Cela nous montre que la différence
entre les Web App et les App se réduit de jour en jour. A vous de choisir.
Enfin...
Et bien ça laisse espérer de beaux lendemain pour adobe dans le domaine du web. On est bien loin de dreamweaver et de son coté webmaster. Il faut espérer qu'Adobe persévère dans cette voix.
