Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Web- and Mobile-Developement

bjelli
November 08, 2014

Intro to Web- and Mobile-Developement

for data scientists at NYU

bjelli

November 08, 2014
Tweet

More Decks by bjelli

Other Decks in Programming

Transcript

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

    View full-size slide

  2. MultiMediaTechnology
    Masterstudium
    informal tutorial at

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  6. MultiMediaTechnology
    Masterstudium
    Kenn ich eh'

    View full-size slide

  7. MultiMediaTechnology
    Masterstudium
    Who invented it?

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  11. MultiMediaTechnology
    Masterstudium

    View full-size slide

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

    View full-size 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 full-size slide

  14. MultiMediaTechnology
    Masterstudium
    Web Server

    View full-size slide

  15. MultiMediaTechnology
    Masterstudium
    HTTP
    hypertext transfer protocol

    View full-size 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 full-size slide

  17. MultiMediaTechnology
    Masterstudium
    HTML
    Hypertext Markup Language

    View full-size slide

  18. MultiMediaTechnology
    Masterstudium
    HTML

    View full-size slide

  19. MultiMediaTechnology
    Masterstudium
    Web App: the Backend

    View full-size slide

  20. MultiMediaTechnology
    Masterstudium
    Web App: the Backend

    View full-size slide

  21. MultiMediaTechnology
    Masterstudium
    Web App: the frontend

    View full-size slide

  22. MultiMediaTechnology
    Masterstudium
    Web App: the frontend

    View full-size slide

  23. MultiMediaTechnology
    Masterstudium
    Web App: Frontend + Backend

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  28. MultiMediaTechnology
    Masterstudium

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide