Passer au contenu

Le métro de Londres en code

Cette année, le métro de Londres fête ses 150 ans. 150 ans de bons et loyaux services, 150 ans de voyages… Le Tube en a vu…

Cette année, le métro de Londres fête ses 150 ans. 150 ans de bons et loyaux services, 150 ans de voyages… Le Tube en a vu passer des gens. Pour fêter ça, le programmeur John Galantini a décidé de recréer le mythique plan du métro de Londres entièrement en code.

Screenshot_7

Sur CSS Tube Map, tout ce que vous verrez n’est que du code, utilisant HTML, CSS et JavaScript. Une petite performance qui lui a tout de même pris plus de 120 heures de travail étalées sur 5 semaines et qui ne lui apporte rien, mise à part montrer ses compétences.

Une carte à découvrir de préférence avec un navigateur utilisant Webkit (donc pas Internet Explorer) à cette adresse.

🟣 Pour ne manquer aucune news sur le Journal du Geek, abonnez-vous sur Google Actualités. Et si vous nous adorez, on a une newsletter tous les matins.

21 commentaires
  1. C’est mal codé.
    C’est pas propre.
    Générateur de code depuis une ide graphique ?
    Le résultat aurait été beaucoup mieux avec un code beaucoup plus simple en html5.

  2. “Une carte à découvrir de préférence avec un navigateur utilisant Webkit (donc pas Internet Explorer) à cette adresse”

    En fait vu que ça marche sous Firefox ou Opera qui ne sont pas Webkit il vaut mieux dire que ça fonctionne pas sous Trident (moteur IE). Et encore ça doit fonctionner sous IE10

  3. “Une carte à découvrir de préférence avec un navigateur utilisant Webkit” Ahh ? Et pourquoi ça ?

  4. €Peredur

    tu veux parle de la balise Canvas ? car là, effectivement, c’est coder avec la balise liste

  5. OUCH le rendu pourri sur IE10 !! la honte, même moi j’affiche correctement sur IE10, Safari, FF, Chrome,etc…

  6. Le mec s’est quand même bien pris la tête à ne mettre aucune image. Genre pour les symbole handicapé il a mis uniquement du CSS.
    Ensuite coté JS il n’y a strictement rien. Afin si ! 6 fonctions pour rajouter du HTML.
    En gros le site c’est des listes et du CSS 🙂

  7. avec mon navigateur utilisant Gecko (Firefox) il n’y a aucun problème, et comme le dit Yolélé, il y a le SVG qui fonctionne très bien pour ce genre de chose.

  8. Aucun problème sur Chrome, mais c’est codé avec les pieds et le rendu est sacrément moche. Mais bon, bravo au gars qu’à passé 120h pour faire ça, c’est quand même pas rien, et bon nombre en saurai pas faire autant.

  9. Vous qui critiquez si-bien, faites la même chose avec le plan du métro parisien pour voir.
    comme dis l’adage :
    la critique est facile, mais l’art est difficile.

    a vous de jouer

  10. Mouais,

    Je ne voie pas où est la prouesse. Des balises classiques positionnées en absolu dans la CSS, une CSS tout ce qu’il y a de classique.
    C’est du temps, certes mais cela ne nécessite pas de compétences particulières.

    J’ai vu de vraies démos HTML5 avec de l’interaction et c’est carrément autre chose !

  11. Marche comme il faut sur Opera 🙂
    Le SVG aurait quand même été plus adapté…

    Merci le JDG de ne pas dénigrer les autres navigateurs, on se demande si vous êtes objectif en tant que journaliste!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Mode