ctxxxxx.html 1 η ΕΡΓΑΣΙΑ: ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (WEB SITE) Ημερομηνία Παράδοσης: Τρίτη 1 Δεκέμβρη 2009 (Η εργασία είναι ατομική!!) 1. Απαιτήσεις εργασίας Θα πρέπει να δημιουργήσετε το web site μιας φανταστικής (ή πραγματικής) εταιρίας. Το site θα έχει στόχο την προβολή πληροφοριών σε σχέση με προϊόντα της εταιρίας. Τα προϊόντα θα πρέπει να είναι χωρισμένα σε τρεις τουλάχιστον θεματικές κατηγορίες. Προσοχή!: Για την ανάπτυξη των ιστοσελίδων του site δεν θα χρησιμοποιήσετε κάποιο εργαλείο ανάπτυξης ιστοσελίδων (web authoring tool), όπως το Microsoft FrontPage ή το Adobe Dreamweaver. Θα πρέπει να χρησιμοποιήσετε έναν απλό επεξεργαστή κειμένου, όπως το Notepad. Σας δίνονται στη συνέχεια εικόνες από το site μιας φανταστικής εταιρίας που εμπορεύεται βιβλία, CDs και DVDs. Η παρακάτω εικόνα παρουσιάζει την κεντρική εικόνα του site (ctxxxxx.html): -1-
H σελίδα που εμφανίζεται στο browser του χρήστη θα πρέπει να έχει τη μορφή που εμφανίζεται στην παραπάνω εικόνα, δηλαδή το περιεχόμενο θα είναι δομημένο σε μορφή HTML πίνακα, με μορφή που φαίνεται στην παρακάτω εικόνα: logo.jpg <κενό> category1.jpg category2.jpg category3.jpg picture.jpg Μήνυμα καλωσορίσματος About us Contact us To πλάτος που καταλαμβάνει κάποιο κελί μπορεί να ρυθμιστεί δίνοντας τιμή στο όρισμα width της ετικέτας <td>, π.χ. η εντολή <td width="400">my text</td> θα δημιουργήσει ένα κελί με περιεχόμενο My text και πλάτος 400 pixels. Τα γραφικά που θα εισάγετε στις σελίδες σας, μπορείτε να τα δημιουργήσετε μόνοι σας με κάποιο λογισμικό επεξεργασίας εικόνας (π.χ. Adobe Photoshop) ή να τα «κατεβάσετε» από το web. Προδιαγραφές: Το περίγραμμα του πίνακα θα είναι αόρατο. Η εικόνα logo.jpg είναι σύνδεσμος προς την κεντρική σελίδα (ctxxxxx.html) Οι εικόνες category1.jpg, category2.jpg και category3.jpg είναι σύνδεσμοι προς τις κεντρικές σελίδες των κατηγοριών προϊόντων (αν θέλετε μπορείτε να εισάγετε συνδέσμους σε μορφή κειμένου, αν και θα ήταν προτιμότερο να είναι σε μορφή εικόνας) Στις δύο κενές γραμμές (rows) του πίνακα, ορίστε χρώμα υποβάθρου (background) της επιλογής σας. Ομοίως και για το κελί που περιλαμβάνει το μήνυμα καλωσορίσματος. Το κείμενο About us θα είναι σύνδεσμος προς μία σελίδα με πληροφορίες για εσάς (αν είναι δυνατόν με φωτογραφία σας). Το κείμενο Contact us θα είναι επίσης μορφοποιημένο ως σύνδεσμος. Η επιλογή του συνδέσμου θα έχει ως αποτέλεσμα το άνοιγμα του προεπιλεγμένου (default) προγράμματος για αποστολή e-mails με συμπληρωμένα τα πεδία to: (με την e- mail διεύθυνσή σας) και subject (με το κείμενο: «Παραγγελία από το <όνομα εταιρίας>»). Η κεντρική σελίδα κάθε κατηγορίας θα μοιάζει όπως αυτή της παρακάτω εικόνας: -2-
Το περιεχόμενο σε κάθε κεντρική σελίδα κατηγορίας δομείται σε μορφή HTML πίνακα, με μορφή που φαίνεται στην παρακάτω εικόνα: logo.jpg <κενό> category1.jpg category2.jpg category3.jpg category.jpg Τίτλος και εικόνα Προϊόν 1 Κείμενο σχετικό με τη συγκεκριμένη κατηγορία Προϊόν 2 Προϊόν 3 Προϊόν 4 About us Contact us Στη δεξιά στήλη περιέχονται τίτλοι των προϊόντων της συγκεκριμένης κατηγορίας που είναι μορφοποιημένοι ως σύνδεσμοι προς σελίδες που περιέχουν αναλυτική παρουσίαση των προϊόντων αυτών. Τα υπόλοιπα στοιχεία του πίνακα έχουν την ίδια λειτουργία που περιγράφηκε παραπάνω. Στις επόμενες εικόνες φαίνονται άλλες δύο εικόνες κεντρικών σελίδων κατηγοριών: -3-
Τέλος, η σελίδα που παρουσιάζει αναλυτικά τα στοιχεία συγκεκριμένων προϊόντων θα μοιάζει όπως αυτή της παρακάτω εικόνας: -4-
Το περιεχόμενο κάθε σελίδας προϊόντος δομείται σε μορφή HTML πίνακα, με μορφή που φαίνεται στην παρακάτω εικόνα: logo.jpg <κενό> category1.jpg category2.jpg category3.jpg product.jpg Συνοπτικά στοιχεία προϊόντος Τίτλος και εικόνα Προϊόν 1 Περιγραφή του συγκεκριμένου προϊόντος Προϊόν 2 Προϊόν 3 Προϊόν 4 About us Contact us Το product.jpg θα είναι μια εικόνα του συγκεκριμένου προϊόντος. Τα υπόλοιπα στοιχεία του πίνακα έχουν την ίδια λειτουργία που περιγράφηκε παραπάνω. Δεν υπάρχει περιορισμός ως προς το είδος του site που θα κατασκευάσετε. Για παράδειγμα, εκτός από το site κάποιας εμπορικής εταιρίας (γραφείο ενοικιάσεως οχημάτων, αντιπροσωπεία αυτοκινήτων, εταιρία που εμπορεύεται αναλώσιμα υπολογιστών,...), θα μπορούσατε να κατασκευάσετε site με συλλογή πληροφοριών για μουσεία, site on-line δημοπρασιών έργων τέχνης, site με πληροφορίες για μουσικά συγκροτήματα, κ.α. -5-
Υπενθυμίζεται ότι για την εμφάνιση ελληνικών χαρακτήρων σε μια html σελίδα, πρέπει να ενσωματώσετε την παρακάτω γραμμή κώδικα μέσα στο <head></head> τμήμα της σελίδας: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 2. Οργάνωση των αρχείων του web site: Για την οργάνωση των αρχείων θα χρησιμοποιήσετε ιεραρχική δομή, δηλαδή θα κατανείμετε τα αρχεία σε ξεχωριστούς καταλόγους με βάση το θεματικό τους περιεχόμενο. Τα ονόματα των αρχείων (html και γραφικά) θα πρέπει να είναι ενδεικτικά του περιεχομένου τους. Τα αρχεία των γραφικών που θα χρησιμοποιήσετε θα τοποθετηθούν σε ξεχωριστό κατάλογο (π.χ. images ). Προσοχή!!!: κατά τον ορισμό των συνδέσμων αλλά και για την εισαγωγή γραφικών θα χρησιμοποιήσετε ΣΧΕΤΙΚΕΣ και όχι απόλυτες αναφορές, διαφορετικά η εργασία δεν θα βαθμολογηθεί! Επίσης, το όνομα της «κεντρικής» σελίδας του web site θα πρέπει να είναι ίδιο με το username σας, π.χ. ct08011.html. 3. Βαθμολόγηση εργασίας Η εργασία σας θα βαθμολογηθεί με βάση το κατά πόσο ικανοποιεί τις απαιτήσεις και προδιαγραφές που αναλύθηκαν στις προηγούμενες παραγράφους αλλά και την παρουσίαση του περιεχομένου, π.χ. το σχεδιασμό των σελίδων που περιλαμβάνουν πληροφορίες για συγκεκριμένα προϊόντα της εταιρίας, τη χρήση γραφικών, κ.α. Θα βαθμολογηθεί επιπλέον η κατασκευή ενός χάρτη εικόνας (image map) Για παράδειγμα, θα μπορούσατε να κατασκευάσετε σε έναν επεξεργαστή εικόνας (π.χ. Photoshop) μια εικόνα-κολάζ προϊόντων (ή να χρησιμοποιήσετε κάποια έτοιμη εικόνα) και κάνοντας κλικ πάνω στο τμήμα της εικόνας που αφορά ένα συγκεκριμένο προϊόν, να ανοίγει η σελίδα του προϊόντος. Αυτό το κολάζ θα μπορούσε να εισαχθεί στην αρχική σελίδα που «φορτώνεται» στη θέση του μηνύματος καλωσορίσματος. Για την εύρεση των συντεταγμένων των ενεργών περιοχών που απαιτούνται για την κατασκευή του χάρτη εικόνας, μπορείτε να χρησιμοποιήσετε κάποιο ειδικό εργαλείο, όπως το MapEdit (http://www.boutell.com/mapedit/) Επίσης, θα βαθμολογηθεί επιπλέον η χρήση επικαλυπτόμενων φύλλων στυλ (Cascading Style Sheets - CSS). Για παράδειγμα, να δημιουργήσετε ένα *.css αρχείο που θα μορφοποιεί όλες τις επικεφαλίδες επιπέδου 1 (<h1>. </h1>) ή τους συνδέσμους (<a> </a>) με τον ίδιο τρόπο σε όλες τις ιστοσελίδες του site. Τέλος, θα συνεκτιμηθούν στη βαθμολογία της εργασίας: Ύπαρξη σχολίων στον HTML κώδικα των ιστοσελίδων σας Στοίχιση κώδικα (οι ετικέτες έναρξης και λήξης να είναι στοιχισμένες η μία κάτω από την άλλη, ώστε ο κώδικας να είναι ευανάγνωστος) Η παράδοση της εργασίας είναι υποχρεωτική και προσμετράει σε ποσοστό 20% της συνολικής βαθμολογίας του μαθήματος. -6-
Σε περίπτωση που γίνουν αντιληπτά κρούσματα αντιγραφών, όσοι έχουν συμμετάσχει σε αυτή δεν θα μηδενιστούν απλά αλλά θα βαθμολογηθούν αρνητικά (-2 μονάδες). 4. Οδηγίες για την παράδοση της εργασίας: Καταληκτική ημερομηνία για την παράδοση της εργασίας είναι η Τρίτη 1/12/2009. Η εργασία είναι ατομική! Η παράδοση θα γίνει ηλεκτρονικά. Θα δημιουργήσετε ένα zip αρχείο που θα περιλαμβάνει όλα τα αρχεία της εργασίας (HTML και γραφικά). Επαληθεύστε ότι το zip αρχείο είναι στη μορφή που πρέπει αποσυμπιέζοντάς το σε κάποιο δικό σας φάκελο (θα πρέπει να αποσυμπιέσει όλα τα αρχεία του site σας, αναπαράγοντας την ιεραρχική του δομή, δηλαδή δημιουργώντας τους ίδιους καταλόγους). Το όνομα του zip αρχείου θα είναι ίδιο με το username σας (π.χ. ct08011.zip). Προσοχή στο μέγεθος των γραφικών: Θα πρέπει να προσέξετε ώστε το zip αρχείο που θα αποστείλετε να μην ξεπερνά τα 700 KB!!! Για να το επιτύχετε αυτό θα πρέπει τα γραφικά που θα ενσωματώσετε στις ιστοσελίδες σας να έχουν μικρό μέγεθος (μικρή ανάλυση και διαστάσεις). Η παράδοση της εργασίας θα πρέπει να γίνει με αποστολή email στο διδάσκοντα (dgavalas@aegean.gr). Στο email θα πρέπει να επισυνάψετε (attachment) το zip αρχείο και το subject του μηνύματος θα πρέπει να είναι της μορφής: <Ονοματεπώνυμο>, Α.Μ.:..., Δικτυακά Πολυμέσα Ι: 1 η εργασία Το email αυτό θα πρέπει να το «κοινοποιήσετε» και στον εαυτό σας (cc: ctxxxxxx@ct.aegean.gr) και να μη το σβήσετε από τη λίστα των αποσταλμένων email σας ( Sent Items ). Καλή επιτυχία! -7-