View
2.752
Download
4
Category
Tags:
Preview:
DESCRIPTION
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
Citation preview
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
Tools 2: Tools 2: Understand CSSUnderstand CSS
.style{ background-color: rgb(100,214,120) background-color: rgba(100,214,120, .5)}
Tools 2: Tools 2: Understand CSSUnderstand CSS
Advanced Styles with CSS3
• Background• Border Radius• Drag and Drop• Opacity• Transformation• …
Tools 2: Tools 2: Understand CSSUnderstand CSS
Prefix•-ms-•-moz-•-o-•-webkit-
Tools 2: Tools 2: Understand CSSUnderstand CSS
.style{-moz-border-radius: 1em;-ms-border-radius: 1em;-o-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;}
Tools 2: Tools 2: Understand CSSUnderstand CSS
#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
Tools 3: Tools 3: Feature DetectionFeature Detection
Tools 3: Tools 3: Feature DetectionFeature Detection
Use libraries
• Modernizr
• jQuery.support
Tools 3: Tools 3: Feature DetectionFeature Detection
<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “Nocanvas";
<script src="jquery-latest.js“/>jQuery.support.ajax ? "Ajax" : “No Ajax";
Tools 3: Tools 3: Feature DetectionFeature 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
Tools 3: Tools 3: Feature DetectionFeature Detection
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
Upgrade 1: Upgrade 1: Add a slideshow Add a slideshow
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>
Upgrade 1: Upgrade 1: Add a slideshow Add a slideshow
HTML
Upgrade 1: Upgrade 1: Add a slideshow Add a slideshow
#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
Upgrade 2: Upgrade 2:
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’
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 Queries
http://www.lancs.ac.uk/
handheld Default screen Wider screen
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)
Layout Detection: Media Queries
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
Upgrade 3: Upgrade 3:
Make it Accessible Make it Accessible
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
Helps Disabled
LimitedResources
Search Engines
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
4 Key Areas for HTML5 Developers
• Hearing
• Mobility
• Cognitive
• Visual
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
W3C recommends POUR Principle
• Perceivable
• Operable
• Understandable
• Robust
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
1/4 Hearing
• Problem
Cannot hear media
•Solution
Make it PERCEIVABLE
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
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
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
2/4 Mobility
• Problem
Difficulty with Mouse Keyboard
•Solution Make it OPERABLE
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier 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
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
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,
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
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
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
Use Semantic Markup
UP 3: Accessibility: UP 3: Accessibility: Easier to UseEasier to Use
Use HTML5 Elements
ARIA Roles <nav role=”navigation”>
CSS: No Fixed Font size
Upgrade 4: Upgrade 4:
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
Recommended