|

Favoritos del CSS Reboot

ByLuis

A pesar de apuntarse centenares de sitios, por segunda edición consecutiva el CSS Reboot sólo nos ha deparado apenas una veintena de diseños destacables. Entre hoy y mañana publicaremos en CSS Manía lo más destacable. Dicho esto, siempre son bienvenidas este tipo de iniciativas.

Nuestros favoritos sin ningún orden en particular:

Similar Posts

Modificar el contorno del texto mediante CSS

ByLuis

CSS Text Wrapper te permite modificar el contorno de los párrafos de texto de nuestras páginas web, ya sea creando círculos, zig-zags, o cualquier otra figura.
textwrapper.png
Hay dos formas de poder aplicarlo: mediante estilos o mediante un javascript. Existe un editor que nos ayuda mediante la creación de puntos, configurar el contorno de nuestro párrafo.
CSS Text Wrapper
Vía / WebAppers

Lista de utilidades CSS

ByLuis

Una lista bastante interesante de aplicaciones que nos pueden ayudar a realizar nuestros estilos. Organizado en diferentes categorías, nos podemos encontrar aquellas centradas en el tipo de letra, formularios, layouts, navegación, optimizadores y otras varias que no se pueden reunir en una categoría completa.

Entre la lista destacaría las siguientes:

List of CSS Tools

Vía / dzone

CSS Frame Generator: obtener la estructura CSS

ByLuis

Buena herramienta que nos devuelve la estructura CSS básica que deberíamos usar para darle estilos a un HTML. Aunque no todos los estilos van a sernos necesarios, si es útil para obtener la estructura inicial y así poder trabajar con algo inicialmente.

Indicando un HTML obtendremos un CSS (vacío) como el siguiente:

#root {  }
#content {  }
#top {  }
#logo {  }
#logo a {  }
#top p.version {  }
#top div.balloon {  }
#top div.balloon h2 {  }
#top div.balloon p {  }
#top div.balloon p strong {  }
#top div.balloon p em {  }
#more.box {  }
#more.box h2 {  }
#more.box p {  }
#more.box ol.properties {  }

CSS Frame Generator

Vía / CSS Globe

Consejos para desarrollar cumpliendo estándares

ByLuis

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

  • Menos es más, no uses mas código del necesario
  • No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
  • Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
  • No uses meta etiquetas redundantes
  • Usa microformatos para hacer tu sitio legible
  • Usa tablas solo para mostrar tablas
  • Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
  • No uses Javascript mediante enlaces
  • No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

CSS Clean: optimiza tus CSS

ByLuis

cleancss.pngA la hora de crear nuestras hojas de estilos, podemos crear ficheros css que no sean del todo óptimos, ocupando más espacio de lo debido, entre otras cosas. Por ello CSS Clean nos ayuda a optimizar nuestros css de forma rápida y sencilla.
Basado en CSSTidy, existen varios niveles de compresión, permitiendo desde hacer el css algo ilegible, pero menos extenso, hasta una compresión personalizada, la cual permite quitar los últimos punto y comas, dejar los comentarios, eliminar las propiedades que no sean válidas para una versión de CSS.
Una aplicación que nos puede ser de mucha ayuda y que facilmente puede conseguir un ratio de compresión del 20%.
CleanCSS
Vía / dzone

Diseña tus CSS

ByLuis

Paso a resumir un artículo que nos podrá ayudar a la hora de diseñar nuestras CSS, porque como bien dicen, el poner todos los estilos en un solo fichero ya pasó a la historia.

Algo tan importante como la estructura de nuestro sitio es la organización de las CSS en ficheros, claro que no hay una solución perfecta ya que depende de cada situación.

Una posible solución es la que está basada páginas-modelo, es decir, que existe un diseño diferente para distintos modelos de páginas, por ejemplo un diseño para la página principal, otro para las subpáginas, otro para el portfolio, … Este modelo es útil cuando se trata de pocos tipos de diseño, aunque nos podemos encontrar con estilos comunes entre los distintos diseños, lo que complica la solución. Claro, que este problemilla se puede solucionar de distintas formas:

  • Usar un archivo css que agrupe los estilos comunes, aunque ayuda a tener estructurados los ficheros de estilos, si se trata de un sitio grande, puede que este archivo aumente demasiado.
  • Duplicar estilos en CSS independientes, tiene el problema de tener código redundante y tener que corregir cambios en distintos sitios en vez de en un único sitio.
  • Crear un fichero nuevo que puede ser usado por otros, no hay redundancia en este caso.
  • Crear un nuevo CSS que agrupe estos pequeños casos.

Otra solución es diferenciar los estilos por elementos de la página, con esto se quiere decir que si nuestra página se crea dinámicamente y hay un fichero para la cabecera, otro para el cuerpo, otro para la navegacion, puede haber perfectamente sus correspondientes estilos, por lo que solo se incluyen los estilos para cada parte que se use.

Parecido a lo anterior es clasificarlo por etiquetas, por ejemplo, si se usan tablas o formularios, unos estilos para estos elementos y solo incluirlas en las páginas que los contengan.

Otros consejos útiles es separar los estilos para print, handheld and screen y usar @import para incluir estilos en un fichero CSS principal.

A parte de la organización física de los ficheros, tampoco hay que olvidar lo que ya hemos comentado en otras ocasiones que las clases e identificaciones deben tener un significado por su funcionalidad y no por lo que muestran (ej: no usar una clase que sea “rojo”, sino una que sea “error”, el que sea rojo o verde no es significaquivo). Agrupa estilos por contexto y usa comentarios para una mejor localización.

Architecting CSS

Vía / Digg

One Comment

Comments are closed.