Προγραμματιστικά Εργαλεία για το Διαδίκτυο Κατασκευή Ιστοσελίδων 3 ο Κεφάλαιο Βελώνης Γεώργιος – Καθηγητής Πληροφορικής ΠΕ20

2 Εισαγωγή Ανατομία Ιστοσελίδων Οργάνωση Ιστοσελίδων Αρχές σχεδιασμού Ιστοσελίδων Η γλώσσα HTML  Δυνατότητες  Περιορισμοί  Διαφορές με γλώσσες προγραμματισμού Κατασκευή σελίδων HTML με έναν απλό επεξεργαστή κειμένου ή με έναν εξελιγμένο συντάκτη

3 Ανατομία Ιστοσελίδων Οι εφαρμογές που εκτελούνται στο περιβάλλον του παγκόσμιου Ιστού είναι εγκατεστημένες σε κάποιον εξυπηρετητή Ιστού. Οι εξυπηρετητές είναι υπολογιστές με εξελιγμένα τεχνικά χαρακτηριστικά, οι οποίοι είναι συνδεδεμένοι στο Internet μέσω μισθωμένων ψηφιακών γραμμών υψηλών ταχυτήτων και βρίσκονται σε συνεχή λειτουργία.

4 Οργάνωσηιστοσελίδων Οργάνωση ιστοσελίδων Τη σειριακή οργάνωση, στην οποία κάθε ιστοσελίδα διασυνδέεται με την προηγούμενη και την επόμενή της σειριακά. Την ιεραρχική οργάνωση, που είναι και η πιο συνηθισμένη, στην οποία από μία ιστοσελίδα μπορούμε να οδηγηθούμε προς τα εμπρός σε περισσότερες από μία νέες ιστοσελίδες, ενώ μπορούμε να επιστρέψουμε πίσω στην ιστοσελίδα από την οποία μεταβήκαμε στην τρέχουσα. Ανάλογα με τον τρόπο που διασυνδέονται οι ιστοσελίδες ενός site, μπορούμε να διακρίνουμε δύο βασικούς τρόπους οργάνωσης ιστοσελίδων:

5 Οργάνωσηιστοσελίδων Οργάνωση ιστοσελίδων Σειριακή Οργάνωση Ιεραρχική Οργάνωση

6 Οργάνωσηιστοσελίδων Οργάνωση ιστοσελίδων Άλλη μορφή οργάνωσης ιστοσελίδων είναι η Μικτή (που αποτελεί ένα συνδυασμό των δύο προηγουμένων).

7 ΟργάνωσηΑρχείωνΙστοσελίδων στονεξυπηρετητή Οργάνωση Αρχείων Ιστοσελίδων στον εξυπηρετητή Μέσα στον εξυπηρετητή, κάθε εφαρμογή βρίσκεται αποθη- κευμένη σε διαφορετικό κατάλογο. Συνήθως η 1 η σελίδα της εφαρμογής έχει το όνομα index.htm γιατί αποτελεί τη σελίδα η οποία είναι δείκτης της όλης εφαρμογής. Αν η εφαρμογή είναι σχετικά μικρή, δηλαδή αν ο αριθμός των διαφορετικών html αρχείων που απαρτίζουν την εφαρμογή είναι μικρός, τότε τα αρχεία των υπολοίπων ιστοσελίδων μπορεί να είναι αποθηκευμένα στον ίδιο κατάλογο με την 1η σελίδα δείκτη.

8 ΟργάνωσηΑρχείωνΙστοσελίδων στονεξυπηρετητή Οργάνωση Αρχείων Ιστοσελίδων στον εξυπηρετητή Είναι όμως προτιμότερο τα αρχεία να είναι οργανωμένα σε υποκαταλόγους του κυρίως καταλόγου της εφαρμογής για λόγους καλύτερης οργάνωσης και ευκολότερης συντήρησης των εφαρμογών (βλέπετε παράδειγμα στην επόμενη διαφάνεια).

9 ΟργάνωσηΑρχείωνΙστοσελίδων στον εξυπηρετητή Οργάνωση Αρχείων Ιστοσελίδων στον εξυπηρετητή

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

11 Αρχές σχεδιασμού για τη δημιουργία Ιστοσελίδων

12 Αρχές σχεδιασμού για τη δημιουργία Ιστοσελίδων Σχεδίαση ενός συστήματος πλοήγησης μέσα στις ιστοσελίδες της εφαρμογής, το οποίο θα πρέπει να βοηθά το χρήστη να μετακινηθεί και να εντοπίσει εύκολα την πληροφορία που θέλει. Χρήση χρωμάτων που ταιριάζουν μεταξύ τους και τα οποία δημιουργούν αντίθεση με τα χρώματα του κειμένου, ώστε να διευκολύνεται η ανάγνωση των κειμένων. Αφού δημιουργήσουμε το σενάριο παρουσίασης είμαστε έτοιμοι να σχεδιάσουμε τον ιστότοπο, λαμβάνοντας υπόψη κάποιους βασικούς κανόνες σχεδίασης:

13 Αρχές σχεδιασμού για τη δημιουργία Ιστοσελίδων Χρήση γραμματοσειρών που διευκολύνουν την ανάγνωση των κειμένων. Κατάλληλη στοίχιση του κειμένου (συνήθως προτιμάται η αριστερή στοίχιση γιατί ταιριάζει στον τρόπο με τον οποίο διαβάζουμε). Χρήση εικόνων και πολυμεσικών στοιχείων μικρού μεγέθους αρχείου, ώστε η σελίδα να μπορεί να απεικονίζεται γρήγορα από το φυλλομετρητή του χρήστη. Χρήση γραφικών και σχεδίων που δημιουργούν ένα καλό αισθητικό αποτέλεσμα, χωρίς υπερβολές που κουράζουν το χρήστη.

14 Χαρακτηριστικά της γλώσσας HTML Η ανάπτυξη των ιστοσελίδων γίνεται με τη γλώσσα HTML(HyperText Markup Language) Χρησιμοποιεί ένα είδος ετικετών για τη διαμόρφωση του τρόπου παρουσίασης του κειμένου και των πολυμεσικών στοιχείων. Είναι μία δηλωτική γλώσσα ή αλλιώς γλώσσα χαρακτηρισμού, η οποία απλώς δηλώνει τον τρόπο με τον οποίο ο φυλλομετρητής (browser) θα πρέπει να αναπαραστήσει την ιστοσελίδα.

15 Χαρακτηριστικά της γλώσσας HTML Δεν αποτελεί μία ολοκληρωμένη γλώσσα προγραμματισμού, ικανή να εκτελέσει υπολογισμούς μεταξύ δεδομένων, με στόχο την επίλυση υπολογιστικών προβλημάτων. Επειδή ο φυλλομετρητής είναι αυτός ο οποίος αναλαμβάνει να ερμηνεύσει τον κώδικα HTML, μπορεί να παρατηρηθούν μικρές διαφορές στον τρόπο παρουσίασης μίας ιστοσελίδας από φυλλομετρητή σε φυλλομετρητή.

16 Χαρακτηριστικά της γλώσσας HTML Δεν μπορεί να χρησιμοποιηθεί για την επίλυση υπολογιστικών προβλημάτων. Δεν μπορεί να χειριστεί δεδομένα εισόδου και να δώσει δεδομένα εξόδου. Δεν υποστηρίζει αριθμητικές ή λογικές πράξεις. Δεν υποστηρίζει δομές δεδομένων. Δεν υποστηρίζει τις λογικές δομές της ακολουθίας της επιλογής και της επανάληψης οι οποίες αποτελούν τα βασικά δομικά στοιχεία στο δομημένο προγραμματισμό. Μερικές από τις χαρακτηριστικές διαφορές της, σε σχέση με γλώσσες δομημένου ή αντικειμενοστραφούς προγραμματισμού, είναι οι εξής:

17 Δυνατότητες της HTML Μέγεθος, στυλ και χρώμα χαρακτήρων. Παραγραφοποίηση κειμένου. Στοίχιση κειμένου. Δημιουργία καταλόγων. Περιγραφή του τρόπου διαμόρφωσης του κειμένου που παρουσιάζεται σε μία ιστοσελίδα και του χρώματος του υποβάθρου (background) της ιστοσελίδας.

18 Δυνατότητες της HTML 1. Παρουσίαση πολυμεσικών στοιχείων (στατικές και κινούμενες εικόνες, ήχους). 2. Δημιουργία υπερσυνδέσμων (hyperlinks). 3. Δομημένη παρουσίαση στοιχείων (κειμένων και εικόνων) με τη χρήση πινάκων. 4. Διαχωρισμός της οθόνης του φυλλομετρητή σε περισσότερα του ενός παράθυρα, μέσα στα οποία παρουσιάζονται διαφορετικές ιστοσελίδες (frames). 5. Επιτρέπει την εισαγωγή στοιχείων, μέσω ειδικών φορμών, από τους υπολογιστές των χρηστών (clients), τα οποία μπορεί στη συνέχεια να αποσταλούν και να επεξεργαστούν με ειδικό κώδικα (script) στην πλευρά του εξυπηρετητή (server).

19 Περιορισμοί της HTML Μπορεί μόνο να παρουσιάσει κείμενο, πολυμεσικά στοιχεία και υπερσυνδέσμους, με τον τρόπο που ο δημιουργός της ιστοσελίδας θέλει. Δε διαθέτει η ίδια μηχανισμό για την επεξεργασία στοιχείων ή δεδομένων που δίνονται από το χρήστη. Δε διαθέτει μηχανισμούς για διαχείριση δομών δεδομένων ή για τη διαχείριση ενεργειών που γίνονται δυναμικά από την πλευρά του χρήστη.

20 Μορφή αρχείων HTML Τα αρχεία HTML έχουν την κατάληξη html ή htm και περιέχουν τον κώδικα της ιστοσελίδας, καθώς και το κείμενο που αυτή περιλαμβάνει. Η μορφή του κώδικα ενός αρχείου html είναι η παρακάτω: Ο τίτλος της σελίδας Εδώ η πρώτη παράγραφος Και εδώ η δεύτερη παράγραφος

21 Τρόποι Δημιουργίας ιστοσελίδων Απλοί συντάκτες (editors) κειμένου (π.χ. το notepad των Windows), Επεξεργαστές κειμένου (π.χ. το Microsoft Word), Ειδικοί συντάκτες κώδικα HTML (HTML editors), οι οποίοι έχουν ενσωματωμένες αρκετές λειτουργίες της HTML όπως χρωματισμός των ετικετών της HTML (π.χ. το notepad++ και HTML Kit των Windows), Συντάκτες ιστοσελίδων, όπως το Dreamweaver και το Frontpage και Amaya. Website builders, όπως το Wix, ucoz, Jimdo, WebStarts, Wopop, Moonfruit, WebStartToday, DoodleKit και πολλά άλλα.