Module n°10 du cours "Conception d'outils spécifiques", Semestre 2 DUT information-communication - IUT de Montreuil, Université Paris 8 - 2017-2018 (c) Adrien QUENETTE

1. Conception d’outils spécifiques
Module 10 : Site web, Native App,
Progressive Web App
Adrien QUENETTE

2. Du web 1.0 au web 3.0

3. WEB 1.0 WEB 2.0 WEB 3.0
1991-1999 2000-2009 2010-….

4. WEB 1.0
1991-1999

5. web 1.0 = web traditionnel
Pas d'interaction entre éditeur et lecteur
Distribution d’information dans un seul sens
Marketing de masse « one to many », sans
personnalisation des contenus

6. WEB 2.0
2000-2009

7. web 2.0 = web social
Forums puis réseaux sociaux > création de
contenu par l’internaute pour l’internaute
Emergence de communautés (Wikipedia), et
avis utilisateurs (TripAdvisor)
Marketing centré sur le client (usercentric) –
et non sur le produit

8. WEB 3.0
2009- ….

9. web 3.0 = web sémantique
web mobile
web qui place les données utilisateurs au cœur
de la navigation (filtres de recommandations et
préconisations sur les sites commerciaux)
Marketing ultra personnalisé : personnification
des contenus selon les besoins de chaque
utilisateur

10. Site web,
Application mobile,
Progressive web app…
Quel outils pour quel usage ?

11. Site web…
Qu’est ce que c’est ?

12. Un site web est un lieu virtuel composé d’un
ensemble de pages web et de contenus,
accessible par une adresse web.
Plus d’1 milliard de sites web sont en ligne
dans le monde.

13. Un site web est hébergé sur un serveur web,
lui-même accessible via un réseau : internet

14. 1. demande d'une adresse web
2. réception de la requête et exécution des scripts côté
serveur
3. envoi de la page html
4. interprétation du code par le navigateur et affichage
1. 2.
4. 3.

17. Un site web est accessible via une URL
(Uniform Resource Locator) : adresse web
utilisée pour accéder à une page internet ou
autres ressources du web.

18. Un site web est créé grâce à un outils appelé
CMS : « Content Management System »,
en français : « système de gestion de
contenu » : logiciel informatique permettant
de gérer le design et les contenus d’un site
web.

19. …Sony, eBay, Facebook, Disney…
…MTV, Harvard, Citibank, Linux…
… Ford, Fred Perry, The North Face …
… Twitter, La Maison Blanche, NASA, Intel …
Les 4 CMS les plus utilisés dans le monde…

20. Un site web dit « responsive » est un site web dont
la conception permet une consultation sur tous
types d’outils : ordinateurs, smartphones, tablettes,
TV, etc.

21. Native app…
Qu’est ce que c’est ?

22. Une application mobile (« App » ou « Native
app ») est un programme téléchargeable et
exécutable à partir du système d’exploitation
d’un smartphone ou d’une tablette.
Téléchargeable sur les stores (App Store,
Google Play, etc.)

23. 2 600 000 2 200 000
Source www,statista.com
Nombre d’appli sur le stores en 2018
Dont…

24. 80%
d’applications
« zombies » !
Dont…

25. Progressive web app…
Qu’est ce que c’est ?

26. Application web développée et architecturée
comme un site Internet : accessible à partir
d’un navigateur = site web développé pour
terminaux mobiles
Qui peut maintenant utiliser les fonctionnalités
du smartphone (appareil photo,
géolocalisation, etc.)
Permettant d’avoir une expérience proche
d’une application native

27. Qui peut maintenant utiliser les fonctionnalités
du smartphone (appareil photo,
géolocalisation, etc.)
Permettant d’avoir une expérience proche
d’une application native
=
Le meilleur des deux mondes Web et App

28. La progressive web app est vue comme le futur
des applications mobiles.
Elle pose cependant encore des problèmes de
compatibilité dans certains environnements.

29. Exemple : AliExpress

30. Exemple : Guitar Tuner

31. Exemple : Guitar Tuner

32. Progressive web app vs Native app

33. + meilleure expérience utilisateur
+ fonctionne sans connexion
+ fonctionnalité avancée (gesture,
géolocalisation...)
+ intégrée au device (icône d’accès)
+ interaction device (notifications,
push…)
+ référencement sur les stores
(AppStore, Google play…)
- développement nécessaire pour
chaque store
- développement lourd et cher
- téléchargement de mises à jour
+ développement léger et peu cher
+ référencement naturel sur Google
(SEO)
+ intégrée au device (icône d’accès) –
à la différence des web app 1ère
génération
+ maintenant interaction device
(notifications, push…)
+ maintenant plus besoin de
connexion internet à la différence des
web app 1ère génération
- moins bonne expérience utilisateur
Native app Progressive web app

34. Téléchargée puis installée sur le
device. Mise à jour à faire
manuellement.
Site Internet que l’on consulte depuis
son smartphone ou sa tablette, mises
à jour automatiques à chaque
consultation
Native app
Installation et mise à jour
Progressive web app

36. Développement à faire sur tous les
systèmes d’exploitation (Android,
iPhone, etc.)
Doit être validée par l’App Store ou le
Play Store avant d'être dispo sur le
stores
Moins contraignant car fonctionne
comme un site Internet
Native app
Coût de développement
Progressive web app

37. Design dédié au mobile, plus rapide
et plus fluide, s’exécute en plein écran
contrairement à la Web app.
Même design qu’une application
native mais avec les éléments de
votre navigateur mobile (barre
d’adresse, flèches de navigation…)
Native app
Expérience utilisateur
Progressive web app