Week 12
11/19
Multimedia features of HTML5. HTML5 introduces a host of new features, the most visible are sound, video and the canvas element. Activity: We will incorporate these elements into a web page. 8
Activity: In-class final Workshop #2.
Homework
1) For the class: Use audio, video or canvas to sell your final Project. 2) For the final: Create home page for the final. Read chapter 17. Due: The following week. Third Quarter Assessment: Have your Final Worksheet including all 7 steps, photoshop comp and first page ready and uploaded by Wednesday Night. So I can grade them by next Friday.
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.