map of greece

Περιγραφή προβλήματος: 

Κάθε Δήμος της Ελλάδας, καταγράφει τις ανάγκες των δημοτών του σε πόσιμο νερό, οριοθετώντας τις Ζώνες Παροχές Νερού (ΖΠΝ). Κάθε Δήμος, μπορεί να περιέχει πολλές ΖΠΝ. Κάθε ζώνη παροχής νερού, λαμβάνει ένα μοναδικό χαρακτηριστικό στοιχείο ταυτοποίησης και μία βασική περιγραφή. Ανάλογα με τις ποσοτικές ανάγκες, οι ΖΠΝ χαρακτηρίζονται ως «Κανονικές» ή «Μικρές». Κάθε ΖΠΝ περιγράφεται επίσης με την χρήση γεωγραφικών συντεταγμένων. Τέλος, κάθε ΖΠΝ  «συνδέεται» με πηγές παροχής νερού (ΠΠΝ) που την τροφοδοτούν. Και οι ΠΠΝ προσδιορίζονται από ένα χαρακτηριστικό κωδικό, από ενδεικτικές γεωγραφικές συντεταγμένες και από μία ενδεικτική ικανότητα παροχής. Για κάθε μία από αυτές τις πηγές, γίνονται δειγματοληπτικοί έλεγχοι ποιότητας νερού. Για κάθε έλεγχο καταγράφονται βασικές μετρήσεις για μία σειρά από παραμέτρους. Για κάθε μέτρηση, καταγράφονται πέρα από τις τιμές για κάθε παράμετρο ποιότητας  (τιμή μέτρησης, δείκτης αβεβαιότητος (+/- όριο τιμής), μέθοδο μέτρησης, επιτρεπτά όρια τιμών), στοιχεία συντεταγμένων δειγματοληψίας, ο χρόνος της δειγματοληψίας, ο χρόνος της ανάλυσης του δείγματος, και ο κωδικός εργαστηρίου που πραγματοποίησε τον έλεγχο. Ενδεικτικές παράμετροι ποιότητας είναι οι: Χρώμα, θολότητα, οσμή, pH, αγωγιμότητα, αμμωνιακά κ.α.

 

Παραδοτέα:

  • • Πρωτότυπο οθόνης για την καταχώριση των αποτελεσμάτων ελέγχου (User Profile: Χρήστης εργαστηρίου).
  • • Πρωτότυπο οθόνης για την προβολή των αποτελεσμάτων σε πολίτες (User Profile: Δημότης/Πολίτης).
  • • Πρωτότυπο οθόνης για τον εποπτικό έλεγχο των αποτελεσμάτων για όλο τον Δήμο (User Profile: Υπάλληλων Δήμου, Πολίτης/Δημότης).
  • • Αναλυτική τεκμηρίωση των δεδομένων.

 

Χρονοδιάγραμμα: 5 ημέρες

 

Ρόλος: UI designer and Front-end developer

 


 

Τεκμηριωση:

Σχεδιάστηκε και υλοποιήθηκε ιστοσελίδα για: α) το δημότη/πολίτη β) το χρήστη εργαστηρίου και γ) τον υπάλληλο δήμου. Η ιστοσελίδα είναι responsive και υλοποιήθηκε με HTML,CSS, Javascript, και Bootstrap. 

Η αρχική σελίδα των τριών χρηστών είναι η ίδια:

  • ● Στο επάνω και κάτω μέρος της οθόνης είναι το header και footer αντίστοιχα.
  • ● Το κύριο μέρος αποτελείται από την αναζήτηση, τον πίνακα και το χάρτη *1 ​.
    • ○ Αν ο χρήστης δεν επιλέξει δήμο/νομό, δεν μπορεί να δει κάποιο άλλο στοιχείο.
    • ○ Αν ο χρήστης επιλέξει δήμο/νομό, βλέπει (ή/και επεξεργάζεται) τις αντίστοιχες
    • πληροφορίες.
    • ○ Σε κάθε περίπτωση στο κάτω μέρος της οθόνης βρίσκεται ένας σύνδεσμος
    • (κουμπί) για αναζήτηση.

 

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

Θεωρήθηκε ακόμα, ότι το ηλικιακό κοινό μιας τέτοιου είδους ιστοσελίδας είναι κυρίως νέες οικογένειες, άνθρωποι άνω των 30 με παιδιά.

 

Η ιστοσελίδα σχεδιάστηκε με σκοπό τη λειτουργικότητα και την προσβασιμότητα, έτσι ώστε ο κάθε ενδιαφερόμενος χρήστης να μπορεί με ευκολία να δει ένα σύνολο πληροφοριών σχετικά με το πόσιμο νερό στο τόπο που τον ενδιαφέρει.

 

Το πρότυπο οθόνης υλοποιήθηκε με κριτήριο τους νομούς και τους δήμους και όχι με βάση τις Ζώνες Παροχές Νερού (ΖΠΝ) και τις Πηγές Παροχής Νερού (ΠΠΝ). (Υπάρχει ωστόσο ενδεικτικά μια ΠΠΝ σε κάθε δήμο.) Ο δημότης δεν έχει άμεσα την δυνατότητα να γνωρίζει σε ποια ΖΠΝ ανήκει ή ποια ΠΠΝ τροφοδοτεί την οικία του.

 

Θα ήθελα να διευκρινίσω σε αυτό το σημείο, ότι μια διαφορετική υλοποίηση θα ήταν ο δημότης να εισάγει την οδό (αν μένει σε πόλη) ή την περιοχή (αν μένει σε χωριό) που τον ενδιαφέρει και να βλέπει απευθείας τα αποτελέσματα της ποιότητας του νερού. Τα αποτελέσματα θα αντιστοιχούσαν στις συντεταγμένες τις ΖΠΝ που τροφοδοτούν την οικία του. Σε αυτή τη περίπτωση η αντιστοίχηση θα πρέπει να γίνει σε συνεργασία με τον κάθε δήμο της χώρας.

 

α) Δημοτης/Πολιτης​
 

Σχεδίαση

Ο δημότης αφού εισέρχεται στην ιστοσελίδα πρέπει να επιλέξει δήμο/νομό. Αυτό μπορεί να γίνει μέσω της αναζήτησης, του πίνακα ή του χάρτη.

 

  • ● Η αναζήτηση είναι case insensitive (ο χρήστης μπορεί να εισάγει είτε κεφαλαία, είτε μικρά γράμματα και το αποτέλεσμα θα είναι το ίδιο), ενώ δακτυλογραφώντας εμφανίζονται οι σχετικοί δήμοι στον πίνακα.
  • ● Ο πίνακας επιλέχθηκε να έχει ένα μικρό σχετικά μέγεθος, δίνοντας την δυνατότητα στον χρήστη να κάνει scroll για να επιλέξει τον δήμο του. (Σε μια πραγματική ιστοσελίδα, οι δήμοι μπαίνουν με αλφαβητική σειρά.) Με ένα κλικ σε ένα δήμο ή νομό του πίνακα, ο χρήστης μεταφέρεται απευθείας στα αποτελέσματα της ποιότητας του νερού, προσπερνώντας δηλαδή αυτομάτως τον χάρτη.
  • ● Κάνοντας κλικ σε έναν νομό του χάρτη, ο δημότης βλέπει τα αποτελέσματα όλου του νομού. Σε αυτή τη περίπτωση δεν κρίθηκε αναγκαίο να μπούμε σε μεγαλύτερο βάθος (δηλαδή να γίνεται επιλογή και του δήμου) αφού θα ήταν δύσκολο για τον δημότη να εντοπίσει ακριβώς τον δήμο στον οποίο ανήκει. Επίσης σε μικρές οθόνες, ο χάρτης δεν εμφανίζεται καθόλου, αφού και πάλι θα είναι δύσκολο να επιλεχθεί ο νομός.
  • ● Στο κάτω μέρος της οθόνης βρίσκεται η επιλογή “Αναζήτηση δήμου” για νέα αναζήτηση. Ο δημότης έχει μόνο το δικαίωμα προβολής πληροφοριών όπως: χρώμα, οσμή, ph, αγωγιμότητα, θολότητα, αμμωνιακά, ΠΠΝ και της ημερομηνίας της τελευταίας ανάρτησης των πληροφοριών και όχι το δικαίωμα τροποποίησης. Ωστόσο αυτό εξαρτάται από τις απαιτήσεις του πελάτη και το τι θέλει να είναι φανερό στο δημότη.

 

Τα παραπάνω είναι προσβάσιμα και για κάθε άλλο χρήστη (χρήστης εργαστηρίου και υπάλληλος δήμου).

 

Τεχνικά Στοιχεία

Ακολουθεί μια σύντομη επεξήγηση του web-development της σελίδας.

1. Το header είναι μόνιμα στην θέση του. Αυτό γίνεται μέσω css δίνοντας στην κλάση fixed position και ένα μεγαλύτερο z-index από ότι τα υπόλοιπα στοιχεία.

2. Η αναζήτηση είναι τύπου text και λειτουργεί μέσω javascript. Για να λειτουργήσει χρειάζεται τον πίνακα που βρίσκεται από κάτω της. Η συνάρτηση κάνει αναζήτηση σε όλα τα στοιχεία του πίνακα.

3. Κάθε νομός και δήμος του πίνακα έχει ένα μοναδικό id.

4. Επιλέγοντας ο χρήστης περιοχή, μεταφέρεται κατευθείαν στα αποτελέσματα, προσπερνώντας τον χάρτη. Αυτό γίνεται μέσω js.

5. Ο χάρτης είναι μια εικόνα. Στην εικόνα βρίσκουμε τις συντεταγμένες που αντιστοιχούν σε κάθε νομό. Τοποθετούμε τις συντεταγμένες στο html τμήμα του κώδικα. Εφόσον ο χάρτης είναι μια εικόνα και λειτουργεί μέσω συντεταγμένων, δεν θα μπορούσε να λειτουργεί σωστά σε οποιοδήποτε μέγεθος οθόνης. Για να είναι responsive, κρίνεται αναγκαία η χρήση media queries στο css. Μέσω media queries μπορεί να αλλάζει η εικόνα και έτσι και οι συντεταγμένες που αντιστοιχούν στην κάθε περιοχή. Υλοποιήθηκε ο χάρτης να λειτουργεί σε μέγεθος μεγαλύτερο από 767px, ενώ για μικρότερο μέγεθος δεν εμφανίζεται καθόλου. (Ο χάρτης θα μπορούσε να εμφανίζεται και στο μέγεθος 480px ως 767px, ωστόσο δεν υλοποιήθηκε λόγο περιορισμένου χρόνου).

6. Για να εμφανιστούν τα αποτελέσματα ανάλογα με το δήμο/νομό συνδέουμε το εκάστοτε id με την κλάση που περιέχει τις πληροφορίες. Η κλάση δεν φαίνεται από την αρχή στο χρήστη αφού είναι κρυμμένη μέσω css και της παραμέτρου display: none. Έχει γραφτεί μια συνάρτηση σε js η οποία δέχεται το id, αφαιρεί την παράμετρο display: none και προβάλει τα αποτελέσματα της ποιότητας του νερού.

7. Τέλος, υπάρχει ο σύνδεσμος “Αναζήτηση δήμου”, ο οποίος κάνει ένα smooth scroll στο επάνω μέρος της σελίδας όπου βρίσκεται η αναζήτηση. Το effect αυτό έχει πραγματοποιηθεί επίσης με js.

 

Σχέδιο​: Δημότης.pdf
Σχέδιο σε photshop​: ΑριχκήΟθόνη.psd, ΑρχικήΟθόνηΓιαSmartphones.psd
Ιστοσελίδα ​*2 ​ ​|   Κώδικας

 

 

β) Χρηστης εργαστηριου

 

Σχεδίαση

Ο χρήστης εργαστηρίου έχει δικαιώματα προβολής και επεξεργασίας των πληροφοριών, όπως: χρώμα, οσμή, ph, αγωγιμότητα, θολότητα, αμμωνιακά, συντεταγμένες ΠΠΝ, (με τις παραμέτρους: τιμή μέτρησης, δείκτης αβεβαιότητας, μέθοδος μέτρησης, επιτρεπτά όρια τιμών) ημερομηνία τελευταίας ανάρτησης των πληροφοριών αλλά και χρόνος δειγματοληψίας, χρόνος ανάλυσης δείγματος, κωδικός εργαστηρίου, υπεύθυνοι δειγματοληψίας. Ακόμα έχει τη δυνατότητα να προσθέσει μια δικιά του νέα σημείωση. Κάνοντας κλικ στα εικονίδια που βρίσκονται δίπλα από τις πληροφορίες, ο χρήστης θα έχει την δυνατότητα να παραμετροποποιήσει τα δεδομένα. (Αυτό δεν υλοποιήθηκε λόγω περιορισμένου χρόνου)
 

Τεχνικά Στοιχεία

1. Τα εικονίδια έχουν ένα hover effect, το οποίο τα μεγεθύνει. Αυτό έγινε μέσω css.

2. Ο χρήστης έχει επίσης την δυνατότητα να προσθέσει τις δικές του σημειώσεις κάνοντας κλικ στο σύμβολο “+”, ενώ έπειτα μπορεί να διαγράψει την πληροφορία που καταχώρησε κάνοντας κλικ στο σύμβολο “-”. Δημιουργήθηκαν σε js τέσσερις συναρτήσεις. Αυτές αφορούν την εμφάνιση της νέας καταχώρησης, την προσθήκη, την διαγραφή, και την αποθήκευσή της.

Σχέδιο​: ΧρήστηςΕργαστηρίου.pdf
Ιστοσελίδα ​| Κώδικας

 

γ) Υπαλληλος δημου

 

Σχεδίαση

 

Ο υπάλληλος του δήμου έχει δικαίωμα προβολής των πληροφοριών, όπως: χρώμα, οσμή, ph, αγωγιμότητα, θολότητα, αμμωνιακά, συντεταγμένες ΠΠΝ, (με τις παραμέτρους: τιμή μέτρησης, δείκτης αβεβαιότητας, μέθοδος μέτρησης, επιτρεπτά όρια τιμών) ημερομηνία τελευταίας ανάρτησης των πληροφοριών, χρόνος δειγματοληψίας, χρόνος ανάλυσης δείγματος, κωδικός εργαστηρίου και υπεύθυνοι δειγματοληψίας. Δεν έχει όμως δικαιώματα επεξεργασίας των παραπάνω πληροφοριών. Αντίθετα, έχει δικαίωμα επεξεργασίας της επεξηγηματικής κεφαλίδας (“Επιλέξτε το δήμο ή το νομό που σας ενδιαφέρει μέσω της αναζήτησης, του πίνακα ή του χάρτη και δείτε χρήσιμες πληροφορίες για την ποιότητα του νερού.”) και επεξεργασίας των δήμων (αφού οι συντεταγμένες και οι ΠΠΝ μπορεί να αλλάξουν),
ενώ έχει και αυτός τη δυνατότητα να προσθέσει μια δικιά του νέα σημείωση. Κάνοντας κλικ στα εικονίδια που βρίσκονται δίπλα από την επεξηγηματική κεφαλίδα και ανάμεσα στην αναζήτηση και τον πίνακα, ο υπάλληλος του δήμου θα έχει την δυνατότητα να παραμετροποποιήσει τα δεδομένα. (Αυτό δεν υλοποιήθηκε λόγω περιορισμένου χρόνου)

 

Τεχνικά Στοιχεία

Δεν υπάρχει κάποιο νέο τεχνικό στοιχείο.

 

Σχέδιο​: ΥπάλληλοςΔήμου.pdf
Ιστοσελίδα​ | Κώδικας

 

Η λειτουργία της σελίδας για τους διαφορετικούς χρήστες φαίνεται στο video

 

Σχόλια:

1 * Στην αναζήτηση και στον πίνακα της ιστοσελίδας λειτουργούν όλοι οι δήμοι των νομών Ρεθύμνου και Χανίων, ενώ στον χάρτη λειτουργούν οι τέσσερις νομοί της Κρήτης.

2 * Η ιστοσελίδα βρίσκεται στο codepen αφού δεν υπήρχε η δυνατότητα να φιλοξενηθεί σε server. Το codepen είναι μια πλατφόρμα για εγγραφή κώδικα και προβολή των αποτελεσμάτων σε πραγματικό χρόνο.