レースクイーン情報

レースクイーンを各種ブログ(Blog)から一括検索します。

Plutôt que créer des images ou d’utiliser Flash pour afficher du texte dans la police de caractère de votre choix, vous pouvez utiliser typeface.js et écrire vos titres en HTML et CSS comme si vos visiteurs avait installé votre fonte préférée.

Le script utilise les capacités vectorielles des navigateurs pour dessiner les textes : les navigateurs comme Firefox, Safari et Opera utilisent la balise canvas (et SVG par la même occasion) tandis que IE utilise Vector Markup Language (VML).

Le projet typeface.js est composé d’un module Perl pour extraire la forme vectorielle des fontes Truetype au format JSON. La partie en Javascript parcoure le document à la recherche de <canvas> ou de données VML pour afficher les glyphes.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)

No related posts.

作者:Bruno Bichet

更新日:2008年11月30日 21時29分

このブログのホーム

Drawter est un générateur de code HTML et CSS en ligne qui vous permet de dessiner votre mise en page dans un canevas. Vous pouvez choisir les options de votre page comme le titre, le doctype, la langue du document, les balises que vous souhaitez pour chaque bloc présent à l’écran et pour chacune d’entre elles les propriétés et les attributs.

Une fois votre maquette terminée, vous choisissez le mode de placement pour vos blocs : float: left ou position: absolute. Le site autorise les imbrications de balises pour réaliser des mises en page complexes dans une interface réactive et intuitive. N’hésitez pas à parcourir toutes les options disponibles dans les palettes d’options et amusez-vous :) Drawter : dessinez, c’est gagné ? A tester !

PS : Merci à Thierry pour le lien ;)

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Drawter : dessinez, c’est intégré ! (WYSYWYG Powa!)

No related posts.

作者:Bruno Bichet

更新日:2008年11月26日 20時42分

このブログのホーム

Google Doctype est une encyclopédie ouverte (wiki) écrite par des développeurs web pour des développeurs web. Google Doctype contient des articles sur la sécurité sur le web, la manipulation du DOM en Javascript, des trucs et astuces CSS. Une section présente les balises HTML avec leur compatibilité inter-navigateur.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Google Doctype, un wiki de référence pour développeur web

No related posts.

作者:Bruno Bichet

更新日:2008年11月26日 6時47分

このブログのホーム

Cet article est une “craduction”⁽¹⁾ de l’excellent article Why Inline CSS And JavaScript Code Is Such A Bad Thing dans lequel Robert Nyman explique pourquoi il est bon de séparer la structure HTML, la présentation CSS et l’interactivité Javascript dans le processus de conception d’un site web. Chaque partie devrait faire l’objet d’un fichier distinct où l’intrusion des deux autes devrait être limité au strict minimum. Yalla, en avant les jeunes !

Lorsque je passe en revue des sites web, y compris ceux auxquels je participe en collaboration avec d’autres personnes, je tombe souvent sur des choses que les développeurs web devraient éliminer de leur pratique : mettre du code CSS et Javascript au beau milieu du code HTML.

Qu’est-ce qu’un style CSS ou un Javascript en ligne ?

C’est lorsque le code HTML est truffé de CSS et de Javascript, mélangeant ainsi la structure (HTML), la présentation (CSS) et l’intéractivité (Javascript). Comme ceci :

<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
    <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
        <span id="get-shit" onclick="callSomeFunction()">News</span>
    </div>
</div>

Pourquoi est-ce si mauvais ?

Mise à part les notions de propreté du code et de facilité de lecture en général, il existe d’autres raisons moins subjectives :

• Poids de la page HTML — En vous débarassant des éléments en ligne superflus, vous optimisez vos fichiers.

• Caching impossible — Le code HTML n’est pas mis en cache contrairement aux fichiers CSS ou Javascript externes. Les éléments en ligne sont donc chargés systématiquement : la présentation et les intéractions présentes dans votre code HTML ne seront pas chargées aussi rapidement que si elles l’étaient à partir du cache du navigateur.

• Faible accessibilité — Les interactions Javascript en ligne comme l’événement onclick vu plus haut, s’appliquent souvent à des éléments qui ne possède pas de comportement associé par défaut (un lien possède un attribut href permettant d’accéder à la ressources désirée, etc.) : votre lien ne mènera nulle part si Javascript n’est pas activé.

• Difficulté à maintenir le code — Tous les développeurs web seront d’accord pour reconnaitre qu’il est plus facile de s’y retrouver lorsque le code est centralisé plutôt qu’éparpillé au quatre coins du site web.

Tout le monde n’a pas Javascript de nos jours ?

Premièrement, non, tout le monde n’a pas Javascript. Deuxièmement, certaines personnes désactivent volontairement le JS sur leur navigateur (par ex. l’extension Firefox NoScript a été téléchargée 31 millions de fois à ce jour). Troisièmement, dans certains cas, l’utilisateur ne choisit pas son environnement et Javascript peut ne pas être disponible. Ces circonstances sont :

• Les programmes anti-virus ou les pare-feu (firewall) qui peuvent être parfois trop sévères dans leur jugement vis-à-vis du code Javascript.

• Certains proxy d’entreprise qui filtrent le code (lire An important lesson learned about AJAX and accessibility à ce sujet).

• Autres réglages d’accès à internet propres à certaines entreprises empêchant d’exécuter le code Javascript dans de bonnes conditions.

Voici comment vous devriez développer

Un développeur d’interface normalement constitué sait qu’il ou elle devrait faire l’effort de produire une structure séparant totalement le contenu (la page HTML proprement dite) de la présentation (CSS) et des interactions (Javascript). Autrement dit, il ne devrait y avoir ni styles CSS en ligne ni Javascript au milieu de votre code HTML.

Une seule voie possible : ne dépendre que des attributs id et class pour déclencher vos actions.

Réécrivons proprement l’exemple à ne pas suivre vu plus haut :

<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/base.js"></script>

<div id="container">
    <div id="navigation">
        <a id="get-news" href="news-proper-URL">News</a>
    </div>
</div>

/* Code CSS dans un fichier séparé (base.css) */

#container {
    width: 800px;
    margin: 1em auto:
    font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}
#navigation {
    float: left;
    width: 400px;
    padding: 1em 2em;
    font-size: 0.9em;
}

/* Code JavaScript dans un fichier séparé (base.js) */

window.onload = function () {
    document.getElementById("get-news").onclick = function () {
        // Get news through AJAX
    };
}

La classe, non ?

Bien utiliser les attributs id et class

A la base, c’est très simple. Un id n’apparait qu’une fois par page, tandis que l’attribut class peut être répété autant de fois qu’on le désire. Grosso modo, j’utilise les id pour les grands blocs structurels, comme container, navigation, main-content, etc. Pour le reste, j’utilise des classes.

Connecter du code CSS à un élément présent dans le document HTML possédant un attribut class est très simple. Toutefois, lorsqu’il s’agit de Javascript et de l’accès au DOM notamment, les fonctions ne sont pas toujours entièrement implémentées dans les navigateurs. Pour y remédier, je recommande l’utilisation de la fonction getElementsByClassName qui contient par ailleurs quelques fonctionnalités inédites.

Manipulation des événements en Javascript

Le code du dernier exemple s’inspire de la bonne vieille méthode prévue par le bon vieux DOM niveau 1 pour appliquer des actions sur un élément. Cela fonctionne très bien quand il s’agit d’appliquer une action par élément. C’est moins évident si plusieurs événements sont associées à un élément. Il y a même de fortes chances pour que le code de quelqu’un d’autre écrase votre événement, à moins que ce soit le contraire !

Pour ne pas se prendre la tête avec les différences d’implémentation de la gestion des événements entre les navigateurs (et croyez-moi il y en a quelques-une), je recommande l’utilisation d’une bibliothèque Javascript comme DOMAssistant ou jQuery.

Et les grands, comme Google, ils font comment ?

Bon, maintenant, j’ai réussi à vous convaincre de la justesse de mes arguments et vous êtes prêt à vous plonger dans le monde merveilleux des nouvelles méthodes de développement, mais juste par curiosité, vous jetez un oeil sur le site web le plus populaire au monde, Google, et vous pensez :

Mais, attend une minute, Robert, t’es pas en train de nous rouler dans la farine !

La page d’accueil de Google et plus spécialement la page affichant les résultats de la recherche, est truffée de styles CSS en ligne et d’événements Javascript en veux-tu en voilà. Si Google le fait, ça doit être le top, non ? Ben non. Google a peut-être des développeurs Javascript talentueux, voire même des génies dans d’autres domaines, mais en matière d’intégration HTML et CSS, ils sont un peu à la “ramasse”.

Il y a environ deux ans, mon ami Roger a réécrit proprement le code de Google en expliquant sa démarche en détail dans son billet.

Il faut considérer le taux extrêmement élevé de visiteurs que Google accueille chaque jour pour comprendre que leur mot d’ordre est performance, performance et… performance (ceux qui veulent approfondir la question plus profondément peuvent lire Improve your web site performance - tips & tricks to get a good YSlow rating). Mais bien que pour l’équipe de Google l’élimination de chaque requête HTTP superflue est crucial, ce n’est pas une excuse pour ne pas avoir un code propre et valide.

Au final, je pense que le bénéfice apporté par l’utilisation de code CSS ou Javascript inline (dans le code HTML) est négligeable, et parallèlement, dès que nous parlons de visiteurs fidélisés (par exemple, je visite Google tous les jours), l’utilisation de fichiers externes serait plus bénéfique et considérablement meilleur pour les performances tout comme pour la charge de bande passante. Egalement, en comparaison, la page de Google Mobile est dans un bien meilleur état, donc le fait que la page classique soit si pauvre a bien une raison valable –- je pense que c’est dû à quelque chose qui a été négligé et pas encore été revu (et ils sont probablement terrifiés à l’idée de revoir toute leur page).

Conclusion

Ainsi, comme ce texte vous y invite, assurez-vous d’inclure tout votre code CSS et Javascript à partir de fichiers externes. Commencez dès aujourd’hui ! Déplacez tous les éléments en ligne que vous trouverez et vous verrez que vous vous sentirez mieux, et votre équipe aussi ;)

⁽¹⁾ Une “craduction” est une traduction rapide et approximative qui a pour objectif principal de faire passer le message. Vous pouvez participer à la mesure de vos moyens dans les commentaires ou en me contactant directement.

PS : Merci à Jean Lançon pour son aide dans la dernière ligne droite ;)

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Pourquoi le code CSS et Javascript au milieu du HTML est une si mauvaise chose ?

No related posts.

作者:Bruno Bichet

更新日:2008年11月23日 21時36分

このブログのホーム

Une nouvelle version de TweakPNG vient de sortir. La dernière datait de 2004 ! Parmis les nouveautés :

• Prise en charge du chunk iTXt,
• Utilisation des dernières version de zlib et libpng.
• Le code binaire est désormais une application Unicode,
• Le logiciel n’est pas compatible avec Window 95/98/ME,
• Beaucoup de ménage dans le code source,
• Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
• Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le background disgrâcieux sous IE6 ;)

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

TweakPNG 1.3.0

No related posts.

作者:Bruno Bichet

更新日:2008年11月20日 14時12分

このブログのホーム

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 21 scripts pour faire face à toutes les situations (ou presque) :

1. addEvent — cette fonction écrite par John Resig, à l’origine de jQuery, a gagné le concours addEvent() recoding contest. Elle permet tout simplement d’attacher une fonction à un événement (onload, onclick, onmouseover, etc) :

   function addEvent( obj, type, fn ) {
       if ( obj.attachEvent ) {
           obj['e'+type+fn] = fn;
           obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
           obj.attachEvent( 'on'+type, obj[type+fn] );
       } else
           obj.addEventListener( type, fn, false );
   }
   

   En prime, voici la fonction inverse, au cas où :

   function removeEvent( obj, type, fn ) {
       if ( obj.detachEvent ) {
           obj.detachEvent( 'on'+type, obj[type+fn] );
           obj[type+fn] = null;
       } else
           obj.removeEventListener( type, fn, false );
   }
   

   Quelques exemples d’utilisation :

   addEvent( document.getElementById('foo'), 'click', doSomething );
   addEvent( obj, 'mouseover', function(){ alert('hello!'); } );
   addEvent( window, 'load', maFonction );
   

   Le dernier exemple est idéal pour lancer une fonction au chargement de la page sans intrusion dans le code HTML !

2. The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment.

   getElementsByClassName(”info-links”); — tous les éléments possédant une classe info-links,

   getElementsByClassName(”col”, “div”, document.getElementById(”container”)); — tous les éléments div contenus dans ù#container* et possédant la classe col,

   getElementsByClassName(”pince-me pince-moi”); — tous les éléments avec les classes pince-me et pince-moi.

3. cssQuery — La fonction cssQuery() interroge le DOM via les sélecteurs CSS 1 et CSS 2 et une partie de CSS 3. Alternative à jQuery pour accéder aux éléments constitutifs du DOM quelque soit le navigateur !

   var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,

   images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,

   Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span”; :)

   Pendant que nous sommes chez Dean Edwards, profitez-en pour tester base2 un mini-framework Javascript intelligent (c’est Yves qui le dit sur twitter).

4. XHRConnection — Cette classe Javascript simplifie l’utilisation de l’objet XMLHttpRequest. Elle propose plusieurs méthodes pour gérer les données à envoyer en arrière-plan. Autrement dit, XHRConnection permet d’appréhender facilement AJAX. Nombreux exemples fonctionnels disponibles.

5. Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment.

   Léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style elle-même puisqu’il faut doubler le sélecteur li:hover avec la classe li.sfHover).

6. Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

   suckerfish(sfHover, "LI", "nav"); pour appliquer :hover sur un élément li placé dans #nav.

   suckerfish(sfFocus, "INPUT"); pour donner le focus aux éléments input.

7. DOMTab — Ce script non-intrusif transforme une liste de liens en un système de menu à onglets efficace avec plusieurs menus sur une même page ; la possibilité de faire un lien vers un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir plus.

8. balance_columns — Script astucieux pour équilibrer des colonnes entre elles ! Ce script est non-intrusif : les identifiants des blocs à équilibrer se placent dans l’en-tête du script et il se dégrade harmonieusement si Javascript n’est pas activé sur le navigateur.

9. iepngfix — Ce composant HTC gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6. Le seul script à ma connaissance à prendre en charge les propriétés background-repeat et background-position avec iepngfix version 2.0 Alpha 3

   Notes : gardez un oeil sur PNGHack de Yves Van Goethem !

   Voir le tutoriel sur la transparence des PNG 24 bits sur IE6 pour plus d’information.

10. FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code :

    <script type="text/javascript">
        FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);
    </script>
    

    En option : possibilité de préciser la version de Flash requise ou d’ajouter des paramètres à votre animation Flash.

11. ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript (et de jQuery pour la majorité des solutions) pour fixer 12 problèmes liés aux navigateurs. Via Zeubeubeu.

    function changeClass(oldClass, newClass) {
        var elements = document.getElementsByTagName("*");
        for( i = 0; i < elements.length; i++ ) {
            if( elements[i].className == oldClass ) elements[i].className = newClass;
        }
    }
    
    <input type="button" value="Hide Sub-lists" onclick="changeClass('show','hide');" />
    

12. Effets lightbox sans framework — L’ouverture de “nouvelles fenêtres” laisse peu à peu la place aux effets lightbox. Voici donc plusieurs solutions simples et efficaces pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.

13. 9 Javascript à ne pas manquer — sélectionner ou désélectionner des checkbox d’un clic ; ouvrir une fenêtre popup ; avoir plusieurs boutons submit pour un formulaire ; émuler le bouton retour du navigateur ; remplir les valeurs d’un menu select selon les choix effectués avec un premier menu, etc.

Voilà pour les 21 premières fonctions. Comme le web est vaste et qu’il ne s’arrête jamais, cette liste va s’allonger au fil de l’eau avec d’autres scripts bien intéressants ;)

1. styleswitcher.js — Proposez des feuilles de style alternatives aux visiteurs.

2. maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 :

   window.onload = checkAvailableWidth;
   window.onresize = checkAvailableWidth;
   function checkAvailableWidth(){
       var container = document.getElementById("container");
       container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
   }
   

3. Simplifier l’accès aux identifiants à la manière de jQuery (via Josselin) :

   function $( element ) { 
       return document.getElementById( element ); 
   }
   

4. dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko en version compressée seulement !

5. DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’élément par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.

   $("#container input[type=text]");
   
   $("#navigation a").addEvent("click", myFunc);
   
   $("#news-list").load("updated-news.php");
   

   Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.

6. nanotabs — Version légère de idTabs sans jQuery pour faire des menus à onglets à partir de simples listes.

7. ul2finder — Listes dynamiques complexes pour réaliser un menu avec un comportement similaire au Finder de Mac OS X : un clic sur un élément affiche une colonne à côté pour le sous-menu, et ainsi de suite. Par le génial et prolifique Chris Heilmann !

8. Webdesign moderne avec Javascript — Bon, se passer des frameworks comme jQuery, c’est bien, mais je vous propose quand même cette liste impressionnantes de 47 scripts, fonctions ou plugins (jQuery, Mootools, YUI, etc.) pour améliorer l’expérience utilisateur ;)

Conclusion

Même s’il ne s’agit pas d’un ensemble de fonction “cohérent” dans le sens où certains scripts ont des fonctionnalités redondantes, ces fonctions devraient trouver une place dans votre bibliothèque. J’ai fait l’impasse sur les frameworks mais mon opinion est faite depuis longtemps : Prototype ou jQuery ont redonné ses lettres de noblesse à Javascript.

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

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

No related posts.

作者:Bruno Bichet

更新日:2008年11月18日 23時10分

このブログのホーム

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 !

Bouts de code (snippets)

• Posteet — Une plâtrée de bouts de code dans pratiquement tous les langages du web.

• DZone Snippets — Des tonnes de bouts de code pour le développeur web.

• Bout 2 Code — Comme son nom l’indique. Un peu pauvre en langage du web pour le moment, ce site propose néanmoins des trucs pratiques pour Excel ou Office en général…

• Pastebin — vous aide à débugger vos bouts de code en obtenant une URL comme http://pastebin.com/1234 à partager autour de vous. Si quelqu’un modifie votre code, vous pourrez voir les différences avec le code d’origine. Pratique aussi pour faciliter les copiés-collés de code, par toujours évident avec des outils comme WordPress.

• codyx — Des bouts de code dans plus de 40 langages et près de 30 catégories différentes. De nombreux scripts sont disponibles dans plusieurs langages.

Envoyer des e-mails

• Email Standards Project — N’avez-vous jamais pesté contre le rendu de votre page web dans tel ou tel navigateur ? Si concevoir un site web qui “passe” partout n’est pas facile, envoyer une newsletter par email l’est encore moins. ESP vise à mettre en place une batterie de bonnes pratiques pour que les MUA implémentent les propriétés CSS indispensables à une mise en pages un peu funky des emails, grâce notamment à la mise en place de l’Email Standards Project Acid Test,

• Campaign Monitor — En complément du lien précédent, voici un tableau récapitulatif du support des CSS dans les principaux Mail User Agent (MUA).

• 33 templates HTML pour l’emailing — Toujours chez Campaign Monitor, suggéré par LeGizz, plus de 30 modèles HTML pour envoyer des e-mails qui passeront dans la plupart des lecteurs de mails.

Des tableaux quand il le faut

• CSS Table Gallery — Une galerie de styles CSS appliqués aux tableaux pour mieux styler les données tabulaires parce qu’elle le valent bien ! Une bonne initiative de Chris Heilmann qui nous a déjà gâté avec Online Tools qui héberge le célèbre DOMTab pour faire des menus à onglets. Cf. idTabs vs DOMtab pour plus d’informations.

  En quoi la mise en page par tableaux est-elle stupide ? — Tout les arguments contre l’utilisation des tableaux pour autre chose que la présentation de données tabulaires rassemblés sur une page aussi complète que ludique. Via la liste de discussion AccessTech, espace d’entraide autant que de veille technique sur le sujet de l’accessibilité numérique.

Des menus déroulants

• Menu déroulant à plusieurs niveaux — Première partie déjà très complète d’un tutoriel en trois parties sur les menus déroulant sur Fairytells :
  • Fonctionne sur les navigateurs modernes et sur Internet Explorer à partir de la version 5,
  • Navigation au clavier,
  • Positionné de manière relative pour éviter les problèmes de superposition,
  • Fonctionne avec et sans Javascript.

• Menu_UL –Un menu déroulant commis par Benoit Raux piloté via CSS : tous les états possibles ont reçu une classe CSS pour Noël :
  • .menu_son_basic,
  • .menu_son_over,
  • .menu_son_active,
  • .menu_son_active_over,
  • .menu_parent_active,
  • .menu_parent_basic,
  • .menu_parent_selected.

Des colonnes de même hauteur sans tableau

• PVII Equal Height CSS Columns — Trouvé dans le code source de l’exemple du menu déroulant de Fairytells, ce script permet d’ajuster dynamiquement la hauteur d’une colonne en fonction d’une autre. On pourrra ainsi avoir une barre latérale dont le fond parviendra jusqu’au pied de page en fonction de la hauteur du contenu principal. Hum, voyez plutôt les exemples ;)

• Equilibrez vos colonnes CSS avec Javascript — Un autre script astucieux pour avoir des colonnes de même hauteur. Très simple d’utilisation : il suffit d’indiquer les identifiants des éléments à équilibrer et hop ! Contient des morceaux de détection de redimensionnement de texte (Text-Resize Detection).

WordPress

• Guide de référence des templates tags — Voici une liste très complète des appels de fonction que l’on peut utiliser dans un thème WordPress. A bookmarker d’urgence !

Miscellanées

• Compresser et optimiser les fichiers CSS et Javascript — Tutoriel intéressant paru sur blackotine concernant l’utilisation de la classe PHP Combine.

• Les anti-sèches du développeur web : Une palanquée de memento, cheatcheet en image ou au format PDF sur vos outils préféré : HTML, CSS, PHP, UNIX, Apache, jQuery, etc.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

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

No related posts.

作者:Bruno Bichet

更新日:2008年11月6日 21時48分

このブログのホーム

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.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

DVD de formation XHTML et CSS

No related posts.

作者:Bruno Bichet

更新日:2008年11月4日 6時38分

このブログのホーム

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.

Comment j’écris mon HTML

1. Quelle version de HTML ou XHTML utilisez-vous ?

   Même si je m’applique à écrire du XHTML 1.0 strict, j’utilise le doctype XHTML 1.0 Transitional qui permet une certaine souplesse quand on travaille sur des documents susceptibles d’accueillir toutes sortes de fioritures comme des target=_blank ou des iframe en veux-tu en voilà ;)

2. Respectez-vous des règles strictes pour l’écriture des balises et attributs HTML même en HTML 4.01 ?

   Oui, je me conforme aux exigeances imposées par le XHTML strict 1.0 : écriture des balises en minuscules, attributs entre guillemets, attributs selected ou checked doublés (selected="selected" ou checked="checked"), auto-fermeture des balises img, br ou input, etc.

3. Quel usage faites-vous de la validation du code HTML ?

   Je prends soin de valider mes pages web régulièrement dans une optique de débuggage du code plutôt que pour la validation elle-même qui ne garantit pas que le document soit lisible par un être humain.

4. Quel usage faites vous des commentaires HTML ?

   Essentiellement pour mettre en valeur les parties principales de la page et indiquer la fin des blocs structurels. J’utilise aussi les lignes vides pour séparer certaines parties du code pour améliorer la lisibilité :

   <!-- Début de #sidebar-top
   contient #bloc-1 pour le formulaire de login 
   et #bloc-2 pour les news -->
   
       <div id="sidebar-top" class="aside">
   
           <div id="bloc-1">
               <p>bla bla</p>
           </div><!-- /#bloc-1 -->
   
           <div id="bloc-2">
               <p>bla bla</p>
           </div><!-- /#bloc-2 -->   
   
       </div><!-- fin #sidebar-top .aside -->
   
   <!-- // fin de #sidebar-top -->
   
   <!-- Début de #sidebar-bottom
   contient #bloc-3 pour la pub
   et #bloc-4 pour l'inscription à la newsletter -->
   

5. Quels sont les éléments HTML que vous utilisez le plus ? Y a-t-il une logique précise pour l’utilisation de tel ou tel élément (un P plutôt qu’un DIV, par exemple) ?

   En règle général, j’essaie de suivre la logique interne du contenu pour que la page ressemble à quelque chose même si les feuilles de styles sont désactivées : j’abuse des listes ordonnées ou non, des listes de définition, des paragraphes, etc. L’idée est de donner du relief à la page web pour faire ressortir la structure des idées.

   Toutefois, il m’arrive d’utiliser une div à la place d’un p lorsque le texte à baliser ne contient qu’une ligne et/ou qu’il est isolé sémantiquement parlant. C’est le cas de la baseline notamment.

   Dans certains cas, il peut m’arriver d’ajouter un span :

   <div id="baseline"><span>Ma baseline est top</span></div>
   

   L’avantage ? Dans certaines mises en forme, ça permet de donner une largeur explicite à la balise div, tout en jouant à volonté sur le padding du span sans casser la mise en page à cause d’une mauvaise interprétation d’un modèle de boite pas toujours intuitif.

6. Quel usage faites-vous des éléments génériques DIV et SPAN ?

   Même si cela semble aller à l’encontre de ma réponse précédente, je commence par structurer ma page dans les grandes lignes avec la position des différents “blocs” à l’esprit. Comme il s’agit souvent de découper un template réalisé sous Photoshop, il serait hypocrite de faire comme si seul le sens avait de l’importance… Je place donc mes div dans mon document HTML puis je les reportent dans mon fichier CSS.

   Les balises div me servent surtout à diviser le contenu en blocs gérés ensuite via la feuille de style : création de colonnes, application de background, etc. J’essaie de garder une logique “sémantique” à mes découpages, même si la plupart du temps, il faut bien avouer que certains bloc sont réunis uniquement à des fins de présentation ou de position dans le code…

   J’utilise assez peu la balise span : elle me sert le plus souvent à donner une couleur différente à une portion de texte ou à intégrer les microformats.

7. Avez-vous une convention de nommage pour les classes et identifiants ?

   Je suis en pleine transition sur cette question. Je me mets doucement à utiliser les futures balises du HTML5 en tant qu’identifiants ou classes pour structurer mes pages web : #header, #footer, .nav, .article, .aside, h1, h2…, .section, etc.

   Pour les identifiants ou classes composés de deux termes ou plus, j’utilise le tiret : #sidebar-top ou #main-content-bottom, par exemple.

   Comme vous pouvez le remarquer, j’utilise plutôt des termes anglo-saxons, généralement plus concis et surtout sans accent : que donnerait en effet une classe .palais-des-congres ^_^v

8. Dans quels cas utilisez-vous plutôt les classes ou plutôt les identifiants?

   Tout dépend du document, mais je privilégie les classes autant que possible. Ainsi, pour atteindre les élement menu, j’utilise plus volontiers :

   #header .menu {...}
   #sidebar-1 .menu {...}
   

   plutôt que :

       #menu-1 {...}
       #menu-2 {...}
   

   Ce qui permet d’avoir des éléments communs non dupliqués pour la classe .menu. Toutefois, en fonction des projets, la deuxième solution est parfois préférable. Question de souplesse.

Comment j’écris mes CSS

1. Quel usage faites-vous de la validation CSS ?

   Je n’utilise que très rarement la validation pour mes feuilles de styles : les fautes de syntaxes sont généralement rédhibitoires (le comportement voulu n’apparait pas) et je sais généralement quand j’utilise une propriété “propriétaire”…

2. Comment utilisez-vous les commentaires en CSS ? Avez-vous des «styles» précis pour différents types de commentaires (capitales, étoiles ou autres symboles dans le commentaire, etc.) ?

   Un exemple vaut mieux qu’un long discours :

   /*-----------------------------------------------------------------------
   Nom de la feuille de style : styles.css
   Date création : le 02/11/2008
   Description : Feuille de style principale pour le projet xxx
   Sommaire :
   @reset
   @utilitaires
   @document
   -----------------------------------------------------------------------*/
   
   /*-----------------------------------------------------------------------
                                        @RESET
   -----------------------------------------------------------------------*/
   
   @import "css/risette.css";
   
   /*-----------------------------------------------------------------------
                                       @UTILITAIRES
   -----------------------------------------------------------------------*/
   .prout {
       voice-family: announcer, male;
   }
   
   /*-----------------------------------------------------------------------
                                       @DOCUMENT
   -----------------------------------------------------------------------*/
   #container {
       margin: 0 toto;
   }
   
       #header { /* ie.css */
           height: 75px;
       }
           #logo {
               background: url(img/logo.png) no-repeat;
           }
   

3. Utilisez-vous des sélecteurs «verbeux» (le plus précis possibles et reprenant le contexte d’utilisation de l’élément), ou au contraire les plus courts possibles ? Ou bien une solution intermédiaire ?

   Quand je ne suis pas le seul à intervenir sur le projet (la plupart du temps) je suis assez “verbeux” :

   #header #logo h1 {...} 
   

   ou

       h1#logo {...} 
   

   Voire

       #logo {...}
   

   plutôt que

       h1 {...}
   

   Note : pour des questions de performance, il est préférable d’utiliser la forme #h1-logo {...} qui semble la syntaxe préférée des navigateurs.

4. Comment utilisez-vous les espaces, retours à la ligne, lignes vides et indentations ? Pouvez-vous fournir un exemple-type ?

   Voici un exemple assez représentatif de mes habitudes en la matière :

   #container {
       width: 950px;
       margin: 0 auto;
       font: 1.2em/1.5 Helvetica, Arial, sans-serif;
   }
   
       #header {
           width: 950px;
           height: 95px;
           background: transparent url() no-repeat center;
       }
   
       #main-content {
           overflow: hidden; /* zoom: 1; dans ie.css */            
       }
           #content {
               float: left;
               width: 700px;
               margin-right: 20px;
           }
           #sidebar {
               float: left;
               width: 230px;
           }
   
       #footer {
           width: 950px;
           clear: both;      
       }
   

   J’ai pris l’habitude de mettre un espace entre les deux-points et la valeur pour des raisons de lisibilité. Par ailleurs, je laisse toujours le point-virgule à la fin de la dernière déclaration. De nombreux intégrateurs et développeurs trouvent plus lisible d’écrire :

   #content {float:left;width:700px;margin-right:20px;}
   #sidebar {float:left;width:230px;}
   

   Leur argument principal est que cette disposition permet de voir plus de sélecteurs et d’économiser des lignes. Je tiens à rappeller que de nombreux logiciels (Dreamweaver, TopStyle Light, etc.) disposent d’une telle vue. Sans compter des services comme cleancss qui le font automatiquement !

5. Regroupez-vous les blocs de déclarations (sélecteurs + leurs propriétés) de manière logique ou prévisible? Quelle est la logique utilisée, et dans quel ordre les placez-vous ?

   J’essaie de suivre au mieux la structure du document HTML lui-même. Comme le montre l’exemple ci-dessus, sauf si je dois regrouper des déclarations pour leur attribuer des propriétés communes. Dans ce cas, je les place comme suit :

   #header,
   #footer {
       width: 100%;
   }
   
   #header {
       padding: 3em;
   }
   #content {
       width: 950px;
   }
   #footer{
       padding: 1em 3em;
   }
   

6. Utilisez-vous des indentations multiples (jusqu’à plusieurs niveaux d’indentation) pour, par exemple, refléter la structure du code HTML ?

   Oui, voir l’exemple donné plus haut ;)

7. Utilisez-vous les propriétés de raccourci ? Si oui, les utilisez-vous systématiquement et en priorité, ou seulement lorsque cela permet de gagner quelques déclarations (propriété + valeur) ?

   j’utilise les raccourcis le plus souvent possible, notamment pour les propriétés font, background, margin, padding, list-style et border.

8. Respectez-vous un ordre précis pour les propriétés CSS (ordre alphabétique, ordre «logique», etc.) ? Si besoin, pouvez-vous le détailler ?

   Je place d’abord les propriétés les plus impactantes sur le design comme float, width, height, etc. et je place ensuite les plus longues à la fin : border, list-style, font, background, etc.

   Ca tombe bien, car ces dernières sont souvent des propriétés plus visuelles que structurelles, ce qui permet de séparer le fond de la forme au sein même des déclarations CSS !

9. Dans une feuille de styles relativement longue (plus de quelques dizaines de ligne, et jusqu’à des centaines ou milliers de lignes), comment organisez-vous les différents styles ?

   Si le nombre de page est faible mais que la feuille de style CSS est très longue, j’utilise les commentaires pour séparer les différentes parties.

   Si le nombre de page est important, je fais une feuille de style par page après avoir réunis les éléments communs dans styles.css, soit : index.css pour index.php, inscription.css pour inscription.php ou 404.css pour 404.php, etc.

10. Utilisez-vous plusieurs feuilles de styles pour un projet de «petit» site (moins de dix pages-type). Utilisez-vous plusieurs feuilles de styles pour des projets plus conséquents? Comment séparez-vous les différents styles: par type de propriétés CSS, par type de page, etc. ?

    J’ai essayé plusieurs méthodes pour devenir pragmatique : je fais au mieux en fonction du projet, du délai et du nombre de personnes susceptibles d’intervenir sur le fichier. Un découpage des CSS comme typography.css, layout.css, html.css, color.css, etc. suppose des habitudes de travail en commun et des connaissances similaires en CSS, ce qui n’est pas toujours le cas quand on travaille en équipe. De fait, le découpage par page (cf. réponse 9) est souvent mieux compris donc les pertes de temps et les erreurs sont moins nombreuses.

11. Utilisez-vous des hacks CSS ?

    Oui et non. Voir plus bas ;)

12. Utilisez-vous les commentaires conditionnels pour Internet Explorer? Si oui, comment procédez-vous?

    En général, j’utilise un commentaire conditionnel pour cibler les versions inférieures à Internet Explorer 8 :

    Ensuite, à l’intérieur de ie.css, j’utilise des hacks CSS pour cibler IE6 ou IE7 :

    div { Pour s'adresser à toutes les versions inférieures à IE8 }
    * html div { Pour s'adresser à IE6 }        
    html>body div { Pour s'adresser à IE7 }
    

    En supposant bien sûr que IE8 se comporte à l’avenir selon les standards du web. Dans le cas contraire, en fonction des cas, il faudra soit mettre à niveau le commentaire conditionnel (lte IE 8) et trouver un hack CSS spécifique à IE8 différent à la fois de IE6 et IE7, soit lier une feuille de style spécifique pour IE8 en plus de celle prévue pour les versions inférieures d’Internet Explorer…

En bref

J’ai pris un réel plaisir à me pencher sur ces questions et comme je ne voudrais pas être le seul à en profiter, je vous invite à participer à ce projet, que vous soyez professionnels ou amateurs éclairés ! L’important est que vous pratiquiez régulièrement les langages HTML et CSS pour avoir développé quelques habitudes et que vous ayez envie de les partager.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Contribution au guide stylistique pour HTML et CSS

No related posts.

作者:Bruno Bichet

更新日:2008年11月3日 6時41分

このブログのホーム

Vous le savez certainement, les fichiers Javascript ou CSS sont placés dans le cache du navigateur pour usage ultérieur. D’un côté, c’est pratique : les fichiers en question ne sont téléchargés qu’une fois ; de l’autre, ce n’est pas très pratique : si vous modifier ces fichiers, c’est la version placée en cache qui continuera de s’afficher jusqu’à ce que l’utilisateur vide son cache. 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'); ?>">

Le Potlatch, c’est pas un cadeau ? Si si, bien au contraire !

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

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

No related posts.

作者:Bruno Bichet

更新日:2008年11月1日 11時33分

このブログのホーム

Effectivement, c’est techniquement sympa, mais sur la mise en oeuvre, ça risque d’être lourd et de casser l’accessibilité. Merci pour l’info en tout cas ;)

作者:Nicolas F.

更新日:2008年12月2日 6時54分

このブログのホーム

Je me renseigne beaucoup sur ces techniques en ce moment (writing :P), et j’aimerais signaler que non typeface n’est pas encore la solution ultime (en tout cas, pas encore, il s’agit d’un tout jeune logiciel) : pas de sélection du texte, pas d’alternative (le texte est remplacé par des Canvas , non lu par les lecteurs d’écrans), pas de possibilité d’agrandir le texte, pas de protection des polices : elles sont converti en JS, avec toutes les coordonnées vectoriels (n’importe qui peux la prendre et l’utiliser aussi) et ça peux faire lourd si on met tous les glyphes en plus… C’est techniquement très malin d’utiliser Canvas et VML, mais ce n’est pas le meilleur choix pour du remplacement de texte selon moi.

作者:Damien

更新日:2008年12月1日 23時1分

このブログのホーム

Je trouve cela moyen comme concept malgré tout. Cela ajoute encore un JS et un module à charger pour afficher du texte. Cela va bcp mieux en utilisant des polices standards et pour le texte ou on voudrait vraiment utiliser des polices perso on peut tjrs créer des images en GD/ImageMagick n’est pas si compliqué ;-)

作者:touane

更新日:2008年12月1日 14時4分

このブログのホーム

@x@v :

L’intérêt des variables dans le CSS n’est pas juste pour pouvoir le changer quand on veut, c’est pour améliorer la pérennité du code. Comme par exemple, pouvoir utiliser des variables pour le chemin des images (avec l’attribut background): En décrivant l’emplacement des images avec un chemin absolu et à l’aide d’une variable, tu peux modifier ton architecture, migrer de serveur ou changer de nom de domaine sans te prendre la tête.

Bonne journée, Thoams ;-)

作者:Thoams

更新日:2008年12月1日 13時0分

このブログのホーム

en faite j’ia un back office qui me permet de changer ma css à l’aide d e formulaire. Et donc à l’envoi du formulaire, je crée une css, police, couleur, style… temps qu’a avoir des variables…

作者:x@v

更新日:2008年12月1日 12時38分

このブログのホーム

Super, merci pour ta réponse rapide. Je cours regarder Facelift…!

à bientôt !

作者:LOmiG

更新日:2008年12月1日 9時11分

このブログのホーム

@LOmiG : Perso, je n’ai pas encore eu le temps de tester typeface.js. Mais pour info, à côté de sIFR, il y a également FaceLift qui peut être intéressant car plus léger pour le navigateur d’après Vinch.

作者:Bruno Bichet

更新日:2008年12月1日 8時51分

このブログのホーム

euh…a priori, ça m’intéresse pas mal, parce que la solution SiFr que je connaissais avait pas mal de limitations (pas d’accents, problèmes avec les textes “in line” qui s’ouvrait mal, choix des polices limité).

Mais je ne sais pas trop quoi faire. je vais aller voir le lien que tu donnes, voir si je m’en sors…

à bientôt, merci pour l’info, en tout cas !

作者:LOmiG

更新日:2008年12月1日 7時24分

このブログのホーム

@x@v :

Sa me fait peur vos solutions. Trop de ressources utilisées…

lol, je viens de voir la source de ton site et tu charges une bonne dizaine de scripts js… ;)

作者:Bruno Bichet

更新日:2008年12月1日 6時25分

このブログのホーム

moi j’enregistre un nouveau fichier fwrite(); Sa me fait peur vos solutions. Trop de ressources utilisées…

作者:x@v

更新日:2008年11月29日 21時44分

このブログのホーム

Plutôt que créer des images ou d’utiliser Flash pour afficher du texte dans la police de caractère de votre choix, vous pouvez utiliser typeface.js et écrire vos titres en HTML et CSS comme si vos visiteurs avait installé votre fonte préférée.

Le script utilise les capacités vectorielles des navigateurs pour dessiner les textes : les navigateurs comme Firefox, Safari et Opera utilisent la balise canvas (et SVG par la même occasion) tandis que IE utilise Vector Markup Language (VML).

Le projet typeface.js est composé d’un module Perl pour extraire la forme vectorielle des fontes Truetype au format JSON. La partie en Javascript parcoure le document à la recherche de <canvas> ou de données VML pour afficher les glyphes.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)

No related posts.

作者:Bruno Bichet

更新日:2008年11月30日 21時29分

このブログのホーム

Drawter est un générateur de code HTML et CSS en ligne qui vous permet de dessiner votre mise en page dans un canevas. Vous pouvez choisir les options de votre page comme le titre, le doctype, la langue du document, les balises que vous souhaitez pour chaque bloc présent à l’écran et pour chacune d’entre elles les propriétés et les attributs.

Une fois votre maquette terminée, vous choisissez le mode de placement pour vos blocs : float: left ou position: absolute. Le site autorise les imbrications de balises pour réaliser des mises en page complexes dans une interface réactive et intuitive. N’hésitez pas à parcourir toutes les options disponibles dans les palettes d’options et amusez-vous :) Drawter : dessinez, c’est gagné ? A tester !

PS : Merci à Thierry pour le lien ;)

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Drawter : dessinez, c’est intégré ! (WYSYWYG Powa!)

No related posts.

作者:Bruno Bichet

更新日:2008年11月26日 20時42分

このブログのホーム

Google Doctype est une encyclopédie ouverte (wiki) écrite par des développeurs web pour des développeurs web. Google Doctype contient des articles sur la sécurité sur le web, la manipulation du DOM en Javascript, des trucs et astuces CSS. Une section présente les balises HTML avec leur compatibilité inter-navigateur.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Google Doctype, un wiki de référence pour développeur web

No related posts.

作者:Bruno Bichet

更新日:2008年11月26日 6時47分

このブログのホーム

Cet article est une “craduction”⁽¹⁾ de l’excellent article Why Inline CSS And JavaScript Code Is Such A Bad Thing dans lequel Robert Nyman explique pourquoi il est bon de séparer la structure HTML, la présentation CSS et l’interactivité Javascript dans le processus de conception d’un site web. Chaque partie devrait faire l’objet d’un fichier distinct où l’intrusion des deux autes devrait être limité au strict minimum. Yalla, en avant les jeunes !

Lorsque je passe en revue des sites web, y compris ceux auxquels je participe en collaboration avec d’autres personnes, je tombe souvent sur des choses que les développeurs web devraient éliminer de leur pratique : mettre du code CSS et Javascript au beau milieu du code HTML.

Qu’est-ce qu’un style CSS ou un Javascript en ligne ?

C’est lorsque le code HTML est truffé de CSS et de Javascript, mélangeant ainsi la structure (HTML), la présentation (CSS) et l’intéractivité (Javascript). Comme ceci :

<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
    <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
        <span id="get-shit" onclick="callSomeFunction()">News</span>
    </div>
</div>

Pourquoi est-ce si mauvais ?

Mise à part les notions de propreté du code et de facilité de lecture en général, il existe d’autres raisons moins subjectives :

• Poids de la page HTML — En vous débarassant des éléments en ligne superflus, vous optimisez vos fichiers.

• Caching impossible — Le code HTML n’est pas mis en cache contrairement aux fichiers CSS ou Javascript externes. Les éléments en ligne sont donc chargés systématiquement : la présentation et les intéractions présentes dans votre code HTML ne seront pas chargées aussi rapidement que si elles l’étaient à partir du cache du navigateur.

• Faible accessibilité — Les interactions Javascript en ligne comme l’événement onclick vu plus haut, s’appliquent souvent à des éléments qui ne possède pas de comportement associé par défaut (un lien possède un attribut href permettant d’accéder à la ressources désirée, etc.) : votre lien ne mènera nulle part si Javascript n’est pas activé.

• Difficulté à maintenir le code — Tous les développeurs web seront d’accord pour reconnaitre qu’il est plus facile de s’y retrouver lorsque le code est centralisé plutôt qu’éparpillé au quatre coins du site web.

Tout le monde n’a pas Javascript de nos jours ?

Premièrement, non, tout le monde n’a pas Javascript. Deuxièmement, certaines personnes désactivent volontairement le JS sur leur navigateur (par ex. l’extension Firefox NoScript a été téléchargée 31 millions de fois à ce jour). Troisièmement, dans certains cas, l’utilisateur ne choisit pas son environnement et Javascript peut ne pas être disponible. Ces circonstances sont :

• Les programmes anti-virus ou les pare-feu (firewall) qui peuvent être parfois trop sévères dans leur jugement vis-à-vis du code Javascript.

• Certains proxy d’entreprise qui filtrent le code (lire An important lesson learned about AJAX and accessibility à ce sujet).

• Autres réglages d’accès à internet propres à certaines entreprises empêchant d’exécuter le code Javascript dans de bonnes conditions.

Voici comment vous devriez développer

Un développeur d’interface normalement constitué sait qu’il ou elle devrait faire l’effort de produire une structure séparant totalement le contenu (la page HTML proprement dite) de la présentation (CSS) et des interactions (Javascript). Autrement dit, il ne devrait y avoir ni styles CSS en ligne ni Javascript au milieu de votre code HTML.

Une seule voie possible : ne dépendre que des attributs id et class pour déclencher vos actions.

Réécrivons proprement l’exemple à ne pas suivre vu plus haut :

<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/base.js"></script>

<div id="container">
    <div id="navigation">
        <a id="get-news" href="news-proper-URL">News</a>
    </div>
</div>

/* Code CSS dans un fichier séparé (base.css) */

#container {
    width: 800px;
    margin: 1em auto:
    font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}
#navigation {
    float: left;
    width: 400px;
    padding: 1em 2em;
    font-size: 0.9em;
}

/* Code JavaScript dans un fichier séparé (base.js) */

window.onload = function () {
    document.getElementById("get-news").onclick = function () {
        // Get news through AJAX
    };
}

La classe, non ?

Bien utiliser les attributs id et class

A la base, c’est très simple. Un id n’apparait qu’une fois par page, tandis que l’attribut class peut être répété autant de fois qu’on le désire. Grosso modo, j’utilise les id pour les grands blocs structurels, comme container, navigation, main-content, etc. Pour le reste, j’utilise des classes.

Connecter du code CSS à un élément présent dans le document HTML possédant un attribut class est très simple. Toutefois, lorsqu’il s’agit de Javascript et de l’accès au DOM notamment, les fonctions ne sont pas toujours entièrement implémentées dans les navigateurs. Pour y remédier, je recommande l’utilisation de la fonction getElementsByClassName qui contient par ailleurs quelques fonctionnalités inédites.

Manipulation des événements en Javascript

Le code du dernier exemple s’inspire de la bonne vieille méthode prévue par le bon vieux DOM niveau 1 pour appliquer des actions sur un élément. Cela fonctionne très bien quand il s’agit d’appliquer une action par élément. C’est moins évident si plusieurs événements sont associées à un élément. Il y a même de fortes chances pour que le code de quelqu’un d’autre écrase votre événement, à moins que ce soit le contraire !

Pour ne pas se prendre la tête avec les différences d’implémentation de la gestion des événements entre les navigateurs (et croyez-moi il y en a quelques-une), je recommande l’utilisation d’une bibliothèque Javascript comme DOMAssistant ou jQuery.

Et les grands, comme Google, ils font comment ?

Bon, maintenant, j’ai réussi à vous convaincre de la justesse de mes arguments et vous êtes prêt à vous plonger dans le monde merveilleux des nouvelles méthodes de développement, mais juste par curiosité, vous jetez un oeil sur le site web le plus populaire au monde, Google, et vous pensez :

Mais, attend une minute, Robert, t’es pas en train de nous rouler dans la farine !

La page d’accueil de Google et plus spécialement la page affichant les résultats de la recherche, est truffée de styles CSS en ligne et d’événements Javascript en veux-tu en voilà. Si Google le fait, ça doit être le top, non ? Ben non. Google a peut-être des développeurs Javascript talentueux, voire même des génies dans d’autres domaines, mais en matière d’intégration HTML et CSS, ils sont un peu à la “ramasse”.

Il y a environ deux ans, mon ami Roger a réécrit proprement le code de Google en expliquant sa démarche en détail dans son billet.

Il faut considérer le taux extrêmement élevé de visiteurs que Google accueille chaque jour pour comprendre que leur mot d’ordre est performance, performance et… performance (ceux qui veulent approfondir la question plus profondément peuvent lire Improve your web site performance - tips & tricks to get a good YSlow rating). Mais bien que pour l’équipe de Google l’élimination de chaque requête HTTP superflue est crucial, ce n’est pas une excuse pour ne pas avoir un code propre et valide.

Au final, je pense que le bénéfice apporté par l’utilisation de code CSS ou Javascript inline (dans le code HTML) est négligeable, et parallèlement, dès que nous parlons de visiteurs fidélisés (par exemple, je visite Google tous les jours), l’utilisation de fichiers externes serait plus bénéfique et considérablement meilleur pour les performances tout comme pour la charge de bande passante. Egalement, en comparaison, la page de Google Mobile est dans un bien meilleur état, donc le fait que la page classique soit si pauvre a bien une raison valable –- je pense que c’est dû à quelque chose qui a été négligé et pas encore été revu (et ils sont probablement terrifiés à l’idée de revoir toute leur page).

Conclusion

Ainsi, comme ce texte vous y invite, assurez-vous d’inclure tout votre code CSS et Javascript à partir de fichiers externes. Commencez dès aujourd’hui ! Déplacez tous les éléments en ligne que vous trouverez et vous verrez que vous vous sentirez mieux, et votre équipe aussi ;)

⁽¹⁾ Une “craduction” est une traduction rapide et approximative qui a pour objectif principal de faire passer le message. Vous pouvez participer à la mesure de vos moyens dans les commentaires ou en me contactant directement.

PS : Merci à Jean Lançon pour son aide dans la dernière ligne droite ;)

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Pourquoi le code CSS et Javascript au milieu du HTML est une si mauvaise chose ?

No related posts.

作者:Bruno Bichet

更新日:2008年11月23日 21時36分

このブログのホーム

Une nouvelle version de TweakPNG vient de sortir. La dernière datait de 2004 ! Parmis les nouveautés :

• Prise en charge du chunk iTXt,
• Utilisation des dernières version de zlib et libpng.
• Le code binaire est désormais une application Unicode,
• Le logiciel n’est pas compatible avec Window 95/98/ME,
• Beaucoup de ménage dans le code source,
• Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
• Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le background disgrâcieux sous IE6 ;)

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

TweakPNG 1.3.0

No related posts.

作者:Bruno Bichet

更新日:2008年11月20日 14時12分

このブログのホーム

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 21 scripts pour faire face à toutes les situations (ou presque) :

1. addEvent — cette fonction écrite par John Resig, à l’origine de jQuery, a gagné le concours addEvent() recoding contest. Elle permet tout simplement d’attacher une fonction à un événement (onload, onclick, onmouseover, etc) :

   function addEvent( obj, type, fn ) {
       if ( obj.attachEvent ) {
           obj['e'+type+fn] = fn;
           obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
           obj.attachEvent( 'on'+type, obj[type+fn] );
       } else
           obj.addEventListener( type, fn, false );
   }
   

   En prime, voici la fonction inverse, au cas où :

   function removeEvent( obj, type, fn ) {
       if ( obj.detachEvent ) {
           obj.detachEvent( 'on'+type, obj[type+fn] );
           obj[type+fn] = null;
       } else
           obj.removeEventListener( type, fn, false );
   }
   

   Quelques exemples d’utilisation :

   addEvent( document.getElementById('foo'), 'click', doSomething );
   addEvent( obj, 'mouseover', function(){ alert('hello!'); } );
   addEvent( window, 'load', maFonction );
   

   Le dernier exemple est idéal pour lancer une fonction au chargement de la page sans intrusion dans le code HTML !

2. The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment.

   getElementsByClassName(”info-links”); — tous les éléments possédant une classe info-links,

   getElementsByClassName(”col”, “div”, document.getElementById(”container”)); — tous les éléments div contenus dans ù#container* et possédant la classe col,

   getElementsByClassName(”pince-me pince-moi”); — tous les éléments avec les classes pince-me et pince-moi.

3. cssQuery — La fonction cssQuery() interroge le DOM via les sélecteurs CSS 1 et CSS 2 et une partie de CSS 3. Alternative à jQuery pour accéder aux éléments constitutifs du DOM quelque soit le navigateur !

   var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,

   images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,

   Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span”; :)

   Pendant que nous sommes chez Dean Edwards, profitez-en pour tester base2 un mini-framework Javascript intelligent (c’est Yves qui le dit sur twitter).

4. XHRConnection — Cette classe Javascript simplifie l’utilisation de l’objet XMLHttpRequest. Elle propose plusieurs méthodes pour gérer les données à envoyer en arrière-plan. Autrement dit, XHRConnection permet d’appréhender facilement AJAX. Nombreux exemples fonctionnels disponibles.

5. Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment.

   Léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style elle-même puisqu’il faut doubler le sélecteur li:hover avec la classe li.sfHover).

6. Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

   suckerfish(sfHover, "LI", "nav"); pour appliquer :hover sur un élément li placé dans #nav.

   suckerfish(sfFocus, "INPUT"); pour donner le focus aux éléments input.

7. DOMTab — Ce script non-intrusif transforme une liste de liens en un système de menu à onglets efficace avec plusieurs menus sur une même page ; la possibilité de faire un lien vers un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir plus.

8. balance_columns — Script astucieux pour équilibrer des colonnes entre elles ! Ce script est non-intrusif : les identifiants des blocs à équilibrer se placent dans l’en-tête du script et il se dégrade harmonieusement si Javascript n’est pas activé sur le navigateur.

9. iepngfix — Ce composant HTC gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6. Le seul script à ma connaissance à prendre en charge les propriétés background-repeat et background-position avec iepngfix version 2.0 Alpha 3

   Notes : gardez un oeil sur PNGHack de Yves Van Goethem !

   Voir le tutoriel sur la transparence des PNG 24 bits sur IE6 pour plus d’information.

10. FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code :

    <script type="text/javascript">
        FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);
    </script>
    

    En option : possibilité de préciser la version de Flash requise ou d’ajouter des paramètres à votre animation Flash.

11. ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript (et de jQuery pour la majorité des solutions) pour fixer 12 problèmes liés aux navigateurs. Via Zeubeubeu.

    function changeClass(oldClass, newClass) {
        var elements = document.getElementsByTagName("*");
        for( i = 0; i < elements.length; i++ ) {
            if( elements[i].className == oldClass ) elements[i].className = newClass;
        }
    }
    
    <input type="button" value="Hide Sub-lists" onclick="changeClass('show','hide');" />
    

12. Effets lightbox sans framework — L’ouverture de “nouvelles fenêtres” laisse peu à peu la place aux effets lightbox. Voici donc plusieurs solutions simples et efficaces pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.

13. 9 Javascript à ne pas manquer — sélectionner ou désélectionner des checkbox d’un clic ; ouvrir une fenêtre popup ; avoir plusieurs boutons submit pour un formulaire ; émuler le bouton retour du navigateur ; remplir les valeurs d’un menu select selon les choix effectués avec un premier menu, etc.

Voilà pour les 21 premières fonctions. Comme le web est vaste et qu’il ne s’arrête jamais, cette liste va s’allonger au fil de l’eau avec d’autres scripts bien intéressants ;)

1. styleswitcher.js — Proposez des feuilles de style alternatives aux visiteurs.

2. maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 :

   window.onload = checkAvailableWidth;
   window.onresize = checkAvailableWidth;
   function checkAvailableWidth(){
       var container = document.getElementById("container");
       container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
   }
   

3. Simplifier l’accès aux identifiants à la manière de jQuery (via Josselin) :

   function $( element ) { 
       return document.getElementById( element ); 
   }
   

4. dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko en version compressée seulement !

5. DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’élément par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.

   $("#container input[type=text]");
   
   $("#navigation a").addEvent("click", myFunc);
   
   $("#news-list").load("updated-news.php");
   

   Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.

6. nanotabs — Version légère de idTabs sans jQuery pour faire des menus à onglets à partir de simples listes.

7. ul2finder — Listes dynamiques complexes pour réaliser un menu avec un comportement similaire au Finder de Mac OS X : un clic sur un élément affiche une colonne à côté pour le sous-menu, et ainsi de suite. Par le génial et prolifique Chris Heilmann !

8. Webdesign moderne avec Javascript — Bon, se passer des frameworks comme jQuery, c’est bien, mais je vous propose quand même cette liste impressionnantes de 47 scripts, fonctions ou plugins (jQuery, Mootools, YUI, etc.) pour améliorer l’expérience utilisateur ;)

Conclusion

Même s’il ne s’agit pas d’un ensemble de fonction “cohérent” dans le sens où certains scripts ont des fonctionnalités redondantes, ces fonctions devraient trouver une place dans votre bibliothèque. J’ai fait l’impasse sur les frameworks mais mon opinion est faite depuis longtemps : Prototype ou jQuery ont redonné ses lettres de noblesse à Javascript.

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

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

No related posts.

作者:Bruno Bichet

更新日:2008年11月18日 23時10分

このブログのホーム

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