Design & Graphisme

Design dans le navigateur : tous les chemins mènent au DOM !

A la lecture des articles et des commentaires sur le thème du design dans le navigateur, j’ai l’impression que l’on confond deux choses pourtant bien distinctes, voire trois, si l’on ajoute au design et au graphisme, la notion de direction artistique. Si dans certains cas, il est possible de faire la direction artistique, les wireframes et les graphismes dans le navigateur, cette méthode intégrale ne saurait s’appliquer à la majorité des projets. →

Plugin jQuery

carouFredSel — Carousel circulaire et responsive

jQuery.carouFredSel est un plugin jQuery qui transforme n’importe quel élément HTML en carousel «responsive». Le déplacement peut concerner un ou plusieurs éléments simultanément, dans le sens horizontal ou vertical, de manière infinie et circulaire, automatiquement ou suite à une action de l’utilisateur (clic ou clavier). Si toutes les options sont optionnelles, le site propose Configuration Robot : il suffit de répondre à quelques questions pour configurer le plugin à la mode de chez vous.

Conception de site web

Bazardez Photoshop et rapprochez-vous de votre navigateur

Le design dans le navigateur est une méthode de conception de plus en plus utilisée pour produire des sites web proches des besoins des utilisateurs. Pour ses détracteurs, cette méthode se limite à ne plus utiliser Photoshop au profit de HTML, CSS3 et Javascript. Le titre de l’article est volontairement provocateur car dans les faits, le design dans le navigateur n’interdit pas d’utiliser Photoshop ou Illustrator pour concevoir les pages. Il faut juste garder à l’esprit que ces logiciels pourraient — dans la plupart des cas — être délaissés au profit d’un simple crayon à papier pour faire un croquis qui sera directement transformé en page web sans passer par la case Photoshop. La suite de l’article est une traduction libre de Throw away Photoshop and be true to your medium de James Weiner (@jamesweiner) paru sur Government Digital Service (GDS). →

Revue de Web

jQuery List — 600 plugins jQuery qui n’attendent que vous

jQuery List est une liste de près de 600 plugins et exemples de code jQuery répartis dans plus de 30 rubriques. Nous y trouvons à peu près tout ce qui est nécessaire pour faire des sites web interactifs : Ajax, animation, effet, graphiques, DOM, CSS, Flash, formulaires, jeux, tableaux, calendriers, sélecteurs de couleurs, etc. →

HTML & CSS

Guide de bonnes pratiques HTML & CSS par Google

Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent. →

HTML & CSS

Editeur de dégradés CSS3 à la mode de Photoshop

ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit-, -o-, -ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64. →

HTML & CSS

Optimiser les images PNG, JPG, GIF

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 : →

Application mobile

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

Conception de site web

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

HTML & CSS

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