CSS frameworks : Αξίζουν ή όχι

Τώρα τελευταία τα CSS frameworks γίνονται όλο και περισσότερο της μόδας, με αρκετούς φανατικούς θαυμαστές αλλά και εξίσου φανατικούς επικριτές. Προσωπικά δεν είμαι και πολύ fun των περισσότερων framework (εξηγώ παρακάτω το γιατί), ωστόσο κατά καιρούς έχω χρησιμοποιήσει και μάλιστα με μεγάλη επιτυχία κάποια από αυτά. Στο παρακάτω αρθράκι λοιπόν, εξηγώ ποια ιδέα κρύβεται πίσω από τα framework, τα πλεονεκτήματα και μειονεκτήματα τους και τέλος ποια ξεχωρίζω και γιατί.

Η ιδέα πίσω από τα CSS frameworks είναι πως σε κάθε site/project που αναλαμβάνουμε, χρησιμοποιούμε πολλά κοινά στοιχεία, όπως για παράδειγμα το κλασικό CSS reset file (πάντα του Eric Meyer), κάποια default styles για τα σημαντικότερα elements (όπως headings, tables, φόρμες κτλ.), κάποια styles μόνο για print, ενώ πολλοί πάνε τα πράγματα ακόμα παραπέρα, χρησιμοποιώντας styles για να καθορίσουν την διάταξη του site (columns και rows), να χρησιμοποιήσουν εφέ στις λίστες/μενού τους, και πολλά άλλα. Η ιδέα λοιπόν που κρύβεται πίσω από ένα framework είναι πολύ απλή. Γιατί να ξαναγράφουμε όλους αυτούς τους κανόνες και κώδικα από την αρχή για κάθε site, όταν μπορούμε να τα γράψουμε μόνο μία φορά και να τα χρησιμοποιούμε ξανά και ξανά σε όλα μας τα project? Με τον παραπάνω τρόπο, θα γλιτώνουμε πολύ κόπο και χρόνο!

Φυσικά τα πράγματα δεν είναι και τόσο ρόδινα όπως ακούγονται. Και εγώ χρησιμοποιώ επαναλαμβανόμενο CSS κώδικα στα site μου, όμως προσπαθώ να αποφεύγω τα έτοιμα CSS frameworks, για τους παρακάτω λόγους :

  • Σε αναγκάζουν να χρησιμοποιείς κάποιο συγκεκριμένο, και πολλές φορές όχι semantic και accessible, στυλ στην markup, τις κλάσεις και τα id σου (πχ. class=”div-xyz”).
  • Συνήθως χρειάζεσαι πολύ λιγότερα πράγματα απ’ ότι σου προσφέρει ένα framework, με αποτέλεσμα να αναγκάζεις τον χρήστη να κατεβάζει άσκοπα κώδικα, που δεν χρησιμοποιεί!
  • Ακόμα και εάν είσαι έμπειρος στην CSS, αρκετά frameworks είναι πολύπλοκα στην εκμάθηση τους. Επίσης εάν δημιουργηθεί κάποιο πρόβλημα/bug είναι πολύ πιο δύσκολο να εντοπίσεις τι φταίει.

Από εκεί και πέρα δέχομαι πως τα CSS frameworks σου προσφέρουν αρκετά πράγματα σχετικά εύκολα και γρήγορα, μιας και δεν κάθεσαι να γράψεις από την αρχή όλους τους CSS κανόνες, ενώ τα περισσότερα υποστηρίζουν αμέσως τους περισσότερους browsers που υπάρχουν. Για όσους θέλουν να ρίξουν μια ματιά σε αυτά, η παρακάτω λίστα αναφέρει όλα τα frameworks που υπάρχουν διαθέσιμα αυτήν την στιγμή (αναφέρομαι στα γνωστά και αυτά που μπορεί να χρησιμοποιήσει κάποιος εδώ και τώρα, και όχι σε αυτά που είναι υπό development ή που βρίσκονται σε beta στάδιο).

Όπως ανέφερα και παραπάνω λοιπόν, έχω δοκιμάσει τα περισσότερα από αυτά, και λογικό είναι να έχω ξεχωρίσει κάποια από αυτά. Γενικότερα, απορρίπτω αμέσως 2 κατηγορίες framework. Αυτά που είναι πολύ μεγάλα σε μέγεθος και κώδικα, με αποτέλεσμα να αναγκάζουν τον χρήστη να περιμένει να φορτωθούν χίλια-δυο άχρηστα πράγματα, και σε αυτά που σε αναγκάζουν να χρησιμοποιείς non-semantic markup, κλάσεις και ids στον κώδικα σου. Με το παραπάνω σκεπτικό λοιπόν, έχω απορρίψει πολλά διάσημα frameworks, όπως YUI Grids CSS, 960, YAML, και πολλά άλλα, ενώ αντιθέτως έχω χρησιμοποιήσει αρκετές φορές το Boilerplate το οποίο δεν αντιμετωπίζει τα παραπάνω προβλήματα, ενώ το σκεπτικό του βασίζεται στην απλότητα τόσο του κώδικα του, όσο και της λειτουργίας του.

To Boilerplate λοιπόν είναι ένα πολύ απλό framework, το οποίο δεν περιέχει περίεργες κλάσεις και ids, αλλά προσφέρει μια πολύ ολοκληρωμένη βάση για τον CSS κώδικα σας. Έτσι κάθε φορά που το χρησιμοποιήτε σε κάποιο project, έχετε τον βασικό CSS κορμό έτοιμο, όπως για παράδειγμα ένα reset file, default styles για όλα τα elements (headings, παραγράφους, λίστες, κτλ.), ένα βασικό print-only style και κάποιες πάρα πολύ βασικές κλάσεις. Το δεύτερο χαρακτηριστικό που μου αρέσει στο συγκεκριμένο framework, είναι πως έχει χωρισμένα τα CSS αρχεία με έξυπνο τρόπο, όπως για παράδειγμα ένα αρχείο για την τυπογραφία (typography.css), άλλο για τις φόρμες (forms.css), άλλο για το UI της οθόνης (screen.css) κτλ., οργανώνοντας έτσι προκαταβολικά τον κώδικα σας! Από εκεί και πέρα, ότι extra θέλετε, το γράφεται μόνοι σας! Προσωπικά με έχει κερδίσει αυτή η μινιμαλιστική προσέγγιση που έχει, γιατί μέσα σε πολύ λίγη ώρα μπορώ να στίσω τον βασικό κορμό CSS ενός project, ενώ ταυτόχρονα για οτιδήποτε θέλω να προσθέσω ή να αλλάξω, γίνεται πολύ εύκολα και γρήγορα λόγο της έξυπνης κατηγοριοποίησης και ονοματολογίας των αρχείων του.

Αυτά τα λίγα λοιπόν για τα CSS Frameworks. Γενικότερα δοκιμάστε όσα περισσότερα γίνεται (όπως βλέπεται είναι πάρα πολλά) και προσπαθείστε να βρείτε αυτό που σας ταιριάζει! Εάν ξέχασα κάποιο framework που χρησιμοποιείτε ή που νομίζεται πως αξήζει να αναφερθεί, αφήστε μου ένα σχόλιο, για το κοιτάξω κι αυτό…

Google Chrome : Μια πιο τεχνολογική ματιά

Δοκίμασα και εγώ τον νέο open-source browser της Google, τον Chrome, και προσωπικά με εντυπωσίασε! Ακόμα και στην beta έκδοση, ο Chrome είναι πάρα πολύ γρήγορος, κάτι που έπρεπε να δω με τα ίδια μου τα μάτια, μιας και δεν πιστεύω ποτέ ούτε τα fanboys, ούτε τις υπερβολές των επίσημων κατασκευαστών. Δεν θα μπω στο τρυπάκι του να (αντι)γράψω για μια ακόμα φορά τα χαρακτηριστικά του, τα οποία είναι πραγματικά πολλά και αξιόλογα (δείτε και τα video που τα παρουσιάζουν, είναι πολύ μικρά και αξιόλογα), ωστόσο θα σταθώ σε μερικά σημεία που θα απασχολήσουν στο μέλλον τους πιο έμπειρους χρήστες και επαγγελματίες.

Το πρώτο και σημαντικότερο είναι πως ο Chrome χρησιμοποιεί το Webkit για μηχανή rendering. Προς το παρών η Google δηλώνει πως όποιο site εμφανίζεται σωστά σε Safari (ο οποίος στηρίζεται και αυτός στο Webkit) θα εμφανίζεται σωστά και στον Chrome. Με λίγα λόγια αυτήν την στιγμή οι δύο browsers έχουν κατά κάποιον τρόπο “συμβατή” version του Webkit, ωστόσο κανείς δεν ξέρει εάν η Google ή η Apple θα κρατήσουν αυτήν την συμβατότητα…

Το δεύτερο σημαντικό στοιχείο του browser είναι η ολοκαίνουργια Javascript engine που χρησιμοποιεί, η V8! Πραγματικά δείχνει πολύ γρήγορη, ενώ περνάει και με 100% επιτυχία το ACID2 test (στο 3 θέλει λίγο δουλειά ακόμα). Γενικά πιστεύω πως η αγορά χρειαζόταν μια καινούργια και γρήγορη Javascript engine, ενώ το γεγονός ότι και αυτή είναι open source την κάνει ακόμα πιο σημαντική.

Ένα άλλο σημείο που κάνει τον Chrome να ξεχωρίζει από τους άλλους browsers, είναι η ενσωμάτωση του Google Gears μέσα στον ίδιο τον browser (δεν χρειάζεται να εγκαταστήσετε κάποιο plug in). Αυτό αλλάζει πολλά δεδομένα για τους developers που θέλουν να αναπτύξουν εφαρμογές με επιπλέον δυνατότητες, πέρα από τις κλασικές τεχνολογίες. Μιλάμε για φοβερές δυνατότητες όπως local server μέσα στον browser (ο browser με λίγα λόγια θα είναι και client και server !!!), local database/SQLite και πολλά άλλα καλούδια!!! Σκεφτείτε πόσα επιπλέον features μπορεί να αποκτήσει οποιοδήποτε site/web application, γνωρίζοντας πως οι χρήστες του χρησιμοποιούν τον συγκεκριμένο browser!

Αν και δεν σχολιάστηκε όσο θα έπρεπε, ο Chrome χτυπάει, και μάλιστα πολύ δυνατά, άλλο ένα προϊόν της Mozilla – πέρα του Firefox – το Mozilla Prism (είχα γράψει και παλιότερα γι αυτό). Με μία κίνηση λοιπόν μπορείτε να δημιουργήσετε application shortcuts (έτσι τα ονομάζει τουλάχιστον), τα οποία με την βοήθεια του browser και των χαρακτηριστικών του (Gears, κτλ.) μπορούν να λειτουργήσουν σαν RIA εφαρμογές! Ακριβώς ότι κάνει το Prism με την Gecko rendering engine, μόνο που όλα γίνονται πιο εύκολα και γρήγορα!

Τέλος, για εμάς τους developers, ο Chrome διαθέτει 2 πολύ ενδιαφέροντα εγαλειάκια, το Web Inspector και το JavaScript Debugger (έχω την αίσθηση πως είναι τα κλασικά web tools έρχονται με το Webkit), αλλά τίποτα παραπάνω προς το παρόν (ξεχάστε το Firebug δηλαδή)… Είναι πολύ νωρίς ακόμα για να ζητάω add-ons, ιδιαίτερα τέτοιου επιπέδου, ωστόσο έχω την αίσθηση πως θα φτιαχτούν γρήγορα πολλά και ποιοτικά add-ons για τον browser. Μην ξεχνάτε πως τα πάντα είναι open source! Τα πιο ανήσυχα μυαλά μπορούν να ρίξουν και μια ματιά στο επίσημο FAQ των web developers το οποίο θα τους λύσει αρκετές απορίες για τον browser και τις παραξενιές του.

Μετά από μία ολόκληρη μέρα με τον Chrome λοιπόν, δηλώνω fan του στο κομμάτι του browsing, ωστόσο μερικά add-on του Firefox (Firebug, FireShot, Web Developer Bar, Delicious Bookmarks και διάφορα άλλα μικρότερης σημασίας), με αναγκάζουν να κρατάω τον Firefox ως default browser. Θα περιμένω λοιπόν ακόμα να δω τι add ons θα δημιουργηθούν για τον νέο browser, και θα ξανασκεφτώ σοβαρά το θέμα switching, ωστόσο εάν ψάχνεται έναν γρήγορο browser μόνο για surfing, κατεβάστε και χρησιμοποιήστε άφοβα τον Chrome!

Progressive enhancement : Tsevdos.com sidebar

Το δεύτερο και ίσως αγαπημένο μου feature στο Whitepress theme, είναι η AJAX-powered, αλλά ταυτόχρονα accessible sidebar του! Την τεχνική την δανείστηκα από το blog jQuery for designers και πιο συγκεκριμένα από το post jQuery Tabs, και ο λόγος που την λάτρεψα είναι επειδή χρησιμοποιεί σωστά αυτό που ονομάζουμε progressive enhancement. Progressive enhancement με πολύ απλά λόγια σημαίνει πως ο χρήστης έστω και εάν δεν έχει την javascript ενεργοποιημένη στον browser, η sidebar και ολόκληρο το περιεχόμενο της θα εμφανίζεται κανονικά! Το μόνο που θα χάσει ο χρήστης σε αυτήν την περίπτωση είναι το AJAX-like εφέ που δημιουργεί η Javascript (και πιο συγκεκριμένα το jQuery), ενώ θα βλέπει και όλα τα tabs ανοιχτά, το ένα κάτω από το άλλο. Όπως μπορείτε να παρατηρήσετε και από τις 2 παρακάτω εικόνες, ο χρήστης με ενεργοποιημένη Javascript έχει περισσότερο ελεύθερο χώρο στην sidebar του, και μπορεί να επιλέξει ποιο tab θα είναι ενεργοποιημένο. Αντίθετα κάποιος χρήστης με απενεργοποιημένη Javascript ή screen reader απλά βλέπει κανονικά και στην σειρά όλο το περιεχόμενο της sidebar με την σειρά που εμφανίζεται στην markup!

Tsevdos.com with Javascript on
Η sidebar όπως εμφανίζεται σε browser που έχει ενεργοποιημένη την Javascript.
Tsevdos.com with Javascript off
Η sidebar όπως εμφανίζεται σε browser που δεν έχει ενεργοποιημένη την Javascript.

Η markup (XHTML)

Ας δούμε όμως πως μπορούμε να φτιάξουμε το συγκεκριμένο εφέ εύκολα και γρήγορα. Εν αρχή λοιπόν (όπως πάντα) η markup μας.


Όπως βλέπεται ένα div με το id sidebar, περιέχει μια unordered list (ul), με τρία list items (li), τα οποία στην ουσία λειτουργούν ως navigation list για τα τρία divs που ακολουθούν και θα περιέχουν το περιεχόμενο μας. Φυσικά η navigation list μπορεί να έχει περισσότερα links, αρκεί να υπάρχουν και τα ανάλογα divs περιεχομένου από κάτω. Αυτό ήταν, η markup είναι έτοιμη! Το μόνο που θα πρέπει να προσέξει κάποιος (θα εξηγήσω παρακάτω το γιατί), είναι πως σε περίπτωση που θέλει να προσθέσει επιπλέον ζευγάρια links και divs (για να έχει επιπλέον tabs και περιεχόμενο δηλαδή), θα πρέπει το link μέσα στο list item, να έχει για href attribute ακριβώς το ίδιο string με το id του div που θα προσθέσει. Όπως ήδη μπορείτε να δείτε, όλα τα links έχουν για href attribute τα id των div που θα εμφανίζουν.

H CSS

To styling (CSS) της συγκεκριμένης markup δεν παίζει κανέναν απολύτως ρόλο στον κώδικα μας (όλη η δουλειά γίνεται μέσω Javascript/jQuery), ωστόσο γι αυτούς που θέλουν να δημιουργήσουν κάτι στα γρήγορα, ας αντιγράψουν τον παρακάτω κώδικα, τον οποίο χρησιμοποιώ και στο παράδειγμα που μπορείτε να δείτε και φυσικά να κατεβάσετε!

* {
margin: 0;
padding: 0;
}

#sidebar {
width: 500px;
margin: 20px;
margin-bottom: 15px;
border-left: 1px solid #999;
}

#navigation {
list-style-type: none;
}

a:link, a:visited {
color: #fff;
background: #ccc;
padding: 1px 5px 0;
text-decoration: none;
font-weight: bold;
}

a:hover, a:active, a.selected {
color: #fff;
background: #999;
}

#navigation li {
list-style-type: none;
float: left;
border: 1px solid #999;
border-width: 1px 1px 0 0;
}

#sidebar div {
clear: left;
padding: 10px;
border: 1px solid #999;
border-width: 1px 1px 1px 0;
}

Και τέλος η Javascript (jQuery)

Και επιτέλους περνάμε στην καρδιά αυτού του tutorial, δηλαδή στην Javascript και το jQuery πιο συγκεκριμένα! Για τους ανυπόμονους, ο κώδικας είναι ο παρακάτω, ωστόσο καλό θα είναι να τον εξηγήσουμε και λίγο, γιατί πολλά πράγματα γίνονται, μέσα σε πολύ λίγες γραμμές κώδικα…



Στην πρώτη γραμμή λοιπόν, δηλώνουμε στην markup πως θα κάνουμε χρήση της jQuery library. Η συγκεκριμένη library (όπως και οι περισσότερες άλλωστε) λειτουργεί όταν το DOM (Document Object Model) είναι έτοιμο. Αυτό ακριβώς κάνει ο παρακάτω κώδικας. Μέσα του θα προσθέσουμε όλον το Javascript κώδικα ο οποίος με την βοήθεια και της βιβλιοθήκης θα δημιουργήσει το εφέ μας.

$(document).ready(function(){
...
});

Επιλέγουμε λοιπόν τα links (anchor elements) που βρίσκονται μέσα στην unordered list με id navigation, και τους προσθέτουμε ένα απλό click event. Με άλλα όταν γίνει click σε κάποιο link της λίστας, τότε ο κώδικας που βρίσκεται ανάμεσα στις αγκύλες ενεργοποιήται.

$('#sidebar #navigation li a').click(function() {
...
});

Και πάμε πλέον στο τι γίνεται όταν πατηθεί κάποιο από τα παραπάνω links. Αρχικά επιλέγουμε όλα τα divs της sidebar (#sidebar > div) και τα κρύβουμε (hide()). Ταυτόχρονα εμφανίζουμε το div (με ένα απλό fadeIn εφέ) το οποίο έχει id ίδια τιμή με το string της href attribute του link (hash). Για τον λόγο αυτό σας προειδοποίησα παραπάνω πως πρέπει να προσέξουμε πολύ στην markup μας αυτήν την μικρή λεπτομέρεια. Εάν δεν έχουν ίδια τιμή ο κώδικας απλά δεν παίζει… Για να το κάνω ακόμα πιο κατανοητό (για αυτούς που κάνουν τώρα τα πρώτα τους βήματα σε jQuery), ας υποθέσουμε πως πατήθηκε το link Section 1, το οποίο έχει για href attribute την τιμή “#first_div”. Μόλις γίνει click λοιπόν, το jQuery θα κρύψει όλα τα divs της sidebar, και θα επιλέξει το div το οποίο έχει για id την τιμή #first_div. Αυτό γίνεται επειδή το this.hash εκείνη την στιγμή παίρνει την τιμή #first_div. Μόλις ολοκληρωθεί και αυτό, απλά εμφανίζουμε με fade in το συγκεκριμένο div. Και όλα αυτά γίνονται μόλις σε 1 γραμμή κώδικα!

$('#sidebar > div').hide().filter(this.hash).fadeIn();

Ευτυχώς ο υπόλοιπος κώδικας είναι πολύ πιο κατανοητός και εύκολος. Στις παρακάτω 3 γραμμές απλά επιλέγουμε όλα τα links και τους αφαιρούμε (εάν έχουν, όμως πάντα ένα link θα έχει) την κλάση “selected”, η οποία και δίνει το ανάλογο style στο επιλεγμένο link. Τέλος προσθέτουμε στο link που έχει γίνει το click την κλάση “selected”, έτσι ώστε να φαίνεται πως είναι επιλεγμένο (highlighted), και δηλώνουμε στον browser να σταματήσει την default ενέργεια του click event (return false;), μιας και έχουμε πετύχει το εφέ που θέλουμε!

$('#sidebar #navigation li a').removeClass('selected');
$(this).addClass('selected');
return false;

Τέλος σε όλο αυτό το click event προσθέτουμε ένα από τα αγαπημένα μου χαρακτηριστικά που έχει το jQuery. Φιλτράρουμε το πρώτο element που έχει επιλεχθεί, δηλαδή το πρώτο link της λίστας μας, και κάνουμε click πάνω του, μέσω κώδικα! Έτσι όταν στο τέλος εμφανίζεται η σελίδα το πρώτο link (ή tab ή όπως αλλιώς θέλετε να το πείτε), θα είναι πάντα επιλεγμένο!!! Αυτό ήταν, είναι έτοιμο, δουλεύει και πάνω από όλα, είναι φιλικό προς όλους τους χρήστες! Δοκιμάστε να απενεργοποιήσετε την Javascript και θα δείτε πως θα συνεχίζει να δουλεύει χωρίς κανένα πρόβλημα, απλά θα χάσει λίγη από την μαγεία του…

.filter(':first').click();

Επίλογος

To jQuery είναι πραγματικά μια φανταστική Javascript library η οποία κάνει τα δύσκολα πράγματα απλά! Όπως βλέπεται μέσα σε μόλις 6-7 γραμμές κώδικα έχουμε ένα πολύ όμορφο και accessible αποτέλεσμα το οποίο μπορεί να χρησιμοποιηθεί παντού! Η δυνατότητα του να κάνεις εύκολα και γρήγορα αυτά που έχεις στο μυαλό σου, χωρίς να σε απασχολούν οι μικρολεπτομέρειες τις Javascript (οι οποίες πιστέψτε με είναι πολλές και ενοχλητικές), είναι αυτό που κάνει το jQuery να ξεχωρίζει από τις άλλες libraries. Τέλος για όσους θέλουν μια ακόμα πιο εύκολη και φυσικά accessible λύση καλό θα είναι να ρίξουν και μια ματιά στο UI Tabs το οποίο είναι ένα επίσημο plug-in για το jQuery και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Στρογγυλές γωνίες (rounded corners) χρησιμοποιώντας μόνο CSS και 1 γραφικό

Από καιρό ήθελα να γράψω ένα tutorial με θέμα τις στρογγυλές γωνίες (rounded corners) και την HTML/CSS που κρύβεται πίσω από ένα τέτοιο εγχείρημα, όμως πάντα κάτι τύχαινε και δεν το έγραφα. Σήμερα λοιπόν έχετε την ευκαιρία να διαβάσετε ένα πολύ ενδιαφέρον tutorial πάνω στο θέμα, στο οποίο χρησιμοποιώ και πολλές άλλες ενδιαφέρουσες τεχνικές σε CSS κυρίως επίπεδο.

Ας αρχίσουμε λοιπόν φτιάχνοντας ένα div (division) το οποίο θα περιέχει το κείμενο μας (του δίνω και μία κλάση/class έτσι ώστε να ξεχωρίσει από τα υπόλοιπα), και εφαρμόζω κάποια βασικά styles έτσι ώστε να φαίνεται καλύτερα.


Κείμενο...

* {
margin: 0;
padding: 0;
}

body {
padding: 20px;
}

div.rounded {
margin-bottom: 10px;
padding: 10px;
background: #999;
}

Αναγκαίο κακό εάν θέλουμε στρογγυλές γωνίες στο web, είναι η extra non-semantic markup (ούτε και εμένα μ αρέσει, αλλά δεν γίνεται αλλιώς), οπότε βάζουμε αναγκαστικά άλλα 4 span elements μέσα στο div μας, ένα για κάθε γωνία.

  Κείμενο...  

Και τώρα μπορούν να αρχίσουν τα ωραία ;-). Το γραφικό που χρησιμοποιώ είναι ένας κύκλος με διάμετρο 20px (width και height). Αυτό που θέλω να πετύχω είναι όλα τα span elements, να δείχνουν αυτόν τον κύκλο, αλλά διαφορετικό κομμάτι του κάθε φορά! Ας γράψουμε λοιπόν τους γενικούς κανόνες για τα span elements, αφού προσθέσουμε άλλον έναν σημαντικό κανόνα για το positioning στο div μας. (Το γραφικό που χρησιμοποιώ μπορείτε να το κατεβάσετε από εδώ circle )


div.rounded {
margin-bottom: 10px;
padding: 10px;
background: #999;
position: relative;
}

div.rounded span {
width: 10px;
height: 10px;
background-image: url(circle.gif);
background-repeat: no-repeat;
position: absolute;
}

Με τον κανόνα που πρόσθεσα στο div (position: relative;) θα μπορέσω στην συνέχεια να τοποθετήσω τα span elements ακριβώς εκεί που θέλω με absolute positioning. Τα span προς το παρόν, απλά δείχνουν πάντα την πάνω αριστερή μεριά του κύκλου. Μην ξεχνάτε πως τα span είναι 10px (ύψος-πλάτος) ενώ οι διαστάσεις του γραφικού είναι 20px! Επίσης ρυθμίζω να μην επαναλαμβάνεται το γραφικό στο background, αν και ο συγκεκριμένος κανόνας δεν χρειάζεται, τον έχω προσθέσει για σιγουριά.

Τέλος απλά τοποθετούμε το κάθε span στην σωστή γωνία με absolute positioning (το tl πάνω αριστερά – top left, το tr πάνω δεξιά – top right, κοκ.). Αυτό γίνεται πολύ εύκολα με τους positioning κανόνες top, left, right και bottom και τις ανάλογες τιμές τους (0 στο παράδειγμα μας, μιας και θέλουμε να βρίσκονται ακριβώς στις γωνίες του div). Είναι σχεδόν έτοιμο, το μόνο που πρέπει να κάνουμε τώρα είναι να παρουσιάζουμε το σωστό κομμάτι του κύκλου/γραφικού μας στο κάθε span. Αυτό γίνεται με background-positioning στο καθένα από τα span μας!


span.tl {
top: 0; left: 0;
background-position: top left;
}

span.tr {
top: 0; right: 0;
background-position: top right;
}

span.bl {
bottom: 0; left: 0;
background-position: bottom left;
}

span.br {
bottom: 0; right: 0;
background-position: bottom right;
}

Για όσους δεν έπιασαν το τελευταίο κομμάτι (μιας και οι προηγούμενοι κανόνες είναι πιο ξεκάθαροι) θα τους πρότεινα να βάλουν και τον παρακάτω κανόνα στον κώδικα τους και να παρατηρήσουν τις γωνίες τους! Όπως βλέπεται, το γραφικό που έχουν είναι πάντα το ίδιο, απλά το span με κλάση/class tl (top left), εμφανίζει την πάνω αριστερή μεριά του κύκλου, μιας και το span δείχνει μόνο 10px σε ύψος και πλάτος από τα 20px που έχει συνολικά το image μας. Έτσι εμφανίζουμε μόνο την μεριά του κύκλου που θέλουμε σε κάθε γωνία μας.


div.rounded span {
border: 1px solid red;
}

Τέλος για τους λάτρεις του jQuery αλλά και της καθαρής markup, στο παράδειγμα που έχω ανεβάσει, έχω φτιάξει άλλο ένα div, στο οποίο έχω προσθέσει μέσω DOM την απαραίτητα markup του παραπάνω παραδείγματος. Έτσι προσθέτοντας μία μόνο γραμμή Javascipt (και το jQuery φυσικά), μπορούμε να απολαύσουμε την πεντακάθαρη markup έχοντας το ίδιο φυσικά αποτέλεσμα! Δείτε τον παρακάτω κώδικα (ή το για όσους βαριούνται να πληκτρολογούν το δεύτερο div, απλά δείτε το δεύτερο div του παραδείγματος) και θα καταλάβετε τι εννοώ.

Κείμενο...

$(document).ready(function(){
$('.jquery').prepend('').append('');
});

Το μόνο πρόβλημα σε αυτήν την περίπτωση είναι πως εάν ο χρήστης δεν έχει ενεργοποιημένη την Javascript, δεν θα δει στρογγυλές τις γωνίες του div, μιας και αυτές “εισχωρούν” στο DOM μέσω Javascript. Το τελικό αποτέλεσμα μπορείτε να το δείτε αλλά και να το κατεβάσετε (σε zip format).

Η συγκεκριμένη τεχνική δουλεύει σε όλους τους μοντέρνους browsers, αλλά όχι στον IE6 (ο οποίος δεν είναι μοντέρνος, απλά πολλοί χρήστες τον χρησιμοποιούν ακόμα)! Εάν λοιπόν δεν σας ενδιαφέρει ο συγκεκριμένος browser (εδώ δεν ενδιαφέρει την 37signals) μπορείτε να χρησιμοποιήσετε την συγκεκριμένη τεχνική αμέσως! Εάν πάλι σας ενδιαφέρει και ο IE6 καλό θα είναι να δοκιμάσετε κάποια ανάλογη τεχνική με floats και 4 images (δυστυχώς)… Περιμένω σχόλια και προτάσεις για tutorials (yes, I’m on fire!!! 😉 )…

Δωρεάν βιβλίο για Photoshop

Το Sitepoint προσφέρει εντελώς δωρεάν ολόκληρο το βιβλίο “The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques”. Από μια γρήγορη ματιά που του έριξα πιστεύω πως απευθύνεται κυρίως σε νέους χρήστες, ωστόσο και οι πιο έμπειροι όλο και κάτι ενδιαφέρον θα μάθουν/θυμηθούν… Το κεφάλαιο για το πως σχεδιάζεις ένα web site είναι αρκετά ενδιαφέρον, ιδιαίτερα εάν κάνετε τώρα τα πρώτα σας βήματα στο web design, αλλά γενικότερα αξίζει να το κατεβάσετε και να του ρίξετε μια ματιά, έτσι κι αλλιώς δεν θα σας κοστίσει τίποτα!

IE tester

Το IE tester είναι ένα νέο εργαλειάκι που ανακάλυψα το οποίο σου προσφέρει τις rendering engine όλων των Internet Explorer, και πιο συγκεκριμένα του IE8 beta 1, IE7, IE6 και IE5.5 σε ένα και μοναδικό Windows installation! Αν και ακόμα χρησιμοποιώ το multiple IE στα XP μηχανήματα μου, το ολοκαίνουργιο IE tester έχει 2 σοβαρά πλεονεκτήματα :

  • Προσφέρει την ολοκαίνουργια μηχανή rendering του IE 8 (beta1)
  • Μπορείτε να γίνει install εκτός από Windows XP, και σε Vista, κάτι που δεν μπορεί το multiple IE (βασικά μπορεί αλλά με πολλές πατέντες…)

Αν και έχει διάφορα μικρο-προβληματάκια, τα οποία λογικά θα λυθούν σύντομα, είναι η μια πολύ καλή λύση για να ελέγξετε τα site σας στον νέο Internet Explorer 8 (έστω και την beta 1 rendering μηχανή του), και μάλιστα χωρίς να κάνετε πολύπλοκες διαδικασίες και πατέντες έτσι ώστε να κρατήσετε και κάποιον παλιότερο Explorer στο μηχάνημα!

Οι έλληνες web experts που διαβάζω (και εμπιστεύομαι)

Με το παρακάτω post επιχειρώ να συλλέξω τα καλύτερα blog από τους έλληνες web experts που διαβάζω. Επειδή η λίστα βγήκε μεγαλύτερη απ’ ότι περίμενα (γεγονός πολύ ελπιδοφόρο) μην με φάτε εάν ξέχασα κάποιους, απλά αφήστε ένα comment εφόσον έχετε κάποιο web-related blog. Έχουμε και λέμε λοιπόν :

Web design και development

Υπό normal συνθήκες οι δύο κατηγορίες θα ήταν ξεχωριστές, αλλά στο κόσμο του web, συχνά ο designer είναι και coder και το αντίθετο, ενώ οι περισσότεροι συνάδελφοι που αναφέρω παρακάτω, γράφουν post και για τις δύο κατηγορίες (και όχι μόνο)…

  • acidsmile : Η Μαρία blogάρει από την Αγγλία για την δουλειά της αλλά και για άλλα θέματα που την απασχολούν!
  • Digitalbox blog : Το επίσημο blog της εταιρείας Digitalbox με πραγματικά πολύ καλό περιεχόμενο! Ελπίζω να ακολουθήσουν το παράδειγμα της κι άλλες εταιρείες, μιας και στην Ελλάδα τα εταιρικά blog είναι ελάχιστα, ακόμα και από εταιρείες που υποτίθεται ότι δραστηριοποιούνται στο χώρο του web!
  • Netfreaks.gr : Ο HitMan-Βίκτωρας σχολιάζει την web επικαιρότητα με τον δικό του τρόπο!
  • porcupine colors : Τον Γιάννη Κωνσταντακόπουλο, τον θεωρώ έναν από τους guru του χώρου, και πολύ απλά πρέπει να διαβάζεται το blog του…
  • Simple is Beautiful : Από την γνωστή development ομάδα του Pathfinder, την Phaistos Networks, ο Μάρκος Παπαδάκης έχει πάντα κάτι ενδιαφέρον να μας πει.
  • sugarenia.com : Από την ίδια ομάδα (Phaistos Networks), η Ζαχαρένια (ή sugarenia) γράφει γλυκές web standard συνταγές!
  • phaistonian : Στο blog του, ο Γιώργος Παπαδάκης (από την Phaistos Networks και αυτός), γράφει λίγο πιο τεχνικά, αλλά πάντα ενδιαφέροντα post! Τώρα τελευταία όλο λέω πως θα ασχοληθώ και με το Core που παρουσιάζει όλο στο blog του, αλλά που χρόνος…
  • The Portrait of A Geek : O νέος αγαπημένος μου blogger! Από τους λίγους που προσφέρει κώδικα και αναλυτικά web tutorials! Απλά respect.
  • Webz : Παλιό και αγαπημένο μου blog! Έχει περάσει πλέον και στα “κλασικά” θα έλεγα…
  • Petros Dimitriadis : Εδώ θα βρείτε περισσότερο web design related υλικό.

SEO και Web marketing

  • .Connect : Το επήσιμο blog της Μindworks ασχολείται φυσικά, όπως και η ίδια η εταιρεία άλλωστε, με θέματα SEO και web marketing.
  • About SEO : Άλλο ένα αξιόλογο blog αφιερωμένο στο SEO, με posts γραμμένα από τον Γιώργο Βαρέλογλου.
  • Βizwriter : Ο Σάκης Ρίζος εργάζεται στην Μindworks ενώ παράλληλα προσφέρει χρήσιμες πληροφορίες στο blog του, πάνω σε θέματα web marketing.

Άλλα αξιοσημείωτα blog

Μήπως πρέπει να σιγά-σιγά να ξεκινήσουμε και το δικό μας union 😉

Tsevdos.com και web-art-cast screencast

To πρώτο επεισόδιο του sceencast web-art-cast είναι έτοιμο εδώ και καιρό (σύντομα και η αγγλική version του από την Μαρία), απλά με καθυστέρησαν πάρα πολλές λεπτομέρειες και υποχρεώσεις. Αν και δεν έχω λύσει όλα τα μικρό-προβλήματακια, σήμερα αποφάσισα να ανεβάσω το πρώτο επεισόδιο και από εκεί και πέρα θα δούμε πως θα εξελιχθεί αυτή η προσπάθεια, η οποία είναι φυσικά beta (όπως όλα τα καλά πράγματα 😉 ). Το θέμα του screencast όπως καταλαβαίνεται και από το όνομα του έχει να κάνει με web design τεχνικές, και είναι μια 100% ελληνική προσπάθεια! Περισσότερες πληροφορίες μπορείτε να διαβάσετε στην about page του web-art-cast ενώ όσοι θέλουν να στηρίξουν αυτήν την προσπάθεια απλά ας διαδώσουν το νέο!!!

Η Microsoft ξανασκέφτεται τo version targeting στον IE8

Επιτέλους η Microsoft δείχνει να ακούει την web κοινότητα, και ανακοινώνει στο επίσημο blog του ΙΕ8 πως η default rendering engine του καινούργιου Explorer θα είναι η νέα web-standard compliant rendering engine (και όχι αυτή του IE7)! Φυσικά έχει επικρατήσει πανικός σε όλα τα web design blogs μιας και το θέμα version targeting έδειχνε να έχει κλείσει, αλλά ευτυχώς για όλους εμάς κάποιοι το ξανασκέφτηκαν… Η παραπάνω επίσημη ανακοίνωση σημαίνει πως :

  • Οι web designers/developers δεν θα χρειάζεται να προσθέσουν το γνωστό meta element για να χρησιμοποιηθεί η καινούργια και πολλά υποσχόμενη rendering μηχανή του IE8. Σε αυτό το σημείο να υπενθυμίσω πως η rendering engine του ΙΕ8 έχει περάσει και το γνωστό Aicd 2 test που σημαίνει πως ο IE8 θα είναι πραγματικά web-standards compliant!!!
  • Οι web designers/developers που θα θέλουν να χρησιμοποιήσουν την παλιότερη μηχανή rendering του IE7, θα πρέπει να προσθέσουν στον head section του site τους το γνωστό πλέον meta element. Ακριβώς αυτήν την άποψη είχα από την αρχή στο όλο θέμα, και πραγματικά απορώ γιατί δεν το σκέφτηκαν νωρίτερα!!!

Προσωπικά είμαι 100% σύμφωνος με την εξέλιξη της υπόθεσης και πραγματικά χαίρομαι που η Microsoft ξανασκέφτηκε το όλο θέμα. Μόνο καλό στον χώρο του internet μπορεί να κάνει αυτή η κίνηση μιας και ο διασημότερος browser θα είναι επιτέλους, και για πρώτη φορά, web-standards compliant! Η Microsoft μας χρωστούσε εδώ και καιρό έναν αξιόλογο web browser και επιτέλους θα τον έχουμε!

IE 8 beta και οι προτάσεις του Web Standards Project

Η πρώτη κλειστή beta του Internet Explorer 8 έκανε την εμφάνιση της και όπως όλα δείχνουν ο νέος browser θα είναι σύντομα κοντά μας. Η Microsoft φαίνεται να έμαθε το μάθημα της και δεν ρισκάρει να καθυστερήσει πλέον τις νέες εκδόσεις του browser της (όπως είχε κάνει με τον IE7 ο οποίος κυκλοφόρησε μετά από 6-7 χρόνια από τον 6!!!). Κατά τα άλλα, οι προτάσεις του Web Standards Project πάνω στο θέμα είναι αρκετά ενδιαφέρουσες, ωστόσο συμφωνώ προς το παρόν με τις 2 τελευταίες :

  • Προτείνουν στην Microsoft να δημιουργήσει ένα patch για τον IIS με το οποίο τα site που φιλοξενούνται στον εν λόγω server να κάνουν “targeting” στην ΙΕ7 rendering engine (έτσι ώστε να μην “χαλάσουν” χρησιμοποιώντας την rendering engine του ΙΕ8)
  • Προτείνουν στην Microsoft να διαθέσει τον IE8 beta με default rendering μηχανή την ολοκαίνουργια rendering engine (αυτή του IE8 δηλαδή) έτσι ώστε να τεστάρουν πόσα site τελικά θα “χαλάσουν”
  • Να κάνουν τον IE8 standalone browser, ο οποίος να μπορεί να γίνει install χωρίς να χρειαστεί κάποιος να πετάξει/αντικαταστήσει τον IE7

Φυσικά όλα τα παραπάνω είναι απλά οι προτάσεις του Web Standards Project και μένει να δούμε πόσες από αυτές θα ικανοποιήσει τελικά η Microsoft. Εγώ έχω ήδη εκφράσει τις απόψεις μου πάνω στο θέμα και συμφωνώ πλήρως με τον Roger Johansson ο οποίος υποστηρίζει πως εάν έπρεπε να υπήρχε το version targeting, θα έπρεπε να δουλεύει ανάποδα, δηλαδή η default rendering engine να ήταν η καινούργια (IE8) και εάν κάποιος ήθελε το site του να εμφανίζεται και να συμπεριφέρεται όπως γινόταν με αυτή του IE7 τότε να χρησιμοποιούσε το version targeting για να το κάνει…