Logo MA14

Des caractéristiques Flash dans un gâteau HTML

  • Marc Boivin
  • Mercredi, 3 juin 2009

J’avais envie de vous montrer que l’on peut faire, avec du HTML, certaines choses que les utilisateurs attribuent au Flash. Toutefois, je voulais en parler sans déclencher une guerre froide. J’ai donc opté pour une métaphore sympathique afin de vous expliquer le tout avec tact. Cette métaphore est celle du gâteau – parce qu’un gâteau, c’est inoffensif. On ne peut pas en dire autant d’un développeur qui défend ses convictions de développement.

Ce qui caractérise un gâteau Flash

Quand on pense à Flash, il y a quelques éléments qui nous viennent en tête. N’en déplaise à Adobe, en voici quelques uns dans une liste non-exhaustive :

  • Le moule (l’espace rectangulaire de la page) :
    Les sites en Flash nous ont habitué à un standard de taille fixe; un carré dans le milieu de la page où l’action se déroule. Le moule Flash place le contenu dans un carré sur une page web.
  • Le glaçage (les animations) :
    Je pense que le glaçage figure au palmarès des raisons pour lesquelles on réalise des sites en Flash. On veut voir de l’animation, des transitions, des fondus, du 3D même; Flash permet ce genre de glaçage.
  • Une familiarité rassurante (l’adresse unique) :
    Un gâteau, c’est rassurant. Tout le monde en reçoit à chacun de ses anniversaires. Souvent le même, notre préféré ou celui que notre mère faisait le mieux. En Flash, l’URL ne change jamais même si le contenu de la page change. Ce trait rassurant pour certain est souvent vu comme une faiblesse et une incohérence : si le contenu de la page change, on souhaiterait que l’adresse change aussi.

On peut débattre sur la validité de cette liste, mais ce sont les caractéristiques que nous avons tenté de reproduire dans notre gâteau HTML. Le gros avantage du gâteau HTML c’est qu’il offre aux utilisateurs une expérience gustative intéressante, peu importe les moyens technologiques dont ils disposent.

La recette

Ingrédients

Pas besoin de prendre des ingrédients alternatifs, ceux pour le gâteau HTML moderne suffisent amplement.

  • La pâte à gâteau (CMS) :
    Bien que ça n’est pas d’impact direct sur l’affichage, une bonne pâte à gâteau est indispensable afin d’avoir de la consistance en vue des étapes du glaçage et des chandelles. Le CMS (ou gestionnaire de contenu) est la partie administrative d’un site qui en facilite sa gestion.
  • La poudre à pâte (AJAX) :
    Bien que ce ne soit pas une technologie en soit, mais plus un concept (comme le Web 2.0), il mérite sa place dans nos ingrédients. Le AJAX (une combinaison de JavaScript Asynchrone et de XML) permet de transmettre des données au serveur sans nécessiter un rafraîchissement de la page.

Également

Outre les instruments de base, voici des éléments essentiels à la réussite de cette recette.

  • Le moule (CSS) :
    Je sais, je sais, tous les gâteaux web utilisent le CSS, ce n’est pas une raison pour le laisser tomber. Le moule CSS est flexible et permet une variété de forme de gâteau infini. Attention toutefois, le moule peut se déformer dans les vieux fours… Le CSS (ou feuille de style) permet d’attribuer des caractéristiques visuelles aux éléments HTML.
  • Les chandelles (jQuery) :
    Même si mes premières amours ont été avec YUI de Yahoo! pour les gâteaux corporatifs, j’utilise maintenant jQuery : moins de chandelles, plus de lumière! jQuery est une boîte à outils rassemblant un ensemble de fonctions visuelles de base.

Préparation

Assurez vous que le mélange à gâteau soit bien homogène. Ajoutez un soupçon de poudre à pâte. Ne mélangez pas trop une fois la poudre à pâte incorporer sinon le gâteau de lèvera pas. Faire cuire. Ajoutez le glaçage et les chandelles. Voilà!

Attention de ne pas trop mettre de chandelles. Il ne faut pas déformer le gâteau ou altérer le goût du glaçage.

Qu’est-ce que vous en pensez?

Si vous n’utilisez pas de 3D ou des fonctions avancées de modifications de photos, essayez ma recette et vous verrez que les 2 gâteaux, Flash ou HTML, auront le même goût pour l’usager. Un goût authentique, bien de chez nous, que l’utilisateur ait un téléphone intelligent ou un ordinateur souffrant d’un manque de mises à jour.

Évidement on ne fait pas 2 sortes de gâteau pour le plaisir. Simplement, la prochaine fois que vous voudrez faire un gâteau Flash, n’oubliez pas que le gâteau HTML peut aussi faire l’affaire.

Si vous voulez voir un exemple d’un site qui devait initialement être en Flash, mais qui a été conçu en HTML (entre autres pour des raisons de référencement), aller voir Sublim.

IE6 : Prendre les usagers par la main plutôt que de les bannir

  • Laurent LaSalle
  • Dimanche, 24 mai 2009

Le blogueur norvégien Vincent Hasselgår a l’idée intéressante de partir un mouvement visant à convaincre les utilisateurs d’Internet Explorer 6 de mettre à jour leur fureteur. Contrairement aux campagnes visant le même objectif, la méthode proposée présente un message neutre et sympathique, et ne nécessite aucune image.

Une fois le code intégré, voici le message qui apparaît lorsque le système détecte l’utilisation d’IE6 :

Did you know that your browser is out of date?

To get the best possible experience using our website we recommend that you upgrade your browser to a newer version. The current version is Internet Explorer 8. The upgrade is free. If you’re using a PC at work you should contact your IT administrator.

If you want to you may also try some other popular Internet browsers like Firefox, Opera, or Safari

Peut-être que ceux qui censurent IE6 (et je fais encore partie) devraient favoriser plutôt une procédure du genre (qui n’a rien de sorcier, le secret étant derrière la fameuse condition commentée <!–[if lte IE 6]>) au lieu d’imposer le changement?

Pour implanter cette solution, copier-coller ledit code à l’endroit approprié sur votre site web. Je vous laisse soin de le traduire en français au besoin.

Coup d’œil au design de Vincent Gagnon

  • Long Nguyen
  • Vendredi, 8 mai 2009

Vincent Gagnon est un pianiste-compositeur de musique jazz qui désirait avoir un site web dans le but d’élargir son public. Le design devait faire ressortir la personnalité de Vincent ainsi que sa musique. 

vincentgagnon

L’idée de ne pas avoir de navigation a primé dès le départ. Il fallait donc que toutes les sections du site apparaissent sur la première page. Après plusieurs configurations qui mettaient toujours en importance une section plus qu’une autres, c’est la configuration à quatre colonnes qui a été retenue, où tous les éléments sont aussi importants les uns que les autres.

Ces quatre colonnes peuvent rappeler les touches du clavier d’un piano et chacune d’elles reproduit une note représentée par une section du site. Ainsi, les colonnes deviennent des onglets lorsqu’on quitte la page principale.

Les mots-clés du projet étaient sobre, subtil, créatif, mélodique, moderne et dissonant. Ces adjectifs s’appliquent tous au design final.

Thème par MA14. Fièrement propulsé par Wordpress