Μια εισαγωγή στο Bootstrap. Στα πλαίσια του μαθήματος hci στο cs.uoi

1. Μια Ειςαγωγή ςτο Bootstrap 3
ΚατςιγιάννησΘεόφιλοσ

2. Προγραμματιςτικά Περιβάλλοντα
Για web developing
1. HTML 5
2. CSS 3
3. JAVASCRIPT
4. JQUERY
Client-Side: Server-Side:
1. PHP
2. MYSQL
3. PYTHON - DJANGO
4. JEE
5. RUBY – RUBY ON RAILS

3. ΜέθοδοιΑνάπτυξησ
web εφαρμογών
1. Απόλυτος έλεγχος του κώδικα
2. Εύκολα Επεκτάσιμα
3. Εύκολα στη Διόρθωση
4. Βέλτιστο μέγεθος κώδικα
Μέθοδος 0: Αυτόνομη Ανάπτυξη του Λογιςμικού
Θετικά: Αρνητικά:
1. Απαιτείται μεγάλη εμπειρία
2. Κίνδυνος για μέτριας αισθητικής
αποτέλεσμα
3. Πολύ καλή γνώση των προγραμματιστικών
περιβαλλόντων.

4. 1. Εγγύηση για την αισθητική
2. Εγγύηση καλής λειτουργίας
Μέθοδος 1: Χρήςη ΈτοιμουTemplate
Θετικά: Αρνητικά:
1. Δεν υπάρχει έλεγχος του κώδικα
2. Δύσκολα επεκτάσιμος
3. Δύσκολα τροποποιήσιμος
ΜέθοδοιΑνάπτυξησ
web εφαρμογών

5. 1. Εγγύηση για την αισθητική
2. Εγγύηση καλής λειτουργίας
3. Δεν απαιτείται γνώση
προγραμματισμού.
Μέθοδος 2: Χρήςη Γεννήτριασ Κώδικα
WYSIWYG
Θετικά: Αρνητικά:
1. Δεν υπάρχει έλεγχος του κώδικα
2. Μεγάλος όγκος αυτόματου κώδικα
3. Συγκεκριμένης αισθητικής
ΜέθοδοιΑνάπτυξησ
web εφαρμογών
Αυτόματη παραγωγή κώδικα μέςω ενόσ
γραφικού περιβάλλοντοσ

6. 1. Εγγύηση για την αισθητική
2. Καλός έλεγχος του κώδικα
3. Επεκτασιμότητα
4. Έυκολη διόρθωση
Θετικά: Αρνητικά:
1. Συγκεκριμένης αισθητικής αποτέλεσμα
2. Καλή γνώση τουλάχιστον HTML
Χρήςη ςτατικών βιβλιοθηκών έτοιμου Κώδικα
Μέθοδος 3: Χρήςη ενόσ front-end Framework
ΜέθοδοιΑνάπτυξησ
web εφαρμογών

7. «Bootstrap is a framework you give a Web developer who is not an
expert in CSS so he can do something that a CSS developer won't
kill him for.»
Twitter Bootstrap 3 Front-end
framework

8. Twitter Bootstrap 3 Front-end
framework
Τι είναι το Bootstrap
 Καλαίςθητο, ιςχυρό front-end framework για ταχύτερη και ευκολότερη ανάπτυξη
ιςτοςελίδων.
 Βαςίζεται ςτισ HTML, CSS, JavaScript.
 Υποςτηρίζει όλουσ τουσ γνωςτούσ browsers και όλεσ ςχεδόν τισ εκδόςεισ τουσ.

9. Twitter Bootstrap 3 Front-end
framework
Λίγα ιςτορικά…
 Το Bootstrap αναπτύχθηκε από τουσ Mark Otto και Jacob
Thornton για λογαριαςμό τουTwitter ωσ ένα framework για
την εξαςφάλιςη μιασ ενιαίασ αιςθητικήσ ςτισ διάφορεσ
λειτουργίεσ του .
 ΤονΑύγουςτο του 2011 εκδόθηκε ςαν project ανοιχτού
κώδικα και το Φεβρουάριο του 2011 έγινε το ποιο
δημομοφιλέσ του GitHub.
 Μέχρι τον Μαρτιο του 2014 έχει λάβει 65.000 stars και έχουν
γίνει 23.800 forks ςτο GitHub.

10. Twitter Bootstrap 3 Front-end
framework
Γιατί χρηςιμοποιούμε το Bootstrap
 Εύκολο ςτην εγκατάςταςη και ςτη χρήςη. Άρα κατάλληλο για νέουσ web developer.
 Σταθερό και ευέλικτο ςύςτημα διάταξησ (Grid).
 Με αποκρίςιμη διάταξη ςε όλεσ διαςτάςεισ του browser.
 Πλήθοσ από web-ςυςτατικά (web components).
 Πλήθοσ από εικονίδια ςε μορφή ςυμβολοςειρών. (Glyph Icons).
 Επεκτάςιμη με τη βοήθεια των JavaScript plugins που διαθέτει.
 Πολύ καλό documentation και δυναμική κοινότητα που το αναπτύςςει.

11. Επί της Ουσίας…
Twitter Bootstrap 3 Front-end
framework

12. Twitter Bootstrap 3 Front-end
framework
Εγκατάςταςη
Τρείς Εκδόσεις
•Precompiled
•Source code Πρέπει να
γίνει compile με Less
•Sass Για την Rails

13. Twitter Bootstrap 3 Front-end
framework
Δομή των Αρχείων

14. Twitter Bootstrap 3 Front-end
framework
Υποςτήριξη ςτουσ Browsers

15. Twitter Bootstrap 3 Front-end
framework
Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap
Σύνδεςη
Στην κεφαλίδα

16. Twitter Bootstrap 3 Front-end
framework
Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap
Σύνδεςη
Στο body

17. Twitter Bootstrap 3 Front-end
framework
Navigation Bar

18. Twitter Bootstrap 3 Front-end
framework
Dropdown Menu

19. Twitter Bootstrap 3 Front-end
framework
Callout

20. Twitter Bootstrap 3 Front-end
framework
Carousel

21. Twitter Bootstrap 3 Front-end
framework
Grid

22. Twitter Bootstrap 3 Front-end
framework
Responsive

23. Twitter Bootstrap 3 Front-end
framework
Features

24. Twitter Bootstrap 3 Front-end
framework
Tabs

25. Twitter Bootstrap 3 Front-end
framework
Tabs

26. Twitter Bootstrap 3 Front-end
framework
Modal Dialog

27. Twitter Bootstrap 3 Front-end
framework
List Group

28. Twitter Bootstrap 3 Front-end
framework
Footer

29. Twitter Bootstrap 3 Front-end
framework
Glyphicons

30. Twitter Bootstrap 3 Front-end
framework
Η Δυναμική Κοινότητα του Bootstrap
 Editors
 http://www.bootply.com/
 http://www.divshot.com/
 Themes
 http://www.boottheme.com/
 http://rriepe.github.io/1pxdeep/
 http://designmodo.github.io/Flat-UI/.

31. Twitter Bootstrap 3 Front-end
framework
Εναλλακτικά front-end frameworks
 Blueprint http://www.blueprintcss.org/
 Zurb Foundation http://foundation.zurb.com/
 Metro UI http://metroui.org.ua/
 PURE http://purecss.io/
 Gumby Framework http://gumbyframework.com/
 BASE Framework http://gumbyframework.com/

32. Μια Ειςαγωγή ςτο Bootstrap 3
ΚατςιγιάννησΘεόφιλοσ
Ευχαριςτούμε Πολύ