Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal

Upgrade Your Website to HTML5

Raj Lal
Senior Engineer, Nokia
Level: Intermediate

Story of a Web Guy

About Tools Upgrade

1. About

About
Requirements
Concerns

About the Web Guy

1. Develop & design websites

2. Manage multiple websites

3. Knows Web stuff

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

Web 2.0

Web
Application

Old HTML

HTML5
Web 2.0
Web
Application
Old HTML

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

Requirements

1. User Experience

2. Availability

3. Accessibility

4. Cutting edge

Concerns

1. How do I upgrade to HTML5

2. New Website ?

3. Compatibility with old website?

4. Break existing websites ?

2. Tools

Information
Tools

Tools 1: Progressive Enhancement

Tools 2: Understand CSS

1. CSS is parsed sequentially
2. The last style is the final style
3. Browser ignore unknown syntax


.style
{
background-color: rgb(100,214,120)
background-color: rgba(100,214,120, .5)
}


Advanced Styles with CSS3
• Background
• Border Radius
• Drag and Drop
• Opacity
• Transformation
• …


Prefix
•-ms-
•-moz-
•-o-
•-webkit-


.style
{
-moz-border-radius: 1em;
-ms-border-radius: 1em;
-o-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

HTML CSS
#style
{
Width:800px;
<body> Height:640px;
<div }
id=“enhanced”
class=“Style”> Body [id=enhanced] #style
</div> {
</body> Width:100%;
Height:640px;
}

Tools 3: Feature Detection

Old method New method


Use libraries
• Modernizr
• jQuery.support

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


jQuery.Support
Ajax
Cross Domain Resource Sharing (CORS)
Fixed Position
CSS Opacity
CSS Float
htmlNormalize


http://widgets-gadgets.com/html5/

Demo

Requirements of Web Guy

1. Better User Experience

2. Available Everywhere

3. Make it Accessible

4. Cutting edge Graphics and Animation

1: Deliver Richer UX

I. Enhance you Homepage

II. Add Media

Rich UX to Homepage

What is common?

http://micrsoft.com

http://amazon.com

http://linkedin.com

Upgrade 1: Add a slideshow

Responsive CSS3 Slider
By Ian Hansson


HTML

<input type="radio" name="slider"
id="slide1">
<input type="radio" name="slider"
id="slide2">

Ian Hansson (@teapoted)


HTML

<div id=‘s’>
<div class="inner">

<article><div class="info"></div>
</article>

<article><div class="info"></div>
</article>

</div></div>


CSS

#s .inner { width: 200%; }
#s article {width: 50%;float: left;}

#slide1:checked s.inner{ margin-left:0; }
#slide2:checked s.inner{ margin-
left:-100%;}

Ian Hansson (@teapoted)

Upgrade 2:
Available Everywhere

Upgrade 2: Availability

I. To all devices
– PC

– TV

– Mobile

– Tablet

• All Screen size

All Devices: Layout Detection
OPTIONS AVAILABLE

Layout Detection: Media Queries

Media-queries enable style sheets tailored for
different ’width’, ‘height’ and ‘color’


handheld Default screen Wider screen

http://www.lancs.ac.uk/


Media Query for device-aspect-ratio
@media screen and (device-aspect-ratio: 16/9)


Media Query for Orientation

@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}

Layout Detection: ViewPort

Viewable area on the screen

<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1">

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>

UP 3: Accessibility: Easier to Use

Search
Engines
Limited
Resources
Helps
Disabled


4 Key Areas for HTML5 Developers

• Hearing
• Mobility
• Cognitive
• Visual


W3C recommends POUR Principle

• Perceivable
• Operable
• Understandable
• Robust


1/4 Hearing

• Problem
Cannot hear media
•Solution
Make it PERCEIVABLE


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


2/4 Mobility

• Problem
Difficulty with Mouse
Keyboard

•Solution
Make it OPERABLE

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


3/4 Cognitive

• Problem
Difficulty with Text content

• Solution
Make it UNDERSTANDABLE

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,


4/4 Visual

• Problem
Cannot see the content
Differentiate color
• Solution
Make it ROBUST

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

Use Semantic Markup

Use HTML5 Elements

ARIA Roles

<nav role=”navigation”>

CSS: No Fixed Font size

UPGRADE 4: Cutting Edge

I. Advanced graphics and animation

II. HTML5 APIs
– Geolocation

– Communication APIs

– Web Socket

– Etc.

Requirement 4 : CSS3 Animation

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

HTML CODE Animation: 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>

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

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

Animation: CSS3
var elem = $(‘myelement'); JS CODE

elem.addEventListener('click',
function loop() {
elem.style.left = ‘100px';}, false);

#myelement CSS
{
…
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}

HTML5 API: Polyfills and Shims?

Provide support for missing features.

• Polyfills: Replicate standard feature API

• Shims: Own API with useful features

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

Thank You

Raj Lal
Senior Engineer, Nokia
Twitter @ iRajLal

Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal

Recommended

Recommended

More Related Content

Similar to Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal

Similar to Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal (20)

More from Raj Lal

More from Raj Lal (20)

Recently uploaded

Recently uploaded (20)

Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal

Editor's Notes