Front-end Web Developer

I am a Mid Front-end Web Developer and IT Trainer

Bootstrap Design 2

Categories
Δεξιότητες HTML, CSS, Bootstrap framework
Εργαλείο ανάπτυξης Notepad++, Sublime

Σχετικά

Το Bootstrap Design 2 είναι ένα ακόμα έργο βασισμένο στο bootstrap framework ως εφαρμογή στο web design.

 

Προέλευση του bootstrap design 2

Αυτό το σχέδιο είναι το τελικό έργο ενός εκπαιδευτικού προγράμματος, εισαγωγή στο html & css, από τον δικτυακό τόπο udacity.com. Το έργο αυτό είναι αρκετά λιτό με εικονικό περιεχόμενο. Αριστερά αποτελείται από μια εικόνα και μια λίστα με μενού επιλογών, ενώ δεξιά υπάρχει ένα κομμάτι από το κλασικό κείμενο lorem ipsum.

Η ιδιαιτερότητα αυτού το έργου είναι ότι χρησιμοποιήθηκε μια εικόνα η οποία στήθηκε στο παρασκήνιο της σελίδας. Στην συνέχεια, πάνω σε αυτή την εικόνα σχεδιάστηκε η σελίδα.

 

Web Development τεχνολογίες

HTML και CSS

Δύο βασικές web τεχνολογίες χρησιμοποιήθηκαν στο Bootstrap Design 2. Η HTML (Hyper Text Markup Language) και τα CSS (Cascading Style Sheets). Αυτές οι δύο τεχνολογίες είναι κώδικας ο οποίος μεταφράζεται σε οπτικό υλικό από τον φυλλομετρητή ο οποίος ανοίγει την ιστοσελίδα την οποία επισκεπτόμαστε. Η HTML καθορίζει την διάρθρωση της σελίδας, ενώ τα CSS την εμφάνιση της.

 

Bootstrap framework

Το bootstrap είναι ένα πλαίσιο εργασίας, framework, το οποίο χρησιμοποιεί τις παραπάνω τεχνολογίες. Αποτελείται από έτοιμα κομμάτια κώδικα συγκεκριμένης λειτουργίας το κάθε ένα. Η λειτουργικότητα του κάθε κομματιού είναι παραμετροποιήσημη επιτρέποντας στον developer να δίνει την επιθυμητή λειτουργικότητα.

Πως υλοποιήθηκε

Για την υλοποίηση του bootstrap design 2 χρησιμοποιήθηκε μια εικόνα ως mockup. Η εικόνα αυτή τοποθετήθηκε ως εικόνα παρασκηνίου στην σελίδα. Στην συνέχεια έγινε η υλοποίηση της πάνω στο σχέδιο χωρίζοντας την σελίδα σε κουτιά, όπως στο bootstrap design 1. Η εικόνα έχει διαστάσεις 1024 pixels Χ 885 pixels, συνεπώς το αρχικό πλάτος της σελίδας ήταν 1024 προκειμένου να γίνει ακριβώς όπως στο αρχικό σχέδιο.

Έτσι λοιπόν, υπάρχει ένα κουτί container το οποίο αποτελείται από δύο γραμμές, rows. Η μια περιέχει τον τίτλο και έχει πλήρες πλάτος. Η δεύτερη γραμμή περιέχει 2 στήλες 40% και 60% του πλάτους της σελίδας. Η αριστερή στήλη περιέχει μια εικόνα και το εικονικό μενού επιλογών, ενώ η δεξιά το περιεχόμενο.

Στα πλαίσια της χρήσης του bootstrap ορίστηκε η δομή και η διαδραστηκότητα της σελίδας σε σχέση με το πλάτος του φυλλομετρητή, δηλαδή το responsiveness. Έτσι, σε στενές οθόνες βλέπουμε ότι η δεξιά στήλη πηγαίνει κάτω από την αριστερή. Για να δοθεί η τελική εμφάνιση, σύμφωνα με το mockup, χρησιμοποιήθηκε ένα main.css αρχείο με κώδικα css διακοσμώντας την σελίδα όπως το πορτοκαλί των τίτλων και το γκρι των γραμμάτων.

 

Κλείνοντας με το bootstrap design 2

Αυτό το απλό έργο είναι ακόμα ένα παράδειγμα αφ’ ενός της χρήσης του bootstrap framework και αφ’ ετέρου της βελτιστοποίησης της εμφάνισης του αποτελέσματος με χρήση custom css κώδικα.