Ubuntu

Resumen del equipo de diseño y web – 1 de marzo de 2021

Resumen del equipo de diseño y web - 27 de enero de 2021

El equipo web de Canonical realiza iteraciones de dos semanas para crear y mantener todos los sitios web y las interfaces web de productos de Canonical. Estos son algunos de los aspectos más destacados de nuestro trabajo completo de esta iteración.

Escuadrón web

Web Squad desarrolla y mantiene la mayor parte de Sitios de Canonical como ubuntu.com, canonical.com y más.

En esta iteración, el equipo web agregó algunas características nuevas a nuestro creador de banners sociales, brindando una gama más amplia de banners publicitarios utilizados por marketing. Incluyendo agregar la funcionalidad para elegir el logotipo y mejorar el nombre del archivo de descarga.

Si está buscando una herramienta para hacer metaimágenes, banners de redes sociales, visita nuestro proyecto tools.demo.haus.

Nueva página de instalación de Ceph

Lanzamos una nueva página con instrucciones sobre cómo instalar Ceph en Ubuntu.

Visite la página de instalación de Ceph

Marca

El equipo de la marca desarrolla nuestra estrategia de diseño y crea la apariencia de la empresa a través de muchos puntos de contacto, desde la web, documentos, exposiciones, logotipos y videos.

Diseño de la oficina de Bratislava

Finalizando el diseño y las opciones de color para la nueva oficina en Bratislava.

Banners de Ubuntu Pro

Creamos algunos banners de carrusel para ejecutar en Microsoft.com para promover Ubuntu Pro que se ejecuta en Microsoft.

Cartas de batalla de Dell

Después de terminar la presentación de las tarjetas de batalla para el equipo de ventas, se nos pidió que las tradujáramos en una infografía de una y dos páginas.

Animación Finserv

Trabajando con el equipo de ventas, trabajamos en un guión gráfico para una próxima animación para contar la historia de Ubuntu y Canonical en la vertical de servicios financieros.

Marcas maestras

También continuamos nuestro trabajo de jerarquía de marca explorando nuestras dos marcas maestras y cómo viven y trabajan juntas en todas las formas de negocios y ejecuciones de medios.

MAAS

Se desarrolla la escuadra MAAS la interfaz de usuario Para el Proyecto MAAS.

Resolver la escalabilidad visual en MAAS como característica de inquilinos LXD

Al concluir el diseño final de nuestro panel de control del proyecto LXD, nos hemos estado preguntando si esta es la mejor manera de escalar este diseño gráfico. Durante la fase de descubrimiento, descubrimos que nuestros usuarios miraban la información de la tabla y realizaban asociaciones con el gráfico para componer sus máquinas virtuales y asignar sus recursos correctamente en función de estos datos. El problema con la presentación anterior del gráfico de almacenamiento es que muestra los datos agregados, lo que no sirve para que nadie tome una buena decisión con respecto a sus recursos. Entonces, en la fase anterior del prototipo, intentamos colocar estos grupos de almacenamiento en cubos de diferentes colores y expandir estas secciones de color en una tarjeta.

Sin embargo, después de que intentamos escalar esta vista un poco más, esta vista solo puede escalar hasta 8 grupos de almacenamiento, como máximo. Así que revisamos algunos otros casos de uso práctico que pudimos encontrar en nuestra exploración de LXD. Uno de los casos extremos que descubrimos tenía un total de 32 grupos de almacenamiento. A partir de aquí, aleatorizar 32 colores diferentes y escalar esta información para 32 grupos de almacenamiento diferentes parece un poco contradictorio. Entonces, la pregunta es: ¿el color es el mejor elemento para representar esta información? ¿Hay alguna forma diferente en la que podamos hacer que este espacio sea útil? ¿Y si no es un gráfico?

Después de algunas sesiones de ideación, a uno de nuestros colegas se le ocurrió una solución brillante que no se basa en los colores como factor principal. En el ejemplo anterior, cuando hay menos de 3 grupos de almacenamiento, un gráfico de barras normal sería la vista predeterminada. Cuando hay más de 3 pero menos de 18, el contenido se mostrará como un bloque rectangular con suficientes sugerencias para desplazarse sobre el componente para ampliar la información. Y cuando crezca más allá de los 18 grupos, reduciremos el tamaño del artículo pero aún resaltaremos la información importante.

Esta no es la versión final definitiva. Todavía estamos pensando en cómo hacer esto mejor y más consistente con nuestros diseños actuales. Si tiene más casos extremos que le gustaría compartir, sus comentarios son más que bienvenidos.

JAAS

El equipo JAAS desarrolla el Panel de control JAAS Para el Proyecto Juju.

Reestructura de navegación JAAS

Después de una iteración de recopilación de comentarios de los usuarios, reestructuramos nuestro mapa del sitio del tablero para mostrar información de modelos, aplicaciones, máquinas y unidades, también para incluir nuevas funciones interactivas en nuestro alcance futuro.

Decidimos buscar migas de pan, reflejando la ubicación actual en la estructura jerárquica del sitio (trabajando junto con la navegación global a nivel de modelo), como nuestro elemento de navegación para apoyar la búsqueda de caminos de los usuarios de JAAS.

Disposición del panel

En el lado del desarrollo, pasamos gran parte de esta iteración refactorizando y moviendo los muebles de diseño para apoyar la reestructuración de navegación mencionada anteriormente. Ahora estamos usando Vanilla Panels en lugar de nuestro propio componente personalizado y hemos rediseñado el Tablero de Juju para admitir páginas de entidades individuales.

Vainilla

El equipo de Vanilla diseña y mantiene el sistema de diseño y Biblioteca de Vanilla Framework. Garantizan un estilo coherente en todos los activos web.

Ejemplos incrustados en documentos de Vanilla

Hace más de un año comenzamos a usar CodePen para incrustar ejemplos en la documentación de Vanilla. Si bien CodePen es una herramienta muy útil, el gran volumen de incrustaciones en una página determinada significaba que los tiempos de carga para cada ejemplo podrían ser excesivos. Con nuestra próxima versión, reemplazaremos las incrustaciones de CodePen en los documentos de Vanilla con el patrón de fragmentos de código que presentamos recientemente.

Al usar fragmentos de código en su lugar, pudimos reducir esos tiempos de carga de manera significativa y aumentar el rendimiento de la página. Queríamos poder mantener los beneficios que proporciona CodePen, por lo que también replicamos el enlace «Editar en CodePen» que tenían los incrustados anteriormente y los agregamos a cada fragmento de código.

Mejoras de accesibilidad

A raíz de nuestra reciente auditoría de accesibilidad, en esta iteración realizamos tres pequeñas mejoras y recomendaciones a los botones para mejorar su accesibilidad:

  • Si un botón abre un cuadro de diálogo, como un modal, ahora recomendamos que el texto de la etiqueta del botón vaya seguido de un carácter de puntos suspensivos (& hellip;). Este es una convención común, utilizado para indicar al usuario que al hacer clic en el botón se iniciará inmediatamente algo que requiere su entrada de alguna manera.
  • Cuando un botón inicia un cuadro de diálogo, el foco debe colocarse mediante programación en el elemento iniciado, para ayudar en la navegación con el teclado cuando se tabula entre elementos.
  • También agregamos estilo a los elementos del botón para el atributo «aria-pressed». Hay algunos contextos en los que, incluso después de que un botón haya recibido la entrada del usuario, ya sea mediante un evento del mouse o del teclado, queremos mostrar que el botón todavía se está utilizando en algún nivel. Un ejemplo de esto es un botón que se utiliza como palanca para menú contextual. Cuando el menú está visible, establecemos programáticamente el atributo «aria-pressed», y el botón indica claramente que todavía se está activando.

Diseño de notificaciones

Hemos estado trabajando en un sistema de notificación modular. La imagen a continuación proporciona un adelanto de cómo se verán las nuevas notificaciones.

Snapcraft y Charmhub

El equipo de Snapcraft trabaja en estrecha colaboración con el equipo de la tienda para desarrollar y mantener el Sitio de Snap Store y el próximo sitio Charmhub.

SSO sincero para proveedores de identidad

Sincero es un servicio de proveedor de identidad. Actualizamos las vistas para admitir varios proveedores. Nosotros usamos el patrón de validación de vainilla y rediseñó los botones del proveedor de identidad y agregó iconos.

Snapcraft

Páginas de administración de la tienda de marca

Finalizó la sección de administración de invitaciones y movió el formulario de invitación a miembros de la página de administración de miembros a la página de invitaciones.

Charmhub

Encantos destacados de la API

Anteriormente, los accesos destacados en la página de inicio estaban codificados, lo que provocaba un intercambio entre el equipo web y la gestión de productos. Pero ahora obtenemos la lista de encantamientos destacados directamente desde la API. Revisar la lista de encantamientos destacados en charmhub.

Nuevas páginas de desarrolladores

Estamos agregando nuevas páginas para desarrolladores: la lista y la página de publicidad. La página de listado permitirá a un desarrollador actualizar algunos metadatos de visibilidad como resumen, URL y otros. La página de publicidad ayudará a un editor a compartir su encanto con las insignias o botones de GitHub para integrarse directamente en su sitio web.

Publicaciones del equipo:

  • Apoyando «No me importan las cookies»
  • Conceptos básicos de las expresiones regulares
  • Mejorando la experiencia del código en Vanilla
  • Código abierto, trabajo en equipo y salud mental: mi FOSDEM 2021
  • Agrega documentos a tu página de accesos directos
  • Crea un nuevo encanto para probar

Con ♥ del equipo web de Canonical.

Leave a Comment

You may also like