Μέσος χρόνος ανάγνωσης άρθρου: 1 λεπτό

Τα mobile websites είναι πλέον κάτι το αναμενόμενο. Όλο και περισσότεροι χρήστες αναζητούν πληροφορίες χρησιμοποιώντας τα κινητά τους.

Το WordPress Mobile Pack είναι ένα ΔΩΡΕΑΝ plugin, το οποίο σας δίνει την δυνατότητα να κάνετε το WordPress website σας συμβατό με κινητές συσκευές. Μεταξύ άλλων, προσφέρει Themes, Widgets, Mobile Analytics, μια ειδική έκδοση του διαχειριστικού του WordPress για κινητό και μια λειτουργία που την ονομάζει “Mobile Switcher” η οποία δίνει την δυνατότητα αυτόματης αναγνώρισης συσκευής αλλά και δυνατότητα να επιλέγουν οι χρήστες Theme με απομνημόνευση της επιλογής τους.

Η έκδοση του administration για κινητές συσκευές, επιτρέπει στον / στους διαχειριστές να γράφουν και να επεξεργάζονται άρθρα εν κινήσει, κάτι το οποίο μπορεί να φανεί ιδιαίτερα χρήσιμο. Το Plugin δουλεύει με όλες τις τελευταίες εκδόσεις του WordPress καθώς και με το παλιότερο WordPress MU αρκεί να είναι εγκατεστημένο στα plugins και όχι στα mu_plugis.

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

Η βασική ιδέα είναι να υλοποιήσουμε μία κλάση η οποίο θα αναλαμβάνει να κάνει αυτόματα το caching για όλες τις μεθόδους που περιέχει. Στο τελικό αποτέλεσμα, κάθε μέθοδος θα περιέχει όλες τις ενέργειες που θέλουμε να κάνουμε και στις παραμέτρους, θα ορίζουμε και το χρόνο για τον οποίο θα ισχύει η cache, πριν χρειαστεί ανανέωση.

Σημείωση: Σε μερικά από τα παρακάτω παραδείγματα δεν φαίνεται όλος ο κώδικάς. Αν τον επιλέξτε και τον επικολήστε στον text editor της επιλογής σας θα μπορέσετε να τον δείτε.

Cache table

Ας δούμε πρώτα το table που χρειάζεται να δημιουργήσουμε στη βάση. Θα του δώσουμε το πολύ πρωτότυπο όνομα ‘cache’. Αυτό είναι το αντίστοιχο CREATE TABLE.

CREATE TABLE IF NOT EXISTS `cache` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`_key` varchar(255) DEFAULT NULL,

`_call` text,

`value` longtext,

`ts` int(11) DEFAULT NULL,

`locktime` int(11) DEFAULT NULL,

`expirationtime` int(11) DEFAULT '0',

PRIMARY KEY (`id`),

UNIQUE KEY `_key_2` (`_key`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8

• _key είναι το μοναδικό αναγνωριστικό για κάθε εγγραφή στην cache. Είναι ένα string που παράγεται εφαρμόζοντας md5 στο όνομα και τις παραμέτρους τις συνάρτησης (περισσότερα γι αυτό στη συνέχεια).
• _call είναι το όνομα της συνάρτησης και οι παράμετροι.
• value είναι το αποτέλεσμα που είναι cached.
• ts είναι το timestamp που δείχνει πότε έγινε η εγγραφή στην cache.
• locktime είναι το timestamp που δείχνει πότε κλειδώθηκε η εγγραφή στην cache (για να γίνει update).
• expirationtime είναι το timestamp που δείχνει πότε θα καταστεί άκυρη η εγγραφή στην cache.

Πριν προχωρήσουμε στον κώδικα, ας δούμε με ένα απλό παράδειγμα, πώς θα γίνεται η κλήση των συναρτήσεων. Ας υποθέσουμε ότι έχουμε τη βάση δεδομένων ενός βιβλιοπωλείου και θέλουμε να ψάξουμε βιβλία με βάση το όνομα του συγγραφέα. Σκοπός μας είναι τελικά να έχουμε κάτι τέτοιο:

$cache->searchBooksByAuthor(300, "nikos");

Όπου 300 είναι ο χρόνος σε δευτερόλεπτα που η εγγραφή στην cache θα πάψει να ισχύει.

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

class Cache {

var $lock_timeout = 10;

function __call($name, $arguments) {

}

function _searchBooksByAuthor($author) {

// query the database like you would normally do and return the result

}

}

Προσοχή στο underscore (_) που προηγείται του ονόματος της συνάρτησης και επίσης στο ότι το timeout δεν περιλαμβάνεται στα arguments. Θα γίνει σαφές το γιατί συμβαίνει αυτό, μόλις αρχίζουμε να υλοποιούμε την λειτουργικότητα της συνάρτησης __call().

H __call() είναι μία από τις λεγόμενες magic methods της php. Καλείται αυτόματα όταν ζητήσουμε μέθοδο της κλάσης που δεν υπάρχει στην πραγματητότητα. Οπότε, αν στην παραπάνω κλάση ζητήσουμε την συνάρτηση “searchBooksByAuthor” που δεν υπάρχει, τότε θα κληθεί η __call. Τώρα αρχίζει να γίνεται σαφές γιατί χρησιμοποιήσαμε το _ στο όνομα της συνάρτησης μέσα στην κλάση. Θέλουμε να αναγκάσουμε όλες τις μεθόδουμε να περνάνε μέσα από την __call, όπου και θα υλοποίήσουμε όλη την λειτουργικότητα της cache.

Ας ξεκινήσουμε να γράφουμε κώδικα μέσα στην __call. Μία υποσημείωση. Μιας και ο καθένας χρησιμοποιεί το δικό του database wrapper (έτσι τουλάχιστον οφείλουμε να κάνουμε), δεν θα χρησιμοποιήσουμε κάποια πραγματική συνάρτηση για τα queries, αλλά μια φανταστική, την myquery().

// first think we must check that the function actually exists

if ( !method_exists($this, '_'.$name) ) {

// handle the error anyway you like

}

$current_timestamp = time();

$timeout = $arguments[0]; // we said that the first argument will be the time till the cache record invalidates

$expiration_timestamp = $current_timestamp + $timeout;

// lets create the key for the cached row

$arguments[0] = $name;

$call = serialize(array_merge((array)$name, array_slice($arguments, 1)));

$key = md5($call);

Φτιάξαμε λοιπόν ένα serialized array που αποτελείται από το όνομα της συνάρτησης και τις παραμέτρους. Περνώντας αυτό από md5() προκύπτει το τελικό κλειδί της εγγραφής μας στην cache. Η μεταβλητή $call δεν χρησιμοποιείται πουθενά ουσιαστικά, αλλά είναι πολύ χρήσιμη για debugging, αν χρειαστεί κάποια στιγμή να βρείτε συγκεκριμένη συνάρτηση στην cache.

Στη συνέχεια, ελέγχουμε τη βάση και αν δεν υπάρχει εγγραφή με το συγκεκριμένο κλειδί, δημιουργούμε μια νέα στον πίνακα της cache.

// searching for the cached row

$cached = myquery("SELECT * FROM cache WHERE _key = '$key'");

if ( !$cached['id'] ) {

// row doesn't exist in the cache table, we just need to create it

// but first, run the original function and get the result

$data = call_user_func_array(array($this, '_'.$name), array_diff_key($arguments, array($timeout)));

$value = serialize($data);

myquery("

INSERT INTO `cache`

(`_key`, `_call`, `ts`, `locktime`, `expirationtime`, `value`)

VALUES

('$key', '$call', $current_timestamp, 0, $expiration_timestamp, $value)

");

return $data;

}

Αν όμως η εγγραφή υπάρχει, τότε υπάρχουν πολλές περιπτώσεις. Μπορεί να είναι έγκυρη, μπορεί να έχει λήξει, μπορεί να είναι κλειδωμένη ή ακόμα μπορεί και να να είναι προβληματική (πχ κλειδωμένη περισσότερη ώρα από το όριο)

/ if valid

if ( $cached['ts'] + timeout > $current_timestamp ) return unserialize($cached['value']);

// locked, so we'll serve the outdated content

if  ( $cached['locktime'] && $cached['locktime'] +  $this->lock_timeout < $current_timestamp ) return  unserialize($cached['value']);

// if we reach here, either the cache is invalid, or it is locked, and past the locked timeout

// in either case we lock and update the cache row

myquery("UPDATE `cache` SET locktime = $current_timestamp WHERE `_key`='$key'");

$data = call_user_func_array(array($this, '_'.$name), array_diff_key($arguments, array(' ')));

$value = serialize($data);

myquery("

UPDATE `cache` SET

`value` = '$value',

`ts` = $current_timestamp,

`locktime` = 0,

`expirationtime` = $expiration_timestamp

WHERE `_key` = '$key'

");

return $data;

Και με αυτό η κλάση ολοκληρώνεται.

Προφανώς μία τέτοια κλάση είναι χρήσιμη σε περιπτώσεις όπου έχουμε μεγάλα και αργά queries ή και ολόκληρες php functions που είναι πολύ αργές. Έχει μεγάλο πλεονέκτημα ότι είναι αρκετά ευέλικτη και σίγουρα είναι ένα καλό έναυσμα για κάποιο με όχι και τόσο μεγάλη εμπειρία στην php.

Εσείς χρησιμοποιείται κάποιο caching σύστημα στις εφαρμογές σας;

Το παραπάνω άρθρο ήταν Guestpost

Το παραπάνω άρθρο ήταν Guestpost και γράφτηκε από τον Νίκο Ζηνά.
Περισσότερα για τον Νίκο Ζηνά μπορείτε να δείτε στους παρακάτω συνδέσμους:

• Blog: http://nzinas.com/blog
• Twitter: http://twitter.com/nzinas
• Linkedin: http://gr.linkedin.com/in/zinas

Εάν ενδιαφέρεστε και εσείς να γράψετε άρθρο για το Web Design Blog, μπορείτε να διαβάσετε περισσότερα στο άρθρο Το Web Design Blog ανοίγει τις πόρτες του!

Λίγα λόγια για το WordPress

Αρχικά για όσους δεν το γνωρίζουν, αξίζει να αναφερθεί πως υπάρχουν 2 ειδών WordPress websites. Υπάρχουν τα WordPress.com sites τα οποία φιλοξενούνται κάτω από την κοινή ομπρέλα του WordPress community και έχουν περιορισμούς σε ευελιξία κινήσεων και υπάρχουν και τα αυτοφιλοξενούμενα (self hosted) WordPress τα οποία είναι εγκαταστάσεις του γνωστού Blog / CMS σε αυτόνομους / τυχαίους διακομιστές που δεν συνδέονται άμεσα με τον server του WordPress.com community. Τα αρχεία εγκατάστασης για τα Self Hosted WordPress sites μπορείτε να τα κατεβάσετε από το www.wordpress.org/download και να τα εγκαταστήσετε σε οποιονδήποτε συμβατό web server. Περισσότερα για τα δύο αυτά ήδη του WordPress μπορείτε να μάθετε στους 2 παρακάτω συνδέσμους:

1. http://en.wordpress.com/features/
2. http://wordpress.org/about/

Jetpack WordPress Plugin

Το Jetpack είναι ένα ΔΩΡΕΑΝ WordPress plugin το οποίο δίνει την δυνατότητα σε Self Hosted WordPress Installations, να εκμεταλλευτούν την δύναμη του WordPress.com cloud. Με λίγα λόγια το WordPress σας θα αποκτήσει μια σειρά από νέες δυνατότητες, δυνατότητες που υπάρχουν μόνο σε WordPress.com websites. Συγκεκριμένα με την εγκατάσταση του εν λόγω plugin, ένας WordPress admin θα έχει:

1. Δωρεάν χρήση των WordPress.com στατιστικών (WordPress.com Stats).
2. Δυνατότητα χρήσης του Twitter Widget.
3. Δυνατότητα χρήσης των Gravatar Hovercards (Mouseover info κάρτες με πληροφορίες για όσους σχολιάζουν στα comments σας).
4. Δυνατότητα χρήσης του URL shortner του WordPress.com (WP.me Shortlinks).
5. Δυνατότητα χρήσης του Sharedaddy για να διαδίδουν οι χρήστες του WordPress σας τα άρθρα σας στα Social Media.
6. Δυνατότητα χρήσης της γλώσσας LaTeX.
7. Δυνατότητα ορθογράφου με την τεχνολογία After the Deadline (Χρήση μόνο στην αγγλική γλώσσα).
8. Δυνατότητα χρήστης των Shortcode Embeds για να μπορείτε να εισάγετε video και άλλα media στα post σας με Shortcodes.

Κοιτάζοντας την επίσημη ιστοσελίδα του Jetpack φαίνεται πως υπάρχουν 3 κενές θέσεις για νέες λειτουργίες / δυνατότητες που θα προστεθούν στο μέλλον. Κάτι τέτοιο κάνει ακόμα πιο ενδιαφέρον το ήδη πολύ χρήσιμο αυτό WordPress plugin.

Σε προηγούμενο άρθρο, αναφέρθηκαν οι λειτουργίες τις admin bar του WordPress 3.1. Στο σημερινό μίνι post το Web Design Blog παρουσιάζει πως να αφαιρεθεί αυτή η μπάρα από το Wordress installation σας. Ένας λόγος που μπορεί να δημιουργήσει την ανάγκη αφαίρεσης της μπάρας είναι πως εκείνη εμφανίζεται ακόμα και στους loged in users ενός subscriber based WordPress insallation σπαταλώντας έτσι αρκετό χώρο από την σελίδα αλλά και επηρεάζοντας το εικαστικό αποτέλεσμα.

Αφαίρεση της μπάρας

Πολύ απλά, βρείτε το αρχείο functions.php, ανοίξτε το και επικολλήστε σε όποιο σημείο του θέλετε τον παρακάτω κώδικά:

add_filter( 'show_admin_bar', '__return_false' );

Υπάρχουν βέβαια και plugins που πετυχαίνουν το ίδιο αποτέλεσμα, αλλά επειδή ακριβώς είναι plugins μπορεί να επηρεάζουν τις επιδόσεις του WordPress:

• Admin Bar Disabler
• Custom Admin Bar
• Global Hide/Remove Admin Bar Plugin
• Admin Bar Removal

Η τελική επιλογή είναι του διαχειριστή του website.

Το καινούργιο update του WordPress, η έκδοση 3.1, έφερε μεταξύ άλλων και ένα νέο χαρακτηριστικό, αυτό της administrator bar. Η admin bar -για όσους δεν έχουν προχωρήσει ακόμα στο upgrade- είναι μια μπάρα με διάφορες συντομεύσεις που εμφανίζεται πλέον στο front end όταν είσαστε logged in σαν διαχειριστής και περιέχει τις εξής συντομεύσεις:

Σύνδεσμος με το όνομα του διαχειριστή

Αυτός ο σύνδεσμος ανοίγει ένα drop down menu το οποίο περιέχει 3 λειτουργίες:

• Edit my profile (Μεταφορά στην σελίδα επεξεργασίας του προφιλ του διαχειριστή)
• Dashboard (Μεταφορά στην σελίδα του πίνακα ελέγχουν του WordPress)
• Log out (Αποσύνδεση)

Add New

Αυτός ο σύνδεσμος ανοίγει ένα drop down menu το οποίο περιέχει 2 λειτουργίες:

• Post (Μεταφορά στην σελίδα δημιουργίας νέου Post)
• Page (Μεταφορά στην σελίδα δημιουργίας νέου Page)

Comments

Πατώντας σε αυτόν τον σύνδεσμο ο διαχειριστής μπορεί να μεταβεί στην σελίδα επεξεργασίας των σχολίων του WordPress installation του.

Appearance

Αυτός ο σύνδεσμος ανοίγει ένα drop down menu το οποίο περιέχει 2 λειτουργίες:

• Widgets (Μεταφορά στην σελίδα δημιουργίας / επεξεργασίας των Widgets του WordPress installation)
• Menus (Μεταφορά στην σελίδα δημιουργίας / επεξεργασίας των Menu του WordPress installation)

Όλες οι παραπάνω επιλογές φαίνονται στην Admin Bar στην αρχική σελίδα. Αν ο διαχειριστής μεταβεί σε ένα post, τότε στην μπάρα αυτή προστίθενται άλλες 2 επιλογές. Οι επιλογές αυτές είναι οι εξής:

Edit Post

Αυτός ο σύνδεσμος δίνει την δυνατότητα στον διαχειριστή να μεταβεί αμέσως στην σελίδα επεξεργασίας του post που διαβάζει εκείνη την στιγμή. Ουσιαστικά μπορεί ο διαχειριστής χωρίς ψάξιμο να κάνει άμεσα διορθώσεις, γλυτώνοντας αρκετό χρόνο. Υπάρχει αντίστοιχη επιλογή Edit Page όταν ο διαχειριστής μεταβαίνει σε σελίδα τύπου page.

Shortlink

Πατώντας σε αυτόν τον σύνδεσμο, ο διαχειριστής μπορεί να δει το shortlink (σύνδεμος με παραμέτρους) της συγκεκριμένης σελίδας στο οποίο φαίνεται το id της. Αυτή την πληροφορία μπορεί να την χρησιμοποιήσει για εσωτερική χρήση (επιλογή προβολής promo posts) ή για εξωτερική χρήση.

Οι απόψεις σχετικά με την χρησιμότητα της Admin Bar διίστανται και δεν είναι λίγοι οι WordPress administrators που θέλουν να την καταργήσουν, ιδιαίτερα όσοι διατηρούν WordPress sites με πολλούς εγγεγραμμένους χρήστες. Ο χρόνος θα δείξει αν τελικά θα παραμείνει στο WordPress σαν υποχρεωτικό χαρακτηριστικό ή θα μπορεί να ενεργοποιείται / απενεργοποιείται από τον διαχειριστή σε μαζικό επίπεδο. Μέχρι στιγμής ο διαχειριστής μπορεί να την ενεργοποιήσει / απενεργοποιήσει μόνο ατομικά (για κάθε έναν χρήστη μοναδικά), κάτι που δεν είναι πρακτικό αν π.χ. διατηρεί ένα website με 1000 loged in subscribers.

Η χρήση των Mega Drop Down menus έχει αρχίσει να γίνεται trend τα τελευταία χρόνια. Τόσο στο εξωτερικό, όσο και στην Ελλάδα, οι επαγγελματίες του χώρου έχουν υιοθετήσει αυτή την μορφή πλοήγησης για να μπορούν να προσφέρουν μια ομαλή εμπειρία στους χρήστες των διαδικτυακών τόπων που έχουν σχεδιάσει. Ένα Mega Drop Down menu μπορεί να βοηθήσει τον μέσο χρήστη να μεταβεί στην πληροφορία που τον ενδιαφέρει, γρήγορα και εύκολα χωρίς να επηρεάζεται από το βάθος / επίπεδο της πληροφορίας.

Τι είναι ακριβώς Mega Drop Down menu;

Η ορολογία της έννοιας σύμφωνα με τον Guru του Usability, Jakob Nielsen, είναι:

Τα Mega Drop Down menus είναι μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο τα οποία έχουν σαν σκοπό την κατάργηση του scrolling και χρησιμοποιούν εικονίδια, ξεκάθαρο typography και tooltips για να εξηγήσουν στον χρήστη τις επιλογές που έχει.

Ποια είναι τα χαρακτηριστικά των Mega Drop Down menus;

Τα περισσότερα χαρακτηριστικά αναφέρονται ξεκάθαρα και στον παραπάνω όρο της έννοιας. Συγκεκριμένα:

1. Μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο.
2. Οι επιλογές πλοήγησης είναι ξεκάθαρες και ενισχυμένες από την χρήση εικονιδίων, φωτογραφιών, ξεκάθαρου typography και tooltips.
3. Όλες οι επιλογές είναι εμφανείς στον χρήστη από την αρχή. Δεν υπάρχει scrolling του μενού ή της σελίδας που φιλοξενεί το μενού ώστε να χάνεται κάποια στιγμή η αρχική επιλογή από το πολύ scrolling.
4. Είναι μενού που προσφέρει γρήγορη πλοήγηση με ένα κλικ.

Πότε χρειάζεται ένα Mega Drop Down menu;

Για να χρησιμοποιηθεί ένα Mega Drop Down menu στο design ενός διαδικτυακού τόπου, θα πρέπει να απαντηθούν θετικά τουλάχιστον οι 2 πρώτες από τις παρακάτω ερωτήσεις:

1. Το website έχει μεγάλο βάθος επιπέδων δομής;
2. Το κάθε επίπεδο δομής περιέχει πολλές επιλογές;
3. Απαιτείται ομαδοποίηση της πληροφορίας σε επίπεδο πλοήγησης;

Πως γίνεται η καλύτερη ομαδοποίηση των επιλογών πλοήγησης;

1. Η αρχική στρατηγική ομαδοποίησης γίνεται ακολουθώντας την λογική δομή του διαδικτυακού τόπου. Αυτό σημαίνει πως αν ο διαδικτυακός τόπος έχει μια συγκεκριμένη δομή, το Mega Drop Down menu θα ακολουθήσει και αυτό εκείνη την δομή. Για καλύτερα αποτελέσματα μπορούν οι τίτλοι των ομάδων πλοήγησης να εμφανίζονται με διαφορετική γραμματοσειρά η μορφοποίηση. Αυτό όμως δεν μπορεί να θεωρηθεί σαν η καλύτερη λύση σε όλες τις περιπτώσεις.
2. Αν η παραπάνω τακτική δεν είναι αρκετή, τότε η παρουσίαση των ομαδοποιημένων επιλογών γίνεται με σειρά προτεραιότητας (σημασίας). Είναι προτιμότερο να γίνεται τοποθέτηση των σημαντικότερων ομάδων επιλογών στο σημείο που βρίσκεται κοντά στην κεντρική πλοήγηση του website. Δηλαδή αν υπάρχει μια κεντρική πλοήγηση π.χ. που το πρώτο της επίπεδο περιέχει την επιλογή “Υπηρεσίες”, τότε, από τις ομάδες επιλογών που υπάρχουν στην κατηγορία αυτή (Υπηρεσίες), είναι προτιμότερο να τοποθετούνται εκείνες με την μεγαλύτερη σημασία κοντά στο σημείο όπου το Mega Drop Down menu ανοίγει. Δηλαδή κοντά στην λέξη “Υπηρεσίες” του κεντρικού συστήματος πλοήγησης.
3. Επίσης είναι σημαντικό να μην επαναλαμβάνονται στις επιλογές της ομαδοποιημένης πλοήγησης διπλοί όροι, ακόμα και αν αναφέρονται σε διαφορετικές κατηγορίες. Είναι χαρακτηριστικό των Mega Drop Down menus να έχουν όλο το σύστημα πλοήγησης εμφανιζόμενο, οπότε θα φαίνονται οι διπλές ονομασίες και θα μπερδεύουν τους χρήστες.
4. Τέλος με την χρήση του Title attribute μπορεί να επιτευχθεί ενίσχυση της κάθε επιλογής εντός του συστήματος πλοήγησης κάνοντας ακόμα πιο ξεκάθαρη την λειτουργία της για τους χρήστες.

Ποια είναι τα πλεονεκτήματα της χρήσης των Mega Drop Down menus;

1. Άμεση πρόσβαση σε οποιοδήποτε επίπεδο ή σημείο επιθυμεί ο χρήστης.
2. Δημιουργία “λογικής” του διαδικτυακού τόπου και συνηθειών πλοήγησης στο μυαλό του χρήστη μέσα από οπτική απεικόνιση της δομής.
3. Αποφυγή αχρείαστου scrolling εντός των drop down menus του διαδικτυακού τόπου, το οποίο θα μπορούσε να δημιουργήσει εν συνεχεία και scrolling στις σελίδες του site όταν αυτό (το μενού) είναι σε πλήρη ανάπτυξη.
4. Ενίσχυση του SEO του διαδικτυακού τόπου γιατί με την χρήση Mega Drop Down menus γίνεται και αυτομάτως internal linking των σελίδων του website.

Παραδείγματα πετυχημένης χρήσης Mega Drop Down menus

Ακολουθεί μια λίστα από διαδικτυακούς τόπου που χρησιμοποιούν Mega Drop Down menus για να ενισχύσουν την εμπειρία της πλοήγησης και που αξίζει να σημειωθούν σαν σημεία αναφοράς και έμπνευσής. Κάθε μια περίπτωση προσφέρει ξεκάθαρα ομαδοποιημένες επιλογές η οποίες μπορούν πολύ εύκολα και γρήγορα να “σκαναριστούν” με το μάτι και να οδηγήσουν γρήγορα και κατανοητά τους χρήστες στα σημεία που τους ενδιαφέρουν.

Bentley Motors

http://www.bentleymotors.com/

Clinique

http://www.clinique.com/index.tmpl

Converse

http://www.converse.com/

Electronic Arts

http://www.ea.com/

Gateway Computers

http://www.gateway.com/

Guitar Hero

http://hub.guitarhero.com/games/ghiphone

Intel

http://www.intel.com/p/en_US/business?iid=gg_work+home_business

La Residence Mykonos Luxury Hotel

http://www.laresidencemykonos.com/

MTV

http://www.mtv.com/

NPR

http://www.npr.org/

REI

http://www.rei.com/

Republic

http://www.republic.co.uk/

Reuters

http://www.reuters.com/

Starbucks

http://www.starbucks.com/

White House

http://www.whitehouse.gov/

Mega Drop Down Menu resources

Στο διαδίκτυο υπάρχουν αρκετές λύσεις που μπορούν να χρησιμοποιηθούν για να επιταχυνθεί η διαδικασία της δημιουργίας ενός δυναμικού Mega Drop Down Menu συστήματος πλοήγησης. Μια αναζήτηση σε οποιαδήποτε μηχανή αναζήτησης για τον όρο “Mega Drop Down Menu Scripts” θα επιστρέψει πολλά αξιόλογα αποτελέσματα. Για την διευκόλυνσή σας, έχουν σημειωθεί παρακάτω οι σύνδεσμοι για 4 τέτοιες λύσεις:

CSS Ultimate Menus

http://codecanyon.net/item/css-ultimate-menus/123107?ref=1stwebdesigner

CSS3 Mega Drop Down Menu

http://codecanyon.net/item/css3-mega-drop-down-menu/126387?clickthrough_id=&redirect_back=true&ref=105

Make a Mega Drop-Down Menu with jQuery

http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Cut & Paste jQuery Mega Menu

http://www.javascriptkit.com/script/script2/jkmegamenu.shtml

Επίλογος

Αν θέλετε να προσθέσετε κάποιο website ή resource το οποίο πιστεύεται πως πρέπει να μπει στο άρθρο, μην διστάσετε να το γράψετε στα comments. Θα χαρούμε να το προσθέσουμε.

Πρόσφατα το NETTUTS+ δημοσίευσε ένα ενδιαφέρον CSS Tip το οποίο αξίζει να αναφέρουμε στο Web Design Blog. Το Tip αυτό ονομάζεται Pure CSS Reflections και σας δίνει τη δυνατότητα να εισάγετε μια αντανάκλαση κάτω από τις εικόνες ή την εικόνα που επιθυμείτε στη σελίδα σας με CSS κώδικα μόνο, χωρίς την ανάγκη κάποιου προγράμματος επεξεργασίας εικόνας, όπως το Photoshop. Το συγκεκριμένο CSS tip δουλεύει μόνο σε Webkit supported browsers, δηλαδή τον Safari, Chrome, iPhone & iPad Safari και όλα τα προγράμματα πλοήγησης που υπάρχουν σε αυτή την λίστα.

Ο κώδικας CSS που απαιτείται για αυτή την ενέργεια είναι μικρός:

img {

-webkit-box-reflect: below 4px
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

}

Απλά εισάγετέ τον στο CSS αρχείο σας στο σημείο που επιθυμείτε και δείτε τα αποτελέσματα.

Ανάλυση του CSS

-webkit-box-reflect: below 4px

Με αυτή την εντολή λέμε στον webkit browser να δημιουργήσει μια αντανάκλαση του γραφικού μας. Η θέση της αντανάκλασης αυτής, θα είναι 4px κάτω από το γραφικό.

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

Για να ελαττώσουμε τον χώρο στον οποίο εξαπλώνεται η αντανάκλαση, χρησιμοποιούμε την εντολή -webkit-gradient η οποία ουσιαστικά χρωματίζει με degrade ένα χώρο. Η σύνταξη του παραπάνω κώδικα καθοδηγεί το degrade που θέλουμε να φτιαχτεί, ορίζοντάς το σαν linear degrade, με κατεύθυνση από πάνω αριστερά προς τα κάτω αριστερά (δηλαδή ευθεία κάτω). Το χρώμα του θα αρχίζει αντίστοιχα από διάφανο και θα καταλήγει σε άσπρο που είναι και το χρώμα της σελίδας του παραδείγματος. Ουσιαστικά αυτή η εντολή λειτουργεί σαν μια μάσκα. Ο αριθμός 7 δηλώνει το ποσοστό της εικόνας που θέλουμε να φαίνεται στο degrade. Στην προκειμένη περίπτωση είναι 70%.

Όταν το 2003 γράφτηκε η πρώτη γραμμή κώδικα του WordPress κανείς δεν φανταζόταν ότι θα έφτανε τόσο ψηλά, ανάμεσα σε custom cms και άλλα αντίστοιχα open source. Μέσα σε ένα χρονικό διάστημα μίας πενταετίας εξελίχτηκε σε μία επαγγελματική λύση που έχουν υιοθετήσει αρκετές εταιρίες του χώρου, bloggers, startups και ιδιώτες χρήστες.  Η πρόοδος της τεχνολογικής πλατφόρμας του διαχειριστικού εργαλείου είναι αξιοσημείωτη με συνεχείς βελτιώσεις και την υποστήριξη μίας παγκόσμιας κοινότητας. Παράλληλα η μπροστινή όψη (client side) της εφαρμογής έχει καλυτερεύσει με γοργούς ρυθμούς δημιουργώντας μία νέα αγορά από επαγγελματικά themes που είναι σχεδιασμένα με τα τελευταία πρότυπα του διαδικτύου, από εικαστικής απόψεως και σε προγραμματιστικό επίπεδο (html, javascript,  php etc).

Το WDB σας παραθέτει μία σύντομη λίστα από τα καλύτερα websites για να αγοράσετε επαγγελματικά themes βασισμένα σε διαφορετικό layout & UID. Καλύπτουν ανάγκες για απλές προσωπικές και εταιρικές προβολές, καθώς ηλεκτρονικά καταστήματα e-shop, online εφημερίδες και μαγκαζίνα. Χαμηλώστε το κόστος παραγωγής ενός διαδικτυακού έργου χρησιμοποιώντας προσεγμένη τυποποιημένη δουλεία από επαγγελματίες, δίδοντας όμως και τη δικιά σας εικαστική πινελιά στο τελικό αποτέλεσμα.

• templatic.com
• www.woothemes.com
• www.press75.com
• www.studiopress.com
• www.elegantthemes.com
• wpbest.com
• wpremix.com
• www.nattywp.com
• www.wpzoom.com

Καλοδεχούμενη είναι η προσθήκη του κάθε χρήστη στη παραπάνω λίστα.

Αναμένουμε να δούμε και τις αναβαθμίσεις του πολύ αναμενόμενου WP 3 και τις αρνητικές ή θετικές εξελίξεις στην αγορά των επαγγελματικών themes που ξεπερνά πολλά εκατομμύρια δολάρια παγκοσμίως. Συμπληρωματικά να επισημανθεί το σημερινό άρθρο δεν αποτελεί διαφήμιση του WordPress και των επαγγελματικών themes αλλά ένα εφόδιο στο σύγχρονο επαγγελματία να παρέχει πιο οικονομικές λύσεις στην σημερινή πιεσμένη αγορά. Σίγουρα υπάρχουν και άλλα αξιόλογα διαχειριστικά εργαλεία websites / CMS  διαφορετικών προγραμματιστικών γλωσσών και προελεύσεων, που κάνουν τη δουλειά τους.

Το Web Design Blog σας παρουσιάζει μία μεγάλη συλλογή από επιλεγμένα άρθρα που δημοσιευτήκαν  μέσα στο Φεβρουάριο με πλούσια πηγή έμπνευσης και δημιουργικότητας. Προβάλλονται καλαίσθητα websites & concepts σχεδιασμένα με λεπτομέρεια και καλλιτεχνία από επαγγελματίες του διαδικτύου.

Η διαρκή αναζήτηση νέων εικόνων και οπτικών ερεθισμάτων είναι μία βασική ανάγκη στη καθημερινότητα του web designer.  Οι διαφορετικές εικαστικές λύσεις και συνθέσεις που απαιτούνται σε κάθε περίπτωση αποτελούν το βασικό στοιχείο του κάθε σύγχρονου designer. Τίποτα δεν είναι αρκετό να καλύψει το κενό της φαντασίας ενός καλλιτέχνη, που καλείται να σχεδιάζει και να σκέφτεται νέες ιδέες με προσαρμοσμένα design σε καθημερινούς ρυθμούς. Μία τυχαία εικόνα που θα αποτυπωθεί στον ανθρώπινο νου “ξεφυλλίζοντας” διάφορα website showcases, μπορεί στο μέλλον να φέρει τη γέννηση ενός πετυχημένου design.

e-commerce

Ηλεκτρονικά καταστήματα / e-shops σχεδιασμένα με έντονο το καλλιτεχνικό στοιχείο και προσαρμοσμένα εικαστικά για διαφορετικές ομάδες χρηστών.

• 65 καλοσχεδιασμένα e-commerce websites για έμπνευση
• 25 εμπνευσμένα e-commerce websites

Ιllustrations

Προβάλλονται Ιστοσελίδες σχεδιασμένες με έντονο το στοιχείο των illustrations. Τα τελευταία web trends συγκαταλέγουν τα custom illustrations μέσα στη διαδικτυακή μόδα αφού το αποτέλεσμα είναι πάντα μοναδικό.

• 30 πανέμορφα websites βασισμένα σε illustrations
• 50 δείγματα από πανέμορφα illustrations στο web design

Flash

Περιλαμβάνει εντυπωσιακά flash websites, η κίνηση τα γραφικά δίνουν πάντα μία όμορφη online εμπειρία.

• 60 δημιουργικά flash websites που δεν πρέπει να χάσετε

404 error

Η λεπτομέρεια και η εικαστική παρέμβαση είναι πάντα επίκαιρη καθώς όλο και πληθαίνει η χρήση σελίδων 404 error pages.

• Συλλογή από δημιουργικά 404 error σελίδες
• 60 εμπνευσμένα δείγματα 404 error σελίδων

Διάφορα

• Συλλογή από Coming Soon websites
  Όμορφη συλλογή από “υπό κατασκευή  / σύντομα κοντά σας” websites που χαρίζουν υποσχόμενα designs
• 8 ενδιαφέροντα videos με οράματα – σενάρια για το μέλλον
  Μία γεύση του μέλλοντος μέσα από το πρίσμα της τεχνολογίας και της επιστημονικής φαντασίας.
• 20 websites για να αντλήσουν έμπνευση οι γραφίστες

Πηγές 300+ συλλογής αλφαβητικά:

• acrisdesign.com
• www.hongkiat.com/blog
• www.splashnology.com
• www.themeflash.com
• vandelaydesign.com
• www.webdesignerdepot.com
• webdesignfan.com
• wegraphics.net
• woorkup.com

Όπως έχουμε αναφέρει και στο παρελθόν, το WP είναι μια εύχρηστη και ελαστική πλατφόρμα, η οποία προσφέρει πολλές δυνατότητες στους διαχειριστές της. Αυτό που την κάνει τόσο ενδιαφέρουσα είναι η ευκολία στο να προσθέτει κάποιος νέες λειτουργίες με την προσθήκη WordPress Plugins. Στο σημερινό άρθρο το WDB σας έχει ετοιμάσει μια λίστα με χρήσιμα plugins τα οποία ίσως σας φανούν χρήσιμα για το WordPress installation σας.

1. Drag To Share

Δώστε τη δυνατότητα στους χρήστες σας να μοιραστούν στα κοινωνικά δίκτυα μια σελίδα, κάνοντας drag μια εικόνα της σε οποιοδήποτε Social Networking site.
Download: http://wordpress.org/extend/plugins/drag-to-share/

2. TypeKit Plugin for WordPress

Προσθέστε fonts στο WordPress σας για να το ομορφύνετε με την χρήση της υπηρεσίας TypeKit.
Download: http://wordpress.org/extend/plugins/typekit/

3. Custom Coming Soon Page

Αν θέλετε να προετοιμάσετε το έδαφος ενός νέου WordPress site πριν αυτό βγεί στον αέρα, με αυτό το plugin έχετε την δυνατότητα να φτιάξετε μια “Coming Soon” σελίδα.
Download: http://wordpress.org/extend/plugins/custom-coming-soon-page/

4. Custom Class Selector

Δώστε ένα δικό σας στυλ στο περιεχόμενο των σελίδων σας με την χρήση αυτού του plugin.
Download: http://wordpress.org/extend/plugins/custom-class-selector/

5. Pretty Comments

Δώστε την δυνατότητα στους χρήστες σας να γράφουν όμορφα comments με τη χρήση του “Pretty Comments” plugin.
Download: http://wordpress.org/extend/plugins/pretty-comments/screenshots/

6. Custom Login Page

Αν βαρεθήκατε να βλέπετε συνέχεια την ίδια login σελίδα όταν κάνετε login εσείς ή οι χρήστες σας, τότε μπορείτε με τη δημιουργία του “Custom Login Page” να κάνετε ακριβώς αυτό.
Download: http://wordpress.org/extend/plugins/wp-custom-login-page/

7. Freebie Images: Free Stock Images Plugin

Αν δεν έχετε φωτογραφικό υλικό για τα post σας, μπορείτε εύκολα με την χρήση του “Freebie Images” να αποκτήσετε πρόσβαση σε πολλές φωτογραφίες, δωρεάν!
Download: http://wordpress.org/extend/plugins/freebie-images-free-stock-images-plugin/screenshots/

8. SecurePress Website Security Analyzer

Δώστε την ασφάλεια που χρειάζεστε στο WordPress website σας με την βοήθεια του πολύ χρήσιμου “SecurePress” plugin. Το plugin αυτό περιέχει μια σειρά από χρήσιμα εργαλεία τα οποία μπορεί να κάνουν την διαφορά την στιγμή που κάποιος επιτήδειος προσπαθήσει να σας κάνει ζημιά.
Download: http://wordpress.org/extend/plugins/securepress-plugin/

9. My WordPress Secure

Κρατήστε την έκδοση του WP σας κρυφή με αυτό το πολύ απλό αλλά έξυπνο plugin.
Download: http://wordpress.org/extend/plugins/my-wordpress-secure/

10. No IE6

Το Web Design Blog, έχει αναφέρει στο παρελθόν για το πώς να ενημερώνετε τους χρήστες των διαδικτυακών σας τόπων να χρησιμοποιούν την ξεπερασμένη έκδοση του Internet Explorer 6.0, δίνοντάς τους τη δυνατότητα να κάνουν αναβάθμιση. Το παρακάτω plugin, σας δίνει αυτή την δυνατότητα στα WordPress installations σας.
Download: http://wordpress.org/extend/plugins/reject-ie6/

11. Private Messages For WordPress

Σαν bonus, σας παρουσιάζουμε ένα plugin το οποίο δίνει τη δυνατότητα στους χρήστες σας να στέλνουν προσωπικά μηνύματα μεταξύ τους!
Download: http://wordpress.org/extend/plugins/private-messages-for-wordpress/screenshots/