Après un petit congé billet, je me redécide à écrire un billet à l’occasion de la publication récente de la nouvelle version du site Duoh. Pourquoi ce site ? Parce qu’il est un exemple d’innovation en matière de webdesign.
Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.
Lire la suite
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.
Lire la suite
Si vous habitez Paris ou si vous ne faites qu’y travailler (comme moi), vous avez surement déjà eu l’occasion d’utiliser le service Vélib. Le site officiel ou d’autres sites indépendants comme Roulib.fr proposent des cartes permettant d’afficher le nombre de vélos disponibles ou encore le nombre d’emplacements restants. Je vous propose de faire la même chose grâce à l’API de Google Map.
Le principe est simple. On génère en local un fichier XML à partir du fichier distant présent sur le site officiel Vélib via PHP. Une fois cette étape effectuée, on a plus qu’à charger le fichier xml à l’aide de Javascript.
La page de démonstration du script utilise le framework jQuery mais vous pourrez trouver dans l’archive une version en javascript pur et une autre version associée à l’autre framework Prototype (Merci d’ailleurs à Sunny pour son aide 
)
Vous trouverez toutes les informations nécessaires dans les commentaires des différents fichiers javascript. N’oubliez pas d’aller générer une clé API Google Map sur le site dédié.
Pour pouvoir accéder à la carte et télécharger le script associé, rendez-vous sur la page de démo du script de carte Vélib. L’archive contient le script php pour générer les fichiers xml de la carte Vélib et des informations associées à chaque borne, les fichiers Javascript correspondants, la feuille de style CSS et les images requises.
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.
Lire la suite
Après avoir achevé la maquette définitive du site, je suis ensuite passé au travail le plus intéressant, celui de l’intégration. J’ai commencé par comprendre mon document. Qu’est-ce que ma page raconte ? Qu’est-ce qu’elle laisse transparaitre. Je peux ainsi mettre des noms sur les différents éléments présents dans la page : menu général du haut, titre de niveau 1, menu latéral des rubriques… Cette étape va me permettre de visualiser les différentes balises les plus adaptées aux différentes parties du document et délimiter les différentes zones (header, footer…).
Lire la suite
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…
Actuellement en plein travail sur un projet web, j’ai quelque peu délaissé mon carnet web. Je me suis dis que ce serait intéressant de raconter à la manière d’un journal de bord les différentes étapes de la création d’un site internet. Nous allons donc voir une réalisation web sous tous ses aspects.
Le sujet
Il s’agit d’un site internet pour une école privée. L’objectif est de faire connaître l’établissement. Le site internet sera un moyen de communiquer avec les familles. Il devra faciliter la prise de contacts avec les parents. L’ergonomie est au centre de ce projet. Le site doit disposer d’une navigation simplifiée au maximum, l’ensemble des sections doit être correctement délimité. On retrouvera notamment une partie « actualité », des articles plus spécifiques sur les activités de l’école et un agenda.
Concernant les contraintes techniques, le site devra disposer d’un espace d’administration simple d’utilisation. Les personnes qui mettront à jour le site ne seront pas des informaticiens. Il faut leur simplifier la tâche. Le choix d’un gestionnaire de contenu (CMS) se révèle judicieux sur le plan technique. Il faudra toutefois veiller à ce que ce gestionnaire ne soit pas une « usine à gaz » et qu’il réponde à l’ensemble des besoins.
Lire la suite
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)
Plus je m’intéresse à jQuery et plus je me rend compte des possibilités étendues de ce framework javascript. Je suis parfois bluffé par les effets visuels qu’il peut générer. Sur Dragon Interactive, on a presque l’impression de visiter un site à base d’animations flash mais il n’en est rien. C’est l’utilisation judicieuse des fonctions fadeIn() et fadeOut() qui donne cette sensation. Bon nombre de plugins viennent ajouter à ce framework d’autres fonctionnalités de la plus intéressante à la plus farfelue. Je suis récemment tombé sur le plugin jCycle qui permet des effets de transitions d’images assez intéressants.
De part l’intéret grandissant pour cette librairie javascript, j’ai décidé de casser ma tirelire pour m’acheter le livre Premières applications Web 2.0 avec Ajax et PHP de Jean-Marie Defrance et paru aux éditions Eyrolles. Ce n’est pas un ouvrage qui traite véritablement de la bibliothèque jQuery mais il consacre tout de même deux grands chapitres qui permettent d’apprivoiser la bête. A lire donc de toute urgence
Pour en savoir plus :
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 :
Lire la suite
Clearideaz