Imagemap

και 

ImageMapHighlighter 


To imagemap είναι ο τρόπος χαρτογράφησης εικόνων για να δώσουμε στον χρήστη περισσότερες πληροφορίες  ή τη δυνατότητα πλοήγησης μέσα στην εφαρμογή που χρησιμοποιείται η εικόνα. Η διαδικασία αφορά την προσθήκη των συντεταγμένων συγκεκριμένων σημείων της εικόνας που θέλουμε να χρησιμοποιήσουμε, μέσω κώδικα.  Για να ενισχύσουμε την οπτική διάδραση με τον χρήστη μπορούμε να χρησιμοποιήσουμε το imagemaphighlighter, γκριζάροντας τα επιλεγμένα σημεία της εικόνας καθώς περνά το ποντίκι από πάνω τους και κλικάροντας σε αυτά. Επίσης στην ενεργοποιημένη έκδοση του imagemaphighlighter της Βικιπαίδειας δημιουργείται και μια επεξηγηματική λίστα είτε λημμάτων ή κειμένου, την οποία αν θέλει ενεργοποιεί ο χρήστης. Και οι δύο περιπτώσεις χρησιμοποιούνται ήδη για χρόνια στο διαδίκτυο. Παρόλα αυτά το imagemaphighlighter εισήχθηκε πρόσφατα στην Βικιπαίδεια, ύστερα από πρωτοβουλία του χρήστη ManosHacker . Εγώ είχα τη χαρά να συμμετέχω σε αυτήν την προσπάθεια ως tester του κώδικα, δημιουργώντας παραδείγματα. Η υπόλοιπη ομάδα αναφέρεται αναλυτικά παρακάτω.

Παραδείγματα Imagemap

Πατήστε πάνω στην εικόνα για να δείτε το παράδειγμα σε πραγματικό χρόνο.

Πρώτος γομφίος άνω γνάθου

Εδώ ο χρήστης ενημερώνεται για την ύπαρξη της δυνατότητας επεξήγησης των επιμέρους μορφολογικών στοιχείων των δοντιών με την λεζάντα που υπάρχει κάτω από την εικόνα στο κουτί πληροφοριών. Σε αυτό συντελεί και η ύπαρξη tooltips που εμφανίζονται καθώς ο χρήστης περνά το ποντίκι πάνω από τις χαρτογραφημένες περιοχές. Κάνοντας κλικ μεταφέρεται στα αντίστοιχα λήμματα.



Παρόμοια παραδείγματα υπάρχουν στα λήμματα: 

Imagemaphighlighter

Μεταφράζω το κείμενο του ManosHacker από την πρόταση που υπέβαλε στο meta για ενεργοποίησή του:

«-Πρόβλημα:
Η συμβολή στη Wikipedia δεν είναι εύκολη για τα παιδιά της πρωτοβάθμιας εκπαίδευσης ή για όλους τους ανθρώπους.
Το κείμενο ενός λήμματος ή μια στατική εικόνα δεν δίνει γρήγορες οπτικές πληροφορίες και δεν είναι διαδραστική.

-Ποιος θα ωφεληθεί:
  • Χρήστες υπολογιστών, (μακροπρόθεσμα και οι χρήστες των tablets και των κινητών κατά την επόμενη έκδοση των αισθητήρων της MS και της Apple)
  • Μαθητές της πρωτοβάθμιας εκπαίδευσης / ΑμεΑ
  • Λήμματα ανατομίας, αρχαιολογίας, φυσικών επιστημών και σχεδόν κάθε είδους θα επωφεληθούν όταν οι εικόνες τους γίνουν διαδραστικές.

-Προτεινόμενη λύση:
Το imagemap έχει εμπλουτιστεί στη Βικιπαίδεια με το imagemaphighlighter του χρήστη קיפודנחש, που ύστερα από την συμβολή του χρήστη P.a.a υποστηρίζει τη δημιουργία κόκκινων συνδέσμων, μαζί με τη δυνατότητα αλλαγής του κειμένου των κουμπιών εμφάνισης/απόκρυψης και την προαιρετική απόκρυψη της λίστας συνδέσμων που πρόσθεσε ο χρήστης ManosHacker. (Τα παραδείγματα δημιουργήθηκαν από τον χρήστη Ανώνυμος Βικιπαιδιστής).»



Παραδείγματα Imagemaphighlighter:


Πατήστε πάνω στις εικόνες για να δείτε τα παραδείγματα σε πραγματικό χρόνο.


Το ανθρώπινο στόμα

Το imagemaphighlighter μπορεί να εμπεριέχεται και μέσα σε κουτί πληροφοριών. Εδώ η λίστα βοηθά όχι μόνο στην οπτική αναγνώριση κάθε ανατομικού στοιχείου του στόματος, αλλά και διαδραστικά παραπέμποντας τον αναγνώστη στα επιμέρους λήμματα, με τη μορφή εσωτερικών συνδέσμων. Μπορούμε να δούμε πληροφορίες για τον δημιουργό της εικόνας πατώντας πάνω στο μπλε εικονίδιο "i" που βρίσκεται κάτω δεξιά.





Θεώρημα του Θαλή

Στην εικόνα η λίστα επεξήγησης είναι ανεπτυγμένη, επεξηγώντας βήμα-βήμα το θεώρημα του Θαλή. Ο μαθητής χρησιμοποιεί λοιπόν την εικόνα επικουρικά για να κατανοήσει το θεώρημα όπως ακριβώς αν ήταν στον πίνακα του σχολείου κατά την παράδοση του μαθήματος. Είναι λοιπόν ένα εύχρηστο εκπαιδευτικό εργαλείο.





Το γωνιαίο λάκτισμα (κόρνερ)

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




Επιδερμίδα

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





Update: 
Δυστυχώς, αν και η επιλογή της εμφάνισης του imagemaphighlighter αρχικά ήταν ενεργοποιημένη και απόλυτα λειτουργική σε κινητά και τάμπλετς, απενεργοποιήθηκε αυθαίρετα χωρίς προηγουμένως να έχει υπάρξει συζήτηση ή ειδοποίηση εντός της κοινότητας, ως είθισται.  

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