Γρήγορη μετάβαση

    Μερικά εργαλεία για να μην ξανά-ανακαλύψετε τον τροχό…

    Μερικές φορές, κυρίως όταν κάνουμε τα πρώτα μας βήματα σε ένα τομέα, είναι χρήσιμο να χρησιμοποιήσουμε μόνο τα πιο βασικά εργαλεία έτσι ώστε να μάθουμε πραγματικά αυτό που μας ενδιαφέρει. Για παράδειγμα αν θέλουμε να μάθουμε html τότε θα χρησιμοποιήσουμε έναν απλό κειμενογράφο και όχι το dreamweaver.

    Τι γίνεται όμως όταν θέλουμε να προχωρήσουμε ένα project γρήγορα και δεν έχουμε το χρόνο να ασχοληθούμε με πράγματα που δεν ξέρουμε καλά ή που δεν έχουμε το χρόνο να ασχοληθούμε από το μηδέν; Τότε είναι που πρέπει να ασχοληθούμε με τα frameworks. Low-level εργαλεία που χωρίς να είναι ιδιαίτερα περιοριστικά μας επιτρέπουν να κάνουμε πράγματα εύκολα και γρήγορα και πολλές φορές σωστότερα απ’ ότι θα τα καταφέρναμε χωρίς τη βοήθειά τους. Σε αυτό το άρθρο θα δούμε εν συντομία ένα framework (library αν θέλουμε να είμαστε ακριβής) για javascript και ένα για css που προσωπικά μου έχουν «λύσει τα χέρια»…

    jQuery (javascript)

    Javascript frameworks υπάρχουν πολλά, jQuery όμως ένα! Η αλήθεια είναι ότι δεν έχω ασχοληθεί ιδιαίτερα με τα υπόλοιπα που κυκλοφορούν στην πιάτσα, γιατί δεν χρειάστηκε ποτέ. Οτιδήποτε θέλησα να κάνω, το έκανα εύκολα και γρήγορα με το jQuery. Dom manipulation, effects, διαφόρων τύπων slideshows, form validation, ajax calls… και όλα αυτά έχοντας μόνο στοιχειώδης javascript γνώσεις. Για όσους δεν έχουν ιδέα για το τι εστί jquery ας δούμε ένα απλό παράδειγμα. Αν θέλουμε για παράδειγμα να κρύψουμε ένα div, σε raw javascript θα γράφαμε:

          document.getElementById('content').style.visibility = 'hidden';

    ενώ σε jquery αρκεί να γράψουμε:

          $("#content").hide();

    Πολύ πιο καθαρό, εύληπτο και σύντομο. Ενώ όσο τα αυτά που θέλουμε να κάνουμε γίνονται πιο πολύπλοκα τόσο η διαφορά στον κώδικα που θα χρειαστούμε γίνεται χαώδης μεταξύ σε raw javascript και jQuery.
    Επίσης για το jQuery θα βρούμε και «άπειρα» plugins τα οποία μας προσφέρουν διάφορα εφφέ και λειτουργικότητα σχεδόν χωρίς να γράψουμε κώδικα. Δύο πολύ χρήσιμες συλλογές από plugins είναι το official jQuery UI και τα jQuery tools.

    Blueprint (CSS)

    To css σαν ιδέα και σαν τεχνολογία είναι θαυμάσια, σαν πραγματικότητα όμως, αν θελήσουμε να το χρησιμοποιήσουμε για page layout και όχι για απλά πράγματα, όπως font και link styling, τότε γίνεται πραγματικός εφιάλτης. Και δεν φταίει το ίδιο αλλά κάποιοι browser, με χειρότερο όλων τον ΙΕ6, που δεν ακολουθούν τα πρότυπα που έχουν καθοριστεί. Έτσι μπορεί να φάμε ώρες ολόκληρες, ψάχνοντας για «hacks» που θα επιτρέψουν στη σελίδα μας να εμφανίζεται ακριβώς όπως θα θέλαμε σε όλους τους browser.

    Τη λύση έρχεται να δώσει το blueprint css framework που μας παρέχει κάποιες έτοιμες κλάσεις τις οποίες μπορούμε να εφαρμόσουμε πολύ εύκολα για να πετύχουμε το layout που θέλουμε, εξασφαλίζοντας παράλληλα 99,9% συμβατότητα με όλους τους δημοφιλής browser (ναι και τον καταραμένο ΙΕ6). Δεν θα μπω σε λεπτομέρειες για το πως μπορούμε να το δουλέψουμε, ένα πολύ καλό εισαγωγικό άρθρο μπορείτε να βρείτε εδώ: http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/

    Άλλο πολύ γνωστό css framework είναι το 960grid, όμως θεωρώ το blueprint ελαφρά καλύτερο στα σημεία και λίγο πιο εύχρηστο.

    Ένα πιο high-level css framework και άκρως ενδιαφέρον είναι το csscaffold. Συνδυάζει το blueprint.css… με php. Αποτέλεσμα; Μπορούμε να χρησιμοποιούμε μεταβλητές μέσα στο css μας και πολλά ακόμα καλούδια. Δεν έχω βρει το χρόνο να το δοκιμάσω όμως θα το κάνω με πρώτη ευκαιρία.

    Τέλος αν θέλετε να δείτε ένα πραγματικό site που χρησιμοποιεί το blueprint css και το jquery κατά κόρον, επισκεφθείτε το παγκοσμίως άγνωστο (ακόμη) fishmemory.net, φτιαγμένο από την αφεντιά μου 😀

    Εσείς ποιά frameworks/βιβλιοθήκες χρησιμοποιείτε και πόσο ευχαριστημένοι είστε;

    Leave a Reply

    • (will not be published)

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>