Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML

Transcript

1 Δικτυακά Πολυμέσα ΙΙ Διάλεξη #2 η : Βασικές έννοιες σχεδιασμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Τρέχον status της HTML Μετάβαση από την HTML στην XHTML Κλέ Καλές πρακτικές συγγραφής κώδικα ιστοσελίδων Θέματα σχετικά με την συμβατότητα περιηγητών (browsers) Θέματα που σχετίζονται με τις διαφορές στις ταχύτητες σύνδεσης Συγγραφή κώδικα ιστοσελίδων για πολλαπλές αναλύσεις οθόνης (screen resolutions) Θέματα που σχετίζονται με τα λειτουργικά συστήματα 1

2 Τρέχον status της HTML HTML: Τότε και τώρα Η HTML είναι μια εφαρμογή της Standard Generalized Markup Language (SGML) Αναπτύχθηκε για να αναπαριστά απλές δομές κειμένου Χρησιμοποιεί υπερκείμενο (hypertext) για να διασυνδέσει σχετικά θέματα Σχεδιάστηκε για να χρησιμοποιείται στο Internet Η ραγδαία ανάπτυξη του Web έχει υπερβεί τις δυνατότητες της HTML 2

3 Η HTML και το World Wide Web Consortium Το World Wide Web Consortium (W3C) είναι ένας οργανισμός προτυποποίησης (παραγωγής ή standards) για το Web Ιδρύθηκε το 1994 στο MIT Το W3C δρομολογεί τον καθορισμό και επέκταση προτύπων σχετικών με τις νέες web τεχνολογίες Χρησιμοποιώντας την HTML για Δομή Η HTML είναι μια δομημένη γλώσσα σήμανσης που επιτρέπει το προσδιορισμό τμημάτων σε ένα έγγραφο Οι ετικέτες σήμανσης HTML δείχνουν πως τα τμήματα του εγγράφου εμφανίζονται σε έναν browser Ο browser διερμηνεύει τα στοιχεία HTML σήμανσης και εμφανίζει τα αποτελέσματα, κρύβοντας καθεαυτές τις ετικέτες σήμανσης από το χρήστη Η HTML είναι μια ανοικτή γλώσσα, συμβατή με πολλαπλές πλατφόρμες (cross platform) Η HTML αναπτύχθηκε με σκοπό να εκφράζει τη λογική δομή εγγράφων, όχι την παρουσίασή τους 3

4 Δομικά στοιχεία σε ένα HTML αρχείο Ο browser διερμηνεύει τα HTML στοιχεία σήμανσης και εμφανίζει το αποτέλεσμα 4

5 Χρησιμοποιώντας φύλλα στυλ (Style Sheets) για την παρουσίαση Τα φύλλα στυλ σας βοηθούν να διαχωρίσετε την παρουσίαση της πληροφορίας από το περιεχόμενο Ο διαχωρισμός της παρουσίασης σας επιτρέπει να επαναπροδιορίσετε το περιεχόμενό σας για πολλαπλές πλατφόρμες προορισμούς Επαναπροδιορισμός περιεχομένου για πολλαπλούς προορισμούς 5

6 Χρησιμοποιώντας φύλλα στυλ (Style Sheets) για την παρουσίαση (συν.) Τα επικαλυπτόμενα φύλλα στυλ (Cascading Style Sheets, CSS) είναι μια ισχυρή γλώσσα παρουσίασης HTML εγγράφων Η τεχνολογία CSS δίνει τη δυνατότητα προσδιορισμού κανόνων στυλ σε ένα εξωτερικό αρχείο (φύλλο στυλ) που διασυνδέεται σε κάθε σελίδα ενός website Η τεχνολογία CSS επιτρέπει το εύκολο έλεγχο της παρουσίασης ενός website Οι νεότεροι browsers παρέχουν πληρέστερη υποστήριξη στην τεχνολογία CSS Οργάνωση πληροφορίας με χρήση υπερκειμένου (hypertext) Η διασύνδεση πληροφορίας στο Web επιτυγχάνεται με χρήση υπερκειμένου, ενός μη γραμμικού τρόπου οργάνωσης της πληροφορίας Οι χρήστες του web μπορούν γρήγορα να μεταβούν από ένα σχετικό θέμα σε ένα άλλο Ως συγγραφείς υπερκειμένου, καθορίζετε ποιο τμήμα κειμένου θα μορφοποιηθεί ως σύνδεσμος υπερκειμένου 6

7 Μετάβαση από την HTML στην XHTML Μια σύντομη εισαγωγή στην XML Η XML δεν έχει προκαθορισμένα στοιχεία, όπως <h1> ή <p> Η XML είναι μια μεταγλώσσα (metalanguage), δηλαδή μια γλώσσα που σου επιτρέπει να δημιουργήσεις τα δικά σου στοιχεία σήμανσης πουν ταιριάζουν στις δικές σου πληροφοριακές ανάγκες Ο XML κώδικας έχει αρκετές ομοιότητες με τον HTML κώδικα 7

8 Πλεονεκτήματα της μετάβασης στην XHTML Η XHTML αποτελεί μια επαναδιατύπωση της HTML 4.01 σε μορφή XML Φέρνει τα πλεονεκτήματα χειρισμού δεδομένων της XML στην HTML Απαιτούνται φύλλα στυλ Αυστηρότεροι συντακτικοί κανόνες 3 εκδοχές : δ έ Strict, Transitional, i Frameset Συντακτικοί κανόνες της XHTML Τα έγγραφα πρέπει να είναι ορθά διατυπωμένα (well (well formed) Τα στοιχεία πρέπει να είναι σωστά φωλιασμένα το ένα μέσα στο άλλο Για την XML τα πεζά και κεφαλαία γράμματα είναι διαφοροποιημένα (είναι case sensitive) Οι ετικέτες λήξης (end tags) είναι υποχρεωτικές Τα κενά στοιχεία δηλώνονται με ένα ανάποδο slash Οι τιμές των ιδιοτήτων πρέπει να κλείνονται σε εισαγωγικά 8

9 Τα φύλλα στυλ είναι υποχρεωτικά Επειδή η XHTML είναι μια εφαρμογή της XML, πρέπει να χρησιμοποιείτε φύλλα στυλ για να προσδιορίσετε την παρουσίαση της πληροφορίας ενός XHTML εγγράφου Οι παρακάτω δύο γλώσσες φύλλων στυλ είναι διαθέσιμες για χρήση με την XML ή την XHTML: Cascading Style Sheets (CSS) Extensible Style Language (XSL) Η μετάβαση από την HTML στην XHTML Αξιολόγηση παλαιότερου κώδικα Αξιολόγηση υπάρχουσας πληροφορίας παρουσίασης Αρχίζουμε να χρησιμοποιούμε CSS Έλεγχος για συμβατότητα προς τα πίσω (backward compatibility) 9

10 Καλές πρακτικές συγγραφής κώδικα ιστοσελίδων Ακολουθήστε τα πρότυπα Ακολουθείστε τα πρότυπα του W3C (World Wide Web Consortium) Διαχωρίστε τη δομή του περιεχομένου από την παρουσίαση της πληροφορίας Το περιεχόμενο που σχεδιάζεται με βάση τα ισχύοντα πρότυπα εμφανίζεται από πολλαπλούς browsers με μεγαλύτερη συνέπεια 10

11 Χρησιμοποιήστε σημασιολογική σήμανση Η σημασιολογική σήμανση ση (semantic markup) είναι περιγραφική σήμανση που προσδιορίζει την επιδιωκόμενη χρήση διαφορετικών τμημάτων του εγγράφου Η σημασιολογική σήμανση περιγράφει επακριβώς ρβ κάθε τμήμα περιεχόμενου ένα <p> δηλώνει μια παράγραφο, ένα <blockquote> ένα απόσπασμα, κλπ Χρησιμοποιήστε το σωστό τύπο εγγράφου (Document Type) Όταν επιλέγετε τον τύπο εγγράφου, δηλώνετε ένα σύνολο κανόνων που ονομάζεται «ορισμός τύπου εγγράφου» (Document Type Definition, DTD) Τα DTDs περιέχουν όλα τα στοιχεία, ιδιότητες και κανόνες χρήσης για τη γλώσσα σήμανσης που χρησιμοποιείτε Τρεις τύποι εγγράφου, ή εκδοχές δ έ των HTML και XHTML είναι διαθέσιμοι: Strict Transitional Frameset 11

12 Δήλωση τύπου εγγράφου Ελέγξτε την εγκυρότητα του κώδικά σας Έγκυρος κώδικας (valid code) είναι εκείνος που συμμορφώνεται στους κανόνες του W3C Ο έγκυρος κώδικας ενισχύει τη συμβατότητα με διαφορετικούς browsers, την προσβασιμότητα και την ανταλλαγή δεδομένων Χρήση ενός προγράμματος λογισμικού που ονομάζεται «ελεγκτής εγκυρότητας (validator) για το διάβασμα του κώδικά σας και τον έλεγχό του ως προς τους κανόνες του DTD 12

13 Ελέγξτε την εγκυρότητα του κώδικά σας (συν.) Τα πιο συχνά λάθη που καθιστούν τον κώδικα μη έγκυρο είναι: Μη δήλωση του τύπου εγγράφου (doctype) Παράλειψη ετικετών λήξης, συνηθέστερα σε παραγράφους (<p>) Παράλειψη alt ιδιοτήτων σε στοιχεία <img> Λανθασμένο φώλιασμα (nesting) ετικετών Ιδιότητες που δεν είναι κλεισμένες σε εισαγωγικά Θέματα σχετικά με την Θέματα σχετικά με την συμβατότητα περιηγητών (browser compatibility) 13

14 Οδηγίες για την διασφάλιση συμβατότητας με browsers Ακολουθήστε τα W3C πρότυπα Ελέγξτε την εγκυρότητα του κώδικά σας Διερευνήστε τον πληθυσμό στόχο (target group) στον οποίο απευθύνεστε Ελέγξτε τη δουλειά σας σε πολλαπλούς browsers Θέματα που σχετίζονται με τις Θέματα που σχετίζονται με τις διαφορές στις ταχύτητες σύνδεσης 14

15 Θέματα που σχετίζονται με τις διαφορές στις ταχύτητες σύνδεσης Η πλειοψηφία των χρηστών Η/Υ στο δυτικό κόσμο έχουν πρόσβαση στο web με υψηλής ταχύτητας συνδέσεις Μεγάλο μέρος των χρηστών Internet παγκοσμίως χρησιμοποιεί ακόμα dial up modem συνδέσεις για να συνδεθεί στον ιστό Πολλοί επίσης χρησιμοποιούν κινητές συσκευές μέσω κινητών δικτύων που παρέχουν χαμηλές ταχύτητες πρόσβασης Οι web designers πρέπει να έχουν ως στόχο απλές σχεδιαστικές λύσεις ώστε οι σελίδες τους να φορτώνονται γρήγορα Ο αριθμός των γραφικών στις ιστοσελίδες σας αποτελεί τον κυριότερο παράγοντα που επηρεάζει την ταχύτητας μεταφόρτωσης μιας σελίδας Άλλοι παράγοντες: ενσωμάτωση flash movies, Java applets, κλπ Εργαλείο που υπολογίζει το χρόνο φόρτωσης ενός εγγράφου για διαφορετικές ταχύτητες σύνδεσης 15

16 Δουλεύοντας με την προσωρινή μνήμη για να βελτιωθεί ο χρόνος μεταφόρτωσης Η cache είναι μια προσωρινή περιοχή αποθήκευσης για ιστοσελίδες και εικόνες Ο browser πάντα προσπαθεί να φορτώνει εικόνες και αρχεία από την cache ώστε να μην αποφεύγει την περιττή μεταφόρτωση των ίδιων δεδομένων Πρέπει να επιδιώκετε τη χρήση της cache επαναχρησιμοποιώντας γραφικά όσο περισσότερο γίνεται Συγγραφή κώδικα ιστοσελίδων για πολλαπλές λέ αναλύσεις οθόνης (screen resolutions) 16

17 Σχεδιασμός για πολλαπλές αναλύσεις οθόνης Η ανάλυση οθόνης ενός Η/Υ / (screen resolution) είναι το πλάτος και ύψος της οθόνης σε εικονοστοιχεία (pixels) Μια αρκετά κοινή ανάλυση οθόνης (παραδοσιακά εκφράζεται ως width x height) είναι 1024 x 768 Η ανάλυση οθόνης του χρήστη αποτελεί ένα παράγοντα στον οποίο δε διατηρείτε τον έλεγχο Σταθερός σχεδιασμός (Fixed Design) Καθώς η ανάλυση οθόνης αλλάζει, το περιεχόμενο παραμένει στοιχισμένο στην αριστερή πλευρά της οθόνης 17

18 Σταθερός σχεδιασμός σε ανάλυση οθόνης 800 x 600 Σταθερός σχεδιασμός σε ανάλυση οθόνης 1024x

19 Ευέλικτος σχεδιασμός (Flexible Design) Καθώς η ανάλυση οθόνης αλλάζει, το περιεχόμενο επεκτείνεται για να απλωθεί σε όλο το διαθέσιμο χώρο οθόνης Χρησιμοποιώντας ευέλικτο σχεδιασμό, το περιεχόμενο γεμίζει ένα παράθυρο στα 800 x

20 Χρησιμοποιώντας ευέλικτο σχεδιασμό, η μεσαία στήλη της σελίδας επεκτείνεται για να γεμίζει ένα παράθυρο στα 1024x 768 Σχεδιασμός με στοίχιση στο κέντρο (Centered Design) Καθώς η ανάλυση οθόνης αλλάζει, η ιστοσελίδα παραμένει στοιχισμένη στο κέντρο του παραθύρου του browser, μοιράζοντας τον εναπομείναντα χώρο σε ίσα διαστήματα στην αριστερή και δεξιά πλευρά του παραθύρου του browser 20

21 Σχεδιασμός με στοίχιση στο κέντρο στα 800 x 600 Σχεδιασμός με στοίχιση στο κέντρο στα 1024 x

22 Θέματα που σχετίζονται με τα λειτουργικά συστήματα Λογισμικό οθόνης Εκδόσεις browsers Επιλογές γραμματοσειρών Επανάληψη Χρήση CSS Απόφαση μετάβασης στο πρότυπο XHTML Χρήση καλών πρακτικών στη συγγραφή κώδικα Επιλογή κατάλληλου εργαλείου (editing tool) για τη συγγραφή XHTML κώδικα Επιλογή των browsers στους οποίους θα ελεγχθεί το website 22

23 Επανάληψη(συν.) Απόφαση σχετικά με το κατά πόσο το website σας θα στοχεύσει συγκεκριμένους browsers Συνεχής και επαναλαμβανόμενος έλεγχος του website κατά την πορεία υλοποίησής του Έλεγχος σε πολλαπλούς browsers, διαφορετικές αναλύσεις οθόνης, και σε διαφορετικές ταχύτητες σύνδεσης Εφόσον είναι δυνατόν, προσπαθήστε να ελέγξετε το website σας σε πολλαπλές πλατφόρμες, όπως PC και Macintosh 23