¿Cuántos de nosotros sabemos utilizar Word o cualquier otro procesador de texto?. Las tablas han sido desde los inicios de la era moderna de la informática, un objeto interesante, producto de una abstracción de lo que solemos utilizar en la vida cotidiana o en lo laboral y en documentos informáticos. En medios gráficos por ejemplo, Adobe Page Maker ya incluía este tipo de diseño e inclusive, sin ir muy lejos, MS Publisher incluye muchos diseños basados en tablas. ¿Cuántos de ustedes han diseñado alguna vez una tarjeta de presentación en Publisher o en Word?. Yo creo que ya escribí en un post muy viejo acerca de la tabla pero no recuerdo.

En la Web, las cosas no son tan distintas y como ya habrán notado al visitar mi spaces, los vídeos embebidos de MSN Vídeo (Soapbox) están colocados de forma ordenada, pero ¿cómo lo hizo? --->

Primero, necesitamos un pequeño editor de HTML. Como es gratuito, utilicé Windows Live Writer, actualmente hay una nueva versión Beta 2. Además de tener algunas funcionalidades de Word, también incluye tablas, permite tener vista previa de su diseño, es compatible con muchos otros servicios de weblog y además, lo más importante es que te deja ver el código fuente HTML que se va a publicar. Lo interesante es que, corrige los códigos de tal forma que sea compatible con Windows Live Spaces. Bueno, tengo un editor.

Segundo, ¿Qué es lo que voy a diseñar? Estadísticas, una lista de precios, un almanaque, un panel de vídeos, un mosaico de fotitos. Las posibilidades son ilimitadas y dependiendo del servicio de weblog, inclusive, manejar una simple base de datos es una posibilidad. Nuestra imaginación es el límite. En el caso en particular de un panel de vídeos, los pasos fueron más sencillos. <_|

<table border="0" cellspacing="0" cellpadding="0" width="600">

<tbody>

<tr>

<td valign="top" width="300">&nbsp;</td>
<td valign="top" width="300">&nbsp;</td>

</tr>

<tr>

<td valign="top" width="300">&nbsp;</td>
<td valign="top" width="300">&nbsp;</td>

</tr>

</tbody>

</table>

Verán de que he destacado algunos códigos interesantes pero con lo que he “jugado” fué  con la variable width. Por defecto, al crear una tabla de m x n dimenciones (fila x columna), el ancho de divide en partes iguales. Yo lo que hice fué sustituir eso valores de width para que se vea de la forma en que ustedes ven en mi spaces.

<_|

<table border="0" cellspacing="0" cellpadding="0" width="600">

<tbody>

<tr>

<td valign="top" width="400">&nbsp;</td>
<td valign="top" width="200">&nbsp;</td>

</tr>

<tr>

<td valign="top" width="400">&nbsp;</td>
<td valign="top" width="200">&nbsp;</td>

</tr>

</tbody>

</table>

Basicamente, el resultado es la columna 1 de ancho 400 y columna 2 de ancho 200. 400 + 200 = 600.

Por las dudas, para saber como va cada cosa, lo que van entre <tr> y </tr> es una fila, dentro de cada fila entre <td> y </td> es el correspondiente “celda” de esa fila. Como verán, estos códigos van en orden por lo que:
--->

<tr> <!-- fila 1 -->

<td valign="top" width="400"> <!-- fila 1, columna 1 -->

&nbsp;

</td>
<td valign="top" width="200"> <!-- fila 1, columna 2 -->

&nbsp;

</td>

</tr>

<tr> <!-- fila 2 -->

<td valign="top" width="400"> <!-- fila 2, columna 1 -->

&nbsp;

</td>
<td valign="top" width="200"> <!-- fila 2, columna 2 -->

&nbsp;

</td>

</tr>

Y así sucesivamente para tablas m x n. <_|

Esto fué un ejemplo. Ustedes puede imaginarse las tablas que quieran e inclusive, insertar dentro de una celda otra tabla, alinear a la derecha, a la izquierda o al centro según su conveniencia e inclusive mostrar los bordes si fuese necesario. No he visto que se pueda dividir o combinar filas, columnas o celdas pero tal, sea posible sabiendo el código HTML. Sino, una forma en que se pueda aparentar “combinar” podía ser insertar otra tabla de distinto número de filas y columnas como lo hice con ésta nota.

Pero es importante recalcar que al parecer, el ancho de las columnas se adaptan según lo que se inserte adentro.

Si tenemos un tabla de ancho 800 y 2 columnas (como éste artículo), si insertamos un vídeo de ancho 425 en la celda (1,1), la columna 1 va a tratar de adaptarse al ancho de ese contenido modificando su tamaño y si en la columna 2 no hay otro objeto a adaptarse, desplaza el ancho quedando la columna 1 de ancho 425 y la columna 2 de ancho 375 (recuerden que en un principio, se dividen en partes iguales). --->

¿Recuerdan &nbsp; que les indiqué más arriba?. Eso representa un carácter de “espacio en blanco”. Al crearse una tabla, por defecto tienen al menos un espacio en blanco. Si insertamos un vídeo, aparecería todo lo que hay dentro de <div> </div> más &nbsp;. Pero como les señalaba, solo nos interesa <embed> … </embed> y no &nbsp;. Considerando el código de la tabla alla arriba, si sustituímos &nbsp;  por <embed> … </embed> igualmente nos mostrará el vídeo sin problemas. o sea algo como esto:

<td valign="top" width="400">

< embed src="http://images.video.msn.com/flash/soapbox1_1.swf" quality="high" width="432" height="364" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://macromedia.com/go/getflashplayer" flashvars="c=v&v=5431960a-9fd4-4505-ac97-15e8277e3c82&ifs=true&fr=msnvideo&mkt=es-ES&from=writer&mkt=en-US" >

</td>

Nota muy importante: Cada vídeo de esto, tipo Flash Vídeo, consume cierto recurso del sistema como la GPU (si disponen), la CPU (sin no tienen GPU), el ancho de banda y sobretodo la RAM. Que las dimensiones del vídeo sean pequeñas no significa que no consuma RAM o CPU (GPU), sobretodo, al cargar por primera vez la página. Para tener una idea, con mi spaces, cargando la página en Internet Explorer 8 Beta, consume como más de 200 Mb de RAM, similar en el Firefox 3.03 y en el Opera 9.60. Esto, en un Pentium 2 con 128 Mb de RAM con XP o 98, es toda una odisea antes de mostrar la página. También si utilizan módem telefónico a 56 Kbps. Creo que no van a poder terminar de cargar las páginas y menos los vídeo. A considerar esto, dependiendo de cada situación.

Quinto, publicar en la Web. Hay varias formas dependiendo de lo que soporte la web de sus proveedores.

Por ejemplo, no se si todavía es válido, pero en caso de blogspot, los códigos embebidos modificados para que pudiesen soportan “Full Screen” de MSN Vídeo, funcionaba bien allí, pero en Windows Live Spaces no funciona. Bueno, funcionaban pero dejaron de funcionar.

Al parecer este problema era por un problema de vulnerabilidad que tiene la tecnología Flash que permite ejecución de códigos malignos. Por eso creo que bloquearon cierta funcionalidad de la tecnología Flash para que no puede ejecutar scripts.

Si van a publicar como un post de blog, tal vez no halla tanta limitación de cantidad de carácteres, sobretodo en los códigos, pero en caso de que quieran hacer algo como lo que yo hice en Windows Live Spaces, teniendo ya creado un Spaces y ya tengan su tabla con los contenidos editados apropiadamente, necesitan lo siguiente.

<_|

1. iniciar sesion con su cuenta de Windows Live ID;
2. dentro de su spaces, en el menú personalizar, haga clic allí, se despliegan opciones, seleccione cambiar de diseño.
3. seleccione el diseño “3 columnas, ancho en medio” y presione Guardar.
4. vuelva al menú Personalizar y presione Agregar módulos. Dentro de la lista de módulos baje para abajo hasta donde dice “Otros” y allí se encuentra el módulo “HTML Personalizado”. Haga clic en Agregar(Se pueden agregar más de uno). Aparecerá un módulo en la columna del medio pero ocupando la mitad de ella de ancho que la misma. Luego presione guardar.
5. vuelva al menú Personalizar y presione Reorganizar o esconder módulos. Haga un drag and drop (arrastrar y soltar) haciendo clic en el título del módulo (Por defecto aparece HTML Personalizado) y soltando en la columna del medio, según les parezca y presione guardar. Bueno, en caso de que no se cree en el medio o lo quieran ubicar en otro lado.
6. una vez bien ubicado el módulo, en el título van a ver una flechita hacia abajo, al presionar van a volver a modo edición. vuelvan a presionar esa flechita hacia abajo del título de HTML Personalizado, aparece otro menú donde dice configuración y ocultar. Presione configuración.
7. Dentro de Configuración, puede cambiar el título si prefieren (por ejemplo, Todo sobre Norah Jones) y hay 3 casillas de verificación (Ocultar el título, Ocultar el borde, Usar todo el ancho). Seleccione el que dice “Usar todo el ancho”, presione Guardar y luego presione Guardar para salir el modo edición. Ahora verán el módulo HTML Personalizado ocupando todo en ancho de la columna del medio.
8. En el módulo HTML Personalizado (o como lo halla llamado), presione debajo del título “Modificar”. Va a mostrar un espacio en blanco. Es aquí donde ustedes pueden copiar y pegar su código HTML previamente editado en un editor HTML como Windows Live Writer o MS Front Page. Pero recuerden de que solamente soporta 2048 carácteres de código. Una vez pegado el código presione “Publicar”.
9. Listo. Ya quedó su panel de vídeo publicado en un módulo de HTML Personalizado en Windows Live Spaces.

Nota:

• En el ejemplo que tiene mi spaces, la cantidad de código pegado era menor a 2048, pero al parecer, en el módulo HTML Personalizado luego de presionar “Publicar” agrega ciertos como allowscriptaccess=never y allownetworking=internal para que no puedan ejecutarse scripts lo que hace que aumente la cantidad de carácteres y que al parecer pueda exceder del límite si vuelven a “Modificar” el código desde Windows Live Spaces y quieran volver a publicar.
• Lo más recomendable es que, se verifique previamente todos los aspectos de su tabla y corregirlo desde el editor antes de publicar.
• Si tienen que sí o sí editar desde la web, una posibilidad (como lo hacía yo) es borrar a mano algunos códigos innecesarios para el funcionamiento del vídeo, como “allowscriptaccess=never”, “allownetworking=internal”, “quality=high” hasta que les permita publicar. Cada vez que se supere 2048, les va a indicar, que usted tiene “tantos” cantidad de carácteres, solo soportan hasta 2048 o algo por el estilo, así van a saber cuanto más seguir limpiando. Pero hay códigos que son fundamentales que es necesario para que funcionen las cosas.
• ¿Vieron que les indiqué en el paso 5 para que arrastren y suelten para que quede el módulo en el medio? y en el paso 7, ¿marcaron y guardaron la opción “Usar todo el ancho”? Si el módulo estuviese ubicado en otro lado (con menos ancho), verán que no les va a mostrar esa opción como en las columnas del costado. Esta opción se encuentra disponible en varios otros módulos.
• Otra ubicación en la cual puedan usar la opción de “Usar todo el ancho” es el Encabezado y pie del spaces. En mi spaces aparece el título de mi spaces en el encabezado y al pie aparece el libro de visita y una lista personalizada de blog recomendados.
• Verán que, también pueden seleccionar la opción de Ocultar título y ocultar el borde para que dé ese efecto “limpio” como en mi spaces pero tiene su costo. Al precionar solo ocultar el borde, no desaparece el borde hasta que seleccione ocultar título también. Pero, al ocultar el título, también ocultará la flechita para abajo con las opciones de “Configuración y Ocultar” y también “Modificar”, lo cual, si están editando los códigos se complica. La única forma de volver a ver todo eso es o en modo edición (presionando cualquier opción del menú Personalizar) o volviendo a deshabilitar “Ocultar el título”. Lo recomendable es que si están editando código, mejor deshabilitar “Ocultar el título” hasta que estén 120% seguros.

Como último ejemplo, a la derecha del panel de vídeo que yo publiqué en mi spaces  hay un módulo HTML Personalizado (Help MSN Vídeo) de solo texto, indicando unas posibilidades que tienen los vídeos de MSN Vídeo. También es una tabla, de 1 X 1, ancho 180 aprox. solo texto, con el título y el borde oculto. Como resultado, queda como una especie de texto flotando y el solamente el fondo oscuro de contraste. Nada mal, no.