Όλα αυτά μέχρι σήμερα, που μετά από πολύ τρέξιμο από το γραφείο μου στον server ή σε υπολογιστή συναδέλφου, αποφάσισα να δω μήπως να κάνω στο VirtualMachine μια υποτυπώδης εγκατάσταση XP με ΙΕ6. Για καλή μου τύχη μοιράστηκα την απορία μου με ένα συνάδελφο, ο οποίος μου επισήμανε ότι η “καλή” μας Microsoft δίνει το λειτουργικό με προ-εγκατεστημένο τον IE6 για εγκατάσταση σαν virtual machine. Μετά από ψάξιμο στο internet βρήκα αυτή τη σελίδα γράφει ότι όντως υπάρχει αυτή η λύση αλλά μόνο αν τρέξεις το VitrualPC της Microsoft.

Η διαδικασία είναι απλή. Κατεβάζουμε τα αρχεία από την σελίδα της MS (Virtual PC, XP-IE6), κάνουμε εγκατάσταση το VirtualPC, τρέχουμε και το αντίστοιχο αρχείο για να αποσυμπιεστή ο δίσκος, δημιουργούμε ένα εικονικό μηχάνημα στο VirtualPC και φορτώνουμε στον δίσκο του το αντίστοιχο VHD αρχείο μας. Το μόνο κακό είναι ότι το αρχείο VHD είναι για περιορισμένη διάρκεια (το συγκεκριμένο είναι μέχρι 01/10/2010) αλλά από όσο διάβασα και από το άρθρο αλλά και από άλλες σελίδες, η Microsoft βγάζει καινούργια αρχεία κάθε φορά οπότε είσαι καλυμμένος.

Θα πει όμως κάποιος “γιατί να μην κάνω μια εγκατάσταση σε VitrualBox;”. Η απάντηση είναι “εξαρτάται”. Αν θέλεις ένα installation για να τρέχεις και άλλα προγράμματα σε Windows XP και έχεις και την δυνατότητα να έχεις και ένα licence γι αυτά τότε είναι η καλύτερη λύση. Αλλά αν το θέλεις μόνο για να τρέχεις τον IE6 και κάνεις test σε σελίδες τότε είναι η καλύτερη, οικονομικότερη και πιο γρήγορη λύση. Ακόμα και αν χρειάζεται ν’ αλλάζεις αρχείο κάθε 5 μήνες.

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

Βιομηχανία παιχνιδιών και απαιτήσεις συστήματος

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

Web design & νέες τεχνολογίες

Χρησιμοποιώντας το παραπάνω παράδειγμα, μπορούμε να δούμε γιατί εμείς σαν web developers είμαστε υποχρεωμένοι να χρησιμοποιούμε τις τεχνολογίες που προσφέρουν οι τελευταίας τεχνολογίας browser. Πρέπει να αρχίσουμε να σκεφτόμαστε την εμπειρία που δίνουμε στον χρήστη. Να δίνουμε σκιές και στρογγυλεμένες γωνίες με CSS και όχι με 4-5 διαφορετικές εικόνες και 7-8 extra στοιχεία στην σελίδα. Να χρησιμοποιούμε το font embedding αυξάνοντας την εργαλειοθήκη μας με καινούργιες γραμματοσειρές. Να δημιουργούμε gradients χωρίς να πρέπει να κόψουμε διαφορετικές εικόνες για κάθε ξεχωριστό κομμάτι. Και προπαντός να κάνουμε την δουλειά μας και την δουλειά των συναδέλφων μας ευκολότερη αφού θα έχουμε βάλει το λιθαράκι ώστε να εξαπλωθούν οι νέες τεχνολογίες.

Browser support

Και φυσικά κάποιος θα σκεφτεί: “Τι ωραία μας τα λες ρε Δημήτρη. Και πως θα υποστηρίξουμε του παλιότερους browsers;”

Μα τους υποστηρίζουμε. Εκεί που έχει gradient θα εμφανίζεται ένα μόνο χρώμα. Εκεί που έχει σκιές, δεν θα εμφανίζονται. Εκεί που έχει βάλει embedded γραμματοσειρές θα εμφανίζεται μια παρόμοια που υπάρχει στο σύστημα του χρήστη και θα έχεις διαλέξει σαν εναλλακτική. Θα έχει απλές γωνίες και όχι στρογγυλεμένες.

Στην ουσία δίνουμε στον χρήστη το περιεχόμενο που πρέπει αλλά δεν του δίνουμε την ολόκληρη την εμπειρία. Ακριβώς όπως κάνουν οι κατασκευαστές παιχνιδιών. Και φυσικά αν ο πελάτης επιμένει να θέλει να εμφανίζεται η σελίδα παρόμοια σε όλους τους διαφορετικούς browser, μπορούμε να του το προσφέρουμε με την ανάλογη πληρωμή. Τον τρόπο τον ξέρουμε έτσι και αλλιώς.

Fixed font size

Σε αυτό τον τρόπο ο web designer ορίζει κάθε κομμάτι να έχει το δικό του συγκεκριμένο μέγεθος σε pixels, ανάλογα με αυτά που έχει προσθέσει στο πρόγραμμα που έχει σχεδιάσει το template. Οι πιο συνηθισμένες τιμές ξεκινάνε από 10px σαν βάση για το κυρίως κείμενο και το body και ανεβαίνουν ανά 2px ανάλογα με το στοιχείο (h6: 12px, h5: 14px κλπ).

Relative percentage font size

Σε αυτό το τρόπο ο web designer ορίζει το κάθε κομμάτι να έχει το δικό του μέγεθος σε επί τοις εκατό (%). Έχοντας σαν βάση ότι το ορισμένο από τον browser μέγεθος των γραμματοσειρών είναι 16px, η πιο συνηθισμένη τιμή για το κυρίως κείμενο και το body κυμαίνεται από 62.5% και υπολογίζεται από τον τύπο:
(10px * 100%) / 16px = 62.5%
Έχοντας σαν βάση ότι το 100% πλέον είναι ίσο με 10px μπορείς να υπολογίσεις αναλογικά και τα υπόλοιπα στοιχεία.
h6: 110% = 11px, h5: 120% = 12px, h6: 130% = 13px κλπ.

Συνδυασμός percentage & em

Η μέθοδος αυτή είναι μια παραλλαγή της προηγούμενης μόνο που αντί να ορίζεις τα υπόλοιπα στοιχεία σε percentage (%) τα ορίζεις σε em. Με τον ίδιο τύπο ορίζεις το βασικό μέγεθος της γραμματοσειράς και μετά έχοντας σαν βάση ότι το 10px είναι ίσο με 1em μπορείς να υπολογίσεις και τα υπόλοιπα στοιχεία της σελίδας παρόμοια με την προηγούμενη μέθοδο.
h6: 1.1em = 11px, h5: 1.2em = 12px, h6: 1.3em = 13px κλπ.
Όποιος έχει την διάθεση θα δει ότι αυτή η σελίδα είναι φτιαγμένη με αυτό τον τρόπο, με βάση όμως το 72% περίπου ίσο με 11.5px.

Πια μέθοδος είναι η καλύτερη

Αυτό είναι ένα ερώτημα που έχει πολλές απόψεις και πολλές γνώμες. Η πρώτη μέθοδος ήταν πολύ διαδεδομένη με τον IE 6 και τους σχεδιαστές που λειτουργούσαν περισσότερο με την λογική του έντυπου. Όταν όριζες ένα μέγεθος σε pixels ο IE 6 εφάρμοζε την λογική κατά γράμμα, αφαιρώντας την δυνατότητα στον χρήστη να αλλάξει το μέγεθος της γραμματοσειράς, δίνοντας έτσι την δύναμη στον σχεδιαστή να ορίσει ότι ήθελε όπως ήθελε.

Με την πρώτη έκδοση του Mozilla Firefox που έδινε την δυνατότητα στον χρήστη να μεγαλώσει το μέγεθος της γραμματοσειράς (και βάζω τον Mozilla Firefox γιατί με αυτόν έγινε η μεγάλη “επανάσταση” στον χώρο των browser), που άρχισε να γίνεται πιο γνωστή και η ανάγκη να δώσουμε την δύναμη στον χρήστη να μπορεί να αλλάξει το πως εμφανίζεται η σελίδα, όλες οι μέθοδοι λειτουργούν παρόμοια (εξαιρώντας τον IE 6) με μόνη ουσιαστική διαφορά τον υπολογισμό ή όχι του μεγέθους που παραμένει στην κρίση του σχεδιαστή.

Πλέον υπάρχουν και πολλά CSS Frameworks (960 Grid System, Blueprint, YAML) που μπορούν να βοηθήσουν ώστε να σχεδιάσει κάποιος μια σελίδα.

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

Λίγα λόγια

Όπως μπορείτε να δείτε, η καινούργια εμφάνιση βασίζεται σε τόνους του πράσινου. Η επιλογή χρώματος έγινε μετά από ένα πολύ καλό άρθρο που διάβασα από τον Γιάννη Κωσταντακόπουλο (aka porcupine).

Μετά από εξερεύνηση πολλών πινάκων (με πρώτη προτεραιότητα στον πίνακα “Κραυγή” του Edvard Munch) κατέληξα στον παρακάτω πίνακα του Van Gogh με όνομα The Rhônebarken,.

Με βάση τον πίνακα, και την βοήθεια του Kuler της Adobe, έψαξα ανάμεσα στους προτεινόμενους συνδυασμούς και βρήκα τον συνδυασμό που χρησιμοποίησα στην σελίδα.

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

Προβλήματα

Ξέρω ότι η σελίδα έχει προβλήματα σε Internet Explorer 6. Προς το παρόν δεν με ενδιαφέρει. Ίσως μέσα στο Σαββατοκύριακο που θα έχω περισσότερο χρόνο να κάτσω να ασχοληθώ. Αλλά μάλλον θα το αφήσω όπως έχει.

Ακόμα ξέρω ότι υπάρχει ένα μικρό πρόβλημα σε Internet Explorer γενικά με την γραμματοσειρά και τα ελληνικά. Ψάχνω να βρω μια γραμματοσειρά που θα με καλύπτει σε όλους τους browser, αλλά αν δεν υπάρχει αποτέλεσμα μάλλον θα χρησιμοποιήσω κάποια κοινή μόνο για τον Internet Explorer.

Η γνώμη σας μετράει

Θα ήθελα πάρα πολύ να μου πείτε την γνώμη σας για το πως σας φαίνεται η σελίδα. Αν σας κουράζει κάτι, αν κάτι δεν φαίνεται καλά, ώστε να μπορέσω να τα διορθώσω.

Υ.Γ.: Ακόμα είμαι σε περίοδο τεστ και θα ήθελα αν δείτε οτιδήποτε να μου το αναφέρεται ακόμα και σε σχόλια στην σελίδα.

Υ.Γ. 1: Απ’ ότι φαίνεται υπάρχει πρόβλημα με τις εικόνες. Ελπίζω να το λύσω σύντομα.

UPD: Οι εικόνες φτιάχτηκαν. Ακόμα έχω κάποια μικροπροβλήματα αλλά που θα μου πάει. Θα τα λύσω.

Τι είναι ένα “Reset CSS”

Για όσους δεν γνωρίζεται τι είναι το “Reset CSS”, είναι ένα σετ από κανόνες στο CSS που βάζουν στα στοιχεία μιας σελίδας κάποιους κοινούς κανόνες δίνοντας έτσι ομοιομορφία ανάμεσα στις διαφορετικές μηχανές των browser.

Η πρώτη προσπάθεια είχε γίνει με ένα πολύ απλό κανόνα που έμπαινε στην αρχή του κάθε αρχείου CSS:
* { margin:0; padding:0; }

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

Eric Meyer’s “Reset CSS”

Η συνεχείς αναζήτηση για καλύτερους κανόνες έκανε τον Eric Meyer να δημιουργήσει ένα κομμάτι κανόνων που έβγαζαν όλους του μη επιθυμητούς κανόνες δίνοντας έτσι στον δημιουργό πλήρης έλεγχο για το πως θα εμφανίζει την σελίδα του.

Προβλήματα

Βέβαια όλα αυτά δεν μπορείς να τα έχεις χωρίς προβλήματα. Όπως σωστά επισημαίνει ο Jonathan Snook, το μεγαλύτερο πρόβλημα που δημιουργεί είναι ότι για κάθε στοιχείο κάνεις διπλή δουλειά, αφού πρώτα αφαιρείς όλους τους αρχικούς κανόνες και μετά βάζεις τους δικούς σου. Κατά την γνώμη του, προτιμά να χρησιμοποιεί τους αρχικούς κανόνες και ανάλογα με ότι θέλει να προσθέτει.

Αυτή η άποψη είναι σωστή. Βοηθάει και στο να κρατήσεις τα CSS αρχεία σου χαμηλά ώστε να μην έχεις προβλήματα με το χρόνο ανταπόκρισης. Αλλά τι γίνεται όταν στην εξίσωση μπαίνουν και άλλα άτομα όπως developers και διαχειριστές ιστοσελίδων;

Αντίλογος

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

Η απάντηση που όλοι έχουν να δώσουν είναι να τους παρέχεις κανόνες για το πως θα προσθέσουν το κάθε κομμάτι. Αλλά, όπως όλοι ξέρουμε, σε μια μεγάλη εταιρία ο κάθε developer κάνει ταυτόχρονα πολλά project με αποτέλεσμα να μην έχει το χρόνο και τη διάθεση να διαβάσει και να εφαρμόσει αυτούς τους κανόνες. Επίσης, το πιο πιθανό είναι να μην μπορέσεις εσύ σαν σχεδιαστής να καλύψεις όλες τις περιπτώσεις που θα εμφανιστούν. Όσο για τους διαχειριστές, όλοι ξέρουμε δεν τους ενδιαφέρει αν θα γίνει κάτι σωστά, αρκεί να μοιάζει σωστά στον browser που το βάζουν.

Χρησιμοποιώντας ένα τέτοιο κομμάτι κανόνων, ελαχιστοποιείς την δυνατότητα που υπάρχει να “χαλάσει” το σχέδιο που έχεις κάνει. Στην χειρότερη περίπτωση το κάθε μη κανονικό στοιχείο να εμφανιστεί σαν κανονικό κείμενο.

Προσωπικά το “Reset CSS” μου έχει λύσει τα χέρια σε όλα τα projects που έχω κάνει για την εταιρία που δουλεύω τώρα. Έχω αντιμετωπίσει πολλά προβλήματα, από λάθος στοιχεία σε λάθος μεριά μέχρι εντελώς λάθος κώδικα και στις περισσότερες περιπτώσεις με έχει βοηθήσει. Τώρα όμως αν κάνω ένα project που θα είναι προσωπικό ή κάτι που θα έχω τον τελευταίο λόγο ίσως τότε να μην χρειαστεί να το χρησιμοποιήσω. Τα πάντα είναι θέμα ανάγκης.