CSS3 και βοηθητικά εργαλεία…

Δεν υπάρχει πιο καλή περίοδος από αυτήν για να αρχίσουμε σιγά-σιγά να χρησιμοποιούμε όλο και περισσότερους CSS3 κανόνες. Οι καινούργιοι browsers είναι αρκετά ώριμοι για κάτι τέτοιο, οι mobile  browsers βρίσκονται σε εξίσου υψηλό επίπεδο, ενώ στους παλιότερους δεν πρόκειται να χαλάσει τίποτα, απλά δεν θα “βλέπουν” τα καινούργια καλούδια (δεν πρόκειται να χαλάσει κάτι).

Το μόνο αρνητικό στην παραπάνω υπόθεση είναι πως στις περισσότερες περιπτώσεις είτε το συντακτικό είναι κάπως δύσκολο στην εκμάθηση (κάθε αρχή και δύσκολη), είτε χρησιμοποιούνται διάφορα browser prefixes για να λειτουργήσουν σωστά, είτε οι κανόνες είναι αρκετά “visual”, οπότε θέλουμε να βλέπουμε άμεσα στον browser το αποτέλεσμα, και όχι να προσπαθούμε να μαντεύουμε τις ρυθμίσεις.

Παρακάτω έχω μαζέψει κάποια online εργαλεία που χρησιμοποιώ για την γρήγορη επίλυση των παραπάνω περιπτώσεων. Έχουμε και λέμε λοιπόν :

  • CSS3 Please! : Ένα απλό αλλά πολύ περιεκτικό site για να αντιγράψετε εύκολα και γρήγορα τους CSS3 κανόνες που θέλετε (μαζί με όλα τα browser prefixes). Γρήγορο, minimal και “to the point”. Είναι συνήθως ο πρώτος μου σταθμός όταν ψάχνω κάποιο prefix για CSS3 κανόνα.
  • CSS3 Generator : Εξίσου καλό εργαλείο, ωστόσο μερικές φορές πρέπει να κάνεις κάποια click παραπάνω για να πάρεις αυτό που θέλεις…
  • Font Squirrel : Απλά το καλύτερο εργαλείο για μετατροπή γραμματοσειρών σε web fonts (@font-face). Δεν έχω χρησιμοποιήσει ποτέ μου άλλο εργαλείο γι’ αυτήν την δουλειά.
  • Layer Style : Ένα πολύ-εργαλείο που προσφέρει γραφικό περιβάλλον (σε στυλ “Photoshop”) για την δημιουργία των κανόνων μας, αλλά και live preview! Πολύ έξυπνη ιδέα και υλοποίηση, που θα βοηθήσει πολλούς γραφίστες και όχι μόνο…
  • Drop Shadow Generator : Πιο εξειδικευμένο στις σκιές, ωστόσο τα έτοιμα presets του είναι φανταστικά, ενώ μπορείτε να δείτε και σε live preview το πως θα φαίνεται η σκιά σας. Προσωπικά το χρησιμοποιώ συχνά γιατί δεν μπορώ να προβλέψω με τίποτα το πως θα φαίνονται οι σκιές στον browser!

Έχετε να προσθέσετε κάποιο άλλο εργαλείο, τότε απλά αφήστε ένα comment 😉

Update : Προσθέτω ακόμα 2 πολύ καλά εργαλεία που συστήνει ο φίλος μου Γιάννης.

  • CSS3.0 Maker : Μια λύση “όλα σε ένα”, μιας και δημιουργεί κώδικα για τα πάντα, από border-radius μέχρι CSS animations. Μου αρέσει γιατί δείχνει και ποιοι browsers υποστηρίζουν τους CSS3 κανόνες.
  • Ultimate CSS Gradient Generator : Πολύ καλό εργαλείο για την δημιουργία gradients με πολλά presets και εύκολο UI.

Τα καλύτερα links – Δεκέμβριος 09

Το συγκεκριμένο post θα είναι και το τελευταίο της σειράς, μιας και τα αγαπημένα μου links θα δημοσιεύονται πλέον κατευθείαν στον twitter λογαριασμό μου (ναι είναι ενεργός επιτέλους)! Καλή χρονιά σε όλους και μην ξεχάσετε να με ακολουθείτε στο twitter 😉

Έμπνευση

  • Wolfram|Alpha : Μια νέα, πολύ εντυπωσιακή που πολλές φορές καταντάει και τρομακτική search engine. Δείτε οπωσδήποτε και το τρομακτικό video της

Web Design

  • Easy- front end framework : Ακόμα ένα CSS framework το οποίο προσφέρει πολλές “out of the box” javascript λύσεις (με την βοήθεια του jQuery).
  • Clearbox 3 : H καινούργια version είναι ακόμα καλύτερη…
  • Markup Generator : Ένας καινούργιος τρόπος γραφής markup. Θα ήθελα να το δω και σε text-editors/IDEs, μιας και θα με βόλευε πολύ…
  • Google Browser Size : Για να βλέπεται πως φαίνεται το site σας σε διάφορες αναλύσεις. Ίσως το μοναδικό Google εργαλείο για sites που δεν με εντυπωσίασε ιδιαίτερα…
  • @font-face Generator : Το καλύτερο εργαλείο που έχω βρει μέχρι στιγμής για την μετατροπή, αλλά και το editing web γραμματοσειρών. Γενικότερα το Font-Squirrel κάνει φανταστική δουλειά στα web fonts

Web Development

  • IxEdit : Ένα φανταστικό εργαλείο για την συγγραφή jQuery κώδικα, κατευθείαν μέσα στην ιστοσελίδα και μέσω γραφικού περιβάλλοντος! Θεωρητικά δεν χρειάζεται να ξέρετε καν jQuery! Τι άλλο θα δούμε…
  • BackPress : Μια PHP library που θα απλοποιήσει πολλά tasks. Την χρησιμοποιούν πολλά γνωστά open source projects όπως το WordPress και το bbPress.

Tools

  • Screenpresso : Ένα δωρεάν εργαλείο για screenshots με πολλά χαρακτηριστικά.  Είναι από τα καλύτερα που έχω δει (ειδικά σε λειτουργικό Windows, στο οποίο τέτοια εργαλεία είναι λιγότερα και με ελάχιστα χαρακτηριστικά)…
  • Ένα δωρεάν Sketching & Wireframing Kit, διαθέσιμο σε πολλά διαφορετικά formats (PDF, EPS, SVG κτλ.).

Accessibility/Usability

  • To WAVE (όχι της Google, βγαίνει από τα αρχικά  Web Accessibility Evaluation Tool), είναι μια δωρεάν υπηρεσία αξιολόγησης προσβασημότητας, κατασκευασμένη από το WebAIM.

WordPress

  • Το Carrington αυτοαποκαλείται CMS theme Framework για το WordPress. Η ιδέα είναι πολύ καλή, ωστόσο το βρήκα πολύ πολύπλοκο για την δουλειά που κάνει (απλά φτιάχνει themes!), ενώ χρειάζεται και αρκετή μελέτη…
  • WP Test data import : Ένα WP XML αρχείο για περάσετε γρήγορα στο blog σας μερικά test posts. Πολύ χρήσιμο ειδικότερα εάν δουλεύεται σε κάποιο καινούργιο theme…

Plug ins

  • jQuery Masonry : Ένα έξυπνο layout plug in που αλλάζει την default λειτουργία των floats.
  • Το Superfun είναι ένα εντυπωσιακό jQuery plug in. Ρίξτε του μια ματιά…
  • Google Page Speed : Ένα plug in/add on για το Firebug, με το οποίο μπορείτε να βρείτε και να βελτιώσετε τα αρχεία που καθυστερούν τις ιστοσελίδες σας. Προσωπικά προτιμώ την λύση της Yahoo, YSlow
  • Art Direction : Ένα WordPress plug in με το οποίο μπορείτε να δώσετε σε κάθε post σας ξεχωριστό CSS αρχείο (έτσι ώστε κάθε post σας να δείχνει διαφορετικό). Δοκιμάστε το εάν δεν βαριέστε…
  • TufteGraph : Ακόμα ένα jQuery plug in για charts/graphs…
  • Captify : Ένα απλό και πρακτικό jQuery plugin, για την προβολή των alt text στις φωτογραφίες σας.
  • jSnow : Και ένα jQuery plugin για χιόνι! Μάλλον άργησα να το παρουσιάσω…

Διάφορα links

  • Experts-Zone : Ένα ενδιαφέρον blog που προστέθηκε πρόσφατα στον RSS reader μου.
  • Academic Earth : Το εν λόγο site προβάλει (δωρεάν πάντα) video από παρουσιάσεις/lectures, των κορυφαίων ακαδημαϊκών της γης! Τα video είναι χωρισμένα σε κατηγορίες μαθημάτων, οι οποίες καλύπτουν όλο το φάσμα των επιστημών. Είναι κάτι που δεν πρόκειται να δω ούτε σε 30 χρόνια στην Ελλάδα…

Τα καλύτερα links – Μάρτιος 09

Έμπνευση

Web Development

  • To RegExr είναι ένα φοβερό on-line tool για εκμάθηση και testing regular expressions.
  • Άλλη μια δωρεάν Javascript library με το περίεργο όνομα qooxdoo. Η library ενδείκνυται κυρίως για την δημιουργία UI.
  • Ένα δωρεάν και μάλιστα open source framework/μηχανή παιχνιδιών για Flash. To PushButton Engine δείχνει αρκετά δυνατό στον τομέα του, εάν φυσικά έχετε τις ανάλογες γνώσεις πάνω στο Flash.
  • Το Hastymail είναι ένας δωρεάν, open source, web email client, με πάρα πολλά χαρακτηριστικά και γραμμένος σε PHP. Συστήνεται ανεπιφύλακτα σε όσους θέλουν να στήσουν κάτι τέτοιο στην εταιρεία τους, μιας και υποστηρίζει άπειρους browsers, συσκευές, προσφέρει AJAX ευκολίες, ενώ είναι και πολύ παραμετροποιήσημος. Για περισσότερες λύσεις ρίξτε μια ματιά και στο άρθρο “10 AJAX-based & PHP WebMail Clients For a Great User Experience“.
  • Όσοι βέβαια ψάχνουν κάτι πιο ολοκληρωμένο, δηλαδή μια κανονική “communication platform” με email client, calendars, contacts και file managers, καλό είναι να ρίξουν μια ματιά στο επίσης δωρεάν και open source 6zap. Είναι κάπως πιο απαιτητικό σε απαιτήσεις, αλλά προσφέρει μια ολοκληρωμένη και Web 2.0 λύση επικοινωνίας…
  • Το Shopify είναι μια πολύ εύκολη και φθηνή υπηρεσία δημιουργίας e-shop.

Tools

  • Το Styleneat είναι φανταστικό εργαλειάκι για να κρατάτε τα CSS σας νοικοκυρεμένα 😉
  • Το νέο αγαπημένο μου εργαλείο ονομάζεται Texter! Είναι ένας text expander φτιαγμένος από το Lifehacker και θα σας σώσει άπειρες ώρες πληκτρολογήματος (δυστυχώς μόνο για Windows, αν και είμαι σίγουρος πως θα υπάρχει κάτι ανάλογο για Linux και OS X). Θα σας αλλάξει την ζωή, ήδη έχω αρχίσει να το συνηθίζω επικίνδυνα και να μην μπορώ να κάνω χωρίς αυτό…

WordPress

  • Ένα φανταστικό shopping cart για το WordPress, με το όχι και τόσο πρωτότυπο όνομα WP e-Commerce. Πολύ καλή λύση, με πολλά χαρακτηριστικά και εύκολο customization.

Plug ins

  • Ένα ελαφρύ jQuery image gallery plug in, με το περίεργο όνομα Pikachoose
  • Το ImageSwitch είναι άλλο ένα jQuery plug in με πολλές δυνατότητες , το οποίο μπορεί να κάνει τα δύσκολα, εύκολα! Ρίξτε του οπωσδήποτε μια ματιά…
  • Ακόμα ένα ενδιαφέρον plug in για jQuery, το οποίο έχει να κάνει με εμφάνιση tooltips.
  • Το Lightbox clone κάνει απλά και εύκολα αυτό που λέει το όνομα του…
  • Μεταφράστε το site σας σε άλλες γλώσσες εύκολα και γρήγορα, με την βοήθεια του Sunday Morning (υποστηρίζει και ελληνικά)! Προσωπικά δεν μου γέμισε το μάτι, ωστόσο δεν το έψαξα και πολύ…

Blogs

  • To DIY (Do It Yourself) είναι ένα νέο ελληνικό video-cast που ασχολείται με αρτίστικα θεματάκια.  Οι τύποι είναι φοβεροί και μάλιστα προσφέρουν το περιεχόμενο τους κάτω από άδεια Creative Commons. Καλή επιτυχία παιδιά!
  • Μια πολύ αξιόλογη ελληνίδα web designer/developer, η Lea Verou, γράφει πολλά και ενδιαφέροντα στο blog της (στα αγγλικά). Απορώ πως δεν την είχα πάρει χαμπάρι τόσο καιρό…
  • Για τους designers που δεν ξέρουν πως να ξεκινήσουν Javascript, καλό θα ήταν να περάσουν, και γρήγορα μάλιστα, από το Teach Me Javascript. To blog ξεκινάει από τα πάρα πολύ βασικά και υποθέτω πως σιγά-σιγά θα εμβαθύνει. Το καλό είναι πως δεν χρειάζεται να έχεις ιδέα από Javascript ή άλλη γλώσσα προγραμματισμού, γιατί πολύ απλά ξεκινάει από τα πάρα πολύ βασικά και εξηγεί πως λειτουργεί (και γιατί) η συγκεκριμένη γλώσσα. Εγώ πάντως θα ρίχνω μια ματιά για επανάληψη 😉
  • Άλλο ένα ελληνικό blog με θέμα το SEO και τίτλο Seotalk.gr. Προστέθηκε και αυτό στον reader μου…

Δωρεάν / Freebies

  • Το NVDA (NonVisual Desktop Access) είναι ένας δωρεάν και open source screen reader (μόνο για Windows OS προς το παρόν). Υποστηρίζει 20 γλώσσες (δεν είδα κάπου τα ελληνικά), είναι συμβατός με Firefox και υποστηρίζει και το πρότυπο  WAI-RIA.

Διάφορα links

  • Και τέλος το καλύτερο online πρωταπριλιάτικο ψέμα/αστείο. Save Internet Explorer 6! 865 άνθρωποι από όλη την γη έχουν υπογράψει ήδη την αίτηση διαμαρτυρίας. Εσείς?

Τα καλύτερα links – Φεβρουάριος 09

Με καθυστέρηση μιας εβδομάδας βγαίνουν τα links του Φεβρουαρίου, ωστόσο έχω καλή δικαιολογία γι αυτήν την καθυστέρηση… Λίγο η δουλειά στο τέλος του μήνα, αλλά το χειρότερο, το σπάσιμο του χεριού μου σε 3 σημεία (2 λάμες και 32 ράμματα!), με έκαναν να καθυστερήσω κάπως αυτό το post. Δεν έχω να μοιραστώ πολλά links μαζί σας αυτόν τον μήνα, ωστόσο αυτά που παρουσιάζω είναι πολύ ενδιαφέροντα. Έχουμε και λέμε λοιπόν :

Web Development

Tools

  • Ο WYMeditor είναι ένας δωρεάν, web-based, WYSIWYG (What You See Is What You Get) XHTML editor. Τον χρησιμοποιούν πολλές γνωστές web εφαρμογές, που σημαίνει ότι είναι δοκιμασμένος, δουλεύει καλά και υποστηρίζει τους περισσότερους browsers! Τι άλλο να ζητήσει κάποιος από έναν τέτοιον editor.
  • Άλλος ένας δωρεάν και open source WYSIWYG HTML editor, με το περίεργο όνομα Xinha. Και αυτός ο editor φαίνεται πολύ οργανωμένος και δουλεμένος, οπότε διαλέγεται και παίρνεται!

Plug ins

  • Το Simpletip είναι ένα χρήσιμο jQuery plug in, για tooltips. Απλό, εύκολο και με πολλές δυνατότητες παραμετροποίησης.
  • Άλλο ένα εντυπωσιακό jQuery plug in είναι το Slide box. Αν και μου αρέσουν τέτοιου είδους εφέ δεν ξέρω κατά πόσο πρακτικά και accessible είναι τελικά.

Blogs

Web 2.0

  • To Zemanta είναι ένα πολύ ενδιαφέρον semantic web εργαλείο. Μπορείτε να το χρησιμοποιήσετε σαν plug in σε πολλούς browsers ή να το ενσωματώσετε στις υπηρεσίες που χρησιμοποιείτε (e-mail, blogging, κτλ.). Τώρα εάν σας βοηθήσει ή κατά πόσο semantic στοιχεία βρίσκει (μιας και το web δεν είναι ιδιαίτερα semantic αυτήν την στιγμή), είναι άλλο θέμα.

Τα καλύτερα links – Ιανουάριος 09

Έμπνευση

Web Design

Web Development

  • Το JSValidate είναι ίσως το πιο αξιόλογο Javascript validation framework που έχω βρει μέχρι στιγμής! Πάρα πολύ εύκολο στη χρήση και “to the point”. Για όσους δεν με πιστεύουν, ας ρίξουν μια ματιά στα παραδείγματα.
  • Το JS Bin είναι ένα πολύ έξυπνο Javascript testing tool! Για περισσότερες πληροφορίες ρίξτε μια ματιά στο post που έχω γράψει γι αυτό στο CSS3.gr.
  • H $fx() είναι μία super-light Javascript animation library, για όποιον ενδιαφέρεται να μάθει μία ακόμη library…

Tools

  • Το καλύτερο add on για το Firebug ever! Μας έρχεται από το Sitepoint και ονομάζεται FireScope. Πραγματικά αυτό που έλειπε από το Firebug. Για περισσότερες πληροφορίες, ρίξτε και μια ματιά στο postακι που έγραψα στο CSS3.gr().
  • Το Gridr Buildrrr είναι ένα ενδιαφέρον on-line εργαλείο για την δημιουργία grids. Απλά ρυθμίστε το στις ανάγκες σας, δημιουργήστε το grid που θέλετε και ξεκινήστε το design σας!
  • Το Sigma Visual Ajax GUI Builder είναι ένας αρκετά περίεργο εργαλείο για την δημιουργία AJAX GUI. Προσωπικά δεν μ’ αρέσουν καθόλου τέτοια εργαλεία, ωστόσο κάποιοι μπορούν να το βρουν χρήσιμο. Όποιοι ενδιαφέρεστε μπορείτε να το κατεβάσετε κι όλας.
  • Η δωρεάν υπηρεσία Are my sites up? κάνει αυτό που λέει! Σας ενημερώνει εάν τα site σας είναι στον αέρα!
  • Δείτε ότι βλέπουν πραγματικά οι web browsers! Ενδιαφέρον, αλλά μετά από κάνα-δυο tests, απλά δεν θες να ξανανοίξεις την σελίδα…
  • Βαρεθήκατε να αναβάζεται τα video σας 1-1 σε κάθε υπηρεσία που υπάρχει; Εάν η απάντηση είναι θετική, τότε το TubeMogul είναι η υπηρεσία που θα σας λύσει τα χέρια. Εάν μάλιστα θέλετε και επιπλέον χαρακτηριστικά για τα video σας (όπως στατιστικά, keyword tagging, κτλ ) τότε ρίξτε και μια ματιά σε κάποιο από τα επί πκηρωμή πακέτα του.
  • To Web Development Project Estimator κάνει αυτό που λέει! Απλά ξεκινήστε ένα καινούργιο project, προσθέστε τα tasks και τις τιμές τους, και τελειώσατε!
  • Το ScreenToaster είναι μια φανταστική υπηρεσία δημιουργίας screencasts! Αν και δεν συμπαθώ την Java τεχνολογία, το συγκεκριμένο site καταφέρνει να την χρησιμοποιήσει πολύ αξιόλογα.

Τυπογραφία (Typography)

  • To FlippingTypical είναι ένα πολύ ενδιαφέρον εργαλείο που σας βοηθάει να επιλέξετε γραμματοσειρές, δίχντωντας σας αυτές που έχετε εγκατεστήμένες στο σύστημα σας. Για αναλυτηκότερες πληροφορίες ρίξτε μια ματιά στο post της sugarenias.

WordPress

  • Φτιάξτε το δικό σας Facebook, χρησιμοποιώντας το BuddyPress! Τώρα δεν ξέρω εάν κάτι τέτοιο είναι καλή ιδέα, ωστόσο για όσους θέλουν να δημιουργήσουν ένα μικρο-μεσαίο social network site, το BuddyPress είναι μια ενδιαφέρον λύση. Ρίξτε μια ματιά και στο demo
  • To WordPress TV είναι γεγονός! Καλό θα είναι να του ρίχνετε καμιά ματιά εάν ασχολείστε με την συγκεκριμένη πλατφόρμα.

Plug ins

  • Το s3Slider είναι ένα εντυπωσιακό και εύκολο στην χρήση jQuery plug in για slide shows.
  • Άλλο ένα jQuery plug in για να κόβετε, και όχι μόνο, τα images εύκολα και γρήγορα.
  • Ένα πολύ χρήσιμο date picker plug in για το jQuery.
  • Το Sexy Curls είναι ένα “sexy” jQuery plug in…

Blogs

  • Ένα νέο αλλά πολλά υποσχόμενο blog που ανακάλυψα, είναι το realmarketing.gr. Εάν σας ενδιαφέρει το θέμα (όλοι μας πρέπει να ξέρουμε marketing) προσθέστε το οπωσδήποτε στον reader σας…

Web 2.0

  • Το thisMoment είναι ένα project που μου κίνησε το ενδιαφέρον. To concept του είναι να σώνεις διαδικτυακά στιγμές τις ζωής σου (όπως video, φωτογραφίες, κτλ.) και αυτά να παρουσιάζονται στους φίλους σου σε κάποιο timeline. Για να δούμε πως θα τα πάει…
  • Ακόμα ένα ενδιαφέρον project είναι το Oursignal το οποίο συλλέγει τα top άρθρα από διάφορα media site (και πιο συγκεκριμένα από τα digg, reddit, del.icio.us, hackernews και yahoo buzz), και τα παρουσιάζει μέσα σε μία πολύ όμορφη σελίδα. Είναι με λίγα λόγια το καθημερινό σινιάλο όλων των web χρηστών!

Δωρεάν / Freebies

  • Ένα ενδιαφέρον και δωρεάν e-book από τον Antonio Lupetti. Ο τύπος απλά έχει συλέξει τα καλύτερα posts του και έχει φτιάξει ένα αρκετά ενδιαφέρον e-book. Το διάβασα από το Web Design Blog.
  • Το δεύτερο τεύχος των Ubuntistas, είναι γεγονός! Πολύ μ’ αρέσουν τέτοιες προσπάθειες, γι αυτό και τις υποστηρίζω άλλωστε.

Διάφορα links

Γρήγορο development : 5 συμβουλές για γρήγορα αποτελέσματα

Πολλοί δεν έχουν πίστη στο λαϊκό ρητό “το γοργό και χάριν έχει”, ωστόσο είναι πάρα πολλές οι φορές που απλά πρέπει να βγει κάτι στον αέρα γρήγορα! Οι πιο σκληροπυρηνικοί developers, ανήκα και εγώ κάποτε σε αυτήν την κατηγορία, θέλουν να ξεκινάνε τα πάντα από το μηδέν έτσι ώστε να ελέγχουν πλήρως τον κώδικα και γενικότερα να φτιάχνουν τα πάντα με τα χεράκια τους. Όπως καταλαβαίνεται, αυτές οι εποχές έχουν περάσει πλέον, και γενικότερα δεν εξυπηρετεί σε τίποτα να προσπαθείς να ξανά-ανακαλύψεις τον τροχό, όταν το έχει κάνει ήδη κάποιος άλλος… Παρακάτω δίνω 5 συμβουλές που πιστεύω πως εάν ακολουθηθούν, θα έχετε σε πολύ γρήγορο χρονικό διάστημα φοβερές βελτιώσεις στους development χρόνους σας, και θα σώσετε αρκετό χρόνο από κάθε σας project (και θεωρητικά θα έχετε περισσότερο χρόνο για την οικογένεια σας και τους φίλους σας, κάτι που φυσικά δεν ισχύει γιατί τα projects δεν σταματάνε ποτέ!). Έχουμε και λέμε λοιπόν :

1. Χρησιμοποιήστε frameworks και libraries

Η πιο απλή και χρήσιμη συμβουλή. Μην ξανά-ανακαλύπτετε τον τροχό όπως έγραψα και παραπάνω, το έχουν ήδη κάνει άλλοι για εσάς, εκμεταλλευθείτε το! Σε όλες τις server-side τεχνολογίες υπάρχουν frameworks που σας βοηθάνε να γράψετε ποιοτικότερο κώδικά πολύ πιο γρήγορα, πολύ πιο εύκολα και μάλιστα επαναχρησιμοποιήσιμο (σε αρκετές περιπτώσεις τουλάχιστον). Στις web εφαρμογές το pattern που έχει επικρατήσει πλέον, είναι το MVC (Model-View-Controller), και όλες οι server-side τεχνολογίες έχουν αναπτύξει πολλά και διάφορα frameworks γύρω από αυτό. Έτσι από την Ruby με το Rails ως και την PHP με το CakePHP, το αγαπημένο μου (αν και έχω καιρό να ασχοληθώ) CodeIgniter ή το πολύπλοκο Zend, δεν υπάρχει περίπτωση να μην βρείτε κάποιο framework που να κάνει την δουλειά σας πιο γρήγορα και παραγωγικά. Μέχρι και η Microsoft εισήγαγε MVC δυνατότητες στη ASP.ΝΕΤ, οπότε ποιος ο λόγος να μην εκμεταλλευθείτε το συγκεκριμένο pattern;

Στην client-side μεριά τώρα, αν δεν θέλετε να χρησιμοποιήσετε για διάφορους λόγους CSS frameworks/libraries, θα είσασταν αρκετά περίεργοι (για να μην γράψω κάτι πιο χοντρό), εάν προσπαθούσατε να κάνετε όλα αυτά τα ωραία Javascript animation/εφέ και AJAX κολπάκια χωρίς την χρήση κάποιας library… Και εδώ οι επιλογές είναι πάρα πολλές με σημαντικότερες το jQuery, MooTools, Prototype και YUI, οπότε δοκιμάζετε και κρατάτε αυτήν που σας ταιριάζει και που κάνει  γρηγορότερα την δουλειά!

2. Χρησιμοποιήστε έναν πολύ καλό text editor ή κάποιο IDE

Φυσικά και μπορείτε να κάνετε την δουλειά σας με το Notepad των Windows, το ερώτημα όμως είναι πόσο γρήγορα την κάνετε? Το θέμα text editor ή IDE είναι κάτι καθαρά προσωπικό και ο καθένας έχει τις προτιμήσεις του. Προσωπικά προτιμώ τους text editors μιας και είναι πιο ελαφριοί από τα IDE (επίσης δουλεύω ελάχιστα σε server-side επίπεδο πλέον), ενώ θέλω οπωσδήποτε να υποστηρίζουν και τα παρακάτω χαρακτηριστικά :

  • syntax highlighting
  • auto-fill
  • syntax suggestions

Τα IDE έχουν συνήθως και άλλα πιο εξεζητημένα χαρακτηριστικά, όπως FTP access, διαγνωστικά εργαλεία, εργαλεία για debugging και διάφορα άλλα που αν και χρήσιμα, συνήθως κάνουν αρκετά πιο βαριές τις εφαρμογές, κάτι που δεν μ’ αρέσει. Έτσι προτιμώ να χρησιμοποιώ τον Ε Τext Εditor (μοιάζει με το TextMate), Intype (project που δυστυχώς αργοπεθαίνει) και Notepad ++ από τα διάφορα IDE όπως Εclipse, NetBeans, Aptana Studio και Komodo IDE. Όπως και να έχει δοκιμάστε μερικά από αυτά, βρείτε πιο σας ταιριάζει και γράψτε πιο γρήγορα κώδικα!

3. Reusable code ή free code

Έχετε γράψει κάτι ανάλογο παλιότερα; Τότε απλά προσαρμόστε το στις καινούργιες απαιτήσεις σας και ξανά-χρησιμοποιήστε το! Επίσης, ρίχνετε πάντα μια ματιά σε code snippets που μπορείτε να χρησιμοποιήσετε. Το μόνο που πρέπει να προσέξετε πάρα πολύ σε αυτήν την περίπτωση είναι η άδεια χρήσης τους. Καλό είναι επίσης να δίνετε και credits στους δημιουργούς (έστω και εάν δεν το ζητάνε), αλλά να το αναφέρεται και στους υπόλοιπους εμπλεκόμενους στο project (εάν υπάρχουν).

4. Σωστά debugging tools

Το θέμα debugging είναι και αυτό αρκετά προσωπικό. Σε server-side επίπεδο μπορείτε να το κάνετε είτε μέσω των errors/warnings που παίρνεται κατευθείαν από τον server και την server-side γλώσσα που χρησιμοποιείται, είτε μέσω IDE εργαλείων που ανέφερα και πιο πάνω.

Σε client-side επίπεδο τώρα, απλά πρέπει να έχετε το Firebug! Ειλικρινά δεν μπορώ να καταλάβω πως μερικοί συνάδελφοι δεν το χρησιμοποιούν… Το Web Developer Toolbar είναι και αυτό ένα πολύ αξιόλογο εργαλείο, ωστόσο πιστεύω πως το Firebug κάνει τα πάντα και συμφέρει… Για Internet Explorer τώρα (και μόνο για να λύσετε προβλήματα που έχουν προκύψει στον συγκεκριμένο browser), μπορείτε να χρησιμοποιήσετε την Internet Explorer Toolbar, η οποία όμως δεν θα σας βοηθήσει και πολύ, ωστόσο κάτι είναι και αυτό. Τέλος περιμένω να δω και το Opera Dragonfly, αν και πιστεύω πως πολύ δύσκολα θα καταφέρει να κερδίσει τον συνδυασμό Firefox/Firebug. Δεν είναι άλλωστε τυχαία η επιλογή του συγκεκριμένου συνδιασμού από όλους σχεδόν τους web designers/developers…

5. On-line collaboration

Το θέμα συνεργασίας αλλά και γενικότερα project management, είναι ένα από τα πιο δύσκολα, ιδιαίτερα όταν οι εμπλεκόμενοι βρίσκονται σε διαφορετικές πόλεις, έχουν διαφορετικά time zones κτλ. Φυσικά με το πατροπαράδοτο e-mail μπορείτε να λύσετε τέτοια προβληματάκια, όταν όμως το project είναι μεγάλο και η ομάδα αποτελείτε από πολλά μέλη, τότε η χρήση e-mail πιο πολύ θα καθυστερεί παρά θα βοηθάει την κατάσταση… Αντιθέτως web collaboration εργαλεία, όπως το Basecamp για παράδειγμα, μπορούν να οργανώσουν καλύτερα ένα project σε όλα τα επίπεδα, όπως σε επίπεδο συνεργασίας, to do tasks, project status, ανταλλαγή αρχείων, ενημέρωση των μελών κτλ. Γιατί λοιπόν να σπαταλάτε πολύτιμο χρόνο στο παλιομοδίτικο e-mail; Προσωπικά εκτός από το Basecamp το οποίο χρησιμοποιώ για το CSS3.gr μου αρέσει πολύ και το Google Groups το οποίο χρησιμοποιώ σε μικρότερα projects αλλά πολλές φορές και μόνος μου!

Αυτά τα λίγα από εμένα. Όποιοι έχετε βάλει στόχο να κάνετε γρήγορα κάποια πράγματα ακολουθήστε μερικές από τις παραπάνω συμβουλές, όλο και πιο γρήγοροι θα γίνεται 😉

Δωρεάν εργαλεία παρακολούθησης δημοτικότητας!

Πολλοί είναι αυτοί που με ρωτάνε πως μπορούν να δουν τι pagerank έχει το site/blog τους, και γενικότερα την δημοτικότητα του, χωρίς ταυτόχρονα να μπλέξουν με πολλές τεχνικές λεπτομέρειες, στατιστικά και άλλες ανάλογες πληροφορίες, που τις περισσότερες φορές δεν καταλαβαίνουν κι ολας.

Καταρχάς να δηλώσω σε αυτό το σημείο, πως ο καλύτερος τρόπος για να έχετε μια πολύ καλή και σφαιρική άποψη του τι γίνεται στο site σας, καλό είναι να εγκαταστήσετε κάποιο σύστημα καταγραφής και ανάλυσης traffic. Τέτοια συστήματα υπάρχουν πολλά, από το δωρεάν Google Analytics, το Mint και πολλά άλλα. Από εκεί και πέρα όσοι δεν ενδιαφέρονται για μια τόσο αναλυτική προσέγγιση, μπορούν να συνεχίσουν να διαβάζουν το post, το οποίο παρουσιάζει τις πιο γνωστές και γρήγορες λύσεις…

  • Alexa : Ίσως το πιο διάσημο εργαλείο αλλά και μέτρο σύγκρισης δημοτικότητας ενός site (μετά το Google pagerank φυσικά). Μπορείτε να συγκρίνετε μέχρι και 5 διαφορετικά domain σε επίπεδο traffic, page views, alexa rank κτλ. Εύκολο και γρήγορο εργαλείο σύγκρισης.
  • Yahoo site explorer : Πολύ καλή λύση και μάλιστα από επώνυμη εταιρεία. Εάν έχετε ήδη έναν λογαριασμό Yahoo!, μπορείτε να χρησιμοποιήσετε αμέσως την υπηρεσία, ενώ εάν δηλώσετε και επίσημα το site σας (προσθέτοντας ένα meta tag στο head section), θα ενεργοποιήσετε και επιπλέον χαρακτηριστικά της!
  • Quarkbase : To Quarkbase είναι  η καλύτερη λύση του είδους και ξεπερνά ακόμα και τις επώνυμες παραπάνω λύσεις. Απλά δηλώνεται ένα domain και παίρνετε αμέσως μια γενική ιδέα για το που κινείτε το site σας.
  • Feed Compare : Υπηρεσία σύγκρισης feed! Επιλέξτε τα Feedburner feed που θέλετε, και δείτε πως τα πάνε σε subscribers!
  • Popuri.us και socialmeter : Δύο γρήγορες υπηρεσίες που κάνουν πάνω κάτω το ίδιο πράγμα. Επιτρέπουν με ένα click να δεις πόσα backlinks έχει το domain σου, ενώ το popuri.us δίνει και κάποιες επιπλέον πληροφορίες, όπως το pagerank του domain καθώς και κάποιες γενικές πληροφορίες για αυτό.
  • Quantcast : Το συγκεκριμένο site σας δίνει πολλές δημογραφικές πληροφορίες (όπως ηλικίες επισκεπτών, φύλο επισκεπτών, εθνικότητα κτλ.). Τώρα να σας πω την αλήθεια δεν ξέρω κατά πόσο αξιόπιστα είναι αυτά τα δεδομένα, ωστόσο όποιος ενδιαφέρεται ας του ρίξει μια ματιά…
  • Compete : Με αυτό το εργαλείο μπορείτε να συγκρίνετε το site/blog σας με άλλα! Απλά δηλώστε τα URLs και δείτε τα αποτελέσματα σε unique visitors αλλά και σε άλλα δεδομένα.

Η απόλυτη λίστα ελέγχου ενός site

Έστω ότι μόλις παραλάβατε κάποιο site από κάποια εταιρεία και θέλετε να ελέγξετε την ποιότητα του site που μόλις παραλάβατε ή απλά πως είστε ένας web designer / developer και θέλετε να ελέγξετε εάν το τελικό προϊόν σας (site) καλύπτει κάποια standards. Έχετε ήδη ρίξει λοιπόν μια καλή ματιά στο site με τον default browser σας, αλλά θα θέλατε να έχετε στην διάθεση σας και κάτι παραπάνω, κάτι πιο χειροπιαστό! Όποιος βρίσκεστε λοιπόν σε αυτήν την θέση καλό θα είναι να ρίξει μια ματιά στην παρακάτω λίστα και τις σημειώσεις της, μιας και θα μάθει να ελέγχει σχολαστικά οποιοδήποτε site και μάλιστα χρησιμοποιώντας δωρεάν εργαλεία και υπηρεσίες! Η παρακάτω λίστα είναι ένας πολύ καλός οδηγός για οποιονδήποτε θέλει να ελέγξει και να βελτιώσει το site του. Ας αρχίσουμε λοιπόν :

  • W3C Markup Validator : Σαφέστατα πρώτη κίνηση που πρέπει να γίνεται σε οποιοδήποτε site! Εάν η markup δεν είναι σωστή δεν έχει νόημα να προβούμε σε περαιτέρω tests και ελέγχους (όπως πχ. CSS validation). Εάν το site περάσει αυτό το τεστ, θα λειτουργεί στους περισσότερους υπάρχον browsers και συσκευές, αλλά και στις μελλοντικές υλοποιήσεις τους, χωρίς ιδιαίτερα προβλήματα.
  • W3C CSS Validator : Φυσικά μετά τον έλεγχο της markup ο δεύτερος πιο σημαντικός έλεγχος είναι αυτός της CSS. Και τα stylesheets μας πρέπει να είναι όσο πιο καθαρά και web standard γίνεται, ενώ εάν θα πρέπει να χρησιμοποιήσουμε hacks και μη standard τεχνικές, καλό θα είναι να τα κρατάμε σε κάποιο ξεχωριστό αρχείο και να τα φορτώνουμε μέσω του @import  κανόνα έτσι ώστε το βασικό stylesheet να παραμένει web standard valid! Μόλις περάσουμε και αυτό το τεστ είμαστε σε πάρα μα πάρα πολύ καλό δρόμο! Πολλοί designers χρησιμοποιούν πριν το τελικό CSS validation το Clean CSS το οποίο αναλαμβάνει να σας βοηθήσει στην επίλυση των CSS προβλημάτων, να σας δημιουργήσει ευκολοδιάβαστο κώδικα και γενικότερα να βελτιστοποιήσει (optimize) τον CSS κώδικα μειώνοντας ταυτόχρονα και το file size του. Προσωπικά δεν το χρησιμοποιώ απλά σε κάποιους μπορεί να λύσει τα χέρια.
  • WebXACT : Άλλη μία φανταστική υπηρεσία η οποία προσφέρει πληθώρα πληροφοριών για το site, από το file size και τον χρόνο που θα χρειαστεί κάποιος με 56αρι modem για να κατεβάσει την σελίδα σας μέχρι σε τι accessibility priority level έχει φτάσει το site και πόσα broken links έχει. Ρίχνοντας μια ματιά έχετε μια συγκεντρωτική ιδέα για το που κινείται το site και τι πρέπει να βελτιωθεί σε διάφορα σημεία.
  • Truwex Online 2.0 : Η καλύτερη επιλογή για εύκολο και γρήγορο accessibility test! Η υπηρεσία παρέχει πολλά εργαλεία και πληροφορίες για να λύσετε τα accessibility προβλήματα του site σας, ενώ η επιλογή “map” πραγματικά σας λύνει τα χέρια, δείχνοντας πάνω στο site που βρίσκονται τα accessibility προβλήματα με αναλυτική επεξήγηση του κάθε προβλήματος και φυσικά της λύσης του! Η υπηρεσία κάνει accessibility test σε όλα τα WCAG 1.0 levels αλλά και στον αμερικάνικο accessibility νόμο Section 508.
  • TAW Web Accessibility Test : Κάνει ότι λέει το όνομα του και είναι η δεύτερη υπηρεσία που επισκέπτομαι για accessibility tests! Πολύ καλό είναι και το feedback που δίνει, αφού σας ενημερώνει που βρίσκεται η κάθε παράληψη, σας εξηγεί τι είδους παράληψη είναι (priority level κτλ.) και φυσικά σας δίνει πληροφορίες για το πως μπορείτε να την διορθώσετε. Το μόνο tip που μπορώ να δώσω σε αυτό το σημείο είναι να προσπαθήσετε να καλύψετε το priority 1 αρχικά, και να μην απογοητευθείτε από τα πολλά accessibility warnings που θα δείτε, γιατί το TAW παραείναι αυστηρό!
  • WAVE 3.0 Accessibility Tool : Και αυτή η υπηρεσία έχει να κάνει με accessibility test παρουσιάζοντας κάπως διαφορετικά τα αποτελέσματα της. Η συγκεκριμένη υπηρεσία είναι λίγο πιο δυνατή στο να εντοπίζει και να παρουσιάζει τα κομμάτια του κώδικα σας όπως headers, divs, footers, Javascript, κτλ. και να προτείνει λύσεις στα διάφορα προβλήματα που πιθανόν έχουν. Έτσι με αυτόν τον τρόπο μπορεί πολύ γρήγορα κάποιος να διορθώσει τα accessibility προβλήματα σε themes και templates!
  • Browsershots : Αν και η καλύτερη λύση είναι να τεστάρετε το site σε όλα τα desktop λειτουργικά συστήματα, δηλαδή σε Windows, OSX και Linux, και σε όλους τους γνωστούς browsers γι αυτά (IE, Firefox, Opera, Safari, Konqueror κτλ.), η συγκεκριμένη λύση πολλές φορές δεν είναι και τόσο εφικτή. Έτσι καλό θα είναι να έχετε υπόψη σας την συγκεκριμένη υπηρεσία, η οποία αν και αργεί αρκετά (όπως οι περισσότερες αντίστοιχες άλλωστε) σας επιτρέπει να δείτε το site σε όλους του γνωστούς browsers αλλά και να επιλέξετε και συγκεκριμένες screen resolutions!
  • Ready.Mobi : H καλύτερη υπηρεσία που έχω ανακαλύψει για το τεστ ενός site σε κινητά τηλέφωνα! Η συγκεκριμένη υπηρεσία προσφέρει μια πολύ αναλυτική αναφορά για το πως φαίνεται το site σε κινητά τηλέφωνα, με λεπτομέρειες όπως πόση ώρα χρειάζεται το site για να κατέβει μέσω Wifi, 3G και GPRS, εάν έχετε κάνει σωστή χρήση των images για mobile συσκευές, πως φαίνονται τα stylesheets κτλ. Το κερασάκι στην τούρτα είναι και οι 4 (προς το παρόν) emulators κινητών τηλεφώνων που διαθέτει (Nokia N70, Samsung z105, Sony Ericsson k750i, Motorola v3i και Sharp GX-10)!
  • Website Grader : Τέλος θα ήθελα να κλείσω με την αγαπημένη μου SEO υπηρεσία. Εδώ μπορείτε να βρείτε πως τα πάει το site σας στις μηχανές αναζήτησης και στα περισσότερα ranking sites (όπως Technorati, Alexa, κτλ.) καθώς και πολλές άλλες χρήσιμες πληροφορίες όπως εάν έχει γίνει σωστή χρήση των τίλων/headings (h1, h2, ktl.). Εάν το site είναι ολοκαίνουργιο η χρήση της  συγκεκριμένης υπηρεσίας δεν έχει και πολύ νόημα, εάν όμως το site υπήρχε και έχει γίνει κάποιο redesign, καλό θα είναι να του ρίξετε μια ματιά.

Ελπίζω η παραπάνω λίστα να βοηθήσει όσους ενδιαφέρονται να κάνουν τα site τους ακόμα καλύτερα, πιο επαγγελματικά και τηρώντας κάποιες διεθνής προδιαγραφές! Οι εν λόγω υπηρεσίες και εργαλεία παρέχονται εντελώς δωρεάν και μπορούν να χρησιμοποιηθούν πανεύκολα, ενώ οι πληροφορίες που συλλέγουν θα ικανοποιήσουν και τους πιο απαιτητικούς! Φυσικά δεν είναι ανάγκη το κάθε site να περνάει με επιτυχία όλα τα παραπάνω test (ειδικά τα accessibility test είναι αρκετά δύσκολο να επιτευχθούν ενώ όπως είναι λογικό διαφορετικού τύπου site χρειάζονται και άλλου επίπεδου accessibility), αλλά καλό θα είναι να ρίχνουμε μια καλύτερη ματιά σε αυτά που είτε φτιάχνουμε είτε παραλαμβάνουμε, γιατί στην Ελλάδα το έχουμε παρακάνει το θέμα με τα μη valid και unaccessible sites!