Contenido
- 01. Faro
- 02. Polímero
- 03. Explorador de API
- 04. Aleteo
- 05. Google GitHub
- 06. Titiritero
- 07. Caja de trabajo
- 08. Codelabs
- 09. Herramienta de color
- 10. Diseño de Sprints
- 11. Guía People + AI
- 12. Asistente de Google
- 13. PageSpeed Insights
- 14. AMP en Google
- 15. Google DevTools
- 16. Diseño de materiales
Trabajar en la web generalmente significa que trabajará con Google de alguna forma. Y dado que Google Chrome está muy por delante de la competencia, los diseñadores y desarrolladores deben pensar en cómo funcionará su proyecto con el navegador. ¿Cómo se verá? ¿Qué tecnologías admite, qué tan seguro es y cómo funcionará?
Afortunadamente, Chrome proporciona herramientas para garantizar que cualquier sitio o aplicación funcione de la mejor manera. DevTools permite a los diseñadores y desarrolladores obtener información sobre una página web: puede manipular el DOM, verificar CSS, experimentar con diseños con edición en vivo, depurar JavaScript y verificar el rendimiento. (Obtenga más información sobre cómo utilizar estas herramientas web de Google aquí, y si está empezando desde cero, consulte también nuestra lista de los principales creadores de sitios web).
Pero Google ofrece más que solo el navegador. Tiene herramientas y recursos para ayudar en casi todos los aspectos de su vida de diseño y desarrollo. ¿Quiere saber cómo mejorar el rendimiento? Lighthouse está aquí para ayudar. ¿Quiere crear sitios móviles con mejor rendimiento? Luego saluda a AMP. ¿Está buscando construir hermosas PWA? Entonces, Flutter, Material Design y Workbox están listos para intervenir.
La belleza de utilizar las herramientas, los recursos, las bibliotecas y los marcos de trabajo de Google es que sabes que funcionarán bien con el navegador Chrome, el navegador más popular del planeta. Para obtener más herramientas, consulte nuestro resumen de herramientas de diseño web.
01. Faro
El rendimiento es un factor clave en el éxito de un sitio y Lighthouse es la herramienta de Google para mejorar la calidad de las páginas web (el servicio de alojamiento web adecuado también ayudará). Entonces, ¿cómo se usa Lighthouse y qué puede hacer? En su forma más simple, puede ejecutar Lighthouse desde la pestaña Auditorías y elegir entre una selección de opciones que incluyen escritorio o dispositivo móvil, además de marcar casillas de rendimiento, accesibilidad y SEO, para generar un informe final con mejoras sugeridas.
02. Polímero
Polymer es conocido por su trabajo con componentes web, pero el proyecto ahora ha ampliado su repertorio para abarcar una colección de bibliotecas, herramientas y estándares. ¿Qué está incluido? LitElement es un editor que facilita la definición de componentes web, mientras que lit-html es una biblioteca de plantillas HTML que permite a los usuarios escribir plantillas HTML de próxima generación en JS. Además, también encontrará un kit de inicio de PWA, la biblioteca de polímeros original y conjuntos de componentes web.
03. Explorador de API
Google tiene una amplia biblioteca de API disponibles para los desarrolladores, pero encontrar lo que necesita no es una tarea fácil. Aquí es donde interviene el Explorador de API de Google para ofrecer una mano amiga. Hay una lista larga por la que se puede desplazar pero, para un acceso más rápido, hay un cuadro de búsqueda para filtrar la lista de API. Cada entrada enlaza con una página de referencia con más detalles sobre cómo utilizar la API.
04. Aleteo
Si está buscando crear aplicaciones atractivas para dispositivos móviles, web y de escritorio a partir de una única base de código, Flutter podría ser para usted. El sitio es una referencia completa para trabajar y construir con Flutter. ¿No tienes ni idea de qué hacer? Los documentos llevan al usuario desde la instalación hasta la creación, con la ayuda de muchos ejemplos y tutoriales.
05. Google GitHub
Como la mayoría sabrá, GitHub es la plataforma / repositorio de alojamiento para almacenar y compartir código y archivos. Y felizmente Google tiene su propio lugar en la plataforma con más de 260 repositorios para examinar. Utilice el filtro para reducir el tiempo de búsqueda y acercarse al repositorio con el que desea jugar o contribuir.
06. Titiritero
Puppeteer, integrado en Node, ofrece una API de alto nivel que le permite acceder a Chrome sin cabeza, efectivamente Chrome sin la interfaz de usuario, que los desarrolladores pueden controlar a través de la línea de comandos. Entonces, ¿qué puedes hacer con Puppeteer? Hay algunas opciones disponibles para generar capturas de pantalla y archivos PDF de páginas, automatizar el envío de formularios y crear un entorno de prueba automatizado.
07. Caja de trabajo
Si está buscando construir una PWA, este es un excelente punto de partida. Workbox proporciona una colección de bibliotecas de JavaScript para agregar soporte sin conexión a aplicaciones web. Una selección de guías detalladas demuestra cómo crear y registrar un archivo de trabajador de servicio, enrutar solicitudes, usar complementos y usar paquetes con Workbox. Y también hay un conjunto de estrategias de almacenamiento en caché de ejemplo para consultar.
08. Codelabs
¿Necesita orientación práctica para un producto de Google? Codelabs proporciona "una experiencia de codificación práctica, guiada y tutorial". El sitio está cuidadosamente dividido en categorías y eventos, por lo que es rápido y fácil encontrar lo que busca. Incluye Analytics, Android, Assistant, realidad aumentada, Flutter, G Suite, Search, TensorFlow y realidad virtual. Seleccione una opción y obtenga el código y las instrucciones que necesita para crear aplicaciones pequeñas.
09. Herramienta de color
Color Tool es una herramienta sencilla que le permite crear, compartir y aplicar una paleta además de verificar la accesibilidad. Los usuarios pueden elegir una paleta predefinida de la paleta Material. Simplemente elija un color y luego aplíquelo al esquema de color primario, cambie a la opción secundaria y elija nuevamente. Finalmente, elija colores de texto para ambos esquemas. Alternativamente, cambie a Personalizado para elegir sus colores. Luego cambie a Accesibilidad para verificar que todo esté bien antes, finalmente, exportar la paleta.
10. Diseño de Sprints
El Design Sprint Kit es para aquellos que están aprendiendo a participar o ejecutar sprints de diseño. Busca cubrir todas las bases de conocimiento, desde principiantes hasta facilitadores de sprints experimentados. Aprenda sobre la metodología o salte directamente a la etapa de planificación, incluida la redacción de resúmenes, la recopilación de datos y la investigación, así como qué hacer después del sprint. También incluye una gran cantidad de recursos como herramientas, plantillas, recetas y la opción de enviar su propio método. Además, es probable que necesites un lugar para almacenar y compartir recursos, así que asegúrate de que tu elección de almacenamiento en la nube esté a la altura.
11. Guía People + AI
Esta guía es el trabajo de la iniciativa People + AI Research en Google y busca ofrecer ayuda a aquellos que desean crear productos de inteligencia artificial centrados en el ser humano. La guía completa se divide en seis capítulos que cubren las necesidades de los usuarios, la recopilación y evaluación de datos, los modelos mentales, la confianza, la retroalimentación y los fracasos elegantes. Cada capítulo está acompañado de ejercicios, hojas de trabajo y las herramientas y recursos necesarios para que esto suceda.
12. Asistente de Google
Esta es la plataforma para desarrolladores del Asistente de Google, que ofrece una guía sobre cómo integrar su contenido y servicios con el Asistente de Google. Le muestra cómo extender su aplicación móvil, presentar contenido de manera enriquecida para la Búsqueda y el Asistente, controlar luces, cafeteras y otros dispositivos en el hogar y crear experiencias visuales y de voz para bocinas, pantallas y teléfonos inteligentes.
13. PageSpeed Insights
PageSpeed Insights analiza el contenido web y luego ofrece sugerencias sobre cómo hacer que se cargue más rápido. Simplemente agregue una URL, presione el botón Analizar y espere a que suceda la magia. Consulte los documentos para obtener una mejor idea de cómo funciona la API de PageSpeed y cómo comenzar a usarla.
14. AMP en Google
AMP es la herramienta de Google para crear páginas móviles de carga rápida que (con suerte) llegarán a la cima de los rankings de búsqueda. Obtenga información sobre cómo crear sitios rápidos para el usuario, integrar AMP en todos los productos de Google, utilizar Google AMP Cache para hacer que las páginas AMP sean más rápidas y monetizar las páginas AMP con otros productos de Google.
15. Google DevTools
Todos los diseñadores y desarrolladores saben (o al menos deberían saber) que Chrome viene con un conjunto de herramientas integradas directamente en el navegador. Las DevTools de Chrome son ideales para inspeccionar los elementos que componen una página, verificar CSS, editar páginas sobre la marcha y mucho más.
La pestaña Elementos es la introducción a DevTools. Muestra el código HTML que compone la página seleccionada. Obtenga información sobre las propiedades de cada div o etiqueta de la página seleccionada y comience a editar en vivo. Esto es perfecto para experimentar con diseños. Verifique el diseño, ya sea que esté usando Flexbox o Grid, y eche un vistazo a las fuentes relacionadas con ejemplos y examine las animaciones.
En otros lugares, puede ver y cambiar CSS. La pestaña Estilos en el panel Elementos enumera las reglas CSS que se aplican al elemento seleccionado actualmente en el árbol DOM. Active y desactive las propiedades (o agregue nuevos valores) para experimentar con diseños. Esta es la herramienta perfecta para garantizar que todo funcione como se espera antes de aplicar cualquier cambio al diseño en vivo.
También puede depurar JavaScript, optimizar la velocidad del sitio web e inspeccionar la velocidad de la red. Aquí hay un consejo rápido que puede utilizar para acelerar inmediatamente su flujo de trabajo. Dirígete a la pestaña Fuentes, haz clic en Nuevo fragmento y agrega el código de uso frecuente. Asigne un nombre al fragmento de código y guárdelo. Repita según sea necesario. Ahora puede tomar este fragmento de código en lugar de volver a escribirlo.
Como todo buen navegador, Chrome está en constante evolución y cada nueva versión trae nuevas funciones. Descubra lo que está sucediendo en la plataforma de estado de Chrome
16. Diseño de materiales
El desarrollo puede verse como el hijo predilecto de Google, pero sea lo que sea que esté haciendo, creando o construyendo, debe verse bien y brindarle al usuario una experiencia que lo haga querer usarlo. El material es una adición más reciente al establo de Google, pero es un sistema de diseño que se ha convertido en una pieza vital del kit de diseño.
Como cualquier buen sistema de diseño, tiene su propio conjunto de pautas, que debe tener en cuenta antes de entrar en temas más interesantes. Obtenga una descripción general de cómo usar diferentes elementos, qué es la temática del material, cómo implementar un tema y guías de usabilidad, incluida la accesibilidad. En otra parte, hay una visión de Material Foundation, que incluye las áreas clave del diseño como el diseño, la navegación, el color, la tipografía, el sonido, la iconografía, el movimiento y la interacción. Cada categoría revela lo que se debe y no se debe hacer y dónde debe considerar la precaución. Para dar una idea de qué esperar, la categoría Diseño ofrece secciones sobre cómo comprender el diseño, la densidad de píxeles, cómo trabajar con un diseño receptivo que incluye columnas, medianías y márgenes, puntos de interrupción, regiones de la interfaz de usuario y métodos de espaciado, por nombrar solo algunos.
Más allá de la sección Diseño está Componentes, que proporciona los bloques de construcción físicos necesarios para crear un diseño. ¿Qué se incluye aquí? Botones, pancartas, tarjetas, cuadros de diálogo, divisores, listas, menús, indicadores de progreso, controles deslizantes, barras de bocadillos (estos son mensajes breves sobre los procesos de la aplicación en la parte inferior de la pantalla), pestañas, campos de texto e información sobre herramientas. Sin duda, una colección completa de componentes.
Y los desarrolladores no han sido olvidados, con detalles y tutoriales sobre cómo construir para diferentes plataformas: Android, iOS, Web y Flutter. Y, finalmente, hay una página dedicada a una gran cantidad de recursos para ayudar a que su diseño elegido suceda.
Este artículo apareció originalmente en la revista net. Comprar número 326.
