El número de usuarios de Internet que utilizan dispositivos móviles para navegar crece día a día, pero la gran mayoría de sitios aún no están adaptados.

El futuro de la navegación web móvil es algo inminente y para lo que deberiamos estar preparados porque de lo contrario iremos contracorriente, con esto se tiene que decir que no es necesario crear una específica versión de tu web para el móvil sino simplemente asegurarte de que el contenido más relevante pueda ser encontrado en un dispositivo móvil.

El tema está en que crear una buena accesibilidad para los usuarios provenientes de dispositivos móviles es más fácil de lo que piensas

Si nos vamos a decidir a adaptar nuestra web a los nuevos tiempos tenemos que tener una cosa clara... deberemos probar nuestro diseño en muchas ocasiones debido a la gran diversidad de configuraciones con las que nos podemos encontrar, es muy fácil decirlo pero un poco dificil llevarlo a cabo teniendo en cuenta que puede haber unos 40 navegadores y 160 dispositivos que utilizan configuraciones distintas, por lo tanto la solución que os propongo es probarlo en el mayor número posible así te asegurarás una compatibilidad bastante alta.

En esta direccion podemos encontrar una lista de formulas para convertir entre los diferentes espacios de color, RGB, XYZ, HSL, etc.

Para la correcta compresión de estas fórmulas debemos tener claro cada uno de los modelos de color.

Esta lista de funciones las podemos aplicar a cualquier aplicación que precise de operaciones para el cálculo y conversión de color, todas las funciones están escritas en un "lenguaje de programación neutral" fácil de transladar a cualquier lenguaje de programación (C, Java, Basic, Pascal, PHP, Perl etc.).

Conversión de colores

RGB: (del inglés Red, Green, Blue; "rojo, verde, azul") es un modelo qye hece referencia a la composición de un color dependiendo de la intensidad de los colores primarios. Se asigna un valor a cada uno de los colores primarios frecuentemente se mide con valores que van del 0 al 255.

CMYK: (acrónimo de Cyan, Magenta, Yellow y Key) este modelo se basa en la mezcla de los colores Cian, Magenta, Amarillo y Negro es muy utilizado para la impresión a color.

Modelo de color para HTML; utiliza también los colores primarios, pero estos colores primarios , en HTML, están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: #RRGGBB = #RRVVAA

Como hemos comentado antes en esta direccion dispondremos de las fórmulas necesarias para cualquier tipo de conversión de color.

Si necesitaramos integrar un selector de color en nuestra página mi recomendación es esta (Color Picker) | ver Demo.

CSS Color Generator

Mikko Koppanen publicó hace unos meses el código de una interesante utilidad (CSS Color Generator) en su blog.

Este código / utilidad será realmente interesante para aquellos que carecemos del sentido del gusto para crear hojas de estilos de la nada.

Con esta utilidad podemos crear una pequeña paleta de colores partiendo de una imagen dada (un logotipo por ejemplo sería un buen comienzo) | Código de la utilidad

Escribo esta entrada gracias a que hace unos pocos días mi amigo y gran diseñador Juanpol me explico un buen puñado de cosas acerca de las gráficos vectoriales y me vectorizó el logo de TuFunción.

Los gráficos vectoriales como cabe esperar se construyen a partir de vectores que a su vez están definidos por una serie de puntos que están unidos entre sí.

Los principales elementos de un vector son las curvas Béizer (un sistema que se desarrolló hacia los años 1960 y que fácilmente podría ser objeto de otra entrada...).

Estas curvas dan mucha versatibilidad a la hora de dibujar los vectores por el gran número de posibildades que ofrecen y las convierten en la manera ideal de trabajar cuando se trata de diseño gráfico.

Del mismo modo y como ha sido en el caso del logo de TuFunción sirven para trabajar con textos ya que se pueden modificar y deformar sin límites.

Una de las mayores ventajas del uso de formatos vectoriales es que la resolución de las mismas es infinita y toda imagen vectorial se puede escalar sin limite (principal inconveniente de las imágenes rasterizadas).

Esta es una interesante e inútil web en la cual podemos convertir cualquier imagen a código HTML.

La verdad es que hay que estar aburrido para hacer una aplicación que convierta imágenes a código HTML, el funcionamiento es sencillo se cre una tabla de 1x1 píxeles por cada pixel de una imagen asignando a la tabla el color del pixel convertido.

Obviamente se trata de algo curioso pero nada útil... si tenemos en cuenta que una imagen de un tamaño de 3KB al convertirla a HTML nos quedará en 274KB.

Prueba IMG2HTML, este es el resultado por ejemplo del logo de TuFunción en HTML (Ver Código Fuente).

Genial este video que veo en Microsiervos:

La parte más complicada del diseño de un interfaz de usuario es conseguir un interfaz que se atractivo y útil para la gran mayoria de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle una interfaz con una combinación de colores adecuadas que se integre en nuestra interfaz y utilizar gráficos que no desentonen con la combinacion de colores escogida.

Debemos tener en cuenta que el usuario lo primero que percibirá serán los colores antes que la tipografía, botones o fotografías que estén en nuestra página, por eso debemos ser especialmente cuidadosos con la elección de la paleta de colores que será la base de todos los elementos de nuestra página.

Por eso para hacer una buena elección de color podemos utilizar esta web en la que disponemos de un gran número de paletas de colores para usar.

A menudo es desconocida la existencia de estos programas que se utilizan para editar hojas de estilo en cascada y ofrecen gran ayuda al diseñador, especialmente recomendados a aquellos más inexpertos.

De todos es sabido que para trabajar con las Hojas de Estilo (CSS) no es necesario disponer de ningún software adicional, y que nos sería suficiento contar con un editor de texto cómo puede ser el Bloc de Notas o el Ultra Edit pero sin embargo al igual que existen editores HTML que nos ayudan a crear páginas web dinámicas existen del mismo modo programas que nos ayudan a crear hojas de estilo.

Esta es una buena lista de programas gratuitos que nos ayudan a editar nuestras hojas de estilo:

1. CSS Tab Designer
2. Balthisar Cascade CSS Editor
3. CSS Stylesheet Editor
4. EclipseStyle
5. BHead - Meta Tags & CSS Generator
6. Redbox13 CSS-editor
7. StyleSpread
8. <oXygen/> CSS Editor
9. CSSEdit
10. CSSED
11. CSS Editor for Eclipse
12. JustStyle CSS Editor
13. Style Assistant

Este es el mismo título utilizado en YellowJug para describir una entrada que explica las funciones de esta palabra clave de las CSS.

!important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la última:

#main {
width:600px;
width:800px;
}

Por lo tanto en este ejemplo el navegador asignará 800 píxeles.

La declaración !important puede ser usada para dar prioridad a diferentes parámetros:

#main {
width:600px !important;
width:800px;
}

Ahora en este ejemplo se aplicará un ancho de 600 píxeles.

Ya se puede probar Google Experimental Search entre las que se encuentran estas nuevas "ideas":

• Timeline and map views
• Keyboard shortcuts
• Left-hand search navigation
• Right-hand contextual search navigation

Timeline and map views

Probablemente la idea más interesante como su propio nombre indica nos permite visualizar resultados como línea de tiempo o impresos en mapas.

Ejemplo 1
Ejemplo 2