First prototype for ThumbTabs (code name)

It was a long time since I star­ted the deve­lop­ment of my exten­sion for Fire­fox. I easily manage to create a side­bar and list all the tabs. But qui­ckly I found my first dif­fi­cul­ties…

I sear­ched how to create a thumb­nail of a web page. Well, it’s quite easy there is a func­tion for that : draw­Win­dow. But I wan­ted to creat par­tial thumb­nails, as explai­ned of Alexan­der Limi arti­cle. And playing with ratio, screen width, thumb­nail width was quite disap­poin­ting. I mana­ged to create par­tial thumb­nail, but only blur­red.

Then is deci­ded to create 2 XBL ele­ment. One for the tab con­tai­ner and ano­ther for the tabs (inclu­ding the favi­con, the title and the thumb­nail). Here star­ted the night­mare. I hacked Tab­Si­de­bar exten­sion to get ins­pi­ra­tion but it’s a long pro­cess to dive in a pro­ject with thou­sands lines of code.

So, three days ago I give up and deci­ded to test Jet­Pack, by Mozilla Labs. Jet­Pack should repre­sent the future of exten­sions. It inclu­des the jQuery fra­me­work (very handy for ani­ma­tions and events mana­ge­ment) and you don’t need to res­tart the brow­ser after ins­tal­ling jet­packs. Howe­ver it’s a young pla­te­form, there is a lot of bugs, you can­not loca­lize your strings, there is no mecha­nisms for pre­fe­ren­ces hand­ling, etc.

Any­way, I tried it and here it is :

Clearly, it lacks of polish, the code is messy and I have seen a lot of bugs. Moreo­ver it’s bro­ken with Jet­Pack 0.5pre2…

Ano­ther screen­shot, clo­ser :

I don’t com­ple­tely aban­don the clas­sic exten­sion, but I will wait to finish the Jet­Pack pro­to­type so I will be more trai­ned with JavaS­cript stuff. I think it’s all a mat­ter of lear­ning curve. Jet­Pack one is more acces­si­ble ;)

Tabs.next, my project for MMTC

Let’s start my first post on MMTC pla­net.

As you may know, my first goal was to deve­lop an exten­sion which ena­ble us to paste an URL into the down­load mana­ger. This action should start the down­load of the file repre­sen­ted by the URL. The exten­sion was just the first part, then I plan­ned to create a bug on bug­zilla and sub­mit a patch on the Fire­fox trunk. The bug is filled (bug 506881) but as you can see it was mar­ked as RESOL­VED WONT­FIX :( I will finish my exten­sion any­way but I had to find a new pro­ject.

So I deci­ded to work on tabs.

I deci­ded to use the side­bar and remove the tra­di­tio­nal tab bar. Let’s ima­gine that you have less than X tabs (X will pro­ba­bly be cal­cu­la­ted from the size of your screen), Fire­fox will dis­play a side­bar with web­si­tes thumb­nails. Moreo­ver, the « new tab » but­ton will have a search field to create directly a tab with the search results.

Side­bar with thumb­nails accor­ding to Alexan­der Limi

Beyond a thre­shold, the tabs will look like a tree (see the exten­sion Tree­Sty­le­Tab), without the thumb­nails.

Tree-style tabs accor­ding to Alexan­der Limi

Those ideas are from Alexan­der Limi, a Mozilla employee. I encou­rage you to read his arti­cle Rein­ven­ting tabs for the brow­ser to bet­ter unders­tand the design pur­po­ses.

If I have more time, I plan to add « work spa­ces ». It’s like a box where you store a set of tabs, for later use.

Work spa­ces accor­ding to Aza Ras­kin

Rétablir l’innovation dans la gestion des onglets des navigateurs Web

Sou­ve­nez-vous, Fire­fox 1.0 avait fait décou­vrir les onglets au plus grand nom­bre (même si ce ne fut pas le pre­mier navi­ga­teur à les gérer). Au fil du temps tous les navi­ga­teurs s’en sont dotés à tel point que main­te­nant sor­tir un nou­veau navi­ga­teur sans onglets nous sem­ble impro­ba­ble.

Cepen­dant la façon dont les dif­fé­rents navi­ga­teurs intè­grent les onglets est, à quel­ques excep­tions près, la même :

  • une barre d’onglet hori­zon­tale, pla­cée au des­sus ou en des­sous de la barre de navi­ga­tion,
  • l’ensem­ble des pages Web ouver­tes sont lis­tées par ordre d’ouver­ture de gau­che à droite, en affi­chant leur titre.

Il n’y a bien qu’Opera 10 beta qui se démar­que légè­re­ment en per­met­tant d’affi­cher une minia­ture de la page Web au des­sus de son titre.

Capture d’écran d’Opera

Opera 10 beta 2 et les minia­tu­res dans les onglets

Comme nous pou­vons le voir, l’inno­va­tion n’est pas au ren­dez-vous. J’y vois plu­sieurs rai­sons :

  • Cer­tains inter­nau­tes sont tout sim­ple­ment satis­faits de la ges­tion actuelle des onglets.
  • Il y a un besoin de chan­ge­ment, notam­ment chez les uti­li­sa­teurs avan­cés. Il suf­fit de voir le nom­bre d’exten­sions pour Fire­fox liées à la ges­tion des onglets (270+). Cepen­dant cha­que per­sonne a ses pro­pres besoins et selon l’uti­li­sa­tion que nous avons du Web, nos atten­tes peu­vent être sen­si­ble­ment dif­fé­ren­tes. Dans ce cas, com­ment satis­faire le plus de monde ? En atten­dant de trou­ver la réponse, le sys­tème ne bouge pas.

En étant large, nous pou­vons clas­ser les uti­li­sa­teurs de navi­ga­teurs Web en deux caté­go­ries :

  • Les novi­ces : ils ont un usage irré­gu­lier d’Inter­net et n’ouvrent jamais plus d’une dizaine d’onglets à la fois.
  • Les expé­ri­men­tés : Ils oscil­lent entre 10 et 30 onglets ouverts. Cer­tains vont même jusqu’à une cen­taine d’onglets.

Ce sont ces der­niers les plus insa­tis­faits. Cer­tains ont déjà trouvé la parade en ins­tal­lant des exten­sions comme :

  • Tab­Mix­Plus : l’appa­rence de la barre d’onglet reste légè­re­ment la même mais de nom­breu­ses nou­vel­les fonc­tion­na­li­tés sont rajou­tées (mise en valeur des onglets non lus, créa­tion de groupe d’onglets, etc.).
    Capture d’écran des options de TabMixPlus Capture d’écran des options de TabMixPlus

    Exem­ple avec deux par­ties du pan­neau d’options de Tab­Mix­Plus

  • Tree­Sty­le­Tab : les onglets sont affi­chés sous forme d’arbre dans un pan­neau laté­ral.
    Capture d’écran de TreeStyleTab

    Tree­Sty­le­Tab en action

  • Fox­Tab : cette exten­sion per­met de pas­ser d’un onglet à un autre selon plu­sieurs maniè­res plus ou moins « bling-bling » comme l’effet Win­dows Vista, via un car­rou­sel, en mosaï­que, à la cover­flow, etc.
    Capture d’écran de FoxTab

    Fox­tab en action

  • Tab­Si­de­bar : cette exten­sion affi­che les onglets via la minia­ture de leur page Web dans un pan­neau laté­ral.
    Capture d’écran de TabSidebar

    Tab­Si­de­bar en action

  • Etc.

Pour ma part, j’ai juste adopté Tabs Open Rela­tive qui ouvre les onglets à droite de celui en avant-plan et non pas tout à droite.

Si une solu­tion qui pour­rait satis­faire tout le monde (ou pres­que sinon on ne s’en sort pas) est trou­vée, il res­tera à con­vain­cre les gens de chan­ger leur habi­tude. C’est un des freins les plus impor­tants, si ce n’est le plus impor­tant, dans l’inno­va­tion. Pour arri­ver à met­tre en place un nou­veau sys­tème qui mini­mise le nom­bre de râleurs il faut abso­lu­ment pro­po­ser une solu­tion non pas 2 fois mieux mais 10 fois mieux que celle actuelle. Il faut que les uti­li­sa­teurs se disent « mais com­ment ai-je pu faire avant ? ».

Est-ce que j’ai une telle solu­tion ? Évi­dem­ment non, et elle n’est d’ailleurs pas facile à trou­ver puis­que nom­breux sont les gens à s’être pen­chés sur la ques­tion sans avoir trou­ver. Parmi les qua­tre pro­jet les plus abou­tis, j’ai retenu :

  • Rein­ven­ting tabs for the brow­ser, par Alexan­der Limi : c’est un arti­cle d’un nou­vel employé Mozilla (tra­vaillant sur l’Expé­rience Uti­li­sa­teur de Fire­fox), ancien de chez Goo­gle. Il pro­pose d’uti­li­ser un pan­neau laté­ral con­te­nant la minia­ture des onglets, tant qu’il y en a peu d’ouverts. Au delà d’un seuil, les minia­tu­res pas­se­raient à un affi­chage comme Tree­Sty­le­Tab. Enfin, pour les uti­li­sa­teurs les plus expé­ri­men­tés, il pro­pose d’enle­ver toute inter­face du navi­ga­teur hor­mis la page Web et d’uti­li­ser uni­que­ment une ver­sion plus puis­sante d’Ubi­quity.
    Prototype pour les novices Prototype pour les intermédiaires Prototype pour les expérimentés

    Les dif­fé­rents niveaux de ges­tion des onglets selon Alexan­der Limi

  • Fire­fox.next: Tabs on the side?, par Aza Rakin : Aza fon­da­teur d’Huma­ni­zed est main­te­nant « Head of User Expe­rience for Mozilla Labs ». Dans sa réflexion il pro­pose aussi de se ser­vir d’un pan­neau laté­ral. Il est pos­si­ble d’y ran­ger les onglets dans des « work spa­ces » ou de les clas­ser dans une caté­go­rie « appli­ca­tions » pour les sites comme Gmail.
    Prototype par Aza

    Pro­to­type avec pan­neau laté­ral par Aza Ras­kin

  • Desi­gning Fire­fox 3.2, par Oli­ver Rei­chen­stein : ici l’auteur ima­gine gérer les onglets comme on gère la musi­que dans iTu­nes. La solu­tion ne sem­ble effi­cace que si l’on doit gérer un très grand nom­bre d’onglets. Une fois de plus, le pan­neau laté­ral est mis à con­tri­bu­tion.
    Prototype ressemblant fortement à iTunes

    Pro­to­type res­sem­blant à iTu­nes par Oli­ver Rei­chen­stein

  • Mozilla Labs Design Chal­lenge Sum­mer 09 : la fon­da­tion Mozilla a récem­ment lancé un con­cours dont le sujet était « Réin­ven­ter les onglets ». Il y a eu plus d’une cen­taine de pro­po­si­tions, réa­li­sés par des équi­pes de desi­gners du monde entier. 5 pro­jets ont été retenu par le jury, selon les cri­tè­res sui­vants : le plus inno­vant, le plus fonc­tion­nel, le plus inte­rac­tif, le plus facile à met­tre en pro­duc­tion et le plus popu­laire parmi la com­mu­nauté. Un bilan du con­cours est dis­po­ni­ble en fran­çais sur le site du Zéro.

Le pro­blème com­mun à cha­cune de ces appro­ches est d’ordre tech­ni­que : ce ne sont que des sché­mas visuels, il n’y a pas de pro­to­ty­pes à tes­ter. La con­cep­tion d’un pro­to­type est donc le sujet que j’ai choisi pour mon pro­jet MMTC.

Pour l’ins­tant la solu­tion que je con­si­dère la plus inté­res­sante à tes­ter est un mélange de la pro­po­si­tion d’Alexan­der Limi et d’Aza Ras­kin. Plus d’infor­ma­tions dans les pro­chains jours.

Mise à jour du site Web à la truelle

Je viens de tout cas­ser, ou pres­que. J’appro­che dan­ge­reu­se­ment de la fin des étu­des et donc de la recher­che de tra­vail, j’ai donc voulu ren­dre mon site plus com­plet et plus facile à retrou­ver. Le Navi­go­saure n’existe donc plus car :

  • le design était trop sim­ple,
  • l’adresse était trop com­pli­qué (je voyais pas­ser du navi­go­zor, navi­gau­zore, etc.),
  • je n’étais pas admi­nis­tra­teur de mon ser­veur,
  • j’uti­li­sais encore Dot­clear 1.2.
J’ai d’abord cher­ché un nom de domaine. tb.fr m’aurait plus s’il n’était déjà pris. À la place, ce sera donc tb4.fr (le pre­mier qui trouve pour­quoi 4 aura un free hug la pro­chaine fois qu’on se verra) avec Dot­clear 2.1 et un nou­veau design. En tant qu’admi­nis­tra­teur/rédac­teur ça me change la vie (dans le bon sens) mais mis à part ça :
  • je perd mon beau Page­Rank™ et mon réfé­ren­ce­ment,
  • le site perd beau­coup en acces­si­bi­lité,
  • je n’ai pas fini d’appli­quer un style à tout les élé­ments, notam­ment les for­mu­lai­res et les com­men­tai­res,
  • le nom de domaine est tou­jours aussi nase, mais plus court.
Mal­gré ces défauts il me fal­lait vite met­tre en ligne la nou­velle ver­sion. Je vais main­te­nant uti­li­ser le prin­cipe d’amé­lio­ra­tion con­ti­nue (notam­ment via les retours que j’aurais en com­men­tai­res) pour redon­ner à mon site une bonne qua­lité Web.

Changement de ligne éditoriale dans le cadre du Madrid Mozilla Technologies Course

Sur une initiative de la Mozilla Foundation, de Mozilla Europe et de l'Universidad Rey Juan Carlos de Madrid (via LibreSoft), est né le Madrid Mozilla Technologies Course. C'est un cours de 3 mois, principalement en ligne, sur les technologies Mozilla avec une semaine de cours intensive à Madrid même. Le cours terminera mi-octobre avec le rendu d'un projet suivi, si réussite, de l'obtention d'un diplôme par l'université.

Comme vous l'avez peut-être déjà deviné, j'ai eu la chance de voir ma candidature acceptée et je suis d'ailleurs actuellement à Madrid, avec une vingtaine de camarades, en train d'assister aux cours de Paul et de Vivien.

En plus du suivi évident des cours, les élèves doivent rédiger en anglais au moins un article par semaine, ce que je vais donc faire directement sur ce site Web dans les semaines à venir. Le sujet des articles tournera autour de l'écosystème Mozilla, comprenant aussi bien des informations sur mon projet, sur Mozilla vu de l'intérieur ou sur la programmation XUL.

Photo d'ensemble de la classe

- page 3 de 12 -