Limpiando la hoja de estilos (css) de elementos no utilizados

css-redundancy-checker

Css Redundancy Checker es una aplicación que nos pide la dirección de nuestra hoja de estilos CSS y las páginas web en las que es utilizada.

Verificará si todos los elementos indicados en el archivos CSS son utilizados, en caso contrario nos informará de lo que puede ser eliminado o de la información redundante.

Útil para reducir tamaños de archivos y hacer un trabajo más limpio y organizado.

Styleneat – Mantener el código CSS organizado

css

Styleneat ayuda a mantener el código CSS de vuestras hojas de estilo perfectamente organizado para facilitar su edición.

Basta incluir el código actual y seleccionar los parámetros deseados para obtener una virguerí­a de resultado digno de concurso.

Nada que no tenga un buen editor de código fuente, aunque siempre se agradecen estas herramientas cuando no hay nada mejor cerca.

Stylelgnite – Diseños gratuitos para tu web

El diseño web es un arte, y como todo arte no está hecho para todo el mundo. Si éste es tu caso, siempre es bueno encontrar ayuda para realizar buenos diseños y aprender.

Stylelgnite es un gran lugar para ello, ya que se trata de una web que recopila y publica diferentes códigos, css, hojas de estilo, javascript, todo orientado a diferentes campos como formularios, botones, tipos de letras, y casi cualquier parte de una web. Todo está perfectamente ordenado en diferentes categorí­as para que vayamos directo a lo que estamos buscando sin perder ni un minuto de nuestro tiempo.

La gran mayorí­a de lo que en esta web se comparte está bajo licencia Creative Commons (CC), con lo cual lo podremos usar, compartir, modificar, y lo que queramos siempre y cuando respetemos a su autor.

Además de estos diseños, también contamos con tutoriales para que poco a poco vayamos aprendiendo y en un futuro no muy lejano seamos nosotros los que compartan nuestras obras con el resto de la comunidad. De hecho tenemos la posibilidad de subir nuestro diseño en esta misma web.

Drawter – Crea en segundos estructuras de páginas web


Sorprendente la facilidad con la que se puede crear el esqueleto de una nueva web usando Drawter.

Con el modo de dibujo podéis ir creando las cajas de contenido, que serán los DIVs de vuestra web. Podéis definir colores, tamaños, textos… todo lo que consideréis necesario antes de generar el código html y su hoja de estilos correspondiente.

Una herramienta que todo diseñador web deberí­a probar en sus inicios.

fuente: del.icio.us

csstypeset – Aprender a crear hojas de estilo CSS

Seguramente los que estáis empezando en el mundo css me agradeceréis este enlace que me encontré navegando entre del.icio.us.

Css Type Set muestra la hoja de estilos css del texto que escribí­s a la derecha. En tiempo real os genera los tags necesarios a medida que usáis un editor de texto normalito con tipos de fuente, negrita, subrayado y demás.

Interesante desde el punto de vista didáctico, un paso más para eliminar las tablas definitivamente de Internet.

Bidabu – Creando tiendas virtuales con estilo

Jordi Cerezo es el creador de Bidabu, un site que permite a sus usuarios tener una tienda virtual en pocos pasos.

Como él mismo dice lo más relevante no es el site en sí­, algo que otras alternativas como masopciones.com ya hace, sino la posibilidad de alterar la hoja de estilos dando un toque personalizado a cada tienda.

Como ves, es un editor css en tiempo real, realizado en ajax, usando varias librerias a la vez.
Se puede modificar todo, tipografias, tamaños, anchos de columnas, mover cajas de un lado a otro, realizar contornos en las cajas, colores, cabeceras de cajas con degradados, etc…

Aquí­ podéis ver cómo se puede personalizar el css de cada tienda, con un sistema que Jordi tardó dos meses en realizar.

20 sitios para aprender CSS

El diseño web es mucho más complicado de lo que parece, y una de las formas correctas de hacerlo es usando Hojas de estilos o CSS. No es nada fácil poderse manejar con ellas, pero tenemos suerte de que existan multitud de sitios donde podremos encontrar buenos tutoriales, ayudas o incluso trozos de código que podremos usar en nuestro sitio. A continuación os listamos 20 de estos sitios.

  1. A list Apart. Un buen sitio que contiene multitud de artí­culos sobre CSS, así­ como tutoriales. Es uno de los sitios más longevos, ya que sus artí­culos datan desde 1999. Se centran mucho en el cumplimiento de los estándares.
  2. CSS Help Pile. Esta web está estructurada como si de un directorio se tratara. Está perfectamente organizado, ordenando los tutoriales por niveles, desde principiantes hasta expertos. Un buen sitio donde buscar ayuda.
  3. CSS Basic. Se trata de un perfecto libro de un uso básico de CSS dividido en 18 capí­tulos. Se puede leer tanto en la propia web como descargar el pdf para tenerlo siempre a mano y disponible. Altamente recomendable.
  4. Holly CSS Zeldman. Colección de guí­as, tutoriales e incluso libros, todo perfectamente ordenado. Existen diferentes categorí­as especializadas, como una muy interesante sobre web 2.0.
  5. Eric Meyer: CSS. Eric Meyer es un aclamado diseñador web que comparte en esta página todos sus conocimientos sobre las hojas de estilo. Siempre es bueno aprender de los grandes.
  6. 456 Berea Street ”“ CSS category. Multitud de artí­culos, sobre unos 300, hablando de todo lo hablable referente a las CSS, desde lo más sencillo hasta lo más complicado.
  7. /* Position Is Everything */. En esta web podremos ver los bugs o errores más comunes que podemos encontrar en cualquier sitio relacionados con diseño y css. Nos informará de cual es el error, como solucionarlo e incluso nos proporcionará algunos ejemplos.
  8. HTML Dog CSS Tutorials. Un lugar donde encontrar diferentes manuales y tutoriales de buenas prácticas a la hora de usar CSS y XHTML para que no solo nos quede todo bonito, si no que además cumpla los estándares más estrictos. 
  9. Learn CSS Positioning in Ten Steps. En tan solo 10 pasos podremos conocer los fundamentos más básicos a la hora de comenzar a usar CSS. Un buen sitio donde empezar si no tienes ni la más menor idea. Incluye ejemplos bastante ilustrativos.
  10. Andy Budd CSS/Web Standards Links. Andy Budd, un gurú en el mundo de las hojas de estilos, comparte algunas reseñas y enlaces a sitios donde podemos encontrar ayuda a la hora de afrontar un proyecto con esta tecnologí­a.
  11. W3CSchools CSS Tutorial. Página dividida en los diferentes elementos que podemos usar en CSS en la que tenemos varios ejemplos de cada uno de qué forma podemos usarlos.
  12. css Zen Garden. Usar CSS como un jardí­n de tranquilidad está a nuestro alcance gracias a esta web, donde nos muestra ejemplos de usar una misma plantilla HTML con diferentes CSS y ver como puede cambiar radicalmente el aspecto y la estética.
  13. CSS at MaxDesign. En esta página podrás encontrar diferentes tutoriales sobre diferentes conceptos, como Listmatic, para realizar listas de multitud de formas.
  14. CSSeasy.com. De una forma clara y sencilla nos proponen diferentes ejemplos que, tan sólo viendo el código fuente de cada uno, comprobaremos que no es tan difí­cil defenderse un poquito en este mundo del diseño web con CSS.
  15. CSS-Discuss. Comunidad donde se discutirá y compartirá conocimientos sobre CSS. Dispone de una estupenda wiki con multitud de ejemplos.
  16. Web Design from Scratch: CSS. De nuevo otra estupenda página donde empezar, ya que dispone de estupendos tutoriales para principiantes.
  17. CSS-Tricks. Blog donde de una forma periódica se irá colgando interesantes artí­culos sobre CSS, como tutoriales o noticias relacionadas con CSS.
  18. CSS en Delicious. Obviamente uno de los sitios donde no deberí­amos dejar de buscar es en Delicious, en el tag CSS, donde aparecerán muchas páginas guardadas por otros usuarios que contendrán mucha información y ayuda sobre este mundo.
  19. SitePoint CSS Reference. Aunque SitePoint es una página con más contenido, también encontramos una sección con referencias a CSS donde podremos encontrar mucha y útil información.
  20. CSSDog. Desde los más novatos hasta los más avanzados en todo lo relacionado con CSS podrán encontrar aquí­ lo que necesita. Una web muy amplia que nos puede servir de mucha ayuda.

Fuente: Six Revisions.