Μουστάκι και ιστορίες
21.07.2010
Εντάξει ο μήνας έχει 22 και ακόμα καλοκαίρι δε καταλάβαμε. Ούτε μάλλον θα πάρουμε χαμπάρι. Αλλά τι να γίνει, you win some, you lose some. Έτσι λοιπόν, μέσα στο κατακαλόκαιρο είπαμε να ετοιμάσουμε τις νέες μας υπηρεσίες. Vector Stories λοιπόν. To νέο site της Ελενίτσας (όχι Ελένης είπαμε). Οι υπηρεσίες που προσφέρει έχουν να κάνουν με οτιδήποτε ξεκινάει από χαρτί και καταλήγει σε μορφή vector. Πάει και παραπέρα αλλά ρίξτε μια ματιά και αν χρειαστείτε κάτι, μη διστάσετε να επικοινωνήσετε μαζί της.
Με τσίχλα και καπέλο
18.07.2010
Άργησα αλλά η αντίστροφη μέτρηση ξεκίνησε. Ένα ένα τα πράγματα μπαίνουν στη θέση τους και το cssigniter.com σε λίγο καιρό, το Σεπτέμβριο δλδ θα είναι online. Για όσους δε γνωρίζουν πρόκειται για άλλο ένα WordPress themes shop. Έχει γεμίσει ο τόπος, αλλά προσωπικά πιστεύω πως βρήκα τρόπο να διαφοροποιηθώ σε αρκετά σημεία. Όπως και να έχει στο cssigniter.com υπάρχει ένα newsletter στο οποίο μπορείτε να γραφτείτε και να μάθετε πότε θα είναι το site online όπως επίσης κάποια στιγμή θα δείτε και κάποια teasers από τα θέματα που θα βγούν για αρχή στον αέρα.
Επίσης έχω άλλο ένα twitter account ( @cssigniter ) στο οποίο και εκεί μπορείτε να παρακολουθήσετε θέματα σχετικά με αυτό το site.
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
Τα πρώτα μου WordPress plugins είναι πλέον διαθέσιμα
11.06.2010
Για το πρώτο είχα μιλήσει και πλέον μαζί με κάποιες βελτιώσεις είναι διαθέσιμο για χρήση. Το 2o plugin (Custom CSS) προέκυψε από ανάγκη σήμερα το πρωί. Για περισσότερα δείτε τα σχετικά posts στο Webtoolkit4.me
Grids are limiting
24.05.2010
Έπεσα τυχαία πάνω σε αυτό το quote μέσω ενός link που έδωσε ο Βασίλης στο twitter.
