Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - Développement

Extensions Firebug

Hadrien — Wed, 09 Jul 2008 13:46:00 +0200

Dascritch m'a indiqué ce matin un article très intéressant listant les meilleurs extensions pour Firebug. Pour rappel, Firebug est une extension Firefox incontournable pour tout développeur, facilitant grandement le debug dans le développement web.

On y retrouves des extensions très pratiques telles que :

Firecookie qui permet de lister tout les cookies de la page en cours et de les éditer
FirePHP, dont je parlais il y a peu, permet de logguer des informations dans la console Firebug à partir d'un script coté serveur, sans modifier le contenu de la réponse envoyée au navigateur. Les logs étant passés dans le header de la page. Nickel pour débugger de l'ajax.
RainbowForFirebug coloriera le code javascript dans votre console Firebug.
Jiffy calculera le temps d'éxécution de chacune de vos fonctions Javascript.

L'article en recense encore plein d'autres, mais c'était celles qui me paraissaient les plus intéressantes. Bon débug

PHP en feu

Hadrien — Thu, 19 Jun 2008 13:38:00 +0200

J'ai découvert une extension Firefox excellente pour tout développeur web. FirePHP est un addon à FireBug qui permet de logguer dans la console de Firebug coté serveur.

En pratique, si je veux connaître le contenu de ma variable $var, je suis obligé de mettre un print_r($var) ou un var_dump($var). Ou encore de logguer ça dans un fichier de log. Dans le premier cas, le résultat est envoyé avec ma page web et est susceptible de péter ma mise en page ou ma réponse Ajax. Dans le second, il faut toujours que j'ai un œil sur ma console de log.

FirePHP permet d'envoyer ces informations dans le header de la page et de l'afficher dans la console Firebug. Les objets sont envoyés en JSON et sont donc explorables de la même façon que les objets Javascript :

C'est très pratique et je peux plus m'en passer Je prépare un patch pour Jelix pour ceux qui utilisent ce sublime framework PHP

TextMate sous Windows

Hadrien — Wed, 21 May 2008 17:15:00 +0200

J'ai souvent vu des développeurs Windows jaloux de notre TextMate sur Mac. Et bien, ils peuvent enfin se faire plaisir eux aussi ! Un clone de TextMate a été écrit pour Windows : InType. Encore en version alpha, il est plutôt bien foutu et possède déjà les fonctions essentielles de TextMate : bundles, snippets et onglets.

Hm… par contre, on me dit dans l'oreillette que le projet n'a pas été mis à jour depuis Août 2007. C'est dommage.

EDIT :

On m'annonce qu'un autre clone existe, est maintenu et est en collaboration avec Macromates : E Text Editor. En effet, il ressemble comme deux goûtes d'eau à TextMate. Je vous invites tous à l'essayer ! (démo de 30 jours, 35$ la licence)

Que fait un geek quand il s'ennuie ?

Hadrien — Sat, 03 May 2008 22:11:00 +0200

Les jours de week end où on sait pas quoi faire, la plupart des gens tondent le gazon, font du jardinage, vont se ballader… Le geek, lui, code. Et donc j'ai codé en une heure ce superbe programme totalement inutile mais fun qui permet de cacher une image dans un texte grâce à une propriété CSS 3 disponible uniquement dans Firefox (::-moz-selection). Et ça donne ça :

ceci

Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...

Si vous êtes sous Firefox et que vous sélectionnez ce blog de texte, vous pourrez voir une surprise. Et si vous voulez faire vos propres images cachées, vous pouvez utiliser le script suivant.

Alt-I sur iPhone

Hadrien — Sat, 23 Feb 2008 00:52:00 +0100

Alt-i a enfin sa version iPhone ! Hourra ! Joie ! Si vous vous connectez à www.alti.info avec votre iPhone, vous serez automatiquement redirigé vers iphone.alti.info qui vous proposera un design adapté à l'appareil :

C'est y pas beau tout ça ?

Menu en colonne en Javascript

Hadrien — Tue, 12 Feb 2008 12:55:00 +0100

Xylpho voulait pour son site, un menu en colonne comme le fait Mac OS X :

Ce menu devait être à la fois accessible, référençable et dynamique. Donc, pas de flash ! Javascript à la rescousse. Je lui ai donc codé une classe JS qui construit un menu en colonne à partir de listes imbriquées…

En gros, tout le plan du site est intégré dans la page et structuré avec des ul et des li imbriqués :

Voir le code HTML

<ul id="menuCol">
	<li>
		2005
		<ul>
			<li>
				July
				<ul>
					<li>
						27
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=4">
									Joulie Interface
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				September
				<ul>
					<li>
						29
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=11">
									Version Texte
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				October
				<ul>
					<li>
						29
						<ul>
							<li class="selected">
								<a href="http://www.alti.info/post/2008/02/10/?id=18">
									Qjelt Octobre en VideoCast
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				November
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=19">
									www.alti.info
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				December
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=20">
									OW Pick !!!
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Ensuite, ma classe Javascript va masquer et afficher les bons ul selon les clicks sur les li. Le menu se crée en créant un nouvel objet de la sorte :

<script type="text/javascript" charset="utf-8">
//<![CDATA[
	var test = new MenuCol.Menu('menuCol');
	MenuCol.Item.open();
//]]>
</script>

La statique open() permet d'initialiser le menu sur le li qui contient la classe 'selected' afin de revenir sur le menu correspondant après un chargement de page.

Tout ceci fonctionne grâce au script MenuCol.js, que je rends disponible sous licence GPLv3. Faites en ce que voulez, mais souvenez vous de citer mon nom.

Voir le code Javascript

// Global object
var MenuCol = {};

/**
 * Flag to stop propagation of event
 * @type Boolean
 */
MenuCol._stopPropagation = false;

/**
 Shortcut to document.getElementById
 * @param {String/Element} id Element or Element's id
 * @returns Element
 */
MenuCol.get = function(id)
{
	var elmt = document.getElementById(id);
	if (elmt)
	{
		return elmt;
	}
	return id;
};

// Objects collection
MenuCols = new Array();

/**
 * Menu class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Menu = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Items inside Menu
	 * @type Array
	 */
	this.items = new Array();
	
	MenuCols.push(this);
	
	this.init();
}
MenuCol.Menu.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Item object with all li children
		var lis = this.element.getElementsByTagName('li');
		for (var i = 0; lis[i]; i++)
		{
			if (lis[i].parentNode == this.element)
			{
				var item = new MenuCol.Item(
					lis[i]
				);
				item.parent = this;
				this.items.push(
					item
				);
			}
		}
	},
	/**
	 * Hide menu
	 */
	hide: function()
	{
		this.element.style.display = 'none';
	},
	/**
	 * Show Menu
	 */
	show: function()
	{
		this.element.style.display = 'block';
	}
};

MenuCol.Items = new Array();
/**
 * MenuCol.Item class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Item = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Submenu
	 * @type MenuCol.Menu
	 */
	this.submenu = null;
	
	MenuCol.Items.push(this);
	
	this.init();
}
MenuCol.Item.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Menu object with all UL children
		var uls = this.element.getElementsByTagName('ul');
		for (var i = 0; uls[i]; i++)
		{
			if (uls[i].parentNode == this.element)
			{
				this.submenu = new MenuCol.Menu(
					uls[i]
				);
				this.submenu.parent = this;
				this.submenu.hide();
			}
		}
		
		// Add on click Event on element
		this.element.parent = this;
		this.element.onclick = this.onclick;
	},
	/**
	 * onclick event
	 */
	onclick: function()
	{
		// Exec only on first fire
		if (!MenuCol._stopPropagation)
		{
			// If item hasn't submenu, we don't do anything
			if (!this.parent.submenu)
			{
				return true;
			}
			
			// Hiding all sub menus of same level
			for (var i = 0; this.parent.parent.items[i]; i++)
			{
				if (this.parent.parent.items[i].submenu)
				{
					this.parent.parent.items[i].submenu.hide();
					this.parent.parent.items[i].activate(
						true,
						true
					);
				}
			}
			
			// …and their children
			for (i = 0; this.parent.submenu.items[i]; i++)
			{
				this.parent.submenu.items[i].activate(true);
				if (this.parent.submenu.items[i].submenu)
				{
					this.parent.submenu.items[i].submenu.hide();
				}
			}
			
			// Show corresponding sub menu
			this.parent.submenu.show();
			
			// And its parents
			var parent = this.parent ?
				this.parent :
				null;
			while (parent)
			{
				parent.parent.show();
				parent.activate(
					false,
					false
				);
				parent = parent.parent ?
					parent.parent.parent :
					null;
			}
			
			// Activate item
			this.parent.activate(
				false,
				true
			);
			
			// Prevents event propagation on parent's elements
			MenuCol._stopPropagation = true;
			setTimeout(
				function()
				{
					MenuCol._stopPropagation = false;
				},
				20
			)
		}
	},
	/**
	 * activate element
	 * @param {Boolean} oupa True to deactivate
	 */
	activate: function(oupa, submenu)
	{
		// Activate item
		if (!oupa)
		{
			this.element.className = 'selected';
		}
		else
		{
			this.element.className = '';
		}
		// Activate submenu
		if (submenu)
		{
			if (!oupa)
			{
				this.submenu.element.className = 'selected';
			}
			else
			{
				this.parent.element.className = '';
			}
		}
	}
};

/**
 * Open menu on activated li. Will open on li with 'selected' class
 */
MenuCol.Item.open = function()
{
	for (var i = 0; MenuCol.Items[i]; i++)
	{
		if (MenuCol.Items[i].element.className == 'selected')
		{
			if (MenuCol.Items[i].submenu)
			{
				MenuCol.Items[i].element.onclick();
				
			}
			else
			{
				MenuCol.Items[i].parent.parent.element.onclick();
				MenuCol.Items[i].activate();
			}
		}
	}
}

Voici un exemple du résultat qui affiche les archives de ce blog.
Télécharger le script

Ajax, navigation et accessibilité… Exemple pratique

Hadrien — Sat, 08 Sep 2007 23:42:00 +0200

J'ai codé à l'arrache un exemple pratique pour illustrer mon astuce concernant la navigation en Ajax accessible. Bon, c'est pas encore top au point, mais ça fonctionne nickel sous Firefox. Sous Safari 2, l'historique n'est pas modifié donc, pas de précédent ou suivant. Seul le rechargement de page fonctionne. Opera 9.5, seul le bouton Suivant ne fonctionne étrangement pas. Et IE, j'ai pas testé : j'ai pas envie de lancer VMWare : j'attends vos retours en commentaires.

Donc, de quoi s'agit il ? Nous avons une liste paginée. Sont affichés la liste des articles de ce blog par lot de 10 éléments. Une pagination en dessous permet d'afficher les 10 éléments suivants grâce à Ajax. Vous constaterez que lors d'un clic sur un numéro de page, une ancre s'ajoute à l'url. Mais aucun rechargement de page ne s'effectue.

Faîtes donc le test suivant : naviguez de page en page, puis rechargez la page. Vous vous retrouverez à la même pagination où vous étiez \o/ Attention, ce n'est pas fini. Cliquez sur le bouton précédent de votre navigateur… Pas de rechargement ni de changement de page, mais vous voilà quand même à la pagination précédente, toujours en ajax :o Revenez donc en arrière deux ou trois fois, puis repartez en avant. Même principe. Tout se charge par Ajax.

Voilà une application Ajax totalement accessible et qui reste utilisable comme tout site traditionnel.

Ah oui, ça se passe ici :

Exemple pratique pour rendre Ajax accessible

La prochaine étape sera d'écrire un module pour YUI afin de faciliter l'implémentation de cette méthode.

Ajax, navigation et accessibilité…

Hadrien — Sun, 26 Aug 2007 14:55:00 +0200

Quand on fait un site tout en Ajax, la problématique principale est l'accessibilité. Quand le contenu de la page web est chargée avec Ajax, il n'y a plus de changement physique de page, donc d'url. Du coup, les boutons précédents, suivant et recharger du navigateur ne serve à rien, hormis ramener à la page d'accueil du site. Sans débattre sur l'utilité de faire un site 100% ajax, voici un moyen de ne pas perdre le fil de la navigation.

Imaginons le cas pratique suivant. J'arrive sur une page avec une liste d'items et des boutons de pagination (précédent - 1 - 2 -3 - suivant). Je clique sur suivant, et seul la liste des items est chargée via ajax. Je clique 3 fois sur suivant, je suis donc à 4 chargements de listes, et je trouve enfin ce que je cherche. Sur l'item en question, un lien externe m'envoie vers une nouvelle page. Zut, c'était pas ça. Je clique sur le bouton précédent de mon navigateur… Arf… Me revoilà à la première page de pagination de ma liste d'item. Heureusement que je me souviens que j'était à la 4° page, sinon, j'aurais du me retaper tout les clics sur suivant jusqu'à reconnaitre la page où j'étais.

Pour éviter ceci, je vous propose une solution toute simple. Le concept est de placer des paramètres en tant qu'ancre dans l'url :

Nous arrivons sur la page principale, nous sommes à l'adresse :
http://www.monsiteenajax.com/liste.html

Je clique sur suivant, l'adresse ne change pas. C'est ici qu'il faut agir. Lors du clic, je vais ajouter une ancre à l'url avec mes paramètres pour me retrouver avec une url de ce style :
http://www.monsiteenajax.com/liste.html#page-2

Pour ce faire, il suffit de changer la valeur de window.location. Voici une fonction qui permet de changer cette valeur :

var changeAnchor = function(anchor)
{
	// Si l'url possède déjà une ancre
	if (window.location.href.match(new RegExp('#.*$')))
	{
		window.location = window.location.href.replace(
			new RegExp('#.*$'),
			'#' + anchor
		);
	}
	// Sinon, il suffit de l'ajouter à la fin
	else
	{
		window.location = window.location.href + "#" + anchor
	}
	
	return window.location;
}

Donc, lors de l'évenement qui va déclencher la requete ajax et l'affichage de la deuxième page de la liste, je fais un petit changeAnchor('page-2') afin de changer mon ancre et garder en mémoire que je suis sur la pagination numéro 2.
Ainsi, si je change de page, puis que je clique sur Précédent, ça sera l'url http://www.monsiteenajax.com/liste.html#page-2 qui sera chargée.

Ne reste plus qu'à exploiter cette fonction. C'est encore tout simple. Implémentez cette fonction :

var getAnchor = function()
{
	return window.location.href.match(
		new RegExp('#.*$')
	);
}

Il ne reste plus qu'à l'appeler au load de la page, et de faire les actions relatives à ce qu'elle renvoit.

Reprenons notre cas. Je clique sur le lien pour avoir la pagination suivante. Cela va appeler une fonction qui va charger la liste et à la fin, elle va faire un changeAnchor('page-2').

Sur le onload de la page, je met un switch sur le getAnchor pour effectuer les actions relative. Donc, là, si mon anchor contient page, il faudra afficher la page dont le numéro suit :

window.onload = function()
{
	// Je récupère l'ancre et la splite sur le '-' car
	// j'ai décidé de séparer mes paramètres par des '-'
	var startParams = getAnchor()page.split('-');
	
	// Je teste le premier paramètre
	switch (startParams[0])
	{
		case 'page':
			// Je suis dans le cas de la pagination
			
			// Si le deuxième paramètre est setté
			if (startParams[1])
			{
				// J'apelle ma méthode d'affichage de page
				// avec le paramètre adéquat
				displayPage(
					startParams[1]
				);
			}
			break;
		
		// Je peux imaginer un autre cas
		case 'autrecas':
			doSomething();
			break;
	}
}

Et voilà. Si je quitte cette page, puis que j'y reviens en consultant mon historique, je reviendrais à l'affichage ajax correspondant. Autre bonus, à chaque fois que l'on change l'ancre via changeAnchor(), c'est une nouvelle entrée dans l'historique du navigateur qui se crée. Donc, on peut réellement utiliser les boutons de la navigation comme pour un site traditionnel.

Un autre avantage très important, c'est que le site redevient bookmarkable. L'utilisateur peut sans problème mettre en signet une page modifiée par ajax.

Si vous avez des remarques ou des améliorations à proposer, n'hésitez pas

EDIT : Voici un exemple pratique.

Annuler le changement de page

Hadrien — Wed, 22 Aug 2007 18:15:00 +0200

Ahah !! Je l'ai enfin trouvé cet événement javascript ! Ça faisait un moment que je le cherchais mais que je n'en voyais pas la queue ! Je parle de l'event qui permet d'afficher un dialogue de confirmation lors du changement de page, ceci afin d'éviter de perdre le contenu d'un formulaire par exemple.

Et bien cet événement js, ce n'était simplement que onbeforeunload !!

On met ça en place de la façon suivante :

window.onbeforeunload = function(){return 'Votre Message';}

Pour l'essayer, , puis essayez de partir d'ici

EDIT : J'ai trouvé comment faire fonctionner le bouzin IE… Il faut placer l'événement non pas sur window, mais sur body… Merci Microsoft encore de respecter les normes…

document.body.onbeforeunload = function(){return 'Votre Message';}

Il faut mettre les deux car pour les vrais navigateurs, ça reste dans window. On est habitué au code en double…

Vous pouvez essayer en cliquant sur le bouton

Nouvelle version de YUI (2.3.0)

Hadrien — Mon, 06 Aug 2007 01:29:00 +0200

YAHOO nous offre une nouvelle version de YUI (YAHOO User Interface) qui passe donc au numéro 2.3.0 \o/

Cette nouvelle version apporte 250 corrections de bugs et améliorations mais surtout de nouveaux éléments !!!

Rich Text Editor (beta) : La nouvelle classe YAHOO.widget.Editor propose d'ajouter en tout simplicité un éditeur de texte WYSIWYG du même style que FCKEditor ou TinyMCE. D'après la démo que j'ai essayé, il a l'air carrément mieux que ces précédents ! Très prometteur !!
Base CSS : Le pack de CSS comporte maintenant Reset CSS qui permet de supprimer tout les styles par default de tout les navigateurs. Bon, là, je suis pas trop partisan de cette idée, mais ça plaira à certain…
YUI Loader (beta) : La nouvelle classe YAHOO.util.YUILoader permet de charger des modules à la volée. Du coup, on ne charge plus que le loader au début du script. Ensuite, en cours de script on appelle l'un ou l'autre module dont on a besoin (colorpicker, treeview…) et il seront chargé seulement s'ils ne le sont pas déjà. Ça peut être bien pratique.
ImageLoader (expérimental) : YAHOO.util.ImageLoader permet de programmer le chargement des images dans la page. Avec cette classe, on peut déterminer que telles images qui ne sont pas forcément visibles au début ne seront chargées que quand on en aura besoin. Cela permet donc d'accélérer le chargement de la page.
Color Picker Control (beta) : YAHOO.widget.ColorPicker est un outil pour sélectionner facilement une couleur dans une palette.
Test Utility (beta) : Voilà une classe très intéressante et très attendue ! YAHOO.tool.TestCase permet de réaliser des tests unitaires sur vos scripts. Je vais m'y pencher dès demain et vous faire un petit tutorial sur son utilisation.

Pour finir, cette nouvelle version de YUI sera plus facilement skinnable et pour le prouver, un nouveau thème par defaut plus agréable est fourni (voir screenshot).