VIE - Using RDFa to make content editable
-
Upload
henri-bergius -
Category
Technology
-
view
5.647 -
download
2
description
Transcript of VIE - Using RDFa to make content editable
![Page 1: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/1.jpg)
Vienna IKS Editables
![Page 2: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/2.jpg)
“Build a CMS, no forms allowed”
![Page 3: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/3.jpg)
Just Edit
![Page 4: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/4.jpg)
CMS and JavaScript must agree on the content model
![Page 5: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/5.jpg)
RDFa: Your Content, Explained
![Page 6: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/6.jpg)
RDFa: Your Content, Explained
![Page 7: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/7.jpg)
Suddenly JavaScript can understand
![Page 8: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/8.jpg)
Bonus: SEO
...assuming we get the schema.org mess sorted out
![Page 9: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/9.jpg)
![Page 10: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/10.jpg)
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
![Page 11: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/11.jpg)
Content Management
System
Database Content RepositoryDatabase
Web Framework
Web Editing Tool
Monolithic approach Decoupled approach
![Page 12: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/12.jpg)
Web Framework
Web Editing Tool
HTML+RDFa JSON-LD over REST
![Page 13: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/13.jpg)
Communicating changes to server
![Page 14: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/14.jpg)
Shared JavaScript CMS API
![Page 15: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/15.jpg)
Get started with VIE
1. Mark up your content with RDFa
2. Include vie.js to your pages
3. Implement Backbone.sync
![Page 16: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/16.jpg)
![Page 18: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/18.jpg)
Online Meeting Tool
http://palsu.me
![Page 19: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/19.jpg)
See how far we can push VIE and VIE^2
![Page 20: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/20.jpg)
IKS has a lot of meetings. Make them work better
![Page 21: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/21.jpg)
![Page 22: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/22.jpg)
![Page 23: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/23.jpg)
![Page 24: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/24.jpg)
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
![Page 25: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/25.jpg)
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
![Page 26: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/26.jpg)
VIE on the server
![Page 28: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/28.jpg)
Create
![Page 29: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/29.jpg)
“Build a CMS, no forms allowed”
![Page 30: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/30.jpg)
Entering editing state
![Page 31: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/31.jpg)
Editing and saving
![Page 32: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/32.jpg)
Drag-and-drop images
Drop image, choose variant to use
![Page 33: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/33.jpg)
History and workflows
Workflows that are available for this content item
![Page 34: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/34.jpg)
CMS interface should not affect the page contents
![Page 35: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/35.jpg)
CMS interface should notaffect the page contents
![Page 36: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/36.jpg)
Never lose content
![Page 37: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/37.jpg)
RDBMS
Midgard2 Content Repository
Midgard MVC for PHP
jQuery Aloha Backbone.js
Zeta Comp.
Midgard2 Content Repository
Midgard MVC for PHP
Application Server in PHP
Layers of Midgard Create
![Page 38: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/38.jpg)
RDBMS
Midgard2 Content Repository
Midgard MVC for PHP
jQuery Aloha Backbone.js
Zeta Comp.
Midgard2 Content Repository
Midgard MVC for PHP
Some backend that can do JSON and REST
...and in your CMS too?
![Page 39: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/39.jpg)
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
![Page 40: VIE - Using RDFa to make content editable](https://reader033.fdocuments.net/reader033/viewer/2022051411/5480cec85806b5c9108b45d8/html5/thumbnails/40.jpg)
Relevant technologies
● VIEhttps://github.com/bergie/VIE
● AppServer-in-PHPhttps://github.com/indeyets/appserver-in-php
● PHP Content Repositoryhttp://phpcr.github.com/
● Aloha Editorhttp://aloha-editor.org/