Art 451 Forever!

Syllabus | Assignments | Links

Anchor links(links to content on this page):

Department:Fine Arts
Course # and Title:AT 330 & IM 330 Web Design and Interactive Art
Class Time:Online

Instructor:  Steven Gutierrez MFA
Office hours: T & R 1130-1200, 330-500pm, F by appointment
Email address:sgutierrez@lec.edu


Course Description:
This course will focus on Web Design and Interactive art within the realm of the World Wide Web. The course will explore the Internet as a medium for art and for delivering information while utilizing the artistic possibilities of HTML, Dreamweaver, Photoshop, and Flash.

As a group we will explore the Internet as a medium for art while utilizing the artistic possibilities of HTML, Dreamweaver, Photoshop, and Flash.

News:
Dreamweaver manual and Flash manual are up and will be updated continuosly.

Class Schedule

Note: This is a general schedule and it is subject to change. I'll keep you posted.

•Week 1 (8/24)
Introduction to the class, the Lab, and to each other.
HTML 5 vs minimal-scripting websites
Show websites:
http://www.beyonce.com/
http://a-class.mercedes-benz.com/
http://loveandluxesf.com/
http://disneyworld.disney.go.com/new-fantasyland/
http://waterlife.nfb.ca/
Ze - http://www.ted.com/talks/ze_frank_s_nerdcore_comedy
* Homework (HW):
Purchase the required books
Fill out survey

Part 2:
Photoshopas web design tool one, Dreamweaver Exercise Website
HW: Make 5 images about yourself and your identity (must be fake: i.e. images of you as part-time superhero, of space explorer on the weekends, etc.)

•Week 2 (8/31)
Part 1:

Making images web-ready*
and computer graphics review (resolution, pixels, size, etc.)
Scanner and more Photoshop tips
HW: Bring Ideas
http://www.malepregnancy.com/
Ninja for Hire
http://www.tree-axis.com/pretendster/
HW: Begin optimizing your images (poor image size will reduce your grade)
HW: Read pages: 31-52

Part 2:
Discuss Readings
* HW:Begin optimizing your images (poor image size will reduce your grade)
1) Read Jon Ippolito's 10 Myths of Internet Art. We will discuss it on 9/9.
2) View: LonelyGirl15 archive and mouchette.org
HW: Add more images for the assignment and add writing (poor grammar will reduce grade)

•Week 3 (9/7)
Part 1:
The structure of the Internet
Introduction to HTML basics*. (Video: on LEO)
Introduction to Dreamweaver* interface and capabilities and Site Control is IMPORTANT.(Video: on LEO)

HW: (DUE by THURSDAY - POST HW) Submit 3 different design layouts (use Photoshop or Illustrator
) (HW Guide Video: on LEO)

Part 2:
Introduction to the Dreamweaver* continued interface and capabilities.
Layout in Dreamweaver using DIV tags and CSS (DW Book: Chapter 3 & 4 and/or
Adobe Videos: https://helpx.adobe.com/dreamweaver/how-to/edit-css-properties-visually.html )
Tree chart for websites. (DW Book:pg 75 except that you can make your tree chart (thumbnail) in graphics program.)
Site Control is IMPORTANT! Remember to make sure you make a SITE before beginning any html file work in DW.
HW: Read pages: pg52 -70 and some of pg 114-115 on mouchette for quiz

HW: Peer Post by Sunday (and choose 1 design to polish and finalize)
HW: Quiz

•Week 4 (9/14)
Part 1: Dreamweaver DIV tag review and Links (anchor tags, pdfs, doc, etc.) and saving html pages. (Video:

http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-02-creating-your-1st-web-page/

http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-03-local-site/

http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-04-creating-and-importing-images/

http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-05-linking-to-websites/

Slicing your images from Photoshop (Video: on LEO)
DIV review, Linking pages in DW, and Zipping(Video: on LEO)

HW: Internet Art pg 73-84
HW: Create new pages and link up...zip up and turn into LEO coursework as one zip file by Sunday
HW: Post on art book by Thursday (description on LEO forum: Discuss the issues as mentioned in the book about exhibiting online or email work.  Please use examples from the book or cite book for full credit.  Remember that if someone's earlier post discusses the financial side of this, then you either have to add to this or find another related issue concerning the art process for internet art.)

Part 2:
Forms for realism and future real use forms (Video: https://helpx.adobe.com/dreamweaver/how-to/create-html-forms.html )
Uploading websites to the server. (Video: on LEO)
Extra Credit: Try to upload your site to the server for extra credit. Next week it will be required so might as well try now and get free points)
HW: Remember to Finalize assignment 1 with your links and layout.
HW: Peer Post by Sunday
No Quiz this week

•Week 5 (9/21)
Remember text in RED means to turn into LEO coursework, Forum, or server.
Part 1: Skills gathering for next project...Dreamweaver: Rollover, Image maps; Forms; (Video: on LEO)
Flash out, HTML 5 in (for now) and Flash primer (use animation students for help)
Cool HTML animation tutorial: http://www.w3schools.com/css/css3_animations.asp
GIF animations using Flash (Video: on LEO)
Click here to learn what Edge is: https://helpx.adobe.com/edge-animate/how-to/what-is-edge-animate.html?set=edge-animate--get-started--overview (1 minute)
Upload Site to Web Server with 3-4 sentence description by Thursday (POST link on forum) (Video: on LEO from last week)

Part 2:
Critique assignment 1: Pick 3 sites to give feedback on (make sure to pick a peer that has no comments first..then if they all have comments, pick any site you prefer to comment on). Make sure you discuss the following points on the POST. Navigation (is it easy to navigate, Aesthetics, craftsmanship (errors, broken links, etc.), and mood.
This post by Sunday.

Quiz due by Sunday

End of the World, http://www.theyrule.net, The Meatrix
Tactile Media (Video: on LEO)
HW: Brainstorm idea for project 2: Tactile Media, read pg 119-132

•Week 6 (9/28)
Part 1:
*HW: Begin Assignment #2: Tactile Media (with Flash animation or "HTML 5" animation)
-Create Design and Slice
-Create assets (copy, images, animations, videos, etc.)
-Make HTML web pages and link up

-http://www.seditiongames.com/games/advocacy/bushgame.html
-
http://www.gatt.org/
-The Yes Men and the WTO
HW: Interventionist Essay (page 1 - 8)
HW: Finish chapter 2 - pg 84-113

HW: Design main design

Part 2:
HW: pg 132-144

•Week 7 (10/5)

Working on Project 2 and peer post by Tuesday
Website complete by next Thursday (Oct. 15)
*Note: Next week you will either have to work in the mac lab to use Flash or download the 30 day free trial

Part 2: FALL BREAK

•Week 8 (10/12)
Part 1:
Creating an art multimedia navigation from scratch using Flash (Video:On Vimeo - https://vimeo.com/141540862)
-http://www.homestarrunner.com
-http://www.dontclick.it/
-http://www.ramocki.net/
Uploading Project 2 to a project2 folder (Video on Vimeo: https://vimeo.com/142091047)
HW: pg 144-171
HW: Post Website Link to forum by Thursday (Note that grade is out of 100 and will be based on functionality (25%), mood(25%), aesthetics(25%), and craftsmanship(25%))
HW: Educational webpage (project 3): Submit idea into coursework folder by Thursday(phase 1: idea and design; examples include common formula needs like mortgage calculation, pregnancy due date, etc. or interactive daily inspiration quotes)
Just for Fun: Photoshop Slideshow Tutorial

Part 2:
Do this until you are comfortable with javascript (probably section 1 and 2): https://www.codecademy.com/tracks/javascript
HTML 5 and javascript programming including calculating example (Video:On Vimeo - https://vimeo.com/142254927)
http://www.leoburnett.com
HW: Post critique for 3 sites by Sunday...make sure to critique navigation functionality (25%), mood(25%), aesthetics(25%), and craftsmanship(25%) - Note that this will be graded out of 100 also.
HW:General Feedback for Instructor - Time to make sure you are getting what you needs. Send me one email by Sunday with things I can do to improve the flow of the course. (Send me an email even if it is all fine so you can get credit for this required assignment)

*Remember red lines are things to submit to LEO or to me in some format

Quiz by Sunday (Open book on Internet Art book and terms like domain, actionscript, html5, etc.)

•Week 9 (10/19)
Redo Tactical Media website with unique content.

•Week 10 (10/26)
Part 1:

Watch Lecture:
More advanced Interactive Flash elements and bringing it into HTML (Video:On Vimeo -)

Read:
HW: Read pg 173-183

HW: Project 3-Phase 2 : Begin" programming" and link to at least 2-3 other pages that you make with relevant information (for example, if you were to make a site on Mortgage financing, a second page might be tips on how to find the right bank.)

Part 2:

Watch Lecture:
BEHAVIOURS in DW, javascript continued, CSS advance (Video:On Vimeo -)

HW: Work on project.Due Sunday 10/25...upload and post link to forum section.

Quiz by Sunday (Open book on Internet Art book)

 


Part 1:CSS advanced continued, Web 3D, more Flash and HTML 5
HW: Submit a website idea for your next project. It should be either art or educational in nature. Write at least half a page describing what you are hoping to make, why it is art and/or educational, and why you want to do this. It must be interactive beyond just the interactivity of links and contain a sound element. Submit this to network by next thursday (Oct. 29)

Part 2: Integrating Sound (and 3D if time), Integrating Video, Exporting & Viewing your special content.
HW: DIscuss at least 2 of your peers' idea before Sunday on Forum.

•Week 11 (11/2)
Part 1:The many applications of Interactive Media
Isadora, MAX/MSP and Jitter, & Physical Computing
project should be 30-40% complete.

Part 2: Work

•Week 12 (11/9)
Part 1: Finish website by Thursday

Part 2: Finish up critique changes by Monday

•Week 13 (11/16)
Part 1: Word Press, Wix, and other template based website programs/platforms
Part 2: Art Show

•Week 14 (11/23)
Part 1: Work on template based website platform showcasing your work from semester
Part 2: NO CLASS-Happy Thanksgiving

•Week 15 (11/30)
Part 1: More emerging technologies: Interactive 3D Graphics, Interactive Media in Bio-Art, Merging with design, etc.
Part 2:  Lab time: Finish website by Sunday.
FINAL EXAM, Date on LEO

 

 

Supplies

*USB/Flash or External Drive (minimum 4 GB for this class-more if planning video work)
(Unfortunately, if you homework is deleted/lost, or your final project is deleted, you would still need to recreate the work to receive a grade...backing up is crucial and students have lost their work in the past.)

Required Texts:
Adobe Dreamweaver CS6 Classroom in a Book
ISBN-13: 978-0321822451 
and
Internet Art
ISBN-13: 978-0500203767

Reading and Writing:

In addition to the required Art books, I will be giving you required readings related to multimedia art and ideas that you will be expected discuss in class/online. There will also be short writing assignments on relevant artists and artist lectures.

Tutorials:

Some free and pay tutorials can be found at lynda.com or at peachpit.com

OTHER inspirational books and periodicals:

The Language of New Media,(MIT Press) Lev Manovich
Snap to Grid, (MIT Press) Peter Lunenfeld
Electronic culture: technology and visual representation , Editor, Timothy Druckrey.
New Media in Late 20th-Century Art, (Thames & Hudson) Michael Rush
The Computer in the Visual Arts, Anne Morgan Spalter
Mute, "Culture and Politics After the Net", available at newstands that carry art magazines.Some online content available from the link.
Leonardo, (MIT Press) is the leading international journal for readers interested in the application of contemporary science and technology to the arts and music. It has been around since 1968! It is available in the Fine Arts Library at the Wexner Center.

Back up to anchor links

Evaluation

30% Project Assignments
25% Final Project
25% Writing assignments, quizzes/tests, technical knowledge, Final Exam
20% Participation in critiques and online forums (To be clear, no talking or communicating =  0 points/100, some talking = 50/100, and
always contributing = 100/100.)
REMEMBER: If it is not saved, then it does not exist even if it took you 1 million hours.

Extra Credit Assignments will be averaged into the appropriate category.

Back up to anchor links

Attendance & Late Assignment Policy

Stay on top of forums and assignment deadlines.

Back up to anchor links

Disability Policy

The disability statement that is printed in the Lake Erie College Catalog is applicable to this course.  It is the responsibility of the student to seek assistance at the college and to make his/her needs known to Dr. Spiesman, the Director of the Student Success Center (375-7426). The Student Success Center offers both peer and/or professional tutoring in all course/subject areas, as well as assistance in improving personal academic performance. The instructor will assist with accommodations when reasonable and necessary.

Back up to anchor links