Canvas is more performant. Many mobile devices already have Canvas implemented in their browsers, not true of Flash.

Inside IQ: Analytics dashboard for petabyte storage clusters. So much data that the owners have little idea what’s actually happening in the systems.

JQuery library “Flot” integrates with Canvas for doing real-time data visualizations. Flot renders the canvas but we still have access to the DOM and the canvas so we can mash up the output of these tools. This stuff is so impressive. There are other JQuery plugins that draw on top of Flot as well.

Why Canvas? Why Flash?

Salant: A client had previously used a commercial Flash-based charting system and had a bad experience, wanted something cleaner. So went with Flot. IE compatibility requirements were low since it was a back-end tool (not public).

Haase: A Flex expert doing similar things in Flash. Snarky comment about having to redevelop a graphics library every year (ie Flash tools for this kind of stuff already exists). Sees all of this as reinventing wheels that already exist. Flash is going to give you filter effects like drop shadows and blurs. You’re going to have build up all this stuff again in Canvas. Flash gives you this stuff out of the box. Finally, what’s the tooling support? ActionScript is a nice language. Flash caught on not because of its API but because they were given a tool that made it easy to create the visuals they needed. It’s all already there in Flash. API? Great. Where’s the tool?

Germick: The toolset is really important. If I need to make a cute fuzzy bunny jumping around, Flash is a simple tool that’s already there. This is going to be much harder in Canvas. Also the giant Flash community already out there. There’s no contest in terms of the toolset that’s already extant.

Browser compatibility
====================

One advantage of Flash is that it’s browser agnostic. The big issue is IE since it doesn’t support Canvas.

Salant: It’s a more complicated than that. Webkit is the engine behind lots of browsers, plus Android and the iPhone. IE adapter for Canvas: http://j.mp/excanvas … performance of that adapter is crap right now. For IE we’re using ChromeFrame – IE users run the Chrome engine in a frame. Big download but once installed it’s blazingly fast.

Bespin is the canvas-based editor (I wrote about this at a previous show). Bespin won’t work in IE of course. We thought we could get OK perf out of a Flash or Silverlight bridge but decided not to. IE9 is intending to support Canvas, but they have a lot invested in Silverlight. They’re not aligned with the success of the open web.

You have the developer web (can choose any browser any time), the consumer web (your mom’s not going to install that adapter) and you have the business web (corp customers who aren’t allowed to use alternative browsers). So three audiences to think about.

Mobile: iPhone and iPad don’t have Flash support, but they do have Canvas. If Apple is a dominant player in this tablet space, MS and Adobe are going to have a really hard time of it. I won’t be surprised to see litigation come out of it.

It’s not like Flash is dead on mobile – it works on other phones, and the 10.1 release increases performance on those platforms. But iPhone and iPad are dominant. Works on Palm Pre and Android.

Apple talks about Flash not performing well on Macs in general, blames Adobe. Says it would be too resource intensive on the iPhone. But 3rd party studies on this have varying conclusions. Haase: Flash 10.1 is in beta – they’ve worked hard on performance and footprint.

Galbraith actually anticipates Flash being *more* performant than Canvas for some time to come. Google for “canvas game snowball” to see what the canvas performance on your phone is like right now. But Galbraith finds Canvas performance more than adequate for most purposes right now.

User Experience
==============

Veen: Flash detractors say that Flash is an alien in the browser. Can’t use Cmd-F to find text in it. Can’t copy images out of it. Steals keyboard focus. Sections aren’t bookmarkable, etc.

This is partly dependent on the type of app you’re doing. Do you need multiple instances on the page? Is animation heavy? How much text is there? Do you need game-like experience or design/navigation experience?

The same criticism about Flash being an alien in the browser could be made about Canvas.

Adobe TV used to be a Flex app, but they rewrote it as a regular web page and people loved it.

The most successful Flash experience on the web is the YouTube video player.

Bespin (editor) is built in Canvas, but isn’t accessible to the blind. So we’re back to the same problems.

If you crack open the DOM on a lot of people you see a lot of divs that are implementation details that have nothing to do with page logic. But with Bespin we were excited because all the business happens in the canvas element and we can explode that out into the rest of the page, giving access to screen readers. So we’ve broken access to screen readers today but the path is clear to actually make things better than they were before. Stay tuned.

Web development practices
========================

Salant: We were surprised by the accessibility of the canvas element. The step to get into Canvas development is actually a teeny little step – a progressive learning experience that feels natural (unlike with Flash). A lot of the tools we invest in for web development turn into great skills for canvas development. We also have the View Source benefit – you can’t do this with Flash but you can with Canvas tools. You can see what other developers are doing.

No matter how great it is to develop in Javascript and Canvas, not everyone is a developer. CS will stick around for all the devs who are less programmer-y.

Will there be a Flash option to output to HTML5? Haase won’t say (says he doesn’t know). Adobe is a tools company and they like selling tools: “It’s where we make our money.”

Galbraith: The open web means a lot of different things to a lot of different people. I’m uncomfortable trusting my work to a proprietary platform. You choose a platform that’s aligned with your goals, but then later the goals dis-converge and you run into unpleasantness. Now (with Canvas) we can do Flash-like development without going under single-vendor control. This critical dynamic tool is finally here and able to unleash the web as an app platform.

Microsoft just announced HTML5 support for IE9 a few minutes ago. Galbraith: They tried to decouple Canvas from HTML5 a while ago – we don’t know why. So the IE future is unclear for Canvas as of now.

Does SVG have any chance? IE9 allegedly has excellent SVG support. This could be a game changer. It’s a bit maligned because it’s been announced for so long. So there will be an additional SVG or Canvas decision to make.

Recommended book: Information Dashboard Design

Definition: A dashboard is a visual display of information. Has to be a single screen, has to provide an overview of a system. Some aspect of data visualization. Has to be scannable and tell at a glance where the problem areas are.

If there’s a problem area, make it pop out (e.g. grey histogram but with red for the highest or lowest bar). Or if using columns of numbers, use a red diamond next to highest or lowest number.

Scatter plots work well as well – outlying numbers are immediately obvious.

KPI – Key Performance Indicators. Everything you put on a dashboard is a performance indicator but not necessarily a KEY indicator.

Don’t just show the total sales for this year – show how it’s changed from last year. People need to see both of these stats side by side.

There’s a time and place to provide interactivity.

An area of contention – there’s so much to display, there’s a temptation to hide things behind tabs etc. But you can end up hiding KPIs inadvertently.

A hover over can be very useful – Dim the background, bring out a balloon showing more info about a certain data point.

Consider using word-size graphics (Edward Tufte). A sparkline graphic can show 30 data points at once without having to have a giant block on the page – just inserted next to explanatory text, can convey a lot in a very small space.

Make exceptions pop by muting the background.

Don’t let your baby daughter wear shirts with printing in Comic Sans!!!

Stay away from 3-dimensional graphs. They look hot but aren’t really effective (and they can distort data).

Pie charts in general should be avoided if you have more than a few data points. The difference between 30% and 40% may be significant but can be hard to see in a pie chart.

Be really careful about which data series to include in a graph. If graphing the mass of planets in the solar system and you include the sun, everything gets skewed way off kilter.

Your dashboard doesn’t have to look a car dashboard, or like you’re flying a plane.

There’s a time and a place for treemaps and heatmaps, but be judicious. Overuse of these and you’ll need to have training to use the dashboard. A good dashboard requires no training to use.

Careful of glossy effects for polish – it makes regions look two-tone, which can confuse if comparing to a color legend.

Challenges: Users are resistant to change. People become very reliant on information. A new dashboard design can be upsetting, even if radically better. It’s tough for people to let go of their wubbies. Get to understand users – their needs and motivations. Are they tied to the desk, or mobile? What are their pain points?

Prototyping dashboards is tough because it’s so detailed. Tabula Software recommended – lets you build designs on top of mock data.

Always vet your ideas with the tool jockeys. If there’s a particular platform you’re going to need, make sure it will work with their back-end systems before beginning (naturally). Learn about the client’s APIs and toolchains before or recommending various tools.

Your dashboard is only as cool as the data that’s available to you. There’s a lot of work that has to happen on the data architecture side to make certain things happen.

This is a very time consuming process – more so than a normal web or mobile app. Build in lots of time for development and design. Fail fast, get things in front of users as fast as possible. Pay to get prototypes if necessary.

Links:

• Junk Charts
• Dashboard Spy
• Perceptual Edge (Stephen Few)
• Edward Tufte
• Juice Analytics
• Dashboards by Example
• Many Eyes
• Tableau Software
• Bad Charts and Dasboards
• Dundas Data Visualization

Ship experiences that people love. If you show a wireframe, client won’t have a concept how it will look. A mockup will help with visualizaton. But a prototype increases the level of discourse/engagement. Prototype is interactive, usable. Not just pixel for pixel but interaction for interaction.

How would you prototype a roller coaster ride? How can you simulate that experience for client? User stands in line for 30 minutes then moves in a linear experience for 3 minutes then exits. But with a web app, there are infinite number of paths you can take through the system.

- Linear experience, just the good stuff
- High fidelity, every step, in a browser
- Be scrappy, iterate a lot
- Make a commercial, not a spec
- Learn to code, be creative
- You can iterate faster and do more in code
- Prototype and discussions is your spec

That Old Spice commercial with the guy ending up on a horse? Not CGI – all one shot – lifting up the set, etc. Done “scrappy”. Prototypes should be like that – special effects to get the user to a particular experience quickly.

Three types of prototypes.

1) Slideshow prototype. You’re going from one mockup screen to the next. The mocks are high fidelity and it looks real. This only works when you’re presenting your own ideas, not when the client gets to navigate themselves. Make a video of you interacting with the slideshow. 2-3 minute screencast of us using the slideshow prototype. You can even feign pauses like you’re making real decisions – makes it extra convincing.

2) Hotspot prototype. Lots of tools will let you create these. Fireworks will let you output a design with built in hotspots. It’s still a slideshow, but with a bunch of hotspots navigating to other slides, so you get fake “real” interactivity. But with too much complexity, this becomes arduous to iterate. Still, very convincing.

3) Only here do we start using real HTML. The iPad commercial that looked like it supported Flash, where the Flash block was later replaced with a broken plugin icon? That was because the designers had done an HTML prototype with a browser, not because the iPad secretly supported Flash.

Google Docs problem: The browser already has File, Edit, View menus etc. But Google Docs introduces its own. Would this duplication fly with users? They did a functional prototype where the top menus were HTML but sub-menus were images popped up with CSS and Javascript.

Trick – build a 2-second pause into the demo so it looks like there’s a server on the other end, processing the request. The user has a mental preset where this delay tells them they’re working with a remote server. Very clever.

Sending a working prototype is very different to the team from sending a spec. Legget would not have been sold on the super stars project in GMail if they had not been able to play with the prototype – it would have died on the vine.

Google seldom builds functional specs anymore. But they prototype like crazy. The prototype is a living spec.

Prototyping is not ALL about the client. 50% of the value is working out UI problems for yourself.

“Learn to code. No way to lose an engineer’s trust faster than to recommend an idea that is not possible.”

Dummy content: Don’t use lorem ipsum. Don’t say “Image goes here.” Use real content in prototypes.

Google has its own Javascript library called Closure but 90% of the designers there don’t use it. We use JQuery or whatever we’re comfortable with.

Wasn’t sure what to expect from this session, which had no title and no description. But a few weeks ago, the photo professor at the J-School handed me a copy of Larnier’s new book You Are Not a Gadget, a sort of backlash manifesto against the digital age. Well, that’s not entirely fair — it’s not so much a backlash as it is a reasoned, thoughtful wander through some of the gotchas and backwaters of the digital age. Larnier talks about dignity, culture, black boxes, the history of our relationship to technology, mean-ness in online communities, and everything in between. His talk was as meandering as the book is, but inspirational and amazing at every turn. Though difficult to encapsulate, Larnier and his thread is something I feel everyone and tech should be listening to.

Lanier opened with a solo performance on a 7,000 year old instrument he says was, in a way, the first computer.

Implored audience to put away the gadgets and “engage with me, for just a moment.” It’s good to experience another mode just for a little while (confession: I did not go with his suggestion there – wanted to capture as much of this as possible).

“Instead of trying to generate as many tweets as possible, maybe it would be nice to have something less than perfectly documented. If you do it later, it will come from inside of you. ”

“Cloud computing is incredibly important to our continued survival.”

If you’re going to do a grand experiment, it only makes sense if you look at the data, look at what’s working and what’s not.

We have all these tools online but the nation is less able than ever to look at something like global climate change.

The future is this twisted thing where everything is more open than ever except for the most important stuff. It’s almost as if we decided to privatize the NSA and call it an ad agency.

Is there a third way, without polemics? It’s not like Lanier is “against the future.” The third way goes back to the original web, to the vision of Ted Nelson, articulated in 1960 (this is the Xanadu story). Ted’s idea: You have one password to get online and if you want to you can pay to be able to publish in various places.

All of our tech infrastructure is a giant industrial facility spread across the planet. We as good engineers need to do what we can to minimize carbon footprint. Why is there a Kindle and an iPad etc. etc.? So everyone can do lock-in. We don’t need that many physical things. Part of Nelson’s idea for original Xanadu is that there would only be logical copy of each file everywhere (no duplication). With open file copying we’re making arbitrary numbers of copies of so many files, making the internet bigger. Bit Torrent by itself is half the bits on the internet, for all these duplicate copies. This is where cloud computing becomes so imporant (the green issue).

People used to storm the gates at Nelson’s talks, claiming that he wanted to allow money into the beautiful new information age, he’s eeeeevilll..

Tim Berners Lee put together something infinitely simpler than what Nelson envisioned. Ugly and crude, but wow, it worked! There were millions of voices out there. Here was empirical data that people were better than we think they are. A flood of good will. So Ted was right and his critics were wrong.

If we think most people are creators, then we ask “How do we help the creators first?” But if we assume most people are passive consumers, then we bias toward consumption.

AS the web came up, there was an ascendancy of geek power, and people get drunk on power. Do non-geeks comprehend their Facebook privacy settings? We have created this world of geek primacy.

Craig Newmark didn’t say “Let’s make as much money as possible.” He said “Let’s do this minimal thing and see what it does for our society.”

The problem with Google’s stuff is that it represents an actual monopoly (whether it is or not).

Social contract: There’s an endless tedium about what’s fair use and what isn’t etc. But none of that matters until people buy into a social contract that gives the average citizen equal respect and opportunities. So we get away from the DRM problem “Oh you bought it but we still control it…” (which is a stupid arrangement). The Nelson model gets away from this.

Humans have ability to work as singletons or as pack animals. All of our conflicts – political, religious, etc. come down to that pack animal switch getting thrown. What wars are started by individuals? Connect this life online. Drive-by anonymity, or uninvested anonymity. Look at polarization of political debates. The world is made of divisions where people consider each other “the other.”

Facebook very different for adults who have a history of friends to mine, compared to 16 year olds who are creating their life for the first time. Very different experience. To have a persona as an adult requires some strategic forgetting of your old persona. Imagine Bob Dylan with his Facebook presence: “Oh there’s his Bar Mitzvah photo.” No, that stuff is forgotten.

The mean-ness problem is mitigated when people have something at stake. Clans coerce mean-ness towards people below them on the pecking order. When I mention a site that’s less mean, someone tells me “You have no idea how mean people get there.”

There are mean people in both Second Life and on YouTube but YouTube comments are the most base. Why?

A myth: “Give away the music and sell the t-shirt.” Well, it /can/ work, but it usually doesn’t. Coming are robots that copy any design onto a tshirt. So this model can only work until the robots arrive.

Strongly recommends E.M. Forester’s “The Machine Stops.”

Self-invention is the core of person-hood. Which is why this issue of Facebook for kids is such a hot button for me. You can’t self-invent on Facebook – you need to do that in the real world.

Problems:

- Gotta make a living
- Too many mean people
- Social contract where everyone is a first-class citizen

The problem with this online culture is that everone’s required to be a self-promoter all the time. “Me me me me me!!!”

Suddenly I remember that I’m biological, and have to deal with that.

Dignity means you don’t have to sing for your supper every damn time.

Three black boxes that rob you of dignity:

- Hedge fund computer
- Google computer
- NSA computer

And then he tooted on some flutes.
Undocumented instrument, bought off some teenage Hungarian gypsies. Wow – like a pair of two-foot fangs, fingers plaing off the ends.. He played masterfully

Unfortunately, the “R.I.P. part of the session title was never addressed, nor were any of Drupal’s core shortcomings or architectural annoyances. This was unfortunately just a 30-minute informercial for Drupal.

Would really have preferred to have heard Dries talk about plans to address Drupal’s deep archtitectural problems like lack of object orientation, lack of an ORM, lack of MVC, and annoying templating system. Took notes anyway.

Users today expect a lot of features “by default”. “Old skool” sites don’t cut it any more.

Problem 1: Your webmaster doesn’t scale. The traditional role of the guy who writes HTML in Notepad doesn’t exist any more. CMSs have eliminated the traditional role.

Problem 2: Your proprietary CMS is slow to innovate. They wait and see until certain services go mainstream before deciding to integrate. Slow to adopt. But OSS solutions adoption happens quickly.

Problem 3: Users are your content creators now. UGC is everywhere. Trying to control UGC can be daunting. The internet doesn’t work 9-6. UGC crap keeps rolling in 24/7.

Problem 4: Vendor lock-in. And when they wither away, that leaves you… where? Spend millions on Vignette, then the developers move on to another role… then what?

Open source is the/an answer to these problems. Freedom to run the program. Freedom to study the program. Freedom to modify the program. Freedom to redistribute the program.

Advantage 1: Control over the software.

Advantage 2: Cheaper.

Advantage 3: Innovation and passion.

This is turning into a rah-rah session for Drupal. He’s talking about next-gen goals, but the irony is that Drupal uses decade-old dev paradigms that make it miserable to develop with.

Drupal core is downloaded 300,000 times per month.

Success stories: A lot of time/effort has gone into making Drupal scale. emmys.com has two traffic spikes – the day they announce the nominees and the day they announce the winners. grammys.com has similar situation. Still need to work on the Oscars. Verizon wireless’ intranet is based on Drupal, with 60,000 employees. Sony Music – 150 sites on Drupal, maintained by small group of people. whitehouse.gov switched to Drupal a few months ago. More than 1 million visits during President’s soto address, watching streaming video. commerce.gov/open

Distributions = Drupal core plus modules

Tim Berners Lee worked on data.gov.uk, which includes data visualization stuff.

“Open source is disruptive…. same old shit vs. crazy new shit.”

CCK is the module that lets you create arbitrary content types. The Views module is what lets you slice and dice that content. In other words

Director of the Havas Media Lab Umair Haque interviews Twitter founder Evan Williams (@ev). The interview began with technical difficulties, segued into a way-too-brief introduction to the new integration platform @anywhere, got interesting for a little while, then became mired into  me-centric, smug ramblings of an interviewer who appeared more interested in showing off his own intelligence than in extracting juicy bits from the interviewee. Eventually the whole thing turned into a train wreck, with audience members walking out in droves. The back-channel was brutal to Haque, and attendees were walking out in droves. A full third of the audience left out of boredom after half an hour. Almost embarrassing to watch.

Announcing new “at” platform (though, strangely enough, the promised “ad” platform never materialized).

@anywhere – platform for integrating twitter into web sites, with almost full functionality. Reduces friction. No strict rules around it. A lot that can be done that we can’t anticipate. You can tweet from the column itself, or follow the columnist straight from their byline without going back to twitter. Discovery is one of the hardest challenge. Putting things in context is essential.

Gives authors a connection to users that they didn’t have before. Should result in having more of your Twitter-using audience discussing your sites content. You can also bring their discussion back into your site’s post. Amp up your site’s network effect.

This is not an ad platform, it’s an @ platform.

Experimentation is what leads you to creating value. As an entrepreneur, I’ve learned that whatever you assume when you start out, you’re wrong.

What is Twitter has always been an ironically difficult question to answer. It’s an info network that helps people discover what’s going on in the world that they care about. You can take advantage of it without participating. That’s valuable too. Focusing on increasing the signal-noise ratio.

As we grow, one of the pain points is having big centralized decision making points. We’re trying to give various units and departments as much autonomy as possible, trying to stay out of their way. There’s a parallel between the culture of the company and the culture of users who use the product. Open as possible on both ends.

What’s the keyword? Openness or transparency? A door is open, a window is transparent.

“Assume their are more smart people working outside the company than there are inside.”

The flipside of openness is giving the golden goose away.

Most of us think of business as a game of hoarding. But in this case creating maximum value is about creating maximum openness. So it was a tough decision whether to license our content stream to Bing, Google, and Yahoo.

So many “deep experiences” still to be had. e.g. a hardware device hooked up to a baker’s oven. “Bread is done!”

But if we were infinitely open, we’d be doing a disservice to our users. There’s a lot of bad stuff going on out there. Being open makes it easy to spam our service for example. We send cease and desist letters daily to companies building tools that claim to build your follower base the fastest (good for them).

Ecosystems need management, they need shepherding. They need to grow inclusively. Expanding market boundaries to be more inclusive.

We’ve always found it important to reach the people with the weakest signals. Hence the importance of keeping the SMS capability. Example from success in Chilean earthquake… thousands of people without internet connection able to spread word, get relief to others, spread word. Strong growth in India. Sections of Middle East now covered. This stuff is making a difference.

White House press secretary Robert Gibbs has been using Twitter in an authentic way. It’s become an official channel but they’re using it in a new way. Less artificial/stilted than the usual political communication.

Reducing friction between people is one of the most fundamental promises of the internet. It’s about democratization of information. If you can share to the world with as few barriers as possible, we’re succeeding. It’s easy to take this for granted. We haven’t yet realized the full effects of it. This will change the way institutions work for decades to come.

There is a counter-force in the world today: State control of information. The open flow of information is not a benefit to people who live under regimes that don’t let it reach them. Firewalls can become a porous, via SMS penetration, or proxy servers.

PAY ATTENTION!!!

Interviewer is horrible. People running for the exits. The badness of this interview is parallel to the Sarah Lacy debacle. Williams is OK, interviewer is awful. Quote: “The principle of betterness is about creating thick value.” Ugh.

If you live on the web, you’re used to having a relationship with companies, vendors, strangers that you don’t have in the real world. The loop gets closed.

“Everything is infinitely expandable once you zoom in on it.”

On the internet, we’ve all been participating in this joint brain storm for a decade and a half. But the big brainstorms come from people who don’t get sucked into it. People outside of Silicon Valley. It’s very hard to think differently inside SV.

“Think big… but small.”

“Using the video tag in HTML5, developers can do all sorts of things that are hard or impossible with plugins. In this presentation, Mozilla will show the best and most interesting hacks entered into OVA’s Open Video Contest-because when the webmonkeys unleash their creativity, things get interesting.”

96% of web developers say they were self-taught. The web is self-teaching.

OGG originall designed for streaming radio. Video added in later (Theora format). Mozilla found. worked with people who built the container, worked with browser makers, etc. The web influenced how video codecs and containers actually work. We want to see competition create better performance. We want to see video connect to all the other changes going on on the web. SVG, CSS and other technologies all come together.

Mozilla: Has a public meeting every week to discuss directions, changes. Wiki tracks all of this for public. They stream it live, jam streamed video right into the wiki.

Open Video Alliance: Live chat with Lawrene Lessig – streamed with HTML5 video (first streamed HTML5 video event). The ogg container is designed for streaming, even over http.

Demo: Dragged an image from desktop into a playing video and the image was incorporated as a moving image into the video in real time. Using a combination of SVG and HTML5 video.

Demo: Asked people to tweet stuff to a special hashtag. Then rendered a video of Der Fuerer ranting out the results of the tweets. Real-time compositing.

There are security issues related to full-screen video. The spec warns against it, but the WebKit guys put it in anyway (so yes you can do it).

No DRM support yet. But if DRM could be done with open standards, Mozilla would be OK with it.

To make OGGs: Use MakeOgg / FireFogg

With video in a wiki, users can insert their own outbound links at certain timecodes as the video plays.

Fallback system:

<video controls>
<source type=”video/ogg” src=”foo.ogv” ontimeupdate=callBackFunction() />
<source type=”video/mp4″ src=”foo.mp4″ />
Your browser doesn’t support HTML5 video.
You could also put Flash or other embed methods here.
</video>

By default no controls are shown. Add the empty “controls” attribute to get them. (“controls” is a boolean so “controls=false” will still give you controls. Just use “controls” or don’t. Least favorite aspect of HTML5 so far.)

Available events:
“I have enough buffer to play through”
Duration
Natural size
Current timecode

Check out the <a href=”http://people.mozilla.com/~blizzard/launch/”>STS-116 Launch Profile demo</a> – shows related charts being drawn in real time, correlated to timecode in the video. Canvas elements, overlayed div containing web fonts flipping in tenths of a second, etc. Very cool.

Tales of the development of HTML5
============================

HTML4 was deemed too difficult to extend. The proposed way to break free was to get a fresh start based on XML. That turned into XHTML. At one point it was so backwards incompatible that at one point they deprecated the IMG tag (!). So agreed to extend XHTML without breaking backwards compat. In 2003, started by Opera. Mozilla, Apple joined in. Instead of the ghastly days of the browser wars, we had three big players all working together. Google and Microsoft are now involved as well (all five browser makers).

In 2009, XHTML2 waqsw killed. 2010 WHAT-WG group goes to last call. Not yet complete, but getting there. Giant spec (900pp). Already some implementations of some parts. Only 300 pages of interest to web devs (first HTML spec was only three pages)

HTML5 does not include geolocation, CSS3, or SVG. But it is a kitchen sink – includes web storage, a web database, web sockets. But let’s concentrate on markup.

If your site is mostly text, images, and links, you prob don’t need HTML5 – HTML4 is a perfectly fine markup lang (but you’ll probably want to out of sheer joy). HTML5 takes us from chimp to pimp.

HTML5 extends language to work with web apps. HTML5 is in direct competition with MS Silverlight and Adobe Flash. But it won’t kill either. It’s an open standard. Standards are vital because browser is most important app on your computer.

The web is too important to society to ever be in the hands of a single vendor.

What people really do:
footer
content
header
logo
container
main
menu

etc. etc. So HTML5 bakes these in. So there’s a <header> element and <section> and <content> and <section> etc. These tags take role=”" attributes.

What is “aria?”

HTML5 builds in form validation (this is huge!)

<input name=foo type=number min=5 max=15 step=3>

No JS required. Browser just gives it to you.

Lowercase no longer required.

<input name=foo type=url required>
<input name=foo type=date > # You get a date picker for free!!! (Only Opera supports this so far)\

When older browsers encounter this, it defaults to type=text (so then you have a validation problem)

Canvas rocks!

A blank area on the screen that you can use javascript to fill with whatever you like. Invited by Apple for Dashboard, but adopted by other vendors.

Example of using Canvas to draw editable tables. Edit a field and graphs update in real time. Amazing.

Video in HTML5:

<video src=video.ogv />

(ogv = ogg video)

The built in video controls can be accessed via keyboard without using the mouse. If you don’t liek the controsl you can script your own.

Captioning: Mark up the transcript with timecode. Huge win for accessibility. Also great for SEO. Real-time switching between transcript/caption languages. Fantastic.

HTML5 doesn’t break the web
Is sometimes an ugly kludge
Can be serialized as XML:XHTML5
Defines HTML error-handling to keep consistent DOM across browsers.
Adds new elements and APIs for open standard apps
Is coming soon, to a browser near you.

For Javascript, non-interoperable DOMS will be a thing of the past.

============================

Tales of developing with HTML5

Using roles (stylable):
<input type=”text” role=”search”>

Web workers
Geolocation
Orientation
Multitouch
Web storage
Drag and drop
File API

Web workers add speed by adding processes in parallel. Real-time video example of video processing from web cam (swapping live background). Intelligent parsing between CPU and GPU.

Orientation: Cool demo of using the accelerometer in the Mac laptop – turn laptop and the display reorients to stay rightside up, even when on diagonal.

Touchscreen awareness – huge for gaming and future displays that will be touch aware (e.g. iPad)

Drag and drop. Create a drop zone in the middle of the browser. Drag an image off your desktop and post-process them.

Mark Pilgrim has a new book “Dive into HTML5″ (follow-on to the famed Dive Into Python)

Gina Trapani of Lifehacker and now author of Google Wave book. Also made BetterGmail and ThinkTank;
Matt Haughey – Fuelly – public social miles per gallon site, also creator of MetaFilter (now a 4-employee corporation); Adam Pash – MixTape.me (playlist/music sharing site). Also Belvedere and Texter.

What kinds of apps can you build in your spare time?

Things will atrophy. Don’t be afraid to kill things that don’t work.

What does Fuelly get for Matt? “I just made the app I wanted to exist.” Now has 25,000 users.

“Scratching your own itch” is the most common motivation.

The level/quality of tools out there with minimal effort is amazing. Frameworks and APIs make so much of this stuff easier.

Don’t start with the idea that you will be able to sell it or make a lot of money. Metafilter took six years to make money. There’s a long slog where nothing happens. You have to ride it out. If your motivation is money, you won’t be making any during the slog period. If you’re using your own app every day, you’ll be motivated to keep making it better.

The whitehouse is now going to use Gina’s ThinkTank app to solicit public opinion.

The internet is so ready to give you an answer. When you’re doing this stuff outside of work, the skills you learn make you better at work. And vice versa (my experience backs this up – tremendous overlap).

But everything takes longer than you think it will. There are no shortcuts and if your life isn’t structured to allow that investment you’re going to have problems.

The easiest thing to give up is TV. Two hours of veg time daily can be recaptured. Make a deadline for yourself out in the future. “I’m going to have this finished in a year.”

Don’t reinvent the wheel. use frameworks. Copy/paste snippets of code from various places. Be an efficient re-user. There are plugins for everything.

You can learn enough of any language in six weeks to get a good start on our idea, no matter what it is.

Big props from Matt Haughey on the PSD2HTML service – 24 hour turnaround for top-notch CSS/HTML for $100.

Trapani: I never hire anyone but I barter. My build skills for your design skills. If you’re a designer, make friends with a developer, and vice versa. Work on those synergies.

Github is a social network for programmers. “There’s nothing better than waking up to a pull request from someone who checked out your code and contributed changes back in.”

Matt’s had bad experiences with open sourcing stuff. But then again he’s hobbled by using a non-OSS lanuage (ColdFusion). When he opened it up suddenly the world wanted to turn his app into something he never envisioned. Suddenly there were fights on the mailing lists, big management headaches. Wished he had kept the source to himself. Open source is a management problem. You get free contributions but you have to deal with all the people who write crap code or who see things very differently than you envision. On the other hand there’s also no guarantee that anyone will care. You’re going to need 10,000 users before you get 50 programmers, and out of those only one or two will actually be good programmers.

What about liability and legal? Pash wrote an MP3 sharing service and really opened himself up. Cost about $800 to become an LLC, which can insulate you personally from damages accrued to your company.

How do you get users? You could spend six months and end up with 5 users. Integrate with your communications. Make badges. Use social networks. If you’re on Flickr, Vimeo, join groups, create groups.

No blogger wants to hear from a PR person. They want to hear from the developers (that’s you).

Recommended : peepcode.com. Screencasts that let you look over the shoulder of an expert.

One of the reasons why these self-built itch-scratching apps rock so hard is because there’s no design by committee – they benefit from a single unified vision. They’re consistent.

In this territory, even being able to cover hosting costs is dreaming big.

Recommending an alternative to MVC

In between the front and the back end is the MIDDLE end. In b/w presentational JS (Jquery) and your back-end stack. This is the code that makes a Web 2.0 app snappy. Hasn’t gotten a lot of focus.

Old school architecture: Usually MVC:
Client -> Web -> Web server -> Controller/App logic -> View/Templates

To control the experience, we have to have a pretty thick/complex JS layer. You might even have a JS representation of MVC.

WordPress – Good CMS but if you try to optimize performance, you have no control over the markup that goes out to the browser (not in terms of what order JS loads in, for example).

The DRY principle (Do Not Repeat Yourself) (yeah yeah, from the Django world). This is hard to maintain when you add a javascript UI layer that needs to do form validation when your back-end can already do it. If a new rule is added, you need to update validation code in two places.

So we need a new mode: CVC: Clients, Views, Controllers. More decoupled and modular.

App (black box): Doesn’t know anything about the presentation model. Only understands state mode and data, with a JSON API. It’s a headless app.
->
UI Controllers -> Web Server -> View -> Web

So you write the code once and run it in both places (still not understanding how this is possible).
It’s possible because you actually write the view layer in Javascript.
Controllers request stuff from the app (black box).
Your app is a state-management machine. Sessions, everything starts in Javascript.

Clients: Everything is a client of everthing else. Decoupled, modular, scalable

Views: Templating, portable, DRY, platform agnostic, core web technology.

Even the controllers are written in Javascript. Javascript is the only language that is truly platform agnostic and ubiquitous.

NOT suggesting another framework. This is not a system that does anything automatically for you. These are reference implementations. Not suggesting that you ditch the whole architecture (ha ha). No – just take the view portion and decouple it into JS. MVC is good, but it does have problems. From a UI/architecture standpoint, this solves a common problem.

AM suggesting: It’s OK to rethink, go back and ask questions that no one is asking. JS can feel like a fish out of water, especially when it’s on the server.

How? node.js (wrapper around the V8 engine, which is also what’s in the Chrome browser). Installs in 5 minutes in Linux. JS environments are not executable, which is why they need a wrapper. Narwhal is wrapped around rhino. You can replace your web server with 20 lines of Javascript to get the node.js wrapper executing web requests. Also: JavascriptCore, SpiderMonkey, etc.

CommonJS (aka ServerJS). “Javascript on the server is a reality – it’s happening, but how do we formalize process like files, i/o, processes, networking”. CommonJS proposes standards for how all the wrappers above will interop with a server environment. This stuff is so new, it’s like the wild wild west. People want to adhere to standards but there aren’t standards yet.

His proposal: BikechainJS: V8 plus modules

CVC + Javascript = the power of UI architecture in teh hands of front-end engines.
HandlebarJS – templating language. No math, no methods. Very minimal. Gets its name from {} convention. Text/HTML templates use JSON for data input.

Just as Javascript is the only lang that can run everywhere, JSON is the only data format that can transfer everywhere. (Huhn???)

Application “state” selects templates. “Compiles” templates into JS.

Demo? sxsw.getify.com – all written in server-side javascript

Social software hasn’t solved all the world’s problems, but the long term effects will be bigger than you think.

Key difference between the way the world was messed up in the past and the way it’s messed up now: Nonlinear complexity. It’s not necessarily better for the world in the long run if you make everything more efficient.

Everything you go into a culture you find layers of things that are the opposite of what you expected. The only way to deal with complexity is to have a decentralized system (like the internet).

Teenage Hezbollah girls fascinated by Japanese anime’ – you can’t tell them apart from teenagers anywhere.

Fixing requires nonlinear change. All the estimates assume linear changes only.

World Without Oil – WWO – An alternate reality game set in a future without energy. In playing the game, you have to figure out ways to reduce consumption. The key is that you have to play it in real life also. There’s a backyard garage vibe to it where people share their tricks and energy saving hacks in the forums. People get obsessed with saving energy.

We all have a basic survival instinct as human beings. This will drive us toward these solutions.

Positive deviance (Jerry Sternin): Find the few people who aren’t dysfunctional. Instead of trying to change all the people doing the wrong thing, amplify the people doing the right things.

We need to empower people financially. We develop dependencies through financial support, and it doesn’t help anyone. We need to promote self-sufficiency, not dependency.

Ito belongs very strongly in the internet. “That’s my religion.”

Free and open source software existed before the internet but has exploded on the internet. FOSS lowers barriers to entry, raises chances of success.

THE STACK
Creative Commons – CC … yep, he really sees this as a layer
The Web – W3C
The Internet – IETF

These layers are all very inclusive, all bottom-up.

“Small pieces loosely joined” : No need for everyone to understand everything. That’s how you get to non-linear complexity – you give up the idea of trying to control it.

The explosion of innovation on the internet came from INTEROPERABILITY. You used to have to buy Banyan Vines to tie your networks and their protocols together. TCP/IP changed all that.

Creative Commons is lowering costs, i.e. lowering costs of failure, raising chances of success… this will connect back to saving the world.

Four cc licenses:
- Attribution
- Non-commercial use only
- No derivatives (documentary producers like this)
- Share-alike (copyleft)

Everyone has a certain kind of sharing they’d like to do. We want to make it easier for you to do this.
They provide both a human-readable and a lawyer-readable version.

There’s also a ton of metadata available – machine-readable way of providing copyright / copyleft licenses embedded in media in various ways.

The White House put a Creative Commons license on their site so anyone can re-use the work.

Wikipedia switched to a CC license – derivatives must be shared back.

ONE internet is what makes the internet great. Same problem with licenses and interoperability. If you allow license proliferation, content arrives in a condition where e.g. professors can’t mix Wikipedia content with content from other sources. That’s why Ito does work to eliminate other licenses that accomplish the same thing.

All TED videos are now CC-licensed.

Nine Inch Nails released “Ghost” under wide-open CC.
Record company thought it was insane but they made $1.6 million their first week, and the MP3 became a top seller on Amazon and iTunes.

Watch Clay Shirky’s presentation “The Cost of Failure”

Now you can do with so much less, so much faster, what you couldn’t do without millions of dollars before.

At a certain point the map becomes more complex, or as complex, as reality. At a certain point it makes more sense to go build than to keep talking about it.

Ito is on the board of the Global Voices organization.
A network of bloggers. Provides voice to people in regions traditionally without.
This would not be possible without the internet. Giant leaps forward for humankind.

Another org: Witness — teaches human rights orgs how to do video. Created after Peter Gabriel saw the Rodney King video and realized it would change the future of human rights.

Architecture for Humanity – share designs for building effective structures and homes in the 3rd world, log successes and failures to improve future designs.

THE GIRL EFFECT: Empowering young girls is one of the most leveraging things you can do in elevating a culture.

Mozilla Drumbeat: Lots of middle east startups use .Net. Why? Because Microsoft and Cisco go in there and sponsor them. Great, they get a free leg up, but the result is that they become part of the closed source, commercial software ecosystem, which works against the larger goals. Drumbeat works to keep the cycle open, to promote FOSS in the Middle East and elsewhere. Drumbeat is giving micro-grants and awards to small startups. Fascinating project.

Travel as much as possible. Connect with individuals in other countries as much as possible. It’s so important.

In most countries the telcos are the biggest tax payer.
And in many countries, voice over IP is illegals. No coincidence there.

The International Land Mine Treaty would never have been signed were it not for email. It allowed NGOs to run circles around governments and large corporations.

Good question – I’ve been asking myself this lately. Unfortunately the session quickly devolved into a lot of platitudes and stating of the obvious. Yes, design has been commoditized and is no longer an “elite” activity. Yes, your site is as creative as you make it, it has nothing to do with the CMS you use. All pretty much goes without saying. Took notes for half an hour, then headed to the HTML5 discussion… which was full and not allowing more people in.

We’re not just talking about WP – we also mean Drupal, Joomla, Movable Type, all of them. But we don’t want to let facts get in the way of a good panel title.

People confessing they use WordPress… “It’s almost like an AA meeting.”

Is creativity stifled when people use tools like this? People never ask how they’re going to put it together, how they’re going slice up the design.

“I’m going to design a site” is one mindset…
“I’m going to design a WordPress site” is another.
No need to be a slave of the tool you’re working with.

“The two most dangerous things in the world are handguns and content management systems.”

If anything’s killing web design it’s lack of imagination. Need to move away from the “paper behind glass” mentality.

Hacking themes can be a great way to learn HTML/PHP/CSS – there’s an approach to it that isn’t over-reliant… just a kick-start.

If fonts get any bigger, I’m going to need a bigger monitor. Is what what we want? It’s not what I want…

It’s like a lowest common denominator path on the way from newbie to veteran — everyone has to pass through this WordPress phase. People think of it as a safe solution – it makes them look good with very little effort.

Why aren’t people switching their themes every week? No one’s going to die. Be more playful. If you want to think of design as a constraint, then it’s a constraint. If you think of it as a chasm, it’s a chasm.

[... left early ... ]

Just because people put info in public places doesn’t mean it was meant to be aggregated. Just because something is public doesn’t mean people expect it to be publicized.

What people mean by privacy is more complicated than what can be summarized in a sound bite. A conversation with a friend could be spread by that friend. *Trust* is what allows us to go forward with the conversation. We don’t always navigate privacy well.

There are always evesdroppers. Unaccountable contact. Say a conversation in a cafe. You have an understanding of the maximum number of people you can accommodate in your social net. Online environments aren’t nearly as stabilized as offline ones. It takes time to understand the involvement.

Security through obscurity is not as ridiculous as it might seem. The average blog is read by six people. You have a better sense for the size of your audience in a cafe’.

People aren’t good at navigating when the rules of a social net change, e.g. Facebook’s changing of privacy rules. Ask a user to tell you what their privacy settings are, then walk through their actual settings with them. “I have yet to meet a single person who actually knew what their actual privacy settings were.”

Differentiate b/w PII (personally identifiable info) and PEI (personally embarrassing information). People make themselves vulnerable to make connections. When the settings are changed and the PEI goes public there’s a huge fail.

Teenagers are more conscious about what they have to gain by going public, adults more concerned about what they have to lose.

It’s easy to be private in public in meatspace, much harder to do online. People are not used to having the papparazzi follow them around online. Today’s 12 year olds were not alive when the paparazzi drove Princess Di to her death.

Part of what makes Twitter fascinating: People don’t engage FB status updates the same way as Twitter at all. Twitter users seem more interested in having audiences – FB more about groups of friends. But Twitter isn’t just for celebs and their followers.

There are 2 types of trending topics: Those that start from external factors (news story) and those that are internal to the network (e.g. a hashtag meme)

Many of us have benefitted from speaking in public. With privilege it’s easy to take for granted things that others can’t. Assume you have the right to challenge authority, walk in public without being afraid of losing your job, partner, rights. I can seek publicity without fear. These things aren’t true for an immigrant whose family might get deported. How public is your kid’s teacher allowed to be online? Can she have an online dating profile? Can she express politics on Twitter? We expect the teacher to always be the teacher. To say “everyone should feel good in public” doesn’t reflect the real world.

The “public by default” society we’re creating is not necessarily optimal.

Talking to kids: The worst thing you an do is start the conversation with “Back in my day.” That day doesn’t exist for kids. Instead, “What are you trying to achieve? Who do you think you’re talking to? ”

Angelina Jolie, many bloggers say they put so much out there in order to maintain their privacy. Sounds ironic, but by giving some away, people don’t come poking around for more. It actually works.

75 million + iPhone OS units and growing

Is there a room for a third category of device in the middle? Yes, but… What set of problems is the iPad solving that has not been addressed in other product markets?

Pre-launch demand is actually higher for iPad than it was pre-iPhone.. Market is primed by iPhone/iPod Touch. 51,000 units pre-ordered in two hours, 90,000 in six hours. But that doesn’t cover people who ordered in stores.

Bill Jensen, director New Media at Village Voice. 14 million pageviews per week across 14 newspaper sites. Print is hurting. But some orgs making the transition to digital better than others. We have shown monetary digital growth of 70% for past 3 years. 90% of business is local.

Mobile: Periodicals are there, but iPad is a different beast. What people want on moile is very geo basied – restaurants, events, concerts. Last night reviews and slideshows.

Landscape for periodicals: People have a choice of 10 papers on the street. Bookstore: 100,000 books. But now you have 109 million web sites. 25.x billion pages indexed on the web. How weill we set ourselves apart?

The iPad will deliver a focus on design and reading that you don’t get with iPhone. Every journalist sees this. The challenge: How ot incporporate our daily web content and our print equity into one plaform? Free drings for the person who can solve this dilemma.

You all bring your iPhone into the bathroom. I know you all do.

A lot of people pick up periodicals for the ads. This doesn’t translate well online, but it will translate on the iPad.

Shervin Pishevar:

The projected iPhone market: 76% games = $ 30 billion. Estimate 20 million iPads on the street by 2013. Pishevar thinks it’s going to be many more.

Pishevar got to try iPad in advance. In 10 minutes training he was able to go fro 60 wpm to 85 wpm. “My laptop is history.”

Speed of the chip is unbelievably fast – makes everything else look like DOS. Blows iPhone out of the water. On an iPhone your fingers are in the way. The problem goes away. Big impact on gaming.

All of this enables new usage occasions, pushes the creative frontier, boosting engagement.

Jason Grigsby @grigs – new web opportunities.

Same old browser in iPad? What’s the big deal? BUT we have a a standard size browser – we don’t have that on the web (known design dimensions). Great javascript engine. Device characteristics less important on iPad than on iPhone. No camera, You won’t be carring it around on the street as much as you do with a phone.

Not JUST consuming media (iWork). Dashboards and intranet sites (touch data) = big opps. Books will differ with the well-defined form. Design for reading, as opposed to ebook readers of the past, which were formless. Does vertical scrolling make sense here? Paging replaces.

No Flash, get over it. Device detection more importan than ever. 3G means performance still matters. HTML5 – especially forms.

Katherine Tasheff – Hyperion Books. Books havent’ changed since 1450. The business model has worked really well. Suddenly it isn’t. Kindle changed the game even though it isn’t perfect. $1 billion in ebook revenue in the coming year. Mimics the experience of reading a book like nothing else. Book sales in general have declined 5% in the past year.

eBooks in app store already outnumber games, but not in sales dollars of course.

ePub format still really needs to be hashed out. Penguin is only going after apps on the iPad.

This is a peek into the future – we’re going to become a more paperless society.

Prediction: The new computing paradigm – tablet computing rather than desktop computing – will take 5 years, not 20.

But you can’t really have an iPad without also having a desktop computer – to sync, back up to, etc. that will hamper adoption of it as a replacemnt paradigm. But give it time.

People are adopting smart phones now at a rate of adoption faster than internet uptake was in the 90s.

Hyperion on DRM: There are many red-line contracts floating around our office right now. We are divided on many issues. This is a huge area that needs to be figured out.

You’re going to need a good designer on staff to make this work – design is going to rule the landscape.

Lots of potential for board games that simply coldn’t work on the iPhone. Imagine online multi-player Monopoly on iPads. Or the Ouija board!

Imagine real-time collaboration on the same device – we just can’t do this with web 2.0 apps. Everyone hands-on!

Devs converting iPhone apps to iPad apps are going to make a common mistake – simply scaling up their old apps. You need to rethink layout and design, stretch your creative selves and push the boundaries. Scaling up isn’t nearly enough.

Village Voice: Right now it takes 1 hour to prep our print content for web. But we think we’ll have to add a midnight shift to be able to handle multimedia prep work for iPad edition.

The user account thing will be a problem for shared devices in families – right now it’s single user. Will you want to store your email in it and hand the device to your kids to play games?

“I always feel sorry for people on the plane watching movies on the iPhone. It’s kind of cute, but mostly pathetic. You’re going to see a lot of people watching movies on IPads on the plane.”

On panel: Bert Bos, member of w3c, co-father of CSS; Jeff Veen: founder and CEO of TypeKit; Stephen Coles (Typographica); David Berlow (Linotype and Bitstream); Roger Black (typographer 15 years).

We’ve had 15 “lean years” (Verdana, Helvetica, etc.). We “made do” with a few fonts, images, interactivity, but no typography. Everything starts to look alike. There’s no branding.

Led by webkit consortium, all the top browsers have a adopted W3C’s standard @font-face.

And target matters. You have to send the right font to each combination of browser and operating system. We have very little control over rasterization, so we need to use fonts that work under a wide variety of browser/OS rasterization methods.

October 1994: The author-reader balance. Previously, styling was all in the hands of the reader; the author had no control. Now most users aren’t even aware that they control the appearance – the options are submerged.

@font-face {} didn’t come along until CSS level 2 (1998). The question was still “How to let the author’s fonts appear on the reader’s screeen?”

EOT was opened up by Microsoft, adoption started to creep upwards. A very good standard, really. Thanks to MS for this. By end of 2008 EOT was looking really good.

But EOT was not loved by Webkit, Opera, etc. Web Open Font Format (like compressed OpenType wbut with a new header). So it looks like WOFF is the way forward.

Veen: 600 years of typography were chucked when we started on the web. After 15 yrs we got to a whopping 18 fonts.

MS tagging behind on font support… they’ll embrace open standards in a proprietary way.

Many font foundries outright forbid the linking of their fonts. TypeKit is a centralized service so that typographers can have a bit of control.

NYT, WSJ, Harvard Business Review, Mena Trott’s “Sew Weekly” doing wonderful stuff with TypeKit.

Fonts were never conceived as something that would be shot around the network at very high speeds. At places like Google, bandwidth matters so much – you can put dollars on performance.

Internationalization? Almost no fonts include every char in the unicode spec, and if they do they’re many megabytes. No way to load this reasonably in anything like real time.

Gruber: The fonts you’re allowed to embed aren’t worth using and vice versa. But that’s changing. Fonts designed specifically for the screen are becoming viable. FontShot specializes in this.

Some of these custom fonts look outstanding in form fields.