Πώς να προγραμματίσετε την απουσία JavaScript
Αν και οι μέθοδοι που χρησιμοποιούνται για τη συλλογή στατιστικών στοιχείων επισκεψιμότητας του ιστότοπου θέτουν υπό αμφισβήτηση την εγκυρότητα των στατιστικών στοιχείων, το γεγονός είναι ότι μερικοί από τους επισκέπτες του ιστότοπού σας θα έχουν απενεργοποιημένη JavaScript .
Μπορείτε να διαιρέσετε τις πηγές επισκεψιμότητας σε τέσσερις ευρείες κατηγορίες:
Οι μηχανές αναζήτησης, οι κινητοί επισκέπτες, οι επισκέπτες που χρησιμοποιούν συσκευές ανάγνωσης οθόνης και οι επισκέπτες που έχουν απενεργοποιήσει το JavaScript .
Κατά τον σχεδιασμό της αρχιτεκτονικής και του σχεδιασμού της πληροφορίας, πρέπει να καταλάβετε πώς να αντιμετωπίζετε αυτές τις ειδικές ομάδες.
Έχω συγκεντρώσει μερικά πρόσφατα σενάρια πραγματικού κόσμου για να βρω σαφήνεια σχετικά με το θέμα.
Όταν θέλετε να κρύψετε το μακρύ περιεχόμενο πίσω από έναν κινούμενο κύλινδρο κύλισης ή να περιστρέψετε με προϊόντα ή μαρτυρίες διαδοχικά ή να παρουσιάσετε καθαρά το επίπεδο περιεχομένου σε επίπεδο σελίδας, θα μπορούσατε να χρησιμοποιήσετε ακορντεόν, καρουσέλ ή οποιαδήποτε άλλη φανταστική λύση.
Εάν ακολουθείτε τις βέλτιστες πρακτικές JavaScript ή χρησιμοποιείτε οποιαδήποτε από τις μυριάδες βιβλιοθήκες JavaScript, ίσως έχετε ήδη εξοικειωθεί με το διακριτικό JavaScript, το οποίο είναι η τεχνική παρουσίασης της αλληλεπίδρασης JavaScript μόνο όταν είναι ενεργοποιημένη η JavaScript.
Αυτή η αρχή θα πρέπει να επεκταθεί και στην παρουσίαση: να χτίσετε τα δυναμικά χαρακτηριστικά και να ορίσετε τις τιμές προβολής και ορατότητας μόνο αφού το έγγραφο είναι έτοιμο και μόνο εάν ο επισκέπτης έχει ενεργοποιημένη τη JavaScript, αντί να ορίσετε τις ιδιότητες στον κώδικα HTML ή να ορίσετε από την πλευρά του διακομιστή.
Όπως και πολλοί αναγνώστες οθόνης, ο ανιχνευτής της Google τείνει να αγνοεί το περιεχόμενο που τυλίγεται σε ένα στοιχείο που έχει οριστεί display: none , ενώ ανιχνεύει οποιοδήποτε περιεχόμενο έχει οριστεί display: visible .
Επομένως, το καθήκον σας ως σχεδιαστής είναι να σχεδιάσετε το χώρο και τη διάταξη γύρω από τα δυναμικά σας χαρακτηριστικά και επίσης να προετοιμαστείτε για περιπτώσεις όπου η "δυναμική" δεν είναι επιλογή.
Εάν το περιεχόμενο σε μια από τις σελίδες σας θα είναι πάντα ορατό στα προγράμματα περιήγησης ορισμένων χρηστών, πώς πρέπει να εμφανίζεται; Πρέπει το κρυφό περιεχόμενο να παραμείνει κρυμμένο ακόμη και αν είναι απενεργοποιημένη η JavaScript; Πρέπει να είναι διαθέσιμο όλο το περιεχόμενο για αναγνώστες οθόνης και μηχανές αναζήτησης; Εάν ένα κομμάτι περιεχομένου γίνεται ορατό μόνο μετά από μια κλήση AJAX, πώς πληρώνετε επαρκώς αυτό το χώρο όταν η JavaScript είναι απενεργοποιημένη;
Το ακορντεόν
Ένα ακορντεόν είναι μια δομή που συνήθως αποτελείται από ένα μοτίβο ζευγών της επικεφαλίδας και του περιεχομένου. Τα μπλοκ περιεχομένου θα επεκταθούν μία φορά τη φορά, σε απάντηση σε ένα συμβάν που ενεργοποιείται στην επικεφαλίδα.
Ακορντεόν του Χούλου
Πρόσφατα βοήθησα έναν πελάτη να ξεπεράσει το πρόβλημα της ύπαρξης πολύ μεγάλων σελίδων. Αυτός ο πελάτης διέθετε έναν ηλεκτρονικό κατάλογο μαθημάτων κατάρτισης και ανέφερε ότι όλες οι πληροφορίες για ένα συγκεκριμένο πρόγραμμα πρέπει να είναι διαθέσιμες μπροστά: χωρίς παράβλεψη σελίδων ή αναδυόμενα παράθυρα για βασικές περιγραφές μαθημάτων ή ορισμούς προγραμμάτων.
Όλες οι πληροφορίες του προγράμματος έπρεπε να είναι διαθέσιμες στον επισκέπτη στην ίδια σελίδα, χωρίς να χρειάζεται να πλοηγηθείτε πέρα δώθε στον κατάλογο μαθημάτων.
Η σωστή λύση εδώ ήταν ένα ακορντεόν , καταρρέουσες περιγραφές μαθημάτων κάτω από τις επικεφαλίδες για κάθε τομέα σπουδών (μαθηματικά ή ιστορία, για παράδειγμα). Μια κακή εφαρμογή θα ήταν να ορίσετε την ορατότητα αυτών των καταγεγραμμένων περιγραφών μαθημάτων πριν γίνει η HTML στην οθόνη.
Αν το περιεχόμενο ήταν κρυφό πριν από την απόδοση, τότε μερικοί επισκέπτες και μηχανές αναζήτησης θα χάσουν μεγάλο μέρος του σημαντικού περιεχομένου.
Χρησιμοποιώντας το jQuery, στόχευσα το περιεχόμενο για κατάρρευση και έβαλα το ακορντεόν να ενεργοποιηθεί μετά τη φόρτωση της σελίδας και το έγγραφο ήταν έτοιμο. Για αυτόν τον πελάτη, καθιστώντας το περιεχόμενο διαθέσιμο σε όλα τα ακροατήρια, ήταν εξαιρετικά σημαντικό. Μερικά από τα περιεχόμενα θα μπορούσαν να διαρκέσουν πολύ και έτσι ένα σχέδιο που θα μπορούσε να φιλοξενήσει ακραία κάθετη επέκταση ήταν απαραίτητο.
Το καρουσέλ
Θα δείτε καρουσέλ αρκετά συχνά σε χαρτοφυλάκια και προβολείς προϊόντων.
Συνήθως σε carousels, το περιεχόμενο θα μετακινηθεί ως απάντηση σε ένα χρονικό διάστημα ή σε κάποια αλληλεπίδραση χρήστη (βλ. "Το πρόσφατο σας ιστορικό" στο Amazon). Μου αρέσουν τα καρουσέλ για την ευελιξία τους και επειδή σας επιτρέπουν να καθορίσετε τουλάχιστον μία διάσταση του δοχείου.
Το καρουζέλ του Αμαζονίου
Ένας άλλος πελάτης έθεσε πρόσφατα ερωτήσεις σχετικά με την περιοχή "Νέα και ειδήσεις" της αρχικής τους σελίδας. Όπως και πολλά άλλα μπλοκ περιεχομένου αυτού του τύπου, αυτή παρουσίασε τις οκτώ πιο πρόσφατες προσθήκες στις σελίδες ειδήσεών τους (αν και αυτός ο αριθμός μπορεί να διαφέρει).
Τα teasers σε αυτό το μπλοκ περιείχαν μια περίληψη του άρθρου και μια εικόνα. Οι εικόνες θα μπορούσαν να είναι μεγάλες και το περιεχόμενο μακρύ, έτσι ένα καρουσέλ που περιστράφηκε μεταξύ teasers ήταν η σωστή λύση εδώ.
Και πάλι χρησιμοποιώντας το jQuery, στοχεύω το περιτύλιγμα DIV για το καρουσέλ και, αφού η σελίδα είχε φορτωθεί και το έγγραφο ήταν έτοιμο, έβαλε το carousel και έβαλε τις μεταβάσεις μου. Με την ενεργοποίηση του JavaScript, η αρχική σελίδα έγινε καλά: κάθε 15 δευτερόλεπτα, το καρουσέλ ανακατεύεται στο επόμενο teaser. Από προεπιλογή, όλα τα teasers ήταν ορατά, αλλά έκρυψα όλα εκτός από το πρώτο όταν δημιούργησα το καρουσέλ.
Για αυτόν τον πελάτη, επιλέξαμε και πάλι να εμφανίσουμε όλα τα κρυμμένα περιεχόμενα αν το JavaScript απενεργοποιήθηκε . Σε αυτή την περίπτωση, η αρχική σελίδα θα επεκταθεί κάθετα για να φιλοξενήσει το επιπλέον περιεχόμενο.
Είχαμε όμως εναλλακτικές λύσεις. Λαμβάνοντας υπόψη τις τέσσερις κατηγορίες χρηστών που εντοπίσαμε στην αρχή αυτού του άρθρου, η προτεραιότητα για αυτό το περιεχόμενο ήταν η προσβασιμότητα, με τη μηχανή αναζήτησης να κατατάσσεται στη δεύτερη θέση. Θα μπορούσαμε να ικανοποιήσουμε αυτές τις δύο ομάδες αφήνοντας ορατά όλα τα teasers, αλλά καθορίζοντας τις διαστάσεις του δοχείου DIV και τη ρύθμιση overflow προς την scroll , auto ή hidden .
Οποιαδήποτε από αυτές τις επιλογές θα είχε διατηρήσει τις διαστάσεις της διάταξης. Και οι αναγνώστες οθόνης και οι μηχανές αναζήτησης θα έχουν πάρει το περιεχόμενο, επίσης, επειδή το περιεχόμενο δεν θα είναι κρυμμένο με το display ή visibility ιδιοκτησία.
Το περιεχόμενο Swapper
Αυτή η τεχνική είναι παρόμοια με την καρουσέλ σε ότι το περιεχόμενο σε ένα μπλοκ περιστρέφεται χρησιμοποιώντας κάποια κίνηση.
Η κύρια διαφορά είναι ότι δεν χρησιμοποιείται το animation tweening. Αντίθετα, ένα κομμάτι του περιεχομένου εξαφανίζεται ενώ άλλο σβήνει (ή θα μπορούσε να έχει μια σκληρή μετάβαση χωρίς εξασθένιση). Το swapper είναι αρκετά παρόμοιο με το carousel ότι οι εναλλακτικές λύσεις χωρίς JavaScript που αναφέρθηκαν παραπάνω είναι αληθινές.
Ένας άλλος πελάτης ήρθε σε με με το καθήκον να δείξει έναν αόριστο αριθμό μαρτυριών στην ιστοσελίδα τους. Επιλέξαμε έναν μετασχηματιστή περιεχομένου σε αυτήν την περίπτωση επειδή δεν είχαμε ανάγκη για την περιστροφή που τυπικά βρέθηκε σε carousels (ο χρήστης δεν θα χρειαζόταν να μετακινηθεί πίσω μια μαρτυρία ή να παραλείψει το τέλος).
Για τους επισκέπτες που είχαν απενεργοποιημένη τη JavaScript, τηρήσαμε το σχέδιο. Μετά από προσεκτική εξέταση, ο πελάτης ορθώς διαπίστωσε ότι οι μαρτυρίες θα είχαν τόσο μικρή επίδραση στους επισκέπτες ότι η τοποθέτηση του display προς την none δεν θα ήταν επιζήμια.
Η απόφαση μου έδωσε λίγο περισσότερη ελευθερία στον προγραμματισμό της δεξιάς στήλης της ιστοσελίδας, όπου θα εμφανιστούν οι μαρτυρίες.
Ο ταξινομητής
Όποιος έχει προσαρμόσει την ουρά τους Hulu, έχει δει τον ταξινομητή drag-and-drop. Αυτό το bit JavaScript επιτρέπει στους χρήστες να μεταφέρουν και να ρίχνουν τις σειρές (γραμμές πινάκων, στοιχεία λίστας, ανεξάρτητες DIV κ.λπ.) σε διαφορετική σειρά.
Διαλογέα Netflix
Πάρτε έναν τελευταίο πελάτη μου σαν παράδειγμα, ο οποίος είχε ένα σύνολο τυπικών διαδικασιών που όλοι οι εργαζόμενοι έπρεπε να ακολουθήσουν.
Κάθε διαδικασία συνίστατο σε οποιοδήποτε αριθμό εργασιών. Ένας διαχειριστής θα μπορούσε να προσθέσει ή να καταργήσει εργασίες και θα μπορούσε να αλλάξει τη σειρά εργασιών.
Αυτό ήταν ένα παράδειγμα βιβλίου διαλογής , μια εφαρμογή της αναδιάταξης drag-and-drop .
Χάρη στους Scriptaculous και Prototype.js, η δημιουργία της λίστας παραπομπών ήταν εύκολη. Όταν ο κώδικας γράφτηκε και η σελίδα ήταν ζωντανή, είχαμε μια τέλεια λειτουργική απόδοση του design comp. Τότε συνειδητοποιήσαμε ότι χωρίς JavaScript, είχαμε μόνο το HTML ισοδύναμο ενός χαρτιού βάρους. Δεν υπήρξε αναδιάταξη με μεταφορά και απόθεση.
Κάποια γρήγορη σκέψη και ελαφρά τροποποίηση του σχεδιασμού μας έδωσαν το ίδιο σύνολο γραμμών που είχαμε πριν, αλλά με την προσθήκη πλαισίων εισαγωγής κειμένου που θα μπορούσαν να διευκολύνουν την εισαγωγή σειράς γραμμών (σημειώστε ότι χωρίς JavaScript, αναγκάσαμε να προσθέσουμε μερικά σημαντική επικύρωση από πλευράς διακομιστή για αυτά τα πλαίσια εισαγωγής). Έχουμε χάσει την αναδιάταξη, αλλά τουλάχιστον ανακτήσαμε τη λειτουργικότητα ταξινόμησης.
Στη συνέχεια επέστρεψα σε προγράμματα περιήγησης με δυνατότητα JavaScript και έκρυψα τα πλαίσια κειμένου που αναφέρθηκαν παραπάνω. μετά από όλα, είχαμε λειτουργία drag-and-drop για αυτήν την ομάδα. Σε αυτό το σημείο, είχαμε μια τέλεια λειτουργική απόδοση του comp design που ήταν επίσης serviceable για τους επισκέπτες που είχαν JavaScript disabled. Την επόμενη φορά, θα ξέρω να σχεδιάζω αυτή την προϋπόθεση.
συμπέρασμα
Η εξέλιξη του ιστού θα συνεχιστεί και οι επισκέπτες στους ιστοτόπους μας θα πρέπει να μπορούν να συνεχίσουν να απολαμβάνουν δυναμική διάθεση.
Διεξάγετε σχεδιασμό για διαδραστικές απαντήσεις με κινούμενα tweens: ξεθωριάζουν, ξεθωριάζουν, καταρρέουν, επεκτείνουν, σπρώχνουν τα πράγματα γύρω. Λαμβάνοντας υπόψη όλα αυτά τα κινούμενα σχέδια, σκεφτείτε πώς ο ιστότοπός σας θα εμφανίζεται στους επισκέπτες που δεν μπορούν να δουν την κινούμενη εικόνα λόγω περιορισμών της JavaScript. Οι πελάτες σας θα είναι πιο ευτυχισμένοι και θα είστε καλύτεροι σχεδιαστές γι 'αυτό.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Ο Jason Corns είναι ανεξάρτητος προγραμματιστής ιστού και προγραμματιστής πλήρους απασχόλησης GUI για τη Systems Alliance, Inc., που ειδικεύεται στην ευχρηστία για όλα τα ακροατήρια.
Πώς σχεδιάζετε για την απουσία JavaScript; Παρακαλώ μοιραστείτε τις συμβουλές σας μαζί μας ...