Weblog.fr

Le scrolling parallax est une technique qui consiste a créer un pseudo-effet de 3D sur un environnement en 2D. Si vous avez déjà pu jouer aux premières versions de Sonic The Hedgehog, vous comprendrez de quoi je parle. Je me suis amusé, encore une fois avec JQuery, a créer un effet parallax sur une page d’accueil d’un site existant.

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

La tentation de recourir à des hacks est grande lorsque l'on commence à se lancer dans l'intégration d'un site web. Lorsque l’on s'aperçoit que la page développée s'affiche différemment d'un navigateur à l'autre, on se dit très souvent que c'est le navigateur (Internet Explorer pour ne pas le citer) qui interprète le code ou la feuille de style n'importe comment.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n'est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l'épreuve du validateur W3C. Ce n'est pas en insérant des "_width:" ou encore de "%margin:" dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J'irais même jusqu'à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j'avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l'intérêt sans ces soucis de compatibilité. Même si j'affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d'un navigateur à l'autre et surtout, comment y remédier.

Ce weekend, je me suis mis à tester la bête, plus précisément la version béta 1 disponible. Première chose qui frappe : c'est un navigateur dans la continuité d'un IE7 dans la forme. Il dispose d'une interface quasi-similaire même si quelques effets visuels ont été ajoutés et qui sont pour moi du domaine du gadget. La scrollbar horizontale est présente en permanence, ce qui est plutôt troublant et envahissant... Il y a toutefois la fonction Developer Tools (un Firebug-like) qui se révèle bien pratique mais qui était déjà disponible sous IE7. Donc du coté de l'ergonomie, pas de révolution.

Concernant la lecture des pages. Il y a quelques soucis comme par exemple son interprétation d'inputs dans les formulaires mais aussi dans la gestion des tailles de bloc. Rappelons qu'IE7 avait fait d'énormes progrès sur ce terrain. J'ai constaté également des problèmes de marge (margin) sur certaines pages web qui habituellement s'affichent très bien sur les autres navigateurs courants. La page de démarrage msn parle d'elle-même Des propriétés CSS ne sont pas implantées dans cette version telles que :first-letter, :first-line ou encore letter-spacing. La propriété propriétaire (ça se dit ?) de Microsoft "Opacity" ne fonctionne pas non plus, un comble... Coté Javascript, Microsoft souhaite avec cette nouvelle mouture améliorer l'interprétation des scripts et pallier les lacunes mais concrètement, je n'ai pas pu constater les avancées sur cette béta.

Mais ne crions pas au loup trop vite, il ne s'agit que d'une version béta. Le meilleur reste à venir... ou le pire...

Il n'y a pas à dire, il y a eu des progrès entre la version 1.0 de Illustrator et celle sortie récemment dans le package Creative CS3. C'est un vrai plaisir de travailler avec des outils aussi aboutis. J'aimerais porter votre attention sur le logiciel Pixel de Pavel Kanzelsberger. Dans la lignée d'un Photoshop, il permet de produire des réalisations graphiques ou des retouches d'images au format bitmap (et non vectoriel). Je l'ai testé personnellement et c'est un programme particulièrement abouti. L'avantage de ce programme réside en sa compatibilité avec les différents systèmes d'exploitation. Il est installable sur Windows, Mac OSX et les différents systèmes Linux. Il permet de réaliser bon nombre de fonctions dont on ne peut plus se passer dans Photoshop tel que l'export de l'image pour le web, la découpage par tranches, les options de fusion... Il ajoute même une fonctionnalité qui serait très pratique sur le logiciel d'Adobe. À la manière d'un système d'exploitation Linux, il met à disposition plusieurs espaces de travail. Ainsi on peut multiplier les projets sans souci Le logiciel est encore en phase Béta et doit être publié dans sa version finale en ce début d'année.

En réponse à : Babylon Design (le trackback ne marche pas)

Le XHTML (eXtended HyperText Markup Language) est, à l'instar du HTML, un langage de balisage. Sa syntaxe est basée sur la syntaxe du XML. Il existe différentes versions du XHTML :

• XHTML 1.0 Strict : Il ne gère que le contenu du document et non l'affichage. C'est le type de document à privilégier.
• XHTML 1.0 Transitional : C'est la passerelle entre le HTML et le XHTML. Il permet l'utilisation de balises liées à l'affichage.
• XHTML 1.0 Frameset : C'est le seul type de document qui autorise les frames. Logiquement, un document accessible ne doit pas inclure d'éléments frame donc à éviter...
• XHTML 1.1 : C'est une évolution du XHTML 1.0 Strict avec quelques balises qui ont été implantés ou modifiés.

Lors de la construction d'un document XHTML, il est important d'avoir à l'esprit que ce n'est pas l'apparence du site qui engendre le balisage mais bien le contenu de ce document.

Pour l'élaboration d'un document type, nous prendrons le XHTML Strict 1.0 comme référence. Nous ne gérerons que le contenu. Exit les propriétés d'affichage tels que bgcolor, color ou encore size. Nous éviterons, de ce fait, de placer l'attribut (tout à fait valide) style="" qui insère dans le document des propriétés CSS. Cela se fera dans une feuille de style externe. Le XHTML nécessite de se mettre en conformité avec certaines règles :

En lisant un article très intéressant de Marc Hertzog sur le futur navigateur de Microsoft, je me suis aperçu que Microsoft n'était décidément pas prêt de changer. Même si, dans l'article précédent, j'ai (quelque peu) défendu le fait qu'il faille continuer à développer pour IE, je m'aperçois qu'encore une fois, le futur IE va semer le trouble dans la conception web. Bien qu'il soit déjà reconnu pour être le premier navigateur Microsoft à respecter strictement les standards du web, cela ne se fera pas à n'importe quel prix. Il faudra, en effet, spécifier au navigateur qu'il devra basculer en mode standards à l'aide de cette balise méta :

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Microsoft a voulu, une fois de plus, de se démarquer des autres navigateurs en imposant sa syntaxe. Pourquoi devoir signaler au navigateur qu'il s'agit d'une page respectant les standards? De plus, je trouve particulièrement indécent de renseigner dans l'attribut "content" les initiales du futur Internet Explorer. Microsoft serait donc le pionnier en matière de standards du web? On m'aurait menti?

Sur Ajaxian, j'ai pu apprendre que les APNG (images au format PNG animés) seront supportés par le futur navigateur de Mozilla, Firefox 3. On se passionne alors de tout les côtés pour ce format d'image. Des discussions pleines de passions fleurissent sur les forums mais sans vouloir gâcher le plaisir, les concepteurs de site ne pourront l'utiliser et ce, pour plusieurs raisons :

• Ce format n'est supporté que par Opera 9.5 et donc bientot par Firefox 3 :
  Il est évident qu'ignorer les navigateurs tels que Safari, Konqueror, Nautilus et surtout Internet Explorer serait totalement insensé. Pourquoi utiliser l'APNG alors que le PNG est déjà très mal implanté sur Internet Explorer ?
• Un format beaucoup trop lourd
  Par curiosité, j'ai visité des sites présentant des PNG animés. C'est amusant mais quand on s'intéresse au poids des images, ça l'est tout de suite beaucoup moins. Sur le site AnimatedPng, j'ai pu trouver une petite image animée de 1 Mo, énorme non ?
• S'il fallait faire un choix, ce ne serait, pour ma part, pas celui de l'APNG
  Honnêtement, l'APNG n'est pas la solution à retenir si l'on souhaite réaliser une animation. Le Flash est beaucoup plus approprié. Certains pourront me dire : tout le monde n'a pas Flash Player. Certes, il y en a d'autres qui n'ont pas Javascript, ou d'autres qui surfent avec un navigateur web datant de la guerre 14-18 (hmmm...) ou encore d'autres qui n'ont pas de sèche-cheveux dans leur salle de bain. Et puis, en réalité, on se ferme à beaucoup plus de monde en utilisant l'APNG.
• L'APNG c'est encore une invention de geek
  Là je suis à court d'argument

En définitive, je pense que l'APNG n'aura pas un grand avenir sur le web étant donné les avantages limités face à d'autres techniques d'animations. Applaudissons tout de même Mozilla : intégrer ce nouveau format dans un navigateur est une vraie révolution (niark...).

• Voir l'article original : Animated PNG in Firefox 3