HTML5
Designing Rich Internet Applications
1st Edition
Published on 26. August 2010
Book
Paperback/Softback
285 pages
978-0-240-81328-8 (ISBN)
Description
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.
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.
Reviews / Votes
. 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
More details
Language
English
Place of publication
Oxford
United Kingdom
Publishing group
Taylor & Francis Ltd
Target group
College/higher education
Web designers, developers, producers, Flash designers
Illustrations
400 farbige Abbildungen
400 Illustrations, color
Dimensions
Height: 254 mm
Width: 189 mm
Weight
748 gr
ISBN-13
978-0-240-81328-8 (9780240813288)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Other editions
New editions
Book
09/2012
2nd Edition
Focal Press
€56.00
Shipment within 15-20 days
Person
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.
Content
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
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