Certifications, crédits et diplômes en ligne - tour d’horizon 1Jean-François CECI
Cet article détaille la présentation réalisée au Elearning Forum de Tunis les 22 et 23 octobre 2014. La première partie aborde la certification "signature track" et le "capstone project" de Coursera autour d'un parcours linéaire de 8 MOOC sur 18 mois. La seconde partie abordera la délivrance de crédits et de diplômes en ligne, ainsi que la surveillance d'examens en ligne...
Les MOOC : des espaces de formation pour apprendre? (C. Lison & F. Meyer)Université de Sherbrooke
Depuis quelques années maintenant, les MOOC (Massive Open Online Courses) ou les CLOM (cours en ligne ouverts et massifs) ont fait leur apparition dans le paysage universitaire tant en Europe qu’en Amérique (Karsenti, 2013). Si cette « nouvelle mode » a de quoi séduire, notamment par son côté accessibilité et ouverture sur le monde, elle amène également un certain nombre de questionnements, notamment en matière d’apprentissage. Peut-on réellement apprendre en suivant un MOOC? Comment les finalités d’apprentissage ou de formation sont-elles définies et validées dans leur atteinte? Et, ce faisant, comment le rapport aux savoirs des participants évolue-t-il dans ces « espaces de formation »? Pour mener cette réflexion, nous souhaitons adopter dans le cadre de notre contribution l’angle de l’ingénierie de formation. Comment les concepteurs de MOOC ou de CLOM pensent-ils et mettent-ils en œuvre cette ingénierie? Avec quels objectifs? Par la suite, comment cela se traduit-il en activités d’apprentissage? Selon la nature des MOOC (Siemens, 2012) ou des CLOM, nous faisons l’hypothèse que l’ingénierie adoptée et les activités d’apprentissage qui en découlent ne sont pas identiques...
Guide méthodologique et professionnel à destination des formateurs non-initié...FRPDL
Guide méthodologique et professionnel à destination des formateurs non-initiés au e-learning:
Expérimentation auprès d’apprenants adultes issus de zones rurales
Leçon de 5 pays
Application web de gestion de recrutement- Recruitement managment systemSarra ERRREGUI
Application web de gestion de recrutement pour automatiser le processus de recrutement commençant par la phase de détection du profil chercher jusqu'aux affectations du nouvel recrut dans le département adéquat de l'offre
Le web sémantique pour mieux anticiper le futurSylvain Gateau
Après le web 1.0 et le web 2.0, place au web sémantique. Jusque là encore unilatérale, la relation homme / machine prend une nouvelle dimension avec la sémantisation des contenus : les machines sont désormais capables de comprendre et d’exploiter le contenu. Pour notre plus grand bien ?
Le web sémantique est en marche pour nous préparer au futur. Des courants de pensées, tels que le « Future friendly web », prônent un web propre, structuré, et véhiculant du contenu porteur de sens, prêt à s’adapter et à être diffusé n’importe où, n’importe quand. À la croisée des Sciences Sociales et Humaines et des Sciences de l’Information et de la Communication, le web sémantique est donc sur le point de redéfinir nos relations communicationnelles ainsi que l’organisation de l’écosystème numérique.
Vers de nouveaux métiers ? De nouveaux acteurs ? De nouvelles pratiques ? Une chose est sûre, c’est qu’à partir d’aujourd’hui, la machine entre un peu plus dans notre sphère intime, relationnelle et communicationnelle. Un pas de plus vers l’intelligence artificielle ?
Modèle de forum de discussion afin de favoriser le développement de la pensée...Lucie Pearson
Ce mémoire présente un modèle pédagogique qui favorise le développement de la pensée critique à partir des enjeux liés au monde réel et virtuel de l‘apprenant. Nous avons d‘abord procédé à la création d‘un modèle pédagogique d‘un forum de discussion. Pour le créer, nous avons entrepris de réaliser une recension des écrits afin d‘améliorer notre conception du modèle. Par la suite, nous avons voulu mettre l‘importance dans notre modèle pédagogique de l‘approche théorique de l‘apprentissage dans un monde numérique, soit le connectivisme. Nous avons ensuite procédé à une mise à l‘essai du modèle.
Objectif général : Mener en autonomie une action de formation répondant aux besoins de votre structure et de vos apprenants.
Vous êtes ou devenez formateur occasionel et vous souhaitez savoir comment préparer une action de formation présentielle, animer votre formation ou encore accompagner vos apprenants dans leur apprentissage ?
Ce mémoire est la trace écrite des réflexions et actions menées dans le cadre d’un stage au sein de l’Ecole Internationale Le Verseau-ELCE.
Les nouvelles technologies sont de de plus en plus présentes dans la vie quotidienne. Elles commencent à apparaître au sein de la palette d’outils pédagogiques et didactiques des enseignants.
Face à ces constats et aux possibilités qu’offre la technologie, la Direction de l’établissement a souhaité mettre en oeuvre une intégration des technologies de façon coordonnée dans l’établissement.
C’est l’objet de ma mission, celle-ci m’a amené à mettre en place un environnement numérique ayant la capacité de soutenir l’innovation pédago-didactique des enseignants. Ce premier aspect de la mission a conduit à la création d’une nouvelle fonction dans l’école celle de Coordinateur technopédagogique.
Cette fonction vise à la fois la création et l’entretien d’un environnement technologiquement fertile capable de soutenir la créativité des enseignants, mais aussi l’accompagnement des enseignants dans l’élaboration de leurs dispositifs de cours.
Au départ d’une compréhension des besoins de chaque enseignant, il s’agit d’opérer une traduction en solutions techniques et d’accompagner le changement dû à l’intégration de la technologie dans la pratique professionnelle.
Pour favoriser le changement et m'adapter au contexte particulier de l’établissement, j'inscrirai mes actions dans une pédagogie informelle copilotée avec la Direction de l’établissement. L’animation pédagogique visera à accompagner l’équipe de l’école internationale Le Verseau-ELCE dans son intégration des technologies au service de son projet pédagogique. Cette intégration se verra facilitée par l’enrichissement de l’environnement de travail des enseignants.
Les intranets et leur écosystème, portrait des usages et meilleures pratiquesCEFRIO
Les intranets ont grandement évolués depuis une quinzaine d'années et sont devenus des outils importants pour les entreprises et les organisations publiques et privées. Actuellement, ils permettent aux employés d'utiliser des espaces collaboratifs afin de partager de l'information en temps réel, que ce soit entre eux ou avec des collaborateurs externes.
Dans ce contexte, le CEFRIO présente le rapport Les intranets et leur écosystème qui trace le portrait des usages et meilleures pratiques intranet au Québec et qui regroupe les résultats d'une enquête réalisée auprès de 1000 entreprises québécoises de 20 employés et plus et de 10 études de cas effectués auprès d'organisations issues de différents secteurs.
Similaire à Une plateforme pédagogique d'orientation_Projet de fin d'études (20)
Tutoriel interactif d’ingénierie rapide d’Anthropic.pdfErol GIRAUDY
Le tutoriel interactif d’ingénierie rapide d’Anthropic. Ce cours est destiné à vous fournir une compréhension complète, étape par étape, de la façon de concevoir des invites optimales dans Claude.
Après avoir terminé ce cours, vous serez en mesure de :
Maîtriser la structure de base d’une bonne invite
Reconnaître les modes de défaillance courants et apprendre les techniques « 80/20 » pour y remédier
Comprendre les forces et les faiblesses de Claude
Créez des invites puissantes à partir de zéro pour les cas d’utilisation courants
Ce tutoriel existe également sur Google Sheets en utilisant l’extension Claude for Sheets d’Anthropic. Nous vous recommandons d’utiliser cette version car elle est plus conviviale.
Lorsque vous êtes prêt à commencer, allez à pour continuer.01_Basic Prompt Structure
Ansible, Terraform, CloudFormation, [insert your favorite tech here]… Les solutions d’infra-as-code sont pléthores. Alors, pourquoi parler du dernier rejeton à la mode porté par le CNCF ? Allez, spoilons un peu l'affaire ! Bâti sur Kubernetes, Crossplane permet lui de faire converger le delivery d’une app containerisée avec toutes les autres ressources requises hors de votre cluster K8S préféré, et dont elle aura toutefois grand besoin pour fonctionner correctement : un bucket S3, une base de donnée managée, etc.. Vous orchestrez ainsi le cycle de vie de votre application complète avec une seule et même perspective. Ajoutez à cela un multicloud facilité, ou encore une vrai capacité à s’inscrire dans une démarche GitOps, et vous obtenez là une solution très efficace pour organiser vos prochains déploiements !
CLAUDE 3.5 SONNET EXPLICATIONS sur les usagesErol GIRAUDY
Présentation de Claude 3.5 Sonnet
La famille de modèles Claude 3 est dotée de nouvelles capacités de vision qui permettent à Claude de comprendre et d’analyser des images, ouvrant ainsi des possibilités passionnantes pour l’interaction multimodale.
Les artefacts : une nouvelle façon d’utiliser Claude
voir aussi sur mon blog :
www.ugaia.eu
Vision de Claude 3.5 SONNET Comment utiliser la vision Utilisez les capacités...Erol GIRAUDY
Vision de Claude 3.5 SONNET
La famille de modèles Claude 3 est dotée de nouvelles capacités de vision qui permettent à Claude de comprendre et d’analyser des images, ouvrant ainsi des possibilités passionnantes pour l’interaction multimodale.
https://www.ugaia.eu/2024/07/claude-35.html
Ce guide décrit comment utiliser des images dans Claude, y compris les meilleures pratiques, les exemples de code et les limitations à garder à l’esprit.
Comment utiliser la vision
Utilisez les capacités de vision de Claude via :
• claude.ai. Téléchargez une image comme vous le feriez pour un fichier, ou faites glisser et déposez une image directement dans la fenêtre de discussion.
• L’établi de la console. Si vous sélectionnez un modèle qui accepte les images (modèles Claude 3 uniquement), un bouton pour ajouter des images apparaît en haut à droite de chaque bloc de message Utilisateur.
Demande d’API. Voir les exemples dans ce guide.
Retrouvez toute la communauté Liferay francophone pour un meetup virtuel (100% remote) pendant la pause déjeuner du jeudi 4 juillet.
Ce meetup sera l'occasion de vous présenter 5 sujets auxquels consacrer un peu de veille technique entre deux siestes sur la plage cet été.
Pour chaque sujet on vous fait un petit résumé, on en discute ensemble et bien sur on vous donne tous les pointeurs utiles pour vous occuper un peu les jours de pluie cet été (rares bien entendu).
Au programme : HTMX, Alpine.js, animation.css, N8N, Sentry, GlitchTip
Et bien sur les traditionnels échanges libres ne seront pas oubliés !
Une plateforme pédagogique d'orientation_Projet de fin d'études
1. Réalisé par : Encadré par :
Mlle. MOUDOUBAH Lamia M. ZAHID Noureddine
Mlle. El Hilali Houda
ANNEE UNIVERSITAIRE 2014-2015
2. Rapport de projet de fin d’études Page 2
Remerciement :
Remerciements à toute personne ayant été contribués à la réalisation de
notre projet:
Notre encadrant Zahid Noureddine
Nous le remercions de nous inciter à mener à bien ce travail, pour
son aide, son temps passé pour nous guider, ses efforts pour nous intégrer
dans l’environnement de la réalisation des projets informatiques, son
dévouement et ses précieux conseils.
Tous le corps professoral
Nous les remercions vivement, de leurs efforts considérables, leurs
conseils qui nous ont prodigués tout au long de cette année afin de garantir
une formation de qualité.
Les membres du Jury
Merci bien de choisir notre groupe, ainsi de vouloir
accepter d'évaluer ce travail
Finalement, une attention particulière à des personnes qui en ont
participé même de loin à la réussite de ce modeste travail par leur
encouragement, et plus particulièrement M.IBANNAI N pour ses
conseils visés, et son aide ainsi sa disponibilité.
3. Rapport de projet de fin d’études Page 3
L'éducation consiste à nous donner des idées,
et la bonne éducation à les mettre en
proportion.
Montesquieu
Artiste, écrivain,
Philosophe (1689 - 1755)
4. Rapport de projet de fin d’études Page 4
Table des matières :
Table des figures :...................................................................................................... 5
Introduction :............................................................................................................... 7
Chapitre I:…………………………………………………………………………………………………………………………………………8
1. Qu’est ce qu’un site pédagogique ? :.......................................................................... 9
2. Problématique:...........................................................................................................13
Chapitre II: ………………………………………………………………………………………………………………………………………14
1. Cycle de vie du projet : ..............................................................................................15
2. Cahier des charges:...................................................................................................16
3. Modele conceptuel de données: ................................................................................19
4. Importation sous PHPMyAdmin : ...............................................................................25
5. Méthode MVC:...........................................................................................................26
6. Design avec le bootStrap:..........................................................................................29
Chapitre III:………………………………………………………………………………………………………………………………………31
1. Les fonctionnalités du projet : ...................................................................................32
Conclusion :.............................................................................................................. 44
Lexique :................................................................................................................... 46
Webographie : .......................................................................................................... 47
5. Rapport de projet de fin d’études Page 5
Table des figures :
Figure 1 : Cycle de vie……………………………………………………………………..12
Figure 2 : Formation en PHP5..................................................................................17
Figure3 : Modèle conceptuel de données………………………………………….……18
Figure 4 : Modèle physique de données………………………………………………...19
Figure 6 : Modèle Logique de données……………………………………………….…19
Figure 7 : le Script SQL…………………………………………………………………….20
Figure 8 : Le Script SQL …………………………………………………………………..20
Figure 8 : le Script SQL......................................................................................…...20
Figure 9 : le Script. SQL ……………………………………………...……..……………21
Figure 10 : le Script. SQL ………………...………………………………………………22
Figure 11 : le Script. SQL………………….………………………………………………23
Figure 12 : la base de données MySQL ……………………….…….…………….……24
Figure 13 : Méthode MVC ………………………………………………………………..26
Figure14 : Utilisation de la méthode MVC………………………………………….27
Figure 15 : Page D’accueil……………………………………….………..………………30
Figure 16 : La suite de la Page D’accueil…………………..……………………………31
Figure 17 : La suite de la Page D’accueil………………………………….……….……31
Figure 18 : La suite de la Page D’accueil………………………………………..………33
6. Rapport de projet de fin d’études Page 6
Figure 19 : La partie connexion…………………………………………..…….…………33
Figure 20 : La partie inscription………………………………………………...…………34
Figure 21 : la suite de La partie inscription……………..……………………………….34
Figure 22 : Page orientation « bachelier »…………………………..………………….35
Figure 23 : Page orientation « Etudiant »…………………………..………….……….35
Figure 24 : Page Concours…………...……….…………………………………………36
Figure 25 : Page Cours……………………….…………………………………………..37
Figure 26 : Page Forum …………………………………………………………………..37
Figure 27 : Page contactez-nous ………………………………………….…………….38
Figure 28 : Page contactez-nous …………………..……………………………………39
Figure 29 : back-office « Admin » ……………………………….……………………….40
Figure 30: back-office « ajout » …………………………..……………………………..40
Figure 31: back-office « suppression» …………………………………………………41
Figure 32: back-office « modification» ……………………………..………………….41
Figure 33 : back-office partie cours «Professeur»…….……………………………….42
Figure 34 : back-office partie Forum «Professeur» ……………………………………43
Figure 35 : back-office «Etudiant » ……………………………………...………………43
7. Rapport de projet de fin d’études Page 7
Introduction :
La notion de ressource pédagogique numérique mérite donc d’être délimitée en se
référant aux travaux de recherche dans ce domaine. En effet ces ressources sont définies
comme « ensemble des services en ligne, des logiciels de gestion, d’édition et de
communication (portails, logiciels outils, plateformes de formation, moteurs de recherche,
applications éducatives, portfolios) ainsi que «l’ensemble des données et informations utiles à
l’enseignant ou à l’apprenant dans le cadre d’une activité d’enseignement ou d’apprentissage
utilisant les TIC, activité ou projet pouvant être présenté dans le cadre d’un scénario
pédagogique».
L’objectif visé par l’usage de la ressource pédagogique numérique diffère selon la
nature de celle-ci.
En effet, certaines ressources visent à informer et outiller l’apprenant afin qu’il exploite
l’information. Certaines soutiennent sa communication, ses échanges et ses activités de
coopération afin de favoriser le développement de sa pensée créatrice. D’autres l’aident à
prendre des décisions et à résoudre des problèmes afin qu’il se dote des méthodes de travail
efficaces en exploitant les TIC.
Face au développement de la technologie d’informations et de communications et plus
particulièrement dans le domaine de l’enseignement, on a décidé de créer une ressource
pédagogique numérique. Cette dernière vise à informer et orienter l’apprenant afin qu’il arrive
à exploiter l’information à bon escient. Cette ressource numérique est incarnée dans un site
web pédagogique dédié aux bacheliers et même aux étudiants.
8. Rapport de projet de fin d’études Page 8
Chapitre I:
Généralité
Qu’est-ce qu’un site web pédagogique ?
Problématique
9. Rapport de projet de fin d’études Page 9
1 .Qu’est-ce qu’un site web pédagogique ?
Définition :
Partant de l'intégration active des technologies éducatives dans le cursus scolaire marocain
(installation des salles multimédia dans les établissements scolaires, dotation en matériel
informatique, connexion Internet haut débit, intégration de l'informatique en tant que
discipline à part entière...), du recours massif des élèves à l'Internet en tant que source de
l'information et de la participation active des enseignants dans la réalisation des sites web
pédagogiques destinés le plus souvent aux élèves, nous avons tenté de voir, en analysant
certains sites marocains traitant des programmes scolaires scientifiques au secondaire (collège
et lycée), si les sites en question présentent des activités de nature constructiviste susceptibles
de réaliser les compétences visées par l'école marocaine. Nous avons mis le point sur le
concept « constructivisme » étant donné que les sites consultés devraient permettre à
l'apprenant, qui est face à son ordinateur connecté, de jouer un rôle central dans le processus
de construction, d'élaboration et de raffinement de ses propres connaissances en se situant
dans le milieu des Technologies d'Information et de Communication lui permettant d'agir sur
ses propres savoirs, d'interagir avec son milieu et dialoguer avec autrui.
À la lumière des résultats obtenus nous avons présenté des recommandations d'ordres
ergonomique et didactique pour la conception d'un site présentant des activités de nature
constructiviste
Des constats à la problématique
Des entretiens avec les élèves et les enseignants nous ont permis de noter les constations
suivantes :
Présence d'un problème vis-à-vis de la pertinence du contenu de la plupart des sites
par rapport aux usages projetés.
Présence d'un problème au niveau de la structuration du contenu présenté dans le site.
Les activités présentées ne tiennent pas compte du niveau scolaire des élèves.
Présence du problème de conformité du contenu surtout dans les sites étrangers, ce qui
pousse les élèves à abandonner la navigation.
10. Rapport de projet de fin d’études Page 10
La formulation du contenu telle qu'elle est adoptée dans la plupart des sites ne vise pas
à mobiliser chez l'élève la capacité de lire, d'écrire, d'analyser, de comparer, de
distinguer l'essentiel de l'accessoire.
La mise en ligne du contenu (lisibilité, couleur, navigation) ne tient pas souvent
compte du niveau informatique de l'élève.
Les activités proposées sont souvent des exercices que les élèves peuvent consulter sur
des livres sans se connecter sur Internet, et ne leur permettent pas de construire leur
propre savoir d'une façon autonome.
Les sites sont le plus souvent délaissés par leurs concepteurs (enseignants) et ne sont
pas mis à jour.
La plupart des sites qui présentent les programmes scolaires scientifiques du
secondaire sont en français.
Les enseignants (concepteurs de ces sites) ne répondent pas aux questions des élèves
même si les sites sont dotés d'outils de communication.
Analyse de quelques sites
La qualité d'un site pédagogique sur Internet repose principalement sur l'organisation de
l'information, tant textuelle que graphique, sur la flexibilité de la navigation, la nature des
activités proposées et sur l'interactivité.
Dans notre recherche nous nous intéressons principalement à la recherche des activités de
nature constructiviste dans des sites marocains traitant des programmes scolaires scientifiques
en focalisant l'analyse sur les objectifs du site, la façon dont le contenu y est présenté, les
outils de communications du site, la typologie des activités qui ont une relation avec
l'apprentissage collaboratif. Ainsi, une grille a été élaborée pour cette fin selon trois éléments
jugés essentiels :
Informations générales sur le site à analyser
Cet élément de la grille vise à collecter des informations préliminaires sur le site. En effet,
on peut avoir des informations sur :
L'URL (adresse) du site
Son hébergeur (gratuit ou payant)
La discipline traitée
11. Rapport de projet de fin d’études Page 11
Le concepteur : son profil et ses intentions
Le public visé
La date de conception et de mise à jour.
Design et ergonomie du site
Grâce à cet élément, on peut avoir une idée claire sur l'interface du site et juger du respect
des règles ergonomiques de la conception. Nous nous intéressons dans ce volet plus
particulièrement aux outils de communications, à la navigation et à l'interactivité qui vont
refléter le degré du travail collaboratif et celui de l'autonomie et la motivation des apprenants.
Le contenu présenté par le site
Principal élément de la grille d'analyse, nous donner une idée claire sur ce qu'on cherche
exactement dans le site :
Types de documents dans le site
Axes d'apprentissage
Scénarios pédagogiques
Stratégies pédagogiques
Types d'activités
Projets
Nous avons retenu comme activité de nature constructiviste :
Toute activité permettant la construction individuelle et collective des connaissances
en opposition à une transmission des savoirs
Toute activité didactique centrée sur l'apprenant et axée sur les savoirs pratiques lui
permettant de résoudre un problème ou de réaliser un projet.
Qualité du contenu
Une activité est de nature constructiviste lorsqu'elle :
possède des perspectives multiples,
est centrée sur l'apprenant,
implique l'enseignant dans le rôle de facilitateur et collaborateur,
12. Rapport de projet de fin d’études Page 12
fait appel à la métacognition,
induit l'autonomie de l'apprenant,
est basée sur des tâches et contenus authentiques,
favorise la construction des connaissances (scaffolding),
permet la collaboration, la résolution de problèmes et l'utilisation de l'erreur,
est établie sur une mise en contexte conceptuelle,
est fondée sur des points de vue multiples.
Compte tenu de la particularité du contenu d'un site web traitant d'un programme scolaire
scientifique (concepts scientifiques complexes, niveaux différents des apprenants...), des
caractéristiques des activités de nature constructiviste et de la formation/enseignement via un
environnement virtuel à distance, l'enseignant concepteur doit faire appel aux opérations
suivantes :
Transposition didactique (transposition du savoir scientifique en savoir enseignable)
Trames conceptuelles
Niveau de formulation d'un concept
Carte conceptuelle
Pratiques sociales de référence
représentations des apprenants à distance
Ainsi il doit impérativement suivre les étapes suivantes pour élaborer les activités de son
site :
Étude préalable
Analyse et structuration des contenus
Élaboration des situations d'apprentissage
Insertion des outils de formation dans leur contexte d'utilisation
a - Étude préalable
Généralement un projet de formation s'enclenche à partir d'une demande ou d'un besoin. Au
cours de cette phase les besoins et demandes des apprenants (utilisateurs du site) vont être
exprimés, étudiés et analysés en vue de cerner l'idée du projet à concevoir. Ceci peut se
concrétiser par la formulation d'un cahier des charges qui formalisera l'expression de la
demande des apprenants et l'offre de l'enseignant concepteur.
13. Rapport de projet de fin d’études Page 13
De cette idée il doit se poser les questions suivantes :
À qui s'adresse la formation ?
Quels bénéfices les apprenants retireront de la formation ?
Quelles compétences veut-on installer ?
2.Problématique :
Dans notre projet, nous sommes amenés à réaliser un site web qui a pour
sujet principale l’enseignement. Vu le problème toujours existant, et la difficulté
affrontée lors de l’orientation on a décidé de réaliser un site d’orientation. Et vu notre
situation, étudiants en supérieure, nous trouvons toujours cette difficulté d’accès au
différents cours on a décidé donc de les présentées dans notre site web.
Notre site permettra aux étudiants bacheliers de s’orienter et ceux du
supérieure de savoir où continuer leur formation et leur donne la possibilité d’accéder
à des cours mis sur le site par des enseignants filtrés par écoles.
Dans ce sens, nous avons opté pour réaliser un site web afin de facilité le
parcours supérieurs aux différents étudiants.
14. Rapport de projet de fin d’études Page 14
Chapitre II:
Planification et
conception
Cycle de vie du projet
Cahier des charges
Outils de réalisation
Modèle Conceptuel de Données
15. Rapport de projet de fin d’études Page 15
1. Le cycle de vie du projet :
Figure 1 : Cycle de vie
Cahier des charges Formation en PHP5
Livraison
Test d’intégration/unitaire
Etude de faisabilité
Design
Codage
Conception
Formation en MVC
16. Rapport de projet de fin d’études Page 16
2. Cahier des charges:
Objectifs :
es étudiants, bacheliers lors de leur orientation.
Les différentes concours d’accès aux écoles supérieures « Des
différentes Domaines ».
Avoir accès aux différents cours posés par des professeurs des établissements
connectés.
Avoir accès à un forum, participer aux réponses des autres, poser vos questions,
vos suggestions…
Langues :
Ressources apportées :
Spécifications techniques :
par plusieurs tableaux.
Aspect et qualité du site :
Plate-forme simple.
ions rapidement «interfaces organisées ».
Présentation:
17. Rapport de projet de fin d’études Page 17
Contenu:
: Page d’accueil.
Page orientation.
Page concours.
Partie 4 : Page cours.
Partie 5 : Page forum.
Partie 6 : Page A propos.
Partie 7 : Page contactez-nous.
Partie 8 : L’inscription.
Partie 8 : Connexion.
Partie 9 : Back-office du Propriétaire « Paramétrage ».
Partie 10 : Back-office de l’étudiant.
Partie 11 : Back-office du professeur.
Maintenance :
de l’application pendant 2 mois.
Délai de livraison :
Non encore précisé.
18. Rapport de projet de fin d’études Page 18
3. Outils de réalisation:
Pour la réalisation de tous les projets web, on utilise souvent les mêmes
logiciels à distribution libre : PHP 5, la SGBD MySQL et les serveurs « EasyPHP,
WampServer Ou Xampp ».
PHP 5 :
PHP5 n'est pas une révolution mais une évolution. Cette évolution introduit
quelques changements majeurs tout en conservant une compatibilité totale avec la
version antérieure. Les principales nouvelles fonctionnalités sont:
SQL ite: Un SGBD embarqué dont nous verrons les principales forces et
faiblesses
Simple XML: Un nouveau parseur XML très efficace et très simple
Un nouveau modèle POO: Le modèle objet complètement remanié, l'ancien
restant correctement interprété par PHP.
Figure 2 : Formation en PHP5.
19. Rapport de projet de fin d’études Page 19
4. Modèle Conceptuel de Données:
Concernant la partie conception de notre projet, j’ai choisi de tracer ma base
de données sous le logiciel PowerAMC, on a commencé par le MCD :
Figure 3 : Le modèle conceptuel de données
a) Modèle Logique de Données:
Après avoir tracé le MCD, on passe à la génération du modèle logique de données,
et voilà le MLD :
20. Rapport de projet de fin d’études Page 20
Figure 5 : Modèle logique de données
b) Modèle Physique de Données:
A partir du modèle logique de données, on a généré le modèle physique de
données, on peut même le générer à partir du MCD précèdent, mais avant on doit
choisir le SGBD, il existe plusieurs, je vais choisir le MySQL :
Figure 6: Le modèle Physique de données
21. Rapport de projet de fin d’études Page 21
c) Génération de Script. SQL:
Finalement extraire le Script. SQL : « quelques figures pour montrer le principe du
script ».
Figure 7 :Figure 8 : le Script. SQL
24. Rapport de projet de fin d’études Page 24
Figure 11: le Script. SQL
5. Importation sous PHPMYADMIN:
Cette étape consiste à copier le script. SQL dans le phpmyadmin et puis faire
apparaitre notre base de données réaliser sous powerAMC, Voilà la base de
données générée :
25. Rapport de projet de fin d’études Page 25
Figure 12: la base de données MySQL.
6. Méthode MVC:
1. Qu’est-ce qu’une Méthode MVC ?
Le patron MVC est issu de travaux de Trygve Reenskaug en 1978-79. Son but
principal était de proposer une solution générale aux problèmes d'utilisateurs,
manipulant des données volumineuses et complexes. D'abord appelé Model-View-
Editor (Modèle-vue-éditeur), Reenskaug le renomme Modèle-vue-contrôleur après
avoir discuté notamment avec Adele Goldberg1
.
L'organisation d'une interface graphique est délicate. L'architecture MVC ne
prétend pas en éliminer tous les problèmes, mais fournit une première approche pour
le faire. Offrant un cadre normalisé pour structurer une application, elle facilite aussi
le dialogue entre les concepteurs.
L'idée est de bien séparer les données, la présentation et les traitements. Il en
résulte les trois parties énumérées plus haut : le modèle, la vue et le contrôleur.
26. Rapport de projet de fin d’études Page 26
Le modèle représente le cœur (algorithmique) de l'application : traitements des
données, interactions avec la base de données, etc. Il décrit les données manipulées
par l'application. Il regroupe la gestion de ces données et est responsable de leur
intégrité. La base de données sera l'un de ses composants. Le modèle comporte des
méthodes standards pour mettre à jour ces données (insertion, suppression,
changement de valeur). Il offre aussi des méthodes pour récupérer ces données. Les
résultats renvoyés par le modèle ne s'occupent pas de la présentation. Le modèle ne
contient aucun lien direct vers le contrôleur ou la vue. Sa communication avec la vue
s'effectue au travers du patron Observateur.
C’avec quoi l'utilisateur interagit se nomme précisément la vue. Sa première
tâche est de présenter les résultats renvoyés par le modèle. Sa seconde tâche est de
recevoir toute action de l'utilisateur (hover, clic de souris, sélection d'un bouton radio,
cochage d'une case, entrée de texte, de mouvements, de voix, etc.). Ces différents
événements sont envoyés au contrôleur. La vue n'effectue pas de traitement, elle se
contente d'afficher les résultats des traitements effectués par le modèle et d'interagir
avec l'utilisateur.
Plusieurs vues peuvent afficher des informations partielles ou non d'un même
modèle. Par exemple si une application de conversion de base a un entier comme
unique donnée, ce même entier peut être affiché de multiples façons (en texte dans
différentes bases, bit par bit avec des boutons à cocher, avec des curseurs). La vue
peut aussi offrir à l'utilisateur la possibilité de changer de vue.
Le contrôleur prend en charge la gestion des événements de synchronisation
pour mettre à jour la vue ou le modèle et les synchroniser. Il reçoit tous les
événements de l'utilisateur et enclenche les actions à effectuer. Si une action
nécessite un changement des données, le contrôleur demande la modification des
27. Rapport de projet de fin d’études Page 27
données au modèle, et ce dernier notifie la vue que les données ont changée pour
qu'elle se mette à jour. D'après le patron de conception observateur/observable, la
vue est un « observateur » du modèle qui est lui « observable ». Certains
événements de l'utilisateur ne concernent pas les données mais la vue. Dans ce cas,
le contrôleur demande à la vue de se modifier. Le contrôleur n'effectue aucun
traitement, ne modifie aucune donnée. Il analyse la requête du client et se contente
d'appeler le modèle adéquat et de renvoyer la vue correspondant à la demande.
Quand un même objet contrôleur reçoit les événements de tous les composants,
il lui faut déterminer quelle est l'origine de chaque événement. Ce tri des événements
peut s'avérer fastidieux et peut conduire à un code peu élégant (un énorme switch).
C'est pourquoi le contrôleur est souvent scindé en plusieurs parties dont chacune
reçoit les événements d'une partie des composants.
Figure 13: Méthode MVC.
2. Utilisation du MVC :
J’ai utilisé la méthode MVC parce qu’elle me permet d’organiser mon code
ainsi de travailler l’application d’une manière plus professionnelle, simple, et
compréhensible.
28. Rapport de projet de fin d’études Page 28
Figure 14 : Utilisation de la méthode MVC.
7. Design avec le BOOTSTRAP:
Afin de bien organiser les interfaces de mon application, c’est-à-dire la partie vue
de mon projet, j’ai travaillé avec le BOOTSTRAP, qui est un Framework HTML5,
CSS 3 et JavaScript permettant de créer des applications web, responsive ou non,
rapidement et simplement. Il existe actuellement deux versions. J’ai travaillé avec la
version la plus récente : la 3e. Avant d’utiliser le Framework, faut d’abord
comprendre le système de grilles.
Les fichiers les plus importantes de BOOTSTRAP sont :
29. Rapport de projet de fin d’études Page 29
bootstrap.css : ou bootstrap.min.css correspond au thème de base
(couleurs, polices, colonnes, icônes…) et se trouve dans le dossier
dist/css.
bootstrap.js : regroupe l’ensemble des plugins proposés par
Bootsrap (carrousel, modales, alertes…). Ce fichier se trouve dans le
dossier dist/js. Et on peut inclure individuellement chaque plugin
proposé (dans le dossier js à la racine du dossier Bootstrap). Aussi
faut-il inclure jQuery pour faire fonctionner les plugins JavaScript.
Bootstrap 3 est codé en HTML5, l’HTML 5 n’est pas interprété
correctement sur Internet Explorer inférieur à la version 9. Pour
résoudre ce problème, il vous faudra inclure le plugin html5shiv.js.
Aussi l’appel au fichier respond.min.js.
Bootstrap propose un CSS déjà complet. Il met à disposition un
certain nombre de classes qui permet de styler intégralement tous les
éléments de l’application.
30. Rapport de projet de fin d’études Page 30
Chapitre III:
Les fonctionnalités
du projet
31. Rapport de projet de fin d’études Page 31
1. Les fonctionnalités du site:
Afin d’avoir un site professionnel avec un design assez simple, clair et aussi
bien sophistiqué. Faut respecter la partie qui concerne le back-office ainsi que celle
du front office. Commençant par le back-office : il est représenté selon trois profils
« back-office du propriétaire, Back-office du professeur, Back-office de l’étudiant ».
Puis il y a le front office c’est la partie visible par l’utilisateur, comprend plusieurs
pages riches en informations.
Le front office :
a) Page D’accueil :
Est la page principale d'un site web, elle se distingue des autres pages
du site par le fait qu'elle est censée représenter, à l'internaute visiteur, le site sur
lequel il se trouve de manière claire et forte. Pour notre site « PERDU APRES MON
BAC » la page d’accueil contient des informations sur l’enseignement au Maroc,
différentes rubriques qui intéresse l’étudiant, des vidéos aussi... .
Figure 15: Page D’accueil.
32. Rapport de projet de fin d’études Page 32
Figure 16: La suite de la Page D’accueil.
Figure 17: La suite de la Page D’accueil.
33. Rapport de projet de fin d’études Page 33
Figure 18: La suite de la Page D’accueil.
b) La connexion et l’inscription :
Cette partie est présentée par deux boutons « figurés dans toutes les pages
de notre site et même ils sont répétés au pied de la page » essentiels « connexion »
pour se connecter selon ton profil et « inscription » si vous êtes non inscris et que vous
voulez naviguez dans notre site ainsi avoir accès au cours, forum…
Figure 19: La partie connexion
34. Rapport de projet de fin d’études Page 34
Figure 20: La partie inscription
Figure 21: la suite de La partie inscription
35. Rapport de projet de fin d’études Page 35
c) Page Orientation.
Page Orientation comprend un pop-up, ce dernier contient deux check-box
pour le choix de la filière et du niveau pour les étudiants et qu’un seul check-box de
filière pour les bacheliers.
Figure 22: Page orientation « bachelier »
Figure 23: Page orientation « Etudiant »
36. Rapport de projet de fin d’études Page 36
d) Page Concours.
Contient Les informations des différents concours récents des établissements
connectés.
Figure 24: Page Concours
e) Page cours :
On ne peut accéder à l’interface des cours que si et seulement si on a effectué
l’inscription sur le site. Après avoir inscrit on peut « ajouter, supprimer ou modifier »
des cours selon notre profil.
37. Rapport de projet de fin d’études Page 37
Figure 25: Page Cours
f) Page Forum:
Cette a le même principe que la page cours.
Figure 26: Page Forum
38. Rapport de projet de fin d’études Page 38
g) page A propos :
La page «à-propos de nous » est un composant fondamental de tout site web,
elle a pourtant un important rôle de transformation, soit directe, soit indirecte en
favorisant la mise en contact entre le visiteur et le propriétaire du site.
Figure 27: Page A propos de nous
h) Page contactez-nous :
Souvent négligée, la page de contact des sites web est pourtant assez souvent la
dernière chose vue par l’internaute avant de prendre une décision.
Informations permettant la localisation de l’établissement, numéro de téléphone,
formulaire de contact. Il y a mille façons d’agrémenter cette page.
On a inséré le formulaire dans la page contactez-nous, afin d’aider les
internautes à entrer en contact avec nous
A l’aide de ce formulaire, les internautes peuvent envoyer des messages contenant
leurs coordonnées.
39. Rapport de projet de fin d’études Page 39
Lorsque le client clique sur envoyer, son message est transféré à l’adresse suivante :
perduapresmonbac@gmail.com
Figure 28: Page contactez-nous
Le back-office :
2. Paramétrage du propriétaire:
C’est la partie administration utilisée par le propriétaire du site, elle n’est pas
visible par les étudiants, les professeurs ou les visiteurs en général. Comprend tous
les informations des établissements, Orientations, concours, cours, forums,
professeurs et les matières « une gestion entière ».
40. Rapport de projet de fin d’études Page 40
Figure 29: back-office « Admin »
Les interfaces de manipulation « ajout, suppression, modification »
Figure 30: back-office « ajout »
41. Rapport de projet de fin d’études Page 41
Figure 31: back-office « suppression»
Figure 32: back-office « modification»
42. Rapport de projet de fin d’études Page 42
3. Back-office du professeur :
C’est la partie du professeur utilisée que par un professeur déjà inscrit ou
ajouté par l’administrateur du site. Elle n’est pas visible par les étudiants ou les
visiteurs en général. Comprend tous les informations des cours et forums que peut
gérer le professeur.
Figure 33: back-office partie cours «Professeur»
Figure 34: back-office partie Forum «Professeur»
43. Rapport de projet de fin d’études Page 43
4. Back-office de l’étudiant :
C’est la partie qui concerne l’étudiant utilisée que par l’étudiant déjà inscrit.
Elle n’est pas visible par un étudiant non inscrit ou des visiteurs en général.
Comprend tous les informations des cours que peut gérer l’étudiant.
Figure 35: back-office «Etudiant »
44. Rapport de projet de fin d’études Page 44
Conclusion :
Au terme de ce projet de fin d’années, On a eu la satisfaction d’avoir réalisé un
site web pédagogique permettant d’aider les étudiants. C’est un site finalisé et
accompagnée de toutes les informations réelles et nécessaire à son efficacité.
Par ailleurs, l’objectif principal du projet de fin d’études était la découverte du
monde de la réalisation des projets et dans cette optique, ce projet a totalement
répondus à nos attentes.
Finalement, on a traité toutes les phases nécessaires à la réalisation de
ce site, et dans ces phases on a appris à mieux manipuler les langages PHP,
HTML,CSS et Java Script, ainsi on a approfondi nos connaissances sur le langage
SQL avec le SGBD, MySQL.
: Afin que notre projet soit complet et plus efficace, onLes perfections
souhaite avoir une base de données des CIN et CNE au niveau national pour la
intégrer dans notre plate-forme ainsi, le lancer en ligne «Hébergement » afin qu’in
soit accessible par le public visé et aussi travailler sur l’enregistrement des traces
des étudiants.
46. Rapport de projet de fin d’études Page 46
Lexique :
– est un langage informatique qui sert à décrire la présentation des
documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium
(W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la
conception de sites web et bien pris en charge par les navigateurs web dans les
années 2000.
– est une bibliothèque JavaScript libre qui porte sur l’interaction entre
JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes
communes de JavaScript. La première version date de janvier 2006.
– Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de
programmation compilé à la volée libre principalement utilisé pour produire des
pages Web Dynamiques via un serveur HTTP, mais pouvant également fonctionner
comme n’importe quel langage interprété de façon locale. PHP est un langage
impératif disposant depuis la
47. Rapport de projet de fin d’études Page 47
Webographie :
Sources Informations
http://fr.wikipedia.org/wiki/PHP
http://fr.wikipedia.org/wiki/JQuery
http://fr.wikipedia.org/wiki/Mod%C3%A
8le-vue-contr%C3%B4leur
http://fr.openclassrooms.com/informati
que/cours/adopter-un-style-de-
programmation-clair-avec-le-modele-
mvc
http://blog.webnet.fr/tag/responsive-
design/
http://www.laformation.ma/#
http://www.9rayti.com/
http://www.etudiant.ma/
Définition du PHP5.
Définition du JQuery.
Définition du MVC.
Des exemples du MVC.
BOOTSTRAP
Avoir des informations réelles
+
Les sites officiels des établissements