Vous pouvez voir un démo du “logiciel” fait par le concepteur Joe Hewitt sur Yahoo vidéo à l’adresse suivante : Vidéo sur FireBug

Ce que permet FireBug

• Inspection de variable en mémoire
• Exécution step-by-step
• Outils de performance (load time, nombre d’itération, ) du profiling
• Exploration du HTML, CSS, DOM
• et bien plus…

Firebug is the must-have extension for Firefox that provides debugging, profiling, DOM inspection, and much more. Firebug author Joe Hewitt came to Yahoo! on January 25 to announce the 1.0 release of Firebug and to walk us through its power-user features — even experienced Firebug users will be amazed by the hidden gems in this presentation. (voir la vidéo)

Comment dans l’exemple suivant nous pouvoir les variables changées en mémoire.

et ensuite

Comme le dit ce commentaire, c’est un “must” d’avoir cet outil dans votre boîte à outils.

La philosophie

Les popup bloqueurs sont là pour nous éviter les fenêtres que nous ne désirons pas et principalement celle que nous ne pouvons pas annulées. Ainsi, si on appel un popup sur l’événement “onload” du body ou sur le “mouse out” d’une image le popup bloqueur sera alerté. En général, les événements qui ne peuvent être annulés par l’utilisateur ou qui ne sont pas activés par lui de façon explicite sont bloqués.

Les événements proscrits sont :

• body onload
• image on mouse over, mouse out
• onunload
• …

Aussi le popup bloqueur empêche les événements suivants :

• setHomePage() s’il n’est pas généré par l’utilisateur
• Les script qui désirent automatisé les recherches du “search pane”
• …

Un bonne pratique !

Sachant cela une bonne pratique est de récupérer la valeur de retour de la fonction window.open pour validée si elle est NULL

function popUp()
{
var nouvelleFenetre;
nouvelleFenetre = window.open(...,...,...);
if( nouvelleFenetre == NULL )
{
alert("Vous avez un bloqueur de fenêtre. S'il vous plaît déactivé le pour ce site");
}
}

Certes les “popup bloqueurs ” sont une fonctionnalité intéressant, mais il semble que les constructeurs de publicité innovent avec du flash qui vol et qui parfois même rendent le site inutilisable par des zones transparentes par-dessus les contrôles.

À suivre…

Référence:

• About popup blocker (MSDN)
  
• Détails du Service Pack 2 de Windows XP

Avez-vous déjà imaginé ou désiré “browser” un blogue en ligne de commande ? Et bien M. Rob McFarland a exhaussé vos voeux, s’ils étaient !

Je suis très inpressionné par ce thème pour WordPress fait par Rod McFarland. Vous pouvez voir le thème en action sur le site de thème de Word Presse ou sur ce site Morticious Mind Thrind.

Voici, le Web 2.0 en mode commande line et/ou en mode “souris” ! Il faut aussi voir ce projet sous l’oeuil de l‘utilisabilité et de la programmation !

Pour la programmation “Wouaw”

Une grande partie du site, si ce n’est pas la totalité, est fait en javascript. D’ailleurs, si nous ne permettons pas le javascript, comme le ferait Steve Gibson, nous avons seulement droit à un thème standard de WordPress.

Il utilise de façon intéressantes les CSS, Body.OnLoad, OnKeyDown, OnKeyUp et OnClick pour rendre les fonctionnalités du blogue en ligne de commande.

Et pour l’utilisabilité…

Dans une vague ou nous sommes à la recherche de l’expérience et la rapidité du “desktop” dans les applications web, avec la vague “Ajax”, M. McFarland nous apporte avec la même technologie une vision totalement différente et très intéressante.

Liens:

Sur son blogue standard avec explication des commandes.
Sur le site de gestion de source code de GoogleCode.
Sur le site de visualisation des thèmes de WordPress.
Très intéressant !

À suivre…

Les compagnies à gros budget comme Yahoo, Google et Microsoft développent ce nouveau secteur avec beaucoup d’investissement. J’ai trouvé aujourd’hui le “Yahoo! Developer Nerwork” dans lequel nous pouvons retrouvé une section sur les interfaces utilisateurs et une autre sur design parttern.

Yahoo! UI Library

Yahoo! nous offre en mode “open source” une liste de librairie Javascript et autre pour le traitement des interactions avec les usagés.

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Cette librairie nous donne accès aux systèmes d’animation, de “drag & drop”, de calendrier et bien plus…

Yahoo! Design Pattern Library

Yahoo! faisant beaucoup de développement, a fini par développer des “design pattern” qui sont les meilleures solutions à des problèmes spécifiques.

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern.

Nous avons ainsi accès au “tutoriel” décrivant comment et quand utiliser les “toolstip invitation” et autres éléments graphiques.

Référence:
Yahoo! UI Library
Yahoo! Design Pattern Library
Bonne Lecture

Cependant comme toute chose il peut y avoir des inconvénients, entre autres lorsque nous ajouter des événements avec “Attributes.Add” et que nous avons aussi un “component” de validation comme le “RequiredField” ou le “RegexValidator“.

Le cas que j’ai vécu avait un bouton avec un Attributes.Add( “onClick” , “valideForm()” ).

Le problème est survenu lorsque j’ai rajouté à ma page les contrôles de validation comme le “RegEx Validator“. À ce moment la page en question m’affiche une erreur Javacript.

Le message d’erreur me dit qu’il me manque un “;” ce qui est surprenant comme la page fonctionnait quelques minutes auparavant. Après un analyse plus poussée du problème (en regardant la source HTML), j’ai découvert que .NET avait rajouté après mon “valideForm” une autre fonction javascript.

Et que comme je n’avais pas mis le “;” à la fin de la linge Attributes.Add( “onClick” , “valideForm();” ) quand il a rajouté sa propre validation la page n’était plus fonctionnel au niveau du javascript.

En conclusion, c’est une bonne pratique, dans tous les langages de programmation, qui agit avec du javascript (Java, PHP, ASP.NET), de mettre le “;” en fin de ligne même s’il n’est pas nécessaire pour le bon fonctionnement du programme.

Ceci cause deux problèmes :

1. L’utilisateur attend après le système pour rien.
2. Si le formulaire n’est pas dans le haut de la page, l’utilisateur perd la position dans la page.

La principale cause que nous avons utilisé un reload au lieu d’un bouton reste

<input type="reset" />

est que nous utilisons une image comme bouton reste. Il est possible avec une image de soumettre un formulaire

<input type="image" src="..." />

cependant, nous n’avons pas de

<input type="reset_image" src="..." />

qui nous permettrai de faire un “reset” en image. Nous devons donc faire appel au javascript pour nous permettre de faire un effacement du formulaire convivial. Nous allons premièrement utiliser une image normale :

<img border="0" src="/images/btnErase0.gif" />

et ensuite l’entouré d’un href avec un événement javascript onclick :

<a onclick="document.nom_du_form.reset();return false;" href="...">

Voilà, vous avez un formulaire dont la fonctionnalité d’effacement est “user-frenbly”.