Θεωρίεσ Μάκθςθσ & Εκπαιδευτικό Λογιςμικό Σημειώςεισ Εργαςτηρίου -- Αρχείο 1 Xerte -- Εργαλεία υγγραφήσ - -- Περιβάλλον Εργαςίασ Xerte -- Κείμενο Γραφικά Ήχοσ Video Παραδείγματα κώδικα ςτο αρχείο xerteexamples-1.rlo
Πολυμέςα - Multimedia Σι είναι Η χριςθ ποικιλίασ κωδίκων και αναπαραςτάςεων για τθ μετάδοςθ πλθροφορίασ ςτον χριςτθ του ψθφιακοφ προϊόντοσ Σι περιλαμβάνουν Εικόνα Γραφικά Κείμενο Ήχοσ Σχεδιοκίνθςθ (Animation) Video Διάδραςθ (αλλθλεπίδραςθ) Χρηςιμοποιοφνται ςε: Εκπαίδευςθ Κατάρτιςθ Διαφιμιςθ Ψυχαγωγία Εφαρμογζσ standalone Διαδίκτυο (elearning)
Η ανάγκη για ειδικά εργαλεία πολυμέςων Στόχοσ θ μείωςη τησ πολυπλοκότητασ ςτο γράψιμο κϊδικα και θ αφξηςη τησ αποδοτικότητασ ςτθ διαχείριςθ ςφνκετων μορφϊν πλθροφορίασ (πχ. ιχοσ, ςχεδιοκίνθςθ, video, κλπ.) για τθν ανάπτυξθ μιασ εφαρμογισ Ανάγκθ για ειδικά περιβάλλοντα ανάπτυξθσ (Interactive Development Environment, IDE) που να «κρφβουν» αποτελεςματικά τισ χαμθλοφ επιπζδου προγραμματιςτικζσ λεπτομζρειεσ κατά τθ διαχείριςθ πλθροφορίασ πολυμζςων
Εργαλεία ςυγγραφήσ πολυμέςων Multimedia authoring tools Ειδικά προγραμματιςτικά περιβάλλοντα ανάπτυξησ εφαρμογών πολυμζςων Γιατί «ειδικά»; Συνδυάηουν περιςςότερεσ από μία μορφζσ προγραμματιςμοφ για να υποςτθρίξουν: (α) τθ γρήγορη ανάπτυξη πρωτοτφπων (rapid prototype) αλλά και ολοκλθρωμζνων εφαρμογϊν πολυμζςων (β) τθν εφκολη διαχείριςη των πολυμζςων ςτθν οκόνθ τθσ εφαρμογισ Πχ. εφκολθ τοποκζτθςθ εικόνων, κειμζνων, video clips κλπ. (γ) τθ δθμιουργία διαδράςεων (interactions) με τον χριςτθ
Σύγκριςη Programming languages: οι τυπικζσ γλϊςςεσ προγραμματιςμοφ γενικισ χριςθσ Authoring languages: γλϊςςεσ με ειδικά ςετ εντολϊν για διαχείριςθ πολυμζςων Authoring systems ι Authoring tools: Συςτιματα/Εργαλεία Συγγραφισ Πολυμζςων
Μορφέσ προγραμματιςμού ςε εργαλεία ςυγγραφήσ πολυμέςων Οπτικόσ προγραμματιςμόσ (Visual programming) Η άμεςη διαχείριςη των πολυμζςων ςτθν οκόνθ τθσ εφαρμογισ (editing) Η χριςθ κατάλληλησ μεταφοράσ (metaphor) για τθν εφκολθ ανάπτυξθ των βαςικϊν τμθμάτων (ςκελετοφ) τθσ εφαρμογισ Γεγονοδηγοφμενοσ προγραμματιςμόσ (event programming) Ο προγραμματιςμόσ τθσ εφαρμογισ ϊςτε να αποκρίνεται ςε γεγονότα που προκαλεί ο χριςτθσ, πχ. πάτθμα πλικτρου, ποντικιοφ, κλπ. Scripting προγραμματιςμόσ (γλϊςςα script) Προγραμματιςμόσ ςε βάκοσ των λεπτομερειϊν τθσ εφαρμογισ με κατάλλθλθ γλώςςα script που περιλαμβάνεται ςτο εργαλείο ςυγγραφισ
Οι πιο ςυνηθιςμένεσ «μεταφορέσ ςτα εργαλεία ςυγγραφήσ Card-based: θ πλθροφορία οργανϊνεται ςε κάρτεσ/διαφάνειεσ. Η εφαρμογι αναπτφςςεται ωσ ςειρά καρτϊν Πχ. Hypercard, Toolbook Icon-based: Η εφαρμογι αναπτφςςεται τοποκετϊντασ εικονίδια (icons) ςτο χϊρο προγραμματιςμοφ. Κάκε εικονίδια ζχει ςυγκεκριμζνεσ ιδιότθτεσ για τθ διαχείριςθ πολυμζςων Πχ. IconAuthor, Authorware, Xerte Time-based: θ πλθροφορία οργανϊνεται ςε μια «χρονογραμμι» (timeline). κάρτεσ/διαφάνειεσ. Η εφαρμογι εκτελείται κακϊσ εκτελοφνται τα διάφορα γεγονότα ςτθ χρονογραμμι Πχ. Director, Flash
Εργαλεία ςυγγραφήσ πολυμέςων - 1) Εμπορικά προΰόντα Πηγή: Kaskalis, T. H., Tzidamis, T. D., & Margaritis, K. (2007). Multimedia Authoring Tools: The Quest for an Educational Package. Educational Technology & Society, 10 (3), 135-162.
Εργαλεία ςυγγραφήσ πολυμέςων - 2) Ελεύθερα & Ανοικτού Κώδικα προΰόντα Πθγι: Pearltrees
Xerte Γενικά Χαρακτηριςτικά
Xerte: Τι είναι Εργαλείο ςυγγραφισ πολυμζςων ανοικτοφ κϊδικα (Open source) Βαςίηεται ςτθ «μθχανι» του Adobe Flash και μπορεί να επεκτακεί μζςω αρχείων βιβλιοκθκϊν swf Download: Xerte Developers Edition v2.18 Για προγραμματιςτζσ/παραγωγοφσ εφαρμογϊν Διαθζςιμα ακόμη: Xerte Online Toolkits v2.1 Εργαλεία για ανάπτυξθ περιεχομζνου (απευκφνεται κυρίωσ ςε εκπαιδευτικοφσ Xerte Flex Compiler Compiler για ανάπτυξθ εφαρμογϊν ςε ios & Android Σχετικοί δικτυακοί τόποι: The Xerte Project Xerte Community
Δείγμα εφαρμογήσ & λειτουργιών Δείτε ζνα δείγμα εφαρμογισ ανεπτυγμζνο με το Xerte http://www.nottingham.ac.uk/toolkits/play_560
Ξεκινήςτε το Xerte ςτον υπολογιςτή ςασ Δθμιουργιςτε ζνα νζο αρχείο Ονομάςτε το XerteEfarmogh1 Αποκθκεφςτε το ςτο φάκελό ςασ
Το περιβάλλον εργαςίασ ICON-BASED ΧΩΡΟ ΠΡΟΓΡΑΜΜΑΣΙΜΟΤ ΙΔΙΟΣΗΣΕ (PROPERTIES) ΕΙΚΟΝΙΔΙΩΝ - Σο Xerte είναι πλήρωσ αντικειμενοςτραφζσ ΕΙΚΟΝΙΔΙΑ (ICONS) ΠΡΟΓΡΑΜΜΑΣΙΜΟΤ - Κάθε ςτοιχείο προγραμματιςμοφ είναι αντικείμενο που ςυνοδεφεται από τισ ιδιότητζσ του
Τα βαςικά δομικά ςτοιχεία Παηήζηε ηα μικπά χειπιζηήπια απιζηεπά ώζηε να ανοίξει η δενδποειδήρ δομή Learning Object Κάκε εφαρμογι ςτο Xerte χαρακτθρίηεται ωσ Learning Object (LO) Ζνα LO «πακετάρεται» και ςυνοδεφεται από ειδικά μεταδεδομζνα Interface Προγραμματιςτικι δομι που δθμιουργεί το περιβάλλον πλοιγθςθσ Στθν αρχι χρθςιμοποιείςτε το ζτοιμο Interface Page (ςτθν αρχι: Untitled) Μια εφαρμογι αποτελείται από ςειρά εικονιδίων «ςελίδων» (pages) Μονάδα οργάνωςθσ πλθροφορίασ είναι το εικονίδιο Deleted Items Τα διαγραμμζνα ςτοιχεία διατθροφνται εδϊ μζχρι τθν οριςτικι διαγραφι τουσ
Μια εφαρμογή αποτελείται από ςειρά εικονιδίων «ςελίδων» ελίδεσ Δθμιουργιςτε τθ δομι που βλζπετε Σφρετε από τθν εργαλειοκικθ και τοποκετιςτε τθ μια κάτω από τθν άλλθ τρείσ ςελίδεσ Δϊςτε τισ τα ονόματα p1, p2, p3 Τι κακορίηει θ ιδιότθτα name ;
Δείτε (preview, F5) τθν εφαρμογι ςασ να λειτουργεί Πατιςτε τα πλικτρα εμπρόσ-πίςω να δείτε τισ ςελίδεσ να αλλάηουν Πϊσ φαίνεται θ αλλαγι ςελίδων;
Αλλάξτε τθν ιδιότητα title των ςελίδων ςε: «Σελίδα 1», 2 & 3 Τρζξτε πάλι τθν εφαρμογι και παρατθρείςτε τισ αλλαγζσ ΤΙ κακορίηει θ ιδιότητα title; Προςπακιςτε να βρείτε πϊσ αλλάηει ο υπζρτιτλοσ: My Learning Object Ποιά ςυμπεράςματα βγάηετε για τισ ιδιότθτεσ;
Πώσ ειςάγουμε Κείμενο - 1 Επιλζξτε τθ ςελίδα ςτθν οποία κζλετε να εμφανίηεται το κείμενο, πχ. τθν p1 Προςζξτε πωσ ζχω διαγράψει τισ p2 & p3 Σφρετε κι αφιςτε (drag n drop) πάνω ςτθν p1 ζνα εικονίδιο κειμζνου Εναλλακτικά: ζχοντασ επιλεγμζνθ τθν p1 διπλοπατιςτε το εικονίδιο κειμζνου
Πώσ ειςάγουμε Κείμενο - 2 Παρατθριςτε: (α) τισ παραμζτρουσ για το εικονίδιο κειμζνου που εμφανίςτθκαν x, y: οι παράμετροι κζςθσ (πάνω αριςτερι γωνία) του παρακφρου κειμζνου w, h: πλάτοσ (width) και φψοσ (height) του παρακφρου κειμζνου ςε pixels
Πώσ ειςάγουμε Κείμενο - 3 Πατιςτε τθν ζνδειξθ Text ςτο αντίςτοιχο παράκυρο Ζτςι ανοίγει το παράκυρο κειμζνου Μπορείτε να γράψετε ι να ειςάγετε (copy-paste) κείμενο Αν δεν κάνετε κάποια άλλθ ρφκμιςθ το κείμενο κα εμφανίηεται ςτο ςθμείο τθσ οκόνθσ που κακορίηουν τα x, y, w & h
Χρήςιμεσ παράμετροι-ιδιότητεσ για τισ γραμματοςειρέσ ςτην οθόνη - 1 Οι τιμζσ για τισ παρακάτω παραμζτρουσ κακορίηονται ςτο LearningObject stagesize ανάλυςθ οκόνθσ, πχ. 800, 600 // 1024, 768 κλπ. defaultfont θ εξ οριςμοφ γραμματοςειρά που κα χρθςιμοποιθκεί ςτο κείμενο defaultsize το μζγεκοσ του defaultfont selectabletext αν το κείμενο ςτα εικονίδια κειμζνου είναι επιλζξιμο (1) ι όχι (0) inputfont κακορίηει τθ γραμματοςειρά ειςαγωγισ κειμζνου inputsize το μζγεκοσ του inputfont pagetitlefont θ γραμματοςειρά για τον τίτλο τθσ ςελίδασ pagetitlesize το μζγεκοσ του pagetitlefont statusfont θ γραμματοςειρά ςτο statusbar statussize το μζγεκοσ του statusfont titlefont θ γραμματοςειρά του τίτλου ςτο Interface titlesize το μζγεκοσ του titlefont textfont θ γραμματοςειρά κειμζνου ςτο ςυγκεκριμζνο εικονίδιο textsize το μζγεκοσ του textfont
Χρήςιμεσ παράμετροι-ιδιότητεσ για τισ γραμματοςειρέσ ςτην οθόνη - 2 Οι τιμζσ για τισ παρακάτω παραμζτρουσ κακορίηονται ςτο εικονίδιο κειμζνου textfont θ γραμματοςειρά κειμζνου ςτο ςυγκεκριμζνο εικονίδιο textsize το μζγεκοσ του textfont
Χρήςιμεσ ςυντομεύςεισ Shortcuts F5 ξεκινά/ςταματά τθν εκτζλεςθ τθσ εφαρμογισ (preview) Ctrl-F5 ξεκινά/ςταματά τθν εκτζλεςθ τθσ εφαρμογισ από το ςυγκεκριμζνο εικονίδιο ςτο οποίο γίνεται editing Shift-F5 ανοίγει ζνα ςυγκεκριμζνο εικονίδιο για editing Πχ. πατιςτε Shift-F5 και δείτε ότι ανοίγει θ οκόνθ τθσ εφαρμογισ ςε κατάςταςθ επεξεργαςίασ (editing), δθλ. το παράκυρο κειμζνου μπορεί να μετακινθκεί ςε νζα κζςθ ι να αλλάξει διαςτάςεισ
Κείμενο & Γραφικά ςτην Οθόνη
Πώσ ειςάγουμε Εικόνα/Γραφικά - 1 (α) Επιλζξτε τθ ςελίδα ςτθν οποία κζλετε να ειςάγετε το γραφικό (β) Επιλζξτε File / Import Media
Πώσ ειςάγουμε Εικόνα/Γραφικά - 2 (α) Στο παράκυρο επιλζξτε το αρχείο γραφικϊν που κζλετε, πχ. test.jpg (β) Στο παράκυρο JPG Import που κα ανοίξει ρυκμίςτε απλά τθ κζςθ τθσ εικόνασ ςτθν οκόνθ (αυτζσ οι παράμετροι μποροφν να αλλάξουν αργότερα)
Πώσ ειςάγουμε Εικόνα/Γραφικά - 3 Κάτω από τθ ςελίδα p1 κα πρζπει να ζχει εμφανιςτεί τϊρα ζνα εικονίδιο γραφικϊν Πατιςτε Shift-F5 για να πάτε ςτθν οκόνθ Θα πρζπει να μπορείτε να δείτε τθν εικόνα ςασ και να τθν τοποκετιςετε όπωσ κζλετε
Πώσ ειςάγουμε Εικόνα/Γραφικά - 4 Παρατθριςτε πωσ ςτισ παραμζτρουσ του εικονιδίου γραφικϊν θ τιμι τθσ url ζχει γίνει: FileLocation + media/test.jpg Τι ςθμαίνει αυτό;
Πώσ ειςάγουμε Εικόνα/Γραφικά - 5 Με βάςθ όςα ζχουμε πει ωσ εδϊ οργανϊςτε μια πρϊτθ ςελίδα για τθν εφαρμογι ςασ Φτιάξτε κάτι για τθν αγαπθμζνθ ςασ μπάντα, ταινία, βιβλίο, κλπ., Στο παράδειγμα δεξιά θ γραμματοςειρά του κειμζνου ζχει ρυκμιςτεί με τισ μεταβλθτζσ: textfont textsize textcolour Η τιμι του χρϊματοσ ςτθν textcolour δίνεται ωσ δεκαεξαδικό με τθ μορφι #RRGGBB για κόκκινο: #FF0000 (γιατί;)
Η δεκαεξαδική μορφή του χρώματοσ Η δεκαεξαδικι μορφι του χρϊματοσ (πχ. ςτθ γλϊςςα HTML αλλά και ςε άλλεσ) βαςίηεται ςτο μοντζλο RGB και δηλώνεται με τη μορφή #RRGGBB Όπου: RR: δεκαεξαδικι τιμι για το RED, GG: δεκαεξαδικι τιμι για το GREEN, BB: δεκαεξαδικι τιμι για το BLUE Πχ. το απλό κόκκινο δθλϊνεται ωσ: #FF0000 (γιατί;) Για καλφτερθ κατανόθςθ του κζματοσ δείτε: Διαδικτυακά χρϊματα HTML Colors Hexa to Binary and Decimal converter Hex FF to decimal explained
Στοιχεία HTML ςτο κείμενο Μπορείτε να διαμορφϊςετε το κείμενο ςτθ ςελίδα ςασ ενςωματϊνοντασ βαςικζσ HTML ετικζτεσ (tags), όπωσ: <b>, <u>, <i> <br>, <p> <a> <a href="default.htm"> <font> <li> <span> Μπορείτε να αλλάηετε τθ μορφι του κειμζνου δυναμικά γράφοντασ κϊδικα script Σε ζνα εικονίδιο κειμζνου δοκιμάςτε το παρακάτω παράδειγμα <b> Κείμενο με ζντονθ γραφι</b> -- Το κείμενο ςυνεχίηεται <br> Γραμμι κενι <u> Κείμενο υπογραμμιςμζνο</u> -- Το κείμενο ςυνεχίηεται <p> Νζα παράγραφοσ <i> Κείμενο με πλάγια γραφι</i> -- Το κείμενο ςυνεχίηεται <font size="16" color="#ff0000">κακοριςμόσ γραμματοςειράσ </font> <a href="http://mlab.csd.auth.gr">υπερςφνδεςμοσ</a> -- Το κείμενο ςυνεχίηεται <a href="http://mlab.csd.auth.gr"><u>υπερςφνδεςμοσ με υπογράμμιςθ</u></a> -- Το κείμενο ςυνεχίηεται Μάκετε και δοκιμάςτε HTML κϊδικα εδϊ
Ελεύθερα ςτοιχεία ςχεδίαςησ Μπορείτε να ειςάγετε ελεφκερα ςτοιχεία ςχεδίαςθσ με το εικονίδιο Drawing Το εικονίδιο ανοίγει ζνα ςυντάκτθ (editor) όπου μπορείτε να ςχεδιάςετε ελεφκερα προςκζτοντασ ςτισ οκόνεσ ςασ (α) ελεφκερα γραφικά ςτοιχεία, ι (β) γραφικά ςτοιχεία που ςυνδζουν κείμενο και εικόνα
Ήχοσ & Video ςτην Οθόνη
Πώσ ειςάγουμε Ήχο - 1 Ασ υποκζςουμε πωσ ζχουμε φτιάξει τθν παρακάτω πρϊτθ ςελίδα για τθν εφαρμογι μασ ειςάγοντασ εικόνα και κείμενο, όπωσ ζχουμε πει ςτα προθγοφμενα Για να ειςάγετε ήχο κάντε πρώτα τα εξήσ βήματα: (α) αποφαςίςτε ποιο mp3 αρχείο κζλετε να ειςάγετε Αν ενδιαφζρεςτε για Beatles μπορείτε να βρείτε mp3 εδϊ (β) Δθμιουργιςτε το φάκελο media εκεί όπου βρίςκεται το αρχείο τθσ εφαρμογισ ςασ Το Xerte μπορεί να το δθμιουργιςει αυτόματα για εςάσ (γ) Αποκθκεφςτε το αρχείο ςτο φάκελο media Στο παράδειγμά μασ κα είναι το ysub.mp3
Πώσ ειςάγουμε Ήχο - 2 Ο απλοφςτεροσ τρόποσ είναι να επιλζξετε τθ ςελίδα όπου κζλετε να φζρετε τον ιχο και να ηθτιςετε File / Import Media Εφόςον επιλζξετε αρχείο ιχου το Xerte κα δθμιουργιςει αυτόματα ζνα εικονίδιο ιχου ςτθ γραμμι ροισ Δείτε τθν τιμι τθσ url Μπορείτε αν κζλετε να αλλάξετε το όνομα του αρχείου ςτθν url Τι τιμι ζχει θ παράμετροσ FileLocation ; Βεβαιωκείτε ότι το αρχείο mp3 βρίςκεται μζςα ςτο φάκελο media
Πώσ ειςάγουμε Ήχο - 3 Εναλλακτικά: μπορείτε να τοποθετήςετε ζνα εικονίδιο ήχου ςτη ςελίδα που ςασ ενδιαφζρει και να γράψετε την τιμή τησ url Σo μήνυμα Copy Folder Όταν ειςάγετε media files το Xerte κα ςασ εμφανίςει το παρακάτω παράκυρο Αν είναι θ πρϊτθ φορά πατιςτε Yes ϊςτε να δθμιουργθκεί ο φάκελοσ Αν ο φάκελοσ ιδθ υπάρχει πατιςτε No Στθν πραγματικότθτα δεν ζχει ςθμαςία ό,τι και αν πατιςετε
Πώσ ειςάγουμε Ήχο - 4 Αν "τρζξετε" τθν εφαρμογι ςασ ο ιχοσ παίηει αμζςωσ - Γιατί; Δείτε τθν παράμετρο play Δοκιμάςτε τισ τιμζσ 0 &1 και πϊσ αλλάηει θ ςυμπεριφορά; Χειριςτήρια (controls): τι κάνουμε αν κζλουμε να ζχουμε χειριςτιρια (controls) ϊςτε να ελζγχω αν και πότε κα ξεκινιςει ο ιχοσ; Ειςάγετε τθν παράμετρο controls και δϊςτε αρχικά τθν τιμι 1 Τι ςυμβαίνει; που τοποκετοφνται τα χειριςτιρια; Γιατί; Ανοίξτε το help file --> πθγαίνετε ςτο tab Search --> Πλθκτρολογείςτε controls --> ψάξτε ςτα αποτελζςματα να βρείτε το controls που περιγράφει πϊσ δζχεται τιμζσ θ παράμετροσ: x, y, w Πϊσ ςυντάςςεται θ τιμι τθσ παραμζτρου; Δϊςτε τισ τιμζσ 480, 490, 200 Επιλζξτε επίςθσ Sound Icon και δείτε τι ρυκμίηουν οι παράμετροι loop & wait
Πώσ ειςάγουμε Video - 1 Το Xerte ειςάγει και αναπαράγει αρχεία video τφπου FLV (FLash Video file) Η μορφι flv ζχει κακοριςτεί από τθν Adobe και αποτελεί ζνα διαδεδομζνο πρότυπο (standard) ςτο διαδίκτυο κακϊσ πολλοί δθμοφιλείσ δικτυακοί τόποι ενςωματϊνουν και διαχειρίηονται video-clips με μορφή flv (YouTube, Google Video, κά). Όταν δουλεφετε με video και γενικά με πολυμζςα- κα χρειαςτείτε ζνα εργαλείο μετατροπήσ (converter) ϊςτε να μετατρζπετε εφκολα τισ πθγζσ ςασ ςτθ μορφι που χρειάηεςτε Ζνασ εφχρθςτοσ δικτυακόσ τόποσ μετατροπισ είναι το http://www.onlineconvert.com/ Για τθν ειςαγωγι Video κάντε τθν εξισ προετοιμαςία: Aναηθτιςτε ζνα κατάλλθλο flv video Μπορείτε να κατεβάςετε ζνα ςφντομο flv δείγμα από εδϊ http://www.mediacollege.com/adobe/flash/video/tutorial/example-flv.html Επιλζξτε το αρχείο Windy 50s Mobility Scooter Race Αποκθκεφςτε το ςτο φάκελο media με τθν ονομαςία sample.flv
Πώσ ειςάγουμε Video - 2 Όπωσ και με τον ιχο εργαςτείτε ωσ εξισ: Ειςάγετε μια νζα ςελίδα p2 Επιλζξετε τθν p2 και ηθτιςτε File / Import Media Επιλζξετε το αρχείο sample.flv ςτο φάκελο media Το Xerte κα δθμιουργιςει αυτόματα ζνα εικονίδιο video ςτθ γραμμι ροισ Βεβαιωκείτε για τθν τιμι τθσ url Παίξτε τθν εφαρμογι και ελζγξτε τθ ςυμπεριφορά τθσ όταν αλλάηουν τιμζσ οι παράμετροι play & controls (ψάξτε γι αυτζσ ςτο help file του Xerte) Εμφανίςτε και πειραματιςτείτε και με τισ παραμζτρουσ w & h
ΤΕΛΟΣ XERTE TUTORIAL Αρχείο 1