Learn what you need to do, to upgrade your existing web application with HTML5. How and Where do you start? Learn how you capitalize on the State-of-the-Art HTML5 tags, Cutting edge graphics and animation with CSS3, and advanced HTML5 API and take your existing website to the next level of Web revolution.
You will learn:
Upgrade your current website with HTML5
Use advanced HTML5 APIs which gracefully degrade
Know how to enhance your website with the latest HTML5 goodies
5. About the Web Guy
1. Develop & design websites
2. Manage multiple websites
3. Knows Web stuff
6. Web Stuff
<T AB L E >
CS S S il e r l h t
v ig a ja x
Cl n t
ie Se r ve r
Va l a t io n
id c o o k ie s
RI A P l g - in s
u
HT M L 4 H T M L w id g e t s Br o w s e r w ar s
s an d b o x jq u e r y
X HT M L f l sh
a
w e b 2 .0
M e d ia p l y e r
We b a p p l a t io n
ic
a
AS P / P HP
J a v a S c r ip t
9. HTML5
Of f l ein
S t o r a g eAp p C a c h T h r e a d s
e
We b worke r
id
C a n v a s An im a t io n AP I s
HT M L Va l a t io n P l g - in s
u
v ie w p o r t
a r t ic l
e CS S 3 W3 C
Au d io / v id e o We b s o c k e t T r a n s it io n
Cr o s s b r o w s e r
w e b d b S VG
We b Ap p @ f o n t -f ac e
Ge o l c a t io n
o
26. Tools 3: Feature Detection
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
46. Layout Detection: Media Queries
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)
47. Layout Detection: Media Queries
Media Query for Orientation
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
48. Layout Detection: ViewPort
Viewable area on the screen
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1">
49. Layout Detection: JavaScript
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>
51. UP 3: Accessibility: Easier to Use
Search
Engines
Limited
Resources
Helps
Disabled
52. UP 3: Accessibility: Easier to Use
4 Key Areas for HTML5 Developers
• Hearing
• Mobility
• Cognitive
• Visual
53. UP 3: Accessibility: Easier to Use
W3C recommends POUR Principle
• Perceivable
• Operable
• Understandable
• Robust
54. UP 3: Accessibility: Easier to Use
1/4 Hearing
• Problem
Cannot hear media
•Solution
Make it PERCEIVABLE
55. UP 3: Accessibility: Easier to Use
1/4 Hearing
PERCEIVABLE
• Text alternative to all non-text content
• Alternative for media using, subtitles,
transcribed text
• Semantic Markup with separation of, Style &
Content
56. UP 3: Accessibility: Easier to Use
2/4 Mobility
• Problem
Difficulty with Mouse
Keyboard
•Solution
Make it OPERABLE
57. UP 3: Accessibility: Easier to Use
2/4 Mobility
OPERABLE
•All function accessible from keyboard alone
•No auto refresh, allow stop time based contents
•Navigate with proper use of Headings & Anchors
•Joysticks ,Voice recognition or audio feedback
58. UP 3: Accessibility: Easier to Use
3/4 Cognitive
• Problem
Difficulty with Text content
• Solution
Make it UNDERSTANDABLE
59. UP 3: Accessibility: Easier to Use
MAKE IT UNDERSTANDABLE
• High contrast between front and background
• Allow san serif fonts and custom resizable font size
• Avoid auto-play animation, auto refresh, flashy
images
• Important info, error not by color only
• Use multiple visual cues, std. icons,
60. UP 3: Accessibility: Easier to Use
4/4 Visual
• Problem
Cannot see the content
Differentiate color
• Solution
Make it ROBUST
61. 4/4 Visual
ROBUST
• Broken HTML tag cause difficulty in screen reader
• Follow HTML standard specifications
• Use syntactically correct HTML & validate web page
• Proper “lang” attributes in the markup
• Use “acronym” and “abbr” tag with proper usage
67. Animation: SVG
• 2D vector graphics using XML
• Object retained in the memory
• Full DOM support
• SVG elements can be styled
• Check Modernizr.svg Modernizr.inlinesvg
Perform better when smaller
number of elements and large surface
69. Animation: Canvas: Context 2D
• Bitmap drawing area
• Rectangles, lines, arcs, paths
• Stateless
• No DOM support, single element
• Check Modernizr.canvas
Perform better when large number of objects and
surface is small
70. Animation: CSS3
• Styles for Individual elements
• Use CSS3 animation if available
• Better than JavaScript based animation
• Check Modernizr.csstransitions
Can perform better with GPU acceleration
73. HTML5 API: Polyfills and Shims?
Provide support for missing features.
• Polyfills: Replicate standard feature API
• Shims: Own API with useful features
74. Summary
• Upgrade to a Rich User Experience
• Adding slideshow, rich media and advanced css
• Available to All devices
• Using Viewport, MediaQueries, Orientations
• Upgrade to accessible Website
• Ensuring 4 key accessible areas
• Upgrade to CSS3 Animation & Adv. HTML5 APIs
75. Thank You
Raj Lal
Senior Engineer, Nokia
Twitter @ iRajLal