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

Freebre !!

Hadrien — Tue, 05 Aug 2008 18:32:00 +0200

Youhou !! Voici ce que j'ai trouvé dans ma boîte aux lettres ce soir !!

La fibre optique pour bientôt !!

La fibre à Toulouse !!

Hadrien — Fri, 09 May 2008 18:25:00 +0200

Non, c'est faux, elle est pas encore là. Désolé. Mais elle ne saurait tarder ! Free vient de m'appeler pour me demander les coordonnées de mon syndicat de copropriété afin de leur envoyer un appel d'offre. Par contre, aucun délai annoncé. Tout ce que la hotlineuse a pu me dire c'est que les travaux ne commenceront que si Free est accepté comme cablo-opérateur par mon syndic lors de la prochaine assemblée générale. Donc, je pense pas qu'il n'y ai quoi que ce soit avant au moins un an Mais ça fait plaisir de voir que le projet avance !

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

Flock 1.0, le browser 2.0

Hadrien — Sun, 04 Nov 2007 13:51:00 +0100

Flock arrive enfin en version 1.0 après près de deux ans de développement. Flock est un navigateur web bien différent de ses collègues. Ce fork (projet dérivé d'un autre) de Firefox, disponible pour Windows, Mac OS X et Linux apporte une dimension sociale au websurfing. L'interface est pensée pour faciliter l'accès et l'interaction avec les sites sociaux, dit web 2.0 comme Flickr, Youtube ou autre FaceBook. Hormis le fait que les services proposés sont plus ciblés pour les surfeurs américains, on trouve dans ce navigateur des idées très interressantes qui peuvent rendre le surf bien plus intuitif et agréables. Parmi ceux-ci, voici les détails qui m'ont marqué après 5 mn de test :

La Media Bar donne un accès direct aux médias photos et vidéos de Facebook, Flickr, Photobucket, Truveo et Youtube dans une barre latérale du plus bel effet. Vous pouvez voir les médias ou les inclure sur votre blog grâce à la fonctionnalité suivante :
Le WebClipboard. Il s'agit en pratique d'un presse papier multiple en drag'n'drop. Vous pouvez glisser dedans tout ce que se trouve sur le web : images, vidéos, textes, musiques, etc. Vous pouvez ensuite les blogguer ou les glisser sur un autre site web. Flock saura ce qu'il faut garder comme info (url pour une image, balise <object /> pour une vidéo, etc). L'image en tete de ce billet a été intégrée via ce Web Clipboard.
L'accès direct à certains éléments d'une page web. Ne parlons pas des flux RSS qui sont aujourd'hui d'une banalité sans nom et regardons plutot les icones à ses coté. Le bouton de gauche s'active si nous nous trouvons sur une page regroupant plusieurs médias d'un utilisateur comme une playslit Youtube par exemple, et permet d'afficher tout ces médias dans la media bar. Le bouton de droite détecte si un moteur de recherche est disponible dans la page et propose de l'installer.
L'éditeur de blog qui me permet d'écrire ce billet est très facile à configurer même si les plateformes proposées sont toute américaines et qu'on peut regretter l'absence d'Over-Blog Heureusement, on peut se connecter à n'importe quel type de blog proposant le xml-rpc (ici, un dotclear). Une fois le compte configuré, on peut écrire un nouveau billet en un clic dans l'interface de Flock, et réutiliser les medias stockés dans le web clipboard, ou glisser une image de votre bureau vers votr billet qui sera immédiatement uploadé vers votre compte Photobucket ou Piczo, puis inséré.

Je pourrais aussi vous parler de la rapidité avec laquelle se lance l'application, sa légéreté ou son design plus agréable que celui de Firefox. Je pourrais aussi vous rassurer sur le fait que toute les extenstions Firefox sont compatibles avec Flock et que chaque mise à jour de Firefox est intégré à Flock. Mais ça ne sera pas la peine, vous aurez tout comme moi déjà installé ce navigateur pour remplacer le panda rouge Qu'en pensez vous ?

Blogged with Flock

Tags: navigateur, browser, web2.0, Flock, Firefox, Mozilla, open source