Válido para el Creador de apps y sitios web IA (AI App & Site Builder)

En este artículo te explicamos, mediante un ejemplo, cómo crear una página web con el «Creador de apps y sitios web IA», también conocido como «AI App & Site Builder».

Requisito

Acceder al Creador de apps y sitios web IA

  • Inicia sesión en tu cuenta IONOS.
  • En la barra de menú superior, haz clic en Menú > Proyectos web.
  • En el mosaico con el tipo de proyecto «Creador de apps y sitios web IA» correspondiente, haz clic en el botón Configurar sitio web. Se abrirá la interfaz de usuario del Creador de apps y sitios web IA.
  • Haz clic en el botón Iniciar nuevo proyecto para confeccionar uno nuevo.

Si ya has creado proyectos web, puedes seleccionarlos en el rectángulo que aparece debajo de la ventana de chat.

Cómo dar instrucciones al Creador de apps y sitios web IA

La comunicación con la inteligencia artificial integrada en esta herramienta se realiza en lenguaje cotidiano. Al formular las instrucciones (prompts), ten en cuenta las siguientes recomendaciones:

  • Identidad y sector: ¿Quién eres y qué haces exactamente? Por ejemplo: «centro moderno de fisioterapia» en lugar de simplemente «consulta».
  • Público objetivo: ¿A quién va dirigido el proyecto web? Por ejemplo: «familias jóvenes», «empresas B2B», «personas mayores con dolores crónicos».
  • Propuesta única de venta (USP o «Unique Selling Proposition»): ¿Qué te hace especial? Por ejemplo: «enfoque sostenible», «servicio de urgencias 24/7», «ingredientes locales».
  • Secciones y funciones deseadas: ¿Qué contenidos son fundamentales para ti? Por ejemplo: «agenda de citas», «quiénes somos», «formulario de contacto».
  • Estilo y ambiente: ¿qué impacto visual y emocional debe tener tu proyecto web? Por ejemplo: «minimalista y profesional», «cálido, acogedor y familiar».

En resumen, tus instrucciones o tu prompt tendrían el siguiente aspecto. Sustituye el texto entre paréntesis por tu información personal.

Crea una página web para [identidad y sector]. Nuestro público objetivo principal es [público objetivo]. Lo que nos hace especiales es [característica diferenciadora]. La página web debe incluir las siguientes secciones: [secciones y funciones]. El estilo visual y emocional debe ser [estilo y ambiente].

Para un taller de coches independiente, la indicación podría ser la siguiente:

Crea una página web para un taller de coches independiente sin vinculación a ninguna marca. Nuestro público objetivo principal son los clientes que buscan precios competitivos. Lo que nos hace especiales es nuestra especialización en coches antiguos y clásicos anteriores al año 2000, que también restauramos y vendemos en el taller. La página web debe incluir las siguientes secciones: «Quiénes somos», una galería con fotos del taller y de los proyectos de restauración realizados, un formulario de contacto y un formulario de citas con un calendario que muestre las citas disponibles en el taller. El estilo visual y emocional debe ser serio y elegante.

Crear y publicar un proyecto web

Una vez que hayas enviado una instrucción a través de la ventana de chat del Creador de apps y sitios web IA para su procesamiento, la pantalla se dividirá en dos partes. A la izquierda encontrarás la ventana de chat, en la que podrás introducir más instrucciones y recibir información del Creador de apps y sitios web IA. A la derecha, encontrarás la vista previa del proyecto web creado.

Encima de la vista previa, a la derecha, hay una barra de herramientas que te ofrece más opciones:

  • Vista de escritorio y vista de móvil: así es cómo se verá tu sitio web tras la publicación.
  • Actualizar
  • Abrir vista previa en una pestaña nueva
  • Historial de versiones: vuelve a una versión anterior de tu proyecto web. Esto te permite probar diferentes instrucciones sin temor a perder datos y sin necesidad de realizar laboriosas copias de seguridad.
  • Publicar: publica tu proyecto web, ya sea en una dirección de IONOS o en tu propia dirección de dominio.

Pasa el cursor por encima de los iconos para ver la función correspondiente.

Editar contenidos de forma selectiva

Para editar contenidos, como por ejemplo tus datos de contacto, utiliza la barra de herramientas situada en la parte inferior de la ventana de vista previa:

  • Editar texto: haz clic en un elemento de texto para modificarlo directamente.
  • Señalar y preguntar: selecciona un elemento para modificarlo mediante instrucciones en la ventana de chat, por ejemplo, «cambia la forma del botón a una estrella». Si mantienes pulsada la tecla CTRL mientras seleccionas, podrás seleccionar varios elementos.

Realizar modificaciones y ajustes

Para realizar cambios y ajustes generales en tu proyecto web, escribe tus instrucciones directamente en la ventana de chat, sin seleccionar ningún elemento. Por ejemplo: «utiliza una fuente sans-serif» o «añade una nueva imagen de fondo en cada página».

Más información