ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ. Πτυχιακή Εργασία

ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ Πτυχιακή Εργασία «Εφαρμογή διαδικτυακού επεξεργαστή κειμένου &html (web-editor) στη γλώσσα προγραμματισμού JavaScript» Σπουδαστής Μαρκόπουλος Επιβλέπων καθηγητής Φραγγίδης Λεωνίδας Καβάλα 2006

ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΠΛΗΡΟΦΟΡΙΩΝ Πτυχιακή Εργασία «Εφαρμογή διαδικτυακού επεξεργαστή κειμένου &html (web-editor) στη γλώσσα προγραμματισμού JavaScript» Σπουδαστής Μαρκόπουλος Επιβλέπων καθηγητής Φραγγίδης Λεωνίδας Καβάλα 2006

ΕΥΧΑΡΙΣΤΙΕΣ Θα ήθελα να ευχαριστήσω τον καθηγητή μου κο Λεωνίδα Φραγγίδη για την εμπιστοσύνη που έδειξε στο πρόσωπο μου καθώς και για την βοήθεια και την στήριξη που μου προσέφερε κατά τη διάρκεια ανάπτυξης της εφαρμογής και τις πολύτιμες οδηγίες που μου έδωσε κατά τη συγγραφή της παρούσης εργασίας.

1. ΕΙΣΑΓΩΓΗ... 3 2. ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΗΝ ΑΝΑΠΤΥΞΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ... 4 2.1. Ηypertext markup language (H.T.M.L.)... 4 2.2. Cascading Style Sheets (C.S.S.)... 4 2.3. JavaScript... 5 2.3.1. Ιστορικά στοιχεία JavaScript... 5 2.3.2. Χρήση της JavaScript... 6 2.3.3. Βασικές εφαρμογές JavaScript... 6 2.3.4. Εκτός δικτύου... 7 2.3.5. Πλεονεκτήματα... 7 2.3.6. Μειονεκτήματα... 8 2.4. Execcommand... 9 2.5. Document Object Model (D.O.M.)... 9 2.6. Dynamic HTML... 11 3. Η ΕΦΑΡΜΟΓΗ... 11 3.1. Βασικές διαφορές internet explorer-firefox... 13 3.2. H.T.M.L.... 14 3.2.1. Χρήση του I-frame σαν πεδίο κειμένου... 14 3.2.2. Κουμπιά... 14 3.2.3. Menu χρωμάτων... 15 3.2.4. Ετικέτα DIV... 15 3.2.5. C.S.S.... 16 3.2.6. Φόρμες για την εισαγωγή αντικειμένων html... 16 4. Η ΛΕΙΤΟΥΡΓΙΑ ΤΗΣ ΕΦΑΡΜΟΓΗΣ... 17 4.1. Επιλογή της κατάλληλης έκδοσης... 17 4.2. Μεταγλώττιση σε κώδικα html και το αντίστροφο... 19 4.3. Μετατροπή και διαχείριση κειμένου... 21 4.4. Προεπισκόπηση εγγράφου... 22 4.5. Εισαγωγή εικόνας... 23 4.6. Ελεύθερη κίνηση στο πεδίο... 23 4.7. Εκτύπωση... 24 4.8. Αποθήκευση ως... 25 4.9. Επιλογή χρώματος γραμματοσειράς και φόντου... 26 4.10. Επιλογή και μέγεθος γραμματοσειράς... 28 4.11. Δημιουργία λίστας... 28 4.12. Δημιουργία συνδέσμου - αναίρεση συνδέσμων... 29 Εκπόνηση:Μαρκόπουλος 1 1

4.13. Εισαγωγή στοιχείων html... 30 4.14. Έλεγχος έγκυρης εισόδου δεδομένων... 31 4.15. Εισαγωγή dropdown menu... 32 4.16. Εισαγωγή πίνακα... 36 5. ΕΠΙΛΟΓΟΣ... 39 6. ΒΙΒΛΙΟΓΡΑΦΙΑ... 40 7. ΠΑΡΑΡΤΗΜΑ... 41 7.1. Index... 41 7.2. HTML Internet Explorer... 42 7.3. Javascript Internet Explorer... 63 7.4. H.T.M.L. Firefox... 70 7.5. JavaScript firefox... 91 7.6. C.S.S._styles... 98 Εκπόνηση:Μαρκόπουλος 2 2

1. Εισαγωγή Αυτή η πτυχιακή εργασία αφορά τη ανάπτυξη ενός διαδυκτιακού επεξεργαστή κειμένου (web-editor), με δυνατότητες παρόμοιες με αυτές ενός κειμενογράφου. Αντίθετα με παρόμοιες εφαρμογές που υπάρχουν στο διαδύκτιο η συγκεκριμένη είναι βασισμένη σε μία μόνο γλώσσα script ενώ παράλληλα διαθέτει πολλές από τις λειτουργίες που είναι απαραίτητες για τη δημιουργία αρχείων html. Επίσης, αντίθετα από πολλά εμπορικά προγράμματα κατασκευής ιστοσελίδων, ο web-editor δημιουργεί κώδικα html χωρίς «σκουπίδια» δηλαδή χωρίς εντολές που δεν χρειάζονται. Ένας εκ των βασικών στόχων, εκτός από τη λειτουργία της εφαρμογής, ήταν και η ανάπτυξη όσο πιο δομημένου και απλού κώδικα γίνεται. Με αυτόν τον τρόπο είναι πιο εύκολη η διόρθωση λαθών καθώς επίσης και η περαιτέρω ανάπτυξη του στο μέλλον καθώς είναι μια εφαρμογή ανοιχτού κώδικα. Επιπλέον, ένας σημαντικός στόχος ήταν να δημιουργηθεί μία εφαρμογή που θα επιτρέπει ακόμα και σε έναν όχι έμπειρο χρήστη να δημιουργήσει το δικό του αρχείο html. Για την επίτευξη των παραπάνω στόχων χρησιμοποιήθηκε συνδυασμός Hyper Text Markup Language (H.T.M.L.), Cascading Style Sheets (C.S.S.), Document Object Model (D.O.M.) και JavaScript. Οι έννοιες αυτές αναλύονται διεξοδικά στο πρώτο κεφάλαιο. Στο δεύτερο κεφάλαιο γίνεται η περιγραφή της εφαρμογής, οι δυνατότητες της και οι διαφορές μεταξύ των φυλλομετρητών (Internet Explorer και Netscape based). Δίνεται έμφαση στο πώς αντιλαμβάνονται τις εντολές της JavaScript αλλά και αυτές της html και τελικά πώς αυτές οι διαφορές επηρεάζουν την εφαρμογή. Στο τρίτο κεφάλαιο αναλύεται ο τρόπος ανάπτυξης της εφαρμογής, ο κώδικας αλλά και πώς χρησιμοποιήθηκαν τα εργαλεία που αναφερθήκαν πιο πάνω. Ιδιαίτερη έμφαση δίνεται στα προβλήματα που παρουσιάστηκαν κατά τη συγγραφή του κώδικα και πώς και σε ποιο βαθμό αυτά αντιμετωπίστηκαν. Τέλος, αναλύονται οι τρόποι και οι μέθοδοι που χρησιμοποιήθηκαν για την εξάλειψη των διαφορών αυτών έτσι ώστε η εφαρμογή να είναι πλήρως αξιοποιήσιμη και με τις ίδιες δυνατότητες και στους δύο φυλλομετρητές. Εκπόνηση:Μαρκόπουλος 3 3

2. Εργαλεία για την ανάπτυξη της Εφαρμογής 2.1. Ηypertext markup language (H.T.M.L.) Το html είναι ακρωνύμιο του hypertext markup language. Η html είναι η κυρίαρχη γλώσσα για τη δημιουργία ιστοσελίδων. Παρέχει μέσα ώστε ο σχεδιαστής να μπορεί να δομήσει τη σελίδα του όπως αυτός επιθυμεί ορίζοντας ένα κείμενο σαν επικεφαλίδα, λίστα, έντονο κ.α.. και να εμπλουτίσει αυτό το κείμενο με φόρμες εικόνες και άλλα αντικείμενα. Επίσης στην html μπορούν να προστεθούν scripts οποία επιδρούν στην συμπεριφορά των ιστοσελίδων στους φυλλομετρητές. Τα στοιχεία της html είναι η βασική δομή της γλώσσας. Έχουν δύο βασικές παραμέτρους, τις ιδιότητες (attributes) και το περιεχόμενο(content). Κάθε ιδιότητα και κάθε περιεχόμενο του στοιχείου html έχουν ορισμένους περιορισμούς τους οποίους κάποιος πρέπει να ακολουθήσει έτσι ώστε ένα αρχείο html να ληφθεί σαν αναγνώσιμο. Ένα στοιχείο html έχει συνήθως μία ετικέτα αρχής (tag) της μορφής <tag> και μία ετικέτα τέλους </tag>. Οι ιδιότητες του στοιχείου περιέχονται στην αρχική ετικέτα και το περιεχόμενο που θέλουμε ανάμεσα στις δύο ετικέτες. Μετά από αρκετές αλλαγές, απορρίψεις (από την Microsoft και την Netscape) και αναβαθμίσεις, σήμερα χρησιμοποιείται ευρέως η HTML 4.0 η οποία ακολουθήθηκε από την έκδοση 4.01 με κάποιες προσθήκες. Η πιο συχνή κατάληξη για τα αρχεία html είναι η.html. Παρόλα αυτά, παλιότερα λειτουργικά συστήματα όπως αυτά του DOS και αυτά που στηρίζονται σε σύστημα αρχείων FAT περιορίζουν τις καταλήξεις σε τρία γράμματα, έτσι και η κατάληξη.htm χρησιμοποιείται ακόμα. [9] 2.2. Cascading Style Sheets (C.S.S.) Tα C.S.S. επιτρέπει τον προγραμματιστή να εισαγάγει πολλές ιδιότητες διαδοχικά σε όλα τα στοιχεία μιας ιστοσελίδας για τα οποία εχεί επιλεχθεί να έχουν μία συγκεκριμένη ετικέτα. Για παράδειγμα είναι εφικτό όλες οι επικεφαλίδες να εμφανίζονται με συγκεκριμένη γραμματοσειρά χρώμα ή μέγεθος. Η ερώτηση βέβαια που ανακύπτει είναι γιατί να χρησιμοποιήσουμε τα C.S.S.; Εκπόνηση:Μαρκόπουλος 4 4

Τα C.S.S. παρουσιάζουν κάποια πολύ σημαντικά πλεονεκτήματα. Με τη χρήση τους εξοικονομούμε χρόνο στην ανάπτυξη της σελίδας διότι δεν είναι πια απαραίτητο να ορίζουμε ιδιότητες για κάθε στοιχείο ξεχωριστά. Επίσης τα στυλ είναι πολύ πιο εύκολο και γρήγορο να τροποποιηθούνε. Το μόνο που χρειάζεται να κάνουμε είναι να πάμε στην ομάδα ιδιοτήτων που θέλουμε και να κάνουμε τις αλλαγές. Επιπλέον με τα στυλ ο κίνδυνος να ξεχάσουμε να επεξεργαστούμε τη σελίδα σε ένα σημείο μειώνεται σε μεγάλο βαθμό. Ο μόνος λόγος ίσως που μας αποτρέπει από το να χρησιμοποιήσουμε τα C.S.S. είναι να μην γνωρίζουμε να τα χρησιμοποιούμε. C.S.S. χρησιμοποιήθηκαν σε αυτήν την πτυχιακή εργασία όπου αυτό ήταν δυνατό. Σε μερικές περιπτώσεις χρησιμοποιήθηκαν στυλ μέσα στη σελίδα. Παρόλα αυτά εξωτερικό C.S.S. χρησιμοποιήθηκε για την τοποθέτηση αυτών των φορμών αλλά και για την γραμματοσειρά που χρησιμοποιούν. C.S.S. επίσης συνδυαστήκαν με κώδικα JavaScript για την εναλλαγή χρωμάτων και εμφάνισης του δείκτη ποντικιού των κουμπιών στην γραμμή εργαλείων. 2.3. JavaScript 2.3.1. Ιστορικά στοιχεία JavaScript Η ονομασία της JavaScript προήλθε από μία φυλή Εκπόνηση:Μαρκόπουλος 5 Ινδιάνων της νοτιο-κεντρικής Φλόριδας των ΗΠΑ. Η γλώσσα αναπτύχθηκε το 1995 από την Netscape με σκοπό να κάνει τα applets 1 του Netscape Navigator 2.0B3 πιο προσιτά στους προγραμματιστές και στους σχεδιαστές ιστοσελίδων που δεν χρησιμοποιούσαν την Java ως γλώσσα. Η JavaScript αναπτύχθηκε αρχικά από τον Brendan Eich με το όνομα Mocha, στη συνέχεια LiveScript, για να καταλήξει τελικά στην ονομασία JavaScript. Αυτή η αλλαγή του ονόματος προκάλεσε σύγχυση με την Java.[10] Στις αρχές της χρησιμοποίησης της, η γλώσσα έπασχε από προβλήματα ασφάλειας, έλλειψη εργαλείων, περιβάλλοντα ανάπτυξης και διόρθωσης κώδικα (debuggers) και συγκεκριμένα μηνύματα σφαλμάτων. Αποδοκιμάστηκε ως ανόμοια με την Java, ή ως σχεδόν ίδια με την Perl ή τέλος ως χρησιμοποιούμενη από σχεδιαστές οι οποίοι την ενσωμάτωναν σε ιστοσελίδες χωρίς να ενδιαφέρονται για την μελλοντική συμβατότητα. 1 Applet: Μικρή εφαρμογή συνήθως σε μία ιστοσελίδα. Ο κώδικας της είναι συνήθως σε Java. Τα applets δεν είναι τόσο συχνά σήμερα καθώς οι server side τεχνολογίες έχουν αναπτυχθεί σημαντικά τα τελευταία χρόνια. 5

Παρόλα αυτά, σήμερα είναι μακράν η πιο διαδεδομένη γλώσσας στο Web, η βάση για την επόμενη γενιά δυναμικών που θα εκτελούνται από τον υπολογιστή-πελάτη (client-side) δικτυακών εφαρμογών και ένας βασικός πυρήνας με μεγάλες προοπτικές. 2.3.2. Χρήση της JavaScript Το συντακτικό της JavaScript είναι παρόμοιο με αυτό της C. Όπως και η C η JavaScript δεν έχει δομές εισόδου ή εξόδου (input, output) από μόνη της. H μηχανή της JavaScript στηρίζεται σε ένα ενσωματωμένο στο φυλλομετρητή (browser). Η ενσωμάτωση της JavaScript σε ένα αρχείο html γίνεται με τρεις τρόπους. Ο πρώτος είναι να τοποθετηθούν οι ετικέτες <script> ανάμεσα στις ετικέτες <head></head> πριν από το κυρίως σώμα του εγγράφου. Ο δεύτερος τρόπος είναι να τοποθετηθούν στα στοιχεία της html. Αυτός ο τρόπος συνήθως χρησιμοποιείται όταν επιθυμούμε να έχουμε κάποιο script μικρής έκτασης. Ο τρίτος τρόπος είναι να υπάρχει σύνδεση της σελίδας με ένα ξεχωριστό αρχείο JavaScript (με κατάληξη.js) πάλι όμως ανάμεσα στις ετικέτες <head></head> με την σύνταξη <SCRIPT language="javascript" type="text/javascript" SRC="name.js">. Η τελευταία επιλογή χρησιμοποιείται σε περιπτώσεις όπου απαιτούνται πολλά σενάρια και η σελίδα html είναι μεγάλη σε κώδικα. Μια πολύ σημαντική χρήση της JavaScript είναι η σύνταξη συναρτήσεων οι οποίες καλούνται ή εμπεριέχονται σε έγγραφα HTML και αλληλεπιδρούν με το Document Object Model (D.O.M.) έτσι ώστε να επιτευχθούν λειτουργίες που δεν θα ήταν δυνατόν να πραγματοποιηθούν με απλό κώδικα HTML. Το DOM χρησιμοποιήθηκε σε συγκεκριμένες περιπτώσεις στην εφαρμογή όπου ήταν απαραίτητο. 2.3.3. Βασικές εφαρμογές JavaScript Η JavaScript βρίσκει πολλές εφαρμογές και στο διαδύκτιο και εκτός αυτού. Μία σημαντική λειτουργία της είναι η δυνατότητα ελέγχου των αναδυόμενων παράθυρων. Με μεθόδους που αναφέρονται στις ιδιότητες των παράθυρων, μπορούμε να ορίσουμε το μέγεθος, τη θέση και την εμφάνιση του παράθυρου. Για παράδειγμα υπάρχει η δυνατότητα επιλογής για το αν θα εμφανίζονται τα μενού οι γραμμές εργαλείων, η γραμμή πληροφόρησης και τα άλλα στοιχεία του φυλλομετρητή. Πρέπει να σημειώσουμε ότι πολλοί καινούριοι browsers Εκπόνηση:Μαρκόπουλος 6 6

μπλοκάρουν τα pop-ups τα οποία προέρχονται από τη Javascript για την προστασία του χρήστη από ανεπιθύμητες διαφημίσεις. [11] Επίσης μια λειτουργία που χρησιμοποιείται αρκετά στην παρούσα εργασία είναι η αλλαγή των ιδιοτήτων των εικόνων στα διάφορα events. Tα events ή εσωτερικό συμβάν καθορίζει το πότε θα εκτελεστεί το αντίστοιχο σενάριο. Αυτή η λειτουργία χρησιμοποιείται από πολλούς σχεδιαστές με σκοπό να τραβήξουν την προσοχή του χρήστη σε σημαντικούς συνδέσμους. Στους σύγχρονους φυλλομετρητές τα εφέ των εικόνων μπορούν να ενσωματωθούν και στα C.S.S.. Στην εφαρμογή μας χρησιμοποιούνται πολλές από τις δυνατότητες της javascript, ειδικά όσον αφορά την διεπαφή της σελίδας με τον χρήστη. 2.3.4. Εκτός δικτύου Έκτος δικτύου μηχανές της JavaScript χρησιμοποιούνται σε αρκετά εργαλεία. Το Adobe Acrobat και το Adobe Reader υποστηρίζουν την JavaScript στα PDF αρχεία. Ο πυρήνας του Mozilla ο οποίος βρίσκεται πίσω από αρκετούς browsers, χρησιμοποιεί την JavaScript για να ενοποιήσει το περιβάλλον του χρήστη με το transaction logic των διαφορετικών προϊόντων του. Η JavaScript επίσης χρησιμοποιείται και σε περιπτώσεις εφαρμογών που έχουν έλλειψη διεπιφάνειας με scripts. Για παράδειγμα τα Dashboard Widgets σε λειτουργικά συστήματα Apple Mac OS X v10.4 χρησιμοποιούν JavaScript. Το active scripting της Microsoft υποστηρίζει το συμβατό με το περιβάλλον JavaScript Jscript σαν λειτουργικό περιβάλλον γλώσσας script. Το JScript.NET είναι γλώσσα παρόμοια στην JScript, αλλά περικλείει περισσότερες δυνατότητες αντικειμενοστραφούς προγραμματισμού. [11] 2.3.5. Πλεονεκτήματα Υπάρχουν σημαντικοί λόγοι για να επιλέξει κάποιος να αναπτύξει μια εφαρμογή με JavaScript. Ένας πολύ σημαντικός λόγος είναι ότι υποστηρίζει τη λειτουργία των script σε διαφορετικούς browsers με κάπως διαφορετική σύνταξη. Επίσης, τα εφέ τα οποία δημιουργούνται από την JavaScript είναι πολύ ταχύτερα στη μεταφορά από ότι άλλων τεχνολογιών όπως π.χ. τα flash και τα Java applets. Επιπλέον, αντίθετα από αυτές τις τεχνολογίες, η JavaScript δεν χρειάζεται κάποιο επιπλέον plug-in για να λειτουργήσει. Αυτό που χρειάζεται απλά είναι να μπορεί ο φυλλομετρητής να υποστηρίζει την JavaScript κάτι που οι περισσότεροι σύγχρονοι browsers το κάνουν. Εκπόνηση:Μαρκόπουλος 7 7

Υπάρχουν όμως και κάποιες ακόμα ιδιότητες της JavaScript που την κάνουν ιδιαίτερα εύχρηστη. Ο χρήστης δεν χρειάζεται να περιμένει για να σταλεί η φόρμα στον server ώστε να γίνει η επαλήθευση και στη συνέχεια να σταλούν πίσω με πιθανά μηνύματα λάθους. Η επαλήθευση στον client μέσω της JavaScript συντομεύει την διαδικασία και την κάνει πολύ πιο απλή. Πριν από την Javascript για την δημιουργία φορμών απαιτούνταν η χρήση ενός προγράμματος CGI το οποίο έτρεχε από τον server. Παρόλο που μερικές φορές ο έλεγχος των δεδομένων στον server κρίνεται απαραίτητος, μια τέτοια λειτουργία καταλαμβάνει αρκετό από το εύρος (bandwidth) του δικτύου. Αυτό έχει σαν αποτέλεσμα να μειώνεται η δυνατότητα του server να δέχεται επισκέψεις. Με τη χρήση της επαλήθευσης στον πελάτη (client-side) ο server έχει τη δυνατότητα να δέχεται περισσότερους επισκέπτες γιατί απαιτείται πολύ μικρότερη επεξεργασία από την πλευρά του. Επιπλέον η σελίδα μπορεί να είναι πλήρως λειτουργική ακόμα και όταν ο χρήστης είναι αποσυνδεδεμένος από το internet. Επιπλέον η JavaScript μας επιτρέπει να δημιουργήσουμε δυναμικό περιεχόμενο στη σελίδα μας έτσι ώστε ο κώδικας μας να μπορεί να αλλάζει την εμφάνιση της σελίδας ανάλογα με τις ενέργειες του χρήστη. Πρέπει επίσης να σημειώσουμε ότι η JavaScript είναι πολύ πιο απλή από την Java αλλά και ένα επίπεδο πιο πάνω από την HTML. Και αυτό γιατί συνδυαζόμενη με τις ιδιότητες των στοιχείων που υποστηρίζει η HTML 4.0 δημιουργεί την DHTML ή δυναμικές ιστοσελίδες. Τέλος, λόγω της διαδεδομένης χρήσης της JavaScript, υπάρχουν σημαντικές πηγές και πολλά sites στο internet καθώς και πολλά παραδείγματα κώδικα για διάφορες λειτουργίες. 2.3.6. Μειονεκτήματα Παρόλο που η JavaScript έχει αρκετά πλεονεκτήματα, έχει και ορισμένα μειονεκτήματα τα οποία είναι σημαντικό να αναφερθούν. Πιθανόν κάποιος όχι και τόσο έμπειρος προγραμματιστής να έχει πρόβλημα στο να κατανοήσει τον κώδικα και αυτό γιατί δεν είναι πάντα εμφανές πως αλληλεπιδρά ο κώδικας με την HTML. Επίσης όπως είναι φυσικό, μεγάλα και σύνθετα αρχεία Javascript αργούν να κατέβουν. Τέλος αν και η JavaScript όπως αναφέρθηκε παραπάνω υποστηρίζεται από τους δύο κύριους browsers, υπάρχουν κάποιες διαφορές οι οποίες αναλύονται Εκπόνηση:Μαρκόπουλος 8 8

παρακάτω και οι οποίες είναι πιθανόν να δημιουργήσουν προβλήματα στη λειτουργία μιας σελίδας. Πλεονεκτήματα Μειονεκτήματα Εναλλακτικές Φόρμες χωρίς CGI Πιο περίπλοκη Shockwave, Flash Λειτουργικές σελίδες χωρίς από την HTML για animation σύνδεση πιο βαριές CGI για φόρμες Γρήγορες διαδικασίες τεστ σελίδες Java και αλλαγών Προβλήματα Συμπεριλαμβάνεται στους συμβατότητας καινούριους browsers στους διάφορους Πολλές πηγές στο διαδύκτιο browsers 2.4. Execcommand Πολλές από τις συναρτήσεις χρησιμοποιούν την μέθοδο execcommand Αυτή η μέθοδος εκτελεί αρκετές από τις λειτουργίες της εφαρμογής όπως για παράδειγμα την στοίχιση ή την εισαγωγή στοιχείων HTML. Η γενική μορφή της μεθόδου είναι η document.execcomand(stag,true/false,var). Το stag αντιπροσωπεύει το είδος της εντολής που θα χρησιμοποιηθεί, το true/false αν θα εμφανίζεται το παράθυρο διεπαφής του browser αν αυτό είναι διαθέσιμο και το var την τιμή που θα παίρνει η εντολή της execcommand. H execcommand έχει πληθώρα ορισμάτων τα οποία αποδείχθηκαν ιδιαίτερα χρήσιμα. Παρόλα αυτά υπάρχουν ορισμένοι περιορισμοί και σε αυτή την περίπτωση. Και στους δύο browsers για τους οποίους αναπτύχθηκε η εφαρμογή δεν υποστηρίζουν όλα τα ορίσματα. Ακόμα όμως και με τους όποιους περιορισμούς, η εργαλείο για δυναμικών ιστοσελίδων. [27] Πίνακας 1: Βασικά χαρακτηριστικά της JavaScript execcommand είναι ένα εξαιρετικά χρήσιμο rich text editing format και γενικότερα για τη δημιουργία 2.5. Document Object Model (D.O.M.) Σε κάποιες περιπτώσεις κάποιες εντολές της JavaScript δεν λειτουργούν όπως θα θέλαμε και δεν προσφέρουν πολλές επιλογές για τα εισαγόμενα στοιχεία κυρίως όσον αφορά τα html στοιχεία όπως για παράδειγμα τους πίνακες ή τα dropdown menus. Για αυτόν τον λόγο κρίθηκε απαραίτητη η χρήση του Document Object Model (D.O.M.). Το D.O.M. είναι μία πλατφόρμα Εκπόνηση:Μαρκόπουλος 9 9

εγκεκριμένη από το World Wide Web Consortium 2 (W3C) η οποία επιτρέπει στα scripts να έχουν δυναμική πρόσβαση στο περιεχόμενο της σελίδας ώστε αυτή να ανανεώνεται αλλάζοντας τη δομή της προσθέτοντας διαγράφοντας ή παραμετροποιόντας το περιεχόμενο της. Κατά την χρήση του D.O.M. τα αρχεία έχουν μια λογική δομή η οποία μοιάζει με αυτή ενός δένδρου ή καλύτερα ενός δάσους που περιέχει περισσότερα δένδρα. Παρόλα αυτά το DOM δεν ορίζει πώς πρέπει να είναι οι σχέσεις των στοιχείων τα οποία ενσωματώνονται στο σώμα μιας σελίδας. Το DOM είναι ένα λογικό μοντέλο το οποίο μπορεί να χρησιμοποιηθεί με οποιοδήποτε βολικό τρόπο. [6] Σε αυτή την εφαρμογή, υπάρχουν τρεις περιπτώσεις όπου η χρήση του D.O.M. αποδείχτηκε ιδιαίτερα χρήσιμη: Στην δημιουργία πίνακα από τον χρήστη Στην δημιουργία dropdown menu (η execcommand δεν προσφέρει to dropdown με ορίσματα) Στην εισαγωγή κελιών και textfields αλλά και στην διαγραφή τους στην φόρμα των dropdown menus. Η δομή ενός δέντρου πίνακα απλής μορφής είναι ως εξής: Εικόνα 1:Η βασική δομή δέντρου ενός πίνακα D.O.M. Για την εισαγωγή των στοιχείων αυτών και για τον ορισμό των ιδιοτήτων τους χρησιμοποιηθήκαν οι μέθοδοι createelement(), setattribute(), attachevent(), appendchild() και deleterow(). 2 W3C: ο W3C δημιουργήθηκε τον Οκτώβριο του 1994, με σκοπό να οδηγήσει το Web στην πλήρη αξιοποίηση των δυνατοτήτων του μέσω της ανάπτυξης κοινών πρωτοκόλλων που προάγουν την εξέλιξή του και διασφαλίζουν τη δια-λειτουργικότητά του. Διευθύνεται από κοινού από το MIT Laboratory for Computer Science (MIT LCS) στις ΗΠΑ, το European Research Consortium for Informatics and Mathematics (ERCIM) στη Γαλλία, και το Keio University στην Ιαπωνία. Εκπόνηση:Μαρκόπουλος 10 10

2.6. Dynamic HTML Η εφαρμογή ουσιαστικά πρόκειται για μια δυναμική ιστοσελίδα που αναπτύχθηκε όπως αναφέρθηκε και στην εισαγωγή με την χρήση JavaScript, HTML και C.S.S.. Ο συνδυασμός αυτών των τριών μας δίνει μία εξελιγμένη μορφή της HTML, την DHTML. H DHTML μας επιτρέπει τη δημιουργία ιστοσελίδων με γραφικά και κίνηση σε αλληλεπίδραση με τον χρήστη σε μεγαλύτερο βαθμό από ότι οι προηγούμενες εκδόσεις της HTML. Ουσιαστικά μας επιτρέπει web εφαρμογές να μοιάζουν σαν εφαρμογές desktop, μια δυνατότητα που χρησιμοποιήθηκε στην εργασία. Επίσης, μια ακόμα πολύ σημαντική λειτουργία που μας προσφέρει η DHTML είναι ότι μας προσφέρει απόλυτο έλεγχο όσον αφορά την θέση των στοιχείων στην οθόνη του υπολογιστή. Βέβαια αυτό που πρέπει να αναφερθεί είναι ότι δεν υπάρχει κάποιο standard για τη δημιουργία της, με αποτέλεσμα οι διάφοροι φυλλομετρητές να διαφέρουν στην ενσωμάτωση τους στην DHTML. 3. Η εφαρμογή Όπως αναφέρθηκε και στην εισαγωγή, η εφαρμογή είναι ένας text editor με τη δυνατότητα, προσθήκης στοιχείων html. Έτσι λοιπόν υπάρχει η δυνατότητα μετατροπής του κειμένου σε δείκτη, δύναμη, με γραμμή στη μέση, έντονα, πλάγια, υπογραμμισμένα με τα κουμπιά subscript,superscript, strikethrough, bold, italic και underline αντίστοιχα. Επίσης, ο χρήστης μπορεί να αλλάξει τη γραμματοσειρά, το μέγεθος της και τον τύπο των επικεφαλίδων αλλά και να εισάγει λίστες με τα dropdown menu fonts, font size, headings και με τα κουμπιά εισαγωγής αριθμημένων ή μη λιστών. Επιπλέον υπάρχει η δυνατότητα στοίχισης, δημιουργίας εσοχής και αλλαγής των χρωμάτων στο φόντο και στο προσκήνιο με τις επιλογές Justify, indent, outdent, background και hilight.φυσικά διατηρούνται οι κλασσικές δυνατότητες ενός κειμενογράφου όπως η αναίρεση και η επανάληψη, η αποκοπή, η αντιγραφή, η επικόλληση η αποθήκευση του αρχείου και εκτύπωση που λαμβάνουν χώρα με τα κουμπιά undo, redo, cut, copy, paste, save As και print. Όσον αφορά τα στοιχεία της HTML αυτά εισάγονται μέσω ειδικών φορμών που εμφανίζονται στην οθόνη ανάλογα με την επιλογή του χρήστη. Εξαίρεση σε αυτά είναι η εισαγωγή κάποιου υπερσυνδέσμου (hyperlink) για το οποίο δεν απαιτείται κάποια φόρμα. Εκπόνηση:Μαρκόπουλος 11 11

Εικόνα 2: Το βασικό παράθυρο της εφαρμογής Τα διαθέσιμα στοιχεία HTML προς εισαγωγή είναι τα checkbox, radio buttons, κουμπιά, text fields, dropdown menu, horizontal rules, i-frames και text areas. Ο χρήστης μπορεί να εισάγει τρεις τύπους κουμπιών (submit, button, reset) τρεις τύπους text-field (hidden, password και κανονικό) και δύο τύπους dropdown menu (απλό και πολλαπλής επιλογής). Πολύ σημαντική είναι και η δυνατότητα εισαγωγής πινάκων και εικόνων. Στη φόρμα των πινάκων ο χρήστης μπορεί να επιλέξει αρκετές από τις ιδιότητες του πίνακα. Ο χρήστης επιλέγει τον αριθμό γραμμών και στηλών, το μήκος και το πλάτος του πίνακα, (σε ποσοστό % επί του εγγράφου) το χρώμα φόντου και την στοίχιση του. Όσον αφορά τα όρια του πίνακα, ο χρήστης μπορεί να επιλέξει ανάμεσα στο χρώμα τους, στο πάχος τους και στο ποια από τα όρια θα εμφανίζονται (μόνο των γραμμών, μονό των στηλών ή και τα δύο).όλα τα παραπάνω είναι δυνατόν να μετακινηθούν ελεύθερα στο πεδίο με την επιλογή του κουμπιού freemove κάτι που απουσιάζει από πολλές παρόμοιες εφαρμογές. Επίσης ο editor έχει τη δυνατότητα μετατροπής από κανονική εμφάνιση του αρχείου σε κώδικα HTML και το αντίστροφο. Τέλος, όσον αφορά τη διαχείριση του εγγράφου υπάρχουν οι επιλογές της ανανέωσης (refresh), της επιλογής όλων των στοιχείων (selectall) και αποεπιλογής (deselect). Εκπόνηση:Μαρκόπουλος 12 12

3.1. Βασικές διαφορές internet explorer-firefox Ίσως το δυσκολότερο πρόβλημα στην ανάπτυξη Εκπόνηση:Μαρκόπουλος 13 του web-editor ήταν αυτός να καταστεί λειτουργικός στις δύο κύριες κατηγορίες φυλλομετρητών αυτές του internet explorer (i.e.) και της οικογένειας του Netscape (firefox, mozilla,opera κ.α.). Οι δύο φυλλομετρήτες έχουν σημαντικές διαφορές στο πώς αντιλαμβάνονται τις εντολές της JavaScript, αλλά και στη σύνταξη των scripts. Για παράδειγμα, στον i.e. μπορούμε να αναφερθούμε σε ένα στοιχείο της φόρμας με τη σύνταξη document.all.element. Στον firefox αυτή η σύνταξη πρέπει να αλλάξει σε document.getelementbyid ('element_id'). Βέβαια σε αυτή την περίπτωση πρέπει να είμαστε βέβαιοι ότι τα στοιχεία μας διαθέτουν την ιδιότητα id. Η τελευταία σύνταξη λειτουργεί και στον φυλλομετρητή της Microsoft. Αυτό έχει σαν άμεση συνέπεια και τα i-frames να καλούνται διαφορετικά. Η μορφή με την οποία τα καλούμε στον i.e. είναι iframeid.document ενώ στον Netscape για να εκτελέσουμε μια εντολή π.χ. την execcommand() καλούμε με τα frames["name_area"].document ή getelementbyid ("iframe_id"). Επίσης, οι φυλλομετρητές που στηρίζονται στον πυρήνα του Netscape δεν υποστηρίζουν όλα τα ορίσματα της execcommand. Για τον λόγο αυτό χρησιμοποιήθηκε διαφορετικός τρόπος εισαγωγής των στοιχείων html για τον firefox, κάτι το οποίο τελικά μας προσέφερε τη δυνατότητα εισαγωγής περισσότερων ιδιοτήτων, ενώ όπου χρειάστηκε χρησιμοποιήθηκαν έτοιμες μέθοδοι της JavaScript. Επίσης μερικά ορίσματα λειτουργούν διαφορετικά. Για παράδειγμα το όρισμα backcolor στον firefox θέτει το χρώμα σαν background σε όλο το αρχείο. Εάν θέλουμε απλά να αλλάξουμε το φόντο του κειμένου χρησιμοποιούμε το όρισμα hilitecolor. Η execcommand έχει διαφορές και στη σύνταξη ανάλογα με τον φυλλομετρητή. Στην περίπτωση του firefox είναι απαραίτητα όλα τα ορίσματα ακόμα και αυτά που είναι προαιρετικά στην περίπτωση του internet explorer. Μία ακόμα σημαντική διαφορά είναι ότι όπως θα δούμε και παρακάτω, ο firefox δεν διαθέτει παράθυρα διαλόγου όπως ο i.e. για την εισαγωγή εικόνας ή τη δημιουργία link. Έτσι έπρεπε να βρεθούν άλλες λύσεις. Υπάρχουν ακόμα διαφορές στον κώδικα με τον οποίο μεταφράζεται το αρχείο του χρήστη σε κώδικα html και αντίστροφα. 13

Όσον αφορά την html μια διαφορά έγκειται στο γεγονός ότι το βοηθητικό κείμενο για τις εικόνες ορίζεται με alt ενώ για τον firefox με title. Η τελευταία επιλογή λειτουργεί και στις δύο περιπτώσεις. 3.2. H.T.M.L. Το κομμάτι της HTML αν και μεγάλο είναι σχετικά προσιτό στον άπειρο σχεδιαστή. Αποτελείται από κουμπιά εικόνων, dropdown menus, επτά κρυφές φόρμες για την εισαγωγή διάφορων στοιχείων html και μία φόρμα για την εισαγωγή πίνακα. Για τη στοίχιση όλων των στοιχείων στη σελίδα χρησιμοποιούνται πίνακες. Η επεξεργασία του αρχείου λαμβάνει χώρα σε ένα i-frame. Το i-frame εσωκλείει ένα αρχείο σε ένα δεύτερο αρχείο HTML έτσι ώστε το ενσωματωμένο αρχείο να είναι ορατό σε ένα παράθυρο. Τα δύο αρχεία είναι ανεξάρτητα μεταξύ τους και αντιμετωπίζονται από τους φυλλομετρητές σαν αυτόνομα. To i-frame χρησιμοποιείται αντί για text area για δύο λόγους. Ο πρώτος είναι ότι το text area δεν δέχεται rich text editing και ο δεύτερος λόγος είναι ότι το iframe μπορεί να δεχθεί στο εσωτερικό του και html tags και εικόνες. Αυτό συμβαίνει γιατί η πρωταρχική εμφάνιση ιστοσελίδων σε άλλες ιστοσελίδες. χρήση του iframe είναι η 3.2.1. Χρήση του I-frame σαν πεδίο κειμένου Για να χρησιμοποιηθεί το iframe σαν πεδίο κειμένου πρέπει να ενεργοποιηθεί η ιδιότητα που επιτρέπει στον χρήστη να κάνει αλλαγές μέσα σε αυτό. Αυτό επιτυγχάνεται θέτοντας στην ιδιότητα designmode την τιμή on. Στον inetnet explorer αυτό γίνεται με την εντολή frames.area.document.designmode = "On"; η οποία βρίσκεται μέσα στον κώδικα της html. Για περισσότερη ασφάλεια στην έκδοση του firefox, αυτό γίνεται σε ξεχωριστή συνάρτηση (start()) η οποία εκτελείται με το άνοιγμα της εφαρμογής: document.getelementbyid('area').contentwindow.document.de signmode = "on"; 3.2.2. Κουμπιά Τα κουμπιά που χρησιμοποιούνται στην εφαρμογή είναι εικόνες τύπου gif. Για να έχουν τις λειτουργίες ενός κουμπιού έχουν ενσωματωθεί σε αυτά τα events (γεγονότα) που έχουν σχέση με τις ενέργειες του ποντικιού και του πληκτρολογίου. Έτσι λοιπόν τα events που χρησιμοποιούνται είναι τα εξής: 1. onmouseover (αλλαγή φόντου όταν ο δείκτης είναι πάνω στην εικόνα) Εκπόνηση:Μαρκόπουλος 14 14

2. onmouseout (επιστροφή σε κανονική εμφάνιση όταν φεύγει ο δείκτης) 3. onmousedown (αλλαγή φόντου όταν πατιέται το κουμπί) 4. onmouseup (επιστροφή σε κανονική εμφάνιση όταν κατά την άφεση του κουμπιού του ποντικιού 5. onclick() (Συνδέει το κουμπί με την κατάλληλη συνάρτηση, όπου χρειάζεται περιέχει και τιμή μεταβλητής). 6. onblur() (Εκτελείται το σενάριο όταν ο χρήστης φεύγει από το συγκεκριμένο στοιχείο) 7. Onkeypress()(Εκτελείται το σενάριο όταν ο χρήστης πατήσει ένα πλήκτρο στο συγκεκριμένο στοιχείο) Επίσης τα κουμπιά έχουν και μια κλάση C.S.S. η οποία ορίζει το μήκος και το πλάτος όλων των κουμπιών. Έτσι λοιπόν ένα τυπικό κουμπί της εφαρμογής έχει τον παρακάτω κώδικα <img title="save As" src="img\saveas.gif" onmouseover="selon(this)" onmouseout="seloff(this)" onmousedown="seldown(this)" onmouseup="selup(this)"onclick="saveas(this.form)" class="buttons_prop"> 3.2.3. Menu χρωμάτων Για την λειτουργία της αλλαγής του χρώματος γραμματοσειράς αλλά και του φόντου ήταν απαραίτητη η χρήση εικόνας με δείγματα των χρωμάτων. Για να γίνει αυτό η εικόνα χωρίστηκε σε μικρές περιοχές (<area>) η κάθε μία από τις οποίες αντιπροσωπεύει ένα link με την δεκαεξαδική τιμή του χρώματος και με link σε δύο συναρτήσεις οι οποίες όπως θα δούμε πιο κάτω χρησιμεύουν για την εισαγωγή των χρωμάτων, την απόκρυψη και τη διατήρηση της εικόνας στο προσκήνιο. μορφή: Μία περιοχή εικόνας στην εφαρμογή έχει την παρακάτω <area shape="rect" coords="1,1,7,10" href="javascript:colors('#00ff00'); RemoveContent('colors_table');"onMouseOver="create_frame('color s_table')> 3.2.4. Ετικέτα DIV Η ετικέτα <div> αποτελεί ένα πολύ ισχυρό εργαλείο για τους σχεδιαστές ιστοσελίδων καθώς ορίζει τις λογικές περιοχές μέσα στο περιεχόμενο της σελίδας. Αυτό σημαίνει ότι ορίζοντας αυτές τις περιοχές μπορούμε να διαχειριστούμε ευκολότερα ιδιότητες όπως το στυλ ή την γραμματοσειρά Εκπόνηση:Μαρκόπουλος 15 15

καθώς και την ακριβή θέση του αντικειμένου που βρίσκεται μέσα στις ετικέτες <DIV> </DIV>. Στον web-editor η ετικέτα χρησιμοποιήθηκε σε συνδυασμό με C.S.S. τα οποία ορίζουν τη θέση των DIV στην ιστοσελίδα ειδικά αυτών που εμπεριέχουν τις φόρμες εισαγωγής των html στοιχείων. 3.2.5. C.S.S. Στην παρούσα εφαρμογή χρησιμοποιήθηκε ένα αρχείο C.S.S. με πέντε κλάσεις. Η κλάση.button_prop θέτει το μέγεθος των εικόνων που χρησιμοποιούνται σαν κουμπιά. Η κλάση.buttons αλλάζει τη γραμματοσειρά, το χρώμα, το background και τον δείκτη του ποντικιού στα κουμπιά και στα dropdown menus που υπάρχουν στη γραμμή εργαλείων και στις φόρμες. Η.tables_position ορίζει τη θέση που είναι τοποθετημένες αυτές οι φόρμες. Αυτή η κλάση δηλαδή ορίζει την θέση των <div> που χρησιμοποιούνται για αυτόν τον σκοπό. Τέλος η.text_pos ορίζει την θέση του κειμένου στην αρχική οθόνη. Παρακάτω ακολουθούν οι πέντε κλάσεις:.tables_position { z-index: 2; position: absolute; left: 0px; top: 190px; padding: 10px; width: 200; font-size:12pt.buttons_prop { width: 25; height: 25;.image_pos { margin-left: auto; margin-right: auto; margin-top: 10%;.buttons { font:8pt verdana; font-weight: bold; color:#006bb5; border:1px solid #006bb5; background: #feb; cursor: pointer; Πίνακας 2: Οι κλάσεις του C.S.S. αρχείου.text_pos { margin-left: auto; margin-right: auto; margin-top: 10%; Έξω από το αρχείο C.S.S. υπάρχει ακόμα μία ιδιότητα στις κρυμμένες φόρμες και στην παλέτα των χρωμάτων. Είναι η ιδιότητητα display η οποία έχει οριστεί αρχικά στην τιμή hidden. Αυτό έγινε εκτός του αρχείου διότι με αυτόν τον τρόπο είναι ευκολότερη η αλλαγή του με την χρήση της JavaScript. 3.2.6. Φόρμες για την εισαγωγή αντικειμένων html Ένα αρκετά απαιτητικό κομμάτι της εφαρμογής ήταν η εισαγωγή στοιχείων html. Για να είναι λειτουργική η εφαρμογή και να αποφευχθεί η πληθώρα κουμπιών που ίσως θα δυσκόλευε τον χρήστη, επιχειρήθηκε η ομαδοποίηση των στοιχείων αυτών. Επίσης, αποφεύχθηκε η δημιουργία των φορμών αυτών Εκπόνηση:Μαρκόπουλος 16 16

σε νέα παράθυρα και για λόγους ευχρηστίας (οι browsers μπλοκάρουν τα pop-up windows) αλλά και γιατί σε αυτήν την περίπτωση είτε θα χρειαζόταν πιο πολύπλοκος κώδικάς είτε θα ήταν απαραίτητη η χρήση και άλλης γλώσσας script όπως ή php. Οι φόρμες αυτές εμφανίζονται στην αριστερή πλευρά του παραθύρου. Για να γίνει αυτό βέβαια πρέπει η κάθε φόρμα να εξαφανίζεται όταν ο χρήστης επιλέγει κάποια άλλη. Για αυτή τη λειτουργία χρησιμοποιήθηκε η συνάρτηση create_frame() η οποία κάνει ορατό το στοιχείο του πρώτου id που υπάρχει στο εκάστοτε κουμπί και κρύβει όλα τα υπόλοιπα. Για παράδειγμα: document.getelementbyid(element_id).style.display="" //εμφάνιση document.getelementbyid(previous_id1).style.display ="none"; //απόκρυψη Λόγω του ότι κάποιες εντολές που σχετίζονται με την εισαγωγή στοιχείων html δεν αναγνωρίζονται από τον firefox οι φόρμες σε κάποια από τα πεδία είναι λίγο διαφορετικές χωρίς όμως αυτό να επηρεάζει στο ελάχιστο τη λειτουργικότητα της εφαρμογής. Έτσι η εφαρμογή διαθέτει επτά «υποφόρμες» με τις οποίες ο χρήστης μπορεί να εισάγει την επιλογή του. 4. Η λειτουργία της εφαρμογής Η γενική μέθοδος και φιλοσοφία που χρησιμοποιήθηκε σε αυτή την πτυχιακή είναι οι μεταβλητές στο JavaScript κομμάτι να αλλάζουν τιμές από τιμές που υπάρχουν στην HTML. Όπως αναφέρθηκε πιο πάνω, η εφαρμογή ενσωματώνει πολλές από της λειτουργίες ενός κειμενογράφου. 4.1. Επιλογή της κατάλληλης έκδοσης Στην πρώτη σελίδα της εφαρμογής ο χρήστης βλέπει την αρχική εικόνα. Η εικόνα συνδέεται με ένα script το οποίο εξετάζει ποιον πυρήνα χρησιμοποιεί ο browser (internet explorer ή Netscape) και ανάλογα κατευθύνει τον χρήστη στην κατάλληλη έκδοση. Η παραπάνω λειτουργία επιτυγχάνεται με το ακόλουθο script, το οποίο εκτελείται κάνοντας «κλικ» στην εικόνα : if(navigator.appname=="microsoft Internet Explorer") { window.location.href = "explorer.html"; else { window.location.href = "firefox.html"; Εκπόνηση:Μαρκόπουλος 17 17

Εικόνα 3: Η αρχική σελίδα της εφαρμογής Σε περίπτωση που ο χρήστης χρησιμοποιεί τον i.e. τότε κατά την εκκίνηση της εφαρμογής θα δει την εικόνα να εμφανίζεται σταδιακά. Αυτό επιτυγχάνεται με τη χρήση φίλτρων που παρέχονται από την έκδοση 4 και που έχουν εμπλουτιστεί στην έκδοση 5.5. Αυτά τα φίλτρα δεν υποστηρίζονται μέχρι στιγμής από τους φυλλομετρητές που ανήκουν στην οικογένεια του Netscape. O κώδικας για να επιτύχουμε αυτή την εμφάνιση δίνεται παρακάτω: ospan.filters[0].apply(); ospan.style.visibility = "visible"; ospan.filters[0].transition=3; ospan.filters[0].play(); Σε αυτή τη συνάρτηση, αρχικά ενεργοποιούμε τα φίλτρα, στη συνέχεια η εικόνα παίρνει την ιδιότητα visible (ορατή), επιλέγεται το φίλτρο και στη συνέχεια αρχίζει η κίνηση του αντικειμένου. Για να επιτύχουμε αυτό το αποτέλεσμα πρέπει να θέσουμε στο στοιχείο html το φίλτρο πάντα μέσα σε ιδιότητα C.S.S..Έτσι έχουμε τον ακόλουθο κώδικα στο κομμάτι της html: <img src="pic.jpg" id="ospan" width="400" height="264" align="center" onmouseover="handstyle(this)" onclick="version(this.form)" style="visibility: hidden; Filter:revealTrans(duration=5, transition=3);position:absolute;"> Εκπόνηση:Μαρκόπουλος 18 18

Όπου revealtrans είναι το όνομα του φίλτρου, duration η διάρκεια που θα κρατήσει η κίνηση και transition το είδος της κίνησης που θα εκτελεστεί. (υπάρχουν 24 είδη το 3 π.χ. αντιστοιχεί στην κυκλική κίνηση). Ανάλογα φίλτρα χρησιμοποιούμε και για την εμφάνιση του κειμένου. 4.2. Μεταγλώττιση σε κώδικα html και το αντίστροφο Μία από τις σημαντικότερες λειτουργίες αυτής της εφαρμογής είναι η μετατροπή των όσων έχει σχεδιάσει ο χρήστης σε κώδικα html και το αντίστροφο. Aυτά επιτυγχάνονται με δύο συναρτήσεις, την sourcecode() και την formatted. Για την εκτέλεση αυτής της λειτουργίας υπάρχουν δύο κουμπιά και δύο συναρτήσεις οι οποίες καλούνται ανάλογα με την περίπτωση. Όταν εκτελείται η μία συνάρτηση, εκτός από την μετατροπή για την αποφυγή bugs έχει προβλεφθεί να εμφανίζεται το κατάλληλο κουμπί και να εξαφανίζεται αυτό που έχει πατηθεί. Η συνάρτηση sourcecode() για τον i.e. για την εμφάνιση του κώδικα html έχει ως εξής: Var ihtml=document.getelementbyid('area').contentwindow.document.bo dy.innerhtml; //παίρνει των κώδικα HTML από το iframe document.getelementbyid('area').contentwindow.document.body.inn ertext = ihtml; //αντικατάσταση των στοιχείων από τον html κώδικα document.getelementbyid('html').style.display = "none"; //απόκρυψη του κουμπιού 'html' document.getelementbyid('normal').style.display = ""; //εμφάνιση του κουμπιού 'normal' Ενώ για την επαναφορά σε κανονική εμφάνιση χρησιμοποιείται ο παρακάτω κώδικας στη συνάρτηση formatted() : var itext=document.getelementbyid('area').contentwindow.docum ent.body.innertext; //παίρνει των κώδικα HTML από το iframe document.getelementbyid('area').contentwindow.document.bo dy.innerhtml = itext; //αντικατάσταση html κώδικα από κανονικό format document.getelementbyid('normal').style.display = "none"; //απόκρυψη του κουμπιού 'normal' Εκπόνηση:Μαρκόπουλος 19 19

document.getelementbyid('html').style.display =""; //εμφάνιση του κουμπιού 'html' Οι αντίστοιχες συναρτήσεις για τον firefox είναι οι εξής: sourcecode() html=document.createtextnode(document.getelementbyid('are a').contentwindow.document.body.innerhtml);//παίρνει των κώδικα HTML από το iframe document.getelementbyid('area').contentwindow.document.bo dy.innerhtml = ""; //αντικατάσταση των στοιχείων από τον html κώδικα //html = document.getelementbyid('area').contentwindow.document.im portnode(html,false); document.getelementbyid('area').contentwindow.document.bo dy.appendchild(html); document.getelementbyid('html').style.display = "none"; //απόκρυψη του κουμπιού 'html' document.getelementbyid('normal').style.display = ""; //εμφάνιση του κουμπιού 'normal' formatted(): html=document.getelementbyid('area').contentwindow.docume nt.body.ownerdocument.createrange(); html.selectnodecontents(document.getelementbyid('area').c ontentwindow.document.body); document.getelementbyid('area').contentwindow.document.bo dy.innerhtml=html.tostring(); document.getelementbyid('normal').style.display = none"; //απόκρυψη του κουμπιού 'html' document.getelementbyid('html').style.display = ""; //εμφάνιση του κουμπιού 'normal' Ειδικά σε αυτή τη λειτουργία ο πιο έμπειρος χρήστης θα καταλάβει ίσως ότι η μεταγλώττιση στον μεν internet explorer γίνεται βάσει απλών ετικετών html, ενώ στον firefox βάσει των κανόνων C.S.S.. Αν και αυτή η λειτουργία είναι παρούσα σε όλες τις εφαρμογές σχεδίασης ιστοσελίδων, o web editor το καταφέρνει χωρίς την δημιουργία περιττών ιδιοτήτων στον κώδικα. Εκπόνηση:Μαρκόπουλος 20 20

4.3. Μετατροπή και διαχείριση κειμένου Οι λειτουργίες cut, copy, paste, refresh, subscript, superscript, strikethrough, bold, italic και underline χρησιμοποιούν μία συνάρτηση την manip_text(). Η εκτέλεση της λειτουργίας στον internet explorer γίνεται με την εντολή area.document.execcommand(action,false,null); όπου action η τιμή της επιλογής του χρήστη. Για να εκτελεστεί αυτή η εντολή στην επιλογή που έχει κάνει ο χρήστης χρησιμοποιούμε την εντολή document.getelementbyid('area'). contentwindow.focus();. Αυτή η εντολή επικεντρώνει την execcommand στο επιλεγμένο αντικείμενο ή κείμενο. Σε διαφορετική περίπτωση η execcommand εφαρμόζεται σε ολόκληρο το πεδίο. Στην περίπτωση του firefox τα πράγματα είναι λίγο πιο σύνθετα. Δυσκολίες παρουσιάστηκαν στις λειτουργίες cut, copy, paste. Για λόγους ασφαλείας ο firefox έχει μπλοκάρει αυτές τις λειτουργίες και κανονικά χρειάζονται ειδικές ρυθμίσεις στο preference file του browser. Το πρόβλημα ξεπεράστηκε με την εντολή netscape.security.privilegemanager.enableprivilege ('UniversalXPConnect') η οποία επιτρέπει την λειτουργία των παραπάνω εντολών αλλάζοντας το preference file. Το μόνο που χρειάζεται είναι η ενεργοποίηση της από τον χρήστη κατά την πρώτη εκτέλεση μιας εντολής. Στη συνέχεια ο υπολογιστής έχει τη δυνατότητα να θυμάται αυτή την επιλογή και έτσι δεν θα ξαναζητηθεί επιβεβαίωση. Βέβαια η σύνταξη της εντολής είναι διαφορετική από αυτή του i.e.. Έτσι η συνάρτηση έχει ως εξής: netscape.security.privilegemanager.enableprivilege('unive rsalxpconnect'); selection=document.getelementbyid('area').contentwindow; selection.focus(); selection.document.execcommand(action,false,null); Σε αυτή τη περίπτωση η μεταβλητή selection παίρνει ως τιμή την επιλογή του χρήστη, στη συνέχεια επικεντρώνεται η ενέργεια στην επιλογή και τέλος εκτελείται η execcommand με το ανάλογο όρισμα. Επίσης στον firefox χρησιμοποιείται διαφορετική συνάρτηση για τις λειτουργίες undo και redo λόγω της διαφορετικής σύνταξης που απαιτούν αυτά τα ορίσματα στην execcommand. Έτσι αυτές οι εντολές εκτελούνται με την παρακάτω γραμμή: Εκπόνηση:Μαρκόπουλος 21 21

document.getelementbyid('area').contentwindow.document.execcom mandchoice,false,null); Η στοίχιση του κειμένου πραγματοποιείται πάλι με την εντολή της execcommand και με τον ίδιο ακριβώς τρόπο, αλλά σε διαφορετική συνάρτηση για λόγους κατανόησης του κώδικα. 4.4. Προεπισκόπηση εγγράφου Ο χρήστης έχει τη δυνατότητα να ελέγξει το πώς θα φαίνεται το αρχείο του στον browser. Αυτό επιτυγχάνεται με την συνάρτηση preview(). Αυτό που κάνει η preview είναι η δημιουργία ενός αναδυόμενου (pop-up) παραθύρου το οποίο περιέχει τον κώδικα που έχει δημιουργήσει ο χρήστης. Η δημιουργία του αναδυόμενου παράθυρου γίνεται με τη μέθοδο window.open(). H μέθοδος αυτή διαθέτει πολλές παραμέτρους για τις ιδιότητες του αναδυόμενου παραθύρου. Στη συγκεκριμένη περίπτωση δεν χρησιμοποιούμε αυτές τις ιδιότητες για να μπορεί ο χρήστης να βλέπει ακριβώς το αποτέλεσμα. Ο κώδικας html για τον i.e. λαμβάνεται από το i-frame με την εντολή document.getelementbyid('area').contentwindow.document.bo dy.innerhtml;. Στην συνέχεια ο συγκεκριμένος κώδικας html μπαίνει στο αναδυόμενο παράθυρο. Ο κώδικας της συνάρτησης για τον internet explorer είναι ο εξής: var y=document.getelementbyid('area'). contentwindow.document.body.innerhtml; var generator=window.open('','name'); generator.document.write(y); generator.document.write('</body></html>'); Εικόνα 4: Η λειτουργία της προεπισκόπησης Εκπόνηση:Μαρκόπουλος 22 22

4.5. Εισαγωγή εικόνας Η εισαγωγή εικόνας γίνεται πάλι με την εντολή της execcommand με το όρισμα Insertimage. Στην εφαρμογή επιλέξαμε να εμφανίζεται το παράθυρο εισαγωγής εικόνας του i.e.. Αυτό γίνεται αν θέσουμε την τιμή true. Η σύνταξη της είναι λίγο διαφορετική από τις προηγούμενες περιπτώσεις, γιατί για να λειτουργήσει σωστά η συνάρτηση χρειάζεται και η εισαγωγή της διαδρομής της εικόνας: Εκπόνηση:Μαρκόπουλος 23 Εικόνα 5: Το παράθυρο για την εισαγωγή εικόνας x=document.getelementbyid('area').document.execcommand("i nsertimage",true,x); O firefox δεν διαθέτει παράθυρο διαλόγου για την εισαγωγή εικόνας. Έτσι χρησιμοποιήθηκε ένα prompt window στο οποίο ο χρήστης βάζει το μονοπάτι του αρχείου και στη συνέχεια εκτελείται η εισαγωγή της εικόνας. 4.6. Ελεύθερη κίνηση στο πεδίο Μία λειτουργία της εφαρμογής στην οποία δόθηκε ιδιαίτερη έμφαση είναι η ελεύθερη μετακίνηση των εισηγμένων στοιχείων στο iframe. Για να πραγματοποιηθεί αυτό είναι απαραίτητο τα στοιχεία να έχουν την ιδιότητα absolute. Αυτό επιτυγχάνεται μέσω της εντολής area.document. execcommand("absoluteposition",false,true);. Αφού εκτελεστεί αυτή η εντολή χρησιμοποιούνται και άλλες δύο εντολές για την μετακίνηση των αντικειμένων και την αυξομείωση του μεγέθους τους η οποία γίνεται 23

ορατή από τον χρήστη. Για την μετακίνηση των αντικειμένων χρησιμοποιείται η εντολή area.document.execcommand("2d-position",false, true) ενώ για την αλλαγή μεγέθους η area.document.execcommand ("LiveResize",false,true); Και οι τρεις εντολές βρίσκονται στο σώμα της συνάρτησης freemove() η οποία καλείται από το ανάλογο κουμπί στην πρώτη σειρά εργαλείων. Σε αυτή την περίπτωση ο firefox έχει ένα πλεονέκτημα. Δεν χρειάζεται κάποια εντολή για την ελεύθερη μετακίνηση στο πεδίο. Αυτό που πρέπει να κάνει ο χρήστης μετά την εισαγωγή του στοιχείου είναι να επιλέξει απλά το στοιχείο και να το σύρει εκεί που επιθυμεί. 4.7. Εκτύπωση Η εκτύπωση του κειμένου γίνεται στη συνάρτηση print με την εντολή της execcommand η οποία παίρνει το όρισμα Print. Εδώ χρειάζεται ιδιαίτερη προσοχή καθώς η εντολή αυτή πρέπει να εστιαστεί στο περιεχόμενο του iframe. Σε διαφορετική περίπτωση η λειτουργία της θα είναι ίδια με αυτή της εντολής εκτύπωσης από τον φυλλομετρητή δηλαδή θα τυπωθεί ολόκληρη η σελίδα. Εικόνα 6: Εκτύπωση του αρχείου Ο κώδικας για την εκτύπωση του αρχείου στον i.e. είναι ο ακόλουθος: Εκπόνηση:Μαρκόπουλος 24 24

frames.area.focus(); //επικέντρωση στο i-frame frames.area.document.execcommand("print");//εκτύπωση περιεχομένου Ο firefox δεν αναγνωρίζει το όρισμα της print στην execcommand. Για αυτόν τον λόγο χρησιμοποιούμε τη συνάρτηση print() του contentwindow καλώντας συγχρόνως το i-iframe: document.getelementbyid("area").contentwindow.print(); 4.8. Αποθήκευση ως Μια κοινή λειτουργία σε όλα τα προγράμματα είναι αυτή της αποθήκευσης. Αυτό όμως δεν συμβαίνει πάντα στις διαδυκτιακές εφαρμογές. Στον web editor υπάρχει η δυνατότητα αποθήκευσης του περιεχομένου που έχει κάνει ο χρήστης είτε του κώδικα html, είτε της σελίδας σε μορφή παρουσίασης. Για τον σκοπό αυτό δεν χρειάστηκε η δημιουργία νέου παραθύρου με JavaScript στο οποίο να υπάρχει ξεχωριστό script,όπως ίσως θα περίμενε κάποιος. Αυτό που κάνουμε απλά είναι να καλέσουμε το παράθυρο της «αποθήκευσης ως» του explorer. Εικόνα 7: Το παράθυρο για την αποθήκευση Αυτό γίνεται με την εκτέλεση και πάλι της execcommand(): document.getelementbyid("area").contentwindow.document.ex eccommand('saveas',true,filename);. Σε αυτή την περίπτωση Εκπόνηση:Μαρκόπουλος 25 25

ιδιαίτερη προσοχή πρέπει να δοθεί στο διαφορετικό συντακτικό πριν από την execcommand. Επειδή θέλουμε να επικεντρώσουμε την ενέργεια όχι στο αντικείμενο iframe αλλά στο περιεχόμενο του, αφού καλούμε το αντικείμενο επικεντρωνόμαστε στο περιεχόμενο με την φράση contentwindow. Σε διαφορετική περίπτωση η εντολή Save As δεν θα λειτουργήσει και ο browser θα εμφανίσει μήνυμα λάθους. 4.9. Επιλογή χρώματος γραμματοσειράς και φόντου Η δημιουργία κουμπιών για την επιλογή του χρώματος τόσο του φόντου όσο και της γραμματοσειράς ήταν λίγο πιο σύνθετη από τις βασικές λειτουργίες μορφοποίησης του κειμένου. Για να εκτελεστούν οι επιθυμητές λειτουργίες χρησιμοποιούνται τρεις συναρτήσεις. Η πρώτη συνάρτηση εκτελείται όταν ο δείκτης του ποντικιού βρίσκεται πάνω σε ένα από τα δύο κουμπιά για το χρώμα. Εικόνα 8: Εμφάνιση της παλέτας χρωμάτων Έτσι με την συνάρτηση create_colors() η εικόνα που απεικονίζει σε τετράγωνες περιοχές τα χρώματα εμφανίζεται στο προσκήνιο με την εντολή document.getelementbyid.('colors_table').style.display="". Επίσης, η ίδια συνάρτηση παίρνει σαν όρισμα το είδος του κουμπιού που πατήθηκε. Η τιμή αυτή περνάει στη μεταβλητή μέσω της html και παίρνει δύο Εκπόνηση:Μαρκόπουλος 26 26

τιμές την fgcolor εάν έχει πατηθεί το κουμπί για το χρώμα του αντικειμένου και bgcolor εάν έχει πατηθεί το κουμπί για το χρώμα του φόντου. Τώρα λοιπόν η παλέτα βρίσκεται στο προσκήνιο. Για να διατηρηθεί στο προσκήνιο, εκτελείται η συνάρτηση create_colors_table(form) καθώς ο δείκτης περνάει πάνω από τις περιοχές της. Η συνάρτηση αυτή είναι παρόμοια με την create_colors() μόνο που δεν θέτουμε το όρισμα για το κουμπί που πατήθηκε. Όταν ο χρήστης επιλέξει ένα χρώμα εκτελούνται δύο συναρτήσεις, η colors() και η RemoveContent(). Η τελευταία θέτει πάλι την παλέτα στο παρασκήνιο με την εντολή document.getelementbyid(d).style.display="none". Η ίδια συνάρτηση εκτελείται και όταν ο χρήστης φεύγει από τα δύο κουμπιά. Με την επιλογή του χρήστη, εκτελείται η δεύτερη συνάρτηση, η οποία με την μεταβλητή η οποία έχει πάρει την τιμή της από την create_colors() ελέγχει από ποιο κουμπί (φόντου ή χρώματος γραμματοσειράς) προήλθε η εμφάνιση της εικόνας και εκτελεί την ανάλογη εντολή. Η ίδια συνάρτηση επίσης καθιστά τον επιλογέα χρωμάτων μη ορατό. Αυτές οι δύο λειτουργίες επιτυγχάνονται με τον παρακάτω κώδικα: document.getelementbyid('area').contentwindow.focus(); if (color_type=='fgcolor'){ area.document.execcommand("forecolor",false, color); else if (color_type=='bgcolor') { area.document.execcommand("backcolor",false, color); Αυτή η συνάρτηση είναι λίγο διαφορετική στον Netscape λόγω διαφορετικής σύνταξης αλλά και επειδή με το όρισμα Backcolor αλλάζει όλο το φόντο του αρχείου. Έτσι χρησιμοποιούμε το hilitecolor για την ίδια λειτουργία και το backcolor για την αλλάγη του φόντου ολόκληρου του αρχείου: selection=document.getelementbyid('area').contentwindow; selection.focus(); if (color_type=='fgcolor'){ selection.document.execcommand("forecolor",false, color); else if (color_type=='bgcolor') { selection.document.execcommand("hilitecolor",false, color); else if (color_type=="backcolor") Εκπόνηση:Μαρκόπουλος 27 27

{ selection.document.execcommand("backcolor",false, color); 4.10. Επιλογή και μέγεθος γραμματοσειράς Η επιλογή και το μέγεθος της γραμματοσειράς όπως και η επιλογή μεγέθους της επικεφαλίδας γίνεται πάλι με τη χρήση της εντολής execcomand. Η διαφορά από τις άλλες συναρτήσεις εκτός από τα ορίσματα τους- έγκειται στο ότι αυτές οι συναρτήσεις εκτελούνται με την επιλογή ενός στοιχείου από το drop down menu. Αυτό επιτυγχάνεται με την ιδιότητα Onchange στον κώδικα της HTML. Οι συναρτήσεις που εκτελούνται για αυτές τις λειτουργίες είναι οι chooseformat για την επιλογή της γραμματοσειράς, choosesize για την επιλογή του μεγέθους και chooseheading για την επιλογή της επικεφαλίδας. Ο δε κώδικας για την execcommand είναι παρόμοιος με τις άλλες περιπτώσεις. Έτσι για παράδειγμα για την επιλογή της γραμματοσειράς έχουμε: var font1=document.keimeno.fonts.value; area.document.execcommand('fontname',false,font1); Στην πρώτη γραμμή παίρνουμε το όνομα της γραμματοσειράς και στη δεύτερη εκτελούμε την εισαγωγή της. Παρόμοιες είναι και οι άλλες δύο συναρτήσεις μόνο που αλλάζουν τα ορίσματα και οι τιμές των μεταβλητών. Για ακόμα μια φορά οι αντίστοιχες συναρτήσεις για τον firefox έχουν την ίδια λογική αλλά διαφορετικό συντακτικό: var font1=document.keimeno.fonts.value; selection=document.getelementbyid('area').contentwindow; selection.focus(); selection.document.execcommand('fontname',false,font1); Και σε αυτή την περίπτωση, όπως και στην περίπτωση διαχείρισης του κειμένου πρέπει πρώτα να δημιουργήσουμε ένα αντικείμενο με την επιλογή του χρήστη και στη συνέχεια να επικεντρώσουμε την ενέργεια σε αυτήν. 4.11. Δημιουργία λίστας Ο web-editor επιτρέπει την εισαγωγή αριθμημένης και μη λίστας. Για τη δημιουργία της λίστας και πάλι χρησιμοποιείται η execcommand. Για να λειτουργήσει όμως όπως σε έναν κειμενογράφο απαιτούνται κάποιες επιπλέον σειρές κώδικα και στους δύο φυλλομετρητές. Στον internet explorer έχουμε την ακόλουθη σειρά εντολών: document.getelementbyid('area').contentwindow.focus(); Εκπόνηση:Μαρκόπουλος 28 28

selectedtext=frames.area.document.selection.createrange() ; selectedtext.execcommand(listtype,false,null); selectedtext.select(); frames.area.focus(); Ενώ στον firefox τον ακόλουθο κώδικα: selection=document.getelementbyid('area').contentwindow; selection.focus(); document.getelementbyid("area").contentwindow.document.ex eccommand (list_type,false,null); Το όρισμα listtype μπορεί να πάρει δύο τιμές αυτές της insertorderedlist και insertunorderedlist. Η πρώτη τιμή εισάγει την αριθμημένη λίστα και η δεύτερη την μη αριθμημένη. Οι τιμές αυτές λαμβάνονται από το κουμπιά των λιστών. 4.12. Δημιουργία συνδέσμου - αναίρεση συνδέσμων Ένα από τα στοιχεία html που μπορεί να εισάγει ο χρήστης είναι αυτό του συνδέσμου (link). Στον internet explorer εμφανίζεται παράθυρο με το οποίο Εικόνα 9: Το παράθυρο για την εισαγωγή υπερσυνδέσμου μπορεί ο χρήστης να διαλέξει το είδος του συνδέσμου από εννέα επιλογές και να εισάγει τη διεύθυνση url. Εκπόνηση:Μαρκόπουλος 29 29