Jeremy Keith: The Beauty in Standards and Accessibility (Web2.0Expo, Berlin) [en]

Here are my notes of Jeremy Keith‘s session. He’s somebody I always appreciate listening to, and he also happens to be the creator (and provider) of Buzzword Bingo. Play with your neighbour when keynotes or sessions go down the buzzword path.

My notes are as correct as I can make them, but they may be missing bits and pieces and I might even have misunderstood stuff.

Web 2.0 Expo 6 - Jeremy Keith

First define. Who knows about beauty? The poets.

John Keats: Ode on a Grecian Urn. “Beauty is truth, truth beauty, that is all ye know on earth, and all ye need to know.”

William Blake: Auguries of Innocence. “To see a world in a grain of sand, and heaven in a wildflower, hold infinity in the palm of your hand, and eternity in an hour.”

Looking deep beneath the surface. Close-up sketch of a flea. Micrographia. Beautiful. Viewing source. This is how we see the beauty of things.

This whole web2.0 stuff is not about details. We’re not using microscopes, but telescopes, looking at the “big picture”. Telescopes can be good: think “Galileo”.

He brought upon the world an a priori change. A new way of looking at the world, though the world had not changed. The earth revolves around the sun, and not the opposite.

Darwin: the world didn’t change from one day to the next when The Origin of Species was published, but our view of the world did.

We want to think about structure. How is the house built? It’s when you understand the structure that you can build solid houses. Same with web pages. This is where web standards come in.

Separation. Before: all mixed up (html, css, js). Now: separate. (cf. http://nataliejost.com) Progressive enhancement. An a priori change to how you design websites.

a) begin with your content
b) structure it (HTML)
c) think about how it’s going to look (CSS)
d) think about the behaviour (DOM Scripting)

Web 2.0 Expo 5

If you remove any of these layers, it will still work. It won’t look pretty, it won’t behave as well, but it will still “work”.

CSS

  # in a separate document!
 p { }
 #foo { }

Then, add rules using selectors. From general to specific.

DOM

Very similar approach. Make it external. You don’t put it in the document. The vocabulary is different, but you also reference elements in the page pretty easily

 document.getElementsByTagName("p")
 documnet.getElementById("foo")

School of thought called “unobtrusive scripting”, “unobtrusive javascript”

Beware

First structure, then presentation. If you catch yourself doing this…

 <a href="..."> # wrong!

If you put behaviour in here, you’ve wasted a hyperlink.

Slightly better… but still bad

 <a href="#"> # JS equivalent of using the style attribute

steph-note: I’m learning stuff about JS! yay!

Bandwidth benefits in doing things the right way. Process benefits, you can separate the work. And also… the beauty of it. Flexibility. See how it reacts in situations you haven’t accounted for? It won’t fall apart if somebody accesses with no CSS, no JS, no images…

So, is this about making site accessible? Kind of. Note: go to the talk on accessibility Thursday morning.

Jeremy is talking more about universality. You’re not shutting out devices. Mobile. Search bots. Screen readers.

W.B. Yeats (April 1916) “All is changed, changed utterly: A terrible beauty is born.”

Ajax

Wonderful, beautiful, but can be terrible depending on how it’s used. steph-note: reminds me of what we said of JS in 99-00

The key to Ajax is about asynchronous communication with the server. XmlHttpRequest.

Jeremy’s definition: “A way of communicating with the server without refreshing the whole page.” Just part of the page.

Buzzword Hijax.

Here is how Jeremy thinks we should build an ajax application.

a) build a website in the old-fashioned way — buttons, links, for interaction with the server
b) then, come along with ajax — which parts of this page benefit from just being refreshed separately, and intercept the links/events. Hijack the requests. Bypass the whole page interaction.

Progressive enhancement rather than a terrible beauty that locks people out. Switch off JS, and everything still works.

Where? When?

Patterns: when I click a link/form, and when I submit it, I return to the same page with almost nothing changed.

  • registration forms (specially for user name availability)
  • comments on a blog/forum
  • add to cart
  • steph-note: sign in links

“Web 2.0” is not about web applications versus documents in the old “Web 2.0”. It’s a sliding scale. Most sites are somewhere in between documents and application. Applications work with documents! It’s not an either… or thing.

This kind of Ajax is more on the document side of the scale, roughly mid-way to the application end. Doesn’t scale to “more application”.

But at that point, why the hell are you building that with HTML, CSS and JS? The reason to use them is that they degrade gracefully. If you decide that all three are required, maybe you need to use another technology, like Flash. These technologies have their place for applications which cannot degrade gracefully. Flash is made for building web applications! But there is an insistance in building “2.0 Apps” in HTML/CSS/JS.

Maybe hesitancy because Flash isn’t a standard in the same way as HTML/CSS/JS?

Standards: you know your stuff will work, you know there’ll be support there. The best thing that Adobe could ever do in Jeremy’s opinion is to open it up truly (steph-note: if I understood that correctly).

History of standards.

ISO, ECMA, W3C…

Open data. API. RSS. XHTML.

If you’re going to release and API, look at what Google and Yahoo are doing and copy. Build upon existing conventions. Your own format is not going to make it.

If you allow people to access your data like that, you start to see emerging patterns.

Microformats! steph-note: yay!

Machine tags! steph-note: yay again! There is a machine tags wiki.

Jeremy, like many of us, really hates the “Web 2.0” label/buzzword. It had its place a few years ago, but now it’s really putting us in a box. Ajax is a good buzzword, because it allows to talk about a certain technology in a snappy way. Whereas Web2.0… ask ten people, and you’ll get 10 explanations.

Web2.0: people.

But we don’t need a buzzword for that. We already have a word for “leveraging collective intelligence”: the WEB!

Combine looking through the microscope and looking through the telescope.

Je teste les blogs de Romandie.com [fr]

[en] Testing a Swiss blogging platform.

J’ai finalement ouvert un blog chez Romandie.com afin de jouer un peu avec la plate-forme, et de donner du feedback (pour autant qu’il soit entendu!) pour son amélioration. Il y a du bon, voire du très bon, et du moins bon, voire du franchement pas bon.

Vous trouverez mes réflexions, conseils et aventures sur le blog lui-même.

Revue de presse pas si expresse [fr]

[en] Updated my press page. Complaint about the sorry state of some journal online archives and sites. La Liberté seems to get it right, though. All this smattered with early Sunday afternoon ramblings.

Tout d’abord, un grand bonjour aux lectrices et lecteurs de Femina qui passeraient par ici pour la première fois. Je vais être d’une originalité déconcertante en disant que j’espère que mon blog vous plaira. Si le technologie vous rebute et que vous préférez les photos, j’ai aussi un certain nombre d’albums en ligne.

N’hésitez pas à laisser un commentaire pour me dire bonjour — je vous promets, même si c’est la première fois ça ne fait pas mal.

Passons aux choses plus graves. J’ai mis à jour la page presse du mieux que j’ai pu. Je commence à me retrouver citée dans les journaux sans le savoir. C’est d’ailleurs la deuxième fois que Raph me l’apprend — “(12:39) ah ben c’est ça, la popularité, machin”. Et dans le même ordre d’idées, Stéphane Le Solliec m’informait que mon nom figure dans le dernier Joël de Rosnay… Bref.

Si vous avez lu dans La Liberté que j’ai dit que la Suisse avait un net retard dans l’utilisation des blogs en politique… disons que je n’ai pas été aussi catégorique. J’ai plutôt dit quelque chose comme “euh… oui… ben je disais il y a quelque temps qu’on était un peu à la traîne, mais là il me semble depuis quelques semaines qu’il y a vraiment des choses qui sont en train de démarrer, enfin ça bouge, donc on a un peu de retard, c’est clair, mais il me semble que c’est en train de changer…” Bref, moins catégorique. Et comme j’ai précisé à la journaliste, je ne suis vraiment pas une grande spécialiste du blog politique. Parce que moi et la politique… ça fait plus qu’un.

On notera en passant que sur le site de La Liberté, on peut faire des fouilles assez efficaces dans les archives web (une fois qu’on a trouvé le minuscule lien dans la colonne de gauche). En utilisant la recherche par date, je trouve sans problème toute la liste des articles “Régions” du 17.02.2006, par exemple. En mettant mon nom dans les mots-clés, on trouve deux articles — mais pas celui-ci, bizarrement? Donc, bravo La Liberté, c’est bien mieux que d’autres que nous ne nommerons pas ici!

On notera également en passant (je vois bien que je suis incapable de publier quoi que ce soit “d’express”) que la romandie compte maintenant enfin une star blogueuse: Marie-Thérèse. J’ai voulu ouvrir un blog chez Romandie.com, pour voir, mais alors là … Un gros cactus, allez — vous avez vraiment envie de donner votre adresse postale quand vous ouvrez un blog, vous? Allez plutôt chez WordPress.com. Même si pour le moment c’est en anglais, il y a plein de blogs en français là -bas, c’est joli, il n’y a pas de pub, on vous demande juste une adresse e-mail pour vous inscrire, et c’est une super plate-forme. Laissez l’adresse en commentaire si jamais vous décidez de vous lancer à l’instant, et j’irai jeter un oeil!

Je termine ce billet avec un autre gros cactus, pour Femina. Eh oui. (Rien à voir avec l’article, qui est très gentil et flatteur.) En allant chercher la version en ligne de l’article en question pour ma collection, j’ai vu que le site de Femina avait été refait. Peut-être il y a longtemps, je n’y vais pas souvent. Bon. Alors. D’abord, intro Flash avec son, non. On ne me donne même pas le choix d’y échapper. Et si j’étais en train d’écouter la radio pendant que je surfe, déjà ? Ou ma chanson préférée? Me flanquer du son dans les haut-parleurs de mon iBook sans me demander, c’est vraiment malpoli.

Ensuite, recherche d’articles. D’abord, c’est tout en je-sais-pas-quoi-j’veux-pas-l’savoir, et puis il faut s’inscrire avant de pouvoir voir quoi que ce soit. Au revoir, moi j’essaie même pas. C’est quoi le problème avec un bon vieux répertoire d’archives en HTML (valide, si possible)? Je crois vraiment qu’il faut arrêter d’essayer à tout prix de rendre l’accès à l’information difficile…

Bonne fin de dimanche!

Radio sans moi et deux blogs à  visiter [fr]

[en] A radio show on blogs without me (I was busy teaching) and two Swiss politically oriented blogs worth visiting.

Très rapidement (mais alors très, parce que là , j’ai assez de boulot pour me garder occupée ces deux prochaines semaines même si je n’enseignais pas), notons une émission sur la RSR1 ce matin, qui portait sur les blogs.

On saluera deux faits:

  • le sujet tournait plutôt autour du blog politique/blog d’entreprise, plutôt que l’éternel blog d’ado
  • comme j’enseigne entre 9h00 et 9h30 le lundi matin, l’émission s’est faite sans moi 😉

On saluera aussi la personne responsable du site internet de la RSR1, à  qui l’on rappellera en passant que l’attribut id doit être unique sur une page. <DIV id=smallbold align=left> (sic) à  perte de vue sur la page, ça ne le fait vraiment pas. Ah oui, et j’ai remarqué (deux-trois autres personnes aussi) que le serveur ramait passablement. Une petite cure d’amaigrissement à  coups de standards web serait peut-être à  conseiller.

Une mention cependant pour la possibilité de télécharger la chronique en MP3.

J’en profite pour vous envoyer vous balader sur deux sites romands “politisés” (prenez-en de la graine, vous autres, on en veut plus comme ça):

Mise à  jour 04.02.2006: merci à  Flippy, qui me dit les avoir eu via Fredoche, pour ces liens. Faites circuler!