Join the chat at: http://157.230.178.222:8081/index.html
(limited time only)
First prototype:
To edit: color code history, use name instead of socket ID on browser
Category: 2019 (FALL) LIVE WEB
THE MOUSE (MIDTERM)
The idea: WHAT DOES IT MEAN TO BE A ‘MOUSE’?
Let’s assume our bodies, made up mostly out of water, are flattened, digitized and resized into a few black and white pixels a.k.a. a mouse.
Our movements and expressions, walking, turning around, nodding, smiling become clicking, double clicking, right clicking, sliding, scrolling, scrolling and scrolling…
WE ARE ONLY SEEN AS XY COORDINATES NOW
Most of the time we spend on the screen, we’re being perceived as two numbers which define our position in the space, our presence is just a few pixels in this enormous screen space
WE ALL LOOK THE SAME
We are pointers of different variations. Our actions are guided by how our bodies interact with the environment; that moment when a mouse turns into a finger suggesting that we click, or the rainbow wheel of death telling us to slow down
WE THINK WE’RE ALONE
Have you ever seen more than one mouse on a screen? We only see ourselves; although a million of us could be on the same webpage at the same time. Are we really alone?
WE’RE ACTUALLY MORE EXPRESSIVE
We don’t feel as awkward about addressing uncomfortable questions, even when we’re sitting in the same physical space and sharing the same digital environment
So… what does it REALLY mean for us to be mice? And how can we design a more exciting web experience around it? (Also, doesn’t it sound funny, that instead of ‘a mouse’ we’re mice?)
Inspiration: http://donottouch.org/
Code: https://github.com/hellonun/liveweb/tree/master/getting%20to%20know%20the%20mouse
*insert video*
Live Tally Counter (midterm)
Idea:
Function / features:
- introduces instruction
- cues up
- counts (with beat sound on server)
- gets manipulated by server
References:
Meta Mouse
Meta Mouse reduces the presence of the user to a simple online representation (the mouse)
Code: https://github.com/hellonun/liveweb/tree/master/live%20web%20mouse
This project is inspired by: http://donottouch.org/
Chat Time
Chat time demo:
Link to join (sometimes online): http://157.230.178.222:8080/index.html
Code: https://github.com/hellonun/liveweb/tree/master/chat%20time
HTML Portrait / Synchronous Web
Assignment
- Using HTML5’s video or audio tags along with JavaScript, create an interactive self portrait. Link to it on your blog.
- Find a live or synchronous site or platform online. Try it out. Describe it on your blog. How is it used? What do you find interesting about it? Come to class prepared to discuss.
To familiarize myself with HTML and Javascript, I decided to visit the webite https://www.w3schools.com/html/default.asp and tried to incorporate as many features as possible. The results can be found in this HTML file:
https://github.com/hellonun/liveweb
A chat app feature “typing”/”read”. – Facebook messenger or Line messenger. https://line.me/en/
We discussed in class that asynchronous web has the ability to join the worlds of two ends. This is especially true for me as I now live far from home. Chat apps are the main platforms for my family / my friends and I to communicate. I once typed something and hesitated to send. My friend asked “What were you just typing?” in hope to draw out my spontaneous reaction to the topic being discussed. Asynchronous platforms allow us to experience the reaction of another person in real time which brings down the wall / closes the space between us. Things are less filtered, less crafted, more spontaneous, more authentic (not good or bad, just different).
An additional site: I’m not sure whether this is a synchronous web but I find the interaction here very interesting: https://luminghao.com/
This is a portfolio website of my ITP classmate Luming. Once landed on the page, the site unfolds itself with a text shuffling animation. It lists all the projects and mousing over each one creates an underline which suggests it’s a link. Once the link is clicked, the page plays a sound and loads the project. The sound is different for each project and acts as if it is launching something (similar to when a wrestler launches himself on stage). Each project then appears on the page, some interactive, some links to soundcloud, some to chat bots. The title of the pages keeps alternating between projects making it feel live.
I appreciate the simplicity and directness of the web. While visually it is mainly a bunch of texts, the sound and animation make the site very playful and enjoyable to browse. There’s a element of surprise in every click – as if you’re unfolding something, finding something, putting it back.
