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

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.

À bientôt sur 

Et merci de votre écoute.

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

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.

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.

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 ) ?

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). 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 ) ?

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

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!

Logo à changer

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

Concernant le favicon, tu peux laisser juste une des bulles vertes j'imagine.

Mis en place de url_rewrite le lien pour le salon est maintenant chat.spreadnet.fr/channel/(nom du salon)

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.

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?

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

1366 x 768

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

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

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.

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

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)

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).

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

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

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:

 

 

 

J'ai aussi rajouté un formulaire de contacte:

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

 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).