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

Upgrade Your Website to HTML5Upgrade Your Website to HTML5

Raj LalRaj LalSenior Engineer, Nokia

Level: Intermediate

Story of a Story of a Web GuyWeb Guy

Story of a Web GuyStory of a Web Guy

About Tools Upgrade

1. About1. About

AboutRequirements

Concerns

About the Web GuyAbout the Web Guy

1. Develop & design websites

2. Manage multiple websites

3. Knows Web stuff

Web StuffWeb Stuff

RIARIAHTML 4

ajax

flashXHTML

cookies

HTMLsandbox

Validation

Silverlight

web 2.0

Client Server

Media playerjquery

ASP/PHPWeb application

Browser wars

JavaScript

CSS<TABLE>

widgetsPlug-ins

Old HTML

Web Application

Web 2.0

Old HTML

Web Application

Web 2.0

HTML5

HTML5HTML5

W3CCanvasCanvas

article

Offline

Transition

@font-face

Web worker

Audio/videoviewport

HTML Validation

App Cache

web db

Animation

SVGWeb socket

Web App

Cross browser

Geo location

Storage Threads

CSS3Plug-ins

APIs

How do I upgrade?How do I upgrade?

RequirementsRequirements

1. User Experience

2. Availability

3. Accessibility

4. Cutting edge

ConcernsConcerns

1. How do I upgrade to HTML5

2. New Website ?

3. Compatibility with old website?

4. Break existing websites ?

2. Tools2. Tools

InformationTools

2. Tools2. Tools

Tools 1: Tools 1: Progressive EnhancementProgressive Enhancement

Tools 2: Tools 2: Understand CSSUnderstand 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;}


#style{Width:800px;Height:640px;}

Body [id=enhanced] #style{Width:100%;Height:640px;}

<body><div id=“enhanced” class=“Style”></div></body>

HTML CSS

Tools 3: Tools 3: Feature DetectionFeature Detection

Old method New method



Use libraries

• Modernizr

• jQuery.support


<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “Nocanvas";

<script src="jquery-latest.js“/>jQuery.support.ajax ? "Ajax" : “No Ajax";


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

Tools 3: Tools 3: Feature Detection Feature Detection

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

Demo

3. Upgrade3. Upgrade

Upgrade

Requirements of Web GuyRequirements of Web Guy

1. Better User Experience

2. Available Everywhere

3. Make it Accessible

4. Cutting edge Graphics and Animation

Upgrade 1: Upgrade 1:

Deliver Richer UXDeliver Richer UX

1: Deliver Richer UX1: Deliver Richer UX

I. Enhance you Homepage

II. Add Media

Rich UX to HomepageRich UX to Homepage

What is common?

http://micrsoft.com

http://amazon.com

http://linkedin.com

Answer: Slideshow

Upgrade 1: Upgrade 1: Add a slideshow Add a slideshow

By Ian Hansson

Responsive CSS3 Slider


Ian Hansson (@teapoted)

HTML

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

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

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

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

</div></div>


HTML


#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)

CSS

UP 2: Rich UX with MediaUP 2: Rich UX with Media


Available EverywhereAvailable Everywhere

Upgrade 2: AvailabilityUpgrade 2: Availability

I. To all devices

I. PC

II. TV

III. Mobile

IV. Tablet

II. 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’


<link rel="stylesheet" href="handheld.css" media="only screen and (max-width: 480px), handheld" />

<link rel="stylesheet" href="default.css" media="screen" />

<link rel="stylesheet" href="wider.css" media="only screen and (min-width: 1200px)" />


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

handheld Default screen Wider screen


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)


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

<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


Make it Accessible Make it Accessible

UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use

Helps Disabled

LimitedResources

Search Engines


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


PERCEIVABLE

• Text alternative to all non-text content • Alternative for media using, subtitles,

transcribed text

• Semantic Markup with separation of, Style & Content

1/4 Hearing


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


Cutting EdgeCutting Edge

UPGRADE 4: Cutting EdgeUPGRADE 4: Cutting Edge

I. Advanced graphics and animation

II. HTML5 APIs

I. Geolocation

II. Communication APIs

III. Web Socket

IV. Etc.

Requirement 4 : Requirement 4 : CSS3 AnimationCSS3 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

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>

HTML CODE

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

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

Animation: CSS3

var elem = $(‘myelement');

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

JS CODE

CSS

Advanced HTML5 APIs

HTML5 API: Polyfills and Shims?

• Polyfills: Replicate standard feature API

• Shims: Own API with useful features

Provide support for missing 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 YouThank You

Raj LalRaj LalSenior Engineer, Nokia

Twitter @ iRajLal

Technology

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