Week 1

Things to know & do in week 1.

• Find a lab partner by this week Wednesday. Enroll your team into a group - before you do this, please read the "Labs" section on the Course Information page one more time. Make sure you know your team's group name and thus the cluster your team is in and what that means for lab assessments. Group enrollment will open after the first lecture.

• Read Chapter 2 of the Web development course book in preparation for Friday's lecture. This chapter provides a basic introduction to HTML - the Friday lecture will build on the knowledge of this chapter. If you have never written HTML markup before, we strongly suggest you carefully workthrough all the code examples. Having read Chapter 2 we assume you are comfortable with:

  • creating a basic HTML5 page that validates;
  • using the img, a, ul, p, div, … tags appropriately;
  • explaining the different purposes of HTML and CSS;
  • identifying the structure of a given HTML page;
  • creating a DOM tree from a given structure.

• Get started on thelab assignment (A1) and quiz. They will be released after the first lecture.

• For our labs, we have created a virtual machine (VM) with MySQL and node.js pre-installed. You are not required to use the VM, you can also opt to install the necessary software yourself (though we do not provide installation support in this case). To get the VM head over here and download web_data1.ova (1.5G). Alternative download link viaWeTransfer. Check the attachment (manual) of how to install the image!

Lecture 1

• introduction.pdf
• http-lecture1.pdf

The slides for lecture 1 are split into introduction (organizational matters) and http.

There is no required reading for this lecture.

Recommended reading: Chapters 1, 2, 3 and 12 of HTTP: The Definite Guide (O'REILLY 2002).

Lecture 2

• http-lecture2.pdf
• html-lecture2.pdf

The slides for lecture 2 are split into http (authentication - the part we missed in lecture 1) and html. The HTML form slides can be found online.

Note that the html slides also contains 4 slides at the very end about the appcache that we did not get to in the lecture - please view the correspondinglecture video to catch up on those remaining slides.

Required reading: Chapter 2 of the Web course book.

Recommended readings:

• Chapters 1 (history of HTML5), 3 (more semantic HTML), and 8 (offline Web applications) of Dive into HTML5 (available online);
• Chapters 3 (introduction to HTML) and 40 (offline Web applications) of The Definite Guide to HTML5.

Quiz W1

The quiz can be attempted once. Its content covers the lectures of week 1.

Quizzes are individual work!

Deadline: November 16, 2pm.

Lab assignment A1

Labs are team work. Make sure both team members can answer the questions of the lab assignment(s) during the assessment session - it is not the team that passes/fails the assessment, but individual team members!

Video recordings: HTTP

To help you studying, we pre-recorded the core lecture content; the recordings slightly differ from the actual lecture material presented in class. Make sure to check the actual lecture slides of the class, do not only rely on the video recordings!

Introduction to http.

Http messages.

Http header fields.

Http methods.

URLs.

Video recordings: HTML5

To help you studying, we pre-recorded the core lecture content; the recordings slightly differ from the actual lecture material presented in class. Make sure to check the actual lecture slides of the class, do not only rely on the video recordings!

Lets finish off the http part:

Authentication.

Note that this HTML5 overview misses the HTML content covered in the lecture!

Web design basics.

A closer look at HTML5.

Offline Web applications.

Additional material

The evolution of the Web & Internet has many fascinating stories to offer. Read up on

• the browser war between Netscape and Microsoft,
• Vannevar Bush's vision on the memex decades before the Internet and Web were born,
• the first word ever transmitted over the ARPANET,
• the world's first web cam, designed to observe a coffee pot at the University of Cambridge,
• the first ever email being sent,
• the infamous blink tag (live in action at Google) here,
• a brief history of http and the way forward.

If you want to delve deeper into the intricacies of good Web design, take a look at Google's Material Design Guidelines - Google's vision of a good design. In these guidelines, the mobile experience plays an important role, something we cannot cover in this course due to a lack of time.