2016/W3CTrack-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: Technology Challenges</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: Technology Challenges</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="https://www.w3.org/2016/04/w3c-track.html">W3C Track @ WWW2016</a></span>, <span property="event:place">Montréal, Canada</span>
        </span>
      </h3>
      <h3 property="dc:date">2016-04-13</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: Technology Challenges</h2>
      <h3>Ivan Herman, W3C </h3>
      <h4><a href="https://www.w3.org/2016/04/w3c-track.html">W3C Track @ WWW2016</a></h4>
      <h4>2016-04-13</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: <br>
        <span style="font-size:90%"><a href="http://www.w3.org/2016/Talks/W3CTrack-IH/"><code>http://www.w3.org/2016/Talks/W3CTrack-IH/</code></a></span></p>
      <p>(Slides are in HTML)</p>
    </div></section>

    <!-- Beware: this does not work on Chrome when the screen is too large.
          bug is reported on github
     -->
    <section class="slide"><div>
      <div>
        <h2 class="donthyphenate"> Is it a book? Is it a Web site? </h2>
        <figure style="text-align: center">
          <video controls width="55%">
            <source src="videos/JavaBook.ogv" type="video/ogg">
            <source src="videos/JavaBook.mp4" type="video/mp4">
            <source src="videos/JavaBook.webm" type="video/webm">
          </video>
          <figcaption class="credit">Extract from “Big Java", by Cay Horstmann, John Wiley &amp; Sons, 2013</figcaption>
        </figure>
      </div>
    </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 small dedicated reader device 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: 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>
            <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>The main interest of publishers is to produce, edit, curate, etc, <em>content</em></li>
            <li>Publishers have invested heavily into technology developments, but the Web developers’ community can complement that with a wider reach and perspective</li>
            <li>Working closely with Web developers avoids re-inventing wheels</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"><div>
      <h3 class="donthyphenate">But… why not rely <em>only</em> on the Web? <br>(i.e., forget about downloaded content, it is outdated!)</h3>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Several reasons…</h2>
      <ul>
        <li>The future may be that everyone is always connected… but the reality is different for many years to come
          <ul>
            <li>slow connections, e.g., or on a plane or bus or even in some areas</li>
            <li>huge roaming prices among countries</li>
          </ul>
        </li>
        <li>Current publishing business models rely on distributable entities</li>
        <li>Privacy or security issues may require off-line access
          <ul><li>e.g., in a plane cockpit</li></ul>
        </li>
        <li>Archiving considerations</li>
      </ul>
    </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">Web Publications</h2>
      <div class="flexright">
          <figure class="large">
            <img src="figures/PWP-manyURL.svg" alt="a collection of resources with different URL pointer">
          </figure>
          <ul>
            <li>The current Web has the notion of a single resource:
              <ul>
                <li>conceptually, a single piece of data
                    <ul>
                        <li>HTML source, metadata, CSS style sheet, etc.</li>
                    </ul>
                </li>
                <li>each has its own URL</li>
              </ul>
            </li>
            <li>Presentation is based on the interoperation of many such resources</li>
          </ul>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Web Publications</h2>
      <div class="flexright">
          <figure class="large">
            <img src="figures/PWP-oneURL.svg" alt="a collection of resources in a 'blob' with one URL pointer">
          </figure>
          <ul>
            <li>But publishers need the concept of a single <i>Publication</i>:
              <ul>
                <li>a <em>collection</em> of pages, together with the relevant CSS, images, video, etc., files</li>
                <li>it is the <em>collection</em> that has a real distinct identity (URL), <em>not</em> its constituents</li>
              </ul>
            </li>
          </ul>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Formally</h2>
      <div class="flexdown">
          <ul>
            <li>A <strong><i>Web Publication</i></strong>: an <em>aggregated set of interrelated Web Resources</em>, intended to be considered as a single entity, and which <em>can be addressed on the Web as a unit</em> (is itself a Web Resource)</li>
          </ul>
          <figure class="center"><img src="figures/PWP-oneURL.svg" alt="a collection of resources in a 'blob' with one URL pointer" /></figure>
      </div>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">Portable Web Publications</h2>
      <ul>
        <li>A Web Publication may consist of resources spread all over the place (HTML on one site, CSS somewhere else)
          <ul><li>the owner of the Web Publication is only a “user” and not necessarily the owner of some of those resources!</li></ul>
        </li>
        <li>But a publishers may want to, create, curate, move the <i>whole</i> publication, as a single unit</li>
        <li>The Web Publication should be, in some sense, “self consistent”, not relying on external entities.</li>
        <li>A “self-consistent” Web Publication is therefore <em>Portable</em></li>
      </ul>
    </div></section>

    <section class="slide"><div>
      <h2 class="donthyphenate">More Formally</h2>
      <ul>
        <li>A <strong><i>Portable Web Publication</i></strong> is such that a <em>user agent can render its essential content by relying  on the Web Resources within the same Web Publication</em></li>
      </ul>
    </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 same content of a PWP whether offline or online, but they are obviously not absolutely the same</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">Protocol Access</th>
          <th style="border-left: 1px solid #CCC; border-right: 1px solid #CCC; width:40%" class="headertop">File Access</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: Web and Service Workers</h2>
      <ul>
        <li>Web Worker: a truly parallel thread within the browser</li>
        <li>A Service Worker is a special type of Web Worker, with additional features:
          <ul>
            <li>it is a <i>programmable network proxy</i>: the renderer’s network calls are caught and the request/answer can be modified on-the-fly behind the scenes</li>
            <li>it has an interface to handle a local cache for networked data</li>
            <li>it will stay alive even if the user moves away from the main page, and can be accessed later if he/she returns to it</li>
          </ul>
        </li>
      </ul>
    </div></section>

    <section class="slide stamped"><div>
      <h2 class="donthyphenate">Advances in modern browsers: Web and Service Workers</h2>
      <ul>
        <li>Web Worker: a truly parallel thread within the browser</li>
        <li>A Service Worker is a special type of Web Worker, with additional features:
          <ul>
            <li>it is a <i>programmable network proxy</i>: the renderer’s network calls are caught and the request/answer can be modified on-the-fly behind the scenes</li>
            <li>it has an interface to handle a local cache for networked data</li>
            <li>it will stay alive even if the user moves away from the main page, and can be accessed later if he/she returns to it</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 as a Service Worker</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 with Service Workers)</li>
        <li>An early mock-up of the current architecture has also been done
          <ul>
            <li>caveat for now: current Service Worker specification does not allow for direct, local file access</li>
            <li>some extra tricks have to be found</li>
          </ul>
        </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, two different locators
              <ul>
                  <li>to the unpacked version on the Web (<b>L<sub>u</sub></b>):<br /> <code>http://www.ex.org/MyPWP/dir/</code></li>
                  <li>to the package  (<b>L<sub>p</sub></b>):<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> (<b>L</b>)
                <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 <b>L</b>, <b>L<sub>p</sub></b>, and <b>L<sub>u</sub></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 <b>L</b> 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 <b>L</b>, <b>L<sub>p</sub></b>, and <b>L<sub>u</sub></b></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">What does an <code style="font-size: 120%">HTTP GET</code> return for <b>L</b>?</h2>
      <ul>
        <li>Possibilities are:
            <ul>
                <li>the full manifest</li>
                <li>the package that <i>includes</i> the manifest at some predefined place</li>
                <li>an HTML file with a link to a manifest (through a <code>&lt;link&gt;</code> element)</li>
                <li>an HTML file with an <i>embedded</i> manifest (through a <code>&lt;script&gt;</code> element)</li>
                <li>some Web Resource, with a link to a manifest in the <code>Link</code> header of the <code>HTTP</code> response</li>
            </ul>
        </li>
        <li>A PWP Processor should consider all these possibilities and <em>combine</em> the various sources</li>
        <li>Different server setups are possible; a PWP specification should leave that open</li>
      </ul>
    </div></section>

    <section class="slide"><div>
        <h2 class="donthyphenate">Getting hold of all locators</h2>
        <figure class="center" style="transform:translateY(-28px)">
          <img class="plain" src="figures/PWPClient.svg" alt="Flow diagram on accessing and combining various sources of Metadata" width="97%">
        </figure>
    </div></section>

    <section class="slide stamped"><div>
        <h2 class="donthyphenate">Getting hold of all locators</h2>
        <figure class="center" style="transform:translateY(-28px)">
          <img class="plain" src="figures/PWPClient.svg" alt="Flow diagram on accessing and combining various sources of Metadata" width="97%">
        </figure>
        <p class="stamp small">Work in progress</p>
    </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">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"><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">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/W3CTrack-IH/"><code>http://www.w3.org/2016/Talks/W3CTrack-IH/</code></a> <br>(<a href="http://www.w3.org/2016/Talks/W3CTrack-IH/slides.pdf">PDF</a> is also available for download)</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>