Aller au contenu | Aller au menu | Aller à la recherche

Technologies Web

Articles, tutos, actualité sur les technologies du web

Fil des billets - Fil des commentaires

jeudi, mars 21 2013

Openweb a dix ans

Il y a tout juste dix ans, le premier site français entièrement dédié aux standards du web ouvrait ses portes : Openweb.eu.org. Il fut le résultat du travail de 11 passionnés du web : Tristan Nitot, Laurent Denis, Pascale Lambert-Charreteur, Florian Hatat, Fabrice Bonny, Emmanuel Clément, Mathieu Pillard, Denis Boudreau, Olivier Meunier, Samuel Latchman et moi même. Nous publions tous un peu de notre coté des articles sur les standards (je venais d'ouvrir mon blog deux mois auparavant), et un jour nous nous étions dis que cela serait bien de rassembler toutes ces ressources en un seul lieu.

La magie du web a permis cela, bien que nous soyons tous aux quatre coins de la France (et du canada !).

Je me rappelle encore de certains soirées à coder chez moi dans mon bureau, ou encore cette seule et unique réunion IRL pour discuter du projet, dans les locaux d'AOL où Tristan travaillait. J'y rencontrais donc pour la première fois celui qui allait devenir le président de Mozilla Europe. Je crois aussi que j'avais croisé très furtivement à la cantine d'AOL celui qui allait devenir mon patron 1 an et demi plus tard, Daniel, chez Disruptive Innovations. En effet, les locaux abritaient ce qui restait de Netscape France (Daniel, Tristan, Peter...), filiale de la société à l'origine du projet Mozilla.

Depuis la publication des premières pages d'Openweb.eu.org, de l'eau a coulé sous les ponts. Les personnes qui animent le site ont changé, mais le site est toujours là et est encadré par des gens tout aussi passionnés par le web. Et malgré des périodes d'inactivité il y a quelques années, des articles continuent à paraitre régulièrement. Avec cette "monoculture" webkit qui menace, les standards du web sont plus que d'actualité.

Pour ma part, j'ai tourné la page "openweb" depuis quelques années. Mais j'en suis toujours aussi fier et je continue à soutenir les standards du web. Ce projet fut pour moi le départ de beaucoup de choses, comme mon aventure dans le projet Mozilla, qui démarra avec l'ouverture de xulfr.org dont je fêterai aussi les 10 ans cette année.

Bon anniversaire Openweb !

jeudi, février 28 2013

Firefox OS le grand challenger

Le Mobile World Congress se termine aujourd'hui, et on peut dire que Mozilla a fait beaucoup parler de lui avec son nouveau système d'exploitation pour mobile, Firefox OS. Ça a démarré par une conférence de presse la veille de l'ouverture du salon. Mozilla annonçait alors que 18 opérateurs téléphoniques de par le monde, et 4 fabricants de mobiles (Alcatel, LG, ZTE et Huawei) allaient proposer à leurs clients, dans les mois à venir, des téléphones utilisant Firefox OS. Durant le salon, Sony a aussi déclaré se joindre à la partie, en publiant sur un blog comment installer Firefox OS sur un XPeria.

Bref, Mozilla, avec son stand impressionnant, n'est pas passé inaperçu. Et c'était le but.

Par contre, comme à l'accoutumé, à coté des gens approuvant à 100% le nouveau système de Mozilla, j'ai pu remarquer pas mal de scepticisme parmi les commentateurs en tout genre, la presse etc.

1) Face à Google (Android) et à Apple (IOS), Mozilla a peu de chance

Mozilla aurait peu de chance si la fondation attaquait de front ces deux mastodontes, c'est à dire sur le même marché, ciblant les mêmes clients. Ce n'est tout simplement pas le cas. Mozilla cible en priorité les marchés émergents : Amérique du sud, certains pays d'Asie, et probablement l'Afrique. Elle cible les pays où le taux d'équipement en smartphone est très bas, voir quasi inexistant. Ce sont des pays où un Iphone ou un Galaxy SII n'ont que peu de chance de s'y vendre, à cause des revenus plutôt bas dans ces régions du monde.

On pourrait dire donc que Mozilla vise la complémentarité. La fondation vise surtout à promouvoir le choix sur le mobile, comme elle l'a fait sur le desktop au temps où IE était utilisé par 95% des internautes. Elle avait Firefox Mobile sous Android. Elle a maintenant un système d'exploitation alternatif pour les mobiles, qu'elle propose aux intégrateurs, sans royalties.

2) Je suis déçu des spécifications des téléphones Firefox OS, ça ne me tente pas d'en acheter un

Si vous vous dites cela, c'est que vous n'êtes tout simplement pas la cible. Malgré les bonnes ventes des Iphone et autre Galaxy, n'allez pas croire que tout le monde a autant les moyens que vous pour en acheter un.

Certes, les téléphones annoncés avec Firefox OS ne sont pas très puissants (1GHz, mono-core ou dual-core maxi, 512Mo de RAM..). Mais rappelez-vous : Mozilla vise les marchés émergents. Donc nécessité de fournir des téléphones bas prix, donc peu puissants.

Il se pourrait même que ces téléphones intéressent des gens dans nos pays "riches". D'une part à cause de la crise, et d'autre part, je suis persuadé que beaucoup de gens n'ont pas besoin d'un quad-core dans leur poche. En les observant dans le train ou ailleurs, que font-ils la plupart du temps : téléphoner, envoyer des sms ou des mails, jouer à des petits jeux, lire leurs messages facebook ou twitter.

Très franchement, y-a-t-il vraiment besoin d'un dual-core, voir un quad-core pour faire ces tâches toutes simples ? Si le système est optimisé et peu gourmand, NON. Vous rappelez-vous des machines d'il y a 15 ans ? Elles étaient 10 fois moins puissantes, prenait 10 fois plus de place, mais on pouvait y faire le même genre de tâches sans aucun souci.

Même moi je trouve que mon téléphone, un Galaxy SII, est "overkill" pour l'usage que j'en fais.

3) C'est motorisé par Firefox ? encore un téléphone qui va laguer lol mdr ptdr webkit roxor

Vous savez quoi ? Vous devriez essayer un smartphone motorisé par Firefox OS. Là où un système Android devient vite pénible à utiliser sur les téléphones ciblés par Mozilla, FirefoxOS est plutôt véloce ! Moins de surcouches logiciels et un moteur (celui de Firefox), qui a connu d'énormes progrès en terme de performances et d'occupation mémoire : c'est la recette de Mozilla pour faire tourner correctement son système sur des petites configurations. D'ailleurs, ces améliorations faites pour Firefox OS, profitent également à la version Mobile et à la version Desktop de Firefox !

J'ai pu expérimenter un téléphone Firefox OS pendant une semaine au début de l'année [1] et j'ai été convaincu. Ok, c'est un avis tout à fait subjectif, surtout pour quelqu'un comme moi qui contribue à Mozilla depuis presque 10 ans, mais, même si j'étais plutôt excité par ce nouveau projet à l'automne 2011 quand j'ai vu les premières versions tourner "en vrai", j'avoue que j'étais un peu sceptique. Où allait Mozilla avec ce truc ?! Maintenant je le sais. J'ai pu expérimenter. Et je suis maintenant rassuré et conquis !

Le seul gros point faible que je trouve à mes yeux, c'est tout ce qui utilise la 3D (et donc WebGL) : c'est lent. Mais ce genre de chose est dû au processeur graphique faiblard de ces téléphones, plutôt qu'à Firefox OS.

4) Je trouve l'interface peu innovante

Et bien faites-en une ! Non, je ne plaisante pas. Non je n'ironise pas. Je suis très sérieux.

Il est vrai que l'interface, le "bureau" du système n'est pas très innovant par rapport à la concurrence. On y retrouve les mêmes manières d'interagir avec le téléphone qu'avec les autres smartphones, des applications plutôt normales et simples (quoique, l'application de recherche intégrée de Everything.me apporte une fonctionnalité originale). Mais il y a plusieurs raisons à cet état de fait :

  1. Entre les premières lignes de code du projet, et cette annonce au MWC, il s'est passé 1 an et demi environ. 1,5 an pour développer un système d'exploitation mobile complet. Le noyau, les applications, et toutes les API pour les développeurs d'applications. C'est peu de temps. Très peu. Mes amis développeurs qui bossent à plein temps sur le projet dans les bureaux parisiens de Mozilla peuvent vous en parler[2] ! Même si ils réutilisent des briques open-source (noyau linux, moteur Gecko de Firefox..). Les délais étant très courts, l'innovation dans l’interaction homme-machine a été remise à plus tard.
  2. Cela permet aussi aux futurs utilisateurs de se retrouver en terrain connu, ou d'apprendre à utiliser un smartphone "comme sur les autres". Rappelez-vous, la cible, ce n'est pas le "power-user" du mobile, ce n'est probablement pas vous, mais les personnes qui n'ont jamais eu de smartphones.
  3. FirefoxOS est un système maléable. Son originalité est que toutes les applications sont en HTML5/JS/CSS. Et "toutes" cela comprend vraiment tout : l'appli pour téléphoner, le "bureau", la barre d'état etc. Bref, toute l'interface. Comme l'a dit mon pote Paul Rouget, "le moindre pixel de l'écran est affiché par une application HTML".

Vous n'êtes pas content de l'interface ?

  • En tant que développeur, faites vous plaisir, contribuez au projet Gaia, l'interface de Firefox OS ! Contribuez aux développement des applications fournies en standard ! Le système de Mozilla est 100% Open Source !
  • En tant qu'entreprise innovante, lancez-vous ! Développez un remplaçant à Gaia ! Un nouveau marché s'ouvre à vous !
  • En tant que "power user", un peu de patience, et probablement vous aurez le loisir de remplacer les applications standards par d'autres alternatives :-)

Tenez, d'ailleurs, en quelques heures, un développeur a implémenté une nouvelle manière d'utiliser le clavier virtuel. Firefox OS n'est-il pas sympa ?

En d'autres termes, l'innovation dans Firefox OS ne se trouve pas dans l'interface, mais dans le système et dans sa philosophie. C'est 100% HTML5. Ça repose sur les standards du Web. N'importe quel développeur web peut créer une application HTML5, ou même porter une appli existante en quelques heures seulement, voire quelques minutes (si elle est déjà prévu pour s'afficher correctement sur mobile). Et il a en plus à sa disposition des dizaines d'API innovantes pour développer des fonctionnalités originales dans ses applications web !

5) Chez Mozilla ils ont encore confondu renard de feu et panda roux

Oui, bon. Le logo mis en avant pour Firefox OS, légèrement inspiré de celui de Firefox, est un renard. Cela ne fait aucun doute. Certains avancent même que chez Mozilla, ils sont vraiment nuls en zoologie. Mais vous remarquerez que depuis Firefox 1.0, la bestiole sur le logo de Firefox est vraiment un renard (si vous ne me croyez pas, allez vraiment voir à quoi ressemble un panda roux). Et que si Mozilla a parlé de Panda Roux, c'est d'une part à cause de la traduction de "Firefox", et d'autre part pour faire parler des pandas roux, espèce menacée.

Et puis entre nous, on s'en fout, hein :-)

La grande question, en ce moment, est plutôt : mais quand est-ce que Geeksphone va enfin vendre ses téléphones Firefox OS pour développeurs ?!

Notes

[1] Ce téléphone Firefox OS qui m'avait été prêté, était d'ailleurs un peu moins puissant que ceux présentés aujourd'hui, avec un système en beta test, et pourtant il m'a servi de téléphone professionnel pendant une semaine !

[2] Hey, Vivien, Mounir, Anthony, Kaze et tous les autres, vous déchirez grave!!

lundi, décembre 10 2012

Firefox OS, ça va dépoter

Depuis 3 ans, dans le cadre d'un partenariat entre Mozilla et la Miage d'Evry, je donne des cours sur les technos Mozilla, accompagné de Fabien Cazenave les deux premières années, et de David Rajchenbach-Teller en cette 4ième année. C'est le projet CoMETE. Jusqu'à maintenant, on enseignait les technologies pour réaliser des extensions pour Firefox (XUL, XBL, XPCOM etc...), mais cette année, nous avons décidé d'enseigner le développement web ++, avec les toutes dernières technologies proposées non seulement par Firefox, mais aussi par Firefox OS. Autant dire que les étudiants auront des cours à la pointe (pas comme moi quand j'étais à la Miage d'Orsay en 1996-98, où on nous enseignait encore du Cobol alors que Java faisait fureur :-/ ).

Je suis le projet Firefox OS (aka Boot 2 Gecko) depuis le début. Vivien, l'un des développeurs de Firefox OS, m'avait fait l'honneur de me montrer les toutes premières versions de Firefox OS fonctionner sur un smartphone. C'était en Octobre 2011, 3-4 mois après le démarrage du projet et il y avait déjà des applis 100% HTML, dont celle pour lancer un appel téléphonique ! (bon, un bug empêchait de raccrocher :-) ).

Cependant, je n'ai pas non plus suivi le projet de très près (comprendre : je ne suis pas les commits comme autrefois sur Firefox, et je ne contribue pas - encore ?- au projet). Mais pour préparer ces cours, je suis bien obligé de me plonger dans toutes ces webAPI, dans la réalisation d'une WebApp, ou encore compiler/tester Firefox OS sur mon laptop.

Pour rappel, Firefox OS est un système d'exploitation pour smartphone (et dans le futur pour tablette), dont la particularité est que toutes les applications, y compris le "bureau", sont des applications HTML. En gros, Firefox OS, c'est seulement trois principales couches logicielles :

  • un noyau linux et des drivers adéquates
  • Gecko, le moteur de rendu de Firefox, accompagné de son moteur Javascript
  • des applications 100% HTML5/JS

Et bien sûr, pour que les applications puissent accéder au matériel (comme démarrer un appel téléphonique, envoyer un SMS, utiliser le capteur photographique...), il faut des nouvelles fonctions JS utilisables dans le fichier HTML de l'application. Ce sont les fameuses WebAPI, que Mozilla ne se contente pas d'ajouter, mais aussi de proposer à la standardisation au W3C.

Je dois dire que je suis de plus en plus enthousiaste sur Firefox OS. On va pouvoir réellement tout faire, y compris dialoguer avec les autres applis via les WebActivities. On va pouvoir porter tout ces nouveaux Jeux HTML reposant sur WebGL, vers FirefoxOS, en profitant de nouvelles api (faire vibrer le téléphone, utiliser l’accéléromètre...). L'interface actuelle de Firefox OS montre ce que l'on peut faire avec les transformations et animations CSS3 pour tout les petits effets graphiques. Bref, on va pouvoir refaire le monde avec des technologies que finalement bon nombre de développeurs maitrisent déjà (HTML, JS, CSS), à savoir des technologies standards.

Plus je vois Firefox OS avancer, évoluer, plus je me dis que Mozilla va réussir son pari, celui d'offrir une réelle alternative à IOS et à Android, comme Mozilla l'avait réussi avec Firefox dans un tout autre contexte. Les sceptiques diront que d'autres ont déjà essayé (WebOs par exemple), mais comme l'a écrit Daniel, Firefox OS n'est pas qu'un simple navigateur posé sur un noyau, Firefox OS va plus loin, car Mozilla standardise. De plus, Mozilla ne fait pas ça dans son coin, il a des partenariats avec des opérateurs, en particulier Telefonica, qui vendra des abonnements+téléphones avec Firefox OS préchargé, dés le premier trimestre 2013 , au Brésil.

Vivement que je puisse m'acheter un smartphone et une tablette Firefox OS :-)

samedi, décembre 1 2012

Experience de désinfection d'espionnage web

Quand on surf sur le web, il faut savoir que l'on est de plus en plus pisté, tracké. Notre parcours est analysé, et permet alors aux régies publicitaires de vous afficher des pubs ciblées, ou encore à d'autres sociétés de compléter votre profil qu'elles ont déjà en partie, comme facebook,et google. Ces grosses entités commencent à tout savoir de vous. Et de moi. Et le gros souci, c'est que l'on ne sait pas ce qu'elle font de toutes ces données (en dehors des pubs). Vous avez des doutes sur le fait d'être pisté ? Lisez la suite.

Lire la suite...

mardi, février 21 2012

Autoload avec modération

Dans un billet de Loïc d'Anterroches qui cherche à comprendre pourquoi Symfony 2 est très lent dans les benchs qu'il a fait, j'ai appris via un commentaire que Symfony 2 chargeait par défaut tout un tas de truc (avant d'arriver à l’exécution même du code propre à la page), et notamment donc, des "autoloaders" pour chaque composant. D'ailleurs, un "conseil" de la part d'un "expert" SF2, indique qu'il faut désactiver des choses, comme par exemple l'autoloader pour swiftMailer, qui serait l'une des causes de ralentissement. La conséquence ne m'étonne guère au final. Par contre que SF2, soit disant un framework performant, le fasse par défaut, m'a étonné, voir même stupéfié.

Lire la suite...

mercredi, janvier 12 2011

Plus de H264 dans Chrome

Google vient de l'annoncer : le support du format video H264 va être retiré de Chrome (sachant que dans Chromium, la version opensource du navigateur, il n'y en avait déjà pas). Ce qui veut dire que Google va commencer à pousser fortement à l'utilisation de son propre format vidéo, WebM, déjà supporté par Firefox, Opera et d'autres navigateurs libres.

C'est une excellente nouvelle pour le web, et pour la balise video, que d'avoir un format, WebM, de qualité et non encombré de brevets logiciels connus. J'en avais déjà parlé il y a quelques mois, quand Google libérait ce format. Depuis, cette époque, même s'il n'a pas trop fait parlé de lui publiquement, WebM a progressé, tant au niveau logiciel qu'au niveau hardware, puisque des puces vont bientôt être disponibles.

Il ne reste "que" Internet Explorer et Safari (sur Macbook ou iphone) à ne pas supporter nativement WebM. Toutefois, avec IE9, il suffira d'installer le codec au niveau du système.

Attention cependant, ne crions pas victoire trop vite. Le retrait du support n'est pas encore fait, et l'annonce de ce retrait provoque une vague de mécontentement chez beaucoup d'utilisateurs et de développeurs, si on en croit les nombreux commentaires sur la news (les menaces de passer à un autre navigateur sont particulièrement risibles).

Sans parler du fait que c'est philosophiquement un peu en contradiction avec une précédente décision : celle d'inclure dans le navigateur, Flash, un produit propriétaire.

Espérons que Google tiendra bon dans sa décision sur WebM. Cela fait de lui un allié de plus à Mozilla, dans la lutte pour garder un web ouvert, dans sa volonté de ne pas supporter de formats propriétaires.

jeudi, juin 24 2010

Pourquoi Firefox n'aura probablement jamais 100 au test acid 3

Parce que. Je vous l'ai déjà dit, ce test est débile ! :-)

Ok, plus sérieusement, et ça fait un bon moment que je voulais en parler (je sais je lag), la raison est toute simple : les trois derniers points à passer concernent le support des fontes SVG. Et Mozilla n'envisage pas de les implementer, au moins dans un avenir proche. Des développeurs, dont Roc, de Mozilla, en donne les raisons, sur son blog et dans les commentaires du bug. En gros :

  • Globalement les fontes SVG n'apportent techniquement rien par rapport aux fontes TTF ou WOFF
  • On peut faire des glyphes multi coloré et animé avec les fontes SVG, mais en fait, la spécification sur ces points est un cauchemar. D'ailleurs Opera et Webkit n'implémentent pas ces choses, et ont apparement un support très minimal des fontes SVG (juste pour passer le test acid3 ? ;-) )
  • Les autres types de fontes ont plus d'avantages :
    • techniquement plus riche ("Hinting, rasterization with subpixel antialiasing, far richer support for glyph selection and text shaping") puisqu'elles permettre de créer des glyphes pour des caractères aussi complexes que les caractères arabes par exemple
    • énormément plus de fontes déjà disponibles
    • plus compacte
    • support beaucoup plus large dans les logiciels (outils auteurs etc)

En conclusion, le support des fontes SVG ne leur semble pas très important pour le web, et pas très utile en fait.

Bien entendu, les supporters des fontes SVG pensent le contraire, et ne sont pas d'accord avec les arguments de Roc et cie. Honnêtement, je ne suis pas assez calé en typographie et sur les formats de fontes pour vous dire qui a raison et qui a tord.

Le fait est que Mozilla ne veut pas implémenter un truc qui leur semble peu utile et qui servirait juste pour avoir un meilleur score à un test. Ils préfèrent dépenser leur énergie à des choses plus importantes. Techniquement, je trouve que ça fait sens, très pragmatique, mais au niveau marketing, c'est sûr, c'est dommage.

Cependant, rien n'interdit à quiconque de proposer un patch. Si il est bon, il n'y a pas de raison (à mon sens) qu'il soit rejeté. Qui veut faire passer Firefox à 100 au test acid3 ?

Mise à jour 25/01/2011 : Alexander Limi, un des développeurs de Firefox, confirme le fait que Firefox n'aura pas 100%. Il rapport aussi, des propos de Boris Zbarsky (un des core-developers de Mozilla), expliquant que le support des fontes SVG dans les autres navigateurs est très minimes et tout juste suffisant pour afficher un score de 100% au test Acid3 (ce qui confirme les propos de Mitch 74 dans son commentaire plus bas).

IE9 a quasi rattrapé son retard

La troisième preview de IE9 est sortie. J'avoue être plutôt impressionné par toutes les améliorations qu'ils ont encore apporté. IE9, une fois que la version finale sera sortie, sera vraiment dans la cour des grands et aura rattrapé tout son retard technologiquement parlant.

Une partie des questions que je me posais il y a quelques mois ont maintenant une réponse : c'est implémenté.

  • Support de SVG (en partie)
  • éléments HTML5 <video>, <audio>, <canvas>,
  • support DOM largement amélioré: DOM traversal, DOM level3 core, DOM level3 events,
  • fontes téléchargeable WOFF, support complet CSS 2.1, support des media queries CSS3, selecteurs CSS3, bordures CSS3, background CSS3
  • un moteur javascript complet et aussi rapide que celui des autres navigateurs (je ne tiens pas compte des pouillèmes de milli secondes de différences entre chacun, à ce niveau, ce n'est plus tellement significatif)

Bref, tout plein de choses à se mettre sous la dent, avec un score acid3 qui grimpe à 83[1]. Sans parler d'un support très avancé de l'accélération graphique matérielle.

Il lui manque toutefois encore des technologies qu'ont déjà les concurrents, comme :

  • les WebWorkers
  • les WebSockets
  • formulaires HTML5, HTML5 File API, et autres éléments de sections HTML5 probablement
  • transitions CSS3, transformations CSS3, animations CSS3, gradients,
  • WebGL
  • SMIL
  • Évènements DOM multi touch, support accéléromètre, support géolocalisation
  • base IndexedDb
  • API Drag and drop (à vérifier)

Et j'en oublie certainement[2]. Ils ont donc encore du chemin à rattraper, et je ne doute pas que certaines de ces technos seront implémentés dans la version finale de IE9. Pour moi, on pourra qualifier IE9 de navigateur moderne. Car une chose est sûre, les développeurs web auront déjà suffisamment de technologies pour faire des sites modernes qui soient compatibles avec la majorité des navigateurs.

Le rouleau compresseur Microsoft a mis du temps à se mettre en route. Il est maintenant en marche, et pas qu'un peu. Mozilla, Apple, et Google ne devront pas s'endormir sur leurs lauriers. Cette nouvelle guerre de navigateurs initiée par Mozilla devient vraiment intéressante.

Notes

[1] Même si, comme je l'ai déjà dit, ce test n'est pas vraiment significatif

[2] je me suis en partie basé sur la liste des fonctionnalités qui sont implémentés dans Firefox 3.6 ou 4

mercredi, mai 19 2010

WebM, le nouveau format video du web

Le petit monde des formats videos, et le web sont en pleine ébullition, avec l'annonce du nouveau format WebM. Mais avant de voir ce que nous promet WebM, faisons d'abord un petit retour en arrière dans l'histoire des codecs pour la balise video de HTML5.

Lire la suite...

jeudi, février 11 2010

Faire du drag and drop avec flash en utilisant canvas

À Zoomorama, Flash nous rend bien service. De par ses performances au niveau rendu, il nous permet de développer notre navigateur de documents zoomable, notre "ZoomViewer", que l'on peut intégrer dans une page web. Seul souci avec Flash : il ne connait pas le drag and drop.

Lire la suite...

mardi, février 2 2010

La puissance de HTML5 dans vos applis web

Paul Rouget vient de sortir une nouvelle démo montrant les possibilités techniques de Firefox pour les développeurs web. Ici cependant, c'est plus qu'une démo, c'est une véritable petite application concrète.

Il s'agit d'un outil, qui permet d'envoyer des images sur twitpic et comportant un éditeur d'image. Vous sélectionnez les images que vous voulez envoyer, vous les retouchez éventuellement, et vous les envoyez. Visualisez la video, c'est carrément génial, d'un point de vue technique. C'est du jamais vu dans une application web HTML (je ne parle pas d'applet java ou flash, souvent lourdes et peu ergonomiques).

demo_editeur_twitpic.png

Coté technique donc, voici ce qui est utilisé :

  • HTML5 Canvas: on ne présente plus l'élement <canvas>, qui permet d'avoir une zone dans la page web où l'on peut "dessiner" programmativement. Les images que l'on a glisser dans l'application sont "injectées" dans un canvas. Cela permet alors de les modifier, de proposer à l'utilisateur une mini application de retouche, avec des fonctions de découpage, de décoration, de mirroir etc. Avec Canvas, on peut aller très très loin. Voir par exemple cet outil, sketchpad, un paint-like bien plus beau que l'original :-)
  • HTML5 Drag and Drop: Paul utilise les évènements drag-and-drop, pour permettre, d'une part, de glisser des fichiers de votre bureau ou explorateur de fichiers vers l'application, mais aussi de glisser les images à l'intérieur de l'application entre les différentes fonctionnalités (glisser une image précédemment sélectionnée vers la poubelle par exemple).
  • File API : permet dans l'application d'avoir des informations sur les fichiers, à partir de ce qui est indiqué dans un <input type="file"> ou un évènement drag and drop qui concerne un fichier. Ça permet à l'application de réagir ensuite en fonction du type du fichier, de sa taille etc..
  • HTML5 localStorage: localStorage est un objet javascript qui permet de stocker ce que l'on veut, durablement, coté client. Il est utilisé ici pour stocker les images sélectionnées, en attendant de les envoyer vers twitpic. L'image, affichée en fait via un canvas (ce qui permet de la modifier), est en fait transformée en data URL. Cette URL est alors stockée dans localeStorage.
  • HTML5 Application Cache : toute la machinerie permettant de continuer à faire fonctionner l'application même en étant déconnecté, est utilisée. En particulier, un manifest "offline" est utilisé pour indiquer les fichiers de ressources (js, css) à stocker durablement dans le cache du navigateur, de manière à pouvoir recharger l'application, même en étant déconnecté. En fait, c'est comme si l'application était stockée en local. De plus, les évènements offline et online sont écoutés, pour pouvoir autoriser ou non la publication des images.
  • Cross Site xmlHTTPRequest, un mécanisme http permettant d'autoriser ou non à une application web (ici la demo) de communiquer avec une autre application web (ici twitpic).

Toutes ces technologies, dorénavant présente dans Firefox 3.6 et déjà plus ou moins dans d'autres navigateurs (je n'ai pas vérifié, ça ne va pas tarder en tout cas), offrent de bien belles perspectives en matières d'applications web puissantes et agréables à utiliser. À quand de telles fonctionnalités dans mon outil de blog préféré, pour faciliter l'insertion et la retouche de nouvelles images dans un billet sans ouvrir de lourdes applications graphiques desktop ? ;-)

Cerise sur le gâteau : cette application fonctionne parfaitement dans la version mobile de Firefox, qui est sortie hier pour Maemo :-)

vendredi, novembre 13 2009

Javascript coté serveur

Ça commence à faire pas mal d'année que je fais du javascript, non seulement pour le web, mais aussi dans les applications XUL. Ce qu'il y a d'intéressant à utiliser Javascript avec le XUL, c'est qu'on peut se lâcher, et utiliser tout le potentiel du javascript de la plateforme Mozilla, comme les générateurs et iterateurs, les propriétés et méthodes avancées sur les objets de base (comme sur Array). Même si je ne suis pas fan de certaines constructions syntaxiques[1].

Et depuis quelques jours j'ai une lubie : pourquoi ne pas utiliser javascript coté serveur, en remplacement de PHP par exemple ?

Et j'ai découvert sur wikipedia qu'il existait quelques dizaines de projets de générateurs de pages web à base de javascript. La majorité de ces projets reposent sur les moteurs JS de Mozilla :

  • SpiderMonkey, le moteur (en C) utilisé dans Firefox 3/Gecko 1.9.0 et précédent
  • Rhino, un moteur en java

Ceux à base de SpiderMonkey m'intéresse plus particulièrement. Je ne les ai pas encore tous regardé, mais jslibs semble sympa, dans la mesure où la dernière version ne repose plus sur SpiderMonkey, mais sur TraceMonkey, le moteur JS accéléré de Firefox 3.5.

Pour faire le choix d'un de ces projets, il va falloir regarder de plus près les API proposées. En effet, il faut savoir qu'un moteur JS ne fait qu'exécuter du code, et ne contient nativement que quelques objets primitifs comme String, Array, Date, Math... C'est au code embarquant de "brancher" des bibliothèques ou fonctions C sur des objets JS (faire des wrappers donc), pour enrichir l'API utilisable dans le code JS. Ce que fait d'ailleurs un navigateur, pour les objets window, document, les objets DOM etc.

Reste aussi à faire quelques benchmarks, pour voir si ça vaut vraiment le coup par rapport à PHP, Python ou autre..

Notes

[1] disons que depuis la publication de ce billet, j'ai un avis moins tranché :-) On s'y fait

mardi, novembre 10 2009

Et le meilleur moteur javascript est....

On voit circuler ces slides sur des astuces pour les perfs en javascript, et on y voit notamment que les résultats de Firefox par rapport aux autres moteurs, notamment V8, ne sont pas folichons.

Cependant, comme beaucoup de benchmarks, ces résultats sont sujets à cautions, d'autant plus qu'ici :

  1. On ne sait absolument quelles versions de chaque moteur sont mises en comparaison
  2. Comparer SpiderMonkey, moteur d'ancienne génération (Firefox 3.0 et précédent), à V8, ce n'est vraiment pas "fair play". Il aurait pu prendre au moins TraceMonkey (Firefox 3.5). À moins qu'il confond dans les noms, mais ça m'étonnerai, car pour les quelques tests que j'ai effectué avec son script, les résultats de TraceMonkey sont plus proches de V8 que de IE (dernières versions stables des navigateurs).

Et puis bien sûr, aucune mention d'Opera.

Enfin, c'est bien beau d'avoir un moteur rapide, encore faut il qu'il soit en conformité avec la spécification Ecmascript. Ce qui est encore loin d'être le cas pour certains d'entre eux.

vendredi, octobre 16 2009

Transitions CSS

La version de développement du futur Firefox 3.7 implémente depuis quelques jours les transitions CSS. Vous avez peut être pu le voir, en lisant Paul qui a parlé discrètement sur son blog, en même temps que la nouvelle implémentation de l'API de l'accéléromètre. Vous pouvez voir une démo de Paul avec les transitions CSS.

Le principe est assez simple:

  • avec la propriété transition-property, vous indiquez les propriétés CSS qui seront concernées par la transition, c'est à dire, quand leur valeur changera, il y aura une transition entre l'ancienne valeur vers la nouvelle valeur, le changement ne sera donc pas immédiat.
  • transition-duration permet d'indiquer la durée de la transition, pour chacune des propriétés
  • transition-timing-function, indique la fonction de transition, c'est à dire la manière dont la transition sera faite. Par exemple la fonction ease-in-out fait une transition rapide au début, lente au "milieu", et rapide à la fin. On a ainsi des fonctions pour faire des effets élastiques, smooth etc..
  • transition-delay pour indiquer à partir de combien de temps la transition doit être faite, à partir du moment où la valeur est changée.
  • transition pour indiquer tout ça en une seule instruction.

Voir la spécification complète sur le site du W3C (spécification qui est encore un brouillon).

Un exemple :

  .mydiv {
     width: 100px;
     transition: width 1s linear;
  }

 .mydiv:hover {
    width:200px;
 }

Quand on passera la souris au dessus de l'élément, sa largeur changera à 200px. Avec la propriété transition, ce changement ne sera pas immédiat. La largeur passera de 100px à 200px en 1 seconde, de manière linéaire. Bien sûr, ce changement de valeur peut être fait via javascript plutôt que sur un :hover, par exemple: document.querySelector(".mydiv").style.width="200px";.

Le gros intérêt de ces propriétés CSS, c'est que ça va rendre obsolète beaucoup de fonctions d'animations que l'on retrouve dans beaucoup de frameworks javascript (jquery, mootools...). Ça permettra des pages plus légères (les frameworks seront moins lourds à terme) et plus rapide.

C'est donc implémenté dans webkit (donc dans Safari, et Chrome je crois), et dans une future version de Firefox, en utilisant bien entendu les prefixes -webkit- et -moz- sur les propriétés pour que ça fonctionne.

Et, comme je l'avais déjà dis il y a quelques mois dans un billet sur notre technologie à Zoomorama, c'est aussi implémenté dans notre browser (développé en actionscript 3). J'ai mis en ligne deux démos faites par David Marteau, et c'est utilisable dés maintenant dans vos fichiers ZML :-)

mercredi, octobre 14 2009

L'utilité de l'API de l'accéléromètre dans les navigateurs

Paul Rouget nous a fait de jolies demos (que vous pouvez voir en vidéo sur hacks.mozilla.org), pour montrer ce qu'on peut faire avec la nouvelle API qui permet de profiter de l'accéléromètre embarqué dans votre laptop ou tablette.

Les réactions n'ont pas tardé un peu partout sur le web, et en gros, j'en ai retiré 3 différentes :

  • "vous feriez mieux de travailler sur autre chose"
  • "c'est inutile, ça sert à rien"
  • "c'est génial !"

Pour le "vous feriez mieux de travailler sur autre chose", on va passer vite fait, c'est du pur troll. Il y a plusieurs dizaines de développeurs qui bossent à temps plein sur Firefox, et il est évident que chacun bosse sur des sujets différents. Le support de l'accéléromètre a été fait par un seul gars, pas 250. Bref, ce n'est pas une perte de temps.

Les deux autres remarques sont plus intéressantes. Et en analysant (à l'arrache) les réactions, j'ai remarqué qu'en fait la première semblait être faite principalement par des non-développeurs, et la deuxième par des développeurs.

En fait, beaucoup de gens, en voyant une des démos qui montre une page web s'orienter ou se tordre en fonction de l'orientation du laptop, n'ont pas vu l'intérêt technique de la chose. Ils ont regardé la démo "au premier degré" pourrait-on dire. Il y en a qui ont cru comprendre que dans les prochaines versions de Firefox, les pages web s'orienteront en fonction de l'orientation du laptop. Du coup, ils disent que ça ne sert à rien, qu'ils ne bougent de toute façon pas leur laptop, ou encore que c'est une horreur, parce que quand une image s'affichera dans le mauvais sens, ils ne pourront plus basculer leur laptop pour voir l'image dans le bon sens, etc...

Et en fait, ce n'est pas du tout ça, et effectivement, la démo est peut être mal choisie au final. Car en fait, l'intérêt de la démo se trouve sous le capot, dans le code source de la page, pour montrer avec quelle facilité on peut utiliser l'accéléromètre. C'est pourquoi la plupart qui ont trouvé cette démo géniale sont je pense des développeurs, ils ont regardé le source de la page.

Il faut donc juste comprendre que Mozilla a mis à disposition un outil, pour les développeurs web. Et il est tellement nouveau que des usages concrets de cet outils restent à inventer. On sait que l'une des premières utilités est pour les jeux, sur Fennec, la version mobile de Firefox, ou pour la version desktop sur les tablettes, comme on peut voir dans les jeux pour IPhone. Pour d'autres utilités, surtout sur le desktop, nul doute que des développeurs vont en trouver ! C'était pareil pour <canvas>, <video>, l'api de géolocalisation etc.. On ne voit pas toujours l'intérêt d'une nouvelle techno quand elle débarque. Mais au final, des usages sont inventés, créés.

Ça me rappelle d'ailleurs la conférence de Paul et Tristan à Paris Web, durant laquelle Paul fait plein de démos sur des nouvelles technos présentes ou à venir dans Firefox, et ajoutant à un moment donné, "j'ai pas dit que ça servait à quelque chose", suivi d'un grand rire dans la salle. Oui, au visionnage des démos (genre une vidéo de Tristan Nitot tournant en rond), un utilisateur lambda, voire un développeur web, peut effectivement se demander l'intérêt de tel ou tel truc. Mais en y réfléchissant, ou quand il sera confronté à un besoin précis, peut être bien qu'il en trouvera.

Si d'ailleurs vous avez des idées de l'utilité de l'accéléromètre dans une appli web, signalez les à Paul ou ici dans les commentaires, cela lui permettra de faire des démos "plus utiles" du point de vue de l'utilisateur :-)

jeudi, octobre 8 2009

PHP n'est pas un bon langage de template

Ça me fait plaisir de lire ce genre de billet, surtout venant de la part d'une figure du monde PHP, à savoir Fabien Potencier (monsieur Symfony). Ça fait des années que je pense comme Fabien : PHP est un mauvais langage de template. Pas assez sécure (que fait-t-on des templates uploadés par des utilisateurs par exemple ?), trop verbeux, parfois trop complexe pour les intégrateurs web qui ne savent pas programmer, et n'impose pas une séparation entre logique métier et "vue" (vu que dans un template en PHP, on peut appeler tout et n'importe quoi).

C'est pourquoi j'ai toujours préfèré utiliser un langage qui soit conçu pour les templates, pour faciliter leurs écritures d'une part, et de bien faire une séparation entre la logique métier et la "vue". Et c'est pourquoi dans Jelix, j'ai crée mon propre moteur de template, ultra léger et performant, jTpl, qui est disponible en version standalone, dont je devrais sortir la version 1.0 dés que j'ai un peu de temps.

mardi, septembre 22 2009

De la 3D dans Firefox

L'extension canvas 3D permet depuis 2 ans, d'utiliser l'element <canvas> pour faire de la 3D, en profitant de l'accélération matériel apportée par openGL.

S'en est suivi la naissance d'un groupe de travail en mars dernier, au Khronos Group, pour normaliser une API, appelée communément WebGL, dérivée d'OpenGL ES 2.0, qui sera adaptée aux application web. Mozilla et d'autres éditeurs participent à ce groupe.

En juin dernier, le code de l'extension Canvas 3D a été intégré dans le trunk de Mozilla, et ce n'est que depuis quelques jours que ce code a été activé par défaut dans les compilations nocturnes de Firefox (en l'occurence, cela sera disponible pour Firefox 3.7, il est trop tard pour Firefox 3.6 qui sortira d'ici la fin de l'année). Il y a eu aussi des changements dans l'API du contexte 3D de l'élement <canvas>, afin de coller au plus près aux derniers brouillons de WebGL.

Nous voilà donc avec des nightlies de Firefox permettant de faire de la 3D. Le développeur de canvas 3D, Vlad Vukićević, vient de publier une démo, qui permet de visualiser une creature en 3D.

J'ai fait un screencast de la demo executée avec une nightly de Firefox (fichier Ogg/Theora, et désolé, pas d'utilisation de la balise video dans ce billet, impossible de l'utiliser avec dotclear ! grrrrrr)

Mise à jour : deux nouvelles démos ! À voir ici et .

vendredi, septembre 11 2009

XRX, un doux rêve ?

Tangi vient de publier un billet très intéressant sur une nouvelle façon de faire une application web, une architecture XRX, qui utilise XForms, Rest, et XQuery. Vu de loin, ce triplet à l'air sexy, et fait renaître l'idée de faire du XML de bout en bout, sans avoir à taper une ligne de code "fonctionnelles". Et pour Tangui, cela apporte beaucoup de simplicité par rapport au triptique Javascript/PHP/MYSQL. Sur ce point, je ne suis pas d'accord avec lui.

Lire la suite...

vendredi, juillet 17 2009

Transformations 2D et 3D en CSS

Ainsi donc, webkit supporte maintenant les transformations 3D en CSS. Je trouve ça génial. J'apprécie déjà les transformations 2D (que j'utilise sur la page d'accueil de jelix.org). Mais là, ça ouvre encore plus de perspectives (c'est le cas de le dire ;-)).

Seulement, à travers les demos que j'ai ouvert dans mon Firefox (qui ne supporte pas les propriétés transform3D), j'ai remarqué que l'utilisation de ces transformations avaient un écueil : ça se dégrade très mal dans les navigateurs ne supportant pas ces propriétés. Du genre, les éléments s'affichent les uns sur les autres. Il y a certainement des améliorations possibles dans ces démos pour que ça se dégrade un peu mieux. Mais c'est certain qu'il va falloir faire attention...

Pour les plus curieux d'entre vous, les brouillons des spécifications sont disponibles sur le site du W3C : CSS3 3D transforms, CSS3 3D transforms.

jeudi, juillet 2 2009

Theora, après Firefox et Chrome : Opera

Après Firefox et Chrome, Philip Jägenstedt, un développeur du navigateur Opera annonce que ce dernier embarquera en natif le support pour Ogg Vorbis/Theora. Un autre développeur d'Opera, Anne Van Kesteren, apporte des précisions sur ce choix en expliquant qu'embarquer H264 n'est pas très bon pour le web, et que le web a besoin de format ouvert, libre d'utilisation (sans avoir à payer des royalties), et libre de tout brevet logiciel. Theora est donc le format idéal pour diffuser de la vidéo sur le web.

Beaucoup de développeurs et d'utilisateurs préfèrent cependant H264, sous prétexte que les fichiers sont moins gros, et la qualité meilleure qu'avec Theora. Ils ne savent pas cependant (ou ne veulent pas savoir parfois) que Theora n'est pas si mauvais que ça, et que les encoders pour ce format s'améliorent !

Ainsi, la 1.1 alpha 2 de l'encoder 'Thusnelda' réalisé par la fondation Xiph vient de sortir. Sans changer le format Theora, il permet de produire des vidéos de meilleure qualité, et des fichiers moins gros. (voir ce comparatif sur ce blog). Bien entendu, la prochaine version de Firefox utilisera cette future version de la libtheora, si elle est prête à temps.

Ogg Theora vaincra ! :-)

- page 1 de 15