Bonjour à tous, Certains me reconnaitront surement, je suis ici depuis des années, et voilà que je viens présenter la refonte totale de mon premier projet de l'époque. Je suis ingénieur info/réseaux, mais j'ai mis de côté les infrastructures réseaux et télécom pour me consacrer au développement, principalement web. Je bosse aussi bien côté client (webapps js, jQuery et depuis peu React) que côté serveur (Node/js, Rails/ruby, Apache/PHP, infrastructure serveur).

En savoir plus sur le projet

Genèse

Winky, c'est le nom de mon projet, était à la base un réseau social pour artistes (projet SdZ visible ici), mais étant mon premier site web, il était bien trop mal codé pour envisager une quelconque maintenance, et j'ai donc décidé "d'abandonner" sa mise à jour depuis 2012. Ici, je repars de zéro en supprimant totalement le côté "réseau social" au profit de la création de sites personnalisés.
Aujourd'hui, avoir son site web est devenu indispensable, même à titre personnel, pour créer son identité visuelle et pouvoir présenter ses projets et motivations au monde entier, le tout réuni derrière une url. En tant que développeur web freelance qui, comme tout développeur web, se rend compte qu'un site contient toujours des éléments redondants (formulaire de contact, page "A propos", espace admin...), j'ai d'abord voulu me créer un boilerplate, afin de pouvoir générer des sites à la volée, puis customiser le design en fonction de la demande du client. Petit à petit, à force de tout automatiser au maximum, je me suis dit "Après tout, pourquoi le client ne pourrait-il pas se faire lui-même son site web ?". J'ai donc décidé d'utiliser ce concept sous le nom de mon premier projet (winky) afin de lui redonner un coup de neuf.

Généralités et avancement

Le concept du site est simple:

• L'utilisateur s'inscrit en choisissant son profil (3 profils disponibles: musique, permettant de gérer des listes de lecture, images, permettant de gérer des galeries de photos et projets permettant de gérer une liste de projets, utile par exemple pour un jeune développeur web voulant lister les liens de ses créations).
• Son site est généré dynamiquement utilisant le boilerplate en interne. L'utilisateur dispose alors d'un ensemble d'outils pour le personnaliser.

Par défaut, le site est généré avec ces pages publiques:

• Page d'accueil, contenant le titre du site et un bouton de contact
• Page affichant les ressources liées au profil choisi (musique, images ou projets)
• Page d'événements, contenant un calendrier totalement libre pour l'utilisateur, ce calendrier sera à terme exportable
• Page "A propos", permettant la prise en charge de html, pour pouvoir intégrer des lecteurs youtube, ou autre...
• Page de contact, permettant à tout internaute de laisser un message à l'utilisateur

Chaque ressource peut être commentée et partagée.
L'espace d'administration comporte ces outils:

• Une messagerie, regroupant les messages laissés par les internautes
• Un module de statistiques, pour visualiser les pages/ressources les plus vues, etc
• Un système de thèmes, pour modifier le design de son site (un thème n'est qu'un merge de JSON, très simple à exporter et partager entre sites)
• Un système de textes/langues, pour choisir le contenu à afficher en fonction de la langue, pour le moment seuls Français et Anglais sont gérés
• Un module SEO, pour gérer soi-même son référencement et son intégration dans les réseaux sociaux
• Ajout/édition/suppression des resources, par simple clic ou drag&drop.

Voici un aperçu du module de statistiques :

Le site est responsive, donc adaptable sur ordinateur / tablette / mobile. J'utilise Bootstrap pour le design, jQuery pour la dynamique, Ink pour les mails, Apache/PHP côté serveur avec un framework perso, et j'utilise le module proxy d'Apache pour gérer les sous-domaines. Le tout est hébergé chez OVH. Les galeries d'images peuvent être protégées par mot de passe (idéal pour les galeries de nu artistique par exemple), les images peuvent se voir appliquer un filigrane (nom de l'auteur incrusté pour éviter le vol) et les musiques sont gérées par le merveilleux projet SoundManager (utilisé par Soundcloud, pour donner une idée).
Tout passe par le boilerplate, c'est à dire que je peux migrer mon projet sur un site tiers totalement indépendant, ça fonctionnera. A noter aussi que l'accueil du site est généré avec ce même boilerplate, en d'autres termes le site lui-même est construit à partir de l'outil qui construit les sites.

Objectifs

Je pense avoir déjà tout dit concernant les fonctionnalités. Le but à terme est de rendre le tout modulaire, c'est à dire de supprimer le côté "statique" des pages, et pouvoir en générer à la volée, en y intégrant ce que l'on veut (un widget youtube, un widget image, etc).
Concernant mon business-plan, si je peux oser appeler ça comme ça, je compte introduire la notion de compte Premium boostant les paramètres de l'utilisateur pour seulement 2 ou 3 euros/mois. Le but n'est pas de devenir riche, mais simplement de m'aider à financer le projet (hébergement + temps de travail). Il n'y a aucune pub sur le site ni aucun stockage d'informations personnelles, etc. Mon but est simplement d'aider les gens à promouvoir leur image sur le web sans besoin d'apprendre de quelconques notions en informatique.

Le projet et son originalité

Le projet vise principalement les artistes, mais n'importe qui voulant par exemple partager ses photos prises pour Noël avec sa famille peut être intéressé. On trouve de plus en plus d'outils sur la toile pour créer son site web sans efforts, certains sont extrêmement poussés (je ne citerai aucun nom) mais pour les avoir essayés, je trouve la prise en main trop complexe pour une personne lambda. Mon but était de permettre à n'importe qui d'avoir son site web en seulement quelques clics. Aussi, pour suivre de nombreux photographes et modèles photo, je vois souvent les mêmes books revenir en permanence, fades et vieillots. J'espère pouvoir fournir de nouveaux outils à ces artistes pour promouvoir leur image.

A venir...

Les fonctionnalités à venir sont les suivantes:

• Compte Premium fonctionnel
• Ajout des sections forum, blog, newsletter
• Modularité accrue entre les sections
• Possibilité de créer un nom de domaine personnalisé (supprimant l'extension "winky.fr")

Tester le projet

Le projet est testable à l'adresse: http://new.winky.fr.
Un compte demo est disponible. Normalement bloqué en lecteur seule, je l'ai débloqué afin de tester rapidement les fonctionnalités sans besoin de créer de compte. Attention, lors d'upgrade ou de debug de ma part, il se peut que je réinitialise la base de données, donc tout est supprimé assez régulièrement.
J'attends vos retours, positifs ou négatifs. Qu'y a-t-il à améliorer ? Quels sont les bogues à corriger ? Que puis-je ajouter ? Etc... D'avance merci.

-
Edité par wkl 2 juin 2015 à 17:20:14

Salut !

Alors déjà je dois t'avouer que j'adore le design et le concept de ce que tu as fait. Juste un petit point de détail, je ne peux pas faire disparaître la barre concernant l'utilisation des cookies (même en cliquant sur "Ok"). D'après ce que j'ai vu sur le site de démo, c'est vraiment très bien agencé et je pense que tu pourrai avoir pas mal de personnes que ça intéressera.

As-tu un business plan ? Des solutions payantes ou ce genre de choses ? Car faire un site de ce genre gratuitement c'est bien mais je suis pas sûr que tu t'y retrouves gagnant au final et vu le design et les fonctionnalités, j'imagine que tu as dû y passer beaucoup de temps.

Salut, Merci pour ton commentaire. Effectivement pour le problème de cookies, en rebuildant les htaccess, il y a eu un bogue de redirection des requêtes ajax. J'ai également revu le mode de connexion, ce qui permet de se connecter à plusieurs sites avec des comptes différents sur la même plateforme.
Concernant mon business plan, je l'ai expliqué dans le topic :

wkl a écrit:

Concernant mon business-plan, si je peux oser appeler ça comme ça, je compte introduire la notion de compte Premium boostant les paramètres de l'utilisateur pour seulement 2 ou 3 euros/mois. Le but n'est pas de devenir riche, mais simplement de m'aider à financer le projet (hébergement + temps de travail). Il n'y a aucune pub sur le site ni aucun stockage d'informations personnelles, etc. Mon but est simplement d'aider les gens à promouvoir leur image sur le web sans besoin d'apprendre de quelconques notions en informatique.

Hello,

Belle réalisation pour commencer, c'est clean, lisible, agréable et accessible. Le choix des couleurs et de la dominante est plutôt réussie. Bon boulot.

Je n'ai pas pu tester avec le compte "demo" (succes: 0)

J'imagine que de mettre l'url dans la balise <title> du site est voulu?

-
Edité par Lucky13 9 juin 2015 à 11:38:30

Merci. Et non, bien vu, j'ai oublié la balise <title> sur l'accueil du site. Concernant la connexion, depuis ce matin je push des bugfixes donc c'est probable que tu aies tenté le coup entre 2 commits propres...

-
Edité par wkl 9 juin 2015 à 14:49:20

Salut. J'ai pas remonté le topic depuis longtemps parce-que ça n'en valait pas le coup. Depuis 2mois, je ne fais que peaufiner le tout et corriger tout ce qui déconne. Pas d'amélioration majeures, si ce n'est :

• un compte Premium toujours pas abouti mais désormais concret :

• une gestion multi-compte (on peut gérer plusieurs sites depuis le même browser)

• refonte de la section Projet, pour obtenir non plus un bête lien mais un slider de projets avec description, etc

• après un refactor complet de la conf Apache, gestion de cache, headers, requêtes CORS, etc, j'obtiens un fonctionnement beaucoup plus optimal : ... et je dois dire que j'en suis très content !

• nouvelle page "mon compte" permettant de gérer son compte, ses paiements et aussi ses connexions actives, un aperçu non finalisé ici (sur tablette android) :

Voilà. Ca avance doucement mais surement.

Salut,

Est-il possible que tu m'envoie ton email (en message privé) afin que l'on puisse discuter d'un éventuel partenariat.

Enzo

Bonjour, Cette nuit, j'ai tenté de faire un nouveau thème, ce qui m'a amené à ajouter plein d'options de customisation.

• Je rappelle que je ne suis pas designer
• A savoir que la création d'un thème se résume à un bête objet JSON, comme suit (en simplifiant) :

  {
  "global__text": "rgba(30,30,30,1)",
  "global__background": "rgba(255,255,255,1)",
  "global__border": "1px solid rgba(0,0,0,0)",
  ...
  }

Thème "minimaliste" :

-
Edité par wkl 27 juillet 2015 à 15:28:47

Salut,

Je me sers de ce topic comme base structurelle pour détailler mon avancement. Nouvelle étape: régénérer l'archi totale du site sans devoir tout écraser comme je fais actuellement. J'ai commencé par modéliser l'archi data en base, ce qui donne ceci :

-
Edité par wkl 28 juillet 2015 à 16:25:02

> page "A propos"

À propos *

> c'est à dire

c'est-à-dire

> Tester le projet

Essayer *

> https://openclassrooms.com/forum/sujet/aide-pour-devoir-en-php#message-89211487

Apprends *

Etc...

Au temps pour moi tu fais quelque chose. Je vais même faire la part des choses. C'est plutôt du beau boulot, par contre le site est lent mais jolie et plus important ça à l'air de fonctionner pas trop mal.

Par contre, pour le coup je vois comment tu comptes faire venir les gens dessus, tu parles de simplicité mais j'ai déjà vu un site de blog qui permet de modifier le contenu en wysiwyg directement sur la page front-end donc super simple d'utilisation.

En terme, d'archi c'est marrant pour un gars qui parle d'ontologie car l'ontologie c'est très orienté objet, ton archi n'est pas du tout en ce sens, exemple seo_json n'est pas un objet. D'ailleurs pourquoi faire des tables pour stocker du json? JSON signifie javascript object notation donc tu dois pouvoir extraire les objets pour les mettre en base.

Ensuite, pourquoi tous les liens vers d'autres sites son dans la table User? Tu en fais une autre avec cette forme:

------------------

|       Links      |

------------------

| id                  |

| name           |

| link                |

-------------------

En plus ça sera plus flexible, t'auras pas à toucher à ton objet user mais juste ajouter une ligne dans une table.

Dans le même style tu as pas mal de chose qui pourrait être regroupé en une seule table comme pour wsites_twitter wsites_facebook.

Bref tu t'es pas assez attardé sur ton model de données d'où le fait que tu dois supprimer à chaque fois.

Tu as déjà entendu parlé d'ORM? Regarde du côté de doctrine

Pour ne pas à avoir à écraser à chaque fois ta base regarde du côté de liquibase

-
Edité par timoun 28 septembre 2015 à 3:20:20

Salut,

Merci pour ton honnêteté

Concernant les ontologies, comme je l'ai dit, ce projet n'est pas un réseau social, donc on oublie ça.

Concernant l'archi db, je suis entièrement d'accord avec toi, la table user (entre autres) est moche, et j'avais déjà prévu de changer ça. Au départ, ce projet était un boilerplate pour générer de petits sites vitrines avec espace d'admin, le code devait pouvoir passer sur n'importe quel mutualisé, déployable via 1 script bash, etc, du coup je me suis pas mal bridé aux concepts les plus basiques, puis petit à petit j'ai modifié ça en me disant "je pourrais en faire une nouvelle version de mon ancien projet". Donc effectivement, il y a plein de choses à revoir, j'ai ma todolist, assez énorme, je suis déjà bien à la bourre dans mes délais donc chaque chose en son temps ^^. Depuis le début du projet, l'archi db a énormément évolué (avant en gros, c'était 10 tables par user),

Concernant json, sache que je pensais comme toi il y a peu, puis j'ai bossé pour une boite de statistiques réseaux (stockage et analyse de paquets réseaux sur routeurs CISCO) qui traite des volumes de données énormes, et j'ai appris cette "technique" de stockage du json. Pour moi ce n'est utile que dans 1 cas : quand c'est une donnée à traiter telle quelle sans requêtage filtré dessus (jamais je ne ferai une requête de style LIKE dans un champs json). Mais encore une fois, c'est un choix que je n'avais pas pris au début mais qui a fini par s'imposer parce-qu'il résout plusieurs problèmes.

Je connais Doctrine, mais le challenge de ce projet était de me faire mon propre Framework, mais oui, je pense déjà à une migration vers Symfony ou d'autres plus récents, donc Doctrine ferait parti de mes choix d'ORM. Je ne connais pas liquibase, merci je vais regarder.

Par contre, concernant mes problèmes de db, je les ai résolus. Je peux maintenant déployer mon site sans tout casser. Il faut vraiment bien comprendre que ce projet est original dans le sens ou le site lui-même est construit avec le template qui permet de créer des sites. En fait il ne faut pas voir ça comme [site hébergeant le projet] + [création de sites persos] mais plutôt ([site perso de démo] -> [site hébergeant le projet]) + [création de sites persos], je n'arrive pas à décrire la chose clairement...

Merci donc pour ton commentaire constructif et sincère. Concernant l'audience, je ne sais pas non plus, j'ai déjà +1000 membres à rapatrier, ensuite je n'ai pas de business plan. Je sais qu'il existe des solutions similaires, mais trop lourdes à prendre en main, ou trop moches, ou trop peu flexibles. J'ai déjà réfléchi au WYSIWYG, je suis en train d'en intégrer un en parallèle de mon avancement, mais je veux pas aller trop vite sur ce point. Quand tu regardes book / kabook / etc, tous les designs sont moches et semblables, ça ne devrait pas être trop dur d'inciter les gens à tester ce projet.

Tu trouves le site lent ? C'est du one-page, donc tout est chargé au début, et effectivement j'attends que toutes les ressources soient chargées (je compte rendre ça optionnel), mais ensuite, tout est instantané.

Je profite de ce message pour annoncer une future modification qui, je pense, apporte pas mal. J'ai rapatrié mon manager de lecteurs audio (basé sur SoundManager2) qui permettra de customiser chacun de ses lecteurs, comme le montre cet exemple :

Il me reste à finir la partie admin et je push ça. On pourra personnaliser :

• le formatage initial de la sinusoïde, ce qui permet par exemple de générer une waveform complète (lecteur 1 ci-dessus), un design à la soundcloud (lecteur 2), etc
• la couleur du lecteur (défaut / chargement / lecture)
• le ratio, responsive et dynamique, de la hauteur x largeur
• l'affichage "symétrique" haut / bas (lecteurs 3 et 4) ou "moderne"
• et plus, je n'ai pas encore pris de décision

-
Edité par wkl 2 octobre 2015 à 7:53:20

Beau boulot !

bonne continuation  

Bonjour,

Merci pour ces commentaires

Je viens tout juste de finir les nouveaux players. On peut choisir des couleurs par défaut pour tous les players, ou directement les customiser un par un en javascript (je fournis un objet avec quelques callbacks, on peut utiliser des couleurs, gradients, images (pas encore testé), etc).

Voici quelques exemple que je me suis amusés à faire, "amusés" étant un bien grand mot, surtout pour les players SoundCloud-like.

Et côté backend, la customisation est très simple :

Je suis bien content de cette évolution, et je l'espère être un atout de taille, je ne connais pas beaucoup de sites qui proposent ça.

Si vous avez des idées, remarques ou bugs, n'hésitez pas. Je me suis rendu compte que les inscription étaient bogguées, du coup plusieurs personnes n'ont pu s'inscrire, et aucun retour !

Salut,

Suite à une fausse manipulation, je ne pouvais plus développer sur mon ordi perso.

Problème réglé, et énormément de mises à jour et correction de bogues, notamment :

• suppression de SMIL pour librairie SVG pour le logo
• adaptation mobile (un gros bogue empêchait le site de tourner)
• outil de réparation des waveforms (pour palier les problèmes d'upload, rétrocompatibilité, etc)
• utilisation de gulp pour les assets (optimisation, minification)
• correction de nombreux problèmes W3C et mise aux normes HTLML5
• correction htaccess et routage (compression, et surtout suppression du proxy interne, ce qui accélère énormément les requêtes HTTP)
• accélération du temps de chargement et SEO
• achat des domaines .info .site et .pro

Super projet bravo.

Tu as utilisé un outil particulier pour l'animation svg de ton logo qui rétréci sur le scroll ?

Merci

Pour le SVG au début j'utilisais l'API SMIL que j'ai remplacé par la librairie Snap. Mais concernant le rétrécissement et la rotation, un simple listener javascript sur l'event "scroll" de la page + une modification css (width + rotation)

MichelFlat a écrit:

Encore un éditeur de site internet... A quel intérêt car personne n'utilisera ton service ?

Salut,

Ce n'est pas un ancien projet, pour répondre à @Enzo7337 et @ruquier, et j'allais justement l'updater !

Depuis quelques temps je suis en contact avec des organismes et personnes intéressées par le projet.

Comme l'a souligné MichelFlatulence, des éditeurs de sites web existent de toute part, et c'est assez difficile de tenter une concurrence directe. J'ai donc réfléchi à une autre stratégie.

Et elle commence par la création de widgets exportables: players, calendriers, et galeries d'images.

J'ai attaqué le player hier. L'idée est simple, l'utilisateur s'inscrit, upload ses morceaux, et customise ses players absolument comme il le souhaite (démo de rappel ici). Ensuite il peut décider de "créer son site" (ce qu'il est déjà possible de faire) ou d'exporter ses lecteurs via une iframe, de la même manière que SoundCloud le permet.

Je souhaite que le rendu exporté soit le plus simple possible afin de ne pas imposer un design. Le design est celui que l'utilisateur choisit dans son espace d'administration. Le screenshot date d'hier soir, l'interface a un peu évolué, et évoluera encore.

Le player winky propose une API afin de permettre à l'utilisateur d'intercepter n'importe quel événement et d'y intéragir comme il le souhaite.

Un espace "developpeur" avec pages d'aide et documentation de l'API arriveront dans la foulée.

Pour finir, MichelFlatulence, plus de 1500 personnes utilisent winky.fr et cette nouvelle version est le résultat de nombreuses attentes. Voici quelques screenshots pris il y a quelques années, j'ai très vite arrêté, faute de temps (et non je n'ai payé personne pour dire ça, et je n'ai quasiment jamais fait de pub pour mon projet)

Bref, il m'est inutile de me justifier, merci d'arrêter de polluer les topics inutilement.

Merci à tous !

-
Edité par wkl 2 mars 2016 à 1:41:26

Bonjour,

Comme promis la doc complète du player exportable, avec un exemple en bas de page : http://developers.winky.fr/

Cela sera évidemment amené à être développé, d'une part la doc avec traductions etc, d'autre part le player qui reste un peu compliqué à customiser. Moi-même j'ai dû m'y reprendre à plusieurs fois pour ne pas me tromper dans la doc technique.

J'ai également corrigé pas mal de bogues, comme des problèmes de viewport sur mobile, de scroll, d'affichage du contenu, ou du calendrier qui débordait sur iPhone 4, ...

Pour revenir au player, si vous connaissez des équivalents, pourriez-vous m'en donner les liens ? Je n'ai pas trouvé d'alternative, mise à part les players Flash old school, mais je suis sûr qu'il en existe.

Prochaine étape : calendrier / galerie d'images, avec quelques surprises pour celle-ci

Bonjour,

Tout simplement respect.

Envois moi si possible ton E-mail .

Merci d'avance.

Hello,

Beaucoup de projets en parallèle, notamment l'intégration Instagram / Pinterest / Facebook dans les galeries d'images + Soundcloud pour la musique. Je viens cependant de publier le calendrier exportable, 2ème widget après les players.

C'est une fonctionnalité à creuser selon moi, l'ancienne version du calendrier étant utilisé sur plus de 300 sites (artistes, écoles, médecins, ...).

Exemple: http://developers.winky.fr/calendar

Au passage, quelques modifications que j'ai apportées:

- amélioration des data SEO

- embellissement du site général (ajout de bannières, inversement de la charte de couleurs players/projects, on peut rire, mais ça a nécessité une nuit blanche de debug...)

- suppression des #ancres pour passer à l'API history, url plus propres et correction de bugs de path

- nombreux bugfixes par-ci par-là

Merci !

Hello,

Voici une démo de l'intégration Instagram sur son site Winky. Je n'attends que la validation d'Instagram pour la validation de l'app.

Merci

-
Edité par wkl 2 juin 2016 à 23:17:36

Salut,

Ton projet gère, je vais suivre pour voir l'avancement !

Tu utilises quoi comme bibliothèques pour faire tes graphiques ?

Juste une question: rien de grave mais à quoi sert le bouton "découvrir" présent sur le logo SVG et qui disparait lorsque l'on descend dans la page. Le survol nous invite à clicker dessus mais il ne pointe sur aucune page, ni aucune section(ancre) du site.

Voilà, sinon la démo de l'intégration Instagram est plutôt claire et bien faite.