El mejor articulo sobre posiciones en CSS

Este es el mejor articulo que he leido sobre las 4 diferentes posiciones que se aplican en CSS.

http://www.digital-web.com/articles/web_design_101_positioning/

CSS, el primer paso, versión 2.0

Creo que con el artículo anterior, por lo menos yo, quedé como medio colgado con el concepto e importancia sobre el uso de CSS. Revisando mis feeds hoy día, me llamó mucho la atención este artículo que habla de lo mismo, pero mucho más claro y está en español!

Resumiendo…

- Mejora la Accesibilidad
- Reducción del ancho de banda
- Menor tiempo de carga
- Optimización para buscadores
- Independencia del dispositivo
- Facilita el mantenimiento (rediseño)
- Entrega el control al usuario
- Garantiza el futuro de la aplicación
- Más fácil de gestionar

Ahora puedo responder mejor cuando me preguntan, “CSS? Se come?”

Aquí el artículo.

CSS, el primer paso.

Para empezar el blog , que mejor que un breve articulo introductorio acerca de CSS. No! No estoy hablando de Counter Strick Source, sino de Cascading Style Sheets, el maravilloso lenguaje que se preocupa de la presentación, del maquillaje de las páginas web.

El siguiente extracto es modificado y traducido de Why you should convert to CSS.

Introducción

Qué es CSS? CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets en inglés) y existen desde los principios de los 90.

Según la definición de Wikipedia:

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XHTML.

Por qué debemos usar CSS?

Existen muchos beneficios al usar CSS en tus páginas web. Acontinuación presento una breve y descriptiva lista de algunas de las mayores ventajas sobre el uso de CSS.

• Ahorro de ancho de banda

Mientras más codigos de HTML tiene una página, más grande va a ser el tamaño del archivo. Eso es lógico – la solución más obvia es reducir la cantidad de HTML. Allí es donde CSS entra en juego, CSS te ayuda a reducir la cantidad de lineas de tu HTML, reemplazando todos los <font> tags por ejemplo, con solamente unas simples declaraciones en tu CSS.
Reduciendo el tamaño del archivo también va a reducir el ancho de banda que tu sitio web gasta mensualmente, y si tienes suerte, pagas menos. Normalmente, un HTML mal implementado puede llegar a pesar unos 80KB (sin considerar las imagenes y otras medias). Usando CSS, podemos reducir el tamaño por aproximadamente unos 30-40%, una cantidad significante, mas aun si tu página es popular.

• Códigos más limpios, más claros

Normalmente, CSS está escrita en un archivo externo, sin embargo, también puedes usar “inline styles” (CSS dentro del mismo archivo HTML). Debido a que los archivos externos son captados y guardados en caché por las mayorías de los navegadores, tu página se cargará mucho más rápida. Al mismo tiempo, como resultado, tenemo codigos más limpios, más claros, más entendibles.

Todavía no estás convencido? Echa un vistazo al siguiente ejemplo como evidencia:

Sin CSS:
<table border="0" width="100%" cellpadding="10" cellspacing="0">
<tr>
<td>
<font face="verdana" size="7" color="#C71585">
<b>Welcome to my website</b>
</font>
</td>
<td align="center">
<font face="verdana" size="7" color="#00FFFF">
My website is entirely written using HTML, nothing else.
</font>
</td>
</tr>
</table>

Con CSS:
Puedes lograr el mismo resultado usando CSS…
body
{
font-family:verdana,arial,helvetica;
font-size:100%;
}
h3
{
font: bold 140% verdana;
color:#C71585;
}
#contenido
{
color: #00FFFF;
}
…más un poco de HTML:
<h3>Welcome to my website</h3>
<div id="contenido">
My website is written using the latest in web technology!
</div>
Mucho mejor no?

• Fácil de actualizar = menos tiempo invertido = más barato de mantener!

Si vas a usar CSS externo (lo cual recomiendo hacer), simplemente por cambiar una declaración dentro del CSS te permite cambiar la apariencia completa de tu página. Por ejemplo, en el ejemplo de arriba, puedes facílmente mover el encabezado a la derecha de la página o envolver el contenido en un rectángulo de 100 píxeles de ancho. Puedes hacer todo eso sin ni siquiera tocar el HTML, solamente modificando el CSS.

Desventajas de usar CSS

La única desventaja que se me ocurre es:

• Incompatibilidad de los navegadores antiguos

Navegadores viejos, como las tempranas versiones de Netscape y Internet Explorer, pueden tener problemas con CSS, especialmente CSS2 que es suportado solamente por los navegadores más recientes.

La solución? Descarga/actualiza la útima version de tu navegador!

En Conclusión

Si estás interesado en re-diseñar tu sitio usando CSS, yo empezaría aprendiendo los más básicos. Busca un simple tutorial de CSS en la web y empieza a ensuciar las manos. Crea tu primer CSS, y con el paso del tiempo, es más que probable que encuentres problemas de compatibilidad entre diferentes navegadores, lease Firefox y Internet Explorer, incluso entre diferentes versiones de Internet Explorer! Pero para eso estamos, para aprender, si no sabes algo, pregunta, si te echas algo, hazlo de nuevo, como dice el archiconocido proverbio, “echando a perder se aprende”.

Este articulo es un extracto modificado y traducido de Why you should convert to CSS.