Ανα πτυξη εφαρμογών για τον κινητο παγκο σμιο ιστο Δρ. Α. Κομνηνο ς Τμη μα Μηχανικών Η/Υ & Πληροφορικη ς Πανεπιστη μιο Πατρών Μα ιος 2013 Εισαγωγη Σκοπο ς του WWW: Δια χυση της πληροφορι ας Τρο πος δια χυσης: Ιστοσελι δες (κει μενα) Πολυμε σα Τρο πος ευ ρεσης Αναζη τηση Συστα σεις Περιη γηση 1
Εισαγωγη Υποθε σεις εργασι ας (παραδοσιακη χρη ση): Ο χρη στης ει ναι σταθερο ς Ο χρη στης ε χει προ σβαση απο μι α οθο νη (σχετικα ) υψηλη ς ανα λυσης Ο χρη στης ει ναι διατεθιμε νος να ξοδε ψει αρκετο χρο νο στην διαδικασι α αναζη τησης Με χρι να βρει αυτο που θε λει Με χρι να αποφασι σει ο τι αυτο δεν ει ναι δυνατο ν να βρεθει Ο χρη στης ει ναι συγκεντρωμε νος στη δραστηριο τητα αναζη τησης και δεν αποσπα ται Ο χρη στης ε χει μια (σχετικα ) αξιο πιστη και ταχει α συ νδεση Τρο ποι προ σβασης στον παγκο σμιο ιστο Παραδοσιακα Desktop Laptop Αναδυο μενα Κινητο τηλε φωνο (smartphone) Tablet Photo-frame Ψυγει o... 2
Τι ωθει την χρη ση απο κινητα ; Δια δοση των Smartphones (iphone) Κοινωνικα δι κτυα Video Location-based services Flat-rate data tariffs Εμπρο ς προς το mobile web! Δεν ει ναι το σο απλο...! Υπα ρχουν πολλα προβλη ματα Χρη στες Συσκευε ς Συνδεσιμο τητα 3
Χρη στες Ο χρη στης ει ναι κινου μενος Συνη θως απασχολημε νος σε μια α λλη δραστηριο τητα Η προσοχη του ει ναι διασπασμε νη σε πολλα ερεθι σματα Δεν ε χει το χρο νο να ψα ξει η να περιηγηθει ασκο πως Χρεια ζεται κα ποιο μικρο κομμα τι πληροφορι ας για να υποστηρι ξει την τρε χουσα δραστηριο τητα Ο χρη στης ει ναι σταθερο ς Χαζευ ει περιμε νοντας (στο σταθμο, στο αεροδρο μιο κτλ) Πα με στα α λλα προβλη ματα Συσκευε ς Η οθο νη ει ναι πολυ μικρη και σχετικα χαμηλη ς ανα λυσης Πυκνο τητα κειμε νου Ποσο τητα πληροφορι ας Ταξινο μηση πληροφορι ας Το πληκτρολο γιο δεν βολευ ει Δυ σκολη εισαγωγη URL / αναζητη σεων Δυ σκολη πλοη γηση Οι υπολογιστικοι πο ροι ει ναι περιορισμε νοι Δεν μπορει να ε χει ανοικτα πολλαπλα παρα θυρα Ταχυ τητα rendering, ικανο τητα scripting 4
Συνδεσιμο τητα 3G Ευρει α κα λυψη Ο χι ιδιαι τερα υψηλη ταχυ τητα Ακριβο (flat-rate tariffs?) Wi-Fi Τοπικη κα λυψη Υψηλη ταχυ τητα Δωρεα ν (ο χι πα ντα!) Η συνδεσιμο τητα ει ναι διακεκομμε νη ιδιαι τερα ο ταν ο χρη στης κινει ται (λεωφορει ο, τραι νο) Νε οι)τρο ποι)χρη σης)του)web 5
Νε οι)τρο ποι)χρη σης)του)web Α ρα τι κα νουμε; Προσεγγι σεις για ανα πτυξη στον κινητο ιστο Τι ποτα :D Μετατροπει ς Mobile Style Sheets Mobile Optimisation Apps (χρη ση του ιστου σαν υπηρεσι α) 6
Native Vs. Web Apps Web Apps - θετικα Εφαρμογε ς γραμμε νες για τον παγκο σμιο ιστο με γνωστε ς γλώσσες προγραμματισμου HTML/CSS, Javascript, PHP/.NET/JSP Cross-platform (με μερικου ς περιορισμου ς) Web Apps - αρνητικα Περιορισμε νη προ σβαση στο υλικο (ανα λογα με την πλατφο ρμα) Προσβα σιμες και εκτελε σιμες μο νο ο ταν ο χρη στης ει ναι συνδεδεμε νος Native Apps: Γιατι ει ναι το σο δημοφιλει ς $$$ (οκ, η πιθανο τητα για $$$) Οι χρη στες μπορου ν να δου ν ευ κολα και γρη γορα κριτικε ς, σχο λια κτλ Η αλληλεπι δραση με το hardware ανοι γει νε ες ευκαιρι ες (ευκολο τερη αλληλεπι δραση, νε ες υπηρεσι ες, επαυ ξηση επερωτη σεων κτλ) Οι χρη στες «εκπαιδευ ονται» απο τις εταιρι ες να ψα ξουν πρώτα στο marketplace Πολλοι χρη στες δεν καταλαβαι νουν την διαφορα μεταξυ native και web app Επι σης, $$$ 7
Πο τε συμφε ρει η ανα πτυξη Web Apps? Cross-platform ευκαιρι ες με μικρο τερο κο στος Ευ κολη προ σβαση σε υπα ρχουσες υπηρεσι ες web χωρι ς εκτενη ανα πτυξη με ετερογενει ς τεχνολογι ες Ο ταν δεν ει ναι κρι σιμη η προ σβαση στο hardware και η χρη ση χωρι ς συ νδεση Αν υπα ρχει η δη μια μεγα λη βα ση χρηστών ε τοιμη να χρησιμοποιη σει την εφαρμογη Layout engines Οι κυ ριες «μηχανε ς» πι σω απο τους browsers σε κινητα ει ναι Webkit (Firefox, Chrome/Android, Palm, Symbian, Blackberry 6.0+) Trident (Internet Explorer/IE Mobile) Presto (Opera, Opera Mini) [http://en.wikipedia.org/wiki/mobile_browser] 8
Για ποιο ν browser; Html 5 + css3 + Javascript Ζωντανε ς, δυναμικε ς ιστοσελι δες με υψηλα επι πεδα αλληλεπι δρασης Ολοκλη ρωση web services χωρι ς τη χρη ση τοπικών πηγών πληροφορι ας Η HTML5 υποστηρι ζει video, audio input Η CSS3 επιτρε πει το animae on και κα ποιο 3D rendering Τε ρμα το Flash (!!!!!!) Δυστυχώς η υποστη ριξη, ακο μα και απο desktop browsers, ποικι λλει http://caniuse.com 9
Html5, css3, svg & more HTML 5 Canvas tag ζωγραφικη J Media playback με ενσωματωμε να controls(δεν χρεια ζεται πλε ον plug-in) Offline storage database Geolocation Web SQL database File API Directories & System File Writer 10
HTML5 + CSS3 = responsive design Σχεδιασμο ς που προσαρμο ζεται στις συσκευε ς που χρησιμοποιου νται Απαιτει προετοιμασι α και γνώση των δυνατοτη των των συσκευών 1. Κρατα με το layout απλο Εξαλει φουμε Α σκοπα πολυ πλοκα divs Inline styles (ο λα αλλιώς δε θα δουλε ψει τι ποτα) JS η flash που ει ναι απαραι τητο και δεν ε χει εναλλακτικη Α σκοπες absolute η floating τοποθετη σεις Οτιδη ποτε μη απαραι τητο η 100% χρη σιμο 11
2. Χρη ση Media Queries IF <this size> THEN <this style> Επικεντρώνουμε στο πλα τος (width) <style> @import url(tiny.css) (min-width:300px); @import url(small.css) (min-width:600px); </style> @media screen and (min-width:240px) and (max-width:300px) { /* tiny styles */ } @media screen and (max-width:600px) and (orientation:landscape) { /* landscape styles */ } Συχνα χρησιμοποιου μενες αναλυ σεις 12
3. Αποφασι ζουμε για τα breakpoints Κινητα 1 ης γενια ς με κανο νες για <480px Συ γχρονα high-end κινητα και tablets σε πορτρε το με <768px Ο λα τα μεγαλυ τερα με >768px Ο χι απαραι τητα αλλα καλο να ε χουμε <320px για χαμηλη ανα λυση Tablets & ipads σε landscape >768px and <1024px Πλατυ design για desktops με >1024px (full desktop version) 4. Κα νουμε ευπροσα ρμοστο layout Αποφευ γουμε απο λυτα μεγε θη Σε συνδυασμο με τα media queries μπορου με να προσαρμοστου με σε κα θε συσκευη 13
5. Εικο νες Προσαρμο ζουμε και εδώ το με γεθος: 100% πλα τος img {width:100%} 100% πλα τος με με γιστο ο τι ει ναι το αρχει ο img {max-width:100%} 6. Με γιστο και Ελα χιστο ΟΚ, τώρα ει ναι 100% πλατια ο λα αλλα δει χνει απαι σιο στο monitor μου που ε χει πλα τος 2560px! Θε τουμε περιορισμου ς Ευπροσα ρμοστο αλλα ο χι κα τω απο 768 και ο χι πα νω απο 1024 min-width:768px; max-width:1024px; Τουλα χιστον 350px σε υ ψος min-height:350px; Ο χι λιγο τερο απο 1000px πλα τος ο ταν το βλε πουμε σε κα ποιο desktop @media screen and (min-width:1024px) { #main { min-width:1000px; } } 14
7. Σχετικο τητα Φτια χνουμε ε να master container με προσαρμοζο μενο η σταθερο με γεθος τα πα ντα ει ναι τε κνα του Ο λα (διαστα σεις, margins, paddings, κτλ) υπολογι ζονται σε % Χρησιμοποιου με ephemeral units (em) αντι για px στις γραμματοσειρε ς δι νουμε ε να απο λυτο font size μο νο στο master container 8. Γραμμικο τητα Ο λα τα layouts για χαμηλε ς αναλυ σεις πρε πει να ει ναι σε ΜΙΑ στη λη! Override το πλα τος! Width -> 100% 15
9. Κρατα με μο νο τα απαραι τητα Ο τι δεν προ κειται ποτε να χρησιμευ σει σε κινητε ς συνθη κες χρη σης, πρε πει να αφεραιθει. Μπορει τε να φτια ξετε μια κλα ση.not_mobile @media screen and (maxwidth:300px) {.not_mobile {display:none;} } Τι ει ναι απαραι τητο; Μια σελι δα = μια λειτουργι α 10. Χρη ση του meta viewport Πολλοι κινητοι browsers εξομοιώνουν μεγαλυ τερες οθο νες, στριμώχνοντας τερα στιες αναλυ σες σε μικρε ς οθο νες. Λυ ση: <head> <meta name= viewport content= width=device-width > </head> 16
Έτοιμο υλικο http://www.mediaqueri.es 17