Javascript & PHP

390 ressources Javascript & jQuery

Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows. Last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui ne prennent pas les nouvelles API’s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d’origine.

→

Intégration web

100+ Polyfills et Fallbacks pour HTML5

Un Polyfill est un script qui permet d’émuler les fonctionnalités qui manquent à un navigateur. Par exemple, HTML5 est constitué de nombreuses API dont certaines ne sont pas prises en charge par tous les navigateurs, y compris les plus récents. Les Polyfills permettent d’utiliser ces API d’une manière standard sans être obligé d’utiliser des contournements qui seront obsolètes à terme. Pour nous aider dans cette tâche, voici une collection de bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Modernizr  est un bon point de départ pour détecter ces fonctionnalités. →

Intégration web

Notes de lecture : « Responsive Web Design »

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed». →

HTML & CSS

Quelques liens sur les Media Queries en CSS3

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage ! →

HTML & CSS

HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir

HTML5 Boilerplate et WordPress ♥ Basics par la même occasion contiennent quelques classes CSS utiles pour masquer du contenu de différentes manières en fonction de vos besoins : .hidden, .visuallyhidden, .invisible and .ir. Après un rapide survol des trois premières classes, nous allons nous attarder un peu sur la dernière classe .ir pour régler une bonne fois pour toutes le problème des images de fond non cliquables. →

Google & Référencement

Schema.org — Microdata pour Google, Bing et Yahoo!

Schema.org propose un ensemble de micro-données hiérarchisé destiné à donner du sens au marquage HTML qui structure les pages web. Ce système complet de microdatas est comparable à RDFa, à ceci près qu’il est proposé conjointement par Google, Bing et Yahoo! pour enrichir les résultats de leurs moteurs de recherche respectifs. →

HTML & CSS

Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)

L’ajout des classes CSS pour spécifier la largeur des colonnes dans le code HTML est le lot des frameworks CSS qui proposent tous un mécanisme pour créer une grille de mise en page. Dans leur très grande majorité, ces frameworks ont besoin d’une classe pour la première colonne (.first pour The Simpler Grid) ou la dernière colonne (.last pour Blueprint CSS) voire pour la première et la dernière colonne (.alpha et .omega pour 960 Grid System) pour annuler les marges droites et/ou gauches attribuées par avance aux colonnes. →

HTML & CSS

Astuce CSS3 et RGBA avec les outils de développement de Google Chrome

J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence. →

HTML & CSS

WordPress de A à Z — C comme CSS & Composé HTML5

«For Those About To Rock…» Dans B comme Basics, j’ai abordé la mise en place d’un Blank Theme pour démarrer différents projets de site web. Je pensais réserver la lettre «C» pour les commentaires(1), mais après le marquage HTML5, il m’a semblé important d’aborder au plus vite la partie CSS. Une des difficultés à surmonter lorsqu’on crée un thème de base, c’est d’éviter 1) d’avoir trop d’éléments à ajouter et 2) d’en avoir trop à supprimer. L’équilibre est délicat. D’autant plus que les intitulés des éléments doivent être le plus générique possible pour s’adapter à toutes les situations et permettre de se repérer facilement. «Fire !» Voici le sommaire complet des 26 articles de WordPress de A à Z. →