Όλα αυτά μέχρι σήμερα, που μετά από πολύ τρέξιμο από το γραφείο μου στον 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, μπορούμε να του το προσφέρουμε με την ανάλογη πληρωμή. Τον τρόπο τον ξέρουμε έτσι και αλλιώς.

Βάζοντας στην άκρη την χαρά μου, μπορώ να πω ότι συμφωνώ απολύτως με το άρθρο της Ζαχαρένιας. Είναι τρομερά εύκολο να δουλεύεις για iPhone. Το minimal design στην καλύτερή του μιας και η οθόνη που σχεδιάζεις είναι μικρή (320*480) και σε υποχρεώνει να βάλεις μόνο τα ουσιαστικά και χρήσιμα και να μειώσεις τον θόρυβο με άχρηστα στοιχεία. Η υποστήριξη του Flash ανύπαρκτη οπότε οτιδήποτε πάνω σε αυτό πάει στον κάλαθο των αχρήστων. Gradients, σκιές & rounded corners γίνονται εύκολα με 2-3 γραμμές CSS κώδικα, βάζοντας στην άκρη παλιές τεχνικές με Photoshop, εικόνες στο background & άχρηστα στοιχεία.

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

Το μόνο που με ενοχλεί είναι ότι το Project τελείωσε πολύ γρήγορα και ανυπομονώ μέχρι να έρθει το επόμενο. Μήπως να προσπαθήσω να δημιουργήσω ένα iPhone CSS για την παρούσα σελίδα περιμένοντας;

Νομίζω ότι πλέον είναι αργά για να το αναφέρω. Αλλά καλό θα είναι να υπάρχει και για προσωπική χρήση.

Ο Γιάννης Κωνσταντακόπουλος πριν από λίγες μέρες έβγαλε στον αέρα ένα καινούριο project, στο οποίο παρουσιάζει ενδιαφέροντες συνδέσμους που επισκέπτεται κάθε μέρα. Αντιγράφοντας από την σελίδα:

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

Με την ευκαιρία να του ευχηθώ καλή επιτυχία και να μας γεμίζει με ενδιαφέροντες συνδέσμους.

Ακόμα το σκέφτεσαι; Πήγαινε.

“Go To Page Number” is a new technique that enables companies and organizations to direct their website visitors to specific web content on the phone or in other voice mediums. This technique can change the “service experience” and save a lot of money for companies and organizations.

Ενδιαφέρον τρόπος για την πλοήγηση χρηστών σε μια σελίδα. Σίγουρα θα βόλευε εταιρίες λογισμικού (Microsoft, Apple) για καλύτερη & γρηγορότερη εξυπηρέτηση. Διαβάστε το άρθρο.

Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have somewhere between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick one.

Μπορείτε να διαβάσετε ολόκληρο το άρθρο εδώ.

Μέσα σε αυτές τις 2 εβδομάδες έκανα κάποιες σκέψεις για την σελίδα τις οποίες θα προσπαθήσω να υλοποιήσω μέσα στον επόμενο μήνα.

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

• Better CSS Font Stacks
• Use the Best Available Ampersand

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: Οι εικόνες φτιάχτηκαν. Ακόμα έχω κάποια μικροπροβλήματα αλλά που θα μου πάει. Θα τα λύσω.

Την πρώτη χρονιά περίπου 33.000 άνθρωποι από το χώρου του Web απάντησαν και βοήθησαν να καταλάβουμε πολλά για τον χώρο που όλοι δουλεύουμε.

Φέτος, μετά από το feedback όλων διορθώθηκαν τα λάθη και οι ατέλειες και το ερωτηματολόγιο πέρασε στην επόμενη φάση.

Εγώ την συμπλήρωσα. Κάντε το και εσείς.