Projet JCK1401 Présenté dans le cadre du cours de

programmation Web avancée

Mars 2014

version 1.0

Sommaire

1. Concept...................................................................................................................................................................................................................................... 3

2. Description sommaire du site........................................................................................................................................................................... 3

3. Arborescence et description des sections.......................................................................................................................................... 4

4. Structure de dossiers et de fichiers........................................................................................................................................................... 6

5. Échéancier.............................................................................................................................................................................................................................. 7

6. Critères de correction................................................................................................................................................................................................ 8

7. Technologies utilisées et précisions sur le site Web.............................................................................................................. 9

8. Autres informations relatives à ce travail...........................................................................................................................................9

2JCK1401 Mars 2014

1. Concept

Portail web créé par des étudiants pour des étudiants, cette plateforme vise à créer des ponts entre les finissants et les agences qui sont constamment à la recherche de talents en design et en web. Tout étudiant ayant terminé ses études depuis moins de deux ans pourra créer et gérer son portfolio en ligne et faire valoir ses compétences sur un site qui sera consulté régulièrement par des agences et d’autres employeurs en recherche de nouveaux employés.

Objectifs du site :

Offrir une vitrine gratuite à tout finissant souhaitant se faire ‘remarquer’ par une agence ou un autre employeur

Faciliter le recrutement pour les agences et les autres employeurs

Modèle d’affaires :

Les agences pourront parcourir le site et voir les portfolios des finissants mais devront payer une somme (à déterminer) pour avoir accès au nom de famille ainsi qu’aux coordonnées des candidats potentiels

2. Description sommaire du site

Design jeune, mais très épuré (important de mettre l’emphase sur les portfolios des finissants et non sur le design du site comme tel)

Site bilingue User-driven content (chaque étudiant pourra créer son portfolio et créer son profil par lui-même) Possibilité de faire des recherches par champ (voir les champs dans la section ‘création votre

portfolio’)

3JCK1401 Mars 2014

4JCK1401 Mars 2014

3. Arborescence et description des sections

SUR CHAQUE PAGE : Ang / Fran, boutons ou liens ‘créer votre portfolio (inscription)’, ‘connexion’, ‘oubli de mot de passe’ACCUEIL : Texte descriptif ‘Vous êtes une agence?’, texte descriptif ‘Vous êtes étudiant ou finissant?’ À PROPOS : Texte de trois paragraphes qui explique le concept, l’historique, les objectifs du site, etc. FAQ : Une section questions et réponsesCONTACTEZ-NOUS : Les coordonnées pour nous joindre

5JCK1401 Mars 2014

ACCUEIL

À PROPOS BOTTIN - PORTFOLIOS

SECTION MEMBRE

GESTION DU PORTFOLIO

MODIFICATION DU PROFIL(courriel, mot de passe)

FAQ CONTACTEZ-NOUS

BOTTIN - PORTFOLIOS :

En arrivant sur cette page, on aperçoit un répertoire des sommaires des portfolios (nom + 1 photo d’une réalisation) classés en ordre des derniers portfolios qui viennent d’être créés.

Cliquer sur le sommaire d’un portfolio donne accès au portfolio complet EN PHASE 2 (donc ne pas à être fait dans le cadre du cours) : Sur chaque page de portfolio

complet figure un bouton ‘contacter le candidat – en cliquant sur ce bouton, un module de paiement (paypal?) apparaît et le navigateur doit inscrire ses informations pour payer, possibilité de créer un compte et payer pour plusieurs à la fin lorsqu’on passe au checkout, module de recherche par champ (voir la section téléchargez votre portfolio pour les sections)

GESTION DU PORTFOLIO : (champs à remplir) Prénom, Nom de famille, téléphone et courriel (seront dévoilés seulement lorsque l’agence aura payé et

seront dévoilés par messagerie privé à l’agence seulement. Donc pour la phase 1, jamais affiché au public),

École, Domaine d’étude, Diplôme obtenu en (année ou possibilité de cocher non complété), Portfolio, possibilité de créer jusqu’à 5 réalisations – photo + plus texte (descriptif de max 150 mots,

les specs des photos doivent être fournies), Compétences (texte de 150 mots max), Ce que je souhaite développer en agence (texte de 150 mots max), Ce que je peux apporter à une agence (texte de 150 mots max), Autres infos que je voudrais communiquer, (texte de 150 mots max),

L'ENREGISTREMENT, LA CONNEXION ET LE PROFIL

Pour l'inscription et la connexion au site Web, un courriel et un mot de passe doivent être spécifiés. Ceux-ci sont par la suite modifiable dans la section "Modification du profil".

6JCK1401 Mars 2014

7JCK1401 Mars 2014

4. Structure de dossiers et de fichiers

DBCe dossier contiendra plusieurs scripts SQL.

structure.sql  : Les énoncés SQL permettant de construire la base de données data_*.sql  : Les énoncés SQL permettant d’insérer les données initiales et nécessaires au bon

fonctionnement du site Doc (optionnel)Le dossier Doc contiendra tous les documents textes (Word, PDF, etc.) fournissant des informations sur le site Web.WebDossier principal où seront placés les fichiers PHP, HTML, etc. du site Web.

Les images devront être placés dans le dossier : images/ Les fichiers JavaScript devront être placés dans le dossier js/ Les fichiers CSS devront être placés dans le dossier css/ Les classes d'actions (contrôleur) devront être placés dans le dossier action/ Les classes DAO (modèle) devront être placés dans le dossier action/dao/

Design (optionnel)Le dossier Design contiendra tous les documents reliés au design du site Web. Exemple : Photoshop, Gimp, Illustrator, etc.README.txtTrès important ! Ce fichier contiendra les informations relatives à l’installation et au fonctionnement du site

8JCK1401 Mars 2014

Web. Il contiendra également le mot de passe et le nom du compte usager de la base de données Oracle utilisés pour le site Web. 5. Échéancier

NoteIl est tenu de se présenter à chaque cours, puisque des informations, des ajustements et des méthodes de travail seront données tout au long de la session.

Les livrablesLivrable #1

Livrable #2

Remise finale

Squelette du site Web- Script SQL contenant la structure des tables du site- PK, FK, IDX, UNIQUE, mot de passe hashé, …- Présentation de l'aspect visuel du site Web (le header, footer, menu) - Si vous avez commencé à programmer des pages Web, montrer au professeur la structure PHP (orientée objet, selon la méthode vue en classe)- Les commits/pushs sur le dépôt Git.

Présentation de l'état actuel du site - Le module de connexion /déconnexion- La sécurité des pages- La page d'accueil, d’inscription et de modification du profil terminées

Présentation du site Web - Le reste des pages du site Web terminées- Discussion des choix technologiques- Fonctionnement général du site Web- Fonctionnement du gestionnaire de contenuRemise des livrables suivants- Tout le code source du site Web

9JCK1401 Mars 2014

- Structure/script de la base de données

10JCK1401 Mars 2014

6. Critères de correction

Les remises/présentations partielles % 5Fichiers *.SQL de la base de données du site Web

- (structure.sql, data_*.sql)% 5

Design et ergonomie du site Web % 15Programmation

- Code HTML valide selon les normes W3C- Programmation orientée objet (telle que vue dans le cours)- Qualité de la programmation et de la structure du site- Indentation et commentaires (aux bons endroits)- Fichiers et code nettoyés (pas de fichier ou de section de code inutile)- Utilisation de Git/SVN

% 25

Page – Connexion/Déconnexion % 5Page – Accueil % 5Page – Inscription % 5Page – Modification de profil (mot de passe, courriel) % 5Page – Création et modification du portfolio % 10Page – FAQ % 5Page – Bottin des portfolios % 5Page – Contactez-nous % 5Internationalisation (français/anglais) % 5Bonus : Page – oubli de mot de passe % 5

---------Total : % 100 (+5)

11JCK1401 Mars 2014

7. Technologies utilisées et précisions sur le site Web

La base de données Oracle sera utilisée, mais avec PDO, pour faciliter l’immigration vers MySQL. Le système sera valide selon les normes HTML5. Il sera également programmé dans les règles de

l’art et selon la structure apprise au cours (MVC). Le site sera compatible avec les navigateurs (IE, FF et Chrome) installés au cégep. Un Rich Text Editor sera utilisé et personnalisé (ex : TinyMCE ou CKEditor). Il possèdera un ou plusieurs effets JavaScript (La librairie jQuery est acceptée). Le site Web sera localisé en anglais et en français (la version anglaise peut être composée de lorem

ipsum).

8. Autres informations relatives à ce travail

NOTE 1Dans l’entête de chaque fichier PHP, il doit y avoir le commentaire suivant :<?php/* ------------------------------------------- * * * Projet synthèse : H2014 * * Par : <vos noms ici> * * * *------------------------------------------ */?>NOTE 2Le site Web doit fonctionner avec le serveur http Apache tel qu'il est installé au département.

NOTE 3Ce travail ce fait en équipe de 2 au maximum.

12JCK1401 Mars 2014

NOTE 4 Le site Web doit être programmé en orienté objet, et selon la méthode vue en classe

NOTE 5 Vous devez utiliser un système de gestion de versions, comme Git ou encore SVN.

NOTE 6 Vous pouvez vous inspirer de designs de sites déjà existants sur Internet, mais vous ne devez en aucun cas utiliser du code HTML/CSS fait par quelqu’un d’autre comme base HTML/CSS du projet. Vous ne devez pas utiliser un exercice/laboratoire/exemple fait dans le cours comme base HTML/CSS.

NOTE 7Si vous utilisez du code ou une fonction que vous n’avez pas fait vous-même, indiquez la référence(URL) au dessus.

NOTE 8Voici des idées de design qui pourraient vous inspirer :

- http://www.thisiswhyimbroke.com/ - https://www.pinterest.com/ - http://www.coolthings.com/ - http://www.templatemonster.com/moto-cms-html-templates/45611.html - http://reservoirt.com/

13JCK1401 Mars 2014

NOTE 9Le nom du site Web n’est pas encore défini, vous pouvez donc inventer votre propre concept (palette de couleurs, titre du site Web, …).

NOTE 10Pour toutes questions ou idées concernant ce projet, vous pouvez communiquer avec Frédéric, ou Mélanie (melanie@jackmarketing.ca).

14JCK1401 Mars 2014