Η βασική εργαλειοθήκη του διαδικτύου

Transcript

1 Η βασική εργαλειοθήκη του διαδικτύου Ματθαίος Πατρινόπουλος 1

2 2

3 HTML Hyper Text Markup Language Σήμερα στην έκδοση 5 --> HTML5 Δεν είναι γλώσσα προγραμματισμού αλλά γλώσσα που καθορίζει η δομή και τις διασυνδέσεις των αρχείων HTML. 3

4 ΗΤΜL o Συντομογραφία του HyperText Markup Language. o Είναι η γλώσσα συγγραφής και δημιουργίας εγγράφων του Παγκόσμιου Ιστού (World Wide Web), δηλαδή ιστοσελίδων. o Η HTML ορίζει τη δομή, τη διαμόρφωση και τους συνδέσμους των ιστοσελίδων μέσω ενός συνόλου ετικετών και των ιδιοτήτων τους. <tag> o Είναι επίσης η γλώσσα που καταλαβαίνουν οι browsers των χρηστών, όπως Internet Explorer, Safari, Firefox, Opera κτλ. o Αποτελεί τον συνδετικό κρίκο όλων των τεχνολογιών ανάπτυξης ιστοσελίδων και εφαρμογών για το WEB o Σήμερα είναι στην έκδοση 5 ΗΤML5 4

5 5

6 Το Cascading Style Sheets (CSS) (σήμερα στην έκδοση 3) Καθορίζει ότι σχετίζεται με την παρουσίαση ή το στυλ της σελίδας. (π.χ. γραμματοσειρές, χρώματα, αποστάσεις γραμμών) Αντίστοιχο του "θέματος" με διάφορα "Στυλ" σε ένα έγγραφο επεξεργασίας κειμένου. 6

7 Τι μπορούμε να κάνουμε με ένα αρχείο css. Με τα αρχεία ccs μπορούμε να διαμορφώσουμε τα στοιχεία εμφάνισης των σελίδων μας Γραμματοσειρές Στοίχιση Μέγεθος Χρώμα γραμματοσειρών Χρώμα φόντου Απόσταση γραμματοσειρών Εικόνες φόντου Ενεργά στοιχεία Πίνακες 7

8 javascript Γλώσσα προγραμματισμού Επιτρέπει τη δημιουργία διαδραστικών ιστοσελίδων με δυναμικό περιεχομένο Εκτελείται στο πρόγραμμα περιήγησης 8

9 Κώδικας JavaScript <script type="text/javascript"> alert('γεια σου, κόσμε!'); </script> <script> var FIRSTvariable = window.prompt("please FILL IN YOUR NAME") alert("your name is " + FIRSTvariable + ".") </script> 9

10 Η HTML και CSS δεν είναι διαδικαστικές γλώσσες προγραμματισμού, είναι «δηλωτικές». O προγραμματιστής δηλώνει τι θα συμβεί όταν.. H javascript είναι γλώσσα προγραμματισμού. Η πορεία που ακολουθείται από τις τιμές των μεταβλητών. Είναι μια γλώσσα διαδικαστική. Javascript Java εξαρτάται 10

11 Άλλα εργαλεία Προγραμματιστικά εργαλεία Βιβλιοθήκες database engines σχεδιαστικά εργαλεία 11

12 Συντομογραφία του extensible Markup Language. Έχει την ίδια προέλευση με την HTML, αλλά αποτελεί επέκταση της HTML με την έννοια ότι χρησιμοποιείται για την περιγραφή οποιωνδήποτε ειδών δεδομένων και όχι μόνο των ιστοσελίδων. Είναι εξαιρετικά αποδοτική τόσο σε Web εφαρμογές όσο και σε εφαρμογές γραφείου.. Ανάλογα με τη χρήση των δεδομένων μπορούμε να βρούμε πολλαπλές εκδόσεις 12

13 (PHP: Hypertext Preprocessor) είναι γλώσσα προγραμματισμού για τη δημιουργία σελίδων web με δυναμικό περιεχόμενο. H επεξεργασία γίνεται στο διακομιστή Παγκόσμιου Ιστού (web server) Είναι απαραίτητη η ύπαρξη συμβατού διακομιστή (π.χ.apache) O Server να είναι ρυθμισμένος για να επεξεργάζεται και να μεταγλωτίζει τον κώδικα PHP σε HTML που καταλαβαίνει το πρόγραμμα πελάτη. Σήμερα στη έκδοση /9/

14 o Ο server κάνει την επεξεργασία και είτε στέλνει στο πρόγραμμα περιήγησης το τελικό περιεχόμενο σε μορφή κώδικα HTML είτε το μεταβιβάζει σε κάποιο άλλο PHP script για την εκτέλεση μιας εφαρμογής. o Ένα αρχείο με κώδικα PHP θα πρέπει να έχει την κατάλληλη επέκταση (π.χ. *.php, *.php4, *.phtml κ.ά.). o Εφαρμογές που κάνουν εκτενή χρήση της PHP είναι τα Συστήματα Διαχείρισης Περιεχομένου (Content Management System) "WordPress" και "Drupal, FACEBOOK. o Ευρύτατα διαδεδομένη, δωρεάν, ανταγωνιστική της γλώσσας ASP ASP.NET της Microsoft. 14

15 ASP.NET Microsoft Active Server Pages.NET H ASP.NET δεν είναι γλώσσα προγραμματισμού. Τεχνολογία που επιτρέπει σε προγραμματιστές να δημιουργήσουν δυναμικές web εφαρμογές. Η γλώσσα που χρησιμοποιείται για τις εφαρμογές της ASP.NET είναι η C. 15

16 Η ΑSP.NET Web είναι μια ενοποιημένη πλατφόρμα που προσφέρει όλες τις υπηρεσίες που είναι αναγκαίες για τη δημιουργία εφαρμογών. Είναι χτισμένο πάνω στο.net Framework. Συγχέεται με την ASP, αλλά σαν τεχνολογία είναι διαφορετική. ASP της Microsoft αποτέλεσε μια από τις πρώτες ολοκληρωμένες εφαρμογές ανάπτυξης δικτυακών εφαρμογών απευθείας στον web server. αρχικά προσφέρονταν ως πρόσθετο στον Internet Information Services (IIS) Από τα μέσα της δεκαετίας του 2000 είχαμε μετάβαση στην ASP.NET. Συνεργάζεται ομαλότερα με διακομιστές ΙΙS και SQL Σήμερα βρίσκεται στην έκδοση 4.6 ( ) ΔΙΑΦΆΝΕΙΕΣ ΤΟΥ ΜΑΘΉΜΑΤΟΣ ΣΧΕΔΙΑΣΜΌΣ ΚΑΙ ΑΝΆΠΤΥΞΗ ΕΦΑΡΜΟΓΏΝ ΔΙΑΔΙΚΤΎΟΥ. M.ΠΑΤΡΙΝΌΠΟΥΛΟΣ 16

17 Η τεχνολογία AJAX (Asynchronous Javascript and XML) αξιοποιείται με σκοπό τη βελτίωση της εμπειρίας του επισκέπτη. Παρέχει τη δυνατότητα επιλεκτικής ενημέρωσης τμημάτων μιας ιστοσελίδας και όχι του συνόλου της. Ελαχιστοποιεί την περιττή διακίνηση δεδομένων και παρέχει ευκολότερη και γρηγορότερη αλληλεπίδραση με το περιβάλλον. Δεν υποστηρίζεται σωστά από όλα τα προγράμματα περιήγησης και ανάγνωσης οθόνης. ΔΙΑΦΆΝΕΙΕΣ ΤΟΥ ΜΑΘΉΜΑΤΟΣ ΣΧΕΔΙΑΣΜΌΣ ΚΑΙ ΑΝΆΠΤΥΞΗ ΕΦΑΡΜΟΓΏΝ ΔΙΑΔΙΚΤΎΟΥ. M.ΠΑΤΡΙΝΌΠΟΥΛΟΣ 17

18 Microsoft.NET Framework συλλογές βιβλιοθηκών λογισμικού που ενσωματώνονται στο λειτουργικό σύστημα Microsoft Windows. Χρησιμοποιούνται από όλες τις νέες εφαρμογές της Microsoft και άλλων εταιριών ανάπτυξης λογισμικού. Παρέχουν έτοιμες λύσεις στην υλοποίηση διαφόρων λειτουργιών και να συντονίζουν την εκτέλεση των εφαρμογών που το χρησιμοποιούν. Οι βιβλιοθήκες που περιλαμβάνει καλύπτουν ένα μεγάλο σύνολο προγραμματιστικών αναγκών για τις εφαρμογές των χρηστών. ΔΙΑΦΆΝΕΙΕΣ ΤΟΥ ΜΑΘΉΜΑΤΟΣ ΣΧΕΔΙΑΣΜΌΣ ΚΑΙ ΑΝΆΠΤΥΞΗ ΕΦΑΡΜΟΓΏΝ ΔΙΑΔΙΚΤΎΟΥ. M.ΠΑΤΡΙΝΌΠΟΥΛΟΣ 18

19 SQL Server Σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων που δημιουργήθηκε από τη Microsoft. 19

20 SQL Server Η κύρια μονάδα αποθήκευσης στοιχείων είναι μια βάση δεδομένων, η οποία αποτελείται από μια συλλογή πινάκων και κώδικα. Χρησιμοποιείται συνήθως από επιχειρήσεις για την υλοποίηση μικρού και μεσαίου μεγέθους βάσεων δεδομένων, αλλά σε μεγάλες εταιρικές εφαρμογές. Προορίζεται για γενική χρήση, αποδίδει πολύ καλά τόσο σε εφαρμογές γραφείου όσο και σε Web εφαρμογές. Οι κύριες γλώσσες που χρησιμοποιούνται είναι η T-SQL και η ANSI SQL. Παρουσιάστηκε για πρώτη φορά το 1989 σήμερα είναι στην έκδοση SQL Server

21 MySQL Η MySQL είναι ένα σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων Περισσότερες από 11 εκατομμύρια εγκαταστάσεις. Τρέχει σε έναν server παρέχοντας πρόσβαση πολλών χρηστών σε ένα σύνολο βάσεων δεδομένων. 21

22 MySQL Η MySQL είναι η πιο δημοφιλής βάση δεδομένων ανοιχτού κώδικα και χρησιμοποιείται ως υπόβαθρο (back end) για την αποθήκευση δεδομένων Web εφαρμογών. Μπορεί να χρησιμοποιηθεί από τις περισσότερες γλώσσες προγραμματισμού, όπως η PHP και η Java, επιτρέποντας την εύκολη και αποδοτική ανάπτυξη εφαρμογών. Οι περισσότερες εταιρίες φιλοξενίας ιστοσελίδων παρέχουν τη δυνατότητα χρήσης της MySQL από τις Web εφαρμογές των πελατών τους, λόγω της δημοτικότητάς της, των επιδόσεών της και της ευκολίας ενσωμάτωσής της. Χρησιμοποιείται σε κάποιες από διαδεδομένες διαδικτυακές υπηρεσίες, όπως το Flickr, το YouTube, η Wikipedia, το Google, το Facebook και το Twitter. 22

23 phpmyadmin Ελεύθερο και ανοικτού κώδικα εργαλείο γραμμένο σε PHP προορίζεται να χειριστεί τη διοίκηση της MySQL με χρήση ενός προγράμματος περιήγησης web. Μπορεί να εκτελέσει διάφορες εργασίες, όπως η δημιουργία, τροποποίηση ή διαγραφή δεδομένων, πίνακες, πεδία ή σειρές, εκτέλεση SQL, δηλώσεις ή τη διαχείριση των χρηστών και τα δικαιώματα. 23

24 ΔΙΑΦΆΝΕΙΕΣ ΤΟΥ ΜΑΘΉΜΑΤΟΣ ΣΧΕΔΙΑΣΜΌΣ ΚΑΙ ΑΝΆΠΤΥΞΗ ΕΦΑΡΜΟΓΏΝ ΔΙΑΔΙΚΤΎΟΥ. M.ΠΑΤΡΙΝΌΠΟΥΛΟΣ 24

25 Adobe Flash Περιβάλλον ανάπτυξης πολυμεσικού περιεχομένου για το Web. Χρησιμοποιείται για τη δημιουργία εντυπωσιακών clips που συνδυάζουν κίνηση, ήχο, βίντεο και επιπλέον εξαιρετικές δυνατότητες διαδραστικότητας. 25

26 Ορισμένα Web Sites έχουν κατασκευαστεί εξ ολοκλήρου σε Flash, ενώ η συνηθέστερη πρακτική είναι η ενσωμάτωση τμημάτων της ιστοσελίδας σε Flash για αισθητικούς λόγους. Εύκολη δημοσίευση περιεχομένου στο Web, Ενσωματώνει τη γλώσσα προγραμματισμού (Action Scrpit) και η δυνατότητα διασύνδεσης με βάσεις δεδομένων για την παραγωγή δυναμικού περιεχομένου. Αντιμετώπισε προβλήματα συμβατότητας με πολλές εφαρμογές / συσκευές (iphone, το ipod touch και ipad) και υπάρχουν σοβαρά θέματα ασφάλειας. Οι περισσότερες λειτουργίες του υποκαθίστανται από την ΗΤΜL5 26

27 Θέματα ευχρηστίας Ο Jakob Nielsen, ειδικός για την ευχρηστία ιστοχώρων, δημοσίευσε ένα άρθρο το 2000 με τίτλο, Flash: 99% λάθος, δηλώνοντας ότι: Το Flash τείνει να υποβαθμίσει τις ιστοσελίδες επειδή: ενθαρρύνει την υπερβολική χρήση γραφικών, καταστρέφει τις θεμελιώδεις αρχές της αλληλεπίδρασης των χρηστών με τον περιεχόμενο, αποσπά την προσοχή από ουσιαστικό περιεχόμενο των ιστοσελίδων, μειώνει την προσβασιμότητα σε χρήστες με αναπηρία, 27

28 Δικτυακές εφαρμογές Oποιοδήποτε λογισμικό εί ναι προσβάσιμο μέσω δικτύου (Internet ή Intranet) ο χρήστης χρησιμοποιεί μόνο το πρόγραμμα περιήγησης για να την χρησιμοποιήσει. Οι εφαρμογές αυτές συνήθως εκτελούνται στους server 28

29 Δικτυακές εφαρμογές Παραδείγματα είναι: Συστήματα διαχείρισης περιεχομένου Συστήματα διαχείρισης πελατών Πληροφοριακά συστήματα διοίκησης Portal, συστήματα κρατήσεων, πωλήσεων εισιτηρίων και συστήματα αγγελιών Στην εκπαίδευση: Συστήματα διαχείρισης περιεχομένου / Διαχείρισης μάθησης (Moodle, e-class, Joomla, WordPress, Blackboard) CMS (Content Management System), LMS (Learning Management System) LCMS 29

30 Διαδικτυακές εφαρμογές Πλεονεκτήματα Άμεση πρόσβαση από οποιαδήποτε συσκευή Δυνατότητα χρήσης ανεξαρτήτου τοποθεσίας Συμβατές με όλα τα λειτουργικά συστήματα Δεν καταναλώνουν πόρους του χρήστη Δεν καταλαμβάνουν χώρο Γρήγορη αναβάθμιση Σύγχρονη Αισθητική και περιβάλλον διεπαφής Δυνατότητα χρήσης και εκτός διαδικτύου ενδο-δικτύου Μειονεκτήματα Αδυναμία χρήσης χωρίς σύνδεση στο διαδίκτυο Μη πλήρη συμβατότητα προγραμμάτων περιήγησης Άμεση αναβάθμιση χωρίς να ερωτηθούν οι χρήστες Πιθανή μη συμβατότητα κάποιων στοιχείων της εφαρμογής με μια μελλοντική έκδοση του περιηγητή μας 30

31 31

32 Web ή Web 1.0 Παροχή και αναζήτηση πληροφορίας Χαμηλός βαθμός αλληλεπίδρασης με το χρήστη. Στατικές ή δυναμικές ιστοσελίδες Καταστήματα ηλεκτρονικού εμπορίου μέσα από σελίδες που είτε παρουσιάζουν καταλόγους είτε αναζητούν τα προϊόντα σύμφωνα με τα κριτήρια που θέτουν οι πελάτες 32

33 Web 2.0 Web 2.0 μεγαλύτερη δυνατότητα των χρηστών να μοιράζονται πληροφορίες, να συνεργάζονται online και να συνδιαμορφώνουν το τελικό αποτέλεσμα. Κοινωνική δικτύωση, folksonomies, εύκολη συνεργασία, κοινωνικοί σελιδοδείκτες, κοινή χρήση των μέσων ενημέρωσης. Διάδραση του χρήστη με τα μέσα. 33

34 ΔΙΑΦΆΝΕΙΕΣ ΤΟΥ ΜΑΘΉΜΑΤΟΣ ΣΧΕΔΙΑΣΜΌΣ ΚΑΙ ΑΝΆΠΤΥΞΗ ΕΦΑΡΜΟΓΏΝ ΔΙΑΔΙΚΤΎΟΥ. M.ΠΑΤΡΙΝΌΠΟΥΛΟΣ 34

35 35

36 Web 3.0 Σημασιολογικό διαδίκτυο έμφαση στις έννοιες / νοήματα Πιο έξυπνο διαδίκτυο Προσωποποιημένο Web Η αναζήτηση και παροχή πληροφορίας ανάλογα με τον χρήστη Προσθέτει στις σελίδες που μπορούν να αναγνωστούν μόνο από ανθρώπους, αυτές που περιέχουν πληροφορίες ανάγνωσης για τις μηχανές (μεταδεδομένα) και τις μεταξύ τους συνδέσεις. Συνδυασμός της τεχνητής νοημοσύνης και του σημασιολογικού ιστού. Το Σημασιολογικό διαδίκτυο διδάσκει στις μηχανές τι σημαίνουν τα δεδομένα, οδηγεί σε τεχνητή νοημοσύνη που μπορεί να χρησιμοποιεί αυτές τις πληροφορίες αυτές. 36

37 37

38 H Εξέλιξη από το Web 1.0 και το Web 2.0 στο Web

39 WEB 4.0? 39

40 40

41 Ενδιαφέρουσες σκέψεις Tim Berners-Lee: The next Web of open, linked data 41