Ejercicio: Generar un sitio web con Copilot

Completado

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

  1. Inicie sesión en su entorno de Power Pages.

  2. 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.

    Captura de pantalla con la indicación de Copilot en Power Pages utilizada para crear un sitio web inmobiliario

  3. 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.

    Captura de pantalla con el nombre del sitio y la dirección web generados por Copilot en Power Pages

    Seleccione Siguiente.

  4. 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.

  5. 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.

    Captura de pantalla con el estudio de diseño de Power Pages, con el sitio generado

  6. 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

  1. Para agregar el sitio web a Real Estate Solution, seleccione la pestaña Soluciones en el panel de navegación izquierdo.

  2. Seleccione Real Estate Solution.

  3. 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.

  4. Seleccione la flecha hacia atrás en la esquina superior izquierda para volver a la página Soluciones.

  5. 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

  1. En la página principal, en Sitios activos, busque el sitio Contoso Real Estate de Power Pages que ha creado previamente y seleccione Editar.

    Captura de pantalla con la página principal de Power Pages, con el sitio de Contoso Real Estate

  2. En el estudio de diseño de Power Pages, seleccione Páginas en el panel izquierdo para acceder al espacio de trabajo Páginas.

    Captura de pantalla con el área de trabajo Páginas en el estudio de diseño de Power Pages

  3. Seleccione Inicio para abrir la página principal en el estudio de diseño.

  4. Busque el texto principal del encabezado en la página principal y reemplácelo con el siguiente texto:

    Welcome to Contoso Real Estate
    
  5. Ahora, busque el texto secundario bajo el encabezado principal y reemplácelo con el siguiente texto:

    Your trusted partner in real estate
    
  6. Busque el botón de llamada a la acción y selecciónelo. En la ventana emergente que aparece, seleccione Editar.

    Captura de pantalla con la opción de edición de botón en el estudio de diseño de Power Pages

  7. En Editar botón, cambie la etiqueta del botón a View Listings.

  8. Seleccione la opción Vincular a una página y seleccione la página Anuncios en el menú desplegable.

    Captura de pantalla con las opciones de edición de botón en el estudio de diseño de Power Pages

    Seleccione Aceptar.

  9. 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.

  10. 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.

    Captura de pantalla con la opción de reescritura de Copilot en el estudio de diseño de Power Pages

  11. 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.

  12. 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.

  13. En Editar botón, cambie la etiqueta del botón a Learn More.

  14. Seleccione la opción Vincular a una página y seleccione la página Servicios en el menú desplegable.

    Seleccione Aceptar.

  15. En la columna de la derecha, seleccione la imagen y, luego, Imagen en la barra de herramientas emergente.

  16. En Agregar una imagen, seleccione Imágenes de archivo, busque contact y seleccione una imagen que le guste.

    Captura de pantalla con la selección de imagen de archivo en el estudio de diseño de Power Pages

    Seleccione Insertar.

  17. Cambie el texto del título bajo la imagen por Contact Us y conviértalo en un tipo de texto Título 2.

  18. 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.

  19. 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.

  20. Seleccione el botón Llamada a la acción, debajo del texto recién generado. En la ventana emergente que aparece, seleccione Editar.

  21. En Editar botón, cambie la etiqueta del botón a Send a Message.

  22. 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.

    Captura de pantalla con la sección actualizada en el estudio de diseño de Power Pages

  23. 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.

    Captura de pantalla con la opción de eliminación en el estudio de diseño de Power Pages

  24. 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.

  25. Con el Espaciador seleccionado, elija Editar fondo en la barra de herramientas emergente y seleccione uno de los colores de la marca.

    Captura de pantalla con la selección de color del fondo del espaciador en el estudio de diseño de Power Pages

  26. 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.

  27. 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.

    Captura de pantalla con la sección de testimonios generada por Copilot en el estudio de diseño de Power Pages

  28. Seleccione la sección y, luego, Diseño en la barra de herramientas emergente. Luego, seleccione el diseño 3 columnas.

    Captura de pantalla con la selección de diseño en el estudio de diseño de Power Pages

  29. En la nueva sección, bajo Agregar un componente, seleccione Más (puntos suspensivos) e Imagen.

  30. En Agregar una imagen, seleccione Imágenes de archivo>Iconos. Busque people y seleccione una imagen que le guste.

    Seleccione Insertar.

    Captura de pantalla con la selección de imágenes de archivo en el estudio de diseño de Power Pages y con el botón Insertar resaltado

  31. Con la imagen seleccionada, establezca las siguientes propiedades en la barra de herramientas:

    • Alinear: Alinear al centro
    • Diseñar > Diseño > Ancho: 60 %
  32. 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.

  33. 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.

  34. Cambie el texto con un nombre de cliente de su elección.

    Captura de pantalla de la sección de testimonios, con texto generado en el estudio de diseño de Power Pages

  35. 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.

  36. Cambiar el color de los nombres de los clientes para que coincidan con los colores del sitio.

    Captura de pantalla con la opción de cambio de color en el estudio de diseño de Power Pages

Generar un tema de color para el sitio web

  1. 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.

  2. Se generará un tema de color automáticamente.

    Captura de pantalla con el tema de color generado por Copilot en el estudio de diseño de Power Pages

  3. 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.

  4. 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.

    Captura de pantalla con las opciones de estilo del encabezado del sitio en el estudio de diseño de Power Pages

  5. 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.

    Captura de pantalla con la primera parte de la página principal final

    Captura de pantalla con la segunda parte de la página principal final

    Captura de pantalla con la tercera parte de la página principal final

Vista previa del sitio web

  1. En la esquina superior derecha del estudio de diseño, seleccione Vista previa.

    Captura de pantalla con la opción de vista previa en el estudio de diseño de Power Pages

  2. Seleccione Escritorio para obtener una vista previa del sitio en una pantalla de escritorio.

  3. Inicie sesión con su cuenta Microsoft si se le solicita y acepte los permisos solicitados.

  4. 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.