SlideShare a Scribd company logo
1 of 42
Download to read offline
HTML5 From the Front Lines
What to Embrace Today (and What to Avoid)| 2011.11.1
What We’re Going to Talk About
•   Introduction
•   General Support Strategies
•   Working With HTML5 Today




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   2
Introduction




      © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   3
Who?
•   12 Years of HTML CSS JavaScript
•   Senior Specialist, Platform Sapient Global Markets
    o 1+ week on the job
    o Job #1: Build a world class front end engineering team
•   Previously at Isobar, the Brand Experience and Cramer.
    o I’ve worked with companies like Adidas, Reebok, Motorola, Harvard Kennedy School and Boston’s Museum
      of Science
•   Mobile Web App Cookbook (Manning)
    o Due out in mid-2012
•   Open Source: HTML5 Boilerplate , etc.
•   Twitter: @robreact
•   Blog @ HTML + CSS + JavaScript http://htmlcssjavascript.com/




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                     4
Experience With Emerging Web Technologies
•   (Like everyone) I’ve been experimenting with these technologies as soon as they show up in a
    browser
•   Additionally I’ve also been implementing a laundry list of these technologies in large scale
    production sites for the last couple of years
    o   Semantic elements
    o   Geolocation
    o   Canvas 2d API
    o   Web Storage
    o   Audio/Video
    o   History
    o   More…
•   While I am biased about what technologies I prefer to use, I have to ship so my preferences take a
    back seat to solving problems.




                    © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                  5
Just So You Know Where I Stand: “HTML5” as a Blanket Marketing
Term Doesn’t Bother Me
•   "HTML5 is anything you want it to be as long as it's new and cool.“ – Peter Paul Koch
    o http://www.quirksmode.org/blog/archives/2010/01/html5_means_wha.html




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                      6
Technology People Will Figure Out the Difference
•   Non-technical people just need to be excited so that we can implement this new stuff. Whatever
    works.
•   See: Saying “Ajax” for pure-browser animations… Back in my day we called that DHTML




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                7
A Generic HTML5 Support Strategy




      © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   8
Before You Write a Line of Code
•   Don’t Back Yourself Into a Corner!
    o No Flash support in iOS doesn’t you mean can’t use Flash at all. It just means you can’t use Flash for iOS.




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                            9
Set Reasonable Support Targets and Communicate Them Early and
Often
•   This is as important for legacy browsers as it is for the latest/greatest desktop or mobile browsers
•   Saying “this could be a problem” or “we can’t support this 100% in browser x, we should come up
    with a different strategy if that browser matters” makes you look like you know what you’re
    doing. Saying, “Sorry boss, this won’t work in your mother’s favorite web browser” doesn’t.




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                     10
On the Desktop
•   “old IE” will never work as well as the latest Chrome or Firefox. Slower JS engine + polyfills (often
    in other technologies like VML)
•   Some things just aren’t going to be worth the effort for wide support (many CSS3 modules fall into
    this category) Again. Set expectations early




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                  11
On Mobile Devices
•   Be very specific about the devices you’re going to support
      (just in case you missed it the first time)
•   Be very specific about the devices you’re going to support
•   Have the budget in place and plan to buy the devices (you’d be surprised…)
•   “Webkit” on mobile probably doesn’t mean what you think it means so don’t make any
    assumptions about what will and will not work because you tested it in Safari. (See the first two
    points again.)




                       © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                              12
REMEMBER
Your site or app doesn’t have to be exactly the same in every browser. The more people you
convince of this the happier you will be- the happier we’ll all be…




                 © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                         13
(Really) Use Modernizr
•   They say “Modernizr is the right micro-library to get you up and running with HTML5 & CSS3
    today. “
    o Allows for scripting and styling of new HTML5 elements in older versions of IE
    o Tests for over 40 emerging web features
    o Creates Modernizr JS Object that contains the results of these tests as boolean properties (e.g. if
       (Modernizr.geolocation) { … })
    o Adds classes to the html element that expose what features are and are not supported
    o Adds a script loader
    o Doesn’t actually add any functionality. No matter what the name implies.




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                    14
(Really) Use Modernizr
•   Some people include Modernizr and all they actually use it for is supporting HTML5 semantic
    element in legacy versions of Internet Explorer
    o If that’s all you need, use this (HTML5Shiv/m):
    /*@cc_on'abbr article aside audio canvas details figcaption figure footer header
       hgroup mark meter nav output progress section summary subline time
       video'.replace(/w+/g,function(n){document.createElement(n)})@*/
    Leave the rest of the code at home.

•   The CSS classes and the Modernizr object (and optional loader) are much more important when
    using emerging technologies




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                             15
The Final Piece: Cross Browser Polyfills
•   This is where the modernizing happens
•   The people who write these are heroes
•   Here’s the big list:
    o https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL            16
From the Front Lines
Part One: Select Core Technologies In Depth




          © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   17
About This Section
•   Introduce the feature
•   Support (thanks to caniuse.com)
•   Verdict & Polyfills (warning: potential shades of gray)

For a full rundown on the components of the emerging technology landscape, see my article HTML5,
  CSS3, and related technologies
(http://www.ibm.com/developerworks/web/library/wa-webstandards/index.html)




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                             18
New Semantic Elements
•   Examples: Header, Footer, Section, and Aside
    o Based on common usage patterns found during a web census conducted by editor Ian Hickson.
      • <div id=“header”></div><div id=“footer”></div>, etc.
•   Others like hgroup, mark, time, and figure were logical additions




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                          19
New Semantic Elements : Support
•   Supported in all browsers except IE6,7,8 owing to the way unknown HTML elements are handled




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                             20
New Semantic Elements : Verdict and Polyfills
It’s worth it now. Every site I’ve built over the past two+ years has used the new semantic/structural
elements. While there’s no native support in older versions of IE, the solutions for support are solid
and relatively painless. The one piece that’s come up as a problem is the creation of dynamic html5
elements in IE, but even that is solved- especially now with jQuery 1.7+ baking a solution into the
library

•   Modernizr
•   HTML5 Shim(v)
•   InnerShiv for dynamic content in IE http://jdbartlett.com/innershiv/
•   jQuery 1.7 wraps an optimized dynamic solution into the core

•   Also, test against the new outlining algorithm:
    o http://gsnedders.html5.org/outliner/




                    © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                  21
An Outline Generated From HTML5 Markup
Document uses sectioning elements and multiple H1s
• Front-end Code Standards & Best Practices
  o Overview
  o General Guidelines
     • Pillars of Front-end Development
     • General Practices
         o Indentation
         o Readability vs Compression
  o Markup
     • HTML5
         o Template
     • Doctype
         o Character Encoding
     • General Markup Guidelines
         o Quoting Attributes
  o CSS
     •   General Coding Principles
     •   CSS Box Model
     •   CSS Validation
     •   CSS Formatting
         o Alphabetize
     • Classes vs. IDs
     • Naming Conventions for Selectors
     • [snipped outline from http://na.isobar.com/standards/ )
                      © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   22
Canvas 2D API
•   The Canvas 2D context provides a scriptable interface for drawing two-dimensional images and
    bitmaps in the browser.
•   One of the earliest stars of the HTML5 era

There are some excellent resources available already. One I’ve been knee deep in recently:

•   JavaScript InfoVis Toolkit http://thejit.org/




                    © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                            23
Canvas 2D API : Support
•   Supported in all major browsers except IE 6, 7, 8




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   24
Canvas 2D API: Verdict and Polyfills
With the understanding that there will be issues with more dynamic Canvas animations (in IE, in
legacy versions of supporting browsers, on mobile and similarly underpowered machines), you can
use Canvas right now.

•   Flash Canvas http://flashcanvas.net/
    o This is one of the best reasons to keep the door open for Flash. It’s faster than excanvas and supports 70% of
      the Canvas spec, which is competitive with the support levels in modern browsers
•   Excanvas http://code.google.com/p/explorercanvas/
    o The original




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                               25
Geolocation
•   The Geolocation API is a standard interface for retrieving the geographical location of a device. It
    provides a window.geolocation object that in turn provides methods that figure out a device's
    location through the use of location information servers. Location information is pulled from a
    variety of sources, including IP address, device GPS, Wi-Fi and Bluetooth MAC address, radio-
    frequency ID (RFID), and Wi-Fi connection location.




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                     26
Geolocation: Support
•   Supported in all major browsers except IE6 , 7, 8 and Safari 3.2 and 4.0




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL         27
Geolocation: Verdict and Polyfills
Between the ability to design to it (e.g. fall back to a simple text field labeled “location”) and the
available polyfill techniques geolocation can be used today.

Polyfills aren’t as good as, say, device GPS, but they can do the job.

•   From WebShims
    o https://github.com/aFarkas/webshim/blob/master/src/shims/geolocation.js
•   Also: yqlgeo.js
    o https://github.com/codepo8/YQL-Geo-Library/blob/master/yqlgeo.js




                      © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                28
Audio/Video
Playing audio and video in the browser is such a common event that it's easy to forget that, for most
of the history of the web, there was no native method for doing so.

Enter the new HTML5 audio and video elements.

From a specification perspective, the inclusion of browser-native APIs for playing audio and video is
straightforward. Anyone familiar with the way the replaced elements like IMG work will understand
how to embed video and audio.

There’s a tag, a source and some attributes.

With methods like play() and pause() the basics of the API are pretty easy to pick up




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                   29
Audio/Video:
<-- the HTML -->
<video src="_assets/video/sample.webm" controls autoplay width="400" height="300" id="video-
sample" data-description="sample web video"> your browser does not support the video tag
</video>
< button id=“toggle”></button>


//the JavaScript
var video = document.getElementById("video-sample"),
   toggle = document.getElementById("video-toggle");

toggle.onclick = function() {
 if (video.paused) {
   video.play();
   toggle.className="playing"
 } else {
   video.pause();
   toggle.className="paused"
 }
};




                 © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                           30
Audio/Video: Support
•   Supported in all major browsers except IE6,7,8 and Safari 3.2
•   Without taking into account the questions of video format (containers and codecs) , the above is
    actually true.
•   With containers and codecs?
    o Unfortunately, getting to the point where video works in all major browsers with a single video source is still
      a long way off. With browser vendors facing off on two sides of the codec divide, it's far more complicated
      than it should be. Until we move away from Apple and Microsoft standing firmly behind the patent-
      encumbered h.264, versus Google, Opera, and Mozilla backing free, open, and royalty-free video formats like
      WebM, video on the web will remain more, rather than less, complicated than it was in the Flash-only era.




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                            31
Is Audio Any Better?
•   No. In the audio space OGG Vorbis plays the role of WebM and MP3 plays the role of
    MPEG4/h.264 with the same factions




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                    32
Audio/Video : Verdict and Polyfills
The good news is, the people that serve video for a living have put together solutions that will work
on any device seamlessly. Use them.

There are also nice solutions if you want to go it alone

•   Video for Everybody
    o A no-javascript solution that uses a series of clever fallbacks to present the best video solution in different
      browsers and devices. Doesn’t work in Android < 2.3
•   MediaElement.js http://mediaelementjs.com/
    o <video>, flash, silverlight
•   Video.js http://videojs.com/
    o Built on Video for Everybody, adds more device support with JavaScript

Audio follows a similar support strategy (Flash fallback)
• SoundManager2 http://www.schillmania.com/projects/soundmanager2/
• jPlayer http://github.com/happyworm/jPlayer




                      © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                               33
Web Storage
•   The Web Storage specification defines an API for persistent data storage of key-value pairs in web
    browsers. This specification is similar to, but greatly improves upon, the functionality currently
    offered by cookies.
•   Cookes
    o Cookies are limited to 4k
    o We try to avoid them for performance. Web storage removes the cookie overhead on every request
    o Cookies are annoying to code. I’ve been doing this for a long time and I tolerate them with gritted teeth.

•   Storage takes two forms: sessionStorage and localStorage. Each provides similar methods
    for managing items (setItem(), removeItem(), and getItem()) and for clearing the
    entire storage (clear()). Session storage is designed to hold information for just the current
    browsing session. Local storage is meant for longer-term storage of site preferences or other user
    data. There's also a storage event that can be listened to, for purposes of monitoring and reacting
    to storage activity.




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                           34
Web Storage: Support
•   Supported in all major browsers except IE6,7




                   © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   35
Web Storage : Verdict and Polyfills
The support landscape is good and there are multiple polyfill options

storage polyfill https://gist.github.com/350433
Amplify.js http://amplifyjs.com/api/store/
PersistJS http://pablotron.org/?cid=1557

Also:
Lawnchair http://westcoastlogic.com/lawnchair/
“A Lawnchair is sorta like a couch except smaller and outside. Perfect for HTML5 mobile apps that
need a lightweight, adaptive, simple and elegant persistence solution. “

Keep in mind- data is store unencrypted on disk
http://www.nczonline.net/blog/2010/04/13/towards-more-secure-client-side-data-storage/




                  © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                               36
From the Front lines
Part Two: The Lightning Round




          © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   37
Lighting Round: Form elements and input types
•   HTML5 provides several new form elements to better reflect common input tasks. Formats like
    Email and URL can now be indicated to the browser in a meaningful way.
    o These are safe to use now even if support is limited since browsers just default to type=“text”
    o http://www.miketaylr.com/code/input-type-attr.html

•   Completely new form inputs include range (for a slider), date (for a date picker), and color (for a
    color picker).
    o Support here is miserable
    o http://www.miketaylr.com/code/html5-forms-ui-support.html




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                  38
Lightning Round: WebGL
The Web-based Graphics Library (WebGL) enhances JavaScript with the ability to create interactive,
  three-dimensional graphics in the browser. WebGL is a context of the canvas HTML element. The
  specification went to Version 1.0 on 3 March 2011 and is managed by the nonprofit Khronos
  Group.

•   WebGL is very exciting, BUT…
•   There’s no hint of support in Internet Explorer
    o For older versions the polyfill path translates the 3d context of WebGL to Canvas 2D API and then would use
      Flash Canvas or Excanvas to render
    o There’s also a commercial plugin for Internet Explorer http://iewebgl.com/Default.aspx
•   Even supporting browsers require up-to-date drivers and decent hardware
    o No mobile support
    o http://blog.mozilla.com/bjacob/2011/03/28/do-users-actually-get-hardware-acceleration/




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                            39
Lightning Round: History API
•   One of the consistent usability issues of the Ajax era is the way Ajax-heavy applications break the
    standard history stack. The History API adds the ability to add entries to the browser history and
    respond properly when the user clicks the back button.
    o No current IE support (it’s coming in 10,) buggy in Safari
    o Polyfill with History.js
    o history.pushState , history.replaceState, and the popstate event




                     © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                  40
Lightning Round: SVG
•   Probably the strangest technology to be roped into the HTML5 catch-all is Scalable Vector
    Graphics (SVG.) SVG is a vector graphics grammar defined in XML. The SVG specification has been
    under development by the W3C since 1999, so including it as either "new" or part of HTML5 is a
    stretch. But yet… people do.
•   Still, newfound excitement for SVG is justified as there's now some real traction for the standard.
    There's some level of support now available in the latest versions of all the major browsers and an
    API for older Internet Explorer versions presented by Raphael.js.
    o Aside: SVG Objects are DOM Objects. That makes them easier to script.

•   http://raphaeljs.com/

Also...I’m a fan of HighCharts
http://www.highcharts.com/




                    © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL                                   41
Thank You!

© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL   42

More Related Content

What's hot

Widgets and Mashups for Personal and Institutional Technologies
Widgets and Mashups for Personal and Institutional Technologies Widgets and Mashups for Personal and Institutional Technologies
Widgets and Mashups for Personal and Institutional Technologies scottw
 
Rapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.jsRapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.jsJesse Cravens
 
Fad-Free Architecture
Fad-Free ArchitectureFad-Free Architecture
Fad-Free ArchitectureJustin Munger
 
Life of a Wookie
Life of a WookieLife of a Wookie
Life of a Wookiescottw
 
Basics of Web Technologies
Basics of Web TechnologiesBasics of Web Technologies
Basics of Web TechnologiesAndreas Jakl
 
Strategies for Mobile eLearning
Strategies for Mobile eLearningStrategies for Mobile eLearning
Strategies for Mobile eLearningeaselsolutions
 
Wookie Intro
Wookie IntroWookie Intro
Wookie Introscottw
 

What's hot (7)

Widgets and Mashups for Personal and Institutional Technologies
Widgets and Mashups for Personal and Institutional Technologies Widgets and Mashups for Personal and Institutional Technologies
Widgets and Mashups for Personal and Institutional Technologies
 
Rapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.jsRapid Prototyping HTML5 Applications with Node.js
Rapid Prototyping HTML5 Applications with Node.js
 
Fad-Free Architecture
Fad-Free ArchitectureFad-Free Architecture
Fad-Free Architecture
 
Life of a Wookie
Life of a WookieLife of a Wookie
Life of a Wookie
 
Basics of Web Technologies
Basics of Web TechnologiesBasics of Web Technologies
Basics of Web Technologies
 
Strategies for Mobile eLearning
Strategies for Mobile eLearningStrategies for Mobile eLearning
Strategies for Mobile eLearning
 
Wookie Intro
Wookie IntroWookie Intro
Wookie Intro
 

Similar to Html5 today

HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Nuxeo
 
Build your next application in weeks and not months with Groovy and Grails
Build your next application in weeks and not months with Groovy and GrailsBuild your next application in weeks and not months with Groovy and Grails
Build your next application in weeks and not months with Groovy and GrailsPeople10 Technosoft Private Limited
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​FDConf
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010Hemant Joshi
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsAlius Petraška
 
HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)robinzimmermann
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile DevelopmentManesh Lad
 
Native vs HTML
Native vs HTMLNative vs HTML
Native vs HTMLludlola
 
Should you say no to HTML5?
Should you say no to HTML5?Should you say no to HTML5?
Should you say no to HTML5?Kony, Inc.
 
OpenNTF Webinar, March, 2021
OpenNTF Webinar, March, 2021OpenNTF Webinar, March, 2021
OpenNTF Webinar, March, 2021Howard Greenberg
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building ProductsHayden Bleasel
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5Christian Heindel
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEdgar Parada
 
Decoupled Architecture and WordPress
Decoupled Architecture and WordPressDecoupled Architecture and WordPress
Decoupled Architecture and WordPressPantheon
 
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonDhrubaJyoti Dey
 

Similar to Html5 today (20)

HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
 
Build your next application in weeks and not months with Groovy and Grails
Build your next application in weeks and not months with Groovy and GrailsBuild your next application in weeks and not months with Groovy and Grails
Build your next application in weeks and not months with Groovy and Grails
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile apps
 
HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Native vs HTML
Native vs HTMLNative vs HTML
Native vs HTML
 
HTML5 / Mobile Web
HTML5 / Mobile WebHTML5 / Mobile Web
HTML5 / Mobile Web
 
Html5 Flyover
Html5 FlyoverHtml5 Flyover
Html5 Flyover
 
Should you say no to HTML5?
Should you say no to HTML5?Should you say no to HTML5?
Should you say no to HTML5?
 
OpenNTF Webinar, March, 2021
OpenNTF Webinar, March, 2021OpenNTF Webinar, March, 2021
OpenNTF Webinar, March, 2021
 
Tech Thursdays: Building Products
Tech Thursdays: Building ProductsTech Thursdays: Building Products
Tech Thursdays: Building Products
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
Decoupled Architecture and WordPress
Decoupled Architecture and WordPressDecoupled Architecture and WordPress
Decoupled Architecture and WordPress
 
Native vs web apps
Native vs web appsNative vs web apps
Native vs web apps
 
Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison
 

Recently uploaded

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Recently uploaded (20)

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

Html5 today

  • 1. HTML5 From the Front Lines What to Embrace Today (and What to Avoid)| 2011.11.1
  • 2. What We’re Going to Talk About • Introduction • General Support Strategies • Working With HTML5 Today © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 2
  • 3. Introduction © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 3
  • 4. Who? • 12 Years of HTML CSS JavaScript • Senior Specialist, Platform Sapient Global Markets o 1+ week on the job o Job #1: Build a world class front end engineering team • Previously at Isobar, the Brand Experience and Cramer. o I’ve worked with companies like Adidas, Reebok, Motorola, Harvard Kennedy School and Boston’s Museum of Science • Mobile Web App Cookbook (Manning) o Due out in mid-2012 • Open Source: HTML5 Boilerplate , etc. • Twitter: @robreact • Blog @ HTML + CSS + JavaScript http://htmlcssjavascript.com/ © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 4
  • 5. Experience With Emerging Web Technologies • (Like everyone) I’ve been experimenting with these technologies as soon as they show up in a browser • Additionally I’ve also been implementing a laundry list of these technologies in large scale production sites for the last couple of years o Semantic elements o Geolocation o Canvas 2d API o Web Storage o Audio/Video o History o More… • While I am biased about what technologies I prefer to use, I have to ship so my preferences take a back seat to solving problems. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 5
  • 6. Just So You Know Where I Stand: “HTML5” as a Blanket Marketing Term Doesn’t Bother Me • "HTML5 is anything you want it to be as long as it's new and cool.“ – Peter Paul Koch o http://www.quirksmode.org/blog/archives/2010/01/html5_means_wha.html © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 6
  • 7. Technology People Will Figure Out the Difference • Non-technical people just need to be excited so that we can implement this new stuff. Whatever works. • See: Saying “Ajax” for pure-browser animations… Back in my day we called that DHTML © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 7
  • 8. A Generic HTML5 Support Strategy © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 8
  • 9. Before You Write a Line of Code • Don’t Back Yourself Into a Corner! o No Flash support in iOS doesn’t you mean can’t use Flash at all. It just means you can’t use Flash for iOS. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 9
  • 10. Set Reasonable Support Targets and Communicate Them Early and Often • This is as important for legacy browsers as it is for the latest/greatest desktop or mobile browsers • Saying “this could be a problem” or “we can’t support this 100% in browser x, we should come up with a different strategy if that browser matters” makes you look like you know what you’re doing. Saying, “Sorry boss, this won’t work in your mother’s favorite web browser” doesn’t. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 10
  • 11. On the Desktop • “old IE” will never work as well as the latest Chrome or Firefox. Slower JS engine + polyfills (often in other technologies like VML) • Some things just aren’t going to be worth the effort for wide support (many CSS3 modules fall into this category) Again. Set expectations early © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 11
  • 12. On Mobile Devices • Be very specific about the devices you’re going to support (just in case you missed it the first time) • Be very specific about the devices you’re going to support • Have the budget in place and plan to buy the devices (you’d be surprised…) • “Webkit” on mobile probably doesn’t mean what you think it means so don’t make any assumptions about what will and will not work because you tested it in Safari. (See the first two points again.) © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 12
  • 13. REMEMBER Your site or app doesn’t have to be exactly the same in every browser. The more people you convince of this the happier you will be- the happier we’ll all be… © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 13
  • 14. (Really) Use Modernizr • They say “Modernizr is the right micro-library to get you up and running with HTML5 & CSS3 today. “ o Allows for scripting and styling of new HTML5 elements in older versions of IE o Tests for over 40 emerging web features o Creates Modernizr JS Object that contains the results of these tests as boolean properties (e.g. if (Modernizr.geolocation) { … }) o Adds classes to the html element that expose what features are and are not supported o Adds a script loader o Doesn’t actually add any functionality. No matter what the name implies. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 14
  • 15. (Really) Use Modernizr • Some people include Modernizr and all they actually use it for is supporting HTML5 semantic element in legacy versions of Internet Explorer o If that’s all you need, use this (HTML5Shiv/m): /*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary subline time video'.replace(/w+/g,function(n){document.createElement(n)})@*/ Leave the rest of the code at home. • The CSS classes and the Modernizr object (and optional loader) are much more important when using emerging technologies © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 15
  • 16. The Final Piece: Cross Browser Polyfills • This is where the modernizing happens • The people who write these are heroes • Here’s the big list: o https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 16
  • 17. From the Front Lines Part One: Select Core Technologies In Depth © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 17
  • 18. About This Section • Introduce the feature • Support (thanks to caniuse.com) • Verdict & Polyfills (warning: potential shades of gray) For a full rundown on the components of the emerging technology landscape, see my article HTML5, CSS3, and related technologies (http://www.ibm.com/developerworks/web/library/wa-webstandards/index.html) © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 18
  • 19. New Semantic Elements • Examples: Header, Footer, Section, and Aside o Based on common usage patterns found during a web census conducted by editor Ian Hickson. • <div id=“header”></div><div id=“footer”></div>, etc. • Others like hgroup, mark, time, and figure were logical additions © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 19
  • 20. New Semantic Elements : Support • Supported in all browsers except IE6,7,8 owing to the way unknown HTML elements are handled © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 20
  • 21. New Semantic Elements : Verdict and Polyfills It’s worth it now. Every site I’ve built over the past two+ years has used the new semantic/structural elements. While there’s no native support in older versions of IE, the solutions for support are solid and relatively painless. The one piece that’s come up as a problem is the creation of dynamic html5 elements in IE, but even that is solved- especially now with jQuery 1.7+ baking a solution into the library • Modernizr • HTML5 Shim(v) • InnerShiv for dynamic content in IE http://jdbartlett.com/innershiv/ • jQuery 1.7 wraps an optimized dynamic solution into the core • Also, test against the new outlining algorithm: o http://gsnedders.html5.org/outliner/ © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 21
  • 22. An Outline Generated From HTML5 Markup Document uses sectioning elements and multiple H1s • Front-end Code Standards & Best Practices o Overview o General Guidelines • Pillars of Front-end Development • General Practices o Indentation o Readability vs Compression o Markup • HTML5 o Template • Doctype o Character Encoding • General Markup Guidelines o Quoting Attributes o CSS • General Coding Principles • CSS Box Model • CSS Validation • CSS Formatting o Alphabetize • Classes vs. IDs • Naming Conventions for Selectors • [snipped outline from http://na.isobar.com/standards/ ) © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 22
  • 23. Canvas 2D API • The Canvas 2D context provides a scriptable interface for drawing two-dimensional images and bitmaps in the browser. • One of the earliest stars of the HTML5 era There are some excellent resources available already. One I’ve been knee deep in recently: • JavaScript InfoVis Toolkit http://thejit.org/ © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 23
  • 24. Canvas 2D API : Support • Supported in all major browsers except IE 6, 7, 8 © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 24
  • 25. Canvas 2D API: Verdict and Polyfills With the understanding that there will be issues with more dynamic Canvas animations (in IE, in legacy versions of supporting browsers, on mobile and similarly underpowered machines), you can use Canvas right now. • Flash Canvas http://flashcanvas.net/ o This is one of the best reasons to keep the door open for Flash. It’s faster than excanvas and supports 70% of the Canvas spec, which is competitive with the support levels in modern browsers • Excanvas http://code.google.com/p/explorercanvas/ o The original © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 25
  • 26. Geolocation • The Geolocation API is a standard interface for retrieving the geographical location of a device. It provides a window.geolocation object that in turn provides methods that figure out a device's location through the use of location information servers. Location information is pulled from a variety of sources, including IP address, device GPS, Wi-Fi and Bluetooth MAC address, radio- frequency ID (RFID), and Wi-Fi connection location. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 26
  • 27. Geolocation: Support • Supported in all major browsers except IE6 , 7, 8 and Safari 3.2 and 4.0 © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 27
  • 28. Geolocation: Verdict and Polyfills Between the ability to design to it (e.g. fall back to a simple text field labeled “location”) and the available polyfill techniques geolocation can be used today. Polyfills aren’t as good as, say, device GPS, but they can do the job. • From WebShims o https://github.com/aFarkas/webshim/blob/master/src/shims/geolocation.js • Also: yqlgeo.js o https://github.com/codepo8/YQL-Geo-Library/blob/master/yqlgeo.js © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 28
  • 29. Audio/Video Playing audio and video in the browser is such a common event that it's easy to forget that, for most of the history of the web, there was no native method for doing so. Enter the new HTML5 audio and video elements. From a specification perspective, the inclusion of browser-native APIs for playing audio and video is straightforward. Anyone familiar with the way the replaced elements like IMG work will understand how to embed video and audio. There’s a tag, a source and some attributes. With methods like play() and pause() the basics of the API are pretty easy to pick up © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 29
  • 30. Audio/Video: <-- the HTML --> <video src="_assets/video/sample.webm" controls autoplay width="400" height="300" id="video- sample" data-description="sample web video"> your browser does not support the video tag </video> < button id=“toggle”></button> //the JavaScript var video = document.getElementById("video-sample"), toggle = document.getElementById("video-toggle"); toggle.onclick = function() { if (video.paused) { video.play(); toggle.className="playing" } else { video.pause(); toggle.className="paused" } }; © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 30
  • 31. Audio/Video: Support • Supported in all major browsers except IE6,7,8 and Safari 3.2 • Without taking into account the questions of video format (containers and codecs) , the above is actually true. • With containers and codecs? o Unfortunately, getting to the point where video works in all major browsers with a single video source is still a long way off. With browser vendors facing off on two sides of the codec divide, it's far more complicated than it should be. Until we move away from Apple and Microsoft standing firmly behind the patent- encumbered h.264, versus Google, Opera, and Mozilla backing free, open, and royalty-free video formats like WebM, video on the web will remain more, rather than less, complicated than it was in the Flash-only era. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 31
  • 32. Is Audio Any Better? • No. In the audio space OGG Vorbis plays the role of WebM and MP3 plays the role of MPEG4/h.264 with the same factions © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 32
  • 33. Audio/Video : Verdict and Polyfills The good news is, the people that serve video for a living have put together solutions that will work on any device seamlessly. Use them. There are also nice solutions if you want to go it alone • Video for Everybody o A no-javascript solution that uses a series of clever fallbacks to present the best video solution in different browsers and devices. Doesn’t work in Android < 2.3 • MediaElement.js http://mediaelementjs.com/ o <video>, flash, silverlight • Video.js http://videojs.com/ o Built on Video for Everybody, adds more device support with JavaScript Audio follows a similar support strategy (Flash fallback) • SoundManager2 http://www.schillmania.com/projects/soundmanager2/ • jPlayer http://github.com/happyworm/jPlayer © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 33
  • 34. Web Storage • The Web Storage specification defines an API for persistent data storage of key-value pairs in web browsers. This specification is similar to, but greatly improves upon, the functionality currently offered by cookies. • Cookes o Cookies are limited to 4k o We try to avoid them for performance. Web storage removes the cookie overhead on every request o Cookies are annoying to code. I’ve been doing this for a long time and I tolerate them with gritted teeth. • Storage takes two forms: sessionStorage and localStorage. Each provides similar methods for managing items (setItem(), removeItem(), and getItem()) and for clearing the entire storage (clear()). Session storage is designed to hold information for just the current browsing session. Local storage is meant for longer-term storage of site preferences or other user data. There's also a storage event that can be listened to, for purposes of monitoring and reacting to storage activity. © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 34
  • 35. Web Storage: Support • Supported in all major browsers except IE6,7 © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 35
  • 36. Web Storage : Verdict and Polyfills The support landscape is good and there are multiple polyfill options storage polyfill https://gist.github.com/350433 Amplify.js http://amplifyjs.com/api/store/ PersistJS http://pablotron.org/?cid=1557 Also: Lawnchair http://westcoastlogic.com/lawnchair/ “A Lawnchair is sorta like a couch except smaller and outside. Perfect for HTML5 mobile apps that need a lightweight, adaptive, simple and elegant persistence solution. “ Keep in mind- data is store unencrypted on disk http://www.nczonline.net/blog/2010/04/13/towards-more-secure-client-side-data-storage/ © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 36
  • 37. From the Front lines Part Two: The Lightning Round © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 37
  • 38. Lighting Round: Form elements and input types • HTML5 provides several new form elements to better reflect common input tasks. Formats like Email and URL can now be indicated to the browser in a meaningful way. o These are safe to use now even if support is limited since browsers just default to type=“text” o http://www.miketaylr.com/code/input-type-attr.html • Completely new form inputs include range (for a slider), date (for a date picker), and color (for a color picker). o Support here is miserable o http://www.miketaylr.com/code/html5-forms-ui-support.html © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 38
  • 39. Lightning Round: WebGL The Web-based Graphics Library (WebGL) enhances JavaScript with the ability to create interactive, three-dimensional graphics in the browser. WebGL is a context of the canvas HTML element. The specification went to Version 1.0 on 3 March 2011 and is managed by the nonprofit Khronos Group. • WebGL is very exciting, BUT… • There’s no hint of support in Internet Explorer o For older versions the polyfill path translates the 3d context of WebGL to Canvas 2D API and then would use Flash Canvas or Excanvas to render o There’s also a commercial plugin for Internet Explorer http://iewebgl.com/Default.aspx • Even supporting browsers require up-to-date drivers and decent hardware o No mobile support o http://blog.mozilla.com/bjacob/2011/03/28/do-users-actually-get-hardware-acceleration/ © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 39
  • 40. Lightning Round: History API • One of the consistent usability issues of the Ajax era is the way Ajax-heavy applications break the standard history stack. The History API adds the ability to add entries to the browser history and respond properly when the user clicks the back button. o No current IE support (it’s coming in 10,) buggy in Safari o Polyfill with History.js o history.pushState , history.replaceState, and the popstate event © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 40
  • 41. Lightning Round: SVG • Probably the strangest technology to be roped into the HTML5 catch-all is Scalable Vector Graphics (SVG.) SVG is a vector graphics grammar defined in XML. The SVG specification has been under development by the W3C since 1999, so including it as either "new" or part of HTML5 is a stretch. But yet… people do. • Still, newfound excitement for SVG is justified as there's now some real traction for the standard. There's some level of support now available in the latest versions of all the major browsers and an API for older Internet Explorer versions presented by Raphael.js. o Aside: SVG Objects are DOM Objects. That makes them easier to script. • http://raphaeljs.com/ Also...I’m a fan of HighCharts http://www.highcharts.com/ © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 41
  • 42. Thank You! © COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL 42