-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfaq.html
More file actions
386 lines (358 loc) · 23.5 KB
/
faq.html
File metadata and controls
386 lines (358 loc) · 23.5 KB
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ - Preguntas Frecuentes sobre WidKit | Widgets Educativos para Profesores</title>
<meta name="description" content="Respuestas a las preguntas más frecuentes sobre WidKit: cómo integrar widgets en Moodle, Blackboard, Canvas. Guía completa para profesores.">
<meta name="keywords" content="faq widgets educativos, cómo usar widkit, integrar moodle, tutorial widgets, ayuda profesores">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 min-h-screen">
<!-- Navbar -->
<nav class="bg-white border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center p-2">
<img src="assets/widkit_fuego_icono.png" alt="WidKit" class="w-full h-full object-contain">
</div>
<h1 class="text-xl font-bold text-slate-900">WidKit - FAQ</h1>
</div>
<a href="index.html" class="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-lg transition">← Volver</a>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-slate-900 mb-4">❓ Preguntas Frecuentes</h1>
<p class="text-lg text-slate-600">Todo lo que necesitas saber sobre WidKit</p>
</div>
<div class="space-y-4">
<!-- FAQ Item -->
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Qué es WidKit y para qué sirve?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
WidKit es una colección de <strong>10 widgets educativos gratuitos</strong> diseñados para profesores y educadores.
Puedes integrarlos fácilmente en Moodle, Blackboard, Canvas o cualquier sitio web mediante código iframe.
Incluye: cuenta regresiva, sorteos, calculadora de notas, pomodoro timer, rankings y más.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Es realmente gratis? ¿Hay costos ocultos?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, WidKit es <strong>100% gratuito</strong> y siempre lo será. No hay costos ocultos, no necesitas registrarte,
no hay límites de uso y no mostramos anuncios. Es un proyecto de código abierto para la comunidad educativa.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Cómo integro un widget en Moodle?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<div class="mt-4 text-slate-600">
<p class="mb-2"><strong>Pasos para Moodle:</strong></p>
<ol class="list-decimal list-inside space-y-1 ml-4">
<li>Activa el modo edición en tu curso</li>
<li>Añade una "Etiqueta" o "Página"</li>
<li>Haz clic en el botón HTML (</>) del editor</li>
<li>Pega el código iframe que generaste en WidKit</li>
<li>Guarda y ¡listo! El widget ya está funcionando</li>
</ol>
</div>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Funciona en Blackboard y Canvas también?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, WidKit funciona en <strong>cualquier LMS</strong> que permita código HTML/iframe: Moodle, Blackboard, Canvas,
Google Classroom, Microsoft Teams y cualquier sitio web. El proceso es similar: activar editor HTML y pegar el código.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Necesito saber programar?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
<strong>No necesitas ningún conocimiento de programación.</strong> Cada widget tiene un configurador visual donde
ajustas colores, textos y fechas con clics. El código se genera automáticamente y solo tienes que copiarlo y pegarlo.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Los widgets funcionan en móviles?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, todos los widgets son <strong>100% responsive</strong> y funcionan perfectamente en móviles, tablets y ordenadores.
Además, WidKit es una PWA que puedes instalar en cualquier dispositivo como una app nativa.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Puedo personalizar los colores y estilos?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, cada widget es <strong>totalmente personalizable</strong>. Puedes cambiar colores (3 colores de degradado),
elegir entre 6 tipografías diferentes, ajustar textos, fechas y más. Todo desde el configurador visual.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Los datos se guardan en alguna base de datos?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
No, WidKit <strong>no usa bases de datos</strong>. Toda la configuración se guarda en la URL (parámetros GET),
lo que hace que sea portable, seguro y no requiera backend. Tus datos nunca salen de tu navegador.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Puedo usar los widgets sin internet?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, si instalas WidKit como PWA, muchos widgets <strong>funcionan offline</strong> gracias al Service Worker.
Los widgets se almacenan en caché y pueden usarse sin conexión a internet.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Cómo hago un sorteo de estudiantes?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<div class="mt-4 text-slate-600">
<p class="mb-2"><strong>Muy fácil:</strong></p>
<ol class="list-decimal list-inside space-y-1 ml-4">
<li>Ve a <a href="admin/sorteo.html" class="text-blue-600 hover:underline">Sorteo Interactivo</a></li>
<li>Ingresa los nombres de tus estudiantes (separados por comas)</li>
<li>Configura cuántos ganadores quieres</li>
<li>Personaliza colores y estilo</li>
<li>Copia el código y pégalo en tu LMS</li>
</ol>
</div>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Puedo cambiar la configuración después de integrar el widget?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, solo genera un nuevo código con la configuración actualizada y reemplaza el código anterior en tu LMS.
Los cambios se reflejan <strong>instantáneamente</strong> sin necesidad de reinstalar nada.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿WidKit recopila datos de mis estudiantes?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
<strong>No.</strong> WidKit no recopila, almacena ni procesa ningún dato personal de tus estudiantes.
Todo funciona del lado del cliente (navegador) y no tenemos acceso a ninguna información.
Cumplimos 100% con GDPR y protección de datos.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Qué navegadores son compatibles?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
WidKit funciona en todos los navegadores modernos: <strong>Chrome, Firefox, Safari, Edge y Opera</strong> (versiones de los últimos 2 años).
También funciona perfectamente en navegadores móviles de iOS y Android.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Cómo actualizo los widgets cuando hay nuevas versiones?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Los widgets se actualizan <strong>automáticamente</strong> porque se cargan desde nuestro servidor.
No necesitas hacer nada, siempre tendrás la última versión con mejoras y correcciones.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Puedo usar WidKit en mi escuela/universidad?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
<strong>¡Por supuesto!</strong> WidKit es gratis para uso personal, educativo y comercial bajo licencia MIT.
Puedes usarlo en tu escuela, universidad, curso online o cualquier contexto educativo sin restricciones.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Ofrecen soporte técnico?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, puedes obtener ayuda de varias formas:
</p>
<ul class="mt-2 space-y-1 ml-6 list-disc text-slate-600">
<li><a href="https://github.com/bemtorres/widkit/issues" class="text-blue-600 hover:underline" target="_blank">GitHub Issues</a> para reportar problemas</li>
<li>Documentación completa en nuestro <a href="README.md" class="text-blue-600 hover:underline">README</a></li>
<!-- <li>Videos tutoriales en nuestro canal de YouTube</li> -->
<!-- <li>Comunidad de profesores en redes sociales</li> -->
</ul>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Qué es una PWA y por qué debería instalarla?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Una PWA (Progressive Web App) es una aplicación web que puedes instalar en tu dispositivo como si fuera una app nativa.
<strong>Ventajas:</strong> funciona offline, carga más rápido, acceso desde tu pantalla de inicio,
notificaciones y mejor rendimiento.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Puedo contribuir al proyecto?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
<strong>¡Sí!</strong> WidKit es código abierto. Puedes:
</p>
<ul class="mt-2 space-y-1 ml-6 list-disc text-slate-600">
<li>Reportar bugs o sugerir features en <a href="https://github.com/bemtorres/widkit" class="text-blue-600 hover:underline" target="_blank">GitHub</a></li>
<li>Hacer fork y enviar pull requests</li>
<li>Compartir WidKit con otros profesores</li>
<li>Crear tutoriales o guías</li>
<li>Traducir a otros idiomas</li>
</ul>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Cuánto tardan en cargar los widgets?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Los widgets cargan <strong>en menos de 1 segundo</strong> en conexiones normales. Son ultra-ligeros (<50KB cada uno)
y están optimizados para carga rápida. Además, con la PWA instalada, cargan instantáneamente desde la caché.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Puedo usar los widgets en mi blog de WordPress?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, en WordPress agrega un bloque <strong>"HTML personalizado"</strong> y pega el código iframe.
También funciona en Wix, Squarespace, Blogger y cualquier plataforma que permita HTML personalizado.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Hay límite de uso o de estudiantes?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
<strong>No hay límites.</strong> Puedes usar WidKit con 10 estudiantes o 10,000. Puedes crear tantos widgets
como necesites, usarlos en múltiples cursos y compartirlos libremente. Sin restricciones.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Qué pasa si mi LMS no permite iframes?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Puedes usar la <strong>URL directa</strong> del widget y agregarla como enlace. Los estudiantes harán clic
y verán el widget en una nueva pestaña. También puedes contactar a tu administrador de LMS para habilitar iframes.
</p>
</details>
<details class="bg-white rounded-lg border border-slate-200 p-6 group">
<summary class="cursor-pointer font-bold text-slate-900 flex items-center justify-between">
<span>¿Los widgets se actualizan en tiempo real?</span>
<span class="text-amber-600 group-open:rotate-180 transition-transform">▼</span>
</summary>
<p class="mt-4 text-slate-600">
Sí, widgets como la <strong>cuenta regresiva</strong> y el <strong>cronómetro</strong> se actualizan cada segundo automáticamente.
No necesitas recargar la página. El <strong>calculador de semanas</strong> detecta automáticamente la semana actual cada día.
</p>
</details>
</div>
<!-- CTA Experimental -->
<div class="mt-12 text-center bg-gradient-to-r from-violet-500 to-purple-600 rounded-2xl p-8 text-white">
<h2 class="text-3xl font-bold mb-4">✨ Nueva Versión Interactiva</h2>
<p class="text-lg mb-6 opacity-90">Prueba nuestro FAQ jerárquico con búsqueda avanzada</p>
<a href="app/faq.html" class="inline-block px-8 py-4 bg-white text-violet-600 font-bold rounded-xl shadow-lg hover:shadow-xl transition">
🎯 Ver FAQ Interactivo
</a>
</div>
<!-- CTA -->
<div class="mt-8 text-center bg-gradient-to-r from-amber-500 to-orange-600 rounded-2xl p-8 text-white">
<h2 class="text-3xl font-bold mb-4">¿Listo para Empezar?</h2>
<p class="text-lg mb-6 opacity-90">Prueba WidKit ahora mismo, es gratis y sin registro</p>
<a href="index.html" class="inline-block px-8 py-4 bg-white text-amber-600 font-bold rounded-xl shadow-lg hover:shadow-xl transition">
🚀 Explorar Widgets
</a>
</div>
</main>
<!-- Schema.org FAQPage -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "¿Qué es WidKit y para qué sirve?",
"acceptedAnswer": {
"@type": "Answer",
"text": "WidKit es una colección de 10 widgets educativos gratuitos diseñados para profesores y educadores. Puedes integrarlos fácilmente en Moodle, Blackboard, Canvas o cualquier sitio web mediante código iframe."
}
},
{
"@type": "Question",
"name": "¿Es realmente gratis? ¿Hay costos ocultos?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Sí, WidKit es 100% gratuito y siempre lo será. No hay costos ocultos, no necesitas registrarte, no hay límites de uso y no mostramos anuncios."
}
},
{
"@type": "Question",
"name": "¿Cómo integro un widget en Moodle?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Pasos: 1) Activa el modo edición en tu curso, 2) Añade una Etiqueta o Página, 3) Haz clic en el botón HTML del editor, 4) Pega el código iframe, 5) Guarda."
}
},
{
"@type": "Question",
"name": "¿Necesito saber programar?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No necesitas ningún conocimiento de programación. Cada widget tiene un configurador visual donde ajustas colores, textos y fechas con clics."
}
},
{
"@type": "Question",
"name": "¿Los widgets funcionan en móviles?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Sí, todos los widgets son 100% responsive y funcionan perfectamente en móviles, tablets y ordenadores."
}
}
]
}
</script>
</body>
</html>