1. Antes de comenzar
En este codelab, se muestra cómo usar Gemini Code Assist para implementar Material Design en un sitio web. Una vez que se implemente Material Design, iterarás el diseño y harás cambios para mejorar la experiencia del usuario y agregar funcionalidad. Al final de este taller, podrás usar Gemini para crear páginas web utilizables y fáciles de usar con Material Design o una biblioteca similar sin necesidad de escribir CSS.
Requisitos previos
- Conocimientos de HTML, CSS y JavaScript
- Conocimientos básicos sobre diseño web
Qué aprenderá
- Cómo implementar bibliotecas de diseño con Gemini Code Assist
- Cómo iterar en un diseño con Gemini Code Assist en lugar de ajustar CSS de forma manual
- Cómo indicarle de manera eficaz a Gemini Code Assist que aporte código con el estilo que quieras
Requisitos
- Acceso a un proyecto de Google Cloud con Gemini para Google Cloud habilitado
- Una página web para diseñar, o al menos una carpeta en la que se pueda crear una
2. Configuración
Para este codelab, necesitamos acceder a un proyecto de Google Cloud con Gemini habilitado y una página web a la que podamos aplicarle estilos. Para habilitar Gemini en un proyecto nuevo, haz clic en el botón de Gemini que está en la esquina superior derecha de la consola de Cloud y, luego, en Habilitar, en el panel que aparece a continuación.
En cuanto a la página web en la que se agregará diseño, puedes usar cualquier página que tengas a mano. Como Gemini está habilitado, puedes pedirle que genere uno por ti. Si le indicas a Gemini una solicitud como Write me a web page with a form to gather profile information, el resultado debería ser similar al siguiente:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
3. Cómo implementar Material
Para comenzar, pídele a Gemini que implemente Material Design en nuestra página web con una instrucción como la siguiente:Can you apply material design styles to this page?
NOTA: Todas las instrucciones que se proporcionan en este codelab son ejemplos. Siéntete libre de usarlas como inspiración para tus propias citas e incluye el contexto de tu proyecto para obtener mejores resultados.
La respuesta debería ser similar a la siguiente:
Material Design se usa para este lab, pero puedes pedirle a Gemini que implemente la biblioteca que elijas. Si Gemini importa una versión de Material diferente a la que esperabas, intenta proporcionar la versión deseada en tu instrucción.
4. Cómo iterar el diseño
Gemini también puede trabajar contigo para iterar en el diseño de una página web sin necesidad de profundizar en CSS manualmente. Crea tu propia instrucción para pedirle a Gemini que repita este diseño. Para obtener los mejores resultados en tareas como esta, enfócate en describir los elementos que te interesa cambiar y el resultado deseado de la manera más concisa posible:
Can we center the content on this page?
También puedes hacer que Gemini agregue elementos funcionales a nuestra página. Pídele a Gemini que agregue más campos al formulario o funciones adicionales:
Can we add some more fields to this form, like phone number, email address?
5. Organización
También puedes hacer que Gemini organice sus resultados en el lugar que sea más útil para nuestro proyecto. En este caso, dado que el enfoque se centra en la iteración del diseño de este archivo, la etiqueta style es ideal. Pídele a Gemini que contenga sus respuestas en una etiqueta de estilo para evitar tener que aplicar los cambios a varios de ellos sobre la marcha:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Accesibilidad
Como se indica en Material Design, la accesibilidad y la usabilidad son elementos esenciales del diseño. Con eso en mente, pídele a Gemini que se asegure de que nuestras entradas usen los tipos correctos. Esto garantizará que las herramientas de accesibilidad, como los lectores de pantalla, los recopilen correctamente.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Conclusión
¡Felicitaciones por completar este codelab! Aprendiste a usar Gemini para implementar Material Design en una página web. También aprendiste a iterar el diseño y organizar el código generado. Esta nueva habilidad te permitirá crear páginas web prácticas y fáciles de usar con Material Design o bibliotecas similares con una configuración mínima.