Wednesday, June 23, 2010

Jquery we love you!

2 comments

Το website της nelios.com, εκτός από το πολύ καλό design του, διαθέτει ένα ακόμα στοιχείο που ενισχύει τη δυναμικότητά του, τη λειτουργικότητά του και προσελκύει το χρήστη: τα διάφορα εφέ που υπάρχουν. Πώς ακριβώς επιτυγχάνονται αυτά και τί τεχνολογία χρησιμοποιείται; Η απάντηση είναι απλή...Jquery.


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


  • δε διαβάζονται από τις μηχανές αναζήτησης,

  • δεν παίζουν σε όλους τους browser (υπάρχουν προβλήματα ασυμβατότητας και συχνά χρειάζεται να εγκατασταθεί ειδικό λογισμικό),

  • δε μπορείς να κάνεις copy-paste κάποιο μέρος του κειμένου,

  • δε μπορείς να δείς το URL που θα πατήσεις και

  • δεν έχεις διάφορες συντομεύσεις που σου δίνει ο web browser σου, όπως π.χ. το δεξί click με αρκετές επιλογές.


Στο παρακάτω screenshot παραθέτω με νούμερα το πού «κρύβεται» Jquery στην πρώτη σελίδα του website της nelios.com. Παρατηρώντας την εικόνα μπορεί κανείς με μια γρήγορη ματιά να διαπιστώσει πως το Jquery δίνει λύσεις σε πολλές εφαρμογές, οι οποίες θα εξηγηθούν, εν συντομία, για κάθε τεχνολογία που χρησιμοποιήθηκε.



  1. Το πολυαγαπημένο μας megamenu στο οποίο «κρύβεται» σχεδόν όλο το sitemap του website. Μόλις το ποντίκι περάσει πάνω από τους τίτλους του megamenu (About us, Solutions, Services, κτλ), τότε ανοίγει ένα αρκετά μεγάλο μενού, όπου με μία ματιά μπορείτε να βρείτε αυτό που ψάχνετε. Για περισσότερες πληροφορίες μπορείτε να επισκεφτείτε το Jquery mega menu (jkmegamenu).

  2. Στην επιλογή γλώσσας εμφανίζεται ένα ωραίο και απλό εφέ. Αυτό γίνεται με το Plugin του Jquery droppy. Οι δυνατότητες του jquery droppy είναι πάρα πολλές, απλά εμείς το χρησιμοποιήσαμε σε κάτι απλό. Το Jquery droppy χρησιμοποιείται κυρίως σε μεγάλα μενού με κατηγορίες και υποκατηγορίες (για περισσότερα πατήστε εδώ).

  3. Είναι το κεντρικό μας εφέ στο οποίο αλλάζουν οι εικόνες στην οθόνη της nelios.com. Το όνομά του ... Jquery ScrollTo θα βρείτε αρκετά παραδείγματα στο http://demos.flesler.com/jquery/scrollTo/.

  4. Εδώ δε χρησιμοποιήσαμε κάποιο plugin του Jquery, αλλά κάποια από τα Jquery events ώστε να μπορέσουν τα "κουμπιά" δεξιά από την οθόνη να τεθούν σε λειτουργία.

  5. Jquery UI tabs

  6. JCaruselLite

  7. JCarusel

  8. Jquery prettyPhoto - είναι το εφέ που εμφανίζεται όταν πατάτε το κουμπί με την εικόνα του φακέλου στο footer. Δοκιμάστε το να δείτε πόσο pretty θα ανοίξει ένα παραθυράκι στο κέντρο της οθόνης σας.


Φυσικά, αντίστοιχα, μπορείτε κι εσείς γρήγορα και απλά να εγκαταστήσετε όσα plugins θέλετε στην ιστοσελίδα σας. Επισκεφθείτε το http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html, όπου υπάρχουν αρκετά plugins για Jquery που θα κάνουν το website σας αρκετά λειτουργικό αλλά συγχρόνως θα βελτιώσουν και την εικόνα του.