Πώς να φτιάξετε έναν κομψό και απλό ιστότοπο με βήματα 4: 7

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:34

Ο σκοπός αυτού του Instructable είναι να δώσει στους εξοικειωμένους με τον προγραμματισμό - HTML ή αλλιώς - μια απλή εισαγωγή στη δημιουργία ενός online χαρτοφυλακίου με το Bootstrap 4. Θα σας καθοδηγήσω στην αρχική ρύθμιση του ιστότοπου, πώς να δημιουργήσετε μερικά διαφορετικά μπλοκ περιεχομένου, και μερικά προβλήματα που μπορεί να αντιμετωπίσετε.

Το χαρτοφυλάκιο χωρίζεται σε μια σειρά από μικρότερα βήματα για να το κάνετε πιο εύχρηστο: πλαίσιο HTML, πλαίσιο CSS, πλαίσιο Javascript, γραμμή πλοήγησης και την αρχική σελίδα (με μπλοκ περιεχομένου).

Εάν οι εξηγήσεις μου για κάτι εξακολουθούν να σας μπερδεύουν, μη διστάσετε να αφήσετε ένα σχόλιο με τις ερωτήσεις, τις προτάσεις σας ή να google το στοιχείο για το οποίο είστε μπερδεμένοι. Υπάρχουν πολλοί πόροι που διατίθενται για προγραμματισμό ιστότοπων και Bootstrap.

Σημείωση: Αυτός ο οδηγός δεν είναι ολοκληρωμένος και δεν πρέπει να χρησιμοποιείται ως υποκατάστατο για να μάθετε πώς να προγραμματίζετε σε HTML, CSS ή Javascript.

Απαιτούμενοι πόροι

• Bootstrap 4
• jQuery 3.3.1

Προαιρετικοί πόροι

• FontAwesome
• Γραμματοσειρές Google
• highlight.js

Εάν θέλετε να μεταβείτε στο πλήρες παράδειγμα ή να ρίξετε μια ματιά στο αποθετήριο:

• Πλήρες Παράδειγμα
• Αποθήκη

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

Βήμα 1: Ρύθμιση

Ρύθμιση φακέλου

1. Δημιουργήστε ένα φάκελο κάπου όπου μπορείτε να αποθηκεύσετε όλα όσα πρόκειται να κατεβάσουμε. Αυτός θα είναι ο βασικός σας κατάλογος για το χαρτοφυλάκιο.
2. Δημιουργήστε έναν φάκελο μέσα σε αυτόν με το όνομα "bootstrap"
3. Δημιουργήστε έναν άλλο φάκελο μέσα στο φάκελο ρίζας χαρτοφυλακίου σας που ονομάζεται "jquery"

Φάκελος χαρτοφυλακίου

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Επισκεφθείτε τον ιστότοπό τους και κάντε κλικ στο κουμπί "Λήψη" κάτω από την ενότητα "Compiled CSS and JS".
2. Αποθηκεύστε το αρχείο.zip στο φάκελο "Λήψεις" ή σε άλλη βολική τοποθεσία.
3. Ανοίξτε το αρχείο.zip και εξαγάγετε τους φακέλους "css" και "js" στο φάκελο "bootstrap" που δημιουργήσατε νωρίτερα.

jQuery

1. Επισκεφτείτε τον ιστότοπό τους και κατεβάστε το "μη συμπιεσμένο, jQuery ανάπτυξης 3.3.1"
2. Αποθηκεύστε αυτό το αρχείο στο φάκελο "jquery" που δημιουργήσατε νωρίτερα.

Όλα τα πλαίσια είναι τώρα έτοιμα για την έναρξη της εργασίας στο πραγματικό χαρτοφυλάκιο.

Βήμα 2: Πλαίσιο HTML (index.html)

Το όνομα σου

Αυτό το πλαίσιο δεν είναι τίποτα υπερβολικά περίπλοκο, αλλά θέλω να εξηγήσω τους γενικούς σκοπούς της εγκατάστασης.

Bootstrap JS After jQuery

Φαίνεται ότι υπάρχει κάποια αλληλεπικάλυψη μεταξύ του αρχείου Javascript του Bootstrap και του jQuery. Δεν έκανα δοκιμή για να δω πόσο εκτεταμένη είναι αυτή η επικάλυψη, αλλά ένα παράδειγμα είναι η αναπτυσσόμενη λειτουργικότητα που χρησιμοποιώ στη γραμμή πλοήγησης. Εάν φορτώσετε πρώτα στο Bootstrap, το αναπτυσσόμενο κουμπί δεν λειτουργεί.

FontAwesome

Εάν έχετε κάνει οποιαδήποτε ανάπτυξη ιστού, πιθανότατα γνωρίζετε τι είναι το FontAwesome. Ωστόσο, αν δεν συμβαίνει αυτό, είναι ένα σύνολο εικονιδίων που περιλαμβάνει μια εργαλειοθήκη για επιπλέον προσαρμογή. Είναι απίστευτα χρήσιμο αν είστε σαν εμένα και δεν έχετε απολύτως κανένα καλλιτεχνικό ταλέντο.

hightlight.js

Αυτό το πλαίσιο επιτρέπει τη δυναμική επισήμανση κώδικα σε ιστοσελίδες. Μπορείτε να το εισαγάγετε όπως και τα υπόλοιπα πλαίσια που χρησιμοποιώ εάν χρησιμοποιείτε μόνο κοινές γλώσσες προγραμματισμού, αλλά υπάρχει επίσης μια επιλογή για λήψη ενός προσαρμοσμένου συνόλου γλωσσών. Επέλεξα την τελευταία επιλογή λόγω μερικών μακροεντολών και γλωσσών ini, αλλά εξαρτάται αποκλειστικά από εσάς.

Σημείωση: Να γνωρίζετε τα μέρη στα οποία χρησιμοποιώ σκληρούς κωδικοποιημένους συνδέσμους για αρχεία όπως τα δύο εικονίδια και το highlight.js. Επίσης, επειδή απαιτούνται μόνο Bootstrap και jQuery, μη διστάσετε να προσθέσετε ή να καταργήσετε τυχόν άλλα πλαίσια. Εάν αφαιρέσετε κάποιο, θυμηθείτε να αφαιρέσετε τις γραμμές κώδικα που αντιστοιχούν αργότερα.

Βήμα 3: Πλαίσιο CSS (style.css)

/ * * Ας ελπίσουμε ότι η τόνωση του χρώματος bg σε γκρι και η αλλαγή του στυλ γραμματοσειράς καθιστά τον ιστότοπο ευκολότερο στην κατανάλωση */ body {background: gray; font-family: 'Open Sans', sans-serif; }

/*

* Αυτό διασφαλίζει ότι η γραμμή πλοήγησης βρίσκεται πάνω από όλα */ nav {z-index: 9999; }

/*

* Αυτό θα κάνει το κείμενο της παραγράφου πιο ευανάγνωστο */ p {font-size: 18px; margin-top: 5px; margin-bottom: 5px; }

/*

* Αυτό διασφαλίζει ότι όλα τα μπλοκ κώδικα είναι μορφοποιημένα σωστά */ code {text-align: left; }

/*

* Δεν θέλω οι λίστες να έχουν τις κουκκίδες */ li {list-style-type: none; }

/*

* Οι σύνδεσμοι είναι μπλε από προεπιλογή και θέλω να ταιριάζουν με το στυλ του Bootstrap */ li a, a {χρώμα: λευκό; }

/*

* Συνδέω μια ετικέτα κλάσης σε ένα div που περιέχει τη γραμμή πλοήγησης για να βεβαιωθώ ότι το περιεχόμενο δεν επικαλύπτεται */.navFix {padding-bottom: 70px; }

/*

* Το αυξημένο μέγεθος εκτείνεται στη γραμμή πλοήγησης */.social-media {font-size: 1.3em; }

/*

* Το προεπιλεγμένο χρώμα επισήμανσης για τους αναπτυσσόμενους συνδέσμους είναι λευκό */.dropdown-menu a: hover {background-color: #212529; }

/*

* Force divs που δείχνουν pdf σε ένα συγκεκριμένο ύψος */.pdfFill {ύψος: 45rem; }

/*

* Προσθέστε κάποια απόσταση μεταξύ των κουμπιών και των μπλοκ κωδικών */.codeStyle {padding-top: 30px; }

Έχω συμπεριλάβει τα στοιχεία CSS που βασίζονται σε περιεχόμενο σε αυτό το πλαίσιο για να προσπαθήσω να σας εξοικονομήσω λίγο αργότερα. Είναι όλα πολύ απλά και είναι ως επί το πλείστον αλλαγές στην ποιότητα ζωής που διευκολύνουν την αλληλεπίδραση με το χαρτοφυλάκιο για τους αναγνώστες.

nav z-index

Έχω πολύ περιορισμένη εμπειρία ανάπτυξης ιστοσελίδων, οπότε δεν είμαι σίγουρος αν αυτό είναι ένα συνηθισμένο πρόβλημα κατά την εφαρμογή της γραμμής πλοήγησης του Bootstrap, αλλά χωρίς καμία προδιαγραφή προσανατολισμού από εμπρός προς τα πίσω, η γραμμή πλοήγησης θα εμφανίζεται πραγματικά σε άλλο περιεχόμενο, όπως Κάρτες Bootstrap. Αυτό είναι πιο αισθητό με τη πτυσσόμενη γραμμή πλοήγησης, αλλά συμπεριέλαβα την αλλαγή του ευρετηρίου ούτως ή άλλως για ασφάλεια.

ευθυγράμμιση κώδικα

Δεδομένου ότι χρησιμοποιώ συνήθως τις τάξεις "justify-content-center" και "text-center" του Bootstrap για να ευθυγραμμίσω τα στοιχεία, δεν θέλω ο κώδικάς μου να κληρονομήσει αυτήν την κεντρική στοίχιση. Αυτό διορθώνεται εύκολα αντικαθιστώντας τυχόν αλλαγές ευθυγράμμισης και κάνοντας ετικέτες κώδικα αριστερά: αυτό διατηρεί το διάστημα των καρτελών στον κώδικα.

επένδυση navFix

Όταν η γραμμή πλοήγησης του Bootstrap έχει κολλήσει στο επάνω μέρος της σελίδας, το περιεχόμενο θα φορτωθεί κάτω από αυτήν. Πιστεύω ότι αυτό συμβαίνει επειδή η γραμμή πλοήγησης είναι πραγματικά κολλημένη στο πάνω μέρος της θύρας προβολής αντί για την ίδια τη σελίδα. Ανεξάρτητα από αυτό, αυτό διορθώνεται αυξάνοντας το διάστημα μεταξύ της γραμμής πλοήγησης και του υπόλοιπου περιεχομένου.

pdf ύψος

Το προεπιλεγμένο ύψος των αρχείων pdf είναι απίστευτα μικρό. Είναι ουσιαστικά αδιάβαστο, οπότε άλλαξα ύψος για να προσπαθήσω να δώσω αρκετό χώρο για περίπου μία σελίδα τη φορά.

Βήμα 4: Javascript Frame (javascript.js)

/ * * Αυτό αναζητά οποιοδήποτε στοιχείο με την κλάση "εναλλαγή" και είτε το αποκρύπτει είτε το αποκρύπτει */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

για (var i = 0; i <divArray.length; i ++) {divArray .style.display = "κανένα"; }

divID.style.display = "μπλοκ";

}

επιστροφή ψευδής?

}

/*

* Κωδικός που πρέπει να εκτελεστεί με συγκεκριμένη σειρά */ $ (έγγραφο). Ήδη (λειτουργία () {/ * * Φόρτωση περιεχομένου από αρχεία */

/*

* Επιβάλλετε μια μικρή καθυστέρηση στη φόρτωση των δεδομένων */ setTimeout (λειτουργία () {/ * * Επισημάνετε όλο τον κώδικα που έχει φορτωθεί στο */ $ («προκώδικας»). Το καθένα (λειτουργία (i, μπλοκ) { hljs.highlightBlock (μπλοκ);});}, 1000); });

Για να διευκολύνω την τροποποίηση και τη διαχείριση αυτού του χαρτοφυλακίου, αποφάσισα να χρησιμοποιήσω μια μορφή μιας σελίδας. Διατηρεί τα πάντα τοπικά ως επί το πλείστον και κάνει το περιεχόμενο να φορτώνεται γρηγορότερα.

toggleSection

Χρησιμοποίησα τιμές κλάσης για τη διαχείριση του περιεχομένου που πρέπει να εμφανίζεται ή να αποκρύπτεται, επειδή τις περισσότερες φορές χρησιμοποιώ divs για να διαχωρίσω και να ομαδοποιήσω πολλά στοιχεία μαζί. Μπορείτε να το χρησιμοποιήσετε για να ομαδοποιήσετε επίσης μεμονωμένα κουμπιά, αλλά απαιτεί επιπλέον έλεγχο πριν ρυθμίσετε την οθόνη "αποκλεισμού" για να μην εμφανίζεται περιεχόμενο.

φόρτωση εγγράφου

Το συμπεριέλαβα επειδή είναι γενικά ακατάστατο να συμπεριλάβετε έναν σωρό ανεξάρτητο κώδικα προγραμματισμού σε κανονικά αρχεία HTML. Μπορούμε να χρησιμοποιήσουμε αυτήν τη μέθοδο δυναμικής επισήμανσης για να αναγκάσουμε τη διαδικασία να πραγματοποιηθεί αφού φορτώσουμε περιεχόμενο από άλλα αρχεία.

$ ('#mq2-intro'). load ("files/tutorials/mq2/mq2-intro/content.html");

Αυτό είναι ένα παράδειγμα του τρόπου φόρτωσης περιεχομένου.

Βήμα 5: Γραμμή πλοήγησης

Αρχικά

• Σπίτι
• Σχετικά με μένα
• Εκπαιδευτικά Έργα
• Επικοινώνησε μαζί μου

• Η γραμμή πλοήγησης είναι το πιο πολύπλοκο στοιχείο από όλα τα χαρτοφυλάκια. Ο απόλυτος συνδυασμός τάξεων το κάνει σαν ένα παζλ που απαιτεί να κοιτάζετε συνεχώς το βιβλίο κανόνων.

  Λειτουργικότητα Bootstrap

  Το Bootstrap λειτουργεί ουσιαστικά μέσω διαφορετικών τιμών κλάσης. Κοιτάζοντας το ίδιο το στοιχείο "nav", δεν είναι πολύ δύσκολο να διαπιστώσετε τον σκοπό κάθε τάξης:

  Το "navbar" μας είναι η επιλογή "md" (μεσαία), ικανή "επέκταση", "σκοτεινή". Και το «στερεώσαμε» στην «κορυφή». Φαίνεται μπερδεμένο επειδή είναι ένα μπέρδεμα αναγνωριστικών, αλλά αν τα δεις ως επίθετα για το στοιχείο, γίνεται πολύ πιο εύκολο να καταλάβεις τι συμβαίνει.

  Μάρκα

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

  Σημείωση: Οι ετικέτες "i" είναι στην πραγματικότητα τα εικονίδια FontAwesome και λαμβάνετε αυτές τις ετικέτες από τη σελίδα οποιουδήποτε εικονιδίου.

  Toggler/Πτυσσόμενο κουμπί (Κινητό)

  Αυτό το κουμπί εμφανίζεται μόνο σε κινητές συσκευές. Αλλά επειδή συμπεριλάβαμε στη δήλωση "nav" ότι η γραμμή πλοήγησης πρέπει να είναι επεκτάσιμη, αυτά τα στοιχεία συνδέονται μεταξύ τους μέσω των αναγνωριστικών τους και των αναγνωριστικών "εναλλαγής δεδομένων".

  Σύνδεσμοι Navbar (αριστερή πλευρά)

  Αυτοί οι σύνδεσμοι εξαρτώνται πλήρως από τις κατηγορίες που χρειάζεστε για το χαρτοφυλάκιό σας. Έβαλα μερικά από τα τυπικά παραδείγματα ως αφετηρία, αλλά κανείς δεν είναι ο ίδιος. Mightσως να μην χρειάζεστε μια ενότητα "Σεμινάρια" επειδή εστιάζετε στη δημιουργία γλυπτών τέχνης. Κάθε στοιχείο "li" μπορεί να αντιγραφεί και να επικολληθεί, οπότε μόλις καταλάβετε τι χρειάζεστε, είναι εύκολο να ρυθμίσετε την πλοήγηση.

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

  Σύνδεσμοι Navbar (Δεξιά πλευρά)

  Δίνοντας τη σωστή λίστα συνδέσμων στην κατηγορία "ml-auto", το Bootstrap χωρίζει ομοιόμορφα τις δύο λίστες ομοιόμορφα. Αυτό δημιουργεί την καθαρή αριστερή και δεξιά διαίρεση. Αποφάσισα να χρησιμοποιήσω αυτόν τον χώρο για συνδέσμους στα μέσα κοινωνικής δικτύωσης επειδή είναι μια πολύ κοινή και δημοφιλής μέθοδος για να αυξήσετε την παρουσία σας. Εάν αυτό δεν είναι σχετικό, μπορείτε να καταργήσετε αυτούς τους συνδέσμους για μια γραμμή αναζήτησης, πληροφορίες σύνδεσης κλπ. Αλλά θυμηθείτε ότι είναι σημαντικός χώρος για χρήση. Και παρόμοια με τους συνδέσμους της γραμμής πλοήγησης στην αριστερή πλευρά, μπορείτε επίσης να αντιγράψετε και να επικολλήσετε αυτά.

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

  Βήμα 6: Αρχική σελίδα

  

  

  

  Το όνομα σου

  Προγραμματιστής Συγγραφέας Gamer

  Αυτή η ενότητα και οι επόμενες σελίδες περιεχομένου σας θα εξαρτηθούν από το τι θέλετε να βάλετε στο χαρτοφυλάκιό σας. Προφανώς δεν μπορώ να αντιμετωπίσω κάθε τύπο περιεχομένου, αλλά προσπάθησα να συμπεριλάβω εικόνες, pdf, βίντεο, μπλοκ κώδικα, μερικές από τις τυπικές συμπεράσματα.

  Μορφή πίνακα

  Η αρχική σελίδα έχει ρυθμιστεί για να λειτουργεί ως πίνακας. Δεν θα βασίζομαι στις εκπληκτικές δεξιότητες σχεδιασμού μου για να δημιουργήσω το τελικό σας προϊόν, αλλά πρόσθεσα τις διαφορετικές παραλλαγές συνδυασμών γραμμών και στηλών για να δείξω ότι είναι πολύ δυναμικό και ευέλικτο. Μπορείτε να δημιουργήσετε 3 σειρές και 2 στήλες για να έχετε κουμπιά στα αριστερά και περιεχόμενο στα δεξιά ή μπορείτε να κάνετε κάτι εντελώς διαφορετικό. Χρειάζεται μόνο ένας μικρός πειραματισμός.

  Κουμπιά

  Αυτά λειτουργούν ουσιαστικά όπως τα κανονικά κουμπιά. Η μόνη πραγματική ενσωμάτωση Bootstrap εδώ πηγάζει από το στυλ που ταιριάζει με το υπόλοιπο θέμα. Διαφορετικά, δημιουργήστε όσα περισσότερα κουμπιά χρειάζεστε για να προβάλλετε το περιεχόμενό σας και, στη συνέχεια, φροντίστε να αντιστοιχίσετε τους συνδέσμους href με τα αναγνωριστικά για τα divs.

  Περιεχόμενο κώδικα προγραμματισμού

  Οι ετικέτες "κώδικας" είναι οι προεπιλεγμένες ετικέτες που χρησιμοποιεί το highlight.js για τη διαχείριση όλης της επισήμανσης. Εάν θυμάστε από το αρχείο javascript.js, υπάρχει μια ενότητα για φόρτωση περιεχομένου από άλλα αρχεία.

  $ ('#home-programmer-macro'). load ("files/home/watchLoot.mac");

  • Το πρώτο μέρος αυτού αναζητά το "id" του στοιχείου στο οποίο θέλετε να εισαγάγετε το περιεχόμενο.
  • Το δεύτερο μέρος είναι η τοποθεσία του αρχείου στο οποίο θέλετε να φορτώσετε.

  Σημείωση: Το περιεχόμενο δεν θα φορτωθεί πλήρως εντελώς επειδή υπάρχει μεγάλη πιθανότητα να επεξεργαστείτε αυτήν την ιστοσελίδα τοπικά αντί σε διακομιστή. Αυτό μπορεί να αντιμετωπιστεί με πολλούς διαφορετικούς τρόπους τους οποίους θα εξετάσω στο τέλος του Instructable.

  Βίντεο YouTube

  Το ενσωματωμένο "iframe" προέρχεται στην πραγματικότητα από το ίδιο το YouTube. Δεν θα εξηγήσω εκτενώς πώς να τα αποκτήσετε, αλλά όταν πηγαίνετε στο "Κοινή χρήση" ενός βίντεο, υπάρχει μια επιλογή "Ενσωμάτωση" που θα σας βοηθήσει να δημιουργήσετε τον απαραίτητο κώδικα για να εμφανίσετε το βίντεό σας στην ιστοσελίδα.

  Βήμα 7: Κοιτάζοντας μπροστά

  Υπάρχει μια πολύ καλή πιθανότητα να μην κάλυψα κάποιο στοιχείο ή τύπο περιεχομένου που θέλετε να συμπεριλάβετε στον ιστότοπό σας. Ευτυχώς υπάρχουν πολλές καλές επιλογές για να κάνετε τα επόμενα βήματα μόνοι σας.

  Τεκμηρίωση του Bootstrap

  Η τεκμηρίωση του Bootstrap είναι ένα εξαιρετικό μέρος για να ξεκινήσετε αν ψάχνετε για στοιχεία που είναι προ-προγραμματισμένα και έχουν παραδείγματα που μπορείτε να αντιγράψετε και να επικολλήσετε στο χαρτοφυλάκιό σας για να πειραματιστείτε. Δεν άγγιξα Κάρτες, Καρουζέλ ή Φόρμες. Συνιστώ ανεπιφύλακτα να δείτε την ενότητα "Στοιχεία" για να δείτε τις επιλογές.

  W3Schools

  Το W3Schools είναι ένας υπέροχος ιστότοπος όπου μπορείτε να μάθετε σχεδόν οτιδήποτε σχετίζεται με τον προγραμματισμό και την ανάπτυξη ιστού. Είναι πολύ πιο έξυπνοι από μένα και καλύπτουν σχεδόν κάθε λειτουργικότητα HTML, CSS και Javascript που μπορείτε να σκεφτείτε.

  Φιλοξενία του χαρτοφυλακίου σας

  Αυτό το Instructable σας διδάσκει πώς να φιλοξενείτε τον ιστότοπό σας σε μερικές διαφορετικές πλατφόρμες. Αυτά είναι τα βήματα που πρέπει να ακολουθήσετε εάν θέλετε να μπορείτε να δείχνετε στο χαρτοφυλάκιό σας άτομα, στρατολόγους κ.λπ.

  Πειραματιστείτε και διασκεδάστε

  Ο μόνος τρόπος για να δημιουργήσετε ένα υπέροχο χαρτοφυλάκιο είναι να πειραματιστείτε και να δοκιμάσετε οτιδήποτε και οτιδήποτε φαίνεται ενδιαφέρον. Πολλά φανταχτερά χαρτοφυλάκια σχεδιασμού και ιστότοποι χρησιμοποιούν υπέροχα εφέ μετάβασης ή δυναμικά υπόβαθρα, αλλά κανένα από αυτά δεν ήταν προκατασκευασμένο.