Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Une carte Vélib grâce à l’API Google

8 commentaires

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.

Les hacks c’est pas bien !

15 commentaires

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

Récit d’une création de site internet (2ème partie)

4 commentaires

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

IE 8 Beta, oui mais…

0 commentaire

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…

Récit d’une création de site internet (1ère partie)

2 commentaires

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

Un Photoshop-like multi-plateforme

0 commentaire

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)

Viva jQuery et mon livre de chevet !

2 commentaires

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 :

Construire un document XHTML

0 commentaire

xhtml, c'est chaud !!!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

Mon livre de chevet du moment

4 commentaires

120225075168_transcendercss_tnActuellement je lis Transcender CSS, un livre d’Andy Clarke qui est l’un des designers web les plus doués. Il participe notamment au groupe de travail du W3C et à déjà publié des articles sur le fameux site A List Apart. C’est LE livre que j’attendais depuis longtemps. Cet ouvrage, très illustré (j’adore…), traite du webdesign à l’aide des feuilles de style CSS. Ma partie préférée concerne l’élaboration d’un design web à l’aide d’une grille (c’est d’ailleurs ce que j’ai utilisé pour le design de ce blog…). Andy Clarke évoque également les micro-formats, les règles de base d’accessibilité. Le point de vue de l’auteur est parfois discutable mais je pense que Transcender CSS peut être considéré comme une référence en terme de publication sur le graphisme web via CSS. Un livre à mettre donc entre toutes les mains des webdesigner.

Les standards selon la firme de Redmond

7 commentaires

Un IE sous acide :)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?