Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Redesignez le Site du Zéro

A la sauce web 1.0 ou web 3.0

31 juillet 2013 à 8:59:00

Bonjour tout le monde !

Je lance aujourd'hui un atelier pour les développeurs web, débutants et confirmés, dont le thème est le suivant :

Redesignez le Site du Zéro à votre manière


Rappel de l'atelier

Cet atelier consistait à redesigner une page HTML donnée pour la rendre web 1.0 (le web de notre enfance) ou web 3.0 (le web d'aujourd'hui). Merci à chacun(e) qui s'est prêté au jeu : nous avons exactement 50 créations au total. Certains se sont beaucoup investi, et j'espère que le but de cet atelier a été atteint, à savoir :

  • prendre du plaisir à coder
  • découvrir de nouvelles méthodes/fonctionnalités/techniques par le partage des connaissances

Résultats

Un grand bravo à tous les participants, et spécialement à ceux retenus dans la liste suivante :)

Vote du public

Pour la thématique web 1.0, une création s'est largement démarquée du lot : c'est celle de Hime. Le curseur personnalisé, les gifs animés, le Comic Sans MS, l'image en background en repeat sans aucune cohérence, tout y était pour un site digne du web 1.0 !

Pour la thématique web 3.0, les votes ont été plus serrés, puisque deux créations se partagent la première en ex-aequo : celle de alphadelta et celle de Xerophy. Bravo à eux.

Mes coups de coeur

Les designs responsive

Un grand bravo à ceux qui ont codé responsive : jQzz, mrf@bien06, Regz, nightmat, kawael, Jeekwiz, le pere ceval, Novax, LuciferX, alphadelta, Flagadouille, G-rem, Xerophy, DrManhattan, ainsi que tout ceux qui l'ont tenté, mais dont le résultat foire un peu ;).

Mais aussi...

  • Toxxiczad pour son curseur Zozor, qui vaudra cher dans quelques années sur OC
  • Roky974 pour son bouton d'extinction de l'écran (intile)
  • kawael pour sa version spéciale Noël
  • Toutounel : j'aime bien le concept, dommage que le sondage gène un peu
  • Umbra, EtienneTS1 et LuciferX pour leur CSS bien maîtrisé
  • lepetitcaramel pour un design illisible IRL mais néenmoins original

Voilà, merci encore et à bientôt pour le prochain atelier :)

Participations

Web 3.0 (40)

Pseudo..............................................Thématique.......Création
viki53web 3.0Lien
philigaweb 3.0Lien
Toxxiczadweb 3.0Lien
jQzzweb 3.0Lien
mrf@bien06web 3.0Lien
03t02web 3.0Lien
Regzweb 3.0Lien
ronamazonaweb 3.0Lien
don@77web 3.0Lien
jourdain.frankyweb 3.0Lien
efaanweb 3.0Lien
nightmatweb 3.0Lien
Roky974web 3.0Lien
kawaelweb 3.0Lien
youne25web 3.0Lien
Jeekwizweb 3.0Lien
Lesnico74web 3.0Lien
Toutounelweb 3.0Lien
le pere cevalweb 3.0Lien
Mr_Tainpweb 3.0Lien
Dimouweb 3.0Lien
Novaxweb 3.0Lien
Umbraweb 3.0Lien
redbuldonnedeswebmasterweb 3.0Lien
W-andrilleweb 3.0Lien
EtienneTS1web 3.0Lien
yoan1005web 3.0Lien
spanevweb 3.0Lien
safwen2web 3.0Lien
LuciferXweb 3.0Lien
alphadeltaweb 3.0Lien
itwasbalooweb 3.0Lien
Flagadouilleweb 3.0Lien
Nicolas44web 3.0Lien
ruben88web 3.0Lien
G-remweb 3.0Lien
gcyrillusweb 3.0Lien
Xerophyweb 3.0Lien
lepetitcaramelweb 3.0Lien
DrManhattanweb 3.0Lien


Web 1.0 (10)

Pseudo..............................................Thématique.......Création
le pere cevalweb 1.0Lien
Etoile Filanteweb 1.0Lien
Johan_Clbrtweb 1.0Lien
philigaweb 1.0Lien
elyppire933web 1.0Lien - #justforfun, ne pas voter pour celui-là :o)
Wyyrlokweb 1.0Lien
Matoucheweb 1.0Lien
Android30web 1.0Lien
alphadeltaweb 1.0Lien
Himeweb 1.0Lien

-
Edité par elyppire 16 septembre 2013 à 13:44:32

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
31 juillet 2013 à 11:04:24

Salut elyppire,

c'est dommage de faire ça au mois d’août, on se prive de certains talents qui vont partir en vacances.

Très joli les deux exemples web 1.0 ^^

  • Partager sur Facebook
  • Partager sur Twitter
Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
31 juillet 2013 à 11:05:57

Salut,

ronamazona a écrit:

c'est dommage de faire ça au mois d’août, on se prive de certains talents qui vont partir en vacances.

Que cela ne soit pas un problème, il pourra être prolongé si le besoin se fait sentir ;)

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
31 juillet 2013 à 12:47:14

Aaaaaah... Les GIFs animés, quelle belle invention tout de même :3
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
31 juillet 2013 à 14:49:44

Salut,

C'est super, pour une fois que nous avons un atelier sur le forum HTML/CSS :) ! Je participe :) !

Edit : Par balises HTML dépréciées, tu veux dire qu'on peut utiliser les balises dites « obsolètes », du type <center> <marquee> et tout ça ?

-
Edité par Anonyme 31 juillet 2013 à 15:04:54

  • Partager sur Facebook
  • Partager sur Twitter
31 juillet 2013 à 15:14:44

Bonjour,

intéressant comme atelier ! 

Les deux exemples du façon web 1.0 sont juste horribles ! :waw:

  • Partager sur Facebook
  • Partager sur Twitter
Mon site web  Pensez à faire une recherche avant de poster ! Je ne donne pas d'aide par message privé.
31 juillet 2013 à 15:16:34

Flori@n.B

Edit : Par balises HTML dépréciées, tu veux dire qu'on peut utiliser les balises dites « obsolètes », du type <center> <marquee> et tout ça ?

Tout à fait. Cet atelier est la pour partager (je pense à ceux qui choisiront la thématique web 3.0), mais aussi pour s'amuser. Tu peux donc abuser de ces balises obsolètes :)

-
Edité par elyppire 31 juillet 2013 à 15:16:45

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
Anonyme
31 juillet 2013 à 16:23:09

Obsolètes, ok, mais les balises qui n'ont jamais été reconnues (comme <marquee>, balise totalement inventée, sans aucune reconnaissance du W3C), on fait comment ? :-°

Bon, pour l'instant j'avance doucement. Je m'inspire de l'existant pour le modifier à ma sauce. Je suis pas designer de métier, je vous le rappelle (donc pas taper, siouplait, moi pas papiers, pas argent, pas français...).

==> http://dabblet.com/gist/6122404 

-
Edité par Anonyme 31 juillet 2013 à 16:24:58

  • Partager sur Facebook
  • Partager sur Twitter
31 juillet 2013 à 16:27:16

viki53 a écrit:

Obsolètes, ok, mais les balises qui n'ont jamais été reconnues (comme <marquee />, balise totalement inventée, sans aucune reconnaissance du W3C), on fait comment ? :-°

Faut-il que j'édite pour autoriser les balises obsolètes / dépréciées / inventées / farfelues / nimportnawak / ? :p

Merci pour ton WIP. Effectivement, il me rappelle quelque chose :-°

-
Edité par elyppire 31 juillet 2013 à 16:27:35

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
31 juillet 2013 à 21:32:35

Bonsoir,

Voici un petit essai à base de gris ; je n'ai volontairement rien ajouté à l'html.

Lien: http://jsbin.com/iquzeg/2/

 EDIT: c'est pour le thème web 3.0 en effet...

EDIT2: nouveau lien (v2): http://jsbin.com/iquzeg/4

-
Edité par philiga 1 août 2013 à 16:55:12

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
31 juillet 2013 à 21:56:39

J'ai noté ta participation dans la post initial.

Au passage, pensez à préciser autour de quelle thématique vous travaillez :) Merci.

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
31 juillet 2013 à 22:20:02

Allez je me lance en choisissant la façon web 3.0. ;)
  • Partager sur Facebook
  • Partager sur Twitter
Mon site web  Pensez à faire une recherche avant de poster ! Je ne donne pas d'aide par message privé.
Anonyme
31 juillet 2013 à 22:24:10

Suis-je le seul à partir sur un web 1.0 :( ?
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
31 juillet 2013 à 22:27:00

Flori@n.B a écrit:

Suis-je le seul à partir sur un web 1.0 :( ?

Si seulement je pouvais mettre la main sur une des premières versions de FrontPage... :p

[EDIT] CloudFlare fail. Boulets inside.

-
Edité par Anonyme 31 juillet 2013 à 22:28:32

  • Partager sur Facebook
  • Partager sur Twitter
31 juillet 2013 à 22:31:47

Flori@n.B

Suis-je le seul à partir sur un web 1.0 :( ?

Il y en aura probablement d'autres. Fais toi plaisir :)

viki53 a écrit:

Si seulement je pouvais mettre la main sur une des premières versions de FrontPage...

Utilise nvu (troll inside)

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
Anonyme
31 juillet 2013 à 22:39:49

elyppire933 a écrit:

Flori@n.B <script type="text/javascript">// (function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); // </script>

Suis-je le seul à partir sur un web 1.0 :( ?

Il y en aura probablement d'autres. Fais toi plaisir :)


J'espère :) !

En faite, toi Elyppire, tu participes aussi ? Ou tu fais juste l'organisation ?

  • Partager sur Facebook
  • Partager sur Twitter
31 juillet 2013 à 22:42:13

Je fais déjà l'organisation, mais c'est pas impossible que je sorte une petite créa web 1.0. D’autant que j'ai 3 semaines de vacances dès ce vendredi :)

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
1 août 2013 à 15:15:12

C’est malin d’utiliser JSFiddle pour un atelier sans JS… :-°
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
1 août 2013 à 15:19:38

Je suis dégouté, hier soir j'ai bossé un peu dessus, sans sauvegarder (Dabblet enregistre théoriquement en local régulièrement). Et puis en étant passé à autre chose j'ai quitté Chrome au hasard d'une fausse manip'...

Résultat : toute mon avancée perdue. Autant des fois j'ai le réflexe du Ctrl+S (ou Cmd+S dans mon cas) dans des cas inutiles, autant là je l'ai pas eu une seule fois...

Y'a un p'tit chinois dans le coin pour le refaire à ma place ? :D 

-
Edité par Anonyme 1 août 2013 à 15:22:00

  • Partager sur Facebook
  • Partager sur Twitter
1 août 2013 à 15:24:26

J'y participe ! En web 3.0 et, si jamais j'ai un peu de temps, pourquoi pas en 1.0, mais ce sera plus tard ;) !

J'éditerai mon post dès que j'aurai terminé ma maquette !

  • Partager sur Facebook
  • Partager sur Twitter
Musicien & graphiste amateur !
1 août 2013 à 15:30:42

Je participe! En façon web 1.0

-
Edité par Etoile Filante 1 août 2013 à 20:10:41

  • Partager sur Facebook
  • Partager sur Twitter
"Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
1 août 2013 à 15:41:56

Salut,

J'ai fais une petite version 1.0 ici . :)

Le design est optimisé pour une résolution 640 * 480 ( Ben oui, c'est du 1.0 ) .

Je n'ai utilisé que des couleurs basiques, le résultat est assez moche, mais c'est voulu :p.

  • Partager sur Facebook
  • Partager sur Twitter

Je ne visite plus ce site, si ça vous intéresse (ce qui serait très curieux), lisez ma bio.

1 août 2013 à 15:52:43

j'ai une petite idéee pour le 3.0 . si j'ai le temps je proposerai un vrais 3.0 :D
  • Partager sur Facebook
  • Partager sur Twitter
Venez donner votre avis sur le projet Lived. Réalisez, créez et partagez vos succès avec www.lived.fr
1 août 2013 à 15:52:55

Bonjour,

Je me lance en façon 3.0 !

Bonne continuation, Fabien

  • Partager sur Facebook
  • Partager sur Twitter
Création de site web et référencement à Lannion & Brest | useroom.com
1 août 2013 à 15:53:16

@Nicolas M. : rhôôôô, méchant. En plus, j'ai précisé "...ou celui de votre choix" :)

@viki53 : désolé pour toi. Pensez à toujours garder une copie en local, en plus sur ces éditeurs en ligne un visiteur lambda peut modifier( bon normalement y'a un système de versioning, mais on est jamais trop sûr).

@Lesnico74 et à chacun : évitez d'éditer vos posts : je ne suis pas notifié lors des edit.

@le pere ceval : je t'ai rajouté ;)

-
Edité par elyppire 1 août 2013 à 15:55:00

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
1 août 2013 à 16:06:37

Je me lance aussi ! Ce sera en Web 3.0, et le résultat sera régulièrement mis à jour ici :)

@le pere ceval : Ouh là, les exemples cités dans l'intitulé du post n'ont qu'à bien se tenir !

A vos balises... prêts... CODEZ !

-
Edité par Toxxiczad 1 août 2013 à 16:07:58

  • Partager sur Facebook
  • Partager sur Twitter

United we run, divided we crawl.

Anonyme
1 août 2013 à 16:10:15

C'est bon, j'ai pu rattraper un peu. Heureusement que j'ai bonne mémoire. ^^ 

@elyppire933 : Le Dabblet est lié à mon compte GitHub, donc il y a pas vraiment moyen pour un passant de le modifier. Et puis la flemme de coder en local pour si peu...

  • Partager sur Facebook
  • Partager sur Twitter
1 août 2013 à 16:53:56

Bonjour elyppire933,

Peux-tu changer le lien de mon code (dans la rubrique web 3.0) par celui-ci : http://jsbin.com/iquzeg/4

Je viens en effet de corriger 2 petits bugs qui faisaient mal s'afficher mon code sur Firefox (habitué à Chrome, je n'ai pas toujours le réflexe d'aller tester les autres...).

Pardon pour le dérangement, je n'y touche plus cette fois, d'autant que j'ai visé plutôt la sobriété.

Le concours a l'air de plaire sinon ; excellente idée !

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
1 août 2013 à 16:57:11

Je participe a la v3.0 !

Philiga sous Chrome ton border bottom m'affiche un trait noir tout le long du menu, est-ce voulu ?

-
Edité par pabneg 1 août 2013 à 16:57:56

  • Partager sur Facebook
  • Partager sur Twitter
1 août 2013 à 16:57:17

@philiga : fait !

  • Partager sur Facebook
  • Partager sur Twitter
Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP