La parution en ligne offre de nombreux avantages sur la presse papier : l’espace y coûte beaucoup moins cher, chaque article peut être enrichi de liens complémentaires ou contradictoires internes ou externes, l’utilisation de tags permet au visiteur de naviguer aisément par thème dans les archives, enfin, les lecteurs peuvent souvent écrire des commentaires. Même si ces derniers ne sont pas toujours dignes d’intérêts, on y trouve parfois des pépites.

Si les arguments évoqués dans ce paragraphe sont tous censé, ils souffrent d’une contre argumentation qui n’est pas négligeable.
Non l’espace n’y est pas forcément moins cher il faudrait pour comparer justement, réintégrer à tout cela outre le coût des infrastructure, le coût des matériels nécessaires pour accéder à l’information ainsi que leur coût d’entretien, sans compter les éventuelles formations… bon là je pinaille un peu. Mais ce discours je l’ai tellement entendu dans la SSII ou je bossais, que je ne peux pas en voir les failles. Disons pour mettre tout le monde d’accord que le coût de publication est moindre.

En ce qui concerne les tags mon avis est plus mitigé, la taxonomie est un art que je maîtrise assez mal, les idées sont déjà difficile à exprimer de manière à ce qu’elle soient comprises par tout le monde, alors résumé une idée de portée générale, avec un mot de portée général est un exercice dans lequel je m’abîme, et à en voir les nuages de tags plutôt brouillons de certains blogs je ne dois pas être le seul. De plus je n’en vois l’intérêt qu’en cas de non linéarité de lecture, c’est à dire dans le cas d’un blog à la ligne éditoriale assez flou.
En fin de compte j’avoue personnellement ne jamais m’en servir. Cependant force m’est de reconnaître, que ce peut être un plus, quand il s’agit de butiner d’une idée à l’autre.

Les commentaires, j’en conviens, sont un plus quand ils sont fait à bon escient ; et à condition bien entendu que l’auteur de l’article source du commentaire joue le jeu de la transparence ( il n’est ni timoré pour éviter la critique ni censeur des commentaires moins élogieux )

Je voudrais revenir sur la discussion de base qui est le support son accessibilité, sa richesse. Je reviendrais a mon expérience précédente en SSII où j’ai entendu prêché pendant plus de 10 ans la révolution du 0 papier…. qu’on attends a priori depuis plus de 20 ans, et qu’on attendra encore longtemps. L’argument ressassé par les clients est toujours le même l’accessibilité à l’information plus aisé, l’effet cognitif plus important (‘ je l’ai lu en page en fin de chapitre … ‘) , la capacité à repérer une information simplement ( surligner, corner, mettre un post-it, griffonner sans problème de comptabilité, ou d’outils ….), sans parler d’effets plus physique fatigue oculaire…,
J’en veux pour meilleur preuve que les théoriciens du projet tels les scrum master mettent en avant les papiers,crayons,post-its et autres tableaux blancs, alors qu’ils travaillent dans un milieu hautement informatisés, ou l’argument du coûts n’a pas d’objets.
Les personnes travaillant dans le domaine web ont souvent recours à des brouillon papier avant de se jeter sur leur ’sketcheur favori’, pas facile de ‘prototyper’ avec un client sur un ordinateur.

Personnellement pour créer j’ai besoin de passer par des états successifs d’amélioration d’une idée, d’affinement de raffinement. L’outil informatique m’en dédouane, je coupe, je colle, j’efface mais je ne rature pas, je ne griffonne pas de dessin en marge…. Je me souviens cette réflexion d’une amie photographe : » je déteste le numérique car on fait et on détruit trop facilement « ( l’argentique imposait du soin pour réaliser une photo aussi les résultats étaient généralement de meilleur qualité, et les photos ratés pouvaient se révéler en fait très réussi car très originales ou révélatrices de détails qui passent inaperçus au premier coup d’œil ).

Je ne sais pas si le papier est l’avenir ou le passé, et je m’en fou à vrai dire ; par contre le numérique, trop facile, trop rapide, trop imparfait, n’est pas l’avenir que je choisirais.

Pour toutes les raisons cités dans l’article et dans les commentaires , que je ne répéterais pas, mais encore parce que l’odeur du papier, et la texture de l’encre m’inspire bien plus qu’un clavier, mais enfin parce que l’empreinte matérielle de ses constituants, m’impose un certain respect, je suis soucieux de ce que j’écris, de ce que je réalise et de mon public.

Le numérique nous ancre dans une civilisation « Undo » : fais ce que tu veux, de toutes façons il y aura toujours quelque chose ou quelqu’un pour te ramener en arrière, pour effacer ce que tu viens de dire, d’écrire.
Aujourd’hui on ne passe plus son temps à chercher une information on passe son temps à vérifier sa crédibilité, est-cela le progrès ?

Technophile, j’apprends pourtant à mes enfants à lire sur des livres papiers, et j’espère bien pouvoir un jour leur voir faire de même avec leurs propres enfants.

		var slidingLabelInit = function(e,el,margin)
		{
			var el = el || '.slider';	// by default use slider class
			var margin = margin || 0;	// padding between last char of label and box of input
			$$( el+' label').each( function(label)
			{
				var input = $(label.get('for'));
				// some css to obtain a size for element
				label.setStyle('display','inline');
				label.setStyle('position','absolute');
				var sizes = label.sizes();
				var text = label.hide().textContent;
				$ext(input,
				{
					showHint: function() {
						if (this.value.blank())
						{
							this.addClass('hint').setValue(text);
							label.setStyle({
								top: sizes.y/2+'px',
								background: 'white',
								left: '0px',
							}).hide();

						}
					},
					hideHint: function() {
					  if (this.value == text)
						{
						this.removeClass('hint').setValue('');
						label.setStyle('top',sizes.y/2+'px').show();
						new Fx.Morph(label).start(
							{
								background: 'yellow',
								left: '-'+ ( sizes.x + margin ) +'px',
							})
						}
					}
				}).on(
				{
					focus: 'hideHint',
					blur: 'showHint'
				}).showHint();
			});
		};
		document.on('ready', slidingLabelInit,'.slider', 5);

quelques précisions
ligne 3 & 4 ces variables ne servent qu’a apporter un peu de dynamisme à la fonction
ligne 09 & 10 ces deux lignes permettent de modifier le style de l’élément label afin d’une part d’obtenir sa taille, et d’autre part de modifier son placement de manière absolue.
ligne 13 à 38 , on retrouve le code à la sauce Nikolay, qui permet d’étendre les fonctionnalités des éléments <input>, j’ai au passage agrémenté le code d’un petit effet de translation/coloration en jaune
ligne 39 on utilise le gestionnaire d’évènement de rightJS pour appeler les nouvelles fonctions en réaction à l’événement ‘blur’ et ‘focus’.
ligne 46 : on appelle la fonction quand le document est complétement chargé, on lui passe également deux paramètres la classe sur lesquels opérer la manipulation et une marge à insérer entre le texte et le bord du cadre lorsque le texte se déplacera de l’intérieur de l’élément du formulaire vers la gauche

Une petite démonstration de l’effet obtenu

En pratique dans les exemples ci dessous on va indiquer à tous les éléments <li> de la page de gérer l’évènement ‘click’; en d’autres termes, la fonction sera appelée à chaque fois qu’un élément <li> sera cliqué.
Chose intéressante, si vous ajoutez de nouveaux éléments <li> au bloc existant, le comportement leur sera également appliqué.
Enfin quelque soit l’endroit où le comportement est défini. Le script va re-scanner toute la page une fois que celle-ci sera complétement chargée.

Comme la doc manque d’exemple à ce sujet je vous ai pondu un petit lot d’exemple

Dans un premier temps nous allons commencer par ajouter une zone de liste, un clique sur un élément de la liste le fait disparaitre, pour éviter de tourner court par manque d’élément, je vous ai aussi inclus un bouton pour en ajouter

Explication

Ligne 02 vous noterez la nouvelle url pour appeler la version la plus à jour de RightJS

Ligne 05 on défini un ensemble d’éléments de la page en l’occurrence les éléments du dom correspondant à #todos-1 li comme devant être réactif à l’évènement click. Lorsque l’événement sera déclenché on appellera la fonction défini inline function() { this.remove(); }, qui détruira l’élément cliqué

Ligne 06 Pour éviter de tomber à cours de ligne, on décide d’ajouter un bouton qui va permettre d’ajouter un élément à l’intérieur du bloc #todos-1 li. Pour ceux à qui $$(« #todos-1 ul »)[0] semble hermétique je vous rappelle que $$() permet d’aller chercher un élément en fonction d’un descripteur CSS mais renvoi un tableau d’élément, $$(« #todos-1 ul »)[0] permet d’en prendre la première valeur ( j’aurais pu aussi écrire $$(« #todos-1 ul »).first() ). Enfin le $$(« #todos-1 ul »)[0].get(« childElementCount »), récupère du DOM le nombre d’élément <li>contenu dans la liste ( en passant la méthode [string].on() est juste un raccourci plus ’sexy’ sur la méthode Event.behave )

...
<script type='text/javascript' src='http://rightjs.org/hotlink/right.js'></script>
<script type="text/javascript">
// with usual functions
var h1 = Event.behave("#todos-1 li", "click", function() { this.remove(); });
"button#add-c".on('click', function(event) {
  $$("#todos-1 ul")[0].insert(new Element('li', {html: 'new-li '+$$("#todos-1 ul")[0].get("childElementCount")}));
});

....

<h2> Exemple 1 </h2>
Cliquez pour supprimer...
<div id="todos-1">
	<ul>
		<li>A</li>
		<li>B</li>
	</ul>
</div>
<button type="button" id="add-c">Ajouter un element</button>

On peut aussi appeller Event.behave avec des chaines de caractère, ou bien avec une hashlist

Event.behave("#todos-2 li", "click", "addClass", "marked");

// with a hash of handlers
Event.behave("#todos-3 li", {
	mouseover: function() { this.addClass('hovered'); },
	mouseout: ['removeClass', 'hovered'],
	click: 'remove'
});

Si vous devez arrêter certains comportement, il suffit d’ajouter les éléments suivants

// garder une reference sur le couple élément/évènement
var handlers = Event.behave(.....);
...
// stopper son observation
document.stopObserving(handlers);

Pour activer manuellement un élément il suffit de le déclencher au moyen de document.fire, deux paramètres suffiront :
l’évènement attendu,
un objet pseudo event contenant au moins la propriété [target] faisant référence à l’élément visé

Attention toutefois cette fonction est un peu ‘border line’, et peut avoir quelques effets de bord ( la fonction ne génère aucun évènement mais appelle les ‘écouteurs d’évènements’ uns à uns )

// activation de l'événement 'click' sur le premier élément #todos-1 li
 document.fire('click',{target:$$("#todos-1 li").first()});

Demonstration Complète

Merci à l’auteur de RightJS, pour les éclaircissements sur certains points

• document.onReady(function() {…});
• document.on(‘ready’, function() {…});
• document.observe(‘ready’, function() {…});

Pour illustrer tout ça je vous ai fait un fichier de test à la sauce riot.js

Demonstration

Comment s’y retrouver ?
En lisant la documentation on s’aperçoit en fait que onReady est un raccourci sur on(‘ready’), et que observe sera à éviter… privilégions donc onReady qui à l’avantage d’être plus lisible

demo

<head>
	<style>
	body { font:12px/1.3 Arial, Sans-serif; }
	form { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
	div { clear:both;position:relative;margin:0 0 10px; }
	label { cursor:pointer;display:block; }
	input[type="text"] { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
	input[type="text"]:focus { border-color:#777; }
	input[name="zip"] { width:150px; }

	/* submit button */
	input[type="submit"] { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
	input[type="submit"]:hover,
	input[type="submit"]:focus { border-color:#333;background:#ddd; }
	input[type="submit"]:active{ margin-top:1px; }
	</style>
	<script type="text/javascript" src="js/right-min.js"></script>
	<script type="text/javascript">
	// <!--
		var slidingLabelInit = function slidingLabelInit() {
		// wanna collect all labels wrapped in a slider tag class
		$$('form#info .slider label').each(function(el){

		var labelColor = '#999';
		var restingPosition = '5px';
		// put label in input
		el.setStyle({
			'color' 	: labelColor,
			'position' 	: 'absolute',
			'top' 		: '6px',
			'left' 		: restingPosition,
			'display' 	: 'inline',
			'z-index' 	: '99'
		});
		// grab the input value
		var inputval = el.next('input').value;

		// grab the label width, then add 5 pixels to it
		var labelMoveLeft = (el.dimensions()).width + 5;
		if ((typeof inputval !== "undefined" && inputval !== null)) {
			//moveTo
			el.moveTo( -labelMoveLeft,7 );
		}

		el.siblings('input').first().on( 'focus', function(){
			el = this.siblings('label').first();
				if ((typeof this.value !== "undefined" && this.value !== null)) {
				//moveTo
				el.moveTo( -((el.dimensions()).width+5),7 );
			}
		}).on( 'blur', function(){
			el = this.siblings('label').first();
			if ((typeof this.value == "undefined" || this.value == null || this.value.length ==0 )) {
				//moveTo
				el.moveTo( 5 ,7 );
			}
		   });
	       });
         };
         document.observe('ready', slidingLabelInit);
         // -->
	</script>
</head>

<body>
<div id="element-id1"></div>
<h1>Sliding Labels Original by <a href="http://www.csskarma.com" rel="home">CSSKarma</a></h1>
<p><a href="http://www.csskarma.com/blog/sliding-labels/">Back to the Original article</a></p>
<form action="" method="post" id="info">
	<h2>Contact Information</h2>
	<div id="name-wrap" class="slider">
		<label for="name">Name</label>
		<input type="text" id="name" name="name">

	</div><!--/#name-wrap-->

	<div id="email-wrap"  class="slider">
		<label for="email">E&ndash;mail</label>
		<input type="text" id="email" name="email">
	</div><!--/#email-wrap-->

	<div id="street-wrap"  class="slider">
		<label for="st">Street</label>

		<input type="text" id="st" name="st">
	</div><!--/#street-wrap-->

	<div id="city-wrap"  class="slider">
		<label for="city">City &amp; State</label>
		<input type="text" id="city" name="city">
	</div><!--/#city-wrap-->

	<div id="zip-wrap"  class="slider">

		<label for="zip">Zip code</label>
		<input type="text" id="zip" name="zip">
	</div><!--/#zip-wrap-->

	<input type="submit" id="btn" name="btn" value="submit">
</form>

</body>

Il reste l’animation a améliorer, ça fera partie d’un prochaine tutorial

pour ce faire nous aurons besoin dans JSClass de
core.js
package.js qui gère les dépendances de package

	<head>
		<script type="text/javascript" src="JSClass/core.js"></script>
		<script type="text/javascript" src="JSClass/package.js"></script>
		<script type="text/javascript">
		JS.Packages(function() { with(this) {
			file('http://rightjs.org/builds/current/right-min.js').provides('RightJS');
			}
		});
		require('RightJS', function() {
        	var el = $('element-id1');
			el.insert('<p>Succesful Load Right JS Version :'+RightJS.version+'</p>');
		});
		</script>
	</head>

	<body>
	<div id="element-id1"></div>
	</body>

Remarque :
la ligne 06 et la ligne 09 travaillent de paire ; la ligne 06 précise que le chargement de la librairie définira un espace de nom appelé ‘RightJS’ et la ligne 09 précise que le code qui suivra ne pourra s’exécuter que si l’espace de nom ‘RightJS’ est défini.

Affiche
Demo
Succesful Load Right JS Version :1.5.3

Voilà ma petite recette personnelle :

• télécharger si ce n’est pas encore fait Firebug
• télécharger si ce n’est pas encore fait FirePHP
• recopier le repertoire ‘FirePHPCore’ dans le répertoire classe de prestashop
• ajouter la fonction suivante dans le module

static private function dbg($m_data,$i_severity=1)
{
	require_once(_PS_CLASS_DIR_.'FirePHPCore/FirePHP.class.php');
	$m_fp = FirePHP::getInstance(true); 

	switch( $i_severity )
	{
		case 1:
			$m_fp->log($m_data);
			break;
		case 2:
			$m_fp->info($m_data);
			break;
		case 3:
			$m_fp->warn($m_data);
			break;
		case 4:
			$m_fp->error($m_data);
			break;
		default:
			$m_fp->log($m_data);
	}

}

Ce n’est certes pas une fonction très évoluée, mais elle me suffit largement ; de plus comme je l’ai souvent expérimentés à mes dépends ( et je ne pense pas être le seul ) « au plus simple au mieux ».

Puisque je connais un peu less j’ai eu envie de goûter au grand frère.

A première vue rien de bien différent, si ce n’est l’indentation rendue obligatoire par la non présence des accolades dans le code sass, et quelques différences de langage : !ma_variable plutôt que @ma_variable.

à l’utilisation quelques différences apparaissent

les variables sass peuvent être modifiées

// test.sass
!primary_color = #eeeeee
!primary_color = #ffffff

#contents
  #sidebar
    color= !primary_color

!primary_color = red

.toto
  color = !primary_color

génère le resultat suivant

#contents #sidebar {
  color: white; }

.toto {
  color: red; }

Comme précisé dans la documentation en ligne less n’autorise pas ce genre d’opérations.
…

Note that variables are actually ‘constants’ in that they can only be defined once.

// test.less
@primary_color: #eeeeee;
@primary_color: #ffffff;

#contents {
  #sidebar {
    color: @primary_color;
	}
}

@primary_color: red;

.toto {
  color: @primary_color;
}

génère le resultat suivant

#contents #sidebar { color: #eeeeee; }
.toto { color: #eeeeee; }

au niveau des autres différences nous avons les directives de contrôle : if, for, while qui n’existe pas dans less, ainsi que la possibilité d’inclure dans les css générée des commentaires à partir du fichier sass ; ainsi que l’Interpolation: #{} permettant d’evaluer une variable lors du processus de transformation ( exemple extrait de la documentation )

!name = foo
!attr = border
p.#{!name}
  #{!attr}-color: blue

is compiled to:

p.foo {
  border-color: blue; }

par contre je n’ai pas trouvé dans sass comment récupérer la valeur d’une propriété d’une règle précédemment définie comme on peut le faire dans less

.article { color: #294366; }

.comment {
  color: .article['color'];
}

Conclusion

Les deux systèmes se valent, j’ai personnellement une préférence pour Less, en effet je préfère sa syntaxe et surtout j’aime bien l’idée des ‘variables constantes’, et des sélecteur de propriété.