Fecha de publicación: 21 de octubre de 2024
La semana pasada, presentamos un panel completamente nuevo en DevTools: la asistencia de IA puede ayudarte a depurar problemas de diseño con Gemini directamente en DevTools.
¿Quieres saber qué puede hacer? Descubre estas 5 formas increíbles en las que esta nueva función puede facilitar el diseño de tu página, desde la comprensión de los diseños hasta la reparación de aviones.
1. Cómo comprender los diseños
Cuando creas sitios web, no siempre empiezas desde cero. A menudo, debes compilar sobre código existente del que no tienes conocimientos previos y, en el peor de los casos, nadie a tu alrededor tampoco los tiene.
Pregúntale a la IA sobre el diseño de un elemento y comprende por qué se muestra de la forma en que lo hace hasta el último nodo, y por qué este overflow: hidden; en un elemento está allí por una razón. 👀
Instrucción para probar
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Programación en pareja
CSS se volvió realmente potente. Con tantas posibilidades, es normal que a veces te confundas: ¿es align-items lo que necesito? ¿O justify-items? ¿O prefieres justify-self o align-content?
A veces, sabes lo que quieres hacer, pero no puedes obtener el conjunto correcto de propiedades CSS. La próxima vez que te encuentres en esta situación, explícale el problema a la IA y deja que te ayude.
La asistencia de IA investigará tu código existente y lo comparará con lo que intentas lograr, y te sugerirá las correcciones necesarias para que las revises, apliques y copies en tu base de código.
3. Asesor de accesibilidad
Es importante que tu sitio web sea accesible y fácil de usar con tecnología de accesibilidad. Ten en cuenta la accesibilidad desde el comienzo del desarrollo, en lugar de dejarla para más adelante, y procura seguir las Pautas de accesibilidad de contenido web (WCAG) durante todo el proceso de desarrollo.
Usa la asistencia de IA para obtener sugerencias sobre dónde se puede reemplazar un <div> por un elemento HTML más semántico, cómo puede ser útil un atributo aria-* adicional o cómo se puede mejorar el contraste de color.
Instrucción para probar
What about color contrast in this element?
4. Personaliza tu dispositivo
Las tendencias van y vienen: hubo gradientes, sombras y bordes fuertes, seguidos del diseño plano, que pasó a la era del diseño actual con colores neón brillantes sobre fondos oscuros.
Pero, ¿no te resulta agotador lo uniforme que pueden ser los elementos en la Web? Si es así, pídele a la asistencia de IA que cambie las cosas y haga que la Web vuelva a ser un poco más divertida, como un viaje en un parque temático.
Instrucción para probar
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Conviértete en mecánico de aeronaves
Explicar problemas de diseño, ayudarte a solucionarlos, brindarte asesoramiento sobre accesibilidad y cambiar los diseños existentes: ya hay muchas tareas en las que la asistencia de IA puede ayudarte, y aún hay más. ¿Puedes creer que la asistencia de IA incluso te ayuda a reparar aviones? No se requiere experiencia previa. Ponte el overol y encárate al Hangar de las Herramientas para desarrolladores de Chrome.
Además, asegúrate de contarnos tu experiencia en nuestro servicio de seguimiento de errores público.