Web Design HTML, Frontpage, DreamWeaver μέρος α ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου

2 Στόχοι Κεφαλαίου Σύγκριση μεταξύ Internet και του World Wide Web Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων HTML tags Περιγραφή Εργαλείων Δημιουργίας Ιστοσελίδων

3 Η ιστορία του WWW Το WWW ξεκίνησε το 1989 από το Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών, (CERN) στην Ελβετία. Βασικός του σκοπός ήταν να προσφέρει στους επιστήμονες ένα μέσο προκειμένου να ανταλλάσσουν στοιχεία επιστημονικά δεδομένα και μελέτες, μέσω του διαδικτύου. Η όλη προσπάθεια στηρίχτηκε στην υλοποίηση ενός μέσου που θα επιτρέπει την σύνδεση μεταξύ διαφορετικών εγγράφων.

4 Η ιστορία του WWW Το μέσο αυτό ονομάστηκε υπερκείμενο(Hyper text) Το 1994 κατασκευάστηκε το πρόγραμμα Mosaic, το οποίο έδινε την δυνατότητα στους χρήστες να προσπελαύνουν τις πληροφορίες που ήταν διαθέσιμες στο WWW με γραφικό τρόπο. Στα επόμενα χρόνια το WWW έγινε το απόλυτο μέσο αναζήτησης πληροφοριών για εκατομμύρια χρήστες του διαδικτύου.

5 Το Διαδίκτυο και το WWW Η πλατιά χρήση του WWW δημιούργησε σύγχυση σε πολλούς χρήστες οι οποίοι ταύτισαν το WWW με το Internet. Στην πραγματικότητα όμως είναι δύο διαφορετικά πράγματα. Το Ιnternet αποτελεί το φυσικό χώρο στον οποίο διασυνδέονται εκατομμύρια Η/Υ από όλο τον κόσμο, Το WWW αποτελεί το εργαλείο με το οποίο μπορούμε να οργανώσουμε και να διαχειριστούμε τον τεράστιο όγκο πληροφοριών που έχει συσσωρευτεί στο διαδίκτυο.

6 Το Διαδίκτυο ως εργαλείο Αναζήτηση πληροφοριών. (Ειδήσεις, νέα, πρόσβαση σε διεθνείς οργανισμούς, σε βάσεις δεδομένων δημόσιας διοίκησης κλπ) Επικοινωνίας (ανταλλαγή μηνυμάτων, τηλεδιάσκεψη, τηλεφωνική συνομιλία, κλπ) Διενέργειας Συναλλαγών (Ηλεκτρονικό εμπόριο, ανταλλαγή αρχείων εγγράφων, τραπεζικές οικονομικές συναλλαγές κλπ) Δημιουργίας Διαδικτυακού Χώρου (προσωπικές σελίδες, εταιρικές τοποθεσίες κλπ) Διασκέδασης και Ψυχαγωγία (παιχνίδια, ραδιόφωνο, τηλεόραση κλπ).

7 World Wide Web To Web περιλαμβάνει κατανεμημένη πληροφορία, καθώς και το σχετικό λογισμικό που χρησιμοποιεί τα δίκτυα ως μέσο ανταλλαγής αυτής της πληροφορίας. Μία σελίδα Web είναι ένα κείμενο που περιέχει ή αναφέρεται σε διάφορα είδη δεδομένων, όπως κείμενο, εικόνες, γραφικά και προγράμματα Οι σελίδες Web περιέχουν συνδέσμους σε άλλες σελίδες τις οποίες ο χρήστης μπορεί να επισκεφθεί

8 The World Wide Web Ένας δικτυακός τόπος (Web Site) είναι μία συλλογή σχετιζομένων σελίδων web To Internet είναι αυτό που επιτρέπει την επικοινωνία, αλλά το Web διευκολύνει την επικοινωνία, την κάνει παραγωγικότερη και περισσότερο διασκεδαστική

9 Πως κατασκευάζουμε ένα υπερκείμενο; Για την περιγραφή ενός υπερκειμένου χρησιμοποιούμε μια ειδική γλώσσα την Hyper Text Markup Language (HTML). Η γλώσσα αυτή επιτρέπει στον συγγραφέα να διαμορφώσει ένα κείμενο το οποίο θα παρέχει συνδέσμους με άλλα έγγραφα και διάφορα αρχεία

10 Πως κατασκευάζουμε ένα υπερκείμενο; Τα υπερκείμενα που βρίσκονται στο WWW ονομάζονται ιστοσελίδες (web pages). Το σύνολο των ιστοσελίδων αποτελούν το site (δικτυακός τόπος). Τα προγράμματα τα οποία απεικονίζουν τις ιστοσελίδες, επιτρέποντας μας την ξενάγηση μας στο διαδίκτυο ονομάζονται πλοηγοί (Browsers), Π.χ Netscape, Internet Explorer, Mozzila, Opera

11 Web Browser Ένας browser είναι το λογισμικό που στέλνει μία αίτηση για τη σελίδα Web που επιθυμούμε σε ένα ειδικό υπολογιστή Μόλις έρθει η σελίδα, την επιδεικνύει στην οθόνη Συχνά λέμε ότι επισκεπτόμαστε ένα δικτυακό τόπο, ως να είμασταν πράγματι εκεί Στην πραγματικότητα, προσδιορίζουμε την πληροφορία που επιθυμούμε,και αυτή έρχεται σε εμάς

12 Web Browser Ο υπολογιστής που ανταποκρίνεται στις αιτήσεις για σελίδες Web λέγεται Web server Mία διεύθυνση Web είναι το κύριο μέρος του Uniform Resource Locator (URL) που προσδιορίζει την σελίδα που έχετε επιλέξει, ανάμεσα σε όλες τις σελίδες poy είναι διαθέσιμες σε όλο τον κόσμο

13 Φυλλομετρητής Web (Web Browser) Σχήμα 16.2 Ένας φυλλομετρητής που αιτήται και λαμβάνει μία σελίδα web

14 Browsers: Internet Explorer

15 HTML Οι σελίδες WEB γράφονται σε μία γλώσσα που λέγεται Hypertext Markup Language, ή HTML O όρος markup language δηλώνει ότι τα πρωτόγονα σύμβολα της γλώσσα έχουν τη μορφή των tags, τα οποία βάζουμε σε ένα κείμενο για την επισημείωση της πληροφορίας που είναι αποθηκευμένη σε αυτό.

16 HTML Σχήμα 16.2 Ένα επισημειωμένο κείμενο

17 HTML Σχήμα 16.3 H σελίδα Student Dynamics στον Netscape Navigator

18 HTML Το κείμενο HTML που αντιστοιχεί στην προηγούμενη σελίδα

19 HTML Τα tags περικλείονται από το μικρότερο και μεγαλύτερο Λέξεις όπως τα HEAD, TITLE, και BODY λέγονται elements και προσδιορίζουν τον τύπο του tag Tα tags, συχνά υπάρχουν ανά ζεύγη, π.χ. υπάρχει το αρχικό tag και το tag τέλους το

20 HTML O browser, προσδιορίζει τον τρόπο εμφάνισης μίας σελίδας βασισμένος στα tags Αγνοεί τον τρόπο μορφοποίησης του HTML, δηλαδή τα enter, τα επιπλέον κενά και τις κενές γραμμές Λαμβάνει υπ’όψιν το πλάτος και το ύψος του παραθύρου του browser Εάν αλλάξετε το μέγεθος του παραθύρου τα περιεχόμενα της Web σελίδας θα αλλάξουν ώστε να προσαρμοστούν στο νέο μέγεθος

21 Bασικά tags στην HTML Τα tags (... ) δηλώνουν κείμενο που αποτελεί ξεχωριστεί παράγραφο. Τα tags (... ) δηλώνουν ότι η περικλειόμενη πληροφορία θα πρέπει να κεντραριστεί στο παράθυρο του browser

22 Bασικά tags στην HTML β’ Τα elements Β, Ι, U δηλώνουν ότι το περικλειόμενο κείμενο θα πρέπει να είναι σε μορφή bold, italic ή υπογραμμισμένο Το tag χαράσσει μία οριζόντια γραμμή κατά μήκος της σελίδας

23 Bασικά tags στην HTML γ’ Αν θέλω να δημιουργήσω μία λίστα στοιχείων: Χρησιμοποιώ το UL το οποίο δηλώνει την μη διατεταγμένη λίστα, και το LI αναπαριστά ένα στοιχείο της λίστας Διάφορα elements χρησιμοποιούνται για να δηλώσουν επικεφαλίδες σε ένα κείμενο: Υπάρχουν έξι προκαθορισμένα elements επικεφαλίδων στην HTML: H1, H2, H3, H4, H5 και H6

24 Εικόνες και σύνδεσμοι Πολλά tags μπορούν να περιέχουν επιπλέον πληροφορίες που δηλώνουν πως η περικλειόμενη πληροφορία πρέπει να επιδειχθεί Μία εικόνα μπορεί να ενσωματωθεί σε ένα Web κείμενο με τη χρήση του στοιχείου (element) IMG, το οποίο έχει ως ιδιότητα (attribute) το αρχείο που θα επιδείξει

25 Εικόνες και σύνδεσμοι (συνέχεια) Ένας σύνδεσμος προσδιορίζεται από το στοιχείo A, που σημαίνει anchor To tag περιέχει την ιδιότητα που λέγεται HREF, και προσδιορίζει το URL του κειμένου στόχος Παράδειγμα Documentation Central!

26 Διαδραστικές σελίδες Web Όταν πρωτο-σχεδιάστηκε η HTML, δεν υπήρχε τρόπος αλληλεπίδρασης με την πληροφορία και τις εικόνες μίας σελίδας Web Οι χρήστες επιθυμούσαν μία δυναμικότερη συμπεριφορά από το Web, αυτό είχε σαν συνέπεια την ανάπτυξη νέων τεχνολογιών που θα την εξυπηρετούσαν Πολλές από αυτές τις ιδέες προήλθαν από την τότε νέα γλώσσα προγραμματισμού Java

27 Java Applets Ένα Java applet είναι ένα πρόγραμμα που σχεδιάστηκε ώστε να ενσωματώνεται σε ένα κείμενο HTML Ένα Java applet μεταφέρεται από τον Web server σε αυτόν που θέλει να τρέξει το πρόγραμμα Για να ενσωματώσω ένα applet σε κώδικα HTML, χρησιμοποιώ το tag APPLET

28 Java Applets O browser έχει ένα ενσωματωμένο διερμηνέα που εκτελεί το applet, επιτρέποντας στον χρήστη να αλληλεπιδρά με αυτό Υπάρχουν όμως δυσκολίες… Πως μπορεί να εκτελείται ένα πρόγραμμα που γράφηκε σε αν τύπο υπολογιστή σε πολλούς άλλους υπολογιστές

29 Java Applets Τα προγράμματα Java μετατρέπονται σε Bytecode, που είναι μία αναπαράσταση χαμηλού επιπέδου, αλλά δεν είναι κώδικας μηχανής που αφορά μια συγκεκριμένη KME Τα Java applets έχουν περιορισμούς ασφαλείας Για παράδειγμα, ένα Java applet δεν μπορεί να προσπελάsει τοπικά αρχεία, ή να αλλάξει τη διαμόρφωση του υπολογιστή (system settings)

30 Σελίδες Java Server Μία Java Server Page (JSP), είναι μία σελίδα Web που έχει ενσωματωμένα JSP scriptlets Ένα scriptlet είναι ένα μικρό κομμάτι εκτελέσιμου κώδικα που υπάρχει μέσα σε ένα κείμενο HTML

31 Σελίδες Java Server Ένα JSP scriptlet περικλείεται σε ειδικά tags που αρχίζουν με το Τα JSP scriptlets, είναι μία πλήρης γλώσσα προγραμματισμού σελίδα 488

32 Java Server Pages Τα JSPs εκτελούνται στον server (όπου βρίσκεται και η σχετική σελίδα) Τι στιγμή που η σελίδα φθάσει στον υπολογιστή σας, όλη η επεξεργασία έχει ήδη ολοκληρωθεί στο server. Εσείς λαμβάνετε μία σελίδα (που έχει δημιουργηθεί δυναμικά στον server) Τα JSPs είναι ιδιαίτερα χρήσιμα για το συσχετισμό μεταξύ μίας σελίδας Web με μία βάση δεδομένων

33 XML Η HTML έχει προκαθορισμένο σύνολο από tags, και κάθε tag έχει συγκεκριμένη σημασία Τα tags της HTML δεν περιγράφουν το πραγματικό περιεχόμενο ενός κειμένου Η eXtensible Markup Language (XML), επιτρέπει στον δημιουργό ενός κειμένου να περιγράψει τα περιεχόμενα του κειμένου με ένα σύνολο δικών του tag

34 XML H XML είναι μία μεταγλώσσα Μία μεταγλώσσα είναι μία γλώσσα για μιλήσουμε για, ή να ορίσουμε άλλες γλώσσες.

35 XML Όπως στην HTML, έτσι και στην XML το κείμενο έχει επισημειωμένα δεδομένα Κειμενο XML που περιέχει διάφορα δεδομένα για βιβλία

36 XML Document Type Definition (DTD): είναι μία προδιαγραφή της οργάνωσης του κειμένου. Η δομή ενός XML περιγράφεται από το σχετικό κείμενο DTD Το κείμενο DTD που αντιστοιχεί στο κείμενο XML για τα βιβλία

XML XML είναι τρόπος οργάνωσης δεδομένων, χωρίς να προσδιορίζεται ο τρόπος που αυτά θα φανούν στην έξοδο. eXtensible Stylesheet Language (or XSL): Μία γλώσσα για τον ορισμό μετασχηματισμών κειμένων XML σε κείμενα διαφόρων μορφών Σχήμα 16.7 Ένα κείμενο XML μπορεί να μετραπεί σε πολλές μορφές εξόδου

38 Desktop Web Server 2. Open file(s), 3. Edit file(s), 4. Save file(s) 1. Retrieve file(s) FTP or Web Browser 5. Upload file(s) FTP Dreamweaver or other editor Μεταφορά Αρχέιων από τον Η-Υ στον WebServer

39 Common Web Page Attributes and Features Page and text color Link to other web pages Tables Graphics Sound, video

40 More Attributes and Features JavaScripts and interactive behaviors Interactive images - rollover image, etc. Media - Flash, applet, plugins, etc. Dynamic page and database interaction - ASP, PHP, etc. Forms and CGI

41 Some General Guidelines of Basic Web Page Design Use of a table(s) to organize and hold information. Different cells contain different types of information (directions, pictures, sounds, links to URLs, etc. Table boundaries can be transparent.

42 Guidelines - Continued Selection of fonts Serif fonts versus Sans-serif fonts Serif fonts have thin lines and feet such as Times Sans-serif fonts have even lines and no feet such as Geneva Normally, Sans-serif fonts are easier to read on web pages.

43 Guidelines - Continued Be careful about web page color - avoid putting more than 5 colors on one page, or not enough contrast in background and text. Graphics are good, but don’t over-use them Consider file size and download time Accessibility issues - at a minimum, provide alternative text for pictures

44 Word Processing vs. Web On Web line breaks come in different sizes No tabs Extra spaces between words need coding

45 Word Processing vs. Web, continued Same Web page appears differently depending upon monitor, Web browser & operating system Limited number of “safe” fonts & colors