|
|
| (345 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.
| + | |
| − | | + | |
| − | ===Research===
| + | |
| − | | + | |
| − | [[File:Interface_conclusions.jpg|190px]]
| + | |
| − | | + | |
| − | The research showed the different possibilities and chances the interface gives to the user and program. The conclusion was that to have an easy and understandable interface, the possibilities in the program are limited. And to have full control in the program, the interface usually requires a lot of experience of the user.
| + | |
| − | | + | |
| − | ===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"> |
| | | | |
| − | [[File:page01.jpg|300px|thumb|left|Interface standard]]
| + | =<span style="color:orange">Realization Plan</span>= |
| − | [[File:page02.jpg|300px|thumb|left|Interface standard]]
| + | |
| − | [[File:page03.jpg|300px|thumb|left|Interface standard]]
| + | |
| − | [[File:page04-libary.jpg|300px|thumb|left|Interface standard,user libary]]
| + | |
| − | [[File:page05-advanced.jpg|300px|thumb|left|Interface advanced]]
| + | |
| − | [[File:page06-advanced.jpg|300px|thumb|left|Interface advanced]]
| + | |
| − | [[File:page07-admin.jpg|300px|thumb|left|Interface administrator]]
| + | |
| − | [[File:page08-admin.jpg|300px|thumb|left|Interface administrator]]
| + | |
| − | | + | |
| − | 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'''.
| + | |
| − | | + | |
| − | | + | |
| − | 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.
| + | |
| | | | |
| | + | [[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> |
| − | '''<span style="color:orange">To book a space via the Spacebook interface is done with only a few easy steps!:</span>'''
| |
| − |
| |
| − | '''<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 the mouse over the grid of the location the user selects the length of his space. When the mouse button is released this space automatically appears on the right hand side of the screen.<br>
| |
| − | '''<span style="color:orange">3)</span>''' 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> | | <br> |
| | <br> | | <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> | | <br> |
| − | <br>
| + | [[project C:REALIZATION_PLAN|read more >>]] |
| − | '''<span style="color:orange">5a)</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.<br>
| + | |
| − | '''<span style="color:orange">5b)</span>''' Then on the right hand side he can change each curve individually into the preferred setting (flat, small, medium or large).
| + | |
| − | | + | |
| | | | |
| | </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:mod_2.JPG|380px|thumb|left|Interface input]]
| + | |
| − | [[file:interface_confi00.gif|Spacebook - Interface, part of Facebook.]]
| + | |
| − | | + | |
| − | ===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="3" >
| + | |
| − | | + | |
| − | 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.
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </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>
| |
