BEN SCHWARZ
    presents




BUILDING
  a better
  WEB
Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that I...
95


                     96


                                97


                                           98


      ...
2.0
          95


                     96


                                97


                                        ...
2.0                3.2       4.0
          95


                     96


                                97


           ...
2.0                3.2       4.0                                                               4.01
          95


       ...
XHTML1




                     2.0                3.2       4.0                                                          ...
XHTML1




                                                                                 XHTML1.1




                 ...
XHTML1




                                                                                 XHTML1.1

                    ...
Other people had noticed this also, take Mark Pilgrim, the author of diveintohtml5.org (The single best book for HTML that...
“The CSS working group
                     right now is chronically
                     dysfunctional…”

               ...
I saw Bert Bos speak here at web directions around 3-5 years ago. One thing that he said while showing new css3 features w...
Some of you may have heard of the WHATWG…


An organisation, formed by individuals who work for companies like Opera, Apple and Mozilla
The whatwg go through the html5 spec with a fine tooth comb. Applying use cases and better documenting how browsers should ...
Their work mirrors a copy of the html5 spec from the w3c—which is maintained using a version control system (subversion, I...
Their work mirrors a copy of the html5 spec from the w3c—which is maintained using a version control system (subversion, I...
If you wanted to keep in touch with developments, you can also check the @whatwg twitter
account#
If you wanted to keep in touch with developments, you can also check the @whatwg twitter
account#
Changing pace a little. Who knows what a spec is? (70% of the audience held up their hands). Who has read a spec (some han...
I did a word count of HTML4, it was about the size of a small novel that you could read over a weekend.
A common myth of HTML5 is that its a really big awful spec…
How horrible? Well, I couldnʼt copy and paste the text into Pages... my computer crashed for 7 long
minutes.#
I eventually wrote some javascript to get a rough word count. Remembering that this single page version of the spec omits ...
HTML5 is backwards compatible, donʼt break anything in existing browsers.
… but its still pretty hard to read a spec
because theyʼre designed for people who write browser rendering engines… not developers.
Not the millions of web designers and developers around the world, but just a couple hundred people on the face of the
pla...
Not all is lost. Hixie and others have painstakingly gone through the spec and marked out all the sections that could be o...
Leading the charge on this is Mike™ Smith, a W3C representative from Tokyo, Japan. Who just happens to be a good friend of...
Its about 50% of the size, which is much more palatable
FOR THE

                                                               LOVE
                                             ...
During this process of preparing for my workshops, I thought “Who really wants to read something that looks like this?”
“So, I’ve been trying to read [W3C]
specs more than ever. Not only is the
language used some form of
incompressible bullsh...
“So, I’ve been trying to read [W3C]
specs more than ever. Not only is the
language used some form of
incompressible bullsh...
“…Why does a page have to look like
                  that ugly ass bullshit?”




This is taken from an e-mail to my long...
“…Why does a page have to look like
                  that ugly ass bullshit?”


                                         ...
AK. A classically trained chap, typographic genius.
ℜ
                                                                   ab+c
                                                ...
We sat down a bashed out a grease monkey script together, it added stylesheets and javascripts.
So rather than having something like this
We had this.
Within 3—4 hours Paul Irish had forked my code, corrected a cross domain @font-face issue found only in Firef...
Pause. Ajaxin.com wrote an article titled “W3C, Hire Ben Schwarz”
http://ajaxian.com/archives/w3c-hire-ben-schwarz-now-mak...
I got an email introduction from Oli Studholme, (http://oli.jp, @boblet on twitter), he was the guy who got me in touch wi...
Today, at Web directions south 2010, Iʼd like to introduce to you…
The all new HTML5, web developer edition. Mike Smith, sitting in the audience just deployed this as I started speaking to ...
Boom. The spec styles, only, running on a W3C domain
iPads, iPhones? Yeah we got views for those
too#
Today, its live here
Today, its live here
If you support this project, have feedback or anything of the sort, use this hash
tag#
"The problem we're facing right now
                 is there is already a lot of excitement
                 for HTML5, b...
“W3C: Hold off on deploying
                 HTML5 in websites”


                                                        ...
“W3C Official: Don't Use HTML5 Yet”




                                                                                   ...
<!DOCTYPE HTML>



Here is the HTML5 doctype, its beauiful, simple, sets your browser to use standards mode, and better st...
Your browser determines the features that you can use, irregardless of which doctype youʼre using
So all these features, how do we know what we can do? Without breaking old browsers or giving them an “empty” experience?
Modernizr

Modernizr 1.7, coming soon with:
http://github.com/Modernizr/Modernizr/issues#issue/103
ş



Written by Faruk,

Paul says the pronunciation is “A-Tesh”. I left this on my slides, I hope I got it right Faruk, yo...
and my new best friend
“         hey is this ben schwartz you? <link>
              i'm sure there is only one ben schwarz in
              this ...
Moving on. Modernizr detects support for all of these features
By adding class names to your html
element#
p	
  {	
  width:	
  33em;	
  }




So I can take my regular width for a paragraph of text (Note, 33em is usually about rig...
.csscolumns	
  p	
  {	
  
                                              	
  	
  	
  width:	
  auto;	
  
                  ...
.csscolumns	
  p	
  {	
  
                                            	
  	
  	
  width:	
  auto;	
  
                    ...
You can achieve something like this—Which I have actually used on my new web site
germanforblack.com#
In a browser without css columns, you can offer the user a slightly different layout
.cssgradients	
  section	
  {	
  
    	
  	
  background-­‐image:	
  
    	
  	
  	
  	
  	
  -­‐webkit-­‐gradient(…,	
  …...
section	
  {	
  
 	
  	
  background-­‐image:	
  url("lame-­‐gradient.png");	
  
 }




and back down to loading an image ...
HOT
you can go and do aw/(ful|some) things like this. Hot pink to neon green.
Mobile devices are leading the web, we get one every year or two, even your mothers do. This means newer browsers on many ...
Firstly, HTML manifest
CACHE MANIFEST

                                  /
                                  /stylesheets/master.css
            ...
CACHE MANIFEST

                             /
                             /stylesheets/master.css
                      ...
CACHE MANIFEST

                              /
                              /stylesheets/master.css
                    ...
CACHE MANIFEST

                             /
                             /stylesheets/master.css
                      ...
CACHE MANIFEST
                                           # Version 20

                                           /
     ...
<!DOCTYPE HTML>
                                <html manifest=”site.manifest”>




Add the manifest file reference to an a...
Content-Type: text/cache-manifest




Listen: YOU MUST DO THIS
That is, serve your manifest file with this content-type.
.htaccess




Using a htaccess
.htaccess




                   AddType text/cache-manifest manifest




Using a htaccess
/etc/mime.types




or editing mime.types if youʼve got access to it
/etc/mime.types


                            video/fli                          fli
                            video/gl ...
js>                 applicationCache.status




You can also check the status of your manifest cache..


Idle - Nothing to...
js>                 applicationCache.status                    0
                                                         ...
js>                 applicationCache.status                    0   Uncached
                                              ...
ffl

So, weʼve stored our app locally…
Earlier, there was a project called websql, in which we had a sqlite database that could be queried via javascript
Earlier, there was a project called websql, in which we had a sqlite database that could be queried via javascript
The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL dat...
The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL dat...
The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL dat...
JSON




The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use ...
JSON




The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use ...
Like, seriously.
Thankfully, the project has been stalled for well over a year.
localStorage
                                       sessionStorage



So, weʼre going to look at local and session storage...
Here was a video demo that I canʼt extract from keynote, I showed different access to `localStorage`.
Mike Smith blogged a...
var	
  currency	
  =	
  {
                               	
  	
  "AUD":{
                               	
  	
  	
  	
  "n...
localStorage['rate'] = JSON.stringify(currency)




Any browser that has localStorage support also features a native JSON ...
JSON.parse(localStorage['rate'])




and here, from storage I re-create an object
navigator.onLine




We can also tell when our users are “online”
Really though, navigator.online will tell you if your user is (probably) on a plane…
if(navigator.onLine) {
                    // ajax request
                  } else {
                    // maybe pull it...
$(window).bind("offline", function() {
  $("body").addClass("offline");
});
body.offline	
  nav#main	
  {	
  opacity:	
  0.9;	
  }




like make those navigation items look dulled…
We know what users devices are capable of, so lets offer a holistic experience no matter who they are.
Here I told a story...
“An interface is humane if it is
responsive to human needs and
considerate of human frailties.”


             —Jef Raskin...
Iʼll leave you with this:

The W3C are documenters, not designers, they have no clients. The HTML5 spec is a modest specifi...
Building a better web
Building a better web
Building a better web
Building a better web
Building a better web
Upcoming SlideShare
Loading in...5
×

Building a better web

17,756

Published on

Presentation from Web directions South 2010, featuring the launch of alternate specification styles.

Published in: Design, Technology
4 Comments
47 Likes
Statistics
Notes
  • I personally love the Web 2.0 style.
    http://creativeon.com/website-designing/index.html
    Styled simplicity will always beat the crap out of the early 200x years fad that was huge and flashy graphics all over the place. Will be checking out the list to see if I can find some new pointers and inspiration
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I personally love the Web 2.0 style.
    http://creativeon.com/website-designing/index.html
    Styled simplicity will always beat the crap out of the early 200x years fad that was huge and flashy graphics all over the place. Will be checking out the list to see if I can find some new pointers and inspiration
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I uploaded the localStorage demo from slide 103 to vimeo
    http://vimeo.com/16088275
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • peace
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
17,756
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
4
Likes
47
Embeds 0
No embeds

No notes for slide

Transcript of "Building a better web"

  1. 1. BEN SCHWARZ presents BUILDING a better WEB
  2. 2. Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  3. 3. 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  4. 4. 2.0 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  5. 5. 2.0 3.2 4.0 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  6. 6. 2.0 3.2 4.0 4.01 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  7. 7. XHTML1 2.0 3.2 4.0 4.01 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  8. 8. XHTML1 XHTML1.1 2.0 3.2 4.0 4.01 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  9. 9. XHTML1 XHTML1.1 HTML5 2.0 3.2 4.0 4.01 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 Looking back, there was a lot of innovation going on early in my career, I quickly realised that since I ʻwent proʼ that Iʼd been using the same damn version of HTML. This bothered me a fair bit. Looking at why: The W3C became increasingly interested in semantics and allowing publication of content on various devices, mobile, print, televisions. They made some good decisions, but poorly executed them. XHTML went nowhere.
  10. 10. Other people had noticed this also, take Mark Pilgrim, the author of diveintohtml5.org (The single best book for HTML that Iʼve read to date)
  11. 11. “The CSS working group right now is chronically dysfunctional…” —Ian Hickson, Google, W3C, WHATWG Mark isnʼt the only person to notice issues of the organisation that is the W3C. This from Ian Hickson, an invited chair to the CSS working group. (Which is somewhat of an honour to be a part of)
  12. 12. I saw Bert Bos speak here at web directions around 3-5 years ago. One thing that he said while showing new css3 features was ʻfancy bordersʼ, this really stuck with me, he had no idea what designers really wanted or needed. This stuck with me until now, although Iʼd never really thought about it
  13. 13. Some of you may have heard of the WHATWG…
  14. 14.  An organisation, formed by individuals who work for companies like Opera, Apple and Mozilla
  15. 15. The whatwg go through the html5 spec with a fine tooth comb. Applying use cases and better documenting how browsers should handle elements down to a very detailed level.
  16. 16. Their work mirrors a copy of the html5 spec from the w3c—which is maintained using a version control system (subversion, I believe). This tracker allows you to track every change to the spec, as it happens.#
  17. 17. Their work mirrors a copy of the html5 spec from the w3c—which is maintained using a version control system (subversion, I believe). This tracker allows you to track every change to the spec, as it happens.#
  18. 18. If you wanted to keep in touch with developments, you can also check the @whatwg twitter account#
  19. 19. If you wanted to keep in touch with developments, you can also check the @whatwg twitter account#
  20. 20. Changing pace a little. Who knows what a spec is? (70% of the audience held up their hands). Who has read a spec (some hands down)... Like, from page 0—hero (all hands went down, with the exception of Mike Smith [W3C] and a few others)
  21. 21. I did a word count of HTML4, it was about the size of a small novel that you could read over a weekend.
  22. 22. A common myth of HTML5 is that its a really big awful spec…
  23. 23. How horrible? Well, I couldnʼt copy and paste the text into Pages... my computer crashed for 7 long minutes.#
  24. 24. I eventually wrote some javascript to get a rough word count. Remembering that this single page version of the spec omits certain pieces of web technology that would be considered HTML5.
  25. 25. HTML5 is backwards compatible, donʼt break anything in existing browsers.
  26. 26. … but its still pretty hard to read a spec
  27. 27. because theyʼre designed for people who write browser rendering engines… not developers.
  28. 28. Not the millions of web designers and developers around the world, but just a couple hundred people on the face of the planet.#
  29. 29. Not all is lost. Hixie and others have painstakingly gone through the spec and marked out all the sections that could be omitted… to create a web developer edition of the spec
  30. 30. Leading the charge on this is Mike™ Smith, a W3C representative from Tokyo, Japan. Who just happens to be a good friend of mine now…
  31. 31. Its about 50% of the size, which is much more palatable
  32. 32. FOR THE LOVE of THE WEB A few months ago, I travelled the country (Australia, if youʼre wondering) and gave a bunch of HTML5/CSS3/Web technology workshops.
  33. 33. During this process of preparing for my workshops, I thought “Who really wants to read something that looks like this?”
  34. 34. “So, I’ve been trying to read [W3C] specs more than ever. Not only is the language used some form of incompressible bullshit, but the readability of these pages is abysmal…”
  35. 35. “So, I’ve been trying to read [W3C] specs more than ever. Not only is the language used some form of incompressible bullshit, but the readability of these pages is abysmal…” —Me
  36. 36. “…Why does a page have to look like that ugly ass bullshit?” This is taken from an e-mail to my long time friend, and business partner…
  37. 37. “…Why does a page have to look like that ugly ass bullshit?” —Me This is taken from an e-mail to my long time friend, and business partner…
  38. 38. AK. A classically trained chap, typographic genius.
  39. 39. ℜ ab+c ab-c.com.au Together, we are ab+c, weʼre new, expect to hear more from us.
  40. 40. We sat down a bashed out a grease monkey script together, it added stylesheets and javascripts.
  41. 41. So rather than having something like this
  42. 42. We had this. Within 3—4 hours Paul Irish had forked my code, corrected a cross domain @font-face issue found only in Firefox, then hosted the fonts on his own website.
  43. 43. Pause. Ajaxin.com wrote an article titled “W3C, Hire Ben Schwarz” http://ajaxian.com/archives/w3c-hire-ben-schwarz-now-making-specs-nice-to-look-at While this was great for my ego, after a few days of crazy traffic on my website, it died down after about a week. Nothing happened. Until…
  44. 44. I got an email introduction from Oli Studholme, (http://oli.jp, @boblet on twitter), he was the guy who got me in touch with Mike Smith. Without this email, none of the following could occur. But what occurred?
  45. 45. Today, at Web directions south 2010, Iʼd like to introduce to you…
  46. 46. The all new HTML5, web developer edition. Mike Smith, sitting in the audience just deployed this as I started speaking to you today#
  47. 47. Boom. The spec styles, only, running on a W3C domain
  48. 48. iPads, iPhones? Yeah we got views for those too#
  49. 49. Today, its live here
  50. 50. Today, its live here
  51. 51. If you support this project, have feedback or anything of the sort, use this hash tag#
  52. 52. "The problem we're facing right now is there is already a lot of excitement for HTML5, but it's a little too early to deploy it because we're running into interoperability issues," —Philippe Le Hegaret, W3C interaction domain leader Now, to recent events… Philippe was quoted saying this#
  53. 53. “W3C: Hold off on deploying HTML5 in websites” —infoworld.com Which was straight away misconstrued by lazy tech writers
  54. 54. “W3C Official: Don't Use HTML5 Yet” —dzone.com Still, Iʼm not sure he said this at all. Fear tactics, not for politics, for a fucking web based technology.
  55. 55. <!DOCTYPE HTML> Here is the HTML5 doctype, its beauiful, simple, sets your browser to use standards mode, and better still, it doesnʼt decide that youʼre using a “Version” of HTML.
  56. 56. Your browser determines the features that you can use, irregardless of which doctype youʼre using
  57. 57. So all these features, how do we know what we can do? Without breaking old browsers or giving them an “empty” experience?
  58. 58. Modernizr Modernizr 1.7, coming soon with: http://github.com/Modernizr/Modernizr/issues#issue/103
  59. 59. ş Written by Faruk, Paul says the pronunciation is “A-Tesh”. I left this on my slides, I hope I got it right Faruk, you charming looking bastard.
  60. 60. and my new best friend
  61. 61. “ hey is this ben schwartz you? <link> i'm sure there is only one ben schwarz in this world. i dated an erica schwartz in 6th grade. despite our matching necklaces, it turns out we weren’t Together Forever” —Paul Irish Paul is a bit of a character, one day I returned to my computer to collect some missed IM messages from Paul.
  62. 62. Moving on. Modernizr detects support for all of these features
  63. 63. By adding class names to your html element#
  64. 64. p  {  width:  33em;  } So I can take my regular width for a paragraph of text (Note, 33em is usually about right for a sane ʻmeasureʼ [the width of the text])
  65. 65. .csscolumns  p  {        width:  auto;        column-­‐count:  2;      column-­‐gap:  1em;             } but when I have support for css3 columns, I can set the width to be auto and allow it to break into two short columns#
  66. 66. .csscolumns  p  {        width:  auto;                    -­‐webkit-­‐column-­‐count:  2;      -­‐moz-­‐column-­‐count:  2;      -­‐ms-­‐column-­‐count:  2;      -­‐o-­‐column-­‐count:  2;      column-­‐count:  2;      -­‐webkit-­‐column-­‐gap:  1em;      -­‐moz-­‐column-­‐gap:  1em;      -­‐ms-­‐column-­‐gap:  1em;      -­‐o-­‐column-­‐gap:  1em;      column-­‐gap:  1em;             } Sadly, this is really how I have to do it right now
  67. 67. You can achieve something like this—Which I have actually used on my new web site germanforblack.com#
  68. 68. In a browser without css columns, you can offer the user a slightly different layout
  69. 69. .cssgradients  section  {      background-­‐image:            -­‐webkit-­‐gradient(…,  …,  …,                                              from(#33ff00),                                              to(#ff00ff)); } You could use a css gradient#
  70. 70. section  {      background-­‐image:  url("lame-­‐gradient.png");   } and back down to loading an image (which obviously uses more bandwidth)
  71. 71. HOT you can go and do aw/(ful|some) things like this. Hot pink to neon green.
  72. 72. Mobile devices are leading the web, we get one every year or two, even your mothers do. This means newer browsers on many devices, sadly the new windows 7 phone is going to also use the IE7 rendering engine. This means no awesome features (shown following).
  73. 73. Firstly, HTML manifest
  74. 74. CACHE MANIFEST / /stylesheets/master.css /javascripts/application.js If you have a file like this, your browser will cache /, master.css and application.js, so when your users are offline, they can literally type in “website.com” and get the full experience
  75. 75. CACHE MANIFEST / /stylesheets/master.css /javascripts/application.js NETWORK: /exchange We can say when we need network access
  76. 76. CACHE MANIFEST / /stylesheets/master.css /javascripts/application.js NETWORK: /exchange FALLBACK: /people /unavailable-content When we want to have something like a custom 404
  77. 77. CACHE MANIFEST / /stylesheets/master.css /javascripts/* NETWORK: /exchange FALLBACK: /people /unavailable-content Even * wildcards for paths
  78. 78. CACHE MANIFEST # Version 20 / /stylesheets/master.css /images/icons/appicon.png /images/icons/appicon-x2.png /images/loading.png /images/btn-clear.png /images/btn-clear-x2.png /javascripts/json.js /javascripts/dataset.js /javascripts/application.js NETWORK: /exchange Of course, if we updated master.css, by design the manifest will be checked, deemed that nothing has been changed and NOT redownload master.css. Do force a cache refresh, weʼll need to somehow change the manifest file (see Version 20?—You could also use the commit hash from your version control system)
  79. 79. <!DOCTYPE HTML> <html manifest=”site.manifest”> Add the manifest file reference to an attribute called “manifest” on the HTML node
  80. 80. Content-Type: text/cache-manifest Listen: YOU MUST DO THIS That is, serve your manifest file with this content-type.
  81. 81. .htaccess Using a htaccess
  82. 82. .htaccess AddType text/cache-manifest manifest Using a htaccess
  83. 83. /etc/mime.types or editing mime.types if youʼve got access to it
  84. 84. /etc/mime.types video/fli fli video/gl gl video/mpeg mpeg mpg mpe video/mp4 mp4 video/quicktime qt mov text/cache-manifest manifest or editing mime.types if youʼve got access to it
  85. 85. js> applicationCache.status You can also check the status of your manifest cache.. Idle - Nothing to be done Checking - Downloading the manifest Update Ready - The files have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted
  86. 86. js> applicationCache.status 0 1 2 3 4 5 You can also check the status of your manifest cache.. Idle - Nothing to be done Checking - Downloading the manifest Update Ready - The files have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted
  87. 87. js> applicationCache.status 0 Uncached 1 Idle 2 Checking 3 Downloading 4 Update Ready 5 Obsolete You can also check the status of your manifest cache.. Idle - Nothing to be done Checking - Downloading the manifest Update Ready - The files have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted
  88. 88. ffl So, weʼve stored our app locally…
  89. 89. Earlier, there was a project called websql, in which we had a sqlite database that could be queried via javascript
  90. 90. Earlier, there was a project called websql, in which we had a sqlite database that could be queried via javascript
  91. 91. The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be parsed and reentered into another sql database
  92. 92. The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be parsed and reentered into another sql database
  93. 93. The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be parsed and reentered into another sql database
  94. 94. JSON The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be parsed and reentered into another sql database
  95. 95. JSON The idea was that weʼd have a browser, we would make a call to our server, using json. This would (probably) use a SQL database on the server side, transport it back using json, only to be parsed and reentered into another sql database
  96. 96. Like, seriously. Thankfully, the project has been stalled for well over a year.
  97. 97. localStorage sessionStorage So, weʼre going to look at local and session storage, both have the exact same API and 5mb file size limit per domain. They are like a cookie in that they use a same domain policy for data access
  98. 98. Here was a video demo that I canʼt extract from keynote, I showed different access to `localStorage`. Mike Smith blogged a demo of this technology a while back, so check that out if youʼre interested. http://sideshowbarker.net/2009/02/09/examine-html5-localstorage-and-sessionstorage- data-with-web-inspector/
  99. 99. var  currency  =  {    "AUD":{        "name":"Australian  Dollars",        "symbol":"$",        "rate_usd":0.9876    } } So say you had some data like this—Maybe youʼd transferred it over JSON from your web server
  100. 100. localStorage['rate'] = JSON.stringify(currency) Any browser that has localStorage support also features a native JSON library. Here I turn the JSON into a string representation.
  101. 101. JSON.parse(localStorage['rate']) and here, from storage I re-create an object
  102. 102. navigator.onLine We can also tell when our users are “online”
  103. 103. Really though, navigator.online will tell you if your user is (probably) on a plane…
  104. 104. if(navigator.onLine) { // ajax request } else { // maybe pull it from offline storage? } But I think we can agree, that we can combine these technologies and come up with interesting results
  105. 105. $(window).bind("offline", function() { $("body").addClass("offline"); });
  106. 106. body.offline  nav#main  {  opacity:  0.9;  } like make those navigation items look dulled…
  107. 107. We know what users devices are capable of, so lets offer a holistic experience no matter who they are. Here I told a story about my girlfriends kid brother, who was my best friend in the world after I brought a brand new PSP in HK a few years ago. A month later, he had one, a week after that I came over to visit, he said something roughly like: ʻhey, so I downloaded some torrented games, cracked the firmware, what firmware are you on?” Our experiences with new mobile devices are going to change us all, no matter where we come from.
  108. 108. “An interface is humane if it is responsive to human needs and considerate of human frailties.” —Jef Raskin, The Humane Interface
  109. 109. Iʼll leave you with this: The W3C are documenters, not designers, they have no clients. The HTML5 spec is a modest specification—while they are working hard to ensure it does not become an act of fiction and is well implemented, we, as designers and developers need to take the web for ourselves and build something truly powerful. As content producers we are some of the most powerful people in the world, we can influence goverenment, save peoples lives in the case of a natural disaster and communicate like we never have before.

×