Εργασία στο μάθημα «Προγραμματισμός ΙΙ» Ευστρατιάδης Ευστράτιος-Γεώργιος, ΑΕΜ 4261 Ιούνιος 2015

Ζητούμενο του μαθήματος: Κατασκευή ιστοσελίδας δυναμικής HTML (DHTML) για την περιγραφή ενός θέματος φυσικής. Αλλαγή των περιεχομένων της σελίδα με χρήση JavaScript. Φόρτωση των πολυμεσικών στοιχείων από ξεχωριστά αρχεία: Εικόνες Ήχοι Βίντεο Applets

Η «master» σελίδα, πριν τη δυναμική φόρτωση των περιεχομένων της:

... και μετά:

Δημιουργία διάταξης σελίδας: Η σελίδα χωρίζεται σε τμήματα (divisions, “div”’s), των οποίων τις θέσεις και τις διαστάσεις τις ορίζουμε με 2 εναλλακτικούς τρόπους: α) εισάγωντας τις οδηγίες εμφάνισής τους (style) κατά τη δημιουργία τους β) ορίζοντας διάφορα πρότυπα εκ των προτέρων και ανάθεση προτύπων στα τμήματα κατά τη δημιουργία τους (CSS) Τα τμήματα της αρχικής σελίδας είναι ορισμένα με τον β τρόπο:

Φόρτωση περιεχομένου – θέματα (1) Όταν έχει αρχικοποιηθεί η σέλίδα, καλείται η συνάρτηση initTopics(). Η συνάρτηση αυτή είναι γραμμένη σε JavaScript και βρίσκεται στο ξεχωριστό αρχείο «java_script.js», μαζί με όλες τις άλλες συναρτήσεις που χρησιμοποιούμε. Οι πληροφορίες των θεμάτων (τίτλοι και ονόματα αρχείων XML) βρίσκονται επίσης σε ξεχωριστό αρχείο «topics_index.xml». Η initTopics() διαβάζει το αρχείο XML και δημιουργεί έναν πίνακα θεμάτων, τον οποίο στη συνέχεια τοποθετεί στο εσωτερικό του τμήματος της σελίδας που προορίζεται για αυτόν τον σκοπό.

Φόρτωση περιεχομένου – θέματα (2) Το αρχείο XML βρίσκεται «διαβασμένο» και έτοιμο για χρήση στη μεταβλητή xmlTopics, η οποία χρησιμοποιεί τη συνάρτηση loadXMLDoc(“filename”), η οποία διαβάζει αρχεία XML και τα ετοιμάζει για χρήση στην JavaScript.

Φόρτωση περιεχομένου – θέματα (3) Η συνάρτηση που φορτώνει τον πίνακα θεμάτων αυτομάτως στο τέλος της καλεί τη συνάρτηση gotoTopic(0), η οποία «μεταφέρει» την ιστοσελίδα στο θέμα 0, δηλαδή το πρώτο θέμα.

Φόρτωση περιεχομένου – σελίδες Κάθε φορά που επιλέγεται ένα νέο θέμα, καλείται η συνάρτηση initPages(), η οποία ανακατασκευάζει το περιεχόμενο του τμήματος επιλογής σελίδων.

Φόρτωση περιεχομένου – τίτλος Όταν έχει ανανεωθεί το περιεχόμενο του τμήματος επιλογής σελίδων, αυτομάτως καλείται η gotoPage(0), για να φορτωθεί η πρώτη σελίδα. Διαβάζεται και ετοιμάζεται το αντίστοιχο αρχείο XML για περεταίρω χρήση, φορτώνεται σε πρώτη φάση φορτώνεται ο τίτλος και έπειτα καλείται η updateContent(0) για να φορτώσει το περιεχόμενο του κυρίως τμήματος.

Περιεχόμενο αρχείων XML (1) Τα εν λόγω αρχεία XML περιέχουν μία κύρια ετικέτα «pages», η οποία περιέχει κάποιον αριθμό ετικετών «page». Αυτές περιέχουν με τη σειρά τους έναν μία ετικέτα «title» και μία «contents», η οποία περιέχει ένα πλήθος απο «paragraph», οι οποίες περιέχουν «text» και «media». Οι ετικέτες «page» αντιστοιχούν στις σελίδες του κάθε θέματος και οι «paragraph» στις παραγράφους της σελίδας. Τα ετικέτες «text» έχουν όλες τις πληροφορίες σχετικά με το κυρίως κείμενο και οι ετικέτες «media» τις πληροφορίες των αντίστοιχων συνοδευτικών πολυμέσων.

Περιεχόμενο αρχείων XML (2) <pages>: περιέχει ένα πλήθος από <page> <page>: περιέχει <title> και <contents> <title>: περιέχει τον τίτλο της σελίδας <contents>: περιέχει ένα πλήθος από <paragraph> <paragraph>: περιέχει <text> και <media> <text>: περιέχει το κείμενο και πληροφορίες εμφάνισης κειμένου <media>: περιέχει <url>, <caption> και εσωτερικές πληροφορίες εμφάνισης <url>: περιέχει τη σχετική ως προς τη σελίδα διεύθυνση του πολυμέσου <caption>: περιέχει τη λεζάντα του πολυμέσου

Φόρτωση περιεχομένου – κυρίως τμήμα (1) Η συνάρτηση updateContent() γεμίζει το κυρίως τμήμα της σελίδας με το περιεχόμενο που ορίζεται από τα αρχεία XML. Ανάλογα με τον τύπο του πολυμέσου και τις οδηγίες τοποθέτησής του, κατασκευάζει τον αντίστοιχο κώδικα HTML για την ορθή εμφάνισή του. Μέσα στο <text>, εκτός από απλό κείμενο, περιέχονται και οδηγίες εμφάνισης (πχ έντονη γραφή, πλάγια γραφή, μέγεθος, εξίσωση κτλ). Επειδή δεν επιτρέπεται η χρήση των χαρακτήρων “<“ και “>” μέσα στα αρχεία XML για σκοπό πέρα από τη δημιουργία ετικετών, κάθε οδηγία εμφάνισης γίνεται με χρήση άλλων «κωδικοποιημένων» συμβόλων, τα οποία η updateContent() αντικαθιστά με τον αντίστοιχο ακριβή κώδικα HTML.

Φόρτωση περιεχομένου – κυρίως τμήμα (2) Η αντικατάσταση κωδικοποιημένων τμημάτων από κώδικα HTML δεν είναι ο μόνος τρόπος για γραφή HTML μέσα στην XML. Υπάρχει η δυνατότητα να σημειωθεί ένα τμήμα κειμένου στην XML σαν «απλό κείμενο», ώστε να μπορεί να περιέχει οποιονδήποτε χαρακτήρα. Αυτός ο τρόπος όμως αυξάνει τον κώδικα XML, ενώ ο προηγούμενος τρόπος έχει το αντίθετο αποτέλεσμα: με έναν σύντομο κωδικοποιημένο τρόπο φτιάχνεται τελικά ένας μακροσκελής κώδικας HTML.

Πολυμέσα Η σελίδα περιέχει ένα πλήθος περιεχομένων πέρα από απλό κείμενο: -εικόνες -βίντεο από αρχείο -βίντεο απο youtube -applets Αυτά μπορούν να εμφανιστούν σε διάφορες θέσεις σε σχέση με το κείμενο της αντίστοιχης παραγράφου. Επίσης περιέχουν και λεζάντα η οποία μορφοποιείται αυτόματα και τοποθετείται κάτω από το αντίστοιχο περιεχόμενο.

Εικόνες

Βίντεο από αρχείο

Βίντεο από youtube

applets

Επίλογος Το περιεχόμενο της ιστοσελίδας είναι μία εισαγωγή στο θέμα του ηλεκτρικού ρεύματος, βασισμένο κατά το πλείστον στο σχολικό βιβλίο φυσικής Α’ λυκείου. Δεν δόθηκε τόσο βάρος στο περιεχόμενο αυτό καθ’αυτό, αλλά στον τρόπο παρουσίασής του από μία ιστοσελίδα. Τα Java applets βρίσκονται σε ένα σημείο καμπής αυτήν την χρονική περίοδο: οι όλο και αυστηρότερες ρυθμίσεις ασφαλείας της Java δυσκολεύουν την ενσωμάτωσή τους στους σύγχρονους περιηγητές. Στόχοι πιθανής βελτίωσης της παρούσας ιστοσελίδας: -μεγαλύτερη εμβάθυνση στο αντικείμενο της φυσικής -προσθήκη διαδραστικών ασκήσεων (όχι σε μορφή applet) -προσθήκη διαδραστικού πίνακα περιεχομένων -βελτίωση του κώδικα και προσθήκη περισσότερων δυνατοτήτων

Βιβλιογραφία http://www.google.com/ Σημειώσεις του μαθήματος «Προγραμματισμός ΙΙ», Ε. Χατζηκρανιώτης http://www.w3schools.com/ http://stackoverflow.com/ Φυσική Γενικής Παιδίας Α’ Λυκείου http://www.google.com/ Χρησιμοποιήθηκε το πρόγραμμα συγγραφής ιστοσελίδων “Brackets”: http://brackets.io/