How works
Q is a MIT licensed
visual journalism toolbox
developed at NZZ Storytelling
WebZurich 25.10.2017
Beni Buess
We believe that journalism should be more visual.
It should be easy for journalists to create visual elements for their stories.
some examples
how journalists use it
choose tool
enter data
embed in article CMS
see it on website
now from a technical perspective
- Q editor asks Q server for configured tools
- loads JSON schema for selected tool
- generates a form based on the schema
- Q editor constantly validates data against schema
- sends data to tool service via Q server to get markup/scripts/stylesheets
- updates preview (which is a CustomElement with ShadowDOM)
- Livingdocs Editor loads iframe for embed dialog from Q
- Q shows recent items and preview for target
- iframe sends ID and displayOptions as JSON to Livingdocs
- Livingdocs shows preview (iframe delivered by special service) and stores the JSON
- Livingdocs delivery requests renderingInfo for graphic from Q server
- Q server loads graphic data and sends it to map tool
- tool responds with markup/scripts/stylesheets
- Q server adds scripts/stylesheets configured for target
- Livingdocs delivery adds everything to the page markup before sending it to the client.
some specials
- By having special stylesheets/scripts configured per tool and target we do theming for nzz.ch and nzzas.nzz.ch
- We have targets for AMP and the native app.
- A slackbot tells us whenever someone creates a graphic
- There is a service to get a Q graphic as PNG (using headless chrome)
- JSON Schema is extended to define relations between properties (e.g. certain options based on other property values) and access control to options based on user roles
- Q is MIT licensed
How the visual journalism toolbox Q works
By benib
