Design Fundamentals for the Web – Session 2

September 4, 2014

Review

Last week’s agenda

Review of the Web Design Process

  1. Identify the types of users you need to communicate with
  2. Identify what each user type needs to be able to do
  3. Organize your content semantically
  4. Compose appropriate layouts for your content
  5. Create visual hierarchies for your content with type
  6. Apply design principles to emphasize relationships between elements
  7. Create mood and enhance your visual hierarchies and element relationships using color
  8. Breath life into your design with behavioral feedback
  9. Test, rinse & repeat!

Site Maps

Once we have defined our user groups using User Personas, and identified what we need each user to be able to accomplish on our site with User Stories, we can start blocking out our site based on this information. Site maps allow us to do this in a straight-forward way, providing us with a mockup of our soon-to-be site.

Execise

Let's work through an 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.

Execise

Using a text editor like SimpleText, let's go ahead and create our first web page.


Serving Pages on a Web Server

In order for the rest of the world to be able to see and interact with your web pages, you'll need to serve them through a web server with an internet address. It just so happens your TCNJ web accounts let you do this pretty easily.

FTP

FTP is an acronym for "File Transfer Protocol", and allows us to upload our web pages from our local computer to a web server.

Execise


Assignment 2

Reading

Design

Sitemap

Basic HTML

For more info on these basic html elements, check out the W3Schools HTML Tutorial.