«Δημιουργία ιστοχώρου για την κατασκευή και διαχείριση ερωτηματολογίου»

Transcript

1 Τ.Ε.Ι. ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ «Δημιουργία ιστοχώρου για την κατασκευή και διαχείριση ερωτηματολογίου» Νικολαϊδου Βασιλική ΟΚΤΩΒΡΙΟΣ 2007 ΕΠΟΠΤΗΣ ΚΑΘΗΓΗΤΗΣ Βαλσαμίδης Σταύρος Εκπονηθείσα πτυχιακή εργασία απαραίτητη για την κτήση του βασικού πτυχίου

2 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Ευχαριστίες Ευχαριστήσω θερμά τον καθηγητή μου κύριο Βαλσαμίδη Σταύρο για την ανάθεση του θέματος, την άψογη συνεργασία και την πολύτιμη βοήθειά του. Ακόμη, ευχαριστώ τους γονείς μου που με στήριξαν καθόλη την διάρκεια τον σπουδών μου. Τέλος, ευχαριστώ όλους όσους συνέβαλαν, λόγω και έργω, στην ολοκλήρωση της εργασίας. 1

3 Περιεχόμενα Πρόλογος... 4 Μέρος 1 0 :... 7 Hot Potatoes Ανάπτυξη λογισμικού... 7 ΕΙΣΑΓΩΓΗ... 8 Κεφάλαιο 1 o (X)HTML και Java Script HTML και XHTML Σύγκριση των HTML και XHTML Εκδόσεις της XHTML Java Script Πλεονεκτήματα μειονεκτήματα της Java Script Σύνταξη της JavaScript Κεφάλαιο 2 ο Βασικά βήματα για δημιουργία ασκήσεων στο Hot Potatoes Βασικά Βήματα Σύνδεση ασκήσεων Εισαγωγή πληκτρολογίου οθόνης στην άσκηση Αποστολή αποτελεσμάτων των ασκήσεων με Κεφάλαιο 3 ο Εισαγωγή στα προγράμματα του Hot Potatoes Εισαγωγή στο JQuiz Δημιουργία άσκησης Multiple choice στο JQuiz Δημιουργία άσκησης Σύντομης απάντησης στο JQuiz Δημιουργία Υβριδικής άσκησης στο JQuiz Δημιουργία άσκησης Πολλών επιλογών στο JQuiz Εισαγωγή στο JCloze (Ασκήσεις συμπλήρωσης κενών) Χρήση του drop-down menu Εισαγωγή στο JCross (Ασκήσεις σταυρόλεξων) `Εισαγωγή στο JMix (Ασκήσεις ανακατεμένων αντικειμένων) Εισαγωγή στο JMatch (Ασκήσεις αντιστοίχισης ή ταιριάσματος)

4 Κεφάλαιο 4 o Εισαγωγή στο The Masher Μέρος 2 0 : Σχεδίαση ιστοχώρου ΕΙΣΑΓΩΓΗ Κεφάλαιο 1 o PHP MySQL PHP MySQL PHP και MySQL Σύνδεση / αποσύνδεση με την MySQL Dreamweaver Δημιουργία Βάσης Δεδομένων Κεφάλαιο 2 o Σχεδίαση Ιστοχώρου Έλεγχος πρόσβασης χρήστη Κύρια σελίδα Εμφάνιση του μενού πλοήγησης Συμπεράσματα Βιβλιογραφία

5 Πρόλογος Η επανάσταση της ψηφιακής τεχνολογίας επέφερε μεγάλες αλλαγές στη λειτουργία του σύγχρονου κόσμου. Επειδή το ισχυρότερο κίνητρο των ανθρώπων για τεχνολογική πρόοδο και επιστημονική ανάπτυξη είναι ο πόλεμος, οι ευεργετικές εφαρμογές της τεχνολογίας επηρέασαν πρώτα τις στρατιωτικές δυνάμεις, για λογαριασμό των οποίων και δημιουργήθηκαν, κυρίως των μεγάλων δυνάμεων του κόσμου. Έπειτα άρχισαν οι εφαρμογές στην επιστημονική έρευνα και μετά στη βιομηχανία. Τελικά πέρασαν και στην καθημερινότητα του ανθρώπου για τη δική του εξυπηρέτηση, ευκολία και βελτίωση του βιοτικού επιπέδου. Ανάμεσα στις ψηφιακές εφαρμογές τεχνολογίας που διείσδυσαν στην καθημερινότητα του ανθρώπου είναι και η διαδικασία της διδασκαλίας και μάθησης. Η ένταξη της ψηφιακής τεχνολογίας στη διδακτική πράξη αποτελεί τη σύγχρονη τάση στην εκπαίδευση, τόσο σε τοπικό όσο και σε ευρωπαϊκό επίπεδο. Η ανάπτυξη των δικτύων, ο σύγχρονος τεχνολογικός εξοπλισμός των σχολείων και η πρόοδος στην παραγωγή εκπαιδευτικού λογισμικού, είναι παράμετροι που συμβάλλουν στον τεχνολογικό προσανατολισμό της παρεχόμενης εκπαίδευσης. Ο υπολογιστής παύει να είναι ένα απλό εργαλείο για επιχειρήσεις και εργασίες σε ατομικό επίπεδο. Τελευταία παρατηρείτε μια ραγδαία ανάπτυξη αφού όλο και περισσότερο τα παιδιά ασχολούνται με τους υπολογιστές και το internet. Μέσω internet, από διάφορες εφαρμογές, μπορεί ο μαθητής φοιτητής να διαβάσει, να παρακολουθήσει μαθήματα αλλά και να λύσει ασκήσεις. Υπάρχουν προγράμματα που βοηθούν να δημιουργήσει κάποιος ασκήσεις ερωτήσεις και να τις ανεβάσει στο Web ώστε να τις λύνουν και να βαθμολογούνται απευθείας οι μαθητές - φοιτητές. Το λογισμικό Hot Potatoes είναι μια τέτοια εφαρμογή που δημιουργεί εύκολα και γρήγορα ερωτήσεις ασκήσεις διάφορων ειδών με μορφή ιστοσελίδας, χωρίς να χρειάζεται να γνωρίζει προγραμματισμό ο δημιουργός, και να τις ανεβάζει στο internet. 4

6 Σκοπός της εργασίας είναι η δημιουργία ιστοχώρου για την κατασκευή ηλεκτρονικού ερωτηματολογίου με την χρήση του λογισμικού Hot Potatoes αλλά και η δημιουργία ερωτηματολογίου από την αρχή με τα κατάλληλα πεδία για τις ερωτήσεις και αξιολόγησή τους. Η εργασία χωρίζεται σε δυο μέρη. Το πρώτο μέρος ασχολείται με το εκπαιδευτικό λογισμικό Hot Potatoes, δηλαδή τη δημιουργία ερωτήσεων - ασκήσεων εύκολα και γρήγορα, δημιουργώντας κάποιες ερωτήσεις για παραδείγματα που στο τέλος θα τις ανεβάσουμε στο Web, στην ιστοσελίδα μας. Αρχικά αναπτύσσονται κάποια χαρακτηριστικά του λογισμικού, δηλαδή με ποιες γλώσσες προγραμματισμού έχει δημιουργηθεί, πότε και από ποιους. Το δεύτερο κεφάλαιο εστιάζει τα βασικά βήματα για την δημιουργία ασκήσεων με το Hot Potatoes. Γίνεται μια μικρή αναφορά στα βήματα που θα πρέπει να ακολουθηθούν για την σωστή δημιουργία των ασκήσεων. Το τρίτο κεφάλαιο ασχολείται με την εισαγωγή στα προγράμματα του Hot Potatoes. Το Hot Potatoes έχει την δυνατότητα να δημιουργήσει πέντε διαφορετικών ειδών ερωτήσεις ασκήσεις, γίνεται ανάπτυξη αυτών των ειδών ασκήσεων βήμα προς βήμα με παραδείγματα. Το τέταρτο κεφάλαιο παρουσιάζει μια ακόμη δυνατότητα που μας προσφέρει το Hot Potatoes, τον συνδυασμό αυτών των ασκήσεων σε μια ομάδα αν και διαφορετικών ειδών. Τα παραδείγματα ερωτήσεων που υπάρχουν είναι από διάφορα μαθήματα του τμήματος Διαχείρισης Πληροφοριών. Το δεύτερο μέρος αφορά την δημιουργία ιστοχώρου, όπου εισάγαμε αυτά τα παραδείγματα, αλλά και το ερωτηματολόγιο που δημιουργήθηκε από την αρχή. Το θέμα του ερωτηματολογίου είναι η εύρεση του προφίλ του φοιτητή που ανήκει κάποιος. Στη σελίδα υπάρχουν διάφορες πληροφορίες για τις γλώσσες που χρησιμοποιήθηκαν, τον τρόπο συμπλήρωσης τους αλλά και κατάλληλους συνδέσμους σε διάφορες σελίδες ώστε ο επισκέπτης να μπορεί να βρει πληροφορίες που αφορούν τον ιστοχώρο και τα προγράμματα που χρησιμοποιήθηκαν. Το πρώτο κεφάλαιο αναφέρει λίγα λόγια για τα εργαλεία που χρησιμοποιήθηκαν για την κατασκευή του ιστοχώρου, την PHP, MySQL και το 5

7 Dreamweaver. Επίσης, παρουσιάζει την δημιουργία της βάσης που χρειαστήκαμε για διάφορες εφαρμογές. Το δεύτερο κεφάλαιο εστιάζεται στην σχεδίαση του ιστοχώρου, δείχνει τον βασικό κώδικα δημιουργίας και επεξηγεί τι κάνει η κάθε εντολή αλλά και την απεικόνιση αυτού ως μορφή ιστοσελίδας. Τέλος παρουσιάζονται τα συμπεράσματα και οι προτάσεις. 6

8 Μέρος 1 0 : Hot Potatoes Ανάπτυξη λογισμικού 7

9 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes ΕΙΣΑΓΩΓΗ Το λογισμικό Hot Potatoes δημιουργήθηκε από την ομάδα έρευνας και ανάπτυξης του κέντρου Humamities Cumputing and Media του Πανεπιστημίου Βικτώρια του Καναδά. Η διάθεσή του ξεκίνησε το Είναι ένα προϊόν το οποίο δεν διατίθεται δωρεάν, αλλά χρειάζεται να αγοράσει κανείς την άδεια από την εταιρία Hulf Baked Software Inc., η οποία ασχολείται με το εμπορικό μέρος της διάθεσης του λογισμικού. Το λογισμικό διατίθεται δωρεάν μόνο στους χρήστες οι οποίοι διαθέτουν το υλικό που ετοιμάζουν αφιλοκερδώς στον Παγκόσμιο Ιστό (WWW) για κοινή χρήση. Η αρχική σελίδα του λογισμικού βρίσκεται στο Πανεπιστήμιο Βικτώρια. Το Hot Potatoes περιλαμβάνει πέντε εφαρμογές που δίνει στο χρήστη την δυνατότητα να δημιουργήσει διαδραστικές ασκήσεις διαφόρων τύπων βασισμένες στο Web. Οι ασκήσεις είναι τυποποιημένες σε μορφή ιστοσελίδας, χρησιμοποιείται ο κώδικας XHTML για την εμφάνιση τους καθώς και η Java Script για την αλληλεπίδραση τους. Η παρουσία της Java Script δηλώνεται με το γράμμα J μπροστά από το όνομα κάθε εφαρμογής. Αυτά τα βασικά πρότυπα W3C υποστηρίζονται από όλους τους σύγχρονους browsers. Περιέχουν επίσης Unicode και έτσι μπορούμε να δημιουργήσουμε ασκήσεις σε οποιαδήποτε γλώσσα ή να αναμείξουμε πολλές γλώσσες προγραμματισμού κατά την δημιουργία των εργασιών μας. Για να χρησιμοποιηθούν τα προγράμματα δεν είναι απαραίτητο να γνωρίζει ο χρήστης προγραμματισμό HTML και Java Script, βοηθά στην περίπτωση που θέλουμε να επέμβουμε και να κάνουμε αλλαγές ή προσαρμογές στην εργασία μας. Η αρχική οθόνη του Hot Potatoes, της νεότερης έκδοσης (version 6.1), είναι όπως φαίνεται στην εικόνα 1. Αποτελεί ένα σύνολο από πέντε διαφορετικών εργαλείων διαδραστικών ασκήσεων σε δικτυακό περιβάλλον: JQuiz: δυνατότητα δημιουργίας ασκήσεων σύντομης απάντησης (short answer quiz) και πολλαπλής επιλογής (multiple choice quiz), 8

10 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής JCloze: δυνατότητα δημιουργίας ασκήσεων συμπλήρωσης κενών (fill in the gaps exercise), JCross: δυνατότητα δημιουργίας σταυρόλεξου(crossword puzzle), JMix: δυνατότητα δημιουργίας ασκήσεων σύνθεσης προτάσεων (jumbled sentence exercise), JMatch: δυνατότητα δημιουργίας ασκήσεων αντιστοίχισης (matching exercise) 1, Τα εργαλεία JMix και JMatch μπορούν επίσης να δημιουργούν ασκήσεις τύπου «σύρε και άφησε» (drag-and-drop). Τα είδη των διαδραστικών ασκήσεων που δημιουργούν οι εφαρμογές του προγράμματος είναι παραγοντικού τύπου, δηλαδή εστιάζουν σε επιμέρους γνωστικές δεξιότητες. Όλοι οι χρήστες πρέπει να δώσουν είτε την ίδια απάντηση είτε λίγες και συγκεκριμένες 2. Οι εφαρμογές JCloze και JMix ανήκουν στην κατηγορία των προγραμμάτων χειρισμού κειμένου καθώς οι χρήστες προσπαθούν να αναπλάσουν ένα κείμενο, είτε συμπληρώνοντας τα κενά, είτε βάζοντας στη σωστή σειρά λέξεις ή φράσεις. Σε όλες τις ασκήσεις υπάρχει η δυνατότητα να συμπεριληφθεί κείμενο και χρονομετρητής για την εκτέλεση της άσκησης. Με το κουμπί Check, στο τέλος της άσκησης ζητάμε να γίνει έλεγχος των απαντήσεων που δώσαμε. Η ανάδραση (feedback) παρέχεται με το κουμπί Hint, με το οποίο μπορούμε να ζητήσουμε ένα γράμμα από τη λέξη που πρέπει να συμπληρωθεί και με το κουμπί? (Clue), με το οποίο μας παρουσιάζεται μια ένδειξη ή εξήγηση που βοηθά στην εξεύρεση της απάντησης. Αυτά τα κουμπιά μπορεί είτε να τα εισάγει είτε να τα αφαιρέσει ο δημιουργός της άσκησης. Με τη χρήση των παραπάνω βοηθειών, πάντως, συνεπάγεται την αφαίρεση βαθμών. Το πρόγραμμα βαθμολογεί και δίνει το αποτέλεσμα στο τέλος κάθε άσκησης. Υπάρχει τιμωρία για το χρήστη που χρησιμοποιεί τα Hints, και αυτό ισχύει για όλες τις ασκήσεις και το κουμπί Clue σε άσκηση συμπλήρωσης κενών. Επίσης, το πρόγραμμα τιμωρεί τους χρήστες που κάνουν πολύ συχνά έλεγχο των απαντήσεων τους 3. 1 The Hot Potatoes Software, 2 Σχετικά με την τυπολογία δοκιμασιών στο ξενόγλωσσο μάθημα, Τσομπανόγλου, 2000: Τσίφα 2004:

11 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Η έκδοση 6.1 του Hot Potatoes είναι αναβαθμισμένη και διαθέτει περισσότερα χαρακτηριστικά από τις προηγούμενες εκδόσεις, ανάμεσα στα οποία είναι η πλήρης υποστήριξη Unicode κωδικοποίηση, η αφαίρεση πλαισίων και ο συνδυασμός των ασκήσεων σύντομης απάντησης (JQuiz) και πολλαπλής επιλογής (JBC) σε μία εφαρμογή την JQuiz. Επίσης διαθέτει το εργαλείο The Masher. Το Masher είναι ένα εργαλείο που σκοπό έχει να μας βοηθήσει να διαχειριστούμε όλα τα αρχεία που έχουν δημιουργηθεί με το πρόγραμμα Hot Potatoes. Το Masher συντάσσει μια ολόκληρη μονάδα ασκήσεων του Hot Potatoes, θέτει αυτόματα τις URLs διευθύνσεις των επόμενων ασκήσεων που θα οδηγηθεί με το κουμπί Επόμενη Άσκηση. Έτσι ο χρήστης μπορεί εύκολα να εργαστεί με τις ασκήσεις διαδοχικά. Επίσης, μπορούμε να ορίσουμε τα χρώματα που θέλουμε να εμφανίζονται στην άσκηση μας αλλά και τι θα γράφουν τα κουμπιά ώστε ο χρήστης να καταλάβει τι κάνει το αντίστοιχο κουμπί 4. Εικόνα 1 Αρχική εικόνα του Hot Potatoes 4 Βοήθεια από το πρόγραμμα Hot Potatoes Introduction to the Masher 10

12 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Κεφάλαιο 1 o (X)HTML και Java Script 1.1 HTML και XHTML Στον Παγκόσμιο Ιστό (World Wide Web) σχεδόν οποιοσδήποτε μπορεί να δημιουργήσει τη δική του τοποθεσία Ιστού (Web site) και να την παρουσιάσει στο κοινό του Internet. Όλες οι ιστοσελίδες γράφονται με την χρήση κάποιας μορφής HTML. Η HTML μας επιτρέπει να μορφοποιήσουμε κείμενο, να προσθέσουμε εικόνες, ήχους, βίντεο και να τα αποθηκεύσουμε σε ένα αρχείο ASCII απλού κειμένου που μπορούν να διαβάσουν όλοι οι υπολογιστές. Από την στιγμή κατά την οποία ο Παγκόσμιος Ιστός έπρεπε να ικανοποιεί όχι μόνο τις ανάγκες ενός παραδοσιακού υπολογιστή αλλά και πολλές άλλες συσκευές, κυρίως κινητές, έγινε αισθητή η ανάγκη για μια αυστηρά διατυπωμένη έκδοση της HTML. Η ανάγκη αυτή δημιουργήθηκε όταν οι πρόσθετοι πόροι των νέων συσκευών δεν μπορούσαν να υποστηρίξουν τις χαλαρές δυνατότητες της HTML. Έχει διαπιστωθεί από την εμπειρία των προγραμματιστών ότι, όσο πιο χαλαρές είναι οι δυνατότητες σύνταξης μιας γλώσσας τόσο πιο δύσκολο είναι να επεξεργαστεί αυτή η γλώσσα τα δεδομένα 5. Η αυστηρότητα που έλειπε από την HTML έχει προστεθεί στην XHTML. Η έκδοση 1.0 της XHTML αποτέλεσε μια αναδιατύπωση της έκδοσης 4.0 της γλώσσας HTML ως μιας εφαρμογής σε γλώσσα XML 1.0 η οποία ορίστηκε από την Κοινοπραξία του Παγκόσμιου Ιστού και πρωτοδημοσιεύτηκε στις 26 Ιανουαρίου του Η XHTML αποτελεί το επόμενο μεγάλο βήμα στη διαρκή εξέλιξη του Διαδικτύου εφόσον βασίζεται στη γλώσσα XML και ταυτόχρονα αναπαράγει και επεκτείνει τη γλώσσα HTML. Η XHTMLπροορίζεται να χρησιμοποιηθεί ως 5 Elizabeth Castro, 2005:13 11

13 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes γλώσσα περιεχομένου η οποία θα είναι σύμφωνη με τις γλώσσες XML και HTML. Η XML μοιάζει πολύ με την HTML, με μια πρώτη ματιά, μια και διαθέτει και αυτή ετικέτες, ιδιότητες και τιμές. Ωστόσο, αντί να χρησιμεύει ως μια ακόμη γλώσσα για τη δημιουργία ιστοσελίδων, η XML είναι μια γλώσσα για τη δημιουργία άλλων γλωσσών. Η XML απαιτεί μεγάλη προσοχή στα πεζά και κεφαλαία γράμματα, τα εισαγωγικά, τις ετικέτες κλεισίματος και τις υπόλοιπες λεπτομέρειες. Οι σχεδιαστές του οργανισμού W3C ξαναέγραψαν την HTML στην XML. Η νέα γλώσσα που δημιούργησαν διαθέτει όλες τις δυνατότητες της HTML και γι αυτό το λόγο είναι κατανοητή από όλους τους φυλλομετρητές του πλανήτη. Επειδή ολόκληρο το λεξικό της προέρχεται από την HTML, όσοι γνωρίζουν HTML μπορούν να αναπτύξουν εφαρμογές με αυτή τη γλώσσα αρκεί να μάθουν λίγους συντακτικούς κανόνες. Ταυτόχρονα η νέα γλώσσα χρησιμοποιεί τη σύνταξη της XML εκμεταλλεύεται όλη την ισχύ και την ευελιξία της XML, καθώς και τις βάσεις που προσφέρει για τη χρήση φύλλων επάλληλων στυλ (CSS). Με αυτόν τον τρόπο παίρνονται καλύτερα στοιχεία και από τους δύο κόσμους. Η γλώσσα αυτή ονομάζεται XHTML Σύγκριση των HTML και XHTML Οι γλώσσες HTML 4.0 και XHTML 1.0 χρησιμοποιούν τα ίδια ακριβώς στοιχεία, ιδιότητες και τιμές των ιδιοτήτων. Η βασική τους διαφορά εντοπίζεται ουσιαστικά στον τρόπο σύνταξης των εντολών. Ενώ η HTML αδιαφορεί για το αν θα χρησιμοποιηθούν τα στοιχεία html, head και body και τον τύπο εγγράφου DOCTYPE, η XHTML τα θεωρεί απαραίτητα. Ενώ η HTML επιτρέπει να παραλειφθούν ορισμένες ετικέτες τέλους (/), η XHTML απαιτεί να υπάρχουν για κάθε στοιχείο, ακόμη και για τα κενά διαστήματα. 6 Elizabeth Castro, 2005:19 12

14 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Ενώ η HTML είναι ελαστική σε ότι αφορά τη μορφή των γραμμάτων (πεζά ή κεφαλαία), η XHTML απαιτεί τη γραφή όλων των στοιχείων, των ιδιοτήτων και των προκαθορισμένων τιμών με πεζά. Ενώ η HTML επιτρέπει να μην περικλείονται σε εισαγωγικά οι τιμές των ιδιοτήτων οι οποίες περιέχουν μόνο γράμματα, αριθμούς και απλά σύμβολα, στην XHTML όλες οι τιμές των ιδιοτήτων πρέπει να τοποθετούνται ανάμεσα σε διπλά εισαγωγικά (quote), ακόμη και εκείνες που είναι αριθμητικές. Επειδή η XML δεν υποστηρίζει την ελαχιστοποίηση των ιδιοτήτων γι αυτό το λόγο και στην XHTML τα ζευγάρια ιδιότητα- τιμή πρέπει να εμφανίζονται πλήρως. Δηλαδή, δεν επιτρέπεται η παράλειψη της τιμής όταν αυτή έχει το ίδιο όνομα με την ιδιότητα Εκδόσεις της XHTML Παράλληλα με τις αντίστοιχες εκδόσεις της HTML 4.0 διατίθενται τρεις διαφορετικές αλλά ισότιμες μεταξύ τους εκδόσεις της γλώσσας XHTML. XHTML 1.0 Transitional (Μεταβατική): Λέγεται μεταβατική επειδή προορίζεται για την εύκολη μετάβαση από την έκδοση HTML 3.2. Η έκδοση αυτή πρέπει να προτιμάται όταν θέλουμε η ιστοσελίδα να είναι προσπελάσιμη από όσο το δυνατόν περισσότερους χρήστες του Διαδικτύου επειδή υποστηρίζει σχεδόν όλες τις ετικέτες της XHTMLακόμη και αυτές οι οποίες είναι προς διαγραφή. XHTML 1.0 Script (Αυστηρή): Λέγεται αυστηρή επειδή διαχωρίζει το περιεχόμενο από τον τρόπο εμφάνισης. Προορίζεται για την ανάπτυξη ιστοσελίδων οι οποίες απαιτούν την ικανοποίηση ειδικών προδιαγραφών π.χ. προδιαγραφών οι οποίες καθορίζονται από δημόσιους φορείς και υπηρεσίες. XHTML 1.0 Frameset (Πλαισιοσύνολο): Η έκδοση αυτή θα πρέπει να χρησιμοποιείται όταν γίνεται χρήση πλαισίων σε μια ιστοσελίδα. 7 Elizabeth Castro, 2005:36 13

15 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes 1.3 Java Script Παρά το ότι ο εμπλουτισμός της HTML έλυσε αρκετά προβλήματα και διεύρυνε τους ορίζοντες του Web σε πολλές περιπτώσεις δεν ήταν αρκετός για να υπερπηδήσει κάποια μεγάλα εμπόδια όπως αυτό της περιορισμένης αλληλεπίδρασης χρήστη-σελίδας. Η αντιμετώπιση αυτών των περιπτώσεων μέσω των CGI μπορεί να ήταν αποτελεσματική, υστερούσε όμως στον τομέα της απλότητας και της ταχύτητας 8. Πολλά από τα δημοφιλέστερα εφε που μπορεί να δει κανείς σήμερα σε ιστοσελίδες έχουν ελάχιστη (ή και καθόλου) σχέση με την (X)HTML 9. Αντίθετα βασίζονται σχεδόν αποκλειστικά στην Java Script, μια γλώσσα δημιουργίας σεναρίων (scripts) που αναπτύχθηκε αρχικά από τη Netscape Communications και υποστηρίζεται πλέον από όλους του βασικούς φυλλομετρητές 10. Η JavaScript χαρακτηρίζεται σαν μία scripting γλώσσα προγραμματισμού. Δηλαδή, είναι μια απλή και εύχρηστη γλώσσα, καθώς και πολύ εύκολη στον εντοπισμό και διόρθωση των λαθών (debugging). Στη σύνταξή της μοιάζει με τη γλώσσα Java, είναι δηλαδή αντικειμενοστραφής (object-oriented). Οι βασικές διαφορές των δύο γλωσσών είναι: Πρώτον, η JavaScript είναι γλώσσα που απαιτεί ένα διερμηνευτή (interpreted), σε αντιθέσει με την γλώσσα Java όπου ο κώδικας περνάει από ένα στάδιο μεταγλώττισης (compiling). Δεύτερον, ο κώδικας της JavaScript ενσωματώνεται σε ένα αρχείο HTML σε τέτοιο βαθμό που χωρίς τη γλώσσα HTML δεν θα είχε λόγο ύπαρξης, ενώ τα προγράμματα που είναι γραμμένα σε Java βρίσκονται σε διαφορετικά αρχεία, στα οποία υπάρχουν αναφορές στον κώδικα HTML μέσα σε ειδικές ετικέτες. Τρίτον, η JavaScript δεν είναι τόσο αυστηρή γλώσσα όσο η Java π.χ. η δήλωση των μεταβλητών στη JavaScript δεν είναι υποχρεωτική, με Με το (X)HTML εννοούμε και τις δύο γλώσσες (HTML και XHTML) 10 Elizabeth Castro 2005:323 14

16 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής αποτέλεσμα να είναι πιο εύκολη στην εκμάθηση και πιο άνετη κατά την ανάπτυξη προγραμμάτων Πλεονεκτήματα μειονεκτήματα της Java Script Το βασικότερο πλεονέκτημα της JavaScript είναι ότι δεν χρειάζεται ούτε μεταγλώττιση, ούτε ειδικά προγράμματα για να εκτελεστεί αρκεί η παρουσία ενός απλού φυλλομετρητή. Η JavaScript είναι περισσότερο «ανεκτική» στη δήλωση των μεταβλητών και των μεθόδων. Επίσης, η JavaScript παρέχει στον προγραμματιστή τη δυνατότητα κατασκευής δυναμικών κειμένων τα οποία διαμορφώνονται τη στιγμή που φορτώνονται από τον φυλλομετρητή (on the fly), ανάλογα με τις τιμές που μπορεί να αποκτήσουν διάφορες μεταβλητές. Το χαρακτηριστικό αυτό, σε συνδυασμό με την ικανότητα εκτέλεσης επαναλαμβανόμενων εργασιών, καθιστά τη JavaScript ιδανικό εργαλείο για την παρουσίαση αποτελεσμάτων αναζήτησης στο διαδίκτυο και άλλων ειδών τυποποιημένου περιεχομένου. Τέλος, η JavaScript μπορεί να χρησιμοποιηθεί για τον έλεγχο των τιμών π.χ. μιας φόρμας εισαγωγής στοιχείων. Φυσικά υπάρχουν και μειονεκτήματα. Καταρχήν, η JavaScript δεν είναι πλήρης γλώσσα προγραμματισμού, με αποτέλεσμα να υστερεί σε πολλούς τομείς όπως, για παράδειγμα, αυτός των εφαρμογών πελάτη-διακομιστή (client-server) όπου διακρίνουμε την υπεροχή της Java. Στην πραγματικότητα, η JavaScript έχει ένα πολύ εξειδικευμένο αντικείμενο, αυτό της δημιουργίας και διαχείρισης κώδικα HTML, κάτι που της επιτρέπει να συμπορεύεται με την HTML. Η εξάρτηση JavaScript-HTML είναι αρκετά μεγάλη, δίνοντας έναν πολύ συγκεκριμένο και περιοριστικό ρόλο στη JavaScript

17 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Σύνταξη της JavaScript Υπάρχουν τρεις διακεκριμένες μορφές που επιτρέπουν να ενσωματωθεί κώδικας JavaScript μέσα σ ένα αρχείο HTML, εμπλουτίζοντας το με δυνατότητες που δεν τις παρέχει η HTML: 1. Με τη χρήση της ετικέτας <SCRIPT> σαν μια συνάρτηση 2. Με τη βοήθεια μιας αναφοράς σε μια διεύθυνση του διαδικτύου (URL) όπου τοποθετείται κώδικας JavaScript. 3. Με την επίκληση ενός γεγονότος Σε αντίθεση με τη γλώσσα HTML όπου μπορούμε να χρησιμοποιήσουμε κεφαλαία ή πεζά γράμματα χωρίς καμία διάκριση για τις εντολές, τις ιδιότητες ή τα ονόματα των μεταβλητών, η γλώσσα JavaScript είναι ευαίσθητη, όπως και η γλώσσα C, στους χρησιμοποιούμενους χαρακτήρες (case sensitive) και απαιτεί τη πιστή τήρηση γραφής των εντολών της όπως έχουν προκαθοριστεί ή όπως έχουν δηλωθεί τα ονόματα των μεταβλητών. Επίσης, μπορούμε να εισάγουμε σχόλια μέσα στην Java Script χωρίς να εμφανίζονται στην ιστοσελίδα μας. Υπάρχουν δύο τρόποι εισαγωγής σχολίων. Η πρώτη, επιτρέπει την εισαγωγή σχολίων σε μια γραμμή με την πρόσθεση δύο πλάγιων γραμμών // (slash) στην αρχή της γραμμής και η δεύτερη, επιτρέπει την εισαγωγή σχολίων που μπορούν να επεκταθούν και σε περισσότερες από μια γραμμές. Αυτό επιτυγχάνεται με το ζεύγος των συμβόλων /* και */ όπως ακριβώς το ίδιο συμβαίνει και στη γλώσσα C. Η δήλωση των μεταβλητών δεν είναι υποχρεωτική στη γλώσσα JavaScript. συνιστάται η δήλωσή τους αν θέλουμε να παράγουμε κώδικα που θα είναι αξιόπιστος και λειτουργικός. Μπορούμε να δηλώσουμε τις μεταβλητές είτε εκτός του σώματος μιας συνάρτησης, οπότε και θεωρείται γενική μεταβλητή (global variable), είτε εντός της δήλωσης μιας συνάρτησης οπότε 16

18 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής και θεωρείται τοπική μεταβλητή (local variable) με τη χρήση της λέξης κλειδί var 12. Σε αυτό το κεφάλαιο αναφέραμε τις βασικές γλώσσες προγραμματισμου με τις οποίες έχει δημιουργηθεί το Hot Potatoes. Στο επόμενο κεφάλαιο θα αναφέρουμε τα βασικά βήματα που πρέπει να ακολουθήσουμε για την δημιουργία ασκήσεων με το Hot Potatoes

19 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Κεφάλαιο 2 ο Βασικά βήματα για δημιουργία ασκήσεων στο Hot Potatoes Για την δημιουργία ασκήσεων σε όλα τα προγράμματα του Hot Potatoes ακολουθείται η ίδια διαδικασία που αποτελείται από τρία βασικά βήματα, την εισαγωγή των στοιχείων της άσκησης, τη διαμόρφωση της άσκησης και τη δημιουργία της ιστοσελίδας. Για την επιτυχία των ασκήσεων μας θα πρέπει τα βήματα να ακολουθούνται με αυτή την σειρά. 2.1 Βασικά Βήματα 1ο βήμα: Εισαγωγή των στοιχείων της άσκησης Τα στοιχεία για την άσκηση εισάγονται στο κύριο παράθυρο του κάθε προγράμματος. Πληκτρολογούμε τον τίτλο, τις ερωτήσεις, τις απαντήσεις, την βοήθεια κ.α., αυτό γίνεται σε όλα τα προγράμματα 13. Για παράδειγμα παρακάτω εμφανίζεται η κύρια οθόνη του JQuiz (εικόνα 2.1) (Ποια είναι τα στάδια δημιουργίας των ασκήσεων με το Hot Potatoes) 18

20 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.1 Κύρια οθόνη του JQuiz Μπορούμε να δούμε ότι υπάρχει χώρος για τον τίτλο της άσκησης, για την τρέχουσα ερώτηση και πλαίσια για τέσσερις απαντήσεις στην ερώτηση. Πατώντας το βελάκι δίπλα στον αριθμό της ερώτησης προς τα πάνω μας εμφανίζεται ένα πλαίσιο για νέα ερώτηση. Αν θελήσουμε να προσθέσουμε περισσότερες από τέσσερις απαντήσεις, χρησιμοποιούμε το ζευγάρι με τα βελάκια λίγο πιο χαμηλά. Όταν ολοκληρωθεί η εισαγωγή όλων των στοιχείων αποθηκεύουμε το αρχείο δημιουργίας. Κάθε πρόγραμμα του Hot Potatoes αποθηκεύει τα αρχεία του με την δική του επέκταση. Το JQuiz :.jqz το JCloze:.jcl το JCross:.jcw το JMix:.jmx το JMatch:.jmt 19

21 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Αν θελήσουμε να κάνουμε αλλαγές στην άσκηση αργότερα, θα πρέπει να ξαναφορτώσουμε το αρχείο, να γίνουν οι αλλαγές και να δημιουργήσουμε νέες ιστοσελίδες. Δεν μπορούν να ξαναφορτωθούν οι ιστοσελίδες μέσα στα προγράμματα, γι' αυτό θα πρέπει να αποθηκεύουμε τα αρχεία δημιουργίας. 2ο βήμα: Διαμόρφωση της άσκησης Οι ασκήσεις που δημιουργούνται με τα προγράμματα του Hot Potatoes χρησιμοποιούν μια ποικιλία κουμπιών και εντολών για να αλληλεπιδράσουν με τον χρήστη. Ενώ τα στοιχεία των ασκήσεων (ερωτήσεις, απαντήσεις κτλ) θα αλλάζουν από άσκηση σε άσκηση, μερικά πράγματα, όπως οι τίτλοι κουμπιών, εντολές και εξηγήσεις δεν αλλάζουν τόσο συχνά. Αυτά λοιπόν που δεν αλλάζουν αποθηκεύονται στη φόρμα του αρχείου ρυθμίσεων. Εξ' ορισμού τα προγράμματα μοιράζονται το ίδιο αρχείο ρυθμίσεων. Έτσι τα κοινόχρηστα στοιχεία σαν τους τίτλους των κουμπιών «Έλεγχος» ή «Βοήθεια» χρειάζεται να αλλάξουν μια φορά μόνο. Χρησιμοποιώντας το αρχείο ρυθμίσεων μπορούμε να οργανώσουμε τα προγράμματα για να δημιουργήσουμε τις ασκήσεις σε οποιαδήποτε γλώσσα υποστηρίζει το Hot Potatoes 14. Κάθε πρόγραμμα παρέχει πρόσβαση για το αρχείο ρυθμίσεων πατώντας στη γραμμή μενού Επιλογές > Διαμόρφωση επιλογών. Εμφανίζεται το παράθυρο που φαίνεται παρακάτω, εικόνα 2.2. Υπάρχουν πολλές καρτέλες σε αυτό το αρχείο που μας δίνουν πρόσβαση σε όλα τα στοιχεία του αρχείου ρυθμίσεων που είναι σχετικά με την εφαρμογή που χρησιμοποιούμε. Η πρώτη καρτέλα είναι Τίτλοι / Οδηγίες (Ποια είναι τα στάδια δημιουργίας ασκήσεων με το Hot Potatoes) 20

22 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.2 Αρχείο ρυθμίσεων, καρτέλα Τίτλοι / οδηγίες Ένα άλλο παράθυρο του ίδιου αρχείου διαμόρφωσης επιλογών είναι η καρτέλα Ανατροφοδότηση και είναι όπως φαίνεται στην εικόνα

23 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 2.3 Καρτέλα Ανατροφοδότηση 3ο βήμα: Δημιουργία της ιστοσελίδας Όταν τα στοιχεία μας είναι έτοιμα και έχουμε ελέγξει τις πληροφορίες διαμόρφωσης, είμαστε έτοιμοι να δημιουργήσουμε την ιστοσελίδα μας. Η δημιουργία των ιστοσελίδων είναι το απλούστερο κομμάτι χρήσης του Hot Potatoes 15. Από το μενού πατάμε Αρχείο > Δημιουργία σελίδας Web > Σελίδα Web για v6 browsers, εικόνα (Βασικά βήματα για δημιουργία ασκήσεων στο Hot Potatoes) 22

24 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.4 Δημιουργία της ιστοσελίδας Όλα τα προγράμματα του Hot Potatoes χρησιμοποιούν την ίδια εντολή για την δημιουργία ενός ενιαίου HTML αρχείου. Το πρόγραμμα μετά μας ρωτάει αν επιθυμούμε να δούμε την άσκηση στον Browser, εικόνα 2.5. Εικόνα 2.5 Προεπισκόπηση της άσκησης 23

25 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Αν πατήσουμε "Προεπισκόπηση άσκησης στο πρόγραμμα πλοήγησης" θα ανοίξει ο προεπιλεγμένος browser και η άσκηση θα φορτωθεί σ αυτόν. Με αυτόν τον τρόπο μπορούμε να ελέγξουμε αν τα αποτελέσματα ανταποκρίνονται στις προσδοκίες μας. 2.2 Σύνδεση ασκήσεων Με το Hot Potatoes μπορούμε να δημιουργήσουμε ασκήσεις που συνδέονται μεταξύ τους εύκολα και γρήγορα χρησιμοποιώντας τα κουμπιά «Επόμενη άσκηση», «Περιεχόμενα» και «Προηγούμενη άσκηση». Σε κάθε πρόγραμμα του Hot Potatoes πηγαίνουμε στο αρχείο ρυθμίσεων, κάνουμε κλικ στην καρτέλα Κουμπιά και βλέπουμε τις τοποθετήσεις για τα παραπάνω τρία κουμπιά, εικόνα 2.6. Μπορούμε να αποφασίσουμε αν θα συμπεριλάβουμε τα κουμπιά και να ορίσουμε τίτλους που θα εμφανίζονται πάνω τους όπως αναφέρονται παραπάνω. Αν θέλουμε όμως να λειτουργήσουν τα κουμπιά αυτά πρέπει να πούμε στο πρόγραμμα που θα εμφανίζεται η νέα σελίδα της άσκησης και πού η σελίδα των περιεχομένων (Βασικά βήματα για δημιουργία ασκήσεων στο Hot Potatoes) 24

26 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.6 Ρυθμίσεις για σύνδεση ασκήσεων Για να γίνει αυτό εισάγουμε κάθε φορά τη διαδρομή της νέας άσκησης στο σωστό κουμπί, κάνουμε το ίδιο με τη διαδρομή της σελίδας των περιεχομένων. Η διαδρομή μπορεί να είναι ολοκληρωμένη αρχίζοντας με ή μπορεί να είναι σχετική URL. Στην πιο απλή περίπτωση, αν η τρέχουσα άσκηση αποθηκευτεί στον ίδιο φάκελο με την επόμενη άσκηση, το μόνο που κάνουμε είναι να εισάγουμε το όνομα του αρχείου της νέας άσκησης. Το κουμπί «Περιεχόμενα» το μόνο που κάνει είναι να μας μεταφέρει στην σελίδα που ήμασταν πριν, σαν να πατάμε το κουμπί «Πίσω» στην γραμμή εργαλείων του browser Βοήθεια από το πρόγραμμα Hot Potatoes How to link a series of exercises 25

27 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes 2.3 Εισαγωγή πληκτρολογίου οθόνης στην άσκηση Στα προγράμματα JQuiz και JCloze μπορούμε να εμφανίσούμε πληκτρολόγιο οθόνης πάνω την ιστοσελίδα της άσκησης που περιέχει μια σειρά από πλήκτρα. Αυτή η επιλογή υπάρχει στην καρτέλα Διάφορα του αρχείου ρυθμίσεων. Αν τσεκάρουμε απλά την επιλογή "Εισαγωγή πληκτρολογίου οθόνης για τους μαθητές που δεν χρησιμοποιούν λατινικούς χαρακτήρες", εικόνα 2.7. Κατά την δημιουργία της άσκησης, το πρόγραμμα θα εμφανίσει ένα πλήκτρο για κάθε γράμμα που περιέχει τις απαντήσεις 18. Εικόνα 2.7 Εισαγωγή πληκτρολογίου οθόνης 18 (Βασικά βήματα για δημιουργία ασκήσεων στο Hot Potatoes) 26

28 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Αν θέλουμε να προσθέσουμε παραπάνω πλήκτρα στο πληκτρολόγιο, γράφουμε τους σχετικούς χαρακτήρες μέσα στο περιθώριο από κάτω. Όταν θα δημιουργήσουμε την άσκηση, θα δούμε μια σειρά πλήκτρων κάτω από τα κουτιά των απαντήσεων. Κάνουμε κλικ στο κουτί της απάντησης και μετά πατάμε ένα από τα πλήκτρα, θα δούμε να τυπώνεται ο χαρακτήρας αυτός του γράμματος μέσα στη σελίδα. 2.4 Αποστολή αποτελεσμάτων των ασκήσεων με Το λογισμικό Hot Potatoes μας δίνει την δυνατότητα σε όλα τα προγράμματα του να στέλνουμε τα αποτελέσματα των ασκήσεων μέσω του ηλεκτρονικού ταχυδρομείου στο δικό μας . Τη δυνατότητα αυτή την έχουμε ως σχεδιαστές των ασκήσεων αν την εισάγουμε ή όχι. Για να εισάγουμε αυτή τη δυνατότητα θα πρέπει να πάμε στο αρχείο ρυθμίσεων, στην καρτέλα CGI του προγράμματος, η οθόνη αυτής της καρτέλας είναι όπως φαίνεται στην εικόνα

29 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 2.8 Αποστολή αποτελεσμάτων μέσω e mail Η λειτουργία του CGI μας επιτρέπει όπως είπαμε, να στέλνουμε τα αποτελέσματα μιας άσκησης στο PERL CGI πρότυπο αποκαλούμενο FormMail.pl. Το FormMail θα πάρει τις πληροφορίες και θα μας τις στείλει μέσω του ηλεκτρονικού ταχυδρομείου. Αν τοποθετήσουμε σωστά τα παραπάνω, τότε ο χρήστης - στην περίπτωσή μας ο σπουδαστής - όταν φορτώσει πρώτα την σελίδα θα κληθεί να εισάγει ένα όνομα ή έναν άλλο τύπο προσδιορισμού (όπως αριθμός μητρώου). Μόλις η άσκηση είναι πλήρης το όνομα ή ο αριθμός μητρώου, ο τίτλος της άσκησης, η βαθμολογία και ο χρόνος έναρξής και λήξης θα σταλούν στο πρότυπο CGI στον κεντρικό υπολογιστή σας (Server) και το πρότυπο θα μας στείλει ένα στο δικό μας που θα περιέχει αυτές τις πληροφορίες 19. Αυτή η εργασία θα λειτουργήσει μόνο εάν 19 «Πληροφορίες» καρτέλα CGI Sending results by , παρ. What s this all about? 28

30 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής το πρότυπο FormMail.pl PERL εγκατασταθεί σωστά στον κεντρικό υπολογιστή μας (Server) οι ασκήσεις μας βρίσκονται και αυτές στον ίδιο κεντρικό υπολογιστή εισάγουμε την σωστή διεύθυνση του πρότυπου FormMail και σωστή διεύθυνση του ηλεκτρονικού ταχυδρομείου ( ) 29

31 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Κεφάλαιο 3 ο Εισαγωγή στα προγράμματα του Hot Potatoes Σε αυτό το σημείο θα αναπτύξουμε αναλυτικά με παραδείγματα όλα τα προγράμματα του Hot potatoes, τις δυνατότητες που μας προσφέρει για δημιουργία δικτυακών ασκήσεων αλλά και τι αλλαγές μπορούμε να κάνουμε. Δεν θα πρέπει να παραλείψουμε ότι μέσα στον σκληρό δίσκο του υπολογιστή μας θα πρέπει να δημιουργήσουμε έναν φάκελο που θα αποθηκεύουμε όλες τις ασκήσεις μας. Επίσης, για να εισάγουμε εικόνες στις ασκήσεις μας θα πρέπει να τις αποθηκεύουμε στον ίδιο φάκελο, πράγμα που θα διευκολύνει τους ίδιους. 3.1 Εισαγωγή στο JQuiz Το JQuiz είναι ένα εργαλείο για ασκήσεις βασισμένες στις ερωτήσεις. Κάθε άσκηση μπορεί να περιέχει απεριόριστο αριθμό ερωτήσεων. Υπάρχουν τέσσερις βασικοί τύποι στο JQuiz Ερωτήσεις πολλαπλής επιλογής (multiple choice questions) Στις ερωτήσεις πολλαπλής επιλογής επιλέγουμε τις απαντήσεις πατώντας ένα κουμπί. Αν η απάντηση είναι σωστή θα εμφανιστεί ένα μήνυμα για την σωστή απάντηση, αν η απάντηση είναι λανθασμένη θα εμφανιστεί ένα μήνυμα λάθους. Μπορούμε από το αρχείο ρυθμίσεων, να διαμορφώσουμε τα μηνύματα που θα εμφανίζονται για τις απαντήσεις. Υπάρχει η δυνατότητα Βοήθειας στην απάντηση μας που εξηγεί γιατί είναι σωστή ή λανθασμένη. Στην περίπτωση αυτή θα πρέπει να έχουμε πληκτρολογήσει το κείμενο της βοήθειας που θέλουμε να εμφανίζεται σε κάθε απάντηση. Αν δώσουμε λανθασμένη απάντηση μπορούμε να συνεχίσουμε μέχρι να επιλέξουμε την 20 ( Τι είναι το JQuiz ) 30

32 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής σωστή απάντηση. Η βαθμολογία για κάθε ερώτηση βασίζεται στον αριθμό των προσπαθειών που κάνουμε, μέχρι να βρούμε τη σωστή απάντηση. Μόλις επιλέξουμε την σωστή απάντηση η βαθμολογία σταματά, αλλά μπορούμε να δούμε τη Βοήθεια για τις υπόλοιπες απαντήσεις χωρίς βαθμούς ποινής. 2. Ερωτήσεις σύντομης απάντησης (short answer questions) Στις ερωτήσεις σύντομης απάντησης γράφουμε την απάντηση μέσα σ ένα πλαίσιο κειμένου στη σελίδα και πατάμε το κουμπί Ελέγχου για να δούμε αν απαντήσαμε σωστά. Η σελίδα θα προσπαθήσει να βρει την απάντησή από μία λίστα σωστών ή λανθασμένων απαντήσεων που έχουμε καθορίσει εμείς. Αν δώσουμε σωστή απάντηση θα εμφανιστεί το μήνυμα επιβράβευσης, αν όχι τότε το πρόγραμμα θα ψάξει να βρει ποιο τμήμα της απάντησης μας είναι σωστό και ποιο λανθασμένο και θα μας εμφανίσει σχετικό μήνυμα. Η βαθμολογία για κάθε ερώτηση βασίζεται στον αριθμό των προσπαθειών μέχρι να βρούμε τη σωστή απάντηση. Μπορούμε να συμπεριλάβουμε στην άσκηση το κουμπί «Βοήθεια» από το αρχείο ρυθμίσεων, το οποίο θα μας δίνει ένα γράμμα της απάντησης κάθε φορά που το πατάμε. Χρησιμοποιώντας όμως το κουμπί αυτό ο χρήστης χρεώνεται με βαθμούς ποινής. 3. Υβριδική ερώτηση (hybrid question) Οι υβριδικές ερωτήσεις είναι συνδυασμός ερωτήσεων πολλαπλής επιλογής και σύντομης απάντησης. Σ αυτόν τον τύπο ερωτήσεων στην αρχή εμφανίζεται ένα παράθυρο κειμένου και μας ζητάει να γράψουμε την απάντηση. Αν αποτύχουμε να δώσουμε τη σωστή απάντηση μετά από ένα συγκεκριμένο αριθμό δοκιμών, τις οποίες μπορούμε να διαμορφώσουμε από το Αρχείο ρυθμίσεων, η ερώτηση αλλάζει μορφή και γίνεται πολλαπλής επιλογής, για να γίνει ευκολότερη. 4. Πολυσυλλεκτική ερώτηση (multi select question) Ο τύπος αυτός μας ζητά να επιλέξουμε ορισμένα στοιχεία από ένα σύνολο στοιχείων. Η ιδέα εδώ είναι ότι πρέπει να επιλέξουμε όλα τα σωστά στοιχεία 31

33 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes και να μην επιλέξουμε τα λανθασμένα στοιχεία. Είναι η ερώτηση και μετά ακολουθεί μια λίστα από σωστές και λανθασμένες απαντήσεις, ο χρήστης θα πρέπει να επιλέξει τις σωστές απαντήσεις. Μετά πατάμε το κουμπί Ελέγχου. Αν η απάντηση δεν είναι απόλυτα σωστή, θα δούμε τον αριθμό των σωστών επιλογών μας. Η βοήθεια μπορεί να εμφανίσει το πρώτο στοιχείο από τη λίστα των λέξεων το οποίο είτε το έχουμε επιλέξει ενώ δεν έπρεπε να το επιλέξουμε είτε δεν το επιλέξαμε ενώ έπρεπε να το επιλέξουμε Δημιουργία άσκησης Multiple choice στο JQuiz Όπως αναφέραμε παραπάνω τρία είναι τα βασικά βήματα για την δημιουργία ασκήσεων στο hot potatoes, η εισαγωγή των στοιχείων της άσκησης, η διαμόρφωση των επιλογών της άσκησης και η δημιουργία ιστοσελίδας της άσκησης. Θα δημιουργήσουμε μια άσκηση Multiple choice στο JQuiz ακολουθώντας τα βήματα αυτά ένα - ένα. Αφού επιλέξουμε από την αρχική σελίδα του Hot potatoes (εικόνα 1) το πρόγραμμα JQuiz θα μας εμφανιστεί το παράθυρο όπως φαίνεται στην εικόνα 3.1. Αν μας μπερδεύει πηγαίνουμε στο μενού Επιλογές > Επίπεδο > Για αρχάριους, και αλλάζει η μορφή, δεν υπάρχει κάποια διαφορά στην εμφάνιση της άσκησης. 21 Βοήθεια από το πρόγραμμα Hot Potatoes JQuiz question types (1,2,3,4) 32

34 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.1 Αρχική οθόνη του JQuiz Στο πρώτο βήμα της εισαγωγής των στοιχείων θα συμπληρώσουμε τα κενά περιθώρια του τίτλου, των ερωτήσεων, των απαντήσεων και της βοήθειας. Θα πρέπει να βεβαιωθούμε ότι στην δεξιά πλευρά υπάρχει η επιλογή Πολλαπλών επιλογών από την κυλιόμενη λίστα με το βελάκι. Αν δεν υπάρχει την επιλέγουμε. Στο λευκό περιθώριο του τίτλου πληκτρολογούμε το τίτλο της άσκησης, στο παράδειγμά μας θα πληκτρολογήσουμε «Διοίκηση Ανθρωπίνων Πόρων» στην συνέχεια πληκτρολογούμε την πρώτη ερώτηση, στο λευκό περιθώριο Ε1 της Ερώτησης. Στα λευκά περιθώρια των απαντήσεων αριστερά κάτω από την ερώτηση πληκτρολογούμε τις Απαντήσεις, σωστές και λανθασμένες. Στα πλαίσια της Βοήθειας δεξιά πληκτρολογούμε την βοήθεια κάθε απάντησης. Η οθόνη του παραδείγματος μας είναι όπως φαίνεται στην εικόνα

35 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.2 Παράδειγμα συμπλήρωσης στο JQuiz, άσκηση πολλαπλής επιλογής Κάθε απάντηση, σωστή ή λανθασμένη, έχει την δική της βοήθεια. Με αυτόν τον τρόπο μπορούμε να βοηθήσουμε τον χρήστη να βρει την σωστή απάντηση αλλά και να εξηγούμε γιατί είναι λάθος ή σωστή η επιλογή του. Δεν θα πρέπει να ξεχάσουμε ότι μπορούμε να μην συμπληρώσουμε την βοήθεια, εξαρτάται από εμάς που δημιουργούμε τις ασκήσεις ο βαθμός δυσκολίας που θα έχουν οι ασκήσεις. Πρέπει να τσεκάρουμε το κουτί Αποδοχή ως σωστό δίπλα στην σωστή απάντηση. Για να δημιουργήσουμε άλλες ερωτήσεις πρέπει να επιλέξουμε με το βελάκι προς τα επάνω την Ε2,Ε3 κ.ο.κ. και ακολουθούμε την παραπάνω διαδικασία. Επίσης μπορούμε μέσα σε αυτήν την άσκηση να δημιουργήσουμε ερωτήσεις άλλων τύπων όχι μόνο πολλαπλής επιλογής. 34

36 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Δημιουργία άσκησης Σύντομης απάντησης στο JQuiz Ας δούμε στην συνέχεια της άσκησης πως δημιουργούμε ερωτήσεις σύντομης απάντησης (short answer questions). Αφού έχουμε επιλέξει την δεύτερη ερώτηση Ε2, πηγαίνουμε να αλλάξουμε τον τύπο της ερώτησης. Στην δεξιά πλευρά που υπάρχει η επιλογή Πολλαπλών επιλογών πατάμε το βελάκι και επιλέγουμε Σύντομης απάντησης, εικόνα 3.3. Εικόνα 3.3 Παράδειγμα συμπλήρωσης στο JQuiz, άσκηση σύντομης απάντησης Παρατηρούμε ότι δεν υπάρχει καμία διαφορά με την προηγούμενη εικόνα της ερώτησης πολλαπλής επιλογής, η διαφορά έγκειται όταν θα κάνουμε προεπισκόπηση της άσκησης, θα το δούμε παρακάτω. Ο τίτλος δεν αλλάζει 35

37 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes και δεν χρειάζεται να τον ξανά πληκτρολογήσουμε. Στην ερώτηση πληκτρολογούμε μία καινούργια ερώτηση όπως για παράδειγμα «Ποιο είναι το τρίτο στάδιο επιλογής προσωπικού;». Στις απαντήσεις, όπως και προηγουμένως, πληκτρολογούμε σωστές και λανθασμένες και επιλέγουμε από τη δεξιά πλευρά ποια είναι σωστή τσεκάροντας το κουτί Αποδοχή ως σωστό. Δεν θα πρέπει να ξεχάσουμε να συμπληρώσουμε την βοήθεια, που κάθε απάντηση έχει την δική της Δημιουργία Υβριδικής άσκησης στο JQuiz Ας δημιουργήσουμε μια ερώτηση με τον τρίτο τύπο ερωτήσεων τις υβριδικές. Πάλι δεξιά από το βελάκι επιλογής τύπου ερωτήσεων επιλέγουμε Υβριδικές. Σε αυτόν τον τύπο αν αποτύχουμε να βρούμε την σωστή απάντηση μετά από έναν αριθμό δοκιμών αλλάζει από σύντομης απάντησης και γίνεται πολλαπλής επιλογής, πιο εύκολη. Η οθόνη αυτής της επιλογής στο JQuiz αλλάζει ελάχιστα όπως φαίνεται και στην εικόνα 3.4. Η διαφορά της με τις προηγούμενες είναι ότι μας δίνει την δυνατότητα αν θέλουμε να μην εμφανίζεται κάποια λανθασμένη απάντηση όταν γίνει πολλαπλής επιλογής η ερώτηση. Αυτό πετυχαίνεται με το να μη τσεκάρουμε την επιλογή Να περιληφθεί στις επιλογές μου. Έτσι ακολουθούμε πάλι την ίδια διαδικασία με τις προηγούμενες ερωτήσεις, για να συμπληρώσουμε την ερώτηση. Η ερώτηση που πληκτρολογούμε σε αυτόν τον τύπο ερωτήσεων είναι «Ποια μέθοδος εκπαίδευσης είναι αυτή που υπό την επίβλεψη του εκπαιδευτή, ο εργαζόμενος αποπειράται να αποτελέσει μια εργασία που μόλις του έχει περιγραφεί ή επιδειχθεί;». 36

38 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.4 Παράδειγμα συμπλήρωσης στο JQuiz, υβριδική άσκηση Δημιουργία άσκησης Πολλών επιλογών στο JQuiz Τέλος, ένας άλλος τύπος ερώτησης στο JQuiz είναι οι ερωτήσεις Πολλών επιλογών που από το βελάκι δεξιά επιλέγουμε αυτόν τον τύπο. Η οθόνη για την δημιουργία αυτού του τύπου ερώτησης είναι όπως φαίνεται και στην εικόνα 3.5. Σε αυτόν τον τύπο ερωτήσεων μπορούμε να επιλέξουμε πάνω από μία σωστές απαντήσεις απλά να τσεκάρουμε δεξιά από τις σωστές απαντήσεις την επιλογή Πρέπει να επιλεγεί. Πάλι ακολουθούμε την ίδια διαδικασία στην συμπλήρωση της ερώτησης όπως και στις προηγούμενες. Εδώ για παράδειγμα πληκτρολογούμε την ερώτηση «Ποια από τα παρακάτω είναι εσωτερικές πηγές για προσέλκυση προσωπικού;». 37

39 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.5 Παράδειγμα συμπλήρωσης στο JQuiz, άσκηση πολλών επιλογών Δεν θα πρέπει να παραλείψουμε και άλλες δυνατότητες που έχουμε στο Hot Potatoes στη δημιουργία ασκήσεων. Μπορούμε να εισάγουμε εικόνες τόσο από τον δίσκο μας όσο και από το internet, συνδέσμους, πολυμέσα αντικείμενα, πίνακες αλλά και να επιλέξουμε την γραμματοσειρά, το στυλ και το μέγεθος των γραμμάτων (εικόνα 3.6). Εικόνα 3.6 Εισαγωγή αντικειμένων στην άσκηση Το δεύτερο και σημαντικό βήμα είναι η διαμόρφωση των επιλογών της άσκησης. Η διαδικασία γίνεται μία φορά για όλους τους τύπους ερωτήσεων 38

40 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής της άσκησης. Για να διαμορφώσουμε την άσκηση μας όπως θέλουμε πηγαίνουμε Επιλογές > Διαμόρφωση επιλογών > Αρχείο ρυθμίσεων, εικόνα 3.7. Εικόνα 3.7 Διαμόρφωση επιλογών Στην καρτέλα Τίτλοι / Οδηγίες γράφουμε τον υπότιτλο της άσκησης και τις οδηγίες για την εκτέλεση της από τον χρήστη, εικόνα 3.8. Εικόνα 3.8 Διαμόρφωση αρχείου ρυθμίσεων, καρτέλα Τίτλοι / οδηγίες 39

41 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Στην καρτέλα Ανατροφοδότηση γράφουμε πως θέλουμε να εμφανίζονται τα μηνύματα Σωστού ή Λάθους, τα αποτελέσματα κλπ, εικόνα 3.9. Εικόνα 3.9 Διαμόρφωση αρχείου ρυθμίσεων, καρτέλα Ανατροφοδότηση Στην καρτέλα Κουμπιά γράφουμε τι θέλουμε να εμφανίζεται πάνω σε κάθε κουμπί της άσκησης ώστε να καταλαβαίνει ο χρήστης τι κάνει το αντίστοιχο κουμπί, αλλά και ποια κουμπιά θέλουμε να εισάγουμε στην άσκηση, εικόνα

42 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.10 Διαμόρφωση αρχείου ρυθμίσεων, καρτέλα Κουμπιά Στην καρτέλα Εμφάνιση επιλέγουμε τα χρώματα εμφάνισης της άσκησης κάθε αντικειμένου, εικόνα

43 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.11 Διαμόρφωση αρχείου ρυθμίσεων, καρτέλα Εμφάνιση Στην καρτέλα Χρονόμετρο μπορούμε να ορίσουμε το χρόνο εκτέλεσης της άσκησης και το κατάλληλο μήνυμα σε περίπτωση που ο χρόνος τελειώσει, εικόνα

44 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.12 Διαμόρφωση αρχείου ρυθμίσεων, καρτέλα Χρονόμετρο Στην καρτέλα Διάφορα μπορούμε να διαμορφώσουμε κάποια συγκεκριμένα στοιχεία του προγράμματος JQuiz, εικόνα

45 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.13 Διαμόρφωση αρχείου ρυθμίσεων, καρτέλα Διάφορα Επίσης υπάρχει και η καρτέλα CGI που μπορούμε να αποστείλουμε τα αποτελέσματα μέσω . Μετά πατάμε το κουμπί OK για να αποθηκευτούν οι αλλαγές στο αρχείο ρυθμίσεων. Θα πρέπει να αποθηκεύσουμε το αρχείο δημιουργίας, πηγαίνουμε Αρχείο > αποθήκευση ως για να αποθηκεύσουμε το αρχείο δημιουργίας για παράδειγμα στον φάκελο hot potatoes με όνομα anporoi.jqz, εικόνα

46 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.14 Αποθήκευση του αρχείου δημιουργίας Το τελευταίο βήμα είναι η δημιουργία ιστοσελίδας για την παρουσίαση των στοιχείων της άσκησης. Πηγαίνουμε Αρχείο > Δημιουργία σελίδας Web > Σελίδα Web για V6 browsers, εικόνα Εικόνα 3.15 Δημιουργία ιστοσελίδας της άσκησης 45

47 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Μετά μας ζητάει να αποθηκεύσουμε την εργασία με όποιο όνομα προτιμάμε ως ιστοσελίδα σε κάποιο φάκελο του σκληρού δίσκου στο παράδειγμα μας τα αποθηκεύουμε στον φάκελο hot potatoes με όνομα anporoi.htm, εικόνα Εικόνα 3.16 Αποθήκευση του html αρχείου της άσκησης Θα είναι καλύτερα, για την δική μας ευκολία, να τα αποθηκεύουμε σε έναν φάκελο. Ακόμη αν θέλουμε να εισάγουμε εικόνες να τις αποθηκεύουμε σε αυτόν τον φάκελο. Το πρόγραμμα θα μας πληροφορήσει για την δημιουργία του αρχείου της ιστοσελίδας και θα μας δώσει την δυνατότητα να κάνουμε την προεπισκόπηση της άσκησης, εικόνα

48 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.17 Δυνατότητα προεπισκόπησης της άσκησης Πατάμε Προεπισκόπηση άσκησης στο πρόγραμμα πλοήγησης. Η άσκηση μας μετά την προεπισκόπηση θα είναι όπως φαίνεται στην εικόνα

49 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.18 Προβολή της άσκησης σε μορφή ιστοσελίδας 3.2 Εισαγωγή στο JCloze (Ασκήσεις συμπλήρωσης κενών) Από την αρχική οθόνη του Hot Potatoes πατάμε το JCloze. Το JCloze δημιουργεί ασκήσεις συμπλήρωσης κενών σε κείμενα. Ο χρήστης εισάγει στα κενά τις σωστές κατά την γνώμη του λέξεις ή φράσεις και πατά το κουμπί «Έλεγχος». Οι σωστές απαντήσεις θα εισαχθούν αυτόματα στα κενά του κειμένου ενώ οι λανθασμένες απαντήσεις θα σβηστούν και θα παραμείνουν τα κενά ώστε να συμπληρωθούν σε επόμενη προσπάθεια με τις σωστές απαντήσεις. Για κάθε λανθασμένη απάντηση ο χρήστης χρεώνεται με ποινή που μειώνει την συνολική του βαθμολογία. Έτσι η βαθμολογία του εξαρτάται από τον αριθμό των ελέγχων που θα πραγματοποιήσει ώσπου να δώσει μια 48

50 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής απόλυτα σωστή απάντηση 22. Μπορούμε να συμπεριλάβουμε στην άσκηση το κουμπί «Βοήθεια» που ο χρήστης θα μπορεί να την χρησιμοποιήσει και κάθε φορά να του δίνει ένα γράμμα της ορθής λέξης ή φράσης της απάντησης στο κενό που τοποθετεί τον κέρσορα. Μπορούμε επίσης να συμπεριλάβουμε μια συγκεκριμένη ένδειξη ή κάποιο σχόλιο για κάθε κενό. Ας δούμε ένα παράδειγμα για να γίνει πιο κατανοητό πως μπορούμε να σχεδιάσουμε ασκήσεις αυτού του τύπου. Ξεκινάμε με την εισαγωγή των στοιχείων της άσκησης που είναι το πρώτο βασικό βήμα για την επιτυχία της άσκησης JCloze. Στην εικόνα 3.19 φαίνεται η κύρια οθόνη εμφάνισης της άσκησης. Εικόνα 3.19 Αρχική οθόνη JCloze 22 ( Τι είναι το JCloze ) 49

51 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Θα πρέπει να συμπληρώσουμε τα κενά περιθώρια της άσκησης. Στη θέση Τίτλος γράφουμε τον τίτλο της άσκησης, για παράδειγμα «Επικοινωνία Ανθρώπου Υπολογιστή» μάθημα του τμήματος Διαχείρισης Πληροφοριών, στο λευκό περιθώριο από κάτω γράφουμε το κείμενο της άσκησης, συμπληρώνοντας τα κενά αυτά η οθόνη του JCloze θα είναι όπως φαίνεται στην εικόνα Εικόνα 3.20 Παράδειγμα συμπλήρωσης άσκησης στο JCloze Για να δημιουργήσουμε τα κενά θα πρέπει να επιλέξουμε με το ποντίκι τη λέξη ή την φράση που θέλουμε να είναι κενό και πατάμε το κουμπί «Κενό». Αμέσως μας ανοίγει το παράθυρο που βλέπουμε στην εικόνα

52 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.21 Δημιουργία κενών λέξεων Στη θέση Λέξη είναι γραμμένη η σωστή κρυφή λέξη που θα πρέπει να συμπληρωθεί στο κενό. Στη θέση Βοήθεια μπορούμε να περιλάβουμε βοήθεια που θα βοηθάει τον χρήστη να βρει την κρυφή λέξη του κενού. Στη θέση Εναλλαγή σωστών απαντήσεων μπορούμε να γράψουμε και εναλλακτικές σωστές λέξεις που μπορούν να μπουν στη θέση του κενού, τέλος πατάμε «OK». Την ίδια διαδικασία ακολουθούμε για να προσθέσουμε στην άσκηση μας και άλλα κενά. Κενά μπορούμε να εισάγουμε και με έναν ακόμη τρόπο, πατώντας το κουμπί Αυτόματα κενά, αφού πρώτα γράψουμε το κείμενο, εικόνα Εικόνα 3.22 Εισαγωγή αυτόματων κενών 51

53 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Σε αυτή την περίπτωση μας ανοίγει ένα παράθυρο, εικόνα 3.23, και στο λευκό περιθώριο αντί να γράψουμε τη λέξη που θέλουμε να ορίσουμε ως κρυφή λέξη, γράφουμε ανά πόσες λέξεις θέλουμε να υπάρχει κενό. Εικόνα 3.23 Δημιουργία αυτόματων κενών Αν θέλουμε να διαγράψουμε κάποιο κενό που βάλαμε πηγαίνουμε τον κέρσορα του ποντικιού πάνω στην λέξη και πατάμε το κουμπί «Διαγραφή κενού», εικόνα Εικόνα 3.24 Διαγραφή κενού Ακόμη μπορούμε να διαγράψουμε αυτόματα όλα τα κενά που δημιουργήσαμε πατώντας απλά το κουμπί «Εκκαθάριση κενών», εικόνα Εικόνα 3.25 Διαγραφή όλων των κενών Αν έχουμε τελειώσει με την εισαγωγή των στοιχείων της άσκησης πηγαίνουμε στο δεύτερο βήμα που είναι να διαμορφώσουμε τα χαρακτηριστικά της άσκησης (εντολές, κουμπιά, εμφάνιση κλπ) διαμορφώνοντας το παράδειγμα μας. Πηγαίνουμε από την γραμμή μενού Επιλογές > Διαμόρφωση επιλογών > Αρχείο ρυθμίσεων, εικόνα

54 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.26 Διαμόρφωση άσκησης Η διαμόρφωση της άσκησης γίνεται όπως σε όλα τα εργαλεία του Hot Potatoes με τις καρτέλες Τίτλοι / οδηγίες, Ανατροφοδότηση, Κουμπιά, Εμφάνιση, Χρονόμετρο, Διάφορα, Προσαρμογή, CGΙ. Η διαμόρφωση που κάνουμε στο παράδειγμά μας είναι στην καρτέλα Τίτλοι/ οδηγίες, όπως φαίνεται στην εικόνα Εικόνα 3.27 Διαμόρφωση της καρτέλας Τίτλοι / Οδηγίες 53

55 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Η καρτέλα Ανατροφοδότηση του JCloze είναι πιο απλή από του JQuiz, εικόνα Εικόνα 3.28 Διαμόρφωση της καρτέλας Ανατροφοδότηση Στην καρτέλα Κουμπιά διαμορφώνουμε τι θα γράφουν πάνω τα κουμπιά που θα εμφανίζονται ώστε να είναι κατανοητά από τον χρήστη αλλά και ποια κουμπιά θα εισάγουμε στην άσκησή μας για παράδειγμα κάνουμε τις αλλαγές όπως φαίνονται στην εικόνα

56 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.29 Διαμόρφωση της καρτέλας Κουμπιά Στην καρτέλα Εμφάνιση διαμορφώνουμε τι χρώματα θα έχει η άσκησή μας, στην καρτέλα Χρονόμετρο επιλέγουμε αν θέλουμε η άσκηση μας να έχει όριο χρόνου και καθορίζουμε εμείς το διάστημα. Στην καρτέλα Διάφορα επιλέγουμε αν θέλουμε να εμφανίζεται η λίστα των κενών λέξεων, drop-down menu αλλά και αν θέλουμε πληκτρολόγιο οθόνης, εικόνα

57 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.30 Διαμόρφωση καρτέλας Διάφορα Μετά την ολοκλήρωση της διαμόρφωσης του αρχείου ρυθμίσεων, πατάμε το κουμπί «OK». Δεν θα πρέπει να παραλείψουμε ότι μπορούμε και σ αυτό το εργαλείο JCloze να εισάγουμε εικόνες, συνδέσμους, πολυμέσα και πρόσθετο βοηθητικό κείμενο, Αρχείο > Προσθήκη βοηθητικού κειμένου, εικόνα

58 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.31 Εισαγωγή βοηθητικού κειμένου Αποθηκεύουμε το αρχείο δημιουργίας σε έναν φάκελο, στο παράδειγμά μας στον φάκελο hot potatoes με όνομα epikoinonia.jcl, εικόνα Εικόνα 3.32 Αποθήκευση του αρχείου δημιουργίας Το τελευταίο βήμα είναι η δημιουργία ιστοσελίδας για την παρουσίαση των στοιχείων της άσκησης. Πηγαίνουμε Αρχείο > Δημιουργία σελίδας Web > Σελίδα Web για V6 browsers. Μας ζητάει να αποθηκεύσουμε την άσκηση μας σαν ιστοσελίδα. Αποθηκεύουμε την εργασία με όποιο όνομα θέλουμε σε 57

59 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes κάποιο φάκελο στο σκληρό δίσκο, στο παράδειγμά μας το αποθηκεύουμε στον φάκελο hot potatoes με όνομα epikoinonia.htm, εικόνα Εικόνα 3.33 Αποθήκευση ως html αρχείου της άσκησης Το πρόγραμμα θα μας πληροφορήσει για την δημιουργία του αρχείου της ιστοσελίδας και μας δίνει την δυνατότητα να κάνουμε προεπισκόπηση της, εικόνα Εικόνα 3.34 Δυνατότητα προεπισκόπησης της άσκησης 58

60 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Πατάμε Προεπισκόπηση άσκησης στο πρόγραμμα πλοήγησης. Η άσκησή μας θα εμφανιστεί σαν ιστοσελίδα όπως φαίνεται στην εικόνα Εικόνα 3.35 Εμφάνιση άσκησης σε μορφή ιστοσελίδας Χρήση του drop-down menu Με την χρήση του εργαλείου αυτού αντί να πληκτρολογεί ο χρήστης τη σωστή λέξη στο κενό έχει τη δυνατότητα να την επιλέγει από μια κάθετη λίστα που έχουμε δημιουργήσει και η οποία εμφανίζεται δίπλα στο κενό. Για να δουλέψει αυτό θα πρέπει να έχουμε τσεκάρει το κουτάκι Use dropdown list instead of text box in output στην καρτέλα Διάφορα του Αρχείου ρυθμίσεων, εικόνα

61 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.36 Δυνατότητα δημιουργίας Dropdown menu στην άσκηση Αν την αποθηκεύσουμε, έστω με όνομα epikoinonia1.jcl, και κάνουμε προεπισκόπηση η άσκησή μας θα εμφανιστεί όπως φαίνεται στην εικόνα

62 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.37 Εμφάνιση άσκησης σε μορφή ιστοσελίδας με χρήση dropdown menu 3.3 Εισαγωγή στο JCross (Ασκήσεις σταυρόλεξων) Με το JCross δημιουργούμε σταυρόλεξα γρήγορα και εύκολα 23. Αρκεί να ανοίξουμε το πρόγραμμα JCross από την αρχική οθόνη του hot potatoes, η βασική οθόνη του προγράμματος είναι όπως φαίνεται στην εικόνα ( Τι είναι το JCross ) 61

63 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.38 Αρχική οθόνη του JCross Παρατηρούμε ότι είναι διαφορετική η οθόνη από τις προηγούμενες ασκήσεις που είδαμε. Το πρώτο βήμα, όπως έχουμε αναφέρει, είναι η εισαγωγή των στοιχείων της άσκησης. Στο λευκό περιθώριο του τίτλου γράφουμε τον τίτλο του σταυρόλεξου για παράδειγμα «Πληροφοριακά Συστήματα Διοίκησης». Στη συνέχεια πατάμε Διαχείριση πλέγματος > Αυτόματη δημιουργία πλέγματος, εικόνα Εικόνα 3.39 Δημιουργία πλέγματος 62

64 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Μας εμφανίζεται η οθόνη : Στο λευκό περιθώριο αριστερά εισάγουμε τις λέξεις του σταυρόλεξου, μια μια κάθετα με κεφαλαία γράμματα, εικόνα Εικόνα 3.40 Εισαγωγή λέξεων 63

65 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Όταν τελειώσουμε με την εισαγωγή των λέξεων πατάμε το κουμπί «Δημιουργία πλέγματος». Μας εμφανίζεται η οθόνη της εικόνας 3.41 και στην συνέχεια πατάμε το κουμπί «Ορισμοί». Εικόνα 3.41 Δημιουργία πλέγματος του σταυρόλεξου Εμφανίζεται η παρακάτω οθόνη, εικόνα Επιλέγουμε καθεμιά από τις λέξεις και γράφουμε ένα ορισμό στο λευκό περιθώριο κάτω από τις λέξεις όπου αναβοσβήνει ο κέρσορας του ποντικιού. 64

66 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.42 Εισαγωγή ορισμών Οι ορισμοί θα εμφανίζονται στην άσκηση δίνοντας στον χρήστη στοιχεία για να βρει τη σωστή απάντηση. Μετά από κάθε ορισμό πατάμε το κουμπί «OK» δίπλα σε κάθε ορισμό. Αν έχουμε συμπληρώσει τους ορισμούς για κάθε λέξη πατάμε το κουμπί «OK» στο κάτω μέρος του παραθύρου. Εμφανίζεται ξανά η παραπάνω οθόνη δημιουργίας της άσκησης, εικόνα Στην συνέχεια, στο δεύτερο βήμα, θα πρέπει να διαμορφώσουμε την άσκηση μας δικές μας επιλογές. Πηγαίνουμε Επιλογές > Διαμόρφωση επιλογών > Αρχείο ρυθμίσεων. Οι καρτέλες του αρχείου ρυθμίσεων είναι Τίτλοι/ οδηγίες, Ανατροφοδότηση, Κουμπιά, Εμφάνιση, Χρονόμετρο, Διάφορα, Προσαρμογή, CGI. Σε όλες τις καρτέλες, έκτός της καρτέλας Τίτλοι/ Οδηγίες και Διάφορα, κάνουμε τις αλλαγές, όπως και στις παραπάνω ασκήσεις, στις καρτέλες Κουμπιά, Εμφάνιση και Χρονόμετρο. Στην καρτέλα Τίτλοι/ Οδηγίες κάνουμε τις αλλαγές όπως φαίνονται στην εικόνα

67 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.43 Διαμόρφωση καρτέλας Τίτλοι / Οδηγίες Προσοχή θα πρέπει να δείξουμε στην καρτέλα Διάφορα που θα πρέπει να επιλέξουμε αν θέλουμε «Να περιληφθεί λίστα των ορισμών κάτω από το πλέγμα» θα πρέπει να τσεκάρουμε το αντίστοιχο κουτάκι ή ακόμη αν θέλουμε πληκτρολόγιο οθόνης στην άσκηση θα πρέπει πάλι να τσεκάρουμε το αντίστοιχο κουτάκι, εικόνα

68 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.44 Διαμόρφωση καρτέλας Διάφορα, εισαγωγή λίστας ορισμών Αν έχουμε ολοκληρώσει τις αλλαγές με τις επιλογές μας πατάμε το κουμπί «OK». Μπορούμε να εισάγουμε και βοηθητικό κείμενο στην άσκησή μας βοηθώντας τον χρήστη να καταλάβει τι πρέπει να κάνει, πηγαίνουμε Αρχείο > Προσθήκη βοηθητικού κειμένου, εικόνα

69 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.45 Εισαγωγή βοηθητικού κειμένου Έπειτα πρέπει να αποθηκεύσουμε το αρχείο δημιουργίας σε έναν φάκελο του σκληρού δίσκου του υπολογιστή μας, στο παράδειγμα μας το αποθηκεύουμε στον φάκελο hot potatoes με όνομα psd.jcw, εικόνα Εικόνα 3.46 Αποθήκευση του αρχείου δημιουργίας στο δίσκο 68

70 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Τέλος για την δημιουργία ιστοσελίδας της άσκησης του σταυρόλεξου πηγαίνουμε από το μενού Αρχείο > Δημιουργία σελίδας Web > Σελίδα Web για v6 browsers, πρώτα μας ζητάει να την αποθηκεύσουμε, εικόνα Εικόνα 3.47 Αποθήκευση άσκησης ως html αρχείο Έστω ότι το ονομάζουμε εικόνας psd.htm, μας εμφανίζεται το παράθυρο της 69

71 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.48 Δυνατότητα προεπισκόπησης της άσκησης Για να δούμε πως θα είναι η άσκηση μας πατάμε Προεπισκόπηση άσκησης στο πρόγραμμα πλοήγησης. Επομένως η άσκησή μας είναι όπως φαίνεται στην εικόνα

72 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.49 Εμφάνιση άσκησης σε μορφή ιστοσελίδας Μπορούμε να εκτυπώσουμε το σταυρόλεξο επιλέγοντας από το μενού Αρχείο > Εξαγωγή για εκτύπωση, εικόνα

73 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.50 Δυνατότητα εξαγωγής για εκτύπωση 3.4 `Εισαγωγή στο JMix (Ασκήσεις ανακατεμένων αντικειμένων) Με το JMix δημιουργούμε ασκήσεις με ανακατεμένα αντικείμενα και καλείται ο χρήστης να τα βάλει στη σειρά σύμφωνα με τις οδηγίες που του δίνουμε για να είναι σωστή η απάντηση του. Από την αρχική οθόνη του hot potatoes επιλέγουμε το πρόγραμμα JMix. Η βασική οθόνη του προγράμματος είναι όπως φαίνεται στην εικόνα

74 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.51 Αρχική οθόνη JMix Θα πρέπει να εισάγουμε τα στοιχεία της άσκησης. Στην θέση του τίτλου γράφουμε τον τίτλο της άσκησης, στο παράδειγμα μας «Χρηματιστήριο». Στο λευκό περιθώριο, αριστερά κάτω από τον τίτλο, γράφουμε την Βασική πρόταση. Γράφουμε με τη σειρά μια μια σε κάθετη στήλη τις προτάσεις ή άλλα αντικείμενα (π.χ. εικόνες ), όπως θέλουμε να εμφανίζονται στη σωστή τους σειρά. Στη θέση Εναλλακτικές προτάσεις μπορούμε να γράψουμε πως αλλιώς θα θέλαμε να εμφανίζονται τα αντικείμενα ώστε να θεωρείται σωστή η σειρά τους αν το επιλέξει ο χρήστης. Η εικόνα του JMix αν συμπληρώσουμε τα κενά αυτά στο παράδειγμά μας θα είναι όπως φαίνεται στην εικόνα

75 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.52 Παράδειγμα συμπλήρωσης άσκησης JMix Το δεύτερο στάδιο είναι η διαμόρφωση επιλογών. Για να κάνουμε τις διαμορφώσεις που θέλουμε στην άσκηση μας πηγαίνουμε από την γραμμή μενού Επιλογές > Διαμόρφωση επιλογών > Αρχείο ρυθμίσεων. Στην καρτέλα Τίτλοι/ Οδηγίες γράφουμε την διαδικασία που πρέπει να κάνει ο χρήστης ώστε να δώσει την απάντησή του, εικόνα

76 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.53 Διαμόρφωση καρτέλας Τίτλοι / οδηγίες Στην καρτέλα Ανατροφοδότηση γράφουμε τα μηνύματα που θέλουμε να εμφανίζονται στον χρήστη. Για να μας εμφανίζει τις εναλλακτικές σωστές απαντήσεις, όταν απαντάμε σωστά, θα πρέπει να τσεκάρουμε το κουτάκι «Δείξε άλλες σωστές απαντήσεις», εικόνα

77 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.54 Διαμόρφωση καρτέλας Ανατροφοδότηση Στην καρτέλα Κουμπιά διαμορφώνουμε τι θα γράφει πάνω σε κάθε κουμπί ώστε ο χρήστης να καταλαβαίνει τι κάνει το αντίστοιχο κουμπί αλλά και ποια κουμπιά θέλουμε να εμφανίζονται στην άσκηση μας. Οι διαμορφώσεις που κάναμε στο παράδειγμά μας είναι όπως φαίνονται στην εικόνα

78 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.55 Διαμόρφωση καρτέλας Κουμπιά Στην καρτέλα Εμφάνιση επιλέγουμε τα χρώματα που θέλουμε να βάλουμε στην άσκηση μας. Επίσης μπορούμε να βάλουμε για φόντο στην άσκησή μας γραφικό από το αρχείο μας αρκεί να πληκτρολογήσουμε στο κατάλληλο κουτί την URL διεύθυνση του γραφικού, πως φαίνεται και στην εικόνα

79 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.56 Διαμόρφωση καρτέλας Εμφάνιση Στην καρτέλα Χρονόμετρο βάζουμε αν θέλουμε κάποιο χρονικό όριο για την διεκπεραίωση της άσκησης. Η καρτέλα Διάφορα δεν έχει κάτι που πρέπει να δούμε. Στην συνέχεια αφού έχουμε αποθηκεύσει στο αρχείο ρυθμίσεων τις επιλογές που κάναμε στην άσκηση μας πατώντας το κουμπί «OK» αποθηκεύουμε το αρχείο δημιουργίας. Πηγαίνουμε Αρχείο > Αποθήκευση μας εμφανίζεται το παράθυρο της εικόνας

80 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.57 Αποθήκευση αρχείου δημιουργίας στον δίσκο Αποθηκεύουμε την άσκηση μας στον φάκελο hot potatoes με όνομα xrimat.jmx. Στην τρίτη φάση πρέπει να δημιουργήσουμε την σελίδα Web της άσκησης. Πηγαίνουμε Αρχείο > Δημιουργία σελίδας Web, έχουμε δυνατότητα να δημιουργήσουμε την άσκηση μας με δύο τρόπους δημιουργία απλή και δημιουργία άσκησης σύρε και άσε, εικόνα Εικόνα 3.58 Δυνατότητα δημιουργίας άσκησης σε σελίδα Web 79

81 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Πατώντας Σελίδα web για v6 browsers μας εμφανίζεται το παράθυρο της εικόνας Εικόνα 3.59 Αποθήκευση άσκησης ως html αρχείο Μας ζητάει να αποθηκεύσουμε το αρχείο html, στο παράδειγμά μας το αποθηκεύουμε στον φάκελο hot potatoes με όνομα xrimat.htm. Με την αποθήκευση του αρχείου μας δίνεται η δυνατότητα προεπισκόπησης της άσκησης μας, εικόνα Εικόνα 3.60 Δυνατότητα προεπισκόπησης της άσκησης 80

82 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Αν πατήσουμε Προεπισκόπηση άσκησης στο πρόγραμμα πλοήγησης θα μας εμφανιστεί η άσκηση μας πως θα είναι στο Web, εικόνα Εικόνα 3.61 Εμφάνιση άσκησης σε μορφή ιστοσελίδας Με τον δεύτερο τρόπο αν πατήσουμε Σύρε/ κι άσε σελίδα Web για v6 browsers, την αποθηκεύουμε xrimat1.htm, η άσκησή μας θα είναι όπως φαίνεται στην εικόνα

83 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.62 Εμφάνιση άσκησης σε μορφή ιστοσελίδας με σύρε κι άφησε 82

84 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής 3.5 Εισαγωγή στο JMatch (Ασκήσεις αντιστοίχισης ή ταιριάσματος) Με το πρόγραμμα J Match του Hot Potatoes δημιουργούμε ασκήσεις αντιστοίχισης. Αυτό σημαίνει ότι κατά την εμφάνιση της άσκησης σε κάθε αντικείμενο που βρίσκεται στην αριστερή πλευρά αντιστοιχεί ένα αντικείμενο της δεξιάς πλευράς 24. Από την αρχική οθόνη του Hot Potatoes επιλέγουμε το JMatch. Η αρχική οθόνη του JMatch είναι όπως φαίνεται στην εικόνα Εικόνα 3.63 Αρχική οθόνη του JMatch Το πρώτο βήμα είναι να συμπληρώσουμε τα στοιχεία της άσκησης. Στο πλαίσιο Τίτλος γράφουμε τον τίτλο της άσκησης, στο παράδειγμα μας 24 (Τι είναι το JMatch ) 83

85 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes «Οικονομική». Στα αριστερά πλαίσια, τα σταθερά αντικείμενα της άσκησης, γράφουμε κάποιο κείμενο ή βάζουμε εικόνες. Στα δεξιά πλαίσια γράφουμε τις απαντήσεις που αντιστοιχούν στα αριστερά αντικείμενα. Οι απαντήσεις θα εμφανίζονται ανακατεμένα στην άσκηση και ο χρήστης θα πρέπει να τα αντιστοιχίσει με τα σωστά αντικείμενα. Για να συμπληρώσουμε αυτά τα πλαίσια, στο παράδειγμα μας, στα αριστερά πλαίσια βάζουμε κάποια σχεδιαγράμματα που έχουμε δημιουργήσει και τα αποθηκεύσαμε στον φάκελο hot potatoes. Για την εισαγωγή αυτών των εικόνων πηγαίνουμε από το μενού Εισαγωγή > Εικόνα > Εικόνα από τον τοπικό δίσκο, εικόνα Εικόνα 3.64 Εισαγωγή εικόνας στην άσκηση Αυτόματα μας εμφανίζεται η οθόνη για να κάνουμε κάποιες ρυθμίσεις στην εικόνα πριν την εισαγωγή της, εικόνα

86 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.65 Ρυθμίσεις εικόνας Η οθόνη του JMatch αν συμπληρώσουμε τα κενά αυτά στο παράδειγμά μας θα είναι όπως φαίνεται στην εικόνα

87 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.66 Παράδειγμα συμπλήρωση άσκησης Τώρα θα πρέπει στο αρχείο ρυθμίσεων να κάνουμε τις αλλαγές που θέλουμε στην άσκηση μας. Πηγαίνουμε από την γραμμή μενού Επιλογές > Διαμόρφωση επιλογών. Στην καρτέλα Τίτλοι/ οδηγίες γράφουμε τον υπότιτλο της άσκησης και οδηγίες που πρέπει να ακολουθήσει ο χρήστης ώστε να καταλάβει τι πρέπει να κάνει ώστε να απαντήσει σωστά, στο παράδειγμά μας κάναμε τις αλλαγές όπως φαίνονται στην εικόνα

88 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.67 Διαμόρφωση της καρτέλας Τίτλοι / οδηγίες Διαμορφώνουμε την καρτέλα Ανατροφοδότηση ώστε ο χρήστης να λαμβάνει αν είναι σωστή ή λάθος η απάντηση, αλλά και άλλα μηνύματα. Έτσι στο παράδειγμά μας η καρτέλα είναι όπως φαίνεται στην εικόνα

89 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.68 Διαμόρφωση της καρτέλας Ανατροφοδότηση Στην καρτέλα Κουμπιά επιλέγουμε τα κουμπιά που θα εισάγουμε στην άσκηση και τι θα εμφανίζεται πάνω σ αυτά ώστε ο χρήστης να καταλάβει τι κάνει το αντίστοιχο κουμπί, εικόνα Εικόνα 3.69 (Διαμόρφωση της καρτέλας Κουμπιά ) 88

90 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Στην καρτέλα Εμφάνιση ρυθμίζουμε τα χρώματα που θέλουμε να εμφανίζεται η άσκηση μας, οι επιλογές που κάνουμε στην άσκηση μας είναι όπως φαίνονται στην εικόνα Εικόνα 3.70 Διαμόρφωση της καρτέλας Εμφάνιση Στην καρτέλα Χρονόμετρο επιλέγουμε αν θέλουμε να εισάγουμε ένα χρονικό όριο για να δώσει την απάντηση του ο χρήστης και το κατάλληλο μήνυμα που θα εμφανίζεται, στο παράδειγμά μας εισάγουμε το χρονόμετρο, εικόνα

91 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.71 Διαμόρφωση της καρτέλας Χρονόμετρο Στην καρτέλα Διάφορα μπορούμε να ρυθμίσουμε πόσες ερωτήσεις θα εμφανίζονται κάθε φορά στην σελίδα αλλά και αν θέλουμε να ανακατεύεται η σειρά των ερωτήσεων, εικόνα Εικόνα 3.72 Διαμόρφωση της καρτέλας Διάφορα 90

92 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Για να αποθηκευτούν οι αλλαγές που κάναμε στην άσκηση μας θα πρέπει να πατήσουμε το κουμπί «OK». Στην συνέχεια θα πρέπει να αποθηκεύσουμε το αρχείο δημιουργίας. Πηγαίνουμε από το μενού Αρχείο > Αποθήκευση, την αποθηκεύουμε στον φάκελο hot potatoes με όνομα oikonomiki.jmt, εικόνα Εικόνα 3.73 Αποθήκευση του αρχείου δημιουργίας Το τρίτο βήμα είναι η δημιουργία ιστοσελίδας της άσκησης. Πηγαίνουμε Αρχείο > Δημιουργία σελίδας Web, έχουμε την δυνατότητα να δημιουργήσουμε τη άσκηση μας με δύο τρόπους είτε με κυλιόμενη λίστα είτε με τη μέθοδο σύρε και άσε, εικόνα

93 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.74 Δυνατότητα δημιουργία άσκησης σε ιστοσελίδα Έστω ότι πρώτα επιλέγουμε με την κυλιόμενη λίστα «Σελίδα Web για v6 browsers», πριν τη δημιουργία μας ζητάει να αποθηκεύσουμε την άσκηση μας σαν ιστοσελίδα, εικόνα Εικόνα 3.75 Αποθήκευση html αρχείου 92

94 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Στην συνέχεια αφού την αποθηκεύσουμε μας δίνεται η δυνατότητα να κάνουμε προεπισκόπηση για να δούμε πως θα εμφανίζεται η ιστοσελίδα μας, εικόνα Εικόνα 3.76 Δυνατότητα προεπισκόπησης της άσκησης Αν επιλέξουμε Προεπισκόπηση άσκησης στο πρόγραμμα πλοήγησης θα μας εμφανιστεί η εικόνα

95 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 3.77 Εμφάνιση άσκησης σε μορφή ιστοσελίδας Σ αυτήν την περίπτωση εμφανίζεται κυλιόμενη λίστα αντικείμενων δεξιά του κάθε αντικείμενου της άσκησης και θα πρέπει να επιλέξει ο χρήστης το σωστό αντικείμενο που ταιριάζει με αυτό στ αριστερά. Ο τύπος αυτός χρησιμοποιείται συνήθως, όταν τα αντικείμενα αριστερά είναι περισσότερα από οκτώ και τα αντικείμενα στα δεξιά είναι σε μορφή κειμένου 25. Αν επιλέγαμε τον δεύτερο τύπο, σύρε και άσε. Αποθηκεύουμε την άσκηση με όνομα διαφορετικό αυτήν την φορά oikonomiki1.jmt στον φάκελο hot potatoes. Η άσκησή μας θα είναι όπως φαίνεται στην εικόνα (Τι είναι το JMatch ) 94

96 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 3.78 Εμφάνιση άσκησης σε μορφή ιστοσελίδας, σύρε κι άφησε Αυτός ο τύπος χρησιμοποιείται, όταν τα αντικείμενα αριστερά είναι συνήθως λιγότερα από οκτώ και ειδικά αν είναι γραφικά 26. Εδώ ο χρήστης αντιστοιχεί τα δεξιά σωστά αντικείμενα που είναι ανακατεμένα, με τα αριστερά σταθερά. Επιλέγει τα δεξιά και σέρνοντας το ποντίκι τα βάζει στην σωστή απάντηση. 26 Βοήθεια από το πρόγραμμα Hot Potatoes Help on specific programs - JMatch JMatch output 95

97 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Κεφάλαιο 4 o Εισαγωγή στο The Masher Το εργαλείο The Masher του Hot Potatoes είναι κάτι διαφορετικό από τα προγράμματα του που μπορούμε να δημιουργήσουμε ασκήσεις, στο Masher δεν δημιουργούμε ασκήσεις. Το Masher μας βοηθάει να διαχειριστούμε εύκολα και γρήγορα τις ασκήσεις που δημιουργήσαμε με τα προγράμματα του Hot Potatoes. Ο σκοπός του είναι να δημιουργήσουμε μια ομάδα ασκήσεων από όλα τα προγράμματα του Hot Potatoes ανεξάρτητα αν είναι διαφορετικές οι ασκήσεις 27. Ας δούμε ένα παράδειγμα δημιουργώντας μια λίστα με τις ασκήσεις που φτιάξαμε παραπάνω για να καταλάβουμε τι ακριβώς κάνει και πως λειτουργεί αυτό το εργαλείο. Από την αρχική οθόνη του Hot Potatoes επιλέγουμε το The Masher, η αρχική οθόνη του The Masher είναι όπως φαίνεται στην εικόνα Βοήθεια από το πρόγραμμα Hot Potatoes Introduction to the Masher 96

98 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 4.1 Αρχική οθόνη The Masher Παρατηρούμε ότι η οθόνη του Masher είναι τελείως διαφορετική από τις αρχικές οθόνες των προγραμμάτων που δημιουργούμε ασκήσεις. Στο λευκό πλαίσιο δεν μπορούμε να γράψουμε με το πληκτρολόγιο, θα πρέπει να εισάγουμε κάποιο αρχείο που έχουμε δημιουργήσει βέβαια πρώτα. Η εισαγωγή των αρχείων γίνεται με το πάτημα του κουμπιού «Προσθήκη αρχείου» που βρίσκεται αριστερά κάτω από το πλαίσιο, εικόνα 4.2. Εικόνα 4.2 Εισαγωγή αρχείου Για να διαγράψουμε κάποιο αρχείο πατάμε το κουμπί «Διαγραφή αρχείου» αφού πρώτα το επιλέξουμε, που βρίσκεται δεξιά κάτω από το πλαίσιο, εικόνα 4.3. Εικόνα 4.3 Διαγραφή αρχείου 97

99 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Αν πατήσουμε το κουμπί «Προσθήκη αρχείου» μας εμφανίζεται αυτόματα το παράθυρο της εικόνας 4.4. Εικόνα 4.4 Αρχεία που μπορούμε να εισάγουμε Παρατηρούμε ότι εμφανίζονται όλα τα αρχεία που έχουμε δημιουργήσει με το Hot Potatoes. Επειδή τα αποθηκεύσαμε σε ένα φάκελο, hot potatoes, μας εμφανίζονται όλα σε περίπτωση που τα αποθηκεύσουμε σε διαφορετικούς μπορούμε και πάλι να τα βάλουμε σε μια λίστα. Έστω ότι επιλέγουμε το αρχείο anporoi και πατάμε «Άνοιγμα», μας εμφανίζεται το παράθυρο της εικόνας

100 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 4.5 Ρυθμίσεις αρχείου και σύνδεση με επόμενη Βλέπουμε ότι το πρόγραμμα αυτόματα εισάγει το αρχείο του Hot Potatoes που επιλέξαμε και το όνομα του εξαγόμενου αρχείου, εμείς καθορίζουμε το όνομα της επόμενης άσκησης γράφοντας το όνομα του αρχείου, έστω ότι σαν επόμενη άσκηση θέλουμε το αρχείο epikoinonia.jcl. Μπορούμε επίσης να επιλέξουμε την Διαμόρφωση εξαγωγής, δηλαδή αν είναι η κανονική ή ο τύπος σύρε και άσε. Σε αυτό το παράδειγμα δεν έχουμε την δυνατότητα να αλλάξουμε την εξαγωγή της άσκησης γιατί δεν υπάρχει άλλη επιλογή σε αυτό το πρόγραμμα σχεδίασης ασκήσεων. Αν έχουμε τελειώσει πατάμε το κουμπί «OK». Αυτόματα εισάγεται το αρχείο, η οθόνη του The Masher γίνεται όπως την εικόνα

101 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.6 Αρχείο που εισήχθη στο The Masher Για να προσθέσουμε και να συνδέσουμε τις ασκήσεις ακολουθούμε την ίδια διαδικασία. Πατάμε το κουμπί «Προσθήκη αρχείου», εμφανίζεται στην οθόνη το παράθυρο της εικόνας 4.7. Εικόνα 4.7 Αρχεία που μπορούμε να εισάγουμε 100

102 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Για να υπάρχει σύνδεση των ασκήσεων επιλέγουμε την άσκηση που επιλέξαμε προηγουμένως ως επόμενη άσκηση, συνεπώς επιλέγουμε το αρχείο epikoinonia και πατάμε το κουμπί άνοιγμα. Το παράθυρο που εμφανίζεται είναι της εικόνας 4.8. Εικόνα 4.8 Ρυθμίσεις του αρχείου και σύνδεση με επόμενη άσκηση Επόμενη άσκηση της επικοινωνίας γράφουμε το αρχείο xrimat.jmx. Δεν έχουμε δυνατότητα αλλαγής της διαμόρφωσης εξαγωγής της άσκησης, τέλος πατάμε το κουμπί «OK». Η οθόνη του Masher γίνεται όπως φαίνεται στην εικόνα 4.9, βλέπουμε ότι εισήχθη το αρχείο. 101

103 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.9 Εμφάνιση των αρχείων που εισήχθησαν στο The Masher Ας δούμε ακόμη μία σύνδεση αρχείων, πατάμε το κουμπί «Προσθήκη αρχείου», μας εμφανίζεται η οθόνη της εικόνας Εικόνα 4.10 Αρχεία που μπορούμε να εισάγουμε 102

104 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Επιλέγουμε το αρχείο xrimat γιατί προηγουμένως το επιλέξαμε ως επόμενη άσκηση και πατάμε «Άνοιγμα», αυτόματα η οθόνη που μας εμφανίζεται είναι της εικόνας Εικόνα 4.11 Ρυθμίσεις αρχείου και σύνδεση επόμενης άσκησης Πρέπει να συμπληρώσουμε το όνομα του αρχείου της επόμενης άσκησης, πληκτρολογούμε psd.jcw. Στο αρχείο xrimat.jcl μπορούμε να διαμορφώσουμε την εξαγωγή του αρχείου, στο παράδειγμα μας επιλέγουμε Drag/Drog. Αν έχουμε συμπληρώσει τα στοιχεία αυτά πατάμε το κουμπί «OK». Η οθόνη του Masher γίνεται όπως στην εικόνα

105 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.12 Εμφάνιση των αρχείων που εισήχθησαν στο The Masher Τα ίδια βήματα ακολουθούμε για όσα αρχεία θέλουμε να συνδέσουμε στην λίστα μας. Η οθόνη του Masher αφού εισάγουμε όλες τις ασκήσεις που δημιουργήσαμε γίνεται όπως φαίνεται στην εικόνα

106 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 4.13 Όλα τα αρχεία που εισήχθησαν στο The Masher Στην συνέχεια θα πρέπει να κάνουμε κάποιες ρυθμίσεις στην ομάδα των ασκήσεων μας, όπως για παράδειγμα διαμορφώνουμε τις επιλογές μας σε κάθε άσκηση μας σε όλα τα προγράμματα από το αρχείο ρυθμίσεων. Στο The Masher θα ρυθμίσουμε μια φορά για όλη την λίστα των ασκήσεων που συμπεριλάβαμε στο αρχείο αυτό. Για να εισάγουμε τα αρχεία και να τα συνδέσουμε ήμασταν στην καρτέλα Αρχεία. Για να ρυθμίσουμε την εμφάνιση της λίστας των ασκήσεων πηγαίνουμε στην καρτέλα Εμφάνιση. Εδώ επιλέγουμε τα χρώματα που θα έχει η ιστοσελίδα μας. Η οθόνη της καρτέλας Εμφάνιση με τις επιλογές που κάναμε στο παράδειγμα μας είναι όπως φαίνεται στην εικόνα

107 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.14 Διαμόρφωση της καρτέλας Εμφάνιση Η οθόνη της καρτέλας μοιάζει με την καρτέλα Εμφάνιση των προγραμμάτων του Hot Potatoes για δημιουργία ασκήσεων. Στην καρτέλα μπορούμε να επιλέξουμε αν θέλουμε να εμφανίζονται όλα τα αρχεία με την επιλογή των χρωμάτων που κάναμε σε αυτήν τη καρτέλα ή αν θέλουμε να παραμείνουν οι επιλογές των χρωμάτων που κάναμε σε κάθε αρχείο. Αυτό επιτυγχάνεται με το να τσεκάρουμε την αντίστοιχη επιλογή που θέλουμε. Στο παράδειγμα μας τσεκάρουμε «Χρήση των ρυθμίσεων που ορίστηκαν παρακάτω για όλα τα αρχεία». μπορούμε επίσης να εισάγουμε και κάποιο γραφικό ως φόντο, απλά πληκτρολογώντας την URL διεύθυνση του γραφικού στο αντίστοιχο πλαίσιο. Η οθόνη της επόμενης καρτέλας Διαδρομές χρήστη είναι όπως φαίνεται στην εικόνα

108 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 4.15 Διαμόρφωση καρτέλας Διαδρομές χρήστη Στην επόμενη καρτέλα Κουμπιά ρυθμίζουμε ποια κουμπιά θέλουμε να εμφανίζονται στην σελίδα μας αλλά και τι θα αναγράφεται πάνω σ αυτά ώστε ο χρήστης να καταλάβει τι κάνει το αντίστοιχο κουμπί, η οθόνη αυτής της καρτέλας, εικόνα

109 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.16 Διαμόρφωση της καρτέλας Κουμπιά Στην καρτέλα Πηγαίος κώδικας μπορούμε να προσαρμόσουμε την αρχική σελίδα, δηλαδή την σελίδα περιεχομένων, εικόνα

110 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 4.17 Πηγαίος κώδικας άσκησης Τέλος, η καρτέλα Αρχική σελίδα που ρυθμίζουμε το τίτλο που θα έχει η λίστα των ασκήσεων μας στην αρχική σελίδα, αλλά και το όνομα με το οποίο αποθηκεύουμε το αρχείο, στο παράδειγμά μας το ονομάζουμε index.htm, εικόνα

111 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.18 Καρτέλα Αρχική σελίδα, δίνουμε τον τίτλο που θέλουμε να εμφανίζεται στην αρχή της άσκησης Αν έχουμε τελειώσει με την δημιουργία της σελίδας μας μπορούμε να δούμε πως θα είναι πατώντας το κουμπί κάτω στο κέντρο της οθόνης του Masher «Κατασκευή ενότητας» και μετά «yes». Η σελίδα μας θα είναι όπως φαίνεται στην εικόνα

112 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 4.19 Εμφάνιση της άσκησης The Masher σε μορφή ιστοσελίδας Το εργαλείο The Masher μας δίνει την δυνατότητα αυτόματα να ομαδοποιήσουμε (batch) λίστες που έχουμε δημιουργήσει με το Masher ώστε οι τοποθετήσεις των χρωμάτων, των κουμπιών να είναι ίδιες στην εμφάνιση τους 28. Αυτό γίνεται αυτόματα από το Masher, πηγαίνουμε από το μενού Ενέργειες > Προσαρμογή επεξεργασία, εικόνα Βοήθεια από Masher παρ. What is The Masher 111

113 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Εικόνα 4.20 Ομαδοποίηση λιστών Μας εμφανίζεται το παράθυρο της εικόνας Εικόνα 4.21 Οθόνη εισαγωγής αρχείων και ρυθμίσεις Για να εισάγουμε αρχεία πατάμε το κουμπί «Προσθήκη αρχείων». Αν έχουμε εισάγει τα αρχεία Masher που θέλουμε να τα επεξεργαστούμε μαζί, 112

114 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής επιλέγουμε τσεκάροντας τα κουτάκια αυτά που θέλουμε να γίνουν στην άσκηση μας. Αυτό το αρχείο αποθηκεύεται με επέκταση.jbs. Ακόμη μία δυνατότητα που μας προσφέρει το πρόγραμμα Hot Potatoes είναι να ανεβάσουμε αρχεία π.χ. κειμένου Word εύκολα 29. Πηγαίνουμε από το μενού Hotpotatoes.net > Ανέβασμα αρχείου στο Hotpotatoes.net, εικόνα Εικόνα 4.22 Ανέβασμα αρχείων στο hotpotatoes.net Αυτόματα μας εμφανίζεται η εικόνα Εικόνα 4.23 Οθόνη εισαγωγής αρχείων Πρέπει να σημειώσουμε ότι η υπηρεσία hotpotatoes.net δεν είναι ελεύθερη Βοήθεια από το εργαλείο The Masher παρ. Uploading files to hotpotatoes.net 30 Uploading files to hotpotatoes.net, από βοήθεια προγράμματος 113

115 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Μέρος 2 0 : Σχεδίαση ιστοχώρου 114

116 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής ΕΙΣΑΓΩΓΗ Η βασική γλώσσα προγραμματισμού με την οποία μπορεί να γίνει η παρουσίαση στον παγκόσμιο ιστό είναι η HTML (Hyper Text Markup Language). Η HTML είναι μια περιγραφική γλώσσα η οποία επιτρέπει να δομήσουμε και να εμφανίσουμε διάφορα αντικείμενα στην οθόνη. Αυτά τα αντικείμενα μπορεί να είναι κείμενο, πίνακες, εικόνες και ήχος. Ο πηγαίος κώδικας μιας σελίδας αποτελείται από μια σειρά ειδικών κωδικών (tags),που λέγονται και ετικέτες, τοποθετημένων μέσα στο κείμενο και οι οποίες επιτρέπουν να το μορφοποιήσουμε, ακόμη και να προσθέσουμε συνδέσεις προς άλλες σελίδες. Μπορούμε να κατασκευάσουμε σελίδες, είτε με ένα απλό διορθωτή κειμένου (text editor), είτε με κάποιο βοηθητικό εργαλείο ανάπτυξης που συνήθως είναι σε γραφικό περιβάλλον. Ένα τέτοιο εργαλείο είναι και το Dreamweaver το οποίο χρησιμοποιήσαμε για την σχεδίαση του ιστοχώρου μας. Το Dreamweaver είναι ένα εργαλείο της Macromedia και βοηθάει στην κατασκευή της ιστοσελίδας. Επίσης με αυτό το εργαλείο μπορούμε να εισάγουμε flash αντικείμενα στην σελίδα μας εύκολα και γρήγορα. Μέσα στα αρχεία της HTML, δηλαδή στον πηγαίο κώδικα, μπορούμε να εισάγουμε και άλλες γλώσσες όπως η Java Script, η PHP και πολλές άλλες περιγραφικές γλώσσες. Για την δημιουργία δυναμικών σελίδων χρησιμοποιήθηκε η PHP στον ιστοχώρο μας. Η PHP μπορεί να συνυπάρχει αρμονικά με την HTML, αν και κάνει μια σαφή διάκριση μεταξύ των τμημάτων του κώδικα PHP και των τμημάτων της HTML. Ακόμη με την PHP έχουμε την δυνατότητα να συνδεθούμε σε έναν οποιοδήποτε MySQL Server στον οποίο έχουμε λογαριασμό και να διαχειριστούμε δεδομένα που υπάρχουν μέσα στη βάση. Παρακάτω θα αναλύσουμε τα χαρακτηριστικά της κάθε γλώσσας που χρησιμοποιήθηκε για την κατασκευή του ιστοχώρου αλλά και τον τρόπο λειτουργία τους. 115

117 Μέρος ΙI : Σχεδίαση Ιστοχώρου Κεφάλαιο 1 o PHP MySQL Όπως αναφέραμε παραπάνω δύο είναι τα βασικά εργαλεία που χρησιμοποιήσαμε για την υλοποίηση του ιστοχώρου. Χρειαζόμασταν μια γλώσσα προγραμματισμού που να είναι ικανή για διαδικτυακές εφαρμογές και να μπορεί να λειτουργεί σε συνεργασία με κάποιο DBMS. Επιλέξαμε την PHP ως ένα ικανό εργαλείο, πολύ δημοφιλές και πολύ δυνατό. Για το DBMS επιλέξαμε την MySQL επειδή είναι γρήγορη, δεν έχει πολλές απαιτήσεις, καθώς κι επειδή συνεργάζεται πολύ καλά με την PHP. Είναι ένα επίσης πολύ ικανό και δημοφιλές εργαλείο. Η δημιουργία της βάσης δεδομένων πραγματοποιήθηκε στο πρόγραμμα της MySQL, με διαχείριση phpmyadmin το οποίο παρέχει στο χρήστη ένα εύχρηστο και φιλικό περιβάλλον. Αντικαθιστά δηλαδή, όλες εκείνες τις γραμμές κώδικα που θα απαιτούνταν για τη δημιουργία των πινάκων, εάν η βάση είχε δημιουργηθεί με εντολές MySQL σε κάποιο text editor. 1.1 PHP Η PHP, της οποίας τα αρχικά αντιπροσωπεύουν το PHP: Hypertext Preprocessor είναι μια ευρέως χρησιμοποιούμενη, ανοιχτού κώδικα και γενικού σκοπού scripting γλώσσα προγραμματισμού, η οποία είναι κατάλληλη για ανάπτυξη εφαρμογών για το Web. Ο κύριος στόχος της γλώσσας είναι η δημιουργία δυναμικά παραγόμενων σελίδων γρήγορα και εύκολα. Η σύνταξη της PHP παίρνει στοιχεία των C, Java και Perl και είναι εύκολη στην εκμάθηση. Αυτό που διαχωρίζει την PHP από τις άλλες scripting γλώσσες είναι ότι ο κώδικας εκτελείται στον εξυπηρετητή, έτσι ο client θα παίρνει τα 116

118 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής αποτελέσματα της εκτέλεσης αυτού του script χωρίς να καταλάβει τον κώδικα που υπάρχει από κάτω. Η δημοτικότητα της γλώσσας PHP έναντι των υπόλοιπων scripting γλωσσών δικαιολογείται από τα εξής χαρακτηριστικά : Οικειότητα : πολλά στοιχεία της γλώσσας παρουσιάζουν αρκετές ομοιότητες με άλλες γλώσσες προγραμματισμού, όπως η C και η PASCAL, ελαχιστοποιώντας έτσι τη διαδικασία εκμάθησης της. Αποδοτικότητα : ο κώδικας της PHP είναι ελαφρύς, δηλαδή απαιτεί σχετικά μικρή υπολογιστική ισχύ σε σχέση με τις υπόλοιπες server side τεχνολογίες (π.χ. ASP). Ευελιξία στη μεταφορά : η PHP έχει σχεδιαστεί κατάλληλα ώστε να εκτελείται σε διάφορα λειτουργικά συστήματα και να συνεργάζεται με διάφορους εξυπηρετητές Παγκόσμιου Ιστού (π.χ. Apache, Microsoft IIS) και βάσεις δεδομένων (π.χ. MySQL server, SQL server). Ασφάλεια : η PHP παρέχει ένα σύνολο μηχανισμών για την παροχή ασφάλειας τόσο σε επίπεδο εφαρμογής (π.χ. μηχανισμοί κρυπτογράφησης) όσο και σε επίπεδο συστήματος (π.χ. μηχανισμοί ελέγχου πρόσβασης των χρηστών). Χρησιμοποιήθηκε η έκδοση MySQL Οι βάσεις δεδομένων αποτελούν ένα πολύ σημαντικό κεφάλαιο στον προγραμματισμό και τη διαχείριση των πληροφοριών και απαιτούν πολύ μεγάλη προσπάθεια για την κατανόηση και την αξιοποίηση τους. Ειδικά με την τεράστια ανάπτυξη του INTERNET και του ηλεκτρονικού εμπορίου παρουσιάζουν ιδιαίτερο ενδιαφέρον πολλές εφαρμογές. Η MySQL είναι ένα δημοφιλές DBMS για προγραμματιστές εφαρμογών Web. Η ταχύτητά της και το μικρό της μέγεθος την κάνουν ιδανική για μια ιστοσελίδα. Επιπρόσθετα είναι ανοιχτού κώδικα που σημαίνει ότι διανέμεται δωρεάν. Μερικά πλεονεκτήματα αναφέρονται παρακάτω : 117

119 Μέρος ΙI : Σχεδίαση Ιστοχώρου Ταχύτητα. Ο κύριος στόχος που αναπτύχθηκε η MySQL ήταν η επίτευξη υψηλών ταχυτήτων. Χαμηλό κόστος. Η MySQL είναι δωρεάν κάτω από την GPL license. Ευχρηστία. Μπορείτε να δημιουργήσετε και να επικοινωνείτε με μία MySQL database χρησιμοποιώντας απλές προτάσεις σε SQL που είναι standard στην επικοινωνία RDBMS. Συμβατότητα. Η MySQL τρέχει σε μεγάλο εύρος λειτουργικών συστημάτων - Windows, Linux, Mac OS, στις περισσότερες διανομές Unix (Solaris, AIX και DEC Unix, FreBSD, OS/2, Irix και άλλα). Διαθέσιμη τεχνική υποστήριξη. Ένα μεγάλο πλήθος χρηστών παρέχει δωρεάν υποστήριξη μέσω mailing lists. Οι προγραμματιστές και δημιουργοί της MySQL συμμετέχουν στις e- mailing lists. Ασφάλεια. Το ευέλικτο σύστημα αυθεντικοποίησης της MySQL επιτρέπει όλα τα δικαιώματα που αφορούν μία βάση δεδομένων (π.χ. το δικαίωμα να δημιουργείς μία βάση ή να διαγράφεις δεδομένα) σε συγκεκριμένους χρήστες ή σε ομάδα χρηστών. Τα συνθηματικά κρυπτογραφούνται. Υποστηρίζει μεγάλου μεγέθους βάσεις δεδομένων. Η MySQL χειρίζεται βάσεις μέχρι και πενήντα εκατομμύρια γραμμών ή και περισσότερες. Το προκαθορισμένο όριο μεγέθους για έναν πίνακα είναι 4GB, αλλά μπορείτε να αυξηθεί (εάν το υποστηρίζει το λειτουργικό σας σύστημα) μέχρι και οκτώ εκατομμύρια terabytes, δηλαδή οκτώ χιλιάδες pet bytes (θεωρητική προσέγγιση). Χρησιμοποιήθηκε η έκδοση PHP και MySQL Με την βοήθεια της PHP μπορούμε να συνδεθούμε σε έναν οποιοδήποτε MySQL Server στον οποίο έχουμε λογαριασμό, να πάρουμε δεδομένα από πίνακες βάσεων, να ανανεώσουμε κάποια υπάρχοντα δεδομένα, να φτιάξουμε νέες βάσεις και νέους πίνακες και γενικά να κάνουμε οτιδήποτε γίνεται με μία MySQL βάση δεδομένων. Επομένως, μέσα από τις Web σελίδες μας μπορούμε να διαχειριστούμε εύκολα μια βάση δεδομένων και έτσι οι 118

120 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής σελίδες μας να αποκτήσουν πολλές άλλες δυνατότητες που απαιτούν οι σύγχρονες απαιτήσεις των χρηστών δηλαδή να γίνουν δυναμικές, ελκυστικές και ανταγωνιστικές Σύνδεση / αποσύνδεση με την MySQL Με την χρήση της συνάρτησης mysql_connect μπορούμε να συνδεθούμε σε μια βάση της MySQL. Η συνάρτηση αυτή δέχεται τρία ορίσματα: Το όνομα του διακομιστή (server) στον οποίο είναι εγκατεστημένη η MySQL ο οποίος είναι γνωστός με την έκφραση hostname, Το login του χρήστη, που έχει δημιουργηθεί για την πρόσβασή του στη βάση, Το αντίστοιχο password του χρήστη. Η αποσύνδεση από την MySQL γίνεται με την συνάρτηση mysql_close(). 1.4 Dreamweaver Το Dreamweaver είναι ένα εργαλείο της Macromedia, ίσως το πιο περιζήτητο πρόγραμμα που κυκλοφορεί αυτή τη στιγμή στην αγορά, για την ανάπτυξη και το σχεδιασμό δυναμικών ιστοσελίδων. Παρότι η χρήση του είναι ιδιαίτερα περίπλοκη, έχει τη δυνατότητα εισαγωγής κινούμενων γραφικών του Flash. Μπορούμε να γράψουμε HTML και να εισάγουμε κάποια αντικείμενα flash. Επίσης, μας δίνει την δυνατότητα να βλέπουμε την προεπισκόπηση του κώδικα που γράφουμε. Η οθόνη της εφαρμογής Dreamweaver είναι όπως φαίνεται και στην εικόνα

121 Μέρος ΙI : Σχεδίαση Ιστοχώρου Εικόνα 1.1. Οθόνη της εφαρμογής Dreamweaver 1.5 Δημιουργία Βάσης Δεδομένων Η δημιουργία βάσης κρίθηκε απαραίτητη για την είσοδο στον ιστοχώρο. Γίνεται έλεγχος πρόσβασης των χρηστών, δηλαδή ζητάει το «Όνομα χρήστη» και τον «Κωδικό Πρόσβασης», τα οποία είναι αποθηκευμένα στη βάση μαζί με άλλα στοιχεία του χρήστη. Έπειτα γίνεται έλεγχος αν είναι αληθή, εάν ναι επιτρέπεται η είσοδος στον χρήστη, διαφορετικά απαγορεύει την είσοδο του. Η δημιουργία της βάσης έγινε με διαχείριση της phpmyadmin η οποία αντικαθιστά όλες εκείνες τις SQL εντολές που θα έπρεπε να πληκτρολογήσουμε σε ένα text editor για την δημιουργία πινάκων, αλλά και εγγραφών. Η βάση μας ονομάζεται entry και δημιουργήσαμε έναν πίνακα student στον οποίο είναι καταχωρημένα τα στοιχεία των φοιτητών. Η βασική οθόνη της phpmyadmin είναι όπως φαίνεται στην εικόνα

122 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 1.2. Οθόνη της διαχείρισης phpmyadmin Τα πεδία του πίνακα student και οι τύποι, είναι όπως φαίνονται στον παρακάτω πίνακα (πίνακας 1.1). Πεδία Στοιχεία Τύπος Μέγεθος Πρωτεύον πεδίου πεδίου κλειδί Κενά πεδία fname Όνομα varchar 20 όχι lname Επίθετο varchar 25 όχι aem ΑΕΜ int 4 ναι όχι semester Εξάμηνο varchar 4 όχι uname Όνομα χρήστη varchar 7 όχι pass Κωδικός πρόσβασης int 5 ναι όχι Πίνακας 1.1 Πεδία πίνακα student 121

123 Μέρος ΙI : Σχεδίαση Ιστοχώρου 1.2: Οι εγγραφές για τον πίνακα student είναι όπως φαίνονται στον πίνακα fname lname aem semester uname pass ΒΑΣΙΛΙΚΗ ΝΙΚΟΛΑΙΔΟΥ 973 Η vanikol Πίνακας 1.2 Εγγραφή στον πίνακα student Στο επόμενο κεφάλαιο θα δούμε τον σχεδιασμό του ιστοχώρου χρησιμοποιώντας αυτές τις γλώσσες προγραμματισμού, τον βασικό κώδικα αναλυτικά, αλλά και την σύνδεση στην βάση που δημιουργήσαμε παραπάνω. 122

124 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Κεφάλαιο 2 o Σχεδίαση Ιστοχώρου Το κεφάλαιο αυτό εστιάζει τόσο στον σχεδιασμό του ιστοχώρου, όσο και στον κώδικα για τον έλεγχο πρόσβασης των χρηστών με την βάση που έχουμε δημιουργήσει και την παρουσίαση των σελίδων. 2.1 Έλεγχος πρόσβασης χρήστη Στην αρχική σελίδα του ιστοχώρου έχουμε δημιουργήσει, με την PHP και την MySQL, τον έλεγχο πρόσβασης των χρηστών. Ο κώδικας της αρχικής σελίδας (index.php) είναι όπως φαίνεται παρακάτω. index.php 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2: " 3: <html xmlns=" 4: <link href="mailto:vaso_mavrouda@yahoo.gr" rev="made" /> 5: <meta http-equiv="expires" content="30 Ιανουαρίου 2008" /> 6: <meta name="last Modified" content="1 Οκτωβρίου 2007" /> 7: <meta http-equiv="content-type" content="text/html; charset=iso " /> 8: <title>διαχείριση Πληροφοριών - Ηλεκτρονικό Ερωτηματολόγιο</title> 9: </head> 10: <? php 11: $lathos_login=false; 12: if ($_POST['Submit']) { 13: include ('generic.inc'); 14: $query="select * from student where uname='$_post[username]' and pass='$_post[password]'"; 15: mysql_connect($host,$user) or die (mysql_error()); 16: mysql_select_db($dbname) or die (mysql_error()); 17: $result=mysql_query($query) or die (mysql_error()); 123

125 Μέρος ΙI : Σχεδίαση Ιστοχώρου 18: $num_rows=mysql_num_rows($result); 19: if ($num_rows==1) { 20: $fp=fopen("count.txt","r") or die ("Δεν μπορεί να γράψει στο count.txt"); 21: $number=fread($fp,10); 22: fclose($fp); 23: $to_number=(int)$number+1; 24: $fp=fopen("count.txt","w") or die ("Δεν μπορεί να διαβάσει το count.txt"); 25: fwrite($fp,$to_number); 26: fclose($fp); 27: print "<script>self.location=\"home.php?logon_user=$_post[username]\"</script>"; 28: $lathos_login=nok; 29: } else { 30: $lathos_login="ok"; 31: } 32: } 33:?> 34: <body bgcolor="#3399ff"> 35: <table width="100%" height ="498" border="0"><tr> 36: <td width="50%" height="144" align="center"> 37: <ahref=" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('τει','','kavala.jpg',1)"><img name="τει" border="0" src="teikav.gif" width="142" height="86"></a> 38: <td width="50%" height="144" align="center"> 39: <ahref= onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage ('infom','','teifoto.jpg',1)"><img name="infom" border="0" src="infoman.jpg" width="102" height="86"></a> 40: <br> </span> 41: <tr align="center"> 42: <td height="50"><p class="style10 style17">τεχνολογικό Εκπαιδευτικό Ίδρυμα<br /> Καβάλας</p> 43: <td align="center"><p class="style18">διαχείριση Πληροφοριών</p></td> 44: </tr> 45: <tr align="center"> <td height="143" colspan="2"> 46: <marquee style="color: #663300; font-family: Book Antiqua"> <div align="center" class="style15"><span class="style9">ηλεκτρονικό Ερωτηματολόγιο</span> </div> </marquee></td></tr> 124

126 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής 47: <tr align="center" > <td colspan="2"> 48: <p align="center" class="style18">εισοδοσ ΦΟΙΤΗΤΗ</p> 49: <form action="index.php" method="post" > 50: <div align="center"> 51: <span class="style19">όνομα χρήστη :</span> <input type="text" name="username" ><br><br> 52: <span class="style19">κωδικός Πρόσβασης :</span> <input type="password" name="password" /><br> </span><br> 53: <input name="submit" type="submit" class="style15" value="είσοδος" /> 54: <input name="reset" type="reset" class="style15" value="καθαρισμός"></div> </form> </table> 55: </body> 56: </html> Οι γραμμές 1 3 είναι ετικέτες του προγράμματος Dreamweawer που υπάρχουν αυτόματα σε όλα τα αρχεία που δημιουργούμε με αυτό το πρόγραμμα. Στην γραμμή 4 υπάρχει το του σχεδιαστή του ιστοχώρου για όποιον θέλει να επικοινωνήσει μαζί του. Στην 5 και 6 γραμμή υπάρχουν πληροφορίες για τον ιστοχώρο, δηλαδή την ημερομηνία που παύει να ισχύει η σελίδα και την τελευταία τροποποίηση της αντίστοιχα. Στη γραμμή 8 γράφουμε τον τίτλο που θέλουμε να εμφανίζεται στη σελίδα μας. Πρέπει να σημειώσουμε ότι αυτές οι γραμμές δεν εμφανίζονται στο περιεχόμενο της σελίδας. Στην γραμμή 10 ανοίγει ένα php έγγραφο. Στη γραμμή 11 δημιουργούμε μια μεταβλητή (lathos_login) και χρησιμοποιείται για τον έλεγχο των στοιχείων του χρήστη κατά την είσοδό του. Στην γραμμή 12 δημιουργείται μια εντολή ελέγχου των στοιχείων που δίνει ο χρήστης. Στην 13 η γραμμή υπάρχει μια εντολή ανάκτησης στοιχείων από το έγγραφο generic.inc. Στο αρχείο αυτό είναι αποθηκευμένα τα στοιχεία που χρειάζονται ώστε να συνδεθούμε στον SQL Server και στη βάση. Το περιεχόμενο αυτού του αρχείου είναι «<? $DBNAME="entry"; $HOST="localhost"; $USER="root";?>». Στη γραμμή 14 δημιουργείται και εκτελείται το ερώτημα του ελέγχου των στοιχείων που δίνει ο χρήστης με αυτά που είναι αποθηκευμένα στη βάση. Στην 15 η γραμμή γίνεται η σύνδεση με τον MySQL Server και στην γραμμή

127 Μέρος ΙI : Σχεδίαση Ιστοχώρου γίνεται η σύνδεση με την βάση entry. Στην 17 γραμμή δημιουργούμε την μεταβλητή (result) στην οποία καταχωρείται το αποτέλεσμα του ερωτήματος παραπάνω (query). Στην γραμμή δημιουργείται μια μεταβλητή που καταχωρείται το αποτέλεσμα της μεταβλητής result. Αυξάνει τον μετρητή κατά 1, υπάρχει το αρχείο count.txt στο οποίο αυξάνεται ο μετρητής κατά 1 όταν τα στοιχεία που δίνονται από τον χρήστη είναι σωστά. Στην 27 γραμμή υπάρχει μια εντολή η οποία μας πηγαίνει στην επόμενη σελίδα, που έχουμε ορίσει εμείς ποια είναι, αν έχει γίνει σωστά το login. Στην περίπτωση μας έχουμε δώσει την home.php. Επίσης έχουμε προσθέσει να εμφανίζεται στην διεύθυνση της σελίδας και το username του χρήστη. Στην 22 γραμμή υπάρχει το άλλο ενδεχόμενο, αν το login δεν έγινε σωστά οπότε δεν επιτρέπεται η είσοδος και μας εμφανίζει πάλι την ίδια σελίδα (index.php). Στην 33 γραμμή κλείνει το έγγραφο php. Στην γραμμή 34 ξεκινάει η σχεδίαση του ιστοχώρου, εδώ ορίζουμε το χρώμα που θα έχει σελίδα. Στην γραμμή 35 δημιουργούμε πίνακα ρυθμίζοντας τα χαρακτηριστικά του. Στις δημιουργούμε ένα πεδίο στο οποίο εισάγουμε, με την βοήθεια του Dreamweaver 4, link με εικόνα σε μορφή Rollover Image. Την δημιουργία του Rollover Image θα την αναπτύξουμε σε παρακάτω ενότητα. Ο σύνδεσμος αυτός αφορά το site του ΤΕΙ Καβάλας, μπορεί ο χρήστης να συνδεθεί απευθείας σε αυτό. Στις δημιουργία νέου πεδίου και εισαγωγή συνδέσμου για την σελίδα του τμήματος Διαχείριση Πληροφοριών με την χρήση του Rollover Image. Στην 47 γραμμή δημιουργούμε ένα κινούμενο flash αντικείμενο το οποίο δείχνει το λογότυπο του site «Ηλεκτρονικό Ερωτηματολόγιο». Στις γραμμές δημιουργούμε την φόρμα που πρέπει να συμπληρώσει ο χρήστης ώστε να γίνει ο έλεγχος και έπειτα η είσοδος στον ιστοχώρο. Σημαντικό εδώ είναι να δούμε την 49 γραμμή που δείχνει σε ποιο αρχείο θα σταλθούν τα στοιχεία για να γίνει ο έλεγχος αλλά και με ποια μέθοδο. Βλέπουμε ότι στέλνονται στην index.php η οποία έχει και τον κώδικα ελέγχου, τα δεδομένα στέλνονται με την μέθοδο post. Έπειτα κλείνουν όλες οι ετικέτες που έχουμε ανοίξει. Η σελίδα αυτή έχει την μορφή της εικόνα

128 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.1 Σελίδα index.php 2.2 Κύρια σελίδα Αν τα στοιχεία που έδωσε ο χρήστης είναι σωστά τότε επιτρέπεται η πρόσβαση στον ιστοχώρο. Η σελίδα που ανοίγει μετά την είσοδο του χρήστη είναι η σελίδα home.php. home.php 1: <frameset rows="120,*" framespacing="0" border="2" frameborder="2" bordercolor="brown"> 2: <frame scrolling="no" src="pinakas.htm" noresize> (1 ο ) 3: <frameset cols="170,*" framespacing="0" border="0" frameborder="0"> 4: <frame scrolling="no" src="bottons.php" noresize>(2 ο ) 5: <frame name="center" scrolling="yes" src="center.htm" noresize>(3 ο ) 6: </frameset> 7: </frameset> 127

129 Μέρος ΙI : Σχεδίαση Ιστοχώρου 8: <noframes> 12: <body> 13: <p>αυτή η σελίδα χρησιμοποιεί πλαίσια, αλλά ο browser σας δεν μπορεί να τα εμφανίσει.</p> 14: </body> 15: </noframes> Η σελίδα των πλαισίων (home.php) έχει χωριστεί σε τρία βασικά πλαίσια, το καθένα με τη δική του ιδιάζουσα σημασία. Τα δύο πλαίσια καθόλη την διάρκεια της πλοήγησης στον ιστοχώρο παραμένουν σταθερά, αλλάζει μόνο το τρίτο πλαίσιο (3 ο ) που βρίσκεται η σελίδα center.htm, αφού πρώτα έχουμε δημιουργήσει αυτήν την δυνατότητα. Θα αναπτύξουμε παρακάτω και τις τρεις σελίδες που εισήχθησαν στα πλαίσια. Στο 1 ο πλαίσιο εισάγαμε την σελίδα pinakas.htm. Στη σελίδα αυτή υπάρχει το λογότυπο του ιστοχώρου, «Ηλεκτρονικό Ερωτηματολόγιο» και η τρέχουσα ημερομηνία. Όπως αναφέραμε και παραπάνω παραμένει ίδιο το πλαίσιο κατά την διάρκεια πλοήγησης του χρήστη. Παρακάτω θα δούμε τον κώδικα αναλυτικά. pinakas.htm 1: <html> 2: <body bgcolor="#84c1ff"> 3: <table width="1030" border="0"> 4: <tr> 5: <td align="center" width="150" height="102"> 6: <img src="infoman.jpg" width="126" height="88" /> 7: <td width="606" valign="top"> 8: <div align="center"><b><br /> 9: <font color="#ffffcc" size="6.5" face="comic Sans MS">Ηλεκτρονικό Ερωτηματολόγιο</font></font></b> 10: </td> 11: <td width="205" valign="top" align="center"> <br><br><br> 12: <script> 13: var now = new Date(); var mname = now.getmonth() + 1; var dname = now.getday() + 1; var daynr = ((now.getdate()<10)? "0" : "")+ now.getdate(); 128

130 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής 14: if(dname==1) Day = "ΚΥΡΙΑΚΗ"; 15: if(dname==2) Day = "ΔΕΥΤΕΡΑ"; 16: if(dname==3) Day = "ΤΡΙΤΗ"; 17: if(dname==4) Day = "ΤΕΤΑΡΤΗ"; 18: if(dname==5) Day = "ΠΕΜΠΤΗ"; 19: if(dname==6) Day = "ΠΑΡΑΣΚΕΥΗ"; 20: if(dname==7) Day = "ΣΑΒΒΑΤΟ"; 21: 22: if(mname==1) Month="ΙΑΝΟΥΑΡΙΟΥ"; 23: if(mname==2) Month="ΦΕΒΡΟΥΑΡΙΟΥ"; 24: if(mname==3) Month="ΜΑΡΤΙΟΥ"; 25: if(mname==4) Month="ΑΠΡΙΛΙΟΥ"; 26: if(mname==5) Month="ΜΑΪΟΥ"; 27: if(mname==6) Month="ΙΟΥΝΙΟΥ"; 28: if(mname==7) Month="ΙΟΥΛΙΟΥ"; 29: if(mname==8) Month="ΑΥΓΟΥΣΤΟΥ"; 30: if(mname==9) Month="ΣΕΠΤΕΜΒΡΙΟΥ"; 31: if(mname==10) Month="ΟΚΤΩΒΡΙΟΥ"; 32: if(mname==11) Month="ΝΟΕΜΒΡΙΟΥ"; 33: if(mname==12) Month="ΔΕΚΕΜΒΡΙΟΥ"; 34: 35: var todaysdate =(" " + Day + " " + daynr + " " + Month); 36: document.open(); 37: document.write("<font color=#ff9933 FACE=Verdana SIZE=2> "+todaysdate+"</font>"); 38: </script> 39: </table> 40: </body> 41: </html> Στη γραμμή 1 ανοίγει το έγγραφο html και στην 2 η γραμμή ορίζουμε το χρώμα που θέλουμε να έχει η σελίδα μας ως φόντο. Στην 3 η γραμμή δημιουργούμε έναν πίνακα. Ο πίνακας αυτός έχει μια γραμμή και τρεις στήλες (πεδία). Στην 5 η γραμμή δημιουργείται το πρώτο πεδίο του πίνακα στο οποίο 129

131 Μέρος ΙI : Σχεδίαση Ιστοχώρου εισάγουμε το σήμα του τμήματος Διαχείρισης Πληροφοριών. Από την 7 η γραμμή ως την 10 η δημιουργούμε το 2 ο πεδίο στο οποίο εισάγουμε το λογότυπο του ιστοχώρου, διαμορφώνοντας πως θέλουμε να εμφανίζεται. Τέλος, το 3 ο πεδίο δημιουργείται στην 11 η γραμμή. Σε αυτό το πεδίο εισάγουμε το script 31 για την εμφάνιση της τρέχουσας ημερομηνίας. Από την γραμμή εισήχθη το παραπάνω script. Αρχικά ορίζει τέσσερις μεταβλητές και έπειτα κάνει έλεγχο για την εύρεση της ημερομηνίας, ο έλεγχος γίνεται με την εντολή ελέγχου if. Στην 35 η γραμμή η μεταβλητή της ημερομηνίας παίρνει τις τιμές για την ημέρα, τον αριθμό του μήνα και τον μήνα. Στην 36 η γραμμή ανοίγει το αρχείο και στην 37 εμφανίζεται η τρέχουσα ημερομηνία στη σελίδα μας. Στις γραμμές κλείνουν οι ετικέτες που ανοίξαμε μέσα στο έγγραφο. Στο 2 ο πλαίσιο εισάγαμε την σελίδα bottons.php. Σε αυτή την σελίδα υπάρχει λίστα των δυνατών διαδρομών για την πλοήγηση του χρήστη στον ιστοχώρο. Υπάρχουν δηλαδή κάποια link σε μορφή flash buttons τα οποία μας πηγαίνουν σε κάποια συγκεκριμένη σελίδα. Ο πίνακας που ακολουθεί μας δείχνει τον κώδικα αυτής της σελίδας. buttons.php 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//el" " 2: <html xmlns=" 3: <head> 4: <meta http-equiv="content-type" content="text/html; charset=iso " /> 5: <title>buttons</title> 6: </head> 7: <body bgcolor="#ff9933"> 8: <br /><br /><br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " 9: codebase=" width="115" height="32"> 10: <param name="base" value="." /> 11: <param name="movie" value="home.swf" /> 12: <param name="quality" value="high" /> 31 Το κώδικα του script για τον υπολογισμό της ημερομηνίας το πήραμε από την σελίδα του Πανεπιστημίου της Θράκης 130

132 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής <param 13: name="bgcolor" value="#ff9933" /> 14: <embed src="home.swf" quality="high" pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933" base="."> 15: </embed> 16: </object> 17: <br /><br /> 18: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" width="115" height="32"> 19: <param name="base" value="."> 20: <param name="movie" value="infoman.swf" /> 21: <param name="quality" value="high" /> 22: <param name="bgcolor" value="#ff9933" /> 23: <embed src="infoman.swf" quality="high" pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933" base="."> 24: </embed> 25: </object> 26: <br /><br /> 27: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" width="115" height="32"> 28: <param name="base" value="." /> 29: <param name="movie" value="progr.swf" /> 30: <param name="quality" value="high" /> 31: <param name="bgcolor" value="#ff9933" /> 32: <embed src="progr.swf" quality="high" pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933" base="."> 33: </embed> 34: </object> 35: <br /><br /> 36: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" width="115" height="32"> 37: <param name="base" value="." /> 131

133 Μέρος ΙI : Σχεδίαση Ιστοχώρου 38: <param name="movie" value="quest.swf" /> 39: <param name="quality" value="high" /> 40: <param name="bgcolor" value="#ff9933" /> <embed src="quest.swf" quality="high" 41: pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933" base="."> 42: </embed> 43: </object> 44: <br /><br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " 45: codebase=" width="115" height="32"> 46: <param name=movie value="manuals.swf"> 47: <param name=quality value=high> 48: <param name="bgcolor" value="#ff9933"> <embed src="manuals.swf" quality=high 49: pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933"> 50: </embed> 51: </object> 52: <br /><br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " 53: codebase=" width="115" height="32"> 54: <param name="movie" value="mail.swf" /> 55: <param name="quality" value="high" /> 56: <param name="bgcolor" value="#ff9933" /> <embed src="mail.swf" quality="high" 57: pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933"> 58: </embed> 59: </object> 60: <br /><br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " 61: codebase=" width="115" height="32"> 62: <param name=movie value="logout.swf"> 132

134 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής 63: <param name=quality value=high> 64: <param name="base" value="."> 65; <param name=" bgcolor " value="#ff9933"> <embed src="logout.swf" quality=high 66: pluginspage=" Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="115" height="32" bgcolor="#ff9933"> 67: </embed> 68: </object> 69: <p> 70: <? php 71: $fp=fopen("count.txt","r") or die (" Δεν μπορεί να ανοίξει το count.txt"); 72: $number=fread($fp,10); 73: print "Αριθμός επισκεπτών <br> 74: $number<br>\n"; 75:?> 76: </p> 77: </body> 78: </html> Από την γραμμή 1-4 υπάρχει ο κώδικας του εργαλείου Dream weaver, με το οποίο δημιουργήσαμε και τα Buttons. Στην 7 η γραμμή ορίζουμε το χρώμα της σελίδας μας ως φόντο. Στις γραμμές 9-16 δημιουργούμε το link για την κεντρική σελίδα του ιστοχώρου, Home Page. Από την δημιουργούμε το link για την σελίδα που περιέχει τις πληροφορίες για τον ιστοχώρο, Information. Στις γραμμές δημιουργούμε το link για την σελίδα που περιέχει τα προγράμματα που χρησιμοποιήθηκαν για την κατασκευή του ιστοχώρου, Programs. Στις γραμμές δημιουργούμε το link για τα ερωτηματολόγια και ασκήσεις που υπάρχουν, Questionnaire. Από τη δημιουργούμε το link για τη σελίδα των εγχειριδίων που υπάρχουν στον ιστοχώρου, Manuals. Ακόμη στις γραμμές δημιουργούμε το link για επικοινωνία του επισκέπτη με τον δημιουργό, . Για την αποσύνδεση του χρήστη από τον ιστοχώρο δημιουργούμε το link Log Out στις γραμμές Τέλος μας εμφανίζει τον αριθμό των επισκεπτών στον ιστοχώρο μας. Στην αρχική σελίδα «index.php» είχαμε δημιουργήσει ένα έγγραφο count.txt στο οποίο υπήρχε μια μεταβλητή που αύξανε κατά ένα κάθε φορά που ο χρήστης πληκτρολογούσε σωστά τα στοιχεία για την είσοδο του στην κεντρική 133

135 Μέρος ΙI : Σχεδίαση Ιστοχώρου σελίδα. Στην 70 η γραμμή ανοίγει ένα έγγραφο php. Στην 71 η δημιουργούμε μια μεταβλητή $fp η οποία διαβάζει το περιεχόμενο του αρχείου count.txt, στην 72 γραμμή δημιουργούμε μια μεταβλητή $number η οποία παίρνει την τιμή που υπάρχει στο αρχείο αφού το διαβάσει πρώτα. Στην τυπώνει το αριθμό των επισκεπτών, δηλαδή την τιμή που πήρε η μεταβλητή $number. Τέλος από την κλείνουν όλες οι ετικέτες που ανοίξαμε. Για την δημιουργία των παραπάνω flash αντικειμένων χρησιμοποιήσαμε το Dreamweaver. Τα βήματα που ακολουθήσαμε, από την επιλογή Insert Media Flash Button, με την επιλογή αυτή εμφανίζεται το παράθυρο της εικόνας 2.2. Εικόνα 2.2 Παράθυρο δημιουργίας Flash Button στο Dreamweaver Εισάγουμε τα απαραίτητα πεδία, όπως φαίνονται στο παράδειγμα παραπάνω, και αυτόματα δημιουργείται το Flash Button. Ακολουθούμε την ίδια διαδικασία και για τα υπόλοιπα αντικείμενα που δημιουργήσαμε. 134

136 Μέρος Ι : Ανάπτυξη του λογισμικού Hot Potatoes Στο 3 ο πλαίσιο εισάγαμε την σελίδα center.htm. Στη Σελίδα αυτή καλωσορίζουμε τον επισκέπτη. Δημιουργήσαμε ένα κινούμενο flash αντικείμενο με το οποίο ευχαριστούμε για την επίσκεψη στο site μας. Η εμφάνιση της σελίδας home.php στον φυλλομετρητή είναι όπως παρουσιάζεται στην εικόνα 2.3 παρακάτω. Εικόνα 2.3 Σελίδα homepage.php 2.3 Εμφάνιση του μενού πλοήγησης Στη συνέχεια θα δούμε τις σελίδες που εμφανίζουν τα παραπάνω Buttons που δημιουργήσαμε και θα αναλύσουμε τις δυνατότητες που έχει ο επισκέπτης. Για το button Home page είναι η παραπάνω εικόνα (εικόνα 2.3). Για το Information είναι η εικόνα 2.4, την σελίδα αυτή την ονομάσαμε infoman.htm. Στη σελίδα αυτή ο επισκέπτης παίρνει πληροφορίες τόσο για τον σκοπό της δημιουργίας του ιστοχώρου αλλά και για τα προγράμματα και γλώσσες προγραμματισμού που χρησιμοποιήθηκαν. 135

137 Μέρος ΙI : Σχεδίαση Ιστοχώρου Εικόνα 2.4 Σελίδα infoman.htm Το επόμενο link σε μορφή button είναι το Programs. Η σελίδα που εμφανίζεται αν το επιλέξει ο χρήστης είναι το περιεχόμενο της σελίδας programs.htm, σε αυτή την σελίδα υπάρχουν πληροφορίες για τα εργαλεία που χρησιμοποιήθηκαν στην κατασκευή του ιστοχώρου. Για πιο γρήγορη πλοήγηση στην σελίδα χρησιμοποιήθηκαν τοπικά link, εικόνα

138 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.5 Σελίδα programs.htm Η σελίδα που μας ανοίγει από την επιλογή του button Questionnaire είναι η σελίδα question.html, στην οποία υπάρχουν άλλοι σύνδεσμοι που περιέχουν τα παραδείγματα που δημιουργήσαμε με το Hot Potatoes σαν ασκήσεις για διάφορα μαθήματα του τμήματος Διαχείριση Πληροφοριών. Επίσης περιέχει και το ερωτηματολόγιο που δημιουργήσαμε για το ποιο προφίλ φοιτητή σου ταιριάζει. Η σελίδα question.html έχει την μορφή όπως φαίνεται παρακάτω στη εικόνα

139 Μέρος ΙI : Σχεδίαση Ιστοχώρου Εικόνα 2.6 Σελίδα question.html Το επόμενο button, Manuals, αφορά τα εγχειρίδια που έχουμε δημιουργήσει, στα οποία ο επισκέπτης μπορεί να έχει πρόσβαση. Τα εγχειρίδια αφορούν τα εργαλεία που χρησιμοποιήθηκαν για την κατασκευή του ιστοχώρου, δηλαδή το Hot potatoes, το Dreamweaver και την PHP- MySQL. Η σελίδα που εμφανίζεται είναι το περιεχόμενο της manual.html, όπως φαίνεται και στην εικόνα

140 Πτυχιακή εργασία της Νικολαϊδου Βασιλικής Εικόνα 2.7 Σελίδα manual.html Για άμεση επικοινωνία του επισκέπτη με τον δημιουργό της σελίδας υπάρχει ο κατάλληλος σύνδεσμος που μπορεί να στείλει μήνυμα. Το button αυτό είναι το που εμφανίζει το περιεχόμενο της σελίδας mail.htm. Το περιεχόμενο αυτής της σελίδας είναι όπως φαίνεται στην εικόνα

141 Μέρος ΙI : Σχεδίαση Ιστοχώρου Εικόνα 2.8 Σελίδα maill.htm Τέλος, έχουμε το button για την αποσύνδεση του χρήστη από τον ιστοχώρο, αυτό είναι το Log Out. Ο σύνδεσμος του κουμπιού αυτού είναι η σελίδα logout.php. Με το πάτημα αυτού του κουμπιού αποσυνδέεται ο χρήστης και εμφανίζεται πάλι η αρχική σελίδα, index.php, εικόνα 2.1. Σημαντικό είναι να δούμε τον τρόπο δημιουργίας του ερωτηματολογίου για το προφίλ του φοιτητή με την χρήση των κατάλληλων πεδίων και την αξιολόγηση των απαντήσεων. Το ερωτηματολόγιο περιέχει δέκα ερωτήσεις του τύπου ναι/όχι και πολλαπλής επιλογής με δύο μορφές. Η μια μορφή είναι με check box και η άλλη πλαίσιο επιλογής με λίστα. Η σελίδα του ερωτηματολογίου αυτού είναι όπως φαίνεται στην εικόνα