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

WEB MODERNE POUR L'AFRIQUE

13/09/2013 – JCertif 2013

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

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 ?

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

JavaScript

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 !

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

Documents

L'Afrique du Nord illustrée. 13041929

Rongeurs de l'Afrique(Livre)

Stratégie territoriale pour l'Afrique

Urgence Corne de l'Afrique

Le mois de l'Afrique

Les noirs de l'Afrique

Histoire Générale de l'Afrique, T3 : L'Afrique du VIIe au XIe siècle

La Defragmentation de l'Afrique

Le Journal de l'Afrique 12

L'Afrique de Zigomar

Atlas de l'Afrique

Le Journal de l'Afrique

L'Afrique équatoriale atlantiquehorizon.documentation.ird.fr/exl-doc/pleins_textes/... · L'Afrique équat o riale atlantique .. Paysages et milieux L'Afrique équatoriale, sur sa

JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !

L'afrique en musiques

Economie de l'Afrique

Journal de l'Afrique n°3

Voyage Dans l'Afrique

Histoire Générale de l'Afrique v - L'Afrique Du XVIe Au XVIIIe Siècle

Diehl, L'Afrique byzantine.pdf