Gif or jif?

According to the Atlantic, via Gizmodo, it’s pronounced “jif” like the peanut butter. Because the folks at CompuServe, who invented the format, said so.

But I hear people say “gif” with a hard “g” sound all the time. That’s the way I’ve pronounced it over the years. I have been wrong all along.

Tuesday, Sept. 25 – Optimizing Images

Hi everyone,

If you weren’t here, here’s a brief recap:

• Returned your corrected Resume assignments.
• Talked about some common errors on the assignments – not many! You guys did great work!
• Demo’d optimizing images.
• Started the Scuba/100k assignment.

To catch up:

• Read Chapters 21 and 22 of your text, Learning Web Design. Practice optimizing some images using Exercise 21-1, p. 525, and Exercise 21-2, p. 528-530.
• Go to the Scuba/100k assignment page and read it over.
• Download the files you’ll need to do the assignment.
• Download the Handout for the assignment and print it (though it says exactly the same thing as the assignment page, so you don’t have to download and print it if you don’t need it.
• Download and print an Optimization Cheatsheet.

Hope to see you on Thursday!

The 100K Scuba Optimizing Assignment

In this assignment you are given some text and some graphics files. Your job is to make a multipage web site out of these files. You must use all of the graphics files and the site must be under 100K. Decide how large you want to make each of the images and what is the best way to compress them. (JPEG, GIF … )

You will need a number of files for this project.

I’ve put the files you’ll need in a zipped folder, which you can download here.

They are all PSD or Illustrator files so you will need to convert them.

Here’s a list of the files

PSD

• diver.psd
• sand_water.psd
• deepdown.psd
• fish2.psd
• beach.psd

Illustrator

• scubadiver
• scubaequipment

Text

• divertext.txt

This assignment will help you become more familiar with Adobe Photoshop and Illustrator.

You will be graded on these criteria:

• Code Structure (paired tags – html, head, title, body, etc.) – 5 points
• Alignment of text and graphics on page; overall placement of images and text; color choices of text and background – 3 points
• Use of all 7 images supplies – 7 points
• Optimized all images appropriately – 3 points
• Use of image source tag with attributes for all images – 2 points

Here are links to some sample pages:

• Sample 1
• Sample 2
• Sample 3

Week 4 Recap – Putting it all together

This week we finished up and critiqued our resumes and finished up Web Gazette.

In order to do that we had to learn about laying out web pages using CSS and HTML. The basics of how to do that are in the slide decks from this week, below.

Next week

We’ll start a new assignment – Scuba! You’ll learn about optimizing images for the web.

Background Images

Using absolute positioning for layout

Centering an HTML Page

Elements are Boxes, with margins and more.

Week 3 Recap – Generic Elements, Google fonts and much more!

What we did

We finished Web Gazette Stage 2.

We started the Resume assignment.

We learned some stuff – the slide shows are in the two posts below this one, so scroll down.

What’s coming up

Your HTML resume is due on Tuesday, Sept. 18. You’ll have a chance to upload your assignments and test them. A critique will follow at about 6:00.

After that, we’ll have quiz-like activity. I’ll put you in groups to research some questions about HTML and web design. You’ll be able to use your text, notes and the internet.

Here’s a recap of what you should have read in the text by now:

• Chapter 1
• Chapter 2
• Chapter 4
• Chapter 5
• Chapter 6: Adding Links, pages 95-113
• Chapter 11: CSS Orientation, pages 207 – 214
• Chapter 12: Formatting Text, pages 225 – 243
• Chapter 13: Colors and Background, pages 265-278

Slide Deck for Sept. 13 discussion

CSS review + fancy bullets, email links, and centering your page.