Contexte

Pico-8 est une console imaginaire qui permet de créer, partager, et jouer à des jeux miniatures qui évoquent avec nostalgie les débuts du jeu vidéo grand public. La console possède un environnement de développement complet, de l'éditeur de code aux graphismes, en passant par la musique. Ses spécifications (écran carré de 128 pixels, 16 couleurs, 4 canaux sonores) vont vous contraindre à la créativité - comme des milliers de créateurs et créatrices avant vous, qui utilisent souvent Pico-8 pour prototyper des jeux, dont certains sont devenus de grands succès. Nous vous invitons à voir ce projet comme un grand bac à sable où vous allez pouvoir déverser votre imaginaire en équipe afin de proposer une expérience ludique à d'autres joueurs, tout en découvrant un nouveau langage et de nouveaux paradigmes de programmation. Les notions acquises ici sont réutilisables sur des moteurs de jeu avancés, en infographie et dans des projets visuels plus complexes.

Contraintes

• Durée : 2 semaines
• Moteur : Pico-8
• Langage : Lua

Objectifs globaux pédagogiques

• Acquérir les premières compétences de langages de programmation
• Acquérir les premières compétences du travail en équipe
• Développer des compétences en résolution de problèmes

Notions abordées

• Moteur de jeu
• Infographie 2D
• Gestion d'équipe

Contexte

Ce projet a pour objectif de développer une application web qui permette de visualiser des données de façon dynamique. Ce principe peut être pris de manière très large : ainsi, il peut s’agir de construire une page web affichant un graphique « classique » reflétant l’évolution de telle ou telle donnée. Mais il peut aussi s’agir de créer une animation mettant en scène des données de façon plus originale ou ludique (voir plus bas dans les idées proposées). Nous vous encourageons à vous placer dans une démarche éco-responsable, en créant une application simple, efficace et épurée.

Contraintes

• Langage : javascript
• Durée de la séquence: 2 semaines

Objectifs globaux pédagogiques

• Découvrir le traitement de données en temps réel
• Explorer des possibilités d’animation web
• Se confronter aux choix d’architecture que présente la conception de tout applicatif
• Découper le projet en tâches et en domaines
• Maîtriser les commandes de base git
• 🌱 Amorcer une démarche d’éco-conception en questionnant ses choix fonctionnels et techniques

Notions abordées

• Appliquer l’asynchrone
• Se familiariser avec une bibliothèque d’animation graphique JavaScript
• Se poser la question de la durée de vie de son applicatif
• Manipuler du CSS, du HTML et du javascript
• Mettre en place un environnement Web permettant de travailler en groupe sur le même projet
• Créer un repo commun et utiliser les commandes de base git (git push, git pull, git commit)

Contexte

On peut installer des extensions à son navigateur, qui permettent d’ajouter des fonctionnalités non « natives » à celui ci. Une fonctionnalité « native » est une fonctionnalité déjà inclue dans le navigateur. Par exemple, l’inspecteur de Firefox et de Chrome sont natifs. Une fonctionnalité « non native » est par opposition une fonctionnalité qu’il faut installer en plus. Par exemple, l’extension Dyslexiefont permet d’avoir des fonctionnalités d’amélioration des pages web pour les personnes ayant besoin d’une petite aide pour faciliter la lecture.

Contraintes

• Langage : javascript
• Durée de la séquence: 2 semaines
• Navigateur: Chrome - dans cette fiche nous parlons d’autres navigateurs aussi pour vous donner une ouverture mais nous allons utiliser Chrome pour réduire le périmètre de ce projet

Objectifs globaux pédagogiques

• Découvrir l’écosystème d’un navigateur
• Explorer les mécanismes d’un navigateur (DOM, moteur exécution JS,...)
• Se familiariser avec la documentation d’un navigateur
• Découvrir comment coder une extension pour navigateur
• Manipuler du CSS, HTML et JavaScript
• Manipuler une API et l’utiliser pour créer son extension
• Développer une API et l’utiliser pour créer son extension
• Apprendre à s’organiser en équipe

Notions abordées

• Comprendre l’écosystème des navigateurs web
• Manipuler le DOM pour interagir avec les pages web
• Explorer et utiliser les WebExtensions API
• Gérer les événements utilisateur via JavaScript
• Créer et gérer des popups ou options d’extension en HTML et CSS
• Appliquer l’asynchrone avec Promises et async/await
• Utiliser les mécanismes de stockage local et synchronisé
• Configurer les permissions nécessaires pour accéder aux fonctionnalités du navigateur
• Développer et consommer des APIs pour enrichir l’extension
• Utiliser les outils de développement pour tester et déboguer une extension
• Gérer les contraintes de sécurité web telles que CSP et XSS
• Mettre en place une collaboration efficace avec des outils comme Git

Contexte

Le livrable de ce projet est : un réseau social développé avec un backend PHP. Le réseau social à développer, sous une forme type X ou Facebook, devra afficher les messages de ses utilisateur·ices sur différentes pages du site. Plusieurs fichiers HTML, CSS et requêtes SQL vont seront fournies. Grâce au développement du back-end de votre projet avec le langage PHP, vous serez en mesure d’aller chercher des informations dans la base de données existante et de les incorporer ensuite dans du code HTML pour afficher une page complète. La reprise d’un code existant est un exercice qui fait partie intégrante de la vie de le·la développeur·se, c’est l’une des compétences à développer sur ce projet. Il n’est pas toujours évident de se projeter à la place d’une autre personne pour comprendre sa logique. Cependant, cet exercice est très enrichissant et souligne l’importance d’écrire un code clair, compréhensible et bien commenté pour qu’il soit accessible aux membres et futur⸱e⸱s membres de son équipe.

Contraintes

• Back-end : Serveur MAMP, WAMP ou XAMPP (suite PHP / MySQL (ou MariaDB) / Apache)
• Front-end : HTML / CSS
• Durée de la séquence : 2 semaines

Objectifs globaux pédagogiques

• Je sais configurer un serveur MAMP, WAMP ou XAMPP
• Je sais expliquer comment se font les échanges d’informations entre le client et le serveur dans mon application
• Je sais générer du code HTML à partir d’un code écrit en PHP
• Je sais manipuler le paramètre GET
• Je sais créer des formulaires HTML avec PHP
• Je sais développer les composants d’inscription/authentification d’un site web
• Je sais reprendre du code existant et le modifier pour répondre à mes objectifs de développement

Notions abordées

• Architecture client-serveur et protocoles HTTP
• Configuration et utilisation de serveurs locaux (MAMP, WAMP, XAMPP)
• Manipulation des bases de données relationnelles avec MySQL ou MariaDB
• Exécution de requêtes SQL pour la récupération et la modification de données
• Intégration de données issues d’une base dans des pages HTML dynamiques via PHP
• Gestion des formulaires HTML avec des méthodes HTTP (GET et POST)
• Conception de systèmes d’authentification et de sessions utilisateur
• Manipulation des superglobales PHP (`$_GET`, `$_POST`, `$_SESSION`)
• Structuration du code en suivant les principes de maintenabilité et de lisibilité
• Travail avec un code existant : analyse, modification et documentation
• Sécurité des applications web (protection contre les injections SQL et failles XSS)
• Collaboration en équipe pour le partage et la modification de code
• Démarche d'écriture et compréhension de documentation technique

Contexte

L’intérêt de ce projet est de mettre en place une organisation pour mener à bien la création d’un produit qui vous a été commandé. Certaines contraintes de création sont donc imposées. Une plateforme de gestion d’un magasin de meubles est souvent un site web, sur lequel des utilisateurs s’inscrivent et interagissent avec le stock. Il y a différents types d’utilisateurs qui par conséquent ont des droits différents.

Contraintes

• Durée : 2 semaines
• Langage : libre et soumis au vote des équipes
• Équipes : imposées (la promotion se sépare en deux équipes, une qui commencera par travailler sur le front-end et l’autre sur le back-end, puis les deux équipes inverseront à la fin de la première semaine)
• Utilisation de bootstrap pour le CSS

Objectifs globaux pédagogiques

• Comprendre les étapes de la création d’une application web complète (de la conception au déploiement)
• Collaborer efficacement au sein d’une équipe en respectant des rôles définis
• Appliquer les principes de séparation des responsabilités entre le front-end et le back-end
• Découvrir et utiliser un framework adapté pour le développement back-end
• Réaliser une interface utilisateur responsive à l’aide de Bootstrap
• Implémenter un système de gestion des utilisateurs avec différents niveaux d’accès et permissions
• Sécuriser les mots de passe et les données sensibles selon les bonnes pratiques
• Se familiariser avec les outils de déploiement pour rendre l’application accessible en ligne
• Respecter les contraintes du projet pour s’adapter à un cahier des charges imposé
• Améliorer la lisibilité et la maintenabilité du code grâce à des pratiques de documentation et de structuration
• Gérer les conflits potentiels dans le code avec des outils de versionnement (Git)

Notions abordées

• Déploiement web
• Bases de données
• Interactions Front-end/Back-end
• Utilisation d’un framework pour le back-end
• Sécurisation des mots de passe

Contexte

Ce projet a pour objectif de développer une application web de microblogging permettant aux utilisateurs de partager de courts articles ou pensées. Il peut s'agir, par exemple, d'un blog de voyage pour relater des expériences vécues, d'un blog culinaire pour partager des recettes, ou encore d'une plateforme centrée sur une communauté ayant un intérêt commun. Ce projet vise à mettre en œuvre les concepts fondamentaux du développement web moderne, notamment à travers l'utilisation du framework Laravel. En adoptant ce framework basé sur le modèle MVC (Modèle-Vue-Contrôleur), les apprenants seront exposés à des principes avancés tels que la Programmation Orientée Objet, le TDD (Test-Driven Development) et la gestion des bases de données relationnelles. Le projet intègre également des pratiques professionnelles comme l’utilisation de Docker pour la conteneurisation, ce qui permet d’assurer une configuration standardisée et un déploiement efficace.

Contraintes

• Langage : PHP
• Framework : Laravel
• Durée de la séquence : 2 semaines

Objectifs globaux pédagogiques

• Je sais conceptualiser le projet en me basant sur les principes de la Programmation Orientée Objet et de TDD
• Je sais mettre en place un projet avec un Framework MVC
• Je sais mettre en place des tests automatisés : de fonctionnalité et browser tests
• Je sais mettre en place une Base De Données PostgreSQL et utiliser un ORM
• Je sais conteneuriser mon projet avec Docker
• Je sais mettre en place et respecter les rituels d’équipe

Notions abordées

• Comprendre l'architecture MVC et son rôle dans la structuration des applications web
• Manipuler les bases de données relationnelles et travailler avec un ORM (Eloquent de Laravel)
• Mettre en œuvre les principes de la Programmation Orientée Objet (classes, héritage, encapsulation, etc.)
• Utiliser le moteur de templates Blade pour la génération des vues dynamiques
• Configurer et exécuter des migrations pour la gestion de schémas de base de données
• Appliquer des tests unitaires, fonctionnels et end-to-end avec les outils intégrés de Laravel
• Gérer les routes et les middlewares pour contrôler l'accès aux fonctionnalités de l'application
• Intégrer des formulaires avec validation côté serveur pour sécuriser les entrées utilisateur
• Maîtriser la conteneurisation avec Docker pour assurer un environnement standardisé
• Travailler avec des systèmes de gestion de dépendances comme Composer
• Mettre en œuvre des fonctionnalités asynchrones comme l’envoi d’e-mails ou les notifications
• Utiliser les concepts avancés de Laravel, tels que les relations entre modèles et les requêtes personnalisées
• Collaborer efficacement en équipe grâce à des outils de gestion de version et à la planification des tâches