HTML5: Designing Rich Internet Applications

Implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is changing the Web development game with this full-color, project-based treatment that shows you-not just tells you-what HTML5 can do for your Web sites. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away. The companion website, visualizetheweb.com, is packed full of extra information, online code libraries, and a user forum, offering even more opportunity to learn new skills, practice your coding and interact with other users.

Table of Contents:
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

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.

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