Μουστάκι και ιστορίες
21.07.2010
Εντάξει ο μήνας έχει 22 και ακόμα καλοκαίρι δε καταλάβαμε. Ούτε μάλλον θα πάρουμε χαμπάρι. Αλλά τι να γίνει, you win some, you lose some. Έτσι λοιπόν, μέσα στο κατακαλόκαιρο είπαμε να ετοιμάσουμε τις νέες μας υπηρεσίες. Vector Stories λοιπόν. To νέο site της Ελενίτσας (όχι Ελένης είπαμε). Οι υπηρεσίες που προσφέρει έχουν να κάνουν με οτιδήποτε ξεκινάει από χαρτί και καταλήγει σε μορφή vector. Πάει και παραπέρα αλλά ρίξτε μια ματιά και αν χρειαστείτε κάτι, μη διστάσετε να επικοινωνήσετε μαζί της.
PSD to HTML/CSS
05.07.2010
Η μετατροπή μιας μακέτα σε HTML/CSS δεν είναι εύκολη υπόθεση. Για να το πω διαφορετικά, η σωστή μετατροπή δεν είναι εύκολη υπόθεση. Είναι μια διαδικασία που απαιτεί υπομονή. Προχθές έκοψα την 200η παραγγελία στο xhtmlme.com. Είπα λοιπόν να το γιορτάσω μοιράζοντας μαζί σου κάποια πράγματα που έμαθα όλο αυτό το καιρό.
Εργαλεία
Πολύ σημαντικό κομμάτι όπως και σε κάθε τι που κάνουμε, όχι μόνο στο slicing. Εδώ όμως τα εργαλεία μπορούν να κάνουν τη διαφορά. Και τη διαφορά στη συγκεκριμένη δουλειά κάνει η ταχύτητα παράδοσης. Ο συγκεκριμένος παράγοντας δεν είναι μόνο απαραίτητος για την ικανοποίηση του πελάτη και του deadline, αλλά και για σένα που χρεώνεις με ένα συγκεκριμένο τρόπο. Όσο πιο γρήγορα δουλεύεις, πολύ απλά τόσο μεγαλύτερο είναι το κέρδος σου ανά ώρα. Δεν είμαι από αυτούς που θα σου πούνε ποιος editor είναι ο καλύτερος ή καλύτερα να πάρεις Mac για να κάνεις σωστή δουλειά. That’s BS. Προσωπικά τους τελευταίους 4 μήνες είμαι σε Mac και ακόμα ο αγαπημένος μου editor βρίσκεται στα Windows. Όμως και σε αυτή τη πλατφόρμα βρήκα εργαλεία που με κάνουν να είμαι γρήγορος και αποδοτικός. Πως το έχω στήσει λοιπόν.
Mini Framework
Τίποτα τρομερό και φοβερό. Απλά ένα folder με ότι χρειάζομαι στο 90% των projects που δουλεύω. jQuery my JS framework of choice, ie6 + 7 conditional stylesheets, ένα “baseline.css” για γενικές δηλώσεις (resets, basic typography), ένα φάκελο για τα γραφικά και φύγαμε. Σε κάθε project προσθέτω και κάτι που θεωρώ ότι χρειάζεται να υπάρχει εκεί μέσα και πλέον μετά από καμιά 10αριά revisions είναι ένας μικρός ελβετικός σουγιάς. Μιας και οι περισσότερες παραγγελίες πλέον θέλουν και WordPress integration, κρατάω τη δομή ενός WordPress theme, αφήνοντας στο κεντρικό folder το style.css. Μόνο με αυτό το framework, γλιτώνω κοντά στο μισάωρο κάθε φορά που ξεκινάω νέο project.
Editor
O editor πραγματικά μπορεί να κάνει τη διαφορά. Όπως κάθε editor έχει πλεονεκτήματα και μειονεκτήματα. Προσωπικά επέλεξα τον Coda. Ο λόγος είναι πολύ συγκεκριμένος και δεν έχει να κάνει με το hype που παίζει (άδικα). Όταν έκανα τη μετάβαση από PC σε Mac οι παραγγελίες τρέχανε. Δεν είχα χρόνο να κάτσω να ψάξω 10 διαφορετικούς editors να δω ποιος μου ταιριάζει. Σκέφτηκα λοιπόν να ασχοληθώ από τη μέρα 1 στο Mac με ένα editor που για να γίνεται τόσος ντόρος, κάτι σημαίνει (Yes, one more Social Proof victim) και απλά να βρώ τα κουμπιά του για να συνεχίσω να δουλεύω χωρίς καμία καθυστέρηση. Wow δεν είπα, far from it, αλλά ναι είναι ελαφρύς, έχει διάφορα καλούδια και η ζωή είναι ωραία. Tα snippets εδώ ήταν από τα πρώτα πράγματα που έπρεπε να συνηθίσω. WordPress loops, Unordered lists, titles, lorem ipsum text πρέπει να έρχονται στον cursor με όσο το δυνατό λιγότερα κλικς. Όταν είσαι συγκεντρωμένος στο layout, σε θέματα τυπογραφίας κλπ. το τελευταίο πράγμα που χρειάζεσαι είναι να χάνεις τη συγκέντρωση σου ψάχνοντας lorem ipsum copy σε sites που έχουν 2 banners, που πάτησες στο 1, που πήγες σε άλλο site, που χάζεψες κανά τέταρτο, που.. το έχασες. Shortcuts και snippets λοιπόν οι καλύτεροι φίλοι σου.
Να κλείσω την ενότητα λέγοντας πως ο Coda είναι πραγματικά υπερτιμημένος. Κυριολεκτικά. Στη μισή τιμή ο RapidPHP editor (for windows) προσφέρει τουλάχιστον 50 μετρημένα παραπάνω features. Oh well.
Προσέγγιση
Το πως θα ξεκινήσεις αποτελεί βασικό κριτήριο για το πότε και σημαντικότερα πως θα τελειώσεις. Προσωπικά με το που λάβω τα αρχεία PSD τα ανοίγω όλα στο Photoshop και αρχίζω να σημειώνω στο τετράδιο μου κοινά στοιχεία. Headers, boxes, images, styles. Στοιχεία δηλαδή που θα χρειαστούν σε παραπάνω από μια σελίδες. Το επόμενο βήμα είναι να καταγράψω όλα τα χρώματα και όλα τα μεγέθη γραμματοσειρών. Μετά παίζει λίγο μελέτη για το layout. Ποιές ενότητες και πως μπορούν να μοιραστούν κοινές δηλώσεις CSS, προβλήματα που μπορούν να προκύψουν σε παλιούς browsers, γενικά μια στρατηγική για ένα solid layout. Η συγγραφή κώδικα ξεκινάει πρώτα με την HTML και μετά ακολουθώ μια “Onion skin” τακτική. Η τακτική αυτή λέει ξεκινάω από τη Markup και μετά σε όλες τις σελίδες δημιουργώ το layout – βάζω τα στοιχεία στη θέση τους – και μετά ασχολούμαι με fine tuning ανά περιοχή (images, backgrounds etc). Αυτό βέβαια όταν έχω όλα τα PSD από τον πελάτη. Αν οι μακέτες έρχονται μια μια καθώς σχεδιάζονται τα πράγματα εκεί είναι διαφορετικά και συνήθως πιο πολύπλοκα. Αλλά αυτό το κομμάτι θα το δούμε σε ένα άλλο post. Πίσω στο project. Για την ώρα ασχολούμαι μόνο με browsers της προκοπής και απλά σημειώνω κάπου τι πρέπει να γίνει σε Internet Explorer.
Δοκιμές
Αφού τελειώσω δοκιμάζω σε όσους περισσότερους browsers μπορώ. Μετά ασχολούμαι με Internet Explorer. Γνωρίζοντας και έχοντας έρθει αντιμέτωπος με τα περισσότερα τερτίπια τους (ie6 + 7) αρκετά γρήγορα εφαρμόζω τις αντίστοιχες δηλώσεις αποκλειστικά για αυτούς και that’s it. Αλλά δε τελειώσα ακόμα. Μια γρήγορη ματιά στα PSD μήπως μου ξέφυγε τίποτα και μετά πίσω στο κώδικα για να δώ μήπως υπάρχουν περιττές δηλώσεις ή μήπως υπάρχει κάτι που μπορεί να βελτιωθεί. Η διαδικασία αυτή είναι και η αγαπημένη μου. Κάθε φορά.
Σκούπισμα, Σφουγγάρισμα
Αφού παραδώσω και δε καίγομαι να ξεκινήσω κάτι άλλο, ακολουθώ ένα ακόμα βήμα σε όλη τη διαδικασία. Βρίσκω τα κομμάτια κώδικα που με παίδεψαν για κάποιο λόγο και τα καταγράφω αναλυτικά. Έτσι, σε μελλοντικά projects που πέφτω στο ίδιο πρόβλημα έχω ένα καλό σημείο αναφοράς και άμεσης επίλυσης.
Λίγα λόγια για τον “Πελάτη”
Οι πελάτες σε αυτή τη δουλειά είναι είτε designers που δεν νιώθουν πως το “έχουν”, είτε developers που δεν έχουν χρόνο. Αν σκέφτεσαι να ξεκινήσεις μια τέτοια υπηρεσία με την οποία θα σε πλησιάσουν και άνθρωποι εκτός συνόρων έχω να σου πω αυτό. Πρόκειται για ανθρώπους. Με 2 χέρια και 2 πόδια, όπως εσύ. Άλλοι πιο έμπειροι, άλλοι άσχετοι όσο ποτέ. Κάποιοι ευγενικοί, κάποιοι ξερόλες,περίεργοι και για μπουνιές. Σε όλους δώσε την αίσθηση πως είσαι εκεί σε ότι και αν χρειαστούν αφού βάλεις τα λεφτά στη τσέπη μετά τη παράδοση. Όχι όμως μόνο στα λόγια. To support σε αυτή την ιστορία είναι το κλειδί για sticky clients. Αν κάποια στιγμή νιώσεις πως πλέον δουλεύεις τσάμπα, πες το. Προσωπικά δεν μου αρνήθηκε ΚΑΝΕΙΣ να πληρώσει κάτι παραπάνω για να πάρει αυτό που θέλει. Η λεπτή γραμμή εδώ όμως είναι να καταλάβεις πότε σου ζητάει αλλαγές σε δικές σου κακοτεχνίες και πότε νέα features. Εδώ είναι και το σημείο που θα δείξεις αν είσαι Pro ή περαστικός από τη δουλειά.
Κλείνοντας
Είναι διαδικασία που μπορεί να καταλήξει σε άσχημη ρουτίνα και απαιτεί πραγματική αγάπη για να το κάνει κανείς βασική του δραστηριότητα. Προσωπικά 2 χρόνια μετά, ενώ έχουν υπάρξει περίοδοι που είπα δε πάει άλλο, συνεχίζω με το ίδιο κέφι όπως τότε που περίμενα να σκάσει η πρώτη παραγγελία. Και να ΞΑΝΑ πω πως υπάρχει χώρος και για άλλους. Ο τόπος μπορεί να έχει γεμίσει, αλλά η ζήτηση αυξάνεται δυσανάλογα. Go.w
Grids are limiting
24.05.2010
Έπεσα τυχαία πάνω σε αυτό το quote μέσω ενός link που έδωσε ο Βασίλης στο twitter.
Άλλος ένας χρόνος στη πλάτη
13.02.2010
31 λοιπόν. Εντάξει η αλήθεια είναι πως κλείνοντας τα 30 με έπιασαν λίγο τα υπαρξιακά μου αλλά επειδή εκείνη τη περίοδο είχα ελεύθερο χρόνο. Φέτος με πέτυχε σε φάση φθοράς / αφθαρσίας και έτσι δε πήρα χαμπάρι τι παίχτηκε.
Αλλαγές
Μέσα στο χρόνο που πέρασε έγιναν κάποιες μεγάλες αλλαγές κυρίως σε επαγγελματικό επίπεδο ή μάλλον καλύτερα μόνο σε επαγγελματικό επίπεδο. Από πέρυσι το χειμώνα το xhtmlme.com είναι η κύρια επαγγελματική μου ενασχόληση. Πλέον έχω κάποιους σταθερούς πελάτες, κάποιους περιστασιακούς και κάποιες άσχετες παραγγελίες. Όπως και να έχει λατρεύω να “κόβω” μακέτες. Η ιδέα ξεκίνησε όταν διαπίστωσα πως σε αυτό το κομμάτι είμαι καλύτερος από οτιδήποτε άλλο κάνω. Και ενώ υπάρχουν πολλά πράγματα να μάθω ακόμα, βλέπω πως οι πελάτες μου μένουν ικανοποιημένοι αλλά και οι χρόνοι μου είναι πραγματικά γρήγοροι.
Συνεχίζω να αναλαμβάνω έργα για πελάτες αλλά πλέον έχω τη δυνατότητα να επιλέγω με τι θα ασχοληθώ. Και αυτό φυσικά έχει ως αποτέλεσμα καλύτερα αποτελέσματα.
Η άλλη μεγάλη αλλαγή είναι πως αποφασίσαμε με το Ροζ Μουστάκι να μεταφέρουμε το γραφείο στο σπίτι και να δουλεύουμε δίπλα στο υπνοδωμάτιο μας. Πραγματικά καλή φάση μιας και οι πελάτες μας το δεχτήκανε χωρίς κανένα πρόβλημα, ο χρόνος που κερδίσαμε είναι σχεδόν 2 – 3 ώρες την ημέρα (λόγω μετακινήσεων) και μειώσαμε αρκετά τα μηνιαία έξοδα μας. Δεν είναι μόνιμη λύση αλλά για την ώρα είμαι πολύ ικανοποιημένος από το πως κυλάει το έργο.
iMac
To δώρο των γενεθλίων μου ήταν ένα iMac 21.5. Και η αλλαγή ήταν μεγάλη. 16 χρόνια με τα PC και από το DOS, τα Windows, τους Drivers και όλα αυτά βρέθηκα σε ένα κόσμο όπου με έκανε να νιώσω όπως τη πρώτη μέρα που άγγιξα υπολογιστή. Χαμένος. Κράτησε πολύ λίγο όμως μιας και βλέπω πως ώρα με την ώρα συνηθίζω το νέο περιβάλλον και μάλιστα πολλά πράγματα ενώ διαφορετικά βλέπω πως γίνονται καλύτερα. Αυτό το κόκκινο κουμπάκι πάνω αριστερά πάντως (close) δε μπορώ να το συνηθίσω. Είναι πολύ μικρό. Αλλά είνα σταγόνα στον ωκεανό μπροστά σε όλα αυτά που με έχουν αφήσει άφωνο μέχρι τώρα. Σταθερό περιβάλλον, με πολύ λιγότερα κλικς μετακίνησης λόγο Εxpose, με ένα τρελό editor για συγγραφή κώδικα (Coda) και με μια τεράστια οθόνη που με κάνει να νιώθω πως οτιδήποτε μεγαλύτερο απλά είναι υπερβολή. Σε καμία περίπτωση δε πρόκειται να σταματήσω να έχω επαφές με τα Windows μιας και ποτέ δε μου δημιούργησαν πρόβλημα αλλά και γιατί το laptop και το netbook μου έχουν Windows. Όπως και να έχει μιλάμε για τέλος εποχής.
Το μέλλον
Για το μέλλον έχω κάποια πλάνα και εύχομαι μέχρι του χρόνου που θα ξαναγράψω για το ίδιο γεγονός, κάποια να έχουν υλοποιηθεί. Οι γνώσεις μου από το 2006 που απολύθηκα από φαντάρος σε θέματα κατασκευής ιστοσελίδων έχουν υπερδιπλασιαστεί και θέλω κάθε μέρα που περνάει να συνεχιστεί έτσι. Κατάφερα να δαμάσω τεχνολογίες όπως jQuery και Codeigniter, έβαλα στο “οπλοστάσιο” μου το ExpressionEngine και εξερευνώ το κόσμο HTML5/CSS3 με πολύ θετικά αποτελέσματα. Ρίχνοντας γρήγορες ματιές στην Objective C αυτές τις μέρες επίσης βλέπω πως το κεφάλι μου αντιλαμβάνεται αρκετά πράγματα οπότε σίγουρα θα υπάρξουν Κυριακές με hello world apps για την πλατφόρμα OS X.Το wordpress themes μαγαζάκι θα σκάσει μύτη επίσης κάποια στιγμή στα κοντά και εύχομαι και αυτό να έχει τη τύχη του xhtmlme.com.
Αυτά τα ωραία (για μένα).
