De nos jours, l'accent est souvent mis sur la performance des sites et les économies de bande passante. Les temps d'accès et de téléchargement se mesurent (très précisément avec de nombreux outils) en millisecondes. De nombreuses recommandations provenant de Google et Yahoo font mention de la compression des pages avant leur transit sur le réseau.

1. Le serveur compresse les données (code HTML, CSS...)
2. Les fichiers transitent par le réseau via HTTP
3. Le navigateur décompresse les données avant de les interpréter

Ce qui représentait une charge supplémentaire pour les serveurs web à l'époque où leur puissance était moindre, peut désormais devenir négligeable en regard des améliorations apportées, notamment pour les navigateurs mobiles. Si la compression impose une charge trop importante à votre serveur, il est possible de pré-compresser les contenus, les placer en cache et les délivrer directement.

Ces techniques qui sont prévues depuis HTTP/1.1 (1999) peuvent tout à fait être mises en œuvre pour les documents HTML mais aussi CSS, XML ou JavaScript. Il est inutile de s'en servir pour les fichiers binaires (images, vidéos, PDF...). Elles ne vous dispensent pas de réduire initialement la taille des fichiers HTML ou CSS (les "minifier") en appliquant d'autres critères tels que la suppression des espaces excédentaires ou des commentaires inutiles.

Navigateurs

La première interrogation - dans le monde impitoyable de la création web et des guerres entre navigateurs modernes et antiques - concerne le support de cette fonctionnalité. Or, ici, bonne nouvelle : on peut considérer que la totalité des navigateurs supportent la décompression des pages avec HTTP/1.1 :

• Netscape depuis 4.06

• Microsoft Internet Explorer depuis 4.0*
• Opera depuis 5.12
• Firefox toutes versions
• Google Chrome toutes versions
• Safari toutes versions

* avec quelques petits bugs jusqu'aux versions 5.0 et 6.0 comprises

De plus, il incombe aux navigateurs d'envoyer un en-tête HTTP indiquant les types de pages compressées supportées . Si cet en-tête ne figure pas dans ceux reçus par le serveur, il lui suffit de ne pas activer la compression.

GET / HTTP/1.1
Host: www.alsacreations.com
Accept-Encoding: gzip
User-Agent: Firefox/3.6

Le serveur répond alors de la même manière, grâce à Content-Encoding, et en faisant suivre par le contenu compressé de la page.

HTTP/1.1 200 OK
Server: Apache
Content-Type: text/html
Content-Encoding: gzip
Content-Length: 13337

...

Deux formats coexistent :

• Deflate, algorithme qui couple LZ77 et le codage de Huffman.
• Gzip, évolution de Deflate, un peu plus performant, mieux supporté, plus répandu.

Mise en place au niveau des serveurs web

Attention : les indications suivantes doivent être ajustées selon votre configuration et vos besoins.

Apache est équipé du module officiel mod_deflate depuis sa version 2.0 qui utilise zlib, et de mod_gzip ou mod_deflate pour sa version 1.3. Ces modules sont désactivés par défaut, mais peuvent être activés dans la configuration générale du serveur si vous y avez accès. Par défaut mod_deflate permet de spécifier les types de fichiers à compresser à la volée grâce à la directive AddOutputFilterByType DEFLATE. Une fois ces modules disponibles vous pouvez également exploiter les fichiers .htaccess dans chaque répertoire pour plus de souplesse (voir au point suivant).

Apache 2

En ligne de commande avec les droits root pour activer les modules nécessaires :

a2enmod headers
a2enmod deflate
/etc/init.d/apache2 restart

Éventuellement en ajoutant aussi un fichier dans mods-available/deflate.load et un lien symbolique vers celui-ci dans mods-enabled/, ou une ligne dans httpd.conf :

LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so

Sous Windows, il faudra indiquer le chemin du fichier .dll éponyme. Attention : si un lien symbolique vers mod_deflate.conf est déjà présent dans mods-enabled avec une directive de configuration générale, il est possible que tous vos fichiers soient déjà délivrés compressés. Faites un test avant tout - voir en fin d'article.

Puis il faut ajouter des directives à la configuration (par exemple dans un fichier situé dans /etc/apache2/conf.d/) pour compresser des types de fichiers bien spécifiques, dans un répertoire spécifique lui aussi. Ceci est recommandé lorsque l'on place toutes les feuilles de style dans un répertoire indépendant, ainsi que les JavaScripts, car le but n'est pas de (re)compresser tous les fichiers hébergés sur le serveur web mais de se focaliser sur l'essentiel. Il est donc possible d'indiquer <Location /css> pour n'appliquer ces règles que sur ce répertoire (on considère ici l'URL) et ses descendants, ou d'utiliser <Directory /chemin/absolu/vers/css> si l'on se réfère au système de fichiers.

<IfModule mod_deflate.c>
 DeflateCompressionLevel 1
</IfModule>

<Location />
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-httpd-php
 AddOutputFilterByType DEFLATE application/x-httpd-fastphp
 AddOutputFilterByType DEFLATE application/x-httpd-eruby

 SetOutputFilter DEFLATE

 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI \.(?:pdf|avi|mov|mp3|mp4|rm)$ no-gzip dont-vary

 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

 # Pour les proxies
 Header append Vary User-Agent env=!dont-vary
</Location>

DeflateCompressionLevel

Indique le facteur de compression, de 1 (faible, par défaut) à 9 (fort).

AddOutputFilterByType DEFLATE text/html

Applique la compression sur les fichiers de type mime text/html

SetOutputFilter DEFLATE

Active le filtre compression.

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

Exclut les fichiers binaires de type .gif .jpg .jpeg .png

BrowserMatch ^Mozilla/4 gzip-only-text/html

Applique ou désactive la compression (et variantes) pour certains navigateurs. Dans l'exemple ci-dessus, on exclut Netscape 4.x qui gère mal la compression des types autres que text/html, et les 4.06, 4.07, 4.08 qui le font encore plus mal pour tous les types de fichiers. La dernière instruction BrowserMatch rétablit la compression pour Internet Explorer qui s'identifiait aussi en tant que Mozilla/4 dans l'en-tête User-Agent.

N'oubliez pas de redémarrer (restart) ou recharger (reload) Apache après chaque modification de la configuration.

/etc/init.d/apache2 restart

Apache 1.3

Activation du module dans httpd.conf :

LoadModule gzip_module modules/mod_gzip.so

Puis configuration, semblable à celle mentionnée auparavant :

<IfModule mod_gzip.c>
   mod_gzip_on Yes
   mod_gzip_can_negotiate Yes
   mod_gzip_static_suffix .gz
   AddEncoding gzip .gz
   mod_gzip_update_static No
   mod_gzip_command_version '/mod_gzip_status'
   mod_gzip_temp_dir /tmp
   mod_gzip_keep_workfiles No
   mod_gzip_minimum_file_size 500
   mod_gzip_maximum_file_size 500000
   mod_gzip_maximum_inmem_size 60000
   mod_gzip_min_http 1000
   mod_gzip_handle_methods GET POST
   mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"
   mod_gzip_item_include file \.html$
   mod_gzip_item_include file \.htm$
   mod_gzip_item_include file \.php3$
   mod_gzip_item_include file \.php$
   mod_gzip_item_include file \.js$
   mod_gzip_item_include file \.css$
   mod_gzip_item_include mime ^text/
   mod_gzip_item_exclude mime ^httpd/unix-directory
   mod_gzip_item_exclude mime ^image/
   mod_gzip_dechunk Yes
   mod_gzip_add_header_count Yes
   mod_gzip_send_vary Yes
</IfModule>

N'oubliez pas de recharger Apache après chaque modification de la configuration.

/usr/sbin/apachectl graceful

Les options sont relativement parlantes (pour les anglophones), elles ne seront pas détaillées dans cet article.

Microsoft IIS

IIS supporte la compression depuis la version 4, mais celle-ci est victime de bugs. Dans la version 5, les efforts de Microsoft n'ont pas porté leurs fruits puisque celle-ci est toujours instable. C'est enfin dans la version 6 que la compression HTTP a été finalisée. Cependant elle nécessite quelques manipulations (voir documentation Microsoft : Using HTTP Compression for Faster Downloads (IIS 6.0) et tutoriel en français pour activer la compression GZip dans IIS6.

Les autres serveurs restent marginaux. Lighttpd est équipé du module bien nommé mod_compress.

Solutions rapides avec un .htaccess pour Apache

Les fichiers .htaccess sont des fichiers placés à la base d'un répertoire et modifiant le comportement du serveur pour les fichiers qu'il contient. On peut y placer les instructions de configuration mentionnées ci-dessus (sans la directive Location ou Directory).

Voici des exemples testés et exploités sur Alsacreations.com. Si vous obtenez des erreurs HTTP 500 après la mise en place du fichier .htaccess, vérifiez sa syntaxe, l'adéquation avec votre type de serveur et la disponibilité des modules. Vous pouvez également combiner le tout avec des options de cache (mod_expires dans l'exemple pour Apache 1.3) pour éviter de servir plusieurs fois le même contenu aux visiteurs et sa compression par le serveur - ceci relève d'un autre article.

Apache 2

Contenu du fichier .htaccess, dans le répertoire contenant les fichiers CSS et JavaScript.

# Apache 2.0
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript

Apache 1.3

# Compression pour fichiers CSS
<IfModule mod_gzip.c>
    mod_gzip_on       Yes
    mod_gzip_dechunk  Yes
    mod_gzip_minimum_file_size 1024
    mod_gzip_maximum_file_size 100000
    mod_gzip_item_include file \.css$
    mod_gzip_item_include mime ^text/css$
</IfModule>

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 1 month"
    ExpiresByType text/css "access plus 1 day"
    ExpiresByType image/png "access plus 1 week"
    ExpiresByType image/gif "access plus 1 week"
    ExpiresByType image/jpeg "access plus 1 week"
</IfModule>

# Compression pour fichiers JS
<IfModule mod_gzip.c>
    mod_gzip_on       Yes
    mod_gzip_dechunk  Yes
    mod_gzip_minimum_file_size 512
    mod_gzip_maximum_file_size 1000000
    mod_gzip_item_include file \.js$
    mod_gzip_item_include mime ^application/x-javascript.*
</IfModule>

# Cache
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType application/x-javascript "access plus 1 month"
</IfModule>

Solution alternative en PHP

La fonction ob_gzhandler et l'ensemble des fonctions de type ob_* disponibles depuis PHP4 permettent la gestion du tampon de sortie, c'est à dire des données qui seront envoyées au navigateur. Il est alors possible de générer le contenu complet de la page et de le compresser avec Gzip avant envoi. On active le tampon en début de script avec ob_start, et on le vide à la fin avec ob_end_flush.

La fonction ob_gzhandler a le mérite de vérifier les types de compressions supportés par le navigateur (gzip, deflate ou aucun) avant de retourner le contenu du tampon de manière appropriée. Si le navigateur ne supporte pas les pages compressées, cette fonction retournera false.

<?php
ob_start("ob_gzhandler");
?>
... Le reste du code ...
<?php
ob_end_flush();
?>

Bien sûr, ceci est à adapter en fonction de la structure de votre site. Il ne suffit pas toujours de placer ces instructions en début et en fin de script PHP car de nombreux CMS utilisent déjà leur propre système de buffer (tampon) interne.

Tests dans la pratique

Vous pourrez aisément vérifier le bon déroulement du transfert et de la décompression en vérifiant les propriétés de la page dans le navigateur (dans Firefox : clic bouton droit, Informations sur la page, onglet Général, Taille). Comparez la taille du fichier original et la taille lue (à l'octet près).

Le format PNG permet de gérer des images RVB dotées d'une couche alpha, c'est à dire d'indications de transparence graduelle. Contrairement au format GIF, il ne s'agit pas d'une transparence binaire (un pixel est soit transparent, soit opaque), mais bien d'une transparence graduelle: chaque pixel peut être un peu, beaucoup ou pas du tout transparent (256 nuances).

C'est donc un format très pratique pour le design web. Sauf que… Papy IE6, version vieillissante et en perte de vitesse d'Internet Explorer (mais toujours parmi nous en 2010), ne supporte pas la transparence PNG. Heureusement, les versions 7 et 8 d'Internet Explorer interprètent correctement le format PNG. Mais pour la version 6, lorsque l'on doit assurer son support, on peut avoir besoin de trouver une parade.

Les moyens disponibles sont nombreux. Vous avez peut-être entendu parler de «PNGfix» ou d'autres solutions miracles. En fait, les solutions miracles n'existent pas. Je vous propose donc une liste restreinte de solutions, par ordre de préférence.

Le PNG8 avec couleurs RGBA

C'est quelque chose de peu connu, mais le PNG8, c'est-à-dire la version «couleurs indexées» du format PNG (256 couleurs maximum), peut utiliser la transparence graduelle. Contrairement au format GIF par exemple, chaque couleur définie pourra être une couleur RGBA (avec un taux de transparence) plutôt qu'une couleur totalement opaque ou une transparence complète.

Si cette propriété du PNG8 est peu connue, c'est que des logiciels populaires comme Photoshop ne la gèrent pas! Le principal logiciel de création ou retouche d'images qui gère ce format est Fireworks (édité par Adobe, anciennement par Macromedia). (On peut aussi citer pngnq disponible comme petit utilitaire graphique pour OS X et comme exécutable binaire pour Windows.)

Quel intérêt pour IE6? Il ne comprendra toujours pas la transparence graduelle, mais il affichera tous les pixels opaques, et considèrera les autres (tout pixel largement ou même faiblement translucide) comme complètement transparents. En créant son image avec soin, on pourra avoir un effet «comme du PNG32» dans tous les navigateurs modernes, et un rendu «comme du GIF» avec IE6, en utilisant une seule image. Cerise sur le gâteau: quand on veut intégrer une image avec translucide dans un design, le PNG32 va très vite donner des fichiers très lourds (30 ou 50 Ko pour un détail…), tandis qu'en PNG8 avec transparence alpha on va rester sur des poids de fichier beaucoup plus raisonnables.

En savoir plus: PNG 8 Bits avec transparence Alpha, c'est possible!

Ce format (PNG8 avec transparence alpha) est donc idéal dans de nombreuses situations. Son principal problème est qu'il est géré par très peu de logiciels d'édition.

Éviter le masque gris moche dans IE6

Parfois, on pourrait se permettre d'afficher un PNG translucide comme une image complètement opaque dans IE6. Le problème alors est qu'IE6 va afficher une horrible couleur grise comme fond de l'image. Mais si on pouvait choisir la couleur de fond de l'image dans IE6, ça serait pas mal, hein?

Ça tombe bien, on peut. Cette solution de «dégradation gracieuse» consiste à utiliser un PNG avec transparence alpha (PNG32 ou PNG8) et à spécifier une couleur de fond «par défaut», le bKGD chunk de son petit nom. Un logiciel comme GIMP permet de l'enregistrer avec l'option «Enregistrer la couleur de fond» du dialogue d'enregistrement. Fireworks parle de «matte» (en anglais) ou de «mattage» (en français). Photoshop, encore une fois, se montre incapable d'enregistrer cette information (du moins dans la version CS3).

Si vous utilisez Windows, et ne souhaitez pas utiliser Gimp ou Fireworks, vous pouvez utiliser le petit utilitaire TweakPNG pour rajouter le paramètre bKGD.

Substituer un format différent

Encore une astuce de dégradation gracieuse. :)

Si vous utilisez les commentaires conditionnels ou un autre moyen pour viser IE6, vous pouvez utiliser des images de fond en PNG32 ou PNG8 avec transparence alpha pour les navigateurs modernes, et spécifier une image en GIF ou PNG8 avec transparence binaire, voire un JPEG, pour Papy IE6.

Voilà, on a fait le tour des principales options de dégradation gracieuse. Je vous les recommande chaudement. Mais si vraiment vous voulez un résultat visuellement identique dans IE6, je vous laisse lire la suite de cet article (et pendant ce temps j'appelle les hommes en blancs, je crois que vous avez besoin d'aide mon ami(e)).

Un script JS qui utilise le VML

Le script DD_belatedPNG de Drew Diller est une trouvaille ingénieuse qui consiste à utiliser la technologie VML (ancêtre de SVG…) intégrée à IE6 pour afficher des images PNG avec transparence graduelle.

Le script est assez efficace, et pose un peu moins de problèmes que les filtres DirectX (voire plus bas), mais gardez à l'esprit que le script est présenté comme une version «alpha», donc potentiellement (très) instable. À tester consciencieusement!

Les filtres AlphaImageLoader

Internet Explorer 6 intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L'une de ces manipulations graphiques consiste à intercaler, entre le fond d'un bloc et son contenu, une image avec transparence graduelle.

On peut utiliser cette fonctionnalité via JavaScript, mais nous passerons ici par la propriété CSS non standard filter. Afin d'éviter que cette propriété ne s'applique à IE7 (ou 8 ou 9) également, et pour garder un code CSS valide par ailleurs, on utilisera un commentaire conditionnel:

<!-- Code à insérer dans le "head" de la page -->
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bloc {
  background: none; /* Il faut supprimer l'image de fond
    s'il y en a une de déclarée dans la feuille de styles principale */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src="/chemin/vers/mon-image.png", sizingMethod="scale");
}
</style>
<![endif]-->

Attention, si on place cette propriété dans une feuille de styles externes (une feuille de correctifs CSS pour IE6 et inférieurs appelée via un commentaire conditionnel, par exemple), le chemin ne s'appliquera pas depuis la feuille de style (comme c'est normalement le cas en CSS), mais depuis la page HTML. Une solution pour ne pas s'emmêler les pinceaux: utiliser des chemins absolus, commençant par /.

Le code ci-dessus permet donc d'afficher l'image PNG, qui sera étirée (sizingMethod="scale") dans le bloc. Les valeurs possibles pour la propriété sizingMethod sont:

• crop (rogne l'image pour qu'elle tienne dans le bloc);
• image, valeur par défaut (réduit ou élargit le bloc pour correspondre aux dimmensions de l'image);
• scale (étire l'image aux dimmensions du bloc).

Les limites de cette méthode

Tout d'abord, il faut bien noter que le filtre AlphaImageLoader ne substitue pas une image (avec transparence PNG activée) à l'image de fond d'un bloc. L'image placée en «fond» du bloc (en fait entre le fond et le contenu) n'est pas une image de fond à proprement parler, et on ne pourra pas utiliser les propriétés CSS pour les images de fond.

Donc:

1. pas de background-position (et pas d'équivalent via des propriétés d'AlphaImageLoader);

2. pas de background-repeat (et pas d'équivalent… sauf peut-être sizingMethod="scale" pour les images unies, sans motif, et dans les cas où on aurait pu utiliser une image de fond de 1px de haut répétée en hauteur — ou une image de 1px de large répétée en largeur).

Une autre limite importante vient du fait que pour que cela fonctionne, le bloc doit avoir le layout. Il faudra donc peut-être également conférer le layout au bloc, par exemple de la manière suivante:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bloc {
  zoom: 1; /* HasLayout */
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src="/chemin/vers/mon-image.png", sizingMethod="scale");
}
</style>
<![endif]-->

Au sujet du HasLayout, on pourra lire:

Effets secondaires du filtre Alphaimageloader

Le filtre DirectX AlphaImageLoader a plusieurs effets secondaires. Le principal est que le texte à l'intérieur d'un élément sur lequel on a appliqué le filtre n'est plus sélectionnable, les liens plus cliquables, etc. Cela se corrige le plus souvent en passant le texte ou les liens en positionnement relatif. Mais cela peut être un peu plus subtil et il y a des cas particuliers assez retors, comme par exemple quand l'élément sur lequel on utilise le filtre est positionné en absolu.
Cf. Effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

On pourra aussi lire PNG alpha transparency: AlphaImageLoader filter flaws.

Enfin, il faut noter que l'utilisation du filtre AlphaImageLoader n'est pas neutre en termes de performances. D'aucuns conseillent de ne pas l'utiliser: Ne pas filtrer les PNGs, par Éric Daspet.

Automatiser l'utilisation de Alphaimageloader avec JavaScript

Plusieurs scripts JavaScript se proposent d'appliquer automatiquement des filtres AlphaImageLoader dans IE6, soit pour les images dans le code HTML, soit pour les images de fond CSS, soit pour les deux.

Celui-ci est régulièrement cité: IE PNG Fix, par Angus Turnbull.

Ce que l’on appelle « hiérarchie des titres » ou plus simplement hiérarchie est l’ensemble des éléments titres de section balisés de H1 à H6 (que l'on appellera "Hn"). Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu’il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.

La hiérarchie des titres sert principalement à structurer le document  mais elle a bien d’autres utilités, voire même nécessités :

• Pour les utilisateurs de lecteurs d’écran, les titres Hn sont un moyen efficace de naviguer dans la page, mais les logiciels de lecture d’écran ne peuvent générer une liste de titres compréhensible que si la hiérarchie des titres du site est correcte.
• Pour les robots indexeurs des moteurs de recherche, les titres de haut niveau représentent du contenu important et ont donc une pondération plus forte que le reste du contenu. Ces titres doivent donc être présents et bien utilisés.
• Les visiteurs scannent les pages d’un site plus qu’ils n’en lisent le contenu. Les titres de section et de sous-section étant des points de repère, il est important que ces titres soient présents et annoncent le contenu qui les suit.

Dans la pratique

La hiérarchie des titres d’une page web doit être :

• Logique : elle doit suivre le schéma d’une table des matières comme pour tout document textuel.
• Continue : elle doit commencer par un H1 et ne pas comporter de sauts de niveau (un H1 ne peut être directement suivi d’un H3, il doit y avoir au moins un H2 entre les deux).
• Pensée pour l’utilisateur, et non pour le référencement : les titres doivent être des titres et non des mots clés sans rapport avec ce qui suit, ni des paragraphes complets.
• Sémantique, et non visuelle : un élément Hn doit être utilisé pour sa valeur sémantique (titre de niveau n) et non pour son rendu visuel (qui peut être totalement transformé avec CSS).
• Ergonomique : Les utilisateurs sont habitués aux titres, ils les aident à se retrouver dans la page, tant papier que virtuelle, et à aller à l’essentiel de l’information. La présence de titres de section rend également le texte plus digeste et lisible  et de fait aide à retenir l’attention, très volatile sur Internet, du lecteur.

Note :

Peut-il y avoir plusieurs H1 dans une même page ?

Oui, c’est tout à fait possible. Bien que certains pensent que H1 ne doit être utilisé qu’une seule et unique fois dans la page  aucune règle, sémantique ou autre, ne tranche sur ce sujet. L'élément H1 doit désigner un titre de niveau 1, si la construction de la page implique la présence de plusieurs titres de niveau 1, il est tout à fait logique d’utiliser l'élément approprié : H1. Par contre, l'élément H1 ne doit en aucun cas être utilisé, à tort, pour « booster le référencement » d’un site en y mettant autre chose que des titres de niveau 1.

La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2010 ?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs ?".

Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde.

De nos jours les navigateurs modernes s'en sortent relativement bien, mais ce n'était malheureusement pas le cas sur les anciens navigateurs qui furent lancés à une époque où la puissance des ordinateurs était encore assez limitée pour ne pouvoir garantir le lissage de toutes les images lors d'une navigation web quotidienne.

A gauche l'image d'origine (250 pixels de large), à droite la même image pour laquelle l'attribut width="300" a été spécifié.

Capture sous Mozilla Firefox, Apple Safari, Google Chrome

Le résultat est propre et sans bavure.

Capture sous Opera

L'algorithme est un peu moins performant mais cela reste regardable.

Capture sous Internet Explorer 6 et 7

Cachez ces pixels que je ne saurais voir !

Il est néanmoins possible de forcer le lissage bicubique sur ces navigateurs dépassés grâce à deux astuces respectives, lors de l'agrandissement ou de la réduction des images.

Fix pour Internet Explorer 7

Pour Internet Explorer 7 il est possible d'utiliser une simple directive CSS, nommée -ms-interpolation-mode.

img { -ms-interpolation-mode: bicubic; }

L'autre propriété (par défaut) de -ms-interpolation-mode (qui a été introduit avec IE7) est nearest-neighbor.

Fix pour Internet Explorer 6

Il va falloir ruser pour créer un élément englobant l'image, modifier son apparence grâce à un filtre AlphaImageLoader qui permet le lissage, et masquer l'image d'origine elle-même en fixant son opacité à 0.

<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='galets.jpg', sizingMethod='scale');position: absolute; z-index: 100; width: 300px; display: inline-block;"><img src="galets.jpg" alt="" width="300" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" /></span>

Résultat final sous Internet Explorer 6 et 7

Attention : ces contournements ne seront pas valides en CSS car il s'agit d'instructions propriétaires Microsoft. Vous pouvez bien entendu les placer dans une feuille de style spécifique aux navigateurs IE, ou à l'aide de commentaires conditionnels.

Ceci ne fonctionne que pour des images de type JPEG et GIF non transparent. L'idéal reste bien entendu de ne pas redimensionner les images ainsi "à la volée" dans le navigateur.

wp_deregister_script('jquery');
wp_register_script('jquery',
("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
wp_enqueue_script('jquery');

Si vous rencontrez des incompatibilités avec certaines zones de l'administration, vous pouvez toujours ne l'activer que pour la partie publique de votre site, en insérant ce code :

if( !is_admin()){
 wp_deregister_script('jquery');
 wp_register_script('jquery',
("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
 wp_enqueue_script('jquery');
}

Box-shadow

La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML.

Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. Sans oublier la couleur, bien-entendu. La propriété s'applique sur la boîte de l'élément, et non sur sa bordure. L'ombrage n'affecte pas la taille de la boîte de l'élément.

En voici une illustration (Voir le résultat sur votre navigateur) :

img {
  box-shadow: 8px 8px 0 #aaa; 
}

Syntaxe

• La première valeur indique le décalage horizontal vers la droite (ici 8px)
• le deuxième correspond au décalage vertical vers le bas (ici 8px)
• le chiffre suivant indique la force du dégradé (ici 0)
• et enfin, la couleur (ici #aaa)

Compatibilité et utilisation concrète
A l'heure où ce tutoriel est écrit, seuls les navigateurs basés sur les moteurs Gecko (Mozilla Firefox 3.1+) et sur Webkit (Safari, Chrome) reconnaissent la propriété box-shadow. En pratique, la propriété doit être préfixée par -moz- pour Gecko ou -webkit- pour Webkit pour fonctionner sur ces navigateurs. box-shadow devient donc -moz-box-shadow et -webkit-box-shadow.
Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner et anticiper une implémentation complète sur tous les navigateurs dans le futur.

Voici une illustration d'ombre portée dégradée (Voir le résultat sur votre navigateur) :

img {
  box-shadow: 8px 8px 12px #aaa;
}

Et voici enfin une variante sous forme de "halo" dégradé (Voir le résultat sur votre navigateur) :

img {
  box-shadow: 1px 1px 12px #555;
}

Adaptation pour Internet Explorer

Le filtre Shadow

Internet Explorer, version IE8 incluse, ne reconnaît pas la propriété box-shadow.

Cependant, tout comme pour la transparence de couleur, il existe un filtre propriétaire Microsoft permettant d'obtenir un résultat similaire. Il s'agit du filtre Shadow (cousin du filtre DropShadow).

Il suffit d'appliquer ce filtre à l'élément en indiquant une couleur, une direction (en degrés) et l'intensité du dégradé.

Voici ce que donne une ombre portée "classique" à l'aide du filtre Shadow sur Internet Explorer (Voir le résultat sur votre navigateur) :

img {
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
  zoom: 1;
}

Pour éviter de gêner les bons élèves, nous pouvons appliquer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.

Au final, les styles CSS devraient ressembler à ceci :

  <style type="text/css">   
    .ombrage {
    border: 5px solid #fff;
    -moz-box-shadow: 8px 8px 12px #aaa; 
    -webkit-box-shadow: 8px 8px 12px #aaa; 
    box-shadow: 8px 8px 12px #555; 
    } 
  </style>
    
<!--[if lte IE 8]>
  <style type="text/css">
  .ombrage {
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
    zoom: 1;
  } 
  </style>
<![endif]-->

Après usage de cette astuce, seul le navigateur Opera n'affichera pas d'ombre sur l'élément.

Le filtre Glow

La syntaxe :

    filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);

L'attribut Color désigne la couleur du halo.
L'attribut Strength désigne la taille de l'effet.

Voici une illustration : (Voir le résultat sur votre navigateur)

Le rendu est loin d'être parfait... mais dans certains (rares?) cas il peut suffire.

Code utilisé :

<!--[if lte IE 8]>
  <style type="text/css">
  .ombrage {
			filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);
			zoom: 1;
		  } 
  </style>
<![endif]-->

Outil WYSIWYG

Pour vous familiariser avec le concept de box-shadow et pouvoir jouer en direct avec cette propriété et ses effets, sachez qu'il existe un outil WYSIWYG publié chez Westciv.com

Text-shadow

text-shadow est une propriété CSS2 permettant de produire une ombre portée sur le texte de contenu sur lequel elle est appliquée.

Il est possible de spécifier les décalages de l'ombrage, la couleur et sa zone de flou. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même. L'ombrage n'affecte pas la taille de la boîte de texte.

Voici une illustration de cette propriété text-shadow en action (Voir le résultat sur votre navigateur) :

h1 {
  text-shadow: 0px 0px 9px #777;
  color: #fff;
}

Compatibilité et syntaxe

A l'instar de box-shadow, cette propriété n'est pas reconnue par Internet Explorer (version 8 comprise). Par contre, Opera 9.5+ l'implémente correctement.

Notez également que puisqu'il s'agit d'une propriété CSS2 et non CSS3, il n'y a pas lieu de lui affecter un préfixe (-moz-, -webkit-, ...). La propriété demeure text-shadow quel que soit le navigateur.

Adaptation pour Internet Explorer

Là encore, nous allons devoir ruser en appliquant le filtre Shadow à nos éléments, de la même manière que nous l'avons fait précédemment pour adapter la propriété box-shadow.

Le résultat sur Internet Explorer est malheureusement moins excitant que sur les autres navigateurs (Voir le résultat sur votre navigateur) :

Au final, les styles CSS devraient ressembler à ceci :

.ombrage {
  text-shadow: 2px 2px 4px #999;
} 
</style>
<!--[if lte IE 8]>
<style type="text/css">
.ombrage {
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=4);
  zoom: 1;
} 
</style>
<![endif]-->

Outil WYSIWYG

Pour vous familiariser avec le concept de text-shadow il existe aussi un outil WYSIWYG publié chez Westciv.com

Border-colors

border-colors est une propriété uniquement reconnue par Mozilla Firefox 3.0+ et qui permet de déclarer plusieurs valeurs de couleurs à appliquer sur la bordure d'un élément.

En voici une illustration (Voir le résultat sur votre navigateur) :

.gradient {
      -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      }

Puisque cette propriété n'est pas vraiment répandue, nous n'allons pas entrer dans les détails, mais sachez que vous pouvez l'étudier sur le site ZenElements.com.

Conclusion

Associées aux coins arrondis et aux transparences de couleurs, les propriétés d'ombrage sont encore sous-exploitées... Et pour cause : quelques navigateurs importants tels qu'Internet Explorer ou Opéra ne les implémentent pas encore.

Cela signifie qu'en production, il est nécessaire de prendre quelques précautions d'usage et de se poser des questions préalables : puis-je m'offrir une version dégradée ("graceful degradation") sur ces navigateurs à la traîne, voire tout simplement les ignorer ? Quel est mon public et ses attentes ? Combien de temps puis-je passer à bidouiller des équivalences sur IE ?... La réponse est uniquement entre vos mains.

Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement.

De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc.

Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) :

div {
  background-color: rgba(0, 0, 255, 0.5);
}

Et voici une illustration du principe d'opacité (opacity) sur un élément (Voir le résultat (Opacity) sur votre navigateur) :

div {
  opacity: 0.5;
}

Principe de la notation RGBa

La notation RGBa obéit aux mêmes règles de fonctionnement que la notation classique RGB, mis à part qu'une composante est ajoutée à la valeur : rgb(0,0,0) devient donc rgba(0,0,0,0). La dernière valeur indiquant le degré d'opacité entre 0 et 1.

Illustrons cette notation sur une structure HTML, l'objectif étant d'appliquer une transparence de 50% sur la couleur d'arrière-plan de l'élément <div>

<div>
  <h1>Joli titre</h1>
</div>

Voici les styles CSS permettant d'appliquer cette transparence :

div {
  background-color: rgba(0, 0, 255, 0.5); /* un arrière plan bleu à 50% de transparence */
}
div h1 {
  color: rgb(255, 200, 0); /* une couleur de texte jaune-orange */
}

Pour s'assurer qu'il y ait une alternative pour les mauvais élèves ou les navigateurs plus anciens, il est possible de commencer par déclarer une couleur de fond solide à l'aide de l'écriture classique RGB.

Les anciens navigateurs, pour la plupart, ne reconnaîtront pas la seconde valeur et se contenteront de la première déclaration :

div {
  background-color: rgb(0, 0, 255);
  background-color: rgba(0, 0, 255, 0.5);
}

Voir le résultat sur votre navigateur

Support de l'écriture RGBa

En décembre 2008, Florent V., publie une page de test du support des couleurs RGBa. On peut y constater qu'à cette époque, assez peu de navigateurs implémentaient correctement ce système de notation.

Le site anglophone CSS Tricks a publié plus récemment un tableau récapitulatif du support de RGBa : on y observe qu'à l'heure actuelle la plupart des navigateurs prennent en charge cette valeur de transparence... à l'exception d'Internet Explorer, toutes versions, IE8 comprise.

Et pendant ce temps, sur IE...

Cette fonctionnalité n'étant pas reconnue par Internet Explorer, il est possible de concevoir la situation sous plusieurs angles :

1. On bidouille avec la propriété Opacity et le positionnement absolu pour s'adapter à toutes les versions d'IE (IE6, IE7, IE8);
2. On utilise une alternative à l'aide de PNG transparent pour IE7 et IE8, en faisant fi des années de bons et loyaux services d'IE6;
3. On détourne un filtre propriétaire Microsoft que l'on va appliquer uniquement sur IE;
4. On se fiche d'Internet Explorer, c'est vrai quoi !

Pour des raisons de déontologie, nous allons nous pencher plus avant sur l'avant-dernière alternative et allons la décortiquer en détail...

Le filtre Gradient pour IE

Cette astuce consiste à détourner un filtre propriétaire à Microsoft, le gradient filter (filter:progid:DXImageTransform.Microsoft.gradient pour les intimes), dont la fonction est de créer des dégradés de couleur d'arrière-plan sur Internet Explorer.

Ce filtre a pour avantage de prendre en compte la transparence de la couche Alpha dans ses valeurs. Il est donc possible de rendre le fond transparent en indiquant la même couleur pour le début et la fin du "dégradé".

La couleur est exprimée en hexadécimal, au format #AARRGGBB, où AA est la valeur hexadécimale de la transparence, RR la valeur de la couche rouge, GG la valeur de la couche verte et BB la valeur de la couche bleue.

Par exemple, les styles CSS suivants vont appliquer une couleur bleue (0000ff) d'une transparence de 20% au bloc:

div {
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000ff,endColorstr=#330000ff);
}

A titre de pense-bête, voici une correspondance entre le pourcentage de transparence Alpha souhaité et la valeur correspondante en hexadécimal :

• 0% (transparent) -> #00 en hexadécimal
• 20% -> #33
• 50% -> #80
• 75% -> #C0
• 100% (opaque) -> #FF

Bien entendu, pour éviter de gêner les bons élèves, nous allons nous appliquer à administrer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.

Le code HTML/CSS pourrait ressembler à celui-ci :

<style type="text/css">
  .opacite {
    width: 50%;
    background-color: rgb(0, 0, 255); /* alternative solide */
    background-color: rgba(0, 0, 255, 0.2);
  }
</style>
<!--[if IE lte IE 8]>
  <style type="text/css">
    .opacite {
      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000ff,endColorstr=#330000ff);
      zoom: 1;
    } 
  </style>
<![endif]-->

Le résultat fonctionne sur Chrome, Safari 4, Opera 10, Firefox 3, IE6, IE7, IE8, etc. Vous pouvez le constater sur votre navigateur.

Conclusion, remerciements... et backlink mérité

Ce tutoriel est indirectement inspiré des articles de 24ways "Working with RGBa colors" et de CSS Tricks "RGBa browser support", que je remercie de distiller leurs connaissances.

Il est possible de visualiser le résultat final en production sur mon site personnel Polychromies où vous pourrez comparer le rendu entre les différents navigateurs et constater que les arrondis ne semblent pas être compatibles avec le filtre Gradient chez Internet Explorer, même avec la technique JavaScript de Roundies.

Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables, pour dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible.

C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles.

Ce tutoriel vous présente comment procéder de la manière qui nous paraît à la fois la plus simple, la plus compatible et la plus accessible. Il est composé de trois parties :

• La propriété CSS3 border-radius
• Le script Roundies.js
• Le composant border-radius.htc

Simple et approprié : border-radius

border-radius est une propriété CSS3, encore à l'état de brouillon mais tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.

Compatibilité et utilisation concrète
A l'heure où ce tutoriel est écrit, seuls les navigateurs basés sur Gecko (Mozilla Firefox) et sur Webkit (Safari, Chrome) reconnaissent la propriété border-radius. En pratique, la propriété doit être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces navigateurs. border-radius devient donc -moz-border-radius, -webkit-border-radius et -khtml-border-radius (sur Linux).
Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner.

Exemple :

#cadre {
  border-radius: 10px;
}

Voir le résultat avec votre navigateur

Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left).

Ainsi la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :

#cadre {
  border-radius: 5px 10px 0 5px;
}

Note : l'écriture raccourcie de type -webkit-border-radius: 10px 10px 0 0; ne fonctionnant pas, il faudra écrire chaque propriété complètement, soit -webkit-border-top-left-radius: 10px; et -webkit-border-top-right-radius: 10px; pour obtenir un arrondi sur les angles du haut.

Il est tout à fait possible de réaliser des courbes non circulaires en précisant le degré d'arrondi horizontal et vertical.

Roundies : du JavaScript pour Internet Explorer

La propriété CSS3 border-radius n'est pas reconnue par Internet Explorer (jusqu'à sa version 8 incluse). Pour réaliser ce genre d'effets esthétiques sur ce navigateur, il va donc falloir ruser.

Il existe plusieurs techniques basées sur JavaScript pour permettre d'émuler automatiquement la création de coins arrondis, nous en listons quelques unes en fin de tutoriel. Chaque technique a ses avantages et inconvénients (poids, complexité, accessibilité) et c'est pourquoi nous avons fait le choix de nous intéresser à la mise en application de la plus légère d'entre-elles : Roundies.

Roundies, c'est quoi ?

Roundies est un petit JavaScript de 8 ko très simpliste qui se contente de réaliser ce qu'on lui demande, des angles arrondis sur IE sans image et sans ajouter de contenu inutile.
Nous n'allons l'appliquer qu'à Internet Explorer puisqu'il nous servira de béquille pour ce navigateur tant qu'il ne reconnaîtra pas border-radius.
Notez que Roundies ne fonctionnera pas sur les images d'arrière-plan et qu'il est malheureusement inopérant sur Opera.

Vous trouverez ce script roundies.js à l'adresse suivante sous deux formes : non-compressée (17 ko) et compressée (8 ko).

Appliquer Roundies

Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko) sur votre hébergement.

Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML.

Le code HTML suivant ne va s'appliquer qu'à Internet Explorer (versions égales ou plus anciennes que IE8) et il va récupérer et appliquer roundies.js que nous avons placé dans un répertoire nommé "script" :

<!--[if lte IE 8]>
<script type="text/javascript" src="script/roundies.js">
</script><![endif]-->

A présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction DD_roundies.addRule, soit à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).

Voici les règles que nous avons mis en place pour notre page d'exemple :

DD_roundies.addRule('div.arrondi', '10px');
DD_roundies.addRule('h1', '10px');
DD_roundies.addRule('a', '8px');

La première règle indique que nos éléments HTML <div> de classe arrondi bénéficieront d'un arrondi de 10px; la seconde s'applique éléments de titre (<h1>) et la dernière ligne génère un arrondi autour des liens hypertextes (<a>). Il est également possible de cumuler les éléments sélectionnés au sein de la même règle.

Côté HTML, les éléments sont structurés ainsi (exemple pour le bloc <div>) :

<div class="arrondi">
    <p>ici un bloc arrondi</p>
</div>

Visualisez notre page d'exemple avec votre navigateur

Exemples de résultats avec la combinaison border-radius + Roundies (sur IE, l'image d'arrière-plan sera remplacée par la couleur de fond alternative) :

Léger et simple à mettre en place, le script roundies.js permet la gestion des coins arrondis sur Internet Explorer. Il représente une excellente alternative aux solutions lourdes basées sur des images mais reste très limitée et ne fonctionne pas sur tous les navigateurs. Il ne fait qu'émuler la propriété CSS3 border-radius sur IE.

Il s'agit toutefois d'une technique qui peut être idéale en production : en pratique, vous commencerez par appliquer border-radius (avec ses préfixes) pour les navigateurs modernes, puis appliquerez la béquille Roundies pour IE. Au final, la technique sera fonctionnelle sur un large panel : IE, Firefox, Safari, Chrome, Camino, Konqueror, Safari Mobile, Fennec, etc. Seul Opera sera en reste jusqu'à sa version 10.5.

Roundies : restrictions

Méthode simple et légère, Roundies a également ses défauts que nous avons pu déceler dans nos tests.

Le principal défaut de cette solution est qu'elle ne s'applique qu'à des éléments "simples" dans le sens où Roundies n'aura pas d'effet dès lors que d'autres effets sont appliqués sur l'élément : arrière-plans en images, RGBa (couleur semi-transparente), ombrages, etc. L'affichage est également légèrement dégradé sur IE si l'élément dispose d'une bordure.

Application : un menu à onglets

Mettons en pratique cette technique pour réaliser le menu suivant :

Notre structure xHTML sera très classique, sous forme de liste :

<ul id="menu">
    <li><a href="*">onglet 1</a></li>
    <li><a href="*">onglet 2</a></li>
    <li><a href="*">onglet 3</a></li>
    <li><a href="*">onglet 4</a></li>
    <li><a href="*">onglet 5</a></li>
</ul>

Et notre mise en forme CSS va se résumer (outre les fioritures habituelles) à arrondir les angles supérieurs des liens hypertextes :

#menu {
        margin: 0;
        padding: 0;
        list-style: none;
      }
#menu li {
        display: inline; /* affichage horizontal */
      }
#menu li a {
        padding: 5px 20px;
        margin: 0;
        background: #98B924;
        color: #fff;
        border: 1px solid #89a;
        text-decoration: none;
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;        
        -webkit-border-top-left-radius: 10px; /* pour Chrome */
        -webkit-border-top-right-radius: 10px; /* pour Chrome */
        
      }
#menu li a:hover, #menu li a:focus {
        background: #b8da40;
        color: #000;
      }

A cet instant, le menu est parfaitement stylé sur l'ensemble des navigateurs modernes, mis à part Internet Explorer et Opera où les coins demeurent en angle droit.

Il ne suffit plus que d'appliquer Roundies.js, de l'appeler via un commentaire conditionnel pour IE et d'y ajouter l'instruction DD_roundies.addRule('#menu li a', '10px 10px 0 0'); pour que le script soit fonctionnel. C'est tout !

Voir le résultat sur votre navigateur

EDIT : autre méthode intéressante, les extensions .htc pour Internet Explorer

Les extensions HTC sont des fichiers HTML qui contiennent du script Javascript et des composants spécifiques pour Internet Explorer.

Depuis quelques temps, l'une de ces extensions permettant d'émuler border-radius sur IE toutes versions circule sur le Net et a atterri sur Google Code.

En pratique, cette technique est très simple à mettre en œuvre et semble plus compatible que Roundies pour les cas particuliers (transparence, images d'arrière-plan).

Après avoir téléchargé le fichier border-radius.htc (5ko), la syntaxe est la suivante :

.arrondi {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
}

Et c'est tout !

Voir le résultat sur votre navigateur

HTC : restrictions

HTC, contrairement à Roundies, fonctionne très bien sur des éléments avec des arrière-plans en images, RGBa (couleur semi-transparente) ou entourés d'une bordure. Cependant, cette méthode ne fonctionne actuellement que si les 4 coins de l'éléments sont arrondis (même rayon). Impossible de créer des onglets par exemple.
Il se pourrait également que HTC génère des problèmes de performances sur les anciennes versions d'IE, comme en témoigne ce commentaire.

Il semble également que selon certaines circonstances (encore floues), cette technologie ne fonctionne pas sur IE8.

Ressources et variantes

• Une (énorme) liste de toutes les techniques existantes sur SmileyCat : http://www.smileycat.com/miaow/archives/000044.php
• jQuery Corner : 8 ko, nécessite jQuery, très complet, beaucoup d'effets
• code.google.com/p/curved-corner : version border-radius CSS3, puis appel d'un fichier .htc pour Internet Explorer.
• Before et After : pas de JavaScript, mais largeur fixée et non compatible avec IE<8
• CurvyCorners : 188 ko, supporte de nombreux effets, dont anti-aliasing (anti-crénelage), bordures, dégradés et images d'arrière-plan.
• Nifty Corners / Nifty Cube : 3 ko, ajout d'éléments HTML <b> autour de l'élément à arrondir.
• RoundedCornr : générateur de coins arrondis (CSS et images)
• http://www.css3.info/preview/rounded-border/
• http://www.w3.org/TR/2005/WD-css3-background-20050216/#border-radius

Suivant le poids de la page ainsi que la rapidité de la connexion, il n'est pas rare, au moment du chargement de la page, d'entrevoir un contenu censé être caché ou des couleurs qui se modifient à retardement.

En effet, ces styles, affectés via Javascript, dépendent le plus souvent du volume des feuilles de styles, des scripts, du code HTML, des images, bref, de tout ce qui constitue le document.

Analysons ce qu'il se passe d'un peu plus près.

Chargement d'un document

Lorsque vous faîtes une requête HTTP, le navigateur fait appel aux différentes ressources constituant le document. Cela s'effectue de manière linéaire et événementielle : Le navigateur parse les instructions les unes à la suite des autres et les applique (SAX) plutôt que de charger une somme d'instructions en mémoire avant de les appliquer (DOM). C'est ce qui lui confère sa rapidité d'exécution.

Aussi, la première ressource appelée est, de prime abord, le document HTML. Lorsqu'un élément link est rencontré, le navigateur fait généralement appel à une feuille de styles se situant à l'URL inscrite dans l'attribut href correspondant; il la parse, applique les instructions puis passe à la suite. De même, lorsqu'un élément script est rencontré, le navigateur fait appel à la ressource située à l'URL inscrite dans l'attribut src correspondant; il la parse, applique les instructions puis passe à la suite.

La notion importante ici est que, dès lors qu'un tag est ouvert, on a la possibilité d'appliquer diverses propriétés sur l'élément en cours de formation; il n'est pas nécessaire que celui-ci soit intègre.

Aussi, les deux éléments link et script, bien souvent placés dans l'élément head, sont parcourus avant même que l'affichage au sein du navigateur ne se produise. En effet, d'après ce processus, ce dernier ne survient, dans une page HTML, que dès l'instant où le tag body est ouvert.

Préchargement des styles dépendant de scripts

Au moment où les éléments link et script ont été totalement parsés, les tags situés en amont ont donc pu se voir affectés de diverses propriétés; c'est le cas, entre autres, de html et head.

L'élément head ne nous intéresse pas vraiment puisqu'il n'intervient pas sur l'affichage. En revanche, nous pouvons profiter du fait que l'élément html est l'élément parent de body. En effet, via l'héritage des CSS, il nous est possible de modifier l'apparence de ses éléments enfants en le surchargeant d'une classe.

Pratiquement, cela donne :

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Exemple</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<p>Exemple</p>
	</body>
</html>

styles.css

@media screen {
	p {color:blue;}
	.hasJS p {color:red;}
}

script.js

document.documentElement.className += " hasJS";

Bien entendu, si vous vous servez d'une bibliothèque Javascript, il est tout à fait possible de remplacer l'instruction précédente par sa correspondance :

script.js avec Mootools ou jQuery

$(document.documentElement).addClass('hasJS');

Dès lors, en se servant de ce mécanisme de surcharge de CSS, il est possible d'affecter bon nombre de ces styles. Aussi, même dans le cas où le code est volumineux, que le visiteur ne dispose que d'une connexion bas débit, voire que le navigateur bloque un instant, le résultat sera le même : aucun scintillement au chargement.

Pour les puristes

Pour ceux qui se seront donnés la peine de consulter la DTD, vous aurez sans doute remarqué qu'ajouter une classe sur l'élément html est invalide. Certes, cela ne se détecte pas au validateur puisque c'est Javascript qui ajoute la classe mais c'est pourtant bien le cas.

Aussi, il est important de noter que tous les navigateurs courants interprètent correctement l'ajout d'une classe sur l'élément HTML, y compris parmi les plus anciens (comme IE5, par exemple); l'invalidité ne semble donc pas problèmatique.

Si celle-ci vous chiffonne malgré tout, une solution, légèrement plus contraignante, existe. Il s'agit d'intervenir directement dans le code HTML en plaçant une balise script juste après l'ouverture de body et ce, sans le moindre espace :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Exemple</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body><script type="text/javascript">

document.body.className += " hasJS";

		</script>
		<p>Exemple</p>
	</body>
</html>

Dans ce dernier exemple, nous ajoutons une classe non pas sur le tag html mais bel et bien sur le tag body, ce qui est parfaitement valide. La contre-partie est la duplication de ce code sur chacune de vos pages (on peut néanmoins faciliter la maintenance en passant par une include).

Et le «domready» dans tout ça ?

Pour résoudre les problèmes d'affichage traités ici, bon nombre de solutions basées sur la constitution du DOM existent. Néanmoins, cette technique souffre d'un handicap : La modification de styles a lieu dès lors que l'élément traité est intègre et disponible dans le DOM. Aussi, le moindre blocage du navigateur entraîne de nouveau un scintillement. Ce cas est rare mais il arrive parfois. L'ajout d'une classe sur l'élément parent est donc plus fiable.

Par conséquent, il est préférable de réserver les traitements basés sur le domready pour l'ajout de gestionnaires d'événements sur divers éléments, entre autres. Et, afin d'anticiper quelques soucis sur IE6, il vaut mieux éviter de modifier le DOM à ce moment là, en ne réservant ces traitements qu'une fois ce dernier totalement chargé (événement load).

Ces propriétés connues de tout bon webdesigner permettent de contrôler l'apparence de l'arrière plan d'une boîte. Un des modules de CSS3 étend ce contrôle de façon à répondre à des besoins plus actuels et évolués, notamment via le redimensionnement et la superposition des images.

Background-size

La Syntaxe

x-background-size: [ pourcentage | longueur | auto ]
Où x représente l'extension propriétaire : -moz ou -o ou -webkit selon les navigateurs

Définition

Background-size spécifie la taille de l'image dans l'arrière plan.
La première valeur détermine la largeur (ou proportion) horizontale, la deuxième la largeur verticale. Si une des valeurs n'est pas précisée elle sera automatiquement remplacée par "auto" avec le ratio de l'image.

• Pourcentage : redimensionne l'image suivant la zone de position du background(déterminé par -moz-background-origin)
• Longueur : redimensionne l'image selon la valeur définie

Illustration

Prenons un élément de type bloc (<div> en l'occurence) que nous allons triturer pour nos expériences. Commençons avec une simple couleur d'arrière plan :

div {
  padding: 20px;
  width: 500px;
  height: 200px;
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
}

Ajoutons à notre élément une image en fond répétée par défaut

div {
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
}

A présent, appliquons un background-size à 100% afin que l'image d'arrière-plan occupe tout l'espace de l'élément :

div {
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

Autre variante (nous nous limiterons dorénavant à l'extrension propriétaire -webkit-):

div {
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
  -webkit-background-size: 25% 25%;
}

Implémentation sur les navigateurs actuels

Comme l'on peut s'en douter, ces propriétés CSS3 sont encore à l'état de brouillon et les différents navigateurs ne sont pas tenus de les prendre en charge... ce dont Internet Explorer ne se prive pas (même IE8).

• Sous IE : impossible
• Sous Opera : fonctionne dès la version 9.5 à l'aide -o-background-size
• FireFox : fonctionne sous FF3.6 avec -moz-background-size
• Safari : fonctionne depuis Safari v3.0 avec -webkit-background-size

Qu'est-ce que c'est le HTML 5 ?

Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le W3C officialise HTML5 en intégrant en son sein ce groupe de travail. À partir de là s'est fait un gros travail afin de permettre à HTML 5 d'être rétrocompatible avec ses ancêtres, ce qui a quelque peu ralenti son développement.

Le W3C c'est quoi déjà ?

Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. Parmi les membres du W3C on compte les plus grands acteurs du Web actuels tels que Microsoft, IBM, Opera, etc.

Quelles sont les nouveautés ?

Une grande nouveauté annoncée au niveau structurel des éléments est signalée dans l'introduction du brouillon de HTML5 : The new content model concepts (replacing HTML 4's block and inline concepts).

Les notions de type "en ligne" et "bloc" semblent donc remplacées par un nouveau schéma, les éléments HTML sont à présent uniquement regroupés en catégories, sachant que les éléments peuvent apparaître dans plusieurs catégories :

• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content

Ainsi, au vu de cette nouvelle organisation, le code suivant est parfaitement valide car l'élément <a> peut entourer des paragraphes, des listes, des tableaux voire des sections entières :

<aside>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</aside>

Rappelons également que HTML5, en tant que digne successeur de HTML 4.01, offre la même permissivité : il n'est pas systématiquement nécessaire de fermer tous les éléments. Ainsi, les éléments <p>, <dd>, <dt>, <li>, <optgroup>, <option>, <td>, <th>, <tr>, <tbody>, <thead> et <tfoot> n'ont pas besoin de balise fermante pour être valides.

Seule la version XHTML 5 obligera à fermer ces éléments.

Plus fort encore, certains éléments ne nécessitent ni balise fermante ni balise ouvrante, c'est le cas de <html>, <head>, <body>, <thead>, <tfoot> et <tbody>. Cela signifierait que la présence même de ces éléments devient implicite.

Les balises principales

Doctype

Le doctype est simplifié :

<!DOCTYPE html>

Documentation sur l'élément Doctype

Il n'est pas sensible à la casse (on peut écrire <!doctype html> par exemple), et son rôle est uniquement d'éviter un rendu en mode «Quirks» (ou mode de compatibilité) des navigateurs.

Section

L'élément <section> permet de définir les différentes sections d'un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document.

Documentation sur l'élément Section

Article

<article> représente un texte provenant d'une source externe, comme par exemple un article de journal, de blog ou de forum.

<article>
<p><a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html">
XHTML est mort, vive HTML !</a><br /> 

Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle depuis hier soir : le W3C vient d'annoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p>
</article>

Documentation sur l'élément Article

Aside

L'élément <aside> est destiné au contenu indirectement lié à l'article lui-même, il représente ce qui l'entoure comme par exemple une barre latérale d'archives.

<aside>
    <h1>Archives</h1>
    <ul>
        <li><a href="/archives/09/05/">Mai 2009</a></li>
        <li><a href="/archives /09/06/">Juin 2009</a></li>
        <li><a href="/archives /09/07/">Juillet 2009</a></li>
    </ul>
</aside>            

Documentation sur l'élément Aside

Header

L'élément <header> représente l'en-tête d'une section ou d'une page.

Documentation sur l'élément Header

Footer

L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les informations concernant l'auteur, les mentions légales…etc.

Documentation sur l'élément Footer

Nav

L'élément <nav> représente une section de liens de navigation.

<nav>
<a href="index.php">Page d'accueil</a>
<a href="contact.php">Contact</a>
</nav>

Documentation sur l'élément Nav

Dialog

L'élément <dialog> peut être utilisé pour définir une conversation.

<dialog>
 <dt> Raphaël
 <dd> Hello, comment ça va ?
 <dt> Julie
 <dd> Bien merci et toi ? 
 <dt> Raphaël
 <dd> Super merci, tu as vu la nouvelle opération Kiwiz ? 
 <dt> Julie
 <dd> Ah oui c'est top, je crois que je vais me commander un livre qui parle des Sims 3.
</dialog>

... bien que les éléments de listes de définition (dt, dd) soient explicitement utilisés dans l'exemple proposé par le W3C, cet usage nous semble assez incongru.

Documentation sur l'élément Dialog

Figure

L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <legend>.

<figure>
<img src="/images/chaton.jpg" />
  <legend>Un petit chat mignon tout plein</legend>
</figure>

Documentation sur l'élément Figure

Aides à la création d'applications web (APIs et DOM)

<audio> et <video>

Ces éléments sont utilisés pour les contenus multimédia.

<audio>
  <!-- Deux formats disponibles par ordre de priorité: -->
  <source src="trappeur.ogg" type="audio/ogg">
  <source src="trappeur.aac" type="audio/aac">
  <!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: -->
  <a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a>
  de David TMX (format Ogg Vorbis)
</audio>

Une discussion : http://padawan.info/fr/2009/07/tag-cest-pas-gagne.html

Documentation sur l'élément video
Documentation sur l'élément audio

Canvas

L'élément <canvas> a été introduit afin de pouvoir créer des éléments graphiques 2D en Javascript à la volée. Il permet de mettre en place une zone pour les dessins ou les applications graphiques. Un éditeur qui fonctionne entièrement sur canvas a d'ores et déjà été mis en place par Mozilla (article sur alsacreations.com).

Documentation sur l'élément Canvas

Glisser-déposer

L'attribut draggable permet de rendre un élément déplaçable.

Documentation sur l'attribut draggable

Contenteditable

Cet attribut indique qu'une zone est éditable. L'utilisateur peut en changer le contenu et manipuler le balisage.

Documentation sur l'attribut Contenteditable

Les sites web hors-ligne

Une API permettra d'activer les applications Web hors connexion.

innerHTML

Géolocalisation

... Les autres balises

<embed>, <mark>, <meter>, <progress>, <time>, <command>, <datagrid>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt> et <rp> <datatemplate>, <rule>, <nest>

HTML 5 propose également un mécanisme de template en introduisant les éléments <template>, <datatemplate>, <rule> et <nest>. Encore en construction, cette partie des spécifications manque actuellement de détails et d'exemples concrets.

... Les autres attributs

contenteditable, contextmenu, draggable, irrelevant, ref, registrationmark, template, data-*

Les nouveaux types de l'élément input

datetime, datetime-local , date , month , week , time , number , range , email , url , search , color

Les éléments et attributs devenus obsolètes

• <frame>, <frameset>, <noframes> (jugés néfastes à l'utilisabilité et l'accessibilité)
• <acronym> disparaît au profit de abbr
• accesskey (dans a, area, button, input, label, legend et textarea)
• longdesc (dans img et iframe)
• name (dans img, form et a)
• language (dans script)
• summary (dans table)
• <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>, etc...

Les éléments redéfinis

• <a> (pour les ancres)
• <menu> (c'est en fait un élément réhabilité de HTML2)
• <b>, <i>, <small>, <strong> (section de texte lue ou interprétée différemment du texte "normal")
• <hr>

A quoi cela va bien pouvoir servir ?

Les nouveaux sites pourront adopter les balises telles que <header> pour remplacer les <div id= "header"> que l'on trouve sur la plupart des sites construits actuellement.

Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une meilleure accessibilité puisqu'une structure commune permettra entre autre aux synthétiseurs vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement.

De nouvelles fonctionnalités permettront aussi d'utiliser HTML et uniquement HTML au lieu d'y implémenter toute une série de plugins pour faire des choses finalement pas très compliquées.

Qui l'utilise déjà ?

Tous les navigateurs ont d'ores et déjà implémenté certains de ces éléments. Il faudra cependant attendre des mises à jour pour que l'ensemble du vaste panel HTML5 (éléments, attributs, APIs, WebForms) soit correctement interprété. La liste des navigateurs et de leur compatibilité avec les différents éléments à cette adresse : http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29

En conclusion...

HTML5 propose de nouveaux éléments très pratiques qui ont pour objectif d'harmoniser les médias et de structurer la mise en page par des éléments plus "sémantiques". Il permettra également de faciliter sensiblement l'accessibilité au contenu et l'interopérabilité étant donné que les formats propriétaires tels que Flash ou SilverLight pourraient être concurrencés par des éléments tels que <audio> ou <video>. De plus, l'analyse des pages par des robots ou par des synthétiseurs vocaux sera facilité par les éléments <header>, <nav>…etc.

Il reste cependant une question :
"Est-il possible à l'heure actuelle d'utiliser HTML5 en production réelle ?"

A cette question, le site bbxdesign.com répond de manière plutôt pragmatique : "ça dépend" : http://bbxdesign.com/2009/06/08/introduction-au-html-5/

Ressources :

• Site officiel (anglais)
• Différences entre HTML 4 et HTML 5 (anglais)
• Tableau de comparaison entre HTML 4 et HTML 5 (anglais)
• Définition des balises (anglais)
• Premier brouillon de HTML5 (français)

L'environnement

La programmation sur iPhone se fait en Objective-C, un langage qui nécessite l'utilisation de X-Code, environnement de développement pour Mac OS X. La programmation passe donc obligatoirement par un support Mac.

Une fois que vous avez un Mac à disposition, vous pouvez vous rendre sur le site du centre de développement d'Apple et y télécharger tout ce dont vous avez besoin pour le développement, à commencer par iPhone SDK qui contient l'environnement de développement Xcode et le simulateur iPhone. Il ne vous reste ensuite plus qu'à tout installer.

L’interface de X-Code n’est pas déroutante pour les programmeurs car elle ressemble à ceux des autres IDE (environnement de développement). L’arborescence des fichiers se trouve à gauche contrairement à Visual Studio, et les fichiers sont classés un peu différemment. Par exemple, on trouvera des dossiers Sources ou même Framework mais pas de dossier Header. Peu importe, on s’adapte facilement, c’est très intuitif !

La création des fichiers

• Les fichiers source

  La partie programmation d’X-Code est très simple d’utilisation . Pour ajouter des fichiers source, il suffit de faire Ctrl + clic sur le dossier Sources, puis de cliquer sur Add… New File…

  A partir de là, une petite fenêtre qui vous demande quel type de fichier vous voulez créer va apparaître. Il suffit de sélectionner UIViewControllersubclass qui se situe dans Cocoa Touch Class. Cliquez ensuite sur Next puis vérifiez que Also create "monfichier.h" en haut et votre projet dans Target soient coché. Cliquez enfin sur Finish.

• Les vues

  Pour créer une vue, cela se passe de la même manière (ou presque). Faites simplement Ctrl + clic sur le dossier Ressources, cliquez ensuite sur Add… New File…

  Vous retrouverez votre petite fenêtre d’ajout. Choisissez Empty XIB pour ajouter une vue vide.

La programmation des fichiers

Les fichiers source

Les fichiers sources se décomposent en deux catégories :

• Les fichiers .h

  Les fichiers portant l’extension .h sont aussi appelés header file. Ils permettent de faire la déclaration des différents éléments qui sont ensuite visibles dans la vue.

  EXEMPLE :
  Pour déclarer un label (zone de texte d’une ligne), on écrira IBOutlet UILabel *monLabel ; dans la partie @interface { … }

  Pour lui ajouter des propriétés, on écrira @property (nonatomic, retain) UILabel *monLabel ; avant le @end.

• Les fichiers .m

  Les fichiers avec l’extension .m sont aussi appelés Objective-C class (ou UIViewControllersubclass). Ils permettent de programmer la vue, de créer des fonction et de les utiliser sur les différents éléments déclarés précédemment dans le fichier en .h.

  EXEMPLE :
  Pour déclarer une fonction qui changerait le texte lors du chargement de la vue, on écrira

  -(void)viewDidLoad{
  
  [super viewDidLoad] ;
  
  monlabel.text = @ "c’est ici que je change mon texte" ;
  
  }

Les vues

Les vues sont tout simplement les éléments qui sont affichés à l’écran de l’iPhone. Une vue peut se composer de différents éléments tels que des images, des boutons, du texte…
Pour modifier les vues, il faut passer par Interface Builder.

Lorsque vous voulez modifier une vue, cliquez deux fois dessus (l’Interface Builder se lancera tout seul).
Une fois dans l’interface, vous voyez les fichiers contenus dans votre vue, mais aussi une multitude d’outils tels que la Library (bibliothèque de composants), ou l’inspecteur d’attributs. Si vous ne voyez pas ces éléments, cliquez simplement dans la barre du haut sur Tools et vous verrez s’afficher la liste des outils disponibles.

• La Library

  La bibliothèque permet de voir l’ensemble des éléments disponibles pour votre vue, Il y a des WebView (vues destinées à charger des pages web), des TableView (liste sous forme de tableau) ou même de simples boutons (et bien plus encore)... Commencez par glisser-déposer un élément View vers votre .xib contenant le File’s owner et le First Responder puis ouvrez la vue en cliquant deux fois dessus.
  Une vue s’affiche alors à votre écran. Vous pouvez y glisser-déposer tous les éléments dont vous avez besoin depuis la Library.

• Le Attributes Inspector

  Comme son nom l’indique, l’inspecteur d’attributs permet de définir les propriétés des éléments !
  Il suffit de cliquer sur un élément pour voir les valeurs de l’inspecteur d’attribut changer.

  Vous devez passer par l’inspecteur d’attributs pour faire la relation entre votre vue et vos fichiers source : cliquez sur le File’s owner de votre vue puis cliquez sur l’onglet identity de l’inspecteur d’attributs et sélectionnez le nom de vos sources dans Class.

• La liaison des éléments

  

  Chose importante que j’ai mis longtemps à trouver, c’est la liaison entre les éléments du code et les éléments de la vue. Ce n’est pas très compliqué à vrai dire…
  Une fois que vous avez effectué votre liaison entre votre vue et votre contrôleur de vue (code source), il vous suffit de faire Ctrl + clic sur le File’s owner et de tirer des traits depuis les cercles qui se trouvent à droite du nom des éléments, vers les différents éléments de votre vue.

La programmation iPhone est maintenant à votre portée !

Ah oui, une dernière chose ! Faites Pomme + Entrée ou cliquez sur Build and Go pour lancer l’application dans le simulateur iPhone. Amusez-vous bien !

Android est équipé d'un navigateur basé sur le moteur Webkit, également intégré par Google Chrome.

Il faut tout d'abord télécharger le SDK Android adapté à votre système d'exploitation et le kit Java JDK de Sun si vous ne le possédez pas déjà :

• SDK Android 1.5 (ou Version 1.1)
• Java SE Development Kit (JDK)

Après avoir installé Java JDK, décompressez Android SDK dans le répertoire de votre choix. Celui-ci contient un sous-répertoire tools dans lequel sont situés les programmes qui nous intéressent.

Les commandes suivantes pourront être entrées en ligne de commande, ou placées dans un fichier .bat sous Windows dans ce même répertoire. Par exemple si vous avez décompressé vos fichiers dans C:\Program Files\android-sdk-windows-1.5_pre\, cliquez sur le menu Démarrer, puis Exécuter, et indiquez cmd pour ouvrir une console. Tapez ensuite cd C:\Program Files\android-sdk-windows-1.5_pre\tools\ pour vous placer dans le répertoire tools.

Créer un AVD

Avant de pouvoir lancer l'émulateur, il faut créer un AVD (ou Android Virtual Device). Vous pouvez indiquer le nom de votre choix. Ici nous le nommerons CupcakeVM comme Cupcake, le nom de code de la version 1.5 d'Android, et VM pour Virtual Machine :

android create avd --target 2 --name CupcakeVM

Lancer l'émulateur

L'émulateur peut ensuite être initialisé à l'aide de la commande spécifiant le choix de l'AVD. Attention : le lancement peut sembler long car il s'agit d'une émulation : la fenêtre du mobile peut afficher un écran noir avec le logo d'Android durant un certain moment avant de s'initialiser complètement.

emulator -avd CupcakeVM

Cliquez sur Menu pour activer le mobile, puis Browser pour ouvrir le navigateur.

Le clavier est exploitable ainsi que la souris pour simuler l'interface tactile. Vous pouvez lancer l'emulator avec l'option skin pour visualiser Android dans un autre équipement mobile virtuel avec d'autres résolutions ou orientations d'écran, en QVGA (320x240) et HVGA (480x320, 640x240).

emulator -avd CupcakeVM01 -skin QVGA-L

D'autres skins sont téléchargeables sur internet. Il vous suffira de les placer dans le répertoire \platforms\android-1.5\skins\ pour pouvoir ensuite indiquer leur nom en ligne de commande.

Le SDK Android permet également le développement d'applications (notamment grâce à l'IDE Eclipse) pour Google Phone avec toutes les API pour l'affichage 2D et 3D, le support des SMS et MMS, la vidéo (H.264, MPEG-4), l'audio (OGG, MP3, AAC) le GPS et SQLite.

Avec BlackBerry, il vous faut télécharger 2 éléments (gratuits) sur la page de téléchargement BlackBerry Simulators :

• Un Device Simulator (il en existe pour plusieurs modèles)
• L'Email and MDS Services simulator package qui est une passerelle si vous comptez utiliser internet (indispensable pour tester un site web)

Afin de les exécuter, il vous faudra aussi le kit Java JDK de Sun :

• Java SE Development Kit (JDK)

Il vous faut lancer l'Email & MDS Simulator...

...puis le Simulateur correspondant au modèle souhaité.

Vous retrouverez ensuite facilement le navigateur dans l'interface du mobile qui est contrôlable à la souris et au clavier.

Consultez également la documentation Blackberry officielle qui contient des guides de référence pour HTML, CSS et JavaScript sur Blackberry Browser.

Ce tutoriel vous montrera les limites de cette pratique et fournira une méthodologie pour coder propre sans pour autant alourdir les scripts.

• Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!)

• Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. (Oh… du coup il faut réfléchir quand même?)

Quels objectifs?

Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux:

• Gommer certaines différences entre les styles par défaut des navigateurs. On pourra le faire en utilisant un Reset CSS, mais ici l'approche est légèrement différente: plutôt que de remettre à zéro (reset) les styles par défaut des navigateurs, on va se contenter de les corriger ou de les préciser quand ils divergent légèrement.

• Fournir un canevas avec des sélecteurs CSS pour les principaux éléments d'une page web. Cela permettra s'occuper dès le départ de choses que l'on fait presque systématiquement dans une intégration web: modifier les styles des liens, des paragraphes, des titres, etc.

Notre feuille de styles de base

/* --- STYLES DE BASE --- */

/* Page */
html {
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
}
body {
  margin: 0;
  padding: 1em; /* Remettre à zéro si nécessaire. */
  /* Pensez à utiliser une collection de polices (2), par ex:
  font-family: Arial, Helvetica, FreeSans, sans-serif; */
  font-size: .8em; /* À adapter pour la police choisie. (3) */
  line-height: 1.4; /* À adapter au design. (4) */
  color: black;
  background: white;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */
  line-height: 1.2;
  font-weight: bold; /* Valeur par défaut. (6) */
  font-style: normal;
}
h1 {
  font-size: 1.75em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
}
h4 {
  font-size: 1em;
}

/* Listes */
ul, ol {
  margin: .75em 0 .75em 32px;
  padding: 0;
}

/* Paragraphes */
p {
  margin: .75em 0; /* Marges plus faibles que par défaut. (7) */
}
address {
  margin: .75em 0;
  font-style: normal;
}

/* Liens */
a {
  text-decoration: underline;
}
a:link {
  color: #11C;
}
a:visited {
  color: #339;
}
a:hover, a:focus, a:active {
  color: #00F;
}
/* Pas de bordure pointillée ou halo lors du clic sur un lien */
a:active {
  outline: none;
}
/* Pas de bordure autour des images dans les liens */
a img {
  border: none;
}

/* Divers éléments de type en-ligne (8) */
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}

/* Formulaires */
form, fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
input, button, select {
  vertical-align: middle; /* Solution pb. d'alignement. (9) */
}

Certaines lignes de code sont commentées. Les numéros entre parenthèses renvoient aux notes suivantes:

1. Bug décrit sur la page suivante: Bug avec l’unité relative em et Internet Explorer.
2. Pour un choix de collections de polices (font-family, voir Quelles polices de caractères (fontes) utiliser sur le Web?.
3. Ici, on utilise les styles de l'élément body pour définir la taille du texte globale pour le site. Une police Arial ou Helvetica à .8em, soit 80% de la taille du texte par défaut du navigateur, fournit une bonne lisibilité. Il faudra adapter cette valeur suivant la police choisie, les besoins du design, etc.
4. Les valeurs 1.1 et 1.2 conviennent marchent bien pour les titres, voire pour le texte dans des colonnes étroites. Pour des lignes de texte plus longues, on utilisera plutôt des valeurs entre 1.2 (120%) et 1.8 (180%).
5. Avec les styles par défaut des navigateurs, les titres ont souvent une marge supérieure et une marge inférieure égales. Du coup, on ne reconnait pas au premier coup d'œil que le titre se rapporte au texte qui le suit. Le style proposé corrige ce défaut. Pour retrouver le style par défaut des navigateurs, utilisez un margin: 1em 0;.
6. Dans les styles par défaut des navigateurs, les titres sont en gras. Si vous souhaitez une graisse normale pour la plupart de vos titres, utilisez plutôt font-weight: normal.
7. On utilise des em afin que les marges des paragraphes soient proportionnelles à la taille du texte, ce que ne font pas tous les navigateurs (notamment IE). On utilise une valeur de .75em, soit des retraits entre les paragraphes un peu plus faibles que ceux utilisés par défaut par les navigateurs. À modifier selon vos besoins.
8. Ces styles correspondent aux valeurs par défaut des navigateurs, mais vous voudrez peut-être les modifier pour votre projet.
9. Les éléments de formulaires sont assez difficiles à mettre en forme et à positionner. De plus, l'alignement vertical des boutons, cases à cocher et autres listes déroulantes est parfois difficile à gérer. Vu les différences de comportement entre navigateurs, il n'y a pas de solution parfaite, mais utiliser un alignement vertical centré dans la hauteur de ligne permet d'avoir un rendu décent avec tous les navigateurs.

Où placer ces styles?

Le plus simple est sans doute de placer ces styles dans un fichier séparé. Pour ma part, je l'enregistre séparément dans un fichier base.css. Ainsi, pour une page donnée, je peux avoir les appels de feuilles de styles suivants:

<link rel="stylesheet" type="text/css" media="all"
      href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen"
      href="css/screen.css" />

Si vous choisissez cette solution, appelez la feuille de styles de base en premier, de préférence.

Avantage possible de cette solution: vous pourrez utiliser la feuille de styles de base comme base pour tous les médias de restitution, par exemple pour les styles pour l'impression. On pourra avoir la feuille de styles de base, une feuille de styles pour l'affichage à l'écran, et une troisième pour l'impression.

L'autre solution, c'est de placer les styles de base au début de votre feuille de styles principale.

Modifiez ces styles!

Un des deux avantages de la feuille de styles par défaut proposée dans cet article, c'est qu'elle fournit un canevas à modifier. Besoin d'une police différente, de tailles de texte ou hauteurs de lignes qui s'écartent de ce qui est proposé? Corrigez les styles!

Pour chaque projet, identifiez dans la maquette les principales caractéristiques du texte (fonte, taille, graisse, hauteur de ligne), les couleurs des liens (y compris avec les états survolés!), la taille des retraits entre les paragraphes. Ensuite, modifiez la feuille de styles de base pour ce rapprocher autant que possible de ces caractéristiques.

Pour ne pas faire d'impasse, lisez la feuille de styles de base ligne par ligne et demandez-vous si les styles utilisés sont pertinents pour votre projet, ou s'il faut les corriger.

Bonus

Pour finir, voici quelques styles qui peuvent être intéressants, mais qui ne sont pas assez simples ou «universels» pour être inclus à la feuille de styles de base ci-dessus.

/* --- STYLES DE BASE SUPPLÉMENTAIRES --- */

/* Met en évidence les abréviations (ayant un attribut title) */
abbr[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/* Met en évidence les citations */
blockquote {
  margin: .75em 0 .75em 20px;
  padding: 0 0 0 10px;
  border-left: solid 2px #ddd;
}
q, cite {
  font-style: italic;
}
q cite, q q {
  font-style: normal
}

/* Supprime les guillemets automatiques (citations courtes) */
q {
  quotes: none;
}
q:before, q:after {
  content: ""; /* Nécessaire pour Safari/Chrome */
}

/* Rapproche les paragraphes dans les listes et citations */
blockquote p, li p {
  margin: .5em 0;
}

/* Styles de base pour les listes de définition */
dl {
  margin: .75em 0;
}
dt {
  margin: .75em 0 0 0;
  font-weight: bold;
}
dd {
  margin: .25em 0 .25em 32px;
}

/* Mise en forme simple pour les tableaux */
table {
  margin: 0;
  border: 1px solid gray; /* Pas de bordure = "none". */
  border-collapse: collapse; /* Valeur par défaut: "separate". */
  border-spacing: 0;
}
table td, table th {
  padding: 4px; /* Pas de retrait autour du texte = "0". */
  border: 1px solid #ccc; /* Pas de bordure = "none". */
  vertical-align: top; /* Valeur par défaut: "middle" */
}

/* Conteneurs sémantiques de HTML 5 */
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section {
  display: block;
}

Ces styles ne sont pas indispensables mais peuvent vous être utiles. Utilisez-les selon vos besoins ou inspirez-vous en.

Si vous souhaitez afficher au monde entier le fruit de votre veille technologique, et profiter de la gloire d'être à la Une d'Alsacréations, de 2 Kiwiz bien mérités et d'un backlink qui n'échappera pas aux lecteurs assidus, voici la marche à suivre...

Version rapide

Commencez par suggérer une actualité pour découvrir notre formulaire de rédaction.

Voici les informations utiles et les champs à remplir :

• "En attente de validation..." : toutes les actualités proposées et qui ne sont pas encore mises en ligne sont affichées dans cette liste. Cela permet d'éviter de proposer une news déjà en cours d'approbation
• Titre : le titre de l'actualité que vous proposez (pas de balise HTML)
• Catégorie : choisissez une catégorie représentant votre actualité
• Contenu : le champ principal qui contiendra le corps de votre annonce. Ce texte devra être rédigé intégralement en HTML. Des boutons graphiques vous aident à baliser correctement le contenu (titre de section H3, paragraphes, listes, images, liens, aperçu, ...)
• Source des informations : si votre actualité provient d'une source extérieure, merci de signaler le lien (URL) dans ce champ
• Tags (mots clés) : associez des mots-clés à votre actualité pour faciliter sa recherche. En tapant les premières lettres d'un mot clé, différentes propositions s'affichent, cliquez sur une proposition pour l'ajouter à la liste. Les mots clés doivent impérativement être séparés par une virgule.
• Illustration du document : ce module vous permet d'ajouter un pictogramme à votre actualité. Cette image peut être téléchargée à partir de votre ordinateur, ou choisie dans la collection affichée (vous pouvez effectuer une recherche par mot clé). Si aucune image n'est ajoutée, un pictogramme général sera automatiquement associé
• Choisissez si vous voulez être notifié par e-mail de chaque commentaire qui sera laissé sur votre actualité.
• ... et Validez

1. Un thème adapté

Alsacréations est une communauté dédiée à la conception web conforme. Les actualités qu'elle diffuse doivent respecter certains critères :

• un thème concernant les standards et conception web en général,
• pas de spam (des concours sans rapport avec les standards par exemple),
• pas de troll (oui, j'avoue que ce n'est pas toujours évident).

Chaque proposition d'actualité est discutée en interne par l'équipe de modération. Celles qui ne respecteront pas ces différents critères seront supprimées.

2. Une structure rigoureuse

Pour faciliter la lecture et éviter des soucis d'affichage, veuillez choisir un titre pertinent qui résume au mieux l'actualité proposée.

Puis, prenez soin de bien mettre en forme votre document, aérez-le, et tenez compte des paramètres suivants :

• Choisissez une catégorie adaptée au thème de votre news
• Associez des tags (mots clés) corrects, séparés par des virgules
• Fournissez un balisage correct. Pensez aux boutons qui facilitent la vie :
  • image de contenu (via URL)
  • image de contenu (uploader ou galerie)
  • lien hypertexte
  • palette de couleurs (du texte)
  • encodage des caractères (ex. afficher correctement les chevrons des balises lorsque vous affichez du code HTML)
  • HTML Tidy (répare automatiquement le code HTML mal imbriqué)
  • prévisualisation de votre actualité
• Attention : si vous employez des titres de section dans votre actualité, le premier niveau de titre devra être <h3>

3. Des images d'illustration

Pensez à illustrer votre document. Il y a deux façons de procéder :

• l'illustration du document est une icône unique qui sera associée à votre actualité. Elle sera affichée sous forme carré à côté du titre.
• les images internes sont disposées au sein de votre document et positionnées si vous le souhaitez : Centré : <p class="center">...<p>, Flottant à droite : <img class="right" />, Flottant à gauche : <img class="left" />

4. Du code

Voici les indications à suivre pour insérer du code (HTML, CSS, PHP, etc.) au sein de vos documents :

Pensez à entourer convenablement vos parties de code :

• Pour un bloc de code : <pre class="code"><code>...</code></pre>
• Pour un bloc en ligne, dans le texte : <code>...</code>

Utilisez le bouton d'encodage des caractères pour transformer les chevrons ouvrants et fermants en entités HTML. Par exemple : <p> -> & lt;p& gt; (sans les espaces)
En effet, si vous ne convertissez pas les caractères < et > dans vos codes, ils seront interprétés comme de vraies balises.

Pour finir

Sachez que votre contenu, après consultation des modérateurs, pourra être modifié en partie ou en totalité (même si vous en resterez l'auteur). Il est également probable que la mise en ligne puisse prendre plusieurs jours, ne vous en inquiétez pas.