Exemples de projets :
Projet : Fuseaux horaires.
Situations d'accroches :
Vous prenez l'avion pour une destination lointaine.
A quelle heure arriverez vous ?
Vous contactez une personne à l'étranger.
Comment être sur de ne pas le déranger en pleine nuit ?
Objectifs :
le but du projet est de réaliser une page web donnant les heures locales de différents pays (ou zones géographiques).
Une première version peut être la création d'un tableau ou d'une liste constitué des capitales des pays touristiques.
Un click sur ces éléments donnent l'heure locale dans cette ville et affiche des images (par exemple de nuit ou de jour) de cette ville.
Une deuxième version peut consister à afficher une carte du monde.
Le passage de la souris sur les différents pays affichent l'heure locale.
Un click affiche différentes images touristiques du pays.
Ces deux versions nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Utilisation de l'objet date.
Gestion d'un calendrier.
Utilisation de tableau.
Gestion d'événements.
Canvas pour la deuxième version.
Projet : Flash-codes.
Situation d'accroche :
Les flash codes sont omniprésents dans notre vie quotidienne, on les retrouve dans les magazines, sur les boîtes de céréales, sur les DVD, les programmes télé, les documents administratifs, etc. Les utilisateurs sont de plus en plus nombreux à les utiliser pour accéder rapidement à des informations sur Internet.
Objectifs :
L'idée est de comprendre les principes techniques en jeu dans ces codes graphiques, de rechercher les utilisations possibles de ce type de codage et de créer un générateur de flash codes simples ainsi qu'un programme de relecture et de réfléchir à des systèmes de détections/corrections d'erreurs.
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Connaitre et utiliser la décomposition d'une image en pixels.
L'utilisation de l'objet Canvas qui permet de générer des images en javascript.
Projet : Messages codés. Chiffre de César.
WP NSTQQCP OP NPDLC PDE FY NSTQQCPXPYE ALCOPNLWLRP.
Situation d'accroche :
Vous désirez communiquer avec un correspondant en utilisant des messages codés .
Une méthode de chiffrement connue en cryptographie est le chiffre de César.
Cette méthode consiste à décaler d'une longueur fixée chacun des caractères du texte à coder .
Objectifs :
L'idée est de réaliser une page HTML permettant de coder un texte et de le décoder par cette méthode.
Et pourquoi pas créer un service d' envoi et de réception de messages codés.
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
L'utilisation de l'objet String (chaîne de caractères ) .
La gestion de ces chaînes de caractères dans Javascript.
Projet: Traitement d'images :
Situation d'accroche :
Extraire les composantes RGB d'une image.
Transformer une image en couleurs en une image en niveaux de gris.
Extraire des contours dans une image...
Objectifs.
L'idée est de réaliser une page HTML proposant différents traitements d'une image.
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Connaitre et utiliser la décomposition d'une image en pixels.
L'utilisation de l'objet Canvas qui permet de générer des images en javascript.
Projet : Robots ménagers.
Situation d'accroche :
Des robots faisant le ménage à notre place, le rêve !
Objectifs :
l'idée est de créer un robot permettant de faire le ménage au sol.
Le robot « lego NXT » doit parcourir toute la pièce en évitant les obstacles.
Une simulation pourra être créé pour visualiser et étudier le parcours du robot afin d'optimiser la surface nettoyée.
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Programmation du robot lego NXT
L'utilisation de l'objet Canvas qui permet de générer des images en javascript.
Projet : Réalisation d'un ou plusieurs jeux.
Situation d'accroche n°1 :
Combien de temps passez vous à jouer sur votre PC ou sur votre smartphone ?
N'avez vous jamais jouer à certains jeux proposés sur votre PC ou votre smartphone ?
Objectifs :
L'idée est de créer un jeu plus ou moins évolué. ( ou plusieurs)
Jeux de Nim (type Fort Boyard), bataille navale, 421, Mastermind, puissance 4, memory, etc...
Situation d'accroche n°2 :
Apprendre en s'amusant, c'est facile ! Avec un ordinateur ou une tablette, c'est encore mieux.
Objectifs :
L'idée est de créer des jeux permettant l'apprentissage de certaines notions de bases. (Lecture, calculs, utilisation d'une souris ou autres)
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Gestion d'événements sur une page web.
Insertion d'u n chrono, d'un score etc...
Gestion des images.
Projet : Arbre fractale.
Situation d'accroche :
Qu'est ce qu'un arbre fractale ?
Objectifs :
Créer une page HTML permettant de créer un arbre fractale. (certains paramètres pourront être changés pour obtenir différents arbres)
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
L'objet Canvas qui permet de créer des images avec Javascript.
Des notions de mathématiques.
Projet : coordonnées GPS utilisation de l'API google maps.
Situation d'accroche :
Après une bonne balade à vélo, vous souhaitez à partir de coordonnées GPS retrouver votre parcours, le profil du parcours, la distance parcourue etc...
Objectifs :
Créer une page HTML qui à partir de données GPS d'un trajet quelconque (pédestre, vélo, moto, auto, bateau, …) permet d'exploiter ses caractéristiques :
affichage du parcours sur une carte type Google Maps
affichage des informations du parcours (distance parcourue, vitesse moyenne, vitesse max, temps d'arrêt, …),
affichage de la variation de l'altitude durant le parcours,
...
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Gestion d'événements sur une page web.
L'API GoogeMaps.
L'objet Canvas qui permet de créer des images en javascript.
Projet : Trions nos déchets !!
Situation d'accroche :
Le tri sélectif des déchets en milieu urbain est particulièrement difficile( taux important d'habitat vertical).
Un ville souhaite améliorer ce tri et décide d'opter pour un nouveau système de collecte.
L'idée est de trier les déchets dans des sacs poubelles de couleurs différentes, d 'effectuer le ramassage puis de trier ces sacs suivant sa couleur en utilisant un lecteur optique.
Objectif :
se documenter sur l'usage des couleurs choisies pour le tri.
Réaliser une station de triage en utilisant la brique NXT du robot Lego.
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Le robot lego NXT.
Le codage RGB des couleurs.
Projet : Réalisation d'un clavier virtuel et cryptage des données.
Situation d'accroche :
Vous souhaitez accéder à vos comptes bancaires sur internet.
Le site internet de votre banque vous propose de saisir un mot de passe sur un clavier virtuel.
Objectifs:
Créer un clavier virtuel du type banque en ligne.
Réfléchir aux problèmes de transmissions des données sur le net. ( cryptage des données, problème de sécurité, etc...).
La réalisation de ce projet nécessitent l'utilisation des différentes notions suivantes :
HTML/CSS.
Gestion d'événements sur une page web.