WD-3 - Class 06 - 2011

Subject WD-3 - Web Design 3
Competencies

CUFDIG505A.1 - Design Information Architecture (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/WD3
                         (username & password = student)

 

Introduction to HTML 5

 

Today we will be covering the following topics:

 

HTML 5 - what is it?

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).

Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web is a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and APIs for complex web applications.

In particular, HTML5 adds many new syntactical features. These include the <video>, <audio> , and <canvas> elements, as well as the integration of SVG content. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header>, and <nav>, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed.

Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents.
(From Wikipedia <http://en.wikipedia.org/wiki/HTML5>)

 

What is it good for?

Some instances of how you might use aspects of HTML5:

 

When can we use it?

Some browsers are already implementing part of the specification, but each browser has implemented different elements thus far:

http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/

The short answer is that we can start using it now, but we can't be sure that users will be able to get the benefits of the new standard if their browser doesn't support the elements being used.

There are lots of work-arounds mostly using JavaScript that will use HTML5 where it detects the browser has the capabilities to display that content. if tags cannot be displayed, then the browser will ignore them, but you generally need something to replace that content if the HTML 5 can't be seen.

This online guide http://diveintohtml5.org/ is an EXCELLENT resource to understanding not only HTML5 but how web standards are developed. we can use this guide as a reference tool for developing, and also use the handy links to other resources.

One of the best and most beautiful works I've seen with HTML5 so far is the Arcade Fire's The Wilderness Downtown which requires the Google Chrome browser. It's an experimental "film" that uses multiple browser windows, and also incorporates google images into the video in real-time. You can type your home address into the field and your street will be incorporated into the video footage.

 

Video & Audio Compatibility Issues

Unfortunately, HTML5 still doesn't solve the Video/Audio codec problems facing web developers...

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-June/020620.html

Compatibility

VIDEO

Firefox
3.5+

Firefox
4+

Opera
10.5+

Opera
10.6+

Chrome
3+

Chrome
6+

Safari
3+

IE9

iOS /
Android

Ogg

X

X

X

X

X

X

 

 

 

MP4 (H.264)

 

 

 

 

X

X

X

X

X

WebM

 

X

 

X

 

X

 

 

 

AUDIO

Firefox
3.6+

Safari
5+

Chrome
6+

Opera
10.5+

IE9

Ogg Vorbis

X

 

X

X

 

MP3

 

X

X

 

X

Wav

X

X

 

X

X

So it seems that the best way forward is to provide all the options necessary to enable all users to access video & audio content.

 

An example of Video deployment using HTML5

The site "Video for Everybody" is a great example of a no-Javascript method of providing video playback for (hopefully) any browser. The only problem with this and any method you will find, is that you need to save 3 versions of your video in different Codecs (MP4, WEBM and OGV), plus you will need a Flash version to fall back upon if the user's browser can't handle the HTML5 <video> tag.

CONVERTERS

you may find quite a few free video/audio converters out there if your current software won't convert to the necessary formats - especially OGG and WEBM video formats. Here are a couple of suggestions:

http://www.mirovideoconverter.com/

http://firefogg.org/make/

 

DETECTORS

There are other examples of code that do use detectors to figure out what your browser is capable of. Most of these require JavaScript - some may use jQuery libraries or other JavaScript Libraries.

Here is an example of the Video for Everybody code which does not require JavaScript:

<!-- "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
=============================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4 -->
<video width="640" height="360" controls autoplay>
<!-- MP4 must be first for iPad! -->
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /><!-- Safari / iOS, IE9 -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+ -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="player.swf" />
<param name="flashvars" value="autostart=true&controlbar=over&image=poster.jpg&file=http://clips.vorwaerts-gmbh.de/VfE_flash.mp4" />

<!-- fallback image -->
<img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" />
</object>
</video>

<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>
<strong>Download Video:</strong>
Closed Format: <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">"MP4"</a>
Open Format: <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">"OGG"</a> /
<a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">"WebM"</a>
</p>

<!-- ========================================================================================== -->

 

Discuss:

What are the implications of HTML5 and Flash for both desktop and mobile media development?

 

 

 

Useful Links

http://diveintohtml5.org/

http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5

http://html5demos.com/

http://thenextweb.com/shareables/2010/11/02/adobe-flash-vs-html5-settled-by-game-of-pong/

http://www.modernizr.com/

http://camendesign.com/code/video_for_everybody

Arcade Fire - The Wilderness Downtown (requires Chrome Browser)

 

use any extra time to work on your assessment tasks.