Charte Éditoriale
TTF / Tutos Tom Fourneaux
1. Présentation du projet
Domaine d'activité et expertise : TTF est une plateforme web qui centralise et catégorise des tutoriels de développement web (HTML/CSS, JavaScript, frameworks, outils de maquettage) produits durant le premier semestre. Le parti pris : rendre accessible une masse de ressources techniques dispersées, en misant sur le micro-learning et la simplification visuelle des blocs de code les plus complexes.
Histoire et évolution : Conçu en S2 de l'Année 2, TTF est né d'un constat simple : les tutoriels du premier semestre étaient éparpillés et non interactifs. Le projet les a structurés et indexés dans un environnement web moderne, pensé pour les habitudes de consommation de la génération Z.
Mission : Fournir des capsules de savoir technique courtes et gratuites, pour débloquer rapidement un problème de code ou prendre en main une fonctionnalité de programmation.
2. Vision, Valeurs fondamentales et Ciblage Stratégique
Valeurs de la marque :
- Code : rigueur absolue sur la propreté et la mise à jour du code présenté.
- Accessibilité : gratuité totale et interface épurée, pour que les compétences web soient accessibles à tous les étudiants.
- Entraide : un ton de développeur à développeur, pas de cours magistral.
- Clarté : pas de textes à rallonge, pas de publicités. La ligne de code utile passe en premier.
Vision : Devenir la plateforme de référence pour les étudiants qui veulent apprendre à coder, en alliant logique de programmation et interface (UI/UX) soignée.
Cible prioritaire : Étudiants de 18 à 25 ans, habitués à trouver des solutions rapides et visuelles, qui fuient les documentations austères.
Persona
Rougeaux Thomas, 24 ans
Étudiant en début de cursus — Homme
Personnalité
Autodidacte, curieux mais impatient, cherche des solutions directes.
Frustrations
Tutoriels vidéos trop longs, sites surchargés de pubs, impossible de sauvegarder sa progression.
Objectifs
Apprendre de façon autonome, enrichir son CV, réaliser ses propres projets web.
3. Objectifs stratégiques des contenus
Note de cadrage : Toutes les productions de TTF (texte comme visuel) doivent servir la croissance de la plateforme tout en répondant aux attentes d'immédiateté de la communauté.
Objectifs principaux :
- Installer le réflexe "Tutos Tom Fourneaux" chez les étudiants de 18-25 ans dès qu'ils font face à un bug ou un besoin de développement.
- Casser l'image de la programmation "froide" ou illisible en produisant des contenus esthétiques : interfaces soignées, animations de code fluides.
- Générer de l'engagement ciblé : sauvegardes de posts, partages de hacks techniques.
- Convertir l'audience sociale en utilisateurs inscrits sur le site, pour qu'ils tracent leur progression via l'historique de tutoriels complétés.
Exigence produit : Chaque contenu doit être immédiatement actionnable, visuellement accrocheur et centré sur ce que l'utilisateur en retire concrètement.
4. Stratégie SEO
Mots-clés cibles (Intention de recherche "Bug & Raccourci") :
- Mots-clés principaux : « tuto dev web gratuit », « apprendre HTML CSS », « corriger bug javascript ».
- Longue traîne : « display grid ne fonctionne pas », « centrer une div proprement », « raccourcis clavier VS Code indispensables ».
Optimisation Technique des Contenus :
- Sémantique : Chaque tutoriel intègre le code source en texte brut (avec les balises HTML
<code>) pour être indexé et lu directement par les robots de Google. - Balises HTML logiques : Utilisation stricte d'un seul titre
<h1>par page (le nom du tuto), de sous-titres<h2>pour les étapes, et de la balise<strong>pour les mots-clés en gras.
5. Choix et Justification du Réseau Social
Réseau sélectionné : TikTok, avec déclinaison organique en Instagram Reels.
Pourquoi TikTok :
- La tranche 18-25 ans utilise TikTok comme moteur de recherche pour des astuces concrètes et des micro-tutos de programmation. C'est un comportement documenté, pas une hypothèse.
- Le format vertical 9:16 impose une concision qui colle bien à l'ADN TTF : résoudre un bug ou expliquer une fonction en moins de 60 secondes.
- La vidéo sert d'appât visuel. La frustration du format court pousse naturellement le spectateur vers le lien en bio, qui renvoie vers la fiche textuelle complète sur le site, où l'utilisateur peut copier le code source et enregistrer sa progression.
6. Ligne Éditoriale, Ton et Identité Linguistique
Le ton TTF : Pédagogique, direct et complice. TTF parle avec l'autorité d'un dev expérimenté, mais avec l'accessibilité d'un camarade de promo. Le jargon théorique sans application concrète est banni.
Règles d'expression :
- Tutoiement obligatoire sur le site et les réseaux, pour supprimer la distance institutionnelle.
- Voix active et impératif d'action : les tournures passives sont proscrites. On préfère "Copie ce morceau de code", "Injecte cette propriété", "Déploie ton site en un clic".
- Concision : une phrase = une idée technique. Les paragraphes sur le site web ne dépassent pas 3 à 4 lignes pour éviter la surcharge visuelle.
7. Règles de Formatage Textuel Visuel
Ratio visuel / texte : Le visuel montre le résultat ou l'action, le texte valide la méthode. Pas de proportion stricte, mais les deux doivent coexister.
Gras : Obligatoire pour les mots-clés de code, les propriétés exactes, les balises et les outils incontournables.
Couleur d'accentuation (Rose Magenta) : Réservée aux lignes de code critiques, aux balises essentielles et aux textes incrustés en vidéo (overlays) pour guider le regard.
8. Indicateurs de Performance et Suivi des Contenus
Notoriété et visibilité (TikTok) :
- Nombre de vues uniques par vidéo, pour mesurer la portée organique de la marque.
- Taux de croissance des abonnés.
Engagement (TikTok) :
- Taux de mise en favoris / sauvegarde : c'est le KPI central. Il indique que l'étudiant considère la vidéo comme une ressource à garder pour ses projets.
- Nombre de partages, pour mesurer la recommandation organique entre étudiants.
Conversion (passerelle web TTF) :
- Taux de clic sur le lien en bio (CTR vers la page publique du site).
- Nouvelles inscriptions suite aux publications.
- Taux de complétion des tutoriels, suivi via l'historique utilisateur connecté.
9. Calendrier Éditorial TikTok (15 juin – 18 juillet 2026)
Lun
15/06
12h30
POV : Tu triches encore avec 5 lignes de « margin » au lieu d'écrire une seule fois « gap: 20px; ». Nettoie ton code !
#AstuceCode #Frontend #Css #TTF
Mar
16/06
17h00
Pourquoi la documentation officielle te fait perdre un temps précieux. 3 erreurs de layout mobile récurrentes et comment les fixer en 3 lignes.
#MicroLearning #ApprendreLeCode #FrontEnd #TTF
Mer
17/06
11h00
L'anatomie de la propriété « box-sizing: border-box ». Comprendre graphiquement comment le padding déforme ton design si tu ne l'actives pas. Sauvegarde pour ton TP !
#WebDesign #UIUX #Css #TTF
Jeu
18/06
17h00
Session chill : On intègre un effet « verre dépoli » ultra moderne en CSS pur pour ton portfolio. Monte le son et kiffe le bruit du clavier.
#ASMRCoding #Esthetique #Css #TTF
Ven
19/06
12h30
Rituel code propre du vendredi : un petit « git status » et nettoyage des classes CSS inutilisées avant de partir en week-end !
#CleanCode #GitHub #Css #TTF
Sam
20/06
10h00
Ta palette UI du week-end pour tes projets de fin d'année. L'harmonie parfaite entre un fond sombre abyssal (#0D1117) et des accents Rose Magenta fluo.
#Color #WebDesign #Css #TTF
Lun
22/06
12h30
Comment animer proprement un bouton au clic en JavaScript pur. Zoom macro sur un code fluide pour rendre tes maquettes interactives.
#JavaScript #Frontend #Esthetique #TTF
Mar
23/06
17h00
Comprendre l'asynchronisme en JavaScript sans attraper de migraine. Du cauchemar des promesses imbriquées jusqu'à la clarté absolue du couple « async / await ».
#JavaScript #ApprendreLeCode #TTF
Mer
24/06
11h00
Le bug le plus traître du JavaScript : « == » vs « === ». L'un compare la valeur, l'autre vérifie aussi le type. Utilise toujours le triple égal !
#JavaScript #AstuceCode #TTF
Jeu
25/06
17h00
Marre de l'erreur « Cannot read properties of undefined » ? Découvre le super pouvoir de l'enchaînement facultatif « ?. » en JavaScript.
#Debugging #JavaScript #AstuceCode #TTF
Ven
26/06
12h30
Si ton script JavaScript ne trouve pas tes éléments HTML au chargement, vérifie juste si t'as bien écrit l'attribut « defer » dans ta balise script.
#Debugging #HTML5 #AstuceCode #TTF
Sam
27/06
10h00
Mon parcours secret pour devenir autonome en intégration front-end sans dépendre du copier-coller de templates sombres. Découpe tes problèmes logiques par étapes.
#EspritCode #Autodidacte #DevConseil #TTF
Lun
29/06
12h30
Pourquoi écrire du CSS à la main en 2026 te fait perdre un temps fou. Découvre Tailwind CSS : tu styles tes composants directement dans ton HTML.
#TailwindCss #DevWeb #AstuceCode #Frontend #TTF
Mar
30/06
17h00
La magie des composants React. Arrête de dupliquer ton code HTML. Tu crées ton bouton une fois, tu le réutilises partout en changeant juste ses props.
#ReactJS #Frontend #CleanCode #TTF
Mer
01/07
11h00
Comprendre le hook « useState » en React d'un seul coup d'œil. Comment stocker et mettre à jour les données de ton site en temps réel sans recharger la page.
#ReactTips #Hooks #DevWeb #FicheMemo #TTF
Jeu
02/07
17h00
Le guide ultime pour faire un site 100% Mobile-First avec Tailwind. Plus besoin de Media Queries complexes, utilise juste les préfixes « md: » et « lg: ».
#Responsive #TailwindCss #AstuceCode #MobileFirst #Frontend #TTF
Ven
03/07
12h30
POV : Tu viens de lancer une boucle infinie de requêtes API sur ton application React. N'oublie jamais les crochets « [] » à la fin de ton « useEffect » !
#ReactJS #Hooks #TTF
Sam
04/07
10h00
Comment organiser tes dossiers « /composants » et « /hooks » sur React pour impressionner les recruteurs lors de tes entretiens.
#CleanArchitecture #ReactJS #GitHub #AstuceCode #TTF
Lun
06/07
12h30
Comment lier ton interface à un vrai serveur. Découvre comment PHP récupère les données de tes utilisateurs avec « $_POST » en toute sécurité.
#Backend #PHP #TTF
Mar
07/07
17h00
La commande SQL magique pour trier tes utilisateurs : « SELECT * FROM users ORDER BY created_at DESC; » pour afficher les derniers inscrits en premier.
#SQL #Database #Backend #TTF
Mer
08/07
11h00
Comprendre les jointures SQL (INNER JOIN) sans explosion de cerveau. Comment lier ta table « Utilisateurs » à ta table « Commandes » de manière logique.
#SQL #Database #FicheMemo #ApprendreLeCode #TTF
Jeu
09/07
17h00
La sécurité d'abord : protège ton code PHP contre les injections SQL. Utilise toujours les requêtes préparées avec PDO pour bloquer les « hackers du dimanche ».
#SQL #PHP #AstuceCode #Backend #Debugging #TTF
Ven
10/07
12h30
L'astuce de débogage ultime en PHP : abuse du « var_dump(); die(); » pour analyser tes objets et tes tableaux quand ton code refuse de s'afficher.
#PHP #AstuceCode #Debugging #Backend #TTF
Sam
11/07
10h00
Tu as fini HTML/CSS/JavaScript et attaqué PHP/SQL ? Voici comment packager ces compétences sur ton Github pour décrocher ton premier contrat.
#GitHub #DevWeb #TTF
Lun
13/07
12h30
Le guide ultime pour connecter ton Front React à ton Back PHP. Utilise « fetch() » ou Axios pour envoyer tes requêtes et récupérer tes données SQL au format JSON.
#Fullstack #ReactJS #PHP #DevWeb #TTF
Mar
14/07
17h00
Ne laisse pas les utilisateurs hacker ton site. Découvre comment la fonction PHP « htmlspecialchars() » nettoie les inputs et bloque les injections de scripts malveillants.
#PHP #Backend #AstuceCode #TTF
Mer
15/07
11h00
POV : Tu écris encore 4 requêtes différentes au lieu d'utiliser un « LEFT JOIN » pour récupérer les données de deux tables SQL d'un seul coup.
#SQL #Database #AstuceCode #TTF
Jeu
16/07
17h00
Session chill : On met notre application en ligne. Regarde le build se compiler proprement sur le VPS et la base de données se synchroniser.
#ASMRCoding #VPS #MiseEnProd #TTF
Ven
17/07
12h30
Aide-mémoire express : Comprendre les codes d'erreur HTTP. 404 = Fichier introuvable, 500 = Ton script PHP a crashé, 200 = Tout fonctionne. Ne panique plus !
#Debugging #AstuceCode #HTTPRequest #TTF
Sam
18/07
10h00
La checklist ultime pour concevoir ton premier projet Fullstack ce week-end. De la maquette à la base de données SQL jusqu'au déploiement final pour ton portfolio.
#Fullstack #Portfolio #DevWeb #TTF