L’année passée, après plusieurs semaines à me faire baver devant des photos d’expéditions en montagne, je cédais à la tentation de réaliser l’ascension du Mont-Blanc par les 3 monts avec 3 vrais rustiques et inscrire ce défi comme un des moments les plus inoubliables de mon modeste parcours!

Cette année, il aura suffit d’un lien posté par Martin Dellicour (pote, excellent graphiste, photographe et amateur de chouette design devant l’éternel) sur Facebook et reposté sous forme d’un défi à mes contacts pour que tout s’emballe et que, en quelques heures, j’embarque Aurélien Letawe, Grégory Charlier et Frédéric Lemoine dans un chouette double défi: l’OXFAM Trailwalker 2012.

L’OXFAM quoi? L’OXFAM Trailwalker, une marche de 100km à travers les Hautes Fagnes, par équipe de 4 personnes et dont l’objectif est double :

• Physique : parcourir les 100km du tracé en moins de 30 heures à partir du samedi 25 août 2012;
• Solidaire : récolter minimum 1500 euros de dons directs à OXFAM et contribuer ainsi à donner de la résonance à leur projet et faire avancer un peu la solidarité.

Un peu d’histoire

La première édition du Trailwalker a eu lieu en 1981 à Hong Kong. Il s’agissait d’un entraînement destiné aux Gurka’s, des brigades faisant partie de l’armée coloniale britannique. En 1997, lorsque la Grande-Bretagne a rétrocédé Hong Kong à la Chine, les Gurka’s sont retournés sur le sol britannique. Oxfam Hong Kong a alors repris l’organisation de cette marche sur le territoire chinois.

Depuis, le Trailwalker n’a cessé de grandir pour devenir l’un des plus importants évènements sportifs par équipe à travers le monde. Actuellement,  il est organisé dans 12 pays : Hong Kong, Nouvelle-Zélande, Irlande, Grande-Bretagne, Australie, Japon, Canada, Pays-Bas, France, Allemagne, Intermón Oxfam (Espagne) et en Belgique. Et cette année 2012,  l’Inde va également faire partie de l’aventure.

The Walking Dads

4 jeunes pères un peu gaga de leurs filles/fils… Voilà de quoi donner un chouette thème pour un nom qui nous convient bien : The W4lking Dads. Quelques essais de logos et un dossier de sponsoring plus tard, l’équipe est fin prête pour attaquer l’entraînement et la collecte de fonds.

Marcher 100km en 30 heures, cela ne s’improvise pas. Même pour des personnes qui pratiquent un sport régulièrement, encaisser cet effort physique et mental demande un minimum de préparation même si on ne parle pas ici d’un Ironmen 😉

Au programme : un entraînement individuel régulier pour l’endurance et des marches en équipe tous les 15 jours dans le cadre magnifique des Hautes Fagnes. L’occasion pour l’équipe de trouver son rythme, de discuter des actions pour la récolte de fonds et de re-découvrir les bienfaits d’une des plus anciennes activités de l’homme : la marche.

Retrouvez toutes les photos de nos entraînements sur la page Facebook de l’équipe

Suivez-nous, soutenez-nous!

Notre projet titille vote curiosité? Suivez-nous sur Facebook pour en savoir plus sur la progression de l’équipe, découvrir des idées de marches sympas et évidemment, soutenir un projet solidaire qui vaut le coup!

Comment nous soutenir?

• Aimez notre page Facebook et donnez de la résonance à notre projet: http://www.facebook.com/TheWalkingDads
• Faites un don direct à OXFAM via notre page OXFAM;
• Vous connaissez une entreprise qui pourrait être intéressée par une chouette visibilité? Donnez-nous leurs coordonnées, nous leur enverrons notre dossier sponsoring;
• Venez nous soutenir lors du jour-J aux côtés de 800 autres participants.

J’en profite pour remercier nos généreux sponsors: etilux, Jn-Joy, DKD, EPIC, Kineo, Quatuor, Leidgens sprl, Uhoda, Diederickx JF sa, ainsi que tous les dons privés déjà reçus… 100x merci!

Et parce qu’on ne sait jamais, voici même une version portable (PDF) de vos moyens d’actions pour nous aider: Soutenez The Walking Dads

http://www.epicagency.net

“Ce n’est pas du jeu” diront certains, “vous postez juste un screencast et c’est tout”… et c’est important pourtant! En effet, on s’était fixé comme objectif ambitieux d’avoir une version stable du jeu de lancement EPIC pour le 1er juin et c’est le cas! Par contre, on n’avait pas prévu de revoir à la hausse les fonctionnalités du jeu et encore moins les possibilités d’interaction. Du coup, si le jeux est stable, il faut encore affiner le levelling histoire d’avoir quelque chose de sympa à la sortie.

Avant toute chose, ca va consister en quoi ce “jeux”? Si vous regardez attentivement la vidéo, on apprend que c’est un jeu de plateau au tour par tour via Twitter uniquement (on a prévu un mécanisme pour ne spammer vos timelines et celles de vos contacts, c promis) pour déterminer qui des valeureux guerriers spartes est le plus brave, le plus fort… le plus héroïque.

Mais ce n’est pas tout, on a prévu des surprises dans le jeu et, si ils/elles confirment leur participation, des guest-stars que l’on espère sympas et motivées ainsi que des lots pour les meilleur(e)s d’entre vous!

La durée, les règles… tout cela viendra très très vite croyez-moi… En attendant, affutez vos lances, lustrez vos boucliers parce que le moment est proche!

Depuis ce soir, c’est officiel! Dans 25 jours il se passera quelque chose d’EPIC sur www.epicagency.net.
D’ici là, jettez un oeil attentif et régulier au blog d’EPIC (blog.epicagency.net) pour suivre ce qu’il se trame en coulisses.

Et pour conclure: http://www.youtube.com/watch?v=QkWS9PiXekE

1. A Quatuor / Epic Web Agency: Ces deux activités m’occupent l’équivalent de 2 temps plein (et je n’exagère pas…) et se développent très bien donc je ne me plains pas mais c’est évidemment au détriment de ce site;
2. A twitter / Facebook / LinkedIn / etc.: Ces réseaux sociaux consomment un temps dingue pour être maintenu en activité. Comme l’a dit je ne sais plus qui, j’ai parfois l’impression que la blogosphère a un peu été désertée comme lorsqu’un café passe de mode et que tout le monde se retrouve dans celui du bout de la rue. Résultat: ma très modeste contribution à la surabondance de contenu sur le web s’est transformée en petit message de 140 caractères publiés tout au long de mes journées.
3. A ma fille: … Qu’on se comprenne, si elle devait m’empêcher complètement de twitter/bloguer/etc, je ne m’en plaindrais pas mais soyons lucide, la vie de famille (aka “La vraie vie!”) demande du temps, aussi!
4. A World of Warcraft, A cause de Plus Belle La vie, A cause de la mort de Michaël, etc. 😉

Beau? pas beau? Pratique, pas pratique? Peu importe, il y aura toujours du pour et du contre mais dans tous les cas, j’ai une pensée affectueuse (si si) pour les personnes en charge du graphisme de ce genre de site parce que, franchement, c’est quand même flippant de se dire qu’à chaque changement graphique, c’est des millions d’utilisateurs lambda comme moi qui vont y aller de leur petit commentaire (hé, une phrase de 4 lignes…). Alors, ben, je compatis!

Pour celle et ceux qui ne connaîtraient pas facebook, c’est par ici et par ici pour mon profil.

PS: Pour quand même donner mon avis, j’aime beaucoup la nouvelle page “profil” avec l’outil publisher et les onglets pour mieux organiser son info personnelle, excellente idée je trouve!

1. Acheter une de ces machines pas très sexy, qui nécessitent une demi-journée d’installation et des heures de mises à jours… Bref, faites l’acquisition d’un PC équipé de Windows XP et installer Internet Explorer 6… Comment? Il est installé par défaut?! Quelle idée… 😉
2. Construiser votre site en prenant soin de produire un code bien valide et en respectant les recommandations en terme d’utilisation des balises XHTML. Durant cette étape, il y a beaucoup de chances que vous ayez à construire un menu et que celui-ci contienne des liens. Pour peu que vous cherchiez à faire un menu un peu travaillé, vous utilisirez certainement un code similaire à celui-ci:

<ul>
<li><a >Lien Menu 1</a></li> <li><a >Lien Menu 1</a></li>
</ul>

et un CSS similaire à celui-ci:

ul { position: relative; width: 200px; height: 35px; ... }
li { width: 25px; height: 35px; ... }
a { width: 25px; height: 35px; display: block;
background-image: url('mon_fond_de_bouton.jpg'); ... }

On pourrait discuter sur la syntaxe et l'emploi du backgroun-image dans le a, mais soyons consistant: pourquoi mettre le background du bouton dans le li alors que son contenu est lié à la balise A (ex.: si l'image contient le texte du lien)?

Avec ce code, vous obtenez un zoli menu et si vous ajouter un A:hover dans le css, vous le rendez même un rien dynamique.

3. Installer le magnifique, pratique, léger, facile à employer, cool,... Moo.fx ou Moo.tools, c'est kiffe-kiffe... Utilisez donc ce magnifique librairie Javascript pour animer votre menu et commencez à naviguer sur le site... BOOOM! Le site freeze, ne répond plus, affiche parfois une erreur 404 et il ne vous reste plus qu'à redémarrez IE en vidant au préalable sa cache.

Mais alors, que s'est-il donc passé? Revenons sur les 3 étapes:

1. Il semblerait que certaines versions de IE (6.xxx) présentent un bug au niveau de l'affichage de la balise A (dixit Quirksmode.org). En deux mots: si vous utilisez le display:block et le background-image dans la balise A, combiné (mais ça peut foirer sans ça) avec un conteneur parent (ici, ul/li) en position:relative et vous remarquerez alors que IE fait clignoter un peu le lien lorsque vous passez dessus avec la souris!

Quand on sait, que le display:block et le background-image sont quasiment (ok, il y a le line-height, aussi, mais c'est moins logique) indissociables pour afficher un lien avec la taille de son arrière-plan, on se demande comment IE peut produire un tel bug.

Jusqu'ici rien de grave, IE fonctionne bien même avec ce bug mais...

3. L'utilisation de Moo.fx semble provoquer, combinée avec le bug ci-dessus, une utilisation anormale de mémoire par IE qui causerait alors le "crash" expliqué ci-dessus. Moo.fx avait déjà rencontré ce genre de problème mais le bug avait été corrigé directement et les étapes ci-dessus emploient la version corrigée. Le plus marrant, c'est que même si le bug du A (cf. point 1.) a lieu sur un lien non présent dans le menu animé, il suffit que le menu soit en cours de déroulement quand vous passez sur le lien et Booom!

La solution?

Elle est très simple: Intégrer votre background-image dans une autre balise mais laissez le display:block dans la balise A. Dans notre exemple:

li { width: 25px; height: 35px;  background-image: url('mon_fond_de_bouton.jpg'); ... }
a { width: 25px; height: 35px; display: block; ... }

Et quand il n'y a pas de LI pour y insérer le background-image? Dans ce cas, on utilise une image à la place du lien :

<a ><img /></a>