Friday, May 30, 2014

Deeper Research on Websocket

Description
Reflection
Decision Making
Lead to action

Next week tutorial requirements (Sweii):
- Competitor Research
- Draft of SOI
- Most of the people had make decision on what technology to be use and now try research more on the idea and content

I realize i am in the group of knowing what technology to use but without the proper content. So i need to start and research on what is exited and what are the possibility of Websocket.

Definition of Websocket
Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.
Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.

Websocket still are something new to me, and it is a great challenge for myself to challenge my self learning, tasks and time management skill. So I had done some research on sample of what websocket can create. This not only can help me understand websocket even better, it also can help come out with idea and concept of what are i will create with websocket.



Tutorial:
Annotation
This example application shows how to use WebSockets, the Go programming language and jQuery to create a simple web chat application. From here i am able to get on my hand to try some simple programming language with the source that available. Although there are not much connection to my final project but from this i able to understand some of the coding language of websocket which i think is a good start.
The code source is at:
Annotation
This website show me the programming language of websocket allow me to understand what are the language i need to apply during what situation. In this tutorial it show, WebSocket Attributes, Events and Method. At last is also show me a simple example. Since i just started to learn how operate Websocket i think this website really help understand on the programming language. After understand the coding i am able to read other free websocket sources.


Annotation
This share all source of information and demo that are created with websocket previously. Due to websocket is still new and there are other 3rd party APIs like Ajax that are able create the same function as websocket.  This is the first site i found when i search on google about socket. It provide me basic knowledge and some example that what are the think that i am able to create with websocket which provide me idea to create my final idea by using websocket.


and Example/Competitor research:

This is some of the example and reference i get online and also my inspiration for my final assignment idea. And i am going to use mobile and website to connect so i basically start to some are the similar project that are available online.

below are  three similar work that create by chrome experiment  with websocket and mobile device as the controller or as a medium.

Accelerometer
This used websocket to connect to mobile and access to mobile accelerometer . when swing the phone u control the ball. They used javascript to code the ball fizik calculation.

Phone Touch Screen
This also access the mobile devices using websocket, but it require more than one person to play this game basically in tap the screen to make the player run faster.

Screen sync
This experimental website is using webcam to sync the the phone screen to make the mobile look like to device to see another aspect of the video that are presented in the website.


I am able collect some of the idea from what had been done by chrome experiment lab and think something similar or different . They do share source and code online and i am able to access to learn what are the APIs that they use. But to compare them with myself, i think i need scope down my area to focus on one thing. They project is create by a teams or more than a teams. And mostly industrial designer and professional program. I need to research more and start my learning sooner so that i able to finish my final project.

Thursday, May 29, 2014

Week 2 - Project Idea Sharing

Project Idea Sharing

Base on last week research and finding i had decided to further my research topic and idea to Websocket.  Websocket is basically a program that that hopes to bring realtime communication to the web.

The WebSocket specification—developed as part of the HTML5 initiative—introduced the WebSocket JavaScript interface, which defines a full-duplex single socket connection over which messages can be sent between client and server. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management.
WebSocket represents the next evolutionary step in web communication compared to Comet and Ajax. However, each technology has its own unique capabilities. Learn how these technologies vary so you can make the right choice. (http://www.websocket.org/index.html)

1) Websocket.org, (n.d.). WebSocket.org -- A WebSocket Community. [online] Available at: http://www.websocket.org/index.html [Accessed 29 May. 2014].
This website share lots of information about websocket and it provide different kind of sample of project that are created with websocket but there are not recent updates. But it do help me on understand the concept and the possibilities of websocket.

2) Lostechies.com, (n.d.). Browser Wars: Websockets vs. AJAX | Chris Missal's Blog. [online] Available at: http://lostechies.com/chrismissal/2013/08/06/browser-wars-websockets-vs-ajax/ [Accessed 29 May. 2014].
This provide detail about website which help me understand websocket even clearer. It also explain about the differences between websocket and ajax.

And these some interesting idea that i found mostly from Chrome Experiment Labs Website that are created with websocket.

1)Rumpetrol
Rumpetroll.com, (2014). Rumpetroll! — It's norwegian, but probably not what you think. [online] Available at: http://rumpetroll.com/ [Accessed 29 May. 2014].

This website allow user to control the object to surf around to find friend that are in the website and allow them to chat live inside the website.


2)Roll it 


Set, L. (2014). ROLL IT: A Chrome Experiment. [online] Chrome.com. Available at: https://chrome.com/campaigns/rollit [Accessed 29 May. 2014].

Recent project the chrome experiments created. is basically a games that allow few users to compete online by using mobile as their control to compete with each other live.

3)Just a reflector

Reflektor, A. (2014). Arcade Fire / Just a Reflektor. [online] Justareflektor.com. Available at: https://www.justareflektor.com/ [Accessed 29 May. 2014].

Just a reflector is a experimental artistic video website for people explore another meaning of the story. By connecting the mobile. user are able to use the mobile a tools like flash or indicator to interact with the people inside the video.

4)Super Sync Sport

Chromeexperiments.com, (2014). Chrome Experiments - "Super Sync Sports" by Google. [online] Available at: http://www.chromeexperiments.com/detail/super-sync-sports/?f= [Accessed 29 May. 2014].

Chrome Super Sync Sports, (2014). Chrome Super Sync Sports. [online] Available at: http://chrome.com/supersyncsports/ [Accessed 29 May. 2014].

This project is the second project the Chrome Experiment labs create for user to enjoy and have compete with their friend online with their mobile devices as a controler.

5) Racer



Chrome.com, (2014). RACER: A Chrome Experiment. [online] Available at: http://www.chrome.com/racer [Accessed 29 May. 2014].

This project is the first project the Chrome Experiment labs create for user to enjoy and have compete with their friend online with their mobile devices as a controler. By using chrome browser user are able to connect and race with their on the mobile devices live without delay.

The five references above is the something similar that i will like create for my final project. From here i am able to see the possibilities and what are something i create or even breakthrough. These few project help me to understand what am i going to create and research on what are websocket can created and how the technology works.

4 inspirations
Ironman 2 Hacked scene
YouTube, (2013). Iron Man 2: Hacking Scene. [online] Available at: http://www.youtube.com/watch?v=OhUmF3uhjj0 [Accessed 29 May. 2014]. 

YouTube, (2012). A Day Made of Glass... Made possible by Corning. (2011). [online] Available at: http://www.youtube.com/watch?v=6Cf7IL_eZ38 [Accessed 29 May. 2014]. 


YouTube, (2012). Microsoft's Productivity Future Concept. [online] Available at: http://www.youtube.com/watch?v=T3jIKKiZ_18 [Accessed 29 May. 2014].

YouTube, (2012). BlackBerry Concept Video: The Future Of Customer Experience. [online] Available at: http://www.youtube.com/watch?v=Xj3RHmn14ws [Accessed 29 May. 2014].

These are the 4 inspirations that influence me the most for  my idea, Smartphone is already a type of necessity that human cannot live without also can say is  apart human living. And from these inspiration video, it show me that smart phone is not just only a tool that people use to connect with people or taking selfies and social media. It is a powerful tool that able user to use it different ways that waiting for use designer to create it out. And chrome experiment had started on this journey and i will like to join in.

3 heroes.

Instate of three heroes i bring out 5 people and 3 team of heroes from chrome experiment Racer. 

Active theory which is incharge of programing.


 PA consulting that make the project are able to let the user have a good user experiences.
And last the incharge person of Racer Project from the Google Creative Lab.

Chrome.com, (n.d.). RACER: A Chrome Experiment. [online] Available at: http://www.chrome.com/racer [Accessed 29 May. 2014].
From these website i am able to view the interview that the team present the idea and some of the progress and program that were used in this project. And there are codes and tutorial link provided in the website. It also allow to find out who are the person behind the project of Racer.

2 Theories
i) Marshall Mcluhan -  Extension of Human
These theory is use to understand what can be an extension of human. And any media can be use as the extension of human. But what the way that make the experience that people want which lead to my second theory.

ii) Jesse James Garrent - The elements of User Experiences and Good Peter's - Information Architecture Strategy


Peterme.com, (n.d.). welcome to peterme.com. [online] Available at: http://peterme.com/archives/00000320.html [Accessed 29 May. 2014].
This graph are able to help understand the layer of user experience better and how to create a solid interface.

5) Issue
The only issue is difficulties of understanding websocket programming language and organizing the system.

Final Poster.

Thursday, May 22, 2014

Week 1

I chose website design as my final project. From this project i will like show what i am capable to create with website design. Website design is a platform or a stage to help people to "perform" their "performance". For me i think website have a lot of possibilities especially when come to user experiences. And now with the technology we had we are able create more possibilities. And for my final project i will like create a better user interface and user experience. 

The three of the core topics at the bottom  that i like to explore, but only one will be created. As i will create my portfolio to a more focus portfolio. So for my final project i will focus one website development and design. 

Video based Website Design

Video based web designs. Video for me is a media that able to provide message to a person is shortest duration. And now video canvas one of the media we can see on website. With video describing the product and advertising it . User also can have a different kind of view of the product through the video and by interact with it you are able to get more information.

A)   Benchmarks

1) Running 2014 by DICK's Sporting Goods
http://www.dsg.com/running2014/


2) PHARRELL WILLIAMS - 24 HOURS OF HAPPY
http://24hoursofhappy.com/



3) MY/STATIC/SELF
http://mystaticself.com/


B)   Sources of inspiration:
- Happy Song 
- Various award winning websites

C) the programmer that create these awesome application.


HTML5 Game based Website Design

HTML5 is the latest web language. Because of html 5, developer have more freedom to create more creative interactive element for website. And Game base website also become one of the hits web trend these days. It help user to promote their product at the same educate the user their product and the product's function

A)   Benchmarks

1) The Taco game
http://www.tacospillet.no/?lang=en



2) Spartans vs Hipsters
http://epic.net/mmxiv/




3)Flat Design vs Realism
http://www.flatvsrealism.com/




B)   Sources of inspiration:
- http://www.miniclip.com/games/en/

C) -

Web Socket Website Experience

Web socket website is a open source program that allow user to interact with website by using their mobile devices. This had help the website industry to come out more possibilities. User are now able to use their mobile devices as a controller . And from i am able to source more possibility.

A)   Benchmarks

1) Rollit
http://chrome.com/campaigns/rollit






2) Just a Reflector
https://www.justareflektor.com/








3)Super Sync Sports
http://www.chrome.com/supersyncsports/







B)   Sources of inspiration:
- Chrome experiences
- Mobile devices

C) -instant of people I choose chrome experiment.