jMenu est un système de menu horizontal en jQuery et jQuery UI qui autorise un nombre illimité de sous-menus. jMenu possède plus d’une douzaine d’options : largeur des sous-menus, position (top et left) du premier niveau par rapport au niveau supérieur, délai d’ouverture et de fermeture des sous-menus, type d’effets applicables à l’ouverture ou à la fermeture des niveaux, etc. →
Le Graphisme au XXe siècle est la traduction française de Graphic Design (A Concise History) écrit par Richard Hollis et publié en 1994. Ce livre est une mine d’or pour pour qui veut connaitre l’histoire du Graphisme à travers les pays qui lui ont donné ses lettres de noblesse : le futurisme et l’Italie, la Russie soviétique, l’Allemagne, les Pays-Bas, la Suisse, la France, la Grande-Bretagne, les Etats-Unis, l’Europe du Nord. Il contient plus de 800 illustrations et le texte est très riche. Je lis généralement en prenant des notes pour plus tard ou en surlignant les passages qui me plaisent au Stabilo. Ce billet est la compilation des extraits qui ont plus particulièrement suscité mon intérêt. Ils ne suivent pas forcément l’ordre des pages et certains passages ont été remaniés afin de rester compréhensibles une fois sortis de leur contexte.
Afficher ou masquer les mots de passe de vos formulaires en jQuery — Le comportement normal d’un champ input de type password en HTML est de masquer les caractères en cours de frappe en les remplaçant par des bulles pour garantir la confidentialité de votre mot de passe. Pratique, au cas où quelqu’un lirait par-dessus votre épaule ou vous épierait avec une paire de jumelle. Si ce comportement par défaut a son utilité, il pourrait être intéressant d’avoir le choix et de n’afficher ou masquer ce mot de passe qu’en cas de besoin, à l’aide d’une case à cocher. →
qTip est un plugin jQuery pour créer des infobulles. Il a été conçu dès le départ pour être pris en main facilement par les utilisateurs. qTip offre un maximum de fonctionnalités comme les coins arrondis et la mise en place de bulles de dialogues, mais son point fort est l’affichage de tout types de contenus : attribut title ou attribut personnalisé tooltip, ou une image. Il est également possible d’afficher du contenu dynamique tel que miniatures de pages Web, vidéos en provenance de Youtube ou traduction d’un mot. qTip est probablement l’un des meilleurs script pour vos bulles d’aides ! →
Comme à son habitude, le petit journal du Web fait le point sur les sites et les services (re)découverts pendant les 30 derniers jours. Pour décembre, ce petit journal vous propose : à la Une, un site consacré à l’accessibilité Web ; dans la rubrique Graphisme et Ergonomie, un bookmarklet pour afficher les Wireframes ; dans la catégorie CSS, CSS3 et HTML5, une piqûre de rappel sur l’organisation des feuilles de styles CSS ; et nous terminons avec un rappel des éléments à prendre en compte lors de la migration d’un blog WordPress et une mine de ressources pour les chefs de projet Web ! →
markItUp! est un plugin jQuery créé par Jay Salvat qui permet de transformer un textarea en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage ! markItUp! n’est pas un éditeur prêt-à-l’emploi, ce n’est pas un éditeur Wysiwyg, mais offre un moteur de balisage léger, personnalisable et souple dont les développeurs pourront tirer partie. →
SlideJs est un Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama. SlideJs est simple à utiliser et propose de nombreuses options : auto-rewind, auto-play, effets de fading et de transitions, préchargement d’images, pagination automatique, etc. Compatible avec Internet Explorer 7/8/9, Firefox 3+, Chrome, Safari, Safari Mobile et même IE6 ! Slides est disponible sur Github. Via Pierre Vion.
La typographie sur le Web monte en puissance. Google ajoute des fontes supplémentaires à son répertoire Google Font Directory qui compte désormais près de 60 typos prêtes à l’emploi grâce à Google Font API. Cette bonne nouvelle s’accompage de l’arrivée de Google Font Previewer for Chrome. Cette extension vous permettra de choisir votre typographie parmi les fontes disponibles et d’effectuer les réglages nécessaires (taille, style, graisse, ombré, casse, etc.). Reste à copier-coller le code fourni par Google Font Previewer pour rendre vos pages plus belles (ou pas) ! →
Lightbox sans Javascript — Les Lightbox s’affichent généralement suite à un événement click capturé par Javascript. CSS ne possède pas de pseudo-classe :click, mais cela n’a pas empêché Jérémy Barbe (@capitainemousse) de créer une Lightbox full CSS en remplaçant l’événement click par la pseudo-classe :focus et la propriété tabindex pour permettre aux images d’avoir le «focus». Voir la démonstration. →
Après l’article Quelques notes sur la balise h1 avec HTML5 dans lequel j’ai abordé l’utilisation des niveaux d’en-tête `h1 — h6` pour savoir dans quelle mesure il est judicieux d’utiliser une ou plusieurs balises `h1` dans une même page Web, je continue sur ma lancée avec la notion d’Outline. Cette dernière fournit la liste des sections imbriquées impliquant les éléments de type Sectioning Content ou Sectioning Root. Chaque section peut être associée à un niveau d’en-tête et peut contenir autant de sections imbriquées que l’on veut. Notez que les sections dont on parle ne sont pas nécessairement l’élément `section` lui-même (même si ce dernier fait partie des éléments ayant une portée de Sectioning Content). →
