21/05/12

RWD Image Maps — Images réactives «responsives»

Vous vous souvenez des images réactives ? Si oui, vous serez heureux d’apprendre qu’il est désormais possible de combiner Image maps et Responsive design grâce au plugin jQuery rwdImageMaps qui recalcule les aires déterminées par les coordonnées pour tenir compte du redimensionnement du viewport, le cas échéant. Lire le reste de cet article »

16/04/12

jQuery NailThumb — Miniatures à partir d’images haute-résolution

jQuery NailThumb — Créez des miniatures facilement à partir d’images en grand format, sans aucune distorsion, avec une ligne de code. Pour cela, vous aurez besoin d’un container par miniature et de spécifier ses dimensions (hauteur et largeur) via les CSS par exemple. Lire le reste de cet article »

01/04/12

Bacon : alignement de texte «exotique» avec jQuery

Bacon est un plugin jQuery qui offre de nouvelles possibilités d’alignement de texte en dehors du centrage ou de l’alignement en drapeau à droite ou à gauche. Il s’agit de mettre les techniques d’habillages de texte par une forme que l’on rencontre dans les magazines papier dans une page web. Lire le reste de cet article »

11/11/11

Popcorn.js is — Framework Javascript vidéo & audio HTML5

Popcorn.js is est un framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Popcorn normalise les propriétés, les méthodes et les événements natifs des éléments média audio et video HTML5 sous la forme d’une API extensible via des plugins. En gros, il s’agit du jQuery de la vidéo. C’est dire l’ambition des concepteurs qui espèrent révolutionner le monde de la vidéo en l’adaptant au web via l’utilisation des ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux. Lire le reste de cet article »

31/08/11

FlexSlider — un Slider flexible et sémantique pour jQuery

FlexSlider est un slider, un de plus, qui permettra de faire défiler vos contenus avec le marquage HTML de votre choix.  FlexSlider est utilisable avec le clavier, ce qui est toujours bon pour l’accessibilité ; son poids plume (6 kb minifié) est également un atout de taille. Il est possible d’ajouter une légende (caption) pour chaque image. Pour cela, une simple balise p sous l’image suffit. Pour plus de sémantique et pour profiter des nouvelles balises apportées dans la hotte du Père Noël HTML5, il faudrait tester FlexSlider avec une balise figure et un bon vieux figcaption des familles. Merci à @allfordesign et @oncletom pour la suggestion :) Lire le reste de cet article »

18/08/11

spin.js — Icône de chargement animée sans image

spin.js est une solution en Javascript (compatible avec jQuery) qui permet d’afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3. La compatibilité avec Internet Explorer en version 6, 7 et 8 est assurée grâce à WML.  Lire le reste de cet article »

15/08/11

73 tutoriels pour faire défiler vos contenus (Slideshow, Sliders & Diaporama)

Les diaporamas et autres Slideshows sont devenus un passage quasi-obligé pour les sites qui veulent présenter un grand nombre d’informations tout en ménageant l’espace disponible. Voici une liste condensée de 73 tutoriels ou scripts jQuery détaillés pour mettre en avant vos contenus texte et/ou image. Lire le reste de cet article »

15/07/11

Développer une application avec HTML5 et Javascript

Ce tutoriel HTML5  intitulé «Retours sur un développement HTML5 & JavaScript avec Visual Studio 2010» présente les différentes étapes pour réaliser un mur d’images et avoir la possibilité de zoomer sur une carte et de dézoomer pour retrouver une vue d’ensemble. Le tutoriel est composé de 12 parties que je vous laisse découvrir : Lire le reste de cet article »

01/11/10

Galerie d’images avec jQuery

Rédigé sur Alsacréations par Benjamin De Cock, ce tutoriel pour faire une galerie d’image avec jQuery est un cas d’école pour qui veut obtenir le résultat le plus simple possible visuellement tout en prenant en compte l’accessibilité le plus largement possible avec une démarche non intrusive. Je vous laisse avec la démo qui vaudra sûrement mieux qu’un long discours.

30/10/10

JQuery Slide Effect — Animation de texte au survol d’une image

JQuery Slide Effect est un tutoriel concis mais complet qui explique comment parvenir à un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.) au survol d’icelle. La démo du Slide sera sûrement plus parlante ;)