Γαβαλάς Δαμιανός

Transcript

1 Δικτυακά Πολυμέσα ΙΙ Διάλεξη #1 η : Οργάνωση & στόχοι μαθήματος, καλές αρχές σχεδιασμού στο web, τα μεγαλύτερα λάθη στον web σχεδιασμό Γαβαλάς Δαμιανός dgavalas@aegean.gr 1

2 Στόχοι μαθήματος Κατανόηση της δομής και λειτουργίας του διαδικτύου και του παγκόσμιου ιστού (των υποκείμενων τεχνολογιών και διαδικασιών πίσω από τις web δημιουργίες μας) Διάκριση των εννοιών του σχεδιασμού και της ανάπτυξης στον παγκόσμιο ιστό (web design vs. web development) Εμπέδωση των ιδιαιτεροτήτων των διαδικτυακών εφαρμογών και των βασικών αρχών που τηρούνται στο σχεδιασμό στο web Κατανόηση καλών σχεδιαστικών πρακτικών και ικανοτήτων που πρέπει να αναπτύξει ένας σχεδιαστής web εφαρμογών Κατανόηση τρόπου λειτουργίας των μηχανών αναζήτησης και τεχνικών σχεδιασμού φιλικών προς τις μηχανές αναζήτησης ιστοτόπων Παράμετροι φιλοξενίας και συντήρησης ιστοτόπων (web hosting and maintainance) 2

3 Αναμενόμενο αποτέλεσμα Ικανότητα ανάπτυξης ιστοτόπων με τη γλώσσα σήμανσης XHTML Εξοικείωση με περιβάλλοντα ανάπτυξης ιστοτόπων (Adobe Dreamweaver) Κατανόηση θεμάτων σχεδιασμού στον ιστό (web design), αρχών καλού σχεδιασμού Οργάνωση περιεχομένου, συστήματα πλοήγησης, τεχνολογίες και μέθοδοι διάταξης περιεχομένου,, φύλλα στυλ, γραφικά και χρώμα Αφομοίωση ρόλου και χαρακτηριστικών της τεχνολογίας CSS Αναμενόμενο αποτέλεσμα Κανόνες ευχρηστίας στο web design Ο ρόλος του web design στην προσβασιμότητα (web accessibility) Σχεδιασμός στον κινητό ιστό (mobile web design) Web design και μηχανές αναζήτησης Παράμετροι φιλοξενίας δικτυακών τόπων (Web hosting), συντήρηση ενός web site Εισαγωγή στις τεχνολογίες Javascript, XML, Ajax 3

4 Δομή Μαθήματος Θεωρία: ευτέρα 11:00-12:00μμ, Αίθουσα Α Γεωγραφίας Εργαστήριο Ανθρωπογεωγραφίας: 1 η ομάδα: ευτέρα 12:00-14:00 2 η ομάδα: ευτέρα 14:00-16:00 Τρόπος αξιολόγησης Οπωσδήποτε ένα (ατομικό ή ομαδικό) project (σχεδιασμός ενός διαδικτυακού τόπου): ηλεκτρονική παράδοση στο τέλος του εξαμήνου και πιθανόν σύντομη προφορική παρουσίαση στο διδάσκοντα Γραπτή εξέταση στο τέλος του εξαμήνου 4

5 Διδακτικά Εγχειρίδια «Μάθετε την HTML & CSS σε 24 ώρες» Συγγραφείς: J. Meloni & M. Morrison Εκδόσεις Γκιούρδα, 2010 «Εισαγωγή στην HTML για τον Παγκόσμιο Ιστό με Εικόνες» Συγγραφείς: E. Castro Εκδόσεις Κλειδάριθμος, 2003 Ξένη βιβλιογραφία 5

6 Σελίδα του μαθήματος στο web Τι περιέχει;;; Ανακοινώσεις Διαφάνειες Ασκήσεις εργαστηρίου Βιβλιογραφία, Links, «Λεξικό» εννοιών (Γλωσσάρι όρων) Σχεδιάζοντας ένα Website 6

7 Περιεχόμενα Κατασκευή ιστοσελίδων Τα 3Cs σχεδιασμού στο web έκα καλές πρακτικές στο Web Design (Nielsen, 1999) Κάποιες σημειώσεις σε σχέση με Γραφικά και Flash Τα μεγαλύτερα λάθη στο Web Design Ενδιαφέροντα Website Designs Σχεδιάζοντας για κινητές συσκευές Κατασκευή ιστοσελίδων Ένας καλός web page developer πρέπει να έχει αντίληψη των αναγκών και ενδιαφερόντων των επισκεπτών ιστοσελίδων Μια καλή ιστοσελίδα δεν βασίζεται μόνο στο σχεδιασμό της Μια καλή ιστοσελίδα προσφέρει πληροφορία + δημιουργικό σχεδιασμό. 7

8 Τα 3Cs του Web Design Quality Content (ποιοτικό περιεχόμενο) Reader Convenience (άνεση/ευκολία χρήστη) Artistic Composition (καλλιτεχνική σύνθεση) Τα 3Cs του Web Design (συν.) Ποιοτικό περιεχόμενο Βεβαιωθείτε ότι έχετε ποιοτικό περιεχόμενο που θα προσφέρετε Ελέγξτε τα δεδομένα σας, κάνετε αναφορά στους πόρους που χρησιμοποιείτε και παράγετε ένα αξιόπιστο δομημένο έγγραφο Ευκολία ανάγνωσης Σκεφτείτε και λάβετε υπόψη τον επισκέπτη Διευκολύνετε τον επισκέπτη να εντοπίσει πληροφορία, να πλοηγείται εύκολα και να «βλέπει» τις σελίδες όπως επιθυμείτε να τις βλέπει Επίσης, κρατήστε τους χρόνους μεταφόρτωσης (download) στο ελάχιστο 8

9 Τα 3Cs του Web Design (συν.) Καλλιτεχνική σύνθεση Προετοιμάστε ένα καλλιτεχνικό σχεδιασμό Η όψη και αντίληψη (look & feel) της σελίδας σας θα εκτιμηθεί μόνο αν οι προηγούμενες δύο προϋποθέσεις ικανοποιούνται Οι πρωτάρηδες στην ανάπτυξη ιστοσελίδων συχνά υπερβάλουν στη «διασκέδαση» των ψηφιακών γραφικών και εικόνων. Η διασκέδαση είναι σημαντική αλλά διασφαλίστε ότι ο σχεδιασμός δεν απορροφά περισσότερη προσοχή από το περιεχόμενο έκα καλές πρακτικές στο Web Design (Nielsen, 1999) 1. Τοποθετήστε το όνομα και λογότυπό σας και κάνετε το logo σύνδεσμο στην αρχική σελίδα 2. Παρέχετε λειτουργία αναζήτησης (search) αν το site έχει περισσότερες από 100 σελίδες 3. Κρατήστε απλές τις επικεφαλίδες και τους τίτλους των σελίδων 4. Δομήστε τη σελίδα 9

10 έκα καλές πρακτικές στο Web Design (Nielsen, 1999) (συν.) 5. Χρησιμοποιήστε κείμενο με υπερσυνδέσμους στην αρχική σελίδα ώστε να παρέχει μια γενική εικόνα και διάφορες δευτερεύουσες σελίδες, καθεμία από τις οποίες επικεντρώνει σε ένα συγκεκριμένο θέμα 6. Χρησιμοποιήστε υψηλής ποιότητας φωτογραφίες 7. Αντί να μικρύνετε τις εικόνες σας σε μικρές και δυσανάγνωστες, κάνετε zoom στο πιο σημαντικό μέρος τους με συνδυασμό κοψίματος (cropping) και αλλαγής μεγέθους έκα καλές πρακτικές στο Web Design (Nielsen, 1999) (συν.) 8. Χρησιμοποιήστε τίτλους συνδέσμων που να παρέχουν στους χρήστες μια ιδέα για τη σελίδα στην οποία δείχνουν 9. Διασφαλίστε ότι οι σελίδες σας είναι προσβάσιμες από τους χρήστες 10. Κάνετε το ίδιο που κάνουν τα «μεγάλα» websites: αν κάνουν κάτι με συγκεκριμένο τρόπο, τότε ακολουθήστε παρόμοιες πρακτικές καθώς αυτό θα περιμένουν οι επισκέπτες σας και από το δικό σας website 10

11 Σχόλια σχετικά με γραφικά (ή Flash) Οι εικόνες δεν μπορούν να αναλυθούν από μηχανές αναζήτησης Το Flash στην αρχική σελίδα μπορεί να ενοχλήσει (εφόσον ο επισκέπτης συνδέεται μέσω αργής σύνδεσης) Τα μεγαλύτερα λάθη στο Web Design mistakes inweb design html 1. Το να πιστεύετε ότι οι άλλοι νοιάζονται για το site σας (δηλ. να το σχεδιάσετε με βάση τις δικές σας και όχι τις δικές τους ανάγκες) 2. Οι επισκέπτες δεν μπορούν να κατανοήσουν σε 4 sec περί τίνος είναι το site σας 3. Αντίθεση (contrast) 11

12 Τα μεγαλύτερα λάθη στο Web Design (συν.) 5. Έχετε ποτέ δει άλλο website; 6. Αποτυχία στην πλοήγηση 7. Λείπει περιεχόμενο 8. Ξεχάσατε τη σημασία του κειμένου 9. Πληροφοριακή υπερφόρτωση (πάρα πολύ περιεχόμενο σε μια σελίδα) 10. Κακή χρήση του Flash WebPagesThatSuck.com Δείγματα κακών websites 12

13 Πληροφοριακή υπερφόρτωση Κακό (δυσανάγνωστο κείμενο) 13

14 100% Flash + Κακή πλοήγηση Κακή τυπογραφία 14

15 Γραφικό μενού Γραφικά μενού 15

16 Έντονα χρώματα (με πονούν τα μάτια μου ) Ενδιαφέροντες σχεδιασμοί Websites 16

17 Παρέχεται δυνατότητα αναζήτησης Σχεδιασμός για κινητές συσκευές Γιατί; Μικρή οθόνη Όχι τόσο ισχυρός browser Περιορισμένες και ακριβές ταχύτητες σύνδεσης 17