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

  • 18,316 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
18,316
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
755
Comments
0
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. From HTML 5 & CSS 3...To ePub 3@cwehrung
  • 2. ePub ?
  • 3. ePub ?
  • 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. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageTechnologies (theory)
  • 6. HTML Result CSS
  • 7. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageHTML 5
  • 8. Audio+Video Interactivity FlashGeolocation Local Storage
  • 9. DEVICES SUPPORTHTML 5 <canvas> ::geoloc:: <audio> <video> MathML iBooks ✓ Sort Of * ✓ ✓ ✓NOOK Color/ Tablet ✘ ✘ ✓ ✓ ✘Safari Books Online ✓ ✓ ✓ ✓ ✓Kindle Apps ✘ ✘ ✓ ✓ ✘ Kindle Fire ✘ ✘ ✘ ✘ ✘
  • 10. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageCSS 3 (theory)
  • 11. Animations Shadows Support varies-webkit, -moz, ... Regions
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageePub 3
  • 23. ePUBmimetype OEBPS META-INF Container ( iBooks ) Options
  • 24. NEW OPPORTUNITIES
  • 25. NEW OPPORTUNITIES
  • 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. 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. 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. 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&#x2019;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. ePUB META-INF OEBPScontent.opf mimetype OEBPS↬ <metadata>↬ <manifest>↬ <spine> Container ( iBooks ) Options↬ <guide>
  • 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. media overlays↬ text-to-speech ?
  • 33. media overlays↬ text-to-speech ?
  • 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. <?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. — animation —JavaScript ?
  • 37. JavaScript HTML 5 CSS 3 ePub 3ePub 3 (theory)
  • 38. JavaScript HTML 5 CSS 3 ePub 3Apple (new)
  • 39. JavaScript HTML 5 CSS 3 ePub 3Apple (new)
  • 40. LAYOUT TYPES
  • 41. LAYOUT TYPES
  • 42. LAYOUT TYPES ab le... ef lowN ot R
  • 43. LAYOUT TYPES
  • 44. LAYOUT TYPESPredictable !
  • 45. Reflowable Fixed-Layout
  • 46. WHAT ?
  • 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&#x2019;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. 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. JavaScript HTML 5 CSS 3 ePub 3ePub 3 (theory)
  • 50. JavaScript HTML 5 CSS 3 Fixed-Layout ePub 3ePub 3 (theory)
  • 51. JavaScript HTML 5 CSS 3 Fixed-Layout ePub 3Apple (new)
  • 52. Standard Retina@2x
  • 53. standard...
  • 54. standard... vs.Retina
  • 55. Standard
  • 56. Retina@2x
  • 57. i ze !F ileS
  • 58. fixed-layout rules <guid e>spread vs. page orientatio size ratio n -lockresolution @media & rendition
  • 59. fixed-layout limits Retina localStorage “touch” margins-webkit-le tter-spaci n g sc ree n> ! full <