10 consejos para elaborar mejor tus CSS

 13/11/2009

Web Design Ledger nos recomienda seguir 10 pasos prácticos a la hora de realizar nuestras hojas de estilo. Siguiendo estos consejos, nuestra capa de diseño presentará mejor aspecto y nos resultará más fácil localizar elementos:

  1. Empieza siempre reseteando todos los valores (reset.css).
  2. Realiza sangrados en el código, separando las clases y los identificadores de sus respectivos valores.
  3. Los comentarios son tu mejor amigo.
  4. Una regla = una línea / Varias reglas = varias líneas.
  5. Escribe código consistente: si empiezas desarrollando el código de una forma, no la cambies a mitad del documento.
  6. Separa tus “hacks” y elementos condicionales.
  7. Aprende a utilizar los “shorthands” o abreviaturas.
  8. Crea una tabla de contenidos antes de iniciar el documento CSS (como forma de pequeño índice).
  9. Utiliza nombres sencillos, tanto para las clases como para los identificadores, siempre serán más fáciles de encontrar.
  10. Ordena tu código alfabéticamente.

Si estos consejos te han sido de ayuda, es hora de que leas atentamente los principios o reglas recomendadas por los mejores maestros del diseño web, puede que te resulten interesantes.

»Enlace: 10 Tips for Writing Better CSS


Resaltar el foco de un formulario con CSS

 05/10/2009

La usabilidad en los formularios de contacto web es una de las cosas que muchas veces no tenemos en cuenta y, sin embargo, es más importante de lo que creemos. Una de las directrices que debemos contemplar será la focalización de elementos, es decir, señalar de alguna forma el campo que el usuario está rellenando en ese momento.

Podemos conseguir esto de una forma muy sencilla, simplemente deberemos utilizar la pseudo-clase :focus del elemento input. Sólo son necesarias un par de líneas para aplicar este efecto y dotar a nuestro diseño de la funcionalidad deseada.

input:focus {
   border:1px solid #666;
   background:#FFFFCC;
}

bitelemental-foco-input-formulario

Nota: Se ha comprobado el funcionamiento en Firefox, Chrome y Opera. Por desgracia, Internet Explorer (7 e inferiores) no soportan esta característica.

» Ejemplo resaltar el foco de un formulario con CSS


Integración de Wordpress a un sitio web

 02/10/2009

Interesante artículo (visto en MoshuBlog) que quiero compartir con todos vosotros y que me salvó la vida en más de una ocasión. En él se explica con detalle cómo integrar las entradas de un blog de Wordpress a cualquier diseño web.

Dicha integración se especifica utilizando un escenario básico: tenemos una web realizada con PHP (alojado en www.ejemplo.com/index.php) con nuestra CSS y nuestro objetivo es referenciar las entradas de un blog que tenemos en un directorio aparte (sea www.ejemplo.com/blog) a través de una opción del menú principal (por ejemplo, Noticias). El resultado queremos que se visualice en la raíz principal del sitio (www.ejemplo.com/noticias.php).

Espero que os sea de ayuda.

» Enlace: Integrating WP in an existing site


Aptana Studio, completo entorno de desarrollo web

 30/09/2009

bitelemental-logo-aptana-studioAptana Studio es, para mí, uno de los mejores entornos de diseño de aplicaciones web que he tenido el gusto de probar. Combina toda una serie de potentes herramientas de edición de HTML, CSS y JavaScript, junto con miles de plugins adicionales creados por la comunidad. Sus características principales son las siguientes:

  • Es una herramienta multi-plataforma.
  • De código abierto (opensource) y de uso libre.
  • Se puede instalar como aplicación independiente o como plugin de Eclipse.
  • Soporta las bibliotecas Javascript y Ajax (jQuery, Prototype, Mootools, YUI, Dojo…)  -esta opción me encanta-
  • Permite la adición de plugins para PHP, Python o Ruby on Rails.
  • Posibilidad de crear aplicaciones de escritorio con el plugin de Adobe AIR.
  • Multi-vistas previas de los diferentes navegadores.
  • Contiene herramientas adicionales para el tratamiento de bases de datos SQL.
  • Depurador Javascript.
  • …

Toda una serie de opciones que hacen de este entorno uno de los más completos dentro del mundo del diseño. ¿Qué entorno de desarrollo utilizáis o cuál es vuestra aplicación preferida para realizar trabajos de diseño?

»Descargar: Aptana Studio


16 sitios de estilo “collage”

 16/06/2009

Parece ser que está de moda el estilo grunge en sitios web. Diseños llamativos, innovadores, modernos (pero a la vez retro)… Sin embargo, empieza a surgir un nuevo modelo de diseño utilizando tendencias grunge. Me refiero a los sitios realizados como si se trataran de un collage de fotografías o porciones de documentos.

Hoy quiero compartir con vosotros 16 sitios que han utilizado esta técnica y que, sinceramente, merecen mi más sincera enhorabuena.

dawghouse-design-studio-bitelemental

Enlace: Web Design: Collage Sites


Tiago Hoisel

 08/06/2009

Gracias a nuestra web amiga Moviendo el Mundo he descubierto a este gran diseñador. Tiago Hoisel (Salvador, 1984) trabaja actualmente como diseñador digital, en la elaboración de caricaturas e ilustraciones de publicidad.

Os aconsejo que visitéis su blog, existen publicaciones realmente sorpredentes.

wolverine-tiago-hoisel-bitelemental

stallone-tiago-hoisel-bitelemental

willsmith-tiago-hoisel-bitelemental

Enlace: Ilustraciones de Tiago Hoisel

Via: Caricaturas de Tiago Hoisel


Colección de 20 wallpapers minimalistas

 29/05/2009

Soy amante del minimalismo. Me gusta lo simple, no solo en lo respectivo al diseño sino también en los campos de la programación y la personalización. Y de este último tema voy a hablar. Best Design Options ha realizado un recopilación de 20 fondos de escritorio panorámicos de estilo minimalista. Y es que un diseño no tiene que estar cargado de efectos para ser bueno ya que, muchas veces, la simplicidad impera sobre la complejidad.

wallpaper-minimalista-bitelemental

Enlace: 20 Widescreen Wallpapers for the Minimalists


FreeVectors.net: extensa recopilación de imágenes vectoriales

 26/05/2009

FreeVectors es un sitio que se caracteriza por contener un gran banco de imágenes en formato vectorial (ai y eps). Puedes buscar directamente aquello que necesites utilizando el formulario de búsqueda o navegevando a través de todas las páginas. También tienes la opción de subir  tus paquetes vectoriales para compartir con el resto de usuarios. Todos los diseños son para uso personal y algunos de ellos están limitados al uso comercial.

Creo que lo que faltaría sería tener categorizados todos los recursos, de forma que fuera más fácil la localización de elementos, pero a pesar de ello, la web cumple bien su cometido.

freevectorsnet-bitelemental

Enlace: FreeVectors.net


LogoPond: inspiración para la creación de logotipos

 20/05/2009

La elaboración de una identidad corporativa no es nada fácil y más si tu tarea es empezarla desde cero. Para poder conseguir un diseño bonito, elegante y que lo diga todo del negocio tienes que partir de una idea. Pero el problema viene cuando no conseguimos visualizar alguna.

Llegados a este punto es cuando surge la necesidad de tener a mano una amplia gama de diseños en los que poder inspirarnos y empezar esa generación de ideas. LogoPond es una página en la que tenemos una extensa lista de identidades con las que podremos recolectar información para adaptarla a nuestros logotipos. Aparte de la inspiración, también es un sitio en el que podremos opinar acerca de los logotipos existentes, de forma que el autor sepa cuál es nuestra visión.

logopond-identity-inspiration-bitelemental

Y si necesitas ayuda para crear un logo también interesaría que leyeras el artículo de Nerv en donde se exponen las 45 reglas para crear un diseño de logo genial.

¿Conoces otros sitios que puedan inspirarnos a la hora de diseñar un logotipo corporativo? Creo que sería interesante que lo comentaras y nos ayudaras en esta laboriosa tarea.


Recursos para el Webmaster (XII): 35 sitios para descargar brushes de Photoshop

 18/05/2009

En Best Design Options nos facilitan las mejores páginas y blogs en los que podemos encontrar pinceles  gratis de todos los estilos y de gran calidad.

Los que nos dedicamos al mundo del diseño lo sabemos: los brushes de Photoshop facilitan mucho las tareas y convierten algunos trabajos en  verdaderas obras maestras. Así que si estás interesado en conseguir algún pincel en especial creo que deberías echar un vistazo a algunas de las 35 páginas que se recomiendan.

photoshop-brushes-bitelemental

Enlace: Top 35 Sites and Blogs Where You Can Download Quality Free Photoshop Brushes


Este blog funciona gracias a WordPress con el theme GimpStyle
© bitelemental. Todos los derechos reservados.