Successfully reported this slideshow.
Your SlideShare is downloading. ×

VIE - Using RDFa to make content editable

Loading in …3
×

Check these out next

1 of 41 Ad
1 of 41 Ad

VIE - Using RDFa to make content editable

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

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 must agree 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 the schema.org 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 Tool HTML+RDFa JSON-LD over REST Web Framework
  12. 12. Communicating changes to server
  13. 13. Shared JavaScript CMS API
  14. 14. Get started with VIE 1. Mark up your content with RDFa 2. Include vie.js to your pages 3. Implement Backbone.sync
  15. 15. Questions? henri.bergius@nemein.com @bergie
  16. 16. Online Meeting Tool http://palsu.me
  17. 17. See how far we can push VIE and VIE^2
  18. 18. IKS has a lot of meetings. Make them work better
  19. 19. Using palsu.me 1. Log in with your Twitter account 2. Create a meeting 3. Set an agenda 4. Invite the other participants 5. Have the meeting 6. Annotate action points http://palsu.me/help
  20. 20. Under the hood ● Node.js and Express as the application server ● Written in CoffeeScript ● Socket.io (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? henri.bergius@nemein.com @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 not affect 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 pear.indeyets.pp.ru $ sudo pear install indeyets/midgardmvc_installer $ midgardmvc install http://bit.ly/hV05pi midgard $ ./midgard/run
  35. 35. Relevant technologies ● VIE https://github.com/bergie/VIE ● AppServer-in-PHP https://github.com/indeyets/appserver-in-php ● PHP Content Repository http://phpcr.github.com/ ● Aloha Editor http://aloha-editor.org/
  36. 36. Questions? henri.bergius@nemein.com @bergie

×