Les grandes facettes du développement Web
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
Facettes 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Web documentaire Web dynamique Le fond et la forme CMS Framework serveur Javascript jquery Framework client HTML5 Framework HTML Web automatique
Canvas Pour chaque facette Contexte et besoins Réponses technologiques (Zoom)
1. Web documentaire Internet existe depuis 1972 Internet est binaire (mail, ftp, gopher) Besoin d'échanger des données non binaire
1. Web documentaire 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
1. Web documentaire 1972 Internet Web = POP SMTP IMAP IRC XMPP NNTP... HTTP + HTML 1989
2. Web dynamique Pages statiques Besoin d interactions avec les données
2. Web dynamique 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
3. Le fond et la forme Collisions entre langages PHP vs HTML entre structure et présentation <p> vs <center> Articuler et identifier les rôles
3. Le fond et la forme Génération du HTML : Template (smarty, twig, jsp) Manipulation des données : PHP Structuration : HTML Présentation : CSS
4. CMS 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
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,...
4. CMS
5. Framework serveur 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
5. Framework serveur Industrialiser les développements. Frameworks : Zend, Symfony, CakePHP, PEAR, Ruby On Rail, Django, Struts, Grails,... Serveurs d'application : Tomcat, jboss, glassfish,...
5. Framework serveur Model View Controler :
6. Javascript 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
6. Javascript 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...
6. Javascript Navigateur Web page HTML js js callback <div> 1 2 3 4 Serveur
7. jquery 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
7. jquery 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»
7. jquery Avant Après
7. jquery Modification dynamique du style Enregistrement simplifié d'événement Envoi de formulaire en AJAX
8. Framework client 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
8. Framework client Construction automatisée du HTML/CSS avec des Frameworks Orienté IHM ExtJS / Qooxdoo / GWT / Flex MVC coté navigateur AngularJS, Backbone.js
8. Framework client
9. HTML5 É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
9. HTML5 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)
9. HTML5 Déclaration simplifiée Des nouvelles balises
9. HTML5 Dessiner dynamiquement
10. Framework HTML 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
10. Framework HTML 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
11. Web automatique 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
11. Web automatique 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)
11. Web automatique
Conclusion 11 facettes et 4 domaines Programmation serveur Programmation client (Javascript) Balisage (HTML) Style (CSS) S'articulent de différentes façons et évoluent.
Conclusion Programmation serveur Programmation client Web documentaire Web dynamique Ajax / jquery Framework client Balisage Style Fond et forme / CMS / Framework serveur HTML5 / Framework HTML
Questions Ajax / jquery Framework client HTML5 / Framework HTML
Crédits 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