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.
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.
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.
du vrai html5, je veux dire
“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
“Une carte à découvrir de préférence avec un navigateur utilisant Webkit” Ahh ? Et pourquoi ça ?
€Peredur
tu veux parle de la balise Canvas ? car là, effectivement, c’est coder avec la balise liste
OUCH le rendu pourri sur IE10 !! la honte, même moi j’affiche correctement sur IE10, Safari, FF, Chrome,etc…
Sinon le svg était parfait pour ça, et encore plus W3C-compliant.
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 🙂
Ça passe très bien sur un Firefox.
Merci pour le conseil IE10, IE8 assure aussi !! Vive le monde Minecraft!! 😉
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.
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.
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
Le boulot de malade, ça doit claquer devant un recruteur s’il cherche du job
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 !
Il suffit de chercher “demos html5” dans Google pour en trouver
http://www.1stwebdesigner.com/freebies/html5-demos/
On dirait qu’il est passé par un IDE graphique
J’vois pas où est le problème de rendu O_o
@underground:
http://upload.wikimedia.org/wikipedia/commons/8/86/Geometric_Map_of_Paris_M%C3%A9tro.svg
que de feuilles de styles 0_0
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!