Ο παγκόσμιος Ιστός στις κινητές συσκευές

Ο παγκόσμιος Ιστός στις κινητές συσκευές Τζέριες Μπεσαράτ, MSc, PhD Τμήμα Μηχανικών Η/Υ & Πληροφορικής Πανεπιστήμιο Πατρών Μάιος 2017

Τι θα δούμε? Τι σημαίνει mobile web? Δυσκολίες και περιορισμοί Λύσεις και Σχεδιαστικοί κανόνες (βασικές αρχές) Περιήγηση Αναζήτηση Φόρμες Εφαρμογές για τον Παγκόσμιο Ιστό Κατηγορίες εφαρμογών Native Vs. Web Vs. Hybrid apps Τεχνολογίες στο mobile web Παραδείγματα εφαρμογών Android Intro

Τι σημαίνει mobile web? Κινητός παγκόσμιος ιστός: Η δυνατότητα να έχω πρόσβαση στο Internet από το κινητό ή το tablet μου χρησιμοποιώντας ασύρματη σύνδεση (WiFi, 3G κλπ.) Παγκόσμιος ιστός: Ιστοσελίδες Πολυμέσα Πληροφορίες σε πραγματικό χρόνο (π.χ. αναχωρήσεις τρένων, καθυστερήσεις πτήσεων, ενοικίαση αυτοκινήτου κλπ.) Αναζήτηση Περιήγηση

Τι σημαίνει mobile web? Παραδοσιακή χρήση: Η πρόσβαση στον Παγκόσμιο ιστό γινόταν και εξακολουθεί να γίνεται μέσω υπηρεσιών σταθερής τηλεφωνίας για φορητούς και επιτραπέζιους υπολογιστές. Ο χρήστης είναι σταθερός και έχει μια μεγάλη οθόνη (τουλάχιστον μεγαλύτερη από 9 ίντσες!!) Αν είμαι στο δρόμο και αλλάξει η ώρα της πτήσης μου? Απλό: το τσεκάρω από το smartphone μου! -> Mobile Web Μπορώ όμως να έχω την ίδια ευκολία πρόσβασης στην πληροφορία από το κινητό μου όπως την έχω στην οθόνη του pcιου μου?

Δυσκολίες και περιορισμοί Task: Δοκιμάστε να κλείσετε ένα ξενοδοχείο στην Ζάκυνθο για το 15αυγουστο. 1. Εύρεση ηλεκτρονικής υπηρεσίας για κρατήσεις για τις ημερομηνίες που θέλω 2. Αναζήτηση ξενοδοχείων 3. Εύρεση από την λίστα των ξενοδοχείων 4. Χάζεμα εικόνων, ανάγνωση σχολίων από προηγούμενους επισκέπτες, βαθμολογίες κλπ. 5. Βρήκα ξενοδοχείο! Φόρμα συμπλήρωσης στοιχείων, εισαγωγή πιστωτικής, διάφορες επιλογές(δωμάτιο με θέα?, διπλό κρεβάτι ή δυο μονά? κλπ.) 6. Email επιβεβαίωσης (αλλαγή από το web στην εφαρμογή email)

Δυσκολίες και περιορισμοί Μέγεθος οθόνης Καθιστά δύσκολο ή αδύνατο να δείτε κείμενο και γραφικά που εξαρτώνται από το μέγεθος της οθόνης ενός υπολογιστή Πολλαπλά παράθυρα Αδύνατο το άνοιγμα περισσότερων του ενός παραθύρου ταυτόχρονα Περιήγηση Δύσκολη περιήγηση μέσα σε μια ιστοσελίδα. Ειδικά όταν είναι μεγάληη ποσότητα της πληροφορίας και των γραφικών. Πληκτρολόγιο Η μισή οθόνη!!

Λύσεις και σχεδιαστικοί κανόνες Περιήγηση Μια αρχική σελίδα στην επιφάνεια εργασίας χρησιμεύει συχνά ως μια ευπρόσδεκτη σελίδα. Μπορεί να αποτελέσει το κέντρο μηνυμάτων αλλά και κέντρο προώθησης (όλα σε ένα), αλλά στο κινητό η αρχική σελίδα θα πρέπει να επικεντρώνεται στην τρέχουσα ενέργεια που ψάχνει ο χρήστης. Ο χρήστης είναι κινούμενος (π.χ. προσγειώθηκε και θέλει να νοικιάσει αυτοκίνητο)

1. Περιήγηση Αρχές 1. Διατήρηση των βασικών ενεργειών κεντρικά και μπροστά 2. Απόκρυψη των υπομενού και δευτερευουσών λειτουργιών εξακολουθώντας να δίνετε πρόσβαση σε αυτά διακριτικά 3. Διατήρηση ευκολίας για την επιστροφή στην αρχική σελίδα 4. Μην αφήσετε διαφημίσεις και banners να αποσπάσουν την προσοχήτου χρήστη (δεν χρειάζονται οι κινούμενες εικόνες, τα animations και οι διαφημίσεις) KEEP ITSIMPLE

1. Περιήγηση Βασικές ενέργειες μπροστά Γρήγορη επιστροφή στην λίστα Διατήρηση των βασικών ενεργειών μπροστά και κεντρικά Μην ξεχνάτε μικρή οθόνη! Δώστε βαρύτητα εκεί που έχει σημασία. Το Κλειδί: βασικές ενέργειες σε σημεία που ο χρήστης δεν πρόκειται να αγνοήσει. Φωτογραφίες με δυνατότητα swipe και zoom Τι κάνει σωστά το kayak.com? Σύντομη λίστα με βασικές πληροφορίες (βαθμολογία, πλήθος σχολίων, τιμή, εικόνα) Άμεση πληροφόρηση για το ξενοδοχείο Ξεκάθαρη η βασική ενέργεια. Επισήμανση οικονομικότερης τιμής. Δευτερεύουσες πληροφορίες από κάτω

1. Περιήγηση Απόκρυψη υπομενού Απόκρυψη μενού εξακολουθώντας να δίνεται η πρόσβαση μέσω μικρού κουμπιού Ένα πλούσιο μενού θα μπορούσε να λειτουργήσει καλά σε μια μεγάλη οθόνη, αλλά στο κινητό οι χρήστες δεν θα έχουν την υπομονή να μετακινηθούν μέσα σε μια μακρά λίστα επιλογών και να προσπαθήσουν να βρουν ό, τι θέλουν. Σκεφτείτε πώς γίνεται να παρουσιαστούν όσο τον δυνατόν λιγότερα στοιχεία στο μενού. Θυμηθείτε: ΔΕΝ έχουν ποντίκι!! Το Κλειδί: Χρησιμοποιείστε μικρά μενού τα οποία επεκτείνονται και μαζεύονται όποτε το επιλέξει ο χρήστης.

1. Περιήγηση Ευκολία επιστροφής στην αρχική σελίδα Επιλέγοντας το logo επιστρέφει στην αρχική σελίδα. Όταν οι χρήστες περιηγούνται μέσα στο site, θέλουν έναν εύκολο τρόπο για να επιστρέψουν πίσω στην αρχική σελίδα. Σκεφτείτε πως θα μπορούσατε με ένα πάτημα να το πετύχετε αυτό! Το Κλειδί: Χρησιμοποιήστε το logo ως link για να επιστρέφει στην αρχική σελίδα.

1. Περιήγηση Μην αποσπάτε την προσοχή του χρήστη Slideshow Banner Μεγάλα banners και διαφημίσεις μπορούν να επισκιάσουν το περιεχόμενο και αυτό να το καταστήσει πιο δύσκολο για τους χρήστες να πραγματοποιήσουν τις βασικές ενέργειες που θέλουν. Το Κλειδί: Διατηρήστε τα banners και τις διαφημίσεις πλήρως διαχωρισμένα από τις βασικές επιλογές περιήγησης χωρίς να τις επικαλύπτουν. Τι δεν κάνει σωστά το plaisio.gr? Μεγάλο banner (παραπάνω από την μισή οθόνη) Προσφορές ακριβώς από κάτω. Που είναι οι βασικές επιλογές?? Slideshow Προσφορές

2. Αναζήτηση Αναζήτηση στο site Η λειτουργία της αναζήτησης είναι ζωτικής σημασίας για το αν κάποιος θα ασχοληθεί και θα αφιερώσει χρόνο στο site. Και αυτό γιατί ο χρήστης που ψάχνει από το κινητό του το κάνει γιατί το πιο πιθανό είναι έξω και δεν έχει χρόνο για χάσιμο! Θέλει άμεσα αποτέλεσμα. (π.χ. αναζήτηση εφημερεύοντος φαρμακείου από site με όλα τα φαρμακεία της Ελλάδας)

2. Αναζήτηση Αρχές 1. Εμφανής η λειτουργία της αναζήτησης 2. Αποτελέσματα σωστά ταξινομημένα και σχετικά με την λέξη/φράση κλειδί 3. Χρήση φίλτρων για βελτίωση χρήσης

2. Αναζήτηση Εμφανής λειτουργία αναζήτησης Το πεδίο αναζήτησης στην κορυφή και ξεκάθαρο Οι χρήστες που ψάχνουν για συγκεκριμένες πληροφορίες συνήθως θα στραφούν σε αναζήτηση. Έτσι η λειτουργία αναζήτησης θα πρέπει να είναι ένα από τα πρώτα πράγματα που βλέπουν οι χρήστες στην ιστοσελίδα. Το Κλειδί: Δημιουργείστε ανοιχτά πεδία αναζήτησης στην κορυφή της σελίδας. Τι κάνει σωστά το amazon.com?

2. Αναζήτηση Σχετικά αποτελέσματα βάση της λέξης κλειδί Οι χρήστες δεν έχουν πρόβλημα να περιηγηθούν μέσα από πολλαπλές σελίδες των αποτελεσμάτων αναζήτησης. Ωστόσο, έχουν πρόβλημα όταν τα αποτελέσματα δεν είναι ταξινομημένα σωστά βάση της αναζήτησης. Επίσης, κάντε τη ζωή ευκολότερη για τους χρήστες σε μικρές οθόνες, με έξυπνη αναζήτηση, υλοποιώντας χαρακτηριστικά όπως αυτόματη συμπλήρωση και διόρθωση ορθογραφικών. Το Κλειδί: Σιγουρευτείτε ότι το ισχυρότερο και καλύτερο αποτέλεσμα είναι στην πρώτη θέση. Προσφέρετε αυτόματη συμπλήρωση. Δώστε χώρο στα προτεινόμενα αποτελέσματα!!

2. Αναζήτηση Φίλτρα αναζήτησης Οι χρήστες βασίζονται στα φίλτρα για να περιορίσουν τα αποτελέσματα της αναζήτησης. Ωστόσο, θα πρέπει ο χρήστης να χρησιμοποιεί επιλογές από προκαθορισμένα φίλτρα και όχι να γράφει ελεύθερο κείμενο. Με αυτόν τον τρόπο αποφεύγεται ο κίνδυνος να αναζητήσουν για πράγματα που δεν υπάρχουν. Επίσης, δώστε πληροφορίες όπως το σύνολο των αποτελεσμάτων αν εφαρμόσουν κάποιο φίλτρο. Έτσι θα γνωρίζουν αν κάποιος συνδυασμός φίλτρων επιστρέφει αποτέλεσμα ή όχι πριν τον εφαρμόσουν. Το Κλειδί: Προκαθορισμένα φίλτρα αναζήτησης. Πλήθος αποτελεσμάτων ανάλογα τα επιλεγμένα φίλτρα.

3. Συμπλήρωση φορμών Φόρμες Είτε πρόκειται για ηλεκτρονική αγορά, είτε να στείλει ένα email, είτε να γραφτεί σε newsletter, η εμπειρία συμπλήρωσης φόρμας του χρήστη, πρέπει να είναι όσο το δυνατόν πιο εύκολη και κατανοητή. Η συμπλήρωση φορμών είναι από τα πιο βασικά στοιχεία, δεδομένου ότι ο χρήστης δεν θα προχωρήσει σε εγγραφή ούτε θα δώσει τα στοιχεία του αν του κάνετε την ζωή δύσκολη.

3. Φόρμες Αρχές 1. Πληκτρολόγιο σχετικό με τα πεδία εισόδου 2. Χρήση σωστών πεδίων ανάλογα τον σκοπό (όσο πιο απλά τόσο καλύτερα) 3. Έξυπνη συμπλήρωση πεδίων με χρήση χαρακτηριστικών της συσκευής 4. Έλεγχος των τιμών στα πεδία καθώς συμπληρώνονται 5. Σχεδιασμός αποδοτικών φορμών

3. Φόρμες Πληκτρολόγιο σχετικό με τα πεδία εισόδου Το πεδίο Α.Φ.Μ δεν χρειάζεται χαρακτήρες! Πεδία όπως ταχυδρομικός κώδικας, Τηλέφωνο επικοινωνίας κλπ. δεν χρειάζονται γράμματα. Επομένως το πληκτρολόγιο θα πρέπει να είναι σε αριθμητική λειτουργία. Μην προκαλείτε σύγχυση, εμφανίζοντας ολοκληρωμένο πληκτρολόγιo και αναγκάζοντας τον χρήστη να εναλλάσσεται από το κανονικό στο αριθμητικό πληκτρολόγιο. Επίσης,τα κουμπιά είναι μεγαλύτερα και έτσι μειώνεται η πιθανότητα να πατηθεί λάθος νούμερο. Το Κλειδί: Πληκτρολόγιο με νούμερα για πεδία που δέχονται μόνο αριθμούς. Χρήση ολοκληρωμένου ημερολογίου για επιλογή ημερομηνίας

3. Φόρμες Χρήση σωστών πεδίων ανάλογα το σκοπό Κάθε εγγραφή είναι ένα κουμπί! Η λίστα έχει έρθει μπροστά κρύβοντας οτιδήποτε είναι άσχετο με αυτή. Όταν οι χρήστες καλούνται να επιλέξουν από μια λίστα επιλογών, είναι ευκολότερο να τους παρουσιάζεται με χρήση radio button από το να εισαγάγουν κείμενο ή να το επιλέξουν από ένα dropdown μενού(μην ξεχνάτε δεν έχουν ποντίκι! Ούτε αρκετό χώρο για scroll). Το Κλειδί: Σιγουρευτείτε ότι τα στοιχεία στην λίστα είναι εύκολα επιλέξιμα. Αυτό προϋποθέτει μεγάλα κουμπιά και την εστίαση της οθόνης στην λίστα επιλογών.

3. Φόρμες Χρήση χαρακτηριστικών συσκευής για συμπλήρωση πεδίων Χρήση του GPS για αυτόματη συμπλήρωση της τοποθεσίας! Χρήση Cameras για αυτόματη συμπλήρωση στοιχείων πιστωτικής κάρτας! Διευκολύνετε τους χρήστες, συμπληρώνοντας έξυπνα και γρήγορα πεδία σε μια φόρμα. Χρησιμοποιήστε χαρακτηριστικά της συσκευής όπως GPS, Camera κλπ. για να συμπληρώσετε αυτόματα τα πεδία. Με αυτόν τον τρόπο είστε σίγουροι ότι το πεδίο δεν έχει συμπληρωθεί λάθος και ο χρήστης είναι ευχαριστημένος. Το Κλειδί: Από το γράψιμο στο σκανάρισμα.

3. Φόρμες Έλεγχος των τιμών στα πεδία καθώς συμπληρώνονται Τοποθετήστε σαφής ετικέτες στα πεδία, και βεβαιωθείτε ότι είναι ορατές όταν οι χρήστες εισάγουν την πληροφορία. Μην αφήνετε τον χρήστη χωρίς καθοδήγηση. Μόλις εισάγουν την πληροφορία, ελέγξτε αυτομάτως το πεδίο και ενημερώστε για σφάλματα σε πραγματικό χρόνο πριν από την υποβολή φόρμας. Έτσι ο χρήστης δεν θα χρειαστεί να συμπληρώσει εκ νέου όλη την φόρμα. Το Κλειδί: Χρήση σαφών και ξεκάθαρων ετικετών για να καταλάβουν οι χρήστες τι ζητάει κάθε πεδίο. Έλεγχος πεδίου σε πραγματικό χρόνο, έτσι ώστε να ενημερωθεί ο χρήστης ότι υπάρχει σφάλμα πριν κάνει την υποβολή.

3. Φόρμες Σχεδιασμός αποδοτικών φορμών Σιγουρευτείτε ότι η φόρμα δεν έχει επαναλαμβανόμενες ενέργειες, παρά μόνο τόσα πεδία όσα χρειάζονται και με αυτόματη συμπλήρωση. Φόρμες που είναι χωρισμένες σε τμήματα θα πρέπει να παρέχουν μια μπάρα προόδου έτσι ώστε να ενημερώνει τον χρήστη για το πότε τελειώνει. Τμηματική φόρμα με ένδειξη σε ποιο βήμα βρίσκεται ο χρήστης. Το Κλειδί: Ελαχιστοποιήστε το πλήθος των πεδίων. Χρήση αυτόματης συμπλήρωσης. Τι κάνει σωστά το apple.com?

Εφαρμογές για τον Παγκόσμιο Ιστό Γιατί να ασχοληθώ με mobile web και εφαρμογές? Η χρήση των κινητών διπλασιάζεται χρόνο με τον χρόνο Κινητές συσκευές Desktop - Laptop Ιαν 2009: 0.7% Ιαν 2010: 1.6% Ιαν 2011: 4.3% Ιαν 2012: 8.5% Ιαν 2017 : 53.3% Ιαν 2009: 99.3% Ιαν 2010: 98.4% Ιαν 2011: 95.7% Ιαν 2012: 85.8%. Ιαν 2017: 46.7%

Εφαρμογές για τον Παγκόσμιο Ιστό Κατηγορίες Εφαρμογών Native Apps Εφαρμογές γραμμένες στην γλώσσα προγραμματισμού του κινητού. Web Apps Εφαρμογές γραμμένες με γλώσσες του παγκόσμιου ιστού (JavaScript, Html/CSS) Hybrid Apps Εφαρμογές γραμμένες με γλώσσες του παγκόσμιου ιστού (JavaScript, Html/CSS)

Native vs. Web εφαρμογές Τι πρέπει να επιλέξω? Εξαρτάται από το σκοπό της εφαρμογής Offline περιεχόμενο? Χρήση native λειτουργιών της συσκευής (SMS, GPS, Camera κλπ.)? Εξατομικευμένη πληροφορία?... Native Απόκτηση από συγκεκριμένα portals (Google play, App store) Ξεχωριστή εφαρμογή για κάθε πλατφόρμα (Android, ios, WP) Απαιτείται εγκατάσταση της εφαρμογής πρώτα Αναβαθμίσεις -> έλεγχος συμβατότητας, νέα APIs κλπ. Δύσκολη εύρεση (μόνο στα portals) Δύσκολη γνωστοποίηση Μεγαλύτερος κόπος -> καλύτερη πληρωμή Web Πρόσβαση από οποιοδήποτε browser Ίδιο για όλες τις πλατφόρμες Άμεση πρόσβαση από τον browser της συσκευής Απλή ενημέρωση του CSS ή του περιεχομένου Google search Εύκολες Κοινοποιήσεις από Facebook, Twitter κλπ. Οικονομικότερη λύση

Native vs. Hybrid εφαρμογές Hybrid εφαρμογές: Native + Web = Cordova Χρήση web γλωσσών Χρήση plugin για επικοινωνία με native λειτουργίες (GPS, βάσεις δεδομένων, επαφές κλπ.) Native Look and Feel Τρέχουν μέσα σε Native Webview Χρήση προχωρημένων JS και UI frameworks (OnsenUI, Ionic, AngularJS) Γράφεις μια φορά, τρέχει παντού τοίδιο Υποστήριξη για όλες τις πλατφόρμες

Τεχνολογίες στο mobile web HTML5 + CSS3 + JavaScript HTML5: Βασική για την δημιουργία της δομής της σελίδας CSS3: Βασικό για την μορφοποίηση (UI) της δομής της σελίδας JavaScript: Βασική για το ζωντάνεμα της εφαρμογής CSS3: Υποστηρίζει animations, transitions, media queries JavaScript: AngularJS, ReactJS, VueJS Ξεχάστε το Flash! (πολλά bugs, μη ασφαλές) Υποδεχτείτε τα νέα video και audio στοιχεία της HTML5 και τα animations του CSS3 Τα πάντα δουλεύουν με Asynchronous JavaScript and XML (AJAX)

Android intro Java Review Android Dev. Environment Android Studio Android SDK Android Device / Simulator PC/Mac/Linux Documentation http://developer.android.com

Android project structure Δομή ενός project manifest AndroidManifest.xml -> το αρχείο ρυθμίσεων της εφαρμογής java package.name -> ο κώδικας της εφαρμογής res drawable -> layout ->.xml αρχεία που αφορούν την εμφάνιση menu ->.xml αρχεία που αφορούν πρόσθετες επιλογές mipmap -> το logo της εφαρμογής values ->.xml αρχεία με δεδομένα εφαρμογής (π.χ Strings κλπ.)

Android manifest & layout AndroidManifest.xml activity_main.xml

Android activity protected void oncreate(bundle savedinstancesstate){ super.oncreate(savedinstancesstate); setcontentview(r.layout.activity_main); Toolbar toolbar = (Toolbar) findviewbyid(r.id.toolbar); setsupportactionbar(toolbar); } FloatingActionButton fab = (FloatingActionButton) findviewbyid(r.id.fab); fab.setonclicklistener(new View.OnClickListener() { @Override public void onclick(view view){ Snackbar.make(view, Hello Android!, Snackbar.LENGTH_LONG).setAction( Action, null).show(); } }); @Override public void onresume(){ super.onresume(); } @Override public void onpause(){ super.onpause(); } @Override public void onstop(){ super.onstop(); } @Override public void ondestroy(){ super.ondestroy(); } Android activity oncreate, onresume, onstop, ondestroy Super keyword: Χρησιμοποιείται για να γίνει κλήση μιας μεθόδου που ανήκει στην υπερκλάση Γράφεται πάντα πρώτη (όποτε χρησιμοποιείται) public class LegalSecretary extends Secretary { public double getsalary() { double basesalary = super.getsalary(); return basesalary + 5000.0; }... }