Introduction to the Web (of Things) Niels Olof Bouvin 1 Overview - - PowerPoint PPT Presentation

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 fjelds 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 fmying—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

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

• ne 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 fjne 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 fjctional MEMEX in his seminal paper As We May Think published in 1945

an opto-electric machine based on microfjlm with links and annotations intended to offer 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 different 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 fjles with FTP, discuss on Usenet, browse using Gopher, etc, etc

many different protocols, all requiring their own application, on many different 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

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

Server Client Client request resource request resource

13

The Uniform Resource Locator

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 fjle name, but could also something more general (we’ll return to this)

and fragment identifjer

used to point into a resource—usually a text-based one

protocol

z }| { https ://

server

z }| { users−cs.au.dk/

resource

z }| { bouvin/dBIoTP2PC/2017/exam.html#

fragment

z }| { topics

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 Host: 127.0.0.1:8080 User-Agent: curl/7.54.0 Accept: */* HTTP/1.1 200 OK server: ecstatic-2.2.1 last-modified: Tue, 02 Jan 2018 11:54:58 GMT etag: "77865272-13-"2018-01-02T11:54:58.000Z"" 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 Hello World!

request: (from client) response: (from server) headers explaining what the client wants and what the server delivers the actual resource (A blank line)

15

The HyperText Markup Language

An, originally simple, format to markup text, so it could be pleasantly presented and linked together across different kinds of devices

the original use case was scientifjc documents—prioritising structure over typography text, links, and, images were encapsulated in tags, sometimes with attributes (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 fjfth level heading)

<a href="books.html">My <em>books</em></a>

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 differentiate 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-defjned, difficult to maintain, made Web presentation unpredictable, and difficult 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 defjnes 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

Who determines the Standards?

The Web standards were created by the World Wide Web Consortium (W3C) led by Sir Tim Berners-Lee

membership includes all the major companies and organisations

Some of W3C’s standards were well adhered to

• thers rather less so, and the organisation is thought to move very slowly

JavaScript (or, more correctly, ECMAScript) has its own governing body Web standards today are spearheaded by WHATWG

(Web Hypertext Application Technology Working Group)

20

Standards are important!

If a feature is only supported on one browser, it limits the audience, makes maintainability and skill transfer harder Standard adherence has become a benchmark for browser developers, and standards have begun to move forward There are still challenges, but it is nowhere as bad as it

• nce was

21

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

22

Welcome to the command line!

Web development requires

an IDE or editor to write HTML, CSS, and JavaScript a Web server to serve it a Web browser to receive it a system in place to handle all the fjles and resources involved over time

Most likely across different machines This will require you to gain some profjciency with command line tools, as well as tools more familiar, or at least similar to tools that you have already used

23

The basics

A Web browser

we will be focused on contemporary Web standards, so we’ll be targeting the latest versions of Google Chrome, Apple Safari, and Mozilla FireFox as well as their mobile counterparts later on in the course

A Web server

we will be using the latest Node.js versions, which you’ll be running on your computers as well as on your Raspberry Pi 3 and cloud servers we will start using the simple Web server http-server, which is easily installed via npm

A development platform

we will be using Microsoft Visual Studio Code, which is both excellent and free

24

Visual Studio Code

Download from https://code.visualstudio.com/

available for Windows, macOS, and Linux

Take a look at https://code.visualstudio.com/docs to get started Install the extensions specifjed at the course site and confjgure them as instructed

we are going to follow one, and only one, coding standard in this course

25

The need for version control

We will be working with projects spanning a fair number of directories and many fjles that will change

• ver time across several computers

that can be a right pain to work with and many things can go wrong e.g., it becomes possible to tag a working version, and then continue work

Version control to the rescue!

version control turns out be a complicated problem, and this is refmected in the tools, so there is a learning curve

We’ll be Using git Using git

26

Using git(!)

27

Using git

git can git ya!

but it does not have to be like that

We’ll be using the most basic commands, and using them from VSC, if possible If all things go wrong: delete/rename the folder, and make a new clone from the repository

28

git ‘er done

Your fjles reside in a repository, which you can clone

git clone <address of your repository>

You can add a fjle (or folder) to your local copy

git add cute_kittens.html gfx/kitten01.jpg

You can commit to changes made to your local copy (this is known as staging), and then push those changes to the repository

git commit -a -m 'I added a page about cute kittens' git push

Other team members can then pull those changes to their copy

git pull

29

GitLab.au.dk

Through your AU login, you already have access to gitlab.au.dk, and once registered, it is straightforward to create and share groups & projects

you can create public, internal, and private projects, and add members to your project you should start out by creating a private group with your team mate and your TA as members, and create all your subsequent project within that project you’ll be assigned with a group name during the fjrst TA session, so wait until then

The site provides you with command line instructions

• nce setup, the rest can be handled through Visual Studio Code

it is probably wise to at least execute the two fjrst lines, setting your name and your email address in the command line (using your name and email, not mine!)

30

Secure communications

The source fjles stored at GitLab.au.dk should be transferred in a secure and convenient manner Secure communications can be established using ssh, which requires us to generate a ssh key pair, and upload the public key to the GitLab.au.dk website

while there is no danger in sharing the public key, the private key should be guarded!

We’ll be using ssh later in the course (to login to the RPi), so we might as well get started

31

Starting a project in Visual Studio Code

The natural basis for working within Visual Studio Code is the folder, and you start a project by opening

• ne

VSC can do a lot for you, and we’ll be looking at a few

• f these things in the course—there are many video

tutorials at the VSC Web site, and I’ll be linking some and encourage you to search for others yourself VSC is undergoing rapid development, so it’s always worthwhile to stay updated on new features and extensions

32

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

33

The HyperText Markup Language

HTML is a structured markup language for all kinds of documents

it can encode the structure and contents of most kinds of documents it can, with the help of CSS, be styled in very elaborate ways it can contain many different kinds of media types, and support most natively it can be made accessible for the visually impaired

It is not a ‘programming’ language—it is a markup language

there is still syntax and rules, but a HTML page doesn’t ‘do’ anything except present itself through a HTML renderer (usually found in a Web browser) a programming language, JavaScript, is however deeply integrated with HTML

34

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Min første Webside fra omkring 1994</title> </head> <body> <h1>Velkommen!</h1> <p>Dette er min første Webside &mdash; det er stadig et Work-in-Progress.</p> <h2>Menu</h2> <ul> <li>Billeder af killinger</li> <li>Favoritfilm</li> </ul> <img src="gfx/under_construction.gif"> </body> </html>

Getting started

35

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1></h1> <p></p> <h2></h2> <ul> <li></li> <li></li> </ul> <img src="gfx/under_construction.gif"> </body> </html>

Some observations on <tags>

a <tag> is begun and ended </tag> with <few/> <exceptions> a <tag> will never <overlap></tag> </overlap> some <tags have="attributes"> with additional information some attributes are universal, such as id, style, or class, whereas others are specifjc for certain tags, such as src

36

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1></h1> <p></p> <h2></h2> <ul> <li></li> <li></li> </ul> <img src="gfx/under_construction.gif"> </body> </html>

The overall structure

a HTML document is begun by a DOCTYPE declaration (a holdover from the past) the <html> tag is the root of the whole document the <head> contains general information about the page, such as the character encoding (should these days always be ‘utf-8’), and the page title the <body> contains what is actually shown on the page with tags dividing the text up into meaning structural parts, such as headings, paragraphs, unordered lists, list items, and images

37

Some types of tags

Structural tags

<p>, <h1>, <h2>,…,<h6>, <ol>, <ul>, <li>, <nav>, <header>, <article>, <section>,<address>,<blockquote>,<q>

Tags for explicit typographical changes

<b>,<i>,<u>,<strong>,<em>,<sup>

Tags used mainly just to divide or identify some text

<div>,<span>

Special tags

<img>, <a>

38

The Web server and Web browser

A HTML page is of course not very interesting without a Web server to serve it, and a Web browser to retrieve it from the server and render it on the screen While it is possible to open HTML documents directly in the fjle system, more advanced features require the document to be sent from a proper Web server, and I would encourage you to always do so We will be using Node.js in this course, so I will initially be using the simple Web server http-server

39

Naming conventions for fjles

The ‘index.html’ fjle is special

http://127.0.0.1:8080/index.html and http://127.0.0.1:8080/ are identical

While there are variations between various Web servers, this is very much the norm for static Web pages

static Web pages: pages that are just retrieved from the server’s disk and transmitted to the browser without any further processing at the server or the browser

40

Linking it all together

The link, designated by the <a> tag, is central to the success of the Web, because it ties everything together and allows us to point to relevant resources The text <a>enclosed by the</a> is the anchor, and the <a href="wherever.html"> attribute is the destination

(this is actually a very limited hypertext model, compared to the state of the art in the late eighties, but it was simple, easy, and scalable, and is utterly dominant now)

The destination is relatively to the enclosing page

so, <a href="wherever.html">points</a> to a document in the same folder, <a href="../here.html"> and <a href="there/page.html"> navigate folders

41

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Min første Webside fra omkring 1994</title> </head> <body> <h1>Velkommen!</h1> <p>Dette er min første Webside.</p> <h2>Menu</h2> <ul> <li> <a href="cute_kittens.html">Link</a> til Billeder af killinger</li> <li> <a href="good_movies.html">Link</a> til Favoritfilm</li> </ul> </body> </html>

The next revision

42

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Killinger!</title> </head> <body> <h1>Killinger!</h1> <img src="gfx/Cute_kitten.jpg"> </body> </html>

The next revision

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gode film</title> </head> <body> <h1>Gode film!</h1> <img src="gfx/The_Mario.jpg"> </body> </html>

cute_kittens.html good_movies.html

43

HTML: general rules

Use HTML for structural markup Always write valid HTML and intent well

use the VSC extension HTMLHint and format your code

This will make it much easier to work with your pages later on, when they become dynamic, and it makes the pages easier to parse for search engines and people with other browsers than you

44

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

45

Cascading Style Sheets

As I mentioned before, visual styling in HTML became a thing for a while, and that was a terrible idea CSS was developed to allow Web developers and designers to cleanly divide the contents and the presentation of a Web page

this allowed for a much richer language for presentation, and made support for different media possible with a single page

CSS deals with layout, fonts, and colours

as well as transitions in more advanced versions

and can adapt those things to the user's device

46

The history of CSS

CSS has undergone a tremendous development since its inception in 1996

CSS1 was not properly supported by any browser before around 2000, and it was slow going for a long time after that

As with other Web standards, it took a long time for Web browser developers to wake to the necessity of properly and consistently implementing standards Today, things are better, if not perfect

we are at CSS3 now, and Web browsers are very much judged by their ability to support the standards

47

/* Mit første stylesheet */ body { font-family: Cochin, Cambria, Georgia, Times, Times New Roman, serif; font-size: 1.5rem; background-color: cornsilk; } h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } p { background-color: aliceblue; color: inherit; }

Adding a dash of style

48

The Document Object Model

The DOM is a tree representation of the HTML page The stylesheet cascades down over the DOM tree Style may be inherited, and can be overwritten

thus, all within body uses the Cochin font, except h1-6, which use Helvetica and while all h1-6 share a font-family, they have different sizes

html head body h1 p h2 ul meta title link li li a a

49

body { font-family: Cochin, Cambria, Georgia, Times, Times New Roman, serif; font-size: 1.5rem; background-color: cornsilk; } h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } p { background-color: aliceblue; color: inherit; }

A CSS rule consists of a series of selectors with properties given values Lexicographical order matters, as do DOM containment

The basic CSS syntax

selector value property

50

Style in many places

Style can be added at three places

referenced as an external stylesheet in a <link> tag in the <head> tag specifjed inside a <style> tag in the <head> tag specifjed using the style attribute in an tag

All can be sensible choices, but keep in mind

if you are doing something multiple times on a page, just defjne it in the <head> if you are doing something multiple times across pages, it belongs in an external stylesheet

It is simply a question of what is simplest, if you need to understand or change it

51

CSS properties

Far too many to contain in a single lecture, or even within several lectures

much better for you to acquaint yourselves with the possibilities by following the active learning path in the Mozilla Developer documentation do not hesitate to continue into the rest of their learning path

Font, size, placement, colour, appearance, fmow, animation, etc can all be set using properties Properties usually have associated units, such as px, rem, or %

again, follow the learning path

52

Selectors

A selector can specify which specifjc nesting of tags should be covered by the rule

li { color: darkorange; }

• l li {

color: hotpink; } <ul> <li> <a href="cute_kittens.html">Link</a> til Billeder af killinger</li> <li> <a href="good_movies.html">Link</a> til Favoritfilm</li> </ul> <h2>En ordnet liste</h2> <ol> <li>Den første ting</li> <li>Den anden ting</li> </ol>

53

Class selectors

Any tags in HTML can be given a class property, and this can be expressed in a CSS selector with a .

li { color: darkorange; }

• l li {

color: hotpink; } .anden { text-decoration: underline; } <h2>En ordnet liste</h2> <ol> <li>Den første ting</li> <li class="anden">Den anden ting</li> </ol>

54

A tag can have multiple classes

<h2>En ordnet liste</h2> <ol> <li>Den første ting</li> <li class="sc anden">Den anden ting</li> </ol>

Class selectors

.anden { text-decoration: underline; } .sc { font-variant-caps: small-caps; }

55

A tag can be given a unique identifjer, and that identifjer can be matched in a selector with #

<h2>En ordnet liste</h2> <ol> <li id="etteren">Den første ting</li> <li class="sc anden">Den anden ting</li> </ol>

ID selectors

.anden { text-decoration: underline; } .sc { font-variant-caps: small-caps; } #etteren { text-shadow: 2px 2px chocolate; }

56

A selector can match a tag with a given attribute

<h2>En ordnet liste</h2> <ol> <li lang="da">Den første ting</li> <li lang="fr">Le deuxième objet</li> <li lang="sv">Det tredje objektet</li> <li lang="es">El cuarto objeto</li> </ol>

Attribute selectors

[lang] { font-family: sans-serif; } [lang|=fr] { font-style: italic; } [lang*='s'] { color: blueviolet; } [lang^='s'] { text-decoration: underline; }

57

There are many pseudo classes that can be used to describe the situation a specifjc element is in

<ol> <li>Den første ting</li> <li>Den anden ting</li> <li>Den tredje ting</li> </ol>

Pseudo class selectors

li:nth-of-type(even) { background-color: bisque; } li:nth-of-type(odd) { background-color: rgb(202, 230, 255); }

58

The CSS box model

All elements are contained within a box with a margin, a border, and some padding, as well as a height and width

59

Boxes made visible

* { border: 1px black solid; /* borders are not inherited, so * is needed */ }

60

Block and inline boxes

Some elements can have a width and height set, will break lines and be stacked on top of each other— these are block boxes Others do not break lines and can follow each other

• n a line, and may continue on the next line—these

are inline boxes In-between, we fjnd the inline-block boxes, that can have a width and height set, can follow each other on a line, and maintain its block shape This can be controlled by the display property

61

Moving the page a bit forward…

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Min første Webside</title> <link rel="stylesheet" type="text/css" media="screen" href="style/main.css" /> </head> <body> <nav> <ul class="menu"> <li> <a href=".">Forside</a> </li> <li> <a href="cute_kittens.html">Killinger</a> </li> <li> <a href="good_movies.html">Favoritfilm</a> </li> </ul> </nav> <h1>Velkommen!</h1> <p>Dette er min første Webside.</p> </body> </html>

62

Moving the page a bit forward…

body { font-family: Cochin, Cambria, Georgia, Times, Times New Roman, serif; font-size: 1.5rem; background-color: aliceblue; } h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } h1 { font-size: 3rem; } h2 { font-size: 2rem; } .menu, nav { padding: 0; margin: 0; border: 0; } .menu li { display: inline; background-color: rgb(205, 213, 255); margin-right: 1rem; padding: 0.25rem; } .menu a { text-decoration: none; }

63

Wrapping up

HTML and CSS are old standards that have evolved tremendously over time They are, at a basic level, fairly simple, but requires quite a bit of work to master, let alone create something beautiful with Reading and hearing about these technologies can

• nly bring you so far—you need to engage and this

can be done by, e.g., following the active learning path in the Mozilla documentation

64

The Web anno 2019

The Web is an amalgamation of many different technologies and standards that have changed and evolved dramatically over time, controlled by and fought over by standard bodies, OS organisations, and giant companies It consists of all these various versions of documents, scripts, and protocols, and browsers and other software are expected to be able to cope gracefully There is no clean slate: The Web cannot start over But we can chose our tools carefully moving forward

65