EAP.AKWeb.gr

Παρακάτω παραθέτω τα ερωτήματα που έθεσε ο Παναγιώτης στο επίσημο forum της ΣΔΥ-61 μαζί με τις προσωπικές μου επί τούτων απόψεις. Θα ήθελα και ελπίζω να τοποθετηθείτε και οι υπόλοιποι, δεδομένου ότι το επίσημο forum δεν μας έχει συνηθίσει σε γρήγορες απαντήσεις.

Πιστεύω ότι δεν απαιτείται τίποτε από τα παραπάνω. Μία «απλή» HTML σελίδα θα πρέπει να φτιάξουμε. Πως θα βρεθεί στο κινητό; Όπως όλες η σελίδες. Πληκτρολογούμε το URL και φορτώνεται. Ίσως μπερδεύει ο έλεγχος για κατάσταση on/off line που ζητά. Πιστεύω ότι αυτός στοχεύει σε ένα σενάριο όπου συμπληρώνουμε μία φόρμα, βάζοντας ένα σωρό στοιχεία – πχ διευθύνσεις, τηλέφωνα, πιστωτικές, κ.λπ. – και στην συνέχεια πατάμε το submit για να διαπιστώσουμε ότι έχει χαθεί η σύνδεσή μας και ότι πρέπει να ξαναπεράσουμε όλα τα στοιχεία της φόρμας ξανά, αφού πρώτα κάνουμε refresh.

Συνδυαζόμενο με τα όσα είπα παραπάνω, η άποψή μου είναι ότι απλά θα εμφανίζεται στην σελίδα, με σκοπό να δείξουμε ότι αναγνωρίζουμε το μέγεθος της οθόνης της συσκευής στην οποία τρέχει η εφαρμογή.

Δεδομένου ότι πιστεύω πως κατασκευάζομε μία HTML σελίδα που τρέχει παντού, και όχι μόνο σε ADROID (που δεν θα είχε ιδιαίτερο νόημα), είμαι της άποψης ότι χρησιμοποιούμε μόνο δυνατότητες της HTML 5 σε συνδυασμό με JavaSript – πράγμα που δεν είναι και πολύ αξιόπιστο ούτε αποτελεί inter-browser solution.

Πιστεύω ότι αυτό που μετρά είναι το αποτέλεσμα – δηλαδή και οι δύο υλοποιήσεις είναι αποδεκτές. Εντούτοις, και πιο εύκολο θα είναι με JQuery, αλλά και εμμέσως μας ωθεί να κάνουμε χρήση αυτής.

Τέλος έχω και εγώ ένα ερώτημα: «Όλα τα ζητούμενα θα εμπεριέχονται σε ένα και μοναδικό αρχείο HTML το οποίο σε κάθε περίπτωση θα εμφανίζει και αποκρύπτει τα κατάλληλα τμήματα, ή θα έχουμε πολλαπλά αρχεία;»

Περιμένω τις ενστάσεις ή σύμφωνη γνώμη και των υπολοίπων.

Για το πρώτο και εγώ συμφωνώ ότι κάτι τέτοιο εννοεί, αφού λέει ότι πρέπει να χρησιμοποιήσουμε "όλα τα νέα στοιχεία της HTML5 για φόρμες", αν και αναφέρει ότι ο χρήστης θα εισάγει ονοματεπώνυμο (μόνο).

Και για το δεύτερο συμφωνώ, αν και πιστεύω ότι έτσι όπως είναι διατυπωμένο στην εκφώνηση προκύπτει το αντίθετο.

Για το τρίτο πιστεύω ότι δεν ζητάει οτιδήποτε σε σχέση με ADK (δεν προκύπτει πουθενά από την εκφώνηση κάτι τέτοιο), απλά html σελίδες.

Για το υπόλοιπα δεν έχω (ακόμα) άποψη.

Πάντως άρχισε να αποκτά ενδιαφέρον η Θ.Ε. (εγώ δεν την πάλευα άλλο με τις ασύρματες τεχνολογίες )

Θα επιχειρήσω μια πρώτη καταγραφή εμπειριών με τη βιβλιοθήκη jqtouch:

Με τη βιβλιοθήκη αυτή μπορεί κανείς να φτιάξει σελίδες που να έχουν το στυλ applications των iphones.
Υπάρχει παράδειγμα στο http://ofps.oreilly.com/titles/9780596805784/chapAnimation.html που εξηγεί τη χρήση jqtouch σε
ένα html αρχείο που περιέχει divs ώστε να επιτυγχάνει μετάβαση από το ένα div στο άλλο με transition effects.
Πέρα από αυτό δεν κατάφερα να βρω (ακόμα) κάποιο καλό οδηγό της jqtouch.
Προς το παρόν αυτά που κάνω τα βασίζω στα παραδείγματα του http://www.w3schools.com/jquery.

Η χρήση της βιβλιοθήκης επιβάλει κάποιες default συμπεριφορές που δεν είναι αυτονόητες, όπως για παράδειγμα κατά την αποστολή της φόρμας.
Μετά από αρκετές αποτυχημένες προσπάθειες και αρκετό ψάξιμο στο διαδίκτυο συνειδητοποίησα ότι η jquery (και η jqtouch) υλοποιούν το submit της φόρμας με Ajax (get request) το οποίο όμως δεν είναι εφικτό όταν έχεις ανοίξει τοπικό αρχείο στον browser (είτε στον Η/Υ είτε στο κινητό).

Όταν άνοιξα το αρχείο της φόρμας μέσα local web server(xampp) που έστησα, πατώντας το submit button εμφανίστηκε η σελίδα που είχα δηλώσει στο form action, επειδή προφανώς το Ajax μπορούσε να φέρει το αρχείο αυτό με ξεχωριστό request.

Επειδή στην περίπτωσή μας τα request θα γίνονται τοπικά (άνοιγμα αρχείων html στον browser) αποφάσισα, προς το παρόν, να μην απενεργοποιήσω το action της φόρμας και να υλοποιήσω το "Επόμενο" που ζητά η εκφώνηση με έναν σύνδεσμο.

Πριν από οτιδήποτε άλλο, από το ελάχιστο ψάξιμο που είχα χρόνο να κάνω, συμφωνώ με τον Παναγιώτη σε ότι αφορά την σχέση JQtouch και iPhone, και ως εκ τούτου πιστεύω ότι δεν αφορά την εργασία. Πιστεύω όμως ότι ο ΣΕΠ θέλει να κάνουμε χρήση του JQuery για transitions από σελίδα σε σελίδα κ.λπ., και αυτό το συνδυάζω με την άποψή μου ότι όλα τα ερωτήματα θα πρέπει να υλοποιηθούν σε ένα και μοναδικό αρχείο HTML.

Επανέρχομαι στο θέμα του ενός ή δύο html αρχείων γιατί δεν βλέπω σύντομη απάντηση στο επίσημο forum. Προσωπικά δεν το έχω καταφέρει να παίζει όπως θέλω με ένα html αρχείο (χρησιμοποιώντας την JQuery), δεδομένου ότι θα πρέπει να ζητάει επιβεβαίωση από τον χρήστη για το geolocation μετά από την συμπλήρωση της φόρμας (και όχι με το που ανοίγει η σελίδα), έτσι λέω να το κάνω με δύο αρχεία. Πάντως στην εκφώνηση δεν ξεκαθαρίζει αν πρέπει να το φτιάξουμε με ένα ή δύο αρχεία, απλά ζητά χρήση JQuery και CSS3 transitions. Γενικά όσο προχωράω νομίζω ότι οι εκφωνήσεις είναι λίγο ασαφείς και μπερδεμένες, εκτός και αν είμαστε ελεύθεροι να το υλοποιήσουμε όπως νομίζουμε (κάνοντας χρήση αυτών που μας ζητούνται).

Όσον αφορά το εικονίδιο της εφαρμογής μπορεί να μου πει κάποιος τι κατάλαβε από τις απαντήσεις του ΣΕΠ, γιατί εγώ ομολογώ ότι μπερδεύτηκα...

Το Σαββατοκύριακο αφιέρωσα ΠΟΛΛΕΣ ώρες και προχώρησα αρκετά με την υλοποίηση. Αν και με τα transitions δεν είχα χρόνο να ασχοληθώ, από κάτι λίγα που πείρε το μάτι μου, πιστεύω ότι ο κώδικας πρέπει να γίνει σε ένα αρχείο. Κάθε σελίδα θα εμπεριέχεται σε ένα διαφορετικό div, και η μετάβαση (transition) από σελίδα σε σελίδα να υλοποιηθεί με εξαφάνιση μίας περιοχής (div) και εμφάνιση άλλης περιοχής (div). Σε αντίθετη περίπτωση, με υλοποίηση δηλαδή σε δύο αρχεία, δεν μπορώ να φανταστώ πως θα γίνει σταδιακή εξαφάνιση του ενός και εμφάνιση του άλλου αρχείου – εκτός και αν υπάρχει κάτι που δεν το εντόπισα.

Όσον αφορά τα εικονίδια, ο όρος εικονίδιο μάλλον είναι λάθος. Με τον όρο εικονίδιο (icon), κατά την άποψή μου και σύμφωνα με την εμπειρία μου, υπονοείται η μικρή εκείνη εικόνα που εμφανίζεται στην επάνω αριστερά (συνήθως) γωνία μίας εφαρμογής και χρησιμοποιείται και για την δημιουργία συντομεύσεων – πχ στην επιφάνεια εργασίας. Άρα μιλάμε για εικόνα και όχι εικονίδιο. Από τις δύο αντιφατικές απαντήσεις που έδωσε ο ΣΕΠ, νομίζω ότι η δεύτερη είναι πολύ ξεκάθαρη. Όσον αφορά την πρώτη, δεν είναι και τόσο σαφής και πιστεύω ότι παρασύρθηκε από την διατύπωση του ερωτήματος. Εξάλλου ήταν ξεκάθαρος στο ότι η σελίδα φορτώνεται χωρίς να είναι προαποθηκευμένη στην συσκευή και ως εκ τούτου δεν χρειάζεται συντόμευση, άρα, δεν «κολλάει» το εικονίδιο – τουλάχιστον με την έννοια που το περιγράφω παραπάνω, και πιστεύω ότι το εννοείται και οι υπόλοιποι.

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

Ένα τελευταίο που με προβληματίζει είναι το τι γίνεται στην περίπτωση συσκευών ή browsers που δεν υποστηρίζουν HTML5. Αρχικά, πριν ειπωθεί ότι θα πρέπει να βάλουμε όσα controls χρειάζεται προκειμένου να επιδείξουμε τις δυνατότητες της HTML5, είχα γράψει κώδικα (JavaScript) για τον έλεγχο με τον «παλιό καλό» τρόπο – για το όνομα και το επώνυμο ΜΟΝΟ. Βάζοντας όμως περισσότερα controls το πράγμα πάει μακριά …

Και εγώ κατέληξα τελικά σε 2 αρχεία html.
Στο πρώτο έχω συμπεριλάβει 2 divs:
- ένα για την αρχική οθόνη όπου γίνεται ο έλεγχος συνδεσιμότητας, και
- ένα για την παρουσίαση της φόρμας

Αν υπάρχει σύνδεση μεταβαίνω στο div της φόρμας με transition που έφτιαξα σε CSS3.

Αφού συμπληρωθεί η φόρμα μεταβαίνω στο επόμενο αρχείο όπου εμφανίζω τις πληροφορίες που πήρα από το geolocation.

Συμφωνώ με το σκεπτικό του Αντρέα όσον αφορά την εικόνα (και όχι εικονίδιο) και σκέφτομαι να την ενσωματώσω στο πρώτο div της πρώτης σελίδας,
ώστε να εμφανίζεται στην αρχή.

Προβληματίζομαι λίγο με το πόσα πεδία πρέπει τελικά να ενσωματώσω στη φόρμα, γιατί υπάρχει περιορισμένος χώρος.

Ευχαριστώ για τις απαντήσεις. Και εγώ τελικά άρχισα να το υλοποιώ με ένα html αρχείο, κάνοντας fade in το ένα div και fade out το άλλο.

Αυτό ακριβώς κάνω και εγώ. Αναρωτιέμαι όμως αν και πως μπορεί κάτι τέτοιο να γίνει με δύο σελίδες.

Όσον αφορά τον προβληματισμό του πόσα input πρέπει να βάλει κανείς στην σελίδα νομίζω ότι κακώς το θίξαμε το θέμα. Η εκφώνηση αναφέρει μόνο όνομα και επώνυμο και θα μπορούσαμε κάλλιστα να βάλουμε μόνον αυτά. Τώρα, μετά και την διευκρίνιση που δόθηκε, σίγουρα θα πρέπει να προσθέσουμε μερικά ακόμη. Προσωπικά έχω προσθέσει άλλα δύο, προκειμένου να επιδείξω τον έλεγχο αριθμητικών πεδίων, και νομίζω ότι είναι αρκετά.

Τέλος, αντιλαμβανόμενος ότι μάλλον το έχω προχωρήσει περισσότερο από τους υπόλοιπους, να πω ότι η μεγαλύτερη δυσκολία που συνάντησα ήταν στην επανατοποθέτηση των inputs όταν ο χρήστης περιστρέφει την συσκευή του (portrait-landscape). Θα πρέπει βέβαια να ομολογήσω ότι η προσέγγισή μου δεν πρέπει να είναι και η καλύτερη, διότι μόλις το υλοποίησα, άρχισε να μην τρέχει σε παλαιότερες συσκευές. Ελπίζω κάποια στιγμή να μπορέσω να το ξαναδώ.

Δύο παρατηρήσεις:

- στον Chrome δεν γίνεται να πάρεις geolocation όταν ανοίγεις σελίδα σαν τοπικό αρχείο (file://), όπως θα κάνουμε εμείς σύμφωνα με το σενάριο.
(http://code.google.com/p/chromium/issue ... ?id=100353, http://stackoverflow.com/questions/5423 ... -in-chrome).
Στον εγκατεστημένο browser του Android 4 και στον Opera mobile δεν παρατηρείται συτό το πρόβλημα.

- για να εμφανιστούν σωστά τα πεδία της φόρμας της HTML5 στο κινητό και να μπορεί κανείς να τα χρησιμοποιήσει με την αφή,
μάλλον θα χρειαστεί να χρησιμοποιήσει βιβλιοθήκες όπως η jqtouch και η jquerymobile.
Όμως, αν κατάλαβα καλά από τις διευκρινήσεις εμείς καλούμαστε να υλοποιήσουμε μόνο με τη χρήση HTML5, CSS3 και jQuery (αντί JavaScript).