AdityaPratamaS18/website-skill

Habilidad de sitio web: procedimiento

Esta habilidad construye un sitio web para un cliente a partir de un brief. Cada cliente tiene un plan aprobado, una base de código y un script de verificación. El plan aprobado controla las rutas, los títulos, las descripciones, los encabezados y el mapa del sitio.

En este documento, <directorio-habilidad> es la carpeta que contiene este archivo, y <directorio-cliente> es la carpeta para este cliente. Si el usuario no tiene una convención de carpetas, use clientes/<cliente>/.

Requisitos preliminares

1. Lea las notas para este cliente, si existen. Dele al usuario las reglas que aplican, en 2 o 3 líneas.
2. Encuentre el brief, el perfil de la empresa, el logotipo y las fotos.
3. Asegúrese de que Node.js, Python 3 y rsync estén disponibles.

ADVERTENCIA: NO PONGA UN HECHO EN EL SITIO SI EL BRIEF NO LO PROPORCIONA. UN CERTIFICADO, NOMBRE DE CLIENTE, CIFRA O TESTIMONIO INVENTADO ES UN RIESGO LEGAL Y DE CONFIANZA PARA EL CLIENTE.

Fase 1: Hechos

1. Lea references/brief-intake.md.
2. Lea cada archivo fuente por completo.
3. Escriba <directorio-cliente>/site-brief/facts.md.
4. Rastree el sitio actual si el cliente tiene uno. Registre cada URL para el mapa de redirecciones.
5. Escriba <directorio-cliente>/site-brief/questions-for-client.md si faltan hechos.

PUERTA 1. Muestre al usuario el resumen de la hoja de hechos y la lista de vacíos. Deténgase hasta que el usuario responda. Continúe con los vacíos solo si el usuario está de acuerdo. Una página que necesita un hecho faltante se queda fuera del plan, o se queda sin ese hecho.

Fase 2: Plan del sitio

1. Lea references/site-plan.md.
2. Haga la investigación de palabras clave para el mercado del cliente.
3. Copie <directorio-habilidad>/assets/site-plan.template.json a <directorio-cliente>/site-brief/site-plan.json.
4. Complete una entrada para cada página.
5. Compare el plan con la propuesta, si existe. Cada elemento en el alcance debe tener una página o una característica. Un formulario en el alcance necesita alojamiento server, o un reemplazo acordado.
6. Ejecute la puerta del plan. Corrija cada FALLO.

python3 <directorio-habilidad>/scripts/site_gate.py plan <directorio-cliente>/site-brief/site-plan.json

PUERTA 2. Muestre al usuario una tabla con estas columnas: URL, palabra clave principal, volumen mensual, título. También indique la elección de alojamiento. Deténgase hasta que el usuario apruebe. Luego escriba la aprobación en el plan como approved_by y approved_on. La puerta de construcción falla sin estos campos.

Fase 3: Andamiaje

1. Seleccione la carpeta <directorio-cliente>/website/.
2. Ejecute el script de andamiaje. El script funciona con espacios y mayúsculas en la ruta.

bash <directorio-habilidad>/scripts/scaffold.sh "<directorio-cliente>/website" static

3. Use server en lugar de static solo si el plan necesita una característica de servidor (vea references/launch.md).
4. Copie el site-plan.json aprobado a src/lib/site-plan.json.
5. Reemplace cada valor __FILL en src/lib/site.ts con un valor de la hoja de hechos.
6. Lea las guías para metadatos, imágenes, fuentes y exportaciones estáticas en node_modules/next/dist/docs/01-app/.

NOTA: Next.js cambia entre versiones principales. Las guías en node_modules coinciden con la versión instalada. Sus datos de entrenamiento no.

Fase 4: Dirección de diseño

1. Lea references/design-and-copy.md.
2. Cree los tokens de color y tipo a partir del logotipo. Colóquelos en globals.css.
3. Cree public/logo.webp, public/og.webp (1200 por 630 píxeles) y src/app/icon.png a partir del logotipo.
4. Construya el encabezado, el pie de página y solo la página de inicio.
5. Inicie la vista previa. Use npx serve out -l 3210 para un sitio estático, después de una compilación. Use npm run dev para un sitio con servidor.
6. Abra http://127.0.0.1:3210 en un navegador. Verifique la página a 375, 768 y 1280 píxeles.

NOTA: Un navegador incrustado puede devolver HTTP 431 para localhost. La dirección 127.0.0.1 no tiene este problema.

PUERTA 3. Muestre al usuario la página de inicio. Deténgase hasta que el usuario apruebe el diseño. Todas las demás páginas usan este diseño.

PRECAUCIÓN: NO CONSTRUYA LAS OTRAS PÁGINAS ANTES DE LA PUERTA 3. UN CAMBIO DE DISEÑO TARDÍO CAUSA UNA MIGRACIÓN DE TODAS LAS PÁGINAS.

Fase 5: Páginas

1. Lea references/seo-build-spec.md.
2. Coloque el contenido en archivos de datos tipados en src/lib/ (por ejemplo services.ts). Mantenga los archivos de página ligeros.
3. Use una ruta dinámica con generateStaticParams para cada tipo de página repetida.
4. Obtenga cada título, descripción y H1 del plan con pageMetadata() y getPage().
5. Escriba el texto para el comprador, con la voz del cliente. Use solo hechos de facts.md.
6. Agregue enlaces internos según la especificación.
7. Construya el sitio.

npm run build

8. Ejecute la puerta de construcción. Corrija cada FALLO en su causa. No cambie la puerta para obtener un pase.

python3 <directorio-habilidad>/scripts/site_gate.py build <directorio-cliente>/website

9. Ejecute npx tsc --noEmit y npm run lint.

Fase 6: Revisión

1. Verifique cada tipo de página en el navegador a 375, 768 y 1280 píxeles.
2. Verifique cada CTA: teléfono, WhatsApp, correo electrónico y formulario.
3. Si el usuario lo requiere, prepare el texto de la página para el cliente en un documento. Siga references/design-and-copy.md.
4. Despliegue una vista previa solo cuando el usuario se lo indique. Una compilación de vista previa no es indexable.

PUERTA 4. Dele al usuario la URL de vista previa y el resultado de la puerta. Deténgase hasta que el usuario apruebe el lanzamiento.

Fase 7: Lanzamiento

1. Lea references/launch.md.
2. Construya con SITE_INDEXABLE=1.
3. Ejecute la puerta de construcción con --release. La puerta debe pasar.
4. Siga los pasos de lanzamiento en references/launch.md.

ADVERTENCIA: NO CONECTE EL DOMINIO NI EMPUJE A PRODUCCIÓN SIN UNA APROBACIÓN EN LA SESIÓN ACTUAL. EL DOMINIO EN VIVO AFECTA EL NEGOCIO DEL CLIENTE.

Cierre

1. Dele al usuario una lista de las acciones del cliente que quedan.
2. Registre rutas, decisiones y lecciones en las notas para este cliente.
3. Dígale al usuario que el sitio está listo para el trabajo de contenido SEO.

Reglas fijas

Regla	Razón
Una URL por cada servicio	Un sitio de una página le da a un servicio ninguna URL que pueda posicionarse
Una palabra clave principal por cada URL	Dos páginas en una palabra clave compiten entre sí
El plan es la única fuente para títulos y rutas	La puerta compara el HTML construido con el plan
Sin contadores de estadísticas animados	El HTML muestra 0 antes de que se ejecute el script
Las puertas son scripts	Cada fallo que los scripts detectan pasó primero por una persona

Referencias

Archivo	Leerlo en
references/brief-intake.md	Fase 1
references/site-plan.md	Fase 2
references/design-and-copy.md	Fase 4 y Fase 6
references/seo-build-spec.md	Fase 5
references/launch.md	Fase 2 (alojamiento) y Fase 7