Top Banner
Create
18

Create JS - A new kind of web editing interface

May 28, 2015

Download

Technology

Henri Bergius

Presentation from the first HelsinkiJS meetup
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Create JS  - A new kind of web editing interface

Create

Page 2: Create JS  - A new kind of web editing interface

“Build a CMS, no forms allowed”

Page 3: Create JS  - A new kind of web editing interface

Just Edit

Page 4: Create JS  - A new kind of web editing interface

CMS and JavaScript must agree on the content model

Page 5: Create JS  - A new kind of web editing interface

RDFa: Your Content, Explained

Page 6: Create JS  - A new kind of web editing interface

RDFa: Your Content, Explained

Page 7: Create JS  - A new kind of web editing interface

Suddenly JavaScript can understand

Page 8: Create JS  - A new kind of web editing interface

Bonus: SEO

Page 9: Create JS  - A new kind of web editing interface

Entering editing state

Page 10: Create JS  - A new kind of web editing interface

Editing and saving

Page 11: Create JS  - A new kind of web editing interface

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● http://viejs.org

Page 12: Create JS  - A new kind of web editing interface

Content Management

System

Database Content RepositoryDatabase

Web Framework

Web Editing Tool

Monolithic approach Decoupled approach

Page 13: Create JS  - A new kind of web editing interface

Web Framework

Web Editing Tool

HTML+RDFa JSON-LD over REST

Page 14: Create JS  - A new kind of web editing interface

Communicating changes to server

Page 15: Create JS  - A new kind of web editing interface

Shared JavaScript CMS API

Page 16: Create JS  - A new kind of web editing interface

Get started with VIE

1. Mark up your content with RDFa

2. Include vie.js to your pages

3. Implement Backbone.sync

Page 17: Create JS  - A new kind of web editing interface

http://createjs.org/

Page 18: Create JS  - A new kind of web editing interface

Questions?

[email protected]

@bergie

http://vieJS.org http://createJS.org