Mejores prácticas para excelentes aplicaciones

Última revisión o actualización: 23 may. 2025

Construye tus hojas de cálculo para crear aplicaciones web hermosas y rápidas con una gran experiencia de usuario.

Lista de verificación

Aquí están nuestros principales puntos para mejorar. Todos los puntos se desarrollan más adelante:

  1. Divide la interfaz y los cálculos en diferentes pestañas,
  2. Muestra elementos verticalmente,
  3. Señala la entrada con un color de fondo de celda, usa la cantidad mínima de colores,
  4. Evita el color de fondo,
  5. Pega la interfaz de usuario a la izquierda y arriba, no uses columnas o filas vacías,
  6. Limpia tu hoja de cálculo: #REF, #DIV/0, función POTENCIA en lugar de ^
  7. Limitaciones de Appizy: macros, imágenes, tabla dinámica.

Separar interfaz de cálculos

¿Qué se suele hacer?

Desarrollamos la interfaz (donde se configuran las entradas) y los cálculos intermedios lado a lado. Los datos de búsqueda terminan al lado, a unas pocas columnas de la interfaz principal. Cuando llega el momento de mostrar la hoja de cálculo al mundo, los cálculos intermedios se ocultan (columnas o filas). A veces la fuente se establece en blanco sobre fondo blanco.

¿Cómo cambiar este enfoque?

La primera pestaña debe ser la interfaz de usuario final. No se ocultan columnas o filas. Todo está aquí.

Cuanto más ocultes en pestañas secundarias, más rápida será la aplicación.

Mueve todos los cálculos a una segunda pestaña en lugar de en filas o columnas ocultas. Cuando hayas terminado con el desarrollo de tu herramienta, simplemente oculta la pestaña. Tu aplicación final será más rápida. Además, ya no necesitarás preguntarte dónde está la fórmula intermedia que pusiste en la celda AZ12 con fuente blanca hace varias semanas.

Organización vertical de elementos

Piensa en Facebook o cualquier otra red social. Estamos acostumbrados a desplazarnos y entender el contenido de arriba hacia abajo. Tu herramienta debe reflejar esta organización vertical.

Colores de celdas: mantenerlo simple y claro

Como desarrollador de herramientas de hoja de cálculo, sabemos qué entradas son necesarias. Sabemos dónde encontrar qué y cómo completarlo. ¡Para el usuario final todo es nuevo!

Debes guiar las acciones del usuario con algunos colores. Usa el mismo esquema de color que el sitio web donde deseas insertar tu herramienta. Pero no abuses de la pintura para tu herramienta. Podría volverse demasiado borrosa y complicada de seguir.

Comienza con dos colores: uno para la entrada del usuario y un segundo para enfatizar los resultados principales. Recuerda: ¡menos es más!

Lo mismo ocurre con el color de fondo. Appizy genera herramientas transparentes. Tu aplicación obtendrá el fondo del sitio donde se inserta.

Sin columnas o filas vacías

¿Qué se suele hacer?

Dependiendo del tamaño de su pantalla, las personas tienden a centrar la herramienta (= la interfaz de usuario) en el medio de su pantalla. Para hacerlo, agregaron columnas vacías a la izquierda de la zona de entradas y algunas líneas vacías arriba.

¿Cómo cambiar este enfoque?

Tu futura interfaz de usuario debe pegarse a la esquina superior izquierda de la pestaña. Sin espacio vacío. Una vez más, cuando insertes la herramienta puedes ajustar con algo de CSS. Pero llevar espacio en blanco con la aplicación en sí hará las cosas más complejas después (especialmente para la visualización móvil).

Limpia tus cálculos de hoja de cálculo

Excel u hojas de cálculo de OpenDocument son más permisivos en términos de cálculos. Manejan y corrigen automáticamente errores menores. La aplicación web interactiva hecha con Appizy está escrita en JavaScript. Este lenguaje permite menos flexibilidad y necesitas prestar atención a algunos elementos si quieres que todo funcione sin problemas:

Verifica las referencias de fórmulas. Tu hoja de cálculo no debe tener #REF mostrado en ninguna parte. Elimina o corrige la fórmula, Elimina la división por 0 (advertencia: #DIV/0). En este caso, usa cálculos condicionales o agrega un valor predeterminado para evitar tal problema, Si necesitas calcular a^b (a elevado a la potencia de b), usa la función POTENCIA: POTENCIA(a; b).

Limitación de Appizy

El algoritmo de Appizy mejora cada día. Incluso si queremos extender las capacidades lo más rápido posible, todavía hay algunas limitaciones de las que debes estar consciente. Este componente no se convertirá en la aplicación web final:

  • Imágenes: elegimos ignorarlas en Appizy. Consideramos que las ilustraciones de la herramienta (ej: tu logo) están alrededor de la herramienta misma,
  • Las macros o tablas dinámicas no se transferirán a Appizy.