Νέες Τεχνολογίες στην Εκπαίδευση

Transcript

1 Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Χάρτες Στεφανέας Πέτρος Ζαμαρίας Βασίλης

2 Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.

3 Πολλές φορές είναι χρήσιμο, κάνοντας κλικ με το ποντίκι σε διάφορα σημεία μιας εικόνας, να πραγματοποιούμε συνδέσεις σε άλλες εικόνες, ιστοσελίδες κλπ. Για παράδειγμα, μπορούμε να έχουμε σε μια εικόνα ένα μικρό χάρτη και με το κλικ του ποντικιού σε διάφορα σημεία του να εμφανίζουμε λεπτομερέστερους χάρτες. Ή, ακόμα, έχοντας την εικόνα μιας μηχανής, κάνοντας κλικ σε διάφορα σημεία της να πηγαίνουμε σε ιστοσελίδες που περιγράφουν τα σημεία αυτά. 1

4 Η δημιουργία ενός τέτοιου χάρτη, όπως λέγεται, γίνεται με δύο "κινήσεις": 1) με τη προσθήκη του ορίσματος USEMAP="..." στον κωδικό που εισάγει την εικόνα, δηλαδή <IMG SRC="..." USEMAP="#...">. Οι... στο SRC αντιστοιχούν στο όνομα του αρχείου που περιέχει την εικόνα ενώ στο USEMAP αντιστοιχούν στο όνομα του "χάρτη". 2) Ανάμεσα στους κωδικούς <MAP> και </MAP> περιγράφουμε ακριβώς τις περιοχές της εικόνας και τις συνδέσεις που επιθυμούμε (συνηθίζεται το τμήμα αυτό να εμφανίζεται στο τέλος το αρχείου html). Οι περιοχές που μπορούμε να ορίσουμε μπορούν να έχουν σχήμα ορθογωνίου (rect), κύκλου (circle) ή πολυγώνου (poly). 2

5 Ο προσδιορισμός του ορθογωνίου γίνεται από τις συντεταγμένες της πάνω αριστερής και κάτω δεξιάς γωνίας (a,b,c,d), του κύκλου από τις συντεταγμένες του κέντρου του και την ακτίνα του (a,b,r) και τέλος του πολυγώνου από τις συντεταγμένες κάθε κορυφής του (a,b,c,d,e,f,...). 3

6 Τα στοιχεία αυτά δίνονται σε pixels και μπορούν να βρεθούν χρησιμοποιώντας ένα από τα πολλά λογισμικά επεξεργασίας εικόνων όπου κουνώντας το ποντίκι μπορείτε να διαβάσετε τις συντεταγμένες κάθε σημείου της εικόνας. Ένας δημοφιλής επεξεργαστής χαρτών εικόνων είναι ο Mapedit που μπορείτε να τον βρείτε στη διεύθυνση αλλά και τα πιο απλά προγράμματα επεξεργασίας εικόνας που δίνονται με τα λειτουργικά συστήματα σας δίνουν την πληροφορία αυτή. 4

7 Η δομή αυτών των εντολών είναι: <MAP NAME="..."> <AREA SHAPE="..." COORDS="..." HREF="..."> <AREA SHAPE="..." COORDS="..." HREF="..."> </MAP> όπου οι... στο NAME αντιστοιχούν, όπως ήδη αναφέραμε, στο όνομα του χάρτη, στο SHAPE συμπληρώνουμε το σχήμα της περιοχής, rect, circle ή poly, στο COORDS βάζουμε τις συντεταγμένες που καθορίζουν το σχήμα και τέλος στο HREF συμπληρώνουμε τη διεύθυνση της ιστοσελίδας που θέλουμε να οδηγηθούμε πατώντας με το ποντίκι στην συγκεκριμένη περιοχή. 5

8 Ας προχωρήσουμε με ένα παράδειγμα. 6

9 Ο παγκόσμιος χάρτης που βλέπετε πιο πάνω είναι μια εικόνα όπου έχουμε ορίσει ένα "χάρτη": κάνοντας κλικ με το ποντίκι σε μια ήπειρο οδηγούμαστε σε μια νέα εικόνα όπου βλέπουμε την ήπειρο που διαλέξαμε. Θα μπορούσαμε να κάνουμε σύνδεση σε άλλο αρχείο html, σε άλλο σημείο της ίδιας της σελίδας ή ακόμα σε κάποια άλλη διεύθυνση του διαδικτύου. Η εικόνα παραπάνω μπήκε με την γνωστή εντολή και τη χρήση του ορίσματος USEMAP="#worldmap" όπου worldmap είναι το όνομα που δίνουμε στον "χάρτη" που ορίζεται παρακάτω: <img src="worldmap.jpg" align="center" usemap="#worldmap" border="0"> 7

10 Ο κώδικας του "χάρτη" που δημιουργήσαμε είναι ο εξής: <map name="worldmap"> <area shape="poly" coords="100,166,90,202,116,246,125,294,143,322,161,325, 149,296,186,241,195,204,137,158,118,154" href="south_america.jpg"> <area shape="circle" coords="504,254,51" href="australia.jpg"> <area shape="poly" coords="227,102,199,141,214,178,254,185,258,228,272,269, 294,267,328,251,340,216,321,199,347,166,337,156,325,161,301,115,277,110,275,114,26 1,107,260,102" href="africa.jpg"> <area shape="rect" coords="33,92,143,155" href="central_america.jpg"> <area shape="rect" coords="9,5,183,91" href="north_america.jpg"> <area shape="poly" coords="232,33,221,64,222,102,264,102,290,109,292,101,287, 93,314,72,314,35,300,29,282,20" href="europe.jpg"> <area shape="poly" coords="313,3,313,72,287,91,325,157,344,154,359,133,375, 138,392,173,467,214,502,199,544,219,506,11,412,1" href="asia.jpg"> </map> 8

11 Ο ορισμός του χάρτη αυτού αντιστοιχεί στον παρακάτω "χωρισμό" των ηπείρων: 9

12 Άσκηση 7: Πληκτρολογήστε τον κώδικα HTML ώστε στην αρχική σελίδα να εμφανίζεται ένα ένθετο πλαίσιο όπου και θα καλείται ένα αρχείο html που θα περιέχει την ακόλουθη εικόνα: 10

13 Στο αρχείο που περιέχει την εικόνα αυτή θα ορίσετε ένα "χάρτη", καθορίζοντας τα τέσσερα πλαίσια της εικόνας (λεπτόνια, κουάρκ, μποζόνια, αλληλεπιδράσεις). Χρησιμοποιείστε κάποιο λογισμικό των Windows για τον προσδιορισμό των pixels. Οι τέσσερις περιοχές θα οδηγούν στις τέσσερις παρακάτω εικόνες: για λεπτόνια, για κουάρκ, για μποζόνια και για αλληλεπιδράσεις. Οπότε, κάνοντας κλικ με το ποντίκι στην περιοχή, για παράδειγμα, των κουάρκ, στην αρχική εικόνα που είναι στο πλαίσιο, θα πρέπει να εμφανίζεται: 11

14 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.