Κεφάλαιο 1: Διαδίκτυο και Παγκόσμιος Ιστός (Web) 1.1. Διαδίκτυο (Internet) και Παγκόσμιος Ιστός (Web): Δύο διακριτές έννοιες 1.1.1. Διαδίκτυο: Διαδίκτυο είναι ένα παγκόσμιο δίκτυο ηλεκτρονικών υπολογιστών που (δια)συνδέει άλλα δίκτυα. Ο αντίστοιχος αγγλικός όρος Internet προκύπτει από τη σύνθεση των λέξεων inter-network. Στην πιο εξειδικευμένη και περισσότερο χρησιμοποιούμενη μορφή, με τους όρους Διαδίκτυο ή Ίντερνετ περιγράφεται το παγκόσμιο πλέγμα διασυνδεδεμένων υπολογιστών περιλαμβανομένων και των υπηρεσιών και πληροφοριών που παρέχει στους χρήστες του. Οι χρήστες του Διαδικτύου μπορούν εύκολα και γρήγορα να περιηγηθούν σε μια τεράστια βάση πληροφοριών, να αποστείλουν και να λάβουν αρχεία, να κάνουν χρήση της ηλεκτρονικής αλληλογραφίας, και γενικά να χρησιμοποιήσουν ένα πλήθος υπηρεσιών που έχουν στη διάθεση τους. Το Διαδίκτυο χρησιμοποιεί την μεταγωγική μετάδοση πακέτων (packet switching) και το βασικό πρωτόκολλο επικοινωνίας TCP/IP (Transmission Control Protocol/Internet Protocol). Κάθε πληροφορία που ταξιδεύει στο διαδίκτυο, διακινείται δια μέσου μιας ποικιλίας από «γλώσσες» γνωστές ως πρωτόκολλα. 1.1.2. Παγκόσμιος Ιστός Ο Παγκόσμιος Ιστός (World Wide Web ή WWW ή Web ή Παγκόσμιας εμβέλειας ιστός ή και απλά Ιστός) είναι ένα κατανεμημένο πληροφοριακό σύστημα οργάνωσης και πρόσβασης πληροφοριών που υλοποιεί τις βασικές αρχές οργάνωσης του υπερκειμένου. Ως πληροφοριακό σύστημα παρέχει συγκεκριμένο μοντέλο δεδομένων το οποίο βασίζεται σε κόμβους και υπερσυνδέσμους. Δημιουργήθηκε στα τέλη της δεκαετίας του 1980. 1.1.3. Παγκόσμιος Ιστός VS Διαδίκτυο Ο όρος Παγκόσμιος Ιστός συνήθως θεωρείται συνώνυμο του όρου διαδίκτυο, παρόλο που αποτελούν δύο διακριτές έννοιες. Ο Παγκόσμιος Ιστός είναι ένα μοντέλο διαμοίρασης πληροφορίας (σε οποιαδήποτε ψηφιακή μορφή, αλλά κυρίως σε HTML σελίδες) που χρησιμοποιεί το Διαδίκτυο ως υποδομή για να παρέχει κατανεμημένη οργάνωση και πρόσβαση των πληροφοριών. Για την διακίνηση της πληροφορίας ο Ιστός χρησιμοποιεί το HTTP πρωτόκολλο, που είναι μία μόνο από τις «γλώσσες» που μιλιούνται στο Διαδίκτυο. Χωρίς το διαδίκτυο και τις υπηρεσίες που αυτό παρέχει, ο Παγκόσμιος Ιστός δεν μπορεί να λειτουργήσει, αλλά από την άλλη μεριά ο Ιστός αποτελεί το μεγαλύτερο, το δημοφιλέστερο και το ταχύτερα αναπτυσσόμενο κομμάτι του Διαδικτύου. 1.1.4. TCP/IP To TCP/IP είναι μια συλλογή πρωτοκόλλων επικοινωνίας στα οποία βασίζεται το Διαδίκτυο αλλά και μεγάλο ποσοστό των εμπορικών δικτύων. Η ονομασία TCP/IP προέρχεται από τις συντομογραφίες των δυο κυριότερων πρωτοκόλλων που περιέχει: • • το TCP ή Transmission Control Protocol (Πρωτόκολλο Ελέγχου Μετάδοσης) και το IP ή Internet Protocol (Πρωτόκολλο Διαδικτύου). __________________________________________________________________________________________ 1 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 1.1.5. IP Διευθύνσεις και Δρομολόγηση Μία διεύθυνση IP (IP address), είναι ένας μοναδικός αριθμός που χρησιμοποιείται από συσκευές για τη μεταξύ τους αναγνώριση και συνεννόηση σε ένα δίκτυο υπολογιστών που χρησιμοποιεί το Internet Protocol (IP) πρότυπο. Σε μια δεδομένη στιγμή, κάθε συσκευή που ανήκει στο δίκτυο - όπως δρομολογητές (routers), υπολογιστές, time-servers, εκτυπωτές, μηχανές για fax μέσω Internet, και ορισμένα τηλέφωνα - μπορεί να έχει μία ή και περισσότερες μοναδικές παγκοσμίως IP διευθύνσεις. Μία διεύθυνση IP μπορεί να θεωρηθεί το αντίστοιχο μιας διεύθυνσης κατοικίας ή ενός αριθμού τηλεφώνου. Όπως κάθε διεύθυνση κατοικίας και αριθμός τηλεφώνου αντιστοιχούν σε ένα και μοναδικό κτίριο ή τηλέφωνο, μια IP address χρησιμοποιείται για τη μοναδική αναγνώριση ενός υπολογιστή ή άλλης συσκευής που συνδέεται στο δίκτυο. Μια διεύθυνση IP μπορεί να "μοιράζεται" σε πολλές συσκευές-πελάτες είτε επειδή αυτές είναι μέρος ενός shared hosting web server environment, είτε λόγω ενός proxy server (π.χ. ενός Παροχέα Υπηρεσιών Διαδικτύου (ISP) ή μιας υπηρεσίας για εξασφάλιση ανωνυμίας) που λειτουργούν ως μεσολαβητές. Στην τελευταία περίπτωση (χρήση διακομιστή μεσολάβησης) η πραγματική διεύθυνση IP μπορεί να αποκρύπτεται από το διακομιστή που δέχεται την αίτηση. Οι IP διευθύνσεις γράφονται ως μια ακολουθία από τέσσερις δεκαδικούς αριθμούς που παίρνουν τιμές από 0 έως 255 (για παράδειγμα 135.104.4.101). Οι διευθύνσεις αυτές διαβάζονται από αριστερά προς τα δεξιά, με τα αριστερά κομμάτια να υποδηλώνουν την κατηγορία και τη διεύθυνση του δικτύου, και τα δεξιά κομμάτια να δείχνουν τη διεύθυνση της συσκευής στο συγκεκριμένο δίκτυο. 1.1.6. DNS: Domain Name Service To DNS είναι ένα σύστημα με το οποίο οι δύσκολες IP διευθύνσεις αντιστοιχίζονται σε ονόματα για να μπορούν να απομνημονεύονται ευκολότερα από τους ανθρώπους. Για παράδειγμα η διεύθυνση 84.205.255.67 αντιστοιχίζεται στο όνομα www.ypes.gr. Τα domain names, όπως και οι IP διευθύνσεις που αναπαριστούν, είναι μοναδικά, έχουν μια ιεραρχία και διαβάζονται από αριστερά προς τα δεξιά. Αντίθετα όμως με τις IP διευθύνσεις οι DNS διευθύνσεις γίνονται πιο συγκεκριμένες όταν διαβάζονται με φορά προς τα αριστερά. Το αριστερότερο κομμάτι είναι το όνομα της συσκευής και χωρίζεται με τελείες από το όνομα του subdomain και του domain. Για παράδειγμα ο υπολογιστής με domain name spartacus.hpclab.ceid.upatras.gr δηλώνει έναν υπολογιστή που βρίσκεται στην Ελλάδα (.gr), στο Πανεπιστήμιο Πατρών (upatras) στο τμήμα Μηχανικών Η/Υ και Πληροφορικής (ceid), στο εργαστήριο HPCLab και το όνομα του υπολογιστή είναι spartacus. To DNS σύστημα καθορίζει συγκεκριμένες τιμές για το πλέον σημαντικό τμήμα, το οποίο λέγεται κορυφαίο επίπεδο του DNS. Οι τιμές αυτές είναι: • • • • • • • • com: Εμπορικοί οργανισμοί - εταιρίες edu: Εκπαιδευτικά ιδρύματα (US) gov: Κρατικοί - Κυβερνητικοί Οργανισμοί mil: Στρατιωτικοί Οργανισμοί net: Μεγάλα κέντρα δικτυακής υποστήριξης int: Διεθνείς Οργανισμοί org: Άλλοι οργανισμοί, εκτός των παραπάνω κωδικός χώρας, π.χ. gr, fr, uk: μια χώρα __________________________________________________________________________________________ 2 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 1.2 Βασικές εφαρμογές διαδικτύου 1.2.1 Ηλεκτρονικό Ταχυδρομείο (Email) Το πρώτο email στάλθηκε το 1972, και σήμερα αποτελεί την δεύτερη πιο δημοφιλή υπηρεσία του Διαδικτύου. Το ηλεκτρονικό ταχυδρομείο είναι μια store and forward μέθοδος για την σύνθεση, αποστολή, αποθήκευση και λήψη μηνυμάτων (είτε απλού κειμένου, είτε πολυμεσικών αρχείων). Τα βασικότερα πρωτόκολλα που βασίζεται το email είναι το SMTP, το ΡΟΡ3 και το ΙΜΑΡ. 1.2.2 Απομακρυσμένη πρόσβαση (Telnet) Με τη βοήθεια ειδικών προγραμμάτων όπως το telnet, Secure Shell, κά οι χρήστες του Διαδικτύου έχουν την δυνατότητα να συνδεθούν σε έναν απομακρυσμένο υπολογιστή όπου διατηρούν έναν λογαριασμό χρήστη και να δουλέψουν σε αυτόν σαν να ήταν εκεί. Έτσι θα μπορούσε κάποιος να ξεκινήσει ή να σταματήσει ένα διακομιστή από το σπίτι του, να τρέξει ένα πρόγραμμα σε έναν ισχυρό παράλληλο υπολογιστή που βρίσκεται στην Ιαπωνία, κλπ. εφόσον πάντα έχει το κατάλληλο κωδικό που απαιτείται. Πολλά σύγχρονα υπολογιστικά συστήματα δεν επιτρέπουν την απομακρυσμένη πρόσβαση για θέματα ασφάλειας. 1.2.3 Μεταφορά αρχείων (FTP) To File Transfer Protocol (FTP), (Πρωτόκολλο Μεταφοράς Αρχείων) είναι ένα ευρέως χρησιμοποιούμενο πρωτόκολλο στο Διαδίκτυο. Ο υπολογιστής που τρέχει εφαρμογή FTP client μόλις συνδεθεί με τον server μπορεί να εκτελέσει ένα πλήθος διεργασιών όπως ανέβασμα αρχείων στον server, κατέβασμα αρχείων από τον server, μετονομασία ή διαγραφή αρχείων από τον server κ.ο.κ. Το πρωτόκολλο είναι ένα ανοιχτό πρότυπο. Είναι δυνατό κάθε υπολογιστής που είναι συνδεδεμένος σε ένα δίκτυο, να διαχειρίζεται αρχεία σε ένα άλλο υπολογιστή του δικτύου, ακόμη και εάν ο δεύτερος διαθέτει διαφορετικό λειτουργικό σύστημα. To FTP διαφέρει από τις άλλες εφαρμογές Διαδικτύου, επειδή δημιουργεί δύο συνδέσεις μεταξύ πελάτη και διακομιστή. Η πρώτη χρησιμοποιείται για τη μεταφορά των δεδομένων και η δεύτερη για τον έλεγχο της επικοινωνίας. 1.2.4 Παγκόσμιος Ιστός (HTTP) Ο Παγκόσμιος Ιστός είναι μια υπηρεσία του Διαδικτύου, αποτελεί όμως το μεγαλύτερο, το δημοφιλέστερο και το ταχύτερα αναπτυσσόμενο κομμάτι του. Συγκεκριμένα, είναι ένα κατανεμημένο πληροφοριακό σύστημα οργάνωσης και διάχυσης πληροφοριών που υλοποιεί τις βασικές αρχές οργάνωσης του υπερκειμένου. Είναι το πιο απλό και εύχρηστο μέσο για την ανάκτηση του τεράστιου όγκου πληροφοριών που διατίθεται σήμερα μέσω του Διαδικτύου. Χρησιμοποιεί το πρωτόκολλο HTTP (Hypertext Transfer Protocol). __________________________________________________________________________________________ 3 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 1.3 Πρωτόκολλο HTTP To HTTP είναι η κύρια μέθοδος που χρησιμοποιεί ο Παγκόσμιος Ιστός για να μεταφέρει δεδομένα ανάμεσα σε έναν εξυπηρετητή και ένα πελάτη. Πριν τον Παγκόσμιο Ιστό και το HTTP, το FTP ήταν το κύριο πρωτόκολλο που χρησιμοποιούνταν για τη μεταφορά αρχείων στο διαδίκτυο. To HTTP είναι ένα απλό, μικρό και γρήγορο πρωτόκολλο. Δεν έχει διαφορετικές καταστάσεις σε αντίθεση με το FTP και χρησιμοποιεί λίγες εντολές. Επίσης χρησιμοποιεί ΜΙΜΕ κω δικοποίηση υποστηρίζοντας έτσι πολλαπλά formats αρχείων. To HTTP είναι ένα πρωτόκολλο πελάτη/εξυπηρετητή και ακολουθεί το μοντέλο αίτησης/απόκρισης. Η λειτουργία του βασίζεται στη σύνδεση ενός HTTP πελάτη (συνήθως είναι ένας φυλλομετρητής Παγκόσμιου Ιστού - Web browser) με έναν HTTP εξυπηρετητή (συνήθως είναι ένας εξυπηρετητής Παγκόσμιου Ιστού αλλά μπορεί να είναι ένας proxy ή ένας gateway εξυπηρετητής) χρησιμοποιώντας ένα URL και απαιτώντας κάποιο πόρο, όπως ένα HTML αρχείο. Τα δεδομένα που μεταφέρονται είναι σπασμένα σε δύο κομμάτια, στα κυρίως δεδομένα (είναι σε ΜΙΜΕ format) και στις πληροφορίες που είναι απαραίτητες για τη μεταφορά ανάμεσα στον πελάτη και τον εξυπηρετητή. Παραδοσιακά η «συνομιλία» ανάμεσα στον πελάτη και τον εξυπηρετητή χρησιμοποιεί την TCP θύρα 80, παρόλα αυτά μπορούν να χρησιμοποιηθούν και άλλες θύρες. Η έκδοση του HTTP που αυτή τη στιγμή χρησιμοποιείται είναι η HTTP 4.1 (http://www.w3.org/Protocols/HTTP/), η οποία και υποστηρίζεται από το σύνολο των εξυπηρετητών καθώς και των φυλλομετρητών Παγκόσμιου Ιστού. 1.4 Uniform Resource Locators – URLs Κάθε ιστοσελίδα χαρακτηρίζεται με μοναδικό τρόπο από τη διεύθυνση της, ή αλλιώς το URL (Uniform Resource Locator) της. Όταν λέμε URL ουσιαστικά εννοούμε μία διεύθυνση ενός πόρου του Web (web resource), π.χ. μια εικόνα. Είναι παρόμοιο με το όνομα ενός αρχείου αλλά κρατάει και επιπλέον πληροφορία σχετικά με το όνομα του εξυπηρετητή, καθώς και το είδος του πρωτοκόλλου που αυτός χρησιμοποιεί. Μερικές φορές κρατάει πληροφορία ακόμα και για τον χρήστη καθώς και παραμέτρους σχετικά με το πρωτόκολλο. Οι ιστοσελίδες (Web pages) χρησιμοποιούν τα URLs για να συνδεθούν με άλλες σελίδες. Εκτός από αυτό τα URLs περιέχουν και πολλές άλλες δημοφιλείς δικτυακές εντολές όπως δείκτες προς FTP αρχεία, μηνύματα του Usenet, αναζητήσεις μέσω Gopher κλπ. Όλες αυτές οι πληροφορίες υπήρχαν βέβαια και πριν υπάρξουν τα URLs, αλλά αυτά είναι που κάνουν τόσο εύκολη την χρησιμοποίηση της πληροφορίας. Αυτά είναι που επέτρεψαν την εύκολη χρήση εντολών βασισμένων σε υπερκείμενο (hypertext). To URL υποδιαιρείται στα ακόλουθα κομμάτια: <scheme>:<scheme-specific name> Παράδειγματα http:// www.google.gr/ ftp:// ftp.microsoft.com http:// www.oeek.gr/index2.php Όπου <scheme> είναι το πρωτόκολλο ή σχήμα (scheme) που χρησιμοποιείται (http, ftp κλπ.). το <scheme-specific name> περιέχει το όνομα διακομιστή (domain name) και περιλαμβάνει (ή υποδηλώνει) τη διαδρομή της συγκεκριμένης ιστοσελίδας (π.χ. index2.php) __________________________________________________________________________________________ 4 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 2. Θεμελιώδη συστατικά του Web 2.1. Μοντέλο πελάτη - διακομιστή (client - server) Ο συνδυασμός του υλικού δικτύωσης και του λογισμικού πρωτοκόλλων δίνει ως αποτέλεσμα μια υποδομή επικοινωνιών γενικής χρήσης. Σε κάθε επικοινωνία πρέπει να συμμετέχουν δύο προγράμματα -εφαρμογές: • η μία εφαρμογή (εφαρμογή - πελάτης) εγκαινιάζει την επικοινωνία και • η άλλη (εφαρμογή - διακομιστής) την αποδέχεται. Μεταξύ ενός πελάτη και ενός διακομιστή, μπορούν να μεταβιβάζονται πληροφορίες προς οποιαδήποτε από τις δύο κατευθύνσεις ή και προς τις δύο. Συνήθως, ένας πελάτης στέλνει μια αίτηση (request) σε ένα διακομιστή και εκείνος με τη σειρά του στέλνει μια απόκριση (response). Τα μηνύματα που ανταλλάσουν πελάτης και διακομιστής θα πρέπει να είναι σύμφωνα με το πρωτόκολλο επιπέδου εφαρμογής που υλοποιούν (π.χ. το HTTP για Web Clients και Web Servers). Ένας μόνο υπολογιστής κατηγορίας διακομιστή μπορεί να παρέχει πολλές υπηρεσίες ταυτόχρονα. Για κάθε υπηρεσία χρειάζεται ένα ξεχωριστό πρόγραμμα - διακομιστής. Η εκτέλεση πολλών διακομιστών στον ίδιο υπολογιστή είναι πρακτικά χρήσιμη, επειδή ένας διακομιστής δεν καταναλώνει υπολογιστικούς πόρους όσο περιμένει για μια αίτηση 2.2. Η πλευρά του Πελάτη Ιστού (Web Browser) Γενικά, ένας Πελάτης Ιστού (Web Client) είναι ένα πρόγραμμα που μπορεί να στείλει μια HTTP αίτηση σε ένα Διακομιστή Ιστού και να επεξεργαστεί την HTTP απόκριση που θα δεχτεί. Οι Web Browsers (ή πρόγραμμα περιήγησης Ιστού) που τρέχουν σε υπολογιστές είναι η πιο κοινή μορφή Web Client. Υπάρχουν όμως πολλές άλλες μορφές, όπως browsers σε κινητά τηλέφωνα. Επιπλέον, υπάρχουν κάποιοι Web Clients που δεν σχεδιάσθηκαν για να χρησιμοποιηθούν απευθείας από ανθρώπους, όπως είναι τα προγράμματα που χρησιμοποιούν οι μηχανές αναζήτησης (και δυστυχώς οι email spammers) για να συλλέγουν όλες τις σελίδες του Ιστού. Σε αυτή την ενότητα θα εστιάσουμε στους παραδοσιακούς Web Browsers. Αξιοσημείωτοι web browsers είναι: • Internet Explorer • Mozilla Firefox • Google Chrome • Opera • Safari 2.3. Βασικές λειτουργίες Web Browser Όλοι οι web browsers έχουν κάποιες κοινές βασικές λειτουργίες. (πχ. η status bar εμφανίζει μηνύματα και εικόνες σχετικά με την κατάσταση του browser. Οι περισσότεροι σύγχρονοι web browsers παρέχουν τη δυνατότητα στους χρήστες τους να προσαρμόζουν το γραφικό περιβάλλον του browser στις ανάγκες τους και να προσθέτουν επιπλέον χαρακτηριστικά (τα λεγόμενα add-ons) εφόσον το επιθυμούν (π.χ. Google toolbar) Η βασική εργασία ενός browser είναι να κάνει HTTP αιτήσεις σε web servers για λογαριασμό του χρήστη. Όταν ο χρήστης πληκτρολογήσει ένα URL και πατήσει enter ο browser πρέπει να κάνει μια σειρά __________________________________________________________________________________________ 5 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) από ενέργειες: 1. Να μορφοποιήσει το URL ως μια έγκυρη HTTP αίτηση. 2. Αν ο server έχει καθορισθεί με το domain name του και όχι την IP διεύθυνση του, τότε να ζητήσει από τον τοπικό DNS server να του μεταφράσει το domain name σε IP διεύθυνση. 3. Να εγκαθιδρύσει μια TCP σύνδεση με τον υπολογιστή που τρέχει τον web server. 4. Να στείλει την HTTP αίτηση πάνω από την TCP σύνδεση και να περιμένει για την απάντηση του server. 5. Να εμφανίσει την πληροφορία που δέχεται από τον server. Συνήθως αυτή η πληροφορία είναι ένα HTML έγγραφο το οποίο εμπεριέχει τα ονόματα άλλων αρχείων (όπως εικόνες, CSS, background ήχους, κλπ.). Σε αυτή την περίπτωση ο browser πρέπει να κάνει επιπλέον HTTP αιτήσεις για κάθε ένα από τα επιπλέον αρχεία. Τέλος, αφού έρθουν όλα τα απαραίτητα έγγραφα, ο browser συνθέτει την σελίδα και την εμφανίζει στον χρήστη. Η TCP σύνδεση παραμένει ενεργή για κάποιο εύλογο χρονικό διάστημα (εφόσον το επιτρέπει ο server), έτσι ώστε αν ο χρήστης πατήσει κάποιο σύνδεσμο της σελίδας και ζητήσει κάποια ιστοσελίδα από τον ίδιο server, η HTTP αίτηση να μεταφερθεί ταχύτερα. 2.4. Ασφαλείς web servers Τα HTTP μηνύματα που ανταλλάσσονται μεταξύ ενός web browser και ενός web server, στέλνονται ως απλά αρχεία κειμένου. Αυτά τα μηνύματα ταξιδεύουν μέσω της σουίτας πρωτοκόλλων TCP/IP από πολλούς ενδιάμεσους σταθμούς. Είναι πιθανό κάποιος ενδιάμεσος υπολογιστής να διαβάσει αυτά τα μηνύματα. Ακόμα πιο πιθανό και εύκολο είναι κάποιο αδιάκριτο πρόγραμμα σε έναν υπολογιστή στο τοπικό δίκτυο του client ή του server να διαβάζει όλα τα μηνύματα που κυκλοφορούν στο τοπικό δίκτυο πίσω από το οποιοδήποτε firewall. Έτσι, ειδικά όταν τα δεδομένα που στέλνουμε ή λαμβάνουμε είναι ευαίσθητα (π.χ. αριθμός πιστωτικής κάρτας) τότε θα πρέπει να κρυπτογραφούνται πριν αποσταλούν. Ο κλασικός τρόπος να δείξει ένας server στον browser ότι πρέπει να κρυπτογραφήσει την HTTP αίτηση που θα στείλει, είναι με την χρήση του πρωτοκόλλου https στο URL της αίτησης. Π.χ. https://www.example.org Διάφορα πρωτόκολλα έχουν χρησιμοποιηθεί για την κρυπτογράφηση των HTTP μηνυμάτων. Οι περισσότεροι browsers και servers υποστηρίζουν μία ή περισσότερες εκδόσεις του πρωτοκόλλου SSL καθώς και του νεότερου TLS 2.5. Τύποι Ιστοσελίδων Γενικά όλα τα έγγραφα του Ιστού (δηλ. Ιστοσελίδες) μπορούν να καταταχθούν σε τρεις ευρείες κατηγορίες, σύμφωνα με το πότε και με ποιες τεχνολογίες καθορίζονται τα περιεχόμενα τους: • Στατικές Ιστοσελίδες: Αποτελούνται από αρχεία στον server το περιεχόμενο των οποίων καθορίζεται κατά την συγγραφή τους. Τα αρχεία αυτά αποστέλλονται όπως είναι στον browser. Επειδή τα περιεχόμενα δεν αλλάζουν, κάθε αίτηση για μια στατική ιστοσελίδα έχει ως αποτέλεσμα την ίδια ακριβώς απόκριση. • Δυναμικές Ιστοσελίδες: Οι δυναμικές ιστοσελίδες δεν υπάρχουν έτοιμες στην πλευρά του εξυπηρετητή, αλλά δημιουργούνται κάθε φορά που ένας browser τις ζητάει. Όταν φτάσει η αίτηση του browser, o server τρέχει ένα πρόγραμμα, την έξοδο του οποίου στέλνει στον browser. Έτσι τα περιεχόμενα μιας δυναμικής ιστοσελίδας είναι πολύ πιθανό να διαφέρουν από τη μια αίτηση στην άλλη. Οι δυναμικές ιστοσελίδες πλέον βασίζονται στις τεχνολογίες PHP, ASP και JSP. • Ενεργές Ιστοσελίδες: Στην περίπτωση αυτή η ιστοσελίδα εμπεριέχει κάποιο πρόγραμμα ή κώδικα σε γλώσσα σεναρίου, και ο server στέλνει ως απάντηση στον browser το αντίγραφο των προγραμμάτων, τα οποία εκτελούνται τοπικά στο μηχάνημα του browser. Τα ενεργά αυτά προγράμματα μπορούν να αλληλεπιδρούν με το χρήστη και να αλλάζουν συνεχώς την εμφάνιση ή το περιεχόμενο της Ιστοσελίδας. Παραδείγματα ενεργών ιστοσελίδων αποτελούν εκείνες οι ιστοσελίδες που περιέχουν Javascript, CSS, Java Applets, Flash ή αντικείμενα ActiveX. __________________________________________________________________________________________ 6 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 3. θέματα σχεδιασμού Ιστοσελίδων & Ιστοτόπων 3.1. Υπερκείμενo Ο Ιστός αποτελείται από μία πληθώρα διασκορπισμένων εγγράφων, τα οποία θα αποκαλούμε Ιστοσελίδες (Web pages) ή απλά σελίδες (pages). Οι σελίδες αυτές μπορεί να περιέχουν δεσμούς προς άλλες σελίδες, οι οποίοι ονομάζονται δεσμοί υπερκειμένου (hyperlinks) ή πιο απλά σύνδεσμοι (links). Στην περίπτωση αυτή λέμε ότι οι σελίδες αποτελούνται από υπερκείμενο (hypertext). Ένα σύνολο από ιστοσελίδες που συνήθως συστεγάζονται (φιλοξενούνται) στον ίδιο Web Server και αποτελούν ένα ενιαίο θεματικό σύνολο το ονομάζουμε Δικτυακό Τόπο (Web Site). 3.2. Ο σχεδιαστής ιστοσελίδων (web designer) Ποιο άτομο όμως είναι το πλέον κατάλληλο για να σχεδιάζει ιστοσελίδες; Τί γνώσεις πρέπει να έχει; Τί πρέπει να σπουδάσει; Να ξεκαθαρίσουμε εδώ ότι σε σοβαρές και μεγάλες εταιρείες που σχεδιάζουν ιστοσελίδες ο web designer δουλεύει στο σχεδιασμό της ιστοσελίδας μόνο. Δηλαδή, θα αποφασίσει επιλογή χρωμάτων, φωτογραφιών, που θα τοποθετηθεί το λογότυπο, που θα βρίσκονται τα κουμπιά και πολλά άλλα που θα τα αναλύσουμε πιο κάτω. Αφού ο σχεδιαστής ιστοσελίδων τελειώσει, θα παραδώσει τη δουλεία στον προγραμματιστή για να συνεχίσει με τον κώδικα της ιστοσελίδας και να την τοποθετήσει στο διαδίκτυο, κάτι το οποίο δεν γίνεται σε πιο μικρές εταιρείες. 3.3. Το interface - Γιατί το χρειαζόμαστε; Το interface design είναι η εργονομική και στρατηγική διαδικασία μέσα από την οποία θα παρουσιάσουμε κάποια μέσα με τέτοιο τρόπο ούτως ώστε να μεταδώσουμε κάποια μηνύματα ή πληροφορίες Για να μπορεί ο χρήστης μέσα από μια διαδραστική εμπειρία και επικοινωνία να δώσει και να πάρει τις πληροφορίες που χρειάζεται. Να βιώσει κάποια συναισθήματα και να περιπλανηθεί σε ένα περιβάλλον ευχάριστο και οικείο. Εάν η διεπαφή από μέσα είναι άμορφη και ανούσια, δεν υπάρχει λόγος να την εξερευνήσεις και να πάρεις εμπειρίες μέσα από αυτή. Εδώ είναι καλό να αναφέρουμε τα τρία βασικά στάδια στο σχεδιασμό μιας διεπαφής (interface). 1. Η αναγνώριση του κοινού μας και του μηνύματος που θα μεταδώσουμε. Δηλαδή την ηλικία τους, το φύλο, τα ενδιαφέροντά τους, τις γνώσεις που έχουν στην τεχνολογία και προηγούμενες εμπειρίες που βίωσαν με παρόμοιες εφαρμογές. Σημαντικό είναι να καταλάβουμε ποιο «στυλ» θα τους αρέσει και θα νιώσουν άνετα μαζί του. Για παράδειγμα αν περιπλανηθεί κανείς σε ιστοσελίδες με συγκροτήματα Metal μουσικής θα διακρίνει μαύρο φόντο με το λογότυπο του συγκροτήματος στο πάνω μέρος με μια γοτθική γραμματοσειρά, κ.α. 2. Η μελέτη του μέσου που θα παρουσιάζεται η συγκεκριμένη εφαρμογή. Μια εφαρμογή που θα τοποθετηθεί στο διαδίκτυο θα πρέπει να προσέξουμε το μέγεθος των φωτογραφιών και των βίντεο που περιέχει για να μπορεί ο χρήστης να τα βλέπει χωρίς να περιμένει ώρες να φορτώσουν στον υπολογιστή του. Σημαντικό επίσης είναι να λάβουμε υπόψη και τις ταχύτητες του διαδικτύου που έχει το κοινό που πιθανόν να επισκεφτεί την ιστοσελίδα 3. Πόσο χρονικό διάστημα αφιερώνουν στην εφαρμογή για να πάρουν την πληροφορία που χρειάζονται. Μπορεί να ερευνηθεί το θέμα της εφαρμογής μας και με ερωτηματολόγια προς το στοχευόμενο κοινό. Για παράδειγμα, ένας επισκέπτης σε ιστοσελίδα που βρίσκονται όλες οι συναυλίες του μήνα για την πόλη του μπορεί να αφιερώσει περίπου πέντε με εφτά λεπτά για να περιηγηθεί στην ιστοσελίδα, να δει φωτογραφίες από προηγούμενες συναυλίες, να διαβάσει τα νέα του αγαπημένου του τραγουδιστή κτλ. Όταν ο ίδιος χρήστης επισκεφτεί την ιστοσελίδα με τα λεωφορεία της πόλης του για να πάρει πληροφορίες σχετικά με κάποια δρομολόγια ίσως εκεί αφιερώσει ένα με τρία λεπτά και αν δεν μπορέσει να βρει αυτό που χρειάζεται θα αποχωρήσει από την ιστοσελίδα απογοητευμένος έστω και αν η πληροφορία που ήθελε ήταν κάπου κρυμμένη και δεν τη βρήκε. __________________________________________________________________________________________ 7 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 3.4. Τα εργαλεία και η εξέλιξη Ας μη ξεχνάμε ακόμη, ότι απαραίτητα εργαλεία για το σχεδιασμό ιστοσελίδων και ηλεκτρονικών εφαρμογών είναι τα προγράμματα των υπολογιστών. Σήμερα τα βασικότερα είναι το Photoshop, Flash, Dreamweaver, Director, FrontPage. Η τεχνολογία αναβαθμίζεται με τόσο γοργούς ρυθμούς, που κάποιος επαγγελματίας πρέπει να την παρακολουθεί και να ενημερώνεται για αυτήν ανελλιπώς. Ειδικά σε αυτόν το κλάδο. Μπορεί να βγει ένας νέος πλοηγητής όπως π.χ. ο Firefox και να μην μπορεί να διαβάσει ιστοσελίδες ή να τις παραμορφώνει όταν είναι φτιαγμένες από κάποιο κώδικα παλιάς έκδοσης. Μαζί με την εξέλιξη της τεχνολογίας έχουμε και την απαίτηση των διαδικτυακών χρηστών για πιο πλούσιες εμπειρίες. Δεν είναι οι ίδιοι που πριν από μερικά χρόνια χρησιμοποιούσαν το διαδίκτυο για να βρουν μόνο πληροφορίες. Όταν μιλάμε για σχεδιασμό ιστοσελίδων πριν παραδώσουμε τη δουλεία πρέπει πάντοτε να ελέγχουμε ότι έχουμε το ίδιο αποτέλεσμα και σε Windows και σε Linux και σε Macintosh. 3.5. Κώδικας HTML και αυτόματα προγράμματα Ο χρυσός κανόνας της μηχανικής αναφέρει πως "ό,τι κερδίζουμε σε δρόμο το χάνουμε σε δύναμη Ανάλογα διλήμματα συναντούμε σε πολλές ανθρώπινες δραστηριότητες και η κατασκευή ιστοσελίδων δεν αποτελεί εξαίρεση μια και η δημιουργία τους μπορεί να επιτευχθεί με δύο πολύ διαφορετικούς τρόπους: • Μέσω προγράμματος: Δηλαδή, να χρησιμοποιηθεί ένα αυτόματο πρόγραμμα όπως τα Dreamweaver FrontPage για να σχεδιαστεί η σελίδα με τρόπο ανάλογο της δημιουργίας ενός εγγράφου στο Word. • Γράφοντας κώδικα: Δηλαδή, να δημιουργηθούν τα πάντα από το μηδέν με τη χρήση κώδικα HTML. Τα πλεονεκτήματα του πρώτου τρόπου είναι: 1. Ταχύτητα εκμάθησης. Ο χρήστης μπορεί να δημιουργήσει τις πρώτες του σελίδες μέσα σε μερικές ώρες. 2. Ταχύτητα λειτουργίας. Ένας δικτυακός τόπος (site) μπορεί να κατασκευαστεί σε πολύ μικρό χρονικό διάστημα. 3. Ταχύτητα ανανέωσης. Το πρόγραμμα φροντίζει για την αυτόματη ενημέρωση των ιστοσελίδων του server με όλες τις αλλαγές που έχουν γίνει μετά την τελευταία ανανέωση. Τα πλεονεκτήματα του δεύτερου τρόπου είναι: 1. Σελίδες που φορτώνουν πιο γρήγορα. Τα αυτόματα προγράμματα τοποθετούν συχνά άχρηστο κώδικα που μπερδεύει τον πλοηγητή και καθυστερεί την εμφάνιση της σελίδας (π.χ. table rendering). 2. Μεγαλύτερη αξιοπιστία. Όπως κάθε λογισμικό, έτσι και τα προγράμματα κατασκευής σελίδων δεν είναι 100% WYSIWYG (What you see is what you get). Το τελικό αποτέλεσμα που μας παρουσιάζουν λοιπόν δεν είναι πάντοτε ακριβώς το ίδιο με αυτό που θα δει ο επισκέπτης της σελίδας μας. 3. Εξυπνότερη σχεδίαση. Μας είναι ευκολότερο να δημιουργήσουμε σελίδες που θα προσαρμόζονται αυτόματα στις ιδιαιτερότητες της οθόνης κάθε χρήστη (π.χ. χρησιμοποιώντας ποσοστά αντί για απόλυτες τιμές στο πλάτος των πινάκων). 4. Καλύτερος έλεγχος του αποτελέσματος. Κάθε αυτόματο πρόγραμμα αποτελεί ουσιαστικά έναν μεταφραστή που μετατρέπει τη σχεδίαση και τις επιθυμίες μας σε γλώσσα HTML. Καμία μετάφραση όμως δεν είναι άψογη (ειδικά αν γίνεται από υπολογιστή) και πολλά σημαντικά στοιχεία κινδυνεύουν να απαλειφθούν από το τελικό αποτέλεσμα. 5. Υψηλότερη ευελιξία. Μπορούμε να χρησιμοποιήσουμε το σύνολο των δυνατοτήτων της γλώσσας HTML, ενώ κάθε αυτόματο πρόγραμμα υποστηρίζει μόνο ένα υποσύνολο αυτών. 6. Ευκολότερη επίλυση προβλημάτων (debugging). Επειδή κατανοούμε απόλυτα τις ιδιομορφίες και τα χαρακτηριστικά της σελίδας που δημιουργήσαμε, μπορούμε να βρούμε ευκολότερα και να διορθώσουμε τα όποια προβλήματα εμφανιστούν σε αυτήν (π.χ. ασυμβατότητα με κάποιους πλοηγητές). 7. Επέκταση σε άλλα γνωστικά αντικείμενα. Όποιος γνωρίζει κώδικα HTML μπορεί πολύ ευκολότερα να κατανοήσει και να αξιοποιήσει άλλες τεχνολογίες όπως XML, scripting κ.λπ. Οι περισσότεροι άνθρωποι προτιμούν τα αυτόματα προγράμματα δημιουργίας σελίδων επειδή τα πλεονεκτήματά τους είναι προφανή και άμεσης απόδοσης. Το γεγονός όμως ότι όλοι οι καλοί επαγγελματίες web designers γνωρίζουν και χρησιμοποιούν τόσο κώδικα όσο και αυτόματα προγράμματα υποδεικνύει τη μεγάλη χρησιμότητα και των δύο προσεγγίσεων. __________________________________________________________________________________________ 8 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 4. Σχεδιασμός ιστοσελίδων 4.1. Βασικά ερωτήματα πριν τον σχεδιασμό ενός site Μέσα από την πλοήγηση σε διάφορα sites επιχειρήσεων, μπορεί εύκολα κανείς να παρατηρήσει σελίδες με κανενός είδους γραφιστική επιμέλεια ή με υπερβολικά πολλά γραφικά και εικόνες, σελίδες που δεν παρέχουν παρά ελάχιστη πληροφόρηση στο χρήστη. Ένας από τους βασικούς λόγους του φαινομένου είναι η έλλειψη σωστής φιλοσοφίας αλλά και σχεδιασμού κατά τη διάρκεια δημιουργίας εταιρικών ιστοσελίδων. Ένας δικτυακός τόπος πρέπει να απαντά σε μερικά απλά αλλά βασικά ερωτήματα: • σε ποιους απευθύνεται • ποιος ο σκοπός της παρουσίασης • σε τι προσδοκά η επιχείρηση από την παρουσία της στο Web. • Τι ύψους επένδυση πρόκειται να κάνει για την ηλεκτρονική προβολή της 4.2. Ο ρόλος της εμφάνισης και της ευχρηστίας σε ένα δικτυακό τόπο Υπάρχουν δύο βασικοί τρόποι προσέγγισης του σχεδιασμού μιας ιστοσελίδας, η γραφιστική μέθοδος και η μέθοδος τεχνικής προσέγγισης. Στη γραφιστική μέθοδο σχεδιασμού, ο σχεδιαστής- γραφίστας δίνει το βάρος της σχεδίασης στην καλαισθησία και στην ψυχολογία του χρήστη Η τεχνική προσέγγιση του σχεδιασμού λαμβάνει υπόψη κανόνες και τεχνικούς περιορισμούς, που οδηγούν στη σχεδίαση ενός εύχρηστου περιβάλλοντος επικοινωνίας με τον επισκέπτη. Μολονότι η καλαισθησία αποτελεί κύριο χαρακτηριστικό στη δημιουργία πολλών web sites, στην επιχειρηματική κοινότητα ο στόχος της εταιρικής παρουσίασης στο Διαδίκτυο εστιάζεται συνήθως (εκτός από την απλή διαφήμιση) στην ενημέρωση των χρηστών και στις ηλεκτρονικές συναλλαγές μεταξύ εταιριών και πελατών ή των εταιριών μεταξύ τους. Εδώ, οι χρήστες διαφέρουν αρκετά από τους πελάτες που επισκέπτονται ένα "φυσικό" κατάστημα. Η αναζήτηση συγκεκριμένης πληροφορίας στο Internet θα πρέπει να ολοκληρώνεται όσο το δυνατόν γρηγορότερα και με τον λιγότερο δυνατό κόπο. Όταν ο χρήστης δεν γνωρίζει τι ακριβώς ψάχνει, τότε η πλοήγηση θα πρέπει να του δίνει τη δυνατότητα να ανακαλύψει κάτι που θα του κεντρίσει το ενδιαφέρον όσο το δυνατόν γρηγορότερα. (Jacob Nielsen www.useit.com). 4.3. Σχεδιάζοντας μία σελίδα Υπάρχει ένα σύνολο κρίσιμων σημείων, τα οποία πρέπει να λαμβάνει υπόψη ο σχεδιαστής κατά τη διαδικασία ανάπτυξης μιας ιστοσελίδας. Τα περισσότερα από αυτά φέρνουν συνήθως σε σύγκρουση τη γραφίστικη και την τεχνική προσέγγιση. Παρακάτω αναφέρονται ενδεικτικά τα κυριότερα από αυτά: 4.3.1. Περιεκτικότητα πληροφορίας Πρέπει ένα αρκετά μεγάλο ποσοστό από την περιοχή της οθόνης να γραφικά του λειτουργικού 30% περικλείει χρήσιμη πληροφορία για τον επισκέπτη. Φαίνεται απλό αλλά ο συστήματος και του browser χώρος που τελικά αφιερώνεται στη χρήσιμη πληροφορία για το χρήστη επιλογές πλοήγησης 30% είναι ελάχιστος.Ο καταμερισμός της χωρητικότητας της οθόνης φαίνεται το κενό μαζί με τα γραφικά και 20% στο διπλανό πίνακα. Ο χώρος αυτός μειώνεται ακόμα περισσότερο σε τις εικαστικές απεικονίσεις 20% περιπτώσεις που πρέπει να προβληθούν διαφημίσεις (banners), με χρήσιμη πληροφορία για το αποτέλεσμα ο επισκέπτης να πρέπει να ψάχνει επί ώρα όλη τη σελίδα για χρήστη να ανακαλύψει τη χρήσιμη γι' αυτόν πληροφορία. Σε εταιρικούς δικτυακούς τόπους, όπου παρέχονται και υπηρεσίες ηλεκτρονικού εμπορίου, το πρόβλημα γίνεται εντονότερο, καθώς βασική απαίτηση του χρήστη είναι να βλέπει όσο το δυνατόν περισσότερα προϊόντα σε μια σελίδα. 4.3.2. Μέγεθος οθόνης Λαμβάνοντας υπόψη ότι οι χρήστες διαθέτουν οθόνες με διαφορετική ανάλυση, είναι καλό να υπάρχει μια εικόνα για τη μέση ανάλυση που χρησιμοποιούν ανά πάσα στιγμή οι περισσότεροι χρήστες στο Διαδίκτυο, και να αξιοποιηθεί ανάλογα κατά το σχεδιασμό των σελίδων. Τέτοια στοιχεία διατίθενται από εταιρίες στατιστικών __________________________________________________________________________________________ 9 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) ερευνών (π.χ. www.statmarket.com). Στο διπλανό πίνακα φαίνεται η παρούσα κατάσταση της ανάλυσης των χρηστών όταν χρησιμοποιούν το Web. Παρόλο που η ανάλυση 800 x 600 πέφτει συνεχώς, δεν μπορεί ακόμα να αγνοηθεί. Είναι λοιπόν χρήσιμο οι σχεδιαστές να χρησιμοποιούν την κατάλληλη ανάλυση για τη δημιουργία σελίδων, ώστε να αποφεύγεται το κατέβασμα (scroll down), εφόσον βέβαια αυτό δεν προκαλείται ούτως ή άλλως από το μήκος της σελίδας (την κάθετη διάταξη του περιεχομένου επί μακρόν). 4.3.3. 1024x768 1280x1024 800x600 1280x800 1152x864 56.15% 15.79% 12.04% 4.09% 3.90% Ταχύτητα πλοήγησης Ταχύτητα Ταχύτητα Προτεινόμενο Ο σημαντικότερος παράγοντας που πρέπει να υπολογίζεται στη Σύνδεσης Μεταφοράς μέγεθος για διαδικασία σχεδίασης ιστοσελίδων είναι η ταχύτητα με την οποία θα (Kbytes/Sec) 10 sec μπορούν οι χρήστες να "κατεβάζουν" το συνολικό περιεχόμενο 7 K/S Modern 56Κ 70 Κ στον υπολογιστή τους. Σύμφωνα με τον διακεκριμένο ερευνητή Robert ISDN 64Κ 8 K/S 80 Κ Β. Miller, όταν το σύστημα αποκρίνεται στο χρήστη μέσα σε 0,1 ADSL 256K 27 K/S 270 K δευτερόλεπτα, ο πρώτος θεωρεί ότι το σύστημα έχει άμεση επικοινωνία και ακαριαία απόκριση. Όταν η απόκριση ολοκληρώνεται μέσα σε ένα δευτερόλεπτο, ο χρήστης αντιλαμβάνεται την καθυστέρηση αλλά είναι ακόμη πλήρως ικανοποιημένος από το χρόνο ανοίγματος της σελίδας. Το μέγιστο χρονικό όριο αναμονής, όπως αποδεικνύεται από στατιστικές έρευνες, φτάνει τα 10 δευτερόλεπτα. Κατά τη διάρκεια των 10 αυτών δευτερολέπτων, καλό είναι να φαίνεται κάποιο σήμα προόδου. Ο διπλανός πίνακας παρουσιάζει το μέγιστο μέγεθος που πρέπει να έχει μια ιστοσελίδα (σε kilobytes), σε σχέση με την ταχύτητα μεταφοράς, έτσι ώστε ο χρόνος αναμονής να μην υπερβαίνει τα 10 δευτερόλεπτα. Σε κάποιες περιπτώσεις σκοπός της επιχείρησης είναι να προβληθεί με τον ομορφότερο και εντυπωσιακότερο δυνατό τρόπο, αψηφώντας τη χρονική επιβάρυνση για τους χρήστες της. 4.3.4. Χρήση πολυμεσικού υλικού (multimedia) Μολονότι η χρήση πολυμεσικού υλικού σε μια σελίδα καθιστά την παρουσίαση πιο εντυπωσιακή και φιλική προς το χρήστη, η αναπόφευκτη χρονική καθυστέρηση συνήθως κάνει τους σχεδιαστές πολύ προσεκτικούς κατά την ενσωμάτωση του. Οι εικόνες καλό είναι να μην καταλαμβάνουν μεγάλο χώρο στην οθόνη και να έχουν το μέγεθος που ακριβώς απαιτείται για την παρουσίαση τους. Η συρρίκνωση της εικόνας, που πολλές φορές λανθασμένα χρησιμοποιείται από τους σχεδιαστές, δεν φέρνει τα αναμενόμενα αποτελέσματα. Οι εικόνες πρέπει να είναι σε μορφή JPG, GIF ή PNG. Η κινούμενη εικόνα και το video, παρόλο που επιβαρύνουν το website, είναι αρκετές φορές σκόπιμα. Παρακάτω αναφέρονται ενδεικτικά κάποιες περιπτώσεις που η εφαρμογή τέτοιων μέσων είναι χρήσιμη: • Απεικόνιση τρισδιάστατων αντικειμένων • Απεικόνιση αλλαγής καταστάσεων σε αντικείμενα • Εντυπωσιασμός και εστίαση του ενδιαφέροντος του χρήστη • Προβολή διαφημιστικών spots • Προώθηση τηλεοπτικών γεγονότων μικρής χρονικής διάρκειας Ο ήχος συνηθίζεται να χρησιμοποιείται είτε για σχολιασμό του οπτικού υλικού είτε ως μουσικό "χαλί" που συνοδεύει μια παρουσίαση. Πρέπει να επιτρέπεται στο χρήστη να επιλέξει τη διακοπή του ήχου όποτε αυτός το επιθυμεί. Σε κάθε περίπτωση χρήσης πολυμεσικού υλικού, πρέπει να δίνεται μεγάλη προσοχή στο τελικό μέγεθος και να μη θυσιάζεται η ουσιαστική πληροφορία. 4.4. Είδη δικτυακών τόπων (με κριτήριο το στόχο) Υπάρχουν τρία είδη site: Περιεχομένου (πληροφοριακά), εμπορικά (πωλήσεις), και επικοινωνιακά (αλληλεπίδραση με τους επισκέπτες). Συνήθως ένας δικτυακός τόπος συνδυάζει και τα τρία στοιχεία (περιεχόμενο, εμπόριο, επικοινωνία). Στην πραγματικότητα, τα περισσότερα εμπορικά site, παρέχουν και πλούσιο περιεχόμενο, αλλά και πληροφορίες με στόχο τόσο να ωθήσουν τον επισκέπτη να αγοράσει τα προϊόντα της επιχείρησης όσο και στη συνέχεια να χρησιμοποιεί τον δικτυακό τόπο ως πηγή υποστήριξης. Φυσικά, ένας δικτυακός τόπος που στόχο έχει τις πωλήσεις θα είναι αρκετά διαφορετικό από έναν δικτυακό τόπο που παρέχει πληροφορίες. Έτσι, ακόμα και αν θέλετε το site σας να κάνει και τα τρία πράγματα, πρέπει ούτως ή άλλως να βάλετε προτεραιότητες και να αποφασίσετε που θα δώσετε βάση. Ίσως μοιάζει με παζλ, αλλά μόλις έχετε την γενική εικόνα, θα είναι ευκολότερο να βάλετε στη θέση τους τα επιμέρους κομμάτια. __________________________________________________________________________________________ 10 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 5. Σχεδιασμός ενός δικτυακού τόπου Πέρα από τις προτεινόμενες τεχνικές κατά την κατασκευή μιας ιστοσελίδας, υπάρχουν και κάποιες σημαντικές αρχές που αναφέρονται σε ολόκληρο το website. Είναι χρήσιμο ο σχεδιαστής πριν να ξεκινήσει να χτίζει ένα website να αφιερώσει χρόνο εξετάζοντας πως έχουν σχεδιαστεί άλλοι δικτυακοί τόποι που αναφέρονται στο ίδιο αντικείμενο με το προς κατασκευή site και που επιτυγχάνουν το στόχο για τον οποίο δημιουργήθηκαν. Ο σχεδιασμός ενός site χωρίζετε σε τρία μέρη: Οργάνωση, Περιεχόμενο, Εμφάνιση 5.1. Οργάνωση (αναφορά στις σημειώσεις Κου. Χατζηχαριστού σελ. 25, 30) Η οργάνωση του site σας είναι σημαντική γιατί μπορεί να κάνει ευκολότερο (ή δυσκολότερο) για τους επισκέπτες σας να βρουν αυτό το οποίο ψάχνουν (ή αυτό το οποίο εσείς θέλετε να δουν). 5.1.1. Αρχική σελίδα (home page) Η αρχική σελίδα είναι η πρώτη με την οποία έρχεται σε επαφή ο χρήστης και σίγουρα παίζει τον κύριο ρόλο στην αξιολόγηση όλου του δικτυακού τόπου από τον επισκέπτη. Πρωταρχικός στόχος της αρχικής σελίδας είναι να απαντά στα ερωτήματα "Πού βρίσκομαι;" και "Τι δείχνει αυτό το site;". Στην αρχική σελίδα θα πρέπει να παρουσιάζονται οι πιο πρόσφατες ανακοινώσεις αλλά και κάποια σημαντικά κομμάτια πληροφορίας που θέλουμε να διαβάσει ο επισκέπτης. Η αρχική σελίδα εισάγει επίσης τους επισκέπτες στην οργάνωση του site - δηλαδή πως αυτό δομείται και τι κατηγορίες και υποκατηγορίες περιλαμβάνει. Πάντοτε περιέχει παραπομπές στις κατηγορίες ενός site και μερικές φορές απευθείας παραπομπές σε άρθρα που θέλετε οι επισκέπτες να δουν. Η χρήση των σχετικά κενών πληροφορίας οθονών εισαγωγής στην αρχική σελίδα, οι οποίες, μετά από κάποιο οπτικοακουστικό εφέ, καταλήγουν στις επιλογές ENTER ή EXIT, συνήθως κουράζουν τους επισκέπτες. Σε περιπτώσεις που χρησιμοποιούνται τέτοιες εισαγωγές, θεωρείται σκόπιμο να καταλήγουν αυτόματα στην κεντρική σελίδα και να παρέχουν τη δυνατότητα στους χρήστες να τις παρακάμψουν. Η μόνη περίπτωση που μπορεί να φανούν χρήσιμες είναι όταν η επιχείρηση επιθυμεί να φιλτράρει τους πιθανούς χρήστες της και να επιτρέπει την είσοδο μόνο σε αυτούς που πληρούν κάποια συγκεκριμένα κριτήρια (π.χ. σε websites που παρουσιάζονται πληροφορίες μόνο για ενηλίκους). Υπάρχουν δύο σχολές σκέψης για τις αρχικές σελίδες (home pages). Μικρές σελίδες: Η μία λέει ότι δεν θα πρέπει να εκτείνονται πολύ σε μήκος και ότι ολόκληρη η σελίδα θα πρέπει να είναι ορατή σε μία μόνο οθόνη. Το πλεονέκτημα μιας μικρής αρχικής σελίδας είναι ότι οι επισκέπτες δε χρειάζεται να κατεβάζουν τη σελίδα, και μπορούν να δουν οτιδήποτε υπάρχει αμέσως. Μερικές φορές όταν παρουσιάζετε πολύ λίγες πληροφορίες ρισκάρετε να μην καταλάβουν οι επισκέπτες τον σκοπό του site σας ή να μην δουν κάτι ενδιαφέρον για το οποίο μπορεί να είχαν κάνει click εάν παρουσιάζατε περισσότερες πληροφορίες. Μεγάλες σελίδες: Η άλλη σχολή σκέψης, είναι ότι όσες περισσότερες πληροφορίες παρέχετε, τόσο το καλύτερο. Αυτή η σχολή υποστηρίζει ότι οι επισκέπτες κατεβάζουν τη σελίδα, και ότι όσο περισσότερες πληροφορίες τους δίνεις, τόσο το καλύτερο. Εάν ενδιαφέρονται, θα κατεβάσουν τη σελίδα. Εάν όχι, δεν έχει σημασία πόσο μικρή είναι η αρχική σελίδα σας. Εξακολουθεί να είναι μια καλή ιδέα να βάζετε τα πιο σημαντικά θέματα σας στο πάνω μέρος της σελίδας, ώστε να μην παραβλέπονται. Βέβαια έχετε υπόψη σας ότι όσο περισσότερο φορτωμένη και μεγάλη είναι μια σελίδα, τόσο περισσότερο χρόνο χρειάζεται για να κατέβει. 5.1.2. Κατηγορίες Οποιοδήποτε site που έχει περιεχόμενο περισσότερο από κάποιες σελίδες χρειάζεται να οργανωθεί σε κατηγορίες. Μπορείτε να τις θεωρήσετε κάτι παρόμοιο με τα κεφάλαια βιβλίου, ή ακόμα σαν φακέλους. Ο σκοπός τους είναι να οργανώσουν άρθρα μέσα σε λογικές ενότητες. Οι κατηγορίες και οι τίτλοι τους είναι πολύ σημαντικοί γιατί λένε στους επισκέπτες σας τι είδους πληροφορίες πρόκειται να τους δώσετε. Για παράδειγμα, εάν το site σας αφορά την κηπουρική, μπορείτε να έχετε κατηγορίες για τα λουλούδια, τα δέντρα και τα λαχανικά. Ή μπορείτε να έχετε κατηγορίες για το σχεδιασμό ενός κήπου, το φύτεμα ενός κήπου, και τη διατήρηση ενός κήπου. Όλες αυτές οι κατηγορίες έχουν να κάνουν με την κηπουρική, όμως, οι δύο ομάδες των κατηγοριών παρουσιάζουν στους επισκέπτες διαφορετικές προσδοκίες για αυτό το οποίο πρόκειται να τους πείτε και αυτό το οποίο πρόκειται να βρουν. Η απόφαση για τι κατηγορίες χρειάζεστε για το site σας είναι ένα από τα πρώτα πράγματα που χρειάζεται να κάνετε. __________________________________________________________________________________________ 11 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 5.1.3. Πλοήγηση Ο επισκέπτης ενός δικτυακού τόπου πρέπει να έχει τη δυνατότητα να κινείται με αρκετά εύκολο τρόπο και χωρίς να χάνεται. Συγκεκριμένα, το περιβάλλον πλοήγησης που υπάρχει στη σελίδα θα πρέπει να πληροφορεί το χρήστη σχετικά με τα παρακάτω: • Πού βρίσκεται • Ποιες σελίδες ή συνδέσμους έχει ήδη επισκεφθεί • Πού βρίσκονται οι επιλογές πλοήγησης Αν και πολλές από τις παραπάνω πληροφορίες παρέχονται απευθείας από το φυλλομετρητή, οι σελίδες του website πρέπει να πληροφορούν τόσο για τη θέση του χρήστη ως προς το Web αλλά και ως προς το συγκεκριμένο site, όσο και για τη συγκεντρωτική δομή του δικτυακού τόπου, έτσι ώστε να είναι δυνατή η πλήρης κατανόηση του χρήστη για την όλη δομή του ιστότοπου. Τα χρώματα των συνδέσμων (links) θα πρέπει να διαφέρουν από αυτά των απλών κειμένων και θα πρέπει να διατηρείται μια ενιαία λογική στον τρόπο απεικόνισης τους. Οι σύνδεσμοι μεταξύ τους μπορούν και αυτοί να διαφοροποιούνται οπτικά, αφού υπάρχουν τύποι συνδέσμων που εξυπηρετούν διαφορετικούς σκοπούς: • Ενσωματωμένοι πληροφοριακοί σύνδεσμοι, που χρησιμοποιούνται για να οδηγήσουν σε μία αναλυτική παρουσίαση ενός θέματος. • Σύνδεσμοι δόμησης, που συνδέουν τις κεντρικές σελίδες του δικτυακού τόπου και συνθέτουν τη βασική του δομή • Σύνδεσμοι συσχέτισης (εξωτερικά links), που αναφέρουν στους χρήστες σελίδες παρόμοιας πληροφορίας με αυτή που διαβάζουν 5.1.3.1. Ο ρόλος των γραφικών Αν και δεν είναι πάντοτε απαραίτητες, οι εικόνες και τα γραφικά μπορούν να βοηθήσουν τους επισκέπτες στην πλοήγηση τους. Αν έχετε π.χ. έναν τουριστικό δικτυακό τόπο αντί να παραπέμπετε σε ένα κείμενο απλά με τη λέξη «Γαλλία», θα ήταν πιο ξεκάθαρο εάν προσθέτατε μία μικρή εικόνα του Πύργου του Άιφελ που να λέει «Γαλλία». Βέβαια, δεν πρέπει να εξαρτάστε αποκλειστικά από τις εικόνες για την πλοήγηση. Απλά χρησιμοποιείστε τις για να υποστηρίξετε καλύτερα τις ονομασίες των επιμέρους σελίδων. Και βέβαια κάθε γραφικό στο site σας θα πρέπει να περιέχει "ALT" κείμενο, ώστε ακόμη και αν οι επισκέπτες σας δεν βλέπουν τις εικόνες να μπορούν να διαβάσουν και να χρησιμοποιήσουν το περιβάλλον πλοήγησης του site σας. Είναι επίσης σημαντικό να σημειώσετε ότι θα πρέπει πάντοτε να περιλαμβάνετε μία μόνο εκδοχή της πλοήγησης σας, καθώς ορισμένοι χρήστες σερφάρουν έχοντας επιλέξει να μην βλέπουν εικόνες, ή ακόμη και με text-only browsers. Πολύ συχνά θα δείτε την πλοήγηση στο κάτω μέρος της σελίδας με text links. 5.1.3.2. Τύποι πλοήγησης Καλύψαμε το γιατί όχι όμως και το πώς. Τώρα γνωρίζετε ότι τα μεμονωμένα στοιχεία τείνουν στη δημιουργία πλοήγησης δε γνωρίζετε όμως πώς να τα συλλέξετε. Το πρώτο βήμα στη δημιουργία του σχεδιασμού πλοήγησης είναι να σκεφτείτε πώς οι πληροφορίες θα παρουσιάζονται. Σύμφωνα με το Information Architecture for the World Wide Web, υπάρχουν τρεις βασικοί τύποι πλοήγησης: Ιεραρχική. Η ιεραρχική ανταποκρίνεται σε sites που είναι πλούσια σε πληροφορίες και πολύ καλά οργανωμένα με τη μορφή ενός μεγάλου «δέντρου» με κλαδιά ή όπως μια βιβλιοθήκη. Παγκόσμια. Η παγκόσμια πλοήγηση ανταποκρίνεται σε sites όπου μπορείτε εύκολα και λογικά να μεταπηδήσετε σε όλα τα σημεία. Ο τύπος αυτός προσφέρεται εάν παρουσιάζετε τις πληροφορίες σε λιγότερες κατηγορίες. Τοπική. Η τοπική πλοήγηση βρίσκεται κάπου ανάμεσα. Αυτή ανταποκρίνεται όταν έχετε ένα βάθος πληροφοριών μέσα σε συγκεκριμένες περιοχές. Τα ιεραρχικά sites λόγω του βάθους και του πλάτους του περιεχομένου, συχνά χρησιμοποιούν μια προσέγγιση που αποκαλείται "bread-crumb trail" . Αυτό σημαίνει ότι καθώς περνάτε από σελίδα σε σελίδα, μπαίνοντας βαθύτερα σε πιο εξειδικευμένα θέματα, η σελίδα σας πληροφορεί πώς να φτάσετε εκεί, και φυσικά πώς να γυρίσετε πίσω. Θα το δείτε αυτό πιο συχνά σε θεματικούς καταλόγους όπως το Yahoo. Καθώς χρησιμοποιούμε την μεταφορά του χάρτη, αυτός ο τύπος της πλοήγησης θα έμοιαζε με ένα ακτινωτό σχήμα από δρόμους που πηγάζουν από μία μοναδική πηγή και σπάνια διασταυρώνονται μεταξύ τους. __________________________________________________________________________________________ 12 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 5.1.3.3. Το μενού πλοήγησης (αναφορά στις σημειώσεις Κου. Χατζηχαριστού σελ. 31,32) • Στο πλάι: Από τη στιγμή που οι οθόνες είναι μεγαλύτερες, είναι λογικό να τοποθετηθεί η πλοήγηση στην αριστερή ή δεξιά πλευρά - απλά γιατί υπάρχει μεγαλύτερος οριζόντιος χώρος. Επιπλέον, δεν θέλετε οι γραμμές του κειμένου σας στον κεντρικό χώρο της σελίδας να τρέχουν από την μια άκρη της οθόνης στην άλλη - αυτό δημιουργεί μεγάλες γραμμές με αποτέλεσμα να μην διαβάζονται άνετα (60-70 χαρακτήρες είναι το όριο που πρέπει να έχετε υπόψη σας.) Πολλά sites το τοποθετούν στην αριστερή μεριά. Μερικά μάλλον τολμηρά site το τοποθετούν στη δεξιά πλευρά. Η τοποθέτηση στην δεξιά πλευρά δεν είναι κάτι λάθος, απλά δεν συνηθίζεται. • Στην κορυφή: (πχ Microsoft)Η τοποθέτηση του μενού πλοήγησης στο πάνω μέρος της σελίδας συχνά περιορίζει αυτό που βλέπουν οι επισκέπτες σας όταν μπαίνουν για πρώτη φορά στον δικτυακό τόπο. Υπάρχουν μενού πλοήγησης τα οποία ήταν τόσο μεγάλα που κάλυψαν την οθόνη και ανάγκασαν τον επισκέπτη να κατεβάσει τη σελίδα μόνο για να δει την αρχή του περιεχομένου. Αυτό δεν είναι τόσο καλή ιδέα. Η πλοήγηση είναι απαραίτητη, από τη στιγμή όμως που εμφανίζεται σε κάθε σελίδα ένα πολύ μεγάλο μενού μπορεί να γίνει ενοχλητικό. • Σε ένα πλαίσιο: Ένας κοινός τρόπος να κρατήσετε την πλοήγηση στην οθόνη χωρίς να υπολογίζετε πόσες σελίδες κατεβάζει ένας επισκέπτης για να διαβάσει είναι να δημιουργήσετε ένα πλαίσιο για το μενού πλοήγησης. Με αυτόν τον τρόπο, όταν οι χρήστες κάνουν click από σημείο σε σημείο, δεν χρειάζεται να ξαναφορτώσουν το μενού πλοήγησης σε κάθε σελίδα. Το πρόβλημα με αυτή τη λύση είναι ότι τα πλαίσια μπορούν να μπερδέψουν τους επισκέπτες, δεν μπορούν να αποθηκεύσουν επιμέρους σελίδες στα favorites ή στα bookmarks και τέλος αν κάποιος χρήστης μπει σε μια σελίδα μας (εκτός της κεντρικής) μέσω μιας μηχανής αναζήτησης (π.χ. Google) τότε δεν θα εμφανιστούν τα πλαίσια και άρα ούτε το μενού πλοήγησης. • High-Tech: Μία άλλη μέθοδος είναι τα interactives μενού. Κάποια sites χρησιμοποιούν JavaScript για να ανοίξουν ένα παράθυρο ή για να αποκαλύψουν βαθύτερα επίπεδα πληροφόρησης όταν επιλέγετε μία κατηγορία στο μενού πλοήγησης. • Site maps: Μία πιο συχνή μέθοδος - που έχει διατηρηθεί από τα παλιότερα παραδοσιακά μέσα εκτύπωσης - είναι το site map ή ο πίνακας περιεχομένων. Το πλεονέκτημα εδώ είναι ότι προσφέρει στον αναγνώστη σας μία βάση από την οποία μπορεί να έχει πρόσβαση σε οποιοδήποτε μέρος στο site. Συχνά τα site περιέχουν και graphic image maps, δηλαδή γραφικές αναπαραστάσεις, έτσι ώστε να βοηθούν τους επισκέπτες να έχουν μια γενική σχηματική εικόνα του site. Εάν δημιουργήσετε ένα graphic site map, προσπαθήστε να κάνετε τα γραφικά όσο μικρότερα γίνεται, για να κατεβαίνει πιο γρήγορα η σελίδα. 5.1.4. Δυνατότητα αναζήτησης πληροφορίας Κάθε σωστά διαμορφωμένο site παρέχει στους χρήστες έναν εναλλακτικό τρόπο εύρεσης πληροφοριών από αυτόν της πλοήγησης: μια μικρή μηχανή αναζήτησης στο ίδιο το site. Αν και αυτό το χαρακτηριστικό δεν είναι απαραίτητο για ιστότοπους που δεν περιέχουν μεγάλη ποσότητα πληροφοριών, σε εταιρικά websites που παρουσιάζουν λίστες με προϊόντα ή υπηρεσίες, ανακοινώσεις και δημοσιεύσεις, αυτή η υπηρεσία θεωρείται απαραίτητη. 5.1.5. Semantic Web: To Web του μέλλοντος Η ταχεία διάδοση του Διαδικτύου και ο μεγάλος αριθμός ιστοσελίδων που αναπτύχθηκαν σε πολύ σύντομο χρόνο, έφεραν στην επιφάνεια ένα σημαντικό πρόβλημα: το ότι η επιθυμητή πληροφορία είναι δύσκολο να εντοπιστεί. Ο "πατέρας" του Παγκόσμιου Ιστού, Tim Berners Lee, παρουσίασε την έννοια του σημασιολογικού ιστού (semantic web) ως λύση στο πρόβλημα. Σύμφωνα με αυτή, οδηγούμαστε πλέον σε ένα παγκόσμιο δίκτυο, όπου οι πληροφορίες συνοδεύονται και από σημασιολογικά - εννοιολογικά δεδομένα (metadata), έτσι ώστε να είναι δυνατή η κατανόηση τους και από τις μηχανές. Στα πλαίσια αυτού του στόχου, και σύμφωνα με την τεχνολογική πραγματικότητα, τα websites θα πρέπει να δημιουργούνται με υψηλά επίπεδα δόμησης και οι πηγαίοι κώδικες τους να είναι ευανάγνωστοι τόσο από τους ανθρώπους όσο και από άλλους υπολογιστές. Οι σχεδιαστές σελίδων οφείλουν να δημιουργούν τις ιστοσελίδες τους βάσει αυστηρών κανόνων, όπως αυτοί ορίζονται από τον παγκόσμιο οργανισμό W3C. Όσο καλύτερα δομημένος είναι ο κώδικας μιας σελίδας και όσο περισσότερη πληροφορία έχει προσαρτηθεί στο τμήμα μετα-δεδομένων (το τμήμα το οποίο "διαβάζουν" οι μηχανές αναζήτησης και τα άλλα υπολογιστικά συστήματα) τόσο περισσότερες είναι οι πιθανότητες η σελίδα να διαβαστεί και να καταχωρηθεί σωστά από ένα ξένο υπολογιστή. Αυτή η αυτόματη καταχώρηση δίνει συγκριτικό πλεονέκτημα στο δικτυακό τόπο τη στιγμή που αναζητείται από απλούς χρήστες σε υπηρεσίες αναζήτησης σελίδων στο Διαδίκτυο. __________________________________________________________________________________________ 13 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 5.2. Περιεχόμενο Η δημιουργία ενός επιτυχημένου περιεχομένου (που είναι το κείμενο, τα γραφικά κ.α.) για το site σας απαιτεί να έχετε ήδη προσδιορίσει τους στόχους και την οργάνωση του δικτυακού σας τόπου. Βασικές οδηγίες: • Οι επισκέπτες θα πρέπει να γνωρίζουν που βρίσκονται καθ' όλη την διάρκεια παραμονής τους στον δικτυακό σας τόπο, το όνομα του site, το όνομα της εταιρείας σας κτλ. Διαφορετικά δε θα μπορέσουν να θυμηθούν που βρήκαν τις πληροφορίες, όσο χρήσιμες και αν είναι αυτές. • Συμπεριλάβετε έναν εύκολο τρόπο με τον οποίον μπορούν οι επισκέπτες σας να επικοινωνούν μαζί σας. Η επικοινωνία είναι ένα ζωτικό κομμάτι της εμπειρίας στο Internet γι’ αυτό συμπεριλάβετε παραπομπές οι οποίες επιτρέπουν στους επισκέπτες να σας στείλουν εύκολα e-mail - και φυσικά μην ξεχάσετε την διεύθυνση σας και / ή το νούμερο τηλεφώνου. Να μην ξεχάστε να συμπεριλάβετε τις πληροφορίες επικοινωνίας, τηλέφωνο, fax, και διεύθυνση σε κάθε ιστοσελίδα. Με αυτόν τον τρόπο εάν κάποιος σώσει ή εκτυπώσει μια σελίδα, θα έχουν ακόμη αυτήν την σημαντική πληροφορία. 5.2.1. Άρθρα Από τη στιγμή που έχετε τη δομή του δικτυακού τόπου στη σωστή θέση, μπορείτε να ξεκινήσετε την τοποθέτηση των άρθρων στις διαφορετικές ενότητες. Το γράψιμο για το Internet έχει κάποιες διαφορετικές απαιτήσεις από το γράψιμο στο χαρτί. • Καταρχήν, δεν έχετε τους φυσιολογικούς περιορισμούς του κόστους εκτύπωσης -επομένως το περιεχόμενο σας δεν χρειάζεται να είναι συμπυκνωμένο. Μάλιστα, οι αναγνώστες του Internet θέλουν λετπομέρειες. Καλό είναι να προσφέρονται συμπυκνωμένες γενικές πληροφορίες με παραπομπές για πιο ολοκληρωμένες πληροφορίες - με αυτόν τον τρόπο οι αναγνώστες δεν αναλώνουν το χρόνο τους διαβάζοντας λεπτομέρειες - όμως οι λεπτομέρειες θα πρέπει πάντα να είναι προσβάσιμες. • Πρέπει όμως να προσέχουμε πως γράφουμε στις Ιστοσελίδες. Μελέτες έχουν δείξει ότι οι άνθρωποι διαβάζουν 25% πιο αργά στην οθόνη από ότι στο χαρτί, και συνήθως «σαρώνουν» τις σελίδες αντί να τις διαβάσουν ολόκληρες. Αυτό σημαίνει ότι θα πρέπει να σπάμε τις σελίδες μας σε μικρές ενότητες και παραγράφους με αρκετές επικεφαλίδες οι οποίες θα πρέπει να αποτυπώνουν με απλότητα και σαφήνεια το περιεχόμενο της ενότητας. Επίσης, όπου μπορούμε να χρησιμοποιούμε περισσότερα γραφικά, φωτογραφίες και σχήματα. • Μην είστε φειδωλοί στο περιεχόμενο. Εάν έχετε μια δημοσίευση, τοποθετήστε τα τελευταία τεύχη πάνω, ακόμα και πράγματα από το τελευταίο τεύχος σαν teaser. Με το να δίνετε πολλές πληροφορίες κάνετε τους χρήστες να θέλουν να επισκεφθούν και πάλι τον δικτυακό σας τόπο. Οι εκδότες έχουν διαπιστώσει ήδη ότι με τη δημοσίευση ολόκληρων βιβλίων on-line αυξήθηκαν οι πωλήσεις βιβλίων! • Το διαδίκτυο (Internet) είναι βασισμένο στην ιδέα της παραπομπής - από σελίδα σε σελίδα και από site σε site. Οι παραπομπές στο site σας, βοηθούν τον αναγνώστη να πάει σε συναφείς πληροφορίες γρήγορα και εύκολα. Κάποιοι άνθρωποι διστάζουν να συμπεριλάβουν παραπομπές σε άλλα sites γιατί δεν θέλουν να φύγουν οι επισκέπτες. Μπορείτε όμως να στήσετε τις παραπομπές έτσι, ώστε να ανοίξουν ένα νέο browser window, αφήνοντας το site σας ανοιχτό. Για να το κάνετε αυτό, προσθέστε target _blank στο τέλος της παραπομπής σας. 5.2.2. Διαμόρφωση του κειμένου • Πάντα να ξεκινάτε με την επικεφαλίδα - όλοι τις διαβάζουν. Σημειώστε το πιο σημαντικό σας σημείο σε μία ή δύο σειρές επικεφαλίδας. • Δώστε μια γενική εικόνα. Στο Διαδίκτυο δεν λειτουργούν τα μεγάλα κείμενα. Κάντε περιλήψεις για τα πιο σημαντικά τους σημεία. Με αυτόν τον τρόπο οι επισκέπτες μπορούν να δουν το άρθρο με μια ματιά, ή μπορούν να πάνε σε οποιαδήποτε σημαντικό σημείο. • Μην χρησιμοποιείτε τα σκούρα γράμματα. Είναι προτιμότερο να τα χρησιμοποιείτε σποραδικά, όπως σε τίτλους στην αρχή της παραγράφου. Τα σκούρα γράμματα όταν είναι σε αρκετά σημεία μέσα στο κείμενο μπορούν να προκαλέσουν σύγχυση. • Χρησιμοποιείτε πλάγια γράμματα για μεγαλύτερη έμφαση. Τα πλάγια γράμματα Εγώ είπα ότι αυτό μου αρέσει. μπορούν να βοηθήσουν τον αναγνώστη σας να καταλάβει το ίδιο σημείο έμφασης Είπα ότι αυτό μου αρέσει Είπα ότι αυτό μου αρέσει. που επιδιώκατε να τονίσετε. Τα πλάγια γράμματα μπορούν να βοηθήσουν το κείμενο Είπα ότι αυτό μου αρέσει. σας να ακουστεί πιο φιλικό. Για παράδειγμα, όταν διαβάζετε την προηγούμενη Είπα ότι αυτό μου αρέσει πρόταση, τονίζετε την λέξη «ακουστεί» γιατί ήταν γραμμένη με πλάγια γράμματα. Τα πλάγια γράμματα τους δίνουν διαφορετικές σημασίες στις διπλανές προτάσεις. • Οι άνθρωποι διαβάζουν τα κείμενα με σημεία. Γράψτε τα πιο σημαντικά σημεία σε λίστες. • Επαναλάβατε τις πιο σημαντικές σας φράσεις, αυτές που θέλετε να θυμούνται οι επισκέπτες σας. __________________________________________________________________________________________ 14 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ) 5.3. Εμφάνιση Το τελευταίο κομμάτι του κάθε site, είναι συχνά το πρώτο πράγμα που προσέχουν οι επισκέπτες - πολύ απλά πως «δείχνει» το site. Ο σχεδιασμός της αρχικής σας σελίδας είναι σημαντικός γιατί δείχνει τον τόνο του site σας, είναι η πρώτη σας εντύπωση. Ο σχεδιασμός του site θα πρέπει επίσης να ανακλά την ταυτότητα σας. Είναι επίσημο ή πρόχειρο; Ομαδικό ή ατομικό; Μοντέρνο ή παραδοσιακό; Ζεστό ή ψυχρό; Ακόμη είναι σημαντικό η εμφάνιση του site σας να είναι συνεπής μέχρι τέλους. Τα backgrounds, τα χρώματα, τα κουμπιά πλοήγησης όλα χρειάζονται να παρουσιαστούν στον επισκέπτη σας με μια μοναδική εμφάνιση - αυτό βοηθά να χτιστεί ένα «brand» ώστε το site σας είναι αναγνωρίσιμο. Να ψάχνετε σ' όλο το Web και να μαθαίνετε από αυτά που έχουν κάνει άλλοι και να καταλαβαίνετε τι δουλεύει και τι όχι. 5.3.1. Γραφίστικη εναντίον ευχρηστίας; Βέβαια, το εννοιολογικό και σημασιολογικό κομμάτι του Παγκόσμιου Ιστού, παρόλο που προσθέτει αρκετά χαρακτηριστικά όσον αφορά στην ευχρηστία ενός δικτυακού τόπου, δεν μπορεί σε καμία περίπτωση να γενικευθεί. Η τελική επιλογή του τρόπου κατασκευής έχει να κάνει τόσο με τις τεχνικές προδιαγραφές που τίθενται όσο και με την πολιτική της προβαλλόμενης εταιρίας. Για παράδειγμα, όταν οι χρήστες ενός εταιρικού site είναι παιδιά και έφηβοι, είναι λογικό να δοθεί πολύ μεγαλύτερο βάρος στη χρήση γραφικών και ειδικών εφέ. Αντίθετα, μία εκδοτική επιχείρηση που προβάλλει βιβλία, είναι καλύτερο να δίνει έμφαση στην πληροφορία που παρουσιάζεται και να διευκολύνει το χρήστη, μέσω της χρήσης απλών χρωμάτων, έτσι ώστε να διαβάζει άνετα τα κείμενα που τον ενδιαφέρουν. Η χρήση των εφαρμογών ανάπτυξης πολυμεσικών websites, όπως το Macromedia Flash, δεν είναι απαγορευτική. Αντίθετα, οι σχεδιαστές θα πρέπει να συγκρίνουν τα πλεονεκτήματα και τα μειονεκτήματα των νέων τεχνολογιών και να λαμβάνουν τις σωστές αποφάσεις. Σελίδες που περιλαμβάνουν Flash εισαγωγές ή παρουσιάσεις, καθυστερούν περισσότερο και δεν μπορούν εύκολα να καταχωρηθούν σωστά σε μηχανές αναζήτησης. Από την άλλη, η επίδραση της κινούμενης εικόνας στους χρήστες είναι σημαντική, καθιστώντας τα sites που τη χρησιμοποιούν εντυπωσιακά όσο και απλά στη χρήση. Επιπλέον, αυτός ο τρόπος είναι δυνατόν να χρησιμοποιηθεί και σε περιπτώσεις που θέλουμε να αποκρύψουμε τον κώδικα των σελίδων από τους χρήστες. Ιδανική επιλογή αποτελεί ο σωστός συνδυασμός των γραφικών μαζί με τους κανόνες ευχρηστίας. Σε τέτοιες περιπτώσεις, οι δουλειές του γραφίστα και του σχεδιαστή ιστοσελίδων πρέπει να αλληλοσυμπληρώνονται, με στόχο την παραγωγή ενός όμορφου και λειτουργικού website. 5.3.2. Ενσωμάτωση Ευχρηστίας σε ένα σύστημα Σύμφωνα με τον Jakob Nielsen, fhttp://www.useit.com/papers/heuristic). οι δέκα όροι που πρέπει να πληρούνται για να ικανοποιούνται οι απαιτήσεις ευχρηστίας ενός συστήματος είναι: 1. Ορατότητα της κατάστασης του συστήματος. Το σύστημα πρέπει να κρατά πάντα ενήμερους τους χρήστες για την κατάσταση του, μέσω κατάλληλων πληροφοριών απόκρισης, μέσα σε λογικό χρονικό διάστημα 2. Εναρμονισμός συστήματος και πραγματικού κόσμου. Το σύστημα πρέπει να αποκρίνεται σε "γλώσσα" κατανοητή από το χρήστη, και η πληροφορία να παρουσιάζεται με φυσικό τρόπο και λογική σειρά 3. Έλεγχος από το χρήστη και ελευθερία κινήσεων. Οι χρήστες συχνά ενεργούν κατά λάθος, και δεν μπορούν να "επανορθώσουν" βάσει των εργαλείων που τους παρέχονται. Κάθε σύστημα πρέπει να προσφέρει δυνατότητες αναίρεσης και επανάληψης. 4. Συνέπεια και Σταθερότητα. Οι χρήστες δεν πρέπει να αμφιταλαντεύονται για το νόημα συγκεκριμένων λέξεων, καταστάσεων ή ενεργειών. Πρέπει να χρησιμοποιούνται ενιαίοι και σταθεροί κανόνες σε όλες τις περιπτώσεις 5. Παρεμπόδιση σφαλμάτων. Ένας καλός σχεδιασμός που αποτρέπει προβλήματα εκ των προτέρων είναι πολύ καλύτερη τεχνική από τη χρήση μηνυμάτων λάθους. 6. Αναγνώριση. Τα αντικείμενα, οι ενέργειες και οι επιλογές πρέπει να είναι ορατά. Ο χρήστης δεν μπορεί να θυμάται πληροφορίες κατά τη διάρκεια της πλοήγησης του από μια οθόνη σε μια άλλη. Οι οδηγίες για τη χρήση του συστήματος πρέπει να είναι επίσης ορατές και διαθέσιμες όποτε χρειαστούν. 7. Προσαρμοστικότητα και αποδοτικότητα. Το σύστημα πρέπει να σχεδιαστεί με τέτοιο τρόπο, ώστε να επιτρέπει τόσο στους έμπειρους όσο και στους άπειρους χρήστες να διαμορφώνουν τον τρόπο και την ταχύτητα με την οποία αλληλεπιδρούν με το σύστημα, σύμφωνα με τα δικά τους κριτήρια. 8. Αισθητική και απλός σχεδιασμός. Κάθε αντικείμενο ή οθόνη πρέπει να περιέχει μόνο τις απαραίτητες για το χρήστη πληροφορίες. Κάθε επιπλέον πληροφορία μπορεί να τον αποπροσανατολίσει και να τον αποτρέψει να τη χρησιμοποιήσει. 9. Βοήθεια για αναγνώριση, διάγνωση και διόρθωση λαθών. Τα μηνύματα λάθους πρέπει να εκφράζονται σε απλή και κατανοητή γλώσσα. Επίσης πρέπει να εντοπίζουν επακριβώς το πρόβλημα και να προτείνουν σαφώς τη λύση. 10. Παροχή Βοήθειας και Τεκμηρίωσης. Παρόλο που είναι καλύτερο να μπορεί ο χρήστης να χρησιμοποιήσει το σύστημα χωρίς να χρειάζεται να ανατρέξει σε οποιοδήποτε ηλεκτρονικό εγχειρίδιο, πολλές φορές η παροχή εγγράφου λεπτομερούς τεκμηρίωσης είναι απαραίτητη. Κάθε τέτοιου είδους πληροφορία πρέπει να είναι εύκολα προσβάσιμη, ακριβής και όχι πολύ μεγάλη. __________________________________________________________________________________________ 15 Φιλίππου Στέφανος - Σχεδιασμός ιστοσελίδων (θ)