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.

CSS : Κληρονομικότητα (inheritance) και cascade

Εάν θα μπορούσα να δηλώσω expert σε κάτι, αυτό θα ήταν σίγουρα το CSS. Δουλεύω με αυτό από την πρώτη του version και γενικά είναι μέρος της καθημερινότητας μου. Έχω γράψει άπειρες γραμμές σε πολύ μεγάλα αλλά και πολύ μικρά sites, και με ενθουσιάζει το γεγονός πως ένα τόσο φαινομενικά απλό πρότυπο, ζωντανεύει την markup μας. Στην προηγούμενη πρόταση γράφω “φαινομενικά απλό” γιατί το “γράφω CSS” από το “γνωρίζω CSS” έχει τεράστια διαφορά. Ένας γνώστης μπορεί να γράψει μέσα σε ελάχιστες γραμμές, αυτό που κάποιος newbie γράφει και ξαναγράφει! Το όλο μυστικό κρύβεται σε 2 χαρακτηριστικά του CSS που θέλουν λίγο χρόνο για να εξοικειωθείτε, η κληρονομικότητα (inheritance) και το cascade.

Στο παρακάτω αρθράκι λοιπόν, θα προσπαθήσω να εξηγήσω όσο καλύτερα γίνεται αυτά τα δύο χαρακτηριστικά του CSS, τα οποία ποτέ δεν μου εξήγησε κανείς και τελικά τα έμαθα με τον δύσκολο τρόπο (hard way που λένε και οι Εγγλέζοι). Το περίεργο είναι πως και ολόκληρα βιβλία αφιερωμένα στο θέμα, αποφεύγουν να τα εξηγήσουν αναλυτικά – μάλλον δεν θέλουν να γίνουν όλοι experts ;-). Ας ξεκινήσουμε λοιπόν.

Κληρονομικότητα (Inheritance)

Γενικά δουλεύει όπως μπορείτε να φανταστείτε και όπως έχετε συνηθίσει και σε γλώσσες προγραμματισμού (αν έχετε ασχοληθεί τέλος πάντων). Είναι ο μηχανισμός με τον οποίο συγκεκριμένες ιδιότητες (properties) μεταφέρονται από το parent element στα “παιδιά” του. Είναι αρκετά εύκολο στην κατανόηση, και στην ουσία το μόνο πράγμα που προκαλεί μπέρδεμα είναι ποιες ιδιότητες (properties) κληρονομούνται τελικά, μιας και δεν κληρονομούνται όλες. Σε αυτόν τον πίνακα (κοιτάξτε την 5η στήλη) μπορείτε να δείτε ποιες από αυτές κληρονομούνται και ποιες όχι. Προσωπικά δεν τον θυμάμαι απέξω, άλλωστε δεν έχει και πολύ νόημα μιας και γιαυτό υπάρχουν οι DOM inspectros (όπως πχ. το firebug), ωστόσο κρατήστε πως ότι έχει να κάνει με fonts κληρονομείτε (γι’ αυτό και το declaration του font στο body είναι ο πιο σημαντικός CSS κανόνας ενός site).

Cascade

Η κληρονομικότητα όπως είδατε είναι αρκετά εύκολη στην κατανόηση. Ας εξηγήσουμε όμως και το Cascade το οποίο είναι κάπως πιο πολύπλοκο. Το Cascade (δεν νομίζω να μπορεί μεταφραστεί κάπως αξιόλογα στα ελληνικά) είναι ίσως το πιο δυσνόητο κομμάτι του CSS γιατί κρύβει αρκετή θεωρία από πίσω του, ωστόσο είναι και το πιο σημαντικό και γι αυτόν τον λόγο αποτελεί και την πρώτη λέξη του ακρώνυμου CSS (Cascading Style Sheets). To Casade λοιπόν αποτελείται από 3 βασικές έννοιες οι οποίες καθορίζουν πως το CSS θα εφαρμόσει τελικά τους κανόνες των style sheets μας. Οι 3 έννοιες είναι οι παρακάτω :

  • Importance (σπουδαιότητα)
  • Specificity (ειδικότητα)
  • Η σειρά που εμφανίζονται μέσα στον κώδικα

Και για να μην μπερδευτούμε ας τα πάρουμε ένα-ένα.

Importance (Σπουδαιότητα)

Η σπουδαιότητα έχει να κάνει με το που δηλώθηκε ο CSS κανόνας. Οι κανόνες που θα κάνουν conflict μεταξύ τους θα εφαρμοστούν με την παρακάτω σειρά, με τις νεότερες να υπερισχύσουν :

  1. User agent style sheets
  2. Κανονικοί style sheet κανόνες συγγραφέα (author)
  3. Κανονικοί style sheet κανόνες χρήστη (user)
  4. Σημαντικοί style sheet κανόνες συγγραφέα (author)
  5. Σημαντικοί style sheet κανόνες χρήστη (user)

Αλλά ας εξηγήσουμε λίγο τι είναι τα παραπάνω style sheets και από που έρχονται!

Λέγοντας user agent style sheets εννοούμε όλα τα ενσωματωμένα (default) style sheet του browser (πχ. margin/padding σε headers, παραγράφους, λίστες, χρώματα link, κτλ.).

Οι style sheet κανόνες συγγραφέα (author), είναι τα κλασικά style sheets που γράφουν οι web designers του εκάστοτε site.

Οι style sheet κανόνες χρήστη (user), είναι κάποιοι ειδικοί κανόνες που μπορεί να θέσει ο ίδιος ο χρήστης. Οι περισσότεροι browsers δεν επιτρέπουν τέτοιου είδους κανόνες, ωστόσο πιο ειδικοί browsers (πχ. για δυσλεκτικούς ή screen readers οι οποίοι επιτρέπουν κυρίως aural style sheets) δίνουν αρκετές επιλογές και δυνατότητες στον ίδιο χρήστη (και μάλιστα υπερτερούν!).

Τέλος, τα δύο τελευταία είδη style sheet, μπορούν να εφαρμοστούν είτε ως κανονικοί (normal) κανόνες, είτε ως σημαντικοί (important) κανόνες (πχ. p { font-size: 1em !important; }), με τους δεύτερους να είναι ισχυρότεροι από τους πρώτους.

Γενικότερα εμείς που ασχολούμαστε με την κατασκευή web sites δεν έχουμε να κάνουμε και πολλά πράγματα με την σπουδαιότητα, γιατί πολύ απλά δεν είναι στο χέρι μας, ωστόσο θα πρέπει να έχουμε στο μυαλό μας τι style sheets δέχεται ένα document, τι είναι τα user agent style sheets, ή πως λειτουργεί ο !important κανόνας.

Specificity (ειδικότητα)

Η ειδικότητα είναι το πιο σημαντικό κομμάτι του cascade, και αυτό που πρέπει να κατανοήσει ο κάθε web designer. Ο γενικός κανόνας είναι σχετικά απλός, όσο πιο συγκεκριμένος (ειδικός) είναι o selector ενός κανόνα, ο συγκεκριμένος κανόνας υπερισχύει! Αν και είναι εύκολο και λογικό, κάποιος νέος στον χώρο μπορεί να χάσει πολύ εύκολα την μπάλα σε ένα πολύπλοκο έγγραφο (document), και να καταντήσει να γράφει ξανά και ξανά τα ίδια πράγματα.

Ο πιο συγκεκριμένος selector, ο οποίος αναιρεί όλους τους άλλους, αλλά δεν πρέπει να χρησιμοποιούμε ποτέ, είναι το style attribute σε οποιοδήποτε element. Δεν το χρησιμοποιούμε για να μην μπλέκουμε την markup με τα styles, και για πολλούς άλλους λόγους που έχουμε εξηγήσει σε άλλα posts. Από εκεί και πέρα έχουμε ένα περίεργο point system για το κάθε selector, το οποίο παίζει ως εξής:

  • Το κάθε element (ή pseudo-element) που εμφανίζεται στον selector μας παίρνει 1 βαθμό
  • Η κάθε κλάση (class) που που εμφανίζεται στον selector μας παίρνει 10 βαθμούς
  • Το κάθε id που εμφανίζεται στον selector μας παίρνει 100 βαθμούς

Εδώ μπορείτε να βρείτε και μια πιο χιουμοριστική εξήγηση του point system που περιγράφω, ωστόσο με τα παρακάτω παραδείγματα του πίνακα, πιστεύω πως θα καταλάβετε καλύτερα το πως δουλεύει.

Το Point system της ειδικότητας (specificity)
Selector id class element Specificity
p 0 0 1 001
.class 0 1 0 010
p.class 0 1 1 011
#id 1 0 0 100
#id .class 1 1 0 110
#id p.class 1 1 1 111
p a 0 0 1+1 002
.classa .classb 0 1+1 0 020

Κάπως έτσι υπολογίζεται το specificity και ο selector με τον μεγαλύτερο αριθμό υπερτερεί.

Η σειρά που εμφανίζονται μέσα στον κώδικα

Τι γίνεται όμως όταν 2 κανόνες έχουν ακριβώς το ίδιο specifity; Για παράδειγμα :

.nav a { color:green; }
.nav a { color:red; }

Και οι 2 παραπάνω selectors έχουν 011, ωστόσο όλοι οι browsers θα κάνουν rendering τα links με κόκκινο χρώμα για τον πολύ απλό λόγο πως ήταν ο πιο πρόσφατος κανόνας που συναντήθηκε. Το μόνο που πρέπει να έχουμε υπόψη μας εδώ είναι πως εάν έχουμε πολλά style sheets η σειρά που φορτώνονται έχει σημασία, οπότε το προσέχουμε και αυτό.

Αυτά τα λίγα για την κληρονομικότητα (inheritance) και το cascade. Ελπίζω να ξεκαθαρίσατε κάποια πράγματα που έχουν να κάνουν με την θεωρία που κρύβεται πίσω από το CSS, η οποία πολλές φορές δεν αναφέρεται και δεν εξηγείτε όπως θα έπρεπε.

CSS3 και CSSS

Δεν ξέρω πόσοι από εσάς το πείραν χαμπάρι, αλλά η “δική” μας Λία ήταν ομιλήτρια στο τελευταίο Front-Trends Conference, το οποίο έγινε στην Βαρσοβία. Περισσότερα για τo θέμα μπορείτε να διαβάσετε στο post της (πάντα στα αγγλικά), ωστόσο εάν ασχολείστε έστω και λίγο με το web – και για να διαβάζετε αυτό το blog μάλλον ασχολείστε – πρέπει οπωσδήποτε να παρακολουθήσετε την παρουσίαση της ή ακόμα καλύτερα να την κατεβάσετε! Προσωπικά πιστεύω πως είναι μια από τις καλύτερες και πιο επεξηγηματικές παρουσιάσεις για το τι είναι το CSS3, τι λύσεις δίνει και τι νέες δυνατότητες παρέχει σε όλους εμάς. Καιρό είχα να παρακολουθήσω μια τόσο καλοφτιαγμένη και δομημένη παρουσίαση, και για να πω την αλήθεια στεναχωρήθηκα που δεν κατάφερα να την δω live, ωστόσο ελπίζω ακόμα σε κάποιο video της παρουσίασης…

Πέρα από αυτό και για τις ανάγκες της ίδιας της παρουσίασης, η Λία δημιούργησε και το δικό της slideshow system το οποίο ακούει στο όνομα CSSS. Όπως εύκολα καταλαβαίνει κάποιος στηρίζεται κυρίως σε CSS3 χαρακτηριστικά (και Javascript φυσικά), ενώ μπορεί να το κατεβάσει και να το  χρησιμοποιήσει ο καθένας για τις παρουσιάσεις του (απορώ ποιοι χρησιμοποιούν ακόμα Powerpoint!). Και πάλι συγχαρητήρια και μακάρι να δούμε ανάλογου επιπέδου events και στην Ελλάδα (αν και το βλέπω πάρα πολύ δύσκολο)…

Τα καλύτερα 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 χρόνια στην Ελλάδα…

Styling HTML5 elements

Όσοι έχετε δοκιμάσει να παίξετε με την HTML5 θα έχετε πέσει σε διάφορες παραξενιές της. Χτες έπεσα σε μία από αυτές που μου έφαγε πολύ χρόνο, ενώ μου προκαλεσε και εντύπωση το γεγονός πως πολλά HTML5 άρθρα και posts δεν αναφέροντε στο συγκεκριμένο πρόβλημα όσο ξεκάθαρα θα έπρεπε (μέχρι και το Google με απογοήτευσε στις αναζητήσεις μου).

Το πρόβλημα που είχα, ήταν πως ενώ η HTML5 markup μου ήταν σωστή (και valid), elements όπως header, section, footer και aside, δεν καταλάβαιναν τους styling κανόνες που τους έβαζα! Οι μοντέρνοι και HTML5-ready browsers έδειχναν να μην κάνουν σωστό rendering τα καινούργια elements (ο Firefox και ο Chrome τουλάχιστον, αν και έχω την αίσθηση πως και οι υπόλοιποι θα έχουν ανάλογα προβλήματα). Η λύση τελικά είναι πανεύκολη, απλά δίνουμε στα καινούργια elements display:block.

header, section, footer, aside, nav, article, figure { display: block; }

Από ότι κατάλαβα για κάποιο περίεργο λόγο, οι browsers κάνουν τα παραπάνω στοιχεία rendering ως inline elements, οπότε με τον παραπάνω απλό κανόνα καθαρίσαμε. Μπορεί έχασα ένα ολόκληρο απόγευμα, ωστόσο πιστεύω πως άξιζε τον χρόνο. Άλωστε μόνο έτσι μαθαίνεις…

Τα καλύτερα links – Οκτώβριος 09

Web Design

  • Dive into HTML5 : Μια φανταστική πηγή εκμάθησης HTML5.
  • CSS παρουσιάσεις που πρέπει να δείτε : Απλά εξαιρετικές… Και τι δεν θα έδινα για να έβλεπα τις παρουσιάσεις  “Efficient, Maintainable CSS” και “CSS Inheritance“, όταν πρωτο-ξεκίναγα και εγώ (δυστυχώς έπρεπε να τα μάθω με τον δύσκολο τρόπο)…

Web Development

  • Underscore.js : Ακόμα μια ελαφριά utility javascript library.
  • Mu Connect : Μια library αποκλειστικά φτιαγμένη για την εύκολη ενσωμάτωση του Facebook Connect στο site σας.
  • FireQuery : Σε beta ακόμη, αλλά το περιμένω πως και πως…
  • CSScaffold : Ένα πρωτοποριακό CSS framework γραμμένο σε PHP. Μου άρεσε πιο πολύ από αντίστοιχες λύσεις σε περίεργες γλώσσες που παίζουν δύσκολα και παραείναι πολύπλοκα. Το CSScaffold γίνεται install πανεύκολα και μπορείτε να το χρησιμοποιήσετε αμέσως!

Search Engine Optimization (SEO)

Tools

  • 5 δυνατοί WYSIWYG web editors : Όλο και κάποιος θα σας βολέψει…
  • WMD : Και ακόμα ένας, πολύ πιο ελαφρύς (μόλις μία σειρά κώδικα)!
  • The Printliminator : Ένα bookmarklet που βοηθάει (θεωρητικά) στο να τυπώνεται μόνο τις πληροφορίες  που θέλετε, από σελίδες με πολλές διαφημίσεις και άλλες άσχετες πληροφορίες…
  • Conjoon : Για αυτούς που αναζητούν λίγη οργάνωση…

WordPress

  • Pods CMS : Ένα CMS framework για το WordPress. Αν και είμαι κατά της χρήσης τέτοιων plug in (τα χρησιμοποιώ μόνο σαν έσχατη λύση), οφείλω να ομολογήσω πως το συγκεκριμένο είναι πολύ ενδιαφέρον. Προσωπικά περιμένω το WordPress να αποκτήσει επιτέλους μια δικιά του τέτοια – εγγενής πάντα, όχι μέσω plug in – αρχιτεκτονική.
  • Maintenance Mode : Γιατί τώρα τελευταία δεν κάνουμε άλλη δουλειά…

Δωρεάν/Freebies

  • PicApp : Ανακαλύψτε και χρησιμοποιήστε στο blog σας φωτογραφίες υψηλής ποιότητας. Φοβερό!
  • VirtualBox :  Ένα δωρεάν και open source vistual machine, που υποστηρίζει όλα τα γνωστά λειτουργικά συστήματα.

Διάφορα links

Τα καλύτερα links – Σεπτέμβρης 09

Έμπνευση

  • BestWebFrameworks : Τα γνωστότερα frameworks για PHP, Ruby, JS και CSS, σε ευκολοδιάβαστους πίνακες (με χαρακτηριστικά κτλ.).
  • Μια πολύ καλή εισαγωγή στην HTML5, από τον Brad Neuberg της Google, που σίγουρα αξίζει να την δείτε από το πρώτο μέχρι το τελευταίο λεπτό!

Web Design

Web Development

  • Yahoo! Search BOSS : Φτιάξτε την δικιά σας custom search με την βοήθεια της Yahoo!…
  • IE7-JS : Μια javascript library που αναλαμβάνει να κάνει τις παλιότερες εκδόσεις του Internet Explorer (6 και κάτω) να συμπεριφέρονται όπως ο 7… Μπορεί να το έχω ξανά-παρουσιάσει αλλά δεν πειράζει.

Search Engine Optimization (SEO)

Tools

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

  • My Fontbook : Επιτέλους ένα όμορφος και πρακτικός on-line font viewer.

WordPress

  • Κερδίστε αρκετό χρόνο από τα WordPress style σας χρησιμοποιώντας το default WP CSS style!
  • To Status Updater αναλαμβάνει να σας γλιτώσει από την αγγαρεία του να postaρετε τα καινούργια άρθρα σας στις διάφορες social υπηρεσίες, όπως facebook, twitter, myspace κτλ.

Plug ins

  • jQTouch : Ένα jQuery plugin για mobile web development σε iPhone, Android, Palm Pre, και άλλες touch-based συσκευές.

Δωρεάν/Freebies

  • Screenr : Μια νέα υπηρεσία για εύκολο και δωρεάν screencasting. Το screencast εργαλείο της είναι εντυπωσιακό και δουλεύει κατευθείαν μέσω browser!
  • Piwik : Ένα open source και δωρεάν φυσικά, web analytics software. Για αυτούς που βαρέθηκαν το Mint και το Google Analytics

CSS selectors

Κατάφερα επιτέλους να τελειώσω μια σειρά άρθρων που είχα ξεκινήσει εδώ και καιρό, η οποία παρουσιάζει όλους τους CSS selectors! Τα άρθρα είναι γραμμένα στα ελληνικά και είναι λεπτομερέστατα (άνετα θα μπορούσαν να μπουν σε κάποιο βιβλίο στο κεφάλαιο selectors) οπότε όποιοι ενδιαφέρεστε για CSS απλά διαβάστε τα. Τα άρθρα μπορείτε να τα βρείτε στο CSS3.gr και πιο συγκεκριμένα :

Τα καλύτερα links – Ιούλιος/Αυγουστος 09

Web Design

  • SlickMap CSS : Για εύκολα και γρήγορα CSS maps.
  • HTML 5 validator : Ο πρώτος – και πολύ πειραματικός όπως γράφουν και οι δημιουργοί του – HTML5 validator.

Web Development

  • Modernizr : HTML5 και  CSS3 εδώ και τώρα! Μπορεί να το χρησιμοποιήσω και στο επόμενο official Tsevdos.com WP theme που ετοιμάζω (ή μήπως είναι νωρίς ακόμα; )…
  • BBC Glow : H Javascript library του BBC!
  • qWikiOffice Web Desktop : Ακόμα μία Javascript library, με έμφαση σε desktop-like interfaces/λειτουργίες.
  • Javascript InfoVis Toolkit : Και άλλη μία για Interactive Data Visualizations και άλλα τέτοια περίεργα…

Tools

  • Open Atrium : Γρήγορο, εύκολο και πάνω από όλα οικονομικό intranet site! Με πολλά features και φυσικά open source. Απλά συμφέρει…
  • MeeCSS : Για να μην καταχωρείται τα site σας ένα-ένα στις CSS galleries…
  • Color Suckr : “Ρουφήξτε” τα χρώματα οποιασδήποτε φωτογραφίας.

Accessibility/Usability

  • 247 web usability guidelines : Για όσους θέλουν να ασχοληθούν σοβαρά με το άθλημα.
  • OpenHallway : Άλλη μια χρήσιμη υπηρεσία για on-line usability tests.

Plug ins

  • jQuery Blend : Πολύ απλό και εντυπωσιακό εφέ, ιδιαίτερα για μενού.
  • jQuery Flip : Για γυριστές καταστάσεις (δείτε το demo, δεν ξέρω τι άλλο να γράψω!)…

Blogs

  • SSMaP : Ένα podcast με την sugarenia και τον Στέλιο, με θέμα το web φυσικά. Κυκλοφόρησαν ήδη 2 επεισόδια
  • Pink Moustache : Το ροζ μουστάκι ήταν η ελληνική καλοκαιρινή έκπληξη που χρειαζόμουν! Πραγματικά μ’ αρέσει να βλέπω τέτοιες προσπάθειες από τόσο ταλαντούχους ανθρώπους.

Δωρεάν/Freebies

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

Έμπνευση

  • 1 γραμμή CSS grid framework : Το έβαλα πιο πολύ για έμπνευση και όχι σαν web design εργαλείο, μιας και δεν το θεωρώ framework. Παραδέχομαι ωστόσο τον τύπο που το έφτιαξε γιατί με λίγη φαντασία και με ακόμα λιγότερο κώδικα, έφτιαξε κάτι που μπορεί να κοντράρει κάποια πολύ πιο advanced CSS frameworks…

Web Design

  • Adobe BrowserLab : Μια επώνυμη και δωρεάν (προς το παρόν) υπηρεσία, για να ελέγχεται τα sites σας σε πολλούς συνδυασμούς browsers και OS.

Web Development

  • Ο φίλος, συνάδελφος και παλιός συμμαθητής μου John D.Wells, το έχει ρίξει τώρα τελευταία στο Expression Engine, με αποτέλεσμα να δημιουργήσει μία πολύ ενδιαφέρον λίστα από links για τους νέους αλλά και τους πιο έμπειρους ΕΕ developers. Εγώ πάντως της έριξα μια ματιά και ήδη αρχίζω να μπαίνω στην EE λογική…
  • Perch : Το πιο απλό και εύκολο στην χρήση CMS που έχετε δει!
  • Moousture : Η πρώτη mouse gesture Javascript library.
  • To prettyPrint είναι μια πολύ καλή λύση για Javascript debugging. Δείτε το videακι και θα καταλάβετε αμέσως τι κάνει…
  • Το JSLint, είναι για πολλούς Javascripts experts ο Javascript validator! Τον έχει φτιάξει ο guru του είδους, Douglas Crockford.

Browsers

  • Ο Opera Unite, ακούγεται σαν μια πολύ καλή ιδέα, ωστόσο έχω την αίσθηση πως έχει πολύ πολύπλοκα concepts για απλούς χρήστες. Οι πιο έμπειροι την βρίσκουν με Firefox, οπότε πάλι δεν τον βλέπω καλά τον πολύ δυνατό Opera Unite

Search Engine Optimization (SEO)

Accessibility/Usability

  • 10 φτηνές λύσεις/εργαλεία για usability tests. Η αλλιώς απ’ το ολότελα καλή και η Παναγιώταινα…
  • Ακόμα μια καλή κίνηση από την Adobe, η οποία έχει πάρει φόρα τώρα τελευταία. Στο καινούργιο της blog λοιπόν, με τίτλο Adobe Accessibility, ενημερώνει τους χρήστες των προγραμμάτων της για τα accessibility χαρακτηριστικά τους, καθώς και για το πως να τα χρησιμοποιούν με τον σωστό τρόπο. Μπράβο της, και μακάρι όλες οι εταιρείες να έκαναν κάτι ανάλογο…

Plug ins

  • jQuery TOOLS : Μια συλλογή από plug ins, για να δημιουργήται εύκολα και γρήγορα τα πιο κλασικά web 2.0 εφέ… Κάτι που κατά την γνώμη μου έπρεπε να υπάρχει στο jQuery UI.
  • jMonthCalendar : Ακόμα ένα calendar plug in για το jQuery, με πολλά features και δυνατότητες.

Blogs

  • Ότι θα θέλατε να μάθετε για την HTML5, αλλά φοβόσασταν να ρωτήσετε, βρίσκεται στο blog HTML5 Doctor… Το δημοσίευσε και η sugar στο CSS3 (από εκεί το είδα) αλλά δεν θα τους χαλάσει ένα ακόμα back link… Αξιοσημείωτο είναι πως το blog τους είναι φτιαγμένο με HTML5!