Je passe un dimanche très calme, ce qui est une bonne chose car cela me permet de me reposer un peu avant de me perdre corps et âme dans mon travail dès lundi...

Au fait, mon journal change d'adresse : http://pyogazel.free.fr/ ... Pensez à refaire vos signets!

Il neigé un peu aujourd'hui, pas assez pour qu'il en subsiste quelque chose sur le bitume, mais ma fille a adoré essayer d'attraper les flocons qui virevoltaient devant sa fenêtre. Un peu de plaisir dans ce monde de brutes.

Il fait encore froid. Plus froid que ce à quoi nous sommes habitués ici, dans le midi, et du coup je me uis rappelés quelques ouvrages en cours qui avaient vocation à réchauffer ma petite famille, et qui au lieu de cela accumule la poussière dans mes tiroirs.

J'ai pas mal d'ouvrages inachevés dans mes tiroirs et en fait j'aimerais bien moi aussi avoir des barres "ouvrages en cours" comme beaucoups de crocheteuses. mais...

Laquelle choisir...

1 - En Flash

Réversible :

Veste torsadée :

Suite:

Voilà ce qu'explique Anna, du site hélas défunt Annaknits (merci à Andrea d'avoir retrouvé la page d'origine) :

“Il se pourrait que vous lui trouviez un usage tout à fait différent, mais je l'utilise pour montrer lepourcentage d'achèvement d'un projet. Il n'y a que deux variables à fixer, et on peut facilement l'intégrer dans un code plus complexe, comme je l'ai fait, et le mettre à jour manuellement très facilement.Vous pouvez définir le pourcentage et la couleur que vous voulez. Pour le mettre dans votre site :

~ Premièrement, téléchargez le fichier flash (bouton droit "enregistrer la cible en tant que ..." ) copiez le sur votre serveur. Notez où vous l'avez mis!

~ Collez ce code là ou vous voulez que la barre apparaisse:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="102" height="17">
<param name="movie" value="(path)/percentbar.swf?percentage=100&colorout=25BFE0">
<param name="quality" value="high">
<embed src="(path)/percentbar.swf?percentage=100&colorout=25BFE0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="102" height="17"></embed>
</object>

~ Editez les parties en rouge, modifiez “100” pour obtenir ce que vous voulez afficher comme pourcentage, modifiez "25BFE0" et mettez à la place le code hexadecimal de la couleur de votre choix, si vous n'avez pas mis le fichier flash à la racine de votre site, remplacez "(path)" par le chemin du fichier .swf , s'il est à la racine de votre site, laissez tomber le "(path)".

~ c'est fini!”

Quant à moi, j'ai uploaded mon fichier flash program sur un site gratuit d'hébergement d'images, www.photobucket.com, comme s'il s'agissait d'une photo, il est ensuite aisé de trouver l'adresse du fichier .swf. Pour ce qui est du code html, je l'ai réduit à ceci:

<object>
<embed src="(path)/percentbar.swf?percentage=(pourcentage de travail fait)&colorout=(code hexadecimal de la couleur)" quality="high" type="application/x-shockwave-flash" width="(largeur totale de la barre, i.e. 150 si cela doit être 150px)" height="(hauteur totale de la barre)"></embed>
</object>

l'aspect final de la barre, mais tout le monde ne lit pas le flash, IE à même tendance à bloquer les animations flash pour "protéger" l'internaute. Je crains que cela ne rende mon journal moins lisible...

2 - Tableau et cellules

Réversible :
100%
Veste torsadée :
	12%

voici le code:

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" ><strong><em>Réversible :</em></strong></td>
</tr>
<tr>
<td colspan="2" width="100%" height="30px" bgcolor="#FFCCCC"><div align="center"><strong>100%</strong></div></td>
</tr>
<tr>
<td colspan="2"><strong><em>Veste torsadée :</em></strong></td>
</tr>
<tr>
<td bgcolor="#FFCCCC" width="12%" height="30px">&nbsp;</td><td bgcolor="#FFFFFF" width="88%"><div align="center"><strong>12%</strong></div></td>
</tr>
</table>

La barre est en fait une ligne d'un tableau et se compose de deux cellules. l'une est "pleine" i.e. dotée d'un fond (background) coloré, la largeur de cette cellule correspond au pourcentage de travail fait. l'autre cellule est "vide" soit dotée d'un fond blanc (ou absent si votre site est color&eacute, sa largeur correspond à ce qui reste pour atteindre 100%. Si l'ouvrage est terminé à 100% alors il n'y aura qu'une seulle cellule avec un attribut "colspan" de 2 (une cellule qui en remplace 2).

Ici vous pourrez trouver une explication détaillée par Noricum. C'est en anglais, mais c'est très bien expliqué. J'ajouterais simplement que si vous voulez faire apparaitre les bords de la barre mais pas les bords du de la cellule qui indique le nom de l'ouvrage, il faudra recourir aux tableaux imbriqués, la barre étant alors un tableau aux bords visibles dans la deuxième ligne d'un tableau aux bords invisibles, comme ceci :

Réversible :

100%

Veste torsadée :

12%

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong><em>Réversible :</em></strong></td>
</tr>
<tr>
  <table width="152" border="1" cellspacing="0" cellpadding="0"
   bordercolor="pink">
  <tr>
  <td width="100%" height="30px" bgcolor="#FFCCCC"
  align="center"><strong>100%</strong></td>
  </tr>
  </table>
</tr>
<tr>
<td><strong><em>Veste torsadée :</em></strong></td>
</tr>
<tr>
  <table width="152" border="1" cellspacing="0"
  cellpadding="0" bordercolor="pink">
  <tr>
  <td width="12%" height="30px" bgcolor="#FFCCCC"
  align="center">&nbsp;</td>
  <td width="88%" height="30px" bgcolor="#FFFFFF"
  align="center"><strong>12%</strong></td>
  </tr>
  </table>
</tr>
</table>

Il faudra alors penser à prendre en compte la largeur de la bordure dans la largeur totale de la barre.

C'est un tableau assez facile à mettre en place, mais il reste long à écrire, et en fait, pas si joli que ça...

3 - Feuilles de style en cascade

Voici le lien vers la page de Knitticisms qui explique tout cela.

En fait, il s'agit tout simplement d'une image de 1px de large que l'on étire à la largeur requise (correspondant au pourcentage de travail achevé, en utilisant l'attibut "width" de l'image) dans le code html, à l'intérieur d'une division dont les dimensions et l'aspect (une barre vide en fait) sont définis dans la feuille de style.
Simple mais génial.

Mon interprétation de cette idée est légèrement différente, mais le rendu est similaire. J'ai choisi de créer deux classes, l'une qui définit la barre vide (bar) , l'autre définit la couleur de remplissage de l'intérieur de la barre, celle qui montre le pourcentage de travail achevé (progress).

Dans le code html de la page, à l'endroit ou doit se trouver la barre, il suffit de créer deux divisions imbriquées l'une dans l'autre (division de classe "progress" imbriquée dans la division de classe "bar" ), et d'attribuer à la deuxième une largeur fixe, correspondant au pourcentage de travail achevé...

Réversible :

Veste torsadée :

Voici ce que donne la feuille de style ( à mettre dans la partie "head" de la page) :

<style>
.bar { height: 10px;
width: 200px;
border: 1px pink solid;
background-color: #ffffff;}
.progres { height: 10px;
background-color: #ffccff;}
</style>

voici ce que donne le code html de la barre, X est le pourcentage de travail achevé:

<strong><em>nom de l'ouvrage:</em></strong>
<div class="bar">
<div class="progress" style="width: Xpx" align="center">
<strong>X%</strong>
</div>
</div>

Moins de code à écrire ici, mais le résultat reste trop peu... mignon. Pour le moment c'est ce que j'ai choisi dans ma marge (voir "mes listes" à droite) avec en plus une couleur pour chaque niveau d'avancement, c'est aussi facile à faire dans la feuille de style :

châle russe

cardigan torsadé

robe granny

pull granny

petit haut bleu

Le code : <style>
.bar { height: 10px; width: 102px; border: 1px pink solid; background-color: #ffffff;}
.progress0 { height: 10px; background-color: rgb(255,210,230);}
.progress1 { height: 10px; background-color: rgb(255,190,220);}
.progress2 { height: 10px; background-color: rgb(255,170,210);}
.progress3 { height: 10px; background-color: rgb(255,150,200);}
.progress4 { height: 10px; background-color: rgb(255,130,190);}
.progress5 { height: 10px; background-color: rgb(255,110,180);}
</style>

<h4>châle russe</h4>
<div class="bar">
<div class="progress0" style="width: 0px" align="center"><strong>0%</strong></div>
</div>
<br>
<h4>cardigan torsadé</h4>
<div class="bar">
<div class="progress0" style="width: 12px" align="center"><strong>12%</strong></div>
</div>
<br>
<h4>robe granny</h4>
<div class="bar">
<div class="progress0" style="width: 1px" align="center"><strong>1%</strong></div>
</div>
<br>
<h4>pull granny</h4>
<div class="bar">
<div class="progress2" style="width: 42px" align="center"><strong>42%</strong></div>
</div>
<br>
<h4><a href="http://pyogazel.free.fr/index.php?title=petit_haut_bleu&more=1">petit haut bleu</a></h4>
<div class="bar">
<div class="progress2" style="width: 45px" align="center"><strong>45%</strong></div>
</div>
<br>
<h4> </h4>
<div class="bar">
<div class="progress4" style="width: 98px" align="center"> <strong>98%</strong> </div>
</div>
<br>
<h4> </h4>
<div class="bar">
<div class="progress4" style="width: 99px" align="center"> <strong>99%</strong> </div>
</div>
<br>

les images

C'est sur le blog de Mc Crochets.que j'ai trouvé cette idée géniale. Il suffit de créer et de nommer judicieusement (pour faciliter ensuite le codage) une série d'images, chacune représentant un pourcentage d'avancement du progrès, disons que si on doit montrer l'avancement de 5% en 5%, il faudra créer 20 images. Il ne reste plus qu'à les uploader et à insérer l'adresse de l'image là ou la barre doit être, en changeant le nom de l'image dans le code source au fur et à mesure que l'ouvrage progresse. Ainsi <img src="(path)/75pourcent.gif"> deviendrait <img src="(path)/80pourrcent.gif">

Et même, en poussant l'idée, on pourrait explorer d'autres possibilités que la "barre"...
un essai personnel :

Réversible :
100%

Veste torsadée :
12%

j'ai déjà les coeurs, cela irait donc très bien avec le thème graphique de mon journal :

• un gros coeur = 10%
• un moyen = 5%
• un petit < 5%

Je trouve le résultat très mignon... mais pas assez.

Enfin, mesdames et messieurs, compagnons accros aux pelotes, laissez moi vous présenter ...

5 - Indigirl's handy dandy progress tracker

Je pense que c'est la barre idéale, mignone et tout... mais il me faudrait dessiner mes propres images pour avoir quelque chose de plus personnel... En tous les cas ce tracker est super...

http://www.indigirl.com/knit_tracker/

mais j'aidu mal à l'utiliser... Ceci n'est qu'une image de ce que je voudrais...

Et vous... Qu'est-ce qui vous plairait?