Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Κατασκευή Ιστοσελίδων Παρουσίαση 3 η 1 Βελώνης Γεώργιος Καθηγητής

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

Οργάνωση ιστοσελίδων Για να είστε σε θέση να διατηρήσει εύκολα web σελίδες, θα πρέπει να δημιουργήσετε ένα ξεχωριστό web έγγραφο ή σελίδα, για κάθε θέμα που προσδιορίζετε. Το σημείο εκκίνησης για μια τοποθεσία web, αναφέρεται ως αρχική σελίδα ή σελίδα ευρετηρίου. Μπορείτε να παρέχετε συνδέσεις πλοήγησης από την αρχική σελίδα σας σε άλλες σελίδες στη web τοποθεσία σας και δεν υπάρχει κανένα όριο, στον αριθμό των σελίδων που θα περιέχει. Η οργάνωση web σελίδων μπορεί να γίνει μέσω τριών διαφορετικών δομών σχεδιασμού: Γραμμική Διάταξη και Ιεραρχική Διάταξη ή ένα συνδυασμό και των δύο (Μικτή). 3

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

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

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

Οργάνωση αρχείων ιστοσελίδων στον εξυπηρετητή Προτείνεται τα αρχεία να είναι οργανωμένα σε υποκαταλόγους του κυρίως καταλόγου της εφαρμογής, για λόγους καλύτερης οργάνωσης και ευκολότερης συντήρησης των εφαρμογών. Βασικός Κατάλογος Εφαρμογής Περιέχει όλα τα αρχεία html (ιστοσελίδων) Παράδειγμα οργάνωσης αρχείων ιστοσελίδων Υποκατάλογος images Περιέχει αρχεία ψηφιακών φωτογραφιών Υποκατάλογος sound Περιέχει αρχεία ψηφιακών ήχων Υποκατάλογος animate Περιέχει αρχεία ψηφιακής κινούμενης εικόνας 7

Αρχές σχεδιασμού για τη δημιουργία ιστοσελίδων Πριν ξεκινήσετε τον σχεδιασμό ιστοσελίδων, θα πρέπει να κάνετε πάντα τα εξής: Συλλέξτε τις πληροφορίες που θέλετε να βάλετε στην ιστοσελίδα. Οργανώστε τις πληροφορίες που συγκεντρώσατε σε θεματικές κατηγορίες. Παραθέστε τα θέματα, για να δημιουργήσετε στη συνέχεια ένα «Storyboard». Δημιουργήστε ένα γραφικό λογότυπο ή θέμα, για να χρησιμοποιηθεί σε κάθε σελίδα του site σας. 8

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

Αρχές σχεδιασμού για τη δημιουργία ιστοσελίδων Βήματα για τη δημιουργία ενός Storyboard: 1. Καθορισμός του σκοπού της παρουσίασής σας και του κοινού ή των αναγνωστών που σκοπεύετε να απευθυνθείτε. 2. Χωρίστε το περιεχόμενό σας σε κύρια θέματα και τις πληροφορίες που σχετίζονται με την ομάδα κάτω από ένα ενιαίο θέμα. 3. Χρησιμοποιήστε έντυπα πρότυπα ή λογισμικό διαγράμματος ροής, για να δημιουργήσετε ένα προσχέδιο της κάθε web σελίδας, ξεκινώντας από την αρχική. 10

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

Αρχές σχεδιασμού για τη δημιουργία ιστοσελίδων Πρότυπο έντυπο ενός Storyboard 12

Αρχές σχεδιασμού για τη δημιουργία ιστοσελίδων Κύρια Σελίδα (Home Page) Περιλαμβάνει: Λογότυπο εταιρείας και μενού επιλογών Storyboard Παράδειγμα ιεραρχικής οργάνωσης Ιστορικό Περιλαμβάνει: Σύντομο ιστορικό της εταιρείας με χρονολογική σειρά Προϊόντα Περιλαμβάνει: Παρουσίαση των προϊόντων της εταιρείας. Για κάθε προϊόν θα παρουσιάζεται κείμενο 5 γραμμών και μια φωτογραφία Εγκαταστάσεις Περιλαμβάνει: Παρουσίαση των εγκαταστάσεων με φωτογραφικό υλικό (5 φωτογραφίες) Επικοινωνία Περιλαμβάνει: Διευθύνσεις τηλέφωνα και φόρμα επικοινωνίας 13

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

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

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

Χαρακτηριστικά της HTML Επειδή ο browser είναι αυτός ο οποίος αναλαμβάνει να ερμηνεύσει τον κώδικα HTML, μπορεί να παρατηρηθούν μικρές διαφορές στον τρόπο παρουσίασης μίας ιστοσελίδας από browser σε browser. 17

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

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

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

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

Περιορισμοί και αδυναμίες της HTML Αδυναμία ανάπτυξης πολύπλοκων, όπως Web 2.0 εφαρμογών. Ανάγκη χρήσης προσαρτώμενων προγραμματιστικών οντοτήτων (plug-ins), όπως το Adobe Flash, για την εισαγωγή στοιχείων ήχου και βίντεο στις ιστοσελίδες. Δεν είναι cross-platform (ανεξάρτητη πλατφόρμας), δηλαδή δεν είναι σχεδιασμένη να λειτουργεί το ίδιο σωστά με τον υπολογιστή και σε ένα Tablet, ένα Smartphone ή μια Smart TV. 22

Αντιμετώπιση των αδυναμιών και των περιορισμών της HTML Η λύση στην αντιμετώπιση των αδυναμιών και των περιορισμών της HTML είναι η τελευταία έκδοση της γλώσσας, η HTML5. H καινούργια έκδοση της γλώσσας έχει φτιαχτεί έτσι, ώστε να βοηθήσει τους web developers να δημιουργήσουν καλύτερες και πιο δομημένες web εφαρμογές και όχι μόνο έγγραφα κειμένου (documents). Οι δυνατότητες της HTML5 είναι διαφορετικές, μα πιο αποτελεσματικές στο να λύσουν προβλήματα, τα οποία δεν μπορούσαν οι παλαιότερες εκδόσεις να λύσουν, όπως: Χρήση τεχνολογίας SVG (Scalable Vector Graphics), ένα καινούριο tag (<svg>), με το οποίο έχετε τη δυνατότητα σχεδιασμού vector σχημάτων κατευθείαν στον browser. 23

Αντιμετώπιση των αδυναμιών και των περιορισμών της HTML Δυνατότητα σχεδίασης δισδιάστατων διανυσματικών γραφικών (στοιχείο canvas). Χρήση νέων ετικετών, που ανταποκρίνονται στο σύγχρονο τρόπο κατασκευής μιας ιστοσελίδας σε ό,τι αφορά τη σελιδοποίηση και τη μορφοποίηση. Δυνατότητα τοπικής αποθήκευσης (offline storage), επιτρέποντας στις ιστοσελίδες να αποθηκεύουν πληροφορίες στον υπολογιστή του χρήστη, ώστε να μη χρειάζεται να τις λαμβάνει ξανά, κάθε φορά που αυτός επισκέπτεται την ιστοσελίδα. Δυνατότητα αναπαραγωγής ήχου και βίντεο απευθείας, χωρίς την ανάγκη ύπαρξης πρόσθετων προγραμμάτων. 24

Αντιμετώπιση των αδυναμιών και των περιορισμών της HTML Δυνατότητα μεταφοράς και απόθεσης, δηλαδή ο χρήστης μπορεί να μεταφέρει στοιχεία από μια ιστοσελίδα σε άλλη ή από εφαρμογές στο browser του. Προσθήκη νέων τύπων και ιδιοτήτων για τη δημιουργία και χρήση φορμών. Πλήρης υποστήριξη CSS3. Καλύτερη αντιμετώπιση λαθών (error handling). Η διαδικασία ανάπτυξης θα είναι ορατή στο κοινό. Μπορεί να προσφέρει Geolocation (γεωτοποθεσία), κάτι που θα φανεί ιδιαίτερα χρήσιμο ως εργαλείο στις αναζητήσεις των χρηστών στον πραγματικό κόσμο και για το που βρίσκονται μια δεδομένη χρονική στιγμή. 25

Αντιμετώπιση των αδυναμιών και των περιορισμών της HTML Είναι ανεξάρτητη από τη συσκευή επιτρέποντας στους web developers να δημιουργήσουν mobile web sites. Τα συγκεκριμένα sites, μπορούν να έχουν ταυτόχρονα πολλές από τις ιδιότητες των εφαρμογών που συναντάμε στις διάφορες πλατφόρμες κινητών, ανοίγοντας έτσι νέους ορίζοντες στην παρουσία του Διαδικτύου στον τομέα των συσκευών κινητής τηλεφωνίας. 26

Αντιμετώπιση των αδυναμιών και των περιορισμών της HTML 27

Αντιμετώπιση των αδυναμιών και των περιορισμών της HTML Η HTML5 έρχεται να δώσει νέους ορίζοντες και στους browsers. Δυστυχώς, αυτοί δεν έχουν ακόμη την πλήρη υποστήριξη της, ενώ παρατηρείται ορισμένα στοιχεία της να λειτουργούν σε κάποιους browsers, ενώ σε άλλους όχι. Το ευτύχημα είναι ότι όλοι οι γνωστοί browsers, όπως οι Chrome, Firefox, Opera, Internet Explorer, Safari και Yandex, συνεχίζουν να υποστηρίζουν και να προσθέτουν νέα χαρακτηριστικά της HTML5, σε κάθε νέα έκδοση που κυκλοφορούν. 28

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

Εργαλεία κατασκευής ιστοσελίδων Ο χρήστης έχει δυνατότητα να δημιουργήσει μια ιστοσελίδα με ένα από τα παρακάτω εργαλεία: Απλούς συντάκτες (editors) κειμένου (π.χ. ο Notepad). Επεξεργαστές κειμένου (π.χ. το Microsoft Word). Ειδικούς συντάκτες κώδικα HTML (HTML editors), οι οποίοι έχουν ενσωματωμένες αρκετές λειτουργίες της HTML, όπως λίστα των ετικετών της και των ιδιοτήτων τους (π.χ. Notepad++, HTML Kit, EasyHtml κ.ά.). Γραφικούς συντάκτες ιστοσελίδων (WYSIWYG) (π.χ. Dreamweaver, FrontPage, Amaya, KompoZer κ.ά.). Online HTML Editors. Online website builders (π.χ. τα Wix, Ucoz, Jimdo, WebStarts, Wopop, Moonfruit, WebStartToday, DoodleKit κ.ά.). 30

Εργαλεία κατασκευής ιστοσελίδων HTML Kit: Περιβάλλον ειδικού συντάκτη κώδικα HTML 31

Εργαλεία κατασκευής ιστοσελίδων 32 Amaya: Περιβάλλον γραφικού συντάκτη κώδικα HTML

Εργαλεία κατασκευής ιστοσελίδων Online HTML Editor: Περιβάλλον on-line συντάκτη κώδικα HTML 33

Εργαλεία κατασκευής ιστοσελίδων 34 Wix: Περιβάλλον on-line website builder

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

Ανέβασμα αρχείων στο χώρο φιλοξενίας του site Η σύνδεση με τον εξυπηρετητή θα πρέπει να γίνει με ένα πρόγραμμα ή αλλιώς FTP client, όπως: Filezilla, Core FTP LE, FTP Voyager, Web Site Publisher, κ.ά. Τα προγράμματα αυτά, χρησιμοποιούν το πρωτόκολλο FTP (File Transfer Protocol), που είναι υπεύθυνο για την απομακρυσμένη μεταφορά αρχείων από έναν client (πρόγραμμα) σε ένα server και αντίστροφα. 36 Αναπαράσταση λειτουργίας του FTP

Ανέβασμα αρχείων στο χώρο φιλοξενίας του site Ανέβασμα αρχείων στο χώρο φιλοξενίας με το πρόγραμμα FTP Voyager 37

Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο Ανάπτυξη πολυμεσικών εφαρμογών με HTML5: Λαζαρίνης Φώτιος Tutorials Point (http://www.tutorialspoint.com/internet_technologies/website_ designing.htm) Melbourne High School (resources.mhs.vic.edu.au/arewealonewq/websitestory.doc) StigmataHost (http://www.stigmahost.com/εισαγωγή-στηνhtml-5/) Τhe secret real truth (http://thesecretrealtruth.blogspot.com/2011/10/html5.html) 38