Your SlideShare is downloading. ×
0
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
<ul><li><meta name=&quot; author &quot;content=&quot; Mark Birbeck &quot; /> <link rel=&quot; license &quot;  href=&quot; ...
<ul><li><img src=&quot; http://farm1.static.flickr.com/...jpg &quot;  /> </li></ul><ul><li>Zakim Bridge by Paul Keleher </...
<ul><li><img src=&quot; http://farm1.static.flickr.com/...jpg &quot;  /> </li></ul><ul><li>Zakim Bridge by Paul Keleher </...
<ul><li>Boston Harbor by Paul Keleher </li></ul><ul><li><span   about=&quot;http://farm1.static.flickr.com/...jpg&quot; > ...
<ul><li><span  about=&quot;http://farm1.static.flickr.com/...jpg&quot; >  A picture of  <span  property=&quot;title&quot; ...
<ul><li><span  about=&quot;http://farm1.static.flickr.com/...jpg&quot; >  A picture of  <span  property=&quot;title&quot; ...
<ul><li>Christmas Lights by Paul Keleher </li></ul><ul><li><span  about=&quot;http://farm1.static.flickr.com/...jpg&quot; ...
<ul><li>Spiral Staircase by Paul Keleher </li></ul><ul><li><span  about=&quot;http://farm1.static.flickr.com/...jpg&quot; ...
<ul><li>Spiral Staircase by Paul Keleher </li></ul><ul><li><span  about=&quot;http://farm1.static.flickr.com/...jpg&quot; ...
<ul><li><span  about=&quot;http://www.w3.org/People/Ivan/#me&quot;   typeof=&quot;foaf:Person&quot; >  <span  property=&qu...
<ul><li><div  rel=&quot;foaf:holdsAccount&quot; >   <span  typeof=&quot;foaf:OnlineAccount&quot; >   <span  rel=&quot;foaf...
RDFa summary <ul><li>about   and   src :   what we're talking about </li></ul><ul><li>property   and   content :   set tex...
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;...
<div> Send <xf:action ev:event=&quot;click&quot;> <xf:message level=&quot;modeless&quot;> Your email has been sent. </xf:m...
XML Events
<div> Send <xf:action ev:event=&quot;click&quot;> <xf:message level=&quot;modeless&quot;> Your email has been sent. </xf:m...
SMIL
<xf:trigger> <xf:label>Animate</xf:label> <xf:action ev:event=&quot;DOMActivate&quot;> <smil:animate targetElement=&quot;p...
Examples using XForms, XML Events, and SMIL
The Ubiquity Library
Summary Smarter mark-up languages make programming web apps easier (and portable)
References <ul><li>Me: http://webBackplane.com/mark-birbeck </li></ul><ul><li>My blog: http://internet-apps.blogspot.com <...
Upcoming SlideShare
Loading in...5
×

Future Of Web Languages

6,167

Published on

This talk was given by Mark Birbeck at 'Kings of Code', in Amsterdam on May 27th, 2008.

The W3C has a number of exciting new languages in development, from XForms for user interface definition, to RDFa and @role for defining semantics. These languages are usually regarded as something to be implemented natively by browsers, but this presentation shows examples of how they can also provide a rich source of 'hooks' onto which to attach 'unobtrusive javascript'.

Published in: Business, Technology
2 Comments
3 Likes
Statistics
Notes
  • Web language becomes more complicated from times to times. Good slide.

    Dave (a web designer currently working on : www.freeringtonesforverizon.net/ )
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • It's a shame that SlideShare doesn't use the speaker notes for the transcript; instead it just puts the text from the slide in there. If anyone is interested in this topic you might want to download the presentation, and then you'll get the notes, which also include lots of links to examples.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,167
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide
  • Transcript of "Future Of Web Languages"

    1. 1. The future of web languages Mark Birbeck http://webBackplane.com/mark-birbeck
    2. 2. Standards &quot;The nice thing about standards is that there are so many of them to choose from.&quot; -- Andrew S Tanenbaum
    3. 3. Agile
    4. 4. Modular
    5. 5. Semantic
    6. 6. Use high-level languages to bind functionality
    7. 7. RDFa
    8. 8. <ul><li><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; /> </li></ul>
    9. 9. <ul><li><img src=&quot; http://farm1.static.flickr.com/...jpg &quot; /> </li></ul><ul><li>Zakim Bridge by Paul Keleher </li></ul><ul><li><a rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by/2.0/&quot;> ... </a> </li></ul>
    10. 10. <ul><li><img src=&quot; http://farm1.static.flickr.com/...jpg &quot; /> </li></ul><ul><li>Zakim Bridge by Paul Keleher </li></ul><ul><li><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> </li></ul>
    11. 11. <ul><li>Boston Harbor by Paul Keleher </li></ul><ul><li><span about=&quot;http://farm1.static.flickr.com/...jpg&quot; > A picture of <span property=&quot;title&quot; > Boston Harbor </span> </span> </li></ul><ul><li><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> </li></ul>
    12. 12. <ul><li><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> </li></ul><ul><li>Boston Harbor by Paul Keleher </li></ul>
    13. 13. <ul><li><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> </li></ul><ul><li><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> </li></ul><ul><li>Christmas Lights by Paul Keleher </li></ul>
    14. 14. <ul><li>Christmas Lights by Paul Keleher </li></ul><ul><li><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> </li></ul>
    15. 15. <ul><li>Spiral Staircase by Paul Keleher </li></ul><ul><li><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> </li></ul>
    16. 16. <ul><li>Spiral Staircase by Paul Keleher </li></ul><ul><li><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> </li></ul>
    17. 17. <ul><li><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> </li></ul>
    18. 18. <ul><li><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> </li></ul>
    19. 19. RDFa summary <ul><li>about and src : what we're talking about </li></ul><ul><li>property and content : set text values </li></ul><ul><li>datatype : sets the type of a text value </li></ul><ul><li>typeof : sets the type of something </li></ul><ul><li>resource : same as href , but not clickable </li></ul><ul><li>rel and rev : now work with about and src </li></ul>
    20. 20. Improving search
    21. 25. Improve user experience
    22. 26. Examples using RDFa
    23. 27. @role
    24. 28. <ul role=&quot;navigation&quot; > <li>Home</li> <li>Customers</li> <li>About Us</li> </ul>
    25. 29. Web languages as programming languages
    26. 30. XForms
    27. 31. <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>
    28. 32. <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>
    29. 33. XML Events
    30. 34. <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>
    31. 35. SMIL
    32. 36. <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>
    33. 37. Examples using XForms, XML Events, and SMIL
    34. 38. The Ubiquity Library
    35. 39. Summary Smarter mark-up languages make programming web apps easier (and portable)
    36. 40. References <ul><li>Me: http://webBackplane.com/mark-birbeck </li></ul><ul><li>My blog: http://internet-apps.blogspot.com </li></ul><ul><li>Main RDFa site: http://rdfa.info </li></ul><ul><li>RDFa parser: http://lib-xh.googlecode.com </li></ul><ul><li>RDFa in detail: http://www.swcube.com/rdfa </li></ul><ul><li>Ubiquity XForms: http://ubiquity-xforms.googlecode.com </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×