Il y a quelques semaines, j'ai découvert Kongregate, un nouveau site proposant des jeux flash gratuits.
Le concept est différent des autres annuaires de jeux flash traditionnels.
Ici ce sont les developpeurs qui uploadent leur propres jeux flash, ce qui vaut a Kongregate d'être déjà considéré comme le Youtube du jeu flash.
Toutes les semaines, Kongregate organise un concours, visant à recompenser le meilleur jeu flash uploadé dans la semaine.
Le gagnant de la semaine remporte 250 $, et le gagnant sur les 9 premières semaines gagne 1500 $.
Au début, il n'y avait qu'une vingtaine de jeux différents proposés sur le site, il y en a déjà plus d'une centaine aujourd'hui ...

Dans ce tutorial, je vais expliquer en détail la création de dégradés sous Illustrator.
Ces étapes vous seront sûrement familières si vous utilisez déjà Flash par exemple puisque tous les produits Adobe / Macromedia ont adopté le même système. Il est donc important de savoir s'en servir jusqu'au bout des doigts.
Vous apprendrez ici comment créer votre dégradé, le modifier, en changer les couleurs ...

Dans ce tutorial, je vais expliquer en détail comment faire un dégradé vers une transparence sous Illustrator.
Faire ce type de dégradé n'est pas aussi simple que sous Flash où il suffit simplement d'entrer un alpha pour rendre la couleur transparente.
Sous Illustrator, vous devrez utiliser un masque d'opacité afin de cacher les parties que vous souhaitez
Vous pourrez ainsi créer des fondus entre vos éléments illustrator facilement, aussi bien pour un fondu entre images que pour un fondu entre illustrations.
Les masques d'opacité peuvent aussi servir à créer des "perçages" dans vos illustrations, des trous en quelques sorte.

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.

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.

Après plusieurs mois de developpement, Pixtiz commence à décoller et de plus en plus de visiteurs viennent jouer aux jeux flash gratuits et lire les tutoriaux illustrator, flash, php et css du blog.
Afin de permettre aux visiteurs habituels de suivre l'actualité du site, Pixtiz dispose à présent d'un flux RSS.
Vous pouvez vous abonner dès maintenant et utiliser votre lecteur de flux habituel qui vous permettra de ne pas avoir à consulter le site tous les jours.
Recevoir l'actualité des tutoriaux illustrator, css, flash et php...

1 | 2 | 3