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

Transcript

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

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

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

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

5 1. Χρήση Εικόνων σαν Στοιχεία Προσκηνίου σε Μια Ιστοσελίδα Ανάπτυξη Δικτυακών Τόπων 3

6 Μπορείτε να προσθέτετε εικόνες σε οποιοδήποτε σημείο μιας ιστοσελίδας χρησιμοποιώντας το tag img (image) και να προσθέτετε την ιδιότητα src (source) και να της παρέχετε την κατάλληλη τιμή. Παράδειγμα: Ανάπτυξη Δικτυακών Τόπων 4

7 συνέχεια Η εικόνα θα πρέπει να είναι αποθηκευμένη σε μια μορφή αρχείου χρησιμοποιήσιμη στο web όπως οι gif, jpeg, png. Η τιμή της ιδιότητας src θα πρέπει να περιλαμβάνει το όνομα της διαδρομής (φακέλων) που αντικατοπτρίζει τη θέση του αρχείου. Όταν ο φάκελος είναι σε ένα υψηλότερο επίπεδο χρησιμοποιήστε το src=../photo.jpg. Το../ λέει στον browser να μεταβεί ένα επίπεδο πιο πάνω στη δομή των φακέλων πριν αρχίσει να αναζητά το αρχείο της εικόνας. Κάθε εικόνα θα πρέπει να εξυπηρετεί κάποιο σκοπό και να προσθέτει κάτι στην ιστοσελίδα μας. Ανάπτυξη Δικτυακών Τόπων 5

8 1.1 Μορφές Αρχείων Εικόνων Οι πιο κοινές και ευρέως υποστηριζόμενες μορφές αρχείων εικόνων είναι οι: GIF: ακρωνύμιο του Graphic Interchange Format. Είναι καταλληλότερη για γραφικά με «επίπεδα» χρώματα (χωρίς τονικές διαβαθμίσεις) όπως πχ. κόμικς, γραμμικά σχέδια κ.α. JPEG: ακρωνύμιο του Joint Photographic Experts Group. Δημιουργήθηκε για την αποθήκευση φωτογραφικών εικόνων και δεν πρέπει να χρησιμοποιείται με γραφικά που έχουν επίπεδα χρώματα. PNG: ακρωνύμιο του Portable Network Graphics. Χρησιμοποιείται ευρέως τα τελευταία χρόνια και έχει κοινά στοιχεία με τις GIF και JPEG. Ανάπτυξη Δικτυακών Τόπων 6

9 1.2 Χρήση Υπαρχόντων Γραφικών Έτοιμες Φωτογραφίες: Μπορείτε να αγοράσετε cds με θεματικές συλλογές φωτογραφιών. Επίσης μπορείτε να ψάξετε στο internet και να αγοράσετε το δικαίωμα μιας και μόνο φωτογραφίας ή να βρείτε φωτογραφίες που να είναι δωρεάν. Έτοιμες Εικόνες Clipart: Μπορείτε να τις βρείτε αγοράζοντας ένα cd με μια συλλογή με διάφορους τύπους εικόνων clipart. Επίσης υπάρχουν πολλές συλλογές online όπου μπορείτε να ψάχνετε τα είδη των γραφικών που χρειάζεστε. Ανάπτυξη Δικτυακών Τόπων 7

10 2. Καθορισμός του Ύψους και του Πλάτους των Εικόνων Ανάπτυξη Δικτυακών Τόπων 8

11 Επειδή δεν γνωρίζουν το μέγεθος των εικόνων, ορισμένοι browsers δεν εμφανίζουν την ιστοσελίδα παρά μόνο αφού φορτωθούν οι εικόνες. Μπορείτε να μειώσετε τον χρόνο αναμονής κοινοποιώντας στον browser τις διαστάσεις των εικόνων. Εάν δεν γνωρίζετε τις διαστάσεις της εικόνας μπορείτε να την ανοίξετε σε ένα πρόγραμμα γραφικών. Ανάπτυξη Δικτυακών Τόπων 9

12 3. Παροχή Εναλλακτικού Κειμένου και Τίτλων για τις Εικόνες Ανάπτυξη Δικτυακών Τόπων 10

13 Κάποιοι από τους χρήστες δεν θα μπορούν να βλέπουν τις εικόνες των ιστοσελίδων σας για διάφορους λόγους οι συνηθέστεροι των οποίων είναι: Έχουν απενεργοποιήσει τη δυνατότητα εμφάνισης εικόνων στον browser που χρησιμοποιούν. Χρησιμοποιούν browser που υποστηρίζει μόνο κείμενο. Η εικόνα δεν εμφανίζεται. Μπορείτε να βοηθήσετε τους επισκέπτες σας να κατανοούν το περιεχόμενο ακόμα και αν δε βλέπουν τις εικόνες. Αυτό μπορείτε να το κάνετε με την ιδιότητα alt του tag img για να παρέχετε εναλλακτικό κείμενο για μια εικόνα. Η τιμή της ιδιότητας alt εμφανίζεται μέσα σε ένα πλαίσιο στη θέση της εικόνας. Ανάπτυξη Δικτυακών Τόπων 11

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

15 συνέχεια Ένα άλλο μεγάλο όφελος της ιδιότητας alt είναι ότι ακόμα και οι επισκέπτες που βλέπουν την εικόνα μπορούν να διαβάσουν το εναλλακτικό κείμενο γι αυτή. Ανάπτυξη Δικτυακών Τόπων 13

16 συνέχεια Επιπρόσθετα με την ιδιότητα alt καλό είναι να προσθέτετε την ιδιότητα title στο tag img. Η ιδιότητα αυτή εξυπηρετεί σαν μια «γρήγορη υπόδειξη» που επεξηγεί εν συντομία στους χρήστες τα περιεχόμενα του συγκεκριμένου στοιχείου της σελίδας στην περίπτωσή μας, μιας εικόνας. Το μεγαλύτερο πλεονέκτημα της ιδιότητας title είναι ότι τα περιεχόμενά της εμφανίζονται σαν «πλαίσια συμβουλών» σε όλες τις σύγχρονες εφαρμογές browser. Ανάπτυξη Δικτυακών Τόπων 14

17 4. Διασύνδεση Εικόνων με Άλλο Περιεχόμενο Ενός Δικτυακού Τόπου Ανάπτυξη Δικτυακών Τόπων 15

18 4.1 Χρήση Ολόκληρης της Εικόνας για τη Δημιουργία Μιας Σύνδεσης Για να δημιουργήσετε μια σύνδεση από μια ολόκληρη εικόνα χρειάζεται να «περικλείσετε» το tag img μέσα στο tag a, το οποίο περιλαμβάνει την κατάλληλη τιμή στην ιδιότητα href. <a href= ><img src= choppoint_468x60.gif width= 468 height= 60 alt= LINK: Chop Point Summer Camp in Woolwich, Maine /></a> Ανάπτυξη Δικτυακών Τόπων 16

19 4.2 Δημιουργία Συνδέσεων από Τμήματα μιας Εικόνας Μπορείτε να χρησιμοποιείτε επιμέρους τμήματα μιας εικόνας σαν συνδέσεις δημιουργώντας ένα tag image map. Οι συνδέσεις είναι τμήματα της εικόνας και όχι ολόκληρη και ο δείκτης αλλάζει σε μορφή χεριού όταν περνάει πάνω από τις ενεργές περιοχές (hot spots) της εικόνας. Παράδειγμα image map είναι ο χάρτης των Η.Π.Α όπου κάθε πολιτεία θα μπορούσε να καθοριστεί σαν ενεργή περιοχή με δική της σύνδεση. Ανάπτυξη Δικτυακών Τόπων 17

22 συνέχεια Όταν χρησιμοποιείτε την ιδιότητα usemap, δηλώνετε το οποιοδήποτε όνομα δώσατε στο image map, μέσω του tag map. Έτσι στο παράδειγμά μας η εικόνα του χάρτη συσχετίζεται με ένα image map που ονομάζεται usa (usemap= #usa ), το οποίο ορίζεται με το <map name= usa >. Η τιμή της ιδιότητας usemap (στην περίπτωσή μας, usa) θα πρέπει να περικλείεται σε εισαγωγικά και να φέρει σαν πρόθεμα το σύμβολο #. <map name= #usa > To tag map περικλείει όλες τις άλλες πληροφορίες που ορίζουν τις ενεργές περιοχές στην εικόνα σας. Τόσο το αρχικό όσο και το τελικό tag είναι υποχρεωτικά. Ανάπτυξη Δικτυακών Τόπων 20

23 συνέχεια Το tag map και οι πληροφορίες που περικλείει μπορούν να τοποθετούνται οπουδήποτε μέσα στο HTML αρχείο της σελίδας σας. Η ιδιότητα name χρησιμοποιείται με το tag map για να σας δώσει τη δυνατότητα να αναφέρεστε στο image map από οποιοδήποτε άλλο σημείο της σελίδας. Ανάμεσα στο αρχικό και τελικό tag περιλαμβάνονται τα tags area που ορίζουν κάθε ενεργή περιοχή. Το tag area έχει τέσσερις βασικές ιδιότητες. Ανάπτυξη Δικτυακών Τόπων 21

24 συνέχεια Ιδιότητες του tag area Ανάπτυξη Δικτυακών Τόπων 22

25 4.3 Εύρεση Συντεταγμένων για τις Ενεργές Περιοχές Μπορείτε να χρησιμοποιείτε προγράμματα γραφικών για να βρίσκετε τις συντεταγμένες των περιοχών. Αν πάλι γράψετε μόνοι σας των κώδικα μπορείτε να χρησιμοποιήσετε το πρόγραμμα Paint (Ζωγραφική) για να βρείτε τις συντεταγμένες. Ανάπτυξη Δικτυακών Τόπων 23

26 5. Μορφοποίηση Εικόνων Ανάπτυξη Δικτυακών Τόπων 24

27 5.1 Περιγράμματα Όλες οι εικόνες που ορίζονται ως συνδέσεις λαμβάνουν αυτομάτως περίγραμμα, ακριβώς όπως οι συνδέσεις κειμένου εμφανίζονται με υπογράμμιση. Η ιδιότητα border ορίζεται σε pixels με την προεπιλεγμένη τιμή της να είναι 1 για τις εικόνεςσύνδεση και 0 για τις εικόνες που δεν χρησιμοποιούνται ως συνδέσεις. Η τιμή 0 απενεργοποιεί το περίγραμμα κάνοντάς το αόρατο. Η επιτροπή του W3C απέσυρε την ιδιότητα border και αντί αυτής συστήνει να προσαρμόζετε την εμφάνιση των img περιγραμμάτων σε φύλλα στυλ. border-width: 0; Ανάπτυξη Δικτυακών Τόπων 25

28 συνέχεια Ιδιότητες φύλλων στυλ που σχετίζονται με τα περιγράμματα Border-width: Ελέγχει το μέγεθος-πάχος- των περιγραμμάτων σε ατομικό επίπεδο ή συνολικά. Border-color: Ελέγχει το χρώμα του περιγράμματος επιτρέποντάς σας να καθορίσετε από μια έως τέσσερις τιμές. Border-style: Αλλάζει το στυλ του περιγράμματος. Ανάπτυξη Δικτυακών Τόπων 26

30 5.2 Ροή Κειμένου Γύρω από τις Εικόνες Οποτεδήποτε εμφανίζεται μια εικόνα μέσα σε μια ενότητα κειμένου, μπορείτε να αλλάξετε την ευθυγράμμισή της έτσι ώστε η εικόνα να εντάσσεται μέσα στη ροή του κειμένου αντί να εμφανίζεται πάνω ή κάτω από αυτό. Ένας απλός και γρήγορος τρόπος για να εντάσσετε μια εικόνα στη ροή του κειμένου μιας σελίδας είναι με την ιδιότητα float των φύλλων στυλ CSS σε συνδυασμό με την τιμή left ή right. Ανάπτυξη Δικτυακών Τόπων 28

31 5.3 Ένταξη μιας Εικόνας στη Ροή του Κειμένου Η ιδιότητα float λέει στον browser να τοποθετήσει το στοιχείο στο οποίο εφαρμόζεται πλησιέστερα στην πλευρά που καθορίζει και κατόπιν να προσαρμόσει τη ροή του υπόλοιπου περιεχομένου της σελίδας γύρω της. Το περιεχόμενο ρέει αυτόματα κατά μήκος της δεξιάς πλευράς μιας εικόνας που ορίζεται με την τιμή left στη ιδιότητα float. <img src= jsmith.gif alt= John Smith, CEO width= 100 height= 116 style= float: right; /> Ανάπτυξη Δικτυακών Τόπων 29

32 συνέχεια Κατάργηση των προδιαγραφών ροής: Περιστασιακά ίσως χρειαστεί να διακόψετε ή να ακυρώσετε τη ροή κειμένου γύρω από μια εικόνα. Αυτό επιτυγχάνεται με την προσθήκη της ιδιότητας clear. Ανάπτυξη Δικτυακών Τόπων 30

33 5.4 Έλεγχος της Ροής Κειμένου για Ομάδες Εικόνων Αν έχετε πολλές εικόνες για να βάλετε σε μια σελίδα και έχουν όλες το ίδιο μέγεθος μπορείτε εύκολα να χρησιμοποιήσετε την ιδιότητα float και να τις τοποθετήσει ο browser αυτόματα σε σειρές. Ανάπτυξη Δικτυακών Τόπων 31

35 5.5 Εσωτερικά και Εξωτερικά Περιθώρια Οι ιδιότητες margin και padding μπορούν να εφαρμόζονται σε εικόνες για το καθορισμό των εσωτερικών και εξωτερικών περιθωρίων. Παράδειγμα: Θέλετε να προσθέσετε λίγο κενό χώρο στην αριστερή πλευρά μιας εικόνας αλλά καθόλου στη δεξιά πλευρά. Προσθέτοντας την ιδιότητα margin-left στο φύλλο στυλ ή μέσα στο tag img θα μπορούσατε να δημιουργήσετε κενό χώρο μόνο στην αριστερή πλευρά. <img src= photo.jpg width= 200 height= 200 style= marginleft: 25px; /> Ανάπτυξη Δικτυακών Τόπων 33

36 5.6 Κεντράρισμα Για τις εικόνες δεν προβλέπεται κάποια ιδιότητα center. Πρώτα πρέπει να πούμε στον browser να εμφανίσει την εικόνα σαν ένα στοιχείο επιπέδου μπλοκ (block element). Στα φύλλα στυλ CSS τα στοιχεία επιπέδου μπλοκ γεμίζουν αυτόματα όλο το διαθέσιμο χώρο. Στη συνέχεια λέμε στον browser να εξισώσει το αριστερό και το δεξιό περιθώριο και έτσι πετυχαίνουμε το κεντράρισμα της εικόνας. Ανάπτυξη Δικτυακών Τόπων 34

37 5. Χρήση Εικόνων σαν Στοιχεία για το Φόντο Ιστοσελίδων Ανάπτυξη Δικτυακών Τόπων 35

38 Οι εικόνες μπορούν να παίξουν έναν ακόμα ρόλο στις ιστοσελίδες: σαν φόντο. Για το σκοπό αυτό χρησιμοποιείται πλέον η ιδιότητα background-image σε μια δήλωση στυλ για το tag body. body {background-image: url( pattern.jpg );} Ένα πλεονέκτημα της ιδιότητας background-image είναι ότι μπορεί να προστίθεται σε πολλά στοιχεία των σελίδων. Η χρήση μιας εικόνας στο φόντο παρέχει αρκετά πλεονεκτήματα: Μπορείτε να υλοποιήσετε μια σύνθετη σχεδίαση Οι εικόνες φόντου εμφανίζονται από την κορυφή της σελίδας και φτάνουν μέχρι τα άκρα τους. Η προσθήκη φόντου σε στοιχεία μιας σελίδας είναι ένας τρόπος για να διαχωρίσετε οπτικά αυτό το περιεχόμενο. Ανάπτυξη Δικτυακών Τόπων 36

39 Όταν εισάγετε μια εικόνα φόντου με την HTML θα πρέπει να έχετε υπόψη: Εξ ορισμού όλες οι εικόνες φόντου εμφανίζονται σε πλευρική παράθεση (tile). Μπορείτε να συμπεριλάβετε μόνο μια εικόνα στο φόντο. Το κείμενο που υπάρχει στο προσκήνιο πρέπει να είναι ευανάγνωστο πάνω στο φόντο. Οι εικόνες που χρησιμοποιείτε σαν φόντο πρέπει να έχουν μικρό μέγεθος αρχείου. Ένας τρόπος για να παραμένει στατική η εικόνα του φόντου είναι να χρησιμοποιείτε την ιδιότητα backgroundattachment στο φύλλο στυλ της σελίδας. body {background-image: url( picture.gif ); background-attachment: fixed; background-repeat: no-repeat;} Ανάπτυξη Δικτυακών Τόπων 37

40 Πιθανές τιμές για την ιδιότητα background-repeat είναι οι ακόλουθες: repeat: καθορίζει ότι η εικόνα θα επαναλαμβάνεται οριζόντια και κατακόρυφα. repeat-x: καθορίζει ότι η εικόνα θα επαναλαμβάνεται μόνο στην οριζόντια διεύθυνση repeat-y: καθορίζει ότι η εικόνα θα επαναλαμβάνεται μόνο στην κατακόρυφη διεύθυνση. no-repeat: καθορίζει ότι η εικόνα δεν θα επαναλαμβάνεται. Ανάπτυξη Δικτυακών Τόπων 38

41 Δουλεύοντας με Πολυμέσα Ανάπτυξη Δικτυακών Τόπων 39

42 Στο Internet ο όρος multimedia (πολυμέσα) χρησιμοποιείται για να περιγράψει διάφορους τύπους μέσων, όπως ο ήχος, η εικόνα βίντεο, το κείμενο, τα γραφικά ή το animation (κινούμενη εικόνα) τα οποία ενοποιούνται και ενσωματώνονται σε μια μορφή αρχείου. Οι περισσότεροι browsers κατανοούν τους εξής τύπους αρχείων: HTML, αρχεία γραφικών όπως GIF και JPEG, έγγραφα απλού κειμένου (.txt). Ο χειρισμός όλων των άλλων τύπων αρχείων γίνεται με τη βοήθεια κάποιου πρόσθετου (plug-in), στοιχείου ελέγχου ActiveX, ή βοηθητικής εφαρμογής. Ανάπτυξη Δικτυακών Τόπων 40

43 1. Πώς Χρησιμοποιούνται τα Πρόσθετα και τα Στοιχεία Ελέγχου ActiveX από τις Εφαρμογές Web Browser Ανάπτυξη Δικτυακών Τόπων 41

44 Μια βοηθητική εφαρμογή είναι λογισμικό το οποίο εκτελεί κάποια συγκεκριμένη εργασία που αδυνατεί να εκτελέσει ο browser. Ένα πρόσθετο ή στοιχείο ελέγχου ActiveX βοηθά τον browser να κάνει μια δουλειά μόνος του σε αντίθεση με τη βοηθητική εφαρμογή που την κάνει η ίδια για χάρη του browser. Οι βοηθητικές εφαρμογές είναι αυτόνομα προγράμματα όπου μπορείτε να τα αγοράσετε και να τα εγκαταστήσετε στον υπολογιστή σας. Τα πρόσθετα και τα στοιχεία ActiveX είναι συνήθως δωρεάν λογισμικό το οποίο μπορείτε να το μεταφέρετε από το Internet. Ανάπτυξη Δικτυακών Τόπων 42

45 1.1 Εντοπισμός και Αναγνώριση των Εγκατεστημένων Συστατικών Μπορείτε να εξακριβώσετε ποια πρόσθετα είναι εγκατεστημένα στην εφαρμογή browser που χρησιμοποιείτε ψάχνοντας στον ειδικό φάκελο εγκατάστασης πρόσθετων (συνήθως έχει το όνομα plugins) μέσα στον φάκελο της εφαρμογής browser. Ανάπτυξη Δικτυακών Τόπων 43

46 1.2 Αναγνώριση Τύπων Αρχείων, Επεκτάσεων και των Κατάλληλων Πρόσθετων Οι περισσότεροι τύποι αρχείων μπορούν να αναπαράγονται με τη βοήθεια τουλάχιστον ενός πρόσθετου ή κάποιας βοηθητικής εφαρμογής ενώ, σε πολλές περιπτώσεις, υπάρχουν περισσότερα τέτοια εργαλεία. Για τη διευκόλυνση των επισκεπτών μπορείτε να αναφέρετε το πρόσθετο ή τη βοηθητική εφαρμογή που θα πρέπει να χρησιμοποιήσουν για να ανοίξουν τα αρχεία σας. Θα μπορούσατε επίσης να παρέχετε μια σύνδεση για τη μεταφορά (download) του κατάλληλου πρόσθετου. Ανάπτυξη Δικτυακών Τόπων 44

47 2. Ενσωμάτωση Διαφόρων Τύπων Πολυμέσων σε μια Ιστοσελίδα Ανάπτυξη Δικτυακών Τόπων 45

48 Μια σύνδεση προς ένα αρχείο πολυμέσων είναι ουσιαστικά ίδια με οποιαδήποτε άλλη σύνδεση. Μια σύνδεση που οδηγεί σε ένα αρχείο μπορεί να είναι ιδιαίτερα χρήσιμη επειδή οι συνδέσεις είναι κάτι το οποίο κατανοούν όλες οι εφαρμογές web browser. Η εικόνα που ακολουθεί δείχνει πως εμφανίζεται ο παρακάτω κώδικας στο παράθυρο μιας εφαρμογής browser Ανάπτυξη Δικτυακών Τόπων 46

49 Ανάπτυξη Δικτυακών Τόπων 47

50 Το κλικ στη σύνδεση της παραπάνω εικόνας θα προκαλούσε 3 πράγματα: 1. Εμφάνιση προτροπής στο χρήστη να μεταφέρει το αρχείο και να το αποθηκεύσει για μελλοντική χρήση. 2. Εμφάνιση προτροπής στο χρήστη να μεταφέρει το αρχείο και να το προβάλλει άμεσα. 3. Εάν η εφαρμογή browser αναγνωρίσει το αρχείο ως ένα από αυτά που είναι διαμορφωμένη να εμφανίζει αυτόματα, μπορεί να αναλάβει αμέσως τον έλεγχο και να κάνει ακριβώς αυτό. Ανάπτυξη Δικτυακών Τόπων 48

51 3. Ενσωμάτωση Διαφόρων Τύπων Πολυμέσων σε μια Ιστοσελίδα Ανάπτυξη Δικτυακών Τόπων 49

52 Όταν ενσωματώνετε αρχεία πολυμέσων αντί να οδηγείτε τους χρήστες σε αυτά με τη χρήση συνδέσεων, το περιεχόμενό τους εμφανίζεται μέσα στη σελίδα σας. Η επιτροπή W3C δημιούργησε το tag object για να παρέχει μια γενική μέθοδο ενσωμάτωσης διαφόρων τύπων μέσων σε ιστοσελίδες. Ανάπτυξη Δικτυακών Τόπων 50

53 3.1 Χρήση του Tag Object Όταν χρησιμοποιείτε το tag object, πρέπει να κοινοποιείτε στον browser τον τύπο του αρχείου που ενσωματώνετε και τη θέση του. Για το σκοπό αυτό χρησιμοποιούνται οι ιδιότητες type και data. <object type= application/x-shockwave-flash data= movie.swf height= 60 height= 200 > Μετά το αρχικό tag object, μπορείτε να προσθέσετε οποιεσδήποτε επιπλέον ιδιότητες θέλετε να καθορίσετε χρησιμοποιώντας το tag param <param name= movie value= movie.swf /> <param name= BGCOLOR value= #ffffff /> Τέλος κλείνετε το tag object </object> Ανάπτυξη Δικτυακών Τόπων 51

54 3.2 Μικροεφαρμογές Java Μπορείτε επίσης να χρησιμοποιείτε το tag object για να ενσωματώνετε μικρο-εφαρμογές Java (Java applets) σε μια ιστοσελίδα. Οι μικρο-εφαρμογές Java είναι σύντομες εφαρμογές γραμμένες με τη γλώσσα προγραμματισμού Java, οι οποίες μπορούν να τρέχουν μέσα στο παράθυρο ενός browser. Ανάπτυξη Δικτυακών Τόπων 52

55 Δημιουργία Δικών σας Γραφικών για το Web Ανάπτυξη Δικτυακών Τόπων 53

56 1. Εξοικείωση με το Λογισμικό Γραφικών Ανάπτυξη Δικτυακών Τόπων 54

57 Υπάρχουν δυο βασικές κατηγορίες εφαρμογών γραφικών: 1. Οι εφαρμογές ανυσματικών γραφικών 2. Οι εφαρμογές bitmap γραφικών Οι bitmap εφαρμογές δημιουργούν γραφικά χρησιμοποιώντας μικροσκοπικές κουκίδες (μορφές τέτοιων αρχείων είναι GIF και JPEG) Οι ανυσματικές εφαρμογές βασίζονται σε γραμμές και καμπύλες που δημιουργούνται με μαθηματικούς υπολογισμούς, άρα τροποποιούνται πιο εύκολα. Τα γραφικά που δημιουργούνται με ανυσματικές εφαρμογές έχουν μικρότερο μέγεθος και για αυτό είναι δημοφιλή στο Internet. Ανάπτυξη Δικτυακών Τόπων 55

58 1.1 Προγράμματα για τη Δημιουργία Γραφικών Adobe Photoshop: είναι μια εφαρμογή bitmap γραφικών Illustrator: είναι και αυτό της Adobe και είναι μια εφαρμογή ανυσματικών γραφικών, κατάλληλη για μακέτες και ελεύθερη σχεδίαση. Macromedia Fireworks: είναι ένα εργαλείο προσανατολισμένο στη δημιουργία γραφικών για το web. Paint Shop Pro της Corel: είναι το φθηνότερο από όλα τα προγράμματα Ανάπτυξη Δικτυακών Τόπων 56

59 2. Ζητήματα που Επηρεάζουν Σχεδιαστικές Αποφάσεις Ανάπτυξη Δικτυακών Τόπων 57

60 Όταν δημιουργείτε τα δικά σας γραφικά για το Web θα πρέπει να γνωρίζετε ότι το τελικό αποτέλεσμα το επηρεάζουν οι εξής παράγοντες: Πλατφόρμα υπολογιστή Δημογραφικά στοιχεία του ακροατηρίου Έκδοση/προδιαγραφές HTML Εφαρμογές browser Δυνατότητες στον τομέα του χρώματος Εύρος ζώνης Ανάπτυξη Δικτυακών Τόπων 58

61 2.1 Πλατφόρμα Η συσκευή που χρησιμοποιεί ο επισκέπτης παίζει σημαντικό ρόλο. Τα γραφικά δείχνουν πιο σκοτεινά σε ένα PC με Windows από ότι σε Mac. Το λογισμικό που είναι διαθέσιμο για την πλατφόρμα σας μπορεί να μην είναι διαθέσιμο στις άλλες. Το μέγεθος και οι ρυθμίσεις της συσκευής προβολής αλλάζει την εμφάνιση των γραφικών σας. Έτσι λοιπόν θα πρέπει να δοκιμάζετε τα γραφικά σας σε πολλές διαφορετικές πλατφόρμες για να διασφαλίζετε το επιθυμητό αποτέλεσμα. Ανάπτυξη Δικτυακών Τόπων 59

62 2.2 Δημογραφικά Στοιχεία Ακροατηρίου Ο προσδιορισμός του ακροατηρίου επηρεάζει άμεσα τον τρόπο με τον οποίο θα δημιουργηθούν τα γραφικά. Αν ο δικτυακός τόπος για παράδειγμα απευθύνεται σε μια εταιρεία που έχει PC με windows, τότε δεν χρειάζεται να ελέγξετε την ιστοσελίδα σε υπολογιστές Macintosh. Το να γνωρίζεις το ακροατήριο επηρεάζει και το στυλ των γραφικών σας. Διαφορετικά χρώματα θα χρησιμοποιήσεις για μια σελίδα που απευθύνεται σε εφήβους και διαφορετικά για μια που απευθύνεται σε ανθρώπους άνω των 65 χρονών. Ανάπτυξη Δικτυακών Τόπων 60

63 2.3 Σχεδιασμός για Συγκεκριμένο Μέγεθος Ακόμα και αν σχεδιάζετε τις σελίδες σας ώστε να αυξομειώνονται ανάλογα με το μέγεθος του παραθύρου, να θυμάστε ότι η μικρότερη ανάλυση οθόνης για επιτραπέζιους και φορητούς υπολογιστές είναι 640x480 pixels. Στην κατακόρυφη διεύθυνση πρέπει να συνυπολογίσετε τα κουμπιά και τις γραμμές εργαλείων των browsers. Συνεπώς θα πρέπει να διασφαλίζετε ότι οι σημαντικότερες πληροφορίες βρίσκονται στα πρώτα 600 (πλάτος) επί 300 (ύψος) pixels της σελίδας. Ανάπτυξη Δικτυακών Τόπων 61

64 2.4 Προδιαγραφές της HTML Η HTML έχει ορισμένους περιορισμούς οι οποίοι μπορούν να επηρεάζουν τον τρόπο χρήσης των γραφικών σε μια σελίδα. Όλα τα γραφικά μιας σελίδας πρέπει να περιέχονται μέσα σε ένα ορθογώνιο πλαίσιο παρότι αυτό δεν είναι εμφανές στους χρήστες. Το κείμενο που ρέει γύρω από ένα γραφικό πρέπει είτε να ακολουθεί το ορθογώνιο σχήμα του πλαισίου είτε να διέρχεται από μέσα του. Ανάπτυξη Δικτυακών Τόπων 62

65 2.5 Εφαρμογές Browser Ορισμένα πράγματα που θα πρέπει να λαμβάνετε υπόψη όταν σχεδιάζετε γραφικά για πολλούς browsers: Να χρησιμοποιείτε τα στάνταρ tags της HTML Να παρέχετε εναλλακτικούς τρόπους, ανεξάρτητα από το αν αυτό σημαίνει χρήση της ιδιότητας alt στον κώδικα της σελίδας. Έλεγχος της δουλειάς σας. Μην εφησυχάζετε βλέποντας τις σελίδες μόνο σε ένα browser και μόνο σε ένα υπολογιστή. Ανάπτυξη Δικτυακών Τόπων 63

66 2.6 Χρώμα Ένα μεγάλο ζήτημα για όσους αναπτύσσουν γραφικά για το web είναι το χρώμα. Τα γραφικά για το web μπορεί να δείχνουν εντελώς διαφορετικά από τον έναν υπολογιστή στον επόμενο. Οποτεδήποτε θέλετε ένα χρώμα να δείχνει ακριβώς το ίδιο σε όσο το δυνατόν περισσότερα συστήματα, να παραμένετε στα «ασφαλή για το web» χρώματα. Ανάπτυξη Δικτυακών Τόπων 64

67 2.7 Εύρος Ζώνης Ο όρος εύρος ζώνης αναφέρεται στην ταχύτητα της σύνδεσης με την οποία προσπελάζουν το Internet οι χρήστες. Οι χρήστες που επισκέπτονται τη σελίδα σας θα το κάνουν με διαφορετικά είδη και ταχύτητες σύνδεσης ο κάθε ένας. Έτσι πρέπει να σχεδιάζετε τα γραφικά σας λαμβάνοντας υπόψη και αυτόν τον παράγοντα. Εξακρίβωση του μεγέθους αρχείου: εάν δημιουργείτε ιστοσελίδες για το ευρύ κοινό ένας καλός κανόνας είναι: μέγεθος σελίδας όχι πάνω από 40-60Κ. Ανάπτυξη Δικτυακών Τόπων 65

68 συνέχεια Τρόποι μείωσης του μεγέθους αρχείου των εικόνων: Αυτό γίνεται με δυο βασικούς κανόνες: 1. Μείωση των πραγματικών διαστάσεων-πλάτος και ύψοςτης εικόνας. 2. Συμπίεση της εικόνας. Ανάπτυξη Δικτυακών Τόπων 66

69 3. Μορφές Αρχείων Γραφικών για το Web Ανάπτυξη Δικτυακών Τόπων 67

70 3.1 Ορολογία Μέθοδοι συμπίεσης: 1. Συμπίεση με απώλειες: απαιτεί την απόρριψη δεδομένων 2. Συμπίεση χωρίς απώλειες: δεν απορρίπτει δεδομένα από το αρχείο. Ανάλυση: Η στάνταρ ανάλυση αρχείου για τα γραφικά που προορίζονται για το web είναι 72 dpi. Διαφάνεια: Όταν εμφανίζετε μια εικόνα και μπορείτε να δείτε τι βρίσκεται πίσω από κάποιες περιοχές της, η εικόνα αυτή λέγεται ότι έχει διαφάνεια (transparency). Ανάπτυξη Δικτυακών Τόπων 68

71 συνέχεια Οι τύποι αρχείων που υποστηρίζουν διαφάνεια εμπίπτουν σε δυο κατηγορίες: δυαδική (binary) όπου οποιοδήποτε pixel μπορεί να είναι είτε ολοκληρωτικά διαφανές είτε αδιαφανές και τη μεταβλητή διαφάνεια όπου επιτρέπει στα pixels να είναι εν μέρει διαφανή ή αδιαφανή. Πεπλεγμένη Σάρωση: είναι η διαδικασία όπου τα γραφικά εμφανίζονται με διαφορετικό βαθμό ευκρίνειας ο οποίος σταδιακά αυξάνεται φτάνοντας τελικά στην κανονική μορφή όταν ολοκληρωθεί η φόρτωση της εικόνας. Κίνηση εικόνας: Τα αρχεία animation περιέχουν δυο ή περισσότερες μεμονωμένες εικόνες οι οποίες αποκαλούνται καρέ του animation. Ανάπτυξη Δικτυακών Τόπων 69

72 3.2 Η Μορφή GIF Χρησιμοποιεί μια μέθοδο συμπίεσης χωρίς απώλειες Τα ακόλουθα είδη εικόνων είναι κατάλληλα για αποθήκευση σε μορφή GIF: Κείμενο Γραμμικά σχέδια Καρτούν Γραφικά με «επίπεδα» (ομοιόμορφα) χρώματα Ανάπτυξη Δικτυακών Τόπων 70

73 συνέχεια Αποθήκευση GIF αρχείων: Όταν αποθηκεύετε ένα αρχείο σε μορφή GIF σε ένα πρόγραμμα γραφικών, αναζητήστε ονόματα όπως τα GIF, GIF87, GIF89, GIF89a ή ακόμα CompuServe GIF. Εάν το αρχείο σας περιλαμβάνει διαφάνεια ή animation, χρησιμοποιείστε τις μορφές GIF89 ή GIF89a. Ανάπτυξη Δικτυακών Τόπων 71

74 3.3 Η Μορφή JPEG Δημιουργήθηκε από τον οργανισμό Joint Photographic Experts Group. Μια σημαντική διαφορά με τη GIF μορφή είναι ότι τα JPEG αρχεία δεν περιέχουν ένα ακριβές σύνολο χρωμάτων. Κατά την αποθήκευση χρησιμοποιεί μέθοδο συμπίεσης με απώλειες και μπορείτε να επιλέξετε μεταξύ διαφορετικών επιπέδων ποιότητας. Ανάπτυξη Δικτυακών Τόπων 72

75 3.4 Η Μορφή PNG Είναι η νεότερη και πιο ευέλικτη από τις 3 επικρατέστερες μορφές αρχείων γραφικών για το web. Το PNG αρχείο έχει τη δυνατότητα να διορθώνει τις διαφορές στον τρόπο με τον οποίο διερμηνεύουν τα χρώματα οι υπολογιστές και οι οθόνες. Οι χρήστες με παλαιότερους browser πρέπει να μεταφέρουν ένα πρόσθετο για να μπορούν να βλέπουν γραφικά με μορφή PNG. Όταν αποθηκεύετε ένα αρχείο σε μορφή PNG πρέπει να καθορίσετε πόσα χρώματα θα συμπεριλάβετε στην παλέτα του. Για την PNG-8 Παλέτα 256 χρωμάτων, PNG-24 (24 bit, εκατομμύρια), PNG-32 (32 bit εκατομμύρια συν ένα κανάλι διαφάνειας) Ανάπτυξη Δικτυακών Τόπων 73

77 3.5 Επιλέξτε την Καλύτερη Μορφή Αρχείου Η επιλογή της καλύτερης μορφής αρχείου πρέπει να μας δίνει κάθε φορά το καλύτερο δυνατό αποτέλεσμα. Δηλαδή την καλύτερη ποιότητα με το λιγότερο δυνατό χρόνο μεταφοράς για τους επισκέπτες της ιστοσελίδας σας. Ανάπτυξη Δικτυακών Τόπων 75