mukulmunda41-create/web-assets-and-launch

Activos web, pulido y lanzamiento

Una rutina corta para el trabajo de finalización de un sitio que ya existe. Cubre los pasos visuales y de envío de la habilidad futuristic-web-design, empaquetados para que se puedan ejecutar solos.

Si ../futuristic-web-design/ se encuentra junto a esta habilidad, sus archivos de referencia contienen los detalles: references/assets.md para los avisos y los comandos de ffmpeg, references/ship.md para los pases, el formulario, el despliegue, el dominio y la lista de verificación de lanzamiento completa.

Haz solo la parte que el usuario solicitó. Cada encabezado a continuación es independiente.

Preparar archivos para la web

La salida de generadores y cámaras es demasiado pesada para enviar. Un visitante con datos móviles espera cada byte, mientras que una laptop que lee desde su propio disco oculta el problema.

Obtén aprobación antes de instalar herramientas como ffmpeg o sharp. Algunas compilaciones de ffmpeg no tienen codificador WebP; cwebp o sharp hacen el mismo trabajo si ya están instalados.

Almacena los archivos con nombres descriptivos en public/images/ en Next.js. En un sitio HTML simple, guárdalos en una carpeta images/ junto a la página: en Vercel, un sitio sin framework sirve solo la carpeta public/ cuando existe, lo que ocultaría la página misma.

Archivo	Objetivo
Imagen principal	WebP, de máximo 1920px de ancho, aproximadamente 300 KB
Otras imágenes	WebP, de máximo unos 1000px de ancho, aproximadamente 150 KB
Video principal (hero.mp4)	H.264 MP4, de máximo 1080p, sin audio, por debajo de 4 MB
Póster (hero-poster.webp)	El primer fotograma del video

Termina con una tabla de tamaños antes y después, para que el ahorro se muestre, no se afirme.

Escribir avisos para imágenes y video

Estos son adecuados para Google Flow o cualquier otro generador. Si puedes generar directamente, obtén aprobación antes de gastar créditos. Si no puedes, entrega los avisos al usuario y continúa con marcadores de posición claramente indicados.

• Lista de tomas primero. Decide los activos y sus relaciones de aspecto antes de generar: aproximadamente siete para un sitio de una página (video principal, imagen principal estática, tres tomas de oferta, una imagen de historia, una imagen para compartir).
• El resumen de la imagen, seis partes en orden: tema, entorno, iluminación, cámara (altura, lente, profundidad de campo), estado de ánimo y paleta, formato (16:9 principal, 4:5 producto). Pide etiquetas en blanco, porque los generadores distorsionan las letras y el texto real pertenece al HTML.
• La línea de estilo. Toma las frases de iluminación, cámara y estado de ánimo y paleta de la primera imagen aprobada y reutilízalas palabra por palabra en cada aviso posterior. Eso es lo que hace que el conjunto parezca una sola sesión.
• Video principal. Anima la imagen estática aprobada, describe un pequeño movimiento y establece que todo lo demás permanece congelado con una cámara fija.
• Clip de vista explosionada. Imagen estática inicial: el producto ensamblado, pequeño y centrado, con espacio vacío donde irán las partes. Imagen estática final: construido a partir de la imagen estática inicial, nunca desde cero, con las partes espaciadas a lo largo de un solo eje recto y el mismo punto de vista, luz y fondo. El clip va de la primera imagen estática a la segunda con una cámara bloqueada.

Mantén a las personas reales y los logotipos de terceros fuera de los activos generados, y muestra los productos reales de un negocio real.

Revisión telefónica, pulido y velocidad

• Revisión telefónica a 390px. Texto legible, nada presionado contra el borde, objetivos táctiles de aproximadamente 44px, sin desplazamiento horizontal, un menú desplegable funcional. Corrige como una lista detallada, luego desplázate de nuevo. Un navegador de escritorio redimensionado solo se aproxima a un teléfono, así que pide una verificación en un dispositivo real y di si no se realizó ninguna.
• Pase de pulido. Espacios uniformes entre secciones, tamaños iguales para encabezados del mismo rango, estilo hover y focus en cada elemento interactivo, sin rutas de vista previa sobrantes.
• Velocidad. Perfila bajo un ajuste preestablecido móvil y nombra las tres mejoras de mayor impacto, la más grande primero. Si una implica eliminar algo que el usuario valora, indícalo para su decisión.

Enumera lo que encuentres antes de cambiar cualquier cosa que el usuario no haya pedido cambiar.

Claves

• .env.local contiene las claves y está listado en .gitignore.
• El código del sitio usa solo claves públicas. Las claves secretas o de servicio nunca llegan al código del cliente.
• Busca en el código y en el historial de git los secretos, e informa lo que se revisó.
• Un secreto que alguna vez se sirvió en el código de la página o se comprometió en git está expuesto, incluso si el repositorio nunca se envió: los visitantes podían leer la página, y el historial viaja con cada copia y cada futuro envío. Eliminarlo del archivo no deshace eso. Dile al usuario que lo rote en el panel del proveedor, cualquiera que sea su valor.

Búsqueda y para compartir

• Título de máximo 60 caracteres y descripción de máximo 155, indicando qué se vende y dónde. El nombre de la marca solo no significa nada para un extraño.
• Imagen para compartir de 1200x630 en public/images/share.webp, configurada como la imagen de Open Graph y Twitter.
• Favicon, sitemap y archivo robots.
• Establece el dominio de producción como URL base para que la imagen para compartir y el sitemap se resuelvan. Pregunta por él si se desconoce.

Desplegar

Despliega solo cuando el usuario lo pida.

• Conecta el repositorio a Vercel. Cada envío a la rama principal entonces redespliega producción.
• Ingresa los valores de .env.local en la configuración del proyecto del host. Un formulario que funciona localmente y se rompe en producción casi siempre se debe a que faltan estos.
• En una compilación fallida, lee el registro y corrige la causa raíz.
• Verifica en la URL de producción desde un teléfono con datos móviles: carga la página, envía el formulario y busca la fila almacenada.
• Pega el enlace en una aplicación de mensajería para verificar la tarjeta de vista previa.

Informa honestamente: qué se verificó, qué no se pudo (un teléfono físico, el dominio de producción) y qué queda para el usuario.