2016/EPUBSummit-2016/index.html

<!DOCTYPE html>
<html prefix="talk: http://w3c.github.io/dpub/idpf-digital-book-2015/index.html ore: http://www.openarchives.org/ore/terms/" lang="en">
  <head about="talk:">
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title property="dc:title">Portable Web Publications</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="ore:describes" resource="talk:#talk">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=792, user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <script src="js/hyphenate.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/styles/style.min.css">
    <!-- These styles should be adapted to the details on where and what ribbon should be used, and how large the copyright is -->
    <style type="text/css">
      /*.slide:after {
        padding: 60px 0 0 !important;
        height: 150px ;
        background: url(css/images/ribbon_w3c.svg) no-repeat ;
      }*/
      .titlepage p.copyright {
        left: 10em;
      }
      .slidequote {
          font-size:70%;
          margin-left:2em;
          margin-right:2em;
          border: thin solid;
          padding-left:1.5em;
          padding-right: 1em;
          border-radius:5px;
          box-shadow: 7px 7px 5px #888;
      }
      </style>
  </head>

  <body class="list hyphenate" about="talk:#talk" prefix="bibo: http://purl.org/ontology/bibo/ event: http://purl.org/NET/c4dm/event.owl#" typeof="cc:Work bibo:Slideshow">

    <header class="caption">
      <h1 property="dc:title" rel="dc:subject" resource="http://id.loc.gov/authorities/subjects/sh85042368#concept">Portable Web Publications</h1>
      <h2>
        <span rel="bibo:authorList" inlist="">
          <span resource="http://www.ivan-herman.net/foaf#me" typeof="foaf:Person"> <span property="foaf:name">Ivan Herman</span>, <span property="rdfs:seeAlso" resource="http://orcid.org/0000-0003-0782-2704">W3C</span></span>
        </span>
      </h2>
      <h3 rel="bibo:presentedAt">
        <span typeof="event:Event bibo:Conference">
          <span property="dc:title"><a href="http://edrlab.org/edrlab/epub-summit/epub-summit-program/">EPUB Summit</a></span>, <span property="event:place">Bordeaux, France</span>
        </span>
      </h3>
      <h3 property="dc:date">2016-04-07</h3>
      <p class="copyright">
        <a href="http://creativecommons.org/licenses/by-nd/4.0/"><img class="plain" alt="Creative Commons License" src="figures/80x15.png"></a>&nbsp;
        This work is licensed under a <a rel="cc:license" href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons Attribution 4.0 License</a>,
        with attribution to <a rel="cc:attributionURL" href="http://www.w3.org" property="cc:attributionName">W3C</a></p>
      <p class="copyright">Copyright <sup>©</sup>2016 W3C<sup>®</sup> (MIT, ERCIM, Keio, Beihang)</p>
    </header>

    <section class="slide titlepage"><div>
      <h2 class="donthyphenate">Portable Web Publications</h2>
      <h3>Ivan Herman, W3C </h3>
      <h4><a href="http://edrlab.org/edrlab/epub-summit/epub-summit-program/">EPUB Summit</a></h4>
      <h4>2016-04-07</h4>

      <p class="copyright">This work is licensed under a <a target="_blank" href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons Attribution 4.0 License</a>, with attribution to <a target="_blank" href="http://www.w3.org">W3C</a>.<br />
        Copyright <sup>©</sup>2016&nbsp;W3C<sup>®</sup> (MIT, ERCIM, Keio, Beihang)</p>
    </div></section>

    <section class="slide"><div>
      <h2>These Slides are Available on the Web </h2>
      <p>See:
        <span style="font-size:90%"><a href="http://www.w3.org/2016/Talks/EPUBSummit-IH/"><code>http://www.w3.org/2016/Talks/EPUBSummit-IH/</code></a></span></p>
      <p>(Slides are in HTML)</p>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">About W3C: “Leading the Web to its Full Potential”</h2>
      <figure class="right">
        <img src="figures/timbl.jpg" alt="Photo of Tim Berners-Lee"/>
        <figcaption class="credit">LeFevre communications, 2001</figcaption>
      </figure>
      <ul>
        <li>Founded in 1994, and directed by Tim Berners-Lee, the Inventor of the Web</li>
        <li>Member organization with cca. 420 members</li>
        <li>Cca. 75 staff bound to “hosts” in the USA (MIT), China (Beihang University), Japan (Keio University), and France (ERCIM)</li>
        <li>Focuses on Web ecosystem: users, developers, browsers, as well as specific industry requirements brought by industry segments</li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Digital Publishing Interest Group (DPUB IG) Origins</h2>
      <ul>
          <li>W3C and IDPF organized a series of workshops in 2012 to create a missing synergy among the Web and Publishing communities</li>
          <li>The W3C Digital Publishing Interest Group was set up in May 2013</li>
          <li>DPUB IG has weekly teleconferences and bi-annual face to face meetings</li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate"> DPUB IG Mission</h2>
      <ul>
        <li>Experts familiar with the ins and outs of digital publishing and its associated industry groups identify issues that are not addressed by the Open Web Platform</li>
        <li>Goal is to raise issues to W3C working groups who can update or develop specs based on the needs of the publishing community.</li>
        <li>Work on a future vision of Digital Publishing called “Portable Web Publications (PWP)”</li>
      </ul>
      <p>See our <a target="_blank" href="https://www.w3.org/dpub/IG/wiki/Main_Page">website</a> for more detail.</p>
    </div></section>

    <section class="slide shout cover" id="results"><div>
      <img src="figures/achievements.png">
      <h3 class="donthyphenate">Some results of the past two years</h3>
      <style type="text/css">
        #results h3 {
          color: red;
          margin-top: 2.4em;
        }
      </style>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Layout and styling</h2>
      <figure class="right">
        <img src="figures/latinreq.png" alt="Screen dump of the latinreq document">
      </figure>
      <ul>
        <li>An evolving document: <a href="http://w3c.github.io/dpub-pagination/">“Requirements for Latin Text Layout and Pagination”</a></li>
        <li>Describes issues like hyphenation, spreads and bleeds, drop caps, pagination, etc.</li>
        <li>Has greatly influenced some current CSS Work, e.g. <a href="http://www.w3.org/TR/css-inline-3/">“CSS Inline Layout Module Level 3”</a> (handling initial letters, dropcaps), or <a href="http://www.w3.org/TR/css-gcpm-3/">“CSS Generated Content for Paged Media Module”</a> (handling running heads and footers)</li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Priorities for CSS</h2>
      <figure class="left">
        <img src="figures/css_priorities.png" alt="Screen dumps of the CSS Priorities' document">
      </figure>
      <ul>
        <li>Another evolving document: <a href="http://w3c.github.io/dpub-pagination/">“Priorities for CSS from the DPUB IG”</a></li>
        <li>Provides a list of the top CSS priorities, and their current availability </li>
        <li>Also influences the work of the CSS Working Group</li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Content and markup</h2>
      <ul>
        <li>Goal: identify the semantics of the HTML elements
          <ul><li>“abstract”, “indexed term”, “footnote”, "chapter", …</li></ul>
        </li>
        <li>Express structural information (“where can that element be used”)</li>
        <li>Do it in a forward looking way in terms of W3C standards.
          <ul>
            <li>i.e., move away from <code>epub:type</code> used in EPUB&nbsp;3</li>
            <li>the resulting HTML should be valid</li>
          </ul>
        </li>
        <li>These terms may be useful for the Web at large!
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Content and markup: DPUB ARIA module</h2>
      <figure class="right larger">
        <img src="figures/dpub-aria.png" alt="Screen dump of the DPUB ARIA document">
      </figure>
      <ul>
        <li>A <a href="http://www.w3.org/TR/dpub-aria-1.0/">“Digital Publishing WAI-ARIA module”</a> is in development
          <ul><li>i.e., publishing terms become part of ARIA</li></ul>
        </li>
        <li>A separate <a href='http://www.w3.org/TR/dpub-aam-1.0/'>document</a> describes the mapping on the Accessibility API-s</li>
      </ul>
      <pre>&lt;section <mark>role="doc-appendix"</mark>&gt;
  &lt;h1>Appendix A. Historical Timeline&lt;/h1&gt;
   …
&lt;/section&gt;</pre>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Annotations</h2>
      <div class="flexright">
        <figure class="larger" >
          <img src="figures/annotation.jpg" alt="Annotatated medieval manuscript" />
          </figure>
          <ul>
            <li>The group published an <a target="_blank"  href ="https://www.w3.org/TR/dpub-annotation-uc/">“Annotation Use Cases”</a> document</li>
            <li>Activity and work has shifted to the <a target="_blank"  href="http://www.w3.org/annotation/">Web Annotations Working Group</a>, which develops:
              <ul>
                <li>a standard <i>data model</i> and <i>serialization in JSON</i> to describe and mantain annotations (for all forms of Web Documents)</li>
                <li>a <i>protocol</i> to exchange annotations between an annotation client and a server</li>
               </ul>
            </li>
          </ul>
        </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Note on DPUB Accessibility</h2>
      <div class="flexleft">
          <figure>
            <img src="figures/acc_note.png" alt="Screen dump of the Accessibility Note" />
          </figure>
          <ul>
            <li>How do W3C guidelines (e.g., WCAG, UAAG) apply to Digital Publishing</li>
            <li>Identifies areas that are not yet addressed, e.g.:
                <ul>
                    <li>authoring packaged documents</li>
                    <li>pagination</li>
                    <li>phonetic spelling of jargon terms</li>
                </ul>
            </li>
            <li>Lists future work, e.g., issues around notes, mathematics,…</li>
          </ul>
        </div>
    </div></section>


    <!-- ========================================================================= -->

    <section class="slide shout cover"><div id="major">
      <img src="covers/future.jpg">
      <h3 class="donthyphenate">Major work coming up: Portable Web Publications (PWP)<br><span style="font-size:70%">née EPUB+WEB</span></h3>
      <style type="text/css">
        #major h3 {
          color: blue;
        }
      </style>
   </div></section>

    <section class="slide shout"><div>
        <h3>The main message:</h3>
    </div></section>

    <section class="slide shout cover"><div id="publweb">
      <img src="covers/blackboard.jpg">
      <h2>Digital Publishing <br/>=<br/> Web Publishing!</h2>
      <style type="text/css">
      #publweb h2 {
        color: snow;
        font-family: blackboard;
        line-height: 1em;
        text-align: center;
        -webkit-transform: translateY(-25%);
            -ms-transform: translateY(-25%);
                transform: translateY(-25%);
        -webkit-transform: translateX(-10%);
            -ms-transform: translateX(-10%);
                transform: translateX(-10%);
      }
      </style>
    </div></section>

    <section class="slide shout"><div>
        <h3>put it another way…</h3>
    </div></section>

    <section class="slide shout cover"><div id="webpubl">
      <img src="covers/blackboard.jpg">
      <h2>Web Publishing <br/>=<br/> Digital Publishing!</h2>
      <style type="text/css">
      #webpubl h2 {
        color: snow;
        font-family: blackboard;
        line-height: 1em;
        text-align: center;
        -webkit-transform: translateY(-25%);
            -ms-transform: translateY(-25%);
                transform: translateY(-25%);
        -webkit-transform: translateX(-10%);
            -ms-transform: translateX(-10%);
                transform: translateX(-10%);
      }
      </style>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">What does this mean?</h2>
      <div class="flexleft">
          <figure class="larger">
            <img src="figures/pwp.svg" alt="Portable Web Publication at a glance"/>
          </figure>
      <p><i>Separation between publishing “online”, as Web sites, and offline and/or packaged should be diminished to zero</i></p>
      </div>

      <ul><li>This means:
            <ul>
            <li>publication content on the Web can be loaded into a browser or a specialized reader, whatever the user prefers</li>
            <li>a publication on a local disc can be pushed onto the Web and used without any change</li>
            <li>content are authored regardless of where they are used</li>
            <li>these are done without any user interaction, possibly automatically</li>
            </ul>
        </li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">What does this mean?</h2>
      <figure>
        <img src="figures/pwp.svg" alt="Portable Web Publication at a glance">
      </figure>
    </div></section>

    <section class="slide shout cover"><div>
      <img src="covers/why.jpg">
      <!-- <h3>Why Bother?</h3> -->
      <p class="credit">ibta arabia</p>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">For example: book in a browser</h2>
      <div class="flexright">
          <figure>
            <img src="figures/joseph-web.png" alt="Joseph Reagle's book as a web page">
            <figcaption class="credit"><a target="_blank" href="http://reagle.org/joseph/2010/gfc/chapter-4.html">Extract of Joseph Reagle’s Book</a></figcaption>
          </figure>
          <ul>
            <li>On a desktop I may want to read a book just like a Web page:
              <ul>
                <li>easily follow a link “out” of the book</li>
                <li>create bookmarks to “within” a page in a book</li>
                <li>use useful plugins and tools that my browser may have</li>
                <li>create annotations</li>
                <li>sometimes I may need the computing power of my desk-top for, e.g., interactive 3D content</li>
              </ul>
            </li>
          </ul>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">For example: book in a browser</h2>
      <div class="flexleft">
          <figure>
            <img src="figures/joseph-bluefire.png" alt="Joseph Reagle's book as an ebook in reader">
            <figcaption class="credit"><a target="_blank" href="http://reagle.org/joseph/2010/gfc/chapter-4.html">Extract of Joseph Reagle’s Book</a> as ePUB</figcaption>
          </figure>
          <ul>
            <li>But, at other times, I may also want to use a dedicated reader device or software to read the book on the beach…</li>
            <li>All these on <i>the same</i> book (not conversions from one format to the other)!</li>
          </ul>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">For example: I may not be online…</h2>
      <div class="flexright">
          <figure class="larger">
            <img src="figures/commute.jpg" alt="Person sitting in a station with a mobile in hand">
            <figcaption class="credit"><a target="_blank" href="http://j.mp/1t7BxJN">Bryan Ong</a>, Flickr</figcaption>
          </figure>
          <ul>
            <li>I may find an article on the Web that I want to review, annotate, etc., while commuting home on a train</li>
            <li>I want the results of the annotations to be back online, when I am back on the Internet</li>
            <ul>
              <li>note: some browsers have an “archiving” possibility, but they are not interoperable</li>
            </ul>
          </ul>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">For example: scholarly publishing</h2>
      <div class="flexleft">
          <figure>
            <img src="figures/f1000.png" alt="Screen dump of an article on F1000">
            <figcaption class="credit">Screen dump of an article <a target="_blank" href="http://bit.ly/1wFcfWC">“Sub-strains of Drosophila Canton-S…”</a> on F1000</figcaption>
          </figure>
          <ul>
            <li>Paper may be published on-line, but people may want to download it for offline use</li>
            <li>The format of the paper should be adaptable to <a href="#"></a> reading environment
              <ul><li>no two column, fixed layout file that cannot be handled on an my iPad…</li></ul>
            </li>
            <li>The “paper” may also contain video, audio, data, programs…
              <ul><li>scholarly publishing is not text only any more!</li></ul>
            </li>
          </ul>
      </div>
    </section>

    <section class="slide"><div>
      <h2 class="donthyphenate">For example: educational publications</h2>
      <figure class="right larger">
        <img src="figures/auditorium.jpg" alt="University hall with students, most of them with a tablet">
        <figcaption class="credit"><a target="_blank" href="http://j.mp/1t7Gpie">Merrill College of Journalism</a>, Flickr</figcaption>
      </figure>
      <ul>
        <li>What is an educational publication?
            <ul>
              <li><i>a book</i> that requires offline access?</li>
              <li><i>a packaged application</i> with built-in interactive tests, animated examples?</li>
              <li><i>a Web client</i> reaching out to Web services for assessing test results, to encyclopedia,&nbsp;…?</li>
              <li><i>an interactive data container</i> storing various data for, e.g., demonstrations?</li>
            </ul>
        </li>
        <li>The borderline between a “book” and a “(Web) Application” is becoming blurred…</li>
      </ul>
    </div></section>

    <section class="slide shout cover" id="synergy"><div>
      <img src="covers/synergy.jpg">
      <h3  class="donthyphenate">Synergy effects of convergence</h3>
      <style type="text/css">
        #synergy h3 {
          margin-top: 3em;
          background: hsla(181, 9%, 78%, 0.5);
          padding-right: 0em;
          padding-left: 0em;
          color: hsla(240,50%,30%,1);
        }
      </style>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Advantage for the publishers‘ community </h2>
      <div class="flexleft ">
          <figure class="larger">
            <img src="figures/zeldman.jpg" alt="Photo of a bookshelf with lots of technical books">
            <figcaption class="credit"><a target="_blank" href="https://www.flickr.com/photos/zeldman/">Jeffrey Zeldman</a>, Flickr</figcaption>
          </figure>
          <ul>
            <li>Publishers want to do what <em>they</em> know better: produce, edit, curate, etc, content</li>
            <li>Publishers are <i>not</i> technology companies, nor do they intend to be; they should rely on the vibrant Web developers’ community!</li>
          </ul>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Advantage for the Web community</h2>
      <div class="flexright">
          <figure>
            <img src="figures/euclid.png" alt="image of a medieval manuscript">
            <figcaption class="credit"><a href="http://www.math.ubc.ca/~cass/Euclid/byrne.html">Oliver Byrne's edition of Euclid</a>, University of British Columbia</figcaption>
          </figure>
          <ul>
              <li>Publishers have experience in:
                  <ul>
                        <li>ergonomics, typography, aesthetics…</li>
                        <li>publishing long texts, with the right readability and structure</li>
                  </ul>
              </li>
              <li>Workflow for producing complex content</li>
          </ul>
      </div>
    </div></section>


    <section class="slide shout cover" id="road_tech"><div>
      <img src="covers/road.jpg">
      <h3 class="donthyphenate"> How do we get there? (Technically)</h3>
      <style type="text/css">
        #road_tech h3 {
          color:red;
          background-color: hsla(181, 9%, 78%, 0.5);
          padding-bottom: 0.1em;
        }
      </style>
      <p class="credit">Moyan Brenn, Flickr</p>
    </div></section>

    <section class="slide shout cover" id="warning"><div>
      <img src="covers/warning.jpg">
      <h3 class="donthyphenate">Warning: everything I say is subject to change!</h3>
      <style type="text/css">
      #warning h3 {
        margin-top: 0.5em;
        color: hsla(0,100%,60%,1.0);
      }
      </style>
      <p class="credit">Catherine Kolodziej, Flickr</p>
    </div></section>

    <section class="slide shout cover" id="terminology"><div>
      <img src="covers/terminology.jpg">
      <h3 class="donthyphenate">Technical Challenge: Fundamental Terminology</h3>
      <style type="text/css">
        #terminology h3 {
          color: yellow;
          font-size: 2.2em;
        }
      </style>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">What is a Portable Web Publication?</h2>
      <ul>
        <li>A <em>collection of Web resources considered as one unit</em>
          <ul><li>this means there is a Web address for the <i>collection</i> (as opposed to a single constituent)</li></ul>
        </li>
       <li>The <em>user agent can render its “essential content” by relying  on the Web Resources within the same Web Publication</em>
          <ul><li>this ensures that it can also be considered offline without the danger of dangling links</li></ul>
       </li>
       <li>The <i>same</i> PWP can be offline, online, archived or not archived…</li>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">What kinds of documents are we talking about?</h2>
      <ul>
        <li>A journal or magazine article, including the relevant CSS files and images</li>
        <li>An educational article, including the JavaScript to do interactive exercises</li>
        <li>A novel or a poem on the Web, including the necessary fonts, CSS files, etc., to provide the required aesthetics</li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">What kinds of documents are we <i>not</i> talking about?</h2>
      <ul>
        <li>A Web mail application</li>
        <li>A social Web site like Facebook, VK, Renren, or Twitter</li>
        <li>A dynamic page that depends on, say, a Javascript library hosted somewhere on the cloud</li>
      </ul>
    </div></section>

    <section class="slide"><div>
        <h2 class="donthyphenate">But there are of course differences</h2>
        <ul>
            <li>Although the we talk about the <i>same</i> PWP, whether offline or online, but they are obviously not 100% identical</li>
            <li>We refer to different <em>states</em> of the same PWP</li>
        </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Envisioned “states” of a Portable Web Publication</h2>
      <table>
        <tr>
          <th class="headerleft" style="width: 20%; border:none"></th>
          <th style="width:40%" class="headertop">Online</th>
          <th style="border-left: 1px solid #CCC; border-right: 1px solid #CCC; width:40%" class="headertop">Offline</th>
        </tr>
        <tr>
          <th class="headerleft donthyphenate">Packed</th>
          <td>PWP as one archive on a server</td>
          <td>PWP as one archive on a local disc</td>
        </tr>
        <tr>
          <th class="headerleft donthyphenate">Unpacked</th>
          <td>PWP spread over several files on a server</td>
          <td>PWP spread over several files on a local disc</td>
        </tr>
      </table>
    </div></section>

    <section class="slide shout cover" id="arch"><div>
      <img src="covers/architecture.jpg">
      <h3 class="donthyphenate">Technical challenge: an overall architecture to handle PWP-s</h3>
      <style type="text/css">
        #arch h3 {
          color: hsla(240, 69%, 50%, 1);
          font-size: 2.2em;
        }
      </style>
    </div></section>

    <section class="slide">
        <div>
            <h2 class="donthyphenate">Envisioned architecture: <br/>a “PWP Processor”</h2>
            <ul>
                <li>A conceptual, client-side processor that “hides” the PWP state differences from the rendering engine
                </li>
                <li>The “main” rendering engine operates <i>as if</i> it was connected to the Web:
                    <ul>
                        <li>accessing resources through HTTP(S)</li>
                        <li>all resources are “unpacked”</li>
                    </ul>
                </li>
                <li>The PWP Processor should hide the state differences, possibly cache resources, etc.</li>
            </ul>
        </div>
    </section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Envisioned architecture: <br/>unpacked state</h2>
      <figure>
        <img class="plain" src="figures/Workers-basic.svg" alt="Document consumed through the Web in a traditional way" width="99%">
      </figure>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Envisioned architecture: <br/>cached state</h2>
      <figure>
        <img class="plain" src="figures/Workers-cache.svg" alt="Document consumed through a Service Worker, possibly cached" width="99%">
      </figure>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Envisioned architecture: <br/>packed state</h2>
      <figure>
        <img class="plain" src="figures/Workers-package.svg" alt="Document consumed through a Service Worker, possibly unpacked" width="99%">
      </figure>
    </div></section>

    <section class="slide stamped"><div>
      <h2 class="donthyphenate">Envisioned architecture: <br/>packed state</h2>
      <figure>
        <img class="plain" src="figures/Workers-package.svg" alt="Document consumed through a Service Worker, possibly unpacked" width="99%">
      </figure>
       <p class="stamp" style="left:20%">Draft…</p>
    </div></section>

    <section class="slide shout"><div>
      <h3>Is this approach at all feasible?</h3>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Advances in modern browsers</h2>
      <ul>
        <li>A browser has a hidden, <i>truly parallel</i> engine (a.k.a. “Service Worker”) attached to it</li>
        <li>That engine “catches” all calls out to the Web, and:
          <ul>
            <li>either lets it through and the original request happens;</li>
            <li>or performs local processing (e.g., gets content from a cache) and returns that content instead</li>
          </ul>
        </li>
        <li>The “main” rendering engine is unaware of the underlying proxy process
        <ul><li>it operates as if it was connected to the Web in a traditional way</li></ul>
        </li>
      </ul>
    </div></section>

    <section class="slide stamped"><div>
      <h2 class="donthyphenate">Advances in modern browsers</h2>
      <ul>
        <li>A browser has a hidden, <i>truly parallel</i> engine (a.k.a. “Service Worker”) attached to it</li>
        <li>That engine “catches” all calls out to the Web, and:
          <ul>
            <li>either lets it through and the original request happens;</li>
            <li>or performs local processing (e.g., gets content from a cache) and returns that content instead</li>
          </ul>
        </li>
        <li>The “main” rendering engine is unaware of the underlying proxy process
        <ul><li>it operates as if it was connected to the Web in a traditional way</li></ul>
        </li>
      </ul>
      <p class="stamp small">Work in progress</p>
    </div></section>

    <section class="slide shout"><div>
      <h3>A PWP Processor could be implemented in such modern browsers</h3>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Not only a wild idea…</h2>
      <ul>
        <li>Some prior art exists (e.g., experimentation by the Readium Consortium)</li>
        <li>An early mock-up of the current architecture has also been implemented</li>
      </ul>
    </div></section>

    <section class="slide shout cover" id="ident"><div>
      <img src="covers/library.jpg">
      <h3 class="donthyphenate">Technical challenge: addressing, identification</h3>
      <style type="text/css">
        #ident h3 {
          color:snow;
          margin-top: 0.8em;
        }
      </style>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Is it "addressing" or is it "identification"?</h2>
      <ul>
        <li><em>These two “roles” are different</em></li>
        <li>The usual situation:
          <ul>
              <li>some form of a URI is used to <em>(uniquely) identify</em> a resource</li>
              <li>an HTTP(S) URL is used to <em>address</em> (or “locate”) a resource on the Web</li>
          </ul>
        </li>
        <li>In many cases the two roles coincide, but not always
            <ul>
                <li>e.g., for a digital book:
                    <ul>
                      <li><code>URN:ISBN:1-56592-521-1</code> identifies the publication</li>
                      <li><code>http://www.ex.org/ex.epub</code> addresses a particular copy</li>
                    </ul>
                </li>
            </ul>
        </li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Is it "addressing" or is it "identification"?</h2>
      <ul>

          <li>Identification issues are handled by a number of other organizations (<a href="http://www.doi.org">DOI foundation</a>, <a href="https://www.isbn-international.org/">International ISBN Agency</a>, etc.)
          </li>
          <li>The work on PWP has to concentrate on locators (i.e., addressing)
          </li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Three layers of addressing</h2>
          <ol>
              <li>Locator for the PWP itself: <br /><code>http://www.ex.org/MyPWP/</code>
              </li>
              <li>Locating a resource <i>within</i> a PWP:<br /><code>http://www.ex.org/MyPWP/Chapter1.html</code>
              </li>
              <li>Locating a target within a resource: <br/><code>http://www.ex.org/MyPWP/Chapter1.html#section1</code>
              </li>
          </ol>
          <ul>
              <li>#3, i.e., “fragments” is defined for specific media types
              </li>
              <li>#2 <i>should</i> be just like any other resources on the Web, to allow for a smooth state transition
              </li>
          </ul>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Locating the different PWP “states”</h2>
      <ul>
          <li>There are, in practice, different locators
              <ul>
                  <li>to the unpacked version on the Web:<br /> <code>http://www.ex.org/MyPWP/dir/</code></li>
                  <li>to the package:<br/> <code>http://www.ex.org/MyPWP.pwp</code>
                  </li>
              </ul>
          </li>
          <li>Which locators should one use? How would intra-resource addressing happen?
              <ul>
                  <li>i.e., how should <code>chapter1</code> refer to <code>chapter2</code>?</li>
              </ul>

          </li>
      </ul>
    </div></section>

    <section class="slide"><div>
        <h2 class="donthyphenate">Canonical locators</h2>
        <ul>
            <li>A PWP must have a <em>Canonical Locator</em>
                <ul><li>a state agnostic locator: <code>http://www.ex.org/MyPWP</code></li></ul>
            </li>
            <li>A published PWP <em>must</em> provide metadata that includes all the various locators</b></li>
            <li>A PWP Processor <em>must</em> have access to the full metadata</li>
            <li>A resource within a PWP (and, in general, resources in general) should use the canonical locator only for internal cross-references (or use relative URL-s)
            </li>
        </ul>
    </div></section>

    <section class="slide">
        <div>
            <h2 class="donthyphenate">The PWP Processor can take care of the rest…</h2>
            <ul>
                <li>The processor has an access to all states and their locators</li>
                <li>It can, if needed, convert among URI requests coming from the renderer</li>
                <li>Remember:</li>
            </ul>

            <ul class="slidequote">
                <li>A conceptual, client-side processor that “hides” the PWP state differences from the rendering engine
                </li>
                <li>The “main” rendering engine operates <i>as if</i> it was connected to the Web:
                    <ul>
                        <li>accessing resources through HTTP(S)</li>
                        <li>all resources are “unpacked”</li>
                    </ul>
                </li>
                <li>The PWP Processor should hide the state differences, possibly cache resources, etc.</li>
            </ul>
        </div>
    </section>

    <section class="slide"><div>
        <h2 class="donthyphenate">Manifests</h2>
        <ul>
            <li>Note the crucial importance of the metadata</li>
            <li>Some sort of a “manifest” format should be defined to hold (among others) this metadata</li>
            <li>The manifest will be used for other, more traditional reasons, too:
                <ul>
                    <li>“traditional” metadata like author(s), right expressions, publication dates,…</li>
                    <li><em>identifiers</em></li>
                    <li>correct reading order for the publication content</li>
                    <li>etc.</li>
                </ul>
            </li>
        </ul>
    </div></section>

    <section class="slide shout cover" id="presentation"><div>
      <img src="covers/choice.jpg">
      <h3 class="donthyphenate">Technical challenge: presentation control <br>(a.k.a. Personalization) </h3>
      <style type="text/css">
        #presentation h3 {
          color: hsla(240, 69%, 50%, 1);
          font-size: 2.4em;
        }
      </style>
    </div></section>

    <section class="slide"><div>
      <ul class="notitle">
        <li>What is the level of user control of the presentation? </li>
        <li>The Web and eBook traditions are vastly different:
          <ul>
            <li>in a browser, the Web designer is in full control
              <ul>
                <li>CSS alternate style sheets or user style sheets are hardly in use</li>
                <li>some user interface aspects can be controlled but only for the browser as a whole</li>
              </ul>
            </li>
            <li>in an eBook reader, there is more user control
              <ul>
                <li>foreground/background color</li>
                <li>choice of fonts</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>There is a need to reconcile these traditions</li>
      </ul>
    </div></section>

    <section class="slide shout cover" id="road_pract"><div>
      <img src="covers/road.jpg">
      <h3 class="donthyphenate"> How do we get there? (Practically)</h3>
      <style type="text/css">
        #road_pract h3 {
          color:hsla(240, 69%, 50%, 1);
          padding-bottom: 0.1em;
        }
      </style>
      <p class="credit">Moyan Brenn, Flickr</p>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">IDPF, W3C, and others</h2>
      <ul>
        <li>On long term, some PWP related standard-track specification work may have to be done
          <ul><li>this requires a consensus and agreement of different communities</li></ul>
        </li>
        <li>IDPF and W3C (and maybe others?) may create the necessary groups, eventually</li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">DPUB IG and Portable Web Publications</h2>
      <figure class="right">
        <img src="figures/pwp-doc.png" alt="screen dump of the PWP draft" width="80%">
      </figure>
      <ul>
        <li>“Portable Web Publications” was, originally, a separate “vision” document</li>
        <li>Was adopted, formally, as part of the group’s work in September 2015, and is now published as an IG document</li>
        <li>The group will contribute to the formulation of the PWP technical challenges, to a better understanding of the requirements</li>
        <li><i>PWP is the guiding principle for the group’s further work</i></li>
      </ul>
    </div></section>

    <section class="slide shout cover" id="what_about_epub"><div>
        <img src="covers/sea_marseille.jpg">
        <h3 class="donthyphenate">But what about<br/> EPUB???</h3>
        <style type="text/css">
          #what_about_epub h3 {
            color:red;
            padding-bottom: 0.1em;
            margin-top: 2em;
          }
        </style>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">PWP vs. EPUB3.1</h2>
      <ul>
        <li><em>PWP does <i>not</i> replace EPUB&nbsp;3.1</em></li>
        <li>Many of the new features discussed as part of EPUB&nbsp;3.1 (e.g., structural semantics, manifests) already go in direction of something like PWP</li>
        <li>Others (like the locator structure) from the work on PWP may <i>influence</i> the evolution of EPUB&nbsp;3.1, mainly in the area of BFF</li>
      </ul>
    </div></section>

    <section class="slide"><div>
        <h2 class="donthyphenate">Many (most?) things are the same!</h2>
        <ul>
            <li>The <em>content</em> of a PWP and EPUB&nbsp;3.1 are identical
                <ul>
                    <li>usage of HTML, CSS, SVG, SMIL, etc.</li>
                </ul>
            </li>
            <li>What would change is the “administrative” aspect of the publication (locators, manifest, etc)</li>
        </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">PWP and <i>future</i> EPUB-s</h2>
      <ul>
          <li>The structure of PWP is very general</li>
          <li>Specific publication areas may need more restrictions and specifications
              <ul>
                  <li>metadata vocabularies, specific format for glossaries or indeces,…</li>
                  <li>many of these features are already defined in EPUB&nbsp;3</li>
              </ul>
          </li>
          <li>A future EPUB may be defined as a <em>profile</em> of PWP
              <ul>
                  <li>taking over or adapting a number of existing parts of EPUB&nbsp;3.1</li>
                  <li>a bit like EDUPUB is a profile of EPUB&nbsp;3</li>
              </ul>
          </li>
          <li>There may be other profiles for, e.g., online magazines</li>
      </ul>
    </div></section>

    <section class="slide stamped"><div>
      <h2 class="donthyphenate">PWP and <i>future</i> EPUB-s</h2>
      <ul>
          <li>The structure of PWP is very general</li>
          <li>Specific publication areas may need more restrictions and specifications
              <ul>
                  <li>metadata vocabularies, specific format for glossaries or indeces,…</li>
                  <li>many of these features are already defined in EPUB&nbsp;3</li>
              </ul>
          </li>
          <li>A future EPUB may be defined as a <em>profile</em> of PWP
              <ul>
                  <li>taking over or adapting a number of existing parts of EPUB&nbsp;3.1</li>
                  <li>a bit like EDUPUB is a profile of EPUB&nbsp;3</li>
              </ul>
          </li>
          <li>There may be other profiles for, e.g., online magazines</li>
      </ul>
      <p class="stamp small">To be discussed!</p>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Some references</h2>
      <dl>
        <dt>DPUB IG Wiki</dt>
          <dd><a target="_blank" href="https://www.w3.org/dpub/IG/wiki/Main_Page"><code>https://www.w3.org/dpub/IG/wiki/Main_Page</code></a></dd>
        <dt>Latest PWP Official Draft:</dt>
          <dd><a target="_blank" href="http://www.w3.org/TR/pwp/"><code>http://www.w3.org/TR/pwp/</code></a></dd>
        <dt>PWP Editors’ draft:</dt>
            <dd><a target="_blank" href="https://w3c.github.io/dpub-pwp/"><code>https://w3c.github.io/dpub-pwp/</code></a></dd>
        <dt>PWP Issue list:</dt>
          <dd><a target="_blank" href="https://github.com/w3c/dpub-pwp/issues"><code>https://github.com/w3c/dpub-pwp/issues</code></a></dd>
      </dl>
    </div></section>

    <section class="slide"><div>
      <h2>Thank you for your attention!</h2>
      <dl>
        <dt>This presentation:</dt>
          <dd><a target="_blank" href="http://www.w3.org/2016/Talks/EPUBSummit-IH/"><code>http://www.w3.org/2016/Talks/EPUBSummit-IH/</code></a></dd>
        <dt>A companion, a bit more technical, presentation</dt>
        <dd><a target="_blank" href="http://www.w3.org/2016/Talks/W3CTrack-IH/"><code>http://www.w3.org/2016/Talks/W3CTrack-IH/</code></a> </dd>
        <dt>My contact:</dt>
          <dd>ivan@w3.org</dd>
      </dl>
    </div></section>

    <!-- ===================================== -->
    <div class="progress"><div></div> </div>
    <script src="js/shower.min.js"></script>
  </body>
</html>