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

Πανεπιστήμιο Μακεδονίας

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

ΕΥΧΑΡΙΣΤΩ