Instructor: Leo Florendo

Email: leo.florendo@freestyle.mvla.net or leo.florendo@mvla.net

 

Course Description:

This course provides a theoretical and applied academic foundation to use digital media in graphic and traditional art along with audio engineering. Students create and design HTML, CSS, 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, Google Apps, Apple Garageband, Propellerheads Reason and Digidesign Pro Tools. Students will also learn HTML5 debugging, the use of Cascading Style Sheets (CSS3), webfonts, image and optimization, audio and video implementation on the web, and jQuery javascript insertion/modification for web design. Second year students will delve deeper into previous applications and will also receive an introduction to Adobe After Effects.

 

 

Click on image for a larger version.

Optional Equipment   Regrading Policy
Year 1 WebAudio Course Info Year 1 Class Calendar	Year 2 WebAudio Course Info Year 2 Class Calendar

WebAudio Project Specifications

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

DW = Dreamweaver PS = Photoshop IL = Illustrator

ID-InDesign FL = Flash

AE = After Effects GB = Garageband

PT = Pro Tools RN = Reason

Year 1 Student Projects Overview

Year 2 Student Projects Overvew

Project 0A - HTML/CSS Project Listing Page Specs   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 0B - jQuery Project Listing Page Specs   Project 5 - Profile Project Specs HTML5/CSS3/jQuery Website (DW, PS, IL, AE, RN, PT) jQuery photogallery using XML After Effect Media Feature   Project 6 - Combined Film + WebAudio Students Music Video Project Collaboration to create an original music video < Main Focus HTML5/CSS3/jQuery Website (DW, PS, IL, AE, RN, PT) Music Production (PT, RN)   Project 7 - Narrative 2 Project Specs HTML5/CSS3/jQuery Website (DW, PS, IL, AE, RN, PT) After Effects Animation (PT, RN, AE) < Main Focus   Project 8 - WeAudio Explorations HTML5/CSS3/jQuery Website (DW, PS, IL, AE, RN, PT) Mini-project that you want to explore about Web Design and/or Audio Engineering. < Main Focus

 

Expected School-wide Learning Results:

21st CENTURY SKILLS

To prepare students to live, learn, and work successfully in today's knowledge-based digital society, our emphasis at Freestyle will be on developing:

• Visual Literacy - the ability to interpret, use, appreciate, and create images and video using both conventional and 21st century media in ways that advance thinking, decision making, communication, and learning.
  
• Technological Literacy - knowledge about what technology is, how it works, what purposes it can serve, and how it can be used efficiently and effectively to achieve specific goals.
  
• Creativity - the act of bringing something into existence that is genuinely new, original, and of value either personally (of significance only to the individual or organization) or culturally (adds significantly to a domain of culture as recognized by experts).
  
• Self Direction - the ability to set goals related to learning, plan for the achievement of those goals, independently manage time and effort, and independently assess the quality of learning and any products that result from the learning experience.
  
• High Productivity - the ability to produce intellectual, informational, or material products that serve authentic purposes and occur as a result of students using real-world tools to solve or communicate about real-world problems. These products include persuasive communications in any media (print, video, the Web, verbal presentation), synthesis of resources into more useable forms (databases, graphics, simulations), or refinement of questions that build upon what is known to advance one's own and others' understanding.
  
• Teaming and Collaboration - cooperative interaction between two or more individuals working together to solve problems, create novel products, or learn and master content.
  
• Social and Civic Responsibility - the ability to manage technology and govern its use in a way that promotes public good and protects society, the environment, and democratic ideals.
  
• Risk Taking - the willingness to make mistakes, advocate unconventional or unpopular positions, or tackle extremely challenging problems without obvious solutions, such that one's personal growth, integrity, or accomplishments are enhanced.
  
  

What Is Expected From The Student

Assessment and Grading:

Quarter grades will be determined on the basis of performance on projects and classwork. Each area of evaluation will be weighted as follows:

• Minor Pre-Production Assignments = 30%
• Major Production/Project assignments = 70%

*Please note: Only semester grades appear on transcripts.

 

Grades will be assigned on the basis of the following percentages:

• A 90 to 100%
• B 80 to 89%
• C 70 to 79%
• D 60 to 69%
• F below 60%
  

 

Grade Book Update Policy:

Grades may be viewed 24/7 through individual online accounts on https://jupitergrades.com/login/?10334 and will be updated every two weeks or so. Students/Parents will receive grade-viewing info by email.

 

Daily Assignments:

Daily assignments are determined by tasks needed to achieve project goals. Students are responsible to check assigned tasks on the online daily agenda and end goals and work toward achieving those tasks and goals.

 

Attendance:

Attendance at Freestyle is required of students from 9:30 AM to 12:00 PM or 1:00 PM to 3:30 PM. Note: Students may receive a failing grade "F" in a class where they accumulate 15 or more unexcused absences.

 

Late Work/Make Up Work

TBA - Absent students are allotted the same number of absent class days to complete assignments. If a student is absent for extended periods of time, it is the student's responsibility to consult with instructor for make-up work.

 

Classroom Rules:

Because of the various expensive equipment provided for each student, no eating, drinking and chewing gum will be strictly enforced. Students not in their seats when class begins will receive a tardy. Cheating on any assignment or evaluation will not be tolerated. Any student caught cheating will be given a zero for the item and will be subject to further disciplinary action.

 

Help:

Office hours: 3:30-5 PM everyday or email me at leo.florendo@freestyle.mvla.net.

Open Lab hours throughout the year will be posted online and announced in class.
Lots of information is on the other tabs at the top of the page.

 

 

Click on a student name below to view his/her project work in WebAudio

 

Year 1 Student Website Links	Year 2 Student Website Links
{FN} {LN}	{FN} {LN}
WebAudio Archives for previous students' projects since 2006

 

Junior Daily Agenda

Big Picture:

• Experimental Website completed by End-of-Year Exhibition 5/21

 

Wednesday 5/15

1. Embedding fake items, then you replace them with finished files
• Animated Poem - go here
• Music - get this file
2. Work on Experimental Animated Poem and Music

 

Monday 5/13

1. Work on Experimental Animated Poem and Music

 

Thursday 5/9

1. Edit Websites/project0/pages/p3Info.html and Websites/project0/pages/p4Info.html
2. Work on Experimental Website Spry Tab formatting

 

Wednesday 5/8

1. Work on Experimental Website Background and Header formatting

 

Monday 5/6

1. Time to experiment with musical ideas that can match your music lyrics in English.
2. Audio FX in Reason:
• Reverbs, Delays, Chorus, Compression, Scream 4
• Rewiring with Sends and Returns
• Non-Daisy Chained Multiple Effects on one device with Spider

 

Wednesday 5/1

1. Get Animated Poem starter Flash, Illustrator and Photoshop file from my drop box. Move all to Websites/project4/LOCAL_ONLY
2. Learn about Reverbs, Delays, Chorus, Compression for audio effects - why use it and how to use it in Pro Tools.
3. Time in class to start working either your Animated Poem or Experimental Music

 

Monday 4/29

1. Overview of Experimental Unit - a single page website that includes
   • Use of Spry Tabs and FancyBox
   • Gallery of English Poems
   • Display Design Experimental Art
   • Produce and embed an Animated Poem
   • Compose and mix original music - preferably live and synthesized music combined
2. Learn about Gates & EQ's for audio effects - why use it and how to use it in iTunes and Pro Tools.
3. Set-up files for Experimental Website
4. HWK due sometime today: Reflection about Documentary Unit - click here to go to survey

 

Monday 4/22

1. Documentary Website completed by end of Tuesday April 23 - see website specs here
2. Your website will be graded during STAR Testing. Check these rubrics for all requirements
   • Audio SlideShow Rubric
   • Documentary Website Rubric
3. Finish polishing your website content and design. Obviously, don't forget to put up all changes. Best ways to check content and functionality of your website is to
   • Use Safari, go to Develop > Disable Caches and also in Safari, go to Develop > Empty cache, then refresh your browser
   • Login as student (because your site won't be cached in the browser history) and go to your website

 

Thursday 4/18

1. Documentary Website completed by end of Tuesday April 23 - see website specs here
2. Due today:
   • Edit introduction about your Narrative Website introduction on your Websites/project0/pages/Project_Listing_Page.html.
   • Write a 1 paragraph introduction about your Research Paper on your Websites/project3/pages/paper.html page.
   • Write a 1 paragraph introduction about your audio slideshow and the process of creating it and display the introduction on your Websites/project3/pages/slideshow.html page.
3. Edit your audio for your Audio Slideshow
   • Use the Pro Tools session we already set up in class.
   • NORMALIZE each clip as demonstrated in class
   • BATCH FADE each clip as demonstrated in class
   • BOUNCE OUT invdividual .wav files 01.wav, 02.wav, ... 17.wav for your Audio SlideShow
   • CONVERT .wav files into both .mp3 and .ogg
   • REPLACE the files in your Websites/project3/AudioSlideShow/sounds folder with the same file names 01.mp3, 01.ogg, 02.mp3, 02.ogg, ... 17.mp3, 17.ogg
   • CREATE and REPLACE the bgMusic.mp3 and bgMusic.ogg file in your Websites/project3/AudioSlideShow/sounds folder
4. Optional but highly recommended - Take a screen shot of your Pro Tools Session interface and insert the image at the bottom of your slideshow.html page to show how you edited the audio

 

Wednesday 4/17

1. Documentary Website completed by end of Tuesday April 23 - see website specs here
2. Due today:
   • Recreate book1.jpg, book 2.jpg, ... with the final version of your InDesign Book. Duplicate book1.jpg, rename it cover.jpg, resize to width 200px and insert it as a clickable thumbnail on book.html
   • For Audio Slideshow, add Title and "Produced by Your Name" on 01.jpg and add Thank yous to 17.jpg. All photos and thumbnails for your Audio Slideshow online and functional
     • Large photo dimensions: 1000x667 px then replace the photos in your Websites/project3/AudioSlideShow/img folder with the same file names 01.jpg, 02.jpg, ... 17.jpg
     • Thumbnail dimensions: 50x34 (33 is OK too) px then replace the photos in your Websites/project3/AudioSlideShow/img folder with the same file names 01t.jpg, 02t.jpg, ... 17t.jpg
     • PUT UP your whole AudioSlideShow folder and test the result
3. Edit your audio for your Audio Slideshow
   • Use the Pro Tools session we already set up in class.
   • NORMALIZE each clip as demonstrated in class
   • BATCH FADE each clip as demonstrated in class
   • BOUNCE OUT invdividual .wav files 01.wav, 02.wav, ... 17.wav for your Audio SlideShow
   • CONVERT .wav files into both .mp3 and .ogg
   • REPLACE the files in your Websites/project3/AudioSlideShow/sounds folder with the same file names 01.mp3, 01.ogg, 02.mp3, 02.ogg, ... 17.mp3, 17.ogg
   • CREATE and REPLACE the bgMusic.mp3 and bgMusic.ogg file in your Websites/project3/AudioSlideShow/sounds folder
4. Write a 1 paragraph introduction about your audio slideshow and the process of creating it and display the introduction on your Websites/project3/pages/slideshow.html page.
5. Optional but highly recommended - Take a screen shot of your Pro Tools Session interface and insert the image at the bottom of your slideshow.html page to show how you edited the audio

 

Monday 4/15

1. Documentary Website completed by end of Tuesday April 23 - see website specs here
2. Due today:
   • Final Version of your Audio Slideshow Transcript - both content and design. Submit as UsernamE.pdf
   • Research Paper transferred to your paper.html page
     • Remove all formatting from your Research Paper BEFORE pasting into your Spry Tabs content area by using Text Edit PLAIN TEXT mode.
     • Create and apply your CSS floatLeft and floatRight rules to a DIV containing an image - to break up large chunks of text and to provide more visual interest
   • Format the Spry Tabs to match your design
     • What will the tab look like when NOT selected? - format CSS .TabbedPanelsTab rule
     • What will the tab look like when SELECTED ? - format CSS .TabbedPanelsTabSelected rule
     • What will the tab look like when HOVERED? - format CSS .TabbedPanelsTabHover rule
     • Consider using a custom font for each tab - format CSS .TabbedPanelsTab rule
     • custom header style: CSS compound rule of .TabbedPanelsTab h1 to target heading 1 tags with attributes of font-size:2 em or so and color:#red or so
     • indented paragraphs: CSS compound rule of .TabbedPanelsTab p to target paragraph tags with attributes of text-indent:3 em or so
     • quote blocks: CSS class rule of .quoteBlock with attributes of margin-left: 100px, margin-right: 100px, text-align: justify, and font-style: italic
     • first letter style: CSS class rule of .firstLetter with attributes of font-size: 36px or so, color: #red or so, font-style:italic as an example
   • All photos and thumbnails for your Audio Slideshow online and functional
     • Large photo dimensions: 1000x667 px then replace the photos in your Websites/project3/AudioSlideShow/img folder with the same file names 01.jpg, 02.jpg, ... 17.jpg
     • Thumbnail dimensions: 50x34 (33 is OK too) px then replace the photos in your Websites/project3/AudioSlideShow/img folder with the same file names 01t.jpg, 02t.jpg, ... 17t.jpg
     • PUT UP your whole AudioSlideShow folder and test the result
3. Edit your audio for your Audio Slideshow
   • Use the Pro Tools session we already set up in class.
   • NORMALIZE each clip as demonstrated in class
   • BATCH FADE each clip as demonstrated in class
   • BOUNCE OUT invdividual .wav files 01.wav, 02.wav, ... 17.wav for your Audio SlideShow
   • CONVERT .wav files into both .mp3 and .ogg
   • REPLACE the files in your Websites/project3/AudioSlideShow/sounds folder with the same file names 01.mp3, 01.ogg, 02.mp3, 02.ogg, ... 17.mp3, 17.ogg
   • CREATE and REPLACE the bgMusic.mp3 and bgMusic.ogg file in your Websites/project3/AudioSlideShow/sounds folder
4. Write a 1 paragraph introduction about your audio slideshow and the process of creating it and display the introduction on your Websites/project3/pages/slideshow.html page.
5. Make a copy of the your slideshow title image 01.jpg and rename it slideshow_thumbnail.jpg. Move it into Websites/project3/images and resize with to no wider than 200px with Preview or Photoshop. Insert the image onto your Websites/project3/pages/slideshow.html page to replace the current link to the AudioSlideShow. Save and put up the new image and the edited page and check online if all works properly.
6. Optional but highly recommended - Take a screen shot of your Pro Tools Session interface and insert the image at the bottom of your slideshow.html page to show how you edited the audio

 

Monday 4/1 & Wednesday 4/3

1. Return your Recording Kit this week. Returning the recording kit after Spring Break will result in a block of your SIS account until you return your kit.
2. Use the recording stations to record your narration. Edit your audio at your classroom workstation NOT on the recording stations so that we can get more students into the recording spaces.
   • Use the Pro Tools session we already set up in class.
   • NORMALIZE each clip as demonstrated in class
   • BATCH FADE each clip as demonstrated in class
   • BOUNCE OUT invdividual .wav files 01.wav, 02.wav, ... 17.wav for your Audio SlideShow
   • CONVERT .wav files into both .mp3 and .ogg
   • REPLACE the files in your Websites/project3/AudioSlideShow/sounds folder with the same file names 01.mp3, 01.ogg, 02.mp3, 02.ogg, ... 17.mp3, 17.ogg
   • CREATE and REPLACE the bgMusic.mp3 and bgMusic.ogg file in your Websites/project3/AudioSlideShow/sounds folder
3. Crop and edit your photos for the Audio SlideShow
• Large photo dimensions: 1000x667 px then replace the photos in your Websites/project3/AudioSlideShow/img folder with the same file names 01.jpg, 02.jpg, ... 17.jpg
• Thumbnail dimensions: 50x34 (33 os OK too) px then replace the photos in your Websites/project3/AudioSlideShow/img folder with the same file names 01t.jpg, 02t.jpg, ... 17t.jpg
• PUT UP your whole AudioSlideShow folder and test the result
4. Write a 1 paragraph introduction about your audio slideshow and the process of creating it and display the introduction on your Websites/project3/pages/slideshow.html page.
5. Make a copy of the your slideshow title image 01.jpg and rename it slideshow_thumbnail.jpg. Move it into Websites/project3/images and resize with to no wider than 200px with Preview or Photoshop. Insert the image onto your Websites/project3/pages/slideshow.html page to replace the current link to the AudioSlideShow. Save and put up the new image and the edited page and check online if all works properly.
6. Optional but highly recommended - Take a screen shot of your Pro Tools Session interface and insert the image at the bottom of your slideshow.html page to show how you edited the audio
7. Create photos of your book as directed in class - example here.

 

Wednesday 3/27 & Thursday 3/28

1. Continue adapting your English Research paper for your Audio SlideShow Transcript. Basically your Audio SlideShow is a summary of your English Research Paper broken down to
   • A summarized version of your INTRODUCTION (photos 1 - 2)
   • A summarized version of your CHAPTER 1 (photos 2- 6) - perhaps include Interview quote(s)
   • A summarized version of your CHAPTER 2 (photos 6 - 10) - perhaps include Interview quote(s)
   • A summarized version of your CHAPTER 3 (photos 10 - 15) - perhaps include Interview quote(s)
   • A summarized version of your CONCLUSION (photos 15 - 16)
   • The Transcript rubric is posted here
2. CSS3 - rotating objects with CSS
   • transform: rotate(45deg);
   • -o-transform: rotate(45deg);
   • -ms-transform: rotate(45deg);
   • -moz-transform: rotate(45deg);
   • -webkit-transform: rotate(45deg);

 

Monday 3/25

1. InDesign for your Audio SlideShow Transcript
   • Character styles, Paragraph styles, Object styles, rounded corner options
2. Start adapting your English Research paper for your Audio SlideShow Transcript. Basically your Audio SlideShow is a summary of your English Research Paper broken down to
   • A summarized version of your INTRODUCTION (photos 1 - 2)
   • A summarized version of your CHAPTER 1 (photos 2- 6) - perhaps include Interview quote(s)
   • A summarized version of your CHAPTER 2 (photos 6 - 10) - perhaps include Interview quote(s)
   • A summarized version of your CHAPTER 3 (photos 10 - 15) - perhaps include Interview quote(s)
   • A summarized version of your CONCLUSION (photos 15 - 16)
   • The Transcript rubric is posted here

 

Wednesday 3/20

1. Take a look at an example Transcript for an Documentary Audio Slideshow by Michelle Chan 2012.
   • Basically your Audio SlideShow is a summary of your English Research Paper broken down to
     • A summarized version of your INTRODUCTION (photos 1 - 2)
     • A summarized version of your CHAPTER 1 (photos 2- 6)
     • A summarized version of your CHAPTER 2 (photos 6 - 10)
     • A summarized version of your CHAPTER 3 (photos 10 - 15)
     • A summarized version of your CONCLUSION (photos 15 - 16)
   • The Transcript rubric is posted here
2. Due today - in a single folder labeled "Username-Interview3"
   • 3rd raw audio file (.wav or .mp3 ) of interview
   • 3rd transcript of interview as .txt file (so it's easy to copy and paste without formatting problems into your webpage if necessary)
   • 3rd set of 5 of your best photos to be used in AudioSlideShow
3. Due today - use Reason to create background audio for your Documentary Audio SlideShow. Submit it as UsernamE-SlideShowBGAudio.mp3
4. Today - we'll start a Pro Tools Session for your Audio SlideShow that has
   • Stereo Audio track for Final Composition
   • Stereo Audio track for background music/audio
   • Mono Audio track for your narrator track
   • Stereo Audio tracks for your interview tracks
   • Practice transferring your session folder to/from different computers
5. Return your graded rubrics - discuss the regrading policy

 

Monday 3/18

1. Due today - implementing all your backgrounds (your choice - 1 for all pages or different for all pages)

 

Thursday 3/14

1. Due today - implementing SFXs for your buttons, create your own SFX for your buttons - record something relevant to your Documentary Topic

 

Wednesday 3/13

1. Due today - in a single folder labeled "Username-Interview2"
   • 2nd raw audio file (.wav or .mp3 ) of interview
   • 2nd transcript of interview as .txt file (so it's easy to copy and paste without formatting problems into your webpage if necessary)
   • 2nd set of 5 of your best photos to be used in AudioSlideShow
2. Due today: header banner image sprite online

 

Monday 3/11

1. Practice imageSprites so you can do it on your own
   • download and setup these files as directed in class
2. Due today - in a single folder labeled "Username-Interview1"
   • raw audio file (.wav or .mp3 ) of interview
   • transcript of interview as .txt file (so it's easy to copy and paste without formatting problems into your webpage if necessary)
   • 5 of your best photos to be used in AudioSlideShow
3. Also due by the END of today - a single image sprite online on your website. I will grade this assignment by looking at your Documentary Website, hovering over and clicking on buttons
4. Due Wednesday: header banner image sprite online

 

Wednesday 3/6

1. Setup files for Documentary Website AudioSlideShow - see instructions here
   • download and setup AudioSlideShow files
   • practice editing/cropping photos
2. Due Monday - in a single folder labeled "Username Interview 1"
   • raw audio file (.wav or .mp3 ) of interview
   • transcript of interview
   • 5 of your best photos to be used in AudioSlideShow
3. Also due by the END of Monday - a single image sprite of your navigation buttons like this one below

 

Monday 3/4

1. Look at a few examples Documentary Websites
2. Setup files for Documentary Website
   • style sheet
   • template
   • content pages
   • css rules

 

Monday 2/25, Wed 2/27 and Thu 2/28

1. Introduction to Reason

 

Thursday 2/14

1. Pro Tools - MIDI editing and Score Editing
2. Pro Tools - using compression

 

Monday 2/11 & Wednesday 2/13

1. Pro Tools Tutorials - using software/virtual instruments - login here.
2. Drum Set Mic techniques with professional drummer Chris Ortega

 

Monday 2/4

1. For your animatic and animation to be uploaded to YouTube, we need to create a .mov for each of them because YouTube doesn't take .swf files that are normally published from Flash. Flash can export .mov but they end up being really large GB files and we have to do the exporting in the Student account (which requires you to move any special fonts to Student too) - point is that exporting a .mov from Flash can be more trouble that it's worth. So we'll use a SWF to MOV converter instead as directed in class or watch this video. Once you submit the files to me, I'll put them up on YouTube and then you can get your unique YouTube codes for your animatic.html and animation.html webpages. In the end you will submit the following .mov files:
   • UsernamE.mov
   • Title_of_Animation.mov
2. You also need to submit a thumbnail of your website that will be used as an image link like this. Parameters are:
   • MUST be a .jpg
   • MUST be width=100px and height=75px
   • MUST have filename: UsernamE.jpg
3. Learn how to use Portable Recorders for Documentary Interviews. You must do 3 interviews:
   • Primary Interview Source
   • Secondary Interview Source
   • Third Interview Source
4. Using the Studio

 

Monday 2/11-Wed 2/13

1. Pro Tools Virtual Instruments Tutorials - login in here.
2. Drum Set Recording Techniques

 

Monday 1/28-Wed 1/30

1. More time to draw, create movie clips and animate. And/Or work on your website graphics - image sprite buttons, backgrounds, headers, etc.
2. Deadline to complete your animation and narrative website is THURSDAY 1/31!!!! - CHECK website specs here

 

Thursday 1/24

1. Students who have completed the Juniors - Returning Survey
• AM - Ryan, Sheila, Sanjana, Emily
• PM - Adam, Annamari, Cameron, Caroline, David, Jordan, Juan, Justin, Kevin, Matthew, Stephen
2. We'll put together content for your Narrative Website - see website specs here - DEADLINE is Thursday 1/31
   • Story - audio of you reading your Flash Fiction - download these temporary audio file, code to implement audio on webpage
3. More time to draw, create movie clips and animate. And/Or work on your website graphics - image sprite buttons, backgrounds, headers, etc.

 

Wednesday 1/23

1. We'll put together content for your Narrative Website - see website specs here - DEADLINE is Thursday 1/31
   • Home - intro requirements
   • Story - Flash Fiction text, graphic novel thumbnail linked to PDF of Graphic Novel, audio of you reading your Flash Fiction
   • Photonarrative - assignment explanation, artiist statement, thumbnail linked to larger version of photo diptych
   • Illustration - assignment explanation, artiist statement, thumbnail linked to larger version of illustration
2. More time to draw, create movie clips and animate. And/Or work on your website graphics - image sprite buttons, backgrounds, headers, etc.

 

Monday 1/14 - Wednesday 1/16

1. More time to draw, create movie clips and animate. And/Or work on your website graphics - image sprite buttons, backgrounds, headers, etc.

 

Thursday 1/10

1. Intro to image SPRITES for using in navigation button rollovers
2. Intro to javascript in displaying videos as an overlay on top of a webpage with a zoom effect
3. More time to draw, create movie clips and animate.

 

Wednesday 1/9

1. Importing Illustrator files into Flash - NOT pngs or jpgs (pixelation when resizing), but rather vector Movie Clips
2. What are secondary actions in animation and how do you easily create them? In-Class demo or watch online tutorials
3. More time to draw, create movie clips and animate.

 

What Motivates Us?

• Autonomy: The urge to direct our own lives.

• Mastery: The desire to get better at something that matters.

• Purpose: The yearning to do what we do in the service of something larger than ourselves.

 

 

 

 

 

Senior Daily Agenda

Big Picture:

• Explorations Website Completed - Tuesday, May 21
• End-of-Year Exhibition - Tuesday, May 21

 

Tuesday 4/29

1. Overview of Explorations Project in WebAudio
2. Learn about Responsive Web Design - how to make your website respond to the device being used to view the site
3. Ben Mandeberg - Freestyle and UCLA alumni will come in to speak to you about importance of Web Production skills in the working world.

 

Tuesday 4/16

1. We'll work on your Narrative Website - english.html
   • Content: Introduction, 4 columns or writing, scan of graphic novel of one of your columns, and screenplay
2. Fill out Freestyle survey so we can evaluate Freestyle with your honest input/feedback. Check your email for the link to the sruvey - which counts as a graded assignment in all classes
3. Continue working on animation. Due today - please submit your animation folder so I can check your progress. I expect you to be animating in After Effects - title scene, beginning scenes

 

Friday 3/22

1. Tutorials: After Effects Swirls - animating custom paths to reveal art work such as swirls, hand writing
2. Fill out Freestyle survey so we can evaluate Freestyle with your honest input/feedback. Check your email for the link to the sruvey - which counts as a graded assignment in all classes
3. Continue working on animation. Due today - please submit your animation folder so I can check your progress. I expect you to be animating in After Effects - title scene, beginning scenes

 

Tuesday 3/19

1. Continue working on animation

 

Monday 3/12 & Friday 3/15

1. Goal: record and edit all audio for animation including music, dialogue, SFXs. By end of Friday submit a folder with edited audio clips for each scene - labeled scene1.wav, scene2.wav, etc.

 

Friday 3/8

1. Work on art for animation

 

Tuesday 3/5

1. After Effects -Puppet Tools for Character Animation

 

Friday 3/1

1. After Effects - 3D Space

 

Tuesday 2/26

1. Submit a Profile Website thumbnail that is 100x75 px, UsernamE.jpg for this webpage
2. Share your Screenplay with me so I can read it
3. After Effects - Type & Music

 

Friday 2/15

1. After Effects - Parenting & Nesting

 

Tuesday 2/12

1. After Effects - Transparency

 

Thursday 2/7

1. Final Music Video Items
   • Make video.zip and music.zip for people to be able to download your files
   • Make a thumbnail for your website: 100x75px UsernamE.jpg
   • Check your website online and check that your Project Listing Page link foes to the right pages
2. We'll start our Narrative Unit
   • Overview of the unit
   • Website content - see http://www.freestyle.mvla.net/narrative2
   • After Effects Tutorials

 

Friday 1/25 - Friday 2/1

1. Music Video Website must be completed by 1/31 - Rubric here
2. Showing your website to all classes on 2/1 with Music Video screening

 

Tuesday 1/15, Thursday 1/17, Friday 1/18

1. Work on CD Case Art and Website Graphics
2. CD Case Art due Friday - 1/18 - see whiteboard for how to submit the CD Case Art or this webpage
3. Music Video Website must be completed by 1/31 - Rubric here

 

Friday 1/11

1. We'll put together files for your Music Video website
   • Websites/music_video.html
   • Websites/project6/p6-script.js
   • Websites/styles/p6-styles.css
   • Websites/project6/index.html redirects to Websites/music_video.html
   • Websites/project6/pages/index.html redirects to Websites/music_video.html
2. Here's how we'll display your music video.
3. CD Case Art due Friday - 1/18
4. Music Video Website must be completed by 1/31 - Rubric here

 

 

What Motivates Us?

• Autonomy: The urge to direct our own lives.

• Mastery: The desire to get better at something that matters.

• Purpose: The yearning to do what we do in the service of something larger than ourselves.

 

 

 

 

 

 

 

 

 

Text to be hidden Layers Mag Tutorials	Text to be hidden Layers Mag Tutorials
Web Design Resources
thebestdesigns.com - an excellent source for website design trends and examples webbyawards.com - lists of award winning sites for design and content in lots of different categories thefwa.com - Favourite Website Awards- British site that lists award winning websites thedesigninspiration.com - more design inspirations if you get stuck w3schools.com - an excellent site to learn coding skills for HTML, CSS, javascript, jQuery, PHP, etc. CSS Zen Garden - various examples on the power of CSS to format the SAME content in various different appearances Freestyle Network Setup - here's how the system is setup to give you a better understanding of the limits of your network account Local vs Remote Concepts - What's the difference between Local machine/computer and Remote machine/computer Uploading/Downloading to the Freestyle Webserver - connecting to the Freestyle webserver so you can "Put" and "Get" files with Dreamweaver when you work at home or at Freestyle CRAP - Design Concepts - Contrast, Repetition, Alignment, Proximity & Usability More about CRAP Interactive Frequency Chart - where do instruments reside on the spectrum of audio frequencies Paper Prototyping 1 | Paper Prototyping 2 | Paper Prototyping 3 - examples of why you should draw your website prior to building your website. HTML Tags that surround visible content on a webpage and that act as instructions for web browsers to layout and format content. HTML Tags are NOT VISIBLE. Basics of a webpage <!doctype html>, <html>, <head>, <title>, <body> Content tags <header>, <nav>, <article>, <section>, <figure>, <footer>, <div>, <p> Media tags <img>, <audio>, <video> Type: bulleted or unordred lists <ul>, list items <li>, numbered or ordered lists <ol>, heading 1 <h1>, heading 2 <h2>, heading 3 <h3>, anchors or links <a href> Behing the scenes - tags for non-visible content like the kitchen utensils (tags) to help to make the meal (website) Meta <meta> Internal styles <style type="text/css"> External styles <link href="pathtofile.css" rel="stylesheet" type="text/css"> Javascripts <script type="text/javascript"> Styles Div or Box Model - effectively using style properties of width, height, margin, border, padding for determining true width and true height of divs/boxes/containers of web content Position - effectively using style property position attributes of relative, absolute and fixed for web content layout Styles of HTML tags, classes, ID Compoound styles Type properties of font-family, font-size, font-wieght, font-style, color, Cascading Style Sheets (CSS) Why use external styles? What are the different types and varying purposes of external style sheets? How do you create, attach, edit, and delete an external style? What are the default styles to start with for any web project? When do you use internal styles? 980 x 600 | 980 x 625 | 980 x 650 | 980 x 680 | 1000 x 700 | 1000 x 750 | 1024 x 768 - examples of various page size examples Color Schemes 1 - Kuler, Color Schemes 2 - use these sites if you need help with choosing complimentary colors for a design Font Symbols - there are a few fonts that can be used for simple icon like images Backgrounds Small repeating background images - best and bad practices when using a single small image to repeat itself like tiles covering the screen. Background images that always centers itself to the browser window - best and bad practices when using a single large image to always center itself to any size browser window. Background images that resizes to always COVER the browser window - best and bad practices when using a single large image to always cover the webpage background regardless of browser window size. In other words, the background image resizes to the browser window. Videos as backgrounds - how to use use videos as backgrounds. Note this technique does NOT work on mobile devices (tablets and phones) Audio on webpage options HTML5 Audio / Background Music with default controller - detecting if user's browser is Firefox in order to play .ogg files because Firefox doesn't support mp3 files HTML5 Audio / Background Music with text of image controller - example and code to have background music and a simple text or image controller for you webpage, detecting if user's browser is Firefox in order to play .ogg files because Firefox doesn't support mp3 files Detecting Flash for alternative content - example and code to detect if a user's browser has Flash Player enabled to display Flash content or to display alternative non-Flash content if Flash Player is not enabled Auto centering pop-ups - example and code to make a pop-up window position itself directly in the center of the user's browser screen instead of the default top left Auto centering pop-ups for WIDE diptychs - example and code to make a pop-up window position itself directly in the center of the user's browser screen instead of the default top left specifically for WIDE DIPTYCHS HTML 5 starter code - code that will help make HTML5 code function better Fixed Position content - CSS rules to make content fixed to a position in a browser window Image Sprites for Rollover Buttons - example and code to use a SINGLE image for all rollover button effects Button SFX for hover - example and code to make any text of image link play audio when hovered over Button SFX for clicks - example and code to make any text of image link play audio when clicked YouTube Video Display - 3 examples and code that will display a YouTube video as an overlay on top of a current webpage V1-Center Zoom V2-Wide then Full V3-Thin then Full FancyBox - cool display as an overlay on top of your current webpage Displaying a SINGLE IMAGE with an overlay on top of your webpage Displaying a SET OF IMAGES with an overlay on top of your webpage Displaying a SINGLE IMAGE WEBPAGE with audio background (audio such as you performing your Artist Statement) with an overlay on top of your webpage Audio Slide Show Example - this is how your Junior Documentary Audio Slideshow will be presented. Implementation instructions here. Content Animation Transitions - Various methods to make content animate on and off Fading on/off V1 Fading on/off V2 Sliding Horizontally Sliding Vertically Shuffling Content (like cards) Scrolling (not jumping) Content Vertically Horizontal Accordion Panels - displaying columns of text/images, uses server-side include files Photogalleries - Various kinds of photogalleries Photogallery V1 - thumbnails, main image fades in/out Photogallery V2 - thumbnails, main image slides right/left Photogallery V3 - prev and next buttons, no thumbnails, main image fades in/out Photogallery V4 - autoplay to next image in preset time, prev and next buttons, clickable indicator dots, no thumbnails, main image fades in/out Parallax effect - interesting effect of using 2D images/content to create a 3D effect

 

Leo Florendo
Web Production & Audio Engineering Teacher

 

Instructor: Leo Florendo

 

Email: Leo.Florendo@freestyle.mvla.net or Leo.Florendo@mvla.net

 

Voicemail: 650-940-4680

 

 

 

 

 

 

Leo Florendo is the Program Coordinator at Freestyle Academy. He is also responsible for teaching Web Production and Audio Engineering at Freestyle Academy since its beginning in the Fall of 2006. Applications that he teaches in his classes include Adobe Dreamweaver, Flash, After Effects, Photoshop, Illustrator, Apple Garageband, Digidesign Pro Tools, and Propellerhead Reason. He also is the System Administrator for Freestyle Academy managing all 70 Apple Computers of various models. He also teaches classes at Foothill College Krause Center for Innovation - currently an Intro to InDesign class and Reason class.

 

Single Subject Teaching Credentials in

• Computer Concepts and Applications
• Introductory Mathematics
• Science: Physics (Examination)

 

Crosscultural, Language and Academic Development (CLAD) Certificate
No Child Left Behind (NCLB) Qualification in Core Subject: Science

 

Degrees:

• BA 1988 UC Santa Cruz - Physics & Math
• MA 2003 San Jose State University - Education: Instructional Technology

 

Prior to becoming a faculty member at this Academy, Leo Florendo was at Los Altos HS from 1997-2006 (9 years) teaching AP Physics, Physics, Geometry, Algebra II, and Pre-Engineering. He was

• WebMaster from 2000-2006
• Science Technoogy Engineering & Math (STEM) Summer Engineering Camp Instructor & Internship Coordinator 2003-2006
• Faculty Advisor to the LAHS Robotics Team 1997-2006
• Site Technology Coordinator 2000-2006
• Drill Writer and Instructor for the LAHS Marching Band 1999-2006

 

Other experiences

• English conversation teacher in Japan at the Kure YWCA (1993-1996) in a suburb of Hiroshima where he met and married his Japanese wife in 1996 and they now are enjoying life with their first child, Mia.
• Brass Instructor for Velvet Knights Drum & Bugle Corps, Summer, 1993
• 4 Year Peace Corps Volunteer (1988-1992) in the South Pacific Kingdom of Tonga teacher of  Science, Math, English and Music in the 250 student, Grades 6-11 Methodist school called Taufa'ahau/Pilolevu College.
• Banana Slug Alumni of Univ. of CA Santa Cruz, Stevenson College (1983-1988) 
• Alumni of Santa Clara Vanguard Drum & Bugle Corps as an A-Corps French Horn in 1984 & 1985, Alumni Corps French Horn in 2002, 2004, & 2007
• Fencer at UC Santa Cruz- Sabre & Foil
• Graduate of Redlands High School (1983), Redlands, CA
• PADI Certified Rescue Diver, Deep Diver, and Night Diver
• Born in Philippines
• Has traveled to many US states, Canada, Mexico, Puerto Rico, Bahamas, England, Belgium, Netherlands, Italy, (lived in) Nigeria, Maldives, Thailand, Malaysia, Singapore, Hong Kong, Philippines, Taiwan, Bali, New Zealand, Australia, Korea, (lived in) Japan, Vanuatu, Samoa, Fiji and (lived in) Tonga.
• Speaks English, Japanese, and Tongan