Métiers du web

Quelques notes — Programme de formation HTML & CSS

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C. →

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

Le petit journal du web

Notes de lecture à propos de « Stratégie de contenu web »

Après HTML5 pour les web designers et CSS3 pour les web designers, le troisième opus de la collection A Book Apart Stratégie de contenu web écrit par Erin Kissane et préfacé par Muriel Vandermeulen est consacré à la nouvelle redécouverte du web : le contenu. Le pitch ? La création de contenu pour le web ne devrait pas s’effectuer sans une réflexion en amont sur 1) le profil du lectorat et 2) les compétences et la disponibilité de ses producteurs. Sans oublier que tout travail mérite salaire… En gros, il faut que les producteurs aient les moyens de s’adresser correctement aux consommateurs. Autrement dit : si on dit n’importe quoi à n’importe qui à n’importe quel prix, le résultat ne sera pas pas très efficace ! →

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

Métiers du web

Interviews Bruno Bichet, intégration web et webdesign de 2007 à nos jours

J’ai eu quelques occasions de répondre à des demandes d’interview de la part d’acteurs de la blogosphère sur les sujets liés au graphisme, au webdesign, et sur le métier d’intégrateur web. Cet exercice demande de la sincérité et une certaine rigueur pour éviter de se répéter. J’ai la chance d’avoir eu de nombreuses expériences professionnelles dans lesquelles je peux picorer ça et là ce qu’il faut pour répondre de manière personnalisée en évitant le contenu dupliqué — le Duplicate Content  ;-). Bref, voici 11 interviews qui m’ont permis de prendre du recul sur la pratique de mon métier de Chef de projet web et d’en apprendre sur moi-même.  →

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