StumbleUpon me convence cada dia mas con que es una excelente fuente de información, ahora me tope con HTMLPlayground es un sitio hecho en Java que nos permite practicar y aprender mas sobre HTML de una manera muy dinamica.

Como funciona?

• Seleccionamos un tag (<table>, <img>, <address>, etc..) de la lista.
• En el siguiente recuadro nos muestra una descripción del tag seleccionado y nos genera el codigo HTML de como se usa el tag.
• En el cuadro donde esta el codigo deberemos hacer click sobre el tar del cual nos interese saber que atributos se le puede insertar.
• y por ultimo en ultimo recuadro nos muestra en el momento los cambios que sufre el HTML al agregarle atributos y como le afectan visualmente.

Me dejo maravillado, asi que si andas estudiando sobre diseño y desarrollo de paginas web o por simple hobbie te recomiendo el sitio esta perfecto y es gratis.

Enlace: HTMLPlayground

Las tablas no mueren aun, y pues para bien o para mal siempre las tenemos que utilizar incluso personalmente cuando simplemente me gana la flojera o me arto de la incompatibilidad por culpa de IE pues ni modos uso las tablas.

Pero la tendencia actual es usar las tablas para un solo motivo, crear listas de datos ordenados, para eso las tablas son un amor jaja, pero bueno esas listas siempre las debemos dejar presentables y usables despues de todo no solo las vamos a utilizar nosotros incluso igual y los desarrolladores solo las van a ver en el momento de implementarlas y probarlas.

Asi que si deseas un buen diseño para tus tablas aqui les dejo un enlace a ua excelente galeria bastante dinamica de diseños de tablas, haciendo click en el nombre del diseño (columna: design name) la pagina se recargara con el diseño selecciona junto con su opcion de descargar el archivo CSS que hace posible tal formato.

Enlace: Data Tables and Cascading Style Sheets Gallery

Ahora pues ahi no veo mi diseño asi que aqui les dejo una imagen del diseño que tengo en mis tablas en un pequeño gran proyecto personal que ando realizando, junto con su respectivo archivo de descarga con el archivo CSS y una imagen que utilizo en el encabezado de la tabla y un HTML que muestra un ejemplo.

El codigo e imagenes de este ejemplo y archivo de descarga son gratuitos, los puedes utilizar en el tipo de proyecto que desees.

Descargar | Ver Ejemplo

En StylizedWeb han hecho un listado de los que condideran como los 10 mejores hacks para CSS.

Los hacks son pedasitos de codigo que aprovechan bugs(errores) de los navegadores para arreglar otros bugs, usualmente se usan para que los sitios web mantengan una milticompatibilidad entre navegadores, asi como tambien el que normalmente nos obliga a los desarrolladores a usar hacks es el Internet Explorer 6

Los trucos listados son:

• Comó alinear un div verticalmente
• Comó establecer una altura minima
• Comó hacer que todos los navegadores muestren las imagenes PNG con transparencia (en frogx3, Imagenes PNG con transparencia)
• Autorclear (no se como decir esta pero seria algo asi como limpiar un area despues de usuar objetos con float)
• Comó reiniciar Propiedad de CSS
• Scrolling Render IE
• Opacidad o transparencia de Objetos (en frogx3, columnas transparentes con CSS)
• Pre Tag
• Li Background Repeat IE
• Otros tips.

Enlace: 10 Best CSS Hacks

Ver mas trucos para CSS y tips

Tutoriales de como usar CSS ay muchisimos pero solo con tutoriales si los sigues al pie de la letra y solo copias y pegas no aprendes nada debes meterte al tema saber que estas haciendo y el porque lo tienes que poner de esa forma que en ocaciones puede ser muy confusa.

Para eso estan los Cheat Sheets que son mas un menos un manual bastante reducido que sirve de referencia para la programación en muchos lenguajes, en esta ocación aqui les dejo uno de CSS que no esta en ningun PDF es una pagina HTML y dando ejemplo con un excelente uso del CSS para presentar este Cheat Sheet.

Enlace: CSS Cheat Sheet

Via: WebAdictos

Por mas que intentemos que nuestro codigo XHTML pase las pruebas de validacion de la W3C siempre se nos escapa algo y en los blogs el común denominador son los videos de youtube u otro sistema mas concretamente los objetos flash que insertemos ya que el codigo para el embed suele tener ciertos parametros que no permiten que nuestro codigo sea valido.

Pero para todo hay solución, se llama SWFObject es una libreria javascript que nos permite de manera sencilla insertar un objeto flash haciendo su codigo completamente valido.

Ejemplo Usando SWFObject:

Si ves mucho rollo ahi pues mira que solo basta con insertar una lista como esta:

Es sencillo utilizar esto, apoco no?

Enlaces:

• Descargar SWFObject
• Pagina Oficial de SWFObject

Las tablas y el CSS si se llevan y el que diga que no que vea quien le cree, porque aplicándole de forma amable los CSS a nuestras tablas podemos dejar algo muy bonito, de hecho el tema de no usar tablas se ha satanizado demasiado, ya que las tablas fuera de ser algo antiguo y que tal ves disminuya la velocidad de carga nuestra pagina, en muchas ocasiones pueden resultar sumamente funcional.

Pues bueno en Spectrum se encuentra un Generador de Tablas bastante bueno el cual aplica los estilos mediante un archivo CSS, que podrías descargar o copiar.via Contentdivergent