STIC:STIC II - projet webmaster

Cette page fait partie des cours STIC I et STIC II

Le projet STIC II - Atelier Webmaster

Cet exercice vous permet:

• 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

Choix entre deux projets

Deux types de projets possibles :

1. Portail : focus sur les contenus, l'architecture de l'information, le partage des ressources, etc.
2. Application : focus sur l'interactivité, l'apprentissage collaboratif, etc.

Projet 1: portail

Imaginez un projet qui nécessite un portail (blog, wiki, LMS, plateforme sociale, CMS, etc.) et une activité/scénario d'utilisation spécifique.

Implémentez le projet en groupe de 2 ou 3 participants (option 1)

• Installez et configurez un portail
• Éditez la page d'accueil
• Ajouter du contenu (c-a-d soutenir une activité/scénario d'utilisation)

Exemples

• Portail communautaires pour enseignants du primaire - partage de ressources sur la lecture
• Portail d'enseignement pour une institution universitaire - cours sur la cuisine

Tip

• 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

• Compétences pratiques dans la mise en place de portail/CMS utilisés souvent dans la "réalité"
• End-user content

Ressources

• Voir volées précédentes

Projet 2: application

Imaginez une application qui favorise l'apprentissage collaboratif en temps réel dans le cadre d'une activité/scénario d'utilisation spécifique.

Implémentez le projet en groupe de 2 ou 3 participants (option 2)

• Implémentez une application avec Node.js, Express.js et Socket.io (pas obligatoire mais conseillé pour apprentissage collaboratif)
• Créez au moins une page d'accueil qui introduit l'application et permet d'y accèder (e.g. login)
• Créez une page avec l'application

Exemples

• 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

Tip

• Privilegiez une application simple mais fonctionnelle et bien structurée à une application avec plusieurs "features" mais qui ne sont pas abouties

Objectifs 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 collaboratif

Ressources

• Exemples Express.js : https://github.com/mafritz/stic-1-express-essentials
• Exemples Socket.io : https://github.com/mafritz/stic-1-socket.io-essentials

Technologies

• Le portail doit être installé sur le serveur de TECFA ou chez un autre hébergeur
• On conseille d'utiliser soit une architecture LAMP soit Node.js (c.f. les articles Node.js, Express.js et Socket.io)

Utilisation de ressources

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.

Critères d'évaluation

Dispositif

(1) Le portail

• 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

• Qualité de l'application (est-ce que ça marche ?)
• Est-ce qu'elle correspond aux besoins ?
• Est-ce que les interactions prévues sont bien développées ?

Contribution EduTechWiki

La contribution compte pour 1/5 de la note globale. Contribution en relation au type de projet choisi.

Pour le portail :

• Fiche portail (Entrée edutechwiki présentant la technologie utilisée): qualité et exhaustivité des éléments. Si plusieurs personnes partagent la même technologie, il faut collaborer, vous pouvez vous partager les tâches.

Pour l'application:

• Améliorer pages Express.js et Socket.io (plus que simple correction des fautes)
• Créer des nouvelles pages :
  • Théoriques : illustrer le fonctionnement d'une technologie (e.g. protocole web socket) ou d'un type de programmation (e.g. Test-Driven development, Model-View-Controller, ...)
  • Techniques : créez un tutoriel sur une nouvelle bibliothèque JS, un module Node.js (e.g. un template engine), etc.

Rapport

• Qualité des spécifications: A quoi sert le portail ...
• Réflexions sur le design du projet (ce qui a marché et ce qui n'a pas marché", réflexion sur le résultat, discussion de perspectives

A rendre

(1) Un rapport

Chaque membre du groupe doit avoir une page rapport comme pour les autres exercices. Si vous avez une partie commune du rapport insérez un lien vers une page HTML qui contient le texte commun. Le rapport individuel doit à minima présenter le lien vers le portail et la contribution wiki.

• Titre, auteur, date
• Il comprend une discussion du problème, une simple spécification (cahier des charges), une description de l'implémentation et une évaluation
  • Si vous avez fait un rapport commun, spécifier le lien
• Lien vers le portail
• Lien vers la contribution wiki

Placez le ici (vue SFTP):

tecfaetu.unige.ch
/web/etu-maltt/volt/____/stic-2/portail/

Exemple:

/etu-maltt/tetris/dupond/stic-2/portail/

(2) Contribution wiki

En rélation avec le type de projet que vous avez choisi. Contribution individuelle, elle doit figurer dans votre rapport.

(3) Le dispositif

NB: Un seul membre du groupe installe le dispositif.

(3a) Le portail

Si vous utilisez le serveur de TECFA, le portail doit être installé à un endroit particulier

 /projets/tetris/dupond/stic-2/portail/
 http://tecfaetu.unige.ch/projets/utopia/

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

(3b) Application

Les détails seront disponibles dans les prochaines semaines (Mattia A. Fritz (discussion) 26 février 2016 à 18:33 (CET))

Délais

Dates:

• Première version (totalement fonctionnelle): Dimanche, 8 Mai minuit.
• On discutera les projets lors de la période 6. Chaque groupe montrera brièvement ce qu'il/elle a fait (environ 5-10 minutes)
• Version finale: 27 mai.

Groupes/Projets

Modifier le tableau suivant pour définir les projets. Si vous voulez, vous pouvez demander un feedback en envoyant un petit canevas (max 1 page) à Stéphane et Mattia avant de vous lancer dans l'implémentation.

#	Noms (max 3)	Projet (1 ou 2)	Brève description du projet
1	Ludovic, Fatima & Kim	1	Portail destiné aux étudiants TRM de la HEdS concernant le positionnement radiologique.
2	Nathalie & Regis & Stéphanie	1	Portail destiné aux moniteurs JS de Streethockey portant sur la “Planification et mise en place de l'entraînement"
3	Lydie & Joyce & ?	1	Portail "CAPchef" destiné aux élèves de CAP cuisine venant en support des cours de technologie professionnelle
4	Alexandra et Pedro	1	Portail "Mens sana in corpore sano" programme d'une semaine pour une remise en forme physique, alimentaire et mentale :)
5	Sébastien et Monika	2	PIKA - Web app pour apprendre le vocabulaire
6
7
8
9
10
11
12
13
14
15