Un tutorial interactivo te guía por tu primer conjunto de reglas
Un nuevo usuario de la extensión recibe ahora algo más que un párrafo introductorio en el manual: un tutorial interactivo que va resaltando los elementos de la interfaz y te guía paso a paso por la creación de tu primer proyecto. Funciona tanto en el panel de edición como directamente sobre la página que visitas, en ocho idiomas, con fragmentos de código copiables. Esto es lo que hemos publicado en la v3.1.
Dos motores, un mismo objetivo
Bajo el capó hay dos módulos que cooperan. El primero — lib/onboarding.js — corre en el panel de edición de JustZix, te guía por el árbol catálogo → grupo → conjunto de reglas y explica la distribución de las pestañas CSS / JS / Acciones. El segundo — lib/onboarding-front.js — vive en el content script, así que puede resaltar elementos directamente en una página web cualquiera. Juntos cubren toda la historia: del concepto a una regla funcionando.
Hemos elegido la variante visual Glow: un anillo luminoso alrededor del objetivo, sin oscurecer la página. Esa es la diferencia con un «spotlight» típico: sigues viendo toda la página y tus propios contenidos; el resaltado solo señala dónde debe centrarse la atención.
19 pasos: «Tu primer proyecto»
El escenario por defecto te lleva por un ejemplo completo: crear un catálogo (una carpeta para reglas relacionadas), abrir el grupo «default», añadir un conjunto de reglas con CSS y JS sencillos (que de verdad cambian la página), conectar una barra de acciones y agregar una acción de tipo interruptor con su propio código JS. Cada paso tiene un objetivo resaltado más un globo con título, una descripción breve y la navegación «Atrás / Siguiente». Los pasos interactivos (por ejemplo, «pulsa el botón Añadir conjunto de reglas») solo avanzan cuando se realiza la acción: no se pueden saltar a ciegas.
Los fragmentos de CSS y JS que aparecen en los globos llevan un botón Copiar: los pegas directamente en el editor, sin reescribir nada. Cuando terminas el escenario, tienes en el árbol un conjunto de reglas completo y funcional que puedes ampliar luego.
Centro de tutoriales
El tutorial se abre automáticamente en el primer arranque de la extensión, en forma de centro de tutoriales (launcher) desde el que eliges un escenario. Más adelante vuelves a él desde el menú de ajustes (Ajustes → «Tutorial»). Ese mismo centro alojará los próximos escenarios a medida que los vayamos añadiendo: cuando publiquemos uno nuevo, el usuario lo verá en el mismo sitio, sin tener que buscarlo.
Ocho idiomas, sin emoji, la tecla Esc
Todo el motor y el escenario están traducidos a ocho idiomas (PL, EN, DE, ES, FR, IT, RU, ZH): el catálogo completo de textos vive en lib/i18n.js bajo las claves onboard.*. Los iconos provienen únicamente del set de JustZix (JZ_ICONS): un icono de diana para el escenario, una flecha dentro del globo, un icono de «Copiar». Sin emoji ni tipografías externas: la interfaz se mantiene coherente con el resto de la extensión.
La tecla Esc cierra el globo del tutorial y el launcher. Un clic fuera del globo o sobre el botón de cierre también sale. El progreso se guarda en chrome.storage.local (jzOnboarding.frontCompleted): si lo dejas a medias, el tutorial no volverá a aparecer en cada reinicio.
Qué viene después
Este primer escenario es solo el comienzo. El launcher está preparado para más: estamos planeando rutas para funciones avanzadas como el AI Helper, las ventanas TEMP, las acciones de tipo slider / toggle3 y el panel de edición en una ventana aparte bajo Ctrl+Alt+I. Escríbenos por el formulario de contacto y cuéntanos qué tema te gustaría ver como próximo tutorial.
Véase también
- Inyección de CSS y JavaScript — qué son en realidad las reglas que creas en el tutorial
- Ventanas en la página — las ventanas de desarrollo descritas
- JustZix frente a Tampermonkey — por qué puede valer la pena migrar
Instala JustZix — tu primer proyecto te llevará menos de 15 minutos.
Valora este artículo
Sin valoraciones — sé el primero.