-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproceso.html
148 lines (118 loc) · 6.08 KB
/
proceso.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Burbujas</title>
<meta name="description" content="Proceso del Demo 1 para la clase Desarrollo Apps Realidad Mixta">
<meta name="author" content="Sofía Castañeda Mosquera">
<meta name="keywords" content="Bubbles, AR, MagicLeap, Demo, Creative Computing">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!--Styling arriba-->
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
</div>
</div>
<!--Navbar burbujita-->
<!--No es la solución más elegante pero sirve-->
<div class="navbar" style="position: fixed; overflow: hidden; width: 100%; top:0;">
<div class="row" style="background-color: white">
<a href="index.html" style="text-decoration:none; font-size: 5rem;">🫧</a>
</div>
</div>
<!--Intro-->
<div style="margin-top: 8%;">
<h1><a><strong>Experimentación</strong></a></h1>
<h6 style="margin-bottom: 1%;"><a><strong>Objetivos</strong> de esta fase:</a></h6>
<p>Identificar <strong>patrones de uso</strong> en la creación de burbujas, con el objetivo de encontrar <strong>gestos de interacción</strong> y entender mejor la relación de los usuarios con las burbujas (tanto reales como digitales). Esto es necesario porque si el uso de las burbujas propuesto en el proyecto es <strong>contraintuitivo</strong>, la experiencia del demo se va a ver afectada. Tomarse el tiempo de entender las complejidades de hacer burbujas hace que el diseño de la interacción humano-máquina sea mejor.</p>
<!--Índice-->
<h6 style="margin-bottom: 1%"><a><strong>Índice</strong></a></h6>
<ul>
<li><a href="#burbujeros" style="color: black; text-decoration:none">Burbujeros | <em style="color: Silver; text-decoration:none;">Materialidad, tipología</em></a></li>
<li><a href="#gestos" style="color: black; text-decoration:none">Gestualidad & patrones de uso | <em style="color: Silver; text-decoration:none;">Entender los comportamientos del usuario</em></a></li>
<li><a href="#interaccion" style="color: black; text-decoration:none">Lo interactivo | <em style="color: Silver; text-decoration:none;">Explorar posibilidades con AR y microcontroladores</em></a></li>
<li><a href="#propuesta" style="color: black; text-decoration:none">La idea | <em style="color: Silver; text-decoration:none;">Propuesta(s)</em></a></li>
<li><a href="#random" style="color: black; text-decoration:none">Making bubbles like a pro | <em style="color: Silver; text-decoration:none;">Aprendizajes random para ser sospechosamente hábil con las burbujas</em></a></li>
</ul>
</div>
<hr>
<!--Sección 2-->
<div style="margin-top: 5%;" id="burbujeros">
<h3 style="margin-bottom: 0%"><a>Burbujeros</a></h3>
<h6 style="margin-bottom: 1%"><a>¿Qué se consigue en el mercado?</a></h6>
<img class = "u-max-full-width" src="images/burbujeros.png" alt="pop!" style="margin-bottom: 1%">
<div class="row">
<div class="twelve columns">
<h4>un montón de definiciones</h4>
<!--Break entre secciones-->
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
<hr>
</div>
</div>
<!--Sección 2-->
<div style="margin-top: 5%;" id="gestos">
<h3 style="margin-bottom: 0%"><a>Gestualidad & patrones de uso</a></h3>
<h6 style="margin-bottom: 1%"><a>Entendiendo los comportamientos del usuario con burbujas</a></h6>
<div class="row">
<div class="twelve columns">
<h4>un montón de definiciones</h4>
<!--Break entre secciones-->
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
<hr>
</div>
</div>
<!--Sección 3-->
<div id="interaccion">
<h3 style="margin-bottom: 0%"><a>Lo interactivo</a></h3>
<h6 style="margin-bottom: 1%"><a>Explorando posibilidades con VR y microcontroladores</a></h6>
<div class="row">
<div class="twelve columns">
<h4>un montón de definiciones</h4>
<!--Break entre secciones-->
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
<hr>
</div>
</div>
<!--Sección 4-->
<div id="propuesta">
<h3 style="margin-bottom: 0%"><a>[aquí va a ir la propuesta]</a></h3>
<h6 style="margin-bottom: 1%"><a>Unir todo lo investigado</a></h6>
<div class="row">
<div class="twelve columns">
<h4>un montón de definiciones</h4>
<!--Break entre secciones-->
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
<hr>
</div>
</div>
<!--Sección 5-->
<div id="random">
<h3 style="margin-bottom: 0%"><a>Making bubbles like a pro</a></h3>
<h6 style="margin-bottom: 1%"><a><em>Aprendizajes para ser sospechosamente hábil con las burbujas</em></a></h6>
<div class="row">
<div class="twelve columns">
<h4>un montón de definiciones</h4>
<!--easter egg-->
<a class="button" href="index.html" style="margin-top: 10%">Volver 🫧</a>
</body>
</html>