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

MultiMediaTechnology Masterstudium informal tutorial at 

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

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

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

MultiMediaTechnology Masterstudium Kenn ich eh' 

MultiMediaTechnology Masterstudium Who invented it? 

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? 

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. 

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

MultiMediaTechnology Masterstudium 

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

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 

MultiMediaTechnology Masterstudium Web Server 

MultiMediaTechnology Masterstudium HTTP hypertext transfer protocol 

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 

MultiMediaTechnology Masterstudium HTML Hypertext Markup Language 

MultiMediaTechnology Masterstudium HTML 

MultiMediaTechnology Masterstudium Web App: the Backend 

MultiMediaTechnology Masterstudium Web App: the Backend 

MultiMediaTechnology Masterstudium Web App: the frontend 

MultiMediaTechnology Masterstudium Web App: the frontend 

MultiMediaTechnology Masterstudium Web App: Frontend + Backend 

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

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

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

MultiMediaTechnology Masterstudium Web Scraping   When there is no API 

MultiMediaTechnology Masterstudium 

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 

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

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

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