Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Site web] Spreadnet chat, chat par thèmes

Spreadnet chat vous permet de parler de n'importe quel sujet choisit

    12 février 2014 à 18:38:10

    Bonjour, je suis un jeune développeur de 16 ans. Au début, j'avais décidé de créer un chat online pour m'améliorer lors de mon apprentissage du php. Puis passer au javascript dans lequel j'ai recréé Doodle Jump (présent dans le site), toujours pour l'apprentissage. Après avoir atteint un certain seuil de jouabilité dans Doodle Jump j'ai eu l'idée de créer le site que je vais vous présenter Spreadnet chat

    Spreadnet chat greenlogo

    En savoir plus sur le projet

    J'ai eu l'idée de créer Spreadnet Chat en lisant des quotes sur DTC et en me disant que lors de rencontres sportives ou débats, les supporters ou débattants pouvaient se parler en direct et en toute simplicité avec un éditeur WYSIWYG (What You See Is What You Get).

    Spreadnet Chat vous permet de choisir un salon qui définira le thème de la discussion, vous choisissez un pseudo puis un email ou un mot qui générera votre avatar (grâce à gravatar). Vous pouvez voir qui est connectés sur le salon, jouer a Doodle Jump si il n'y a personne.

    Plus tard, il y aura des nouvelles fonctionnalités comme par exemple :

    - Parler à une personne en privé (sous le bandeau publicitaire).
    - Un top n(<= x nombre) dans le salon où il y a le plus de monde.
    - Une fonction recherche.
    - création de compte.
    - Possibilité de modérer un salon temporairement.
    - Pouvoir signaler des messages.
    - modérer son salon.
    - un mode Streaming (diffuser une vidéo et discuter).

    Si vous avez d'autre(s) idée(s)/fonctionnalité(s)/design n'hésitez pas à le dire et à proposer. Si vous rencontrez des bugs idem (de préférence avec le message qui s'affiche sur la console). Vous pouvez aussi exprimer votre avis sur le design, la facilité d'utilisation ou autre.

    Si vous avez aimés ce projet, vous pouvez me suivre sur les réseaux sociaux et en parler à votre entourage.

    FB spreadnet G+ spreadnet

    À bientôt surSpreadnet chat greenlogo 

    Et merci de votre écoute.

    -
    Edité par Ender-events 19 mars 2014 à 18:30:02

    • Partager sur Facebook
    • Partager sur Twitter
    Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
    Anonyme
      14 février 2014 à 10:04:54

      Bonjour, pour commencer je pense que votre présentation n'est pas assez longue il faut rajouter beaucoup plus de chose.

      Et coté site franchement le design n'est pas du tout attirant.

      • Partager sur Facebook
      • Partager sur Twitter
        14 février 2014 à 17:41:59

        kiretha a écrit:

        Bonjour, pour commencer je pense que votre présentation n'est pas assez longue il faut rajouter beaucoup plus de chose.

        Et coté site franchement le design n'est pas du tout attirant.


        Ok je vais développer la description.

        Mais pour le design, qu'est-ce que tu n'aime pas, les couleurs, la disposition des éléments ou le flat design(en théorie c'est du flat design).

        Et pour ceux qui on visité le site, comment l'avez trouvez niveau design.

        • Partager sur Facebook
        • Partager sur Twitter
        Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
        Anonyme
          14 février 2014 à 22:31:28

          Du flat design ? Ce n'est pas tout à fait ce comment je qualifierais le design actuel. Le flat design se caractérise par une absence d'ombres portées, de dégradés et par l'usage intensif de polices contrastées.

          Par exemple les ombres sur le bouton "Recherche" et sur certains textes ne font pas vraiment flat. De plus, utiliser des boutons orange ça fait un peu bizarre sur du vert, surtout avec une bordure rouge pur sur le côté du formulaire de connexion. Il faut donc revoir l'harmonie des couleurs.

          De plus, à beaucoup d'endroits, ça manque de padding sur les côtés. Il vaut mieux espacer un peu le contenu quitte à prévoir le coup pour les écrans plus petits. Par exemple à droite entre le contenu et la pub, dans le contenu entre le texte et les bordures, entre les stats et le contenu.

          Au niveau des polices, je vois dans ta feuille de style que tu utilises Segoe UI, ce qui n'est pas un mauvais choix en soi, mais - goût personnel sans doute - je la trouve moins jolie en gras qu'en light.

          Il subsiste, enfin, quelques fautes d'orthographe sur le site, et sur la page d'accueil.

          Sinon, au niveau du contenu du site lui-même, le principe de chat par salles n'est pas mauvais en soi, surtout si cela permet de discuter de l'actualité... mais que vient faire Doodle Jump-like là dedans (qui n'est pas très maniable au passage :p ) ?

          • Partager sur Facebook
          • Partager sur Twitter
            14 février 2014 à 23:31:32

            m@tteo78 a écrit:

            Du flat design ? Ce n'est pas tout à fait ce comment je qualifierais le design actuel. Le flat design se caractérise par une absence d'ombres portées, de dégradés et par l'usage intensif de polices contrastées.

            Par exemple les ombres sur le bouton "Recherche" et sur certains textes ne font pas vraiment flat. De plus, utiliser des boutons orange ça fait un peu bizarre sur du vert, surtout avec une bordure rouge pur sur le côté du formulaire de connexion. Il faut donc revoir l'harmonie des couleurs.


            En fait c'est plus de flat design long shadow (y a un nom pour chaque design:D). Pour les couleurs je vais y réfléchir, dans le meilleur des mondes on pourra choisir sa couleur de fond comme sur outlook.com/Win8 mais dispo vers la fin du développement. Pour les bordures je vais changer pour noir.
            Si vous avez d'autre idée sur les compositions des couleurs/ charte graphique, je suis tout ouï.

            m@tteo78 a écrit:

            De plus, à beaucoup d'endroits, ça manque de padding sur les côtés. Il vaut mieux espacer un peu le contenu quitte à prévoir le coup pour les écrans plus petits. Par exemple à droite entre le contenu et la pub, dans le contenu entre le texte et les bordures, entre les stats et le contenu.

            Normalement la pub doit prendre un peut plus de place et compléter les 300px mais pour faire marcher pandad.eu j'utilise leur service.
            Pour les paddings, je vais m'y mettre.

            m@tteo78 a écrit:

            Il subsiste, enfin, quelques fautes d'orthographe sur le site, et sur la page d'accueil.

            Je vais faire de mon mieux. (il doit aussi y en avoir dans ce message :-°)

            m@tteo78 a écrit:

            mais que vient faire Doodle Jump-like là dedans (qui n'est pas très maniable au passage :p ) ?


            Je l'avais crée comme passe-temps puis je l'ai mis car quand tu est tout seul sur le site, rien ne te retient maintenant y a Doodle Jump-like (mal optimisé, faut pas un vieux pc pour jouer et des fois il manque une plateforme et pas encore trouver le bug).

            -
            Edité par Ender-events 15 février 2014 à 0:40:10

            • Partager sur Facebook
            • Partager sur Twitter
            Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
              15 février 2014 à 1:34:56

              Faut bien avoué que le logo style "Vieux Paint de XP ou Vista" j'aime vraiment pas... Sinon le principe en lui même est vraiment sympa! :)
              • Partager sur Facebook
              • Partager sur Twitter
                15 février 2014 à 10:33:44

                Logo à changer
                • Partager sur Facebook
                • Partager sur Twitter
                APPRENDRE SASS DE A - Z mon cours sur udemy
                  15 février 2014 à 11:39:24

                  Bartmaniaque a écrit:

                  Faut bien avoué que le logo style "Vieux Paint de XP ou Vista" j'aime vraiment pas... Sinon le principe en lui même est vraiment sympa! :)

                  Milrer a écrit:

                  Logo à changer


                  Je suis d'accord (je suis plus programmer que que designer), j'ai un ami qui penser à d'autre logo. Est pour le favIcon ?
                  En attendant je vais "lisser" le logo.

                  -
                  Edité par Ender-events 18 février 2014 à 0:07:59

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
                  Anonyme
                    15 février 2014 à 14:01:19

                    Concernant le favicon, tu peux laisser juste une des bulles vertes j'imagine.
                    • Partager sur Facebook
                    • Partager sur Twitter
                      17 février 2014 à 17:15:37

                      Mis en place de url_rewrite le lien pour le salon est maintenant chat.spreadnet.fr/channel/(nom du salon)
                      • Partager sur Facebook
                      • Partager sur Twitter
                      Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
                        24 février 2014 à 13:52:21

                        Tout se qui veulent parler de la serie évenement RDV à 20h45(environ) sur France 2 et se salon pour broad church.

                        Faite vos hypothèse sur le coupable!

                        P.S: Un systeme de création de compte est en cours de création avec le protocole oauth 2.0 avec un compte Microsoft au début puis Google et puis Facebook. Les compte invités seront toujours disponible.

                        • Partager sur Facebook
                        • Partager sur Twitter
                        Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
                          9 mars 2014 à 13:56:12

                          Le design est juste à refaire entièrement, conseil d'ami ;). Personnelement, rien que ça me donne envie de dégager...

                          Sinon je kiff ton doodle jump, c'est fait en JS?

                          • Partager sur Facebook
                          • Partager sur Twitter
                            9 mars 2014 à 15:01:24

                            mattis25 a écrit:

                            Le design est juste à refaire entièrement, conseil d'ami ;). Personnelement, rien que ça me donne envie de dégager...

                            Tu peut me dire ta resolution car mon site n'est pas du tout optimiser pour ceux qui on moins de 1366 x 768
                            Qu'est qui te plait pas ? La couleur ? Le Logo (j'ai pas d'idée mais je suis d'accord) ?

                            mattis25 a écrit:

                            Sinon je kiff ton doodle jump, c'est fait en JS?


                            100% JS, 0% flash

                            Niveaux avancement, on peux s'inscrire avec un compte MS ou sans service tiers (officieusement), je crée en se moment un meilleur header (la partie ou il y a se Connecter) puis un systèmes de profil et pouvoir modérer, puis les inscription seront officiellement ouverte.

                            -
                            Edité par Ender-events 9 mars 2014 à 16:09:31

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
                              19 mars 2014 à 16:56:52

                              Salut,

                              L'ajax c'est bien quand tu as 10 personnes, mais à 100 voir plus, sa bouffe une quantité de ressource énorme :
                              1 requête toute les secondes multiplié par Y personnes, je te laisse imaginer...

                              La solution, c'est le WebSocket. C'est bien plus complexe à mettre en place, je suis d'accord, mais le résultat en vaut la chandelle.

                              Plusieurs possibilités  :
                              Node.js avec Socket.io 
                              phpWebSocket

                              Il y a d'autre librairie dans d'autre langage, mais vue tes connaissances sur ton profil, je pense que c'est ces 2 là qui t'intéresserons le plus.

                              Personnellement, pour avoir testé les 2, Node.js avec Socket.io sont vraiment le must du must.

                              -
                              Edité par FMT_ZoRo 19 mars 2014 à 16:57:55

                              • Partager sur Facebook
                              • Partager sur Twitter
                                19 mars 2014 à 18:18:59

                                FMT_ZoRo a écrit:

                                La solution, c'est le WebSocket. C'est bien plus complexe à mettre en place, je suis d'accord, mais le résultat en vaut la chandelle.


                                J'avais entendu dire que le webSoket était peu sécuriser et donc dans certains navigateur cela est désactiver (doit y avoir une des patch donc ok) mais il y a peux de personne qui peuvent l'utilise (avec l'arret du support de XP, ça sera mieux) (source: http://caniuse.com/#feat=websockets)

                                Cette option sera envisager dans le futur, en attendant j'ai peu de monde et le serveur supporte puis après je pourrais augmenter le temps entre les requêtes et utiliser le format JSON lors de requête (ça allégera la bande passante et fera travailler un peu plus l'autre PC quand il y aura un nouveau message) si il y a trop de ressource utilisée.

                                Niveau avancement, le header est fait, le profil est fait à 50%. puis je vais continuer ce que j'ai dit la-haut.

                                -
                                Edité par Ender-events 19 mars 2014 à 21:25:57

                                • Partager sur Facebook
                                • Partager sur Twitter
                                Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
                                Anonyme
                                  19 mars 2014 à 21:12:03

                                  Socket.io permet un fallback automatique sur d'autres méthodes en cas de non support, et ce de manière transparente (flash, long-polling, ajax, ...). C'est donc utilisable en production, aujourd'hui.
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    19 mars 2014 à 23:29:47

                                    Après, avec la techno Node.js, il faut qu'il trouve un service d'hébergement d'applications node, à moins qu'il puisse l'installer sur un dédié ou s'il tourne en local ...

                                    Mais j'ai moi aussi joué avec Node, c'est génial et j'aurais bien des idées, mais nulles ;)

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Kwo:re / topic OC | Aidez les autres, indiquez un sujet résolu ! | Vous êtes bloqué ? Suivez le guide ! | N'aide pas par MP
                                      21 juillet 2014 à 18:10:19

                                      Big update ! J'ai profité des grandes vacances pour faire plein d'ajout, et c'est pas finit !

                                      La mise à jour porte sur le systeme de private chat, il faut être inscrit pour les voir donc j'ai fais des Screenshots.

                                      On a un Hub contenant le nom de la personne avec qui on a parlé, le derniers message avec ça date. Si on n'a pas lu les derniers messages, le message affiché dans le Hub seras en gras, si le message date d'aujourd'hui, on affiche l'heure sinon le jour. (L'image à gauche)

                                      Hub - Spreadnet

                                      Il y a aussi un autre moyen pour accéder au private chat, par exemple moi (Ender-events) et Ender94events, nous nous trouvons sur le channel test. En cliquant sur son pseudo vous pourriez lui parlez en privé. (L'image à droite)

                                      Voici 2 Screenshots des messages privées entre Ender-events et Ender94events. C'est gris quand c'est toi qui parle (sur l'image c'est Ender-events) et vert quand c'est toi qui reçoit (donc Ender94events).

                                      pChat d'Ender-events - SpreadnetpChat d'Ender94events - Spreadnet

                                      Quand on reçoit un message la flèche passe du gris Flèche gris à la flèche rouge Flèche rouge

                                      Facebook et Google rejoint Microsoft comme possibilité pour se connecter et s'inscrire à Spreadnet. (ci-dessous)

                                      Box de connexion gràce à un tiers au site SpreadnetMenu du profil.

                                      On à un "menu du profil" quand on est connecter a la place de la box de connexion. (ci-dessus)

                                      Le site utilise aussi media query pour avoir un site mobile:

                                      Site mobile - Spreadnet 

                                      Site mobile connecxion box - Spreadnet 

                                      Site mobile private message - Spreadnet 

                                      Site mobile menu du profil - Spreadnet

                                      J'ai aussi rajouté un formulaire de contacte:

                                      Formulaire de contacte - Spreadnet

                                      La prochaine MàJ sera pour le channel avec en autre passage pour le ajax (le websocket est dans la todolist mais pas maintenant) de données transitée en JSON au lieu de HTML pur. Un autre moyen pour accéder au message privée et surement une restructuration des messages (Voir demande d'avis juste en dessous).

                                      [Demande d'avis] Vous préfériez que les messages les plus récents soit en haut (comme en ce moment) ou en bas (comme pour les message privée) ?

                                      -
                                      Edité par Ender-events 21 juillet 2014 à 18:15:51

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici
                                        27 juillet 2014 à 23:10:33

                                         MàJ: Le format est en JSON, quand on hover un message on le mot privée qui s'affiché et permet d'ouvrir le chat privée. Pour récupérer des messages plus anciens il faut croller tout en haut et cela va rajouter les 20 messages précédentes. En attendant les webSockets (qui sont compliqué à mettre en place pour le moment) et pour éviter les requête toutes les secondes, le site utilise server-sent events et pour ceux qui peuvent pas, de l'ajax long polling (qui eux sont plus simple à mettre en place).

                                        channel: home - spreadnet

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Mon site web: Spreadnet chat vous permet de parle avec n'importe qui en fonction du thème (salon). (HS => recodage en nodejs) Discuter du projet ici

                                        [Site web] Spreadnet chat, chat par thèmes

                                        × 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