Κατασκευή διαδραστικού και επαυξημένου φυσικού βιβλίου για την Τριτοβάθμια εκπαίδευση 1: Marker on Top 2: Marker on face 3: Without marker Εικόνα 15: 3D Pop-Up Book επιλογές: 1. Μπροστά στο αναγνωριστικό, κρατώντας το αναγνωριστικό μπροστά στην κάμερα (εικόνα 151) 2. Πάνω στο αναγνωριστικό, προσαρμόζοντας την κάμερα (εικόνα 152) 3. Πάντα στην οθόνη, χωρίς καμία αναωγνώριση οποιουδήποτε αναγνωριστικού (εικόνα 153) Το Wuxia the Fox, ήταν μια πετυχημένη πρσοπάθεια στο Kickstarter [9] που πρόσφερε περισσότερα χαρακτηριστικά από αυτά της Dawn Publications που είδαμε προηγουμένως. Πλέον η εφαρμογή που τρέχει σε ipad αντιδρά και προσαρμόζεται στην συμπεριφορά του χρήστη. Έτσι για παράδειγμα διαφορετικά ηχητικά εφέ θα ακουστούν ανάλογα με τον ρυθμό και τόνο της φωνής του αναγνώστη που διαβάζει δυνατά το βιβλίο. Με την βοήθεια φορετού εξοπλισμού, και συγκεκριμένα μιας μάσκας, είναι δυνατή η εμφάνιση επιπλέον οπτικουακουστικών στοιχείων. Σκοπός του δημιουργού ήταν η δημιουργία ενός υβριδικού βιβλίου που θα βοηθήσει γονείς και παιδιά να βιώσουν διαδραστικές ιστορίες (σχήμα 161). Επίσης στο Kickstarter παρουσιάστηκε το 2014 η προσπάθεια ενός Αυστραλού σχεδιαστή με θέμα ένα επαυξημένο κόμικ, το Modern Polaxis [42]. Το θέμα του ήταν η ζωή ενός ταξιδιώτη και ο αναγώστης με χρήση ipone ή ipad μπορούσε να ζωντανέψει και να ξεκλειδώσει μυστικά της ιστορίας προβάλλοντας στην οθόνη τρισδιάστατες εικόνες και βίντεο. Η επαύξηση μπορούσε να γίνει και στο τυπωμένο βιβλίο αλλά και σε μορφή pdf (σχήμα 162). 1: Wuxia : AR Book 2: Modern Polaxis: AR Book Εικόνα 16: AR Books in Kickstarter Η SmartBound Technology [43] παρουσίασε το 2015 ένα παιδικό διαδραστικό βιβλίο που δεν απαιτούσε κάποια επιπλέον εφαρμογή ή εξωτερική τεχνολογία για να ενεργοποιηθούν τα διαδραστικά του στοιχεία. Στο πίσω μέρος του βιβλίου υπάρχει κρυμμένη η μονάδα που τροφοδοτείται με ρεύμα από μπαταρία μακράς διάρκειας και Διπλωματική εργασία 12
Κατασκευή διαδραστικού και επαυξημένου φυσικού βιβλίου για την Τριτοβάθμια εκπαίδευση Εικόνα 17: SmourtBound Interactive Book είναι υπεύθυνη για την επαύξηση του (σχήμα 17). Πρόκειται ουσιαστικά για ένα βιβλίου ήχου για μικρά παιδιά. Τα παιδιά αγγίζουν πάνω από 150 διαφορετικά στοιχεία του βιβλίου και σαν αποτέλεσμα ακούν ποικίλους ήχους που σχετίζονται με τη μουσική, τα ζώα, τις πόλεις, τα γράμματα του αλφάβητου. Διαθέτει επίσης υποδοχή για ακουστικά καθώς και θύρα usb για επαναφόρτιση. Η Booke παρουσίασε μια εφαρμογή (για iphone και ipad) που όπως τονίζει η ίδια μετατρέπει το φυσικό χάρτινο βιβλίο σε ψηφιακό [23]. Απαραίτητη προϋπόθεση είναι να υπάρχει η αντίστοιχη έκδοση του φυσικού βιβλίου σε ψηφιακό. Μέσω της εφαρμογής, ο χρήστης μπορεί στο φυσικό βιβλίο να προσθέσει σελίδοδείκτες, να επιλέξει κείμενο και να το μοιραστεί στα μέσα κοινωνικής δικτύωσης, να αναζητήσει λέξη ή λέξεις σε ολόκληρο το κείμενο ή σε απόσπασμα αυτού, να δει σχόλια άλλων αναγνωστών για το βιβλίο, καθώς και του ίδιου του συγγραφέα στα μέσα κοινωνικής δικτύωσης. Η εφαρμογή είναι δωρεάν και ολοένα και περισσότεροι εκδότες ενδιαφέρονται να προσθέσουν τα βιβλία τους στην ψηφιακή πλατφόρμα, που ήδη διαθέτει πάνω από 500 τίτλους βιβλίων. Πρόκειται για μια εφαρμογή όπου η φυσική και η ψηφιακή μορφή του βιβλίου συνυπάρχουν ταυτόχρονα. Δεν απαιτείται καμία σάρωση ή μετατροπή των σελίδων εκτύπωσης. Όπως αναφέρουν οι δημιουργοί της, η Booke δείχνει πως η κοινωνική διάσταση δεν περιορίζεται μόνο στα ηλεκτρονικά βιβλία, αλλά μπορεί να υπάρξει τέλεια και στα φυσικά χάρτινα βιβλία. Στον πίνακα 2.1 βλέπουμε για τις συνολικές προσπάθεις διαδραστικών βιβλίων που αναλύσαμε παραπάνω, τον βασικό τρόπο λειτουργίας τους, την προσθήκη ή όχι υλικού στο φυσικό βιβλίο, καθώς και τους περιορισμούς - μειονεκτήματά τους. Πολλές από αυτές έκαναν μεγάλες παρεμβάσεις στο φυσικό βιβλίο, με την ενσωμάτωση πρόσθετου υλικού (αισθητήρες, αγώγιμο μελάνι, ηλεκτρόδια κ.λ.π.), κάπιοες απαιτούσαν από τον αναγνώστη να φοράει ειδική συσκευή κατά την ανάγνωση (μάσκα, ειδικά γυαλιά κ.λ.π) ενώ άλλες απαιτούσαν την χρήση σταθερού ηλεκτρονικού υπολογιστή ή βιντεοπροβολικού μηχανήματος. Ακόμα και αυτές που διατήρησαν την φυσικότητα του βιβλίου και έκαναν χρήση κινητού τηλεφώνου, είχαν το μειονέκτημα η εφαρμογή που εκτελείται σε αυτό να έχει σταθερό και αμετάβλητο περιεχόμενο. Η δική μας προσπάθεια, με το PiBook System όπως θα δούμε παρακάτω, σκποεύει στην δημιουργία ενός απολύτως φυσικού βιβλίου, που θα περιορίζει (ή εξαλείφει) τους προαναφερθέντες περιορισμούς. θα διατηρεί το φυσικό βιβλίο, δεν θα απαιτεί προσθήκη υλικού και η εφαρμογή που θα τρέχει στο κινητό θα μπορεί δυναμικά να αλλάζει την πληροφορία που θα δείχνει στον αναγνώστη. Διπλωματική εργασία 13
Electric Book options --------------------- 1 Create a print PDF 2 Create a screen PDF 3 Run as a website 4 Create an epub 5 Create an app 6 Export to Word 7 Convert source images to output formats 8 Refresh search index 9 Install or update dependencies x Exit Enter a number and hit enter.
#!/bin/bash pandoc chapter1. md -f markdown -t latex -o chapter1. tex pandoc chapter2. md -f markdown -t latex -o chapter2. tex pandoc chapter2. md -f markdown -t latex -o chapter2. tex... pandoc chaptern. md -f markdown -t latex -o chaptern. tex \ documentclass [12pt, a4paper]{ book} \ begin{ document} \include{chapter1} \include{chapter2}... \include{chaptern} \end{document}
@page { margin: 3cm 2cm; padding - left: 1.5 cm; @bottom - center { content: " Pi Book Example"; width: 100%; vertical - align: bottom; border - bottom:.5pt solid; margin - bottom:.7cm; } @top - right { font -size: 200%; text - align: center; vertical - align: middle; content: "("counter(page)")"; margin: 10pt } } html, body { font: 12pt/1.25 Fontin, serif! important; -weasy - hyphens: auto hyphens: auto; } body { text - align: justify; padding: 0! important; background: none! important; } hr. navbar { display: none } h1 { page - break - before: auto! important; -weasy - bookmark - level: none; bookmark - level: none; margin - top: 0! important; } h1, h2, h3, h4 { font - family: inherit! important }
Κατασκευή διαδραστικού και επαυξημένου φυσικού βιβλίου για την Τριτοβάθμια εκπαίδευση 1: Πρώτη δοκιμή 2: Δεύτερη δοκιμή 3: Τρίτη δοκιμή Εικόνα 29: Δοκιμές με την μπροστινή κάμερα Εικόνα 30: Προσανατολισμός σελίδας της βιβλιοθήκης Abbyy Αφού πετύχαμε να έχουμε αναγνώριση σελίδας με χρήση της μπροστά κάμερας του κινητού, το επόμενο βήμα ήταν δημιουργήσουμε το έντυπο βιβλίο μας. Από τον πίνακα 4.2 συμπεραίνουμε πως η δική μας προσπάθεια για την αναγνώριση της σελίδας, δεν απαιτεί καμία προσθήκη υλικού στο ίδιο το βιβλίο (ετικέτες, μηχανισμούς κ.λ.π). Το κινητό τηλέφωνο αποτελεί ταυτόδιπλωματική εργασία 34
Κατασκευή διαδραστικού και επαυξημένου φυσικού βιβλίου για την Τριτοβάθμια εκπαίδευση 1: Η εικόνα που παίρνουμε από τον καθρέφτη της Osmo 2: Η εικόνα μετά την αντιστροφή 3: Η εικόνα που τελικά στέλνουμε στην υπηρεσία Εικόνα 31: Αντιστροφή εικόνας για χρήση από την βιβλιοθήκη αναγνώρισης χρονα το μέσο αναγνώρισης της σελίδας αλλά και το μέσο προβολής της επιπρόσθετης πληροφορίας χωρίς να είναι αναγκαία η χρήση υπολογιστή ή βιντεοπροβολικού μηχανήματος. Τέλος, το κόστος είναι σχεδόν μηδαμινό, μιας και οι βιβλιοθήκες που κάνει χρήση είναι δωρεάν, και το μικρό καθρεφτάκι στοιχίζει μόλις 15 ευρώ με την δυνατότητα να χρησιμοποιηθεί σε όλα τα κινητά τηλέφωνα. 4.1.4 Σύνδεση της εφαρμογής PiBookApp με την ιστοσελίδα Έχοντας αναγνωρίσει μοναδικά την κάθε σελίδα του βιβλίου, μπορούμε να αξιοποιήσουμε την πληροφορία αυτή ώστε να ανάλογα να ενεργοποιούμε αντίστοιχα γεγονότα που θέλουμε να προβάλλουμε στον αναγνώστη για την σελίδα αυτή. Η βασική μας ιδέα όσον αφορά το τι θέλουμε να προβάλλουμε στον αναγνώστη του βιβλίου, ήταν η άντληση και προβολή στην οθόνη του κινητού, υλικού που είναι έτοιμο στο αποθετήριο sto github και αφορά την ιστοσελίδα του βιβλίου Ο Προγραμματισμός της Διάδρασης. Ο αναγνώστης ανοίγει το βιβλίο και καθώς διαβάζει, στις σελίδες που επιθυμεί ο συγγραφέας, εμφανίζεται επιπρόσθετο υλικό που υπάρχει μόνο στην ιστοσελίδα. Μια συλλογή από φωτογραφίες, ένα βίντεο από το youtube με μια παρουσίαση του συγγραφέα, ένα λεπτομερέστερο επεξηγηματικό παράδειγμα για την σελίδα που διαβάζει κλπ. Και μάλιστα όλα αυτά δυναμικά. Ο συγγραφέας αλλάζει τα παραδείγματα που επιθυμεί, προσθέτει ή αφαιρεί φωτογραφικό υλικό και αυτόματα το νέο υλικό παρουσιάζεται στον χρήστη χωρίς καμία αλλαγή στην υπάρχουσα εφαρμογή. Θα ήταν ιδανικό να μπορούσαμε να έχουμε όλη την πληροφορία που θέλουμε να δείξουμε στο κινητό σε αρχεία json (JavaScript Object Notation), που εστιάζουν περισσότερο στο περιεχόμενο και λίγότερο στην μορφοποίηση, είναι μικρότερα σε μέγεθος συγκριτικά με xml αρχεία και περισσότερο συμπαγή. Όπως αναφέρεται και στο άρθρο του Chris Anderson [5], τα json αρχεία είναι πλέον πολύτιμα για τις εφαρμογές κινητών τηλεφώνων, μιας και επιτρέπουν στους χρήστες να χρησιμοποιηούν διαφορετικές εκδόσεις της εφαρμογής αγνωόντας νέα πεδία που δεν χρησιμοποιούνται από παλαιότερες εκδόσεις. Πως λοιπόν από το διαθέσιμο υλικό στο αποθετήριο, μπορούμε να εξάγουμε την πληροφορία που θέλουμε σε json μορφή; Την λύση μας έδωσε η ίδια η μορφή που είναι γραμμένο το υλικό της ιστοσελίδας στο github. Το γεγονός πως ο συγγραφέας επέλεξε να κάνει χρήση της τεχνολογίας Jekyll, έδωσε απάντηση στο ερώτημα αυτό. Το Jekyll είναι ουσιαστικά ένα σύστημα διαχείρισης περιεχομένου (CMS Διπλωματική εργασία 35
{ "images": [ {% for page in site. gallery %} { "image_url": "{{site.url}}{{ site.urlimg }}{{page.image_url}}", "image_thumb_url": "{{site.url}}{{ site.urlimg }}{{page.image_thumb_url}}",
"title": "{{page.title}}", "caption": "{{page.caption}}" } {% unless forloop.last %},{% endunless %} {% endfor %} ] }
@page { margin: 3cm 2cm; padding - left: 1.5 cm; @bottom - center { content: " Pi Book Example"; width: 100%; vertical - align: bottom; border - bottom:.5pt solid; margin - bottom:.7cm; } @top - right { font -size: 200%; text - align: center; vertical - align: middle; content: "("counter(page)")"; margin: 10pt } } html, body { font: 12pt/1.25 Fontin, serif! important; -weasy - hyphens: auto hyphens: auto; } body { text - align: justify; padding: 0! important; background: none! important; } hr. navbar { display: none } h1 { page - break - before: auto! important; -weasy - bookmark - level: none; bookmark - level: none; margin - top: 0! important; } h1, h2, h3, h4 { font - family: inherit! important }
{ "bookpages":[ { "bookimage":"image1", "bookpage ":"(1)", " typeofcontent ":" webview. WebviewActivity", "content":"menu pie" },
{ "bookimage":"image2", "bookpage ":"(3)", " typeofcontent ":" video. VideoPlayerActivity", "content":"orismosa" }, { "bookimage":"image3", "bookpage ":"(8)", " typeofcontent ":" galleryalternative. GalleryAlterActivity", "content ":"" } } ]
Κατασκευή διαδραστικού και επαυξημένου φυσικού βιβλίου για την Τριτοβάθμια εκπαίδευση Για την υλοποίησή του ακολουθήσαμε τα βήματα όπως φαίνονται στην εικόνα 34: 1: Δημιουργία χάρτινης βάσης, Βήμα 1 2: Δημιουργία χάρτινης βάσης, Βήμα 2 3: Δημιουργία χάρτινης βάσης, Βήμα 3 4: Δημιουργία χάρτινης βάσης, Βήμα 4 5: Δημιουργία χάρτινης βάσης, Κάτοψη 6: Δημιουργία χάρτινης βάσης, Πρόσοψη Εικόνα 34: Βήματα για την δημιουργία χάρτινης βάσης για το κινητό Διπλωματική εργασία 43
javascript @top - right {... content: "("counter(page)")";... }
source " https:// rubygems. org" gem " github - pages", group: : jekyll_plugins { } "images": [ {% for page in site. gallery %} { "image_url": "{{site.url}}{{ site.urlimg }}{{page.image_url}}", " image_thumb_url": "{{ site. url}}{{ site. urlimg }}{{ page. image_thumb_url} "title": "{{page.title}}", "bookpage": "{{page.bookpage}}", "caption": "{{page.caption}}" }{% unless forloop.last %},{% endunless %} {% endfor %} ] { } ] "remixes": [ {% for page in site. remix %} { "title": "{{ page.title }}", "codepen": "{{ page.codepen }}", "description": "{{page.description}}", "bookpage": "{{page.bookpage}}", "remix_url": "{{page.remix_url}}" }{% unless forloop.last %},{% endunless %} {% endfor %}
{ } "screencasts ":[ { "type":"orismosa", " videourl":" H3ZAjgOi61w" }, { "type":"orismosb", " videourl":" bmjnao5rwq" }, { "type":"methodosa", "videourl":"km6aakkc -gm" }, { "type":"methodosb", " videourl ":"6 LI_SH9IE -0" }, { "type":"arhetypaa", " videourl":" gqn5hxri1u" }, { "type":"arhetypab", " videourl ":"6 TSBMZDO64" }, { "type":"ergaleiaa", "videourl":" _FnZVCQFxT4" } ] { "bookpages":[ { "bookimage":"image1", "bookpage ":"(1)", " typeofcontent ":" webview. WebviewActivity", "content":"menu pie" }, { "bookimage":"image2", "bookpage ":"(3)", " typeofcontent ":" video. VideoPlayerActivity", "content":"orismosa"
}, { "bookimage":"image3", "bookpage ":"(8)", " typeofcontent ":" galleryalternative. GalleryAlterActivity", "content ":"" } } ] --- layout: galleryapi permalink: "/ galleryapi. json" show_meta: false header: no --- --- layout: remixapi permalink: "/ remixapi. json" show_meta: false header: no --- --- layout: screencastsapi permalink: "/ screencastsapi. json" show_meta: false header: no --- { "remixes": [
{ }, "title": "Audio player", "codepen": "OyJzZq", " description": " SoundCloud Mini player with css record animation", "bookpage": "27", "remix_url": "http://codepen.io/sckarolos/pen/oyjzzq/" { }, "title": "Button", "codepen": "VvYoLm", "description": "Button Concept", "bookpage": "", "remix_url": "http://codepen.io/sckarolos/pen/vvyolm/" { }, "title": "Calculator", "codepen": "voqewj", " description": " Apple 's Calculator fork", "bookpage": "", "remix_url": "http://codepen.io/sckarolos/pen/voqewj/" } ] { } "title": "Camera motion color", "codepen": "VvwXjv", " description": " Motion Detection with Javascript Canvas", "bookpage": "", "remix_url": "http://codepen.io/sckarolos/pen/vvwxjv/" { "images": [ { }, { "image_url": "http ://0.0.0.0:4000/ images/", " image_thumb_url": " http ://0.0.0.0:4000/ images/", "title": "", "bookpage": "", "caption": "" " image_url": " http ://0.0.0.0:4000/ images/ adaptive - menus. png", " image_thumb_url": " http ://0.0.0.0:4000/ images/ adaptive - menus - thumb. png" "title": "adaptive -menus", "bookpage": "",
." }, " caption": Ο",." } ] { } " image_url": " http ://0.0.0.0:4000/ images/ android - emulator. png", " image_thumb_url": " http ://0.0.0.0:4000/ images/ android - emulator - thumb. pn "title": "android -emulator", "bookpage": "", " caption": Ο" Android Emulator // Jekyll Urls public final static String LOCALHOST_SOURCE = " current_ip"; public final static String REPLACE_SOURCE = " current_ip"; public final static String REPLACE_TARGET = " local_ip"; ( same with the one we run j