Week 12
11/13
Multimedia features of HTML5. HTML5 introduces a host of new features, the most visible are sound, video and the canvas element. Activity: Incorporate multimedia.
Activity: In-class final Workshop #2.
Homework
1) For class: Use audio, video or canvas to sell your final Project. 2) For final: Finish the remaining pages of your website for peer review. Read chapter 17. Due: The following week. Third Quarter Assessment: Have your Final Worksheet including all 7 steps, photoshop comp and opening page ready and uploaded.
Materials
Additional materials for this unit can be found by following these links:
Goal
The goal of this unit is to:
- To incorporate Video, Audio and the Canvas element into your website.
Outcomes
At the end of this unit, students will have:
- Coded a video for the web and embedded it in a page.
- Exported audio into all necessary formats and embedded it into a page
- Set up the canvas element and is able to create basic shapes.
- Used the illustrator plugin to incorporate vector art into a page.
Step-by-Step
| 20 | Review homework and answer questions. |
| 40 | Demo: Canvas |
| 10 | Break |
| 40 | Demo: Audio & Video |
| 40 | Final: Progress Review |
Quick Primer on Using Video
Video and canvas add a dimension of multimedia to the web experience that goes well beyond print. This should excite many of you but it can be daunting at the same time. The language of story telling on video, tools like After Effects, Final Cut Pro and Premier and the production requirements of making the videos are another world altogether.
When it is done right, video gets people’s attention, conveys emotion and personality, and engages engages people in a way that photo and text alone can’t. It can improve the website experience but it can also cripple it, suck up bandwidth, drive people away, and suck the energy out of what could otherwise be a good website by attracting too much of the attention.
Ask yourself, when you use video:
- What are the goals for my video strategy?
- What types of videos will I post?
- Will I be concepting, shooting, editing and uploading videos?
- How can I measure success or failure?
That said, Flash integrates well with video. Too bad that Apple threw it a monkey-wrench by not supporting it on its iPhone or iTablets.
The MetaProject exemplifies how flash integrates with video seamlessly working together.
You can, however, use Google’s swiffy to convert flash sites to HTML5, SVG, and javascript.
Problems of keeping video in the background like images. It takes a lot of room, requires a lot of bandwidth and careful planning, and the right video. Random Dance uses video on the splash page, and then uses it throughout the site.
Still, video can be difficult to integrate, so think about that as you work on your final. You need not integrate video or canvas in your final, just show me that you can do it in the homework.
News and External Resources
Subscribe to the following two magazines using (RRS): A list Apart has been a beacon for web development since the web’s earliest days with timely articles, and it still remains one of the best resources out there. Smashing Magazine is another popular web design magazines that you should be reading.
There are a zillion other resources on the web, and you need to plug in to stay up to date. As this especially exciting time shows, the best is yet to come. Plug in and keep abreast of the creative solutions that become standardized practices.
Though the time it has taken each of you to understand HTML and CSS has varied, everyone should be on board by now. The more you code, the better you become.
All of you should be reaching out to the larger web community. If I have been a cheerleader that encourages you to do that, then I can feel confident that you will fish for a lifetime.
- Opera Web Standards Curriculum
- Web Platform Docs
- Google University
- W3 resources to help you teach or learn modern web development
- W3 HTML Elements
- W3 CSS
Final Assignment Links
Updated links that I expect to be up and live as they will be graded for your final grade.
Example of landing page from several semesters ago.
- Website Analysis*
Week 3
- landing page— links to your assignments and a picture next to your name.
- HTML markup of Analysis
- Worksheet: behind the scenes on creative process for midterm (7 steps)*:
Week 4
- Portfolio exhibiting the CSS selections
- HTML Wire Frame from PhotoShop comp
Week 5
- incorporate CSS Layout Strategies in web site
Week 6
- Quiz
- Peer Review Notes / Advice
Week 7
- Typography Poster
- Finished Midterm: Portfolio
Week 8
- Final Worksheet*
Week 9
- Responsive Redesign of Portfolio
Week 10
- CSS3 Collateral
- Class Exercise
Week 11
- CSS3 Animatics
- Class Exercise
Week 12
- Final: Modular Navigation
Week 13
- Multimedia Demonstration
Week 14
- Forms
- Peer Review Notes / Advice
Week 15
- Final — You have 5 days extra to hand it in before I determine my final grade
Week 2
Each assignment exhibits a skill. If you have used that skill in building your portfolio, link to that page and explain how it satisfies the homework. For example, for Week 11 CSS Animatics, if you used a hover that fades in your final, point to the page that exhibits that feature and let me know where to look if it is not completely obvious.
The final website sells something. It does not have to be lots of pages but the quality has to be ready for public scrutiny. It should have many of the topics we covered, like CSS3, Multimedia, PHP, forms, media queries, etc.
Definitions
These are the terms that participants should be familiar with during this unit:
- Codec
- A codec is a device or computer program capable of encoding and/or decoding a digital data stream or signal. The word codec is a portmanteau of ‘compressor-decompressor’ or, more commonly, ‘coder-decoder’. A codec (the program) should not be confused with a coding or compression format or standard – a format is a document (the standard), a way of storing data, while a codec is a program (an implementation) which can read or write such files. In practice “codec” is sometimes used loosely to refer to formats, however.
- A codec encodes a data stream or signal for transmission, storage or encryption, or decodes it for playback or editing. Codecs are used in videoconferencing, streaming media and video editing applications. A video camera’s analog-to-digital converter (ADC) converts its analog signals into digital signals, which are then passed through a video compressor for digital transmission or storage. A receiving device then runs the signal through a video decompressor, then a digital-to-analog converter (DAC) for analog display. The term codec is also used as a generic name for a video conferencing unit.
- H.264
- Out of the three standards, H.264 has the momentum, the quality and the recognition among media professionals. It also has the backing of a massive consortium of some of the industry’s biggest companies, including Microsoft and Apple, via MPEG LA. And therein lies its critics chief complaint: H.264 is not free.
- For consumers, yes, it’s free. And most developers won’t have to worry about licensing issues (for now). However, that may not be the case for video distribution sites. The ins and outs of H.264 patent licensing go well beyond the scope of this article (and gets really confusing to boot) but suffice it to say that people have questions.
- For most developers, the patent issue will largely boil down to a philosophical argument between open standards and image quality. H.264 provides a higher image quality and better streaming than Ogg (see below) and VP8 (WebM). It also enjoys a performance advantage due to hardware acceleration on multiple platforms including PC and mobile devices.
- Lastly, consider ease of production, not an insignificant issue. All major video editors, including Final Cut, Adobe Premiere and Avid, export to H.264 format. The same can’t be said for Ogg Theora or VP8. If your shop is producing its own video, and a lot of it, using H.264 exclusively will shave a big chunk off your workflow.
Ogg Theora
- Ogg is the only standard that is truly unencumbered by patent. However, it is also arguably the lowest in quality, though not by much. Multiple head to head comparisons against H.264 have favored the latter. While Ogg encodes to a slightly tighter file, it produces a lower image quality than H.264 and suffers even more in its streamability.
VP8 (WebM)
- Between the two extremes of high quality but patent-encumbered (H.264) and marginal quality but royalty-free (Ogg) rests VP8, probably the most controversial standard of the three. So far, tests have shown that H.264 provides a slightly higher quality video than VP8 but that difference is negligible for most commercial purposes.
- The bigger question is that of open standards. On one side of the debate, you have Google backing away from H.264 in favor of its “open” WebM standard, even going so far as to release WebM under a Creative Commons license. On the other hand, you have pretty much everyone else arguing that, in this case, “open” may not really mean “open”. Using the example of the JPEG lawsuits, for example, Microsoft points out that even if WebM is not patent encumbered by Google’s account, without explicit user indemnification from Google, many companies and individuals could still open themselves to patent infringement lawsuits, ostensibly from MPEG LA, by deploying WebM video.