Αλίκη Παπαθαναίου 2ου...
Transcript of Αλίκη Παπαθαναίου 2ου...
Αλίκη Παπαθανασίου του Ευάγγελου
Πανεπιστήμιο Μακεδονίας
University of Macedonia
Διατμηματικό Πρόγραμμα Μεταπτυχιακών Σπουδών στα Πληροφοριακά Συστήματα
M.Sc. in Information Systems
Ανάγκη για
Eμπλουτισμένες Eφαρμογές
HTTP/HTML αρχιτεκτονική
Παρουσίαση (Presentation)
Επικοινωνία (Communication)
Επιχειρησιακή λογική (Business Logic)
Διαχείριση δεδομένων (Data Management)
Rich Internet Applications
Χρησιμοποιούν δεδομένα που επεξεργάζονται και
από τον εξυπηρετητή και από τον πελάτη.
Δυνατότητα εκτέλεσης εργασιών στον υπολογιστή
και του πελάτη και του εξυπηρετητή.
Η ανταλλαγή δεδομένων λαμβάνει χώρα
ασύγχρονα.
Προσφέρουν ποικιλία διαδραστικών λειτουργικών
ελέγχων.
Δυνατότητα πιθανής χρήσης της εφαρμογής με ή
χωρίς σύνδεση στο Διαδίκτυο.
Google Maps
Βασικά χαρακτηριστικά RIA
H έλλειψη της περιττής επαναφόρτωσης
της σελίδας.
H λειτουργία drag & drop.
O σύντομος χρόνος απόκρισης.
Oι κινούμενες εικόνες πολυμέσων.
Λειτουργίες
•Η ενεργή επικύρωση μέσω δικτύου.
•Η αυτόματη συμπλήρωση.
•Η περιοδική ανανέωση.
•Οι επεξεργαστές εμπλουτισμένων κειμένων.
Διακριτικά χαρακτηριστικά των RIA
Διανομή Δεδομένων (Data Distribution)
Διανομή υπολογισμού της σελίδας (Distribution of Page Computation)
Επικοινωνία πελάτη-εξυπηρετητή (Client-server Communication)
Συμπεριφορά Ενισχυμένης Διεπαφής
Χρήστη (Enhanced User Interface Behaviour)
Διανομή Δεδομένων (Data Distribution)
Τα δεδομένα μπορούν να επεξεργαστούν
από τον πελάτη και τελικά να σταλθούν
στον εξυπηρετητή.
Πλεονεκτήματα Μειονεκτήματα
•Χρήση εκτός σύνδεσης
•Επικύρωση & προετοιμασία
δεδομένων εκ μέρους του
πελάτη
•Πιστή αντικατάσταση
δεδομένων
•Πολιτικές κατανομής
•Συνέπεια δεδομένων
Διανομή υπολογισμού της σελίδας (Distribution of Page Computation)
Παραδοσιακές διαδικτυακές εφαρμογές
Ένας ελεγκτής στον εξυπηρετητή συντονίζει τον υπολογισμό της σελίδας
Σε κάθε αλληλεπίδραση με το χρήστη, ολόκληρη η σελίδα υπολογίζεται
με προσωρινή διαγραφή και επαναφόρτωση
RIA
Δεύτερος ελεγκτής στον πελάτη ευθύνεται για τον υπολογισμό και την
ανανέωση τμήματος της σελίδας
Πλεονεκτήματα Μειονεκτήματα
•Ενεργή επικύρωση
•Χρήση εκτός σύνδεσης
•Αναδιάταξη της σελίδας
•Διαμόρφωση οπτικής
παρουσίασης
Απαίτηση του πελάτη για
επιπλέον δεδομένα
Επικοινωνία πελάτη-εξυπηρετητή (Client-server Communication)
Εισάγονται μηχανισμοί για να ελαχιστοποιηθεί η
μεταφορά δεδομένων (μεταφέρουν τα επίπεδα
αλληλεπίδρασης και παρουσίασης από τον
εξυπηρετητή στον πελάτη).
Οι RIA χρησιμοποιούν σύγχρονες και ασύγχρονες
επικοινωνίες.
Πλεονεκτήματα Μειονεκτήματα
•Μερική ανανέωση σελίδας
•Αναδιάταξη σελίδας
•Διαμόρφωση οπτικής
παρουσίασης
Συμπεριφορά Ενισχυμένης Διεπαφής
Χρήστη (Enhanced User Interface Behaviour)
Πλεονεκτήματα Μειονεκτήματα
•Λειτουργία όμοια με εκείνη των
εφαρμογών μονής σελίδας
•Αποφυγή περιττών
ανανεώσεων ολόκληρης
σελίδας
•Επιτρέπεται η προοδευτική
παρουσίαση της φόρτωσης
•Προβλήματα απόδοσης και
ασυμβατότητας με τους
φυλλομετρητές
Σύγκριση Desktop/ Web / Rich
Internet Applications (1/3)
Πλεονεκτήματα Desktop εφαρμογών:
Πιο πλούσια εμπειρία για τον χρήστη (ήχος, video, επικοινωνία).
Δεν απαιτείται επαναφόρτωση σελίδας.
Online και offline υποστήριξη.
επιτρέπουν πιο σύνθετες εφαρμογές (π.χ MS Outlook vs Webmail).
Ανταποκρίνονται & αλληλεπιδρούν περισσότερο.
Σύγκριση Desktop/ Web / Rich
Internet Applications (2/3)
Πλεονεκτήματα Web εφαρμογών: Είναι εύκολο να αναπτυχθούν τα τυποποιημένα
"tags" & "scripts" (γρήγορη ανάπτυξη, χαμηλό κόστος ανάπτυξης).
Δεν απαιτείται εγκατάσταση, ανανεώσεις ή patches (χαμηλά κόστη παράδοσης & συντήρησης).
Οι εφαρμογές είναι προσβάσιμες από υπολογιστές σε δίκτυο (διαθεσιμότητα, ευελιξία).
Οι εφαρμογές μπορούν να τρέξουν σε διαφορετικά λειτουργικά συστήματα (ανεξαρτησία πλατφόρμας).
Το UI είναι απλό και τυποποιημένο (χαμηλή καμπύλη εκμάθησης από τελικούς χρήστες).
Σύγκριση Desktop/ Web / Rich
Internet Applications (3/3)
Πλεονεκτήματα RIA εφαρμογών:
Broadband (Ευρυζωνικότητα)
Computing Power Shift (Εναλλαγή
χρήσης υπολογιστικής ισχύος)
Καλύτερη ανταπόκριση στις
ενέργειες των χρηστών.
Πρωτοβουλία των μεγάλων εταιρειών
τεχνολογίας.
Web Services & SOA.
Απαιτήσεις RIA Gmail: Web-based e-mail by Google.
http://www.gmail.com
Calendar: Google Calendar, a collaborative online
calendar. http://calendar.google.com
Reader: Google Reader, an offline-enabled feed reader.
http://reader.google.com
Docs: Google Docs, a collaborative office suite.
http://docs.google.com
Last.fm: A social network-enabled music site.
http://www.last.fm
Pages: Google Page Creator, an online web publishing
suite. http://pages.google.com
Facebook: A social networking platform.
http://www.facebook.com
Απαιτήσεις RIA
Απαίτηση (Requirement) Παράδειγμα
Uploading Files Gmail: Adding Attachments
Access Server Data Gmail: Download new message
headers
Browser-Based Chat Gmail: Google chat
User Authorization / Logout Gmail: Sign in / out
User Security Calendar: Only certain users
can access a calendar
Back Button Control Gmail: A user cannot go back
once logged out
Plug-in Communication Last.fm: Clicking on a track
updates the Flash player
Απαιτήσεις RIA Απαίτηση (Requirement) Παράδειγμα
Drag and Drop Calendar: Can drag and drop
events
Opening New Windows Pages: Open links in new
windows
Runtime Interface Updates Gmail: Update Unread Mails in
real time
Modal Dialogs Pages: Inserting an image
shows a modal dialog
Offline Data Reader: Download new feeds
before going offline
Offline Resources Reader: Download resources
before going offline
Use External Components Facebook: Transitions with
script.aculo.us
Μέθοδοι σχεδίασης RIA
Ανάπτυξη βασισμένη στη γλώσσα
προγραμματισμού (Code-based
development)
Ανάπτυξη βασισμένη σε πλαίσιο (Framework-based development)
Ανάπτυξη βασισμένη σε μοντέλα (Model-driven development)
Mishelp!
HTML / XHTML
CSS / CSS3
Javascript
jQuery
Ajax (Asynchronous JavaScript and XML)
Ο υπολογιστής ανακόπτει τα δεδομένα εισόδου του χρήστη
Εμφανίζει το ζητούμενο υλικό
Χειρίζεται τις αλληλεπιδράσεις στην πλευρά του πελάτη (client).
Αν ο υπολογιστής χρειάζεται περισσότερα δεδομένα, ζητά υλικό από τον εξυπηρετητή χωρίς να αλλάζει κάτι στο περιβάλλον εργασίας του χρήστη.
Ενώ ο χρήστης εξακολουθεί να αλληλεπιδρά με το πρόγραμμα.
Η διαδικασία χρησιμοποιεί ασύγχρονη JavaScript
jQuery
Δωρεάν λογισμικό ανοιχτού κώδικα
Διευκολύνεται Η δημιουργία animation, προχωρημένων εφέ
& υψηλού επιπέδου widgets
Η διαχείριση συμβάντων
Η ανάπτυξη εφαρμογών Ajax
Παρέχει τη δυνατότητα στους προγραμματιστές να δημιουργήσουν πρόσθετα (plugins).
HTML5
Video
Ήχος
SVG
Καμβάς
HTML5
HTML5 NEWS ΣΥΜΒΑΤΟΤΗΤΑ
ΦΥΛΛΟΜΕΤΡΗΤΗ
Canvas Audio
SVG <form> / <input>
Autocomplete Attribute
Drag and Drop Web storage (locally)
GeoLocation <input> Height & Width
Attributes
Video
HTML5 HTML5 NEWS ΣΥΜΒΑΤΟΤΗΤΑ
ΦΥΛΛΟΜΕΤΡΗΤΗ
Keygen <input> formtarget Attribute
Output <input> multiple Attribute
<form> novalidate Attribute <input> placeholder Attribute
<input> autofocus Attribute App cache
<input> formaction Attribu Web workers
<input> formenctype Attribute Server-Sent Events –
One Way Messaging
<input> formmethod Attribute
HTML5
HTML5 NEWS ΣΥΜΒΑΤΟΤΗΤΑ
ΦΥΛΛΟΜΕΤΡΗΤΗ
Input type: date Input type: range
Input type: month Input type: time
Input type: number Input type: week
Input type: url Input type: email
Datalist <input> required Attribute
<input> formnovalidate Attribute <input> list Attribute
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
ΕΥΧΑΡΙΣΤΩ