Button
Διαδραστικό παράδειγμα κώδικα που δημιουργεί ένα κουμπί που εκτελέι διαφορετικές λειτουργίες κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκ...
Ευρετήριο
- HCI 25
- IV 19
- Apple 18
- Alan Kay 10
- mouse 9
- success 9
- iPhone 7
- menu 6
- BASIC 6
- Xerox PARC 5
- Τηλέτυπος 5
- Ivan Sutherland 4
- button 4
- image 4
- Dynabook 4
- Smalltalk 4
- Xerox Alto 4
- WWW 4
- Διδακτορικό 4
- Τερματικό 4
- Tab 4
- Board 4
- Don Norman 3
- Bret Victor 3
- video 3
- visualization 3
- programming 3
- Hypercard 3
- One-button 3
- Commodore PET 3
- iPod 3
- iTV 3
- MIT Lincoln 3
- Microsoft 3
- WYSIWYG 3
- Xerox 3
- history 2
- Steve Jobs 2
- technology 2
- Knuth 2
- Jaron Lanier 2
- picasso 2
- Mark Weiser 2
- camera 2
- motion 2
- css 2
- form 2
- google 2
- map 2
- text 2
- scroll 2
- iPad 2
- NLS 2
- Sketchpad 2
- Virtual Reality 2
- Macintosh 2
- Basic 2
- LINC 2
- Wearable 2
- Atari 2
- Adventure 2
- Προγραμματισμός 2
- Keyboard 2
- tablet 2
- GUI 2
- RAND 2
- Tablet 2
- Πένα 2
- Google 2
- Rand 2
- Έξυπνο κινητό 2
- Myst 2
- Pebble 2
- Seymour Papert 2
- Logo 2
- Pong 2
- Desktop 2
- Mouse 2
- OLPC 2
- DEC 2
- PLATO 2
- Apple2 2
- sun microsystems 2
- Steve Mann 2
- Pad 2
- PARC 2
- Start menu 2
- Bravo 2
- activity tracker 1
- Quantified Self 1
- collaborative system 1
- media player 1
- mobile notes 1
- Photography 1
- tv remote 1
- video game 1
- Aristotle 1
- Grady Booch 1
- Bill Buxton 1
- Auguste Comte 1
- culture 1
- Confucius 1
- Freeman Dyson 1
- Albert Einstein 1
- Antoine de Saint-Exupery 1
- Feynman 1
- Thomas C. Gale 1
- Jesse James Garrett 1
- C.A.R. Hoare 1
- John Holt 1
- computer science 1
- invention 1
- generation 1
- Myron Krueger 1
- medium 1
- J. C. R. Licklider 1
- Marvin Minsky 1
- Paul Rand 1
- Scott Rosenberg 1
- Bjarne Stroustrup 1
- graphics 1
- calculator 1
- color 1
- queries 1
- database 1
- google-charts 1
- 3d 1
- filter 1
- zoom 1
- keyboard 1
- input 1
- location 1
- dropdown 1
- empty 1
- pie 1
- slide 1
- draw 1
- eraser 1
- option 1
- sortable 1
- list 1
- dataset 1
- noble 1
- olsen 1
- thimbleby 1
- Joe Hewitt 1
- Firefox 1
- Blake Ross 1
- Safari 1
- Facebook 1
- ποντίκι 1
- Douglas Engelbart 1
- Επαυξημένη Νοημοσύνη 1
- Sword of Damocles 1
- Canon Cat 1
- Ubiquous Computing 1
- Xanadu 1
- affective usability 1
- arduino 1
- facebok 1
- google search 1
- apple 1
- ipod 1
- moding 1
- making 1
- minecraft 1
- douglas engelbart 1
- donald norman 1
- reactable 1
- xerox star 1
- wikipedia 1
- Microsoft windows 1
- Tim Berners Lee 1
- Marc Weiser 1
- Bill English 1
- Olivetti 1
- Κιτ 1
- Apple Newton 1
- mobile devices 1
- Ergonomics 1
- Wheel 1
- Easter Egg 1
- Ευχρηστία 1
- BBC 1
- BBS 1
- buck 1
- Commodore 1
- Demoscene 1
- Jef Raskin 1
- Modeless 1
- Διάτρητη κάρτα 1
- Chat bot 1
- Design 1
- Mobile App 1
- Drawing 1
- dynabook 1
- laptop 1
- ergonomics 1
- modeling 1
- usability testing 1
- DRI 1
- Προσομοίωση 1
- Εξομοίωση 1
- Github 1
- Αναζήτηση 1
- Assistant 1
- AI 1
- JOSS 1
- BBC micro 1
- App 1
- Υπολογιστής 1
- IRC 1
- winky dink and you 1
- Έξυπνο ρολόι 1
- Donald Knuth 1
- Fonts 1
- Documents 1
- Ρομπότ 1
- General Magic 1
- PDA 1
- Μουσική 1
- Οθόνη αφής 1
- Βίντεο 1
- Menu 1
- Apple 2 1
- Altair 1
- Minitel 1
- Teletel 1
- Internet 1
- Augmented Reality 1
- Mixed reality 1
- Napster 1
- peer-to-peer 1
- No modes 1
- Larry Tesler 1
- Notifications 1
- PDP 1
- Space War 1
- οθόνη αφής 1
- Rotoscoping 1
- Probes 1
- Prototype 1
- Evaluation 1
- pen 1
- Spacewar 1
- Gamepad 1
- spacewar 1
- multiplayer 1
- gamepad 1
- star7 1
- prototype 1
- pda 1
- portable 1
- touchscreen 1
- metaphor 1
- starfire 1
- video prototype 1
- horizontal prototype 1
- itv 1
- Wearable Computer 1
- SugarOS 1
- collaboration 1
- Ivan Shutherland 1
- Graphics 1
- Τηλεόραση 1
- Teletext 1
- command line 1
- Touchpad 1
- Ποντίκι 1
- Αφή 1
- vim 1
- IDE 1
- tmux 1
- editor 1
- VT100 1
- Έξυπνο ρολόϊ 1
- Web 1
- Search 1
- Interaction style 1
- MP3 1
- skins 1
- wristwatch 1
- smartwatch 1
- Xerox Bravo 1
- Star 1
HCI
Calculator
Παράδειγμα οπτικής και λειτουργικής εξομοίωσης αριθμομηχανής.
Firebase form
Η φόρμα χρησιμοποιεί την δικτυακή βάση δεδομένων firebase.
Form validation
Το παράδειγμα αυτό βασίζεται σε regular expression για να εντοπίσει σφάλματα στην είσοδου του χρήστη.
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 eraser
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως “σβηστήρι”. Υπάρχουν δύο διαθέσιμες εικόνες και η μία σβήνει μετακινώντας τον κέρσορα για να απ...
Mouse form
Παράδειγμα εισόδου μέσω της συσκευής Ποντίκι Νο.4
Mouse option
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, μπορεί να αλλάξει δυναμικά το περιεχόμενο που θα εμφανίζεται στη σελίδα. Για το σκο...
Mouse scroll
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου και δίνει ως έξοδο το ανάλογο αποτέλεσμα στην οθόνη. Για να αλλάξει η τιμή εισό...
Plyr video player
Το βίντεο χρησιμοποιεί για τον έλεγχο το σύστημα αναπαραγωγής της βιβλιοθήκης Plyr.
Sortable list
Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...
Switch
Διαδραστικό παράδειγμα κώδικα που αναπαριστά τη λειτουργία ενός διακόπτη. Ο χρήστης μπορεί να επιλέξει ανάμεσα στις επιλογές ON και OFF. Για τη δημιουργία το...
YouTube video player
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Το βίντεο χρησιμοποιεί για την έναρξη και την παύση του το σύστημα αναπαραγωγή...
IV
Calculator
Παράδειγμα οπτικής και λειτουργικής εξομοίωσης αριθμομηχανής.
Camera motion color
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...
Camera motion
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει δύο διαφορετικά πλαίσια (πράσινο και κόκκινο). Όταν εντοπιστεί κίνηση σε κάποιο πλαίσι...
CSS queries
Παράδειγμα κώδικα με σκοπό να γίνει κατανοητή η χρήση των CSS media queries. Αλλάζοντας το μέγεθος του παραθύρου του περιηγητή (browser) σας αλλάζει το χρώμα...
Firebase form
Η φόρμα χρησιμοποιεί την δικτυακή βάση δεδομένων firebase.
Google Charts Visualization
Παράδειγμα που παρουσιάζει το πληθυσμό και GDP Κύπρου και Ελλάδας. Το γράφημα αλλάζει μέσω ενός dropdown menu.
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).
Plyr video player
Το βίντεο χρησιμοποιεί για τον έλεγχο το σύστημα αναπαραγωγής της βιβλιοθήκης Plyr.
Sortable list
Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...
Visualization dataset
Διαδραστικό παράδειγμα γραφήματος χρησιμοποιώντας τη βιβλιοθήκη d3.js (http://d3js.org). Το παράδειγμα οπτικοποιεί 2 διαφορετικά σετ δεδομένων (datasets).
Visualization
Παράδειγμα διαδραστικού γραφήματος No.1
YouTube video player
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Το βίντεο χρησιμοποιεί για την έναρξη και την παύση του το σύστημα αναπαραγωγή...
Apple
Alan Kay
Alan Kay
Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...
Xerox PARC
Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...
mouse
Mouse button
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, πατώντας το κουμπί “ANOTHER” μπορεί να αλλάξει τα εκτυπωμένα μηνύματα.
Mouse draw
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Ο χρήστης μπορεί να χρησιμοποιήσει το ποντίκι για να σχεδιάσει στη λευκή επιφά...
Mouse eraser
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως “σβηστήρι”. Υπάρχουν δύο διαθέσιμες εικόνες και η μία σβήνει μετακινώντας τον κέρσορα για να απ...
Mouse form
Παράδειγμα εισόδου μέσω της συσκευής Ποντίκι Νο.4
Mouse option
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, μπορεί να αλλάξει δυναμικά το περιεχόμενο που θα εμφανίζεται στη σελίδα. Για το σκο...
Mouse scroll
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου και δίνει ως έξοδο το ανάλογο αποτέλεσμα στην οθόνη. Για να αλλάξει η τιμή εισό...
Sortable list
Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...
Mouse
Αν και σήμερα η χρήση της συσκευής εισόδου ‘ποντίκι’ σε συνδυασμό με τη γραφική επιφάνεια εργασίας και τις αντίστοιχες εφαρμογές γραφείου και παραγωγικότητα...
success
Arduino
Το Arduino είναι ένας πολύ δημοφιλής μικροελεγκτής που φτιάχτηκε με αρχικό σκοπό τον προγραμματισμό και την εκπαίδευση των φοιτητών της διάδρασης ανθρώπου κ...
Η ιστορία του κοινωνικού δικτύου Facebook έχει πολλές ενδιαφέρουσες πλευρές, κάποιες από αυτές αξίζει να ανακτήσει κανείς συνοπτικά και ευχάριστα στη σχετικ...
Google Search
Η αποτελεσματικότητα της μηχανής αναζήτησης Google και η απλότητα στην διεπαφή της H μηχανή αναζήτησης της Google είναι μια από τις δημοφιλέστερες και κατέχ...
Η σχεδίαση των καθημερινών πραγμάτων
{.figure} {.figure} Η κατανόηση και η χρήση μιας συσκευής διέπεται από μερικές βασικές και διαχρονικές αξίες που είναι οι ίδιες ανεξάρτητα από το είδος κα...
Reactable
Το Reactable είναι ένα ψηφιακό μουσικό σύστημα που βασίζεται στη διάδραση με την αφή και με απτά αντικείμενα. Εκτός από την εκθεσιακή του εγκατάσταση και τη...
Xerox Star
{.figure} {.figure} Η γραφική επιφάνεια εργασίας όπως είναι διαθέσιμη σε πολλούς εμπορικούς επιτραπέζιους υπολογιστές λίγο διαφέρει από εκείνη που είχε ο ...
Wikipedia
Η συμμετοχική ανάπτυξη και η ευέλικτη διανομή και αλλαγή ενός προϊόντος για υπολογιστές ξεκίνησε με την περίπτωση του λογισμικού ανοικτού κώδικα. Όμως, η δι...
Microsoft Windows
Η επιφάνεια εργασίας του επιτραπέζιου υπολογιστή είναι ένα δημοφιλές και ευέλικτο σύστημα που πέρασε από πολλούς κύκλους ανάπτυξης και προσαρμογής, τόσο κατ...
World Wide Web
Η κατασκευή του συστήματος World Wide Web (WWW) και κυρίως η πολύ γρήγορη αποδοχή του από ένα μεγάλο εύρος χρηστών ήταν μια εξέλιξη κομβικής σημασίας για τη...
iPhone
Back to Top ↑BASIC
Xerox PARC
Xerox PARC
Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...
Τηλέτυπος
Back to Top ↑Ivan Sutherland
Alan Kay
Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...
image
3D image
Διαδραστικό παράδειγμα εικόνων χρησιμοποιώντας την τεχνική parallax. Στο συγκεκριμένο παράδειγμα η τεχνική αυτή δημιουργεί την αίσθηση του 3d περιβαλλντος. Ο...
Image processing
Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...
Image zoom
Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...
Image
Διαδραστικό παράδειγμα κώδικα που εισάγει μια εικόνα τύπου SVG (https://en.wikipedia.org/wiki/Scalable_Vector_Graphics). Όταν εκτελείται από το χρήστη η λειτ...
Dynabook
Alan Kay
Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...
Smalltalk
Alan Kay
Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...
Xerox Alto
Alan Kay
Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...
Mark D. Weiser
Σύντομη βιογραφία του Mark D. Weiser. Ο Mark D. Weiser γεννήθηκε στο Σικάγο και μεγάλωσε στην Νέα Υόρκη, όπου ο πατέρας του ήταν καθηγητής χημείας στο κρατι...
WWW
World Wide Web
Η κατασκευή του συστήματος World Wide Web (WWW) και κυρίως η πολύ γρήγορη αποδοχή του από ένα μεγάλο εύρος χρηστών ήταν μια εξέλιξη κομβικής σημασίας για τη...
Διδακτορικό
Back to Top ↑Τερματικό
Back to Top ↑Tab
Back to Top ↑Board
Back to Top ↑Don Norman
Back to Top ↑Bret Victor
Alan Kay
Σύντομη βιογραφία του Alan Kay Από πολύ μικρή ηλικία ο Alan Kay έχει παρουσιάσει σημαντικά ταλέντα, όπως ανάγνωση πριν πάει στο δημοτικό, με αποτέλεσμα να β...
video
Form validation
Το παράδειγμα αυτό βασίζεται σε regular expression για να εντοπίσει σφάλματα στην είσοδου του χρήστη.
Plyr video player
Το βίντεο χρησιμοποιεί για τον έλεγχο το σύστημα αναπαραγωγής της βιβλιοθήκης Plyr.
YouTube video player
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Το βίντεο χρησιμοποιεί για την έναρξη και την παύση του το σύστημα αναπαραγωγή...
visualization
Google Charts Visualization
Παράδειγμα που παρουσιάζει το πληθυσμό και GDP Κύπρου και Ελλάδας. Το γράφημα αλλάζει μέσω ενός dropdown menu.
Visualization dataset
Διαδραστικό παράδειγμα γραφήματος χρησιμοποιώντας τη βιβλιοθήκη d3.js (http://d3js.org). Το παράδειγμα οπτικοποιεί 2 διαφορετικά σετ δεδομένων (datasets).
Visualization
Παράδειγμα διαδραστικού γραφήματος No.1
programming
noble-book
Το βιβλίο του Noble [@noble2009programming] είναι περισσότερο όμοιο με αυτό το βιβλίο από τα άλλα, καθώς είναι πολύ προσβάσιμο και δίνει έμφαση στην οπτικοπο...
olsen-book
Το βιβλίο του Olsen [@olsen2009building] περιγράφει κυρίως τις γραφικές διεπαφές του επιτραπέζιου ΗΥ, πολλές από τις οποίες έχουν και εφαρμογή σε φορητές συσ...
thimbleby-book
Το βιβλίο του Thimbleby [@thimbleby2007press] είναι περισσότερο προσβάσιμο και δεν έχει υψηλές απαιτήσεις αναφορικά με προηγούμενες γνώσεις, ταυτόχρονα όμως ...
Hypercard
Back to Top ↑Commodore PET
Back to Top ↑iPod
Back to Top ↑iTV
Back to Top ↑MIT Lincoln
Back to Top ↑Microsoft
Back to Top ↑WYSIWYG
Xerox
Back to Top ↑history
Back to Top ↑Steve Jobs
Xerox PARC
Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...
technology
Back to Top ↑Knuth
Back to Top ↑Jaron Lanier
Back to Top ↑picasso
Back to Top ↑Mark Weiser
Mark D. Weiser
Σύντομη βιογραφία του Mark D. Weiser. Ο Mark D. Weiser γεννήθηκε στο Σικάγο και μεγάλωσε στην Νέα Υόρκη, όπου ο πατέρας του ήταν καθηγητής χημείας στο κρατι...
camera
Camera motion color
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...
Camera motion
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει δύο διαφορετικά πλαίσια (πράσινο και κόκκινο). Όταν εντοπιστεί κίνηση σε κάποιο πλαίσι...
motion
Camera motion color
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...
Camera motion
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει δύο διαφορετικά πλαίσια (πράσινο και κόκκινο). Όταν εντοπιστεί κίνηση σε κάποιο πλαίσι...
css
CSS queries
Παράδειγμα κώδικα με σκοπό να γίνει κατανοητή η χρήση των CSS media queries. Αλλάζοντας το μέγεθος του παραθύρου του περιηγητή (browser) σας αλλάζει το χρώμα...
Menu CSS
Παράδειγμα εναλλακτικού μενού χωρίς τη χρήση Javascript. Για τη δημιουργία της διάδρασης έχει χρησιμοποιηθεί ο CSS preprocessor SCSS.
form
Firebase form
Η φόρμα χρησιμοποιεί την δικτυακή βάση δεδομένων firebase.
Mouse form
Παράδειγμα εισόδου μέσω της συσκευής Ποντίκι Νο.4
Google maps
Έυρεση τοποθεσίας χρήστη χρησιμοποιώντας το Google Maps API (https://developers.google.com/maps/?hl=en).
Maps location
Εύρεση τοποθεσίας μέσω της χρήσης φόρμας εισόδου και του Google Maps API (https://developers.google.com/maps/?hl=en).
map
Google maps
Έυρεση τοποθεσίας χρήστη χρησιμοποιώντας το Google Maps API (https://developers.google.com/maps/?hl=en).
Maps location
Εύρεση τοποθεσίας μέσω της χρήσης φόρμας εισόδου και του Google Maps API (https://developers.google.com/maps/?hl=en).
text
Interactive Text
Διαδραστικό παράδειγμα κώδικα που δημιουργεί ειδικά εφέ κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα) πάνω στο κείμενο. Για τη δημιουργία αυτών τω...
scroll
Menu scroll
Διαδραστικό παράδειγμα responsive μενού σε One page template χρησιμοποιώντας τη βιβιοθήκη Τwitter Βootstrap 3.0 . Στο παράδειγμα εμφανίζεται το μενού έπειτα ...
Mouse scroll
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου και δίνει ως έξοδο το ανάλογο αποτέλεσμα στην οθόνη. Για να αλλάξει η τιμή εισό...
iPad
Back to Top ↑NLS
Back to Top ↑Sketchpad
Back to Top ↑Virtual Reality
Back to Top ↑Macintosh
Back to Top ↑Basic
Back to Top ↑LINC
Back to Top ↑Wearable
Back to Top ↑Atari
Back to Top ↑Adventure
Back to Top ↑Προγραμματισμός
Back to Top ↑Keyboard
Back to Top ↑tablet
Back to Top ↑GUI
Back to Top ↑RAND
Back to Top ↑Tablet
Back to Top ↑Πένα
Back to Top ↑Rand
Back to Top ↑Έξυπνο κινητό
Back to Top ↑Myst
Back to Top ↑Pebble
Back to Top ↑Seymour Papert
Back to Top ↑Logo
Back to Top ↑Pong
Back to Top ↑Desktop
Back to Top ↑Mouse
Back to Top ↑OLPC
Back to Top ↑DEC
Back to Top ↑PLATO
Back to Top ↑Apple2
Back to Top ↑sun microsystems
Back to Top ↑Steve Mann
Back to Top ↑Pad
Back to Top ↑PARC
Back to Top ↑Bravo
Back to Top ↑activity tracker
Quantified Self
Μέτρηση Φυσικής Δραστηριότητας Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών ενθάρρυνσης της φυσικής άσκησης. Να διαλ...
Quantified Self
Quantified Self
Μέτρηση Φυσικής Δραστηριότητας Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών ενθάρρυνσης της φυσικής άσκησης. Να διαλ...
collaborative system
Collaborative System
Συνεργατικό σύστημα Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) συνεργατικών εκπαιδευτικών εφαρμογών. Να διαλέξετε είτε εφαρμ...
media player
Media Player
Αναπαραγωγή βίντεο Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών που παίζουν βίντεο ή μουσική, και που είναι ελεύθερα...
mobile notes
Mobile Notes
Κινητές σημειώσεις
Photography
Photography
Φωτογραφία
tv remote
Remote Control
Τηλεχειρισμός Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) εφαρμογών που είναι ελεύθερα διαθέσιμες στον υπολογιστή, για τον τη...
video game
Video Game
Εκπαιδευτικό βίντεο-παιχνίδι Ανάλυση σχετικών έργων Να καταγράψετε τις ιδιότητες μερικών (3-4) βίντεο-παιχνιδιών που είναι ελεύθερα διαθέσιμα στον ...
Aristotle
Back to Top ↑Grady Booch
Back to Top ↑Bill Buxton
Back to Top ↑Auguste Comte
Back to Top ↑culture
Back to Top ↑Confucius
Back to Top ↑Freeman Dyson
Back to Top ↑Albert Einstein
Back to Top ↑Antoine de Saint-Exupery
Back to Top ↑Feynman
Back to Top ↑Thomas C. Gale
Back to Top ↑Jesse James Garrett
Back to Top ↑C.A.R. Hoare
Back to Top ↑John Holt
Back to Top ↑computer science
Back to Top ↑invention
Back to Top ↑generation
Back to Top ↑Myron Krueger
Back to Top ↑medium
Back to Top ↑J. C. R. Licklider
Back to Top ↑Marvin Minsky
Back to Top ↑Paul Rand
Back to Top ↑Scott Rosenberg
Back to Top ↑Bjarne Stroustrup
Back to Top ↑graphics
Back to Top ↑calculator
Calculator
Παράδειγμα οπτικής και λειτουργικής εξομοίωσης αριθμομηχανής.
color
Camera motion color
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...
queries
CSS queries
Παράδειγμα κώδικα με σκοπό να γίνει κατανοητή η χρήση των CSS media queries. Αλλάζοντας το μέγεθος του παραθύρου του περιηγητή (browser) σας αλλάζει το χρώμα...
database
Firebase form
Η φόρμα χρησιμοποιεί την δικτυακή βάση δεδομένων firebase.
google-charts
Google Charts Visualization
Παράδειγμα που παρουσιάζει το πληθυσμό και GDP Κύπρου και Ελλάδας. Το γράφημα αλλάζει μέσω ενός dropdown menu.
3d
3D image
Διαδραστικό παράδειγμα εικόνων χρησιμοποιώντας την τεχνική parallax. Στο συγκεκριμένο παράδειγμα η τεχνική αυτή δημιουργεί την αίσθηση του 3d περιβαλλντος. Ο...
filter
Image processing
Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...
zoom
Image zoom
Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...
keyboard
Keyboard input
Μετακίνηση αντικειμένου μέσω πληκτρολογίου (html Canvas)
input
Keyboard input
Μετακίνηση αντικειμένου μέσω πληκτρολογίου (html Canvas)
location
Maps location
Εύρεση τοποθεσίας μέσω της χρήσης φόρμας εισόδου και του Google Maps API (https://developers.google.com/maps/?hl=en).
dropdown
Menu dropdown
Διαδραστικό παράδειγμα dropdown μενού χωρίς τη χρήση Javascript.
empty
Menu empty
Παράδειγμα εναλλακτικού μενού χωρίς ενσωματωμένες λειτουργίες.
pie
Menu pie
Διαδραστικό παράδειγμα πολύπλοκου κυκλικού μενού. Με την επιλογή του κουμπιού “open” από το χρήστη, εμφανίζονται μια σειρά από πιθανές επιλογές.
slide
Menu slide
Παράδειγμα slide μενού χωρίς ενσωματωμένες λειτουργίες.
draw
Mouse draw
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Ο χρήστης μπορεί να χρησιμοποιήσει το ποντίκι για να σχεδιάσει στη λευκή επιφά...
eraser
Mouse eraser
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως “σβηστήρι”. Υπάρχουν δύο διαθέσιμες εικόνες και η μία σβήνει μετακινώντας τον κέρσορα για να απ...
option
Mouse option
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, μπορεί να αλλάξει δυναμικά το περιεχόμενο που θα εμφανίζεται στη σελίδα. Για το σκο...
sortable
Sortable list
Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...
list
Sortable list
Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...
dataset
Visualization dataset
Διαδραστικό παράδειγμα γραφήματος χρησιμοποιώντας τη βιβλιοθήκη d3.js (http://d3js.org). Το παράδειγμα οπτικοποιεί 2 διαφορετικά σετ δεδομένων (datasets).
noble
noble-book
Το βιβλίο του Noble [@noble2009programming] είναι περισσότερο όμοιο με αυτό το βιβλίο από τα άλλα, καθώς είναι πολύ προσβάσιμο και δίνει έμφαση στην οπτικοπο...
olsen
olsen-book
Το βιβλίο του Olsen [@olsen2009building] περιγράφει κυρίως τις γραφικές διεπαφές του επιτραπέζιου ΗΥ, πολλές από τις οποίες έχουν και εφαρμογή σε φορητές συσ...
thimbleby
thimbleby-book
Το βιβλίο του Thimbleby [@thimbleby2007press] είναι περισσότερο προσβάσιμο και δεν έχει υψηλές απαιτήσεις αναφορικά με προηγούμενες γνώσεις, ταυτόχρονα όμως ...
Joe Hewitt
Back to Top ↑Firefox
Back to Top ↑Blake Ross
Back to Top ↑Safari
Back to Top ↑ποντίκι
Back to Top ↑Douglas Engelbart
Back to Top ↑Επαυξημένη Νοημοσύνη
Back to Top ↑Sword of Damocles
Back to Top ↑Canon Cat
Back to Top ↑Ubiquous Computing
Mark D. Weiser
Σύντομη βιογραφία του Mark D. Weiser. Ο Mark D. Weiser γεννήθηκε στο Σικάγο και μεγάλωσε στην Νέα Υόρκη, όπου ο πατέρας του ήταν καθηγητής χημείας στο κρατι...
Xanadu
Back to Top ↑affective usability
Beyond usability
Η αρχική θεωρητική θεμελίωση της περιοχής της διάδρασης ανθρώπου και υπολογιστή βασίστηκε στην τρέχουσα για την εποχή αντίληψη της διάδρασης, που με τη σειρ...
arduino
Arduino
Το Arduino είναι ένας πολύ δημοφιλής μικροελεγκτής που φτιάχτηκε με αρχικό σκοπό τον προγραμματισμό και την εκπαίδευση των φοιτητών της διάδρασης ανθρώπου κ...
facebok
Η ιστορία του κοινωνικού δικτύου Facebook έχει πολλές ενδιαφέρουσες πλευρές, κάποιες από αυτές αξίζει να ανακτήσει κανείς συνοπτικά και ευχάριστα στη σχετικ...
google search
Google Search
Η αποτελεσματικότητα της μηχανής αναζήτησης Google και η απλότητα στην διεπαφή της H μηχανή αναζήτησης της Google είναι μια από τις δημοφιλέστερες και κατέχ...
apple
Apple iPod
Η περίπτωση της συσκευής αναπαραγωγής μουσικής iPod σήμανε την αρχή της γρήγορης μετατόπισης της διάδρασης από τον επιτραπέζιο προς τον κινητό και διάχυτο υ...
ipod
Apple iPod
Η περίπτωση της συσκευής αναπαραγωγής μουσικής iPod σήμανε την αρχή της γρήγορης μετατόπισης της διάδρασης από τον επιτραπέζιο προς τον κινητό και διάχυτο υ...
moding
Minecraft
Πριν ο προγραμματισμός της διάδρασης αποκτήσει πρωταγωνιστικό ρόλο στην έρευνα και στη βιομηχανία, η επιτυχία ενός προϊόντος μπορούσε να μετρηθεί από τις πω...
making
Minecraft
Πριν ο προγραμματισμός της διάδρασης αποκτήσει πρωταγωνιστικό ρόλο στην έρευνα και στη βιομηχανία, η επιτυχία ενός προϊόντος μπορούσε να μετρηθεί από τις πω...
minecraft
Minecraft
Πριν ο προγραμματισμός της διάδρασης αποκτήσει πρωταγωνιστικό ρόλο στην έρευνα και στη βιομηχανία, η επιτυχία ενός προϊόντος μπορούσε να μετρηθεί από τις πω...
douglas engelbart
Mouse
Αν και σήμερα η χρήση της συσκευής εισόδου ‘ποντίκι’ σε συνδυασμό με τη γραφική επιφάνεια εργασίας και τις αντίστοιχες εφαρμογές γραφείου και παραγωγικότητα...
donald norman
Η σχεδίαση των καθημερινών πραγμάτων
{.figure} {.figure} Η κατανόηση και η χρήση μιας συσκευής διέπεται από μερικές βασικές και διαχρονικές αξίες που είναι οι ίδιες ανεξάρτητα από το είδος κα...
reactable
Reactable
Το Reactable είναι ένα ψηφιακό μουσικό σύστημα που βασίζεται στη διάδραση με την αφή και με απτά αντικείμενα. Εκτός από την εκθεσιακή του εγκατάσταση και τη...
xerox star
Xerox Star
{.figure} {.figure} Η γραφική επιφάνεια εργασίας όπως είναι διαθέσιμη σε πολλούς εμπορικούς επιτραπέζιους υπολογιστές λίγο διαφέρει από εκείνη που είχε ο ...
wikipedia
Wikipedia
Η συμμετοχική ανάπτυξη και η ευέλικτη διανομή και αλλαγή ενός προϊόντος για υπολογιστές ξεκίνησε με την περίπτωση του λογισμικού ανοικτού κώδικα. Όμως, η δι...
Microsoft windows
Microsoft Windows
Η επιφάνεια εργασίας του επιτραπέζιου υπολογιστή είναι ένα δημοφιλές και ευέλικτο σύστημα που πέρασε από πολλούς κύκλους ανάπτυξης και προσαρμογής, τόσο κατ...
Tim Berners Lee
World Wide Web
Η κατασκευή του συστήματος World Wide Web (WWW) και κυρίως η πολύ γρήγορη αποδοχή του από ένα μεγάλο εύρος χρηστών ήταν μια εξέλιξη κομβικής σημασίας για τη...
Marc Weiser
Xerox PARC
Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...
Bill English
Xerox PARC
Η περίπτωση του ερευνητικού κέντρου Xerox PARC Το ερευνητικό κέντρο της Xerox με την ονομασία PARC (Palo Alto Research Center) δημιουργήθηκε το 1970 με στόχ...