Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site : →
Archives mensuelles :
jQuery Mobile — Introduction aux applications web mobile
jQuery Mobile est un framework basé sur jQuery dont l’objectif est de fournir un ensemble de composant prêt-à-l’emploi pour réaliser des applications mobiles en HTML5 & CSS3 accessibles sur iOS, Android, Blackberry, bada, Windows Phone, Palm WebOS, symbian ou encore Meego. Cerise sur le gâteau, les applications réalisées avec jQuery Mobile réagissent comme les applications natives, en terme d’UI et d’UX. →
Recommandations pour développeurs web front-end
Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin. Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs. →
Lutte des classes CSS !
Les classes CSS sont probablement le meilleur ami de l’intégrateur web, mais peuvent vite devenir un cauchemar si la réflexion ne précède pas l’action. Au-delà des conventions de nommage plus ou moins sémantiques, il existe de nombreuses stratégies pour mettre en place une architecture CSS modulable et évolutive. Un temps décriées au profit des identifiants uniques pour de viles questions de performances, les classes reprennent du poil de la bête. Sans forcément tomber dans la «classite» aiguë, voyons rapidement différentes manières d’organiser nos feuilles de style CSS. →
Moobile — Framework pour application mobile avec MooTools
Les goûts et les couleurs
Cette présentation faite par David Rault à l’occasion de Paris Web 2011 présente la symbolique que notre culture occidentale associe généralement avec les couleurs de notre quotidien. Vous y trouverez la représentation des 11 couleurs de base, quelques conseil pour le choix d’une palette de couleurs, ainsi que de nombreux exemples de sites web commentés. L’auteur a pris soin de parsemer son discours de nombreuses anecdotes qui rendent cette vidéo agréable à consulter. →
Tutoriels pour apprendre HTML & CSS
Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. →
osmLeaflet.jQuery — API Open Street Map avec jQuery
osmLeaflet.jQuery est un plugin jQuery dédié à la gestion de l’API de Leaflet pour afficher des cartes basées sur Open Street Map. C’est une alternative intéressante à Google Maps, qui, le rappelle Mathieu Robin, est un service payant dans le cadre d’une utilisation commerciale. Quant à OpenStreetMap, il s’agit d’un projet de cartographie mondiale modifiable et dont les données dont libres. →
jPages — Pagination avec jQuery
jPages permet de créer un système de pagination à partir d’une liste ou de n’importe quel container. Ce plugin jQuery propose de nombreuses fonctionnalités : déplacement automatique, au clavier ou encore sur l’évènement scroll. La navigation est entièrement personnalisable. Plugin compatible avec tous les navigateurs modernes et avec Internet Explorer à partir de IE7. →
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. →