Le marathon débute le mercredi 14 décembre 2016 à 8h15 par une présentation du sujet et se termine le jeudi 15 décembre 2016 à 18h. Le vendredi 18 décembre après midi (13h30 - 16h) est consacré à la présentation des projets.

L'IUT de Lens est ouvert exceptionnellement jusque 22h00 ce mercredi afin de vous laisser à disposition les ressources informatiques de l'IUT. Les salles machines des département Informatique et Médias Numériques sont à votre disposition pour ce projet.

Pour les équipes en DUT, vous devez utiliser le framework PHP nova. Pour les équipes en LP, il vous est demandé de réaliser site à l'aide du CMS wordpress. Des enseignants des 2 départements sont à votre disposition pour des éventuels conseils.

Salles à disposition :

• Salles Informatiques :
  • 1SE, 4SE, 6SE et 7SE au département informatique
  • 101F et 102F, 103F au département MMI
• Salle de pause (le café est fourni :-)
  • Salle 2F (et/ou 1F) du département MMI

Le sujet

Le but de ce projet est de développer un site permettant aux internautes de raconter une histoire complète (au sens de fiction) selon un schéma préétabli :

• Titre
• Texte de présentation (pitch) : Dans un premier temps, vous présentez votre travail. Ce travail est censé éveiller la curiosité du lecteur. Vous avez toutes les cartes en main pour retenir son attention : intelligence dans le choix du sujet, humour, etc. Vous disposez pour ce pitch d’une quarantaine de mots (disons approximativement plus ou moins 10 %.)
• Une série d'images. Chaque image possède un titre et un texte. Sous chaque photo, vous disposez d’un espace de 80 mots environ pour raconter votre histoire. Le texte situé sous chacune de vos photos sera consacré à la narration. Vous ne pouvez pas décrire simplement la photo et votre histoire devra être lisible sans les photos.

Les histoires créées pourront par la suite être visualisées par les internautes. Seuls les internautes inscrits et connectés auront la possibilité de créer des histoires, de les aimer et de les commenter. Les histoires seront visibles par tout le monde.

Cet exemple a été conçu pour vous permettre de vous représenter ce qu’on attend de vous. Merci de prendre le temps de lire et de décomposer les consignes avant d’appeler au secours. On est là, on arrive, toutes les brigades sont de sortie mais merci de prendre le temps...

Le modèle de données

Base de données

Voici donc le contenu de la base de données (toutes les tables ont une clé primaire nommée id.

• user : (en anglais) un utilisateur possède un mail, un username et d'autres champs inutiles pour la suite du projet. Cette table provient directement du framework Nova
• histoire : une histoire possède un titre, un pitch, une date de création, et a été créé par un utilisateur
• image : une image de l'histoire possède un titre, une légende et une url (l'image associée à la photo).
• commentaire : un commentaire est fait à une date donnée par un utilisateur sur une histoire donnée et possède un texte
• la table like permet de savoir quels utilisateur aime quelle histoire. Elle provient donc d'une relation N-N

La base de données qui vous est fournie contient une histoire et des photos, celle de Martin Scorsese aux oscars 2007. De plus, 3 utilisateurs existent dans la base. Tous ont le même nom de login que de mot de passe. Il s'agit de admin, scorsese et fanmovie.

Travail à réaliser

Vous devez réaliser :

• Le code de l'application
• La charte graphique avec le rendu CSS (n'oubliez pas le logo).
• 3 histoires, dont une rédigée en anglais.

Programmation

Affichage des différentes histoires

C'est la page principale du site. On doit pouvoir voir les différentes histoires disponibles sur le site web. Bien entendu un clic sur une histoire nous permettra de la visualiser entièrement. Quelques possibilités :

• Affichage des 5 dernieres
• Possibilité de visualiser une histoire au hasard
• Possibilité de filtrer les histoires (utilisateur, durée...)
• Champ de recherche dans les noms.

Enregistrement d'une histoire dans la base de données

Il faut créer un (plusieurs?) formulaires pour laisser les utilisateurs authentifiés créer leur histoire. Ce formulaire devra donc permettre la saisie des différentes informations.

• Titre de l'histoire
• pitch
• Toutes les photos de l'histoire, avec pour chacune d'entre elles, le titre, la légende...

Affichage d'une histoire

Les possibilités sont nombreuses : caroussel, timeline...

Autres fonctionnalités

Les histoires

Vous devez réaliser 3 histoires :

• 2 en français. Vous devez utiliser entre 8 et 12 images (photos, illustrations, etc.) dans vos histoires. Pour rappel, le pitch de l'histoire doit faire environ 40 mots et chaque légende de photo doit en faire environ 80.
• 1 en anglais, qui n'est pas une traduction des deux premières. Ici, Votre pitch fera environ 30 mots et chaque photo sera accompagnée d’un texte de 60 mots environ. Rappel précieux : écrire en anglais, ce n’est pas écrire en français puis traduire !!

Que ce soit en anglais ou en français, la qualité de votre narration et l'intelligence du texte seront appréciées. Puisque c’est une création narrative, on peut apprécier la tonalité de votre texte, son humour, l’angle rédactionnel choisi. Nous apprécierons l’histoire autant que la manière de la raconter. Bien entendu, le choix des illustrations/photos sera également un élément important de votre histoire. Dernier point, soignez le fond autant que la forme ( qualité grammaticale, étendue lexicale, cohérence…).

Si vous avez des questions, nous passerons plus ou moins sans arrêt pour y répondre. Des permanences en ligne seront mises en place également.

Vous devez déposer sur moodle votre rédaction (en français et en anglais) au format pdf pour le jeudi 15 décembre 2016 à 18h00. Attention ce sera fermé à 18h15.
Pour les étudiants de DUT : Un étudiant informaticien déposera deux fichiers pdf : un pour la rédaction en français et l'autre pour celle en anglais. Deux devoirs sont créés dans Moodle / INFO / DUT2 / communication / section 9. Le fichier comportera les noms des membres du groupe (MMI et INFO). Pour les LP Créaweb : trois devoirs ont été créés sous moodle / MMI /LPCréaWeb / Marathon du WEB.

Design Graphique

Le design est laissé à votre imagination. A vous de jouer. Le style ne doit pas nécessairement coller aux différentes histoires que vous allez raconter.

Notation

Votre projet est noté sur 100 points.

• 50 points pour le code (PHP + CSS)
• 20 points pour la charte graphique
• 20 points pour les trois projets à raconter (dont la partie en anglais)
• 10 points pour la soutenance

Cela ne veut pas dire que vous pouvez faire abstraction de l'un de ces points. Nous pourrons mettre en place des malus si vous faites l'impasse sur l'un d'eux.

Recommandations

• Si vous utilisez des scripts/images/styles dont vous n'êtes pas l'auteur, pensez à vérifier les droits d'auteurs
• Si vous utilisez bootstrap, évitez d'utiliser toutes les fonctionnalités qu'il offre pour ne pas avoir un site "comme tout le monde"
• Il y a quand même un peu de travail à réaliser ;-), vous êtes 6 (ou 7) par groupe, pensez à vous répartir le travail !!!!!
• Qui s'occupe du formulaire de création d'une histoire (long...)
• Qui s'occupe de l'affichage de la liste des histoire, d'une histoire particulière...
• Qui s'occupe du design
• Et les histoires, et l'anglais !!

Le serveur WEB

Nous avons mis à votre disposition un serveur web/mysql/php sur lequel la base de données est installée et le framework nova est configuré, et cela pour chaque groupe.
suivez le lien
Pour les étudiants de LP, la base de données est installée. Vous devez installer wordpress et utiliser la base de données fournie (vous n'avez pas les droits pour créer une nouvelle base).

Rappels des différents liens

• phpMyAdmin sur la machine marathon
• La page sur la machine marathon
• La FAQ. Regardez ici avant de poser des questions auxquelles on a déjà répondu