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 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