Υπερκείμενο / Υπερμέσα Γιώργος Τζιρίτας Τμήμα Επιστήμης Υπολογιστών http://www.csd.uoc.gr/~tziritas Άνοιξη 2016 1
Υπερκείμενο Πλούσιο κείμενο με δυναμική οργάνωση των πληροφοριών Οργάνωση της γνώσης με χρήση συνδέσμων Κείμενο σε εξέλιξη, προσαρμοζόμενο Περιεχόμενο δυναμικά προσαρμοζόμενο Μέθοδος πρόσβασης στα δεδομένα Σημασιολογικό σχήμα αναπαράστασης Τρόπος διάδρασης Άνοιξη 2016 2
Nelson, A file structure for the complex (1965) Evolutionary List File Είσοδος : μονάδα πληροφορίας Λίστα : διαταγμένο σύνολο εισόδων Σύνδεσμος μεταξύ μονάδων σε διαφορετικές λίστες Αυτο-τεκμηρίωση Υπερκείμενο : νέο μέσο προσαρμοσμένο στις ανάγκες του χρήστη Υπέρ : επέκταση και γενίκευση (για κάθε μέσο) Άνοιξη 2016 3
Nelson, A file structure for the complex (1965) Evolutionary List File Αυτο-τεκμηρίωση Ευρετηριασμός Άνοιξη 2016 4
Nelson : hypertext Άνοιξη 2016 5
Υπερμέσο Μη-γραμμικότητα Προσαρμοστικότητα Νοηματοδοσία Διαδραστικότητα Άνοιξη 2016 6
Συστήματα Υπερμέσων Επίπεδο παρουσίασης: διεπαφή χρήστη Επίπεδο μηχανισμών υπερμέσου κόμβοι, σύνδεσμοι Επίπεδο βάσης δεδομένων αποθήκευση, προσπέλαση, πρόσβαση Άνοιξη 2016 7
Μηχανισμοί Υπερμέσων Κόμβοι ανεξάρτητη μονάδα πληροφορίας Σύνδεσμοι διασύνδεση και συσχέτιση πληροφοριών Οργανωτική δομή μη δομημένη, δομημένη, ιεραρχική Αναλογία με τα σημασιολογικά δίκτυα γράφος σχέσεων μεταξύ εννοιών Άνοιξη 2016 8
Σύνδεσμοι Αναφορά Σχόλιο ή υποσημείωση Οργανωσιακή πληροφορία ιεραρχική δομή Σύνδεση διαδοχικών τμημάτων Περιγραφή στοιχείων πινάκων ή τμημάτων γραφημάτων Άνοιξη 2016 9
Πλεονεκτήματα Υπερμέσων Παρακολούθηση αναφορών Δημιουργία νέων αναφορών Δόμηση πληροφορίας Καθολική θεώρηση Προσαρμόσιμα έγγραφα Αρθρωτή δομή πληροφορίας Συνέπεια πληροφορίας Στοίβες εργασιών Συνέργεια δημιουργών Άνοιξη 2016 10
Προβλήματα Υπερμέσων Αποπροσανατολισμός Τοπολογία του πληροφοριακού χώρου Κλασικές αναζητήσεις σε βάσεις δεδομένων Γνωσιακή επιβάρυνση Άνοιξη 2016 11
Κείμενο Μεγάλες δυνατότητες έκφρασης Γλωσσικός πλούτος Μορφοποίηση Άνοιξη 2016 12
Κωδικοποίηση χαρακτήρων US-ASCII : 95 εκτυπώσιμοι χαρακτήρες 33 χαρακτήρες ελέγχου Τυπογραφία ISO-8859-n : Επέκταση του US-ASCII 256 χαρακτήρες, με κάλυψη και των μη λατινικών αλφαβήτων Ανταλλαγή πληροφοριών ISO-8859-7 : Συμπεριλαμβάνει το ελληνικό αλφάβητο σε μονοτονικό σύστημα Άνοιξη 2016 13
Unicode Αντιμετώπιση των περιορισμών του ISO-8859 Πολυγλωσσική επεξεργασία κειμένου Ένας κωδικός αριθμός για κάθε ξεχωριστό χαρακτήρα Κωδικοποίηση ανεξάρτητη από εμφάνιση Συμπεριλαμβάνει πάνω από 30 συστήματα γραφής UTF-8 Ένα byte για τους US-ASCII χαρακτήρες Δύο bytes για τους λοιπούς λατινικούς, ελληνικούς κ.α. χαρακτήρες Τρία bytes για τους άλλους βασικούς πολυγλωσσικούς χαρακτήρες Τέσσερα bytes για οποιουσδήποτε άλλους χαρακτήρες Άνοιξη 2016 14
HTML Tim Berners-Lee / Mosaic (1993) Εντολές/ετικέτες ως σημάνσεις ή χαρακτηρισμοί κειμένου (π.χ. επικεφαλίδες, παράγραφοι, πίνακες, λίστες, κ.α.) Στοιχεία που οριοθετούνται με τις ετικέτες <tag attributes> </tag> Συντακτικοί κανόνες <HTML> <HEAD> <TITLE> Ιδιότητες υπερμέσων</title> </HEAD> <BODY> <UL> <LI>Μη-γραμμικότητα</LI> <LI> Προσαρμοστικότητα </LI> <LI> Διαδραστικότητα </LI> </UL></BODY> </HTML> Άνοιξη 2016 15
HTML 5.0 (1/4) Δομή τεκμηρίου: Γραμμή δήλωσης έκδοσης HTML Τμήμα επικεφαλίδας <HEAD> Σώμα περιεχομένου <BODY> Ετικέτες Βασικές Μεταδεδομένα Μορφοποίηση Φόρμες Σημασία Προγραμματιστικές Εικόνες (φυσικές / γραφικά) Ήχος / βίντεο Σύνδεσμοι Λίστες Πίνακες http://www.w3schools.com/html/default.asp Άνοιξη 2016 16
HTML 5.0 (2/4) Δομή τεκμηρίου: Γραμμή δήλωσης έκδοσης HTML Τμήμα επικεφαλίδας <HEAD> Σώμα περιεχομένου <BODY> Ετικέτες <!DOCTYPE> <address> <!--...--> <a> <article> <section> <table> <form> <canvas> <figure> <img> <area> <source> <audio> <video> <code> Άνοιξη 2016 17
HTML 5.0 (3/4) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>page Title</title> </head> <body> <h1>this is a Heading</h1> <p>this is a paragraph.</p> </body> </html> This is a Heading This is a paragraph. Άνοιξη 2016 18
HTML 5.0 (4/4) <!DOCTYPE html> <html> <body> <p>click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" alt="planets" usemap="#planetmap" style="width:145px;height:126px;"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm"> </map> </body> </html> Άνοιξη 2016 19 Click on the sun or on one of the planets to watch it closer:
Εργασία HTML 5.0 Xu Cheng, Jiangchuan Liu and Dale, C., Understanding the Characteristics of Internet Short Video Sharing: A YouTube-Based Measurement Study IEEE Transactions on Multimedia, Vol.15, No.5, pp.1184-1194, Aug. 2013. Xianhui Che, Barry Ip, Ling Lin, A Survey of Current YouTube Video Characteristics IEEE MultiMedia, Vol.22, No. 2, pp. 56-63, Apr.-June 2015. Άνοιξη 2016 20