Porter Airlines Samples/Download working files

Download files here: https://drive.google.com/open?id=0B9_Ip9wcDnYManowQjg5Z0tBRms
Sample animations click here:  https://vimeo.com/28724239

Butchers & Bicycles MK1-E Video Review - Innovative Cargo Electric Bike

Click here to download files for Butchers and Bicycles case study: https://drive.google.com/open?id=0B9_Ip9wcDnYMTENFRWVjOWhfcFk

ISU Topics

Racism-Sean M.
Bullying-Daniel P.T.
Poverty-Joshua M.
Pornography-Mark M.
Illegal Immigration-Fred M.
Violent Crimes-Kevin K.
LGBT Rights-Lyndon A.
Anti-Semitism-Brian H.
Feminism-Shaun C.
Cyberbullying-Sarah H.
Human Trafficking-Prudence V.
Child Labour-Caryn R.
World Hunger-Matthew O.
Torture-Joshua L.
Kpop (Specail Interest)- Taehyun
Global Climate change- Yimming Oz

Final ISU Project

The Final Assignment: ISU  

You will plan and design a Website on a chosen Social Justice Issue.

 

ISU Presentation  begins June 7th to  9th 

Your Design should include the following components:

1. Users and Expectations. A discussion of a typical user to the website and how the typical user expects to use the website.
2. A Mission Statement. Every good website design process will begin with a mission statement. Click here for more info
3. Background Information. Answer some basic questions about the site such as demographics, design concepts etc.
4. A Heirarchy Chart (Flowchart). Use a simple flow chart to define how the site will be laid out. Describe the information architecture and the hierarchy of the site through a diagram. Click here for more info
5. A Mockup. A Mockup is a Photoshop or a drawn replica of the site design. AMockup is a working copy of the proposed site design.
6. Homepage and min 4 to 6 additional HTML pages: with the following elements: 
                              a) Javascripts (ie. Password, rollovers, etc...)
                              b) jQuery (ie. Slide show, transitions, etc... )
                              c) CSS
   
   
   Timeline and Due dates:
   a) ISU Proposal ( Due: Tuesday May 23rd)
   b) Mockup (photoshop) (Due: Monday May 26th)
   c) Homepages  and links (Due: June 6th)
       -Javascripts
       -jQuery
       -CSS
   

School Website Challenge

Challenge:  Due date: April 12th

Create and build a Website for the following Marshall McLuhan CSS Departments and Clubs:

Departments:

1)Religion Department
2)Social Studies Department
3)Physical Education-Prudence
4)French Department-Shaun C.
5)Communication Technology
6)Life Skills Department
7)Mathematics Department-Brian
8)Science Department
9)English Department-Caryn
10)Visual Art Department-Oz
11)Drama Department-Lyndon
12)Geography Department-Justin
13)Guidance Department-Sarah
14)Library Department-Fred
15)Business Department
16)Co-op Department-Co-op
17) Social Services Department
18) SHSM programs
19) Music Department-Joshua M.


Clubs:

1)Badminton Club
2)Games Club-Daniel
3)Chess Club-Matthew
4)United Nation Club-Kevin
5)Music Council-Yimin
6)Drama Council
7)Tech Crew-Tyler
8)Yearbook Club-Sean L.
9) Track and Field-Mark
10) Cross Country
11) Hockey
12) Field Hockey
13) Ultimate
14) Swimming-Taehyun
15)Basketball
16)Student Council
17)Weight Room-Jebriel
18) Soccer-Joshua P.

Other:
1)Global Village Store
2)Cafeteria Services
3)Administration
4)Peer Ministry

Project Parameters:
1)No restrictions on Native Applications
2)Must have an example of Javascripts, CSS
3)Min 4 HTML pages with links, rollovers on buttons
4)jQuary Gallery example
5)Appropriate content/images

Creating Forms in Dreamweaver

Creating Forms in Dreamweaver

---

Before beginning the lesson on forms, please have any 4 multiple choice questions already made up. Each question needs to have four responses. If you would like to recreate my M&M quiz as practice, the questions can be found at the M&M quiz website.

A second comment before we begin with the terminology. Because of the exercise we are creating, I am having you put each question in a separate form. Depending on your reasons for creating a form, you may want to put all of the questions in a single form tag.

---

Terminology

Before we begin creating our tables, there is some basic terminology you will need to know.
Input - allows you to input data into your HTML document. There are many different types of input.

We will examine 5 here, so that you know and understand the differences between them. We will only really be working with two of them, the radio and the text.

TYPE = Radio- Radio buttons allow the users of your form to select only 1 response for a multiple choice question.

TYPE = Checkbox- Check boxes allow the users of your form to select multiple answers to a single question.

TYPE = Selection List- create a (selection) list of possible responses to a question. These are the type of input where there is a response shown, and a drop-down list for the user to select.

TYPE = Text- Text boxes enable the user to enter a single line of text.  An example would be asking a person to enter his or her name or address.

TYPE = Textarea- TEXTAREA boxes are similar to TEXT boxes, except they allow the user to enter multiple lines of text.  An example where TEXTAREA boxes are used is in the comment section of a form.

TYPE = Button- Creates a button. Types of buttons include submit, reset, or just button.

VALUE - the value of the response chosen by the user. In other words, the users response to your question.
NAME - is the name of the question or the name of the input.

 JAVASCRIPT IS CASE SENSITIVE. That means that a word like Donna is different than donna or DONNA. Be careful here and minimize the number of times you use capital letters. That will make things easier for you.

---

Inserting a Form Into Your Document

To insert a form into your document, from the menu bar, select INSERT >> FORM. There will be a red-dashed, retangular box on your screen. We will be typing the contents of the form into this box. Notice the change in the selection properties box.

See the image below.

---

Inserting Text Into a Form

The first thing we will want our form to do is ask the user for his/her name. To create this form, make sure your cursor is inside the red-dashed box. First, type something like "Please Enter Your Name: "

Then from the menu bar, select INSERT >> FORM OBJECT >> TEXT. 

The selection properties box should resemble the image below.

You will also notice a long rectangular box next to your text. This is called a text field.

The box under the words TextField in the left part of the selection properties box is where we will name this input. Naming the input is important because our JavaScript will require the name of the input to process the input. Call the input "input1". Since some students may have long names, let's make the length of the box 50 characters. 

To do this, in the box labeled Char Width, type 50. Your selection properties box should now look like the one below.

Please Enter Your Name: 

---

Inserting Radio Buttons into Your Form

To ask the multiple choice question, we will want to use radio buttons as our method of input.
Because of the way the JavaScript is written, we will be putting each question into a different form.

Step 1: From the menu bar, select INSERT >> FORM.
Step 2: Type in your question. I'd suggest numbering your questions to make them easier to read. For example: 1. What is the newest color M&M?
Step 3: From the menu bar, select INSERT >> FORM TYPE. Select Radio as your option. The selection properties box should resemble the one below. You can leave the name of the input as radiobutton if want. Leave the Initial State as Unchecked. Checked would mean that the answer was automatically pre-selected.

1. What is the newest color M&M?
 Yellow

Step 4: Add three more radio buttons and three more responses. When finished, your first question should resemble the form below.

1. What is the newest color M&M?
 Yellow
 Green
 Red
 Blue

Repeat the steps above for the other 3 questions of your quiz. When done, save the file to your disk. We will be using this file again when we create the JavaScript to grade the quizzes.

---

Buttons

In order for our form to either be sent to our JavaScript, we need to have some way of sending the information. This is the purpose of a button.
Step 1: Insert a new form into your webpage.
Step 2: From the menu bar, select INSERT >> FORM OBJECTS >> BUTTON.

Your selection properties box will resemble the one below.

Step 3: Under Action, select None. Notice your button will now say "Button" instead of Submit.

Step 4: Under Label, type something like Ready To Be Graded.

Step 5: Click on the little pencil on the very right part of the selection properties box, directly under the ?. This is the EDIT box. You will be presented with the box below. Type in the following. onclick="first()" Include the double quotes when you edit the input tag. This is what will call the JavaScript function we will be writing in the next lecture.

When you are done, you should have a button like the one below.

 

---

Assignment 1: Create your own 4 question self-grading multiple choice quiz. If you are creating a mathematical quiz that involves fractions, formula's or anything that requires the questions or answers to be images, use Snag-It to create an gif or jpg file for each statement. Then just input the image instead of typing the question or answer.

Assignment 2: Create your own 4 question self-grading fill-in-the-blank style quiz. The assignment is basically the same as the one above, except your input fields will be of type text instead of radio. To see a sample quiz, go to the fill-in quiz I have at the website.

Cereal Box Packing and Website Target Audience Assignment

DESIGN: CEREAL BOX PACKAGING and WEBSITE

Challenge:

Design the packaging and website for a brand new cereal that’s about to hit the market. Your packaging design should be original and eye catching while conveying what the package contains. You will be responsible for developing the name of the cereal, font, and graphics used to promote the cereal.

NB: Your design must target one of the Psychographical grouping. Please refer to the article by William Meyers for more details.

Your design must include brand and product name, graphics and product contents. Consider the size, packaging type, and all six sides seen while on the shelf or table.

(Dimensions of cereal box packaging should not exceed 30 cm tall, by 20 cm wide, by 5 cm deep and Website dimension to be 1024 X 768 and 72 dpi)

Submissions should include artwork (hand or computer generated) and a short paragraph that details your design process and reasoning for design elements included. Any photographs used in your design must be clearly credited to their creator(s) on your board.