Ανάπτυξη Υπερµέσων µε Dreamweaver-HTML Προσαρµοστικά Υπερµέσα στην Εκπαίδευση ΛΑΖΑΡΟΣ ΗΛΙΑ ΗΣ ΚΑΘΗΓΗΤΗΣ ΠΘ liliadis@fmenr.duth.gr Θ. Νταραντούµης 1/46
Ιστοσελίδα WebPage Είναι ένα αρχείο υπερκειµένου (hypertext) µε δική του διεύθυνση στο Internet που µπορεί να παρουσιάζεται ολοκληρωµένο µε κλήση του κατάλληλου λογισµικού φυλλοµετρητή (δηλ. ενός web Browser). Η διεύθυνσή της περιέχει Α) τη διεύθυνση του κόµβου αποθήκευσης Β) τα directories πέρα από το αρχικό directory που έχει ορίσει ο Web Server Γ) το όνοµα της σελίδας.
ΠΑΡΑ ΕΙΓΜΑ ΙΕΥΘΥΝΣΗΣ ΙΣΤΟΣΕΛΙ ΑΣ Η αρχική σελίδα του EUENVI βρίσκεται στη διεύθυνση URL http://www.eu.gr/euenvi/index.html Φυσικά αν θέλουµε να τη δούµε στον server θα πρέπει να ακολουθήσουµε τη διαδροµή usr/local/sbin/httpd/html/euenvi/index.html κάθε αρχείο που περιέχει µια Web σελίδα πρέπει µετά το όνοµά του να έχει επέκταση htm ή html)
WEBSITE- WEBSERVER WEB CLIENT Ένα Website είναι ένα σύνολο από ιστοσελίδες µε κοινό περιεχόµενο, θεµατικό αντικείµενο, αρχιτεκτονική και δοµή. Ο Web Server περιέχει το λογισµικό που τρέχει σε ένα κόµβο του διαδικτύου και παρέχει σε άλλους υπολογιστές να έχουν πρόσβαση στις ιστοσελίδες που είναι αποθηκευµένες σε αυτόν. Ο Web Client περιέχει το λογισµικό που επιτρέπει σε έναν ΗΥ να "διαβάζει" ιστοσελίδες (από το σκληρό του δίσκο ή από το Internet αν είναι online).
Η γλώσσα HTML Hypertext Markup Language Είναι ένας ειδικός τρόπος γραφής κειµένου και κλήσης άλλων αρχείων ή εφαρµογών µε τον οποίον µπορούµε και αναπτύσσουµε εφαρµογές στις ιστοσελίδες µας αλλά και τις µορφοποιούµε. Ο Web client αναγνωρίζει τις εντολές της ΗΤΜL και τις εκτελεί.
Οδηγία (Tag) - URL Tag είναι ουσιαστικά µία οδηγία γραµµένη σε HTML, Αυτή αναγνωρίζεται και εκτελείται από τον browser. Πάντοτε Τα tags περιέχονται µεταξύ των συµβόλων < και > URL (Uniform Resource Locator) Η διεύθυνση ενός αρχείου στο Internet. Αποτελείται από 4 µέρη που σχετίζονται µε: α) Το πρωτόκολλο πρόσβασης β) Τον κόµβο στον οποίο είναι τοποθετηµένο το αρχείο. Γ) Το directory (µε το πλήρες path ή µέρος του) όπου βρίσκεται το αρχείο δ) το όνοµα του αρχείου.
ΠΑΡΑ ΕΙΓΜΑ ΗΛΙΑ ΗΣ ΛΑΖΑΡΟΣ ΚΑΘΗΓΗΤΗΣ ΠΘ Π.χ. στο URL http://www.euevir.gr/climate_change/faq.html το http:// είναι το πρωτόκολλο (HyperText Transfer Protocol), το www.euenvir.gr είναι ο κόµβος και το climate_change/faq.html είναι το directory αλλά και το όνοµα του αρχείου.
Dreamweaver MX ΗΛΙΑ ΗΣ ΛΑΖΑΡΟΣ ΚΑΘΗΓΗΤΗΣ ΠΘ Επιλέγω Create New - HTML ή αν δεν είµαι σε Designer View επιλέγω Windows Workspace Layout Designer. Πρώτα πρέπει να ορίσω τη γλώσσα στην οποία θα αποθηκεύεται και θα εµφανίζεται το περιεχόµενο της σελίδας. Κάνω κλικ σε Edit Preferences και µετά Fonts. Ορίζω τη γλώσσα σε Ελληνικά και στις γραµµατοσειρές αφήνω τις Default. Μετά πηγαίνω Page Properties του παραθύρου Properties και επιλέγω Title\Encoding και ορίζω το Character Set της σελίδας Ελληνική/ISO. 8/46
ΠΕΡΙΒΑΛΛΟΝ Θ. Νταραντούµης
Στο πλαίσιο Properties στοκάτω µέρος της οθόνης, υπάρχει µια σειρά από γνωστές επιλογές για το φορµάρισµα του κειµένου. Πχ Bold Italic κείµενο στοιχηµένο δεξιά, ή (justified) κλπμπορούµε να τοποθετήσουµε τη σελίδα µας οπουδήποτε θέλουµε στο σκληρό δίσκο. Επειδή µια ιστοσελίδα αποτελείται από περισσότερα του ενός αρχεία θα πρέπει να ορίσουµε ένα directory ως το τόπο του site. Για να γίνει αυτό επιλέγουµε Files - Managed Sites.- New Site Μετά πατάω Next επιλέγω (No, I do not want to use server technology). Τέλος δηλώνω σε ποιο µέρος του σκληρού δίσκου θα αποθηκεύονται όλα τα αρχεία.
Επιλέγω View Code <HTML>...</HTML> Κάθε Ιστοσελίδα αρχίζει µε την οδηγία (tag) <HTML> και τελειώνει µε την εντολή </HTML>. Η 1 η ενηµερώνει τον Web client πως το αρχείο είναι γραµµένο σε HTML και η τελευταία πως ο HTML κώδικας τελείωσε. <HEAD>...</HEAD> Εδώ περικλείουµε κείµενο που µας δίνει διάφορα στοιχεία για την σελίδα. εν εµφανίζεται στην σελίδα. Τοποθετείται πάντα µέσα στην οδηγία <TITLE>. Π.χ. <HEAD><TITLE> Αυτό είναι το πρώτο µου πρόγραµµα σε HTML </TITLE></HEAD> <TITLE>...</TITLE> Περιέχει τον τίτλο µιας σελίδας που εµφανίζεται στην κορυφή του παραθύρου του browser. Μέσα στον τίτλο τοποθετείται η <HEAD> και άλλες οδηγίες. <BODY>...</BODY> Περιέχει το κυρίως σώµα της σελίδας (κείµενο, εικόνες, οδηγίες µορφοποίησης ) Η οδηγία <BODY> δεν είναι υποχρεωτική από τεχνικής πλευράς αλλά την απαιτεί το πρότυπο HTML <BASE...> Η οδηγία <BASE...> επιτρέπει να ορίσουµε το βασικό URL της σελίδας που θα χρησιµοποιηθεί σαν βάση όταν µια σελίδα διαβάζεται από άλλο χώρο (local file ή mirror site) και θέλουµε να λειτουργούν οι υπάρχουσες παραποµπές.
ΕΠΙΚΕΦΑΛΙ ΕΣ - ΠΑΡΑΓΡΑΦΟΙ Η οδηγία επικεφαλίδας καθορίζει το µέγεθος των γραµµάτων ανεξάρτητα από την γραµµατοσειρά του browser. Η µεγαλύτερη σε µέγεθος επικεφαλίδα είναι η <H1>, ακολουθούµενη από τις <H2>...<H6>. ΠΑΡΑΓΡΑΦΟΙ <P> Οι HTML παράγραφοι ορίζονται µε οδηγία. Αλλιώς όλο το κείµενο θα παρουσιαστεί από τον browser σαν µια παράγραφος, ανεξάρτητα από τον τρόπο που αυτό έχει µορφοποιηθεί σε έναν ASCII editor. Μια νέα παράγραφος ξεκινάει µε <P> αλλά δεν κλείνει µε </P> που σηµαίνει πως τελειώνει. Το τέλος µιας παραγράφου γίνεται µε την οδηγία <P> µε την οποία αρχίζει η επόµενη παράγραφος
ΛΙΣΤΕΣ Για να δηµιουργήσουµε µια αριθµηµένη λίστα πχ 1. ΠΑΟΚ 2. ΑΡΗΣ 3. ΠΑΟ 4. ΟΣΦΠ χρησιµοποιούµε τις οδηγίες: <OL>...</OL> ΗΛΙΑ ΗΣ ΛΑΖΑΡΟΣ ΚΑΘΗΓΗΤΗΣ ΠΘ Η οδηγία <OL> (Ordered List) µπαίνει στην αρχή της λίστας ενώ η οδηγία </OL> στο τέλος <UL>...</UL> για λίστες χωρίς αρίθµηση
ΠΑΡΑΠΟΜΠΕΣ ΗΛΙΑ ΗΣ ΛΑΖΑΡΟΣ ΚΑΘΗΓΗΤΗΣ ΠΘ <A...>...</A> ΠΑΡΑΠΟΜΠΕΣ (Anchor Element) Από τις πιο σηµαντικές οδηγίες. Συνδέουµε δύο κείµενα οπουδήποτε στο Internet έτσι ώστε το ένα να παραπέµπει στο άλλο. Το πρώτο µέρος <A...> µπορεί να πάρει τις επιλογές HREF & NAME. HREF: Προέρχεται από τις λέξεις Hypertext REFerence πχ <A HREF="URL"> (η default επιλογή) κείµενο</a> URL είναι η διεύθυνση κάποιας Web σελίδας (π.χ. http://www.euenvir.gr/climate_change)
Για να παραπέµψω σε άλλη σελίδα στο ίδιο site (σχετική παραποµπή - relative link). Αν η σελίδα είναι στο ίδιο directory τότε γράφω µόνο το όνοµα του αρχείου στο οποίο βρίσκεται. <A HREF= air_pollution5.htm">< htm"></a> (Menu: Insert - Hyperlink). Αν η σελίδα είναι σε διαφορετικό directory (π.χ. στο subdirectory Pollution) τότε η οδηγία είναι <a href="./ ="./Pollution/όνοµα αρχείου.html"> ">. Προσοχή πρέπει να δοθεί στην αρχική τελεία. Σε περιβάλλον Windows δεν είναι απαραίτητη αλλά σε unix web server µπορεί να µην δουλέψει η παραποµπή αν την παραλείψω
Παραποµπή σε Mail Παραποµπή που επιτρέπει στον επισκέπτη να στείλει ένα email µε το πρόγραµµα email που έχει στον Η/Υ του (MS Outlook- Outlook Express) <A HREF= mailto:kistos@euenvir.gr > απαντήστε µου e-mail</a>. Από το Dreamweaver η αντίστοιχη εντολή είναι Insert Email link
HORIZONTAL RULE <HR> ΗΛΙΑ ΗΣ ΛΑΖΑΡΟΣ ΚΑΘΗΓΗΤΗΣ ΠΘ Μια γραµµή (µε το χρώµα του background, τρισδιάστατη όψη και µαύρο περίγραµµα) από την µια άκρη της σελίδας ως την άλλη (δεν υπάρχει </HR> αφού µόλις φθάσει στην άκρη της οθόνης η γραµµή σταµατά µόνη της). Παράµετροι (Menu: Insert - HMTL - Horizontal Rule). <HR NOSHADE ALIGN=RIGHT SIZE=8 WIDTH=75%) SIZE Ο αριθµός των pixels του πάχους της οθόνης (default το SIZE=2) WIDTH Το πλάτος της γραµµής (default το WIDTH=100% πιάνει όλη την οθόνη) ALIGN Χρειάζεται µόνο αν υπάρχει η παράµετρος WIDTH (ALIGN=LEFT), δεξιά (ALIGN=RIGHT) (ALIGN=CENTER default) NOSHADE Η γραµµή θα σχεδιαστεί µαύρη
ΠΡΟΣΘΗΚΗ ΕΙΚΟΝΑΣ ΣΕ ΙΣΤΟΣΕΛΙ Α Με την οδηγία <IMG SRC="όνοµα ή/και path αρχείου"> Π.χ. <img src= Evros.jpg"> H εικόνα θα µπεί στην σελίδα στην αριστερή πλευρά της οθόνης. Το κείµενο που υπάρχει πριν από αυτήν θα βρίσκεται από πάνω της και το κείµενο που υπάρχει µετά από αυτήν θα βρίσκεται από κάτω της. Mέσω του Dreamweaver γίνεται µε την επιλογή Insert Image. (Insert - Image Objects - Image Placeholder).
Γιατί χρησιµοποιούµε (Adaptive Educational Hypermedia); Εξαιτίας της συνεχώς αυξανόµενης ανάγκης για εκπαίδευση και γνώση και µάλιστα λόγω της επιτακτικής ανάγκης για ποιοτική εκπαίδευση. Στην κατεύθυνση αυτή συµβάλλουν τα υπερµέσα και οι υπηρεσίες Web.
Βιβλιογραφία που προτείνεται από τον Καθηγητή του Πανεπιστηµίου Αιγαίου κ Θ Νταραντούµη 1982, το 1 ο βιβλίο για ITS Sleeman D. & Brown J. (eds.), Intelligent Tutoring Systems, Academic Press, 1982. 1986-1988, τα 1 α διεθνή συνέδρια 1986, User Modelling Conference (in 2007 the 11 th ) 1988, Intelligent Tutoring Systems Conference (in 2008 the 9 th ) 1988, Intelligent User Interfaces Conference (in 2008 the 12 th )
1989-1993, τα 1 α βιβλία για adaptive and intelligent user interfaces Βιβλιογραφία που προτείνεται από τον Καθηγητή του Πανεπιστηµίου Αιγαίου κ Θ Νταραντούµη Hancock P. & Chignell M. (eds.), Intelligent Interfaces, Elsevier, 1989. Browne D., Totterdell P. & Norman M. (eds.), Adaptive User Interfaces, Academic Press, 1990. Sullivan J.& Tyler S. (eds.), Intelligent User Interfaces, ACM Press, 1991. Maybury M. (ed.), Intelligent Multimedia User Interfaces, AAAI Press, 1993. Θ. Νταραντούµης
Βιβλιογραφία που προτείνεται από τον Καθηγητή του Πανεπιστηµίου Αιγαίου κ Θ Νταραντούµη 1991, το 1 ο διεθνές περιοδικό User Modeling and User-Adapted Interaction, Kluwer Academic Publishers. 1998, το 1 ο βιβλίο για Adaptive Hypermedia Brusilovsky P., Kobsa A. & Vassileva J. (eds.), Adaptive Hypertext and Hypermedia, Kluwer, 1998. 2000, το 1 ο συνέδριο για Adaptive Hypermedia International Conference on Adaptive Hypermedia and Adaptive Web-Based Systems (in 2007 the 5 th ) Θ. Νταραντούµης
Mερικά γνωστά συστήµατα (Web-based based AEH systems) κατά τον Καθηγητή κ Θ Νταραντούµη Παν/µιο Αιγαίου InterBook, Brusilovsky et al http://www.contrib.andrew.cmu.edu/~plb/i nterbook.html AHA!, De Bra & Calvi http://aha.win.tue.nl/ KBS-Hyperbook, Henze et al http://www.kbs.unihannover.de/hyperbook/ SKILL, Neumann & Zirvas Scalable Internet-Based Teaching and Learning System Course material organised according to their prerequisites CKC Math Tutor: An intelligent tutor whose goal is to raise young girls self-confidence in their math skills during a critical period in their development. This system develops a model of the user and customizes its feedback to the student. http://ccbit.cs.umass.edu/ckc/ Multibook, Steinacker et al http://www.multibook.de/english/eng lish.html dynamic generation of lessons ACE, Specht & Oppermann Adaptive Courseware Environment ELM-ART (Brusilovsky, Schwarz, & Weber, 1996), http://apsymac33.unitrier.de:8080/lisp-course MetaLinks, Murray et al http://ddc.hampshire.edu/metalinks/ computer program and a design framework for electronic text books
µια σηµαντική πηγή κατά τον Καθηγητή κ Θ Νταραντούµη Νταραντούµη Παν/µιο Αιγαίου User Modeling and User- Adapted Interaction, 11(1), 2001. http://umuai.informatik.uni -essen.de
οι παράµετροι των ΠΥΕ 1. H Προσαρµογή σε τι ακριβώς αναφέρεται; Ποιοι οι παράµετροι προσαρµογής; Θα οριστεί από το µαθησιακό περιβάλλον. (α) από το προφίλ του χρήστη, β) από την αλληλεπίδρασή του µε το περιβάλλον γ) από το προφίλ του περιβάλλοντος) 2. Πως θα προσαρµοστεί το µαθησιακό περιβάλλον; 3. Ποιοι οι κανόνες προσαρµογής; Κανόνες της µορφής IF.. THEN (ΕΑΝ τοτε) που όµως δεν στηρίζεται σε µια σταθερή κοινά αποδεκτή στρατηγική από παιδαγωγικής πλευράς (Θ Νταραντούµης)
Προβλήµατα Σχετίζονται µε το σχεδιασµό, µε οικονοµικά ζητήµατα, µε θέµατα ηθικής. Tο ερώτηµα είναι: ο εκπαιδευόµενος θα προσαρµοστεί στο σύστηµα ή το αντίθετο;
Βιβλιογραφία κατά τον Καθηγητή κ Θ Νταραντούµη Παν/µιο Αιγαίου adaptive hypermedia and hypertext web site: http://wwwis.win.tue.nl/ah User Modeling and User-Adapted Interaction, 11(1), 2001. Electronically available at http://umuai.informatik.uniessen.de/anniversary.html Brusilovsky P., Kobsa A., Vassileva J. (eds.), Adaptive Hypertext and Hypermedia, Kluwer, 1998. Communications of the ACM, 45(5), 2002. Communications of the ACM, 37(7), 1994.