©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
HTML 5 and Solutions from Adobe
Paul Trani [email protected] www.paultrani.com @paultrani
Source Files:http://bit.ly/HTML5fromAdobe
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
1. HTML5 Fundamentals
2. Dreamweaver HTML5 Update
3. Illustrator HTML5 Pack
Agenda
5
Source Files:http://bit.ly/HTML5fromAdobe
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
CS5 Across Screens
512-hour preconference lab at MAX
Source Files:http://bit.ly/CS5AcrossScreens
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
HTML5 Fundamentals5
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
1. It’s not one big thingHTML5 is not one big thing; it is a collection of
individual features. So you can’t detect “HTML5 support,” but you can detect support for individual features, like canvas, video, or geolocation.
Five Things You Should Know About HTML5
5
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
2. You don’t need to throw anything awayIf your web application worked yesterday in HTML 4, it will still work today in HTML5. If you want to improve your web applications, you can.
Five Things You Should Know About HTML5
5
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
3. It’s easy to get started“Upgrading” to HTML5 can be as simple as changing your doctype. The doctype should already be on the first line of every HTML page. Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype:<!DOCTYPE html>
Five Things You Should Know About HTML5
5
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
4. It already works (kinda)Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already supported to a degree. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video, geolocation, local storage, and more.
Five Things You Should Know About HTML5
5
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
5. It’s here to stayTim Berners-Lee invented the world wide web in the early 1990s. He later founded the W3C to act as a steward of web standards.”W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.”
Five Things You Should Know About HTML5
5
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
HTML5 Popularity
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
iOS devices such as the iPhone and iPad do not support “plugin” content such as Flash and Silverlight. Instead, HTML5 is supported to fill this void.
Background
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Although cross-browser support for HTML5 and CSS3 is years away, some tags are supported in some major browsers. The big hold out is Internet Explorer, with 30% penetration. Internet Explorer 9 will have some HTML5 support but is currently in Beta.
Check out what browsers support which HTM5 tags:http://www.findmebyip.comhttp://caniuse.com
Browser Support
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Complete list: http://www.w3schools.com/html
The <header> TagThis tag specifies items contained in headings, subheadings, and other preliminary information. It can enclose other tags, such as <h1> between its opening and closing tags.
HTML5 Tags
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
The <video> TagNearly all browsers have some support for the HTML5 video tag, but they do not all support the same video formats.
The <video> tag has a closing tag, and “fallback content” can be placed in between. Additional attributes can be specified such as autoplay, loop, controls, width, height, and poster.
<video src=”media/cycling_432x234.mp4” width=”432” height=”234” autoplay=”autoplay”><p>If you can read this, it means that your browser does not support the video element.</p> </video>
HTML5 Tags
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
HTML5 Video
• There is no single combination of containers and codecs that works in all HTML5 browsers.
• This is not likely to change in the near future.
• To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.
• Recommendation: Use Flash Video and encode an H.264 video fallback for iOS.
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
The <canvas> TagThis tag can be used to create graphics within the web page, without the need for uploading actual image files. Like the <audio> tag, elements are inserted within the opening tag, and anything in between the opening and closing tag is “fallback content” for browsers that do not support it.<html> <head> <script type=”application/javascript”> function draw() { var canvas = document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0, 200, 0.5)”; ctx.fillRect (30, 30, 55, 50); </script> </head> <body onload=”draw()”> <canvas id=”canvas” width=”300” height=”300”></canvas></body></html>
HTML5 Tags
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
HTML5 Template files available.
Native support for HTML5 structural elements and many of the CSS3 properties supported by the latest browsers.
Multiscreen Preview panel, which shows what your page looks like in devices with three different screen resolutions. The Multiscreen Preview panel allows you to attach different style sheets to target each device using CSS3 media queries, so the same page is rendered in the most appropriate way for each audience.
Dreamweaver 11.0.3 Update
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Demo
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Adobe Illustrator CS5 HTML5 Pack
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Adobe Illustrator HTML5 Pack
In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Adobe Illustrator HTML5 Pack
HTML5 Canvas Element
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Adobe Illustrator HTML5 Pack
Provides initial support for HTML5 and CSS3
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Adobe Illustrator HTML5 Pack
Extends SVG capability (variables)
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Demo
©2010 Adobe Systems Incorporated. All Rights Reserved. @paultrani
Resources
http://www.w3schools.com/htmlhttp://diveintohtml5.org
Illustrator CS5 HTML5 Content: http://labs.adobe.com/technologies/illustrator_html5/
DW Tutorials: http://www.adobe.com/devnet/dreamweaver/dreamweaver_tutorials.html
HTM5 support in browsers:http://www.findmebyip.comhttp://caniuse.com
Canvas Examples:http://www.canvasdemos.com http://9elements.com/io/projects/html5/canvas/