VIE - Using RDFa to make content editable


Published on

VIE is a library making RDFa -annotated content editable in a browser. Also showcased are Palsu, an online meeting tool built on VIE and Node.js, and Midgard Create, the CMS VIE was originally built for.

Published in: Technology

VIE - Using RDFa to make content editable

  1. 1. Vienna IKS Editables
  2. 2. “Build a CMS, no forms allowed”
  3. 3. Just Edit
  4. 4. CMS and JavaScript mustagree on the content model
  5. 5. RDFa: Your Content, Explained
  6. 6. RDFa: Your Content, Explained
  7. 7. Suddenly JavaScript can understand
  8. 8. Bonus: SEO ...assuming we get mess sorted out
  9. 9. VIE – Bridging RDFa to JavaScript● MIT license, developed by IKS Project on GitHub● Depends on Backbone.js and jQuery● Load RDFa entities as JavaScript objects● Sync changes to server, and to DOM● References enable list manipulation● Change events
  10. 10. Monolithic approach Decoupled approach Web Editing Tool Content Management System Web Framework Database Content Repository
  11. 11. Web Editing ToolHTML+RDFa JSON-LD over REST Web Framework
  12. 12. Communicating changes to server
  13. 13. Shared JavaScript CMS API
  14. 14. Get started with VIE1. Mark up your content with RDFa2. Include vie.js to your pages3. Implement Backbone.sync
  15. 15. Questions? @bergie
  16. 16. Online Meeting Tool
  17. 17. See how far we canpush VIE and VIE^2
  18. 18. IKS has a lot of meetings. Make them work better
  19. 19. Using palsu.me1. Log in with your Twitter account2. Create a meeting3. Set an agenda4. Invite the other participants5. Have the meeting6. Annotate action points
  20. 20. Under the hood● Node.js and Express as the application server● Written in CoffeeScript● (websockets, COMET) for real-time communications● Redis-powered triplestore● VIE for server and client-side templating● VIE^2 for smart annotations● Aloha Editor for content editing
  21. 21. VIE on the server
  22. 22. Questions? @bergie
  23. 23. Create
  24. 24. “Build a CMS, no forms allowed”
  25. 25. Entering editing state
  26. 26. Editing and saving
  27. 27. Drag-and-drop images Drop image, choose variant to use
  28. 28. History and workflows Workflows that are available for this content item
  29. 29. CMS interface should not  affect the page contents
  30. 30. CMS interface should notaffect the page contents
  31. 31. Never lose content
  32. 32. Layers of Midgard Create jQuery Aloha Backbone.js Application Server in PHP Midgard MVC for PHP Zeta Comp. Midgard2 Content Repository RDBMS
  33. 33. ...and in your CMS too?jQuery Aloha Backbone.js Some backend that can do JSON and REST Midgard MVC for PHP Zeta Comp. Midgard2 Content Repository RDBMS
  34. 34. Got Linux?$ sudo apt-get install php5-midgard2$ sudo pear channel-discover$ sudo pear install indeyets/midgardmvc_installer$ midgardmvc install midgard$ ./midgard/run
  35. 35. Relevant technologies● VIE● AppServer-in-PHP● PHP Content Repository● Aloha Editor
  36. 36. Questions? @bergie
  1. A particular slide catching your eye?

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