13/09/2013 – JCertif 2013

WEB MODERNE POUR
L'AFRIQUE
Qui suis-je ?
Rossi Oddet
Directeur JCertif Lab
Consultant IT chez SQLI

@rossioddet
http://blog.roddet.com

© Faites ce q...
Qu’est-ce que le « web » ?

© Faites ce que vous voulez !
Qu’est-ce que le « web » ?
Le « World Wide Web » = ensemble page liée
Un site web =
Un ensemble de
page web

Pages liées p...
Qu’est-ce que HTML ?

© Faites ce que vous voulez !
Qu’est-ce que HTML ?
HTML = « HyperText Markup Language »
Langage de balisage qui permet de structurer et mettre en forme ...
Qu’est-ce qu’une application web ?

© Faites ce que vous voulez !
Qu’est-ce qu’une application web ?
Requête
Navigateur Web

HTTP

Réponse

Application Web
Serveur Web

Autres Systèmes

Ma...
Qu’est-ce que HTTP ?

© Faites ce que vous voulez !
Qu’est-ce que HTTP ?
HTTP = « HyperText Transfer Protocol »
Protocole de communication basé sur TCP/IP utilisé pour le « W...
Les principes de HTTP

© Faites ce que vous voulez !
Les principes de HTTP
HTTP ne maintient pas de connexion entre un client et un serveur
HTTP est « stateless » (sans état)
...
Une communication HTTP
Requête

HTTP

Traitement

Réponse

Machine dite « cliente »
© Faites ce que vous voulez !

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

© Faites ce que vous voulez !
Un web qui offre une « bonne » expérience
utilisateur à l’internaute africain

© Faites ce que vous voulez !
Comment ?

© Faites ce que vous voulez !
En suivant les 5 commandements du web
moderne

© Faites ce que vous voulez !
Commandement N°1 : tu n’utiliseras pas de
plugins navigateurs

© Faites ce que vous voulez !
Plus jamais ça !
© Faites ce que vous voulez !
Commandement N°2 : Tu aimeras ton
prochain comme toi même
Adaptes-toi au matériel de l’internaute
© Faites ce que vous vou...
S’adapter au matériel de l’internaute ?

© Faites ce que vous voulez !
Oui, ça s’appelle le « Responsive Web
Design »

© Faites ce que vous voulez !
Hier = une mise en page fixe

Desktop
© Faites ce que vous voulez !

Tablette
Aujourd’hui on veut un design responsive

Desktop
© Faites ce que vous voulez !

Tablette
Comment être « responsive » ?
Tous les internautes accèdent à la même URL quelque soit le matériel
Le contenu prend la for...
Techniquement on fait quoi ?

© Faites ce que vous voulez !
On utilise les Média Queries

© Faites ce que vous voulez !
Exemple

© Faites ce que vous voulez !
Compatibilité navigateur

© Faites ce que vous voulez !
Commandement N°3 : tu arrêteras de
générer tes pages côté serveur

© Faites ce que vous voulez !
Ton serveur a autre chose à faire !

© Faites ce que vous voulez !
Le navigateur comprend parfaitement le
HTML, JS et CSS

© Faites ce que vous voulez !
Front End séparé du Back End
HTML
JavaScript
CSS
Front End
© Faites ce que vous voulez !

PHP
Requête

Web Service REST

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

© Faites ce que vous voulez !
Arrêtez de recharger la page entière si
rien n’a changé !

© Faites ce que vous voulez !
Exemple avec
http://html5demos.com/offlineapp

© Faites ce que vous voulez !
Comment ?

© Faites ce que vous voulez !
HTML 5 – App Cache pour stocker les
ressources statiques

© Faites ce que vous voulez !
Compatibilité navigateur

© Faites ce que vous voulez !
HTML 5 (LocalStorage) pour stocker les
données métiers

© Faites ce que vous voulez !
LocalStorage – Compatibilité navigateur

© Faites ce que vous voulez !
HTML 5 (IndexedDB) pour stocker les
données métiers

© Faites ce que vous voulez !
IndexedDB – Compatibilité navigateur

© Faites ce que vous voulez !
HTML 5 (File API) pour stocker les données
métiers

© Faites ce que vous voulez !
File API – Compatibilité navigateur

© Faites ce que vous voulez !
Commandement N°5 : tu donneras la parole
à ton serveur

© Faites ce que vous voulez !
Arrêtes d’harceler ton serveur et Attend
sagement une notification grâce à HTML5

© Faites ce que vous voulez !
Le serveur sait maintenant parler
Server Sent Events (SSE) : push uniquement

Websockets : communication bidirectionnelle
...
SSE – Compatibilité navigateur

© Faites ce que vous voulez !
WebSockets – Compatibilité navigateur

© Faites ce que vous voulez !
Récapitulatif des commandements
1 - Tu n’utiliseras pas de plugins navigateurs
2 - Tu aimeras ton prochain comme toi-même
...
Que c’est beau le web moderne !

© Faites ce que vous voulez !
Est-ce que ça marche pour l’Afrique ?

© Faites ce que vous voulez !
Qu’a-t-on de particulier en Afrique
concernant le web ?

© Faites ce que vous voulez !
Particularités du web africain
Un débit internet souvent faible
Un parc informatique encore en cours de déploiement qui pe...
Tout va dépendre en fait de l’usage des
navigateurs par les africains

© Faites ce que vous voulez !
Selon StatCounter

© Faites ce que vous voulez !
Une majorité de navigateurs modernes
attention à IE…

© Faites ce que vous voulez !
Que pensez-vous de tout cela ?

© Faites ce que vous voulez !
Merci !

© Faites ce que vous voulez !
Prochain SlideShare
Chargement dans…5
×

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

697 vues

Publié le

Slides d'animation d'un débat autour du web moderne pour l'Afrique lors de l'événement JCertif 2013.

Blog : http://blog.roddet.com/2013/10/jcertif-2013-retour/

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
697
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 13/09/2013 – JCertif 2013 WEB MODERNE POUR L'AFRIQUE
  2. 2. Qui suis-je ? Rossi Oddet Directeur JCertif Lab Consultant IT chez SQLI @rossioddet http://blog.roddet.com © Faites ce que vous voulez !
  3. 3. Qu’est-ce que le « web » ? © Faites ce que vous voulez !
  4. 4. Qu’est-ce que le « web » ? Le « World Wide Web » = ensemble page liée Un site web = Un ensemble de page web Pages liées par un lien dit « hypertexte » © Faites ce que vous voulez ! Page écrite avec le langage HTML Affichée dans un navigateur web
  5. 5. Qu’est-ce que HTML ? © Faites ce que vous voulez !
  6. 6. 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> © Faites ce que vous voulez !
  7. 7. Qu’est-ce qu’une application web ? © Faites ce que vous voulez !
  8. 8. Qu’est-ce qu’une application web ? Requête Navigateur Web HTTP Réponse Application Web Serveur Web Autres Systèmes Machine dite « cliente » © Faites ce que vous voulez ! Machine dite « serveur » Autres Systèmes (BDD, Web, …) Réseau
  9. 9. Qu’est-ce que HTTP ? © Faites ce que vous voulez !
  10. 10. Qu’est-ce que HTTP ? HTTP = « HyperText Transfer Protocol » Protocole de communication basé sur TCP/IP utilisé pour le « Web » © Faites ce que vous voulez !
  11. 11. Les principes de HTTP © Faites ce que vous voulez !
  12. 12. Les principes de HTTP HTTP 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 © Faites ce que vous voulez !
  13. 13. Une communication HTTP Requête HTTP Traitement Réponse Machine dite « cliente » © Faites ce que vous voulez ! Machine dite « serveur »
  14. 14. Qu’est-ce que le « web moderne » ? © Faites ce que vous voulez !
  15. 15. Un web qui offre une « bonne » expérience utilisateur à l’internaute africain © Faites ce que vous voulez !
  16. 16. Comment ? © Faites ce que vous voulez !
  17. 17. En suivant les 5 commandements du web moderne © Faites ce que vous voulez !
  18. 18. Commandement N°1 : tu n’utiliseras pas de plugins navigateurs © Faites ce que vous voulez !
  19. 19. Plus jamais ça ! © Faites ce que vous voulez !
  20. 20. Commandement N°2 : Tu aimeras ton prochain comme toi même Adaptes-toi au matériel de l’internaute © Faites ce que vous voulez !
  21. 21. S’adapter au matériel de l’internaute ? © Faites ce que vous voulez !
  22. 22. Oui, ça s’appelle le « Responsive Web Design » © Faites ce que vous voulez !
  23. 23. Hier = une mise en page fixe Desktop © Faites ce que vous voulez ! Tablette
  24. 24. Aujourd’hui on veut un design responsive Desktop © Faites ce que vous voulez ! Tablette
  25. 25. 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 © Faites ce que vous voulez !
  26. 26. Techniquement on fait quoi ? © Faites ce que vous voulez !
  27. 27. On utilise les Média Queries © Faites ce que vous voulez !
  28. 28. Exemple © Faites ce que vous voulez !
  29. 29. Compatibilité navigateur © Faites ce que vous voulez !
  30. 30. Commandement N°3 : tu arrêteras de générer tes pages côté serveur © Faites ce que vous voulez !
  31. 31. Ton serveur a autre chose à faire ! © Faites ce que vous voulez !
  32. 32. Le navigateur comprend parfaitement le HTML, JS et CSS © Faites ce que vous voulez !
  33. 33. Front End séparé du Back End HTML JavaScript CSS Front End © Faites ce que vous voulez ! PHP Requête Web Service REST Traitement Play ! Réponse Java EE Back End
  34. 34. Commandement N°4 : tu seras déconnecté comme le web © Faites ce que vous voulez !
  35. 35. Arrêtez de recharger la page entière si rien n’a changé ! © Faites ce que vous voulez !
  36. 36. Exemple avec http://html5demos.com/offlineapp © Faites ce que vous voulez !
  37. 37. Comment ? © Faites ce que vous voulez !
  38. 38. HTML 5 – App Cache pour stocker les ressources statiques © Faites ce que vous voulez !
  39. 39. Compatibilité navigateur © Faites ce que vous voulez !
  40. 40. HTML 5 (LocalStorage) pour stocker les données métiers © Faites ce que vous voulez !
  41. 41. LocalStorage – Compatibilité navigateur © Faites ce que vous voulez !
  42. 42. HTML 5 (IndexedDB) pour stocker les données métiers © Faites ce que vous voulez !
  43. 43. IndexedDB – Compatibilité navigateur © Faites ce que vous voulez !
  44. 44. HTML 5 (File API) pour stocker les données métiers © Faites ce que vous voulez !
  45. 45. File API – Compatibilité navigateur © Faites ce que vous voulez !
  46. 46. Commandement N°5 : tu donneras la parole à ton serveur © Faites ce que vous voulez !
  47. 47. Arrêtes d’harceler ton serveur et Attend sagement une notification grâce à HTML5 © Faites ce que vous voulez !
  48. 48. Le serveur sait maintenant parler Server Sent Events (SSE) : push uniquement Websockets : communication bidirectionnelle © Faites ce que vous voulez !
  49. 49. SSE – Compatibilité navigateur © Faites ce que vous voulez !
  50. 50. WebSockets – Compatibilité navigateur © Faites ce que vous voulez !
  51. 51. 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 © Faites ce que vous voulez !
  52. 52. Que c’est beau le web moderne ! © Faites ce que vous voulez !
  53. 53. Est-ce que ça marche pour l’Afrique ? © Faites ce que vous voulez !
  54. 54. Qu’a-t-on de particulier en Afrique concernant le web ? © Faites ce que vous voulez !
  55. 55. Particularités du web africain Un 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 » © Faites ce que vous voulez !
  56. 56. Tout va dépendre en fait de l’usage des navigateurs par les africains © Faites ce que vous voulez !
  57. 57. Selon StatCounter © Faites ce que vous voulez !
  58. 58. Une majorité de navigateurs modernes attention à IE… © Faites ce que vous voulez !
  59. 59. Que pensez-vous de tout cela ? © Faites ce que vous voulez !
  60. 60. Merci ! © Faites ce que vous voulez !

×