Building a better web

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

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.

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.

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.

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.

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.

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.

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.

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)

“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)

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

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 ﬁne tooth comb. Applying use cases and better documenting how browsers should handle elements down to a very detailed level.

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

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 hands down)... Like, from page 0—hero (all hands went down, with the exception of Mike Smith [W3C] and a few others)

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 certain pieces of web technology that would be considered HTML5.

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 planet.#

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

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…

Its about 50% of the size, which is much more palatable

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.

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 bullshit, but the readability of these pages is abysmal…”

“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

“…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…

“…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…

AK. A classically trained chap, typographic genius.

ℜ ab+c ab-c.com.au Together, we are ab+c, weʼre new, expect to hear more from us.

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 Firefox, then hosted the fonts on his own website.

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 trafﬁc on my website, it died down after about a week. Nothing happened. Until…

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?

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 you today#

Boom. The spec styles, only, running on a W3C domain

iPads, iPhones? Yeah we got views for those too#

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, 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#

“W3C: Hold off on deploying HTML5 in websites” —infoworld.com Which was straight away misconstrued by lazy tech writers

“W3C Ofﬁcial: 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.

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

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, you charming looking bastard.

and my new best friend

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

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 right for a sane ʻmeasureʼ [the width of the text])

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

.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

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(…, …, …, from(#33ff00), to(#ff00ff)); } You could use a css gradient#

section { background-‐image: url("lame-‐gradient.png"); } and back down to loading an image (which obviously uses more bandwidth)

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 devices, sadly the new windows 7 phone is going to also use the IE7 rendering engine. This means no awesome features (shown following).

Firstly, HTML manifest

CACHE MANIFEST / /stylesheets/master.css /javascripts/application.js If you have a ﬁle like this, your browser will cache /, master.css and application.js, so when your users are ofﬂine, they can literally type in “website.com” and get the full experience

CACHE MANIFEST / /stylesheets/master.css /javascripts/application.js NETWORK: /exchange We can say when we need network access

CACHE MANIFEST / /stylesheets/master.css /javascripts/application.js NETWORK: /exchange FALLBACK: /people /unavailable-content When we want to have something like a custom 404

CACHE MANIFEST / /stylesheets/master.css /javascripts/* NETWORK: /exchange FALLBACK: /people /unavailable-content Even * wildcards for paths

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 ﬁle (see Version 20?—You could also use the commit hash from your version control system)

<!DOCTYPE HTML> <html manifest=”site.manifest”> Add the manifest ﬁle reference to an attribute called “manifest” on the HTML node

Content-Type: text/cache-manifest Listen: YOU MUST DO THIS That is, serve your manifest ﬁle 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 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

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 ﬁles have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted

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 ﬁles have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted

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 ﬁles have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted

ﬄ 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

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

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

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, both have the exact same API and 5mb ﬁle size limit per domain. They are like a cookie in that they use a same domain policy for data access

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/

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

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.

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 from offline storage? } But I think we can agree, that we can combine these technologies and come up with interesting results

$(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 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 ﬁrmware, what ﬁrmware are you on?” Our experiences with new mobile devices are going to change us all, no matter where we come from.

“An interface is humane if it is responsive to human needs and considerate of human frailties.” —Jef Raskin, The Humane Interface

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.

http://localhost	324
http://www.webdirections.org	157
http://sseedupedblogg.creuna.se	96
http://www.victusspiritus.com	82
http://notes.42loops.com	28
http://abava.blogspot.com	23
http://lanyrd.com	8
http://abava.blogspot.ru	5
http://www.tlu.ee	5
http://static.slidesharecdn.com	4
http://xss.yandex.net	3
http://buzzgamesnews.blogspot.com	1
http://twittertim.es	1
http://translate.googleusercontent.com	1
http://www.techgig.com	1
http://scripty2.soup.io	1
http://soup.mabe.at	1
http://www.onlydoo.com	1

Building a better web

by Ben Schwarz on Oct 18, 2010

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 742

Statistics

Building a better web Presentation Transcript