Ήρθε η ώρα να φτιάξετε μια ευχετήρια κάρτα με JavaScript!
Το μόνο που χρειάζεστε είναι ένας υπολογιστής με ένα σύγχρονο
πρόγραμμα περιήγησης και τη δημιουργικότητά σας! Οι κάμερες web
συνιστώνται αλλά δεν απαιτούνται.
Η JavaScript είναι η γλώσσα προγραμματισμού που
χρησιμοποιείται για να κάνει τους ιστότοπους διαδραστικούς. Για
παράδειγμα, όταν πατάτε «παύση» ή αλλάζετε την ένταση σε ένα
βίντεο YouTube, αυτό γίνεται μέσω JavaScript. Ετοιμαστείτε να
δημιουργήσετε τα δικά σας βίντεο στον ιστό αντί να τα
παρακολουθείτε.
Ή πατήστε στο κουμπί "Περιήγηση" ή "Μεταφόρτωση" στα δεξιά ή κάντε κλικ σε ένα από τα δείγματα βίντεο!
Το πρώτο πράγμα που πρόκειται να κάνετε στη ευχετήρια κάρτα σας
είναι να δημιουργήσετε το δικό σας φίλτρο.
Τα φίλτρα βίντεο και φωτογραφιών του Instagram δημιουργούνται με
λογισμικό υπολογιστή από προγραμματιστές! Σήμερα θα μάθετε πώς να
κωδικοποιείτε τα δικά σας φίλτρα βίντεο, γραφικά και ήχο!
Εμπρός σύρετε πάνω από ένα πράσινο μπλοκ φίλτρου από την ενότητα "εφέ" κάτω στην ενότητα "κώδικας" που βρίσκεται στα δεξιά. Δοκιμάστε 'blur' ("θάμπωμα"), 'tint' ("απόχρωση"), "pixelate", 'vignette' ("βινιέτα") ή 'exposure' ("έκθεση"). Φροντίστε να το σύρετε στο κέντρο.
Τώρα έχετε εφαρμόσει ένα φίλτρο στο βίντεό σας.
Δοκιμάστε να αλλάξετε τον αριθμό 50 σε κάτι άλλο. Δείτε τι συμβαίνει!
Ο αριθμός 50 που αλλάξατε λέγεται τιμή.
Η τιμή σας επιτρέπει να ελέγξετε την ένταση του φίλτρου σας.
Όταν αλλάζετε την τιμή, καθορίζετε την ένταση του φίλτρου που
εφαρμόζεται στο βίντεο. Για παράδειγμα, όταν αλλάζεται την τιμή
που αφορά το φίλτρο θαμπώματος (blur),
αυξάνεται το θάμπωμα όσο μεγαλύτερος είναι ο αριθμός που
πληκτρολογείτε.
Σύρετε τώρα ένα επιπλέον πράσινο μπλοκ φίλτρου από την ενότητα "εφέ" κάτω στην ενότητα "κώδικας". Δοκιμάστε το 'tint' ("απόχρωση").
Αλλάξτε την τιμή του δεύτερου φίλτρου.
Τι συμβαίνει όταν την αλλάξετε σε ένα πολύ μεγάλο νούμερο;
Το φίλτρο απόχρωσης (tint) σας επιτρέπει να καθορίσετε και το χρώμα! Όταν θέτουμε τιμή για το χρώμα πρέπει να την έχουμε μέσα σε εισαγωγικά "". Δοκιμάστε να αλλάξετε την τιμή "red" ("κόκκινο") σε "pink" ("ροζ").
Τι συνέβη όταν αυξήσατε την τιμή για το φίλτρο;
Έχετε δίκιο, η αύξηση της τιμής καθιστά το φίλτρο του βίντεο πιο
έντονο και ορατό στο μάτι!
Επιλέξτε τώρα ένα πράσινο μπλοκ φίλτρου από
αυτά που δεν έχετε ακόμα σύρει και αφήσει στην ενότητα
"κώδικας". Αντί να το σύρετε, πληκτρολογήστε εσείς τον κώδικα
που νομίζετε ότι χρειάζεται.
Μην ανησυχείτε αν κάνετε λάθος! Αυτός είναι ο μόνος τρόπος για να
μάθετε.
Βεβαιωθείτε ότι γράφετε τον επιπλέον γραμμή κώδικα σε νέα γραμμή.
Μόλις έγραψες την πρώτη σου γραμμή κώδικα!
Συνέχισε προσαρμόζοντας τις τιμές των φίλτρων όπως θέλεις. Στη συνέχεια, πληκτρολογήστε ή σύρετε μερικά
ακόμα φίλτρα βίντεο.
Αν θέλετε να αφαιρέσετε οποιοδήποτε εφέ, μπορείτε να διαγράψετε την αντίστοιχη γραμμή κώδικα.
Το playbackRate σας
επιτρέπει να επιταχύνετε ή να επιβραδύνετε το βίντεό σας
χρησιμοποιώντας μια τιμή.
Ο κώδικας movie.playbackRate = .5;
θα επιβραδύνει το βίντεό σας.
Τι κώδικα θα γράφατε για να επιταχύνετε το βίντεό σας; Δοκιμάστε να τον γράψετε σε μια νέα γραμμή.
Τέλεια! Τι ακριβώς συνέβη όταν πληκτρολογήσατε αυτήν τη γραμμή
κώδικα;
Αυτό που συνέβη είναι ότι αλλάξατε την τιμή του playbackRate.
Η αυξημένη τιμή του playbackRate έκανε το βίντεο να τρέξει πιο γρήγορα. Και το κάνατε με ΚΩΔΙΚΑ!
Τώρα η κάρτα χαιρετισμού σας έχει ένα φίλτρο βίντεο που ορίσατε
μόνοι σας με κώδικα!
Το επόμενο βήμα είναι να το προσωποποιήσετε και με γραφικά!
Κάτω από το βίντεό σας, υπάρχει μια καρτέλα που λέγεται 'Graphics' ('Γραφικά'). Κάντε κλικ πάνω της!
Μπορείτε είτε να ανεβάσετε το δικό σας γραφικό (για παράδειγμα
μια φωτογραφία του σκύλου σας ή ένα λογότυπο που δημιουργήσατε)
είτε να προσθέσετε ένα από τα γραφικά από την καρτέλα "Graphics".
Κάντε κλικ σε ένα γραφικό για να το
επιλέξετε.
Φαίνεται υπέροχο!
Μπορείτε να αλλάξετε πράγματα σχετικά με το γραφικό σας στον
κώδικα που εμφανίστηκε.
Για παράδειγμα, μπορείτε να αλλάξετε το μέγεθός του!
Προσοχή όμως! Αν κάνετε την τιμή πολύ μικρή ή πολύ μεγάλη, μπορεί να μην φαίνεται ή να μην χωράει στην οθόνη.
Δοκιμάστε να αλλάξετε την τιμή που
επηρεάζει το μέγεθος. Προσθέστε την παρακάτω γραμμή κώδικα
my_graphic1.scale = 2;
Έχετε τον έλεγχο!
Πατήστε το κουμπί Next (επόμενο) για να
μάθετε πώς μπορείτε να μετακινήσετε το γραφικό σας δεξιά και
αριστερά.
Το my_graphic1.x είναι μια
συντεταγμένη x!
Οι εικόνες και τα βίντεο μας ζουν σε ένα πλέγμα. Τα προγράμματα
αναγνωρίζουν που ακριβώς βρίσκονται τα πράγματα πάνω στο
πλέγμα χρησιμοποιώντας ένα σύστημα συντεταγμένων (x,y).
Η τιμή αντιστοιχεί στη συγκεκριμένη θέση του γραφικού πάνω στον x
άξονα του βίντεο.
Υπάρχει ολόκληρη επιστήμη πίσω από τις φωτιγραφίες και τα βίντεό
σας!
Το βίντεο είναι ένα πλέγμα σημείων με οριζόντιο άξονα x και
κατακόρυφο y, όπως φαίνεται παρακάτω. Σε κάθε σημείο (x,y)
αντιστοιχεί ένα εικονοστοιχείο (pixel).
Αν το γραφικό σας βρίσκεται στο αριστερό μέρος του βίντεο - τι
θα κάνατε για να το μετακινήσετε στο δεξί μέρος του βίντεο;
Δοκιμάστε το πρώτα στον κώδικά σας για να δείτε τι συμβαίνει
(πειραματιστείτε και διασκεδάστε!)
Θα αυξήσετε την τιμή του my_graphic1.x
για να μετακινήσετε το γραφικό προς τα δεξιά!
Καθώς συνεχίζετε να προγραμματίζετε, αυτός ο τρόπος σκέψης θα
γίνει πιο φυσικός. Απλά συνεχίστε την πρακτική!
Χρησιμοποιήστε αυτά που μάθατε για να προσαρμόσετε το γραφικό
σας.
Τοποθετήστε το όπου θέλετε και κάντε το
ό,τι μέγεθος θέλετε!
Στη συνέχεια, πρόκειται να προσθέσετε το τελευταίο μέρος της
κάρτας σας - κείμενο!
Είναι η ώρα να προσθέσετε το μήνυμά σας στο βίντεο της κάρτας
χαιρετισμού!
Προσέξτε ότι στην ενότητα "effects"
εμφανίστηκε ένα μπλοκ 'κείμενο'. Σύρετέ το στον κώδικα!
Το 'Τext' σάς επιτρέπει να ορίσετε τιμές για τρία πράγματα μέσα
στις παρενθέσεις.
Το πρώτο πράγμα είναι το μήνυμά σας.
Αλλάξτε τις λέξεις "hello" στον κώδικά σας με το μήνυμα που θέλετε να
προσθέσετε στην κάρτα σας! Βεβαιωθείτε ότι το μήνυμα παραμένει
σε εισαγωγικά!
Όπως και με το γραφικό σας, μπορείτε να αλλάξετε τη θέση x και y
του κειμένου.
Οι συντενταγμένες x και y του κειμένου αλλάζουν με τον ίδιο τρόπο
που αλλάχτηκαν οι συντεταγμένες x και y του γραφικού σας!
Το my_text1.x μετακινεί το
κείμενό σας αριστερά και δεξιά, και το my_text1.y
το μετακινεί πάνω και κάτω.
Μετακινήστε το κείμενό σας για να είναι
ακριβώς δίπλα στο γραφικό σας! Δοκιμάστε τιμές για τις θέσεις x
και y για να το κάνετε τέλειο.
Μπορείτε επίσης να αλλάξετε άλλα χαρακτηριστικά του κειμένου,
έτσι ώστε να εμφανίζεται όπως εσείς θέλετε! Συμπεριλαμβανομένου
του χρώματος, του μεγέθους και της γραμματοσειράς.
Πρώτα, αλλάξτε το
χρώμα του κειμένου σας γράφοντας μια νέα γραμμή κώδικα. Δοκιμάστε
να προσθέσετε την γραμμή my_text1.color = "red";
Άλλαξε το χρώμα;
Ήταν δύσκολο! Θυμηθήκατε να βάλετε ένα ερωτηματικό στο τέλος της
γραμμής σας; Πατήσατε αλλαγή γραμμής στο τέλος της γραμμής του
κώδικα; Θυμηθήκατε να βάλετε αυτήν τη γραμμή κώδικα πάνω από τη
γραμμή κώδικα που δημιουργεί το κείμενο;
Χρειάζονται τόσα πράγματα να κάνετε για να δημιουργήσετε ένα καλό
πρόγραμμα!
Τώρα που γνωρίζετε πώς να αλλάξετε το χρώμα, πώς θα αλλάξετε το
μέγεθος; Ποιο μέρος της γραμμής κώδικα θα αλλάξει σε διαφορετική
λέξη;
Θα μοιάζει πολύ με το πώς άλλαξετε το χρώμα σας.
Δοκιμάστε το μόνοι σας πριν πατήσετε
επόμενο, πληκτρολογήστε τον κώδικα που νομίζετε ότι θα αλλάξει
το μέγεθος (size) του κειμένου.
Υπόδειξη: Αποκτήστε πρόσβαση στο μέγεθος με my_text1.size
Υπόδειξη: Αλλάξτε το μέγεθος με τον κώδικα my_text1.size
= 50;
Καλή δουλειά! Θα έπρεπε να έχετε γράψει my_text1.size = 50;
Τέλος, μπορείτε να αλλάξετε τη γραμματοσειρά στην κάρτα
σας πληκτρολογώντας μια νέα γραμμή κώδικα!
Είναι το μήνυμά σας αστείο; Δοκιμάστε να αλλάξετε τη
γραμματοσειρά σας σε my_text1.font =
'Comic Sans MS'. Είναι σοβαρό; Δοκιμάστε 'Times'.
Είναι σχετικό με την τεχνολογία; Ίσως ο κώδικάς σας να μοιάζει με
my_text1.font = "Monospace";
Αλλάξτε τη γραμματοσειρά του μηνύματός σας
τώρα!
Γνωρίζατε ότι μπορείτε να προσθέσετε περισσότερες από μία γραμμή
κειμένου;
Μπορείτε να προσθέσετε όσες γραμμές κειμένου θέλετε!
Προσθέστε μια νέα γραμμή κειμένου γράφοντας
var my_text2 = text("η νέα μου
γραμμή!"); σε μια νέα
γραμμή!
Μπορείτε να κάνετε ΚΑΘΕ γραμμή κειμένου διαφορετική! Πόσο
συναρπαστικό είναι αυτό!
Μπορείτε να αλλάξετε τη νέα γραμμή κειμένου με τον ίδιο τρόπο
όπως την πρώτη γραμμή. Η μόνη διαφορά είναι ότι αντί για my_text1 γράφετε my_text2.
Δοκιμάστε να αλλάξετε το χρώμα του ΔΕΥΤΕΡΟΥ
σας μηνύματος.
Υπόδειξη: Αλλάξτε το χρώμα με my_text2.color
= "red";
Είστε έτοιμοι να προσθέσετε την τελική πινελιά στην κάρτα σας;
Σωστά - μουσική!
Πατήστε την καρτέλα 'Audio' ('Ήχος') για να
δείτε και να επιλέξετε ένα τραγούδι.
Έχετε ανεβάσει την ένταση του ήχου; Κάντε κλίκ στην electronic
(ηλεκτρονική) μουσική. Ωραίος ρυθμός, ε;
Δεν είναι του γούστου σας; Μπορείτε πάντα να αλλάξετε το είδος
της μουσικής!
Αλλάξτε τη μουσική από "electronic"
σε ένα είδος που σας αρέσει περισσότερο. Μπορείτε να την αλλάξετε
σε "dance", "funk", "rock"
ή "retro"!
Αποφασίσατε ότι δεν θέλετε μουσική; Απλά αλλάξτε το είδος σε
"κανένα" - audio("none");
Αυτό ήταν εξαιρετικό! Δεν είναι υπέροχο που η αλλαγή διαφορετικών
τιμών μπορεί να αλλάξει τόσα πολλά πράγματα στον κώδικά σας; Από
την ένταση φίλτρου βίντεο, στο χρώμα του κειμένου, μέχρι το είδος
της μουσικής!
Μόλις δημιουργήσατε μια εκπληκτική κάρτα χαιρετισμού βίντεο με
ΚΩΔΙΚΑ!!! Θα έπρεπε να δώσετε έναν ΜΕΓΑΛΟ μπράβο στον εαυτό σας
για το ό,τι μάθατε τόσα πολλά σε μία ώρα!
Χρησιμοποιήσατε τιμές για να αλλάξετε την ένταση των φίλτρων
βίντεο που εφαρμόσατε στην ταινία σας. Παρείχατε λειτουργίες στην
ταινία που δημιουργήσατε. Προγραμματίσατε γραφικά στις x και y
συντεταγμένες του πλέγματος της ταινίας σας.
Αυτά είναι τα πρώτα σας βήματα σε μια συνεργατική και δημιουργική
περιπέτεια για την κατακτηση μίας από τις πιο ισχυρές γλώσσες
προγραμματισμού για εφαρμογές internet: της JavaScript!
Μάθατε τόσα πολλά σήμερα! Για να τα συνοψίσουμε όλα - εδώ είναι
μια ανασκόπηση του λεξιλογίου:
Μοιραστείτε τις γνώσεις σας με τα αγαπημένα σας πρόσωπα, τους φίλους
σας και τους συμμαθητές σας.
Τώρα δημιουργείτε τεχνολογία αντί να την καταναλώνετε! Υπάρχουν
τόσες πολλές λύσεις, έργα τέχνης και προϊόντα που μπορείτε να
φτιάξετε με κώδικα.
Ξοδέψτε λίγο χρόνο για να προσαρμόσετε τον κώδικά σας στη δική σας
δημιουργική και τεχνική τελειότητα!
Στη συνέχεια, πατήστε το κουμπί δημοσίευσης παρακάτω για να
αποθηκεύσετε την κάρτα χαιρετισμού σας - και να λάβετε ένα σύνδεσμο
που μπορείτε να στείλετε σε οποιονδήποτε!