Browse Category: Desarrollo Web

Informaciones, aplicaciones, guías y sugerencia relacionada con el Desarrollo Web

Buenas prácticas para el Desarrollo Web con HTML5

Desarrollo Web con HTML5

Quizás muchos de ustedes se están iniciando en el Desarrollo Web con HTML5, por eso es bueno comenzar con unas cuantas buenas prácticas de HTML5 desde el principio. Son bastante básicas, pero no está de más recordar alguna de ellas, ya que sobre todo nos ayudarán a crear un mejor código HTML5.

Al comenzar a desarrollar una web normalmente lo primero es definir los elementos básicos, buena parte de ellos son los mismos en casi todas las páginas, algunos tags iniciales como: header, footer, metas… Para crear este esqueleto básico podemos usar alguno de los generadores de plantillas disponibles en forma online.

Algunos de los más conocidos son Shikiryu generator. Sin olvidarnos de el excelente HTML5 Boilerplate.

Tener siempre a mano un chuleta de HTML5

HTML5 Cheat Sheet - Tags

Seamos sinceros. No conocemos todos los tags HTML5 y algunas veces muchos de ellos se nos olvidan con frecuencia. Eso sin contar los nuevos que se van introduciendo. Así que lo mejor es tener siempre a mano una chuleta (cheat sheet) de HTML5. Podéis encontrar unas cuantas sobre tags, event handler o soporte en navegadores en la web siempre actualizadas.

Ser cuidadoso con la compatibilidad de los elementos que usemos

HTML5 sigue siendo una tecnología nueva. Aunque poco a poco muchos navegadores ya la van incorporando no en todos funciona ni de la misma forma. Por eso es recomendable tener siempre a mano la web de Can I Use.com para consultar que especificaciones podemos usar, aquí encontraréis tablas de compatibilidades de CSS3, SVG y Javascript.

Saber cómo hacer compatibles HTML5 y versiones antiguas de Internet Explorer

Internet Explorer siempre ha sido un quebradero de cabeza para los desarrolladores web. Con HTML5 promete dar aún algunos dolores de cabeza, al menos para las versiones antiguas de IE 8 y anteriores. La buena noticia es que existe un script que te soluciona la vida de una forma muy simple. Se trata de este de html5shim que con tan sólo incluir en la cabecera de tu código permite ser compatible.

<!-- [if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Usar los elementos correctamente

Puede parecer una gilipollez y te va a funcionar igual, pero si HTML5 nos da tags específicos como header, footer, article, section, aside, nav…. debemos usarlos y olvidar los viejos div para esos casos. Nuestro código se verá favorecido en legibilidad y podremos aprovechar mucho mejor las características de HTML5 para el marcado de nuestras webs.

Valida tu código

Nunca hay que olvidar hacer un código valido. Nos quejamos de la compatibilidad de los navegadores, pero en muchas ocasiones no hemos escrito el código correctamente para que valide, lo que da problemas en algunos navegadores “menos listos” o incluso en la forma que Google nos indexa. El W3C Validator es nuestro amigo.

Vía | Cats Who Code

Cómo utilizar correctamente las etiquetas de encabezado de HTML

Etiqueta H1 de HTML

La etiqueta de encabezado H1 y sus hermanas pequeñas son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos. Este post está dedicado a analizar alguno de las falsas creencias acerca de estas etiquetas de titulares, y a dar consejos certeros para aprovechar realmente su potencial.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.

Qué es la etiqueta H1 (y qué no es)

H1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título H1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.

De este párrafo, se extraen varias conclusiones. La primera de ellas, es que si el titular H1 resume en una frase el contenido de la página actual, no tiene sentido que en un mismo documento web tengamos varios H1, pues el resumen de tu sitio debe ser uno. Un caso de mal uso relacionado con este hecho son los blogs donde en el listado de los últimos posts cada uno de ellos lleva un titular H1: esto no es correcto, y lo adecuado sería que en el listado los títulos fueran H2 (etiqueta de título de menor importancia de la que hablaré más tarde), y al acceder al post completo ya sí se nos mostrara el título como un H1.

La segunda de las conclusiones es que si resume el contenido de una única página, tu sitio web completo deberá tener un H1 para cada uno de los documentos, que resuma el contenido de la misma de la forma más específica posible. Un caso de mal uso para esta norma son aquellos sitios web donde el H1 está dedicado en todas las páginas al nombre de la compañía.

Como título que es, y estando el SEO orientado en el fondo al usuario, lo lógico es que tu titular H1 aparezca cuanto más arriba de la página mejor, tal cual lo haría el título de una noticia en una web. Google confiere mayor importancia al contenido situado en el primer tramo de un documento web, y también para el usuario es lógico encontrar el H1 en esa posición.

Un H1 no debería en principio ir enlazado a otros documentos, pues su contenido debería ser importante únicamente para el documento que estamos viendo. Si colocamos un enlace en ese H1, vamos a indicar inconscientemente que la página importante para ese título es a la que enlazamos, y no la página actual. Desde otros documentos, esta página debería estar enlazada con el mismo texto del H1 para reforzar la importancia de su titular, o variaciones de sus palabras clave para tratar de posicionar en varios términos relacionados.

El H1 debe mantenerse corto, pues la importancia de las palabras clave que contiene el titular irá perdiendo fuerza cuanto más largo sea. Tanto en esta etiqueta como en otras (por ejemplo, la metaetiqueta title), Google confiere una mayor importancia a las primeras palabras de la frase que a las últimas: asegúrate de que tu H1 empieza siempre que sea posible por la palabra o palabras claves principales para ese documento. Puede que esto vaya en contra de un titular de un estilo más periodístico, pero es lo ideal para posicionar el documento. Piensa en el contenido de la etiqueta como una frase que contenga información completa por sí misma para definir el contenido del sitio, y que no necesite de información adicional.

Además, de nada servirá el titular H1 si su título no hace realmente referencia al contenido de esa página. Las palabras clave del titular deben aparecer en varias ocasiones a lo largo del texto de contenido de la página.

El titular H1 puede o no coincidir con la metaetiqueta title del documento HTML. La metaetiqueta Title tiene una importancia menor que el H1, y se muestra en los resultados de búsqueda, por lo que podemos optimizar más para SEO el H1, y redactar la metaetiqueta title de tal forma que esté más destinada a captar la atención de un humano en los SERP, variando la redacción sobre las mismas palabras clave. Como curiosidad, en caso de que no dispongas de metaetiqueta title en tu web o de que contenga algún error de sintaxis HTML, es posible que el H1 acabe mostrándose como el título de la página en los resultados de búsqueda de Google.

Qué es la etiqueta H2 (y qué no es)

La etiqueta H2 es un elemento similar al H1, que indica títulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios H2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.

No debemos confundir los H2 con herramientas para colocar títulos en las zonas de nuestra página: “Últimas noticias”, “Contáctame”, ”Zona de usuario”, “Páginas amigas”, “Bienvenido a mi web”… son títulos genéricos para bloques de una web, pero que nada tienen que aportar al contenido. Este tipo de títulos deberían ser etiquetas estándar de HTML con el estilo CSS deseado, pero no deben ser titulares H2, pues las etiquetas de encabezado no son una herramienta de estilo pese a que frecuentemente se les haya relegado a este uso. Además, de utilizar así los titulares H2 es muy probable que fueran los mismos de una página a otra del sitio, y al igual que ocurría con los H1 es vital que sean diferentes, adaptados al contenido de cada documento.

Los titulares H2 marcan las diferentes secciones de un texto, los títulos de los nodos accesibles desde un listado de elementos, etcétera. Su texto debe cumplir las mismas directrices que las dadas para el H1, pero sus palabras clave deben hacer referencia al texto que encontramos justo a continuación, o en la página a la que enlazan. No existe un número determinado de elementos H2 que pueden colocarse en una página, pero el contenido debe ser el que marque este requerimiento. Entre 2 y 8 titulares H2 son lo más adecuado, aunque pueden no aparecer o presentarse en un número mayor si la longitud del texto lo requiere.

Qué son las etiquetas H3, H4…

Las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un H2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de H4.

El orden lógico de los titulares debería ser el que apareciera en primer lugar el titular H1, después todos los H2 y después todos los H3. También es habitual el trabajar con H1, H2 y H3 como títulos de capítulo, apartados y epígrafes, de forma que aparezca primero el titular H1, después un H2 con sus subapartados marcados con H3, después otro H2 y sus subapartados, y así sucesivamente.

Quitar todos los elementos restantes de tu sitio web y dejar sólo los titulares deberían en la mayoría de los casos dar una idea del contenido de tu página, tal cual lo hace un índice en un libro: las etiquetas de encabezado deben describir la estructura del artículo.

La relación entre titulares y texto debe tener una proporción razonable: intentar utilizar más encabezados de la cuenta no es una ventaja, sino un error que hará que la importancia que tratamos de dar a nuestras palabras clave acabe completamente ignorada.

Dando estilo a los titulares

Puedes utilizar CSS para definir los tamaños y estilo de los textos. De todos modos, piensa que el SEO es al fin y al cabo tratar de mejorar nuestros resultados en los buscadores, y éstos quieren ofrecer la mejor experiencia al usuario y contenidos de calidad. Es decir, puedes modificar las propiedades CSS de una forma lógica, pero no deberías hacer por ejemplo un H1 excesivamente pequeño respecto al texto de contenido, o los buscadores percibirán que algo raro tratas de hacer. Del mismo modo, la jerarquía de tamaños entre H1, H2 y el resto de titulares debería seguir una cierta lógica.

Dentro de los titulares es técnicamente posible incluir otros elementos de estilo, como spans y otras etiquetas que nos permitan modificar cómo se ve finalmente el contenido de otra etiqueta. Sin embargo, como regla general, si podemos mantener el contenido de la etiqueta H únicamente como un texto sin aditivos, será más eficaz. Sí es posible aplicar sin problemas estilos, y preferentemente clases, a la etiqueta del titular.

Google no reconoce por el momento textos en imágenes, por lo que hacer que tu H1 sea una imagen no es en absoluto una buena idea. Si no queda otro remedio que utilizar imágenes, vuelve a pensar si realmente no puedes hacerlo en texto. Si pese a todo decides utilizar imágenes para un titular, asegúrate de que esta imagen tenga un texto alternativo. Si ese titular está enlazado, deberías añadir también el atributo Title a la etiqueta A para indicar el contenido de la misma.

Otra opción para incorporar una imagen a un titular es colocar la imagen de fondo del H1, e incorporar un padding a esta etiqueta que haga que el texto quede fuera de la zona de visión. Es algo que funciona visualmente, pero de nuevo insisto en que no es en absoluto aconsejable el jugársela con estas tácticas en el elemento más importante de nuestro documento.

Fuente: hectormainar

Multibrowser el navegador perfecto para los desarrolladores web

NOTA: El software ha sido descontinuado.

Compruebe que su sitio web tiene un aspecto perfecto en todos los navegadores. La captura de pantalla no está mal, pero trabajar con los navegadores en un ambiente real es mucho mejor. Multibrowser es la agrupación de todos los navegadores de uso común, en una aplicación.

Página web de Multibrowser

Multibrowser contiene casi todos los navegadores que más se usan actualmente: Internet Explorer 7, 8, 9, Firefox y Google Chrome. Se trata de una representación real de los núcleos de cada navegador. La aplicación te permite ver hasta cuatro sitios web de manera simultánea en los diferentes modos y puntos de vista existentes.

Tres espacios de trabajo diferentes

Multibrowser tiene un buen ambiente de trabajo para cada fase del proyecto. El modo de diseño, si va a crear o editar el proyecto. Contiene muchas herramientas inteligentes y útiles, tales como las reglas y guías, que permiten medir el tamaño de los elementos, y WebTools para la edición de CSS en tiempo real. El modo de comparación, si es necesario comparar varias versiones de su proyecto en un navegador. Y, por último, el modo de Vista, que se utiliza para el control final de su proyecto en todos los navegadores.

Capacidad de navegación por el sitio web completo

Multibrowser no genera las imágenes estáticas de las páginas. Solo contiene la mayoría de los navegadores que más se utilizan en la actualidad, y lo más importante es que los sitios web se muestran en la misma forma que en los navegadores nativos, incluyendo todos los accesorios y funciones. Las páginas pueden ser vistas con eficacia en todos los navegadores seleccionados al mismo tiempo.

La edición en línea del código CSS (WebTools)

Multibrowser contiene una herramienta de gran alcance que es WebTools. Seguramente, usted debe haber oído hablar de Firebug. No negamos que hemos estado un poco inspirados por este popular complemento para Firefox, mientras estábamos desarrollando nuestro WebTools, herramienta que permite modificar el estilo para mostrar los cambios que hechos en tiempo real, muestra los estilos y la posición de los elementos dentro del árbol DOM. Otras características incluyen el Validador HTML del código fuente.

Monitoreo en línea de los cambios en todos los navegadores al mismo tiempo

¿Está familiarizado con la situación cuando se está depurando un sitio web o una plantilla para un navegador concreto y, mientras tanto, se le rompe la disposición de los demás? Posteriormente, tendrá una tarea complicada y el tiempo para revisar las páginas en todos los navegadores, o que va a recibir imágenes desde otras aplicaciones o servicios. Con Multibrowser todo es mucho más fácil. Con WebTools puede depurar su página o plantilla y usted puede ver inmediatamente los cambios, al mismo tiempo, en todos los navegadores que ha seleccionado. Si se utilizan dos monitores para el trabajo, todo el proceso es incluso más rápido, porque puede tener WebTools en un monitor y los navegadores en el otro.

Validador HTML

Ya no es necesario hacer clic entre múltiples aplicaciones, Multibrowser cuenta con editor y validador. Contiene un sistema integrado de validación de código fuente, que está directamente vinculado con el validador del W3C. Inmediatamente después de la descarga que indica si la página es válida o no. Con un clic podrá encontrar todos los errores y las advertencias en la página, incluyendo el número de las líneas donde se encuentra el error. Los resultados de la validación se muestran directamente en el editor, donde los errores se pueden corregir y volver a validar hasta que el archivo HTML esté correcto y validado, teniendo la posibilidad de guardarlo.

Reglas, guías, zoom y otras herramientas de desarrollo

El modo de diseño contiene herramientas útiles para el desarrollo. Con las reglas usted puede determinar con precisión la distancia de los elementos desde el borde superior e izquierdo de la zona de trabajo. Puede utilizar las guías para verificar la ubicación de los elementos de la página y, al mismo tiempo, puede comprobar la exactitud de sus puntos de vista en los navegadores por separado. Si usted necesita ver cualquier parte de la página con mayor precisión en los detalles, puede utilizar la función de zoom.

Comparación de imágenes con la plantilla HTML

Puede ser que usted haya tenido un diseño gráfico de aspecto perfecto, pero el resultado de la plantilla o sitio web haya sido completamente diferente. Los elementos no encajaban, el tamaño de letra era diferente, había una hendidura, imágenes diferentes, entre otras incongruencias. Para evitar que esto ocurra, Multibrowser le permite cargar una imagen – un diseño gráfico – en una de las ventanas, utilizando las guías para indicar la posición de los elementos individuales y, posteriormente, adaptando el resultado de la plantilla a la imagen.

Inspección de elementos HTML

Una de las funciones más populares. Para no complicar su búsqueda en cuanto al elemento específico en la página de árbol DOM o en los estilos CSS, todo lo que necesita es hacer clic en el elemento de Inspección en el contexto de selección y tendrá toda la información que usted precisa. Y, por supuesto, inmediatamente puede trabajar con el elemento, lo puede modificar y depurar.

Editor integrado de HTML

Si necesita hacer cambios sencillos o escribir unas pocas líneas de código, puede utilizar el editor de HTML integrado, que soporta el resaltado de sintaxis HTML, la numeración de líneas, y mucho más. Por supuesto, todos los cambios están en línea visible en todos los navegadores activos. El editor trabaja con WebTools, por lo que se pueden ver y editar los archivos CSS en la página que se muestra; posibilitando redactar un mayor número de códigos, en lugar de unos pocos atributos.

Soporte para los editores externos y entornos de desarrollo

Aunque Multibrowser incluye un editor de HTML integrado, es claro que cuando se está preparando plantillas y proyectos web, está utilizando el entorno de desarrollo favorito o un editor de HTML completo. No hay problema, en la configuración se establece la ruta a su editor y, posteriormente, se puede hacer todo lo que necesite. Los cambios que se realizados se pueden observar inmediatamente en todos los navegadores activos.

Soporte para el trabajo con dos monitores

Si utiliza un editor externo como se describe anteriormente, usted se quedará impresionado con la capacidad de trabajar con dos monitores a la vez: uno puede tener el editor, donde puede escribir el código, y el otro, mostrar exploradores individuales. Por supuesto, esto posibilita trabajar con WebTools o con el editor integrado.

Otras características de uso fácil y útil:

  • Sincronización de navegación en todas las ventanas.
  • Sincronización de desplazamiento de las páginas en todas las direcciones, solo tienes que arrastrar el ratón.
  • Posibilidad de personalizar el tema con aplicaciones de color.
  • Entorno estándar y fácil de usar cómo otras aplicaciones de Windows.

Fuente: http://www.multi-browser.com/

humans.txt Somos humanos, no máquinas

Un archivo TXT que contiene la información sobre las personas que han intervenido en la web.

Página web de humans.txt

¿Por qué un TXT?

Porque es fácil y rápido de crear, y no es intrusivo en el código. Muchas veces los propietarios de los sites no quieren que los autores firmen su web alegando que reduce el rendimiento de la misma. De esta forma puedes demostrar la autoría (que no propiedad) de forma externa, rápida, sencilla y accesible.

¿Dónde se pone?

En la raíz del site. Al lado de robots.txt.

Y (siempre que sea posible) en el <head> añade en el Tag author

<link type="text/plain" rel="author" href="http://domain/humans.txt" />

¿Por qué debo hacerlo?

No estás obligado. Es una iniciativa para conocer a los autores de los sites que visitamos.

¿A quién debo poner?

A quien quieras, siempre que ellos quieran. Puedes poner al desarrollador, al diseñador, al copy, al webmaster, al gestor de contenidos, al SEO, SEM o SMO… como ves la lista es interminable, somos muchas personas las que podemos intervenir en la creación de un site.

Meta Name vs. humans.txt?

No te hagas esta pregunta. No es una lucha, es un complemento para poder ampliar la info de los autores.

La web es para humanos…

Siempre lo decimos, pero sólo generamos un archivo con info complementaria para los motores de búsqueda… robots.txt ¿Por qué no hacerlo también para nosotros?

En busca de un estándar.

Nos gustan las cosas bien hechas, queremos marcar unas pautas para un humans.txt unificado. Abel Cabans definió los campos básicos que puedes consultar en nuestro humans.txt.

También eres libre de añadir lo que quieras

Guía rápida para crear el archivo

  1. Crea un archivo de texto llamado humans.txt (siempre en minúsculas) y codifícalo en UTF-8, evitarás problemas con caracteres multilingües y otros idiomas.
  2. Coloca en el <head> del sitio web una referencia al archivo: <link rel=”author” href=”humans.txt” />
  3. Para mantener una estructura visual básica, separa lo que es el equipo de humans de los datos del sitio web con los títulos bien referenciados con /*TEAM*/ y /*SITE*/
  4. Escribe los datos de cada human involucrado en el proyecto: cargo, nombre, forma de contacto, twitter, localización geográfica,… (Para evitar problemas de S P A M, puedes evitar indicar directamente cuentas de e-mail con [at] en lugar de @.)
  5. Indica también algunos datos del sitio, como la fecha de su última actualización (YYYY/MM/DD), idioma principal, su Doctype y las herramientas utilizadas para su desarrollo.
  6. Guarda y sube el archivo a la carpeta raíz del sitio web.
  7. Coloca el botón de humans.TXT en alguna parte del sitio y enlaza tu humans.txt desde él.

Ejemplo:

/* TEAM */
 
Tu cargo dentro del proyecto: Tu nombre.
Site: E-mail, enlace a formulario de contacto,...
Twitter: tu nombre de usuario en Twitter.
Location: Ciudad, Comunidad, País.
 
[...]
 
/* THANKS */
 
Name: nombre o url
 
[...]
 
/* SITE */
 
Last update: YYYY/MM/DD
Standards: HTML5, CSS3,..
Components: Modernizr, jQuery, etc.
Software: Software usado para el desarrollo del site.

Fuente: http://humanstxt.org/ES/

Frameworks de CSS para el Desarrollo Web

La palabra inglesa “framework” define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular, que sirve como referencia para enfrentar y resolver nuevos problemas de índole similar.

Un framework para aplicaciones web es un framework diseñado para apoyar el desarrollo de sitios web dinámicos, aplicaciones web y servicios web. Este tipo de frameworks intenta aliviar el exceso de carga asociado con actividades comunes usadas en desarrollos web y su intención es principalmente ahorrar tiempo y minimizar el riesgo de errores en el desarrollo de aplicaciones. Los frameworks nos evitan, sobre todo en los momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades.

¿Qué es un framework CSS?

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

Reset (reset.css): Resetear los estilos al empezar a trabajar la maquetación de una página, nos permitirá homogeneinzar, a priori, las posibles diferencias de visualización entre navegadores, unificando las propiedades básicas de los elementos: margin, padding, font, border, etc.

Tipografías (text.css): Una gestión genérica de las tipografías que se usarán en la página. De nuevo, no sólo se trata de aplicar un uso inteligente de fuentes y tamaños, si no de unos altos de línea, margin, padding, font-size, line-height, etc, que ayuden a  mantener un correcto ritmo vertical en la página.

Layout (grid.css): Una parte de los frameworks va dirigida a una de las tareas más arduas a la hora de maquetar cualquier diseño: conseguir un determinado layout, más o menos complejo, que sea, además de óptimo, “cross-browser”,  compatible con todos los navegadores. Suelen disponer de múltiples opciones combinables para conseguir layouts complejos: múltiples columnas, anchos fijos, elásticos y líquidos.

Style (style.css): Estilo personalizado por el desarrollador, ya sea para modificar algunas de las configuraciones anteriores o concentrarse en la maquetación del diseño gráfico para la aplicación o sitio web.

Ventajas de usar un framework CSS

  • Permite agilizar el desarrollo, sobretodo en sus momentos iniciales.
  • Te ahorra las habituales batallitas entre navegadores para conseguir que tus layouts sean “cross-browser”.
  • Partes de una base normalizada / homogeneizada sobre la que desarrollar un trabajo adicional.
  • Si el framework CSS está bien documentado, agiliza el trabajo en un equipo relativamente grande.

Desventajas de usar un framework CSS

  • Curva de aprendizaje. Algunos frameworks son realmente complejos y es necesaria bastante dedicación y pruebas para llegar a controlarlos bien, conocer y usar todo su potencial.
  • Puede afectar negativamente a la semántica de tu marcado HTML. La mayoría de los frameworks contienen definiciones demasiado genéricas que además han sido pensadas y nombradas pensando únicamente en la apariencia que tendrán
  • Gran parte del código nunca será utilizado. Los frameworks intentan prever todas las situaciones y contienen muchas definiciones genéricas que posiblemente nunca lleguemos a utilizar. Esta desventaja sería en realidad aplicable también a otro tipo de frameworks. Con la diferencia que un framework PHP por ejemplo, el cliente no debe descargar TODO el framework para que la aplicación funcione: se ejecuta en el servidor. El CSS en cambio sí debe descargarse al navegador, con lo que debemos cuidar su extensión si no queremos afectar negativamente al rendimiento.
  • Por último, y posiblemente la más importante, es que usar un framework CSS te corta las alas a la hora de aprender, de entender cómo funcionan realmente las hojas de estilo. Muchas de las cosas que se aprende mientras te rompes los cuernos tratando de solucionar absurdos bugs de render de Internet Explorer, o de conseguir flotar aquella caja rebelde, o buscando el motivo por el cual la cascada se iba a tomar viento al definir tal o cuál color. En mi opinión, condiciona excesivamente el trabajo del desarrollador.

Los Frameworks de CSS más usados

960 Grid System

El 960 Grid System es de uso gratuito, y puede ser aprovechado para satisfacer sus necesidades específicas. Se ha dividido en varios proyectos, incluyendo versiones que fueron construidas para ser fluida y elástica.

http://960.gs/

Blueprint

Blueprint es un framework de CSS, que tiene como objetivo reducir el tiempo de desarrollo. Te da una base sólida para construir tu proyecto, es de fácil uso, la tipografía sensible, plugins útiles, e incluso una hoja de estilo para la impresión.

http://www.blueprintcss.org/

YUI Grids CSS

El YUI Grids CSS ofrece cuatro anchos de página predeterminada, seis plantillas preestablecidas, y la capacidad de apilar y anidar regiones subdivididas en dos, tres o cuatro columnas. El archivo de 4kb ofrece más de 1000 combinaciones de diseño de página.

http://developer.yahoo.com/yui/grids/

Baseline

Baseline está construido a partir de las normas tipográficas más claras, pretende simplificar el desarrollo de un sitio web en un entorno agradable. Comienza con varios archivos para restaurar el comportamiento por defecto del navegador, crear un diseño de base tipográfica, incluye el estilo de los formularios HTML y los nuevos elementos de HTML 5 y construye un sistema de red simple.

http://baselinecss.com/

Less Framework

Less Framework es un framework de CSS para el diseño de sitios web adaptativos. Contiene cuatro disposiciones y 3 juegos tipografías construidas para ser fluida y elástica.

http://www.jonikorpi.com/less-framework/

52framework

52framework se presenta como el primero en especializarse en HTML5 y CSS3, el futuro de la programación web que ya está más cerca de lo que pensamos.

http://www.52framework.com/

Twitter Bootstrap

Twitter Bootstrap es una solución flexible que ofrece muchas más potencia que el CSS normal. Conseguimos una serie de características extras como las declaraciones anidadas, mixins, operaciones y funciones de color. Es fácil de implementar en el código tan sólo incluyendo la declaración en la cabecera y usar los componentes disponibles.

http://twitter.github.com/bootstrap/

Otros Frameworks de CSS