Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Μια Ειςαγωγή ςτο Bootstrap 3
ΚατςιγιάννησΘεόφιλοσ
Προγραμματιςτικά Περιβάλλοντα
Για web developing
1. HTML 5
2. CSS 3
3. JAVASCRIPT
4. JQUERY
Client-Side: Server-Side:
1. P...
ΜέθοδοιΑνάπτυξησ
web εφαρμογών
1. Απόλυτος έλεγχος του κώδικα
2. Εύκολα Επεκτάσιμα
3. Εύκολα στη Διόρθωση
4. Βέλτιστο μέγε...
1. Εγγύηση για την αισθητική
2. Εγγύηση καλής λειτουργίας
Μέθοδος 1: Χρήςη ΈτοιμουTemplate
Θετικά: Αρνητικά:
1. Δεν υπάρχε...
1. Εγγύηση για την αισθητική
2. Εγγύηση καλής λειτουργίας
3. Δεν απαιτείται γνώση
προγραμματισμού.
Μέθοδος 2: Χρήςη Γεννήτ...
1. Εγγύηση για την αισθητική
2. Καλός έλεγχος του κώδικα
3. Επεκτασιμότητα
4. Έυκολη διόρθωση
Θετικά: Αρνητικά:
1. Συγκεκρ...
«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...
Twitter Bootstrap 3 Front-end
framework
Τι είναι το Bootstrap
 Καλαίςθητο, ιςχυρό front-end framework για ταχύτερη και ευ...
Twitter Bootstrap 3 Front-end
framework
Λίγα ιςτορικά…
 Το Bootstrap αναπτύχθηκε από τουσ Mark Otto και Jacob
Thornton γι...
Twitter Bootstrap 3 Front-end
framework
Γιατί χρηςιμοποιούμε το Bootstrap
 Εύκολο ςτην εγκατάςταςη και ςτη χρήςη. Άρα κατ...
Επί της Ουσίας…
Twitter Bootstrap 3 Front-end
framework
Twitter Bootstrap 3 Front-end
framework
Εγκατάςταςη
Τρείς Εκδόσεις
•Precompiled
•Source code Πρέπει να
γίνει compile με Le...
Twitter Bootstrap 3 Front-end
framework
Δομή των Αρχείων
Twitter Bootstrap 3 Front-end
framework
Υποςτήριξη ςτουσ Browsers
Twitter Bootstrap 3 Front-end
framework
Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap
Σύνδεςη
Στην κεφαλίδα
Twitter Bootstrap 3 Front-end
framework
Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap
Σύνδεςη
Στο body
Twitter Bootstrap 3 Front-end
framework
Navigation Bar
Twitter Bootstrap 3 Front-end
framework
Dropdown Menu
Twitter Bootstrap 3 Front-end
framework
Callout
Twitter Bootstrap 3 Front-end
framework
Carousel
Twitter Bootstrap 3 Front-end
framework
Grid
Twitter Bootstrap 3 Front-end
framework
Responsive
Twitter Bootstrap 3 Front-end
framework
Features
Twitter Bootstrap 3 Front-end
framework
Tabs
Twitter Bootstrap 3 Front-end
framework
Tabs
Twitter Bootstrap 3 Front-end
framework
Modal Dialog
Twitter Bootstrap 3 Front-end
framework
List Group
Twitter Bootstrap 3 Front-end
framework
Footer
Twitter Bootstrap 3 Front-end
framework
Glyphicons
Twitter Bootstrap 3 Front-end
framework
Η Δυναμική Κοινότητα του Bootstrap
 Editors
 http://www.bootply.com/
 http://ww...
Twitter Bootstrap 3 Front-end
framework
Εναλλακτικά front-end frameworks
 Blueprint http://www.blueprintcss.org/
 Zurb F...
Μια Ειςαγωγή ςτο Bootstrap 3
ΚατςιγιάννησΘεόφιλοσ
Ευχαριςτούμε Πολύ
Prochain SlideShare
Chargement dans…5
×

Μια εισαγωγή στο Bootstrap

1 797 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

Μια εισαγωγή στο Bootstrap

  1. 1. Μια Ειςαγωγή ςτο Bootstrap 3 ΚατςιγιάννησΘεόφιλοσ
  2. 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. 3. ΜέθοδοιΑνάπτυξησ web εφαρμογών 1. Απόλυτος έλεγχος του κώδικα 2. Εύκολα Επεκτάσιμα 3. Εύκολα στη Διόρθωση 4. Βέλτιστο μέγεθος κώδικα Μέθοδος 0: Αυτόνομη Ανάπτυξη του Λογιςμικού Θετικά: Αρνητικά: 1. Απαιτείται μεγάλη εμπειρία 2. Κίνδυνος για μέτριας αισθητικής αποτέλεσμα 3. Πολύ καλή γνώση των προγραμματιστικών περιβαλλόντων.
  4. 4. 1. Εγγύηση για την αισθητική 2. Εγγύηση καλής λειτουργίας Μέθοδος 1: Χρήςη ΈτοιμουTemplate Θετικά: Αρνητικά: 1. Δεν υπάρχει έλεγχος του κώδικα 2. Δύσκολα επεκτάσιμος 3. Δύσκολα τροποποιήσιμος ΜέθοδοιΑνάπτυξησ web εφαρμογών
  5. 5. 1. Εγγύηση για την αισθητική 2. Εγγύηση καλής λειτουργίας 3. Δεν απαιτείται γνώση προγραμματισμού. Μέθοδος 2: Χρήςη Γεννήτριασ Κώδικα WYSIWYG Θετικά: Αρνητικά: 1. Δεν υπάρχει έλεγχος του κώδικα 2. Μεγάλος όγκος αυτόματου κώδικα 3. Συγκεκριμένης αισθητικής ΜέθοδοιΑνάπτυξησ web εφαρμογών Αυτόματη παραγωγή κώδικα μέςω ενόσ γραφικού περιβάλλοντοσ
  6. 6. 1. Εγγύηση για την αισθητική 2. Καλός έλεγχος του κώδικα 3. Επεκτασιμότητα 4. Έυκολη διόρθωση Θετικά: Αρνητικά: 1. Συγκεκριμένης αισθητικής αποτέλεσμα 2. Καλή γνώση τουλάχιστον HTML Χρήςη ςτατικών βιβλιοθηκών έτοιμου Κώδικα Μέθοδος 3: Χρήςη ενόσ front-end Framework ΜέθοδοιΑνάπτυξησ web εφαρμογών
  7. 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. 8. Twitter Bootstrap 3 Front-end framework Τι είναι το Bootstrap  Καλαίςθητο, ιςχυρό front-end framework για ταχύτερη και ευκολότερη ανάπτυξη ιςτοςελίδων.  Βαςίζεται ςτισ HTML, CSS, JavaScript.  Υποςτηρίζει όλουσ τουσ γνωςτούσ browsers και όλεσ ςχεδόν τισ εκδόςεισ τουσ.
  9. 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. 10. Twitter Bootstrap 3 Front-end framework Γιατί χρηςιμοποιούμε το Bootstrap  Εύκολο ςτην εγκατάςταςη και ςτη χρήςη. Άρα κατάλληλο για νέουσ web developer.  Σταθερό και ευέλικτο ςύςτημα διάταξησ (Grid).  Με αποκρίςιμη διάταξη ςε όλεσ διαςτάςεισ του browser.  Πλήθοσ από web-ςυςτατικά (web components).  Πλήθοσ από εικονίδια ςε μορφή ςυμβολοςειρών. (Glyph Icons).  Επεκτάςιμη με τη βοήθεια των JavaScript plugins που διαθέτει.  Πολύ καλό documentation και δυναμική κοινότητα που το αναπτύςςει.
  11. 11. Επί της Ουσίας… Twitter Bootstrap 3 Front-end framework
  12. 12. Twitter Bootstrap 3 Front-end framework Εγκατάςταςη Τρείς Εκδόσεις •Precompiled •Source code Πρέπει να γίνει compile με Less •Sass Για την Rails
  13. 13. Twitter Bootstrap 3 Front-end framework Δομή των Αρχείων
  14. 14. Twitter Bootstrap 3 Front-end framework Υποςτήριξη ςτουσ Browsers
  15. 15. Twitter Bootstrap 3 Front-end framework Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap Σύνδεςη Στην κεφαλίδα
  16. 16. Twitter Bootstrap 3 Front-end framework Η ςύνδεςη του κώδικα HTML με τισ βιβλιοθήκεσ του Bootstrap Σύνδεςη Στο body
  17. 17. Twitter Bootstrap 3 Front-end framework Navigation Bar
  18. 18. Twitter Bootstrap 3 Front-end framework Dropdown Menu
  19. 19. Twitter Bootstrap 3 Front-end framework Callout
  20. 20. Twitter Bootstrap 3 Front-end framework Carousel
  21. 21. Twitter Bootstrap 3 Front-end framework Grid
  22. 22. Twitter Bootstrap 3 Front-end framework Responsive
  23. 23. Twitter Bootstrap 3 Front-end framework Features
  24. 24. Twitter Bootstrap 3 Front-end framework Tabs
  25. 25. Twitter Bootstrap 3 Front-end framework Tabs
  26. 26. Twitter Bootstrap 3 Front-end framework Modal Dialog
  27. 27. Twitter Bootstrap 3 Front-end framework List Group
  28. 28. Twitter Bootstrap 3 Front-end framework Footer
  29. 29. Twitter Bootstrap 3 Front-end framework Glyphicons
  30. 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. 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. 32. Μια Ειςαγωγή ςτο Bootstrap 3 ΚατςιγιάννησΘεόφιλοσ Ευχαριςτούμε Πολύ

×