project C:Home

From student
(Difference between revisions)
Jump to: navigation, search
(Research)
(Prototype)
 
(193 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
+
__NOTOC__
==== ====
+
<div style="float: left; width: 1200px; margin-right:20px; text-align:left">
[[File:header2.jpg|1200px]]
+
  
 +
__NOTOC__[[File:gesamt3.gif| frameless | 1200px | ]]
  
'''Spacebook''': to extend the notion of an online social community by providing a user-customizable space that will enhance that community (through joining and participating in activities outside the virtual world.
 
'''Spacebook''':(where) everybody can see the activities on the site, the users can join activities that are or will be taking place, create their new activities and (physically) link them with other activities.<br/>
 
A new activity hive is born.
 
  
 
+
'''Spacebook''' aims to extend the notion of an online social community by providing a user-customizable space that will enhance that community through joining and participating in activities outside the virtual world. Thus '''Spacebook''' brings together the virtual and the physical space: a phenomenon through which everybody can see the activities on the site, the users can join activities that are or will be taking place, create their new activities and (physically) link them with other activities. A new activity hive is born.
TU Delft: [[Project C:TU Delft drs Kuil | drs. Ronald Kuil]], sr. beleidsmedewerker vastgoedmanagement.
+
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
+
<div style="float:left; width: 380px; margin-right:20px; text-align:justify">
+
 
+
=<span style="color:orange">USER INTERFACE</span>=
+
 
+
 
+
[[File:Flow.gif|380px |]]
+
  
 
<br>
 
<br>
The Spacebook user can meet his friends in real time very easily with the simple Spacebook interface. In just a few clicks the user is able to create his own space for his activities.
 
  
[[project C:Home#USER_INTERFACE_2|read more >>]]
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
=<span style="color:orange">Interface</span>=
  
</div>
+
[[File:page03.jpg|220px|left|casual-user interface]]
<div style="float:left; width: 380px; margin-right:20px; text-align:justify">
+
  
=<span style="color:orange">LINK</span>=
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
The interface design has three steps of functionality which relates to three user-types: the casual user, the advanced user and the administrator. Through this design decision Spacebook provides for the needs of different characters.
  
[[File:structure.gif|380px|left]]
+
[[project C:ALL#INTERFACE|read more >>]]
  
 
The user and the site are connected by means of the architectural implementation (interface output and landscape) and technical implementation (interface output and structure).
 
 
[[project C:Home#LINK_2|read more >>]]
 
 
</div>
 
</div>
<div style="float:left; width: 380px; margin-right:20px; text-align:justify">
+
</div>
  
=<span style="color:orange">STRUCTURE</span>=
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
  
<youtube width="380" height="285" right >2WsdfWw3IoE</youtube>
+
=<span style="color:orange">Structure</span>=
  
A special structure is developed for easy control of the Spacebook construction. It is able to take any shape the user wants to accomodate any activity at any moment in time.
+
<youtube width="220" height="145" right >awMrVLLNx2g</youtube>
  
[[Project C:Home#STRUCTURE_2|read more >>]]
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
The architectural implementation uses a system of inflatables which have the advantage of being lightweight ultimately reducing the dead-loads while at the same time providing adequate stiffness and flexibility.
  
 +
[[Project C:STRUCTURE|read more >>]]
 
</div>
 
</div>
 
</div>
 
</div>
 +
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
=<span style="color:orange">Architecture</span>=
 +
[[File:Birdie.jpg|220px|left]]
 +
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
The user, the interface and the structure are connected by means of the architecture, the complete system. This is the link that unites all the parts involved.
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
<br>
+
[[project C:ARCHITECTURE|read more >>]]
<div style="float: left; width: 1200px; margin-right:40px; text-align:justify">
+
 
+
=<span style="color:orange">USER INTERFACE</span>=
+
 
+
<div style="float: left; width: 380px; margin-right:20px; text-align:justify">
+
===Concept===
+
 
+
[[File:interface Dia copy.jpg|380px]]
+
 
+
The interface of Spacebook will be the medium used by the social community to meet new people and organise activities in the real world.
+
 
+
The interface will be a tool that can be used by all people (it is not too hard to understand) but also gives a lot of freedom.
+
 
+
===Research===
+
 
+
[[File:Interface_conclusions.jpg|200px]]
+
 
+
The research done between several computer programs showed the different possibilities and chances the interface gives to the user and program. It clearly showed that an an easy and understandable interface is linked to limited possibilities in the program. When the computer program offers full control of the content, the interface usually requires a lot of experience of the user.
+
 
+
Every interface had some parts that seemed very valuable to the concept of Spacebook: rotation (0-360) in 1 plane by the use of a button, zooming in and out by use of the scroll wheel, given pre-defined possibilities, opportunity to personalize given possibilities and a simple layout.
+
These parts will be integrated with the Spacebook interface
+
 
+
===Validators===
+
[[Project C:interfaces_walter_aprile| Walter Aprile]]
+
 
+
===References===
+
 
+
[http://en.wikipedia.org/wiki/E-Booking_%28UK_government_project%29 E-booking]
+
 
+
[http://en.wikipedia.org/wiki/Interface_%28computing%29 interface]
+
 
+
[http://www.adobe.com/products/creativesuite.html?promoid=ITXQM Adobe Creative Suite]
+
 
+
[http://en.wikipedia.org/wiki/StarCraft StarCraft]
+
 
+
 
+
</div>
+
<div style="float: left; width: 780px; margin-right:20px; text-align:justify">
+
 
+
===Design Proposal===
+
 
+
Research into different interfaces led to the main criteria of Spacebook interface: able to zoom in on the 3D of the location by using the scroll wheel AND a zoom button; able to rotate around the 3D of the location by using the given buttons; only a limited amount of possibilities are possible; BUT the user has the opportunity to personalize the possibilities; the easy layout make the interface easy to understand for anybody.
+
 
+
 
+
The user of Spacebook can be anybody: students or business men, but also people less experienced with computers, such as housewives or elderly people. Therefor there will only be an online interface, and it will be a simple one: a clear overview of what is happening on the site, and a direct relation between the input of the user and the (on the website) visible output. Research into interfaces showed that having a simple interface means less personalization of the result. It also means that '''anybody is able to use Spacebook'''.
+
 
+
Three interface types of Spacebook are created: the standard user interface, the advanced user interface and the administrator interface.
+
 
+
 
+
<gallery widths="151" heights="98" perrow="4" >
+
File:page01.jpg|Standard interface
+
File:page02.jpg|Standard interface
+
File:page03.jpg|Standard interface
+
File:page04-libary.jpg|Standard interface;user library
+
</gallery>
+
'''To book a space via the <span style="color:orange">standard Spacebook interface</span> is done with only a few easy steps:'''
+
 
+
'''<span style="color:orange">1)</span>''' After the user selected his preferred day and time an updated 3D layout of the location appears on the right side of the screen.<br>
+
'''<span style="color:orange">2)</span>''' The user fills out only two criteria: the activity type and the amount of people participating. Then on the left side of the screen the standard solution appears.<br>
+
'''<span style="color:orange">3a)</span>''' Three options to personalize the space are given: completely flat (open), a flat roof, or a dome structure. The output is always directly visualized on the left side of the screen.<br>
+
'''<span style="color:orange">3b)</span>''' Working in library mode gives the user the possibility to select space setups made and saved by other users. This principle works via a popularity poll (most popular spaces at the top).<br>
+
'''<span style="color:orange">4a)</span>''' The user has the possibility to link his activity to another activity by sending a link request. <br>
+
'''<span style="color:orange">4b)</span>''' When the user is content with the setup he presses the save button.
+
 
+
 
+
<gallery widths="151" heights="98" perrow="4" >
+
File:page05-advanced.jpg|Advanced interface
+
File:page06-advanced.jpg|Advanced interface
+
File:page07-admin.jpg|Administrator interface
+
File:page08-admin.jpg|Administrator interface
+
</gallery>
+
'''The <span style="color:orange">advanced Spacebook interface</span> gives the user more options to create his ideal space and works as follows:'''
+
 
+
'''<span style="color:orange">1)</span>''' After the user selected his preferred day and time an updated 3D layout of the location appears on the left side of the screen. <br>
+
'''<span style="color:orange">2)</span>''' By dragging his mouse over the grid, the user selects the preferred area for his activity. The output automatically updates on the right side of the screen.<br>
+
'''<span style="color:orange">3)</span>''' The user has the possibility to personalize his entire space. The standard setting for the curve that defines the space is 'medium', but the user has the possibility to change the curve to 'flat', 'small' or 'large'.<br>
+
'''<span style="color:orange">4a)</span>''' The user can also select more grid cells, directly next to his already defined space. This also appears on the right sight of the screen. Together with his earlier defined space it starts creating an ensemble.<br>
+
'''<span style="color:orange">4b)</span>''' The user can then rotate around his created ensemble, and change the curve of each space individually.<br>
+
'''<span style="color:orange">5)</span>''' When a user would like to have a space made out of several curves in one row, he uses the 'division' button the determine the beginning and ends of each curve. Each curve can be individually changed to the preffered setting (flat, small, medium or large).<br>
+
'''<span style="color:orange">6)</span>''' The created space will be saved when the user is done and added to the library.
+
 
+
 
+
The '''<span style="color:orange">administrator Spacebook interface</span>''' is created for the management of the physical Spacebook site (TU Delft?). The administrator has the right to overrule any activity at any time for maintenance work or other jobs. He can overrule the system by selecting the cells that will be inoperable at a certain time frame. There is also a administrator library where settings for maintenance jobs and spatial criteria are stored.
+
  
 
</div>
 
</div>
 
</div>
 
</div>
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
 
  
=<span style="color:orange">LINK</span>=
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
<div style="float: left; width: 380px; margin-right:20px; text-align:left">
+
===Concept===
+
  
 +
=<span style="color:orange">Realization Plan</span>=
  
 +
[[File:timeline2.jpg|220px|left]]
  
 +
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
A realization plan has been drafted. It will provide the support for the project materialization and links with other projects and developments on site.
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
[[project C:REALIZATION_PLAN|read more >>]]
  
[[file:userscenario-part02.jpg|380px]]
 
 
Blabla concept blabla
 
 
<gallery widths="140" heights="100" perrow="2" >
 
 
File:mod_1.JPG|
 
 
File:mod_2.JPG|
 
 
File:mod_3.JPG|
 
 
File:mod_4.JPG|
 
 
File:mod_5.JPG|
 
 
File:mod_6.JPG|
 
 
 
 
</gallery>
 
 
===Research===
 
 
[[File:mod_5.JPG|380px]]
 
 
Research text, research text and more research text
 
 
===Validators===
 
[[Project C:computer_science_a_stoiculescu| Andrei Stoiculescu]]
 
 
[[Project C:computer_science_S_Hagemann| S. Hagemann]]
 
 
===References===
 
 
</div>
 
</div>
 
<div style="float: left; width: 780px; margin-right:20px; text-align:justify">
 
 
===Design Proposal===
 
 
<div style="float: left; width: 780px; margin-right:20px; text-align:justify">
 
 
'''<span style="color:orange">Architectural proposal</span>'''
 
 
[[File:siteplan.jpg|300px|right]]
 
 
 
 
[[File:structure.gif|380px|left]]
 
 
 
<gallery widths="151" heights="98" perrow="2" >
 
 
File:sketch01.jpg|Path system: The System always creates a path on the right side of the activity.
 
 
File:sketch02.jpg|Path system: The System always creates a path on the right side of the activity.
 
 
File:sketch03.jpg|Arch system: 3 types of arches can be chosen by the users. The different types are based on a defined ratio between the height and width of the arches. the user sets the length within the interface and choose one of the 3 given curve-ratios.
 
 
 
</gallery>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
 
</div>
  
<div style="float: left; width: 780px; margin-right:20px; text-align:justify">
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
  
'''<span style="color:orange">Technical implementation</span>'''
+
=<span style="color:orange">Prototype</span>=
 
+
 
+
<gallery widths="151" heights="98" perrow="4" >
+
 
+
File:ps-sketch.jpg|Path system: The System always creates a path on the right side of the activity.
+
 
+
File:Pathsystem.jpg|Path system: The System always creates a path on the right side of the activity.
+
 
+
File:Curves.jpg|Arch system: 3 types of arches can be chosen by the users. The different types are based on a defined ratio between the height and width of the arches. the user sets the length within the interface and choose one of the 3 given curve-ratios.
+
 
+
File:ps-sketch.jpg|Path system: The System always creates a path on the right side of the activity.
+
 
+
</gallery>
+
  
 +
[[File:P1160827.JPG|220px|left|casual-user interface]]
  
 +
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
  
 +
1:1 prototype page.
  
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
[[project C:PROTOTYPE|read more >>]]
  
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
 
 
=<span style="color:orange">STRUCTURE</span>=
 
 
<div style="float: left; width: 380px; margin-right:20px; text-align:justify">
 
 
===Concept===
 
 
<youtube width="380" height="145" right >2WsdfWw3IoE</youtube>
 
 
In order to make a fully adaptable construction, the structure has to be able to curve both up and down in one direction. A system of inflatable units is perfect for this purpose: when the air pressure is increased in the top layer the component will curve downwards, and when the pressure is increased in the bottom layer, the component will curve upwards.
 
Also, the combination of light materials and the proposed structure will give the construction enough stiffness while being extremely light.
 
 
===Research===
 
 
Over the duration of the course several structural possibilities have been researched, such as a muscle / pulley system, a cube system, and a system with a surface that is either hanging or supported by columns. The most promising possibility turned out to be inflatables: both strong and light. Two main roads of research were followed, which are explained here.
 
 
'''<span style="color:orange">Linear component</span>'''
 
 
[[File:Linear_component.jpg|380px]]
 
 
Inflatable components are alligned in a linear way, thereby creating long strips of curvature. The amount of curvature is controlled per inflatable component. The rib component around the inflatable component gives the structure stiffness and is the direct cause of the curvature.
 
The main advantage of this system is direct stiffness in the construction due to the longer and linear inflatable components. The main disadvantage of this system is the limited amount of curvature, also because of the length linear inflatable components.As in, no sudden curve changes are possible.
 
[[Project C:linear component | read more >>]]
 
 
 
'''<span style="color:orange">Bubble component</span>'''
 
 
[[File:Bubble_component.jpg|380px]]
 
 
The bubble component works according to the same principles of the linear component, but the inflatable units are much smaller. The ribs in between each component are there to hold the balloons in place (so they don't fall out of the structure) and for the inflatables to offset their forces upon.
 
The main advantage of this system is the perfect control of the curvature of the system, and sudden curve changes are possible. The main disadvantage of this system is that it is less stiff and the control of the structure is a lot hard, instead of curvature by one inflatable unit, now 10 inflatable units need to be controlled.
 
[[Project C:bubble component | read more >>]]
 
 
===Validators===
 
[[Project C:structures_michela_turrin| Michela Turrin]]
 
 
[[Project C:structures_gerrie_hobbelman | Gerrie Hobbelman]]
 
 
===References===
 
 
[[Project C:Inflatables | Inflatables]]
 
 
[http://www.publicartinla.com/sculptures/desert_cloud.html Bernhard Sommer, Desert Cloud]
 
 
[http://en.wikipedia.org/wiki/Frei_Otto Frei Otto]
 
 
[http://meweb.larc.nasa.gov/meweb/vgt.html Variable Geometry Truss]
 
 
</div>
 
<div style="float: left; width: 580px; margin-right:20px; text-align:left">
 
 
===Design Proposal===
 
 
'''<span style="color:orange">Parametric component</span>'''
 
 
<youtube width="380" height="250" left >n_f1jxIKL2I</youtube>
 
 
This parametric model stimulate the motion of the balloon inflation.
 
 
 
 
'''<span style="color:orange">Spatial expression</span>'''
 
 
[[File:Dia_back_copy.jpg|380px]]
 
 
Spatial diagram of the inflated event volume
 
 
 
 
 
 
'''<span style="color:orange">Balloon connection System</span>'''
 
 
[[File:Frame.jpg|380px]]
 
 
Section shows the connection of balloon within each patch & between each patches
 
 
 
</div>
 
<div style="float: left; width: 130px; margin-right:20px; text-align:left">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
[[File:Frame plan.jpg|220px|right]]
 
Plan of each patch system
 

Latest revision as of 14:01, 1 February 2012

Gesamt3.gif


Spacebook aims to extend the notion of an online social community by providing a user-customizable space that will enhance that community through joining and participating in activities outside the virtual world. Thus Spacebook brings together the virtual and the physical space: a phenomenon through which everybody can see the activities on the site, the users can join activities that are or will be taking place, create their new activities and (physically) link them with other activities. A new activity hive is born.


Interface

casual-user interface

The interface design has three steps of functionality which relates to three user-types: the casual user, the advanced user and the administrator. Through this design decision Spacebook provides for the needs of different characters.

read more >>

Structure

The architectural implementation uses a system of inflatables which have the advantage of being lightweight ultimately reducing the dead-loads while at the same time providing adequate stiffness and flexibility.

read more >>

Architecture

Birdie.jpg

The user, the interface and the structure are connected by means of the architecture, the complete system. This is the link that unites all the parts involved.


read more >>

Realization Plan

Timeline2.jpg

A realization plan has been drafted. It will provide the support for the project materialization and links with other projects and developments on site.



read more >>

Prototype

casual-user interface

1:1 prototype page.





read more >>

Personal tools
Namespaces
Variants
Actions
Projects
Atoms
Toolbox