Cutting edge web technologies
Introduction
This area of my site will take a look at some of the up and coming web tecnologies, many of these are still in a draft and unfinished state and may change quicker than I update this page. Check the W3C for more information on the latest versions.
Many of the technologies mentioned here have incomplete or no support in browsers at present (depending on your flavour of browser), but where possible I will give a demonstration, along with instructions on how to make it work
The purpous of this page is to show what can be done with the web in the near future and to provide some commentry and demonstrations of the new tech. It is not ment to be an exaustive list and it is very standards centric but it will hopefully prove usefull to some people
The technologies I intend to cover are
- CSS3
- XHTML2
- E4X (XML for javaScript)
- SVG
- XFORMS
I expect this list to change over time
Each item is exlpained in a bit more detail below
CSS3
CSS3 is the next itteration of the style sheet language CSS. It hopes to address some of the shortcomings of its predecors and provide a whelth of new features.
The basic goal of CSS is to help web authors sepperate style from content by providing a language to define the style of a page that could be handled seperatly to the text of the document. This meens that changing the look of a page, or a whole website, is very easy. It also makes authoring and manipulating the content simpler as you don't have to worry about how the page looks when you are writing it
There are plenty of other sites that go into much more detail about the benifits of CSS in general. For now I will stick with explaining what is good about CSS3 over the previous versions
CSS3 like all new W3C specs is a modular speseification, The Modules I am personaly most intersted in and so cover here are:
XHTML2
XHTML2 is the first overhawl of HTML since the web took off. XHTML 1.0 was mostly just putting HTML into an XML bassed language, XHTML 1.1 was a modularisation of XHTML 1.0
XHTML2 It is still a long way from the mainstream, as the draft hasn't been finalised then it has to be implemented by user agents (browsers to you and me) and then those need to be downloaded and used by people. I recon we will be lucky to see mass uptake by 2010
So what is the fuss about?
new tags
Well there are a few new tags that simplify things. Teh <section> and <h> (heading) tags for a start
This helps keep structure of the document sane, consider this
<body>
<h1>level one heading</h1>
<p>some text</p>
<h2>level two heading</h2>
<p>some more text</p>
<h2>level two heading</h2>
<p>some more text</p>
<p>a final paragraph</p>
</body>
Is the final paragraph part of the h2 section or is it a conclusion to the main h1 section. There is no way to tell. You could put <div> tags around what you think are sections but they are sematicaly meaningless
The section tag makes this all easy to understand.
<body>
<section>
<h>level one heading</h>
<p>some text</p>
<section>
<h>level two heading</h>
<p>some more text</p>
</section>
<section>
<h>level two heading</h>
<p>some more text</p>
</section>
<p>a final paragraph</p>
</section>
</body>
The <h1> and <h2> tags have morphed into the generic <h>, which is a heading at the section level. this means that headings and content can be easily associated
There is also:
- The <nl> navigation list, for menu bars.
- A new <separator /> tag that superseeds the <hr> (horizontal rule) as it would neither be horizontal or a rule
- The <l> line tag to represent a line of text, rather than relyin on the singilton <br /> tag
But if that was all there was it would only be worthy of a dot release (a release that is the next sub version rather than having a whole new version), so what else does it have to offer us?
RDF intergration
RDF is a way of specifying what things on the web are for example something in a web resource may be a post code (zip code). RDF provides a mecanism to describe what types are so that they can be automatcaly recognised by programs
HTML had a limited set of tags to define such things there was the <address> tag and the <blockquote> tag but these were limited and there were allways requests for more to be added to the language
XHTML2 will alow you to put a lot more information about the information (metadata) into your webpage. This will allow user agents to implement powerfull new features and will enable web crawlers preform powerfull new searches.
It is accheived thought a few new attributes: about, content, datatype, property, rel. This could be one of XHTMLS killer apps and is great as authors don't need to implement it if they choose not to
I am still a bit of a RDF novice I will report more here as my understanding matures
Roll
Roll is another new attrabute that can help structure your page as it defines the roll of an element in the page
It is different from the RDF attributes, they help identify what an element is, roll identifies what it is for. For an example a note (roll) in a page could be a citation (description)
The correct use of this will help user agents sort out the content of a page and for example remove all navigation pior to printing.
When I first saw the roll attribute my thought was "what is the CSS selector going to be", we have . for class and # for id what would we use for roll. While there may be some call for a shorthand, css 3 will allow this easily with the attribute selector
goodbye old friends
XHTML2 will make the <a> tag and the <img> tag obsolete!
To those of us who have know HTML for a long time this may be like a bit of a shock, but they are specialist tags, which have no place in the web of the future.
So what is replacing them? Well in XHTML2 everything can be a link simlpy by using the href attribute. This will simplify mark up a lot as you will not have to add <a> jsut to make something a link
<ul class="nav" id="navbar">
<li><a href="http://www.w3.org">w3 websit</a>e<li>
<li><a href="http://www.w4.org">w4 website</a><li><a
<li><a href="http://www.w5.org">w5 website</a><li><a
</ul>
will become:
<nl roll="nav">
<li href="http://www.w3.org">w3 website<li><
<li href="http://www.w4.org">w4 website<li><
<li href="http://www.w5.org">w5 website<li><
</nl>
Similarly adding the src attribute to any node will load the resource in the place of that element.
So rather than having three tags to have a sponsership link you can combine them into one.
<div roll="banner"
href="http://www.spreadfirefox.com/"
src="http://sfx-images.mozilla.org/affiliates/Banners/300x250/trust_white.png">
Spread Firefox
</div>
Summary
XHTML2 is truly a new way of writing web pages. It shuould result in pages with less but more meaningfull tags. While it will not add much more in the way of presentation (that is css' job) but it will make web pages much richer and hopefully browsing a much richer experiance
There is a lot more that I could cover an I will do as time goes on
XHTML2 linkdump
E4X (XML for javaScript)
SVG
XFORMS
Summary
Each of these new technologies could, if widly adopted, greatly enhance the web for all. They are great tools for web developers, and while most things that they enable us to do can be done in other ways, they enable us to do it better and with more flexability
What remains to be seen is how long it takes for them to be taken up by the domanat browser producer, as without widespread support in the browser, inovation and progress on the web will be very slow and painfull