19
ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Embed Size (px)

Citation preview

Page 1: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

ICC565Designing Interactivity

Stephen Masiclat

Director, Graduate Program in Media Management

Jeffrey Passetti

Adjunct Professor

Page 2: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Syllabus highlights

1 You must have your own laptop computer for this class. Platform/OS does not matter.

2 The syllabus is available on Blackboard (blackboard.syr.edu)

3 There will be several in-class assignments that will factor into your final grade. All of these will be submitted through Blackboard.

Page 3: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Syllabus highlights

1 You must have your own computer for this class. Platform/OS does not matter.

2 The syllabus is available on Blackboard (blackboard.syr.edu)

3 There will be several in-class assignments that will factor into your final grade.

4 The software we use is free:

IE 8 or Safari Google Chrome FirefoxNotepad (PC) TextWrangler (Mac) Filezilla or Fetch or Cyberduck

Page 4: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

No, you can’t use Microsoft Word to make web pages

Let me show you why

Page 5: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Syllabus highlights. . .

5 The Attendance/Participation component will be calculated by:

· The degree to which you adhere to

the lecture and demonstration

praxis;

· Timeliness. Assignments will be

handed in through Blackboard.

They will be automatically date/

time-stamped.

Page 6: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Let’s get smarter . . .

Please define the term: web page

Page 7: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Please define the term: web page

A set of instructions written in a markup language, stored on and delivered by an http server, and interpreted on a client by browser software.

Let’s get smarter . . .

Page 8: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web works . . .

Client-server architecture

Page 9: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web works . . .

N-tier architecture

Page 10: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web works . . .

N-tier architecture

Page 11: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web works . . .

Web sites are organized into directories. The directory structure will determine the Uniform Resource Locator or URL for various resources.

For this class, you must make a class folder called icc565

Inside that folder, make another folder called colorSite

Inside the colorSite folder, make another folder called images

Page 12: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web works . . .

You won’t have the “index.html” file

The folders have a parent/child structural relationship.

The URL for this website would be:

http://MacintoshHD.syr.edu/icc565/colorSite

Page 13: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web worksgraphically

1. File formats

The only legal file formats are JPEG, PNG and GIF.

2. Screen & graphic resolution

Computer screens have approximately 72 pixels per inch, therefore you should save your images at 72dpi.

3. Colorspace specification

Computers use the RGB colorspace, therefore always convert your images to RGB before saving them for your web site.

Page 14: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web worksgraphically

1. File formats

The only legal file formats are JPEG, PNG and GIF.

2. Screen & graphic resolution

Computer screens have approximately 72 pixels per inch, therefore you should save your images at 72dpi.

3. Colorspace specification

Computers use the RGB colorspace, therefore always convert your images to RGB before saving them for your web site.

Page 15: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web worksgraphically

1. File formats

The only legal file formats are JPEG, PNG and GIF.

2. Screen & graphic resolution

Computer screens have approximately 72 pixels per inch, therefore you should save your images at 72dpi.

3. Colorspace specification

Computers use the RGB colorspace, therefore always convert your images to RGB before saving them for your web site.

Page 16: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web worksgraphically

1. File formats

The only legal file formats are JPEG, PNG and GIF.

2. Screen & graphic resolution

Computer screens have approximately 72 pixels per inch, therefore you should save your images at 72dpi.

3. Colorspace specification

Computers use the RGB colorspace, therefore always convert your images to RGB before saving them for your web site.

Page 17: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

How the web worksgraphically

Computer color specification uses

hexadecimal notation

The alphanumerics correspond to level of voltage delivered to the pixels. They are always in the order, Red, Green, Blue (RGB).

White= ffffff

Black=000000

When all three values are equal, you have shades of gray.

f f f f f fe e e e e ed d d d d dc c c c c cb b b b b ba a a a a a9 9 9 9 9 98 8 8 8 8 87 7 7 7 7 76 6 6 6 6 65 5 5 5 5 54 4 4 4 4 43 3 3 3 3 32 2 2 2 2 21 1 1 1 1 10 0 0 0 0 0

volta

ge a

pplie

d to

pix

el

minimum

maximum

Page 18: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

Arbitrary but important facts

1. Home page = index.html

2. All file and directory names should be written lowercase without spaces

3. The suffixes .html and .htm are equivalent

4. Most browsers will interpret .txt

5. All browsers will render web-compliant files.

6. It’s almost impossible to cheat in this class, therefore the path of least resistance is to buckle down and learn.

7. The best way to learn is to build a complete mental model; a schema.

Page 19: ICC565 Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

See you on Monday

Stephen Masiclat

[email protected]

255 Newhouse 3

@masiclat

Jeffrey Passetti

[email protected]

254 Newhouse 3

@jpassetti