Η απόλυτη λίστα web accessibility και usability υπηρεσιών

Το Virtual Hosting blog δημιούργησε την πιο ολοκληρωμένη λίστα δωρεάν web accessibility και usability υπηρεσιών που έχω βρει μέχρι τώρα! Το post είναι εξαιρετικό, με αρκετές λεπτομέρειες για την κάθε υπηρεσία, και είναι must για όλους όσους ασχολούνται σοβαρά με το web design. Ετοίμαζα και εγώ κάτι σχετικό, αλλά πλέον δεν υπάρχει λόγος να ξαναγράφω τα ίδια πράγματα…

Δωρεάν On-line Flash editor

Μετά τους on-line HTML editors καιρός ήταν να δούμε και τον πρώτο on-line, και δωρεάν πάντα, Flash editor, με το όνομα Sprout. Αν και δεν δοκίμασα ακόμα την εν λόγω υπηρεσία, η ιδέα είναι η δημιουργία μικρών Flash εφαρμογών κατευθείαν στον browser (χωρίς την ανάγκη ύπαρξης του Adobe Flash με λίγα λόγια) και στη συνέχεια το μοίρασμα αυτών των εφαρμογών οπουδήποτε, κάνοντας embed τον κώδικα που σας παρέχει το Sprout! Οι δυνατότητες που προσφέρει φαίνονται αρκετές (ιδιαίτερα για τον μέσο χρήστη), και σίγουρα αποτελεί μια πολύ απλή, εύχρηστη και γρήγορη λύση για μικρά Flashάκια που ζητάνε συνήθως οι πελάτες. Είναι ήδη στα bookmarks μου και θα το κοιτάξω και πιο προσεκτικά! Viva Web 2.0!!!

Internet Explorer 8 και version targeting : Το μεγάλο λάθος της Microsoft

Και ενώ τα νέα που είχαμε στην διάθεση μας σχετικά με την νέα έκδοση του Internet Explorer ήταν παραπάνω από καλά, όπως την (σχεδόν) πλήρης υποστήριξη των web standards καθώς και το γεγονός ότι πέρασε με απόλυτη επιτυχία το ACID 2 test, ξαφνικά η Microsoft κάνει κατά την γνώμη μου την χειρότερη κίνηση στο να εκμεταλλευτεί πλήρως όλα τα παραπάνω και να ξεπλύνει το κακό όνομα που έχει ο browser της! Ο λόγος είναι το λεγόμενο version targeting που θα χρησιμοποιήσει η εταιρεία στον Internet Explorer 8 το οποίο και βρίσκω πραγματικά ανούσιο και δεν καταλαβαίνω γιατί αποφασίστηκε ένας τέτοιος μηχανισμός επιλογής rendering μηχανής στον νέο browser και όχι κάτι πιο απλό και κατανοητό (και για τον απλό χρήστη και για τον developer). Στο A List Apart έχουν δημοσιευθεί δύο πολύ ενδιαφέροντα άρθρα πάνω στο θέμα, με το ένα να τίθεται υπέρ και το άλλο κατά του version targeting, με τίτλους “Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8” και “From Switches to Targets: A Standardista’s Journey“, τα οποία και συστήνω σε όλους τους web designers/developers.

Γιατί πιστεύω πως η Microsoft κάνει λάθος λοιπόν. Έχουμε και λέμε, η Microsoft μετά από πολλά χρόνια καταφέρνει να φτιάξει επιτέλους έναν πολύ αξιόλογο browser (Internet Explorer 8), ο οποίος και περνάει το διάσημο ACID 2 test, πράγμα που σημαίνει πως η rendering μηχανή του ανταποκρίνεται σωστά (ή έστω με πολύ μεγάλη ακρίβεια) στα web standards. Το λάθος της εταιρείας λοιπόν είναι πως αντί να χρησιμοποιήσει σαν default την καινούργια, web standards compliant rendering engine στον Internet Explorer 8, αποφασίζει να δώσει 3 rendering modes στον browser, ανάλογα με τον κώδικα που βρίσκει σε κάθε σελίδα, και πιο συγκεκριμένα :

  • Quirks mode” όπου θα χρησιμοποιείτε σε σελίδες με μη web standard κώδικα και θα είναι συμβατός με παλιό και μη ενημερωμένο περιεχόμενο.
  • Standards mode” όπου θα συμπεριφέρεται σαν το standards mode του Internet Explorer 7. Έτσι τα site με valid code θα γίνονται render όπως ακριβώς γίνονται στον Internet Explorer 7 και όχι με την καινούργια web standards compliant rendering engine του Internet Explorer 8!
  • Εάν θέλετε να χρησιμοποιήσετε την καινούργια web standards compliant rendering engine του Internet Explorer 8 θα πρέπει να χρησιμοποιήσετε ένα <meta> element!

To meta element που θα πρέπει να χρησιμοποιηθεί παρουσιάζεται στον είναι το παρακάτω code snippet,

<meta HTTP-equiv="X-UA-Compatible" content="IE=8">

με δυνατότητα επέκτασης και σε άλλους browsers και versions ως :

<meta HTTP-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4">

Και που είναι το πρόβλημα τώρα, θα αναρωτιέστε πολλοί. Τα πρόβλημα που βλέπω εγώ (και όχι μόνο) είναι το εξής. Γιατί θα πρέπει ο οποιοσδήποτε web designer/developer να δημιουργήσει ένα meta element για να χρησιμοποιήσει την καινούργια rendering μηχανή του ΙΕ8 σε valid κώδικα? – Αλλιώς όπως αναφέρω παραπάνω η default rendering engine που θα χρησιμοποιηθεί είναι αυτή του IE7! Καταλαβαίνω (σε αντίθεση με πιο σκληροπυρηνικούς) τον λόγο ύπαρξης ενός “Quirks mode” για την προβολή παλιού και μη valid περιεχομένου, αλλά από εκεί και πέρα η default rendering μηχανή σε valid σελίδες θα έπρεπε να είναι η καινούργια (αυτή του ΙΕ8) και όχι αυτή του ΙΕ7! Είναι σαν μια αναβάθμιση που στην ουσία για να χρησιμοποιήσει κάποιος θα πρέπει να κάνει κάποιο hack! Στην χειρότερη περίπτωση, εάν θέλανε τόσο πολύ να μην χαλάσουν κάποια site που λειτουργούν μια χαρά αυτήν την στιγμή σε ΙΕ7, ας κάνανε το αντίθετο, δηλαδή να δημιουργούσαν ένα meta element το οποίο θα ανάγκαζε τον IE8 να συμπεριφερόταν σαν ΙΕ7 (και όχι το αντίθετο)! Πραγματικά δεν μπορώ να καταλάβω γιατί η Microsoft πνίγεται σε μια κουταλιά νερό σε τέτοια θέματα. Θες να βγάλεις τον browser σου και να υποστηρίζεις όλες τις προηγούμενες και κακές υλοποιήσεις του, πολύ ωραία, κάντο, αλλά κάντο έξυπνα και προπαντός χωρίς να πηγαίνεις πίσω το καινούργιο προϊόν σου! Η πρόοδος έχει πάντα ένα μικρό κόστος και στην συγκεκριμένη περίπτωση θα ήταν πάρα πολύ μικρό σε σχέση με το γενικότερο κέρδος που θα είχε και από την web κοινότητα και από την development κοινότητα! Τέλος δεν μπορώ να καταλάβω γιατί εφόσον θέλει να υποστηρίξει τα κακογραμμένα sites που έχουν φτιαχτεί 5 και 10 χρόνια πριν, γιατί δεν κάνει ευκολότερη την ζωή και των χρηστών τέτοιων site αλλά και των developers, δίνοντας την επιλογή στον browser της να διαλέξει rendering μηχανή (μέσα από κάποιο μενού ας πούμε – όπως κάνουμε πχ. με το μενού encoding) ή έστω να επιτρέψει την εγκατάσταση διαφορετικών εκδόσεων του browser της στο ίδιο σύστημα!

Προσωπικά πιστεύω πως η Microsoft πνίγηκε σε μια κουταλιά νερό και χάλασε άδοξα τις πάρα πολύ καλές εντυπώσεις που είχε κερδίσει ο καινούργιος Explorer. Τώρα πόσο θα επηρεάσει αυτή η απόφαση εμάς τους developers, ο χρόνος θα δείξει… Άποψη μου είναι πως έκανε το απλό, πολύπλοκο, χωρίς κανέναν ιδιαίτερο λόγο.

Δωρεάν on-line WYSIWYG HTML editors

Για όσους δεν έχουν ιδιαίτερες web design γνώσεις και θέλουν μια πολύ απλή και δωρεάν προβολή στο internet υπάρχουν πλέον δύο δωρεάν on-line λύσεις! To Roxer και το Webnode λοιπόν, αναλαμβάνουν να γίνουν οι on-line WYSIWYG HTML editors του απλού χρήστη! Μάλλον θα αρχίσω να τα συστήνω και σε ανθρώπους που βρίσκουν ακριβές τις web design υπηρεσίες… Ξέρετε αυτούς που με 300 ευρώ θέλουν να τους φτιάξεις το νέο Youtube ή Flickr!

Blogging και στατιστικά : Πώς να τα εκμεταλλευθείτε

Πολλοί bloggers έχουν αλλεργία με τα στατιστικά (εγώ πάλι είμαι λίγο statistics junky), ωστόσο καλό θα είναι να τους ρίχνουμε και καμιά ματιά που και που, μιας και μπορούν να μας βοηθήσουν να πάρουμε καλύτερες και σωστότερες αποφάσεις για το blog μας. Οι δύο πιο διάσημες υπηρεσίες οι οποίες μπορούν να χρησιμοποιηθούν σε οποιοδήποτε site ή blog γι αυτόν τον λόγο, παρέχονται δωρεάν από την Google και δεν είναι άλλες από το Google Analytics και το FeedBurner (το οποίο και αγόρασε σχετικά πρόσφατα). Αφού λοιπόν τα πάντα παρέχονται δωρεάν, την στιγμή μάλιστα που άλλες εταιρείες χρεώνουν αρκετά δολάρια για τις ίδιες υπηρεσίες, γιατί να μην τις χρησιμοποιήσει κάποιος;

Από τις δύο παραπάνω must υπηρεσίες στατιστικών θα ξεκινήσω με το Google Analytics, το οποίο θα είναι η πιο κοινότυπη λύση για τους περισσότερους. Το Google Analytics δημιουργεί στατιστικά στοιχεία για διάφορα χαρακτηριστικά που έχει κάθε blog/site, όπως επισκέπτες (visitors), περιεχόμενο (content), traffic και traffic sources, τεχνολογικά στατιστικά και πολλά άλλα! Αφού λοιπόν ενεργοποιήσουμε έναν (δωρεάν) Google Analytics λογαριασμό το μόνο που έχουμε να κάνουμε είναι να δηλώσουμε τα URLs των blog/site μας, και να περάσουμε ένα javascript κώδικα που μας παρέχει το Analytics στο καθένα από αυτά. Αυτό είναι όλο το installation που πρέπει να γίνει, από εκεί και πέρα απλά περιμένουμε να δημιουργηθούν τα πρώτα στατιστικά μας! Τα στατιστικά στοιχεία που συλλέγει και αναλύει το Analytics για εμάς είναι αυτά που αναφέρω παραπάνω, καθώς και πολλά άλλα πιο εξειδικευμένα, τα οποία και θα αποφύγω να αναφέρω και να αναλύσω, μιας και παρά-είναι εξειδικευμένα. Οι τέσσερις μεγάλες κατηγορίες στατιστικών που πρέπει να προσέχει κάποιος, είναι οι επισκέπτες (visitors), το περιεχόμενο (content), το traffic και τα traffic sources, καθώς φυσικά και κάποια άλλα στατιστικά στοιχεία πιο τεχνολογικού ενδιαφέροντος… Παρακάτω αναλύω ποιες είναι οι πιο σημαντικές πληροφορίες από την κάθε κατηγορία και πως μπορούμε να βελτιώσουμε το blog μας “διαβάζοντας” τα στατιστικά της κάθε μιας!

Ας ξεκινήσουμε λοιπόν από τους επισκέπτες (visitors) του blog μας, μια σχετικά εύκολη και κατανοητή κατηγορία στατιστικών που μπορούμε να αντλήσουμε πολλές πληροφορίες για το blog μας. Σε αυτήν την κατηγορία στατιστικών μπορούμε :

  • Να δούμε πόσοι είναι οι επισκέπτες μας
  • Να δούμε που βρίσκονται γεωγραφικά
  • Να μετρήσουμε πόσα pageviews έχει το blog μας
  • Να δούμε πόσοι από τους χρήστες είναι καινούργιοι και πόσοι παλιοί χρήστες του blog μας
  • Να δούμε τι γλώσσα έχει ο browser που χρησιμοποιούν

Εξετάζοντας τα παραπάνω μπορούμε να πάρουμε καλύτερες αποφάσεις σε θέματα όπως :

  • Να προσπαθήσουμε να δημιουργήσουμε περιεχόμενο για κάποια συγκεκριμένη γεωγραφική περιοχή που βλέπουμε πως έχει έντονη κινητικότητα
  • Να εξετάσουμε εάν κερδίζουμε νέους χρήστες ή αν χάνουμε παλιούς και να προσπαθήσουμε να εντοπίσουμε τον λόγο για τον οποίο γίνεται κάτι τέτοιο
  • Να αποφασίσουμε εάν θα γράφουμε και σε κάποια άλλη γλώσσα (πχ. αγγλικά)

Tα στατιστικά τα οποία έχουν σχέση με το περιεχόμενο (content) του blog μας είναι εξίσου σημαντικά και οι πληροφορίες που μας δίνουν μπορούν να μας βοηθήσουν στο να καταλάβουμε καλύτερα που πρέπει να εστιάσει το blog μας από την μεριά του περιεχομένου μας. Τα πιο σημαντικά στατιστικά στην συγκεκριμένη κατηγορία είναι :

  • Ποιο είναι το περιεχόμενο με τα περισσότερα pageviews
  • Τι προτιμούν να διαβάζουν οι χρήστες μας
  • Ποιες είναι οι top landing και ποιες οι top exit pages (αυτές οι οποίες αποχωρούν οι χρήστες μας) του blog μας

Εξετάζοντας τα παραπάνω μπορούμε να πάρουμε καλύτερες αποφάσεις σε θέματα όπως :

  • Τι θέματα να συνεχίζουμε να γράφουμε και τι όχι (ανάλογα και με το θέμα του blog μας φυσικά)
  • Τι περιεχόμενο να προωθήσουμε ακόμα πιο πολύ (σε άλλα sites ή και στο δικό μας με ακόμα πιο σωστό SEO)
  • Αποφάσεις που έχουν να κάνουν με το navigation και το design του blog μας, όπως πχ. να προωθούμε σε post, post ανάλογης θεματολογίας, να χρησιμοποιούμε ή όχι read more links κτλ.

Τα στατιστικά τα οποία έχουν σχέση με το traffic, και γενικότερα με τα traffic sources του blog μας, είναι ίσως και τα πιο σημαντικά μιας και μας παραπέμπουν σε πληροφορίες για την διαδρομή που ακολούθησε ο χρήστης στο blog μας. Μερικά χρήσιμα στατιστικά που μπορούμε εύκολα να αναλύσουμε είναι :

  • Πόσοι χρήστες μπήκαν κατευθείαν στο site μας (χωρίς να πατήσουν κάποιο link δηλαδή)
  • Από ποιο blog/site ο χρήστης κατέληξε στο δικό μας (πατώντας κάποιο link)
  •  Πως κινήθηκε ο χρήστης στο blog μας
  • Ποιες λέξεις χρησιμοποιούν οι χρήστες μας στις μηχανές αναζήτησης για να ανακαλύψουν το blog μας
  • Πόση ώρα ξοδεύουν οι χρήστες στο blog μας
  • Σε ποιο site αποχώρισε ο χρήστης φεύγοντας από το δικό μας

Μελετώντας τα παραπάνω στοιχεία μπορούμε να να πάρουμε καλύτερες αποφάσεις σε θέματα όπως :

  • Σε ποια άλλα blog ή site να διαφημιστούμε, και με ποια να ανταλλάξουμε links (link exchange)
  • Να οργανώσουμε καλύτερα την SEO καμπάνια μας
  • Να δούμε ποια keywords χρησιμοποιούν στις αναζητήσεις τους οι χρήστες μας, και να προσπαθήσουμε να εστιάσουμε σε αυτά με ανάλογα posts

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

  • Τι ανάλυση (screen resolution) χρησιμοποιούν οι χρήστες μας
  • Τι browsers και τι browser plug ins διαθέτουν
  • Τι λειτουργικά συστήματα χρησιμοποιούν
  • Πόσα χρώματα υποστηρίζει η οθόνη τους, κτλ.

Όπως είναι προφανές τα παραπάνω στατιστικά στοιχεία είναι φτιαγμένα για τους πιο έμπειρους bloggers, μπορούν ωστόσο να βοηθήσουν τον καθένα μας να πάρει αποφάσεις για :

  • Τι ανάλυση (screen resolution) να υποστηρίζει το blog
  • Ποιοι είναι οι browsers που πρέπει οπωσδήποτε να υποστηρίξουμε
  • Ποια plug ins μπορούμε να χρησιμοποιήσουμε αν και εφόσον το θέλουμε
  • Ποια λειτουργικά συστήματα πρέπει οπωσδήποτε να υποστηρίξουμε

Φυσικά όπως εύκολα μπορεί να καταλάβει κάποιος τα παραπάνω στατιστικά στοιχεία μιας κατηγορίας μπορούν να συνδυαστούν με αυτά κάποιας άλλης, έτσι ώστε να κάνουμε και ακόμα πιο περίπλοκες προβλέψεις. Για παράδειγμα, εάν έχουμε ένα τεχνολογικό blog το οποίο επισκέπτονται πάρα πολλοί χρήστες Linux, η πρόβλεψη του να δημιουργήσουμε περισσότερο περιεχόμενο (content) με θέμα το αντίστοιχο λειτουργικό είναι σωστή! Γενικότερα ο καθένας βγάζει τα συμπεράσματα του και τις προβλέψεις του μέσα από τα διάφορα στατιστικά, οπότε θα κλείσω σε αυτό το σημείο το θέμα Google Analytics.

To FeedBurner είναι η δεύτερη υπηρεσία στατιστικών της Google, η οποία αναλαμβάνει να συλλέξει στατιστικά στοιχεία τα οποία έχουν σχέση μόνο με τα feeds σας! Αν και λίγο πιο περίεργο στο installation του, κυρίως στους λιγότερο μυημένους χρήστες, είναι η καλύτερη λύση δημιουργίας στατιστικών αλλά και διαχείρισης (όπως θα δούμε παρακάτω) feeds. Το πρώτο πράγμα που πρέπει να κάνει κάποιος, μετά την δωρεάν δημιουργία λογαριασμού φυσικά, είναι να δηλώσει (η αλλιώς να “κάψει” – burn) το link του feed του (πχ. http://www.tsevdos.com/feed/rss2/), σε ένα FeedBurner feed, καθώς και να το ονομάσει όπως θέλει (πχ. RSS2feed). Το νέο feed που θα δημιουργήσει το FeedBurner θα έχει την μορφή “http://feeds.feedburner.com/RSS2feed”, και θα έχει σαν source το link που οδηγεί στο “κανονικό” feed που ορίσατε προηγουμένως (http://www.tsevdos.com/feed/rss2/). Από εκεί και πέρα απλά θα πρέπει να “μοιράζεται” από το blog σας, το feed που μόλις δημιουργήσατε στο FeedBurner, αντικαθιστώντας το default link του feed σας (πχ. http://www.tsevdos.com/feed/rss2/) με αυτό του FeedBurner (http://feeds.feedburner.com/RSS2feed). Έχετε υπόψη σας πως εάν το feed σας εμφανίζεται σε περισσότερα από ένα σημεία στο blog σας (πχ. στο δικό μου εκτός από το header section του blog μου εμφανίζεται και σε άλλα τρία σημεία, στην πάνω και κάτω navigation bar και στην κεντρική στήλη/column), θα πρέπει να αντικαταστήσετε και αυτά με το link του FeedBurner (http://feeds.feedburner.com/RSS2feed), γιατί πολύ απλά κάποιος χρήστης μπορεί να επιλέξει ένα από αυτά τα links για να εγγραφεί στο feed σας. Μόλις ολοκληρώσετε και αυτό το βήμα, το FeedBurner θα αναλάβει να δημιουργήσει τα στατιστικά του feed σας. Εκτός από τα ξεκάθαρα και σαφή στατιστικά στοιχεία που θα σας προσφέρει το FeedBurner, με πιο σημαντικό τον ακριβή αριθμό των εγγεγραμμένων χρηστών (subscribers) στο feed σας, θα αναλάβει να βοηθήσει και τους χρήστες του blog σας να κάνουν subscribe στο feed σας ευκολότερα, επιλέγοντας απλά τον feed reader που χρησιμοποιούν (η υπηρεσία υποστηρίζει όλους τους διάσημους on-line και off-line readers, οπότε κανένας χρήστης δεν θα αντιμετωπίσει πρόβλημα). Έτσι η διαδικασία εγγραφής στο feed σας αυτοματοποιείτε αρκετά, κάνοντας το blog σας ακόμα πιο εύχρηστο!

Τα στατιστικά των εγγεγραμμένων χρηστών (subscribers) στο feed σας μπορούν να σας βοηθήσουν να πάρετε αποφάσεις όπως :

  • Να βάλετε διαφημίσεις στο feed σας
  • Να διαφημίστε περιεχόμενο του blog σας μέσα στο feed σας
  • Να αποφασίσετε εάν θα προσφέρεται όλο ή κομμάτι του post σας στο feed σας. Εδώ να σημειώσω πως η πρώτη επιλογή (όλο το post) είναι η καλύτερη και σωστότερη λύση και ας χάνεται σε επισκέψεις στο blog/site σας. Θεωρώ απαράδεκτη συμπεριφορά ένα κομματιασμένο post μέσα στον reader μου!
  • Να υπολογίσετε με μεγαλύτερη ακρίβεια τους χρήστες του blog σας, μιας και ξέροντας τον ακριβή λογαριασμό των εγγεγραμμένων χρηστών στο feed σας μπορείτε να υποθέσετε πως πολλοί από αυτούς δεν επισκέπτονται ποτέ το blog σας, ωστόσο διαβάζουν τα post σας!

Το FeedBurner εκτός από την καταμέτρηση των εγγεγραμμένων χρηστών του feed σας, προσφέρει και επιπλέον ευκολίες στην διαχείριση των ίδιων των feeds. Έτσι εάν για παράδειγμα αλλάξετε κάποτε blog, πράγμα που σημαίνει πως θα αλλάξει αμέσως και το link του feed σας, μπορείτε να “ξανά-κάψετε” το νέο feed σας πάνω στο παλιό FeedBurner feed που μοιράζατε (με λίγα λόγια θα του αλλάξετε το παλιό source feed με το καινούργιο), έτσι ώστε οι χρήστες του feed σας να συνεχίσουν να παίρνουν και να διαβάζουν το feed σας κανονικά, χωρίς καν να προσέξουν την διαφορά, και φυσικά χωρίς να χρειαστεί να ξαναπεράσουν στον reader τους το νέο σας feed (μιας και ο reader τους θα έχει για source το FeedBurner feed το οποίο δεν θα αλλάξει)!

Όπως καταλαβαίνεται η στατιστική ανάλυση κάποιων στοιχείων του blog/site σας, σίγουρα θα σας βοηθήσει να πάρετε σωστότερες αποφάσεις σε πάρα πολλά θέματα, από την βελτίωση και προώθηση του περιεχόμενου σας, μέχρι τι screen resolution (ανάλυση) ή browser plug-in να χρησιμοποιήσετε! Για όλους τους παραπάνω λόγους θεωρώ πως όποιος ασχολείται έστω και ερασιτεχνικά με το blogging ή έχει κάποιο site (έστω και μικρό), καλό θα είναι να ρίχνει και μια ματιά στα στατιστικά του για να παίρνει σωστότερο και μετρήσιμο feedback, έτσι ώστε να κάνει όσο το δυνατόν καλύτερες επιλογές γίνεται σε όλα τα πεδία του blog/site του (από το template και design, μέχρι το περιεχόμενο και το marketing)! Η πρόσβαση σε όλες αυτές τις πληροφορίες γίνεται χρησιμοποιώντας δωρεάν εργαλεία, οπότε δεν υπάρχει κανένας λόγος μη χρησιμοποίησης τους. Ελπίζω να σας κόλλησα λίγο από το μικρόβιο που έχω με τα στατιστικά των blog/site μου (και μόνο με αυτά τα στατιστικά) και να σας έπεισα να δοκιμάσετε να εφαρμόσετε κάποιες συμβουλές στα δικά σας blogs.

Ο καζαμίας 2008 του web developer

Το ξέρω πως έχω να γράψω καιρό, ωστόσο μία η προσαρμογή στην καινούργια δουλειά, μία η  μετακόμιση σε νέο σπίτι (χωρίς internet access προς το παρόν!) καθώς και διάφορες άλλες υποχρεώσεις, άφησαν το blog μου λίγο πίσω! Μην ανησυχείτε όμως το παρακάτω post θα σας καλύψει πλήρως, μιας και θα σας ενημερώσει για το τι θα γίνει στο μέλλον, και πιο συγκεκριμένα μέσα στο 2008! Έχουμε και λέμε λοιπόν :

  • Ο Internet Explorer 8 και ο Firefox 3 θα κονταροχτυπηθούν αλύπητα για μία ακόμη φορά για την πολυπόθητη θέση του default web browser στα συστήματα μας! Το περίεργο είναι πως ο Internet Explorer 8 έχει αυτήν την φορά καλύτερη rendering μηχανή από τον Firefox 3, ο οποίος όμως παραμένει σταθερά η default λύση των web developers (σε όλες τις πλατφόρμες, συμπεριλαμβανομένου πλέον και του OS X).
  • Ο Safari κερδίζει όλο και περισσότερους χρήστες! Με τις πωλήσεις της Apple να πηγαίνουν από το καλό στο καλύτερο, καθώς και με τις φορητές εκδόσεις του Safari browser για iPod touch, iPhone (generaton 1 και 2 πλέον) καθώς και του νέου ultra-portable laptop της, ο Safari έχει ήδη καταφέρει να κερδίσει ένα σεβαστό ποσοστό χρηστών όπου πλέον κανένας web developer δεν μπορεί να αγνοήσει!
  • Μετά την Microsoft και την καινούργια ASP.ΝΕΤ η οποία και μεταπήδησε σε λογική MVC, η Zend, εταιρεία και δημιουργός της PHP λανσάρει και αυτή πλέον το επίσημο MVC PHP framework! Όλοι δείχνουν να ακολουθούν τον δρόμο που χάραξε η Ruby και το Rails σε αυτόν τον τομέα!
  • Οι πρώτες CSS3 εντολές υποστηρίζονται ήδη από πολλούς mainstream browsers, και τα πρώτα tutorials και τεχνικές έχουν κάνει ήδη την εμφάνιση τους! Το web design αποκτά ακόμα περισσότερα όπλα στο οπλοστάσιο του!
  • Το ελληνικό internet παραμένει άσχημο και στάσιμο, με τις ελληνικές εταιρείες να μην μπορούν ακόμα να καταλάβουν ούτε να εκμεταλλευτούν τις δυνατότητες του. Ευτυχώς υπάρχουν πάντα και οι ευχάριστες εξαιρέσεις!

Καλό 2008 και είμαι περίεργος να δω σε πόσα από τα παραπάνω θα πέσω μέσα…

Mozilla Weave

Τα εργαστήρια της Mozilla έχουν ανακοινώσει εδώ και κάποιες μέρες το Mozilla Weave, το οποίο σαν ιδέα ακούγεται πολύ ενδιαφέρουσα, ωστόσο πιστεύω πως αυτή την στιγμή το όλο project είναι απλά ένα concept και τίποτα παραπάνω. Η ιδέα λοιπόν είναι η κατασκευή ενός layer υπηρεσιών μεταξύ του Firefox και του internet το οποίο θα ονομάζεται Weave, έτσι ώστε να έχεις πάντα στην κατοχή σου και από οποιοδήποτε μηχάνημα, πληροφορίες όπως ιστορικό (history) του browser, bookmarks, preferences, documents και διάφορα άλλα αρχεία. Το όνειρο της Mozilla όπως μπόρεσα να καταλάβω, είναι πως πέρα από αυτά τα browser χαρακτηριστικά και ευκολίες που θα προσφέρει για τον Firefox μέσω του Weave, είναι και η δημιουργία εργαλείων και API έτσι ώστε να έχουν την δυνατότητα και προγραμματιστές τρίτων site, όπως πχ. del.icio.us και Flickr να βοηθήσουν τους χρήστες που θα χρησιμοποιούν Firefox με χαρακτηριστικά όπως αυτόματο login ανεξάρτητα από το computer που χρησιμοποιούν, ενωποίηση των site τους με τον browser, όπως για παράδειγμα τα bookmark του del.icio.us να ελέγχονται και να ανανεώνονται κατευθείαν μέσω του browser, και άλλα αντίστοιχα καλούδια. Όπως όλοι καταλαβαίνετε το Weave γίνεται και ακόμα πιο διασκεδαστικό όταν σε όλα αυτά εισέρχεται και ο όρος “social“, όπου θα υπάρχει η δυνατότητα να μοιράζεται με φίλους και γνωστούς σας τις φωτογραφίες, τα links σας και γενικότερα ότι άλλη πληροφορία βρίσκεται on-line ή χρησιμοποιείτε σε κάποια on-line υπηρεσία πολύ πιο εύκολα και γρήγορα (μέσω του browser σας!).

Όπως ανέφερα και παραπάνω το Mozilla Weave είναι σε πολύ πρώιμο στάδιο αυτήν την στιγμή και πιστεύω πως ούτε και η ίδια η Mozilla δεν ξέρει τι ακριβώς φτιάχνει. Επειδή έριξα μια ματιά στο documentation νομίζω πως αυτό που περιγράφω παραπάνω είναι και αυτό που θέλει να πετύχει και η Mozilla πάνω-κάτω, ωστόσο μπορεί να κάνω και λάθος. Όπως και να έχει πιστεύω πως το Weave θα αργήσει πολύ ακόμα, αλλά εάν τελικά καταφέρει να δημιουργήσει κάτι τέτοιο η Mozilla, και πείσει άλλα site και vendors να υποστηρίξουν τις εφαρμογές τους σε αυτό, μπορούμε να μιλάμε για την αρχή του intrenet OS, μιας και οι εφαρμογές θα είναι on-line υπηρεσίες, και θα ελέγχονται από ένα browser Operating System!!! Το κλειδί στην ιστορία είναι να κλείσει συμφωνίες με τα μεγάλα site και υπηρεσίες, και να στηρίξει την όλη προσπάθεια σε ανοιχτά και standards-based εργαλεία, κάτι πού ήδη έχει δηλώσει και που πιστεύω πως δεν θα το διαψεύσει Είμαι πολύ περίεργος να δω τι θα γίνει τελικά με αυτό το θέμα…

Δωρεάν, On-line course για όσους θέλουν να μάθουν Ruby on Rails!

Για όσους ενδιαφέρονται να μάθουν να προγραμματίζουν στην γλώσσα προγραμματισμού Ruby και φυσικά στο διάσημο Rails Framework, το site Ruby Learning κάνει την καλύτερη προσφορά αυτήν την στιγμή! Όπως αναφέρει σε πρόσφατο post του, μπορείτε να γραφτείτε εντελώς δωρεάν στο course με τίτλο The Free Online Ruby Programming Course – FORPC101, το οποίο ξεκινάει την Δευτέρα 7 Ιανουαρίου 2008! Το πρώτο tutorial είναι ήδη έτοιμο ενώ ο κύριος Satish Talim, υπεύθυνος του course και των μαθημάτων, έχει προς το παρόν 1730 μαθητές! Όποιος ενδιαφέρεται να γίνει συμμαθητής μου τον περιμένω 😉 .

HTML e-mails και πως πρέπει να σχεδιάζονται

Αν και έχουν γίνει αρκετά βήματα μπροστά στο θέμα HTML e-mails/newsletters, όπως το Email Standards Project (όπως έχω αναφέρει και σε παλιότερο post), τα πράγματα για τους developers παραμένουν άσχημα, μιας και οι mail clients εκτός από από πολλοί, έχουν μείνει και αρκετά πίσω στο θέμα rendering HTML περιεχομένου. Οι περισσότεροι, για λόγους ασφαλείας κυρίως, κόβουν πολλά χαρακτηριστικά όπως Javascript, CSS και πολλές φορές ακόμα και εικόνες, οπότε η κατάσταση είναι δύσκολο να ελεγχθεί από τον developer/designer που έχει αναλάβει την δημιουργία του περιεχομένου! Επιπλέον πρόβλημα είναι και η ύπαρξη on-line αλλά και off-line (desktop) mail clients, όπου ο καθένας ακολουθεί τους δικούς του κανόνες στο τι θα κάνει render και με ποιον τρόπο! Το παρακάτω άρθρο θα προσπαθήσει να δώσει συμβουλές αλλά και να προβάλει τεχνικές έτσι ώστε να σχεδιάζετε καλύτερα και πιο συμβατά HTML mails.

Το πρώτο πράγμα που πρέπει να ασπαστείται είναι η inline CSS! Αν και στο web design η inline CSS θεωρείτε τόσο κακή πρακτική όσο και τα παλιομοδίτικα font tags, στην περίπτωση των HTML mails η inline CSS είναι το μόνο είδος CSS που λειτουργεί στους περισσότερους clients! Έτσι εάν θέλετε να χρησιμοποιήσετε σε κάποιο span element Arial font, σε γκρι χρώμα και bold, ο κανόνας που πρέπει να γράψετε (inline) είναι ο εξής :


Span element με Arial font, γκρι χρώμα και bold!

Από εκεί και πέρα προσπαθήστε να χρησιμοποιήσετε τις βασικές CSS properties οι οποίες υποστηρίζονται στους περισσότερους clients, και αποφύγετε τις πιο σπάνιες (όπως πχ list-style-image). Παρακάτω συγκέντρωσα μία λίστα η οποία εξηγεί τι εννοώ γράφοντας βασικές properties. Την λίστα την έφτιαξα μετά από μελέτη ενός καταπληκτικού άρθρου πάνω στο θέμα το οποίο έχει κάνει ολόκληρη μελέτη για το ποιες CSS properties υποστηρίζονται και ποιες όχι (γράφτηκε το 2006, αλλά υπάρχει και το 2007 review).

  • color
  • background-color
  • border
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • margin
  • padding
  • text-align
  • text-decoration
  • text-transform

Κάποιοι παρατηρητικοί θα είδαν πως στις παραπάνω CSS properties δεν αναφέρω πουθενά positioning properties. Ο λόγος είναι πολύ απλός, για HTML e-mail (και μόνο για τον συγκεκριμένο λόγο) η καλύτερη λύση είναι να χρησιμοποιήσετε tables! Το ξέρω πως σε αυτό το blog γράφω πάντα κατά των tables και υποστηρίζω τις μοντέρνες web design τεχνικές, αλλά στην συγκεκριμένη περίπτωση όλα αυτά απλά δεν ισχύουν! Χρησιμοποιήστε tables λοιπόν και μάλιστα αποφύγετε τα πολλά tables μέσα σε tables (γνωστά και ως nested tables). Ένα απλό table-based layout, με λίγα rows και columns είναι το ιδανικότερο, μετά με την εισαγωγή κάποιων βασικών styles στο περιεχόμενο (content) του πίνακα και ακολουθώντας τις παραπάνω συμβουλές, μπορείτε εύκολα να δημιουργήσετε ένα πολύ ευανάγνωστο και εντυπωσιακό HTML e-mail/newsletter.

Άλλο ένα σημαντικό λάθος, που το κάνουν ακόμα και μεγάλες εταιρείες, είναι η αλόγιστη χρήση γραφικών (images) και το ακόμα χειρότερο, η χρήση γραφικών για την προβολή περιεχομένου (content). Ο λόγος που δεν πρέπει να χρησιμοποιούμε πολλά γραφικά, είναι πως πολλοί mail clients (on-line και off-line) δεν αφήνουν τα γραφικά να “περάσουν”, με αποτέλεσμα να μην εμφανίζονται! Όπως καταλαβαίνεται τα πράγματα γίνονται ακόμα χειρότερα εάν τα γραφικά περιέχουν και μέρος του περιεχόμενου μας, όπως για παράδειγμα κείμενο, γραφήματα κτλ. Καλό θα είναι το κείμενο (τίτλοι, παράγραφοι, κτλ.) να είναι κείμενο, και όχι γραφικά με περίεργα Photoshop fonts, γιατί εκτός από το κίνδυνο να μην τα δουν ποτέ οι παραλήπτες, υπάρχει και μεγάλο accessibility πρόβλημα όταν κάποιος θέλει να κάνει copy κάποιο κομμάτι του κειμένου σας!

Τέλος κάντε όσα πιο πολλά τεστ μπορείτε! Και για να γίνω πιο συγκεκριμένος εξετάστε τα HTML mails τουλάχιστον σε :

Αυτά τα βασικά και πιο τεχνικά πράγματα για τα HTML e-mails (προς το παρόν). Ελπίζω να με διαβάζουν και κάποιοι που δημιουργούν τέτοια mails, γιατί όπως πάντα η κατάσταση στην Ελλάδα είναι πάλι αρκετά πίσω από τον μέσο όρο, οπότε όσοι πιστοί νοιάζεστε, διορθώστε όσο μπορείτε την κατάσταση!

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, σκεφτείτε σοβαρά την συγκεκριμένη πρόταση, γιατί σίγουρα θα σας λύσει τα χέρια!