Την Παρασκευή 9 Μαρτίου λοιπόν η ομάδα του cssigniter.com θα δώσει το παρών στο Οpen Coffee και θα μοιραστεί μαζί σας τη μικρή του, σε διάρκεια, ιστορία.

WordPress Workshop

Κατεβαίνουμε που κατεβαίνουμε είπαμε να το κάνουμε σωστά. Το Σάββατο 10 Μαρτίου στις 12:00 το μεσημέρι, στο CoLab Workspace Athens θα κάνουμε ένα μικρό WordPress workshop όπου θα λύσουμε και θα δέσουμε ένα WordPress theme το οποίο προορίζεται για μαζική πώληση. Αν θέλετε να το παρακολουθήσετε κάντε εγγραφή στη σχετική σελίδα του event.

Τα λέμε από κοντά!

• Στα 8 χρόνια λειτουργίας μας [...]
• Φέτος κλείνουμε 12 χρόνια στο τομέα [...]
• Ο 5ος χρόνος θα είναι ο καλύτερος [...]

Αυτές οι προτάσεις έχουν κάτι κοινό. Ένα μπελά. Ναι, ένα μπελά αν πρόκειται για προτάσεις που βρίσκονται σε sites πελατών που θα σε πάρουν τηλέφωνο του χρόνου και θα σου πούνε “Φιλαράκο, γίνεται το 8 να το κάνουμε 9; Γίνεται το 12 να το κάνουμε 13;” Και έτσι δημιουργείται ένα ακόμα μικροσκοπικό task στην ήδη τεράστια λίστα με τις “αγγαρείες” που πρέπει να κάνετε.

Επειδή σε μένα συμβαίνει συχνά έκατσα και έφτιαξα ένα μικρό plugin το οποίο κάνει αυτή τη δουλειά. “Ανεβάζει” τα νούμερα αυτά αυτόματα. Πως;

Για αρχή κατεβάστε το plugin, αποσυμπιέστε, ανεβάστε στο φάκελο wp-content/plugins και ενεργοποιήστε.

Για να βάλετε ένα τέτοιο αριθμό μέσα στο κείμενο σας, χρησιμοποιείτε το shortcode ως εξής:

[magicdate]2009[/magicdate]

Το παραπάνω θα εμφανίσει 2. Γιατί; Γιατί αν αφαιρέσουμε από το τρέχων έτος (2011) το 2009 θα μας εμφανίσει 2. Του χρόνου, θα μας εμφανίσει 3 κ.ο.κ. Εύκολο ε;

Για όσους γράφουν αγγλικό κείμενο υπάρχει μια παράμετρος η οποία δημιουργεί ordinal numbers (1st, 2nd etc) και απλά προσθέστουμε μια παράμετρο στο shortcode ως εξής:

[magicdate ordinalize='true']2008[/magicdate]

Το οποίο και θα εμφανίσει 3rd.

Έκανα πριν λίγο submit στο official WordPress repo οπότε κάποια στιγμή θα εμφανιστεί και εκεί (μαζί με updates που δε βλέπω να χρειάζονται).

Θα μεταφέρω απλά κάποια πράγματα από το (super) site τους.

Το Esc Key είναι ένα μουσικό project από τους DJ ALX, Lexx, Rainman. Ρετρό, ψυχεδέλεια και βρώμικα beats μπλεγμένα με ιστορίες που σε βάζουν να σκεφτείς.[...]

Το Esc key είναι στην πραγματικότητα ένα DIY project σε όλα τα επίπεδα. Μουσική, σύλληψη, ηχογράφηση, παραγωγή, φωτογράφιση, πολυμέσα, προώθηση, έκδοση, εικαστικά. Με εξαίρεση το γραφίστικο κομμάτι. Σόρυ, δεν ζωγραφίζουμε καλά . Είναι απόδειξη ότι το μόνο που χρειαζόμαστε είναι όρεξη, όραμα και πείσμα. Οι εταιρείες είναι περιττές, και οι χρηματικοί περιορισμοί σε κάνουν απλά πιο ευφάνταστο στις λύσεις που θα βρεις.

Facts:

1. Το teaser ακούγεται απλά καταπληκτικό. Θέλω το αντίγραφο μου τώρα.
2. LP / CD σε 300 αντίγραφα. Έχουν απομείνει 274. Ακόμα εδώ;
3. O R D E R

Όμως, επειδή κάθε widget στην ουσία πρόκειται για ένα αρχείο .php για να μην χάνουμε τη μπάλα ενεργοποιούμε όλα τα widgets αυτόματα με ένα μικρό php script. Έχουμε λοιπόν στο functions.php την εξής δήλωση:

require_once('functions/ci_widgets.php');

Αυτό σημαίνει πως μέσα στο theme folder υπάρχει ένας φάκελος που λέγεται /functions και εκεί μέσα υπάρχει το script με το όνομα ci_widgets.php. Τι κάνουμε εκεί μέσα:

$path = dirname(__FILE__).'/widgets';

if ($handle = opendir($path)) {
    while (false !== ($file = readdir($handle))) {
		if ($file != "." && $file != "..") {
        	$file_info = pathinfo($path.'/'.$file);
        	if($file_info['extension']=='php')
        		require_once($path.'/'.$file);
        }
    }
	closedir($handle);
}

Λέμε λοιπόν να πάει να κοιτάξει σε ένα ακόμα φάκελο που υπάρχει μέσα στο theme μας με το όνομα /widgets και εκεί να ψάξει να βρεί όλα τα αρχεία με κατάληξη .php και φυσικά να τα κάνει include (require_once). Easy eh? Δείτε τη παρακάτω εικόνα για να δείτε και τη δομή των φακέλων σε ένα cssigniter theme:

Φαντάζομαι πως όλοι όσοι έχετε ανοίξει το admin panel του WordPress θα έχετε δει το Dashboard το οποίο μοιάζει με τη παραπάνω εικόνα. Όλα αυτά τα boxes είναι widgets τα οποία μπορούμε να εμφανίσουμε / κρύψουμε και να τοποθετήσουμε με drag & drop όπως εμείς θέλουμε. Το WordPress μας δίνει τη δυνατότητα να βάλουμε και δικά μας, custom widgets σε αυτή την οθόνη. Ας δούμε λοιπόν πως μπορούμε να προσθέσουμε ένα απλό widget με οδηγίες χρήσης του WordPress για τον πελάτη μας.

Functions.php ή Plugin?

Aυτή είναι μια ερώτηση που πρέπει να σας απασχολεί κάθε φορά που προσθέτετε λειτουργικότητα στο WordPress. Το functions.php σχετίζεται άμεσα με το theme, που σημαίνει πως αν αλλάξει το theme έχει πάρει μαζί του και τη λειτουργικότητα του functions.php ενώ το plugin παραμένει ως έχει.

Συνήθως σε sites πελατών είναι δύσκολο να αλλάξει το theme, αλλά εμείς για να δούμε πως φτιάχνουμε και ένα πολύ εύκολο και μικρό plugin για το WordPress θα το κάνουμε έτσι.

Φτιάχνουμε λοιπόν ένα νέο φάκελο στο κατάλογο plugins του WordPress όπου και θα αποθηκεύσουμε τα αρχεία του plugin μας. Ας τον πούμε ci-client-instructions. Εκεί δημιουργούμε ένα νέο αρχείο php με το όνομα ci-client-instructions.php. Εκεί μέσα τώρα γράφουμε τον παρακάτω κώδικα:

/*
Plugin Name: Client Instructions
Plugin URI: Your plugin instructions website
Description: A good description about your plugin
Version: 1.0
Author: Gerasimos Tsiamalos
Author URI: http://www.theportraitofageek.com/
*/

function ci_client_instructions() {
echo "Εδώ γράφουμε τις οδηγίες για τον πελάτη μας";
}

function ci_do_client_instructions() {
wp_add_dashboard_widget('ci_client_instructions_widget', 'Client Instructions', 'ci_client_instructions');
}

add_action('wp_dashboard_setup', 'ci_do_client_instructions');

?>

Αφού συμβουλευτήκαμε το Codex, μάθαμε πως πρέπει να κάνουμε 3 πράγματα για να προσθέσουμε ένα widget στο Dashboard:

1. Χρειαζόμαστε μια function με το περιεχόμενο του widget (ci_client_instructions())
2. Χρειαζόμαστε άλλη μια function για να “ενημερώσουμε” το WordPress ότι έχουμε ένα νέο widget around (ci_do_client_instructions()). Εκεί μέσα χρησιμοποιούμε τη function wp_add_dashboard_widget του WordPress για να προσθέσουμε το widget.
3. Και τέλος πρέπει να πούμε στο WordPress πότε να προσθέσει το widget στο dashboard. Χρησιμοποιούμε το hook wp_dashboard_setup και φυσικά όταν έρθει η ώρα του να τρέξει, δημιουργεί και το  δικό μας widget.

That’s all!

Πιθανές βελτιώσεις

Βλέπουμε ότι στη 1η function, εκεί δηλαδή που θα γράψουμε τις οδηγίες προς τον πελάτη μας παίζουμε με echo. Αν θέλουμε να προσθέσουμε, κείμενο, λίστες ακόμα και video τότε καλό θα ήταν να γράψουμε τις οδηγίες σε ένα άλλο αρχείο .php και να κρατήσουμε καθαρό το plugin μας. Κάπως έτσι:

function ci_client_instructions() {
require_once(WP_PLUGIN_DIR . "/ci-client-instructions/ci-instructions.php");
}

Φτιάχνουμε λοιπόν ένα ακόμη αρχείο μέσα στο φάκελο του plugin και το ονομάζουμε ci-instructions.php. Εκεί γράφουμε τις οδηγίες μας. Το δικό μου παράδειγμα εμφανίζεται έτσι:

Download

Αν θέλετε να παίξετε μπορείτε να κατεβάσετε το μικρό plugin που μόλις φτιάξαμε και να το χρησιμοποιείτε σαν σκελετό για τις οδηγίες χρήσης προς τους πελάτες σας.

Ας δούμε πως μπορούμε να φτιάξουμε κάτι παρόμοιο στο WordPress.

Θα μπορούσαμε να φτιάξουμε ένα custom post type το οποίο θα ονομάζαμε products αλλά για να κρατήσουμε τα πράγματα απλά, θα χρησιμοποιήσουμε το default content type το οποίο ακούει στο όνομα Posts.

Αν θέλετε μπορείτε παράλληλα να ανοίξετε το WordPress που έχετε εγκατεστημένο τοπικά ή σε κάποιο test server και να παίξετε. Για να δούμε.

1. Φτιάχνω μερικά “προϊόντα”, στην ουσία posts τα οποία βάζω σε μια κατηγορία που ονομάζω “Products”.

2. Φτιάχνω ένα custom page template με όνομα template-products.php, δημιουργώ μια καινούργια σελίδα, κάνω assign το template που μόλις έφτιαξα και εκεί εμφανίζω τα προϊόντα μου κάπως έτσι:

<?php
/**
 * Template Name: Products
 */

get_header(); ?>

		<div id="container" class="one-column">
			<div id="content" role="main">
			<form method="get" action="http://localhost/wordpress/compare-products/">
			<?php
				 query_posts('cat=19');
				 while (have_posts() ) : the_post(); ?>
					<div class="product">
						<input type="checkbox" name="productIDs[]" value="<?php the_ID(); ?>" />
						<h2><?php the_title(); ?></h2>
						<p><?php the_content(); ?></p>
					</div>
				<?php endwhile; ?>
			</div><!-- #content -->
			<p><input type="submit" id="submit" value="Compare products" /></p>
			</form>
		</div><!-- #container -->

<?php get_footer(); ?>

Όπως βλέπουμε πρόκειται για ένα απλό template με κάποιες μικρές διαφορές σε σχέση με κάποιο τυπικό page template. Για αρχή βλέπουμε ότι το loop είναι κλεισμένο μέσα σε ένα form tag. Επίσης, μέσα στο loop όπου εμφανίζουμε τον τίτλο του προϊόντος και το περιεχόμενο έχουμε ένα checkbox. Το checkbox αυτό θα εμφανιστεί δίπλα σε κάθε προϊόν ώστε να μπορεί ο χρήστης να επιλέξει ποιά προϊόντα θέλει να συγκρίνει. Βλέπουμε πως έχουμε δώσει ένα name=productIDs[] στο checkbox και σαν value περνάμε το μοναδικό για κάθε προϊόν, post_ID. Άρα πλέον μπορούμε, αφού επιλέξουμε κάποια προϊόντα, να πατήσουμε το “Compare products” και να μεταφερθούμε στη σελίδα σύγκρισης. Την οποία ακόμα δεν έχουμε φτιάξει και πριν την κατασκευή της πρέπει να διευκρινήσουμε κάποια πράγματα.

Πατώντας “Compare products” ξέρω πως θα μεταφερθώ στο URL http://localhost/wordpress/complate-products/ γιατί έτσι έχω δηλώσει στο action του form. Πηγαίνοντας όμως εκεί, στο URL πλέον θα υπάρχουν και οι τιμές των checkboxes που έχω επιλέξει με την εξής μορφή (λόγω GET):

http://localhost/wordpress/compare-products/?productIDs[0]=506&productIDs[1]=504

Στο παραπάνω παράδειγμα έχω επιλέξει 2 προϊόντα προς σύγκριση με post_ID 506 & 504 αντίστοιχα. Φαντάζομαι πως έχετε ήδη καταλάβει τι πάω να κάνω. Θα περάσω αυτές τις 2 τιμές σε ένα καινούργιο template. Περνώντας αυτές τις τιμές σαν array σε ένα νέο query μέσω του WP_Query θα εμφανίσω μόνο τα posts με τα συγκεκριμένα post_ID. Έτσι ακριβώς, αλλά έχουμε ένα μικρό πρόβλημα. Το πρόβλημα είναι πως το WordPress ότι δεν γνωρίζει στο URL απλά το απωθεί. Δε του δίνει σημασία. Το γράφει ρε παιδί μου, πως το λένε. Κάπως λοιπόν πρέπει να πούμε στο WordPress ότι θέλουμε να μας κάνει τη χάρη και να μας αφήσει να περάσουμε τις συγκεκριμένες τιμές. Πως; A filter hook που ακούει στο όνομα query_vars. Δείτε περισσότερες πληροφορίες σχετικά στο αντίστοιχο section του Codex.

Ανοίγουμε λοιπόν το functions.php στο theme μας (ή αν θέλετε κάντε το plugin, ώστε σε πιθανή αλλαγή του theme, η λειτουργικότητα να συνεχίσει να υπάρχει):

add_filter('query_vars', 'parameter_queryvars' );
function parameter_queryvars( $qvars )
{
	$qvars[] = 'productIDs';
	return $qvars;
}

Είμαστε έτοιμοι. Το WordPress γνωρίζει την ύπαρξη της μεταβλητής productIDs και θα μας αφήσει να περάσουμε τις τιμές της στο επόμενο template το οποίο δεν είναι άλλο από το compare-products. Φτιάχνουμε λοιπόν ένα δεύτερο αρχείο με όνομα template-compare.php με τον παρακάτω κώδικα:

<?php
/**
 * Template Name: Compare products
 */

get_header(); ?>

		<div id="container" class="one-column">
			<div id="content" role="main">
			<?php
				 $products_to_compare 	= array();
				 $products_to_compare 	= get_query_var('productIDs');
				 $products_to_compare 	= array_map('intval', $products_to_compare);
				 $products_query 		= new WP_Query(array('post__in' => $products_to_compare));
				 while ($products_query->have_posts() ) : $products_query->the_post(); ?>
					<div class="product">
						<h2><?php the_title(); ?></h2>
						<p><?php the_content(); ?></p>
					</div>
				<?php endwhile; ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_footer(); ?>

Φτιάχνουμε μια νέα σελίδα (Pages -> Add new) και της ορίζουμε σαν template το “Compare products” template που μόλις φτιάξαμε. Για να δούμε όμως τι ακριβώς συμβαίνει σε αυτό το template. Βασικά όλη η δουλειά γίνεται στις 4 πρώτες γραμμές PHP.

$products_to_compare 	= array();
$products_to_compare 	= get_query_var('productIDs');
$products_to_compare 	= array_map('intval', $products_to_compare);
$products_query 		= new WP_Query(array('post__in' => $products_to_compare))

Τι κάνουμε;

1. Δημιουργούμε ένα νέο array.
2. Μέσα σε αυτό το array πλέον αποθηκεύουμε τις τιμές που υπάρχουν στη μεταβλητή productIDS που περάσαμε από το URL.
3. Α bit of security. Οι τιμές που έρχονται από το URL πρέπει να είναι ακέραιοι (intval).
4. Δημιουργούμε το δικό μας query όπου λέμε να μας εμφανίσει στο loop μόνο όσα posts βρίσκονται μέσα στο array που δημιουργήσαμε.

Και έτσι φτιάξαμε το δικό μας σύστημα σύγκρισης προϊόντων στην ουσία με.. 4 γραμμές κώδικα. Easy eh;

Πιθανές βελτιώσεις

1. Α bit of JS στο πρώτο template αν θέλουμε να περιορίσουμε τα προϊόντα προς επιλογή.
2. Σε περίπτωση που η JS είναι off, έναν έλεγχο στο 2ο template για το αν έχουν επιλεχθεί προϊόντα και αν όχι να εμφανίσουμε ένα μήνυμα λάθους.

Για περισσότερες πληροφορίες σχετικά με το WP_Query, δείτε την αντίστοιχη σελίδα στο Codex.

Πριν πω λίγα πράγματα για τις παρουσιάσεις, θα ήθελα να πω ένα μεγάλο bravo στον Βασίλη Κανονίδη για τη διοργάνωση. Δε ξέρω, αλλά μου φαίνεται βουνό η οργάνωση ενός τέτοιου event και ενώ ο Βασίλης μου είπε πως ήταν αρκετά αγχωμένος, όλη η ομάδα έδειχνε πως είχε total control και αυτό εμένα με έκανε να νιώθω πως όλα κυλάνε ρολόι. Έτσι έγινε δηλαδή.

Παρουσιάσεις

Δημήτρης Καλογερόπουλος

Φάνηκε πως αγαπάει το blogging. Άκουσα πράγματα που δεν πέρασαν ποτέ από το κεφάλι μου και με “κράτησε”. Δε νομίζω πως έλειπε κάτι. Πολύ καλή δουλειά.

Ζαχαρένια Ατζιτζικάκη

Μου έδωσε την αίσθηση ότι ζει κάνοντας παρουσιάσεις. Άνετη, to the point, στήριξε με επιχειρήματα τα slides της και γενικά μια από αυτές τις παρουσιάσεις που αν δεν ήσουν εκεί, έχασες.

Θάνος Παπαβασιλείου

Τι να πεις για το Klou μας; Γουστάρει design, είναι άνετος και ενώ ξέρω ότι δεν είχε χρόνο να προετοιμαστεί μας τα είπε με το δικό του μοναδικό τρόπο. Ψηφίζουμε klou για νέο δήμαρχο. Τέτοια φάση.

Απόστολος Παπαδόπουλος

Είναι πιτσιρικάς, γουστάρει WordPress, κάνει τα πρώτα του βήματα και φαίνεται αλλά ο ενθουσιασμός του για το WordPress λέει πολλά. Ίσως τον ήθελα λίγο πιο παθιασμένο. Δε κολλάμε όμως. Συνεχίζουμε.

Βασίλης Μαστοροστέργιος

Τούτος εδώ να δείτε που μια μέρα θα τον ψάχνουμε να μας δώσει αυτόγραφο. Πιστεύω πως έκανε τη πιο συγκροτημένη παρουσίαση για WordCamp. Αν θέλετε να μάθετε τι είναι το WordPress, καλό είναι να δείτε τη παρουσίαση του. Respect.

Εγώ

Δε ξέρω ειλικρινά. Διάλεξα ένα θέμα που ξέρω ότι καίει πολλούς αλλά επειδή αποφάσισα να παίξω το δικηγόρο του διαβόλου και να περιγράψω το γιατί ΔΕΝ χρειαζόμαστε WordPress frameworks, ίσως να μη πέρασα ακριβώς αυτό που ήθελα. Ελπίζω να πήγανε όλα καλά.

Φώτης Αλεξάνδρου

Όταν είσαι καλός developer ακόμα και κώδικα να μη μας δείξεις, θα το καταλάβουμε. Ο Φώτης έκανε μια από τις παρουσίασεις που περίμενα πως και πως να δω γιατί ήθελα να δω γιατί κάποιος να μπει στη διαδικασία να γεφυρώσει 2 τόσο διαφορετικά πράγματα όπως το WordPress και το Codeigniter. Το τελευταίο του slide μας εξήγησε γιατί. Αγαπάμε Φώτη.

Βασίλης Κανονίδης

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

Γιώργος Κανελλόπουλος

Δεν έμεινα σε καμία παρουσίαση του. Δε ξέρω τι είπε και δεν με ενδιαφέρει. Πριν αρχίσετε να πετάτε πέτρες, να πω πως τον άνθρωπο δεν τον γνωρίζω και κανένα πρόβλημα δεν έχω μαζί του. Όσοι με γνωρίζετε ξέρετε πως αν είχα, εδώ θα ήταν το μέρος που θα το έγραφα. Έχω πρόβλημα όμως με τη στάση της Microsoft, η οποία προφανώς ήθελε τον κ. Κανελλόπουλο εκτός αίθουσας τουλάχιστον σε όσες παρουσιάσεις ήμουν εγώ μέσα. Δε μπορώ να φανταστώ ότι ήταν δική του αποφάση. Προφανώς είναι μια γραμμή. Την οποία δε δέχομαι σε ένα event για ανοιχτό λογισμικό. Το να είσαι κ. Microsoft χορηγός σε ένα event πρώτον δε σε χρήζει “Αρχηγό” και δεύτερο απαιτεί οι αντιπρόσωποι σου να κάνουνε blend in με το υπόλοιπο community.

Το γεγονός πως την ίδια μέρα έγινε και το OpenCoffee δε θα το σχολιάσω. Δε μπορώ να φανταστώ και ούτε θα πιστέψω ποτέ πως υπάρχει δόλος πίσω από αυτό. Γιατί αν υπάρχει και το μάθω πάλι θα διαβάσετε άσχημα πράγματα εδώ, με ονόματα και διευθύνσεις. Οπότε ας το κρατήσουμε όλο αυτό με ένα τίτλο “κακή συννενόηση”.

Ο Γιώργος απάντησε στο θέμα και προσωπικά με καλύπτει. Δεν υπήρχε περίπτωση να είναι και διαφορετικά τα πράγματα.

Επειδή ήδη έχουν γραφτεί αρκετά posts εντυπώσεων σχετικά με το WordCamp, αν νιώθετε άσχημα να κράξετε με έντονο τρόπο σε ένα από τα υπόλοιπα posts, feel free to do that here.

Για μένα το προηγούμενο WordCamp, εκτός από κάποιες ενστάσεις που είχα, ήταν γενικά μια επιτυχία. Κόσμος, παρουσιάσεις, geeks και γενικά ένας μικρός χαμός. Φέτος μαθαίνω πως ο κόσμος θα είναι περισσότερος, οι παρουσίασεις δείχνουν άκρως ενδιαφέρουσες και γενικά i can’t wait.

Τα WordCamps στηρίζονται στη καλή πίστη των εθελοντών και φυσικά στην αγάπη μας για το WordPress. Το άμεσο ώφελος που έχουμε όλοι όσοι βρεθούμε εκεί, με όποιο τρόπο δεν έχει σημασία, είναι πως γνωρίζουμε ποιοί και με ποιό τρόπο ασχολούνται με τη πλατφόρμα και φυσικά η ανταλλαγή απόψεων / ιδεών.

Περισσότερες πληροφορίες σχετικά με το event θα βρείτε στο site του WordCamp Greece.

Open source is open source

Μπορεί να μην έχω καλές παρτίδες με το Joomla αλλά αυτό δε σημαίνει τίποτα. Για τους Joomla fans λοιπόν που αμφιβάλλω να μη το πήρανε χαμπάρι, τους ενημέρωνω πως στις 28/29 Μαϊου παίζει το JoomlaDay, και φυσικά τέτοια events δεν είναι να τα χάνετε αν φυσικά σας ενδιαφέρει το Joomla. I <3 your site btw Joomladay people. Really good job!

Όλα ξεκίνησαν (δε ξεκίνησαν τότε αλλά σίγουρα η κατάσταση πήρε τα πάνω της μιας και η ιδέα υπάρχει από το 2005) με ένα άρθρο του Ethan Marcotte. Σε λιγότερο από ένα χρόνο οι εξελίξεις είναι ραγδαίες και πολλοί άρχισαν να γράφουν, να βγάζουν frameworks και γενικά να πηγαίνουν το πράγμα ένα βήμα παραπέρα.

Έρχεσαι λοιπόν εσύ φίλε μου freelancer ή μικρό μου web design-άδικο και σκέφτεσαι πως πρέπει όλα αυτά να τα υιοθετήσεις και να τα βάλεις στη προσφορά σου για το επόμενο σου project. Σκέφτεσαι πως μόνο καλό θα σου κάνει μιας και προσπαθείς να διαφοροποιηθείς (ξανά) στην αγορά και να προσθέσεις μια ακόμα υπηρεσία που κάθε πελάτης θα λατρέψει. Βάζει και ένα τυχαίο ποσό στο τέλος της προσφορά σου για “responsive web design” και μια χαρά.

Η διαδικασία που ακολουθείς μέχρι σήμερα είναι να έρχεται ο πελάτης ζητώντας προσφορά (είτε να τον φέρεις εσύ με τις μαγικές ικανότητες πωλήσεων που έχεις), να του στέλνεις ένα ερωτηματολόγιο ώστε να πάρεις μια εικόνα για το project, λίγα τηλέφωνα, λίγες συναντήσεις και να ανοίξεις το Photoshop ή κατευθείαν τον browser να σχεδιάσεις το site του. Λίγες μέρες μετά έχεις μια πρόταση έτοιμη και τη στέλνεις στο πελάτη για feedback (#epic fail αλλά αυτό είναι άλλο post). To τηλέφωνο χτυπάει και αρχίζουν τα μαγικά:

• “Ξέρεις, θέλω λίγο πιο σκούρο το πάνω μέρος του site”
• “Μεγαλύτερα γράμματα και ίσως κάποια άλλη γραμματοσειρά”
• “Το κειμενάκι που έχουμε στη κεντρική άλλαξε το με αυτό που σου στέλνω. Δε μου αρέσει”

Και πολλά άλλα τέτοια. Αναρωτιέσαι λοιπόν που έκανες το λάθος και ανακαλύπτεις πως δουλεύεις σε ένα ακόμα project που ενώ ξεκίνησε με τις καλύτερες των προθέσεων σου, θα καταλήξει κάπου καλά κρυμμένο χωρίς να γνωρίζει κανείς ότι το έφτιαξες εσύ μιας και το τελικό αποτέλεσμα δεν είναι αυτό που ήθελες και πλέον ο πελάτης έχει το πάνω χέρι στα πάντα. Ταυτίστηκες ε; Ε ναι, είναι διαδικασία που όλοι έχουμε περάσει.

Μη μπερδεύεσαι, θα επιστρέψω και στο responsive της υπόθεσης.

Χρονικά έχεις πέσει έξω με τις μπάντες και ανακαλύπτεις πως η αρχική σου προσφορά ήταν για τα μπάζα μιας και έχεις μπεί μέσα σχεδόν άλλα τόσα από αυτά που ζήτησες εξ’ αρχής. Έχεις “παντρευτεί” τον πελάτη και δε περνάει μέρα όπου δε θα σηκώσει το τηλέφωνο να σου ζητήσει “πραγματάκια” να κάνεις στο site του. Όλεθρος.

Κάποια στιγμή ανακαλύπτεις πως οικονομικά έχεις μπεί μέσα, αλλά έχεις να φτιάξεις και mobile έκδοση του site ή όλο το site να είναι device agnostic όπως λένε τώρα τελευταία. Χρόνια πολλά, με τις υγείες σου.

Τελικά δεν ήταν και τόσο καλή ιδέα. Ποιό responsive; Έδω σου έχει σπάσει τα @@ στη desktop έκδοση όπου και επισκέπτεται με Internet Explorer 7.

Όλα αυτά συμβαίνουν γιατί πολύ απλά έχεις ξεχάσει βασικές ενέργειες πριν πέσεις με τα μούτρα στην υλοποίηση του project. Στα λέω περιληπτικά και σε τυχαία σειρά γιατί είναι δική σου δουλειά να πας να μάθεις ποιά είναι η σωστή:

• Στρατηγική περιεχομένου
• Site diagrams
• Concept models
• Wireframes
• Χρονοδιάγραμμα έργου
• Personas
• Συμφωνία ενεργειών περιόδου συντήρησης
• Target audience research

Κάποια συνδέονται μεταξύ τους. Κάποια όχι. Μερικά είναι άκρως απαραίτητα, μερικά όχι. Υπάρχουν και άλλα στάδια που δεν έχω συμπεριλάβει στη λίστα μου. Δεν έχει σημασία.

Σημασία έχει πως από τη στιγμή που ακόμα υπάρχουν τέτοια κενά στη διαδικασία παραγωγής ενός site, τότε μάλλον πρέπει για λίγο να βάλεις στην άκρη το responsive της υπόθεσης και να ασχοληθείς λίγο με βασικότερα πράγματα. Μετά μπορείς εύκολα μέσα σε όλη αυτή τη διαδικασία να συμπεριλάβεις και το device agnostic part που έλεγα παραπάνω.

Και έρχεσαι εσύ ως φυσιολογικός επαγγελματίας / φουκαριάρης και με ρωτάς:

Καλά ρε συ Γεράσιμε είσαι με τα καλά σου; Πως είναι δυνατόν να συμπεριλάβω όλα αυτά τα πράγματα σε project των 1500 ευρώ;

1. Τη τιμή την έβγαλες από το κεφάλι σου, οπότε κάτσε φάε κακά τώρα.
2. Το ότι ένα project είναι μικρό δε σημαίνει ότι πρέπει να αποφύγεις αυτά τα βήματα. Αλλά ούτε να αφιερώσεις 2 μήνες για όλα αυτά. Υπάρχουν τρόποι όλα τα παραπάνω και άλλα τόσα να τα ξεμπερδέψεις σε 1 εβδομάδα max. για ένα μικρό-μεσαίο project.
3. Αν γουστάρεις απλά να λες πως έχεις πελατολόγιο το οποίο όμως δε σου αφήνει χρόνο για νέα projects και τη βρίσκεις να σε παίρνουν τηλέφωνο κάθε 3 και λίγο ζητώντας (for free) επεμβάσεις στο site τους, μην τα συμπεριλαμβάνεις. Ο καθένας όπως τη βρίσκει.

Αν μετά από όλα αυτά συνεχίζεις να πιστεύεις πως πρέπει να επενδύσεις resources και να ασχοληθείς με το responsive web design τότε συγνώμη που σε έβαλα να διαβάσεις όλο αυτό το πράγμα γιατί πολύ απλά δεν απευθύνομαι σε σένα. Sorry!

Αν όμως βρίσκεις πολλά κοινά σημεία σε αυτό το άρθρο με τη καθημερινότητα σου, take a step back and reconsider.

I always start by talking to the client about what they’re trying to achive and, if possible, talking to their customers or users. Every project starts out with research and discovery so that i can make informed decisions

Jason Santa Maria