Digital race evolution programmation web 1.0

Le Web se transforme sans cesse et ses usages s'étendent de plus enplus à de nouvelles classes d'appareils.

Ce phénomène semble s'accentuer avec le temps et risque de nousobliger à revoir complètement notre vision du Web…

En même temps, le Web est tout récent, il n’a que 25 ans, et il n’est pas àson premier revirement de situation !

Concrètement, ce que nous allons essayer de faire ensemble, c’est deplonger au cœur de l’évolution de la programmation web. Pas si simple…

Thibaud HAMET – Max BARON SAS 1 DIGITAL RACE– Août 2015

1Histoire de la

programmation web


1Histoire de la programmation web



Pour commencer un petit peu d’histoire …

1995 - 2001Vers plus d’interactivitéLes langages de scriptingLes plugins

1989 – 1994Les débuts du web : L’émergence du HTML Les premiers navigateurs web

Première page WEB publiée par le CERN

HTML Langage de balisePermet de créer du contenu hypertexteHTTP permet d’échanger des documents sur le web

Navigateur NetscapeAppariation du Livescript

CSSMise en forme de contenu HTML

JavaScriptScript interprété par le navigateurAnimationInteractivité

NavigateurIE

ShockwaveFlashAnimationContenu interactif

C, C++, Shell Scripts … les exécutables

PHPScript côté serveurProduction de code HTMLInteraction Base de donnée

Ruby

Navigateur Mosaic

Cli

ent

Sid

eSe

rver

Sid

e

PythonScript

2002 - 2006Des développements simplifiés : Les Frameworks

.NETFramework développementMicrosoft

ASPSites Web Dynamiques

ColdfusionSimplification de la programmation

Ruby on railFramework Ruby

JavaArchitectures distribuéesModèle MVC

SymfonyFramework PHP

SilverlightPluginContenu multimédia

2006 – 2015Interactivité décuplée

L’asynchrone client serveurMultimédia

HTML 5GéolocalisationSémantiqueAudio / VidéoDrag and dropWeb Socket

CSS3 Animation2D/3D transformation

NavigateurGoogleChrome

Framework JavaScriptGoogleManipulation du DOMRenforcer le lien HTML CSSInterfaces plus réactives

WebServicesSOAP / WSDLREST

Perl

AJAXAsynchrone XMLHTTPResquestNotification Push

NavigateurFirefox

WEB 1.0 – Web statique / read only WEB 2.0 – Social / interactif

Node JS : Framework Javasript pour les serveurs

2Une évolution à grande vitesse



L’évolution du WEB 1989 – 2003 : Le WEB 1.0

Le WEB 1.0 est un web statique. Peu d’interactivité : Les utilisateurs consomment ducontenu : read only. Le Web 1.0 connecte de l’information

Les technologies mises en œuvre

Description et mise en forme de pages web : HTML /XHTML/XML/ CSS

Scripts : JavaScript / Flash

Script : PHP / PERL / PythonJSP

Client Side Serveur Side

Le Web 1.0Le principe du Web : Un échange de documents basé sur un modèleclient / serveur

internet

Les serveurs Web :

Un processus qui écoute sur le port TCP 80 en attente de connexions clientes

Lors de la réception de la requête le serveur, le serveur l’analyse et répond au client avec les éléments demandés. Par exemple : Une page HTML + CSS + JavaScript

Le serveur renvoie des documents html statiques ou dynamiques grâce à des langages de scripts comme PHP ou PERL

Les principaux serveurs web sont : Apache Microsoft IIS

Les Clients :

Pour les clients, le web est un réservoir à documents (pages / ressources) hébergés sur des serveurs. Chaque page peut contenir des liens vers d’autres pages ou contenus.

L’accès aux documents est possible via un terminal (ordinateur / tablette / smartphone) au travers d’un navigateur Web

Le navigateur utilise HTTP pour lancer des requêtes à destination d’un serveur web pour demander à recevoir du contenu en provenance d’un serveur.

Le navigateur web interprète le contenu reçu : Code HTML / CSS / JavaScript …

1

2

Server Side

3 Envoi du document

demandé

4Interprétation par le

navigateur du document

reçu

1Demande d’accès à une

ressource hébergé sur un

serveur via une URL

Analyse et traitement de

de la requête

Client Side



Le WEB 1.0, un web statique : notion de synchronisme client / serveur

Action 1

Action 2

Requête HTTP 1

Page complète 1

Requête HTTP 2

Page complète 2

Le WEB 1.0 est un web statique. L’utilisateur envoie des requêtes HTTP vers des serveurs grâce à son navigateurLe serveur Web gère la requête et construit du code HTML et CSS qui constitue la page web. Ce code est envoyé à l’utilisateur et interprété par le navigateur.

Les appels vers le serveur sont bloquants pour les utilisateurs : Notion de synchronisme. Le client attend la réponse à sa requête pour continuer son exécution Attente utilisateur

Pas de contrats entre client et serveur : Problème de compatibilité en fonction des navigateurs

Le Web 1.0 Échanger des données sur internet : les requêtes HTTP

L’ Hypertexte Transfert Protocol est le protocole le plus utilisé sur internet pour l’échange de données sur internet.Il sert exclusivement au transfert de données entre un client et un serveur et plus particulièrement des pages Web écrites enHTML.

Protocole Mot de passe(facultatif)

Nom du serveur ou @ IP

Port (facultatif) Chemin

http://

https://

ftp

…:/

User:password@ www.example.com

92.1.33.111

:80

:443

:21

…

/monrepertoire/monfic

hier.html

Les requêtes HTTP contiennent les informations suivantes : 1. Une commande , une URL et la version de protocole http utilisée .2. Un en-tête3. Le corps de la requête, qui contient les éléments qui permettent au serveur de traiter la demande.

Les principales commandes possibles sont : •Get : permet de demander du contenu au serveur •Head : permet de demander des informations sur une ressource au serveur•Post : permet de modifier une ressource sur le serveur•Connect : permet d’utiliser un proxy pour se connecter au serveur•Put : ajoute une ressource sur le serveur

Les ressources sont localisées grâce à une chaîne de caractères : l’Uniform Ressouce Locator (URL)Les URL se décomposent de la manière suivante :

En fonction de la commande, le serveur répond à la requête client de la manière suivante : •Ligne de statut •En-tête•Corps


HTTP a été créé par en 1990 par Tim Berners-Lee

http://www.example.com/

Décrire un document web : le Hypertexte Mark-up Language (HTML)

L’HTML est un langage de structuration ou de balisage.Il permet de décrire la structure et la mise en page du du document à l ’aide de balises .Par exemple :

<title>Titre du document</title>

<H1>Titre principal></H1>

…

Le document HTML est hébergé et modifié côté serveur, il est interprété par le navigateur des clients.

Le HTML est un standard spécifié par le World Wide Web Consortium. Le standard décrit les instructions HTML mais en aucun cas leur implémentation. Il existe toujours une marge d’interprétation ce qui explique le rendu différent de certaines pages web en fonction des navigateurs.

Depuis HTML 4.0 (1997), le HTML ne gère que la structure et le rendu visuel. La mise en forme est gérée indépendamment via les feuilles de style CSS


HTML a été créé par en 1989 par Tim Berners-Lee

Produire des pages web dynamiquement : L’Hpertext Preprocessor : PHP

Le PHP est un langage de script utilisé côté serveur pour produire des pages WEB dynamiques via un serveur HTTP. Il permet de générer dynamiquement des pages en fonction de requêtes utilisateurs :• production de code HTML / CSS / JavaScript• Interaction avec la base de données (requêtes vers base mySQL / Postgre

…) pour insérer des images, vidéos …


Le PHP a été crée en 1994 par Rasmus Lerdorf

Gérer le rendu d’un document HTML, le CSS (Cascading StyleSheets)

Le CSS permet de regrouper au sein d’un même document les caractéristiques de mise en forme associées à des groupes d’éléments HTML.

L’intérêt du CSS est de ne pas avoir à définir la mise en forme des éléments HTML de manière unitaire.

Il est possible de créer la charte graphique de son site Web en définissant le format des titres, des paragraphes …

Lors d’un changement de charte, il suffit de modifier la définition des différents éléments dans le CSS pour reprendre toute la mise en forme d’un site sans modifier le code HTML des pages.


Le CSS a été crée par Hakon Wiumlie en 1995

Vers un peu plus d’interactivité : Le JavaScript

Le Javascript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs. C’est un langage orienté objet à prototype. Pour simplifier, ce langage est principalement utilisé pour renforcer l’interaction des utilisateurs avec un site, créer des animations et améliorer l’ergonomie des sites Web.

Exemples d’utilisation : afficher ou masquer des informations au survol d’un lien, faire glisser un article pour le déposer dans le panier…

Les langages HTML ou PHP au contraire ne permettent pas ce genre d’animations (les pages doivent être envoyées au serveur et le navigateur attend que la page revienne avec les modifications). Avec du JavaScript, le navigateur Internet peut lire et exécuter immédiatement les instructions Javascript. Le JavaScript peut également communiquer avec le serveur Web, ce qui peut permettre par exemple de compléter une page sans avoir à redemander au serveur l’intégralité de la page (exemple des listes déroulantes).

Ce langage de programmation ne doit donc servir qu’à rajouter une couche de fonctionnalités qui améliore votre site, mais celui-ci doit fonctionner parfaitement sans JavaScript.

Attention à ne pas confondre le Java et le JavaScript ! Ces deux langages sont très différents.

Le Javascript a été créé par Brendan Eich en 1995



Du Web 1.0 vers le Web 2.0

Les facteurs clés du changement

L’évolution des terminaux clients : • Plus de mobilité • Plus de puissance• Plus de fonctionnalités :

• Tactile• géolocalisation

L’évolution des réseaux : Démocratisation du haut débit : ADSL puis FTTHHaut débit mobile : 3G puis 4G

Nouveaux usages :Réseaux sociaux


Le Web 2.0 est le web social et interactifL’utilisateur interagit et crée du contenu (readwrite web)Le Web 2.0 connecte des personnes


RIA : rich internet application : AJAX Asynchrone java script et XMLApplet JavaFlash / Silverlight …

SOA service oriented architecture : API Web service SOAP / REST .

RSS : permet la syndication à des flux d’information

Wiki : contenu édité par plusieurs utilisateurs

L’évolution du WEB 2003 - 2015: Le WEB 2.0


AJAX est basé sur l'objet XMLHttpRequest qui permet de faire une requête via Javascript à un serveur HTTP. Le but est donc, comme dans le "Web 1.0", de faire une requête au serveur et d'en attendre le retour. Cependant, le navigateur du client n'est pas nécessairement rafraîchi et tout est transparent pour l'utilisateur.L’utilisateur n’attend plus à chaque requête ce qui améliore grandement l’interactivité

Le Web 2.0 : Les RIA Des pages Web plus dynamiques grâce la gestion de l’asynchrone avec AJAX

Action 1

Action 2

Requête HTTP 1

Retour de l’appel

Requête HTTP 2

Retour de l’appel

Mise à jour de la page


Le Web 2.0Agréger du contenu d’autres sites Web: les WEB services.

Les Webs services sont un mécanisme de communication entre applications au travers d’internet indépendant de tout langage de programmation et de toute plate-forme d’exécution.

Les webs services :• sont accessibles via le réseau• disposent d’interface publiques décrites en XML• ses descriptions sont stockés dans un annuaire (fonctionnalités…)

Les premiers fournisseurs de services web sont ainsi les fournisseurs deservices en ligne (météo, bourse, planification d'itinéraire, pages jaunes, etc.), mettant à dispositiondes développeurs des API (Application Programmable Interface) payantes ou non, permettant d'intégrer leur service ausein d'applications tierces.

Exemple l’API google map permet à tous les développeurs d’utiliser google map sur le site

3Les tendances et perspectives


La renaissance du HTML avec le HTML 5 ?

L’HTML5 dernière évolution du HTML apporte son lot de nouveautés.


La renaissance du HTML avec HTML 5 ?Octobre 2014 marque un grand tournant dans l’histoire du HTML. Le W3C a reconnu le HTML 5 comme Recommandation (norme à utiliser).

ConséquencesLes évolutions à venir devraient êtreplus nombreuses et rapides. Uneaugmentation du nombre d’API,notamment pour l’accès au matérielsur mobiles, est à prévoir.

La renaissance du HTML avec le HTML 5 ?C’est quoi au fait le HTML 5 ?


Le HTML n’est pas que le successeur du HTML 4 … Il révolutionne le HTML en

améliorant l’accessibilité et l’interactivité

Le HTML5 se pose en concurrent du flash en

permettant la gestion des contenus audio, vidéo et des

animations nativement.

Le Web socket permet une communication

bidirectionnelle client serveur. Le serveur peut

envoyer des données au client (push).

Le HTML5 permet de gérer la géolocalisation

Le HTML 5 permet de gérer le offline

Le Javascript au top du top ?


Il est au cœur de la plupart des développements web1

Il monte en puissance incontestablement2

Des nouveautés l’enrichissent chaque année3

• Ecmascript 6 & 7…• Reactjs• Io.js• …

Le Javascript au top du top ?En quoi le Javascript est-il un langage qui s’envole de plus en plus haut ?


2015 est l’année de la nouvelle spécification de Javascript : Ecmascript 6 Petit rappel, Ecmascript est un langage de programmation de type script standardisé, dont les spécifications sont mises en œuvre dans différents langages de script comme Javascript.

Cette évolution apporte des nouveautés en terme de syntaxes (fonctions flèches, classes…) et fonctionnalités (module, générateur, promise...).

Les outils autour du Javascript sont de plus en plus nombreux et cela permet aujourd’hui d’avoir de meilleurs workflows et plus de bonnes pratiques. Les navigateurs évoluent au rythme du Javascripten présentant aujourd’hui des consoles de débogage très complètes. IE11 est de plus pratiquement au niveau de Chrome et Firefox, ce qui favorise l’adoption du Javascript.

Un écosystème grandissant

Les Web components, une belle promesse ?

Les webscomponents ont le vent en poupe. Ils sont un ensemble de spécifications comprenant le shadow DOM, les imports, la notion de custom elements… Ils ont des impacts entre autres sur les composants d’interface en JavaScript, sur la simplification et l’extension de la syntaxe HTML et sur la standardisation du templating côté client.

Composants d’interface en JavaScriptLes webcomponents viennent influencer la manière dont nous codons nos pages HTML en y ajoutant une approche résolument modulaire. Ils viennent généralement se placer entre le document et les éléments. Ils peuvent être conçus comme des groupes autonomes d’éléments formant un bloc identifiable visuellement et fonctionnellement.

Ainsi, ils se substituent assez bien au concept de widgets, ces composants d'interfaces déjà popularisés depuis de nombreusesannées par des bibliothèques comme jQueryUI, YUI (abandonné il y a peu par Yahoo) ou encore les widgets Dojo. Le net avantage des Web Components par rapport à ces bibliothèques est la simplicité d'intégration, puisqu'il suffit d'utiliser la balise personnalisée dans votre HTML pour charger le composant. Les développeurs de composants sont encouragés à permettre le paramétrage de ces composants directement via des attributs HTML, afin que le composant puisse être utilisé sans écrire une ligne de JavaScript.Toutefois, une simple déclaration HTML ne peut égaler la flexibilité du paramétrage et de l'initialisation JavaScript, c'est pourquoi certains Web Components complexes s'utilisent encore par le biais d'une API JavaScript.Ce nouveau standard devrait donc en théorie sonner le glas de ces différentes bibliothèques UI, ce qui fait que nous n'aurions plus à nous préoccuper des dépendances propres à chaque widget trouvé sur le Net. En théorie seulement, car on trouve déjà de nouvellesbibliothèques regroupant des Web Components avec un format, un style et des spécificités qui leur sont propres : Polymer de Google et Brick de Mozilla par exemple. Pour l'instant, ils font des efforts en matière d'interopérabilité, mais nous n'avons aucune garantie que cela restera le cas avec l'apparition d'autres bibliothèques de ce genre. Malheureusement, les bibliothèques de WebComponents semblent tomber dans les mêmes travers que les bibliothèques de widgets en leur temps.


http://jqueryui.com/

http://yuilibrary.com/

http://dojotoolkit.org/reference-guide/1.10/dojox/widget.html

https://www.polymer-project.org/

http://mozbrick.github.io/

http://www.polymer-project.org/articles/polymer-xtag-vanilla.html

Le CSS3, ça change quoi ?

Le CSS 3 permet de standardiser plusieurs propriétés pour réaliser plusieurs traitements qui nécessitaient auparavant des astuces.

Des nouvelles propriétés de mise en page qui permettent une syntaxe plus lisible

Le CSS3 permet de gérer les animations

Les media queries permettent d’adapter le rendu en fonction des terminaux

Les Viewports permettent de s’adapter à plusieurs types d’écran.

Il permet de d'économiser la bande passante car le code HTML devient plus court.


Le futur du Web : Le Web 3.0



Le WEB 3.0 est le regroupement de trois tendances majeures : Le Web sémantiqueL’internet des objetsL’internet mobile

Le web sémantique

Le RDF

Le SPARQLL’internet des objets Le web mobile

Le responsive web design

OWL

AllJoyn

BusitIf This then that

Un web qui s’adapte au contexte et à l’utilisateur : le Web sémantique.

Le Web sémantique vise à répondre à ce type de requêtes utilisateurs : Je veux partir en vacances aux Etats Unis cet été avec un budget de 5000 euros.J’ai deux enfants, mes centres d’intérêts sont …

Actuellement cela prends plusieurs heures de recherches sur des sites websdivers et variés.

Avec le web sémantique, la réponse vous sera donnée directement. Le système sera capable d’analyser votre demande et de construire la meilleur réponse pour vous. Pour ce faire, il sera capable d’analyser pour vous les commentaires sur les différents sites web concernés, vos historiques de navigation …


Les technologies derrière le web sémantique. Une nouvelle description des ressources web : RDF – SPARQL …

Le Ressource Description Framework (RDF) est un nouveau modèle de description des ressources web et des métadonnées développé par le W3C.Ce modèle permet un accès plus efficace à la donnée en l’enrichissant.

Le principe de RDF repose sur une description par triplet : Sujet / Predicat /Objet.Cette description est une sorte de phrase de grammaire simple :

Toutes ces informations dispersées sur la toile peuvent être reliées à Solucom.La finalité est la construction d’un graph reliant les sujets entre eux.Un langage de requête spécifique appelé SPARQL permetde requêter le graph ainsi construit.

Le Web sémantique permettra donc de rendre le contenu sémantique du Web interprétable non seulement par l’homme, mais aussi par la machine.


Sujet Predicat Objet

Solucom Est un Cabinet de conseil

Solucom Emploie 2000 consultants

Le web mobile : Les applications vs les sites mobiles

Deux approches principales se confrontent pour les développements web mobiles :

• Les applications natives: un logiciel développé pour une plate-forme spécifique.

• Les web applications : site web développé en HTML5 / CSS3 /JavaScript qui s’exécute dans le navigateur web


Applications WEB app

Avantages Plus performante qu’une WEB app

Les stores donne de la visibilité aux applications

Les SDK et les bonnes pratiques fournies par les

fabriquant peuvent accélérer le développement

Une base de code commune à toutes les plateformes

Accessibilité optimale si utilisation du responsive web design

Pas de processus d’approbation store

Les utilisateurs utilisent tous la même version

Inconvénients Plus couteuse à développer surtout sur plusieurs OS.

Pour chaque OS le langage est différent

Plus couteuse à maintenir si plusieurs OS. Les

versions présentes chez les utilisateurs peuvent être

différentes

Les processus d'approbation des stores peuvent

retarder la mise à disposition

Elles n’accèdent pas à l’intégralité des fonctionnalités des terminaux

Supporter plusieurs navigateurs peut entraîner des coût élevés de

développement et de maintenance

Moins de visibilité car absence de store

Le Web sémantique : Quid de la collecte des données ?

Pour fonctionner, le Web sémantique a besoin de récolter « librement » des informations sur

les utilisateurs pour constituer une gigantesque base de données.

Ainsi diverses institutions : Agences de publicités, de sécurité, services de renseignements,

entreprises du web collectent des informations et ceci en restant dans la légalité car dans 90%

des cas ces informations sont mises en ligne par les utilisateurs eux-mêmes.


Le Web 3.0 L’internet des objets : La nécessité d’un langage de communication commun

L’internet des objets vise à rajouter de l’intelligence aux objets en les connectant à Internet.

La multiplication des objets connectés fait naître le besoin d'établir un langage commun entre ces différents appareils. Des plateformes tentent désormais de faire communiquer ces équipements entre eux et d'attirer les développeurs.

Les différentes initiatives : Alljoyn est un standard opensource pour permettre la communication des objets connectés

Busit, une plate-forme qui relie tout élément connecté à Internet, aussi bien réels que virtuels, afin de créer des scénarios intelligents,de faciliter la vie des particuliers et d’accroître les performances des entreprises

If it then that (IFTTT) : créer une automatisation de tâches entre les objets connectés et les réseaux sociaux.


Le Web 3.0 Un web basé sur l’accessibilité : le web mobile

Le Web mobile vise à rendre Internet accessible partout et par tout type de terminaux.Cela implique de résoudre les problématiques :

• de compatibilité avec les différents navigateurs : les langages comme HTML5 vont dans ce sens

• de taille d’écran différentes : responsive web design


Le Web mobileGérer le rendu des sites Web sur des terminaux différents : le responsive Web design (RWD)

Les terminaux actuels sont hétérogènes , les tailles d’écrans et les navigateurs web diffèrent.L’objectif du RWD : offrir une expérience utilisateur optimale quelle que soit la gamme d’appareil.

Un design responsive se base sur :1. Le design Liquid : les largeurs sont exprimées en unités variables

(pourcentage) ce qui permet de s’adapter à la taille de l’écran du terminal2. Les CSS3 media queries qui permettent de modifier la mise en plage en

fonction des capacités du terminal.


Conclusion

Depuis 1993 et la première page web , le web n’a cessé d’évoluer.

Le web est progressivement passé d’un réservoir à document lié entre eux via des liens hypertextes vers un web interactif dans lequel l’utilisateur est contributeur.

Internet est a présent accessible partout grâce à l’évolution des réseaux et des terminaux mobiles. Cela pose de nouvelles problèmes aux développeurs web qui doivent choisir entre des applications plus performantes et les sites web responsives plus accessibles.

Le web de demain ira vers des réponses plus adaptés aux requêtes des utilisateurs grâce au web sémantique. Avant tout il faudra permettre aux machines de comprendre le contenu du web grâce à des nouveaux modèles de description des ressources.

Tous les objets de notre quotidien seront potentiellement connectés à Internet afin de fournir toujours plus de services aux utilisateurs, les plates formes d’échanges joueront un rôle clé dans ce secteur pour leur permettre de communiquer.


Digital race evolution programmation web 1.0

Business

Transcript of Digital race evolution programmation web 1.0