Perso, je suis nul en dessin, mais Pulupulu sait y faire.

Il existe même une fan page Facebook avec pleins d’autres jolis dessins.

Acrobat.com sort de sa beta et devient public. Il consiste en plusieurs services :

• Adobe Buzzword : un excellent éditeur de document en Flex. L’édition, le formatage, l’ajout de commentaires sont très bien réalisés.
• Création de PDF : à partir d’un fichier .rtf par exemple
• Partage de fichiers : une interface pour uploader des fichiers et envoyer une notification par mail à ses contacts
• Adobe ConnectNow : visio-conférence, partage d’écrans, chat…
• My Files : pour accéder à ses fichiers de n’importe où

A part Buzzword, j’avais jamais entendu parler de ce service. J’ai pas l’impression qu’il y aie eu de grosse annonce. En tout cas, Adobe marche sur les plate-bandes de Google Docs : des outils de collaboration en ligne, gestion/création de documents, partage de fichiers…

C’est en fait la concurrence Flash vs HTML/Ajax (et bientôt HTML 5).

Personnellement, je ne compte pas m’inscrire pour utiliser ce nouveau service. Il n’a pas l’air très rôdé. Et puis Google Docs me convient très bien pour ce dont j’ai besoin. Et y a le côté Google, toujours innovant, très fiable et intégrant parfaitement ses différents services (Mail,Reader,Calendar…) qui me rend fidèle.

Le HTML 5 est la prochaine version importante du HTML. Bien qu’étant en compétition avec le XHTML 2, le HTML 5 fait davantage parler de lui parce qu’étant plus facilement implémentable et plus pragmatique dans l’utilisation des nouvelles balises qu’il introduit.

Quoi de neuf chez les balises ?

J’avais déjà parlé du HTML 5 l’an dernier, en parlant notamment des balises visant à structurer le contenu. Mais l’intérêt du HTML 5 se trouve surtout dans ces balises qui vont grandement faciliter la création d’applications web.

• <canvas>
  Une balise dans laquelle on peut dessiner avec du JS. A priori on peut faire beaucoup plus avec.
  Exemples : dessiner, labyrinthe ou encore mieux : Bespin par Mozilla, un éditeur de code utilisant canvas et JS
• <video>
  La vidéo est aujourd’hui implémentée sur le web grâce à différents plugins (Silverlight, Quicktime, WMP et surtout Flash). Pourquoi ne pas utiliser une simple balise <video> ?
  Exemples : YouTube et Dailymotion font déjà des tests avec cette balise <video>, et Mozilla en parle.
• Geolocation
  La géolocalisation grâce à l’API de l’HTML 5.
  Exemple : Where Am I géolocalise en utilisant Google Maps (il faut Firefox Beta).
• App Cache
  Ca permet de sauvegarder des informations en local, pour travailler offline notamment.
  Exemple : des Post-It accessibles offline (il faut Safari Beta).
• Workers
  Un outil qui permet de mieux gérer la surcharge de JavaScript. En gros, plus de problème de ralentissement à cause d’un JS trop gourmand.
  Exemple : 2 scripts qui calculent le plus grand nombre premier. Le premier fait crasher le navigateur (j’ai testé…), alors que l’autre y arrive très bien.

Tous les exemples proviennent de la Google Keynote.

Qui s’y intéresse ?

Google

Google, le plus grand acteur chez les applications web, mise gros sur le HTML 5. Au départ, Google ne croyait pas que les applications web pouvaient rivaliser avec les applications de bureau. Mais avec le grand succès de Google Maps, leur état d’esprit a changé. Comme le dit le VP of Engineering Vic Gundotra :

We knew then that the web had won. What was once thought impossible is now commonplace.

La sortie de Google Chrome est un signe important. Le principal atout de ce navigateur est sa rapidité, grâce à son moteur JS très performant. Et en voyant les applications web utiliser massivement du JS, ce n’est pas un hasard.

Il y a aussi la sortie récente des Google Web Elements qui introduit l’idée de widgets exportables où l’on veut. Avec le HTML 5, ceci risque d’être encore plus simple.

La version Chrome d’Android supportera aussi le HTML 5.

Et puis, YouTube y porte aussi un certain intérêt.

Mozilla

Mozilla est le plus actif pour implémenter les nouveautés HTML 5 dans Firefox, suivi de près par Safari et Opera, si l’on considère cette liste d’implémentation du HTML 5 dans chaque navigateur.

La vidéo en HTML 5 par Dailymotion ne fonctionne que sous Firefox Beta. On peut ajouter un skin autour, mettre la vidéo en flou, ajouter un “edge effect” par dessus… Ca rame sur mon netbook mais c’est sympa.

Avec le sortie de JetPack, on peut imaginer un bel avenir pour le combo JS + HTML 5.

Palm

Michael Abbot, le Senior Vice President de Palm, en charge des applications et des services, mise aussi sur le HTML 5 sur le WebOS de Palm :

You as a developer don’t need to leave your prior knowledge at the door to develop for the phone.

Pour faire des applis iPhone, il faut s’y connaître en Objective-C. Pour faire des applis Palm, il faudra s’y connaître en HTML 5 et JS. Je ne sais pas à quel point ça pourra rivaliser en termes de qualité d’applications, mais je veux bien voir.

Apple

Je viens de voir sur la Worldwide Developers Conference 2009 que Safari Mobile supportait le HTML 5. C’est pas un détail anodin. Après le succès des app iPhone, celui des app web mobiles sur iPhone ?

Les développeurs web ?

Je ne suis pas développeur web mais j’imagine que je pourrais m’y intéresser si les possibilités sont importantes tout en gardant des technologies simples d’accès et performantes. Un avis de développeur JS sur la question ?

Comment implémenter du HTML 5 aujourd’hui

Ok, c’est bien beau toutes ces nouvelles balises, mais je fais comment pour l’utiliser aujourd’hui ?

Applications Web : oui mais…
Pour les balises axées “applications web” (canvas, geolocation, video, appcache…), quelques navigateurs en version beta offrent la possiblité d’utiliser ces nouvelles balises. Avec du JS, c’est déjà possible d’en tirer profit.

Structure : OK
En ce qui concerne les balises de “structure” (header, section, article…), il est d’ores et déjà possible de les utiliser. En fait, si les navigateurs ne comprennent pas forcément ces balises “inconnues” mais ne renvoient pas d’erreur. C’est juste que ces balises ne sont pas stylées et qu’elles sont considérées comme “inline”. Un display:block fait l’affaire.
Pour IE6, il faut rajouter un script pour que le style s’applique à ces nouvelles balises.

1. <script>
2. document.createElement(‘header’);
3. document.createElement(‘footer’);
4. document.createElement(‘section’);
5. document.createElement(‘aside’);
6. document.createElement(‘nav’);
7. document.createElement(‘article’);
8. </script>

La concurrence : Flash, XHTML 2 et… Windows ?

Je pense que le HTML 5 va surtout concurrencer les plugins de navigateur, et notamment Flash/Silverlight. En fait, l’intérêt de ces deux derniers est avant tout de palier à un manque, surtout au niveau de la gestion du multimédia dans le web (la vidéo en premier). Le HTML 5 peut sans doute gérer ça de manière plus légère, plus sémantique et plus accessible. C’est plutôt le combo HTML 5 + JS qui sera intéressant.

En parallèle du développement du HTML 5, il y aussi celui du XHTML 2. Actuellement, je mets toutes mes Doctype en XHTML 1.0 Strict, parce que j’ai peu de problème de compatibilité avec (Quirks Mode sous IE6 notamment). Après, j’ai pas trop suivi l’avancée du XHTML 2. Peut-être qu’on arrivera à “merger” les deux à un moment donné ?

Enfin, est-ce que le HTML 5 peut rivaliser avec Windows (et plus généralement les OS) ? Haha, ça a l’air très marrant comme supposition, mais certains y croient vraiment. Depuis des années, Google se positionne sur ça : faire du web l’outil de travail principal.
Google Docs + Chrome + Calendar + Notebook + Picasa + Mail + Talk = Web Desktop ?
Le problème des applis web par rapport aux applis de bureau sont principalement :

1. la rapidité d’exécution
2. les fonctionnalités
3. la nécessité d’être connecté pour travailler

Le HTML 5 va aider à résoudre le 3ème point, avec la possiblité de sauvegarder des informations en local (voir AppCache plus haut).
Pour le 2nd point, j’utilise rarement les fonctionnalités avancées de Word, et sur ce point, Google Docs me sufflit largement.
Pour le 1er point, un outil aussi basique qu’un tableur ou qu’un traitement de texte nécessite relativement peu de ressources.

Etant très souvent connecté, j’utilise uniquement Google Docs et plus du tout Microsoft Word/Excel. Avec le HTML 5, j’aurais sans doute même plus besoin d’être connecté.

J’imagine un OS qui sera uniquement un navigateur web. Peut-être pour la Crunchpad ?

Conclusion

Le HTML 5 est résolument axé “application web”. Couplé avec du JS, les résultats sont très intéressants. Ca me fait penser à du Jetpack pour un site (et non pas un navigateur). Il est surtout intéressant pour les développeurs du web de s’y pencher plutôt qu’un web designer comme moi. Parce qu’au final, les balises de structure (header, section…), ça facilite légèrement l’intégration et ça ajoute de la sémantique mais c’est pas révolutionnaire, alors que la video/audio, la géo localisation, le appcache… ont énormément de potentiel.

Le problème actuel est qu’il faut encore attendre 2010 avant de profiter vraiment du HTML 5. Mais en réalité, les développeurs n’attendent pas. Comme le dit Dave Clark :

The technology is here even if the standards committees haven’t caught up

We reject: kings, presidents, and voting. We believe in: rough consensus and running code.

Le mot d’ordre serait donc d’être pragmatique. Ne pas attendre les standards mais s’amuser à utiliser ce qu’on peut déjà utiliser pour avoir de l’avance et faire avancer la standardisation justement.

Le plus gros acteur du web, Google, s’y intéresse. Il y a donc forcément du potentiel dans le HTML 5…

C’est intéractif, c’est fluide, et la qualité visuelle est au rendez-vous. Ca rappelle le Quicktime Virtual Reality mais en 20 fois mieux. Je me demande vraiment quel dispositif est utilisé pour prendre de telles photos.

Faites clic droit > Planet View. Vous verrez, c’est surprenant.

Allez visiter ce site. Il n’y a rien à expliquer.

Je suis tombé sur le site Flash d’une agence allemande : WM Team.

Ils sont spécialisés dans le design et l’animation Flash, et créent non seulement des bannières et des sites, mais aussi des jeux très sympas. Leur site est un parfait exemple de leur créativité et leur humour. L’introduction sonore et visuelle est tout d’abord très sympa. Puis vous verrez aussi les transitions entre les différentes catégories qui sont autant d’animations originales et réussies. Par exemple, une énorme main gonflable qui viendra “attraper” le menu, ou bien un jeu de tir où il faut viser la tête d’un membre de l’équipe pour voir son profil.

L’intérêt de telles animations est surtout d’inciter le visiteur à parcourir l’ensemble du site. Pas forcément pour le contenu, mais pour découvrir toutes les animations variées qui existent. Et au final, on se retrouve quand même à s’intéresser au contenu. On en oublie même la typographie assez peu réussie du site, et on s’amuse à visiter les réalisations de cette agence bien sympa (qui cherche un webdesigner… oooh…).

• la pire erreur Photoshop
• un superbe menu 3D en Flash
• une campagne de pub géniale
• des photos prises avec l’angle parfait
• le pire prof de webdesign
• un clin d’oeil dans Assassin’s Creed

Photoshopped à moitié

Dans le catalogue de Victoria’s secret, les photos sont bien sûr retouchées. Encore faut-il le faire en entier. Pour preuve cette photo de Marisa Miller assez troublante (la photo, pas la fille). Cherchez l’erreur:

Via Giggle Sugar

Menu 3D en Flash

Vous avez sûrement déjà vu pleins de menus 3D en Flash, tous plus ou moins réussis. En voici un qui est non seulement joli mais qui n’oublie pas l’essentiel, à savoir qu’un menu sert tout d’abord à naviguer. Ici, la navigation est simple et intuitive, et le rendu est vachement sympa. Et si vous parcourez un peu le site, vous trouverez des trucs plutôt barrés.

Le voici : http://www.screenvader.com/root.html

Campagne éclatante

Comment faire vendre de la peinture ? C’est banal, pas très attrayant. Alors faut en mettre plein les yeux et en mettre partout. Une idée sympa qui prend en compte le contexte.

Via BoredStop

Photos prises avec l’angle parfait

En photo, l’angle, c’est important. La preuve avec cette série d’images. La plupart sont scénarisées mais ça reste tout de même drôle et inventif.

Le pire prof de webdesign

Apprendre le webdesign, c’est pas forcément facile, surtout quand on a un prof un peu trop vieux. En effet, le développement du web est bien rapide. Les notions et les méthodes évoluent constamment. Résultat : un prof peut vous apprendre des méthodes d’un autre âge. Mais en général, on arrive à dépasser ses connaissances pour devenir un bon webdesigner.

Mais que faire quand on tombe vraiment sur le pire prof de webdesign ? Son site (mis à jour en août 2007) parle de lui-même. Outre le layout par tableau (que l’on peut excuser), des incohérences, un design troublant, des erreurs d’utilisabilité. Par exemple, la moitié de son site se constitue en fait de fichiers à télécharger. Ou encore : cette image sur la page d’accueil qui est en fait une image de 1440×2160 pixels redimensionnée! Je passe sur les couleurs douteuses de certaines pages…

Optimus Prime dans Assassin’s Creed

Vous connaissez bien sûr Transformers, ce dessin animé des années 80, dont un film minable a été tiré. Et vous connaissez Assassin’s Creed. Ben les développeurs du jeu apprécient les Transformers, et plus particulièrement Optimus Prime. Je l’ai pas vu du 1er coup, parce que justement, c’est plus flagrant que je ne le croyais.Optimus Prime dans Assassin’s Creed

HEMA, une chaîne de supermarchés des Pays-Bas, lance son site web, où l’on peut trouver les mêmes produits qu’en magasin. Comment faire connaître son site de manière très originale ? En réalisant une superbe animation ! Notez le scroll auto très sympa.