Hello World

Lesson Number 01, August 25, 2014

Welcome to COM372, Web Design and Development. 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.

Discussion - 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 restaraunt
  • 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 balane of your bank account
  • Find out if the dry cleaner is open
  • Find the best price for a new pair of shoes

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. Try typing http://212.58.251.195 into your web browser.
  • 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.

Hosting a website

  • a web host is a service provider that allocates space on a web server
  • to run a website, you must have a host
  • you must also acquire a domain name for your site (you can purchase these separately, but you will want a domain name to make your site visitable!)
  • you will almost always have to pay for both hosting and a domain name https://www.youtube.com/watch?v=HrOnrephOlE

Getting Ready for the Weeks Ahead

This is a technical, project-based course.  I am not interested in standing up here and lecturing you for hours on end; you will be active participants in this class.

You will need to have a functioning computer at each class.  While web design is mostly system agnostic (you can use Mac, PC, Linux...) I recommend using a Mac laptop.  If you do not have a laptop, we have loaners available.  If you do have a laptop but it is not a Mac, please speak with me after class - this is not a problem, I just want to be aware of what tools you are using so I can make sure the instructions I give are helpful.

At the next class we will go over setting up your computer for your work the rest of the semester.  However, please come to class with Google Chrome installed on your machine.

Homework (Readings & Assignments)

1. 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? Come to class on Wednesday prepared to discuss this.

2. Written Assignment: The Wayback Machine

Due Tuesday, August 26 by 11:59pm

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?

Write a paragraph for each of these questions. Save it as a plain text document (how? read more here), and email it as an attachment to me at kpipe@sju.edu.

3. Get Your Computer (and set it up)

  • Bring your computer to the next class.
  • Install Google Chrome on your computer
  • Sign up for GitHub.  Create a free account. Email me your Github Username and I will add you to our class organization.
  • Install GitHub for Mac or GitHub for Windows.

4. Buy the Books

  • Buy the books.  Chapters 1 and 2 of Robbins are due for Friday.
  • If you would like to share the books with another classmate, that is fine.

Lesson Credits

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