Microsoft Small Basic

Πολύ μου άρεσε η κίνηση της Microsoft να δημιουργήσει και να προσφέρει δωρεάν την Small Basic. Όπως καταλαβαίνετε και από τον τίτλο, πρόκειται για μια έκδοση της Basic ειδικά φτιαγμένη για λιλιπούτειους προγραμματιστές! Μετά από ένα γρήγορο installation ξαναθυμήθηκα ωραίες εποχές και πιο συγκεκριμένα την Logo, ναι το παιχνίδι με την χελώνα, όπου έτρωγα άπειρες ώρες μικρός προσπαθώντας να ζωγραφίσω (σε DOS τότε)!!! Συστήνεται ανεπιφύλακτα σε όσους έχουν παιδιά και θέλουν να τα ωθήσουν/εθίσουν στον προγραμματισμό!

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!!! 😉 )…

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 για να το κάνει…

GotAPI reference site

Όσοι από εσάς δεν τα πάνε καλά με τις σελίδες A4 και τα cheetsheets (όλο χάνονται, ποτέ δεν τα βρίσκεις όταν τα χρειάζεσαι, κτλ.) ή απλά έχουν οικολογικές ευαισθησίες, ας ρίξουν μια ματιά στο gotAPI.com! To εν λόγω site πρόκειται για ένα καταπληκτικό reference site, το οποίο προσφέρει ουσιαστικό reference σε πάρα πολλές τεχνολογίες, από απλή HTML και CSS μέχρι AJAX libraries και custom APIs (όπως το Flickr API). Πολύ βολικό για όλους εμάς, μιας και σε μία μόνο σελίδα μπορείς να προσθέσεις όλες τις τεχνολογίες που δουλεύεις και να έχεις πανεύκολα γρήγορο reference αλλά και παραδείγματα τους!!! Εμένα βρίσκεται πλέον μονίμως ανοιχτό σε κάποιο tab του Firefox…