HTML5

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.

Introduction


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 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.








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 YouTube.com 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