How to use this book
How HTML 5 came to be
HTML 5: New HTML 5 Tags for Designers
Understanding HTML 5
This section introduces HTML 5 to the designer.
Working with HTML 5
The goal of this section is to draw attention to the new HTML tags a designer is likely to use. New tools that can be applied today are reviewed with examples on how to use.
Take HTML 5 Tags on the road
A sample site using HTML 5 tag technology is diagnosed. The sample site, a basic Corporate site design, will look to highlight the following new HTML Tags:
HTML 5: CSS3 style for Designers
The goal of "CSS3 style for Designers" is to show how Cascading Style Sheets 3, or CSS3, builds on top of CSS1 and CSS2 to deliver a rich and comprehensive toolset the designer can use for their Web sites.
The goal of this section is to introduce CSS3 to a new user. The following topics will be covered:
Working with CSS3
The goal of this section is to highlight key features of CSS3 that a Designer will be particularly interested in. The following sections will be covered:
Take CSS3 on the road
A complete CSS3 Web site is broken down for the designer. The section will diagnose the design highlighting tools and techniques the designer can use on their own Web projects. The following key CSS3 technologies will be presented in a single site, a mock Blog site:
HTML 5: Illustration and Images in HTML 5 for Designers
Designers have had limited control with their graphics in Web sites. It has been JPEG or GIF images or bust. Not a lot of choice. To add interactivity designers have relied on plugin technologies such as Adobe's Flash. The challenge this brings is that you have to ensure that your site visitor has the correct plugin installed. This section reviews the many different image controls HTML 5 provides from new Bitmap image formats through to interactive vector based image control in 2D and 3D.
Understanding Images in HTML 5
New image formats, both bitmap and vector based, are introduced with HTML 5. In this section you will learn which formats you should be using for your web sites.
Working with new image formats in HTML 5
The goal of this section is to focus in on the CANVAS tag and illustrate how you, as a designer, can use it in your Web site designs.
Taking PNG and CANVAS control on the road
Arguably, the two most impressive image additions to HTML 5 are the complete ratification of PNG and the new CANVAS vector image tag. In this section, you will build a Web site using PNG for the photo-realistic images with vector images and animation developed using CANVAS. The example site, a mock online store, will leverage the following:
HTML 5: VIDEO and AUDIO in HTML 5 for Designers
Video has exploded over the Web. It can be argued that sites such as YouTube.com have permanently changed how people interact with video. You simply don't need cable TV anymore. In this section you will learn about the new ways in which video and audio can be easily embedded into your Web applications.
Understanding Video and Audio in HTML 5
The demand for video delivery over the Web is a critical element to most Web sites. Video, however, is complicated and bulky with failed industry support. Imagine requiring a different TV for each program you watch. This is the state of video on the Web today. HTML 5's VIDEO and AUDIO tags move to bring a single, unified standard for how you add video to your Web sites and eliminate the need for you visitors to constantly install additional third party software.
Working with Video and Audio Tags
There are two elements to controlling rich media content: the client and the server. In this section you will learn the details of how to control the client piece, the HTML 5 VIDEO and AUDIO tags, and review the different ways media can be delivered by servers.
Take HTML 5 Video and Audio on the road
This section analyzes a complete Web site built using Ogg Vorbis and H.264 Video/Audio. The objective the sample site, a mock YouTube.com like site, is to demonstrate using the following:
This section takes the most popular AJAX libraries and demonstrates how you can use them in your Web site designs.
Matthew David is a specialist developing rich Web solutions using technologies like Flash and the latest Web design techniques. In addition, he works in online sales, marketing, and search engine optimization, with the aim of driving business to customer sites. Matthew partners with many companies as a business strategist, works closely with the World Wide Web Consortium Group (W3C), and is on Adobe's Advisory team.
. a handy introduction to HTML5. It presents the major concepts
in a logical sequence, and the topics flow easily from explanations
to bite-sized projects, flavored with practical advice.
-Sam Wan, UI engineer
. puts solutions at your fingertips; the content is concise and
easily referenced, and the accompanying projects help convert
learning to real-world action.
-Toby Pestridge, Toby James Creative
Matthew has provided us a great frame of reference of what's to
come and what we can start using now!
-Conrad Fuhrman, partner/Lead Developer ThreeSphere LLC
. introduces you to key concepts, and dives in for a
comprehensive look to prepare you for tomorrow's internet.
-Joel Martinez, Codecub.net
.presents new and seemingly complex topics in a practical, easy
to understand manner. This book will bring programmers and
designers into the next generation of web development..
-Ryan Moore, author of Foundation ASP.NET for Flash
...fine survey highly recommended for any web designer's library. It teaches how to create images with SVG and Canvas, how to embed video and audio into a web page, how to use the new HTML5 elements, and much more, and comes from a web specialist. Color screen shots and sample code examples make this a fine winner."---California BookWatch