Comme tout le monde le sait, il est difficilement gérable (voire impossible) d'avoir le même rendu sur tous les navigateurs dès que l'on veut réaliser un design complexe.
Le problème venant surtout de la manière différente des navigateurs à interpréter les padding, margin, height et autres ...

Pour y remédier, il y a une solution plutôt simple, les Hack CSS. Les Hack sont ces instructions comprises par certains navigateurs et pas par d'autres. Ils s'intègrent directement dans le fichier CSS, comme un bloc d'instructions ...

Par défaut, Flash génère un fichier HTML invalide lors de la publication (mais qui fonctionne).
L'importance du respect des standards n'est aujourd'hui plus à prouver et on peut donc se demander comment intégrer son swf sans soucis.
Pour cela, une méthode à été developpée par Drew McLellan dans son article "Flash Satay: Embedding Flash While Supporting Standards".
Les objectifs de cette méthode sont de ...

Vous connaissez sûrement le site CSS Zen Garden, un site dédié entièrement au webdesign.
Il montre la puissance du CSS, grâce à une page web HTML unique mais un CSS différent à chaque fois.
Au départ le site ne présentait que 5 CSS différents et il en compte aujoud'hui 150!
Ce qui fait la réputation du Zen Garden, c'est surtout l'excellente qualité des feuilles de style présentées et leur professionalisme.
Je me suis recemment procuré le livre écrit par leur fondateurs, Dave Shea et Molly E.Holzschlag, 300 pages très instructives !
Tout est en anglais, et disponible en import (voir lien à la fin de l'article).

Pour avoir un bon référencement naturel sur les moteurs de recherche, j'ai décidé d'utiliser la réécriture d'URL pour Pixtiz.
Pour cela, il y a deux solutions :

Faire son URL Rewriting directement dans le .htaccess grâce aux expressions régulières
Rediriger tout son site vers une même page PHP et faire le traitement par extraction de l'URL

Pour des raisons de simplicité de code, j'ai décidé d'utiliser la deuxième solution.
En effet les expressions régulières sont difficiles à maîtriser et le traitement par PHP permet de gérer les erreurs plus facilement.
Le site étant hébergé chez 1&1 en hébergement mutualisé, il m'a fallu adapter le code pour que cela fonctionne.

Il existe aujourd'hui plusieurs critères pris en compte par les moteurs de recherche.

Parmi les plus importants, il y a le titre de la page, sa description meta et de plus en plus son URL.
Grâce à l'URL Rewriting, le webmaster peut changer une URL de type www.site.com/index.php?page=blog en www.site.com/blog.

Les moteurs ne prennent pas en compte ces paramètres (?param1=1&param2=2&param3=3...) s'ils sont trop nombreux.

D'un point de vue utilisateur, le cheminement à l'intérieur du site est plus clair et plus agréable.
En effet, il voit la correspondance avec des pseudo-répertoires comme ceux qu'ils peut voir quand il parcourt son disque dur.
Pour effectuer cette réecriture, on peut passer par un .htaccess et des expressions régulières qui sont, pour des débutants, difficiles à mettre en place...

Lorsque l'on développe un site web, on a souvent besoin de beaucoup d'outils externes comme la validation W3C ou autres.
Certaines actions sont, elles, trop répétitives (uploader un fichier css et actualiser la page par exemple).
Pour vous simplifier ces tâches, il existe un outil extrêmement pratique que j'ai utilisé tout au long du developpement de ce site, la WebDeveloper Toolbar.
Je vous décrirai ici les fonctions que j'utilise le plus et celle que j'estime comme les plus pratiques même si vous pourrez découvrir par vous même toutes les options offertes par cette barre d'outils.

Pour la création du design de Pixtiz, j'avais décidé que mon design serait plutôt classique avec header pour le multi-langue et footer pour le menu annexe.
Pour le contenu, il serait réparti sur trois colonnes: à gauche le menu et les sites partenaires, au centre le contenu et à droite la publicité et les utilisateurs en ligne.
Le tout serait bien sur au centre de la page et pas aligné sur un bord.
Au cours de la création de mon fichier CSS, j'ai été confronté à beaucoup de bugs et d'obstacles qui semblent revenir souvent dans la création de ce type de design.
Le code est propre, n'utilise aucun hack CSS, et fonctionne parfaitement sous Internet Explorer que sous Firefox
Le but de ce tutorial est de vous montrer comment contourner ces problèmes. Un fichier CSS "modèle" est en téléchargement sur cette page.

Un autre problème que j'ai eu à la création de Pixtiz fût la compatibilité des images PNG avec Internet Explorer et je pense que
tout le monde a déjà eu ce souci.
En effet, les zones transparentes deviennent bleues pour toutes les versions d'IE.
Pour résoudre ce problème, il y a plusieurs solutions :

Utiliser le progid Microsoft sur chaque image

Utiliser un script JavaScript qui automatise cette opération

Utiliser la propriété behavior CSS

Créer un flux RSS pour son site, permet à vos visiteurs de se tenir au courant de l'actualité du site ou des nouveaux articles parus sans avoir à s'inscrire à une newsletter.
Les lecteurs (aggrégateurs) de flux se sont multiplié (NetVibes, Google Reader ...) et permettront à vos visiteurs d'économiser du temps en consultant plusieurs flux RSS en même temps, c'est la syndication.
Le langage utilisé pour le créer est le XML, langage proche du HTML mais plus puissant et strict.
Un autre avantage est celui du référencement.
En effet, vous allez lier ce flux RSS à votre site web et Google va "s'abonner" à ce flux et revenir plus souvent.
A travers ce tutorial, vous apprendrez la syntaxe d'un fichier RSS, comment le créer de manière automatique, comment le lier à votre page et comment l'afficher avec XSLT pour les utilisateurs n'ayant pas d'aggrégateur.

1 | 2