Tεχνολογίες AJAX για εφαρμογές e-shopping

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Tεχνολογίες AJAX για εφαρμογές e-shopping"

Transcript

1 ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ - ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ Tεχνολογίες AJAX για εφαρμογές e-shopping Διπλωματική Εργασία του Κων/νου Παληγιάννη (ΑΕΜ: 1314) Επιβλέπων Καθηγητής: Ι. Βλαχάβας ΘΕΣΣΑΛΟΝΙΚΗ ΙΟΥΛΙΟΣ 2009

2

3 Πρόλογος Το θέμα της εν λόγω πτυχιακής εργασίας εστιάζει στην εφαρμογή τεχνολογιών AJAX σε site που επικεντρώνουν την δραστηριότητα τους σε online αγορές. Συγκεκριμένα εστιάζει στην αξιοποίηση εκείνων των δυνατοτήτων που προσφέρει η τεχνολογία AJAX ώστε να βελτιωθεί η λειτουργικότητα αυτών των site. Επομένως, το θέμα μπορεί να χωριστεί σε δύο ενότητες,όπου η μία αφορά το ερευνητικό μέρος και η δεύτερη το προγραμματιστικό. Η ερευνητική ενότητα της εργασίας περιλαμβάνει την ανακάλυψη εκείνων των στοιχείων που απουσιάζουν από τα site που προαναφέρθηκαν και επηρεάζουν σε κάποιο βαθμό την λειτουργικότητα τους. Τα στοιχεία αυτά περιλαμβάνουν λειτουργίες που θα διευκόλυναν την επικοινωνία μεταξύ client και server από άποψη μείωσης του όγκου πληροφοριών που μεταδίδονται. Από την μία αυτό σημαίνει μείωση του φόρτου εργασίας του server και από την άλλη ταχύτερη εξυπηρέτηση του χρήστη του site. Στο προγραμματιστικό μέρος, για την βελτίωση των λειτουργιών που αναφέρθηκαν παραπάνω, δημιουργήθηκε κώδικας με κύρια χαρακτηριστικά την ευελιξία και την προσαρμοστικότητα. Η εργασία αυτή εκπονήθηκε στο πλαίσιο της Διπλωματικής Εργασίας του Προπτυχιακού Προγράμματος Σπουδών του Τμήματος Πληροφορικής της Σχολής Θετικών Επιστημών του Αριστοτελείου Πανεπιστημίου Θεσσαλονίκης. Η εργασία έγινε σε συνεργασία με το Εργαστήριο Γλωσσών Προγραμματισμού και Τεχνολογίας Λογισμικού του τμήματος και ειδικότερα με την ομάδα Λογικού Προγραμματισμού & Ευφυών Συστημάτων (Logic Programming and Intelligent Systems - LPIS) υπό την επίβλεψη του κ. Ιωάννη Βλαχάβα. Τέλος, θα ήθελα να εκφράσω τις θερμές ευχαριστίες μου στον επιβλέποντα Καθηγητή του Τμήματος Πληροφορικής του Αριστοτελείου Πανεπιστημίου Θεσσαλονίκης κ. Ιωάννη Βασιλειάδη για την εμπιστοσύνη που μου έδειξε και που επέτρεψε να ασχολήθώ με το συγκεκριμένο θέμα καθώς επίσης και τον κ. Φώτη Κόκκορα για την πολύτιμη βοήθεια που μου προσέφερε. -i-

4 Κων/νος Παληγιάννης 10/07/2009 -ii-

5 Περιεχόμενα ΠΡΟΛΟΓΟΣ...I ΠΕΡΙΕΧΟΜΕΝΑ...III 1 ΕΙΣΑΓΩΓΗ ΤΕΧΝΟΛΟΓΙΑ AJAX ΙΣΤΟΡΙΚΑ Iframes ΤΕΧΝΟΛΟΓΙΕΣ ΤΡΟΠΟΣ ΛΕΙΤΟΥΡΓΙΑΣ Το αντικείμενο XMLHttpRequest Το κλασσικό μοντέλο AJAX model ΠΛΕΟΝΕΚΤΗΜΑΤΑ/ ΜΕΙΟΝΕΚΤΗΜΑΤΑ Πλεονεκτήματα Μειονεκτήματα ΠΑΡΑΔΕΙΓΜΑΤΑ ΕΦΑΡΜΟΓΗΣ Λειτουργίες video Άλλες λειτουργίες ΥΠΟΔΟΜΕΣ AJAX- JQUERY ΧΡΗΣΕΙΣ Direct ΑJAX frameworks Indirect ΑJAX frameworks AJAX component frameworks Server driven frameworks ΜΕΡΙΚΑ FRAMEWORKS jquery prototype.js Google Web Toolkit (GWT) iii-

6 3.2.4 Mootools Επιλογή Η ΒΙΒΛΙΟΘΗΚΗ JQUERY Φιλοσοφία Χαρακτηριστικά Χρήση Παραδείγματα υλοποιήσεων Ε-SHOPPING ΙΣΤΟΡΙΑ ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΚΑΙ ΜΕΙΟΝΕΚΤΗΜΑΤΑ Ευχρηστία Πληροφορίες και αξιολόγηση Ασφάλεια Προσωπικά δεδομένα DESIGN Φόρτος πληροφορίας Οι προσδοκίες των καταναλωτών Ε-SHOPPING ΚΑΙ AJAX Λίστα σύγκρισης Αναζήτηση με λίστα Αλλαγή κατηγορίας προιόντος Ταξινόμηση αποτελεσμάτων Σελίδες αποτελεσμάτων Καλάθι αγορών EASY SHOPPER TOOLS: AJAX ΠΡΟΣΘΕΤΑ ΓΙΑ ΤΟ E-SHOPPING SORTING PLUG-IN SHOPPING CART PLUG-IN COMPARISON LIST PLUG-IN MENU/ SUBMENU PLUG-IN DEMO SITE ΣΥΜΠΕΡΑΣΜΑΤΑ ΒΙΒΛΙΟΓΡΑΦΙΑ iv-

7 -v-

8

9 1 Εισαγωγή Web 2.0, είναι μια φράση που εφευρέθηκε από την O Reily Media το έτος 2004 και αναφέρεται σε μια υποτιθέμενη ή προτεινόμενη δεύτερη γενιά υπηρεσιών βασισμένων στο Διαδίκτυο, όπως οι ιστότοποι κοινωνικής δικτύωσης (Facebook), τα wiki (Wikipedia), τα εργαλεία επικοινωνίας και οι folksonomies που δίνουν έμφαση στην συνεργασία και την ανταλλαγή αρχείων μεταξύ των χρηστών. Η έννοια του Web 2.0 ξεκίνησε από την O Reily Media σε συνεργασία με την MediaLive International και χρησιμοποιήθηκε πρώτη φορά σαν τίτλος σε μία σειρά από συνέδρια που έγιναν το 2004 και από τότε τεχνικοί και διαφημιστές υιοθέτησαν αυτή την φράση. Το ακριβές νόημά της παραμένει προς αντιπαράθεση και πολλοί ειδικοί αμφισβητούν το εάν ο όρος έχει κάποιο πραγματικό νόημα. Ο τελευταίος ορισμός, σύμφωνα με τον Tim O Reily είναι αυτός: «Το Web 2.0 είναι η εταιρική επανάσταση στην βιομηχανία των υπολογιστών που προκαλείται από την μετακίνηση στο διαδίκτυο σαν πλατφόρμα, και στην απόπειρα να καταλάβουμε τους κανόνες της επιτυχίας σε αυτή τη νέα πλατφόρμα. Βασικός κανόνας ανάμεσα σε αυτούς είναι ο εξής: Χτίσιμο εφαρμογών που καρπώνονται τις επιδράσεις των δικτύων και καλυτερεύουν όσο περισσότερο τις χρησιμοποιούν οι άνθρωποι. (Αυτό είναι που αλλού έχω αποκαλέσει 'εκμετάλλευση της συλλογικής νοημοσύνης').» Η έννοια του Web 2.0 καθώς και η μετάβαση από το Web 1.0 μπορεί να εξηγηθεί μέσω παραδειγμάτων που φαίνονται στην επόμενη εικόνα (Εικόνα 1). Εικόνα 1: Παραδείγματα Web 1.0/

10 Όπως πολλές σημαντικές έννοιες, η έννοια του Web 2.0 δεν μπορεί να προσδιοριστεί από σαφή όρια αλλά μπορούμε να το φανταστούμε ως ένα πυρήνα που γύρω του συγκεντρώνονται αρχές και πρακτικές που παρουσιάζονται από ένα σύνολο από sites σε διαφορετικό βαθμό. Η επόμενη εικόνα δείχνει σχηματικά το σύνολο των ιδεών που περιλαμβάνει ο πυρήνας του Web 2.0. Εικόνα 2: Meme χάρτης του Web 2.0 Πολλές ιδέες που συμπεριλαμβάνονται στον χάρτη δεν είναι ακόμα ξεκάθαρες, δίνουν όμως μια ξεκάθαρη εικόνα του Web 2.0. Aκόμα, δύο από τα αρχικά παραδείγματα που χρησιμοποιήθηκαν για τον προσδιορισμό του Web 1.0, το DoubleClick και το Akamai στην πραγματικότητα ήταν πρωτοπόροι στην αντιμετώπιση του web ως πλατφόρμας ενώ ο κόσμος δεν αντιλαμβάνεται ως web services τις διαφημίσεις αν και στην πραγματικότητα είναι. Κάθε διαφήμιση είναι αποτέλεσμα της συνεργασίας μεταξύ δύο ιστοχώρων που παραδίδουν δύο σελίδες ενσωματωμένες σε μια στον υπολογιστή του χρήστη. Η τεχνολογία Akamai αντιμετωπίζει επίσης το web ως πλατφόρμα σε βαθύτερο επίπεδο προσφέροντας διαφανή τρόπο αποθήκευσης και ένα δίκτυο παράδοσης που διευκολύνει την αποσυμφόρηση του εύρους ζώνης. Μερικές από τις πιο σημαντικές αρχές που περιλαμβάνει το Web 2.0 είναι: Ο ιστός ως πλατφόρμα. -2-

11 Εκμετάλευση της συλλογικής γνώσης: όπως για παράδειγμα τα site Wikipedia και Flickr στα οποία οι χρήστες μπορούν να προσθέσουν στο περιεχόμενο των sites. Οι πληροφορίες αποκτούν μεγαλύτερη αξία: είναι απαραίτητη η χρήση μιας ειδικευμένης βάσης δεδομένων. Για παράδειγμα η ειδικευμένη βάση του ebay σχετικά με τους πωλητές και τα προιόντα. Τέλος στον κύκλο έκδοσης λογισμικού: το λογισμικό θα πρέπει να παραδίδεται σαν υπηρεσία και όχι ως προιόν. Χρήση ελαφριών προγραμματιστικών μοντέλων: ένα «βαρύ» λογισμικό δημιουργεί αποστροφή στους χρήστες και έτσι χάνουν το ενδιαφέρον τους. Το λογισμικό ξεπερνάει το επίπεδο χρήσης του σε μία μόνο συσκευή: π.χ. Writely, online επεξεργαστής κειμένου. Rich user experience. Από την εποχή του Viola browser του Pei Wei το 1992, ο ιστός χρησιμοποιούνταν για την μεταφορά τμημάτων λογισμικού που εκτελούνται στα πλαίσια άλλων προγραμμάτων (applets) που στην προκειμένη περίπτωση είναι οι browsers. Η εισαγωγή της γλώσσας προγραμματισμού JAVA το 1995 επικεντρωνόταν στην δημιουργία τέτοιου λογισμικού ενώ αργότερα η JavaScript και η DHTML εισήχθησαν ως ελαφριές μέθοδοι για την παροχή προγραμμάτων που θα εκτελούνταν από την μεριά του client και την παροχή richer user experiences. Πριν μερικά χρόνια η Macromedia εισήγαγε τον όρο Rich Internet Applications για να υπογραμμίσει τις δυνατότητες της τεχνολογίας Flash όχι μόνο για την μεταφορά πολυμεσικού περιεχομένου αλλά και GUI τύπου εφαρμογές. Παρόλα αυτά, η δυνατότητα του ιστού να παραδίδει ολοκληρωμένες εφαρμογές άρχισε να χρησιμοποιείται ευρέως όταν η Google εισήγαγε το Gmail και λίγο αργότερα το Google Maps οι οποίες είναι web applications που παρέχουν λειτουργικότητα παρόμοια με τις desktop εφαρμογές. Η συλλογή από τεχνολογίες που χρησιμοποίησε η Google για την υλοποίηση των εφαρμογών «βαπτίστηκε» AJAX για την οποία ο Jesse James Garrett γράφει: «Ο όρος AJAX δεν αναφέρεται σε μια τεχνολογία. Στην πραγματικότητα αναφέρεται σε ένα σύνολο τεχνολογιών, όπου κάθε μία ακμάζει με τον δικό της τρόπο και συνδυάζονται με νέους ισχυρούς τρόπους. Ο όρος AJAX περιλαμβάνει: -3-

12 Την παρουσίαση με χρήση των τεχνολογιών XTML και CSS. Την δυναμική απεικόνιση και αλλεπίδραση με το Document Object Model (DOM). Ανταλλαγή δεδομένων και τον χειρισμό τους χρησιμοποιόντας τις τεχνολογίες XML και XSLT. Ασύγχρονη ανάκτηση δεδομένων χρησιμοποιόντας το XMLHttpRequest αντικείμενο. JavaScript για το δέσιμο όλων των παραπάνω μαζί.» Η τεχνολογία AJAX είναι επίσης συστατικό κλειδί εφαρμογών Web 2.0 όπως το Flickr, Yahoo!, basecamp και backpack εφαρμογές αλλά και σε άλλες εφαρμογές της Google όπως το Gmail και το Orkut. Αρκετό ενδιαφέρον παρουσιάζει το γεγονός ότι πολλές από τις ικανότητες που τώρα εξερευνόνται υπήρχαν ήδη για πολλά χρόνια. Στα τέλη της δεκαετίας του 90 και η Microsoft και η Netscape είχαν ως όραμα τις ικανότητες που τώρα επιτέλους αναγνωρίζονται, αλλά η αντιδικία τους πάνω στα πρότυπα που έπρεπε να χρησιμοποιηθούν έκανε τις cross-browser εφαρμογές δύσκολες στην δημιουργία. Μόνο όταν η Microsoft τελικά κέρδισε τον πόλεμο των browser, υπήρχε ένας και μοναδικός browser με αποτέλεσμα να γίνει εφικτή η δημιουργία τέτοιων εφαρμογών. Στα επόμενα χρόνια αναμένεται να δούμε πολλές νέες web εφαρμογές και καινοτόμες αλλά και υλοποίηση εκ νέου desktop εφαρμογών κατάλληλες για την εκτέλεσή τους μέσω του Internet. Ήδη έχουν σημειωθεί καινοτομίες στην χρήση του e- mail που συνδυάζουν της δυνατότητες του ιστού (πρόσβαση από παντού, χρήση των ικανοτήτων των βάσεων δεδομένων εις βάθος κ.ά.) με user interfaces που προσεγγίζουν τον βαθμό ευχρηστίας των desktop εφαρμογών. Εν τω μεταξύ, άλλα mail clients που χρησιμοποιούνται ως desktop εφαρμογές προσπαθούν να αντισταθμίσουν τα οφέλη των web εφαρμογών προσθέτοντας IM (Instant Messaging), VoIP (Voice over IP) κ.ά. Ένας Web 2.0 επεξεργαστής κειμένου θα υποστήριζε wiki- τύπου επεξεργασία χωρίς την υπάρξη μόνο αυτόνομων εγγράφων. Θα πρέπει επίσης να υποστηρίζει πλούσιους και ποικίλλους τρόπους μορφοποίησης όπως ακριβώς και οι desktop επεξεργαστές κειμένου. Ένα παράδειγμα μιας τέτοιας εφαρμογής είναι το Writely της Google το οποίο όμως δεν έχει μεγάλη απήχηση. -4-

13 Εκείνοι που θα επιλέξουν την δημιουργία μιας Web 2.0 εφαρμογής θα πρέπει να κατανοήσουν πλήρως της δυνατότητες του Web 2.0. Αυτοί που θα το καταφέρουν θα δημιουργήσουν εφαρμογές που θα μαθαίνουν από τους χρήστες χρησιμοποιόντας μια συμμετοχική αρχιτεκτονική κερδίζοντας πλεονεκτήματα όχι μόνο στο interface του λογισμικού αλλά και στην αφθονία των διαμοιραζόμενων δεδομένων. Στα επόμενα κεφάλαια παρουσιάζονται πληροφορίες σχετικά με την τεχνολογία AJAX, το e-shopping και τον τρόπο που αυτά μπορούν να συνδυαστούν για την παραγωγή καλύτερων, ποιοτικών και λειτουργικών site. Συγκεκριμένα, στο πρώτο κεφάλαιο παρατίθενται γενικές πληροφορίες σχετικά με την τεχνολογία AJAX. Παρουσιάζεται ιστορικά πως προέκυψε σήμερα να χρησιμοποιούμε αυτήν την τεχνολογία, σε ποιες άλλες τεχνολογίες στηρίζεται, πως χρησιμοποιείται, πως λειτουργεί σε σύγκριση με τις κλασσικές μεθόδους, τα πλεονεκτήματα και τα μειονεκτήματα από την χρήση αυτής της τεχνολογίας και, τέλος, μερικά παραδείγματα χρήσης. Ακολούθως, στο δεύτερο κεφάλαιο, γίνεται λόγος για τα frameworks που υποστηρίζουν την τεχνολογία AJAX, τις κατηγορίες στις οποίες αυτά χωρίζονται και τις χρήσεις τους ανάλογα με αυτές. Από τα συνολικά 100 frameworks που υπάρχουν σήμερα στο τρίτο κεφάλαιο παρουσιάζονται τα πιο δημοφιλή και δίνεται έμφαση στην βιβλιοθήκη jquery που χρησιμοποιήθηκε για την υλοποίηση του προγραμματιστικού κομματιού της εργασίας. Όσων αφορά την βιβλιοθήκη jquery, παρουσιάζονται αναλυτικά οι λειτουργίες που προσφέρει καθώς και τα χαρακτηριστικά που διαθέτει. Στο τέταρτο κεφάλαιο, παρατίθενται γενικές πληροφορίες σχετικά με το e-shopping όπως ιστορικά στοιχεία, πλεονεκτήματα και μειονεκτήματα και μερικές συμβουλές στον τρόπο που πρέπει να σχεδιάζονται οι αντιστοιχες ιστοσελίδες με βάση μελέτες πάνω στις προσδοκίες και τις απαιτήσεις των καταναλωτών. Με βάση τα προηγούμενα, γίνεται επίσης λόγος για το κατά πόσο η χρήση της τεχνολογίας AJAX θα βοηθούσε στην βελτιώση της λειτουργικότητας των site που αφορούν το e-shopping με σκοπό να βελτιωθεί το user experience που προσφέρουν. Σ αυτό το κεφάλαιο παρουσίαζονται και τα κομμάτια στα οποία θα επικεντρωθεί το προγραμματιστικό κομμάτι της εργασίας. Στην συνέχεια, στο πέμπτο κεφάλαιο, παρουσιάζεται το προιόν αυτής της εργασίας, τα Easy Shopper Tools και συγκεκριμένα δίνονται λεπτομέρειες της υλοποίησης τους -5-

14 καθώς και ο τρόπος που μπορούν να χρησιμοποιηθούν. Τέλος, παρουσιάζονται τα συμπερασματα στα οποία κατέληξε η εργασία. -6-

15 2 Τεχνολογία AJAX Η τεχνολογία AJAX (Asynchronous Javascript and XML) στην πραγματικότητα είναι μία ομάδα από αλληλένδετες τεχνικές ανάπτυξης λογισμικού για τον ιστοχώρο ή για την δημιουργία rich Internet εφαρμογών. Με την χρήση AJAX, οι web εφαρμογές μπορούν να ανακτήσουν δεδομένα από τον server ασύγχρονα στο background χωρίς να παρεμβαίνουν στον τρόπο που παρουσιάζονται και συμπεριφέρονται οι σελίδες. Τα δεδομένα ανακτώνται μέσω του XMLHttpRequest αντικειμένου ή με την χρήση Remote Scripting σε browsers που δεν υποστηρίζουν το πρώτο. Παρά την ονομασία που έχει πάρει η χρήση JavaScript και XML δεν είναι απαραίτητη, ούτε τα αιτήματα πρέπει να είναι ασύγχρονα. 2.1 Ιστορικά Παρόλο που ο όρος AJAX πρωτοχρησιμοποιήθηκε το 2005 (από τον Jesse James Garrett), από τα μέσα της δεκαετίας του 90 χρησιμοποιούνται εναλλακτικές τεχνικές για την ασύγχρονη φόρτωση περιεχομένου σε ιστοσελίδες. Τα Java applets, που εισήχθησαν με την πρώτη έκδοση της Java το 1995, επιτρέπουν κομμάτια κώδικα από την μεριά του client να ανακτούν δεδομένα από τον web-server ασύγχρονα αφού έχει ήδη φορτωθεί μια σελίδα. Το 1996, ο browser Internet Explorer της Microsoft εισήγαγε το στοιχείο IFrame στην HTML με το οποίο δίνεται η δυνατότητα της ενσωμάτωσης ενός HTML εγγράφου σ ένα άλλο. Το 1999, η Microsoft δημιουργεί το XMLHttpRequest αντικείμενο για την μεταφορά XML και άλλων δεδομένων κειμένου μεταξύ του web-server και ενός browser. Το 2006, η World Wide Web Consortium (W3C) έκδοσε μία πρώτη πρόχειρη προδιαγραφή για το αντικείμενο σε μία προσπάθεια να δημιουργηθεί ένα επίσημο web πρότυπο (AJAX). Σήμερα, το XMLHttpRequest αντικείμενο της Microsoft υποστηρίζεται από browsers όπως Mozilla Firefox, Safari, Opera, Netscape και Internet Explorer 7 με την χρήση ενός native JavaScript αντικειμένου. Παρόλο που οι τεχνολογίες αυτές υπήρχαν και χρησιμοποιήθηκαν από αρκετούς developers, μόνο τα τελευταία χρόνια έχουν καταφέρει να κερδίσουν σε δημοτικότητα. Η έκρηξη αυτή της δημοτικότητας οφείλεται -7-

16 στο γεγονός ότι μόνο οι πρόσφατες εκδόσεις των browsers κατάφεραν να ενσωματώσουν χαρακτηριστικά για την υποστήριξη δυναμικού DHTML, XHTML, CSS και XMLHttpRequest. Η ολοένα και καλύτερη υποστήριξη αυτών των τεχνολογιών από τους browsers έφερε την τεχνολογία AJAX στην πρώτη γραμμή με αποτέλεσμα να προκύπτουν συχνά νέες μικρές και ανεξάρτητες λειτουργίες που προσφέρουν πιο δυναμικές εφαρμογές και ενισχύουν την συνολική εμπειρία και ικανοποίηση που λαμβάνει ο χρήστης (user experience) από αυτές Iframes Πριν εφαρμοστεί ευρέως η χρήση του XMLHttpRequest αντικειμένου, πολλές web εφαρμογές χρησιμοποιούσαν ένα κρυμμένο iframe για την επίτευξη της επικοινωνίας με τον server. Ένα iframe είναι ακριβώς όπως μια κανονική σελίδα HTML με την διαφορά ότι μπορεί να «εμφυτευθεί» σε μία άλλη σελίδα. Αυτές οι εφαρμογές δημιουργούσαν ένα πεδίο μεγέθους 0px με 0px και στην συνέχεια προκαλούσαν την ανακατεύθυνσή του σ ένα νέο URL ώστε να τραβήξει δεδομένα από τον server. Ενώ η τεχνική ήταν σωστή και αποτελεσματική για πολλούς προγραμματιστές, υπήρχαν δύο προβλήματα. Το πρώτο είναι ότι αν ήθελες να πραγματοποιήσεις πολλαπλά ασύγχρονα αιτήματα θα έπρεπε να έχεις και πολλά iframes. Αυτό κατέληξε να γίνει παιχνίδι μιας και έπρεπε να μαντέψεις τον αριθμό των iframe που θα χρειαζόσουν και να τα εμφυτεύσεις στην σελίδα, κάτι που δεν ήταν μεγάλο πρόβλημα αλλά δεν ήταν και μία ολοκληρωμένη τεχνική. Σημαντικότερο πρόβλημα ήταν το γεγονός ότι τα iframes ήταν μια τεχνολογία που δημιουργήθηκε για να κάνει μια λειτουργία που δεν έπρεπε. Παρόλο που λειτουργεί επιτυχώς δίνει την αίσθηση ότι «κλέβεις». Το XMLHttpRequest αντικείμενο σχεδιάστηκε για να διεκπαιρεώσει συγκεκριμένες λειτουργίες όπως αρχικοποίηση, παρακολούθηση και επεξεργασία των αποτελεσμάτων από μια επικοινωνία με τον server. Επομένως, προγραμματίζοντας με βάση αυτό το αντικείμενο δίνεται η αίσθηση του φυσικού και παράγει πιο ευανάγνωστο και άρα πιο εύκολο στην συντήρησή του κώδικα. Ένα τρίτο θέμα που δημιουργείται από την χρήση των iframes και επηρρεάζει κυρίως τον Interet Explorer είναι η παραγωγή ήχου όταν γίνεται ένα αίτημα. Συγκεκριμένα, κάθε φορά που γίνεται ένα αίτημα ακούγεται ένα «κλικ» κάτι που -8-

17 μπορεί να είναι ενοχλητικό για τον χρήστη μιας και δεν έχει συνήθως τέτοιου είδους ενδείξεις σε άλλες λειτουργίες. 2.2 Τεχνολογίες Όπως έχει ήδη αναφερθεί, ο όρος Ajax αντιπροσωπεύει μία ομάδα από web τεχνολογίες που μπορούν να χρησιμοποιηθούν για την υλοποίηση μιας web εφαρμογής που επικοινωνεί με έναν server στο background. Οι τεχνολογίες που χρησιμοποιεί είναι: XHTML και CSS για την παρουσίαση Το Document Object Model (DOM) για την δυναμική παρουσίαση και αλληλεπίδραση με τα δεδομένα XML και XSLT για την ανταλλαγή, χειρισμό και παρουσίαση των δεδομένων Το XMLHttpRequest αντικείμενο για ασύγχρονη επικοινωνία JavaScript για την ένωση όλων αυτών των τεχνολογιών. Εικόνα 3: Οι τεχνολογίες που χρησιμοποιούνται από την τεχνολογία AJAX. Αυτά βέβαια ίσχυαν στις πρώτες εφαρμογές της Ajax. Από τότε υπήρξαν εξελίξεις σ αυτές τις τεχνολογίες και στον καθορισμό της σημασίας του όρου Ajax. Συγκεκριμένα: Η JavaScript δεν είναι η μοναδική client-side γλώσσα για την υλοποίηση Ajax εφαρμογών. Άλλες γλώσσες όπως η VBScript και η EGL Programming Language μπορούν επίσης να χρησιμοποιηθούν. -9-

18 Η XML δεν είναι απαραίτητη για την ανταλλαγή δεδομένων και άρα η XSLT δεν έιναι απαραίτητη για τον χειρισμό των δεδομένων. Μπορούν να χρησιμοποιηθούν επίσης άλλες γλώσσες οπως JavaScript Object Notation (JSON), preformatted HTML ή απλό κείμενο. 2.3 Τρόπος λειτουργίας Η καρδιά της τεχνολογίας AJAX είναι το XMLHttpRequest αντικείμενο το οποίο με την σειρά του αποτελεί μέρος του XML DOM (Document Object Model). Το συγκεκριμένο μοντέλο δίνει ένα πρότυπο στον τρόπο πρόσβασης και χρήσης ενός XML εγγράφου. Το μοντέλο DOM δίνει επίσης την δυνατότητα σε κομμάτια κώδικα γραμμένα σε JavaScript να έχουν πλήρη πρόσβαση σε XML και XHTML έγγραφα δίνοντας τους πρόσβαση στα στοιχεία που αποτελούν την δομή των εγγράφων. Τέλος, το μοντέλο αυτό χρησιμοποιείται για να ερμηνεύσει τις απαντήσεις που λαμβάνονται από την μεριά του server όταν δημιουργούμε ένα XMLHttpRequest αντικείμενο Το αντικείμενο XMLHttpRequest Το αντικείμενο XMLHttpRequest δίνει την δυνατότητα σε μια σελίδα να πάρει δεδομένα (χρησιμοποιόντας την μέθοδο GET) ή να αποστείλει δεδομένα (χρησιμοποιόντας την μέθοδο POST) στον server στο background αποτρέποντας μ αυτόν τον τρόπο την ανανέωση της σελίδας κατα την διάρκεια της όλης διαδικασίας. Η όλη ιδέα της τεχνολογίας AJAX στηρίζεται σ αυτο το αντικείμενο και στο γεγονός ότι το μοντέλο αλληλεπίδρασης που δημιουργεί είναι πιο αποτελεσματικό απ ότι ένα συμβατό αίτημα HTTP (Hypertext Trasport Protocol). Ο λόγος πίσω από αυτό είναι ότι οι αλλαγές σ ένα site γίνονται όταν το απαιτεί ο χρήστης δίνοντας έτσι την αίσθηση ότι πρόκειται για μια desktop εφαρμογή παρά για μια web εφαρμογή. Το XMLHttpRequest αντικείμενο επιτρέπει στον χρήστη να αλληλεπιδρά με μία σελίδα ενώ όλα τα αιτήματα γίνονται στο background. Η φύση του αντικειμένου XMLHttpRequest το καθιστά κατάλληλο για web εφαρμογές γιατί ο χρήστης μιας τέτοιας υπηρεσίας θα πρέπει να μένει συγκεντρωμένος σ αυτήν και να μην αντιλαμβάνεται το τι γίνεται στο background (αιτήματα), ενώ από την άλλη το αντικείμενο HTTP θα πρέπει να χρησιμοποιείται σε site που έχουν που σκοπό έχουν να παρουσιάσουν κάτι (presentation-type sites). -10-

19 2.3.2 Το κλασσικό μοντέλο Μία κλασσική web εφαρμογή δουλεύει ως εξής: οι περισσότερες ενέργειες των χρηστών στο interface έχουν ως αποτέλεσμα την πυροδότηση ενός HTTP αίτηματος στον web server. Ο server με την σειρά του επεξεργάζεται το αίτημα, συγκεντρώνει τα απαραίτητα δεδομένα και, τέλος, επιστρέφει μία HTML σελίδα στον client. Το συγκεκριμένο μοντέλο δεν ανταποκρίνεται στις ανάγκες μίας software εφαρμογής. Εικόνα 4: Το παραδοσιακό μοντέλο για web εφαρμογές (αριστερά) σε σύγκριση με το μοντέλο Ajax (δεξιά). Ενώ η προσέγγιση αυτή τεχνικά έχει λογική, για τον χρήστη δεν είναι αποτελεσματική και αυτό γιατί είναι αναγκασμένος να περιμένει τον server να επιτελέσει τις λειτουργίες που αναφέρθηκαν παραπάνω. Είναι εμφανές ότι με κατάλληλο σχεδιασμό μπορεί να αποφευχθεί η αναμονή του χρήστη κάθε φορά που μία web εφαρμογή απαιτεί πληροφορίες από τον server AJAX model Μία εφαρμογή Ajax εξαλείφει το πρόβλημα της αναμονής του χρήστη εισάγοντας έναν μεσάζων- μία Ajax μηχανή- μεταξύ του server και του client (όπως φαίνεται και στην Εικόνα 4). Θα περίμενε κανείς ότι προσθέτοντας ένα επίπεδο μεταξύ client και server -11-

20 θα καθυστερούσε την μεταξύ τους επικοινωνία, αλλά στην πραγματικότητα συμβαίνει το αντίθετο. Στην αρχή ενός session (σύνοδος), αντί για την φόρτωση μιας σελίδας, ο browser φορτώνει μία Ajax μηχανή η οποία είναι γραμμένη σε JavaScript και είναι κρυφή. Αυτή η μηχανή είναι υπεύθυνη για την διαμόρφωση της διεπαφής και για την επικοινωνία με τον server εκ μέρους του χρήστη. Η Ajax μηχανή επιτρέπει την ασύγχρονη αλληλεπίδραση χρήστη και εφαρμογής με αποτέλεσμα ο χρήστης να μην αντικρύσει ποτέ ένα κενό παράθυρο σε browser με κάποιο εικονίδιο αναμονής, περιμένοντας τον server να διεκπαιρεώσει μία λειτουργία. Εικόνα 5: Σχέδιο λειτουργίας μιας κλασσικής web εφαρμογής. Ο αναγνώστης, παρατηρόντας τις εικόνες 5 (πάνω) και 6 (κάτω) μπορεί να αποκτήσει μια ιδέα της διαφοράς στον τρόπο λειτουρίας μεταξύ των δύο μοντέλων που αναφέρθηκαν. Στην εικόνα 6 φαίνεται ο τρόπος με τον οποίο μεσολαβεί η AJAX μηχανή μεταξύ του client και του server. -12-

21 Εικόνα 6: Ασύγχρονο σχέδιο μίας Ajax εφαρμογής (κάτω). Κάθε ενέργεια του χρήστη, που κανονικά θα δημιουργούσε ένα HTTP αίτημα, παίρνει την μορφή μίας JavaScript κλήσης στην Ajax μηχανή. Κάθε ανταπόκριση σε μία ενέργεια του χρήστη που δεν απαιτεί την επικοινωνία με τον server (π.χ. απλή επαλήθευση δεδομένων) την αναλαμβάνει η μηχανή. Αν η μηχανή χρειαστεί κάτι από τον server ώστε να μπορέσει να ανταποκριθεί (π.χ. ανάκτηση νέων δεδομένων) τότε, κάνει τις απαραίτητες αιτήσεις ασύγχρονα, συνήθως χρησιμοποιώντας XML, χωρίς να καθυστερεί την αλληλεπίδραση του χρήστη με το interface της εφαρμογής. 2.4 Πλεονεκτήματα/ Μειονεκτήματα Πλεονεκτήματα Σε πολλές περιπτώσεις, υπάρχουν σελίδες σ ένα website το περιεχόμενο των οποίων είναι κοινό. Χρησιμοποιώντας παραδοσιακές μεθόδους, το περιεχόμενο αυτό θα έπρεπε να φορτώνεται στον browser ξανά και ξανά με κάθε αίτημα. Από την άλλη, χρησιμοποιώντας AJAX, μία web εφαρμογή μπορεί να αιτηθεί μόνο το περιεχόμενο -13-

22 που χρειάζεται και επομένως να μειωθεί το απαιτούμενο bandwith και ο χρόνος για να φορτώσει. Η χρήση ασύγχρονων αιτημάτων επιτρέπει στον interface του browser του client να είναι περισσότερο διαδραστικό, να ανταποκρίνεται πιο γρήγορα και οι σελίδες να ανανεώονται ανεξάρτητα. Από την άποψη του χρήστη, η εφαρμογή θα φαίνεται πιο γρήγορη ή ότι ανταποκρίνεται καλύτερα παρόλο που στην μεριά του server αυτή δεν έχει αλλάξει. Χρησιμοποιώντας AJAX, οι συνδέσεις στον server μειώνονται, αφού τα κομμάτια κώδικα (scripts) και τα style sheets πρέπει να μεταφερθούν μόνο μία φορά ενώ, τέλος, οι JavaScript μεταβλητές θα διαρκούν, αφού η κυρίως σελίδα δεν χρειάζεται να ανανεώνεται. Επιδράσεις στις RIA εφαρμογές Μία από τις χρήσεις της AJAX τεχνολογίας είναι η δημιουργία πλούσιου και μεγαλύτερης ανταπόκρισης user interface σε web εφαρμογές. Απόδειξη της θετικής επίδρασης σε τέτοιου είδους εφαρμογές είναι οι ίδιες οι εφαρμογές που έχουν δημιουργηθεί χρησιμοποιόντας AJAX. Αυτές οι επιδράσεις είναι: Βελτιωμένη απόδοση και πιο ομαλές ανταποκρίσεις. Στο Google Calendar, καθώς ο χρήστης περιφέρεται μέσα στο ημερολόγιο, τα δεδομένα ανανεώνονται χωρίς την ανανέωση της σελίδας. Στην κεντρική σελίδα του Yahoo!, όταν ο χρήστης αλλάζει το tab που βλέπει κάθε φορά, οι πληροφορίες ανανεώνονται αυτόματα και άμεσα, ενώ όταν το ποντίκι περνάει πάνω από το tab του καιρού μπορείς να δεις αμέσως τις ανανεωμένες πληροφορίες ακόμα και όταν εισάγεις νέο κωδικό περιοχής. Χρησιμοποιόντας AJAX, το user experience στην αναζήτηση και στην προβολή του περιεχομένου μιας σελίδας είναι διαφορετική καθώς η σελίδα ανταποκρίνεται γρηγορότερα και τα ανανεωμένα δεδομένα παρουσιάζονται χωρίς την ανανέωση όλης της σελίδας. Πολλαπλές αλληλεπιδράσεις. Χάρη στην τεχνική της ασύγχρονης επικοινωνίας και τον διαχωρισμό της παρουσίασης των δεδομένων από την ανταλλαγή των δεδομένων με τον server, όταν ο χρήστης κάνει ένα αίτημα μπορεί να προχωρήσει στην επόμενη σελίδα χωρίς να πρέπει να περιμένει να ολοκληρωθεί το αίτημα. -14-

23 Αυτόματη ανανέωση δεδομένων για να μένει το site ενημερωμένο. Οι AJAX εφαρμογές μπορούν να «τραβούν» συνέχεια από τον server της πιο πρόσφατες πληροφορίες για να κρατούν το site ενημερωμένο και παράλληλα τα δεδομένα να αποθηκεύονται στο παρασκήνιο. Αυτές οι δυνατότητες είναι πολύ χρήσιμες σε εφαρμογές τα δεδομένα των οποίων αλλάζουν κάπου αλλού. Live υποστήριξη. Το σύστημα μπορεί να παρακολουθεί τις ενέργειες του χρήστη σε πραγματικό χρόνο και προσφέρει υποστήριξη όποτε χρειαστεί. Το site PCnames.com φέρνει πιθανά site καθώς ο χρήστης πληκτρολογεί. Πλούσιες αλληλεπιδράσεις. Μερικές αλληλεπιδράσεις που χρησιμοποιούνται σε desktop εφαρμογές όπως drag and drop, μπάρες κύλισης, zoom in/out, inline editing κ.ά. υλοποιημένες σε εφαρμογές βασισμένες στην τεχνολογία AJAX προσφέρουν μεγαλύτερη ευελιξία και πιο δυναμικούς τρόπους αλληλεπίδρασης μεταξύ του χρήστη και του web. Για παράδειγμα, στο Google Calendar, ο χρήστης μπορεί με την χρήση drag and drop να μεταθέσει την ημερομηνία ενός ραντεβού σε μια άλλη. Νέες λειτουργίες και τεχνικές αλληλεπίδρασης. Για παράδειγμα τεχνικές όπως collapse και expand transition, τρόποι για την επίδειξη ενέργειών σε αλληλεπιδράσεις και pop over παράθυρα έχουν σχεδιαστεί και υλοποιηθεί σε AJAX εφαρμογές. Αυτές οι νέες τεχνικές δημιουργούν πλουσιότερες αλληλεπιδράσεις και ενισχύουν την επικοινωνία. Visual effects και ενίσχυση της συνολικής εμπειρίας του χρήστη. Νέα εφφέ (visual και animated) προσθέτονται στις web εφαρμογές για καλύτερη επικοινωνία με τον χρήστη και τις καθιστούν πιο ευχάριστες Μειονεκτήματα Οι σελίδες που δημιουργήθηκαν δυναμικά χρησιμοποιώντας AJAX αιτήματα δεν καταχωρούνται αυτόματα στην ιστορία του browser με αποτέλεσμα όταν ο χρήστης κάνει κλικ στο κουμπί back να μην επιστρέψει σε προηγούμενη κατάσταση της σελίδας αλλά στην προηγούμενη σελίδα που έβλεπε ο χρήστης. Παρόλα αυτά, υπάρχουν τρόποι να διορθωθεί αυτό, ένας εκ των οποίων είναι η χρήση αόρατων iframes που θα αναλαμβάνουν να κάνουν αλλαγές στην ιστορία του browser και να παρακολούθεί για αλλαγές στην κατάσταση της σελίδας μέσω του URL. -15-

24 Οι σελίδες που ανανεώνονται δυναμικά καταστούν δύσκολο στον χρήστη να βάλει σελιδοδείκτη (bookmark) σε κάποια συγκεκριμένη κατάστασή τους. Οι λύσεις αυτού του προβλήματος περιλαμβάνουν την παρακολούθηση του URL (μετά το σύμβολο #) επιτρέποντας στον χρήστη να επιστρέψει σε προηγούμενη κατάσταση της σελίδας. Εξαιτίας του γεγονότος ότι οι περισσότεροι web crawlers δεν μπορούν εκτελέσουν κώδικα σε JavaScript, πρέπει οι web applications να παρέχουν έναν εναλλακτικό τρόπο για την προσπέλαση περιεχομένου που φορτώνεται με AJAX από τις διάφορες μηχανές αναζήτησης. Οποιοσδήποτε χρήστης του οποίου ο browser δεν υποστηρίζει AJAX ή JavaScript ή εκτέλεση κώδικα σε JavaScript είναι απενεργοποιημένη δεν θα μπορέσει να προσπελάσει τις ανάλογες σελίδες. Παρομοίως, συσκευές όπως κινητά τηλέφωνα, PDAs και screen readers μπορεί να μην έχουν δυνατότητα χρήσης JavaSript ή του XMLHttpRequest αντικειμένου. Επίσης οι screen readers μπορεί να υποστηρίζουν την χρήση AJAX αλλά να μην είναι σε θέση να διαβάζουν σωστά το δυναμικά παραγώμενο περιεχόμενο. Επομένως οι σελίδες αυτές πρέπει να σχεδιαστούν κάτα τέτοιον τρόπο ώστε να μην εξαρτώνται αποκλειστικά από την χρήση AJAX. Τέλος, η τεχνολογία AJAX ανοίγει τον δρόμο σε νέου είδους απειλές πάνω στις οποίες δεν έχουν δουλέψει οι web developers. 2.5 Παραδείγματα εφαρμογής Ακολουθούν μερικά γνωστά παραδείγματα εφαρμογής της τεχνολογίας AJAX Λειτουργίες video Πολλές υπηρεσίες που προσφέρουν τα site με αναπαραγωγή video υλοποιούνται με χρήση βιβλιοθηκών AJAX. Μερικές από αυτές τις λειτουργίες είναι η διαδικασία uploading ενος video, η διαγραφή του, το rating (απόδοση βαθμολογίας),η προσθήκη κάποιου σχόλιου και η προσθήκη ενός video στα αγαπημένα ενός χρήστη. Uploading και διαγραφή Η διαδικασία του uploading γίνεται ώς εξής, ο χρήστης επιλέγει το video που θέλει να ανεβάσει στην σελίδα, περιμένει να ολοκληρωθεί το uploading και αφού ολοκληρωθεί βάζει τα tags και τα προσωπικά του σχόλια. Η όλη διαδικασία γίνεται με χρήση AJAX καθώς δεν χρειάζεται ανανέωση της σελίδας με την ολοκλήρωση της διαδικασίας. -16-

25 Στην επόμενη εικόνα φαίνεται αυτή η διαδικασία όπως αυτή γίνεται στο site Αφού ο χρήστης εισάγει όλες τις κατάλληλες πληροφορίες κλικάρει το κουμπί save changes και στέλνονται ασύγχρονα τα δεδομένα στον server. Η διαδικασία αποστολής των δεδομένων σηματοδοτείται με ένα εικονίδιο τύπου κλεψύδρας που εμφανίζεται στο πάνω δεξί μέρος του panel. Εικόνα 7: Uploading Με την ολοκλήρωση της διαδικασίας το panel ανανεώνεται ασύγχρονα και εμφανίζεται το μήνυμα της Εικόνας 12. Εικόνα 8: Ολοκλήρωση uploading Εικόνα 9: Ενημέρωση για επιτυχία Η διαδικασία της διαγραφής γίνεται απλά αφού το μόνο που έχει να κάνει ο χρήστης είναι να επισκεφθεί τον προσωπικό του χώρο μέσα στο site, όπου βρίσκονται συγκεντρωμένα σε λίστα όλα τα video που έχει ανεβάσει, και να επιλέξει την διαγραφή -17-

26 που βρίσκεται σαν επιλογή δίπλα από κάθε video. Όταν κάνει αυτή την επιλογή για ένα video τότε αυτό απλά αφαιρείται από την λίστα χωρίς να γίνει ανανέωση της σελιδας. Rating Η βαθμολόγηση ενός video γίνεται την ώρα που ο χρήστης το παρακολουθεί χωρίς να χρειαστεί να το σταματήσει ή να αναγκαστεί να το παρακολουθήσει από την αρχή. Συγκεκριμένα την ώρα που ο χρήστης παρακολουθεί ένα video, κάτω από αυτό υπάρχει μία μπάρα που γεμίζει ανάλογα με την κίνηση του pointer του ποντικιού από πάνω της. Αφού η μπάρα γεμίσει ανάλογα με την βαθμολογία που θέλει να δώσει ο χρήστης, κλικάροντας πάνω της αποστέλεται η βαθμολογία. Εικόνα 10: Rating Με αντίστοιχο τρόπο γίνονται οι λειτουργίες της προσθήκης του video στα αγαπημένα και προσθήκης σχόλιου. Συγκεκριμένα κάτω από κάθε video (Εικόνα 11) υπάρχει η κατάλληλη επιλογή για προσθήκη στα αγαπημένα. Εικόνα 11: Η θέση του favorite Ο χρήστης αφού επιλέξει να συμπεριληφθεί το video στα αγαπημένα εμφανίζεται κατάλληλο μήνυμα που τον ενημερώνει αλλά και του δίνει μία νέα επιλογή, να αφαιρέσει το video από τα αγαπημένα (Εικόνα 12). Εικόνα 12: Μήνυμα μετά την προσθήκη -18-

27 Λειτουργίες χαρτών Ανάμεσα στις λειτουργίες που περιλαμβάνουν την χρήση AJAX είναι η επιλογή για εμφάνιση της σηματοδότησης της κίνησης πάνω στον χάρτη, η προβολή φωτογραφιών και video που υπάρχουν στο σύστημα για διάφορες τοποθεσίες στον χάρτη, η προβολή περισσότερων πληροφοριών (wiki) και τέλος η επιλογή για προβολή των χαρτών με διαφορετικό τρόπο όπως, για παράδειγμα, όπως θα φαίνονταν από δορυφόρο. Στις παρακάτω φωτογραφίες φαίνεται ο χάρτης όπως είναι πριν και μετά από την επιλογή για προβολή φωτογραφιών, οι άλλες λειτουργίες πραγματοποιούνται με παρόμοιο τρόπο. Εικόνα 13: Πριν την προβολή φωτογραφιών Πάνω δεξιά στην εικόνα 12 φαίνονται όλες οι επιλογές που μπορεί να κάνει ο χρήστης ανάμεσα στις οποίες είναι και η προβολή φωτογραφιών. Στην επόμενη εικόνα φαίνεται το στιγμιότυπο της εφαρμογής μετά την ενσωμάτωση των φωτογραφιών πάνω στον χάρτη. -19-

28 Εικόνα 14: Μετά την προβολή φωτογραφιών Άλλες λειτουργίες Υπάρχουν διάφορες ιστοσελίδες οι οποίες απαιτούν την εγγραφή του χρήστη ώστε να μπορέσει να χρησιμοποιήσει τις διάφορες εφαρμογές που προσφέρονται. Κατά την εγγραφή του χρήστη ζητούνται διάφορες πληροφορίες όπως το του, ο κωδικός που επιθυμεί να έχει καθώς και ένα όνομα της επιλογής του. Στην εισαγωγή του ονόματος το σύστημα ελέγχει αν υπάρχει άλλη εγγραφή στη βάση δεδομένων με το ίδιο όνομα. Συγκεκριμένα αφού ο χρήστης πληκτρολογήσει το όνομα, αποστέλλεται ένα ερώτημα (query) στην βάση δεδομένων της ιστοσελίδας για να γίνει ο έλεγχος και στη συνέχεια λαμβάνεται η απάντηση. Ανάλογα με την απάντηση εμφανίζεται κατάλληλο μήνυμα (π.χ. το όνομα που επιλέξατε υπάρχει) και με την σειρά του ο χρήστης εισάγει νέο όνομα ή όχι. Το γνωστό σε όλους Google διαθέτει μια λειτουργία αυτοσυμπλήρωσης του πεδίου της αναζήτησης κάνοντας έτσι πιο γρήγορη την πληκτρολόγηση. Συγκεκριμένα, όταν ο χρήστης πληκτρολογεί κάτι, στο πεδίο εμφανίζονται αναζητήσεις που έχουν κάνει άλλοι χρήστες. Αυτο για να γίνει απαιτείται η σύνδεση με ασύγχρονο τρόπο στην βάση του συστήματος και επιστροφή των αποτελεσμάτων. -20-

29 Εικόνα 15: Αυτόματη συμπλήρωση στο πεδίο αναζήτησης της Google -21-

30

31 3 Υποδομές AJAX- jquery Τα AJAX frameworks υποστηρίζουν την τεχνολογία AJAX για την κατασκευή δυναμικών και client-side ιστοσελίδων. Σε δυναμικές σελίδες οι χρήστες μπορούν να κάνουν αιτήσεις από την βάση δεδομένων της ιστοσελίδας που βρίσκεται στον server. Μέσα σ ένα AJAX framework τα δεδομένα αποστέλλονται στον server ή διαβάζονται από αυτόν με την χρήση JavaScript. Αυτό επιτρέπει στους χρήστες να κάνουν συγκεκριμένα αιτήματα που επεξεργάζονται και εφαρμόζονται χρησιμοποιόντας δυναμικούς παράγοντες όπως συγκεκριμένη είσοδο δεδομένων, ώρα ή το ιστορικό των αναζητήσεων του χρήστη για τον προσδιορισμό του περιεχομένου της ιστοσελίδας. Ενώ η τεχνολογία AJAX είναι κάτα κύριο λόγο μια client-side συλλογή τεχνολογιών, ένα AJAX framework διευκολύνει τις επεξεργασίες που γίνονται στον server όπως την εύρεση και την αποθήκευση δεδομένων. Επομένως, ο στόχος ενός AJAX framework είναι να λειτουργεί ως ένα επίπεδο επικοινωνίας μεταξύ του χρήστη και του server. Τα AJAX frameworks είναι σχεδιασμένα έτσι ώστε να υποστηρίζουν τις τεχνολογίες που αναφέρθηκαν στην ενότητα 2.3. Ένα framework διευκολύνει τον προγραμματισμό σε AJAX γιατί ο client χρησιμοποιεί την εύκολα κατανοητή και μεταφράσιμη JavaScript για να κάνει αιτήματα στον server, ενώ παράλληλα αναζητά δεδομένα, επεξεργάζεται αιτήματα και τα στέλνει στον server διαμέσου του server. 3.1 Χρήσεις Υπάρχουν τρεις κύριοι τύποι των AJAX framework. Τα direct, indirect, τα AJAX compontent και τα server driven frameworks. Η κατηγοριοποίηση αυτή έγινε βασισμένη στα χαρακτηριστικά που προσφέρουν και στις ικανότητες που πρέπει να έχει ο χρήστης τους (developers). Ακολουθεί μία σύντομη περιγραφή του κάθε τύπου Direct ΑJAX frameworks Τα direct object frameworks συνήθως είναι μικρά σε μέγεθος. Η χρήση τους είναι κυρίως για την ανάπτυξη ενός web site παρά για την ανάπτυξη μιας web εφαρμογής. Αυτή είναι και η διαφορά μεταξύ, για παράδειγμα, ενός online site αγοράς και μιας web -23-

32 εφαρμογής όπως το web-based ηλεκτρονικό ταχυδρομείο. Οι developers θα πρέπει να έχουν γνώσεις πάνω στον προγραμματισμό HTML, CSS και AJAX μιας και κατασκευάζουν τις σελίδες με HTML και το framework έχει να αντιμετωπίσει APIs (application programming interfaces) γραμμένα σε HTML. Αυτά τα APIs διευκολύνουν την επικοινωνία ανεξαρτήτως του browser Indirect ΑJAX frameworks Τα frameworks αυτού του τύπου βασίζονται στην τεχνολογία της μεταγλώττισης όπου αντί για την απευθείας συγγραφή κώδικα σε AJAX και JavaScript χρησιμοποιείται μια γλώσσα προγραμματισμού ανώτερου επιπέδου η οποία με την σειρά της χρησιμοποιεί έναν μεταγλωττιστή που θα μετατρέψει το αποτέλεσμα σε JavaScript. Γι αυτό τα indirect frameworks απαιτούν γνώση αυτής της γλώσσας ανώτερου επιπέδου, CSS, HTML ενώ δεν χρειάζεται μεγάλη γνώση πάνω σε AJAX και JavaScript. Τα indirect frameworks συνοδεύονται από βολικές βιβλιοθήκες, modules και κλάσσεις που αναλαμβάνουν την επικοινωνία μεταξύ client και server, χειρισμό του DOM και των στοιχείων που απαρτίζουν το HTML έγγραφο και το event hadling. Τα κυριότερα πλεονεκτήματα αυτής της κατηγορίας των frameworks είναι: Σε σύκριση με τα AJAX component frameworks, ο developer μπορεί να χρησιμοποιήσει την βασική κλάση των widgets της γλώσσας προγραμματισμού που θα επιλέξει και να δημιουργήσει δικά του. Ο developer δεν περιορίζεται από την ακαμψία που παρουσιάζουν τα AJAX component frameworks. Το σύνολο των widgets που χρησιμοποιούν μοιάζουν πιο πολύ με τα widgets των desktop εφαρμογών απ ότι αυτών των web εφαρμογών. Μέσω της μεταγλώττισης μπορεί να παραχθεί κώδικας ο οποίος κατά την εκτέλεσή του να διορθώνει τις ασυμφωνίες που δημιουργούνται από τους διαφορετικούς browsers. Σε συνδυασμό με ένα server driven framework μπορούν να παραχθούν ακόμα καλύτερα αποτελέσματα AJAX component frameworks Τα AJAX component frameworks είναι μεγαλύτερα από τα προηγούμενα και γενικά χρησιμοποιούνται στην δημιουργία web εφαρμογών. Χρησιμοποιούν έτοιμα στοιχεία -24-

33 για την δημιουργία και την εφαρμογή κώδικα σε HTML και γι αυτό επιτρέπουν την γρηγορότερη ανάπτυξη κώδικα και απαιτούν λιγότερο έλεγχο. Τα AJAX component frameworks παρέχουν επίσης διαμορφώσιμα APIs, επιτρέπουν τον δυναμικό έλεγχο του προγράμματος βασιζόμενο στα δεδομένα που εισάγει ο χρήστης και την δημιουργία νέων στοιχείων (components) βασισμένα στα ήδη υπάρχοντα. Ένα AJAX component framework παρέχει τα παρακάτω: Διαμορφώσιμα APIs, για παράδειγμα, να πυροδοτείται ένα event όταν ο χρήστης σταματήσει να πληκτρολογεί σ ένα πλαίσιο. Η εμφάνιση μιας σελίδας να αλλάζει χωρίς να επηρεάζεται η συμπεριφορά της ή ο σχεδιασμός της. Προγραμματιστικός έλεγχος, για παράδειγμα, δυναμική προσθήκη ενός tab ή δυναμικός σχηματισμός στοιχείων ανάλογα με τα δεδομένα του χρήστη. Επεκτασιμότητα, δηλαδή την δημιουργία component με βάση άλλα ώστε τα πλεονεκτήματα ενός component-based framework να μην χαθούν Server driven frameworks Τα server driven frameworks αποτελούνται από στοιχεία (components) που αναπτύσονται από τον server σε server-side γλώσσες προγραμματισμού. Τα αιτήματα των χρηστών προωθούνται στον server διαμέσου AJAX τεχνικών. Αυτό δημιουργεί την απαίτηση ο developer να γνωρίζει προγραμματισμό τόσο σε AJAX όσο και σε serverside γλώσσες προγραμματισμού. Τα framework αυτού του τύπου είναι πιο οικεία και πιο αποτελεσματικά για προγραμματιστές που είναι γνώστες των server-side γλωσσών, όμως χάνουν σε δύναμη και απόδοση. Τα frameworks που διαχειρίζονται την παρουσίαση μιας σελίδας από τον browser προσφέρουν καλύτερη ανταπόκριση στα αιτήματα των χρηστών αν δεν εμπλέκουν τον server σ αυτό. Σ ένα μοντέλο που εμπλέκεται ο server μερικές ανταποκρίσεις μπορεί να αργές και επιπλέον δεν παρέχεται καμία υποστήριξη όταν ο server βρίσκεται εκτός λειτουργίας. Τα server driven frameworks χρησιμοποιούνται σε περιπτώσεις όπου δεν είναι εφικτή η ολοκληρωτική εκμετάλλευση των πλεονεκτημάτων μιας AJAX αρχιτεκτονικής ή η επικοινωνία με τον server είναι απαραίτητη έτσι και αλλιώς. -25-

34 3.2 Μερικά frameworks Σήμερα υπάρχουν πάνω από 100 frameworks που χρησιμοποιούνται για την ανάπτυξη δυναμικών web εφαρμογών και άλλων γενικότερων και πιο απλών λειτουργιών. Από αυτές παρουσιάζονται τέσσερις από τις πιο δημοφιλείς μια από τις οποίες θα αποτελέσει εργαλείο για την υλοποίηση του προγραμματιστικού κομματιού της εργασίας jquery Αναπτύχθηκε από την Google και μέσα σε 2 χρόνια έχει βρει μεγάλη απήχηση ιδιαίτερα σε μικρά project και σε open source web sites. Κυριότερος λόγος γι αυτήν την απήχηση είναι το μικρό μέγεθος της βιβλιοθήκης και το γεγονός ότι «λιγότερα γράφεις, περισσότερα υλοποιείς». Παρακάτω δίνεται πίνακας με τα κυριότερα πλεονεκτήματα και μειονεκτήματα της βιβλιοθήκης. Πίνακας 1: Πλεονεκτήματα/ Μειονεκτηματα jquery. ΠΛΕΟΝΕΚΤΗΜΑΤΑ Ελαφρύ JavaScript ΜΕΙΟΝΕΚΤΗΜΑΤΑ Για λόγους απλότητας δεν παρέχεται η δυνατότητα δημιουργίας εύρωστων χαρακτηριστικών. Drag/drop animation sortable Εύκολο και εύρωστο event handling Εύκολο συντακτικό XPath και CSS lookups Απλές AJAX λειτουργίες Μικρό μέγεθος βιβλιοθήκης (μόλις 50KB) Lightbox effect prototype.js Η εν λόγω βιβλιοθήκη μαζί με την προηγούμενη ειναι αυτές που χρησιμοποιούνται περισσότερο από τους developers. Η κύρια διαφορά τους είναι ότι η prototype.js διαθέτει χαρακτηριστικά που ευννοούν την διαμόρφωση καλύτερης λειτοργικότητας σε ένα site. Παρόλα αυτά, επειδή οι λειτουργίες AJAX διαθέτει είναι περιορισμένες -26-

35 χρησιμοποιεί ένα add-on (scriptaculous) για να επεκτείνει αυτές αλλά και διάφορες άλλες λειτουργίες. Το add-on με την σειρά του επιβαρύνει το εκάστοτε site με το μεγεθος του, το οποίο μεταβάλλεται ανάλογα με τις λειτουργίες που χρειάζεται το site). Ακολουθεί πίνακας με πλεονεκτήματα και μειονεκτήματα. Πίνακας 2: Πλεονεκτήματα/ Μειονεκτηματα prototype.js. ΠΛΕΟΝΕΚΤΗΜΑΤΑ Απλότητα στην χρήση AJAX Drag n Drop ΜΕΙΟΝΕΚΤΗΜΑΤΑ Περιορισμένα widgets Ανάλογα με τις λειτουργίες το μέγεθος της βιβλιοθήκης κυμαίνεται στα KB Visual effects (με χρήση sciptaculous ή άλλων add-ons) Event handling Widgets: auto complete, slider, text editors Google Web Toolkit (GWT) Ανήκει στην κατηγορία των indirect AJAX framework και διαθέτει πολλά χαρακτηριστικά και ενδιαφέρουσες λειτουργίες γεγονός που οδήγησε στην χρήση του σε πολύ μεγάλα project αντι του jquery. Μερικά από τα ενδιαφέροντα χαρακτηριστικά που διαθέτει είναι η δυνατότητα του προγραμματισμού πρώτα σε JAVA και στην συνέχεια η αυτόματη παραγωγή του JavaScript κώδικα, η συγγραφή κώδικα για τον client και για τον server και τέλος, η δυνατότητα για εμπλουτισμό ενός site με UI (user interface) components. Βέβαια σ αυτά που αναφέρθηκαν υπάρχουν πολλά πλεονεκτήματα κυρίως λόγω της χρήσης JAVA αλλά και πολλά μειονεκτήματα εξαιτίας αυτής. Πίνακας 2: Πλεονεκτήματα/ Μειονεκτηματα GWT. ΠΛΕΟΝΕΚΤΗΜΑΤΑ Απουσία συντακτικών λαθών σε JavaScript t Δυνατότητα χρήσης πολύπλοκων δομών της JAVA στον client Δυνατότητα αποστολής και λήψης στον server ΜΕΙΟΝΕΚΤΗΜΑΤΑ Δύσκολο στην εκμάθηση Τα περισσότερα AJAX περιβάλλοντα εκτελούν JavaScript t στον client και έχουν επιλογή για τον server. Οπότε αποτελεί πρόβλημα η αποκλειστική χρήση της JAVA. Ασταθής προσέγγιση στην επέκταση web- -27-

36 πολύπλοκων της JAVA. Δεν απαιτεί το στήσιμο server για δοκιμή κώδικα (standalone environment) servers βασισμένους σε JAVA. Ασταθής προσέγγιση στην ενσωμάτωση JavaScript. Ασυνήθιστη προσέγγιση σε σχέση με τα υπόλοιπα AJAX περιβάλλοντα Mootools Μια πολύ ελαφριά αλλά και πολύ πρόσφατη βιβλιοθήκη που είναι σε θέση να φέρει εις πέρας όλες τις απαραίτητες λειτουργίες AJAX που απαιτούνται από ένα site. Συγκεντρώνει χαρακτηριστικά που απαντώνται τόσο στις βιβλιοθήκες jquery και protype.js αλλά υστερεί στο ότι η χρήση της είναι ακόμη περιορισμένη και επομένως η συνολική γνώση γύρω από την βιβλιοθήκη είναι λίγη Επιλογή Από τα στοιχεία που έχουν παρουσιαστεί παραπάνω και σύμφωνα με την προσωπική κρίση του συγγραφέα καταλληλότερο framework για το προγραμματιστικό κομμάτι είναι η jquery αφού καταφέρνει να συγκεντρώσει εκείνα τα στοιχεία και χαρακτηριστικά που είναι απαραίτητα και χρήσιμα για την υλοποίηση του κώδικα. Συγκεκριμένα, τα στοιχεία που θεωρούνται απαραίτητα είναι η απλότητα στην χρήση, η ευρωστεία και η ευελιξία. 3.3 Η βιβλιοθήκη jquery Η βιβλιοθήκη jquery, όπως έχει ήδη αναφερθεί, είναι μία ελαφριά Javascript βιβλιοθήκη με κύριο σκοπό την αλληλεπίδραση μεταξύ Javascript και HTML. Εκδόθηκε τον Ιανουάριο του 2006 στην Νέα Υόρκη σ ένα διεθνές συνέδριο (BarCamp) από τον John Resig, χρησιμοποιείται ως plug-in και είναι open source Φιλοσοφία Όπως το CSS διαχωρίζει τα χαρακτηριστικά που αφορούν την απεικόνιση ενός εγγράφου HTML από την γενική δομή που το χαρακτηρίζει, έτσι και το jquery διαχωρίζει τα χαρακτηριστικά που αφορούν την συμπεριφορά του από αυτή την δομή. Για παράδειγμα, αντί για την χρησιμοποιήση ενός on-click event απευθείας στο πεδίο -28-

37 που δηλώνεται ένα κουμπί, μία σελίδα που χρησιμοποιεί jquery αρχικά αναγνωρίζει το κουμπί και στην συνέχεια καλεί την αντίστοιχη συνάρτηση που διαχειρίζεται το onclick event. Ο διαχωρισμός της συμπεριφοράς απο την δομή είναι επίσης γνωστή ως Unobtrusive JavaScript με κύριο χαρακτηριστικό την αποφυγή χρήσης inline κώδικα διατηρώντας το HTML έγγραφο ευανάγνωστο. Εικόνα 16: HTML με inline JavaScript Στην επόμενη εικόνα φαίνεται ο πιο επιθυμητός τρόπος συγγραφής JavaScript κώδικα. Εικόνα 17: Unobtrusive JavaScript Στην φιλοσοφία του jquery ανήκει και η συγγραφή κώδικα μικρού σε έκταση αλλά ικανού να φέρει εις πέρας πολλές λειτουργίες. Αυτό οφείλεται σε μεγάλο βαθμό στα αλυσιδωτά events (chainable events) που επιτρέπουν την εύρεση ενός στοιχείου και την εφαρμογή μιας σειράς λειτουργιών. Ένα παράδειγμα chaining αποτελεί η παρακάτω εντολή: $('#message2').fadein('slow').addclass('alert').html('validate your markup!'); Η οποία εφαρμόζει μία σειρά λειτουργιών σε οποιοδήποτε αντικείμενο του HTML εγγράφου που φέρει το αναγνωριστικό #message Χαρακτηριστικά Η βιβλιοθήκη jquery διεθέτει τα παρακάτω χαρακτηριστικά: -29-

38 Πρόσβαση στα διάφορα μέρη μιας σελίδας: χωρίς την χρήση μιας βιβλιοθήκης Javascript θα έπρεπε να γραφούν πολλές γραμμές κώδικα για την διάσχιση του δένδρου του DOM και τον εντοπισμό συγκεκριμένων στοιχείων της δομής του HTML έγγραφου Τροποποίηση της εμφάνισης μιας σελίδας: η χρήση CSS είναι μία δυνατή μέθοδος για τον καθορισμό του τρόπου που εμφανίζεται μια σελίδα, αλλά δεν είναι αρκετή όταν οι browsers δεν ακολουθούν τα ίδια πρότυπα. Η βιβλιοθήκη jquery διαθέτει μεθόδους για την γεφύρωση του χάσματος μεταξύ των διαφορετικών browsers παρέχοντας κοινά πρότυπα. Αλλαγή του περιεχομένου της σελίδας: δεν περιορίζεται απλά στην αλλαγή της εμφάνισης αλλά και στην μετατροπή του περιεχομένου. Η βιβλιοθήκη παρέχει μεθόδους για την αλλαγή του κειμένου, την εισαγωγή εικόνων ή την αντικατάσταση τους κ.ά. Ανταπόκριση στην αλληλεπίδραση του χρήστη με την σελίδα: παρέχεται η δυνατότητα ελέγχου δυναμικών event όταν αυτά συμβαίνουν. Προσθήκη animation σε μια σελίδα: η δημιουργία αλληλεπιδραστικών web εφαρμογών απαιτεί την χρήση animation. Εφαρμογή τεχνολογίας AJAX. Δημιουργία JavaScript plug-ins: που εξυπηρετούν κοινές ανάγκες ή ξεχωριστές ανάγκες ενός developer. Απλοποίηση κοινότοπων Javascript εργασιών: όπως για παράδειγμα επαναληπτικές διαδικασίες. Επεκτασιμότητα των χαρακτηριστικών. Επιλογή από τα στοιχεία του DOM Τα στοιχεία του DOM ξεχωρίζουν μέσα σ ένα html έγγραφο από το αναγνωριστικό (id) που τους αποδίδεται, την κλάση (class) στην οποία ανήκουν ή από το ίδιο το στοιχείο (π.χ. div, ul κ.λ.π. ). Η βιβλιοθήκη jquery δίνει την δυνατότητα εύρεσης των διάφορων στοιχείων του DOM βάσει των ιδιοτήτων τους αλλά και της ιεραρχίας τους μέσα στο έγγραφο. Έτσι, για παράδειγμα, η εντολή $('#main').html('validate your markup!') θα εντοπίσει το στοιχείο με το αναγνωριστικό main και αφού υπάρχει θα εφαρμόσει την λειτουργία html(), ενώ η εντολή $('#main > *').html('validate your markup!') θα -30-

39 εντοπίσει όλους τους απογόνους του στοιχείου με το αναγνωριστικό main και θα εφαρμόσει την λειτουργία html(). Η βιβλιοθήκη jquery δίνει επίσης την δυνατότητα εφαρμογής φίλτρων για την αναζήτηση στοιχείων με μεγαλύτερη ακρίβεια και πιο εξειδικευμένα. Υπάρχουν οι εξής κατηγορίες φίλτρων: Basic Filters, φιλτράρουν στοιχεία με απλές ιδιότητες όπως, για παράδειγμα, αν το στοιχείο είναι ο πρώτος απόγονος ενός στοιχείου μιας κλάσσης ($('#main: first ).html ('Validate your markup!')). Content Filters, φιλτράρουν με βάση το περιεχόμενο του στοιχείου για το αν περιέχουν συγκεκριμένο κείμενο, αν έχουν απογόνους ή γονεις ή αν έχουν ως απόγονο κάποιου συγκεκριμένου τύπου στοιχείο. Για παράδειγμα η έκφραση $('div:has(p) ) θα εντοπίσει όλα τα στοιχεία <div> που έχουν απογόνους του τύπου <p>. Visibility Filters, χρησιμοποιούνται δύο εντολές η :hidden και :visible όπου η πρώτη ελέγχει αν το στοιχείο είναι κρυμμένο και αντίστοιχα η δεύτερη αν είναι ορατό. Attribute Filters, εντοπίζουν στοιχεία τα οποία έχουν κάποιο συγκεκριμένο γνώρισμα (attribute) π.χ. id ή αυτό το γνώρισμα έχει την ίδια ή παρόμοια τιμή με την επιθυμητή. Για παράδειγμα, μια εναλλακτική έκφραση για την έκφραση $('#main') είναι η $('div[id= main ] ) εφόσον γνωρίζουμε ότι είναι τύπου div. Child Filters, αφορά την εύρεση στοιχείων που είναι απόγονοι άλλων και βασίζεται στις ιδιότητες τους ως απόγονοι (π.χ. είναι ο πρώτος ή ο μοναδικός απόγονος). Form Filters, εντοπίζει στοιχεία του τύπου φόρμας (form) με συγκεκριμένες ιδιότητες όπως αν έχουν επιλεγεί ή είναι ενεργοποιημένες. Διάσχιση του DOM και μετατροπή του Για την διάσχιση του DOM (Traversing)χρησιμοποιούνται συναρτήσεις που ως σκοπό έχουν τον περιορισμό του συνόλου των στοιχείων που προκύπτει από τους selectors. Οι συναρήσεις αυτές μπορούν να χωριστούν σε τρεις κατηγορίες: Filtering (φιλτραρίσματος), όπου το σύνολο των στοιχείων που επιλέγονται. Για παράδειγμα, η συναρτηση filter(expr) αφαιρεί από το σύνολο των επιλεχθέντων στοιχείων τα στοιχεία εκείνα που δεν -31-

40 ταιριάζουν με την δοθείσα έκφραση (expr). Συγκεκριμένα η εντολή $('div ).filter(.container ) ; εντοπίζει τα στοιχεία εκείνα τα οποία είναι <div> και φέρουν την κλάση container. Finding (εύρεσης), με βάση του στοιχείου που έχει ήδη επιλεχθεί σχηματίζεται ένα νέο σύνολο προς επεξεργασία. Μία τέτοια συνάρτηση είναι η children([expr]) (η έκφραση ως παράμετρος είναι προαιρετική) η οποία επιστρέφει όλους τους απογόνους ενός στοιχείου. Chaining, η κατηγορία αυτή περιλαμβάνει δύο συναρτήσεις την andself() που προσθέτει το προηγούμενο σύνολο στοιχείων στο νεό σύνολο και την end() η οποία αναιρεί την πιο πρόσφατη λειτουργία που εφαρμόστηκε στο επιλεχθέν σύνολο. Η ονομασία οφείλεται στο γεγονός ότι για να έχει νόημα η εφαρμογή αυτών των λειτουργιών πρέπει να χρησιμοποιηθούν αλυσιδωτά όπως φαίνεται στο παράδειγμα της εικόνας. Εικόνα 18: Παράδειγμα χρήσης andself(). Αφού έχει οριστεί το επιθυμητό σύνολο στοιχείων μπορεί να εφαρμοστεί ένα σύνολο από συναρτήσεις για την μετατροπή τους (Manipulation). Ανάλογα με το που στοχεύει η μετατροπή, οι συναρτήσεις αυτού του είδους χωρίζονται σε εφτά κατηγορίες: Αλλαγή περιεχομένου, στοχεύουν στην μετατροπή του περιεχομένου ενός συνόλου στοιχείων είτε αυτό πρόκειται για δεδομένα τύπου html είτε για κείμενο. Εισαγωγή δεδομένων στο εσωτερικό, η εισαγωγή δεδομένων αφορά δεδομένα τύπου html τα οποία με την σειρά τους μπορούν να εισαχθούν πριν ή μετα το κύριως περιεχόμενο (prepend και append αντίστοιχα). -32-

41 Εισαγωγή δεδομένων στο εξωτερικό, όπου τα δεδομένα (και πάλι τύπου html) εισάγονται πριν ή μετά το σύνολο στοιχείων (κάθε στοιχείο του συνόλου ξεχωριστά). Εισαγωγή δεδομένων γύρω από το στοιχείο, αυτού του είδους εισαγωγή είναι χρήσιμη για την εισαγωγή κάποιας δομής στο έγγραφο χώρις να καταστραγεί η αρχική δομή του. Μία τέτοια συνάρτηση είναι η wrap(html), η χρήση της οποίας φαίνεται στην εικόνα 26. Εικόνα 19: Εφαρμογή της wrap(html). Συγκεκριμένα, κάθε στοιχείο τύπου <p> περιβάλλεται από ένα <div> το οποίο με την σειρά του έχει ορισμένο style ({border: 2px solid blue;}). Οι υπόλοιπες συναρτήσεις της κατηγορίας ουσιαστικά είναι παραλλαγές της wrap και ικανοποιούν υποπεριπτώσεις. Αντικατάστασης/Αντιγραφής/Αφαίρεσης, το περιεχόμενο αντίστοιχα αντικαθιστάται με άλλα δεδομένα, αντιγράφεται (ώστε πιθανότατα να χρησιμοποιηθεί αλλού) ή αφαιρείται. Events και Effects Η διαχείριση των events γίνεται σύμφωνα με τα W3C πρότυπα ανεξαρτήτως του browser που χρησιμοποιείται. Μερικά από τα events που μπορεί να χειριστεί είναι η ολοκλήρωση της φόρτωσης του DOM στον φυλλομετρητή, το click και το doubleclick του ποντικιού, την κίνηση του ποντικιού πάνω από κάποιο στοιχείο (πάνω,κάτω κ.λ.π.) κ.ά. Η διαχείριση των events γίνεται με την χρήση συναρτήσεων και τον ορισμό μέσα σ αυτές callback συναρτήσεων για την εφαρμογή μιας σειράς βημάτων που επιθυμεί ο εκάστοτε προγραμματιστής να γίνουν όταν πραγματοποιηθεί το event. Αντίστοιχα, υποστηρίζεται η χρήση effects όπως η απόκρυψη ή εμφάνιση στοιχείων του DOM, η ολίσθησή τους ή ακόμα και η εφαρμογή fade in και fade out κ.ά. Σε όλα τα effects, η ταχύτητα με την οποία εφαρμόζονται (π.χ. πόσο γρήγορα εμφανίζεται ένα στοιχείο) αποτελεί επιλογή του προγραμματιστή. Τέλος, υπάρχει η δυνατότητα ο προγραμματιστής να δημιουργήσει το δικό του effect με βάση τις ανάγκες του. -33-

42 Χειρισμός CSS Μία σειρά συναρτήσεων επιτρέπουν την ανάκτηση τιμών του CSS που αφορούν ένα στοιχείο βάσει του ονόματος του πεδίου αλλά και την μετατροπή τους. Για παράδειγμα, η συνάρτηση height([val]) χωρίς την παράμετρο val επιστρέφει την τιμή του ύψους του στοιχείου (κυρίως για εικόνες) ενώ αν η παράμετρος έχει κάποια τιμή τότε αυτή αντικαθιστά την ήδη υπάρχουσα. Animations Εκτός από την απλή έκδοση του jquery (η πιο πρόσφατη είναι η 1.3.1) υπάρχει και ειδική έκδοση για τον χειρισμό των animations και visual effects. Τέτοια παραδείγματα είναι η λειτουργία drag/drop, η χρήση progress bar κ.ά. AJAX Οι λειτουργίες AJAX που υποστηρίζονται από την βιβλιοθήκη αφορούν την διεκπαιρέωση AJAX αιτημάτων, την ανίχνευση AJAX events και διάφορες άλλες λειτουργίες. Πιο αναλυτικά: AJAX requests, περιλαμβάνουν την φόρτωση απομακρυσμένου HTML αρχείου και εισαγωγή του στο DOM, φόρτωση απομακρυσμένης σελίδας χρησιμοποιώντας HTTP ή HTTP GET ή HTTP POST αίτημα, φόρτωση και εκτέλεση ενός τοπικού JavaScript αρχείου με HTTP GET αίτημα και, τέλος, φόρτωση JSON δεδομένων χρησιμοποιώντας HTTP GET αίτημα. Σαν παράδειγμα παρουσιάζεται η χρήση της συνάρτησης jquery.post(url, data, callback, type) που χρησιμοποιεί HTTP POST request: Εικόνα 20: Χρήση της jquery.post(). AJAX events, δίνουν την δυνατότητα της επισύναψης μίας callback συνάρτησης όταν ολοκληρωθεί ένα AJAX αίτημα, πριν αποσταλεί, όταν ξεκινήσει να εκτελείται (και κανένα άλλο), όταν ολοκληρωθεί επιτυχώς ή παρουσιάσει σφάλμα και όταν όλα τα AJAX αιτήματα έχουν σταματήσει. Διάφορα, όπως τον καθορισμό global ρυθμίσεων για τα AJAX αιτήματα ή την προεπεξεργασία των δεδομένων πριν την αποστολή τους στον server. -34-

43 JavaScript plug-ins Η συγγραφή δηλαδή κώδικα χρησιμοποιώντας τις λειτουργίες του jquery για την διεκπαιρέωση μιας γενικής λειτουργίας. Τελικός σκοπός είναι η χρήση αυτών των plugin από όποιον το επιθυμεί. Utilities Είναι βασικές και απαραίτητες λειτουργίες που έχουν σκοπό να κάνουν την ζωή του προγραμματιστή πιο εύκολη. Αυτές περιλαμβάνουν τον έλεγχο για τον τύπο, την έκδοση και των χαρακτηριστικών του browser, την εφαρμογή μεθόδων πάνω σε πίνακες και αντικείμενα, λειτουργίες ελέγχου και χειρισμό συμβολοσειρών. Αξίζει να αναφερθούμε στην λειτουργία each() που χρησιμοποίειται για την ανάγνωση πινάκων ή αντικειμένων που φέρουν ιδιότητες πινάκων (έχουν κάποιο μήκος). Η χρήση της φαίνεται στην επόμενη εικόνα (Εικόνα 21) όπου παρουσιάζεται ένα μικρό κομμάτι κώδικα που επιτελέι την εξής λειτουργία: κάθε νούμερο αποτυπώνεται ως λέξη και ως αριθμητικό. Εικόνα 21: Χρήση each(). Επεκτασιμότητα Η επεκτασιμότητα της βιβλιοθήκης οφείλεται κυρίως στην δυνατότητα συγγραφής plug-in για την διεκπαιρέωση πιο σύνθετων λειτουργιών από αυτές που ήδη προσφέρει και επιπλέον ο χρήστης ενός plug-in μπορεί να επεκτείνει την λειτουργία του ή να την -35-

44 διαφοροποιήσει ανάλογα με τις ανάγκες του μιας και αυτό συνοδεύεται μόνο από τον πηγαίο κώδικά του (και φυσικά παραδείγματα χρήσης του) Χρήση Η βιβλιοθήκη jquery υπάρχει ως ξεχωριστό JavaScript αρχείο και περιλαμβάνει όλες τις κοινές λειτουργίες που αφορούν το DOM, την AJAX τεχνολογία, τα Events και τα Effects. Για να είναι σε θέση μια ιστοσελίδα να χρησιμοποιήσει την βιβλιοθήκη πρέπει να συμπεριλάβει στον κωδικά της το ακόλουθο markup: Διαθέτει δύο τρόπους αλληλεπίδρασης: Εικόνα 22: jquery markup. Χρησιμοποιώντας την λειτουργία $, που είναι ένας γενικός τρόπος αναφοράς σε αντικείμενα jquery (ανάλογοι τρόποι χρησιμοποιούνται και σε άλλες αντικειμενοστραφείς γλώσσες). Οι συναρτήσεις που φέρουν το σύμβολο $ μπορούν να χρησιμοποιηθούν αλυσιδωτά με άλλες συναρτήσεις και επιστρέφουν ως τιμή ένα αντικείμενο jquery. Χρησιμοποιώντας συναρτήσεις με το πρόθεμα $. που αναφέρονται κυρίως σε utilities και όχι σε αντικείμενα jquery. Ένας τυπικός τρόπος για τον χειρισμό πολλαπλών αντικειμένων του DOM, είναι η χρήση συνάρτησης με το σύμβολο $ που καλείται από κάποιο string το οποίο αναφέρεται σε αντικείμενο του CSS. Για παράδειγμα η εντολή: $("div.test").add("p.quote").addclass("blue").slidedown("slow"); βρίσκει αρχικα το σύνολο όλων των div tags που έχουν την κλάση test, στην συνέχεια το σύνολο των p tags που υπάρχουν σ αυτό με την κλάσση quote, προσθέτει την κλάσση blue σε κάθε στοιχείο που έχει βρεθεί και τέλος τα παρουσιάζει με animation (slidedown). Οι μέθοδοι που καλούνται με το πρόθεμα $. χρησιμοποιούνται συνήθως για τον χειρισμό global ιδιοτήτων και συμπεριφορών του HTML εγγράφου. Για παράδειγμα, είναι εφικτό να γίνει χρήση της μεθόδου $.ajax για την πραγματοποίηση AJAX αιτημάτων με σκοπό την φόρτωση και τον χειρισμό απομακρυσμένων δεδομένων. -36-

45 Εικόνα 23: Χρήση της μεθόδου $.ajax Ο κώδικας της Εικόνας 23 παρουσιάζει ενδεικτκά την χρήση της μεθόδου $.ajax. Συγκεκριμένα, θα ζητηθεί το αρχείο some.php με παραμέτρους name= John και location= Boston και όταν όλα γίνουν επιτυχώς θα εκτυπωθεί η ανταπόκριση του αρχείου Παραδείγματα υλοποιήσεων Στην συνέχεια, αναφέρονται κάποια παραδείγματα υλοποιήσεων μικρών λειτουργιών με χρήση της βιβλιοθήκης jquery. Υλοποίηση ταξινόμησης πινάκων H ταξινόμηση πινάκων είναι από εκείνες τις λειτουργίες που εφαρμόζονται στα site χωρίς την χρήση Ajax. Μία λύση σ αυτό το πρόβλημα είναι η ταξινόμηση να γίνεται στον server ο οποίος θα επιστρέφει το αποτέλεσμα. Ο τρόπος που αυτό θα γίνεται περιγράφεται παρακάτω. Συχνά, τα δεδομένα των πινάκων προέρχονται από βάσεις δεδομένων, το οποίο σημαίνει οτι ο κώδικας που χρησιμοποιείται για την απόκτηση αυτών των δεδομένων μπορεί επίσης να χρησιμοποιηθεί για την ανάκτηση τους σε συγκεκριμένη σειρά (χρησιμοποιόντας, για παράδειγμα, τον όρο order by της MySQL γλώσσας). Λογικό είναι επομένως να χρησιμοποιηθεί κώδικας απευθυνόμενος στον server για την εκμετάλευση των δυνατοτήτων αυτής της γλώσσας. Η ταξινόμηση όμως, έχει νόημα και είναι χρήσιμη όταν ο χρήστης μπορεί να καθορίσει το είδος της. Ένας τρόπος για να επιτευχθεί αυτό είναι η διαμόρφωση των επικεφαλίδων των πεδίων ενός πίνακα σε συνδέσμους. Αυτοί οι σύνδεσμοι μπορούν να εισαχθούν στην παρούσα σελίδα και θα συνοδεύονται και από ένα string που θα αποτελεί και το ερώτημα της βάσης δεδομένων σύμφωνα με το οποίο θα πραγματοποιηθεί η ταξινόμηση στον server. -37-

46 Εικόνα 24: Κώδικας πίνακα με ενσωματωμένο το string της ερώτησης Η μέχρι τώρα υλοποίηση επιτρέπει την ταξινόμηση του πίνακα στον server αλλά έχει ως αποτέλεσμα την ανανέωση της σελίδας. Η ανανέωση της σελίδας μπορεί να αποφευχθεί χρησιμοποιόντας AJAX μεθόδους. Εικόνα 25: Επιπλέον συνάρτηση για την υλοποίηση χωρίς ανανέωση σελίδας. Μ αυτόν τον τρόπο οι σύνδεσμοι έχουν μετατραπεί σε AJAX αιτήματα που ενεργοποιούνται όταν ο χρήστης επιλέξει κάποιο σύνδεσμο. Επιλέγοντας έναν σύνδεσμο, αποστέλλεται ένα AJAX αίτημα στον server για τον ίδιο πίνακα χωρίς την υπόλοιπη σελίδα. Για παράδειγμα, επιλέγοντας τον σύνδεσμο που αναφέρεται στο πεδίο «date» του πίνακα αποστέλεται στον server το κατάλληλο string ( index.php?sort=date&type=ajax ) ώστε, αφενός, να γνωρίζει ο server με βάση ποιο πεδίο θα κάνει την ταξινόμηση (sort=date) και αφετέρου να επιστρέψει μόνο τον πίνακα. Αυτό γίνεται εισάγοντας στο string του ερωτήματος μία παράμετρο με την οποία ο server μπορεί να προσδιορίσει αν πρόκειται για AJAX αίτημα (type= ajax). Υλοποίηση αλλαγής σελίδας Το συγκεκριμένο πρόβλημα αναφέρθηκε επίσης στο 2 ο κεφάλαιο όπου σαν λύση του προβλήματος προτάθηκε να γίνει αίτηση στον server να αποστείλει μόνο την πληροφορία που είναι απαραίτητη, δηλαδή την επόμενη σελίδα. -38-

47 Γενικά, για να αλλάξει ο χρήστης την σελίδα που βλέπει το μόνο που έχει να κάνει είναι να επιλέξει έναν σύνδεσμο ο οποίος με την σειρά του ανακατευθύνει τον browser σε άλλη σελίδα. Χρησιμοποιώντας όμως αυτή την μέθοδο ανανεώνεται όλη η σελίδα. Εικόνα 26: Σύνδεσμοι που ανακατευθύνουν τον browser στις σελίδες. Αρχικά,για να μην ανανεώνεται η σελίδα πρέπει να γίνουν μικροαλλαγές στο περιεχόμενο των σελίδων των συνδέσμων ώστε να περιέχουν μόνο τις πληροφορίες σχετικά με τα προιόντα και όχι όλόκληρου του site. Στη συνέχεια, απαιτείται η χρήση της συνάρτησης load(url, [data], [callback]), όπου url είναι το url της html σελίδας που ζητείται, data είναι πληροφορίες που αποστέλλονται στον server (συνήθως ένα string) και callback είναι το όνομα της συνάρτησης αφού γίνει το ajax αίτημα. Γενικά, η συνάτηση χρησιμοποιείται για την εμφάνιση μίας σελίδας html ή php στην ήδη υπάρχουσα. Εικόνα 27: Η συνάρτηση που καλείται μετά το ajax αίτημα (#contentarea είναι το μέρος πάνω στην σελίδα που θα προβληθεί η νέα σελίδα) Η συνάρτηση που περιέχει την συνάρτηση load είναι η συνάρτηση που έχουμε δημιουργήσει και καλείται κάθε φορά που ο χρήστης επιλέγει κάποια σελίδα. Αυτή είναι η loadcontent(id) και παίρνει ως όρισμα ένα string που θα συμπληρώσει την διεύθυνση μέσα στην συνάρτηση load ώστε να αιτηθεί από τον server το κατάλληλο html αρχείο. -39-

48 -40- Εικόνα 28: Μετατροπή του κώδικα των συνδέσμων ώστε να καλείται η συνάρτηση loadcontent.

49 4 Ε-Shopping Ο όρος e-shopping (ή αλλιώς Online Shopping) αναφέρεται στην διαδικασία που ακολουθούν οι καταναλωτές για την αγορά προιόντων ή υπηρεσιών μέσω του Internet. Το e-shopping είναι μια μορφή ηλεκτρονικού εμπορίου που χρησιμοποιείται για business-to-business (B2B) και business-to-consumer (B2C) αυναλλαγές. 4.1 Ιστορία Η ιδέα του online shopping προηγήθηκε χρονικά από αυτήν του World Wide Web καθώς υπάρχουν πειράματα που έγιναν πιο νωρίς και αφορούσαν την πραγματοποίηση συναλλαγών μέσω μιας τηλεόρασης. Η τεχνολογία, βασισμένη στην Videotext τεχνολογία, πρωτοπαρουσιάστηκε το 1979 από τον Michael Aldrich, ο οποίος σχεδίασε και εγκατέστησε ανάλογα συστήματα στο Ηνωμένο Βασίλειο συμπεραλαμβανομένου και του πιλοτικού συστήματος Tesco το To 1990 o Tim Burners-Lee δημιουργεί τον πρώτο server και τον πρώτο browser για το World Wide Web. Το 1992 ο Charles Stack δημιουργεί το πρώτο online βιβλιοπωλείο, Book Stacks Unlimited (Books.com), δύο χρόνια πριν ο Jeff Bezos ξεκινήσει το γνωστό σε όλους Amazon. Το 1992 σημειώθηκαν πρόοδοι όπως το online banking και η δημιουργία online πιτσαρίας από την Pizza Hut και, τέλος, το 1995 το Amazon επεκτείνει την δραστηριότητα του και το 1996 το ebay κάνει την εμφάνισή του. 4.2 Πλεονεκτήματα και μειονεκτήματα Ακολουθούν τα πλεονεκτήματα και τα μειονεκτήματα που συνοδεύουν το e-shopping Ευχρηστία Τα online καταστήματα είναι διαθέσιμα 24 ώρες το 24ωρο και οι περισσότεροι καταναλωτές έχουν πρόσβαση στο Internet στον χώρο εργασίας τους αλλά και στο -41-

50 σπίτι. Η επίσκεψη σ ένα συμβατικό κατάστημα απαιτεί χρόνο και μπορεί να πραγματοποιηθεί μόνο σε ώρες λειτουργίας. Η αναζήτηση σ έναν online κατάλογο μπορεί να είναι γρηγορότερη από την αναζήτηση στους διαδρόμους ενός πραγματικού καταστήματος. Ίσως αυτό να μην ισχύει για τους χρήστες διαδικτύου με dial-up σύνδεση καθώς γι αυτούς απαιτούνται μεγαλύτεροι χρόνοι για την φόρτωση των σελίδων ειδικά εκείνων με πλούσιο οπτικό υλικό. Επομένως θα ήταν πιο βολικό για εκείνους να επισκεφθούν το κατάστημα. Μερικοί καταναλωτές προτιμούν την φυσική αλληλεπίδραση με ανθρώπους παρά με υπολογιστές και αυτό γιατί είτε βρίσκουν δύσκολη την χρήση υπολογιστή είτε το site σχεδιάστηκε με τέτοιο τρόπο που να μην είναι προσιτό και αξιόπιστο για τον μέσο χρήστη. Στις περισσότερες περιπτώσεις, το εμπόρευμα πρέπει να αποσταλεί στον καταναλωτή με αποτέλεσμα να περάσει κάποιο χρονικό διάστημα μέχρι αυτό να φτάσει στα χέρια του και επιπλέον στο μυαλό του υπάρχει η αβεβαιότητα για το αν υπήρχε απόθεμα όταν έγινε η αγορά. Βέβαια πολλά online καταστήματα δίνουν την δυνατότητα παραλαβής των προιόντων από κάποιο τοπικό τους κατάστημα και τις περισσότερες φορές ενημερώνουν τον αγοραστή για το χρονικό διάστημα που απαιτείται για την αποστολή. Επίσης, φροντίζουν να προμηθεύουν τον αγοραστή με έναν ειδικό αριθμό με τον οποίο μπορεί να ελέγξει την κατάσταση της αποστολής από το site της εταιρείας που έχει την έχει αναλάβει. Για λόγους αποδοτικότητας, τα online καταστήματα δεν αποστέλλουν αμέσως τις παραγγελίες αλλά σε ώρες που οι αποθήκες τους λειτουργούν και μόνο αν υπάρχει απόθεμα. Αν δεν υπάρχει απόθεμα, ενημερώνουν τον αγοραστή για την έλλειψη, για την πιθανότητα ανανέωσης του και τον χρόνο που αυτό θα πάρει. Σε περίπτωση που προκύψει πρόβλημα με το εμπόρευμα, όπως λάθος εμπόρευμα ή δεν είναι σύμφωνα με τις προσδοκίες του αγοραστή, υπάρχει η δυνατότητα επιστροφής του και ανταλλαγής του ή επιστροφή των χρημάτων. Αυτό που έχει σημασία για τους κταναλωτές είναι η πολιτική που ακολουθεί για την επιστροφή του προιόντος, αν δηλαδή χρεώνει τα έξοδα αποστολής ή όχι, και πόσο σύντομα γίνεται η επιστροφή των χρημάτων Πληροφορίες και αξιολόγηση Τα online καταστήματα θα πρέπει να παρέχουν πληροφορίες για τα προιόντα με κείμενο, φωτογραφίες και με διάφορους πολυμεσικούς τρόπους ενώ στο πραγματικό -42-

51 κατάστημα το προιόν θα είναι διαθέσιμο για να το επιθεωρήσει μόνος του ο κταταναλωτής. Πολλά οnline καταστήματα παρέχουν συμπληρωματικές πληροφορίες για ένα προιόν όπως οδηγίες, διαδικασίες ασφάλειας, επιδείξεις χρήσης ή τις προδιαγραφές του κατασκευαστή. Μερικά δίνουν την δυνατότητα στους αγοραστές να βαθμολογήσουν ή να αφήσουν κάποιο σχόλιο για ένα προιόν. Βέβαια, υπάρχουν site που αναλαμβάνουν την φιλοξενία αξιολογήσεων διάφορων προιόντωνσ. Στα συμβατικά καταστήματα υπάρχει ένας ή περισσότεροι υπάλληλοι που είναι διατεθειμένοι να εξυπηρετήσουν τους υποψήφιους αγοραστές και να απαντήσουν σε κάθε τους ερώτηση σχετικά με κάποιο προιόν. Παρόλα αυτά, υπάρχουν site που προσφέρουν υπηρεσίες chat σε πραγματικό χρόνο, αλλά τα περισσότερα βασίζονται στην απάντηση των ερωτήσεων μέσω ή τηλεφώνου Ασφάλεια Δεδομένου της αδυναμίας ελέγχου του εμπορεύματος από τον αγοραστή πριν την αγορά του, είναι μεγαλύτερη η πιθανότητα απάτης από την μεριά του εμπόρου απ ότι στο κατάστημα. Από την μεριά του ο έμπορος αντιμετωπίζει την πιθανότητα μιας αγοράς με χρήση κλεμμένης πιστωτικής κάρτας ή την ακύρωση μιας online αγοράς με δόλιο σκοπό. Σ ένα κανονικό κατάστημα οι κίνδυνοι αυτοί δεν υπάρχουν. Το πρωτόκολλο SSL (Secure Sockets Layer) κατάφερε γενικά να λύσει το πρόβλημα της υποκλοπής του αριθμού μιας πιστωτικής κάρτας κατά την διάρκεια μιας συναλλαγής, αλλά το πρόβλημα της κλοπής των στοιχείων ενός ατόμου (όνομα, διεύθυνση, αριθμός πιστωτικής κάρτας κ.λ.π. ) από το site ενός εμπόρου παραμένει η μεγαλύτερη έγνοια των καταναλωτών. Από το 2000 και μετά, όπου σημειώθηκαν πολλά τέτοια κρούσματα, η ασφάλεια απασχολεί περισσότερο τους εμπόρους που είναι ιδιοκτήτες online καταστημάτων και τους παρόχους υπηρεσιών e-commerce και γι αυτό ως μέτρα για την προστασία των δικτύων τους αποτελούν τα firewalls και τα anti-virus λογισμικά. Το phishing είναι ένας άλλος κίνδυνος, όπου ο καταναλωτής ενώ πιστεύει ότι πραγματοποιεί δοσοληψίες με κάποιον έμπορο, στην πραγματικότητα, αυτές οι δοσολοψίες γίνονται με κάποιον κακόβουλο που σαν σκοπό έχει την άντληση προσωπικών δεδομένων. Από την άλλη, οι δοσοληψίες με ένα αυτοματοποιημένο σύστημα αντί με έναν αριθμό από υπαλλήλους επιταχύνει τις διαδικασίες και μειώνει -43-

52 τις πιθανότητες εκμετάλλευσης των προσωπικών δεδομένων από κάποιον υπάλληλο. Οι επιθέσεις άρνησης υπηρεσίας (denial attack service) αποτελούν πολυ μικρό ρίσκο για τους εμπόρους, όπως επίσης οι διακοπή λειτουργίας του server και του δικτύου. Γενικά, υπάρχουν πολλοί τρόποι ώστε οι καταναλωτές που ψωνίζουν από online καταστήματα αυτό να γίνεται με ασφάλεια. Ένας από αυτούς, είναι η υιοθέτηση συμβόλων που θα πιστοποιούν την αξιοπιστία ενός e-shop και θα αποδίδονται από κάποιον φορέα. Η ασφάλεια των καταναλωτών εξαρτάται όμως από τους ίδιους, γι αυτό θα πρέπει να ακολουθούν μερικούς γενικούς κανόνες, όπως για παράδειγμα η αγορά μόνο από ευϋπόληπτα online καταστήματα Προσωπικά δεδομένα Η διαφύλαξη των προσωπικών δεδομένων είναι η κυριότερη έγνοια των περισσότερων καταναλωτών που κάνουν αγορές από online καταστήματα. Αυτό που προσπαθούν να αποφύγουν είναι τα spam s και η αποστολή καταλόγων στην διεύθυνση κατοικίας. Οι περισσότερες επιχειρίσεις που ζητούν από τους αγοραστές προσωπικά στοιχεία υπόσχονται να μην τα χρησιμοποιήσουν γι αυτό τον σκοπό ή διαθέτουν μηχανισμό που δίνει την δυνατότητα επιλογής στον καταναλωτή πάνω στο θέμα. 4.3 Design Η ύπαρξη των online καταστημάτων δικαιολογείται τόσο για την ευκολία που παρέχουν στους καταναλωτές, την μεγαλύτερη ποικιλία σε προιόντα, τις ανταγωνιστικές τιμές και δυνατότητα πρόσβασης σε μεγαλύτερος εύρος πληροφορίας αλλά και στην αύξηση του customer value και το μεγαλύτερο κέρδος που προσφέρουν στους ιδιοκτήτες. Τέτοιου είδους πλεονεκτήματα καθιστούν απαραίτητητο τον σωστό σχεδιασμό ενός τέτοιου site σε πολλά επίπεδα Φόρτος πληροφορίας Οι Mehrabian και Russel (1974) εισήγαγαν την έννοια του φόρτου πληροφορίας ως τις σύνθετες χωρικές και χρονικές διατάξεις των ερεθισμάτων μέσα σ ένα περιβάλλον. Η έννοια του φόρτου εργασίας σχετίζεται με τα site online αγορών ως προς το πόση πληροφορία «αντέχουν» οι καταναλωτές μιας και τα site αυτά διαθέτουν μεγάλη ποσότητα πληροφορίας (συγκρίσεις, χαρακτηριστικά προιόντων, εναλλακτικά προιόντα κ.λ.π. ). -44-

53 Τα εικονικά περιβάλλοντα αγοράς μπορούν να ποικίλουν ως προς τον βαθμό και στα χαρακτηριστικά του φόρτου πληροφορίας που διαθέτουν. Τα χαρακτηριστικά αυτά εμπεριέχουν πολλές έννοιες, δύο όμως έχουν αναγνωριστεί ως οι κύριες: η πολυπλοκότητα και η καινοτομία. Η πολυπλοκότητα αναφέρεται στα διαφορετικά στοιχεία και χαρακτηριστικά γνωρίσματα ενός site που μπορεί να είναι αποτέλεσμα μεγάλης ποικιλίας πληροφοριών. Η καινοτομία αναφέρεται στις απρόσμενες και στις μη γνώριμες πτυχές ενός site. Από έρευνα του M. Huang (2000) προέκυψε ότι η καινοτόμα διάσταση της πληροφορίας που πρόσφεραν ορισμένα site αύξαναν την περιέργεια των καταναλωτών και περνούσαν περισσότερο χρόνο εξερευνόντας το site, ενώ η πολυπλοκότητα της πληροφορίας που πρόσφεραν κάποια άλλα μείωναν το ποσοστό των αυθόρμητων αγορών Οι προσδοκίες των καταναλωτών Η κύρια ιδέα της online αγοράς δεν είναι η δημιουργία ενός απλά όμορφου site που θα συμπεριληφθεί σε πολλές μηχανές αναζήτησης, ούτε η διάδοση πληροφοριών για λόγους marketing. Οι περισσότεροι οργανισμοί που ξεκινούν την δημιουργία ενός τέτοιου site προσπαθούν να υιοθετήσουν τεχνικές online shopping χωρίς να τις κατανοούν και χωρίς κάποιο συγκεκριμένο επιχειριματικό μοντέλο. Θα πρέπει τα site που δημιουργούν αυτοί οι οργανισμοί να επικεντρώνονται στην εκπλήρωση των προσδοκιών των καταναλωτών παρά στην ενίσχυση και την υποστήριξη του ονόματος της επιχείρισης. Πολλές έρευνες έχουν δείξει ότι η μοναδικότητα των websites έχει αρχίσει να εκλίπει και η ανάγκη για site σχεδιασμένα με κέντρο τις ανάγκες των χρηστών είναι σημαντική. Επομένως οι εταιρείες θα πρέπει να λαμβάνουν υπόψην τους θέματα όπως την κατανόηση των «θέλω» και των αναγκών των καταναλωτών, την ανταπόκριση σε υποσχέσεις και να μην μένουν ποτέ πίσω στις εξελίξεις (περί design) ώστε να δίνουν λόγους στον καταναλωτή να επιστρέφει στο site. Απαραίτητα στοιχεία για την επιστροφή των χρηστών σ ένα site είναι και η ευκολία της χρήσης του αλλά και η παρουσία χαρακτηριστικών φιλικών προς σ αυτόν. 4.4 Ε-Shopping και AJAX Το e-shopping γενικά, έχει να προσφέρει πολλά οφέλη τόσο για τον καταναλωτή όσο και για τον ίδιο τον έμπορο. Από την μεριά του καταναλωτή, προσφέρει την ευκολία -45-

54 στην πρόσβαση των υπηρεσιών από τον σπίτι του, την επιτάχυνση των διαδικασιών και τα χαμηλότερα κόστη σε σύγκριση με τα πραγματικά καταστήματα. Από την μεριά του εμπόρου, το κυριότερο πλεονέκτημα είναι το μεγαλύτερο κέρδος λόγω της απουσίας των εξόδων που χαρακτηρίζουν ένα συμβατικό κατάστημα. Το ενδιαφέρον που έχει δείξει τα τελευταία χρόνια το καταναλωτικό κοινό στο e- shopping έχει ωθήσει εμπόρους και εταιρείες στην λήψη μέτρων για την προσέλκυση ακόμα μεγαλύτερου κοινού και την καλύτερη εξυπηρέτηση του. Για την προσέλκυση κοινού, πέρα από διαφημιστικές καμπάνιες στο internet, προσωπικά για ενημέρωση και την απόδοση προσφορών σε μέλη, δεν υπάρχουν πολλά που μπορούν να γίνουν. Όσων αφορά την καλύτερη εξυπηρέτηση, αυτή περιορίζεται μόνο από την φαντασία των developer. Τα περισσότερα online καταστήματα έχουν ενσωματώσει στην ιστοσελίδα τους λειτουργίες και εφαρμογές που βελτιώνουν την πλοήγηση τους και την λειτουργικότητά τους. Η βελτίωση που επιφέρουν αυτές οι λειτουργίες όμως περιορίζεται μέχρι ένα σημείο καθώς για την υλοποίηση τους χρησιμοποιήθηκαν παραδοσιακές μέθοδοι και πρακτικές. Πιο συγκεκριμένα, χρησιμοποιούν το κλασσικό μοντέλο (παρουσιάστηκε στην ενότητα 2.4.1) όπου τα HTTP αιτήματα ικανοποιούνται από τον server με την αποστολή μιας ολόκληρης HTML σελίδας. Αντίθετα με την χρήση τεχνολογίας AJAX, το site αποκτά όλα τα πλεονεκτήματα που έχουν ήδη αναφερθεί (κεφάλαιο 2) αναμεσά τους και η βελτίωση της λειτουργικότητας του. Ακολουθούν μερικά παραδείγματα λειτουργιών που προσφέρουν τα διάφορα site με online αγορές χωρίς την χρήση της τεχνολογίας AJAX Λίστα σύγκρισης Πρώτο παράδειγμα είναι η δυνατότητα επιλογής διάφορων προιόντων ενός είδους (π.χ. φορητοί υπολογιστές) για την σύγκριση των χαρακτηριστικών τους, ώστε ο αγοραστής να έχει μια πιο ολοκληρωμένη άποψη για αυτό που θέλει να αγοράσει. Τα προιόντα αυτά αποθηκεύονται σ ένα «καλάθι» και σε κάποιο άλλο σημείο γίνεται η σύγκριση. Η λειτουργία αυτή παρουσιάζεται παρακάτω με εικόνες για καλύτερη κατανόηση. -46-

55 Εικόνα 1: Επιλογή προιόντων Στην παραπάνω εικόνα ο χρήστης έχει επιλέξει δύο προιόντα που τον ενδιαφέρουν ώστε να γίνει η μεταξύ τους σύγκριση. Κάθε φορά που ο χρήστης επιλέγει ένα προιόν αυτό προστίθεται σε μία λίστα και με κάθε επιλογή που κάνει η σελίδα ανανεώνεται. Ανάλογα γίνεται και με την αφαίρεση ενός προιόντος από την λίστα. Για να ξεκαθαριστούν λίγο τα πράγματα, η λίστα αυτή έχει την μορφή που φαίνεται στην Εικόνα 25 και εμφανίζεται σε κάποιο σημείο της σελίδας επίσης μετά από ανανέωση. Εικόνα 29: Λίστα σύγκρισης Για την ολοκλήρωση της διαδικασίας ο χρήστης κλικάρει το εικονίδιο που υπάρχει πάνω στην λίστα και ανακατευθύνεται σε μία νέα σελίδα όπου γίνεται η σύγκριση των προιόντων. Αυτό θα μπορούσε να αποφευχθεί χρησιμοποιόντας διαφορετικές μεθόδους κάνοντας το περιβάλλον πιο φιλικό προς τον χρήστη και πιο εύκολο στην πλοήγηση. Η χρήση λοιπόν της τεχνολογίας AJAX θα μπορούσε να αλλάξει δραστικά τον τρόπο που υλοποιείται η εφαρμογή. -47-

56 4.4.2 Αναζήτηση με λίστα Άλλο παράδειγμα αποτελεί η επιλογή του χρήστη να δει συγκεκριμένα προιόντα π.χ. συγκεκριμένης μάρκας και συγκεκριμένου τύπου. Στο site χρησιμοποιείται μία λίστα στην οποία αποθηκεύονται οι επιλογές του χρήστη και στην συνέχεια, βασει των επιλογών, εμφανίζονται τα κατάλληλα προιόντα στον browser. Ουσιαστικά, πρόκειται για μία αναζήτηση που γίνεται στο site αλλά πραγματοποιείται στον server. Η μορφή της λίστας είναι ανάλογη με την προηγούμενη, δηλαδή δίνεται πάλι η δυνατότητα να προστεθούν επιπλέον στοιχεία για αναζήτηση αλλά και να διαγραφούν. Εικόνα 30: Λίστα με επιλογές Εικόνα 31: Επιλογές Η όλη διαδικασία γίνεται με ανανέωση της σελιδας και είναι εύκολα αντιληπτό το πόσο κουραστικό είναι για τον χρήστη να ανανεώνεται η σελίδα με κάθε νέα επιλογή. Μια εύκολη λύση είναι να ζητηθεί από τον server μέσω ενός αιτήματος AJAX η -48-

57 αποστολή μόνο των στοιχείων που ενδιαφέρεται ο χρήστης (σύμφωνα με τις επιλογές του) Αλλαγή κατηγορίας προιόντος Άλλο παράδειγμα, που φέρει ομοιότητες με το προηγούμενο, είναι η επιλογή του χρήστη να εμφανιστούν τα προιόντα μίας συγκεκριμένης κατηγορίας από αυτές του site. Για παράδειγμα, ενώ ο χρήστης βλέπει τα διαθέσιμα προιόντα μιας κατηγορίας (π.χ. υπολογιστές χειρός) και αποφασίζει να δει μιας άλλης κατηγορίας (π.χ. φορητοί υπολογιστές), κάνοντας την κατάλληλη επιλογή από το μενού γίνεται ανανέωση όλης της σελίδας ώστε να εμφανιστούν τα νέα προιόντα, ενώ, θα μπορούσε να ζητηθεί από τον server μόνο η λίστα με τα απαραίτητα προιόντα. Επιπλέον, όπως συνηθίζεται στα περισσότερα online καταστήματα, επιλέγοντας μια κατηγορία εμφανίζονται υποκατηγορίες όπου και αν υπάρχουν. Αυτό θα μπορούσε να υλοποιηθεί με τεχνολογία AJAX σε συνδυασμό με τις δυνατότητες που προσφέρει η βιβλιοθήκη jquery σχετικά με την διάσχιση και μετατροπή του DOM Ταξινόμηση αποτελεσμάτων Πολλά site δίνουν την δυνατότητα ύστερα από την επιλογή κάποιας κατηγορίας προιόντων ή ύστερα από αναζήτηση, να οργανώσει ο χρήστης τα αποτελέσματα με διάφορα κριτήρια όπως για παράδειγμα η τιμή. Η οργάνωση αυτή γίνεται στον server οποίος επιστρέφει τα κατάλληλα αποτελέσματα στον browser του χρήστη με ανανέωση της σελίδας. Θα μπορούσε η οργάνωση (ή καλύτερα ταξινόμηση) να γίνεται πάλη στον server με την διαφορά ότι το αίτημα να γίνεται στο background χωρίς να το καταλαβαίνει ο χρήστης και τα αποτελέσματα να επιστρέφονται με τμηματική και όχι ολοκληρωτική ανανέωση της σελίδας. Στην Εικόνα 28 παρουσιάζεται ενδεικτικοί τρόποι ταξινόμησης και συγκεριμένα με βάση την τιμή, την απήχηση και την βαθμολογία που έχουν αφήσει χρήστες που έχουν ήδη αγοράσει το προιόν. Οι τρόποι αυτοί είναι μεν ενδεικτικοί αλλά είναι και οι πιο συχνα απαντώμενοι. -49-

58 Εικόνα 32: Επιλογές οργάνωσης αποτελεσμάτων Σελίδες αποτελεσμάτων Τα αποτελέσματα που δίνει το site, είτε μετά από αναζήτηση είτε μετά από κατάλληλη επιλογή στο μενού, είναι συνήθως περισσότερα του ενός και πολλές φορές τόσα ώστε να μην είναι δυνατή η τύπωσή τους στον browser του χρήστη σε μία μόνο σελίδα. Επομένως, για να δει ο χρήστης όλα τα αποτελέσματα πρέπει να δει και όλες τις σελίδες, κάτι που μπορεί να αποβεί χρονοβόρο αν το site δεν χρησιμοποιεί AJAX, καθώς θα πρέπει κάθε φορά να απαιτέτια και ανανέωση της σελίδας. Αντίθετα, όπως και στις προηγούμενες περιπτώσεις, θα μπορούσε να ζητηθεί από τον server η απαραίτητη πληροφορία μεμονωμένα. -50-

59 Εικόνα 33: Σελίδες αποτελεσμάτων Καλάθι αγορών Για να αγοράσει ο καταναλωτής ένα προιόν από ένα online κατάστημα, ένα από τα βήματα που πρέπει να ακολουθήσει είναι η προσθήκη του προιόντος σ ένα ψηφιακό καλάθι αγορών. Αφού επιλέξει το προιόν ή τα προιόντα που επιθυμεί και τα βάλει στο καλάθι, μπορεί να αποφασίσει αν θα τ αγοράσει ή όχι. Εικόνα 34: Τυπικό καλάθι αγορών Κάθε φορά που ο χρήστης επιλέγει να βάλει ένα προιόν στο καλάθι των αγορών του, η σελίδα ενημερώνει το session του στον server ο οποίος με την σειρά του απαντάει με την αποστολή της ανανεωμένης μορφής της σελίδας. Η μόνη διαφορά της παλιάς μορφής της σελίδας με την καινούρια είναι το καλάθι αγορών, το οποίο τώρα εμφανίζεται να περιέχει το νέο προιόν. Είναι εμφάνες ότι όλη αυτή η διαδικασία, δεν αξίζει την ανανέωση όλης της σελίδας για ένα τόσο μικρό μέγεθος πληροφοριών. -51-

60 Η χρήση της τεχνολογίας AJAX μπορεί να απλοποιήσει την όλη διαδικασία που περιγράφηκε παραπάνω. Συγκεκριμένα, οι πληροφορίες που χρειάζεται ο server για να ενημερώσει το session του χρήστη μπορούν να αποσταλούν ασύγχρονα με ένα AJAX αίτημα, ενώ η ανανεωμένη σελιδα μπορει να προκύψει με την ασύγχρονη αλλαγή του περιεχόμενου του DOM. -52-

61 5 Easy Shopper Tools: AJAX πρόσθετα για το e-shopping Στο προηγούμενο κεφάλαιο, παρουσιάστηκαν λειτουργίες online καταστημάτων που δεν υλοποιούνται με την χρήση τεχνολογιας AJAX. Όλες αυτές οι λειτουργίες, θα έλεγε κανείς ότι αποτελούν την βάση των site που δραστηριοποιούνται στο online shopping μιας και είναι οι λειτουργίες που απαντώνται πιο συχνά. Επομένως, η δημιουργία μιας βιβλιοθήκης που θα υλοποιεί τις λειτουργίες αυτές με AJAX θα έβρισκε μεγάλη απήχηση και θα έδινε ένα πρότυπο κατασκευής site αυτού του είδους. Τα Easy Shopper Tools δημιουργήθηκαν γι αυτόν ακριβώς τον λόγο και υλοποιεί όλες τις παραπάνω λειτουργίες. Τα Easy Shopper Tools υλοποιήθηκαν με την χρήση της βιβλιοθήκης jquery και αποτελειται συνολικά από πέντε plug-ins. Αυτά τα πέντε plug-ins είναι το shopping cart plug-in, το comparison list plug-in, το sorting plug-in, το menu plug-in. Όλα τα plugins, για την εφαρμογή τους απαιτούν μία βάση δεδομένων με όλες τις απαράιτητες πληροφορίες πάνω σε κάθε προιόν. Κάθε online shop, όπως είναι γνωστό, διαθέτει μια τέτοια βάση δεδομένων με πληροφορίες όπως τιμή, τίτλο προιόντος κ.τ.λ.π. Στον server των site που ενδεχομένως να εφαρμοσθούν τα plug-ins είναι απαραίτητη η ύπαρξη αρχείων php που θα αναλάβουν την διεκπαιρέωση λειτουργιών και την επιστροφή αποτελεσμάτων είτε με την μορφή HTML ή με κάποια άλλη μορφή αναλόγως την περίπτωση. 5.1 Sorting plug-in Το plug-in με την ονομασία sorting-plugin.js υλοποιεί την λειτουργία της ταξινόμησης των προιόντων σύμφωνα με κάποιο χαρακτηριστικό τους (π.χ. τιμή). Η ταξινόμηση γίνεται στον server με το σωστό ερώτημα (query) στην βάση δεδομένων. Η διαμόρφωση του ερωτήματος γίνεται όταν ο χρήστης κάνει μια επιλογή για ταξινόμηση. Για παράδειγμα, όταν ο χρήστης επιλέξει την ταξινόμηση με βάση την τιμή τότε αποστέλλεται στον server ένα string που περιέχει την επιλογή μαζί με την κατηγορία των προιόντων που βλέπει. -53-

62 Στις δυνατότητες του plug-in συγκαταλέγονται και η ταξινόμηση των αποτελεσμάτων που ο συνολικός αριθμός τους ξεπερνούν την μία σελίδα και η επιλογή νέας ταξινόμησης χωρίς την ανακατεύθυνση του χρήστη στην πρώτη σελίδα των προιόντων. Έτσι, για παράδειγμα, αν τα προιόντα μιας κατηγορίας εκτείνονται σε περισσότερες από μια σελίδες και ο χρήστης βλέπει εκείνα που βρίσκονται στην Τρίτη σελίδα, τότε αν κάνει επιλογή για νέα ταξινόμηση τα αποτελέσματα που θα του επιστραφούν θα είναι ανάλογα της σελίδας που βρίσκεται και αν επιλέξει να αλλάξει σελίδα τότε στην νέα σελίδα θα συνεχίσει να βλέπει τα προιόντα ταξινομημένα. Για να είναι σε θέση να χρησιμοποιηθεί σε μια σελίδα πρέπει να εισαχθούν στον κώδικά της οι γραμμές της Εικόνας 31. Όπου με την πρώτη σειρά δηλώνεται η χρήση της βιβλιοθήκης jquery και με την δεύτερη η χρήση του plug-in. Εικόνα 35: Απαραίτητα includes. Το μόνο που μένει είναι η χρήση κατάλληλων εντολών javascript για την ενεργοποίηση του plug-in. Ουσιαστικά πρόκειται για μια συνάρτηση με δύο εντολές που εκτελούνται όταν ολοκληρωθεί η φόρτωση της σελίδας στον browser. Οι δύο αυτές εντολές καλούν το plug-in για διαφορετικούς λόγους, η πρώτη για να γίνει η ταξινόμηση στον server και η δεύτερη για την επιστροφή των υπόλοιπων προιόντων που βρίσκονται σε άλλες σελίδες (σε περίπτωση που ο συνολικός αριθμός τους είναι μεγαλύτερος και δεν χωρούν σε μία σελίδα στον browser). Εικόνα 36: Ενεργοποίηση plug-in. Η πρώτη εντολή επισυνάπτει στο στοιχείο του DOM που έχει τα κατάλληλα links για την ταξινόμηση ένα click event, το οποίο όταν πραγματοποιηθεί καλείται μια συνάρτηση. Η συνάρτηση αυτή είναι μια κλήση στο ίδιο το plug-in με μερικές απαραίτητες παραμέτρους. Στην δεύτερη εντολή τα πραγματα λειτουργούν με τον ίδιο τρόπο με την διαφορά ότι το event επισυνάπτεται στο στοιχείο εκείνο που περιέχει τα -54-

63 links της μετάβασης σε άλλη σελίδα αποτελεσμάτων. Οι παράμετροι των συναρτήσεων του plug-in και στις δύο περιπτώσεις είναι οι παρακάτω: $( product-viewing ), αντικείμενο με την χαρακτηριστική κλάση ή το μοναδικό αναγνωριστικό που χρησιμοποιείται για να μαρκάρεται η κατηγορία των προιόντων που βλέπει ο χρήστης. Χρησιμοποιείται για το ερώτημα στην βάση δεδομένων. $( main-content ), αντικείμενο με την χαρακτηριστική κλάση ή το μοναδικό αναγνωριστικό του στοιχείου του DOM στο οποίο εμφανίζεται το κυρίως περιεχόμενο (στην περίπτωση μας τα προιόντα) του site. Απαιτείται για την απεικόνιση των αποτελεσμάτων που επιστρέφει το plug-in. pagearea, η κλάση ή το αναγνωριστικό του στοιχείου του DOM που περιέχει τα links για την αλλαγή σελίδας. sorting.php string με το όνομα του αρχείου php αποστέλλονται τα δεδομένα από το plug-in. Ένα σημαντικό µέρος του έργου που επιτελεί το plug-in γίνεται από ένα κατάλληλα διαμορφωμένο php αρχείο. Το πως θα διαμορφωθεί αυτό το αρχείο εξαρτάται από τον developer του εκάστοτε site. Για την διαμόρφωση όμως του php αρχείου πρέπει να ληφθούν υπόψην κάποια απαραίτητα στοιχεία τα οποία θα συνεισφέρουν στην αποτελεσματική χρήση του plug-in. Το εν λόγω plug-in σε διάφορα σημεία του κώδικά του επικοινωνεί με τον server αποστέλλοντας δεδομένα χρησιμοποιώντας την συνάρτηση $.post() της βιβλιοθήκης jquery. Σ όλες τις περιπτώσεις οι μεταβλητές που αποστέλλονται από την συνάρτηση μαζί με τις τιμές τους είναι η product, η orderby και η page. Από την ονομασία και μόνο δημιουργείται μια ξεκάθαρη εικόνα για το περιεχόμενο αυτών των μεταβλητών. Το σημαντικό είναι ότι το php αρχείο που θα χρησιμοποιηθεί πρέπει να σχηματίζει ένα query ανάλογα με τις τιμές των μεταβλητών για την ανάκτηση των δεδομένων από την βάση δεδομένων με τον επιθυμητό τρόπο. Απαραίτητο είναι επίσης είναι να επιστρέφονται τα αποτελέσματα με τον κατάλληλο τρόπο. Στην συγκεκριμένη περίπτωση, απαιτείται η εισαγωγή των αποτελεσμάτων σ ένα κομμάτι κώδικα HTML διαμορφωμένου έτσι ώστε να φαίνεται σωστά στον browser όταν το plug-in θα το χρησιμοποιήσει για την αντικατάσταση του κυρίως περιεχομένου. -55-

64 Τέλος, αξίζει να αναφερθεί ότι το plug-in υλοποιεί την ταξινόμηση με βάση την τιμή και την βαθμολόγηση των προιόντων και ότι η μεταβλητή orderby παίρνει συγκεκριμένες τιμές οι οποίες είναι: PriceASC, PriceDESC, RateDESC ή μπορεί να είναι κενή. Η κενή τιμή της μεταβλητής χρησιμοποιείται για την μετάβαση του χρήστη σε επόμενη σελίδα με αποτελέσματα χωρίς να έχει επιλέξει πρώτα κάποιο τρόπο ταξινόμησης. 5.2 Shopping cart plug-in Η πλήρης ονομασία του συγκεκριμένου plug-in είναι shopping_cart-plugin.js και υλοποιεί την προσθήκη και την αφαίρεση προιόντων που επιθυμεί να αγοράσει ο χρήστης από το καλάθι αγορών (όπως αυτά που διαθέτουν όλα τα online καταστήματα). Όπως και στο προηγούμενο plug-in έτσι και σ αυτό (αλλά και σ αυτά που θ ακολουθήσουν) είναι απαραίτητα μερικά includes ώστε να μπορεί να χρησιμοποιηθεί. Συγκερκιμένα, είναι απαραίτητη η προσθήκη της παρακάτω γραμμής: <script type= text/javascript src= shopping_cart-plug-in.js ></script> και φυσικά η δήλωση της χρήσης της βιβλιοθήκης jquery. Αντίστοιχα για την ενεργοποίηση του plug-in χρειάζονται οι γραμμές κώδικα της Εικόνας 33. Εικόνα 37: Ενεργοποίηση plug-in. To plug-in όπως φαίνεται ενεργοποιείται σε δύο διαφορετικές περιπτώσεις. Στην πρώτη περίπτωση, το plug-in ενεργοποιείται όταν ο χρήστης θελήσει να προσθέσει κάποιο προιόν στο καλάθι ενώ στην δεύτερη ενεργοποιείται όταν θέλει να αφαιρέσει.η διαφορά των δύο περιπτώσεων έγγυται στον ορισμό της κλάσης (ή του αναγνωριστικού) του στοιχείου του DOM που περιέχει τα αντίστοιχα links και καλεί την συνάρτηση shoppingcart() (η συνάρτηση που ενεργοποιεί το plug-in). -56-

65 Ανεξάρτητα από το ποια περίπτωση ενεργοποιεί το plug-in οι παράμετροι της συνάρτησης shoopingcart() παραμένουν οι ίδιες. Αυτές είναι:.idfield, είναι η κλάση του στοιχείου του DOM που περιέχει το id του προιόντος που επιθυμεί ο χρήστης να προσθέσει στο καλάθι. Εδώ χρησιμοποιείται ως παράδειγμα η χρήση κλάσης, θα μπορούσε να ήταν αναγωριστικό (π.χ. #IDField ). Πρέπει επίσης όλα τα links και οι πληροφορίες που αφορούν ένα προιόν να έχουν κοινό γονέα, όπως έχει ήδη αναφερθεί, ώστε να πάρει το plug-in τις σωστές πληροφορίες. cart.php, είναι το όνομα του αρχείου που βρίσκεται στον server και όπου στέλνονται τα δεδομένα. Οι εργασίες που επιτελεί το αρχείο αυτό είναι η αποθήκευση των πληροφοριών στο session του χρήστη και η επιστροφή του ονόματος και της τιμής του προιόντος με βάση το id του. Για την σωστή λειτουργία του plug-in είναι αναγκαίο τα αποτελέσματα που επιστρέφονται από τον server να επιστρέφονται με συγκεκριμένη μορφή. Συγκεκριμένα, πρέπει να αποστέλλονται μέσα σ ένα string όπου η πληροφορίες θα διαχωρίζονται από τον χαρακτήρα. Ένα τέτοιο παράδειγμα ειναι το ακόλουθο string Acer Aspire 7720g 750, όπου περιλαμβάνει τις πληροφορίες id του προιόντος, όνομα και τιμή αντίστοιχα χωρισμένες από τον χαρακτήρα. #shopping_cart, είναι το αναγνωριστικό (ή η κλάση) του στοιχείου που θα κρατάει το ίδιο το καλάθι. Είναι απαραίτητο να υπάρχει ήδη τοποθετημένο στο site. #shopping_cart_total, το αναγωριστικό του στοιχείου που περιέχει το συνολικό ποσό που απαιτείται για την αγορά των προιόντων του καλαθιού. Είναι επίσης απαράιτητο να υπάρχει στο site, όμως είναι μια επιπλέον λειτουργία και υπάρχει η επιλογή μη χρήσης της αφήνοντας απλά το πεδίο κενό. 5.3 Comparison list plug-in Πρόκειται για το plug-in που υλοποιεί την λειτουργία που περιγράφηκε στην ενότητα έχει την ονομασία comparison_list-plugin.js και συγκεκριμένα υλοποιεί την προσθήκη και την διαγραφή (με δύο τρόπους) ενός προιόντος από μια λίστα με όλα τα προιόντα του ίδιου είδους στα οποία επιθυμεί να γίνει η σύγκριση. Τα περιεχόμενα της λίστας διαφοροποιούνται ανάλογα με την κατηγορία των προιόντων που έχει επιλέξει ο χρήστης να δει. -57-

66 Όπως και με τα προηγούμενα plug-in έτσι και σ αυτό είναι απαραίτητες μερικές γραμμές κώδικα για να είναι δυνατή η χρήση του και η ενεργοποιησή του. Ο κώδικας που αφορά την ενεργοποίηση του φαίνεται στην Εικόνα 34. Εικόνα 38: Απαραίτητος κώδικας για την ενεργοποίηση του comparison_list-plug-in.js Για την επιτυχή λειτουργία του plug-in απαιτείται όλες οι πληροροφορίες ενός προιόντος, δηλαδή όλα τα στοιχεία του DOM που τις περιέχουν να έχουν κοινό γονέα ώστε να είναι πιο εύκολη και ακριβής η ανάκτηση των απαιτούμενων πληροφοριών. Η δομή που χρησιμοποιήθηκε για τις δοκιμές του plug-in είναι της μορφής: <ul><li>τίτλος </li><li>τιμή</li><li> </li</ul>. Για την χρήση του plug-in προτείνεται η χρήση της ίδιας δομής ή ανάλογης (π.χ. <div><div> </div> </div>). Απαραίτητη είναι επίσης η συμπερίληψη μιας global μεταβλητής, της numberofproducts και αρχικοποίηση της με μηδέν. Η μεταβλητή αυτή είναι υπεύθυνη για την αποθήκευση των συνολικών προιόντων που υπάρχουν στην λίστα σύγκρισης για την διεκπαιρέωση απαραίτητων ελέγχων. Το plug-in ενεργοποιείται συνολικά σε τέσσερις διαφορετικές περιπτώσεις, μια για την προσθήκη προιόντος στην λίστα, δύο για την αφαίρεση ενός προιόντος από την λίστα και μία όταν ο χρήστης επιλέξει να δει τα προιόντα μίας άλλης κατηγορίας. Σ όλες τις περιπτώσεις οι παράμετροι της συνάρτησης comparisonlist() (που ουσιαστικά ενεργοποιεί το plug-in) είναι οι ίδιες. Αυτές είναι: $(.area ), αντικέιμενο με την κλάση (ή το αναγνωριστικό) του στοιχείου μετά από το οποίο θα εμφανιστεί η λίστα. Είναι απαραίτητη πληροφορία γιατί το ίδιο το plug-in παράγει κώδικα HTML και τον εισάγει στην σελίδα που απεικονίζεται στον browser. -58-

67 .ChckBox, κλάση (πρέπει απαραίτητα να είναι κλάση) του πεδίου που κλικάρει ο χρήστης για να μπει το προιόν στην λίστα. Το πεδίο αυτό υπάρχει ανάμεσα στις πληροφορίες σχετικά με το προιόν. Το plug-in εκτός των άλλων αλλάζει την κλάση αυτού του πεδίου ώστε να μπορεί να ξεχωρίζει ποια προιόντα έχουν μπει στην λίστα και να μην υπάρχουν διπλές καταγραφές..chckedbox, η κλάση (επίσης απαραίτητα κλάση) με την οποία το plug-in αντικαθιστά την προηγούμενη. Μ αυτόν τον τρόπο δίνεται η δυνατότητα ο developer της σελίδας να επιλέξει αυτό το όνομα σε περίπτωση που έχει ορίσει κάποιες σεγκεκριμένες ιδιότητες στο css αρχείου του site..title, είναι η κλάση (ή αναγνωριστικό) του πεδίου που περιέχει την ονομασία του προιόντος..viewing, όπως και σε προηγούμενο plug-in (sorting-plug-in.js) είναι η κλάση (ή αναγνωριστικό) που μαρκάρει το είδος των προιόντων που βλέπει ο χρήστης (π.χ. υπολογιστές). complist.php, το όνομα του αρχείου που βρίσκεται στον server και με το οποίο επικοινωνεί το plug-in. Οι εργασίες που αναλαμβάνει αυτό το αρχείο είναι η ενημέρωση του session του χρήστη στον server όταν προσθέσει ένα νέο προιόν στην λίστα ή αφαιρέσει κάποιο, για την επιστροφή του συνολικού αριθμού των προιόντων που υπάρχουν στο session του χρήστη και,τέλος, την επιστροφή ολόκληρης της λίστας με την μορφή HTML. Οι τέσσερις περιπτώσεις λοιπόν που ενεργοποιούν το plug-in είναι όταν ο χρήστης προσθέτει ένα προιόν στην λίστα, όταν αφαιρεί ένα προιόν από την λίστα κλικάροντας το πεδίο με την αλλαγμένη κλάση, όταν αφαιρεί ένα προιόν κλικάροντας πάνω στην λίστα και όταν ο χρήστης κλικάρει να δει μια άλλη κατηγορία προιόντων από το μενού. Στην τελευταία περίπτωση το plug-in επαναφέρει από το session του χρήστη τις επιλογές που έχει κάνει για την κατηγορία που επέλεξε. Το plug-in έχει μερικές default επιλογές για την εμφάνιση του πεδίου της προσθήκης και αφαίρεσης ενός προιόντος από την λίστα καθώς και και για την ίδια την λίστα. Αυτές οι επιλογές μπορούν να αλλάξουν προσθέτοντας μια ακόμα παράμετρο στο τέλος με τις επιθυμητές επιλογές κατά αυτόν τον τρόπο comparisonlist(., {path1, path2, path3}). Οι επιλογές πρέπει να είναι οι επιθυμητές εικόνες για το πεδίο προσθήκης όταν έχει την κλάση ChckBox ή ChckedBox και η εικόνα της λίστας (αντίστοιχα path1, path2 και path3). Οι παρακάτω εικόνες δείχουν τις default επιλογές. -59-

68 Εικόνα 39: Η εμφάνιση του πεδίου επιλογής για προσθήκη (το κουτάκι στα αριστερά). Εικόνα 40: Η εμφάνιση του πεδίου επιλογής για αφαίρεση. Στη επόμενη εικόνα (Εικόνα 37) φαίνεται η εμφάνιση που έχει η λίστα στο demo site που δημιουργήθηκε. Η εμφάνισή της μπορεί να αλλάξει αλλάζοντας το CSS κατάλληλα ενώ το εικονίδιο της σύγκρισης μπορεί να τοποθετηθεί όπως αναφέρθηκε προηγουμένως. Εικόνα 41: Η εμφάνιση της λίστας σύγκρισης. Φυσικά για να είναι ολοκληρωμένη η λειτουργία που επιτελεί το plug-in θα πρέπει κλικάροντας ο χρήστης το εικονίδιο της Εικόνας 37 να εμφανιστούν τα προιόντα που επιθυμεί να συγκρίνει. Υπάρχουν πολλοί τρόποι για να γίνει κάτι τέτοιο όπως η εμφάνιση τους σε νέο παράθυρο στον browser, σε νέο tab (μιας και είναι μια λειτουργία που προσφέρεται απ όλους τους browser) ή στην περίπτωση που το site χρησιμοποιεί σε μεγάλο εύρος την τεχνολογία AJAX, την τμηματική ανανέωση της σελίδας. Θα μπορούσε μια από τις παραπάνω μεθόδους που περιγράφηκαν να συμπεριληφθεί και στην λειτουργία του plug-in αλλά κάτι δεν συμβαίνει. Ο λόγος που έγινε αυτή η επιλογή είναι ότι η χρήση της τεχνολογίας AJAX δεν έχει διαδοθεί πολύ με αποτελέσμα τα υποψήφια site που θα μπορούσε να εφαρμοστεί το plug-in να είναι στην πλειοψηφία τους συμβατικά. Επομένως, λογικό είναι να αφεθεί στην κρίση του εκάστοτε developer η επιλογή του τρόπου. -60-

A J A X AJAX Γιάννης Αρβανιτάκης

A J A X AJAX Γιάννης Αρβανιτάκης A J A X AJAX Γιάννης Αρβανιτάκης 04/07/08 AJAX Στην πράξη 2 Autocomplete AJAX Στην πράξη 3 Webmail (google, yahoo) AJAX Στην πράξη 4 Flickr AJAX Στην πράξη 5 Google Docs AJAX Στην πράξη 6 Google maps http://maps.google.com/

Διαβάστε περισσότερα

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής 4 φάσεις διαδικτυακών εφαρμογών 1.Εφαρμογές στατικής πληροφόρησης

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο FrontPage 2003 Πρακτικός Οδηγός Χρήσης Το FrontPage είναι ένα πρόγραμμα δημιουργίας ιστοσελίδων και δικτυακών τόπων που επιτρέπει το σχεδιασμό ιστοσελίδων μέσα από γραφικό περιβάλλον αλλά και την ταυτόχρονη

Διαβάστε περισσότερα

Π Τ Υ Χ Ι Α Κ Η Ε Ρ Γ Α Σ Ι Α

Π Τ Υ Χ Ι Α Κ Η Ε Ρ Γ Α Σ Ι Α ΑΝΩΤΑΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙ ΕΥΤΙΚΟ Ι ΡΥΜΑ ΠΕΙΡΑΙΑ ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΙΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΤΟΜΕΑΣ ΑΡΧΙΤΕΚΤΟΝΙΚΗΣ Η/Υ, ΠΛΗΡΟΦΟΡΙΚΗΣ & ΙΚΤΥΩΝ Εργ. Τεχνολογίας Λογισμικού & Υπηρεσιών S 2 ELab Π Τ Υ Χ Ι Α

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 2. Το περιβάλλον του παγκόσμιου Ιστού Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Πλεονεκτήματα παγκόσμιου Ιστού Εξυπηρετητής Ιστού & Ιστοσελίδες Κύριες

Διαβάστε περισσότερα

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ.

ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. ΟΔΗΓΟΣ ΧΡΗΣΗΣ(ΜΑΝUΑL) ΔΙΑΧΕΙΡΙΣΤΗ-ΧΡΗΣΤΗ. Οδηγός Διαχειριστή Το m-learning Toolkit είναι μια ολοκληρωμένη πλατφόρμα εξ αποστάσεως εκπαίδευσης που έχει σχεδιαστεί για να υπάρχει η δυνατότητα της πρόσβασης

Διαβάστε περισσότερα

Ενσωματωμένα controls τα οποία προσαρμόζονται και χρησιμοποιούνται σε οποιαδήποτε ιστοσελίδα επιλέγει ο φορέας.

Ενσωματωμένα controls τα οποία προσαρμόζονται και χρησιμοποιούνται σε οποιαδήποτε ιστοσελίδα επιλέγει ο φορέας. Η Πυξίδα Απασχόλησης είναι ένα πλήρως παραμετροποιήσιμο portal που απευθύνεται σε Κέντρα Επαγγελματικής Κατάρτισης, Δήμους, Εκπαιδευτικούς Οργανισμούς και Εταιρίες Εύρεσης Εργασίας, με στόχο τόσο την μηχανογράφηση

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Εφαρµογές και Περιβάλλοντα Εργασίας AJAX

Εφαρµογές και Περιβάλλοντα Εργασίας AJAX Εφαρµογές και Περιβάλλοντα Εργασίας AJAX Θεόδωρος Χ. Κασκάλης Αναπληρωτής Καθηγητής Πανεπιστήµιο υτικής Μακεδονίας Εισαγωγή AJAX σηµαίνει: Asynchronous JavaScript and XML Ορισµός Wikipedia: Το AJAX, είναι

Διαβάστε περισσότερα

Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες

Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες Μέρος 3 ο : Βασικές Έννοιες για δυναμικές ιστοσελίδες Εισαγωγή-Σκοπός. Τρόποι δημιουργίας δυναμικών ιστοσελίδων. Dynamic Web Pages. Dynamic Web Page Development Using Dreamweaver. Τρόποι δημιουργίας δυναμικών

Διαβάστε περισσότερα

Εισαγωγή στην εφαρμογή Βασική Σελίδα (Activity) Αναζήτηση Πελάτη... 6 Προβολή Πελάτη... 7 Επεξεργασία Πελάτη... 10

Εισαγωγή στην εφαρμογή Βασική Σελίδα (Activity) Αναζήτηση Πελάτη... 6 Προβολή Πελάτη... 7 Επεξεργασία Πελάτη... 10 Περιεχόμενα Εισαγωγή στην εφαρμογή... 2 Βασική Σελίδα (Activity)... 3 Ρυθμίσεις... 3 Πελάτες... 6 Αναζήτηση Πελάτη... 6 Προβολή Πελάτη... 7 Επεξεργασία Πελάτη... 10 Αποθήκη... 11 Αναζήτηση προϊόντος...

Διαβάστε περισσότερα

Ημερομηνία Παράδοσης: 4/4/2013

Ημερομηνία Παράδοσης: 4/4/2013 Δράση 9.14 / Υπηρεσία εντοπισμού λογοκλοπής Κυρίως Παραδοτέο / Σχεδιασμός και ανάπτυξη λογισμικού (λογοκλοπής) και βάσης δεδομένων (αποθετηρίου) Επιμέρους Παραδοτέο 9.14.1.4 / Πληροφοριακό σύστημα υπηρεσίας

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΟΔΗΓΙΩΝ ΧΡΗΣΤΗ. Ηλεκτρονική Υποβολή Α.Π.Δ.

ΕΓΧΕΙΡΙΔΙΟ ΟΔΗΓΙΩΝ ΧΡΗΣΤΗ. Ηλεκτρονική Υποβολή Α.Π.Δ. ΕΓΧΕΙΡΙΔΙΟ ΟΔΗΓΙΩΝ ΧΡΗΣΤΗ Ηλεκτρονική Υποβολή Α.Π.Δ. ΠΕΡΙΕΧΟΜΕΝΑ 1) Είσοδος στην εφαρμογή 2) Δημιουργία Περιόδου Υποβολής 2.α) Ακύρωση Περιόδου Υποβολής 3) Μέθοδος Υποβολής: Συμπλήρωση Φόρμας 3.α) Συμπλήρωση

Διαβάστε περισσότερα

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com /

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / 1. Τι είναι το wikidot Το wikidot είναι ένας δικτυακός τόπος στον οποίο κάθε χρήστης έχει το δικαίωμα να δημιουργήσει

Διαβάστε περισσότερα

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) ΕΠΛ 012 ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) Διδάσκων Καθηγητής: Δημήτριος Τσουμάκος Εαρινό Εξάμηνο 2010 Βασικές Πληροφορίες Πότε: Δευτέρα & Πέμπτη 10:30-12μμ Πού: ΧΩΔ01

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Σχεδίαση και Ανάπτυξη Ιστότοπων Ιστορική Εξέλιξη του Παγκόσμιου Ιστού Παρουσίαση 1 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Τι είναι το Διαδίκτυο Βασικές Υπηρεσίες Διαδικτύου Προηγμένες Υπηρεσίες Διαδικτύου

Διαβάστε περισσότερα

Βασικές Έννοιες Web Εφαρμογών

Βασικές Έννοιες Web Εφαρμογών ΟΙΚΟΝΟΜΙΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ ΤΜΗΜΑ ΔΙΟΙΚΗΤΙΚΗΣ ΕΠΙΣΤΗΜΗΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ Τεχνολογίες και Εφαρμογές Διαδικτύου Βασικές Έννοιες Web Εφαρμογών Κατερίνα Πραματάρη Τεχνολογίες και Εφαρμογές Διαδικτύου Περιεχόμενα

Διαβάστε περισσότερα

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network).

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network). ΙΔΡΥΜΑ ΝΕΟΛΑΙΑΣ ΚΑΙ ΔΙΑ ΒΙΟΥ ΜΑΘΗΣΗΣ ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΥΟΥ Καλαμάτα, 2015 Το Διαδίκτυο Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network). Πρόκειται

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ της Πλατφόρμας Τηλεκατάρτισης ΠΕΡΙΕΧΟΜΕΝΑ 1. Εισαγωγή...2 2. Αρχική σελίδα, Εισαγωγή & Περιβάλλον Συστήματος...3 2.1. Αρχική σελίδα εισαγωγής...3 2.2. Εισαγωγή στην Πλατφόρμα Τηλε-κατάρτισης...4

Διαβάστε περισσότερα

1 Συστήματα Αυτοματισμού Βιβλιοθηκών

1 Συστήματα Αυτοματισμού Βιβλιοθηκών 1 Συστήματα Αυτοματισμού Βιβλιοθηκών Τα Συστήματα Αυτοματισμού Βιβλιοθηκών χρησιμοποιούνται για τη διαχείριση καταχωρήσεων βιβλιοθηκών. Τα περιεχόμενα των βιβλιοθηκών αυτών είναι έντυπα έγγραφα, όπως βιβλία

Διαβάστε περισσότερα

Οδηγός Εγκατάστασης και Χρήσης του Arebas Easy

Οδηγός Εγκατάστασης και Χρήσης του Arebas Easy Σ ε λ ί δ α 1 Οδηγός Εγκατάστασης και Χρήσης του Arebas Easy Περιεχόμενα 1. Download Arebas Easy... 2 2. Εγκατάσταση Arebas Easy... 3 3. Εγγραφή στον Arebas Server... 7 4. Παραμετροποίηση Arebas Easy...

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Περιεχόμενα. Αντί προλόγου Πώς να χρησιμοποιήσετε το βιβλίο Κεφάλαιο 1: Πώς δημιουργώ το Προφίλ μου στο Facebook;...

Περιεχόμενα. Αντί προλόγου Πώς να χρησιμοποιήσετε το βιβλίο Κεφάλαιο 1: Πώς δημιουργώ το Προφίλ μου στο Facebook;... Περιεχόμενα Αντί προλόγου... 7 Πώς να χρησιμοποιήσετε το βιβλίο... 13 Κεφάλαιο 1: Πώς δημιουργώ το Προφίλ μου στο Facebook;...15 Κεφάλαιο 2: Τι βλέπω στην οθόνη μου όταν ολοκληρώσω τη δημιουργία του Προφίλ

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ Π.Σ. ΦΟΙΤΗΤΟΛΟΓΙΟΥ- ΓΙΑ ΤΟ ΔΙΔΑΣΚΟΝΤΑ (ClassWeb)

ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ Π.Σ. ΦΟΙΤΗΤΟΛΟΓΙΟΥ- ΓΙΑ ΤΟ ΔΙΔΑΣΚΟΝΤΑ (ClassWeb) ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ Π.Σ. ΦΟΙΤΗΤΟΛΟΓΙΟΥ- ΓΙΑ ΤΟ ΔΙΔΑΣΚΟΝΤΑ (ClassWeb) 1. Είσοδος στην υπηρεσία ClassWeb Στη κεντρική σελίδα της υπηρεσίας στα πεδία Όνομα Χρήστη και Κωδικός πρόσβασης πληκτρολογούμε τα στοιχεία

Διαβάστε περισσότερα

Speed-0 WMP: Web and Mobile Platform Software Requirements Specification

Speed-0 WMP: Web and Mobile Platform Software Requirements Specification Speed-0 Web and Mobile Platform Speed-0 WMP: Web and Mobile Platform Software Requirements Specification Version Revision History Date Version Description People 5/4/2012 Αρχικές Προδιαγραφές

Διαβάστε περισσότερα

Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010

Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010 Τμήμα Πληροφορικής & Επικοινωνιών Τομέας Υπολογιστικών Τεχνικών & Συστημάτων Συνοπτικό εγχειρίδιο χρήσης του Microsoft Visual Studio 2010 Ιωάννης Γεωργουδάκης - Πάρις Μαστοροκώστας Σεπτέμβριος 2011 ΠΕΡΙΕΧΟΜΕΝΑ

Διαβάστε περισσότερα

Atlantis - Νέο user interface

Atlantis - Νέο user interface New Desktop 1 Atlantis - Νέο user interface ATLANTIS - ΝΕΟ USER INTERFACE... 2 ΓΕΝΙΚΗ ΠΑΡΟΥΣΙΑΣΗ... 3 ΓΡΑΜΜΗ ΣΥΣΤΗΜΑΤΟΣ... 4 ΜΠΑΡΑ ΧΡΗΣΤΗ (USER TOOLBAR)... 5 ΚΕΝΤΡΙΚΟ ΜΕΝΟΥ ΤΟΥ ΣΥΣΤΗΜΑΤΟΣ... 6 Κεντρικό

Διαβάστε περισσότερα

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή 1 Πίνακας Περιεχομένων 1. Εισαγωγή... 4 1.1 Περιβάλλον Moodle...4 1.2 Χρήση ονόματος χρήστη και κωδικού...4 1.3 Δημιουργία νέου μαθήματος...4 1.3.1

Διαβάστε περισσότερα

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet.

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΩΡΕΣ ΔΙΔΑΣΚΑΛΙΑΣ: ΕΙΔΟΣ ΜΑΘΗΜΑΤΟΣ: Μικτό Γενικός σκοπός είναι να αποκτήσει ο καταρτιζόμενος τις αναγκαίες γνώσεις σχετικά με εργαλεία και τις τεχνικές για

Διαβάστε περισσότερα

ΟΔΗΓΙΕΣ ΓΙΑ ΤΟ ΠΑΙΧΝΙΔΙ.

ΟΔΗΓΙΕΣ ΓΙΑ ΤΟ ΠΑΙΧΝΙΔΙ. ΟΔΗΓΙΕΣ ΓΙΑ ΤΟ ΠΑΙΧΝΙΔΙ. Το πρώτο πράγμα που βλέπουμε μόλις ξεκινάμε το παιχνίδι είναι μια λίστα με όλα τα διαθέσιμα βίντεο με τα οποία μπορούμε να εξασκηθούμε. Σε αυτή περιλαμβάνονται επίσης πληροφορίες

Διαβάστε περισσότερα

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής Εργαλεία και τεχνικές από την πλευρά του πελάτη Java Applet

Διαβάστε περισσότερα

ΔΙΩΝΗ Οδηγίες κατάθεσης τεκμηρίων στο Ιδρυματικό Αποθετήριο του Πανεπιστημίου Πειραιώς. ELiDOC Systems & Services

ΔΙΩΝΗ Οδηγίες κατάθεσης τεκμηρίων στο Ιδρυματικό Αποθετήριο του Πανεπιστημίου Πειραιώς. ELiDOC Systems & Services ΔΙΩΝΗ Οδηγίες κατάθεσης τεκμηρίων στο Ιδρυματικό Αποθετήριο του Πανεπιστημίου Πειραιώς ELiDOC Systems & Services Περιεχόμενα 1. Είσοδος στο σύστημα... 2 2. Εισαγωγή τεκμηρίου στο σύστημα... 5 3. Συμπλήρωση

Διαβάστε περισσότερα

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 1. Δίκτυα Υπολογιστών και Διαδίκτυο... 3 1.1. Όροι Και Έννοιες... 3 1.2. Ασφάλεια Στο Διαδίκτυο... 5 2. Περιήγηση στον Παγκόσμιο Ιστό 7 Το Περιβάλλον Ενός Φυλλομετρητή...

Διαβάστε περισσότερα

Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης - Παρουσίαση

Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης - Παρουσίαση Novel Tech «Μέλος του Επιστημονικού & Τεχνολογικού Πάρκου Κρήτης» http://www.noveltech.gr info@noveltech.gr Ολοκληρωμένες Δράσεις προβολής δημοσιότητας για το Δήμο Αρχανών Αστερουσίων Εγχειρίδιο Χρήσης

Διαβάστε περισσότερα

hel-col@otenet.gr Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc) Ελληνικό Κολλέγιο Θεσσαλονίκης kparask@hellenic-college.

hel-col@otenet.gr Κωνσταντίνος Παρασκευόπουλος Καθηγητής Πληροφορικής (ΠΕ19 MSc) Ελληνικό Κολλέγιο Θεσσαλονίκης kparask@hellenic-college. Χρήση της Διεπαφής Προγραμματισμού Εφαρμογής Google Maps για τη δημιουργία διαδραστικού χάρτη με τα Μνημεία Παγκόσμιας Πολιτιστικής Κληρονομιάς της ΟΥΝΕΣΚΟ στη Θεσσαλονίκη Εμμανουήλ Τσάμης 1, Κωνσταντίνος

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο Το περιβάλλον εργασίας Ανοίγοντας την Ελληνική Έκδοση του FrontPage, για πρώτη φορά, η εικόνα που θα συναντήσουμε είναι αυτή της Εικόνας 1 με τα Μενού Εντολών και τη Γραμμή Εργαλείων, στο πάνω μέρος της

Διαβάστε περισσότερα

Η εφαρµογή ClassWeb δίνει στους διδάσκοντες χρήστες του συστήµατος τη δυνατότητα πρόσβασης µέσω του ιαδικτύου σε ποικίλες υπηρεσίες, όπως:

Η εφαρµογή ClassWeb δίνει στους διδάσκοντες χρήστες του συστήµατος τη δυνατότητα πρόσβασης µέσω του ιαδικτύου σε ποικίλες υπηρεσίες, όπως: 1. Υπηρεσία ClassWeb 1.1. Γενικά Η εφαρµογή ClassWeb δίνει στους διδάσκοντες χρήστες του συστήµατος τη δυνατότητα πρόσβασης µέσω του ιαδικτύου σε ποικίλες υπηρεσίες, όπως: εµφάνιση στατιστικών στοιχείων

Διαβάστε περισσότερα

Διαδίκτυο: δίκτυο διασυνδεμένων δικτύων Ξεκίνησε ως ένα μικρό κλειστό στρατιωτικό δίκτυο, απόρροια του Ψυχρού Πολέμου μεταξύ ΗΠΑ και ΕΣΣΔ.

Διαδίκτυο: δίκτυο διασυνδεμένων δικτύων Ξεκίνησε ως ένα μικρό κλειστό στρατιωτικό δίκτυο, απόρροια του Ψυχρού Πολέμου μεταξύ ΗΠΑ και ΕΣΣΔ. ΚΕΦΑΛΑΙΟ 9 Διαδίκτυο: δίκτυο διασυνδεμένων δικτύων Ξεκίνησε ως ένα μικρό κλειστό στρατιωτικό δίκτυο, απόρροια του Ψυχρού Πολέμου μεταξύ ΗΠΑ και ΕΣΣΔ. Το 1966 αρχίζει ο σχεδιασμός του ARPANET, του πρώτου

Διαβάστε περισσότερα

Δημιουργία ιστοσελίδας με. Wordpress - Βασικές λειτουργίες

Δημιουργία ιστοσελίδας με. Wordpress - Βασικές λειτουργίες Δημιουργία ιστοσελίδας με Wordpress - Βασικές λειτουργίες Περιεχόμενα Εγγραφή και αρχικές ρυθμίσεις Διαχείριση Ιστοσελίδας Δημιουργία Menu Δημιουργία σελίδας Δημιουργία Άρθρου Αλλαγή Εμφάνισης Εγγραφή

Διαβάστε περισσότερα

ANDROID Προγραμματισμός Εφαρμογών

ANDROID Προγραμματισμός Εφαρμογών ANDROID Προγραμματισμός Εφαρμογών Παναγιώτης Κρητιώτης ΑΜ 1607 Περιεχόμενα Εισαγωγή Βασικά Στοιχεία Χαρακτηριστικά Αρχιτεκτονική Εργαλεία Προγραμματισμού Eclipse IDE Android SDK - ADT Plugin Προσομοιωτής

Διαβάστε περισσότερα

Διαχείριση Ειδοποιήσεων με Κινητές Συσκευές

Διαχείριση Ειδοποιήσεων με Κινητές Συσκευές Διαχείριση Ειδοποιήσεων με Κινητές Συσκευές Λαμπαδαρίδης Αντώνιος el04148@mail.ntua.gr Διπλωματική εργασία στο Εργαστήριο Συστημάτων Βάσεων Γνώσεων και Δεδομένων Επιβλέπων: Καθηγητής Τ. Σελλής Περίληψη

Διαβάστε περισσότερα

Δημοσίευση στο Διαδίκτυο

Δημοσίευση στο Διαδίκτυο ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Δημοσίευση στο Διαδίκτυο Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Δημοσίευση μιας ταινίας στο παγκόσμιο ιστό Βασικά στοιχεία HTML Τεχνικές δημιουργίας

Διαβάστε περισσότερα

ΚΕΦΑΛΑΙΟ 5. Κύκλος Ζωής Εφαρμογών ΕΝΟΤΗΤΑ 2. Εφαρμογές Πληροφορικής. Διδακτικές ενότητες 5.1 Πρόβλημα και υπολογιστής 5.2 Ανάπτυξη εφαρμογών

ΚΕΦΑΛΑΙΟ 5. Κύκλος Ζωής Εφαρμογών ΕΝΟΤΗΤΑ 2. Εφαρμογές Πληροφορικής. Διδακτικές ενότητες 5.1 Πρόβλημα και υπολογιστής 5.2 Ανάπτυξη εφαρμογών 44 Διδακτικές ενότητες 5.1 Πρόβλημα και υπολογιστής 5.2 Ανάπτυξη εφαρμογών Διδακτικοί στόχοι Σκοπός του κεφαλαίου είναι οι μαθητές να κατανοήσουν τα βήματα που ακολουθούνται κατά την ανάπτυξη μιας εφαρμογής.

Διαβάστε περισσότερα

Atlantis - Νέο user interface

Atlantis - Νέο user interface New Desktop 1 Atlantis - Νέο user interface ATLANTIS - ΝΕΟ USER INTERFACE...2 ΓΕΝΙΚΗ ΠΑΡΟΥΣΙΑΣΗ...3 ΓΡΑΜΜΗ ΣΥΣΤΗΜΑΤΟΣ...4 ΜΠΑΡΑ ΧΡΗΣΤΗ (USER TOOLBAR)...5 ΚΕΝΤΡΙΚΟ ΜΕΝΟΥ ΤΟΥ ΣΥΣΤΗΜΑΤΟΣ...6 Κεντρικό μενού

Διαβάστε περισσότερα

ΠΛΑΤΦΟΡΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΒΙΝΤΕΟΔΙΑΛΕΞΕΩΝ ΔΗΛΟΣ delos.uoa.gr. Εγχειρίδιο Χρήσης Μελών ΔΕΠ

ΠΛΑΤΦΟΡΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΒΙΝΤΕΟΔΙΑΛΕΞΕΩΝ ΔΗΛΟΣ delos.uoa.gr. Εγχειρίδιο Χρήσης Μελών ΔΕΠ ΠΛΑΤΦΟΡΜΑ ΔΙΑΧΕΙΡΙΣΗΣ ΒΙΝΤΕΟΔΙΑΛΕΞΕΩΝ ΔΗΛΟΣ delos.uoa.gr Εγχειρίδιο Χρήσης Μελών ΔΕΠ Αναζήτηση Δημόσιου Περιεχομένου Η διεύθυνση ιστού της νεάς πλατφόρμας διαχείρισης βιντεοδιαλέξεων Δήλος είναι: http://delos.uoa.gr

Διαβάστε περισσότερα

Σεμινάριο Wordpress CMS (Δημιουργία Δυναμικών Ιστοσελίδων)

Σεμινάριο Wordpress CMS (Δημιουργία Δυναμικών Ιστοσελίδων) Σεμινάριο Wordpress CMS (Δημιουργία Δυναμικών Ιστοσελίδων) Τι είναι το Wordpress: To Wordpress είναι ένα δωρεάν ανοικτού κώδικα (open source) λογισμικό (εφαρμογή), με το οποίο μπορεί κάποιος να δημιουργεί

Διαβάστε περισσότερα

Η HTML 5 θα αλλάξει το Web?

Η HTML 5 θα αλλάξει το Web? Η HTML 5 θα αλλάξει το Web? (ή αλλιώς, έρχεται το τέλος των plugins?) Αλέξανδρος Καράκος Εργαστήριο Προγραµµατισµού και Επεξεργασίας Πληροφοριών Internet 2... Είναι ένα ξεχωριστό µέσο δηµοσίευσης πληροφοριών

Διαβάστε περισσότερα

Περιεχόμενα Πώς να χρησιμοποιήσετε το βιβλίο... 7 Αντί προλόγου... 9 Κεφάλαιο 1: Κεφάλαιο 2: Κεφάλαιο 3: Κεφάλαιο 4: Κεφάλαιο 5: Πώς να δημιουργήσω το Προφίλ μου και να γίνω μέλος στο Facebook;... 15 Τι

Διαβάστε περισσότερα

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με

Διαβάστε περισσότερα

Οδηγός Χρήσης ΠΣ Helpdesk για τους τελικούς χρήστες

Οδηγός Χρήσης ΠΣ Helpdesk για τους τελικούς χρήστες ΥΠΟΥΡΓΕΙΟ ΠΑΙΔΕΙΑΣ ΚΑΙ ΘΡΗΣΚΕΥΜΑΤΩΝ Ινστιτούτο Τεχνολογίας Υπολογιστών και Εκδόσεων Τομέας Εκπαιδευτικής Τεχνολογίας Οδηγός Χρήσης ΠΣ Helpdesk για τους τελικούς χρήστες Έκδοση 4.0 - Ιανουάριος 2014 Σύνταξη:

Διαβάστε περισσότερα

Δημιουργία ιστοσελίδας με Wordpress - Βασικές λειτουργίες

Δημιουργία ιστοσελίδας με Wordpress - Βασικές λειτουργίες Δημιουργία ιστοσελίδας με Wordpress - Βασικές λειτουργίες Περιεχόμενα Εγγραφή και αρχικές ρυθμίσεις Διαχείριση Ιστοσελίδας Δημιουργία Menu Δημιουργία σελίδας Δημιουργία Αρχικής Σελίδας Δημιουργία Άρθρου

Διαβάστε περισσότερα

Υπηρεσίες Ιστού (Web Services) ΜΙΧΑΛΗΣ ΜΑΛΙΑΠΠΗΣ

Υπηρεσίες Ιστού (Web Services) ΜΙΧΑΛΗΣ ΜΑΛΙΑΠΠΗΣ Υπηρεσίες Ιστού (Web Services) ΜΙΧΑΛΗΣ ΜΑΛΙΑΠΠΗΣ Μάθημα Πρώτο Εισαγωγή στις Υπηρεσίες Ιστού (Web Services) Μοντέλα WS JSON Χρήση (consume) WS μέσω python Πρόσβαση σε WS και άντληση δεδομένων Παραδείγματα

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΥΠΟΣΥΣΤΗΜΑΤΟΣ ΑΓΡΟΠΕΡΙΒΑΛΛΟΝΤΙΚΩΝ ΕΝΙΣΧΥΣΕΩΝ. Μέτρο 2.2.1

ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΥΠΟΣΥΣΤΗΜΑΤΟΣ ΑΓΡΟΠΕΡΙΒΑΛΛΟΝΤΙΚΩΝ ΕΝΙΣΧΥΣΕΩΝ. Μέτρο 2.2.1 On line ΔΗΛΩΣΗ ΕΦΑΡΜΟΓΗΣ Μέτρο 2.2.1 ΙΑΝΟΥΑΡΙΟΣ 2017 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ 1 ΓΕΝΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ... 3 1.1 Υποχρεωτικά Πεδία... 3 1.2 Βοηθητική Λίστα Τιμών (drop down list)... 3 1.3 Αναζήτηση... 3 1.3.1

Διαβάστε περισσότερα

Ερευνητικό Αποθετήριο Πανεπιστημίου Πειραία

Ερευνητικό Αποθετήριο Πανεπιστημίου Πειραία Ερευνητικό Αποθετήριο Πανεπιστημίου Πειραία Οδηγίες κατάθεσης δημοσίευσης στο ΠΕΡΙΛΗΨΗ σύστημα Ερευνητικού Αποθετηρίου CRIS ΕΡΕΥΝΗΤΙΚΟ ΑΠΟΘΕΤΗΡΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟΥ ΠΕΙΡΑΙΩΣ 2016 Οδηγίες κατάθεσης δημοσίευσης

Διαβάστε περισσότερα

Interactive Power Point

Interactive Power Point Interactive Power Point Οι περισσότεροι χρήστες γνωρίζουν τη χρήση του Microsoft Power Point για τη δημιουργία παρουσιάσεων. Αυτό όμως που λίγοι γνωρίζουν, είναι ότι το πρόγραμμα αυτό, έχει δυνατότητες

Διαβάστε περισσότερα

Οδηγίες χρήσης SoSimple

Οδηγίες χρήσης SoSimple Οδηγίες χρήσης SoSimple Διδακτική περίοδος 2019-2020 ΛΕΟΝΤΕΙΟΣ ΣΧΟΛΗ ΑΘΗΝΩΝ Οδηγίες χρήσης SoSimple / 2019-20 1 Περιεχόμενα 1. Είσοδος στην εφαρμογή και διαπιστευτήρια... 3 2. Χρήση της εφαρμογής... 4

Διαβάστε περισσότερα

Vodafone Business Connect

Vodafone Business Connect Vodafone Business Connect Vodafone Business WebHosting Αναλυτικός Οδηγός Χρήσης MSSQL Manager Αναλυτικός οδηγός χρήσης: MS SQL Manager Vodafone Business Connect - Υπηρεσίες φιλοξενίας εταιρικού e-mail

Διαβάστε περισσότερα

ΠΑ-24γ Εγχειρίδιο Χρήσης Δ.Δ.Π. Του Δήμου Αιγάλεω

ΠΑ-24γ Εγχειρίδιο Χρήσης Δ.Δ.Π. Του Δήμου Αιγάλεω ΤΙΤΛΟΣ ΕΓΓΡΑΦΟΥ ΠΑ-24γ Εγχειρίδιο Χρήσης Δ.Δ.Π. Του Δήμου Αιγάλεω Έκδοση 1.0 12 Ιανουαρίου 2009 ΑΡΙΘΜΟΣ ΣΥΜΒΑΣΗΣ : 25978/04.08.2008 ΕΠΙΣΗΜΗ ΟΝΟΜΑΣΙΑ ΕΡΓΟΥ : Προσαρμογή, Ανάπτυξη, Έλεγχος και Εγκατάσταση

Διαβάστε περισσότερα

Εργαστήριο «Τεχνολογία Πολιτισμικού Λογισμικού» Ενότητα. Σχεδίαση Βάσεων Δεδομένων

Εργαστήριο «Τεχνολογία Πολιτισμικού Λογισμικού» Ενότητα. Σχεδίαση Βάσεων Δεδομένων Ενότητα 3 Σχεδίαση Βάσεων Δεδομένων 17 18 3.1 Εισαγωγή Μία βάση δεδομένων αποτελείται από δεδομένα για διάφορα θέματα τα οποία όμως σχετίζονται μεταξύ τους και είναι καταχωρημένα με συγκεκριμένο τρόπο.

Διαβάστε περισσότερα

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2

ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),

Διαβάστε περισσότερα

Τεχνολογία Διοίκησης Επιχειρησιακών Διαδικασιών

Τεχνολογία Διοίκησης Επιχειρησιακών Διαδικασιών ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ Τεχνολογία Διοίκησης Επιχειρησιακών Διαδικασιών Οδηγός Εργαστηρίου:

Διαβάστε περισσότερα

Αναζήτηση στον Ιστό. Πληκτρολόγηση του URL: στο πλαίσιο αναζήτησης του Mozilla Firefox. Enter ή κλικ στο Αναζήτηση

Αναζήτηση στον Ιστό. Πληκτρολόγηση του URL:  στο πλαίσιο αναζήτησης του Mozilla Firefox. Enter ή κλικ στο Αναζήτηση Αναζήτηση στον Ιστό Χρήση μιας μηχανής αναζήτησης Επιλογή συγκεκριμένης μηχανής αναζήτησης Είναι συχνό το φαινόμενο να θέλει ο χρήστης να εντοπίσει πληροφορίες στο διαδίκτυο και να μην ξέρει που να κοιτάξει.

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR. ΕΚΔΟΣΗ 1η

ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR. ΕΚΔΟΣΗ 1η ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ ΗΛΕΚΤΡΟΝΙΚΗ ΠΛΑΤΦΟΡΜΑ ΔΙΑΠΟΛΙΤΙΣΜΙΚΩΝ ΜΕΣΟΛΑΒΗΤΩΝ WWW.INTERMEDIATION.GR ΕΚΔΟΣΗ 1η ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ ΥΠΟΥΡΓΕΙΟ ΕΣΩΤΕΡΙΚΩΝ ΕΥΡΩΠΑΪΚΟ ΤΑΜΕΙΟ ΕΝΤΑΞΗΣ ΥΠΗΚΟΩΝ ΤΡΙΤΩΝ ΧΩΡΩΝ ΣΤΗΝ ΕΛΛΑΔΑ ΕΥΡΩΠΑΪΚΗ

Διαβάστε περισσότερα

Δημιουργία. Ιστολογίου (blog) 7/5/2015. Χρυσάνθη Γιομέλου ΚΔΒΜ ΝΙΚΑΙΑΣ

Δημιουργία. Ιστολογίου (blog)  7/5/2015. Χρυσάνθη Γιομέλου ΚΔΒΜ ΝΙΚΑΙΑΣ Δημιουργία 7/5/2015 Ιστολογίου (blog) www.blogger.com Χρυσάνθη Γιομέλου ΚΔΒΜ ΝΙΚΑΙΑΣ ΠΕΡΙΕΧΟΜΕΝΑ TI EINAI TO ΙΣΤΟΛΟΓΙΟ... 2 ΓΙΑΤΙ ΙΣΤΟΛΟΓΙΟ;... 2 ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΤΗΣ ΧΡΗΣΗΣ ΙΣΤΟΛΟΓΙΟΥ... 2 ΔΗΜΙΟΥΡΓΙΑ ΛΟΓΑΡΙΑΣΜΟΥ

Διαβάστε περισσότερα

Δυναμικές Ιστοσελίδες Προγραμματισμός στην πλευρά του client

Δυναμικές Ιστοσελίδες Προγραμματισμός στην πλευρά του client ΕΣΔ516 Τεχνολογίες Διαδικτύου Δυναμικές Ιστοσελίδες Προγραμματισμός στην πλευρά του client Περιεχόμενα Περιεχόμενα Η Διεπίπέδη αρχιτεκτονική (2-tier architecture) Η τριεπίπεδη αρχιτεκτονική (3-tier architecture)

Διαβάστε περισσότερα

Στρατηγική ανάπτυξη δικτυακού κόμβου

Στρατηγική ανάπτυξη δικτυακού κόμβου ΠΑΝΕΠΙΣΤΗΜΙΟ ΜΑΚΕΔΟΝΙΑΣ ΔΙΑΤΜΗΜΑΤΙΚΟ ΠΡΟΓΡΑΜΜΑ ΜΕΤΑΠΤΥΧΙΑΚΩΝ ΣΠΟΥΔΩΝ ΣΤΑ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Παντελής Παντελίδης Στρατηγική ανάπτυξη δικτυακού κόμβου Επιβλέπουσα Καθηγήτρια: Μάρω Βλαχοπούλου Εξετάστρια:

Διαβάστε περισσότερα

5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ

5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5 ο ΚΕΦΑΛΑΙΟ: ΠΡΑΚΤΙΚΟ ΚΟΜΜΑΤΙ 5.1 Εισαγωγή Το πρακτικό κομμάτι της πτυχιακής μας εργασίας αφορά την δημιουργία μιας λειτουργικής ιστοσελίδας με την χρήση της πλατφόρμας του Weebly, που αποτελεί μια σύγχρονη

Διαβάστε περισσότερα

Το σύστημα θα πρέπει να σχεδιαστεί με τρόπο που θα ικανοποιήσει τις απαιτήσεις του χρήστη εύκολα.

Το σύστημα θα πρέπει να σχεδιαστεί με τρόπο που θα ικανοποιήσει τις απαιτήσεις του χρήστη εύκολα. Έγγραφο απαιτήσεων 1 Περιγραφή Συστήματος Η online ιστοσελίδα και η αντίστοιχη έκδοση για κινητά τηλέφωνα έχει ως στόχο να υποστηρίξει και να ενισχύσει το User Experience (UX) των επισκεπτών του e-museum,

Διαβάστε περισσότερα

Τι είναι ένα σύστημα διαχείρισης περιεχομένου; δυναμικό περιεχόμενο

Τι είναι ένα σύστημα διαχείρισης περιεχομένου; δυναμικό περιεχόμενο Τι είναι ένα σύστημα διαχείρισης περιεχομένου; Παρά την μεγάλη εξάπλωση του διαδικτύου και τον ολοένα αυξανόμενο αριθμό ιστοσελίδων, πολλές εταιρείες ή χρήστες δεν είναι εξοικειωμένοι με την τεχνολογία

Διαβάστε περισσότερα

QEMS TUTORIAL CRM. Οδηγίες για το νέο πρωτοποριακό πρόγραμμα της QEMS.

QEMS TUTORIAL CRM. Οδηγίες για το νέο πρωτοποριακό πρόγραμμα της QEMS. QEMS TUTORIAL CRM Οδηγίες για το νέο πρωτοποριακό πρόγραμμα της QEMS. ΕΚΔΟΣΗ 1.0.1 + 26/6/2014 ΠΕΡΙΕΧΟΜΕΝΑ ΕΙΣΑΓΩΓΗ... 2 LOGIN... 3 δικαιωματα ΕΦΑΡΜΟΓΗς... 4 ΙΔΙΟΚΤΗΤΗΣ... 4 ADMIN / MANAGER... 4 ΥΠΑΛΗΛΟΣ...

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet I

Εργαλεία Ανάπτυξης Εφαρμογών Internet I Εργαλεία Ανάπτυξης Εφαρμογών Internet I 2: Εισαγωγή στον περιβάλλον με δομή πελάτη-εξυπηρετητή Σταύρος Καμμάς 4 φάσεις διαδικτυακών εφαρμογών 1. Εφαρμογές στατικής πληροφόρησης 2. Εφαρμογές με απλή αμφίδρομη

Διαβάστε περισσότερα

Εγχειρίδιο Χρήσης Φορέα Πιστοποίησης

Εγχειρίδιο Χρήσης Φορέα Πιστοποίησης Εγχειρίδιο Χρήσης Φορέα Πιστοποίησης ΕΙΣΟΔΟΣ ΣΤΗΝ ΕΦΑΡΜΟΓΗ Για την είσοδο στην εφαρμογή απαιτείται, 1. Πλοηγός ιστοσελίδων (Internet Explorer, Mozilla Firefox, Google Chrome, Netscape Navigator), 2. Όνομα

Διαβάστε περισσότερα

Field Service Management ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ

Field Service Management ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ Field Service Management ΕΓΧΕΙΡΙΔΙΟ ΧΡΗΣΗΣ 1 ΠΕΡΙΕΧΟΜΕΝΑ 1. ΑΝΑΛΥΣΗ ΜΕΝΟΥ ΕΦΑΡΜΟΓΗΣ... 4 2. ΕΠΕΞΗΓΗΣΗ ΚΕΝΤΡΙΚΟΥ ΜΕΝΟΥ ΚΑΡΤΕΛΑΣ... 5 3. ΔΗΜΙΟΥΡΓΙΑ ΠΕΛΑΤΗ... 6 4. ΑΝΑΖΗΤΗΣΗ ΠΕΛΑΤΗ... 6 5. ΕΠΕΞΕΡΓΑΣΙΑ/ΔΙΑΓΡΑΦΗ

Διαβάστε περισσότερα

Συγκεντρωτικό Παράρτημα

Συγκεντρωτικό Παράρτημα Αρχική σελίδα -> Βρείτε το. Δεν λειτουργούν τα links Αποπροσανατολισμός, δυσλειτουργία δικτυακού τόπου Να διορθωθούν τα links Έγινε έλεγχος και διόρθωση όλων των συνδέσμων Ενότητα βιβλιοθήκη: η διαδρομή

Διαβάστε περισσότερα

JAVASCRIPT EVENTS. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

JAVASCRIPT EVENTS. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών JAVASCRIPT EVENTS Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες

Διαβάστε περισσότερα

Bringing the web offline

Bringing the web offline Bringing the web offline Η εξέλιξη του web Ήταν: Περιεχόμενο (HTML) Προστέθηκαν: Εμφάνιση (XHTML, CSS) Λειτουργικότητα (CGI scripts) Διαδραστικότητα (JavaScript) Η εξέλιξη του web Το web είναι πλέον πλατφόρμα

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

Διαβάστε περισσότερα

ΑΡΧΕς ΛΕΙΤΟΥΡΓΙΑς CMS (Content Management System) ΚΑΙ ΕΦΑΡΜΟΓΗ ΤΟΥς ςε ΜΙΚΡΟΜΕςΑΙΕς ΕΠΙΧΕΙΡΗςΕΙς

ΑΡΧΕς ΛΕΙΤΟΥΡΓΙΑς CMS (Content Management System) ΚΑΙ ΕΦΑΡΜΟΓΗ ΤΟΥς ςε ΜΙΚΡΟΜΕςΑΙΕς ΕΠΙΧΕΙΡΗςΕΙς ΑΡΧΕς ΛΕΙΤΟΥΡΓΙΑς CMS (Content Management System) ΚΑΙ ΕΦΑΡΜΟΓΗ ΤΟΥς ςε ΜΙΚΡΟΜΕςΑΙΕς ΕΠΙΧΕΙΡΗςΕΙς Χρήστος Γεωργιάδης Τμήμα Εφαρμοσμένης Πληροφορικής Πανεπιστήμιο Μακεδονίας Περιεχόμενα 1. Η εικόνα του διαδικτύου

Διαβάστε περισσότερα

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

Η βασική εργαλειοθήκη του διαδικτύου Η βασική εργαλειοθήκη του διαδικτύου Ματθαίος Πατρινόπουλος 1 2 HTML Hyper Text Markup Language Σήμερα στην έκδοση 5 --> HTML5 Δεν είναι γλώσσα προγραμματισμού αλλά γλώσσα που καθορίζει η δομή και τις

Διαβάστε περισσότερα

SharePoint Online. Δημιουργήστε μια τοποθεσία ή μια δημοσίευση ειδήσεων. Αναζήτηση Βρείτε Τοποθεσίες, Άτομα ή Αρχεία.

SharePoint Online. Δημιουργήστε μια τοποθεσία ή μια δημοσίευση ειδήσεων. Αναζήτηση Βρείτε Τοποθεσίες, Άτομα ή Αρχεία. Οδηγός γρήγορης εκκίνησης Κάντε περισσότερα όπου και αν βρίσκεστε με ασφαλή πρόσβαση, κοινή χρήση και αποθήκευση αρχείων. Πραγματοποιήστε είσοδο στη συνδρομή σας στο Office 365 και επιλέξτε το SharePoint

Διαβάστε περισσότερα

HTML HTML5...CSS

HTML HTML5...CSS CSS3 HTML5 7... CSS3 HTML5 :... HTML5...... HTML5... CSS3...CSS3...HTML5 HTML5 :...The HTML5 Herald... HTML5...HTML5......The HTML5 Herald HTML5 :......... HTML5...HTML HTML5 ... HTML5 :...HTML... HTML5...

Διαβάστε περισσότερα

Πολιτική για τα cookies

Πολιτική για τα cookies Πολιτική για τα cookies Έκδοση 1.0 Πολιτική για τα cookies Εισαγωγή Πληροφορίες για τα cookies Η πλειονότητα των ιστοτόπων που επισκέπτεστε χρησιμοποιεί τα cookies για να βελτιώνει την εμπειρία του χρήστη,

Διαβάστε περισσότερα

ΠΡΟΣΩΠΙΚΟΙ ΙΣΤΟΧΩΡΟΙ Nα δημιουργήσω/ενεργοποιήσω την προσωπική μου ιστοσελίδα Να προβάλω τις λεπτομέρειες του προφίλ μου...

ΠΡΟΣΩΠΙΚΟΙ ΙΣΤΟΧΩΡΟΙ Nα δημιουργήσω/ενεργοποιήσω την προσωπική μου ιστοσελίδα Να προβάλω τις λεπτομέρειες του προφίλ μου... ... 2 Nα δημιουργήσω/ενεργοποιήσω την προσωπική μου ιστοσελίδα... 2 Να προβάλω τις λεπτομέρειες του προφίλ μου... 3 Να επεξεργαστώ τις λεπτομέρειες του προφίλ μου... 5 Να προσθέσω, επεξεργαστώ, να διαγράψω

Διαβάστε περισσότερα

Πλατφόρμα Συνεργατικότητας (Collaboration Platform) ΧΡΗΣΗΣ. MRB Hellas System Συμβουλευτική Α.Ε

Πλατφόρμα Συνεργατικότητας (Collaboration Platform) ΧΡΗΣΗΣ. MRB Hellas System Συμβουλευτική Α.Ε σχετικά με τον έλεγχο της καπνιστικής συνήθειας 1 25 Λογισμικές εφαρμογές καταγραφής και αξιοποίησης πληροφοριών σχετικά με τον έλεγχο της καπνιστικής συνήθειας Πλατφόρμα Συνεργατικότητας (Collaboration

Διαβάστε περισσότερα

Είσοδος στην εφαρμογή Δημιουργία Εταιρίας Καρτέλα Στοιχεία εταιρίας: Καρτέλα Πρόσθετα στοιχεία: Καρτέλα Τράπεζα:...

Είσοδος στην εφαρμογή Δημιουργία Εταιρίας Καρτέλα Στοιχεία εταιρίας: Καρτέλα Πρόσθετα στοιχεία: Καρτέλα Τράπεζα:... Περιεχόμενα Είσοδος στην εφαρμογή... 3 Δημιουργία Εταιρίας... 5 Καρτέλα Στοιχεία εταιρίας:... 6 Καρτέλα Πρόσθετα στοιχεία:... 6 Καρτέλα Τράπεζα:... 7 Καρτέλα λογιστική:... 9 Καρτέλα e-mail info... 9 Δημιουργία

Διαβάστε περισσότερα

Κατασκευή Ιστολόγιου

Κατασκευή Ιστολόγιου Κατασκευή Ιστολόγιου Τι είναι το ιστολόγιο Τα blog είναι ιστοχώροι ή ιστοσελίδες που ανανεώνονται τακτικά συνήθως σε καθημερινή βάση. Περιέχουν πληροφορίες σχετικές με ένα θέμα και συνήθως χρησιμοποιούνται

Διαβάστε περισσότερα

Εφαρμογή Διαχείρισης Ψηφιακής Πληροφορίας ΟΔΗΓΟΣ ΧΡΗΣΗΣ System Συμβουλευτική Α.Ε

Εφαρμογή Διαχείρισης Ψηφιακής Πληροφορίας ΟΔΗΓΟΣ ΧΡΗΣΗΣ System Συμβουλευτική Α.Ε σχετικά με τον έλεγχο της καπνιστικής συνήθειας 1 25 Λογισμικές εφαρμογές καταγραφής και αξιοποίησης πληροφοριών σχετικά με τον έλεγχο της καπνιστικής συνήθειας Λογισμική Εφαρμογή Διαχείρισης Ψηφιακής

Διαβάστε περισσότερα

e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση

e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση e-κπαίδευση Πλατφόρµα Ασύγχρονης Τηλε-κπαίδευσης Οδηγίες χρήσης για τους σπουδαστές του ΤΕΙ Αθήνας και τους επισκέπτες της δικτυακής πύλης e-κπαίδευση - 0 - Πίνακας Περιεχοµένων 1 Εισαγωγή.. 2 1.1 Σχολές/Τµήµατα

Διαβάστε περισσότερα

Εφαρμογή Ηλεκτρονικής Υποβολής Δηλώσεων Ε9. Οδηγίες Χρήσης

Εφαρμογή Ηλεκτρονικής Υποβολής Δηλώσεων Ε9. Οδηγίες Χρήσης Εφαρμογή Ηλεκτρονικής Υποβολής Δηλώσεων Ε9 Οδηγίες Χρήσης Πίνακας Περιεχομένων 1. Αρχική οθόνη... 3 2. Αρχική Οθόνη Πιστοποιημένου Χρήστη... 4 2.1. Οριστικοποίηση της Περιουσιακής Εικόνας... 5 2.2. Καρτέλες

Διαβάστε περισσότερα

Περιεχόμενα. Πρόλογος... xiii

Περιεχόμενα. Πρόλογος... xiii Περιεχόμενα Πρόλογος... xiii Κεφάλαιο 1 ο Εισαγωγή στις τεχνολογίες Διαδικτύου... 1 1.1 Σύντομη ιστορία του Διαδικτύου... 3 1.2 Σύνδεση στο Διαδίκτυο μέσω Παρόχου (ISP)... 6 1.3 Μοντέλα Επικοινωνίας...

Διαβάστε περισσότερα

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38

Περιεχόμενα. Δημιουργία σύνδεσης... 27 5. ΤΙ ΕΙΝΑΙ ΙΣΤΟΣΕΛΙΔΕΣ ΚΑΙ ΤΙ ΤΟΠΟΘΕΣΙΕΣ ΙΣΤΟΥ... 37. Γνωριμία με μια ιστοσελίδα:... 38 Περιεχόμενα ΠΡΟΛΟΓΟΣ... 11 ΔΙΑΔΙΚΤΥΟ... 13 1. ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ... 15 2. ΤΙ ΕΙΝΑΙ ΤΟ ΔΙΑΔΙΚΤΥΟ INTERNET;... 16 3. ΤΙ ΠΡΟΣΦΕΡΕΙ ΤΟ ΔΙΑΔΙΚΤΥΟ, ΤΙ ΜΠΟΡΕΙ ΝΑ ΒΡΕΙ ΚΑΝΕΙΣ... 19 4. ΤΙ ΑΠΑΙΤΕΙΤΑΙ ΓΙΑ ΝΑ

Διαβάστε περισσότερα

Πλοήγηση www / Με τον Internet Explorer

Πλοήγηση www / Με τον Internet Explorer Πλοήγηση www / Με τον Internet Explorer Περιεχόμενα 1.Eισαγωγή 2.Το περιβάλλον του Internet Explorer 3.Οδηγίες πλοήγησης 4.Αποθήκευση αρχείων 5.Αγαπημένα 6.Ασφαλής σύνδεση 7.Διακομιστής μεσολάβησης 1.Εισαγωγή

Διαβάστε περισσότερα

Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ

Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ Εισαγωγή στο Libre Office Παρουσιάσεις με το Impress Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ Εισαγωγικά Οι παρουσιάσεις είναι μια εφαρμογή που χρησιμεύει στην παρουσίαση των εργασιών

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Στοιχεία παρουσίασης. Εισαγωγή Θεωρητικό υπόβαθρο Υλοποίηση λογισμικού μέρους συστήματος Συμπεράσματα Μελλοντικές Επεκτάσεις

Στοιχεία παρουσίασης. Εισαγωγή Θεωρητικό υπόβαθρο Υλοποίηση λογισμικού μέρους συστήματος Συμπεράσματα Μελλοντικές Επεκτάσεις ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ Σχεδιασμός Πληροφοριακού Συστήματος Καταγραφής μετρήσεων κοινής ωφελείας Υποβοηθούμενο από οπτική αναγνώριση μέσω Κινητού τηλεφώνου Μπούντας Δημήτρης Επιβλέπων Καθηγητής : Δασυγένης

Διαβάστε περισσότερα

Ανάπτυξη πλήρους διαδικτυακής e-commerce εφαρμογής με χρήση του CMS WordPress

Ανάπτυξη πλήρους διαδικτυακής e-commerce εφαρμογής με χρήση του CMS WordPress ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Ανάπτυξη πλήρους διαδικτυακής e-commerce εφαρμογής με χρήση του CMS WordPress ΚΟΤΣΟΓΙΑΝΝΙΔΗΣ ΛΑΖΑΡΟΣ Επιβλέπων καθηγητής Σφέτσος Παναγιώτης ΗΛΕΚΤΡΟΝΙΚΟ ΕΜΠΟΡΙΟ Ως Ηλεκτρονικό Εμπόριο ή

Διαβάστε περισσότερα

Γεωχωρική πληροφορία και υποστήριξη αποφάσεων σε επίπεδο ΟΤΑ

Γεωχωρική πληροφορία και υποστήριξη αποφάσεων σε επίπεδο ΟΤΑ Γεωχωρικά Συστήματα μέσω Διαδικτύου https://learn.arcgis.com/en/arcgisbook/images/ch1/01-fig-1-6.png https://unweb.me/solutions/gis-tagcloud.png Γεωχωρικά συστήματα μέσω διαδικτύου 1 WEB Sites Είναι σελίδες,

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα