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

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter