Αλίκη Παπαθανασίου του Ευάγγελου

Transcript

1 Πανεπιστήμιο Μακεδονίας University of Macedonia Διατμηματικό Πρόγραμμα Μεταπτυχιακών Σπουδών στα Πληροφοριακά Συστήματα M.Sc. in Information Systems Αλίκη Παπαθανασίου του Ευάγγελου

2 Ανάγκη για Eμπλουτισμένες Eφαρμογές HTTP/HTML αρχιτεκτονική Παρουσίαση (Presentation) Επικοινωνία (Communication) Επιχειρησιακή λογική (Business Logic) Διαχείριση δεδομένων (Data Management)

3

4 Rich Internet Applications Χρησιμοποιούν δεδομένα που επεξεργάζονται και από τον εξυπηρετητή και από τον πελάτη. Δυνατότητα εκτέλεσης εργασιών στον υπολογιστή και του πελάτη και του εξυπηρετητή. Η ανταλλαγή δεδομένων λαμβάνει χώρα ασύγχρονα. Προσφέρουν ποικιλία διαδραστικών λειτουργικών ελέγχων. Δυνατότητα πιθανής χρήσης της εφαρμογής με ή χωρίς σύνδεση στο Διαδίκτυο.

5 Google Maps

6 Βασικά χαρακτηριστικά RIA H έλλειψη της περιττής επαναφόρτωσης της σελίδας. H λειτουργία drag & drop. O σύντομος χρόνος απόκρισης. Oι κινούμενες εικόνες πολυμέσων. Λειτουργίες Η ενεργή επικύρωση μέσω δικτύου. Η αυτόματη συμπλήρωση. Η περιοδική ανανέωση. Οι επεξεργαστές εμπλουτισμένων κειμένων.

7 Διακριτικά χαρακτηριστικά των RIA Διανομή Δεδομένων (Data Distribution) Διανομή υπολογισμού της σελίδας (Distribution of Page Computation) Επικοινωνία πελάτη-εξυπηρετητή (Client-server Communication) Συμπεριφορά Ενισχυμένης Διεπαφής Χρήστη (Enhanced User Interface Behaviour)

8 Διανομή Δεδομένων (Data Distribution) Τα δεδομένα μπορούν να επεξεργαστούν από τον πελάτη και τελικά να σταλθούν στον εξυπηρετητή. Πλεονεκτήματα Χρήση εκτός σύνδεσης Επικύρωση & προετοιμασία δεδομένων εκ μέρους του πελάτη Μειονεκτήματα Πιστή αντικατάσταση δεδομένων Πολιτικές κατανομής Συνέπεια δεδομένων

9 Διανομή υπολογισμού της σελίδας (Distribution of Page Computation) Παραδοσιακές διαδικτυακές εφαρμογές RIA Ένας ελεγκτής στον εξυπηρετητή συντονίζει τον υπολογισμό της σελίδας Σε κάθε αλληλεπίδραση με το χρήστη, ολόκληρη η σελίδα υπολογίζεται με προσωρινή διαγραφή και επαναφόρτωση Δεύτερος ελεγκτής στον πελάτη ευθύνεται για τον υπολογισμό και την ανανέωση τμήματος της σελίδας Πλεονεκτήματα Μειονεκτήματα Ενεργή επικύρωση Χρήση εκτός σύνδεσης Απαίτηση του πελάτη για επιπλέον δεδομένα Αναδιάταξη της σελίδας Διαμόρφωση οπτικής παρουσίασης

10 Επικοινωνία πελάτη-εξυπηρετητή (Client-server Communication) Εισάγονται μηχανισμοί για να ελαχιστοποιηθεί η μεταφορά δεδομένων (μεταφέρουν τα επίπεδα αλληλεπίδρασης και παρουσίασης από τον εξυπηρετητή στον πελάτη). Οι RIA χρησιμοποιούν σύγχρονες και ασύγχρονες επικοινωνίες. Πλεονεκτήματα Μειονεκτήματα Μερική ανανέωση σελίδας Αναδιάταξη σελίδας Διαμόρφωση οπτικής παρουσίασης

11 Συμπεριφορά Ενισχυμένης Διεπαφής Χρήστη (Enhanced User Interface Behaviour) Πλεονεκτήματα Μειονεκτήματα Λειτουργία όμοια με εκείνη των εφαρμογών μονής σελίδας Αποφυγή περιττών Προβλήματα απόδοσης και ασυμβατότητας με τους φυλλομετρητές ανανεώσεων ολόκληρης σελίδας Επιτρέπεται η προοδευτική παρουσίαση της φόρτωσης

12 Σύγκριση Desktop/ Web / Rich Internet Applications (1/3) Πλεονεκτήματα Desktop εφαρμογών: Πιο πλούσια εμπειρία για τον χρήστη (ήχος, video, επικοινωνία). Δεν απαιτείται επαναφόρτωση σελίδας. Online και offline υποστήριξη. επιτρέπουν πιο σύνθετες εφαρμογές (π.χ MS Outlook vs Webmail). Ανταποκρίνονται & αλληλεπιδρούν περισσότερο.

13 Σύγκριση Desktop/ Web / Rich Internet Applications (2/3) Πλεονεκτήματα Web εφαρμογών: Είναι εύκολο να αναπτυχθούν τα τυποποιημένα "tags" & "scripts" (γρήγορη ανάπτυξη, χαμηλό κόστος ανάπτυξης). Δεν απαιτείται εγκατάσταση, ανανεώσεις ή patches (χαμηλά κόστη παράδοσης & συντήρησης). Οι εφαρμογές είναι προσβάσιμες από υπολογιστές σε δίκτυο (διαθεσιμότητα, ευελιξία). Οι εφαρμογές μπορούν να τρέξουν σε διαφορετικά λειτουργικά συστήματα (ανεξαρτησία πλατφόρμας). Το UI είναι απλό και τυποποιημένο (χαμηλή καμπύλη εκμάθησης από τελικούς χρήστες).

14 Σύγκριση Desktop/ Web / Rich Internet Applications (3/3) Πλεονεκτήματα RIA εφαρμογών: Broadband (Ευρυζωνικότητα) Computing Power Shift (Εναλλαγή χρήσης υπολογιστικής ισχύος) Καλύτερη ανταπόκριση στις ενέργειες των χρηστών. Πρωτοβουλία των μεγάλων εταιρειών τεχνολογίας. Web Services & SOA.

15 Απαιτήσεις RIA Gmail: Web-based by Google. Calendar: Google Calendar, a collaborative online calendar. Reader: Google Reader, an offline-enabled feed reader. Docs: Google Docs, a collaborative office suite. Last.fm: A social network-enabled music site. Pages: Google Page Creator, an online web publishing suite. Facebook: A social networking platform.

16 Απαιτήσεις RIA Απαίτηση (Requirement) Uploading Files Access Server Data Browser-Based Chat User Authorization / Logout User Security Back Button Control Plug-in Communication Παράδειγμα Gmail: Adding Attachments Gmail: Download new message headers Gmail: Google chat Gmail: Sign in / out Calendar: Only certain users can access a calendar Gmail: A user cannot go back once logged out Last.fm: Clicking on a track updates the Flash player

17 Απαιτήσεις RIA Απαίτηση (Requirement) Drag and Drop Opening New Windows Runtime Interface Updates Modal Dialogs Offline Data Offline Resources Use External Components Παράδειγμα Calendar: Can drag and drop events Pages: Open links in new windows Gmail: Update Unread Mails in real time Pages: Inserting an image shows a modal dialog Reader: Download new feeds before going offline Reader: Download resources before going offline Facebook: Transitions with script.aculo.us

18 Μέθοδοι σχεδίασης RIA Ανάπτυξη βασισμένη στη γλώσσα προγραμματισμού (Code-based development) Ανάπτυξη βασισμένη σε πλαίσιο (Framework-based development) Ανάπτυξη βασισμένη σε μοντέλα (Model-driven development)

19

20 Mishelp! HTML / XHTML CSS / CSS3 Javascript jquery

21 Ajax (Asynchronous JavaScript and XML) Ο υπολογιστής ανακόπτει τα δεδομένα εισόδου του χρήστη Εμφανίζει το ζητούμενο υλικό Χειρίζεται τις αλληλεπιδράσεις στην πλευρά του πελάτη (client). Αν ο υπολογιστής χρειάζεται περισσότερα δεδομένα, ζητά υλικό από τον εξυπηρετητή χωρίς να αλλάζει κάτι στο περιβάλλον εργασίας του χρήστη. Ενώ ο χρήστης εξακολουθεί να αλληλεπιδρά με το πρόγραμμα. Η διαδικασία χρησιμοποιεί ασύγχρονη JavaScript

22 jquery Δωρεάν λογισμικό ανοιχτού κώδικα Διευκολύνεται Η δημιουργία animation, προχωρημένων εφέ & υψηλού επιπέδου widgets Η διαχείριση συμβάντων Η ανάπτυξη εφαρμογών Ajax Παρέχει τη δυνατότητα στους προγραμματιστές να δημιουργήσουν πρόσθετα (plugins).

23 HTML5 Video Ήχος SVG Καμβάς

24 HTML5 HTML5 NEWS Canvas SVG Drag and Drop GeoLocation Video ΣΥΜΒΑΤΟΤΗΤΑ ΦΥΛΛΟΜΕΤΡΗΤΗ Audio <form> / <input> Autocomplete Attribute Web storage (locally) <input> Height & Width Attributes

25 HTML5 HTML5 NEWS ΣΥΜΒΑΤΟΤΗΤΑ ΦΥΛΛΟΜΕΤΡΗΤΗ Keygen Output <form> novalidate Attribute <input> autofocus Attribute <input> formaction Attribu <input> formtarget Attribute <input> multiple Attribute <input> placeholder Attribute App cache Web workers <input> formenctype Attribute Server-Sent Events One Way Messaging <input> formmethod Attribute

26 HTML5 HTML5 NEWS ΣΥΜΒΑΤΟΤΗΤΑ ΦΥΛΛΟΜΕΤΡΗΤΗ Input type: date Input type: month Input type: number Input type: range Input type: time Input type: week Input type: url Datalist <input> formnovalidate Attribute Input type: <input> required Attribute <input> list Attribute

27 HTML5 HTML5 NEWS ΣΥΜΒΑΤΟΤΗΤΑ ΦΥΛΛΟΜΕΤΡΗΤΗ Input type: color <input> min and max Attributes <input> step Attribute Input type: datetime Input type: datetime-local Input type: search Input type: tel

28 ΕΥΧΑΡΙΣΤΩ