{"id":105,"date":"2010-11-01T20:02:00","date_gmt":"2010-11-01T20:02:00","guid":{"rendered":"http:\/\/localhost\/spanishclassicbooks\/2010\/11\/01\/implementing-interactivity-in-epub-for-ibooks-english-version-of-interactivity-that-is-the-question\/"},"modified":"2010-11-01T20:02:00","modified_gmt":"2010-11-01T20:02:00","slug":"implementing-interactivity-in-epub-for-ibooks-english-version-of-interactivity-that-is-the-question","status":"publish","type":"post","link":"https:\/\/publiconsulting.com\/spanishclassicbooks\/implementing-interactivity-in-epub-for-ibooks-english-version-of-interactivity-that-is-the-question\/","title":{"rendered":"Implementing interactivity in epub for iBooks (English version of &#8216;Interactivity, that is the question&#8217;)"},"content":{"rendered":"<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\">Following an example on the blog of <a href=\"http:\/\/www.threepress.org\/\">Liza Daly<\/a>, JavaScript and interactivity in iBooks, I realized that iBooks supports JavaScript-based interactivity in epub content. Liza\u2019s article refers also to Nicholas Gallaguer\u2019s blog, and the article <i><a href=\"http:\/\/nicolasgallagher.com\/pure-css-speech-bubbles\/\">Pure CSS speech bubbles<\/a><\/i>.&nbsp;<\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\">I am implementing some interactive features to my books in epub format, which I find very interesting indeed. Here are some of them taking as an example some pages of the book La Dama Boba, by Lope de Vega (<a href=\"http:\/\/www.spanishclassicsbooks.com\/2010\/10\/la-dama-boba.html\">see post<\/a>). In this example, I added some JavaScript-based event handlers.<\/span><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\">First, I give priority to the digitized text, as one would expect. Now images of the manuscript only appear as a pop-up when you click on the &#8216;Manuscrito&#8217; box located at the top of the screen.<\/span><\/div>\n<div style=\"clear: both; text-align: center;\"><a href=\"http:\/\/4.bp.blogspot.com\/_gmSVkljn7Og\/TM8b-bNn_rI\/AAAAAAAAADs\/ANvMMsG6QUI\/s1600\/foto+ipad+pag1.png\" style=\"margin-left: 1em; margin-right: 1em;\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" height=\"400\" src=\"http:\/\/4.bp.blogspot.com\/_gmSVkljn7Og\/TM8b-bNn_rI\/AAAAAAAAADs\/ANvMMsG6QUI\/s400\/foto+ipad+pag1.png\" width=\"300\" \/><\/a><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\"><br \/><\/span><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\">If you tap on the hyperlinked word &#8216;Manuscrito&#8217;, an image of the page will fade in as a popup. Tap on the image again to dismiss it and return to the original text.<\/span><\/div>\n<div style=\"clear: both; text-align: center;\"><a href=\"http:\/\/2.bp.blogspot.com\/_gmSVkljn7Og\/TM8cNva7A-I\/AAAAAAAAADw\/GuxukpfF0xo\/s1600\/foto+ipad+pag1+after.png\" style=\"margin-left: 1em; margin-right: 1em;\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" height=\"400\" src=\"http:\/\/2.bp.blogspot.com\/_gmSVkljn7Og\/TM8cNva7A-I\/AAAAAAAAADw\/GuxukpfF0xo\/s400\/foto+ipad+pag1+after.png\" width=\"300\" \/><\/a><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\"><br \/><\/span><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\">If instead of tapping on the image, you double-click, the image is shown in full screen. With a new double-click, it returns back to text.&nbsp;<\/span><\/div>\n<div style=\"clear: both; text-align: center;\"><a href=\"http:\/\/1.bp.blogspot.com\/_gmSVkljn7Og\/TM8cgCrSpNI\/AAAAAAAAAD0\/9T9MpelO3YE\/s1600\/foto+ipad+pag1+after+2+clicks.png\" style=\"margin-left: 1em; margin-right: 1em;\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" height=\"400\" src=\"http:\/\/1.bp.blogspot.com\/_gmSVkljn7Og\/TM8cgCrSpNI\/AAAAAAAAAD0\/9T9MpelO3YE\/s400\/foto+ipad+pag1+after+2+clicks.png\" width=\"300\" \/><\/a><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\"><br \/><\/span><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\">Second, in the same way as explained above, this system of pop-ups can incorporate references to footer, notes, definitions of uncommon words, references to places, references to historical people, and so on. If you tap on the hyperlinked words in the text, an annotation will fade in as a popup. Tap on the annotation again to dismiss it and return to the original text.<\/span><\/div>\n<div style=\"clear: both; text-align: center;\"><a href=\"http:\/\/4.bp.blogspot.com\/_gmSVkljn7Og\/TM8cqfxGg5I\/AAAAAAAAAD4\/de-88J6wcaU\/s1600\/foto+ipad+pag1+palabra1.png\" style=\"margin-left: 1em; margin-right: 1em;\"><img loading=\"lazy\" decoding=\"async\" border=\"0\" height=\"400\" src=\"http:\/\/4.bp.blogspot.com\/_gmSVkljn7Og\/TM8cqfxGg5I\/AAAAAAAAAD4\/de-88J6wcaU\/s400\/foto+ipad+pag1+palabra1.png\" width=\"300\" \/><\/a><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\"><br \/><\/span><\/div>\n<div style=\"font: 14.0px Times; line-height: 24.0px; margin: 0.0px 0.0px 8.0px 0.0px;\"><span style=\"letter-spacing: 0px;\">I think this example opens up a world of possibilities for implementing interactivity to enhanced ebooks.<\/span><\/div>\n<div><span style=\"letter-spacing: 0px;\"><br \/><\/span><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Following an example on the blog of Liza Daly, JavaScript and interactivity in iBooks, I realized that iBooks supports JavaScript-based interactivity in epub content. Liza\u2019s article refers also to Nicholas Gallaguer\u2019s blog, and the article Pure CSS speech bubbles.&nbsp; I am implementing some interactive features to my books in epub format, which I find very &hellip; <a href=\"https:\/\/publiconsulting.com\/spanishclassicbooks\/implementing-interactivity-in-epub-for-ibooks-english-version-of-interactivity-that-is-the-question\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Implementing interactivity in epub for iBooks (English version of &#8216;Interactivity, that is the question&#8217;)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77,93,66,70,90,94,63],"tags":[],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-epub","category-ibooks","category-interactividad","category-interactivity","category-ipad","category-javascript","category-manuscrito"],"_links":{"self":[{"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":0,"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"wp:attachment":[{"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/publiconsulting.com\/spanishclassicbooks\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}