Δικτυακοί τόποι. Η σχεδίαση ενός δικτυακού τόπου. Δρ. Ματθαίος Α. Πατρινόπουλος

Δικτυακοί τόποι Η σχεδίαση ενός δικτυακού τόπου Δρ. Ματθαίος Α. Πατρινόπουλος

Πώς χρησιμοποιούμε το διαδίκτυο; ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 2

Από το www.smartinsights. com 3

Σχεδιάζοντας έναν δικτυακό τόπο Αρχική Σελίδα Οργάνωση της πληροφορίας Πλοήγηση Αναζήτηση Εύρεση από τις μηχανές αναζήτησης Γραφικά Είδη γραφικών Η αξιοπιστία του δικτυακού μας τόπου Η φιλοξενία του δικτυακού τόπου ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 5

Σχεδιάζοντας έναν δικτυακό τόπο Αρχική σελίδα Πρωταρχικός στόχος της αρχικής σελίδας είναι να απαντά στα ερωτήματα "Πού βρίσκομαι;" και "Τι δείχνει αυτό το site;". Σε αυτή πρέπει να παρουσιάζονται οι πιο πρόσφατες ανακοινώσεις, αλλά και κάποια σημαντικά κομμάτια πληροφορίας που θέλουμε να διαβάσει ο επισκέπτης. Δεν πρέπει να υπάρχουν σύνδεσμοι που καλούν εκ νέου την αρχική σελίδα (όπως το HOME) γιατί μπερδεύουν τους χρήστες. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 6

Οθόνες εισαγωγής Η χρήση οθονών εισαγωγής, που μετά από κάποιο οπτικοακουστικό εφέ, καταλήγουν στις επιλογές ENTER ή EXIT, κουράζουν τους επισκέπτες και δεν προσφέρουν καμία ουσιαστική πληροφορία εκτός από την παρουσίαση του λογότυπου. Αν χρησιμοποιούνται σελίδες εισαγωγής, θεωρείται σκόπιμο να καταλήγουν αυτόματα στην κεντρική σελίδα, αλλά και να παρέχουν τη δυνατότητα στους χρήστες να τις παρακάμψουν. (εκτός αν θέλουμε να φιλτράρουμε τους επισκέπτες.) ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 7

Οργάνωση της πληροφορίας Τίτλος στην αρχική σελίδα: Λίγα λόγια ή μια σύντομη φράση που συνοψίζει τις δραστηριότητές μας. Περίληψη: στην κορυφή της κύριας σελίδας με 1-2 σημεία που προσφέρουν λίγο περισσότερες λεπτομέρειες σχετικά με το φορέα τους στόχους του και τα κυριότερα επιτεύγματα. Ενημερωτικό δελτίο: Μια σύνοψη που αναλύει τα σημεία κλειδιά του ή και άλλα βασικά στοιχεία σχετικά με την οργάνωση με έμφαση στην πιο πρόσφατη δραστηριότητα ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 8

Λεπτομερείς πληροφορίες: Θυγατρικές σελίδες με περισσότερο βάθος για τους χρήστες που θέλουν να μάθουν περισσότερα για το φορέα που αντιπροσωπεύει ο δικτυακός τόπος. Η πολυεπίπεδη παρουσίαση του περιεχομένου αποτελεί μια δενδροειδή δομή που αναπτύσσεται μέσω των υπερσυνδέσεων και προστατεύσει τους χρήστες από λεπτομέρειες που τους αποπροσανατολίζουν, προσφέροντας συγκεκριμένες πληροφορίες όπου χρειάζεται. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 9

Μερικά Παραδείγματα https://www.gsa.gov 1996 ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 10

2008 ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 11

ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 17

2016 https://www.alcoa.com/global/en/home.asp https://www.alcoa.com ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 21

Πλοήγηση Ο επισκέπτης ενός δικτυακού τόπου πρέπει να έχει τη δυνατότητα να κινείται με αρκετά εύκολο τρόπο, χωρίς να χάνεται. Το περιβάλλον πλοήγησης που υπάρχει σε κάθε σελίδα θα πρέπει να πληροφορεί το χρήστη για το: Πού βρίσκεται (ως προς το Web αλλά και ως προς το συγκεκριμένο site) Ποιες σελίδες ή συνδέσμους έχει ήδη επισκεφθεί Πού βρίσκονται οι επιλογές πλοήγησης πολλές από τις παραπάνω πληροφορίες παρέχονται απευθείας από το φυλλομετρητή. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 25

Αν το Site είναι εκτεταμένο θα πρέπει να παρουσιάζεται συγκεντρωτικά και η δομή του, ώστε ο χρήστης να μπορεί να κατανοεί όλη τη δομή του. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 26

Τα χρώματα των συνδέσμων (links) θα πρέπει να διαφέρουν από αυτά των απλών κειμένων και θα πρέπει να διατηρείται μια ενιαία λογική στον τρόπο απεικόνισής τους. Σε κάποιες περιπτώσεις οι σύνδεσμοι μεταξύ τους μπορούν να διαφοροποιούνται οπτικά, αφού υπάρχουν τύποι συνδέσμων που εξυπηρετούν διαφορετικούς σκοπούς: Ενσωματωμένοι πληροφοριακοί σύνδεσμοι, χρησιμοποιούνται για να οδηγήσουν σε μία αναλυτική παρουσίαση ενός θέματος. Σύνδεσμοι δόμησης, που συνδέουν τις κεντρικές σελίδες του δικτυακού τόπου και συνθέτουν τη βασική του δομή. Σύνδεσμοι συσχέτισης (εξωτερικά links), που αναφέρουν στους χρήστες σελίδες παρόμοιου περιεχομένου. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 27

Αναζήτηση πληροφορίας Δυνατότητα αναζήτησης πληροφορίας μέσα στο ίδιο το site. Δεν είναι απαραίτητη για ιστότοπους που περιέχουν μικρή ποσότητα πληροφοριών. Είναι απαραίτητη σε εκτεταμένους δικτυακούς τόπους που παρουσιάζουν λίστες με προϊόντα ή υπηρεσίες, ανακοινώσεις και δημοσιεύσεις, Βοηθά το χρήστη να ανακαλύψει και να μεταβεί στην πληροφορία που τον ενδιαφέρει πολύ γρήγορα. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 28

Εύρεση και παρουσίαση της σελίδας στις μηχανές αναζήτησης Όσο καλύτερα δομημένος είναι ο κώδικας μιας σελίδας και όσο περισσότερη πληροφορία έχει προσαρτηθεί στο τμήμα μετα-δεδομένων (το τμήμα το οποίο "διαβάζουν" οι μηχανές αναζήτησης και τα άλλα υπολογιστικά συστήματα) τόσο περισσότερες είναι οι πιθανότητες η σελίδα να διαβαστεί και να καταχωρηθεί σωστά. Η αυτόματη καταχώρηση δίνει συγκριτικό πλεονέκτημα στο δικτυακό τόπο στην παρουσίασή του από υπηρεσίες αναζήτησης σελίδων στο Διαδίκτυο. Μπορεί να γίνει και η απευθείας καταχώρηση στις μηχανές αναζήτησης. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 29

Γραφικά ; Η επιλογή του τρόπου κατασκευής ενός δικτυακού τόπου έχει να κάνει τόσο με τις τεχνικές προδιαγραφές, όσο και με το τι θέλουμε να προβάλλουμε. Η χρήση των εφαρμογών ανάπτυξης διαδραστικών πολυμεσικών websites, όπως το Macromedia Flash, θα πρέπει να γίνεται με στάθμιση πλεονεκτημάτων και μειονεκτημάτων. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 30

Γραφικά ; Π.χ. σελίδες που περιλαμβάνουν Flash εισαγωγές ή παρουσιάσεις, σίγουρα καθυστερούν περισσότερο Η επιλογή του τρόπου κατασκευής καιενός δεν δικτυακού μπορούν εύκολα τόπου να έχει καταχωρηθούν να κάνει τόσο σωστά με σε τις τεχνικές προδιαγραφές, όσο μηχανές και με το αναζήτησης, τι θέλουμε να λόγω προβάλλουμε. της ενσωμάτωσης της Η χρήση των εφαρμογών ανάπτυξης πληροφορίας διαδραστικών μαζί πολυμεσικών την εικόνα websites, σε ένα αρχείο. όπως το Macromedia Flash, θα πρέπει να γίνεται με στάθμιση πλεονεκτημάτων και μειονεκτημάτων. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 31

Η επίδραση της κινούμενης εικόνας στους χρήστες είναι σημαντική, καθιστώντας τα sites που τη χρησιμοποιούν εντυπωσιακά όσο και απλά στη χρήση. Μπορούμε να αποκρύψουμε τον κώδικα των σελίδων από τους χρήστες, δίνοντάς τους την αίσθηση πως χειρίζονται μία αυτόνομη εφαρμογή. Ιδανική επιλογή αποτελεί ο σωστός συνδυασμός των γραφικών μαζί με τους κανόνες ευχρηστίας ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 32

Εισαγωγή Γραφικών Μορφές υποστηριζόμενων αρχείων GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 33

GIF (Graphics Interchange Format) Προτείνονται για Εικόνες με λίγα χρώματα (π.χ. γραμμικά σχέδια, λογότυπα, ή ακόμη και ασπρόμαυρες εικόνες.) Αρχεία με μικρό μέγεθος. Μπορούν να έχουν διαφανές φόντο, ώστε να φαίνεται μέσα από αυτές το χρώμα του φόντου της ιστοσελίδας. Δεν προτείνονται για εικόνες με περισσότερα από 256 χρώματα, γιατί χάνονται οι αποχρώσεις των χρωμάτων ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 34

JPEG (Joint Photographic Experts Group) Συνιστώνται όταν οι εικόνες που περιέχουν πολλά συνεχή χρώματα. Π.χ. φωτογραφίες. Επιτρέπουν την ύπαρξη χιλιάδων ή και εκατομμύριων χρωμάτων, διατηρώντας το μέγεθος του αρχείου στο ελάχιστο. (μεγαλύτερο από ένα GIF ίδιων διαστάσεων αλλά πολύ μικρό σε σύγκριση με άλλες μορφές. ) Δεν υποστηρίζουν διαφανές υπόβαθρο ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 35

PNG (Portable Network Graphics) Επιτρέπουν Διαφάνεια και περισσότερα από 256 χρώματα, ενώ τα αρχεία έχουν πολύ μικρό μέγεθος. H μορφή PNG είναι μία από τις νεότερες μορφές αρχείων στο Web. Σε ορισμένα προγράμματα περιήγησης μπορεί να έχουμε διαφανές φόντο σε άλλα μπορεί να μην παρουσιάζεται το διαφανές φόντο, και σε κάποια άλλα θα εμφανιστεί ως ένα "x". ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 36

Η αξιοπιστία ενός δικτυακού τόπου Η ευκολία δημοσίευσης και η ανωνυμία των συγγραφέων οδηγεί υπερεκτίμηση ή και σε αμφισβήτηση της αξιοπιστίας του περιεχομένου από τους χρήστες του Διαδικτύου. ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 37

Η αξιοπιστία ενός δικτυακού τόπου Στοιχεία που οδηγούν σε αύξηση της αξιοπιστίας είναι: Υψηλής ποιότητας γραφικά αποφεύγουμε τα έτοιμα θέματα που οι χρήστες θα συναντήσουν και σε άλλους τόπους χρησιμοποιούμε απαλά χρώματα ευανάγνωστες γραμματοσειρές, χωρίς συνεχείς εναλλαγές από σελίδα σε σελίδα Κείμενα σαφή χωρίς ορθογραφικά ή συντακτικά λάθη ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 38

Ο χώρος φιλοξενίας των σελίδων μας - ειδικά αν πρόκειται για επιστημονικό φορέα- αυξάνει την εγκυρότητα του περιεχομένου Οι χρήστες του διαδικτύου είναι ιδιαίτερα απασχολημένοι και δέχονται περισσότερη πληροφορία από όση μπορούν να αφομοιώσουν και θέλουν άμεση παράθεση των γεγονότων ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 39

Αποφυγή ακραίων και υποκειμενικών ισχυρισμών ή εκφράσεων που θυμίζουν διαφημίσεις Η χρησιμοποίηση συνδέσμων προς άλλους δικτυακούς τόπους δείχνει ότι οι συγγραφείς νιώθουν σιγουριά για το δικτυακό τους τόπο και έχουν χρησιμοποιήσει και άλλες πηγές Η επικαιροποίηση των δεδομένων ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 40

Κριτήρια επιλογής παρόχου φιλοξενίας Η ταχύτητα πρόσβασης Η υλικοτεχνική υποδομή (λογισμικό - εξοπλισμός) Η ευκολία πρόσβασης και ανανέωσης του περιεχομένου του δικτυακού σας τόπου Η παροχή βοηθητικών υπηρεσιών / εργαλείων (π.χ. στατιστικά επισκεπτών) Η ασφάλεια Η εμπειρία Τεχνική υποστήριξη Κόστος Η δημοσίευση ΔΙΑΦΑΝΕΙΕΣ ΤΟΥ ΜΑΘΗΜΑΤΟΣ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ ΔΙΑΔΙΚΤΥΟΥ. 41