Συστήματα Διαχείρισης Περιεχομένου στον Παγκόσμιο Ιστό Διάλεξη #1 η : Οργάνωση & στόχοι μαθήματος, εισαγωγή σε δίκτυα/internet/www, τεχνολογίες προγραμματισμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Στόχοι μαθήματος Κατανόηση του ρόλου, της σημασίας και των δυνατοτήτων των συστημάτων διαχείρισης περιεχομένου (Content Management Systems, CMS) στο διαδίκτυο Εξερεύνηση των σύγχρονων τεχνολογιών διαχείρισης περιεχομένου στον παγκόσμιο ιστό Κατανόηση των υποκείμενων βασικών εννοιών του web προγραμματισμού, της έννοιας του δυναμικού web περιεχομένου και διάκριση των τεχνολογιών προγραμματισμού από την πλευρά του πελάτη και του διακομιστή (client side & server side programming) Ικανότητα σχεδιασμού & ανάπτυξης διαδικτυακών τόπων με χρήση web CMS 1
Αναμενόμενο αποτέλεσμα Γνωριμία με τις διαθέσιμες τεχνολογίες για την ανάπτυξη sites με δυναμικό περιεχόμενο (κυρίως PHP/MySQL) Εξοικείωση με εργαλεία ανάπτυξης web εφαρμογών (π.χ. Adobe Dreamweaver) Γνωριμία με διαθέσιμα εργαλεία διαχείρισης περιεχομένου στον παγκόσμιο ιστό: χαρακτηριστικά, δυνατότητες και συνήθεις εφαρμογές Joomla WordPress Φάσεις ανάπτυξης ενός δυναμικού διαδικτυακού τόπου: προετοιμασία του πολυμεσικού περιεχομένου web σχεδιασμός υλοποίηση βασικών λειτουργιών του διαδικτυακού τόπου με χρήση CMS επαύξηση της λειτουργικότητάς του με ενσωμάτωση έτοιμων λειτουργικών μονάδων Δομή Μαθήματος Τετάρτη 18:00-21:00 Θεωρία & Εργαστήριο Εργαστήριο Ανθρωπογεωγραφίας, Κτήριο Γεωγραφίας 2
Τρόπος αξιολόγησης Ενεργητική συμμετοχή στις διαλέξεις και εργαστήρια του μαθήματος: 20% Υλοποίηση project (ανάπτυξη διαδικτυακού τόπου με χρήση ενός εργαλείου διαχείρισης περιεχομένου) και παρουσίαση στο διδάσκοντα: 50% Συνοδευτική αναφορά (report): 30% Διδακτικό Εγχειρίδιο «Οδηγός του Joomla! 1.5: Δημιουργία επιτυχημένων websites με το Joomla!», Συγγραφέας: North, Barrie M. Εκδόσεις: Παπασωτηρίου 3
Ξένη βιβλιογραφία Σελίδα του μαθήματος στο web http://www2.aegean.gr/dgavalas/webcms/ Τι περιέχει;;; Ανακοινώσεις Διαφάνειες Ασκήσεις εργαστηρίου Βιβλιογραφία, Links, «Λεξικό» εννοιών (Γλωσσάρι όρων) 4
USB stick Από την επόμενη εβδομάδα θα δημιουργούμε web εφαρμογές που θα εκτελούνται χρησιμοποιώντας λογισμικό που θα εγκαθιστούμε σε USB sticks Μην ξεχνάτε, από την επόμενη φορά, να φέρνετε ένα USB μαζί σας στο μάθημα (πάντοτε το ίδιο)!!! Εισαγωγή στα Συστήματα Διαχείρισης Περιεχομένου 5
Τι είναι ένα Σύστημα Διαχείρισης Περιεχομένου (CMS); Ένα σύστημα διαχείρισης περιεχομένου (content management system, CMS) είναι μια εφαρμογή λογισμικού που βοηθάει στην οργάνωση και παρουσίαση περιεχομένου σε έναν ιστότοπο (website) Χρησιμοποιούνται για τη διαχείριση και έλεγχο μιας μεγάλης, δυναμικής συλλογής web υλικού (HTML έγγραφα και οι αντίστοιχες εικόνες) Είναι συνήθως υλοποιημένα ως web εφαρμογές (δηλαδή η οργάνωση, διαχείριση και παρουσίαση του περιεχομένου γίνεται μέσω από μια τυπική web διεπαφή) Τι είναι ένα Σύστημα Διαχείρισης Περιεχομένου (CMS); Τα περισσότερα CMS είναι απλά στη χρήση και δεν απαιτούν προχωρημένες δεξιότητες σε Η/Υ παρέχουν εργαλεία σε χρήστες με μικρές τεχνικές γνώσεις σε γλώσσες σήμανσης ή προγραμματισμό να δημιουργήσουν και να διαχειριστούν περιεχόμενο με σχετική ευκολία Τα περισσότερα συστήματα χρησιμοποιούν μια βάση δεδομένων για την αποθήκευση και ένα επίπεδο παρουσίασης για την εμφάνιση περιεχομένου στους επισκέπτες του website βάσει ενός προτύπου (template) Ta web CMS διαφέρουν από τα εργαλεία συγγραφής ιστοσελίδων (π.χ. το Microsoft FrontPage ή το Adobe Dreamweaver). Ένα CMS επιτρέπει σε χρήστες χωρίς τεχνικές γνώσεις να πραγματοποιήσουν αλλαγές σε υφιστάμενα websites με λίγη ή καθόλου εκπαίδευση 6
Παραδείγματα CMS εργαλείων Joomla! WordPress Εισαγωγή στα Δίκτυα Υπολογιστών 7
Δίκτυα Η/Υ Δίκτυο υπολογιστών (computer network): δύο τουλάχιστον Η/Υ συνδεδεμένοι ώστε να μπορούν να μοιράζονται δεδομένα και πόρους Δομικά στοιχεία ενός δικτύου: Υπολογιστικό σύστημα (host), π.χ. PCs, σταθμοί εργασίας, εξυπηρετητές δικτύου (network servers) Κόμβος (node), δηλ. σημεία συνάντησης γραμμών επικοινωνίας Περιφερειακές συσκευές δικτύου (network peripherals), όπως εκτυπωτές, modem, κ.λπ. Υποδίκτυο επικοινωνίας (communication subnet): καλωδίωση, γραμμές μετάδοσης Κάθε Η/Υ έχει τη δική του διεύθυνση δικτύου, που τον χαρακτηρίζει μονοσήμαντα Χρησιμότητα Δικτύων Η/Υ Διαμοίραση πόρων (εκτυπωτές, αποθηκευτικός χώρος, επεξεργαστική ξργ ισχύς, χς,...) Ανταλλαγή πληροφοριών, μηνυμάτων, αρχείων Συντονισμός εργασιών Ομαδική εργασία Ευκολότερη αποθήκευση εφεδρικών αρχείων (backup) 8
Κατηγοριοποίηση Δικτύων βάσει μεγέθους Τοπικό δίκτυο (Local Area Network, LAN) Δίκτυο ευρείας ζώνης (Wide Area Network, WAN) Διαδίκτυο (Internet) Internet & World Wide Web 9
Το Διαδίκτυο ( Internet ) Το Διαδίκτυο είναι ένα WAN που καλύπτει ολόκληρο τον πλανήτη Η λέξη Internet από τον όρο internetworking, ο οποίος υποδηλώνει επικοινωνία μεταξύ δικτύων Ξεκίνησε σαν ένα ερευνητικό πρόγραμμα της κυβέρνησης των ΗΠΑ, επιχορηγούμενο από την Advanced Research Projects Agency (ARPA). Αρχικά ονομάζονταν ARPANET Το Internet αναπτύχθηκε γρήγορα στις δεκαετίες των 80 90 Το 1983 ήταν συνδεδεμένοι στο Internet λιγότεροι από 600 Η/Υ, ενώ τώρα υπάρχουν δεκάδες εκατομμύρια Ανάπτυξη του Internet: Συνδεδεμένοι Η/Υ 10
Ανάπτυξη του Internet: αριθμός ιστοτόπων IP Διευθύνσεις στο Διαδίκτυο Κάθε IP διεύθυνση αποτελείται από 4 bytes. Για να είναι ευανάγνωστη γράφεται σε δεκαδική μορφή με το δεκαδικό σημείο να διαχωρίζει τα bytes (dotted decimal notation) όπως δείχνει το σχήμα: 11
Κύριες Εφαρμογές Tο Internet συχνά συγχέεται με τις εφαρμογές που δουλεύουν επί του Internet. Τέτοιες δημοφιλείς εφαρμογές είναι οι: E Mail News Telnet File Transfer Protocol (FTP) Internet Relay Chat (IRC) The World Wide Web Εφαρμογές για Internet The World Wide Web (WWW) Εμφανίζεται το 1993 και «απογειώνει» το Internet Προέρχεται από ένα εσωτερικό σύστημα διαχείρισης εγγράφων που αναπτύχθηκε από τον Tim Berners Lee για συναδέλφους του φυσικούς στο CERN (Ελβετία). Πρωτομιλάει για το www το 1990. Αποτελεί σύνθεση τριών τεχνολογιών: Δίκτυα Η/Υ Διαχείριση εγγράφων / πληροφορίας Λογισμικό γραφικής διεπαφής με χρήστες (graphical user interface) Το όνομά του;;; Το WWW υποστηρίζει έγγραφα υπερκειμένου (hypertext documents) και επιτρέπει στους ςχρήστες να βλέπουν και να κάνουν πλοήγηση ησε διαφορετικούς τύπους δεδομένων. Μέσο επικοινωνίας όχι διαφορετικό από τους παρόμοιους πρόγονους του (ραδιόφωνο, τηλεόραση,...). Όμως ο καθένας μπορεί να γράψει μια ιστοσελίδα (Web page) και να την κάνει διαθέσιμη σε κοινή θέα. 12
Ηλεκτρονικό εμπόριο (ecommerce) (I) Ηλεκτρονικό εμπόριο (ecommerce) (II) 13
Ηλεκτρονική Διακυβέρνηση (e Government) Τηλεϊατρική (tele medicine) 14
Τηλε συνδιάσκεψη (teleconference) Ενημέρωση 15
Διασκέδαση Άλλες χρήσεις Σήμερα: e Banking Επικοινωνίες (π.χ. e mail, chat, ) Προσομοίωση (simulation) Αύριο: Ηλεκτρονική Ψήφος Τηλε εργασία Εικονικές Περιηγήσεις (π.χ. περιήγηση στην αρχαία Αθήνα) ) 16
Ο Η/Υ στον οποίο «έτρεξε» ο πρώτος web server και browser στο CERN Ενδεικτική οθόνη από τον πρώτο web browser στο CERN 17
Υπερκείμενο (HyperText ) Το Web είναι βασισμένο στην έννοια του υπερκειμένου ένας μηχανισμός όπου η πληροφορία είναι κατανεμημένη σε πολλές σελίδες και δια συνδεδεμένη συνδεδεμένη. Επιτρέπει την πλοήγηση ανάμεσα σε πληροφορίες με μη γραμμικό τρόπο και μη ιεραρχικό τρόπο Το 1990 κυκλοφόρησε ο πρώτος Web browser, βασισμένος σε κείμενο και ικανός να ακολουθεί βασισμένους σε κείμενο υπερσυνδέσμους. Η ανάγκη υποστήριξης γραφικών οδήγησε στον πρώτο Web browser γραφικών Mosaic τον πρόγονο του Netscape. Μια τυπική web σελίδα σήμερα υποστηρίζει κείμενο, πίνακες, πλαίσια, φόρμες, ήχο, βίντεο,... Αναζήτηση Πληροφορίας Το Web είναι τώρα μια τεράστια πηγή πληροφορίας και δεδομένων Πως μπορεί κανείς να ψάξει αυτή την πελώρια αποθήκη για τη συγκεκριμένη πληροφορία που χρειάζεται; Xρησιμοποιoύνται μ οι Μηχανές Αναζήτησης ης (search engines): Google, Altavista, InfoSeek, Αναζητήσεις με λέξεις κλειδιά (keywords) και Boolean λογική Επιστροφή αποτελεσμάτων (σελίδες που περιέχουν τα keywords) με συνδέσμους προς τις αρχικές θέσεις των εγγράφων. Οι βάσεις δεδομένων των μηχανών αναζήτησης είναι κτισμένες με αυτοματοποιημένα bots or spiders λογισμικό που ψαρεύει στο Web διαβάζοντας και ανακτώντας την πληροφορία ρ που χρειάζεται να προσθέσουν στη βάση δεδομένων τους. Τα αποτελέσματα ποικίλουν ανάλογα με τη μηχανή αναζήτησης. Αντίστοιχα bots χρησιμοποιούν και οι spammers για να «ψαρεύουν» email διευθύνσεις Κάποιες μετα μηχανές αναζήτησης (MetaCrowler, OneSeek) κάνουν παράλληλες αναζητήσεις χρησιμοποιώντας διαφορετικές μηχανές αναζήτησης. 18
Εργαλεία αναζήτησης ( search engines ) Yahoo Infoseek Google AltaVista Excite Lycos HotBot Ask Jeeves OneSeek MSN Netscape Search Metacrawler Dogpile Ο τρόπος οργάνωσης (Ι) http://www.aegean.gr/culturaltec/dgavalas/abc/page.htm Πρωτόκολλο για τη μεταφορά της ιστοσελίδας Είδος server Όνομα περιοχής του server (DNS) Directory στο δίσκο του server Όνομα αρχείου ιστοσελίδας Για να προσπελάσουμε μια ιστοσελίδα, πρέπει να καθοριστεί στον browser η ακριβής της διεύθυνση, πληκτρολογώντας την, ή κάνοντας κλικ σ ένα σύνδεσμο Αυτή η διεύθυνση είναι o παγκόσμιος εντοπιστής πόρων (Universal Resource Locator ή URL) Η URL περιέχει όλη την αναγκαία πληροφορία για τη μονοσήμαντη ταυτοποίηση ενός συγκεκριμένου αρχείου στον κόσμο 19
Ο τρόπος οργάνωσης (ΙΙ) Όταν αποθηκεύουμε μια ιστοσελίδα σε έναν εξυπηρέτη ιστού (web server), τότε λέμε ότι «δημοσιεύουμε» τη σελίδα στο διαδίκτυο. Κάθε χρήστης/ίδρυμα/οργανισμός/εταιρία που θέλει να έχει παρουσία στο web οργανώνει της πληροφορίες του δημιουργώντας ένα σύνολο ιστοσελίδων, συνδεδεμένων με συστηματικό τρόπο και ιεραρχική οργάνωση. Το σύνολο αυτών των ιστοσελίδων αποτελεί την τοποθεσία (web site). URLs και Συστήματα Αρχείων Με ένα URL, ένα "σύστημα αρχείων" δεν μπορεί να είναι πλέον το τοπικό δίκτυο που σκεπτόμαστε συνήθως. Αν ανοίγουμε αρχεία μέσα από τις εφαρμογές μας μέσω ενός URL, το αρχείο αυτό μπορεί να είναι στην τοπική σκληρή μονάδα, σ ένα τοπικό ανεβασμένο δίκτυο ή κάπου που είναι γεωγραφικά μετατοπισμένο. 20
Τοποθεσίες (sites) Εισαγωγική σελίδα Κεντρική σελίδα Δεν υπάρχει πάντα, λειτουργεί σαν καλωσόρισμα Η βασική σελίδα «βιτρίνα» της τοποθεσίας Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα Σελίδα ΟΙ ΣΕΛΙΔΕΣ ΤΗΣ ΤΟΠΟΘΕΣΙΑΣ Μοντέλο Client Server στο Web Client (πελάτης): web browser (Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome, ) Server (εξυπηρέτης): web server Υλικό (PC, workstation, mainframe) Λειτουργικό σύστημα (Windows NT, 2000, XP, Unix) Λογισμικό web server: Apache (60% της αγοράς, opensource), IIS (τρέχει σε Windows), iplanet, HTTP: HyperText Transfer Protocol HTML: HyperText Meta Language Web browser Internet Αίτηση Απόκριση HTTP Web server Web server filesystem HTML files 21
Τι κάνει ένας πελάτης (web client) Αφού συνδεθεί, ο χρήστης προσπελαύνει το Web μέσω λογισμικού που λέγεται browser (π.χ. Netscape ή Internet Explorer). Οι browsers εντοπίζουν και εμφανίζουν πληροφορία ρ από το Web. Η επικοινωνία γίνεται δια μιας συμφωνημένης γλώσσας μεταφοράς ή πρωτοκόλλου, π.χ. HTTP (HyperText Transfer Protocol). Ο χρήστης ζητάει μια ιστοσελίδα μέσω του browser ο οποίος το κοινοποιεί στον εξυπηρετητή. Ο browser περιμένει να μεταφερθεί η ιστοσελίδα, τυπικά ένα αρχείο κειμένου που περιέχει οδηγίες σε HTML. Τα περίπλοκα γραφικά και η μορφοποίηση που βρίσκει κανείς στις ιστοσελίδες είναι αποτέλεσμα από τον client browser που ανταποδίδει την σελίδα στη μορφοποίηση που ήταν καθορισμένη στο αρχείο. Οι εικόνες και γραφικά δεν αποτελούν μέρος μιας HTML σελίδας αλλά αποστέλλονται ξεχωριστά (απλά ο browser διαβάζει την HTML σελίδα και εμφανίζει τα γραφικά βάσει των οδηγιών που περιλαμβάνονται στην HTML). Τι κάνει ένας εξυπηρετητής (web server) Η δουλειά του server είναι κατά τι πιο εύκολη. Ο server είναι λογισμικό (π.χ. Apache Server ή Microsoft Internet Information Server) που τρέχει σ έναν υπολογιστή και αποκρίνεται στις αιτήσεις του client για ιστοσελίδες Οι ιστοσελίδες συνήθως βρίσκονται στο τοπικό του σύστημα αρχείων. Ο server ανακτά και διαβιβάζει τα αρχεία στον client 22
«Συνομιλία» web client (browser) web server (I) Τι συμβαίνει από τη στιγμή που πληκτρολογήσουμε τη διεύθυνση μιας τοποθεσίας: 1. O browser απευθύνεται στον DNS server που εξετάζοντας τη URL εντοπίζει την IP διεύθυνση του web server στον οποίο απευθύνεται η αίτηση 2. Ο browser στέλνει το αίτημα για αποστολή της ιστοσελίδας στον web server 3. Το οαίτημαφτά φτάνει ειστον web server e που αναζητά αζητά και ανακτά α την αιτούμενη σελίδα από τον τοπικό του δίσκο 4. Η ιστοσελίδα αποστέλλεται (μέσω HTTP) «Συνομιλία» web client (browser) web server (II) Τι συμβαίνει από τη στιγμή που πληκτρολογήσουμε τη διεύθυνση μιας τοποθεσίας (συνέχεια): 5. Ο browser λαμβάνει την ιστοσελίδα (HTML αρχείο), διαβάζει τις οδηγίες του HTML κώδικα και σχεδιάζει το περιεχόμενο αντίστοιχα 6. Αν η ιστοσελίδα περιέχει φωτογραφίες, αυτές στέλνονται ως ξεχωριστά αρχεία από τον web server στον browser. 7. To ίσιο συμβαίνει στην περίπτωση που η σελίδα «περιλαμβάνει» λ και applets lt 8. Αν ο HTML κώδικας έχει και ενσωματωμένο κώδικα σεναρίου (γραμμένο σε κάποια script γλώσσα, π.χ. Javascript), αυτός εκτελείται από τον browser. 23
Γλώσσα Σε τι γλώσσα γράφει κανείς μια ιστοσελίδα; Ο server στέλνει πίσω την ιστοσελίδα που ζητήθηκε ως έγγραφο κειμένου με οδηγίες για το πώς αυτή θα έπρεπε να εμφανιστεί. Είναι αρμοδιότητα του client browser να ανταποδώσει το έγγραφο στην κατάλληλη μορφή. Αυτές οι οδηγίες είναι σε Hypertext Markup Language HTML. Τα HTML έγγραφα μπορούν να δημιουργηθούν με έναν συντάκτη κειμένου (text editor), όπως NotePad (Windows), vi/emacs (Unix κλπ.). Εξειδικευμένα εργαλεία συγγραφής (web authoring tools): Microsoft FrontPage, Micromedia DreamWeaver,... (με δικαιώματα ιδιοκτησίας) 24
HyperText Markup Language: HTML (Ι) Γλώσσα κειμένου που χρησιμοποιείται για να δημιουργηθούν σελίδες ιστού. HyperText (υπερ κείμενο): δίνει στο χρήστη τη δυνατότητα ανάγνωσης και κίνησης μέσα σε κείμενο και άλλες μορφές οπτικής πληροφορίας με μη γραμμικό τρόπο ακολουθώντας μια σειρά από συνδέσμους Σχεδιάστηκε για να καθορίσει τη λογική οργάνωση ενός αρχείου κειμένου που προορίζεται να «δημοσιευτεί» στον παγκόσμιο ιστό Ουσιαστικά πρόκειται για μια γλώσσα οδηγιών που καθοδηγεί διαφορετικά προγράμματα ανάγνωσης ιστοσελίδων (φυλλομετρητές browsers) να «μεταφράσουν» τις οδηγίες και να σχεδιάσουν τα αποτελέσματα (πληροφορία) στη σελίδα του χρήστη Οι οδηγίες της HTML δίνονται με χρήση των ετικετών (tags). Οι ετικέτες είναι το τμήμα εκείνο του κειμένου που περικλείεται από τα σύμβολα μικρότερο (<) και μεγαλύτερο (>) και την εντολή μέσα στα σύμβολα αυτά που αποτελεί την οδηγία. Οι ετικέτες «ανοίγουν» και «κλείνουν». Π.χ.: <b>this text will be displayed as bold!</b> HyperText Markup Language: HTML (II) Ενα HTML αρχείο είναι ένα απλό αρχείο κειμένου (text file). Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειμένου. Αρκεί ένας απλός επεξεργαστής κειμένου όπως είναι το NotePad ή το MS Word Υπάρχουν ωστόσο και ειδικά προγράμματα για τη γρήγορη και εύκολη συγγραφή HTML κώδικα (web authoring tools), όπως το MS FtontPage ή το Adobe Dreamweaver (απαιτούν άδεια!) και άλλα τα οποία διατίθενται δωρεάν Η HTML δεν αποτελεί έναν "Παίρνεις Αυτό Που Βλέπεις" (What You See Is What You Get, WYSIWYG) επεξεργαστή κειμένου όπως το MS Word. Δηλαδή, ο HTML κώδικας δεν απεικονίζεται αυτούσιος όταν το HTML αρχείο ανοίγεται από έναν browser 25
Βασική δομή ενός HTML εγγράφου Δηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> Επικεφαλίδα: περιέχει πληροφορίες σχετικά με το υπερκείμενο (τίτλος, λέξειςκλειδιά,...) </BODY> Ένα πρώτο αρχείο HTML <html> <head> <title>page Title</title> </head> <body> These are the pages contents </body> </html> Τι αποτέλεσμα θα εμφανίσει στην οθόνη; 26
Τι είναι οι ετικέτες (tags) της HTML; Όταν ο web browser εμφανίζει μία σελίδα στην ουσία διαβάζει από ένα αρχείο απλoύ κειμένου και κοιτάει για ειδικούς κώδικες ή αλλιώς "ετικέτες" που περιλαμβάνονται μεταξύ των συμβόλων < και >. Η γενική μορφή μιας HTML ετικέτας είναι: <tag_name>σώμα κειμένου που θα επηρεαστεί </tag_name> Οι ετικέτες συνιστούν οδηγίες προς τον browser σχετικά με το πως θα μορφοποιήσει και θα εμφανίσει το σώμα κειμένου που βρίσκεται ανάμεσά τους Συστατικά της HTML ετικέτες Ο κώδικας της HTML έχει μια απλή δομή και οι οδηγίες της είναι ετικέτες (tags), η κάθε μια από τις οποίες υποδεικνύει στον browser τι θα πρέπει να κάνει. Κάθε ετικέτα είναι ένα string (συμβολοσειρά) ορισμένο εντός ενός < για άνοιγμα και ενός > για κλείσιμο. Τα δεδομένα που συσχετίζονται μ αυτήν την ετικέτα οροθετούνται με μια αντίστοιχη, προς την αρχική, ετικέτα κλεισίματος, ορισμένη ως το ίδιο string μεταξύ των χαρακτήρων </ και >. Για παράδειγμα, για να αρχίσει κανείς να γράφει σε πλάγια (italics) χρησιμοποιεί την ετικέτα <i>. Για να επανέλθει σε κανονικό κείμενο, κλείνει το σε πλάγια μορφή κείμενο με </i>. Οτιδήποτε είναι μεταξύ των δύο ετικετών θα εμφανιστεί σε πλάγια μορφή, σε HTML είναι, <i> Οτιδήποτε είναι μεταξύ των δύο ετικετών θα εμφανιστεί σε πλάγια μορφή</i>. 27
Συστατικά της HTML: ορίσματα Πολλές ετικέτες έχουν ιδιαίτερα ορίσματα (attributes), τα οποία είναι επιλογές που εφαρμόζονται σ αυτήν την ετικέτα. Κάθε όρισμα για μια ετικέτα έχει ένα όνομα μοναδικό και ορίζεται εντός της ετικέτας ανοίγματος, ακριβώς πριν το >. <p align= > αρχίζει μια νέα παράγραφος και το align όρισμα χρησιμοποιείται για να καθοριστεί ο τύπος της στοίχισης. <img height= > εισάγει μια εικόνα στο έγγραφο και το height χαρακτηριστικό καθορίζει ρζ το μέγεθος της εικόνας Συστατικά της HTML: τιμές Προφανώς τα ορίσματα πρέπει να έχουν τιμές (στα παραδείγματα δείχνονται ως ). Μπορεί να υπάρχει μια αριθμημένη ηλίστα δυνατών τιμών ενός χαρακτηριστικού και ορισμένα δέχονται μόνο ακέραιους και άλλα δέχονται οποιοδήποτε string, που συχνά αναπαριστά όνομα αρχείου ή μια URL. <p align= center > (ή left, right ή justified). <img height= 150 > (πρέπει να είναι θετικός ακέραιος). <a href="http://www.amazon.com/"> (ένας URL υπερσύνδεσμος) Η HTML δέχεται την Αμερικάνικη σύνταξη οπότε προσοχή σε μερικές λέξεις όπως center/centre, gray/grey κλπ. 28
Ένας Βασικός HTML Κατάλογος (I) ομή: <html>... </html> η αρχή και το τέλος ενός εγγράφου <head>... </head> το ένα από τα δύο μέρη ενός HTML εγγράφου <body>... </body> το δεύτερο μέρος του HTML εγγράφου <title>... </title> τίτλος εγγράφου, εμφανίζεται στην μπάρα οροφής. <!... > ένα σχόλιο (χωρίς απόδοση) Μπλοκ: <h1>... </h1> γραμματοσειρά) Πρώτο επίπεδο επικεφαλίδας (μέγιστη <h5>... </h5> Πέμπτο επίπεδο επικεφαλίδας <p>... </p> <center>... </center> Αλλαγή παραγράφου Κεντράρισμα του κειμένου (μεταξύ των tags) Ένας Βασικός HTML Κατάλογος (II) υπερκείμενο (hypertext) <a>... </a> εικόνες (images) Δεσμός, με τονισμένο <img> Χρησιμοποιείται για να τοποθετήσει μια εικόνα ενδογραμμικά μορφοποίηση (format) <br> <hr> Αρχίζει μια νέα γραμμή Εισάγει οριζόντια γραμμή <b>... </b> Έντονος (bold) τύπος <u>... </u> Υπογραμμίζει <pre>... </pre> Διατηρεί μορφοποιημένα περιεχόμενα 29
Φόρμες της HTML Φόρμα (form): μια δομή της HTML που επιτρέπει στον «ιδιοκτήτη» μιας ιστοσελίδας να συλλέγει πληροφορίες από χρήστες που την επισκέπτονται. Οι πληροφορίες αυτές, αφότου ληφθούν, μπορούν να σταλθούν σε ένα script που τρέχει είτε στο browser είτε στον web server για περαιτέρω επεξεργασία Οι πληροφορίες εισάγονται από το χρήστη που συμπληρώνει τη φόρμα και τις υποβάλει (συνήθως πατώντας ένα πλήκτρο Submit ) Έπειτα, η διαδικασία φεύγει από την επικράτεια της HTML και περνάει στο script που θα επεξεργαστεί τα δεδομένα Εξαιρέσεις: μια φόρμα μπορεί να κατευθύνει το χρήστη σε μια άλλη σελίδα ή να στείλει ένα email με κείμενο που συμπληρώθηκε στον ιδιοκτήτη της σελίδας. Ετικέτα και ορίσματα των HTML forms: <form name="myform" method="post" action= www.myscriptpage.htm"> </form> Άσκηση #1 Ανοίξτε τον Adobe Dreamweaver και σχεδιάστε την ακόλουθη HTML φόρμα: name sirname email telephone 30
Προγραμματισμός στον παγκόσμιο ιστό από την πλευρά του πελάτη (client side web programming) Client Side web programming Tα ενεργά στοιχεία (κώδικας) «κατεβαίνει» στον web browser μαζί με τη στατική πληροφορία (HTML) O Browser πρέπει να μπορεί να εντοπίσει και να εκτελέσει τα ενεργά στοιχεία προγράμματα Δύο κατηγορίες τεχνολογιών: 1. Ο κώδικας είναι προ μεταγλωττισμένος, ο browser τον «ερμηνεύει» (εκτελεί), π.χ. Java Applets 2. Κώδικας σεναρίου (script), ο browser τον επεξεργάζεται και αν είναι συντακτικά σωστός τον εκτελεί, π.χ. Javascript, Vbscript, Flash) WWW Browser HTML DHTML (CSS JavaScript VbScript runtime environment) HTTP Request HTTP Response: HTML στατική WWW Server 31
Client Side: Καταλληλότητα, Πλεονεκτήματα, Μειονεκτήματα Κατάλληλη τεχνολογία όπου: Ελέγχεται η είσοδος του χρήστη (form validation) Απαιτούνται πολύπλοκες λειτουργίες στον πελάτη (πχ. παιχνίδια) Πλεονεκτήματα: Ταχύτερες λόγω τοπικής εκτέλεσης Δυνατότητα εκτέλεσης χωρίς συνεχή σύνδεση server/client Δυνατότητες, ευελιξία, ευχρηστία και καλαισθησία ιστοσελίδων Οικοµικότερες Καμία εμπλοκή με server Μειονεκτήματα: Ο κώδικας είναι ορατός Δεν μπορεί να έχει πρόσβαση στο τοπικό file system Δεν τρέχουν σε όλους τους clients (browsers) Java Applets (μικρο εφαρμογές) Προγράμματα γραμμένα σε Java Ενσωματωμένες οδηγίες σε ιστοσελίδες για την εκτέλεσή τους Όταν ιστοσελίδες που περιέχουν applets εμφανίζονται σε Web browsers, τότε "φορτώνονται" και εκτελούνται και τα applets. Τα applets στέλνονται στον web client (browser) με ξεχωριστή HTTP αίτηση/απόκριση Applet tags Μοιάζουν με τα υπόλοιπα HTML Tags: <APPLET CODE="TestApplet.class" WIDTH=300 HEIGHT=300> </APPLET> Η "έξοδος" του applet εμφανίζεται σε ένα υποσύνολο της περιοχής εμφάνισης πληροφοριών του browser. 32
Διαδικασία εκτέλεσης Applet Web server page.html Web browser HTML κώδικας 1 <HTML> Hello!!! <APPLET code= welcome.class"> </APPLET> An applet is running above! </BODY> </HTML> welcome.class Κενός χώρος (εδώ θα εμφανιστεί το Αpplet) HTML κώδικας 2 $%@#$$#@bgdb 234#$%#%^#^& 4$%#%pgb$f#@$ 23%^^565^&&m(!@#$6432 Παραδείγματα από applets http://richardbowles.tripod.com/java/menu.htm http://javaboutique.internet.com/icalendar/ http://javaboutique.internet.com/animatedtreecontrol/ te et.co / ated eeco t o / 33
Γλώσσα σεναρίου Javascript Γλώσσα σεναρίου (script language) Αναπτύχθηκε από τη Netscape Τρέχει σε όλους τους browsers (cross platform) Γράφεται απευθείας μέσα σε HTML έγγραφα με ή χωρίς χρήση ειδικού λογισμικού (HTML authoring tools, script editors) Πλεονεκτήματα/Μειονεκτήματα client side programming g Αντίδραση/επεξεργασία user actions Επεξεργασία/έλεγχος user input Δυναμική εμφάνιση (συγγραφή) HTML Βελτίωση ευχρηστίας, ευελιξίας πλοήγησης Εύκολη στην εκμάθηση/χρήση Όχι όμως πλήρης γλώσσα Javascript vs. Java Javascript Γλώσσα σεναρίου (script language) Διερμηνεύεται (δεν μεταγλωττίζεται) από τον client Βασίζεται σε αντικείμενα (Objectbased): κάνει χρήση built-in αντικειμένων αλλά όχι κλάσεων / κληρονομικότητας Κώδικας ενσωματωμένος στην HTML Οι τύποι δεδομένων των μεταβλητών ΔΕΝ δηλώνονται Δεν έχει πρόσβαση στο τοπικό σύστημα αρχείων Java Πλήρης γλώσσα προγραμματισμού Μεταγλωττίζεται στον server πριν εκτελεστεί στον client Αντικειμενοστραφής (objectoriented): τα applets αποτελούνται από κλάσεις/ αντικείμενα, κάνουν χρήση κληρονομικότητας Ta applets είναι διακριτά από την HTML (ο χρήστης έχει πρόσβαση σε αυτά μέσω της HTML) Οι τύποι δεδομένων των μεταβλητών δηλώνονται υποχρεωτικά Δεν έχει πρόσβαση στο τοπικό σύστημα αρχείων 34
Παραδείγματα Javascript κώδικα <html> <head> <script language="javascript"> " function message() { alert("this alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> </html> Εκτέλεση σεναρίου Παραδείγματα Javascript κώδικα <html> <body> <script language="javascript"> " for (i = 1; i <= 6; i++) { document.write("<h" + i + ">This is header " + i) document.write("</h" + i + ">") } </script> </body> </html> <h1> This is header 1</h1> <h2> This is header 2</h2> Εκτέλεση σεναρίου 35
Πρόσβαση σε γραφικά στοιχεία (graphical components) που βρίσκονται σε HTML φόρμα <html> <head> <script language="javascript"> function display() { alert ('First (First number: ' + document.myform.first.value + ' Second number: ' + document.myform.second.value) } </script></head> <body> <form name="myform" method="post" action=""> <p>first number: <input name="first" type="text" id="first"> </p> <p>second number: <input name="second" type="text" id="second"> </p> <p> <input name="submit" type="submit" id="submit" value="submit Values" onclick="display()"> </p> </form> </body> </html> Εκτέλεση σεναρίου Χειρισμός συμβάντων (event handling) Συμβάν Πότε παράγεται Ποιο control αφορά onchange Τροποποιείται κείμενο, φεύγει το focus Select, text onclick/dblclick k Γίνεται κλικ Button, checkbox, link, radio onerror Συμβαίνει λάθος κατά τη Image φόρτωση μιας εικόνας onfocus Δέχεται το focus Button, checkbox, radio, select, text onkeydown/press/up Κάποιο πλήκτρο πιέζεται, αφήνεται,.. Document, image, link, textarea onload/unload onmousedown/up/over/ Out onsubmit Φορτώθηκε το έγγραφο ή μια εικόνα Πιέζεται, αφήνεται, μετακινείται o mouse cursor H φόρμα γίνεται submit Image, window Button, document, link 36
Παραδείγματα εφαρμογών Javascript Alert Prompt Login form (είναι ί σωστή αυτή η προσέγγιση;) ) Επικύρωση φόρμας (form validation) Ρολόι πραγματικού χρόνου (από που «διαβάζεται» η ώρα;) Δημιουργία συμβάντων (events) μέσω του ποντικιού Slide ld show 37