Vamos a echar un vistazo a las paletas de colores de algunas empresas bien conocidas. Lo que es interesante es que muchas de estas gamas de colores se basan en paletas de colores muy monocromáticas con un solo acento de color. Esto puede ser una forma muy efectiva para resaltar elementos. Y como pueden ver, en las páginas de Apple y Adobe, se utilizan colores muy neutros como el gris o el negro como base principal de su gama de colores lo hace que los colores de las imágenes de su producto destaquen.
A continuación vamos a ver alguna de esas paletas.

Paleta de color monocromático azul. La paleta de Facebook tiene un color de base muy popular de color azul y crea una paleta a su alrededor. Casi todos los colores en la página son de un color azul, incluso los grises del fondo tienen algún tinte azul.

Paleta de colores monocromáticos en azul. MySpace utiliza una paleta de color bastante oscuro en sus colores, pero todos se centran en el color azul. El fondo de la mayor parte de la página es de color blanco, que hace que el azul oscuro destaque más.

Una combinación de colores bicromática utilizando dos de 3 colores triádicos – rojo y azul. YouTube se basa en la década de rojo y negro del mismo logotipo para ofrecer una imagen de marca en la página. Pero también hay una gran cantidad de azul en todas partes.

Flickr utiliza colores análogos, rosa y azul en su paleta para el logotipo. El gris es muy neutro y sirve para mostrar tanto el contenido de las páginas como el logotipo.

La paleta de colores de Adobe es bastante llana – gris oscuro y rojo como acentuado. Los grises oscuros son muy neutrales y esta paleta funciona bien para resaltar los productos que tienen sus propios colores.

Apple apuesta por los grises neutros, negros y blancos para destacar la mayor parte de su página. Además, los grises monocromáticos hacen que los colores de los productos de Apple se destaquen aún más.

Microsoft tiene una paleta de azules y las utiliza para acentuar y poner relieve. Se trata de una paleta muy monocromática. Casi no hay blanco en la página, y lo blanco que hay se utiliza para hacer la navegación más fácil de leer.
¿Qué es una paleta de colores Web?
Uso de la paleta de colores del navegador es una opción segura que necesitamos cuando estamos creando una página Web o una imagen Web. Es especialmente importante que sepamos cuáles son las consecuencias de no usarla.
Por ejemplo, podríamos utilizar el color #dddddd para el fondo de una tabla. En el monitor probablemente se vmostraría como un gris claro neutro y agradable. Pero cuando lo viéramos en el monitor de un amigo, podría parecer muy diferente. Dependiendo de cómo interpretase su monitor el color podría parecer gris o podría verse verde o de algún otro color.
Esto se debe a que #dddddd no es un color con explorador seguro. Los colores seguros para el navegador son los 216 colores que se pueden ver en el PC de 8-bits y en los monitores de Macintosh y tienen el mismo aspecto, o casi el mismo. Si utilizamos la paleta de colores seguros para el navegador al menos sabremos que en todas las máquinas se verán iguales.
¿Qué es el tramado?
Cuando un monitor se encuentra con un color que no puede mostrar de forma nativa, trata de igualar de la mejor manera posible. Los monitores muestran elementos como puntos diminutos en la pantalla, y los colores nativos se muestran con todos los puntos del el mismo color. Aparece un color interpolado con algunos puntos como un color, otros puntos como otro color, y así sucesivamente para intentar igualar el color solicitado.
Hoy en día la mayoría de ordenadores vendidos se venden con monitores y tarjetas de video que pueden soportar millones de colores. Sin embargo, en muchos de estos sistemas el valor predeterminado es de 640×480 píxeles en la pantalla y 256 colores. Muchas personas no saben que pueden cambiar esta configuración, y mucho menos saben cómo hacerlo.
Los colores que funcionan bien en la mayoría de los navegadores
Si usas colores los que aparecen en esta página, tu página web se verá igual en los monitores que pueden mostrar 256 colores o más, en las plataformas Macintosh y PC.

Aunque hay cientos de formatos de archivos gráficos existen navegadores web que sólo admiten algunos de ellos. Aquí describiremos los diferentes formatos de archivos gráficos que están disponibles para los diseñadores web y cuándo deben usarse.
Los formatos de archivos gráficos soportados por los navegadores web más populares son Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) y gráficos vectoriales. Algunas de las propiedades de los archivos gráficos son:
Transparencia – esta característica permite que la imagen sea de mayor o menor grado de opacidad, y sólida a totalmente transparente.
Compresión - esta característica permite que la imagen se almacene en un archivo mucho menor mediante el uso de un algoritmo matemático para manejar grupos de píxeles como un solo tema.
Entrelazado – el entrelazado permite que la imagen se cargue en primer lugar de las filas impares y luego volver y sacar las filas pares. Permite al visitante a ver la imagen antes.
Animación - la animación da la apariencia de movimiento por medio de una serie sucesiva de imágenes. Los Gifs animados no requieren un plug-in de navegador y pueden trabajar en casi todos los dispositivos.
Carga progresiva – la carga progresiva es similar a entrelazar ya que sólo carga una parte de la imagen al principio, pero no se basa en filas alternas y permite al usuario ver la imagen más rápidamente.
GIF
Se originó en la década de 1980 y fue adoptado por los diseñadores de web en la década de 1990 como el formato gráfico preferido para páginas web. Los archivos GIF utilizan un algoritmo de compresión que mantiene archivos de pequeño tamaño para una carga rápida.
Se limitan a 256 colores (8 bits) y apoyan la transparencia y los gráficos entrelazados. También es posible crear gráficos animados usando el formato GIF. Todos los navegadores pueden visualizar los archivos GIF.
Ventajas del GIF :
* La mayoría da amplio apoyo de formato gráfico.
* Los diagramas se ven mejor en este formato.
* Soporta la transparencia.
JPEG
Los archivos JPEG son comprimidos con apoyo de “color verdadero” (24 bits) y son el formato preferido para las fotografías en materia de calidad de imagen. JPEG admite un formato progresivo que permite una imagen casi de inmediato con mejora de calidad como el resto de cargas.
A diferencia de un archivo GIF, la compresión de archivos JPEG puede ser controlada por el diseñador, que permite diferentes niveles de calidad de imagen y tamaño de archivo.
Ventajas JPEG:
* Ración media de compresión de grandes velocidades de descarga.
* Produce excelente calidad de fotografías y dibujos complejos.
* Soporta 24-bit de color.
PNG
Es un formato bastante reciente que se presentó como una alternativa a los archivos GIF. PNG admite hasta 24 bits de color, con transparencia y entrelazado puede contener una descripción breve texto de contenido de la imagen para el uso de motores de búsqueda.
Desafortunadamente, la mayoría de los navegadores no soportan PNG y los que lo apoyan, no son compatibles con todas sus características todavía. Pero eso cambiará en el futuro.
Ventajas PNG:
* Supera la limitación de 8-bits de color del GIF.
* Permite la descripción de texto de la imagen para el uso de motores de búsqueda.
* Soporta la transparencia.
Gráficos Vectoriales
La mayoría de los gráficos web son imágenes de mapa de bits o mapas de bits, que consisten en una rejilla de píxeles de colores. Dibujo e ilustraciones deben ser creadas como gráficos de vectores que consisten en descripciones matemáticas de cada elemento que compone las líneas de las formas y el color de la imagen. Los gráficos vectoriales se crean mediante la elaboración de programas tales como Adobe Illustrator y Macromedia Freehand y son la elección de artistas gráficos para crear dibujos. Los gráficos vectoriales se debe convertir a GIF, JPEG o PNG para ser utilizados en una página web.
¿Qué formato debemos utilizar?
Podemos elegir entre el formato GIF o JPEG para la mayoría de usos. Pero, dado que el tamaño de archivo de un archivo GIF es generalmente mas pequeño que el tamaño de archivo de un archivo JPEG, la mayoría de los diseñadores utilizan el formato GIF para los fondos, cajas, marcos y cualquier otro elemento gráfico.
La mayoría de los diseñadores seleccionan el formato JPEG para las fotografías e ilustraciones en la compresión para no comprometer la calidad visual de la imagen.
GIF y JPEG son un apoyo universal y la elección del diseñador es determinada para el elemento gráfico que utilice.
Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.
Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.
¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.
¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.
Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.
Veamos lo que significa cortar eficientemente:
Técnicas avanzadas
Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash. El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional y que carga rápidamente.
Regreso al futuro
Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.
Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.
Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble pero con los logos de navegadores
web.
El juego usa jQuery 1.3.2 y con una gran cantidad de archivos JS se controla la física de los rebotes, el movimiento del lanzador y demás efectos del juego.
Puedes probarlo aquí
Gracias a un algoritmo que produce los resultados más relevantes para cualquier consulta, Google se ha convertido, indiscutiblemente, el mejor motor de búsqueda en Internet. En el último recuento, Google ha indexado más de 4 millones de páginas y se ocupa de unos 200 millones de búsquedas al día! Un grupo de 100 mil servidores se utilizan para almacenar, y arrojar a los resultados de la consulta con la velocidad de la luz que está tan acostumbrados a ver.
Si bien, Google está constantemente agregando nuevas características de gran utilidad, la mayoría de nosotros, lamentablemente, no utilizamos todas las capacidades de ese motor de búsqueda. Los siguientes consejos harán que su navegación en Internet sea mas eficaz.
Seleccione palabras de búsqueda más específicas
Google devuelve páginas web que contienen todas las palabras que usted consulta. Si desea ver las páginas más relevantes en la primera página de su resultado de búsqueda, debe ser muy específico con la elección de las mismas. Por ejemplo: si quiere investigar sobre el ex jugador de baloncesto Juan Antonio Corbalán, deberá iniciar la búsqueda con Juan Antonio Corbalán no como ex jugador de baloncesto. Aún mejor si busca las palabras: ex jugador de baloncesto Juan Antonio Corbalán. Porque sólo la palabra Juan Antonio Corbalán mostrará las páginas web sobre “Juan Antonio Corbalán”. Las refinerías de la consulta en Google significan añadir más palabras específicas para su búsqueda inicial.
Establece una nueva característica
¿Qué pasa si usted está buscando un par de pantalones vaqueros de diseño de Valentino, pero no puede recordar el nombre del diseñador? Consulta sobre los pantalones vaqueros de diseño italiano que pueden traer el resultado, sin embargo, hay una mejor herramienta que Google tiene llamada “Conjuntos”.
Llene los nombres de algunos diseñadores que recuerde en la forma determinada, como Levis, Wrangler, Versace y haga clic en cualquiera de los dos botones y ¡voilá! Obtendrá una lista de los nombres de diseñadores y probablemente, el de Valentino esté allí.
Calculadora
El otro día, estaba sentada en la oficina de un amigo que necesitaba el cálculo de algunos productos alimenticios básicos y buscaba su calculadora en el escritorio. Muy a su pesar no logró encontrarla y comenzó a buscar en sus programas de Microsoft una calculadora. Me di cuenta que estaba en línea y que el navegador estaba abierto. Yo, educadamente, le pregunté si el sabía que Google podría calcular las expresiones matemáticas más comunes. Me dijo que no muy sorprendido! Pues si, Google es capaz incluso de efectuar unidades de conversión! ¡Pruébelo!
Definición
Si está buscando la definición de una palabra o una frase, Google es el mejor lugar para hacerlo. En el cuadro de búsqueda de Google, escriba “define: la palabra o la frase” sin las comillas y haga clic en botón de búsqueda. Si hay una definición para el término de búsqueda, sin duda, la encontrará.
Sinónimos
Usted puede pensar que los motores de búsqueda son demasiado tontos para mostrar los resultados de las consultas de los sinónimos. No es así! Al menos, en el caso de Google! Si utiliza tilde “~” delante de una palabra clave en el término de búsqueda, Google aportará resultados sobre los sinónimos de esa palabra también.
Cómo buscar en un sitio web
Otra interesante característica del motor de búsqueda de Google es que permite que usted haga su consulta dentro de un sitio web específico. En primer lugar, escribir el término de búsqueda en el cuadro de búsqueda de Google y, a continuación, escriba “site: el sitio web o nombre de dominio”. Por ejemplo: si usted busca la palabra “Microsoft” en el sitio web www.micromedia.com le escribe a: sitio de Microsoft: micromedia.com.
Comprobar los vínculos de su sitio web
Si usted tiene un sitio web, el motor de búsqueda de Google también tiene una característica que le muestra las páginas web que enlazan con la suya. En el cuadro de búsqueda, escriba: Enlace: su dirección.
Otros consejos importantes para recordar:
* No hay necesidad de recurrir a la “Y”. Google siempre se refiere a todas las palabras en el término de búsqueda usando el operador booleano “y”. ( O mejor dicho como unir una palabra con otra)
* Sin embargo, si usted desea hacer su consulta para dos palabras – una u otra – puede usar “O”. Tiene que escribir “o” en mayúsculas para darle valor booleano.
* Google no es sensible a mayúsculas. Usted puede escribir los términos de búsqueda ya sea en mayúsculas o en minúsculas. Incluso las puede mezclar entre ellas.
* Google omite la mayoría de las palabras muy comunes, como el, en, etc Para buscar una palabra con mas fuerza, deberá hacer uso del signo más (+) delante de esa palabra. De la misma manera, se puede excluir una palabra de la búsqueda poniendo el signo menos (-) delante de ella.
* Si desea realizar una búsqueda exacta de una frase o expresión, deberá poner las palabras entre comillas. De esta forma, en su resultado de búsqueda sólo se mostrarán las páginas en las que la expresión exacta fue encontrada. Con el fin de buscar la frase: El Anillo de Moebius, escribirá “El Anillo de Moebius” en el cuadro de búsqueda.
También sugiero descargarse la barra Google. Aparte de la caja de búsqueda y su capacidad para bloquear los pop-ups, la barra Google también muestra el pagerank de la página web que esté visitando. El PageRank es un sistema de evaluación de páginas web desarrollado por Google y utilizados como base en el motor de búsqueda del algoritmo. La barra de herramientas también incluye la función de la capacidad de llenar formularios online de la información almacenada automáticamente. También puede mantener su diario o blog desde la barra de herramientas.
Para las delicias de gran parte de los usuarios de la red, Google, con su ambiciosa misión de organizar información de todo el mundo y hacerla universalmente accesible y útil, hasta el momento está haciendo un gran trabajo como motor de búsqueda muy útil en sus características y servicios. Sólo podemos esperar que el flujo de ideas innovadoras de Google no disminuyan en el futuro.
En este artículo se pretende cubrir como podemos generar las hojas de estilo en su forma más eficiente.
1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.
Sugerencia 1: Comentario de su hoja de estilo
Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.
1. /**** Cabecera ****/
2. /**** Contenido ****/
El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.
1. ! Importante / ** Hack para hacer la navegación del IE correcta ** /
Sugerencia 2: Organice sus estilos alfabéticamente.
Eche un vistazo al siguiente ejemplo.
1 .#header {
2. width:200px;
3. margin:0 auto;
4. height: 80px;
5. background:url(../images/header.png) no-repeat;
6. padding:1px 0;
7. }
Ahora compárelo con la siguiente.
1. #header {
2. background:url(../images/header.png) no-repeat;
3. height: 80px;
4. margin:0 auto;
5. padding:1px 0;
6. width:200px;
7. }
Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.
Sugerencia 3: Ficha de elementos anidados
Esto es algo similar a lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a { }
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
Ahora compárelo con el siguiente.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a {}
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.
Cuando usted visita un sitio web como Google, Youtube o Facebook, es posible que observe que hay un pequeño icono situado a la izquierda de la barra de direcciones. Esto se conoce como un favicon.
Pasos
1. Crear una imagen que es 16×16 píxeles de tamaño. Debe ser una imagen sencilla, para que sea inmediatamente reconocible.
2. Convertir la imagen a un archivo favicon.ico. Debe ser exactamente esto, o el navegador no lo reconoce. Una manera fácil de hacerlo es utilizar un Generador online, hay muchos de ellos.
3. Subir el archivo generado a su sitio web.
4. Agregue el siguiente código a su sitio web HTML. Usted lo debe poner en la sección <head> del código, y asegúrese de que la ruta hacia el icono es la correcta, en relación con la página web.
Código:
* <link Rel=”shortcut icon” href=”/favicon.ico” />
5. Actualizar la página y comprobar que visualizamos el icono.
Cuando estamos trabajando en un nuevo diseño, es necesario determinar cuál es la parte más importante de la página. El desafío es pedir a los clientes cual es la parte mas importante, aún a sabiendas que te contestarán casi siempre que ” todo es importante”. Si intentamos destacar todo el contenido de la página podemos acabar con una página que tendrá muy poco atractivo.
Con el fin de poner un poco de orden al caos que nos puede ocasionar, es necesario asignar una jerarquía de los elementos en el diseño. Una cosa será la más importante, seguido por el segundo elemento más importante (s) y, a continuación, la tercera, y así sucesivamente. Esto tiene dos propósitos:
1. La jerarquía le indica al usuario la forma en que la página está destinada a ser vista. Sus ojos se dirigen al más importante elemento de la página, seguido por el segundo, y así sucesivamente a través de la jerarquía.
2. La jerarquía proporciona atención a los elementos importantes de la página sin mezclar todo en una aburrida confusión.
Técnicas de prestación de atención y una jerarquía visual en las páginas Web
Para eso utilizaremos las hojas de estilo. Si desea que sus páginas Web esten bien diseñadas y tengan una buena jerarquía, deben tener los títulos en orden: H1, H2, H3, H4, H5, H6 y después. Si el H1 no le parece lo bastante atractivo pruebe a darle estilo para que se vea mejor. Mediante el uso de estas etiquetas, se asegurará de que su jerarquía se mantiene incluso cuando la página es vista por los navegadores no visuales.
<h1> el elemento más importante </ h1>
<h2> La 2 ª más importante </ h2>
<h3> La 3 ª </ h3>
<h4> El 4 </ h4>
<h5> La 5 ª </ h5>
<h6> El 6 </ h6>
El tamaño de la fuente es una manera fácil de ofrecer jerarquía visual y énfasis a sus páginas. Cuanto más grande es el tamaño de la fuente de un elemento, más importante parecerá.
Puede cambiar el tamaño de la fuente de cualquier texto en su página web, es la mejor forma de dar estilo a sus titulares y en el párrafo de texto al tamaño que desee. He aquí cómo podemos dar estilos a esos titulares o párrafos en su Web:
p (font-size: 1em;)
h1 (font-size: 2.5em;)
h2 (font-size: 2EM;)
h3 (font-size: 1.5em;)
h4 (font-size: 1em;)
h5 (font-size: .8 em;)
h6 (font-size: .7 em;)
El color es otra gran manera de dar énfasis. Utilizaremos contraste de colores con moderación. La clave para usar el color que nos dará énfasis es usarlo juiciosamente.
Puede adjuntar el color a los titulares o los bloques de texto. Esto solamente cambia la CSS h2 etiquetas que ha dado la categoría “importante” y los párrafos con la clase “calltoaction”:
h2.important (color: red;)
p.calltoaction (background-color: amarillo;)
Mozilla Europe celebrará, con motivo de la publicación de la versión final de Firefox 3.5, una Launch Party el 13 de julio de 2009 a las 20h en el Teatro Lara de Madrid (mapa).
El evento contará con invitados especiales, como Pascal Chevrel, secretario general de Mozilla Europe, quien nos hablará de las nuevas características del navegador estrella de Mozilla.

Aunque el evento es gratuito, es necesario confirmar tu asistencia enviando un formulario disponible en la web de Mozilla-Hispano.