Web Production / Audio Engineering

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

     This course provides a theoretical and applied academic Web Audio Room foundation to use digital media in graphic and traditional art along with audio engineering. Students create and design CSS, Flash and Javascript web pages, graphics, podcasts, animations, audio slideshows, and music videos as a basis for developing skills in visual communications. The class focuses on basic design, layout and construction, setup and maintenance of a web site. Students also create audio projects for developing skills in audio communication with basic audio recording techniques inside and outside the recording studio using industry recording tools. Course work is fully integrated with the other courses at Freestyle ACAT (Digital Photography + Graphic Design, Digital Film Production, and Society, Politics, and Literature). Software applications used in the first year class will include Adobe Dreamweaver, Flash, Photoshop, Illustrator, After Effects, Microsoft Word, Apple Garageband, Propellerheads Reason and Digidesign Pro Tools. Students will also learn HTML debugging, the use of Cascading Style Sheets (CSS) and Javascript insertion/modifcation for web design. Second year students will delve deeper into previous applications and will also receive an introduction to XML, Waves Plug-ins, and McDSP Plug-ins. Contact the instructor Leo Florendo by email at leo.florendo@mvla.net

 

More course information regarding Expected Learning Results for the 21st Century, Assessment, Grading, Late/Make-up Policies, Attendance, Classroom Rules, how to get help and Daily Agenda are available on these documents:

 

Web/Audio Project Specifications

The following links describe in detail the projects for each year students are enrolled in Web/Audio. Applications to be used in this class are:

DW = Dreamweaver
PS = Photoshop

IL = Illustrator
FL = Flash

AE = After Effects
GB = Garageband

PT = Pro Tools
RN = Reason

Year 1 Students

Year 2 Students

Project 1. Self-Portrait Project Specs

  • CSS Website (DW, PS, IL) < Main Focus
  • Podcasts (GB, PS)

Project 2. Narrative Project Specs

  • CSS Website (DW, PS, IL)
  • Photonarrative (GB, IL)
  • Narrative Animation (FL, GB, PS, IL) < Main Focus

Project 3. Documentary Project Specs

  • CSS Website with Javascript (DW, PS, IL)
  • Documentary Audio Slide Show (FL, PT, RN) < Main Focus

Project 4. Experimental Project Specs

  • One page website
  • Music Production (Live recording or MIDI Composition) (PT, RN)
  • Animated Poem (FL, PT, RN, PS, IL)

Project 5. Combined Film + WebAudio Students Fortune Cookie Project

  • Collaboration to create an original film < Main Focus

Project 6. Narrative 2 Project Specs

  • Simple Flash Website (FL, PS, IL, RN, PT)
  • After Effects Animation (PT, RN, AE) < Main Focus

Project 7. Senior Project Specs

  • Own choice - Flash Website (DW, FL, PS, IL, AE)
  • Own choice - Audio Component (GB, PT, RN)

Project 8. More Experimental Project Specs

  • Own choice - one page website (FL, PS, IL, RN, PT, AE)
  • Motion Graphics Compilation (PT, FL, PS, RN, AE) < Main Focus

 


Y1 Tutorial Login

Y2 Tutorial Login

Year 1 Student Website Links

Year 2 Student Website Links

Alejandro
Allyson

Ames
Brian
Carl
Danielle
Eve

Jacqueline
Jesse
Johan
John
Jozza
Julie
Kamron

Katrina

Lizette
Marjorie
Matthew
Mike
Miller
Nathan

Nicholas B

Nicholas G

Nicole
Phoebe
Rayna
Shahan
Stefano
Zachary
Zoe

Alyssa
Amanda
Anna
Ariel
Chelsea
Danielle
Hu Jun
Iphigenia
Irene
Jose
Julia
Justin

Kalyn

Karina

Katrina
Lily
Marvin
Michael

Nathaniel

Raime
Richard
Rosemarie
Ryan
Sandra
Tracy

WebAudio Archives for previous students' projects 2006 - 2009

Web Design Resources

Local vs Remote Concepts

 

CRAP - Design Concepts
  Contrast
    Repetition
     Alignment
      Proximity & Usability

More about CRAP

CRAP Examples

 

Interactive Frequency Chart

Tables vs Layers
Paper Prototyping 1
Paper Prototyping 2
Paper Prototyping 3

 

Various page sizes

980 x 600 | 980 x 625

980 x 650 | 980 x 680

1000 x 700 |1000 x 750

1024 x 768

Color Schemes 1 - Kuler
Color Schemes 2
Color Schemes 3

 

Font Symbols

 

Scrolling Divs

 

Matting Images

Webby Awards
Flash Forward
Fav. Website Awards

Comment Boxes

Layers Mag Tutorials

 

Pro Tools