Embed Size (px)
Citation preview
3I017 - Technologies Web
Ludovic Denoyer (Cours+Responsable)
Laure Soulier (Cours+TD/TP)
Sylvain Lamprier (TD/TP)
Quentin Bramas (TD/TP)
Aurélia Léon (TD/TP)
Université Pierre et Marie Curie - Licence 3 Informatique
1 / 23
Rappel
ProblématiqueQuelles technologies utiliser pour le développement de Sites(modernes) sur le Web ?
Media Sociaux, Web 2.0, 2.5Caractéristiques :
I Web hautement dynamique (contributions)I Nécessité de grande puissande de traitement de données
ProblèmeLes technologies ”classiques” (PHP, SQL, HTML) ne permettent pas lepassage à l’échelle et le développement de nouveaux sites sur le Webnécessite le développement de nouvelles technologies.
2 / 23
Objectifs
Acquisition de techniques pour le développementde sites Web "modernes"
→ Architectures des Sites ”sociaux”
→ Développement de services Web
→ Développement de d’interfaces homme/machine
→ Traitement de grandes masses de données
3 / 23
Objectifs
Un enseignement ”concret” basé sur lamanipulation de technologies
→ Cours : Présentation des différentes technologies et de leurarticulation
→ TD : Prise en mains des technologies
→ TP : Mise en oeuvre de ces technologies
Les TPs sont tous structurés autour du développement d’un site detype Twitter
4 / 23
Développement d’un site type réseau social
5 / 23
Objectifs
Les TPs sont tous structurés autour dudéveloppement d’un site de type Twitter
Cela implique :→ Les TPs sont additifs ⇒ retard/absence à un TP doit être rattrapé
avant le TP suivant
→ Les TDs introduisent les TPs ⇒ absence en TD = grossesdifficultés en TP
→ Les cours présentent les technologies ⇒ absence en cours =retard en TP
6 / 23
Evaluation
Evaluation de l’UE
L’UE n’est pas une UE difficile, mais une UE dense : une à deuxtechnologies par semaine, aucun retour en arrièreNote des TPs + soutenance de projet = 50%Note examen sur feuille = 50%. L’examen est difficile......
7 / 23
Evaluation
Evaluation du projet
Projet en binôme ou monômeRéalisation de Twitter côté Client + côté ServeurImplémentation de fonctionnalités obligatoires - voir Cours 3Implémentation de fonctionnalités additionnellesPrésentation de la réalisation (TME 11) + Modifications à apporterau projet
I Les modifications sont la ”clefs” de l’évaluation
8 / 23
Développement d’un site type réseau social
A réaliser :
Page d’accueil
Formulaires de connexion / enregistrement
Fonctions d’ajout de contacts
Fonctionnalités permettant de poster un commentaire
Fonctions de recherches thématiques
Statistiques (centres d’intérêts, amis les plus actifs, taux deréponse, etc...)Plus tout autre fonctionalitésoriginale....
9 / 23
Développement d’un site type réseau social
Architecture Client-Serveur
10 / 23
Développement d’un site type réseau social
Architecture Client-Serveur
11 / 23
Développement d’un site type réseau social
Pages Web stockées sur un serveur Web
<html>
Le symbole de Linux est
<img src=« photo.png »>
…
</html> get photo.png
host ...
Le symbole de
Linux est
écran du navigateur
disque durdu serveur
get linux.htmlhost ...
internet
<html>
….Le symbole de
Linux est
<img src=«photo.png»>
…
</html>
linux.html
photo.png
Qu'est-ce que
Linux ?
<html>
…. Le symbole de Linux est
<img src=« photo.png »
…
</html>
200 entêtes
200 entêtes
12 / 23
Développement d’un site type réseau social
Mise en place de services Web
34 +21 = 55
écran du navigateur
disque duret processeur
du serveur
get addition.php?N1=34&N2=21 ...
internet
<html>
...
34+21= 55
...
</html>
200 entêtes
Combien font
34 21+ OK</html>...<? $resu=$N1+$N2;print “$N1 + $N2 = $resu”; ?>...</html>
</html>...<? $resu=$N1+$N2;print “$N1 + $N2 = $resu”; ?>...</html>
13 / 23
Développement d’un site type réseau social
De très nombreuses technos
Langages développement Web→ Java, PHP, ASP, etc...
Frameworks de développement→ Struts, Java Server Faces, Flex, Open Lazlo, etc...
Serveurs de services Web→ Tomcat, IIS, Google Web Server, etc...
Moteurs de bases de données→ MySQL, Hadoop, MongoDB, etc...
Formats d’échange→ HTML, XML, JSON, SOAP, etc...
14 / 23
Quelles Technologies ?
Technologies ClientHTMLCSSJavaScriptAJAX
Technologies d’échange de donnéesJSONXMLAPI/REST - Web API
15 / 23
Quelles Technologies ?
Technologies ServeurServeur Web (ici : TOMCAT)Base de données :
I SQL (ici : MySQL)I NoSQL (ici : MongoDB)
Technologies de traitementMap/Reduce
16 / 23
Concrètement
Etude de CasLe cours est structuré autour du développement ”from scracth” d’unsite Web de type Twitter incluant :
Une interface Web pour les utilisateursUne API disponible pour le développement d’applicationsUn serveur permettant le stockage de grandes masses dedonnées dynamiquesUne interface de traitement de données
17 / 23
Concrètement
Attention :On a que 11 semaines ⇒ Il faut utiliser les technos récentes etrobustes.
Choix de l’enseignementOn a décidé de s’appuyer sur vos connaissance acquises.
Client Web (et non pas client mobile de type IPhone/Android)Serveur Tomcat (JAVA)On garde une base SQL (mais on rajoute du NoSQL)
18 / 23
Développement d’un site type réseau social
Ce que l’on va utiliser :
Présentation graphique→ HTML, CSS, Javascript
Serveur de service Web→ Apache Tomcat
Language développement côté serveur→ JAVA
Communication client - serveur→ AJAX avec format JSON
Bases de Données→ MySQL, MongoDB
19 / 23
Développement d’un site type réseau social
20 / 23
Développement d’un site type réseau social
Modèle - Vue - Controlleur (MVC)
21 / 23
Plan de l’UE
Partie 1 : Côté serveur1 Web Services (API REST)2 Conception de Servlets (TOMCAT/JAVA)3 Gestion de bases de données
F Base relationnelles (MySQL)F Base NOSQL (MongoDB)
4 Communication Serveurs/BD (MYSQL, JDBC, DataSource,...)Partie 2 : Développement de client Web
1 Mise en forme de pages Web (HTML + CSS) (pour différentesplateformes)
2 Pages interactives (Javascript, JQuery, ...)3 Communication Client - Serveur (Tomcat, Servlets, AJAX, ...)
Partie 3 : Traitement de grandes masses de donnéesI Technos (Map/Reduce)I Enjeux/Modèles économique
22 / 23
Critères de réussite de l’UE
Côté étudiant :Les étudiants ont fait preuve d’autonomieCe cours permet d’acquérir un socle pour découvrir ”parsoi-même”Les étudiants ont acquis une compétence professionnelleVous êtes capables de monter votreTwitter/Facebook/Megaupload vous même dès maintenant
Répétition : Cette UE est structurée autour d’un projet qui doit être lasource de motivation de chacun. Les enseignants seront ouverts (etfavorables) à toute proposition/personnalisation de l’UE. Pas deprojet/implication ⇒ pas de ”diplôme”.
23 / 23
Forum de discussion
Utilisation d’un site Piazza pour les discussions entre étudiants +enseignants/étudiantsInscription en cours......sauf opposition
24 / 23
![[XLS] · Web view8 RUE DE MIROMESNIL 75008 PARIS AARPI DERAINS & GHARAVI (AARPI) 21 25 RUE BALZAC 75008 PARIS Jacques AARON AARPI SOULIER (ASS) paris@soulier-avocats.Com 2 AVENUE](https://img.pdfslide.fr/doc/110x75/5b0357ff7f8b9a0a548c07c8/xls-view8-rue-de-miromesnil-75008-paris-aarpi-derains-gharavi-aarpi-21-25-rue.jpg)
