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
Actuellement 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.
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?
Internet Explorer fait l’objet de nombreuses critiques, on l’accuse de tous les maux, on le dénigre. Et pourtant, force est de constater que nous en sommes totalement dépendant lors du travail d’intégration web. Je suis souvent stupéfait des débats suscités par le navigateur. Je suis la plupart du temps amusé de lire par-ci par là des billets d’humeur d’intégrateurs se demandant sur leur blog si l’on doit continuer de développer pour Internet Explorer. D’autres vont jusqu’à affirmer qu’il ne faut plus prendre en compte Internet Explorer parce qu’il ne respecte pas les standards.
En règle générale, ces discussions ne mènent pas loin et suscitent beaucoup plus de réactions que de véritables réflexions sur la question de fond. Selon moi, elle ne devrait même pas se poser surtout si l’on doit réaliser un travail d’intégration sur un site de grande ampleur. S’il s’agit d’un site personnel ou expérimental, libre à celui qui le décide de ne développer que pour les navigateurs respectant les standards. Autrement, on ne peut pas priver les 70 % des personnes utilisant le navigateur de la firme de Redmond.
Lire la suite
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…).
Sur le web, les sites respectant les règles de validités W3C fleurissent, mais pour ce qui est des sites accessibles, les progrès sont lents.
Que faut-il faire exactement pour rendre son site accessible?
Nous allons voir brièvement une liste d’éléments à intégrer dans le code XHTML pour permettre à son site de respecter les contraintes d’accessibilité.
Bien organiser son document XHTML
Un document accessible se doit de respecter une certaine logique. On ne doit surtout pas organiser son contenu en fonction de l’apparence graphique du site. C’est la méthode qui était utilisée lorsque l’on construisait des structures graphique à l’aide de tableau. Il faut veiller à ce que le document soit lisible sans la présence de feuilles CSS. On respecte impérativement l’ordre logique des balises (<h1>, <h2>, etc…). Le titre du site et de la page consultée doit se trouver en haut du document suivi du menu principal. On passe ensuite au contenu et enfin le pied de page.
Veiller à ce que le titre de la page change
Cela parait peut être anecdotique mais la balise <title> est très importante pour les personnes ayant des déficiences visuelles. Cela leur permet de mieux se repérer dans les différentes pages du site internet. Si vous laissez le même titre pour chaque page, il sera complètement perdu. Et puis, prendre la peine de mettre des beaux <title> en fonction du contenu, ça fait déjà plus sérieux
Lire la suite
Clearideaz