Intégration web

21 fonctions Javascript pour l’intégrateur web (et plus à venir…)

Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions *standalone* sous la souris pour se faciliter l’intégration *cross-browser* ! Voici une sélection de plus de 21 scripts pour faire face à toutes les situations (ou presque) : →

Intégration web

Liens utiles pour l’intégrateur HTML / CSS et le développeur web

Cette sélection de liens triés sur le volet en provenance de mon compte Delicious vous aidera peut-être : à trouver des snippets (bouts de code) pour faire face à toutes les situations ; à concevoir des emails qui tiennent la route ; à dénicher des feuilles de style pour vos tableaux ; à ajouter des menus déroulants intelligents à votre site web ou encore à faire le point sur les *templates tags* WordPress disponibles pour votre thème de blog ! →

HTML & CSS

DVD de formation XHTML et CSS

Après Francis Chouquet et Amaury Balmer qui nous ont gâté avec leur DVD de formation WordPress, c’est au tour de Florent Verschelde de commettre un DVD de formation sur XHTML et CSS :

> Adoptez les bons réflexes pour concevoir des sites Web actuels et créatifs ! Cette formation animée par Florent Verschelde est conçue pour répondre à vos besoins quel que soit votre niveau. Débutants, découvrez toutes les bases grâce à de nombreux exercices pratiques et liens utiles fournis. Vous êtes de niveau intermédiaire, trouvez toutes les clefs nécessaires pour implémenter vos designs et concevoir des pages conformes aux standards du Web (W3C) en mettant à profit les richesses des feuilles de styles CSS. Des gabarits présentés avec Alsacreations.com vous permettront de trouver de nouvelles bases solides pour enrichir vos projets.

HTML & CSS

Contribution au guide stylistique pour HTML et CSS

Florent Verschelde lance le projet de rédiger un guide stylistique (charte rédactionnelle ou conventions de codage) pour les langages HTML et surtout CSS sous l’égide d’Alsacreations. Une description de ce projet est disponible dans ce document. Voici ma modeste contribution à cette première étape du projet qui consiste en deux séries de questions pour sonder les professionnels du web sur leurs habitudes de travail en matière de mise en forme du code. →

HTML & CSS

Fonction PHP filemtime() pour cacher les fichiers CSS et JS

Vous le savez certainement, les fichiers Javascript ou CSS sont placés dans le cache du navigateur pour être réutilisés sans devoir aller chercher les mêmes informations sur le serveur. C’est assez pratique car les fichiers en question ne sont téléchargés qu’une fois. Mais si vous modifiez ces fichiers après la mise en ligne, c’est la version placée en cache qui continuera de s’afficher jusqu’à ce que l’utilisateur vide son cache d’une façon ou d’une autre.

Pour y remédier, Damien Ravé nous propose une utilisation judicieuse de la fonction PHP filemtime() qui renvoie la date de la dernière modification d’un fichier pour recharger le cache CSS ou JS :

<script type="text/javascript" src="js/script.js?v=<?php echo filemtime('js/script.js'); ?>">
<link rel="stylesheet" type="text/css" href="css/ecran.css?v=<?php echo filemtime('css/ecran.css'); ?>">
HTML & CSS

CSS — Structurer, documenter et maintenir

Après la présentation du script PNGHack, voici une nouvelle présentation de Yves Van Goethem concernant l’organisation et l’optimisation de nos chères feuilles de style CSS : application des conventions de développement à l’écriture des CSS ; structuration des CSS selon la complexité des documents à styler et pour terminer, une bonne dose de bonnes pratiques !

Javascript & PHP

Afficher ou ordonner les éléments HTML avec PHP

Je raffole des petites fonctions ou des scripts PHP tout simples qui en ont sous la botte. Par exemple, à l’aide de deux tableaux Array PHP nous choisirons 1) les balises div à afficher dans notre page web et 2) dans quel ordre. Le but sera de modifier la structure de notre document sans toucher au code HTML. Pour ce faire, il suffira de remplir les string qui vont bien dans l’Array. →

HTML & CSS

IE6 — Gérer la transparence du format PNG 24 bits

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre *AlphaImageLoader*. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un *background-repeat* ou d’un *background-position* ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.) →

HTML & CSS

Aligner le contenu d’un champ input avec le label associé

Lorsqu’on donne une hauteur height à un champ input, il arrive que le texte saisi à l’intérieur ne s’aligne pas correctement avec la base du texte présent dans le label. Dans ce cas, je diminue la hauteur et je distribue un soupçon de padding en haut et/ou en bas selon l’alignement souhaité. →

HTML & CSS

Des feuilles de style CSS dynamiques avec PHP

Les bonnes pratiques de développement web font leur chemin et l’intégrateur web prend l’habitude de séparer le fond (code HTML) de la forme (feuille de style CSS et Javascript) dans des fichiers distincts pour une saine séparation des pouvoirs et une maintenance aisée. Malgré tout, quand je regarde mes feuilles de styles, je trouve une palanquée de valeurs redondantes ou dépendantes d’autres valeurs. En attendant qu’une prochaine génération de CSS gère les variables, voici plusieurs manières d’ajouter du code PHP dans vos fichiers CSS. →