Πρόσφατα το NETTUTS+ δημοσίευσε ένα ενδιαφέρον CSS Tip το οποίο αξίζει να αναφέρουμε στο Web Design Blog. Το Tip αυτό ονομάζεται Pure CSS Reflections και σας δίνει τη δυνατότητα να εισάγετε μια αντανάκλαση κάτω από τις εικόνες ή την εικόνα που επιθυμείτε στη σελίδα σας με CSS κώδικα μόνο, χωρίς την ανάγκη κάποιου προγράμματος επεξεργασίας εικόνας, όπως το Photoshop. Το συγκεκριμένο CSS tip δουλεύει μόνο σε Webkit supported browsers, δηλαδή τον Safari, Chrome, iPhone & iPad Safari και όλα τα προγράμματα πλοήγησης που υπάρχουν σε αυτή την λίστα.

Ο κώδικας CSS που απαιτείται για αυτή την ενέργεια είναι μικρός:

img {

-webkit-box-reflect: below 4px
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

}

Απλά εισάγετέ τον στο CSS αρχείο σας στο σημείο που επιθυμείτε και δείτε τα αποτελέσματα.

Ανάλυση του CSS

-webkit-box-reflect: below 4px

Με αυτή την εντολή λέμε στον webkit browser να δημιουργήσει μια αντανάκλαση του γραφικού μας. Η θέση της αντανάκλασης αυτής, θα είναι 4px κάτω από το γραφικό.

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

Για να ελαττώσουμε τον χώρο στον οποίο εξαπλώνεται η αντανάκλαση, χρησιμοποιούμε την εντολή -webkit-gradient η οποία ουσιαστικά χρωματίζει με degrade ένα χώρο. Η σύνταξη του παραπάνω κώδικα καθοδηγεί το degrade που θέλουμε να φτιαχτεί, ορίζοντάς το σαν linear degrade, με κατεύθυνση από πάνω αριστερά προς τα κάτω αριστερά (δηλαδή ευθεία κάτω). Το χρώμα του θα αρχίζει αντίστοιχα από διάφανο και θα καταλήγει σε άσπρο που είναι και το χρώμα της σελίδας του παραδείγματος. Ουσιαστικά αυτή η εντολή λειτουργεί σαν μια μάσκα. Ο αριθμός 7 δηλώνει το ποσοστό της εικόνας που θέλουμε να φαίνεται στο degrade. Στην προκειμένη περίπτωση είναι 70%.

Οι ανάγκες του σύγχρονου web designer/ author είναι απαιτητικές. Ο κάθε επαγγελματίας χρειάζεται καθημερινώς να βρίσκει αξιόπιστες λύσεις σε διάφορα θέματα που προκύπτουν στο web design , authoring και front end development. Πρέπει συνεχώς να βελτιώνει τη δουλεία του εφαρμόζοντας διαδεδομένες τεχνικές και χρησιμοποιώντας τα καλύτερα εργαλεία που θα τον βοηθήσουν να επιταχύνει τη εργασία του. Η διαρκής αναζήτηση για την επιθυμητή πληροφορία καταναλώνει χρόνο από το πρόγραμμα του και μερικές φορές γίνεται και κουραστική.

Το Web Design Blog σας παρουσιάζει το webdosanddonts.com ένα διαδικτυακό τόπο που φιλοξενεί πολύ καλά άρθρα και επίκαιρα, με σχετικές πληροφορίες για το κλάδο του web design/ authoring. Παρουσιάζονται ζητήματα που απασχολούν τους επαγγελματίες σχεδιαστές του διαδικτύου με συμβουλές, πρακτικές όμορφα κατηγοριοποιημένα σε επίπεδο γνώσεων. Καθώς και κακές πρακτικές που πρέπει να αποφύγετε στο τρόπο που δουλεύετε σχεδιάζοντας websites και γενικότερα web εφαρμογές.

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

Εντέλει η συγκεκριμένη ιστοσελίδα είναι ένα σημείο αναφοράς αφού παρέχει ταυτόχρονη πληροφόρηση σε διάφορα θέματα και αξίζει να καταχωρηθεί στα αγαπημένα του κάθε web designer/ author. Το WebD&D είναι μια ιδέα και δημιουργία του Shtanzig & Yesterdayishere.

Σίγουρα έχετε λάβει κατά καιρούς Newsletter. Οι περισσότεροι από εσάς ίσως έχετε λάβει πολύ περισσότερα από όσα θα θέλατε, τα λεγόμενα spam mail. Αναρωτηθήκατε ποτέ τι χρειάστηκε για να ετοιμαστούν αυτά τα email; Έχει χρειαστεί να σχεδιάσετε και να αποστείλετε εσείς κάποιο, για λογαριασμό κάποιου πελάτη σας; Σήμερα θα εξετάσουμε ποιες είναι οι σωστές τακτικές που πρέπει να ακολουθήσετε, ώστε το Newsletter σας να είναι σωστά ορατό σε όλες τις web based (Hotmail, Gmail, Yahoo!mail, κ.α) και client email (Outlook, Mail, κ.α.) εφαρμογές.

Τα πράγματα με τα HTML email, είναι ακόμα πιο αυστηρά από ό,τι είναι με τις HTML σελίδες. Στη δεύτερη περίπτωση οφείλετε να εξετάσετε τα αποτελέσματα της δουλειάς σας σε 4-5 γνωστούς browsers. Στην πρώτη περίπτωση όμως τα πράγματα περιπλέκονται ακόμα περισσότερο και αντί για 4-5 browsers, έχετε να εξετάσετε το αποτέλεσμα των ενεργειών σας σε πολλά περισσότερα περιβάλλοντα.

Πού πρέπει να δοκιμάσετε το HTML Newsletter σας;

Τα πιο γνωστά και τα πιο συχνά σε χρήση email περιβάλλοντα αναφέρονται παρακάτω. Σίγουρα υπάρχουν περισσότερα αλλά τα βασικά βρίσκονται στην λίστα που ακολουθεί. Ο χρόνος που θα χρειαστείτε για να εξετάσετε τα αποτελέσματα της δουλειάς σας στα 14 περιβάλλοντα σίγουρα θα είναι αρκετός. Μην ξεχάσετε να τον υπολογίσετε πριν αρχίσετε το έργο.

Web based email solutions:

1. Windows Live mail
2. Windows Live Hotmail
3. Yahoo! Mail (Classic)
4. Yahoo! Mail
5. Gmail
6. AOL mail
7. Apple mobile me

Email software solutions:

1. Outlook 2007
2. Apple Mail
3. Eudora
4. Lotus Notes
5. Entourage
6. Thunderbird
7. Windows mail

Τι πρέπει να προσέξετε

Όλες οι οδηγίες που θα χρειαστείτε υπάρχουν αναλυτικά στο http://www.email-standards.org/. Μπαίνοντας στο site θα δείτε στα αριστερά μια λίστα με όλες τις email λύσεις που προαναφέραμε. Κάνοντας κλικ σε κάθε μια επιλογή, θα μπορέσετε να διαβάσετε τις ιδιαιτερότητες της κάθε περίπτωσης. Σε γενικές γραμμές όμως, τα σημεία στα οποία θα πρέπει να δώσετε ιδιαίτερη προσοχή είναι τα παρακάτω:

1. Το authoring που θα κάνετε, θα πρέπει να περιέχει όσο το δυνατόν περισσότερο text αντί για γραφικά. Αν ο χρήστης που θα λάβει το email έχει απενεργοποιήσει την HTML στα email του, δεν θα μπορεί να διαβάσει το περιεχόμενο του. Έτσι εξασφαλίζετε το μήνυμα που θέλετε να μεταδώσετε.
2. Όλα τα CSS σας πρέπει να είναι “καρφωτά” μέσα στο HTML του email που σχεδιάζετε. Αν δεν τα κάνετε καρφωτά, τότε δεν θα δουν οι παραλήπτες σας τα επιθυμητά αποτελέσματα.
3. Οι φωτογραφίες και τα γραφικά σας θα πρέπει να είναι αποθηκευμένα στον web server σας και να καλούνται από εκεί. Έτσι δεν θα επιβαρύνετε το email με περιττά KB.
4. Μην στέλνετε συνημμένα αρχεία. Αντ’ αυτού μπορείτε να παρέχετε σύνδεσμο προς το ίδιο αρχείο ανεβασμένο στον web server σας.

Επίλογος

Δημιουργήστε on line κάποια δοκιμαστικά email accounts και προσπαθήστε να βρείτε demo versions των email software που προαναφέραμε Εξοπλιστείτε με πολύ υπομονή και προσπαθήστε να εξασφαλίσετε όσο το δυνατόν περισσότερο χρόνο ώστε να εκτελέσετε με επιτυχία όλες σας τις δοκιμές. Έχει μεγάλη σημασία να καταφέρετε να περάσετε το μήνυμά σας (ή του πελάτη σας) σε όσο το δυνατόν περισσότερους παραλήπτες. Ακολουθήστε τα Email standards για να έχετε τις μικρότερες δυνατόν απώλειες.

Όσοι από εσάς ασχολείστε με το CSS / XHTML Authoring, θα έχετε ακούσει την έννοια Semantic Markup. Τι είναι όμως το Semantic Markup και γιατί προτείνουμε να το υιοθετήσετε σαν τακτική ανάπτυξης ιστοσελίδων;

Είναι βασικό να γίνει κατανοητή η σημασία του διαχωρισμού των στοιχείων της παρουσίασης μιας σελίδας (CSS) από αυτών που υποδηλώνουν τις έννοιες των στοιχείων που χρησιμοποιείτε στον κώδικά σας (XHTML). Με την κατανόηση του διαχωρισμού αυτού, γίνεται πιο εύκολη και η κατανόηση της έννοιας του Semantic Markup.

Επειδή αυτό μπορεί να ακούγεται λίγο πολύπλοκο και ίσως να μπερδεύει, ένας εύκολος κανόνας που θα σας βοηθήσει να καταλάβετε το Semantic Markup είναι ο ακόλουθος:

Το Semantic Markup είναι ο κώδικας XHTML που έχει γραφτεί για να ορίζει το είδος του περιεχομένου μιας ιστοσελίδας, δίνοντας έτσι τη δυνατότητα στους ηλεκτρονικούς υπολογιστές καθώς και σε όλες τις άλλες συσκευές που έχουν την δυνατότητα να διαβάζουν XHTML σελίδες (κινητά, palm, κλπ), να αναγνωρίζουν τα στοιχεία του κώδικα, να καταλαβαίνουν τι είναι και να τα παρουσιάζουν στον τελικό χρήστη ακριβώς όπως προορίζονται από εσάς.

Με λίγα λόγια, αν π.χ. θέλετε να ετοιμάσετε έναν τίτλο για την σελίδα σας, ο οποίος να διαχωρίζεται από το υπόλοιπο κείμενο με έναν εμφανέστατο τρόπο, δεν είναι Semantic να χρησιμοποιήσετε κάποιο tag μορφοποίησης όπως είναι το <b> ή το <i> και να μεγαλώσετε και την γραμματοσειρά. Semantic είναι να χρησιμοποιήσετε κάποιο από τα διαθέσιμα <H(x)> Tags, τα οποία υπάρχουν για να ορίζουν τίτλους. Θα μπορούσατε να πείτε ότι το Semantic μπορεί να “μεταφραστεί” και ώς “λογικό”, χωρίς να είναι η κυριολεκτική μετάφραση της λέξης αυτή. “Παίζοντας” με αυτό το concept μπορείτε πιο εύκολα να καταλάβετε πότε κάτι είναι Semantic και πότε όχι.

Η πραγματική δύναμη πίσω από το Semantic Markup είναι πως πλέον:

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

Τι μπορείτε να προσέχετε ώστε να γράφετε σωστό Semantic Markup;

• Διευρύνετε τις γνώσεις σας πάνω στα διαθέσιμα tags που χρησιμοποιεί η XHTML για την κατασκευή ιστοσελίδων. Ένας εύκολος τρόπος για να θυμάστε τις δυνατότητες που υπάρχουν, είναι αγοράζοντας κάποιο XHTML reference book, ή χρησιμοποιώντας κάποιο XHTML cheat sheet. Το Web Design Blog έχει παρουσιάσει στο παρελθόν άρθρα με cheat sheets τα οποία μπορείτε να βρείτε και να κατεβάσετε εδώ.
• Να θυμάστε πως η εμφάνιση της σελίδας σας δεν ορίζεται από την XHTML σας, αλλά από τα CSS σας. Με αυτό σαν γνώμονα, όταν δημιουργείτε στοιχεία στη σελίδα σας χρησιμοποιήστε τα TAGS, τα οποία είναι προορισμένα για τη δημιουργία των στοιχείων αυτών. Για παράδειγμα, αν θέλετε να παρουσιάσετε δεδομένα σε μορφή πίνακα, τότε χρησιμοποιήστε <TABLE> για να παρουσιάσετε τα δεδομένα. Ή πάλι αν θέλετε να κάνετε ένα κείμενο έντονο, κάντε το χρησιμοποιώντας το TAG strong, το οποίο σημαίνει (με βάση την λογική=Semantic) δυνατό/έντονο. Αν χρησιμοποιήσετε το Tag <b>, τότε δεν λέτε τίποτα στον υπολογιστή και δεν επικοινωνείτε.
• Να γράφετε κώδικα έχοντας στο μυαλό σας πως απευθύνεστε και σε μηχανήματα, όχι μόνο σε ανθρώπους. Όσο πιο Semantic = “λογικά” είναι παρουσιασμένα τα στοιχεία που χρησιμοποιείτε, τόσο πιο σωστά είναι γραμμένος ο κώδικάς σας.

Χρησιμοποιώντας Semantic Markup, εκτός του ότι ο κώδικάς σας πετυχαίνει το διαχωρισμό των στοιχείων της παρουσίασης μιας σελίδας (CSS) από αυτών που υποδηλώνουν τις έννοιες των στοιχείων που χρησιμοποιείτε στον κώδικά σας (XHTML), αποκτάει και μια “καθαρότητα” η οποία βοηθάει πάρα πολύ τις μηχανές αναζήτησης στην δουλειά τους. Βοηθώντας τις μηχανές αναζήτησης να σας κάνουν index τις σελίδες σας, πετυχαίνετε σημαντικές βελτιώσεις στο SEO της ιστοσελίδας σας.

Βαρεθήκατε να υποστηρίζετε τον 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, η επιλογή εφαρμογής της παραπάνω τεχνικής είναι καθαρά στην υποκειμενική κρίση του καθενός.

Από τότε που κυκλοφόρησε ο Ιnternet Explorer 6 πριν 7 χρόνια, έχει δημιουργήσει σημαντικά προβλήματα στη δουλειά του web designer. Η φυσική αδυναμία του να υποστηρίξει ολοκληρωμένα CSS 1 και CSS 2 αναγκάζει μέχρι και σήμερα τους επαγγελματίες του χώρου να καταφεύγουν σε τεχνάσματα, ώστε οι ιστοσελίδες/ web εφαρμογές που σχεδιάζουν να λειτουργούν σωστά σε αυτό το προβληματικό και δεσμευτικό περιβάλλον.

Δυστυχώς το αξιοσημείωτο ποσοστό χρήσης 25% του συγκεκριμένου browser ακόμα μέχρι σήμερα καθιστά απαραίτητη την συμβατότητα σχεδίασης, ώστε η προβολή των ιστοσελίδων/ web εφαρμογών να είναι σωστή όπως στους μεταγενέστερους και πιο σύγχρονους browsers.

Τα 5 βασικά “bugs” του ΙΕ6 που στοιχειώνουν τους web designers/ developers μέχρι και σήμερα:

Το συγκεκριμένο “bug” είναι το πιο σύνηθες και το πιο εκνευριστικό αφού μπορεί να δημιουργήσει σοβαρά προβλήματα στο στήσιμο μιας ιστοσελίδας. Χωρίς έγκυρο Doctype ο IE6 αντιλαμβάνεται τους παραμέτρους τελείως διαφορετικά .

Παράδειγμα

#div {
width: 200px;
border: 2px solid white;
padding: 20px;
}

Ο IE6 θα υπολογίσει 200px, ενώ όλοι οι άλλοι νέοι browsers θα υπολογίσουν 244px.

Λύση:
Με την χρήση σωστού και έγκυρου (X)HTML Doctype o ΙΕ 6 υπολογίζει σωστά τους διαφόρους παραμέτρους που έχουν οριστεί.
Αναλυτικές πληροφορίες για την επιλογή σωστού Doctype.

Ένα πολύ σημαντικό πρόβλημα που δημιούργησε πολλά αρνητικά συναισθήματα στους web designers που κάνανε την μετάβαση από table σε div/ layer layout design είναι το min height/ width . Η χρησιμότητα της συγκεκριμένης παραμέτρου αποτελεί την βάση για ποιοτικό design ενισχύοντας τις εικαστικές επιλογές του κάθε web designer, δεν είναι δυνατόν να μην λειτουργεί.

Λύση:
Εφαρμόζοντας το γνωστό min height hack, το θέμα διορθώνετε.
Αναλυτικές πληροφορίες για την λύση.

Ο IE 6 διπλασιάζει το margin ενός element που έχει οριστεί σε float. Δηλαδή αν έχετε επιλέξει να κάνετε float:left ένα layer και του έχετε ορίσει 10pxl, για τον IE6 θα προβάλλεται ως 20pxl.

Παράδειγμα:

#div {
float: left;
margin-right: 10px;
}

Λύση:
Προσθέτοντας την παράμετρο στο CSS “display: inline;” το πρόβλημα διορθώνεται.

Οι περισσότεροι σύγχρονοι browsers υποστηρίζουν την εντολή :hover σε πολλά στοιχεία (elements) μιας ιστοσελίδας. Ο IE6 είναι δεσμευτικός σε αυτό θέμα, υποστηρίζοντας μόνο το pseudo-class σε elements που έχουν οριστεί με anchor <a> (με a href attribute).
Διαβάστε περισσότερα για το θέμα και την λύση του.

Ο IE6 δεν αναγνωρίζει τα transparent PNG δυσκολεύοντας την δουλειά του web designer και δεσμεύοντας τον εικαστικά. Είναι γνωστό άλλωστε πως το PNG format είναι η πιο εξελιγμένη μορφή εικόνας/ γραφικού αφού υποστηρίζει τον μεγαλύτερο αριθμό χρωμάτων.

Λύση:
Εφαρμόζοντας το PNG FIX, το θέμα διορθώνετε.
Διαβάστε περισσότερα για την λύση

Παρά τις προσπάθειες που έχει κάνει η παγκόσμια κοινότητα των web designers/ developers δεν έχει καταφέρει ακόμα να σταματήσει την χρήση του ξεπερασμένου IE6. Δυστυχώς όσο θα παραμένουν χρήστες που τον χρησιμοποιούν θα υπάρχουν ακόμα τα κλασσικά αυτά προβλήματα.

Οι περισσότεροι από εσάς, ίσως συνηθίζετε να χρησιμοποιείτε pixels στα fonts που ορίζετε σε ένα CSS αρχείο αλλά και σε άλλα στοιχεία της σελίδας σας (αποστάσεις, κλπ). Αν και κάτι τέτοιο βοηθάει πολύ στον υπολογισμό των μεγεθών και σας δίνει μια οικεία αίσθηση (ιδιαίτερα εάν προέρχεστε από ένα γραφίστικο background), παρ’ όλα αυτά δεν ενδείκνυται αφού δεν προσφέρει την απαραίτητη “ελαστικότητα” που είναι καλό να υπάρχει σε ένα διαδικτυακό τόπο.

Τι ακριβώς όμως σημαίνει ο όρος em που χρησιμοποιείται στα CSS αρχεία; Σύμφωνα με τον συγγραφέα του βιβλίου “The Elements of Typographic Style“, Robert Bringhurst, το em είναι:

Μια ελαστική μονάδα μέτρησης μήκους. Ένα em είναι η απόσταση που ισοδυναμεί με το μέγεθος της γραμματοσειράς που χρησιμοποιείται. Για παράδειγμα, όταν χρησιμοποιείται μια γραμματοσειρά μεγέθους 10 points, τότε η απόσταση του ενός em ισοδυναμεί με 10 points. Αντίστοιχα, όταν χρησιμοποιείται μια γραμματοσειρά μεγέθους 34 points, τότε η απόσταση του ενός em ισοδυναμεί με 34 points. Από τα παραπάνω το συμπέρασμα που βγαίνει είναι πως η μονάδα μέτρησης μήκους em είναι αναλογικά ίση σε όλα τα μεγέθη.

Το προεπιλεγμένο μέγεθος γραμματοσειράς σε ένα έγγραφο (X)HTML στους περισσότερους browsers είναι τα 16px. Οπότε 1 em ισοδυναμεί με 16px. Το πλεονέκτημα της χρήσης της μονάδας μέτρησης em για τη μέτρηση γραμματοσειρών, του ύψους γραμμών και των αποστάσεων είναι πως όλες οι μετρήσεις προσαρμόζονται αναλογικά.

Ένας web designer ο Richard Rutter έχει σκεφτεί έναν εύκολο τρόπο για να διευκολύνει την χρήση των ems στον σχεδιασμό ιστοσελίδων και να τα κάνει να “μοιάζουν” περισσότερο με pixels. Πως το κάνει αυτό; Ο Richard Rutter υπολόγισε πως αφού τα 16px είναι το προεπιλεγμένο μέγεθος γραμματοσειράς σε μια ιστοσελίδα τότε αυτά ισοδυναμούν με την μονάδα μέτρησης των αποστάσεων της σελίδας. Για να στρογγυλέψει τα νούμερα και να φέρει τις μετρήσεις λίγο πιο κοντά στα μέτρα του αλλά και των περισσοτέρων άλλων, υπολόγισε πώς εάν στην αρχή του CSS αρχείου ορίσει

Body {font-size: 62.5%;}

τότε η μονάδα μέτρησης αποστάσεων και μεγεθών em μοιάζει περισσότερο με την μονάδα μέτρησης pixels. Ο λόγος είναι γιατί το 62.5% του 16px είναι τα 10px και αυτό το νούμερο είναι πολύ πιο εύκολο για κάποιον να το υπολογίζει και να το συγκρίνει με άλλα πιο “γνωστά” μεγέθη. Άρα αν ακολουθήσετε την μέθοδο του Richard Rutter, τότε το 1 em θα ισοδυναμεί με 10px, τα 1,5em με 15px, τα 0.9 em με 9px κλπ.
Παράδειγμα:

Body {font-size: 62,5%;}
H2 {font-size: 2em;}
H1 {font-size: 2,4em}

Υπάρχουν διάφορες τεχνικές που μπορείτε να χρησιμοποιήσετε για να ενισχύσετε το On-site SEO μιας ιστοσελίδας, μια από αυτές είναι το image replacement με h1. Ουσιαστικά είναι η αντικατάσταση μιας εικόνας/ γραφικού με h1 (επικεφαλίδα 1) στον προγραμματισμό της ιστοσελίδας χωρίς την οπτική διαφορά στην προβολή της.

Με πιο απλά λόγια προβάλλουμε μια εικόνα/ γραφικό που στον κώδικα είναι h1.

ΠΩΣ ΕΦΑΡΜΟΖΕΤΑΙ

Με την συγκεκριμένη τεχνική γίνεται παραμετροποίηση του h1 tag ώστε να προβάλλεται σαν εικόνα/ γραφικό με την χρήση CSS, αναλυτικότερα:

ΚΩΔΙΚΑΣ (X/HTML)

<div id=”logo”>
<h1><a href=”#” title=”Web Design Blog”>Web Design Blog</a></h1> </div>

CSS

#logo {
}
#logo h1 {
padding : 0;
margin : 0;
}
#logo h1 a {
background-image : url(../img/image_logo.gif);
height : 100px;
width : 100px;
padding : 0;
text-indent : -9999px;
display : block;
background-repeat : no-repeat;
margin : 0;
}

ΤΙ ΠΕΤΥΧΑΙΝΕΤΕ

Είναι πολύ βασικό να υπάρχει στην αρχή του κώδικα μιας ιστοσελίδας κείμενο με την χρήση επικεφαλίδας (h1) το οποίο να πληροφορεί τους μηχανισμούς αναζήτησης για το αντικείμενο και την ταυτότητα του διαδικτυακού τόπου. Εφαρμόζοντας την συγκεκριμένη τεχνική ακολουθείτε πιστά τους κανόνες για να πετύχετε μέγιστο On-site SEO χωρίς να δεσμεύεστε στο design και να διαμορφώνετε αρνητικά το εικαστικό σας.

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

Η μέθοδος του PNG Fix αποτελεί έναν από τους πιο σύγχρονους τρόπους διόρθωσης του προβλήματος της λανθασμένης προβολής γραφικών/ εικόνων σε μορφή transparent PNG γραφικών στο πρόγραμμα πλοήγησης διαδικτύου IE 6 (Internet Explorer) σήμερα.

• Τα πλεονεκτήματα που παρέχει είναι πολύ σημαντικά αφού η διαδικασία εφαρμογής του είναι πανεύκολη και τάχιστη.
• Ενεργοποιείται αυτόματα χωρίς να καλέσετε κάποια classes ή να χρησιμοποιήσετε εντολές functions.
• Το βάρος της (Javascript) δεν ξεπερνάει το 1ΚΒ και δουλεύει με γραφικά στο background χωρίς προβλήματα.
• Λειτουργεί με στοιχεία που έχουν auto width και auto height.

Ακολουθήστε τα παρακάτω βήματα για να εφαρμόσετε την συγκεκριμένη μέθοδο, αναλυτικότερα:

1. Αρχικά προσθέστε στο πάνω μέρος του κώδικα του X/HTML αρχείου σας, ακριβώς μετά την εντολή του css τον προβαλλόμενο κώδικα:
   

   <!–[if lt IE 7]>
   <script type=”text/javascript” src=”unitpngfix.js”></script>
   <![endif]–>

2. Αντιγράψτε το αρχείο unitpngfix.js και το γραφικό clear.gif στο φάκελο που επιθυμείτε και διορθώστε την διαδρομή (path) στον κώδικα ώστε να λειτουργήσει σωστά.

Για περισσότερες πληροφορίες μπορείτε να αποθηκεύσετε όλα τα αρχεία σε μορφή zip. Ακόμα μπορείτε να επισκεφθείτε τους δημιουργούς του PNG Fix στο http://labs.unitinteractive.com/unitpngfix.php

Εάν δεν επιθυμείτε να χρησιμοποιείτε tables στην σχεδίαση μιας online φόρμας μπορείτε να εφαρμόσετε την τεχνική που θα σας προβάλλουμε σήμερα.

Μπορείτε να χρησιμοποιήσετε την συγκεκριμένη τεχνική CSS για να διαμορφώσετε την φόρμα και να δώσετε την αισθητική δομής σχεδιασμένο με tables. Θεωρούμε την χρήση tables πιο γρήγορη διαδικασία στο συγκεκριμένο θέμα, αφού απαιτείται ελάχιστος χρόνος υλοποίησης του. Πάντως για τους web designers που είναι “λάτρεις” των divs και θέλουν αυστηρά tableless authoring μπορούν να προσαρμόσουν την παρακάτω τεχνική.

1. Κώδικας HTML
Χρησιμοποιώντας το <label> και <span> tag μπορείτε να σχεδιάσετε την φόρμα προβάλλοντας τα στοιχεία που επιθυμείτε. Επίσης όλα τα στοιχεία θα πρέπει να έχουν την CSS παράμετρο ορισμένη στο float left (float:left;)

<div id=“stylized” class=“myform”>
<form id=“form” name=“form” method=“post” action=“index.html”>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class=“small”>Add your name</span>
</label>
<input type=“text” name=“name” id=“name” />

<label>Email
<span class=“small”>Add a valid address</span>
</label>
<input type=“text” name=“email” id=“email” />

<label>Password
<span class=“small”>Min. size 6 chars</span>
</label>
<input type=“text” name=“password” id=“password” /><button type=“submit”>Sign-up</button>
<div class=“spacer”></div>

</form>
</div>

Στην συγκεκριμένη εικόνα μπορείτε να δείτε πως διαμορφώνετε ο κώδικας εν σχέση με το CSS:

2. Κώδικας CSS
Συνδέστε το αρχείο σας (style sheet) με το CSS τοποθετώντας τον παρακάτω κώδικα πάνω από το *<head>* ή σαν εξωτερικό στοιχείο.

body{
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

Το σχετικό παράδειγμα είναι δυνατόν να διαμορφωθεί αλλάζοντας το CSS σύμφωνα με το κάθε εικαστικό σας.

Πηγή πληροφορίας είναι το woork.blogspot.com