Ασκήσεις

Audio player

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

Button

Διαδραστικό παράδειγμα κώδικα που δημιουργεί ένα κουμπί που εκτελέι διαφορετικές λειτουργίες κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκ...

Calculator

Παράδειγμα οπτικής και λειτουργικής εξομοίωσης αριθμομηχανής.

Camera motion color

Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...

Camera motion

Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει δύο διαφορετικά πλαίσια (πράσινο και κόκκινο). Όταν εντοπιστεί κίνηση σε κάποιο πλαίσι...

CSS queries

Παράδειγμα κώδικα με σκοπό να γίνει κατανοητή η χρήση των CSS media queries. Αλλάζοντας το μέγεθος του παραθύρου του περιηγητή (browser) σας αλλάζει το χρώμα...

Google maps

Έυρεση τοποθεσίας χρήστη χρησιμοποιώντας το Google Maps API (https://developers.google.com/maps/?hl=en).

3D image

Διαδραστικό παράδειγμα εικόνων χρησιμοποιώντας την τεχνική parallax. Στο συγκεκριμένο παράδειγμα η τεχνική αυτή δημιουργεί την αίσθηση του 3d περιβαλλντος. Ο...

Image processing

Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...

Image zoom

Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...

Image

Διαδραστικό παράδειγμα κώδικα που εισάγει μια εικόνα τύπου SVG (https://en.wikipedia.org/wiki/Scalable_Vector_Graphics). Όταν εκτελείται από το χρήστη η λειτ...

Interactive Text

Διαδραστικό παράδειγμα κώδικα που δημιουργεί ειδικά εφέ κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα) πάνω στο κείμενο. Για τη δημιουργία αυτών τω...

Keyboard input

Μετακίνηση αντικειμένου μέσω πληκτρολογίου (html Canvas)

Maps location

Εύρεση τοποθεσίας μέσω της χρήσης φόρμας εισόδου και του Google Maps API (https://developers.google.com/maps/?hl=en).

Menu CSS

Παράδειγμα εναλλακτικού μενού χωρίς τη χρήση Javascript. Για τη δημιουργία της διάδρασης έχει χρησιμοποιηθεί ο CSS preprocessor SCSS.

Menu dropdown

Διαδραστικό παράδειγμα dropdown μενού χωρίς τη χρήση Javascript.

Menu empty

Παράδειγμα εναλλακτικού μενού χωρίς ενσωματωμένες λειτουργίες.

Menu pie

Διαδραστικό παράδειγμα πολύπλοκου κυκλικού μενού. Με την επιλογή του κουμπιού “open” από το χρήστη, εμφανίζονται μια σειρά από πιθανές επιλογές.

Menu scroll

Διαδραστικό παράδειγμα responsive μενού σε One page template χρησιμοποιώντας τη βιβιοθήκη Τwitter Βootstrap 3.0 . Στο παράδειγμα εμφανίζεται το μενού έπειτα ...

Menu slide

Παράδειγμα slide μενού χωρίς ενσωματωμένες λειτουργίες.

Mouse button

Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, πατώντας το κουμπί “ANOTHER” μπορεί να αλλάξει τα εκτυπωμένα μηνύματα.

Mouse draw

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

Mouse eraser

Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως “σβηστήρι”. Υπάρχουν δύο διαθέσιμες εικόνες και η μία σβήνει μετακινώντας τον κέρσορα για να απ...

Mouse form

Παράδειγμα εισόδου μέσω της συσκευής Ποντίκι Νο.4

Mouse option

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

Mouse scroll

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

Sortable list

Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...

Switch

Διαδραστικό παράδειγμα κώδικα που αναπαριστά τη λειτουργία ενός διακόπτη. Ο χρήστης μπορεί να επιλέξει ανάμεσα στις επιλογές ON και OFF. Για τη δημιουργία το...

Video player

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

Visualization dataset

Διαδραστικό παράδειγμα γραφήματος χρησιμοποιώντας τη βιβλιοθήκη d3.js (http://d3js.org). Το παράδειγμα οπτικοποιεί 2 διαφορετικά σετ δεδομένων (datasets).

Visualization

Παράδειγμα διαδραστικού γραφήματος No.1