HTML 5 Preview

Because HTML is at the very core of the World Wide Web, you would expect it to be a mature and refined technology. You would also expect it to provide a flexible platform for Web application development and deployment. As most web developers know, the reality is a bit different. HTML started out as a rather simple SGML application for creating hyperlinked documents. It originally provided a basic set of elements for data viewing, data input, and formatting, whereas it did a little bit of all, yet nothing quite right. While this was practical for whipping up quick-and-dirty websites, it proved to be inadequate for more demanding presentation tasks and fine-tuned user interaction. Thus a whole bunch of supplemental technologies came into being, including CSS, JavaScript, Flash and finally AJAX. You know the story. All of this was quite a messy affair and unfortunately it still is.

While the HTML 4.01 specification has ruled the Web since 1999, the fifth incarnation of HTML was released by the W3C as a working draft earlier this year and is constantly updated since then. The HTML 5 specification is supposed to pave the way for future Web standards. It contains an older draft of W3C dubbed “Web Forms 2.0”, which is W3C’s answer to Web 2.0 and the World Wide Web becoming a platform for distributed applications. Don’t expect anything too radical, though. It neither delivers the hailed “rich GUI” for the Internet, nor will it replace current technologies like AJAX. It is rather designed as a natural extension of the former. It provides good backward compatibility while smoothing some of the rough edges of HTML. No more no less. Let’s have a look at the new features in more detail.

HTML 5 mends the split between the preceding HTML 4 and XHTML 1.0 specifications. Rather than being defined in terms of syntactical rules, it makes the DOM tree its conceptual basis. Thus HTML 5 can be expressed in two similar syntaxes, the “traditional” one and the XML syntax, which both result in the same DOM tree. It goes far beyond the scope of previous specifications, for example by spelling out how markup errors are handled, rather than leaving it to browser vendors, and by specifying APIs for new and old elements. These APIs describe how scripting languages interact with HTML. So, what’s new? The following elements have been dropped from the specification:

  • <acronym>
  • <applet>
  • <basefont>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <isindex>
  • <noframes>
  • <s>
  • <small>
  • <strike>
  • <tt>
  • <u>
  • <xmp>

The following attributes are also goners:

    abbr, accesskey, align, alink, axis, background, bgcolor, border, cellpadding and cellspacing, char, charoff, charset, classid, clear, compact, codebase, codetype, coords, declare, frame, frameborder, headers, height, hspace, language, link, marginheight and marginwidth, name, nohref, noshade, nowrap, profile, rules, rev, scope, scrolling, shape, scheme, size, standby, summary, target, text, type, valuetype, valign, version, vlink, width.

Some of these elements and attributes are quite obscure, so perhaps they won’t be missed. Others like <center>, align, background, and <u> were heavily used in the past, although most of these were already deprecated in HTML 4. The message here is clear: get rid of presentational markup and use CSS instead. The <b>, <i>, <em> and <strong> tags have miraculously survived, however. Although primarily used for text formatting in the past, these tags have been assigned new (non-presentational) semantics to make them respectable. Another conspicuous omission are frames. Yes, frames are gone! But you might breath a sigh of relief to know that <iframe> is still there. Speaking presentational versus semantic HTML, there are quite a few additions to HTML 5 in the latter category. The new semantic tags are designed to aid HTML authors in structuring text and to make it easier for search engine crawlers to parse information in web pages. Here they are (explanations provided by W3C):

  • <section> represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
  • <article> represents an independent piece of content of a document, such as a blog entry or newspaper article.
  • <aside> represents a piece of content that is only slightly related to the rest of the page.
  • <header> represents the header of a section.
  • <footer> represents a footer for a section and can contain information about the author, copyright information, et cetera.
  • <nav> represents a section of the document intended for navigation.
  • <dialog> can be used to mark up a conversation in conjunction with the <dt> and <dd> elements.
  • <figure> can be used to associate a caption together with some embedded content, such as a graphic or video.
  • <details> represents additional information or controls which the user can obtain on demand.

Most of these, except the last two, behave like the <div> element, which means their primary use is to identify a block of content that belongs together. Unlike <div> special semantics are associated with each of these elements. Not very exciting? HTML 5 also introduces the following new elements (explanations again from the W3C document):

  • <audio> and <video> for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. Source elements are used together with these elements if there are multiple streams available of different types.
  • <embed> is used for plugin content.
  • <mark> represents a run of marked (highlighted) text.
  • <meter> represents a measurement, such as disk usage.
  • <time> represents a date and/or time.
  • <canvas> is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.

The <embed> tag supersedes the <applet> and <object> tags. It defines some sort of embedded content that doesn’t expose its internal structure to the DOM tree. The content is typically rendered by a browser plugin. The <audio> and <video> tags are perhaps more interesting, because they make it possible to include multimedia files or streams directly into the HTML document without having to specify a vendor-specific plugin for playing the content. Granted, this could previously be done with the <embed> tag, but the <embed> tag was never a W3C standard and it isn’t supported by all browsers. Obviously, W3C has decided not to follow the mainstream browser implementations and added the <audio> and <video> tags instead, while reserving the <embed> tag for the above named purpose.

Arguably the most exciting additions to HTML 5 -at least from the perspective of a web developer- are the extensions to form processing and data rendering, and the related APIs, such as the editing API or the drag-and-drop API. These additions have previously evolved as a separate standard under the term Web Forms 2.0 and are now incorporated into HTML 5. The <input> element has been enhanced to support several new data types. New elements for user interface components have been defined, similar to those that can be found in GUI applications. For example, HTML 5 finally features the long awaited combo box, a combination of text input and drop-down list, which is a standard component in GUIs for decades. A new <datagrid> element for the interactive/editable representation of data in tabular, list, or tree form, is also present. Here are the new <input> types:

  • type=”datetime”- a date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC.
  • type=”datetime-local”- a date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone.
  • type=”date” – a date (year, month, day) with no time zone.
  • type=”month” – a date consisting of a year and a month with no time zone.
  • type=”week” – a date consisting of a year and a week number with no time zone.
  • type=”time”- a time (hour, minute, seconds, fractional seconds) with no time zone.
  • type=”number” – a numerical value.
  • type=”range” – a numerical value, with the extra semantic that the exact value is not important.
  • type=”email”- an e-mail address.
  • type=”url” – an internationalised resource identifier.

The input element also has several new attributes in HTML 5 that enhance its functionality (many of these also apply to other form controls such as <select>, <textarea>, etc.):

  • list=”listname” - used in conjunction with the <datalist> element to create a combobox.
  • required – indicates that the user must provide an input value.
  • autofocus – automatically focuses the control upon page load.
  • form – allows a single control to be associated with multiple forms.
  • inputmode – gives a hint to the user interface as to what kind of input is expected.
  • autocomplete – tells the browser to remember the value when the user returns to the page.
  • min – minimum value constraint.
  • max – maximum value constraint.
  • pattern – specifies pattern constraint.
  • step – specifies step constraint.

The following new elements provide additional user interface components for web applications. The last three are actually not themselves UI components, but components used for scripting the UI through a server side language:

  • <command> represents a command the user can invoke (e.g. toolbar button or icon).
  • <datalist> together with the a new list attribute for input is used to create comboboxes.
  • <output> represents some type of output, such as from a calculation done through scripting.
  • <progress> represents a completion of a task, such as downloading or when performing a series of expensive operations.
  • <menu> represents a menu. The element has three new attributes: type, label and autosubmit. They allow the element to transform into a menu as found in typical user interfaces as well as providing for context menus in conjunction with the global contextmenu attribute.
  • <datagrid> represents an interactive representation of a tree list or tabular data.
  • <ruby>, <rt> and <rb> allow for marking up Ruby annotations.
  • <eventsource> represents a target that “catches” remote server events.
  • <datatemplate>, <rule> and <nest> provide a templating mechanism for HTML.

Let’s briefly look at the new <datagrid> element. <datagrid> usually has a <table> child element, although <select> and <datalist> are also possible to create a tree control. The columns in the datagrid can have clickable captions for sorting. Columns, rows, and cells can each have specific flags, known as classes, which affect the functionality of the datagrid element. Rows are selectable and single cells (or all cells) can be made editable. A cell can contain a checkbox or values that can be cycled. Rows can also be separator rows. Datagrids have a DOM API for updating, inserting, and deleting rows or columns. They also have a data provider API that controls grid data content and editing.

I hope you found this brief overview useful. Please note that the features mentioned here don’t cover everything that is new in HTML 5, but hopefully they catch the essence. The HTML 5 specification is a work in progress; it is still changing and evolving. You can find the latest editor’s draft at http://www.w3.org/html/wg/html5/. An overview of the changes from HTML 4 is available at http://www.w3.org/TR/html5-diff/.

Web Standards: OpenID

OpenID appears to be red hot right now. The adoption of this emerging standard has accelerated in the first half of 2008 as it has entered the radar screen of web developers. Many large organisations, such as Google, Yahoo, IBM, Microsoft and AOL provide OpenID servers. Popular Internet sites, such as LiveJournal, Blogger, Jabber, Drupal and Wikitravel support OpenID logins, and the list is growing. Browser support for OpenID is just around the corner (it’s a feature in Firefox 3 for example). But we are getting ahead of ourselves. What is OpenID and why is it good? Put simply, OpenID solves two common problems; that of having to manage multiple accounts on different websites and that of storing sensitive account information on websites you don’t control. With a single OpenID account you can log into hundreds of different websites. Best of it, you -the user- manage the account information, not the website owner. In more technical terms, OpenID is an open, decentralised, user-centric digital identity framework. I’ll explain this in some more detail.

openid.pngOpenID is an open standard, because nobody owns it and because it’s free of patents and commercial licensing. The standard is maintained by the OpenID foundation; free open source implementations are available in many languages, including Java and PHP. It is decentralised, because it does not depend on a specific domain server. An existing OpenID provider can be rerouted very easily, as we shall see. It is user-centric, because it allows users to manage and control their identity information. Users can identify themselves with a URL they own. While traditional authentication relies on a combination of either a name or an email address and a password, OpenID just requires one item which is either a URL or an XRI (extensible resource identifier). To understand how this works, let’s look at the OpenID protocol and see what an OpenID login procedure actually does.

Let’s assume you already have an OpenID. You can use the same OpenID with any OpenID-enabled website (called the “relying party”) by typing it into the OpenID login field or by letting your browser fill out the field automatically. When you click Submit, the relying party performs a “discovery” procedure to retrieve an authentication URL and subsequently performs an “association” procedure for secure information interchange with the OpenID provider. You are then transported to the authentication URL (called the “OpenID provider”). Normally this is a site like yahoo.com or myopenid.com, but nothing keeps you from running your own OpenID server. After authenticating at the OpenID provider’s secure login page, you are redirected back to the relying party. If the relying party has requested identity information (name, gender, birth of date, etc.), you are prompted which information should be sent to the relying party. Often this information is used to fill in a registration form at the relying party. This information isn’t retrieved for a normal login, but the OpenID protocol supports it. Once you are back at the relying party’s website, the relying party checks whether the authentication was approved and verifies that the information is received correctly from the OpenID provider.

It sounds slightly complicated and by looking at the OpenID specifications you will find that the protocol is indeed quite involved. However, from the users point of view, it is really simple. The user only sees the OpenID login screen. If the user has enabled automatic login at the OpenID provider via a certificate or cookie, the only screen the user sees is the “approve/deny” screen. Logging into a website could not be easier. Only one password needs to be remembered. Registration forms can be pre-filled. Login into specific sites can be fully automated. The best thing is that the user has full control over the OpenID provider thanks to the discovery process. During discovery, the relying party looks for two fields in the header of the web page that it finds at the OpenID URL. In HTML Discovery, there are two fields named openid.server and openid2.provider.Example:

<link rel="openid.server" href="http://www.myopenid.com/server" />

 <link rel="openid2.provider" href="http://www.myopenid.com/server" />

These two entries commonly point to the same end point (the OpenID provider) and are used by version 1 and version 2 of the OpenID protocol. If you have a website, you could simply edit the HTML of your site to add these entries into the HTML header. You could then use the URL of that page as your OpenID. The advantage of using your own web page is that you control the OpenID end point. Hence, you can switch OpenID providers while retaining your OpenID simply by editing your site’s HTML code.

If you are going to incorporate OpenID into your existing website, you might want to think twice about implementing the protocol yourself. It isn’t trivial, and there are already several open source libraries that can be used, e.g. Openid4java if you program in Java, or the JanRain PHP OpenID library which works with PHP 4.3 up. Additional libraries for these two languages, as well as Ruby, Python, C#, C++, and other languages can be found at http://wiki.openid.net/Libraries.

Grid Computing For A Cause

A few months ago I wondered what to do with the computing power of my new Quadcore PC. It seemed that my daily compiler runs, virtual machines, and the occasional game session don’t make full use of the capacity of this machine. The CPU meter rarely exceeds the 30% mark processing these mundane tasks. It doesn’t even break a sweat when compressing MPEG data. In principle, this is a good thing of course. Yet, the thought that the CPU cores remain underutilised for most of their lifetime appeared slightly wasteful to me. What to do with it? Well, I have found the answer to that question. The answer is BOINC.

BOINC stands for Berkeley Open Infrastructure for Network Computing, which is quite a mouthful, but the program’s purpose is easy to explain: it lets you donate computing resources to the research sector. With BOINC your computer becomes part of a research network. You can choose one or more research projects from a list to which you want to donate computing resources. The BOINC software downloads tasks from these projects, which are then executed on your machine. When the computing tasks are completed, the results are sent back to the project’s host computer. Downloading and uploading happens automatically via the Internet. The project host computer distributes tasks to hundreds or possibly thousands of PCs and coordinates all computing tasks.

This is fashionably called “grid computing”. In essence, the grid is made up by the group of volunteers in case of BOINC, or rather their computers, which are located all over the world. BOINC has more than half a million participants which bring together a whopping 900 to 1000 teraflops from their desktops. This is more computing power than the world’s largest supercomputer, the IBM Blue Gene, currently offers. Unsurprisingly, this quasi-supercomputing platform is used for computationally intensive tasks, or “number crunching” tasks. The best thing about BOIC, however, is that it doesn’t take away CPU cycles from your applications. The BOINC computing tasks run as low priority processes in the background and thus only use CPU cycles when no other program needs them. Hence, there is no noticeable performance decrease.

You might wonder at this point what the BOINC projects are about and why you should donate computing resources to them. There are plenty of projects with different aims and scopes, but it all began with one single project: SETI@home, whereas SETI stands for Search for Extraterrestrial Intelligence. The SETI@home project began in 1999. It is different from other SETI projects in that it relies almost exclusively on donated computing power. The software analyses data from the Arecibo radio telescope and tries to identify potential ETI signals. Although no such signals were found yet, the project has been a big success and it still draws new volunteers. As one of the first volunteer-based grid computing projects, it has demonstrated that the approach is not only viable, but that results generally exceeded expectations. It has also given people a better understanding of some of the challenges that anonymous grid computing entails.

As mentioned, today there are many different research projects that make use of BOINC. The list is growing since BOINC was GPL-ed in 2003. I am sure you will find many worthy causes among them. For example, in the medical sector, there is cancer and HIV research as well as malaria control and human genome research. The World Community Grid, which uses BOINC as one type of client software, specialises in research projects that benefit humanity directly. Then there is climateprediction.net which tries to produce a forecast of the climate in the 21st century. There are a number of biology and bioinformatics projects, such as Rosetta@home which develops computational methods to accurately predict and design proteins and protein complexes. This may ultimately help to find cures for diseases. Finally, there’s a growing number of science projects from quantum physics and astronomy to mathematics.

CPU Resource UsageI am running BOINC for a week and my computer is happily plodding away at constant 100% CPU load. The resource usage graph shows all four CPU cores at max. It doesn’t seem to affect the system negatively, although I have to say, the computer does get noticeably hotter at this load. This definitely means higher energy consumption and thus a higher electricity bill. According to the BOINC Wiki at Berkeley, the power consumption increase is around 50%. Admittedly, I was a bit concerned about overheating, because this is the hot season in Thailand and room temperature is often around 30 deg. Celsius. However, my computer has borne up bravely so far. In order to reduce the heat problem, BOINC allows you to throttle CPU usage to a certain percentage, say 70%, which results in a square pulse resource usage graph. I might try that if it is getting any hotter.

Click this link to download BOINC.

Info crawler addendum

Personal note: It’s almost Christmas now. Since the beginning of this month, my TT&T Maxnet Internet connection has been quirky. I am supposed to have a fast DSL subscriber connection, at least that’s what I am paying for. But I am currently getting 6-8 kbps download speed, which doesn’t even make my old Hayes modem envious. Some sites such as Wikipedia aren’t accessible at all, although I can still connect via proxy server. I hear that other people in Thailand are experiencing similar… um… surprises. To be honest, most people aren’t really surprised. This experience is sort of common. When I was still subscribed with CAT, I was actually glad to get anything above 0 kbps because half of the time the connection didn’t work at all. Once I made the mistake to call their customer service to inquire about this.The receptionist connected me to the “technician”. The technician determined that this was a “special” problem and decided that I had to talk to a specialised technician. The specialised technician then connected me to another technician who was allegedly responsible for my area. That person finally routed me back to the first “technician” so the game could start anew. Well, it could have, but I hung up at that point. I am not even thinking about calling TT&T now. – It’s the time to be merry.

On the info crawler lane

Sometimes I wonder when exactly Thailand has decided to jump on the info highway. Or hasn’t it? I am not sure, because on one hand telecom and IT are ubiquitous in daily use, on the other hand nobody seems to care much about it, at least not in the upper ranks of government. Of course, there is one organisation that has always cared about ICT in Thailand, namely the CAT. No, it’s not a feline quadruped but an acronym that stands for “Communication Authority of Thailand”. Behind this rather grandiose name is the wonderful state-run telecom company which owns Thailand’s international communication infrastructure. One of its major achievements was to ensure that general Internet access is twice as expensive as in Europe and America and about five to ten times slower.

The CAT, however, is just one piece in the ICT jigsaw puzzle. There are other players, such as the aptly named TOT (which means “dead” in German), the national company that owns much of the domestic telecom infrastructure. Both organisations have proven their competence by dominating the telecom markets for decades. Of course, this is not too difficult if you are a monopoly. In fact, you could reduce customer service to almost zilch and still dominate the market. Not that I am accusing these highly praised organisations of such a thing. As state-enterprises, they are forced to follow government policies, aren’t they? They are just the pawn of the ICT ministry. Or perhaps it is the other way round? Goodness knows. At least officially, the ministry of ICT (MICT) reigns supremely over said organisations.

The MICT is a fairly young entity. Being established in this millennium, it is certainly younger than the companies it is supposed to control. However, the ministry has quickly gained fame by announcing the privatisation of these companies and then reversing its decision. Rumours that the recently resigned ICT minister has done this on the same day in two different press conferences cannot be confirmed, however. Apart from amazing press announcements, most people know the MICT from blocking websites. Of course, the  MICT’s “McClean” campaign only targets sleazy and illegal websites which are no good anyway, such as youtube.com. Yet it would be unfair to suggest that the MICT’s activity is restricted to blocking websites. Of course they do a lot more.

For example, the ministry has recently established the ICT Usage Promotion Bureau. This bureau stepped into action right away and produced a so-called “Housekeeper CD” which will be distributed freely in Thailand next month. The software on this CD blocks even more websites. It will protect us from what the enlightened bureaucrats consider evil influences. Of course, it’s up to everyone to decide whether to follow the MICTS’s idea of safe Internet usage and install this “Housekeeper”. I can already see throngs of people queuing up to get their hands on the CD. The interesting thing about this case is that one of the first acts of an agency whose mandate is to promote ICT usage is to limit its usage. Quite a remarkable waste of tax money, if you ask me.

Certainly there are more efficient ways to protect unsuspecting citizens from the hazards of ICT usage: Thailand’s so-called cybercrime law, for example, which was passed earlier this year. The new law requires every service provider to keep a record of it’s users Internet usage for 90 days. A “service provider” is by definition everyone who provides an Internet service (quite obviously). This ranges from access providers and Internet cafés to website operators and blog authors. Theoretically, every of these entities is required to keep a log of their user’s full identity including their names. The cybercrime hunters expect service providers to hand over such information to the police upon request. It will be interesting to see how online services, bloggers and forum operators will go about recording their user’s real identities, given that they never see their users. Of course, if the host computer is located outside Thailand, then the crime of not collecting user particulars is not punishable under Thai law. Oh well. Not exactly a boost to the Thai hosting industry, I suppose.

Another interesting aspect of the new law is the “Photoshop clause” which makes it illegal to post an altered image of a person on the Internet if the image damages that person’s reputation. This does of course immediately raise the question, whether it is also illegal to post a non-altered image that damages a person’s reputation, nude photos of the ex-girlfriend, for example. According to the cybercrime law this would be perfectly legal, although it may be expected that the defamation articles of the civil code may be applied in such cases. One can only marvel at the half-baked authoritarian style of the legislation and the stunning absence of any far-sightedness. It makes one ask: “Are you serious?” Unfortunately they are.