On Your Own - Due by

Goal

Practice evaluating HTML mechanics
Practice evaluating web design
Practice adding images

Assignment

Review Kirk's sample FixThisSite.htm with a prototype fixed site
Create WebPage05.htm
- Due by
- One re-grade request allowed from until Friday 03-09-2018 at 5:00pm
- Grade value: 1% of your final grade
- Evaluate a classmate's WebPage04 for good coding practices (inspect HTML), list your evaluation of their page on your page
- Add a screenshot of their page (remember to take into account Kirk's Pet Peeves)

Grading Rubric

-25%: Did not evaluate a classmate's WebPage04 for good coding practices (inspect HTML)
-25%: Did not add a screenshot of their page

In class (Monday)

Work with a peer (or two) to fix any problems with your last assignment
Discuss use of class time for future quizzes
Finish WebPage05.htm
Introduce Project 01 (FixThisSite.htm)
Review Kirk's sample FixThisSite.htm with a prototype fixed site
Individual help

In class (Wednesday)

Quiz 02 - More HTML Mechanics (20 minutes in class - you will have until Friday at 5pm to complete it)
Practice grabbing screenshots
Practice creating/using images
Modify WebPage05 with some of these new images
Work on Project: FixThisSite.htm
Individual help

Material to learn before the assignment is due on

Project: FixThisSite.htm - Due by

List the web address for a site that you think needs to be fixed (should be linked with a target to a new window)
List at least 3 problems with the site
Show a screenshot of the site that you think needs to be fixed
Include a screenshot of the site, show a Mockup or Prototype (Web Page) that addresses (fixes) the problems identified

Video/Transcript: IMS222 37 - Creating a multiple page HTM site

(watch this video in a new tab or window)

Single web pages are OK but it's more fun to create an entire site. There are a number of ways to do that. The silly way is to recreate the menu system on every single page. Let's not do it the crazy way. You can also use an htaccess file to pre-pend and post-pend your web pages with a header and a footer. A third way is to use PHP to 'include' or 'require' another page. We'll try both of these methods in this class. We'll cover the how-to later, I just want you to start thinking about your web pages on a larger scale, as a web site.

Video/Transcript: IMS222 Photos for the Web

(watch this video in a new tab or window)

Every web designer needs to understand photos and the web.

The file size for photos need to be relatively small and need to fit on the page.

This is a photo taken on a Nikon D5500 at 6000 x 4000 which means it's 6000 pixels wide by 4000 pixels high; which is way too big for the web.

The RAW version is over 30MB and the JPG version is over 13MB.

A good general rule is to keep web photos below .5MB.

To do that, we'll keep the width of our images no more than 1024px wide.

Before manipulating the image, I'm going to duplicate (or copy) it and rename it.

I'm using a basic image editor called Preview that comes with a Mac, to change the size of the web version of the image.

Tools...Adjust size

If I change the size to 1024, you can see that it will be 114KB or .1MB.

If you uncheck the 'scale proportionally' option, you could stretch the image.

Please, please, please, don't use stretched images.

Let's put the image on a web page, by connecting to the server, copying the image,
and adding html to a web page to display it.

Just for fun now let's create a photo that's 1024 x 200.

First I'll open up the image with Preview, command c to copy it.

I'm going to use a program called Pixelmator to do the sizing.

File...New...enter in 1024 and 200...paste...zoom out...drag the corners to resize it
Some programs stretch images when you do this, Pixelmator does not.

...zoom in, and move it to where you want it

...ok...File...Export

I like jpg's for photos, this one is less than 58KB, tiny.

Let's put it on a web page, and voila, there you go.