bbxdesign

CSS + WordPress + Web Design

Flash
bd couleur css firefox Flash google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop vidéo w3c wordpress

Acrobat.com : le Google Docs d’Adobe

acrobat.com

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.

1 commentaire »

Introduction au HTML 5

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

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

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…

21 commentaires »

New York vu du ciel à 360°

Je suis grand fan de ce genre de photos : des plans panoramiques à 360° de New York.

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.

new-york-aerien-01

new-york-aerien-02

new-york-aerien-03

new-york-aerien-04

new-york-aerien-05

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

Commenter »

Flash + Créativité = Awesome

flash-site-awesome

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

Commenter »

Axa rate sa refonte de site

Je viens de découvrir sur 2803 que Axa avait fait une refonte de son site. Ce qui m’a le plus surpris dans le post de 2803, c’est que ce soit un post sponsorisé (traduisez par “post subjectif et honteusement élogieux”). Parce que la nouvelle version du site d’Axa ne manque pas de lacunes.

axa-menu

Un carrousel bien lourd

Malgré le fait que Flash gère le streaming, l’internaute doit attendre d’avoir bien chargé les 7 livres virtuels pour voir s’afficher quelque chose (presque 10 secondes d’attente). Même si l’effet “carrousel” est sympathique à voir, il est très loin d’être pratique. Et si les pages derrière ne suivent pas en terme de design et d’ergonomie, je ne vois pas l’intérêt d’inciter l’internaute à cliquer si ce n’est pour le perdre à la page suivante.

Pourquoi un menu en Flash ?

L’élément qui m’a surpris en premier est le menu de gauche, en Flash. Pourquoi en Flash? Pour le pivoter bizarrement et le rendre presque illisible (lisez-vous “Entrer vos mots clés” qui d’ailleurs devrait être “Entrez vos mots clés”)? Le fait qu’il soit pivoté suggère qu’il n’est pas intéractif, alors qu’il l’est.

Et le champ de recherche prédictif qui fait partie de ce que l’on peut considérer comme “l’état de l’art de ce qui peut se faire en terme d’interfaces riches” (si je reprend les mots du post de 2803) aurait facilement être réalisé en JS, et il en aurait été bien plus lisible.

Disposition bancale des éléments de navigation

Axa est à la fois banque et assurance. On peut accéder à l’un ou à l’autre en cliquant sur l’un des liens placés au-dessus du carrousel. Au lieu de dire “placés” je devrais dire “flottants” parce qu’ils semblent avoir été déposés là malencontreusement. Il faut d’ailleurs attendre que le carrousel ait été chargé en entier pour enfin voir ces liens qui a priori sont primordiaux. Et ne cliquez pas sur “Banque” car vous vous retrouverez sur un autre site (sans que cela soit indiqué…).

Et le reste…

Les pages intérieures du site mériteraient que l’on s’y penche très longuement. Les erreurs d’ergonomie sont multiples : checkboxes utilisées à mauvais escient, mauvaise présentation de l’information, incohérence du contenu…

Ce qui me choque le plus est qu’un bon blog comme 2803 ai décidé de jouer au jeu du post sponsorisé, qui n’est rien d’autre qu’une fenêtre de communication privilégiée, où la charte habituelle du blog s’efface devant les intérêts de l’entreprise commanditaire. Je continuerai bien sûr de lire 2803 qui regorge de très bons articles, mais j’espère vraiment ne plus voir ce genre de post.

PS: ne désactivez surtout pas JS pour aller sur le site d’Axa… Vous verrez ceci :

axa-sans-js

4 commentaires »

Je cherche un développeur/flasheur AS3

C’est la première fois que je poste sur mon blog un billet lié à mon travail. En effet, ce n’est pas moi qui cherche un flasheur à vrai dire, c’est ma boite : VirtuOz. Ils ne m’ont pas demandé de poster ici, c’est juste que le flasheur qui devait venir nous a laissé tomber au dernier moment pour d’obscures raisons, et que par conséquent, le planning prévu d’ici la fin de l’année risque d’être difficile à respecter. En attendant, ça m’arrive d’avoir à faire de l’AS 2, ce qui n’est pas véritablement ma tasse de thé. Voici l’annonce :

VirtuOz

Le coeur de métier de VirtuOz est la création d’agents virtuels intelligents, capables d’engager une conversation naturelle avec un humain.
Nous comptons à ce jour plus de 35 agents virtuels, dont Lia qui assure le support sur voyages-sncf.com, Louise sur Ebay.fr, Clara sur Fnac.com
Nous développons également Skaaz.fr, notre produit grand public, qui est une communauté d’avatars intelligents réunissant à ce jour plus de 500.000 membres.

Dans le cadre de notre croissance, nous recherchons un développeur Flash 9 / AS3.

Nous recherchons un développeur AS3

Description des missions

  • développement des interfaces de dialogue pour les agents intelligents de nos clients
  • développement de fonctionnalités sur Skaaz.fr
  • missions sur des projets d’innovation

Profil recherché

  • maîtrise de la programmation sous Flash 9.0 en AS3
  • très bonnes connaissances en OOP
  • connaissances en ASUnit seraient un plus
  • bonne compréhension de la programmation flash destinée à un usage en ligne
  • sensibilité au design et à l’ergonomie

Nous proposons

  • une intégration à une équipe très compétente et motivée
  • une ambiance de travail “créative”
  • des missions et des produits passionnant, mêlant intelligence artificielle et innovation

Informations complémentaires

Contrat : CDI (CDD possible)
Date de début : ASAP

Contact :
Brice Ruggeri
bruggeri@virtuoz.com
01 78 09 77 23

VirtuOz
http://www.virtuoz.com
47, rue de la Chaussée d’Antin
75009 PARIS

Si vous avez d’autres questions, n’hésitez pas à me contacter.

1 commentaire »