Your SlideShare is downloading. ×
0
From HTML 5 & CSS 3...To ePub 3@cwehrung
ePub ?
ePub ?
definitionEPUB defines a means of representing, packaging and encodingstructured and semantically enhanced Web content— incl...
JavaScript                  Behavior           HTML 5              CSS 3           Content              Style             ...
HTML             Result       CSS
JavaScript                Behavior         HTML 5              CSS 3         Content              Style                   ...
Audio+Video           Interactivity              FlashGeolocation           Local Storage
DEVICES SUPPORTHTML 5         <canvas>   ::geoloc::   <audio>   <video>   MathML  iBooks         ✓        Sort Of *      ✓...
JavaScript               Behavior        HTML 5              CSS 3        Content              Style                  ePub...
Animations              Shadows             Support varies-webkit, -moz, ...        Regions
Media Queries  HTML 4  <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">  <link rel="stylesheet...
Media Queries  HTML 4  <link rel="stylesheet" media="screen and (color)" href="example.css" />  CSS 3  @import url(color.c...
Selectors  You already know:  a:link      /*   unvisited links */  a:visited   /*   visited links */  a:hover     /*   use...
Selectors  The ::before and ::after pseudo-elements  h1:before { content : "> " }  Structural pseudo-classes  tr:nth-child...
Selectors div > p:first-child This selector represents a p element that is the first child of a div element: <p> The last ...
Selectors p { color: red; font-size: 12pt } p::first-letter { color: green; font-size: 200% } p::first-line { color: blue ...
Combinators Descendant combinator E F (1) — matches an element F that’s a descendant of an element E. Note that descendant...
Combinators Child combinator E > F (2) — matches an element F that’s a child of an element E. The difference here is that ...
Combinators Adjacent sibling combinator E + F (2) — matches an element F immediately preceded by an element E. Note the wo...
Combinators General sibling combinator E ~ F (3) — matches an element F preceded by an element E. Unlike the above this wi...
JavaScript                Behavior         HTML 5              CSS 3         Content              Style                   ...
ePUBmimetype   OEBPS       META-INF                   Container   ( iBooks )                                Options
NEW OPPORTUNITIES
NEW OPPORTUNITIES
EPUB 3 FEATURES Semantic Inflection                         Audio+Video    Content Switching                               ...
ePub 2               ePub 3     CSS 3              ✘                    ✓    HTML 5              ✘                    ✓   ...
ToC               ePub 2<?xml	  version="1.0"	  encoding="UTF-­‐8"?><ncx	  xmlns="http://www.daisy.org/z3986/2005/ncx/"	  ...
ToC               ePub 3<html	  xmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"profile="http...
ePUB                              META-INF    OEBPScontent.opf       mimetype   OEBPS↬ <metadata>↬ <manifest>↬ <spine>    ...
content.opf<?xml version="1.0" encoding="utf-8" standalone="no"?><package xmlns="http://www.idpf.org/2007/opf" xmlns:dc="h...
media overlays↬ text-to-speech ?
media overlays↬ text-to-speech ?
media overlays         ↬ SpeechIn content.opf : <item id="smil-003" href="smil/page1.smil" media-type="application/smil+xm...
<?xml version="1.0" encoding="UTF-8"?>                                                                         SMIL<smil x...
— animation —JavaScript ?
JavaScript     HTML 5                CSS 3              ePub 3ePub 3                         (theory)
JavaScript   HTML 5                CSS 3            ePub 3Apple                            (new)
JavaScript   HTML 5                CSS 3            ePub 3Apple                            (new)
LAYOUT TYPES
LAYOUT TYPES
LAYOUT TYPES                ab le...         ef lowN ot   R
LAYOUT TYPES
LAYOUT TYPESPredictable !
Reflowable   Fixed-Layout
WHAT ?
ToC     fixed-layout<html	  xmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"profile="http://w...
viewport + metadata ?In META-INF/com.apple.ibooks.display-options.xml <?xml	  version="1.0"	  encoding="UTF-­‐8"?> <displa...
JavaScript     HTML 5                CSS 3              ePub 3ePub 3                         (theory)
JavaScript     HTML 5                  CSS 3              Fixed-Layout               ePub 3ePub 3                         ...
JavaScript   HTML 5                  CSS 3            Fixed-Layout             ePub 3Apple                              (n...
Standard   Retina@2x
standard...
standard...    vs.Retina
Standard
Retina@2x
i ze !F ileS
fixed-layout rules              <guid                    e>spread vs. page             orientatio                          ...
fixed-layout limits        Retina                   localStorage        “touch” margins-webkit-le             tter-spaci   ...
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
Upcoming SlideShare
Loading in...5
×

ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)

21,768

Published on

Published in: Technology, Design
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
21,768
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
866
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)"

  1. 1. From HTML 5 & CSS 3...To ePub 3@cwehrung
  2. 2. ePub ?
  3. 3. ePub ?
  4. 4. definitionEPUB defines a means of representing, packaging and encodingstructured and semantically enhanced Web content— including HTML5, CSS, SVG, images, and other resources — fordistribution in a single-file format.
  5. 5. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageTechnologies (theory)
  6. 6. HTML Result CSS
  7. 7. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageHTML 5
  8. 8. Audio+Video Interactivity FlashGeolocation Local Storage
  9. 9. DEVICES SUPPORTHTML 5 <canvas> ::geoloc:: <audio> <video> MathML iBooks ✓ Sort Of * ✓ ✓ ✓NOOK Color/ Tablet ✘ ✘ ✓ ✓ ✘Safari Books Online ✓ ✓ ✓ ✓ ✓Kindle Apps ✘ ✘ ✓ ✓ ✘ Kindle Fire ✘ ✘ ✘ ✘ ✘
  10. 10. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageCSS 3 (theory)
  11. 11. Animations Shadows Support varies-webkit, -moz, ... Regions
  12. 12. Media Queries HTML 4 <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> CSS 3 @media screen { * { font-family: sans-serif } }
  13. 13. Media Queries HTML 4 <link rel="stylesheet" media="screen and (color)" href="example.css" /> CSS 3 @import url(color.css) screen and (color); Other examples: @media (orientation: portrait) { … } @media (min-width:500px) { … }
  14. 14. Selectors You already know: a:link /* unvisited links */ a:visited /* visited links */ a:hover /* user hovers */ a:active /* active links */ An example of combining dynamic pseudo-classes: a:focus a:focus:hover
  15. 15. Selectors The ::before and ::after pseudo-elements h1:before { content : "> " } Structural pseudo-classes tr:nth-child(odd) /* represents every odd row of an HTML table */ tr:nth-child(even) /* represents every even row of an HTML table */ /* Alternate paragraph colours in CSS */ p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; }
  16. 16. Selectors div > p:first-child This selector represents a p element that is the first child of a div element: <p> The last P before the note.</p> <div class="note"> <p> The first P inside the note.</p> </div> but cannot represent the second p in the following fragment: <p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> The first P inside the note.</p> </div>
  17. 17. Selectors p { color: red; font-size: 12pt } p::first-letter { color: green; font-size: 200% } p::first-line { color: blue } <P>A bird in the hand is worth two in the bush...</P>
  18. 18. Combinators Descendant combinator E F (1) — matches an element F that’s a descendant of an element E. Note that descendant combinators target all descendants and not just direct children. ul li {background: red;} <ul> <li>List Item 1</li> <li>List Item 2 <ol> <li>List Item 2-1</li> <li>List Item 2-2</li> </ol> </li> <li>List Item 3</li> </ul>
  19. 19. Combinators Child combinator E > F (2) — matches an element F that’s a child of an element E. The difference here is that F must be a direct child of E. ul>li {background: red;} <ul> <li>List Item 1</li> <li>List Item 2 <ol> <li>List Item 2-1</li> <li>List Item 2-2</li> </ol> </li> <li>List Item 3</li> </ul>
  20. 20. Combinators Adjacent sibling combinator E + F (2) — matches an element F immediately preceded by an element E. Note the word adjacent. Only the first element F after E will be targeted. h1+p {background: red;} <h1>Heading</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
  21. 21. Combinators General sibling combinator E ~ F (3) — matches an element F preceded by an element E. Unlike the above this will match any sibling and not just the first. h1+p {background: red;} <h1>Heading</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
  22. 22. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageePub 3
  23. 23. ePUBmimetype OEBPS META-INF Container ( iBooks ) Options
  24. 24. NEW OPPORTUNITIES
  25. 25. NEW OPPORTUNITIES
  26. 26. EPUB 3 FEATURES Semantic Inflection Audio+Video Content Switching Speech & Manifest Fallbacks NCX Embedded Fonts SVG Metadata Media Overlays Triggers+Binding MathML DTBookGuide ⇢ NavigationDocuments
  27. 27. ePub 2 ePub 3 CSS 3 ✘ ✓ HTML 5 ✘ ✓ SVG In XHTML Direct in Spine Fonts Only built-in OTF & WOFF @font-face Audio & Video ✘ ✓ JavaScript ✘ optionally supported Multiple Stylesheets ✘ ✓ Alternative to XHTML DTBook HTML 5Table of Content NCX Navigation Documents
  28. 28. ToC ePub 2<?xml  version="1.0"  encoding="UTF-­‐8"?><ncx  xmlns="http://www.daisy.org/z3986/2005/ncx/"  version="2005-­‐1"  xml:lang="en-­‐US"><head><meta  name="dtb:uid"  content="p9780316000000"/></head><docTitle><text>Moby-­‐Dick</text></docTitle><docAuthor><text>Herman  Melville</text></docAuthor><navMap>(...)<navPoint  playOrder="4"  id="introduction_001"><navLabel><text>ETYMOLOGY.</text></navLabel><content  src="introduction_001.html"/></navPoint><navPoint  playOrder="5"  id="epigraph_001"><navLabel><text>EXTRACTS  (Supplied  by  a  Sub-­‐Sub-­‐Librarian).</text></navLabel><content  src="epigraph_001.html"/></navPoint>
  29. 29. ToC ePub 3<html  xmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"profile="http://www.idpf.org/epub/30/profile/content/"><head><title>Moby-­‐Dick</title></head><body><nav  id="toc"  epub:type="toc"><h1>Contents</h1><ol><li  id="cover"><a  href="cover.html">Cover</a></li><li  id="titlepage"><a  href="titlepage.html">Title  Page</a></li><li  id="preface_001"><a  href="preface_001.html">Original  Transcriber’s  Notes:</a></li><li  id="introduction_001"><a  href="introduction_001.html">ETYMOLOGY.</a></li><li  id="epigraph_001"><a  href="epigraph_001.html">EXTRACTS  (Supplied  by  a  Sub-­‐Sub-­‐Librarian).</a></li>
  30. 30. ePUB META-INF OEBPScontent.opf mimetype OEBPS↬ <metadata>↬ <manifest>↬ <spine> Container ( iBooks ) Options↬ <guide>
  31. 31. content.opf<?xml version="1.0" encoding="utf-8" standalone="no"?><package xmlns="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/"version="2.0" unique-identifier="bookid"> <metadata> <dc:identifier id="bookid">urn:uuid:9782081266766</dc:identifier> <dc:title>My Little Paris</dc:title> <dc:publisher>Gutenberg Technology</dc:publisher> <dc:date >2012-02-07</dc:date> <dc:creator xmlns:opf="http://www.idpf.org/2007/opf" opf:file-as="Daly, Liza">Vasak,Vladimir</dc:creator> <dc:language>fr</dc:language> <meta name="cover" content="cover-image"/> </metadata> <manifest> <item id="ncxtoc" media-type="application/x-dtbncx+xml" href="toc.ncx" /> <item id="cover-image" media-type="image/jpeg" href="cover.jpg" /> <item id="font1" media-type="application/octet-stream" href="fonts/BZLJKT_HelveticaNeue-Light.ttf" /> <item id="css1" media-type="text/css" href="1.css" /> <item id="page1" media-type="application/xhtml+xml" href="1.html" /> </manifest> <spine toc="ncxtoc"> <itemref idref="page1" linear="yes" /> <itemref idref="page2" linear="yes" /> <itemref idref="page3" linear="yes" /> </spine> <guide> <reference type="cover" title="Cover" href="1.html"/> <reference type="text" title="Cover" href="1.html"/> </guide></package>
  32. 32. media overlays↬ text-to-speech ?
  33. 33. media overlays↬ text-to-speech ?
  34. 34. media overlays ↬ SpeechIn content.opf : <item id="smil-003" href="smil/page1.smil" media-type="application/smil+xml"/>In page1.xhtml : <p> <span id="word1">Once</span> <span id="word2">upon</span> <span id="word3">a</span> <span id="word4">time</span>... </p>
  35. 35. <?xml version="1.0" encoding="UTF-8"?> SMIL<smil xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2011/epub"version="3.0" profile="http://www.idpf.org/epub/30/profile/content/"> <body> <par id="id1"> <!-- Once --> <text src="../page003.xhtml#word1"/> <audio clipBegin="0.562419" clipEnd=".990" src="../audio/yellow_submarine.m4a"/> </par> <par id="id2"> <!-- upon --> <text src="../page003.xhtml#word2"/> <audio clipBegin="0.993" clipEnd="1.345" src="../audio/yellow_submarine.m4a"/> </par> <par id="id3"> <!-- a --> <text src="../page003.xhtml#word3"/> <audio clipBegin="1.345" clipEnd="1.442" src="../audio/yellow_submarine.m4a"/> </par> <par id="id4"> <!-- time --> <text src="../page003.xhtml#word4"/> <audio clipBegin="1.442" clipEnd="1.873659" src="../audio/yellow_submarine.m4a"/> </par> </body></smil>
  36. 36. — animation —JavaScript ?
  37. 37. JavaScript HTML 5 CSS 3 ePub 3ePub 3 (theory)
  38. 38. JavaScript HTML 5 CSS 3 ePub 3Apple (new)
  39. 39. JavaScript HTML 5 CSS 3 ePub 3Apple (new)
  40. 40. LAYOUT TYPES
  41. 41. LAYOUT TYPES
  42. 42. LAYOUT TYPES ab le... ef lowN ot R
  43. 43. LAYOUT TYPES
  44. 44. LAYOUT TYPESPredictable !
  45. 45. Reflowable Fixed-Layout
  46. 46. WHAT ?
  47. 47. ToC fixed-layout<html  xmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"profile="http://www.idpf.org/epub/30/profile/content/"><head> ✗<title>Moby-­‐Dick</title></head><body><nav  id="toc"  epub:type="toc"><h1>Contents</h1><ol><li  id="cover"><a  href="cover.html">Cover</a></li><li  id="titlepage"><a  href="titlepage.html">Title  Page</a></li><li  id="preface_001"><a  href="preface_001.html">Original  Transcriber’s  Notes:</a></li><li  id="introduction_001"><a  href="introduction_001.html">ETYMOLOGY.</a></li> not compulsory<li  id="epigraph_001"><a  href="epigraph_001.html">EXTRACTS  (Supplied  by  a  Sub-­‐ ⇢ links in pageSub-­‐Librarian).</a></li>(...)
  48. 48. viewport + metadata ?In META-INF/com.apple.ibooks.display-options.xml <?xml  version="1.0"  encoding="UTF-­‐8"?> <display_options> <platform  name="*"> <option  name="fixed-­‐layout">true</option> </platform> </display_options>In any xhtml content <meta  name="viewport"  content="width=512,  height=758"></meta>In any css stylesheet body  {  width:  758px;  height:  512px;  }
  49. 49. JavaScript HTML 5 CSS 3 ePub 3ePub 3 (theory)
  50. 50. JavaScript HTML 5 CSS 3 Fixed-Layout ePub 3ePub 3 (theory)
  51. 51. JavaScript HTML 5 CSS 3 Fixed-Layout ePub 3Apple (new)
  52. 52. Standard Retina@2x
  53. 53. standard...
  54. 54. standard... vs.Retina
  55. 55. Standard
  56. 56. Retina@2x
  57. 57. i ze !F ileS
  58. 58. fixed-layout rules <guid e>spread vs. page orientatio size ratio n -lockresolution @media & rendition
  59. 59. fixed-layout limits Retina localStorage “touch” margins-webkit-le tter-spaci n g sc ree n> ! full <
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×