This repository has been archived by the owner on Jan 17, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
962 lines (880 loc) · 43.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
<!DOCTYPE html>
<html>
<head about="talk:">
<meta charset="utf-8">
<title>(Packaged) Web Publications</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<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: 50px 0 0 !important;
height: 130px ;
background: url(css/images/ribbon_w3c.svg) no-repeat ;
}*/
</style>
</head>
<body class="shower list hyphenate">
<header class="caption">
<h1>(Packaged) Web Publications (PWP)</h1>
<h2>Ivan Herman, W3C</span></h2>
<h3>2016 China National Computer Congress (<span lang="zh-hans" class="donthyphenate">2016中国计算机大会</span>), Taiyuan, China, 2016-10-20</h3>
<p class="copyright">
<a href="http://creativecommons.org/licenses/by-nd/4.0/"><img class="plain" alt="Creative Commons License" src="../../drafts/PWP_future_slides/figures/80x15.png"></a> 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 href="https://www.w3.org">W3C</a>
</p>
<p class="copyright">Copyright <sup>©</sup> 2016 W3C<sup>®</sup> (MIT, ERCIM, Keio, Beihang)</p>
</header>
<section class="slide titlepage">
<h2 class="donthyphenate">(Packaged) Web Publications</h2>
<h3>Ivan Herman, W3C </h3>
<h4><a href="http://cncc.ccf.org.cn/">2016 China National Computer Congress (<span lang="zh-hans" class="donthyphenate">2016中国计算机大会</span>), Taiyuan, China</a></h4>
<h4>2016-10-20</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="https://www.w3.org">W3C</a>.<br />
Copyright <sup>©</sup>2016 W3C<sup>®</sup> (MIT, ERCIM, Keio, Beihang)</p>
</section>
<section class="slide">
<h2>These Slides are Available on the Web </h2>
<p>See:
<span><a href="https://w3c.github.io/dpub/2016/CNCC-Taiyuan/"><code>https://w3c.github.io/dpub/2016/CNCC-Taiyuan/</code></a></span></p>
<p>(Slides are in HTML)</p>
</section>
<section class="slide shout cover">
<img src="../../drafts/PWP_future_slides/covers/epub_cover.jpg">
<h3 class="donthyphenate" style="color:red">A format to represent digital publications: EPUB 3</h3>
<p class="credit">Cloned Milkmen, Flickr</p>
</section>
<section class="slide">
<h2 class="donthyphenate">EPUB 3 is a very mature specification</h2>
<ul>
<li>Widely used format for digital publication</li>
<li>A truly portable and non-proprietary format</li>
<li>The standard format for digital books…</li>
<li>…but can be also be used for magazines, journal articles, documentation, etc.</li>
</ul>
</section>
<section class="slide shout cover" id="bookshelf"><div>
<img src="../../drafts/PWP_future_slides/covers/bookshelf.jpg">
<h3 class="donthyphenate">A wide variety of books have been created</h3>
</section>
<section class="slide">
<h2 class="donthyphenate">Books with illustrations</h2>
<figure class="left larger">
<img src="../../drafts/PWP_future_slides/figures/eco.png" alt="An ebook page including a drawing" />
<figcaption class="credit">Umberto Eco: “Le Cimetière de Prague”, Grasset</figcaption>
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/krugman.png" alt="An extract of an ebook with a statistical figure in the middle of the page" />
<figcaption class="credit">Paul Krugman: “End this depression now!”, WW. Norton & Co..</figcaption>
</figure>
</section>
<section class="slide">
<h2>Scientific presentations</h2>
<figure class="middle">
<img src="../../drafts/PWP_future_slides/figures/math.png" alt="Slide-like page with lots of mathematical equations" />
<figcaption class="credit">David Mao: “Calculus”</figcaption>
</figure>
</section>
<section class="slide">
<h2>Art books</h2>
<figure class="middle">
<img src="../../drafts/PWP_future_slides/figures/dutch_painting.png" alt="Page with an annotated high quality reproduction of a Dutch painting" />
<figcaption class="credit">Ingrid Koenen: “Dutch Golden Age”</figcaption>
</figure>
</section>
<section class="slide">
<h2>Mangas</h2>
<figure class="middle">
<img src="../../drafts/PWP_future_slides/figures/manga.png" alt="Page of a typical Japanese manga" />
<figcaption class="credit">“ハルコさんの彼氏”, IDPF EPUB3 Sample</figcaption>
</figure>
</section>
<section class="slide">
<h2>Technical books</h2>
<figure class="left larger">
<img src="../../drafts/PWP_future_slides/figures/css.png" alt="Extract of a CSS book, with codes and figures" />
<figcaption class="credit">Lea Verou: “CSS Secrets”, O'Reilly</figcaption>
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/func_js.png" alt="Extract of a Javascript book with figure and code" />
<figcaption class="credit">Michael Fogus: “Functional Programming”, O'Reilly</figcaption>
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">Books with different character sets and writing directions</h2>
<figure class="left larger">
<img src="../../drafts/PWP_future_slides/figures/mahabharata.png" alt="An extract of a text in hindi" />
<figcaption class="credit">“The Mahabharata in Devanāgarī (देवनागरी)”, IDPF EPUB3 Sample</figcaption>
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/steve_jobs_zh.png" alt="Extract of the book on Steve Jobs, in simplified Chinese" />
<figcaption class="credit">W. Isaacson, Steve Jobs (in simplified Chinese)</figcaption>
</figure>
</section>
<section class="slide shout">
<h3>It is not only for books! It can be…</h3>
</section>
<section class="slide">
<h2 class="donthyphenate">…conference proceedings</h2>
<figure class="left larger">
<img src="../../drafts/PWP_future_slides/figures/lod_book_cover.png" alt="Cover of a Springer Proceedings of an LOD conference" />
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/lod_book_extract.png" alt="Article from a Springer Proceedings of an LOD conference" />
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">…journals or magazines (articles)</h2>
<figure class="left larger">
<img src="../../drafts/PWP_future_slides/figures/jep.png" alt="Cover of the JEP journal" />
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/jep1.png" alt="Table of content of the JEP journal" />
</figure>
</section>
<section class="slide">
<h2>…official reports of all kinds</h2>
<figure class="left larger">
<img src="../../drafts/PWP_future_slides/figures/EU-en.png" alt="EU brochure in English" />
<figcaption class="credit">European Commission — General Report 2015</figcaption>
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/EU-bg.png" alt="EU brochure in Bulgarian" />
<figcaption class="credit">European Commission — General Report 2015</figcaption>
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">In fact, just about anything!</h2>
<figure class="left larger" style="margin-top:1.5em">
<img src="../../drafts/PWP_future_slides/figures/gdrive.png" alt="Screendump of gdrive saving a document as EPUB" />
</figure>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/pages.png" alt="Screendump of Apple Pages saving a document as EPUB" />
</figure>
</section>
<!-- ===================================== -->
<section class="slide shout cover">
<img src="../../drafts/PWP_future_slides/covers/secret.jpg">
<h3 class="donthyphenate">What is the secret?</h3>
<p class="credit">James Arboghast, flickr</p>
</section>
<section class="slide">
<h2 class="donthyphenate">Well, at least one of the secrets…</h2>
<ul>
<li>EPUB is based on Web Technologies like HTML, CSS, SVG, JS, etc.
<ul>
<li>collectively referred to as the “Open Web Platform” (OWP)</li>
</ul>
</li>
<li>I.e., no separate rendering, formatting, etc., specification had to be defined</li>
<li>Instead, EPUB relies on specifications defined by W3C and deployed in browser engines</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">Rough structure of an EPUB file</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/EPUB3-Package-Structure.svg" alt="EPUB Packaging structure diagram" width="99%">
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">A good example</h2>
<figure class="right larger">
<img src="../../drafts/PWP_future_slides/figures/photo_css.png" alt="Figure with a complex image processing done, in fact, in CSS" />
<figcaption class="credit">Lea Verou: “CSS Secrets”, O'Reilly</figcaption>
</figure>
<ul>
<li>The image on the right is displayed through that translucent “screen”</li>
<li>This is <em>not</em> done through some separate image processing step</li>
<li>Instead, it is based on some complex CSS features (implemented in browsers but also in EPUB readers)</li>
</ul>
</section>
<section class="slide shout">
<h3 class="donthyphenate">Bottom line: relationships of EPUB with OWP is fundamental</h3>
</section>
<section class="slide">
<h2 class="donthyphenate">Are we all done? <br/>I.e., are OWP and EPUB a perfect match?</h2>
<p>
There are two major areas that need work:
</p>
<ol>
<li>bring OWP and Digital Publishing closer</li>
<li>bring the <em>Web</em> and Digital Publishing closer</li>
</ol>
</section>
<section class="slide shout cover" id="owp_dpub">
<img src="covers/bring_owp_dpub.jpg"/>
<h3 class="donthyphenate">Bring OWP and Digital Publishing closer</h3>
<style type="text/css">
#owp_dpub h3 {
margin-top: 3em;
background: hsla(181, 9%, 78%, 0.35);
}
</style>
</section>
<section class="slide">
<h2 class="donthyphenate">Missing OWP features</h2>
<ul>
<li>Some features, needed by publishing, are missing from OWP; examples:
<ul>
<li>pagination, page controls for headings, page numbers</li>
<li>graphics transition effects (needed in, e.g., mangas, cartoons, children books)</li>
<li>structuring information of complex documents</li>
<li>taking into account the typesetting requirements of different cultures (French, Russian, Arabic, Chinese, Japanese,…)</li>
</ul>
</li>
<li>W3C has a <a href="https://www.w3.org/dpub/IG/">Digital Publishing Interest Group</a> to look into these issues and cooperate with the relevant W3C groups</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">Bring other OWP features to publishing</h2>
<ul>
<li>For example:
<ul>
<li>dynamic tools and libraries, deployed on the Web, would be beneficial in publishing</li>
<li>use external services on the Web via extra protocols</li>
<li>new Web authentication or payment methods could change the way publications are accessed</li>
<li>new device API-s could be used by dedicated software on devices</li>
<li>etc.</li>
</ul>
</li>
</ul>
</section>
<section class="slide shout">
<h3>Bringing these to publishing should (and will…) happen</h3>
</section>
<section class="slide shout cover" id="web_dpub">
<img src="covers/bring_web_dpub.jpg"/>
<h3 class="donthyphenate">Bring the <em>Web</em> and Digital Publishing closer</h3>
<style>
#web_dpub h3 {
margin-top: 3em;
background: hsla(181, 9%, 78%, 0.35);
}
</style>
</section>
<section class="slide">
<h2>What is, in fact, a (digital) book?</h2>
<ul>
<li>It is a mean to transmit ideas to readers in various formats</li>
<li>It is independent of format: the same “book” should be available in different format and media
<ul>
<li>printed book, digital books, Web page(s)…</li>
</ul>
</li>
<li>Today, a Digital Book is different than a Web page (conceptually and practically)</li>
</ul>
</section>
<section class="slide">
<h2>What we get today…</h2>
<div class="flexright">
<figure class="extra-large">
<img src="../../drafts/PWP_future_slides/figures/eu_report.png" alt="EU report page with signs for downloads">
<figcaption class="credit">Dump from <a href="http://publications.europa.eu/en/web/general-report">EU publications' page</a></figcaption>
</figure>
<ul style="margin-top:3.5em;">
<li>One can download an EPUB (and other formats) from a Web site…</li>
</ul>
</div>
</section>
<section class="slide">
<h2>What we get today…</h2>
<div class="flexright">
<figure class="large">
<img src="../../drafts/PWP_future_slides/figures/eu_report-epub.png" alt="EU report in EPUB">
<figcaption class="credit">Dump from <a href="http://publications.europa.eu/en/web/general-report">EU publications' page</a></figcaption>
</figure>
<ul style="margin-top:3.5em;">
<li>…get a very traditional text to read…</li>
</ul>
</div>
</section>
<section class="slide">
<h2>What we get today…</h2>
<div class="flexright">
<figure class="extra-large">
<img src="../../drafts/PWP_future_slides/figures/eu_report2.png" alt="EU report page with nice outlook, TOC, etc">
<figcaption class="credit">Dump from <a href="http://publications.europa.eu/en/web/general-report">EU publications' page</a></figcaption>
</figure>
<ul style="margin-top:3.5em;">
<li>…but access a different (and possibly nicer) Web page online…</li>
<li><em>This should not be the case!</em></li>
</ul>
</div>
</section>
<section class="slide">
<h2 class="donthyphenate"><i>“This should not be the case!”</i><br>what does this mean?</h2>
<div class="flexleft">
<figure class="larger">
<img src="../../drafts/PWP_future_slides/figures/pwp.svg" alt="Portable Web Publication at a glance"/>
</figure>
<p><i>Separation between publishing as Web sites and in an offline package should be diminished to zero</i></p>
</div>
<ul class="donthyphenate">
<li>This means:
<ul>
<li>it should be possible to load the publication content into a browser or a specialized reader, whatever the user prefers</li>
<li>it should be possible to read the book either offline or online, whatever the circumstances dictate</li>
<li>contents could be authored regardless of where they are used</li>
</ul>
</li>
</ul>
</section>
<section class="slide shout cover">
<img src="../../drafts/PWP_future_slides/covers/why.jpg">
<!-- <h3>Why Bother?</h3> -->
<p class="credit">ibta arabia</p>
</section>
<section class="slide">
<h2 class="donthyphenate">For example: book in a browser</h2>
<div class="flexright">
<figure>
<img src="../../drafts/PWP_future_slides/figures/joseph-web.png" alt="Joseph Reagle's book as a web page">
<figcaption class="credit">Joseph Reagle: <a target="_blank" href="http://reagle.org/joseph/2010/gfc/chapter-4.html">“Good Faith Collaboration”</a>, PhD Thesis, MIT Press</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., powerful text analysis</li>
</ul>
</li>
</ul>
</div>
</section>
<section class="slide">
<h2 class="donthyphenate">For example: book in a browser</h2>
<div class="flexleft">
<figure>
<img src="../../drafts/PWP_future_slides/figures/joseph-bluefire.png" alt="Joseph Reagle's book as an ebook in reader">
<figcaption class="credit">Joseph Reagle: <a target="_blank" href="http://reagle.org/joseph/2010/gfc/chapter-4.html">“Good Faith Collaboration”</a>, PhD Thesis, MIT Press</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>
</section>
<section class="slide">
<h2 class="donthyphenate">For example: I may not be online…</h2>
<div class="flexright">
<figure class="larger">
<img src="../../drafts/PWP_future_slides/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: browsers may have an “archiving” possibility, but they are not interoperable</li>
</ul>
</ul>
</div>
</section>
<section class="slide">
<h2 class="donthyphenate">For example: scholarly publishing</h2>
<div class="flexleft">
<figure>
<img src="../../drafts/PWP_future_slides/figures/f1000.png" alt="Screen dump of an article on F1000">
<figcaption class="credit">Jullien Colomb et. al: <a href="http://f1000research.com/articles/3-176/v2">“Sub-strains of Drosophila Canton-S…”</a>, F1000Research</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 reading environment
<ul><li>no two column, fixed layout file that cannot be handled on an my tablet…</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 shout cover">
<img src="../../drafts/PWP_future_slides/covers/why_not_web.jpg">
<h3 class="donthyphenate" style="color:darkblue; margin-top:1.5em">But… why not simply rely <em>only</em> on the current Web?<br> <span style="font-size:75%">(with some facility for offline)</span></h3>
</section>
<section class="slide shout cover">
<img src="../../drafts/PWP_future_slides/covers/why_not_web.jpg">
<h3 class="donthyphenate" style="color:darkblue">The web already provides all we need!</h3>
</section>
<section class="slide shout cover">
<img src="../../drafts/PWP_future_slides/covers/why_not_not_quite.jpg">
<h3 class="donthyphenate" style="color:darkblue; margin-top:2em">Not quite… <br><span style="font-size:75%">(even when considering the Web only, i.e., no packaging)</span></h3>
</section>
<section class="slide">
<h2 class="donthyphenate">Need for the concept of a “publication” of many resources</h2>
<ul>
<li>A publication may consist of many resources (text, images, videos, etc)</li>
<li>On the Web, these are linked together, but they keep their complete “independence”</li>
<li>For publishing the abstract “work” should be a <em>single, conceptual unit on the Web</em>: a <strong>Web Publication (WP)</strong></li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">Why do we need the WP concept?</h2>
<ul>
<li>The whole book should be archived in a national library</li>
<li>The publication has to be checked for integrity <em>as a whole</em> (e.g., in a legal publication)</li>
<li>Sharing a publication with a friend requires the concept of the publication <em>as a whole</em> </li>
<li>Publishing and library business models are based on the concept of “works”</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">Why do we need the WP concept?</h2>
<ul>
<li>Value counters (counters, section numbering, footnotes, endnotes, etc.) should be consistent across the publication</li>
<li>Any search, text analysis, etc., facility for a book should have access to the full publication</li>
<li>User preferences should apply to the “work” rather than to a single Web page</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">How does that translate to the Web?</h2>
<div class="flexright">
<figure class="large">
<img src="../../drafts/PWP_future_slides/figures/WP-manyURL.svg" alt="a collection of resources with different URL pointer">
</figure>
<ul>
<li>The current Web builds on the notion of a single resource:
<ul>
<li>HTML source, metadata, CSS style sheet, etc.
</li>
<li>each has its own URL</li>
</ul>
</li>
<li>Rendering is based on the interoperation of many such resources</li>
</ul>
</div>
</section>
<section class="slide">
<h2 class="donthyphenate">How does that translate to the Web?</h2>
<div class="flexright">
<figure class="large">
<img src="../../drafts/PWP_future_slides/figures/WP-oneURL.svg" alt="a collection of resources in a 'blob' with one URL pointer">
</figure>
<ul>
<li>A WP is a collection of Web resources, considered as a <em>single Web resource</em>
<ul>
<li>this means there is a unique Web address for the <i>collection</i></li>
<li>the same WP can be offline or online with the same address</li>
</ul>
</li>
<li>Web Publications are <em>part of the Web</em>!</li>
</ul>
</div>
</section>
<section class="slide">
<div>
<h2 class="donthyphenate">An additional concept: <br/>a “WP Processor”</h2>
<ul>
<li>A conceptual, client-side processor (add-on, extension, etc.) that performs WP specific operations
<ul>
<li>search, unified counters and section numbers, displaying table of contents, publication-specific interactions,…</li>
</ul>
</li>
<li>It “hides” the WP online/offline state
<ul>
<li>the main rendering part operates <i>as if</i> it was connected to the Web</li>
</ul>
</li>
</ul>
</div>
</section>
<section class="slide">
<h2 class="donthyphenate">An internal representation may also be needed</h2>
<ul>
<li>At the moment, the internal representation of (HTML) resources is based on the concept of a “Document” in the “Document Object Model (DOM)”
<ul>
<li>this underpins all programmatic access to content on the Web</li>
</ul>
</li>
<li>There <em>may</em> be a need for a programmatic interface on top of Documents in the DOM, representing a <em>collection</em> of documents</li>
</ul>
</section>
<section class="slide shout cover" id="arch">
<img src="covers/architecture.jpg">
<h3 class="donthyphenate">Architectural challenge: handling online/offline</h3>
<style type="text/css">
#arch h3 {
background: hsla(181, 9%, 78%, 0.55);
color: hsla(240, 69%, 100%, 1);
}
</style>
</section>
<section class="slide">
<h2 class="donthyphenate">Envisioned architecture: <br/>online</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/Workers-basic.svg" alt="Document consumed through the Web in a traditional way" width="99%">
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">Envisioned architecture: <br/>offline</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/Workers-cache.svg" alt="Document consumed through a Service Worker, possibly cached" width="99%">
</figure>
</section>
<section class="slide shout">
<h3 class="donthyphenate">Is this approach at all feasible?</h3>
</section>
<section class="slide">
<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>
</section>
<section class="slide stamped">
<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>
</section>
<section class="slide shout">
<h3 class="donthyphenate">A WP Processor can be implemented using Service Workers</h3>
</section>
<section class="slide">
<h2 class="donthyphenate">Service Workers are coming…</h2>
<figure class="right large">
<img src="../../drafts/PWP_future_slides/figures/service-workers.png" alt="Screen dump of the service workers' draft spec">
</figure>
<ul>
<li>Browser engines are heading towards Service Workers today
<ul>
<li>a major technology to reconcile Mobile Applications and Web Developments</li>
</ul>
</li>
<li>I.e, Web Publications build on an evolution that is already happening
</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">Manifests</h2>
<ul>
<li>A WP needs a number of extra information
<ul>
<li>different type of metadata (author, title, publisher, etc.)</li>
<li>list of resources <i>within</i> a WP</li>
<li>table of content information, i.e., default reading order</li>
<li>unique identifier (ISBN, DOI, etc.)</li>
<li>references to more complex metadata (e.g., ONIX data)</li>
</ul>
</li>
<li>The traditional term is “manifest” for such information</li>
<li>A detailed manifest must be specified for WP-s</li>
</ul>
</section>
<section class="slide">
<h2>Work on “Web App Manifests”</h2>
<figure class="right large">
<img src="../../drafts/PWP_future_slides/figures/appmanifest.png" alt="Screen dump of the App Manifest draft spec">
</figure>
<ul>
<li>Work is happening at W3C
<ul>
<li>used for Web Applications</li>
<li>contains lots of display-oriented data, and some metadata</li>
<li>describes a precise way of fetching manifests and content in a secure context</li>
<li>contains data for an application based on Service Workers</li>
</ul>
</li>
<li>A WP manifest can build on this evolution as well!</li>
</ul>
</section>
<section class="slide shout cover" id="pack">
<img src="../../drafts/PWP_future_slides/covers/package.jpg">
<h3 class="donthyphenate">Packaged Web Publications</h3>
<style type="text/css">
#pack h3 {
color: hsla(240, 69%, 50%, 1);
margin-top: 2em;
}
</style>
</section>
<section class="slide">
<h2>Packaged Web Publications (PWP)</h2>
<ul>
<li>For a large number of use cases Web Publications (essentially, online/offline reading) is all they really need
<ul>
<li>e.g., scholarly journals, online magazines, brochures</li>
</ul>
</li>
<li>But a number of use cases rely on an extra step: to “pack” the content of a WP into a single file
<ul>
<li>archival, library distributions,…</li>
<li>extension of the current business model of trade publishers (built on EPUB)</li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2>A layer “on top” of WP-s</h2>
<div class="flexright">
<figure class="large">
<img src="../../drafts/PWP_future_slides/figures/PWP-oneURL.svg" alt="a collection of resources in a 'blob' in a rectangle with one URL pointer">
</figure>
<ul>
<li>Packaging means collecting all the content of a WP into a single file</li>
<li>Some additional issues to be handled:
<ul>
<li>special entries to the manifest</li>
<li>archival format(s)</li>
<li>etc.</li>
</ul>
</li>
<li>A specific “profile” for WP may have to be defined for a PWP</li>
</ul>
</div>
</section>
<section class="slide">
<h2 class="donthyphenate">Structure of an EPUB3 file</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/EPUB3-Package-Structure.svg" alt="EPUB Packaging structure diagram" width="99%">
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">A Packaging of a Web Publication</h2>
<ul class="donthyphenate">
<li>A Packaged Web Publication may have a very similar structure</li>
<li>But moving to the Web would probably require to rethink the format of the administrative files
<ul>
<li>e.g., manifest would be in JSON</li>
<li>structure of metadata may different</li>
<li>etc.</li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">PWP packaging structure</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/PWP-Package-Structure.svg" alt="EPUB Packaging structure diagram with admin file in JSON" width="99%">
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">Web Archival format?</h2>
<ul>
<li>There is an interest among some W3C members for a Web friendly packaging format:
<ul>
<li>streamable</li>
<li>rely, as much as possible, on existing Web technologies (e.g., HTTP)</li>
</ul>
</li>
<li>Use cases include:
<ul>
<li>retrieve an HTML file with related CSS files, images</li>
<li>access Web Applications (“Widgets”) with all libraries involved</li>
<li><em>Packaged Web Publications are a clear use case</em></li>
</ul>
</li>
<li>This Web Packaging proposal is <i>not</i> OPF based, though
<ul>
<li>this <i>may</i> lead to a different packaging in future for Digital Publishing</li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">PWP packaging structure</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/PWP-Package-Structure-2.svg" alt="PWP Packaging structure diagram with admin file in JSON" width="99%">
</figure>
</section>
<section class="slide">
<h2 class="donthyphenate">However…</h2>
<ul>
<li>There isn‘t yet a full agreement whether to develop such Web Packaging format
<ul><li>a caching architecture based on Service Workers may be enough for the use cases</li></ul>
</li>
<li>The Publishing Community may not move away from OPF
<ul>
<li>technical advantages of a new format must be weighted against existing deployment</li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2>A PWP Processor</h2>
<ul>
<li>PWP-s may be handled by dedicated applications</li>
<li>But the concept of a WP processor can be extended to a PWP processor, unpacking content on the fly
<ul>
<li>security considerations must be handled, though</li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">A PWP Processor</h2>
<figure>
<img class="plain" src="../../drafts/PWP_future_slides/figures/Workers-package.svg" alt="Document consumed through a Service Worker, possibly unpacked" width="99%">
</figure>
</section>
<section class="slide shout cover" id="presentation">
<img src="../../drafts/PWP_future_slides/covers/choice.jpg">
<h3 class="donthyphenate">Ergonomy differences</h3>
<style type="text/css">
#presentation h3 {
color: hsla(240, 69%, 50%, 1);
}
</style>
</section>
<section class="slide">
<h2>Book reading needs a different approach to ergonomy</h2>
<figure class="right">
<img src="../../drafts/PWP_future_slides/figures/story_of_the_stone.png" alt="Front page of the 'Story of the Stone' (in English)">
<figcaption class="credit">Cao Xueqin: “Story of the Stone”, Penguin Classics</figcaption>
</figure>
<ul>
<li>Typical example: pagination
<ul>
<li>for short text, pagination is not really important</li>
<li>but what about reading, say, the Story of the Stone?</li>
<li>currently not available or used on the Web</li>
</ul>
</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">The Houdini project & pagination</h2>
<figure class="right">
<img src="../../drafts/PWP_future_slides/figures/houdini.jpg" alt="Full-length portrait of Houdini, in chains">
<figcaption class="credit">Harry Houdini, McManus-Young collection, LoC</figcaption>
</figure>
<div style="font-size:70%">
<blockquote style="margin-left:1em">
The CSS-TAG <a href="https://wiki.css-houdini.org/">“Houdini Project”</a> […] make[s] development of CSS polyfills […] easier by defining low level APIs of styling and layout on the web
</blockquote>
<p style="font-size:40%; text-align:right">Credit: Vivliostyle blog, Toru Kawakubo</p>
</div>
<ul>
<li>May lead to a standard access to page-related information</li>
<li>Pagination isn’t only books: slides, cards, and other “boxes” use the same functionality</li>
</ul>
</section>
<section class="slide">
<h2>Personalization</h2>
<ul>
<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>
</section>
<section class="slide shout cover" id="what_about_epub">
<img src="../../drafts/PWP_future_slides/covers/sea_marseille.jpg">
<h3 class="donthyphenate" style="color:red">But what about<br/> EPUB???</h3>
</section>
<section class="slide">
<h2 class="donthyphenate">PWP vs. EPUB3.1</h2>
<ul>
<li>PWP does <em>not</em> replace EPUB 3</li>
<li>It is, instead, part of a future evolution, a “vision” for the years to come</li>
</ul>
</section>
<section class="slide">
<h2 class="donthyphenate">Most things are the same!</h2>
<ul>
<li>Important to note that the <em>content</em> of a PWP and EPUB 3 are essentially identical
<ul>
<li>usage of HTML, CSS, SVG, etc.</li>
</ul>
</li>
<li>The main change is the “administrative” aspect of the publication (locators, manifest, etc)</li>
</ul>
</section>
<section class="slide">
<h2>Development process</h2>
<ul>
<li>EPUB was developed at the IDPF, Web Technologies were developed at the W3C</li>
<li>Strong cooperation exists since 2013 (e.g., in W3C’s Digital Publishing Interest Group)
<ul>
<li>many of the ideas around PWP were developed at W3C, with strong presence of experts from IDPF</li>
</ul>
</li>
<li>The plan is that IDPF and W3C would merge starting 2017
<ul>
<li>maintenance of EPUB 3.1 will continue at W3C</li>
<li>future development (of PWP and others) will be part of one or more W3C Working Groups</li>
<li>A memorandum of understanding is under review be IDPF and W3C members, respectively</li>
</ul>
</li>
</ul>
</section>
<section class="slide shout cover" id="conclusion">
<img src="../../drafts/PWP_future_slides/covers/new_conclusion.jpg">
<h3 class="donthyphenate">To conclude:<br><i>Let us create real publications on the Web!</i></h3>
<style type="text/css">
#conclusion h3 {
color: hsla(240, 69%, 30%, 1);
margin-top: -1.2em;
}
</style>
</section>
<section class="slide">
<h2 class="donthyphenate">Some references</h2>
<dl>
<dt>Latest PWP Use Cases and Requirements draft:</dt>
<dd><a target="_blank" href="https://w3c.github.io/dpub-pwp-ucr/"><code>https://w3c.github.io/dpub-pwp-ucr/</code></a></dd>
<dt>Latest 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>
</section>
<section class="slide stamped">
<h2 class="donthyphenate">Some references</h2>
<dl>
<dt>Latest PWP Use Cases and Requirements draft:</dt>
<dd><a target="_blank" href="https://w3c.github.io/dpub-pwp-ucr/"><code>https://w3c.github.io/dpub-pwp-ucr/</code></a></dd>
<dt>Latest 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>
<p class="stamp small" class="donthyphenate">Constantly evolving…</p>
</section>
<section class="slide">
<h2>Thank you for your attention!</h2>
<dl>
<dt>This presentation:</dt>
<dd><a target="_blank" href="https://w3c.github.io/dpub/2016/CNCC-Taiyuan/"><code>https://w3c.github.io/dpub/2016/CNCC-Taiyuan/</code></a> <br>(<a href="http://www.w3.org/2016/Talks/CNCC-IH/slides.pdf">PDF</a> is also available for download)</dd>
<dt>My contact:</dt>
<dd>[email protected]</dd>
</dl>
</section>
<!-- ===================================== -->
<div class="progress"></div>
<script src="js/shower.min.js"></script>
</body>
</html>