|
|
| (305 intermediate revisions by 4 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 | ]] |
| | | | |
| − | <gallery widths="155" heights="100" perrow="6" >
| |
| | | | |
| − | File:mod_1.JPG|
| + | '''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. |
| − | | + | |
| − | File:mod_2.JPG|
| + | |
| − | | + | |
| − | File:mod_3.JPG|
| + | |
| − | | + | |
| − | File:mod_4.JPG|
| + | |
| − | | + | |
| − | File:mod_5.JPG|
| + | |
| − | | + | |
| − | File:mod_6.JPG|
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </gallery>
| + | |
| − | | + | |
| − | '''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. | + | |
| − | | + | |
| − | | + | |
| − | 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:Spacebook_diagram2.jpg|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.
| + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | + | =<span style="color:orange">Interface</span>= |
| | | | |
| − | [[project C:Home#USER_INTERFACE_2|read more >>]] | + | [[File:page03.jpg|220px|left|casual-user interface]] |
| | | | |
| − | </div>
| + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| − | <div style="float:left; width: 380px; 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. |
| | | | |
| − | =<span style="color:orange">LINK</span>=
| + | [[project C:ALL#INTERFACE|read more >>]] |
| − | [[file:Userscenario.jpg|380px]] | + | |
| − | <br>
| + | |
| | | | |
| − | test text test text test text test text test text test text test text test text test text test text test text test text test text
| |
| − |
| |
| − | [[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="145" right >2WsdfWw3IoE</youtube> | + | =<span style="color:orange">Structure</span>= |
| | | | |
| − | test text test text test text test text test text test text test text test text test text test text test text test text test text
| + | <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|190px]]
| + | |
| − | | + | |
| − | 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===
| + | |
| − | [[atom02: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]
| + | |
| − | | + | |
| | | | |
| | </div> | | </div> |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:justify"> | + | </div> |
| | | | |
| − | ===Design Proposal=== | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | | | |
| − | 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.
| + | =<span style="color:orange">Realization Plan</span>= |
| | | | |
| | + | [[File:timeline2.jpg|220px|left]] |
| | | | |
| − | 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'''.
| + | <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. |
| − | Three interface types of Spacebook are created: the standard user interface, the advanced user interface and the administrator interface.
| + | <br> |
| − | | + | <br> |
| − | | + | <br> |
| − | <gallery widths="150" heights="98" perrow="4" > | + | <br> |
| − | File:page01.jpg|Standard interface
| + | [[project C:REALIZATION_PLAN|read more >>]] |
| − | 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="150" 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===
| + | |
| − | | + | |
| − | [[File:structure.gif|380px|thumb|left|Interface input]]
| + | |
| − | | + | |
| − | ===Research===
| + | |
| − | | + | |
| − | ===Validators===
| + | |
| − | [[atom02:computer_science_a_stoiculescu| Andrei Stoiculescu]] & [[atom02:computer_science_S_Hagemann| S. Hagemann]]
| + | |
| − | | + | |
| − | ===References===
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:justify">
| + | |
| − | | + | |
| − | ===Design Proposal===
| + | |
| − | | + | |
| − | <gallery widths="200" heights="150" perrow="4" >
| + | |
| − | | + | |
| − | File:ps-sketch.jpg|Path system: The System always creates a path on the right side of the activity.
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | File:context.jpg|Context
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | 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>
| + | |
| | | | |
| | + | =<span style="color:orange">Prototype</span>= |
| | | | |
| | + | [[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 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:left">
| |
| − |
| |
| − | ===Concept===
| |
| − |
| |
| − | <youtube width="380" height="145" right >2WsdfWw3IoE</youtube>
| |
| − |
| |
| − | ===Research===
| |
| − |
| |
| − |
| |
| − | <gallery widths="145" heights="100" perrow="2" >
| |
| − |
| |
| − | File:comp01.JPG|
| |
| − |
| |
| − | File:comp02.JPG|
| |
| − |
| |
| − | File:comp03.JPG|
| |
| − |
| |
| − | File:comp04.JPG|
| |
| − |
| |
| − | File:comp07.jpg|
| |
| − |
| |
| − | File:comp08.jpg|
| |
| − |
| |
| − |
| |
| − | File:Foto 1.JPG|
| |
| − |
| |
| − |
| |
| − | File:Foto 3.JPG|
| |
| − |
| |
| − |
| |
| − |
| |
| − | </gallery>
| |
| − |
| |
| − | ===Validators===
| |
| − | [[atom02:structures_michela_turrin| Michela Turrin]]
| |
| − |
| |
| − | [[Project C:structures_gerrie_hobbelman | Gerrie Hobbelman]]
| |
| − |
| |
| − | ===References===
| |
| − |
| |
| − | [[Project C:Inflatables | Inflatables]]
| |
| − |
| |
| | </div> | | </div> |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:left">
| |
| − |
| |
| − | ===Design Proposal===
| |
| − |
| |
| − | <youtube width="340" height="250" left >n_f1jxIKL2I</youtube>
| |
