ΕΣΔ516 Τεχνολογίες Διαδικτύου Βασικές Έννοιες Νικόλας Τσαπατσούλης Επίκουρος Καθηγητής Τμήμα Επικοινωνίας & Σπουδών Διαδικτύου Εισαγωγή Φάσμα πληροφορίας εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Περιεχόμενα Περιεχόμενα - Βιβλιογραφία Ενότητας Εισαγωγή Σκοπός του μαθήματος Το φάσμα πληροφορίας Δεδομένα, πληροφορία και περιεχόμενο Το περιεχόμενο έχει μορφή Το περιεχόμενο έχει δομή Η λειτουργικότητα είναι κομμάτι του περιεχομένου Παράδειγμα Βιβλιογραφία [Boiko 2005]: Chapter 1 [Kilian 2009]: Chapter 1 1
Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Εισαγωγή Στόχος του μαθήματος: Το μάθημα Τεχνολογίες Διαδικτύου στοχεύει να εξοικειώσει τους φοιτητές με τη διαδικασία σχεδίασης και ανάπτυξης ψηφιακού περιεχομένου για το Διαδίκτυο. Το ψηφιακό περιεχόμενο αποτελείται από διάφορες μορφές πληροφορίας: Κείμενο (κυρίαρχο συστατικό στοιχείο), διανυσματικά γραφικά (λογότυπα, διαγράμματα), εικόνες (φωτογραφίες και άλλες μορφές απεικονίσεων με εκατομμύρια χρωματικές αποχρώσεις), ήχο (ηχητικά σποτάκια, συνεντεύξεις), βίντεο, και σχεδιοκίνηση (animation). Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Εισαγωγή (2) Στόχος του μαθήματος: Αφού οι φοιτητές μάθουν να δημιουργούν περιεχόμενο σε όλες αυτές τιςμορφέςδιδάσκονταιτιςβασικέςτεχνικές δόμησης και μορφοποίησης περιεχομένου για το Web μέσω της χρήσης templates και stylesheets. δημιουργία ψηφιακού περιεχόμενου μέσω διαδραστικότητας με το χρήστη (client-side programming μέσω της γλώσσας Javascript, server side programming μέσω PHP και MySQL Διαχείρισης περιεχομένου στον Παγκόσμιο Ιστό με εργαλεία CMS (Content Management Systems). 2
Εισαγωγή * εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Δεδομένα: Δεδομένα, πληροφορία και περιεχόμενο Βασικά στοιχεία επεξεργάσιμα από τους υπολογιστές τα οποία συνήθως αποθηκεύονται αυτόνομα σε μια βάση δεδομένων (λέξεις, αριθμοί, ήχοι, εικόνες) Πληροφορία: Ο μετασχηματισμός της γνώσης με τρόπο ώστε να μπορούμε να την μεταφέρουμεσεκάποιονάλλο Συνδυάζει σχετιζόμενα δεδομένα σε ένα συγκεκριμένο πλαίσιο ώστε να συμπληρώνει την γνώση κάποιου άλλου ατόμου Η αξία της πληροφορίας σχετίζεται με την αβεβαιότητα την οποία αίρει Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Περιεχόμενο: Περιεχόμενο Κάτι που περιέχεται σε κάπου Περιεχόμενο Διαδικτυακών τόπων: Σύνολο πληροφοριών οργανωμένων με τέτοιο τρόπο ώστε να είναι χρήσιμο σε κάποια συγκεκριμένη ομάδα ανθρώπων ώστε να εξυπηρετεί ένα συγκεκριμένο σκοπό Παραδείγματα: Ιστότοπος μαθήματος Ιστότοπος Amazon Ιστότοπος ΤΕΠΑΚ 3
Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Συστατικά στοιχεία ψηφιακού περιεχομένου Το ψηφιακό περιεχόμενο μπορεί να αποτελείται από: Κείμενο (απαραίτητα) Γραφικά Εικόνες Ήχους Βίντεο Animation Το ψηφιακό περιεχόμενο: Έχει δομή Παρουσιάζεται με συγκεκριμένη μορφοποίηση (που συνήθως αντανακλά τη δομή του) Παρέχει λειτουργικότητα προς τους χρήστες Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Μορφοποίηση περιεχομένου Το ψηφιακό περιεχόμενο έχει μορφή (format) η οποίααφορά: Τη μορφή αποθήκευσης του (π.χ. τα format αποθήκευση εικόνων όπως.jpg,.png,.tif, ήχου όπως.mp3,.wav,.aiff κ.ο.κ) ηοποίαυποδηλώνει έμμεσα πληροφορίες για την καταλληλότητα ή μη για ορισμένες εφαρμογές Τη μορφή απεικόνισης του. Η μορφή απεικόνισης αφορά σχεδόν αποκλειστικά το κείμενο και οι τρόποι μορφοποίησης παρέχονται άμεσα από συγκεκριμένο λογισμικό (όπως τα headings στο Microsoft Word) ή αποτελούν συγκεκριμένο χαρακτηριστικό της γλώσσας δημιουργίας ιστοσελίδων (html). Πολλές μορφές είναι αναγκαία η τροποποίηση της απεικόνισης ώστε να ταιριάζειστιςσυσκευέςπροβολήςήγιαμιαομάδαατόμων(π.χ. άτομα προβλήματα όρασης). Για το σκοπό αυτό είναι συνηθισμένο η μορφοποίηση περιεχομένου που αφορά την απεικόνιση να είναι ανεξάρτητο από το περιεχόμενο αυτό καθ αυτό. Η μορφοποίησηαυτή επιτυγχάνεται με την χρήση stylesheets. 4
Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Γιατί το ψηφιακό περιεχόμενο έχει μορφή; Το ψηφιακό μορφοποιείται ώστε να: Είναι εμφανές ποια είναι τα σημαντικά στοιχεία (π.χ. πρώτο θέμα σε μια διαδικτυακή έκδοση μια εφημερίδας) Αναδεικνύεται η δομή του (ενότητες και μεταξύ τους συσχετισμός) Υποβοηθείται η αναγνωσιμότητα και η κατανόηση του (μικρές παράγραφοι με αρκετό κενό χώρο ανάμεσα τους) Αναδεικνύονται διαφορές κουλτούρας που, σε μεγάλο βαθμό, αντανακλούν στο κοινό που το χρησιμοποιεί (γενικότερο ύφος σχεδίασης που μπορεί να υποδεικνύει π.χ. νεανικό κοινό, επίσημη ιστοσελίδα, κ.ο.κ) Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Δομή Δομή είναι ο τρόπος με τον οποίο συνθέτουμε πληροφορίες ώστε να δημιουργήσουμεέναοργανωμένοσύνολοτοοποίοβοηθάτην κατανόηση του υλικού που παρουσιάζουμε. Σεμιαιστοσελίδαηδομήαφοράτηνοργάνωσητωνεπιμέρους στοιχείων σε: Menu. Κάθε στοιχείο του menu πρέπει να αναφέρεται σε ομοειδείς πληροφορίες Επιμέρους τμήματα όπως αυτά διαμορφώνονται με μορφοποίηση layout ώστε οι επιμέρους ιστοσελίδες να έχουν παρόμοια εμφάνιση Μικρά τμήματα πληροφοριών κειμένου ώστε αυτά να είναι πιο εύκολα αντιληπτά για ανάγνωση μέσω του υπολογιστή 5
Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Βασικά στοιχεία για τη δημιουργία δομής Ιεράρχηση περιεχομένου η οποία αναδεικνύει σχέσεις ενότητας - υποενότητας Πίνακες περιεχομένου για γραπτό κείμενο Site map για ιστοσελίδες Δημιουργία ευρετηρίων: Κατάλογος σχημάτων, διαγραμμάτων Λέξεις κλειδιά Δημιουργία διασταυρούμενων αναφορών Σύνδεσμοι από μια σελίδα σε άλλη Ενεργά ευρετήρια (π.χ. με συνδέσμους στις λέξεις κλειδιά, στα στοιχεία των περιεχομένων) Εισαγωγή εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Λειτουργικότητα Λειτουργικότητα ονομάζουμε τις διαδικασίες οι οποίες υποστηρίζονται από προγράμματα υπολογιστή και επιτρέπουν στο χρήστη να διαδρά με την ιστοσελίδα: Υποστήριξη αναζήτησης εντός του ιστοτόπου Υποβολή στοιχείων χρήστη και αποθήκευση τους σε βάση δεδομένων Ανάκτηση δεδομένων από μια βάση δεδομένων Δημιουργία διαδραστικών στοιχείων πολυμέσων (παρακολούθηση ενός βίντεο, ακρόαση ηχητικών στοιχείων, κ.ο.κ) Η λειτουργικότητα συνήθως υποστηρίζεται από δυναμικούς ιστότοπους οι οποίοι χρησιμοποιούν μια βάση δεδομένων και τεχνολογίες όπως: PHP (προγραμματισμός για ανάκληση και αποθήκευση δεδομένων στη βάση) MySQL (για δημιουργία και διαχείριση της βάσης) Javascript (γιαδημιουργίααπλήςδιαδραστικότηταςχωρίςσύνδεσησε βάση δεδομένων client side programming) 6
Εισαγωγή Φάσμα πληροφορίας εδομένα, πληροφορία & περιεχόμενο Μορφή ομή Λειτουργικότητα Παραδείγματα Παραδείγματα Να μελετήσετε τα πιο κάτω Websites και να εντοπίσετε: Στοιχεία ψηφιακού περιεχομένου Τον τρόπο οργάνωσης του περιεχομένου τους Τον τρόπο μορφοποίησης του περιεχομένου Στοιχεία λειτουργικότητας Ιστότοποι: http://www.cut.ac.cy http://www.plaisio.gr http://www.amazon.com Δημιουργία Περιεχομένου Ι Ψηφιακό περιεχόμενο και τεχνολογίες Web 7
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Βιβλιογραφία - Περιεχόμενα Περιεχόμενα: Ιστοσελίδες Ιστότοποι Ανάκληση ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Βιβλιογραφία: N. Chapman, J. Chapman [2009]: Web Design: A complete introduction, Chapter 1, eds: J. Wiley & Sons, ISBN: 978 0 470 06089 6 [Vaughan 2010] Vaughan T.: Multimedia: Making it Work, Chapters 12 & 13, McGraw Hill Osborne Media, 8 th edition, 2010, ISBN: 978 0071748469 Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Ιστοσελίδες Παράδειγμα μιας απλής ιστοσελίδας 8
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Ιστοσελίδες (2) Οι ιστοσελίδες είναι το βασικό συστατικό του Παγκόσμιου Ιστού πληροφοριών (Web) Αποτελούν το ελάχιστο στοιχείο που μπορεί να απεικονίσει στην οθόνη μας ένας Web browser (Internet Explorer, Mozilla Firefox, etc) Μπορούν να περιέχουν εικόνες και κείμενο όπως οι απλές σελίδες, αλλά διαφέρουν ως προς αυτές διότι: Δεν είναι φυσικά αντικείμενα και κατά συνέπεια δεν έχουν σταθερές διαστάσεις και σταθερή μορφή. Αντίθετα η εμφάνιση τους εξαρτάται από τον web browser, ανάλυση της οθόνης μας αλλά και από τη συσκευή την οποία χρησιμοποιούμε (υπολογιστή, smartphone, Wii κλπ) Μπορούνναπεριέχουνχρονικάεξαρτώμεναστοιχεία(ήχους, βίντεο, animation) Παρέχουν διαδραστικότητα, δηλαδή αλλάζουν το περιεχόμενο ή την μορφή τους ανάλογα με τις ενέργειες του χρήστη Μπορούν να είναι διασυνδεδεμένες μεταξύ τους Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL XHTML XHTML (extented Hypertext Markup Language) είναι η βασική γλώσσα προγραμματισμού ιστοσελίδων Αποτελεί επέκταση της HTML Καθορίζει τη δομή και το περιεχόμενο ιστοσελίδων μέσω tags (π.χ. <title>αυτός είναι ο τίτλος της ιστοσελίδας</title>) 9
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL XHTML (2) tag Κώδικας Ιστοσελίδας σε XHTML Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Απεικόνιση ιστοσελίδας Για τη σωστή απεικόνιση μιας ιστοσελίδας απαιτούνται διάφορα αρχεία: Το αρχείο.html (π.χ. index.html) στο οποίο υπάρχει η βασική μορφοποίηση, το κείμενο και τα tags Ένα αρχείο.css, δηλαδή ένα stylesheet το οποίο καθορίζει πως θα εμφανίζονται τα διάφορα styles αλλά και άλλα elements που περιγράφονται στο αρχείο html Όλατααρχείαπολυμέσων(αν υπάρχουν) τα οποία αναφέρονται στην ιστοσελίδα. ΌλαταπιοπάνωαρχείασυνδυάζονταιότανοWeb browser απεικονίζει την ιστοσελίδα 10
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Ιστότοποι Ιστότοπος είναι μια συλλογή από ιστοσελίδες με συναφές περιεχόμενο Τύποι ιστοτόπων: Προσωπικοί Blogs Forums Τέχνη και διασκέδαση Πληροφορίες Online καταστήματα Μηχανές αναζήτησης Portal Online υπηρεσίες Επιχείρηση Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Συστατικά στοιχεία ιστοτόπων Οι ιστότοποι εκτός από ιστοσελίδες (δηλαδή αρχεία τύπου html) χρησιμοποιούν συνήθως: Stylesheets Αρχεία πολυμέσων Αρχεία pdf Αρχεία βάσεων δεδομένων Αρχεία κώδικα (scripts) Όλαταπιοπάνωοργανώνονταιστονweb server με παρόμοιο τρόπο όπως στον υπολογιστή μας ώστε η διαχείριση να είναι αποτελεσματική 11
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Ανάκληση Ιστοσελίδων Η επικοινωνία με ένα ιστότοπο με στατικό περιεχόμενο περιλαμβάνει δύο επίπεδα: Επίπεδο πελάτη (web-browser) Επικοινωνεί με τον DNS server με τον οποίο συνεργάζεται για την αντιστοίχηση μιας διαδικτυακής διεύθυνσης (π.χ. www.eshopcy.com.cy) σε μια διεύθυνση IP (80.245.171.68) Ζητά από τον Web server στην IP διεύθυνση που έχει παραλάβει από τον DNS server (80.245.171.68) μια συγκεκριμένη ιστοσελίδα (π.χ. index.html) και εφόσον την παραλάβει αναγνωρίζει τι άλλα συστατικά στοιχεία απαιτούνται για την απεικόνιση της (π.χ. Stylesheets, λογότυπα, εικόνες και άλλα πολυμεσικά δεδομένα όπως flash animations, video, ήχους κλπ) Ζητά από τον web-server ένα προς ένα τα πιο πάνω στοιχεία Απεικονίζει την ιστοσελίδα ολοκληρωμένη Επίπεδο εξυπηρετητή (web server): Αναμένει στην πόρτα 80 για εισερχόμενες κλήσεις από κάποιον web-browser που ζητά συγκεκριμένη ιστοσελίδα ή συστατικά στοιχεία Εντοπίζει στον τοπικό δίσκο την ιστοσελίδα ή το συστατικό στοιχείο που ζητά οweb- browser Στέλνει στον web-browser την ιστοσελίδα ή συστατικό στοιχείο που ζήτησε Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Η διεπίπεδη αρχιτεκτονική σχηματικά 1. Εισάγεις τη διεύθυνση http://server.com στο πεδίο διεύθυνσης του web browser. 2. O Web-browser επικοινωνεί με τον DNS server για να βρει την IP διεύθυνση που αντιστοιχεί στον server.com. 3. Αφού την βρει ζητά την κύρια σελίδα (π.χ. index.html) από την IP διεύθυνση που βρήκε στο βήμα 2 4. Το αίτημα διασχίζει το Internet και φτάνει στον υπολογιστή με όνομα server.com 5. Ο web server στον υπολογιστή αυτό αναζητεί στον τοπικό δίσκο την ιστοσελίδα index.html 6. Αφού την εντοπίσει την επιστρέφει στον web-browser 7. O web-browser εμφανίζει την ιστοσελίδα στην οθόνη 12
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Χρησιμοποιώντας το Web Όπως είδαμε νωρίτερα για την πλοήγηση στον Παγκόσμιο Ιστό είναι απαραίτητες δύο κατηγορίες προγραμμάτων: Ο Web browser και ο Web server. Η βασική διαφορά είναι ότι Web browsers έχουν όλοι οι υπολογιστές που είναι συνδεδεμένοι στο Διαδίκτυο ενώ Web servers έχουν πολύ λίγοι Ένας Web server εξυπηρετεί πολλούς web browsers ταυτόχρονα αλλά και σε διαφορετικές χρονικές στιγμές Το ζεύγος Web browser web server λειτουργεί στη βάση μιας λογικής προγραμματισμού εφαρμογών που ονομάζονται client server programming Το ψηφιακό περιεχόμενο μπορεί να δημιουργείται πλήρως στον Web server και νααποστέλλεταιστονweb browser (κατόπιν αιτήματος του) ή κάποιες πληροφορίες μπορεί να δημιουργούνται με εκτέλεση των προγραμμάτων στον Web browser (π.χ. κώδικας Javascript) Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL Σύνδεση στο Διαδίκτυο Για τη σύνδεση στο Διαδίκτυο απαιτείται η ύπαρξη ενός τρόπου ανταλλαγής δεδομένων με ένα ISP (Internet Service Provider) Internet Service Providers: Διαθέτουν τηλεπικοινωνιακές γραμμές σύνδεσης με το εξωτερικό. Οι γραμμές αυτές επιτρέπουν την εξυπηρέτηση της μεταφοράς δεδομένων για δεκάδες χιλιάδες χρήστες ISPs στην Κύπρο: Cytanet Cablenet PrimeTel ΗσύνδεσημεέναISP μπορεί να γίνει μέσω μιας τηλεφωνικής γραμμής (dial up, ADSL), ασύρματα μέσω κινητής τηλεφωνίας 3G (πρωτόκολλο HSPA), ασύρματα μέσω της διασύνδεσης με ένα Wi Fi spot (με χρήστη του πρωτοκόλλου ΙΕΕΕ 802.11) 13
Ιστοσελίδες Ιστότοποι Ανάκληση Ιστοσελίδων Web browser & Web server Σύνδεση στο Διαδίκτυο ADSL ADSL ΗτεχνολογίαADSL είναι ο πιο διαδεδομένος τρόπος σύνδεσης στο Διαδίκτυο μέσω ενός ISP Είναι γνωστή και ως ευρυζωνική σύνδεση επειδή επιτρέπει μεγάλες ταχύτητες (ρυθμούς) μετάδοσης δεδομένων Αποτελεί το αρκτικόλεξο του Asymmentric Digital Subscriber Line το οποίο στην ουσία μας δηλώνει ότι οι ταχύτητες με τις οποίες κατεβάζουμε πληροφορίες στον υπολογιστή μας από το Διαδίκτυο (π.χ. το κατέβασμα μιας ταινίας) είναι μεγαλύτερες από αυτές με τις οποίες ανεβάζουμε πληροφορίες στο Διαδίκτυο (π.χ. όταν ανεβάζουμε ένα βιντεάκι στο Facebook) Οι ταχύτητες μετάδοσης μετρώνται σε bps (bits per second), kbps (1 kbps = 1000 bps), Mbps (1000000 bps), Gbps (1000000000 bps) Τυπικές ταχύτητες για την τεχνολογία ADSL είναι 1, 2, 4, 8, 16, 24 Mpbs download και 256, 512 Kbps, 1 Mbps για upload 14