Intégration web

-prefix-free : du beau, du bon, du mauvais ?

Pour l’intégrateur web, les préfixes «constructeur» sont une bénédiction et une malédiction. D’un côté, ils permettent de surfer sur la vague du progrès dès qu’une nouvelle propriété est disponible sur un navigateur ; d’un autre côté, ils ont la réputation d’allonger la feuille de style avec une foule de déclarations redondantes. Le DRY est mis à mal… Pour seulement 2KB (gzippé) le script Javascript -prefix-free de Lea Verou ajoute automatiquement les préfixes «vendeur» pour les propriétés CSS3 et les navigateurs qui en ont besoin. →

HTML & CSS

HTML5 Please — Fallback et Polyfills (ou pas)

Envie de mettre les nouveautés HTML5 et CSS3 à contribution lors du redesign de votre site, mais un peu inquiet quand même sur la compatibilité de ces nouveaux jouets avec les nombreux navigateurs qui se battent pour occuper toute la RAM de votre poste de travail ? N’hésitez plus, et venez jeter un oeil sur HTML5 Please qui vient d’apparaitre dans ma timeline Twitter (1) ! →

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

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

Plugin jQuery

Elastislide : un carousel jQuery réactif (Responsive Webdesign)

Le webdesign réactif (traduction approximative de Responsive Webdesign) est un ensemble de techniques permettant d’adapter la mise en page d’un site web selon le périphérique de l’utilisateur. Avec l’arrivée des Media Queries en CSS3, le webdesign réactif devient de plus en plus utilisé. Il manquait toutefois des carousels réactifs. C’est le cas de Elastislide qui profitera au mieux des caractéristiques de l’écran. Via @guerrier. →

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

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

Design & Graphisme

L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement. →