Tablas combinadas en Wimba Create

Una de las principales limitaciones de Wimba Create es la imposibilidad de utilizar tablas con celdas combinadas. Claro que podríamos intentar usar tablas sencillas pero, ¿es esto realmente una solución? En mi opinión, no lo es, ya que en muchas ocasiones es necesario utilizar celdas combinadas por cuestiones de comprensibilidad y, por qué no, de diseño.

La primera solución que nos puede venir a la cabeza es pegar la tabla como imagen, una vez que esté a nuestro gusto. No me gusta esta solución porque la imagen no deja de ser un elemento estático, es decir, ¿qué pasa si nos hemos equivocado y queremos modificar la tabla? Pues, que tenemos que crear la tabla de nuevo, con los cambios que queramos y volver a generar la imagen.

Una recomendación, si decidís usar este método, consiste en mantener la tabla original en el documento de word, justo al principio del mismo, antes de cualquier elemento “cgSection” que podáis tener. De esta manera, podréis modificar la tabla en vez de crearla desde cero. Al generar el material mediante Wimba Create, probablemente aparezcan algunos mensajes de error relativos a las celdas combinadas pero, finalmente, se generará el HTML sin problemas. En cualquier caso, tras cada modificación hay que realizar el proceso de convertir la tabla a imagen y esto, además, puede causar una pérdida de calidad en los textos (dependiendo del método que utilicemos para pasar la tabla a imagen).

La solución que proponemos es algo más compleja, pero permite que la tabla se regenere automáticamente cada vez que generemos el material y, además, manteniendo el estilo de tablas del esquema que estemos utilizando en cada momento. Este método consiste en crear la tabla con código HTML y, posteriormente, aplicar el estilo de Wimba Create “cgHTMLInclude”.

Una de les principals limitacions de Wimba Create és la impossibilitat d’utilitzar taules amb cel·les combinades. Clar que podríem intentar usar taules senzilles però, és açò realment una solució? Al meu entendre, no ho és, ja que en moltes ocasions és necessari utilitzar cel·les combinades per qüestions de comprensibilitat i, per què no, de disseny.

La primera solució que ens pot venir al capdavant és pegar la taula com a imatge, una vegada que estiga al nostre gust. No m’agrada aquesta solució perquè la imatge no deixa de ser un element estàtic, és a dir, què passa si ens hem equivocat i volem modificar la taula? Doncs, que hem de crear la taula de nou, amb els canvis que vulguem i tornar a generar la imatge.

Una recomanació, si decidiu usar aquest mètode, consisteix a mantenir la taula original en el document de word, just al principi del mateix, abans de qualsevol element “cgSection” que pugueu tenir. D’aquesta manera, podreu modificar la taula en comptes de crear-la des de zero. En generar el material mitjançant Wimba Create, probablement apareguen alguns missatges d’error relatius a les cel·les combinades però, finalment, es generarà l’HTML sense problemes. En qualsevol cas, després de cada modificació cal realitzar el procés de convertir la taula a imatge i açò, a més, pot causar una pèrdua de qualitat en els textos (depenent del mètode que utilitzem per a passar la taula a imatge).

La solució que proposem és una mica més complexa, però permet que la taula es regenere automàticament cada vegada que generem el material i, a més, mantenint l’estil de taules de l’esquema que estiguem utilitzant a cada moment. Aquest mètode consisteix a crear la taula amb codi HTML i, posteriorment, aplicar l’estil de Wimba Create “cgHTMLInclude”.

cas val foro

Para empezar, veremos cual es la estructura de una tabla sencilla en HTML. Las tablas vienen definidas por las etiquetas <table> </table>, de modo que entre estas dos etiquetas o tags, definiremos la estructura y los contenidos de la tabla.

La estructura de la tabla es jerárquica y se define fila a fila y celda a celda, empezando por la parte superior izquierda. Las etiquetas utilizadas para definir una fila son <tr> </tr> y, entre ellas se definen las celdas mediante <td> </td>. A su vez, entre las etiquetas de las celdas se introduce el contenido.

Aunque no es nuestro objetivo, dar formato a la tabla, vamos a establecer únicamente el grosor del borde para que podamos distinguir los límites de las celdas de una manera más clara. Las propiedades o atributos de la tabla (y de las celdas) se pueden especificar dentro de la etiqueta de apertura, siguiendo una estructura del tipo: propiedad=”valor”. Por ejemplo, para indicar que el borde de la tabla tenga 1 píxel de grosor, tendremos que escribir <table border=”1″>.

El código de una tabla con 2 filas y 2 columnas sería el siguiente:

<table border="1">
	<tr>
		<td>Texto de la columna 1, fila 1.</td>
		<td>Texto de la columna 2, fila 1.</td>
	</tr>

	<tr>
		<td>Texto de la columna 1, fila 2.</td>
                <td>Texto de la columna 2, fila 2.</td>
	</tr>
</table>

Para añadir una fila al final de la tabla, copiaríamos y pegaríamos un bloque <tr> detrás del último que haya (justo antes de la etiqueta de cierre de la tabla). Por supuesto que podemos añadir la nueva fila en cualquier posición. Simplemente tenemos que llevar cuidado de no pegar el código de la fila dentro de otra fila, o lo que es lo mismo, debemos crear la nueva fila después de una etiqueta </tr> de cierre de fila.

La tabla, tal cual la veremos en el navegador se  muestra a continuación.

Siguiendo con la explicación, la siguiente cuestión a resolver es: ¿cómo combinamos 2 celdas en una? Para ello tenemos que utilizar las propiedades de las celdas “rowspan” y “colspan“.

• colspan: indica el número de columnas que ocupa  una celda.
• rowspan: indica el número de filas que ocupa una celda.

Veamos un ejemplo. Vamos a combinar las celdas de la primera columna. Partiendo de la estructura anterior, el código sería:

<table border="1">
	<tr>
		<td rowspan="2">Texto de la columna 1, fila 1.</td>
		<td>Texto de la columna 2, fila 1.</td>
	</tr>

	<tr>
                <td>Texto de la columna 2, fila 2.</td>
	</tr>
</table>

En la etiqueta correspondiente a la primera celda de la tabla, empezando por la izquierda, hemos añadido el texto rowspan=”2″. Con esto, lo que estamos diciendo es “esta celda ocupa dos filas“. Al definir la siguiente fila, debemos tener en cuenta que la primera celda ya no hay que definirla puesto que está combinada justo con la celda de arriba. Así que, en este caso, sólo queda un elemento <td>.

La tabla correspondiente se puede ver a continuación:

De la misma manera podemos combinar celdas en horizontal, utilizando colspan. En el siguiente ejemplo hemos combinado las celdas de la última fila, por tanto tendremos que utilizar la expresión colspan=”2″ para decir, “esta celda ocupa dos columnas“. A continuación, podemos ver el código utilizado y la tabla correspondiente.

<table border="1">
	<tr>
		<td>Texto de la columna 1, fila 1. </td>
		<td>Texto de la columna 2, fila 1. </td>
	</tr>

	<tr>
		<td colspan="2">Texto de la columna 1, fila 2. </td>
	</tr>
</table>

La tabla queda:

Es conveniente saber que, si queremos definir alguna celda como cabecera de la tabla, tendremos que cambiar las etiqueta <td> </td> correspondientes por las etiquetas <th></th>. Los encabezados de tabla pueden ser encabezados de fila o de columna. Para especificar qué tipo de encabezados son, disponemos de la propiedad “scope”.

• scope=”row”: indica encabezado de fila.
• scope=”col”: indica encabezado de columna.

Antes de generar nuestros materiales, sólo nos queda indicarle de algún modo a Wimba que el código que introducimos es una tabla y queremos que aplique el diseño correspondiente. En Wimba Create, la parte relativa al diseño de las tablas, al igual que la del resto de contenidos, se trata mediante hojas de estilo CSS. Estas hojas de estilo se encuentran dentro de cada uno de los esquemas de diseño disponibles. En todos los esquemas disponemos de 2 tipos de diseño de tablas: “bordered” y “unbordered“.

• unbordered: genera la tabla sin ningún tipo de borde.
• bordered: genera la tabla con todos los bordes. El diseño de la misma, variará dependiendo del esquema de Wimba seleccionado.

La expresión que debemos utilizar esta vez, dentro de la etiqueta <table> es, class=”bordered” o class=”unbordered”.

Con todo lo visto, un ejemplo de código de una tabla en Wimba Create, sería el siguiente:

<table class="bordered">
	<tr>
		<th colspan="2">Encabezado. </td>
	</tr>

	<tr>
		<td>Texto de la columna 1, fila 2. </td>
                <td>Texto de la columna 2, fila 2. </td>
	</tr>
</table>

Una vez que tengamos el código de la tabla, le aplicaremos el estilo “cgHTMLInclude” de Wimba Create.

La tabla correspondiente al código anterior, generada con Wimba y nuestro esquema personalizado se puede ver a continuación:

Hasta ahora sólamente hemos introducido tablas sencillas con un par de filas y columnas, pero ¿qué ocurre si la tabla que queremos introducir es mucho más grande y contiene más textos? Teclear a mano cada fila y columna puede ser un proceso tedioso y es fácil cometer fallos, como olvidar etiquetas de cierre o no situar las etiquetas correctamente. Para estos casos, lo que recomendamos es utilizar, inicialmente, un editor HTML, como por ejemplo Nvu que es multiplataforma y de libre distribución.

Con Nvu, podemos crear una tabla de un modo sencillo, mediante el menú “Table > Insert” o pinchando en el icono correspondiente de la barra de herramientas.

En el menú “Table” podremos encontrar todas las opciones necesarias para añadir o eliminar filas y columnas, para combinar celdas e incluso para aplicar diseños. Puesto que la tabla, se generará finalmente mediante Wimba Create, no es conveniente aplicar estilos a la tabla, ya que Wimba aplicará automáticamente el estilo del esquema de diseño seleccionado.

En la parte inferior de la pantalla, podemos encontrar varias pestañas. La pestaña “Normal” nos permite trabajar en una vista de diseño, mucho más cómoda que teclear código HTML.

Una vez que hayamos completado la tabla, pasaremos a la pestaña “Source”, que contiene la versión HTML de todo lo que hayamos incluido en la vista diseño, incluidos enlaces a páginas web y textos en negrita. Tendremos que localizar la etiqueta de inicio de tabla, <table> y copiar desde ahí hasta la etiqueta de fin de tabla, </table>.

Aunque la tabla sea compleja, una vez que tengamos el código en Word, y teniendo en cuenta que ya conocemos las etiquetas vistas más arriba, podremos realizar cualquier modificación directamente en el código, desde Word, sin tener que recurrir de nuevo a un programa de edición de páginas web.

Ejemplos

• Descarga un ejemplo en .docx, listo para generar con Wimba Create.
• Descarga un ejemplo en .doc, listo para generar con Wimba Create.
• Visualiza el HTML correspondiente.

cas val foro

Per a començar, veurem com és l’estructura d’una taula senzilla en HTML. Les taules vénen definides per les etiquetes <table> </table>, de manera que entre aquestes dues etiquetes o tags, definirem l’estructura i els continguts de la taula.

L’estructura de la taula és jeràrquica i es defineix fila a fila i cel·la a cel·la, començant per la part superior esquerra. Les etiquetes utilitzades per a definir una fila són <tr> </tr> i, entre elles es defineixen les cel·les mitjançant <td> </td>. Al seu torn, entre les etiquetes de les cel·les s’introdueix el contingut.

Encara que no és el nostre objectiu, donar format a la taula, establirem únicament el grossor de la vora perquè puguem distingir els límits de les cel·les d’una manera més clara. Les propietats o atributs de la taula (i de les cel·les) es poden especificar dins de l’etiqueta d’obertura, seguint una estructura del tipus: propietat=”valor”. Per exemple, per a indicar que el marc de la taula tinga 1 píxel de grossor, escriurem <table border=”1″>.

El codi d’una taula amb 2 files i 2 columnes seria el següent:

<table border="1">
	<tr>
		<td>Text de la columna 1, fila 1.</td>
		<td>Text de la columna 2, fila 1.</td>
	</tr>

	<tr>
		<td>Text de la columna 1, fila 2.</td>
                <td>Text de la columna 2, fila 2.</td>
	</tr>
</table>

Per a afegir una fila al final de la taula, copiaríem i pegaríem un bloc darrere de l’últim <tr> que hi haja (just abans de l’etiqueta de tancament de la taula). Per descomptat que podem afegir la nova fila en qualsevol posició. Simplement hem de portar cura de no pegar el codi de la fila dins d’una altra fila, o el que és el mateix, hem de crear la nova fila després d’una etiqueta </tr> de tancament de fila.

La taula, tal qual la veurem en el navegador es mostra a continuació.

Si seguim amb l’explicació, la següent qüestió a resoldre és: com combinem 2 cel·les en una? Per a açò hem d’utilitzar les propietats de les cel·les “rowspan” i “colspan“.

• colspan: indica el nombre de columnes que ocupa una cel·la.
• rowspan: indica el nombre de files que ocupa una cel·la.

Vegem un exemple. Combinarem les cel·les de la primera columna. Si partim de l’estructura anterior, el codi seria:

<table border="1">
	<tr>
		<td rowspan="2">Text de la columna 1, fila 1.</td>
		<td>Text de la columna 2, fila 1.</td>
	</tr>

	<tr>
                <td>Text de la columna 2, fila 2.</td>
	</tr>
</table>

En l’etiqueta corresponent a la primera cel·la de la taula, començant per l’esquerra, hem afegit el text rowspan=”2″. Amb açò, el que estem dient és “aquesta cel·la ocupa dues files“. En definir la següent fila, hem de tenir en compte que la primera cel·la ja no cal definir-la, ja que està combinada just amb la cel·la d’a dalt. Així que, en aquest cas, només queda un element <td>.

La taula corresponent es pot veure a continuació:

De la mateixa manera podem combinar cel·les en horitzontal, utilitzant colspan. En el següent exemple hem combinat les cel·les de l’última fila, per tant haurem d’utilitzar l’expressió colspan=”2″ per a dir, “aquesta cel·la ocupa dues columnes“. A continuació, podem veure el codi utilitzat i la taula corresponent.

<table border="1">
	<tr>
		<td>Text de la columna 1, fila 1. </td>
		<td>Text de la columna 2, fila 1. </td>
	</tr>

	<tr>
		<td colspan="2">Text de la columna 1, fila 2. </td>
	</tr>
</table>

La taula queda:

És convenient saber que, si volem definir alguna cel·la com a capçalera de la taula, haurem de canviar les etiqueta <td> </td> corresponents per les etiquetes <th></th> . Els encapçalats de taula poden ser encapçalats de fila o de columna. Per a especificar quin tipus d’encapçalats són, disposem de la propietat “scope”.

• scope=”row”: indica encapçalat de fila.
• scope=”col”: indica encapçalat de columna.

Abans de generar els nostres materials, només ens queda indicar-li d’alguna manera a Wimba que el codi que introduïm és una taula i volem que aplique el disseny corresponent. En Wimba Create, la part relativa al disseny de les taules, igual que la de la resta de continguts, es tracta mitjançant fulles d’estil CSS. Aquestes fulles d’estil es troben dins de cadascun dels esquemes de disseny disponibles. En tots els esquemes disposem de 2 tipus de disseny de taules: “bordered” i “unbordered“.

• unbordered: genera la taula sense cap tipus de marc.
• bordered: genera la taula amb tots els marcs. El disseny de la taula, variarà depenent de l’esquema de Wimba seleccionat.

L’expressió que hem d’utilitzar aquesta vegada, dins de l’etiqueta <table> és, class=”bordered” o class=”unbordered”.

Amb tot el vist, un exemple de codi d’una taula en Wimba Create, seria el següent:

<table class="bordered">
	<tr>
		<th colspan="2">Encapçalat. </td>
	</tr>

	<tr>
		<td>Text de la columna 1, fila 2. </td>
                <td>Text de la columna 2, fila 2. </td>
	</tr>
</table>

Una vegada que tinguem el codi de la taula, li aplicarem l’estil “cgHTMLInclude” de Wimba Create.

La taula corresponent al codi anterior, generada amb Wimba i el nostre esquema personalitzat es pot veure a continuació:

Fins ara sólamente hem introduït taules senzilles amb un parell de files i columnes, però què ocorre si la taula que volem introduir és molt més gran i conté més textos? Teclejar a mà cada fila i columna pot ser un procés tediós i és fàcil cometre fallades, com oblidar etiquetes de tancament o no situar les etiquetes correctament. Per a aquests casos, la qual cosa recomanem és utilitzar, inicialment, un editor HTML, com per exemple Nvu que és multiplataforma i de lliure distribució.

Amb Nvu, podem crear una taula d’una manera senzilla, mitjançant el menú “Table > Insert” o punxant en la icona corresponent de la barra d’eines.

En el menú “Table” podrem trobar totes les opcions necessàries per a afegir o eliminar files i columnes, per a combinar cel·les i fins i tot per a aplicar dissenys. Com la taula, es generarà finalment mitjançant Wimba Create, no és convenient aplicar estils a la taula, ja que Wimba aplicarà automàticament l’estil de l’esquema de disseny seleccionat.

En la part inferior de la pantalla, podem trobar diverses pestanyes. La pestanya “Normal” ens permet treballar en una vista de disseny, molt més còmoda que teclejar codi HTML.

Una vegada que hàgem completat la taula, passarem a la pestanya “Source“, que conté la versió HTML de tot el que hàgem inclòs en la vista disseny, inclosos enllaços a pàgines web i textos en negreta. Haurem de localitzar l’etiqueta d’inici de taula, <table>, i copiar des d’ací fins a l’etiqueta de finalització de taula, </table>.

Encara que la taula siga complexa, una vegada que tinguem el codi en Word, i tenint en compte que ja coneixem les etiquetes vistes més amunt, podrem realitzar qualsevol modificació directament en el codi, des de Word, sense haver de recórrer de nou a un programa d’edició de pàgines web.

Exemples

• Descarrega un exemple en .docx, llest per a generar amb Wimba Create.
• Descarrega un exemple en .doc, llest per a generar amb Wimba Create.
• Visualitza l’HTML corresponent.

Hasta ahora sólamente hemos introducido tablas sencillas con un par de filas y columnas, pero ¿qué ocurre si la tabla que queremos introducir es mucho más grande y contiene más textos? Teclear a mano cada fila y columna puede ser un proceso tedioso y es fácil cometer fallos, como olvidar etiquetas de cierre o no situar las etiquetas correctamente. Para estos casos, lo que recomendamos es utilizar, inicialmente, un editor HTML, como por ejemplo Nvu que es multiplataforma y de libre distribución.

Con Nvu, podemos crear una tabla de un modo sencillo, mediante el menú “Table > Insert” o pinchando en el icono correspondiente de la barra de herramientas.