CSS

Herramientas para diseñadores web


Colorzilla:

Con ColorZilla puedes conseguir una lectura del color de cualquier punto en su navegador, ajustar rápidamente este color y pegarlo en otro programa. Puede ampliar la página que está viendo y medir distancias entre dos puntos cualesquiera de la página. El  sistema de Colorzilla nos permite elegir colores de un grupo de paletas de colores pre-definidos y guardarlos en paletas de colores personales.

Dummy Lipsum:

Dummy Lipsum es un generador automático de textos Lorem ipsum, así cuando estamos maquetando un site, y mientras nuestro cliente no procede a darnos el contenido, podemos usarlo para ver como quedaría el texto.

Pixel Perfect:

Pixel Perfect tiene una opción de opacidad para que pueda ver el código HTML debajo de la composición. Al ser capaz de ver tanto la composición y el HTML que ahora pueden utilizar simultáneamente, mientras que Firebug Pixel Perfect está todavía en acción.

Es una extensión que permite superponer una imagen en cualquier página web, encima de la propia página, de modo que veamos cómo quedaría dentro de nuestro diseño. Por ejemplo, podríamos probar cómo quedaría una banda con una imagen en la cabecera de nuestra web, sin tener que alterar la página, simplemente superponiendo la imagen.

Pero para lo que realmente está pensado Pixel Perfect es para superponer nuestro diseño de web, que podemos haber creado en una imagen con un programa como Photoshop, sobre el diseño creado en HTML y ver cuan parecidos o distintos son el uno del otro. De modo que podamos ajustar hasta el último pixel el diseño de nuestra página.

JS View:

JS View es un addon de lo más interesante, el cual nos permitirá ver todos los CSS y JS que ha cargado la página que estamos viendo, y poder acceder a ellos instantaneamente.

HTTP Live Headers:

Ver los encabezados HTTP de una página durante la navegación.

Multifox:

Multifox es una herramienta que uso bastante, la cual deja acceder a dos cuentas o mas de un mismo sistema, Por ejemplo si tenemos la cuenta de Facebook, GMail, Twitter abierta y queremos abrir otra, es posible con este addon y así no tener que cerrar una cuenta para abrir otra.

ScreenGrab!:

Screengrab nos permite capturar webs en formato de imágen, por secciones, web entera de arriba a abajo (perfecto para capturas de blog, donde la longitud del blog suele ser mayor que una web normal), llevando la imagen directamente a Photoshop o al portapapeles.

Web Developer:

Web developer nos ayuda en muchos casos, desde ver todos los enlaces de una página, activar o desactivar css, lo mismo con js’s,….

Herramientas diseño web | 1.9 MB (Descargado 30 veces)

Share on Twitter

10 Consejos para mejorar tus CSS


Os vamos a enseñar unas cuantas técnicas que usamos nosotros a la hora de maquetar un site, tanto sea web, como blog, foro…

Los puntos que vamos a ver son:

  1. Resetear tu CSS
  2. Tabular bien tus “classes” CSS
  3. Comentar tus “classes”
  4. Usar clases en lugar de ID’s
  5. Ordenar las “classes”
  6. Diferenciar los links de descarga segun contenido
  7. Hacer clicable toda el área alrededor de los links
  8. Clearfix con hacks para IE6 & IE7
  9. Valida tu código a medida que codifiques.
  10. Los hacks son la última solución.

Leer más

Share on Twitter

Formatear una hoja CSS en Dreamweaver


Muchas veces en nuestro desarrollo web tenemos una hoja de estilos extensa y tabulada, conveniente para la etapa de desarrollo. Una vez finalizado el desarrollo decidimos simplificar la hoja de estilos para quitar los espacios para  optimizarlo y que ocupe menos. El problema surge cuando tenemos mas de 5000 lineas de código css y la tarea puede ser engorrosa para transformarlo en una linea para cada estilo. Hoy os vamos a enseñar un peueño “Trick” con Dreamweaver.

Leer más

Share on Twitter

9 Técnicas CSS: sustituir texto por imágenes


La sustitución de imágenes con CSS es una forma de sustituir textos de nuestro sitio por imágenes. Un ejemplo de esta técnica sería poder reemplazar el <h1> de nuestro sitio por nuestro logo sin perder los beneficios en cuestiones SEO.

Leer más

Share on Twitter