Future Of Web Languages

  • 6,083 views
Uploaded on

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

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'.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Web language becomes more complicated from times to times. Good slide.

    Dave (a web designer currently working on : www.freeringtonesforverizon.net/ )
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,083
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
71
Comments
2
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The future of web languages Mark Birbeck http://webBackplane.com/mark-birbeck
  • 2. Standards "The nice thing about standards is that there are so many of them to choose from." -- Andrew S Tanenbaum
  • 3. Agile
  • 4. Modular
  • 5. Semantic
  • 6. Use high-level languages to bind functionality
  • 7. RDFa
  • 8.
    • <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; />
  • 9.
    • <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>
  • 10.
    • <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>
  • 11.
    • 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>
  • 12.
    • <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
  • 13.
    • <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
  • 14.
    • 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>
  • 15.
    • 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>
  • 16.
    • 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>
  • 17.
    • <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>
  • 18.
    • <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>
  • 19. 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
  • 20. Improving search
  • 21.  
  • 22.  
  • 23.  
  • 24.  
  • 25. Improve user experience
  • 26. Examples using RDFa
  • 27. @role
  • 28. <ul role=&quot;navigation&quot; > <li>Home</li> <li>Customers</li> <li>About Us</li> </ul>
  • 29. Web languages as programming languages
  • 30. XForms
  • 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>
  • 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>
  • 33. XML Events
  • 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>
  • 35. SMIL
  • 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>
  • 37. Examples using XForms, XML Events, and SMIL
  • 38. The Ubiquity Library
  • 39. Summary Smarter mark-up languages make programming web apps easier (and portable)
  • 40. 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