Linux Inside
81
έχουν δηλωθεί στα αντίστοιχα CSS αρχεία του Foundation
Framework. Έπειτα γράφουμε την κεφαλίδα μας και κλεί-
νουμε τις δηλώσεις των αντικειμένων div:
<h2>Webapp from scratch</h2>
</div>
</div>
Στη συνέχεια θέλουμε να προσθέσουμε την εικόνα με το
κείμενό της, δηλώνοντας μία καινούργια στήλη, η οποία θα
περιέχει δύο αντικείμενα την εικόνα και το κείμενο:
<div class="row">
Η εικόνα μας θέλουμε να έχει μέγεθος 8 στήλες και έτσι
δηλώνουμε:
<div class="eight columns">
Συμβουλή: Κάθε νέα στήλη που δηλώνουμε περιέχει και
αυτή άλλες 12 εικονικές στήλες, οι οποίες αντιπροσωπεύ-
ουν το μέγεθός της. Μπορούμε, με λίγα λόγια, σε ένα αντι-
κείμενο για το οποίο έχουμε δεσμεύσει 8 στήλες να ορί-
σουμε άλλα δύο μέσα σε αυτό, με μέγεθος 8 στήλες το ένα
και άλλες 4 το άλλο.
Στη συνέχεια εισάγουμε την εικόνα μας:
<h3>The Image</h3>
<img src="mozilla.jpg">
και έπειτα κλείνουμε τη δήλωση μόνο του div, που δηλώ-
νει τις 8 στήλες, καθώς στις άλλες τέσσερις θέλουμε να
βάλουμε το κείμενό μας.
</div>
Αντίστοιχα, δηλώνουμε νέο αντικείμενο μεγέθους τεσσά-
ρων στηλών, όπου θα βρίσκεται και το κείμενό μας:
<div class="four columns">
<h4>The Text</h4>
<p>This a text for presenting our first Web Application!
Enjoy :)</p>
</div>
Κατόπιν, κλείνουμε το div του κελιού μας.
</div>
Τέλος, ανοίγουμε ένα καινούργιο κελί, που θα πιάνει το
100%
της οθόνης μας και θα περιέχει την κατακλείδα:
<div class="row">
<div class="twelve columns">
<h5>The text!</h5>
<p> This is our last line of text!</p>
</div>
</div>
Η εφαρμογή μας είναι πλέον έτοιμη!
Ο Firefox παρέχει μία μεγάλη γκάμα εργαλείων για τους
προγραμματιστές, τα οποία βρίσκονται στο μενού Εργα-
λεία. Αφιερώστε πέντε λεπτά και δοκιμάστε ένα ένα τα ερ-
γαλεία σε μία σελίδα – είμαι σίγουρος ότι θα σας φανούν
κάτι παραπάνω από χρήσιμα στο μέλλον.
Ανοίξτε, λοιπόν, το index.html από τον Mozilla Firefox και
παρατηρήστε τη συμπεριφορά του σε διάφορες αναλύσεις.
Από τα εργαλεία επιλέξτε το εργαλείο προσαρμοστική
προβολή, μέσω του οποίου μπορείτε να αλλάξετε την εμ-
φάνιση της σελίδας από τη λίστα με τις έτοιμες αναλύσεις
ή από το πλαίσιο κάτω και δεξιά της σελίδας. Δοκιμάστε
μερικές αναλύσεις και δείτε τη συμπεριφορά των αντικει-
μένων. Όπως βλέπετε, όταν μικραίνει η ανάλυση, το κείμε-
νο που βρίσκεται στα δεξιά, τοποθετείται κάτω από την ει-
κόνα και το κείμενο της αριστερής στήλης. Επίσης, τα αντι-
κείμενα αξιοποιούν το 100% τις διαθέσιμης οθόνης, ανε-
ξαρτήτως συσκευής στην οποία τρέχουν.
Διαδικασία εγκατάστασης
Για να μετατρέψουμε τώρα αυτή την απλή εφαρμογή σε
web app, το μόνο που έχουμε να κάνουμε είναι να φτιά-
ξουμε ένα κουμπί εγκατάστασης μέσα στη σελίδα μας και
ένα manifest, το οποίο είναι ουσιαστικά το αρχείο εγκατά-
στασης. Η μορφή του manifest είναι η εξής:
{
"
name": "firstWebapp",
"
description": "This is my first web application!",
"
icons": {
"128": "/
img/icon-128.png"
},
"
developer": {
"
name": "Christos Bacharakis",
"
url": "https://github.com/bacharakis"
},
"
default_locale": "en"
}
Όπως βλέπετε, είναι αρκετά εύκολο και ξεκάθαρο. Σε
μελλοντικές εφαρμογές που θα είναι περισσότερο πολύ-
πλοκες, θα δούμε και άλλες εκδοχές του manifest, λίγο πιο
πλούσιες. Αποθηκεύουμε τον παραπάνω κώδικα σε ένα
αρχείο με κατάληξη .webapp – π.χ. Manifest.webapp.
Τελευταίο βήμα είναι να φτιάξουμε ένα κουμπί εγκατά-
στασης. Επανερχόμαστε στον κώδικα του index.html και
συγκεκριμένα στην κατακλείδα, στην οποία προσθέτουμε
τον εξής κώδικα ενός κουμπιού.
<button
onclick="navigator.mozApps.install('http://127.0.0.1/
foundation/manifest.webapp'); return false;">
Install this awesome app on your homescreen!
</button>
Προσοχή! Όπως βλέπετε, έχω ορίσει ως τοποθεσία του
Manifest την τοποθεσία στον localhost στον υπολογιστή μου.
Για να μπορέσει να εγκατασταθεί η web app, θα πρέπει να
τοποθετήσετε το φάκελο foundation στην τοποθεσία
localhost του apache server που τρέχετε (συνήθως
/
var/www/html). Aν έχετε δικό σας server, μπορείτε αλλάζετε
το 127.0.0.1 με το domain και την τοποθεσία του server σας.
Ανοίγουμε, λοιπόν, το αρχείο index.html μας, γράφοντας
και βλέπουμε την πρώτη μας
ολοκληρωμένη web application. Προς το παρόν, τρέχει
μόνο on–line, αλλά πατώντας το κουμπάκι εγκατάστασης,
που βρίσκεται στο κάτω μέρος τη σελίδας, η εφαρμογή
εγκαθίσταται στη συσκευή μας! Καλό, έτσι;
Το συγκεκριμένο παράδειγμα web app βρίσκεται στην
προσωπική μου σελίδα [3].
Στο επόμενο τεύχος θα φτιάξουμε μία εφαρμογή που θα
εκμεταλλεύεται και μερικές υπηρεσίες και χαρακτηριστικά
που διαθέτει το κινητό μας τηλέφωνο ή tablet. Μέχρι τότε,
happy hacking!
•
Linux Labs – WebApps
Σύνδεσμοι
[0]
[1]
[2]
[3]
