Aller au contenu
TECHNOLOGIES WEB

Premier Site

Exercice : Premier site boosté IA : choisis ton projet (ambitieux)

Objectifs

  • Prendre en main VS Code et produire un site HTML/CSS/JS affiché dans le navigateur.

  • Piloter un assistant IA pour obtenir du code et des explications pas à pas.

  • Viser un rendu impressionnant : design léché, animations, interactivité.

Projets au choix (choisis un thème)

1) Site créatif + animations GSAP

Sujet libre : toi, une passion, ton chat, un mini-portfolio, etc.
Attendus minimum :

  • 2–4 pages reliées par une navigation propre.

  • Animations GSAP (timelines, reveals, micro-interactions ; scroll possible). GSAP est une librairie d’animation pro qui gère timelines, easings, scroll, etc. (GSAP)

  • Un design cohérent (typo, palette, espacements) + 1–2 interactions JS (ex. dark mode, accordéon, formulaire simple).

Astuce : GSAP + plugins (ex. ScrollTrigger) via CDN suffisent pour un site qui “respire”. (GSAP)

2) Jeu 3D dans le navigateur

Deux pistes possibles :

  • Simu/expérience 3D (ex. mini vol “low-poly”, exploration libre), ou

  • Jeu de course (circuit simple, checkpoints, chrono).
    Attendus minimum :

  • Scène 3D three.js avec caméra contrôlable (pivoter/zoomer = OrbitControls). OrbitControls est l’add-on standard pour orbiter autour d’une cible. (threejs.org)

  • Déplacements de base et collisions légères (optionnelles si vous restez exploration pure).

  • Un HUD minimal (score/chrono/vitesse).

Alternative tout-en-un : Babylon.js si vous préférez sa “boîte à outils” intégrée.

3) Jeu arcade 2D

  • Platformer / runner / shmup : sprites, obstacles, score, “game over”.
    Attendus minimum :

  • Mouvement joueur + collisions + score.

  • Soit Phaser 3 (scènes, input, collisions prêts à l’emploi), soit Canvas 2D natif (boucle requestAnimationFrame, dessins, collisions). Phaser propose un guide “getting started” très clair ; Canvas a une doc MDN solide. (Phaser)

4) Projet audio-réactif

  • Visualiseur audio (barres/onde/particules) réactif à un son (fichier ou micro).
    Attendus minimum :

  • Lecture/pause + visualisation en Canvas (ou DOM/SVG).

  • Web Audio API pour analyser le signal (AnalyserNode, spectre/onde). MDN couvre le graphe audio (AudioContext, nœuds, bonnes pratiques). (MDN Web Docs)

Règles du jeu

  • Tout se fait avec un assistant IA : posez vos questions, demandez les blocs de code complets et les explications courtes.

  • Zéro installation lourde : CDN pour les libs (GSAP, three.js, Phaser) ; HTML/CSS/JS simples. GSAP/three.js/Phaser ont docs et starters accessibles. (GSAP)

  • Ambition réaliste pour quelques heures : finissez quelque chose de jouable/consultable et joli.