Design Fundamentals for the Web – Session 2

January 28, 2014

Review

Last week’s agenda

User Personas & User Stories

User Personas

User Stories

An Example

Robbi Leonardi’s Interactive Resume

Execise

Let's work through our own example on Google Drive.


How the Web Works

The Internet

The “Internet” is the network of computer networks - Internet on Wikipedia

Each computer on a network has an address, so other computers can find it. This address looks like this (IPv4)192.168.0.1 or this (IPv6)2002:43a5:39b:1234:9cc4:b24d:4b98:27fb.

Lots of Network Services, for example:

Today, computers aren’t the only things with network addresses. “The Internet of Things” connects everything from cell phones to refridgerators, making everything internet “addressable”.

The World Wide Web

The World Wide Web was created in the 1990’s by Tim Berners-Lee as a service to link together documents over the Internet - World Wide Web on Wikipedia

Documents on the WWW have their own addresses too. These are known as URIs. URI stands for Universal Resource Identifier. A URI can contain a name, e.g. markdthompson.github.io/IMM-130-3/sessions/01282014.html, and a network service protocol, e.g. http://. If a URI has both, it’s known a URL, or Universal Resource Locator – that’s what you put in the address bar of your browser when you're surfing the web.

HTTP

HTTP stands for Hypertext Transfer Protocol and is the network service protocol used by the WWW. Web servers listen for requests from web clients, e.g your browser, and return the requested document if it can be found.

Web servers return different status codes when they receive a request for a document. The most common are:

Browsers

To access URLs, we use applications specifically designed to read web documents. These applications are called browsers. There are many different browsers in use today, but the main ones are:

Each of these browsers are made by different organizations, and as a result, they have their own features and priorities with respect to how they read and display web documents. Fortunately, most of these browsers support web standards that make it easier to create web sites that look more or less the same across most of these browsers.

HTML

HTML stands for Hypertext Markup Language and is currently in version 4.1. Modern web browsers also are beginning to support HTML5, which provides a richer set of features than HTML 4.1. We will be building our web pages using HTML5.

Basic HTML

An HTML document is a structured document that web browsers read, interpret and then display to users. When we write HTML, we’re writing markup for the web browser – telling it how to display our content to users. We do this using HTML elements & tags:

We name our documents with the .html file extension, so the web server knows how to process the document.

Managing the Your Projects with Git, Github & Github Pages

Execise


Assignment 2

Reading

Design

Sitemap

Log into Google Drive and create a new Google Drawing. Using shapes, create a simple sitemap based on the content you identified using your User Stories.

Basic HTML

Log into Github and try creating a page for each of the pages on your sitemap. Try linking the pages together using anchor tags. For more info on these basic html elements, check out the W3Schools HTML Tutorial.