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? Consulta estas 5 formas increíbles en las que esta nueva función puede facilitar el diseño de tu página: desde comprender los diseños hasta corregir aviones.
1. Cómo comprender los diseños
A la hora de crear sitios web, no siempre empiezas desde cero. Con frecuencia, debes compilar sobre un código existente del que no tienes conocimientos previos y, en el peor de los casos, tampoco tiene nadie a tu alrededor.
Pregúntale a la IA sobre el diseño de un elemento y comprende por qué se muestra hasta el último nodo y por qué este overflow: hidden; en un elemento está realmente 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 ya es muy 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. Considera la accesibilidad desde el principio del desarrollo, en lugar de una idea de último momento, y procura seguir las Pautas de accesibilidad para el 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 es a veces cansador cómo se ven las cosas uniformes 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
Te explicamos los problemas de diseño, los ayudas a corregirlos, las sugerencias sobre la accesibilidad y los cambios en los diseños existentes. Ya hay muchas opciones con las que la asistencia de IA puede ayudarte, y hay mucho 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.