HTML 5 and Solutions from Adobe

©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

mailto:[email protected]

mailto:[email protected]

http://www.paultrani.com/

http://bit.ly/HTML5fromAdobe


1. HTML5 Fundamentals

2. Dreamweaver HTML5 Update

3. Illustrator HTML5 Pack

Agenda

5

Source Files:http://bit.ly/HTML5fromAdobe

http://bit.ly/HTML5fromAdobe


CS5 Across Screens

512-hour preconference lab at MAX

Source Files:http://bit.ly/CS5AcrossScreens

http://bit.ly/CS5AcrossScreens


HTML5 Fundamentals5


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


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.


5


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>


5


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.


5


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


5


HTML5 Popularity


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


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

http://www.findmebyip.com/

http://caniuse.com/


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

http://www.w3schools.com/html


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

http://en.wikipedia.org/wiki/HTML5_video


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.


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


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


Demo


Adobe Illustrator CS5 HTML5 Pack


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.



HTML5 Canvas Element



Provides initial support for HTML5 and CSS3



Extends SVG capability (variables)


Demo


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/

http://www.w3schools.com/html

http://diveintohtml5.org/

http://labs.adobe.com/technologies/illustrator_html5/

http://www.adobe.com/devnet/dreamweaver/dreamweaver_tutorials.html

http://www.adobe.com/devnet/dreamweaver/dreamweaver_tutorials.html

http://www.findmebyip.com/

http://caniuse.com/

http://www.canvasdemos.com/

http://9elements.com/io/projects/html5/canvas/

Documents

HTML 5 and Solutions from Adobe