Week 16 Day 2 - Thursday, Dec 12 - Homework

1. Complete Course Evaluation for ART271 on Vandalweb by Sunday, Dec 15.

2. Continue working on Project 2. Final critique will take place next Wednesday, Dec 18, 2013 from 7:30-9:30am in Wood Shop Crit 

**We will not meet next Tuesday or Thursday (due to final exam week)

-----------

Files to submit for Project 2 Critique (on USB stick) next week Wednesday:

Main Project folder with naming structure: FullName_Proj2_ART271

1) "Design Files" folder (PDF of all "screens" or "sections")

2) "Web Files" folder (web files with relevant html, css, javascript, images, etc)

3) "Process Docs" folder (with PDF or JPG scan of initial layout sketches + wireframe and flowchart)

1AND1 WEB DOMAIN AND HOSTING PACKAGES

1AND1 WEB DOMAIN AND HOSTING PACKAGES

If you are interested in purchasing a custom web domain with hosting space, I recommend purchasing a web hosing package from 1and1.com. 

The Linux 1&1 starter hosting package costs $2.99 a month---that package includes 100 GB web space + 1 web domain

Week 16 Day 1 - Tuesday, Dec 10 - Homework

1. Continue working on Project 2. Usability testing scheduled in next week, Tuesday, Dec 10 at 8:30am. 

2. Complete Course Evaluation for ART271 on vandalweb by Dec 15.

------------

Files to submit for Project 2 Critique (on USB stick) next week Wednesday:

Main Project folder with naming structure: FullName_Proj2_ART271

1) "Design Files" folder (PDF of all "screens" or "sections")

2) "Web Files" folder (web files with relevant html, css, javascript, images, etc)

3) "Process Docs" folder (with PDF or JPG scan of initial layout sketches + wireframe and flowchart)

Week 15 Day 2 - Thursday, Dec 5 - Homework

1. Continue working on Project 2. Usability testing scheduled in next week, Tuesday, Dec 10 at 8:30am. 

Project should be uploaded to your personal Uidaho Webspace (link to project on class home page) and opened in Firefox browser via lab iMac or your own personal laptop [if using your own personal laptop, be sure Firefox browser is installed]. 

All project files should be open in Firefox by 8:30am, or you will not be included in the usability testing (and will not receive class participation points for the day)

2. Complete Course Evaluation for ART271 on vandalweb by Dec 15.

Foundation - Misc Class names to change alignment

Use these pre-defined Foundation class names to change alignment of text content

// Miscellaneous useful HTML classes .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; }


**To adjust alignment of img tags, you must first place image tag in a 
div tag and use appropriate pre-defined foundation alignment class name in div tag NOT 
img tag

Global Styles source via Foundation 4 Docs

Foundation 4 Documentation

Foundation 4 documentation

Week 15 Day 1 - Tuesday, Dec 3 - Homework

1. Continue working on Project 2. Usability testing scheduled in next week, Tuesday, Dec 10 at 8:30am. 90% of content must be coded for this testing.

2. Complete Course Evaluation for ART271 on vandalweb by Dec 15.

Week 13 Day 2 - Thursday, Nov 21 - Homework

1. Complete in class demo exercise with Foundation Clearing Slideshow (4 images), Accordion Tab Section, Tab Section, and Video components. Upload exercise to personal website by end of the week.


2. Continue working on coding development for Project 2. Usability Testing scheduled in three weeks, Tuesday, Dec 10 at 8:30am. 85% of coded site with intended content due.

Have a Great Thanksgiving Break

Video Resource

W3schools Video Tag Resource
VLC - Open Source Media Players and Media Convertor


Add following code snippet inside body tags to include video in html document:


<!--add video-->
<!--autoplay to true or false, loop to true or false-->
 <video width="1000" autoplay="true" loop="true">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" ><!--supports IE, Safari, chrome-->
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"><!--supports Firefox and Opera-->
  </video>

Week 13 Day 1 - Tuesday, Nov 19 - Homework

1. Begin coding development for Project 2. Usability testing scheduled for Tuesday, December 10, 8:30am.

Usability Resources

A List Apart: Usability Testing Demystified
Usability Testing TookKit
Usability Tooks {via Smashing Magazine}
Usability & User Experience Articles {via Smashing Magazine}

Week 12 Day 2 - Thursday, Nov 14 - Homework

1. Work on Design Compositions for Project 2. Layouts for ALL sections (6 page minimum) with intended text and image content (not place holders) due as single PDF for formal critique in next week, Tuesday, Nov 19 at 8:30am.

CAA Lecture Series: Larry McNeil Thursday, Nov 14 at 5:30pm

As part of the Comic Art Indigène exhibit at the Prichard, Larry McNeil from Boise State University, will give a presentation on his remarkable body of work, including a recent focus on climate change.

Cartooning Class by CAA Alum Noah Kroese next week at Prichard Gallery

Upcoming Prichard cartooning workshop by last spring's UI "Inspiring Design Futures" Noah Kroese. This is an excellent opportunity, not to be missed.

Where: The Prichard Art Gallery
When: Thursday, November 21 at 7 pm.

The class costs $15, and the class size is limited. 

Email pagallery@uidaho.edu or call 208.885.3586 to register for the class.

Week 12 Day 1 - Tuesday, Nov 12- Homework

1. Work on Design Compositions for Project 2. Layouts for ALL sections (6 page minimum) with intended text and image content (not place holders) due for formal critique in 1 week, Tuesday, Nov 19 at 8:30am.

2. Upload Pono Fish Company exercise with Foundation grid, orbit slideshow, reveal modal boxes by start of next class.

Foundation Slideshow add

Delete existing script tag at end of html document to modify

 <!--add to control orbit image slideshow settings-->
  <script>
    $(document).foundation('orbit', {

  animation: 'fade',
  timer_speed: 5000, //duration per slide; 1000 equivalent of 1 second
  timer: true,  // display timer (true or false)
  pause_on_hover: false, // automatically pause timer when hovered (set true or false)
  resume_on_mouseout: false,
  animation_speed: 500, //duration of slideshow transition; 1000 equivalent of 1 second
  stack_on_small: true,
  navigation_arrows: true, // display previous & next arrows (set true or false)
  slide_number: false, // display slide numbers (set true or false)
  bullets: false,  //display bullet navigation  (set true or false)
  container_class: 'orbit-container',
  stack_on_small: false,
stack_on_small_class: 'orbit-stack-on-small',
  next_class: 'orbit-next',
  prev_class: 'orbit-prev',
  timer_container_class: 'orbit-timer',
  timer_paused_class: 'paused',
  timer_progress_class: 'orbit-progress',
  slides_container_class: 'orbit-slides-container',
  bullets_container_class: 'orbit-bullets',
  bullets_active_class: 'active',
  slide_number_class: 'orbit-slide-number',
  caption_class: 'orbit-caption',
  active_slide_class: 'active',
  orbit_transition_class: 'orbit-transitioning',
  next_on_click: false,
  variable_height: false,
  before_slide_change: function(){},
  after_slide_change: function(){}

 
});
  </script>

Week 11 Day 2 - Thursday, Nov 7 - Homework

1. Work on Design Compositions for Project 2. Layouts for ALL sections with intended text and image content (not place holders) due for formal critique in 1 1/2 weeks, Tuesday, Nov 19 at 8:30am.

Week 11 Day 1 - Tuesday, Nov 5 - Homework

1. Post Foundation Basics Exercise to class site by Thursday, 8:30am.

2. Work on Design Compositions for Project 2. Layouts for ALL sections due for formal critique in two weeks, Tuesday, Nov 19 at 8:30am.

Foundation Resources

Zurb: How to Design Responsively

Foundation Elements Documentation 
Foundation Templates (right-click or control-click on thumbnails to download html file)

Zurb Blog: Design Patterns 
Zurb Blog: Design Process
Zurb: Gallery of Responsive Sites
Zurb: Pattern Tap

Week 10 Day 2 - Thursday, Oct 31 - Homework

1. Work on Visual Concept Phase for Project 2 by completing a Visual Moodboard. 

Your moodboard should address color scheme (link colors, bg colors, accent colors, etc), typography styles (1-2 choices, are they web safe? legibility? etc.) and overrall visual language (through imagery, textures, graphics, etc) you intend to execute for the website project. 

Moodboard + Mobile/Desktop wireframes due for review at start of next class Tuesday, November 5, 8:30am

2. Download Foundation for demo next class

Week 10 Day 1 - Tuesday, Oct 29 - Homework

1. Modify Javascript Demo to include:

1. Image Gallery that includes as least 6 thumbnails and large images (of your own images) using Image Map javascript. Upload Image Gallery file to class website.
2. In existing Javascript Exercise 1 file, create 4 background color OR background image links AND 10 possible random image thumbnails (all same size 300x150) that load at bottom of your page, created with random image javascript. Upload Javascript Exercise file to class website.

Both Image Gallery and Javascript Exercise files due on your class website by start of end of next class session.

2. Complete one paragraph Proposal, Wireframes, and Flowchart for Project 2. Due for review next class.

3. Revisions to Project 1 due by start of next class, Thursday, Oct 31 at 8:30am on USB stick.

Project 2: Non-Profit Website Redesign

Description:
Working individually or in groups of two, you will be redesigning a website for a local non-profit organization (from list provided). Using pre-existing content from the organization's website, you must assess the strengths and weakness of the existing site, and develop ways to improve the information design, visual aesthetic, and interface usability.

Objectives:
+ Apply information and interface design fundamentals and principles to aide in creative problem solving
+ Write HTML, CSS and Javascript code
+ Use industry standard web authoring tools

Specifications:
+ Non-profit organization should be chosen from provided list.
+ User research and usability testing must be conducted throughout project to meet user expectations.
+ Design layout should meet usability standards and current web design/development best practices.
+ All web pages are to be generated with Dreamweaver and/or a text editing application.
+ Scripting languages to be used: HTML, CSS and Javascript. No table, td, tr tags allowed.
+ Website should be responsive & browser compliant in Firefox for desktop, laptop AND mobile platforms (Windows & Mac).
+ All media (video, graphics, photographs and/or artwork) must be original and/or not violate copyright laws.

Deadlines:
Concept Phase: Proposal, Wireframes, Flowchart as PDFs due Thursday October 31, 8:30am
Visual Concept Phase: PDF of Moodboard due Tuesday, November 5, 8:30am
Design Comps due for all section: PDF of all layout compositons due Tuesday, November 19, 8:30am
Usability Testing I: Functioning webpages for user review in Firefox due Tuesday, December 10, 8:30am
Final Project 2 critique and submission of all project files due Thursday Dec 19, 10am-12pm  Wednesday, Dec 18 7:30-9:30am in Shop Crit Space

Grading criteria (25% course grade):
Design Aesthetics—30% of project 2
Technical Skill—30% of project 2
Usability—20% of project 2
Process (Flowchart, Wireframe, Sketches, Mood Board, Project Refinement)—20% of project 2

Approved Local Non-Profit Organizations
Alternatives to Violence on the Palouse
Appaloosa Horse Club
Palouse Habitat for Humanity
Zelda's Pet Grooming
Humane Society of the Palouse additional site here
Graham Ballet
Boys & Girls Club Lewis Clark Valley
Disability Action Center Northwest
Idaho Foodbank
Family Promise

Week 8 Day 2 - Thursday, Oct 17 - Homework

1. Based on feedback from Project 1 class critique, begin to make revisions to your project.
Any successful and effective modifications made to project can have a positive impact on course grades. Revised projects should be uploaded to both team members webspace (and link to project posted on index.html uidaho webpages home page) by Thursday, Oct 31.

Project 1 grades will be emailed to groups next week.

CAA Artist Lecture this Thursday: Antonio Chavarria Comic Art

Lecture Thursday, Oct 17 at 7pm at Kenworthy Performing Arts Centre

Prichard Gallery Reception Friday, Oct 18 from 5-8pm

Week 8 Day 1 - Tuesday, Oct 15 - Homework

Critique of Project 1 scheduled for next class Thursday, Oct 17, 8:30am. Each team will present final website via webpages.uidaho.edu. File upload to webspace and USB drive submission must be completed by start of class session (Thursday at 8:30am). Late work (even 1 min late) will be subjected to penalties.

***Classroom will be open at 8:00am on Thursday, please be sure to plan submission of work accordingly.

What to submit for Project 1 critique next class:

1. USB Flash Drive with following Proj 1 files (organized and labeled similar to the screenshot below)

>>>Main Project folder with naming structure: YourNames_Project1_ART271
      + "Design Files" folder (save final Design Layout for all pages as a PDF)
      + "Process Docs" folder (with PDF or JPEG scan of wireframe, flowchart, moodboard, sketches, etc)
      + "Web Files" folder (with appropriate HTML, CSS, and images related to  
      website )

**Be sure to test your files before submitting to webspace and on USB

Week 7 Day 2 - Thursday, Oct 10 - Homework

1. Work on Project 1 Coding. First section pages should be completed for instructor review by next class, Tuesday, Oct 15 at 8:30am.

**Keep in mind final class critique of Project 1 (with all functioning HTML and CSS documents) scheduled for Thursday, Oct 17, 8:30am.

Be sure you have all design, web and process files (wireframe, flowchart, moodboard, sketches etc) set aside for project submission. Citation of images must be in MLA format (see UI Library reference on MLA image citing)

What to submit for Project 1 critique next week:

1. USB Flash Drive with following Proj 1 files (organized and labeled similar to the screenshot below)

>>>Main Project folder with naming structure: YourNames_Project1_ART271
      + "Design Files" folder (save final Design Layout for all pages as a PDF)
      + "Process Docs" folder (with PDF or JPEG scan of wireframe, flowchart, moodboard, sketches, etc)
      + "Web Files" folder (with appropriate HTML, CSS, and images related to  
      website )

CAA Lecture Series: Anna Kell, Thursday Oct 10 and Friday Oct 11

Please join us for the CAA Lecture Series events this week with Fine Artist Anna Kell. She will be presenting her work on Thursday, Oct 10 at 5pm in TLC 045 and running an Art Workshop on Friday, Oct 11 at 10:30am in AAN Rm 022.

Week 7 Day 1 - Tuesday, Oct 17 - Homework

1. Work on Project 1 Coding. Home page should be completed for instructor review by next class, Thursday, Oct 10 at 8:30am.

**Keep in mind final class critique of Project 1 (with all functioning HTML and CSS documents) scheduled for THursday, Oct 17, 8:30am.

Week 6 Day 1 - Tuesday, Oct 1 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. 

PDF format of 1) home page design layout (with actual text and image content) and 2) two example pages that include 1 or more facts about history of web (with actual text and image content) due in Project 1 Design submission folder onto DROPBOX for review Thursday, Oct 3 at 8:30am. Be sure to label your file with team members' names.

Scheduled design critique for Wednesday, Oct 3, 8:30am.

CAA Lecture Series Fall 2013: Anna Kell Oct 10 + 11

Week 5 Day 2 - Thursday, Sept 26 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. PDF format of 1) home page design layout (with actual text and image content) and 2) two example pages that include 1 or more facts about history of web (with actual text and image content) due for review Thursday, Oct 3 at 8:30am. Scheduled design critique for Wednesday, Oct 3, 8:30am.

Week 5 Day 1 - Tuesday, Sept 24 - Homework

1. Continue working on layout design for Project 1. All content (image and text) should be included in your layout design. PDF format of all pages due for review next week.

Would like to see content layout for homepage and 1 detail event section (text, images in addition to basic navigational content) by start of next class.

Scheduled design critique for Wednesday, Oct 3, 8:30am.

Week 4 Day 2 - Thursday, Sept 19 - Homework

1. Continue working on design layout for Project 1. Critique of all sections (design wise) due Thursday, Oct 3.

2. Based on Lianne's lecture on design, complete the following design exercise for discussion on Tuesday, Sept 24.

Week 4 Day 2 - Thursday, Sept 19 - Homework

1. Continue working on design layout for Project 1 using Illustrator, Photoshop, and/or Fireworks. Critique of design mockup for all sections scheduled for Thursday, October 3, 8:30am.

Web Design Resources

Web Design Blogs + Articles

The What, Why and How of Textures in Web Design

Visual Direction (great article that addresses design choices and its influence on usability)

Understanding the F-Layout

Jakob Nielsen (usability expert)

Design Grid Templates
960 grid systems (design templates)

Photoshop Basics
Type Tool Basics
Selection Tool Basics
Layer Basics

Typography Articles
List of Web Safe Fonts
List of Special Characters in HTML
Typography Speaks Louder Than Words
Why Typographic Choices Make a Difference
How to choose a Typeface
What Font to use?
Combining Typefaces
Type Guidelines and References for the web {great article by Smashing Magazine}
I Love Typography {articles, resources, fonts}
Web Font Services: The Good, Bad and Ugly

Web Type Services

@font-face kit generator

Google Web Fonts
Adobe TypeKit

More Web Font Embedding Services {via Smashing Magazine}

Font Foundries {not all fonts are created equal, and should not have been created at all}
Emigre
League of Moveable Type
Berthold Types
Font Shop

Don't Know What Font it is? Try WhatTheFont.com

Exercise 5: Keith Haring Webpages

Using the Keith Haring media assets provided last week, create a biography (index.html) and early work (earlywork.html) web documents as part of a Keith Haring informational website. Upload completed exercise to your personal class web site and be sure to update your home page of class site to include hyperlink to view Exercise 5. Due start of next class.

Week 3 Day 2 - Thursday, Sept 12 - Homework

1. Practice HTML and CSS code. Recommend exploring HTML and CSS section on w3schools.com, in addition to your own exploration using textedit and/or dreamweaver.

2. Create a moodboard for Project 1 and addresses color choices (3-5 colors), type choices (1-2 choices) and visual language you intend to execute for the website project. Due for review next class.

Resources for Moodboard Creation
Why Moodboards Matter
How to create Moodboards
Google Fonts
Color Lovers (Color Trends + Patterns)

Week 3 Day 1 - Tuesday, Sept 10 - Homework

1. Complete the following conceptual planning for project 1 for review start of next class, Thursday, September 12, 8:30am

• Research Outline (bullet point facts about 20 key events--for 2 person groups, 25 key events for 3 person groups)
• Wireframes (for each unique design layout for project)
• Flowchart

**All conceptual files for review should be saved as a PDF

UI College of Art & Architecture Technology Assistant

UI College of Art & Architecture Technology Assistant

You can also get personal assistance from the CAA Technology Assistant in Art & Architecture North building in Rm 117 during scheduled hours:

Monday	5:30 pm - 8:30 pm
Tuesday	9:30 am - 11:30 am
Wednesday	5:30 pm - 8:30 pm
Thursday	5:30 pm - 7:30 pm
Friday	3:30 pm - 6:30 pm
Saturday	None
Sunday	12:30 pm - 2:30 pm

The Technology Assistant can show you how to find program help resources and how to effectively troubleshoot the design software and hardware problems you encounter.

Additional CAA Computer Resources

Flowchart + Wireframes

Flowchart Examples

Do you Need a Designer Flowchart {by Sabine Ahrens}

So You Want to Watch a Holiday Movie {by lemon.ly}

Lovely Charts (Free Online Flowchart and Wireframe application)
Sample flowchart from Wired.com
Another sample flowchart from Wired.com

Image Copyright Flowchart
Fantastic flowchart diagraming the importance of getting permission to post copyright images online. Created and designed by Pia Bijkerk Erin Loechner and Yvette van Boven.

Wireframe Examples

Week 2 Day 2 - Thursday, Sept 5 - Homework

1. Begin Conceptual Process for Project. Begin gathering research regarding the history of computers and web technology.

A project outline that identifies at least 10 key events/historical figures due for review by Thursday September 12.

• 20 key events/historical figures related to both the history of computer and web technology
• UI Library Guide for Art & Design 
• Use UI Library Catalog search to find books and articles; recommend browsing the following section sin the library, TK5105 (Internet/Web), QA76 (Computers), P90 (New Media)
• Wikipedia is not a reliable source of research
• All research material (text + image) must be cited in project (see MLA Image Citation guide)

2. Practice HTML tags introduced in class this week.

Project 1: History of the Computers + Web Technology

Download PDF of Project Specification

Description:
Working in groups of two, research, design and develop a website project documenting the history and evolution of web & computer technology. Overall project should serve as an engaging, informational resource that introduces a historical overall of interactive media and technology developments throughout time.

Objectives:
+ Apply information and interface design fundamentals and principles to aide in creative problem solving
+ Collaborate effectively with group members through conceptual, design and development phases
+ Use industry standard web authoring tools

 Specifications:
+ Design layout should meet usability standards and current web design/development best practices
+ Factual information and historical photographs must be cited using MLA standards.
+ All web pages are to be generated with Dreamweaver and/or a text editing application.
+ Scripting languages to be used: HTML & CSS (external files when necessary). No table, td, tr tags allowed.
+ Project should be browser compliant in Firefox for both PC and Mac platforms.

Deadlines:
Concept Phase: Research Outline, Wireframes, Flowchart as PDFs due Thursday September 12, 8:30am
Design Concept Phase: PDF of Moodboard due Tuesday, September 17, 8:30am
Layout Design Phase: PDF of final design layout due Tuesday, October 1 Thursday, Oct 3, 8:30am
Final Project Submission: USB submission of all project files due Thursday October 17, 8:30am

Grading criteria (25% course grade):
Design Aesthetics—30% of project 1
Technical Skill—30% of project 1
Usability—20% of project 1
Process (Flowchart, Wireframe, Sketches, Mood Board, Project Refinement)—20% of project 1

Keywords
Internet
World Wide Web
New Media 
Computers

Vannevar Bush

Memex

Tim Berners-Lee

Ted Nelson

World Wide Web Consortium (W3C)

Doug Engelbart

Samuel Morse

Bell Labs

George Stibitz

ARPANET

NCSA Mosiac

Turing machine

Charles Babbage

hypermedia

Apple

Microsoft

ENIAC

IBM

Week 2 Day 1 - Tuesday, Sept 3 - Homework

UI Art & Design Library Resources

Oxford Art Online

Create EX3 html file with following information (due for review on ui webspace start of next class)

1. Find an artist using Oxford Art Online research site

2. Download at least 3 images of that artist (work or portrait)

3. Type up at least 3 paragraphs of text about that artist, (summarized or dummy text ok)

4. Include 3 links (absolute URL) related your chosen artist

5. Create an unordered list at 6 pieces of artwork created by artist

**Wikipedia is not an acceptable form of research; if using copyright images, cite your source reference