CSS 101 – η ιστορία

Απαραίτητη διευκρίνιση: Τα κείμενα αυτά απευθυνονται σε αρχάριους και επιδιώκουν να δώσουν μια γενική ιδέα για το θέμα. Κάποιοι όροι γράφονται στα αγγλικά επειδή έτσι είναι γνωστοί – ή αν έχουν αντίστοιχο στα ελληνικά, δυστυχώς το αγνοώ. Την επιείκιά σας παρακαλώ.

Εν αρχή ήταν η HTML – μια γλώσσα markup, που καθορίζει δηλαδή το είδος του κειμένου που βρισκεται κλεισμένο μέσα σε δύο ετικετες (tags). Μπορεί να είναι τίτλος, παράγραφος, εικόνα, λίστα… Με την HTML βοηθάμε το κείμενο να εμφανιστεί στον browser με τρόπο που να είναι κατανοητός. Κατανοητός μεν αλλά μάλλον βαρετός. Μαύρα γράμματα, λευκές σελίδες, εικόνες στη σειρά. Στρατιωτάκια. Στην αρχή λοιπόν προστέθηκαν δειλά δειλά μερικές ακόμα ετικέτες (όπως το font που αλλάζει τη γραμματοσειρά) και μερικές ιδιότητες (όπως το color που έβαλε χρώμα στη ζωή μας). Κι αφού πέρασαν οι πρώτες απόπειρες ο «εμπλουτισμός» συνεχίστηκε κάποιες φορές και με τέρατα όπως το blink που γέμισε τις σελίδες με τίτλους που αναβόσβηναν και το marquee με τις φράσεις που έτρεχαν στην οθόνη. Τέλος, επειδή κάθε ετικέτα έχει έναν συγκεκριμένο τρόπο να εμφανίζεται στον browser (π.χ. τα heading είναι έντονα και τα blockquote αυξάνουν το περιθώριο από την άκρη της σελίδας) άρχισαν να χρησιμοποιούνται οι ετικέτες με τρόπο που να επηρεάζει τη μορφή και όχι να υποδηλώνει τη σημασία του κειμένου που περιέκλειαν. Σ’ αυτήν την κατηγορία ανήκει και η χρήση των πινάκων για διευκόλυνση του layout. Το αποτέλεσμα ήταν παραφουσκωμένες σελίδες που αργούσαν αφάνταστα να κατέβουν, δύσκολες στη συντήρηση ή την μετατροπή, με δομή που δεν είχε σημειολογική ερμηνεία. Όταν πια το πρόβλημα πήρε πια μεγάλες διαστάσεις χρειάστηκαν δραστικές λύσεις. Απόλυτος διαχωρισμός μορφής και περιεχομένου. Οι πρόσθετες ετικέτες καταργήθηκαν και μια νέα γλώσσα επινοήθηκε για να διαμορφώνει την εικόνα των στοιχείων. Ονομάστηκε Cascading HTML Style Sheets, ή πιο σύντομα CSS.

δεν είναι εικόνα, είναι styles in action

Συνέχεια

Web standards – μια εισαγωγή

Web standards είναι ένας γενικός όρος για τα επίσημα πρότυπα και άλλες τεχνικές προδιαγραφές που καθορίζουν και περιγράφουν τα χαρακτηριστικό του World Wide Web – λέει η Wikipedia. Για παράδειγμα, η τεχνική που χρησιμοποιείται για τη δόμηση του περιεχομένου είναι η γλώσσα (X)HTML, αυτή που χρησιμοποιείται για τη μορφοποίησή του (χρώμα, γραμματοσειρές, περιθώρια κ.λπ.) είναι το CSS και αυτή που προσδιορίζει τη συμπεριφορά του (π.χ. αλλαγή της μορφής, άνοιγμα καινούριου παράθυρου κ.λπ) είναι η Javascript (ή ECMA όπως ονομάζεται η πρότυπη εκδοχή της).

Ο διαχωρισμός περιεχομένου από τη μορφοποίηση είναι κάτι με το οποίο είναι εξοικειωμένοι οι blogger – γράφουν το περιεχόμενο και αλλάζοντας το template (δηλαδή στην πράξη το CSS της σελίδας τους) μπορούν να αλλάξουν το ντεκόρ χωρίς να επηρεάσουν το «κυρίως πιάτο». Γιατί όμως να τους ενδιαφέρει αυτή η λειτουργία να ακολουθεί κάποια στάνταρντ; Ας υποθέσουμε ότι πηγαίνετε να ψωνίσετε μια ηλεκτρική συσκευή και διαπιστώνετε ότι ξαφνικά κάποιες εταιρίες αποφάσισαν να αλλάξουν το σχήμα της πρίζας έτσι ώστε το αρσενικό της να μη μπαίνει στο θηλυκό του φις στον τοίχο σας – κι όχι μόνο αυτό αλλά η καθε εταιρία έχει δώσει και το δικό της σχήμα, έτσι, για να ταιριάζει με το λογότυπό της βρε αδερφέ… Και τώρα τι; Λύσεις-μπαλώματα θα βρεθούν σίγουρα – ίσως ένα πρόσθετο που θα προσαρμόζει το κάθε φις στην αντίστοιχη υποδοχή, αλλά τι μπελάς αδελφέ μου! Θα πρέπει να το έχετε στο μυαλό σας κάθε φορά που θα αγοράζετε μια συσκευή, αφήστε δε που μπορεί να επηρεάζει και την απόδοση. Λοιπόν, η κατασκευή των ιστοσελίδων με αυτή τη λογική λειτουργούσε και γι αυτό κρίθηκε αναγκαία η εφαρμογή των standards. Όχι βέβαια ότι ξαφνικά λύθηκαν όλα αυτά τα προβλήματα, ίσα ίσα που οι πονοκέφαλοι αυξήθηκαν. Οι browser κάνουν συνήθως του κεφαλιού τους, τίποτα δεν δείχνει ίδιο σε όλους, νέα «μπαλώματα» εμφανίζονται κάνοντας τη ζωή μας περίπλοκη. Γιατί λοιπόν διαλέγω αυτή την περιπλοκή αντί την άλλη; Επειδή έχει μια λογική, επειδή βοηθάει τον χρήστη (έστω και αν ζαλίζει τον κατασκευαστή), επειδή πιστεύω ότι είναι το μέλλον – και σ’ αυτήν την περίπτωση οι browser θα προσαρμοστούν σιγά σιγά και τέλος επειδή μέσα σε όλες τις σπαζοκεφαλιές της έχει ενδιαφέρον. Σε όλους όσους ισχυρίζονται ότι οι σελίδες που είναι σχεδιασμένες σύμφωνα με τα web standards είναι απλοϊκές «τετράγωνες» και δύσκαμπτες, έχω να αντιτάξω τον κύριο Stu Nicholls και το CSS Playground του. Μη ντρέπεστε, κάντε του μια επίσκεψη και δείτε όλα τα alternative styles που προτείνει για την ίδια σελίδα. Την προτίμησή μου την βλέπετε ακριβώς κάτω.

cssplayground.jpg

Για μια πιο new age προσέγγιση, μπορείτε επίσης να πάτε στο CSS zen garden, όπου μπορείτε να βρείτε πιο πειστικά επιχειρήματα από τα δικά μου για το θέμα.

Περισσότερα στα επόμενα…

Αλλαγή πλεύσης

Χαζεύοντας τα στατιστικά αυτού εδώ του μπλογκ διαπίστωσα ότι με βρίσκουν κάποιοι από μηχανές αναζήτησης – το πιο συνηθισμένο keyword ήταν τα «βαφτίσια» (κάποιος μάλιστα γύρευε τα «βαφτίσια του Τέσλα»!!!), άντε και μερικές φορές «Drupal» ή «CMS». Απόρρησα κάπως που μπήκαν στον κόπο να ακολουθήσουν το link και να μ’ επισκεφθούν – όμως οι άνθρωποι κάτι έψαχναν, είχαν κάποιο σκοπό και για να τον πετύχουν δοκίμασαν όλες τις πιθανές λύσεις. Σκέφτηκα λοιπόν κι εγώ να προσφέρω αληθινές πληροφορίες – να μοιραστώ κάτι που ξέρω και που ίσως φανεί πραγματικά χρήσιμο. Κάποια μαθήματα, υποδείξεις, παραδείγματα, σκέψεις και προβληματισμούς σχετικά με τη δουλειά μου, τον σχεδιασμό σελίδων.

Έχει στ’ αλήθεια ο κόσμος ανάγκη ένα ακόμα online tutorial; Ο παγκόσμιος ιστός είναι γεμάτος, ο ελληνικός όχι. Ρίχνοντας ματές στα ελληνικά σάιτ διαπιστώνω την έλλειψη ενδιαφέροντος για τα web standards, την χρηστικότητα (usability), την προσβασιμότητα (accessibility), τις νέες τεχνικές. Υπάρχουν ακόμα πολλές σελίδες που λειτουργούν αποκλειστικά στον Internet Explorer. Πρόσφατα προσπαθούσα να βρω τη διεύθυνση μιας εταιρίας και κατέφυγα στο σάιτ της. Ήταν όλο σε Flash. Μετά από αλεπάλληλα enter και ξαναenter κατάφερα επιτέλους να βρω τη σελίδα επικοινωνίας, όπου διαπίστωσα ότι τα γράμματα δεν διαβαζόταν. Προσπάθησα να τα μεγεθύνω – αδύνατον. Στη σελίδα επικοινωνίας, δεν διαβαζόταν η διεύθυνση! Έκανα ό,τι μου πέρασε από το μυαλό. Τζίφος. Τελικά κατέληξα στον Χρυσό Οδηγό. Αλλά το πρόβλημα μου κόλλησε και δεν μπορούσα να το καταπιώ. Συζητώντας το, έμαθα ότι στον Explorer τα γράμματα διαβάζονται – και πράγματι έτσι είναι. Ίσως έπρεπε να το σκεφτώ να το δοκιμάσω, αλλά γιατί να πρέπει να μπω σ’ αυτήν την διαδικασία; Δεν είμαι από αυτούς που απορρίπτουν κατηγορηματικά τη χρήση του Flash, δίνει ζωντάνια, κινεί το ενδιαφέρον και φτιάχνει σελίδες που σε γενικές γραμμές φαίνονται ίδιες σε όλους τους browser, όμως έχει προβλήματα χρηστικότητας (που στις νεώτερες εκδόσεις προσπαθεί να διορθώσει). Και απορρώ γιατί ενώ ένα από τα προτερήματα του Flash είναι η δυνατότητα να προσαρμόζεται στο μέγεθος της οθόνης, οι σχεδιαστές των συγκεκριμένων σελίδων την καταργούν, διώχνοντάς με από το σάιτ τους; Οι πιθανές απαντήσεις που μου βγήκαν (με γερή δόση κακίας λόγω ταλαιπωρίας) ήταν:

  1. τόσα ξέρουν
  2. έτσι τους βόλεψε

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

Πολλά είπα και δεν είναι στο στυλ μου. Πρόσφατα θυμήθηκα ότι το πρώτο που με τράβηξε στο www ήταν ότι σ’ αυτόν τον χώρο πολλοί είχαν τη διάθεση να μεταφέρουν τις ιδέες και τις γνώσεις τους στους υπόλοιπους. Ενθουσιάστηκα με την ιδέα, επωφελήθηκα πολλές φορές, ξεκόλλησα, εμπνεύστηκα, διασκέδασα τόσο ώστε να θελήσω να γίνω κι εγώ μέρος αυτού του κόσμου. Έτσι, από δω και πέρα όταν πληκτρολογείτε στις μηχανές αναζήτησης λέξεις όπως «χρηστικότητα», «web standards» ή «CSS», ίσως κάπου στις ελληνικές σελίδες να συναντήσετε και δικά μου πονήματα – έτσι δεν θα είναι πια οι παραπομπές παραπλανητικές. Θα προσπαθήσω να είμαι σαφής, να δίνω παραδείγματα και παραπομπές σε εκείνους που ξέρουν περισσότερα απο μένα. Κι αν πιστέψω ότι αυτή η δουλειά έχει νόημα, ίσως τη μεταφέρω σε άλλο χώρο.

Να λοιπόν η νέα γραμμή πλεύσης αυτού του μπλογκ. Ελπίζω σε καλά ταξίδια.

Phase 0

my sandbox site - phase 0

Να πως φαίνεται το sandbox χωρίς ψιμμύθια. Λίγο στεγνό αλλά σκοπεύω να το γδύσω κι άλλο πριν αρχίσω να δουλεύω το στύλ. Η βασική ιδέα προς το παρόν θέλει το φόντο λευκό, τα ποστ με κάποιο χρωματιστό πλαίσιο για να ξεχωρίζουν και κάτι αντίστοιχο για τα sidebar και τα σχόλια. Τώρα που έφτιαξα τη βάση για τους πειραματισμούς μου, ελπίζω σύντομα να δώσω την phase 1.

Μα τι γυρεύω εγώ εδώ;

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

  • Να οργανώσω το μυαλό και τη δουλειά μου
  • Να μάθω κάτι παραπάνω για το πως λειτουργεί αυτό το εργαλείο.

Όταν έφτιαχνα το προηγούμενο σάιτ και μ’ έπιασε ο πανικός ν’αλλάζω τα χρώματα, θα με βόλευε να μπορώ να δω τα προηγούμενα βήματα, την προηγούμενη άποψη ολοκληρωμένη, να τη βάλω δίπλα στη φρέσκια και να δω αν πήγα μπροστά ή πίσω. Η κάθε νέα εκδοχή καταργούσε την προηγούμενη. Και βέβαια μπορούσα να κρατήσω ακέραια όλα τα στάδια – το έκανα μάλιστα πριν την τελική απόφαση, είναι όμως πολύς μπελάς, πολλή δουλειά και πολύ μπέρδεμα για το τίποτα. Έτσι το κυρίως πιάτο εδώ θα είναι screenshot που θα δείχνουν την πορεία της σχεδίασης του καινούριου σάιτ και λίγες σημειώσεις για να ξορκίσουμε τις μαύρες τρύπες της μνήμης μας. Θα είναι δημόσιο; Ε, δεν πιστεύω να προσελκύσει και πολλούς φαν – τι να χαζέψει κανείς από τις σημειώσεις μου; Πάντως δεν αποκλείω τις επισκέψεις κι αν κανείς έχει την ευγενή καλοσύνη να μου πει τη γνώμη του ίσως και να με βοηθήσει. Αν φοβάμαι μη μου κλέψουν τις ιδέες; Καλό, με κάνατε και γέλασα! Σε δεύτερο επίπεδο λέω να κρατάω και εικόνες που μου αρέσουν – ως πηγές έμπνευσης.

Απο κει και πέρα, σκοπός είναι και να μάθω πως λειτουργεί το wordpress, αφού είχα τη φαεινή ιδέα να προτείνω να ενσωματώσουμε ένα blog/CMS στο intranet της εταιρίας. Μέχρι τώρα όλα καλά (so far so good, που έλεγε κι ο ταλαίπωρος καθώς έπεφτε από τον 500ο όροφο του ουρανοξύστη) αλλά τι θα γίνει όταν το κατεβάσω και προσπαθήσω να το κάνω να λειτουργεί στον δικό μας server; Μέσα στους προγραμματιστές δουλεύω βέβαια και ίσως να ξέρουν, αλλά ας έχω κι εγώ μια γενική ιδέα καλύτερα.

Αυτά λοιπόν για αρχή – αν στην πορεία μάθω και να εκφράζομαι ακόμα καλύτερα.

Δημιουργήστε ένα δωρεάν ιστότοπο ή ιστολόγιο στο WordPress.com.