ΚΑΤΑΣΚΕΥΗ ΔΙΚΤΥΑΚΗΣ ΤΟΠΟΘΕΣΙΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ ΓΛΩΣΣΑΣ ΣΗΜΑΝΣΗΣ HTML 5 2Ο ΓΕΛ ΙΛΙΟΥ ΕΡΕΥΝΗΤΙΚΗ ΕΡΓΑΣΙΑ 1 - Α’ ΛΥΚΕΙΟΥ ΚΑΤΑΣΚΕΥΗ ΔΙΚΤΥΑΚΗΣ ΤΟΠΟΘΕΣΙΑΣ ΜΕ ΧΡΗΣΗ ΤΗΣ ΓΛΩΣΣΑΣ ΣΗΜΑΝΣΗΣ HTML 5 ΥΠΕΥΘ. ΚΑΘΗΓΗΤΡΙΑ ΜΑΓΚΑΝΑΡΗ ΣΤ.

Γενική περιγραφή

Στόχος Βασικός σκοπός της παρούσας ερευνητικής εργασία είναι η δημιουργία δικτυακού τόπου που θα προβάλλει το σχολείο μας. Βασικός σκοπός της παρούσας ερευνητικής εργασία είναι η δημιουργία δικτυακού τόπου που για το σχολείο μας. Το διερευνητικό ερώτημα που τέθηκε είναι πως μπορούν να αξιοποιηθούν οι δυνατότητες ανοιχτων περιβαλλόντων όπως η html 5 και τα svg γραφικά στη δημιουργία σελίδων. Για τη δημιουργία των σελίδων χρησιμοποιήθηκε η γλώσσα HTML 5, ενώ η σχεδίαση των γραφικών το περιβάλλον SVG-EDIT. Σημαντικό είναι ότι και τα δύο περιβάλλοντα είναι ανοικτού κώδικα.

Μεθοδολογία

Μεθοδολογία wiki (pbworks) Έρευνα με χρήση ερωτηματολογίου Έρευνα με χρήση ερωτηματολογίου Δημιουργία γραφικών για το site Σύνθεση-υλοποίηση ιστοσελίδας Οι μαθητές εργάστηκαν σε ομάδες. Η πρώτη ομάδα ασχολήθηκε με την ανάλυση χρηστών μέσω ερωτηματολογίου. Στα αποτελέσματα της έρευνας που έγινε στηρίχθηκαν οι άλλες δύο ομάδες που ασχολήθηκαν με τη σχεδίαση των γραφικών και του site αντίστοιχα. Στο θεωρητικό μέρος των εργασιών που παραδόθηκαν από τους μαθητές παρουσιάστηκαν οι βασικές δυνατότητες της html και των διανυσματικών γραφικών που χρησιμοποιήθηκαν για την υλοποίηση του δικτυακού τόπου. Η συνεργασία των ομάδων μεταξύ τους αλλά και με την υπεύθυνη καθηγήτρια στηρίχθηκε σε wiki.

Εργαλεία υποστήριξης Ακολούθησε μια επισκόπηση στα εργαλεία υποστήριξης της εφαρμογής που υλοποιήθηκε. Πιο συγκεκριμένα, έγινε μια αναλυτική παρουσίαση της HTML 5 δίνοντας ιδιαίτερη βαρύτητα στις νέες δυνατότητες που διαθέτει και την καθιστούν ένα από τα βασικά εργαλεία στο χώρο των εφαρμογών διαδικτύου. Αναλύθηκαν τα διανυσματικά γραφικά Scalable Vector Graphics, και τα πλεονεκτήματα που παρουσιάζουν έναντι άλλων τύπων γραφικών (raster). Τα παραδείγματα αυτής την ενότητας αποτέλεσαν το μεγαλύτερο μέρος των δομικών στοιχείων που χρησιμοποιήθηκαν κατά τη φάση της υλοποίησης. Στην ίδια ενότητα περιγράφηκε ο συνδυασμός επικαλυπτόμενων φύλλων στυλ, css, και svg γραφικών, τα οποία χρησιμοποιήθηκαν για τη μορφοποίηση των γραφικών της εφαρμογής. Όσον αφορά τις ανάγκες διάδρασης, χρησιμοποιήθηκαν σε μεγάλο βαθμό σενάρια JavaScript τα οποία αναπτύχθηκαν στην ενότητα SVG Scripting. Σημαντική εξέλιξη της HTML 5 αποτελούν τα ισχυρά APIs (Application Programming Interface) από τα οποία αναπτύχθηκαν τα Drag and Drop, CANVAS API, και η Αποθήκευση τοπικά στον υπολογιστή-πελάτη (client) localStorage, sessionStorage.

Συμπεράσματα ανάλυσης Αρχική καταγραφή προτιμήσεων των χρηστών. Συλλογή πληροφοριών μέσω ερωτηματολογίων. Αποτελέσματα ανάλυσης χρηστών. Μεθοδολογία ανάλυσης χρηστών Προκειμένου να διασαφηνιστεί το περιεχόμενο και η μορφή του site, έγινε έρευνα με σκοπό την καταγραφή των προτιμήσεων των χρηστών. Για τη συλλογή πληροφοριών χρησιμοποιήθηκε η τεχνική του ερωτηματολογίου μέσω διαδικτύου. Στη συνέχεια ακολούθησε η ανάλυση των αποτελεσμάτων με τη χρήση γραφημάτων στο excel.

Κύριο μέρος

Υλοποίηση Δημιουργία του περιβάλλοντος της εφαρμογής. Δημιουργία του περιεχομένου. ..\PROJECT_SITE\index.html Για την υλοποίηση της ιστοσελίδας χρησιμοποιήθηκε το νέο πρότυπο HTML 5. Το σύνολο των εικόνων που χρησιμοποιούνται τόσο στη διεπιφάνεια όσο και στο περιεχόμενο της εφαρμογής αποτελούν διανυσματικά γραφικά (SVG).

Συμπεράσματα Δημιουργία δικτυακόυ τόπου με θέμα: "Το σχολείο μου" Ενημέρωση για τις σχολικές δραστηριότητες Στοιχεία επικοινωνίας Δημιουργία ιστοσελίδας με χρήση HTML5 Ευκολία στη χρήση της γλώσσας html Προσφέρει περισσότερες δυνατότητες σε σχέση με έτοιμα πρότυπα ή άλλες πλατφόρμες δημιουργίας ιστοσελίδων Δυνατότητα αποθήκευσης των αρχείων στο web ή τοπικά Σημαντικό είναι επίσης ότι αποτελεί ανοικτό πρότυπο Οι στόχοι μας επιτεύχθηκαν με ομαδοσυνεργατική εργασία

Μελλοντική εργασία Μελλοντικό μας στόχο αποτελεί ο εμπλουτισμός του site με σελίδες που αναφέρονται στους γονείς. Επίσης σε μεγάλο βαθμό χρησιμοποιήθηκε η javascript με σκοπό την αύξηση της λειτουργικότητας της εφαρμογής. Εκτός από τα script που δημιουργήθηκαν για συγκεκριμένες ανάγκες, χρησιμοποιήθηκαν και βιβλιοθήκες javascript ανοιχτού κώδικα με σκοπό την προσθήκη επιπλέον λειτουργιών. Αυτές είναι η jquery.js, η d3, και η Raphaels javascript library. Ιδιαίτερα βοηθητικός ήταν ο ρόλος των ομάδων συζητήσεων forums που υποστηρίζουν την ανάπτυξη τους και σχολιάζουν τα παρατηρούμενα σφάλματα με σκοπό τη βελτιστοποίηση τους. Τα διαδοχικά φύλλα CSS3, αποτέλεσαν την καλύτερη πρακτική για τη μορφοποίηση των σελίδων. Χρησιμοποιήθηκαν λόγω των πλεονεκτημάτων και της υποστήριξης που παρέχουν καθώς και για το διαχωρισμό της παρουσίασης και του περιεχομένου.