Introduction to the Web (of Things) Niels Olof Bouvin 1
Overview Introduction to the course A brief history of the Web Getting started with Web development HTML: the basics CSS: adding a bit of style 2
Why should you listen to me? I’m an associate professor in Computer Science I did my PhD on combining the Web with Open Hypermedia (back in 2001) I’ve been working with and publishing in the Web and hypermedia fj elds for twenty-one years and started using the Web in 1993 at CERN, Geneva had for a year or two one of the most popular Tolkien web sites (around 1994) I have also been working with pervasive computing (i.e., IoT) for a long time 3
The Web of Things Purpose of the course: provide you with the understanding and skills to realise Web driven platforms on the server and on the (mobile as well as desktop) client with a special focus on integrating the Web and the World (also known as the Web of Things) using JavaScript, HTML & CSS help you develop good practices with regards to software development, including pair programming, adherence to coding styles, use of versioning, and standard tooling Form Two lectures per week (2+1 hours)—all lectures will be recorded, if possible TA sessions, study café, and subreddit Various programming exercises (which should be done in pairs) Four mandatory assignments: three in pairs, and one solo—these are graded Self study: we can show how to program, but only you (and your programming buddy) can learn it 4
TA sessions, exercises & assignments Teaching Assistants Michal Ratajsk ý (IT1 & Study Café) Karl-Emil Kjær Bilstrup (IT2) itWoT subreddit: https://reddit.com/r/itWoT/ You are strongly encouraged to attend the TA sessions and do the exercises (ideally before the TA sessions) programming is like fm ying—you have to put in the hours to be any good at it Dropping the exercises and only doing the assignments is like not training before the olympics, because why go to training, when it’s only at the olympics you get the medals? 5
Syllabus & required materials All texts in the course are freely available online though you can buy some of them, if you wish to support the author You’ll need to buy a Raspberry Pi 3 one per group pricing TBD, but it will be highly competitive, and there are many uses for a RPi the sensors you used in the Autumn should be (mostly) be fj ne for the RPi You’ll be using MySQL from the DB course later on, and the IT project course relies on what you learn here as well as the use of your Raspberry Pi 6
The course site Slides Texts Exercises & Assignments 7
Course plan Introduction to the Web and HTML/CSS getting started with writing HTML/CSS using Microsoft Visual Studio Code Introduction to JavaScript getting started with JavaScript on your computer Introduction to the Web of Things on the Raspberry Pi Server-side JavaScript getting started with Express Responsive and accessible design Browser-side JavaScript JavaScript continued and Accessibility 8
Overview Introduction to the course A brief history of the Web Getting started with Web development HTML: the basics CSS: adding a bit of style 9
The prehistory of the Web Vannevar Bush introduces the fj ctional M EMEX in his seminal paper As We May Think published in 1945 an opto-electric machine based on micro fj lm with links and annotations intended to o ff er knowledge workers easy access to vast libraries of information Douglas Engelbart demonstrates NLS, an advanced, collaborative hypermedia system in 1968 Arpanet, the precursor to the Internet, begins in 1968 It grows from a few machines to many thousands in the following decades In the eighties, many di ff erent hypermedia systems are developed, largely by researchers 10
The Internet in the late eighties All major universities and many larger companies are connected to the Internet, and communicate through email, share fj les with FTP, discuss on Usenet, browse using Gopher, etc, etc many di ff erent protocols, all requiring their own application, on many di ff erent architectures This is a hassle for people who have to support it such as Tim Berners-Lee and colleagues, working at the international high-energy physics laboratory CERN in Geneva they began to work on a proposal for a unifying system in late 1989, published in 1990 11
The World Wide Web A distributed system based on a client/server model designed to cover most application level Internet protocols and provide support for hypermedia Uniform Resource Locators Hypertext Transfer Protocol Hypertext Markup Language 12
Client/server communication Server resource request resource request Client Client The Web is an example of a client/server architecture clients make requests servers return resources communication is always initiated by the client In the context of the Web, clients are (usually) Web browsers, though they can be anything that speaks http and https http and https are the protocols with which Web clients and servers communicate 13
The Uniform Resource Locator protocol resource fragment server z }| { z }| { z }| { z }| { https : // users − cs . au . dk / bouvin / dBIoTP2PC / 2017 / exam . html # topics Combines protocol the method with which computers communicate, e.g., http, https, ftp, rtp, … with host or server name usually resolved using DNS resource name could just be a fj le name, but could also something more general (we’ll return to this) and fragment identi fj er used to point into a resource—usually a text-based one 14
The HyperText Transfer Protocol At its simplest, a request and response for a resource but in reality, it is a bit more complex and far richer: http://127.0.0.1:8080/hello.txt GET /hello.txt HTTP/1.1 request: Host: 127.0.0.1:8080 User-Agent: curl/7.54.0 (from client) Accept: */* headers explaining what the client wants response: HTTP/1.1 200 OK server: ecstatic-2.2.1 and what the server (from server) last-modified: Tue, 02 Jan 2018 11:54:58 GMT etag: "77865272-13-"2018-01-02T11:54:58.000Z"" delivers cache-control: max-age=3600 content-length: 13 content-type: text/plain; charset=UTF-8 Date: Tue, 02 Jan 2018 12:01:52 GMT Connection: keep-alive (A blank line) the actual resource Hello World! 15
The HyperText Markup Language An, originally simple, format to markup text, so it could be pleasantly presented and linked together across di ff erent kinds of devices the original use case was scienti fj c documents—prioritising structure over typography text, links, and, images were encapsulated in tags, sometimes with attributes <a href="books.html">My <em>books</em></a> (a link to a page called ‘books.html’ with the anchor text ‘My books ’) While the structural meaning of tags were pretty clear from the beginning, the visual interpretation was less clear and depended on the browser implementation this led to a lot of structurally unsound documents attempting to look like the author intended (e.g., using <h5></h5> to get SMALL CAPS rather than a fj fth level heading) 16
HTML: The Dark Ages The Web exploded in popularity in the mid-nineties, and with it numerous browsers vying for users thus came a need to di ff erentiate Web browsers, and a need for Web developers to enhance the presentation of their sites This led to many unfortunate “innovations” by Web browser developers, as well as atrocious HTML pages this was the dread age of the <font> , <big> , <marque> , and <blink> tags Web browser implementors spent many resources reverse engineering the competitors’ Web browsers to match their behaviour and Web page rendering 17
Splitting Structure & Presentation Early Netscape & Microsoft browsers added a lot of visual markup to HTML this was ill-de fj ned, di ffi cult to maintain, made Web presentation unpredictable, and di ffi cult to adapt to new platforms (e.g., moving from PC screen to mobile phone) This led to the creation of Cascading Stylesheets HTML has the content and de fj nes its inherent structure CSS describes how the content is to be laid out on the page, styled, and presented the layout engine in the Web browser combines the two and renders it Thus, the same content (HTML) can be reused by adapting the CSS 18
HTML: A New Hope By the early noughts, the Microsoft Internet Explorer had won “the browser wars” as the dominant browser this monopoly led to a stagnation of browser development, and hence of the technologies available to Web developers Then a number of important things happened Google Maps (created by two AU CS people, and acquired by Google) demonstrated in 2005 that truly interactive Web pages were possible (aka. the “single page Web app”) the need for proper, workable Web standards actually adhered to became urgent the rise of new browsers: WebKit derivates (Chrome, Safari), Gecko ditto (Firefox) the focus to make JavaScript a high performance language: Chrome V8 (another CS AU alumni), JavaScriptCore (Safari), SpiderMonkey (Mozilla/Firefox) recently, Microsoft abandoned their own ‘Edge’ browser, adopting Chromium instead 19
Recommend
More recommend
