1. (25%) Αναφέρετε πέντε (5) «καλoύς» κανόνες (πρακτικές) σχεδίασης web sites (όχι περισσότερες από δύο γραμμές για κάθε κανόνα)

Transcript

1 Πανεπιστήμιο Αιγαίου Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας Εξετάσεις στο μάθημα «Δικτυακά Πολυμέσα Ι» Φεβρουάριος 2011 Διδάσκων: Αντώνιος Νείρος Οδηγίες: H διάρκεια της εξέτασης είναι 2,5 ώρες. Απαντήσετε και στα 3 θέματα. Οι φοιτητές μπορούν να φέρουν στην εξέταση τα εξής δύο συγγράμματα: "Πλήρες εγχειρίδιο της HTML 4" (Laura Lemay), 2001, εκδ. Γκιούρδας "Οδηγός της JavaScript" (John Pollock), 2 η εκδ./2006, εκδ. Γκιούρδας Δεν επιτρέπονται οποιασδήποτε άλλης μορφής σημειώσεις! ΘΕΜΑ Α (3 μονάδες) 1. (25%) Αναφέρετε πέντε (5) «καλoύς» κανόνες (πρακτικές) σχεδίασης web sites (όχι περισσότερες από δύο γραμμές για κάθε κανόνα) 2. (50%) Γράψτε τον κατάλληλο HTML κώδικα για τις παρακάτω περιπτώσεις, με βάση την εικόνα που ακολουθεί. Θα πρέπει να χρησιμοποιήσετε παντού σχετικές και όχι απόλυτες διαδρομές. C:/ index.html page1.html folder1 image1.jpg page2.html folder2 image2.jpg page3.html a. Εισαγωγή της εικόνας image1.jpg στη σελίδα page2.html που να «δείχνει» στη σελίδα page3.html b. Εισαγωγή της εικόνας image1.jpg στη σελίδα page1.html που να «δείχνει» (να είναι link στη διεύθυνση) c. Εισαγωγή link στην page3.html που να «δείχνει» στην page1.html και να αναγράφει το κείμενο «σελίδα 1».

2 3. (25%) Σας δίνεται η παρακάτω εικόνα (image.jpg): Αν o κύκλος γύρω από τη Λέσβο έχει ακτίνα 19 και κέντρο με συντεταγμένες (x 1, y1) = (297,159), τότε γράψτε τον HTML κώδικα που θα εισαγάγει την εικόνα σε ένα HTML έγγραφο και θα τη διαμορφώσει ως χάρτη εικόνας (image map), έτσι ώστε όταν ο χρήστης κάνει κλικ στον κύκλο να μεταβαίνει στη διεύθυνση ΘΕΜΑ Β (4 μονάδες) 1.(50%) Γράψτε τον HTML κώδικα που θα δημιουργήσει τον πίνακα (table) που φαίνεται στην παρακάτω εικόνα: Πίνακας με πάχος περιγράμματος=1 έντονα γράμματα στοίχιση κέντρο Δεξιά στοίχιση two three one four Italics γράμματα Κατακόρυφη στοίχιση προς τα κάτω

3 2. (50%) Γράψτε σενάριο Javascript που θα αρχικά θα ζητάει από το χρήστη να πληκτρολογήσει κάποιο κείμενο και στη συνέχεια θα τυπώνει το κείμενο αυτό πέντε φορές με μέγεθος που φθίνει. ΘΕΜΑ Γ (3 μονάδες) 1. (50%) Εξηγήστε την ακριβή λειτουργία του παρακάτω σεναρίου Javascript (το μέγιστο, σε 15 γραμμές):

4 <script language="javascript"> var str="this Is The Test Text!"; document.write(str + " - Length: <b>" + str.length + "</b><br>") var search_str = window.prompt("search for string", "") var pos = str.indexof(search_str) if (pos == -1) document.write("string " + search_str + " not found <br>") else document.write("string " + search_str + " found at position <b>" + pos + "</b><br>") document.write("string " + str + " in small letters: <b>" + str.tolowercase() + "</b><br>") document.write("string " + str + " in capitals: <b>" + str.touppercase() + "</b><br>") document.write(str.bold().italics() + "<br>") </script> 2. (50%) Γράψτε τον Javascript κώδικα ο οποίος, όταν πατιέται το πλήκτρο /, θα εκτελεί τη διαίρεση του αριθμού που έχει συμπληρώσει ο χρήστης στο πεδίο num1 διά τον αριθμό του πεδίου num2 και θα εμφανίζει το αποτέλεσμα στο πεδίο result. Θα πρέπει να λάβετε υπόψη σας την περίπτωση διαίρεσης με τον αριθμό 0, ώστε να εμφανίζεται στο χρήστη προειδοποιητικό μήνυμα (alert) num1 num2 result Καλή επιτυχία!!!

5 Λύσεις των θεμάτων ΘΕΜΑ Α 1. Το web site πρέπει να είναι ευανάγνωστο Καλή επιλογή χρωμάτων κειμένου και υποβάθρου, μεγέθους γραμματοσειράς, στοίχισης Το web site πρέπει να είναι εύκολο στην πλοήγηση Τα links πρέπει να είναι ξεκάθαρα στους επισκέπτες, πλήκτρα και γραφικά πλοήγησης με κατάλληλες & ευανάγνωστες ετικέτες, επιλογή χρωμάτων για τα links με τα οποία οι επισκέπτες είναι εξοικειωμένοι Το web site πρέπει να εντοπίζεται εύκολα όταν αναζητείται Επιτυχημένη προώθηση του site σε search engines, directories και με links σε άλλα web sites Πρέπει να υπάρχει συνέπεια στη διάταξη και σχεδιασμό όλων των ιστοσελίδων του site Ta γραφικά, οι μπάρες πλοήγησης, γραμματοσειρά, header & footer πρέπει να έχουν την ίδια εμφάνιση σε όλες τις σελίδες του site Οι ιστοσελίδες πρέπει να «φορτώνονται» γρήγορα (quick download) Έρευνες έχουν δείξει ότι το ενδιαφέρον των επισκεπτών για κάποιο site μειώνεται όταν χρειάζεται να περιμένουν περισσότερο από 15 sec για να κατεβάσουν την πλειονότητα των σελίδων του 2. a. <a href="../folder2/page3.html"><img src="image1.jpg"></a> b. <a href=" src="folder1/image1.jpg"></a> c. <a href="../page1.htm"> σελίδα 1 </a> 3. <img src="image.jpg" usemap="#gr_map"> <map name="gr_map"> <area shape="circle" coords="297,159,19" href=" </map> ΘΕΜΑ B 1. <table border=1> <tr> <td rowspan=2><i>one</i></td> <td align=center><b>two</b></td> <td align=right>three</td> </tr> <tr> <td colspan=2 valign=bottom>four</td> </tr> </table>

6 2. <script language="javascript"> var message = window.prompt("fill in your message",""); for (i=1; i<=5; i++) document.writeln("<h" + i + ">" + message + "</h" + i + ">"); </script> ΘΕΜΑ Γ 1. Στην αρχή ζητάει από το χρήστη να πληκτρολογήσει ένα κείμενο. Στη συνέχεια αναζητάει αυτό το κείμενο μέσα στο αλφαριθμητικό «This Is The Test Text!». Αν το βρει τότε εμφανίζει τα εξής: This Is The Test Text! Length:22 String is found at position # (όπου # είναι η θέση στην οποία βρέθηκε το κείμενο που έδωσε ο χρήστης) String This Is The Test Text! in small letters: this is the test text! String This Is The Test Text! in capitals: THIS IS THE TEST TEXT! This Is The Test Text! Εάν δεν βρει το κείμενο που έδωσε ο χρήστης τότε εμφανίζει τα ίδια εκτός από την δεύτερη γραμμή όπου εμφανίζει το εξής κείμενο: String $ not found (όπου $ είναι το string που έδωσε ο χρήστης). 2. <SCRIPT language=javascript> function sum() { var n1 = parseint(document.calc.num1.value); var n2 = parseint(document.calc.num2.value); if (n2!=0) document.calc.result.value = n1 / n2; else alert('the calculation can not be done'); } </SCRIPT>