Pour améliorer la navigation et le référencement des articles de mon blog, j'ai décidé d'ajouter à la fin de chaque article, un lien vers un article de la même catégorie. Mon choix a été de prendre l'article de la même catégorie écrit juste avant et celui écrit juste après, s'il existe.

Toutes les entrées de mon blog étant stockées dans une base mysql, il me suffisait d'effectuer les bonnes requêtes pour sélectionner les articles précédents / suivants.
Pour éviter de faire plusieurs requêtes ou deux while imbriqués, j'ai du trouver une solution simple en SQL. La solution se passe avec les sélécteurs < et >.
Ce court tutorial présente la source PHP que j'utilise avec ses commentaires.

Pour créer un design à la mode, il vous faut un design style Web 2.0.
Pour cela, pas de standards établis, seulement des règles simples que l'on retrouve sur tous ces nouveaux sites.
Par exemple, les contours arrondis, les couleurs pastel, les polices sans serif ou les ombres sont typiques de ces designs.
Roman Mittermayr a écrit un article en anglais qui résume parfaitement ces règles.
Avec son autorisation, voici donc la traduction en français de son article sur la 2.0Culture.
Grâce à ses conseils et ses exemples, vous pourrez créer vous-même votre design Web 2.0 !

Pour ouvrir une nouvelle fenêtre (pop-up), on pense souvent au Javacript, qui permet de le faire facilement.
Seulement, le contenu du pop-up n'est pas indexable puisqu'il n'est pas parcouru par les moteurs de recherche (à cause du javascript).
De plus, l'ouverture de pop-up peut-être bloquée par les bloqueurs de pop-up intégrés aux navigateurs récents.
Cette solution est d'autant plus à proscrire qu'elle n'est pas très "user-friendly" car elle surprend l'utilisateur.
Il existe une solution qui permet d'afficher une infobulle, un peu comme les info-bulles windows au survol du curseur.
Cette solution est réalisée entièrement en CSS et permet donc d'avoir un contenu indéxé pas les moteurs.

Dans ce tutorial, je vais expliquer comment rediriger simplement le visiteur de votre site internet suivant sa langue.
De façon automatique et transparente, on va détecter sa langue et le visiteur sera renvoyé vers la page correspondant à sa langue préférée.
Il faut savoir que la langue récupérée avec le script PHP est celle fixée par l'utilisateur dans les préférences de son navigateur et pas celle de son système d'exploitation.
Le script utilise ainsi la variable $HTTP_ACCEPT_LANGUAGE et renvoie le header correspondant de manière automatique.

Votre site comporte sûrement des formulaires, que ce soit pour un formulaire de contact/d'inscription, un système de commentaire pour votre blog,
un livre d'or, un forum...
Ces formulaires peuvent être la cible de robots de spam, qui envoient de manière automatique des publicités ou des liens.
Des hackers peuvent aussi le faire de manière massive pour crasher votre base de données voire votre serveur web.
Pour y remédier, il existe une solution simple que vous avez sûrement déjà vu sur de nombreux sites: une image de vérification aussi appelée captcha.
Cette image est cryptée et prouve que celui qui remplit le formulaire est bien humain.
Vous apprendrez avec ce tutorial à créer cette image et à effectuer la vérification de la valeur entrée.

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.

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

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.

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.

1 | 2