Skip to content

Commit a075417

Browse files
RekkiceRekkice
authored
add demo video and html section (#14)
1 parent d55d0fc commit a075417

6 files changed

Lines changed: 164 additions & 50 deletions

File tree

‎docs/atomvm/_images/atomvm/tagboard.mp4‎

827 KB
Binary file not shown.

‎docs/atomvm/tagboard.html‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -492,7 +492,58 @@ <h3 id="consideraciones-de-almacenamiento"><a class="anchor" href="#consideracio
492492
</div>
493493
</div>
494494
<div class="sect1">
495-
<h2 id="frontend-y-problema-de-tipos-mime"><a class="anchor" href="#frontend-y-problema-de-tipos-mime"></a>Frontend y Problema de Tipos MIME</h2>
495+
<h2 id="frontend"><a class="anchor" href="#frontend"></a>Frontend</h2>
496+
<div class="sectionbody">
497+
<div class="paragraph">
498+
<p>El frontend consiste en un <code>index.html</code> ligero que importa e utiliza un Web Component llamado <code>&lt;tag-board /&gt;</code>. Este componente se encarga de llamar a la API periódicamente para motrar tags actualizados, además de crear tags nuevos.</p>
499+
</div>
500+
<div class="listingblock">
501+
<div class="title">/priv/index.html</div>
502+
<div class="content">
503+
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!DOCTYPE html&gt;
504+
&lt;html&gt;
505+
506+
&lt;head&gt;
507+
&lt;title&gt;Tagboard&lt;/title&gt;
508+
&lt;meta charset="UTF-8"&gt;
509+
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
510+
&lt;style&gt;
511+
:root {
512+
--bg: #F1E6C9;
513+
--btn: #2a2f55;
514+
--btn-hover: #3a4090;
515+
--btn-active: #4c53c7;
516+
--text: #222222;
517+
}
518+
519+
body {
520+
margin: 0;
521+
min-height: 100vh;
522+
font-family: system-ui, sans-serif;
523+
color: var(--text);
524+
display: flex;
525+
flex-direction: column;
526+
align-items: center;
527+
justify-content: center;
528+
}
529+
&lt;/style&gt;
530+
531+
&lt;script type="module" src="/bundle.js"&gt;&lt;/script&gt;
532+
&lt;/head&gt;
533+
534+
&lt;body&gt;
535+
&lt;h1&gt;Tagboard&lt;/h1&gt;
536+
537+
&lt;tag-board /&gt;
538+
&lt;/body&gt;
539+
540+
&lt;/html&gt;</code></pre>
541+
</div>
542+
</div>
543+
</div>
544+
</div>
545+
<div class="sect1">
546+
<h2 id="problema-de-tipos-mime"><a class="anchor" href="#problema-de-tipos-mime"></a>Problema de Tipos MIME</h2>
496547
<div class="sectionbody">
497548
<div class="paragraph">
498549
<p><code>httpd</code> tiene una configuración mínima que sirve todos los archivos con el tipo MIME <code>application/octet-stream</code>. Este tipo presenta una limitación: los navegadores modernos no permiten importar módulos JavaScript con este MIME type por razones de seguridad, aunque sí permiten cargarlos mediante etiquetas <code>&lt;script&gt;</code>.</p>
@@ -537,6 +588,18 @@ <h3 id="estructura-del-frontend"><a class="anchor" href="#estructura-del-fronten
537588
</div>
538589
</div>
539590
</div>
591+
<div class="sect1">
592+
<h2 id="demo"><a class="anchor" href="#demo"></a>Demo</h2>
593+
<div class="sectionbody">
594+
<div class="videoblock">
595+
<div class="content">
596+
<video src="_images/atomvm/tagboard.mp4" controls>
597+
Your browser does not support the video tag.
598+
</video>
599+
</div>
600+
</div>
601+
</div>
602+
</div>
540603
<nav class="pagination">
541604
<span class="prev"><a href="arcade.html">Proyecto: Videojuego Arcade</a></span>
542605
<span class="next"><a href="../colosseo/colosseo.html">Coliseo Atómico</a></span>

‎docs/search-index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/sitemap.xml‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,190 +2,190 @@
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
33
<url>
44
<loc>https://elixircl.github.io/elixir-robotics/atomvm/arcade.html</loc>
5-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
5+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
66
</url>
77
<url>
88
<loc>https://elixircl.github.io/elixir-robotics/atomvm/atomvm.html</loc>
9-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
9+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
1010
</url>
1111
<url>
1212
<loc>https://elixircl.github.io/elixir-robotics/atomvm/components.html</loc>
13-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
13+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
1414
</url>
1515
<url>
1616
<loc>https://elixircl.github.io/elixir-robotics/atomvm/devenv.html</loc>
17-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
17+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
1818
</url>
1919
<url>
2020
<loc>https://elixircl.github.io/elixir-robotics/atomvm/extensions.html</loc>
21-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
21+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
2222
</url>
2323
<url>
2424
<loc>https://elixircl.github.io/elixir-robotics/atomvm/remote.html</loc>
25-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
25+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
2626
</url>
2727
<url>
2828
<loc>https://elixircl.github.io/elixir-robotics/atomvm/tagboard.html</loc>
29-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
29+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
3030
</url>
3131
<url>
3232
<loc>https://elixircl.github.io/elixir-robotics/colosseo/colosseo.html</loc>
33-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
33+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
3434
</url>
3535
<url>
3636
<loc>https://elixircl.github.io/elixir-robotics/communication/bibliography.html</loc>
37-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
37+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
3838
</url>
3939
<url>
4040
<loc>https://elixircl.github.io/elixir-robotics/communication/iot.html</loc>
41-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
41+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
4242
</url>
4343
<url>
4444
<loc>https://elixircl.github.io/elixir-robotics/communication/meshtastic.html</loc>
45-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
45+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
4646
</url>
4747
<url>
4848
<loc>https://elixircl.github.io/elixir-robotics/communication/sigfox.html</loc>
49-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
49+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
5050
</url>
5151
<url>
5252
<loc>https://elixircl.github.io/elixir-robotics/communication/zigbee.html</loc>
53-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
53+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
5454
</url>
5555
<url>
5656
<loc>https://elixircl.github.io/elixir-robotics/controllers/arduino.html</loc>
57-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
57+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
5858
</url>
5959
<url>
6060
<loc>https://elixircl.github.io/elixir-robotics/controllers/basicstamp.html</loc>
61-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
61+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
6262
</url>
6363
<url>
6464
<loc>https://elixircl.github.io/elixir-robotics/controllers/esp32.html</loc>
65-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
65+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
6666
</url>
6767
<url>
6868
<loc>https://elixircl.github.io/elixir-robotics/controllers/esp32/animatronics.html</loc>
69-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
69+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
7070
</url>
7171
<url>
7272
<loc>https://elixircl.github.io/elixir-robotics/controllers/esp32/gladiators.html</loc>
73-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
73+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
7474
</url>
7575
<url>
7676
<loc>https://elixircl.github.io/elixir-robotics/controllers/fpga.html</loc>
77-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
77+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
7878
</url>
7979
<url>
8080
<loc>https://elixircl.github.io/elixir-robotics/controllers/ic555.html</loc>
81-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
81+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
8282
</url>
8383
<url>
8484
<loc>https://elixircl.github.io/elixir-robotics/controllers/jetson.html</loc>
85-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
85+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
8686
</url>
8787
<url>
8888
<loc>https://elixircl.github.io/elixir-robotics/controllers/pic16f877a.html</loc>
89-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
89+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
9090
</url>
9191
<url>
9292
<loc>https://elixircl.github.io/elixir-robotics/controllers/raspberry.html</loc>
93-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
93+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
9494
</url>
9595
<url>
9696
<loc>https://elixircl.github.io/elixir-robotics/controllers/stm32.html</loc>
97-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
97+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
9898
</url>
9999
<url>
100100
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/bibliography.html</loc>
101-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
101+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
102102
</url>
103103
<url>
104104
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/electricity.html</loc>
105-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
105+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
106106
</url>
107107
<url>
108108
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/energy.html</loc>
109-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
109+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
110110
</url>
111111
<url>
112112
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/history.html</loc>
113-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
113+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
114114
</url>
115115
<url>
116116
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/introduction.html</loc>
117-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
117+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
118118
</url>
119119
<url>
120120
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/programming.html</loc>
121-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
121+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
122122
</url>
123123
<url>
124124
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/programming/ada.html</loc>
125-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
125+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
126126
</url>
127127
<url>
128128
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/programming/cpp.html</loc>
129-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
129+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
130130
</url>
131131
<url>
132132
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/programming/elixir.html</loc>
133-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
133+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
134134
</url>
135135
<url>
136136
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/scientists.html</loc>
137-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
137+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
138138
</url>
139139
<url>
140140
<loc>https://elixircl.github.io/elixir-robotics/fundamentals/signals.html</loc>
141-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
141+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
142142
</url>
143143
<url>
144144
<loc>https://elixircl.github.io/elixir-robotics/index.html</loc>
145-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
145+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
146146
</url>
147147
<url>
148148
<loc>https://elixircl.github.io/elixir-robotics/nerves/circuits.html</loc>
149-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
149+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
150150
</url>
151151
<url>
152152
<loc>https://elixircl.github.io/elixir-robotics/nerves/nerves.html</loc>
153-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
153+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
154154
</url>
155155
<url>
156156
<loc>https://elixircl.github.io/elixir-robotics/nerves/soleil.html</loc>
157-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
157+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
158158
</url>
159159
<url>
160160
<loc>https://elixircl.github.io/elixir-robotics/os/rtos.html</loc>
161-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
161+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
162162
</url>
163163
<url>
164164
<loc>https://elixircl.github.io/elixir-robotics/solar/solar.html</loc>
165-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
165+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
166166
</url>
167167
<url>
168168
<loc>https://elixircl.github.io/elixir-robotics/tools/bibliography.html</loc>
169-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
169+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
170170
</url>
171171
<url>
172172
<loc>https://elixircl.github.io/elixir-robotics/tools/cad.html</loc>
173-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
173+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
174174
</url>
175175
<url>
176176
<loc>https://elixircl.github.io/elixir-robotics/tools/dashboards.html</loc>
177-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
177+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
178178
</url>
179179
<url>
180180
<loc>https://elixircl.github.io/elixir-robotics/tools/home-assistant.html</loc>
181-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
181+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
182182
</url>
183183
<url>
184184
<loc>https://elixircl.github.io/elixir-robotics/tools/platformio.html</loc>
185-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
185+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
186186
</url>
187187
<url>
188188
<loc>https://elixircl.github.io/elixir-robotics/tools/stores.html</loc>
189-
<lastmod>2026-01-02T19:23:39.390Z</lastmod>
189+
<lastmod>2026-01-02T20:29:42.295Z</lastmod>
190190
</url>
191191
</urlset>

‎modules/atomvm/images/atomvm/tagboard.mp4‎

827 KB
Binary file not shown.

‎modules/atomvm/pages/tagboard.adoc‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,54 @@ end
208208
* Los datos se serializan usando `:erlang.term_to_binary/1`
209209
* La memoria NVS tiene capacidad limitada; `@max_tags` evita agotarla
210210

211-
== Frontend y Problema de Tipos MIME
211+
== Frontend
212+
213+
El frontend consiste en un `index.html` ligero que importa e utiliza un Web Component llamado `<tag-board />`. Este componente se encarga de llamar a la API periódicamente para motrar tags actualizados, además de crear tags nuevos.
214+
215+
./priv/index.html
216+
[source, html]
217+
----
218+
<!DOCTYPE html>
219+
<html>
220+
221+
<head>
222+
<title>Tagboard</title>
223+
<meta charset="UTF-8">
224+
<meta name="viewport" content="width=device-width, initial-scale=1">
225+
<style>
226+
:root {
227+
--bg: #F1E6C9;
228+
--btn: #2a2f55;
229+
--btn-hover: #3a4090;
230+
--btn-active: #4c53c7;
231+
--text: #222222;
232+
}
233+
234+
body {
235+
margin: 0;
236+
min-height: 100vh;
237+
font-family: system-ui, sans-serif;
238+
color: var(--text);
239+
display: flex;
240+
flex-direction: column;
241+
align-items: center;
242+
justify-content: center;
243+
}
244+
</style>
245+
246+
<script type="module" src="/bundle.js"></script>
247+
</head>
248+
249+
<body>
250+
<h1>Tagboard</h1>
251+
252+
<tag-board />
253+
</body>
254+
255+
</html>
256+
----
257+
258+
== Problema de Tipos MIME
212259

213260
`httpd` tiene una configuración mínima que sirve todos los archivos con el tipo MIME `application/octet-stream`. Este tipo presenta una limitación: los navegadores modernos no permiten importar módulos JavaScript con este MIME type por razones de seguridad, aunque sí permiten cargarlos mediante etiquetas `<script>`.
214261

@@ -236,3 +283,7 @@ La implementación del frontend (fuera del alcance principal de este documento)
236283
* fetch() API para comunicación con el backend. Se hacen llamadas cada 3 segundos para mantener el estado sincronizado
237284

238285
Para detalles completos del frontend, consulte el repositorio: https://github.com/ElixirCL/elixir-robotics/tree/main/modules/atomvm/examples/tagboard/js
286+
287+
== Demo
288+
289+
video::atomvm/tagboard.mp4[]

0 commit comments

Comments
 (0)