Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Kurt: Hello, my name is Kurt Lenz. Welcome everyone, to today’s webinar, HTML5: What’s around the Bend. We are very happy you could join us for this webinar offered by VA ITWD. I am delighted to be joined by our presenter today, Raj Lal. You’ll be hearing from him in just a few minutes.

Kurt: Now I’d like to introduce our presenter today, Raj Lal. Raj Lal is an internationally recognized digital product leader and an active member of the W3C Accessibility group, where he is helping design standards for a web which is accessible to all. He is passionate about HTML5, RIA, Mobile technologies, and has authored multiple books on Desktop, Web, Mobile and Rich Internet applications. He is a distinguished Nokia engineer and has presented world wide on HTML5 and Mobile technologies.

Raj: During this session, we will cover the basics of what HTML5 means and where the HTML5 standard is today. We’ll see What’s new with HTML5, the new Semantics and Tags available to use on a web page. We will see how HTML5 works to support 508 accessibility conformance, and talk about Accessibility APIs also called ARIA available in HTML5 and how to use them on the web page effectively. We will see advanced options available in CSS3 which allows you to create a website which can be used for multiple devices. Finally, we’ll look into advanced features available in HTML5 through Web APIs . We will then see what the future of HTML5 looks like, and we’ll share some resources to help you stay informed about the ever-evolving standard. What is HTML5 Semantics Accessibility Adaptive HTML5 CSS3 and Animations Advanced APIs The future of HTML5

Overview of how these things work together to make up the HTML5 standard. HTML5 is a set of standard recommendations being developed by W3C (world wide web consortium) and is also an umbrella term used for a set of technologies Foremost HTML5 is a set of New HTML elements which can be used on a web page. Next is Accessibility APIs HTML5 also features a set of Accessibility APIS called ARIA which allows you to create a web page which is accessible to people with disabilities. Third important pillar of HTML5 technology is CSS3, The next version of Cascading stylesheet which allows a lot of advanced functionalities like transparency, shapes, animations and adaptability of websites. The last part of HTML5 is Web APIs , These are JavaScript based APIs which gives you very power functionalities like offline caching, Geo location, Performance and so on.

30 NEW HTML5 Elements All presentation elements are obsolete in HTML5, &lt;center&gt;, &lt;font&gt; No more frames

All presentation elements are obsolete

Lets talk about Accessibility now. What we need here is To know who is our user, what kind of challenges they have and what are the assistive technology they are using to access a web page. I will talk about the Accessibility APIs (ARIA) which is used by the Assistive technology to access a webpage and How it Works Finally I will show How to implement Those Accessibility APIs in the web page

ARIA uses a set of roles, states and properties to expose your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.

ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT. Participants can download a handout with a list of the role types and role names commonly used in ARIA.

ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT. Participants can download a handout with a list of the role types and role names commonly used in ARIA.

ARIA state is a dynamic property of an HTML element which represents data associated with the object but do not affect the essential nature of the element. There are two types of ARIA states, Global and Widget state Participants can download a handout of commonly used ARIA states from the Handouts section of Live Meeting

ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element. This will make the input field required in the form for Accessible devices. Now let see How ARIA works

Focus on how ARIA and HTML5 work together to make ACCESSIBLE HTML5

Design in a Progressive enhancement way All content available by HTML alone Use semantically structured HTML All presentation elements in CSS Load JavaScript after the page is loaded

Brief discussion of how HTML5 evolved, what it’s intended to be, and where the standard is today.

Discussion of browser compatibility issues. Point out that on this web site, each spoke on the wheel is clickable and takes the user to information on the feature. Features include but are not limited to: audio, flexbox layout, geolocation, canvas, drag and drop, query selector, etc.

Discussion of how HTML5 is expected to affect web and application development into the future. What appears to be changing quickly; what needed changes look like they’ll take longer (either in evolution or adoption)?

Joanne: Thank you for attending our webinar today, HTML5: What’s around the Bend . We hope you found it useful and informative—and we hope you’ll come back for more ITWD webinars, as well as exploring all the training opportunities available to you in the TMS. Before you sign off, we need some feedback so we can continue to improve and meet your needs with these webinars. There is a Course Evaluation link on this slide. You can write it down, or you can download a copy of this PPT file from the Handouts section in the upper right of your LiveMeeting window and click the live link inside the PPT. You can also select the icon resembling the yellow notepad, also in the upper right of your LiveMeeting window. When the notepad pops up, you will be able to copy the URL from the shared notes and paste it into your browser. Once you have navigated to the correct page, click “Respond to Survey.” Select the title of today’s presentation: “HTML5: What’s around the Bend” from the drop-down menu. Then complete the survey and submit your response. Please take a couple minutes to complete this now.