Linux Inside
80
γα με την ανάλυση της οθόνης, άλλαζε και τις τιμές/ιδιότη-
τες των αντικειμένων μας. Αυτή η υλοποίηση προϋποθέτει
ότι ο κώδικας CSS της σελίδας μας θα βρίσκεται στο ίδιο
αρχείο με αυτόν της JavaScript ή θα είχαμε διαφορετικά
αρχεία CSS για κάθε διαφορετική συνθήκη.
Πολύπλοκο, έτσι;
Υπάρχει ελπίδα, όμως, γιατί μπορούμε να δημιουργή-
σουμε μία αντίστοιχη συνθήκη μέσα στο αρχείο CSS και να
γράψουμε εκεί τις κατάλληλες ιδιότητες ανάλογα με το μέ-
γεθος της οθόνης.
Έτσι, θα έχουμε ένα αρχείο CSS με όλες τις περιπτώ-
σεις ανάλογα με την ανάλυση της οθόνης. Πώς θα γίνει
αυτό; Χρησιμοποιώντας την ιδιότητα @media ως εξής:
@
media screen and (max-width:800px) {
Ας δούμε το παρακάτω παράδειγμα:
body {
font:1em/1.5em 'Verdana', 'Arial', sans-serif;
}
img {
width:400px;
}
@
media screen and (max-width:800px) {
body {
font-size:0.8em;
}
img {
width:300px;
}
}
@
media screen and (max-width:400px) {
body {
font-size:0.7em;
}
img {
width:200px;
}
}
Ο παραπάνω κώδικας είναι αρκετά ξεκάθαρος. Ορίζει
διαφορετικά μέγεθος γραμματοσειράς και πλάτος εικόνας
ανάλογα με το μέγιστο πλάτος που υποστηρίζει η οθόνη
μας. Δεν θα αναλύσουμε άλλο τον κώδικα αυτό, διότι δεν
θα χρειαστεί τελικά να τον χρησιμοποιήσουμε – απλά τον
αναφέρουμε ως ένα τρικ. Αντίθετα, για να επιτύχουμε μία
ολοκληρωμένη και προσαρμοσμένη προβολή αντικειμένων,
ανεξάρτητα από την πλατφόρμα, θα ανατρέξουμε στο
framework Foundation [1].
Χρήση Foundation
Το Foundation είναι ένα framework που φροντίζει ώστε
όλα τα αντικείμενα της εφαρμογής μας να εμφανίζονται
σωστά ανάλογα με το μέγεθος της οθόνης. Π.χ. αν χρησι-
μοποιούμε την εφαρμογή από desktop, μας ενδιαφέρει η
οριζόντια διάταξη των αντικειμένων μας, ενώ αν η χρήση
γίνεται από φορητή συσκευή, η κάθετη διάταξη. Μεταβαί-
νοντας στη σελίδα λήψης του Foundation, θα δούμε ότι
υπάρχουν τρεις επιλογές.
Η πρώτη είναι και η βασική έκδοση, στην οποία πρέπει
να δουλέψουμε αρκετά μόνοι μας, προκειμένου να επιτύ-
χουμε το αποτέλεσμα που επιθυμούμε. Θα αγνοήσουμε τε-
λείως την τρίτη επιλογή και θα επιλέξουμε τη δεύτερη, μέ-
σω της οποίας μπορούμε να παραμετροποιήσουμε το
framework που θα κατεβάσουμε και θα χρησιμοποιήσουμε.
Στις επιλογές θα δούμε ότι θα σκιαγραφήσουμε πάνω κά-
τω την εμφάνιση που θέλουμε να έχει η εφαρμογή/site μας
τόσο σε desktop περιβάλλον όσο και σε mobile.
Στην ουσία, το Foundation framework χωρίζει την οθόνη
μας σε 12 εικονικές στήλες ή όσες επιλέξουμε κατά τη
διάρκεια τις παραμετροποίησης. Αυτές οι στήλες είναι κάτι
σαν το ποσοστό της οθόνης που θα κατέχει κάθε αντικείμε-
νο της εφαρμογής μας. Αν ορίσουμε, δηλαδή, ότι μία εικό-
να θα έχει μέγεθος 6 στήλες με μέγεθος οθόνης τις 12, τό-
τε θα καταλαμβάνει το 50% της οθόνης.
Αφού λοιπόν σκιαγραφήσουμε την εμφάνιση που θέλου-
με, κάνουμε τις απαραίτητες επιλογές, κάνουμε λήψη του
framework και το αποσυμπιέζουμε στο φάκελο της εφαρ-
μογής που θα κτίσουμε. Στον φάκελο θα δούμε κάποιους
φακέλους με τα Javascript και τα CSS αρχεία του
framework, καθώς και ένα αρχείο index.html, το οποίο είναι
ουσιαστικά μία έτοιμη παρουσίαση της εμφάνισής μας.
Μπορούμε να γράψουμε καινούργιο index.html αρχείο,
αλλά εμείς θα επεξεργαστούμε το υπάρχον. Ανοίγουμε
λοιπόν το αρχείο και διαγράφουμε το περιεχόμενο που
υπάρχει στην περιοχή του <body> </body>, εκτός από
τις γραμμές στο τέλος του body που ξεκινάνε με τη δήλω-
ση <!-- Included JS Files (Uncompressed) -->.
Ό,τι υπάρχει πριν, στην κεφαλίδα και μετά στο τέλος εί-
ναι δηλώσεις του Foundation Framework, που μας χρειάζο-
νται προκειμένου να δουλέψει σωστά ο σχεδιασμός μας.
Αν θέλετε να δημιουργήσετε μία άλλη σελίδα από την αρ-
χή, πρέπει να αντιγράψετε ό,τι βρίσκεται πριν από και μετά
το τέλος του <body> tag, και να τοποθετήσετε στον ίδιο
φάκελο τα αρχεία του Foundation που κατεβάσατε.
Πάμε τώρα να σχεδιάσουμε μία πολύ απλή εφαρμογή, η
οποία θα έχει την εμφάνιση της
εικόνας 1
,
δηλαδή μία κε-
φαλίδα, μία εικόνα με κείμενο από δίπλα και από κάτω πάλι
κείμενο. Θέλουμε η κεφαλίδα να καταλαμβάνει όλο το πα-
ράθυρο, η εικόνα περίπου 70% του παραθύρου, δηλαδή 8
στήλες, ενώ το κείμενο δίπλα της, άλλο τόσο. Το κείμενο
από κάτω θα πιάνει το 100% της οθόνης, δηλαδή 12 στή-
λες. Ξεκινώντας, δηλώνουμε μία νέα στήλη και μέσα σε αυ-
τήν ένα αντικείμενο με μέγεθος 12 στηλών, το οποίο θα εί-
ναι η κεφαλίδα μας:
<div class="row">
<div class="twelve columns">
Οι δηλώσεις γίνονται χρησιμοποιώντας κλάσεις που
Linux Labs – WebApps
Η πρώτη μας Web app δεν λέει πολλά, αλλά περιμένετε να
δείτε τι θα φτιάξουμε μετά…
1
