Class on 11.7.13 HTML5 Audio

Here are the files we worked on in class: htmlAudio_inClass.zip

Today we will start with a bit more on Audacity and look at Exporting files.

http://audacity.sourceforge.net/download/plugins

Adding the LAME MP3 library. To export MP3 files you will ned to

  1. Download the .zip file with the library. Visit this page. Look for the download link in step 1 under the title Alternative zip download for Lame 3.98.2
  2. Right-Click and save to Documents. You can ignore the other steps on that page and follow these.
  3. Unzip the file
  4. When you export in Audacity just before the end it will ask you where libmp3lame.dylib is located. Point it to the file you unzipped in the previous steps.

HTML5 Audio

Then we will move to adding an HTML5 Audio player to your page.

We will use these to demo adding audio to your page: htmlAudio.zip

Documentation on the audio and source elements, the two new ones we’ll need to play HTML5 Audio
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

Browser support for <audio> element
http://caniuse.com/audio

Article that covers why we’re in the state we are in with audio.
http://24ways.org/2010/the-state-of-html5-audio/

Main tutorial article
http://www.elated.com/articles/html5-audio/

 

Other Articles
http://www.html5rocks.com/en/tutorials/audio/quick/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Links for Free IconsIcons
http://somerandomdude.com/work/open-iconic/
http://www.smashingmagazine.com/2011/12/29/freebie-free-vector-web-icons-91-icons/
http://www.hongkiat.com/blog/free-icon-sets-to-bookmark/
example of link requirement: http://medialoot.com/item/listicons-arrows-bullets-webfont/
http://zurb.com/playground/foundation-icons

Due date for Midterm Project Changed

I changed the due date to Thursday, October 24.

You will turn it in by uploading it to the mmp.bmcc.cuny.edu server and putting the URL in the comments for the midterm assignment on Blackboard. (it will be live shortly).

REMEMBER THAT THE MIDTERM CANNOT BE TURNED IN MULTIPLE TIMES. It is not like assignments where you can resubmit again and again. If you do have a problem or make a mistake when turning it in, let me know and I can clear your submission and let you submit again.

Background Images

Sometimes it can be tough to add in your background images. I make a short tutorial on how to do it. You can see it here: http://profstein.clarify-it.com/d/dzc3vf

Some quick pointers

 

The only trick to remember here is that in the url() you have to add the path from the CSS file to the image. To move up out of the css folder you use ../ Here is how the example below breaks down the url of ../images/dog-square.jpg

  1. ../  this says to move out of the css folder
  2. images/  this says to look in the images folder
  3. dog-square.jpg  this says to use the dog-square.jpg file

 

If you use this folder structure then all of your background images will start with ../images/

Class on Tuesday 10.8.13 More Photoshop

Today we are going to quickly talk about cameras and images and then jump into Photoshop and learn a bit more about how it works.

Before that though I want to point out that there is now page navigation at the top of the page which has info about classes, the midterm and resources (which will continue to grow).

Remember that the midterm is due soon. I’m changing the due date to Thursday

Cameras and Images

http://electronics.howstuffworks.com/cameras-photography/digital/digital-camera.htm

http://www.dummies.com/how-to/content/how-does-a-digital-camera-work.html

Other links from class

Photoshop

I’m going to show you how to use some of the basics in class. But there is always more. You could do a few courses on Photoshop and photo manipulation. To see video tutorials on how to do what we cover today and more you can visit this offical Adobe video tutorial page:
http://tv.adobe.com/show/learn-photoshop-cs6/

Files

We will use these files:

PhotoFiles.zip

Other Resources

These sites have some other tutorials. There are literally thousands more on the web. Want to do something? You can probably find a tutorial on it.

Tool Basics

when you see two things with a slash A/B, A is the shortcut for Windows (WIN) and B is it for Mac OSX (MAC)

  • Rulers and Guides
    • showing ruler in px
  • Selection
    • Marquee Tool:
    • Using Shift, Alt/Option, Ctrl/Cmd to change selection
    • Antialiasing
    • Selection > Grow
    • Similar
    • Filling a selection Alt+Backspace (WIN) / Option+delete (MAC)
  • Zooming (Scrubby Zoom)
  • Layers
    • Create New
    • Duplicate
    • Opacity
    • Blend Modes
  • Move Tool
    • Moving items
    • Selecting Layers
    • Transform options
  • Color Dropper
  • Text tools

Using Guides, Selection and Fill to do Mockup of web site

We will look at how you can plan out your site using blocks with text inside of them.

Some people extend this and go so far as to mock-up the entire design in detail with full text, images and everything. This practice is becoming less common with Responsive Web Design because it is just too difficult to keep up.

Fun with Content Aware filling

If we have time.

Class on 10.3.13

Today we will look at the midterm requirements and then do some CSS Positioning.

 

Midterm Requirements

There is a new Midterm Requirements page.

CSS Positioning

I created a CSS Floating page.

We will use these files to explore basic positioning: 10.3.13_example.zip

It is set up to do positioning, but we will have to add in the CSS to make it work.

 

Class on Tuesday 10.1.13 CSS Navigation and Positioning

Today we are going to finish up with the CSS we didn’t cover on Thursday of last week.

I’m going to recommend that instead of continuing to use my example files that you work with your assignment files today.

Last class we went through much of what you need to know to complete assignment 3 The one thing that we haven’t covered yet is how to style the navigation. We will cover that today and then give you some time to work on your projects

Navigation

I’m creating a separate post on Navigation so you can come back to it easier in the future. All of the navs you do in this class, and on most web sites, will basically use this model.

Navigation Post

Defining Sections of the page

Now you have almost everything you need to present a complete web page. All you really have left are the header and footer elements to learn. I’ve created a post on what the basic sections of the page are

Basic Page Sections

Reading and Videos

Watch the second CSS Video: http://www.youtube.com/watch?v=TCj9S-6Avs8
This one covers the basic styles for text elements on the page.

Read these Chapters to learn more about styling elements with CSS.

  • 11: CSS color
  • 12: CSS Text styling
  • 13: CSS Box styling