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

  • 159 views
Uploaded on

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

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/

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
159
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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