SlideShare une entreprise Scribd logo
SAE 105 - Production web
Site web et données structurées
1
2
La SAE 105 consiste à développer un premier site web
• Le site devra être réalisé "à la main" en html, css, javascript.
• Certaines pages du site devront être produites à partir d'un jeu de
données structurées.
• Le site sera déployé sur l'hébergement WebEtu.
SAE 105 - Production web
Objectifs
3
SAE 105 - Production web
Apprentissages critiques
Exploiter de manière autonome un environnement de
développement efficace et productif
Produire des pages Web statiques et fluides utilisant un
balisage sémantique efficace
Générer des pages Web ou vues à partir de données
structurées incluant des interactions simples
Mettre en ligne une application Web en utilisant une
solution d’hébergement standard
AC 4101 |
AC 4102 |
AC 4103 |
AC 4104 |
SAE 105 - Production web
4
Site web
Données
json
Affichage
html/css
Traitement
Javascript
Serveur
WebEtu
+ DevWeb
Ressources : IntegWeb + Hébergement
Modèle
Approche MVC : Modèle
Vue
+ Vue
Contrôleur
+ Contrôleur
SAE 105 - Production web
Sujet libre mais sous contraintes
5
• Utilisation de HTML/CSS, abordé en cours, valide w3c
• Original. Pas de thème repris d'internet ! (pas responsive)
• Du contenu rédactionnel significatif, médias libres de droit
Vue
• Format JSON (JavaScript Object Notation)
• Un volume significatif de données
• Une structuration hiérarchique
Modèle
Contrôleur
• Javascript
• Utilisation de la méthode vue en cours
• Pas de script repris d'internet
SAE 105 - Production web
Exemple 1
6
SAE 105 - Production web
Exemple 2
7
SAE 105 - Production web
Exemple 3 : popcorn
8
SAE 105 - Production web
Exemple 4 : innovimmo
9
SAE 105 - Production web
Organisation
10
• Réalisé en binôme d'étudiants, impérativement du même groupe tp
• Être original dans le sujet du site
Volume de la SAE (hors ressources) : 54h
R111
IntegWeb
R112
DevWeb
R113
Hébergement
PRJ AUT Restitution
14h tp 2h cm + 2h td + 8h tp 2h td 12h 10h 4h
Évaluation
R111
IntegWeb
R112
DevWeb
R113
Hébergement
Restitution
4 4 2 1
Coef
SAE 105 - Production web
Planning et livrables
11
• lundi 8 décembre 18h00
• Fiche d'intention (pdf)
• Nom du projet, sujet, premières données, url et site en construction
Liv #1
• Dimanche 14 janvier 22h00
• Archive des sites finaux (zip)
• Sites dans les 2 versions (statique + dynamique) et rapport markdown readme
Liv #3
• Lundi 18 décembre 20h00
• Archive du site statique (zip)
• Première version des fichiers JSON (zip)
Liv #2
• Lundi 15 janvier
• Restitution des travaux
• Évaluation par les pairs
Liv #4
SAE 105 - Production web
Cours Arche dédié
12
[MMI1] SAE 105 - Production web
Salon "forum" discord dédié
• Entrées par ressource (posts)
• Pensez à suivre tous les posts
• Publiez dans les bons posts
Mentionner les enseignants
• @sae105-referents
SAE 105 - Production web
13
" Bon travail tout le monde "

Contenu connexe

Similaire à Présentation de lancement SAE105

Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
Chamseddine Ouerhani
 
Drupal Factory kézako ?
Drupal Factory kézako ?Drupal Factory kézako ?
Drupal Factory kézako ?
slybud
 
ASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API ManagementASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API Management
Microsoft
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Aymen Loukil
 
Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...
Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...
Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...
Etienne Bailly
 
Groupe d'usagers SharePoint Québec - PnP pour les usagers!
Groupe d'usagers SharePoint Québec - PnP pour les usagers!Groupe d'usagers SharePoint Québec - PnP pour les usagers!
Groupe d'usagers SharePoint Québec - PnP pour les usagers!
Sébastien Levert
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
Frédéric Harper
 
The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014
Matthieu de Canteloube
 
Tout sur la migration vers Project 2013
Tout sur la migration vers Project 2013Tout sur la migration vers Project 2013
Tout sur la migration vers Project 2013
Microsoft
 
Alphorm.com Support de la Formation WebDev 21
Alphorm.com Support de la Formation WebDev 21Alphorm.com Support de la Formation WebDev 21
Alphorm.com Support de la Formation WebDev 21
Alphorm
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
Horacio Gonzalez
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
Francois ANDRE
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
cjolif
 
AJAX/RIA facile avec ZF et JQuery
AJAX/RIA facile avec ZF et JQueryAJAX/RIA facile avec ZF et JQuery
AJAX/RIA facile avec ZF et JQuery
Zend by Rogue Wave Software
 
Jenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagnerJenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagner
Geeks Anonymes
 
Realiser un-site-internet-chef-de-projet-web
Realiser un-site-internet-chef-de-projet-webRealiser un-site-internet-chef-de-projet-web
Realiser un-site-internet-chef-de-projet-web
Jean-Baptiste Plantin
 
Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013
Chipway
 
Les Nouveautés XAML dans Windows 8.1
Les Nouveautés XAML dans Windows 8.1Les Nouveautés XAML dans Windows 8.1
Les Nouveautés XAML dans Windows 8.1
Microsoft
 
Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8
Microsoft
 

Similaire à Présentation de lancement SAE105 (20)

Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Drupal Factory kézako ?
Drupal Factory kézako ?Drupal Factory kézako ?
Drupal Factory kézako ?
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
ASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API ManagementASP.NET Web API & Azure API Management
ASP.NET Web API & Azure API Management
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
 
Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...
Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...
Collab365 - Gouvernance Office 365 avec PowerShell | Benoit Jester | Etienne ...
 
Groupe d'usagers SharePoint Québec - PnP pour les usagers!
Groupe d'usagers SharePoint Québec - PnP pour les usagers!Groupe d'usagers SharePoint Québec - PnP pour les usagers!
Groupe d'usagers SharePoint Québec - PnP pour les usagers!
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014The DevOps Wonder @ PHPTour Lyon 2014
The DevOps Wonder @ PHPTour Lyon 2014
 
Tout sur la migration vers Project 2013
Tout sur la migration vers Project 2013Tout sur la migration vers Project 2013
Tout sur la migration vers Project 2013
 
Alphorm.com Support de la Formation WebDev 21
Alphorm.com Support de la Formation WebDev 21Alphorm.com Support de la Formation WebDev 21
Alphorm.com Support de la Formation WebDev 21
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
AJAX/RIA facile avec ZF et JQuery
AJAX/RIA facile avec ZF et JQueryAJAX/RIA facile avec ZF et JQuery
AJAX/RIA facile avec ZF et JQuery
 
Jenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagnerJenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagner
 
Realiser un-site-internet-chef-de-projet-web
Realiser un-site-internet-chef-de-projet-webRealiser un-site-internet-chef-de-projet-web
Realiser un-site-internet-chef-de-projet-web
 
Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013
 
Les Nouveautés XAML dans Windows 8.1
Les Nouveautés XAML dans Windows 8.1Les Nouveautés XAML dans Windows 8.1
Les Nouveautés XAML dans Windows 8.1
 
Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8
 

Dernier

Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
dokposeverin
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
mcevapi3
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
MahouwetinJacquesGBO
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
M2i Formation
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
lebaobabbleu
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
Martin M Flynn
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
OlivierLumeau1
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
lebaobabbleu
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
kamouzou878
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 

Dernier (13)

Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 

Présentation de lancement SAE105

  • 1. SAE 105 - Production web Site web et données structurées 1
  • 2. 2 La SAE 105 consiste à développer un premier site web • Le site devra être réalisé "à la main" en html, css, javascript. • Certaines pages du site devront être produites à partir d'un jeu de données structurées. • Le site sera déployé sur l'hébergement WebEtu. SAE 105 - Production web Objectifs
  • 3. 3 SAE 105 - Production web Apprentissages critiques Exploiter de manière autonome un environnement de développement efficace et productif Produire des pages Web statiques et fluides utilisant un balisage sémantique efficace Générer des pages Web ou vues à partir de données structurées incluant des interactions simples Mettre en ligne une application Web en utilisant une solution d’hébergement standard AC 4101 | AC 4102 | AC 4103 | AC 4104 |
  • 4. SAE 105 - Production web 4 Site web Données json Affichage html/css Traitement Javascript Serveur WebEtu + DevWeb Ressources : IntegWeb + Hébergement Modèle Approche MVC : Modèle Vue + Vue Contrôleur + Contrôleur
  • 5. SAE 105 - Production web Sujet libre mais sous contraintes 5 • Utilisation de HTML/CSS, abordé en cours, valide w3c • Original. Pas de thème repris d'internet ! (pas responsive) • Du contenu rédactionnel significatif, médias libres de droit Vue • Format JSON (JavaScript Object Notation) • Un volume significatif de données • Une structuration hiérarchique Modèle Contrôleur • Javascript • Utilisation de la méthode vue en cours • Pas de script repris d'internet
  • 6. SAE 105 - Production web Exemple 1 6
  • 7. SAE 105 - Production web Exemple 2 7
  • 8. SAE 105 - Production web Exemple 3 : popcorn 8
  • 9. SAE 105 - Production web Exemple 4 : innovimmo 9
  • 10. SAE 105 - Production web Organisation 10 • Réalisé en binôme d'étudiants, impérativement du même groupe tp • Être original dans le sujet du site Volume de la SAE (hors ressources) : 54h R111 IntegWeb R112 DevWeb R113 Hébergement PRJ AUT Restitution 14h tp 2h cm + 2h td + 8h tp 2h td 12h 10h 4h Évaluation R111 IntegWeb R112 DevWeb R113 Hébergement Restitution 4 4 2 1 Coef
  • 11. SAE 105 - Production web Planning et livrables 11 • lundi 8 décembre 18h00 • Fiche d'intention (pdf) • Nom du projet, sujet, premières données, url et site en construction Liv #1 • Dimanche 14 janvier 22h00 • Archive des sites finaux (zip) • Sites dans les 2 versions (statique + dynamique) et rapport markdown readme Liv #3 • Lundi 18 décembre 20h00 • Archive du site statique (zip) • Première version des fichiers JSON (zip) Liv #2 • Lundi 15 janvier • Restitution des travaux • Évaluation par les pairs Liv #4
  • 12. SAE 105 - Production web Cours Arche dédié 12 [MMI1] SAE 105 - Production web Salon "forum" discord dédié • Entrées par ressource (posts) • Pensez à suivre tous les posts • Publiez dans les bons posts Mentionner les enseignants • @sae105-referents
  • 13. SAE 105 - Production web 13 " Bon travail tout le monde "