Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully

Transcription

1 Les grandes facettes du développement Web

2 Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery Frameworks PHP SPIP, Wordpress

3 Facettes Web documentaire Web dynamique Le fond et la forme CMS Framework serveur Javascript jquery Framework client HTML5 Framework HTML Web automatique

4 Canvas Pour chaque facette Contexte et besoins Réponses technologiques (Zoom)

5 1. Web documentaire Internet existe depuis 1972 Internet est binaire (mail, ftp, gopher) Besoin d'échanger des données non binaire

6 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

7 1. Web documentaire 1972 Internet Web = POP SMTP IMAP IRC XMPP NNTP... HTTP + HTML 1989

8 2. Web dynamique Pages statiques Besoin d interactions avec les données

9 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

10 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

11 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

12 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

13 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 4. CMS

15 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

16 5. Framework serveur Industrialiser les développements. Frameworks : Zend, Symfony, CakePHP, PEAR, Ruby On Rail, Django, Struts, Grails,... Serveurs d'application : Tomcat, jboss, glassfish,...

17 5. Framework serveur Model View Controler :

18 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

19 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...

20 6. Javascript Navigateur Web page HTML js js callback <div> Serveur

21 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

22 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»

23 7. jquery Avant Après

24 7. jquery Modification dynamique du style Enregistrement simplifié d'événement Envoi de formulaire en AJAX

25 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

26 8. Framework client Construction automatisée du HTML/CSS avec des Frameworks Orienté IHM ExtJS / Qooxdoo / GWT / Flex MVC coté navigateur AngularJS, Backbone.js

27 8. Framework client

28 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

29 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)

30 9. HTML5 Déclaration simplifiée Des nouvelles balises

31 9. HTML5 Dessiner dynamiquement

32 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

33 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

34 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

35 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)

36 11. Web automatique

37 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 Conclusion Programmation serveur Programmation client Web documentaire Web dynamique Ajax / jquery Framework client Balisage Style Fond et forme / CMS / Framework serveur HTML5 / Framework HTML

39 Questions Ajax / jquery Framework client HTML5 / Framework HTML

40 Crédits