Digital race evolution programmation web 1.0

Le Web se transforme sans cesse et ses usages s'étendent de plus en
plus à de nouvelles classes d'appareils.
Ce phénomène semble s'accentuer avec le temps et risque de nous
obliger à 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 de
plonger au cœur de l’évolution de la programmation web. Pas si simple
…
Thibaud HAMET – Max BARON SAS 1 DIGITAL RACE– Août 2015

1
Histoire de la
programmation web
1
Histoire de la
programmation web

Pour commencer un petit peu d’histoire …
1995 - 2001
Vers plus d’interactivité
Les langages de scripting
Les plugins
1989 – 1994
Les débuts du web :
L’émergence du HTML
Les premiers navigateurs web
Première page WEB publiée
par le CERN
HTML Langage de balise
Permet de créer du contenu
hypertexte
HTTP permet d’échanger
des documents sur le web
Navigateur Netscape
Appariation du
Livescript
CSS
Mise en forme de contenu
HTML
JavaScript
Script interprété par le navigateur
Animation
Interactivité
Navigateur
IE
Shockwave
Flash
Animation
Contenu
interactif
C, C++, Shell Scripts … les exécutables
PHP
Script côté serveur
Production de code HTML
Interaction Base de donnée
Ruby
Navigateur
Mosaic
ClientSideServerSide
Python
Script
2002 - 2006
Des développements
simplifiés :
Les Frameworks
.NET
Framework développement
Microsoft
ASP
Sites Web
Dynamiques
Coldfusion
Simplification de la
programmation
Ruby on rail
Framework Ruby
Java
Architectures
distribuées
Modèle MVC
Symfony
Framework
PHP
Silverlight
Plugin
Contenu
multimédia
2006 – 2015
Interactivité décuplée
L’asynchrone client serveur
Multimédia
HTML 5
Géolocalisation
Sémantique
Audio / Vidéo
Drag and drop
Web Socket
CSS3
Animation
2D/3D transformation
Navigateur
Google
Chrome
Framework JavaScript
Google
Manipulation du DOM
Renforcer le lien HTML
CSS
Interfaces plus
réactives
WebServices
SOAP / WSDL
REST
Perl
AJAX
Asynchrone
XMLHTTPResquest
Notification Push
Navigateur
Firefox
WEB 1.0 – Web statique / read only WEB 2.0 – Social / interactif
Node JS :
Framework
Javasript pour les
serveurs

2
Une é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 du
contenu : 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 / Python
JSP
Client Side Serveur Side

Le Web 1.0
Le principe du Web : Un échange de documents basé sur un modèle
client / 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é
4
Interprétation par le
navigateur du document
reçu
1
Demande 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 navigateur
Le 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 en
HTML.
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ête
3. 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

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 Wium
lie 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 instructionsJavascript.
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 FTTH
Haut débit mobile : 3G puis 4G
Nouveaux usages :
Réseaux sociaux

Le Web 2.0 est le web social et interactif
L’utilisateur interagit et crée du contenu (read
write web)
Le Web 2.0 connecte des personnes
Les technologies
mises en œuvre
RIA : rich internet application :
AJAX Asynchrone java script et XML
Applet Java
Flash / 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.0
Agré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 de
services en ligne (météo, bourse, planification d'itinéraire, pages jaunes, etc.), mettant à
disposition
des développeurs des API (Application Programmable Interface) payantes ou non,
permettant d'intégrer leur service au
sein d'applications tierces.
Exemple l’API google map permet à tous les développeurs d’utiliser google map sur le site

3
Les 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équences
Les évolutions à venir devraient être
plus nombreuses et rapides. Une
augmentation du nombre d’API,
notamment pour l’accès au matériel
sur 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 Javascript
en 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 JavaScript
Les 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 nombreuses
anné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 nouvelles
bibliothè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 Web
Components semblent tomber dans les mêmes travers que les bibliothèques de widgets en leur temps.

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
Les technologies
mises en œuvre
Le WEB 3.0 est le regroupement de trois tendances majeures :
Le Web sémantique
L’internet des objets
L’internet mobile
Le web sémantique
Le RDF
Le SPARQLL’internet des objets Le web mobile
Le responsive web design
OWL
AllJoyn
Busit
If 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 webs
divers 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 permet
de 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 mobile
Gé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 terminal
2. 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

Contenu connexe

Tendances

En vedette

Similaire à Digital race evolution programmation web 1.0

Dernier

Digital race evolution programmation web 1.0