Στο συγκερκιμένο μάθημα και κατά συνέπεια στις εργασίες που μας δώθηκαν σε αυτό κληθήκαμε να υλοποιήσουμε αλλαγές σε μια πρωτότυπη ιστοσελίδα ( D3js-US-educational-attainment στο Github) σύμφωνα με τα ζητούμενα των ασκήσεων με θέμα την Οπτικοποίηση Δεδομένων. Τα ερωτήματα κυμάνθηκαν από μικρή έως αρκετά απαιτητική δυσκολία και απαιτούσαν το αφιέρωμα μιας σημαντικής ποσότητας χρόνου που σε ορισμένα ερωτήματα δεν μπόρεσα να διαθέσω. Στην ιστοσελίδα περιέχονταν τρία διαδραστικά παραδείγματα που οπτικοποιούσαν στατιστικά δεδομένα για την εκπαίδευση στις Ηνωμένες Πολιτείες της Αμερικής, καθώς και μια ενδεικτική μπάρα μενού πάνω στην οποία υπήρχαν κουμπιά που οδηγούσαν σε κάποιο από τα τρία γραφήματα που αναφέρθηκαν παραπάνω με ονόματα Top,National,Regional και State-Level. Το πρώτο μέρος της εργασίας ζητούσε κυρίως μετατροπές των γραφημάτων (αλλαγή χρώματος στα σχήματα, σχήματος στα κουμπιά κτλ) και επέκταση των ιδιοτήτων της ιστοσελίδας (hover sound σε όλα τα μέρη της αλλά και responsive design στη σελίδα και κυρίως στο αρχικό menu έτσι ώστε να προσαρμόζεται σε οθόνες διαφορετικών διαστάσεων). Το δεύτερο μέρος ήταν φανερά δυσκολότερο μιας και τα ερωτήματα έγιναν απαιτητικότερα και απαιτούσαν μεγαλύτερη ενασχόληση με τον κώδικα. Σε αυτό μας ζητήθηκε να εμφανίζεται μόνο ένα από τα επιμέρους γραφήματα, τα οποία στην συνέχεια έπρεπε να αντικαταστήσουμε με άλλα καθώς και να δημιουργήσουμε μία νέα σελίδα με δικά μας γραφήματα αυτή τη φορά τα οποία αναπαριστούν στατιστικά δεδομένα της επιλογής μας.
Στο πρώτο παραδοτέο δίνονταν πέντε ερωτήματα κλιμακωτής δυσκολίας από τα οποία κατάφερα να υλοποιήσω πλήρως τέσσερα όταν έστειλα την αναφορά της πρώτης εργασίας ανάπτυξης. Συνάντησα κάποια δυσκολία στο πέμπτο ερώτημα καθώς κανένας από τους διαφορετικούς κώδικες που εισήγαγα στο index.html και στο stylesheets δεν είχαν το επιθυμητό αποτέλεσμα. Ωστόσο, πρόσφατα κατάφερα να βρώ έναν τρόπο που κατάφερε να υλοποιήσει το responsive design στην ιστοσελίδα, και ο οποίος περιέχεται στον κώδικα που παραδίδω τώρα. Στο δεύτερο παραδοτέο κατάφερα να επιλύσω το πρώτο ζητούμενο και μέρος του τρίτου. Δε διέθετα αρκετό χρόνο για να καταπιαστώ με το δεύτερο ωστόσο πιθανότατα να προσπαθήσω να κάνω αυτό αλλά και να τελειοποιήσω το τρίτο μετά την αποστολή αυτής της αναφοράς. Παρόλο που η ιστοσελίδα δε μου εμφάνιζε κάποια προβλήματα μεχρι και την υλοποίηση του πρώτου ερωτήματος καθώς και το "ανέβασμα" του πρώτου script (script_4.js) και την ένταξη του τόσο στο index.html οσο και στο index2.html, μετά την εισαγωγή των άλλων δυο (script_5.js, script_6.js) όταν εμφανίζω το link του αποθετηρίου μου η ιστοσελίδα μου εμφανίζει προβλήματα τα οποία θα προσπαθήσω να επιλύσω χωρίς ωστόσο να είμαι σίγουρη αν θα μου το επιτρέψει το χρονικό περιθώριο.
Η συγγραφή της εργασίας, οι μετατροπές που πραγματοποίησα στον κώδικα, καθώς και η σχεδόν άμεση εμφάνιση των αλλαγών που αυτός υπέστη έγιναν στην πλατφόρμα του Github. Η μέθοδος που ακολούθησα για την επίλυση των ερωτημάτων της εργασίας είναι η ακόλουθη. Αρχικά, έκανα ανάγνωση των ζητουμένων και προσπαθούσα να κατανοήσω τι ακριβώς θα έπρεπε να κάνω, καθώς και να υποθέσω ποιο κομμάτι του κώδικα ήταν απαραίτητο να αλλάξει. Στην συνέχεια έκανα έρευνα στο διαδίκτυο για παρόμοια προβλήματα. Διάβασα μια πληθώρα ιστοσελίδων που περιείχαν κομμάτια πληροφοριών που με ενδιέφεραν καθώς και παρακολούθησα ένα μεγάλο αριθμό επιμορφωτικών βίντεο στο Youtube για τις γλώσσες Html Css και JavaScript. Έπειτα προσπαθούσα να εφαρμόσω αυτά που έμαθα στον κώδικα, χωρίς ιδιαίτερη επιτυχία τις περισσότερες φορές, αλλά αργά ή γρήγορα κατάφερα να επιλύσω τα περισσότερα ζητήματα. Η ένταξη στις γλώσσες ήταν αρκετά δύσκολη καθώς δεν είχα ξανα-ασχοληθεί με αυτές στο παρελθόν και ομολογουμένως δε θα έλεγα ότι οι πλέον γνώσεις μου ξεπερνούν το μέτριο.
-
Για το πρώτο ζητούμενο του πρώτου παραδοτέου χρειάστηκε να γίνουν ορισμένες αλλαγές στις δεκαεξαδικές μεταβλήτες της συνάρτησης colour/color στα script 1,2 και 3 που βρίσκονται στο εσωτερικό του φακέλου assets και στη συνέχεια στον υποφάκελο scripts. Ουσιαστικά έγινε αλλαγή στους χαρακτήρες που ακολοθούσαν το #.
-
Για την αντικατάσταση των διεπαφών των κουμπιών του 2ου και 3ου γραφήματος χρειάστηκαν αλλαγές στο style.css του φακέλου stylesheets του assets. Ξεκίνησα εντοπίζοντας το .radio-toolbar label και συνέχισα κάνοντας αλλαγές στις μεταβλητές του για να επιτύχω κάποιο ευπαρουσίαστο αποτέλεσμα. Για παράδειγμα άλλαξα το background-color πριν και αφότου βρεθεί επάνω του ο κέρσορας για να αλλάξει το χρώμα των κουμπιών σε κάποιο της επιλογής μου, έκανα μετατροπές στο padding για να αλλάξω το μέγεθος των κουμπιών αλλά και το κενό που θα υπάρχει πριν ξεκινήσουν τα γράμματα μέσα σε αυτά. Επίσης έκανα ορισμένες αλλαγές στο border και πρόσθεσα ένα border-style που είναι στην ουσία μια αλλαγή στο ήδη υπάρχον περίβλημα(border), συνέχισα τροποποιώντας τη γραμματοσειρά (font-family) και το μέγεθος της(font-size).
-
Για την εκπλήρωση του 3ου ζητήματος έκανα upload δυο όμοιους ήχους σε ogg και mp3 ονομάζοντας τους zapsplat_hover_sound καθώς και ένα αρχείο της JS (sound-mouseover.js). Έπειτα, στο index.html, εισήγαγα το script tag στην αρχή του κώδικα και δημιούργησα ένα audio στο οποίο πρόσθεσα τους δύο ήχους που προαναφέρθηκαν. Τέλος έβαλα το onmouseover="playclip();" στις γραμμές του κώδικα που αφορούσαν τα κουμπιά του Μενού για να ακουστεί ο ήχος όταν το ποντίκι διέρχεται πάνω απο αυτά.
-
Για το text-to-speech πρόσθεσα στο index.html τη βιβλιοθήκη της html5 ResponsiveVoice η οποία μας επιτρέπει να προσθέσουμε φωνητικές ιδιότητες σε ιστοσελίδες και συσκευές. Στη συνέχεια εντόπισα ποιά κομμάτια του κώδικα στην index αναφέρονταν σε γραπτό κείμενο αλλά και σε σχήματα που περιέχουν γραπτά μηνύματα και τα έκανα να "μιλούν" όταν τα διαπερνούσε ο κέρσορας και να σταματούν όταν αυτός φεύγει
-
Για το responsive design αρχικά πρόσθεσα ορισμένες βιβλιοθήκες που βρήκα στην ιστοσελίδα του bootstrap στο body του index καθώς και μια meta () βιβλιοθήκη στην αρχή του κώδικα. Στη συνέχεια δημιούργησα στο body του index ένα script με jQuery και πρόσθεσα άλλη μια βιβλιοθήκη jQuery. Έπειτα έφτιαξα μια νέα nav-bar στο index.html και πρόσθεσα κάποιες επιπλέον γραμμές κώδικα ώστε αυτή να λειτουργεί και να ανταπεξέρχεται σε αλλαγές του μεγέθους της εικόνας.
-
Για το πρώτο ερώτημα του δεύτερου παραδοτέου έφτιαξα τρία νέα functions τα οποία περιείχαν πληροφορίες για τα τρία γραφήματα και με την εντολή document.getElementById και τις επιλογές "block" και "none" καθόρισα τι θα εμφανίζεται και που. Έπειτα εισήγαγα αυτά τα functions όπου ήταν απαραίτητο για να εμφανίζεται μονάχα ένα από τα παραδείγματα όταν πατάς τα κατάλληλα κουμπιά.
-
Για το δεύτερο ερώτημα του δεύτερου παραδοτέου έψαξα διαδραστικά παραδείγματα από το codepen και στην συνέχεια δημιούργησα νέους φακέλους scripts (script_4, script_5, script_6) όπου και έβαλα τον κώδικα της JavaScript κάθε παραδείγματος. Έπειτα πρόσθεσα στο style.css του φακέλου stylesheets την απαραίτητη Css (κάποιο παράδειγμα δεν απαιτούσε) και έφτιαξα ένα δεύτερο φάκελο index2.html όπου πρόσθεσα την κατάλληλη html. Τέλος στον φάκελο index.html πρόσθεσα τις απαραίτητες γραμμές κώδικα ώστε να μπορέσουν να εμφανιστούν τα παραδείγματα. Ωστόσο όπως προανέφερα σε αυτό το σημείο η ιστοσελίδα μου εμφάνισε προβλήματα που θα προσπαθήσω αργότερα να επιλύσω.
Παρόλο που αυτή η εργασία ήταν από τις πιο απαιτητικές που έχω συναντήσει μου έμαθε να κάνω έρευνα και να δουλεύω με γλώσσες που δε γνωρίζω καλά και να κάνω ουσιώδη και καρποφόρα έρευνα. Έμαθα πως φτιάχνονται οι ιστοσελίδες καθώς και τη μεγάλη προδιαδικασία που απαιτείται για να εμφανιστεί ένα σχετικά απλό website. Επίσης πλέον μπορώ να χειρίζομαι το Github μια πλατφόρμα που είμαι σίγουρη πως θα αξιοποιήσω στο άμεσο μέλλον.