Développeur front-office, Drupal themeur en Auvergne
+ Todo list

Masked Input Plugin. Des masques pour vos formulaires avec un plugin pour Jquery

3

Voici un plugin pour le framework javascript Jquery qui permet d'ajouter un masque aux champs d'un formulaire. La saisie n'en est que plus facilitée pour l'internaute.

Le masque est défini selon un format précis (dates, numéro de téléphones, etc.) et au fur et à mesure de la saisie, le masque se voit remplacer par les caractères tapés.


exemple d'un masque sur une date.

Utilisation et démonstration du masked input plugin en jquery sur digitalbush.com

Le fichier js du plugin

Packed (2.8k)

L'accessibilité en CSS

1

Les bonnes pratiques à adopter pour que les handicapés puissent lire votre site. La plupart des recommandations ne sont en fait que du bon sens (comme souligner ses liens hypertextes) mais on ne sait jamais... C'est toujours bon à savoir.

http://24ways.org/2007/css-for-accessibility

Sobees : Sa vie numérique agrégée sur une seule et même application

2

Sobees est une sorte de netvibes du futur en plus joli, à installer directement sur son bureau d'ordinateur, qui vous permettra (dispo début janvier en bêta) de consulter toute votre activité web (mail, facebook, flux rss de blog, forums, vidéo youtube, dailymotion, etc) hors ligne dans la mesure où vous avez préalablement récupéré tous vos flux à la manière de la technologie utilisant google gear.

Sobees est construit à partir des dernières technologies .NET (dot net) de microsoft ; et tournera sur du windows vista et xp

Via AccessOWeb

Vidéo de présentation de Sobees.

Ça a l'air bien gaulé, et super pratique. Mais bon. Pas facile de faire changer les manières de surfer aux internautes, mais j'ai hâte d'essayer... Bzzz.

Paginer en Ajax

0

Charger beaucoup de données en ajax en présentant les choses de manière ordonnée et rapidement, ben c'est pas si simple. L'affichage des pages avec des données tabulaires (liste d'articles, galerie d'images, topics d'un forum, etc.) laisse parfois à désirer sur certains sites. On passe les variables de tri à l'url et on recharge la page pour que la requête à la base de données soit bien exécutée. En gros on filtre les résultats de manière crade. Mais sans doute optimisé pour le référencement.

Ce petit script est donc idéal pour par exemple afficher des commentaires sur le billet d'un blog, le reste de la page ne sera pas rechargé. Bien des systèmes sont pénibles ; où l'on est obligé de recharger la page pour continuer à naviguer sur le site. C'était le cas de Youtube. Auparavant pour lire les commentaires d'une vidéo il fallait recharger la page et donc cela coupait la lecture de la vidéo ; désormais les commentaires sont paginés en ajax ; c'est super pratique il faut le reconnaître ; il en est de même pour le site deezer.com , qui est un radioblog en mieux ; tout en flash. Jamais on ne recharge la page, donc jamais on ne coupe la lecture d'un morceau. Toutes les actions effectuées sont indépendantes. Optimisation !

La doc
Le Zip avec la démo.

Visualiser son site sur différents navigateurs

1

Lorsque l'on développe un site web, il faut toujours le tester sur les navigateurs les plus populaires (IE7, IE6, Firefox, Safari, Opera, Konqueror, etc.), il faut le tester avec des résolutions différentes mais il faut le tester aussi sur les différents OS (Linux, Mac, Windows), cela peut devenir une tâche très fastidieuse. Donc au final on ne teste son site que sur 1 ou 2 navigateurs et sur Mac et PC et c'est tout.

C'était sans compter sur http://browsershots.org/ qui permet de visualiser son site selon les navigateurs et les configurations.

browsershots

Vous entrez votre adresse et cela génère des captures d'écran du site pour tous les cas de configuration choisis.

1024 pixels screen size and JavaScript
# Linux: Firefox 2.0, Iceweasel 2.0, Konqueror 3.5, Opera 9.21
# Mac: Firefox 2.0, Safari 1.3, Safari 2.0
# Windows: Firefox 1.5, Firefox 2.0, MSIE 5.0, MSIE 5.5, MSIE 6.0, MSIE 7.0

Le seul soucis c'est qu'il faut attendre plusieurs dizaines de minutes avant que les premières images n'apparaissent. En effet l'adresse que vous allez rentrer va être mise à la queue. Patience, donc.

Technorati Tags: ,

Powered by ScribeFire.

Breadcrumb

1

Fil d'Ariane ou chemin de fer ou breadcrumb : C'est un outil de repérage visuel qui la plupart du temps est placé à l'horizontale et signale à l'utilisateur sa localisation dans la page ou le document qu'il visite. ex : Accueil > Informatique > Périphériques > Clavier

Une étude a été réalisée par l'université de Baltimore en 2002 afin de déterminer quelles formes prenait le breadcrumb sur les sites web et comment les utilisateurs l'utilisaient. A 95% son orientation est horizontale, à 65% le connecteur est une flèche droite > , le connecteur peut être aussi un point, un slash, un pipe, ou encore une différenciation de style dans le texte.
Sur un même site si le breadcrumb est intégré il va représenter 6% des moyens de navigations ; il permet surtout à l'utilisateur une meilleur visualisation de l'arborescence du site.

Il semble que Windows Vista ait également adopté le breadcrumb dans son interface.

Source : ici et et

Technorati Tags: ,

Syndiquer le contenu