Share
L'une des principales sources de buzz cette semaine est l'annonce faite par Adobe de la prévisualisation Edge. Les gens en ont beaucoup parlé, mais peu semblent vraiment comprendre certaines des idées ou de la technologie derrière ce.
Aujourd'hui, j'aimerais vous parler un peu de l'aperçu Edge et de la raison pour laquelle vous devriez faire preuve d'un optimisme prudent à ce stade..
La création de contenu en utilisant une approche basée sur des normes est difficile. C'est là qu'Edge entre en jeu.
La naissance et l'histoire de Flash peuvent donner lieu à une lecture très, très déroutante: c'est incroyablement aimé ou détesté selon qui vous parlez. Le fait indéniable est que Flash est l’une des principales causes de la prolifération de la vidéo et des médias interactifs sur le Web. D'un autre côté, il est critiqué pour sa nature fermée et ses problèmes de performances.
Bien que la plate-forme elle-même n'aille nulle part dans un avenir proche, vous ne pouvez pas vous empêcher de remarquer que le blocage de Flash sur le Web s'est relâché récemment..
En raison de la montée du HTML5 et du nombre croissant de développeurs qui adoptent des normes ouvertes ou une société aux arômes de fruits menant une croisade contre Flash, le résultat final est que le Web recherche depuis un certain temps une alternative ouverte aux normes basée sur des normes. L’une des principales raisons de l’arrivée et de la popularité croissante de HTML5 et des bibliothèques telles que jQuery peut être attribuée à l’antagonisme et à l’apathie envers la plate-forme Flash..
La création de contenu avec les nouvelles technologies n’a cependant pas été facile. C'est là qu'Edge entre en jeu.
Edge est la tentative d'Adobe d'être pertinent dans le monde post-Flash.
Edge est présenté comme un outil d’animation idéal pour les concepteurs qui souhaitent créer un contenu Web rempli d’animations mais basé sur les normes ouvertes qui maintiennent le Web. Selon leur site:
Adobe Edge est un nouvel outil de conception de mouvements et d'interactions Web qui permet aux concepteurs d'ajouter du contenu animé aux sites Web, à l'aide de normes Web telles que HTML5, JavaScript et CSS3..
Fondamentalement, Edge vous permet d'ajouter du contenu animé sans avoir recours à des plug-ins externes tels que Flash ou Silverlight..
Dans ce cas, oui, nous le faisons!
Je le sens certainement. Avant de chercher vos fourches, laissez-moi vous expliquer!
Les développeurs Flash ont accès à des outils de conception très matures et très sophistiqués. Voulez-vous créer une animation simple? Quelques clics ici, quelques entrées là-bas et vous avez terminé! Ils apprécient vraiment l'utilisation d'un environnement complet pour la création de contenu..
Que se passe-t-il lorsque vous voulez suivre les normes?
Ce n'est pas si facile, je peux vous en dire autant. Vous devez fouiller dans le code, apprendre un peu de JavaScript, vous ennuyer, apprendre à utiliser une bibliothèque telle que jQuery, être excité à nouveau, puis découvrir que vous devez encore coder à la main chaque animation..
Bien que ce soit acceptable pour nous, types de développeurs, c'est beaucoup plus une corvée pour les concepteurs artistiques. Le développement basé sur des standards ne doit pas vraiment être dur! Je me rends compte que des développeurs entreprenants ont mis au point des solutions pour ces problèmes, mais qu’aucun n’est apparu gros contenu.
Edge cherche à rationaliser ce processus en réutilisant les concepts courants de la création de supports, tels que les calendriers et les étapes, pour rendre la courbe d’apprentissage plus douce, plus facile et donc plus accessible..
L’aperçu est un téléchargement svelte de 65 Mo et s’installe assez rapidement. L'accès au téléchargement nécessite cependant un compte Adobe. C'est gratuit, bien sûr, mais ajoute une étape inutile au processus. 1999 appelé, ils veulent leur inscription frivole.
Et oh, si vous ne savez toujours pas où télécharger votre copie, vous pouvez l'obtenir ici.
Les premières impressions de l'aperçu sont plutôt positives. Il a l'air propre, composé et épuré. Si vous avez déjà utilisé GoLive, voire Flash, l'interface doit être plutôt familière..
le étape ou Toile agit comme le premier DIV et lorsque vous ajoutez des éléments à votre toile, ils sont ajoutés hiérarchiquement avec le type d'élément affiché sur le côté.
Le volet de la timeline est l’une des parties clés de toute suite d’animation et Edge ne déçoit pas. Toute la partie inférieure de l'interface est dominée par le volet de la timeline.
Vous pouvez afficher toutes les propriétés des éléments que vous avez ajoutés jusqu'à présent au canevas de la timeline. Créer une animation est aussi simple que d’ajouter une image clé, en lui fournissant les informations pour l’image et Edge remplira le reste - fonctionne parfaitement comme prévu, de manière excellente.
Cet aperçu est évidemment en mode alpha - le premier aperçu consiste à ajouter des formes et des animations simples. C'est à peu près tout ce qu'il y a dans l'interface aussi.
Les utilisateurs peuvent ajouter du texte, des images et des formes simples avec une relative facilité - il vous suffit de pointer, cliquer et faire glisser. Vous pouvez également personnaliser diverses caractéristiques du contenu, notamment la couleur, l'inclinaison, l'opacité, la rotation et bien plus encore. Jetez un coup d'œil à l'image ci-dessous pour avoir une idée de ce dont je parle. Si vous avez déjà été initié au logiciel d'animation par le passé, vous devriez vous sentir comme chez vous..
Vous pouvez également importer des ressources prédéfinies, y compris des images, dans votre canevas actuel..
Comme ce n’est pas vraiment un tutoriel sur l’utilisation d’Edge, je vais sauter et télécharger une démo premade que vous pouvez obtenir à partir de maintenant..
Jetons un coup d'œil à la structure de répertoires d'un exemple de projet Edge:
Pas de surprises ici. Vos animations sont maintenant créées à partir de votre trifecta bien connu de technologies Web: HTML, CSS et JavaScript..
Contrairement aux idées reçues, Edge utilise un mélange de jQuery et CSS3 pour animer le contenu de son canevas. Oui, vous avez bien entendu - jQuery fait beaucoup de travail difficile derrière Edge.
En fouillant dans le code avec Firebug, vous remarquerez que de nombreux éléments DIV sont déplacés avec jQuery. Par exemple, voici le code en cours d’injection dans l’exemple que j’ai lié ci-dessus. Pas tout à fait jolie.
En gros, toute animation que CSS3 peut faire est laissée à elle puisque tous les effets CSS3 sont accélérés matériellement, et fonctionneront donc bien. Le reste est laissé à jQuery..
En fouillant plus loin dans le code, vous verrez que tous vos éléments, leurs propriétés, les informations d’interpolation et le reste sont stockés dans un fichier JSON. Je suppose que le moteur analyse en gros cette information, construit le DOM et attache les gestionnaires.
Pour une expérience rapide, regardons ce que voit le navigateur:
Euh, oh. Il n'y a littéralement rien qui ait un sens sémantique là-dedans. Désactivez JavaScript et vous vous retrouvez avec une grosse goutte de néant. Amateurs de dégradations gracieuses, prenez vos fourches.
Il est commercialisé comme un outil HTML5 et bien? ce n'est pas HTML5. Encore.
Je suis allé m'attendre à être ébloui par la splendeur de la toile ou du format SVG. Après avoir jeté un coup d’œil au DOM, il est évident qu’il n’ya même pas une petite part d’eux là-dedans. Juste pour être sûr, j’ai fait une recherche rapide dans les fichiers JavaScript à la recherche du mot clé relatif au canevas, getContext . Inutile de dire que rien n’a été trouvé. Le plus gros blob de HTML5 ici est le doctype. Bien sûr, vous pouvez importer du contenu SVG mais vous ne pouvez pas toucher au balisage, c'est donc un point de moo.
Il est un peu étonnant que Edge n’utilise pas les technologies modernes à la place. Si quelque chose, il est commercialisé comme un outil HTML5 et bien? ce n'est pas HTML5. Un marketing malhonnête ou des signes de fonctionnalités à venir? Je me penche vers ce dernier tout en espérant vraiment que le premier n'est pas vrai.
Nan.
Du point de vue du développement, animer des DIV équivaut à utiliser des tableaux pour la mise en page - cela fonctionne, mais au détriment de l’élégance et de la sémantique. Canvas et SVG sont conçus avec précision pour faire exactement ce que fait Edge ici et donner plus de sens à long terme..
Même si les performances de canevas sont médiocres sur les appareils mobiles actuels, il n’ya aucun moyen de les améliorer, mais elles ne devraient pas entraver l’adoption de nouvelles technologies..
Alors que l’on aimerait idéalement que les applications de pointe utilisent réellement des technologies de pointe similaires, gardez à l’esprit que cela reste un aperçu, une version alpha précoce..
Dans les mots d'un des ingénieurs derrière Edge concernant l'animation basée sur DIV:
Nous avons commencé avec les DIV parce que nous voulions créer rapidement quelque chose avec lequel les gens pouvaient jouer. Je dis que nous avons «commencé» ici parce qu'Edge va évoluer rapidement - le produit n'est en aucun cas complet.
C'est un peu encourageant! Bien que je sois déçu de leur approche initiale, je vois quelle approche adopter, mais il est bon de savoir que c’est simplement la façon dont ils lancent les choses, pas la façon dont ils prévoient de faire les choses.
Les pensées ci-dessus peuvent paraître négatives, mais ce n'est pas mon intention. Le reste de la communauté et moi-même avons de grands espoirs pour cet outil et donc de très grandes attentes.
Et Adobe, de leur côté, ne flâne pas. Ils travaillent déjà sur les commentaires fournis par la communauté jusqu'à présent et ont une feuille de route en place pour les versions futures..
Adobe adoptant des normes ouvertes et se concentrant sur la production d'outils créatifs plutôt que sur des plates-formes d'applications intégrées, je ne peux m'empêcher de penser qu'ils sont sur le point de devenir aussi pertinents pour les progrès du Web qu'auparavant. hauteur de flash.
Dites-nous ce que vous pensez de la prévisualisation Edge dans les commentaires et merci beaucoup de votre lecture!
Accentsconagua