Table of Contents

Planète Casio version 5

Informations génériques

Informations aux nouveaux arrivants
Concepts à travailler
À faire pour avancer

Page d'accueil (à re-valider)
Membre
Page de profil
Panel d'administration
Serveur IRC
FAQ
Forum
Tutoriels

Fonctionnalités

Internationalisation
Nouveautés
Gestion des droits
Messagerie privée
Notes et tests
Progrank
Suggestions des membres

Design

À propos des templates

Barre de navigation

Philosophie

Optimisation
Langages
API
Autres

Hébergement

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Planète Casio version 5

Informations génériques

Informations aux nouveaux arrivants

Informations partiellement invalides puisque sur le wiki de Forgejo

La paternité par couleur reste tant qu'aucune solution n'a été trouvée
Le pad est à peu près organisé, merci de le laisser en l'état. Les parties validées ont été transférées dans le wiki (lien ci-dessous).
Tout est lié : lisez l'intégralité du pad une fois pour comprendre l'ensemble des points
Un peu de vocabulaire :
- Visiteur : toute personne naviguant sur le site
- Membre : visiteur dont le compte a été validé par mail (initialement au niveau 0)
- Membre+ : membre de niveau supérieur ou égal à 1
- Invité : visiteur qui n'est pas connecté
Lien vers le repo Forgejo : https://git.planet-casio.com/devs/PCv5
Lien vers le wiki du repo : https://git.planet-casio.com/devs/PCv5/wiki/00-Home

Concepts à travailler

Ouverture à d'autres supports de programmation ?
- Il faut que ceux-ci aient obligatoirement un aspect éducatif (cf buts de CreativeCalc)
- Quelques idées
  - Arduino
  - Python
  - (Je propose le Rust, si vous n’êtes pas d'accord dites le)
Quels éléments exploiter pour le responsive design des pages du forum ? (par ordre croissant de largeur d'écran)
- Plus d'infos sur les profils, dates, etc. (pour les écrans moyens)
- Navigation rapide dans le topic
- Barre de recherche, programmes au hasard, etc. (éléments originellement horizontaux)
- On arrête le support à 1920 px. Au final, on bosse dans [320;1920].
Mise en cache de la page d'accueil invité => À chaque évènement susceptible de la modifier, on la recharge
- Ajout d'une news
- Ajout d'un programme
- Ajout d'un tutoriel
- Modification par administrateur du contenu de la page d'accueil
- Lancement manuel
Récupération automatique des nouveaux messages sur le forum (et les pages de programmes ?) quand Javascript est actif.
- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
Gestion de l'index membre/invité dans le programme de génération
Pages de programmes
- Image en 256 par 128 maximum, lightbox si elle ne tient pas.
- Version
- Récompenses (coup de cœur, label, etc.)
- Moyenne des notes et des tests
- Nombre de points au progrank ( + classement)
- Formulaire pour mettre une note (ou modifier l'existante)
- Lien (ou déroulant) pour mettre un test (ou modifier l'existant)
- Liens pour télécharger les différents fichiers
- Commentaires du programme

À faire pour avancer

Créer des templates de pages, graphiquement puis en HTML pour valider l'organisation
- Header
- Boite de réception
  - Messagerie privée
  - Nouveautés
- Exemple de topic
- Exemple de tutoriel
- Panel d'administration
Interpréteur Markdown (lephe)
- Index automatique par les titres pour les tutos
Template de boite d'utilisateur

Pour les invités
- Articles en petites boîtes : image, titre et texte. Sur les petits écrans on alterne image et texte au survol (Au survol sur smartphone/tablette ?)
- Liens
  - Tutoriel sur le transfert
  - FAQ du transfert
  - Tutoriels classiques, chaque tutoriel a une boîte
  - Index des tutoriels => dans le menu non ?
  - Programmes de cours comples et clairs pour l'année en cours
  - Derniers programmes et lien vers l'index des programmes
Pour les membres
- Articles développés
- Prochains concours
- Dernières activités du wiki si intégration possible
- Dernières activités du Forgejo si intégration possible

Membre

ID
Pseudonyme
Avatar
Points d'XP
Points de création
Titre affiché
Signature
Biographie

Le reste, c'est du relationnel (trophées obtenus, programmes postés, groupes auxquels il appartient, etc.)

Pour les droits, voir « Fonctionnalités → Gestion des droits »

Page de profil

Layout basé sur un menu d'accès et un panneau de contenu
- À gauche : un menu de largeur fixe d'accès aux sections avec une tuile par section
- En haut du menu : notifications importantes (news, CPC, etc.) (liste verticale, pas plus de 4 ou 5)
- À droite : Un panneau divisé en colonnes (+ marquage des colonnes)
Liste des sections
- Messages privés
- Nouveautés des sujets suivis
- Programmes du membre
- Topics du membre
- Derniers programmes, topic et tutoriels ajoutés
- Formulaires rapides de l'issue tracker
- Configuration du compte
Responsive design
- Le panneau se divise en plusieurs colonnes (grands écrans)
- Le menu se déplace en haut de la page, ce qui masque les notifications (petits écrans)

Panel d'administration

Centralise les tâches de l'équipe
Même design que la page de profil
Liste des sections
- Récupération des articles de rdp
- Éléments à organiser (news, events, ...)
- Derniers tests, dernières notes
- Gestion des keywords (admins)
- Gestion des votes et sondages
- Modération des comptes (nombre de points, bans rapides, ...)
Responsive design
- Voir celui de la page de profil

Serveur IRC

Choix techniques
- Interfacé avec les scripts du site (nouveaux messages, etc.)
  - Bot IRC (normalement assez simple à faire en Python)
- Faire tourner un serveur sur un sous-domaine
  - C'est fait, sur irc.planet-casio.com. Utilisation d'UnrealIRCd avec Anope pour les modules.
- écrire un client en Javascript. Ou reprendre un client existant et le customiser ?
Organisation des channels
- Le channel que regarde le membre est enregistré dans la variable $_SESSION. Il est automatiquement affiché à chaque chargement de page.
- Autres channels sur un sous-domaine (sur lequel tourne le serveur IRC)
Liste de solutions proposées
- Shout http://shout-irc.com/ (Open-Source, MIT)
- Se faire le notre en C avec une petite API sympathique
Channels
- Principal
- Aide à la programmation
- Problèmes
- Discussions libres
- Channel de l'équipe (privé)
- Commandes à garder
  - kick (ban de 5 minutes)
  - ban
  - poke (désactivé en cas d'abus)
  - mentions : géré uniquement par les clients. Pour celui en JS du site, pourquoi pas un changement dans la barre de titre et/ou la favicon et/ou notification système désactivable, comme le font la plupart des chats. Voir un bruit désactivable.
  - poke plus violent : difficile à gérer, puisque spécifique au site. Ça implique une commande (serveur donc) qui devra avoir un effet que sur un client (le site). Et pas visible par ceux qui utilisent un autre client
  - clear
  - glados (uniquement sur le channel « Discussions libres »)

FAQ

Partie pseudo-statique du site gérable uniquement par les membres habilités
Détient toutes les informations sur la résolution des problèmes courants
Principal point de redirection des invités depuis la page d'accueil
Points importants (par ordre décroissant d'importance)
- Problèmes de transfert courants et correctement indexés
- Erreurs Basic
- Erreurs C

Forum

Tri par sous-forum
Liste des pages
- Index commun en vrac, avec tri par colonne
- Création de topic
- Consultation de topic
Fonctionnalités
- Prévisualisation des messages (javascript)
- Fusions des doubles posts
- Système de quotes (javascript)
- Post invité
- Syntaxe Markdown
- Fermeture des topics
  - Un topic fermé ou résolu a un label automatique
  - Un topic résolu est considéré comme fermé

Tutoriels

Organisés en étapes (indexation automatique depuis les titres)
Tutoriels importants
- Transferts (FA-124, Graph sans USB, etc.)
- Changement et personnalisation d'OS
- Compilation avec gcc
- Optimisation des programmes Basic
- Utilisation des syscalls
Pour les très gros tutoriels (Basic Casio, puis C), une section à part sera créée.
Formats autorisés : Lights + LaTeX ?
- M↓ = accessible pour à peu près tout le public, syntaxe facile à décrire dans une boîte de dialogue
- Lightscript = homogénéité avec le forum, facilement customizable et adaptable
- LaTeX = extrêmement puissant, graphes, export en pdf, etc.

Fonctionnalités

Internationalisation

Traduction uniquement des tutoriels en anglais, avec deux colonnes dans la base de données
Métadonnée « disponible en anglais »

Nouveautés

Uniquement pour les membres+
Organisation
- La page « activités récentes » liste tout avec un bulle « nouveau »
- La page de profil liste les nouveautés des topics suivis
- Le modèle de stockage (les vieilles nouveautés sont oubliées) évite la croissance de la taille des données
Stockage
- Un champ de 1024 bits par membre dans un fichier (valeur à ajuster)
- Une table qui lie
  - le type de nouveauté (forum, prog, etc.)
  - l'id de la nouveauté
  - Et de quoi lier l'offset du champ de bits au numéro du bit dans cette table
Fonctionnement
- À chaque nouveauté postée, on décale d'un bit le champ
- On ajoute la nouveauté sur le bit libéré par le membre précédent
- On laisse le bit correspondant à la plus vieille nouveauté au membre suivant

Gestion des droits

Chaque utilisateur fait partie d'un ou plusieurs groupes
Chaque groupe a un nom, une description, et une liste de droits
Chaque membre a une désignation qui dépend des groupes auxquels il appartient

Quels droits pour chaque niveau sur l'IRC ? Je sais pas trop les nuances que l'IRC apporte (salon privés|publics, commandes spéciales, etc…) du coup pour le moment j'ai complété avec ce qui est déjà en place.

Pour être honnête, je sais pas trop ce que le module d'auth permet. Mais faut déjà avoir une idée de ce qu'on veut.
Liste des droits par groupe
- Membre
  - Accès au forum « Vie communautaire »
  - Accès au forum « Discussions »
- Membre+ (sans désignation)
  - Accès à l'IRC (lecture / écriture)
  - Modification de tutoriels
  - Suivi des nouveautés
  - Vote lors des concours
  - Création de formulaires de vote (validation par un admin)
- Membre confirmé (désigné par les administrateurs, sans désignation)
  - Peut modifier la FAQ
- Partenaire
  - Publication d'articles
- Rédacteur
  - Publication d'articles
  - Accès au forum « Administration »
- Modérateur
  - Modification de messages
  - Suppression de messages
  - Modification de programmes
  - Verrouillage de topics
  - Accès au forum « Administration »
  - Publication d'articles (retiré dès lors que l'équipe de rédaction sera stable) Il ne serait pas plus simple de donner le role Rédacteur aux modos le temps de stabiliser ?
  - Kick / ban de l'IRC
- Administrateur
  - Accès au forum « Administration »
  - Publication d'articles
  - Modification de messages
  - Suppression de messages
  - Modification de programmes
  - Suppression de programmes
  - Suppression de tests
  - Lecture et suppression des notes
  - Administration des formulaires de vote
  - Validation des formulaires de vote
  - Kick / ban de l'IRC
- Youtuber
  - Accès au forum « Administration »
- Membre de Creative Calc
  - Accès au forum « Creative Calc »

Messagerie privée

Limite de MP selon le groupe le moins bloquant de l'utilisateur
- Membre : 20 MP
- Membre+ : 50 MP
- Partenaire : 75 MP
- Rédacteur : 100 MP
- Modérateur : 250 MP
- Administrateur : 500 MP
Pas de pièces jointes
Messages obfusqués dans la base de données (Darks)

Notes et tests

Le commentaire associé à une note est obligatoire
Les tests sont coefficientés 3 fois plus que les notes
- 3 points sur le gameplay et la fonctionnalité
- 3 points sur la présentation graphique et l'ergonomie
- 2 points sur la durée de vie
- 2 points pour l'absence de bugs

Progrank

Calcul journalier autour de 4h du matin
Chaque programme possède un score sans maximum théorique représentatif de sa qualité
- - (ln (1 + nb_téléchargements))² / 2
- - 30 points si label (valeur à ajuster une fois qu'on aura de bonnes bases)
- - 10 points si image
- - (Σ(notes - 5) + 3 * Σ(tests - 5)) / (nb_notes + nb_tests) * ln(1.1 * (nb_notes + nb_tests))
- - 10 * sqrt(1 - age_jours / 14) si age_jours < 14

Suggestions des membres

Gestion des nouveaux messages, notifications etc. en temps réel
Unification du jeu de smileys
Archivage des données existantes
Recherche de membres
Revoir le système de topics privés
Moteur simplifié de TeX
- Balise de type expression TeX ? Enfin, faut voir si on en a vraiment besoin. -> Facile à faire avec KaTeX (ce machin est sublime) ; et on peut calculer le rendu sur le serveur (on se retrouve avec du HTML à envoyer, ce qui est parfait)
Coloration syntaxique
Revoir la structure de classement des programmes de cours
Repenser la page "Partenaires"
Repenser l'organisation des articles du wiki, la page d'accueil et un peu de design
SDK Basic en ligne
Icônes de calculatrices affichées dans la page de profil
- http://www.planet-casio.com/Fr/forums/topic11802-14-La-salle-des-dev-s.html#97917
Skins
Tâches cron
- À chaque fin de semaine, le membre est considéré actif pendant la semaine écoulée s'il a effectué un nombre suffisant d'actions.
Téléchargement des images externes et optimisation en live avant d'envoyer au client : à tester pour voir si c'est efficace.
Sondages
Programmes associés à un programme => Limite de quantité, gestion ? Symétrie de la relation de lien entre deux programmes ? => Bonne formule à établir en conséquence x)
Poster un truc sans recharger la page
Aperçu des messages (sans rechargement si Javascript est actif, avec sinon)
Liste déroulante pour la sélection de membre lors des envois de MP
Émulateur en ligne (interpréteur de Basic)
Compte-rendu automatique par email
Depuis la liste des sujets d'un forum, icône pour accéder directement aux deniers commentaires (c'est pas déjà le cas ?) => Je trouve ça pas pratique... enfin on peut mettre une icône (non c'est pas le cas, nous on renvoie en haut de la page)
Page de tri des membres par les infos publiques

Design

(Section passablement obsolète)

Material design léger (dégradés de 8 de différence environ)
- Respecter autant que possible ceci : http://www.google.com/design/spec/what-is-material/environment.html
Que penses-tu de ceci ? https://d13yacurqjgara.cloudfront.net/users/117354/screenshots/2030829/attachments/360058/drib.png (pour l'en-tête du moins) => Bien ! :D
Rouge et grise par défaut : http://www.materialpalette.com/red/blue-grey
Icones : https://google.github.io/material-design-icons/ - www.icomoon.io - FTP de lephe - https://materialdesignicons.com/
Idées : http://material-ui.com/#/components/menus

À propos des templates

Responsive design
https://css-tricks.com/autoprefixer/

Logo PC (lien vers page d'accueil)
Programmes
- Jeux
- Cours
- Logiciels
- Labels
Forum
- Actualités
- Vie communautaire
- Projets
- Problèmes
- Discussions
- Administration
- CreativeCalc
- Tutoriels
- Tutoriels de qualité (officiels)
- Transfert
- Programmation
- Divers
Graphismes
Outils
- Générateur de cours
- Eact-Maker
- SH4 Compatibility Tool avec lien vers le(s) tuto(s)
- Casio Universal Wiki
- Et pis pas mal de trucs de cette liste : http://tools.planet-casio.com/
Interface de connexion => Dans la barre, forcément ?

Philosophie

Optimisation

Les scripts clients ne sont qu'un bonus de fonctionnalités
Limitation du nombre d'images
- Polices d'icônes : http://www.icomoon.io/
- Base 64
Limitation du nombre de requêtes
- Sprites CSS
- Fusion des scripts communs
Optimisation des fichiers
- Réduction des fichiers sources
- Optimisation sans perte des images

Langages

Scripts clients : coffeescript
Feuilles de style : CSS ou LESS
CGI : C

API

Analyse d'audience et de trafic
- Piwik analytics

Autres

Code du site
- Open-source (libre ? => oui)
- Liste blanche pour filtrer les éditions
Principes de développement
- Principes DRY et KISS
- Respect de la PEP8 pour le Python
- Utilisation des chemins absolus dans les inclusions de fichiers
- Manipulation centralisée de la base de données
- On nomme en anglais
- Les modules sont reconnus par un préfixe : module_membre
- Notation snake => Je propose la notation suivante : DomElement_setTextNode() avec les modules séparés en notation snake et la notation camel au sein même des modules.
- Les noms de fonctions et de variables commencent par des majuscules, les noms de classes, structures, énumérations et autres types par des majuscules si globaux, les noms de macros sont en majuscules complètes et celles qui sont destinées au fonctionnement interne commencent par un underscore.
- Indentation en tabulations (larges de 4 espaces) sauf pour le Python, qui respecte la PEP8 (4 espaces)
Réécriture d'url sous nginx => http://nginx.org/en/docs/http/ngx_http_rewrite_module.html#rewrite En-a-t-on besoin avec flask ?
Insérer des tabulations dans une textarea : http://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea

Hébergement

Quand on changera de serveur : http://korben.info/4-etapes-pour-migrer-un-serveur-web-sans-interruption.html