΄







ΤΟ ΔΙΑΔΡΑΣΤΙΚΟ ΗΛΕΚΤΡΟΝΙΚΟ ΒΙΒΛΙΟ


Νικολάου Μήτρου
Καθηγητή ΕΜΠ
mitrou@cs.ntua.gr










Πρόδρομη έκδοση
(ημιτελής)



Οκτώβριος 2012


Πίνακας περιεχομένων

ΜΕΡΟΣ Ι --- Προκαταρκτικά

ΜΕΡΟΣ ΙΙ - Παραδείγματα

ΜΕΡΟΣ ΙΙI --- Τεχνολογία και τεχνικές υλοποίησης



Πρόλογος

Το βιβλίο αυτό αποτελεί μια έμπρακτη απόδειξη του περιεχομένου του: είναι το ίδιο ένα διαδραστικό ηλεκτρονικό βιβλίο. Είναι ένα μετα-βιβλίο. Γράφτηκε με στόχο να βοηθήσει τόσο τους δημιουργούς, όσο και τους αναγνώστες του είδους του. Με βάση αυτό το στόχο, δομείται σε τρία μέρη. Τα δύο πρώτα περιγράφουν τις δυνατότητες και τα λειτουργικά (λιγότερο τεχνικά) χαρακτηριστικά ενός διαδραστικού ηλεκτρονικού βιβλίου. Περιγράφουν, δηλαδή, το τι μπορεί κανείς να δώσει και να πάρει μέσα από ένα τέτοιο σύγγραμμα. Το τρίτο μέρος απευθύνεται στους τεχνικούς συντελεστές ενός ηλεκτρονικού συγγράμματος, τους έχοντες δηλαδή βασικές γνώσεις προγραμματισμού και διαχείρισης ηλεκτρονικού υλικού. Οι τελευταίοι δεν είναι κατ’ ανάγκην επαγγελματίες της πληροφορικής. Μάλιστα παροτρύνονται οι συγγραφείς του περιεχομένου να εξασκήσουν τις τεχνικές τους δεξιότητες και να παρουσιάσουν οι ίδιοι το προϊόν τους με τις νέες τεχνολογίες.

Το βιβλίο γράφτηκε με αφορμή την έναρξη και για τους σκοπούς του έργου «ΕΛΛΗΝΙΚΑ ΑΚΑΔΗΜΑΪΚΑ ΗΛΕΚΤΡΟΝΙΚΑ ΣΥΓΓΡΑΜΜΑΤΑ». Το έργο αυτό έχει το φιλόδοξο στόχο να κινητοποιήσει, εκπαιδεύσει και υποστηρίξει την ακαδημαϊκή κοινότητα στην παραγωγή και χρήση διαδραστικών ηλεκτρονικών βιβλίων υψηλής στάθμης, ανοικτής πρόσβασης. Ηλεκτρονικό εκπαιδευτικό υλικό χρησιμοποιείται, βεβαίως, στα Πανεπιστήμια εδώ και πολύ καιρό, κυρίως στη μορφή ιστοσελίδων "ηλεκτρονικών μαθημάτων", οργανωμένων με τη βοήθεια κάποιας κατάλληλης διαδικτυακής πλατφόρμας (moodle, claroline, e-class κ.α.). Οι πλατφόρμες αυτές, παρέχουν συνήθως μια ποικιλία από χρήσιμες υπηρεσίες, τόσο στους συγγραφείς του περιεχομένου όσο και στους αναγνώστες του, υπάρχουν δε παραδείγματα σχετικών ιστοτόπων πραγματικά εντυπωσιακά. Η κύρια διαφορά ανάμεσα σε ένα "ηλεκτρονικό μάθημα" του παραπάνω τύπου και ένα ηλεκτρονικό βιβλίο είναι ανάλογη της διαφοράς ανάμεσα σε ένα ντοσιέ σκόρπιων σημειώσεων και ένα έντυπο βιβλίο: το δεύτερο είναι ένα συνεκτικό, αυτοτελές πόνημα, μεταφέρσιμο, αρχειοθετήσιμο και αναζητήσιμο με τους καθιερωμένους κανόνες της βιβλιοθηκονομίας. Όμως, επιπλέον των μοναδικών γνωρισμάτων του κλασικού έντυπου αδελφού του, το ηλεκτρονικό βιβλίο μπορεί να συνδυάσει πολλά από τα μοντέρνα χαρακτηριστικά που αυτάρεσκα επιδεικνύουν οι "πλουμιστές" ηλεκτρονικές εξαδέλφες του - οι ιστοσελίδες ενός ηλεκτρονικού μαθήματος: δυναμική πλοήγηση, ποικιλία μορφοτύπων και μέσων απεικόνισης της πληροφορίας, άμεση αλληλεπίδραση με τον αναγνώστη.

Η γενεσιουργός ιδέα τόσο του έργου, όσο και του παρόντος βιβλίου εδράζεται στις εξής απλές διαπιστώσεις:

Στο παραπάνω πλαίσιο, το παρόν σύγγραμμα φιλοδοξεί να αποτελέσει την πρώτη μαγιά και τον οδηγό για την επιτυχή πορεία του έργου «ΕΛΛΗΝΙΚΑ ΑΚΑΔΗΜΑΪΚΑ ΗΛΕΚΤΡΟΝΙΚΑ ΣΥΓΓΡΑΜΜΑΤΑ», επικαιροποιούμενο και ανατροφοδοτούμενο και από τα αποτελέσματά του. Δεδομένης της ευρείας επιστημονικής εμβέλειας του έργου και των διαφοροποιούμενων αναγκών και μεθόδων των επιμέρους επιστημονικών κλάδων, θα ήταν καλοδεχούμενες αντίστοιχες "θυγατρικές", θεματικές προσπάθειες.
Σε αυτή την πρόδρομη έκδοση, ο στόχος είναι κυρίως η παρουσίαση των δυνατοτήτων των νέων τεχνολογιών μέσα από ένα πανόραμα χαρακτηριστικών παραδειγμάτων εφαρμογής, χωρίς να δίνεται ιδιαίτερη προσοχή (λόγω του περιορισμένου χρονικού πλαισίου συγγραφής του) σε θέματα "καλής πρακτικής" ή βελτιστοποίησης των τεχνικών υλοποίησης. Η έμφαση δηλαδή σε αυτή την έκδοση είναι στο "τι" μπορεί να κάνει κανείς και όχι στο "πώς" μπορεί να το κάνει καλύτερα. Η επόμενη, κανονική πλέον έκδοση θα έχει ασφαλώς να φροντίσει αυτές τις σημαντικές παραλείψεις και να συμπληρώσει τις παραγράφους που, λόγω περιορισμένου χρόνου, εμειναν εδώ ημιτελείς.


Νίκος Μήτρου
Αθήνα, Οκτώβριος 2012




Βοηθήματα πλοήγησης, ανάγνωσης και σχολιασμού

Τα ηλεκτρονικά συγγράμματα, ιδίως στη διαδραστική-πολυμεσική τους μορφή, είναι εκτενή και σύνθετα δημιουργήματα, με ποικιλία προβαλλόμενων αντικειμένων και τρόπων προβολής τους, με εσωτερικές και εξωτερικές παραπομπές, καθώς και άλλες λειτουργίες μη σειριακής προσπέλασης των επιμέρους στοιχείων του. Για να μπορέσει ο αναγνώστης να επιλέξει μια επιθυμητή πορεία ανάγνωσης και να διατηρήσει τη συνέχειά της, είναι απαραίτητο να εφοδιασθεί με κατάλληλα βοηθήματα πλοήγησής του στο σύγγραμα. Σε σχετικό κεφάλαιο του 3ου μέρους θα γίνει εκτενέστερη αναφορά σε κατάλληλους τρόπους ανάπτυξης και παρουσίασης ενός ηλεκτρονικού συγγράμματος, οι οποίοι διευκολύνουν την πλοήγηση, καθώς και στην υλοποίηση των σχετικών βοηθημάτων. Στην παρούσα πρόδρομη παράγραφο δίνονται σύντομες οδηγίες χρήσης των βοηθημάτων πλοήγησης του παρόντος συγγράμματος.

Πίνακας Περιεχομένων. Σημείο εκκίνησης, αλλά και επανόδου πριν και με σκοπό την προσπέλαση ενός νέου κεφαλαίου ή μαθησιακού αντικειμένου, είναι, βεβαίως, όπως και στα έντυπα συγγράμματα, ο Πίνακας Περιεχομένων. Είναι τοποθετημένος στην αρχή του συγγράμματος και κάθε εγγραφή του είναι εφοδιασμένη με σύνδεσμο (link) προς το αναφερόμενο κεφάλαιο ή μαθησιακό αντικείμενο. H επάνοδος στον πίνακα περιεχομένων γίνεται άμεσα και από οποιοδήποτε σημείο του εγγράφου με "κλικ" στον "Πυρφόρο" (άνω δεξιά της σελίδας).

Δυναμικός Σύνδεσμος Επιστροφής. Οποιαδήποτε εσωτερική παραπομπή, ή ακόμη και σειριακή αναζήτηση εντός του εγγράφου απομακρύνει τον αναγνώστη από το τρέχον σημείο μελέτης του. Για την επιστροφή σε αυτό, μετά το πέρας της αναζήτησης ή της μελέτης της παραπομπής, υπάρχει ανάγκη δημιουργίας και χρήσης ενός δυναμικού συνδέσμου επιστροφής. Στο παρόν σύγγραμμα, απλό "κλικ" σε οποιοδήποτε στοιχείο εσωτερικής παραπομπής (εμφανίζεται με το γνωστό, συμβατικό τρόπο, δηλ. σε χρώμα γαλάζιο και υπογραμμισμένο), ή διπλό "κλικ" σε επικεφαλίδα παραγράφου (χρώμα καφέ ή γαλάζιο) ή σε οποιοδήποτε σημείο ρέοντος κειμένου (όπως στην παρούσα παράγραφο), δημιουργεί σύνδεσμο επιστροφής σε αυτό. Ο σύνδεσμος εικονίζεται με αναδυόμενο πλήκτρο σε χρώμα πράσινο κάτω από τον "Πυρφόρο" (άνω δεξιά στη σελίδα) και τελεσφορεί με απλό "κλικ" στο πλήκτρο αυτό. Το πλήκτρο τελικώς αποκρύβεται και επανεμφανίζεται με την επόμενη χρήση. Καθ όλη τη διάρκεια διατήρησης ενεργού του συνδέσμου επιστροφής, η παράγραφος αφετηρίας (και επιστροφής, μέσω του συνδέσμου) χρωματίζεται πράσινη. Δοκιμάστε, κάνοντας απλό "κλικ" στη φράση εσωτερικής παραπομπής "σχετικό κεφάλαιο" πιοπάνω, ή με διπλό "κλικ" ακριβώς σε αυτό το σημείο του κειμένου.

Αναδυόμενα στοιχεία πρόσθετης πληροφόρησης. Μια από τις πολύ χρήσιμες δυνατότητες του διαδραστικού ηλεκτρονικού βιβλίου είναι αυτή της προοδευτικής ή ιεραρχικής παρουσίασης της πληροφορίας με επιλογή και έλεγχο του ίδιου του αναγνώστη. Αυτός ο τρόπος ανάπτυξης και παρουσίασης όχι μόνο βοηθάει στη σταδιακή αφομοίωση της πληροφορίας από τον αναγνώστη με την ενεργό συμμετοχή του, αλλά είναι και η μόνη επιλογή στις περιπτώσεις σύνθετων σχημάτων για την αποφυγή μιας χαοτικής τους εμφάνισης, όπως θα καταδειχθεί σε πολλά από τα παραδείγματα του 2ου Μέρους (δείτε ειδικότερα το παράδειγμα Σχήματα με αναδυόμενες επισημειώσεις και σχόλια και κάντε 'κλικ" στην υπογραμμισμένη λέξη "εικόνα" στο σώμα των σχολίων). Εκτός από τα σχήματα, το ίδιο εφαρμόζεται, και στο κυρίως κείμενο, με απόκρυψη αρχικά δευτερεύουσας, ή λογικά μεταγενέστερης πληροφορίας και εμφάνισής της μετά από επιλογή του αναγνώστη. Πλήκτρα με ετικέτες όπως "Πληροφορίες", "Συμπεράσματα", "Δείξε κώδικα", κ.ά., κρύβουν τέτοια λανθάνουσα πληροφορία, η οποία εμφανίζεται με "κλικ" επί του αντίστοιχου πλήκτρου, και αποσύρεται πάλι με νέο "κλικ". Δοκιμάστε σχετικά τα ακόλουθα πλήκτρα.

Τα αναδυόμενα στοιχεία, όπως αυτό, χρησιμοποιούντα ευρέως σε διαδραστικά σχήματα (svg, flash, ...) και ενεργοποιούνται/απενεργοποιούνται με "κλικ" σε σχετιζόμενα με αυτά πλήκτρα ή με "mouseover" σε στοιχεία του σχήματος στα οποία αναφέρονται. Βελτιώνουν την αναγνωσιμότητα του σχήματος, ενώ προσφέρουν στον αναγνώστη και τη χαρά της αποκάλυψης κρυμμένων στοιχείων

Στο παρόν σύγγραμμα χρησιμοποιούνται, μεταξύ άλλων και τα εξής βοηθήματα για τη διευκόλυνση της πλοήγησης και ανάγνωσης:

1. Πίνακας Περιεχομένων (ΠΠ), με links στις καταχωρημένες παραγράφους. Επιστροφή στον ΠΠ με "κλικ" στον Πυρφόρο (άνω δεξιά)
2. Δυναμικός σύνδεσμος επιστροφής σε σημεία διακοπής της σειριακής πορείας ανάγνωσης (παραπομπές, κλπ). Επιστροφή με "κλικ" στο αναδυόμενο πλήκτρο "ΕΠΙΣΤΡΟΦΗ" (άνω δεξιά, κάτω από τον Πυρφόρο)
3. Αναδυόμενα στοιχεία πρόσθετης πληροφόρησης (όπως το παρόν παράθυρο συμπερασμάτων)


Παράθυρα προβολής εγγράφων PDF και ιστοσελίδων web. Η τρέχουσα τεχνολογία συγγραφής και προβολής "υπερ-κειμένων" (HTML5) δίνει τη δυνατότητα ενθυλάκωσης και προβολής πολλών στοιχείων γνωστών μορφοτύπων, μεταξύ αυτών εγγράφων pdf, αλλά και ιστοσελίδων web. Αυτό μπορεί να αξιοποιηθεί ώστε όλη η πληροφορία, ακόμη και αυτή εξωτερικών παραπομπών, να παρέχεται μέσα στο ίδιο κέλυφος, κάτι το οποίο εμπεδώνει το αίσθημα ανάγνωσης ενός αυτοτελούς, καλά οριοθετημένου συγγράμματος.
Τα παράθυρα προβολής εξωτερικών εγγράφων και ιστοσελίδων αναδύονται και αποκρύπτονται με τους ίδιους μηχανισμούς όπως και τα λοιπά αναδυόμενα στοιχεία που περιγράφηκαν παραπάνω. Δείτε τα παραδείγματα της επόμενης παραγράφου Χρωματικοί κώδικες. Δείτε επίσης το αναδυόμενο στοιχείο βιβλιογραφίας στο τέλος του 1ου Μέρους, όπου έχουμε φωλιασμένα αναδυόμενα στοιχεία προβολής pdf και ιστοσελίδων web. Οι εξωτερικές παραπομπές καθώς και τα πλαίσια των παραθύρων προβολής εξωτερικών ιστοσελίδων εμφανίζονται σε χρώμα κόκκινο, απαιτούν δε σύνδεση της μηχανής στο διαδίκτυο. Αν δεν υπάρχει σύνδεση ή αν η αναφερόμενη ιστοσελίδα δεν είναι προσβάσιμη, τότε εντός του πλαισίου θα εμφανισθεί σχετικό μήνυμα από το φυλλομετρητή.


Χρωματικοί κώδικες Η χρήση χρωματικών κωδίκων βοηθάει τα μέγιστα τον αναγνώστη στη γρήγορη ταξινόμηση των προβαλόμενων στοιχείων, και της παρεχόμενης πληροφορίας, αρκεί να γίνεται με συνέπεια και τη μεγαλύτερη κατά το δυνατόν συμμόρφωση προς τα ήδη καθιερωμένα. Στο παρόν σύγγραμμα χρησιμοποιείται ο παρακάτω χρωματικός κώδικας:

Αναδυόμενο παράθυρο εσωτερικού εγγράφου
Αναδυόμενο παράθυρο εξωτερικής ιστοσελίδας ή εγγράφου
Σύνδεσμος εσωτερικής παραπομπής


Σχόλια αναγνωστών. Το βιβλίο και ο δημιουργός του μπορούν να εγκαθιδρύσουν μια διαλεκτική σχέση με τους αναγνώστες τους και να βελτιωθούν από τις παρατηρήσεις και τα σχόλια που θα λάβουν. Το διαδραστικό ηλεκτρονικό βιβλίο μπορεί να παράσχει τα απαραίτητα εργαλεία ώστε να καταστεί η σχέση αυτή ευκολότερη και αποτελεσματικότερη. Μια σχετικά απλή πρόταση του παρόντος συγγράμματος είναι η εξής: ο συγγραφέας προσημειώνει τις παραγράφους στις οποίες θέλει να δεχθεί σχόλια (μπορεί να είναι και όλες). Με το "κλικ" του σχετικού πλήκτρου "ΣΧΟΛΙΑ" (στο δεξιό περιθώριο της σελίδας) αναδύονται ειδικά πλαίσια σε όλες τις προσημειωμένες παραγράφους για την υποβολή σχολίων (διπλό "κλικ" στο ίδιο πλήκτρο αποκρύβει - χωρίς να σβήνει - τα πλαίσια των σχολίων). Μετά την πληκτρολόγηση των σχολίων και την καταχώρησή τους με το πάτημα του πλήκτρου "Υποβολή" σε κάθε σχετική παράγραφο, ο αναγνώστης θα πρέπει να ολοκληρώσει τη διαδικασία με το πλήκτρο Save. Όλα τα καταχωρηθέντα σχόλια θα εμφανιστούν σε ένα παράθυρο, απ' όπου με "copy-paste" μπορούν να γραφούν σε ένα αρχείο για περαιτέρω προώθηση (π.χ. στο συγγραφέα ή σε άλλον συν-αναγνώστη). Υπάρχει η δυνατότητα να "σωθεί" και ολόκληρο το σύγγραμμα μαζί με τα σχόλια. αν αυτό είναι επιθυμητό.


Απαιτήσεις σε εξοπλισμό και εργαλεία

Ως εργαλείο ανάγνωσης του παρόντος συγγράμματος μπορεί να χρησιμοποιηθεί οποιοσδήποτε φυλλομετρητής (browser) υποστηρίζει HTML5. Προς το παρόν, δεν είναι όλοι οι φυλλομετρητές απολύτως συμβατοί με αυτήν την τελευταία έκδοση της HTML. Προτείνεται λοιπόν ο φυλλομετρητής Chrome της Google (τελευταία έκδοση 22, διαθέσιμη δωρεάν από τον ιστότοπο της Google --για Windows 8/7/Vista/XP https://www.google.com/intl/en/chrome/browser/).

Υπάρχουν στο web αρκετές διαγνωστικές υπηρεσίες που μας δίνουν πληροφορίες για το φυλλομετρητή που χρησιμοποιούμε, και τη συμβατότητά του με τα χαρακτηριστικά της HTML5, όπως π.χ. http://detectmybrowser.com/, ή εδώ.

Για την προβολή των διαδραστικών σχημάτων - applets που περιλαμβάνει το παρόν σύγγραμμα, απαιτείται επιπλέον η τελευταία έκδοση της java (Οκτ. 2012: 7.9), την οποία μπορεί κανείς να καταφορτώσει δωρεάν από τον ιστότοπο της ORACLE (http://java.com/en/download/index.jsp)


Δικαιώματα χρήσης

Το παρόν σύγγραμμα παρέχεται υπό τους όρους της άδειας Creative Commons Public Licence (CCPL) "Αναφορά-Μη-Εμπορική Χρήση-Παρόμοια Διανομή 3.0 Ελλάδα"






ΜΕΡΟΣ Ι --- Προκαταρκτικά

I.1 Εισαγωγή

Παραδόξως, στον όρο «ηλεκτρονικό βιβλίο» εκείνο που χρειάζεται περισσότερη επεξήγηση είναι το ίδιο το «βιβλίο» και όχι ο προσδιορισμός του «ηλεκτρονικό». Ακριβέστερα, για να ορίσουμε το "ηλεκτρονικό βιβλίο", πρέπει να βρούμε εκείνα τα χαρακτηριστικά του βιβλίου τα οποία διατηρούνται και στην ηλεκτρονική του μορφή, τη μορφή δηλαδή που αναπτύσσεται, ανταλλάσσεται και προβάλλεται από ψηφιακές (ηλεκτρονικές) μηχανές.

Στο λεξικό Μπαμπινιώτη το βιβλίο ορίζεται ως «το σύνολο χειρόγραφων ή τυπωμένων φύλλων χαρτιού ίδιων διαστάσεων, που είναι συρραμμένα στη μία πλευρά και καλύπτονται από εξώφυλλα, το οποίο συνήθως εκδίδεται σε πολλά αντίτυπα». Στη Wikipedia διαβάζουμε: «A book is a set of written, printed, illustrated, or blank sheets, made of ink, paper, parchment, or other materials, usually fastened together to hinge at one side. A single sheet within a book is called a leaf, and each side of a leaf is called a page. A book produced in electronic format is known as an electronic book».

Και στους δύο παραπάνω ορισμούς το «δέσιμο» των φύλλων σε ένα συμπαγές σώμα είναι καθοριστικό γνώρισμα του βιβλίου, διασφαλίζοντας ένα φυσικό κέλυφος καθώς και μια μοναδική σειρά παρουσίασης. Όμως, σημαντικότερο και από τα παραπάνω είναι ότι κάθε βιβλίο έχει και μία μοναδική αφήγηση με αρχή, μέση και τέλος, διαπραγματεύεται ένα θέμα με μια σχετική πληρότητα και αυτοτέλεια. Έχει, με άλλα λόγια, και ένα νοηματικό κέλυφος. Σε συνέχεια και ως απόρροια των παραπάνω το βιβλίο έχει και τα εξής χαρακτηριστικά: είναι ταυτοποιήσιμο (π.χ. με το διεθνή μοναδικό αριθμό του ISBN), μεταφέρσιμο, αρχειοθετήσιμο και αναζητήσιμο με βάση καθιερωμένα βιβλιοθηκονομικά πρότυπα. Τέλος, ένα βιβλίο δεν θα πρέπει να είναι παραποιήσιμο, αλλά ούτε και αποποιήσιμο από μεριάς του συγγραφέα ("παν γνήσιο αντίτυπο, φέρει την υπογραφή του (της) συγγραφέως"). Αν τα παραπάνω γνωρίσματα τα μεταφέρουμε, με την απαιτούμενη αφαίρεση, στο ηλεκτρονικό τοπίο, θα μπορέσουμε να διακρίνουμε το ηλεκτρονικό βιβλίο από άλλους ηλεκτρονικούς «συγγενείς» του, όπως ένα φάκελο (ασύνδετων) ηλεκτρονικών εγγράφων, τις ιστοσελίδες ενός «ψηφιοποιημένου» μαθήματος, ή ένα ηλεκτρονικό περιοδικό.

Το κυρίως σώμα του παρόντος συγγράμματος είναι γραμμένο σε HTML5. Όπως ακροθιγώς αναφέρθηκε στις πρόδρομες παραγράφους και θα γίνει σαφέστερο κατά την πορεία της ανάγνωσης, η HTML5 παρέχει τη δυνατότητα ενθυλάκωσης όλων των επιμέρους στοιχείων που μορούν να συγκροτήσουν ένα ηλεκτρονικό βιβλίο: κειμένου, σχημάτων, ηχητικών στοιχείων και video, παρουσιάσεων διαφανειών, εγγράφων pdf, ακόμη και άλλων εγγράφων html ή ιστοσελίδων web. Έτσι, η HTML5 μπορεί να παίξει το ρόλο του κελύφους στο οποίο κάθε βιβλίο πρέπει να ενθυλακώνεται.

Ο δεύτερος και σημαντικότερος όρος τον οποίο πραγματεύεται το παρόν βιβλίο, και μάλιστα με πληθώρα παραδειγμάτων, είναι η "διαδραστικότητα". Η διαδραστικότητα (interactivity) αποτελεί σημαντική εκπαιδευτική μέθοδο (για να περιοριστούμε στην εκπαίδευση), αναφέρεται δε τόσο στην επικοινωνία δασκάλου-μαθητή (διδασκαλία), όσο και στη σχέση μαθητή με κάποιο μαθησιακό αντικείμενο (βιβλίο, εικόνα, εργαστήριο, ...). Στην πρώτη περίπτωση, ο δάσκαλος προκαλεί την ενεργό συμμετοχή των μαθητών με ερωτήσεις, κουίζ, ασκήσεις. Ο μαθητής καλείται να συμμετάσχει και να απαντήσει σε αυτά σε πραγματικό χρόνο. Στη δεύτερη περίπτωση, το ρόλο του δασκάλου αναλαμβάνει ένα διαδραστικό εκπαιδευτικό εργαλείο. Αυτό περιέχει στοιχεία "ενεργά", τα οποία "αντιδρούν" στις ενέργειες του μαθητή, αποκαλύπτοντας κάποια κρυμμένη πληροφορία, εξομοιώνοντας ένα φυσικό φαινόμενο ή αξιολογώντας την πρόοδο μάθησης του μαθητή, μέσα από κατάλληλες διεπαφές (user interfaces). Σε επόμενα κεφάλαια θα εξεταστεί αναλυτικότερα η διαδραστική εκπαιδευτική μέθοδος, και ειδικότερα μέσα από ηλεκτρονικά μαθησιακά εργαλεία.

Ποιά είναι όμως η θέση των νέων μέσων και, ειδικότερα, του ηλεκτρονικού βιβλίου στην εκπαίδευση; Οι τεχνολογίες των προσωπικών ηλεκτρονικών υπολογιστών και του Διαδικτύου έφεραν, χωρίς αμφιβολία μια επανάσταση σε πολλούς τομείς της ανθρώπινης δραστηριότητας, και, φυσικά, στο χώρο της μάθησης. Εξόπλισαν τον καθένα μας ατομικά με πανίσχυρα εργαλεία αναζήτησης και επεξεργασίας της πληροφορίας, η οποία γίνεται διαθέσιμη την ίδια τη στιγμή της παραγωγής της σε όλες τις γωνιές του πλανήτη. Ωστόσο ο αιώνας που μόλις εξέπνευσε γέννησε και άλλες σχετικές "επαναστάσεις": Το φίλμ, το ραδιόφωνο, την τηλεόραση, την ηχο-κασέτα, τις προγραμματιζόμενες ψηφιακές μηχανές. Κάθε φορά, ενθουσιώδεις (όσο και επιπόλαιες) φωνές έσπευδαν να αναγγείλουν το τέλος της παραδοσιακής ζωντανής διδασκαλίας και των έντυπων βιβλίων εν όψει της "κατά κράτος επικράτησης" των "νέων" μέσων. Δεν επαληθεύτηκαν. Είναι ισχυρή η πεποίθηση του γράφοντα ότι η συστηματική εισαγωγή και χρήση των νέων μέσων (κυρίως του ήχου, του video και των διαδραστικών εργαλείων) στην εκπαιδευτική φαρέτρα θα αλλάξει μεν δραστικά τη μαθησιακή διαδικασία, όμως πάντα θα λειτουργεί ως συμπλήρωμα της βασικής εκπαιδευτικής μεθόδου που έχει ως αφατηρία τη ζωντανή διδασκαλία και το σχολείο. Η τελευταία φυσικά θα πρέπει να προσαρμοστεί ώστε να αξιοποιήσει τη δυναμική των νέων μέσων για να πολλαπλασιάσει τα αποτελέσματά της. Στην τριτοβάθμια εκπαίδευση, η χρήση του ηλεκτρονικού βιβλίου, και ειδικότερα εκείνου σε καθεστώς ανοικτής πρόσβασης, θα προσφέρει ουσιαστικά και χωρίς σημαντικό κόστος την (πολυδιαφημισθείσα στο ελληνικό πανεπιστήμιο) "πολλαπλή βιβλιογραφία", ενώ θα παρέχει ενσωματωμένα σε ένα αυτοτελές κέλυφος μεθόδους και εργαλεία τα οποία είναι συνήθως διαθέσιμα ως διάσπαρτες υπηρεσίες παγγκόσμιου ιστού (web services) μέσω του Διαδικτύου.







I.2 Η Διαδραστικότητα στη μαθησιακή διαδικασία

I.3 Παρουσίαση/οπτικοποίηση δεδομένων

I.4 Μορφές και μέθοδοι διάδρασης

I.5 Αναφορές στην τεχνολογία

I.6 Από το έντυπο βιβλίο στα διαδραστικά μαθησιακά αντικείμενα

[Λίγα σχόλια και αναφορές στα παραδείγματα του 2ου Μέρους]

π.χ. Διαδραστική γεωμετρία και άλγεβρα]

I.7 Μεταδεδομένα-αρχειοθέτηση-αναζήτηση

I.8 Συμπεράσματα



BI.2 Εκπαιδευτικά μοντέλα και θεωρίες μάθησης

  • David C. Leonard, Learning Theories A to Z", Greenwood 2002
  • Abstract Swift changes in educational technology are transforming the landscape of our society and how we transfer knowledge in a digital world. Teachers, administrators, and education students need to stay abreast of these developments. Yet while the new educational software, technologies, and networks may be available, the learning theories and methods required to take complete advantage of the tools are often neglected. Learning theories are a crucial element of education studies for anyone involved with students from pre-school to higher education and business training. This book is a substantive dictionary of over 500 terms relating to learning theories and environments. Definitions range from approximately 100 to 700 words, and each term is identified by the primary type of learning theory to which it applies: cognitivism, constructivism, behaviorism, humanism, or organizational learning. An annotated bibliography provides further resources to the most important writings about learning theories.

BI.3 Οπτικοποίηση δεδομένων

  • J. Heer (Stanford University), B. Shneiderman (University of Maryland), "Interactive dynamics for visual analysis -- A taxonomy of tools that support the fluent and flexible use of visualizations", ACMqueue, Feb. 2012
  • Abstract

    HTML-Document
    PDF-Document










ΜΕΡΟΣ ΙΙ - Παραδείγματα διαδραστικών μαθησιακών αντικειμένων


Απλοί μηχανισμοί με κίνηση (SVG, animated GIF, flash)

Ωρολογιακός μηχανισμός, με πλήκτρο εκκίνησης-παύσης

Το σχήμα αυτό είναι τεχνολογίας SVG (scalable vector graphics) και εξομοιώνει την κίνηση απλού ωρολογιακού μηχανισμού, με πλήκτρο εκκίνησης/παύσης. Το κύριο πλεονεκτήματα των SVG είναι η κλιμακωσιμότητα χωρίς τα προλήματα της απεικονιστικής ανάλυσης (resolution) από τα οποία υποφέρουν οι τεχνολογίες τύπου raster. Μπορείτε να δοκιμάσετε την κλιμακωσιμότητα αυξομειώνοντας (resizing) το μέγεθος του παραθύρου του φυλλομετρητή σας.
Πάτημα του πλήκτρου "Ρολόι" φέρνει στο προσκήνιο ένα πλήρες μηχανικό ρολόι, ενώ το πλήκτρο "minion" δημιουργεί μια μινιατούρα του ρολογιού αυτού στο δεξιό περιθώριο της σελίδας μας. Τα συνοδευτικά αυτά σχόλια είναι εκτός SVG, γραμμένα σε html, γιαυτό και δεν κλιμακώνονται ανάλογα.

..........................

Λειτουργία τετράχρονης μηχανής

Τα παραπάνω σχήματα, ένα svg με ενσωματωμένο animated GIF (αριστερά) και ένα swf (τεχνολογίας flash, δεξιά), εξομοιώνουν και εξηγούν τη λειτουργία τετράχρονης μηχανής. Δεξιά απεικονίζεται ο θερμοδυναμικός κύκλος του Otto.
Τεχνικές πληροφορίες: Δείτε τις σχετικές παραγράφους Animated GIF και Animation με flash - ενθυλάκωση ή μετατροπή σε HTML5 του 3ου Μέρους.

ΠΕΡΙΣΣΟΤΕΡΕΣ ΠΛΗΡΟΦΟΡΙΕΣ ΓΙΑ ΤΟΝ ΚΥΚΛΟ ΤΟΥ OTTO: Otto_cycle--Wikipedia




Εξομοίωση κινήσεων με διαδραστική αλλαγή των παραμέτρων



Εξομοίωση ευθύγραμμης, τμηματικά ομαλής κίνησης

Το παραπάνω διαδραστικό σχήμα εξομοιώνει ευθύγραμμη, τμηματικά ομαλή κίνηση, με τη βοήθεια δύο στοιχείων που τίθενται σε κίνηση: Μιας ορθογώνιας πράσινης μπάρας και μιας γαλάζιας σφαίρας. Ο αναγνώστης έχει τη δυνατότητα να μετακινήσει τη θέση των σημείων αλλαγής της ταχύτητας, να αφαιρέσει σημεία ή να προσθέσει νέα. Το σχήμα εμπεριέχει επίσης εγκιβωτισμένα σχόλια (στο μπεζ πλαίσιο δεξιά) τα οποία, όντας μέρος του κώδικα SVG, κλιμακώνονται κατ' αναλογία με το σχήμα.
Τεχνικές πληροφορίες: Για τα animations, στην παράγραφο Animation σε SVG. Για τα εγκιβωτισμένα σχόλια, στην Μορφοποίηση-προβολή κειμένου .


Σχήματα svg με απλές διαδραστικές λειτουργίες και προβολή μεταδεδομένων (SVG)

ΣΥΝΟΛΟ:

Χρωματισμός συνόλων

Το παρόν παράδειγμα χρησιμοποιείται για την επίδειξη απλών διεπαφών διάδρασης σε σχήματα SVG. Λίστες επιλογής στοιχείων, πλήκτρα ελέγχου ή επιλογής διακριτών τιμών παραμέτρων, "σύρτες" επιλογής αναλογικών τιμών (sliders), είναι ορισμένες από τις διεπαφές που επιδεικνύονται εδώ.
Από μια λίστα επιλογής ο αναγνώστης επιλέγει ένα σύνολο προς χρωματισμό (εδώ από δύο: ένα σετ ρούχων ή ένα σπίτι). Από δεύτερη λίστα, επιλέγει το μέρος (π.χ. πανταλόνι ή πουκάμισο). Με χρήση τριών αναλογικών "συρτών" , επιλέγει το χρώμα κάθε μέρους (δείχνεται δυναμικά το αριθμητικό μείγμα των χρωμάτων). Μπορεί επίσης να επιλέξει μέγεθος εμφάνισης (από τρία διακριτά), ή και να περιστρέψει το σύνολο (με το "σύρτη" κάτω αριστερά). Τέλος, μπορεί να εμφανίσει πληροφορία (metadata) σχετική με το σχήμα στα ελληνικά ή τα αγγλικά.


Τεχνικές πληροφορίες: Για περισσότερα παραδείγματα και τεχνικές υλοποίησης γραφικών διεπαφών σε SVG δείτε το CARTONET site



Ενα ακόμη πρόβλημα Φυσικής: Βολές

Πειράματα Βολών

Με τη βοήθεια δύο συρτών επιλέγεται η γωνία ανύψωσης του κανονιού και η (αρχική) ταχύτητα του βλήματος, η δε βολή πραγματοποιείται με το πάτημα του πλήκτρου "Πυρ!". Τα δύο πλήκτρα των στόχων (Στοχος1: εδάφους, Στοχος2: αέρος) προκαλούν τυχαία μετατόπιση των αντίστοιχων στόχων. Ο αναγνώστης μπορεί να επιβεβαιώσει τις βασικές εξισώσεις των βολών, όπως του μέγιστου ύψους και του βεληνεκούς, για συγκεκριμένες τιμές γωνίας ανύψωσης και αρχικής ταχύτητας βλήματος. Μπορεί ακόμη να "παίξει" προσπαθώντας να πετύχει τους στόχους με κατάλληλη ρύθμιση των δύο παραμέτρων, είτε με δοκιμές, είτε με αναλυτικούς υπολογισμούς - δίνονται οι συντεταγμένες του στόχου αέρος. (Για την κλίμακα των αποστάσεων που σημειώνονται στο σχήμα, η διάρκεια της βολής έχει επιταχυνθεί κατά 10).



Ενσωματωμένες παρουσιάσεις διαφανειών

Οι παρουσιάσεις διαφανειών (slide presentations ή powerpoint presentations, από το φερώνυμο εργαλείο της microsoft) είναι ο πλέον διαδεδομένος τρόπος ζωντανών παρουσιάσεων. Απλές ή και με animations, σε αμφιθέατρα διδασκαλίας ή σε αίθουσες συνεδρίων, δίνουν με παραστατικό τρόπο τα κύρια σημεία μιας ομιλίας και αποτελούν συνήθη συμπληρώματα (ως χωριστά αρχεία) του εκπαιδευτικού υλικού ενός μαθήματος ή των πρακτικών ενός συνεδρίου. Τελευταία δε συνδυάζονται με το αντίστοιχο οπτικο-ακουστικό υλικό της παρουσίασης και παρέχονται μέσω διαδικτύου με τη βοήθεια κατάλληλου εξυπηρετητή (web server). Γιατί όχι και ενσωματωμένες σε ένα ηλεκτρονικό βιβλίο;

Στο παρόν σύγγραμμα επιδεικνύονται διάφοροι τρόποι ενσωμάτωσης διαφανειών: από απλές ακολουθίες εικόνων raster (jpeg, gif κ.ά), έως πιο σύνθετες, (π.χ. τεχνολογίας svg με animations). Ενσωμάτωση πολυμεσικών παρουσιάσεων (slides+ήχος+εικόνα παρουσιαστή) θα εξεταστεί σε επόμενη έκδοση.

Ακολουθίες εικόνων raster σε πλαίσια html



Ένας απλός μηχανισμός κυλιόμενων διαφανειών (slide banner)

Τρόποι μετάβασης: : | | | | |

Slide banner με HTML και SMIL

Μια απλή υλοποίηση ενός 'slide-banner', με χρήση SMIL attributes και τεχνικές που περιγράφονται στο site



Παρουσίαση διαφανειών svg

Στα δύο προηγούμενα παραδείγματα οι προβαλλόμενες διαφάνειες είναι τύπου raster. Συνοδεύονται συνεπώς από όλα τα προβλήματα κλιμακωσιμότητας και ανάλυσης προβολής αυτού του τύπου. Στο επόμενο παράδειγμα προβάλλονται διαφάνειες τύπου svg. Στην πραγματικότητα πρόκειται για ένα ενιαίο "σχήμα" svg, οργανωμένο σε στρώματα (layers), όπου κάθε στρώμα αναδύεται ή αποκρύπτεται με το "κλικ" του ποντικιού σχηματίζοντας τη σχετική διαφάνεια. Στο Μέρος III περιγράφεται η τεχνική της συγκεκριμένης μεθόδου, καθώς και άλλες τεχνικές δημιουργίας και προβολής διαφανειών τύπου svg.

>>>>>>>>>>>> Τα προκαταρκτικά σε διαφάνειες

Η δράση «ΕΛΛΗΝΙΚΑ ΑΚΑΔΗΜΑΪΚΑ ΗΛΕΚΤΡΟΝΙΚΑ ΣΥΓΓΡΑΜΜΑΤΑ» σε διαφάνειες





Επισημείωση σχημάτων

Σχήματα με αναδυόμενες επισημειώσεις και σχόλια

Αναδυόμενα σχόλια σε σχήματα SVG και flash

Η επισημείωση σχημάτων με τρόπο ώστε τα σχόλια να αναδύονται όταν ο δείκτης (mouse) διέρχεται πάνω από τα επισημειωμένα στοιχεία (mouseover) ή με τη χρήση ειδικών πλήκτρων, είναι μια πολύ προσφιλής διαδραστική μέθοδος. Όπως σημειώθηκε και στην εισαγωγική παράγραφο των βοηθημάτων για τα αναδυόμενα στοιχεία , η προοδευτική ή επιλεκτική παρουσίαση της πληροφορίας βελτιώνει την αναγνωσιμότητα (ειδικά των σχημάτων) και βοηθάει στην καλύτερη αφομοίωσή της. Αυτό ισχύει πολύ περισσότερο όταν προκαλείται με πρωτοβουλία του ίδιου του αναγνώστη υπό μορφή μικρών σταδιακών "ανακαλύψεων". Στο παρόν παράδειγμα παρουσιάζονται δύο τέτοια σχήματα, ένα τεχνολογίας SVG (αριστερά) και ένα τεχνολογίας flash (δεξιά). Το πρώτο είναι εφοδιασμένο και με ένα ευρετήριο για τον εντοπισμό των επισημειωμένων στοιχείων (κτηρίων). Με mouseover σε κάθε εγγραφή του ευρετηρίου, αναδεικνύεται χρωματικά το αντίστοιχο κτήριο και αναδύεται η σχετική επισημείωση. Όσον αφορά στην αναγνωσιμότητα του σχήματος, δείτε συγκριτικά πώς θα ήταν η εικόνα με το σύνολο των επισημειώσεων να προβάλλονται. Το δεύτερο σχήμα (δεξιά) προσφέρει και άλλες διαδραστικές λειτουργίες, όπως ένα διαδραστικό γλωσσάρι, ή το σχηματισμό οργάνων σε μορφή puzzle (είναι δανεισμένο από το site http://educypedia.karadimov.info/education/anatomy.htm)





Διαδραστικοί χάρτες

Προοδευτική ανάπτυξη διαδρομών με επισημειώσεις



Αναπτυσσόμενες διαδρομές σε χάρτες

Ένα στοιχείο κίνησης στους χάρτες μπορεί να είναι δυναμικά αναπτυσσόμενες διαδρομές, π.χ. μέσων μεταφοράς ή ιστορικές διαδρομές (προσώπων, ομάδων κλπ). Στο παράδειγμά μας, προσθέσαμε στο χάρτη της Πολυτεχνειούπολης Ζωγράφου (τον ίδιο που χρησιμοποιήσαμε και στο προηγούημενο παράδειγμα) μια διαδρομή λεωφορείου, με στάσεις και αντίστοιχες επισημειώσεις για τα δρομολόγια (αναδύονται με mouseover στις στάσεις). Η τεχνική που χρησιμοποιήθηκε εξηγείται στη σχετική παράγραφο του 3ου Μέρους.



Διαστρωματωμένη παρουσίαση γεωγραφικών στοιχείων - map-layer control

Η σύγχρονη χαρτογραφία είναι εφοδιασμένη με πανίσχυρα εργαλεία συλλογής, διαχείρισης, επεξεργασίας και οπτικοποίησης γεωχωρικών δεδομένων. Στην καρδιά αυτής της αλυσίδας ενεργειών βρίσκονται οι γεωχωρικές βάσεις αποθήκευσης, με χρήση μιας ποικιλίας μοντέλων για τα φυλασσόμενα δεδομένα. Παράλληλα, η ανάπτυξη των τεχνολογιών του παγκόσμιου ιστού έχει δώσει τη δυνατότητα δυναμικής σύνθεσης χαρτών από εξυπηρετητές web με άντληση δεδομένων από τις βάσεις αυτές, και παρουσίασης των χαρτών στους χρήστες μέσω του Διαδικτύου. Κυρίαρχο στη σύνθεση και οπτικοποίηση χαρτών είναι το μοντέλο διαστρωμάτωσης, σύμφωνα με το οποίο ομοειδή δεδομένα περιλαμβάνονται σε ένα στρώμα, ο δε τελικός χάρτης προκύπτει από την υπέρθεση επιλεγμένων στρωμάτων. Μια προφανής διάδραση που μπορεί να αναπτυχθεί είναι αυτή της πρόσθεσης ή αφαίρεσης στρωμάτων με τη βοήθεια κατάλληλων πλήκτρων, όπως στο διπλανό σχήμα.

[Έχουν χρησιμοποιηθεί εσωτερικά στο svg πλήκτρα ελέγχου, (όπως στο παράδειγμα πιο κάτω), επειδή ο Chrome browser έχει πρόβλημα με την εντολή getSVGDocument(), όταν τα controls είναι στην HTML]

Το παραπάνω παράδειγμα διαδραστικού χάρτη είναι δανεισμένο (και ελαφρά διασκευασμένο) από το CARTO-NET. Δείτε το χάρτη σε μεγέθυνση. Σε άλλες περιπτώσεις εισάγεται και η χρονική διάσταση, οπότε ένας διαδραστικός χάρτης μπορεί να παρουσιάζει τη χρονική μεταβολή ενός συγκεκριμένου στοιχείου, όπως: της βλάστησης, της μέσης θερμοκρασίας, της βροχόπτωσης, κ.α. Στο επόμενο απλό παράδειγμα, δείχνεται η κατανομή των πολιτειών των Η.Π.Α. στα κόμματα για τις εκλογικές αναμετρήσεις από το 1900 έως και το 2008, με βάση ένα χρωματικό κώδικα.


Χάρτες χρονικής εξέλιξης

Παράδειγμα χάρτη χρονικής εξέλιξης. Δανεισμένο από το [Interactive and Animated Scalable Vector Graphics and R Data Displays, 2012] HTML-Document, PDF-Document




Σύνθετα διαδραστικά σχήματα και πολυμέσα


Στη συνέχεια παρουσιάζονται ορισμένα πιο σύνθετα παραδείγματα διαδραστικών μέσων. Το πρώτο από αυτά είναι ένας διαδραστικός χάρτης, ο οποίος δίνει σε οπτικοποιημένη μορφή ένα πλήθος δημογραφικών στοιχείων ανά πολιτεία, για τις Ηνωμένες Πολιτείες της Αμερικής, όπως τον πληθυσμό, τον αριθμό των νοικοκυριών, την εθνολογική και ηλικιακή σύνθεση του πληθυσμού, κ.ά. Εάν τα στοιχεία αυτά δίνονταν περιγραφικά ή και σε πίνακες, θα απαιτούσαν πολλές σελίδες του παρόντος βιβλίου. Ακολουθούν παραδείγματα επισημείωσης ποιλυμεσικών αντικειμένων (ήχου και video).

'Ενας σύνθετος διαδραστικός χάρτης

Παράδειγμα σύνθετου διαδραστικού SVG, δανεισμένο από το [CARTO-NET].





Επισημείωση Πολυμέσων (media annotation)


Επισημείωση τραγουδιών




0:00

Ποίημα ΣΑΝΤΟΡΙΝΗ (Γυμνοπαιδία), Γ. Σεφέρη


ΥΠΟΤΙΤΛΙΣΜΟΣ video

1 00:00:01,000 --> 00:00:03,000 Big Buck Bunny: .................... This is BBBunny with Betty, the butterfly . 2 00:00:03,00 --> 00:00:06,000 Big Buck Bunny: .................... He is looking fondly at her, 3 00:00:06,00 --> 00:00:8,000 Big Buck Bunny: ..................... but, suddenly, 4 00:00:08,00 --> 00:00:10,000 Big Buck Bunny: ..................... an apple is dropped down and kills her! 5 00:00:10,000 --> 00:00:20,000 video 1: END
1 00:00:01,000 --> 00:00:05,000 Bear: ............................ Αυτός είναι ο Μπαλού! 2 00:00:05,00 --> 00:00:09,000 Bear: ............................ ... Ψάχνει για σολωμούς 3 00:00:09,00 --> 00:00:11,000 Bear: ............................ .ομως τον ενοχλούν τα πουλιά! 4 00:00:11,000 --> 00:00:20,000 video2: ΤΕΛΟΣ




Σύνθετα διαδραστικά σχήματα με Applets

Τα java applets είναι μικρά προγράμματα εφαρμογών, συνήθως καταφορτώσιμα από το Διαδίκτυο, τα οποία ενσωματώνονται σε μεγαλύτερα προγράμματα ή ηλεκτρονικά έγγραφα (όπως έγγραφα html) και παρέχουν την ευελιξία και τη δύναμη της συγκεκριμένης γλώσσας προγραμματισμού. Αυτό που χρειάζονται για να "τρέξουν" είναι μια Java Vitual Machine (VM), η οποία είναι ελεύθερα διαθέσιμη για όλα σχεδόν τα είδη πρoγραμματιζόμενων μηχανών (desktop, laptop, tablet) ή προσωπικές συσκευές επικοινωνίας.
Στο σύγγραμμά μας παρουσιάζονται τρεις κατηγορίες εφαρμογών με χρήση applets:

  1. Εφαρμογές διαδραστικής γεωμετρίας και άλγεβρας με applets που αναπτύχθηκαν με το εργαλείο ανοικτού λογισμικούGeoGebra
  2. Απεικόνιση τρισδιάστατων μοντέλων μακρομοριακών δομών
  3. Μια ολοκληρωμένη εφαρμογή επίδειξης της λειτουργίας των ψηφιακών φίλτρων


Διαδραστική γεωμετρία και άλγεβρα (applets)

Βαρύκεντρο τριγώνου

This is a Java Applet created using GeoGebra from www.geogebra.org - it looks like you don't have Java installed, please go to www.java.com

N.M., Δημιουργήθηκε με το πρόγραμμα GeoGebra

Θεώρημα Euler

This is a Java Applet created using GeoGebra from www.geogebra.org - it looks like you don't have Java installed, please go to www.java.com

N.M., Δημιουργήθηκε με το πρόγραμμα GeoGebra

Θεώρημα Ceva

This is a Java Applet created using GeoGebra from www.geogebra.org - it looks like you don't have Java installed, please go to www.java.com

N.M., Δημιουργήθηκε με το πρόγραμμα GeoGebra

This is a Java Applet created using GeoGebra from www.geogebra.org - it looks like you don't have Java installed, please go to www.java.com

N.M., Δημιουργήθηκε με το πρόγραμμα GeoGebra


Τρισδιάστατα μοντέλα μακρομοριακών δομών (applets)

// Chemical datafile name and path // Chemical data format(x-xyz/x-mol/x-pdb) // Rendering style (wire/stick/ball-stick/ball/backbone) // Active options (hydrogen heteroatoms labels fastmove,on/off) // Color schemes (cpk/residue/shapely/group/chain/temperature/0-31) // Spin direction and speed (x/y/z/off, speed) // Multi-model animation (on/off) and frames rate or model ID (fps/mid) // Active selection tools (identity/angle/torsion/highlight serial) // Scalefactor (0<>4) // Background Color(#hex) or Image(*.jpeg/*.gif) // Light intensity and direction (0-255, -16 x,y 16) Applet failed to run. No Java plug-in was found.
ΕΠΙΛΟΓΗ ΟΥΣΙΑΣ:
ΚΛΙΜΑΚΑ: 0.5 1 1.5 2
ΠΕΡΙΣΤΡΟΦΗ:
ΚΥΡΙΑ ΑΝΑΦΟΡΑ (portal PDB):

ΠΕΡΙΣΣΟΤΕΡΕΣ ΠΛΗΡΟΦΟΡΙΕΣ:




Ψηφιακά φίλτρα

Κλικ για εκκίνηση: (Η επίδειξη θα τρέξει σε χωριστό πλαίσιο.)
Applet failed to run. No Java plug-in was found.
DFilter.java (C) 2005 by Paul Falstad



Συγχρονισμένα πολυμέσα (sychronized media)

ΗΧΟΣ + slides


Περισσότερη δουλειά ......




Διάφορα

Μαθηματικές εξισώσεις και σχήματα

Από Inkscape-->extensions-->render-->Latex

Σχήμα από MATLAB (plot2svg) και προσθήκη εξισώσεων με Inkscape

Διάφορα βοηθήματα

Ημερολόγιο 2012 (φτιαγμένο με το σχετικό extension του Inkscape

Μετατροπή από pdf

.........






ΜΕΡΟΣ ΙΙΙ --- Τεχνολογία και τεχνικές υλοποίησης ---

IΙΙ.1 Εισαγωγή

IΙΙ.2 Κύριες τεχνολογίες (HTML, CSS, Javascript, SVG, applets, ...)




IΙΙ.3 Τεχνικές υλοποίησης βοηθημάτων πλοήγησης και ανάγνωσης

Δημιουργία δυναμικού συνδέσμου επιστροφής

Δημιουργία και χρήση "συνδέσμου επιστροφής" σε παράγραφο του κειμένου

Λειτουργία:
(α) Κάνοντας διπλό "κλικ" σε οποιαδήποτε επικεφαλίδα παραγράφου (χρώμα καφέ ή γαλάζιο, όπως η "Δημιουργία δυναμικού συνδέσμου επιστροφής" πιο πάνω) ή στο ρέον κείμενο, εμφανίζεται πλήκτρο με ετικέτα "ΕΠΙΣΤΡΟΦΗ" (άνω δεξιά στη σελίδα, πράσινο χρώμα). Απλό "κλικ" στο πλήκτρο αυτό μας επαναφέρει στο σημείο αφετηρίας.
(β) Την ίδια λειτουργικότητα έχουμε με "κλικ" σε στοιχείο εσωτερικής παραπομπής (λέξη ή φράση του κειμένου, σε γαλάζιο χρώμα, υπογραμμισμένο, π.χ. εδώ). Καθ' όν χρόνον διατηρείται ενεργός ο σύνδεσμος επιστροφής, το στοιχείο επιστροφής (παραπομπή, επικεφαλίδα ή παράγραφος ρέοντος κειμένου) παραμένει χρωματισμένο πράσινο.

Κώδικας υλοποίησης (javascript):

α. Επιστροφή σε επικεφαλίδα ή παράγραφο κειμένου

var dynamic_id=0;
$("h2, .main_text").dblclick(function(event) { 
	$(this).addClass("marked");
	$("#return_link").show();
	event.preventDefault();
	if(!$(this).attr("id")) { // Προσθήκη "id", αν δεν υπάρχει
		var dyn_id="dyn_id"+dynamic_id;
		$(this).attr("id", dyn_id);
		dynamic_id +=1;
	}
	var h2_ref = "#"+$(this).attr("id");
	$("#return_link").attr("href", h2_ref); 
	$("#return_link").click(function(event){
		$(h2_ref).removeClass("marked");
		$(this).hide("slow");
	});
  });	 

β. Επιστροφή από εσωτερική παραπομπή


// Τα στοιχεία με σύνδεσμο εσωτερικής παραπομπής πρέπει 
// να δηλώνονται σε κλάση "internal_link".
// Α. Προσθήκη "id" σε όλα τα στοιχεία της κλάσης "internal_link" 
   var internal_link_num=0;
   $(".internal_link").each(function(){
   var link_id="int_link"+internal_link_num;
   $(this).attr("id", link_id);internal_link_num +=1;
   });
  
// Β. Απόκριση στο "κλικ" σε σύνδεσμο εσωτ. παραπομπής:
// 1. Σημειώνεται ως "marked" (για το κατάλληλο style)
// 2. Εμφανίζεται το πράσινο πλήκτρο "Επιστροφή"
// 3. Στο πλήκτρο αυτό προστίθεται το "id" επιστροφής
// 4. Απόκρυψη τουη πλήκτρου, μετά τη χρήση
  $(".internal_link").click(function(event) { 
   $(this).addClass("marked");
   $("#return_link").show();
   var h2_ref = "#"+$(this).attr("id");
   $("#return_link").attr("href", h2_ref); 
   $("#return_link").click(function(event){
   $(h2_ref).removeClass("marked");
   $(this).hide("slow");
   });
});	 

Αναδυόμενα παράθυρα πρόσθετης πληροφόρησης

Αναδυόμενα παράθυρα "Συμπεράσματα", "Πληροφορίες" και "Βιβλιογραφία"

Συμπέρασμα 1ο
Συμπέρασμα 2ο
Συμπέρασμα 3ο

α. Κώδικας HTML

<p class="conclusion">
	Συμπέρασμα 1ο</br>
	Συμπέρασμα 2ο</br>
	Συμπέρασμα 3ο</br>
</p>

β. Κώδικας javascript

	  $('.conclusion').each(function () {
		$(this).hide().wrap('<div class="showConclusion"></div>').
			before('<a href="#" class="showConclusion">Συμπεράσματα</a>');
	});

	$('a.showConclusion').toggle(function() {
		$(this).text($(this).text().replace(/Συμπεράσματα/, 'Συμπεράσματα-Απόκρυψη')).
			parent().css('width', 'auto').find('p').show();
		return false;
	}, function() {
		$(this).text($(this).text().replace(/Συμπεράσματα-Απόκρυψη/, 'Συμπεράσματα')).
			parent().css('width', '80px').find('p').hide();
		return false;
	});

γ. Δηλωτικά CSS

div.showConclusion {
	width: 5em;
	margin-left: 4em;
	padding: 0.5em 0.5em 0em;
	background: rgb(100%,94%,66%);
	color:sienna;
	border: 1px solid #3c8243;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;       }
a.showConclusion {
	position: relative;
	top: -0.25em;
	left: -0.25em;
	color: blue;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 80%;
	text-decoration: none;
	cursor: pointer;             }

Παρόμοια είναι η υλοποίηση για τα παράθυρα "Πληροφορίες" και "Βιβλιογραφία"


Αναδυόμενα παράθυρα κώδικα

Υλοποίηση των παραπάνω αναδυόμενων παραθύρων "Δείξε HTML", "Δείξε JS", "Δείξε CSS"

α. Κώδικας HTML

<pre> <code class="htmldemo">
	Συμπέρασμα 1ο</br>
	Συμπέρασμα 2ο</br>
	Συμπέρασμα 3ο</br>
</code> </pre>

β. Κώδικας javascript

$('code.htmldemo').each(function () {
		$(this).hide().wrap('<div class="showCode"></div>').
			before('<a href="#" class="showCode">Δείξε HTML</a><br>'); });
		
	//  Παρόμοια για 'code.jsdemo' και 'code.css' 
	//  ...
	
	$('a.showCode').toggle(function() {
		$(this).text($(this).text().replace(/Δείξε/, 'Κρύψε')).
			parent().css('width', 'auto').find('code').show();
		return false;
	}, function() {
		$(this).text($(this).text().replace(/Κρύψε/, 'Δείξε')).
			parent().css('width', '90px').find('code').hide();
		return false;
	});

γ. Δηλωτικά CSS

div.showCode {
	width: 5em;
	margin-left: 4em;
	padding: 0.5em 0.5em 0em;
	background: #e0ffff;
	border: 1px solid #3c8243;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;   }
a.showCode {
	position: relative;
	top: -0.25em;
	left: -0.25em;
	color: #000;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 80%;
	text-decoration: none;
	cursor: pointer;   }

Εκτέλεση και επίδειξη κώδικα με ένα μόνο στοιχείο

Εάν θέλουμε να εκτελεστεί κιόλας ο κώδικας javascript τον οποίο προβάλουμε σε αναδυόμενο παράθυρο, μπορούμε να αποφύγουμε την επανάληψή του (μια για την εκτέλεση, μια για την επίδειξη) με στοιχείο κλάσης "jscode" (αντί της "jsdemo") με την εξής γραφή (χωρίς βεβαίως το περίβλημα του σχολιασμού, /*...*/, που έχει χρησιμοποιηθεί εδώ, για προφανείς λόγους):

/*	$('code.jscode').each(function () {
		$(this).removeClass('jscode').addClass('js').hide().
			wrap('<div class="showCode"></div>').
			before('<a href="#" class="showCode">Δείξε κώδικα</a>').
			text('\n' + $(this).text());
		eval($(this).text().replace(/</g, '<').replace(/>/g, '>'));
	}); */

Αυτό που γίνεται κατά βάση είναι η αλλαγή της κλάσης των στοιχείων .jscode σε .js και η εκτέλεση του περιεχoμένου κώδικα (με την εντολή eval()), ενώ εξακολουθεί αυτός να βρίσκετται εντός του αναδυόμενου παραθύρου.

Ας δούμε ένα απλό παράδειγμα. Ο κώδικας JS που αναδύεται με "κλικ" του πλήκτρου "Δείξε JS" που ακολουθεί βρίσκεται ενθυλακωμένος σε στοιχείο <pre><code class="jscode"> </code></pre>. Η κλάση .jscode αυτού του στοιχείου μετατρέπεται σε .js και ο κώδικας εκτελείται με την εντολή eval(), έχει δε την εξής λειτουργικότητα:
Μετάγει το πλήκτρο και, αντίστοιχα, την εικόνα του διπλανού πλαισίου (iframe) μεταξύ δύο καταστάσεων (toggle): "Ανάπτυξη" - "Συρρίκνωση". "Ακούει" επίσης το πάτημα του πλήκτρου "Επιλογή" κάτω από το πλαίσιο, ώστε να εμφανίσει την επιλεγμένη εικόνα.

$('#remove').toggle(function() {
		$(this).text('Συρρίκνωση');
		$('#svgFrame2').attr('height', '300');
	},
	function() {
		$(this).text('Ανάπτυξη');
		$('#svgFrame2').attr('height', '0');
	});
$('#sel_but').click(function() {
	$('#svgFrame2').attr('src', $('#sel_img option:selected').text()) });

Μπορείτε να δείτε όλον τον κώδικα HTML στο ακόλουθο αναδυόμενο παράθυρο.

<button type="button" id="remove">Συρρίκνωση</button></p>
 <!-- ο αναδυόμενος και εκτελέσιμος κώδικας JS αρχίζει εδώ -->
 <pre><code class="jscode">$('#remove').toggle(function() {
		$(this).text('Συρρίκνωση');
		$('#svgFrame2').attr('height', '100');
	},
	function() {
		$(this).text('Ανάπτυξη');
		$('#svgFrame2').attr('height', '0');
	});
$('#sel_but').click(function() {
   $('#svgFrame2').attr('src',$('#sel_img option:selected').text())});
</code></pre>
<!-- ο αναδυόμενος και εκτελέσιμος κώδικας JS τελειώνει εδώ -->
<iframe id="svgFrame2" height="300" width="300"  
    frameBorder="1"   src=""  alt=""></iframe>
   <select id="sel_img">
       <option value="1">images/lion.svg</option>
       <option value="2">svg-graphics/NTUA-campus-v1.svg</option>
       <option value="3">images/pyrforos120.jpg</option>
   </select>
<input id="sel_but" type="button" value="Επιλογή" />

Χρήση του νέου στοιχείου <details> της html5

Παράδειγμα

-Εναλλακτική υλοποίηση με το νέο στοιχείο της HTML5, "details"

<details>
	<summary>Παράδειγμα</summary>
	<p>-Εναλλακτική υλοποίηση με το νέο στοιχείο της HTML5, "details"</p>
</details>


Παράθυρα προβολής εγγράφων (PDF, εικόνων, κλπ) και ιστοσελίδων web.

PDF-Document HTML-Document

α. Κώδικας html


<!--  Ένα μόνο στοιχείο τύπου <a> για κάθε έγγραφο ή ιστοσελίδα, όπως παρακάτω  -->
	<a class="internal_doc" href="docs/Interactivy dynamics for visual analysis.pdf"> PDF-Document</a>
	<a class="external_link" href="http://queue.acm.org/detail.cfm?id=2146416"> HTML-Document</a><br/>

β. Κώδικας javascript

//  external links
	var external_link_num=0;
	$('a.external_link').each(function() {
		var id='ext_link_id'+external_link_num;
		$(this).attr('id', id);
		$(this).after('<iframe  id="f_'+id+'"height="600" width="100%" src="" frameBorder="1"></iframe>');
		$('#f_'+id).wrap('<div id="d_'+id+'"  class="external_link" style="display:none"></div>').hide().
		   before('<input id="i_'+id+'" class="external_link_hide" type="button" value="Απόκρυψη"/>');
		external_link_num+=1;
	});
	$('a.external_link').click(function(event) {
		event.preventDefault();
		var link=$(this).attr('href');
		var id=$(this).attr('id');
		$('#d_'+id).attr('style', 'display:block');
		$('#f_'+id).attr('src', link).show();
	});
	$('.external_link_hide').click(function() {
		var id=($(this).attr('id')).replace('i_','d_');
		$('#'+id).attr('style', 'display:none');
	});
// internal docs
	var internal_doc_num=0;
	$('a.internal_doc').each(function() {
		var id='int_doc_id'+internal_doc_num;
		$(this).attr('id', id);
		$(this).after('<iframe  id="f_'+id+'"height="600" width="100%" src="" frameBorder="1"></iframe>');
		$('#f_'+id).wrap('<div id="d_'+id+'"  class="internal_doc" style="display:none"></div>').hide().
		   before('<input id="i_'+id+'" class="internal_doc_hide" type="button" value="Απόκρυψη"/>');
		internal_doc_num+=1;
	});
	$('a.internal_doc').click(function(event) {
		event.preventDefault();
		var link=$(this).attr('href');
		var id=$(this).attr('id');
		$('#d_'+id).attr('style', 'display:block');
		$('#f_'+id).attr('src', link).show();
	});
	$('.internal_doc_hide').click(function() {
		var id=($(this).attr('id')).replace('i_','d_');
		$('#'+id).attr('style', 'display:none');
	});

γ. Δηλωτικά CSS

div.external_link
{
width:95%;
padding:10px;
border:5px solid red;
margin-left:20px;
background-color: white;
text-align:left;
}
a.external_link {margin-left:10px; color:red;}

div.internal_doc
{
width:95%;
padding:10px;
border:5px solid green;
margin-left:20px;
background-color: white;
text-align:left;
}
a.internal_doc  {margin-left:10px; color:green}


Τα παράθυρα εσωτερικών εγγράφων μπορούν να χρησιμοποιηθούν για ενθυλάκωση άλλων εγγράφων html, ακόμη και του ίδιου του μητρικού εγγράφου. Δοκιμάστε το διπλανό σύνδεσμο και παρατηρείστε το αποτέλεσμα.

Το παρόν html έγγραφο, ενθυλακωμένο σε εσωτερικό παράθυρο του εαυτού του.




Αναδυόμενο παράθυρο βιβλιογραφίας, με φωλιασμένα παράθυρα προβολής εγγράφων (pdf, html, ..)

<!-- Στοιχείο <div class="bibliography"> πρέπει να ενθυλακώνει κάθε λίστα βιβλιογραφίας.
Εσωτερικά, μπορεί να χρησιμοποιηθεί είτε αριθμημένη (<ol>), είτε αναρίθμητη λίστα (<ul>)  -->
<div class="bibliography">
<ul>
	<li>Αναφορά 1</li>
		<p class="info" style="font-size:80%"><span class="em"> Abstract</span></p>
		<a href="http://queue.acm.org/detail.cfm?id=2146416" class="external_link"> HTML-Document</a><br/>
		<a href="docs/Interactivy dynamics for visual analysis.pdf" class="internal_doc">PDF-Document</a>
	<li>Αναφορά 2</li>
	<li>Αναφορά 3</li>
</ul>
</div>


Σχόλια αναγνωστών

Εισαγωγή σχολίων

α. Κώδικας HTML

<!--  Διάφορα πλήκτρα βοηθημάτων -->
<div class="accessories" id="controls"> 
<a id="home" href="#toc" ><img src="images/pyrforos40.jpg"></a><br/>
<a id="return_link" href="#toc" hidden="hidden"><img src="images/green_button50.jpg"></img></a><br/>
<img id="comments_button" src="images/comments_button.png"></img><br/>
<a id="save_button" href="#toc" ><img src="images/save_button.png"></img></a><br/>
<a id="save_link" href="#toc" hidden="hidden">Δεξί κλικ για save</a><br/>
</code> </pre>
<!-- Αμέσως μετά την επικεφαλίδα ΜΕΡΟΣ Ι -->
<!--  Το επόμενο <div>, με το πάτημα του πλήκτρου SAVE, θα κλωνοποιηθεί και αντιγραφεί κάτω
         απ΄όλες τις παραγράφους που έχουν σημειωθεί με class="accept_comments", ώστε να
	 επιτραπεί η εισαγωγή σχολίων από τον αναγνώστη.-->
<div id="main_section_1_comments" class="readers_comments" hidden="hidden">
      <p>Περιοχή για σχόλια του αναγνώστη </p>
      <FORM NAME="comment-form">
             <p> <textarea style="color:red" TYPE="TEXT" NAME="myComment" rows="4" cols="60">
                </textarea>
            </p>
            <INPUT TYPE="Button" Value="Υποβολή" onClick="submitComments(this.form)">
       <!--  Το "this" αναφέρεται στο HTMLInputElement -->
      </FORM>  
</div>

β. Κώδικας javascript

// Ο παρακάτω κώδικας είναι ενθυλακωμένος σε $(document).ready(function(){}).
// Με "κλικ" στο πλήκτρο "ΣΧΟΛΙΑ" (άνω δεξιά):
// 1. Κλωνοποιείται η ειδική φόρμα εισαγωγής σχολίων (βρίσκεται στην αρχή 
// του 1ου Μέρους, σε στοιχείο <div> κλάσης "readers_comments")
//     και εισάγεται σε κάθε παράγραφο της κλάσης "accept_comments"
$("#comments_button").click(function(event) { 
   $(".accept_comments").each(function() {
      if (!($(this).hasClass("commented"))) {
        $(this).addClass("commented");
       var new_div= $("#main_section_1_comments").clone();
       var com_id = $(this).attr("id")+"_commments";
       new_div.attr("id", com_id);
       new_div.appendTo($(this));      }
   })  // each
// 2. Οι φόρμες εισαγωγής σχολίων γίνονται εμφανείς   
   $(".readers_comments").show();
});
//  Με διπλό κλικ στο πλήκτρο "ΣΧΟΛΙΑ", οι φόρμες με τα σχόλια αποκρύβονται
$("#comments_button").dblclick(function(event) { 
   $(".readers_comments").hide();
});
   function submitComments(frm) { // καλείται με "κλικ" στο πλήκτρο "Υποβολή" της φόρμας σχολίων
   var parent_div = frm.parentNode;  // a FORM has the NODE object properties/methods
   var comments="[#" + parent_div.getAttribute('id')+"]:   "+frm.myComment.value;
   var par = $(parent_div).find('p');  // Αυτό είναι ένα διάνυσμα όλων των <p> στοιχείων στο parent_div 
   //  alert(par.html());   // ΟΚ!  η  html() παίρνει το περιεχόμενο του 1ου <p> στοιχείου του διανύσματος par
  //  par.text(comments);  //  αυτό αντικαθιστά το κείμενο και των δύο <p> elements (και αυτό της φόρμας!)
  // par.get(0).text(comments);// Αυτό δεν δουλεύει !! par.get(0).innerHTML = comments; // Αυτό δουλεύει !!!
}

γ. Δηλωτικά CSS

div.readers_comments {
	width:60%;
	padding:5px;
	border:2px solid-blue;
	margin-left:5px;
	background-color:rgb(223,238,138);
	text-align:left;
	color:red;
	font-size:11pt; }
Εξαγωγή συνόλου σχολίων

α. Κώδικας HTML


<!--  Ακριβώς κάτω από την επικεφαλίδα του πίνακα  περιεχομένων-->
<div id="save_div" hidden="hidden"> 
    <FORM name="save_form">
    <textarea  id="html_output" TYPE="TEXT" NAME="html_out" rows="20" cols="100" > </textarea>
     </FORM>
</div>

β. Κώδικας javascript

$("#save_button").click(function(event) {
// var savable = $("#html_main");  // Σώσιμο ολόκληρου του εγγράφου. Μπαίνει σε σχόλιο η επόμενη εντολή
   var savable = $(".readers_comments");  // Σώσιμο μόνο των σχολίων. Μπαίνει σε σχόλιο η προηγούμενη εντοιλή.
// Εδώ πρέπει να προβλεφθεί φόρμα για την εισαγωγή των στοιχείων του αναγνώστη ..........
   var htmlString =" ";
   savable.each(function() {
   var com=$(this).clone();  // το 'this' αναφέρεται σε κάθε χωριστό στοιχείο του πίνακα 'savable'
   $('form',com).remove();  // Μόνο στην περίπτωση που σώζω τα comments - aφαιρούνται τα <form> elements. 
// Πρέπει να έχει προηγηθεί το clone(), αλλιώς αφαιρούνται από το κύριο έγγραφο !!!
   htmlString += ("  " + com.html());  
        })    

γ. Δηλωτικά CSS








IΙΙ.4 Τεχνικές υλοποίησης παραδειγμάτων 2ου Μέρους


Τεχνικές animation

Animated GIF

To Graphics Interchange Format (GIF) είναι ένα μορφότυπο κωδικοποίησης/συμπίεσης εικόνων, πρόταση της εταιρείας Compuserve από το 1987, το οποίο χρησιμοποείται ευρέως στον παγκόσμιο ιστό. Υποστηρίζει και animation με την προβολή μιας ακολουθίας πλαισίων (τα οποία είναι αποθηκευμένα στο ίδιο αρχείο). Ο έλεγχος "παύση-εκκίνηση" που έχουμε στο παράδειγμα της τετράχρονης μηχανής γίνεται με ένα τρικ: το πλήκτρο λειτουργεί ως διακόπτης μεταξύ δύο καταστάσεων: προβολής μιας ακίνητης εικόνας (στιγμιοτύπου του animated GIF) και του ιδίου του animated GIF.

Animation σε SVG

Μια πολύ σημαντική δυνατότητα της svg είναι το να θέτει σε κίνηση (animation) διάφορα στοιχεία. Αυτό γίνεται με αλλαγή μιας ή περισσοτέρων ιδιοτήτων (attributes) των στοιχείων με το χρόνο, υπάρχουν δε κατά βάση γι αυτό δύο τρόποι:

Στο παράδειγμα Εξομοίωση κινήσεων με διαδραστική αλλαγή των παραμέτρων έχουμε δύο "animated" στοιχεία: (α) μια ορθογώνια πράσινη μπάρα, της οποίας το εύρος μεταβάλλεται με τμηματικά σταθερό ρυθμό από μηδέν έως το μέγιστο, σύμφωνα με τις ταχύτητες που υπαγορεύονται από τη διάταξη των σημείων στο επίπεδο διάστημα-χρόνος. (β) ένα γαλάζιο μικρό κύκλο, του οποίου η θέση του κέντρου μεταβάλλεται αντίστοιχα. Οι δηλωτικές εντολές svg που υλοποιούν τα παραπάνω βασίζονται στο στοιχείο <animate> (δείτε τον ακόλουθο κώδικα).

<rect x="0" y="310" width="1" height="20" fill="green"> 
   <animate id="anime" fill="freeze" attributeName="width" 
       repeatCount="1" values="0;125;375;250;500" dur="5s" 
       calcMode="linear" begin="go.click" keyTimes="0;0.25;0.5;0.75;1"/>
</rect> 
<!--  a moving circle, following the animation of the bar -->
<circle cx="0" cy="320" r="10" stroke="blue" fill="blue">
   <animate id="anime2" fill="freeze" attributeName="cx" repeatDur="indefinite" 
       values="10;135;385;260;510" dur="5s" calcMode="linear" 
       keyTimes="0;0.25;0.5;0.75;1" begin="go.click" end="stop.click" />
</circle>

Προοδευτική ανάπτυξη διαδρομών
Ένα τρικ, το οποίο αναπτύσσει ή σβήνει προοδευτικά μια διαδρομή, είναι με τη χρήση του ‘dash-offsetarray’ του αντίστοιχου path. Δείτε το ακόλουθο απλό παράδειγμα. και τον κώδικά του (SVG και JS). Θέτοντας (με το πάτημα του πράσινου πλήκτρου) stroke-dasharray="path_length,path_length" και κάνοντας animate το stroke-dashoffset από path_length έως 0 (όπου path_length το μήκος του path) με συγκεκριμένη διάρκεια (dur), αναπτύσσεται προοδευτικά η γραμμή του path με ταχύτητα path_length/dur. Αντίστροφα, η γραμμή line σβήνει προοδευτικά, κάνοντας animate το stroke-dashoffset από 0 έως path_length.

<?xml version="1.0"?> 
<svg width="300" height="200" viewPort="0 0 300 250" version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" onload="start()">

<path id="animPath" stroke="#FF0000"  stroke-width="4" fill="none" 
     stroke-dasharray="0, 0" stroke-dashoffset ="0"
     d="M10,150 A15 15 180 0 1 70 140 A15 25 180 0 0 130 130 A15 55 180 0 1 190 120 A15 10 170 0 1 10 150" >
  	<animate id="pathAnim" attributeName="stroke-dashoffset" 
	      from="0" to="0"  dur="0s" begin="startButton.click" fill="freeze"/>
</path>

<rect x="-10" y="-5" width="20" height="10" fill="none" stroke="black" >
  	<animateMotion  id="busAnim" begin="startButton.click" dur="1s"
                 repeatCount="1" rotate="auto" fill="freeze" >
		   <mpath xlink:href="#animPath" />
  	</animateMotion>
</rect>

<line stroke="#0000ff" stroke-width="4"  fill="none" 
          stroke-dasharray="250, 250"    stroke-dashoffset ="0"
	x1="10" y1="190" x2="260" y2="190">
  	<animate id="lineAnim"  attributeName="stroke-dashoffset"
	       from="0" to="250" dur="0s" begin="startButton.click"  fill="freeze"/>
</line>    
<rect id="startButton" x="20" y="20" width="40" height="20" fill="green" />
 </svg>
 <script  type="text/ecmascript">
   function start(){
	var path = document.getElementById('animPath');
	var pathAnim=document.getElementById('pathAnim');
	var busAnim=document.getElementById('busAnim');
	var lineAnim=document.getElementById('lineAnim');
	var dur = path.getTotalLength()/100;
	pathLength=path.getTotalLength().toString();
	path.setAttributeNS(null,'stroke-dasharray',pathLength+','+pathLength);
	path.setAttributeNS(null,'stroke-dashoffset',pathLength);
	pathAnim.setAttributeNS(null,'from',pathLength);
	pathAnim.setAttributeNS(null,'to','0');
	pathAnim.setAttributeNS(null,'dur',dur);
	busAnim.setAttributeNS(null,'dur',dur);
	lineAnim.setAttributeNS(null,'dur',dur);  }
</script>

Η τεχνική αυτή χρησιμοποιήθηκε στο παράδειγμα της παραγράφου Προοδευτική ανάπτυξη διαδρομών με επισημειώσεις. Στο συγκεκριμένο παράδειγμα, πήραμε μια jpeg κάτοψη της Πολυτεχνειούπολης Ζωγράφου και με χρήση του Inkscape προσθέσαμε τις διαδρομές (κάθε τμήμα μεταξύ διαδοχικών στάσεων και ένα αυτόνομο path) και τις στάσεις. Στη συνέχεια, στο παραχθέν svg αρχείο κάναμε τις απαραίτητες επεμβάσεις. Τις στάσεις (οι οποίες στο Inkscape είχαν δημιουργηθεί με copy-paste ενός αρχικού arc στοιχείου) τις αντικαταστήσαμε με απλούστερο στοιχείο <circle> (προσοχή πρέπει να δοθεί στις συντεταγμένες: το copy-paste στο Inkscape χρησιμοποιεί translate επί του αρχικού στοιχείου). Στη συνέχεια:

code a.

<!-- Τα id των paths αριθμούνται ως "busTrack1" "busTrack2", ... -->
<path  d="m 735.95357,354.55786 -31.41845,0.95208 ..."
   id="busTrack3">
<animate    id="dashAnim3"   attributeName="stroke-dashoffset"  from="0"   to="0"  dur="5s"    
begin="dashAnim1.end+2s"   fill="freeze"   keySplines="0.4 0 0.7 1"  calcMode="spline" />
...
 

code b.

for(var i=1; i<8; i++) {
	var busTrack=document.getElementById('busTrack'+i);
	var busTrackAnim=myGetElementById('dashAnim'+i);
	...}
 

code c.

...
trackLength=busTrack.getTotalLength().toString();
var dur = busTrack.getTotalLength()/80;
busTrack.setAttributeNS(null,'stroke-
     dasharray',trackLength+','+trackLength);
busTrack.setAttributeNS(null,'stroke-
     dashoffset',trackLength);
busTrackAnim.setAttributeNS(null,'from',trackLength);
busTrackAnim.setAttributeNS(null,'to','0');
busTrackAnim.setAttributeNS(null,'dur',dur);
…
 

Χάρτες χρονικής εξέλιξης
Στο σχετικό παράδειγμα του 2ου Μέρους ...


  1. FAQ on SVG Animation, 2002
  2. [pdf]

Animation με HTML5, CSS3 και SMIL

Για περισσότερες πληροφορίες-βιβλιογραφικές αναφορές, χρησιμοποιείστε τον παρακάτω σύνδεσμο

  1. A declarative approach for HTML Timing using SMIL Timesheets
  2. DocEng 2011: Timesheets - When SMIL Meets HTML5 and CSS3
  3. F. Cazenave, V. Quint, C. Roisin, "Timesheets.js: When SMIL Meets HTML5 and CSS3", DocEng 2011
  4. Abstract In this paper, we explore different ways to publish multimedia documents on the web. We propose a solution that takes advantage of the new multimedia features of web standards, namely HTML5 and CSS3. While JavaScript is fine for handling timing, synchronization and user interaction in specific multimedia pages, we advocate a more generic, document-oriented alternative relying primarily on declarative standards: HTML5 and CSS3 complemented by SMIL Timesheets. This approach is made possible by a Timesheets scheduler that runs in the browser. Various applications based on this solution illustrate the paper, ranging from media annotations to web documentaries.


    Βίντεο σχετικής παρουσίασης: http://www.youtube.com/watch?v=VKxDB4NHWdQ
    PDF-Document


Animation με flash - ενθυλάκωση ή μετατροπή σε HTML5

Για περισσότερες πληροφορίες δείτε

  1. Ian I. MacLean, Creating HTML5 Animations using Flash and Wallaby, O'Reilly, 2011
  2. Πίνακας περιεχομένων

Μορφοποίηση-προβολή κειμένου

Εγκιβωτισμός κειμένου σε σχήματα SVG
H svg δεν διαθέτει δυνατότητα προβολής κειμένου σε συγκεκριμένη περιοχή, όπως π.χ. η html με το στοιχείο textarea. Πρέπει αυτή η έλλειψη να καλυφθεί προγραμματιστικά. Στη βιβλιοθήκη textFlow.js δανεισμένη από το CARTONET διατίθενται σχετικές συναρτήσεις. Στο επόμενο τμήμα κώδικα javascript δίνεται ο τρόπος κλήσης/χρήσης αυτής της συνάρτησης στο προηγούμενο παράδειγμα.

var description = " Διαδραστικό σχήμα για την επίδειξη της ευθύγραμμης, ....";
//
function init(evt) {
    window.setTimeout('createTextFlows(description)',100);
    // ....
}
//
function createTextFlows(myFlowText) {
	//justified text
	var textNodeJustified = document.createElementNS(svgNS,"text");
	textNodeJustified.setAttributeNS(null,"x",610);
	textNodeJustified.setAttributeNS(null,"y",15);
	textNodeJustified.setAttributeNS(null,"font-size",12);
	textNodeJustified.setAttributeNS(null,"font-family","Arial,Helvetica");
	document.documentElement.appendChild(textNodeJustified);
	var dy = textFlow(myFlowText,textNodeJustified,270,610,15,true);
}


Γραφικές διεπαφές χρήστη (GUIs)

Διεπαφές σε SVG

Περισσότερη δουλειά ......

Διεπαφές σε HTML5

Περισσότερη δουλειά ......





Χρήση εργαλείων Incscape-Jessyink

Η παρουσίαση των διαφανειών για το παρόν σύγγραμμα έγινε με Inkscape και jessyink extension. Δες το tutorial καθώς και την επόμενη παρουσίαση.



Δανεισμένο από το jessyink-site [http://code.google.com/p/jessyink/]




Ένα μικρό slideshow με svg και smil

Δανεισμένο από: http://wam.inrialpes.fr/timesheets/slideshows/svg.html

Βίντεο σχετικής παρουσίασης: DocEng 2011: Timesheets - When SMIL Meets HTML5 and CSS3



ΒΙΒΛΙΟΓΡΑΦΙΑ

B.1. Πρότυπα και γενικά άρθρα για τις τεχνολογίες W3C

  1. W3C -- Scalable Vector Graphics (SVG) 1.1 (Second Edition). [html]
  2. An SVG Primer for Today's Browsers -- W3C Working Draft — September 2010[html]
  3. Vector-based Web Cartography: Enabler SVG[html]

B.2. Eκπαιδευτικό υλικό για τα πρότυπα και τις σύγχρονες τεχνολογίες W3C

  1. W3Schools -- HTML5 Tutorial
  2. W3Schools -- CSS Tutorial
  3. W3Schools -- JavaScript Tutorial
  4. W3Schools -- SVG Tutorial
  5. EdutechWiki -- Static SVG tutorial
  6. EdutechWiki -- SVG/SMIL Animation tutorial
  7. EdutechWiki -- Using SVG with HTML5 tutorial
  8. W3Schools -- Jquery Tutorial
  9. www.kineticJS.com -- HTML5 Canvas Basic Tutorials

B.3. Ιστοθέσεις με εξομοιώσεις προβλημάτων μαθηματικών και φυσικής

B.4. Ιστοθέσεις με διαδραστικό υλικό -- εξ-αποστάσεως εκπαίδευση

Διάφορα



ΠΑΡΑΡΤΗΜΑ

Διαδραστική εισαγωγή-εκτέλεση κώδικα javascript

Συμπληρώστε τον κώδικα javascript και πατήστε το πλήκτρο "Δοκιμή" (Η τελευταία εντολή 'output' είναι σημαντική)

< html lang='en'>
< script type="text/javascript">



</script >
< /html >

Εδώ θα εμφανιστούν τα αποτελέσματα του κώδικά σας



Περιοχή δοκιμών SVG -- Διαδραστική εισαγωγή-εκτέλεση κώδικα

(πλην animations)

Συμπληρώστε τι φόρμες με τον κώδικα SVG (άνω) και τον αντίστοιχο κώδικα JS (κάτω). Καθαρίστε τις γραμμές ενθυλάκωσης CDATA (αρχή και τέλος) και πατήστε το πλήκτρο "Δοκιμή". Η συνάρτηση αρχικοποίησης initSVG() είναι σημαντική και πρέπει να παραμείνει, έστω και κενή (καλείται μετά τη φόρτωση)