• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building a better web
 

Building a better web

on

  • 18,002 views

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

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

Statistics

Views

Total Views
18,002
Views on SlideShare
17,217
Embed Views
785

Actions

Likes
45
Downloads
0
Comments
4

24 Embeds 785

http://localhost 324
http://www.webdirections.org 179
http://sseedupedblogg.creuna.se 96
http://www.victusspiritus.com 83
http://notes.42loops.com 28
http://abava.blogspot.com 23
http://lanyrd.com 19
http://abava.blogspot.ru 5
http://www.tlu.ee 5
http://static.slidesharecdn.com 4
http://www.techgig.com 3
http://xss.yandex.net 3
http://translate.googleusercontent.com 2
http://gracefulbuilding.buntt.us 1
http://thinkingofbuilding.buntt.us 1
http://42loops.tumblr.com 1
http://abava.blogspot.cz 1
http://abava.blogspot.de 1
http://www.onlydoo.com 1
http://soup.mabe.at 1
http://scripty2.soup.io 1
http://buzzgamesnews.blogspot.com 1
http://twittertim.es 1
http://buildingwriting.buntt.us 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • I uploaded the localStorage demo from slide 103 to vimeo
    http://vimeo.com/16088275
    Are you sure you want to
    Your message goes here
    Processing…
  • peace
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building a better web Building a better web Presentation Transcript

    • 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 fine 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.#
    • 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#
    • 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 traffic 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
    • 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 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.
    • <!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 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
    • 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 file (see Version 20?—You could also use the commit hash from your version control system)
    • <!DOCTYPE HTML> <html manifest=”site.manifest”> Add the manifest file 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 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 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 files 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 files 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 files have been downloaded, you can call swap cache Obsolete - The manifest 404ʼd, the cache will be deleted
    • 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 database on the server side, transport it back using json, only to be parsed and reentered into another sql database
    • 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
    • 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
    • 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 file 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 firmware, what firmware 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.