Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet

Δικτυακά Πολυμέσα ΙΙ Διάλεξη #10 η : Σχεδιασμός web sites για κινητές συσκευές Γαβαλάς Δαμιανός dgavalas@aegean.gr Σενάρια ανάκτησης πληροφορίας στο «παραδοσιακό» Internet 1o επίπεδο (1-tier) HTTP αίτηση η 2o επίπεδο (2-tier) Internet web περιηγητής HTTP απόκριση web διακομιστής 1o επίπεδο 2o επίπεδο 3o επίπεδο (1-tier) (2-tier) (3-tier) HTTP αίτηση web περιηγητής Internet HTTP απόκριση web διακομιστής Δεδομένα διακομιστής ΒΔ 1

Ασύρματο web/internet (wireless web/internet) Η πρωτοφανής διείσδυση του διαδικτύου αλλά και των κινητών τηλεφώνων, οδήγησε φυσιολογικά στην ιδέα της χρήσης κινητών συσκευών για ασύρματη πρόσβαση στο διαδικτυακό υλικό Ασύρματο Internet: Η πρόσβαση σε πόρους του Internet από κινητές συσκευές Τουλάχιστον σε ένα μέρος της σύνδεσης χρησιμοποιείται ασύρματο δίκτυο ή δίκτυο κινητής τηλεφωνίας Αντίστοιχα, έχει εισαχθεί ο όρος κινητό εμπόριο (mobile commerce ή m commerce) που ορίζεται ως το ηλεκτρονικό εμπόριο (e commerce) που συνεχίζει να διεξάγεται στο διαδίκτυο, με τη χρήση όμως κινητών τερματικών συσκευών και ενός κινητού δικτύου Σενάρια ανάκτησης πληροφορίας μέσω ασύρματου δικτύου Κινητή συσκευή ίκτυο κινητής τηλεφωνίας Σταθμός βάσης Internet Web servers laptop smartphone Access point ασύρματου δικτύου 2

Κινητές συσκευές Κινητά τηλέφωνα (mobile phones) Φορητοί Η/Υ (laptops) p Έξυπνα τηλέφωνα (smart phones) Προσωπικοί ψηφιακοί βοηθοί (PDAs, Personal Digital Assistants) Η/Υ παλάμης (palmtops) Tablet PCs Pagers Πλεονεκτήματα κινητού Internet Διείσδυση, μεταφερσιμότητα, χαμηλό κόστος κινητών συσκευών Oι χρήστες κινητών συσκευών ξεπερνούν κατά πολύ παγκοσμίως τον αριθμό χρηστών Η/Υ. Εκτός αυτού έχουν το πλεονέκτημα της μεταφερσιμότητας λόγω μικρού βάρους και διαστάσεων αλλά και του χαμηλού κόστους Προσβασιμότητα Στον «ενσύρματο» κόσμο, οι χρήστες συναντούν χρονικούς και χωρικούς περιορισμούς, καθώς είναι απαραίτητη η πρόσβαση σε έναν Η/Υ αλλά και η σύνδεση στο διαδίκτυο. Τέτοιοι περιορισμοί δεν ισχύουν για τους χρήστες κινητών συσκευών που έχουν εύκολη προσβασιμότητα και συνδεσιμότητα σε οποιοδήποτε χώρο και ώρα (anytime, anywhere) 3

Πλεονεκτήματα ασύρματου Internet Υπηρεσίες βασισμένες στον εντοπισμό θέσης (location based services) Με χρήση τεχνολογιών όπως το GPS (Global Positioning System) είναι εφικτό για τους χρήστες αλλά και τους εμπόρους να προωθήσουν, να λάβουν ή να έχουν πρόσβαση σε πληροφορίες που προσαρμόζονται με βάση την τρέχουσα θέση του χρήστη Εξατομίκευση Εώ Ενώ ένας Η/Υ μπορεί να μοιράζεται ανάμεσα σε πολλούς χρήστες, η κινητή συσκευή τυπικά λειτουργεί για λογαριασμό μόνο ενός. Προβλήματα ασύρματου Internet Παράγοντες μορφής, μεγέθους και ευχρηστίας κινητών συσκευών Πεπερασμένη ποσότητα διαθέσιμης ενέργειας, μικρό μέγεθος οθόνης, υποστήριξη μικρού αριθμού χρωμάτων και γραμματοσειρών, μικρό και δύσχρηστο πληκτρολόγιο Ταχύτητα και κόστος σύνδεσης, επεξεργαστικές δυνατότητες, διαθέσιμη μνήμη Παρότι οι περισσότερες κινητές συσκευές έχουν πλέον multimedia δυνατότητες, οι τρέχουσες ταχύτητες σύνδεσης καθιστούν τη χρήση τέτοιων υπηρεσιών απαγορευτική π.χ. στα GSM συστήματα προσφέρεται ταχύτητα 9,6 Kbps 4

Περιορισμοί στο Mobile Web H πρόσβαση στο web από κινητές συσκευές συγκεντρώνει πολλούς περιορισμούς, οι οποίοι ποικίλλουν ανάλογα με τη συσκευή, π.χ. κάποιοι περιορισμοί έχουν σε ένα βαθμό ξεπεραστεί από smartphones όπως το iphone Περιορισμοί: Μικρό μέγεθος οθόνης: Κάνει δύσκολο ή αδύνατο να δεις κείμενο και γραφικά που έχουν δημιουργηθεί για οθόνες desktop H/Y Έλλειψη παραθύρων: Σε ένα desktop Η/Υ μπορείς να έχει περισσότερα από ένα παράθυρο ανοικτά (multi tasking, εύκολο να επιστρέψεις σε μια προηγούμενη σελίδα). Στο mobile web, μόνο μια σελίδα μπορεί να εμφανίζεται κάθε στιγμή και οι σελίδες μπορεί να εμφανίζονται με τη σειρά που έγινε η αρχική πρόσβαση (άνοιγμα) Πλοήγηση: Οι περισσότερες συσκευές δεν έχουν κάποιον δείκτη που να μοιάζει με εκείνο του ποντικιού, αλλά χρησιμοποιούν μια up / down λειτουργία για κύλιση Περιορισμοί στο Mobile Web Έλλειψη Javascript και cookies: Εξαιρουμένων των SmartPhones και του iphone οι περισσότερες συσκευές δεν υποστηρίζουν τεχνολογίες για client side scripting και αποθήκευση cookies που χρησιμοποιούνται ευρέως στα web sites για να επαυξήσουν την εμπειρία επίσκεψης, για να κάνουν ελέγχους εγκυρότητας δεδομένων, κλπ. Είδη προσβάσιμων σελίδων Πολλές συσκευές δεν μπορούν να έχουν πρόσβαση σε σελίδες με ασφαλή σύνδεση, Flash ή άλλο παρόμοιο λογισμικό,, PDF αρχεία ή video, αν και αυτοί οι περιορισμοί βρίσκονται υπό συνεχή αναθεώρηση Ταχύτητα: Οι περισσότεροι χρήστες κινητών συσκευών αντιμετωπίζουν πολύ χαμηλότερες ταχύτητες για επικοινωνίες δεδομένων σε σχέση με τους χρήστες desktop Η/Υ 5

Τυπικές αναλύσεις οθονών κινητών συσκευών Δεν υπάρχουν πολλά που μπορεί να κάνει κανείς σε μια οθόνη με πλάτος 128 pixels... To iphone4 έχει ανάλυση 640 960 Σχεδιάζοντας σελίδες για το Mobile Web Σμίκρυνση ή Βελτιστοποίηση για κινητά;;; Υπάρχουν δύο σχολές σκέψης όσον αφορά τη δημιουργία ιστοσελίδων για κινητές συσκευές 1. Η πρώτη λέει ότι ο λόγος που διαχωρίστηκε το περιεχόμενο (XHTML) από το σχεδιασμό (CSS) είναι για να αφήσουμε τα CSS αρχεία να βελτιστοποιήσουν το περιεχόμενο ανάλογα με το browser, άρα και για browser κινητών συσκευών 2. Η δεύτερη λέει ότι η διαφορά μεταξύ οθονών για desktop PCs και κινητών συσκευών δεν έχει μόνο να κάνει με το μέγεθός τους. Οι χρήστες χρησιμοποιούν τις σελίδες με διαφορετικό τρόπο ανάλογα με το αν διαθέτουν κινητή συσκευή ή ένα PC Άρα, το να προσφέρεις μια «μινιατούρα» της desktop σελίδας δεν είναι κατάλληλη λ λύση. Πρέπει να ξαναγράψεις τις σελίδες ειδικά για κινητές συσκευές (δηλαδή να δημιουργήσεις ένα δεύτερο, παράλληλο site!! Πρέπει να αποφασίσεις τι περιεχόμενο πρέπει να κρατήσεις και να το προσφέρεις με ελάχιστο scrolling, clicking, χρόνο αναμονής και μεγέθους για download 6

Η Google έχει σχεδιάσει δύο ξεχωριστές εκδοχή για το site της: η desktop εκδοχή Η κεντρική σελίδα και μια τυπική σελίδα αποτελεσμάτων της Google Η «κλασική» εκδοχή του Google Η εκδοχή βελτιστοποιημένη για κινητές συσκευές 7

Μια σελίδα της wikipedia στον Firefox (σε PC) Μια σελίδα της wikipedia στον Opera Mini (mobile phone) Emulator του Opera Mini browser: http://www.opera.com/mobile/demo Η Wikipedia προσφέρει τη σελίδα της και σε εκδοχή μινιατούρα 8

Ένα άλλο παράδειγμα: μια ιστοσελίδα στον Mozilla Firefox H ίδια σελίδα στον Opera Mini Το συγκεκριμένο site δεν διαθέτει εκδοχή μινιατούρα 9

Τι πρέπει να προσέχουμε όταν αναπτύσσουμε web περιεχόμενο για κινητό: Έλεγχος!!! Το πρώτο πράγμα που πρέπει να κάνουμε όταν προσπαθούμε να προσαρμόσουμε ένα site για οθόνες κινητών είναι να ελέγξουμε την εμφάνισή του στο κινητό μας τηλέφωνο (και PDA, smartphone, tablet) και οποιαδήποτε άλλη κινητή συσκευή πέσει στα χέρια μας Οι emulators (προσομοιωτές) αποτελούν μια καλή λύση όταν δεν έχουμε πολλές συσκευές στα χέρια μας ή θέλουμε να αποφύγουμε τη χρέωση, δεν είναι όμως πάντα αξιόπιστοι Opera Mini i emulator lt Openwave mobile browser emulator Nokia simulators Emulators για Palm, Blackberry, iphone και συσκευές άλλων κατασκευαστών ipad emulator: http://ipad emulator.org/ Μια σελίδα χωρίς stylesheet ειδικά για κινητές συσκευές 10

Προσαρμόζεται αξιοπρεπώς στον Opera browser αλλά όχι στον Openwave Mobile Browser Opera Mini: χρησιμοποιεί την ιδιωτική Small Screen Rendering (SNR) τεχνολογία όταν δεν βρίσκει stylesheet για κινητά Openwave Mobile Browser Τι (δεν) μπορούν να κάνουν τα κινητά και τι μπορούμε να κάνουμε εμείς γι αυτό Η πρόσβαση σε web περιεχόμενο είναι ακριβή, συχνά υπάρχει χρέωση αν KB Κρύψιμο περιττού περιεχομένου, λιγότερες και μικρότερες εικόνες Κάποιοι επισκέπτες μπορεί να επιλέξουν να κατεβάσουν σελίδες χωρίς τα γραφικά τους για λόγους ταχύτητας και οικονομίας Κάθε σημαντική εικόνα του site θα πρέπει να έχει ένα alternate text (εναλλακτικό κείμενο που εμφανίζεται αντί της εικόνας) Τα κινητά έχουν περιορισμένου εύρους οθόνες που διαφέρουν ωστόσο αρκετά στο πλάτος (100 150 στα περισσότερα κινητά, 200 600 σε PDAs/smartphones) Χρήση μίας μόνο στήλης, κρατάμε τις επικεφαλίδες σε μικρό μέγεθος 11

Τι (δεν) μπορούν να κάνουν τα κινητά και τι μπορούμε να κάνουμε εμείς γι αυτό Οι κινητοί browsers συνήθως δεν προσφέρουν πλοήγηση με ποντίκι και παρέχουν περιορισμένες δυνατότητες για εισαγωγή κειμένου (text entry) Προσθήκη συστημάτων πλοήγησης που το κάνει ευκολότερο για τους χρήστες να εμφανίσουν σελίδες «βαριές» σε κείμενο Οι περισσότεροι κινητοί browsers υποστηρίζουν μια γραμματοσειρά, 2 3 διαφορετικά μεγέθη γραμματοσειράς και μπορούν να κάνουν ένα κείμενο bold αλλά όχι italics (τουλάχιστον όχι καλά) Ξεχνάμε τις CSS ιδιότητες (κανόνες) που δεν υποστηρίζονται, δεν ορίζουμε τον τύπο της γραμματοσειράς, αλλαγές σε μεγέθη γραμματοσειράς με em ή ποσοστά (όχι σε pixels) Τι (δεν) μπορούν να κάνουν τα κινητά και τι μπορούμε να κάνουμε εμείς γι αυτό Τα κινητά είναι καλά με τις λίστες και μπορούν να αποδώσουν (συσχετίσουν) κάποια πλήκτρα (keys) σε αριθμημένες επιλογές από λίστες Μπορούμε να χρησιμοποιήσουμε αριθμημένες λίστες (<ol>) για να φτιάξουμε μπάρες πλοήγησης (navigation bars) O CSS κανόνας background image δεν υποστηρίζεται καλά Αποφεύγουμε τις background εικόνες Όλο και περισσότερες κινητές συσκευές έχουν πλέον έγχρωμες οθόνες ενώ οι CSS κανόνες color και background color υποστηρίζονται ικανοποιητικά από τους περισσότερους mobile browsers Κρατάμε καλό contrast ανάμεσα στο χρώμα του κειμένου και του background ώστε το κείμενο να είναι ευανάγνωστο ακόμα και με την οθόνη κάτω από τον ήλιο Κάποιοι mobile browsers αγνοούν εντελώς τα CSS Εξασφαλίζουμε ότι οι σελίδα μας δείχνει αξιοπρεπής και χωρίς CSS 12

Δημιουργώντας stylesheets για κινητά Μπορούμε να δημιουργήσουμε ένα εντελώς ξεχωριστό stylesheet που θα χρησιμοποιείται μόνο στην περίπτωση που η web σελίδα εμφανίζεται σε κινητό τηλέφωνο, PDA ή άλλη κινητή συσκευή Στο <head> τμήμα του XHTML εγγράφου γράφουμε: <link rel= stylesheet type= text.css href= mymobile.css media= handheld /> Στα stylesheets που έχουμε κατασκευάσει για desktop Η/Υ θα πρέπει να προσθέσουμε τον τύπο media= screen ώστε τα αντίστοιχα CSS να μην χρησιμοποιηθούν από κινητούς browsers Αν δεν προσδιορίσουμε τον τύπο media τότε τα CSS χρησιμοποιούνται από όλους τους browsers Κρύψιμο περιττού περιεχομένου Ας κρύψουμε τις μη σημαντικές πληροφορίες και τις μικρές ασήμαντες εικόνες.description {display:none}.miniphotos {display:none}... class= miniphotos... Τα miniphotos κρύφτηκαν 13

Δημιουργία και χρήση ενός Image Header Ένα σημείο όπου έχει περισσότερο νόημα η εμφάνιση εικόνας σε κινητή συσκευής είναι μια εικόνα τίτλος για ολόκληρη τη σελίδα που θα προσδώσει στη σελίδα και μια ιδιαίτερη ταυτότητα σε αυτή τη μικρή οθόνη <div id="header"> <img src= logo.jpg alt= logo image height= 30 width= 100 /> <h1>photobarcelona...</h1>... </div> Στο CSS για desktop Η/Υ κρύβουμε το logo #header img {display: none} Στο CSS για κινητές συσκευές κρύβουμε την επικεφαλίδα υπό μορφή κειμένου h1 {display: none} Δημιουργία και χρήση ενός Image Header 14

Δημιουργία extra συνδέσμων που οδηγούν στην κορυφή της σελίδας Στην κινητή συσκευή θέλουμε να έχουμε συχνά links που να μας πηγαίνουν στην κορυφή της σελίδας για να αποφεύγεται το μεγάλο scrolling Δημιουργούμε νέα links στο XHTML έγγραφο δίνοντάς του την totop class <a class="totop" href="#header">to top</a> Στο CSS για desktop Η/Υ κρύβουμε το logo.totop {display: none} Προσαρμογή σε μικρές οθόνες Προσαρμογή περιθωρίων και παραγεμίσματος (margins, padding) Προσθήκη κενού πριν τα headers ή μετά της παραγράφους για να γίνουν οι ενότητες πιο ευδιάκριτες Προσθήκη περιγραμμάτων (borders) Βοηθάει στην οπτική οργάνωση του περιεχομένου Μείωση μεγέθους των links (π.χ. στην μπάρα πλοήγησης) Για να διατηρηθεί η συγκέντρωση στο καθεαυτό περιεχόμενο Στοίχιση στο κέντρο Η στοίχιση περιεχομένου στο κέντρο δίνει την αίσθηση μεγιστοποίησης του χώρου καθώς ο extra χώρος μοιράζεται δεξιά και αριστερά Αφαίρεση περιγράμματος εικόνων Αν έχουμε εικόνες συνδέσμους, η αφαίρεση του περιγράμματός τους θα τις κάνει ελκυστικότερες 15

Προσαρμογή σε μικρές οθόνες body {text align:center}.description {display:none}.miniphotos i {display:none} h1 {font weight:normal} h1 {display:none} #navbuttons {font size:75%}.date,.continued {font size:75%}.continued {margin bottom:2em} h1, h2, h3 {margin:.5em 0 0 0;padding:2px;fontsize:90%;color:#193D79;border top:4px solid #193D79} p {padding:0;margin:0} img {border:none} Διαθέσιμοι (δωρεάν) εξομοιωτές κινητών συσκευών http://mobiforge.com/page/mobile emulators dotmobi Online Emulator Nokia Browser Simulator Openwave Phone Simulator BlackBerry Simulator Yospace SmartPhone Emulator iphone Simulator Android Emulator BREW Emulator ipad emulator 16

Χρήσιμοι σύνδεσμοι Designing for the Mobile Web: http://www.sitepoint.com/article/designing for mobile web/ Mobile Web Initiative: http://www.w3.org/mobile/ Mobile Web Design: http://www.w3.org/2006/07/mobile_web_design.pdf Mobile Domains: http://en.wikipedia.org/wiki/.mobi... 17