« STIC:STIC II - projet webmaster » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
mAucun résumé des modifications
 
(41 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic archive}}
== Le projet STIC II - Atelier Webmaster ==
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>


Cet exercice vous permet:
== Introduction ==
* De consolider vos connaissances sur le choix, l'installation, la configuration (et éventuellement) l'adaptation d'un portail
* De mener à bien un petit projet éducatif (ou similaire) qui nécessite l'utilisation d'un site web interactif
* De mener un travail en groupe


== Le projet webmaster ==
{{ bloc important | Le projet Webmaster a été une activité intégrée dans les cours STIC I et STIC II jusqu'à l'année académique 2020/2021, remplacé par la suite par des [[STIC:Ateliers techniques|ateliers techniques]] plus étroitement liés au projets du domaine STIC. }}


===Choix entre deux projets===
Le projet webmaster se composait de :


Deux types de projets possibles :
* Ateliers techniques obligatoires les lundi matin des périodes en présence 2, 3, 4, 5 et 6
* Une présentation du projet en classe lors de la période 6
* Le rendu d'un exercice dans le cadre du cours STIC II qui résume tout le travail fait au fil de l'année


# '''Portail''' : focus sur les contenus, l'architecture de l'information, le partage des ressources, etc.
=== Connaissances/compétences envisagées ===
# '''Application''' : focus sur le développement web, desktop ou embedded devices


====Projet 1: portail====
Les thèmes du projet webmaster peuvent varier selon les volées, mais en général le projet consiste à créer une application/site web qui puisse être intégré dans un contexte pédagogique et qui exploite les technologies web. Pour atteindre cet objectif, différents outils et technologies sont présentés pendant les ateliers techniques. À l'issue du projet webmaster, vous devez avoir acquis les connaissances/compétences suivantes :


Imaginez un projet qui nécessite un portail (blog, wiki, LMS, plateforme sociale, CMS, etc.) et une activité/scénario d'utilisation spécifique.
* Comprendre le fonctionnement d'une application web multi-utilisateur
* Savoir imaginer différentes rôles et permissions pour les différents acteurs qui utilisent l'application (e.g. administrateur, enseignants, étudiants, ...)
* Comprendre les différents éléments qui composent une application complexe (e.g. fichiers physiques, bases de données, ...)
* Savoir identifier le type de technologie qui mieux s'adapte aux objectifs de l'application (e.g. portail, application mobile, logiciel web, ...)
* Pouvoir installer des applications open-source et les configurer pour ses propres objectifs (e.g. [[Word press|WordPress]], [[Mediawiki]], [[Moodle]], ...)
* Comprendre le fonctionnement d'un langage de programmation côté-serveur (e.g. [[Node.js]])
* S'appuyer sur des outils qui facilite le développement d'un point de vue individuel et/ou collectif (e.g. ligne de commande, [[Git et Github]])


Implémentez le projet (option 1) :
=== Types de projet ===
* '''Installez et configurez''' un portail
* Éditez la page d'accueil
* Ajouter du contenu (c-a-d soutenir une activité/scénario d'utilisation)


;Exemples :
Selon le nombre d'étudiants par volée, le projet webmaster peut être individuel ou par groupe. En général, nous proposons deux types de projets :
* Portail communautaires pour enseignants du primaire - partage de ressources sur la lecture
# Le '''projet standard''' qui est proposé/requis consiste dans l'installation/configuration/adaptation d'une application web open-source (e.g. [[Word press|WordPress]], [[Moodle]], [[Mediawiki]], ...) d'un point de vue technique/administrateur ;
* Portail d'enseignement pour une institution universitaire - cours sur la cuisine
# Un '''projet alternatif''', proposé en option, est plus lié aux fondamentaux du développement web et représente une bonne option pour les étudiants intéressés par la suite à des stages/mémoires en développement (aucun prérequis informatique n'est cependant nécessaire).


;Tip :  
À savoir :
*Commencez par écrire une petite spécification: A quoi sert le portail, à qui, et définissez au moins une activité/scénario d'utilisation en plus de détails.


;Objectifs du projet :
* Les étudiants peuvent proposer leur propre projet ou intégrer/poursuivre un projet d'un autre cours du Master à condition qu'il y ait une partie technique substantielle ;
* Compétences pratiques dans la mise en place de portail/CMS utilisés souvent dans la "réalité"
* Le projet peut être fictif (i.e. limité aux objectifs d'apprentissages du cours) ou être utilisé par la suite dans un vrai contexte (e.g. projet personnel, institution/association, ...). Dans tout le cas, une installation manuelle sur le serveur tecfaetu.unige.ch est obligatoire, même si après les contenus sont développées ailleurs.
* End-user content


;Ressources :
== Ateliers techniques ==
* Voir volées précédentes


====Projet 2: application====
Pendant chaque atelier technique, une ou plusieurs technologies seront abordées d'un point de vue théorique et technique. Les éléments illustrés pendant les ateliers ont une double intérêt :


Imaginez une application qui puisse être utilisée dans un contexte d'apprentissage ou partage de connaissances/données utiles à l'apprentissage.
# Illustrer certains technologies/techniques, surtout open-source, qui sont utilisées dans le milieu technologique au sens large, et dans le milieu du développement plus en particulier ;
# Fournir des outils qui peuvent être par la suite adoptés pour le rendu de l'exercice final


Implémentez le projet (option 2) :
=== Programme des ateliers ===
* '''Implémentez une application''' avec [[Node.js]], [[Express.js]], [[Socket.io]] ou [[Electron]]
* Vous avez assez de liberté sur le type et le support de l'application (web, mobile, desktop, Internet of Things, ...)


;Exemples :
Les ateliers ont lieu le '''lundi matin de 09:00 à 12:30''' des périodes 2, 3, 4, 5, 6.
* Application qui favorise l'apprentissage collaboratif en temps réel (chat avec fonctionnalités, etc.)
* Application qui permet à l'enseignant de déterminer le contenu qui s'affiche sur les écrans des étudiants
* RESTful API qui permet le partage des données (par exemple depuis des capteurs/senseurs)


;Tip :  
* [[STIC:STIC I - Atelier technique 1]] (P2)
* Privilegiez une application simple mais fonctionnelle et bien structurée à une application avec plusieurs "features" mais qui ne sont pas abouties
* [[STIC:STIC I - Atelier technique 2]] (P3)
* [[STIC:STIC I - Atelier technique 3]] (P4)
* [[STIC:STIC I - Atelier technique 4]] (P5)
* [[STIC:STIC I - Atelier technique 5]] (P6)


;Objectifs du projet :
== Présentation du projet ==
* Compétences fondamentales sur le fonctionnement des applications web (requête/réponse, protocoles, etc.)
* Explorer des nouvelles technologies à appliquer au contexte de l'apprentissage


;Ressources :
Lors de la dernière semaine en présence (P6), le projet webmaster envisagé par l'étudiant (ou le groupe) doit être présenté en salle de classe. La présentation n'implique pas que le projet soit déjà terminé, car la finalisation du projet est prévue pour la fin de l'année académique dans le cadre d'un exercice STIC II (voir plus bas).
* Exemples Express.js : https://github.com/mafritz/stic-1-express-essentials
* Exemples Socket.io : https://github.com/mafritz/stic-1-socket.io-essentials


=== Technologies ===
La présentation sert à :


* Le portail doit être installé sur le serveur de TECFA ou chez un autre hébergeur
* Illustrer les objectifs du projet : à quoi ça sert ? quel est l'avantage (comparé à d'autres options, à la situation actuelle, ...) ?
* On conseille d'utiliser soit une architecture [[LAMP]] soit Node.js (c.f. les articles [[Node.js]], [[Express.js]] et [[Socket.io]])
* Définir le cadre d'application/utilisation : qui va l'utiliser ? qui va s'en occuper ? combien de rôles vous avez prévus (e.g. administrateur, éditeur, ..) ?
* Identifier et justifier la (les) technologie(s) utilisées ou à utiliser pour le dispositif final : pourquoi avez-vous choisi WordPress/Moodle/MediaWiki/... ? Quelles extensions (thèmes, plugin, ...) vous avez ajoutées et pourquoi ?
* Discuter de manière critique les avantages, limites, difficultés, etc. du projet


=== Utilisation de ressources ===
Durée de la présentation :


Vous pouvez réutiliser du matériel libre de droits ou des productions à vous (par exemple des animations de STIC-1 si elles sont de qualité). Exemple: Apprentissage du Japonais.
;* 5 minutes de présentation (pas plus)
;* 5/10 minutes de discussion (selon nombre d'étudiants/projets)


== Critères d'évaluation ==
Deux "types" de présentation sont envisageables, ainsi qu'un format "hybride" :
* Démo : si votre projet est déjà à un stade avancé de développement
* Présentation traditionnelle (PowerPoint avec maquettes, captures d'écran, etc.)
* Hybride : présentation traditionnelle + vidéo de démo/manipulation directe


===Dispositif===
===Démo===


(1) Le portail
Si vous envisagez faire une démo, pensez à créer un scénario d'utilisation, ne montrez pas une liste de fonctionnalités sans un fil rouge qui en détermine l'utilité. Types de démo possibles :
* Qualité du portail (à discuter)
* Est-ce qu'il correspond aux besoins ?
* Est-ce qu'il y a des contenus et/ou activités ?


(2) L'application
* Reproduire les premiers 5 minutes d'utilisation de l'application
* Qualité de l'application (est-ce que ça marche ?)
* Illustrez quelques cas pratiques de manipulation (e.g. ajouter une contribution, ...)
* Est-ce qu'elle correspond aux besoins ?
* Illustrez les fonctionnalités plus importantes dans la perspective des différents utilisateurs/rôles prévus (e.g. montrez ce qu'un utilisateur, un administrateur, ... peuvent faire)
* Si votre projet est destiné surtout à des contenus informatifs (e.g. Wiki, Blog), illustrez l'architecture de l'information (comment avez-vous organisé les contenu, etc.)


== A rendre ==
===Présentation traditionnelle===


'''(1) Un rapport'''
Si votre projet n'est pas encore fonctionnel, imaginez que vous présentez votre idée devant des potentiels "stakeholders" (commanditaire, utilisateurs potentiels, ...), par exemple :


Même structure que d'habitude pour les exercices STIC.
* À quel(s) type(s) de besoin(s) répond votre projet (e.g. "je veux donner des cours de statistique online")
* Qu'est-ce que votre projet amène de nouveau/de plus par rapport à la situation actuelle (e.g. l'institution X utilise des documents words sur un serveur pour leur base de connaissance -> passage à un Wiki)
* Quels sont les atouts du projet (pas forcément techniques, vous pouvez dire "mon blog sera édité par des experts du domaine...")
* Illustrez des projets similaires et identifiez points faibles (en quoi votre projet sera différent)
* Donnez une idée tangible du produit final (e.g. maquette, prototype, ...) et définissez la ou les technologies que vous allez utiliser (e.g. je vais installer un Wiki, Moodle, ...)


Placez le ici (vue SFTP):
===Hybride===
tecfaetu.unige.ch
/web/etu-maltt/wall-e/____/stic-2/ex14/
Exemple:
/etu-maltt/wall-e/dupond/stic-2/ex14/


'''(2) Contribution wiki'''
Une présentation de type hybride consiste à intégrer dans une présentation traditionnelle des vidéos de manipulation directe du dispositif développé. Ce type de présentation est particulièrement utile pour les raisons suivantes :


Contribution comme pour les autres exercices STIC. Si possible, faire une contribution en relation avec votre projet (d'un point de vue technique ou théorique).
* Elle évite le danger d'un problème technique qui empêche le fonctionnement du dispositif
* Elle limite la surcharge cognitive d'une double tâche (parler/manipuler en même temps)
* Elle permet d'ajouter à la manipulation du dispositif des indices visuels qui dirigent l'attention du public sur les éléments saillants
* Elle a une durée fixe qui vous permet de mieux planifier la durée totale de la présentation et, par conséquent, respecter les limites


'''(3a) Le portail'''
== Rendu du projet ==


Si vous utilisez le serveur de TECFA, '''le portail doit être installé à un endroit particulier'''
Le projet est à rendre en tant qu'exercice 16 du cours STIC II. Voir la page de la volée d'appartenance pour plus de détails. Le projet est évalué comme tout autre exercice et sa note est pondérée de la même manière (équivalent d'un 1/6 de la note finale). Il ne s'agit donc pas d'un projet équivalent aux projets des cours ERGO II, VIP II ou COMEL II.
  /projets/wall-e/dupond/stic-2/portail/
  http://tecfaetu.unige.ch/projets/wall-e/


Pour des raisons de sécurité, il sera uniquement accessible depuis l'université ou par VPN
== Aide ==


'''(3b) Application'''
Pour demander de l'aide, utilisez la page de l'exercice STIC II de votre volée :


À discuter selon le type d'application. En ligne général, un répositoire GitHub est le choix le plus simple.
* {{ Goblock | [[STIC:STIC II - exercice 16 (Aegir)]] }}


===Délais===
==Ressources==


Le projet final est à rendre pour la fin de la période 6 (donc fin de l'année), mais une présentation obligatoire (mais non évaluée) du projet est prévue lors de la dernière semaine en présence (à communiquer si le lundi ou le vendredi).
Voir les catégories de ce Wiki :


 
* [[:Catégorie:Technologies web]], en particulier [[:Catégorie:Logiciels de portail]]
[[Category:STIC]]
* [[:Catégorie:Programmation]]

Dernière version du 20 octobre 2021 à 14:21

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

Introduction

Le projet Webmaster a été une activité intégrée dans les cours STIC I et STIC II jusqu'à l'année académique 2020/2021, remplacé par la suite par des ateliers techniques plus étroitement liés au projets du domaine STIC.

Le projet webmaster se composait de :

  • Ateliers techniques obligatoires les lundi matin des périodes en présence 2, 3, 4, 5 et 6
  • Une présentation du projet en classe lors de la période 6
  • Le rendu d'un exercice dans le cadre du cours STIC II qui résume tout le travail fait au fil de l'année

Connaissances/compétences envisagées

Les thèmes du projet webmaster peuvent varier selon les volées, mais en général le projet consiste à créer une application/site web qui puisse être intégré dans un contexte pédagogique et qui exploite les technologies web. Pour atteindre cet objectif, différents outils et technologies sont présentés pendant les ateliers techniques. À l'issue du projet webmaster, vous devez avoir acquis les connaissances/compétences suivantes :

  • Comprendre le fonctionnement d'une application web multi-utilisateur
  • Savoir imaginer différentes rôles et permissions pour les différents acteurs qui utilisent l'application (e.g. administrateur, enseignants, étudiants, ...)
  • Comprendre les différents éléments qui composent une application complexe (e.g. fichiers physiques, bases de données, ...)
  • Savoir identifier le type de technologie qui mieux s'adapte aux objectifs de l'application (e.g. portail, application mobile, logiciel web, ...)
  • Pouvoir installer des applications open-source et les configurer pour ses propres objectifs (e.g. WordPress, Mediawiki, Moodle, ...)
  • Comprendre le fonctionnement d'un langage de programmation côté-serveur (e.g. Node.js)
  • S'appuyer sur des outils qui facilite le développement d'un point de vue individuel et/ou collectif (e.g. ligne de commande, Git et Github)

Types de projet

Selon le nombre d'étudiants par volée, le projet webmaster peut être individuel ou par groupe. En général, nous proposons deux types de projets :

  1. Le projet standard qui est proposé/requis consiste dans l'installation/configuration/adaptation d'une application web open-source (e.g. WordPress, Moodle, Mediawiki, ...) d'un point de vue technique/administrateur ;
  2. Un projet alternatif, proposé en option, est plus lié aux fondamentaux du développement web et représente une bonne option pour les étudiants intéressés par la suite à des stages/mémoires en développement (aucun prérequis informatique n'est cependant nécessaire).

À savoir :

  • Les étudiants peuvent proposer leur propre projet ou intégrer/poursuivre un projet d'un autre cours du Master à condition qu'il y ait une partie technique substantielle ;
  • Le projet peut être fictif (i.e. limité aux objectifs d'apprentissages du cours) ou être utilisé par la suite dans un vrai contexte (e.g. projet personnel, institution/association, ...). Dans tout le cas, une installation manuelle sur le serveur tecfaetu.unige.ch est obligatoire, même si après les contenus sont développées ailleurs.

Ateliers techniques

Pendant chaque atelier technique, une ou plusieurs technologies seront abordées d'un point de vue théorique et technique. Les éléments illustrés pendant les ateliers ont une double intérêt :

  1. Illustrer certains technologies/techniques, surtout open-source, qui sont utilisées dans le milieu technologique au sens large, et dans le milieu du développement plus en particulier ;
  2. Fournir des outils qui peuvent être par la suite adoptés pour le rendu de l'exercice final

Programme des ateliers

Les ateliers ont lieu le lundi matin de 09:00 à 12:30 des périodes 2, 3, 4, 5, 6.

Présentation du projet

Lors de la dernière semaine en présence (P6), le projet webmaster envisagé par l'étudiant (ou le groupe) doit être présenté en salle de classe. La présentation n'implique pas que le projet soit déjà terminé, car la finalisation du projet est prévue pour la fin de l'année académique dans le cadre d'un exercice STIC II (voir plus bas).

La présentation sert à :

  • Illustrer les objectifs du projet : à quoi ça sert ? quel est l'avantage (comparé à d'autres options, à la situation actuelle, ...) ?
  • Définir le cadre d'application/utilisation : qui va l'utiliser ? qui va s'en occuper ? combien de rôles vous avez prévus (e.g. administrateur, éditeur, ..) ?
  • Identifier et justifier la (les) technologie(s) utilisées ou à utiliser pour le dispositif final : pourquoi avez-vous choisi WordPress/Moodle/MediaWiki/... ? Quelles extensions (thèmes, plugin, ...) vous avez ajoutées et pourquoi ?
  • Discuter de manière critique les avantages, limites, difficultés, etc. du projet

Durée de la présentation :

  • 5 minutes de présentation (pas plus)
  • 5/10 minutes de discussion (selon nombre d'étudiants/projets)

Deux "types" de présentation sont envisageables, ainsi qu'un format "hybride" :

  • Démo : si votre projet est déjà à un stade avancé de développement
  • Présentation traditionnelle (PowerPoint avec maquettes, captures d'écran, etc.)
  • Hybride : présentation traditionnelle + vidéo de démo/manipulation directe

Démo

Si vous envisagez faire une démo, pensez à créer un scénario d'utilisation, ne montrez pas une liste de fonctionnalités sans un fil rouge qui en détermine l'utilité. Types de démo possibles :

  • Reproduire les premiers 5 minutes d'utilisation de l'application
  • Illustrez quelques cas pratiques de manipulation (e.g. ajouter une contribution, ...)
  • Illustrez les fonctionnalités plus importantes dans la perspective des différents utilisateurs/rôles prévus (e.g. montrez ce qu'un utilisateur, un administrateur, ... peuvent faire)
  • Si votre projet est destiné surtout à des contenus informatifs (e.g. Wiki, Blog), illustrez l'architecture de l'information (comment avez-vous organisé les contenu, etc.)

Présentation traditionnelle

Si votre projet n'est pas encore fonctionnel, imaginez que vous présentez votre idée devant des potentiels "stakeholders" (commanditaire, utilisateurs potentiels, ...), par exemple :

  • À quel(s) type(s) de besoin(s) répond votre projet (e.g. "je veux donner des cours de statistique online")
  • Qu'est-ce que votre projet amène de nouveau/de plus par rapport à la situation actuelle (e.g. l'institution X utilise des documents words sur un serveur pour leur base de connaissance -> passage à un Wiki)
  • Quels sont les atouts du projet (pas forcément techniques, vous pouvez dire "mon blog sera édité par des experts du domaine...")
  • Illustrez des projets similaires et identifiez points faibles (en quoi votre projet sera différent)
  • Donnez une idée tangible du produit final (e.g. maquette, prototype, ...) et définissez la ou les technologies que vous allez utiliser (e.g. je vais installer un Wiki, Moodle, ...)

Hybride

Une présentation de type hybride consiste à intégrer dans une présentation traditionnelle des vidéos de manipulation directe du dispositif développé. Ce type de présentation est particulièrement utile pour les raisons suivantes :

  • Elle évite le danger d'un problème technique qui empêche le fonctionnement du dispositif
  • Elle limite la surcharge cognitive d'une double tâche (parler/manipuler en même temps)
  • Elle permet d'ajouter à la manipulation du dispositif des indices visuels qui dirigent l'attention du public sur les éléments saillants
  • Elle a une durée fixe qui vous permet de mieux planifier la durée totale de la présentation et, par conséquent, respecter les limites

Rendu du projet

Le projet est à rendre en tant qu'exercice 16 du cours STIC II. Voir la page de la volée d'appartenance pour plus de détails. Le projet est évalué comme tout autre exercice et sa note est pondérée de la même manière (équivalent d'un 1/6 de la note finale). Il ne s'agit donc pas d'un projet équivalent aux projets des cours ERGO II, VIP II ou COMEL II.

Aide

Pour demander de l'aide, utilisez la page de l'exercice STIC II de votre volée :

Ressources

Voir les catégories de ce Wiki :