Presentation for Department of Veteran Affairs Learn the essentials of HTML5 • HTML5 Semantics • Accessibility and ARIA • CSS3 Styles and Animations • Advanced Web APIs • How to adapt your website for N-screens TV, PC, Mobile and Tablets

1. HTML5: What’s Around the
Bend?
For Dept. of VA (http://http://vaww.itwd.va.gov/)
Raj Lal

2. Raj Lal
• Web Developer Evangelist
• Active Member of W3C
• Author of multiple books
– Web Widgets
– Smartphone Web
– Rich Internet Applications
• Decade of experience working on Web
2

3. Agenda
3

4. WHAT IS HTML5?
4

5. What is HTML5?
• A set of Web technologies:
– Semantics
– ARIA
– CSS3
– Web APIs
5

6. HTML5 SEMANTICS
6

7. What Are HTML5 Semantics ?
Semantics are 30 new HTML elements
which describe the content of the page
7

8. Semantics
• Structural elements
• Figure, audio and video
• Canvas and SVG
• Obsolete elements
8

9. Structural Elements
• header
• nav
• section
• article
• footer
9

10. Figure
<figure>
<img src=“monalisa.jpeg">
<figcaption>
Artist: Leonardo da Vinci
</figcaption>
</figure>
10

11. Audio
<audio controls>
<source src=music.ogg type=audio/ogg>
<source src=music.mp3 type=audio/mp3>
<!-- fallback content: -->
Download <a href=music.ogg>Ogg</a> or
<a href=music.mp3>MP3</a> formats.
</audio>
11

12. Video
<video controls>
<source src=vid.webm type=video/webm>
<source src=vid.mp4 type=video/mp4>
<!-- fallback content: -->
<!– flash video -->
</video>
12

13. Canvas
<canvas id=“cnv"
width="200" height="100"
style="border:1px solid #c3c3c3;">
</canvas>
<script>
var c=document.getElementById(“cnv");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
</script>
13

14. SVG
<svg id="svgElement"
width="800px" height="600px"
viewBox="0 0 800 600">
<rect x="0" y="0" width="100%"
height="100%" rx="10" ry="10"
style="fill: white; stroke: black;" />
<circle id="circle0" cx="40" cy="40"
r="40" style="fill: orange; stroke: black;
stroke-width: 1;" />
</svg>
14

15. Obsolete Elements
<acronym> <font>
<applet> <frame>
<basefont> <frameset>
<big> <noframes>
<center> <strike>
<dir> <tt>
15

16. HTML5 AND ARIA:
ACCESSIBILITY
16

17. Accessibility
• HTML5 Accessibility API, ARIA
• How ARIA works
• Developing an accessible website
17

18. ARIA = Accessible Rich Internet
Application
• ARIA is a part of HTML5
• ARIA uses HTML and CSS Tags
• ARIA makes Web content accessible to
assistive technologies
• Most of ARIA is embedded in JS libraries
18

19. ARIA is a set of attributes
• Roles
• States
• Properties
19

20. ARIA Role
20

21. ARIA Role
• Landmark Roles – Where am I?
– Main, content, navigation, banner
• Structural Roles – What’s this?
– Files, directory
• Interface Widget Roles
– Slider, calendar, etc.
21

22. ARIA States
• Dynamic properties
• Global states
• Widget states
22

23. ARIA Properties
• Relatively static properties
23

24. How ARIA Works
Roles States Properties
Assistive
Technology
ARIA
VoiceOver Platform HTML
Windows Eye Accessibility
APIs
Mac OSX Accessibility Protocol
Linux IAccessible2
Windows MSAA 24

25. Accessible HTML5 Home Page
<header role="banner">
<nav role="navigation">
<section role=“main”>
<footer role=“contentinfo”>
…
Accessible HTML5
HTML5 25

26. Progressive Enhancement
26

27. HTML5 AND CSS3:
ADAPTIVE WEBSITES
27

28. HTML5 and CSS3
• Adaptive website for Mobile
• Advanced Styles
• Animations
28

29. Layout Detection
29

30. Layout Detection
• Media-queries enable style sheets tailored for
different width, height, and color
30

31. Media Queries: Layout Detection
<link rel="stylesheet" href="default.css" media="screen" />
<link rel="stylesheet" href="handheld.css"
media="only screen and (max-width: 480px), handheld" />
<link rel="stylesheet" href="wider.css"
media="only screen and (min-width: 1200px)" />
@media screen and (min-width: 400px) and (max-width: 700px)
{}
31

32. Media Queries: Layout Detection
Handheld Default screen Wider screen
http://www.lancs.ac.uk/ 32

33. Media Queries: Layout Detection
jQuery.mediaqueries
The script adds basic Media Query-Support (min-
width and max-width in px units ) to all browsers
<script src="jquery.mediaqueries.js“></script>
33

34. Layout
Media Query for device-aspect-ratio
@media screen and (device-aspect-ratio: 16/9)
@media screen and (device-aspect-ratio: 32/18)
@media screen and (device-aspect-ratio: 1280/720)
@media screen and (device-aspect-ratio: 2560/1440)
34

35. Orientation
Media Query for Orientation*
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
*DeviceOrientation Events specification at W3C
35

36. Viewport
Viewable area on the screen
<meta name="viewport"
content="width=device-width, initial-scale=1,
maximum-scale=1">
36

37. CSS3 Advanced Styles
• Background
background-image: url(img_one.png),url(img_two.png);
• Border Radius
border-radius:25px;
37

38. CSS3 Advanced Styles
• Font-face
<style>
@font-face
{
font-family: mycustomfont;
src: url(‘customfont.ttf'),
}
38

39. CSS3 Advanced Styles
• Opacity
img {opacity:0.4;}
Original Opacity:40%
39

40. CSS3 Animation
• Transitions:
– Animation for change in state of element
• Transformations:
– Changing the element size, position or angle
• Key frame animation
– Support color animation, etc.
40

41. CSS3 Animation: Transitions
var elem = document.getElementById('transitionelement');
elem.addEventListener('click', function loop()
{ elem.style.left = ‘100px';}, false);
#transitionelement
{
transition: opacity 1s ease;
}
41

42. CSS3 Animation: Transformations
• translate() transform: rotate(30deg);
• rotate()
• scale()
• skew()
• matrix()
42

43. HTML5 AND WEB APIS
43

44. Advanced Web APIs
• Geolocation
• Local storage
• Application cache
• Web workers
• File API
• Web Audio
44

45. Example: Geolocation
<script>
if (navigator.geolocation)
{ navigator.geolocation.getCurrentPosition(showPosition); }
function showPosition(position) {
var myLatitude = position.coords.latitude;
var myLongitude = position.coords.longitude;
}
</script>
45

46. HTML5: PRESENT AND FUTURE
46

47. 47

48. HTML5 and Browser Compatibility
48

49. How to Use JS Library
• Modernizr
<script src="modernizr-1.7.js“/>
Modernizr.canvas ? "Canvas" : “No canvas";
49

50. How to Use: JS Libraries
Modernizr
Canvas SVG Cross Window Msg
Audio InlineSVG Web Workers
Video WebGL Web SQL database
Animation Websockets Touch
Transformation Geolocation
Drag and Drop Local Storage
50

51. How to Use: CSS3
• Prefix
 -moz-
 -ms-
 -o-
 -webkit-
51

52. How to Use: CSS3 Styles
.style
{
-moz-border-radius: 1em;
-ms-border-radius: 1em;
-o-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
52

53. The Future of HTML5
53

54. Resources
• HTML5 RESOURCES: http://www.html5rocks.com
• HTML5 READINESS: http://html5readiness.com/
• BROWSER COMPATIBILITY: http://caniuse.com/
• MOBILE TEMPLATES: http://html5boilerplate.com/
• CSS3: http://www.w3schools.com/css3/
• ARIA: http://dev.w3.org/html5/markup/aria/aria.html
• WEB APIs SUPPORT: http://www.modernizr.com
54

55. Webinar Evaluation Survey
• Copy and paste the course evaluation link into
your browser:
http://vaww.itwd.va.gov/webinar
• Click “Respond to Survey”
• Select HTML5: What’s Around the Bend
55