Week 14

Week 14 – Topics

Create WordPress protosite
Video formats for web
jQuery
In-class lab time

Reading:
Chapter 6: “Phase 4: Build and Integrate” (pg 140-176)

Week 14 (Dec 1): Deliverables due: Final Design,  Final Content,  Home page & a landing page finalized in WordPress.

Week 15 (Dec 8): Deliverable due: Mobile web/app prototype.

Week 16 (Dec 15): Your final project presentations are Thursday, December 15. No late projects accepted.


Snapz Pro
How to make a movie capture of your desktop demo using Snapz Pro.

Six Easy Steps:
1) Download the most current version of Snapz Pro. The trial version is fine.

To capture a QuickTime Movie
2) To record a Movie, open Snapz Pro X with the hot keys (command shift 3 by default) and click on the Movie button.

3) Set the desired Frame rate in the Framerate: popup menu.

4) Set the options for including a Microphone track, and/or Mac audio.  Set the other options for Movie Capture.

5) Select the area to be recorded and either press the Return key, or  double-click within the selection. To stop recording the movie, press  the hot keys once more (command shift 3 by default).

6) Choose the audio, video and microphone track settings, and then click  on the Save Movie button to convert the temporary tracks to QuickTime movie format.

The Movie will be saved in the location set in the Send to: popup  menu in the Snapz Pro X main capture palette.

Working with Video on the Web

I highly recommend you read through this article: Video on the Web

Online Video Platform
http://www.brightcove.com/en/

Anyone who has visited YouTube.com in the past four years knows that you can embed video in a web page. But prior to HTML5, there was no standards-based way to do this. Virtually all the video you’ve ever watched “on the web” has been funneled through a third-party plugin — maybe QuickTime, maybe RealPlayer, maybe Flash. (YouTube uses Flash.) These plugins integrate with your browser well enough that you may not even be aware that you’re using them. That is, until you try to watch a video on a platform that doesn’t support that plugin.

HTML5 defines a standard way to embed video in a web page, using a <video> element. Support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet. At least, it doesn’t work everywhere. But don’t despair! There are alternatives and fallbacks and options galore.

<video> element support

IE      Firefox    Safari    Chrome    Opera    iPhone    Android
9.0+    3.5+       3.0+       3.0+          10.5+        1.0+       2.0+

And now for the knockout punch:

There is no single combination of containers and codecs that works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

For maximum compatibility, here’s what your video workflow will look like:

  1. Make one version that uses WebM (VP8 + Vorbis).
  2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
  3. Make another version that uses Theora video and Vorbis audio in an Ogg container.
  4. Link to all three video files from a single <video> element, and fall back to a Flash-based video player.

But support for the <video> element itself is really only a small part of the story. Before we can talk about HTML5 video, you first need to understand a little about video itself.

There are lots of video container formats. Some of the most popular include

  • MPEG 4, usually with an .mp4 or .m4v extension. The MPEG 4 container is based on Apple’s older QuickTime container (.mov). Movie trailers on Apple’s website still use the older QuickTime container, but movies that you rent from iTunes are delivered in an MPEG 4 container.
  • Flash Video, usually with an .flv extension. Flash Video is, unsurprisingly, used by Adobe Flash. Prior to Flash 9.0.60.184 (a.k.a. Flash Player 9 Update 3), this was the only container format that Flash supported. More recent versions of Flash also support the MPEG 4 container.
  • Ogg, usually with an .ogv extension. Ogg is an open standard, open source–friendly, and unencumbered by any known patents. Firefox 3.5, Chrome 4, and Opera 10.5 support — natively, without platform-specific plugins — the Ogg container format, Ogg video (called “Theora”), and Ogg audio (called “Vorbis”). On the desktop, Ogg is supported out-of-the-box by all major Linux distributions, and you can use it on Mac and Windows by installing the QuickTime components or DirectShow filters, respectively. It is also playable with the excellent VLC on all platforms.
  • WebM is a new container format. It is technically similar to another format, called Matroska. WebM was announced in May, 2010. It is designed to be used exclusively with the VP8 video codec and Vorbis audio codec. (More on these in a minute.) It is supported natively, without platform-specific plugins, in the latest versions of Chromium, Google Chrome, Mozilla Firefox, and Opera. Adobe has also announced that a future version of Flash will support WebM video.
  • Audio Video Interleave, usually with an .avi extension. The AVI container format was invented by Microsoft in a simpler time, when the fact that computers could play video at all was considered pretty amazing. It does not officially support features of more recent container formats like embedded metadata. It does not even officially support most of the modern video and audio codecs in use today. Over time, companies have tried to extend it in generally incompatible ways to support this or that, and it is still the default container format for popular encoders such as MEncoder.
What Works on the Web

If your eyes haven’t glazed over yet, you’re doing better than most. As you can tell, video (and audio) is a complicated subject — and this was the abridged version! I’m sure you’re wondering how all of this relates to HTML5. Well, HTML5 includes a <video> element for embedding video into a web page. There are no restrictions on the video codec, audio codec, or container format you can use for your video. One <video> element can link to multiple video files, and the browser will choose the first video file it can actually play. It is up to you to know which browsers support which containers and codecs.

As of this writing, this is the landscape of HTML5 video:

  • Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container. Firefox 4 also supports WebM.
  • Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM.
  • Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Google Chrome 6.0 also supports WebM.
  • Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.
  • Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
  • Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
  • Internet Explorer 9 supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE9 does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).
  • Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin. Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash.

iPads running iOS 3.x had a bug that prevented them from noticing anything but the first video source listed. iOS 4 (a free upgrade for all iPads) fixes this bug. If you want to deliver video to iPad owners who haven’t yet upgraded to iOS 4, you will need to list your MP4 file first, followed by the free video formats. Sigh.

What About IE?

Internet Explorer 9 supports the HTML5 <video> element, but Microsoft has publicly promised that the final version of IE 9 will support H.264 video and AAC audio in an MPEG-4 container, just like Safari and the iPhone.

But what about older versions of Internet Explorer? Like, you know, all shipping versions up to and including IE 8? Most people who use Internet Explorer also have the Adobe Flash plugin installed. Modern versions of Adobe Flash (starting with 9.0.60.184) support H.264 video and AAC audio in an MPEG-4 container, just like Safari and the iPhone. Once you’ve encoded your H.264 video for Safari, you can play it in a Flash-based video player if you detect that one of your visitors doesn’t have an HTML5-capable browser.

Issues on iPhones and iPads

iOS is Apple’s operating system that powers iPhones, iPod Touches, and iPads. iOS 3.2 has a number of issues with HTML5 video.

  1. iOS will not recognize the video if you include a poster attribute. The poster attribute of the <video> element allows you to display a custom image while the video is loading, or until the user presses “play.” This bug is fixed in iOS 4.0, but it will be some time before users upgrade.
  2. If you have multiple <source> elements, iOS will not recognize anything but the first one. Since iOS devices only support H.264+AAC+MP4, this effectively means you must always list your MP4 first. This bug is also fixed in iOS 4.0.
Issues on Android devices

Android is Google’s operating system that powers a number of different phones and handheld devices. Versions of Android before 2.3 had a number of issues with HTML5 video.

  1. The type attribute on <source> elements confused Android greatly. The only way to get it to recognize a video source is, ironically, to omit the type attribute altogether and ensure that your H.264+AAC+MP4 video file’s name ends with an .mp4 extension. You can still include the type attribute on your other video sources, since H.264 is the only video format that Android 2.2 supports. (This bug is fixed in Android 2.3.)
  2. The controls attribute was not supported. There are no ill effects to including it, but Android will not display any user interface controls for a video. You will need to provide your own user interface controls. At a minimum, you should provide a script that starts playing the video when the user clicks the video. This bug is also fixed in Android 2.3.

All above information about Video on the Web is written by Mark Pilgrim and is a great guide for understanding video on the Web as it is today.

 JavaScript
What is it?

Javascript is a programming language that forms the the last leg of the modern web design and development trinity: HTML, CSS, and Javascript. It allows for interactivity and greater control of web pages in the web browser. If HTML deals primarily with structure, and CSS deals with visual presentation, then Javascript is the brains or logic.

There are a number of code frameworks(jQuery, Moo Tools, Prototype) that have become prominent for their ease of use, most of which are within the reach of designer’s to learn a bit about and use to create new experiences. We will focus on jQuery, primarily because of the large community of developers and availability of useful plug-ins.

Where does it go?

JavaScript is commonly included in the head tag of web pages. Much like style sheets it can be embedded in the document or linked to an external file. To include an external file such as a plug-in we use something like the following piece of code:

<head>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
</head>

Embedded JavaScript looks like the following:

<head>
<script type="text/javascript">

$(document).ready(function() {

var randomImages = ['picture01','picture02','picture03'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("body").css("background-image","url(images/" + randomImages[rndNum] + ".jpg)");

});

</script>
</head>

There is also a practice of including scripts in between the </body> and the </html> tag at the bottom of page. This allows the page to load before runing any scripts. I’ve seen primarily for google analytics scripts, although it may be useful for others. Although the document ready function takes care of this for the most part.

jQuery Basics

See http://jquery.com/

jQuery is an open source library of javascript objects that we can use in our front-end web development and design. These objects are referred to as Plug-Ins and includes things like galleries, animation, as well as control of page elements through the DOM (Document Object Model) and much more.

Where do I start?

First step is to include the jQuery library in our pages:

Link to the Google CDN hosted jQuery library:
Google API Documentation: http://code.google.com

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>

Or alternately you can download it and include locally on your site:

Download the jQuery library and include it in a folder in your site structure:
http://docs.jquery.com/Downloading_jQuery

Example: Random Background Image

Create a Random Background image

<script type="text/javascript">

$(document).ready(function() {

var randomImages = ['picture01','picture02','picture03'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("body").css("background-image","url(images/" + randomImages[rndNum] + ".jpg)");

});

</script>

Here’s the example: http://www.everythingaboutweb.com/classes/examples/background_image/

Here are the files: http://www.everythingaboutweb.com/classes/downloads/background_image.zip

jQuery Plug-ins

Plug-Ins expand the function of the jQuery library. Our next step is to find a plug-in we want to use.

There are a couple of ways to search for plug-ins. One method is to search for them on jQuery. The interface is a bit lacking, but almost all plug-ins listed feature link to the plug-in site, which usually has the download and an example.

The other method is to leverage the wonders of the internet and search the blog lists for plug-ins. Articles abound. Pick a recommended plug-in, download and get it going.

We can inlcude plug-in files locally(a .js file in your js folder) and sometimes they are hosted on another site and we can just link to them like we do to include the jQuery library hosted at Google.

jQuery Slideshow and Gallery Resources

http://www.noupe.com/tutorial/more-on-jquery-slider-plugins-and-tutorials.html
http://www.smashingapps.com/2011/01/07/awesome-jquery-techniques-to-create-visually-impressive-photo-galleries.html
http://www.htmldrive.net/categorys/show/2/Slideshow+%26+Scroller
http://www.htmldrive.net/search?q=gallery&yt1.x=0&yt1.y=0&yt1=submit

List of jQuery Slideshows

http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-simple-itunes-like-slider/
http://www.serie3.info/s3slider/demonstration.html
http://www.htmldrive.net/items/demo/1060/super-cool-multiple-style-Slideshow-effect-with-jQuery
http://www.htmldrive.net/items/demo/928/Countdown-jQuery-Slick-Image-Slider-Plugin
http://www.htmldrive.net/items/demo/815/jQuery-Accordion-slide-Plugin

Check out this resource —> jQuery for Designers

Panning Slideshow Demo

http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/

http://www.everythingaboutweb.com/classes/examples/jQuery_slideshow/final_web/



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow

Powered by WP Hashcash




About Author

jamie

Instructor for Graphic Design 67