Back­pack de 37­si­gnals : votre sac à dos nu­mé­rique

Back­pack de 37­si­gnals : votre sac à dos nu­mé­rique

Je vous ai parlé pré­cé­dem­ment des nou­veau­tés du web . J'ai in­sisté sur (les tech­no­lo­gies, au grand dam de cer­tains...) les ap­pli­ca­tions web (ou "web apps"). C'est ef­fec­ti­ve­ment, à mon avis, un des deux grands chan­ge­ments du web avec le dé­ve­lop­pe­ment de l'in­for­ma­tion émanent de la masse (j'y re­vien­drais peut-être un jour).

Sé­bas­tien Pen­nec a déjà fait une intro fort réus­sie de Net­vibes et de del.​icio.​us que je vous in­vite vi­ve­ment à lire si ce n'est déjà fait. Je vais conti­nuer l'ex­plo­ra­tion des "web apps" avec les trois ap­pli­ca­tions de chez 37­si­gnals. Dans ce pre­mier volet, je vais vous pré­sen­ter mon lo­gi­ciel pré­féré des trois : Back­pack. Back­pack est... un ras­sem­bleur d'idées ? un bloc-note  ? un sac à dos nu­mé­rique ? un édi­teur de sites web ? En tout cas, c'est pra­tique, joli et ça offre une forme d'ap­pli­ca­tion vrai­ment nou­velle par ses pe­tites spé­ci­fi­ci­tés.

Pour ceux qui sont at­ten­tifs, vous re­mar­que­rez que j'ai d'abord parlé de Ruby on Rails qui est un fra­me­work créé et sou­tenu par 37­si­gnals et que main­te­nant je vais faire le test d'ap­pli­ca­tion 37­si­gnals. Je tiens à le si­gna­ler, je ne tra­vaille pas pour 37­si­gnals. Et ils ne sont pas côté en bourse, donc je n'ai pas d'ac­tions de la boîte. Il se trouve que 37­si­gnals est en ce mo­ment au centre de cette mo­di­fi­ca­tions du web. Ils font beau­coup de bruit et leur web apps sont des suc­cés. Ils ont même écrit un livre fort in­té­res­sant sur la créa­tion d'ap­pli­ca­tions web  : Get­ting Real.

Enfin pour finir cette intro, je dois re­le­ver un dé­tails somme toute im­por­tant : ces 3 ap­pli­ca­tions sont en an­glais ex­clu­si­ve­ment et il sem­ble­rait que cela reste le cas pour un bon mo­ment. Mais c'est vrai­ment uti­li­sable par un fran­co­phone ayant un fran­glish moyen.

Votre petit site

Pour com­men­cer sur Back­pack il existe une ver­sion gra­tuite du lo­gi­ciel. Sa durée de va­li­dité est illi­mité, vous êtes sim­ple­ment li­mité dans son uti­li­sa­tion.

Une fois ins­crit vous aurez une adresse per­son­na­li­sée telle que celle-ci, qui est la mienne et qui ser­vira d'exemple : http://​nicolaspaton.​backpackit.​com. Sur cette page vous aurez un simple for­mu­laire d'au­then­ti­fi­ca­tion :

Une fois au­then­ti­fié, vous ac­cé­dez à votre page d'ac­ceuil :

Cette page est assez par­ti­cu­lière puisque c'est la page faite ex­près pour les nou­veaux venus. L'en­ca­dré jaune est une aide es­ca­mo­table. Je l'es­ca­mote et voilà :

Pour vous don­ner une meilleure idée de ce qu'est back­pack on va re­gar­der les trois on­glets en haut à gauche de la page :

Back­pack per­met donc de faire 3 choses :

• des Pages
• des Wri­te­boards (des ta­bleaux blancs...)
• des Re­min­ders (des Alarmes)

Al­lons-y étape par étape.

Les pages

Parmi les pages on a la Home Page, celle sur la­quelle on tombe lorsque l'on se connecte sur notre site.

En haut à droite nous avons un bou­ton :

Pas très com­pli­qué à com­prendre...

En des­sous, tou­jours dans la barre de droite, vous trou­ve­rez la liste de vos pages dont Home Page (la page cou­rante, elle est d'ailleurs sur­li­gnée), My Page (liste de toutes vos pages) et Exemple page (qui a été créé pour nous mon­trer ce qu'on peut faire avec back­pack, on va bien­tôt aller sur cette page).

Al­lons im­mé­dia­te­ment à l'a page d'exemple où nous trou­ve­rons da­van­tage de contenu :

Com­men­çons par le haut de la page :

Nous avous d'abord "Add tags" qui est un sys­tème de tags pour clas­ser nos pages. J'y re­viens.

Puis le titre de la page qu'il est pos­sible de mo­di­fier en cli­quant sur "Edit" qui ap­pa­raît au sur­vol de ce­lui-ci  :

En­suite nous avons une barre de bou­tons :

"Edit body" per­met d'édi­ter le corps de la page :

Les bou­tons sui­vants cor­res­pondent à tous les élé­ments que l'on peut in­sé­rer dans ces pages. Les bou­tons gri­sés sont des élé­ments qui se trouvent déjà sur la page. Si l'on clique des­sus on des­cend à cet élé­ment. Si l'on clique sur les bou­tons nor­maux, on va créer un nou­veau contenu de cet élé­ment.

Nous avons tout d'abord les listes.

Il est pos­sible de créer un nou­vel élé­ment dans cette liste en cli­quant sur "Add item" :

D'édi­ter ou de sup­pri­mer un élé­ment de la liste en le sur­vo­lant (comme le titre de la page) :

Lorsque une tâche de la liste n'est plus d'ac­tua­lité il suf­fit de la co­cher pour qu'elle soit re­lé­guée à la fin de la liste, gri­sée et co­chée :

Enfin on peut créer d'autres listes et ré­or­do­ner la liste.

Le pro­chain élé­ment de page est "Notes". Les notes sont comme le titre de la pre­mière note l'in­dique : des mor­ceaux de texte datés. Comme une en­trée de blog. On peut en mettre plein, y in­sé­rer des images, des liens, des ta­bleaux et l'on peut for­ma­ter le texte (gras, ita­lique, cou­leurs).

On peut édi­ter les notes comme les listes où le titre de la page, en les sur­vo­lant. On ob­tient ceci :

On va pas­ser sur les 2 sec­tions su­vantes en une fois ; "files" et "images" :

Vous l'au­rez com­pris on peut ai­sé­ment ra­jou­ter des fi­chiers et des images à nos pages. Il est pos­sible de mo­di­fier les titres de nos fi­chiers et les des­crip­tions de images.

En bas de page on a enfin 2 der­niers es­paces de conte­nus : les liens vers d'autres pages de son Back­pack et des liens vers des wri­te­boards. Nous re­vien­drons sur les Wri­te­boards :

Au final on a un champ de pos­si­bi­li­tés assez im­por­tant pour créer, ali­men­ter en in­for­ma­tion et or­ga­ni­ser nos pages. Mais là où ça de­vient in­té­res­sant, c'est avec le der­nier bou­ton de la barre en haut de la page : "Sha­ring". Si l'on clique des­sus un petit for­mu­laire ap­pa­raît en bas de la page :

On a deux pos­si­bi­li­tés :

• Une case à co­cher : pour rendre la page pu­blique ; tout in­ter­net, dont Google, peut alors y ac­cé­der => http://​nicolaspaton.​backpackit.​com/​pub/​563872
• Un champs de texte à rem­plir d'adresses email : pour au­tho­ri­ser cer­taines per­sonnes seule­ment à ac­cé­der et à mo­di­fier la page (ces per­sonnes de­vront avoir un compte Back­pack - même gra­tuit) => http://​nicolaspaton.​backpackit.​com/​page/​563872

La page pu­blique res­semble à ceci (avec de la pu­bli­cité à droite car j'ai pris un compte gra­tuit pour faire ce test)  :

On voit ci-des­sous avec qui on a par­tagé la page.

On a donc avec ce par­tage le moyen de créer une page web sans ef­forts mais aussi le moyen de col­la­bo­rer en ligne.

On a déjà vu ce genre de fonc­tion­na­li­tés. Par­mis les plus de Back­pack, on peut noter une in­ter­face ex­trê­ment claire, or­ga­ni­sée par type de contenu ; l'édi­tion de la page, en­tiè­re­ment ajaxi­sée, ne né­ces­site pas de mise à jour à chaque mo­di­fi­ca­tion de la page (ça pa­raît fu­tile mais en fait ça change beau­coup de choses) ; et la pos­si­bi­lité de pu­blier son tra­vail et col­la­bo­rer dans la créa­tion et la mo­di­fi­ca­tion de la page.

Une des der­nières fonc­tions des "Pages" est pour moi su­per­be­ment utile. Je tra­vaille beau­coup avec le email et j'ai ten­dance à m'en­voyer des fi­chiers ou des notes par le net.

En bas de chaque page on trouve un pied de page (éton­nant, non ?) :

Qui pré­sente cer­taines fonc­tions utiles dont un "Send email to this page". Cette adresse un peu bi­zarre (bi­zarre pour qu'un mal­in­ten­tionné ne puisse pas la de­vi­ner) per­met d'ali­men­ter en contenu la page. On peut ainsi :

• créer une note en met­tant dans le sujet de l'email "note: Titre de la note" et dans le corps du mes­sage, le corps de la note
• créer un élé­ment de liste à co­cher en met­tant dans le sujet de l'email "todo: Chose à faire", le corps du mes­sage n'étant pas utile
• créer une liste com­plète avec en sujet de email "todo" (sans :) et en corps une suc­ces­sion de lignes com­man­çant par * pour chaque nou­vel élé­ment de liste
• en­voyer des images en in­sé­rant des images (en ligne et pas en fi­chier at­ta­ché) dans ses emails sans se sou­cier du sujet du email
• en­voyer des fi­chiers vers la page en les at­ta­chant à un email.

C'est drô­le­ment pra­tique et ra­pide à mon goût !

Vous avez peut-être pu le lire dans le pied de page, c'est aussi là que l'on peut sup­pri­mer la page cou­rante, la sup­pri­mer de la liste des page dans la co­lonne de droite, que l'on peut la du­pli­quer et se l'en­voyer par email.

Enfin, der­nière fonc­tion très pra­tique pour or­ga­ni­ser ses pages : les tags. Quel site au­jour­d'hui ne pro­pose pas de tag­ger tout et à tout va... Ca peut néan­moins s'avé­rer pra­tique pour créer des groupes de pages par exemple. Les tags se trouvent en haut de chaque page.

On com­mence ainsi :

Puis on clique sur "Add tags" :

On a en­suite une liste de tags cli­quables :

Et enfin, si l'on clique sur un tag on a une liste de toutes les pages ayant le même tag :

Voilà pour les tags.

A noter qu'il est éga­le­ment pos­sible de mo­di­fier ces pages par l'in­ter­mé­diare de Quick­sil­ver, un wid­get et, éven­tuel­le­ment, par autre chose car 37­si­gnals pro­pose des API pour mo­di­fier ces pages.

Vous pou­vez donc voir que der­rière la sim­pli­cité de cette page se cache un at­ti­rail d'ou­tils, d'aides et de pos­si­bi­li­tés qui rendent ces "Pages" très pra­tiques si vous avez par exemple à or­ga­ni­ser un voyage, créer une liste de course, pré­pa­rer un éve­ne­ment, pu­blier ra­pi­de­ment quelque chose sur le net... et tout cela seul ou à plu­sieurs.

Mais re­gar­dons main­te­nant les 2 autres pos­si­bi­li­tés of­fertes par Back­pack :

Wri­te­boards

Wri­te­boards est un trai­te­ment de texte col­la­bo­ra­tif ver­sionné. C'est-à-dire qu'au fur et à me­sure des sau­ve­gardes du texte, on crée de nou­velles ver­sion de ce texte. On pourra en­suite re­ve­nir sur ces ver­sions et les com­pa­rer entre-elles. C'est quelque chose d'as­sez connu et qui se pra­tique, si cer­tains par­ti­cipent à Wi­ki­pé­dia par exemple, sur les wikis.

Voici une vue gé­né­rale d'un texte, somme toute très très court, que j'ai mo­di­fié une fois pour que vous puis­siez voir les ver­sions sur la droite de la page :

Je fais ra­pi­de­ment le tour de la page. Un lien en haut à gauche de la page per­met de re­ve­nir sur son es­pace per­son­nel. En des­sous, un bou­ton évident "Edit this page"? À sa droite "Ex­port" : on peut ex­por­ter au for­mat txt et html ; "Flag this ver­sion" : per­met de faire res­sor­tir la ver­sion cou­rante dans la liste des ver­sions ; et "send via email" : qui per­met... d'en­voyer le texte par email  !

Dans la co­lonne de droite on a d'abord "In­vite people to col­la­bo­rate" car l'on peut per­mettre à d'autres per­sonnes de tra­vailler sur notre texte avec nous. En des­sous on a nos ver­sions, avec la ver­sion cou­rante sur­li­gnée. On a en­suite deux pos­si­bi­li­tés de com­pa­rai­son : un lien ra­pide pour com­pa­rer les 2 der­nières ver­sions et un bou­ton pour com­pa­rer les ver­sions sé­lec­tion­nées.
Enfin sous notre Wri­te­board on a un petit lien "Add a com­ment" car l'on peut com­men­ter le wri­te­board. Les com­men­taires sont an­no­tés de la ver­sion à la­quelle ils ont été écrit.

Comme pour les notes de tout à l'heure, les Wri­te­boards ac­ceptent une mise en forme ba­sique.

Voici enfin à quoi res­semble la com­pa­rai­son de 2 ver­sions :

Re­min­ders

Les re­min­ders sont des rap­pels d'évé­ne­ments ho­ro­da­tés. Ils peuvent vous en­voyer un email ou un SMS pour vous pré­ve­nir d'un évè­ne­ment dont vous sou­hai­te­riez vous sou­ve­nir. Vous pou­vez voir vos "Re­min­ders" en ligne bien sûr mais aussi en vous abon­nant à un flux ical (grâce à iCal ou Mo­zilla Sun­bird entre autres).

Voici la liste des op­tions de temps pour les "re­min­ders" :

Plu­tôt simple. Mais si vous avez be­soin de plus pré­cis ou d'un rap­pel ré­cur­rent vous pou­vez choi­sir l'op­tion "At a spe­ci­fic time" :

Je n'ai pas testé la ré­cep­tion de SMS comme rap­pel puisque Bouygues ne fi­gure pas dans la liste des opé­ra­teurs sup­por­tés. SFR ne semble pas là non plus bien qu'il y ait plein de Vo­da­phones d'ailleurs. En re­vanche Orange semble sup­porté, à voir.

Conclu­sion

La confi­gu­ra­tion de l'adresse email et du nu­méro de té­lé­phone se fait dans "Set­tings" en haut à droite de chaque page. Sur cette page on peut aussi choi­sir son fu­seau ho­raire et la cou­leur gé­né­rale de son site. Rien de plus.

Vous l'au­rez peut-être re­mar­qué, Back­pack brille non pas par un mul­ti­pli­ca­tion de ses fonc­tions mais par des fonc­tions simples et es­sen­tielles avec re­la­ti­ve­ment peu d'op­tions pour li­mi­ter les choix de l'uti­li­sa­teur. C'est une pra­tique assez connue des mac users. 37­si­gnals re­prend cette concep­tion de pro­gram­ma­tion et l'ap­plique à ce nou­veau do­maine des we­bapps. Ils ap­pellent ça "Less soft­ware". Fai­sons moins, mais fai­sons mieux, plus es­sen­tiel. Ne plus faire 30 000 fonc­tions in­utiles qui rendent les in­ter­faces et les uti­li­sa­tions de cer­tains lo­gi­ciels dif­fi­ciles.

Alors par­fois on sou­hai­te­rais bien avoir telle ou telle pe­tite fonc­tion en plus. Mais sou­vent elle n'est pas fran­che­ment très utile ou suf­fi­sa­ment viable pour être in­té­grée à un tel lo­gi­ciel et au­tant s'y faire tout de suite. Sou­vent on peut faire au­tre­ment, par­fois d'une ma­nière moins "in­té­grée" mais sans fra­che­ment perdre de temps  !

Enfin ve­nons-en au der­nier point, le prix. C'est un lo­gi­ciel en ligne et le mode de fac­tu­ra­tion est l'abon­ne­ment. Évi­dem­ment, même si les prix ne sont pas énormes, ces temps-ci on est plus trop ha­bi­tué à payer grand-chose avec Google qui re­fille tout gra­tui­te­ment. Mais quand ça nous plaît, quand on en a be­soin, on se fait assez bien au prix à payer. Voici le ta­bleaux des prix :

Au cours du 07/05/2006 :

Per­son­nel­le­ment, j'uti­lise Back­pack sur mes début de pro­jets (ou sur mes petit pro­jets en­tiers), pour conser­ver toutes les in­for­ma­tions quand j'or­ga­nise un voyage ou un évé­ne­ment, quand je veux mettre un fi­chier en ligne im­mé­dia­te­ment...

Une liste des uti­li­sa­tions pos­sible de Back­pack est longue. J'ai d'ailleurs dé­cou­vert en fai­sant cet ar­ticle une page d'exemples d'uti­li­sa­tions de Back­pack et il y a beau­coup d'exemples. C'est un lo­gi­ciel à uti­li­ser pour com­prendre à quoi il peut per­son­nel­le­ment nous ser­vir (ou non...) C'est un lo­gi­ciel qui ne va pas créer un be­soin ou ré­pondre à des be­soins très pré­cis mais il règle des pro­blèmes dont on n'avait pas idée com­ment les ré­gler fa­ci­le­ment au­pa­ravent. À es­sayer.