City council's first progressive web app

1. Points of Interest of Barcelona
Barcelona City Council First Web App

2. Web Apps

3. progressive web apps

4. progressive web appsoffline first

6. Responsive!
Safe"
Discoverable☼

7. All Platforms$
Respectful+
Open & Linkable&

8. PWA First Experience

9. Proof of
Concept
Product

10. 'Browser &
Standalone

11. (
Geolocation

12. )
Offline

13. Technology Stack

14. MySQL Database
Server
(HTTPS)
JSON (HTTPS)
SQL
Client (web browser)
Frontend / Ionic
WebServer
City Council’s Central Database
API / Lumen

15. MySQL Database
Server
(HTTPS)
JSON (HTTPS)
SQL
Client (web browser)
Frontend / Ionic
WebServer
City Council’s Central Database
API / Lumen

16. MySQL Database
Server
(HTTPS)
JSON (HTTPS)
SQL
Client (web browser)
Frontend / Ionic
WebServer
City Council’s Central Database
API / Lumen

17. 17
Interface Principles

18. 18
App Native-like UX
1

19. 19
iPhone & iPad Android & other devices
iOS Human
Interface
Guideline
Google's
Material
Design

20. 20
iOS Material
Typo & Icons
Full width
vs. Cards

21. 21
iOS
Navigation
Drawer:
overlay vs.
push
Material

22. 22
Different UI
native
components
iOS Material

23. 23
Mobile First
Responsive Web Design
2

24. 24
Mobile
< 768 px
Tablet
>= 768 px & < 1.024 px
Desktop
>= 1.024 px
Material

25. 25
iPhone
< 768 px
iPad
>= 768 px
iOS

26. 26
Design & Development
Process

27. 27
2 3 4 5 6
Benchmark & Research
1

28. 28
2 3 4 5 6
IA & Wireframing
21

29. 29
2 3 4 5 6
Functional Definition
31

30. 30
2 3 4 5 6
Visual Design
41

31. 31
2 3 4 5 6
Frontend & Backend Development
51

32. 32
2 3 4 5 6
Testing & Bug Fixing
61

33. 33
A Walk Around
the Web App

34. 34
First Access

35. 35
Cookies
& DNT

36. 36
List View

37. 37
Map View

38. 38
Suggestive
Search

39. 39
Detail

40. 40
Share

41. 41
Filters by
District &
Favorites

42. 42
Favorites

43. 43
Favorites

44. 44
Language
Config

45. Thank You
robotinnocent.com
* @robotinnocent