Michaelbr.f

Recurso 08 · Guía visual

¿Cómo enseño y vendo una web a un negocio?

Seis pantallas para entender el recorrido: detectar una necesidad, escribir al negocio, crear una muestra, enseñarla y dejar la web publicada.

6 pasos visuales2 textos para copiarUn ejemplo de restaurante

Empieza aquí

La web no nace en el código. Nace en una necesidad.

Usaremos un restaurante ficticio que todavía no tiene web. Las pantallas de esta guía son esquemas interactivos, no capturas de Google, Vercel o IONOS: los botones reales de cada servicio pueden cambiar.

01 / 06

Busca una oportunidad real.

Empieza por un negocio sin página web. Mira su ficha pública y apunta qué información le falta a quien lo busca.

Mira: web · carta · horario · contacto.
02 / 06

Escribe sobre el problema, no sobre la IA.

Primero abre una conversación. No prometas ventas ni envíes una web terminada gratis.

Pulsa «Copiar mensaje» y adáptalo al negocio.
● ● ●Mensaje de presentación · ejemplo
Hola, he visto que quien busca vuestro restaurante no encuentra fácilmente la carta y el horario en una web propia. Creo que una página sencilla podría reunir esa información y facilitar el contacto desde el móvil. ¿Os interesaría que os enseñara una propuesta breve?
2 Personaliza nombre y observación
03 / 06

Haz cinco preguntas antes de crear nada.

Las respuestas son el contexto que necesita la web. Si ya tienen dominio o hosting, anótalo antes de tocarlo.

Sin estas respuestas, el prompt será demasiado genérico.
● ● ●Mini-brief · qué preguntar
  1. 01¿Qué debe hacer el visitante?Ver carta, llamar, reservar…
  2. 02¿Qué servicios o productos mostrarás?Carta actual, fotos, precios…
  3. 03¿Qué datos son correctos?Horario, dirección, contacto…
  4. 04¿Ya tienes web, dominio o hosting?¿Quién administra cada uno?
  5. 05¿Quién aportará textos e imágenes?Usa material autorizado.
3 Guarda las respuestas en tu cuaderno o en un documento del proyecto.
04 / 06

Pide una primera web y reconoce los archivos.

Copia el prompt en la IA que utilices. Puede darte un archivo descargable o el código para guardarlo tú.

El archivo de entrada suele llamarse index.html.
● ● ●Chat con IA · ejemplo
Ayúdame a crear una primera web sencilla para [TIPO DE NEGOCIO]. Objetivo principal: [ACCIÓN DEL VISITANTE]. Datos confirmados: [HORARIO, DIRECCIÓN, CONTACTO, SERVICIOS]. Necesito portada, información del negocio y un botón de contacto. Primero dime qué datos faltan; no los inventes. Después entrégame los archivos necesarios e indícame cuál es index.html. Usa solo imágenes que tenga permiso para utilizar.
4 Sustituye los corchetes
Después del chat: ¿qué hago con el HTML?
📁 Web Restaurante Ejemplo/└── 📄 index.html└── 📁 assets/ (si la IA te entrega imágenes)

Si recibes el archivo, descárgalo y guárdalo en esa carpeta. Si recibes código, guárdalo como index.html. Ábrelo en tu navegador para revisar la muestra. Si la IA entrega CSS o JavaScript aparte, guárdalos junto al HTML respetando sus nombres.

05 / 06

Enséñale una muestra, no una promesa.

Muéstrale la portada, el menú o servicios, el contacto y cómo se ve en móvil. Señala lo que aún es provisional.

Tu archivo local solo se ve en tu ordenador; para enviarlo necesitas un enlace.
● ● ●Vista previa · ejemplo
5 Vista local: …/Web Restaurante Ejemplo/index.html
Restaurante EjemploUna mesa para compartir.
CartaHorarioContacto ↗
Haz clic en index.html para verlo tú. Para que el cliente lo abra a distancia, publica una vista previa en un alojamiento autorizado para ese uso y envíale su enlace.
¿Y si quiero enseñarlo con Vercel?

Vercel permite subir un proyecto y obtener una URL de vista previa. El recorrido general es: crear proyecto → subir/conectar archivos → desplegar → copiar enlace. Ojo: el plan gratuito Hobby es para uso personal no comercial; una muestra hecha para conseguir un cliente necesita un plan que permita uso comercial. Ver condiciones oficiales ↗

06 / 06

Si le gusta, acuerda y publica la versión final.

Define precio, alcance y revisiones. Luego elige dónde vivirá la web y quién será responsable de cada servicio.

Un dominio + un alojamiento; no necesitas pagar dos hostings.
● ● ●Cómo llega la web al público · esquema
ARCHIVOSindex.htmlTu web
→
HOSTINGIONOS o VercelDonde vive
←
DOMINIOrestaurante.esLa dirección
Ejemplos de dirección:restaurante.comrestaurante.eswww.restaurante.eswww es una variante del dominio, no otra compra.
6 El dominio propio apunta al hosting elegido. Revisa la web pública desde otro móvil.
Si el cliente ya tiene dominio y hosting

No compres otros por inercia. Averigua dónde están, qué web existe y quién los administra. Pide acceso autorizado, mejor mediante un usuario propio que compartiendo su contraseña. Antes de cambiar una web existente, guarda una copia.

Si empieza desde cero

Lo más claro es que el cliente registre el dominio a su nombre y controle su renovación. Si tú lo compras o gestionas, dejad por escrito titularidad, pagos y entrega de accesos. Elige un hosting apto para la web comercial y conecta allí el dominio.

Lo que quiero que te lleves

Detectar → preguntar → crear → mostrar → acordar → publicar.

«Quiero que aprendas esto paso a paso. La inteligencia artificial puede ayudarte a crear una web, pero el criterio lo pones tú: entender qué necesita un negocio, probar una idea y saber explicarla. Dedicar tiempo a aprender esta habilidad puede abrirte oportunidades. No por pulsar un botón, sino por saber qué estás construyendo y por qué.»— Michael Bravo
¿Quieres practicar el proceso completo?

Del esquema al proyecto real.

Esta guía te muestra el mapa. En el programa profundizamos en la construcción, publicación y venta de una web paso a paso.

Conocer el programa ↗