daniBlog

DailyColorScheme es un sitio que nos ofrece una nueva paleta de colores todos los días, listas para implementar en cualquier sitio de manera gratuita.

Lo interesante y que se destaca frente a otros serivcios, es la posibilidad de descargar las paletas para agregarlas a diferentes programas como: photoshop, illustrator, css, html, zip, y algunos más.

Por otro lado, cada esquema de colores cuenta con un nombre, que luego puede ser utilizado para realizar búsquedas.

Actualmente este sitio se encuentra en beta (por eso ese subdominio) pero seguramente en unas semanas se lanzará la final.

Enlace: DailyColorScheme, Feeds

Me encuentro en mmcdesign con unos 20 tips (consejos) a tener en cuenta a la hora de desarrollar y/o diseñar un proyecto.

Éstos son:

1. Planning
2. Do it by hand
3. Stylesheets: importing vs linking
4. Smarter gradient backgrounds
5. Commenting
6. Use simple PHP to build sites
7. Set fonts using ems
8. IE Box Model Hack
9. Space saver
10. Test, test and test again
11. Format fundamentals
12. The ‘title’ and ‘alt’ attributes
13. The correct format for pseudo classes
14. Use semantic mark-up
15. Favicons
16. Change capitalisation using CSS
17. Wrapping text around images
18. Universal character sets
19. Print styles
20. Learn from others

Para ver los detalles de cada uno pueden hacerlo aquí (ingles).

Vía: LifeClever

Diseñar, para los que saben, es una tarea fácil; para los que no, bastante complicada y nunca se obtienen resultados presentables. Pero en cualquiera de los dos casos, es necesario tener siempre a mano recursos donde apoyarse y buscar ideas, inspiración, íconos, y muchas otras cosas.

En Vandelay Design han hecho un jugoso listado de 77 recursos que le servirán a cualquier persona que se quiera sentar a diseñar un rato. El listado está dividido en varias categorías, algunas de ellas: herrmientas de color, menúes en CSS gratuitos, fotos para websites, íconos, themes para WP, scripts para validaciones, fuentes, herramientas para la web 2.0, entre muchas otras muy interesantes.

Vía: Vandelay Design (inglés)
Enlace: Traducción por Blogultura

Algo que sin dudas les da muchos dolores de cabeza a los diseñadores, es el gran problema que tiene Internet Explorer 6 con las transparencias de las imágenes en formato PNG. Al parecer el autor de BlackFlash tenía algunos problemas personales con Internet Explorer 6, pero ahora ya encontró una solución.

Los 2 pasos a seguir para eliminar estos problemas son:

• Descargar y subir a nuestro servidor el siguiente scritp: pngfix.js.
• Colocar -dentro de las etiquetas las siguientes líneas:
  

  <!–[ if lt IE 6.] >
  < script defer type="text/javascript" src="pngfix.js" src="pngfix.js"> < /script >
  <!–[endif] >

Nota: El “src” puede variar dependiendo la carpeta a donde subimos el scritp.

Esto no es más que un hack para Internet Explorer en su versión 6; y no afecta para nada en los demás navegadores. ¿Qué le costaría a Microsoft solucionar este problema? Nada, de hecho nosotros con un simple scritp lo resolvemos.

Si estamos cortos de tiempo y tenemos que diseñar alguna que otra tabla utilizando CSS, podemos ahorrarnos mucho trabajo elijiendo una en icant; que ha publicado recientemente una colección de 80+ CSS que se encargan de darles un formado agradable y sofisticado a las tablas queñadamos en el XHTML (siempre y cuando se las usen bien).

La descarga de estas hojas de estilo son totalmente gratuitas, y para previsualizar cada uno de los estilos debemos hacer clic en uno de ellos, para que la tabla donde están estructurados tome su estilo.

Vía: michaelmüller.net

Cuando se comienza un nuevo diseño, ya sea de un sitio, algún banner, o lo que sea, a veces es complicado encontrar colores que combinen entre sí. Si bien existe material teórico que nos puede dar una mano, para los que no conocemos mucho se nos hace un trabajo muy complicado.

Es por eso que desde hace un tiempo estoy utilizando una interesante herramienta onlina llamada Color Schemer.

Para utilizar esta herramienta debemos ingresar -en la barra lateral- el número hexadecimal de un color, y luego hacer clic en “Set HEX”. En un instante obtendremos 15 colores que combinan (o hacen contraste) con el ingresado. Si deseamos podemos aclarar o bien oscurecer la paleta, siempre obteniendo colores que combinarán perfectamente con el ingresado desde un principio.

Como aporte extra, en el blog de los creadores de esta herramienta tenemos regursos para el diseño, como backgrounds, wallpapers, esquemas de colores ya armados, etc.

Enlace: Color Schemer

En los comienzos de uno como diseñador suele buscar templates para tomar ideas, o bien usarlos como base para lo que será el diseño final de su sitio. Por la web hay bastante contenido de este tipo, pero la mayoría son de mala calidad, y no nos terminan sirviendo para nada.

Template world es una empresa de diseño que vende templates de alta calidad. Y ésto no es lo interesante, sino que -según vi en blogandweb- además de sus ventas, tenemos disponible en su web algunos templates (no pocos, más de 40) gratuitos para descargar y utilizar bajo la licencia Creative Commons Attribution 2.5.

Al descargarlo, tendremos unos html, css e imágenes que en conjunto conforman todo el diseño de una página. Parece muy fácil, descargamos y tenemos el diseño; lo complicado de los templates es elegir de entre todos justamente el que le caería bien al sitio que queremos diseñar. Además, seguramente será modificado, y trabajar sobre algo hecho por otro suele llevar bastante tiempo de adaptación.

Además podemos contactarnos con estas personas para que -además del template- nos envíen el fuente (psd) gratuitamente. Lo que seguramente vendrá acompañado de algo de publicidad de sus productos.

Por otro lado, su web está interesante. Tiene una gran multitud de templates para todos los gustos y de variados precios. Los mismos están divididos en categorías como: web 2.0, empresas, autos, juegos, almacenamiento online, entre muchísimas otras.

Para ver y poder descargar estos templates podemos ir aquí.

Los colores que entran por nuestros ojos -ya sea en un cartel que se nos cruza por la calle o bien un sitio web- nos produce reacciones psicológicas que no controlamos, sino que están predefinidas por decirlo de alguna manera.

Entonces, al definir los colores que utilizaremos en nuestros sitios, blogs, o lo que sea, se debe analizar cuidadosamente qué es lo que la web quiere transmitir y a qué usuarios está apuntado.

En webtaller han hablado acerca de esto, comentando que es lo que generará cada color en la persona que los ve:

• Rojo: Despierta las reacciones emocionales más fuertes, tanto positivas como negativas. Sugiere sentimientos de amor, pasión, excitación y fuerza, así como de ira, velocidad y peligro. El rojo también se asocia frecuentemente con las ofertas.
• Azul: Inspira sentimientos de pertenencia y confianza, fiabilidad, calma, paz, tranquilidad, seguridad, fidelidad y dignidad. El azul es, por mucho, el color “favorito” más común, y se asocia frecuentemente con una alta calidad.
• Amarillo: Se lo relaciona frecuentemente con calidez, sol y felicidad. Sin embargo, el amarillo puede ocasionar cansancio visual y por ello debe ser usado en poca cantidad.
• Anaranjado: Crea un sentimiento de alegría, placer y calidez y se lo percibe como vibrante y ambicioso.
• Verde: Dependiendo del matiz puede sugerir naturaleza, salud, frescura, crecimiento, abundancia, dinero y libertad. Es el más relajante para los ojos.
• Violeta: Es el color de la realeza, la espiritualidad, la dignidad, la sofisticación, y se puede percibir como lujoso.
• Rosa: Es blando, dulce y femenino, y puede despertar sentimientos de ser nutrido o mimado.
• Blanco: Se lo ve como puro, inocente, limpio, joven y suave.
• Negro: Habitualmente representa sofisticación, elegancia, autoridad y poder. Se lo puede percibir como seductor, misterioso o serio.
• Gris: Es autoritario, práctico y creativo. El gris oscuro inspira una sensación de solidez y confiabilidad.
• Marrón: Es rústico, sólido, confiable, opulento, efectivo y masculino.
• Dorado: Implica prestigio y dinero, igual que el plateado, aunque este último también se ve como frío y científico.

Si ya antes era complicado definir los colores para una web, ahora lo es más aún. Debemos tener en cuenta que combinen, que hagan contraste algunos con otros, y ahora -para colmo- conocer que reacción queremos en el cliente. Es complicado, pero si tenemos en cuenta todos los factores que se deben tener en cuenta lograremos mejores resultados, y estaremos un paso más adelante de aquellas empresas que no lo tuvieron en cuenta.

Cuando diseñamos una página basada en estilos en cascada (CSS), en ocaciones nos suelen quedar alguna que otra clase o id que agregamos en la hoja de estilo pero nunca utilizamos en el XHTML. O sea, existe redundancia.

Esto nos suele pasar, y encontrar que clase o id es redundante manualmente puede llevar algo de tiempo, e incluso podemos pasar por alto algunas. Pero como sucede con cada cosa de este mundo, tenemos una herramienta que se encarga de verificar la redundancia en CSS: CSS Redundancy Checker, desarrollada por Mike.

Pasos para utilizar esta herramienta:

1. Ingresar la dirección donde se encuentra nuestra hoja de estilos (ejemplo: http://daniblog.com/screen.css).
2. Ingresar la URL de las páginas que utilizan este CSS y queremos verificar.
3. Hacer clic en Check

Una vez terminados estos pasos, obtendremos los Unused CSS Selectors (selectores CSS no usados), de modo que podremos fácilmente depurar nuestro archivo CSS.

Desde el 24 de julio hasta hoy se calcula que se verificaron 6,174 hojas de estilo y 12,665 páginas; lindos números, pero como siempre digo: pueden mejorarse.

Enlace: CSS Redundancy Checker

Si bien la mayoría de los blogs que andan dando vuelta por la red tienen themes prediseñados, siempre podemos encontrar algunos que son creados por sus propios autores (o bien comprados). Por ejemplo GrupoGeek tiene un theme creado por mi (aclaro que lo hice sin mucho tiempo ni conocimientos sobre el tema, asique no es la gran cosa). Pero bueno, por lo menos no es un prediseñado.

Entonces, si desde hace tiempo tenías ganas de crear un theme por tu propia cuenta -o si se te acaba de ocurrir-, a continuación haré referencia a algunos datos encontrados en blogultura que te ayudarán enormemente en la creación de un theme desde cero para WordPress.

• Hay muchos tutoriales que explican como crear desde cero un theme para WordPress, pero el realizado por InfectedFX es el mejorcito; y se divide en 4 partes: Parte I, Parte II, Parte III yParte IV. En sus partes hablan de bastantes cosas muy interesantes que muchos no conocen del mundo WordPress. Está muy bien explicado y lo recomiendo si no tienes idea de por donde comenzar.
• Si ya tienes algo de conocimientos para crear un nuevo theme de WordPress, y quieres enfocarte más en la parte gráfica, te recomendaría leer el nuevo ebook lanzado por Small Potato -de Wp Designer- que consta de tres partes: How to Design a WordPress Theme, How to Slice a WordPress Theme y How to Code a WordPress Theme. Como verás, el idioma de este libro es el inglés; pero es muy sencillo de entender, asique con un poco que conozcas de inglés no tendrás problemas para leerlo.

Asique ahora, a elegir colores, diseñar un poco, y comenzar a pasar las ideas a CSS y XHTML apoyándonos en el material anteriormente citado.