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 prácticas 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 un diseño con Gemini Code Assist en lugar de ajustar CSS manualmente
- Cómo darle instrucciones efectivas a Gemini Code Assist para que aporte código con el estilo deseado
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, se necesitan dos cosas: acceso a un proyecto de Google Cloud con Gemini habilitado y una página web en la que podamos agregar estilo. Para habilitar Gemini en un proyecto nuevo, haz clic en el botón Gemini ubicado en la esquina superior derecha de la consola de Cloud y haz clic en Habilitar en el panel de abajo.
En cuanto a la página web en la que se agregará diseño, puedes usar cualquier página que tengas a mano. Como alternativa, dado que Gemini ya está habilitado, puedes pedirle que genere una. Si le pides 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:
En este lab, se usa Material Design, pero puedes pedirle a Gemini que implemente la biblioteca que desees. Si Gemini importa una versión de Material diferente a la que esperabas, proporciona la versión deseada en tu instrucción.
4. Cómo iterar el diseño
Gemini también puede trabajar contigo para iterar el diseño de una página web sin necesidad de implementar CSS manualmente. Crea tu propia instrucción para pedirle a Gemini que itere ese 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 le agregue elementos funcionales a la 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 más fácil de usar 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 incluya sus respuestas en una etiqueta de estilo para no tener que aplicar sus cambios a varias de ellas a medida que avanzas:
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, intenta pedirle 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.