En un reciente post les comente sobre algunas funcionalidades CSS casi desconocidas, pues dejenme decirles que CSS es sumamente poderoso tanto que Roman Cortes, se le hizo facil hacer un dibujo del popular personaje de la serie Los Simpsons, Homero, usando exclusivamente CSS

La verdad quedo super bien y funciona en varios navegadores, y plataformas la imagen que acompaña este post, es la que hizo con CSS, claro que yo la puse en imagen para que no afectara la visualizacion del post.

Pueden ver la imagen en CSS aqui | Homer CSS

Este post, es tanto de opinion como de aprendizaje ya veran porque.

Hace tiempo cuando empece a aprender HTML, arendi muchas “tags”, center, b, i, font, etc, lo mismo tambien aprendi que tienen muchos atributos.Posteriormente segui, experimentando con mas cosa, imagenes, tablas entre otras cosas.

Jugue con Dreamweaver, y ahi fue donde empece a desarrollar un par de sitios web, sin embargo como fui aprendiendo, mas y conoci las capas o divs.

Llegue a pensar que usar para maquetar una web, ¿Tablas o Divs?.

Alguien algun dia dijo, las tablas son para volcar datos y los divs o capas son para pocisionar contenido, y pensemos por un momento WordPress usa divs, no tablas.

Un post de Maestros del web nos dice los siguiente respecto a el uso de las tablas

Las tablas fueron creadas para agregar contenido tabular en una página, no para acomodar elementos gráficos, ni para distribuir el contenido en tu layout. He tenido el infortunio de encontrarme con páginas que para conseguir su diseño final usan hasta 30 tablas anidadas. Recuerda que los navegadores consideran todo lo que está dentro de una tabla como un solo elemento, y no lo muestran hasta que se ha cargado por completo la tabla. Tus visitantes pueden ir a tomarse un café antes de que termine de cargar todo tu contenido.

Y en el mismo post dicen lo siguiente sobre los Divs o capas:

Esta etiqueta tiene un fin muy particular, sirve para identificar bloques de información que pertenecen a un mismo entorno lógico ó jerárquico. Por ejemplo <div id=”menu_principal”> ó <div id=”articulos”>. Desafortunadamente es muy común verlo utilizado para colorear backgrounds, o para escribir encabezados.La regla: Los DIV dividen tu página en sectores con uso ó contenido similar.

Sin duda, creo que no deberia haber paginas maquetadas con tablas, y les confieso yo aqui en este blog uso dos tablas para presentar diseño , no de todo el blog pero si de una pequeñita parte, prometo ir pensando a moverlas a Css y divs, pero como usar CSS, como es mas complejo y tambien por falta de tiempo no lo he hecho.

Bueno fue una reflexion y una ayuda apara los que van empezando y no saben que onda con esto de la maquetacion.

Fuente de la informacion | Definiendo Estandarización

Anieto2k comenta sobre la implementacion de @font-face un nuevo atributo CSS.

Pero que al parecer en webkit ya se esta implementando.

@font-face se trata de que la fuente pueda ser descargada desde la web aunque el usuario no la tenga instalada la propiedad puede ser usada de la siguiente forma

@font-face {
font-family: “Kimberley”;
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format(“truetype”);
}
h1 { font-family: “Kimberley”, sans-serif }

De esta forma descargamos la funente kimberley para que posteriormente la podamos usar en nuestros estilos.

Sin embargo esta especificacion solo la soporta Webkit.

Ojala y con la llegada del HTML 5 y el CSS 3 ya los navegadores soporten esta especificación, mmmm otra vez sufriremos con Iexplorer(me imagino), ya que…

Usen Firefox..

Visto en | Fuentes descargables en Webkit y @font-face

A veces al escribir CSS, comentemos muchos errores, al organizar el código, al definir las clases o manejar Id’s, repetir código innecesario, Etc…

Pero hoy localice algo que sin duda nos ayudara a corregir todo esto.

Son 70 Ideas para poder codificar mejor nuestros CSS, les dejo el link estan en ingles pero con varios ejemplos, que sin duda nos hara ser mejores programadores.

70 Expert Ideas For Better CSS Coding

Bien después de que pues casi no he escrito nada, o muy poco les tengo un excelente manual, con el que podran crear tabs con ajax muy fácilmente.

Ahora vayamos a lo que nos interesa(“programar”).

Primero necesitamos un archivo php o html para poder colocar nuestras tabs.
Empezaremos creando una tabla en HTML de la siguiente forma