An introduction to www.youbeq.com , www.smarturbia.com , Web Frameworks and Django Web Framework

1. A Socially Geo-localized Web
Nuno Khan

2. Summary
● Inovmapping
– YoubeQ
– Smarturbia
– Architecture/Distribution/Integration
● Google Maps API V3
● Web Frameworks
● Django Web Framework

3. Inovmapping (3D Modeling for Google
Earth and Maps)

4. youbeQ

5. youbeQ

6. youbeQ
● Node.js
● JavaScript (Jquery)
● CouchDB
● MySQL
● Twitter Bootstrap
● Google Earth/Maps API V3

7. smarturbia

8. smarturbia

9. smarturbia
● Php
● Apache Web Server
● JavaScript (Jquery)
● MySQL
● Twitter Bootstrap
● Google Earth/Maps API V3

10. youbeQ

11. youbeQ & smarturbia

12. youbeQ ? smarturbia

13. youbeQ + smarturbia

14. youbeQadmin

15. youbeQadmin

16. youbeQadmin

17. youbeQadmin

18. youbeQadmin

19. youbeQadmin

20. youbeQadmin

21. YoubeQadmin + smarturbia

22. youbeQadmin
● Django Web Framework
● JavaScript (Jquery)
● Twitter Bootstrap
● MySQL
● Celery (Distributed Task Queue)
● Redis (NoSQL)
● Nginx Web Server

23. Google Maps API V3
● “The Google Maps Javascript API lets you embed
Google Maps in your own web pages.”
● “The API provides a number of utilities for
manipulating maps and adding content to the map
through a variety of services, allowing you to create
robust maps applications on your website.”

24. Google Maps API V3

25. Google Maps API V3

26. Google Maps API V3 (Libraries)
● Drawing
● Adsense
● Geometry
● Panoramio
● Places
● Visualization
● Weather

27. Google Maps API V3 (Drawing)

28. Google Maps API V3 (Drawing)

29. Web Frameworks
● Designed to support the development of:
– Dynamic Websites
– Web Applications
– Web Services
– Web Resources
● “The framework aims to alleviate the overhead
associated with common activities performed in web
development”

30. Types Of Framework Architectures
● Model–view–controller (MVC)
● Push-based vs. pull-based
– Most MVC frameworks follow a push-based
architecture. These frameworks use actions that do
the required processing, and then "push" the data to
the view layer to render the results.
● Three-tier organization (Web Applications)
– Applications are structured around three physical
tiers: client, application, and database

31. Features
● Web Template System
● Caching
● Security
● Database access, mapping and configuration
● URL Mapping
● Ajax (Asynchronous JavaScript and XML)
● Web Services

32. Efficiency
● “Tasks that usually would take you hours and
hundreds of lines of code to write, can now be done
in minutes with pre-built functions. Development
becomes a lot easier, so if it’s easier it’s faster, and
consequently efficient.”

33. Advantages
● Develop web applications with :
– Reusable Code
– Rapid Development and with less code
– Security (big security implementations)
– Organized application structure (MVC/MVT)
– Scalable Applications, if properly coded
– Easy database interaction (flexibility)
– Lower development costs

34. Disadvantages
● Additional Overhead
● Lost understanding on third party source code
● Very steep learning curve
● Inflexible when we want to change core
functionalities
● Configuration Cliff
● Framework Errors

35. Examples
● Django (Python)
– Instagram.com
– Bitbucket.org
– Mozilla.org
● Ruby on rails (Ruby)
– Github.com
– Twitter.com (inicialmente)
● CodeIgniter (Php)

36. Django Web Framework
● “Django is a high-level Python Web framework that
encourages rapid development and clean, pragmatic
design”
● Follows the DRY (Don't Repeat Yourself) Principle

37. Main Features
● MVT (Similar to MVC)
● Object-relational mapper (ORM)
● Automatic administration interface
● Elegant URL design (Regex)
● Template system
● Cache system
● Internationalization

38. Django Requirements
● Python (2.3+)
● PostgreSQL / MySQL / SQLite / ...
● Apache + mod_python /mod_wsgi / FastCGI / ...

39. Components

40. models.py

41. Model API

42. views.py

43. sometemplate.html

44. Template Inheritance

45. urls.py

46. WebApp

47. Tables

48. Test

49. Admin Panel

50. References
● https://www.djangoproject.com/
● http://en.wikipedia.org/wiki/Web_application_framework
● http://www.1stwebdesigner.com/design/pros-cons-frameworks/
● http://programmers.stackexchange.com/questions/35276/the-adv
● http://youbeq.com/
● http://www.smarturbia.com/
● https://bitbucket.org/psychok7/meet_me_at_the_corner
● pyconpl2008djangoen-1224531137573763-9.pdf

51. nunok7@gmail.com