Κεφάλαια και υποενότητες

Αρχέτυπα

Back to Top ↑

Ορισμός

Alan Kay

Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...

Minecraft

Η περίπτωση του Minecraft Πριν ο προγραμματισμός της διάδρασης αποκτήσει πρωταγωνιστικό ρόλο στην έρευνα και στη βιομηχανία, η επιτυχία ενός προϊόντος μπορ...

Mouse

Η περίπτωση της συσκευής εισόδου ποντίκι Αν και σήμερα η χρήση της συσκευής εισόδου ‘ποντίκι’ σε συνδυασμό με τη γραφική επιφάνεια εργασίας και τις αντίστο...

Xerox Star

Η περίπτωση του Xerox Star Η γραφική επιφάνεια εργασίας όπως είναι διαθέσιμη σε πολλούς εμπορικούς επιτραπέζιους υπολογιστές λίγο διαφέρει από εκείνη που ε...

Back to Top ↑

Εργαλεία

Arduino

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

Reactable

Η περίπτωση του Reactable Το Reactable είναι ένα ψηφιακό μουσικό σύστημα που βασίζεται στη διάδραση με την αφή και με απτά αντικείμενα. Εκτός από την εκθεσ...

Back to Top ↑

Μοντέλα

Beyond usability

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

Facebook

Η περίπτωση του Facebook Η ιστορία του κοινωνικού δικτύου Facebook έχει πολλές ενδιαφέρουσες πλευρές, κάποιες από αυτές αξίζει να ανακτήσει κανείς συνοπτικ...

Google Search

Η αποτελεσματικότητα της μηχανής αναζήτησης Google και η απλότητα στην διεπαφή της H μηχανή αναζήτησης της Google είναι μια από τις δημοφιλέστερες και κατέχ...

Back to Top ↑

Μορφές

Back to Top ↑

Μέθοδος

Η σχεδίαση των καθημερινών πραγμάτων

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

Microsoft Windows

Η περίπτωση των Microsoft Windows {.figure} Η επιφάνεια εργασίας του επιτραπέζιου υπολογιστή είναι ένα δημοφιλές και ευέλικτο σύστημα που πέρασε από πολλο...

Back to Top ↑

synthesis

Firebase form

Η φόρμα χρησιμοποιεί την δικτυακή βάση δεδομένων firebase.

Form validation

Το παράδειγμα αυτό βασίζεται σε regular expression για να εντοπίσει σφάλματα στην είσοδου του χρήστη.

3D image

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

Keyboard input

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

Plyr video player

Το βίντεο χρησιμοποιεί για τον έλεγχο το σύστημα αναπαραγωγής της βιβλιοθήκης Plyr.

Visualization dataset

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

Visualization

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

YouTube video player

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

Back to Top ↑

method

CSS queries

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

Mouse draw

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

Back to Top ↑

Πρόλογος

Back to Top ↑

Σύνθεση

Wikipedia

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

World Wide Web

Η περίπτωση του WWW Η κατασκευή του συστήματος World Wide Web (WWW) και κυρίως η πολύ γρήγορη αποδοχή του από ένα μεγάλο εύρος χρηστών ήταν μια εξέλιξη κομ...

Back to Top ↑

Μελέτη Περίπτωσης

Beyond usability

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

Arduino

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

Facebook

Η περίπτωση του Facebook Η ιστορία του κοινωνικού δικτύου Facebook έχει πολλές ενδιαφέρουσες πλευρές, κάποιες από αυτές αξίζει να ανακτήσει κανείς συνοπτικ...

Google Search

Η αποτελεσματικότητα της μηχανής αναζήτησης Google και η απλότητα στην διεπαφή της H μηχανή αναζήτησης της Google είναι μια από τις δημοφιλέστερες και κατέχ...

Apple iPod

Η περίπτωση του iPod και iTunes Η περίπτωση της συσκευής αναπαραγωγής μουσικής iPod σήμανε την αρχή της γρήγορης μετατόπισης της διάδρασης από τον επιτραπέ...

Minecraft

Η περίπτωση του Minecraft Πριν ο προγραμματισμός της διάδρασης αποκτήσει πρωταγωνιστικό ρόλο στην έρευνα και στη βιομηχανία, η επιτυχία ενός προϊόντος μπορ...

Mouse

Η περίπτωση της συσκευής εισόδου ποντίκι Αν και σήμερα η χρήση της συσκευής εισόδου ‘ποντίκι’ σε συνδυασμό με τη γραφική επιφάνεια εργασίας και τις αντίστο...

Η σχεδίαση των καθημερινών πραγμάτων

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

Reactable

Η περίπτωση του Reactable Το Reactable είναι ένα ψηφιακό μουσικό σύστημα που βασίζεται στη διάδραση με την αφή και με απτά αντικείμενα. Εκτός από την εκθεσ...

Xerox Star

Η περίπτωση του Xerox Star Η γραφική επιφάνεια εργασίας όπως είναι διαθέσιμη σε πολλούς εμπορικούς επιτραπέζιους υπολογιστές λίγο διαφέρει από εκείνη που ε...

Wikipedia

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

Microsoft Windows

Η περίπτωση των Microsoft Windows {.figure} Η επιφάνεια εργασίας του επιτραπέζιου υπολογιστή είναι ένα δημοφιλές και ευέλικτο σύστημα που πέρασε από πολλο...

World Wide Web

Η περίπτωση του WWW Η κατασκευή του συστήματος World Wide Web (WWW) και κυρίως η πολύ γρήγορη αποδοχή του από ένα μεγάλο εύρος χρηστών ήταν μια εξέλιξη κομ...

Xerox PARC

Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...

Back to Top ↑

definition

Button

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

Image

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

Interactive Text

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

Switch

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

Back to Top ↑

tools

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 μενού χωρίς ενσωματωμένες λειτουργίες.

Sortable list

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

Back to Top ↑

forms

Camera motion color

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

Camera motion

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

Back to Top ↑

archetypes

Mouse button

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

Mouse form

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

Mouse option

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

Mouse scroll

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

Back to Top ↑

Εισαγωγή

Back to Top ↑

Βιογραφία

Alan Kay

Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...

Mark D. Weiser

Σύντομη βιογραφία του Mark D. Weiser. Ο Mark D. Weiser γεννήθηκε στο Σικάγο και μεγάλωσε στην Νέα Υόρκη, όπου ο πατέρας του ήταν καθηγητής χημείας στο κρατι...

Back to Top ↑

output-device

Back to Top ↑

making

Quantified Self

Μέτρηση Φυσικής Δραστηριότητας Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών ενθάρρυνσης της φυσικής άσκησης. Να διαλ...

Collaborative System

Συνεργατικό σύστημα Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) συνεργατικών εκπαιδευτικών εφαρμογών. Να διαλέξετε είτε εφαρμ...

Media Player

Αναπαραγωγή βίντεο Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών που παίζουν βίντεο ή μουσική, και που είναι ελεύθερα...

Remote Control

Τηλεχειρισμός Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών που είναι ελεύθερα διαθέσιμες στον υπολογιστή, για τον τη...

Video Game

Εκπαιδευτικό βίντεο-παιχνίδι Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) βίντεο-παιχνιδιών που είναι ελεύθερα διαθέσιμα στον ...

Back to Top ↑

models

Calculator

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

Google maps

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

Image processing

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

Image zoom

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

Maps location

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

Back to Top ↑

Συνεργατικά Συστήματα

Back to Top ↑

input-device

Back to Top ↑

Συσκευές Εισόδου

Back to Top ↑

Εκπαιδευτική Τεχνολογία

Back to Top ↑

Κινητός Υπολογισμός

Back to Top ↑

Συσκευές εισόδου

Back to Top ↑

preface

Back to Top ↑

notes

noble-book

Το βιβλίο του Noble [@noble2009programming] είναι περισσότερο όμοιο με αυτό το βιβλίο από τα άλλα, καθώς είναι πολύ προσβάσιμο και δίνει έμφαση στην οπτικοπο...

olsen-book

Το βιβλίο του Olsen [@olsen2009building] περιγράφει κυρίως τις γραφικές διεπαφές του επιτραπέζιου ΗΥ, πολλές από τις οποίες έχουν και εφαρμογή σε φορητές συσ...

thimbleby-book

Το βιβλίο του Thimbleby [@thimbleby2007press] είναι περισσότερο προσβάσιμο και δεν έχει υψηλές απαιτήσεις αναφορικά με προηγούμενες γνώσεις, ταυτόχρονα όμως ...

Back to Top ↑

book

noble-book

Το βιβλίο του Noble [@noble2009programming] είναι περισσότερο όμοιο με αυτό το βιβλίο από τα άλλα, καθώς είναι πολύ προσβάσιμο και δίνει έμφαση στην οπτικοπο...

olsen-book

Το βιβλίο του Olsen [@olsen2009building] περιγράφει κυρίως τις γραφικές διεπαφές του επιτραπέζιου ΗΥ, πολλές από τις οποίες έχουν και εφαρμογή σε φορητές συσ...

thimbleby-book

Το βιβλίο του Thimbleby [@thimbleby2007press] είναι περισσότερο προσβάσιμο και δεν έχει υψηλές απαιτήσεις αναφορικά με προηγούμενες γνώσεις, ταυτόχρονα όμως ...

Back to Top ↑

review

noble-book

Το βιβλίο του Noble [@noble2009programming] είναι περισσότερο όμοιο με αυτό το βιβλίο από τα άλλα, καθώς είναι πολύ προσβάσιμο και δίνει έμφαση στην οπτικοπο...

olsen-book

Το βιβλίο του Olsen [@olsen2009building] περιγράφει κυρίως τις γραφικές διεπαφές του επιτραπέζιου ΗΥ, πολλές από τις οποίες έχουν και εφαρμογή σε φορητές συσ...

thimbleby-book

Το βιβλίο του Thimbleby [@thimbleby2007press] είναι περισσότερο προσβάσιμο και δεν έχει υψηλές απαιτήσεις αναφορικά με προηγούμενες γνώσεις, ταυτόχρονα όμως ...

Back to Top ↑

Μικρουπολογιστής

Back to Top ↑

Βιντεοπαιχνίδια

Back to Top ↑

easy

Button

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

Image processing

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

Back to Top ↑

Μικροϋπολογιστές

Back to Top ↑

Γλώσσες Προγραμματισμού

Back to Top ↑

Φορετός Υπολογισμός

Back to Top ↑

Πρωτότυπο

Back to Top ↑

Πολυμέσα

Back to Top ↑

Συσκευές Εξόδου

Back to Top ↑

GUI

Back to Top ↑

Desktop

Back to Top ↑

Τροπική διεπαφή

Back to Top ↑

technology

Back to Top ↑

Method

Back to Top ↑

average

Image zoom

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

Back to Top ↑

methods

Mouse eraser

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

Back to Top ↑

success

Xerox PARC

Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...

Back to Top ↑

SYNTHESIS

Back to Top ↑

Προτότυπο

Back to Top ↑

Γραφικά

Back to Top ↑

Έξυπνες Διεπαφές

Back to Top ↑

Μικρουπολογιστές

Back to Top ↑

prototypes

Back to Top ↑

Γραφική Διεπαφή

Back to Top ↑

Αναζήτηση

Back to Top ↑

partner

Back to Top ↑

Οπτικός Προγραμματισμός

Back to Top ↑

Κατασκευή Πρωτοτύπου

Back to Top ↑

Definition

Back to Top ↑

Μεταφορά

Back to Top ↑

Κινητός υπολογισμός

Back to Top ↑

Βίντεοπαιχνίδια

Back to Top ↑

Οπτικός προγραμματισμός

Back to Top ↑

Έμεση διάδραση

Back to Top ↑

Μινιϋπολογιστής

Back to Top ↑

Πολιτισμική Διερεύνηση

Back to Top ↑

Συλλογή απαιτήσεων

Back to Top ↑

ecosystem

Back to Top ↑

Σύνθεση και Κλίμακα

Back to Top ↑

Διάχυτος Υπολογισμός

Back to Top ↑

command line

Back to Top ↑

ubiquitous computing

Back to Top ↑