Υποενότητα 2.1: Front-end frameworks
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | WEB II - Προηγμένος σχεδιασμός |
| Book: | Υποενότητα 2.1: Front-end frameworks |
| Printed by: | Guest user |
| Date: | Friday, 3 May 2024, 6:39 PM |
Description
- Τι είναι front-end frameworks;
- Γιατί χρησιμοποιούμε Front-end frameworks;
- Bootstrap Framework
Τι είναι front-end frameworks;
Ας ξεκινήσουμε με την εξήγηση των πλαισίων front-end.
Φανταστείτε ότι θέλετε να δημιουργήσετε μια ιστοσελίδα και έχετε ήδη καλή γνώση HTML, CSS και JavaScript. Τι θα κάνετε?
Λοιπόν, θα ξεκινήσετε από το μηδέν και θα αναπτύξετε τους δικούς σας κανόνες CSS και τις αλληλεπιδράσεις JavaScript που θα εξυπηρετούν τους στόχους σας για τον ιστότοπο. Κατά τη διάρκεια της διαδικασίας, θα συνειδητοποιήσετε ότι θα χρησιμοποιείτε τους ίδιους κανόνες και αλληλεπιδράσεις σε πολλά μέρη.
Στο τέλος, θα έχετε μια ομάδα κανόνων και αλληλεπιδράσεις Javascript.
Την επόμενη φορά που θα χρειαστεί να δημιουργήσετε έναν ιστότοπο, αντί να γράψετε τα πάντα από την αρχή, θα συνειδητοποιήσετε ότι θα είναι πιο γρήγορα να πάρετε τις ομάδες που έχετε ήδη δημιουργήσει και να τις τροποποιήσετε για τις ανάγκες σας.
Τα Front-end frameworks βασίζονται στην παραπάνω λογική.
Είναι εδώ για να επιταχύνουν την υλοποίηση της ιστοσελίδας. Έχουν ενσωματωμένα στοιχεία HTML, CSS και JavaScript.
Μέσω αυτών των πλαισίων, οι προγραμματιστές έχουν πρόσβαση σε έτοιμα Τυπογραφικά, Μορφές, Κουμπιά, Πίνακες, Πλοηγίες, Πινακίδες, Ειδοποιήσεις, Modals, Tabs, Accordion, Carousel κλπ. Και πολλά άλλα στοιχεία JavaScript, HTML και CSS.
Συνοπτικά, τα πλαίσια Front-end είναι μια συλλογή λειτουργιών HTML, CSS και JavaScript.
Υπάρχουν πολλά πλαίσια front-end. Όπως θα εξηγήσουμε αργότερα, σε αυτό το μάθημα θα συζητήσουμε το πλαίσιο Bootstrap.
Γιατί να χρησιμοποιήσουμε Front-end frameworks?
Όπως εξηγήσαμε, τα πλαίσια Front-end επιτρέπουν τη γρήγορη δημιουργία ιστοσελίδων.
Ωστόσο, τα παραπάνω δεν είναι ο μόνος λόγος για τον οποίο τα χρησιμοποιούμε.
Τα πλαίσια του Front-end μας παρέχουν αυτό που ονομάζεται "ανταποκρινόμενος - προσαρμόσιμος σχεδιασμός" - “responsive web design”.
Responsive web ιστοσελίδων επιτρέπει στους χρήστες να έχουν πρόσβαση στην ιστοσελίδα σας από διάφορες συσκευές και μεγέθη οθόνης (π.χ. κινητά, ipad, φορητοί υπολογιστές, επιτραπέζιοι υπολογιστές).
Όταν χρησιμοποιείτε ένα πλαίσιο, ο ιστότοπος ρυθμίζεται αυτόματα ώστε να χωράει στην οθόνη χωρίς πρόσθετο κωδικό.
Επίσης, τα πλαίσια ασχολούνται με τη συμβατότητα μεταξύ των browsers - cross-browser compatibility.
Μπορεί να έχετε παρατηρήσει ότι κανένα από τα δύο προγράμματα περιήγησης δεν εμφανίζει την ίδια σελίδα με τον ίδιο ακριβώς τρόπο. Μερικές φορές οι αλλαγές είναι μικρές, αλλά υπάρχουν στιγμές όπου κάτι μπορεί να είναι εντελώς διαφορετικό ή δεν λειτουργεί σε ένα πρόγραμμα περιήγησης.
Τα Πλαίσια, ελαχιστοποιούν αυτό το μειονέκτημα και το περιεχόμενο εμφανίζεται σε πολλά προγράμματα περιήγησης σχεδόν ταυτόσημο.
Συνοψίζοντας, χρησιμοποιούμε πλαίσια πλαισίου, επειδή μας παρέχουν:
- έτοιμα χαρακτηριστικά που ελαχιστοποιούν τον χρόνο ανάπτυξης
- σχεδιασμό ιστοσελίδων προσαρμοζόμενο σε συσκευές responsive web design
- συμβατότητα μεταξύ των προγραμμάτων περιήγησης - cross-browser compatibility
Bootstrap Framework
Το Bootstrap είναι το πιο ευρέως χρησιμοποιούμενο πλαίσιο σε ολόκληρο τον κόσμο, ξεκίνησε το 2011 από τους Mark Otto και Jacob Thornton.
- Το Bootstrap μας παρέχει μια ποικιλία κλάσεων CSS - CSS classes που μας βοηθούν στην υλοποίηση του σχεδιασμού του ιστοτόπου μας.
- Επίσης, προσφέρει έτοιμα συστατικά - ready-made web components (π.χ. καρουσέλ - carousel, γραμμή πλοήγησης - navigation bar, ακορντεόν - accordion) που μας βοηθούν να δημιουργήσουμε λειτουργικούς, διαδραστικούς και σύγχρονους ιστότοπους.
- Το Bootstrap υποστηρίζει επίσης "συνεπή τυπογραφία - consistent typography", η οποία είναι η συνεπής δομή του κειμένου στην ιστοσελίδα.
- Φυσικά, εκτός από τα παραπάνω, το bootstrap έχει σχεδιαστεί για να παρέχει responsive, mobile-first websites!
Javascript frameworks
Υπάρχουν πολύ δημοφιλή Πλαίσια JavaScript. Μεταξύ αυτών, αυτό που είναι συνεχώς στην κορυφή της λίστας είναι το πλαίσιο Bootstrap.
Το Bootstrap χρησιμοποιεί δύο κύριες βιβλιοθήκες για τα συστατικά του. Αυτές οι βιβλιοθήκες είναι οι Tether και jQuery.
Το Tether είναι μια βιβλιοθήκη JavaScript που εστιάζει στην τοποθέτηση διαφόρων στοιχείων σε μια ιστοσελίδα. Το Bootstrap χρησιμοποιεί αυτήν τη βιβλιοθήκη για να καθορίσει τη θέση των διαφορετικών στοιχείων. (Στη νέα έκδοση του tether έχει αντικατασταθεί από το Popper.js).
Το jQuery είναι μια πολύ ισχυρή βιβλιοθήκη. Χρησιμοποιώντας αυτό, μπορείτε να κάνετε με μερικές γραμμές κώδικα, πράγματα που διαφορετικά χρειάζονται πολύ χρόνο και γραμμές. Το Bootstrap χρησιμοποιεί αυτήν τη βιβλιοθήκη για να δημιουργήσει τα διάφορα πρόσθετα JavaScript (Modals, Popover κ.λπ.).