Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

© Faites ce que vous voulez ! Directeur JCertif Lab Consultant IT chez SQLI Rossi Oddet @rossioddet http://blog.roddet.com Qui suis-je ?

Slide 3

Slide 3 text

© Faites ce que vous voulez ! Qu’est-ce que le « web » ?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

© 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. Titre Hello

Hello JCertif

Slide 7

Slide 7 text

© Faites ce que vous voulez ! Qu’est-ce qu’une application web ?

Slide 8

Slide 8 text

© 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

© Faites ce que vous voulez ! Les principes de HTTP

Slide 12

Slide 12 text

© 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

Slide 13

Slide 13 text

© Faites ce que vous voulez ! Une communication HTTP Machine dite « cliente » Machine dite « serveur » Réponse Requête HTTP Traitement

Slide 14

Slide 14 text

© Faites ce que vous voulez ! Qu’est-ce que le « web moderne » ?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

© Faites ce que vous voulez ! Comment ?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

© Faites ce que vous voulez ! Commandement N°2 : Tu aimeras ton prochain comme toi même Adaptes-toi au matériel de l’internaute

Slide 21

Slide 21 text

© Faites ce que vous voulez ! S’adapter au matériel de l’internaute ?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

© Faites ce que vous voulez ! Aujourd’hui on veut un design responsive Desktop Tablette

Slide 25

Slide 25 text

© 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

Slide 26

Slide 26 text

© Faites ce que vous voulez ! Techniquement on fait quoi ?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

© Faites ce que vous voulez ! Exemple

Slide 29

Slide 29 text

© Faites ce que vous voulez ! Compatibilité navigateur

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

© 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 !

Slide 34

Slide 34 text

© Faites ce que vous voulez ! Commandement N°4 : tu seras déconnecté comme le web

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

© Faites ce que vous voulez ! Comment ?

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

© Faites ce que vous voulez ! Compatibilité navigateur

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

© 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

Slide 52

Slide 52 text

© Faites ce que vous voulez ! Que c’est beau le web moderne !

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

© Faites ce que vous voulez ! Tout va dépendre en fait de l’usage des navigateurs par les africains

Slide 57

Slide 57 text

© Faites ce que vous voulez ! Selon StatCounter

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

© Faites ce que vous voulez ! Merci !