UE Ingénierie Multimédia et Web (IMW)

Transcription

1 Ingénierie Web Ingénierie Multimédia et Web Nicolas Thome Ruven Pillay Page 1

2 Ingénierie Web Partie Développnt Web Page

3 Ingénierie Web Planning des Cours 1er Partie: Indexation d'images: Nicolas Thome 4/11/010 01/1/010 08/1/010 Partie: Développnt Web: Ruven Pillay 15/1/010 Vacances! 05/01/011 1/01/011 19/01/011 Page 3

4 Ingénierie Web Ruven Pillay Ingénieur de Recherche au CRMF au départnt des Archives et Nouvelles Technologies de l'information Imagerie multi/hyperspectrale, 3D Technologies web Web sémantique Ontologies Base de données Page 4

5 Ingénierie Web CRMF Crée in 1931 Centre nationale pour les musées de France Situé dans le musée du Louvre 500m,150 chercheurs, restaurateurs etc Laboratoires pour l'analyse scientifique et restauration des oeuvres Page 5

6 Ingénierie Web Analyses Scientifiques Micro X-ray Fluorescence PIXE analyses Page 6

7 Ingénierie Web Accélérateur de particules! Page 7

8 Ingénierie Web 3D Page 8

9 Ingénierie Web Imagerie Multi/Hyper spectrale Page 9

10 Ingénierie Web Archive Documentaire Archives historique sur l état des oeuvres Rapports sur l état des oeuvres depuis le 19 siècle Rapports de restauration Rapports d'analyse scientifique Données analytique Utilisation des technologies web et base de données avancé Ontologies Web sémantique Accès Multilingue Page 10

11 Ingénierie Web Base de Données Page 11

12 Ingénierie Web Base de Données Page 1

13 Ingénierie Web Base de Données Ruby on Rails 6TB de donnés 10 langues Contenu: oeuvres images rapports analyses scientifiques Lien XML/RDF avec Europeana Page 13

14 Ingénierie Web Planning des Cours 1er Partie: Indexation d'images: Nicolas Thome 4/11/010 01/1/010 08/1/010 Partie: Développnt Web: Ruven Pillay 15/1/010 Vacances! 05/01/011 1/01/011 19/01/011 Page 14

15 Ingénierie Web Objectif Globale Travaux pratique Utiliser des méthodes de conception et architectures web Utiliser les standards Apprendre à mieux déboguer Programmation «propre», modulaire, bien commenté Techniques web avancé Créer une application web avancé pour la reconnaissance d'image en ligne Page 15

16 Ingénierie Web Objectif Technique Utilisation des architectures Logiciel: MVC Service: REST Javascript / Ajax / JSON CSS Utilisation des frameworks pour aider le développnt Javascript, CSS, PHP Optimisation Communication avec services extérieur Page 16

17 Ingénierie Web Evaluation Rapport à rendre sur les 4 séances Code source Structuration Documentation Propre Élégance Evaluation finale Examen (60%) sur les 7 séances Rapports (40%) Page 17

18 Ingénierie Web RETIN Application web avancé pour la reconnaissance d'image en ligne Page 18

19 Ingénierie Web RETIN ETIS, laboratoire des Equipes Traitnt de l'information et Systèmes commune à: ENSEA et l'université de Cergy-Pontoise Moteur d'indexation d'images Algorithmes de recherche et indexation en C++ Serveur en C++ pour gérer les recherches Application web en PHP Méta-données dans MySQL Page 19

20 Ingénierie Web Page 0

21 Ingénierie Web Page 1

22 Ingénierie Web Page

23 Ingénierie Web Page 3

24 Ingénierie Web Page 4

25 Ingénierie Web Cours Aujourd hui L'architecture Logiciel L'architecture Service REST Composants Logiciel MVC LAMP: Linux, Apache, MySQL et PHP Utiliser un framework PHP Page 5

26 Ingénierie Web Environnnt Logiciel LAMP : Linux, Apache, MySQL, PHP Page 6

27 Ingénierie Web LAMP Beaucoup de technologies pour développnt web: LAMP Linux, Apache, MySQL, PHP PHP PHP, Java, Python, Ruby, Perl, ASP, Coldfusion etc Script Interprété pas compilé Syntaxe dérivé de C Efficace et vite MySQL Base de données relationnelle Page 7

28 Ingénierie Web Architecture Logiciel MVC : Model View Controller Page 8

29 Ingénierie Web MVC Architecture Modèle-VueContrôleur Méthode de conception de logiciel Simple Point d'entrée unique ex: index.php Controller Controller View View Model Model Structure flexible Page 9

30 Ingénierie Web Model Gère les données de l'application Interaction avec la base de données Assure l'intégrité des données Méthodes pour: Insertion Suppression Changnt Récupération Exemple Web: Base de données + logique + authentification etc Page 30

31 Ingénierie Web View Affichage de l'interface entre l'application et utilisateur Effectue aucun traitnt Affiche les résultats Exemple Web: Génération de HTML, XML etc Page 31

32 Ingénierie Web Controller Gestion des événnts Gestion de droit d'accès Mets à jour le modèle et view Demande la modification des données au modèle mais modifie rien lui même. Exemple Web: Reçois les requêtes GET, POST etc et contrôle le modele et view Page 3

33 Ingénierie Web MVC Web Controller Controller (PHP) (PHP) XHTML XHTML CSS CSS Javascript Javascript Model Model (PHP) (PHP) MySQL MySQL View View (PHP) (PHP) Page 33

34 Ingénierie Web Exemple Controlleur Class Controller{ function index(){ $list = $model->getall(); $template->render($list); } function new(){ $m = $_POST['object']; $model->new($m); } function delete(){ $m = $_DELETE['object'] ; $model->delete($m) ; }; Page 34

35 Ingénierie Web Exemple Modèle Class Model{ function get($id){ $m = $database->query( ' SELECT * FROM model WHERE id = ' + $id ) ; return $m ; } function new($m){ $database->query( 'INSERT INTO model (title) VALS(' + $m->title + ')' ); } function delete($m){ $m = $_DELETE['object'] ; $database->query(' DELETE FROM model WHERE id = ' + $m + ); }; Page 35

36 Ingénierie Web Exemple Vue <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="en" > <html> <body> <h1> $template->title </h1> <p> $template->text </p> </body> </html> Page 36

37 Ingénierie Web Routing Une seule point d'entré : index.php Utilise les fonctions Rewrite de Apache Par exemple : /images/avions1 /images/avions1/edit /index.php?controller=images&id=avions1&action=index /index.php?controller=images&id=avions1&action=edit Permet des URL plus sémantique Page 37

38 Ingénierie Web Architecture Services REST : Representational State Transfer Page 38

39 Ingénierie Web REST Style architecturale conçu pour les services web (comme SOAP, XML-RPC) Ressource avec identifiant globale URI pour HTTP Ex: Utilise les entêtes de HTTP pour les méthodes Stateless Représentations multiple XML, HTML, JSON etc... Page 39

40 Ingénierie Web REST Méthodes HTTP standards (verbes) GET -> récupérer POST -> créer PUT -> mettre à jour DELETE -> détruire Exemples Liste des images Récupérer une image GET Détruire une image GET DELETE Créer une image POST Page 40

41 Ingénierie Web REST Avantages Simplicité Architecture adaptative (Scalabilité) marche bien avec HTTP cache et serveur proxy Interface qui sépare bien le serveur et client Désavantages Seulnt 4 méthodes Pas pour services complexes Page 41

42 Ingénierie Web Frameworks Exemple PHP : Codeigniter Page 4

43 Ingénierie Web Framework CodeIgniter Logiciel Libre MVC REST Minimaliste mais puissante Documentation bon Bon librairie pour apprendre Page 43

44 Ingénierie Web Structure de Code / index.php system/ application/ config/ models/ views/ controllers/... codeigniter/ database/ libraries/ plugins/... Page 44

45 Ingénierie Web Flux de Contrôle Page 45

46 Ingénierie Web TD1 : Objectif Créer une application web images Architecture MVC, REST Technologies Linux, Apache, MySQL, PHP XHTML Framework PHP Fonctionnalités: Visualiser une base de données des images avec navigation Gérer l'affichage de 1000's images Pagination Navigation Recherche texte Points importants: Structuration propre Modularité Page 46

47 Ingénierie Web Etapes MySQL Créer une base de données et table pour les images Remplir le base PHP Tester PHP et la connexion entre PHP et MySQL Télécharger la librairie CodeIgniter et la configurer Etudier le structure MVC Créer notre propre contrôleur, modèle et vues pour les images Ajouter possibilité de naviguer dans les images Ajouter fonctions pour recherche texte Ajouter du «Logging» Nouvelle table MySQL Enregistrer tous les requetes sur le site Page 47

48 Ingénierie Web Questions? Page 48