FANDOM


Existen muchas prácticas comunes de wikitexto diferentes que, si bien son útiles para los usuarios de alto nivel sobre el escritorio, por desgracia interfieren con cómo se muestra su contenido en plataformas móviles. Las tablas enredadas son un buen ejemplo.

Recordatorio sobre Mejores Prácticas Móviles: Siempre se puede obtener una vista previa de como se verán las ediciones en un dispositivo móvil mediante la adición de ?useskin=wikiamobile al final de la URL de una wiki, o si estás utilizando editor clásico, al previsualizar tus ediciones, puedes seleccionar 'móvil' en el menú desplegable en la esquina superior izquierda de la pantalla de vista previa.

¿Qué son tablas enredadas?

Las tablas enredadas son simplemente tablas dentro de tablas con tablas (también conocidas como "tablas inception").

Aquí está un ejemplo de tablas enredadas en nuestra comunidad de Brave Frontier. Ten en cuenta la diferencia entre la vista de escritorio limpia y la vista móvil, que es inferior a lo óptimo.
Desk Mob

¿Por qué las tablas enredadas son malas?

Debes evitar el uso de tablas enredadas cuando sea posible. Las tablas, en general, siempre ocupan la anchura más pequeña que pueden e incluso se extienden verticalmente cuando el espacio horizontal es limitado. Sin embargo, si una tabla se coloca dentro de otra tabla, obliga a que la anchura de estas celdas se acomode a la tabla adicional. En esencia, esto obliga a toda la estructura de la tabla a ser mucho más amplia de lo que el espacio permite. Esto es especialmente malo para la visualización móvil, porque el tamaño de la pantalla es mucho más pequeño.

Esto causa una gran cantidad de desplazamiento horizontal en el móvil (una mala experiencia de uso), y gran parte de la tabla queda oculta a la vista. Si divides las tablas enredadas en varias tablas independientes, la información se mostrará en un desplazamiento vertical de la página, en lugar de uno horizontal.

Esto también permite que cada tabla sea más dinámica. El formato del contenido es dictado por el tamaño de la pantalla del móvil. Por lo tanto, el navegador moverá las tablas a donde se puedan visualizar para mejorar el flujo global de desplazamiento de contenidos.

¿Qué hacer si tu comunidad utiliza tablas enredadas?

Animarles a romper las tablas enredadas y tratar de crear una infraestructura que no dependa de tablas dentro de tablas. Sobre todo, apilar tablas una al lado de la otra puede muchas veces producir el mismo resultado. Si el contenido se presenta mejor en un formato de tabla, siempre se pueden ajustar las celdas de tal manera que se asemejen a otra tabla dentro de una tabla, pero sólo será una gran tabla.

Mejores prácticas para evitar tablas enredadas

Cómo identificar tablas enredadas

En el código fuente, las tablas siempre comienzan con el wikitexto {| o HTML <table>. Las tablas son cerradas con código opuesto: |} o </table>. Por lo tanto, si ves el comienzo de una tabla, y antes de llegar a los corchetes de cierre de la tabla, te encuentras con otro principio de otra tabla, esto indica una tabla enredada dentro de otra. Esto podría crear varias capas.

Aquí hay un ejemplo de código fuente de una tabla enredada:
Example code 1024

Cómo romper una tabla enredada

  • El primer paso es identificar cuántas tablas se enredan dentro de la tabla principal.
  • El segundo paso es encontrar la tabla enredada más lejana (o más arraigada), y tirar de ella fuera de la cadena de tablas enredadas.
  • Ahora, haz clic en Previsualización, y obtendrás una idea del aspecto de la tabla.
  • Después de hacer clic en Previsualización, puedes solucionar tablas que no aparecían como se esperaba por la comprobación de los parámetros de la tabla (el código inmediatamente después de la abertura de la tabla: {|)
  • Una vez que hayas retirado todas las tablas internas fuera de la tabla principal, deberías ser capaz de eliminar el código de tabla original. Ahora las tablas deben ser apiladas para su visualización optimizada para móviles.

Cómo preservar la vista en escritorio ahora que las tablas están separadas

Las tablas deben ser apiladas de arriba a abajo o en paralelo. Esto permitirá que su navegador móvil empuje y mueva las tablas para que quepan en el espacio asignado en la pantalla móvil. Si las tablas son paralelas y no encajan dentro de la anchura de la pantalla del móvil, el navegador empujará automáticamente la última tabla abajo.

Sin embargo, uno de los mayores retos a los que te enfrentarás en esta etapa de la colocación de las tablas es encontrar un compromiso entre la forma en que aparecen en el escritorio frente a cómo aparecen en la pantalla del móvil. Esto puede requerir el ajuste de la CSS en línea para controlar cómo se ven las tablas en la pantalla del escritorio. Escribir CSS en su wikitexto tabla sólo afectará a la versión de escritorio, por lo que la versión para móviles aún se mostrará correctamente. Si necesita más ayuda individual con posicionamiento de tabla, consulte la lista de recursos en la parte inferior de la página.

Información más útil acerca de tablas enredadas

Ten en cuenta que si una plantilla se utiliza para mostrar una tabla de varias páginas diferentes, arreglar el problema de la tabla enredada en esa plantilla también arreglará la pantalla móvil para todas las páginas que contienen la plantilla. Esto significa que aplicando esta práctica de optimización sus plantillas podrían tener un gran impacto para su comunidad en general.

Las tablas con imágenes dentro de celdas individuales fuerzan a esas celdas a cumplir con el tamaño de la imagen. Por lo tanto, las imágenes deben ser reducidas a un tamaño adecuado para los móviles, o retirar las celdas de tabla en su totalidad. Si la imagen es muy grande y fuera de la tabla, el navegador móvil será automáticamente bajado al tamaño para que quepa en la pantalla móvil.

Caso de la comunidad de Brave Frontier

La comunidad de Brave Frontier fue lo suficientemente buena para ser nuestros conejillos de indias/co-conspiradores en este esfuerzo por erradicar las tablas enredadas. Hemos sido capaces de encontrar con éxito el equilibrio entre la descomposición de las tablas enredadas para una de sus plantillas más importantes (la de personaje) y al mismo tiempo conservar la apariencia de su vista de escritorio. El resultado es un diseño móvil mejorado para un gran número de artículos sobre su comunidad. Vean ustedes:


Si eres un administrador más técnico y quieres ver exactamente qué cambios se realizaron en el código fuente en Brave Frontier para optimizarlo para la pantalla móvil, puedes ver el código fuente, antes y después de que se realizarán:

Nota: Este código ha sido protegido para evitar cambios no deseados. Si deseas copiar la plantilla para uso propio, por favor copia el código y pégalo en tu propia comunidad o sandbox.

Más información

Contacta con el staff de Fandom

¿Necesitas ayuda convirtiendo tablas enredadas en tu comunidad? Envíanos un correo a Especial:Contactar y no te olvides de añadir Móvil: Tablas enredadas como título.

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.