Country’s Blog

A tout ceux qui m’envoient des e-mails de remerciement, de félicitation, de suggestions pour ajaxload.info:

Merci

PS : Et aux 3 personnes qui veulent le racheter, j’attend vos offres messieurs :p

PPS : Ouai je sais, c’est une réponse un peu tardive vu qu’ajaxload a plus de 2 ans maintenant mais bon, je viens tout juste de répondre à mes e-mails du mois de Mars alors faut pas trop m’en demander

Rassurez-vous je ne vais pas vous parler de foot, juste vous présenter ce pour quoi j’ai beaucoup moins bloggué ces derniers temps, à savoir la nouvelle version du site PSG.FR

Lire la suite »

Hop, la 3ème édition du WaSP café aura lieue le 17 avril (inscrivez-vous !) avec, comme la dernière fois, 3 ateliers : Accessibilité, CSS et Sémantique ⁽¹⁾. La dernière fois j’avais choisi l’atelier Javascript et je n’avais franchement pas été déçu. Cette fois-ci j’ai choisi l’atelier CSS dont le thème est “Organiser et gérer vos CSS”, l’occasion pour moi d’évoquer ici comment j’ai choisi d’organiser les miens pour le dernier projet sur lequel je travaille. Lire la suite »

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