Tutorial

La ‘paleta Web’ es un conjunto de 216 colores que cada administrador de web debe conocer y utilizar para que los visitantes puedan ver las páginas como han sido diseñadas.

¿Por qué 216 colores?

¡Si se pregunta por qué esta cantidad de colores es importante, es probablemente porque tiene la fortuna de tener una pantalla que puede visualizar miles o millones de colores! Pero considere que algunos internautas en Internet tienen una capacidad de visualización limitada a 256 colores

Esto puede ser entonces un problema. En otras palabras, ¿cómo asegurarse que los colores elegidos aparecerán correctamente en las pantallas de la mayor parte posible de internautas? Netscape ofrece dos soluciones que todos los otros navegadores han aceptado:

  • Mezcla de colores

    Cuando algunos colores no están disponibles para un navegador, porque sólo dispone de 256 colores, éste intenta “crearlos” mezclando pixeles de colores. El resultado no es el más estético, pero ofrece una sustitución aproximada de un color no disponible.



    Figura 1: A la izquierda, el botón inicial, y a la derecha, el mismo botón después de la mezcla de colores en un navegador limitado a una visualización con 256 colores.

  • Una paleta de 216 colores

    Estos 216 colores aparecen de manera similar cualquiera que se el navegador (Netscape, Internet Explorer, etc.) o el sistema operativo (Windows, Mac, Unix, etc.).

Mediante los 216 colores de la paleta Web, se evita el proceso de mezcla de colores dado que todos los navegadores contienen esta paleta.

Optimización de la paleta ¿Por qué 216 colores y no 256? Porque la interfaz del sistema operativo utiliza algunos de los 256 colores y éstos no están entonces disponibles para el navegador.

¿Cuándo utilizar la paleta Web?

Para algunas imágenes, se requiere utilizar los colores de la paleta Web. Se aplica a:

  • Imágenes con tonos continuos.

    Este es el caso de la mayoría de los botones, barras de navegación, etc. Estas imágenes aparecerán con colores de mezcla en todas las máquinas de los usuarios que utilizan una configuración de 256 colores.
  • El texto y el fondo de la página.

    Para estos elementos, no hay riesgo de mezcla de colores incluso si se utiliza un color que no sea un color Web seguro. Pero el navegador seguirá utilizando el color más cercano de la paleta Web y se puede perder la armonía de colores elegida

Un aspecto del problema de color Web seguro concierne las imágenes con una gran cantidad de colores como las fotografías. Como generalmente estas imágenes incluyen más de 256 colores, el proceso de mezcla de colores realizado por un navegador que no visualice suficientes colores es inevitable.

Acceso a la paleta Web

La mayoría de los softwares de creación de páginas Web y de los editores HTML (como Dreamweaver, FrontPage, etc.), o de software de edición de imágenes (como Fireworks, Flash, ImageReady, Photoshop, etc.) incluyen herramientas que facilitan la utilización de los colores Web.

Así, ImageReady proporciona una paleta que sólo incluye colores de la paleta Web, y Fireworks tiene una opción de paleta Web que puede selecionarse en el menú de paleta.



Figura 2: La mayoría de los editores HTML y de las herramientas gráficas incluyen la paleta Web.

Guardar en el formato correcto Al crear una imagen basada en los colores Web, guárdela en formato GIF dado que el formato JPEG no garantiza los colores resultantes. Además, el formato GIF permite obtener un archivo más pequeño si una imagen incluye tonos continuos.

En Dreamweaver, también se visualiza la paleta Web cuando se selecciona el texto de una página o el color del fondo.



Figura 3: Dreamweaver proporciona los colores Web predeterminados.

Si se prefiere la codificación directa HTML, se necesita conocer los valores hexadecimales respectivos de los colores Web. Como cada uno de éstos consta de seis dígitos, recuerde la siguiente regla: Los colores Web siempre constan de tres pares de dígitos idénticos, todos múltiplos de 3, (es decir: 0, 3, 6, 9, C, F).

Así, #33FFCC es un color Web mientras que #33F690 no lo es.

Un sitio consagrado a los colores Web

El sitio de Robert Stein, Visibone, está consagrado enteramente a los colores Web. En él se encontrarán:

  • Los 216 colores Web dispuestos en una rueda de colores más fácil de utilizar que el diagrama rectangular usual que presenta el valor hexadecimal de cada color.
  • Un conjunto de paletas Web listo para ser descargado gratuitamente y adaptado a los diferentes programas: ImageReady, Photoshop, The Gimp, Fireworks, HomeSite, Illustrator y Paint Shop Pro.
25 diciembre, 2014
dreamweaver

Paleta de Colores Web

La ‘paleta Web’ es un conjunto de 216 colores que cada administrador de web debe conocer y utilizar para que los visitantes puedan ver las páginas […]
25 diciembre, 2014
dreamweaver

Ventana PopUp con DreamWeaver

Abrir un Pop-Up utilizando DreamWeaver es una tarea muy sencilla. Un PopUp es una nueva ventana que aparece aparte de nuestra web con la peculiaridad de […]
25 diciembre, 2014
dreamweaver

Comprobar Ortografía en DreamWeaver

En DreamWeaver es normal que se redacten textos para los contenidos de una página web y como es normal, se suelen cometer errores de ortografía que […]
25 diciembre, 2014
dreamweaver

Novedades de DreamWeaver 8

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior, Dreamweaver MX 2004. Integración de RSS: con Dreamweaver 8 podrás integrar entradas […]
25 diciembre, 2014
dreamweaver

Includes PHP en DreamWeaver

En una página web hay porciones que siempre se repiten, sobre todo la cabecera y el pie. El problema llega cuando ya tenemos nuestra página hecha, […]
25 diciembre, 2014
dreamweaver

Formatos de imagenes web

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden […]
25 diciembre, 2014
dreamweaver

Calcular el Peso y el Tiempo de Carga de una Web

Aunque DreamWeaver nos indica automáticamente el peso y el tiempo de carga de la página web si miramos abajo a la derecha, en la barra de […]
25 diciembre, 2014
dreamweaver

Regla Horizontal en DreamWeaver

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Una regla horizontal no es más que una línea […]
25 diciembre, 2014
dreamweaver

Resolución de Pantalla

Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso. Las aplicaciones encargadas de presentar las […]
25 diciembre, 2014
dreamweaver

Navegador de etiquetas en DreamWeaver MX 2004

En Dreamweaver MX 2004 desapareció el panel inspector de etiquetas, pasando el nombre al panel donde se muestran los paneles de comportamientos, CSS relevante y atributos, […]
25 diciembre, 2014
dreamweaver

Poner una imagen de fondo en DreamWeaver

Poner imágenes de fondo en DreamWeaver es una tarea muy sencilla, tan sólo tendremos que ir a Modificar > Propiedades de la página… (Ctrl+J) y en […]
25 diciembre, 2014
dreamweaver

Ordenar Tablas en DreamWeaver

Si en tu página web trabajas con muchos datos seguramente utilizarás tablas para mostrarlos y probablemente te habrá ocurrido que después de haberte pasado horas insertando […]
25 diciembre, 2014
dreamweaver

Formatear Tablas con DreamWeaver

En una página web es muy común utilizar tablas para mostrar información. Cualquier tipo de listado, una lista de notas de exámanes, la clasificación de una […]
25 diciembre, 2014
dreamweaver

Cambiar el Cursor con DreamWeaver

Con DreamWeaver podemos cambiar fácilmente el cursos de una página web simplemente modificando la hoja de estilos. Para ello abrimos la ventana de hojas de estilos […]
25 diciembre, 2014
dreamweaver

Capas con Scroll en DreamWeaver

NULL
25 diciembre, 2014
dreamweaver

Anclas en DreamWeaver

Las anclas son marcadores que nos permiten enlazar a una parte concreta de un documento HTML. Cuando hacemos un enlace normal y corriente el navegador visualiza […]
25 diciembre, 2014
dreamweaver

Imprimir Página DreamWeaver

Poner un enlace "Imprimir Página" es algo muy fácil de hacer pero no es una opción que esté dispnible directamente en DreamWeaver así que muchos usuarios […]
25 diciembre, 2014
dreamweaver

Insertar Fecha en DreamWeaver

En DreamWeaver se puede insertar fácilmente la fecha actual en un documento y además dando la posibilidad de escoger varios formatos. Para insertar la fecha colocamos […]
25 diciembre, 2014
dreamweaver

Código HTML: Programación vs Diseño

No soy programador, no tengo por qué saber códigos HTML”. He escuchado a mucha gente decir esto. También he escuchado cosas como “Hay programas que hacen […]
25 diciembre, 2014
dreamweaver

Centrar una página web con DreamWeaver

Cuando diseñamos una página lo solemos hacer para una resolución en concreto, por ejemplo 800×600 o 1024×768 y es posible que nuestra web, a la resolución […]
25 diciembre, 2014
dreamweaver

Estilos CSS en DreamWeaver

Imagínate que tu jefe, luego de 2 meses de arduo trabajo en esos preciados 235 archivos .html para ese gran megaproyecto, se le ocurre que esa […]
25 diciembre, 2014
dreamweaver

Enviar Formulario por E-Mail con DreamWeaver

Aunque la mejor opción para enviar formularios por e-mail es tener un script server-side que maneje el envío, por ejemplo en PHP, ASP, Perl, etc. O […]