Εντάξει ο μήνας έχει 22 και ακόμα καλοκαίρι δε καταλάβαμε. Ούτε μάλλον θα πάρουμε χαμπάρι. Αλλά τι να γίνει, you win some, you lose some. Έτσι λοιπόν, μέσα στο κατακαλόκαιρο είπαμε να ετοιμάσουμε τις νέες μας υπηρεσίες. Vector Stories λοιπόν. To νέο site της Ελενίτσας (όχι Ελένης είπαμε). Οι υπηρεσίες που προσφέρει έχουν να κάνουν με οτιδήποτε ξεκινάει από χαρτί και καταλήγει σε μορφή vector. Πάει και παραπέρα αλλά ρίξτε μια ματιά και αν χρειαστείτε κάτι, μη διστάσετε να επικοινωνήσετε μαζί της.

Άργησα αλλά η αντίστροφη μέτρηση ξεκίνησε. Ένα ένα τα πράγματα μπαίνουν στη θέση τους και το cssigniter.com σε λίγο καιρό, το Σεπτέμβριο δλδ θα είναι online. Για όσους δε γνωρίζουν πρόκειται για άλλο ένα WordPress themes shop. Έχει γεμίσει ο τόπος, αλλά προσωπικά πιστεύω πως βρήκα τρόπο να διαφοροποιηθώ σε αρκετά σημεία. Όπως και να έχει στο cssigniter.com υπάρχει ένα newsletter στο οποίο μπορείτε να γραφτείτε και να μάθετε πότε θα είναι το site online όπως επίσης κάποια στιγμή θα δείτε και κάποια teasers από τα θέματα που θα βγούν για αρχή στον αέρα.

Επίσης έχω άλλο ένα twitter account ( @cssigniter ) στο οποίο και εκεί μπορείτε να παρακολουθήσετε θέματα σχετικά με αυτό το site.

Εργαλεία

Πολύ σημαντικό κομμάτι όπως και σε κάθε τι που κάνουμε, όχι μόνο στο 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

Έπεσα τυχαία πάνω σε αυτό το quote μέσω ενός link που έδωσε ο Βασίλης στο twitter.

Έτσι, κάποιος να μπορεί ελεύθερα να διαλέξει τις ημερομηνίες που θέλει χωρίς όμως να μπορεί να διαλέξει π.χ. ημερομηνία επιστροφής μικρότερη από την ημερομηνία αναχώρησης.

Στο παρακάτω παράδειγμα είναι ακριβώς ο ίδιος κώδικας με του προηγούμενου post με τη διαφορά πως έχουμε ένα extra έλεγχο και στις 2 περιπτώσεις. Τσεκάρουμε αν η ημερομηνία επιστροφής είναι μικρότερη της ημερομηνίας αναχώρησης. Αν ναι, τότε ενημερώνονται μεταξύ τους οι 2 datepickers.

$('#dep').datepicker({
           inline: true,
           onSelect: function(theDate) {
               var dep = $('#dep').datepicker("getDate");
               var arr = $('#arr').datepicker("getDate");
               if (arr < dep) {
                var plustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
                plustwo.setDate(plustwo.getDate() + 2);
                $('#arr').datepicker('setDate', plustwo);
               }
           }
       });

       $('#arr').datepicker({
           inline: true,
           onSelect: function(theDate) {
               var dep = $('#dep').datepicker("getDate");
               var arr = $('#arr').datepicker("getDate");
               if (arr < dep) {
                var minustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
                minustwo.setDate(minustwo.getDate() - 2);
                $('#dep').datepicker('setDate', minustwo);
               }
           }
       });

Και φυσικά το παράδειγμα μας.

Τι θα έπρεπε να κάνει δηλαδή;

Κοίτα, 2 πράγματα θα μπορούσε να κάνει. Το ένα είναι να “ενημερωθεί” για την ημερομηνία αναχώρησης και να γίνει και αυτή ίδια και το δεύτερο που θα μπορούσε να κάνει είναι να “ενημερωθεί” για την ημερομηνία αναχώρησης και να πάει 3 – 4 μέρες μπροστά. Τα ίδια θα έπρεπε να κάνει και ημερομηνία αναχώρησης αν παίξουμε με την ημερομηνία επιστροφής. Με τον επιλογέα ημερομηνίας (πως λέμε εντολέας; καμία σχέση) του jQuery UI κάτι τέτοιο είναι πολύ απλό να γίνει (και οι περισσότεροι το χρησιμοποιούν απλά για να εμφανίσουν τα ημερολόγια). Για δες τι θα κάνουμε. Επιλέγουμε μια ημερομήνια, είτε αναχώρησης είτε επιστροφής και προσθέτουμε ή αφαιρούμε αντίστοιχα 5 μέρες στο αντίστοιχο date picker.

Λίγος, τόσο λίγος κώδικας

Για αρχή απλά εμφανίζω 2 ημερολόγια ως εξής.

$('#dep').datepicker({
   inline: true,
   onSelect: function(theDate) {
     var plustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
     plustwo.setDate(plustwo.getDate() + 5);
     $('#arr').datepicker('setDate', plustwo);
   }
});

$('#arr').datepicker({
   inline: true,
   onSelect: function(theDate) {
     var minustwo = $.datepicker.parseDate('mm/dd/yy', theDate);
     minustwo.setDate(minustwo.getDate() - 5);
     $('#dep').datepicker('setDate', minustwo);
   }
});

Τα “#dep” και “#arr” είναι 2 κενά div pairs που απλά υπάρχουν στην markup μας για να συνδέσω τα ημερολόγια. Τίποτα σπουδαίο. Αυτό που έχει σημασία να δούμε είναι τι συμβαίνει στο συμβάν onSelect. Σε απλά Ελληνικά κάνω το εξής. Στο συμβάν onSelect έχω μια function όπου της περνάω μια παράμετρο. Την ημερομηνία που έχω επιλέξει. Φυσικά την περνάω σαν string. Χρησιμοποιώντας το utility function $.datepicker.parseDate δημιουργώ μια ημερομηνία από το string που περάσαμε σαν παράμετρο και μετά με τις παλιές καλές Javascript functions setDate kai getDate απλά προσθέτω στη πρώτη περίπτωση (αναχώρηση) και αφαιρώ στη 2η (επιστροφή) 5 μέρες. Η τελευταία γραμμή απλά ενημερώνει τον γείτονα date picker με τη νέα ημερομηνία.

15 λεπτά (μαζί με την έρευνα) για να υλοποιηθεί. Ε κρίμα δεν είναι να παιδευόμαστε;

Στο επόμενο σχετικό tutorial θα δούμε τι περιορισμούς μπορούμε να βάλουμε αλλά και να βελτιώσουμε τη λογική των date pickers. Νάνι τώρα.

Οδηγίες

Κατεβάστε το plugin, ενεργοποιήστε το και πάτε σε κάποιο post. Θα εμφανιστεί ένα panel. Εκεί μπορεί να διαλέξετε κάποια κατηγορία και από τα post που θα εμφανιστούν να επιλέξετε ποιά posts θέλετε να συσχετίσετε. Μπορείτε να κάνετε όσες συσχετίσεις θέλετε. Το Filter posts για την ώρα φιλτράρει τα posts μιας κατηγορίας ψάχνοντας από την αρχή του ονόματος του post.  Αυτό θα διορθωθεί. Τα posts που έχετε συσχετίσει μπορούν να ταξινομηθούν με drag and drop. Για την ώρα δε θα σας μπερδέψω με το πως θα εμφανίσετε τις συσχετίσεις στο blog σας γιατί δεν έχω καταλήξει ακόμα στις επιλογές που θα δώσω. Παρόλα αυτά θα ήθελα τα σχόλια σας, τυχόν προβλήματα ή οτιδήποτε πιστεύετε χρειάζεται βελτίωση στο back-end κομμάτι.

Μπορείτε να κατεβάσετε τη πρώτη έκδοση του plugin. Περιμένω τα σχόλια σας!

H λύση που προτείνω είναι απλή και ίσως κάποιοι από εσάς το κάνετε ήδη. Φτιάξτε μια κεντρική κατηγορία με ένα όνομα π.χ “Boηθητικές Κατηγορίες” και όλες τις κατηγορίες που χρησιμοποιείτε για κάποιο συγκεκριμένο σκοπό απλά δηλώστε τις σαν υποκατηγορίες της. Με αυτό το τρόπο όταν θέλετε να κάνετε exclude όλες αυτές τις κατηγορίες από ένα loop απλά κάνετε exclude το parent category και ξεμπερδέψατε.

Hope it helps.

Codeigniter

Κατεβάστε το αρχείο dummy.php.zip, αποσυμπιέστε και ρίξτε το αρχείο dummy_pi.php στο φάκελο plugins της εγκατάστασης codeigniter που έχετε στο δίσκο. Δημιουργήστε ένα φάκελο images στο ίδιο επίπεδο με το φάκελο system και μέσα στο images δημιουργήστε ένα φάκελο με όνομα “dummy” και δώστε δικαιώματα 777.
Μετά στον Controller σας φορτώνετε το plugin (η αν θέλετε στο autoload):

$this->load->plugin('dummy');

Στο view που θέλετε να δημιουργήσετε ένα dummy image απλά κάντε το ως εξής:

 img src="? echo dummy('100x400'); ?" />

Στο παραπάνω λείπει το < στο img tag και τα < > στο echo. Για κάποιο λόγο δεν εμφανίζονται σωστά με το συγκεκριμένο highlighter. Προσθέστε τα όμως.

Και θα δημιουργηθεί μια εικόνα μεγέθους 100px X 400px

Expression Engine 1.6.x

Κατεβάστε το αρχείο pi.dummy.php.zip, αποσυμπιέστε και ρίξτε το αρχείο pi.dummy.php στο φάκελο plugins της εγκατάστασης expression engine που έχετε στο δίσκο. Δημιουργήστε ένα φάκελο με όνομα “dummy” μέσα στο φάκελο images και δώστε δικαιώματα 777.

Σε οποιοδήποτε template μπορείτε να δημιουργήσετε dummy images ως εξής:

 {exp:dummy class="imgClass"}500x500{/exp:dummy}

Αν δε περάστε class name τότε η εικόνα παίρνει ένα default class με όνομα “dummyimg”.

Have fun!