Breizhogeek, le blog qu'il sent bon la bretagne

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

Catégories

mercredi 9 juin 2010


Google présente Caffeine

En effet, le 6 juin, Goo­gle a pré­senté sur son blog un nou­veau sys­tème d’indexa­tion et pro­met des résul­tats 50% plus “frais”. C’est direc­te­ment lié à l’indexa­tion en temps réel dont on a tant parlé il y a peu : dès qu’un post sur un blog, un forum ou encore twit­ter est créé, vous pou­vez le trou­ver sur Goo­gle.

Goo­gle expli­que le choix de créer un nou­veau moteur par la crois­sance du web et de ses médias : cha­que page devient plus com­plexe, plus riche en médias: video, audio, don­nées en temps réel (ex: récu­pé­ra­tion de flux rss/atom via ajax), etc… L’accès à une infor­ma­tion ou don­née doit donc se faire aisé­ment et rapi­de­ment, selon divers axes. Ils résu­ment cette idée par un schéma ma fois rigolo et sim­ple :


L’ancien sys­tème com­por­tait en réa­lité dif­fé­ren­tes cou­ches et ces dif­fé­ren­tes cou­ches étaient mises à jour indé­pen­dam­ment de cha­cune et à des inter­val­les dif­fé­rents. Ainsi la cou­che prin­ci­pale néces­si­tait de repar­cou­rir tout le web pour en recons­truire l’index, ce qui avait pour résul­tat d’avoir une mise à jour “uni­que­ment” tou­tes les deux semai­nes.

Avec Caf­feine, Goo­gle ana­lyse le web par por­tions et cha­que nou­vel élé­ment est ajouté ainsi direc­te­ment à l’index. Cela per­met un par­cours de cen­tai­nes de mil­liers de pages à la seconde. Cette ana­lyse gigan­tes­que est réper­to­riée sous la forme d’une base de don­nées non moins gigan­tes­que de 100 000 Tera­by­tes. En effet par jour ce sont des cen­tai­nes de Tera­by­tes qui sont ajou­tés à cette base !

Par ce nou­veau moteur, Goo­gle voit loin : il décrit Caf­feine comme un moteur puis­sant mais éga­le­ment robuste, capa­ble de s’adap­ter à la quan­tité gran­dis­sante d’infor­ma­tions et exten­si­ble pour accep­ter un encore meilleur sys­tème de recher­che.

samedi 24 avril 2010


Repenser les forums web

Cet arti­cle pro­pose une courte réflexion sur les forums web et leur uti­li­sa­tion et ques­tionne les outils asso­ciés aux prin­ci­paux moteurs de ces der­niers (phpBB, fire­board, punBB, etc.).

captureforum.png

L’uti­li­sa­tion des labels

Cha­cun a déjà surfé sur des forums – ou fora pour les puris­tes réfrac­tai­res à la réforme de 1990 – ou en uti­lise même régu­liè­re­ment. Cha­cun s’est donc au moins une fois retrouvé devant le dilemme sui­vant : dans quelle caté­go­rie pos­ter ou cher­cher un sujet ? Ex: j’ai une ques­tion assez pré­cise qui tou­che à la fois au gra­phisme et au design web et à la pro­gram­ma­tion. Pla­cer cette ques­tion dans l’une ou dans l’autre des caté­go­ries “Pro­gram­ma­tion”, “Gra­phisme”, “Web” est assez déli­cat car aucune n’est réel­le­ment adap­tée en soi à ma ques­tion : celle-ci relève d’une com­bi­nai­son des trois caté­go­ries.

L’idée ici est donc de sor­tir les forums de leur archi­tec­ture habi­tuelle (je pense à PhpBB, PunBB, etc.) et de per­met­tre une uti­li­sa­tion/clas­si­fi­ca­tion sur plu­sieurs niveaux, notam­ment via des labels asso­ciés aux sujets et créant un lien entre un sujet et une ou plu­sieurs thé­ma­ti­ques. Cepen­dant, s’il est impor­tant qu’un sujet puisse appar­te­nir à plu­sieurs thé­ma­ti­ques, il est pro­ba­ble­ment inté­res­sant de le rat­ta­cher obli­ga­toi­re­ment à un label plus ou moins géné­ral : on erre par­fois dans les forums sans cher­cher. Cer­tains labels sont donc plus géné­raux que d’autres et donc plus impor­tants. On affecte alors à cha­que éti­quette (ou tag ou label) un ordre d’impor­tance. La nuance ici entre une éti­quette de pre­mier niveau et une caté­go­rie (dans le sens actuel) est que le sujet peut très bien appar­te­nir à plu­sieurs labels de pre­mier niveau.

La co-rédac­tion

Un autre élé­ment man­quant par­fois aux forums en géné­ral c’est qu’il n’existe pas la pos­si­bi­lité de co-rédi­ger un sujet. Ima­geons : 2 ou plus mem­bres d’un même forum se con­nais­sent mutuel­le­ment et ont en com­mun un pro­jet. Ils sou­hai­tent pré­sen­ter le dit pro­jet à la com­mu­nauté. Le blo­cage actuel est qu’ils doi­vent soit créer un nou­veau compte uti­li­sa­teur qui les englo­bera tous, soit le sujet doit être créé par un seul d’entre eux et ,ne béné­fi­cient alors pas d’outils comme “m’aver­tir lors­que quelqu’un répond à mon topic” et ne peut pas non plus modi­fier le post en cas de besoin ou encore repren­dre les rênes car l’auteur ini­tial a démis­sioné, est porté dis­paru etc.. Notre forum devra donc per­met­tre qu’un sujet soit en fait la pro­priété de plu­sieurs auteurs.

Je ne suis pas trop fami­lier avec cette repré­sen­ta­tion mais cer­tains sem­blent l’appré­cier, j’ai donc essayé de vous pré­sen­ter un schéma MCD d’un forum web tout sim­ple (on peut faci­le­ment ima­gi­ner des champs plus nom­breux, plus pré­cis ou encore des asso­cia­tions plus opti­mi­sées).

MCD du Forum Le MCD a été conçu via MySQL Work­bench.

La com­mu­ni­ca­tion

Si nous n’avons pas plus besoin main­te­nant de pos­ter plus rapi­de­ment sur un forum que pré­cé­dem­ment (ce n’est pas une pla­te­forme de mes­sa­ge­rie ins­tan­ta­née après tout), nous pou­vons être inté­res­sés par le fait d’être plus rapi­de­ment au cou­rant d’une réponse à un sujet donné. Le forum doit donc pou­voir noti­fier l’uti­li­sa­teur de manière quasi-ins­tan­ta­née en cas de nou­vel­les répon­ses ou lors d’un évè­ne­ment pré-enre­gis­tré par l’uti­li­sa­teur (ex: ajout d’un sujet ayant pour tag “typo”. La solu­tion la plus sim­ple est pro­ba­ble­ment d’uti­li­ser une con­ver­sa­tion via le pro­to­cole xmpp : cela per­met de tou­cher les gens via Jab­ber, GTalk, etc..

Don­nées et archi­vage

Le but ici est de faci­li­ter l’accès et la lec­ture aux uti­li­sa­teurs. Faci­li­ter l’accès c’est notam­ment évi­ter à l’uti­li­sa­teur de répé­ter inces­sa­ment les mêmes infor­ma­tions. Par exem­ple lors de l’ins­crip­tion, la mise en place de la tech­no­lo­gie Ope­nID per­met­trait de récu­pé­rer les infor­ma­tions sou­hai­tées depuis son compte direc­te­ment. Il fau­dra éga­le­ment per­met­tre la modi­fi­ca­tion de ces valeurs une fois enre­gis­tré en pro­po­sant de récu­pé­rer à nou­veau les infor­ma­tions depuis le four­nis­seur d’iden­tité.

La lec­ture, hor­mis à tra­vers l’ergo­no­mie du forum lui-même, c’est de con­si­dé­rer le forum comme une large base de con­ver­sa­tions multi-uti­li­sa­teurs. Or ces con­ver­sa­tions sont sou­vent orien­tées pra­ti­que : demande d’un con­seil, d’aide, d’une astuce. On peut ainsi sou­hai­ter archi­ver ces con­ver­sa­tions pour soit gar­der une trace de ce qu’on a dit ou ce que les autres ont dit, à la manière d’un client de mes­sa­ge­rie ins­tan­ta­née en fait, soit pour pou­voir accé­der n’importe quand et depuis n’importe où (ex: sans con­nexion inter­net) au con­seil ou à l’astuce dis­cu­tée. Il est alors impor­tant de pro­po­ser un archi­vage des sujets dans un for­mat ouvert ; reste à choi­sir lequel : un sim­ple fichier PDF ? Per­son­nel­le­ment je pen­che­rais pour un for­mat déjà exis­tant et dédié à la dis­cu­tion : Mbox, un for­mat ouvert de sto­ckage d’emails et faci­le­ment con­ver­ti­ble.

Pro­cé­dure de dif­fu­sion d’un hypo­thé­ti­que moteur de forum

Afin de per­met­tre une plus large dif­fu­sion de ce moteur de forum, il faut tou­cher à la fois les uti­li­sa­teurs bien sûr (via les fonc­tion­na­li­tés décri­tes plus haut) mais éga­le­ment les déve­lop­peurs et web­de­si­gners.
Ce qui est gênant et frus­trant avec la plu­part des moteurs actuels de forums web c’est qu’il est peu aisé de créer une inter­face belle et ergo­no­mi­que : on est sou­vent limité. L’idéal pour le web­de­si­gner serait de pou­voir créer inté­gra­le­ment l’inter­face du forum en y pla­çant à sa guise les élé­ments le com­po­sant, via un lan­gage de tem­plate sim­ple, comme celui de SPIP : à par­tir de bali­ses et de bou­cles pré­sen­tes dans un sim­ple fichier HTML (donc déjà connu du web­de­si­gner).

Dans le même style – per­met­tre aux non-pro­gram­meurs de para­mé­trer le forum comme ils l’enten­dent – l’uti­li­sa­tion de fichiers PO faci­lite la tâche aux éven­tuels tra­duc­teurs : le for­mat est connu et exploi­ta­ble par de nom­breux logi­ciels. La pla­te­forme de forum gagne alors en acces­si­bi­lité lin­guis­ti­que.

lundi 12 avril 2010


CS5 : les nouveautés principales

Après avoir vu la pré­sen­ta­tion de cet après-midi, voici ce qui me parait essen­tiel :

Adobe Pho­to­shop

  • une sélec­tion rapide et sim­pli­fiée (reprend quel­ques fonc­tion­na­li­tés pré­cé­den­tes comme le fil­tre “extraire” mais l’inter­face en est sim­pli­fiée)
  • de nou­veaux pin­ceaux, plus réa­lis­tes, mimant les pin­ceaux réels et tan­gi­bles
  • amé­lio­ra­tion des per­for­man­ces via le sup­port du 64bits, amé­lioré
  • une amé­lio­ra­tion de la réduc­tion du bruit notam­ment via Camera RAW. Les pho­tos sui­van­tes sont peu repré­sen­ta­ti­ves (en réa­lité il n’y a aucune perte de qua­lité dans la démo), je vous prie­rai de me croire sur parole… Donc, avant/après :

reduction bruit photoshop CS5 avant réduction bruit dans PS CS5

  • une défor­ma­tion de l’image, enfin ! moi qui me plai­gnait tout le temps de ce man­que, je n’en atten­dais pas tant ! C’est tout sim­ple­ment fou :p !photoshop.pngphotoshop2.png
  • Bon comme prévu, la tech­no­lo­gie patch & match, dont je ne repar­le­rai pas ici.

Adobe Pre­miere et Adobe After Effects

  • Le moteur video “Mer­cury” : les deux logi­ciels sont main­te­nant nati­ve­ment en 64bits, ce qui aug­mente gran­de­ment les per­for­man­ces (notam­ment via le fait que l’uti­li­sa­tion de toute la RAM est pos­si­ble désor­mais)
  • Grâce à ces per­for­man­ces, la roto­sco­pie a été gran­de­ment amé­lio­rée sur After Effects : il suf­fit de créer très très gros­siè­re­ment un mas­que au pin­ceau pour qu’un plan soit détecté via l’outil “Roto brush”. Sur les pho­tos sui­van­tes on peut remar­quer que le col n’est du vête­ment n’est pas détecté, cepen­dant avec un mas­que un tout petit peu plus pré­cis (le trait vert visi­ble sur la cap­ture cor­res­pond en effet à la tota­lité du mas­que !), il le serait (voir la vidéo de pré­sen­ta­tion sur Adobe TV pour plus d’infos) :

ae1.pngae2.png

Adobe Flash CS5

  • La pos­si­bi­lité de créer une appli­ca­tion iPhone même si Apple les refuse désor­mais sur l’apps­tore
  • l’export pos­si­ble vers html5 et l’élé­ment can­vas ! Enfin Adobe com­prend la néces­sité de pro­po­ser un export adapté, tout en gar­dant l’IDE

Adobe Illus­tra­tor

  • Le des­sin en pers­pec­tive

illustrator1.png illustrator2.png illustrator3.png

Adobe InDe­sign

  • On peut désor­mais créer dans un même docu­ment plu­sieurs pages de for­mats dif­fé­rents
  • L’édi­tion et la sélec­tion sont main­te­nant sim­pli­fiésid_edit.png
  • Un texte peut être divisé en plu­sieurs colon­nes indesign_columns.jpg

InDe­sign CS5 per­met éga­le­ment d’expor­ter vers des for­mats d’ebooks tel EPUB, ou encore de met­tre en place une inte­rac­tion avec Flash (sans com­men­taire) ; je lais­se­rai donc aux inté­res­sés le choix d’aller voir d’eux-même la chose…

La tota­lité des nou­vel­les fonc­tion­na­li­tés sont d’ailleurs décri­tes sur les pages des pro­duits sur http://adobe.com/pro­ducts.

mercredi 31 mars 2010


Concours : War Graf 2010

Cette arti­cle inau­gure en quel­que sorte un nou­veau tag : “con­cours”. Je vous ferai donc par­fois part de con­cours déjà lan­cés ou qui appa­rai­tront bien­tôt, axés sur le gra­phisme.

war graf 2010

Je vous pré­sente donc War Graf 2010 (http://www.war-graf.com/con­cours-war-graf), qui vous per­met­tra de gagner (pour la par­tie “Affi­ches” et non “Vidéos”) :

  • pour les étu­diants en gra­phisme : un écran LCD NEC Dis­play Solu­tions (valeur :1 265€)
  • pour les ama­teurs : un écran LCD NEC Dis­play Solu­tions (valeur : 877€)

Si vous êtes inté­res­sés, vous avez donc jusqu’au 31 mai 2010 pour par­ti­ci­per (cli­quez sur l’image pour sui­vre le lien) !

lundi 29 mars 2010


Images pour le web: compression et utilisation

Si pour l’impres­sion le poids des fichiers n’est pas impor­tant, pour le web c’est une des con­di­tions d’acces­si­bi­lité d’une page. Donc si on peut gra­piller quel­ques octets (ou plu­tôt Kilo octets) sur une image voire un lot d’ima­ges, autant le faire. Il y a alors 3 points inté­res­sants à étu­dier:

  • l’opti­mi­sa­tion des ima­ges elle-mêmes
  • l’uti­li­sa­tion de spri­tes CSS
  • l’inté­gra­tion des ima­ges direc­te­ment dans le CSS

Opti­mi­sa­tion des ima­ges Gif et PNG

Il est en effet pos­si­ble pour la plu­part des ima­ges de type PNG ou même GIF d’opti­mi­ser leur poids : ces ima­ges, même expor­tées depuis Pho­to­shop ou Illus­tra­tor/Inks­cape, com­por­tent des don­nées qui ne sont pas for­cé­ment néces­sai­res pour une uti­li­sa­tion web, nous allons donc les sup­pri­mer[1]. Pour cela, il existe plu­sieurs logi­ciels, dont je me pro­pose de faire la com­pa­rai­son dans cet arti­cle. Tout d’abord, pour que vous com­pre­niez bien que cette opti­mi­sa­tion se fait sans perte de qua­lité, un petit aperçu :
homer_non_optimisehomer__optimise

L’image de gau­che n’est pas opti­mi­sée : elle pèse 12,9Ko. Celle de droite est opti­mi­sée : elle pèse 8,12Ko.

La ques­tion est main­te­nant de savoir quel logi­ciel choi­sir. J’ai choisi d’opter pour une com­pa­rai­son entre 4 logi­ciels, qu’ils exis­tent pour Win­dows, Linux ou les 2).

Pro­grammeRésul­tatWin­dowsLinux/UnixInter­face gra­phi­que
PngOp­ti­mi­zer8.12KioOUINONOUI
Png­Crush8.2KioOUIOUINON
PngOUT11.6KioOUIOUIpour win­dows uni­que­ment + payant
Advan­ce­COMP (AdvPng)8.1KioOUIOUI (à com­pi­ler)NON


J’ai éga­le­ment testé OptiPNG, puis­sant, mais qui modi­fiait l’image et son cal­que alpha (sous IE6 la trans­pa­rence est donc OK mais la cou­che était mal adap­tée), même en com­pres­sion mini­mum, je n’en parle donc pas ici.


Opti­mi­sa­tion des requê­tes et du poids des ima­ges

Nous allons dans un pre­mier temps voir com­ment inté­grer direc­te­ment nos ima­ges dans un fichier CSS pour éco­no­mi­ser quel­ques octets sur les requê­tes HTTP puis com­ment réduire encore le poids et le nom­bre de requê­tes.

L’attri­but INLINE de la pro­priété back­ground en CSS

Il existe en effet une pro­priété CSS per­met­tant d’inté­grer une image direc­te­ment dans le CSS, sous sa forme en base64. Ex:

back­ground: url(data:image/png;base64,<la_string_en_base_64>) ;

Exem­ple (pour ceux qui ont un navi­ga­teur récent vous devriez voir une her­mine orange comme dans le menu à droite de ce blog):

Vous pou­vez notam­ment tes­ter ceci rapi­de­ment en obte­nant la base 64 de votre fichier depuis : Base64 - deco­der/enco­der.

Il vous fau­dra donc un navi­ga­teur récent, notam­ment la ver­sion 8 de IE pour les mal­heu­reux uti­li­sa­teurs de ce der­nier.

L’uti­li­sa­tion des spri­tes

Un sprite con­si­tue en fait à réu­nir plu­sieurs ima­ges en une seule et à accé­der à la par­tie que l’on sou­haite en en défi­nis­sant les coor­don­nées. Cela per­met de gagner quel­ques octets: dans cha­que image, cer­tains infor­ma­tions sont répé­tées comme par exem­ple les tables de cou­leur. En créant une seule image, il n’y a plus qu’une table de cou­leur. Il s’agit en fait ici d’avoir une seule image com­po­sée de plu­sieurs autres auquel­les nous accè­de­rons via leurs coor­don­nées grâce à CSS. Pour ceux qui sou­hai­tent en savoir plus, Pom­page.net vous con­ten­tera sûre­ment : http://www.pom­page.net/pompe/spri­tes/.

Pour effec­tuer ces spri­tes aisé­ment, cer­tains sites vous pro­po­sent leurs ser­vi­ces, tel CSS-Sprit qui via Js vous déli­vrera le code CSS et l’image com­po­sée ! Je m’en suis d’ailleurs servi pour vous mon­trer com­ment l’accès à cha­que par­tie de l’image se fait à tra­vers la pro­priété back­ground-posi­tion :
Sprite CSS Bien sûr encore une fois ça se limite aux navi­ga­teurs sachant inter­pré­ter la dite pro­priété CSS, le pro­blème est et sera tou­jours le même ;) .

Notes

[1] Pour ceux que ça inté­resse, plus d’infor­ma­tions sont dis­po­ni­bles ici (en anglais) : http://optipng.sour­ce­forge.net/png­tech/optipng.html

- page 1 de 10