Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #2η: Ανάλυση, σχεδιασμός & οργάνωση web sites, Πλάνα σεναρίου, Εργαλεία ελέγχου web sites Χειμερινό Εξάμηνο
Web site μαθήματος Ανοίξαμε και σας περιμένουμε!!... http://users.sch.gr/aniros/dp_i.htm http://www.ct.aegean.gr/people/aneiros Τι περιέχει; Νέα (ανακοινώσεις, εκφωνήσεις εργασιών, καταληκτικές ημερομηνίες παράδοσης, βαθμολογίες,...) Θεωρία: διαφάνειες διαλέξεων (pdf) Οι διαφάνειες θα είναι διαθέσιμες πριν από το μάθημα Εργαστήριο: ιαφάνειες που προβάλλονται κατά τη διάρκεια του εργαστηριακού μαθήματος, ασκήσεις που γίνονται στο εργαστήριο, λύσεις,... Βιβλιογραφία: βιβλία σχετικά με το μάθημα στη βιβλιοθήκη Λέσβου & στην ελεύθερη αγορά, πολλά links κατηγοριοποιημένα σε θεματικές ενότητες που καλύπτονται στο μάθημα
Ανάλυση & Σχεδιασμός Web Sites
Ανάλυση απαιτήσεων Στόχος: Κατανόηση και καταγραφή των απαιτήσεων της συγκεκριμένης εφαρμογής Αποτέλεσμα: Ένα έγγραφο που περιγράφει με τρόπο κατανοητό και ξεκάθαρο τα: Γενικό πλαίσιο (context) της εφαρμογής Προφίλ χρηστών Απαιτήσεις (πληροφοριακές, λειτουργικές, ποιοτικές, υλοποίησης) Κριτήρια αποδοχής Πιθανά προβλήματα Οι χρήστες δεν κατανοούν τις δυνατότητες τις τεχνολογίας εν μπορούν να μεταδώσουν τι ακριβώς θέλουν Η ύπαρξη παλιότερης εφαρμογής / διαδικασίας η οποία αντικαθίσταται από την εφαρμογή
Κρίσιμα ερωτήματα Ποιος είναι ο στόχος της εφαρμογής; Ποιο το εύρος της εφαρμογής / περιεχομένου; Πως θα χρησιμοποιηθεί; Ποιοι θα είναι οι χρήστες; Ποια πληροφορία / περιεχόμενο ήδη υπάρχει και σε τι μορφή; Ποιο περιεχόμενο πρέπει να δημιουργηθεί; Ποιος θα παρέχει αυτό το περιεχόμενο; Ποιος ο διαθέσιμος προϋπολογισμός, χρόνος υλοποίησης; Τι υποδομή υλικού / λογισμικού είναι διαθέσιμη; Τι ασφάλεια απαιτείται; Άλλα κρίσιμα στοιχεία;
Επιθυμητά χαρακτηριστικά αποτελέσματος ανάλυσης Ορθότητα Σωστές απαιτήσεις Ακρίβεια Μετρήσιμες απαιτήσεις Ευκρίνεια Απαιτήσεις που δεν επιδέχονται πολλαπλές ερμηνείες Πληρότητα Καταγραφή όλων των συνιστωσών που επηρεάζουν την εφαρμογή Επαληθευσιμότητα Μπορούμε να επιβεβαιώσουμε στο τέλος ότι οι απαιτήσεις έχουν ικανοποιηθεί Συνέπεια εν περιέχονται εσωτερικές αντιφάσεις Ανιχνευσιμότητα Να μπορεί κάποιος να εντοπίσει την προέλευση κάθε απαίτησης Version control
Σχεδιασμός Η ανάλυση καταγράφει τι θέλουμε να υλοποιήσουμε και γιατί. Ο σχεδιασμός περιγράφει το πώς θα υλοποιηθεί. Στόχος είναι η μετατροπή των αποτελεσμάτων της ανάλυσης σε μια περιγραφή (μοντέλο) της εφαρμογής που μπορεί να υλοποιηθεί Σε αντίθεση με την υλοποίηση που είναι μηχανιστική δραστηριότητα, ο σχεδιασμός είναι μια δημιουργική διαδικασία κατά την οποία πολλές εναλλακτικές λύσεις προτείνονται για την ικανοποίηση των ίδιων απαιτήσεων
Οργάνωση Web Sites
Οργάνωση τοποθεσιών παγκόσμιου ιστού (web sites) Όπως και στους παραδοσιακούς τρόπους επικοινωνίας, η σχεδίαση και συγγραφή ιστοσελίδων απαιτεί προκαταρκτική μελέτη Φτωχά οργανωμένες ιστοσελίδες είναι δύσχρηστες, δύσκολες στην αναθεώρηση και επέκταση. Ανατομία ενός web site: Web site: μια συλλογή σελίδων υπερ-κειμένου σε μορφή ιστού (web) Web server: ένας Η/Υ στοinternet που έχει αποθηκευμένα ένα ή περισσότερα web sites (στον Η/Υ αυτό τρέχει ειδικό λογισμικό, π.χ. Apache, IIS, ) Web page (ιστοσελίδα): βασικό συστατικό ενός web site. Αποθηκεύεται σε ένα αρχείο στο δίσκο. Home page (αρχική σελίδα): ηιστοσελίδα«εισόδου» σε ένα web site, περιέχει συνήθως συνδέσμους (links) προς άλλες ιστοσελίδες του site
Οργάνωση web sites: Ιεραρχίες Ο ευκολότερος και συνηθέστερος τρόπος δόμησης εγγράφων στο web (ταιριάζουν με τα on-line έγγραφα και έγγραφα υπερκειμένου Ξεκινάς με μια λίστα κύριων θεμάτων Η επιλογή ενός οδηγεί σε λίστα υπο-θεμάτων ίνονται συνήθως επιλογές για μετακίνηση «προς τα πάνω» για γενικές ή «προς τα κάτω» για πιο ειδικές πληροφορίες Κείμενο Παράδειγμα
Οργάνωση web sites: Γραμμική ή σειριακή οργάνωση Η αρχική σελίδα είναι ο τίτλος ή η εισαγωγή και οι υπόλοιπες σελίδες ακολουθούν με σειριακό τρόπο Υπάρχουν σύνδεσμοι που επιτρέπουν στο χρήστη να μεταβεί στην «επόμενη» ή «προηγούμενη» σελίδα Άκαμπτη δομή που περιορίζει την ελευθερία κινήσεων των αναγνωστών Κατάλληλη για δημοσίευση υλικού με γραμμική οργάνωση ή όταν θέλουμε σκόπιμα να καθοδηγήσουμε τον αναγνώστη π.χ. για ένα online tutorial στο οποίο θέλουμε να καθοδηγήσουμε τον αναγνώστη σε μία βήμα-προς-βήμα μαθησιακή διαδικασία Αρχική Σελίδα
Οργάνωση web sites: Γραμμική οργάνωση με εναλλακτικές διαδρομές Μειώνει την ανελαστικότητα της γραμμικής οργάνωσης επιτρέποντας στο χρήστη να αποκλίνει Υπάρχει μια βασική γραμμική δομή που σε κάποια σημεία διακλαδίζεται Οι εναλλακτικές διαδρομές μπορεί να επανενωθούν ή διατηρήσουν «ανεξάρτητη» πορεία Αρχική Σελίδα Παράδειγμα
Οργάνωση web sites: Συνδυασμός γραμμική και ιεραρχικής οργάνωσης Υπάρχει μια βασική γραμμική οργάνωση αλλά μπορούμε να παραλείψουμε ένα μέρος της μεταβαίνοντας γρήγορα στα σημεία ενδιαφέροντος Ο αναγνώστης μπορεί να μετακινείται «πάνω/κάτω» ή «εμπρός/πίσω» Αρχική Σελίδα Παράδειγμα
Οργάνωση web sites: Ιστός Ομάδα εγγράφων με ελάχιστη (ως ανύπαρκτη) δομή συνολική δομή Οι σελίδες απλά ενώνονται με συνδέσμους χωρίς καμία γραμμικότητα Ο αναγνώστης αφήνεται να περιπλανηθεί σκόπιμα ή άσκοπα μέσα στο περιεχόμενο Ιδανική δομή για πληροφορίες χωρίς ιδιαίτερη μεταξύ τους σχέση ή για να Αρχική Σελίδα ενθαρρυνθεί η «εξερεύνηση» ύσκολος προσανατολισμός (ο πιοεύκολοςτρόποςγιανα μεταβούμε σε μια «προηγούμενη» σελίδα είναι με το πλήκτρο Back του browser), δεν είναι ορατός ο στόχος του site
Πλάνα Σεναρίου (storyboarding)
Πλάνο σεναρίου (storyboarding) Η διαδικασία δημιουργίας μιας συνολικής διάρθρωσης και σκίτσων για την αναπαράσταση της παρουσίασης πριν αρχίσετε να γράφετε τις σελίδες Έννοια «δανεισμένη» από τον κινηματογράφο Περιλαμβάνει τα θέματα που τοποθετούνται σε κάθε σελίδα, βασικές συνδέσεις μεταξύ των σελίδων, ένας πρώτος σχεδιασμός για τα γραφικά που θα χρησιμοποιηθούν και τις θέσεις που θα τοποθετηθούν Βοηθά να αντιλαμβανόμαστε οπτικά ολόκληρη την παρουσίαση και τη μορφή που θα έχει όταν ολοκληρωθεί Ξεχωριστή ανάπτυξη κάθε σελίδας (χωρίς να ενδιαφερόμαστε για τη θέση της στη συνολική δομή ή τη σύνδεσή της με άλλες σελίδες) υνατότητα ανάπτυξης διαφορετικών τμημάτων της παρουσίασης από διαφορετικούς ανθρώπους εν είναι απαραίτητο αν μία από τις μορφές οργάνωσης που αναφέρθηκαν καλύπτει τις ανάγκες ενός site. Απόλυτα απαραίτητο όταν πρέπει να συνδυαστούν διαφορετικά είδη οργανώσεων ή αν υπάρχει πολύ περιεχόμενο και τα διάφορα τμήματά του πρέπει να συνδέονται με περίπλοκους τρόπους.
Πλάνα σεναρίου Αρχική Σελίδα Πως δείχνουν; Απλή μορφή: σελίδες χαρτιού, μία για κάθε ιστοσελίδα, με λίστα θεμάτων Σύνθετη μορφή: κάρτες τοποθετημένες σε πίνακα περιεχομένων που συνδέονται με κλωστές (links) δεμένες σε πινέζες
ημιουργία πλάνου σεναρίου Ποια θέματα θα πάνε σε κάθε σελίδα Γενικός κανόνας: ένα θέμα σε κάθε σελίδα Αν υπάρχουν πολλά θέματα, η διασύνδεση των σελίδων μπορεί να είναι δύσκολη, άρα ομαδοποιούμε κάποια σχετιζόμενα θέματα σε μία σελίδα Καλύτερα αρκετές μετρίου μεγέθους παρά μια τεράστια ιστοσελίδα Ποιες θα είναι οι βασικές μορφές μετακίνησης μεταξύ των σελίδων Βασικοί σύνδεσμοι: προς τα εμπρός, πίσω, πάνω, κάτω ή προς αρχική σελίδα Εναλλακτικές μορφές μετακινήσεων Γλωσσάριο, ευρετήριο όρων, χάρτης δικτυακού τόπου (site map) Τι πληροφορίες θα τοποθετήσουμε στην αρχική σελίδα Η αρχική σελίδα πολύ σημαντική ως σημείο εκκίνησης για την εξερεύνηση του web site Γενική σύνοψη, λίστα συνδέσμων προς άλλα θέματα Αναθεώρηση στόχων Na διατηρούμε υπόψη τους στόχους του site και να διασφαλίζουμε ότι δεν τους επισκιάζουμε με πλεονάζουσες πληροφορίες ή περιεχόμενο
Πακέτα λογισμικού για τη δημιουργία/επισκόπηση πλάνων σεναρίου Σχεδιαστικά προγράμματα (π.χ. Corel, MS Visio, Autocad) με συλλογές από εικονίδια που δημιουργούν ολοκληρωμένα διαγράμματα ή προγράμματα διαχείρισης web pages/sites (π.χ. FrontPage, Dreamweaver) Συλλογή εικόνων του MS Visio Navigation view του MS Frontpage Hyperlinks view του MS Frontpage
Συνηθισμένα λάθη στη σχεδίαση τοποθεσιών Ορφανές σελίδες Παρωχημένες πληροφορίες Άνοιγμα νέων παραθύρων του browser Μετακίνηση σελίδων σε άλλες διευθύνσεις...
Καλές πρακτικές σχεδίασης για τον www (Ι) Τοποθετούμε το όνομα και το λογότυπό μας σε κάθε σελίδα (εκτός από την πρώτη σελίδα) και κάνουμε το λογότυπο σύνδεσμο στην πρώτη σελίδα μας. Γενικά, ποτέ δεν δημιουργούμε συνδέσμους που «δείχνουν» στην ίδια σελίδα που βρίσκονται. Παρέχουμε δυνατότητα αναζήτησης (εξερεύνησης του site) σε περίπτωση που το site περιέχει μεγάλο αριθμό σελίδων. Site map ιαλέγουμε σύντομους και επεξηγηματικούς τίτλους σελίδων ώστε να γίνονται κατανοητοί κύριααπόμιαμηχανήαναζήτησης ομούμε το site έτσι ώστε ο επισκέπτης να μπορεί να ομαδοποιήσει τις πληροφορίες και μια ματιά να προσδιορίζει τι τον ενδιαφέρει και τι όχι. Οργάνωση κειμένου: γενικές πληροφορίες στην αρχή της σελίδας με συνδέσμους προς τις πιο ειδικές που ακολουθούν παρακάτω.
Καλές πρακτικές σχεδίασης για τον www (ΙΙ) Χρησιμοποιούμε φωτογραφίες προϊόντων που πιθανώς διαθέτουμε, αλλά αποφεύγουμε τη χρήση πολλών και «μεγάλων» φωτογραφιών στην ίδια σελίδα. Χρησιμοποιούμε μικρογραφίες φωτογραφιών (thumbnails) ως συνδέσμους σε μεγαλύτερες και λεπτομερείς. Κατά τη δημιουργία thumbnails κάποιες φορές πρέπει να μειώνεται το μέγεθος της αρχικής φωτογραφίας αναλογικά αλλά να διατηρείται ένα τμήμα της που θέλουμε να φαίνεται. ιαφορετικά, τα thumbnails μπορεί να μεταφέρουν πληροφορία δυσανάγνωστη. Χρησιμοποιούμε τίτλους συνδέσμων που δείχνουν που οδηγεί ο κάθε σύνδεσμος πριν τον ακολουθήσει ο επισκέπτης. Σιγουρευόμαστε ότι όλες οι σημαντικές σελίδες είναι προσπελάσιμες από άτομα με ειδικές ανάγκες (κυρίως με προβλήματα όρασης). Κάνουμε ό,τι και οι άλλοι: αν οι περισσότερες τοποθεσίες χρησιμοποιούν ένα συγκεκριμένο τρόπο για την ολοκλήρωση μιας ενέργειας, κάνουμε το ίδιο κι εμείς. Οι χρήστες του www τείνουν να διαμορφώνουν τις συνήθειες και προσδοκίες τους σχετικά με μια τοποθεσία σε άλλες τοποθεσίες παρόμοιου περιεχομένου που επισκέπτονται συχνά.
Εργαλεία ελέγχου Web Sites
Εργαλεία ελέγχου Web sites Ελέγχει ΗΤΜL έγγραφα για συμβατότητα με τις οδηγίες του W3C: http://validator.w3.org Σειρά από τεστ (ταχύτητα φόρτωσης σελίδων, ορθότητας HTML κώδικα, συμβατότητας με browsers, ορθότητας links, : http://www.netmechanic.com/toolbox/html-code.htm Συλλογή εργαλείων για τον έλεγχο ενός web site: http://www.craigcecil.com/checkyoursite.htm Web Page Analyzer, http://www.websiteoptimization.com/services/analyze/ WebSitePulse, http://www.websitepulse.com (Web Server and Web Site Monitoring Service) Συλλογή από web test tools, http://www.softwareqatest.com/qatweb1.html Συλλογή από Link and HTML Test Tools, http://www.aptest.com/resources.html#web-source
NetMechanic Συνοπτικά τα αποτελέσματα του ελέγχου στη σελίδα http://users.sch.gr/aniros/dp_i.htm Λάθη στον HTML κώδικα και προτάσεις βελτιστοποίησης Έλεγχος ταχύτητας φόρτωσης της σελίδας Έλεγχος συμβατότητας σελίδας με διάφορες εκδόσεις browsers Έλεγχος ορθότητας links
NetMechanic (συνοπτικά αποτελέσματα)
NetMechanic (έλεγχος ταχύτητας πρόσβασης)
NetMechanic (έλεγχος ορθότητας HTML κώδικα)
NetMechanic (έλεγχος συμβατότητας με browsers)
NetMechanic (έλεγχος συνδέσμων)