Adobe joue la carte HTML5 avec les outils Edge

voir la source

 

Adobe a décidé de donner un coup d’accélérateur vers le monde du web dans sa gamme d’outils, avec Edge Tools & Services. C’est un grand pas effectué en faveur de HTML5, des designers, développeurs et intégrateurs, qui ne disposaient jusqu’à présent que de peu de programmes avant-gardistes dans la Creative Suite pour exploiter les nouveaux modes de conception de sites et d’applications web. Par ailleurs, la plupart de ces services sont fournis à titre gratuit, par exemple Edge Animate qui sera mis à disposition via Creative Cloud dans un premier temps puis deviendra payant à part entière, ou intégré à la suite pour ceux qui disposent d’un abonnement.

On voit là l’intention de revenir dans la course après avoir essuyé des revers avec Flash, qui a décidément de plus en plus de mal à convaincre. L’acquisition de Tyepkit et PhoneGap étoffent les outils « maison ». Voici la collection :

Edge Animate

Pour créer des animations à l’aide de HTML/CSS/JavaScript, à l’aide d’une ligne de temps (timeline) ressemblant de très près à l’IDE Flash, symboles y compris. L’ensemble produit est destiné à s’afficher sur les navigateurs récents (mobiles sous iOS et Android, Firefox, Chrome, Safari, Internet Explorer 9) avec une alternative pour les plus anciens. Le mode d’aperçu lui-même est basé sur un moteur WebKit. Le code généré est stocké dans un fichier à part pour préserver l’intégrité de la page HTML initiale.

Adobe Edge Animate

Edge Reflow

Destiné à créer des mises en page qui s’adaptent aux contraintes de l’écran, Edge Reflow est la pierre angulaire de cette suite d’outils pour le Responsive Web Design. Il est possible de jouer dynamiquement avec les dimensions du document pour créer des points de rupture et définir de quelle façon le contenu doit se ré-arranger en fonction de la largeur autorisée. Il s’agit bien là d’exploiter la puissance des Media Queries CSS3. Voir la vidéo de présentation.

Adobe Edge Reflow

Edge Code

Initialiement basé sur le projet Brackets, Edge Code est voué à devenir un éditeur de code source puissant et personnalisable, étant lui-même construit sur HTML/CSS et JavaScript. Il voit l’intégration des autres services proposés par Adobe, notamment Web Fonts et PhoneGap Build, sans compter l’aperçu rapide des modifications CSS, la vue projet et la coloration syntaxique. Si vous pensiez que l’éditeur de Dreamweaver mériterait d’être allégé, voilà qui comble un besoin exprimé par beaucoup de développeurs auprès de l’éditeur.

Adobe Edge Code

Edge Inspect

Avec Edge Inspect, il est possible de tester le rendu graphique sur de multiples plate-formes avec une synchronisation des aperçus, mais aussi des outils pour inspecter le code ou les propriétés du document, les changer à la volée – même sur mobile – et constater en direct la conséquence des modifications. En bonus, des captures d’écran vers le disque local, rendues plus faciles par une intégration de cet outil sur tous les périphériques.

Adobe Edge Inspect

Les autres…

Venant compléter ces nouveautés, Edge Web Fonts a déjà été publié en tant qu’outil, pour intégrer des polices web (gratuitement) à l’instar de Google Web Fonts ; tandis que PhoneGap Build est axé vers les mobiles pour packager des applications HTML5 et les déployer vers les plate-formes les plus répandues actuellement : Android, iOS, Windows Phone, BlackBerry, webOS, Symbian.

À tester

Inspect, Reflow et Animate sont bien entendu les plus intéressants car ils répondent à des besoins désormais courants pour lesquels le paysage de logiciels disponibles est restreint. Beaucoup de fonctionnalités HTML5 et CSS3 sont encore développées « à la main », faute d’environnements intégrés produisant un code propre.

Cet ensemble est bien prometteur. Il vous faudra bien entendu de bonnes connaissances avant de pouvoir exploiter les fonctionnalités avec efficacité et connaître exactement ce que ces outils vont générer pour vous. Adobe souhaite attirer un maximum de créateurs de tous bords et les fidéliser dans son Creative Cloud. Si la famille Edge parvient à tenir ses promesses et à évoluer dans le temps pour suivre les innovations de près, tout en restant universelle, il y a de fortes chances que l’éditeur de logiciels tire son épingle du jeu face à tous les autres programmes qui existent déjà sur le web, libres ou payants.

Publicités

Microsoft Surface versus iPad 4 : comparaison au niveau du HTML5 par l’équipe Sencha

aller sur le site
Le 20/11/2012, par vermine, Responsable JavaScript & AJAX

Sencha fournit des outils de développement pour bureau et mobile. Son équipe a mis l’iPad 4 et la tablette Surface de Microsoft à l’épreuve pour voir comment ils se débrouillent en tant que plates-formes HTML5. Le HTML5 est la prochaine génération de technologies Web qui est adoptée de plus en plus pour développer des applications qui peuvent être rédigées en une seule fois et exécutées sur plusieurs systèmes d’exploitation, les navigateurs et les périphériques.

Les tests révèlent que les deux tablettes sont performantes à ce niveau-là. Microsoft Surface est livrée avec Internet Explorer 10 et Windows 8 tandis que l’iPad est livré avec Safari Mobile et iOS 6. Internet Explorer 10 a un ensemble de fonctionnalités HTML5 large et bien implémenté. Il répond et dépasse parfois Safari Mobile. Sur le plan de la performance, l’iPad 4 connait des performances JavaScript, d’interaction et de Canvas. De son côté, Surface a une implémentation graphique vectorielle (SVG) plus rapide.

Les vérifications de présence des fonctionnalités HTML5 ont été effectuées à l’aide de Modernizr, une bibliothèque JavaScript qui détecte les fonctionnalités HTML5 et CSS3. IE10 sur Surface a une longue liste de fonctionnalités HTML5 (indexedDB, animations CSS, transformations 2D et 3D, transitions, websockets, lecture audio et vidéo, etc.). Il a même une implémentation des régions et exclusions CSS.

Il y a cependant quelques omissions notables et des lacunes par rapport à l’iPad 4. Il n’y a pas de support pour la balise d’entrée de l’appareil photo, l’implémetation de Flexbox est plus ancienne et obsolète. Il n’y a également pas de prise en charge de border-image.

Aucune des deux plate-formes ne prend en charge le WebGL et Microsoft a déjà annoncé qu’ils ne le soutiendront pas. Les fonctionnalités les plus ésotériques ne sont pas gérées (par exemple la couleur des input). Il en est de même pour la gestion des notifications et des événements du serveur.

Ce graphique reprend les performances JavaScript

Les premières plates-formes mobiles avaient des problèmes avec les performances CSS. Mais ici, l’équipe a vu de bonnes performances CSS avec des effets de transition et d’animation. Citons le lissage des coins, les dégradés et la lecture vidéo.

Pour finir, les tests ont portés sur l’interaction avec le DOM. L’iPad 4 écrase purement et simplement Surface. Webkit a un avantage de vitesse sur le moteur d’Internet Explorer dans la manipulation du DOM. Voici un tableau récapitulatif. Les résultats les plus hauts sont les meilleurs.

Code :
1
2
3
4
5
6
7
8
                      iPad 4    Surface   iPad Advantage
------------------------------------------------------
DOM Attributes    |   161.84     37.5       4.3 x
DOM Modification  |   136.50     13.9       9.8 x
DOM Query         |  4560.00    356.6      12.8 x
DOM Traversal     |   138.30      4.9      28.2 x
CSS Selector (Avg)|  1654.70    458.7       3.5 x

JS weekly

=> Node 0.8 Released: Harder, Better, Faster, Stronger
The new stable release branch of the popular Node.js server-side JavaScript environment is here! 0.8 brings significant performance improvements, core API cleanups, and new debugging features.

=> jQuery 2.0 (Coming in 2013) To Drop Support for IE 6, 7 and 8
The jQuery Core Team share some thoughts on ‘the road ahead’ for jQuery. Both jQuery 1.9 and 2.0 will be out in early 2013 with jQuery 2.0 dropping support for IE 6, 7 and 8’s ‘oddities.’

=> Get 10 Responsive Web Templates Now
Responsive themes are perfect for creating gorgeous looking sites that look amazing on any screen size. These HTML themes from FlashMint include responsive sliders, CSS3 effects, sortable portfolio, photo lightbox, PSD files and much more. Easy to customize and diverse including themes for sports, corporate, hair salons, interior design, spa salon and more. See the themes.

=> 10 Things You Didn’t Know JavaScript Could Do
If you’re an eagle-eyed JavaScript Weekly and HTML5 Weekly reader, this roundup by .net Magazine may not surprise you, but otherwise it provides a quick flick through 10 interesting modern uses for JavaScript.

=> Sup, AngularJS? (An Interactive Presentation with Live Code Examples)
An interactive slide-based presentation by Glen Maddern that shows off some live AngularJS (an MVC framework released by Google recently) examples that you can edit on the fly. An interesting way to see how the library works.

=> jQuery Vector Maps: Resizable Scalable Vector Maps for Modern Browsers
A jQuery plugin that renders vector-based maps. Uses resizable SVG for modern browsers like Firefox, Safari, Chrome, Opera and IE 9+ with legacy support for IE provided through VML.

Repo.js: jQuery Plugin to Embed a GitHub Repo onto a Page

=> BananaBread 0.2 Released: Levels!
Alon Zakai (creator of Emscripten) has been working on a JavaScript port of Sauerbraten, a first person shooter, called BananaBread for a while now and it continues to impress. Now, finally, it is starting to get some good levels too!

TextDrive: A Text Editor for ChromeOS, Built with AngularJS

NVD3: Reusable Charts and Chart Components for d3.js

=> F**kItJS: Runs Your JavaScript Code At Any Price
Billing itself as the ‘original JavaScript error steamroller’, F**kItJS is a tongue in cheek project that can repeatedly eval your error-ridden code, detect errors and slice those lines out of the script before carrying on.

=> Walrus: A Mustache-Influenced JS Templating Library
Templating library inspired by mustache, handlebars, and ejs but with some key differences including blocks encased within ‘do’ and ‘end’, reusable view helpers, and support for ‘presentation logic.’

=> SeuratJS: A RaphaelJS Plugin for Creating Pointillized Animations
A library that allows for the creation of vivid animations and pixelated artwork by extacting color data from images and rebuilding them with SVG primitives.

=> Gamecore.js: Increase Javascript Game Performance ‘by 1200%’
Beyond the bombastic title is an interesting library that can help you build high performance games using JavaScript by providing object pooling, a high performance double linked list, and more.

Sencha Try: A Treasure Trove of Ext JS and Sencha Touch Code Snippets