Πολλά και διάφορα

Μετά από αρκετό καιρό πήρα την απόφαση να γράψω κάποια πραγματάκια που έχω στο μυαλό μου εδώ και καιρό, αλλά δυστυχώς δεν έχω αδειάσει να κάτσω και να μοιραστώ ήρεμα και ωραία. Αφού επιτέλους βρήκα την ευκαιρία, ας ξεκινήσουμε!

Καταρχάς έχω δημιουργήσει 2 πολύ πρακτικά repositories με grunt και gulp boilerplates για web designers. Documentation μπορείτε να βρείτε τόσο στο Phrappe.com όσο και στα ίδια τα repositories, ωστόσο είναι πολύ κατανοητά τόσο στον τρόπο λειτουργίας τους όσο και στα features που υποστηρίζουν. Στόχος τους είναι να βοηθήσουν όσους θέλουν να χρησιμοποιήσουν CSS και JS preprocessors (και όχι μόνο), χρησιμοποιώντας το grunt ή το  gulp. Κάνουν περίπου, ότι κάνει το Codekit (για τους Apple users), απλά δωρεάν και χωρίς GUI (οι εντολές ωστόσο είναι πολύ εύκολες). Στόχος μου ήταν να τα κάνω και Yeoman generators ωστόσο με πρόλαβαν άλλοι οπότε και δεν έχει νόημα η συγκεκριμένη επένδυση χρόνου…

To δεύτερο πράγμα που ήθελα να μοιραστώ εδώ και καιρό, είναι πως είμαι ενθουσιασμένος με το porcupine-letter. Ξεχωρίζει με διαφορά από τα υπόλοιπα newsletters (ειδικά τα corporate) και μου φτιάχνει την διάθεση όποτε το λαμβάνω στο inbox μου. Ο Γιάννης κάνει φοβερή δουλειά και αξίζει να ρίξετε μια ματιά. Δυστυχώς λόγω περίεργων συγκυριών (εκλογών και όχι μόνο) έχασα την παρουσίαση του στο UpNorth. Έχω την αίσθηση πως έχασα το καλύτερο φετινό event μιας και εκτός του Γιάννη, ήταν πάρα πολλοί αυτοί που ήθελα να δω και δεν κατάφερα (Ζαχαρένια, Φώτη και πολλοί άλλοι)…  Ελπίζω να ανέβουν κάποια στιγμή video των παρουσιάσεων μπας και “ρεφάρω” την χασούρα…

Επίσης εδώ και κάποιο καιρό, έχω ξεκινήσει την μεταφορά κάποιον άρθρων μου από το CSS3.gr στο Tsevdos.com. Στόχος μου είναι να μεταφερθούν σιγά-σιγά όλα, μιας και είχα ξοδέψει πολύ χρόνο για την συγγραφή τους. Το αξιοσημείωτο είναι πως ακόμα και μετά από 5 χρόνια τα άρθρα διαβάζονται ακόμα άνετα και είναι σχετικά επίκαιρα – γι’ αυτό και μπαίνω στην εν λόγω διαδικασία άλλωστε… Γενικά μου λείπει το CSS3.gr 🙁

Τέλος αν έχετε σκοπό να κάνετε interview για κάποια front-end developer θέση, είτε ως αυτός που θέτει είτε ως αυτός που απαντάει σε ερωτήσεις, ρίξτε μια ματιά στο Front-end developer interview questions repo. Έμαθα πολλά προσπαθώντας να απαντήσω σωστά σε όλες τις ερωτήσεις και επειδή μου άρεσε πολύ αποφάσισα να το μεταφράσω κι ολας.

Linux summer switch

Τον τελευταίο καιρό έχω κάνει μια δυναμική επιστροφή στο open source και οφείλω να ομολογήσω πως δεν το έχω μετανοιώσει καθόλου. Για κάποιο λόγο έχω απογοητευτεί εντελώς από την Apple (fanboys/girls μην βαράτε) και λιγότερο από τα Windows (τα Windows 7 με υπηρέτησαν μια χαρά τα τελευταία χρόνια), ωστόσο αποφάσισα πως πρέπει επιτέλους να γίνω λίγο πιο expert σε linux-based συστήματα. Άλλωστε εκεί καταλήγει το 90% των πραγμάτων που φτιάχνω…

Εκτός λοιπόν από το switch μου σε Android, με το Nexus 4 (από iPhone 3GS) τον περασμένο Δεκέμβρη, φέτος το καλοκαίρι αποφάσισα να κάνω και switch και στο desktop μου. Η διανομή που με κέρδισε μετά από μερικά tests, ήταν το Linux Mint (με Xfce για default windows manager ωστόσο έχω και τα KDE/MATE για να ρίχνω μια ματιά και εκεί) το οποίο χρησιμοποιεί τα repositories του Ubuntu. Αυτό σημαίνει ευκολία και υποστήριξη Ubuntu χωρίς ωστόσο να έχεις Ubuntu (για κάποιο λόγο δεν με κέρδισε). Με άλλα λόγια το μόνο “κλειστό” προϊόν που μου έχει απομείνει πλέον είναι το iPad 2 (χωρίς retina-display), που κάποια στιγμή στο μέλλον μάλλον θα αντικατασταθεί από κάποιο nexus.

Από εφαρμογές δεν μου λείπει τίποτα, ίσα-ίσα στο linuxακι καταφέρνω να βρίσκω περισσότερες λύσεις οι οποίες είναι και δωρεάν! Πιο συγκεκριμένα και για web-development έχω τα εξής:

Για τα υπόλοιπα τώρα, το Linux έχει κάνει πολλά βήματα μπροστά και δεν θα έχετε πρόβλημα στο να δείτε video, να ακούσετε μουσική κτλ. Μέχρι και το Steam έχει κυκλοφορήσει για να παίζετε και κανένα παιχνίδι την προκοπής (αν και προτιμώ το PS3 μου). Αν το κόλλημα σας πάντως είναι το software (για κάποιο λόγο αυτό είναι το πρόβλημα των περισσότερων) στο Linux υπάρχουν άπειρες περισσότερες λύσεις και μάλιστα οι περισσότερες είναι και ποιητικές και free*. Ρίξτε μια ματιά πόσες επιλογές έχετε και θα με θυμηθείτε.

*Free as freedom 😉

Στατιστικά και ματαιοδοξία…

… ή πολύ απλά vanity metrics που λένε και στο εξωτερικό. Αναρωτιούνται πολλοί, ακόμα και επαγγελματίες του χώρου, γιατί ενώ έχουν x unique επισκέπτες, οι πελάτες/συνδρομητές τους δεν αυξάνονται ή ενώ το site έχει y pageviews οι πωλήσεις είναι λίγες, το μαγαζί δεν βγαίνει κτλ. Τέτοια ερωτήματα κάνουν ακόμα πιο συχνά την εμφάνιση τους στα social media. – Μα πως γίνεται να έχω 5000 followers/10.000 likes και ενώ ανεβάζω μια πολύ καλή προσφορά να έχω ελάχιστη ανταπόκριση;

Αν έχετε βρεθεί σε αυτήν την θέση, πρέπει να καταλάβετε πως τα στατιστικά είναι απλά κάποια μετρήσιμα στοιχεία και τίποτα παραπάνω! Το ότι έχετε x uniques visitors την μέρα δεν σημαίνει πως αυτοί είναι πελάτες σας, συνδρομητές σας ή οτιδήποτε άλλο. Σημαίνει πολύ απλά πως αυτοί μπήκαν στο site σας (σίγουρα ένα πολύ καλό πρώτο βήμα). Από εκεί και πέρα θα πρέπει να τους αποδείξετε πως είστε οι καλύτεροι και πως πρέπει  να επιλέξουν εσάς και όχι τους υπόλοιπους, με την καλοστημένη υπηρεσία σας, τις καλές τιμές σας, την ευκολία χειρισμού και χιλιάδων άλλων παραμέτρων! Το ότι σας έχουν κάνει like 10.000 άτομα, είτε επειδή απλά κάνουν like τους πάντες, είτε επειδή τους αναγκάσατε κάποια στιγμή (πχ. για να μπουν σε κάποιον διαγωνισμό, να δουν κάποιο άρθρο σας, κτλ.), δεν σημαίνει πως την επόμενη φορά που θα ανακοινώσετε μια προσφορά ή θα προωθήσετε κάποιο προϊόν θα περιμένουν πως και πως να σας ακούσουν και να σας στηρίξουν (πόσο μάλλον να σας προμοτάρουν)!

Αυτό είναι κάτι που πρέπει να αρχίσουμε να καταλαβαίνουμε σιγά-σιγά και να μην “ψαρώνουμε” από αριθμούς που πολύ απλά μπορεί να μην σημαίνουν και τίποτα. Τι και αν έχω εκατομμύρια visitors και καθόλου convertion ή άπειρους “άσχετους” με το προϊόν/υπηρεσία μου followers. Καλύτερα να είχα πολύ λιγότερους και να ήταν όλοι τους πελάτες/χρήστες της υπηρεσίας/προϊόντος μου. Καλύτερα να έχω πραγματικό user engagement από 100 άτομα παρά “εικονικό” από 10000! Έξω ήδη μιλάνε για actionable-metrics, όπως active users, convertions, engagement, και πολλά άλλα, ενώ εμείς εξακολουθούμε να συζητάμε για στατιστικά ματαιοδοξίας.

Καλό είναι λοιπόν να ξέρουμε που βρισκόμαστε από pageviews και visitors, αλλά να έχουμε στο μυαλό μας και πιο ουσιαστικά στατιστικά (actionable-metrics).

Ενοχλητικά features σε site

Δεν ξέρω αν είμαι περίεργος (δεν νομίζω) ωστόσο τελευταία παρατηρώ όλο και πιο συχνά το εξής φαινόμενο. Ενώ βλέπω σημάδια φοβερής προόδου στο internet, στο ελληνικό domain φαίνεται να κάνουμε βήματα προς τα πίσω! Με άλλα λόγια, αντι-τεχνικές (marketing, κακού design, ανύπαρκτου UX, κακή/υπερβολική χρήση διαφημίσεων, κτλ.) που έχουν εξαφανιστεί από σοβαρά διεθνή sites, στην Ελλάδα για κάποιο περίεργο λόγο έχουν κάνει ένα δυναμικό comeback! Παρακαλώ αν κάνετε κάτι από τα παρακάτω, επανεξετάστε την στρατηγική σας, σεβαστείτε τον χρήστη σας και προσπαθείστε να μην ακολουθείτε τα λάθη που πιθανόν κάνει κάποιο άλλο ελληνικό site. Το ότι τα χρησιμοποιεί κάποιος άλλος – ακόμα και μεγάλος – ελληνικός “παίχτης” δεν σημαίνει απαραίτητα ούτε ότι είναι σωστό αλλά ούτε και ότι κερδίζει κάτι ουσιαστικό, οπότε καλό είναι να μην αντιγράφουμε το λάθος του…

Παρακάτω παρουσιάζω τα anti-patterns που έχω παρατηρήσει να συμβαίνουν πιο συχνά στα ελληνικά sites και αναλύω με πολύ απλά λόγια γιατί είναι λάθος! Έχουμε και λέμε:

1) Popup ads και modal ads
Δυστυχώς εν έτη 2013 πρέπει να εξηγούμε πως τα popups παράθυρα γεμάτα διαφημίσεις είναι anti-pattern! Κάποιοι έχουν κάνει λίγο πιο “μοντέρνα” αυτήν την “εμπειρία” και αντί για popups windows, “πετάνε” modals με διαφημίσεις, τα οποία πολλές φορές δεν μπορείς να κλείσεις μέχρι να δεις ολόκληρη την διαφήμιση (ή έστω μεγάλο μέρος της). Τι να γράψω πάνω σε αυτό; Τα έχουν πει/γράψει άπειρες φορές πολύ πιο έξυπνοι άνθρωποι από εμένα. Δεν λειτουργούν, ποτέ δεν λειτούργησαν και το μόνο που θα καταφέρεται είναι να χάσετε χρήστες, αφού πρώτα τους σπάσετε και τα νεύρα! Τώρα αν αξίζει να χάσετε χρήστες για να κερδίσετε κάποια προσωρινή διαφήμιση/σπόνσορα, αυτό είναι καθαρά δικό σας θέμα. Αυτό που θα σας ρωτήσω είναι σε ποιον θα πουλάτε διαφημίσεις όταν χάσετε τους χρήστες σας…

2) Θες να γίνουμε φίλοι; O social-άκιας
Πρόκειται για sites τα οποία για να δεις το περιεχόμενο τους πρέπει να γίνεται απαραιτήτως φίλοι ή να κάνετε like στο Facebook page τους κοκ. Απλά τραγικό και θα εξηγήσω πολύ απλά γιατί χάνετε έτσι κι αλλιώς. Ο χρήστης με το που βρεθεί αντιμέτωπος με ένα τέτοιο site έχει 2 επιλογές: Ή θα φύγει κατευθείαν – όπως κάνω συνέχεια – και δεν θα ξανα-επιστρέψει ποτέ, ή θα κάνει like για να δει αυτό που θέλει. Στην δεύτερη περίπτωση τώρα, έστω ότι σας έχουν κάνει like 10.000.000 χρήστες (όλη η Ελλάδα), τι νομίζεται πως έχετε πετύχει; Είναι όλοι αυτοί πελάτες σας; Θα αυξήσετε το convertion rate σας; Θα αρχίσουν ξαφνικά όλοι αυτοί να εξυμνούν το site/υπηρεσία/προϊόν σας; OXI! Το αντίθετο μπορεί να συμβεί! Απλά έχετε καταφέρει να έχετε πολλούς άσχετους φίλους/followers κτλ. Μπράβο σας…

4) Η 10MB page
Καταλαβαίνω πως έχουμε 2013 και πολύ περισσότερο bandwidth απ’ ότι 5 χρόνια πριν, ωστόσο αυτό δεν σημαίνει πως πρέπει να κατασκευάζουμε σελίδες των 10 MB! Η Google μιλάει και επίσημα πλέον πως όσο πιο optimized και γρήγορο είναι ένα site τόσο καλύτερο page rank θα έχει, ωστόσο στην Ελλάδα μου τυχαίνει όλο και συχνότερα να πέφτω πάνω σε sites δεινόσαυρους (μεγατόνων κι όλας). Τις περισσότερες φορές με ελάχιστο optimization (σε images, http requests, κτλ.) μπορούμε να ρίξουμε το file size στο μισό χωρίς να θυσιάσουμε τίποτα σε ποιότητα! Επίσης βγάζοντας κάποιες διαφημίσεις/Flash objects μπορούμε να κάνουμε το site να πετάει, ωστόσο για κάποιο λόγο θέλουμε να ανήκει στην “heavy weight” κατηγορία…

5) Διαφημίσεις μέσα στο περιεχόμενο
Παλιό, κλασικό κόλπο, που εγκαταλείπεται σιγά-σιγά παντού, εκτός από την Ελλάδα όπου ανθίζει! Μπορεί να λειτουργήσει τις πρώτες 4-5 φορές, ωστόσο ο χρήστης σύντομα θα μάθει να αγνοεί και αυτές τις διαφημίσεις (όπως και όλες τις υπόλοιπες), οπότε στο τέλος το μόνο που καταφέρνουμε είναι να τον εκνευρίσουμε και τίποτα παραπάνω.

6) Νewsletter που δεν σου προσφέρουν τίποτα!
Ακόμα μια ελληνική πατέντα. Πρόκειται συνήθως για newsletters τα οποία δεν έχουν να πουν κάτι ουσιαστικό και που στην καλύτερη των περιπτώσεων θα σε ενημερώνουν για κάποια “προσφορά”. Τα περισσότερα είναι κακο-σχεδιασμένα, μόνο με images – όπου αν δεν εμφανιστούν απλά δεν διαβάζεις τίποτα – και τα στέλνουμε με την καταπληκτική λογική πως όλοι στέλνουν newsletters (πχ. ανταγωνιστές, γνωστοί, συνάδελφοι, κτλ.). Αυτοί που στέλνουν τέτοιου είδους newsletters, συνήθως δεν αξιολογούν τίποτα, όπως πχ. για το ποιος και αν τα ανοίγει/διαβάζει, αν κερδίζουμε κάτι από αυτά ή απλά χάνουμε άδικα τον χρόνο μας. Η λογική είναι πως τα στέλνουμε επειδή μαζί με το site πρέπει να στέλνουμε και κανένα newsletter.

7) Flash!
Μπορεί όλη η γη να έχει υποδουλωθεί στις ανοιχτές τεχνολογίες για διαφημίσεις (και όχι μόνο), ωστόσο το μικρό ελληνικό χωριό συνεχίζει να προβάλει αντίσταση σε οτιδήποτε ανοιχτό και δωρεάν. Αναφέρομαι κατά κύριο λόγο στις Flash διαφημίσεις οι οποίες κρατάνε ακόμα την μερίδα του λέοντας στην χώρα μας, άσχετα αν δεν φαίνονται στα περισσότερα smartphones και tablets. Αυτό δεν μπορώ να το καταλάβω με τίποτα. Εδώ η ίδια η Adobe έχει καταλάβει πως το Flash είναι τελειωμένο και όμως στον ελληνικό κυβερνοχώρο η πλειοψηφία των διαφημίσεων είναι Flash (με μπόλικα MB κατά προτίμηση). Πρόσφατα έπεσα και σε μια περίπτωση πελάτη, ο οποίος ήθελε responsive web design, και όταν οι Flash διαφημίσεις του δεν έπαιζαν σε tablets/smartphones αναρωτιόταν γιατί. Απλά τραγικό.

8) Φόρμες που δεν λειτουργούν!
Εκτός από κακο-σχεδιασμένες πολλές φόρμες στο ελληνικό domain υπάρχουν απλά για διακοσμητικό ρόλο! Δεν εξηγείτε αλλιώς πως οι μισές από αυτές απλά δεν λειτουργούν/δεν καταλήγουν πουθενά.

9) Αudio/Video auto play!
Τι πιο σωστό από το να έχεις ενεργοποιημένο το auto play στο video/audio που έχεις στο site σου. Ακόμα πιο τραγικό είναι το autoplay ήχου σε διαφημίσεις (εκεί και αν χάνεις την μπάλα)! Παίζεις με το ζόρι αυτό που θες στον χρήστη, με το έτσι θέλω. Αλώστε το site σου είναι ότι θες κάνεις. Τι σημασία έχει που τον τρομάζεις, εκνευρίζεις κτλ. Σημασία έχει να παίξει το audio/video σου!

10) Έχουμε ένα πολύ καλό app για το smartphone/tablet σου!
Ένα trend που δυστυχώς υπάρχει και σε site του εξωτερικού (εξαφανίζεται σιγά-σιγά όμως), που βάζω στοίχημα πως θα ανθήσει full στην Ελλάδα. Πρόκειται για τα site που όταν τα επισκέπτεσαι από το smartphone/tablet σου, αντί να σου δείχνουν το περιεχόμενο που έχεις μπει να δεις, σε ζαλίζουν να κατεβάσεις την υπέρ-εφαρμογή τους! Η λογική είναι ανάλογη με αυτήν των follwers/like απλά σε app store επίπεδο : την εφαρμογή μας την έχουν κατεβάσει 100.000 άτομα, άρα είμαστε οι καλύτεροι! Γιατί μου κάνεις την ζωή μου πιο δύσκολη, εγώ να τσεκάρω κάτι γρήγορα στο site θέλω – από το κινητό/tablet μου – αν ήθελα και το app σου, ξέρω που θα το βρω!

Τα πα και ξαλάφρωσα…

iPad εφαρμογές και σκέψεις

Εδώ και κάτι μέρες είμαι κάτοχος ενός iPad 2 και οφείλω να ομολογήσω πως το έχω ευχαριστηθεί και χρησιμοποιήσει περισσότερο από το Macbook pro μου! Μετά από κάτι μέρες λοιπόν αισθάνομαι πως επιτέλους το έφερα στα μέτρα μου και αποφάσισα να μοιραστώ την εμπειρία. Οι εφαρμογές που θα παρουσιάσω κάνουν για όλους και οι περισσότερες είναι δωρεάν. Έχουμε και λέμε λοιπόν:

  • Terra browser : Καλός ο Safari αλλά του λείπουν κάποια πραγματάκια που θα ήθελα, όπως tabs, bookmarks κτλ. Ο συγκεκριμένος browser είναι και αυτός webkit-based που σημαίνει πως δεν χάνεται τίποτα σε ποιότητα, αλλά ταυτόχρονα κερδίζετε και τα extra καλούδια που παρέχει.
  • Mail Client : Και πάλι δεν χρησιμοποιώ το Apple Mail, γιατί και δεν μου αρέσει (σοβαρά μιλάω, το έχουν κάνει κάπως περίεργο) αλλά και επειδή βολεύομαι αρκετά με την πολύ καλή mobile version του Gmail. Αν κάποιος έχει να προτείνει κάτι ας αφήσει comment.
  • MobileRSS : Φανταστικός RSS client για το Google Reader. Αν τώρα δεν χρησιμοποιείτε το Google Reader για τα feeds σας δεν έχω να προτείνω κάτι άλλο.
  • FlexPlayer : Ακόμα μια εφαρμογή τρίτων που τρώει μια εγγενής εφαρμογή της Apple, και για την ακρίβεια το Apple Videos. Ο συγκεκριμένος player παίζει αυτόματα όλα τα video formats, κάτι που δεν κάνει το Videos (θέλει μετατροπές και άλλα τέτοια). Κατά τα άλλα είναι ένας minimal player που απλά κάνει την δουλειά του. Το μόνο που δεν έχω δοκιμάσει ακόμα είναι αν παίζει υπότιτλους, αλλά δεν καίγομαι κι ολας. (Σημείωση : δεν είναι streaming λύση)
  • iBooks : Επιτέλους και μια Apple εφαρμογή που χρησιμοποιώ, κυρίως για την ανάγνωση PDF αρχείων. Όσοι θέλουν μπορούν να δοκιμάσουν και το επίσης πολύ καλό και δωρεάν PerfectReader (το χρησιμοποιούσα μέχρι να ανακαλύψω πως διαβάζεις PDFs από το iBooks).
  • Instapapaper ή Read it Later : Προσωπικά χρησιμοποιώ το Instapaper, το οποίο δεν είναι δωρεάν αλλά έχει πολύ καλύτερη υποστήριξη σχεδόν από όλα τα υπόλοιπα iPad apps. Αν τώρα σας χαλάει πάρα πολύ η πληρωμή, το Read it Later είναι η καλύτερη εναλλακτική δωρεάν λύση.
  • Twitter : Ο επίσημος client του twitter είναι μια από τις πιο καλοσχεδιασμένες εφαρμογές που έχω δει. Απλά must!
  • Friendly for Facebook : To Facebook δεν έχει προς το παρόν κάποιον επίσημο client, ωστόσο το Friendly κάνει μια χαρά την δουλειά του.
  • Skype : Ακόμα μια εντυπωσιακή εφαρμογή που αξίζει να έχετε.
  • IM+ : Η καλύτερη και πιο ολοκληρωμένη εφαρμογή για chat που βρήκα. Υποστηρίζει σχεδόν όλα τα δίκτυα, οπότε τα έχετε όλα σε 1.
  • Dropbox : Το Dropbox σας στο iPad.
  • Flipboard : Ακόμα μια πολύ εντυπωσιακή εφαρμογή που σίγουρα αξίζει να της ρίξετε μια ματιά. Το Flipboard θα δημιουργήσει το προσωπικό σας ψηφιακό περιοδικό από τις social media υπηρεσίες που χρησιμοποιείται και θα σας το παρουσιάσει με όμορφα εφέ.
  • PlainText : Η καλύτερη δωρεάν λύση που βρήκα για δημιουργία εγγράφων στο cloud. Γράφεις το κείμενο σου στην εφαρμογή και σου κρατάει τα πάντα μέσα σε ένα directory στο dropbox σου. Ιδανικά θα ήθελα έναν καλό Goolge Docs client, αλλά αυτοί που δοκίμασα (ακόμα και μερικοί ακριβοί) κάνουν edit με το web inerface του Google Docs το οποίο δεν με βολεύει. Αν κάποιος έχει να προτείνει κάτι, please share.
  • Άλλες εφαρμογές που χρησιμοποιώ αλλά που είναι λίγο πιο “ειδικές” είναι το WordPress, TED (παρουσιάσεις), BBC news και FTP Client.
Αυτά τα λίγα από εμένα, όποιος θέλει να προσθέσει κάτι ή να μου προτείνει κάτι που χάνω, ας αφήσει σχόλιο. Καλές διακοπές σε όλους!

H παρουσίαση μου στο DrupalCamp 2010

Ξεκινάω να μιλάω στο 24′ λεπτό, ωστόσο στα πρώτα 24 λεπτά μπορείτε να μάθετε πολλά πραγματάκια για το Drupal από τον συνάδελφο και Drupal ninja Μιχάλη Μαυρομμάτη!

Επίσης επειδή τα slides δεν φαίνονται καλά στο παραπάνω video, have a look here 😉

Web ειδικότητες και Ελλάδα…

Διάβαζα τις προάλλες την διαμάχη που ξέσπασε ανάμεσα στον Ryan Carson (από το Carsonified) και στον Andy Budd για το αν τελικά είναι ή δεν είναι κανονικός τίτλος δουλειάς ο user experience expert. Η πρώτη μου σκέψη και αντίδραση στο θέμα δεν ήταν ποιος έχει δίκιο ή άδικο, ή έστω ποιος είχε τα καλύτερα επιχειρήματα, αλλά πόσο πίσω είμαστε εμείς στην Ελλάδα!

Άλλοι έχουν φτάσει το web στα άκρα, και από εκεί που είχες έναν web designer και έναν web developer που έκαναν όλη την δουλειά, έχουν εξειδικεύσει τρελά τα πράγματα με Information Architectures, Accessibility experts, Database gurus, UX experts, Security experts, back-end και front-end specialists, κτλ. κτλ., ενώ εμείς στο Ελλαδιστάν απλά ακούμε τους τίτλους, τους αντιγράφουμε, τους βάζουμε στις κάρτες μας, νομίζοντας πως είμαστε στο ίδιο επίπεδο!

Μάλλον έχουμε την ποζεριά στο αίμα μας και μας αρέσει να δουλευόμαστε μεταξύ μας, δεν εξηγείτε αλλιώς… Όποιοι συμφωνείτε με το παραπάνω ρίξτε και μια ματιά στο πολύ καλό post του φίλου PanosJee , ο οποίος εξηγεί γιατί δεν πρόκειται να γίνουμε ποτέ Silicon Valley (γιατί να γίνουμε άλλωστε;)!

HTML5 σκέψεις

Αυτό το καλοκαίρι το έριξα – όπως και πολλοί άλλοι φαντάζομαι – στην HTML5 η οποία έχει ήδη αρχίσει να κάνει δειλά-δειλά την εμφάνιση σε αρκετά sites, σε μικρότερο ή μεγαλύτερο βαθμό. Τα βιβλία που διάβασα ήταν το “HTML5 for web designers” του Jeremy Keith και το “Introducing HTML5” των Bruce Lawson και Remy Sharp. Καταρχάς όποιος σκέφτεται να αγοράσει κάποιο βιβλίο αυτήν την στιγμή, του προτείνω το δεύτερο (Introducing HTML5), μιας και το πρώτο με απογοήτευσε αρκετά για “A book apart” βιβλίο. Γενικότερα δεν θα το περιέγραφα καν ως βιβλίο, αλλά σαν μια γενική, θεωρητική εισαγωγή για το τι είναι η HTML5. Αντίθετα, το Introducing HTML5 με ξάφνιασε ευχάριστα τόσο με τα πολλά θέματα που καλύπτει όσο και με τον τρόπο που τα καλύπτει, μιας και δεν μένει μόνο στην θεωρία, αλλά προχωράει και στην πράξη (ρίξτε οπωσδήποτε και μια ματιά στα παραδείγματα του βιβλίου).

Μετά από αυτήν την μικρή εισαγωγή λοιπόν, και με την ελάχιστη εμπειρία που έχω στο θέμα, θέλω να καταγράψω κάποιες σκέψεις, προβληματισμούς, και γενικότερα να ξεκινήσω μια συζήτηση με τα πιο ανήσυχα μυαλά… Θα προσπαθήσω να είμαι σαφής και γρήγορος, έτσι ώστε να μην μπερδέψω  και να μην κουράσω. Επίσης σε αυτό το post γράφοντας HTML5 εννοώ και τα APIs ή τις τεχνολογίες οι οποίες δεν είναι μέρος του επίσημου HTML5 specification (είναι από μόνα τους ξεχωριστά specifications), ωστόσο θα χρησιμοποιηθούν κυρίως με αυτήν την markup και την ίδια περίοδο. Ας δούμε λοιπόν τι μας επιφυλάσσει το μέλλον, ε, το παρόν ήθελα να πω!

Markup

Ας ξεκινήσουμε με το πιο απλό μέρος της HTML5 – θεωρητικά πάντα – την markup και τα semantics. Τα semantics λοιπόν έχουν αλλάξει αρκετά και πλέον γίνεται ακόμα πιο δύσκολο το να γράψεις σημασιολογική markup. Παρακάτω περιγράφω αυτά που μου φάνηκαν πιο περίεργα, σημαντικά ή παράξενα!

  • Το outline – το οποίο δεν έχει υλοποιηθεί ακόμα από κανέναν browser (!!!) – αλλάζει τελείως τον νόημα των headings (h1-h6). Πλέον ένα h3 heading μπορεί να είναι πιο σημαντικό από ένα h1 heading! Στην ουσία στην HTML5 θα μπορούσαμε να είχαμε ένα και μοναδικό τύπο heading (h για παράδειγμα), ωστόσο υπάρχουν ακόμα έξι (h1-6) για compatibility θέματα. Μένει να δούμε πως θα επηρεάσει και το SEO αυτό το θέμα.
  • Τα sections και τα articles είναι αρκετά δύσκολα στην κατανόηση, μιας και το ένα μπορεί να υπάρχει μέσα στο άλλο αρκετές φορές! Θέλει αρκετή μελέτη έτσι ώστε να τα χρησιμοποιήσει κάποιος σωστά.
  • Τέλος είμαι πραγματικά περίεργος να δω πως θα φτιάξουν τους WYSIWYG web editors (Dreamweaver για παράδειγμα) έτσι ώστε να γράφουν semantic HTML5. Παλιότερα τα πράγματα ήταν πανεύκολα, απλά πετούσαν παντού ένα div και το θέμα τελείωνε, τώρα τι λύση θα βρουν άραγε;

Φόρμες (forms)

Οι φόρμες επιτέλους δεν θα σπάνε τα νεύρα σε αυτούς που τις φτιάχνουν. Μερικά attributes στην markup μας και θα αφήνουμε τον browser να κάνει όλη την “βρόμικη” δουλειά. Οι περισσότεροι browsers υποστηρίζουν λίγα πράγματα προς το παρόν (ο πιο ολοκληρωμένος browser στο θέμα είναι ο Opera) ωστόσο σιγά-σιγά θα τον φτάσουν και οι υπόλοιποι.

  • Πολύ έξυπνο compatibility μιας και όλες οι φόρμες εμφανίζονται σαν απλά text inputs σε παλιότερους browsers που δεν καταλαβαίνουν τα νέα HTML5 attributes.
  • Δυστυχώς θα γράφουμε για πολύ καιρό ακόμα Javascript validation scripts (ιδιαίτερα στην Ελλάδα, με τους αρχαιοελληνικούς browsers που κυκλοφορούν)!
  • Πρέπει οπωσδήποτε να υπάρξει μια επίσημη γραμμή για το πως θα εμφανίζονται/φαίνονται τα διάφορα widgets (πχ. επιλογή ημερομηνίας) και τα λάθη (validation errors), καθώς και για το πως θα διαγράφουμε αυτά τα default browser styles, γιατί προβλέπω να γίνεται χαμός σε αυτό το θέμα.
  • Ακόμα λιγότερη Javascript χάρις τα autofocus, placeholder, autocomplete και required attributes.
  • Το pattern attribute απλά τα σπάει! Ελέγχει κατευθείαν στον browser το regular expression που έχει δηλωθεί στο pattern!

Video και Audio

Εδώ πέρα τα πράγματα ξεκίνησαν καλά και απλά, αλλά μια (τραγική;) παράληψη στο specification έκανε τα εύκολα δύσκολα! Όπως όλοι ξέρουμε ο κάθε κατασκευαστής browser αποφάσισε (ή θα αποφασίσει) να υποστηρίξει τον video codec που τον συμφέρει.

  • Χρησιμοποιώντας πολλαπλά source elements μπορούμε να φορτώσουμε πολλά διαφορετικά φορμάτ. Πολύ χρήσιμο για την κατάσταση που θα επικρατήσει.
  • Χρησιμοποιώντας το video element με codec Ogg Theora (.ogg), H.264 (mp4) και webM (βασισμένο στον VP8 codec της Google), είμαστε καλυμμένοι στους μοντέρνους browsers, ωστόσο 3 διαφορετικές κωδικοποιήσεις είναι πολλές για το ίδιο video.
  • Και μην ξεχνάτε πως πρέπει να το κωδικοποιήσουμε και σε Flash video για να παίζει σε παλιότερους browsers!
  • Στο audio τα πράγματα είναι αρκετά πιο απλά, μιας και με ένα mp3 έχουμε τελειώσει.
  • Στα θετικά είναι πως το API του video και audio tag είναι ακριβώς το ίδιο (αν θυμάμαι καλά το audio element έχει κανα-δυο λιγότερες methods και attributes – όπως πχ. width και height).

Canvas

Με το Canvas API μπορείς να κάνεις πραγματικά τρελά πράγματα, ωστόσο το θέμα accessibility είναι τεράστιο! Στην ουσία ότι “ζωγραφίζεται” πάνω στον καμβά, δεν μπορεί να διαβαστεί από screen readers. Είναι δηλαδή (προς το παρόν) ένα καθαρά οπτικό (visual) element/API, χωρίς μάλιστα να έχει προβλεφθεί κάποια εναλλακτική λύση για την προβολή περιεχομένου (όπως στο video tag για παράδειγμα)!

Client-side Data storage

Και εδώ δεν γνώριζα αρκετά πράγματα. Οι 2 σοβαρές τεχνολογίες ονομάζονται Web Storage και Web SQL Database (υπάρχει και μια τρίτη από την Mozilla η οποία μάλλον θα σβήσει – δεν θυμάμαι καν το όνομα της), με αρκετή υποστήριξη από τους browsers.

  • Το Web Storage είναι κάτι σαν cookies on steroids. Επίσης η τεχνολογία υποστηρίζετε από όλους (!!!) τους μοντέρνους browsers.
  • H Web SQL υποστηρίζεται σε Opera, Chrome και Safari ενώ η SQL μηχανή που χρησιμοποιούν είναι η SQLite (δεν γνωρίζω εάν το αναφέρει πουθενά το specification, ωστόσο αυτή την έκδοση SQL έχουν οι παραπάνω browsers).
  • Και πάλι θα συνεχίσουμε να γράφουμε για πολύ καιρό cookies για να υποστηρίξουμε τους παλιότερους browsers (fallback κώδικας).

Offline Application Caching

Μια τεχνολογία που δεν είχα ιδέα πως λειτουργούσε, η οποία αν και εντυπωσιακή για κάποιο λόγο δεν μου αρέσει ο τρόπος λειτουργίας της (ωστόσο θα ενθουσιάσει αυτούς που ασχολούνται με web servers, .htaccess files κτλ.). Πολύ απλά δηλώνουμε σε ένα “μανιφέστο” ποια αρχεία θέλουμε να cachαριστούν (αλήθεια πως θα το μεταφράζατε αυτό;) στον browser, έτσι ώστε το site/web app μας να συνεχίζει να λειτουργεί ακόμα και εάν πάψει να λειτουργεί η σύνδεση μας.

  • Η χρήση είναι σχετικά απλή, απλά δημιουργούμε ένα .manifest αρχείο στο οποίο αναφέρουμε τα αρχεία που θέλουμε να cashaρηστούν, και το δηλώνουμε στην markup μας (<html manifest="demo.manifest">). Για κάποιο λόγο ωστόσο δεν μου αρέσει αυτός ο τρόπος λειτουργίας… Με κάνει να αισθάνομαι κάπως έξω από τα νερά μου, μιας και όπως εξήγησα και πιο πάνω μοιάζει πιο πολύ με την δημιουργία κάποιου .htaccess αρχείου, κάτι που δεν κάνει συχνά κάποιος web designer (ή έστω front-end developer).

Geolocation

Ένα από τα πιο εύκολα και αγαπημένα μου χαρακτηριστικά. Το Geolocation API δεν είναι μέρος της HTML5, ωστόσο το αναφέρω για τους λόγους που εξήγησα στην εισαγωγή. Είναι σχετικά απλό (με 2 methods έχετε καθαρίσει – getCurrentPosition και watchPosition), και πιστεύω πως όλο και περισσότερα sites θα το χρησιμοποιούν για να μας δείχνουν πιο “ντόπια” προϊόντα, διαφημίσεις, νέα, προσφορές, κτλ. κτλ. Με λίγα λόγια, “θα φορεθεί πολύ”…

Web Messaging API, Web Workers API και Web Sockets API

Τα παραπάνω APIs τα αναφέρω και τα 3 μαζί μιας και είναι φτιαγμένα για καθαρά Web εφαρμογές (δεν είναι ούτε και αυτά μέρος της HTML5). Με τα παραπάνω APIs μας δίνονται οι παρακάτω δυνατότητες:

  • Το Web Messanging υποστηρίζεται από πολλούς browsers (και IE) και μας επιτρέπει να κάνουμε διάφορα ωραία, όπως να στέλνουμε μηνύματα σε άλλα domains κτλ. Φανταστείτε το κάτι σαν AJAX on steroids και αυτό.
  • Χρησιμοποιώντας Web Workers μπορούμε να κάνουμε την web εφαρμογή μας να τρέχει την Javascript σε διαφορετικά threads! Από μια γρήγορη ματιά που έριξα, η λογική είναι αρκετά πολύπλοκη και πιστεύω πως αυτήν την στιγμή είναι πολύ κακό για το τίποτα, ωστόσο οφείλω να ομολογήσω πως σε μια πολύπλοκη web εφαρμογή (φανταστείτε κάτι σε Photoshop στο web) μπορεί να κάνει τρελή διαφορά (πχ. να χρησιμοποιεί ένα φίλτρο, και ενώ ο web worker κάνει τους υπολογισμούς του, ο χρήστης να συνεχίζει να χρησιμοποιεί την εφαρμογή, χωρίς αυτή να φαίνεται σαν να έχει κολλήσει).
  • Τα Web Sockets ανοίγουν μια αμφίδρομη επικοινωνία μεταξύ του server και του client χρησιμοποιώντας τον browser σαν “μεσάζοντα”. Αρκετά βολικό και χρήσιμο…
Αυτές είναι οι πρώτες εντυπώσεις/σκέψεις μου για την HTML και όλα τα άλλα ωραία καλούδια που έρχονται μαζί της. Έχετε στο μυαλό σας πως  υπολογίζουν πως η HTML5 θα είναι 100% ολοκληρωμένη (σε browser επίπεδο τουλάχιστον) γύρω στο 2020 (!!!) ωστόσο δεν χάνουμε τίποτα με το να χρησιμοποιούμε και να μαθαίνουμε τα νέα χαρακτηριστικά της. Πολλά από αυτά άλλωστε υποστηρίζονται και από τους σημερινούς μοντέρνους browsers ενώ λογικά με την έλευση του IE9 θα δούμε ακόμα πιο πολλές HTML5-based εφαρμογές. Μην φοβάστε λοιπόν να την χρησιμοποιήσετε εδώ και τώρα, απλή HTML είναι άλλωστε 😉 Τα υπόλοιπα τα λέμε στα σχόλια!

Ο πελάτης έχει πάντα… άδικο!

Ποτέ μου δεν κατάλαβα γιατί από παιδιά μας μαθαίνουν το χαζό γνωμικό “Ο πελάτης έχει πάντα δίκιο”. Δηλαδή εάν μπω σε ένα κατάστημα και αρχίζω να βρίζω τους πάντες και να απαιτώ παράλογα πράγματα, θα πρέπει να με ανεχθούν απλά και μόνο επειδή παίζω τον ρόλο του πελάτη; Πραγματικά δεν μπορώ να το καταλάβω αυτό. Το ακόμα χειρότερο είναι πως οι περισσότεροι από εμάς το εφαρμόζουν σαν άγραφο νόμο και χωρίς δεύτερη σκέψη! Όποιος τυχαίνει και έχει τον ρόλο του πελάτη έχει πάντα δίκιο και δεν χρειάζονται περαιτέρω διευκρινήσεις και εξηγήσεις! Τι σχέση έχει τώρα αυτό με το web design/development; Βασικά έχει να κάνει με τα πάντα, άρα και με αυτό…

Όταν λοιπόν σας χτυπήσει την πόρτα ένας πελάτης, που έχει σερφάρει 2-3 φορές στην ζωή του, και “θέλει ένα site”, πρέπει να καταλάβει πως εσείς είστε ο ειδικός και φράσεις σαν τις παρακάτω απλά είναι παράλογες και δεν στέκουν:

  • Θέλω ένα site σαν αυτό του γείτονα
  • Θέλω το logo μου να στριφογυρίζει στην οθόνη
  • Θέλω να παίζει το αγαπημένο μου τραγούδι στο background
  • Θέλω να έχει αστράκια και φωτάκια παντού
  • Τα Χριστούγεννα θέλω να βγαίνει ο Άι-Βασίλης με τους ταράνδους και να κόβει βόλτες

Είμαι σίγουρος πως ακούτε συχνά τέτοιες ατάκες (ειδικά την τελευταία 🙂 ) ωστόσο πιστεύω πως είναι στο χέρι μας να εκπαιδεύσουμε το εκάστοτε πελάτη και να του κόψουμε από την αρχή τα περίεργα αιτήματα του… Ακούω πολλούς ήδη να σιγοψιθυρίζουν, ναι αλλά άμα τον χάσουμε; Οι εποχές είναι δύσκολες για να χάνουμε χρήματα κτλ κτλ… Σε αυτό το σημείο ξεχωρίζει ο άνθρωπος με προσωπικότητα, γνώση και υπομονή (δεν πρέπει να διαθέτω κανένα από τα 3), ο οποίος θα εξηγήσει στον πελάτη τι πρέπει να γίνει, πως θα γίνει σωστά, ενώ θα προσπαθήσει να του προσφέρει/πουλήσει και την καλύτερη λύση με το budget που έχει στην διάθεση του. Θα του εξηγήσει πως το site φτιάχνεται για να εξυπηρετήσει κάποιον συγκεκριμένο σκοπό, και όχι για να ακούει το αγαπημένο του τραγούδι στο background και να χαίρεται την απαίσια παλέτα χρωμάτων που διάλεξε (για όλα αυτά υπάρχει ήδη λύση)!

Ναι, αλλά αν ο πελάτης επιμένει; Δυστυχώς είμαι αρκετά απόλυτος στην παρακάτω δήλωση, η οποία είναι πως τον παρατάς/διώχνεις (πάντα ευγενικά, είμαστε και πολύ μικρή αγορά)! Εάν δεν καταλαβαίνει (ή δεν θέλει να καταλάβει) την δουλεία σου, δεν πρόκειται να ασχοληθεί και αυτός σοβαρά με άλλα εξίσου σημαντικά θέματα, όπως με κείμενα,  υλικό, φωτογραφίες, με το να ακολουθεί κάποιες guidelines στα κείμενα κτλ κτλ., με αποτέλεσμα το site να αποτύχει (και να κατηγορηθείς και εσύ γι αυτό!). Πέρα από τα παραπάνω, αυτοί που δεν θέλουν να καταλάβουν την δουλειά σου, είναι συχνά αυτοί που αργούν να πληρώσουν, πληρώνουν λίγα (γιατί νομίζουν πως τα sites φτιάχνονται όπως κάνεις install μια εφαρμογή next => next =>done!) και γενικότερα μπαίνεις σε ένα τρυπάκι όπου χάνεις πολύτιμο χρόνο τον οποίο δεν πληρώνεσαι κι όλας.

Από εκεί και πέρα είναι προσωπική επιλογή του καθενός εάν θα αναλάβει ή όχι έναν τέτοιο πελάτη… Όλοι το έχουμε κάνει και το κάνουμε κατά καιρούς, μιας και πολλές φορές δεν γίνεται αλλιώς (πρέπει να πληρώσεις και το νοίκι στο τέλος του μήνα!). Εύχομαι να καταργηθεί κάποια στιγμή η παλιομοδίτικη και αντιπαραγωγική ατάκα, και γιατί όχι να την αλλάξουμε και με την καινούργια και πιο σωστή κατά την γνώμη μου (ιδιαίτερα στο χώρο μας) – “Ο πελάτης έχει πάντα άδικο”.

Flash: Η αρχή του τέλους…

Το Flash είναι, και μάλιστα με διαφορά, το πιο διάσημο browser plug in που υπάρχει αυτήν την στιγμή. Είναι εγκατεστημένο σχεδόν σε όλους τους browsers και πολλά sites οφείλουν αποκλειστικά και μόνο την λειτουργία τους σε αυτό (Youtube, Vimeo και πολλά άλλα). Το κακό με το Flash είναι αυτό που γράφω και τονίζω στην πρώτη σειρά του post, είναι ένα plug in, μια εμπορική τεχνολογία, και όχι κάποιο ανοιχτό web standard. Είναι μια τεχνολογία της Adobe, που αν και την προσφέρει δωρεάν (όχι το development περιβάλλον του), κανείς δεν μπορεί να κάνει κάτι εάν η Adobe αποφασίσει κάποια στιγμή να το κοστολογήσει, να σταματήσει την υποστήριξη του ή οτιδήποτε παρόμοιο (δεν πρόκειται να κάνει κάτι τέτοιο, ωστόσο ποτέ δεν ξέρεις).

Το Flash ξεκίνησε σαν την καλύτερη λύση για animation στο web, όταν η μόνη εναλλακτική ήταν τα απαίσια gif γραφικά, για να συνεχίσει με τα άνευ λόγου ύπαρξης και σημασίας web intros και animated menus (όπου στην Ελλάδα πουλάνε ακόμα). Τα τελευταία χρόνια στο web, ο μοναδικός λόγος που είχα εγκατεστημένο το Flash plug in στους browsers μου ήταν το Flash video, το οποίο έκανε φανταστική δουλειά σε σχέση με άλλες τεχνολογίες (QuickTime κτλ.). Οι εποχές αλλάζουν όμως, και δυστυχώς το Flash δεν κατάφερε να εξελιχθεί με αυτές. Σίγουρα έκανε αρκετά βήματα σε θέματα όπως accessibility, ωστόσο δεν κατάφερε να δημιουργήσει κάποια άλλη ανάγκη όπως έκανε με το video. Με αυτά και αυτά έχουμε σχεδόν έτοιμη την HTML5 (από προδιαγραφές τουλάχιστον, μένει η υλοποίηση της στους browsers), η οποία προσφέρει εγγενή υποστήριξη video, κάτι που κατά την άποψη μου θα σημάνει και την αρχή του τέλους για το Flash. Σίγουρα αυτή η μάχη δεν θα χαθεί σε μία μέρα, ωστόσο μόλις λυθεί λίγο το θέμα των video codecs στην HTML5 (είναι μια άλλη μεγάλη ιστορία που ίσως αναλύσω σε κάποιο άλλο post), θα είναι απλά θέμα χρόνου. Προσωπικά ήδη βλέπω τα video στο Youtube χρησιμοποιώντας HTML5 (με άλλα λόγια δεν χρειάζομαι τον Flash player!), και όχι δεν παίζω παιχνιδάκια τύπου FarmVille, άρα όσο περνάει ο καιρός τόσο λιγότερο θα χρησιμοποιώ το Flash plug in. Και σαν να μην έφταναν όλα αυτά, η Apple αποφασίζει να διαθέσει τόσο το iPhone/iPod Touch όσο και το επερχόμενο iPad χωρίς τον Flash player, κάτι που κάνει ακόμα πιο δύσκολα τα πράγματα για την Adobe.

Εκεί που θέλω να καταλήξω είναι πως στο web ότι δεν είναι ανοιχτό και παύει να καινοτομεί, αργά ή γρήγορα πεθαίνει… Είναι η φύση του! Είμαι περίεργος να δω τι κινήσεις θα κάνει η Adobe για να σώσει την κατάσταση, ωστόσο εάν δεν ανοίξει την τεχνολογία δεν βλέπω να καταφέρνει και πολλά. Βασικά, και να την ανοίξει πλέον, το βρίσκω πολύ δύσκολο να γυρίσει την κατάσταση, ωστόσο όλο και κάποιος περίεργος hacker μπορεί να κάτσει και να δημιουργήσει μια καινούργια Flash-based ανάγκη (λέμε τώρα)…