• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 

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

on

  • 16,592 views

 

Statistics

Views

Total Views
16,592
Views on SlideShare
16,344
Embed Views
248

Actions

Likes
15
Downloads
578
Comments
0

7 Embeds 248

http://www.scoop.it 165
https://twitter.com 47
http://www.laconcepterie.net 26
http://pinterest.com 5
http://www.pearltrees.com 3
http://www17.jimdo.com 1
http://testek.jimdo.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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— including HTML5, CSS, SVG, images, and other resources — fordistribution in a single-file format.
    • JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageTechnologies (theory)
    • HTML Result CSS
    • JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageHTML 5
    • Audio+Video Interactivity FlashGeolocation Local Storage
    • DEVICES SUPPORTHTML 5 <canvas> ::geoloc:: <audio> <video> MathML iBooks ✓ Sort Of * ✓ ✓ ✓NOOK Color/ Tablet ✘ ✘ ✓ ✓ ✘Safari Books Online ✓ ✓ ✓ ✓ ✓Kindle Apps ✘ ✘ ✓ ✓ ✘ Kindle Fire ✘ ✘ ✘ ✘ ✘
    • JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageCSS 3 (theory)
    • 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" type="text/css" media="print" href="serif.css"> CSS 3 @media screen { * { font-family: sans-serif } }
    • 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) { … }
    • 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
    • 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; }
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • JavaScript Behavior HTML 5 CSS 3 Content Style ePub 3 PackageePub 3
    • ePUBmimetype OEBPS META-INF Container ( iBooks ) Options
    • NEW OPPORTUNITIES
    • NEW OPPORTUNITIES
    • EPUB 3 FEATURES Semantic Inflection Audio+Video Content Switching Speech & Manifest Fallbacks NCX Embedded Fonts SVG Metadata Media Overlays Triggers+Binding MathML DTBookGuide ⇢ NavigationDocuments
    • 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
    • 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>
    • 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>
    • ePUB META-INF OEBPScontent.opf mimetype OEBPS↬ <metadata>↬ <manifest>↬ <spine> Container ( iBooks ) Options↬ <guide>
    • 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>
    • 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+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>
    • <?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>
    • — 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://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>(...)
    • 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;  }
    • JavaScript HTML 5 CSS 3 ePub 3ePub 3 (theory)
    • JavaScript HTML 5 CSS 3 Fixed-Layout ePub 3ePub 3 (theory)
    • JavaScript HTML 5 CSS 3 Fixed-Layout ePub 3Apple (new)
    • Standard Retina@2x
    • standard...
    • standard... vs.Retina
    • Standard
    • Retina@2x
    • i ze !F ileS
    • fixed-layout rules <guid e>spread vs. page orientatio size ratio n -lockresolution @media & rendition
    • fixed-layout limits Retina localStorage “touch” margins-webkit-le tter-spaci n g sc ree n> ! full <