0
Vienna IKS Editables
“Build a CMS, no forms allowed”
Just Edit
CMS and JavaScript mustagree on the content model
RDFa: Your Content, Explained
RDFa: Your Content, Explained
Suddenly JavaScript can understand
Bonus: SEO  ...assuming we get theschema.org mess sorted out
VIE – Bridging RDFa to JavaScript●    MIT license, developed by IKS Project on    GitHub●    Depends on Backbone.js and jQ...
Monolithic approach   Decoupled approach                       Web Editing Tool    Content  Management    System          ...
Web Editing ToolHTML+RDFa                      JSON-LD over REST            Web Framework
Communicating changes to server
Shared JavaScript CMS API
Get started with VIE1. Mark up your content with RDFa2. Include vie.js to your pages3. Implement Backbone.sync
Questions?henri.bergius@nemein.com            @bergie
Online Meeting Tool  http://palsu.me
See how far we canpush VIE and VIE^2
IKS has a lot of meetings. Make them work better
Using palsu.me1. Log in with your Twitter account2. Create a meeting3. Set an agenda4. Invite the other participants5. Hav...
Under the hood●   Node.js and Express as the    application server●   Written in CoffeeScript●   Socket.io (websockets, CO...
VIE on the server
Questions?henri.bergius@nemein.com            @bergie
Create
“Build a CMS, no forms allowed”
Entering editing state
Editing and saving
Drag-and-drop images                  Drop image, choose                  variant to use
History and workflows         Workflows that are available for this         content item
CMS interface should not  affect the page contents
CMS interface should notaffect the page contents
Never lose content
Layers of Midgard Create jQuery      Aloha      Backbone.js            Application Server in PHP      Midgard MVC for PHP ...
...and in your CMS too?jQuery      Aloha     Backbone.js   Some backend that can do JSON and REST     Midgard MVC for PHP ...
Got Linux?$ sudo apt-get install php5-midgard2$ sudo pear channel-discover pear.indeyets.pp.ru$ sudo pear install indeyets...
Relevant technologies●    VIE      https://github.com/bergie/VIE●    AppServer-in-PHP      https://github.com/indeyets/app...
Questions?henri.bergius@nemein.com            @bergie
VIE - Using RDFa to make content editable
VIE - Using RDFa to make content editable
VIE - Using RDFa to make content editable
VIE - Using RDFa to make content editable
VIE - Using RDFa to make content editable
Upcoming SlideShare
Loading in...5
×

VIE - Using RDFa to make content editable

5,061

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

Transcript of "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 theschema.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 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?henri.bergius@nemein.com @bergie
  16. 16. Online Meeting Tool http://palsu.me
  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 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 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 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
  1. A particular slide catching your eye?

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

×