Journal du Webmaster

Mozilla a mis à disposition du public la deuxième beta de Firefox 4.

Cette nouvelle version du navigateur est disponible en 24 langues et affiche désormais les tabs au-dessus de la barre d’adresse par défaut sous Windows et Mac OS.

Niveau développement web, les transitions CSS font leur entrée (préfixée de -moz-), le moteur javascript et l’interface sont encore plus rapides et le support de WebGL est complet (mais désactivé par défaut).

Firefox 4 beta 2 introduit de plus le support du format vidéo HD WebM récemment mis à la disposition du public par Google, un nouveau parser pour HTML5, l’introduction de l’API HTML History qui permet d’ajouter des pages à l’historique du navigateur et permet l’utilisation des WebSockets.

Une liste complète des changements est disponible ici.

Vous pouvez télécharger la dernière beta de Firefox 4 à cette adresse ou directement sur le FTP de Mozilla.

Pour cet été, nous vous avons concocté un petit rafraîchissement graphique, qui sera actif sur l’ensemble du site Alsacreations.com.

Il s’agit principalement :

• d’alléger la structure du site (réduction d’un tiers du poids des pages)
• d’améliorer la lisibilité du menu de navigation
• de permettre d’autres optimisations dans le futur, notamment en version mobile

Nous espérons que ce nouvel habillage (v3.1) vous plaira et facilitera l’accès au contenu.

Bien que les spécifications CSS 3 soient encore dans un état embryonnaire, il devient acquis qu’un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu’est Internet Explorer.

Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l’on peut enfin s’évader d’une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s’opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public.

De multiples ressources CSS3 pour déjouer les faiblesses d’IE voient le jour presque quotidiennement, notamment par l’ajout de JavaScript. On en vient à soupeser les avantages et inconvénients de chacune de ces solutions : d’un côté la rapidité d’intégration; de l’autre une baisse de performance non négligeable sur ce navigateur. Selon le contexte, le public ciblé ou nos affinités, la balance ne penche pas toujours du même côté.

Voyons quelques uns de ces outils en ligne en vogue actuellement :

CSS3pie.com

Dans la jungle des outils permettant d’émuler CSS3 sur Internet Explorer, CSS3Pie semble être le plus robuste aujourd’hui et bénéficie d’une communauté et d’un compte Twitter plutôt actifs.

Via un fichier .HTC, CSS3Pie permet d’appliquer un certain nombre de propriétés CSS3 intéressantes : border-radius, box-shadow, border-image, backgrounds multiples et dégradés linéaires. Très prometteur.

CSS3please.com

CSS3Please n’est rien d’autre qu’une excellente démonstration en direct et interactive de différentes propriétés CSS3 (arrondis, ombrages, dégradés, transparence, rotation, transition, font-face)

Vous pouvez modifier les options et valeurs de la page, elles s’appliqueront instantanément sur la boîte d’exemple et l’ensemble des syntaxes (-moz-, -webkit-, et filtres IE) est proposée.

CSS3generator.com

Dans la même veine que CSS3Please, CSS3Generator est un outil de génération automatique de syntaxes CSS dont le résultat est affiché en direct à l’écran.

Certaines fonctionnalités telles que les colonnes multiples, resize, box-sizing ou outline le démarquent de ses concurrents.

IE-css3.js

Toutes les ressources ne se limitent pas à rendre utilisable les propriétés CSS3, certaines telles que IE-CSS3.js permettent d’émuler les différents sélecteurs (:first-child, :last-child, :nth-child, :focus, :target,…) CSS3 sur IE6-IE8 via JavaScript.

Sous forme de plugin ajouté à un framework existant (jQuery, Mootools, Prototype,…), cet outil nous semble bien abouti et robuste.

Font-face generator

Exclusivement dédié à l’intégration de polices non standards sur tous les navigateurs, Font-face generator permet non seulement de convertir un fichier de fonte en plusieurs formats (.eot, .ttf, .woff) mais offre également une page de démonstration du résultat obtenu. Et ça marche !

Gradients generator

Gradients generator vous facilite la création de vos dégradés linéaires ou radiaux à l’aide d’un environnement où se croisent pipette, plage de couleurs, options de dégradés, code obtenu et résultat visuel.

N’oublions pas ces deux autres sites de ressources et d’information :

CSS3.info

CSS3.info est site d’information sur les spécifications CSS3 pertinent et régulièrement alimenté.

Vous y trouverez les dernières actualités concernant cette norme et les navigateurs, quelques tutoriels ainsi que l’avancement des travaux sur les différentes propriétés et sélecteurs.

Findmebyip.com

FindMeByIP propose quelques tableaux évocateurs du support actuel des navigateurs concernant les diverses propriétés CSS3 et les sélecteurs.

On y constate généralement que le retard pris par Internet Explorer est véritablement significatif et qu’il demeure complètement isolé à l’heure actuelle.

Et aussi…

• 10 CSS properties that ‘were’ impossible to implement in IE6
• IE-CSS3.htc de Fetchak : même principe de CSS3Pie, mais un peu plus limité
• CSS Transform sur IE : rotations et déformations sur Internet Explorer
• Border-radius.com : testez vos coins arrondis en direct
• Roundies.js : un petit script JavaScript très léger pour des coins arrondis simples sur IE
• IE7nomore.com : une page de tests de CSS avancés (pas uniquement CSS3)
• When can I use : un récapitulatif des dernières technologies et de leur support sur les générations de navigateurs
• Et certainement bien d’autres demain…

Internet Explorer (versions 6,7,8) fait face à un problème de gestion de l’impression des balises HTML5, car il ne prend pas en compte les styles pour le média print pour ces balises (même si vous les avez déclarées dans le DOM pour les afficher pour le média screen).

La seule solution actuellement est d’inclure un fichier JavaScript qui fixe ce problème : IE Print Protector. Celui-ci remplace temporairement les éléments HTML par des autres éléments neutres (comme div et span) avant l’impression, puis les restaure après, tout en conservant les styles associés.

Notez que html5shiv intègre désormais également IE Print Protector. Pour l’utiliser, vous pouvez inclure ce bout de code dans l’élément head avant les appels aux feuilles de styles CSS.

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Article complété par dew

Du fait de la pluralité des plateformes et des différences des moteurs de rendus, il n’est pas toujours aisé de tester son site web sur le media mobile. Sans compter le coût d’acquisition du matériel. La plupart des émulateurs en ligne se contentent malheureusement de redimensionner la page sans tenir compte des spécificités inhérentes à chaque terminal : iphonetester.com, l’extension Webdeveloper, viewlike.us, resizemybrowser,…

En dehors de l’installation des divers SDK officiels des constructeurs ou de l’excellente version d’Opera Mobile installable sur un système d’exploitation classique (Windows, Mac OS X…), point de salut pour visualiser ses pages dans un environnement proche des conditions réelles.

ProtoFluid est une application en ligne permettant de simuler au mieux l’affichage de votre site web ou d’une url locale sur divers terminaux mobiles :

• Motorola Droid
• iPhone/iPod
• iPad
• Google Nexus One

Simple et efficace pour un test rapide

Il suffit de renseigner l’URL à visionner ainsi que la plate-forme désirée, et sa résolution si vous souhaitez la modifier. Le résultat apparaît dans une fenêtre modale (lightbox). Il vous est ensuite possible de modifier l’orientation (portrait ou paysage) puis de rafraîchir votre résultat.

Pour l’avoir testé sur quelques uns de nos sites web dont les feuilles de styles prennent en charge le média mobile (meta tag “viewport”, CSS media queries), tels que alsacreations.fr et ie7nomore.com, je ne peux qu’en conclure que l’outil se rapproche beaucoup plus du résultat escompté que ses congénères, même si le rendu reste tributaire du navigateur utilisé pour consulter le site ProtoFluid car la simulation ne se fait qu’au travers d’un élément iframe et de JavaScript. Il faudra donc éviter d’y accéder avec Internet Explorer.

Viewport et Media Queries CSS3

Il est possible de définir la résolution du terminal à l’aide du meta tag viewport reconnu par Safari, Webkit et Opera à l’heure actuelle. Ce meta tag est généralement un bon point de départ pour adapter harmonieusement un design sur le média mobile. ProtoFluid prend en compte les informations véhiculées via ce meta tag.

Les Media Queries sont interprétées sur les navigateurs les connaissant, accompagnées des propriétés width, max-width, max-device-width ainsi que orientation (portrait ou landscape).

Par contre, dans le cas ou vous testeriez sur un écran d’ordinateur classique, vous devrez accompagner votre règle media query max-device-width par un complément max-width sous peine de ne pas être pris en compte puisque votre écran de bureau ne peut pas être considéré comme un périphérique d’affichage de taille réduite :

@media only screen and (max-device-width:640px), only screen and (max-width:640px) {   body  {width: auto}}

Le marché du téléphone intelligent est en plein boom et chaque jour naissent de nouvelles ressources et outils pratiques pour faciliter le développement ou les tests sur le média mobile. ProtoFluid n’est pas parfait mais une nouvelle ressource verra peut-être le jour pour des simulations encore plus pratiques et fidèles.

L’équipe de développement, Optic Swerve, est en train de plancher sur une nouvelle version (1.1) de leur outil, vous pouvez suivre l’évolution du projet sur leur compte Twitter.

Limites de l’outil

Comme tout outil de ce type, ProtoFluid ne peut que “deviner” comment va se comporter le moteur de rendu final et s’y adapter à partir de votre navigateur de test. Cela signifie que certaines technologies présentes sur votre poste de bureau (flash par exemple) vont apparaître sur la simulation iPhone, ce qui ne risque pas d’arriver de sitôt sur un véritable terminal d’Apple.
De même, certaines règles CSS telles que le positionnement fixé, normalement désactivé sur de nombreux mobiles, vont tout de même être exécuté sur la simulation.
Sachez tenir compte de ces incongruités dans vos tests.

Liens connexes

• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• Tester son site sur Blackberry
• Emuler Google Android

Présentation et compatibilité

Cette partie du tutoriel va légèrement reprendre le contenu d’une publication d’Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable.

Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module “Selectors Level 3 (:target)“et sur le module “CSS Animations Module Level 3” actuellement en Working Draft.

La pseudo-classe target

Beaucoup de liens d’un site web renvoient sur des parties précises d’une page par l’intermédiaire d’ancres. La navigation devient alors beaucoup plus aisée et le passage d’une partie d’une page à une autre est facilité. Nous rencontrons ceci assez souvent dans les F.A.Q. d’un site internet, avec un sommaire de questions, puis plus bas toutes les réponses correspondantes.

Voici la syntaxe d’un lien renvoyant sur une ancre.

<a href="#faire-lien">Comment faire un lien</a>

Ce lien cible un élément (l’ancre) dont l’id est faire-lien, en voici un exemple :

<div id="faire-lien" class="blocReponse">   <p class="question">Comment faire un lien ?</p>   <p class="reponse">La réponse à la question...</p></div>

Une fois le clic effectué sur le lien l’élément ciblé peut subir des changements de styles grâce à la pseudo-classe target.

.blocReponse:target {   background: #DDD;   border: 1px solid #000;}

Voir l’exemple

Vous remarquerez l’utilisation de la classe .blocReponse dans le CSS en lieu et place de l’id correspondant #faire-lien. Cela simplifie l’utilisation de cette pseudo-classe si, pour poursuivre sur notre exemple, notre F.A.Q. devait posséder une cinquantaine de questions !

Remarque : la pseudo-classe target est actuellement prise en charge par toutes les dernières versions des navigateurs modernes, sauf Internet Explorer 8 et ses versions antérieures.

Les animations

Les spécifications relatives aux transitions et animations sont “CSS3 Transitions” et “CSS Animations Module Level 3“.

Pour simplifier les lignes de code qui suivront je ne préciserai aucun des suffixes nécessaires à la prise en charge des animations en CSS par les navigateurs. Je vous rappelle que pour la prise en charge complète (actuelle et à venir) de ces propriétés, il serait idéal d’écrire :

element {   -webkit-transition: all 1s;   /* pour Webkit */   -o-transition: all 1s;   /* pour Opera 10.5+ */   -moz-transition: all 1s;   /* pour Firefox 3.7 */   transition: all 1s;   /* pour tous (futur...) */}

Remarque : avec les animations en CSS nous commençons déjà à restreindre la liste des navigateurs compatibles, puisque seuls Chrome (Webkit), Safari (Webkit) et Opera prennent en charge cette fonctionnalité. Firefox 3.7 devrait rejoindre d’ici peu cette petite liste.

Passons à la pratique !

Vous pouvez désormais ajouter le moteur de recherche d’Alsacreations à votre navigateur si celui-ci est équipé d’une zone adaptée. Il vous suffit de cliquer sur la liste déroulante des moteurs intégrés et de choisir “Ajouter”. Vous pourrez le retirer par la suite si vous le souhaitez dans les paramètres (sous Firefox “gérer les moteurs de recherche”).

Les navigateurs compatibles avec Opensearch sont :

• Mozilla Firefox 2+
• Google Chrome
• Internet Explorer 7+

Malheureusement Opera ne l’exploite pas encore, malgré la présence d’un champ de recherche dans son interface. OpenSearch a initialement été proposé par A9 (Amazon).

Comment cela fonctionne-t-il en pratique ?

Pour ajouter une telle fonctionnalité sur votre site, il vous suffira d’éditer deux fichiers.

La description XML

Premièrement il faut créer un fichier XML tel que opensearch.xml, placé par exemple à la racine de votre site :

<?xml version="1.0" encoding="UTF-8" ?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">  <ShortName>Alsacreations</ShortName>  <Description>Recherche dans les ressources</Description>  <Image>favicon.png</Image>  <Language>fr</Language>  <InputEncoding>UTF-8</InputEncoding>  <Url type="text/html" template="http://www.alsacreations.com/search/tag/{searchTerms}"/></OpenSearchDescription>

Celui-ci est relativement simple à comprendre. Des exemples plus complets avec d’autres balises sont disponibles sur le site Opensearch.org Specifications.

OpenSearchDescription

Il s’agit de l’élément racine, de namespace http://a9.com/-/spec/opensearch/1.1/

ShortName

Le titre de votre moteur/site de recherche

Description

La description un peu plus longue.

Url

L’adresse à interroger, dont l’attribut template définit le masque, notamment via {searchTerms} qui sera remplacé par les mots entrés dans le champ d de recherche (et échappés, de la même façon que urlencode en PHP).

Image

L’url vers l’image favicon du site.

Language

La langue d’après la spécification XML.

InputEncoding

Pour spécifier l’encodage des valeurs à utiliser, par exemple UTF-8.

Le lien avec link

Deuxièmement, y faire référence dans le code source du site, section head, grâce à l’élément link avec les attributs (rel, type, title) appropriés et surtout l’URL vers le fichier XML dans l’attribut href :

<link rel="search" type="application/opensearchdescription+xml" title="Alsacreations" href="http://www.alsacreations.com/opensearch.xml" />

Note : Le titre indiqué dans la balise link doit correspondre au contenu de la balise ShortName du fichier XML.

Bien entendu cette spécification va au-delà du simple ajout au moteur et définit d’autres fonctionnalités d’interrogation et de réponses, avec une présentation des résultats et des agrégateurs.

La nouvelle version 10.6 d’Opera est disponible depuis aujourd’hui en version finale. Et, contrairement à la 10.5, l’ensemble des plateformes est servi en même temps.

Parmi les nouveautés, on distingue :

• l’apparition du moteur de recherche Bing dans le Speed Dial (cela dit, comme il est indiqué dans le billet Bing in Opera, Google demeure le moteur de recherche par défaut d’Opera),
• la suggestion de recherche,
• la géolocalisation (la démonstration Live Map en apporte un exemple, avec la possibilité de refuser de partager sa localisation),
• le support du format WebM pour la vidéo (une démonstration est disponible),
• la poursuite du support du HTML 5,
• un moteur plus rapide (jusqu’à 50 % plus rapide que celui de la version précédente).

Pour en savoir plus

• Télécharger Opera 10.6 ;
• Download new version of Opera, sur le blog Choose Opera ;
• What is faster than the fastest?, communiqué de presse d’Opera ;
• revue de presse sur Opera 10.6, sur le blog Choose Opera.

Le projet Chromium qui sert de base open-source au navigateur Google Chrome souhaite mettre en avant les possibilités pour améliorer l’accessibilité du web à ses utilisateurs. Ce projet en lui-même définit déjà des pistes générales pour la prise en charge de la navigation au clavier, de l’affichage des polices, du support de WAI-ARIA et des synthèses vocales (voir Chromium Projects : Accessibility).

Le répertoire des plug-ins comporte déjà une rubrique pour les extensions concernant l’accessibilité et qui répondent à des besoins de facilité de navigation avec les périphériques utilisateur, de perception visuelle, ou de (re)mise en forme du contenu.

Le Developer’s Guide de Code Labs, section Accessibility (a11y) fait maintenant mention de quelques informations supplémentaires pour l’implémentation des plug-ins en terme d’accessibilité, et des bonnes pratiques pour la navigation clavier, le contraste et l’agrandissement du texte. La nouvelle extension ChromeVis a également été publiée en open-source ; celle-ci permet d’améliorer dynamiquement la lisibilité du texte d’une page.

Ne manquez pas la vidéo décrivant ces quelques idées :

Chromium/Chrome se prononce donc davantage en faveur d’un web accessible, et tente de redorer son blason dans ce domaine qui montre de grandes lacunes, notamment par le support des lecteurs d’écran (aucune compatibilité de la part de JAWS, Window-Eyes et NVDA).

jQuery est désormais une librairie JavaScript bien connue, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici en détails quelques possibilités d’intégration à votre site, afin de minimiser l’impact sur les performances et le temps de chargement.

Appel classique à la librairie (fichier téléchargé)

De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.4.2.min.js.

Fichier et compression

Vous récupérerez ainsi une version “minifiée”, c’est à dire compressée jusqu’à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Ceci n’est pas bien grave car il s’agit la plupart du temps de ne pas modifier cette librairie mais de la combiner à nos propres fonctions, déclarées de façon externe.

Voyez les différences entre la version non minifiée et la version minifiée. Sachez qu’il est possible de faire de même pour vos propres scripts grâce à Google Closure Compiler ou encore YUI Compressor de Yahoo.

Il vous est aussi possible de délivrer ce fichier re-compressé au format gzip pour gagner encore en taille, c’est à dire 24 Ko au total au lieu de 72 Ko. Pour ceci, consultez le tutoriel correspondant : Compression des pages web avec Gzip ou Deflate en HTTP.

Performances au chargement

Pour des questions de performance, Google Code et Yahoo Developer Network : Exceptional Performance recommandent :

• de placer les appels aux librairies en fin de page avant </body>
• de placer les appels aux feuilles de style CSS avant, dans la section <head> grâce au tag link
• de combiner au maximum les fichiers JavaScript/CSS, de les compresser/minifier et de les externaliser (c’est à dire les placer chacun dans un fichier externe à la page et non en ligne avec toutes leurs instructions dans le code html)

Vous obtiendrez ainsi :

<!doctype html><html>  <head>     <title>Titre de la page</title>     <link rel="stylesheet" type="text/css" href="styles.css">  </head>  <body>     ...     <script src="jquery.js"></script>     <script src="mon_script.js"></script>  </body></html>

Depuis Google AJAX Librairies API

Google propose une API dédiée au chargement de différentes librairies, . L’avantage étant de bénéficier d’un hébergement externe et rapide (mais soumis la plupart du temps à une requête HTTP+DNS supplémentaire) avec un fichier délivré en gzip sans avoir à configurer votre serveur. Il vous faudra néanmoins vous inscrire - gratuitement - pour obtenir une clé API AJAX Search.

<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script><script type="text/javascript">google.load("jquery", "1.4.2");</script>

Le premier argument étant le nom de la librairie, et le deuxième sa version (si vous spécifiez “1.4″, vous obtiendrez la dernière version de la branche “1.4.x”, avec “1″ aussi, etc). Vous pouvez également directement charger ce fichier en vous passant de l’appel à l’API JS google.load :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

D’autres librairies sont disponibles (MooTools, Dojo, SWFObject, YUI, Chrome Frame, WebFont), pour ceci consultez la documentation. Reprenons notre exemple, sans avoir besoin d’héberger le fichier jquery.js :

<!doctype html><html>  <head>     <title>Titre de la page</title>     <link rel="stylesheet" type="text/css" href="styles.css">  </head>  <body>     ...     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>     <script src="mon_script.js"></script>  </body></html>

Votre premier script jQuery

Bien entendu il vous faudra placer votre propre fichiers JavaScript ou vos déclarations à la suite de cet appel, dans mon_script.js. Ceci est la plupart du temps valable pour les autres librairies JavaScript.

Pour ceci vous avez deux possibilités :

• placer une fonction directement dans le code de la page à l’aide de la balise <script> mais sans fichier externe (sans attribut src). Le seul avantage de cette méthode est de supprimer une requête HTTP, mais cela ajoute du contenu à votre code HTML qui ne sera pas (ou plutôt rarement) mis en cache.
• placer vos instructions dans un fichier externe (*.js), plus facile à maintenir et à inclure sur un groupe de pages de votre site, avec le petit inconvénient d’effectuer une requête HTTP en plus.

Utilisons la deuxième solution pour placer notre script jQuery dans mon_script.js. Dans la majorité des cas, nous souhaiterons exécuter le code au chargement de la page, grâce à la fonction ready() appliquée à l’objet document. C’est-à-dire lorsque les objets de la page seront prêts à être manipulés par JavaScript.

$(document).ready(function() {   // Votre code ici});

La fonction $() est la fonction magique de jQuery. Celle-ci permet de cibler les éléments grâce aux sélecteurs, de déclarer des gestionnaires d’événements, d’utiliser les autres fonctions de la librairie, il s’agit en réalité d’un alias sur l’objet jQuery lui-même.

Tranchons dans le gras

Le but de cet astuce étant juste de faire appel minimaliste à jQuery, nous nous contenterons pour cette démonstration de masquer un élément <div id="masque">, puis de le révéler au clic sur un lien <a id="afficher">Afficher l'élément</a>.

Toujours dans la déclaration $(document).ready(function() {, nous placerons les instructions jQuery de notre script :

$(document).ready(function() {   // Dès le chargement on masque l'élément portant l'id #masque   // grâce à la fonction hide() de jQuery   $("#masque").hide();   // On déclare un gestionnaire d'événement 'click' sur un lien   // pour afficher l'élément précédemment masqué   $("a#afficher").click(function() {      // La fonction click() appliquée à notre sélecteur $("a#afficher")      // prend en argument une fonction anonyme (sans nom) contenant      // le reste des instructions :      $("#masque").show("fast");      // L'argument "fast" est facultatif mais nous permet      // d'afficher l'élément avec une petite animation      return false;      // On retourne 'false' pour prévenir l'exécution du lien      // c'est à dire pour éviter au navigateur de changer de      // page en suivant son attribut href   });   // Faites bien attention à la syntaxe et à l'imbrication des   // parenthèses et accolades});

Démo

Consultez la démonstration pour explorer le code source :

• index.html
• mon_script.js

Voici donc une brève introduction à l’inclusion de jQuery sur votre site. N’hésitez pas à consulter la documentation de jQuery pour faire connaissance avec les autres fonctions et sélecteurs possibles ou à utiliser la section JavaScript du forum.

FLIR est une solution axée sur une combinaison PHP/Javascript. Elle génère dynamiquement une image à partir d’un texte contenu dans votre page web dans une police de caractère déposée sur votre serveur et qui, autrement, ne pourrait pas être vue par vos visiteurs.
L’image générée sera automatiquement insérée dans votre page à l’aide de Javascript et visible sur tous les navigateurs modernes. N’importe quel élément contenant du texte peut être remplacé depuis les headers (<h1>, <h2>, etc…) jusqu’aux éléments <span>.

Avant de vous jeter les yeux fermés dans l’éxecution de ce tutoriel, sachez que l’utilisation de FLIR requiert un serveur web supportant PHP et la librairie GD.
PHP5 est recommandé mais PHP4 devrait fonctionner également. Une version récente d’ImageMAgick (6.3+) est requise pour bénéficier des effets offerts par les plug-ins FancyFonts et QuickEffects (que nous n’aborderons pas dans ce tutoriel).

Voir l’exemple final ici : http://course-a-pied.info/flir/

Et voilà ce que vous devriez obtenir :

Etape 1 - Mise en place de Facelift

Avant toute chose, téléchargez Facelift v1.2 (dernière version stable) sur http://facelift.mawhorter.net/download/. Décompressez l’archive téléchargée sur votre serveur (de préférence dans son propre répertoire).
Pour simplifier ce tutoriel, j’ai renommé le répertoire d’origine “facelift/”.

A l’intérieur du répertoire “facelift/” se trouve un fichier Javascript nommé “flir.js”.
Vous pouvez choisir de le laisser à l’endroit initial ou de le déplacer où bon vous semble, par exemple dans un répertoire où vous centralisez vos fichiers JS.Pour ce tutoriel, nous allons déplacer le fichier dans un répertoire “js/” à la racine de notre site.

Ouvrez “flir.js” dans un éditeur de code et rendez vous ligne 28. Vous devriez voir ceci :

,path: ''

Nous avons besoin de définir entre apostrophes un chemin absolu ou relatif vers notre répertoire “facelift/”.
Toutefois, les chemins relatifs le sont à la page et pas au fichier “flir.js”, ce qui peut causer des problèmes avec les sites qui utilisent l’url rewriting. Ainsi, le moyen le plus sûr que tout fonctionne est de définir un chemin absolu.

,path: 'facelift/'

Ouvrez la page HTML dans laquelle vous souhaitez ajouter FLIR et imbriquez la ligne suivante entre les balises <head> pour attacher “flir.js” :

<script src="js/flir.js" type="text/javascript"></script>

Ensuite, ajoutez ceci juste avant la balise </body> fermante :

<script type="text/javascript">      FLIR.init();      FLIR.auto();  </script>

Etape 2 - Choisissez et configurez vos polices

Téléchargez les polices que vous souhaitez utiliser. Placez les dans le répertoire “fonts/” au sein du répertoire “facelift/”.

Pour les besoins de ce tutoriel, j’ai utilisé les polices suivantes téléchargées sur DaFont :

• Hard Rock par Last Soundtrack (http://www.dafont.com/hard-rock.font),
• Brushed par Pizzadude (http://www.dafont.com/brushed.font),
• Remington Noiseless par Richard Polt (http://www.dafont.com/remington-noiseless.font),
• Rayair par Rodrigo German (http://www.dafont.com/fr/rayairregular.font).

Remarque : ces 4 polices sont au format TTF, mais les polices au format OTF fontionneront également avec FLIR.

Ouvrez “config-flir.php” dans lequel vous trouverez un bloc de code qui ressemble à ceci :

// Each font you want to use should have an entry in the fonts array.$fonts = array();$fonts['illuminating'] = 'ArtOfIlluminating.ttf';$fonts['okolaks'] = 'okolaksBold.ttf';$fonts['wanta'] = 'wanta_091.ttf';// The font will default to the following (put your most common font here).$fonts['default'] = $fonts['okolaks'];

Chaque clé (array) dans le tableau “$fonts” correspond à une police que vous avez placé dans le répertoire “fonts/”.

Ajoutons les polices que nous avons téléchargé précédemment :

// Each font you want to use should have an entry in the fonts array.$fonts = array();$fonts['hardrock'] = 'HARD_ROCK.ttf';$fonts['brushed'] = 'BRUSHED.TTF';$fonts['remington'] = 'Remington-Noiseless.ttf';$fonts['rayair'] = 'rayairregular.ttf';

La mention (clé) entre crochets est celle qu’il faudra utiliser dans notre feuille de styles lorsque nous souhaiterons appliquer les polices à du texte. Pensez donc à quelque chose d’à la fois simple et pertinent :).

Remarque : la police assignée à la clé $fonts['default'] sera utilisée par défaut si aucune autre n’est spécifiée. Dans notre exemple, nous utiliserons la police Rayair.

// The font will default to the following (put your most common font here).$fonts['default'] = $fonts['rayair'];

Il existe une multitude d’autres options à définir dans le fichier “config-flir.php”, mais nous allons les laisser de côté pour ce tutoriel de démarrage. Le fichier est explicitement commenté si vous souhaitez en tester d’avantage et vous pourrez également vous référer à la documentation (en anglais) sur le site de FLIR (http://facelift.mawhorter.net/doc/).

Etape 3 - Styler

L’ultime manoeuvre consiste à créer notre feuille de styles comme nous le faisons habituellement.
Utilisez les clés définies dans le tableau $fonts (vu plus haut) en tant que nom de police dans vos déclarations.
Nous allons appliquer à notre page la police Hard Rock à l’ensemble des balises <h1>, la police Brushed à toutes les balises auxquelles seront attribué la classe .brushed et la police Remington-Noiseless à toutes les balises <p> associées à la classe .remington.

h1{font-family: hardrock, Arial, Helvetica, sans-serif;}.brushed{font-family: brushed, Arial, Helvetica, sans-serif;}p.remington{font-family: remington, Arial, Helvetica, sans-serif;}

Il reste pour finir à spécifier au bas de votre fichier HTML les éléments à remplacer dans votre contenu en listant dans la fonction FLIR.auto() que nous avions ajoutée à l’étape 1 vos sélecteurs CSS précédemment créés.

<script type="text/javascript">      FLIR.init();  FLIR.auto([ 'h1', '.brushed', 'p.remington', 'strong.important' ]);   </script>

Dans notre exemple, FLIR remplacera donc par des images l’ensemble des balises <h1>, toutes les balises auxquelles est attribuée la classe .brushed et toutes les balises <p class="remington">.

Les éléments <strong class="important"> seront remplacés par la police par défaut spécifiée plus haut dans le fichier “config-flir.php”, car strong.important n’a pas été défini dans notre feuille de styles.
Le texte dans l’image générée prendra la taille spécifiée par la propriété font-size. FLIR prendra également en charge la couleur, l’espace entre les lettres, mais pas l’ensemble des possibilités de transformation de texte (text-transform, font-weight, font-style…) offertes par CSS.

Attention : si le texte que vous souhaitez remplacer passe sur plusieurs lignes, il vous faudra activer le mode “wrap” de FLIR. Pour ce faire, rendez-vous en ligne 689 du fichier “flir.js”. Vous devriez voir ceci :

mode: '' // none (''), wrap,progressive or name of a plugin

Activez le mode “wrap” ainsi :

mode: 'wrap' // none (''), wrap,progressive or name of a plugin

Une dernière remarque pour finir, mais non des moindres : le dossier “facelift/” et son sous-dossier “cache/” doivent avoir des droits en écriture afin que les images puissent être générées (écrites) sur le serveur.

Voir l’exemple final ici : http://course-a-pied.info/flir/

Conclusion

Bien que FLIR soit une solution de remplacement de texte par des images relativement propre, il persiste quelques problèmes mineurs.

La librairie PHP GD n’offre pas un rendu finement détaillé de toutes les polices et, dans certains cas, vous pourrez voir apparaitre quelques artefacts (notamment dans le cas de polices très graphiques que vous afficheriez en un peu trop petit).

Un autre léger défaut de FLIR est qu’il requiert un serveur web supportant PHP et la librairie GD.
Celà dit, mis à part quelques services gratuits la plupart des hébergeurs proposent aujourd’hui les deux.

Un bénéfice de FLIR par rapport à sIFR (son concurrent le plus direct) reste qu’il demeure bien plus facile à implémenter et qu’il ne requiert pas Flash pour générer et visualiser les polices.

L’utilisation de FLIR (pour ce qui est de ces options les plus basiques en tout cas) ne pose pas de problème de validité du code en regard des préconisations du W3C.

FLIR est également davantage accessible. Il est lu par les lecteurs d’écrans et lorsque les images et/ou Javascript sont désactivés, le contenu (sous forme de police “standard” cette fois) apparaît toujours. Il apparaît également en “dur” dans le code source de votre page HTML.
Dans un navigateur traditionnel et toutes options activées, on ne peut néanmoins pas opérer de sélection sur le texte.

Note : Adaptation du tutoriel initialement rédigé en anglais par James Lao : http://net.tutsplus.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

La version 2010 du site internet de Paris Web est en ligne depuis hier.

Comme chaque année en vue de l’édition à venir, ce dernier a fait l’objet d’une refonte importante menée de main de maître par l’ensemble de l’équipe.

Côté design, l’aspect général tranche de manière assez radicale par rapport aux versions antérieures : ajout d’une couleur complémentaire en lieu et place du gris, choix d’une police particulière pour les titres principaux, illustration en page d’accueil et j’en passe.

Côté technique, notons que le site affiche fièrement un Doctype HTML5. L’utilisation du balisage HTML5 étant peut-être un peu prématurée à l’heure actuelle.

Enfin côté contenu, le site semble plus complet que les versions précédentes. Nous remarquons d’ailleurs une nouvelle section très utile intitulée Venir dans de bonnes conditions. Vous y trouverez quelques indications pratiques concernant le logement, la restauration, et le transport.

À l’heure actuelle les inscriptions ne sont pas encore ouvertes et les programmes ne sont pas encore définis. Il faudra donc patienter un petit peu avant de connaître le contenu de cette 5ème édition.

Sommaire

• overflow: hidden : circulez, y’a rien à voir !
• La césure avec word-wrap : chérie, ça va couper !
• Les points de suspension avec text-overflow
• Fixer des limites avec max-width
• Cas des cellules de tableau

Précision : cet article se limite volontairement au dépassement de contenus et non à d’éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants.

overflow: hidden : circulez, y’a rien à voir !

La propriété CSS2 overflow a été conçue pour administrer les débordements d’éléments au sein d’un bloc.

A l’heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto).

Voici comment mettre en œuvre cette propriété :

p.overflow {      width: 200px; /* à modifier selon vos besoins */      overflow: hidden; /* les dépassements seront masqués */}

Même si cette propriété est actuellement reconnue par l’ensemble du collège des navigateurs, reconnaissons que son manque de souplesse est pour le moins frustrante. Passons donc à d’autres méthodes encore méconnues…

La césure avec word-wrap : chérie, ça va couper !

Dans un texte de contenu, lorsqu’un mot (sans espace ni trait d’union) est plus large que la dimension définie pour son parent, le comportement normal consiste à faire déborder le texte au delà de la largeur normale du cadre, sans retour à la ligne et sans que la dimension du conteneur ne soit affectée (sauf sur IE 6).

Il est toutefois possible de forcer la césure d’un mot long à l’aide de la propriété CSS3 word-wrap, appliquée au parent et qui aura pour effet de couper le mot à un endroit arbitraire afin de provoquer un retour à la ligne.

La propriété word-wrap admet deux valeurs : normal par défaut, et break-word :

.bloc {   word-wrap: break-word;}

Cette précaution se révèle particulièrement pratique dans les projets web où l’on n’est pas toujours maître du contenu et où de multiples rédacteurs alimentent le site, par exemple via un gestionnaire de contenu (CMS).

En effet, un certain nombre de cas de figure sont susceptibles de dégrader complètement un design web en raison des débordements de contenus. C’est le cas par exemple pour les URL très longues qui « dépassent » du conteneur prévu, ou des noms d’éléments ou de fichiers à télécharger tels que Mon_Joli_PDF_De_Bilans_Comptables_Avec_Previsionnel_Sur_5_ans.pdf.

Exemple (HTML) :

<p>L'adresse du lien suivant devrait passer à la ligne pour demeurer au sein du paragraphe<br />    <a href="http://www.Supercalifragilisticexpialidocious.com">http://www.Supercalifragilisticexpialidocious.com</a></p>

Partie CSS :

p {      width: 100px;      margin: auto;      padding: 10px;      background: green;      color: #fff;      font-size: 1.2em;        word-wrap: break-word;   }

En résumé, puisque seules les anciennes versions de Firefox antérieures à 3.5 ne reconnaissent pas word-wrap, il s’agit véritablement d’une astuce à appliquer sans modération à toutes les zones de contenu où les visiteurs de votre site web risquent d’interagir : commentaires de blog, sujets et messages d’un forum, blocs de largeur réduite, messagerie privée, zones de texte d’un gestionnaire de contenu, etc.
À noter enfin que word-wrap est une propriété finalisée qui ne nécessite pas de préfixe vendeur pour être interprétée.

Pour les plus curieux, voici une une page personnelle de mon crû regroupant quelques exemples et tests de césures : http://ie7nomore.com/fun/wrapping/

Les points de suspension avec text-overflow

Dans certains contextes particuliers, pour ne pas dénaturer la mise en page d’un document, nous sommes amenés à masquer les contenus d’un élément dimensionnés à l’aide de la règle overflow (hidden, scroll ou auto).

Les contenus qui débordent de ce bloc sont alors rognés et invisibles. Il peut être utile de laisser un indice visuel pour indiquer la présence de ce contenu masqué. C’est là qu’intervient la propriété css3 text-overflow : associé à la valeur ellipsis, des points de suspension (…) sont générés à l’endroit où le terme est rogné, mais il est possible de substituer cet indice par un autre de son crû à l’aide de la propriété text-overflow-ellipsis.

Voici comment mettre en œuvre cette propriété :

p.text-overflow {      width: 200px; /* à modifier selon vos besoins */      overflow: hidden;      -o-text-overflow: ellipsis; /* pour Opera 9 */      text-overflow: ellipsis; /* pour le reste du monde */}

En pratique, text-overflow est une propriété très précieuse pour certains contenus spécifiques et volontairement raccourcis, tels qu’un résumé – ou abstract – d’un article, ou des commentaires de visiteurs que l’on ne souhaite pas afficher en totalité sur la page d’accueil.

Note : gardez bien à l’esprit que text-overflow à lui tout seul ne coupe rien du tout, il ne sert qu’à donner une indication (des points de suspension par exemple) sur un texte déjà coupé (via overflow hidden généralement)

Fixer des limites avec max-width

La propriété css2.1 max-width ne vous est sans-doute pas inconnue. Elle détermine une valeur de largeur maximale pour un élément de dimension variable (en pourcentage ou em par exemple) et est souvent employée dans le cas de désigns de largeur fluide.

En pratique, cette fonction est particulièrement utile pour la gestion des contenus récalcitrants : plutôt que de limiter la largeur du bloc parent, nous allons nous en servir pour restreindre les dimensions des éléments internes de contenus. L’avantage est que cette propriété peut s’appliquer sur des éléments tels que des images ou des tableaux de données.

p img {      max-width: 200px; /* les images seront limitées à 200px de large */}

Cas des cellules de tableau

Le comportement des cellules de tableaux est souvent radicalement différent des autres éléments du document. Ainsi, certaines propriétés ne s’y appliquent pas, ou demeurent bridées.

Pour rendre word-wrap et text-overflow fonctionnels sur la majorité des navigateurs, il suffit généralement d’indiquer une largeur maximale (max-width à la cellule de tableau incriminée. Cependant, il apparaît que cela n’est pas interprété sur toutes les versions d’Internet Explorer : c’est supporté sur IE6 et IE7… mais pas sur IE8 !

Une autre solution, un peu plus lourde et obstrusive, est à mettre en pratique : fixer la largeur du tableau et lui applique une déclaration table-layout: fixed :

table {      width: 600px; /* à adapter selon vos contraintes */      table-layout: fixed; }

Conclusion

Jusqu’alors frustré par les possibilités restreintes de CSS2, nous allons dès à présent pouvoir profiter des opportunités offertes par CSS3 afin de gérer au mieux les différents cas de dépassements de contenus provoqués par des contributeurs maladroits.

L’avantage étant que même si certaines de ces propriétés ne sont pas encore supportées par tous les navigateurs actuels (Firefox notamment), nous n’avons aucun risque à les employer puisque le préjudice demeure assez faible en cas de non reconnaissance.

Edit : Au vu des commentaires, je me rends compte que la version précédente de ce billet pouvait porter à confusion (je m’en excuse une fois encore auprès des personnes concernées). Afin d’éviter tout amalgame malheureux, ce dernier a donc été remanié comme suit :

Comme le disait Raphael il n’y a pas si longtemps : nous vivons une époque formidable.

Pourquoi ?
Mais simplement parce que les choses bougent :

• parce que HTML5 est là, tout près ;
• parce que CSS3 nous laisse entrevoir des choses insoupçonnables il n’y a pas si longtemps ;
• parce que les Standards du Web sont enfin rentrés dans les moeurs ;
• parce que l’accessibilité n’est plus forcément la dernière roue du carrosse ;
• parce qu’il fait beau et que les oiseaux chantent.

Cette époque a amené avec elle son lot de changements et d’évolutions formelles et fonctionnelles.
Côté contenu, l’interactivité l’emporte haut la main. Côté design, les nouvelles tendances mettent à l’honneur icônes, polices atypiques et fond texturés.

Pourquoi pas, après tout… :o)
On voit de très belles réalisations dans le genre. Je pense par exemple à Remix Jobs ou encore Peaxl qui semble bien parti pour être superbe.
La nouvelle version de l’agence Alsacréations n’échappe d’ailleurs pas à la règle.

Je précise que la suite de mes propos ne concerne pas les sites susnommés. Je trouve simplement qu’ils illustrent parfaitement la nouvelle tendance graphique évoquée.

Ce qui fait la force de ce nouveau genre de design, c’est justement les ressources sur lesquelles il s’appuye : les polices exotiques, les icône web 2.0 et les arrière-plan de caractère.
Ces ressources sont, dans la majorité des cas, distribuées sous Licence Creative Commons. La seule obligation du site y ayant recourt est donc de nommer explicitement l’auteur en citant son nom.

Là où le bât blaisse, c’est que bon nombre de sites utilisant des éléments sous Creative Commons ne citent par leurs sources : ils “oublient” de mentionner les auteur concernés.

A la place, on y trouve plutôt une phrase du style :
Les textes proposés, les images et illustrations sont la propriété exclusive de “insérer ici le nom du site”. Il est interdit de reproduire, représenter, transférer, distribuer, ou d’enregistrer tout ou partie de ces éléments, sous quelque forme que ce soit, sans l’accord préalable et écrit de “insérer ici le nom du site”.

Un comble, vous ne trouvez pas ?

Alors soyez réglo et citez vos sources !
C’est finalement la moindre des choses que de rendre à César ce qui lui appartient !
Car le jour où il fermera les vannes, on sera tous bien em…és !

Nous avons le plaisir de vous annoncer la sortie d’un nouveau DVD aux éditions Elephorm dont le sujet est l’apprentissage de jQuery. Celui-ci a été réalisé en collaboration avec Alsacréations à l’attention de tous ceux souhaitant découvrir ce framework de plus en plus incontournable, en ayant des notions de JavaScript ou non. On y fait le tour en vidéo, explications et démos de l’ensemble des fonctionnalités essentielles de jQuery.

Sommaire (simplifié)

• Principes de base
• Mise en œuvre de JavaScript et jQuery
• Votre premier script jQuery minimaliste
• Sélecteurs et filtres
• Événements (souris, clavier
• Manipulations du texte et du code HTML
• Manipulations des attributs
• CSS et manipulations des classes
• Dimensions et positionnement
• DOM (Document Object Model) et contenus dynamiques
• Animations et Effets
• Parcours, recherche
• Mises en applications (liste déroulante, accordéon, onglets, slideshow, lightbox)
• Écriture de plug-ins
• Étendre les possibilités de jQuery avec l’écriture de plug-ins
• Ajax, load, $.ajax, $.post, $.get, traitements XML et JSON

Synopsis

Ce DVD introduit pas à pas toutes les notions fondatrices de ce langage avant d’en détailler les fonctionnalités et applications principales. Créez des effets d’animation, des présentations dynamiques, des menus ergonomiques facilement implémentables et compatibles multi-navigateurs, et bien d’autres applications encore. Des projets complets joints à cette formation permettront de trouver de nouvelles bases solides pour enrichir vos projets Web. Les méthodes Ajax offertes par jQuery y sont détaillées avec des cas pratiques construits pas-à-pas.

La durée totale est de 5h. Le contenu est également disponible en VOD.

Vous pouvez retrouver ce DVD jQuery sur Elephorm, Fnac.com, Amazon (bientôt) et dans la plupart des rayons informatique (librairies ou grandes surfaces).