-
Notifications
You must be signed in to change notification settings - Fork 0
/
final.html
192 lines (156 loc) · 9.75 KB
/
final.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Japonés RM</title>
<meta name="description" content="Registro demo final para la clase Desarrollo Apps Realidad Mixta - Aprendiendo japonés con realidad mixta y otras cositas chéveres">
<meta name="author" content="Sofía Castañeda Mosquera">
<meta name="keywords" content="AR, Quest 2, Demo, Creative Computing, Japonés">
<!-- 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>coming soon pls ignore</strong></a></h1>
<h6 style="margin-bottom: 1%;"><a><strong>Objetivos</strong> de esta fase:</a></h6>
<p>Crear la estructura de la app, determinar el comportamiento físico de las burbujas, así como las posibilidades de interacción que tendrá el usuario. En general programar cosas y que funcionen. Durante el proceso iterar la idea y aprender sobre las interacciones sugeridas.</p>
<!--Índice-->
<h6 style="margin-bottom: 1%"><a><strong>Índice</strong></a></h6>
<ul>
<li><a href="#unity" style="color: black; text-decoration:none">Unity | <em style="color: Silver; text-decoration:none;">Aprender sobre la plataforma</em></a></li>
<li><a href="#assets" style="color: black; text-decoration:none">Creación de assets | <em style="color: Silver; text-decoration:none;">Crear los elementos que compondrán el mundo digital</em></a></li>
<li><a href="#scripts" style="color: black; text-decoration:none">Acciones - scripting | <em style="color: Silver; text-decoration:none;">Conectar los assets con el usuario, crear interacciones significativas</em></a></li>
<li><a href="#magicleap" style="color: black; text-decoration:none">MagicLeap | <em style="color: Silver; text-decoration:none;">Integrar la app al dispositivo, prueba en campo</em></a></li>
<li><a href="#resultado" style="color: black; text-decoration:none">Resultados | <em style="color: Silver; text-decoration:none;">Archivos y montaje finales</em></a></li>
<li><a href="#conclusiones" style="color: black; text-decoration:none">Conclusiones | <em style="color: Silver; text-decoration:none;">Aprendizajes para futuras iteraciones</em></a></li>
</ul>
</div>
<hr>
<!--Sección 2-->
<div style="margin-top: 5%;" id="unity">
<h3 style="margin-bottom: 0%"><a>Unity Learn</a></h3>
<h6 style="margin-bottom: 1%"><a>Aproximaciones a la plataforma + setup del MagicLeap</a></h6>
<div class="row">
<div class="twelve columns">
<img class = "u-max-full-width" src="images/pathways.png" alt="pop!" style="margin-bottom: 1%">
<p>Una de las cosas que más consumió tiempo del proceso fue entender la interfaz de Unity. Comencé siguiendo tutoriales y explorando la plataforma. Para familiarizarme con ella seguí los cursos esenciales de Unity Learn. Los más básicos introducían la interfaz y las funcionalidades 3D y de scripting. También hice una sección del curso de programming y el VR basic pathway, para comprender mejor el setup con disposir¡tivos de RM.</p>
<p>Seguí la ruta de <a>essentials</a> -> <a>junior programmer</a> --> <a>VR development</a>. Esto claramente acompañado de otros tuoriales de youtube, pero fue el core de lo que aprendí. Unity sugiere completar el curso de essentials en 2 semanas, el de programming en 12 y el de VR en 6. Por tiempo y priorizando las lecciones pertinentes para el proyecto, completé los cursos en alrededor de dos semanas. Ahora quiero comenzar el de creative core, y realmente entender conceptos como <a href="https://learn.unity.com/tutorial/physics-best-practices#">estos</a> que no pude explorar con tanto tiempo como quise.</p>
<img class = "u-max-full-width" src="images/learn1.png" alt="pop!" style="margin-bottom: 1%">
<div class="six columns u-pull-left" style="margin-top: 2%; text-align: center">
<img class = "u-max-full-width" src="images/learn2.png" alt="pop!" style="margin-bottom: 15%">
</div>
<div class="five columns u-pull-right" style="margin-top: 2%; text-align: center">
<img class = "u-max-full-width" src="images/learn3.png" alt="pop!" style="margin-bottom: 15%">
</div>
<br>
<div>
<p>En el proceso aprendí cosas chéveres que no tuve la oportunidad de implementar, como el audio localizado en las escenas interactivas. Me falta aprender más de scripting. En lo personal la programación en C# se me hizo muy retadora, es un lenguaje que no conocía y las clases de Unity/ML son confusas. A pesar de eso ahora tengo más claro las herramientas que puedo usar apra construir las apps. Si hubiera conocido mejor las herramientas de Unity antes de comenzar el proyecto, creo que habría replanteado varios aspectos de la propuesta teniendo en mente lo que ahora sé que se puede (y lo que no) hacer. Es una plataforma increíble pero difícil de configurar. </p>
<h4>Setup de Unity para el ML1</h4>
<p></p>
<img class = "u-max-full-width" src="images/setup.png" alt="pop!" style="margin-bottom: 1%">
<p></p><a href="https://ml1-developer.magicleap.com/en-us/learn/guides/1-1a-unity-setup-manual-steps">La configuración de Unity</a> para que Lumin, el dispositivo/simulador y los demás assets específicos al SDK de Magic Leap funcionen es larga pero sencilla de hacer. El mayor reto es asegurar la compatibilidad entre versiones: la documentación oficial de Magic Leap 1 vincula paquetes depreciados que al momento de instalarse dañan el proyecto. Me tomó mucho tiempo entender algunos de estos errores, porque el setup wizard genera algunas de estas incompatibilidades.</p>
</div>
<!--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="assets">
<h3 style="margin-bottom: 0%"><a>Creación de assets</a></h3>
<h6 style="margin-bottom: 1%"><a>¿Cómo llevar las burbujas al mundo digital? ¿Cómo hacerlas creaíbles?</a></h6>
<div class="row">
<div class="twelve columns">
<p>aaa</p>
<!--Break entre secciones-->
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
<hr>
</div>
</div>
<!--Sección 3-->
<div id="scripts">
<h3 style="margin-bottom: 0%"><a>Scripts</a></h3>
<h6 style="margin-bottom: 1%"><a>Programas las accione interactivas dentro de la app</a></h6>
<div class="row">
<div class="twelve columns">
<img class = "u-max-full-width" src="images/sketch.png" alt="pop!" style="margin-bottom: 1%">
<p>aaa</p>
<!--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>MagicLeap</a></h3>
<h6 style="margin-bottom: 1%"><a>Probar le demo en el dispositivo</a></h6>
<div class="row">
<div class="twelve columns">
<p></p>
<!--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>Resultados</a></h3>
<h6 style="margin-bottom: 1%"><a>Proyecto y repo final</a></h6>
<div class="row">
<div class="twelve columns">
<p></p>
<!--Break entre secciones-->
<div class="row">
<div class="twelve columns" style="margin-bottom: 1.5%">
<hr>
</div>
</div>
<!--Sección 6-->
<div id="propuesta">
<h3 style="margin-bottom: 0%"><a>Conclusiones</a></h3>
<h6 style="margin-bottom: 1%"><a>Lo aprendido en un mes de desarrollo de apps de RM</a></h6>
<div class="row">
<div class="twelve columns">
<p></p>
<!--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>