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 suis plus sur ce site, si ça vous intéresse (ce qui serait 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

                                                              [Atelier] Redesignez le Site du Zéro

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                              • Editeur
                                                              • Markdown