Après quelques semaines de "geekisme" acharnées, l'heure est à la nouveauté sur Pixtiz ! Tout d'abord, le site a adopté un nom définitif : Pixtiz ! Pourquoi Pixtiz ? Tout simplement parce que ca sonne bien et que c'est simple de s'en rappeler ! Ensuite, un joli logo, qui a la forme d'un signe PI mais s'il on regarde bien, on peut trouver toutes les lettres de Pixtiz (un peu d'imagination !). Le site est maintenant hébergé chez 1&1, un hébergeur professionnel, finit donc les coupures aux heures de pointe. Pour ce qui est du contenu du site, j'ai rajouté un formulaire d'inscription avec vérifications (longueur du mot de passe, du pseudo, savoir s'il est déjà pris ...) en instantané grâce à la technique AJAX...

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

Pour la création des jeux Pixtiz, j'ai implanté un système de classement. Ce classement doit donc être visible par tous les membres du site.
Le plus pratique était donc de ranger tous les scores dans une base MySQL qui pourrait être appelée dans le site web et dans les jeux par PHP.
J'ai donc cherché sur le net des tutoriaux mais la plupart étaient mal expliqués ou ne fonctionnaient tout simplement pas.
Dans ce tutorial, je vais vous donner les sources du script qui me permet de récupérer le meilleur score et de l'afficher au début de chaque partie.

A la création de pixtiz, je voulais créer un formulaire d'identification entièrement en flash.
Il fonctionnait bien, notamment grâce à la communication avec PHP / Mysql qui vérifiait si la combinaison pseudo / mot de passe était correcte.
Il manquait cependant une fonctionnalité que l'on a avec un formulaire classique : la saisie semi-automatique.
En effet, lorsque vous remplissez un formulaire html sous FireFox ou autre, celui conserve vos informations et vous n'avez pas à les retaper à chaque
visite du site. En cherchant un peu, j'ai découvert les Shared Objects, qui créent un cookie sur le pc du client et remplit cette fonctionalité.
Les fonctionalités sont multiples, cela peut servir à garder en mémoire un identifiant, le dernier niveau joué ...

Vous venez de créer un site web 2.0 ou vous voulez tout simplement rajeunir le look de votre design, et pour cela, il faut créer un webdesign à la mode. Et aujourd'hui, la mode c'est le Web 2.0 !
Depuis quelques temps, on voit l'emergence des sites web 2.0 comme flock ou silverorange et beaucoup d'autres.
Il n'y a pas de vrais règles pour créer un design Web 2 mais certains styles reviennent souvent (ombres, coins arrondis, design épuré, taille de police disproportionnée ...).
Dans ce tutorial, je vais vous apprendre comment créer un logo type Web 2.0 très facilement grâce à Adobe Illustrator.
Les sources illustrator sont disponibles à la fin de ce tutorial.

Après l'article sur la création de logo web 2.0, je vous propose de créer des boutons type Web 2.0.
Comme pour les logos, aucun standars mais certains styles redondants (dégradés, ombres, coins arrondis...).
Dans ce tutorial, je vais vous apprendre comment créer des boutons type Web 2.0 très facilement grâce à Adobe Illustrator.

Les sources illustrator sont disponibles à la fin de ce tutorial.

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.

1 | 2 | 3