> Site STI de l’académie d’Orléans-Tours
site du ministere
site de l académie
Vous êtes ici : Accueil > Ressources pour STI2D > Spécialité SIN > [STI2D-SIN] - Utiliser les technologies du web dans les projets en (...)
Publié : 26 octobre 2015

[STI2D-SIN] - Utiliser les technologies du web dans les projets en respectant une démarche d’écoconception

Prototypage rapide en STI2D option SIN et en SI option ISN . Découvertes des langages HTML, CSS, javascript et PHP. Ecoconception web. [Mise à jour le 05/11/2015]

Les technologies du Web facilitent l’individualisation et la mise en commun des tâches au sein d’un groupe de projet. La figure ci-dessus illustre le travail réalisé par cinq élèves de terminale dans le cadre d’un projet formatif. Le site pour mobile est consultable en flashant le QrCode et le site pour PC en cliquant ici.

« Le fonctionnement des jauges et de l’icône de tendance météo du site pour PC peuvent être testées avec le site pour mobile. Pour cela, il suffit de déplacer les curseurs dans la page "Test" du site pour mobile et de cliquer sur "Envoyer" puis de recharger la page correspondant à la grandeur physique dans le site pour PC. »

Les tutoriels accessibles au téléchargement en bas de l’article constituent un exemple de progression pour préparer l’élève aux activités de projet.

Cet article liste les objectifs donnés à un groupe d’élèves lors d’un projet mettant en oeuvre les technologies du web et décrit les activités proposées dans des tutoriels. Ceux-ci sont répartis entre l’année de première et celle de terminale. Un extrait du document d’accompagnement rappel le contexte institutionnel dans lequel s’inscrivent ces activités.

Extrait du document d’accompagnement

Tous les systèmes pluri techniques actuels intègrent une part grandissante relative au domaine de l’information :
- soit afin d’optimiser leur fonctionnement ou performances par mesures d’éléments liés au contexte par des capteurs, paramétrage et compte rendu de fonctionnement via une IHM (interface homme-machine), automatisation de procédés, …
- soit parce qu’ils permettent de gérer et restituer des flux de données, notamment VDI (voix, données, images), dans les différents systèmes d’informations mis à la disposition des usagers : réseau de télécommunication, de télévision, accès et partage d’informations ou d’applications sur des réseaux locaux ou distants, etc.

Expérimentation en classe

Objectif : Lors de la restitution orale, l’élève doit être capable de décrire la chaîne d’information réalisée avec les équipements situés entre les capteurs qu’il aura mis en oeuvre et la page web qu’il aura codée.

  • Partie "Restitution" de l’information
    - Un serveur collecte les informations transmises par la partie "Acquisition" de l’information et les affiche dans les pages d’un site web. Le serveur transmet les commandes issues d’une IHM si l’installation gère des d’actuateurs. La communication est bidirectionnelle.
  • Travail demandé à un groupe d’élèves
    - Proposer plusieurs squelettes et plusieurs design pour les pages du site.
    - Concevoir l’arborescence des répertoires du site .
    - Concevoir le code du kit graphique.
    - Installer et paramétrer un réseau local.
  • Travail demandé à chaque élèves du groupe
    - Concevoir une page web à partir du kit graphique réalisé par le groupe.
    - Traiter les données (alarmes, moyenne, écart type, calcul de puissance, d’énergie etc.)
    - Intégrer les données ou le résultat d’un traitement dans le site sous la forme de widgets, d’images, de valeurs numériques etc.
  • Centre d’intérêt abordés dans la partie "Restituer l’information..."
    - CI4 : Gestion de l’information / Structures matérielles et logicielles associées au traitement de l’information.
    - CI5 : Communication entre systèmes.

Les tutoriels

Activités de découverte en première
NomTechnologieCIObjectif
Tuto1 HTML CI4 Coder la structure d’une page web
Tuto2 HTML - CSS CI4 Coder la présentation d’une page web
Tuto3 HTML - CSS- PHP CI5 Créer des pages web dynamiques avec un langage côté serveur
Activités d’approfondissement en terminale
NomTechnologieCIObjectif
Tuto4 HTML5 - jQuery mobile CI4 Concevoir un site web pour mobile
Tuto5 jQWidgets CI4 Présenter des données avec des widgets
Tuto6 JS - jQuery CI4 Créer des pages web dynamiques avec un langage coté client

Ecoconception

Ressources documentaires
-  Livre : Eco-conception web : les 115 bonnes pratiques lien
- Site  : Backbn.fr

- Activités de découverte : en cours de rédaction le 8/11/2015

Logiciels utilisés
- Editeur de texte : notepad++ ou Brackets, Visual Studio Code etc.
- Serveur HTTP + base de données : WAMP
- Frameworks : jQuery, jQWidgets

Mises à jour

Les fichiers au format Word sont mis à jour sur WebGE.

Voir en ligne : WebGE

Documents joints

  • Tutoriel 3 - PHP - Sujet, Zip, 1.7 Mo - Téléchargé 443 fois

    Objectif : Accéder à une page web avec un formulaire (identifiant et mot de passe). Afficher des données mémorisées sur un serveur dans une page web.

  • Tutoriel 1 - HTML - Sujet, Zip, 1.9 Mo - Téléchargé 560 fois

    Objectif : Coder la structure d’une page Web.

  • Tutoriel 1 - HTML - Correction, Zip, 489.8 ko - Téléchargé 432 fois

    Objectif : Coder la structure d’une page Web.

  • Tutoriel 1 - HTML - Code, Zip, 100.7 ko - Téléchargé 434 fois

    Sources et fichiers corrigés. Logiciel utilisé : éditeur de texte.

  • Tutoriel 2 - CSS - Sujet, PDF, 1.3 Mo - Téléchargé 498 fois

    Objectif : Coder la présentation d’une page Web.

  • Tutoriel 2 - CSS - Code, Zip, 344.1 ko - Téléchargé 394 fois

    Sources et fichiers corrigés. Logiciel utilisé : éditeur de texte.

  • Tutoriel 3 - PHP - Correction, Zip, 526.7 ko - Téléchargé 469 fois

    Objectif : Accéder à une page web avec un formulaire (identifiant et mot de passe). Afficher des données mémorisées sur un serveur dans une page web.

  • Tutoriel 3 - PHP - Code, Zip, 160.1 ko - Téléchargé 395 fois

    Sources et fichiers corrigés. Logiciels utilisés : éditeur de texte, Wamp.

  • Tutoriel 4 - HTML5 et jQuery Mobile - Sujet, Zip, 2.7 Mo - Téléchargé 380 fois

    Objectif : Réaliser un site web pour mobile, soigné et fonctionnel. L’installer sur un serveur http et effectuer les réglages permettant de le rendre accessible à un équipement Wifi.

  • Tutoriel 4 - HTML5 et jQuery Mobile - Correction , Zip, 255.1 ko - Téléchargé 397 fois

    Objectif : Réaliser un site web pour mobile, soigné et fonctionnel. L’installer sur un serveur http et effectuer les réglages permettant de le rendre accessible à un équipement Wifi.

  • Tutoriel 4 - HTML5 et jQuery Mobile - Code, Zip, 6.1 Mo - Téléchargé 531 fois

    Sources, fichiers corrigés et ressources jQuery. Logiciel : éditeur de texte Frameworks : jQuery, jQuery mobile

  • Tutoriel 5 - jQWidgets - Sujet, Zip, 2.2 Mo - Téléchargé 349 fois

    Objectif : Présenter des données avec des widgets à intégrer dans une page web.

  • Tutoriel 5 - jQWidgets - Correction, Zip, 790.7 ko - Téléchargé 399 fois

    Objectif : Présenter des données avec des widgets à intégrer dans une page web.

  • Tutoriel 5 - jQWidgets - Code, Zip, 4.8 Mo - Téléchargé 1004 fois

    Sources, fichiers corrigés. Logiciel : éditeur de texte Frameworks : jQuery, jQWidgets.

  • Tutoriel 6 - jQuery - Sujet, Zip, 10.8 Mo - Téléchargé 340 fois

    objectif : Créer une page web dynamique avec un langage "coté client".

  • Tutoriel 6 - jQuery - Code, Zip, 321.2 ko - Téléchargé 372 fois

    Sources, fichiers corrigés. Logiciel : éditeur de texte Frameworks : jQuery.