Now Australia's Biggest Toy Shop

We won't be beaten by anyone. Guaranteed



Product Description
Product Details

Table of Contents


How to use this book

  • Review the technology covered
  • Learn how to design with the technology
  • Analyze a project using the technology covered in section

How HTML 5 came to be

  • Why Tag based languages matter
  • Building HTML 5 from standards
  • Why should HTML 5 be important to you?
  • Which Web Browsers Support HTML 5
  • Beyond the PC: the browser is on your phone, your game system and even your fridge

HTML 5: New HTML 5 Tags for Designers

HTML 5 is the first major release of the HTML Web Standard in more than a decade. This release is comprised of several key sections (CSS3, CANVAS, JavaScript). The most fundamental changes come with the core TAG base language of HTML itself. In this section, you will be introduced to the new HTML 5 tags, how you can use them and what you need to look out for as you design you new Web sites.

Understanding HTML 5

This section introduces HTML 5 to the designer.

  • The rocky road from HTML 4 to HTML 5
    • CSS1 and CSS2
    • JavaScript grows up
    • XML adds data
    • Web 2.0 Applications and Solutions
  • What is included in HTML 5
    • Enhancements to core Tag Language
    • New Tags
    • Supplementing HTML Tags with CSS, vector graphics and scripting
  • Leveraging HTML 5 as the core to your Rich Internet Applications

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.

  • Changes to HTML
    • Modifications to sections of content
      • Using the SECTION tag
      • Using the ARTICLE tag
      • Using the HEADER and FOOTER tag
    • New features to groups of content
    • New Text Level semantic additions and changes
      • Using the MARK tag
      • Using the TIME tag
      • Using the PROGRESS tag
  • Working with FORMS
    • What has changed in HTML FORMS
    • Controlling the display of FORM elements
    • Displaying data with the DATAGRID and DISPLAY setting
  • Storing data locally
  • What is not being supported
  • How to gracefully migrate your sites to work with the new HTML 5 standard

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:

  • PROGRESS to load the site
  • Content formatted with SECTION, ARTICLE and HEADER/FOOTER
  • A section using new FORM elements, including the DATAGRID, will be shown

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.

Understanding CSS3

The goal of this section is to introduce CSS3 to a new user. The following topics will be covered:

  • Introduction to CSS
  • CSS as a designers tools
    • The format of CSS
    • Cascading your designs
    • Applying consistent design across your Web sites
  • Designing your Web page with CSS
    • Controlling font display with CSS
    • Positioning design elements with CSS
    • Creating interactivity with CSS
  • Working with a CSS Class
    • Controlling HTML tag display
    • Creating your own elements
  • Target Web browsers that leverage CSS

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:

  • Applying Font Control
    • Embedding fonts
    • Adding text effects
    • Increase your control over color
  • Discovering enhanced Border Control
  • Dazzling your audience with CSS3 Animation
    • Using Transitions
    • Applying CSS3 visual effects
    • CSS3 Animation
  • Delivering Solutions for the Mobile market

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:

  • Non-standard FONT
  • Advanced text formatting
  • Animation and transitions

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.

  • The tale of two image formats
    • Bitmap images - using JPEG, GIF and PNG images on the Web
    • Using Vector images on the Web
  • Introducing Vector Images to the Web
    • The long history of Web Vector images
      • The death of VML
      • The Success of Flash
    • Standards based Vector images
      • Introducing SVG
      • SVG's partner in crime: CANVAS Tag
  • 2D and 3D formatting with CANVAS
    • Illustrating with CANVAS
    • Creating 3D with CANVAS

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.

  • Adding the CANVAS tag to your Web page
  • Starting with the basics
    • Drawing lines
    • Adding color
    • Adding text
  • Controlling Shapes
    • Drawing Simple Shapes
    • Creating Line Paths for complex shapes
    • Merging it all together
  • Adding effects
    • Applying Transformations
    • Using Shadow effects
    • Integrating images
  • Bringing it all together
    • Adding interactivity with JavaScript
    • Displaying on the page

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:

  • 2D illustration with CANVAS
  • Introduce 3D perspective CANVAS drawing in your Web design
  • Integrate PNG graphics within CANVAS designs

HTML 5: VIDEO and AUDIO in HTML 5 for Designers

Video has exploded over the Web. It can be argued that sites such as 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.

  • The video explosion on the Web
    • Streaming media
    • Rich Internet Applications
    • Flash Killed the Video Star
  • Using Flash or SilverLight to deliver Video
  • HTML 5 VIDEO makes it all so simple
  • VIDEO tags support in Mobile phones

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.

  • Using HTML 5 Rich Media Tags
    • Controlling audio with AUDIO tags
    • Controlling video with VIDEO tags
  • Encoding video and audio for delivery over the web
    • Using Ogg Video
    • Using H.264 Video
  • Serving it is up old school
    • Using traditional video/audio servers to communicate with your HTML 5 code
    • When not to use the VIDEO and AUDIO tags

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 like site, is to demonstrate using the following:

  • Embedded VIDEO
  • CSS3 for page presentation with your video
  • Using JavaScript to control the video

HTML 5: JavaScript interactivity to your Web Designs

It is often stated that JavaScript is the glue that enables HTML to become interactive. JavaScript has matured into a programmable language that allows you to develop solutions that match the richness of traditional desktop solutions. The goal of this section is to show how the designer can leverage Open Source JavaScript Libraries to quickly build beautiful Web applications.

Understanding JavaScript

The goal of this section is to show how JavaScript can be used with HTML 5 by a designer to give exceptional visual control to the layout of the web page.

  • JavaScript as programming language
    • Developing JavaScript
    • Integrating JavaScript with CSS, HTML, SVG and CANVAS
    • Taking JavaScript to the next level with AJAX
  • Using AJAX in your work
    • Understanding what AJAX is
    • Data control with XML in AJAX
    • Library Manager with AJAX
  • Popular AJAX libraries
    • AJAX in the real world
    • Developing AJAX libraries

Working with JavaScript

This section takes the most popular AJAX libraries and demonstrates how you can use them in your Web site designs.

  • Working with AJAX Libraries
  • Using Adobe SPRY AJAX Libraries
    • Visual Controls
    • Animation
    • Data presentation
  • Microsoft ASP.NET AJAX Libraries
    • Visual Controls
    • Data management
    • Server integration
  • Additional Libraries
    • Popular Libraries
    • Integration with HTML 5

Take JavaScript and HTML on the road

The final exercise reviews how you can build complex, engaging Web sites using JavaScript and HTML 5 standards. The final site, a mock Social Network site, will leverage all of the technologies used in book with a specific focus on:

  • CSS3
  • HTML 5
  • JavaScript for interactivity

About the Author

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,

.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

Ask a Question About this Product More...
Write your question below:
Look for similar items by category
How Fishpond Works
Fishpond works with suppliers all over the world to bring you a huge selection of products, really great prices, and delivery included on over 25 million products that we sell. We do our best every day to make Fishpond an awesome place for customers to shop and get what they want — all at the best prices online.
Webmasters, Bloggers & Website Owners
You can earn a 5% commission by selling HTML5: Designing Rich Internet Applications (Visualizing the Web) on your website. It's easy to get started - we will give you example code. After you're set-up, your website can earn you money while you work, play or even sleep! You should start right now!
Authors / Publishers
Are you the Author or Publisher of a book? Or the manufacturer of one of the millions of products that we sell. You can improve sales and grow your revenue by submitting additional information on this title. The better the information we have about a product, the more we will sell!
Back to top