Adobe a mis sur le marché en Aout 2011 un nouvel outil appelé Adobe Edge destiné aux designers pour créer des contenus animés en utilisant les standards : HTML, HTML5, JavaScript et CSS.
La version actuelle est une preview publique, ce qui laisse penser que vous pouvez encore rencontrer des bugs ou que le logiciel n’est pas encore complet. Néanmoins, le logiciel se trouve être redoutable pour la création d’animations en HTML5. La version prototype est pour l’instant compatible Windows 7 et Mac OS X uniquement.
Il est téléchargeable ici et valable pour une période de 150 jours. Vous devez cependant disposer d’un compte Adobe pour pouvoir le télécharger.
Adobe Edge est destiné principalement aux animations et transitions d’éléments HTML. En fait, c’est surtout pour remplacer le flash qui tend à être déprécié par Google en terme de référencement et de performances. Le logiciel fonctionne indépendamment de tout autre outil. Vos créations venant d’Illustrator, Fireworks ou Photoshop peuvent être importées sans problème dans le logiciel. Vous pouvez également importer vos documents HTML et CSS développés sous Dreanweaver utilisant les templates CSS.
Les technologies supportées par Adobe Edge sont le JavaScript, JSON, HTML/HTML5, CSS, les fichiers SVG et les animations JavaScript faites à partir de jQuery. Les types d’images supportés sont SVG, JPG, PNG et GIF.
Les applications générées par le logiciel sont basées sur le noyau de jQuery qui est directement lié au projet lors de l’export. Les animations sont générées en JSON (JavaScript Object Notation). Le logiciel ne supporte pas encore les tags canvas ou audio de l’HTML5 pour le moment mais les nombreuses versions publiques à venir vont probablement changer la donne. Le rendu est compatible avec iOS (iPhone et iPad) et vos mobiles Android car basé sur Webkit ainsi que sur Firefox, Chrome, Safari et Internet Explorer 9.
On voit quelques petits problèmes qui se posent après l’enregistrement du projet en HTML. Premièrement, il n’y a pas moyen de faire boucler l’animation (ce n’est pas encore possible par Adobe Edge). Pour ce faire, utilisez la fonction suivant avant la balise fermante head :
<script language="JavaScript">
$(window).ready(function () {
$.Edge.symbol.get($("#stage"))._getTimeline("Default Timeline").addObserver({
onComplete: function () {
$.Edge.symbol.get($("#stage")).play("Default Timeline");
}
});
});
</script>Deuxièmement, tout est généré en JavaScript et CSS, en terme de référencement, c’est pas top. Les termes de nos applications ou de nos accroches graphiques ne son donc pas vues par notre ami Google. Voici ce que l’on peut faire alors :
<!DOCTYPE html>
<html>
<head>
<title>Adobe Edge - test HTML5 CSS3</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="index_edge.js"></script>
<link rel="stylesheet" href="index_edge.css" />
<style>
html, body {
border: 0;
margin: 0;
padding: 0;
}
</style>
<!--Adobe Edge Runtime End-->
<script language="JavaScript">
$(window).ready(function () {
$.Edge.symbol.get($("#stage"))._getTimeline("Default Timeline").addObserver({
onComplete: function () {
$.Edge.symbol.get($("#stage")).play("Default Timeline");
}
});
});
</script>
</head>
<body>
<div id="stage" class="symbol_stage">
<h1>Adobe Edge HTML5 CSS3</h1>
<h2>Adobe Edge</h2>
<p>
Le contenu du div parent 'stage' est remplacé à la volé par le JavaScript de notre application, vous pouvez donc y mettre tout le contenu désiré afin d'en indéxer le contenu. </p>
</div>
</body>
</html>Très rapidement, une petite accroche visuel sous Adobe Edge donnerait alors ceci :
Vous pouvez le télécharger ici.
Dernière chose à ajouter, comme les anciennes versions de IE ne sont pas du tout compatibles, il vous faut intégrer un code de substitution dans ce fameux div. Je conseil personnellement une image sur laquelle nous spécifierons l’attribut alt pour ne pas prendre trop de valeur ajoutée.
3 Comments on “HTML5 et CSS3 : tuto Adobe Edge et astuces SEO”
Bonjour, merci pour votre exemple qui m’a aidé à découvrir plus rapidement certaines fonctions.
Un point tout de même qui me chipote. Vous sauriez comment créer un « go&play » un peu comme dans flash pour lui demander de rejouer à un moment précis ?
Pour boucler une anim c’est plus simple d’ajouter une action (trigger) dans Edge à la fin avec :
sym.play(0);
une ligne au lieu de 8 c’est toujours ça de pris…
Ceci étant je suis une bille en JS. Quel est le meiluer livre pour pratiquer avec Edge? Je ne cherche pas la théorie, juste quelles instructions placer…
@ Yves : Pour le go and play :
mettre une étiquette (label) du genre toto, puis placer une action sur un élément : sym.play(« toto »);
that simple.
Enjoy!
Bonjour,
J’intègre une animation Edge pour la 1ère fois.
J’ai mis une image de substitution dans le div parent « Stage » pour les anciens navigateurs. Il y a un léger décalage dans le démarrage de l’animation, ce qui fait qu’on voit l’image durant 2 seconds.
Y a t’il un moyen pour accélérer le démarrage de l’animation ?
Merci pour ton aide !