1 / 25

HTML 5 and Solutions from Adobe

HTML 5 and Solutions from Adobe. Source Files: http://bit.ly/HTML5fromAdobe. Paul Trani ptrani @adobe.com www.paultrani.com @ paultrani. Agenda. HTML5 Fundamentals Dreamweaver HTML5 Update Illustrator HTML5 Pack. 5. Source Files: http://bit.ly/HTML5fromAdobe.

cece
Download Presentation

HTML 5 and Solutions from Adobe

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5 and Solutions from Adobe Source Files: http://bit.ly/HTML5fromAdobe Paul Traniptrani@adobe.comwww.paultrani.com @paultrani

  2. Agenda HTML5 Fundamentals Dreamweaver HTML5 Update Illustrator HTML5 Pack 5 Source Files: http://bit.ly/HTML5fromAdobe

  3. CS5 Across Screens 12-hour preconference lab at MAX Source Files: http://bit.ly/CS5AcrossScreens 5

  4. HTML5 Fundamentals 5

  5. Five Things You Should Know About HTML5 It’s not one big thing HTML5 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. 5

  6. Five Things You Should Know About HTML5 2. You don’t need to throw anything away If 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

  7. Five Things You Should Know About HTML5 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

  8. Five Things You Should Know About HTML5 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

  9. Five Things You Should Know About HTML5 5. It’s here to stay Tim 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

  10. HTML5 Popularity

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

  12. Browser Support 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.com http://caniuse.com

  13. HTML5 Tags Complete list: http://www.w3schools.com/html The <header> Tag This 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.

  14. HTML5 Tags The <video> Tag Nearly 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>

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

  16. HTML5 Tags The <canvas> Tag This 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”);varctx = 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>

  17. Dreamweaver 11.0.3 Update 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.

  18. Demo

  19. Adobe Illustrator CS5 HTML5 Pack

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

  21. Adobe Illustrator HTML5 Pack • HTML5 Canvas Element

  22. Adobe Illustrator HTML5 Pack Provides initial support for HTML5 and CSS3

  23. Adobe Illustrator HTML5 Pack Extends SVG capability (variables)

  24. Demo

  25. Resources http://www.w3schools.com/html http://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.com http://caniuse.com Canvas Examples: http://www.canvasdemos.com http://9elements.com/io/projects/html5/canvas/

More Related