Poetry ebooks have run out of excuses - ebookcraft 2015 - Artie Moffa
On Again; Off Again - Benjamin Young - ebookcraft 2017
-
Upload
booknet-canada -
Category
Technology
-
view
189 -
download
0
Transcript of On Again; Off Again - Benjamin Young - ebookcraft 2017
![Page 1: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/1.jpg)
On again; Off again
![Page 2: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/2.jpg)
bigbluehat.com @bigbluehat
github.com/bigbluehat
worksFor
worksAt
![Page 3: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/3.jpg)
“Books can learn from the Web how to be bounded, but open. The Web can learn from books how to be open, but bounded.”
Hugh McGuire, Medium, April 2016
![Page 4: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/4.jpg)
EPUB
• made out of bits of Web technology – HTML, CSS, JavaScript
• doesn't work in a browser – deliberately...maybe – packaged in a zip file
offline “only”
![Page 5: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/5.jpg)
Web Pages, Apps, and Sites
• not exactly books, per se • assumes a network connection • "offline" is considered an error
online “only”
![Page 6: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/6.jpg)
By our powers combined?
![Page 7: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/7.jpg)
Offline First
"Movement" kicked off in the fall of 2013 • Say Hello to Offline First • Designing Offline-First Web Apps
Huge list of awesome stuff: • Everything you need to know to create offline-first web apps
Progressive Web Apps + Offline Storage & Caching
![Page 8: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/8.jpg)
Reasons
• ignoring the rest of the world is shameful (at best)
• ignoring our own modalities during travel is naïve
• ignoring our dependence on power and connection is dangerous
to care
![Page 9: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/9.jpg)
Some hope.
![Page 10: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/10.jpg)
![Page 11: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/11.jpg)
![Page 12: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/12.jpg)
The Cloud is a lie. The Cloud is a lie. The Cloud is a lie.
![Page 13: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/13.jpg)
The Tech
![Page 14: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/14.jpg)
Web App Manifest • metadata about a Web app • includes useful content for "installing" (via a browser) • most useful (currently) on Mobile • ManifoldJS packages Web apps as standalone desktop or mobile apps { "name": "Donate App", "description": "This app helps you donate to worthy causes.", "icons": [ { "src": "images/icon.png", "sizes": "192x192“ } ] }
manifest.json
![Page 15: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/15.jpg)
Web Storage • defines simple key/value storage • sessionStorage - top-level browsing context scoped storage
– handles data "leakage" across multiple tabs / windows • localStorage - origin (domain) scoped storage
<div id="count">an untold number of</div> <script> if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById('count').textContent = localStorage.pageLoadCount; </script>
![Page 16: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/16.jpg)
IndexedDB
“[Web Storage] does not provide in-order retrieval of keys, efficient searching over values, or storage of duplicate values for a key.”
var db, request = indexedDB.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. db = request.result; var store = db.createObjectStore("books", {keyPath: "isbn10"}); var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data. store.put({title: "Weaving the Web", author: "Tim Beners-Lee", isbn10: "006251587X"}); }; request.onsuccess = function() { db = request.result; };
![Page 17: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/17.jpg)
AppCache CACHE MANIFEST # v1 2011-08-14 # This is another comment index.html cache.html style.css image1.png # Use from network if available NETWORK: network.html # Fallback content FALLBACK: / fallback.html
deprecated…but interesting.
![Page 18: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/18.jpg)
Service Workers
“Web Applications traditionally assume that the network is reachable. ...This places web content at a disadvantage
versus other technology stacks.
The service worker is designed first to redress this balance by providing a Web Worker context, which can be started by a
runtime when navigations are about to occur.”
![Page 19: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/19.jpg)
Service Workers
navigator.serviceWorker.register("/sw.js").then(registration => { console.log("success!"); if (registration.installing) { registration.installing.postMessage("Howdy from your installing page."); } }, err => { console.error("Installing the worker failed!", err); });
code
![Page 20: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/20.jpg)
File API
“defines an API to navigate file system hierarchies, and defines a means by which a user agent may expose
sandboxed sections of a user's local filesystem to web applications”
…which could be an offline Web app in the future…
![Page 21: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/21.jpg)
Packaging
![Page 22: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/22.jpg)
ZIP
• Proprietary, but pervasive • Abundant tooling, but widely varied in use • Contents can be *anything*, so unpacking is scary • Not (read) stream-able (last I checked) • No intrinsic internal referencing system
![Page 23: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/23.jpg)
Packaging on the Web • based on MIME
– what email is encoded in • Web <form>’s with file attachments use something similar • Streamable!! • Internally (and externally) referenceable components • Content Index (for massive documents)
• Latest iteration is back in development & discussion – https://github.com/dimich-g/webpackage
aka Web Packaging
![Page 24: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/24.jpg)
Web Packaging
Content-Type: application/package Content-Location: http://example.org/examplePack.pack Date: Wed, 15 Nov 2016 06:25:24 GMT Expires: Thu, 01 Jan 2017 16:00:00 GMT Link: </index.html>; rel=describedby --j38n02qryf9n0eqny8cq0 Content-Location: /index.html Content-Type: text/html <body> Hello World! <img src="images/world.png"></body> --j38n02qryf9n0eqny8cq0 Content-Location: /images/world.png Content-Type: image/png Transfer-Encoding: binary
example
![Page 25: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/25.jpg)
Web Packaging
• a couple of web pages with resources in a package – sound like an ebook?
• a web page with a resources from the other origin • “encyclopedia in a file” via content index documents • Signed packages
– “The signed package ensures the verification of the origin even if the package is stored in a local file or obtained via other insecure ways like HTTP, or hosted on another origin's server.”
Use Cases
![Page 26: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/26.jpg)
Portable Web Publications EPUB + Web = PWP
![Page 27: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/27.jpg)
Web Publication Use Cases
• Web Publication – Readers Needs – Publishers’ and Authors’ Needs
• Portable Web Publication (extends the above) – Distribution and Iteration – Archiving – Integrity and Authenticity
• Escalating Trust – Access to unique device capabilities: camera, mic, etc.
![Page 28: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/28.jpg)
Web Publication
• a collection of one or more constituent resources, organized together in a uniquely identifiable grouping that may be presented using standard Open Web Platform technologies – Not just a collection of links – Publishing involves obtaining & organizing (“manifesting”) the constituents
• Must provide ordering • May be packaged (becomes a Portable Web Publication) • Must be available offline • Contains it’s own metadata (as the publication is a Thing in itself)
![Page 29: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/29.jpg)
Pieces of a Web Publication
• Online/Offline • Addressing and Identification • Web Publication Manifests • Metadata Discovery • Web Publication APIs
– Document Collection Interface and API – Publication Object Model and API
• Styling and Layout, Pagination • Presentation Control and Personalization
all very in progress
![Page 30: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/30.jpg)
![Page 31: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/31.jpg)
![Page 32: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/32.jpg)
![Page 33: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/33.jpg)
Portable Web Publications
• Packaging Formats – More than “just” offline—portable – “We expect that packaging will not be tightly coupled to
the architecture of web publications, so that different packaging formats can be used for different purposes.”
• Security Models – “must incorporate a security model that defines rules for
both the online and portable states”
![Page 34: On Again; Off Again - Benjamin Young - ebookcraft 2017](https://reader033.fdocuments.us/reader033/viewer/2022052705/58e4a46a1a28aba3458b68af/html5/thumbnails/34.jpg)
Thanks.