Τι έπαθα όμως και γκρινιάζω; Θέλω ο κακομοίρης και εγώ να πάρω εισιτήρια για την συναυλία των U2. Μαθαίνω πως διοργανώτρια εταιρεία (λέμε τώρα) είναι η Didi music. Μπαίνω λοιπόν στο site της, περιμένω το flash intro του 1995 να γυρίσει 360 φορές, είναι βλέπεται το 360 tour των U2, και πατάω επιτέλους “enter” για να μπω στο site που έπρεπε να είχα ήδη μπει! Το site αργεί κάπως γιατί είναι όλο φτιαγμένο σε Flash (Flex λογικά), όχι για κάποιον ιδιαίτερο λόγο, όπως για να εκμεταλλευτούν για παράδειγμα κάποια Flex χαρακτηριστικά ή για να κάνουν τίποτα περίεργα εφέ, αλλά έτσι για να γουστάρουμε. Άλλωστε στην Ελλάδα είμαστε της άποψης Flash να ναι και ότι να ναι… (Σημείωση 1 : ήθελα να κάνω copy ένα κομμάτι κειμένου για να το στείλω με mail και δεν μπορούσα. Έλεος!). Βρίσκω και πατάω επιτέλους την επιλογή “εισιτήρια” όπου με παραπέμπουν στα site Ticket House και TicketPro. Επιλέγω το πρώτο, κυρίως επειδή από εκεί αγοράζω συνήθως, και μεταφέρομαι στο site τους όπου πρόκειται για μια πολύ βασική HTML σελίδα με 3 links, ένα που σε παραπέμπει σε ένα PDF αρχείο που σου εξηγεί τι είναι η red zone, ένα που ανοίγει ένα pop up παράθυρο με ένα image/χάρτη του σταδίου (Σημείωση 2 : Nαι το μπλόκαρε ο Firefox, αλλά το άνοιξα manual, είναι U2 βλέπεται… Επίσης εάν έχεις μικρή ανάλυση στην οθόνη - 1024px ή μικρότερη - δεν βλέπεις σχεδόν τίποτα από τον χάρτη. Καλά ρε παιδιά με 100 τρόπους μπορούσε να γίνεται κάτι τέτοιο και διαλέξατε τον χειρότερο) και ένα link που γράφει σε άπταιστα αγγλικά buy tickets! At last (δεν είπα επιτέλους γιατί ήμουν σε english mode), θα το πατήσω και θα τα αγοράσω. Αμ, δε. Πατάς λοιπόν το buy tickets και σε μεταφέρει στο site της TicketPro! Ευτυχώς δεν σε παραπέμπει στην κεντρική σελίδα, αλλά κατευθείαν σε μία σελίδα με 3 links για να επιλέξεις το εισιτήριο σου. Επιλέγω λοιπόν U2 (δεν ήθελα ούτε το red zone ούτε το VIP package) και πάνω που είμαι έτοιμος να ξεκινήσω το registration, με παίρνει τηλέφωνο ο αδερφός μου, και με ενημερώνει για το εξής απίστευτο (ακόμα δεν μπορώ να το πιστέψω). Τα εισιτήρια λοιπόν κοστίζουν ακριβότερα εάν τα αγοράσεις on-line (περισσότερες πληροφορίες εδώ και εδώ)! Ε, βέβαια ρε παιδιά τόσα λεφτά χαλάσανε στο research και στο user experience αυτής της sitαρας, να μην χρεώσουν και κάτι παραπάνω τα παιδιά. Ειλικρινά δεν μπορώ να καταλάβω γιατί όταν τα κλείνεις on-line είναι ακριβότερα, όποιος μπορέσει και μου εξηγήσει κερδίζει ένα εισιτήριο U2.

Σταματάω επί τόπου την εγγραφή και επιστρέφω στην δουλειά μου. Ήταν ίσως το πιο άσκοπο/αντιπαραγωγικό 10λεπτο της μέρας. Εισιτήριο δεν πρόκειται να αγοράσω on-line, όχι για τα παραπάνω λεφτά, αλλά γιατί μας κοροϊδεύουν αισχρά και στην μάπα μας. Θα κατέβω κάποια στιγμή και θα αγοράσω με τον παλιό κλασικό 90s τρόπο. Έτσι κι αλλιώς στην Ελλάδα εκεί έχουμε μείνει (και internetικα και κανονικά).

Update : Έμαθα πως τα on-line εισιτήρια εκτός από πιο ακριβά που είναι, πληρώνεις και την εταιρεία courier που αναλαμβάνει να τα στείλει, πράγμα που σημαίνει συν 5 ευρώ για Αττική και συν 8 για  επαρχεία!

• Dive into HTML5 : Μια φανταστική πηγή εκμάθησης HTML5.
• CSS παρουσιάσεις που πρέπει να δείτε : Απλά εξαιρετικές… Και τι δεν θα έδινα για να έβλεπα τις παρουσιάσεις  ”Efficient, Maintainable CSS” και “CSS Inheritance“, όταν πρωτο-ξεκίναγα και εγώ (δυστυχώς έπρεπε να τα μάθω με τον δύσκολο τρόπο)…

Η χρήση τους είναι εξαιρετικά απλή, απλά ονομάζεται το group δίνοντας του ένα όνομα (label) και στην συνέχεια του προσθέτεται τα option elements που θέλετε. Ρίξτε μια ματιά παρακάτω και προσπαθήστε να το χρησιμοποιήσετε την επόμενη φορά που θα έχετε μια λίστα με πολλές επιλογές…

<label for="bestepisode">Διάλεξε το καλύτερο επεισόδιο τριλογίας!</label>
<select name="bestepisode" id="bestepisode">
<optgroup label="Star Wars">
<option value="starwars4">The Star Wars</option>
<option value="starwars5">The Empire Strikes Back</option>
<option value="starwars6">Return of the Jedi</option>
</optgroup>
<optgroup label="Indiana Jones">
<option value="ij1">Raiders of the Lost Ark</option>
<option value="ij2">The Temple of Doom</option>
<option value="ij3">The Last Crusade</option>
</optgroup>
<optgroup label="Matrix">
<option value="matrix1">The Matrix</option>
<option value="matrix2">The Matrix Reloaded</option>
<option value="matrix3">The Matrix Revolutions</option>
</optgroup>
</select>

• BestWebFrameworks : Τα γνωστότερα frameworks για PHP, Ruby, JS και CSS, σε ευκολοδιάβαστους πίνακες (με χαρακτηριστικά κτλ.).
• Μια πολύ καλή εισαγωγή στην HTML5, από τον Brad Neuberg της Google, που σίγουρα αξίζει να την δείτε από το πρώτο μέχρι το τελευταίο λεπτό!

Web Design

• Baseline : Ένα ακόμα CSS framework, με έμφαση στην τυπογραφία.
• 25 χρήσιμα CSS κολπάκια που πρέπει να ξέρετε : Ένα καλογραμμένο tutorial με πολλά CSS κολπάκια!

Web Development

• Yahoo! Search BOSS : Φτιάξτε την δικιά σας custom search με την βοήθεια της Yahoo!…
• IE7-JS : Μια javascript library που αναλαμβάνει να κάνει τις παλιότερες εκδόσεις του Internet Explorer (6 και κάτω) να συμπεριφέρονται όπως ο 7… Μπορεί να το έχω ξανά-παρουσιάσει αλλά δεν πειράζει.

Search Engine Optimization (SEO)

• Μια πολύ καλή video παρουσίαση που εξηγεί τον μύθο του duplicate content, τι είναι το canonical URL και πως μπορούμε να το χρησιμοποιήσουμε στην markup μας.

Tools

• Wireframe Magnets : Για εύκολο prototyping…

Τυπογραφία (Typography)

• My Fontbook : Επιτέλους ένα όμορφος και πρακτικός on-line font viewer.

Wordpress

• Κερδίστε αρκετό χρόνο από τα Wordpress style σας χρησιμοποιώντας το default WP CSS style!
• To Status Updater αναλαμβάνει να σας γλιτώσει από την αγγαρεία του να postaρετε τα καινούργια άρθρα σας στις διάφορες social υπηρεσίες, όπως facebook, twitter, myspace κτλ.

Plug ins

• jQTouch : Ένα jQuery plugin για mobile web development σε iPhone, Android, Palm Pre, και άλλες touch-based συσκευές.

Δωρεάν/Freebies

• Screenr : Μια νέα υπηρεσία για εύκολο και δωρεάν screencasting. Το screencast εργαλείο της είναι εντυπωσιακό και δουλεύει κατευθείαν μέσω browser!
• Piwik : Ένα open source και δωρεάν φυσικά, web analytics software. Για αυτούς που βαρέθηκαν το Mint και το Google Analytics…

Η λύση είναι απλούστατη και θέμα θέμα απλής λογικής. Όποιο γραφικό είναι μέρος του περιεχομένου, όπως πχ. μια φωτογραφία, ένα διάγραμμα, κτλ., πρέπει να παρουσιάζεται με το HTML img tag και να περιέχει - εκτός φυσικά από το src attribute - και ένα περιγραφικό alt attribute. Αντιθέτως τα γραφικά που δεν είναι μέρος του περιεχομένου, δεν θα πρέπει να υπάρχουν καθόλου στην markup μας (ως img tags)! Τα συγκεκριμένα γραφικά θα πρέπει να παρουσιάζονται είτε μέσω CSS, είτε μέσω DOM injection χρησιμοποιώντας κάποια Javascript library. Εάν φυσικά τα πράγματα δεν γίνονται αλλιώς (δεν μπορούμε να κάνουμε και μαγικά σε μερικές περιπτώσεις), τότε μπορούμε να προσθέσουμε τα συγκεκριμένα γραφικά με img tags τα οποία θα έχουν κενή την alt attribute τους (<img src=”logo.jpg” alt=”" />). Εύκολο έτσι;

• CSS selectors : Ότι πρέπει να ξέρετε! (μέρος 1ο - CSS 1)
• CSS selectors: Ότι πρέπει να ξέρετε! (μέρος 2ο - CSS 2)
• CSS selectors : Ότι πρέπει να ξέρετε! (μέρος 3ο - CSS3)

Και πάνω που σκεφτόμουν να αγοράσω ένα τέτοιο βιβλίο…

<div id="accessibilitylinks">
<ul>
<li><a title="Go to content" href="#content">Skip to content</a></li>
<li><a title="Go to main navigation" href="#navigation">Skip to main navigation</a></li>
<li><a title="Go to Search form" href="#search">Skip to Search form</a></li>
</ul>
</div>

Με τον παραπάνω κώδικα, οι χρήστες screen reader μπορούν πολύ εύκολα - στην κυριολεξία με ένα κλικ - να μετακινηθούν στο περιεχόμενο της σελίδας μου, στο navigation ή στην search form. Φυσικά μπορούμε να εφαρμόσουμε και όλους τους γνωστούς styling κανόνες στην λίστα έτσι ώστε να την διαμορφώσουμε όπως θέλουμε. Καλό θα είναι εάν θέλουμε να την κρύψουμε, να μην χρησιμοποιήσουμε τον κανόνα display:none αλλά να την κρύψουμε με κάποιο άλλο τρόπο (πχ. absolute position), και αυτό γιατί πολλοί screen readers/text browsers δεν διαβάζουν τα elements με display:none. Για παράδειγμα, εγώ κρύβω την συγκεκριμένη λίστα links με τον παρακάτω κώδικα:

#accessibilitylinks {
position:absolute;
top:-1000px;
}

Είναι πραγματικά το πιο εύκολο αλλά και πρακτικό usability χαρακτηριστικό που μπορείτε να έχετε στην σελίδα σας!

• SlickMap CSS : Για εύκολα και γρήγορα CSS maps.
• HTML 5 validator : Ο πρώτος - και πολύ πειραματικός όπως γράφουν και οι δημιουργοί του - HTML5 validator.

Web Development

• Modernizr : HTML5 και  CSS3 εδώ και τώρα! Μπορεί να το χρησιμοποιήσω και στο επόμενο official Tsevdos.com WP theme που ετοιμάζω (ή μήπως είναι νωρίς ακόμα; )…
• BBC Glow : H Javascript library του BBC!
• qWikiOffice Web Desktop : Ακόμα μία Javascript library, με έμφαση σε desktop-like interfaces/λειτουργίες.
• Javascript InfoVis Toolkit : Και άλλη μία για Interactive Data Visualizations και άλλα τέτοια περίεργα…

Tools

• Open Atrium : Γρήγορο, εύκολο και πάνω από όλα οικονομικό intranet site! Με πολλά features και φυσικά open source. Απλά συμφέρει…
• MeeCSS : Για να μην καταχωρείται τα site σας ένα-ένα στις CSS galleries…
• Color Suckr : “Ρουφήξτε” τα χρώματα οποιασδήποτε φωτογραφίας.

Accessibility/Usability

• 247 web usability guidelines : Για όσους θέλουν να ασχοληθούν σοβαρά με το άθλημα.
• OpenHallway : Άλλη μια χρήσιμη υπηρεσία για on-line usability tests.

Plug ins

• jQuery Blend : Πολύ απλό και εντυπωσιακό εφέ, ιδιαίτερα για μενού.
• jQuery Flip : Για γυριστές καταστάσεις (δείτε το demo, δεν ξέρω τι άλλο να γράψω!)…

Blogs

• SSMaP : Ένα podcast με την sugarenia και τον Στέλιο, με θέμα το web φυσικά. Κυκλοφόρησαν ήδη 2 επεισόδια…
• Pink Moustache : Το ροζ μουστάκι ήταν η ελληνική καλοκαιρινή έκπληξη που χρειαζόμουν! Πραγματικά μ’ αρέσει να βλέπω τέτοιες προσπάθειες από τόσο ταλαντούχους ανθρώπους.

Δωρεάν/Freebies

• Code Burner Firefox plug in και δωρεάν βιβλίο “Build Your Own Firefox Extension” : Κατεβάστε την νεότερη έκδοση του Code Burner plug in και εκτός από αυτό θα σας δώσουν και ένα δωρεάν βιβλίο για το πως να φτιάχνεται τα δικά σας Firefox plug ins! Αυτά κάνει το Sitepoint και μας κακό-μαθαίνει…