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

Upgrade Your Website to HTML5 Raj Lal Senior Engineer, Nokia Level: Intermediate

Story of aWeb Guy

Story of a Web Guy About Tools Upgrade

1. About About Requirements Concerns

About the Web Guy1. Develop & design websites2. Manage multiple websites3. 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 ApplicationOld HTML

HTML5 Web 2.0 Web ApplicationOld 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

How do I upgrade?

Requirements1. User Experience2. Availability3. Accessibility4. 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

2. 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

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

Tools 2: Understand CSS Advanced Styles with CSS3 • Background • Border Radius • Drag and Drop • Opacity • Transformation • …

Tools 2: Understand CSS Prefix •-ms- •-moz- •-o- •-webkit-

Tools 2: Understand CSS .style { -moz-border-radius: 1em; -ms-border-radius: 1em; -o-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }

Tools 2: Understand CSS 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

Tools 3: Feature Detection

Tools 3: Feature Detection Use libraries • Modernizr • jQuery.support

Tools 3: Feature Detection<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “Nocanvas";<script src="jquery-latest.js“/>jQuery.support.ajax ? "Ajax" : “No Ajax";

Tools 3: Feature DetectionModernizrCanvas SVG Cross Window MsgAudio InlineSVG Web WorkersVideo WebGL Web SQL databaseAnimation Websockets TouchTransformation GeolocationDrag and Drop Local Storage

Tools 3: Feature Detection jQuery.Support Ajax Cross Domain Resource Sharing (CORS) Fixed Position CSS Opacity CSS Float htmlNormalize

Tools 3: Feature Detection http://widgets-gadgets.com/html5/ Demo

3. Upgrade Upgrade

Requirements of Web Guy1. Better User Experience2. Available Everywhere3. Make it Accessible4. Cutting edge Graphics and Animation

Upgrade 1:Deliver Richer UX

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

Answer: Slideshow

Upgrade 1: Add a slideshow Responsive CSS3 Slider By Ian Hansson

Upgrade 1: Add a slideshowHTML<input type="radio" name="slider"id="slide1"><input type="radio" name="slider"id="slide2"> Ian Hansson (@teapoted)

Upgrade 1: Add a slideshow HTML<div id=‘s’><div class="inner"><article><div class="info"></div></article><article><div class="info"></div></article></div></div>

Upgrade 1: Add a slideshow 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)

UP 2: Rich UX with Media

Upgrade 2:Available Everywhere

Upgrade 2: AvailabilityI. To all devices – PC – TV – Mobile – Tablet• All Screen size

All Devices: Layout Detection OPTIONS AVAILABLE

Layout Detection: Media QueriesMedia-queries enable style sheets tailored fordifferent ’width’, ‘height’ and ‘color’

Layout Detection: Media Queries<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)" />

Layout Detection: Media Querieshandheld Default screen Wider screen http://www.lancs.ac.uk/

Layout Detection: Media QueriesMedia 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 Detection: Media Queries Media Query for Orientation@media screen and (orientation:portrait) { /* Portrait styles */}@media screen and (orientation:landscape) { /* Landscape styles */}

Layout Detection: ViewPortViewable 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>

Upgrade 3:Make it Accessible

UP 3: Accessibility: Easier to Use Search Engines Limited ResourcesHelpsDisabled

UP 3: Accessibility: Easier to Use4 Key Areas for HTML5 Developers • Hearing • Mobility • Cognitive • Visual

UP 3: Accessibility: Easier to UseW3C recommends POUR Principle • Perceivable • Operable • Understandable • Robust

UP 3: Accessibility: Easier to Use1/4 Hearing • Problem Cannot hear media •Solution Make it PERCEIVABLE

UP 3: Accessibility: Easier to Use1/4 HearingPERCEIVABLE • Text alternative to all non-text content • Alternative for media using, subtitles, transcribed text • Semantic Markup with separation of, Style & Content

UP 3: Accessibility: Easier to Use2/4 Mobility • Problem Difficulty with Mouse Keyboard •Solution Make it OPERABLE

UP 3: Accessibility: Easier to Use2/4 MobilityOPERABLE•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

UP 3: Accessibility: Easier to Use3/4 Cognitive • Problem Difficulty with Text content • Solution Make it UNDERSTANDABLE

UP 3: Accessibility: Easier to UseMAKE 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,

UP 3: Accessibility: Easier to Use4/4 Visual • Problem Cannot see the content Differentiate color • Solution Make it ROBUST

4/4 VisualROBUST • 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

UP 3: Accessibility: Easier to UseUse Semantic Markup

UP 3: Accessibility: Easier to UseUse HTML5 Elements ARIA Roles <nav role=”navigation”> CSS: No Fixed Font size

Upgrade 4:Cutting Edge

UPGRADE 4: Cutting EdgeI. Advanced graphics and animationII. 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.inlinesvgPerform better when smallernumber 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.canvasPerform 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.csstransitionsCan perform better with GPU acceleration

Animation: CSS3var elem = $(‘myelement); JS CODEelem.addEventListener(click,function loop() {elem.style.left = ‘100px;}, false);#myelement CSS{…-ms-transition: opacity 1s ease;transition: opacity 1s ease;}

Advanced HTML5 APIs

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

http://irajeshlal.blogspot.com	271
http://www.tizenexperts.com	94
http://lanyrd.com	87
http://aakanshaindia.blogspot.com	50
http://irajlal.blogspot.com	35
http://irajeshlal.blogspot.in	32
http://irajlal.blogspot.in	5
http://irajeshlal.blogspot.de	5
http://irajeshlal.blogspot.com.au	4
http://irajeshlal.blogspot.mx	4
http://feeds.feedburner.com	3
http://irajeshlal.blogspot.ca	3
http://irajeshlal.blogspot.nl	3
http://irajeshlal.blogspot.co.il	3
http://irajeshlal.blogspot.be	3
http://irajeshlal.blogspot.com.br	2
http://irajlal.blogspot.ca	2
http://aakanshaindia.blogspot.com.au	2
http://dev.newsblur.com	2
http://irajlal.blogspot.de	1
http://irajlal.blogspot.co.uk	1
http://aakanshaindia.blogspot.in	1
http://irajlal.blogspot.dk	1
http://irajeshlal.blogspot.ro	1
http://irajeshlal.blogspot.jp	1
http://irajeshlal.blogspot.ch	1
http://www.linkedin.com	1
http://irajeshlal.blogspot.tw	1
http://irajeshlal.blogspot.ru	1
http://www.copyscape.com	1
http://nodeslide.herokuapp.com	1

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

by Raj Lal

Accessibility

Categories

Upload Details

Usage Rights

31 Embeds 622

Statistics