The future of web languages Mark Birbeck http://webBackplane.com/mark-birbeck

Standards "The nice thing about standards is that there are so many of them to choose from." -- Andrew S Tanenbaum

Agile

Modular

Semantic

Use high-level languages to bind functionality

RDFa

<meta name=&quot; author &quot;content=&quot; Mark Birbeck &quot; /> <link rel=&quot; license &quot; href=&quot; http://creativecommons.org/licenses/by/2.0/ &quot; />

<meta name=&quot; author &quot;content=&quot; Mark Birbeck &quot; /> <link rel=&quot; license &quot; href=&quot; http://creativecommons.org/licenses/by/2.0/ &quot; />

<img src=&quot; http://farm1.static.flickr.com/...jpg &quot; /> Zakim Bridge by Paul Keleher <a rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by/2.0/&quot;> ... </a>

<img src=&quot; http://farm1.static.flickr.com/...jpg &quot; />

Zakim Bridge by Paul Keleher

<a rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by/2.0/&quot;> ... </a>

<img src=&quot; http://farm1.static.flickr.com/...jpg &quot; /> Zakim Bridge by Paul Keleher <a about =&quot; http://farm1.static.flickr.com/...jpg &quot; rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by/2.0/&quot;> ... </a>

<img src=&quot; http://farm1.static.flickr.com/...jpg &quot; />

Zakim Bridge by Paul Keleher

<a about =&quot; http://farm1.static.flickr.com/...jpg &quot; rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by/2.0/&quot;> ... </a>

Boston Harbor by Paul Keleher <span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> </span> <span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> taken by <span property=&quot;creator&quot; > Paul </span>. </span>

Boston Harbor by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> </span>

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> taken by <span property=&quot;creator&quot; > Paul </span>. </span>

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> taken by <span property=&quot;creator&quot; content=&quot;Paul Keleher&quot; > Paul </span>. </span> Boston Harbor by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> taken by <span property=&quot;creator&quot; content=&quot;Paul Keleher&quot; > Paul </span>. </span>

Boston Harbor by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Christmas Lights </span> taken on <span property=&quot;created&quot; > December 1st </span>. </span> <span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Christmas Lights </span> taken on <span property=&quot;created&quot; content=&quot;2007-12-01&quot; > December 1st </span>. </span> Christmas Lights by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Christmas Lights </span> taken on <span property=&quot;created&quot; > December 1st </span>. </span>

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Christmas Lights </span> taken on <span property=&quot;created&quot; content=&quot;2007-12-01&quot; > December 1st </span>. </span>

Christmas Lights by Paul Keleher

Christmas Lights by Paul Keleher <span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Christmas Lights </span> taken on <span property=&quot;created&quot; content=&quot;2007-12-01&quot; datatype=&quot;xs:date&quot; > December 1st </span>. </span>

Christmas Lights by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Christmas Lights </span> taken on <span property=&quot;created&quot; content=&quot;2007-12-01&quot; datatype=&quot;xs:date&quot; > December 1st </span>. </span>

Spiral Staircase by Paul Keleher <span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > <span property=&quot;title&quot; > Spiral Staircases </span> taken by <span property=&quot;creator&quot; > Paul Keleher </span>. <span property=&quot;geo:lat&quot; content=&quot;42.359188&quot; / > <span property=&quot;geo:long&quot; content=&quot;-71.058291&quot; /> </span>

Spiral Staircase by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > <span property=&quot;title&quot; > Spiral Staircases </span> taken by <span property=&quot;creator&quot; > Paul Keleher </span>. <span property=&quot;geo:lat&quot; content=&quot;42.359188&quot; / > <span property=&quot;geo:long&quot; content=&quot;-71.058291&quot; /> </span>

Spiral Staircase by Paul Keleher <span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > <span property=&quot; geo:lat &quot; content=&quot; 42.359188 &quot; / > <span property=&quot; geo:long &quot; content=&quot; -71.058291 &quot; /> </span>

Spiral Staircase by Paul Keleher

<span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > <span property=&quot; geo:lat &quot; content=&quot; 42.359188 &quot; / > <span property=&quot; geo:long &quot; content=&quot; -71.058291 &quot; /> </span>

<span about=&quot;http://www.w3.org/People/Ivan/#me&quot; typeof=&quot;foaf:Person&quot; > <span property=&quot;foaf:name&quot; > Ivan Herman </span> knows Mark Birbeck and they are meeting today. </span>

<span about=&quot;http://www.w3.org/People/Ivan/#me&quot; typeof=&quot;foaf:Person&quot; > <span property=&quot;foaf:name&quot; > Ivan Herman </span> knows Mark Birbeck and they are meeting today. </span>

<div rel=&quot;foaf:holdsAccount&quot; > <span typeof=&quot;foaf:OnlineAccount&quot; > <span rel=&quot;foaf:accountServiceHomepage&quot; resource=&quot;http://www.twitter.com/&quot; > Twitter Name: </span> <span property=&quot;foaf:accountName&quot; > markbirbeck </span> </span> </div>

<div rel=&quot;foaf:holdsAccount&quot; > <span typeof=&quot;foaf:OnlineAccount&quot; > <span rel=&quot;foaf:accountServiceHomepage&quot; resource=&quot;http://www.twitter.com/&quot; > Twitter Name: </span> <span property=&quot;foaf:accountName&quot; > markbirbeck </span> </span> </div>

RDFa summary about and src : what we're talking about property and content : set text values datatype : sets the type of a text value typeof : sets the type of something resource : same as href , but not clickable rel and rev : now work with about and src

about and src : what we're talking about

property and content : set text values

datatype : sets the type of a text value

typeof : sets the type of something

resource : same as href , but not clickable

rel and rev : now work with about and src

Improving search

Improve user experience

Examples using RDFa

@role

<ul role=&quot;navigation&quot; > <li>Home</li> <li>Customers</li> <li>About Us</li> </ul>

Web languages as programming languages

XForms

<xf:trigger> <xf:label>Send</xf:label> <xf:action ev:event=&quot;DOMActivate&quot;> <xf:message level=&quot;modeless&quot;> Your email has been sent. </xf:message> </xf:action> </xf:trigger>

<div> Send <xf:action ev:event=&quot;click&quot;> <xf:message level=&quot;modeless&quot;> Your email has been sent. </xf:message> </xf:action> </div>

XML Events

<div> Send <xf:action ev:event=&quot;click&quot;> <xf:message level=&quot;modeless&quot;> Your email has been sent. </xf:message> </xf:action> </div>

SMIL

<xf:trigger> <xf:label>Animate</xf:label> <xf:action ev:event=&quot;DOMActivate&quot;> <smil:animate targetElement=&quot;panel&quot; attributeName=&quot;width&quot; to=&quot;200&quot; dur=&quot;3&quot; repeatCount=&quot;indefinite&quot;></smil:animate> <smil:set attributeName=&quot;display&quot; targetElement=&quot;hidden&quot; to=&quot;block&quot; fill=&quot;freeze&quot;></smil:set> </xf:action> </xf:trigger>

Examples using XForms, XML Events, and SMIL

The Ubiquity Library

Summary Smarter mark-up languages make programming web apps easier (and portable)

References Me: http://webBackplane.com/mark-birbeck My blog: http://internet-apps.blogspot.com Main RDFa site: http://rdfa.info RDFa parser: http://lib-xh.googlecode.com RDFa in detail: http://www.swcube.com/rdfa Ubiquity XForms: http://ubiquity-xforms.googlecode.com

Me: http://webBackplane.com/mark-birbeck

My blog: http://internet-apps.blogspot.com

Main RDFa site: http://rdfa.info

RDFa parser: http://lib-xh.googlecode.com

RDFa in detail: http://www.swcube.com/rdfa

Ubiquity XForms: http://ubiquity-xforms.googlecode.com