Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 8: Mobile Web. Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

Transcript

1 Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 8: Mobile Web Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

2 Σκοποί ενότητας Σκοπός της παρούσας ενότητας είναι να εξοικειωθούν οι φοιτητές με τις βασικές αρχές ανάπτυξης εφαρμογών για κινητές συσκευές 2

3 Περιεχόμενα ενότητας Εισαγωγή Native Vs Web Apps Layout Engines HTML 5 CSS3 - JavaScript SVG Media Queries 3

4 Εισαγωγή Σκοπός του WWW: Διάχυση της πληροφορίας Τρο πος δια χυσης: Ιστοσελι δες (κει μενα) Πολυμε σα Τρο πος ευ ρεσης Αναζη τηση Συστα σεις Περιη γηση 4

5 Εισαγωγή Υποθέσεις εργασίας (παραδοσιακή χρήση): Ο χρήστης είναι σταθερός Ο χρήστης έχει πρόσβαση από μία οθόνη (σχετικά) υψηλής ανάλυσης Ο χρήστης είναι διατεθιμένος να ξοδέψει αρκετό χρόνο στην διαδικασία αναζήτησης Μέχρι να βρει αυτό που θέλει Μέχρι να αποφασίσει ότι αυτό δεν είναι δυνατόν να βρεθεί Ο χρήστης είναι συγκεντρωμένος στη δραστηριότητα αναζήτησης και δεν αποσπάται Ο χρήστης έχει μια (σχετικά) αξιόπιστη και ταχεία σύνδεση 5

6 Τρόποι πρόσβασης στον Παγκόσμιο Ιστό Παραδοσιακα Desktop Laptop Αναδυο μενα Κινητο τηλε φωνο (smartphone) Tablet Photo-frame Ψυγει o... 6

7 Τι ωθεί τη χρήση από τα κινητά; Δια δοση των Smartphones (iphone) Κοινωνικα δι κτυα Video Location-based services Flat-rate data tariffs 7

8 Εμπρός προς το mobile Web Δεν είναι τόσο απλό...! Υπάρχουν πολλά προβλη ματα Χρη στες Συσκευε ς Συνδεσιμο τητα 8

9 Χρήστες Ο χρήστης είναι κινούμενος Συνήθως απασχολημένος σε μια άλλη δραστηριότητα Η προσοχή του είναι διασπασμένη σε πολλά ερεθίσματα Δεν έχει το χρόνο να ψάξει ή να περιηγηθεί ασκόπως Χρειάζεται κάποιο μικρό κομμάτι πληροφορίας για να υποστηρίξει την τρέχουσα δραστηριότητα Ο χρήστης είναι σταθερός Χαζεύει περιμένοντας (στο σταθμό, στο αεροδρόμιο κτλ) Πάμε στα άλλα προβλήματα 9

10 Συσκευές Η οθόνη είναι πολύ μικρή και σχετικά χαμηλής ανάλυσης Πυκνότητα κειμένου Ποσότητα πληροφορίας Ταξινόμηση πληροφορίας Το πληκτρολόγιο δεν βολεύει Δυ σκολη εισαγωγη URL / αναζητη σεων Δυ σκολη πλοη γηση Οι υπολογιστικοί πόροι είναι περιορισμένοι Δεν μπορεί να έχει ανοικτά πολλαπλά παράθυρα Ταχύτητα rendering, ικανότητα scripting 10

11 Συνδεσιμότητα 3G Ευρεία κάλυψη Ο χι ιδιαίτερα υψηλή ταχύτητα Ακριβό (flat-rate tariffs?) Wi-Fi Τοπική κάλυψη Υψηλή ταχύτητα Δωρεάν (όχι πάντα!) Η συνδεσιμότητα είναι διακεκομμένη ιδιαίτερα όταν ο χρήστης κινείται (λεωφορείο,τραίνο) 11

12 Άρα τι κάνουμε; Προσεγγίσεις για ανάπτυξη στον κινητό ιστό Τι ποτα :D Μετατροπει ς Mobile Style Sheets Mobile Optimisation Apps (χρήση του ιστού σαν υπηρεσία) 12

13 Native Vs Web Apps Web Apps - θετικά Εφαρμογές γραμμένες για τον παγκόσμιο ιστό με γνωστές γλώσσες προγραμματισμού HTML/CSS, Javascript, PHP/.NET/JSP Cross-platform (με μερικούς περιορισμούς) Web Apps - αρνητικά Περιορισμένη πρόσβαση στο υλικό (ανάλογα με την πλατφόρμα) Προσβάσιμες και εκτελέσιμες μόνο όταν ο χρήστης είναι συνδεδεμένος 13

14 Native Apps: Γιατί είναι τόσο δημοφιλείς; $$$ (οκ, η πιθανότητα για $$$) Οι χρήστες μπορούν να δούν εύκολα και γρήγορα κριτικές, σχόλια κτλ Η αλληλεπίδραση με το hardware ανοίγει νέες ευκαιρίες (ευκολότερη αλληλεπίδραση, νέες υπηρεσίες, επαύξηση επερωτήσεων κτλ) Οι χρήστες «εκπαιδεύονται» από τις εταιρίες να ψάξουν πρώτα στο marketplace Πολλοί χρήστες δεν καταλαβαίνουν την διαφορά μεταξύ native και web app Επίσης, $$$ 14

15 Πότε συμφέρει η ανάπτυξη Web Apps; Cross-platform ευκαιρίες με μικρότερο κόστος Εύκολη πρόσβαση σε υπάρχουσες υπηρεσίες web χωρίς εκτενή ανάπτυξη με ετερογενείς τεχνολογι ες Ο ταν δεν είναι κρίσιμη η πρόσβαση στο hardware και η χρήση χωρίς σύνδεση Αν υπάρχει ήδη μια μεγάλη βάση χρηστών έτοιμη να χρησιμοποιήσει την εφαρμογή 15

16 Layout Engines Οι κύριες «μηχανές» πίσω από τους browsers σε κινητα ει ναι Webkit (Firefox, Chrome/Android, Palm, Symbian, Blackberry 6.0+) Trident (Internet Explorer/IE Mobile) Presto (Opera, Opera Mini) [ 16

17 HTML + css3 + JavaScript Ζωντανές, δυναμικές ιστοσελίδες με υψηλά επίπεδα αλληλεπίδρασης Ολοκλήρωση web services χωρίς τη χρήση τοπικών πηγών πληροφορίας Η HTML5 υποστηρίζει video, audio input Η CSS3 επιτρέπει το animation και κάποιο 3D rendering Τέρμα το Flash (!!!!!!) Δυστυχώς η υποστήριξη, ακόμα και από desktop browsers, ποικίλλει 17

18 HTML5 Canvas tag ζωγραφική Media playback με ενσωματωμένα controls(δεν χρειάζεται πλέον plug-in) Offline storage database Geolocation Web SQL database File API Directories & System File Writer 18

19 HTML5 + css3 = responsive design Σχεδιασμός που προσαρμόζεται στις συσκευές που χρησιμοποιούνται Απαιτεί προετοιμασία και γνώση των δυνατοτήτων των συσκευών 19

20 1. Κρατάμε το Layout απλό Εξαλει φουμε Α σκοπα πολυ πλοκα divs Inline styles (όλα αλλιώς δε θα δουλέψει τίποτα) JS ή flash που είναι απαραίτητο και δεν έχει εναλλακτικη Α σκοπες absolute η floating τοποθετη σεις Οτιδήποτε μη απαραίτητο ή 100% χρήσιμο 20

21 2. Χρήση Media Queries IF <this size> THEN <this style> Επικεντρώνουμε στο πλάτος (width) url(tiny.css) url(small.css) (min-width:600px); screen and (min-width:240px) and (max-width:300px) { /* tiny styles */ screen and (max-width:600px) and (orientation:landscape) { /* landscape styles */ } 21

22 3. Αποφασίζουμε για τα breakpoints Κινητά 1ης γενιάς με κανόνες για <480px Σύγχρονα high-end κινητά και tablets σε πορτρέτο με <768px Ο λα τα μεγαλύτερα με >768px Ο χι απαραίτητα αλλά καλό να έχουμε <320px για χαμηλή ανάλυση Tablets & ipads σε landscape >768px and <1024px Πλατύ design για desktops με >1024px (full desktop version) 22

23 4. Κάνουμε ευπροσάρμοστο layout Αποφεύγουμε απόλυτα μεγέθη Σε συνδυασμό με τα media queries μπορούμε να προσαρμοστούμε σε κάθε συσκευή 23

24 5. Εικόνες Προσαρμόζουμε και εδώ το μέγεθος: 100% πλάτος img {width:100%} 100% πλάτος με μέγιστο ότι είναι το αρχείο img {max-width:100%} 24

25 6. Μέγιστο και Ελάχιστο ΟΚ, τώρα είναι 100% πλατιά όλα αλλά δείχνει απαίσιο στο monitor μου που έχει πλάτος 2560px! Θέτουμε περιορισμούς Ευπροσάρμοστο αλλά όχι κάτω από 768 και όχι πάνω από 1024 min-width:768px; max-width:1024px; Τουλάχιστον 350px σε ύψος min-height:350px; Ο χι λιγότερο από 1000px πλάτος όταν το βλέπουμε σε κάποιο screen and (min-width:1024px) { #main { min-width:1000px; } } 25

26 7. Σχετικότητα Φτιάχνουμε ένα master container με προσαρμοζόμενο ή σταθερό μέγεθος τα πάντα είναι τέκνα του Ο λα (διαστάσεις, margins, paddings, κτλ) υπολογίζονται σε % Χρησιμοποιούμε ephemeral units (em) αντί για px στις γραμματοσειρές δίνουμε ένα απόλυτο font size μόνο στο master container 26

27 8. Γραμμικότητα Ο λα τα layouts για χαμηλές αναλύσεις πρέπει να είναι σε ΜΙΑ στήλη! Override το πλάτος! Width -> 100% 27

28 9. Κρατάμε μόνο τα απαραίτητα Ο τι δεν πρόκειται ποτέ να χρησιμεύσει σε κινητές συνθήκες χρήσης, πρέπει να αφεραιθεί. Μπορείτε να φτιάξετε μια screen and (maxwidth: 300px) {.not_mobile {display:none;} } Τι είναι απαραίτητο; Μια σελίδα = μια λειτουργία 28

29 10. Η χρήση του meta viewport Πολλοί κινητοί browsers εξομοιώνουν μεγαλύτερες οθόνες, στριμώχνονταςτεράστιες αναλύσες σεμικρές οθόνες. Λύση: <head> <meta name= viewport content= width=device-width > </head> 29

30 Τέλος Ενότητας

31 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 31

32 Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση

33 Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Ιωάννης Γαροφαλάκης, «Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό». Έκδοση: 1.0. Πάτρα Διαθέσιμο από τη δικτυακή διεύθυνση: 33

34 Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 34