<> Fundamentals of Web Design

Hello World

Welcome to DMD1070, Foundations of Web Design. This course is designed to guide you through the process of planning, designing, and implementing your first website. In this lesson we'll gain our bearings by understanding a bit about the history of the web and how the web works.

<iframe src=//slid.es/ascott1/dmd1070-1/embed” width=”576” height=”420” scrolling=”no” frameborder=”0” webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Student information format

Please complete the student information form.

How Does the Web Work?

The Web is built on a series of technologies for information transfer, plus some programming languages that you use to specify how you want that information to look. A simplified view follows:

  • The client: This is your computer, which you use to access the Web
  • The server: This is a computer in a room somewhere, which stores websites. When you access a website on your computer, a copy of the website data is sent from the server to your client machine for you to look at.
  • Your Internet connection: Allows you to send and receive data on the Web. It’s basically like a giant street that cars and people can travel down.
  • TCP/IP: Defines how your data should travel down that road. This is like the cars and buses people use to get places.
  • HTTP: Defines how and when data should be sent between the client and the server. This is like some people deciding what journeys they need to go on down the road, how far they need to travel, what mode of transport they need to use, etc.
  • DNS: Domain Name Servers are like an address book for Websites. When you type in a web address in your browser, before the website is retrieved the browser goes to the DNS to find out where it lives, like when you look up someone’s address so you can go and visit them. Without DNS nameservers, we would navigate to a page by IP address such as http://208.80.152.201 (that’s Wikipedia’s IP address).
  • HTML (CSS and JavaScript): The main three programming languages that websites are built from.
  • Assets: This is a collective noun for all the other stuff that makes up a website, such as image files, MP3s and videos, Word documents, PDFs, etc.

Activity 1: The Wayback Machine

Choose a popular website and enter its URL into the Wayback Machine. Browse through at least 5 dates of the site’s history and note the following:

  • How has the design of the site changed?
  • How has the content of the site changed?
  • What are some similarities between past and current versions of the site?

Activity 2: Life Without the Web

What was life like before the web? Try to imagine (or recall) how you would accomplish these tasks without the web:

  • Read the menu of a local restaurant
  • Buy concert tickets
  • Find the best driving route to Portland, Maine
  • Book a trip to San Francisco
  • Find out the score of a football game
  • Check the balance of your bank account
  • Find out if the dry cleaner is open
  • Find the best price for a new pair of shoes

Activity 3: A game of client/server

A game of client/server

Let’s play a game! To play this we need:

  • Some lego bricks (or some colored cards of some kind)
  • One person to play a web server
  • One person to play HTTP
  • 2-3 people to play clients
  • One person to play DNS
  • and a decent number of people to play our website data.

First, a typical successful web request:

  1. First the clients request a web page
  2. The client web browsers look up the IP address of the website using the DNS
  3. HTTP informs the server that the clients are requesting a website, with a message sent to the server. This is called an HTTP request.
  4. There is no reason why the clients can’t have this website, so the server responds with “200, OK”. HTTP gives this response back to the client.
  5. The website data is sent down the pipe to the clients. A copy is sent to each.
  6. The clients assemble the data into a working website that it’s users can interact with.

Now, an unsuccessful web request:

  1. First the clients request a web page, but they’ve got the address slightly wrong.
  2. The client web browsers look up the IP address they’ve been given using the DNS
  3. The website cannot be found, so the HTTP response “404, NOT FOUND” is given back to the client.

When data is sent down the pipe, it is broken up into little tiny bits called packets. Each one of our data people really represents a single packet! If the data were not broken into packets before being sent to the client computers, it would be much harder to send around. It’s the same principle as getting a wardrobe in through your front door, up your stairs and into your bedroom. This is a lot easier to do if you carry the wardrobe upstairs in pieces and then assemble it in the bedroom, rather than carrying it upstairs already assembled!

Activity 4: View the Web Through X-Ray Goggles

Using Mozilla’s X-Ray Goggles let’s remix a web page.

  1. [Together] Click the link above and follow the “See how Goggles work by swapping an image” instructions.
  2. Install the X-Ray Goggles bookmarklet by dragging the “Activate X-Ray Goggles” link to your bookmarks bar.
  3. Now let’s remix the web! Choose a popular website and tweak it to achieve interesting, outlandish, or provoking results.

Readings & Assignments

Read Tim Berners-Lee’s “The World Wide Web: A very short personal history”

Read the Web inventor’s brief personal history. Do you think his vision of the web has held true?

Lesson Credits

Some of the content and activities of this lesson were adapted from Teach the Web and It’s My Web