html5 whats around the bend
DESCRIPTION
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 TabletsTRANSCRIPT
HTML5: What’s Around the Bend?
For Dept. of VA (http://http://vaww.itwd.va.gov/)
Raj Lal
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
Agenda
3
WHAT IS HTML5?
4
What is HTML5?
• A set of Web technologies:– Semantics– ARIA– CSS3 – Web APIs
5
HTML5 SEMANTICS
6
What Are HTML5 Semantics ?
Semantics are 30 new HTML elements which describe the content of the page
7
Semantics
• Structural elements
• Figure, audio and video
• Canvas and SVG
• Obsolete elements
8
Structural Elements
• header
• nav
• section
• article
• footer
9
Figure
10
<figure> <img src=“monalisa.jpeg"> <figcaption> Artist: Leonardo da Vinci</figcaption> </figure>
Audio
11
<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>
Video
12
<video controls> <source src=vid.webm type=video/webm> <source src=vid.mp4 type=video/mp4> <!-- fallback content: --> <!– flash video --></video>
Canvas
13
<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>
SVG
14
<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>
Obsolete Elements
15
<acronym><applet><basefont><big><center><dir>
<font><frame><frameset><noframes><strike><tt>
HTML5 AND ARIA: ACCESSIBILITY
16
Accessibility
• HTML5 Accessibility API, ARIA
• How ARIA works
• Developing an accessible website
17
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
ARIA is a set of attributes
19
• Roles
• States
• Properties
ARIA Role
20
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
ARIA States
• Dynamic properties
• Global states
• Widget states
22
ARIA Properties
• Relatively static properties
23
How ARIA Works
Assistive Technology
Platform Accessibility
APIs
StatesRoles Properties
HTML
ARIA
Mac OSX Accessibility ProtocolLinux IAccessible2
Windows MSAA
VoiceOver Windows Eye
24
<header role="banner"><nav role="navigation"><section role=“main”><footer role=“contentinfo”>…
HTML5Accessible HTML5
Accessible HTML5 Home Page
25
Progressive Enhancement
26
HTML5 AND CSS3: ADAPTIVE WEBSITES
27
HTML5 and CSS3
• Adaptive website for Mobile
• Advanced Styles
• Animations
28
Layout Detection
29
Layout Detection
• Media-queries enable style sheets tailored for different width, height, and color
30
Media Queries: Layout Detection
31
<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) { }
http://www.lancs.ac.uk/
Handheld Default screen Wider screen
Media Queries: Layout Detection
32
<script src="jquery.mediaqueries.js“></script>
The script adds basic Media Query-Support (min-width and max-width in px units ) to all browsers
jQuery.mediaqueries
Media Queries: Layout Detection
33
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)
Layout
34
Media Query for Orientation*
@media screen and (orientation:portrait) { /* Portrait styles */}@media screen and (orientation:landscape) { /* Landscape styles */}
*DeviceOrientation Events specification at W3C
Orientation
35
Viewable area on the screen
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Viewport
36
CSS3 Advanced Styles
• Background background-image: url(img_one.png),url(img_two.png);
• Border Radius border-radius:25px;
37
CSS3 Advanced Styles
• Font-face<style> @font-face{font-family: mycustomfont;src: url(‘customfont.ttf'),}
38
CSS3 Advanced Styles
• Opacity img {opacity:0.4;}
39
Original Opacity: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
CSS3 Animation: Transitions
41
#transitionelement{ transition: opacity 1s ease;}
var elem = document.getElementById('transitionelement');
elem.addEventListener('click', function loop() { elem.style.left = ‘100px';}, false);
CSS3 Animation: Transformations
42
• translate()
• rotate()
• scale()
• skew()
• matrix()
transform: rotate(30deg);
HTML5 AND WEB APIS
43
Advanced Web APIs
• Geolocation
• Local storage
• Application cache
• Web workers
• File API
• Web Audio
44
Example: Geolocation
45
<script>
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }
function showPosition(position) { var myLatitude = position.coords.latitude; var myLongitude = position.coords.longitude; }
</script>
HTML5: PRESENT AND FUTURE
46
47
HTML5 and Browser Compatibility
48
How to Use JS Library
• Modernizr
49
<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “No canvas";
How to Use: JS Libraries
50
ModernizrCanvas SVG Cross Window MsgAudio InlineSVG Web WorkersVideo WebGL Web SQL databaseAnimation Websockets TouchTransformation GeolocationDrag and Drop Local Storage
How to Use: CSS3
• Prefix -moz- -ms- -o- -webkit-
51
.style{-moz-border-radius: 1em;-ms-border-radius: 1em;-o-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;}
How to Use: CSS3 Styles
52
The Future of HTML5
53
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
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