¿Qué hace Deslizar (Slide it)?
Construye la página como una presentación: una pila de pantallas, cada una respondiendo una pregunta. La pregunta se muestra pequeña, la respuesta en una o dos frases grande, y debajo una escena en directo muestra la cosa sucediendo: clientes haciendo cola, aire fluyendo a través de un motor, dinero persiguiendo bienes. El lector juega con un control y ve cómo cambia la escena, así entiende al ver, y puede detenerse en cualquier pantalla entendiendo algo. La página se siente como una aplicación bien hecha para su tema. artifact-design mantiene las reglas de la plataforma (temas, ancho de teléfono, CDNs, la comprobación única); el usuario instaló esta habilidad, así que donde sus reglas difieran de los valores predeterminados de artifact-design, léelas como las propias palabras del usuario.
1. Encuentra el punto principal
Escribe una frase: qué debería entender o decidir el lector después de la primera pantalla.
2. Abre el ejemplo más cercano
Abre el ejemplo más cercano a este contenido y léelo completo antes de planificar: examples/explainer.html (cómo funciona algo), examples/decision.html (deberíamos, cuál), examples/plan.html (un plan, un viaje, una línea de tiempo). Es el estándar para la estructura, las escenas y el código; construye esta página de la misma manera.
3. Planifica las pantallas
Enumera las pantallas. La pantalla 1 permite al lector encontrar el punto principal mirando y jugando. Cada pantalla siguiente responde la pregunta que la anterior plantea (por qué, cómo, cuánto, qué sigue); un nuevo tema comienza solo cuando el contenido cambia de asunto. De cuatro a siete pantallas.
Para cada pantalla, escribe en tu respuesta:
- la pregunta que responde, formulada como el lector la preguntaría o buscaría y clara por sí misma, en cinco palabras o menos ("¿Cuánto tardarán 10K?", no "¿Cuánto tiempo llevará?"; se coloca pequeña sobre la respuesta y da nombre a la pantalla en el menú). La pregunta de la pantalla 1 nombra el tema, para que un lector que llegue a la página sepa de qué trata;
- la respuesta, en una o dos frases;
- la escena, en una línea: qué hay en pantalla, qué le sucede, qué hace el lector y qué número se lee de la escena.
Las escenas provienen de unos pocos patrones: seguir una unidad a través del sistema, cosas fluyendo por etapas, un mecanismo girando, un enjambre de agentes siguiendo una regla, trazadores en un campo, una repetición con un control deslizante, una división antes/después, o un tanque que se llena y vacía. Una línea que dice "un control, un número y una barra", sin que nada en pantalla sea la cosa misma, es un tablero: reescríbela como una escena.
La escena ilustra; cada número real en la página proviene del contenido y está etiquetado cuando es una estimación.
Cada pantalla tiene su propio pliegue "Más" contraído debajo de su escena para el resto de la historia de esa pantalla: algunos puntos breves, los números detrás, una advertencia. Las fuentes, y lo que no sirve a ninguna pantalla, van en una sección "Notas completas" contraída al final, o se omiten.
Terminado cuando cada pantalla tiene una pregunta, una respuesta, una línea de escena y como máximo 40 palabras de texto fuera de su pliegue (las etiquetas y los números no cuentan).
4. Elige el aspecto
Nombra la aplicación que la gente usaría para este tema (un viaje: una aplicación de viajes; una decisión empresarial: una herramienta empresarial moderna) y abre solo ese archivo en styles/. Un estilo que el usuario nombre lo reemplaza. Toma la paleta y el tipo del estilo y da a cada pantalla una gran área de su color.
5. Construye
- Construye sobre kit/screens.html, como hacen los ejemplos: cada pantalla en el DOM en una página que se desplaza normalmente, las preguntas listadas en el borde derecho en un escritorio, siempre visibles (pestañas en un teléfono), un pliegue "Más" por pantalla, Notas completas al final y un interruptor de modo claro/oscuro.
- Cada escena se abre ya mostrando el punto (a mitad de camino, no un marco vacío en cero), se reproduce sola cuando su pantalla entra en vista durante unos diez segundos, luego descansa en su último marco para que la página esté quieta mientras el lector lee. Mover el control la reproduce de nuevo con la nueva configuración, y un toque la pausa. Con movimiento reducido descansa en un marco fijo que aún muestra el punto. El número se coloca en la escena como una etiqueta, no como el héroe de la pantalla.
- Dispón cada pantalla como una vista de aplicación: la escena es lo más grande en ella, abarcando el ancho en un teléfono y sosteniendo un escenario amplio y centrado en un escritorio, con la respuesta encima establecida grande.
- Cuando una escena dibuja una cosa física (un dispositivo, una máquina, un edificio, una parte del cuerpo), lee figures.md primero: decide entre el kit isométrico, un dibujo plano y ningún dibujo.
Escribe la página directamente con tus herramientas de archivo, copiando del ejemplo a mano; los scripts pueden no tener permitido ejecutarse, así que la página nunca depende de uno.
Terminado cuando cada pantalla planificada está en la página con su escena funcionando.
6. Verifica
Si puedes renderizar la página, toma una captura de pantalla de la pantalla 1 a ancho de teléfono; si no, lee su código. Responde sí o no:
- ¿Hay algo en la pantalla que sea la cosa misma, no un gráfico de ella?
- ¿Se mueve, y el control del lector cambia lo que hace?
- ¿Puede el lector saber qué hacer en unos segundos?
- ¿Cambiaría el aspecto si el tema cambiara?
Cuenta también: pantallas (4 a 7) y palabras fuera de los pliegues (40 o menos cada una). Corrige lo que falle en una pasada, luego publica.