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

Transcript

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

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

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

4 Τα βασικά της HTML - Εισαγωγή Ανάπτυξη Δικτυακών Τόπων 2

5 1. Το internet ως μέσο Διάδοσης και Πληροφορίας Ανάπτυξη Δικτυακών Τόπων 3

6 1.1 Διευθύνσεις URL (Uniform Resource Locator) Κάθε δικτυακός τόπος έχει μια διεύθυνση URL ( Domain: 1. Τμήμα της URL 2. Βοηθά στην ταυτοποίηση και στον εντοπισμό υπολογιστών στο internet 3. Είναι μοναδικό Πολλές διευθύνσεις URL ξεκινούν με το www, αυτό δεν είναι υποχρεωτικό. Ανάπτυξη Δικτυακών Τόπων 4

7 1.2 Διακομιστές Web Κάθε δικτυακός τόπος και κάθε ιστοσελίδα χρειάζεται ένα διακομιστή Web (web server) Ο διακομιστής φιλοξενεί πληροφορίες Πληκτρολογώντας μια URL ουσιαστικά στέλνεις μια αίτηση στο διακομιστή Αυτός με τη σειρά του σου δίνει τις απαιτούμενες πληροφορίες και εμφανίζει την ιστοσελίδα Ανάπτυξη Δικτυακών Τόπων 5

8 1.3 Δικτυακοί Τόποι Συνήθως μια διεύθυνση URL συσχετίζεται με ένα δικτυακό τόπο. Παράδειγμα: 1. Το (www) avarts.ionio.gr είναι η διεύθυνση URL για το δικτυακό τόπο του Τμήματος Τεχνών Ήχου και Εικόνας 2. Το είναι η URL για το δικτυακό τόπο του ηλεκτρονικού βιβλιοπωλείου Amazon Οι δικτυακοί τόποι βρίσκονται σε φακέλους στον υπολογιστή διακομιστή Ανάπτυξη Δικτυακών Τόπων 6

9 συνέχεια Μέσα στον κύριο φάκελο μπορεί να υπάρχουν υποφάκελοι οι οποίοι αντιστοιχούν σε διαφορετικούς τομείς του δικτυακού τόπου Παράδειγμα: Studies είναι το όνομα του φακέλου στον οποίο αντιστοιχεί ο τομέας Σπουδές Ανάπτυξη Δικτυακών Τόπων 7

10 1.4 Ιστοσελίδες Συνήθως μια διεύθυνση URL συσχετίζεται με ένα δικτυακό τόπο Παράδειγμα: 1. Το (www) avarts.ionio.gr είναι η διεύθυνση URL για το δικτυακό τόπο του Τμήματος Τεχνών Ήχου & Εικόνας. 2. Το είναι το URL για το δικτυακό τόπο του ηλεκτρονικού βιβλιοπωλείου Amazon. Οι περισσότεροι διακομιστές web είναι διαμορφωμένοι να αναζητούν μια σελίδα με το όνομα index σαν κύρια σελίδα σε οποιοδήποτε φάκελο. Ανάπτυξη Δικτυακών Τόπων 8

11 1.5 Εφαρμογές Web Browser Μια εφαρμογή web browser είναι λογισμικό το οποίο τρέχει στον υπολογιστή μας και μπορεί να μας εμφανίζει ιστοσελίδες. Οι web browsers διαβάζουν τον HTML κώδικα και παρέχουν μια οπτική αναπαράστασή του στην οθόνη μας. Σήμερα οι πιο διαδεδομένοι browsers είναι: Windows Internet Explorer Mozilla Firefox Apple Safari Netscape Navigator Opera Google Chrome Ανάπτυξη Δικτυακών Τόπων 9

12 1.6 Πάροχοι Internet Για να αποκτήσεις πρόσβαση στο internet, χρησιμοποιείς τις υπηρεσίες ενός παρόχου Internet. Σήμερα υπάρχουν πολλές εταιρείες που δραστηριοποιούνται στον τομέα αυτό. Ανάπτυξη Δικτυακών Τόπων 10

13 1.7 Με το βλέμμα στο μέλλον Το World Wide Consortium (W3C, είναι ο φορέας που έχει αναλάβει τη θεσμοθέτηση και τη δημοσίευση προδιαγραφών, ή προτύπων για την HTML και άλλες γλώσσες που χρησιμοποιούνται στο Web. XML XHTML Ανάπτυξη Δικτυακών Τόπων 11

14 2. Αρχικός Σχεδιασμός: Ακροατήριο, Στόχοι, Δομή, Περιεχόμενο και Μηχανισμοί Πλοήγησης του Δικτυακού Τόπου σας Ανάπτυξη Δικτυακών Τόπων 12

15 2.1 Προσδιορισμός του Ακροατηρίου σας Το να ξέρετε το ακροατήριο στο οποίο απευθύνεστε επηρεάζει τόσο το σχεδιασμό όσο και την ανάπτυξη του δικτυακού τόπου. Μετά τον προσδιορισμό του ακροατηρίου θα πρέπει να σκεφτείτε ποιες λειτουργίες θέλετε να εκτελούν οι επισκέπτες του δικτυακού σας τόπου. Παράδειγμα: Σε ένα δικτυακό τόπο μιας τράπεζας ο επισκέπτης μπορεί να θέλει online συναλλαγές επικοινωνία με τμήμα εξυπηρέτησης πελατών έρευνα για προϊόντα και υπηρεσίες Ανάπτυξη Δικτυακών Τόπων 13

16 2.2 Καθορισμός Στόχων Για τον δικτυακό τόπο τον οποίο θα κατασκευάσετε θα πρέπει να καθορίσετε στόχους. Παράδειγμα: πώληση προϊόντων ή υπηρεσιών ψυχαγωγία εκπαίδευση επικοινωνία Κατά τη διάρκεια της κατασκευής του δικτυακού τόπου πρέπει μα θυμάστε πάντα τους στόχους που έχετε θέσει. Ανάπτυξη Δικτυακών Τόπων 14

17 2.3 Δημιουργία δομής Παράδειγμα: Βασικός στόχος δικτυακού τόπου: Πώληση αναλωσίμων γραφείου σε επιχειρήσεις Δευτερεύων στόχος δικτυακού τόπου: Στρατολόγηση νέων υπαλλήλων Αυτός ο δικτυακός τόπος θα πρέπει να έχει δυο βασικές θεματικές ενότητες: 1. Αγορά αναλώσιμων γραφείου ( shop ) 2. Διερεύνηση θέσεων εργασίας ( jobs ) Ανάπτυξη Δικτυακών Τόπων 15

18 2.4 Οργάνωση του Περιεχομένου Το περιεχόμενο του δικτυακού τόπου θα πρέπει να εντάσσεται στις θεματικές ενότητες που υπαγορεύει η δομή του, ενώ μπορούν να υπάρχουν και υποκατηγορίες στην κάθε θεματική ενότητα. Έτσι στο προηγούμενο παράδειγμα η ενότητα αγορά αναλώσιμων γραφείου μπορεί να έχει υποκατηγορίες ανάλογα με τα είδη των προϊόντων. Ανάπτυξη Δικτυακών Τόπων 16

19 συνέχεια Όνομα Κατηγορίας Χαρτί Στυλό Λογισμικό Έπιπλα Έπιπλα, Γραφεία Έπιπλα, Καρέκλες Έπιπλα, Βιβλιοθήκες Όνομα Φακέλου shop/paper/ shop/pens/ shop/software/ shop/furniture/ shop/furniture/desks/ shop/furniture/chairs/ shop/furniture/bookcases/ Οργάνωση Περιεχομένου Ανάπτυξη Δικτυακών Τόπων 17

20 2.5 Ανάπτυξη Τρόπων/Μηχανισμών Πλοήγησης Αφού οριστεί η δομή του δικτυακού τόπου και τοποθετηθεί κατάλληλα το περιεχόμενο σε αυτή, θα πρέπει να προδιαγραφούν οι τρόποι με τους οποίους οι επισκέπτες θα κινούνται μεταξύ των τομέων και των σελίδων. Μια καλή πρακτική είναι να περιλαμβάνεται μια στάνταρ γραμμή μηχανισμών πλοήγησης σε όλες τις σελίδες για λόγους ομοιομορφίας και ευχρηστίας. Η επισήμανση της τρέχουσας ενότητας με τονισμό στη γραμμή πλοήγησης είναι σημαντική για να ξέρει ο επισκέπτης ανά πάσα στιγμή που βρίσκεται. Ανάπτυξη Δικτυακών Τόπων 18

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

22 3. Εύρεση του καλύτερου συντάκτη HTML για τις Ανάγκες σας Ανάπτυξη Δικτυακών Τόπων 20

23 Τα πακέτα λογισμικού που είναι διαθέσιμα στην αγορά για την ανάπτυξη Html σελίδων είναι πολλά και ταξινομούνται σε δυο βασικές κατηγορίες: 1. Συντάκτες HTML με περιβάλλον κειμένου (αποκαλούνται επίσης συντάκτες κώδικα HTML) 2. Συντάκτες με γραφικό περιβάλλον ή WYSIWYG (ακρωνύμιο του What you see is what you get, που σημαίνει αυτό που βλέπετε είναι αυτό που παίρνετε ). Οι περισσότεροι από αυτούς διαθέτουν δυνατότητες επεξεργασίας του HTML κώδικα. Ανάπτυξη Δικτυακών Τόπων 21

24 3.1 Συντάκτες HTML με Περιβάλλον Κειμένου Για τη χρήση τους απαιτούν κάποια γνώση της HTML Το περιβάλλον και ο τρόπος λειτουργίας τους μπορεί να προσαρμοστεί, έτσι ώστε να επιταχύνεται η διαδικασία συγγραφής του κώδικα Πολλοί από αυτούς διαθέτουν εργαλεία για τον έλεγχο των σφαλμάτων Παραδείγματα: 1. CoffeeCup HTML Editor (w) 2. CuteHTML (w) 3. BBEdit (Mac) 4. uedit (Mac) Ανάπτυξη Δικτυακών Τόπων 22

25 3.2 Συντάκτες HTML με Γραφικό Περιβάλλον (WYSIWYG) Δεν απαιτούν γνώση HTML Δεν βλέπεις κώδικα αλλά μια προεπισκόπηση του πως θα δείχνει η σελίδα Εύκολη τοποθέτηση διαφόρων στοιχείων με απλές διαδικασίες Παραδείγματα: 1. Macromedia Dreamweaver (Mac & PCs) 2. Adobe GoLive (Mac & PCs) 3. Microsoft FrontPage (Mac & PCs) Ανάπτυξη Δικτυακών Τόπων 23

26 3.3 Ποιος είναι ο καλύτερος για τις ανάγκες σας Πολλοί δημιουργοί ιστοσελίδων χρησιμοποιούν περισσότερο συντάκτες HTML με περιβάλλον κειμένου αντί να έχουν συντάκτες WYSIWYG για τους παρακάτω λόγους: Καλύτερος έλεγχος: Οι συντάκτες WYSIWYG μπορεί να γράφουν τον κώδικα με διάφορους τρόπους χωρίς να δίνουν όλοι το ίδιο αποτέλεσμα. Γρηγορότερες σελίδες: Οι συντάκτες WYSIWYG υπερβάλλουν σε ποσότητα κώδικα με αποτέλεσμα να επαναλαμβάνεται κώδικας και τα αρχεία να αποκτούν μεγάλο μέγεθος. Ανάπτυξη Δικτυακών Τόπων 24

27 συνέχεια Ταχύτερη επεξεργασία: Οι συντάκτες WYSIWYG καταναλώνουν πολλή μνήμη με αποτέλεσμα να επιβραδύνεται η λειτουργία του υπολογιστή μας. Αυξημένη ευελιξία: Οι συντάκτες WYSIWYG κάνουν αυτόματες διορθώσεις σε κώδικα που θεωρούν προβληματικό ή εσφαλμένο, με αποτέλεσμα να μας αφαιρεί τη δυνατότητα να εισάγουμε νέο κώδικα ή να τροποποιήσουμε τον υπάρχοντα όπου κρίνεται αναγκαίο. Παρόλα αυτά πρέπει να τονίσουμε ότι οι σημερινοί συντάκτες WYSIWYG έχουν εξελιχθεί πολύ στους τομείς του ελέγχου και της ευελιξίας. Ανάπτυξη Δικτυακών Τόπων 25

28 3.4 Εντολή View Source Ένας καλός τρόπος για να μάθετε HTML είναι σερφάροντας στο Web να εξετάζετε τον HTML κώδικα που σας αρέσει και αυτόν που δεν σας αρέσει με τη βοήθεια της εντολής View Source. Από τον web browser που χρησιμοποιείς Επιλέγεις View Page Source ή View Source Ανάπτυξη Δικτυακών Τόπων 26