Front-end Web Developer

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

Bootstrap Design 1

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

Σχετικά με το Bootstrap Design 1

bootstrap design 1Το Bootstrap Design 1 είναι ένα έργο το οποίο ανήκει στην κατηγορία του web design, της σχεδίασης δηλαδή των ιστοσελίδων. Χρησιμοποιήθηκε ένα έτοιμο πλαίσιο εργασίας, framework δηλαδή, προσαρμοσμένο για κάθε μέγεθος οθόνης.

Πως προέκυψε και τι παρουσιάζει

Το σχέδιο αυτό προέρχεται από ένα online πρόγραμμα σχετικά με το web design το οποίο παρέχεται από τον δικτυακό τόπο udacity.com. Στα πλαίσια αυτού του προγράμματος υπάρχουν διάφορα σχέδια όπως αυτό.

Το παρόν σχέδιο δείχνει το portfolio ενός εικονικού σχεδιαστή ιστοσελίδων. Υπάρχει μια εικόνα ενδεικτική και ακολουθούν τρία χαρακτηριστικά έργα. Κάθε ένα από αυτά έχει μια εικόνα και έναν σύνδεσμο στο αντίστοιχο έργο. Για την υλοποίηση του έργου αυτού, χρησιμοποιήθηκε ένα pdf αρχείο με το σχετικό σχέδιο.

Τι τεχνολογίες χρησιμοποιήθηκαν

HTML και CSS

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

Bootstrap

Οι προ-αναφερθείσες τεχνολογίες μπορούν να χρησιμοποιηθούν από το 0 φτιάχνοντας κάτι ολοκληρωμένο, ή μέσα από πλαίσια εργασίας, frameworks. Ένα framework είναι μια συλλογή από έτοιμα κομμάτια κώδικα, κάθε ένα από τα οποία εκτελεί μια λειτουργία. Χρησιμοποιώντας ένα framework συγκεντρώνουμε τα επιθυμητά κομμάτια κώδικα, και μεταβάλλοντας τα φτιάχνουμε το επιθυμητό αποτέλεσμα. Εύλογα μπορούμε να συμπεράνουμε ότι το bootstrap είναι ένα framework των τεχνολογιών αυτών.

 

Πως κατασκευάστηκε

Στο web design όταν βλέπουμε ένα σχέδιο δεν το βλέπουμε σαν μια ολότητα αλλά ως μεμονωμένα στοιχεία, δηλαδή ως κουτιά. Με το σκεπτικό αυτό το έργο, bootstrap design 1, μπορεί να χωριστεί στα εξής στοιχεία/κουτιά:

  • Την επικεφαλίδα η οποία αποτελείται:
    • Από το λογότυπο αριστερά,
    • Τα στοιχεία του δημιουργού στα δεξιά
  • Την οριζόντια γραμμή,
  • Την μεγάλη εικόνα
  • Τα έργα του δημιουργού τα οποία αποτελούνται από τα:
    • Εικόνα, τίτλος, url έργου,
    • Εικόνα, τίτλος, url έργου,
    • Εικόνα, τίτλος, url έργου

Στην αρχή λοιπόν δημιουργήθηκε η παραπάνω δομή με τα αντίστοιχα κομμάτια κώδικα του bootstrap. Στην συνέχεια προστέθηκε επιπλέον κώδικας css προκειμένου να ταιριάξει όσο γίνεται με το αρχικό σχέδιο.

 

Τελειώνοντας με το bootstrap design 1

Κλείνοντας με το έργο αυτό, μπορούμε να δούμε τόσο την δημιουργική δύναμη των html & css τεχνολογιών, όσο και την χρηστικότητα των frameworks όπως του bootstrap. Η χρήση ενός framework σε καμιά περίπτωση δεν αντικαθιστά την δυνατότητα χρήσης των παραπάνω τεχνολογιών, αλλά βοηθάει στην παραγωγικότητα αφού δεν χρειάζεται κάποιος να ξεκινήσει από το μηδέν.