http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/
Nice tut for filtering items using a simple menu and thumbnails.tags: jquery, effect, webdesign
10/01/2012
03/01/2012
01/12/2011
28/10/2011
Améliorer le rendu des sites sur Internet Explorer
Pour les besoins du blog de Claudy Lebreton, nous avions proposé un design simple mais contenant quelques effets, liés à l'utilisation de CSS3, toujours problématiques à rendre sur des navigateurs de type Internet Explorer d'anciennes générations.
Usuellement, nous avons alors 2 alternatives qui nous sont offertes :
- prévoir une dégradation correcte du design ainsi réalisé pour l'affichage sur ces navigateurs désuets
- avoir recours à une feuille de style séparée pour ces navigateurs pour gérer ces effets via des images ou hacks
La première alternative est souvent frustrante car elle implique souvent de rogner sur ces petits plus qui font la lisibilité et l'ergonomie d'un site (mise en valeur de certains encarts par des effets ombrés, utilisation de pseudo-éléments CSS spécifiques pour gérer des événements…).
La seconde peut vite devenir un enfer en terme de maintenance et nécessite un travail additionnel parfois conséquent au détriment de la performance de la page (ajout d'images), ce qui s'apparente à une double peine, tant ses navigateurs sont déjà peu véloces à la base.
Au fil des recherches et des expérimentations, nous avons finalement validé et utilisé 2 astuces qu'il nous semble judicieux de partager avec vous :
- l'utilisation de PIE pour l'application de décorations CSS3 (IE6 à IE9) - http://css3pie.com/
- selectivizr pour l'émulation des pseudo-sélecteurs CSS3 (IE6 à IE8) - http://selectivizr.com/
Lire la suite "Améliorer le rendu des sites sur Internet Explorer" »
09/09/2011
Agrégation de flux RSS dans TypePad via Javascript
En se basant sur l'API TypePad, je vous avais déjà montré il y a quelques temps comment faire mieux que le module natif de TypePad pour afficher les notes d'un ou plusieurs autres blogs TypePad.
La limite de ce snippet est qu'évidemment il ne peut reprendre des flux d'autres blogs tiers (WordPress, Blogger, etc…).
Il s'avère que par hasard, suite à un travail sur un autre projet, je suis tombé sur un plugin jQuery, jGFeed, permettant de faire la blague, et qu'en plus, la demande avait été formulée par l'une de nos utilisatrices des plus fidèles, princesse101.
L'affaire était donc vite entendue, muni du plugin je me suis donc lancé dans la mise en place d'un aggrégateur de blogs pour une colonne latérale de blog.
Son principe est simple : partant d'un flux RSS que vous avez à créer, le plugin et le snippet associé vous permettront d'afficher en colonne latérale les X dernières notes de ce flux dans un format que vous définirez, et reprenant le style en place au sein de votre blog (permettant ainsi toutes les outrances stylistiques de votre crû par la suite).
Lire la suite "Agrégation de flux RSS dans TypePad via Javascript" »
25/07/2011
TipTip, des info-bulles classieuses et légères pour vos liens
Ceux d'entre vous qui ont d'ores et déjà adopté des bonnes pratiques en termes de référencement savent qu'il est important de remplir le champ titre lorsque l'on insère un lien. Celui n'est en effet pas visible des visiteurs, mais il apporte une information supplémentaire aux moteurs de recherche.
Pour autant, le contenu inséré dans ce champ titre mériterait bien souvent d'être visible aux yeux du visiteur. D'une part parce que malgré tout vous vous donnez la peine de le créer et qu'il est parfois frustrant de se dire que ca n'a d'effet que sur le référencement, d'autres part parce qu'il peut également apporter une information pertinente au lecteur sur la destination du lien que vous lui proposez, pour peu que ce titre soit un tout petit peu explicite.
Pour vous aider à valoriser ce contenu, je vous propose aujourd'hui d'intégrer un petit widget très léger à votre blog qui va vous permettre de créer des info-bulles élégantes au passage de la souris et reprenant ce contenu.
Lire la suite "TipTip, des info-bulles classieuses et légères pour vos liens" »
22/07/2011
Des commentaires TypePad de toute beauté, grâce à cet éditeur wysiwyg et à jQuery
Vous qui maîtrisez maintenant TypePad sur le bout des doigts, vous savez très certainement que vous pouvez activer une option dans les commentaires qui donnent la possibilité à vos lecteurs d'enrichir la mise en forme de leur prose grâce à quelques balises HTML.
Le problème est que l'immense majorité des lecteurs de blogs ne connait strictement rien au HTML et qu'ils seraient bien en peine de devoir mettre un peu de gras ou d'italic.
Pour leur faciliter la tâche, je vous propose d'ajouter ce petit éditeur HTML tout simple. Celui-ci est compatible avec la grande majorité des navigateurs du marché (IE 6+, FF 1.5+, Safari 4+, Chrome 5+ et Opera 10+).
Pour mettre en place cet éditeur, nous allons avoir besoin :
- de vérifier que dans Paramètres > Commentaires, on donne bien la possibilité à l'utilisateur d'inclure des balises HTML,
- de faire appel à jQuery (si ce n'est pas déjà fait),
- de faire appel à la librairie de cet éditeur,
- de styler un peu tout ca,
- d'appeler la fonction d'édition sur le champ de rédaction de commentaires,
- et de forcer l'activation des boutons d'envoi et d'aperçu de TypePad.
Accessoirement, nous paramétrerons un ou deux détails supplémentaires comme le fait de n'afficher que les boutons fonctionnant sur TypePad.
Lire la suite "Des commentaires TypePad de toute beauté, grâce à cet éditeur wysiwyg et à jQuery" »
Blog de l'équipe Services de Six Apart pour partager trouvailles et astuces autour de TypePad et Movable Type.
Auteurs Recommandés
Notes les plus commentées Tout sur TypePad