Les grandes facettes du développement Web

Cette présentation passe en revue les grandes facettes du développement Web à travers nos pratiques depuis plusieurs années dans le domaine. Nous évoquerons les différentes approches qui sont apparues au fil du temps. Parfois ces facettes se chevauchent, se complètent, et se transforment. Pour chaque une d’elles, nous présenterons le contexte, les besoins et les réponses technologiques. Très concrètement, on verra ensemble les Frameworks, l’AJAX, le Web responsive, les CGI, LAMP, les CMS, MVC, les Websocket, HTML5, CSS3, jQuery, SEO, le Web de données …

Transcript

1. Les grandes facettes du développement Web 13 et 14 juin 2013 - Nancy Nicolas Thouvenin - Stéphane Gully
2. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy Qui sommes nous ? Nicolas Thouvenin <nicolas.thouvenin@inist.fr> Stéphane Gully <stephane.gully@inist.fr> Projets Web depuis 2000 • LAMP, NodeJS • HTML, CSS, jQuery • Frameworks PHP • SPIP, Wordpress
3. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy Facettes 1. Web documentaire 2. Web dynamique 3. Le fond et la forme 4. CMS 5. Framework serveur 6. Javascript 7. jQuery 8. Framework client 9. HTML5 10. Framework HTML 11. Web automatique
4. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy Canvas Contexte et besoins Réponses technologiques (Zoom) Pour chaque facette
5. • Internet existe depuis 1972 • Internet est binaire (mail, ftp, gopher) • Besoin d'échanger des données non binaire 13 et 14 juin 2013 - Nancy 1. Web documentaire Nicolas Thouvenin - Stéphane Gully
6. Nicolas Thouvenin - Stéphane Gully Invention du Web en 1989 (libre en 1993) • Protocole : HTTP (texte) • Format : HTML (hypertext) • Serveur : Apache, IIS • Client / navigateurs : Mosaic, Netscape • Editeurs : Front page, Dreamweaver, Amaya 13 et 14 juin 2013 - Nancy 1. Web documentaire
7. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 1. Web documentaire Web = HTTP + HTML Internet POP SMTP IMAP IRC XMPP NNTP ... 1989 1972
8. Nicolas Thouvenin - Stéphane Gully • Pages statiques • Besoin d’interactions avec les données 13 et 14 juin 2013 - Nancy 2. Web dynamique
9. Nicolas Thouvenin - Stéphane Gully Générer du HTML • CGI : HTML dans du code (C, Perl, ...) • PHP : du code dans du HTML (1994) Socle applicatif dédié : • Linux Apache Mysql PHP - LAMP 13 et 14 juin 2013 - Nancy 2. Web dynamique
10. Nicolas Thouvenin - Stéphane Gully Collisions • entre langages PHP vs HTML • entre structure et présentation <p> vs <center> Articuler et identifier les rôles 13 et 14 juin 2013 - Nancy 3. Le fond et la forme
11. Nicolas Thouvenin - Stéphane Gully • Génération du HTML : Template (smarty, twig, jsp) • Manipulation des données : PHP • Structuration : HTML • Présentation : CSS 13 et 14 juin 2013 - Nancy 3. Le fond et la forme
12. Nicolas Thouvenin - Stéphane Gully • Les données sont prisonnières de la technologie (phpMyAdmin, filezilla, ...) • Besoin d'industrialisation (volumétrie) • Démocratiser la publication de contenu : Informaticien vs Grand Publique 13 et 14 juin 2013 - Nancy 4. CMS
13. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 4. CMS Une offre d'hébergement simplifiée (PaaS) Des progiciels • Workflow de publication de contenu • Espace dédié aux graphistes • Plugins Spip, Drupal, Wordpress, Joomla, XWiki, ...
14. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 4. CMS
15. Nicolas Thouvenin - Stéphane Gully • Déploiement lourd des applications sur PC • Web permet : mise à jour, collaboratif ... Web documentaire VS applications "lourdes" Petits programmes VS programmation métier Développer des applications Web • Cadrer les développements • Mutualiser les algorithmes 13 et 14 juin 2013 - Nancy 5. Framework serveur
16. Nicolas Thouvenin - Stéphane Gully Industrialiser les développements. • Frameworks : Zend, Symfony, CakePHP, PEAR, Ruby On Rail, Django, Struts, Grails, ... • Serveurs d'application : Tomcat, jboss, glassfish, ... 13 et 14 juin 2013 - Nancy 5. Framework serveur
17. Nicolas Thouvenin - Stéphane Gully Model View Controler : 13 et 14 juin 2013 - Nancy 5. Framework serveur
18. Nicolas Thouvenin - Stéphane Gully • Applications nécessitent plus d'interactions avec le serveur • Temps de chargement des pages • Augmentation de la taille et du nombre des pages Besoin de réactivité et d'ergonomie 13 et 14 juin 2013 - Nancy 6. Javascript
19. Nicolas Thouvenin - Stéphane Gully Démocratisation de JavaScript (Google Maps) Apparition de librairies Javascript : • Abstraction du navigateur • Chargement des pages par morceaux • Fonctionnalités avancées (effets visuel, etc.) XAJAX, Prototype, Scriptaculos... 13 et 14 juin 2013 - Nancy 6. Javascript
20. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 6. Javascript Serveur js <div> js page HTML Navigateur Web callback 1 2 3 4
21. Nicolas Thouvenin - Stéphane Gully • Omniprésence de Javascript • Développement complexe (Langage atypique, DOM compliqué) • Mélange fréquent de HTML et de Javascript Modulariser et simplifier l'usage de Javascript 13 et 14 juin 2013 - Nancy 7. jQuery
22. Nicolas Thouvenin - Stéphane Gully jQuery : • S'abstraire du DOM : « les sélecteurs d'élément façon CSS » • Chaînage des traitements : « manipulation, gestion des évènements » • Notion de plugins : « entendre les fonctionnalités d'HTML simplement » 13 et 14 juin 2013 - Nancy 7. jQuery
23. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 7. jQuery Avant Après
24. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 7. jQuery Modification dynamique du style Enregistrement simplifié d'événement Envoi de formulaire en AJAX
25. Nicolas Thouvenin - Stéphane Gully • Styler des pages n'est plus un travail d'informaticien mais de Web designers • Les applications Web souhaitent ressembler aux applications lourdes Des composants graphiques avancés et normalisés 13 et 14 juin 2013 - Nancy 8. Framework client
26. Nicolas Thouvenin - Stéphane Gully Construction automatisée du HTML/CSS avec des Frameworks • Orienté IHM ExtJS / Qooxdoo / GWT / Flex • MVC coté navigateur AngularJS, Backbone.js 13 et 14 juin 2013 - Nancy 8. Framework client
27. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 8. Framework client
28. Nicolas Thouvenin - Stéphane Gully • Évolution et diversification des usages • Les grands du Web utilisent & sollicitent de plus en plus les capacités des navigateurs Les standards du Web doivent grandir 13 et 14 juin 2013 - Nancy 9. HTML5
29. Nicolas Thouvenin - Stéphane Gully Plus de composants natifs en HTML • Multimédia ◦ Les animations ◦ La 2D & la 3D (canvas, webgl) ◦ Vidéo native • Le pseudo temps réel (websocket) • Les formulaires (date, mail, placeholder) • Des balises sémantiques (nav, header, footer, article) 13 et 14 juin 2013 - Nancy 9. HTML5
30. Nicolas Thouvenin - Stéphane Gully Déclaration simplifiée 13 et 14 juin 2013 - Nancy 9. HTML5 Des nouvelles balises
31. Nicolas Thouvenin - Stéphane Gully Dessiner dynamiquement 13 et 14 juin 2013 - Nancy 9. HTML5
32. Nicolas Thouvenin - Stéphane Gully • De nouveaux périphériques accèdent aux Web (smartphones, tablette, TV, etc.) • HTML est plus puissant • Les surcouches à HTML s'accumulent • On s'éloigne de la philosophie du Web et de ses standards Créer des rendus complexes plus simplement 13 et 14 juin 2013 - Nancy 10. Framework HTML
33. Nicolas Thouvenin - Stéphane Gully Les standards du Web suffisent • Web responsive, CSS3, media query • Pré-processeur CSS (Less, sass, stylus) • Bootstrap (twitter, htmlkickstart, ink) • jQuery mobile • Phonegap, Titanium, Sencha Touch 13 et 14 juin 2013 - Nancy 10. Framework HTML
34. Nicolas Thouvenin - Stéphane Gully • Google est incontournable • Un bon référencement est vitale (commerce électronique) • Données exposées mais non structurées Mettre à disposition et valoriser les données 13 et 14 juin 2013 - Nancy 11. Web automatique
35. Nicolas Thouvenin - Stéphane Gully • Optimiser son référencement (SEO devient un métier, panda, pingouin) • Normaliser les données & les pages HTML (microformat, schema.org, RDFa) • S'exposer aux robots et programmes Web services (API, REST, SOAP, SPARQL) 13 et 14 juin 2013 - Nancy 11. Web automatique
36. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy 11. Web automatique
37. Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy Conclusion 11 facettes et 4 domaines Programmation serveur Programmation client (Javascript) Balisage (HTML) Style (CSS) S'articulent de différentes façons et évoluent.
38. Web documentaire Nicolas Thouvenin - Stéphane Gully 13 et 14 juin 2013 - Nancy Conclusion Web dynamique Fond et forme / CMS / Framework serveur Ajax / jQuery Framework client HTML5 / Framework HTML Programmation serveur Programmation client Balisage Style
39. 13 et 14 juin 2013 - Nancy Ajax / jQuery Framework client HTML5 / Framework HTML Nicolas Thouvenin - Stéphane Gully Questions
40. Nicolas Thouvenin - Stéphane Gully • http://rainbowwellnessregina.blogspot.fr/2013/02/web-designers.html • http://www.blog.florian-bogey.fr/detecter-une-requete-ajax-en-php.html • https://twitter.com/joelesko • http://bpesquet.developpez.com/tutoriels/php/evoluer-architecture-mvc/ • http://harvesthq.github.io/chosen/ • http://demo.qooxdoo.org/devel/playground/#Tree-ria • http://www.allocine.fr/film/fichefilm_gen_cfilm=139589.html 13 et 14 juin 2013 - Nancy Crédits