GD 65 Assignment 1

Below are your assignments due next week by 8:00am Monday, November 3

 


Sign Up

Estimated time to complete: 1 hour


tumblr

Sign up with Tumblr. http://www.tumblr.com
We use Tumblr for our class blogs for this course.

Your Tumblr blog is the place where you’ll post written assignments for this class. The first thing I’d like you to post to your Tumblr blog is a list of 3 of your favorite websites.

For each website, tell me:

  1. What type of website is it?
  2. Who is the audience? Who mostly commonly visited the website?
  3. What are the possible goals for the website? What can a visitor do on the site?

Post the URL (web address) for your Tumblr blog to the comments sections below. I’ll post the links to all of our class blogs on the GD 65 page in the “Student Blogs” section of this site.

Below is more information about Tumblr and a “walk-through” video on how to post content to your Tumblr blog.

http://www.tumblr.com/about


Read

Estimated time to complete: 5 hours


All class notes from Class 01A & Class 01B (obvious, right?)
Assigned Readings from our textbook

  • Chapter 1: Where do I start?
  • Chapter 2: How the Web Works
  • Chapter 3: Some Big Concepts You Need to Know

Discussion

Estimated time to complete: 1+ hours


Discussion – Assignment 1: Introduce yourself
Be sure to introduce yourself in the Discussion section of our eCompanion class website for this course.

Discussion – Assignment 1: Taking Stock. (Page 20 in our textbook).
Answer and discuss the six questions posted in the Discussion section of the eCompanion class website. Feel free to respond and discuss your answers with your fellow students. I’m happy to lead the discussion but all of you must actively participate. The more discussion we have in this course, the better. :)


Watch

Estimated time to complete: 1+ hours


Please view the three videos below. (And you may need to watch the videos more than once!)

VIDEO: File Organization (Website Directory Structure)


VIDEO: The Basics of HTML


VIDEO: The Basics of CSS


Exercises

Estimated time to complete: 3+ hours


Please complete the Class Goals survey so I learn more about your background. The survey is short— it should only take a few minutes.

From our textbook
Exercise 2-1: View Source. (Page 26 in our textbook). Complete this exercise and be sure you’re familiar with how to “View Source” in a Browser.

Part 1 – Code a simple HTML page using a Simple Text Editor (Notepad for PC or TextEdit for Mac)

View the videos from the Watch section above called  “The Basics of HTML” and “The Basics of CSS.” Create a simple HTML page using a simple text editor as demonstrated in the videos. See Class 01B notes or textbook for more information about creating a HTMl file in a simple text editor.

Please be sure to watch the video on “File Organization” also. (Your files must be organized correctly or I will take points off your assignment grade.)

Upload your web files (they should be in a “parent” folder), as a zip file to the “Dropbox” on eCompanion website by the due date.

This exercise is graded based on the following. Points will be taken off for any missing items below:

  1. Organize your files correctly from the very beginning. Please refer to the File Organization video for the file organization required.
  2. The html page should be named “index.html”
  3. Use all lowercase letters for folder names.
  4. Be sure to include two main folders: “final_web’ and “source_files”
  5. The index.html and .css files need to be in the “final_web” folder.
  6. The folder for the images needs to be named “images,” and all of your images must be inside your “images” folder.
  7. The images folder must be in the “final web” folder.
  8. For the images, an image should be smaller in weight than 500k.
  9. Be sure to include an external .css file, the CSS file needs to be linked in the header of your HTML using the following code:
    <link href=”style.css” rel=”stylesheet” type=”text/css” />
  10. Don’t save your html file as a .txt file or the browser won’t read it correctly.

Part 2 – Create a site map for ONE of the three websites below.

http://www.shaleoakwinery.com/
http://www.alimapure.com/
http://www.hellodesign.com/

Using Illustrator or Photoshop, create a site map for ONE of the websites listed above. Refer to the information in the video and class notes on how to create a site map in Illustrator.

You may use the Monday May Design site map as a template, but if you do so, please be sure to make your site map different than the one I’ve given you. The Monday May Design site map is a PDF so you can edit it in Illustrator.

Upload a PDF of your site map to the “Dropbox” on the eCompanion website by the due date.

This exercise is graded based on the following. Points will be taken off for any missing items below:

  1. Add the name of the website and date as the title for the site map.
  2. Be sure to include lines connecting pages to sub-pages. (Refer to the sample site map in the video.)
  3. Include a page (box) at the end of the horizontal line instead of the long line leading to nothing.
  4. Draw the map so all the sections appear on the same horizontal line.
  5. Draw the boxes so they are similar in size.
  6. Add text that is consist in typeface and size.
  7. If you need to represent multiple pages that are similar (like product pages for a Products section), draw a symbol that looks like one page on top of another to represent this.
  8. Clean up the meeting point of the vertical and horizontal lines for each page (box). Make it look nice, this is a document that the client will see!
  9. Don’t forget the alpha-numerical labeling: A, A.1, B, B.1, C, C.1 etc. (See the site map in the video.)
  10. Save the site map as a .pdf not as an Illustrator (.ai) file.

Please place both parts 1 & 2 of the Exercises in ONE folder and create a zip file of that one folder.

When you upload your zip file to the Dropbox, please be sure to include your name in your file names. For example: assignment1_yourlastname_.zip

Leave a comment