Εργασία μαθητών για το 8ο Μαθητικό Συνέδριο Πληροφορικής. Αφορά τη δημιουργία μίας one-page responsive πρότυπης ιστοσελίδας με χρήση Bootstrap

1. Δημιουργία ενός responsive
template με χρήση Bootstrap
ΓΕ.Λ. ΠΕΝΤΑΠΟΛΗΣ
ΣΧΟΛΙΚΟ ΕΤΟΣ: 2015-16

2. Η εργασία υλοποιήθηκε στα
πλαίσια του μαθήματος
επιλογής της A’ Λυκείου
Εφαρμογές Πληροφορικής.
Το μάθημα

3. Ο στόχος
Στόχος της εργασίας ήταν η
δημιουργία μίας responsive
πρότυπης ιστοσελίδας για
παιχνίδια.

4. O όρος responsive
Μια responsive ιστοσελίδα
προσαρμόζεται αυτόματα
στις διαστάσεις της οθόνης
του υπολογιστή μας.

5. O όρος template
Template είναι ένα
προδιαμορφωμένο site που
προορίζεται για συγκεκριμένο
περιεχόμενο και εικόνες.

6. Εργαλείο συγγραφής
Μία εφαρμογή επεξεργασίας
πηγαίου κώδικα που
αντικαθιστά το Σημειωματάριο
και υποστηρίζει πολλές
γλώσσες προγραμματισμού.

7. To Brackets είναι μία
μοντέρνα εφαρμογή
επεξεργασίας κώδικα ειδικά
σχεδιασμένη για την
δημιουργία ιστοσελίδων.
Εργαλείο συγγραφής

8. Οι γλώσσες προγραμματισμού

9. H HTML
Η HTML είναι η κύρια
γλώσσα σήμανσης για τις
ιστοσελίδες και είναι η
βασική γλώσσα δόμησης
των ιστοσελίδων του Ιστού.

10. H CSS
Είναι μια γλώσσα που μας
βοηθάει να ορίσουμε τον
τρόπο με τον οποίο θα
εμφανίζονται τα διάφορα
στοιχεία στην ιστοσελίδα μας.

11. Το Bootstrap
To Bootstrap είναι μία συλλογή
εργαλείων ανοιχτού κώδικα
για τη δημιουργία ιστοσελίδων
και διαδικτυακών εφαρμογών.

12. Ο κώδικας του navigation bar

13. Ο κώδικας του Carousel

14. Ο κώδικας CSS του navigation bar
Ο κώδικας αυτός θέτει το
μέγιστο μέγεθος της εικόνας
σε 100% ενώ το πρόγραμμα
περιήγησης ρυθμίζει
αυτόματα το κενό ανάμεσα
στα στοιχεία (margin)

15. Ο κώδικας αυτός ορίζει την θέση του Footer και
δημιουργεί ένα βελάκι, με κλικ στο οποίο ο επισκέπτης
μεταφέρεται στο πάνω μέρος της ιστοσελίδας.
Ο κώδικας του Footer

16. Media Queries
Τα media queries
χρησιμοποιούνται για να
ορίσουν διαφορετικούς
κανόνες στυλ για
διαφορετικούς τύπους
συσκευών.

17. Google Maps
Με τον παραπάνω κώδικα προστέθηκαν
Google Maps στο footer της ιστοσελίδας.

18. Animation
Τέλος, στην ιστοσελίδα
προστέθηκαν και animations
για καλύτερο αισθητικό
αποτέλεσμα.
CSS HTML

19. Στιγμιότυπο #1/Carousel

20. Στιγμιότυπο #2/Πληροφορίες

21. Στιγμιότυπο #3/Επιπλέον δράσεις

22. Στιγμιότυπο #4/Χαρακτηριστικά

23. Στιγμιότυπο #5/Η ομάδα, Download

24. Στιγμιότυπο #6/ Eπικοινωνία

25. Στιγμιότυπο #7/Χάρτες Google

26. Στιγμιότυπο #8/ Footer

27. Σας ευχαριστούμε!