Livingdocs presentation @Pantalk

The point, base concepts and some code of Livingdocs.

Transcript

1. Livingdocs publishing for everyone 2013 Experimental Edition Freitag, 19. April 13
2. part 1: what is livingdocs? part 2: code and concepts Freitag, 19. April 13
3. This is not a CMS Freitag, 19. April 13
4. «Documents that are accessible by everybody from anywhere, are easy to create and update, can contain interactive elements and most importantly, have great expressiveness.» our vision Freitag, 19. April 13
5. Make it easy for everybody to create and edit web documents the task How to reduce the complexity of HTML + CSS (+ JS)? or Freitag, 19. April 13
6. Live Demo Freitag, 19. April 13
7. Article Title One of the reasons its possible to have this really WYSIWYG experience is because we’ve stripped out a lot of the power that other online editors give you. Link to another page Author A few kind words about the author CSS Text HTML Images Freitag, 19. April 13
8. Article Title One of the reasons its possible to have this really WYSIWYG experience is because we’ve stripped out a lot of the power that other online editors give you. Link to another page Author A few kind words about the author Title Paragraph Paragraph Separator Author Step 1 Work with components Freitag, 19. April 13
9. Author A few kind words about the author <div class=”author” data-component=”author”> <img data-image=‘author-img’ src=’...’> <strong data-field=‘author’>...</strong> <p data-field=‘description’>...</p> </div> Step 2 Let everybody create components = .author {} .author-name {} .author-description {} HTML CSS + COMPONENT Freitag, 19. April 13
10. Component libraries instead of templates and themes Freitag, 19. April 13
11. Browser Server • manipulating HTML directly • send HTML chunks to server • consume services from server > storage of HTML chunks > asset management > account management Freitag, 19. April 13
12. Part 2: Code and Concepts Livingdocs is so broad that it requires a lot of features that make good projects on their own. Whenever possible we try to separate implementations out into modules and develop them with other developers that have similar needs. Freitag, 19. April 13
13. bird’s eye Freitag, 19. April 13
14. Angular Freitag, 19. April 13
15. A page is a page is an app - Two-way data binding (angular.js) - Snippet definitions contain javascript code (behavior) <div id=‘snippet-01’ class=”document-name-snippet”> <h1 class=”title-field”>{{ document.name }}</h1> <span class=”space-field”>{{ space.name }}</span> </div> class DocumentsController constructor: ($scope, document) -> { document, space } = document.get() $scope.document = documents $scope.space = space Angular Controller (coffeescript) Comes from server call Objects have 2-way binding: if they change, the change is automatically shown in the view. Snippet uses angular.js bound variables Freitag, 19. April 13
16. Mobile content strategy Article Title One of the reasons its possible to have this really WYSIWYG experience is because we’ve stripped out a lot of the power that other online editors give you. Link to another page Author A few kind words about the author - HTML is the metadata a title a text an author - Know the content and know which device wants which content - Responsive design is about content, not css Freitag, 19. April 13
17. Editable.js - A low-level js API for content-editable - In collaboration with beyounic (feathe.rs) Freitag, 19. April 13
18. The data document - An easy way to add interactive data viz to a document - A frontend-interface for Vega and d3.js Freitag, 19. April 13
19. A Livingdocs Diff - Enrich git with semantic knowledge about the snippets - A semantic diff viewer for livingdocs documents <div id=‘snippet-01’ class=”comment-snippet”> <h1 class=”title-field”></h1> <span class=”space-field”></span> </div> <div id=‘snippet-01’ class=”author-snippet”> <h1 class=”title-field”></h1> <span class=”space-field”></span> </div> Freitag, 19. April 13
20. Questions? upfront GmbH Livingdocs we’re develop and hope to be in private beta soon @upfrontIO lukas@upfront.io gabriel@upfront.io reach us Freitag, 19. April 13