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...

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...

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...

Le nombre et la largeur des colonnes, la couleur et l’image du fond, le titre, le type et la disposition des menus (onglets ou liste), la présence d’un nuage de mots-clés… Bref, tout (ou presque) est disponible et paramétrable dans ce générateur de thèmes pour WordPress. Une fois votre thème réalisé et visualisé, vous pourrez télécharger tous les fichiers (style, images, template…) nécessaires à la personnalisation de l’installation de base de WordPress.

Forcément, ça ne fera pas tout le travail à votre place mais ça devrait bien vous avancer. Il n’y a pas grand chose de plus à ajouter sur ce générateur très prometteur.

Testez le générateur de thème WordPress

Source : Article orignial

En savoir plus :

1. Thèmes WordPress Et voilà une nouvelle ressource pour vos thèmes WordPress. Le...
2. Thèmes WordPress E-Commerce Pour rester dans la continuité de mon dernier billet vous...
3. WordPress 2.8 arrive Encore nouveau dans le monde WordPress, je ne pensais pas...

Comme beaucoup le savent, chaque navigateur embarque son propre moteur de rendu graphique et cela engendre des différences au niveau de l’affichage pour un même site selon le navigateur utilisé et sa version. Pour un webmaster, est-il impératif de rendre ses sites compatibles avec tous ces logiciels ?

C’est une bonne question à laquelle, je ne serai répondre pour vous. Tout dépendra en effet de votre site Internet, de sa complexité, de vos connaissances des standards et compétences en CSS, (x)HTML, Javascript… mais également de votre cible de visiteurs. Quel intérêt de rendre son site compatible Safari, s’il ne sert qu’à partager des photos avec des proches qui utilisent tous Internet Explorer ? La problématique inverse se pose si vous souhaitez développer un site sur les Mac et que votre site Internet n’est pas compatible Safari ou Opera…

Internet Explorer et Mozilla Firefox

Bref, dans la plupart des cas, et c’est la politique que j’adopte pour mes sites, je pense qu’il est nécessaire de maintenir son site pour les versions 6&7 de Internet Explorer et la version 3 de Firefox. Au regard de l’étude réalisée par Xitimonitor courant décembre 2008, on remarque que ces trois navigateurs représentent près de 90% des visites sur Internet, réparties de la façon suivante :

• 36,3% pour Internet Explorer 7
• 23,6% pour Firefox 3
• 23,2% pour Internet Explorer 6
• 7,5% pour Firefox 2

Les rendus des moteurs de Firefox 2 et 3 étant très proches, les tests sur Firefox 3 suffisent généralement pour valider le fonctionnement sur ces deux navigateurs. En revanche pour Internet Explorer, des tests s’imposent pour les deux versions, car elles diffèrent plus l’une de l’autre. Le respect de ces navigateurs vous permet donc d’être compatible avec au moins 91% des utilisateurs d’Internet à l’heure actuelle.

L’avenir d’Internet Explorer 6

Cependant, comme le montre l’étude marketshare.hitslink.com, la version 6 d’Internet Explorer est en pleine perte de vitesse au profit de sa version 7 mais également au profit de Firefox. D’ici peu de temps, il ne devrait plus être utile de valider le bon fonctionnement de ses sites sous IE6, qui par ailleurs souffre d’importantes lacunes, l’une des plus connues, étant la non gestion de la transparence des images au format PNG.

J’ai, en partie, arrêter de rendre mes sites 100% compatibles avec Internet Explorer 6, tout du moins pour ce qui concerne l’utilisation des formats PNG. Si vous naviguez avec Internet Explorer 6, vous pourrez le remarquez grâce aux deux images PNG en haut à droite de ce blog (Twitter et RSS), dont le fond, théoriquement transparent, vous apparait gris.

Et vous, sur quels navigateurs testez-vous vos sites ?

Sources :

• Xitimonitor.com
• marketshare.hitslink.com

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je réalise...
3. Exécution Javascript sur le chargement d’une page Comment exécuter plusieurs scripts Javascript au chargement d’une page ?...

<a href="http://www.loicmorvan.fr" style="font-weight:bold;"><b>LoicMorvan</b></a>
ou
<a href="http://www.loicmorvan.fr"><b>LoicMorvan</b></a>.

Ce n’est pas bien grave, car le résultat final sera identique, mais lorsque vous le pouvez, privilégiez l’utilisation de classes et identifiants CSS, dont les attributs de rendu graphique seront rapatriés dans un ou plusieurs fichiers CSS séparés du code.

<a href="http://www.loicmorvan.fr" class="gras">LoicMorvan</a>
et dans votre feuille de styles CSS
.gras{font-weight:bold;}.

Cela paraît anodin comme différence mais beaucoup de choses en découlent.

• premièrement, vous pourrez réutilisez les styles prédéfinis dans votre feuille de styles sur d’autres éléments des vos pages de votre site Internet.
• deuxièmement, lors d’une mise à jour de votre site Internet, tous vos styles seront concentrés dans votre ou vos feuilles de styles, et la modification vous évitera ainsi de devoir parcourir tout votre code pour retrouver les différents styles embarqués.

Un point important par rapport au CSS est également la proscription de l’utilisation des tables HTML pour la mise en forme de données non tabulaires. En effet, avec l’utilisation de tables HTML, votre structure de page sera figée alors que si vous aviez utilisé des feuilles de styles CSS, un ajustement des propriétés de celles-ci vous permettrait de remodeler aisément votre page.

L’utilisation des feuilles de styles peut aller beaucoup plus loin que l’exemple ci-dessus. C’est ce que vous pourrez découvrir sur le site CSS Zen Garden, où il existe de nombreuses pages développées à partir du même code HTML et où, seule la feuille de styles CSS change. Vous pourrez alors constater que toutes ces pages n’ont, d’un point de vue visuel, strictement rien à voir entre elles.

Pour votre prochain site Internet, pensez un minimum au CSS, il vous simplifiera la vie

Liens :
CSS Zen Garden
Annuaire des styles CSS Zen Garden

En savoir plus :

1. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je réalise...
3. Générateur de thèmes WordPress Vous ne savez pas par où débuter pour créer un...