Interactive Digital Communication
 COMM 2555
 HONORS SECTION

 

   Bettina Fabos, Associate Professor, Visual Communication
   fabos@uni.edu
   Office Hours TTh 3:30-5:30 pm or by appointment.
   342 Lang Hall; 273-5972


Week Number 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Exam week
Textbooks Assignments About this Course


 

 

  WEEK TOPIC READINGS, DUE DATES, AND ASSIGNMENTS
  WEEK 1
  Tuesday
Jan 14

Course Overview

HOMEWORK:
Read Syllabus carefully
ASSIGNED: Dropbox File Set Up. Due Jan. 16.
Have your Dropbox folder up, complete, and shared by next class. It should be LAST NAME, FIRST NAME (all caps), e.g, FABOS, BETTINA; and it should contain the following folders:             

  Thursday
Jan 16

Photoshop introduction

  • Why make selections?
  • Polyvore
  • NyTimes graphic
  • Image/Canvas Size and Resolution
  • Tools: text, paintbrush, and eraser
  • Drawing Selection Tools
    • marquee and fills
    • magnetic lasso
  • Tonal and color Selection tools
    • Quick selection+ magic wand
    • Layers
    • Background eraser
  • IMAGES TO WORK WITH
  • REMEMBER

DUE: DROPBOX ASSIGNMENT

Things go by too fast in class? Then you need to consult these suggested Lynda tutorals:

SUGGESTED TUTORIAL: LOG INTO LYNDA AND THEN CLICK ON Drawing Selection Methods (18:09)  (to access exercise files and tutorial chapter segments, go HERE)  [Selecting Freehand with the Lasso Tool; Selecting Precisely with the Pen Tool and Paths; Snapping to Edges with the Magnetic Lasso tool]

SUGGESTED TUTORIAL: LOG INTO LYNDA AND THEN CLICK ON THESE LINKS: Tonal and Color Selection Methods (28:11) (to access exercise files and tutorial chapter segments, go HERE)   [Quick Selection Tool; Magic Wand Tool; Color Range command; Replace Color; Background Eraser Tool]

IMAGES TO PRACTICE WITH:


  WEEK 2
  Tuesday
Jan 21

Photoshop continued...

[The purpose of Smart Objects; The trials of destructive transformation; Creating a Smart Object; The rewards of nondestructive transformation]

MORE IMAGES TO WORK WITH

 

 

Need some clarification? Don't fall behind and then get too embarrassed to ask a question....Try these suggested tutorials:

SUGGESTED TUTORIAL: LOG INTO LYNDA AND THEN CLICK ON Photo Selections Workshop (refer to Ch. 3/Pen tool).

SUGGESTED TUTORIAL:LOG INTO LYNDA AND THEN CLICK ON Photoshop CS6 Essential Training (refer to Ch. 13, Tone and Color With Adjustment Layers (34:36) (to access exercise files and tutorial chapter segments, go HERE).  [Introducing Adjustment layers; Starting with a Preset; Improving Tonal Quality with Levels; Increasing Mid-tone contasts with Curves; Removing a color cast with Auto color; Changing the Color temperature; Shifting Colors with Hue/Saturation; Making washed out colors pop with Vibrance; Converting Color to B&W; Controlling which layers are affected by adjustments.}

SUGGESTED TUTORIAL:LOG INTO LYNDA AND THEN CLICK ON Smart Objects.

ASSIGNED: PHOTOMONTAGE AND CC

IMAGES TO PRACTICE WITH:

  Thursday
Jan 23

Creative Commons

License description challenge: 10 minutes to read about a license, discuss it, and then explain to the rest of the class.

Photoshop Practice


                           


  WEEK 3
  Tuesday,
Jan 28

Photoshop Continued

  • More Adjustment layers
  • Guides, groups, rulers

Photoshop practice



READING: HTML & CSS: Ch. 5 (images)

Yes, just like any instrument or sport, you need to practice. How about trying a few of these to reiterate what we did in class? The more you Lynda, the more confident you'll become.

SUGGESTED TUTORIAL: LOG INTO LYNDA AND THEN ACCESS THIS TUTORIAL: Tone and Color With Adjustment Layers (34:36) ((to access exercise files and tutorial chapter segments, go HERE).  [Introducing Adjustment layers; Starting with a Preset; Improving Tonal Quality with Levels; Increasing Mid-tone contasts with Curves; Removing a color cast with Auto color; Changing the Color temperature; Shifting Colors with Hue/Saturation; Making washed out colors pop with Vibrance; Converting Color to B&W; Controlling which layers are affected by adjustments.}

IMAGES TO PRACTICE WITH

  Thursday,
Jan 30

Understanding Image Files

  • Optimizing Images: png, jpg, gif, etc.
  • JPEG: Joint Photographic Experts Group
  • GIF: Graphics Interchange Format; good for animations
  • PNG: Portable Network Graphics: supports transparency

    

  • WBMP: Wireless Applciation Protocol Bitmap (Bitmap modeuses one of two color values (black or white) to represent the pixels) Image/Mode/Grayscale + Image > Mode > Bitmap

DESIGN ERA: New Century

QUIZ Ch. 5: HTML & CSS Chapter 5 (images)
READING:
Graphic Style: From Victorian to New Century: pp. 259-273 (New Century)

ASSIGNED: Design Era Teams



  WEEK 4
  Tuesday,
Feb 4

Website Structure: How to build a simple web page from scratch: Basic structure of a web page, HTML syntax - i.e., what is a tag, etc.

How to Build a Website

  • Review how a web site works + what is a web server
  • Introduce Filezilla (or similar program)
  • Log in to personal account on sunny. Create new directory “idc”. Upload a .html file to new directory. Access file at www.uni.edu/[student]/idc/[file].html
  • Celebrate being online

Intro to the Internet and WWW: about + brief history

READING: HTML & CSS: Ch. 1 (html structure)
DUE:PHOTOMONTAGE AND CC


  Thursday,
Feb 6

Formatting text and lists

HTML CHEATSHEET

DESIGN ERA: Victorian

More HTML practice

QUIZ Ch. 1: HTML & CSS Chapter 1 (HTML structure)
READING: HTML & CSS, Ch. 2 + 3 (text and lists) pp 52-56 are bunk so skip
READING:
Graphic Style: From Victorian to New Century: pp. 15-29 (Victorian)
HTML & CSS SANDBOX 01: STRUCTURE, TEXTS AND LISTS
        



  WEEK 5
  Tuesday,
Feb 11

HTML CHEATSHEET

DESIGN ERA: Arts and Crafts (mention briefly) and Art Nouveau (very significant...Budapest , which exploded between 1880 and 1910, is saturated with Art Nouveau!!)


QUIZ: Ch. 2+3: HTML & CSS Chapters 2 + 3 (HTML text and lists)
READING: HTML & CSS, Ch. 4 (links)
READING:Graphic Style: From Victorian to New Century: pp. 41-72 (Art Nouveau)



  Thursday,
Feb 13

lynda.uni.edu

Wordpress: Introduction

  • What is a content management system (CMS)
  • About WordPress + brief history of blogging(?)

Download, install, configure WordPress

  • Introduction to the 2013 Theme

DUE: HTML & CSS SANDBOX 01

ASSIGNED: PERSONAL WEBSITE (written content + Install image/Photoshop header)



  WEEK 6
  Tuesday,
Feb. 18

Ch. 6: Tables

  1. Table basics
  2. Table headers
  3. Table with a caption
  4. Table cells that span more than one row or column
  5. Tags inside a table

Tables exercise worksheet

Integrating tables into Wordpress

DESIGN ERA: Early Modern, Expressionism, and Modern

QUIZ Ch. 4: HTML & CSS Ch. 4 (HTML links)
READING: HTML & CSS Ch. 6 (HTML tables)
READING: Graphic Style: From Victorian to New Century: pp. 73-126 (Early Modern/Expressionism/Modern)



  Thursday,
Feb. 20

Adobe Photoshop:  Animated Gif
(refer to p. 117 in HTML & CSS)

Images to play with

Animated Gif instructions for Photoshop

Print out this CHEAT SHEET

IN -CLASS TEAM PROJECT: ANIMATED GIFS


  WEEK 7
  Tuesday,
Feb 25

Forms.

WORDPRESS Forms: inserting Contact Form 7

READING: HTML & CSS Ch. 7 (HTML forms) pp. 145-164
HTML & CSS SANDBOX 02: HTML links, tables, forms, and animated gifs


 

  Thursday,
Feb 27

DESIGN ERA: Art Deco

REVIEW and CATCHUP/WORDPRESS ASSIGNMENT QUESTIONS AND HELP

 

QUIZ Ch. 6: HTML & CSS Ch. 6 (tables)
READING:
Graphic Style: From Victorian to New Century: pp. 127-169 (Art Deco)



  WEEK 8
  Tuesday,
Mar 4

Design principles

  • EMPHASIS
  • CONTRAST
  • BALANCE
  • ALIGNMENT
  • REPETITION
  • FLOW

13 Layout Sins

QUIZ Ch. 7: HTML & CSS Ch. 7 (HTML forms)
READING:HTML & CSS Ch. 18 (Design)


ASSIGNED: Good Design, Bad Design
DUE:PERSONAL WEBSITE


  Thursday,
Mar 6

COLOR THEORY

Introduce MAIL CHIMP as a design platform
MAILCHIMP EXERCISE (if time)

DESIGN ERA: American Kitsch, DADA

READING: American Kitsch

DUE: HTML & CSS SANDBOX 02


  WEEK 9

 

  Tuesday,
Mar 11

Emailers
Introducing CSS

Color and CSS

147 color names

W3schools exercise 1: change the colors

Download this word document, copy and paste it into Notepad ++; save as a CSS file called "styles" in your idc/css folder.

Download this word document, copy and paste into the beginning of your 01_sandbox.html file

THE IDEA IS TO LINK YOUR CSS WITH YOUR HTML

Uploading Video to YouTube (Embedding it into an HTML file)

READING: HTML & CSS Ch. 10 + 11 (introducing CSS and color/CSS)


  Thursday,
Mar 13

Our Textbook: Styling Text with CSS 02

W3 Schools:

FONT/COLOR CONTRAST EXERCISE
Never use italics in web design

DESIGN ERA: Dada and Heroic Realism (for Heroic Realism, type the term into Google Images)

DADA AND HEROIC REALISM CHEAT SHEET

READING: HTML & CSS Ch. 12 (styling text with CSS)
READING: Graphic Style: From Victorian to New Century: pp. 169-182 (Dada and Heroic Realism)


HTML & CSS SANDBOX 03: CSS COLOR AND TEXT STYLING                                           

                       


WEEK 10: SPRING BREAK: MAR 17-21


  WEEK 11
  Tuesday,
Mar 25

How to piss of a designer in 40 seconds

Styling Text with CSS 01
W3Schools:

CSS Cheat Sheet


Introduce Chrome Inspect. Also Firebug and Web Developer Extension for Firefox (Debugging).

 

DESIGN ERA: Late Modern (including Swiss International)

QUIZ Ch. 10 + 11: HTML & CSS (Ch. 10, 11)
READING: I'm Comic Sans, Asshole (extreme language--if you take issue with swear words please do not read)
READING: The art of Combining Fonts
READING: OVERUSED FONTS
READING: Graphic Style: From Victorian to New Century:
pp. 183-220 (Late Modern)

  Thursday,
Mar 27

Helvetica: film,
80 minutes



  WEEK 12
  Tuesday,
Apr 1

Helvetica continued...

LATE MODERN

Boxes/CSS
W3 Schools:

QUIZ Ch. 12: HTML & CSS (Ch. 12)
READING:HTML & CSS Ch. 13 (styling text with CSS)

  Thursday,
Apr 3

Styling elements (CSS) other than text (Ch. 14)

Styling images (Ch. 15)

DESIGN ERA: Psychedelic

PSCHEDELIC CHEAT SHEET

READING:HTML & CSS Ch. 14 & 15(pp. 359-374) (styling text with CSS)
READING: Psychedelic Design Era

DUE: HTML & CSS SANDBOX 03



  WEEK 13
  Tuesday,
Apr 8

WordPress Child Themes

HTML & CSS SANDBOX 04: Customizing WordPress


TONIGHT REQUIRED PRESENTATION: STEVEN JOHNSON, 7 PM, COMMONS BALLROOM
  Thursday,
Apr 10

Introduce Dmitri Vorobiev


INTRODUCED: FINAL CLIENT - TEAM PROJECT
ASSIGNED: FINAL CLIENT 01: CONCEPT DOCUMENT


  WEEK 14
  Tuesday,
Apr 15
  • change Wordpress themes
  • Install Google web fonts
  • Lynda.uni.edu: wordpress tutorials
  • work in teams

DESIGN ERA: Postmodern


READING: Graphic Style: From Victorian to New Century:pp. 221-233 (Postmodern)
DUE: HTML & CSS SANDBOX 04
  Thursday,
Apr 17

READING: Graphic Style: From Victorian to New Century: pp. 235-257.
ASSIGNED:
FINAL CLIENT 02: WORDPRESS THEMES & CONTENT
DUE:
FINAL CLIENT 01: CONCEPT & INSPIRATION (due by midnight)


  WEEK 15
  Tuesday,
Apr 22

CSS LAYOUT
Layout/CSS (Ch. 15)

Work on Projects

READING:HTML and CSS Ch. 15 (layout--377-404)
HTML & CSS SANDBOX 05: CSS elements and images styling)
ASSIGNED: FINAL CLIENT 03: PHOTOSHOP HEADERS (2)
DUE:FINAL CLIENT 02: WORDPRESS THEMES & CONTENT (due by midnight)

  Thursday,
Apr 24

Work on Projects



  WEEK 16
  Tuesday,
Apr 29

Work on Final Project

ASSIGNED: FINAL CLIENT 04: TOTAL WEBSITE
DUE: FINAL CLIENT 3: PHOTOSHOP HEADERS (2) in class.



Thursday,
May 1
Work on Final Project
Embedding video and audio
ASSIGNED: FINAL CLIENT 05: EMAILER
DUE:
HTML & CSS SANDBOX 05

  WEEK 17
  Wed
May 7
 8:00-9:50 a.m

PROJECT PRESENTATION

DUE: FINAL CLIENT - TEAM PROJECT
DUE: EMAILER


 

  Course Details  
   
course description
Interactive Digital Communication (COMM 2555) is a foundation class for the .ids program and a core class for General Communication Studies students. The class gives students a solid foundation in creative digital production skills and creative problem solving, and prepares students for the 21st century workplace. Students learn Photoshop to manipulate digital images; HTML, CSS, and the content management system WordPress to master the design and coding of websites; After Effects to get a taste of motion graphics and animation; and emailer services such as MailChimp to understand some of the most popular visual tools for business and organizations. But it’s not just a skills class - students also learn about visual design, writing, and graphic design history to give them powerful visual communication strategies to amplify their ability to articulate and digitally communicate big ideas.
__________________________________________________________
texts


John Duckett (2011). HTML&CSS: Design and Build Websites.
Wiley Press.

 

 

Steven Heller and Seymour Chwast (2011). Graphic Style: From Victorian to New Century. Abrams.

     
    assignments

1. Dropbox Assignment: File system setup
2. Photomontage and the Creative Commons
3. HTML & CSS Sandbox

4. Quizzes (10-1 pt. each)
5. Wordpress personal website
6. Design Eras

7. Final Client Project: Dmitri Vorobiev

  1. Concept Document 5 pts
  2. WordPress theme: add content provided 5 pts
  3. Photoshop Headers 10 pts
  4. Comprehensive WordPress site 20 pts
  5. Emailer: 5 pts



5 pts
25 pts
30 pts

 

 

 

10 pts
25 pts
10 pts

45 pts

 

 


_____

150 pts

 
 
 
Policies

ASSIGNMENTS
All work should be original to this class. Work done for another class and passed off as a finished assignment for this class will not be counted.

LATE ASSIGNMENTS
Please save work and be responsible for all saved work. Assignments handed in past the due date will not be counted. 

ATTENDANCE
The responsibility for attending classes rests with the student. As the citizens of Iowa have every right to assume, students at UNI are expected to attend class. This idea is neither novel nor unreasonable. Students should realize that an hour missed cannot be relived, that work can seldom be made up 100%, and that made-up work seldom equals the original experience in class. Please don't ask any UNI instructor: "did I miss anything important?" Please don't expect a professor to "re-teach" a missed class during office hours. You are responsible from finding out--from your peers--what you missed. __________________________________________________________

 

ATTENDANCE POLICY 
As noted in the UNI Catalog, “Students are expected to attend class, and the responsibility for attending class rests with the student. Students are expected to learn and observe the attendance rules established by each instructor for each course. Instructors will help students to make up work whenever the student has to be absent for good cause; this matter lies between the instructor and student. Whenever possible, a student should notify the instructor in advance of circumstances which prevent class attendance.” (http://www.uni.edu/catalog/acadreg.shtml#attendance)

Attendance will be recorded for this course, and all unexcused absences will figure into the final grade.  Attendance will also factor in the Participation part of the students’ grade.

A note on missing classes:  If students miss class for a reason other than severe illness or other extenuating circumstances, it is NOT the instructor’s responsibility to re-teach material to students during office hours.  Students missing class are responsible for making up all class instruction and activities and for finding out from peers what they missed. _________________________________________________________

 

ACADEMIC MISCONDUCT  
Plagiarism, cheating, improperly sourced work, and other academic misconduct will not be tolerated.  The UNI Catalog is clear on this: “Students at the University of Northern Iowa are required to observe the commonly-accepted standards of academic honesty and integrity. Except in those instances in which group work is specifically authorized by the instructor of the class, no work which is not solely the student's is to be submitted to a professor in the form of an examination paper, a term paper, class project, research project, or thesis project. Cheating of any kind on examinations and/or plagiarism of papers or projects is strictly prohibited. Also unacceptable are the purchase of papers from commercial sources, using a single paper to meet the requirement of more than one class (except in instances authorized and considered appropriate by the professors of the two classes), and submission of a term paper or project completed by any individual other than the student submitting the work. Students are cautioned that plagiarism is defined as the process of stealing or passing off as one's own the ideas or words of another, or presenting as one's own an idea or product which is derived from an existing source.” See the UNI Catalog for full details.

__________________________________________________________

 

WORK EXPECTATIONS
The College guideline is that one semester hour of credit is the equivalent of approximately three hours of work (class time + out-of-class preparation) each week over the course of a whole semester. In a typical lecture/discussion course, each hour of class normally entails at least two hours of outside preparation for the average student. That means that for every week students should set aside 6 hours outside of class to work on classwork. This standard is the basis on which the Registrar's Office assigns hours of University credit for courses.
__________________________________________________________

Outside Help

Digital Media Hub, Rod Library
The new DMH at Rod has 35 laptops and numerous desktops that are fully loaded with the Adobe Creative Suite. Moreover, Rod is staffing the DMH with IDS students who can help you with your projects.

The most qualified people for the purposes of our class are Maddie McClaughlin and Sarah Scherrman. They are excellent at Photoshop and Wordpress, so if you are having problems, go seek them out!!
SARAH's HOURS: MW, 11-2; TTH 9-11
MADDIE'S HOURS: SUN, 5-9; M, 2-4; T, 11-1; W 2-4, Th, 2-4

DISABILITY SERVICES
The Americans with Disabilities Act of 1990 (ADA) provides protection from illegal discrimination for qualified individuals with disabilities.  Students requesting instructional accommodations due to disabilities must arrange for such accommodation through the Office of Disability Services.  The ODS is located at 103 Student Health Center, phone number: 273-2676.

  Academic Learning Center's Free Assistance with Writing, Math, Reading and Learning Strategies
The Writing Center offers one-on-one writing assistence open to all UNI undergraduate and graduate students. Writing Assistants offer strategies for getting started, citing and documenting, and editing your work. Visit the Online Writing Guide and schedule an appointment at 008 ITTC or 319-273-2361.
The Math Center offers individual and small-group tutorials especially helpful for students in Liberal Arts Core math courses. No appointment is necessary, but contact the Math Center at 008 ITTC or 319-273-2361 to make certain a tutor will be available at a time convenient for you.
The Reading and Learning Center provides an Ask-a-Tutor program, consultations with the reading specialist, and free, four-week, non-credit courses in Speed Reading, Effective Study Strategies, PPST-Reading and -Math, and GRE-Quantitative and Verbal. Visit this website and 008 ITTC or call 319-273-2361

Class Websites: