Aprende a insertar hojas de cálculo sencillas en tus blogs de WordPress con iframe y jQuery.sheet.

    En mi artículo anterior, expliqué cómo incrustar hojas de cálculo muy simples en un blog de WordPress, usando ese pequeño y genial pedazo de Software Libre llamado Gelsheet.

    Esta vez, como prometí, te mostraré cómo hacer lo mismo con una técnica diferente, fácilmente extensible a cualquier página web, basada en otro paquete de «hojas de cálculo online». Como la técnica de incrustación y el software de hoja de cálculo son completamente independientes entre sí, los explicaré uno por uno.

    El elemento HTML iframe

    Los marcos en línea, o iframes, son elementos HTML que se utilizan para incrustar otro documento en el documento HTML actual. Siendo parte del estándar de lenguaje, los iframes no tienen nada específico para las hojas de cálculo online – o para WordPress. Si conoce la marca de revisión HTML correspondiente, que puede ser tan simple como esto:

    <iframe src="URL_OF_DOCUMENT_TO_BE_EMBEDDED"></iframe>

    puedes usar iframes donde quieras. Para hacer la vida aún más simple, la mayoría de los sistemas de gestión de contenido web (CMS) tienen funciones estándar o extensiones de terceros que hacen que la inserción de iframes sea muy sencilla. WordPress tiene al menos dos plugins para esta tarea. El que usé para este post, por la sencilla razón de que ya estaba instalado en mi blog de pruebas, se llama iframe.

    Su procedimiento de instalación es el estándar para estos plugins: sube el archivo ZIP disponible en esa página a las subcarpetas wp-content/plugins de tu instalación de WordPress, y luego actívalo desde la página de plugins del Dashboard. En ese momento, todo lo que tienes que hacer para insertar un documento es añadir este código en el lugar correcto de tu mensaje:

    iframe src="URL_OF_DOCUMENT_TO_BE_EMBEDDED" width="100%" height="480"] (en inglés)

    Juega como quieras con los parámetros de ancho y alto, pero no olvides hacerlo en la vista HTML del editor de posts de WordPress en lugar de en la visual, de lo contrario puedes estropear el código fuente del post.

    Introduzca jQuery.sheet

    jQuery.sheet es un plugin de hoja de cálculo tipo JavaScript/PHP Excel fácil de usar para el navegador web. Este paquete es muy diferente de Gelsheet. En primer lugar, está diseñado para crear hojas de cálculo que, por defecto, pueden ser editadas por todos los visitantes de la página web correspondiente.

    En segundo lugar, jQuery.sheet es mucho más flexible que Gelsheet. Entre otras cosas, usted obtiene:

    • células congelables
    • muchas fórmulas y opciones de formato
    • Cálculos de múltiples hojas y de hojas cruzadas
    • soporte para fórmulas y variables personalizadas
    • controles en línea como botones, casillas de verificación y listas desplegables
    • temas gráficos y gráficos

    jQuery.sheet dentro de WordPress? Así es como se hace!

    Permítanme explicarles en detalle cómo llegué a lo que pueden ver en la – es decir, una hoja de cálculo dinámica atascada en medio de un post de WordPress de muestra.

    Una hoja de cálculo dinámica pegada en medio de un post de WordPress de muestra.

    Primero, subí y desempaqué la última versión de jQuery.sheeet en una carpeta dedicada de mi servidor web, a la que llamé http://example.com/jq/ en aras de la simplicidad. A continuación, dentro de la subcarpeta «ejemplos», hice mi propia copia de una de las hojas de cálculo de muestra (mortgage.estimator.html) distribuidas con jQuery.sheet. Finalmente, puse el siguiente código en mi post de WordPress:

    [iframe src="http://zona-m.net/jq/examples/mymortgage_estimator.html" width="100%" height="480"]

    A diferencia de lo que sucede con Gelsheet, tengo una hoja de cálculo con la que cualquier lector del post puede jugar, añadiendo sus propios datos .

    Cualquier lector de la entrada puede añadir datos a la hoja de cálculo.

    ¿Cómo haces tus propias hojas de cálculo?

    En este momento, el principal defecto de jQuery.sheet puede ser su documentación. Usted consigue bastantes ejemplos muy interesantes con el software, todos mostrados en la demostración en línea.

    Sin embargo, no parece haber nada entre una documentación de usuario final demasiado sintética y el material de referencia para los desarrolladores. Además, jQuery es más complicado que Gelsheet, precisamente porque es más flexible. Dicho esto, todavía es posible crear hojas de cálculo desde cero con este software sin ser un verdadero programador. Sin embargo, debe conocer los conceptos básicos de HTML y cómo funcionan las hojas de cálculo en general.

    En la práctica, debe seguir estos pasos:

    1. Escribe una tabla HTML con todas las celdas de tu hoja de cálculo (puedes usar cualquier editor HTML para esto)
    2. En el encabezado HTML de esa página, cargue las funciones jQuery.sheet (como se explica aquí)
    3. Siguiendo el ejemplo de esa misma página, ponemos la tabla HTML dentro de un elemento div, con una identidad que la marca como LA tabla que jQuery.sheet debe gestionar.
    4. Escriba los números normales como texto plano dentro de sus celdas, por ejemplo, <td>45</td>.
    5. En su lugar, coloque las fórmulas dentro del marcador TD, siguiendo la siguiente sintaxis: <td data-formula=»SUM(A1:A2)»></td>

    Sí, esto es sólo un resumen del procedimiento general, debido a la falta de espacio. Sin embargo, si la comunidad de ConsejoTecnologico.com expresa suficiente interés, estaré encantado de proporcionar otra entrada con una explicación paso a paso sobre cómo construir una hoja de cálculo jQuery.sheet desde cero. Por favor, comparta su interés y/o cualquier pregunta que pueda tener en el hilo de discusión de abajo.