Calendrier jquery

Il dispose de nombreuses options telles que la possibilité d’interdire la saisie de certaines dates, celle de préselectionner une date ou de choisir celle du jour… Il supporte aussi un grand nombre de format de dates, dont le format français jj/mm/aaaa qui nous intéresse plus particulièrement. Un grand nombre classes CSS permettent également de l’adapter aisément au look de votre site.

Plutôt que de longs discours, voici le lien vers un calendrier développé en Javascript, utilisant le framework jQuery, très simple à mettre en place.

Lien : http://jqueryui.com/demos/datepicker/

PS : Pour informations, ce calendrier a également été utilisé sur aviresto.com dans la partie organisation de sortie au restaurant.

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je réalise...
3. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...

Il s’agit d’un moteur de recherche de tweets (donc de messages pour le désormais célèbre Twitter), mais plus que le fond, c’est surtout la forme qui importe ici. Toutes les conventions de présentation du web y sont cassées car le designer a laissé libre cours à son imagination, comme le montre la capture ci-dessous.

J’ai mis quelques secondes avant de comprendre comment fonctionner ce site. J’ai d’abord cru qu’il y avait une erreur, car aucun résultat ne s’affichait et j’ai fini par comprendre que chaque oiseau (en origami) apportait un résultat et il suffit de passer la souris dessus pour le découvrir.

On remarque aisément avec ce type de site au design complètement libre que nous avons tous été conditionnés par rapport à la lecture et à l’analyse d’une page web. Dès qu’un site s’en éloigne trop, on devient vite perdu et il faut s’adapter, mais cela permet de découvrir de superbes créations.

Pour la petite anecdote technique, toute la conception du site Tory’s Eye est faite à base de Javascript et il n’y a aucun recours à une animation Flash… Ca aussi, c’est asssez bluffant !

Voilà, je vous laisse découvrir le site Tory’s Eye. N’hésitez pas à laisser un commentaire.

Et vous, connaissez-vous d’autres sites où vous avez eu besoin d’un certain temps d’adaptation ?

En savoir plus :

1. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
2. Comment réaliser un design web 2.0 ? Je me permets de relayer ici un article publié hier...
3. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...

Voici donc la solution ultime pour vos applications et sites Web. Plus de 100 000 icones sur une seule et même page Web… c’est fou ! Par contre, forcément, la page met un peu de temps à se charger.

Source : http://www.iconfinder.net/ultimate

En savoir plus :

1. Le SP2 (service pack 2) de Windows Vista enfin disponible Encore un billet qui s’éloigne du web et du webmastering,...
2. Le plein d’icones Web 2.0 pour vos sites Voici juste un petit billet pour vous présenter deux ressources...
3. Thèmes WordPress E-Commerce Pour rester dans la continuité de mon dernier billet vous...

E-commerce ? Oui, vous avez bien lu ! WordPress est avant tout un outil de gestion de blog, mais aussi un outil de CMS au sens large. Et grâce à la communauté qui s’agite autour de WordPress, il est même devenu un outil de e-commerce à part entière, cette prouesse étant rendu possible en le couplant à des outils de e-commerce tels que OS Commerce et aux nombreux plugins disponibles.

Personnellement, je n’ai jamais utilisé WordPress dans un tel contexte, mais les retours qu’on peut lire sur la toile sont plutôt positifs.

Je vous laisse maintenant découvrir la sélection de thèmes WordPress e-commerce.

En savoir plus :

1. Encore une sélection de thèmes WordPress Bon, je sais, il y a beaucoup d’articles consacrés à...
2. Thèmes WordPress Et voilà une nouvelle ressource pour vos thèmes WordPress. Le...
3. Générateur de thèmes WordPress Vous ne savez pas par où débuter pour créer un...

Si je vous signale ce site, ce n’est pas pour car j’ai acheté des actions WooThemes, mais plus car il existe tout de même certains thèmes gratuits dont le thème Snapshot idéal pour présenter ses billets sous forme de galeries photos :

Thème WordPress Snapshot

Je vous laisse découvrir le site WooThemes, qui vaut tout de même le détour.

En savoir plus :

1. Encore une sélection de thèmes WordPress Bon, je sais, il y a beaucoup d’articles consacrés à...
2. Thèmes WordPress E-Commerce Pour rester dans la continuité de mon dernier billet vous...
3. Générateur de thèmes WordPress Vous ne savez pas par où débuter pour créer un...

Dom Inspector (version 2.0.3)

Dom Inspector est une extension qui vous permettra de voir le contenu de votre page sous forme d’arbre HTML comme le montre l’exemple suivant.

Cette fonctionnalité s’avère pratique mais pas autant que celle nommée « Display Element Information » présente au sein de l’extension Web Developper détaillée juste après.

Web Developer (version 1.1.6)

Je pense qu’il s’agit de l’extension la plus intéressante de ce panel. Elle permet de retrouver des références à des images cassées, de désactiver une ou plusieurs feuilles de style CSS, la gestion des cookies, l’exécution de Javascript.

Il est également possible d’éditer une feuille de style directement depuis le navigateur pour tester rapidement des changement ou bien de retrouver facilement les styles d’un élément particulier avec l’option « Display Element Information » depuis le menu « Information ». Une autre fonctionnalité intéressante est la retaille de la fenêtre aux dimensions standards (800×600, 1024×768….) pour vérifier la compatibilité de votre site.

Firebug (version 1.33)

Firebug possède certaines fonctionnalités similaires au plugin Web Developper, mais la fonctionnalité la plus intéressante est sans aucun doute la console permettant d’analyser tous les appels HTTP effectués depuis une page. Cela permet de débugger très facilement toute intégration d’AJAX au sein de votre site web.

Cette extension permet aussi d’analyser les temps de chargement de vos ressources externes (scripts javascript, feuilles de style, images…).

IE Tab (version1.5.2)

Comme je vous l’avais dit dans un précédent post, ce plugin est utile et vous permettra la navigation de votre site internet sous Internet Explorer tout en restant dans un onglet Firefox. Quel avantage par rapport à un Internet Explorer standard ? Juste un clic sur le plugin et le rendu de la page courante s’opère avec Firefox… imaginez un peu le temps gagné !

Téléchargement des extensions

• Dom Inspector
• Web Developer
• Firebug
• IE Tab

Vous avez des plugins à conseiller ? Laissez un commentaire sur cet article et dites-nous tous vos secrets…

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. WordPress comme outil de CMS Voici un article intéressant glané au passage sur le site...

En tout cas, moi j’aime ! Je trouve que ça a tendance à alléger le design tout en s’intégrant bien et surtout cela améliore l’ergonomie.
En voici un bel exemple d’utilisation, capturé sur le site maville.com, où en plus de la bonne intégration, la popup est bien travaillée et complète.

En plus, du point de vue du développement, ces popups modales s’intègrent en général très facilement et il existe de nombreuses ressources adaptées à différents cas d’utilisation :

• LightBox : il s’agit sûrement du plus connu de ces systèmes. Il ne permet cependant d’afficher que des images. L’avantage de ce script est qu’il bénéficie d’un nombre important d’effets de chargement et de transition entre images…
• ThickBox : ThickBox est une « version étendue de LightBox » qui permet pour sa part d’afficher de façon modale des formulaires, des iframes….
• il en existe encore de nombreux autres tels que : HighSlide JS, SlimBox, Sexy Lightbox, ClearBox, VideoBox, ModalBox, Lightview…

Pour finir, je vous laisse cet article intéressant qui recense 8 de ces systèmes, tous basés sur du Javascript : 8 popups modales en Javascript

Liens :
8 popups modales en Javascript
MaVille.com

En savoir plus :

1. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. Exécution Javascript sur le chargement d’une page Comment exécuter plusieurs scripts Javascript au chargement d’une page ?...

La présentation qui suit recense quelques-unes des bonnes pratiques à mettre en oeuvre. Il n’y a pas grand choses d’autres à ajouter et je vous laisse découvrir ces bonnes pratiques résumées dans la présentation ci-dessous (un peu déjantée parfois).

Si, j’allais oublié, je rajouterai dans les bonnes pratiques du web design léger de ne pas utiliser le langage .Net, très verbeux et qui ne respecte que peu de standards dans le code généré.

Article original : beewareblog.com

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Ressources, tutoriels et guides WordPress en français Grâce à cet article paru sur le blog Presse-Citron.net, WordPress...
3. 5 étapes pour une vente facile Je ne me suis pas foulé et je reprends tel...

C’est une revue plutôt intéressante qui traite bien entendu de design web, mais qui ne se restreint pas aux côtés artistiques et aborde le sujet sensible de l’ergonomie. On retrouve dans ce numéro de la revue Web Design une interview de Keren Lerner, spécialiste en communcation visuelle qui y va de son petit conseil.

Pour elle, en effet, il n’est pas judicieux de proposer plus de 7 liens par groupe de liens de navigations, au risque que l’internaute ne trouve pas son contenu rapidement.

Web Design : Combien de liens de navigations devrait-il y avoir ?

Keren Lerner : C’est toujours un point de débat. Je recommande un maximum de sept liens dans n’importe quelle zone de liens. Vous pouvez avoir les liens de navigation en haut ou à gauche mais si  vous en avez huit ou plus, cela a tendance à avoir l’air encombré. [...] Cela  rend le site fouillis et lui fait donc perdre en crédibilité. [...]

WD : Si nous ne pouvons avoir que sept liens de navigations, comment faisons-nous pour inclure toute la navigation dont nous avons besoin ?

KL : Vous n’avez pas besoinn de mettre la totalité de la navigation dans le menu principal, elle peut-être mis en valeur ailleurs. Votre page d’accueil et les autres pages de renvoi vous permettront d’inclure vos liens de navigation principaux[...]

C’est un point sur lequel je suis maintenant plutôt d’accord par rapport à l’ergonomie et référencement, car cette méthode permettre d’alléger le design de la page et accordera du point de vue des moteurs de recherche, une importance hiérarchique et une structuration de l’information.

Et vous que pensez-vous de cette règle des 7 liens de navigation ?

PS : J’en connais un qui va être content en lisant cet article. Il va enfin pouvoir récupérer sa revue…

En savoir plus :

1. Le coup de la panne par Google ! Tout le monde en parle depuis le début de la...
2. Retour sur l’actualité du mois de juin Voici un article très intéressant paru sur le site d’At...
3. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...

Le tutoriel, en anglais mais très simple à comprendre, repose sur l’utilisation d’Adobe Photoshop et est articulé autour de 26 étapes élémentaires. Chacune d’entre elles est illustrée à l’aide d’une capture d’écran et d’un court texte explicatif ce qui permet ainsi de bien comprendre le cheminement et le but à atteindre.

Liens :

• Article original sur beewareblog.com
• Tutoriel original sur sixrevisions.com

En savoir plus :

1. A bas les conventions… vive l’art et le design ! Voici un petit post pour vous présenter un site que...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. WordPress comme outil de CMS Voici un article intéressant glané au passage sur le site...