Workshop Kit · referencia del widget
Publicadoshot-list-grid
Grilla de referencia visual curada para el brief de fotos de la L9a. Ocho tomas universales para restaurantes (plato emblemático, sala abierta, manos cocinando, fachada al anochecer, textura en primer plano, dos comensales, ingrediente firma, retrato del chef), cada una renderizada como un boceto de composición SVG inline — líneas guía rule-of-thirds más un área focal tintada que sugiere el encuadre — así que el iframe del riel y la demo funcionan sin ningún fetch de foto remota. Cuando restaurantProfile.cuisine resuelve a una de 12 cocinas soportadas (mexicana, italiana, japonesa, china, tailandesa, india, mediterránea, americana, francesa, coreana, vietnamita, etíope), aparecen dos tarjetas extra específicas de la cocina.
Demo en vivo
Haz clic en las tarjetas para añadirlas a tu shot list (o quitarlas). Las tres primeras selecciones se vuelven el set de la página de inicio. Para ver las tarjetas extra por cocina, asegúrate de tener una cocina seteada en alguna lección del curso primero.
Sin bloque de configuración — las referencias vienen incluidas. Los extras por cocina aparecen si MuntinContext.restaurantProfile.cuisine está seteado.
Contrato
| Comportamiento | Notas |
|---|---|
Lee restaurantProfile.cuisine |
Match por substring en minúsculas contra 12 cocinas soportadas. Cocinas no reconocidas renderizan solo las ocho universales. |
Lee shotList |
Pre-selecciona tarjetas elegidas previamente al remontar. Preserva la curación del operador entre lecciones y dispositivos. |
Lee palette[0] |
Tinta los bocetos de composición con el color de acento del operador. Cae a teal si no hay paleta seteada. |
Escribe shotList |
[{ id, label, framing, source }] en orden de selección. Tope de 8 items; los primeros 3 son el set de inicio. |
| Solo bocetos SVG | Sin fetch de fotos remotas. Cada tarjeta es un viewBox 100×70 con líneas rule-of-thirds + un área focal (círculo, rect, path). Tintada con currentColor manejado por el acento. |
| Tope de selección | 8 máximo. Añadir un 9º dispara un anuncio en región polite; los 8 existentes no se mueven. |
Marcado
Sin bloque de configuración. Las referencias específicas por cocina se resuelven desde restaurantProfile.cuisine; las ocho tomas universales vienen incluidas con el widget.
Accesibilidad
- Cada tarjeta es un
<button>conaria-pressedreflejando el estado de selección — los lectores de pantalla anuncian "presionado" / "no presionado" como un toggle, no como una opción estática. - El estado de los-3-de-inicio se renderiza como texto visible ("1 de 3 para inicio") Y como un badge con color — así los modos de alto contraste no ocultan la señal.
- Los bocetos SVG son
aria-hidden="true"; la etiqueta + descripción cargan el significado. La composición es decoración. - Añadir una tarjeta anuncia "Plato emblemático añadida — 1 de 3 para la página de inicio." vía una región polite en vivo. Quitar anuncia similarmente.
- Los botones "quitar" de la lista seleccionada tienen
aria-labeldescriptivos para que el propósito del botón no sea solo "×".
Por qué bocetos SVG, no fotos
Las fotos de referencia de restaurantes están por toda la internet — tags de Instagram, tableros de Pinterest, Pexels. Pero el iframe del riel del Workshop Kit es sandbox="" sin acceso a red, y la promesa de "sin fetch" de la suite significa que no podemos cargar imágenes remotas ni en demos. Los bocetos de composición SVG inline preservan el riel y la demo mientras siguen comunicando "así se ve una toma cenital centrada" — que es la jugada pedagógica. El operador trae su cocina; nosotros le decimos la composición.
Dónde se publica
El Photo Brief Builder puede después leer los ids del shotList y pre-llenar su selector de cobertura por superficie.
Código fuente
/tools/_shared/workshop/shot-list-grid.js — ~280 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Ocho referencias universales + una tabla de 12 cocinas con extras viven al inicio del archivo. Los bocetos de composición son strings SVG inline — fáciles de extender con nuevos encuadres (solo añade una clave a la tabla FRAMES).