Archivo para Abril, 2011

¿Cómo conseguir tablas al estilo Excel solo con CSS y con CSS y jQuery?

24 de Abril de 2011

PLAN A: Solución CSS

La solución CSS solo tiene lugar si los anchos de las columnas de la tabla tienen una dimensión fija y siempre será así. En caso contrario, hay que aplicar el plan B (con jQuery).

Para poder conseguirlo, debemos dividir la tabla haciendo buen uso de THEAD, TBODY y TFOOT (en caso de ser necesario). Yo no lo voya usar, por simplificar esto, pero el método a aplicar es exactamente el mismo. Aunque, expresamente indico que solo tendría sectido aplicarlo si se requieren especificar la sumatorias de totales, promedios, etc. Pero que sean valores que dependan de las columnas de contenido. Porque de otro modo, es más fácil aplicar una solución fuera de la tabla. Bueno, sin más preámbulos, paso a indicar la estructura de la tabla:

Screen shot 2011-04-24 at 11.40.46

Hay que fijarse que he aplicado la misma clase para los TH del THEAD que para los TD del TBODY. Lo importante es que los anchos de las columnas sean los mismos tanto en el THEAD como en TBODY de la tabla.

Para poder llevara acabo el scroll, haremos servir algo bastante lógico en CSS: el overflow. Hay que tener en cuenta que para poder aplicar esta propiedad, el contenedor sujeto debe de ser un bloque (display:block). He aquí el motivo de los problemas con las columnas que no tengan un ancho definido, dado que las mismas las distribuye el mismo navegado dinámicamente en función del espacio que debe ocupar la tabla y la celda.

Repito: Hay que tener en cuenta que en efecto esta solución no tiene sentido si se aplican tablas con ancho 100% o que hayan celda(s) sin ancho definido.

PLAN B: Solución CSS + jQuery

Bueno, primero, preguntarse por qué no solo con CSS. Pues, básicamente porque CSS resuelve buena parte del problema. Sin embargo, para poder aplicar un THEAD fijo, debemos modificar el objeto de tal modo, que el THEAD con sus repsectivos TH pierde la referencia de los anchos proporcionados por los valores de los TBODY>TD. Siempre y cuando estos valores no hayan sido especificados por CSS.

Indico la estructura de la tabla y estilos básicos, teniendo en cuenta que la estructura es casi idéntica a la del Plan A, con la diferencia de que las columnas no tendrán un tamaño definido.

Screen shot 2011-04-24 at 11.25.03

Screen shot 2011-04-24 at 11.23.08

Con esta base, veríamos que el scroll funciona correctamente, pero algo sucede con el THEAD. Al definir su propiedad display:block, perdemos la referencia de anchos del TBODY que dinámicamente han quedado dispuestos por el navegador, en función de la cantidad de texto ocupado por la celda, ancho de la tabla y ancho de las celdas, si existe alguno definido.

En pocas palabras, todo funciona a excepción de la disposición de elementos del THEAD. Así pues la solución al caso sería sencilla: Aplicar los mismos anchos que tengan los TD del TBODY a los TH del THEAD. Hay que tener en cuenta que no es posible aplicarla con estilos CSS. Porque necesitamos conocer cuál ha sido el ancho que dinámicamente se le ha asginado a cada celda el navegador. Lo que depende de muchos factores, todos ellos girando alrededor de si la tabla tiene un ancho definido al 100%, no tiene ancho definido o tienen sus celdas algunos anchos definidos.

Uso jQuery para poder :

Screen shot 2011-04-24 at 11.54.01

Y en efecto, esto debería funcionar, si no fuera porque en el ejemplo, no he aplicado el reset de estilos CSS, con el que no habría margin ni paddings deginidos en el objeto tabla. Así pues, esto planteado tal cual, sin reset, falla. Pero, ¿por qué? Porque el margin y el padding en el método width() de jQuery no se incluye.

Podríamos usar este otro método outerWidth() que jQuery nos provée en versiones posteriores a la 1.2. El cuál sí nos devuelve el ancho del objeto tenienedo en cuenta el padding y el margin que haya definido.

Screen shot 2011-04-24 at 12.01.20

Hay que tener cuidado con los paddings y borders. Son los mayores causantes de problemas.

Top Programas de gráficos Web para Macintosh

8 de Abril de 2011

Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.

1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.

2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver.  Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.

3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.

4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,