Cómo diseñar una tabla web compleja

 

 

 

  • SmashingConf Freiburg 2024

  • Índice
    1. 1. Sistematizar las necesidades
      1. En una palabra
    2. 2. Vuélvete atómico
      1. Fuentes, colores, iconos
      2. Celdas y accesorios
      3. Filas y encabezados
      4. columnas
      5. Barra superior
      6. Mesa entera
      7. En una palabra
    3. 3. Definir interacción
      1. Datos numéricos
      2. Validación de entrada
      3. Comandos
      4. Contenedor y capacidad de respuesta
      5. Accesibilidad
      6. En una palabra
    4. Conclusión
      1. Otras lecturas

    Las tablas aparecen con frecuencia en la web, pero no son fáciles de diseñar y codificar. Esta guía ilustrada explica la anatomía de la mesa y cómo construir una mesa, teniendo en cuenta su futura elaboración.

     

    Imagine que diseña un sistema para investigadores de datos. O una aplicación para la gestión energética. O un tablero para los comerciantes de maíz. Quizás estés diseñando algo así ahora mismo. En todos los casos mencionados, la gente esperará mesas. No esos elegantes de los sitios de inspiración de diseño, sino monstruos con apariencia de Excel con cientos de celdas e interacción compleja.

    En este caso, un diseñador enfrenta muchos desafíos. Por ejemplo, hacer coincidir el diseño con los marcos frontend existentes o luchar con datos "incómodos" que destruyen el diseño. Superaremos estos problemas mediante los siguientes pasos: sistematizar las necesidades, volvernos atómicos y definir la interacción.

     

    Expectativa versus realidad ( vista previa grande )

    1. Sistematizar las necesidades

    Entonces, entrevistó al público objetivo y descubrió sus necesidades y deseos. Ahora es el momento de reunir los hallazgos y transformarlos en una estructura de interfaz. Por ejemplo, un usuario dijo: "Necesito ver cómo mis datos afectan otras partes de la aplicación". O mientras observaba a otra persona trabajar con software antiguo, notó que usa atajos y no toca el mouse en absoluto. ¿Qué significa?

    Las palabras del primer usuario son sobre validación de entradas y sugerencias. Deberá considerar adjuntar información de alerta o ayuda a una tabla. O desarrolle un sistema de colores significativos. Depende del dominio y del modelo mental. La observación del trabajo del segundo usuario puede ser una señal de que es necesario diseñar todas las acciones accesibles mediante el teclado. Y probablemente necesitarás pensar en atajos más profundos que simplemente “ Cmd+ C” y “ Cmd+ V”.

    A continuación se muestran algunos pares de observación-suposición.

    • " Necesito operar fácilmente docenas de elementos a la vez ".
      ¿Permitir la selección múltiple de celdas? ¿Agregar casillas de verificación para seleccionar muchas filas?
    • " Ahora hacemos todos los cálculos de esta manera ". [ Muestra Microsoft Excel ]
      ¿Es Excel efectivo para este propósito? ¿Qué características podemos tomar prestadas?
    • "¿ Podemos saber de alguna manera de antemano si este nombre ya está en el servidor ?"
      ¿Validación de datos sobre la marcha? ¿Mensajes de error o autocorrección?
    • Normalmente ingreso esta información. Es bastante genérico. “¿
      Sugerir valores predeterminados, valores predeterminados o plantillas?

    Como resultado, tendrá una lista de las necesidades y deseos de las personas. Las preguntas abiertas son útiles para descubrir necesidades reales y filtrar caprichos:

    “¿Qué te ayuda a trabajar más rápido? ¿Qué puede facilitar tu elección? ¿Cómo afecta esta característica a la eficiencia de su trabajo? ¿Qué cambiará si no eres capaz de hacer X?

    ¿Qué es lo siguiente? Ahora es el momento de construir un esqueleto lógico para tu mesa. Un esquema de lo que contiene y es capaz de hacer. Si pasas directamente al wireframe o a la creación de prototipos, te adentrarás en el malvado camino de volver a dibujar y luchar sin cesar con el legado.

     

    A continuación se muestra un ejemplo de con qué podría comenzar. Es el árbol de características. Y el componente básico de cualquier tabla es una celda. Las celdas se unen en filas y columnas, que pueden tener características específicas diferentes a las de celdas separadas. Y por último pasamos a complementos tan importantes de una tabla como una barra superior con botones, comandos de teclado y manejo de errores.

    ( Vista previa grande )

    El árbol de funciones le evita hacer trabajo extra y le ayuda a centrarse en lo importante. Un árbol de funciones bien organizado también resulta útil para el equipo de desarrollo. Pueden combinar las funciones planificadas con las bibliotecas de interfaz disponibles y encontrar la mejor manera de convertir diseños en código.

    En uno de mis proyectos, utilizamos el marco Angular Material. Desafortunadamente, las tablas angulares eran demasiado simples. Encontramos una biblioteca ag-Grid que admitía nuestra funcionalidad pero tenía una limitación. No tenía la capacidad de expandir una fila y colocar filas secundarias dentro. Habíamos revelado este problema antes de poner algún esfuerzo en ello y ajustar el diseño.

    En una palabra

    • Comience a construir una tabla compleja recopilando y priorizando las necesidades de los usuarios. Considere una solución que no sea una tabla, por ejemplo, un gráfico.
    • Dibuje un diagrama de árbol que sistematice todas las características necesarias. Úselo como un plan para producir imágenes.

    Lectura recomendada : Patrones de diseño de mesas en la Web por Chen Hui Jing

    2. Vuélvete atómico

    Entonces, las necesidades y la funcionalidad están definidas y conoces las limitaciones técnicas. Es hora de hacer una maqueta de tu mesa. Básicamente, el enfoque atómico consiste en diseñar primero componentes de interfaz de usuario pequeños y luego ensamblar otros más grandes. Gradualmente pasaremos de partículas elementales como fuentes y colores a módulos tan grandes como un encabezado o una columna. Elegí deliberadamente el estilo brutalista estricto para las maquetas para que podamos concentrarnos en la función, no en la apariencia.

    Fuentes, colores, iconos

    Estas partes ya pueden estar definidas por el sistema de diseño o el marco de interfaz de usuario que utilice. Si crea una tabla para un producto existente, verifique si su paleta de colores, fuentes e íconos satisfacen las necesidades de la tabla. En la imagen de abajo, mostré algunos de los tonos de gris necesarios para los marcos de las tablas, las líneas, los rellenos y el texto. Los tintes rojo y azul representan cosas seleccionadas activas y destructivas de advertencia-error. Los estilos de texto sirven para distinguir entre información primaria y secundaria, títulos y cuerpo del texto.

    ( Vista previa grande )

    Celdas y accesorios

    Cuando los átomos de la tabla estén listos, podemos proceder con las moléculas: diferentes tipos de células. En primer lugar, es importante pensar de antemano en los estados normal, estacionario y activo de cada elemento. Luego haga clic, deshabilite y otros estados.

    En uno de mis proyectos teníamos ocho tipos de células con su propia interacción. Los más simples son las celdas de texto y numéricas. En nuestro caso, se permitió completar celdas numéricas con contenido no numérico, como "N/A" (no aplicado) y "N/C" (sin control). Era la peculiaridad del dominio. Los menús desplegables y los selectores de fechas son más complejos y tienen elementos secundarios. Finalmente, teníamos celdas de tabla que representaban comandos en fila.

     

    ( Vista previa grande )

    Las celdas pueden tener accesorios como información sobre herramientas, sugerencias de entrada, mensajes de error, marcadores de posición, etc. En esta etapa, son estáticas, pero un diseñador debe especificar más adelante la lógica de cómo aparecen (animación, retraso, etc.).

    ( Vista previa grande )

    Filas y encabezados

    Cuando se diseñan las celdas, puedes hacer filas y ver si varias combinaciones funcionan bien juntas. Una vez diseñé una tabla que tenía una lógica de edición compleja. Algunas de las propiedades fueron proporcionadas por los usuarios, mientras que otras se calcularon automáticamente o se completaron con valores predeterminados. A continuación se muestra una combinación de celdas editables y de solo lectura dentro de una fila.

    ( Vista previa grande )

    Tenga en cuenta que el cursor es diferente cuando se sitúa sobre celdas editables y de solo lectura. Al hacer clic en ellos, se activa la selección de una fila o se accede al modo de edición de la celda editable.

    En la siguiente imagen, puedes ver que las personas pueden seleccionar una o varias filas:

    ( Vista previa grande )

    Ahora es el momento de pensar en el encabezado de la tabla. Según mi experiencia, a menudo es imposible controlar la longitud del título de la columna y ceñirse a una sola línea. Incluso con un buen escritor en el equipo, no todos los textos serán breves. Algunas de las tablas requieren localización o títulos técnicos largos. Las frases, que en inglés eran de una sola línea, podían convertirse en dos o tres líneas en griego, alemán o húngaro. Por eso, mostré diferentes variantes:

    ( Vista previa grande )

    Los usuarios de software basado en datos a menudo necesitan clasificar y filtrar. Les ayuda a encontrar información valiosa en grandes cantidades de datos. El desafío de ordenar y filtrar es combinar controles de clasificación y cuadros de filtrado con otros elementos de encabezado: títulos de columnas, unidades de medida, etc.

    ( Vista previa grande )

    A diferencia de las celdas de las tablas, los cuadros de filtro suelen tener un icono de "restablecer" a la derecha para que los usuarios puedan desactivarlos explícitamente y ver contenido sin filtrar.

    ( Vista previa grande )

    En mi ejemplo, hay tres tipos de cuadros de filtro. El filtro alfanumérico permite buscar por letras y números. Admite comodines: número desconocido de caracteres desconocidos. Por ejemplo, si escribo 45*A1, es posible que se muestren filas con valores como 45A1, y .45982A1B45A109B096445-A1

    Los comodines son una característica complicada ya que dependen de los hábitos de las personas. Cuando diseñé tablas para especialistas técnicos, asignamos el signo de asterisco (*) al número desconocido de símbolos desconocidos. Para los analistas de seguros, elegí el símbolo SQL tradicional (el signo de porcentaje (%)) porque estaban acostumbrados. En cuanto al filtro desplegable, cambia entre una cierta cantidad de opciones de texto, números o rangos numéricos mutuamente excluyentes.

     

    ( Vista previa grande )

    El filtro selector de fecha tiene un calendario y funciona como su equivalente celular. Es bueno permitir a los usuarios ingresar la fecha manualmente y elegirla en el calendario. Si saben lo que están buscando, será mucho más fácil escribir que hacer clic.

    Una cosa más importante es formatear automáticamente cualquier entrada significativa y no molestar a las personas con errores de "formato no válido". En uno de mis proyectos, permitimos ingresar fechas como 01/25/2017, 6.12.17y September 4 2016, y también filtrar solo por mes o año.

    ( Vista previa grande )

    columnas

    Una de las características frecuentes de las tablas complejas son las columnas fijadas. Por lo general, las columnas que contienen información clave, por ejemplo, nombres o estados de elementos, no se pueden desplazar.

    ( Vista previa grande )

    Aunque las columnas de la tabla deberían ajustarse inteligentemente al tamaño del contenido, esto sucede cuando el texto se trunca. En este caso, cambiar el tamaño de la columna resulta útil. Los usuarios pueden arrastrar el borde de la columna y ver contenido extenso. Es posible que también necesiten comprimir una columna sin importancia o una que tenga un texto breve.

    ( Vista previa grande )

    Otra forma de manejar cadenas de texto largas es estirar una columna por el contenido más largo o ajustarla y colocarla en varias líneas. El primer enfoque funciona mejor para cadenas de texto más o menos similares. El segundo funciona mejor si ver el contenido completo es más importante para las personas que mantener la mesa verticalmente compacta.

    ( Vista previa grande )

    En uno de mis proyectos, definimos los anchos mínimos de las columnas para evitar que las tablas cambien de tamaño de manera poco elegante. Desactivamos la compresión de columnas detrás de un cierto ancho según el tipo de contenido. Salarios y Sueldos medios 2023

    Barra superior

    ¿Qué constituye una mesa? Celdas, columnas, filas. Además, las mesas complejas suelen tener una barra superior. Al igual que el resto de los componentes, la barra superior está formada por elementos más pequeños: un título y comandos.

    A continuación, recopilé la lista de comandos con toda la variedad de estados, que usamos en uno de los productos. Teníamos comandos de iconos para metáforas obvias como plus = add / create,, trash bin = remove. arrow = moveLos comandos no genéricos (p. ej., asignar, archivar, equilibrar) necesitaban una denominación textual explícita. Además, algunos de los comandos iban acompañados de un menú desplegable.

    ( Vista previa grande )

    Ahora podemos intentar combinar diferentes elementos y ver si funciona. Aquí hay unos ejemplos.

    ( Vista previa grande )

    Por supuesto, esta no es la lista definitiva de características y elementos. Difiere de un proyecto a otro y puede incluir otras cosas, por ejemplo:

     

    • Ordenar por más de una columna;
    • Conjunto de columnas personalizable (posibilidad de alternarlas);
    • Filas expandibles (una fila principal puede tener filas secundarias);
    • Operadores lógicos para filtrado y búsqueda (“y”, “o”, “otro”, etc.).

    Si duda qué características diseñar y cuáles no, aquí tiene un buen principio. Es la navaja de Occam o la ley de la parsimonia. Un diseñador no debería crear nuevas instancias si las existentes satisfacen las necesidades. Deberías “eliminar” las funciones geek, que en teoría los usuarios podrían necesitar en un futuro indefinido. Lo mismo ocurre con las características que idealmente se ajustan a una de cien situaciones pero que son inútiles en los noventa y nueve casos restantes.

    Mesa entera

    Cuando todos los bloques de construcción estén listos, puede montar un par de mesas para diversos fines. Esta es una oportunidad para detectar inconsistencias. Con mayor frecuencia traté con los siguientes tres tipos.

    Tabla de solo lectura

    El tipo de tabla más simple de crear, ya que solo muestra datos tal como están. No hay opciones de filtrado o edición. La clasificación o la jerarquía de filas pueden ayudar a analizar grandes cantidades de datos. Esta tabla se utiliza para mostrar datos e informar a las personas sobre algo.

    ( Vista previa grande )

    Tabla de búsqueda

    Las celdas no son editables, el encabezado tiene cuadros de filtro y controles de clasificación, es posible seleccionar filas. Según mi práctica, estas tablas ayudan a encontrar, comparar y seleccionar uno o varios elementos de un amplio rango. Por ejemplo, filtre cinco de seis mil herramientas irrelevantes de un catálogo y luego elija la herramienta necesaria.

    ( Vista previa grande )

    Tabla editable

    Todas o algunas celdas son editables. Normalmente, no hay filtrado porque el orden de las filas puede personalizarse. Estas tablas suelen ir acompañadas de una barra de herramientas y permiten realizar acciones con filas.

    ( Vista previa grande )

    En una palabra

    • Comience con los componentes más pequeños y luego avance gradualmente hacia los más grandes. Finalmente, simula todo.
    • Piense de antemano en todos los estados posibles para cada componente.
    • Utilice el principio de la navaja de Occam para mantener el número de elementos mínimo pero suficiente.

    Lectura recomendada : Sistemas de diseño de Alla Kholmatova

    3. Definir interacción

    Los bloques de construcción no son suficientes para una pieza de interfaz tan compleja como una mesa. Un diseñador debe pensar en “las reglas del juego” y diseñar principios y convenciones lógicas detrás de la parte visual. Describiré algunas cosas típicas que deberás considerar.

    Datos numéricos

    ¿Cuántos decimales deben tener los números en tu tabla? ¿Uno, dos, cinco? ¿Cuál es el nivel de precisión óptimo? Decido en función de la precisión que los usuarios necesitan para tomar la decisión correcta. En algunas profesiones, la fluctuación entre 10932.01y 10932.23importa, mientras que en otras áreas los números 14y 15realmente no marcan la diferencia.

     

    Este es un ejemplo de reglas de datos numéricos que mi equipo utilizó en un producto de ingeniería sofisticado.

    • Longitud
      Dos decimales (57,53 m, 3,16 km); Se utilizan espacios como mil separadores (403 456,56 m).
    • Peso
      Dos decimales (225,08 kg, 108,75 t); Se utilizan espacios como mil separadores (12 032,17 kg).
    • Dinero
      Dos decimales ($9,45); las comas se utilizan como separadores de miles ($16.408.989,00).
    • Diámetro
      Tres decimales (10,375 cm); no se necesitan separadores.
    • Latitud y longitud
      Ocho decimales (26,4321121); signo menos utilizado para la longitud occidental y la longitud sur (-78.05640132).
    • Predeterminado
      Para unidades no mencionadas anteriormente: dos decimales (32,05 g/m³, 86,13 C°).

    Una cosa más que consideramos fue la diferencia entre los datos "reales" guardados en los servidores y los datos "aproximados" en la interfaz. El sistema utilizaba números extremadamente precisos con docenas de decimales en todos los cálculos, pero la gente no necesitaba verlo todo el tiempo. Entonces decidimos mostrar el número de decimales descrito anteriormente y exponer el número completo solo cuando una celda de la tabla está activa. Por ejemplo, un ingeniero podría ingresar 134432.97662301y al presionar Enter, la tabla mostraría 134 432.98. Después de hacer clic una vez más, el ingeniero volvería a ver 134432.97662301.

    Validación de entrada

    A diferencia del punto anterior sobre números, la validación es importante sólo para tablas editables. Tiene dos aspectos. En primer lugar, las reglas que califican los datos ingresados ​​como válidos o no válidos. En segundo lugar, ya sea los mensajes que ayudan a corregir datos no válidos o los mecanismos que los solucionan automáticamente. Normalmente, las reglas de validación son demasiado complejas para reflejarlas en maquetas o prototipos. Así, los diseñadores pueden documentarlos textualmente o en formato de diagramas de flujo.

    Este es un ejemplo de plantillas de mensajes que usé una vez. El texto entre paréntesis angulares es dinámico y proviene del motor de cálculo o de la base de datos.

    • Debería ser mayor que number measurement unit. Optional explanation.
    • Debería ser menor que number measurement unit. Optional explanation.
    • Debería estar entre number 1y number 2 measurement unit. Optional explanation.
    • El valor mínimo debe ser menor que el valor máximo.
    • El valor máximo debe ser mayor que el valor mínimo.
    • Los valores mínimo y máximo no deben ser iguales.

    Comandos

    Las tablas editables con barras de herramientas generalmente necesitan un conjunto de reglas cuando los comandos de la barra de herramientas están habilitados y cuando están deshabilitados. Estos estados pueden depender del hecho de que se seleccione una fila, del número de filas seleccionadas, de la posición o el contenido de la fila o filas seleccionadas y de otras condiciones. A continuación se muestra una de las numerosas formas de documentar dichas reglas lógicas.

     

    Entonces, tenemos una tabla con algunos químicos. Tiene comandos como "Agregar una fila", "Subir", "Bajar", Eliminar", "Recalcular" y "Configuración".

    ( Vista previa grande )

    Y aquí está la descripción de los estados de comando. Resulta que su disponibilidad depende de una o varias condiciones.

    ( Vista previa grande )

    El siguiente paso es definir el resultado de cada comando. Por ejemplo, ¿qué sucede cuando selecciono dos filas remotas y hago clic en "Mover hacia arriba"? ¿O cuál es el resultado de hacer clic en “Recalcular”? Todas estas preguntas deberían ser respondidas o al menos consideradas de antemano.

    Contenedor y capacidad de respuesta

    ¿Cómo se colocará la tabla en la interfaz? Por ejemplo, ¿ocupará algo de espacio dentro de un contenedor existente o será un módulo independiente? Las respuestas a estas preguntas dependen totalmente del producto y es mejor prever posibles problemas y definir detalladamente los principios.

    ( Vista previa grande )

    Cuando diseño aplicaciones web, suelo pensar en al menos tres tipos de contenedores para tablas. El caso más típico es cuando una mesa grande está en el centro de una pantalla y ocupa el mayor espacio posible. Es posible que una tabla de este tipo no tenga su propio título, ya que toda la pantalla está dedicada a trabajar con la tabla. Las tablas pequeñas y medianas pueden convertirse en módulos autónomos de un tablero, así como en otros elementos como gráficos, diagramas y esquemas. En este caso, la barra superior de una tabla desempeña el papel de encabezado de la tarjeta. Y, por último, en aplicaciones empresariales de gran tamaño, las tablas suelen existir dentro de cuadros de diálogo emergentes. Deberían existir directrices inteligentes para que los diálogos no exploten debido a demasiado contenido.

    Otro aspecto de colocar una mesa en el entorno de la interfaz de usuario es el área de pantalla disponible. La mayoría de las aplicaciones empresariales están destinadas a utilizarse principalmente en el escritorio. La capacidad de respuesta de la mesa se limita a un simple comportamiento de estiramiento y compresión. Normalmente, las tablas con muchas filas y pocas columnas ocupan el 100% del ancho disponible. Como resultado, las celdas se distribuyen uniformemente en la pantalla y se puede mostrar más texto sin truncar el ajuste. Por otro lado, entre las columnas suelen aparecer enormes espacios, lo que contradice la ley de diseño de proximidad. Es por eso que algunas aplicaciones usan líneas entre las filas o colores de cebra de color blanco y gris para que la información sea mejor legible.

    ( Vista previa grande )

    Una mejor manera es definir anchos predeterminados racionales y permitir el cambio de tamaño manual si es necesario. Para leer una tabla, es mejor tener un espacio vacío a la derecha que espacios entre las columnas.

    Si una tabla contiene muchas filas y columnas, los desplazamientos horizontales y verticales son inevitables.

    La esencia clave de una tabla compleja es ser grande, lo que brinda una vista panorámica de los datos. Desafortunadamente, no puedo nombrar un método realmente bueno para usar tablas grandes en las pantallas de los teléfonos inteligentes. Las hojas de cálculo de Excel y Google pierden su poder en pantallas pequeñas, aunque existen formas efectivas de manejar tablas pequeñas. Por ejemplo, convertir una mesa en un juego de cartas.

     

    ( Vista previa grande )

    Accesibilidad

    Incluso una mesa excepcionalmente lisa y bonita puede convertirse en una pesadilla para los usuarios. Por lo tanto, es muy importante seguir los principios de accesibilidad. Las Pautas de accesibilidad al contenido web (WCAG 2.0) tienen un capítulo sobre tablas. La mayor parte del material trata sobre la codificación adecuada; sin embargo, un diseñador también tiene mucho en qué pensar.

    A continuación se presentan las principales consideraciones de diseño en términos de accesibilidad.

    • Ponle un título y prepara un resumen conciso.
      Un usuario con discapacidad visual debería poder hacerse una idea de una mesa sin procesar por voz todas sus celdas.
    • Cuidado con el tamaño de fuente.
      Aunque no existe un tamaño mínimo oficial para la web, se considera óptimo 16 px (12 pt). Además, un usuario debería poder aumentarlo hasta un 200% sin alterar todo el diseño.
    • Prueba de colores para personas con daltonismo.
      El texto y los controles deben tener suficiente contraste con su fondo. Se requiere una relación de color mínima de 3:1 (cuanto más, mejor). Además, el color no debería ser la única forma de marcar las cosas. Por ejemplo, los mensajes de error no deberían basarse únicamente en texto rojo; un ícono de advertencia brindará pistas adicionales a los usuarios daltónicos.
    • Evite controles pequeños y ambiguos.
      Los componentes en los que se puede hacer clic se consideran táctiles si tienen al menos 40 × 40 px. Los comandos representados por íconos deben estar etiquetados o tener información sobre herramientas y texto alternativo. Los diseñadores no deben abusar de los íconos porque es posible que los usuarios no comprendan correctamente las metáforas complejas.

    También puede utilizar herramientas en línea para comprobar la accesibilidad, por ejemplo, Wave . No solo encuentra problemas y funciones de accesibilidad, sino que también los resalta directamente en una página y explica cómo solucionarlos.

    En una palabra

    • La unificación y el formato del contenido también es trabajo del diseñador.
    • Piense más allá de las "cosas", los elementos de su interfaz y considere casos de uso y patrones frecuentes.
    • Cuando todo lo que hay dentro es consistente y compatible, es hora de pensar en cómo encaja con el resto de la interfaz.

    Conclusión

    Acabamos de recorrer el proceso de construcción de una tabla compleja. Diferentes proyectos requieren diferentes enfoques, pero existe un principio universal. Un diseñador debe hacer que todos los elementos funcionen juntos en cualquier combinación. Por eso es bueno comenzar recopilando las necesidades y haciendo bloques pequeños primero. Y, por supuesto, probar con los usuarios tan pronto como tenga algo realista y en el que se pueda hacer clic.

    Otras lecturas

    • “ Diseño atómico ”, Brad Frost
    • “ Diseñe mejores tablas de datos ”, Andrew Coyle
    • " Refactorización de la interfaz de usuario ", Adam Wathan y Steve Schoger

    (dm, ra, il)Explora más en

    • CSS
    • javascript
    • Patrones de diseño
    • Diseño de respuesta





    Tal vez te puede interesar:

    1. ¿Qué es Redux? Una guía para el diseñador
    2. Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
    3. Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
    4. Componentes de diseño en React

    Cómo diseñar una tabla web compleja

    Cómo diseñar una tabla web compleja

    SmashingConf Freiburg 2024 Índice 1. Sistematizar las necesidades

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-disenar-una-tabla-web-compleja-966-0.jpg

    2024-05-20

     

    Cómo diseñar una tabla web compleja
    Cómo diseñar una tabla web compleja

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20