Εργαλεία Ανάπτυξης Εφαρμογών Internet I 1: Εισαγωγή στον Παγκόσμιο Ιστό Σταύρος Καμμάς
Δομή μαθήματος 1. Εισαγωγή στον Παγκόσμιο Ιστό (www, υπερκείμενο, υπερσύνδεσμοι, υπερμέσα, πολυμέσα, πλοηγοί, παραδείγματα) 2. Εισαγωγή στο περιβάλλον με δομή πελάτη-εξυπηρετητή (στατικές και αμφίδρομες εφαρμογές) 3. Εργαλεία και τεχνικές από την πλευρά του πελάτη (HTML, επεκτάσεις, γλώσσες σεναρίων) 4. Εργαλεία και τεχνικές από την πλευρά του εξυπηρετητή (Web server, CGI, Βάσεις Δεδομένων) 5. Αρχές σχεδιασμού και τρόποι οργάνωσης ιστοσελίδων (Χαρακτηριστικά, ιδιαιτερότητες, δυνατότητες, περιορισμοί, εισαγωγή στην HTML, μορφή, δομή σελίδας, η έννοια των ετικετών) 6. Στοιχεία σελίδας HTML (λίστες, μορφοποίηση κειμένου, σύνδεσμοι, εικόνες και φόντα, πολυμέσα) 7. Πίνακες και πλαίσια σε HTML 8. Η έννοια της δυναμικής ιστοσελίδας και πρότυπο CGI 9. Δημοσίευση Ιστοσελίδας (Επιλογή web server, διαχειριστής, οργάνωση αρχείων, buttons, banners, URL) 10. Εισαγωγή στη JavaScript (Java και JavaScript, περιγραφή, δυνατότητες, τρόποι εκτέλεσης σεναρίων, τεχνάσματα) 11. Προχωρημένα θέματα της JavaScript (αντιμετώπιση λαθών και αποφυγή προβλημάτων, μεταβλητές και σταθερές αποθήκευση δεδομένων, εκφράσεις και τελεστές χειρισμός τιμών) 12. Περιβάλλοντα σχεδίασης και ανάπτυξης Σταύρος Καμμάς ιστοσελίδων - 2012
WWW Τι είναι; Παγκόσμιος Ιστός (World Wide Web): Σύστημα διασυνδεδεμένων εγγράφων, με χρήση υπερκειμένου (hypertext), στο οποίο μπορεί κανείς να έχει πρόσβαση μέσω του Διαδικτύου (Internet).
Hypertext/Hyperlink Τι είναι; Υπερκείμενο είναι ένα κείμενο με υπερσυνδέσμους. Κείμενο που εμφανίζεται σε έναν υπολογιστή ή μια άλλη ηλεκτρονική συσκευή με αναφορές (υπερσυνδέσμους - hyperlinks) σε άλλο κείμενο στο οποίο ο αναγνώστης μπορεί να έχει άμεσα πρόσβαση, συνήθως με ένα πάτημα του ποντικιού ή με μια σειρά πλήκτρων. Εκτός από κείμενο, μπορεί να είναι πίνακες, εικόνες και άλλα μέσα παρουσίασης. Ένας υπερσύνδεσμος δείχνει σε ένα ολόκληρο έγγραφο ή σε ένα συγκεκριμένο σημείο μέσα στο έγγραφο.
WWW Πότε ξεκίνησε; Σχεδιάστηκε το 1989 από τον Tim Berners Lee στο CERN και ξεκίνησε να λειτουργεί το 1991 ως μια μέθοδος για να μεταφέρει μέσω δικτύου απλά κείμενα τα οποία είναι μορφοποιημένα με τη γλώσσα HTML.
http://www.w3.org/history/1989/proposal.html
WWW - Η ανάγκη 1/5 Πολλές από τις συζητήσεις στο CERN καταλήγουν με την ερώτηση «Ναι, αλλά πώς μπορούμε να παρακολουθήσουμε την πορεία ενός τέτοιου μεγάλου project;» Πρόσβαση πληροφοριών στο CERN μέσω διασυνδεδεμένων πληροφοριακών συστημάτων.
WWW - Η ανάγκη 2/5 Το CERN είναι ένας υπέροχος οργανισμός. Απασχολεί μερικές χιλιάδες ανθρώπους, πολλοί από τους οποίους είναι πολύ δημιουργικοί, όλοι εργάζονται έχοντας παρόμοιους στόχους. Παρόλο που είναι οργανωμένοι ιεραρχικά στη διοίκηση, αυτό δεν εμποδίζει να επικοινωνούν μεταξύ τους, να μοιράζονται πληροφορίες, εξοπλισμό και λογισμικό ανάμεσα στις ομάδες.
WWW - Η ανάγκη 3/5 Η δομή του οργανισμού είναι ένας εξελισσόμενος ιστός. Όταν ένας καινούργιος υπάλληλος μπαίνει στην ομάδα ή κάποιος αναλαμβάνει μια νέα εργασία, του δίνονται συμβουλές με ποιους είναι χρήσιμο να επικοινωνήσει. Μετά όμως από δύο χρόνια εργασίας, πολλές πληροφορίες έχουν χαθεί. Θα χρειαστεί αρκετός χρόνος που οι νέοι θα πρέπει να αφιερώσουν καθώς και αυτοί που θα τους κατατοπίσουν. Ακόμα και αν έχουν καταγραφεί πληροφορίες, πολλές φορές δεν είναι εύκολο να βρεθούν. Αν ένα πείραμα του CERN γινόταν όλο με μιας, τότε όλες οι πληροφορίες θα μπορούσαν να γραφτούν σε ένα μεγάλο βιβλίο. Ωστόσο, το CERN συνεχώς αλλάζει καθώς παράγονται νέες ιδέες, καθώς η τεχνολογία εξελίσσεται, και καθώς προκύπτουν καινούργια προβλήματα. Όταν προκύψει κάτι που θα πρέπει να αλλάξει μέρος του πειράματος, τότε θα πρέπει κάποιος να δει πώς επηρεάζονται άλλα μέρη του πειράματος ή άνθρωποι. Είναι δύσκολο να διατηρείς ενημερωμένο ένα βιβλίο και η δομή του βιβλίου χρειάζεται συνεχώς να ανανεώνεται.
WWW - Η ανάγκη 4/5 Οι πληροφορίες που συζητάμε απαντούν, για παράδειγμα σε ερωτήσεις όπως: Που χρησιμοποιείται αυτό το τμήμα; Ποιος έγραψε αυτό τον κώδικα; Που δουλεύει; Τι έγγραφα υπάρχουν σχετικά με αυτή την έννοια; Ποια εργαστήρια περιλαμβάνονται σε αυτό το project; Ποια συστήματα εξαρτώνται από αυτή τη συσκευή; Ποια έγγραφα αναφέρονται σε αυτό εδώ;
WWW - Η ανάγκη 5/5 Ένας ιστός με σημειώσεις και συνδέσμους είναι πολύ πιο χρήσιμος από ένα σταθερό ιεραρχικό σύστημα. Κόμβοι και βέλη που τους συνδέουν Παραδείγματα κόμβων Άνθρωποι Τμήματα λογισμικού Ομάδες ανθρώπων Έργα Έννοιες Έγγραφα Τύποι υλικού Συγκεκριμένα αντικείμενα υλικού
WWW Τι περιλαμβάνει; Με έναν web browser (φυλλομετρητής, περιηγητής ιστού, πλοηγός ιστού) μπορεί κάποιος να δει ιστοσελίδες που μπορούν να περιλαμβάνουν κείμενο, εικόνες, βίντεο και άλλα αρχεία πολυμέσων, και να πλοηγηθεί μεταξύ αυτών με τη χρήση υπερσυνδέσμων.
Web browser Τί είναι; Είναι ένα λογισμικό που επιτρέπει στον χρήστη του να προβάλλει, και να αλληλεπιδρά με, κείμενα, εικόνες, βίντεο, μουσική, παιχνίδια και άλλες πληροφορίες συνήθως αναρτημένες σε μια ιστοσελίδα ενός ιστότοπου στον Παγκόσμιο Ιστό ή σε ένα τοπικό δίκτυο. Το κείμενο και οι εικόνες σε μια ιστοσελίδα μπορεί να περιέχουν υπερσυνδέσμους προς άλλες ιστοσελίδες του ίδιου ή διαφορετικού ιστότοπου. Ο Web browser επιτρέπει στον χρήστη την γρήγορη και εύκολη πρόσβαση σε πληροφορίες που βρίσκονται σε διάφορες ιστοσελίδες και ιστότοπους εναλλάσσοντας τις ιστοσελίδες μέσω των υπερσυνδέσμων.
Υπερμεσική δομή του WWW Τα υπερμέσα (hypermedia) είναι λογική επέκταση του όρου υπερκείμενο στα οποία γραφικά, ήχος, βίντεο, απλό κείμενο και υπερσύνδεσμοι περιπλέκονται ώστε να δημιουργήσουν ένα γενικά μη γραμμικό μέσο πληροφοριών. Αυτό έρχεται σε αντίθεση με την ευρύτερη έννοια πολυμέσα (multimedia), που χρησιμοποιείται για να περιγράψει μη διαδραστικές γραμμικές παρουσιάσεις.
Δυνατότητες Υπερμεσικής Δομής Γρήγορη μετάβαση σε αναφορές και παρουσίαση σχετικού περιεχομένου Αμφίδρομη μετακίνηση μεταξύ αναφορών (από τη σελίδα προέλευσης στη σελίδα προορισμού και αντίστροφα) πράγμα που είναι δύσκολο και χρονοβόρο για έντυπα μέσα Ο χρήστης μπορεί να επισημάνει το περιεχόμενο και να δημιουργήσει νέες αναφορές. Οι πληροφορίες μπορούν να δομηθούν με διάφορους τρόπους. Διαφορετικές οργανώσεις του ίδιου περιεχομένου επιτρέπουν για εξειδικευμένες δομές για διαφορετικές κατηγορίες χρηστών. Ο χρήστης πλοηγείται στο περιεχόμενο και βρίσκει νέες πληροφορίες καθώς διερευνά μια συγκεκριμένη θεματική περιοχή. Η υπερμεσική δομή είναι ευχάριστη στη χρήση.
Δυσκολίες Υπερμεσικής Δομής Η ευκολία πλοήγησης μπορεί να αυξήσει το ρίσκο του χρήστη να προσπερνά με ευκολία χρήσιμο περιεχόμενο, με αποτέλεσμα να έχει περιορισμένη αντίληψη για το θέμα. Το ρίσκο του αποπροσανατολισμού μπορεί να οδηγήσει σε σύγχυση αντί για κατανόηση του περιεχομένου, ειδικά όταν ο χρήστης μετακινείται μεταξύ των κόμβων με τυχαίο τρόπο. Η χρήση υπερμεσικής δομής εμπεριέχει μια συγκεκριμένη γνωστική επιβάρυνση. Το πρόβλημα είναι ότι ο χρήστης πρέπει να αλληλεπιδράσει με το σύστημα, το οποίο μπορεί να είναι πολύπλοκο, ώστε να πετύχει το οτιδήποτε.
Πολυμεσικά στοιχεία μιας εφαρμογής Οι πρώτοι browsers υποστήριζαν μόνο κείμενο και αυτό με μια γραμματοσειρά και ένα χρώμα. Κατόπιν προστέθηκαν οι δυνατότητες για χρώματα, πολλαπλές γραμματοσειρές, στυλ κειμένου και εικόνες. Κείμενο ASCII, Εικόνας, PDF(portable document format) Εικόνα Jpeg, gif, png Η υποστήριξη ήχων, animation και βίντεο χειρίζεται με διαφορετικούς τρόπους από διαφορετικούς browsers. Άλλοτε ο χειρισμός γίνεται απευθείας από τον κώδικα της σελίδας και άλλοτε χρειάζεται ένα βοηθητικό πρόγραμμα (plug-in) Ήχος midi, Real Audio (rm), Wave (wav), wma, mp3 Βίντεο avi, wmv, mpeg, QuickTime (mov), Real Video (rm), Flash (swf, flv), Mpeg-4 (mp4)
Τι περιεχόμενο μπορεί να περιλαμβάνει Ένας ταξιδιωτικός ιστότοπος για την ανάδειξη μιας περιοχής; Ένας ιστότοπος για εκμάθηση κβαντομηχανικής; Ένας ιστότοπος για συμπλήρωση δηλώσεων φόρου εισοδήματος για το υπουργείο οικονομικών; Μια online μουσική βιβλιοθήκη; Ένας διαδικτυακός τόπος για εύρεση εργασίας; Το ψηφιακό αρχείο της ΕΡΤ; Ένας κοινωνικό δίκτυο; Ο προσωπικός ιστότοπος ενός φωτογράφου; Ο ιστότοπος ενός καταστήματος που πουλάει ηλεκτρονικά είδη; Ο ιστότοπος μιας τράπεζας;
Tαξιδιωτικός ιστότοπος για την ανάδειξη μιας περιοχής Πληροφορίες για ιστορία, αξιοθέατα, μουσεία, δραστηριότητες, διαμονή, φαγητό, πρόσβαση, νέα, τηλέφωνα επικοινωνίας. Εικόνες της περιοχής Βίντεο από εκδηλώσεις, διαφημιστικά, κλπ.
Ιστότοπος για εκμάθηση κβαντομηχανικής Θεωρία, νόμοι, επιστήμονες, βιογραφικά, πειράματα Εικόνες Βίντεο με animation για καλύτερη κατανόηση
Ιστότοπος για συμπλήρωση δηλώσεων φόρου εισοδήματος για το υπουργείο οικονομικών Login φόρμες, πίνακες, επεξηγήσεις, βοήθεια, κουμπιά
Online μουσική βιβλιοθήκη Μουσική Βίντεο Πληροφορίες για albums, καλλιτέχνες Νέα
Διαδικτυακός τόπος για εύρεση εργασίας Πληροφορίες για αγγελίες, εργοδότες, βιογραφικά υποψηφίων, λογαριασμοί υποψηφίων, λογαριασμοί εργοδοτών
Ψηφιακό αρχείο της ΕΡΤ Βίντεο από εκπομπές, ταινίες, θεατρικές παραστάσεις, εκδηλώσεις, ντοκιμαντέρ, αφιερώματα, ρεπορτάζ, κλπ Μουσική, ραδιοφωνικές εκπομπές, ηχητικά ντοκουμέντα, κα Αντίστοιχες εικόνες Πληροφορίες για γεγονότα
Κοινωνικό Δίκτυο Πληροφορίες μελών Φωτογραφίες Μουσική Βίντεο Σχόλια Κείμενα Σύνδεσμοι σε εξωτερικό περιεχόμενο Επισημάνσεις Παιχνίδια
Προσωπικός ιστότοπος ενός Φωτογραφίες φωτογράφου Πληροφορίες για τον φωτογράφο και για τη δουλειά του Βίντεο; Στοιχεία επικοινωνίας
Ιστότοπος ενός καταστήματος που πουλάει ηλεκτρονικά είδη Φωτογραφίες προίόντων Κατηγορίες Πληροφορίες για προϊόντα (τιμή, τεχνικές, διαθεσιμότητα) Λογαριασμοί μελών Διαδικασία online αγοράς Πληροφορίες για καταστήματα, παραλαβή στο σπίτι, κλπ.
Ιστότοπος μιας τράπεζας Πληροφορίες για τραπεζικά προϊόντα, για συγκεκριμένες κατηγορίες πελατών, για την τράπεζα, για θέσεις εργασίας, κλπ Λογαριασμοί μελών Διαφημιστικά βίντεο Διαφημιστικές φωτογραφίες
http://www.merciame.ic24.net/merciame.html
http://www.thisisscunthorpe.co.uk/home
www.nga.gov
http://www.lifo.gr/