July 2nd, 2009
Επειδή πολύ θα ήθελα να ανοίξουμε ένα χώρο για να δούμε τι χρησιμοποιεί ο καθένας για να κάνει τη δουλειά του, είπα να το ξεκινήσω εγώ με ένα post. Για να δούμε λοιπόν.
Για αρχή, να πω πως οι δικές μου μέρες στο γραφείο διαφέρουν πολύ στο σετ εργαλείων που χρησιμοποιώ. Υπάρχουν μέρες που μπορεί να τη βγάλω όλη μέρα στο Photoshop, αλλά υπάρχουν και μέρες που μπορεί να έχω ανοιχτά όλα τα προγραμμάτα του κόσμου. Να πω πως δουλεύω σε PC και αποφάσισα να παραμείνω σε PC. Οι λόγοι σε άλλο post. Στο κομμάτι του σχεδιασμού λοιπόν, η εργαλειοθήκη μου αποτελείται από τα εξής:
Sketchbook
Εδώ δε ξέρω για εσάς, αλλά εγώ κάτι παπαριές που ακούω για επώνυμα sketchbooks τα ακούω βερεσέ. Οτιδήποτε είναι λευκό χαρτί, μου κάνει. Το ίδιο και με τα στυλό, μαρκαδοράκια, μολυβάκια. Δεν έχω προτίμηση. Έχω πάρει πάντως και επώνυμα να δώ τι σκατά. Τα ράσα δε κάνουν το παπά. Τα σχέδια μου είναι απαίσια αλλά κάνουν τη δουλειά στο να μου δείξουν που και πως θα κινηθώ.
Photoshop
Δε νομίζω πως υπάρχει web designer που να μη το έχει εγκατεστημένο. Παραμένω στην έκδοση CS3 μιας και τα μπλιμπλίκια της CS4 δεν με ενδιαφέρουν. Πολύ γρήγορη έκδοση και καταπληκτικό πρόγραμμα.
Illustrator
Οτιδήποτε φεύγει από το sketchbook και έχει να κάνει με γραφικό, λογότυπο κλπ. θα περάσει πρώτα από εδώ. Μου αρέσει να έχω τα πάντα σε vector μορφή μιας και ποτέ δε ξέρεις που και τι θα χρειαστεί. Επίσης για κάποιο λόγο το path tool συμπεριφέρεται στα χέρια μου πολύ καλύτερα απ’ ότι στο Photoshop. Δε ξέρω γιατί.
AcdSee 8.0
Έχουν βγεί πολλές εκδόσεις από τότε, αλλά εμένα επίσης αυτή με βολεύει. Μπορώ εύκολα να τυπώσω contact sheets σε A3 χαρτί, να μαρκάρω τις φωτογραφίες που κατεβάζω από stocksites και να τις κατηγοροποιήσω κλπ εύκολα και γρήγορα. Για όσους δε το γνωρίζουν πρόκειται για image manager.
Τώρα στο κομμάτι συγγραφής κώδικα:
RapidPHP 2008
Έχω μείνει άφωνος με τον συγκεκριμένο editor. Δοκίμασα πολλούς και δε με βόλεψε κανείς. Είναι σαν τα ρούχα. Ρίξτε μια ματιά, μπορεί να σας ενδιαφέρει. Έχει ότι χρειάζομαι για τη συγγραφή html, css, php καθώς και ένα πολύ βολικό mysql viewer. Το κάτι άλλο. Ανοίγει στο φτερό χωρίς να περιμένω (Κατάλαβες Eclipse?) κανά 2λεπτο.
And that’s it. Δεν έχω πλέον κάτι άλλο εγκατεστημένο. Με έχει βολέψει απίστευτα και έχει περάσει και ένα καλό τεστ σε ένα πρόσφατο project. 10/10!
Για FTP δουλειές χρησιμοποιώ, δε ξέρω πόσα χρόνια πλέον, το WS_FTP και έτσι, τιμής ένεκεν, αγοράζω πάντα τη τελευταία έκδοση. Ξέρω πως υπάρχουν και δωρεάν αλλά και πάλι, κάνει τη δουλειά και με το παραπάνω.
Το Flash πάνω που άρχισε να με χαιρετάει, ήρθε ένα από τα πιο ενδιαφέροντα projects που έχει πέσει στα χέρια μου και ως “Certified” στο Flash MX (τσκςς είπες τίποτα, επίσης είμαι certified σε Coldfusion (RIP) ), είπα να ασχοληθώ. Πρόκειται για full flash site, που αφορά ένα καθαρά καλλιτεχνικό θέμα και θα περάσουμε, για άλλη μια φορά καλά τα 2 μας. Other than that, ησυχία. Παίζω καμιά φορά μαζί του αλλά όχι πολύ πλέον.
Επίσης εγκατεστημένο έχω το TortoiseSVN μιας και τώρα τελευταία λόγω xhtmlme είναι αρκετοί αυτοί που ζητάνε εργασία μέσω SVN. Έτσι έκανα τη μελέτη μου και μπορώ να συμμετέχω μέσω TortoiseSVN χωρίς κανένα πρόβλημα.
Και.. έτσι. Αυτά. Εσείς;
June 26th, 2009
Τους έχετε δεί σίγουρα σε κάποιο e-shop. Πρόκειται για τους τίτλους - σύμβολα τους οποίους βλέπουμε κατά τη διαρκεία της διαδικασίας πληρωμής που απαιτεί παραπάνω από μια σελίδες για να ολοκληρωθεί.
Όπως πάντα το παραδειγμά μας.
Για να δούμε τι θα χρειαστούμε λοιπόν.
HTML:
-
-
-
<li class="active">Αναζήτηση
</li>
-
<li class="pending">Πληροφορίες προϊόντος
</li>
-
<li class="pending">Στοιχεία πληρωμής
</li>
-
<li class="pending">Ευχαριστούμε
</li>
-
</ul>
-
</div>
Ναι, αυτό είναι όλο το markup που θα χρειαστούμε. Αναλόγως τη περίπτωση ένα div που θα κρατήσει το σύστημα μας και ένα unordered list (ή ordered, ότι προτιμάτε). Όπως παρατηρούμε στο παράδειγμα μας υπάρχουν 3 "καταστάσεις στις οποίες μπορεί να βρίσκεται μια σελίδα. Done = ολοκληρώσαμε και πήγαμε παρακάτω, Active = η σελίδα στην οποία βρισκόμαστε τώρα, Pending = οι επόμενες σελίδες.
Αρα εκτός απο το γενικό styling που θα ορίσουμε στα list items, χρειαζόμαστε και κάποιες συγκεκριμένες δηλώσεις για τη κάθε "κατάσταση". 3 εικόνες για τα σύμβολα (done,active,pending) και κάποια μικρή διαμόρφωση για να διαφοροποιήσουμε λίγο την active κατάσταση από τις άλλες 2 (done, pending). Επίσης χρησιμοποιώ ένα αρχείο gif 1x1 για την γραμμή που περνάει πίσω από όλα τα βήματα.
Για να το δούμε.
CSS:
-
div#steps {
-
width:920px;
-
margin:20px auto;
-
border:solid 1px #f3f3f3;
-
padding:20px;
-
}
-
-
div#steps ul {
-
list-style:none;
-
background: url(bg_line.gif) repeat-x 0 45px;
-
}
-
-
div#steps ul li {
-
float:left;
-
width:25%;
-
text-align:center;
-
height:65px;
-
}
-
-
div#steps ul li.done {
-
background: url(bg_done.gif) no-repeat bottom center;
-
color:#9d9d9d;
-
}
-
-
div#steps ul li.active {
-
background: url(bg_active.gif) no-repeat bottom center;
-
color:#333;
-
font-weight:bold;
-
}
-
-
div#steps ul li.pending {
-
background: url(bg_pending.gif) no-repeat bottom center;
-
color:#9d9d9d;
-
}
Πολύ απλά τα πράγματα. Πέραν των γενικών δηλώσεων όπως βλέπουμε έχουμε και 3 δηλώσεις που θα τις αντιστοιχίσουμε στις 3 καταστάσεις. li.done, li.active και li.pending. Στις γενικές δηλώσεις των list items βλέπουμε πως καταρχήν τα εμφανίζουμε οριζόντια (float:left), ορίζουμε μέγεθος ϊσο με 25% το οποίο αναλόγως τη περίσταση αλλάζει. Αν π.χ έχουμε 5 βήματα σε ένα χώρο θα ήταν 20% κ.ο.κ. Φυσικά ορίζουμε και ύψος (65px) αλλά και τη θέση του κειμένου (text-align:center). Οι παραπάνω δηλώσεις αφορούν όλα τα list items. Για τη κάθε κατάσταση χωριστά το μόνο που αλλάζει είναι το background image και το χρώμα του κειμένου.
Έυκολα πραγματάκια που μας κάνουν τη ζωή πιο εύκολη (Yeah i need vacations, i know).
June 24th, 2009
Σε κάποιο project έπρεπε να σελιδοποιήσω ένα σετ στοιχείων σε ένα sidebar το οποίο ήταν μικρό - μια σειρά από τίτλους και περιλήψεις νέων συγκεκριμένα - και για το οποίο δεν ήθελα να χρησιμοποιήσω AJAX ή κάτι παρόμοιο για τη σελιδοποίηση τους. Τα ήθελα σε πεντάδες μιας και ήταν περίπου 15 σετ στοιχείων και ήθελα να εμφανίσω τα γνωστά "previous - next" κουμπάκια καθώς και τον αριθμό της "σελίδας" που βρισκόμαστε. Με άλλα λόγια ένα κανονικό paging system αλλά στο sidebar.
Για τους βιαστικούς και για όσους δε κατάλαβαν τι θα κάνουμε μπορείτε να δείτε το παράδειγμα.
Μιας και στο συγκεκριμένο project λoiπόν, χρησιμοποίησα jQuery και το αγαπημένο μου jQuery Cycle plugin για άλλο λόγο, είπα να το χρησιμοποιήσω και γι αυτό το σκοπό. Αν ρίξετε μια ματιά στο συγκεκριμένο plugin θα δείτε ότι στην ουσία μπορούμε να κάνουμε πολλά πράγματα με εικόνες. Slideshows, slideshows με paging system, slideshows με περιεχόμενο εκτός εικόνων και πολλά άλλα όμορφα πράγματα (αν χρησιμοποιηθεί σωστά).
Το πρόβλημα που είχα ήταν πως ναι δεν είναι δα και τόσο δύσκολο αυτό που θέλουμε να κάνουμε, αλλά αν το δούμε πιο προσεκτικά, έχει μερικά "μαύρα" σημεία. Αν δείτε το παράδειγμα, θα δείτε πως στην ουσία πρόκεται για μια σειρά απο unorders lists, 1 για κάθε σετ που εμφανίζεται. Το κάθε σετ περιέχει τίτλους και μικρές περιλήψεις. Αν λοιπόν χρειαστεί μέσα σε αυτές τις μικρές περιλήψεις να βάλουμε links προς άλλες εσωτερικές σελίδες στο site μας και πατήσουμε πάνω σε αυτά τα links, τότε η σελίδα που θα δούμε θα περιέχει το sidebar μας σελιδοποιημένο μεν, αλλά στο πρώτο σετ πάντα. Αν π.χ εγώ πάω στο 2ο σετ στοιχείων και πατήσω σε κάποιο link, πως αυτό το ρημάδι θυμάται στη νέα σελίδα να δείξει το 2ο σετ στοιχείων αντί του 1ου; Μπέρδεμα; Μια εικόνα ίσως βοηθήσει:
Ε ναι, cookies. Μπορείτε να δοκιμάστε και το πάραδειγμα που έχω ανεβάσει. Αν πάτε στη σελίδα π.χ 3 / 4 και κλείσετε το παραθύρο ή δείτε κάποια άλλη σελίδα και γυρίσετε πίσω, θα δείτε πως "θυμάται" που είχατε μείνει. Τοινκ! Για να δούμε πως γίνεται.
Θα χρειαστούμε φυσικά jQuery, jQuery Cycle plugin και το καταπληκτίκ Cookies Plugin. Go get them.
Την HTML που χρησιμοποιώ τη βλέπετε στο source του παραδείγματος που στην ουσία πρόκειται για 4 UL sets. (Για να μη γεμίζουμε το τόπο εδώ). Για να δούμε λοιπόν τι κάνουμε:
JAVASCRIPT:
-
$(function() {
-
var startAt = getCookie();
-
if (startAt == null){ startAt = 0;}
-
$('#list').cycle({
-
fx: 'turnDown',
-
speed: 'slow',
-
timeout: 0,
-
next: '#next',
-
prev: '#prev',
-
startingSlide: parseInt(startAt),
-
after: function (curr, next, opts) { setCookie(opts.currSlide,opts.slideCount - 1); }
-
});
-
});
-
//setter
-
function setCookie(current,last)
-
{
-
$.cookie('myIndex', current);
-
var lastdisplay = last + 1 ;
-
var currentdisplay = current + 1;
-
$("#pageof").html(currentdisplay + " / " + lastdisplay);
-
-
if (current == 0) {
-
$("#prevholder").css("visibility","hidden");
-
$("#nextholder").css("visibility","visible");
-
}
-
if (current> 0 && current <last) {
-
$("#prevholder").css("visibility","visible");
-
$("#nextholder").css("visibility","visible");
-
}
-
if (current == last) {
-
$("#prevholder").css("visibility","visible");
-
$("#nextholder").css("visibility","hidden")
-
}
-
}
-
//getter
-
function getCookie() {
-
return $.cookie('myIndex');
-
}
3 πραγματάκια όλα κι όλα.
1. Ελέγχουμε αν υπάρχει ορισμένο cookie. Αυτό το κάνουμε δημιουργώντας μια απλή συνάρτηση με το όνομα getCookie() με την οποία επιστρέφουμε την τιμή του cookie myIndex. Αν είναι ορισμένο βάζουμε τη τιμή σε μια μεταβλητή (startAt), αν όχι ορίζουμε την startAt ίση με μεδέν να πούμε (Πήρα κλήση από τη μαγκιά). Θα τη χρησιμοποιήσουμε παρακάτω.
2. Μελετώντας το jQuery cycle plugin, του περνάμε μερικές παραμετρούλες για να αρχικοποιήσουμε (μα είναι λέξη αυτή;) τη σελιδοποίηση. Αυτές που μας ενδιαφέρουν είναι η παράμετρος startingSlide και after. Με την startingSlide λέμε στο plugin σε ποιά "σελίδα" να ξεκινήσει όταν φορτώσει η σελίδα μας. Και φυσικά της περνάμε την τιμή της startAt. Χα! Πάει αυτό. Τώρα θέλουμε άλλο ένα μπλιμπλίκι το οποίο θα μας βοηθήσει κατά την περιήγηση ανάμεσα στις σελίδες να θυμόμαστε σε ποιά σελίδα είμαστε. Πατώντας δηλαδή π.χ "επόμενο σετ" και αφού δούμε το επόμενο σετ κάπως να κρατήσουε κάπου αυτή τη σελίδα. Ε, θα ορίσουμε ένα cookie. H παράμετρος after μας δίνει τη δυνατότητα να κάνουμε πράγματα αφού έχουμε δεί το επόμενο σετ. Πάτησα επόμενο σετ, είδα τα αποτελέσματα και.. after? set a Cookie!
3. setCookie() λοιπόν με 2 παραμέτρους. Την τρέχουσα σελίδα (current = opts.currSlide) και τη τελευταία (last = opts.slideCount - 1). Και τις 2 τιμές, μας τις προσφέρει απλόχερα το cycle plugin. Μια ματιά στo documentation θα σας πείσει. Με τις 2 αυτές τιμές πλέον στο χέρι, μπορούμε να κάνουμε όοοοοτι θέλουυμε. Να τις εμφανίσουμε (currentdisplay = τρέχουσα σελίδα, lastdisplay = τελευταία σελίδα) να κάνουμε έλεγχο σε ποια σελίδα βρισκόμαστε και να εμφανίσουμε ή εξαφανίσουμε τα αντίστοιχα κουμπάκια (επόμενο σετ, προηγούμενο σετ).
Άντε ρε, εύκολο ήτανε τελικά. Ε;
May 17th, 2009
Και επειδή πολύ γουστάρω όταν με φτιάχνεται ή όταν μου κάνετε τη καρδιά περιβόλι, είπα σήμερα να μοιραστώ κάτι μαζί σας και φυσικά να μου πείτε τη γνώμη σας. Όπως είπα λοιπόν, το webtoolkit4.me με βοήθησε στο να τρέξει το xhtmlme.com. Έφερε δουλειά κλπ. κλπ. Ήρθε η ώρα και το xhtmlme.com να βοηθήσει ένα άλλο project. Όχι άμεσα αλλά μέσω των γνώσεων που μου προσφέρει καθημερινά. Στο xhtmlme.com που λές πέραν του τυπικού slicing (xhtml/css), στο 90% των εργασιών πρέπει αυτό το "πακέτο" να μεταφερθεί στη πλατφόρμα Wordpress. Πλέον μετά από 10άδες τέτοιου είδους εργασίες έχω αποκτήσει μια άνεση με το Wordpress και πολύ πρόσφατα κατάφερα να δαμάσω και τα custom options pages. Σελίδες δλδ που μπορεί κάποιος να δημιουργήσει στο Wordpress και να ρυθμίσει ένα θέμα βάση των επιλογών που δίνονται σε αυτό το custom options page.
Μετά από περίπου 3μηνη έρευνα βρήκα κάποια "κενά" στα διάφορα premium wordpress themes που κυκλοφορούν και αποφάσισα να σχεδιάσω μερικά και φυσικά να τα πουλήσω. Βασικά η θεματολογία που καλύπτω μέχρι τώρα (έχω σχεδιάσει 3 θέματα) κυκλοφορεί, αλλά παρατηρώ πως υπάρχει μεγάλη ζήτηση και μικρή ποικιλία και έτσι είπα πως ίσως μπορώ να πιάσω ένα κομμάτι της συγκεκριμένης αγοράς. Επίσης θα υπάρχει η δυνατότητα αγοράς μόνο του πακέτου xhtml/css (συνοδευόμενο φυσικά απο το PSD) για τη μεταφορά του σε άλλο CMS.
Αυτό που θα ήθελα να μοιραστώ σήμερα μαζί σας είναι ένα preview της σελίδας που θα φιλοξενεί τα συγκεκριμένα θέματα. Το όνομα του συγκεριμένου project όπως θα δείτε απουσιάζει για διάφορους λόγους αλλά μπορείτε να πάρετε μια ιδέα.
Ρίξτε μια ματιά http://theportraitofageek.com/preview/preview.html και πείτε μου. Επίσης να προσθέσω πως θα ήθελα να αποφύγουμε τη κουβέντα για το αν η κίνηση είναι σωστή ή λάθος. Αυτό πλέον έχει πάρει το δρόμο του. Αυτό που θέλω από εσάς είναι να σταματήσετε για 5 - 10 λεπτά αυτό που κάνετε, να δείτε τη μακέτα και να μου πείτε τη γνώμη σας.
BOOOOOOOOOOOOOOOOOOOOOOOOOOOOOM!
May 16th, 2009
Ας μη κρυβόμαστε, το jQuery framework έχει αφήσει κατά πολύ πίσω του τα περισσότερα που κυκλοφορούν. Αυτό ωφείλεται πιστεύω σε πολλούς λόγους αν και οι κυριότεροι κατά τη γνώμη μου είναι η πολύ συχνή ενημέρωση του αλλά και η χρήση του από δημοφιλή projects όπως το Wordpress.
Όταν αποφάσισα να αφήσω την παλιά καλή Javascript, έβαλα το χέρι μου σε διάφορα frameworks. Prototype και MooTools ήταν αυτά που αρχικά έδειχναν πώς αξίζουν το κόπο αλλά ο συνδιασμός jQuery και του documentation που προσφέρει με έκαναν να αφήσω τα υπόλοιπα στην άκρη και να ασχοληθώ μαζί του.
Πρίν αναφερθώ στο βιβλίο, θα ήθελα να ξεκαθαρίσω κάτι. Διαβάζω συχνά ερωτήσεις σε διάφορα groups σχετικές με διάφορες λειτουργίες του framework και καταλήγουν να ρίχνουν την ευθύνη στο ελειπές documentation. Στο 90% αυτών των ερωτήσεων δε φταίει το documentation. Φταίει η έλλειψη γνώσης Javascript. Γιατί να μη ξεχνάμε πως το JQuery είναι ένα framework που απλά κάνει τη ζωή μας πιο εύκολη. Για να δώσω ένα παράδειγμα από τον backend κόσμο, είναι σαν να θέλεις να χρησιμοποιήσεις ένα PHP Framework (CodeIgniter, Kohana, CakePHP etc) χωρίς να γνωρίζεις PHP και να έχεις βασικές γνώσεις αντικειμενοστραφούς προγραμματισμού. Γίνεται; Δε γίνεται. Με άλλα λόγια πιστεύω πως αν κάποιος κάνει τα πρώτα του βήματα στο jQuery framework, καλό είναι να κάνει ένα βήμα πίσω και να διαβάσει λίγο Javascript. Γνώμη μου πάντα.
Το βιβλίο τώρα, προσωπικά το κατατάσω σε εκείνα που πρέπει κανείς να έχει κάπου κοντά του όταν γράφει JQuery. Ξεκινάει δίνοντας μια γενική εικόνα για το framework χωρίς όμως πολλά πολλά και ξεκινάει πολυ γρήγορα να δίνει παραδείγματα. Ένα από τα πράγματα που κάνει σαφές από την αρχή επίσης είναι η χρήση του framework σε συνδυασμό με άλλα και πως να αποφύγουμε πιθανά conflicts. Γιατί εκτός αυτών που ξεκινούν τώρα το ταξίδι του στη χώρα Javascript, υπάρχουν και οι μεταγραφές από άλλα frameworks.
Συνεχίζει και αφιερώνει περίπου 2 κεφάλαια σε όλα αυτά που έκαναν το jQuery framework διάσημο. Τρόπους να ανακτήσουμε κυριολεκτικά όποιο tag θέλουμε και φυσικά τρόπους για να κάνουμε κάτι πάνω σε αυτά τα tags. Πολλά παραδείγματα και εξηγήσεις. Κάποια σημεία θα μπορούσαν να αναλυθούν περισσότερο, αλλά αν διαβάσεις το βιβλίο στη βεράντα με φράπα και netbook αγκαλιά παίζοντας με τα παραδείγματα, πιστεύω πως δε θα έχεις πρόβλημα να προχωρήσεις.
Σε κάποιο κεφαλαίο γίνεται αναφορά στα DOM Εvent Models αλλά θα πρότεινα για το συγκεκριμένο θέμα να αγοράσεις αποκλειστικά κάποια βιβλία. Οι εξηγήσεις που δίνονται βέβαια είναι αρκετές για να προχωρήσεις αλλά υπάρχουν αρκετά κενά.
Επειδή το να πιάσεις τον εαυτό σου να γράφει ένα plugin δεν είναι καθόλου απίθανο με το JQuery ακόμα και στα πρώτα σου βήματα, ένα ακόμα μεγάλο μέρος του βιβλίου αναφέρεται στη συγγραφή plugins αλλά το σημαντικότερο σε σωστούς τρόπους και τεχνικές κατά τη συγγραφή plugins ώστε να αποφύγεται πιθανά προβλήματα στο μέλλον.
Φυσικά υπάρχει και ένα ολόκληρο κεφάλαιο στη χρήση AJAX μέσω του jQuery που όμως πρόκειται για μια απλή εισαγωγή και σίγουρα θα χρειαστείς κι άλλο διάβασμα αλλού, στο συγκεκριμένο κομμάτι.
Γενικά, πρόκειται για ένα μικρό βιβλίο, 376 σελίδες, και αρχικά απορείς τι μπορεί να καλύψει ένα βιβλίο τόσων σελίδων, αλλά για μένα ήταν αρκετές. Σε συνδυασμό με το καλύτερο online documentation που έχω συναντήσει νομίζω ότι θα βρείς "μπελάδες" για όσες ώρες, μέρες, νύχτες εσύ θέλεις.
Περισσότερες πληροφορίες μπορείτε να δείτε στη σελίδα του εκδοτικού οίκου Manning (το link δε περιέχει affiliate id ή κάτι τέτοιο και το λέω γιατί πλέον πιστεύω ότι και αυτό θα μπορούσε να σχολιαστεί αρνητικά) και φυσικά να το αγοράσετε. Για όσους βρίσκονται Θεσσαλονίκη και δεν τους περισσεύουν για βιβλία, ας επικοινωνήσουν μαζί μου και ας περάσουν να το πάρουν.
