Web Art 1/ Web Art 2 - Spring 2020 Session
ARTS 267 / ARTS 301- Instructor: Neil Salley
*Because of the COVID 19 crisis due dates for individual projects are no longer valid. All remaining projects must be completed by April 30th 2020. Students will work independently on their own computers (if possible) with additional instruction provided upon request. See COVID 19 plan for more details.
Web 1 Course Description
This course introduces students to the fundamental principles of interactive and web-based media through a survey of its history, theory and practices. Follow this link to an additional Web 2 course description.
Course Structure
Through a series of projects, readings and discussions students will be introduced to the possibilities for making artworks that utilize computer software, hardware, networks and hybrid forms of interactive multimedia.
Over the semester students will develop proficient skills in photo editing, creating animations for the web, developing hypertext storytelling sensibilities, working with text and web-page design as well as recording and editing sound and video for the web.
Informal and formal critiques of student work are central to this course and a high level of personal engagement and initiative is expected from all students. Technical workshops will be offered routinely during the semester and one-on-one tutorials will be arranged as needed.
Students will unite this growing skill-set in a final interactive multi media project that is due at the end of the semester. This Final project will demonstrate a level of proficiency with multimedia tools as well as create a compelling interactive experience for the viewer.
Objectives
Students in this course will be provided the opportunity to:
-
Gain a fundamental proficiency in communicating with a variety of digital media tools and processes.
-
Create and publish professional quality web-based portfolios as well as web-based multi-media experiences.
-
Acquire the means to articulate their interests and concerns as mindful creators.
-
Develop an understanding of the historic context and evolution of web-based media.
-
Show an ability to discern artistic merit of diverse forms of art/design in their contexts.
-
Be able to defend critical interpretations concerning the significance of artistic expression.
-
Make valid assessments of quality and effectiveness in design projects and art works - especially their own.
Prerequisites
-
No coding requirements.
-
A smartphone with about 40 MB of storage.
-
User accounts with the school email service.
Project Preparation
“Homework” for this class will be all about making the essential preparations for the upcoming class. This could mean gathering materials such as photographs, sounds, video, making conceptual sketches for compositions, writing proposals, making storyboards or producing “treatments” that articulate how you would like to approach a particular project. Always come to class with the materials for the project you are working on so you can use class time efficiently.
Preparation is also about catching-up on projects you may be falling behind on so you can be ready to present your work on critique day. There will be available lab times posted in the Resources section of this website as soon as I have them.
Projects
This course is “project based” and centers around the production of a series of assignments that are designed to build upon the students’ growing knowledge of media tools and practices covered in this class. Work must be put together skillfully, demonstrating that the student is developing sufficient proficiency with the tools associated with each project. Attention and care should be given to detail and all work must be well made and presented in a form that is orderly. Most importantly the student should show evidence of a search for their own unique creative voice and an effort to experiment with developing original content.
Project 1, Your Evolving Web Portfolio
Due - 4/28 - Final Critique 4/30 (with progress checks throughout the semester)
For this class all students are required to have a website that will a serve as a core database to store media and provide documentation for all our class projects as well as a means of sharing work, research and hyperlinking to sources that have informed your practice.
Consider using the website as a means to develop an online identity. Use this project and this class as an opportunity to experiment with ways of packaging and presenting yourself and your ideas online. Post your original artwork, photos, sounds and writing. Think of your website as your own online virtual studio/showroom. If you're not comfortable publishing under your own name – create a pseudonym! Better still, a make a business! The only rules are that all content is original and that it has clean easy to follow navigation.
This evolving website will not be formally critiqued or graded until the end of the semester. However, the class will collectively review the progress of each student’s website as part of our scheduled critiques.
We will be using WIX, a cloud-based web development platform. WIX is FREE and allows users to create HTML5 websites like this one. https://www.wix.com
There are many pre-made templates to choose from, however I suggest you start from a blank template
See also
Image Resolution and Screen Sizes
Anatomy of a web page download
Project 2, The Art of the GIF
Due - 1/30 - Critique 2/4
For a long time GIFs were relegated to twirling icons, flickering flames and cheesy animations - but not anymore. The GIF has become an art form in itself!
For this project students will introduce themselves to the class by participating in the creation of a collective GIF “Class Portrait”. A GIF (graphics interchange format) is a graphic image on a web page that moves. After exploring a range of GIF artists and GIF galleries and taking part in GIF making tutorials in Photoshop, students will explore what their own animated GIF "self-portrait" could be. Each student will create a minimum of 6 GIFs and then choose one of these to be published on the class website. Each GIF will also act as a link to the student's web portfolio.
Making GIF's in Photoshop Tutorial
Project 3, Audio Narratives and Podcasts
Due - 2/18 - Critique 2/20
Here the objective is for students to gain technical skills in the acquisition, manipulation, production and presentation of sound as a form of design and communication. After reviewing several examples of audio narratives and taking part in a demonstration on the proper use of microphones, field recorders and editing tools, students will create a 2 minute audio narrative that will include recording a voice over, environmental sound, and sound effects. For this project students are required to research and plan their project and to gather their sound materials as homework outside of class. Completed projects will be published on student websites and presented to the class for a group critique.
DR 05 controls and recording levels
Project 4, Creating Text Based Interactive Stories Using Twine
Although it is now ubiquitous, the hyperlink is the most radical feature of the Internet. Students will consider how to use the hyperlink for creative ends. We will be working with Twine, an open-source tool for telling interactive, nonlinear stories and games. Students will author an interactive exploratory experience that incorporates user choice, branching structures and loops. The twine HYML document will be embedded into a page on student web portfolios. This separate page should set the mood for the piece by adding a sound track, a background image and/or an animated GIF. Plan on making the story experience last a good 5 minutes for the reader (longer is OK - just not shorter) - around 20 - 30 pages.
Examples of hypertext literature - and Twine Stories
Publishing your Twine story for presentation and group critique.
Project 5, Video Ventures
Due April 30, 2020
* Covid 19 edit - Given that we're not using the lab computers you may not have access to Final cut video editing software. Instead you can download Adobe Premiere Pro and use it for free through the month of May. See Covid 19 plan for instruction on how to download. Excellent tutorial for getting started with Adobe Premier Pro CC - https://www.youtube.com/watch?v=yqIgJqahWtQ
* I do not suggest doing the "Appropriate and Remix" option if you are using your own computer. There is a danger of downloading a virus when you rip videos from youtube.
The objective of project 5 is for students to integrate the effective use of video into their growing skill set. For this project students are required to research and plan their project and to gather their video materials as homework outside of class. Students may choose one of the following options:
Option 1: Creating Video Narratives
Tech us something, tell us a story - or take us on a journey. For this project students will create a “video narrative” that will include recording live motion images and then integrating these images with graphics and sound using "Garage Band" and “Final Cut”. Students will learn how to effectively use a smartphone camera to capture high quality video and take part in demonstrations on the principals of image composition, shooting and lighting techniques. The final piece should be 1 to 2 minutes in length. Completed projects will be published on student websites and presented to the class for a group critique.
Option 2: Appropriation and Remix
Propaganda is a powerful tool for politicians, corporations, advertisers, cultural institutions and anyone who is looking to manipulate a story, but it is also the starting point for acts of subversion, humor, and creative resistance. Early examples of Video Art often featured the appropriation, deconstruction and manipulation of mass media and culture as a form of social critique. For this project students will find a means of political and imaginative expression through re-editing and re-interpreting material “harvested” from YouTube. Students will come away well-versed in the techniques and tricks used in remix works, including ripping videos, sampling and audio/video cut-ups.
This work will be published to a video-sharing website such as YouTube or Vimeo and then embed into student web-based portfolios for critique.
Project 6, Experiments in Augmented Reality
Due April 30, 2020
*Covid 19 edit - I have added additional instructions, tutorials and have omitted the Echoes AR audio option.
Augmented Reality (AR) is a live direct or indirect view of a physical object or environment whose elements are augmented (or supplemented) by sensory input such as sound, video, graphics or GPS data. For this project students will create an AR experience that incorporates animation (or video) with sound and interactivity using Zappar's Zapworks Designer. Zapworks Designer is an augmented reality software program you can use to turn smartphones into vision based AR interfaces. Its is a free-to-download AP on iOS and Android. Students will use the free 30 day trial of Zappar to "augment" objects in the real world and bring them to life!
Take a peek at some of these examples of student projects.
Open an account for yourself using your BSU email
Watch this video for Zapworks DESIGNER
And this one for adding interactivity and scene transitions
Download the Zappar ap on your smartphone - https://play.google.com/store/apps/details?id=com.zappar.Zappar&hl=en
Generally students augment objects with flat 2d surfaces such as playing cards, posters, menus or the side of a boxed product such as cereal or crackers with animation or video. If you shoot video you will need to make the aspect ratio of the video match the aspect ratio of the rectangle you will be tracking. This video explains aspect ratio and how to adjust it in adobe Premeire Pro by changing the frame size.
Here's a After effects tutorial - if you want to create a sophisticated animation. I'm also happy to do a one on one phone tutorial with you.
However, you can ad simple motion graphics or animation by making a GIF and saving it as a video. Here is a quick tutorial for adding an animated GIF to Zappar
Documentation:
After creating a successful AR piece, students will document their work by either:
A - Document your work by shooting some video of the AR effect in-action on your phone and posting that to youtube or vimeo and embedding it on your site - just like you did with your video project. You will need an additional phone camera to accomplish this.
OR
B - Document your work by posting a JPEG image of your "Zappar Tracking Image" to a special page on your website along with the Zap code. Don't forget the zap code! The AR effect should work when you point your phone camera running the zappar ap - at your computer screen.
Final Project, Creating Interactive Multimedia Experiences
*Covid 19 edit - I have omitted the Echoes AR audio option.
Students will unite their new skill-set to create a non-linear interactive multimedia experience for the web using WIX OR they may choose to use Zappar to create an interactive augmented reality storybook or experience. This multimedia project can be autobiographical, fantasy, realistic, a mystery, humorous, or dramatic.
The work will be developed, produced and submitted in 2 parts:
This final critique will be an assessment of each student's Web Portfolio and their Final Independent Project:
As noted in the Project 1 description above, students are encouraged to create a personal website/web portfolio that encapsulates an aspect of their unique personality and design aesthetic. Extra points will be awarded if the website has a use beyond the scope our class.
Class Attendance and Participation
* obviously, disregard as of march 24
Regular and prompt attendance is essential to keep up with our busy project schedule and to acquire technical proficiency in the tools and techniques that will be presented in class. This course is fast paced and it is virtually impossible to make up any extended absence.
Students are expected to participate in each class session, be on time for all scheduled meetings and complete projects by the due dates assigned. If you know in advance that you will miss a class you should notify me as a courtesy in advance so I can advise you what you should have completed by the next class.
* Every unexcused absence reduces your grade by 1 full letter grade - so 4 unexcused absences will result in an automatic failure of the course. Two late arrivals without prior arrangements equals one unexcused absence. Students who have been absent are expected to have their work completed for the class session following their return. To obtain an excused absence, you must both write the instructor in advance and/or bring in medical documentation. See also: Bridgewater State University’s Undergraduate Academic Policies
http://catalog.bridgew.edu/content.php?catoid=7&navoid=486
At the conclusion of each project we will hold a “Class Critique”. Critiques will take the form of a conversation. They will provide a way to expand and refine our understanding of the key principles, technical considerations, and aesthetic choices of an assignment. Comments, questions, answers, and thinking out loud by both teacher and students create a two-way dialogue that enriches learning for everyone.
Active participation in critiques is an important part of your grade.
If a student’s work is not present for the critique it will be graded as “incomplete”. This means that by missing a group critique a student will receive a zero for the project as well as dropping a full letter grade from the student’s final average.
Web 1 Grading
-
Projects 1, 2, 3, 4, 5, 10% each
-
Final Project 25%
-
Attendance and Participation 25%
Web 2 Grading
-
Projects 1, 2, 3, 20% each
-
Final Web Portfolio 20%
-
Attendance and Participation 20%
Grading Criteria
-
F – Frequently late and/or absent. Insufficient participation. Little to no understanding of the materials covered in class.
-
D – Occasional lateness and more than one unexcused absence. Basic understanding of materials covered in class.
-
C – Occasional lateness. Demonstrated an understanding of materials covered in class. Failed to take risks. Work holds together. Makes only obligatory contributions to discussions.
-
B – Always present. Work handed in on time. Demonstrated a solid understanding of materials covered in class. Work has good form and content, and there is evidence of taking risks. This student has made interesting contributions to the class.
-
A – Always present. Work handed in on time. Demonstrated a solid understanding of materials covered in class. Was able to seek out new sources of inspiration and technologies and shared them with the class. Work has good form and content, and there is evidence of taking risks. This student always makes interesting contributions to the class, and frequently leads class discussions.
Communication
It is school policy that students are responsible for checking their BSU email account. If you need to contact me I strongly recommend contacting me by using the Contact page on this website. This method will forward your message directly to my personal email account, which I have access to on my phone. I check my BSU email daily - but only when I'm home in my office.
Accessibility Statement
In compliance with Bridgewater State University policy and equal access legislation, I am available to discuss appropriate accommodations that you may require as a student with a disability. Students will need to register with the Disability Resources Office in the Academic Achievement Center in the Maxwell Library to provide documentation of the disability, to determine reasonable academic accommodations, and obtain a letter of notification to faculty of the accommodations.
Disability Services
BSU is committed to ensuring all individuals equal access to its programs and services. The university offers a number of services to students who have a documented medical condition, are physically challenged, or have psychological or learning disabilities. If you think you may have a learning disability or wish to request support services, please contact the Office of Disability Resources in the Academic Achievement Center, Maxwell Library, (508) 531-2194. You can still receive services even after the semester has begun.
Expectations and Other Class Policies
The majority of information we cover in this class is readily available online and a web search can provide answers to many of your immediate questions. Think for yourself, carefully review what you did and what trouble you’re having. Consult the Resources section of this web site. Ask 2 friends that are sitting next to you. And OF COURSE you can ask me.
Backup your work to the school’s server or a portable drive FREQUENTLY!
Other than using the web for researching material for your class work, there is no smartphone or Internet use allowed during class time. You will receive points off your final grade if you spend any class time on social media; this includes texting.
A Note on Perseverance
We will encounter frustrations as we deal with unexpected road-blocks and create workarounds that fit within our project schedule. These are important skills to practice as you will do the same when you leave school and enter the world of professional practice – whether it be art, business, academic pursuits, etc. It is important to know you do not have to be a practicing or aspiring artist or designer to participate in this course. However you must be willing to explore how this medium allows you to develop and refine your unique means of expression. As an instructor I cannot teach you the effort that is required to succeed in this class; It must come from your own desire and willingness to participate, create and grow.