Στρογγυλές γωνίες (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!!! 😉 )…

Accessibility test σε 10′ λεπτά

Είναι άπειρες οι φορές όπου φίλοι, γνωστοί ή ακόμα και άγνωστοι ζητάνε την γνώμη μου για το πόσο προσβάσιμο (accessible) είναι site τους. Οι περισσότεροι έχουν την αίσθηση πως εμείς (οι web designers/developers) είμαστε μάγοι ή έχουμε πολύ εξειδικευμένο εξοπλισμό και software για να κάνουμε κάτι τέτοιο. Στην πραγματικότητα το μόνο που χρειάζεται κάποιος, είναι ένας σύγχρονος browser (κατά προτίμηση Firefox με το web developer toolbar) και κάποιες εναλλακτικές ρυθμίσεις, έτσι ώστε να εντοπίσει γρήγορα τα διάφορα accessibility προβλήματα που πιθανόν να υπάρχουν. Στο παρακάτω post λοιπόν περιγράφω πολύ συνοπτικά πως μπορεί κάποιος, να κάνει ένα αξιόλογο web accessibility τεστ μέσα σε 10 μόλις λεπτά (όχι δεν σας κοροϊδεύω!). Για να μπορεί το post να διαβαστεί από όλους (και όχι μόνο από ειδικούς του χώρου), θα παρακάμψω την πολύ θεωρία πίσω από κάθε test, και θα εστιάσω την προσοχή στα παραδείγματα. Έχουμε και λέμε λοιπόν :

Απενεργοποιήστε τα images και δείτε πως φαίνεται το site σας χωρίς αυτά

Προσπαθείστε το site σας να δείχνει αξιοπρεπέστατο ακόμα και εάν δεν έχουν φορτωθεί τα γραφικά του (είτε γιατί ο χρήστης τα έχει απενεργοποιήσει, είτε επειδή κάποιο πρόβλημα στον server δεν τα αφήνει να κατέβουν, είτε επειδή ο χρήστης δεν έχει καλό bandwidth, κτλ.). Όποιος και να είναι ο λόγος το site σας θα πρέπει να δείχνει σωστά και χωρίς γραφικά. Απλό και κατανοητό νομίζω, και για τον λόγο αυτό δεν θα μακρηγορήσω περισσότερο, αλλά θα περάσω κατευθείαν σε 2 παραδείγματα.

Στο παρακάτω παράδειγμα λοιπόν, το blog του Γιάννη δεν “αλλοιώνεται” ούτε “χαλάει” όταν του απενεργοποιήσουμε τα images. Επίσης χρησιμοποιεί σωστά το alternative text περιγράφοντας τα γραφικά που δεν εμφανίζονται…

Porcupine blog - images on

Porcupine blog - images off

Αντιθέτως, το site Avopolis, δείχνει αρκετά άσχημο όταν απενεργοποιούμε τα images. Το χειρότερο από όλα είναι πως το κεντρικό μενού του site εξαφανίζετε, μιας και είναι όλο φτιαγμένο σε ένα image map!

Avopolis site - images on

Avopolis site - images off

Απενεργοποιείστε την Javascript

Ο κανόνας που ισχύει είναι αρκετά απλός : Δεν πρέπει να θεωρούμε πως ο χρήστης του site μας έχει την Javascript ενεργοποιημένη!

Στο blog το οποίο βρίσκεστε εάν απενεργοποιείστε την Javascript (η οποία χρησιμοποιείτε στην sidabar για τα διάφορα AJAX-like εφεδάκια), δεν θα χάσετε τίποτα από το περιεχόμενο του blog! Η τεχνική αυτή ονομάζεται Progressive enhancement, και το σκεπτικό πίσω από την τεχνική, είναι πως το site πρέπει να γίνεται σταδιακά πιο δυναμικό (interactive). Έτσι πρέπει πρώτα να έχουμε ένα καθαρό, σωστά δομημένο και σημασιολογικό (semantic) document (ή αλλιώς markup), μετά να τo εμπλουτίζουμε και να το παρουσιάσουμε κατάλληλα με τους ανάλογους styling κανόνες (CSS) και τέλος ότι extra interactivity θα θέλαμε να υπάρχει να κατασκευαστεί με σωστή χρήση της Javascript.

Tsevdos.com - Javascript on

Tsevdos.com - Javascript off

Αντίθετα στο site του Pop+Rock εάν δεν έχετε την Javascript ενεργοποιήμένη δεν δουλεύει το κεντρικό μενού του site! Το συγκεκριμένο λάθος προκαλεί και πολλά SEO προβλήματα που έχω αναφέρει σε παλιότερο post (Ποτέ μην χρησιμοποιείτε μενού φτιαγμένα από Flash ή Javascript).

Pop+Rock - Javascript on

Pop+Rock - Javascript off

Απενεργοποιείστε την CSS

Με αυτόν τον τρόπο θα καταλάβενετε πως φαίνεται πραγματικά το document σας, τόσο στους text-only browsers και στους screen readers, όσο και στα bots των μηχανών αναζήτησης! H παρακάτω εικόνα παρουσιάζει το blog μου, χωρίς καθόλου styles. Όπως παρατηρείτε, το document δεν έχει χάσει απολύτως τίποτα ούτε σε περιεχόμενο ούτε σε δομή, ενώ συνεχίζει να είναι προσβάσιμο σε όλους! Το μόνο που έχει χάσει είναι τα styles του, τα οποία του δίνουν την τελική μορφή του…

Tsevdos.com - CSS off

Αυξήστε το text-size από τον browser σας

Απλό αλλά σημαντικό τεστ. Απλά αυξήστε το text-size στον browser σας τουλάχιστον δύο φορές (πατώντας Ctrl + +). Εάν το site δεν αλλοιώνεται πολύ και γενικότερα το αποτέλεσμα είναι ικανοποιητικό τότε δεν υπάρχει κανένα πρόβλημα. Εάν το site παραμορφώνεται αρκετά, χάνεται κείμενο πίσω από άλλα elements, κτλ., τότε θα πρέπει να ξανασκεφτούμε κάποιες αποφάσεις που πήραμε κατά την δημιουργία του design μας…

Κάντε validate τον κώδικα σας

Σαν τελικό τεστ, και γενικότερα όποτε τελειώνετε κάποιο site ή template, όσο μεγάλο ή μικρό και να είναι, κάντε μια επίσκεψη στους (X)HTML και CSS validators, και διορθώστε τα προβλήματα που μπορεί να εμφανιστούν κατά το validation… Όσο πιο γρήγορα αποφασίσετε να το κάνετε, τόσο πιο εύκολα και γρήγορα θα επιλύσετε αυτά τα προβλήματα! Και μην ξεχνάτε, valid κώδικας σημαίνει πιο σταθερά και ποιοτικά site, τα οποία θα αντέχουν στον χρόνο!

Η παραπάνω διαδικασία θα σας βοηθήσει να εντοπίσετε πάρα πολύ γρήγορα σχεδόν όλα accessibility προβλήματα που μπορεί να έχει το site σας! Καθόλου άσχημα δηλαδή για τα μόλις 10 λεπτά χρόνου που θα ξοδέψετε! Από εκεί και πέρα μένει να επιλύσετε τα προβλήματα που εντοπίσατε, όπου φυσικά είναι και το δύσκολο αλλά απαραίτητο βήμα έτσι ώστε να κάνετε προσβάσιμο (accessible) το site σας. Ελπίζω τα παραδείγματα οπού ανέφερα να ήταν σαφή και κατανοητά, μιας και ο ελληνικός κυβερνοχώρος χρειάζεται αρκετή δουλειά ακόμα στο θέμα accessibility… Μείνετε συντονισμένοι λοιπόν για να κάνουμε το internet μια πιο σταθερή και λειτουργική πλατφόρμα!

Styling comments : Tsevdos.com way

Είχα υποσχεθεί πως θα παρουσιάσω μερικά features του νέου μου theme για τα οποία αισθάνομαι περήφανος, όχι επειδή είναι πολύπλοκα, αλλά ακριβώς επειδή δεν είναι 😉 . Μάλλον μπέρδεψα αρκετούς ήδη, οπότε ας ρίξουμε μια ματιά στα σχόλια/comments του blog που διαβάζεται, αλλά και τους στόχους που ήθελα να πετύχω.

Τα σχόλια/comments στο blog μου λοιπόν, ήθελα να είναι απλά, μινιμαλιστικά (όπως και το υπόλοιπο design άλλωστε), ευανάγνωστα και σημασιολογικά σωστά! Ας ξεκινήσουμε από το τελευταίο λοιπόν, το οποίο έχει να κάνει μόνο με την ταπεινή μας markup (XHTML). Για να βάλουμε τα πράγματα σε μία σειρά λοιπόν, τα σχόλια δεν είναι τίποτα παραπάνω από μια (μεγάλη πολλές φορές) λίστα. Επειδή η συγκεκριμένη λίστα λοιπόν, έχει και κάποια σειρά (1ο σχόλιο, 2ο σχόλιο, κτλ.), αποφάσισα να χρησιμοποιήσω σαν βάση της markup μια αριθμημένη λίστα (ή αλλιώς ordered list)! Από εκεί και πέρα το κάθε στοιχείο της λίστας (list item) μπορεί να χωριστεί σε περαιτέρω κομμάτια όπως το όνομα του σχολιαστή, το κείμενο/σχόλιο του καθώς και οποιαδήποτε extra πληροφορία θέλουμε να συμπεριλάβουμε, όπως πχ. ημερομηνία και ώρα. Στο παρακάτω markup snippet λοιπόν, μπορείτε να δείτε την λίστα των σχολίων/comments σε όλο της το μεγαλείο! Όπως βλέπετε το κάθε list item είναι και ένα σχόλιο, ενώ μέσα σε αυτό υπάρχουν divisions (divs) με συγκεκριμένες κλάσεις (classes), για τον σχολιαστή (author_meta), το κείμενο του σχολίου (comment_body) καθώς και κάποιες extra πληροφορίες για το σχόλιο όπως ημερομηνία και ώρα ανάρτησης του (comment_meta). Τέλος, όλα αυτά είναι τοποθετημένα μέσα σε ένα div με το γενικό id “comments”.


  1. Comment body goes here.

  2. Comment body goes here.

Εφόσον λοιπόν έχουμε την βάση μας (markup) έτοιμη και σημασιολογικά σωστή, θα προσπαθήσουμε να παρουσιάσουμε το περιεχόμενο της όσο καλύτερα γίνεται, έτσι ώστε να ταιριάζει με το υπάρχον design μας, αλλά και χωρίς να αναγκαστούμε να χαλάσουμε την markup μας για χάρη του design… Έτσι με μερικούς απλούς και κατανοητούς CSS κανόνες, μπορούμε πολύ εύκολα να πετύχουμε τον στόχο μας.


a { font-size: 0.8em; font-family: Tahoma, Verdana,  sans-serif; }
a:link { color: #2EA0C6; }
a:visited { color: #7d7f81; text-decoration: underline; }
a:hover, a:active { color: #ff6d1e; text-decoration: none; }

#comments {
margin: 2em 1em 1em;
}

#comments ol {
padding: 0;
list-style-type: none;
}

#comments ol li {
margin: 1em 0 0;
padding: 1em;
list-style-type: none;
border: 1px solid #ccc;
}

#comments ol li:hover {
border: 1px solid #333;
}

#comments ol li.alt {
background: #f0f0f0;
}

#comments ol li .author_meta {
font-size: 1.1em;
font-weight: bold;
}

#comments ol li .comment_body {
clear: right;
}

#comments ol li .comment_meta {
text-align: right;
}

Ο CSS κώδικας που μόλις παρουσίασα είναι πανεύκολος, ωστόσο θα ήθελα να σταθώ σε 2 σημεία.

  • Το πρώτο είναι το hover state του list item (#comments ol li:hover). Όπως ξέρουμε τα επήσιμα standards διατυπώνουν πως οποιοδήποτε element μπορεί να έχει hover state (και γενικότερα οποιαδήποτε ψευδό-κλάση), ωστόσο ο Internet Explorer 6 (και οι παλιότερες εκδόσεις του), υποστηρίζουν την συγκεκριμένη ψευδό-κλάση μόνο στα anchor (a) elements. Το εφέ μας λοιπόν θα παίξει σε όλους τους browsers κανονικά, εκτός από τον ΙΕ6 και τις παλιότερες εκδόσεις του, κάτι που προσωπικά δεν με ενοχλεί και τόσο, μιας και οι συγκεκριμένοι χρήστες το μόνο που θα χάσουν είναι ένα απλό εφεδάκι και τίποτα παραπάνω.
  • Το δεύτερο σημείο που θέλω να εστιάσω λίγο την προσοχή σας, είναι η κλάση alt (#comments ol li.alt) η οποία δίνει σε κάθε δεύτερο list item ένα διαφορετικό background color. Την συγκεκριμένη κλάση την προσθέτει εύκολα το WordPress, ωστόσο είναι πολύ εύκολο να κάνετε το ίδιο με οποιαδήποτε πλατφόρμα αλλά και server-side τεχνολογία.

Όπως μπορείτε να δείτε και από το παρακάτω screenshot, η λίστα με τα comments μας δεν είναι καθόλου άσχημη για τον κώδικα που γράψαμε, ωστόσο κάτι της λείπει…

comments screenshot 1

Αυτό που έχασε η λίστα μας κατά το styling, ήταν η αριθμητική αίσθηση των comments (list-style-type: none;), κάτι που θα αρέσει σε πολλούς, ωστόσο προσωπικά θα ήθελα να δημιουργήσω κάτι ανάλογο. Γι’ αυτόν ακριβώς τον λόγο θα χρησιμοποιήσω το jQuery, την αγαπημένη μου Javascript library, έτσι ώστε να δώσω πίσω στην λίστα των comments μας αυτό που έχασε, την αριθμητική συνέχεια! Φορτώνουμε λοιπόν το jQuery (σημείωση στο παράδειγμα μας χρησιμοποιώ την έκδοση 1.2.6, ωστόσο δεν θα έχετε πρόβλημα ούτε με παλιότερες, ούτε με νεότερες εκδόσεις του) στην σελίδα μας και ξεκινάμε!





Ο παραπάνω Javascript κώδικας (λέμε τώρα), αν και θα παραξενέψει ακόμα και έμπειρους developers της Javascript στην πραγματικότητα είναι πανεύκολος, αρκεί να καταλάβεται λίγο πως λειτουργεί το jQuery. Όλος ο κώδικας του jQuery λοιπόν ξεκινάει όταν το DOM (Document Object Model) της web σελίδας μας είναι έτοιμο :


$(document).ready(function (){
//code goes here...
});

Μόλις ο browser φορτώσει όλο το DOM λοιπόν, πολύ απλά επιλέγω όλα τα list items ($(‘#comments ol li’).each) και εκτελώ σε όλα, μία function. Αρχικά αυξάνω τον counter με το όνομα i (i++;) έτσι ώστε το πρώτο list item να έχει τον αριθμό 1, το δεύτερο τον αριθμό 2 κοκ., και στην συνέχεια δημιουργώ μία variable με το όνομα node, η οποία είναι ένα απλό string το οποίο περιέχει HTML κώδικα, και πιο συγκεκριμένα περιέχει τον αριθμό του counter μέσα σε ένα span element με την κλάση (class) “comment_number”. Τέλος και με την βοήθεια του jQuery απλά προσθέτω το node που μόλις δημιουργήσα στην αρχή κάθε list item.


i++;
var node = '' + i + '<\/span>';
$(this).prepend(node);

Αυτές οι 3 γραμμές κώδικα θα αναλάβουν να ζωντανέψουν κι άλλο την λίστα μας! Η συγκεκριμένη web τεχνική ονομάζεται DOM injection, μιας και το νέο element που προσθέσαμε στην σελίδα μας, δεν υπάρχει πουθενά στην markup μας, αλλά το προσθέσαμε με την βοήθεια της Javascript και του DOM (DOM scripting).

Styling comments screenshot 2

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


#comments ol li .comment_number {
color: #ccc;
font-size: 2.5em;
font-weight: bold;
line-height: 1em;
float: right;
}

#comments ol li.alt .comment_number {
color: #fff;
}

Το τελικό αποτέλεσμα μπορείτε να το δείτε παρακάτω, ενώ φυσικά υπάρχει διαθέσιμος και ολόκληρος ο κώδικας (γι’ αυτούς που βαριούνται να τον γράφουν από την αρχή)! Μην ξεχάσετε μόνο να κατεβάσετε το jQuery και να το προσθέσετε στον παρακάτω κώδικα (line 06).

Styling comments screenshot 3





Styling comments : Tsevdos.com way






  1. Comment body goes here.

  2. Comment body goes here.

  3. Comment body goes here.

  4. Comment body goes here.

Όπως είδατε, τα comments στο blog μου δεν κάνουν χρήση μαγικών ή περίεργων τεχνολογιών, αλλά αντίθετα είναι ένας απλός συνδυασμός markup, CSS και Javascript. Τώρα θα με ρωτήσει κάποιος, γιατί είμαι περήφανος για το συγκεκριμένο κομμάτι του blog και γιατί διάλεξα να παρουσιάσω αυτό και όχι κάτι πιο πολύπλοκο. Η απάντηση, είναι πως ο παραπάνω κώδικας είναι σημασιολογικά σωστός, δηλαδή κάνει χρήση των σωστών markup tags καθώς επίσης χρησιμοποιεί σωστά ονόματα στα ids και τις κλάσεις (classes) που περιέχει, ενώ ταυτόχρονα κάνει και χρήση της τεχνικής progressive enhancement. Το τελευταίο, με απλά λόγια σημαίνει πως το περιεχόμενο είναι προσβάσιμο από όλους χρήστες με οποιονδήποτε browser, screen reader, κτλ., ενώ όσο πιο προηγμένο browser έχει στην διάθεση του ο χρήστης, τόσο πιο όμορφο θα είναι το τελικό αποτέλεσμα. Έτσι κάποιος χρήστης με screen reader ή text-only browser θα διαβάσει μια καθαρή και κατανοητή λίστα η οποία βγάζει νόημα, κάποιος χρήστης με επιπλέον δυνατότητα stylesheets θα δει ένα όμορφο αποτέλεσμα στον browser του (και όσο πιο σύγχρονο browser έχει, τόσο πιο πολλά style-based εφέ θα δει), ενώ τέλος εάν υπάρχει και η Javascript διαθέσιμη στην μηχανή rendering, ο χρήστης θα καταφέρει να δει και τον αριθμό του κάθε σχολίου που υπάρχει! Όλοι θα είναι χαρούμενοι και το σημαντικότερο φυσικά είναι πως όλοι θα έχουν πρόσβαση στο περιεχόμενο των comments!

Ελπίζω να εξήγησα καλά τόσο το παραπάνω (απλό?) παράδειγμα όσο και την θεωρεία που κρύβεται πίσω από κάθε επιλογή που έκανα. Καθημερινά ο κάθε web designer πρέπει να πάρει άπειρες τέτοιες αποφάσεις, και πραγματικά στην αρχή είναι πολύ δύσκολο να ξεχωρίσεις τι είναι σωστό και τι όχι, αλλά και να εξηγήσεις σε κάποιον γιατί επέλεξες την συγκεκριμένη λύση έναντι κάποιας άλλης. Σιγά-σιγά όμως τα πράγματα ξεκαθαρίζουν, και η παραπάνω διαδικασία γίνεται δεύτερη φύση! Όσοι θέλετε και άλλα ανάλογα παραδείγματα απλά μείνετε συντονισμένοι και δεν θα χάσετε 😉 .

Update : Το τελικό αποτέλεσμα μπορείτε να το δείτε ζωντανά εδώ.

Πως να κάνετε το site σας πιο γρήγορο : Ο απόλυτος οδηγός για site optimization

Από καιρό ήθελα να γράψω αυτό το αρθράκι, απλά ήθελα να κάνω περισσότερο και καλύτερο research πάνω στο θέμα, έτσι ώστε να δοκιμάσω περισσότερα εργαλεία και να συστήσω μόνο τα καλύτερα! Ας ξεκινήσουμε όμως από τα βασικά και να πάρουμε τα πράγματα από την αρχή… Όταν γράφουμε ένα URL στον browser μας έτσι ώστε να επισκεφθούμε κάποια σελίδα, αυτός συλλέγει πολλές πληροφορίες και εκτελεί διάφορες εργασίες πριν εμείς δούμε την τελική σελίδα (document). Φυσικά όσο πιο γρήγορη είναι η σύνδεση μας (σε επίπεδο download, μιας και το upload είναι ένα απλό http request) τόσο πιο γρήγορα ο browser θα καταφέρει να συλλέξει και να εκτελέσει τις εργασίες που θα αναλύσουμε πιο κάτω. Σε αυτό το σημείο πολλοί web experts δεν δίνουν την απαιτούμενη σημασία μιας και υποστηρίζουν πως οι γρήγορες συνδέσεις βρίσκονται παντού – πλέον και στην Ελλάδα – ωστόσο αυτό δεν σημαίνει πως δεν μπορούμε να κάνουμε κάτι καλό ακόμα καλύτερο ή στην περίπτωση μας κάτι γρήγορο ακόμα πιο γρήγορο! Τα δύο πολύ απλά επιχειρήματα που δίνω σε όσους μου προβάλουν το γρήγορο internet σαν δικαιολογία, είναι τα εξής :

  • Το να κάνεις ένα site να φορτώνει ακόμα πιο γρήγορα, χωρίς να του αλλάξεις τίποτα εμφανισιακά, δεν βλάπτει κανέναν (ούτε τους χρήστες με αργές, ούτε αυτούς με γρήγορες συνδέσεις)
  • Ξοδεύεις λιγότερα λεφτά σε web hosting μιας και αυτό που πληρώνεις (ακριβά) πλέον στο hosting είναι το transfered bandwidth, και όχι τα GB χώρου που χρησιμοποιείς (όπως ίσχυε κάποτε). Σε αυτό το επιχείρημα δείχνουν ακόμα περισσότερη προσοχή για κάποιο λόγο!

Ας εξηγήσουμε τώρα πως μπορούμε να κάνουμε το site μας πιο γρήγορο. Η πρώτη απάντηση σε αυτό το ερώτημα είναι η ελαχιστοποίηση των request στον server. Κάθε image, script, css αρχείο και γενικότερα όλα τα εξωτερικά αρχεία (flash, video, κτλ.) απαιτούν από τον browser να κάνει, για το καθένα ξεχωριστά, ένα request στον web server, να το κατεβάσει και τελικά να ενώσει όλα τα κομμάτια του παζλ και να κάνει render την web σελίδα! Τώρα θα μου πουν πολλοί, και με το δίκιο τους, καλέ ρε φίλε, δηλαδή να σταματήσουμε να βάζουμε images, css και scripts στο site μας? Και βέβαια όχι, αντιθέτως οι μοντέρνες web design τεχνικές το επιβάλουν, απλά να γνωρίζουμε τι και για ποιον λόγο το κάνουμε. Επίσης οι μοντέρνοι browser έχουν πολύ καλές caching τεχνικές έτσι ώστε εάν ένα image, script, stylesheet, κτλ. χρησιμοποιείται σε παραπάνω από μια σελίδα, χρησιμοποιούν το αρχείο που έχουν ήδη κατεβάσει (πχ. εάν έχει ήδη κατεβάσει το stylesheet του μενού και τα γραφικά/images του interface, δεν τα ξανακατεβάζει ξανά από την αρχή, αλλά χρησιμοποιεί τα ήδη υπάρχοντα από την cache memory του). Τι μπορούμε να κάνουμε εμείς, οι web experts, επιπλέον όμως? Πρώτα απ’ όλα optimization (βελτιστοποίηση) στον κώδικα μας! Code Optimization μπορεί να γίνει και στις δύο μεριές (server-side και client-side), ωστόσο στο συγκεκριμένο post δεν θα ασχοληθώ με server-side optimization (ο φίλος lexx έχει γράψει ένα ανάλογο άρθρο πάνω στο θέμα όπου περιγράφει και server-side optimization), μιας και εκτός από ότι αλλάζει ανάλογα με την server-side τεχνολογία που χρησιμοποιείται (πχ. PHP, Ruby, κτλ.), πρέπει αυτός που θα αναλάβει την συγκεκριμένη εργασία, να είναι πολύ έμπειρος και να γνωρίζει πάρα πολύ καλά το πώς δουλεύει η συγκεκριμένη τεχνολογία, ο server που την φιλοξενεί αλλά και η βάση δεδομένων που την στηρίζει!

Ερχόμαστε λοιπόν στην client-side μεριά όπου μπορούμε να κάνουμε πολλά και ενδιαφέροντα πράγματα… Πρώτα απ’ όλα μπορούμε να ελαχιστοποιήσουμε τα requests των style μας χρησιμοποιώντας όσο των δυνατών λιγότερα CSS αρχεία γίνεται, όπως για παράδειγμα ένα κεντρικό αρχείο που θα περιλαμβάνει όλα τα style μας, ή έστω 2 – 3 εάν υπάρχουν και styles μόνο για τον IE, για print, κτλ. Αυτό με ακόμα πιο απλά λόγια σημαίνει πως καλό θα είναι να περιορίσουμε στο ελάχιστο τα stylesheet που κάνουμε link στην markup μας χρησιμοποιώντας το

<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">

αλλά και στα ίδια τα styles χρησιμοποιώντας τον

@import "styles/typography.css";

κανόνα.

Οι ακόμα πιο σκληροπυρηνικοί μπορούν να χρησιμοποιήσουν και κάποιον από τους παρακάτω CSS optimizers, έτσι ώστε να συμπιέσουν τους CSS κανόνες τους ακόμα περισσότερο!

Από κάποια γρήγορα τεστ προτείνω τον πρώτο optimizer, μιας και σε μερικές περιπτώσεις μείωσε το file size των CSS αρχείων έως και 50% (!!!), ωστόσο αυτό το ποσοστό αλλάζει ανάλογα με το στυλ του κώδικα που γράφεται αλλά και με το πόσο επαναλαμβάνεστε στους CSS κανόνες σας. Όπως και να έχει ρίξτε τους μια ματιά. Σε αυτό το σημείο να σημειώσω πως χρησιμοποιώντας κάποιον CSS optimizer δεν θυσιάζουμε τίποτα, πέρα από την ευαναγνωστηκότητα (readability) του κώδικα σας.

Οι τεχνικές που ανέφερα στα CSS αρχεία, μπορούν να εφαρμοστούν και στα Javascript αρχεία μας! Περιορίζουμε δηλαδή τα πολλά requests κρατώντας σε όσο λιγότερα Javascript αρχεία γίνεται όλον τον Javascript κώδικα μας. Φυσικά εάν χρησιμοποιούμε κάποια Javascript library (όπως jQuery για παράδειγμα) linkάρουμε πάντα την compressed version της ενώ μπορούμε να κάνουμε optimized και τον δικό μας Javascript κώδικα, χρησιμοποιώντας κάποιον από τους παρακάτω Javascript optimizers.

Σε αυτό το σημείο θα ήθελα να σημειώσω πως όποιος ασχοληθεί με Javascript code optimization, πρέπει να είναι πάρα πολύ έμπειρος και προσεκτικός, μιας και πολλά script δεν έπαιζαν σωστά σε κάποιους browsers μετά το optimization! Εάν θα έπρεπε να διαλέξω κάποιον από τους παραπάνω optimizers, θα διάλεγα τον JSMin, του Douglas Crockford από το Yahoo!, ο οποίος απλά αφαιρεί το extra whitespace και τα comments αφήνοντας τα υπόλοιπα κομμάτια του κώδικα ανέπαφα.

Φυσικά για λόγους maintaining (συντήρησης) θα πρέπει να κρατάμε backup όλων των style και javascript αρχείων μας έτσι ώστε να μπορούμε εύκολα και γρήγορα να διαβάζουμε, ανανεώνουμε και γενικότερα να συντηρούμε τον κώδικα μας, οπότε πρέπει οπωσδήποτε να κρατάτε τα source αρχεία σας ανέπαφα, και να εφαρμόζουμε όλα τα παραπάνω μόνο σε επίπεδο παραγωγής, δηλαδή σε site που βρίσκονται στον αέρα (web server μας)!

Τέλος, εκτός από optimization στον CSS και Javascript κώδικα μας, μπορούμε χρησιμοποιήσουμε και HTTP Compression στον server μας, έτσι ώστε να κάνουμε το site μας ακόμα πιο γρήγορο! Η συγκεκριμένη τεχνική γίνεται σε επίπεδο web server (όπως πχ. Apache, IIS, κτλ.), όπου ο server κάνει compress τα δεδομένα (data) που στέλνει μέσω του HTTP πρωτοκόλλου. Έτσι εάν ο browser που χρησιμοποιεί ο client (χρήστης) επιτρέπει την συγκεκριμένη δυνατότητα – όλοι οι μοντέρνοι browsers μπορούν – ο server στέλνει τα δεδομένα συμπιεσμένα (συνήθως με το gzip), ενώ εάν ο client χρησιμοποιεί κάποιον παλιότερο σε browser ο οποίος δεν υποστηρίζει HTTP Compression, ο χρήστης λαμβάνει την κανονική μη συμπιεσμένη (uncompressed) version της σελίδας. Με την συγκεκριμένη τεχνική δεν πρόκειται να δημιουργήθει κανένα πρόβλημα ούτε στους παλιούς ούτε στους καινούργιους browsers, αφού οι χρήστες με καινούργιους browsers θα μπορούν να κατεβάζουν τις σελίδες έως και 40% γρηγορότερα, χωρίς να απορρίπτονται οι χρήστες με τους παλιότερους browsers, οι οποίοι θα συνεχίσουν να κατεβάζουν κανονικά (χωρίς compression) τις σελίδες σας!

Η τελευταία τεχνική ανήκει θεωρητικά στην server-side κατηγορία, μιας και γίνεται στον web server, ωστόσο επειδή είναι πολύ εύκολη στην υλοποίηση της (εάν έχουμε πρόσβαση στον server φυσικά), την αναφέρω σε αυτό το post. Όπως προανέφερα δεν επηρεάζει καθόλου την συμπεριφορά της client-side μεριάς (οι browser που υποστηρίζουν HTTP compression θα το χρησιμοποιούσουν, ενώ οι υπόλοιποι απλά θα το αγνοήσουν) ενώ η βελτίωση που βλέπουμε στην ταχύτητα φόρτωσης μιας σελίδας (document) είναι εμφανής!

Με τεχνικές που ανέφερα παραπάνω και φυσικά με τις κατάλληλες μοντέρνες και σύγχρονες web design τεχνικές μπορούμε να κάνουμε τα site μας να φορτώνουν πάρα μα πάρα πολύ πιο γρήγορα από το συνηθισμένο, και μάλιστα χωρίς να αλλάξουμε κάτι εμφανισιακά! Κανείς δεν θέλει να περιμένει μέχρι να φορτώσει η σελίδα που τον ενδιαφέρει, ενώ είναι γεγονός πως το αργό φόρτωμα των σελίδων είναι ο νούμερο ένα λόγος που κάνει τους χρήστες να εγκαταλείπουν κάποιο site! Οι παραπάνω τεχνικές είναι εύκολα υλοποιήσιμες ενώ όλα τα εργαλεία που περιγράφω προσφέρονται δωρεάν, οπότε δεν υπάρχει κάποια σοβαρή δικαιολογία στο να μην κάνετε το γρήγορο site σας ακόμα πιο γρήγορο!

Mapstraction: η library για χάρτες

Η Mapstraction είναι μία Javascript library, η οποία παρέχει ένα κοινό API για δημιουργία χαρτών σε όλα τα Javascript APIs που υπάρχουν εκεί έξω! Το παραπάνω με απλά λόγια σημαίνει πως μπορείτε να δημιουργήσετε εύκολα και γρήγορα κάποιον χάρτη από οποιαδήποτε μεγάλη υπηρεσία, όπως Google Maps, Yahoo! Maps, Microsoft Virtual Earth Maps και πολλά άλλα, χρησιμοποιώντας μόνο την Mapstraction library! Τώρα πολύ έξυπνα θα ρωτήσει κάποιος, και γιατί να μην χρησιμοποιήσεις κατευθείαν τα επίσημα API των άλλων εταιρειών? Για δύο πολύ σημαντικούς λόγους :

  1. Μαθαίνοντας μόνο μία library μπορείς να την χρησιμοποιήσεις σε όλα τα map APIs εκεί έξω, άρα μαθαίνεις μία library και την χρησιμοποιείς σε όλα!
  2. Εάν το αφεντικό/πελάτης σας αλλάξει γνώμη τελευταία στιγμή για την υπηρεσία χάρτη που θέλει να έχει το site (πχ. αντί για Google Maps, του έρθει το Microsoft Virtual Earth Maps), δεν χρειάζονται αλλαγές στον κωδικά! Το μόνο που αλλάζει είναι μια γραμμή που υποδηλώνει την υπηρεσία που θα χρησιμοποιείτε!

Όποιοι δουλεύεται με χάρτες σε projects, σκεφτείτε σοβαρά την συγκεκριμένη πρόταση, γιατί σίγουρα θα σας λύσει τα χέρια!

HTML 5 και XHTML 2: ο νέος πόλεμος στο web

Έτσι όπως εξελίσσεται η κατάσταση, ο νέος πόλεμος στο web δεν θα γίνει ανάμεσα σε browsers αλλά σε τεχνολογίες (υπάρχει και η πιθανότητα να συνεχιστεί και στους browsers, αλλά το πρόβλημα θα προκύψει από τις τεχνολογίες που θα αποφασίσουν να υποστηρίξουν)! Αυτήν την στιγμή λοιπόν, οι αντικαταστάτες της κλασικής μας (X)HTML markup είναι δύο, και μάλιστα με αρκετές διαφορές τόσο στον κώδικα (elements, attributes, κτλ.) όσο και στην φιλοσοφία τους. Φυσικά κάνω λόγο για την HTML 5 και την XHTML 2 οι οποίες βρίσκονται αυτήν την στιγμή σε κατάσταση working drafts, πράγμα που σημαίνει ότι θα καθυστερήσουν αρκετά να ολοκληρωθούν και ακόμα πιο πολύ να τις υποστηρίξουν οι διάφοροι browsers, αλλά όπως και να έχει η ερώτηση είναι εξής : Πως προέκυψαν δύο web standards για την ίδια δουλεία?!?!

Καλύτερα να τα πάρουμε τα πράγματα από την αρχή. Στην αρχή λοιπόν τα πράγματα ήταν πολύ απλά με την HTML 1 να είναι η μοναδική markup στον internet, απόγονος της πολύ παλιάς αλλά και δοκιμασμένης SGML. Επειδή σιγά-σιγά το internet άρχισε να γίνεται πιο διάσημο και mainstream λοιπόν, κάποιοι, κατασκευαστές browser κυρίως, άρχισαν να προσθέτουν επιπλέον presentational (παρουσιαστικά) tags και ιδιότητες στην λιτή HTML και να χαλάνε την δομή της (structure) με αυτά, όπως font tags, nested tables, και πολλά άλλα, ενώ η κατάσταση είχε ξεφύγει τελείως από το W3C που δρούσε σαν απλός παρατηρητής. Μετά λοιπόν από τις HTML version 2 και 3, και τον πόλεμο τον browsers που υπήρχε μέχρι και εκείνη την στιγμή, κάποιοι developers όπως ο Jeffrey Zeldman, ο Eric Meyer, και πολλοί άλλοι, αποφάσισαν να πείσουν όλους τους υπόλοιπους, developers και κατασκευαστές browser να χρησιμοποιούν τα επίσημα standards του W3C για την δημιουργία web sites! Είναι η περίοδος που η HTML 4.01 είναι η νεότερη έκδοση της markup για το internet, ενώ έχει ήδη αρχίσει να χρησιμοποιείται από τους πιο σκληροπυρηνικούς και ψαγμένους η νέα XHTML όπου είναι στην ουσία η κλασική HTML 4 αναδιατυπωμένη σαν XML (δεν ήξερα πως αλλιώς να μεταφράσω το reformulation!). Η μεγάλη διαφορά της XHTML με την HTML είναι πως προσπαθεί να συμμαζέψει το περιεχόμενο (content) σε μια ακόμα καθαρότερη δομή (structure), άλλοτε με πιο αυστηρούς κανόνες και άλλοτε όχι – ανάλογα με το doctype – και να αφήσει το παρουσιαστικό (presentation) κομμάτι σε άλλη τεχνολογία, την CSS. Με αυτόν τον τρόπο η markup θα ξαναχρησιμοποιηθεί για τον λόγο που είχε εφευρεθεί, την σωστή δομή του περιεχομένου δηλαδή!

Στην συνέχεια έρχεται μια μεταβατική περίοδος στο web, όπου τα μεγάλα site έχουν φτάσει τις συγκεκριμένες τεχνολογίες στα όρια τους και χρειάζονται κάτι πιο δυνατό για το Web 2.0 το οποίο έχει ήδη αρχίσει να δημιουργείται. Κάπου εδώ ξεκινάει και το μπέρδεμα. Το επίσημο W3C ξεκινάει λοιπόν το draft της XHTML 2, όμως κάποιοι ανεξάρτητοι – κατασκευαστές browser, web developers, ανεξάρτητοι οργανισμοί κτλ. – δημιουργούν την WHATWG community και ξεκινάνε το draft της HTML 5 (και των Web Forms 2.0), το οποίο μετά από κάποιο καιρό το παραδίδουν στο W3C και γίνεται και αυτό επίσημο standard! Έτσι αυτήν την στιγμή έχουμε δύο επίσημους διαδόχους τις (X)HTML οι οποίοι μάλιστα έχουν πάρει και αρκετά διαφορετικές κατευθύνσεις σε θέματα αρχιτεκτονικής και σχεδιασμού!

Αυτήν την στιγμή κανένα από τα δύο recomendations δεν είναι επίσημο ή έχει περισσότερη υποστήριξη, αλλά το μπέρδεμα έχει ήδη γίνει και μάλιστα είναι πολύ μεγάλο! Καταρχάς, τι θα γίνει εάν κάποιοι browsers επιλέξουν να υποστηρίξουν ένα από τα δύο standards (extreme σενάριο, αλλά ας μην ξεχνάμε πως ακόμα κάποιοι browsers προσπαθούν να υποστηρίξουν standards 7 χρόνων παλιά!). Επίσης τι θα γίνει σε development επίπεδο, όπου κάποια site θα υποστηρίξουν την μία markup και κάποια την άλλη? Όπως ανέφερα οι markup είναι πολύ διαφορετικές μεταξύ τους, ενώ η HTML 5 έρχεται και με διάφορα Javascript APIs για ευκολότερο development σε αυτήν, το οποίο όμως μπορεί να μπερδέψει πολλούς developers (ιδιαίτερα νέους), αλλά και κατασκευαστές browsers, οι οποίοι θα πρέπει να ενσωματώσουν στους καινούργιους browsers πολλά νέα APIs. Και σαν να μην έφταναν τα παραπάνω μπερδέματα, το θέμα μπορεί να γίνει και ακόμα πιο περίπλοκο μιας και η HTML 5 για παράδειγμα (στην οποία έχω ρίξει μια καλύτερη ματιά), έχει ήδη δύο parsing modes, ένα σαν HTML και ένα σαν XML, με το πρώτο να είναι πιο συμβατό με παλιότερους browsers ενώ το δεύτερο η αυστηρότερη έκδοση του και χρήση του σαν XML εφαρμογή! Υποθέτω πως και η XHTML 2 θα έχει ανάλογες επιλογές για parsing.

Όπως εύκολα μπορεί να καταλάβει ο μέσος web developer/designer, η κατάσταση είναι αρκετά μπερδεμένη, ενώ εντύπωση μου κάνει πως κανένας επίσημος φορέας, όπως το W3C ή άλλοι μεγάλοι οργανισμοί και guru, δεν έχουν κάνει κανένα σχόλιο πάνω σε αυτό το σημαντικότατο θέμα. Για την ακρίβεια δεν το έχουν θίξει καν! Ξέρω πως και οι δύο τεχνολογίες έχουν πολύ δρόμο ακόμα να διανύσουν, ο Lachlan Hunt στο άρθρο του A Preview of HTML 5 υπολογίζει πως η HTML 5 θα χρειαστεί περίπου άλλα 10 με 15 χρόνια (άρα άλλα τόσα θα χρειαστεί και η XHTML 2), αλλά γιατί να μην γινόντουσαν τα πράγματα πιο απλά για όλους μας ?!?! Ελπίζω η κατάσταση να αλλάξει σύντομα και το τοπίο να ξεκαθαρίσει στο συγκεκριμένο θέμα έτσι ώστε να βοηθηθούν όλοι και να παρθούν γρηγορότερα κάποιες αποφάσεις, γιατί η αλήθεια είναι πως όλοι μας χρειαζόμαστε μια νέα markup! Πολλές ενδιαφέρουσες απόψεις πάνω στο θέμα μπορεί κάποιος να βρει στο άρθρο της IBM, HTML V5 and XHTML V2, ενώ το καινούργιο άρθρο του A List Apart έχει ένα αναλυτικό preview στην HTML 5, και φυσικά για τους πιο σκληροπυρηνικούς υπάρχουν και τα επίσημα drafts.

H Yahoo! UI Library προσθέτει selector utility

Η γνωστή effects, Ajax και γενικότερα UI (user interface) library της Yahoo! απέκτησε ένα ολοκαίνουργιο selector utility το οποίο αντιγράφει την μέθοδο επιλογής του jQuery στην Yahoo! UΙ library! Έτσι χρησιμοποιώντας κάποιος την library της Yahoo! μπορεί πλέον να επιλέξει κάποιο element με τον γνωστό jQuery τρόπο :

var p_nodes = YAHOO.util.Selector.query('p');

Όπως φαίνεται όλες οι Javascript/AJAX libraries έχουν αρχίσει να καταλαβαίνουν πόσο δυνατό είναι το jQuery στον συγκεκριμένο τομέα και προσπαθούν να το εντάξουν στην εκάστοτε library τους. Προσωπικά θα συνεχίσω να χρησιμοποιώ το jQuery γιατί εκτός από το ότι είναι απλό, με πολλές δυνατότητες και πολύ εύκολο στην εκμάθηση, είναι και πολύ πιο ελαφρύ σε file size συγκρινόμενο με άλλες libraries (ιδιαίτερα με την Yahoo! UΙ library).

Microsoft Visual Studio 2008

Η καινούργιες εκδόσεις του Microsoft Visual Studio και του .NET Framework είναι έτοιμες εδώ και μία εβδομάδα περίπου, και φυσικά οι λάτρεις των Microsoft τεχνολογιών έχουν πολλούς λόγους να χαίρονται. Με περισσότερα από 250 νέα χαρακτηριστικά για όλες τις εκδόσεις του Visual Studio 2008 (σύμφωνα με την Microsoft πάντα) και το πολύ βελτιωμένο και AJAX-ready .ΝΕΤ 3.5 η Microsoft συνεχίζει την καλή παράδοση που έχει στα Rapid Application Development Tools. Μερικά ενδιαφέροντα χαρακτηριστικά περιλαμβάνουν :

  • ASP.NET AJAX. Εγγενής υποστήριξη AJAX (δεν χρειάζεται να κατεβάσετε ξεχωριστή library) και με πολλά ενδιαφέροντα χαρακτηριστικά όπως JavaScript Intellisense, JavaScript Debugging, ASP.NET AJAX Control Extender Support και JavaScript Intellisense για Silverlight.
  • Visual Studio 2008 Multi-Targeting Support, το οποίο πολύ απλά σημαίνει πως το καινούργιο Visual Studio μπορεί να ανοίξει, να κάνει edit και re-built, ήδη υπάρχοντα project γραμμένα σε παλιότερα .ΝΕΤ frameworks, όπως .NET 2.0 και ASP.NET 2.0 (με η χωρίς ASP.NET AJAX 1.0).
  • VS 2008 Web Designer και CSS Support, το οποίο χρησιμοποιεί την πολύ καλή μηχανή δημιουργίας (X)HTML και CSS του Expression Web.
  • LINQ, όπου είναι η νέα και πολλά υποσχόμενη Query Language της Microsoft (από το Language-INtegrated Query). Φυσικά έχουν γίνει και πολλές βελτιώσεις στην υπάρχον SQL και SQL server.
  • Πολλές άλλες βελτιώσεις μικρότερου ενδιαφέροντος (για εμένα τουλάχιστον), όπως καλύτερο Silverlight integration και tools, πολλές βελτιώσεις στο WPF (Windows Presentation Foundation) και πολλά άλλα.

Το Microsoft Visual Studio 2008 έρχεται σε 4 εκδόσεις (Visual Studio 2008 Professional Edition, Visual Studio Team System 2008 Team Suite, Visual Studio Team System 2008 Team Foundation Server και Visual Studio Team System 2008 Test Load Agent) τις οποίες μπορείτε να δοκιμάσετε για 90 μέρες, ενώ για τους πιο ερασιτέχνες και φοιτητές προγραμματιστές υπάρχουν και οι δωρεάν εκδόσεις του Visual Studio 2008 με το όνομα Express Edition. Γενικότερα το νέο Visual Studio 2008 φαίνεται αρκετά ανανεωμένο, ενώ η Microsoft δείχνει να αλλάζει νοοτροπία και να κάνει όλο και πιο πολλά βήματα προς τα web standards (και στον browser της αλλά και στα development tools της). Μιας και το Visual Studio δείχνει να κάνει αρκετά βήματα προς τα εκεί, ελπίζω να συνεχίσει και ο Internet Explorer 8 σε αυτόν τον δρόμο…