Applying Practical Experience to Html5 Automotive Qnx w3c f2f Barcelona 2013-04-22
Developing a practical HTML5 magazine workflow
-
Upload
michael-kowalski -
Category
Technology
-
view
4.092 -
download
0
description
Transcript of Developing a practical HTML5 magazine workflow
![Page 1: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/1.jpg)
Developing a practical HTML5 magazine workflow
Michael Kowalski, Contentment@micycle
![Page 2: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/2.jpg)
•Padify is a cloud-hosted platform that provides scalable HTML5 production for digital magazines and content based apps.
• It lets you design just once for all devices and orientations.
![Page 3: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/3.jpg)
Good news, everybody!
![Page 4: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/4.jpg)
✓ HTML5
✓ Responsive layouts
✓ Fluid grids
✓ Breakpoints
✓ Media queries
✓ Responsive images
We have the technology!
![Page 5: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/5.jpg)
![Page 6: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/6.jpg)
Cross-platform Responsivelayout
Accessible
Semantic Low file size
InteractiveNon-proprietary
iOSAndroid
Web
Low lock-in Future proof-ish
SmartphonesTablets
Laptops
TV
Open web platform
Desktop
![Page 7: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/7.jpg)
Hybrid app
![Page 8: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/8.jpg)
Hybrid app
Newsstand
![Page 9: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/9.jpg)
Cross platform deliveryis not the problem
![Page 10: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/10.jpg)
Cross platform workflowis the problem
![Page 11: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/11.jpg)
Where did that HTML5 come from?
![Page 12: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/12.jpg)
✓ Fast
✓ Usable
✓ Scalable
✓ Cost effective
✓ High quality outcome
Requirements for a practical cross platform workflow
![Page 13: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/13.jpg)
✓ Works with existing staff
✓ Works with existing content
✓ Works with existing systems
Plays nicely with your stuff
![Page 14: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/14.jpg)
Remixing not creating
Not so much a CMS.
More of a CRS.
![Page 15: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/15.jpg)
The human angle
![Page 16: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/16.jpg)
Responsive design is a
paradigm shift
![Page 17: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/17.jpg)
headfuck
Responsive design is a
![Page 18: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/18.jpg)
Sweeten the deal with cool stuff and a humane user interface
![Page 19: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/19.jpg)
A humane interfacetreats the user with
respect, and allows for human error
Don’t make a human do what a robot could do
![Page 20: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/20.jpg)
Autosave everything.1. Never lose the user’s work
Avoid rekeying. Copy and paste is not a humane import mechanism!
2. Don’t make the user redo their work
Undo anything. Keep a version history.
3. Let the user change their mind
7 humane design guidelines
![Page 21: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/21.jpg)
Avoid modal dialogs. 4. Don’t interrupt the user
Avoid order dependence.5. Let the user work in their own way
Persist user interface state.6. Let the user go to lunch
7 humane design guidelines
![Page 22: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/22.jpg)
The UI should not just be a view on the data model.
7. Focus on user goals
7 humane design guidelines
![Page 23: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/23.jpg)
The basic magazine data model
Magazine
Edition
Page
![Page 24: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/24.jpg)
All issues
Issue 10
Issue 9
Issue 8
A naive UI implementation
All magazines
Magazine A
Magazine B
Issue 10Page 1
Page 2
Page 3
Page 2Start here
![Page 25: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/25.jpg)
A better implementation
All issues
Issue 10
Issue 9
Issue 8
Start here
Next page
with added “nextiness”
Magazine A
Magazine B
Switch magazines
Issue 10Page 1
Page 2
Page 3
Last viewed page
![Page 26: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/26.jpg)
Dropbox sync for import
Huma
ne!
or drag and drop upload
or Indesign plugin
![Page 27: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/27.jpg)
Editorial users can build in great interactive behaviour without technical skills; do things that were never possible in print.
Cool stuff
Video Hotspots
Animation
Layers
•No developer input required as part of regular production cycle.
![Page 28: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/28.jpg)
•Avoid overly technical UI for editorial staff.
•Focus on workflow and goals, not the data model.
•No developer input required as part of regular production cycle.
Separate out developer concerns from editorial concerns
![Page 29: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/29.jpg)
Tapfor more
info
Layers
Hotspots
Multilevel undo
Animation
Custom fonts
Pasteboard
WYSIWYG editing
![Page 30: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/30.jpg)
Instant preview
Responsive grid layout
Rule the pitch
Tapfor
moreinfo
![Page 31: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/31.jpg)
Responsive templating
![Page 32: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/32.jpg)
Tablet users expect a better experience than cookie-cutter design or PDFs
![Page 33: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/33.jpg)
Don’t expect a robot to do a human’s workAlgorithmic design is rubbish...but cheap and fast
![Page 34: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/34.jpg)
What we talk about when we talk about templating
Developer
Template first, squirt content through it later. Separate content from presentation.
A starting point. Apply the template and then mess with it. Design around the content. Designer
×
![Page 35: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/35.jpg)
How templating usually works
Data Template
Page
![Page 36: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/36.jpg)
But magazine content is mostly unstructured
Data Template
Page
×Sometimes, a piece of text is just a
piece of text
![Page 37: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/37.jpg)
Construct a pseudo object on the fly
“Data”
Template
PageContent
Map elements using selectors
![Page 38: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/38.jpg)
The curse of template proliferationWe want rich, varied layouts. ✓
✗ But too many templates becomes unwieldy and hard to manage.
![Page 39: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/39.jpg)
Turn a big problem into a series of smaller problems
Micro-templating
•Break content into chunks (depending on the particular content)
•Provide microtemplates for chunks
•Build responsive microtemplates that behave well under stress (at different breakpoints, etc)
•Mix and match microtemplates to create varied layouts that work with the actual content to hand
![Page 40: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/40.jpg)
1
2
3
1
2
3
![Page 41: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/41.jpg)
![Page 42: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/42.jpg)
Developers, developers
![Page 43: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/43.jpg)
You don’t have to write codeBut you can
![Page 44: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/44.jpg)
Where are the integration points?• Import scripts • InDesign plugin•Templates & widgets•Custom stylesheets•API •Hybrid app•Coming: webhooks and export
rules
![Page 45: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/45.jpg)
What developer skills are needed?•HTML•CSS• JSON• Javascript
= the “open web platform”
![Page 46: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/46.jpg)
What is the developer UI like?•Trick question! Never write UI for developers!•The only good developer UI is text
files in folders, giving them the freedom to use whatever tools and source control they prefer.
![Page 47: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/47.jpg)
Editorial system
.json
Dropbox
github
Whatevercode editor and source control tools you like
Developer
Designer
Code & config
![Page 48: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/48.jpg)
Very simple integration
Padify
Newsstand
Dropbox
InDesign
Readerapp
![Page 49: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/49.jpg)
API
Not quite so simple integration
Padify
StonewashDrupalCMS
Newsstand
HTML5
Pugpig
Drupaltemplates
InDesign
Dropbox
Rekey
![Page 50: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/50.jpg)
Templated High design
Simple text articlesRegular features
Complex, media-richSpecial features
![Page 51: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/51.jpg)
COPE = Create Once, Publish Everywhere
Remix Once
^
![Page 52: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/52.jpg)
Validation & discovery
Padify DraftHTML5
Manualpost
production
FinishedHTML
Requirements
Customers
Early days
![Page 53: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/53.jpg)
Padify
Requirements
Customers
Validation & discoveryUp and running
![Page 54: Developing a practical HTML5 magazine workflow](https://reader033.fdocuments.in/reader033/viewer/2022050920/549318aeb47959650f8b473b/html5/thumbnails/54.jpg)
•Remix existing resources into HTML5•Usability, interactivity and design
templates to sweeten the transition to responsive design
•Microtemplates for scalable layout variation
•Open web platform for cheap and developer friendly customisation and integration
•Start before you’re ready
Summary