graphiste freelance : création de sites internet | création de logos | création d'animation flash | créations d'affiches, flyers

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.

---

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...

---

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.

---

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).

---

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 ...

---

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 ...

---