Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JCertif 2013 - Web Moderne pour l'Afrique

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Rossi Oddet Rossi Oddet
September 13, 2013
Technology
1
940

JCertif 2013 - Web Moderne pour l'Afrique

Slides volontairement engagés pour lancer le débat sur la définition du web moderne pour l'Afrique.

Avatar for Rossi Oddet

Rossi Oddet

September 13, 2013
Tweet

More Decks by Rossi Oddet

See All by Rossi Oddet
BreizhCamp 2014 - Ionic In Action (Tools In Action)
Avatar for Rossi Oddet rossioddet
1
160
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
Avatar for Rossi Oddet rossioddet
0
45
JCertif 2012 - Scrum avec IceScrum
Avatar for Rossi Oddet rossioddet
1
68
JCertif 2012 - Git par la pratique
Avatar for Rossi Oddet rossioddet
2
120
JCertif 2012 - Maven par la pratique
Avatar for Rossi Oddet rossioddet
1
160

Other Decks in Technology

See All in Technology
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
610
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
270
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
190
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
130
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
150
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
360
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
150
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
Avatar for ktykogm 0gm
2
3.1k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
210
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
200
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
Avatar for Yudai Jinno yuu551
0
260
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
100

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
350
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
440
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
110
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650

Transcript

  1. WEB MODERNE POUR L'AFRIQUE 13/09/2013 – JCertif 2013

  2. © Faites ce que vous voulez ! Directeur JCertif Lab

    Consultant IT chez SQLI Rossi Oddet @rossioddet http://blog.roddet.com Qui suis-je ?

  3. © Faites ce que vous voulez ! Qu’est-ce que le

    « web » ?

  4. © Faites ce que vous voulez ! 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 »

  5. © Faites ce que vous voulez ! Qu’est-ce que HTML

    ?

  6. © 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 une page Web. <html> <head> <title>Titre Hello</title> </head> <body> <p>Hello JCertif</p> <body> </html>

  7. © Faites ce que vous voulez ! Qu’est-ce qu’une application

    web ?

  8. © Faites ce que vous voulez ! Qu’est-ce qu’une application

    web ? Navigateur Web Machine dite « cliente » Machine dite « serveur » Serveur Web Application Web HTTP Réseau Autres Systèmes Autres Systèmes (BDD, Web, …) Réponse Requête

  9. © Faites ce que vous voulez ! Qu’est-ce que HTTP

    ?

  10. © Faites ce que vous voulez ! Qu’est-ce que HTTP

    ? HTTP = « HyperText Transfer Protocol » Protocole de communication basé sur TCP/IP utilisé pour le « Web »

  11. © Faites ce que vous voulez ! Les principes de

    HTTP

  12. © 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) HTTP est indépendant du type de données transportées HTTP est synchrone => 1 requête attend 1 réponse

  13. © Faites ce que vous voulez ! Une communication HTTP

    Machine dite « cliente » Machine dite « serveur » Réponse Requête HTTP Traitement

  14. © Faites ce que vous voulez ! Qu’est-ce que le

    « web moderne » ?

  15. © Faites ce que vous voulez ! Un web qui

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

  16. © Faites ce que vous voulez ! Comment ?

  17. © Faites ce que vous voulez ! En suivant les

    5 commandements du web moderne

  18. © Faites ce que vous voulez ! Commandement N°1 :

    tu n’utiliseras pas de plugins navigateurs

  19. © Faites ce que vous voulez ! Plus jamais ça

    !

  20. © Faites ce que vous voulez ! Commandement N°2 :

    Tu aimeras ton prochain comme toi même Adaptes-toi au matériel de l’internaute

  21. © Faites ce que vous voulez ! S’adapter au matériel

    de l’internaute ?

  22. © Faites ce que vous voulez ! Oui, ça s’appelle

    le « Responsive Web Design »

  23. © Faites ce que vous voulez ! Hier = une

    mise en page fixe Desktop Tablette

  24. © Faites ce que vous voulez ! Aujourd’hui on veut

    un design responsive Desktop Tablette

  25. © Faites ce que vous voulez ! 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

  26. © Faites ce que vous voulez ! Techniquement on fait

    quoi ?

  27. © Faites ce que vous voulez ! On utilise les

    Média Queries

  28. © Faites ce que vous voulez ! Exemple

  29. © Faites ce que vous voulez ! Compatibilité navigateur

  30. © Faites ce que vous voulez ! Commandement N°3 :

    tu arrêteras de générer tes pages côté serveur

  31. © Faites ce que vous voulez ! Ton serveur a

    autre chose à faire !

  32. © Faites ce que vous voulez ! Le navigateur comprend

    parfaitement le HTML, JS et CSS

  33. © Faites ce que vous voulez ! 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 !

  34. © Faites ce que vous voulez ! Commandement N°4 :

    tu seras déconnecté comme le web

  35. © Faites ce que vous voulez ! Arrêtez de recharger

    la page entière si rien n’a changé !

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

  37. © Faites ce que vous voulez ! Comment ?

  38. © Faites ce que vous voulez ! HTML 5 –

    App Cache pour stocker les ressources statiques

  39. © Faites ce que vous voulez ! Compatibilité navigateur

  40. © Faites ce que vous voulez ! HTML 5 (LocalStorage)

    pour stocker les données métiers

  41. © Faites ce que vous voulez ! LocalStorage – Compatibilité

    navigateur

  42. © Faites ce que vous voulez ! HTML 5 (IndexedDB)

    pour stocker les données métiers

  43. © Faites ce que vous voulez ! IndexedDB – Compatibilité

    navigateur

  44. © Faites ce que vous voulez ! HTML 5 (File

    API) pour stocker les données métiers

  45. © Faites ce que vous voulez ! File API –

    Compatibilité navigateur

  46. © Faites ce que vous voulez ! Commandement N°5 :

    tu donneras la parole à ton serveur

  47. © Faites ce que vous voulez ! Arrêtes d’harceler ton

    serveur et Attend sagement une notification grâce à HTML5

  48. © Faites ce que vous voulez ! Le serveur sait

    maintenant parler Server Sent Events (SSE) : push uniquement Websockets : communication bidirectionnelle

  49. © Faites ce que vous voulez ! SSE – Compatibilité

    navigateur

  50. © Faites ce que vous voulez ! WebSockets – Compatibilité

    navigateur

  51. © 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 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

  52. © Faites ce que vous voulez ! Que c’est beau

    le web moderne !

  53. © Faites ce que vous voulez ! Est-ce que ça

    marche pour l’Afrique ?

  54. © Faites ce que vous voulez ! Qu’a-t-on de particulier

    en Afrique concernant le web ?

  55. © 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 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 »

  56. © Faites ce que vous voulez ! Tout va dépendre

    en fait de l’usage des navigateurs par les africains

  57. © Faites ce que vous voulez ! Selon StatCounter

  58. © Faites ce que vous voulez ! Une majorité de

    navigateurs modernes attention à IE…

  59. © Faites ce que vous voulez ! Que pensez-vous de

    tout cela ?

  60. © Faites ce que vous voulez ! Merci !