Your SlideShare is downloading. ×
  • Like
HTML5, CSS3, and other fancy buzzwords
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5, CSS3, and other fancy buzzwords

  • 4,242 views
Published

Bringing sexy back to the mobile web

Bringing sexy back to the mobile web

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • THANK YOU Bro 'Mo Jangda'...
    Are you sure you want to
    Your message goes here
  • Nice overview of the newer things coming. I do wish I could see the animations from the original presentation.
    Are you sure you want to
    Your message goes here
  • 'Space ship moving to future' slide
    Are you sure you want to
    Your message goes here
  • Despite what the 'Usage Rights' say, this presentation is Creative Commons 3.0 Share-Alike.
    Are you sure you want to
    Your message goes here
  • Original Keynote, PDF, and PowerPoint versions available here: http://digitalize.ca/fitc2010/

    Some demos: http://digitalize.ca/fitc2010/demos/
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,242
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
365
Comments
5
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide





  • (Note: I've omitted some APIs, since they're not relevant or not yet prime-time ready)















  • In context of mobile, can mean the difference between a happy user and a hate mail user












  • Optimized for playback and Usability (big buttons)
    (ever try using a Flash-based player with the teeniest of controls -- no offense Adobe)
    It makes for a bit of a jagged UX





  • Images are dead
    Okay, no.

    Pure CSS graphics?
    I'd say we're far from seeing that















  • matrix property = [a, b, c, d]



  • Though, tools coming out that will help make the process far easier.




































  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well
  • Set z-index as well











  • Traditional user flows for location based apps

    Enter City or Postal Code ---> Narrow Down Choices ---> Done
         (City -- long name)               (5 choices)                (done)
         (Postal Code --- wrong format)   ("Did you mean?")     (done)

    Cut that down to two simple clicks
  • Work similar to XHR requests
    --- Specify callbacks
    --- Have to wait for the location in some instances (if the GPS is slow)




  • Caveat: WatchLocation stops when screen times out
    Though, I’ve heard (but not tested) that web workers can get around this
  • Once allowed though, most devices remember the allow and won’t prompt the user again.













  • The one key thing needed to enable offline

    Just a file that tells the browser what to cache
    Browser serves up cached content when user's connection is offline

    What about navigator.onLine / navigator.offLine ?
    Supported, but Google thinks otherwise


  • sessionStorage is window-specific
    localStorage is browser-specific

    Standard key-value store 
























  • Processing.js -> Canvas
    Wrappers for geolocation (with fallback to Google IP geolocation)
    CSS3 animation / transition support
    etc