JCertif 2013 - Vers un web moderne pour l'Afrique ?

WEB MODERNE POUR L'AFRIQUE

13/09/2013 – JCertif 2013

© Faites ce que vous voulez !

Directeur JCertif Lab

Consultant IT chez SQLI

Rossi Oddet

@rossioddet

http://blog.roddet.com

Qui suis-je ?


Qu’est-ce que le « web » ?


Qu’est-ce que le « web » ?Le « World Wide Web » = ensemble page liée

Page écrite avec le

langage HTML

Affichée dans un navigateur

web

Un site web =

Un ensemble de

page web

Pages liées par un lien

dit « hypertexte »


Qu’est-ce que HTML ?


Qu’est-ce que HTML ?HTML = « HyperText Markup Language »

Langage de balisage qui permet de structurer et mettre en forme une page Web.

<html>

<head>

<title>Titre Hello</title>

</head>

<body>

<p>Hello JCertif</p>

<body>

</html>


Qu’est-ce qu’une application web ?


Qu’est-ce qu’une application web ?

Navigateur Web

Machine dite « cliente » Machine dite « serveur »

Serveur Web

Application WebHTTP

Réseau

Autres Systèmes

Autres Systèmes (BDD, W

eb, …)

Réponse

Requête


Qu’est-ce que HTTP ?


Qu’est-ce que HTTP ?HTTP = « HyperText Transfer Protocol »

Protocole de communication basé sur TCP/IP utilisé pour le « Web »


Les principes de HTTP


Les principes de HTTPHTTP ne maintient pas de connexion entre un client et un serveur

HTTP est « stateless » (sans état)

HTTP est indépendant du type de données transportées

HTTP est synchrone => 1 requête attend 1 réponse


Une communication HTTP

Machine dite « cliente » Machine dite « serveur »

Réponse

Requête

HTTP Traitement


Qu’est-ce que le « web moderne » ?


Un web qui offre une « bonne » expérience utilisateur à l’internaute africain


Comment ?


En suivant les 5 commandements du web moderne


Commandement N°1 : tu n’utiliseras pas de plugins navigateurs


Plus jamais ça !


Commandement N°2 : Tu aimeras ton prochain comme toi même

Adaptes-toi au matériel de l’internaute


S’adapter au matériel de l’internaute ?


Oui, ça s’appelle le « Responsive Web Design »


Hier = une mise en page fixe

Desktop Tablette


Aujourd’hui on veut un design responsive

Desktop Tablette


Comment être « responsive » ?Tous les internautes accèdent à la même URL quelque soit le matériel

Le contenu prend la forme la plus adapté au matériel de l’internaute

L’affichage de certains éléments du contenu est conditionnée par le matériel de l’internaute


Techniquement on fait quoi ?


On utilise les Média Queries


Exemple


Compatibilité navigateur


Commandement N°3 : tu arrêteras de générer tes pages côté serveur


Ton serveur a autre chose à faire !


Le navigateur comprend parfaitement le HTML, JS et CSS


Front End séparé du Back End

Front End Back End

Réponse

Requête

Web Service REST Traitement

HTML

JavaScript

CSS

PHP

Java EE

Play !


Commandement N°4 : tu seras déconnecté comme le web


Arrêtez de recharger la page entière si rien n’a changé !


Exemple avec http://html5demos.com/offlineapp


Comment ?


HTML 5 – App Cache pour stocker les ressources statiques


Compatibilité navigateur


HTML 5 (LocalStorage) pour stocker les données métiers


LocalStorage – Compatibilité navigateur


HTML 5 (IndexedDB) pour stocker les données métiers


IndexedDB – Compatibilité navigateur


HTML 5 (File API) pour stocker les données métiers


File API – Compatibilité navigateur


Commandement N°5 : tu donneras la parole à ton serveur


Arrêtes d’harceler ton serveur et Attend sagement une notification grâce à HTML5


Le serveur sait maintenant parlerServer Sent Events (SSE) : push uniquement

Websockets : communication bidirectionnelle


SSE – Compatibilité navigateur


WebSockets – Compatibilité navigateur


Récapitulatif des commandements

1 - Tu n’utiliseras pas de plugins navigateurs

2 - Tu aimeras ton prochain comme toi-même

3 - Tu arrêteras de générer tes pages côté serveur

4 - Tu seras déconnecté comme le web

5 - Tu donneras la parole à ton serveur


Que c’est beau le web moderne !


Est-ce que ça marche pour l’Afrique ?


Qu’a-t-on de particulier en Afrique concernant le web ?


Particularités du web africainUn débit internet souvent faible

Un parc informatique encore en cours de déploiement qui permet l’utilisation des navigateurs modernes

Une utilisation d’internet très portée sur les réseaux sociaux

Un accès à internet principalement via le « mobile »


Tout va dépendre en fait de l’usage des navigateurs par les africains


Selon StatCounter


Une majorité de navigateurs modernes attention à IE…


Que pensez-vous de tout cela ?


Merci !

Documents

JCertif 2013 - Vers un web moderne pour l'Afrique ?