February 10, 2015
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.
Let's work through an example on Google Drive.
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.
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 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 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:
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 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.
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:
<!doctype html><html>. . .</html><head>. . .</head><title>Your Title Goes Here</title><body>. . .</body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph</p><p>a href="http://www.yahoo.com" title="my link to Yahoo">my link to Yahoo</a><!-- This is a comment; the browser will ignore it. We use comments to make notes for ourselves -->We name our documents with the .html file extension, so the web server knows how to process the document.
Using a text editor like SimpleText, let's go ahead and create our first web page.
test.htmlIn 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 is an acronym for "File Transfer Protocol", and allows us to upload our web pages from our local computer to a web server.
beauty.tcnj.edu using your email username & passwordFirst up, let's go around the room and I'll invite you all into the Github class organization. That way you'll be able to see the class repositories we'll be working with.
After you've created your Design Notebook, share it with me at thomesoni@gmail.com. Here's more info on sharing Google Drive documents.
For more info on these basic html elements, check out the W3Schools HTML Tutorial.