Working together for standards The Web Standards Project

Letter to Skolverket

Web Development 2006

Letter from WaSP-EduTF to Skolverket

Abstract

The education in the subjects “Interactive Media”, “Internet Programming” and “Information technology” must give the students the ability to develop for the web of today and tomorrow. There is a risk that the education will continue to teach, as it is to a large extent doing today, outdated and technically inferior methods.

The progress on the web has not been halted and right now it is seeing two major developments:

  1. The presentational layer is changing into being based upon standards, semantics and separation of content, design and behaviour. This provides a possibility for accessibility, so that no user is excluded, regardless of his or hers operating system, browser or type of hardware, or if the user has any kind of functional disability. When this step has been taken it is possible to move on and create rich user interfaces.
  2. The dynamic of the sites is changing. From being like isolated islands, with bridges between them, to having data-exchange directly between the servers and a new dimension for the social interaction for the users.

The gymnasium (similar to senior high school) will not be able to make its students full-fledged web developers, with a complete grasp of standards and the principles of accessibility and are able to program the servers to work with the new forms of data interchange. But it is of utmost importance that the education provides a foundation, from which the students do not need to untrain and re-educate themselves, because they have been taught the wrong methods. The school should be an on-ramp to the highway of the future, not a dead-end street into the past.

We do not say that standards and accessibility is the only thing one needs to know, when building a modern site, but we do say that there are no other valid options for building Web sites, when we talk about these aspects. It must never be a question about design or standards, about cool effects or accessibility. Using the methodology we suggest these will not become each others opposites.

This document describes the opinion of The Web Standards Project Educational Task Force1 and a group of Swedish web developers who want to see a fair and accessible web.

Introduction

The time has come to explain and implement the visions of the curricula, but before we can go into detailed descriptions of what the school should teach, we need knowledge about current developments and the future. This document will try to provide a survey on some of the most important trends concerning web development today.

We do not mean that the “gymnasium” (senior high school) should teach all technologies that will be mentioned in this letter. Some of them are too advanced for this level of education. We do however mean that the foundations must be taught in such a way as to really be a proper foundation for the next levels.

A number of people will be mentioned with their names in this document. They are named as being knowledgeable and exemplary. Good web development is done in the spirit that these people represent. This does not imply that every named person is infallible or even “best” within his or hers field. They have been named because they are relatively well-known and in some ways have become the human face for some ideas.

“Web 2.0”

One would maybe believe that a new technology has come into use after all the buzz about “the Web 2.0”2 during 2005. The truth is that no drastic technology shifts has taken place when one is looking at the content and specifications of the technology. We are still using HTML 4, which was defined 1997-19993, or XHTML 1.0, defined in 20004. We add CSS 2.15, which is a subset of CSS 2.06, i.e. a simplification, and CSS 2.0 was defined already in 1998. The third foundational component in a Web page is JavaScript. The last part of JavaScript, that recently has attracted attention (XMLHttpRequest) was developed by Microsoft in 19987 and the DOM 1.0 specification8 also was defined in 1998.9

Nevertheless the web of 2006 is radically different from the web of 2000. A new way of using these techniques has seen its breakthrough and the difference is enormous. One who has not followed the development is being at left behind. It is of utmost importance that the education reflects this paradigm shift and do not teach obsolete methods.

The changes are not only technical, but also concern how the Web as a whole works and how we as users interact with it.

Web 1.0 — The Web as a Closed Park

Linking in the presentational layer only. Few, perhaps only one, entrance.

The gardener — the webmaster. Three major roles: Technical, design, content → Specialisation. DMOZ10 is an example of a small group of volunteers providing content, but the normal user just looks (to be compared with del.icio.us). Even communities operate within “a fence”.

Web 1.5 — Content Management Systems

The content providers needed tools for large sites → database driven websites.11 Since the late 90s, the static site is more or less dead. There is a CMS behind all major websites. Companies pay for a CMS.

Even newbies need to know that it won’t be long until the static page will be incorporated into a CMS. Designers develop templates, not pages. The pure designer do not touch any code at all, but draws on paper or in photoshop and lets somebody else implement the design.12

The closed garden metaphor still stands. Isolated communities on the web.

The CMSs cause a major problem, because they often produce non-standard, invalid and non-semantic markup. Such CMSs must not be put forward as what the students should try to emulate.

Web 2.0 — The Web as a Jungle

Any page is an entry page. There is not a single gate to the garden. But the big revolution is the links in the sites business-logic-layer. The roots and branches mix freely with those from other plants.

Information Exchange “below the surface”

Where one liana begins in the jungle is often unimportant. They grow between several trees. Today’s websites can show information that is stored somewhere else. Syndication, aggregation, web services, blog pings, etc. cause the sites to be linked together in new ways. The sites not only link to, but share information with, each other.

The Users are the Gardeners

The users are becoming the primal source of information. Amazon.com leads by letting users provide reviews, tips, wish lists and patterns of usage (“Customers who bought this book also bought…”).

There is a greater dynamic to having a blog, than being a member of a community. The word “blogosphere”13 might not always convey the right connotations but it is an attempt to give a name to this new dynamic. The web as community.

Wikipedia is another example.

New rules — the “long tail”14. More power to the users. New economic patterns.

Mash-ups

All plants in the jungle do not have roots in the ground. One plant can grow on another. A “mash-up”15 is one site using open APIs from another one, with its consent, to deliver a service on top of it. This is encouraged by sites like Google, Amazon, Yahoo, etc.

Standards: No More the LAW of the Jungle

The new kind of information exchange, mashups, etc. are a result of the fact that in another sense the web has become less of a jungle. The interchange requires carefully defined standards. Even the big companies must carefully follow existing standards and most attempts to use proprietary techniques get punished by the real persons of power — the collective of web developers.

In the year 2003, Jeffrey Zeldman published the book “Designing with Web Standards”16 and the same year Dave Shea launched the site CSS Zen Garden17 and since then competent web developers have been aware that modern websites are developed according to a clear philosophy, that besides standards also include separation of design, contents and behaviour, and semantic coding.

The inventor of the web, Timothy Berners-Lee, of course is the most important person of all in this development. The way he envisioned the web originally means that what we are seeing now is the return to what it was meant to be, before it to a large extent was destroyed by people were stuck in a desktop publishing mindset.

Standards, not browser specific development

In the late 90-ties there was a so called “browser war”. Netscape and Microsoft fought about the developers by creating proprietary technologies and hoped that homepages would be made not to work in the competing browser. “Best viewed with” and similar instructions were ubiquitous. Microsoft won the browser war, in part by providing better support than Netscape for the standards defined by World Wide Web Consortium (W3C) for HTML, XHTML, CSS and DOM.

When Netscape launched the Mozilla Project and the developers came into power instead of the marketing people, there was a decision early on to stop supporting Netscape proprietary technologies and instead meticulously follow the web standards.

The result is that all modern browsers (gen 6+) at least decently follow standards. There has been little development on Internet Explorer since 2001, but right now work is going on and improved support for standards is a key issue. Internet Explorer version 6 is already good enough to enable us to use standards based development.

The time when one developed for a certain browser, or with pain developed for a few browsers, is gone. Some Swedish web companies still have not understood this and are at risk of being left behind as soon as more buyers realise that they can get better websites for less money with this new way of doing websites.

Separation of Content, Design and Behaviour

Standard based development often go hand in hand with the awareness that the homepages of yesterday were done with messy code. Often called “tag-soup”. HTML or XHTML shall not be used at all to control the visual design of a page. Tags or attributes that only serves a visual purpose, so called “physical markup” (a term commonly used in Sweden) should no be used at all. This includes font, center, bgcolor, align, etc.

Separation between contents, described by (X)HTML and design, controlled by CSS, is the first step. One also gains the following advantages:

  • Faster development.
  • Extremely faster redesigns.
  • More possibilities for layout.
  • Easy adaptation to alternative media platforms (TV, mobile phones, print, Braille, speech synthesis, etc.)
  • Better ranking on search engines, especially when combined with semantic coding (see below).
  • Reduced amount of data needing to be sent per page as external CSS and JavaScript files are cached by the visitors browser.

On a page there may also be stuff like drop down menus, controls of values in a form, etc. These we call behaviour. JavaScript, by which we actually mean a combination of ECMAScript and DOM18, is what one should use primarily to control such behaviour19. This has been an area of abuse as well. JavaScript has been used to deliver content and control design, with no fallback, especially by using JavaScript to adapt ones page to different browsers. Messy code have become even more of a mess! JavaScript is perhaps the most abused and misunderstood technology of all on the web.

The year 2005 meant a drastic change, though. Books such as “DHTML Utopia”20 and “DOM Scripting”21 signify a paradigm shift and that a large number of developers have started using this technology in a good way.

Semantic Code

During the tag-soup era, there also was frequent abuse of HTML-tags. The tag p, which should enclose a paragraph, was used to make space after it. The tag blockquote, which should enclose a lengthy quotation, was used for indentation. And the most abused technology of all, tables, were used for layout purposes, not tabular data. Almost all books or web pages in Swedish teaching web design have taught these abusive methods.

The site Webdesignskolan (“Web Design School”) claims to be visited by thousands of students from the gymnasium each year. They have realised that what they teach is outdated and have put up a small warning in front of their own material!22

By using only tags that have a semantic meaning, and use the in the correct way, many advantages are gained. The code will become more understandable, and therefore easier to develop and change. The pages will be interpretable by more. Their accessibility23 is drastically increased. Semantically coded pages can be understood by people listening through speech synthesis or reading on Braille terminals. It is easier to adapt to those who have other forms of disabilities as well. Google’s searchbot, as well as most other search engine robots, is a “blind“ user, meaning that a semantically coded page will be indexed correctly and probably ranked higher if its code is semantic.

The semantics create further possibilities. Far-sighted developers have started to use microformats24. Building upon the breakthrough for standards and semantic code. E.g. there are patterns to use for calendar data (hCalendar)25 and personal contact information (hCard)26. Another coming area is “web patterns”, making it possible to reuse the best solutions in creating the structure of web pages.27

The developer who continues to use non-semantic mark-up will be left behind!

AJAX and Rich User Interfaces

In February 2005 Jesse James Garret coined the term AJAX28, trying to explain the new implementation of JavaScript on sites such as Google Suggest29, Google Maps30, Flickr31 and Basecamphq32. The term has gained popularity to such an extent that some people think it’s a synonym to “web 2.0”. That is not the case, but AJAX is an important part of the new era.

AJAX actually is a marketing term (like DHTML), and not a technology. AJAX is the development of a new kind of user interface using existing technologies. The web is being transformed into a Run Time Environment33. The enthusiasm is in part dangerous. The DHTML-era of the 90-ties was a step away from the vision of the web. Solutions for only some browsers that are inaccessible for users with impaired sight, hearing, movement or cognition, are at risk to reappear in the form of AJAX-applications developed per people whose minds have not been “purged” from the sins of the DHTML-era.

One group of developers are standing on the barricades, trying to promote a responsible attitude to this new method34. It is important that their philosophy win, so that we do not relapse into the quagmire of proprietary solutions and inaccessibility we at last have begun to emerge from.

However, there are some applications for the web environment, which have such richness to their interfaces that they replace existing desktop applications35. Programming in the 80-ties meant coding to the hardware, during the 90-ties it shifted to coding to the APIs of the Operating System. In the near future we may see that the desktop “programs” of today are replaced by, or at least complemented with websites that no longer can be described as “pages”, but are full fledged applications.

24 Hour Web

The Swedish governmen coined the phrase “the 24 hour web”. “The guide for the 24-hour web”36 contains the guiding principles for all public websites in Sweden, and they are slowly having an effect. A very good (Swedish language) blog following this development is “The 24-hour blog”37.

These guiding principles are in agreement with what has been put forward in this document. As a consequence of their adaptation, developers who do not adhere to them will not get any contracts (as it should be!). In December 2005 the government of Sweden also announced that legislation is on its way that will demand at least a minimum of accessibility on public websites in Sweden.

This must lead to consequences, also for the education in web related technologies in the Gymnasium.

List of Consequences

What is the best way to do things, i.e. “best practice”? What should be avoided?

Use standards!

“Champions of the cause”: Jeffrey Zeldman, Dan Cederholm and The Web Standards Project.38

Best available material in Swedish: Development with Web Standards39 by Roger Johansson.

Separate Content, Design and Behaviour

“Pioneer”: Jeffrey Zeldman40.

Useful image: “The three legged stool.”41

Use CSS for design!

“Pioneer”: Eric Meyer.42

Relevant standards: CSS 2.143 and CSS 3.44

Best material in Swedish: “Teach Yourself CSS” by Russ Weakley.45

Produce Semantic Code

“Pioneer”: Tantek Çelik.46

Relevant Standards: HTML 4.01, XHTML 1.0, XHTML 1.1, XHTML 2.0 (being developed)47 and HTML 5 (cooperation between Mozilla, Opera, etc.)48

There is no good material in Swedish!49

Make Accessible Web Sites

“Pioneer”: Joe Clark.50

Relevant standards: WAI and WCAG.51 WCAG 2.0 should be considered for Gy -07.

Best material in Swedish: “Tillgängliga webbplatser i praktiken” (Accessible Websites in real life)52.

Create Usable Pages

(Controversial) “Pioneer”: Jacob Nielsen.53

Best material in Swedish: “Användbarhetsboken” (The Usability Book) by Tommy Sundström.54

Use JavaScript with Care

“Pioneers”: Jeremy Keith, Simon Willison, Peter-Paul Koch (PPK), Scott Andrew LePera, James Edwards (“Brothercake”)

Keywords:

  • W3C DOM
  • ECMAScript
  • “Unobtrusive” (Separation of behaviour from Content and design)
  • “Graceful degradation” (Fault tolerance, accessibility)
  • “Progressive Enhancement”
  • “Object detection” (not “browser detection”)

There is no good material in Swedish. The following books in English are normative:

  • JavaScript: The Definitive Guide by David Flanagan.
  • DOM Scripting by Jeremy Keith.
  • The JavaScript Anthology by James Edwards and Cameron Adams.

Signers

The Web Standards Project Educational Task Force, through Lars Gunther. (Lars Gunther is a teacher at Nils Ericsonsgymnasiet in Trollhättan, Sweden and have a little company, called Keryx, on the side.)

The Web Standards Project was started by Jeffrey Zeldman et al. and is being lead by Molly Holzschlag, author of many books about HTML and CSS.

WaSP-EduTF is being lead by April Siegfried who is teaching standards based web development at DePaul University, Chicago.

Tommy Olsson is blogging about web standards and accessibility on the presently dormant autisticcuckoo.net and is active as a (X)HTML-“guru” at SitePoint Forums.

Roger Johansson has the internationally renowned blog 456bereastreet.com, about web development with an emphasis on standards, accessibility and usability.

Robert Nyman works has been working as a web developer for many years and writes regularly about this subject at robertnyman.com. He also arranges meetings between web developers to facilitate sharing of knowledge and increased understanding.

Peter Krantz blogs at standards-schmandards.com and is one of the developers of the speech synthesis emulator Fangs.

Martin Janner has been working with standards based development at among others Eniro and has a blog at http://stilmall.se

Björn Hagström is one of the leading forces behind 24timmarsbloggen.se and is responsible for the websites at the town of Örebro.

References

  1. http://www.webstandards.org/action/edutf/
  2. The expression was coined by Tim O’Reilly and he explains it at http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  3. http://www.w3.org/TR/html4/
  4. http://www.w3.org/TR/html/
  5. http://www.w3.org/TR/CSS21/
  6. http://www.w3.org/TR/REC-CSS2/
  7. The method is about to become an official W3C-standard: http://www.w3.org/TR/XMLHttpRequest/
  8. http://www.w3.org/TR/REC-DOM-Level-1/
  9. This does not mean that there is no development taking place. XHTML 2.0, HTML 5 and CSS 3 are all on their way (knock on wood). E4X is already supported by Gecko (Mozilla Firefox) and SVG is being implemented on several platforms. A major update of ECMAScript (4.0) is also being prepared, including support for classes, libraries and namespaces.
  10. http://dmoz.org/
  11. Storing the content in XML-files may be another option.
  12. This of course is an extreme and not a desirable situation.
  13. “Blogosphere (alternate: BlogSphere or BloggingSphere) is the collective term encompassing all weblogs or blogs as a community or social network.” http://en.wikipedia.org/wiki/Blogosphere
  14. http://en.wikipedia.org/wiki/Long_tail
  15. http://en.wikipedia.org/wiki/Mashup_%28web_application_hybrid%29 and http://www.programmableweb.com/matrix
  16. http://www.zeldman.com/dwws/
  17. http://www.csszengarden.com/
  18. http://www.ecma-international.org/publications/standards/Ecma-262.htm and http://www.w3.org/DOM/
  19. Technically it is possible to use CSS for some effects too, but they are rarely usable and they represent a step away from the principle of separation. A well done example of drop down menus is available at http://www.udm4.com/
  20. http://www.sitepoint.com/books/dhtml1/
  21. http://domscripting.com/book/
  22. “N.B! There are several versions of HTML and now also XML and most importantly CSS that should be used instead of the markup shown in this guide.” http://www.webdesignskolan.com/html/grunder/html.htm
  23. http://www.w3.org/WAI/ and http://www.gawds.org/gurutips/ and http://joeclark.org/book/
  24. http://microformats.org/
  25. http://microformats.org/wiki/hcalendar
  26. http://microformats.org/wiki/hcard
  27. http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html
  28. http://www.adaptivepath.com/publications/essays/archives/000385.php
  29. http://www.google.com/webhp?complete=1&hl=en
  30. http://maps.google.com/
  31. http://flickr.com/
  32. http://basecamphq.com/
  33. http://keryx.se/artikel-25#ank7
  34. E.g. http://domscripting.webstandards.org/
  35. http://www.sitepoint.com/blogs/2006/02/15/two-kinds-of-ajax-html-vs-client-soa/
  36. http://purl.org/net/vl24h
  37. http://24timmarsbloggen.se/
  38. http://www.webstandards.org/ with the Task Force http://www.webstandards.org/action/edutf/ for education.
  39. http://www.456bereastreet.com/dwws/sv/
  40. http://happycog.com/mov/
  41. http://realworldstyle.com/stool.html
  42. http://meyerweb.com/
  43. CSS 2.1 är den delmängd av CSS 2.0 som stöds av de flesta webbläsare och har på ett par punkter anpassat sig till de-facto standarder.
  44. http://www.w3.org/Style/CSS/
  45. http://butik.pagina.se/fb_produkt.asp?art=63608847
  46. http://tantek.com/
  47. http://www.w3.org/MarkUp/ (Startsida för alla W3C (X)HTML-varianter.)
  48. http://whatwg.org/specs/web-apps/current-work/
  49. Books such as “Kom igång med HTML” (Get Started with HTML) must be considered harmful to use. It contains factual errors and suggests bad methods.
  50. http://www.joeclark.org/
  51. http://www.w3.org/WAI/
  52. http://www.jure.se/ns/default.asp?url=visatitel.asp?tuid=6724
  53. http://www.useit.com/
  54. http://www.anvandbart.se/ab Boken går också in på tillgänglighet, vilket på sätt och vis kan sägas vara en delmängd av begreppet användbarhet.

The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

All of the entries posted in WaSP Buzz express the opinions of their individual authors. They do not necessarily reflect the plans or positions of the Web Standards Project as a group.

This site is valid XHTML 1.0 Strict, CSS | Get Buzz via RSS or Atom | Colophon | Legal