3Οκτ

Μπλοκάρετε τους χρήστες που χρησιμοποιούν IE6.

, 3 Οκτωβρίου 2008 | WEB DESIGN - AUTHORING | 11 Σχόλια

Βαρεθήκατε να υποστηρίζετε τον IE6 και τα προβλήματα που δημιουργεί; Το Web Design Blog σας παρουσιάζει μία εύκολη τεχνική από το css-tricks.com ώστε η ιστοσελίδα σας να μην είναι ορατή στους χρήστες που χρησιμοποιούν IE6. Ακόμα με την χρήση JavaScript μπορείτε να προσθέσετε στοιχεία προβολής και να τα παραμετροποιήσετε σύμφωνα με τις αρέσκειες σας.

Δεν προτείνεται η συγκεκριμένη τεχνική να εφαρμοστεί στους πελάτες σας, αλλά σε κάποια projects που υπάρχει η δυνατότητα επιλογής.

Δείτε το παράδειγμα (απαραίτητη η χρήση ΙΕ6) | Download απαραίτητα αρχεία.

Βήμα 1ο : ΕΝΕΡΓΟΠΟΙΗΣΗ ΑΝΙΧΝΕΥΣΗΣ

Στο πάνω μέρος του κώδικα της σελίδας, μέσα στο <head> προσθέτετε τα δύο js αρχεία που θα ενεργοποιήσουν το «μπλοκάρισμα» της ιστοσελίδας στον ΙΕ6.


<script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”jquery.ie6blocker.js”></script>
</head>

Ουσιαστικά το ie6blocker.js script είναι το αρχείο που ανιχνεύει τον ΙΕ6, έτσι μπορείτε να χρησιμοποιήσετε εναλλακτική μέθοδος όπως:

JavaScript

var IE6 = (navigator.userAgent.indexOf(“MSIE 6”)>=0) ? true : false;
if(IE6) {
… do stuff …
}

Κώδικας

<!–[if IE 6]>
<script type=”text/javascript” src=”jquery.ie6blocker.js”></script>
<![endif]–>

Ωστόσο από τη στιγμή που είναι απαραίτητη η ενεργοποίηση της JavaScript για να γίνει η ανίχνευση, ουσιαστικά είναι η ίδια φιλοσοφία. Άρα μπορείτε να χρησιμοποιήσετε όποια μέθοδος θέλετε.

Βήμα 2ο : ΕΦΑΡΜΟΓΗ jQuery

Τώρα που ενεργοποιήθηκε η ανίχνευση «μπλοκαρίσματος» του ΙΕ 6 μπορείτε με την χρήση jQuery να δημιουργήσετε κάποια στοιχεία προβολής ώστε να ενημερώνετε τον χρήστη για το τι συμβαίνει.

Οδηγίες και παράμετροι

Στο συγκεκριμένο παράδειγμα θα χρησιμοποιήσουμε 2 divs, το ένα θα δημιουργεί το «σκοτείνιασμα» παρεμφερές του Thickbox στην ιστοσελίδα που προβάλλουμε και το άλλο θα εμφανίζει το ενημερωτικό μήνυμα στο κέντρο της οθόνης, αναλυτικότερα:

1o div = σκοτείνιασμα

$(“<div>”)
.css({
‘position’: ‘absolute’,
‘top’: ‘0px’,
‘left’: ‘0px’,
backgroundColor: ‘black’,
‘opacity’: ‘0.75’,
‘width’: ‘100%’,
‘height’: $(window).height(),
zIndex: 5000
})
.appendTo(“body”);

2ο div = ενημερωτικό μήνυμα

$(“<div><img src=’no-ie6.png’ alt=” style=’float: left;’/><p><br /><strong> <p><br /><strong>Η ιστοσελίδα δεν υποστηρίζει IE6.</strong><br /><br /> Παρακαλώ <a href=’http://getfirefox.org’>ενημερώστε τον browser σας</a>.</p>”)
.css({
backgroundColor: ‘white’,
‘top’: ‘50%’,
‘left’: ‘50%’,
marginLeft: -210,
marginTop: -100,
width: 410,
paddingRight: 10,
height: 200,
‘position’: ‘absolute’,
zIndex: 6000
})
.appendTo(“body”);

Μπορείτε να αλλάξετε το μήνυμα και το γραφικό απλά αλλάζοντας τις παραπάνω παραμέτρους.

Δείτε το παράδειγμα (απαραίτητη η χρήση ΙΕ6) | Download απαραίτητα αρχεία.

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

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μπλοκάρετε τους χρήστες που χρησιμοποιούν IE6. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

11 comments so far

Σχολιάστε

Back to top

Recent comments

  • Πολυ καλο αθρο πραγματικα!

    Η σωστή αρχιτεκτονική ενός website και τα οφέλη της
  • Πολύ χρήσιμη η λίστα με τα online tools. Ο επιτυχημένος σχεδιασμός μιας ιστοσελίδας βοηθά σε δύο κατευθύνσεις. Η πρώτη είναι ότι βελτιώνει την εμπειρία του επισκέπτη της ιστοσελίδας με συνέπεια ο τελευταίος να βλέπει περισσότερες σελίδες και να μένει περισσότερο χρόνο σε αυτή. Η δεύτερη είναι ότι επειδή ακριβώς βελτιώνονται τα στατιστικά στοιχεία της ιστοσελίδας, όπως το bounce rate, ο μέσος χρόνος παραμονής στην ιστοσελίδα και ο αριθμός των σελίδων ανά επίσκεψη, βελτιώνεται και η κατάταξη της ιστοσελίδας στα οργανικά αποτελέσματα της Google.

    10+1 Χρήσιμα website και on line tools

Latest From Twitter