Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer


Published on

"EPUB vs. WEB: A Cautionary Tale" by Tzviya Siegman & Dave Cramer for ebookcraft 2016, presented by BookNet Canada and eBOUND Canada - March 31, 2016

Published in: Technology
  • Be the first to comment

  • Be the first to like this

EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer

  1. 1. EPUB vs WEB:EPUB vs WEB: A Cautionary TaleA Cautionary Tale Tzviya Siegman & Dave CramerTzviya Siegman & Dave Cramer
  2. 2. Since the dawn of time…Since the dawn of time…
  3. 3. ……people have complainedpeople have complained about EPUBabout EPUB
  4. 4. #eprdctn#eprdctn
  5. 5. Duplication (manifest+spine+nav+ncx)Duplication (manifest+spine+nav+ncx) Crazy XML (container.xml, package.opf)Crazy XML (container.xml, package.opf) Non-web stuff (triggers, bindings, switch)Non-web stuff (triggers, bindings, switch) WTF???? (multiple renditions, renditionWTF???? (multiple renditions, rendition mapping, collections, CFI, the indexing spec)mapping, collections, CFI, the indexing spec)
  6. 6. And so people have lookedAnd so people have looked to a savior:to a savior:
  7. 7. Books in BrowsersBooks in Browsers
  8. 8. HistoryHistory • EPUB 3.0 Rec: October, 2011EPUB 3.0 Rec: October, 2011 • W3C eBooks workshop: February 2013W3C eBooks workshop: February 2013 • First EPUB Zero blog post: February 2013First EPUB Zero blog post: February 2013 • First PWP draft: October 2014First PWP draft: October 2014 • EPUB 3.1 kickoff F2F: October 2015EPUB 3.1 kickoff F2F: October 2015 • BFF: 2016BFF: 2016
  9. 9. Acme PublishingAcme Publishing You just know this demo will failYou just know this demo will fail
  10. 10. Technology StackTechnology Stack • HTML for content and accessibilityHTML for content and accessibility (with some help from ARIA)(with some help from ARIA) • Service workers for offline readingService workers for offline reading • JSON-LD to describe publicationsJSON-LD to describe publications and metadataand metadata • Javascript and CSS for reading experienceJavascript and CSS for reading experience • Web application manifest for installabilityWeb application manifest for installability
  11. 11. My book onlineMy book online serverserver service workerservice worker next chapter, please!next chapter, please! c002.htmlc002.html cachecache c002.htmlc002.html oops! offline!oops! offline!
  12. 12. Standards StillStandards Still MatterMatter The goal is interop, and y’all knowThe goal is interop, and y’all know how well that’s gone in epub-landhow well that’s gone in epub-land
  13. 13. Why Books in Browsers?Why Books in Browsers? • The full powerThe full power of the webof the web • discoverability,discoverability, rich snippets…rich snippets… • accessibility withaccessibility with familiar toolsfamiliar tools (aka browser)(aka browser)
  14. 14. Current ProjectsCurrent Projects • EPUB 3.1EPUB 3.1 • BFFBFF • PWPPWP
  15. 15. EPUB 3.1EPUB 3.1 • Simpler, closer to webSimpler, closer to web • HTML without the “X”HTML without the “X” • Death to the NCX!Death to the NCX! • MOAR CSSMOAR CSS • Read the spec and comment!Read the spec and comment!
  16. 16. EPUB 3.1 April Draft SpecEPUB 3.1 April Draft Spec • Changes to spec structure and organization.Changes to spec structure and organization. 77% more readable!77% more readable! • MetadataMetadata • Superseded or deprecated itemsSuperseded or deprecated items • AccessibilityAccessibility • CSSCSS • Scripting and External Resources (including RSScripting and External Resources (including RS object)object)
  17. 17. Spec Structure andSpec Structure and OrganizationOrganization • You complained, we listened!You complained, we listened! • Umbrella spec as landing page, point toUmbrella spec as landing page, point to family of specs with one URL:family of specs with one URL: • Now includes indexNow includes index • Nav definition moved from content docs toNav definition moved from content docs to packagespackages
  18. 18. MetadataMetadata • Allows and encourages external metadataAllows and encourages external metadata such as ONIXsuch as ONIX • Deprecate @refines, instead brings backDeprecate @refines, instead brings back epub2 features like @file-asepub2 features like @file-as • Moving towards limiting metadata inside theMoving towards limiting metadata inside the package by recommending that people pointpackage by recommending that people point to outside resourcesto outside resources • Method for prioritizing metadata (internal vsMethod for prioritizing metadata (internal vs external) via HTTP negotiationexternal) via HTTP negotiation
  19. 19. GoodbyeGoodbye • CFI in contentCFI in content • epub:triggerepub:trigger • epub:switchepub:switch • epub:bindingsepub:bindings • guideguide • NCX moved from superseded to deprecatedNCX moved from superseded to deprecated
  20. 20. Welcome BackWelcome Back • @file-as@file-as • @id-type@id-type
  21. 21. AccessibilityAccessibility • Creating an accessibility module/extensionCreating an accessibility module/extension • Definitely a work in progressDefinitely a work in progress • Focused on accessibility metadataFocused on accessibility metadata • AccessMode, AccessModeSufficient, AccessibilitySummary, andAccessMode, AccessModeSufficient, AccessibilitySummary, and Braille MetadataBraille Metadata • See • Optimized for specific user communitiesOptimized for specific user communities • WCAG+WCAG+
  22. 22. CSSCSS • No more CSS ProfileNo more CSS Profile • Closer alignment with broader webCloser alignment with broader web • Based on 2015 SnapshotBased on 2015 Snapshot • Retains most prefixed properties for CJKRetains most prefixed properties for CJK
  23. 23. CSSCSS は素晴は素晴 らしいですらしいです
  24. 24. ScriptingScripting • navigator.epubReadingSystemnavigator.epubReadingSystem objectobject • uiVisible (true | false)uiVisible (true | false)
  25. 25. External ResourcesExternal Resources • Scientific Data SetsScientific Data Sets
  26. 26. What if EPUB was easier toWhat if EPUB was easier to use on the web?use on the web? Let’s make EPUB and the Web Best Friends Forever!Let’s make EPUB and the Web Best Friends Forever!
  27. 27. BFFBFF • explodingexploding • JSONifyingJSONifying • arguingarguing
  28. 28. Instead of XML, use JSONInstead of XML, use JSON • Allow an “unzipped” orAllow an “unzipped” or “exploded” EPUB“exploded” EPUB • Replace package.opf andReplace package.opf and container.xml with a singlecontainer.xml with a single JSON manifest fileJSON manifest file • No need for META-INF folderNo need for META-INF folder • Everything else stays theEverything else stays the samesame
  29. 29. JSON in a { "name": "nutshell" }JSON in a { "name": "nutshell" }OBJECT: { } KEYS and VALUES: { "key": "value" } MORE THAN ONE KEY: { "key0": "value0", "key1": "value1" } ARRAY [ aka ordered list ]: { "list": [ { "key0": "value0" }, { "key1": “value1" }, { “key2”: “value2” } ] }
  30. 30. Start with NothingStart with Nothing { }{ }
  31. 31. Add Metadata ObjectAdd Metadata Object { "metadata": { } }
  32. 32. Add Required MetadataAdd Required Metadata { "metadata": { "title": "Moby-Dick", "language": "en", "modified": "2016-04- 01T17:00:00Z", "identifier": "978031600000X" } }
  33. 33. Add Some FilesAdd Some Files { "metadata": { "title": "Moby-Dick", "language": "en", "modified”: "2015-09-29T17:00:00Z", "identifier”: "978031600000X" }, "manifest": [ { "href": "c001.html", "type”: "text/html" }, { "href": "c002.html", "type": “text/html" }, { "href": "style.css", "type": "text/css" } ] }
  34. 34. "rendition": [{"rendition": [{ "metadata": {"metadata": { "layout": "reflowable","layout": "reflowable", "accessMode": "textual","accessMode": "textual", "label": "Optimized for smaller screens""label": "Optimized for smaller screens" },}, "links": [{"links": [{ "href": "reflow/html/section001.xhtml","href": "reflow/html/section001.xhtml", "type": "application/xhtml+xml""type": "application/xhtml+xml" }, {}, { "href": "reflow/html/"href": "reflow/html/section002section002.xhtml",.xhtml", "type": "application/xhtml+xml""type": "application/xhtml+xml" }, {}, { "href": "reflow/html/section003.xhtml","href": "reflow/html/section003.xhtml", "type": "application/xhtml+xml""type": "application/xhtml+xml" }],}], "manifest": {"manifest": { "links": [{"links": [{ "href": "reflow/css/reflow.css","href": "reflow/css/reflow.css", "type": "text/css""type": "text/css" }]}] }}
  35. 35. One small step…One small step…
  36. 36. Portable Web PublicationsPortable Web Publications W3C Digital Publishing Interest GroupW3C Digital Publishing Interest Group
  37. 37. ––The PWP White Paper (aka PWPWP)The PWP White Paper (aka PWPWP) ““This document introduces Portable WebThis document introduces Portable Web Publications, a vision for the future of digitalPublications, a vision for the future of digital publishing that is based on a fully nativepublishing that is based on a fully native representation of documents within the Openrepresentation of documents within the Open Web Platform. Portable Web PublicationsWeb Platform. Portable Web Publications achieve full convergence between online andachieve full convergence between online and offline/portable document publishing:offline/portable document publishing: publishers and users won't need to choose onepublishers and users won't need to choose one or the other, but can switch between themor the other, but can switch between them dynamically, at will.”dynamically, at will.”
  38. 38. VisionVision • • link in or out of bookslink in or out of books • bookmarks/annotationsbookmarks/annotations • polyfills/plugins with browser toolspolyfills/plugins with browser tools • use the computing power of your computeruse the computing power of your computer
  39. 39. A Call to ActionA Call to Action Read the damned spec!Read the damned spec!
  40. 40. Things you can doThings you can do • Read the spec! Github, issues, mailing lists…Read the spec! Github, issues, mailing lists… • Standards orgs… IDPF, W3CStandards orgs… IDPF, W3C • Community GroupsCommunity Groups • Bug reporting specs, browsers, readingBug reporting specs, browsers, reading • #eprdctn#eprdctn
  41. 41. Community GroupsCommunity Groups • WICG—Web Incubator Community Group. Anyone withWICG—Web Incubator Community Group. Anyone with a crazy idea gets to make a suggestion.a crazy idea gets to make a suggestion. • Scholarly HTML—an HTML “vernacular” for theScholarly HTML—an HTML “vernacular” for the scholarly web, including restrictions on HTML andscholarly web, including restrictions on HTML and linked datalinked data • Math on the Web/Stem—A community groupMath on the Web/Stem—A community group dedicated to uniting all the math hackersdedicated to uniting all the math hackers •—formal extensions to—formal extensions to Just. Just watch the GitHub repo to see SEO unfold before you!watch the GitHub repo to see SEO unfold before you!
  42. 42. ResourcesResources • EPUB 3.1: 3.1: spec.html IDPF GitHub repo: IDPF GitHub repo: • EPUB 3.1 Revision 3.1 Google DriveEPUB 3.1 Revision 3.1 Google Drive jlaeTVrSDQjlaeTVrSDQ • Portable Web Publications: Web Publications: • W3C Community Groups: Community Groups: • Digital Publishing Interest Group:Digital Publishing Interest Group: • W3C Public email archives/subscriptions:W3C Public email archives/subscriptions: • IDPFmemes:IDPFmemes:
  43. 43. Thanks!Thanks! Tzviya SiegmanTzviya Siegman WileyWiley @TzviyaSiegman@TzviyaSiegman Dave CramerDave Cramer HachetteHachette @dauwhe@dauwhe
  44. 44. Please Grant us Asylum!Please Grant us Asylum! Make Canada Great AgainMake Canada Great Again
  45. 45. <section doc-role="appendix"><section doc-role="appendix">
  46. 46. Hire Iris and India!Hire Iris and India! They’re the best!They’re the best! @epubpupil @indiamos@epubpupil @indiamos
  47. 47. EPUB ZeroEPUB Zero The idea that won’t die, and can’t liveThe idea that won’t die, and can’t live
  48. 48. What? Why? How?What? Why? How? • What? Making ebooks with only existingWhat? Making ebooks with only existing HTML/CSS/JSHTML/CSS/JS • Why? To learn, to play, to try out ideas.Why? To learn, to play, to try out ideas. • How?How?
  49. 49. Layer PWPPWP EPUBEPUB WebWeb user interaction javascript fragment identifiers unknown epub CFI #id archive unknown container specification no standard renditions / collections unknown container.xml + new package(s) n/a user interface browser + JS? reading system browser + JS? offline manifest + SW manifest + SW design CSS additional a11y semantics aria roles content sequence link relations package > spine link relations navigation nav nav nav (optional) content HTML + SVG + MathML + images PWP vs EPUB vs Web