GitHub Profile: KuhakuNeko
Netlify Site: p2019108-ionio-pibook
Site Repository: KuhakuNeko/Site
Shell Scripts Repository: KuhakuNeko/KuhakuNekoLinuxShellScripts
Ολοκληρώνοντας την τελική μου αναφορά και το μάθημα με επιτυχία αποσκοπώ στο να μπορώ να δω με μια ακόμα ευρύτερη οπτική τις προγραμματιστικές μου δημιουργίες από την πλευρά του χρήστη και να μπορώ να δημιουργήσω κάποιες εφαρμογές με διαδραστικό περιβάλλον. Έχω στόχο να μπορώ να σχεδιάσω και να δημιουργήσω εφαρμογές πιο χρήσιμες στον άνθρωπο. Επιπλέων θέλω να δώσω μεγαλύτερη έμφαση στην διεπαφή των εφαρμογών με τον χρήστη, και παίρνοντας έναυσμα από το μάθημα να γίνω πιο ενεργός στην πλατφόρμα του GitHub και να προχωρήσω στην δημιουργία κάτι πρωτότυπου και ξεχωριστού.
Επιπλέον παρατηρώντας τις προγραμματιστικές ασκήσεις του μαθήματος στις οποίες χρησιμοποιούνται συνήθως κώδικες JavaScript, CSS και HTML που είναι πολύ χρήσιμοι στην κατασκευή ιστοσελίδων, θα ήθελα να εξοικειωθώ περισσότερο με αυτές τις γλώσσες και να μπορώ να φτιάξω σελίδες πιο φιλόξενες στον χρήστη, με περισσότερη διάδραση αλλά και ακόμα καλύτερο γραφικό περιβάλλον. Ακόμη με τις ασκήσεις γραμμής εντολών έχω ως στόχο την εξοικείωση μου με το terminal που είναι ένα πολύ δυνατό εργαλείο αλλά και να έρθω πιο κοντά με το περιβάλλον του ανοικτού λειτουργικού linux και να αξιοποιήσω τις λειτουργείες του καθώς και να διευρύνω το ρεπερτόριο προγραμμάτων και να μάθω για το λειτουργικό αυτό ξεφεύγοντας από το συνηθισμένο.
Γενικότερα αυτό που περιμένω να διδαχτώ σε αυτό το μάθημα είναι το πώς να φέρω τις εφαρμογές μου πιο κοντά στον άνθρωπο και να μάθω πως να φτιάχνω διαδραστικές εφαρμογές, προσδοκώντας ένα ακόμη καλύτερο επίπεδο αλληλεπίδρασης Ανθρώπου-Υπολογιστή, μαθαίνοντας να προγραμματίζω και να σχεδιάζω έχοντας πάντα στο μυαλό τον χρήστη.
Τα πράγματα που δημιουργώ ή θέλω να δημιουργήσω στο μέλλον βασίζονται σε μεγάλο βαθμό στην αλληλεπίδραση του Ανθρώπου με τον Υπολογιστή, γι’ αυτό δίνοντας ιδιαίτερη προσοχή και συμμετέχοντας ενεργά στο μάθημα σκοπεύω να εφαρμόσω ότι μάθω στα δημιουργήματά μου, ώστε να πετύχω τον στόχο μου, που είναι η δημιουργία ενός νέου τρόπου αλληλεπίδρασης Ανθρώπου-Υπολογιστή.
Οι τίτλοι των παραδοτέων που υλοποιήθηκαν βρίσκονται στα περιεχόμενα. Όλα τα παραδοτέα υλοποιήθηκαν πλήρως ή και με το παραπάνω (Exta προσθήκες στις ασκήσεις προγραμματισμού, 2 asciinema links με διαφορετικούς τρόπους εκτελέσεις και shell scripts στις ασκήσεις γραμμής εντολών) και έγιναν commit έγκυρα συνήθως πολύ νωρίτερα από την ημερομηνία τους. Για αναλυτική σύνοψη του τι έγινε και την ακριβής ημερομηνία που έγιναν αλλαγές επισκεφθείτε το commit history του github όπου όλα τα commit έχουν κατάλληλο όνομα. Το μόνο παραδοτέο που υπήρξε ένα μικρό πρόβλημα είναι το παραδοτέο 6 (Συμμετοχικό Α1 και Α2) όπου λόγο προβλήματος με το update των submodule τα αρχεία τα ανέβασα σε ένα custom repository και πρόσθεσα τα link προς αυτό για κατοχύρωση της προθεσμίας, όμως πλέον έλυσα το πρόβλημα και έχω αλλάξει τα links προς τα updated submodule.
Σε περίπτωση που έχουν πραγματοποιηθεί περεταίρω ενέργειες (το οποίο είναι το σύνηθες) από αυτά που ζητάει η εκφώνηση της εργασίας αυτές περιγράφονται αναλυτικά στην υποενότητα του αντίστοιχου παραδοτέου. Στις ασκήσεις προγραμματισμού οι επιπλέoν ενέργειες ξεχωρίζουν στο κείμενό μου ενώ στις ασκήσεις γραμμής εντολών έχω 2 asciinema που κάνω χρήση διαφορετικών προγραμμάτων στο καθένα και ξεχωριστή υποενότητα στο τέλος κάθε άσκησης με το demo του shell script της αλλά και τις πηγές. Όσον αφορά τις δυσκολίες, πάντα υπήρχαν αρκετές και έπαιρναν πολύ χρόνο για να λυθούν. Οι δυσκολίες των παραδοτέων δεν αναφέροντα σχολαστικά καθώς είναι πάρα πολλές και μακροσκελείς, όμως τα links των πηγών και η εκτεταμένη έρευνα που έχω κάνει πάνω σε κάθε παραδοτέο προδίδουν τυχόν παραπάνω προβλήματα από όσα αναφέρονται.
Για το δεύτερο παραδοτέο επέλεξα την προγραμματιστική άσκηση "Mouse Eraser" στην οποία μετατρέπουμε τον κέρσορα του ποντικιού μας σε ένα εικονικό "σβηστήρι" το οποίο θα σβήνει μια εικόνα ώστε να εμφανίζετε η δεύτερη εικόνα που κρύβετε ακριβώς από κάτω της. Η άσκηση μας ζητάει να αλλάξουμε τις εικόνες που χρησιμοποιούνταν ήδη και να αλλάξουμε και το μέγεθος της εικονικής "σβήστρας".
Κατάφερα να λύσω την άσκηση μόνο και μόνο "παίζοντας" και εξερευνώντας τον κώδικα της άσκησης. Φυσικά προπήραν και κάποιες βασικές γνώσεις, και αλγοριθμική σκέψη. Αρχικά πείραξα τον κώδικα HTML όπου αφορά την εικόνα που υπάρχει στο background. Άλλαξα το link της εικόνας σε μια εικόνα της επιλογής μου και έβαλλα το κατάλληλο width και height που αντιστοιχεί στην εικόνα. Ακόμη άλλαξα και τις διαστάσεις του καμβά(canvas) μου ώστε η εικόνα μου να χωράει ακριβώς.
Το επόμενο βήμα ήταν να ασχοληθώ με τον κώδικα JS ο οποιος αφορά της λειτουργίες της σβήστρας καθώς και την εικόνα η οποία είναι "ικανή" να σβηστή. Στο κομμάτι του κώδικα που βλέπω μπροστά την λέξη img κατάλαβα αμέσως ότι αυτό αφορά την εικόνα, οπότε άλλαξα το img.width, img.height στις κατάλληλες διαστάσεις της 2ης εικόνας μου και υπέθεσα πως το img.src σημαίνει image source οπότε άλλαξα το link προς την εικόνα σε μια εικόνα της επιλογής μου.
Μετά στον ίδιο κώδικα JS παρατήρησα την συνάρτηση drawPoint, ουσιαστικά η σβήστρα αντί να ζωγραφίζει απλά "διαγράφει" την εικόνα ανεβάζοντας το opacity οπότε κατάλαβα αμέσως ότι αυτή η συνάρτηση αφορά την σβηστήρα. Μέσα σε αυτήν την συνάρτηση τα σημαντικά κομμάτια είναι το var grd και το ctx.arc τα οποία αλλάζοντας κάποιες από τις παραμέτρους τους μπόρεσα να αυξομειώσω το μέγεθος της εικονικής σβήστρας. Αποφάσισα να μεγαλώσω την σβήστρα οπότε έβαλλα μέγεθος 240 στις αντίστοιχες παραμέτρου του var grd και ctx.arc.
Ουσιαστικά το var grd δημιουργεί ένα gradient και δίνει την ικανότητα στον κέρσορα να σβήνει ενώ το ctx.arc είναι τα δεδομένα για το μέγεθος της σβήστρα και κάνει την σβήστρα να είναι κυκλική.
Αυτό που πρόσθεσα για να βελτιώσω το αποτέλεσμα είναι να θέσω το ίδιο μέγεθος καμβά και στον κώδικα JS και στον HTML έτσι ώστε οι δύο εικόνες να κρύβονται ακριβός η μια πίσω από την άλλη, δίνοντας αυτή την αίσθηση του animation.
Link στο fork του αποθετηρίου pibook με το embed της άσκησης: _remix/mouse-eraser
Link στο pen της άσκησης στο codepen.io: MouseEraser P2019108
Link στο netlify site μου του pibook: MouseEraser Answer
Το αποτέλεσμα της άσκησης είναι ωραίο, διαδραστικό και χρήσιμο, θα μπορούσε να χρησιμοποιηθεί σε μια διαδικτυακή σελίδα ή ακόμα με πολύ βελτίωση και τροποποίηση θα μπορούσε να γίνει ένα μικρό παιχνίδι. Σε κάθε περίπτωση αυτή την στιγμή η άσκηση πείρε τη μορφή ενός διαδραστικού animation χάρις την επιλογή των εικόνων μου και με βελτίωση μπορεί να γίνει κάτι ακόμη καλύτερο.
Ως πρώτη εργασία γραμμής εντολών επέλεξα να πραγματοποιήσω την εργασία που ζητούσε να εγκαταστήσω τα βασικά απαιτούμενα και να δείξω τα χαρακτηριστικά του συστήματος μου.
Asciinema link Ver.1: Παραδοτέο 3 Ver.1
Asciinema link Ver.2: Παραδοτέο 3 Ver.2
Στην version 1 της εργασίας χρησιμοποίησα την εντολή “Sudo hostname p2019108”. Το sudo παρέχει τα κατάλληλα δικαιώματα διαχειριστή για την αλλαγή του hostname και η εντολή hostname ακολουθουμένη από το επιθυμητό όνομα επιτρέπει την αλλαγή του. Για να μην χρειαστεί επανεκκίνηση του terminal εισήγαγα και την εντολή “bash --login” όπου κάνει login τον αντίστοιχο host.
Στην version 2 χρησιμοποίησα την εντολή “sudo gedit /etc/hostname” το gedit είναι ένας editor του λειτουργικού linux οπού με αυτήν την εντολή ανοίγει το αρχείο που υπάρχει στο αντίστοιχο path με δικαιώματα διαχειριστή. Το αρχείο σε αυτό το path περιέχει το όνομα του host οπότε κάνοντας edit στο αρχείο με τον editor αλλάζουμε το όνομα του host. Για να λειτουργήσει όμως η αλλαγή απαιτείται restart του terminal.
Σημαντικό είναι να αναφέρω οτι θα μπορούσα να χρησιμοποιήσω και τον nano editor που ανοίγει εντός του terminal, όμως για μεγαλύτερη ποικιλία προγραμμάτων και για εξοικείωση χρησιμοποίησα και τον gedit editor
Για να προβάλω τα dot files χρησιμοποίησα τις εντολές “ls –ld .?*” και “ls -a” η διαφορά μεταξύ τους είναι ότι η πρώτη εμφανίζει συγκεκριμένα μόνο τα hidden dot files ενώ η δεύτερη εμφανίζει όλα τα υπάρχοντα dot files. Στην version 2 χρησιμοποίησα μόνο την εντολή “ls -a”.
Για την προβολή συγκεκριμένων shell configuration files η εντολές που χρησιμοποίησα ήταν “nano ~/.bashrc” για την προβολή του bashrc και “ nano /etc/profile” για την προβολή του αρχείου profile μου. Η εντολή nano καλεί έναν text editor του linux ο οποιος είναι φτιαγμένος να λειτουργεί εντός του command line. Το nano ~/.bashrc είναι γραμμένο με αυτό το τρόπο ώστε να παρέχονται τα κατάλληλα δικαιώματα για το άνοιγμα του αρχείου.
Στην version 1 της άσκησης για την προβολή αυτών τον πληροφοριών χρησιμοποίησα την εντολή “neofetch” η οποία παρέχετε μετά την εγκατάσταση του πακέτου του neofetch. Το neofetch με αυτήν την εντολή σου επιτρέπει να δεις πληροφορίες σχετικά με το σύστημα σου που αφορούν hardware και software.
Στην version 2 έκανα χρήση μιας built-in εντολής του Linux, αυτή είναι η “sudo lshw -short”. Αυτή η εντολή σου παρέχει αρκετές πληροφορίες σχετικά με το σύστημα συνοπτικά. Αφαιρώντας το keyword “-short” από την εντολή μπορούμε να πάρουμε μια εκτεταμένη αναφορά με πληροφορίες για το σύστημα μας.
Το πρώτο πρόβλημα που αντιμετώπισα είναι αυτό των δικαιοτάτων διαχείριση. Ωστόσο αυτό λύθηκε μαθαίνοντας για την εντολή sudo και αντί για /bashrc την χρήση του ~/.bashrc. Επίσης είχα πρόβλημα με το ότι για να λειτουργήσει η αλλαγή του hostname το terminal απαιτούσε restart όμως με την εντολή “bash –login” αυτό το πρόβλημα λύθηκε όσον αφορά την version 1 της άσκησης.
sudo, ls, nano, gedit, neofetch, lshw
How do I change the hostname without a restart? | How to show only hidden files in Terminal? | Bash Shell: Display All Hidden Dot Files In a Directory | Shell initialization files - Bash Guide for Beginners | .bashrc: Permission denied | NeoFetch: See System Information from the Command Line on Linux | 10 Useful Commands to Collect System and Hardware Information in Linux | Linux Command To Find the System Configuration And Hardware Information | How to edit read-only file in /etc?
Για το 4ο παραδοτέο επέλεξα την άσκηση "Keyboard Input". Σε αυτή την άσκηση ασχολήθηκα με την κίνηση ενός αντικείμενου με την χρήση του πληκτρολογίου. Η άσκηση αυτή ζητούσε να αλλάξω την ταχύτητα του αυτοκινήτου που ο χρήστης κινεί. Συγκεκριμένα ζητείται η ταχύτητα που το αμάξι έχει όταν πάει όπισθεν να είναι η μισή από αυτή που έχει το αμάξι όταν κινείτε εμπρός.
Για να το πετύχω αυτό κοίταξα στον κώδικα JS που έμαθα από την προηγούμενη μου άσκηση ότι ευθύνεται για τα event που συμβαίνουν σε ένα πρόγραμμα/σελίδα. Παρατήρησα το κομμάτι του κώδικα όπου υπάρχουν κάποια if statements με το keyword "key" μόλις είδα ότι μέσα στο if υπήρχε η λογική πράξη key == 40 κατάλαβα ότι αυτό σημαίνει πως όταν κάποιο κουμπί (στην περίπτωση αυτή με κωδικό 40) πατηθεί, τότε εκτελείτε ο κώδικας του if statement.
Δεν γνώριζα τα key code από τα πλήκτρα οπότε έψαξα στο Internet και βρήκα μια ιστοσελίδα η οποία πατώντας το αντίστοιχο πλήκτρο σου δείχνει το key code του. Το link προς αυτό το site βρίσκετε στην υπο-ενότητα "χρήσιμες πηγές".
Μετά στον κώδικα JS παρατήρησα το παρακάτω κομμάτι:
Μέσα στα if statement η μεταβλητή "dy" άλλαζε οπότε κατάλαβα ότι αυτή η μεταβλητή είχε να κάνει με την ταχύτατα και μόλις είδα το παραπάνω κομμάτι επιβεβαιώθηκα. Στην ουσία το παραπάνω κομμάτι κώδικα κατευθύνει το αμάξι και ευθύνεται για το ότι το αμάξι μπορεί να στρίψει και κατά πόσο. Εκτός από την ταχύτητα παρατήρησα ότι αλλάζοντας τον αριθμό τις παραπάνω διαίρεσης το αμάξι μπορεί να κάνει "drift", όμως αυτό είναι μόνο κάτι έξτρα που παρατήρησα.
Μαθαίνοντας λοιπόν ότι το key code 40 αντιστοιχεί στο κάτω βελάκι του πληκτρολογίου το οποίο γνωρίζω ότι κινεί το αμάξι προς τα πίσω απλός πήγα στο if statement με το "if (key == 40)" και απλά άλλαξα την μεταβλητή "dy" από 4 σε 2 ώστε να μειώσω την ταχύτητα της όπισθεν ακριβός στο μισό από όταν το αμάξι πηγαίνει εμπρός.
Link στο fork του αποθετηρίου pibook με το embed της άσκησης: _remix/keyboard-input
Link στο pen της άσκησης στο codepen.io: Html Canvas Game P2019108
Link στο netlify site μου του pibook: KeyboardInput Answer
Keycode.info - get JavaScript event keycodes
Η δεύτερη εργασία γραμμής εντολών που επέλεξα ζητούσε να αναζητήσουμε, να κατεβάσουμε και να ακούσουμε το αγαπημένο μας τραγούδι αυτού του μήνα. Όλα αυτά μέσα από το terminal του linux. Παρακάτω έχουμε τα links για της δυο διαφορετικές εκτελέσεις της εργασίας μου.
Asciinema link Ver.1: Παραδοτέο 5 Ver.1
Asciinema link Ver.2: Παραδοτέο 5 Ver.2
Στην version 1 έκανα αναζήτηση στο YouTube μέσω του εργαλείου ytp, το εργαλείο (όπως και αρκετά άλλα) είχε κάποια προβλήματα που αναλύονται στην παράγραφο με τα προβλήματα που χρειάστηκε να επιλυθούν για την σωστή εκτέλεση. Το εργαλείο ytp σου προφέρει πολλές λειτουργείες όμως εγώ το χρησιμοποίησα ώστε να μπορέσω να κάνω αναζήτηση στην πλατφόρμα του youtube και να αντιγράψω το url του αντίστοιχου video για να μπορέσω να το κατεβάσω.
Γρανίτας λοιπόν ytp στο terminal ανοίγει το interface του και εμφανίζετε μια default αναζήτηση που κάνει το ytp με το keyword “Friday”. Εισάγοντας την εντολή “x” κάνουμε νέα αναζήτηση και μετά γράφουμε το όνομα του τραγουδιού που ψάχνουμε. Ο ytp θα εμφανίσει τα αποτελέσματα αριθμημένα και επιλέγοντας τον αντίστοιχο αριθμό διαλέγουμε το τραγούδι. Αμέσως μετά πατάω “Y” για την αντιγραφή του url του επιλεγμένου video. Για να γίνει έξοδος από το interface του ytp πατάω Ctrl+C. Το url έχει αντιγραφεί επιτυχώς.
Στην version 2 η αναζήτηση γίνετε μέσω του mps-youtube. Το mps-youtube έχει αντίστοιχες λειτουργείες με το ytp όμως το interface του είναι πολύ πιο γραφικό. Η εντολή “sudo mpsyt” ανοίγει το interface και το sudo απαιτείται λόγο δικαιωμάτων. Η αναζήτηση γίνετε με την εντολή “/ VideoName” όπου VideoName το video που αναζητούμε. Αναζητώντας το mps-youtube εμφανίζει τα αποτελέσματα αριθμημένα και εισάγοντας την εντολή “x 1” αντιγράφετε το url του video που βρίσκετε στην θέση 1.
Για το κατέβασμα του video και την εξαγωγή του κομματιού ήχου σε μορφή mp3 από αυτό χρησιμοποίησα το εργαλείο youtube-dl. Για να κατεβάσω το τραγούδι στον υπολογιστή μου χρησιμοποίησα την εντολή « youtube-dl –x –audio-format mp3 –o “GRIMOIRE.%(ext)s” https://www.youtube.com/watch?v=9a5Luy0h1Mg »
Η παράμετρος “–x” είναι ώστε ο youtube-dl να μην κατεβάσει απλά το video αλλά να κάνει extract μόνο τον ήχο. Μετά το “-audio-format mp3” χρησιμοποιείται για να δηλώσουμε τον τύπο του αρχείου. Τ “-o “GRIMOIRE.%(ext)s” είναι μια παράμετρος που σου επιτρέπει να ονομάσεις το αρχείο που κατεβάζεις, σε περίπτωση που δεν θέλουμε να του δωθεί ως όνομα ο τίτλος του video by default. (Ο τίτλος του τραγουδιού που κατεβάζω σε αυτό το παράδειγμα είναι GRIMOIRE)
Επειδή ήδη είχα εκτελέσει την εντολή “cd /home/kuhakuneko/Music” βρισκόμουν ήδη στο directory όπου κατεβάζω την μουσική μου και το youtube-dl κατεβάζει και τοποθετεί τα αρχεία στο directory που βρίσκεστε εκείνη την στιγμή by default.
Το mps-youtube σου δίνει την δυνατότητα να κατεβάσεις video με τον ίδιο τρόπο που έκανα αντιγραφή το url, όμως λόγο σφάλματος κάποιου server το video δεν μπόρεσε να κατέβει.
Για την αναπαραγωγή τραγουδιών μέσω terminal υπάρχουν πολλές επιλογές. Στις εκτελέσεις μου χρησιμοποίησα 3 διαφορετικά εργαλεία. Στην version 1 έγινε χρήση του mpv. Με την εντολή “mpv” και ακριβώς από δίπλα την διαδρομή στο αρχείο ο mpv μπορεί να παίξει το αντίστοιχο αρχείο mp3 δείχνοντας στο terminal τα δευτερόλεπτα και την ποιότητα του Mp3.
Στην version 2 τα εργαλεία που χρησιμοποίησα έχουν πολύ καλύτερο γραφικό περιβάλλον και σου δίνουν περισσότερες πληροφορίες. Τα 2 αυτά εργαλεία είναι το sox και ο VLC.
Η εντολή για την αναπαραγωγή mp3 με τον sox είναι “play” και ακολουθείτε από το directory του mp3 αρχείου. Ο sox σου προφέρει ένα μικρό visualizer ήχου και εκτός από τις πληροφορίες που προσφέρει και το mpv έχει ακόμα File Size, Bit Rate, Encoding και σε ενημερώνει αν το Replay είναι on ή off.
Μετά ο VLC το γνωστό πολυμεσικό πρόγραμμα γίνετε να λειτουργήσει εντός του terminal με την εντολή “nvlc”. Το n μπροστά από το vlc ενεργοποιεί την terminal μορφή του. Ο VLC έχει ένα ωραίο γραφικό περιβάλλον εντός terminal με μεγάλη μπάρα χρόνου ενώ ακριβώς από κάτω δείχνει το playlist σου.
Ένα από τα προβλήματα που αντιμετώπισα είναι ότι τα εργαλεία mps-youtube και ytp χρησιμοποιούν την Data API του YouTube για να λειτουργήσουν, επομένως απαιτούν κάποια credentials και ένα συγκεκριμένο κλειδί για την χρήση του API. Τα default κλειδιά δεν λειτουργούσαν πλέων γι’ αυτό έπρεπε χρησιμοποιώντας το google account μου να μπω και να φτιάξω ένα project που να περιέχει το YouTube DATA API στην σελίδα https://console.developers.google.com. Παίρνοντας το κλειδί έπρεπε να το κάνω set στα αντίστοιχα αρχεία config για τον ytp, και για το mps-youtube μέσω της εντολής “set api_key”.
Ώσον αφορά το shell scripting για την συγκεκριμένη εργασία ασχολήθηκα αρκετά και έφτιαξα ένα πρόγραμμα το οποίο δημιουργεί κάποιο interface και επιτρέπει στον χρήστη να κατεβάσει, να ψάξει και να αναπαράγει μουσική και βίντεο χωρίς να χρειαστεί να γράψει καμία εντολή.
Το πρόγραμμα σε αφήνει να κάνεις search μέσω του ytp ή να του δόσεις κατευθείαν link για download και σε ρωτάει αν θέλεις να κάνεις extract τον ήχο ή όχι.
Ακόμη το script σου δίνει τη δυνατότητα να δεις τα αρχεία μουσικής και βίντεο του συγκεκριμένου directory.
Επιπλέων το YoutubeDLSS script αξιοποιεί αρκετούς video και music players και σου δίνει την επιλογή να διαλέξεις με ποιων από αυτούς θες να κάνεις αναπαραγωγή ενός ή ακόμη και όλων των αρχείων δημιουργώντας έμμεσα μια δική σου playlist!
YoutubeDLSS Demo: Demo for YoutubeDLSS.sh by KuhakuNeko
YoutubeDLSS.sh shell script: YoutubeDLSS.sh
Μπορείτε επίσης να επισκεφτείτε την σελίδα με όλα τα shell scripts μου για περισσότερα: KuhakuNekoLinuxShellScripts
ytp, youtube-dl, mpv, mps-youtube, sox, vlc
How to download an MP3 track from a YouTube video | Where does youtube-dl download the videos to? | How to specify a filename while extracting audio using youtube-dl? | How to play mp3 files from the command line? | How to Play MP3 Files from Command Line | mps-youtube | ytp
Μιας και είναι η πρώτη φορά που ασχολούμε με το shell scripting και pipelining αυτές είναι μερικές από τις πήγες που με βοήθησαν:
How to write a bash script - OMGenomics |
Writing your First Shell Script for Linux Tutorial - Kris Occhipinti |
Shell Scripting Tutorial: How to Create Shell Script in Linux/Unix - Guru99 |
When someone says “in your path,” what does this mean exactly? - SuperUser |
12. Pipeline commands in Linux. - Average Linux User |
Linux pipe Command - LinuxHint |
Pipe, Grep and Sort Command in Linux/Unix with Examples - Guru99 |
Piping in Unix or Linux - GeeksForGeeks |
If Statements! - Ryans Tutorials |
While Loop - Linux Shell Scripting Tutorial Handbook |
Shell Scripting Tutorial (Variables) - Steve Parker |
Writting Shell Scripts - linuxcommand |
Unix Shell Scripting - TutorialsPoint |
What is the preferred method to echo a blank line in a shell script? - StackOverflow |
Sleep Command in Linux - LinuxHint |
Using Shell Arrays - TutorialsPoint |
Using for loops to traverse through an array in shell script [duplicate] - StackOverflow |
List files with certain extensions with ls and grep - StackOverflow
Για το Α μέρος του συμμετοχικού περιεχομένου αποφάσισα να βρω φωτογραφίες και να κάνω διαφάνειες για 2 συσκευές που έφεραν αλλαγές στον κλασικό τρόπο διάδρασης του ανθρώπου με τις αντίστοιχες συσκευές. Αυτές οι συσκευές είναι το Eye Toy του Play Station 2 και το Nintendo Wii με τα Wii Remotes. Το σετ διαφανειών που δημιούργησα ονομάζετε "Συσκευές Διάδρασης στα Βιντεοπαιχνίδια" ωστόσο πιστεύω ότι οι διαφάνειες μου θα μπορούσαν να προστεθούν και στο ήδη υπάρχον σετ διαφανειών που αφορά τα βιντεοπαιχνίδια. Επίσης δημιούργησα ένα χρονολόγιο με το ίδιο όνομα που δείχνει την διαδρομή αυτών των συσκευών μέσα στο χρόνο προσθέτοντας εκτός από το Wii και το Eye Toy και αρκετές συσκευές που ήδη υπήρχαν στο gallery.
ΣΥΜΑΝΤΙΚΟ: Παρόλο που έκανα update ήδη υπάρχοντα αντικείμενα στο gallery και πρόσθεσα την ημερομηνία που δημιουργήθηκαν συνεχίζουν μερικά από τα αντικείμενα που έχω προσθέσει στο timeline μου να μην εμφανίζονται στο netlify οπότε προτρέπω να δείτε το original .md αρχείο στο repository μου διότι στο timeline του netlify δεν εμφανίζονται όλα τα entry μου, για άγνωστο προς το παρόν λόγο. Υπάρχει ωστόσο περίπτωση το πρόβλημα να έχει διορθωθεί μέχρι την ημέρα της βαθμολόγησης.
| Περιγραφή | Repository Link | Netlify Link |
|---|---|---|
| Gallery Eye Toy | eye-toy.md | Eye Toy Summary |
| Images Eye Toy | Full Quality + Thumbnail | |
| Gallery Wii | wii-console.md | Wii Summary |
| Images Wii | Full Quality + Thumbnail | |
| Slides | Συσκευες Διαδρασης στα Βιντεοπαιχνιδια (Slides) | Διαφάνειες Συσκευών Διάδρασης στα Βιντεοπαιχνιδια |
| Timeline | Συσκευες Διαδρασης στα Βιντεοπαιχνιδια (Timeline) | Χρονολόγιο Συσκευών Διάδρασης στα Βιντεοπαιχνιδια |
Οι σύνδεσμοι είναι λίγοι (και δεν χρησιμοποιήθηκαν ιδιαιτέρως σε αυτό το κομμάτι) διότι εγώ ο ίδιος κατέχω τις παραπάνω συσκευές και έχω ασχοληθεί αρκετά μαζί τους, οπότε γνώριζα πολλά πράγματα και από μόνος μου πάνω στο αντικείμενο.
EyeToy - Wikipedia | EyeToy: Play - Wikipedia | Video Game History Timeline - The Strong National Museum of Play | Wii - Wikipedia | Wii Remote - Wikipedia
Για το έκτο παραδοτέο επέλεξα την άσκηση προγραμματισμού “Mouse Option” στην οποία ζητείτε να κατασκευαστεί ένα drop down menu στο οποίο επιλέγοντας το αντίστοιχο κουτί θα εμφανίζετε διαφορετικό περιεχόμενο κάθε φορά.
Αρχικά ρίχνοντας μια γρήγορη ματιά στον κώδικα παρατήρησα την γραμμή “select class="content-select" ng-model="selection"”. Σε αυτή την γραμμή γίνετε η βασική χρήση της AngularJS, αμέσως μετά παρατήρησα ότι κάτω από αυτήν την γραμμή υπάρχει το keyword “option” επομένως κατάλαβα αμέσως ότι αυτό είναι το κομμάτι κώδικα που αφορά το πόσες επιλογές θα υπάρχουν και τι τίτλο θα έχουν.
Μαθαίνοντας λοιπόν για το keyword “option” άρχισα να προσθέτω τα δικά μου options. Έκανα copy τα πρώτα 2 options και άλλαξα το value σε content3 και content4 αντίστοιχα, καθώς και τα ονόματα τους. Αμέσως μετά ξανα-άλλαξα τα ονόματα από τα options και του έδωσα ονομασίες που αντιπροσωπεύουν το περιεχόμενό τους.
Αποφάσισα να φτιάξω 4 επιλογές με περιεχόμενα Text, Links, Images και Video αντίστοιχα. Άλλαξα το κείμενο που υπήρχε ήδη για το πρώτο option. Για το δεύτερο option επίσης διέγραψα το προϋπάρχων κείμενο και τοποθέτησα links χρησιμοποιώντας “a href="Url">Title</a” με αυτόν τον τρόπο εισήγαγα clickable links και τους έδωσα και ένα τίτλο.
Το option νούμερο 3 είναι οι εικόνες. Εισήγαγα εικόνες με τον ίδιο τρόπο που τις εισήγαγα στην εργασία με το mouse eraser. Δηλαδή με “img src="Url" width="640" height="360"”, με το width και το height της έκανα resize κατάλληλα για να fit στον χώρο της σελίδας. Και για το option 4 χρησιμοποίησα το iframe με τον τρόπο που φαίνετε στην παρακάτω εικόνα. Επίσης έβαλα το κατάλληλο width και height. Παρακάτω φαίνετε ο κώδικας για το option 3 και 4:
Σημαντικό είναι ότι για να δουλέψει το video στην σελίδα και να μην αντιμετωπίζω προβλήματα ασφαλείας έπρεπε να χρησιμοποιήσω το embed link για το αντίστοιχο video και όχι απλό copy paste του original url.
Παρατήρησα επίσης στον κώδικα css ότι υπήρχε ένα κομμάτι κώδικα που είχε το keyword “background” και από δίπλα ένα color code οπότε αποφάσισα να το πειράξω και να αλλάξω το background color της σελίδας σε μπλε, κάνωντας pick ένα χρώμα από το adobe color wheel.
Link στο fork του αποθετηρίου pibook με το embed της άσκησης: _remix/mouse-option
Link στο pen της άσκησης στο codepen.io: Simple content toggle with AngularJS P2019108
Link στο netlify site μου του pibook: MouseOption Answer
HTML Links | HTML Images | HTML YouTube Videos | Adobe Color Wheel | YouTube Refused to Connect [Solved]
Για την 3η άσκηση γραμμής εντολών επέλεξα την εργασία που ζητούσε να δούμε το δελτίο καιρού της πόλης που γεννηθήκαμε και μιας πόλης που θέλουμε να ταξιδέψουμε μέσα από το terminal.
Asciinema link Ver.1: Παραδοτέο 8 Ver.1
Asciinema link Ver.2: Παραδοτέο 8 Ver.2
Στην version 1 χρησιμοποίησα το εργαλείο wttr.in που σου εμφανίζει το δελτίο καιρού εμφανίζοντας ένα ωραίο ascii art με το δελτίο, στο asciinema μου δείχνω το δελτίο της Άρτας και του Τόκιο. Ωστόσο εκτός από την εντολή “curl wttr.in/Tokyo” που σου δείχνει απλά το δελτίο προσθέτοντας μπροστά v2 δηλαδή “curl v2.wttr.in/Tokyo” το wttr σου εμφανίζει περισσότερες πληροφορίες και ένα meteogram του καιρού. Μετά προσθέτοντας el. μπροστά από το wttr μπορούμε να έχουμε το δελτίο στα ελληνικά. Επιπλέων με την εντολή “diff -Naur <(curl -s http://wttr.in/Αρτα ) <(curl -s http://wttr.in/Tokyo )” που εκτελώ είναι δυνατή η σύγκριση του καιρού δυο πόλεων.
Στην version 2 έκανα χρήση του εργαλείου finger και inxi. Το finger γράφοντας την εντολή “finger [email protected]” όπου city το όνομα της πόλης που αναζητάμε, μας εμφανίζει ένα ένα meteogram όπου κάθε σύμβολο αντιστοιχεί σε κάποιο καιρικό φαινόμενο. Τώρα το inxi είναι ένα tool που δεν είναι φτιαγμένο μόνο για τον καιρό όμως σου δίνει και αυτήν την δυνατότητα δίνοντας τη εντολή -W, οπότε γράφοντας “inxi –xxxW Tokyo,Japan”, το inxi σου εμφανίζει κάποια εκτεταμένα καιρικά δεδομένα για την περιοχή που του έδωσες. Το xxx μπροστά από το W είναι για να σου εμφάνιση ακόμα περισσότερες πληροφορίες (τυπος δελτιου). Το ξεχωριστό που έχει το inxi σε αυτό τον τομέα είναι ότι σε αφήνει να αναζητήσεις τον καρό σε μια περιοχή μέσω τον γεωγραφικών συντεταμένων τις οπότε στο asciinema μου έδωσα της γεωγραφικές συντεταμένες της Κέρκυρας “inxi -xxxW 39.6243,19.9217” και το inxi μου επέστρεψε τις αντίστοιχες πληροφορίες για τον καιρό σε αυτήν την περιοχή.
Μια παρατήρηση που είχα να κάνω με το inxi είναι ότι επειδή πριν κάνω το asciinema είχα χρησιμοποιήσει πάλι τις παραπάνω εντολές, όταν πήγα να κάνω καταγραφή το inxi αποφάσισε το εξής, και πέταγε το σφάλμα:
"you have exceeded maximum limit for this source"
όπου στην ουσία επειδή είχα χρησιμοποίηση αρκετές φορές το source του καιρού το inxi μου απαγόρευσε για περίπου 2 μέρες την χρήση του. Δυστυχώς ακόμη και μετά από πολύ ψάξιμο δεν βρέθηκε άμεση λύση στο πρόβλημα, οπότε το μόνο που μπορούσα να κάνω είναι να περιμένω. Αργότερα κατάφερα να το επαναφέρω και να κάνω χρήση του source ώστε να το καταγράψω.
Αυτήν την φορά έφτιαξα ένα shell script με το οποίο μπορείς να πάρεις εκτεταμένες μετεωρολογικές πληροφορίες από τις αγαπημένες σου περιοχές.
Το shell script αυτό αξιοποιεί τα προγράμματα wttr.in, inxi και finger και έτσι μπορεί να δώσει πάρα πολλές πληροφορίες για τον καιρό σε πολύ λίγο χρόνο. Στο shell script έχω κατασκευάσει 2 πίνακες οι οποίοι περιέχουν τις τοποθεσίες από τις αγαπημένες περιοχές του χρήστη. Ο καθένας “πειράζοντας” λίγο τον πίνακα (μπορεί άνετα να βάλει και άλλες θέσεις χωρίς να χαλάσει το πρόγραμμα) μπορεί να δει μετεωρολογικά δεδομένα για μια από αυτές τις περιοχές, οι ακόμα και για όλες με την μια!
TermWeather.sh Demo: Demo for TermWeather.sh by KuhakuNeko
TermWeather.sh shell script: TermWeather.sh
Μπορείτε επίσης να επισκεφτείτε την σελίδα με όλα τα shell scripts μου για περισσότερα: KuhakuNekoLinuxShellScripts
curl, wttr.in, inxi, finger
Weather from terminal - Ask Ubuntu | Wttr.in - Help Page | How To Check Weather Details From Command Line In Linux - OsTechnix | Get Your Weather Forecast From the Linux CLI - linuxconfig.org | Retrieve Weather information using Linux command line - linuxconfig.org | inxi -w fails to report weather conditions. [Solved] | Finger command in Linux with Examples - GeeksForGeeks | Retro weather forecast (finger) | graph.no - Weather forecast via finger
Για το 9ο παραδοτέο επέλεξα την άσκηση με όνομα Menu CSS. Σε αυτήν την άσκηση προϋπάρχει ένα κουπί που όταν πατηθεί μας εμφανίζει με ένα animation ένα μενού το οποίο αποτελείτε από διάφορα εικονίδια που μας ανακατευθύνουν στις αντίστοιχες ιστοσελίδες.
Σκοπός της εργασίας είναι να προσθέσουμε το δικό μας περιεχόμενο στο μενου. Όμως φυσικά άλλαξα και άλλα πράγματα στο πρόγραμμα. Αρχικά παρατηρώντας τον κώδικα CSS βλέπω κάποιους παραμέτρους που αφορούν πράγματα όπως το χρώμα, την διάρκεια του animation, τον αριθμό των αντικειμένων που εμφανίζονται με το πάτημα του κουμπιού και άλλα. Μετέτρεψα το χρώμα του κουμπιού από λευκό σε μαύρο, αύξησα τον αριθμό των αντικειμένων από 6 σε 8 και έκανα το animation του ανοίγματος να διαρκεί λίγο περισσότερο.
Μετά για να κάνω τα καινούρια αντικείμενα του μενού να δουλέψουν έπρεπε να ασχοληθώ με τον κώδικα HTML. Έμαθα ότι τα εικονίδια αυτά μπορούν και δουλεύουν στο menu χάρις το toolkit του font awesome. Όπως βλέπουμε και στον κώδικα παρακάτω χρησιμοποιώντας ένα link και τον αντίστοιχο markdown κώδικα για την χρήση του toolkit μπορούμε να προβάλουμε τα εικονίδια και να τα κάνουμε να σε ανακατευθύνουν. Εγώ άλλαξα τα link και φυσικά πρόσθεσα και παραπάνω για κάθε νέο αντικείμενο που δημιούργησα. Τα εικονίδια που χρησιμοποίησα τα βρήκα στην επίσημη σελίδα του font awesome, το μόνο κακό είναι ότι παρατήρησα πως μερικά εικονίδια λειτουργούν μόνο με την pro έκδοση του font awesome, τα link υπάρχουν παρακάτω.
Επιπλέων για να ταιριάζει στο color scheme που χρησιμοποιώ συνήθως στις εργασίες μου άλλαξα το background gradient σε μπλέ-γαλάζιο επιλέγοντας χρώματα από το adobe color wheel.
Link στο fork του αποθετηρίου pibook με το embed της άσκησης: _remix/menu-css
Link στο pen της άσκησης στο codepen.io: Pure CSS Circle Menu P2019108
Link στο netlify site μου του pibook: MenuCSS Answer
Font Awesome Introduction - w3Schools | How TO - Menu Icon - w3Schools | Adobe Color Wheel | Font Awesome Icons
Η 4η εργασία γραμμής εντολών αφορά το multitasking και το monitoring του υπολογιστή. Συγκεκριμένα ζητάει μέσω terminal να έχουμε 2 παράθυρα ανοικτά σε ένα session και στο ένα να αναζητάμε στο web η να ψάξουμε και να ανοίξουμε δικά μας αρχεία, και στο άλλο να έχουμε ανοιχτό ένα monitoring software.
Asciinema link Ver.1: Παραδοτέο 10 Ver.1
Asciinema link Ver.2: Παραδοτέο 10 Ver.2
Στην version 1 χρησιμοποίησα το εργαλείο tmux, ένα εργαλείο multitasking που σου επιτρέπει να έχεις πολλά παράθυρα εντός ενός terminal session. Για το άνοιγμα τον παραθύρων χρησιμοποιώ Shortcuts, τα οποία μετά από αρκετό ψάξιμο και λίγο editing κατάφερα να τα κάνω setup (περισσότερα σε παρακάτω παράγραφο). Φυσικά όλα μπορούνε να γίνουνε και με εντολές και μερικές φορές προτιμώ τις εντολές από τα shortcuts. Εδώ είναι τα βασικά Shortcut που χρησιμοποίησα:
CTRL+A+C = new window
CTRL+A+| = pane left
CTRL+A+” = pane bottom
CTRL+A+ARROW_KEY = move to another window with the arrow keys
Επομένως άνοιξα 2 αντί για 3 παράθυρα γιατί χρησιμοποίησα και μια έξτρα εντολή η οποία είναι το “tmux clock” γενιά μου φαίνεται ωραίο και αισθητικά και για να μην ξεχνιέσαι πόση ώρα περάνει σερφάροντας και κάνοντας monitor τον υπολογιστή σου.
Στο άλλο παράθυρο για monitoring χρησιμοποίησα το glances ένα απλό αλλά τίμιο software που σου προφέρει βασικές πληροφορίες για τον υπολογιστή. Βάζοντας αυτά στην άκρη στο βασικό παράθυρο ψάχνω αρχεία μου και ανοίγω σελίδες στο διαδίκτυο. Αυτό το κάνω με την χρήση του tool w3m το οποίο είναι ένας text-based web browser. Γράφοντας w3m και το link της σελίδας που θες να ανακατευθύνθεις το w3m σου προβάλει στο terminal μια text based version αυτής της σελίδας. Εγώ αποφάσισα να ψάξω κάποια άτομα στην Wikipedia. Και για ακόμα κάτι έξτρα έψαξα και τον καιρό με τα tools άλλης εργασίας.
Στην 2η version χρησιμοποιώ το πρόγραμμα byobu αντί του tmux. Το byobu είναι σχεδόν το ίδιο με το tmux ωστόσο έχει κάποιες διαφορετικές δυνατότητες. Το γραφικό περιβάλλον γίνετε αρκετά καλύτερο, και η μπάρα στοιχείων κάνει πιο γρήγορα update και έχει περισσότερα στοιχεία, τα shortcuts είναι σχεδόν τα ίδια και δούλεψαν αμέσως χωρίς πρόβλημα. Άνοιξα τρία παράθυρα και ξαναχρησιμοποίησα το tmux clock.
Για το monitoring χρησιμοποίησα πολλά διαφορετικά software. Πρώτα το top και το Htop. Το top είναι απλά μια πρωταρχική έκδοση του Htop κατά την άποψή μου το Htop προσφέρει ένα γραφικό περιβάλλον πιο κοντά σε αυτό του glances και σου δείχνει και την κατανάλωση ανά πυρήνα, αλλά και το uptime και το σύνολο των tasks. Όμως το tool που πιστεύω ξεχώρισε είναι το nmon το nmon σε αφήνει να επιλέξεις εσύ τι θέλεις να προβάλει, οπότε γράφοντας την εντολή “nmon” εγώ πάτησα C, M, D, N και – το τι κάνουν αυτά τα shortcut φαίνεται παρακάτω.
Τέλος για την αναζήτηση στο internet χρησιμοποίησα πάλι τον w3m.
Εγκαθιστώντας το tmux και κοιτώντας τις οδηγίες για την χρήση του από την σελίδα του developer παρατήρησα ότι τα Shortcut σε εμένα δεν λειτουργούσαν. Δοκίμασα να κάνω τα πάντα με εντολές αλλά αυτό ήταν κάπως δύσχρηστο και χρονοβόρο. Οποτε ψάχνοντας στο internet είδα ότι για κάποιο λόγο το config file του tmux δεν δημιουργήθηκε αυτόματα.
Έτσι με εντολές όπως το mkdir έφτιαξα ένα νέο Config file στο σωστό path και βρήκα ένα Config παρόμοιο με αυτό που θα ήθελα να γράψω και πρόσθεσα και τροποποίησα κάποια values για να το φέρω στα μέτρα μου.
Εκτός από τα shortcuts, τροποποίησα τα χρώματα, ενεργοποίησα την αλλαγή παραθύρων και άλλων ενεργειών με το ποντίκι αντί με το πληκτρολόγιο, και πρόσθεσα την δυνατότητα να κάνω resize τα παράθυρα. Σιγά σιγά έκανα και άλλα μικρά tweaks, το config file μου στο tmux είναι διαθέσιμο στο παρακάτω link.
My Tmux config file: MyTmux.conf
My Tmux config file (Windows 95 Bios ver.): MyTmuxWindows95BIOSColorTheme.conf
Demo για τα config file μου: Demo for My Tmux config files by KuhakuNeko
Σε αυτήν την εργασία δημιούργησα δυο shell script.
Το πρώτο είναι το FasterTMUX το οποίο σου επιτρέπει το άνοιγμα έτοιμων session του tmux που κατασκευάζει το πρόγραμμα μου. Στην ουσία ο χρήστης επιλέγει ένα mode από αυτά που του προσφέρει το script και κατευθείαν το πρόγραμμα σου ανοίγει τα αντίστοιχα panes άλλη φορά 2, 4 ή και περισσότερα και άλλες φορές του ανοίγει και κάποιες έτοιμες διεργασίες σε κάποια παράθυρα για να μην χάνει χρόνο, όπως το tmux clock.
Το δεύτερο είναι το Tkill το οποίο αποφάσισα να φτιάξω γιατί το tmux αρκετές φορές μου έκανε crashes ή freezes και ήθελα ένα απλό και γρήγορο τρόπο για να το σταματήσω. Ακόμη δεν υπάρχει λόγος να χάνω χρόνο σε shortcuts και να γράφω “exit” σε κάθε pane για να κλίσω τον tmux. Το TKill σου κλίνει όλα τα sessions και όλα τα panes 100%, και σου αναγράφει και πια processes πρόκειται να “σκοτώσει”.
Ακόμη έχω ανεβάσει και το δικό μου config του tmux.
FasterTMUX.sh & TKill.sh Demo: Demo for FasterTMUX.sh & TKill.sh by KuhakuNeko
FasterTMUX.sh shell script: FasterTMUX.sh
TKill.sh shell script: TKill.sh
Μπορείτε επίσης να επισκεφτείτε την σελίδα με όλα τα shell scripts μου για περισσότερα: KuhakuNekoLinuxShellScripts
Tmux, Byobu, glances, Nmon, Htop, Top, Tmux clock, Ls, Curl, Wttr.in, W3m
Ctrl-b + c, %, n, w, etc not working in tmux console | tmux Ctrl+B not working | [SOLVED]tmux create new window don't work | tmux: making a conf file | tmux shortcuts & cheatsheet | Τmuxcheatsheet.com | Βyobu.org | w3m Terminal web browser - Linux (Tutorial) | How to kill all tmux sessions (or at least multiple sessions) from the CLI? | Making tmux Pretty and Usable - A Guide to Customizing your tmux.conf | top command in Linux with Examples - GeeksForGeeks | htop command in Linux with examples - GeeksForGeeks | Nmon for Linux Homepage | 256 COLORS - CHEAT SHEET
Για το δεύτερο μέρος του συμμετοχικού περιεχομένου επέλεξα να κάνω ένα σύντομο βιογραφικό του πατέρα της εικονικής πραγματικότητας Jaron Lanier και μια μελέτη περίπτωσης πάνω στο embodiment interaction στα βιντεοπαιχνίδια όπου αναλύω συσκευές διάδρασης που κατασκευάστηκαν μέσα στο χρόνο με αυτόν τον σκοπό και τον τρόπο που επιτυγχάνουν αυτόν τον διαφορετικό τρόπο διάδρασης, ενώ συγκρίνω επίσης μερικές από αυτές μεταξύ τους.
| Περιγραφή | Repository Link | Netlify Link |
|---|---|---|
| Σύντομη βιογραφία του Jaron Lanier | jaron-lanier.md + bio-lanier.md | Σύντομη βιογραφία του Jaron Lanier |
| Η Περίπτωση του Embodiment Interaction και των συσκευών του στα Βιντεοπαιχνίδια | videogames_embodiment_interaction.md + cs-videogames_embodiment_interaction.md | Η Περίπτωση του Embodiment Interaction και των Συσκευών του στα Βιντεοπαιχνίδια |
Για να δημιουργηθούν τα παραπάνω χρειάστηκαν πολλές ώρες με προσεκτικό διάβασμα όλων των πηγών που αναφέρω, όλων των ενοτήτων στο site του μαθήματος, άλλων γνώσεων που προέκυψαν μετά από ψάξιμο (που δεν σχετίζονται άμεσα), αλλά και μετά από πολύ έρευνα. Παρόλο που μπορεί το τελικό αποτέλεσμα να φαίνετε μακροσκελή είναι μια συμπύκνωση των γνώσεών μου μέσα από πολύωρη έρευνα και καλή κατανόηση των γνώσεων που απέκτησα πάνω στο θέμα το οποίο μου κίνησε το ενδιαφέρον μου ιδιαίτερα και με έκανε να το ερευνήσω σε βάθος.
NamTai EyeToy for Sony PS2: Gaming grows eyes | EyeToy - Mixed Reality Wiki | The Success of Sony EyeToy - StudyModeResearch | Sony EyeToy Report | EyeToy - Wikipedia | Was the EyeToy a success? - GameSpot | Project Milo - Wikipedia | Kinect - Wikipedia | Video Game History Timeline - The Strong National Museum of Play | EyeToy: Play - Wikepedia | EyeToy: Play 3 - Wikepedia | EyeToy: Play - Metacritic | EyeToy: Play 3 - Metacritic | EyeToy: Play - Gamespot | PlayStation Move - Wikepedia | 6 Pieces of Failed PlayStation Hardware | Why Did The PlayStation Move Fail? - Retro Only | Videoplace - Wikipedia | VIDEOPLACE - Myron Krueger | Wii - Wikipedia | Wii Remote - Wikipedia | Why was the Nintendo wii so successful? - Quora | The Reason the Wii was Successful - Not Entirely Useless | Nintendo Wii Remote Plus Review - Cnet | The False Success of the Nintendo Wii - Nintendo Enthusiast | History of VR - Timeline of Events and Tech Development - VirtualSpeech | How Does The Xbox Kinect Work - Jameco Electronics | How the PlayStation Camera Works - HowStuffWorks | How Microsoft Kinect Works - HowStuffWorks | How PlayStation Move Works - HowStuffWorks | Is there a microphone in the eyetoy? - Eurogamer | Using a Kinect as an Infrared Camera - Makezine | How the Kinect Depth Sensor Works in 2 Minutes - CuriousInventor | EyeToy Product Intro PS2 | Virtual reality visionary Jaron Lanier on his Microsoft gig: Kinect is "beautiful, exciting" - GeekWire
Author: Jaron Lanier - Audible | High-tech visionary comes home for NMSU's University Speakers Series / Jaron Lanier - New Mexico State University | Jaron Lanier - Peace Prize of the German Book Trade | Jaron Lanier - Wikipedia | Brief Biography of Jaron Lanier - JaronLanier.com | Jaron Lanier Computer Scientist; Musician; Author, Who Owns The Future? - Edge | The Visionary: A digital pioneer questions what technology has wrought. - The New Yorker | Jaron Lanier - Scientist, Musician, Artist & Author - Steven Barclay Agency | Jaron Lanier - Your Dictionary | Want a lightning summary of Jaron Lanier's epic biography of Virtual Reality? Of course you do... - Phill Rowley | Jaron Lanier: American computer scientist, musician, and author - People Pill | One Has This Feeling of Having Contributed to Something That’s Gone Very Wrong - Intelligencer | TEDxSF - Jaron Lanier - You Are Not a Gadget | Jaron Lanier - Learning by Experience & Play
Συμμετείχα σε όλες τις διαλέξεις και όλα τα live quiz στο classtime με όνομα "Dimitris Kostadimas P2019108", επίσης πείρα μέρος σε όλα τα εβδομαδιαία video quiz του μαθήματος συνδεδεμένος με το github account μου "KuhakuNeko" και email "[email protected]".
Asciinema link Ver.1: Έξτρα Άσκηση Terminal 1 Ver.1
Asciinema link Ver.2: Έξτρα Άσκηση Terminal 1 Ver.2
Είχα κάνει και αυτή την επιπλέον άσκηση γραμμής εντολών όμως αποφασισα να την τοποθετίσω στις έξτρα ασκήσεις διότι δεν υπήρχε κατι ιδιαίτερο κάνω shell script.
Αυτή η εργασία ζητούσε να δημιουργήσουμε μια παρουσίαση που να ανοίγει εντός του terminal και να έχει 3 διαφάνειες, μια με το ΑΜ μας, μια λίστα με checkboxes από τα παραδοτέα που έχουμε κάνει, και μια ακόμη που αναφέρει κάποια πράγματα που δημιούργησα.
Στην version 1 χρησιμοποίησα το εργαλείο mdp το οποίο σου επιτρέπει να δημιουργήσεις μια παρουσίαση μέσω ενός αρχείου γραμμένο σε markdown. Γράφοντας mdp και το δίνοντας το path προς το text αρχείο το mdp αρχίζει την παρουσίαση. Το συγκεκριμένο εργαλείο χρησιμοποιεί τον ίδιο τύπο markdown με το github επομένως η συγγραφή διαφανειών είναι πολύ εύκολη. Έχω προσθέσει link, checkboxes, και έχω κάνει highlight στην τελική διαφάνεια. (Δείχνω το αρχείο μέσο του nano editor)
Στην 2η version χρησιμοποιώ άλλα 2 εργαλεία για την δημιουργία της ίδιας διαφάνειας. Το πρώτο εργαλείο είναι το patat. Το patat όπως και το mdp αρχίζει την παρουσίαση με παρόμοια εντολή. Η διαφορά τους είναι ότι το patat επιτρέπει και την εισαγωγή εικονων και σου δίνει περισσότερες επιλογές όσον αφορά τα χρώματα και το layout. Χρησιμοποιεί και αυτό markdown όμως έχει και κάποιες προθήκες. Το τρίτο tool που χρησιμοποιώ είναι το present το οποίο κατά την γνώμη μου είναι το καλύτερο από τα προαναφερόμενα. Το present χρησιμοποιώντας markdown μπορεί και δημιουργεί επικεφαλίδες τύπου ascii art, σου επιτρέπει να αλλάξεις τα χρώματα των γραμμάτων και του background color, και πάνω από όλα σε αφήνει να βάλεις εφέ και custom transitions. Αυτά επιτυγχάνονται με εντολές markdown όπως τις “” και “<!—effect=stars -->” οι οποίες φαίνονται πως γίνετε η σωστή χρήση τους και στο asciinema.
Mdp, Patat, Present, Nano
Ubuntu Manpage: mdp - A command line based presentation tool | John Kennedy - mdp presentation - gitlab | mdp - Markdown Presentation tool video | About task lists - GitHub Docs | Patat Readme.md developer page | Present Readme.md developer page
Τελειώνοντας την εργασία εξαμήνου έχω καταφέρει πολλούς από τους αρχικούς μου στόχους, και βρέθηκα ένα βήμα πιο κοντά στους απώτερους μεγαλύτερους στόχους μου. Με τις εργασίες στο terminal κατάφερα να εξοικειωθώ με ένα διαφορετικό λειτουργικό από τα πιο σύνηθες σε μένα, ενώ πλέων η οπτική μου για το terminal άλλαξε εντελώς και το έχω ενσωματώσει στην καθημερινή μου ζωή για συγκεκριμένες εργασίες. Χρησιμοποιώ πλέων με άνεση το terminal και ένα αρκετά μεγάλο ρεπερτόριο προγραμμάτων από τις ασκήσεις που έκανα και όχι μόνο. Ακόμη ξεκινώντας από το 0 παρόλο που δεν είχα ξανά-ασχοληθεί με το shell scripting και το pipelining κατάφερα να δημιουργήσω εφαρμογές με νόημα (και κάποιου είδους interface) οι οποίες είναι χρήσιμες στην καθημερινή ζωή, ακόμα και αν το γραφικό περιβάλλον τους δεν ήταν υψηλού επιπέδου.
Κατάφερα να εξοικειωθώ πολύ με το GitHub και τελικά πραγματικά έγινα πολύ πιο ενεργός, ανεβάζοντας παλιές μου δημιουργίες, αλλά και αναπτύσσοντας καινούργιες και πρωτότυπες όπως τα shell scripts των ασκήσεών μου. Ταυτόχρονα είναι και ένας νέος τρόπος επικοινωνίας με άλλους προγραμματιστές και tech enthusiasts και μια νέα πηγή ιδεών.
Επιπλέoν επέλεξα ασκήσεις προγραμματισμού οι οποίες σχετίζονται περισσότερο με τους στόχους μου. Έμαθα αρκετά μέσα από τις εργασίες προγραμματισμού τα οποία μπορώ να τα εφαρμόσω σε σελίδες που δημιουργώ (π.χ. να πραγματοποιούνε ενέργειες με βάση τα πλήκτρα, ή διαδραστικά μενού με πολλούς διαφορετικούς τύπους δεδομένων, μικρά βιντεοπαιχνίδια κ.α.). Μέσα από τις ασκήσεις όχι μόνο έμαθα την δομή αυτών των γλωσσών καλύτερα από ότι γνώριζα ως τώρα αλλά επέκτεινα πολύ τις γνώσεις μου στο πώς να τις συνδυάσω μεταξύ τους και να χρησιμοποιήσω τα ξεχωριστά εργαλεία τις κάθε μιας ώστε να δημιουργήσω κάτι πιο συνολικό. Παίρνοντας κάθε κομμάτι μπορώ πλέων να τα εφαρμόσω σε κάτι μεγαλύτερο, που είναι αυτό που ήθελα. Μέχρι τώρα ήμουν πιο εγκλωβισμένος στις στατικές σελίδες όμως οι εργασίες με βοήθησαν να ξεφύγω από αυτό και να αρχίσω να φτιάχνω πιο διαδραστικά και καλαίσθητα πράγματα.
Ένας άλλος στόχος μου ήταν να μάθω περισσότερα για την διάδραση και για την εμπειρία από την μεριά του χρήστη. Σε αυτό το κομμάτι έμαθα πάρα πολλά όμως όχι τόσο για το πώς αντιλαμβάνεται την διάδραση ο χρήστης αλλά περισσότερο από την μεριά των δημιουργών των διαφορετικών τρόπων διάδρασης. Μέσα από τα εβδομαδιαία quiz, τις διαλέξεις αλλά και το συμμετοχικό περιεχόμενο όπου έκανα μια διευρυμένη έρευνα έμαθα πάρα πολλά για το πως δημιουργήθηκαν αυτοί οι διαφορετικοί τρόποι διάδρασης που χρησιμοποιούμε καθημερινά για να επικοινωνήσουμε με τις συσκευές. Όλα όσα έμαθα ήταν τόσο ενδιαφέροντα και με βοήθησαν να σχηματίσω μια πιο εμπεριστατωμένη γνώμη πάνω σε διάφορα θέματα. Ακόμα με έβαλαν και στην θέση των μεγάλων δημιουργών διάφορων συστημάτων και τρόπων διάδρασης, έμαθα για τα λάθη τους, τις μεγάλες συνεισφορές τους, τις οπτικές τους και έμαθα για την διαδρομή τους μέσα στα χρόνια. Αυτό το κομμάτι ήταν ίσως και το πιο ενδιαφέρων καθώς πιστεύω ότι όλα αυτά είναι πράγματα που πρέπει να ξέρω για να μπορέσω να πάω μπροστά σε αυτό τον τομέα.
Κλείνοντας την εργασία του εξαμήνου μπορώ να πω ότι μεγάλο ποσοστό των στόχων μου ολοκληρώθηκε. Ακόμη έμαθα και υλοποίησα πράγματα που δεν είχα σκεπτεί ότι χρειαζόμουν. Όλα αυτά με βοήθησαν στην ολοκλήρωση των βασικών μου στόχων αλλά με έφεραν και ένα βήμα πιο κοντά στον μεγαλύτερο απώτερο σκοπό μου που είναι τελικά να δημιουργήσω κι εγώ κάποια στιγμή ένα νέο ή ξεχωριστό τρόπο διάδρασης.
