Ejercicio: Generar un sitio web con Copilot

30 minutos

En este ejercicio, creará un sitio web para una empresa inmobiliaria y sus operaciones. Incluirá una página principal, una página de anuncios, una página de servicios, una página de información sobre la empresa y una página de contacto. Utilizará Copilot para generar el sitio y el contenido correspondiente. También utilizará Copilot para generar un tema de color para el sitio.

Nota

En este ejercicio, los resultados de los datos y las secciones pueden variar de los que se muestran en las capturas de pantalla y las instrucciones. Copilot y la IA generativa son impredecibles, así que use esto como una guía y no como una recreación 1:1.

Crear un sitio web inmobiliario con Copilot

Inicie sesión en su entorno de Power Pages.
En el centro de la página principal de Power Pages, en el campo de texto bajo Empezar a crear un sitio web con Copilot, escriba el siguiente mensaje:
```
Create a professional real estate website to showcase listings, services, and contact information
```
Seleccione el botón Enviar.
A partir de la indicación, Copilot genera un nombre de sitio y una dirección web. Cambie el nombre del sitio a Contoso Real Estate. Luego, cambie la dirección web a contosorealestate-nnnn.

Nota

La nnnn en la dirección web es un identificador único que genera Copilot. Puede cambiarla, pero sirve para asegurarse de que la dirección web sea exclusivamente para usted.

Seleccione Siguiente.
Ahora se le pedirá que elija un diseño de sitio. Puede seleccionar Reintentar para obtener un nuevo diseño generado o seleccionar Siguiente para continuar con el diseño actual. Seleccione Siguiente para continuar.
Luego, Copilot genera más páginas que podrían usarse en el sitio según la indicación. Seleccione las siguientes páginas:
- Acerca de nosotros
- Contacto
- Anuncios
- Servicios
Luego, seleccione Listo.

Ahora, Copilot configurará y generará el sitio completo. Esto puede tardar varios minutos.

Cuando se haya generado, se le redirigirá al sitio abierto en el estudio de diseño, donde podrá personalizarlo aún más.
Seleccione el icono de Inicio en la esquina superior izquierda para ir a la página principal de Power Pages.

Agregar el sitio web a Real Estate Solution

Para agregar el sitio web a Real Estate Solution, seleccione la pestaña Soluciones en el panel de navegación izquierdo.
Seleccione Real Estate Solution.
En los Objetos de solución, seleccione Sitios.

Si ve el sitio que ha creado en la lista, ya está todo preparado. De lo contrario, seleccione Agregar sitio>existente y, luego, seleccione el sitio que ha creado para agregarlo a la solución.
Seleccione la flecha hacia atrás en la esquina superior izquierda para volver a la página Soluciones.
Seleccione Inicio en el panel de navegación izquierdo para volver a la página principal de Power Pages.

Modificar la página principal del sitio web

En la página principal, en Sitios activos, busque el sitio Contoso Real Estate de Power Pages que ha creado previamente y seleccione Editar.
En el estudio de diseño de Power Pages, seleccione Páginas en el panel izquierdo para acceder al espacio de trabajo Páginas.
Seleccione Inicio para abrir la página principal en el estudio de diseño.
Busque el texto principal del encabezado en la página principal y reemplácelo con el siguiente texto:
```
Welcome to Contoso Real Estate
```
Ahora, busque el texto secundario bajo el encabezado principal y reemplácelo con el siguiente texto:
```
Your trusted partner in real estate
```
Busque el botón de llamada a la acción y selecciónelo. En la ventana emergente que aparece, seleccione Editar.
En Editar botón, cambie la etiqueta del botón a View Listings.
Seleccione la opción Vincular a una página y seleccione la página Anuncios en el menú desplegable.

Seleccione Aceptar.
Desplácese hacia abajo hasta que vea la sección con las dos columnas.

Nota

En el caso de que no tenga una sección con dos columnas, cambie el diseño de una de las columnas existentes colocando el cursor sobre la sección y seleccionándola.

Seleccione Diseño en la barra de herramientas emergente y, luego, seleccione el diseño de 2 columnas.

En la columna de la izquierda, reemplace el texto del título con Our Services y conviértalo en un tipo de texto Título 2.
Bajo Our Services, reemplace el texto por lo siguiente:
```
We offer a range of services to help you buy, sell, or rent your property.
```
Con el texto aún seleccionado, seleccione Copilot en la barra de herramientas emergente y, luego, Reescribir. Se utilizará IA a fin de generar nuevo texto para la sección.
Experimentar con las diferentes opciones que ofrece Copilot. Ponga el Tono en Profesional y la Longitud en Hacer más largo. A continuación, seleccione Reemplazar texto para agregar el nuevo texto a la sección.
Seleccione el botón Llamada a la acción, debajo del texto recién generado.

Nota

Si no tiene un botón, agregue un nuevo botón seleccionando el botón Agregar un componente debajo del texto y, luego, seleccionando Botón.

Con el botón seleccionado, en la ventana emergente que aparecerá, seleccione Editar.
En Editar botón, cambie la etiqueta del botón a Learn More.
Seleccione la opción Vincular a una página y seleccione la página Servicios en el menú desplegable.

Seleccione Aceptar.
En la columna de la derecha, seleccione la imagen y, luego, Imagen en la barra de herramientas emergente.
En Agregar una imagen, seleccione Imágenes de archivo, busque contact y seleccione una imagen que le guste.

Seleccione Insertar.
Cambie el texto del título bajo la imagen por Contact Us y conviértalo en un tipo de texto Título 2.
Bajo Contact Us, reemplace el texto por lo siguiente:
```
Get in touch with us to learn more about our services or to schedule a showing.
```
Con el texto aún seleccionado, seleccione Copilot en la barra de herramientas emergente y, luego, Reescribir. Se utilizará IA a fin de generar nuevo texto para la sección.
Ponga el Tono en Profesional y la Longitud en Hacer más largo. A continuación, seleccione Reemplazar texto para agregar el nuevo texto a la sección.
Seleccione el botón Llamada a la acción, debajo del texto recién generado. En la ventana emergente que aparece, seleccione Editar.
En Editar botón, cambie la etiqueta del botón a Send a Message.
Seleccione la opción Vincular a una página y seleccione la página Contacto en el menú desplegable.

Seleccione Aceptar.

Ahora, esta sección debería tener un aspecto similar al siguiente. De lo contrario, ajuste el contenido para que se corresponda con la siguiente captura de pantalla.
Elimine cualquier otra sección, de modo que solo queden las secciones Encabezado/barra de navegación, Elemento principal, Servicios/Contacto y Pie de página.

Seleccione la sección que desee eliminar. Seleccione los puntos suspensivos Más en la barra de herramientas y seleccione Eliminar.
Ahora, agregaremos una nueva sección con Copilot, pero primero necesitamos un espaciador. Justo encima del pie de página, seleccione Agregar una sección y, luego, Espaciador.
Con el Espaciador seleccionado, elija Editar fondo en la barra de herramientas emergente y seleccione uno de los colores de la marca.
A continuación, abra la ventana del chat de Copilot seleccionando el icono Copilot en la esquina superior derecha del estudio de diseño. Le pedirá a Copilot que agregue una nueva sección.

En la ventana de chat, escriba lo siguiente:
```
Create a section for customer testimonials
```
Pulse Intro.
Se generará una nueva sección automáticamente.

Nota

El contenido generado por Copilot no será siempre igual ni perfecto, por lo que quizá deba ajustarlo para que se adapte mejor a sus necesidades.

Seleccione Conservar para agregar la sección al sitio.
Seleccione la sección y, luego, Diseño en la barra de herramientas emergente. Luego, seleccione el diseño 3 columnas.
En la nueva sección, bajo Agregar un componente, seleccione Más (puntos suspensivos) e Imagen.
En Agregar una imagen, seleccione Imágenes de archivo>Iconos. Busque people y seleccione una imagen que le guste.

Seleccione Insertar.
Con la imagen seleccionada, establezca las siguientes propiedades en la barra de herramientas:
- Alinear: Alinear al centro
- Diseñar > Diseño > Ancho: 60 %
Seleccione el icono de suma debajo de la imagen y, luego, Texto. Con el componente de texto seleccionado, seleccione Copilot en la barra de herramientas emergente y describa el texto que necesita generar:
```
A short testimonial for a real estate company from a happy customer
```
Seleccione Intro.

Cuando se genere el texto, seleccione Agregar a la página.

Seleccione Reemplazar texto para agregar el nuevo texto a la sección.
Seleccione el icono de suma debajo del texto y, luego, Texto. Cambie el tipo de texto de Párrafo a Subtítulo 1. Cambie la alineación a Alinear al centro.
Cambie el texto con un nombre de cliente de su elección.
Repita los últimos pasos para agregar dos testimonios más a la sección o edite los existentes para que coincidan con el testimonio que acaba de crear.
Cambiar el color de los nombres de los clientes para que coincidan con los colores del sitio.

Generar un tema de color para el sitio web

Ahora que el contenido principal de la página principal está completo, vamos a usar Copilot para generar un tema de color.

En la ventana de chat de Copilot, escriba lo siguiente:
```
Create a color theme using blue, red and white for the website
```
Pulse Intro.
Se generará un tema de color automáticamente.
Puede seleccionar Reintentar para generar un nuevo tema de color o seleccionar Aplicar tema para aplicar el tema de color generado en el sitio.

Seleccione Aplicar tema.
Cuando se haya aplicado el tema, ajuste los colores del sitio para que el contenido sea más legible.

Coloque el cursor sobre el encabezado del sitio y seleccione Editar encabezado del sitio.

En el panel Editar encabezado del sitio, seleccione Estilo y cambie el Fondo del encabezado a un color neutro.

Seleccione Título y cambie el Peso a Negrita y el Color a un color que destaque sobre el fondo.

Seleccione Navegación del sitio y cambie el Color a un color que destaque sobre el fondo. Cambie el color que aparece al pasar el ratón.
Cambie el estilo de todos los botones, textos, espaciadores, fondos y otros elementos del sitio para que coincidan con el nuevo tema de color, para que el contenido sea más legible y para que el sitio tenga el aspecto profesional que usted desea.

Vista previa del sitio web

En la esquina superior derecha del estudio de diseño, seleccione Vista previa.
Seleccione Escritorio para obtener una vista previa del sitio en una pantalla de escritorio.
Inicie sesión con su cuenta Microsoft si se le solicita y acepte los permisos solicitados.
Desplácese por el sitio para comprobar que el contenido aparezca correctamente y que el sitio tenga un aspecto profesional. Compruebe si todos los botones y vínculos funcionan según lo esperado.