TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Ιόνιο Πανεπιστήμιο» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 1

Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons 2

Δουλεύοντας με το κείμενο Ανάπτυξη Δικτυακών Τόπων 2

1. Οργάνωση Ενοτήτων Κειμένου Ανάπτυξη Δικτυακών Τόπων 3

Μια σημαντική άποψη της ανάπτυξης μιας ιστοσελίδας είναι ο σχεδιασμός ιδιαίτερα όταν το θέμα έρχεται στην οργάνωση των ενοτήτων του περιεχομένου μιας σελίδας. Ένα από τα ισχυρότερα χαρακτηριστικά των φύλλων στυλ είναι η δυνατότητα εύκολης εφαρμογής ομάδων χαρακτηριστικών (προδιαγραφών) μορφοποίησης σε ολόκληρες ενότητες κειμένου. Ανάπτυξη Δικτυακών Τόπων 4

1.1 Εντοπισμός των φυσιολογικών υποδιαιρέσεων (ενοτήτων) μιας σελίδας Οι ιστοσελίδες έχουν φυσιολογικές «υποδιαιρέσεις» ενότητες- οι οποίες εξαρτώνται από το είδος του περιεχομένου που τοποθετείται σε κάθε περιοχή της σελίδας. Από τις πιο κοινές ενότητες μιας σελίδας είναι ο τομέας πλοήγησης, το κυρίως κείμενο, η κεφαλίδα και το υποσέλιδο. Ο κώδικας που χρησιμοποιείται για το χωρισμό των ενοτήτων είναι παρόμοιος με τον ακόλουθο: Ανάπτυξη Δικτυακών Τόπων 5

συνέχεια <body> <div id= header > Εδώ τοποθετείται το περιεχόμενο για την κεφαλίδα </div> <div id= bodycopy > Εδώ τοποθετείται το κυρίως κείμενο. </div> <div id= footer > Εδώ τοποθετείται το περιεχόμενο για το υποσέλιδο. </div> </body> Αφού καθορίσετε τις βασικές ενότητες κατ αυτό τον τρόπο και χρησιμοποιήσετε φύλλα στυλ CSS για τη μορφοποίηση, οι δυνατότητές σας είναι κυριολεκτικά άπειρες. Ανάπτυξη Δικτυακών Τόπων 6

1.2 DIV + ID Όταν χρησιμοποιείτε το tag div για τον διαχωρισμό των ενοτήτων πρέπει να προσθέτετε την ιδιότητα id. Πρέπει να αναθέτετε μοναδικό όνομα σε κάθε ενότητα που ορίζετε με το tag div. Με αυτόν τον τρόπο θα μπορείτε να μορφοποιείτε εύκολα αυτές τις ενότητες περιεχομένου στο φύλλο στυλ το οποίο μπορεί να έχει την ακόλουθη μορφή: #header {border: 1px;} #bodycopy {font-family: Verdana; font-size: 12pt;} #footer {font-size: 10pt;} H # πριν το όνομα κάθε ενότητας είναι αναγκαία επειδή τα ονόματα δεν είναι από τους συνηθισμένους επιλογείς που χρησιμοποιούνται σε φύλλα στυλ. Ανάπτυξη Δικτυακών Τόπων 7

1.3 SPAN + CLASS Παρόμοια με το tag div, το tag span δεν έχει κάποιο δικό του διακριτικό χαρακτηριστικό που να γίνεται εμφανές σε μια HTML σελίδα. Το tag span χρησιμοποιείται καλύτερα σαν ένθετος μηχανισμός μορφοποίησης. <head> <style type= text/css > #introcopy {background-color: #cccccc;}.highlight {background-color: #ffcc66;} </style> <body> <div id= introcopy > <p>paragraph 1</p> <p>paragraph 2</p> </div> <p>paragraph <span class= highlight >3</span></p> <p>paragraph 4</p> </body> Ανάπτυξη Δικτυακών Τόπων 8

1.4 Μια Πηγή Έμπνευσης «Ο κήπος Ζεν για τα φύλλα στυλ CSS» www.csszengarden.com Αυτός ο δικτυακός τόπος δείχνει πώς μπορεί να μεταβληθεί δραστικά μια ιστοσελίδα αλλάζοντας απλώς το φύλλο στυλ που έχει προσαρτηθεί σε αυτή την σελίδα. Ο δημιουργός αφού διαχώρισε τη σελίδα σε ενότητες προσάρτησε κατόπιν ένα φύλλο στυλ με οδηγίες για τον τρόπο εμφάνισης κάθε μιας από αυτές τις ενότητες περιεχομένου. Ανάπτυξη Δικτυακών Τόπων 9

1.5 Αλλαγές Παραγράφων Για την αρχή και το τέλος μιας παραγράφου χρησιμοποιείται το tag p. Λειτουργεί σαν περιέκτης για παραγράφους κειμένου και εισάγει μία κενή γραμμή ανάμεσα σε διαδοχικές παραγράφους χωρίς να τις τοποθετεί αυτόματα σε εσοχή. Παράδειγμα: <p>jack and Jill went up a hill</p> <p>to fetch a pail of water</p> <p>jack fell down and broke his crown</p> <p>and Jill came tumbling after</p> Για να δημιουργηθεί η εσοχή στις παραγράφους χρησιμοποιείτε από τις προκαθορισμένες οντότητες χαρακτήρων» της HTML το μη διακοπτόμενο κενό διάστημα (nonbreaking space, ) όσες φορές απαιτείται. Ανάπτυξη Δικτυακών Τόπων 10

συνέχεια Ανάπτυξη Δικτυακών Τόπων 11

1.6 Εσοχές με Φύλλα Στυλ CSS Ένας αποτελεσματικός τρόπος για να τοποθετείτε σε εσοχή την πρώτη γραμμή μιας παραγράφου είναι η χρήση της ιδιότητας text-indent στο φύλλο στυλ σας. Παράδειγμα: <p style= text-indent: 25px >This is the first sentence Αν ήθελα όλες οι παράγραφοι της ενότητας bodycopy να έχουν εσοχή 25 pixels θα πρόσθετα την παρακάτω δήλωση στο φύλλο στυλ. Ανάπτυξη Δικτυακών Τόπων 12

1.7 Αλλαγές Γραμμών Μπορείτε επίσης να χρησιμοποιείτε το tag br για να προσθέσετε αλλαγές γραμμών σε μία HTML σελίδα. Η χρήση του ισοδυναμεί με το πάτημα του πλήκτρου return ή enter σε μία εφαρμογή επεξεργασίας κειμένου. Αναγκάζει την εφαρμογή browser να διακόψει την εμφάνιση κειμένου στην τρέχουσα γραμμή και να μεταβεί στην επόμενη γραμμή της σελίδας. Παράδειγμα: <p> Jack and Jill went up a hill<br /> To fetch a pail of water <br /> Jack fell down and broke his crown <br /> And Jill came tumbling after</p> Αυτό λέει στην εφαρμογή browser να σταματήσει σ αυτό το σημείο και να αλλάξει γραμμή Επειδή δεν υπάρχει ειδικό tag τέλους για το tag br, η XHTML απαιτεί να προσθέτετε ένα κενό διάστημα και ένα / πριν από το τελικό σύμβολο >. Ανάπτυξη Δικτυακών Τόπων 13

συνέχεια Μπορείτε επίσης να χρησιμοποιείτε το tag br για την προσθήκη πολλαπλών αλλαγών γραμμών. Ανάπτυξη Δικτυακών Τόπων 14

1.8 Το tag pre Το tag pre είναι συντομογραφία του preformat (μορφοποίηση εκ των προτέρων) και αποδίδει το κείμενο στην εφαρμογή browser ακριβώς όπως το πληκτρολογείτε. Γιατί δεν χρησιμοποιούμε το tag pre για πάντα; 1. Εμφανίζει το κείμενο με μη αναλογική γραμματοσειρά, όπως η courier, η οποία δείχνει παρόμοια με το κείμενο που παράγει μια γραφομηχανή. 2. Η εμφάνιση του κειμένου δεν είναι εγγυημένο ότι θα είναι ακριβώς όπως την είχατε φανταστεί. Ανάπτυξη Δικτυακών Τόπων 15

1.9 Μπλοκ Κειμένου και Πλάισια Κειμένου Το tag blockquote σας δίνει τη δυνατότητα να διαχωρίσετε ένα μεγάλο απόσπασμα κειμένου ή μια σημείωση η οποία σε άλλη περίπτωση θα «χανόταν» μέσα σε μια παράγραφο κειμένου. Τοποθετεί σε εσοχή ολόκληρο το απόσπασμα που επιλέγετε, αριστερά και δεξιά, ενώ προσθέτει επίσης μια κενή γραμμή πάνω και κάτω. Ανάπτυξη Δικτυακών Τόπων 17

συνέχεια Για να επιτύχετε ένα συγκεκριμένο μέγεθος εσοχής και για να ελέγχετε τον κενό χώρο πάνω και κάτω μπορείτε να χρησιμοποιείτε τις ιδιότητες margin και padding στο φύλλο του στυλ CSS. Ανάπτυξη Δικτυακών Τόπων 19

συνέχεια Η ιδιότητα padding επηρεάζει το «περιθώριο ασφαλείας» μέσα από τα όρια του πλαισίου κειμένου. Παράδειγμα: blockquote {padding-bottom: 25px; padding-top: 25px; padding-right: 25px; padding-left: 25px;} Η ιδιότητα margin επηρεάζει το «περιθώριο ασφαλείας» έξω από τα όρια του πλαισίου κειμένου, άρα δεν αφαιρεί ωφέλιμο χώρο από το πλαίσιο περιεχομένου. {margin-bottom: 25px; margin-top: 25px; margin-right: 15px; margin-left: 15px;} Ανάπτυξη Δικτυακών Τόπων 20

1.10 Οριζόντιες Γραμμές Ένας τρόπος με τον οποίο μπορείτε να διαχωρίζετε οτικά τις ενότητες περιεχομένου μιας σελίδας είναι χρησιμοποιώντας το tag hr. Αυτό το tag παράγει μια λεπτή γκρι οριζόντια γραμμή (horizontal rule). Παράδειγμα: <p>12/5/02</p> <p>tonight s homework is to read chapter 13. Be prepared to answer several questions about the chapter in class tomorrow.</p> <hr /> <p>w. Willard, Instructor<br /> Fall, 2006.</p> Ανάπτυξη Δικτυακών Τόπων 21

συνέχεια Ένας καλύτερος τρόπος για να δημιουργείτε οριζόντιες γραμμές είναι χρησιμοποιώντας τις ιδιότητες περιγραμμάτων (border) στα φύλλα στυλ. Η χρήση φύλλων στυλ για τη δημιουργία γραμμών σε μια ιστοσελίδα είναι πιο ευέλικτη. Ανάπτυξη Δικτυακών Τόπων 22

1.11 Στοίχιση Η τυπική στοίχιση του κειμένου εξαρτάται από το πώς διαβάζεται το κείμενο στην σελίδα. Εάν διαβάζεται από αριστερά προς τα δεξιά τότε η τυπική στοίχιση είναι η αριστερή ενώ αν διαβάζεται από τα δεξιά προς τα αριστερά η τυπική στοίχιση είναι η δεξιά. Και στις δυο περιπτώσεις η αντίθετη πλευρά παραμένει ανομοιόμορφη, δηλαδή το κείμενο δε φτάνει ως το περιθώριο. Όταν το κείμενο φτάνει έως το περιθώριο και στις δυο πλευρές αποκαλείται πλήρως στοιχισμένο. Η ιδιότητα text-align των φύλλων στυλ σας επιτρέπει να αλλάξετε τη στοίχιση του κειμένου: 1.Αριστερή (left) 2. Δεξιά (right) 3. Κέντρου (center) 4. Πλήρης (justify) Ανάπτυξη Δικτυακών Τόπων 23

συνέχεια Η χρήση φύλλων στυλ μας επιτρέπει να στοιχίζουμε το κείμενο κατακόρυφα με την ιδιότητα vertical-align. Ανάπτυξη Δικτυακών Τόπων 24

συνέχεια Το ακόλουθο απόσπασμα κώδικα παρέχει ένα παράδειγμα του τρόπου με τον οποίο ένα ενσωματωμένο φύλλο στυλ μπορεί να αλλάξει τη στοίχιση του κειμένου. Ανάπτυξη Δικτυακών Τόπων 25

συνέχεια Εάν θέλετε να εφαρμόσετε πλήρη στοίχιση και στις 3 παραγράφους θα πρέπει να έχετε σχεδιάσει σωστά τη σελίδα και να έχετε διαχωρίσει τις ενότητες περιεχομένου με tags div και εκμεταλλευόμενοι την οργάνωση αυτή να προσθέσετε την ιδιότητα text-align στον κατάλληλο επιλογέα div στο φύλλο στυλ σας. Παράδειγμα: <div id= CampDescription > <p>paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> </div> Στη συνέχεια στο φύλλο στυλ χρησιμοποιώ το όνομα CampDescription όταν καθορίζω τη μορφοποίηση. Έτσι λοιπόν προσθέτω στο φύλλο στυλ #CampDescription {text-align: justify;} Ανάπτυξη Δικτυακών Τόπων 27

Αποτελεσματική Ανάπτυξη Περιεχομένου για το Web Ανάπτυξη Δικτυακών Τόπων 28

1. Διασφάλιση της Αναγνωσιμότητας του Κειμένου στην Οθόνη Ανάπτυξη Δικτυακών Τόπων 29

Η ανάγνωση μεγάλων ποσοτήτων κειμένου σε μια οθόνη δεν είναι μόνο δύσκολη για τα μάτια αλλά επίσης κουραστική και άβολη. Για να κάνετε τα πράγματα ευκολότερα για τους αναγνώστες των ιστοσελίδων σας καλό θα ήταν να ακολουθείτε τις έξης οδηγίες: Κάντε το κείμενο σύντομο και περιεκτικό: οι περισσότεροι αναγνώστες δεν «αντέχουν» μακροσκελή κείμενα. Διαχωρίστε τις παραγράφους με κενές γραμμές: χρησιμοποιήστε tags παραγράφων (<p>) για να αφήνετε μια κενή γραμμή ανάμεσα τους. Περιορίστε τα πλάτη των στηλών: αποφύγετε στήλες πλάτους 500 pixels. Να αποφεύγετε την υπογράμμιση: προκαλείτε σύγχυση στους χρήστες. Ανάπτυξη Δικτυακών Τόπων 30

συνέχεια Να είστε μετριοπαθείς όταν κεντράρετε κείμενο. Να εφαρμόζετε έμφαση στο σημαντικό κείμενο, αλλά όχι καθ υπερβολή. Να αποφεύγετε τη χρήση μόνο κεφαλαίων χαρακτήρων. Να χρησιμοποιείτε λίστες και να ομαδοποιείτε τις πληροφορίες που σχετίζονται μεταξύ τους. Να τοποθετείτε τις σημαντικότερες πληροφορίες στην αρχή της σελίδας. Να διευκολύνετε την εύρεση των πληροφοριών. Να θυμάστε ότι οι περισσότεροι άνθρωποι (χρήστες) «σαρώνουν» τις ιστοσελίδες δεν τις διαβάζουν λέξη προς λέξη. Ανάπτυξη Δικτυακών Τόπων 31

2. Αποτελεσματικές Συνδέσεις Ανάπτυξη Δικτυακών Τόπων 32

Το Web είναι συνώνυμο με τις συνδέσεις. Ένα από τα προβλήματα που παρουσιάζεται σε πολλές ιστοσελίδες είναι το γνωστό σύνδρομο «κάντε κλικ εδώ». Παράδειγμα: Οι λέξεις click here που είναι υπογραμμισμένες δεν διαφωτίζουν τον χρήστη σχετικά με το τι θα βρει όταν κάνει κλικ στη σύνδεση αυτή. Τώρα οι λέξεις Woolwich, England ξεχωρίζουν και παρέχουν στο χρήστη περισσότερες πληροφορίες με το τι θα βρει αν κάνει κλικ πάνω τους. Ανάπτυξη Δικτυακών Τόπων 33

3. Διαμόρφωση των Σελίδων για Σωστή Εκτύπωση Ανάπτυξη Δικτυακών Τόπων 34

3.1 PDF Αρχεία Μια λύση στο πρόβλημα της εκτύπωσης είναι να δίνετε στους χρήστες τη δυνατότητα να μεταφέρουν εκδόσεις των εγγράφων σας κατάλληλες για εκτύπωση (PostScript αρχεία). Ένα PostScript αρχείο δημιουργείται εξ αρχής με στόχο την εκτύπωση σε αντίθεση με τα HTML αρχεία. Η μορφή αρχείου pdf επιτρέπει να πάρετε οποιοδήποτε αρχείο από ένα άλλο πρόγραμμα και να το αποθηκεύσετε σε μια καθολικά αναγνωρίσιμη μορφή αρχείου με επέκταση.pdf. Τα pdf αρχεία δείχνουν ίδια σε όλες τις πλατφόρμες υπολογιστών ακόμα και όταν εκτυπώνονται. Ανάπτυξη Δικτυακών Τόπων 35

3.2 Φύλλα Στυλ Κατάλληλα για Εκτύπωση Σε κάποιες ιστοσελίδες μπορεί να δείτε «click here for printer version» (κάντε κλικ εδώ για μια έκδοση της σελίδας κατάλληλη για εκτύπωση). Αυτό θα σε οδηγεί ή σε ένα αρχείο pdf ή σε μια διαφορετική HTML έκδοση της σελίδας η οποία χρησιμοποιεί ένα φύλλο στυλ κατάλληλο για εκτύπωση. Όταν χρησιμοποιείτε εξωτερικά φύλλα στυλ μπορείτε να προσθέσετε την ιδιότητα media στο tag της σύνδεσης για να πείτε στον browser πότε να χρησιμοποιεί ένα συγκεκριμένο φύλλο στυλ. <link type= text/css media= print href= print.css /> <link type= text/css media= screen href= screen.css /> Ανάπτυξη Δικτυακών Τόπων 36

συνέχεια Τροποποιήσεις που θα πρέπει να κάνετε στο φύλλο στυλ έτσι ώστε η σελίδα να εκτυπώνεται σωστά. 1. Φόντα: Να καθορίζετε πάντα το χρώμα του φόντου σε λευκό και να καταργείτε τυχόν εικόνες που μπορεί να εμφανίζονται στο φόντο της σελίδας. body {background: white;} 2. Συνδέσεις: Ενεργοποίηση της υπογράμμισης στις συνδέσεις ώστε να ξεχωρίζουν. Επίσης οι προδιαγραφές CSS-2 σας επιτρέπουν ακόμα και να ζητήσετε την εμφάνιση της διεύθυνσης URL μετά από τις συνδέσεις. Το ίδιο μπορεί να γίνεται και για τις εσωτερικές συνδέσεις. a:link:after, a:visited:after { content: (http://www.mywebsite.com attr(href) ) ;} Ανάπτυξη Δικτυακών Τόπων 37

συνέχεια 3. Γραμματοσειρές: Η μονάδα μέτρησης για το μέγεθος του κειμένου στα έντυπα είναι οι στιγμές (points). Συνεπώς αν χρησιμοποιείτε διαφορετική μονάδα πχ. (pixels) θα πρέπει να την αλλάξετε. body {background: white; font-size: 12pt;} 4. Εσωτερικά και εξωτερικά περιθώρια: Αν έχετε καταργήσει όλα τα εξωτερικά και εσωτερικά περιθώρια (margins & padding) στην ιστοσελίδα σας, με αποτέλεσμα τα διάφορα στοιχεία της να πέφτουν το ένα πάνω στο άλλο, θα πρέπει να αφαιρέσετε αυτές τις δηλώσεις από το κατάλληλο για εκτύπωση φύλλο στυλ. Ανάπτυξη Δικτυακών Τόπων 38

3.3 Τελικές Συμβουλές για τη Δημιουργία «Κατάλληλων για Εκτύπωση» Σελίδων Οποτεδήποτε δημιουργείτε σελίδες με προορισμό την εκτύπωση, είτε με PDF αρχεία είτε με φύλλα στυλ κατάλληλα για εκτύπωση, να θυμάστε: Μέγεθος σελίδας: Οι ιστοσελίδες είναι σχεδιασμένες για τη μορφή της οθόνης, ενώ οι κατάλληλες για εκτύπωση σελίδες πρέπει να είναι σχεδιασμένες για το μέγεθος του χαρτιού. Χρώματα: Να αποφεύγετε τα σκούρα χρώματα στο φόντο των εκτυπωμένων σελίδων. Πληροφορίες αναφοράς: Να περιλαμβάνεται πάντα η διεύθυνση της ιστοσελίδας στην εκτυπωμένη έκδοσή της. Ανάλυση εικόνων: Λόγω της χαμηλής ανάλυσης των εικόνων και των γραφικών στο web καλό είναι να αποφεύγετε να τα χρησιμοποιείτε στις κατάλληλες για εκτύπωση σελίδες σας. Ανάπτυξη Δικτυακών Τόπων 39