ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΜΕΘΟΔΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΚΑΙ ΠΡΟΣΑΡΜΟΣΤΙΚΟΤΗΤΑΣ ΕΦΑΡΜΟΓΩΝ ΓΙΑ ΤΟ MOBILE WEB

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΜΕΘΟΔΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΚΑΙ ΠΡΟΣΑΡΜΟΣΤΙΚΟΤΗΤΑΣ ΕΦΑΡΜΟΓΩΝ ΓΙΑ ΤΟ MOBILE WEB ΒΕΡΡΑ ΜΑΡΙΑ Α.Μ ΕΠΙΒΛΕΠΩΝ ΚΑΘΗΓΗΤΗΣ: ΘΕΟΔΩΡΟΣ ΠΑΠΑΘΕΟΔΩΡΟΥ ΠΑΤΡΑ 2009

2 Ευχαριστίες Θα ήθελα να ευχαριστήσω τον επιβλέποντα καθηγητή μου κύριο Θεόδωρο Παπαθεοδώρου και τον Τζανέτο Πομόνη για τη συνεργασία τους και τη βοήθειά τους προκειμένου να διεκπεραιωθεί η παρούσα εργασία. 2

3 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ 1. Εισαγωγή 2. Mobile Web 2.1 Ορισμός του Mobile Web σελ Ορισμός του Mobile browser.σελ Γλώσσες σήμανσης περιεχομένου για το Mobile Web.σελ Standards σελ One Web..σελ Σύγκριση Web Mobile Web 3.1 Βασικά χαρακτηριστικά..σελ HTML XHTML.σελ WML XHTML MP σελ Μέθοδοι βελτιστοποίησης και προσαρμοστικότητας των εφαρμογών για το Mobille Web 4.1 Ολική συμπεριφορά..σελ Πλοήγηση και σύνδεσμοι..σελ Διάταξη σελίδας σελ Καθορισμός σελίδας σελ Συμπεράσματα & Μελλοντική εργασία ΠΑΡΑΡΤΗΜΑ : Βιβλιογραφία 3

4 ΚΕΦΑΛΑΙΟ 1 ΕΙΣΑΓΩΓΗ 4

5 Η τεχνολογία των υπηρεσιών των ασύρματων και φορητών συσκευών αποτελεί μία πολλά υποσχόμενη τεχνολογία για την ανάπτυξη εφαρμογών σε ένα κατανεμημένο και πλήρως ετερογενές περιβάλλον. Παρατηρώντας όλα τα πλεονεκτήματα που συνοδεύουν την τεχνολογία των υπηρεσιών αυτών, όπως είναι η διαλειτουργικότητα (interoperability), η δυναμική ανεύρεση υπηρεσιών και η επαναχρησιμοποίηση, υπάρχει έντονο ενδιαφέρον για την προσαρμογή των φορητών συσκευών, ικανών όχι μόνο να αξιοποιούν αλλά και να παρέχουν τέτοιου είδους υπηρεσίες μέσα από τα ασύρματα δίκτυα. Στην ανάπτυξη και εξέλιξη των ασύρματων δικτύων οφείλει την ύπαρξή του και το Mobile Web. Αντικείμενο της παρούσας εργασίας λοιπόν αποτελεί η μελέτη των μεθόδων βελτιστοποίησης και προσαρμοστικότητας των εφαρμογών του Mobile Web. Στόχος είναι να περιγραφούν όλα τα βασικά χαρακτηριστικά του και να προταθούν τρόποι προκειμένου η προσπέλαση του Web από μία φορητή συσκευή μικρής οθόνης (κινητό τηλέφωνο) να είναι εξίσου άμεση και αξιόπιστη με αυτή από έναν υπολογιστή γραφείου (desktop computer). Αναλογιζόμενος τις διαφορές που εμφανίζουν τα δύο μέσα πρόσβασης στο διαδίκτυο (κινητό τηλέφωνο υπολογιστής γραφείου), ο σχεδιαστής οφείλει να προσαρμόσει το περιεχόμενο μίας ιστοσελίδας χρησιμοποιώντας ποικίλους μηχανισμούς ώστε αυτό να εμφανίζεται στο χρήστη εύκολα και με τρόπο κατανοητό. Όλα αυτά όμως δεν έχουν καμία απολύτως σημασία αν δεν αναλογιστεί κανείς ότι η αγορά βομβαρδίζεται με ποικιλία κινητών (για λόγους ανταγωνιστικότητας) που το καθένα από αυτά έχει και διαφορετικά χαρακτηριστικά όπως μέγεθος οθόνης, χρώματα, γραφικά και εύρος δεδομένων. Κατ επέκταση χρίζει ιδιαίτερης σημασίας η μελέτη των περιορισμών που αυτά θέτουν. Το ιδανικό είναι το περιεχόμενο της ιστοσελίδας που προσπελαύνεται από το κινητό τηλέφωνο να έχει την ίδια παρουσίαση και εμφάνιση με αυτό που προσπελαύνεται από έναν υπολογιστή γραφείου, κάτι το οποίο αυξάνει την εμπειρία του χρήστη (user experience). Εάν αυτό επιτευχθεί τότε είναι βέβαιο ότι ο αριθμός των χρηστών του Mobile Web θα παρουσιάσει αύξηση. Η εργασία αυτή απαρτίζεται από πέντε κεφάλαια, η δομή και το περιεχόμενο των οποίων είναι : Κεφάλαιο 2 Mobile Web Στο κεφάλαιο αυτό δίνεται ο ορισμός του Mobile Web, αναλύονται τα βασικά χαρακτηριστικά του και περιγράφονται έννοιες και όροι που συνδέονται με αυτό όπως ο mobile browser. Ακόμη, περιγράφονται κάποιες γλώσσες σήμανσης περιεχομένου (WML, XHTML, XHTML Mobile Profile) που χρησιμοποιούνται τα τελευταία χρόνια για την ανάπτυξη των εφαρμογών του Mobile Web. Κεφάλαιο 3 Σύγκριση Web Mobile Web Στο κεφάλαιο αυτό δίνονται οι ομοιότητες και οι διαφορές του Mobile Web και του κλασικού Web με σκοπό την προσέγγιση εκείνων των σημείων που θα οδηγήσουν στην βελτιστοποίηση των εφαρμογών του Mobile Web. Αντιπαραβάλλονται τα βασικά τους χαρακτηριστικά προκειμένου να γίνει καλύτερα κατανοητή η χρήση του Mobile Web και παρατίθεται σύγκριση των γλωσσών σήμανσης περιεχομένου (XHTML-HTML, WML-XHTML MP, XHTML- XHTML MP). 5

6 Κεφάλαιο 4 Μέθοδοι βελτιστοποίησης και προσαρμοστικότητας των εφαρμογών για το Mobile Web. Στο κεφάλαιο αυτό δίνονται πρακτικές και περιγράφονται τρόποι ώστε να επιτευχθεί η βελτιστοποίηση των εφαρμογών του Mobile Web. Κεφάλαιο 5 Συμπεράσματα Μελλοντική εργασία Στο κεφάλαιο αυτό αναλύονται τα συμπεράσματα που προέκυψαν από τη συγγραφή των προηγούμενων κεφαλαίων, ενώ ακόμη παρατίθεται και πιθανή μελλοντική εργασία που θα μπορούσε να πραγματοποιηθεί προκειμένου να αποτελέσει συνέχεια της παρούσας εργασίας. 6

7 ΚΕΦΑΛΑΙΟ 2 MOBILE WEB 7

8 2.1 Ορισμός του Mobile Web Για να μπορέσει να κατανοήσει κανείς τις τεχνικές βελτιστοποίησης των εφαρμογών του Mobile Web είναι ιδιαίτερα σημαντικό να οριστεί τι είναι αυτό. Με τον όρο Mobile Web περιγράφονται υπηρεσίες όπως το World Wide Web (σύστημα υπερσυνδέσμων στο οποίο επιτυγχάνεται πρόσβαση μέσω του διαδικτύου), WAP (συσκευή η οποία επιτρέπει ασύρματη επικοινωνία), και i- mode, οι οποίες είναι βασισμένες σε κάποιον web browser και οι οποίες χρησιμοποιούν κάποια φορητή συσκευή μικρής οθόνης όπως είναι τα κινητά τηλέφωνα, τα PDA s ή οποιαδήποτε άλλη φορητή συσκευή που είναι συνδεδεμένη σε δημόσιο δίκτυο. Κατά συνέπεια ο χρήστης αποκτά πρόσβαση στο διαδίκτυο από οποιοδήποτε σημείο κι αν βρίσκεται χωρίς να απαιτείται υπολογιστής γραφείου (desktop computer) ή προκαθορισμένη σύνδεση με καλώδια. Αποκτά συνεπώς το πλεονέκτημα της άμεσης πρόσβασης στο διαδίκτυο από το κινητό του τηλέφωνο με αποτέλεσμα να αυξάνεται η διαλειτουργικότητα και η χρηστικότητα. Ωστόσο, ο χρήστης του Mobile Web δεν έχει συνήθως τα ίδια ενδιαφέροντα και τις ίδιες ανάγκες με το χρήστη του κλασικού Web. Ενώ ο χρήστης του κλασικού Web μπορεί να ενδιαφέρεται να περιηγηθεί στο διαδίκτυο, να αναζητήσει μακροσκελείς πληροφορίες και να ανατρέξει σε διαφημιστικά παράθυρα, ο χρήστης του Mobile Web προτιμά να προσπελαύνει ιστοσελίδες που του παρέχουν χρήσιμες πληροφορίες όπως τα δρομολόγια των λεωφορείων, την πρόγνωση του καιρού ή την ανταλλαγή μηνυμάτων. Αυτό δε σημαίνει φυσικά πως στο Mobile Web εκλείπουν τα διαφημιστικά παράθυρα. Απεναντίας οι διαφημιστές θεωρούν το κινητό τηλέφωνο ως ένα ιδανικό μέσο για την προώθηση των προϊόντων τους αφού ο αριθμός των χρηστών του είναι τεράστιος. Επειδή λοιπόν καλύπτονται διαφορετικές ανάγκες πρέπει και ο σχεδιασμός των αντίστοιχων εφαρμογών να είναι διαφορετικός. Μάλιστα ο σχεδιασμός και η ανάπτυξη των εφαρμογών του Mobile Web απαιτεί ιδιαίτερη προσοχή αφού κάθε φορητή συσκευή έχει και τα δικά της ιδιαίτερα χαρακτηριστικά. Αν επομένως το περιεχόμενο μίας ιστοσελίδας εμφανίζεται με διαφορετική μορφή στα διάφορα κινητά τότε ο χρήστης δεν θα μπορεί να εξοικειωθεί πολύ εύκολα με αυτό και η εμπειρία του χρήστη θα είναι μικρή. Για τον ίδιο λόγο έχουν αναπτυχθεί και κάποια standards που καθορίζουν μία συγκεκριμένη γλώσσα σήμανσης περιεχομένου, συγκεκριμένη κωδικοποίηση χαρακτήρων, συγκεκριμένο μέγεθος περιεχομένου κ.α., ώστε να μετριάζονται οι διαφορές των φορητών συσκευών περιορισμένης οθόνης. Απαραίτητος όμως για την πρόσβαση του χρήστη στο διαδίκτυο από ένα κινητό τηλέφωνο είναι ο mobile browser σε αντιστοιχία με τον κλασικό browser. 2.2 Ορισμός του Mobile browser Για να επιτευχθεί πρόσβαση στο Mobile Web μέσω μιας φορητής συσκευής μικρής οθόνης (mobile device) χρησιμοποιείται κάποιος mobile browser (επίσης αποκαλείται και microbrowser ή wireless internet browser). Το λογισμικό του πρέπει να είναι μικρό και αποτελεσματικό ώστε να μπορεί να ανταποκρίνεται στις μικρής μνήμης και μικρού εύρους φορητές συσκευές. Πιο συγκεκριμένα η λειτουργία του είναι η εξής: ο mobile browser συνδέεται 8

9 συνήθως μέσω ενός κυψελοειδούς δικτύου χρησιμοποιώντας HTTP και TCP/IP πρωτόκολλα και προσπελαύνει σελίδες γραμμένες σε HTML, XHTML, Mobile Profile(WAP 2.0) ή WML οι οποίες θα περιγραφούν στη συνέχεια. Το Mobile Web αρχικά χρησιμοποιούσε απλές σελίδες σε Extensible Hypertext Markup Language (XHTML) και Wireless Markup Language (WML). Ωστόσο πολλοί καινούργιοι mobile browsers ξεπερνούν αυτούς τους περιορισμούς υποστηρίζοντας ένα ευρύτερο φάσμα. Υπάρχει μεγάλη ποικιλία mobile browser. Από αυτούς υπάρχουν κάποιοι πολύ καλοί οι οποίοι μπορούν να προσπελάσουν πληθώρα ιστοσελίδων και παρέχουν τη δυνατότητα μεγέθυνσης των εικόνων και πλήκτρα συντόμευσης διάφορων λειτουργιών ενώ υπάρχουν και κάποιοι άλλοι οι οποίοι μπορούν να προσπελάσουν μόνο βασικές ιστοσελίδες και έχουν περιορισμένες δυνατότητες. Ενώ κάποιες φορητές συσκευές δεν δίνουν τη δυνατότητα χρήσης οποιουδήποτε mobile browser, πολλά καινούργια κινητά τηλέφωνα τρέχουν λειτουργικά συστήματα τα οποία υποστηρίζουν αρκετούς από αυτούς. Οι πιο γνωστοί mobile browsers φαίνονται στον πίνακα1: Browser jb5 Browser Polaris browser Kindle Basic Web Android browser WebOS Browser BlackBerry Browser Blazer Fennec Internet Explorer Mobile Iris Browser Myriad Browser (Previously Openwave Mobile Browser) NetFront Nokia Series 40 Browser Obigo Browser Opera Mobile PlayStation Portable web browser Safari Skyfire Mobile Browser uzard Web Firefox web browser Πίνακας1 : δημοφιλείς mobile browsers 9

10 2.3 Γλώσσες Σήμανσης Περιεχομένου (markup languages) Για τις εφαρμογές του Mobile Web χρησιμοποιούνται γλώσσες σήμανσης περιεχομένου όπως η WML (Wireless Markup Language), η XHTML (Extensible Hypertext Markup Language) και η XHTML MP (Extensible Hypertext Markup Language Mobile Profile). Κάθε μία από αυτές έχει τα δικά της χαρακτηριστικά που σε αρκετές περιπτώσεις είναι κοινά αφού όλες έχουν τη ρίζα τους στην XML. Ωστόσο κάθε μία διαφοροποιείται από την άλλη σε κάποια σημεία της σύνταξής τους. WML μία παγκόσμια γλώσσα- πρότυπο για το Mobile Web Η WML είναι βασισμένη στην XML (Extensible Markup Language) και προορίζεται για ανάπτυξη εφαρμογών σε συσκευές που υποστηρίζουν το WAP (wireless application protocol) όπως τα κινητά τηλέφωνα. Έχει σχεδιαστεί λοιπόν για συσκευές μικρού εύρους και μικρής προσπέλασης. Η WML μοιάζει αρκετά με την HTML στο ότι και οι δύο γλώσσες παρέχουν πλοηγητική υποστήριξη, δεδομένα εισόδου, hyperlinks, κείμενο, αναπαράσταση εικόνας και φόρμες. Στην WML κάθε έγγραφο είναι γνωστό με τον όρο «deck». Τα δεδομένα τώρα μέσα σε ένα deck δομούνται σε μία ή περισσότερες σελίδες που ονομάζονται «cards» και κάθε μία από αυτές αναπαριστά μία αλληλεπίδραση με το χρήστη. Πολλές φορές που η μνήμη της συσκευής είναι περιορισμένη πρέπει τα cards να χωρίζονται σε πολλαπλά decks ώστε να μην υπερφορτώνεται ένα deck με όλα τα cards. Στη συνέχεια τα WML decks αποθηκεύονται σε ένα συνηθισμένο web server, ενώ όταν ζητηθούν οι WML cards από κάποια συσκευή αυτές μεταφέρονται από μια WAP gateway στη συσκευή του κινητού. Οι gateways στέλνουν τις σελίδες σε μορφή κατάλληλη για υποδοχή από τα κινητά τηλέφωνα. Πρέπει να επισημανθεί ότι η πραγματική δύναμη της WML είναι ότι παρέχει μία διεπαφή για το υλικό του κινητού τηλεφώνου προκειμένου να ξεκινήσει μία κλήση βασισμένη σε αυτό που ζητήθηκε από το χρήστη. Οι ετικέτες της WML φαίνονται στους πίνακες που ακολουθούν : ετικέτα WML περιεχόμενο <access> <card> <head> <meta> <template> <wml> ορίζει πληροφορία για τον έλεγχο πρόσβασης deck ορίζει μία card ενός deck περιέχει πληροφορία για το έγγραφο ορίζει μετα-πληροφορία για το έγγραφο ορίζει έναν κωδικό για τις card ενός deck ορίζει ένα wml deck (wml root) <!--> ορίζει ένα σχόλιο Πίνακας2 : βασικές ετικέτες της WML 10

11 ετικέτα <br> <p> <table> <td> <tr> περιεχόμενο ορίζει κενή γραμμή ορίζει παράγραφο ορίζει πίνακα ορίζει ένα κελί πίνακα ορίζει μία γραμμή πίνακα Πίνακας3 : ετικέτες κειμένου της WML ετικέτα <b> <big> <em> <i> <small> <strong> <u> περιεχόμενο ορίζει κείμενο με χαρακτήρες bold ορίζει κείμενο με μεγάλους χαρακτήρες ορίζει κείμενο με χαρακτήρες που έχουν έμφαση ορίζει κείμενο με χαρακτήρες italic ορίζει κείμενομε μικρούς χαρακτήρες ορίζει κείμενο με μεγάλους χαρακτήρες ορίζει κείμενο με υπογραμμισμένους χαρακτήρες Πίνακας4 : ετικέτες σχηματισμού κειμένου της WML XHTML μία παγκόσμια γλώσσα πρότυπο για το Web Η XHTML ανήκει και αυτή στην οικογένεια των XML γλωσσών και είναι σχεδόν ταυτοτική με την HTML, ωστόσο αποτελεί μία καλύτερα δομημένη εκδοχή της. Είναι δηλαδή ένας συνδυασμός της XML και της HTML, υιοθετώντας όλα τα στοιχεία της HTML και την αυστηρή σύνταξη της XML. Υποστηρίζεται από σχεδόν όλους τους browsers και συστήνεται ως γλώσσα ανάπτυξης εφαρμογών του Mobile Web από την W3C (World Wide Web Consortium, το οποίο αναπτύσσει τεχνολογίες ώστε οι λειτουργίες του Web να βελτιώνονται συνεχώς). Τα βασικά χαρακτηριστικά του συντακτικού της είναι : 11

12 ένα XHTML έγγραφο αποτελείται από τα εξής μέρη : 1. τη δήλωση DOCTYPE 2. το τμήμα <head> 3. το τμήμα <body> και η δομή του είναι αυτή: <!DOCTYPE...> <html> <head> <title>...</title> </head> <body>...</body> </html> τα ονόματα των μεταβλητών πρέπει να είναι με πεζούς χαρακτήρες π.χ. <table WIDTH= 100% > <table width= 100% > οι τιμές των μεταβλητών της XHTML πρέπει να βρίσκονται σε π.χ. <table width=100%> <table width= 100% > απαγορεύεται η απλοποίηση των δηλώσεων μεταβλητών π.χ. 12

13 <input checked> <input readonly> <input disabled> <option selected> <frame noresize> <input checked= checked /> <input readonly= readonly /> <input disabled= disabled /> <option selected= selected /> <frame noresize= noresize /> Στον πίνακα που ακολουθεί παρουσιάζονται κάποιες από τις ιδιότητες της XHTML και πώς αυτές απλοποιούνται στην HTML : HTML compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize" Πίνακας5 : σύγκριση ιδιοτήτων HTML-XHTML 13

14 Μερικές διαφορές αυτών των δύο γλωσσών φαίνονται παρακάτω: Τα XHTML elements(στοιχεία) πρέπει να είναι σωστά εμφωλευμένα: π.χ. <b><i>this text is bold and italic</b></i> <b><i>this text is bold and italic</i></b> Τα XHTML elements πρέπει πάντα να κλείνουν π.χ. <p>this is a paragragh <p>this is a paragragh</p> Τα άδεια elements πρέπει να κλείνουν π.χ. A break:<br> A break:<br/> Τα XHTML elements πρέπει να έχουν πεζούς χαρακτήρες π.χ. <BODY> <body> XHTML Mobile Profile μία παγκόσμια markup γλώσσα για το Mobile Web Η XHTML MP γλώσσα αποτελεί υποσύνολο της XHTML η οποία είναι μια αυστηρότερη εκδοχή της HTML. Είναι ουσιαστικά η XHTML Basic με κάποια επιπρόσθετα στοιχεία και ιδιότητες της XHTML. Ο στόχος της XHTML MP είναι να συνενώσει τις τεχνολογίες που χρησιμοποιούνται για την πρόσβαση στο διαδίκτυο από τα κινητά με αυτές για το WWW (World Wide Web). Πριν την έλευση αυτής της γλώσσας σήμανσης περιεχομένου οι σχεδιαστές των WAP ιστοσελίδων έκαναν χρήση της WML ενώ οι σχεδιαστές των web ιστοσελίδων χρησιμοποιούσαν την HTML. Με την παρουσία όμως αυτής της markup 14

15 γλώσσας, δεν είναι μόνο η παρουσίασή τους καλύτερη αλλά δίνεται παράλληλα και η δυνατότητα να χρησιμοποιούνται οι ίδιες τεχνολογίες για τον σχεδιασμό των WAP και web ιστοσελίδων. Τα πλεονεκτήματα της XHTML MP είναι : Μπορούν να χρησιμοποιηθούν τα ίδια εργαλεία για την ανάπτυξη τόσο web σελίδων όσο και WAP σελίδων με αποτέλεσμα να μειώνεται το κόστος σχεδιασμού αλλά και ο χρόνος εκμάθησης νέων εργαλείων. Εφόσον ο χρήστης είναι εξοικειωμένος με τεχνολογίες διαδικτύου όπως η HTML, XHTML και CSS μπορεί να σχεδιάσει μια WAP σελίδα. Συνηθισμένοι web browsers μπορούν να χρησιμοποιηθούν σαν εξομοιωτές για δοκιμή των WAP σελίδων. Η XHTML MP υποστηρίζει WAP CSS, κάτι το οποίο επιτρέπει το διαχωρισμό του περιεχομένου και της παρουσίασης σε διαφορετικά αρχεία. Αυτό σημαίνει ότι το περιεχόμενο χρειάζεται μία φορά να γραφεί ενώ η παρουσίαση μπορεί να αλλάζει ανάλογα με τη συσκευή που χρησιμοποιείται κάθε φορά. Επιπλέον, με τη βοήθεια του WAP CSS ο χρήστης αποκτά μεγαλύτερο έλεγχο στην παρουσίαση π.χ. μπορεί να αλλάζει το μέγεθος της γραμματοσειράς, τα χρώματα και τα περιθώρια. Κάποια βασικά χαρακτηριστικά της WML που δεν υποστηρίζονται από την XHTML MP είναι : 1. Η XHTML MP δεν υποστηρίζει decks και cards. 2. Η XHTML MP δεν υποστηρίζει μετρητές. 3. Η XHTML MP δεν υποστηρίζει μεταβλητές. 4. Η XHTML MP δεν υποστηρίζει γράψιμο από τη μεριά του χρήστη. 5. Η XHTML MP δεν υποστηρίζει την <u> ετικέτα. 6. Η XHTML MP δεν υποστηρίζει γεγονότα. Επιπροσθέτως, συγκρίνοντας την XHTML και την XHTML MP προκύπτει ότι τα forms που υποστηρίζει η πρώτη είναι τα form, input, label, option, select, textarea ενώ η δεύτερη μπορεί να υποστηρίξει επιπλέον και τα fieldset και optgroup. Κάποιοι βασικοί κανόνες σύνταξης της XHTML MP είναι : (στα παραδείγματα που ακολουθούν οι υπογραμμισμένες προτάσεις είναι οι λανθασμένες) οι ετικέτες που έχουν ανοίξει πρέπει και να κλείνουν σωστά π.χ. <p> XHTML MP tutorial paragragh 1 <p> XHTML MP tutorial paragragh 1</p> 15

16 οι ετικέτες και οι ιδιότητες πρέπει να έχουν πεζούς χαρακτήρες π.χ. <P ID= p1 > XHTML MP tutorial paragragh 1 </P> <p id= p1 > XHTML MP tutorial paragragh 1 </p> η τιμή μιας ιδιότητας πρέπει να περικλείεται σε ή π.χ. <p id=p1> XHTML MP tutorial paragragh 1 </p> <p id= p1 > XHTML MP tutorial paragragh 1 </p> δεν επιτρέπεται ελαχιστοποίηση των ιδιοτήτων ακόμη και αν αυτές έχουν μία μόνο τιμή οι ετικέτες πρέπει να είναι σωστά εμφωλευμένες π.χ. <p><b> XHTML MP tutorial paragragh1</p> </b> <p><b> XHTML MP tutorial paragragh1</b></p> τα σχόλια περικλείονται σε <!-- --> π.χ. <!--This is a comment in XHTML MP --> <!-- This is a multi-line comment in XHTML MP --> 16

17 Για την αλλαγή γραμμής χρησιμοποιείται η ετικέτα <br/>. π.χ. Line 1<br/> Line 2<br/><br/> Line 3 αυτό που θα εμφανίσει είναι: Line 1 Line 2 Line 3 τα στοιχεία <h1>,<h2>,<h3>,<h4>,<h5>,<h6> χρησιμοποιούνται για να καθορίσουν το μέγεθος των επικεφαλίδων (αντίστοιχα επίπεδο 1-επίπεδο 6) π.χ. <h1> Level 1 Heading </h1> <h6> Level 6 Heading </h6> αυτό που θα εμφανίσει είναι: Level 1 Heading Level 6 Heading 2.4 Standards του Mobile Web Οι κατασκευαστές των κινητών τηλεφώνων για να μπορέσουν να ανταπεξέλθουν σε μία ανταγωνιστική αγορά δημιουργούν προϊόντα που έχουν πολλά και διαφορετικά χαρακτηριστικά. Διαφορετικές συσκευές έχουν και διαφορετικά χαρακτηριστικά με αποτέλεσμα να μην είναι και τόσο απλά η ανάπτυξη και ο σχεδιασμός των εφαρμογών του Mobile Web. Αυτή η συμπεριφορά ονομάζεται πολυμορφία (Device Market Fragmentation ή Device Diversity) των συσκευών και μερικά παραδείγματα τέτοιων διαφορών όσον αφορά τα κινητά τηλέφωνα μπορεί να είναι σε επίπεδο: 17

18 Υλικού (μέγεθος οθόνης, πληκτρολόγιο) Δικτύου (ταχύτητα σύνδεσης, bandwidth) Συμπεριφοράς browser (open wave browser nokia browser opera browser) Η ανάπτυξη λοιπόν κάποιων standards αποτελεί μία αρκετά καλή προσέγγιση στην βελτίωση της διαλειτουργικότητας, της χρησιμότητας και της προσβασιμότητας στη χρήση των εφαρμογών του Mobile Web. Στόχος είναι να γίνει η πρόσβαση στο διαδίκτυο από τα κινητά τηλέφωνα πιο αξιόπιστη και συμβατή. Κάπου εδώ υπεισέρχεται και η έννοια της προσαρμογής περιεχομένου (content adaptation), η οποία περιγράφει τη διαδικασία με την οποία γίνονται τροποποιήσεις στο περιεχόμενο για να βελτιωθεί η εμπειρία του χρήστη. Η μεγάλη ποικιλία των χαρακτηριστικών στις συσκευές κινητών τηλεφώνων καθιστά δύσκολη για μια ιστοσελίδα μία αποδεκτή εμπειρία χρήστη. Για παράδειγμα διαφορετικές συσκευές υποστηρίζουν διαφορετικά πρότυπα χαρακτηριστικά και διαφορετικά μεγέθη οθόνων μπορεί να απαιτούν διαφορετικά μεγέθη εικόνων. Στον πίνακα που ακολουθεί εμφανίζονται τα πρότυπα χαρακτηριστικά που πρέπει να πληρούν τα κινητά τηλέφωνα για τις εφαρμογές του Mobile Web: XHTML MP χρώματα 120x120 pixels 10 ΚB περιεχομένου 9.6 kbps bandwidth GIF και JPEG UTF-8 τα κινητά πρέπει να υποστηρίζουν ως markup language την XHTML MP 1.0 οι οθόνες των κινητών πρέπει να υποστηρίζουν 256 χρώματα τουλάχιστον οι οθόνες των κινητών πρέπει να είναι τουλάχιστον 120x120 pixels το μέγεθος του περιεχομένου(content) δεν πρέπει να ξεπερνά τα 10 KB το εύρος ζώνης των δεδομένων δεν πρέπει να ξεπερνά τα 9.6 KB το δευτερόλεπτο οι συσκευές των κινητών τηλεφώνων πρέπει να υποστηρίζουν μηχανισμούς συμπίεσης GIF και JPEG χρησιμοποιείται ως κωδικοποίηση χαρακτήρων η UTF-8 18

19 2.5 One Web Άμεσα συνδεδεμένη έννοια με το Mobile Web είναι το One Web. Ο όρος αυτός σηματοδοτεί ότι ανεξάρτητα της συσκευής που χρησιμοποιείται πρέπει να εμφανίζεται η ίδια πληροφορία και οι ίδιες υπηρεσίες. Ωστόσο, αυτό δε σημαίνει ότι ακριβώς η ίδια πληροφορία θα είναι διαθέσιμη με την ίδια παρουσίαση (εμφάνιση) σε όλες τις συσκευές κινητών τηλεφώνων. Η παρουσίαση επηρεάζεται από παράγοντες όπως : Θέματα εύρους Ιδιότητες δικτύου Χρήσης του περιεχομένου από τα κινητά Ικανότητες της συσκευής Εάν ο χρήστης προσπελάσει μία ιστοσελίδα από έναν υπολογιστή γραφείου και στη συνέχεια προσπελάσει την ίδια ιστοσελίδα από ένα κινητό τηλέφωνο τότε στηριζόμενοι στην αρχή του «One Web» θα πρέπει να έχουν παρόμοια εμφάνιση. Εφόσον αυτό συμβαίνει τότε αυξάνεται το user experience (εμπειρία χρήστη). Σε αυτό συμβάλλουν βέβαια και άλλοι επιμέρους παράγοντες που αφορούν μηχανισμούς πλοήγησης, scrolling κ.τ.λ. Μάλιστα, δεν έχουν όλες οι υπηρεσίες την ίδια παρουσίαση. Κάποιες έχουν μόνο μία βασική παρουσίαση κινητού. Άλλες έχουν και τη βασική παρουσίαση του κινητού αλλά και μία δευτερεύουσα υπολογιστή γραφείου. Άλλες έχουν μία βασική παρουσίαση υπολογιστή γραφείου και μία δευτερεύουσα κινητού, ενώ υπάρχουν και κάποιες υπηρεσίες που έχουν μόνο μία βασική παρουσίαση υπολογιστή γραφείου. 19

20 ΚΕΦΑΛΑΙΟ 3 Σύγκριση Web - Mobile Web 20

21 Για να μπορέσει να περιγραφεί καλύτερα το Mobile Web και να κατανοήσει ο χρήστης τον τρόπο με τον οποίο αυτό λειτουργεί είναι αναγκαίο να παρατεθούν τα βασικά χαρακτηριστικά του έναντι του κλασικού Web. Οι άξονες και τα σημεία σύγκρισης που επικεντρώνεται το ενδιαφέρον συνοψίζονται παρακάτω: Μέγεθος οθόνης Πλοήγηση Ταχύτητα Έλλειψη παραθύρων Έλλειψη javascript και cookies Έλλειψη προσπελάσιμων σελίδων Σπασμένες σελίδες Μέγεθος μηνυμάτων Ισχύ επεξεργαστή 3.1 Βασικά χαρακτηριστικά Αρκετές είναι οι διαφορές που παρουσιάζουν οι εφαρμογές του Mobile Web έναντι του κλασικού Web. Αρχικά, όσον αφορά τα εξωτερικά και πιο εμφανή κατά συνέπεια χαρακτηριστικά των δύο συσκευών (κινητό τηλέφωνο υπολογιστής γραφείου) το ενδιαφέρον μονοπωλεί η οθόνη και το πληκτρολόγιο εξαιτίας της διαφοράς μεγέθους σε σχέση πάντα με έναν υπολογιστή γραφείου. Αυτά με τη σειρά τους δημιουργούν νέες διαφορές που σχετίζονται με την πλοήγηση, το μέγεθος και τη μορφή των σελίδων αλλά και με το μέγεθος των μηνυμάτων. Εισάγονται λοιπόν κάποιοι περιορισμοί που δυσκολεύουν σε μεγάλο βαθμό το χρήστη. Τα χαρακτηριστικά αυτά είναι : μέγεθος οθόνης Το μέγεθος της οθόνης στην οποία εμφανίζονται τα δεδομένα αποτελεί έναν σημαντικό παράγοντα που βάζει το Web σε πλεονεκτική θέση έναντι του Mobile Web. Τα τελευταία χρόνια υπάρχει η τάση να μεγαλώνουν οι οθόνες των υπολογιστών γραφείου σε αντίθεση με τις οθόνες των φορητών συσκευών (κινητών τηλεφώνων) που γίνονται όλο και μικρότερες. Αυτό συμβαίνει διότι οι υπολογιστές γραφείου αποκτούν όλο και πιο πολύ ψυχαγωγικό χαρακτήρα (παιχνίδια, μουσική, dvd) ενώ τα κινητά τηλέφωνα είναι επιθυμητό να έχουν όλο και μικρότερο μέγεθος ώστε να είναι πιο εύκολη η μεταφορά τους. Κατ επέκταση η οθόνη τους καθιστά δύσκολη ή και αδύνατη πολλές φορές την εμφάνιση κειμένου και γραφικών όπως αυτά θα εμφανίζονταν σε έναν υπολογιστή γραφείου. Το μικρό λοιπόν μέγεθος της οθόνης σε συνδυασμό με την έλλειψη δεικτικής συσκευής (pointing device) και τα μικρά πλήκτρα ή το περιορισμένο πληκτρολόγιο μετατρέπουν σε εξαιρετικά δύσκολη εργασία την εισαγωγή δεδομένων. Αυτό με τη σειρά του συνεπάγεται ότι μεγάλα URLs είναι δύσκολο να πληκτρολογηθούν σωστά ενώ είναι ακόμη αρκετά δύσκολο να συμπληρωθούν φόρμες. Η δυσκολία που εισάγει το μικρό μέγεθος της οθόνης γίνεται περισσότερο αντιληπτή λαμβάνοντας υπόψη ότι μία συσκευή κινητού τηλεφώνου επιτρέπει χαρακτήρες ανά γραμμή και 5-7 γραμμές κειμένου 21

22 στην οθόνη. Παρόλα αυτά τα νεότερα smartphones όπως τα i-phones ξεπερνούν κάποιες από αυτές τις δυσκολίες. πλοήγηση Τα κινητά τηλέφωνα σε αντίθεση με τους υπολογιστές γραφείου δεν διαθέτουν ποντίκι (δεικτική συσκευή pointing device) με αποτέλεσμα η πλοήγηση στο διαδίκτυο να γίνεται αποκλειστικά από το πληκτρολόγιο, κατ επέκταση να αυξάνεται το scrolling (κύλιση) και όπως είναι λογικό να μειώνεται η ευελιξία της πλοήγησης. Αν ο χρήστης επιθυμεί να προσπελάσει μία ιστοσελίδα προκειμένου να ενημερωθεί και να αναζητήσει άμεσα μία πληροφορία και αντί για αυτό καταλήξει να αναλώνει το χρόνο του με scrolling τότε είναι σχεδόν σίγουρο ότι θα εγκαταλείψει την προσπάθεια αυτή. Αντί αυτού είναι σημαντικό, η γραμμή πλοήγησης να βρίσκεται σε κάποιο εμφανές σημείο της σελίδας (συνήθως στο πάνω μέρος) ώστε ο χρήστης να είναι σε θέση να επιλέξει γρήγορα αυτό που αναζητά. Στην εικόνα που ακολουθεί φαίνεται ο διαφορετικός τρόπος με τον οποίο δομείται μία σελίδα όσον αφορά το μηχανισμό πλοήγησης σε έναν υπολογιστή γραφείου (εικ.1) και σε ένα κινητό τηλέφωνο (εικ.2). Παρότι δεν είναι αδύνατο να χρησιμοποιηθεί σε ένα κινητό τηλέφωνο το στυλ της πλοήγησης που χρησιμοποιείται σε έναν υπολογιστή γραφείου, γενικότερα δε λειτουργεί εξίσου καλά. Επιπλέον, είναι δυνατόν να ανατεθούν σε κάποια πλήκτρα (accesskeys) λειτουργίες όπως το scrolling up & down. Κύρια πλοήγηση Επικεφαλίδα Δευτερεύουσα πλοήγηση περιεχόμενο Πλοήγηση Υπόλοιπο κάτω μέρος Εικ.1 πλοήγηση σε desktop computer Περιεχόμενο Πλοήγηση Εικ.2 πλοήγηση σε κινητό τηλέφωνο Υπόλοιπο κάτω μέρος 22

23 ταχύτητα Η ταχύτητα με την οποία προσπελαύνονται οι σελίδες στο Mobile Web είναι αισθητά μικρότερη από ότι στο Web για έναν υπολογιστή γραφείου και μάλιστα σε αρκετές περιπτώσεις είναι μικρότερη μιας dial-up σύνδεσης. Όπως είναι φυσικό η μικρή ταχύτητα (low speed) οδηγεί σε μεγάλους χρόνους αναμονής ιδιαίτερα εάν το περιεχόμενο είναι μεγάλο ή χρειάζεται πλοήγηση μεταξύ σελίδων. Επιπλέον, το κόστος αναμονής ενισχύεται από το γεγονός ότι οι σελίδες Web είναι πιθανόν να περιέχουν και πληροφορίες που ο χρήστης δεν έχει ζητήσει και για τις οποίες δεν ενδιαφέρεται άμεσα, όπως για παράδειγμα διαφημιστικά παράθυρα ή μεγάλες εικόνες. Με τη σειρά του λοιπόν αυτό το «πρόσθετο υλικό» συμβάλλει στη μείωση της χρηστικότητας και στην αύξηση της καθυστέρησης (latency). έλλειψη παραθύρων Ένας υπολογιστής γραφείου προσφέρει στο χρήστη τη δυνατότητα να ανοίγει περισσότερα από ένα παράθυρα κάθε φορά, πράγμα ιδιαίτερα χρήσιμο αφού μπορεί να εκτελεί παράλληλα διάφορες λειτουργίες. Αυτό πρακτικά σημαίνει ότι στην οθόνη του υπολογιστή γραφείου είναι ενεργά περισσότερα του ενός παράθυρα και ο χρήστης είναι αυτός που θα επιλέξει τη σειρά με την οποία θα περιηγηθεί σε αυτά. Μπορεί δηλαδή να υπάρξει εναλλαγή των παραθύρων, γεγονός που μειώνει το χρόνο αναμονής του χρήστη. Αντίθετα, σε ένα κινητό τηλέφωνο δε συμβαίνει ακριβώς το ίδιο. Μόνο μια σελίδα μπορεί να προσπελαστεί κάθε φορά ενώ επιπλέον ο χρήστης μπορεί να έχει πρόσβαση στις Web σελίδες σειριακά, με αποτέλεσμα να χάνει σε λειτουργικότητα και χρόνο. Το γεγονός αυτό οδηγεί σε μείωση της χρηστικής ικανότητας του Mobile Web. έλλειψη javascript και cookies Ο υπολογιστής γραφείου υποστηρίζει cookies, δηλαδή κάποια μικρά αρχεία κειμένου που αποθηκεύονται σε αυτόν κατά την πλοήγηση του χρήστη στο διαδίκτυο. Αυτά περιγράφουν συνήθως στοιχεία όπως το όνομα χρήστη (user name) και το συνθηματικό πρόσβασης (password) έτσι ώστε την επόμενη φορά που ο χρήστης θα επισκεφθεί τον ίδιο ιστότοπο να μην χρειαστεί να τα ξαναπληκτρολογήσει. Οι περισσότερες όμως φορητές συσκευές (όπως και τα κινητά τηλέφωνα) δεν υποστηρίζουν cookies τα οποία είναι ευρέως χρησιμοποιούμενα στις περισσότερες ιστοσελίδες με αποτέλεσμα ο χρήστης να υποχρεώνεται να επαναπληκτρολογήσει κάποια στοιχεία. Επιπλέον, τα κινητά τηλέφωνα σε αντίθεση με τους υπολογιστές γραφείου δεν υποστηρίζουν javascript η οποία είναι μια γλώσσα προγραμματισμού που έχει ως στόχο την παραγωγή δυναμικού περιεχομένου σε ιστοσελίδες. είδη προσπελάσιμων σελίδων Τα κινητά τηλέφωνα δεν υποστηρίζουν flash ή κάποιο άλλο τρίτο λογισμικό ώστε να μπορέσει να εξασφαλιστεί ασφαλής σύνδεση με κάποιες ιστοσελίδες. Κατά συνέπεια μειώνεται η πιθανότητα να βρεθεί ο χρήστης αντιμέτωπος με ανεπιθύμητες δυσλειτουργίες (του κινητού τηλεφώνου) που θα προκαλούσε η προσπέλαση αυτών των ιστοσελίδων. 23

24 σπασμένες σελίδες Λόγω του μικρού μεγέθους της οθόνης του κινητού μια σελίδα που εμφανίζεται ολόκληρη σε έναν υπολογιστή γραφείου, στα κινητά τηλέφωνα σπάει σε τμήματα (segments) που το καθένα από αυτά θεωρείται σαν μια ξεχωριστή σελίδα. Επομένως, ενώ σε έναν υπολογιστή γραφείου ο χρήστης βλέπει το περιεχόμενο σε μία σελίδα, στα κινητά τηλέφωνα εμφανίζεται διαδοχικά σε πολλαπλές σελίδες. Ο παράγοντας αυτός σε συνδυασμό με την χαμηλή ταχύτητα οδηγεί σε αργή πλοήγηση των εφαρμογών του Mobile Web. μέγεθος μηνυμάτων Μία από τις σημαντικότερες εφαρμογές του διαδικτύου είναι το ing. Αποτελεί έναν εύχρηστο και γρήγορο τρόπο επικοινωνίας. Βασικό πλεονέκτημα των εφαρμογών του Web είναι ότι δεν θέτει περιορισμούς για τον αριθμό των χαρακτήρων που μπορούν να σταλούν. Αντίθετα, το Mobile Web περιορίζει το χρήστη θέτοντας ένα άνω όριο στον αριθμό των χαρακτήρων ενός μηνύματος, με αποτέλεσμα να απαιτείται η αποστολή πολλαπλών μηνυμάτων. Αυτό καθυστερεί τον χρήστη και παράλληλα τον κουράζει. ισχύς επεξεργαστή Συγκρίνοντας την ισχύ του επεξεργαστή ενός υπολογιστή γραφείου με αυτή ενός κινητού τηλεφώνου ο χρήστης διαπιστώνει ότι ο πρώτος υπερτερεί αρκετά έναντι του δεύτερου. Ο επεξεργαστής ενός υπολογιστή γραφείου προσφέρει ικανοποιητική ισχύ για να μπορεί ο χρήστης να εκτελεί διάφορες λειτουργίες σε μικρό χρόνο. Αντίθετα, ο επεξεργαστής των κινητών τηλεφώνων προσφέρει μικρότερη επεξεργαστική ισχύ και είναι συνεπώς είναι πιο χρονοβόρος. 3.2 XHTML HTML Η XHTML και η HTML παρουσιάζουν αρκετά κοινά χαρακτηριστικά αφού η XHTML είναι βασισμένη στην HTML και έχει την αυστηρή δομή και σύνταξη της XML. Οι πιο σημαντικές διαφορές ωστόσο των δύο γλωσσώνπροτύπων είναι : στην XHTML πρέπει όλα τα στοιχεία να είναι σωστά εμφωλευμένα σε αντίθεση με την HTML που επιτρέπει οι ετικέτες να κλείνουν με οποιαδήποτε σειρά. π.χ. 24

25 <b><i> This text is bold and italic </b></i> <b><i> This text is bold and italic </i></b> HTML XHTML στην XHTML τα στοιχεία που ανοίγουν πρέπει πάντα να κλείνουν π.χ. <p> This is a paragraph <p> This is a paragraph </p> HTML XHTML στην XHTML τα κενά στοιχεία πρέπει επίσης να κλείνουν π.χ. A break : <br> HTML A horizontal rule : <hr> An image : <img src= happy.gif alt= Happy face > A break : </br> XHTML A horizontal rule : </hr> An image : <img src= happy.gif alt= Happy face /> στην XHTML όλα τα στοιχεία πρέπει να είναι γραμμένα με μικρούς χαρακτήρες π.χ. 25

26 <BODY> HTML <P> This is a paragraph </P> </BODY> <body> XHTML <p> This is a paragraph </p> </body> στην XHTML σε αντίθεση με την HTML όλα τα στοιχεία πρέπει να είναι εμφωλευμένα μέσα σε μία <html> ρίζα π.χ. <html> <head> </head> <body> </body> </html> XHTML στην XHTML η δήλωση των ιδιοτήτων γίνεται με το id π.χ. <img src="picture.gif" name="pic1" /> HTML <img src="picture.gif" id="pic1" /> XHTML 3.3 WML XHTML MP Τόσο η WML όσο και η XHTML MP αποτελούν γλώσσες σήμανσης περιεχομένου (markup languages) των εφαρμογών του Mobile Web. Αυτή που έχει επικρατήσει να χρησιμοποιείται όμως περισσότερο είναι η XHTML MP. Συγκρίνοντάς τες παρατηρούμε ότι υπάρχουν κάποια σημεία στα οποία διαφέρουν και αυτό γιατί η XHTML MP αποτελεί εξέλιξη της WML. Οι διαφορές τους είναι οι εξής : Ένα ιδιαίτερο χαρακτηριστικό της WML είναι τα soft keys (μηχανισμός με τον οποίο ο χρήστης μπορεί να επιλέξει τις πιο συχνά χρησιμοποιούμενες 26

27 λειτουργίες κλικάρωντας είτε το αριστερό είτε το δεξί άνω πλήκτρο του κινητού). Για τον προγραμματισμό τους χρησιμοποιείται η ετικέτα <do>. H XHTML MP δεν υποστηρίζει τα soft keys, ωστόσο παρέχει ως εναλλακτική λύση τη χρήση access key ιδιοτήτων (πλήκτρα που χρησιμοποιούνται ως συντομεύσεις). Στο παράδειγμα που ακολουθεί πιέζοντας το πλήκτρο 1 ο browser θα μεταφερθεί απευθείας στο part1.xhtml,πιέζοντας το πλήκτρο 2 στο part2.xhtml και πιέζοντας το πλήκτρο 3 θα μεταφερθεί στο part3.xhtml αντίστοιχα. <a accesskey="1" href="part1.xhtml">xhtml MP Tutorial Part 1</a><br/> <a accesskey="2" href="part2.xhtml">xhtml MP Tutorial Part 2</a><br/> <a accesskey="3" href="part3.xhtml">xhtml MP Tutorial Part 3</a> Η XHTML MP δεν υποστηρίζει την <u> ετικέτα της WML. Στην WML η ετικέτα <u> χρησιμοποιείται για υπογράμμιση κειμένου. Αντί αυτής η XHTML MP χρησιμοποιεί την ιδιότητα text-decoration του WAP CSS. Για παράδειγμα για να υπογραμμιστεί ένα κείμενο σε level-1 πρέπει να εισαχθεί το εξής: h1 { text-decoration: underline } Η XHTML MP δεν υποστηρίζει όπως η WML anchor links. Στο πρώτο παράδειγμα περιγράφεται η εισαγωγή δεδομένων στη WML ενώ στο δεύτερο παράδειγμα η εισαγωγή δεδομένων στην XHTML MP. 27

28 Παράδειγμα 1... <p> What's your name? <input name="name"/><br/> Which part of our XHTML MP tutorial do you like most? <input name="tutorial_part"/><br/> <anchor> <go method="get" href="xhtml_mp_tutorial_proc.asp"> <postfield name="name" value="$(name)"/> <postfield name="tutorial_part" value="$(tutorial_part)"/> </go> Send Data </anchor> </p>... Αυτό που εμφανίζεται στην οθόνη του κινητού είναι : 28

29 Παράδειγμα 2... <form action="xhtml_mp_tutorial_proc.asp" method="get"> <p> What's your name?<br/> <input name="name"/><br/> Which part of our XHTML MP tutorial do you like most?<br/> <input name="tutorial_part"/><br/> <input type="submit" value="send Data"/> </p> </form>... Αυτό που εμφανίζεται στην οθόνη του κινητού είναι : 29

30 ΚΕΦΑΛΑΙΟ 4 ΜΕΘΟΔΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ & ΠΡΟΣΑΡΜΟΣΤΙΚΟΤΗΤΑΣ ΓΙΑ ΤΟ MOBILE WEB 30

31 Οι μέθοδοι βελτιστοποίησης των εφαρμογών του Mobile Web μπορούν να ομαδοποιηθούν σε τέσσερις κατηγορίες: 1. ολική συμπεριφορά 2. πλοήγηση και σύνδεσμοι 3. διάταξη σελίδας 4. καθορισμός σελίδας 4.1 ολική συμπεριφορά Για να επιτευχθεί η βελτιστοποίηση των εφαρμογών του Mobile Web, ο σχεδιαστής οφείλει να επικεντρώσει την προσοχή του σε θέματα που αφορούν τη θεματική συνοχή μίας ιστοσελίδας, την εκμετάλλευση όλων των δυνατοτήτων των συσκευών καθώς και στην πραγματοποίηση δοκιμών. Συγκεκριμένα : θεματική συνοχή Όταν ο χρήστης εισάγει ένα URL τότε στην οθόνη του κινητού του εμφανίζεται το περιεχόμενο μίας ιστοσελίδας. Αν δοκιμάσει να εισάγει το ίδιο URL από κάποια διαφορετική συσκευή κινητού τηλεφώνου τότε θα πρέπει το περιεχόμενο που θα εμφανιστεί να είναι θεματικά συναφές με αυτό που εμφανίστηκε και στην προηγούμενη συσκευή. Ανεξάρτητα λοιπόν των μηχανισμών πρόσβασης και των δυνατοτήτων που έχει η κάθε συσκευή περιορισμένης οθόνης το ζητούμενο περιεχόμενο πρέπει να είναι προσπελάσιμο από ένα ευρύ φάσμα συσκευών χωρίς να αλλάζει ιδιαίτερα η μορφή του. εκμετάλλευση των δυνατοτήτων των συσκευών Ο σχεδιαστής οφείλει να αξιολογεί όσο το δυνατόν καλύτερα τις δυνατότητές της συσκευής ώστε να σχεδιάζει και να αναπτύσσει ιστοσελίδες που στοχεύουν στην προεπιλεγμένη διανομή περιεχομένου. Για να είναι αυτό υλοποιήσιμο οφείλει να γνωρίζει καλά τα χαρακτηριστικά της συσκευής. εργασία γύρω από ελλιπείς υλοποιήσεις Όπως συμβαίνει και στους υπολογιστές γραφείου υπάρχουν browsers που δεν «σέβονται» τις προθέσεις του παροχέα περιεχομένου. Ως ελλιπείς υλοποιήσεις θεωρούνται υλοποιήσεις που δεν υποστηρίζουν βασικά χαρακτηριστικά κάποιου standard. Ακόμη, υπάρχουν αρκετές διαφορές στις μεταφράσεις μεταξύ των browsers και επειδή το λογισμικό των κινητών βρίσκεται ενσωματωμένο στη συσκευή, αυτό καθιστά δύσκολη τη διόρθωση ή τη βελτίωσή του. Φυσικά η λύση δεν είναι να μη λαμβάνονται υπόψη αυτά τα χαρακτηριστικά ούτε να υπάρχει μία περιορισμένη λίστα κινητών που μπορούν να τα υποστηρίξουν. Κατά συνέπεια η πρόκληση για τη βελτίωση αυτών των υλοποιήσεων είναι μεγάλη. δοκιμές Οποιαδήποτε ιστοσελίδα πρέπει να δοκιμάζεται σε μία ποικιλία από browsers. Οι mobile browsers παρουσιάζουν αρκετά διαφορετικά χαρακτηριστικά σε σχέση με τους browsers των υπολογιστών γραφείου. Οι παροχείς περιεχομένου ενθαρρύνονται να τεστάρουν ότι τα χαρακτηριστικά στα οποία στηρίζονται, λειτουργούν σε πραγματικές συσκευές και μάλιστα κατά τη διάρκεια αυτών των δοκιμών απενεργοποιούν κάποια άλλα χαρακτηριστικά (π.χ. 31

32 έχουν ενεργοποιημένο μόνο το κείμενο και απενεργοποιημένα τα γραφικά). Για να πραγματοποιηθούν αυτές οι δοκιμές παρέχονται συχνά εξομοιωτές. Ωστόσο στην πράξη πολλοί εξομοιωτές συμπεριφέρονται διαφορετικά από τις συσκευές που εξομοιώνουν. Συμπερασματικά, οι δοκιμές είναι προτιμότερο να γίνονται σε πραγματικές συσκευές. 4.2 πλοήγηση και σύνδεσμοι Εξαιτίας των περιορισμών που θέτουν οι μηχανισμοί εισόδου ενός κινητού όπως η απουσία ποντικιού (δεικτική συσκευή-pointing device), το περιορισμένο πληκτρολόγιο κ.τ.λ. πρέπει να δοθεί ιδιαίτερη προσοχή στον καθορισμό της δομής και στο μοντέλο πλοήγησης που θα χρησιμοποιηθεί για μία ιστοσελίδα. Είναι επιθυμητό η πλοήγηση να είναι εύκολη χωρίς να απαιτείται η ενεργοποίηση πολλαπλών συνδέσμων. Η πλοήγηση διευκολύνεται ακόμη περισσότερο εάν ο χρήστης έχει τη δυνατότητα να πληκτρολογήσει μικρά URLs χωρίς subdomains και να βρει το περιεχόμενο που αναζητά. URLs Η πληκτρολόγηση ενός URL σε μία συσκευή κινητού τηλεφώνου μπορεί να γίνει δύσκολη, γι αυτό ο χρήστης προτιμά να χρησιμοποιεί εναλλακτικές μεθόδους όπως ακολουθώντας έναν υπερσύνδεσμο (από ένα ,sms ή από κάποια άλλη ιστοσελίδα), WAP Push(είδος μηνυμάτων όπως τα SMS με τη διαφορά ότι το περιεχόμενό τους είναι ενεργό-active). Ωστόσο, επειδή σε κάποιες περιπτώσεις δεν υπάρχει άλλος τρόπος για να προσπελάσει ο χρήστης μια ιστοσελίδα από το να πληκτρολογήσει το URL, γίνεται αναγκαίο να προσπαθεί να το κρατά μικρό ώστε να μειώνεται η πιθανότητα λάθους. Αυτό πρακτικά σημαίνει ότι πρέπει να γίνουν ρυθμίσεις ώστε μια ιστοσελίδα να μπορεί να προσπελαστεί χωρίς να είναι απαραίτητο ένα sub-domain στο URL. Π.χ γραμμή πλοήγησης Η γραμμή πλοήγησης πρέπει να είναι τοποθετημένη στο πάνω μέρος της σελίδας και πρέπει να παρέχει στο χρήστη τους βασικούς συνδέσμους σε μία γραμμή. Οποιοδήποτε άλλο στοιχείο δευτερεύουσας πλοήγησης θα πρέπει να τοποθετείται στο κάτω μέρος της σελίδας και μόνο εάν αυτό είναι απαραίτητο. ισορροπημένη δομή Ο σχεδιαστής του Mobile Web οφείλει να έχει κατά νου το «πάρε-δώσε» μεταξύ συνδέσμων σε μία σελίδα και της ανάγκης του χρήστη να πλοηγηθεί σε πολλαπλούς συνδέσμους για να φτάσει στο περιεχόμενο που επιθυμεί. Το να κάνει ο χρήστης scrolling σε μία σελίδα με πολυάριθμους συνδέσμους μπορεί να γίνει εξαιρετικά φορτικό, καθώς το scrolling σε πολλές συσκευές επιλέγει κάθε σύνδεσμο. Από την άλλη πλευρά προστίθεται στο συνολικό χρόνο 32

33 αναμονής και ο χρόνος ανάκτησης. Στόχος λοιπόν είναι οι σελίδες που περιέχουν συχνά προσπελάσιμη πληροφορία να προσεγγίζονται εύκολα με τον ελάχιστο αριθμό ανακτήσεων, ενώ αυτές που περιέχουν λιγότερο συχνά προσπελάσιμη πληροφορία μπορούν να έχουν περισσότερες ανακτήσεις. Είναι αξιοσημείωτο ότι ο χρήστης αγχώνεται αν ξεπεράσει τις τέσσερις ανακτήσεις για να φτάσει στο στόχο του. μηχανισμοί πλοήγησης Η γραμμή πλοήγησης πρέπει να είναι εύκολα εντοπίσιμη από το χρήστη ώστε να μην καταναλώνει άσκοπα χρόνο. Ακόμη, χρησιμοποιώντας τους ίδιους μηχανισμούς πλοήγησης ο χρήστης εξοικειώνεται με αυτούς και τους αναγνωρίζει πιο εύκολα όταν τους ξανασυναντήσει. Συνεπώς, ανεξάρτητα των συσκευών που χρησιμοποιούνται οι μηχανισμοί πλοήγησης είναι συνετό να είναι παρόμοιοι ώστε να αυξάνεται το user experience (εμπειρία χρήστη). προσβάσιμα πλήκτρα Ένας βολικός τρόπος για να μειωθεί ο χρόνος πλοήγησης είναι να ανατεθούν συγκεκριμένα πλήκτρα σε σημαντικούς συνδέσμους προκειμένου ο χρήστης να έχει πρόσβαση σε αυτούς. Αντίστοιχα πλήκτρα θα επιτρέπουν στο χρήστη να επιστρέψει από τον σύνδεσμο στην αρχική σελίδα. Για παράδειγμα μπορεί ο σχεδιαστής να αναθέσει στο πλήκτρο1 του πληκτρολογίου την ιδιότητα να μεταφέρει το χρήστη στο φάκελο των και στο πλήκτρο2 την ιδιότητα «back» ώστε ο χρήστης να επιστρέφει στη σελίδα που ήταν πριν. Με αυτόν τον τρόπο, ο χρήστης εξοικονομεί χρόνο αποφεύγοντας μία σειρά χρονοβόρων βημάτων. αναγνώριση του συνδέσμου-στόχου Είναι ιδιαίτερα σημαντικό να γνωρίζει ο χρήστης που θα οδηγηθεί εάν ακολουθήσει έναν σύνδεσμο. Με αυτόν τον τρόπο μπορεί να αποφευχθεί άσκοπη καθυστέρηση. Αυτό μπορεί να επιτευχθεί με το να δηλώνεται το περιεχόμενο του συνδέσμου και όχι απλά ένα πατήστε εδώ, δηλαδή αν ο σύνδεσμος είναι αρκετά περιγραφικός τότε ο χρήστης θα έχει αρκετή πληροφορία για να αποφασίσει αν όντως επιθυμεί να τον ακολουθήσει. Επιπλέον, ο χρήστης πρέπει να γνωρίζει εάν το περιεχόμενο του συνδέσμου που θα ακολουθήσει έχει διαφορετική μορφή ή γλώσσα σε σχέση με τη σελίδα στην οποία βρίσκεται ο σύνδεσμος. χάρτες εικόνων Οι χάρτες εικόνων επιτρέπουν γρήγορη πλοήγηση υπό την προϋπόθεση ότι η συσκευή μπορεί να υποστηρίξει τις εικόνες που εμπλέκονται σε αυτό. Ακόμη και τα κινητά που δε διαθέτουν δεικτική συσκευή (ποντίκι) χρησιμοποιώντας συγκεκριμένα πλήκτρα δίνουν τη δυνατότητα για μετακινήσεις προς τα πάνω, κάτω, αριστερά και δεξιά μιας εικόνας. Τα κινητά μπορούν να υποστηρίξουν client-side χάρτες και όχι server-side λόγω έλλειψης ποντικιού. Εάν μόνο οι μικρές εικόνες μπορούν να προσπελαστούν τότε αρκεί αυτές που είναι μεγάλες να σπάσουν σε μικρότερες (σπάνε σε επιμέρους τμήματα που ονομάζονται segments). Διαφορετικά, μία άλλη λύση είναι να χρησιμοποιηθεί 33

34 κείμενο στη θέση τους που να τις περιγράφει κατάλληλα. Ένας έλεγχος που μπορεί να εφαρμοστεί είναι να σταλεί αίτηση από ένα κινητό που δεν υποστηρίζει client-side χάρτες εικόνων και να ελεγχθεί αν εμφανίζονται σε αυτό οι εικόνες. ανανέωση, ανακατεύθυνση και pop-up παράθυρα Κάθε μία από αυτές τις δραστηριότητες είναι πιθανόν να προκαλέσουν στο χρήστη σύγχυση και καθυστέρηση στην αλληλεπίδρασή του. Πολλά κινητά μπορούν να εμφανίζουν ένα μόνο παράθυρο κάθε φορά στην οθόνη τους με αποτέλεσμα εάν ο χρήστης προσπαθήσει να ανοίξει περισσότερα να αντιμετωπίσει απρόβλεπτες καταστάσεις. Οι auto-refreshing σελίδες προκαλούν με τη σειρά τους προβλήματα προσβασιμότητας. Αν έχουν ζητηθεί από κάποια εφαρμογή τότε πρέπει να παρέχεται ένας τρόπος για να μπορεί ο χρήστης να τις κλείσει. Τέλος, η ανακατεύθυνση είναι ένας παρόμοιος μηχανισμός με τη διαφορά ότι κάθε φορά που γίνεται απαιτεί μεταφορά στον browser. Μια λύση είναι να μειωθούν οι σελίδες που θα ανακατευθυνθούν. 4.3 σχεδίαση σελίδας- περιεχόμενο Σε αυτή την ενότητα περιγράφεται η αντιληπτική ικανότητα του χρήστη όσον αφορά το σχέδιο, τη γλώσσα του κειμένου και τη σχέση των στοιχείων που απαρτίζουν το περιεχόμενο μίας σελίδας. Χαρακτηριστικά όπως το μέγεθος της σελίδας, τα χρώματα, τα γραφικά και το scrolling αποτελούν ιδιαίτερα σημαντικούς παράγοντες για το σχεδιασμό μίας εφαρμογής του Mobile Web. Συγκεκριμένα : περιεχόμενο σελίδας Το περιεχόμενο μιας σελίδας πρέπει να χρησιμοποιεί απλή και καθαρή γλώσσα, να είναι κατάλληλο το μέγεθός του στα πλαίσια του κινητού και να μην ξεπερνά τα όρια αυτού που αρχικά ο χρήστης ζήτησε. Οι χρήστες του Mobile Web συχνά αναζητούν συγκεκριμένες και σύντομες πληροφορίες όπως η πρόγνωση του καιρού, δρομολόγια πλοίων ή λεωφορείων και δεν τους ενδιαφέρει η περιήγηση. Για να αποφευχθεί λοιπόν οποιαδήποτε άσκοπη και κουραστική περιήγηση, ο σχεδιαστής μπορεί να χρησιμοποιήσει επικεφαλίδες και τίτλους προσφέροντας μ αυτόν τον τρόπο συνοπτική πληροφόρηση. Ακόμη, μπορεί να περιορίσει το μέγεθος κάθε παραγράφου περικλείοντας μόνο χρήσιμες και ουσιαστικές πληροφορίες. Με άλλα λόγια, ο χρήστης προτιμά το στυλ του κειμένου της ιστοσελίδας να είναι σύντομο και άμεσο παρά εκτενές και ασαφές. μέγεθος σελίδας Εάν οι σελίδες είναι πολύ μεγάλες χρειάζεται αρκετός χρόνος για να φορτωθούν από τη συσκευή. Από την άλλη πλευρά, αν είναι πολύ μικρές, ο χρήστης θα χρειαστεί να κάνει πολλαπλές αιτήσεις για να διαβάσει τη σχετική πληροφορία με αποτέλεσμα να υπάρχει καθυστέρηση, αφού κάθε αίτηση καταναλώνει χρόνο. Υπάρχει επομένως ένα τίμημα για την επιλογή του αν οι 34

35 σελίδες θα είναι μικρές ή μεγάλες. Οι συσκευές με αυστηρούς περιορισμούς μνήμης μπορούν να φορτώνουν μόνο σελίδες μικρού μεγέθους, ενώ οι συσκευές που δεν διαθέτουν καλό scrolling είναι προτιμότερο να φορτώνουν σελίδες μεγάλου μεγέθους. Ο έλεγχος που πρέπει να γίνει αφορά το μέγεθος της σελίδας. Ελέγχεται αν αυτό ξεπερνά τα 10 KB με βάση το standard που έχει οριστεί και εάν τα ξεπερνά σπάει σε μικρότερα τμήματα. scrolling (κύλιση) Η σελίδα θα πρέπει να εμφανίζεται στη οθόνη του κινητού χωρίς να απαιτείται δευτερεύον scrolling, δηλαδή είναι επιθυμητό μόνο το scrolling προς μία κατεύθυνση, αφού ο χρήστης δυσκολεύεται όταν χρειάζεται να κάνει scrolling προς δύο κατευθύνσεις εξαιτίας του περιορισμένου μεγέθους της οθόνης του κινητού. Βέβαια αυτό συχνά είναι αναπόφευκτο αφού το περιεχόμενο μπορεί να αποτελείται από χάρτες και εικόνες. Αν κάποιο στοιχείο στη σελίδα απαιτεί δευτερεύον scrolling, δεν θα πρέπει και η υπόλοιπη σελίδα να το ακολουθεί. Μία λύση είναι να τοποθετηθούν αυτές οι εικόνες σε ξεχωριστή σελίδα στην οποία θα μεταβαίνει ο χρήστης με τη βοήθεια ενός συνδέσμου. Ο έλεγχος που πρέπει να γίνει αφορά τα pixels, αφού αυτά με βάση το standard που έχει οριστεί θα πρέπει να είναι 120. γραμμή πλοήγησης Επειδή είναι σημαντικό για το χρήστη να αποκτήσει από την αρχή μια ιδέα του περιεχομένου της σελίδας που επισκέφθηκε πρέπει η γραμμή πλοήγησης να τοποθετείται στο πάνω μέρος της σελίδας, δηλαδή σε όσο το δυνατόν πιο εμφανές σημείο. Αυτό διευκολύνει ιδιαίτερα το χρήστη αφού τον γλιτώνει από καθυστερήσεις και τον αποτρέπει από το να ακολουθήσει συνδέσμους που πιθανόν να έπρεπε να αποφύγει. γραφικά Τα γραφικά που είναι μεγαλύτερα απ ότι χρειάζεται, όπως αυτά που έχουν μεγαλύτερη ανάλυση από αυτή που υποστηρίζει η συσκευή ή αυτά που έχουν πολλά χρώματα, καταναλώνουν bandwidth (εύρος). Ο έλεγχος που γίνεται αφορά τις διαστάσεις των γραφικών. χρώματα Τα κινητά συχνά δεν διαθέτουν καλή χρωματική αντίθεση με αποτέλεσμα πληροφορία τονισμένη με χρώμα να μην είναι απόλυτα ορατή από το χρήστη. Μάλιστα πρέπει να αποφεύγονται χρώματα που χρησιμοποιούνται για συγκεκριμένα χαρακτηριστικά όπως το μπλε και το μωβ που σηματοδοτούν συνδέσμους. Ακόμη, το φόντο και το πίσω μέρος της οθόνης του κινητού πρέπει να είναι χρωματικά διαφοροποιημένα και να υπάρχει αντίθεση μεταξύ τους. 35

36 4.4 καθορισμός σελίδας Για να μπορέσουν να βελτιωθούν οι εφαρμογές του Mobile Web πρέπει ο σχεδιαστής να δώσει προσοχή και στη δομή μίας σελίδας και όχι μόνο στο περιεχόμενό της. Αυτό σημαίνει ότι μηχανισμοί όπως οι επικεφαλίδες και οι τίτλοι διευκολύνουν και εξυπηρετούν τον χρήστη στην αναζήτησή του, ενώ κάποιοι άλλοι όπως οι πίνακες δεν είναι πολύ λειτουργικοί αφού δεν υποστηρίζονται ικανοποιητικά λόγω του μικρού μεγέθους της οθόνης της συσκευής. τίτλος/επικεφαλίδες Ένας τρόπος για να καθοριστεί δομικά μία σελίδα είναι χρησιμοποιώντας τίτλους και επικεφαλίδες, το μέγεθος των οποίων πρέπει να είναι μικρό για να μην επιβαρύνεται η σελίδα. Με αυτόν τον τρόπο ο χρήστης μπορεί εύκολα να γνωρίζει τι είναι αυτό που ακολουθεί (περιεχόμενο) χωρίς να χρειαστεί να το διαβάσει. Επιπλέον, όταν απαιτείται διαχωρισμός σελίδων απλοποιείται η διαδικασία της σελιδοποίησης αφού φαίνεται ξεκάθαρα που αρχίζει και τελειώνει κάθε κομμάτι πληροφορίας. πίνακες Οι πίνακες δε λειτουργούν σωστά σε μικρού μεγέθους οθόνες και η ύπαρξή τους απαιτεί συχνά οριζόντιο και κάθετο scrolling. Όπως έχει ήδη επισημανθεί το scrolling εισάγει καθυστέρηση και δυσκολεύει το χρήστη. Επίσης η ύπαρξη κενών κελιών στους πίνακες προσθέτει επιπλέον επιβάρυνση. Κατ επέκταση είναι προτιμότερο οι σχεδιαστές να αποφεύγουν τη χρήση πινάκων και η ύπαρξή τους συνίσταται μόνο στις περιπτώσεις που μπορούν να υποστηριχθούν από τα κινητά. μέγεθος σελίδας Επειδή συνήθως το μέγεθος των εικόνων είναι μεγάλο, είναι επιθυμητό να οριστεί εκ των προτέρων κατά το σχεδιασμό μίας ιστοσελίδας το μέγεθος της εικόνας προκειμένου να αποφευχθεί μετέπειτα συμπίεση αυτής. συμπίεση Το περιεχόμενο το οποίο είναι γραμμένο σε κάποια γλώσσα σήμανσης περιεχομένου όπως η XML μπορεί να γίνει μικρότερο διατηρώντας την ίδια σημασιολογία με το να αφαιρεθούν τα κενά διαστήματα. μορφή περιεχομένου/κωδικοποίηση χαρακτήρων Το να σταλεί το περιεχόμενο σε μία μορφή που δεν υποστηρίζεται από τη συσκευή του κινητού μόνο επιζήμιο μπορεί να χαρακτηριστεί. Είναι απαραίτητο να υπάρχει γνώση σχετικά με τις προτιμήσεις της συσκευής όσον αφορά τη μορφή του περιεχομένου. Όσον αφορά τη μορφή του περιεχομένου πρέπει να ελέγχονται τα MIME types σε πολλαπλές συσκευές. Επιπλέον, το περιεχόμενο πρέπει να είναι κωδικοποιημένο με χαρακτήρες που αναγνωρίζονται από τη συσκευή. Η κωδικοποίηση που χρησιμοποιείται ως πρότυπο είναι η UTF-8 και ο 36

37 έλεγχος που οφείλει να γίνεται αφορά το αν έχει δηλωθεί η κωδικοποίηση και αν αυτή υποστηρίζεται σωστά από τη συσκευή. μηνύματα λάθους Σε κάποιες περιπτώσεις είναι αναπόφευκτο να γίνουν λάθη. Για το λόγο αυτό είναι ιδιαίτερα σημαντικό να παρέχεται η κατάλληλη πλοήγηση ώστε να μπορέσει ο χρήστης να ξεφύγει από αυτό. Όταν ο χρήστης βρεθεί σε μία κατάσταση λάθους τότε πρέπει να παράγεται κάποιο μήνυμα λάθους που θα τον οδηγεί σε μία ασφαλή κατάσταση. Το μήνυμα λάθους πρέπει να περιέχει πληροφορία σχετικά με το αν το λάθος είναι προσωρινό ή μόνιμο και για το αν ο χρήστης μπορεί να το διορθώσει μόνος του (π.χ. αλλάζοντας τα δεδομένα εισόδου). Το μήνυμα λάθους πρέπει να περιλαμβάνει τις εξής δομές πλοήγησης: back ή πίσω : ένα σύνδεσμο που θα μεταφέρει το χρήστη στην προηγούμενη σελίδα retry ή ξαναπροσπάθησε : ένα σύνδεσμο που θα επαναπροσπελαύνει τη σελίδα στην οποία εντοπίστηκε το λάθος home ή αρχική σελίδα : ένα σύνδεσμο που θα επαναφέρει το χρήστη στην αρχική σελίδα της εφαρμογής Ακόμη, το μήνυμα λάθους αναπαριστά το λάθος δίνοντας έναν κωδικό σε αυτό. Για παράδειγμα, ο κωδικός 404 σημαίνει ότι η σελίδα δεν βρέθηκε. Βέβαια, δεν έχουν όλοι οι χρήστες τη δυνατότητα να αναγνωρίζουν τους κωδικούς. Συνοπτικά οι μέθοδοι βελτιστοποίησης και προσαρμοστικότητας για το Mobile Web φαίνονται στον πίνακα που ακολουθεί : [ΘΕΜΑΤΙΚΗ_ΣΥΝΟΧΗ] Το περιεχόμενο που προσπελαύνεται από ένα URL πρέπει να έχει θεματική συνοχή. [ΔΥΝΑΤΟΤΗΤΕΣ_ΣΥΣΚΕΥΗΣ] Ο σχεδιαστής πρέπει να γνωρίζει καλά όλες τις δυνατότητες της συσκευής προκειμένου να μπορέσει να τις αξιοποιήσει με όσο το δυνατόν καλύτερο τρόπο ώστε να αυξηθεί η εμπειρία του χρήστη. [ΕΛΛΕΙΨΕΙΣ] [ΔΟΚΙΜΕΣ] [URL] Εργασία γύρω από ελλιπείς υλοποιήσεις Πραγματοποίηση δοκιμών σε πραγματικές συσκευές όπως επίσης και σε εξομοιωτές. Τα URLs πρέπει να είναι μικρά ώστε να είναι εύκολα πληκτρολογήσιμα και να αποφεύγονται τα λάθη. 37