Intro to Web- and Mobile-Developement

for data scientists at NYU

Transcript

1. MultiMediaTechnology
   Masterstudium
   informal tutorial at
   MultiMediaTechnology
   Masterstudium
   Web- and Mobile-Development
   Brigitte Jellinek
   

   View Slide

2. MultiMediaTechnology
   Masterstudium
   informal tutorial at
   

   View Slide

3. MultiMediaTechnology
   Masterstudium
     Web Dev since 1993
     Lecturer/Dep Head
     BSc + MSc Program
     https://web-
   development.at
     Sabbatical 2014/15
   Brigitte Jellinek
   

   View Slide

4. MultiMediaTechnology
   Masterstudium
   Scenarios
     GRA
     Project
     StartUp
     Survey, Data Collection
     Configuration*
     Report Generation*
     Information Visualisation
     Graphs, Dashboards, Maps
   on Computers or Mobile Devices
   

   View Slide

5. MultiMediaTechnology
   Masterstudium
   Do you know
   how the Web works?
   Do you know
   how the Internet works?
   

   View Slide

6. MultiMediaTechnology
   Masterstudium
   Kenn ich eh'
   

   View Slide

7. MultiMediaTechnology
   Masterstudium
   Who invented it?
   

   View Slide

8. MultiMediaTechnology
   Masterstudium
     Vint Cerf
     one of the inventors of
   the Internet
     1970ies
     1980ies
     Tim Berner-Lee
     lone inventor of the
   Web
     ~1990
   Who invented it?
   

   View Slide

9. MultiMediaTechnology
   Masterstudium
   What's the difference
   INTERNET WORLD WIDE WEB
     Computer Network
     across many different
   network technologies
     IP-Address for every
   connected device
     protocols TCP/IP
     Domain Names.
     One of the applications
   that use the Internet
     other applications: mail,
   ssh, FTP, whatsapp,
   WOW.
   

   View Slide

10. MultiMediaTechnology
    Masterstudium
    Basic Concepts
      Client, Server, HTTP
      HTTPs
      HTML, Javascript, CSS
      Form, Frontend,
    Backend, Database
      API
      JSON
      Mobile: Responsive
    Design
    

    View Slide

11. MultiMediaTechnology
    Masterstudium
    

    View Slide

12. MultiMediaTechnology
    Masterstudium
    Web Browser
      multitude of devices
      multitude of web browsers
      knows how to load and display a web page
    

    View Slide

13. MultiMediaTechnology
    Masterstudium
    Web Server
      software running on a computer
      permanently running
      permanently connected to the internet
      knows how to send web pages
      knows how to generate web pages
      open source: apache, nginx
    

    View Slide

14. MultiMediaTechnology
    Masterstudium
    Web Server
    

    View Slide

15. MultiMediaTechnology
    Masterstudium
    HTTP
    hypertext transfer protocol
    

    View Slide

16. MultiMediaTechnology
    Masterstudium
    URL
    Uniform Resource Locator
    https://serv.cusp.nyu.edu/wiki/index.php?title=Main_Page#t-whatlinkshere
    https secure or not secure? https or http
    serv.cusp.nyu.edu domain name of computer
    /wiki/index.php
    interpreted by web server. could be a
    path. or not.
    title=Main_Page
    parameters.
    key=value&key=value&key=value
    t-whatlinkshere
    interpreted by web browser, will scroll to
    this anchor
    

    View Slide

17. MultiMediaTechnology
    Masterstudium
    HTML
    Hypertext Markup Language
    

    View Slide

18. MultiMediaTechnology
    Masterstudium
    HTML
    

    View Slide

19. MultiMediaTechnology
    Masterstudium
    Web App: the Backend
    

    View Slide

20. MultiMediaTechnology
    Masterstudium
    Web App: the Backend
    

    View Slide

21. MultiMediaTechnology
    Masterstudium
    Web App: the frontend
    

    View Slide

22. MultiMediaTechnology
    Masterstudium
    Web App: the frontend
    

    View Slide

23. MultiMediaTechnology
    Masterstudium
    Web App: Frontend + Backend
    

    View Slide

24. MultiMediaTechnology
    Masterstudium
    Web App: Frontend + Backend
    Javascript-Program
    inside the Browser
    

    View Slide

25. MultiMediaTechnology
    Masterstudium
    API
      Application Programmers Interface
      Somebody offers information
      in a machine-readable form
      JSON
      XML
      API Key
      Rate Limit, License, Money
    

    View Slide

26. MultiMediaTechnology
    Masterstudium
    Authentication
    Login with...
      Facebook
      Google
      Twitter
      Github
      Mozilla Persona (E-Mail Address)
    

    View Slide

27. MultiMediaTechnology
    Masterstudium
    Web Scraping
      When there is no API
    

    View Slide

28. MultiMediaTechnology
    Masterstudium
    

    View Slide

29. MultiMediaTechnology
    Masterstudium
    Mobile Apps?
    Native
      Objective C for iOS
      Java for Android
      C# for Windows
    Mobile
    Web
      web browser in the
    smartphone
      responsive design
      one codebase for
    desktop and mobile
    

    View Slide

30. MultiMediaTechnology
    Masterstudium
    Mobile Apps?
    Native
      accelerometer
      address book
    Web
      one codebase, many
    devices
      deploy any time you
    want (no approval)
    

    View Slide

31. MultiMediaTechnology
    Masterstudium
    To Do
      Concept
      Interaction Design, Visual Design
      Frontend
      Backend
      Testing
      Deploying
      Operations (keep it running. every day)
    iterate!
    

    View Slide

32. MultiMediaTechnology
    Masterstudium
    Who should do that
    Somebody else
      hire someone to build
    your MVP
      https://talpor.com/
    I want to learn to do that!
      start today
      use your python
    knowledge
      https://github.com/
    flask-tutorial/flask-for-
    data-science
    

    View Slide