Country’s Blog

Bon, j’espère que vous n’êtes pas encore écœuré d’IE8, parce que vous allez en bouffer dans les jours qui arrivent
A l’occasion du Mix08 Microsoft a commencé à mettre de la doc en ligne pour IE8, et pas qu’un peu !

En plus du site Internet Explorer 8 Readiness Toolkit, ils ont mis en ligne pas mal de documentation sur les nouveautés d’IE 8 : Internet Explorer 8 Beta 1 Whitepapers

Je n’ai pas encore lu tout ça, mais le doc “Developer Tools” contient pas mal de screenshots de la nouvelle developer toolbar, qui semble être très proche de Firebug (Edit 2 : ou pas ).

Ha et si mes calculs sont bons, ils doivent publier la Beta à 21H ce soir ( 12:00 PST ça fait bien 21H chez nous non ?)

Edit : Ha bin en fait c’est déjà en ligne, enjoy !

Edit 2 : Bon, après un rapide test, il reste du boulot. Gardons la positive attitude, reportons les bugs, et croisons les doigts pour que tout soit réglé pour la version finale (j’ai déjà rapidement reporté 2 bugs).

Courage amis intégrateurs, le bout tu tunnel se rapproche (Edit 2 : ou pas ).

Finalement, après tout le bruit autour de X-UA-Compatible, l’équipe d’IE8 a décidée que par défaut IE8 affichera les pages avec le nouveau moteur (et donc le rendu le plus proche possible des standards). Le meta tag ne servira alors plus qu’à demander d’utiliser le moteur d’IE7 si jamais le site n’est pas compatible avec celui d’IE8, une sorte de patch le temps que vous corrigiez les erreurs.

C’est une décision qui me surprend de la part de Microsoft, après avoir clamé mainte fois “Don’t break the web” voila que tout compte fait, en fait si, cassons le un peu quand même ⁽¹⁾, mais ce n’est pas pour me déplaire

1. Par là que les anciens sites demandent une modification (même mineur) pour fonctionner correctement.

Vous vous demandez encore ce que c’est vraiment un intégrateur web ? Voila un très bon article qui devrait vous aider à comprendre ces drôles d’oiseaux :

La vie des intégrateurs, Chapitre I : Les intégrateurs sont-ils des développeurs ou des webdesigners ?

Et j’en profite pour ressortir d’autres articles sur le sujet :

• What does a front-end web developer do? (en)
  
• En quoi consiste le métier d’intégrateur Web ?

Après 5 jours (2 jours d’installation et 3 de Lan Party) me voila de retour de l’Atomic Re-SO 2008 à Mont-de-Marsan. Tout s’est très bien passé, on a réussi à corriger le tir par rapport à l’année passée. Petite déception tout de même : on n’a pas réussi à faire une retransmission live de l’événement sur le net , tant pis, ça sera pour la prochaine fois. De plus, j’ai eu quelques idées pour l’année prochaine, donc de nouveaux projets à venir sans doute
Donc me voila de retour sur Paris, je retrouve mon agrégateur qui a été délaissé depuis presque une semaine, j’ai du retard à rattraper : presque 1100 billets non-lus !

Enfin, pour ceux que ça intéresse, vous pouvez retrouver mes photos de l’événement sur Flickr (comme d’habitude les photos compromettantes sont limitées aux amis ).

Sur les sites à fort contenu éditorial on a souvent une liste d’actualités accompagnées d’une illustration, dans ce genre là :

La plupart du temps il s’agit d’une simple image placée avant le titre à laquelle on a donné un float:left.

#news li {
 clear:both;
}

#news img {
 float:left;
}

<ul id="news">
 <li>
  <img src="1.jpg" alt="" />
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 <li>
  <img src="2.jpg" alt="" />
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 [...]
</ul>

Hors ce n’est pas des plus logiques d’avoir l’image d’illustration avant le titre. Dans notre code l’image devrait être placée après le titre (elle pourrait aussi être placée après la description).

<ul id="news">
 <li>
  <h2>Lorem ipsum dolor</h2>
  <img src="1.jpg" alt="" />
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 <li>
  <h2>Lorem ipsum dolor</h2>
  <img src="2.jpg" alt="" />
  <p>Lorem ipsum dolor sit amet, ...</p>
 </li>
 [...]
</ul>

Ce qui, avec un float:left pose problème au niveau de la présentation souhaitée (le titre serai placé au-dessus de l’image).

La solution est d’utiliser le positionnement. Appliquons un positionnement relatif au conteneur de l’actualité (normalement un li si il s’agit d’une liste d’actualités comme ci-dessus) puis un positionnement absolu à l’image et plaçons la dans le coin supérieur gauche.

Petits détails supplémentaires :

• Ajouter un padding à gauche égal à la largeur de votre image (ou un peu plus grand si vous voulez une marge entre l’image et le texte) afin que le texte ne passe pas en dessous.
• Ajouter une hauteur minimum au conteneur, sinon, lorsque le texte sera trop court, nos actualités vont se superposer (hack pour IE6 afin “d’émuler” le min-height, si possible à mettre dans une feuille de style séparée avec des commentaires conditionnels).

A noter que l’ajout d’une hauteur permet d’activer le hasLayout sous IE6, ce qui corrige un bug par la même occasion (oui, un hack pour une chose corrige un bug pour une autre, IE6 est vachement bien pensé en fait…).

#news li {
 position:relative;
 padding-left:160px;
 min-height:90px;
 height:auto !important;
 height:90px;
}

#news img {
 position:absolute;
 left:0;
 top:0;
}

Vous pouvez voir le résultat final sur cette page.

Lors de la création d’un nouveau site ou la refonte d’un site existant, il est maintenant habituel d’abandonner la mise en page en tableau pour se tourner vers le positionnement en CSS. Hors, on voit encore trop souvent des personnes qui font la conversion table->div / font->span, ce qui fait que l’on se retrouve avec un document sans aucune sémantique. Lire la suite »

Hier soir j’étais avec Neovov au Wasp Café, 2ème édition de cette réunion autour de l’accessibilité et des standards.

Après une courte intervention de Tritan Nitot qui nous as présenté un résumé des tendances actuelles au niveau des plateformes (mobile), des navigateurs (Fx/Safari/IE8) et des standards (HTML5), j’ai assisté à l’atelier Javascript présenté par Éric Daspet.

Pas évident de nous refaire un atelier Javascript après que l’on ai assisté à celui de Chris Heilmann. Mais Éric nous a présenté une approche complètement différente. Ici, pas une ligne de code, seulement des réflexions et méthodes afin d’obtenir le résultat attendu avec Javascript activé et une bonne dégradation si il n’est pas activé.

Pour l’exemple nous avons étudié le cas de Yahoo! Sport (le menu déroulant, la boîte à onglet et les brèves) et d’autres cas plus génériques sur des tableaux (classement d’un tableau, conversion d’un tableau en graphique).

Enfin, on a terminé avec des méthodologies un peu différentes afin de servir la même page HTML à tous les visiteurs et y insérer les informations uniques à chaque visiteur via Javascript (dans notre exemple, les commentaires non-lus). Cette technique n’est pas utilisée dans la même optique que précédemment, ici, Javascript sert uniquement à compenser les limitations techniques côté serveur (ressources système, cache des pages) en personnalisant la page en fonction de l’utilisateur.

Dans la même optique, un article sur l’envoi des dates au format UTC côté serveur et leur localisation dans le fuseaux horaire de l’utilisateur en javascript sur le blog de Yoan Blanc (qui travail justement sur Yahoo! Sport, quel curieux hasard… ou pas).

Pour ma part je pense qu’il faut limier ces techniques aux sites à fort trafic où la mise en cache est un élément crucial, car après tout c’est juste un contournement du problème via Javascript (on épargne les ressources serveur en utilisant celles du client).

Enfin, pour conclure, ce fut une très bonne présentation, très complémentaire avec celle de Chris Heilmann à Paris Web.

Bien qu’ayant vraiment changé de format, ce Wasp café était très agréable, beaucoup de monde et des interventions intéressantes, ça se rapprochait vraiment d’un mini Paris Web. La prochaine édition est prévue fin avril (si je ne me trompe pas), soyez prêt

Chris Wilson nous donne un peu plus de précisions sur le “Standards mode” d’IE8.

Comme prévu, la compatibilité avec IE6/7 sera assurée via un meta tag qui fera passer IE8 en “Standards mode”. Nous aurons donc 3 comportements possibles :

1. “Quirks mode” remains the same, and compatible with current content.
2. “Standards mode” remains the same as IE7, and compatible with current content.
3. If you (the page developer) really want the best standards support IE8 can give, you can get it by inserting a simple <meta> element. Aaron gives more details on this in his article.

En parallèle du post sur IEBlog, Aaron Gustafson du WaSP-Microsoft Task Force publie un article sur A List Apart, un peu plus technique cette fois, qui explique plus en détail le comportement de ce meta tag.

Il se présente sous cette forme :

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

Je peux aussi l’envoyer via un en-tête HTTP :

X-UA-Compatible: IE=8

Dans ce cas, si j’arrive avec IE8, j’aurai le rendu du nouveau moteur d’IE8 (celui d’IE7 par défaut). Juste un petit “Hack” à insérer dans sa page et on a accès à un rendu digne de ce nom. Parfait.

Mais ils voudraient que les autres navigateurs implémentent le même “Hack”, en gros que je puisse dire “Je voudrai que mon site s’affiche avec le rendu de Firefox 2 même si le visiteur est avec Firefox 3″, vous imaginez la difficulté pour les développeur des navigateurs ? Ça signifie de conserver les anciens moteur de rendu de version en version… C’est amha impensable.

Ça colle pour IE dans ce cas là afin d’assurer la transition, mais c’est tout, ce n’est ni à appliquer à long termes ni à généraliser.

Le 28 janvier prochain je serai à la seconde édition du Wasp Café, ça va troller discuter standards, accessibilité, CSS, Javascript, etc.

Bref, une bonne soirée en perspective

Vous avez sûrement déjà fait un menu déroulant en CSS/(x)HTML (ul/li , :hover, etc. enfin vous voyez de quoi je parle).

Problème : sur ce genre de menu si vous essayer de naviguer au clavier, alors vous ne pouvez pas voir les liens des sous-menu. Alors voila un petit truc pour les afficher dans ce cas là. Lire la suite »