HTML Web Design - Final Day

*You will have a half hour to make any last minute changes to your projects...NO Exceptions. At 9:00, I will copy your files to a new location and we will begin presentations.

Agenda

1. 9:00 AM: Turn in projects
2. Present/Evaluate
1. Groups will present their sites by clicking through each page and by answering interview questions from the client (questions are listed below). Students that are listening to the presentation will be filling out an evaluation that measures how strongly they agree with the presenters answers (besides the last question).
   
2. Questions for the presenter:
1. What makes your site unique?
2. Why will users want to stay on your site?
3. What about your home page makes it evident that you are selling computer products?
4. What about your site is appealing to teenagers?
5. How does your logo reflect the mission of the company?
6. How easy is it to locate a PDA?
7. What element/feature of your site are you most proud about?
   
3. Peer evaluations
1. Each student will be given the chance to evaluate their team members performance/contribution to the overall project.
   

Multimedia - Movie Trailer

Project Details:

1. Team Roles Notes
• Description: Powerpoint/lecture on multimedia team roles.
• Delivery: Google Doc
  
2. Assign Group Roles/Create Company Name
   
• Description: Get together in your groups and discuss who will take on each specific role.
  
• Delivery: Email
3. Theme
• Description: Come up with a theme/genre for your movie.
• Delivery: Email
  
4. Story Board
   
• Description: Use Inkscape or Paper to create a story board of your movie trailer. You should have 1 "page" for each image/scene/clip. Each page will have a description of what's taking place for that clip.
  
• Delivery: Save into your team's network share or hand in to me (if you're using paper).
  
5. The Trailer
• Description: The following is a list of minimum requirements for your project. Solely meeting the minimum requirements will earn your team a low B!
1. Production company logo (must have an animated element to it)
   
2. Live video
   
3. Audio soundtrack (this can be existing music or your own)
4. Voice-over narration
5. Save the final output to .wmv format.
   
6. Must be at least 2 minutes long.
   

Role Descriptions/Responsibilities:
**The role assigned to you is your primary responsibility, however, the team will work on all tasks collaboratively. For example, the whole team may contribute to the design/creation of the company logo, however, the Graphic Artist has the final say.

1. Project Manager
• He/she must know the project details (listed above) inside and out. The project manager will make recommendations as to what each team member should be working on. The project manager should print out a list of the project details, and check off each item when finished.
  
2. Videographer/Audio Specialist
   
• He/she is responsible for the video/audio recording and editing. This person will schedule and take charge in the management of the team regarding any live audio/video recording.
  
3. Graphic Artist
   
• He/she is responsible for the company logo, movie title logo, and any other media that is created in a graphics program such as GIMP and/or Inkscape. This person is also responsible for finding and organizing any existing images or video that will be incorporated into the project.
  
4. Quality Assurance Analyst
• He/she is responsible for seeing that the project meets/exceeds the project details. He/she will make sure that there aren't any glitches, that everything is synchronized properly, spelling/grammar is correct, text is readable and symmetrical, and anything else that has to do with the quality of the final production.
  

HTML - Final Project

Project Details:

1. Website Production Notes
• Description: Powerpoint/Notes
  
• Delivery: Google Doc
  
2. Client Interview
• Description: Powerpoint/Question & Answer
  
• Delivery: Google Doc
  
3. Define Roles/Team Name
• Description: Team members decide on who will take on the various roles. Team will come up with a name.
  
• Delivery: Email
  
4. Website Theme Paragraph
• Description: Based on the interview questions, your team will type a paragraph describing the type of website the team is building.
• Suggestions: Each team member can pick one of the categories from the interview (goals and target audience, content, design req., or delivery req.) and write a sentence or 2 on that category. Then, combine the teams work into 1 paragraph.
  
• Delivery: Google Doc
  
5. Define the Structure of your Website and Project Items
• Description: As a team, answer the following questions.
1. What pages are needed for the website?
2. What should the pages be named?
3. What should the folder structure look like?
4. What should the folders be named?
5. What are the hexadecimal values for the colors the site will be using?
6. What are the font names the site will be using?
• Delivery: Google Doc
  
6. Flow Chart
• Description: You will create an Inkscape Document with a flowchart for your website. The graphic will include every page that your website will use, along with the names of each page. The graphic will show the hierarchy of how the pages are linked to each other.
• Delivery: Save into your team's network share in the "Resources" folder.
  
7. Develop 1 Visual Comp./Mockup
• Description: Your team will use GIMP and/or Inkscape to create a graphical design of the general layout of your website. Be sure to use the same fonts and colors that you defined in the earlier stage.
  
• Delivery: Save into your team's network share in the "Resources" folder.
  
8. The Website
• Description: The following is a list of minimum requirements for your project. Solely meeting the minimum requirements will earn your team a low B!
1. All pages must be XHTML compatible.
2. All links to images and pages must be relative paths.
3. 1 CSS file
4. 1 "JR Computers" logo
5. 1 Team logo
6. Pages will use containers for the layout.
7. 1 account registration page (this page will have a form and submit button)
8. Advertisements displayed on each page.
9. Each page must have at least 3 tables.
10. Each page must have a title in the "title" tag.
11. Contact information for JR Computers must be included on each page.
• Delivery: Save into your team's network share.
  

Role Descriptions/Responsibilities:
**The role assigned to you is your primary responsibility, however, the team will work on all tasks collaboratively. For example, the whole team may contribute to the design/creation of the logo, however, the lead designer has the final say.

1. Project Manager
• He/she must know the project details (listed above) inside and out. The project manager will make recommendations as to what each team member should be working on. The project manager should print out a list of the project details, and check off each item when finished.
  
2. Lead Designer
• He/she is responsible for the layout, colors, and content of the website. He/she will maintain the consistency across all pages in the site. He/she is responsible for the logo, and all graphics used in the site.
  
3. Lead Tester
• He/she is responsible for the functionality of the whole website. This means, all the links work, each page references the style sheet properly. All links are using relative paths. All pages are XHTML compliant. All project work conforms to the project details.
  

HTML - ASP Practice

You will be doing some ASP Exercises. Read the Directions, take a look at the exercises you will be doing, and then click on the link to start.

Directions:

1. Save your work into "ASP 01 - Practice" in your network share.
   
1. Name your files something similar to the title of the exercise (i.e. writetext.asp)
   
1. Upload your files to the web server (via FTP) into the "Practice" folder.

Exercises for you to do:

1. Write text using ASP
2. Format text with HTML tags
3. Create a variable
4. Create an array
5. Looping through HTML headers
6. Time-based greeting using VB Script
7. Date and time
8. Get the name of a day
9. Get the name of a month
10. Uppercase or lowercase a string
11. Trim a string
12. A random number
13. Return a specified number of characters from left/right of a string
14. Replace some characters in a string
    

Start

Multimedia - Movie Maker Lesson

Overview:

You will be creating a "movie" on one of the following topics:

1. Aspect ratios
2. Progressive vs. Interlaced
3. NTSC, PAL
4. DV, SD, HD

You will use the notes that you have taken on the topic, combined with more in-depth research of the topic via the web.

Objectives:

1. Hands-on experience with Windows Movie Maker.
2. Deeper understanding of a key "video production" topic.
3. Usage of GIMP, Inkscape, and Audacity as part of the movie production process.

Specifics:

1. Research your topic and type your findings into a Google Document.
1. Include any pertinent/interesting information (don't need to get too technical)
2. Name your document the same name as your topic.
   
3. Share the document with me.
2. Use GIMP and/or Inkscape to create Opening Screen(s) and any other pertinent screens.
3. Include pertinent media (images, sounds, video) from the web.
4. Including "live" audio/video that is recorded by you will receive extra credit.
   
5. Save files in your network share:
   
1. "Video 02 - Video Lesson"
   
6. Include as much content as you feel is necessary for your topic given the time-frame for this assignment.
7. Your final file should be saved as .wmv format.
   

Multimedia - Audio Quiz (for reals)

1. Put your notes away.
2. No talking.
3. When you are finished here are your options:
1. Sit quietly
2. Take a typing test
3. Mess around with GIMP or Inkscape
4. Start quiz
   

HTML - Create a Registration Form

Overview:

You are designing a school enrollment registration form. The form should look clean and professional. An ICS logo will be provided for you in .xcf (GIMP) format.

Objectives:

This assignment will give you practice creating a form and formatting it in a table. **You will need to think about each input field to determine what type of input control should be used.

Directions:

1. Create an HTML file in V.W.D. and save it into "Forms 02 - Registration Form".
2. Open ICS.xcf in "Forms 02 - Registration Form/Resources"
1. Edit the photo however you want it to look, and save the finished photo as ".png" format.
2. Save the photo into "Forms 02 - Registration Form/Images".
3. Display the logo somewhere on your web page.
   
4. Your form will have the following input fields:
1. First Name
2. Last Name
3. Nick Name
   
4. Address
5. Country of Origin
   
6. Male or Female
7. Birth Date
8. Status (Enrolled, Graduated, Not Enrolled, Withdrawn)
9. Dual Citizen

Multimedia - Add Audio to an Image

This project will give you practice with Audacity and a little creativity.

1. Find an image (that you will be adding sound to)
2. Save the image in "Audacity 04 - Add Audio to Image"
3. Look for audio sounds to go along with your image.
4. Save the sounds into "Audacity 04 - Add Audio to Image"
5. Use Audacity to combine the sounds.
6. The Audacity project must have 3 or more tracks (3 or more different sound clips)
7. Export the Audacity project as a .WAV file.
8. Use Powerpoint or Windows Movie Maker to display the image and insert the WAV file.

Multimedia - Practice Quiz on Audio

This quiz is designed to get you thinking about the lecture from last week, and yesterday's computer based lesson.

Instructions:

1. Take the quiz.
2. Review the questions that you missed on the result screen.
3. DO NOT TAKE THE QUIZ AGAIN YET!
4. Look up your notes to see why you missed the ones that you missed.
5. After you locate the correct answers, then retake the quiz.
1. **do not refer to your notes when you retake the quiz.
6. Repeat steps 3-5 until all answers are correct.
1. You will get full credit for the assignment when you get all the answers correct.
   

Start

Multimedia - Internet Audio Analysis

I shared a readonly google spreadsheet with you named "Internet Audio Analysis".

You will save your own copy of this spreadsheet, and share it back with me when you are finished. This is due by the end of class.

Instructions: (Glencoe/McGraw Hill Activity)

Background: It is important to understand how sound can be used effectively to enhance multimedia presentations and Web sites. When used effectively, sound enhances your presentation's message. This audio analysis will help you discover ways that audio has been used to enhance presentations and Web sites. You will then be able to apply these techniques to your multimedia presentation.

Directions: With your teacher's supervision, locate 8 Internet sites that include one of the following types of audio files: music, vocal narration, and sound effects. Complete the chart below by listing the site address, the company or person who created the site, the type of audio, the audio's suggested use, and your analysis of the audio's effectiveness.

**You must do a total of 8 different sites. I provided the site addresses of 5 to get you started.

HTML Web Design - Redesign a Web Site

Project Overview:
Your job is to create a new web site for the company of your choice. You can use the content from the company's website, but you must create a new layout, logo, and color scheme.

Project Objectives:
This project will exercise the skills you have gained using The GIMP, combined with your prior knowledge of XHTML and CSS plus your own creative touch.

Project Details:

1. Create a new Logo for your company.
2. Pick a new color scheme.
3. Create a CSS file to store all of your styles/formatting.
4. Create a new (modified) layout for the web site.
   
5. Copy/Paste content and images from the original web site.
6. Your site must have at least 3 web pages.

Project Due Date:

• 15 Nov. 2007 - The last day we will be working in class on this assignment is the 14th.
  

You will be graded with the following criteria:


Day 1:

1. Pick a company/web site.
1. The site must be approved by me.
   
2. Design a new logo for the company.
1. You may want to sketch the logo on paper first.

Day 2:

1. Continue working on your logo.

Day 3:

1. Finish logo!
2. Begin laying out your home page.
1. Create a css file
1. All formatting must be stored in here.
   
2. Add your logo to the home page.
3. Copy/Paste text from the original website to use for your content.
4. Save image(s) from the original website to your network share and display the image(s) on your home page.

Day 4:

1. Finish anything from the previous days that are not complete.

Day 5:

1. I will assist with any issues you may be having.

Day 6:

1. Evaluate progress and make recommendations.
   

HTML - Image Maps

1. Create a new graphic with The GIMP
2. Add a circle, rectangle, and polygon to your graphic
3. Add text on each shape with the name of a search engine.
4. Create an HTML file
5. Display your graphic on the page
6. Add an image map to your graphic, linking each shape to the search engine specified.
7. Save your work into: "Graphics 08 - Image Map"

Multimedia - Detailing Your Person

Save your work in: "Blender 02 - Model a Simple Person"
Name the file: "detailed person.blend"

Start tutorial

Multimedia - Simple Model of a Person

Save your work in your network share under:
"Blender 02 - Model a Simple Person"

Name the file:
"simple person.blend"

Begin tutorial

HTML - "Exploring Color" Quiz

Click here to start the quiz.

**After you finish the quiz, if you have not finished your "Duplicate a Logo" assignment, please finish. This assignment is due at the end of class.

HTML Web Design - Duplicate a Logo

1. You have 10 minutes to search for a logo.
• Save the logo into your network share.
2. The logo must be approved by me.
3. Begin duplicating the logo.
• You must use the exact color values.
• Save the new logo into your network share (Graphics 07 - Duplicate a Logo).
  

Multimedia - First 3D Model

1) Start with "Blender 3D: Noob to Pro/Beginning Tips"

When you finish, save your file into your network share (Blender 01 - Intro Modeling) as "beginning tips.blend"

2) Continue with "Blender 3D: Noob to Pro/Quickie Model"

When you finish, save your file into your network share (Blender 01 - Intro Modeling) as "quickie model.blend"

3) Simply read: "Blender 3D: Noob to Pro/Mesh Modeling"

Learn to Model

Multimedia - 3D Animation

Today we will get some hands-on experience working with a 3-D animation program! ...Blender.

We are going to jump into the program right away with some tutorials. It is VERY important that you read and follow every step of the tutorial. This tutorial will get you familiar with the Blender Interface.

If you run into an issue, ask your neighbor or ask me for help.

Let's get started!

1. Open Blender ... Start -> All Programs -> Blender Foundation -> Blender -> Blender
2. Open the following link in a web browser:
1. Tutorial
3. Start with "Blender 3D: Noob to Pro/Blender Interface"
4. End with "Blender 3D: Noob to Pro/Other Windows"
   

HTML Web Design - "Color" Questions

*Answer the following with complete sentences...

1) How are colors displayed?

2) What are the Red, Green, and Blue values in the following HEX notation? #32B5B3

3) What is the smallest HEX value?

4) What is the maximum HEX value?

5) What is the HEX value for "Gray"?

Multimedia - Test

Click on the following link to begin the test:

Start test

Multimedia - Image Collage

You will be using The GIMP and/or Inkscape to create an image collage.

• The collage can be about any topic.
• Sports
• You
• Whatever
  
• Include a Title at the top of your collage.
• Save your work into the "Practice 03 - Image Collage" folder in your network share.

These are the only rules. The assignment will be graded as a regular homework assignment. Have fun with the assignment! It should be nice and relaxing after the test.

HTML Web Design - GIMP Buttons

1. Finish your 4 navigation buttons.
1. Learn how to crop your image.
   
2. Format the navigation buttons in an HTML table.
3. Create a page for each button.
4. Add your navigation buttons to each page.
5. Link each button to each page.
   

Multimedia - Graphics Exercises

Complete the following graphics exercises for extra credit to be added to your test score:

Provide me with the original(s) and the modified graphic.

• Rotate an image
• Crop an image
• Adjust brightness or contrast in an image
• Add color to, enhance color of, or recolor an image
• Soften or blur sections of an image
• Add text to an image
• Combine two images into a new image

*Each exercise will earn a half percentage point of extra credit. If you do all 7, you will earn 4 percentage points of extra credit.

HTML Web Design - Create Buttons in GIMP

Objective:

You will use the tools and skills you have learned thus far in "The GIMP" to create a navigation menu.

Details:

• You will be creating 4 buttons.
• The text for the buttons will be your choice.
• Each button should have the same style, but display different text.
  
• Your button must contain at least 3 layers (not including your text layers).
• Save your GIMP ".xcf" file into "Graphics 04 - Create Own Button" in your network share.
• Export each button to ".jpg" format, and name appropriately.
  
• Create an HTML file and display the buttons in a table (either horizontally or vertically)
• Save the ".htm" file into the same "Graphics 04 - Create Own Button" folder.
  

**The finished menu should be crisp, clean, consistent, and creative.

Multimedia - Test Review (ch. 5, 6, 7, 8)

Today we will be reviewing for the test on MONDAY.

If you are absent on Monday, you will have to make up your test after school!

Click to begin review

HTML Web Design - In Class Assignment 11

GIMP Tutorial

Tutorial Instructions

• Carefully follow each instruction of the tutorial.
  
• Click "next section >" at the bottom-right of each screen to move through the tutorial.
• You can use any image for this tutorial (i.e. a picture of yourself)
• Stop when you get to the section: "Working with Text and Layers"
• Save your finished file to the folder "Graphics 02 - GIMP Tutorial" in your network share.
  

Start Tutorial

Multimedia - Project 04

Create a flyer!

Description: You will be using the knowledge you gained in our lecture on "Text", combined with the open-source software applications: Inkscape & (optionally GIMP for filters/effects/image editing) to create a flyer.

Ideas for flyers:

• Concert
• Sporting Event
• Parade
• or whatever you can think of

You will be graded on the following:

HTML Web Design - Project 02

"World of Widgets" web site

(details are in "in class assignments" label)

HTML Web Design - Project 01

"About Me" Web Page

(details are in "in class assignments" label)

Multimedia - Project 03

GIMP - Multimedia Speedster Advertisement

(details are in "in class assignments" label)

Multimedia - Project 02

Multimedia Catalog Website

(details are in "in class assignments" label)

Multimedia - Project 01

"About Me" Powerpoint Presentation

Multimedia - Lesson 09

Quiz on Raster vs. Vector graphics

Start quiz

Multimedia - In Class Assignment 07

Swedish Flag Inkscape Tutorial

Start Tutorial


**Extra Credit

• Install Inkscape at home.
• Inkscape
• Find any Inkscape tutorial.
• Complete the tutorial.
• Email me:
• The final file.
• Url to the tutorial.

Don't forget to study for tomorrow's quiz on vector vs. raster graphics!!

HTML Web Design - Homework Assignment 06

What is your widget going to be?

Multimedia - In Class Assignment 06

Gimp Glowing Text / Animation Tutorial

Click on the following link to start the tutorial:
Start tutorial

HTML Web Design - In Class Assignment 10

"World of Widgets" - Project 02:
Project Overview

Multimedia - In Class Assignment 05

Create an Animation with GIMP!

A relatively easy way to create animations is to use a graphics program to create an animated ".gif" file.

Before starting, I would like you to read through the following article:
.gif file format

**Send me an email when you finish reading this, stating "I have finished reading the article."

Now that you are familiar with what a .gif file is, you will be creating your own animated gif.

1. Open GIMP.
2. Create a new Document.
3. Make sure the "Layers" dialog window is open.
4. Each layer that you create represents a "frame" in your animation.
5. Animation is played from your bottom-most layer, to your top-most layer.
6. To preview your animation, go to: Filters -> Animation -> Playback
7. You can delay the transition of a frame by typing (3500ms) in the "layer properties"
8. Your animation must have at least 10 frames.

Examples of some animations:

1. Print out your name, with one letter on each frame.
2. A stick figure skateboarding.
3. Stick figure playing the guitar.
4. A frowning face that morphs into a smiling face.

The Best Flash Game Ever

Line Rider

HTML Web Design - In Class Assignment 09

Practice CSS positioning by following the instructions in this document:

More CSS Positioning Practice

Multimedia - In Class Assignment 05

Research an Operating System Other than Windows XP

Create a Google document named “Operating System – Research”

Answer the following questions:

1. What is the name of the Operating System?

2. What is the company that sells the Operating System?

3. What was the 1st release of the Operating System?

4. What is the latest release of the Operating System?

5. How many lines of code are in the Operating System?

6. What programming language is the Operating System developed with?

7. What are 3 features of the Operating System?

8. How much does the Operating System sell for?

9. What are the minimum hardware requirements to run the Operating System?

10. Name 2 ways the Operating System is similar to Windows XP, and 2 ways that it is different.

Multimedia - Lesson 08

We will begin class with your 1st test. Please click the following link to start:

Start test

HTML Web Design - Lesson 11

We will begin class with your 1st test. Please click the following link to start:

Start test

HTML Web Design - In Class Assignment 08

Practice CSS by working on the tutorials at the following link: (link will only work at school)

More CSS Practice

HTML Web Design - Homework Assignment 05

What is CSS and how does it benefit you as a web developer?

HTML Web Design - Lesson 10

Intro. to CSS

• CSS stands for Cascading Style Sheets.
• Styles define how to display HTML elements.
• Styles are normally stored in style sheets.
• External style sheets are stored in CSS files.
• External style sheets can save you a lot of work.
• Use external style sheets!

What is a formal definition of CSS?

• Language used to describe how an HTML document should be formatted.
• Examples:
• Setting the font name.
• Changing font sizes.
• Formatting table or container borders.
• Positioning html tags.

What is the main reason I should use CSS?

• It enables you to change the appearance and layout of ALL the pages in your web site, just by editing one single CSS document!

Where can the styles that I create be stored?

• 3 locations:
• External style sheet (recommended for most instances)
  
• Internal style sheet (use when appropriate)
  
• Inline style (use when appropriate)

What is the precedence if you are using all 3 locations for your styles?

• Highest precedence
• Inline style
• Next precedence
• Internal style sheet
• Least precedence
• External style sheet

How can I reference an external style sheet?

• <link rel="stylesheet" type="text/css" href="mystyles.css" />
  

Multimedia - What's my grade?

This link will only work if you're logged on to the network at school!

What's my grade?

HTML Web Design - What's my Grade?

This link will only work if you're logged on to the network at school!

What's my grade?

HTML - Software

Microsoft Visual Web Developer Express

1. Click on the following link to download and install:
1. http://msdn.microsoft.com/vstudio/express/vwd/
   

Multimedia - Software List

Gimp (this is a 2-step installation)

1. Click on the following link:
   
1. http://gimp-win.sourceforge.net/stable.html
2. Download and Install:
1. GTK+ 2 Runtime Environment
2. The GIMP for Windows

Inkscape

Download Inkscape

Blender

Download Blender

Multimedia - In Class Assignment 04

You are a graphic artist for a computer company. Your assignment is to design an advertisement for a multimedia computer.

**Project is due Monday 17-September.

You will be using GIMP to complete the assignment.

1. Name of the computer is: Multimedia Speedster 2010
2. Specifications to include (you must use at least 5)
1. Computer
2. Monitor
3. CD-RW/DVD drive
4. Microphone
5. Keyboard
6. Mouse
7. Speakers
8. ...etc.
3. Your specifications MUST BE real components.
1. You can search for them on the internet.
2. Include the price for each component.
3. Your total price limit is $3500

You will be graded based on the following criteria:

• Logo for "Multimedia Speedster 2010"
• Is it there and spelled correctly?
• Does it look attractive?
• Is it eye-catching?
• Computer components
• Are there 5 or more?
• Is the price listed?
• Are they real components?
• Are they spelled correctly?
• Is the total price under $3500?
• Overall
• Layout
• Presentation
• Effort
  

Multimedia - In Class Assignment 03

Create a Logo with GIMP

Today we will be doing a GIMP tutorial. This tutorial will get you a little more familiar with the layout and tools in GIMP. It will also prepare you for future assignments.

Start tutorial

Multimedia - Lesson 07

Hardware and Multimedia

Lecture/Powerpoint/Notes

We will begin class with a quiz...
Click to Start

Multimedia - In Class Assignment 02

Business Analysis

***don't forget about the quiz tomorrow on chapters 2 & 3***

Background: Many business Web sites market products or services directly to consumers; such sites are referred to as business-to-consumer (B2C) sites. Sites that market to other businesses are referred to as business-to-business (B2B) sites.

Directions: Research 4 business Web sites. Complete the chart below by listing the site address, the company name, and the type of site. For B2C sites, describe the age, interests, or gender of the site's target audience. For B2B, describe the type of company that the business is targeting. List any media components that you find used on the site. Then make one recommendation for improving the site.

**You will be recording your answers on Google Documents

1. Create a new spreadsheet in Google Documents.
2. Name the spreadsheet "Business Analysis" - points will be deducted if this is not named correctly.
3. Your spreadsheet will have 5 column headers:
1. Site Address
2. Company Name
3. B2B or B2C ?
4. Media Components
1. A=Animation
2. G=Graphics
3. P=Photos
4. S=Sound
5. V=Video
5. Target Audience/Recommendation for Improvement
   

Multimedia - Lesson 06

Multimedia and Society

Lecture/Powerpoint/Notes

Multimedia - Lesson 05

The Internet and Multimedia

Lecuture/Powerpoint/Notes

HTML Web Design - Lesson 09

HTML Tables

1. The opening/closing table tags are: <table> </table>
1. The border attribute is used to specifiy a specific size of border for the table.
2. The height and width attributes specify the size of the table.
1. These attributes take either a percentage or a fixed pixel value.
   
2. A table row is represented by: <tr></tr>
3. Table data (column) is represented by: <td></td>
1. Table data can span columns with the colspan attribute.
1. Set the value to the number of columns the table data will span.
   
2. Table data can span rows with the rowspan attribute.
1. Set the value to the number of rows the table data will span.

Example

<table height="100%" width="100%" border="1">

<tr>
<td colspan="2">Banner goes here</td>
</tr>

<tr>
<td rowspan="2">Side links go here</td><td>Content here</td>
</tr>

<tr>
<td>Content here</td>
</tr>

</table>

Result

HTML Web Design - Lesson 08

XHTML - Extensible Hypertext Markup Language

• short definition - "a stricter and cleaner version of HTML"

Why XHTML? ...what's the goal?

• to write code that is clean, well-formed, and conforms to the XHTML standards and elements
  

HTML Web Design - Homework Assignment 04

1) What is XHTML?

Multimedia - Lesson 04

You will continue working on your "web sites" today.

• Please ask or email me if you have questions or need any help.
• All work MUST be saved into the folder: Multimedia/yourUserName
  
• This assignment will be due on Tuesday. (accidentally had Monday on this...sorry!)
  

HTML Web Design - In Class Assignment 07

You will continue working from the HTML Examples tutorials found at:

More practice

1. Create a new folder in your network share for these assignments named:
1. ica07
2. Start with
   
1. "Text formatting link"
3. Do all consecutive links and End with
1. "Jump to another part of a document"

**Look at In Class Assignment 06 for specifics on the naming of your files and general instructions.

HTML Web Design - In Class Assignment 06

Hands-on practice

Click for practice

1. Save your work into "ica06"
2. Start with the link that says: "More paragraphs"
1. Create a new html file in Web Developer Express
   
2. name your file: "moreparagraphs.html"
1. remember to save in "ica06" folder on your network share
3. Type the html code that is in the textbox on the left-side of the tutorial screen.
4. Save your work and view it in a browser.
5. Make sure that it looks like the results that are displayed on the right-side of your tutorial screen.
   
3. Do the same with:
1. "The use of line breaks" - "useoflinebreaks.html"
   
2. "Poem problems" - "poemproblems.html"
   
3. "Heading tags" = "headingtags.html"
   
4. "Center aligned heading" - "centeralignedheading.html"
   
5. "Insert a horizontal rule"- "horizontalrule.html"
   
6. "Comments in the html source" - "comments.html"
   
7. "Add a background color" - "backgroundcolor.html"
   

Multimedia - Homework Assignment 03

Create a web site! (This is due by Tuesday...it must be ready to go)
*this will not be put on the public internet...it will be stored locally within the schools intranet.

Download Kompozer from:
download

You will be using your answers from the last homework assignment as the content for your web pages.

Requirements

1. 6 web pages
1. Index Page (or home page) - this page will link to all the other pages.
   
2. Animation page - this page links back to the index page
   
3. Video page - this page links back to the index page
4. Clip art page - this page links back to the index page
5. Photographs page - this page links back to the index page
6. Music or Other sound files page - this page links back to the index page

For each category/content page you must:

1. Add a link
   
1. to the Site Address that you found for the last homework assignment.
2. the link can be a text link or an image link.
   
2. Add text (or a graphic of the text) to the page that displays the
   
1. Creator/Owner information.
   
3. Add text to the page that displays the
1. Description
4. Add text to the page that displays the
   
1. Suggested Use
5. Embed an example of the media content type.
1. i.e. for animation, your page must have a - flash animation/animated gif, etc.
   

Gmail Account

All students in this class are required to have a gmail account.

• Username is the following format: ics.html.[your first initial and last name]@gmail.com
• example: ics.html.jredin

We will be using Google Documents for taking notes. The notes will be "shared" with me so I can review them.

Multimedia - Homework Assignment 02

Internet Media Catalog

Create a catalog of media resources available on the Internet that you may use for upcoming projects. Locate sites that can supply the following types of media: animation, video, clip art, photographs, music/other sound files. Locate 1 site for each type of media.


Here are the categories in list form:

1. Animation
2. Video
3. Clip art
4. Photographs
5. Music or other sound files

For each category you must list:

1. Site Address
2. Creator/Owner
3. Description
4. Suggested Use

HTML Web Design - In Class Assignment 05

Relative Path Practice

Use the provided files to fill in the "href" and "src" attributes using relative paths to pages and images stored in nested folders.

Multimedia - Lesson 03

We will start class with a quiz. Click on the following link to start:
Click to start the quiz

HTML Web Design - Lesson 07

We will begin class with our quiz. Click on the following link to start:

Click to start the quiz

Practice:
We are going to start using a different text editor for creating our web pages from now on. You are graduating from Notepad into a more useful editor for creating web pages. I will show you the program in class, and install it if it's not already installed.

Here is what you will practice:

Click for practice

Start with the "More paragraphs" link, and finish with "Add a background color". Type in the html code in the left window, save the file as the title of the tutorial without spaces (i.e. moreparagraphs.html) into the "ica06" folder.

HTML Web Design - Lesson 06

Relative Path

• links in the same directory as the page have no path information listed:
  filename
• sub-directories are listed without any preceding slashes:
  weekly/filename
• links up one directory are listed as
  ../filename

Absolute Path

• This is the full path or full url to the file.
• Examples:
• c:\inetpub\wwwroot\index.html
• http://www.mywebsite.com/mypage.html
  

Multimedia - Lesson 02

Today we started presenting our "about me" power point presentations. 10 people presented. We will be presenting the rest tomorrow.

HTML Web Design - Lesson 05

• Learn how to open a link in a new window.
• Practice with google maps.
• Search online for "html text-formatting tags".
• Find at least 3 formatting tags that you are not familiar with.
• You will be using these in today's html page you will be creating.
• Create a new web page called: me.html
• Include on the page at least 1 image of yourself.
• Write a description of yourself:
• Where you are from.
• Where/if you plan to go to college.
• What type of job you want to do.
• Include at least 2 links to your favorite web-sites.
• Make the links open in a new window.
  

HTML Web Design - Homework Assignment 03

Answer the following questions:

1) Define hypertext links in your own words.

2) Where are the following tags positioned on an html page:
<head><title></title></head>

3) What is the difference between a relative address and an absolute address?

HTML Web Design - In Class Assignment 03

Initial Setup
Create 2 new shortcuts on your desktop...

1. network share on the web server
1. \\192.168.1.3\jredin
2. web site root directory
1. http://192.168.1.3/jredin

Open your network share and create 2 new html files. When creating your pages, make sure to include all the default tags necessary for an html page... <html> <body> ...

1. homepage.html
1. This file will have a header level 1 tag with the title: "My home page"
2. Add an anchor tag with a relative address to contactinfo.html
3. Add an anchor tag with a full address to contactinfo.html
1. Full address is: E:\htmlsemester1\yourusername\ica03\contactinfo.html
4. Add an image tag using a relative path to the "smiley face" image in the src attribute.
   
2. contactinfo.html
1. This file will have a header level 1 tag with the title: "My contact information"
2. Add an anchor tag with a relative address back to homepage.html
   

HTML Web Design - In Class Assignment 02

Duplicate the web page displayed on the projector using the tags that we learned in class today.

HTML Web Design - Lesson 04

Introduction

We are going to start off by reviewing the tags that we learned yesterday.

• We will be taking notes in class today, so make sure they are done in google documents and shared with my before you leave class.
• There will be a homework assignment tonight so please check the "html - homework" link.

Today's Lesson - Linking to other Web Pages (notes03 on google documents)

Let's start off with a couple definitions:

Hypertext links - those words that take you from one web page to another when you click them with your mouse.

Attribute - an extra piece of information associated with a tag that provides further details about the tag.

1. The tag for creating a link is: <a>
2. The "a" stands for "anchor".
1. Not only does the anchor tag allow you to link to other pages, but you can jump to a spot (anchor point) within a web page. - hence the name anchor
3. Let's look at an example:
1. <a href="http://www.digg.com">Take me to digg</a>
2. Notice that the anchor tag has an attribute just like the image tag.
1. The attribute is: href which stands for "hypertext reference"
4. The href attribute can point to either a relative address or an absolute address.
1. This will require a whiteboard explanation and hands-on practice.
2. *As a general rule, use relative addresses whenever/wherever possible.
1. This makes it easy to drop your web site on any machine and the links will still behave properly.
   

HTML Web Design - Lesson 03

New tags you will need to memorize:

<html>

<head> - tags that are nested within the head tags (i.e. title) are not intended to be viewed on the page.

<title></title> - this tag contains the text that will be displayed in the title of the browser window.

</head> - the "end head tag" goes right before the "open body tag".

<body> - tags nested within the body tags are in intended for viewing on the page.

<h1 ></h1> - big level 1 heading

<h2 ></h2> - slightly smaller level 2 heading

<h3 ></h3> - little level 3 heading

<hr /> - horizontal rule. this is an empty tag (it doesn't have a separate closing tag)

<br /> - line break. this is an empty tag also.

<img src="" / > - the image tag can load files from anywhere accessible on the local machine/network, or internet

</body>

</html>

HTML Web Design - Homework Assignment 02

Write a paragraph about 3 things a Web Developer should take into consideration when designing/coding a web site.

HTML Web Design - Lesson 02

Definitions:

• I.P. Address
• A unique address that computers use in order to identify and communicate with each other.
• Web Server
• A computer program that is responsible for accepting HTTP requests from clients, which are known as web browsers, and serving them HTTP responses which are usually HTML web pages.
• Web Browser
• A computer program that interprets HTML commands to collect, arrange, and display the parts of a web page.
• *examples of various web browsers are: Apple's Safari, Mozilla Firefox, Opera, Internet Explorer, Netscape Navigator.
  

Demo. method for viewing HTML:
We will look at the "view source" or "view page source" menu command found in browsers to see the HTML for any website.

Media that can be displayed on a web page:

1. graphics
2. sound
3. animations
4. video
5. interactive programming

*The media files remain separate from the web page they are displayed on. HTML commands tell the web browser where to find the media files. We will see this concept today by putting our first image on a web page.

Design considerations:

1. The target device
1. cel phone / pda
2. computer
3. television
2. resolution of the monitor (1024 x 768, 800 x 600, etc.)
3. Target web browser(s)

HTML is not solely rendered to a web browser sitting on a computer. The HTML can be rendered anywhere from a PDA to a Television set. "Your job is to design pages so that they look as consistent as possible across major browsers with their default settings."

HTML Web Design - Lesson 01

What is the internet? - the "network of networks" that connects millions of computers around the globe.

What is HTML? - a language for describing how pages of text, graphics, and other information are organized and linked together.

HTML Web Design - In Class Assignment 01

First HTML Web Page - (after reviewing what HTML is, discussing web browsers, and discussing web servers)

1. Follow along with the teacher to create your 1st web page.
2. Save (publish) your .html file to the web server.
   
3. View the web page in internet explorer.
   

Multimedia - In Class Assignment 01

Introduction Slide Show

Directions: Using presentation software, prepare a simple multimedia slide show to highlight information about yourself. Focus on information that will help your class members get to know you.

Your final slide show must include:

• One title slide
• Four to six slides with the following information
• Information about you
• Information about your school activities
• Information about your hobbies or interests
• Information about your talents or skills that would be useful in a
  multimedia project
• At least two of the following: transitions, animation, photos,
  templates, or clip art
• Once you have prepared your slide show, you will present it to the rest of the class.

HTML Web Design - Homework Assignment 01

Please post your responses to the following statements/question...(use google or another search engine if you need help with your responses)

1) Define Hypertext Markup Language.

2) Name 2 different Web Browsers other than Internet Explorer.

3) What is the function of a web server?

Multimedia - Homework Assignment 01

Multimedia Critique

Directions: You will identify the types and media components of multimedia presentations available on the Internet. Locate 1 Internet site that contains a multimedia presentation. Use the format below to record the Web address, the name of the person or company who created the site, the type of presentation found on the site, the media components of the presentation, and an analysis of the site’s effectiveness. You may identify more than one example of media on a site. Your critique needs to include at least one example of each of the following media components: animated text, graphics, animation, sound, and video.

1) Web address:

2) Name of the person or company who created the site:

3) Type of presentation found on the site:

4) Media components of the presentation:

5) Analysis of the site's effectiveness:

HTML Web Design Introduction

1. HTML - HyperText Markup Language
1. a language for describing how pages of text, graphics, and other information are organized and linked together. (keywords in bold)
2. The Internet - network of networks..."the mother of all networks"
3. "hypertext links" - method to easily cross-reference text on the Internet

Multimedia Introduction - Lesson 01

1. Medium - any means of conveying information
2. Media - plural form of medium
3. "the media" - radio, television, newspapers, magazines
4. Specific media types
1. Text
2. Sound
3. Video
4. Animation
5. Graphics
5. Multimedia - the integration of still and moving images, text, and sound by means of computer technology.
   

Multimedia Class - Welcome!

Welcome to my Multimedia class! I am confident you will enjoy learning multimedia and developing skills that will equip you for future employment and/or your personal enjoyment.

During class, you will be required to take notes and turn them in. I am also requiring a daily blog entry as a means for ingraining concepts learned in class. These will be short entries describing the concept/skill learned and how it was applied in your homework assignment.

Grading Policy (revised)

Quizzes 10%
Tests 15%
Homework/Blog 30%
Project 35%
Class notes 10%

Course Syllabus – at a glance

• Exploring the World of Multimedia
• The Internet and Multimedia
• Multimedia and Society
• Hardware and Multimedia
• Software and Multimedia
• Text – Inkscape, Gimp
• Graphics and Animation – Blender
• Audio / Video
• Multimedia Project Team Roles
• Anatomy of a Multimedia Project

*course outline is from Introduction to Multimedia, www.intromm.sec.glencoe.com

HTML Web Design - Welcome to class!

Welcome to my HTML / Web Design class! I am confident you will enjoy learning web-development skills, and end the course well-equipped for designing and publishing creative web-sites.

This class is highly hands-on and project based. Quizzes and tests will be based off the specific skills learned and applied in class. The format for learning will be tutorial based. The concepts learned in class will be applied to a web-site project that is due at the end of the semester.

I am requiring daily blog entries as a means for ingraining concepts learned in class. These will be short entries describing the concept/skill learned and how it was applied in your homework assignment.

Grading Policy (revised)

Homework/Blog 35%
Tests 15%
Notes 10%
Quizzes 10%
Project 30%

Course Syllabus – at a glance

Your First Web Page
o Understanding HTML and XHTML
o Linking to Other Web Pages
o Publishing Your HTML Pages
Building Practical Web Pages with HTML
o Basic Text Alignment and Formatting
o Putting Graphics on a Web Page
o Custom Backgrounds and Colors
Creative Web Page Design
o Using Tables to Organize and Lay Out Your Pages
o Formatting Web Page Content with CSS Style Sheets
o Creating Print-Friendly Web Pages
Dynamic Web Pages
o Gathering Information with HTML Forms
o Embedding Multimedia in Web Pages
Building a Web Site
o Organizing and Managing a Web Site
o Helping People Find Your Web Pages

*course outline is from SAMS Teach Yourself HTML and CSS.