jueves, 28 de mayo de 2015

descriptiva sobre Adobe Muse

La aplicación Muse le permite importar una amplia variedad de tipos de archivos raster - psd, png, gif, jpg - pero ¿cómo saber qué formato es mejor utilizar? ¿Qué pasa con la optimización de ambos navegadores estándar y HiDPI, o importar el contenido del vector independiente de la resolución por medio de .svg? En esta sesión hablaremos de cuándo aplicar formatos de archivo específicos y opciones de exportación para que su sitio Muse tanto parece fabuloso y cargas rápidamente a través de una variedad de navegadores y dispositivos.

martes, 26 de mayo de 2015

ADOBE DREAMWEAVER

Importante de Adobe Dreamweaver

Dreamweaver MX 2004, aunque también se puede adquirir por separado, forma parte de la suite MX 2004 de Macromedia, en la que este editor HTML resulta una pieza fundamental. Como de costumbre, comparamos al producto de Macromedia con Microsoft Front Page, y con las nuevas versiones de ambos obtenemos las mismas conclusiones que obtuvimos con sus anteriores entregas: Dreamweaver continúa siendo fiel a mantener un nivel alto en sus herramientas, dirigiéndose a usuarios con conocimientos previos, mientras que Front Page muestra destacadas mejoras, pero no logra salir de la sombra de Dreamweaver al momento de discutir sobre el uso de lenguajes y tecnologías avanzadas en el desarrollo de un sitio Web; eso sí, Front Page es, para usuarios con poca experiencia, un producto excepcional. Por otra parte, Adobe GoLive CS, visto también en el número 30 de MM al analizar Adobe Creative Suite Premium Edition, plantea un ambiente de trabajo familiar para usuarios de Adobe y una serie de características que lo colocan a un nivel superior de Front Page.

Al iniciar Macromedia Dreamweaver MX 2004 aparece, como primera novedad, la elección de una modalidad de programación, lista formada por ASP.Net, PHP, ColdFusion, y HTML. Luego se presenta otra selección, el ambiente de trabajo, en donde encontramos las opciones, ya conocidas de anteriores versiones, WYSIWYG (que consiste en diseñar una página Web sin necesidad de escribir ningún código), la opción de trabajar con el Código, y por último la posibilidad de ver ambas ventanas de desarrollo a la vez.

Los lenguajes de programación que domina Dreamweaver MX 2004 son ASP, CSS, PHP, SQL, JSP, y XML. El potencial del software en cuanto a la capacidad de programar bajo los lenguajes que acabamos de citar es de lo más amplio, permitiendo la creación de aplicaciones y diseños web complejos.

Uno de los puntos de mayor énfasis en esta edición de Dreamweaver son el soporte y las características de desarrollo en Cascading Style Sheet, haciendo posible creaciones con más facilidad y precisión, aplicando herramientas capaces de inspeccionar el código escrito. Otro aspecto capaz de ser analizado es la compatibilidad de nuestro sitio con los diversos navegadores, para que todos puedan visualizar la página correctamente.

La posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información de Word y Excel, con las funciones de copiar y pegar.

Un diseñador con experiencia encuentra en Dreamweaver una opción completa para desplegar sus conocimientos. Sin embargo, por el otro lado, usuarios principiantes se ven aturdidos por la cantidad de menús y herramientas del programa. La edición 2004 nos presenta un nuevo soporte para CSS, opciones de verificación de código pensado para múltiples navegadores, y facilidades en la administración de la página.

Puede que el atractivo de las características de Dreamweaver llame la atención, pero debe tenerse cuidado, ya que de nada servirá si no se comprenden sus utilidades, con lo cual resultará más productivo un programa como Front Page.

Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de sitios web, y si bien se trata del producto de mayores características del mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra con la dificultad de no saber por donde comenzar.

Por otro lado, se tiene la costumbre de identificar a Front Page como un producto fácil de usar, con pocas prestaciones, y con groseras fallas, es decir, un producto no profesional. Nosotros lo veíamos así en sus inicios, pero en los últimos años Front Page ha evolucionado notablemente, siendo hace tiempo una aplicación profesional que mantiene una facilidad de uso impecable combinado con útiles herramientas.

Su competidor, Dreamweaver, lo supera claramente en el marco de las posibilidades de programación. Sin embargo, desde la perspectiva de la interfaz y utilización, preferimos los menús sencillos e intuitivos de Front Page, que lo hacen aparentar ser un procesador de texto como Word.

Es un software de edición en forma de un estudio (basado en la forma de Adobe Flash) su propósito es construir, desarrollar, diseñar y editar sitios, vídeos y aplicaciones web. Inicialmente fue creado por Macromedia pero actualmente es desarrollado por Adobe Systems. Adobe Dreamweaver se ha convertido en el programa más utilizado para el diseño y la programación web, esto gracias a las funciones que posee, su fácil integración a otros programas como Adobe Flash y recientemente por su soporte para estándares del World Wide Web Consortium. Entre los principales competidores que tiene en el ...

Fuente: www.crearcrear.com/adobe-dreamweaver-descargable/ © crear crear

ADOBE DREAMWEAVER

Adobe Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en estándares. Permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico.

Ventajas:

· La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias.
· Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
· Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.

Adobe Dreamweaver te brindará acceso rápido a los mismos:
- Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET
- Diseño de páginas Webs con un interfaz completamente gráfico
- Barra de herramientas de programación, que facilita las operaciones de programación más usuales
- Contracción del código, para centrarse solo en el que se está utilizando
- Barra de herramientas de reproducción de estilos, con la que se puede ver el resultado final
- Comparar archivos para ver qué ha cambiado
- Facilidad para añadir vídeos Flash
- Notificación y registro de eventos
- Se integra en Microsoft Word, Flash, Adobe Photoshop y otras
- Optimiza las páginas para las diferentes versiones de los navegadores….

Adobe Dreamweaver en la educación:

Este programa le ayuda al estudiante a aprender a crear un sitio web, mejora su creatividad y su curiosidad por emplear todas las herramientas de este diseñador web, pero más que todo les sirve para poder diseñar su propio sitio web con todo lo que deseen ponerle. Quizás el profesor no les pueda enseñar a utilizar todas las herramientas de esta aplicación, pero internet es una gran ayuda, existen tutoriales donde enseñan a crear un sitio web y a utilizar las otras aplicaciones de Adobe que se pueden añadir a nuestro website.

Características:

: Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información de Word y Excel, con las funciones de copiar y pegar.

: Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de sitios web, y si bien se trata del producto de mayores características del mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra con la dificultad de no saber por dónde comenzar.

Desventajas

Aunque muchos usuarios afirmen en los foros de DW que no tiene desventajas, tampoco se puede decir que Dreamweaver lo puede utilizar cualquiera, al ser tan avanzado el único inconveniente es que puede resultar difícil su manejo para usuarios menos experimentados en el diseño de páginas web, ya que quien lo utiliza tiene que tener un conocimiento básico de este programa.

Bien entonces una vez que ya hemos analizado la definición, su características y sus ventajas ya tenemos una idea de lo que se trata Adobe Dreamweaver qué es lo que nos ofrece y en qué nos puede servir. Pues quizás los estudiantes no le veamos la importancia de utilizar este programa, a lo mejor no nos sirva ahora, pero cuando ya nos involucremos en el campo laboral ya sabremos cómo se utilizan los programas de Adobe, además con esta práctica ya tenemos una idea de lo que será nuestro website, ese es el objetivo de estudiar ese diseñador web.

lunes, 11 de mayo de 2015

clases de id de css

CLASES DE ID DE CSS

CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del inglés para especificar los nombres de varias propiedades de estilo.

Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de reglas consiste en uno o más selectores y un bloque de declaración (o «bloque de estilo») con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con el formato propiedad:valor;.<!R0>
En el CSS, los selectores marcarán qué elementos se verán afectados por cada bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la vez, en función de su tipo, nombre (name), ID, clase (class), posición dentro del Document Object Model, etcétera.<!R1>
Abajo puede verse un ejemplo de una parte de una hoja de estilos CSS:

selector [, selector2, ...] [:pseudo-class][::pseudo-element] {
 propiedad: valor;
 [propiedad2: valor2;
 ...]
}
 
/* comentarios */

Uso

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz, por ejemplo.
Por otro lado, antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas <table>. Aunque esta era una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una semántica particular, y en el que la distribución de los datos no se ajustaban al flujo de la información que se obtenía en la vista desde los navegadores habituales, lo que redundaba en una merma en la accesibilidad a la página por parte de otros navegadores (orientados a personas con alguna deficiencia sensorial, o a ciertos dispositivos electrónicos).
Mediante el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño, usándolas solamente para la muestra de datos tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño con tablas, es algo más complicado si no se usan.

Formas de usar CSS

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

Mediante CSS introducido por el autor del HTML
1. Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona.
  Dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (inline).
2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
3. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS especificado mediante las configuraciones del navegador, y que sobreescribe los estilos definidos por el autor en una, o varias páginas web.
Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un documento HTML, como por ejemplo, los enlaces.

Niveles e historia

CSS se ha creado en varios niveles y perfiles. Cada nivel de CSS se construye sobre el anterior, generalmente añadiendo funciones al previo.
Los perfiles son, generalmente, parte de uno o varios niveles de CSS definidos para un dispositivo o interfaz particular. Actualmente, pueden usarse perfiles para dispositivos móviles, impresoras o televisiones.

CSS1

La primera especificación oficial de CSS, recomendada por la W3C fue CSS1, publicada en diciembre 1996,³ y abandonada en abril de 2008.³
Algunas de las funcionalidades que ofrece son:

Propiedades de las Fuente, como tipo, tamaño, énfasis...
Color de texto, fondos, bordes u otros elementos.
Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera.
Alineación de textos, imágenes, tablas u otros.
Propiedades de caja, como margen, borde, relleno o espaciado.
Propiedades de identificación y presentación de listas.

CSS2

La especificación CSS2 fue desarrollada por la W3C y publicada como recomendación en mayo de 1998, y abandonada en abril de 2008.⁴
Como ampliación de CSS1, se ofrecieron, entre otras:

Las funcionalidades propias de las capas (<div>) como de posicionamiento relativo/absoluto/fijo, niveles (z-index), etcétera.
El concepto de "media types".
Soporte para las hojas de estilo auditivas
Texto bidireccional, sombras, etcétera.

CSS 2.1

La primera revisión de CSS2, usualmente conocida como "CSS 2.1", corrige algunos errores encontrados en CSS2, elimina funcionalidades poco soportadas o inoperables en los navegadores y añade alguna nueva especificación.
De acuerdo al sistema de estandarización técnica de las especificaciones, CSS2.1 tuvo el estatus de "candidato" (candidate recommendation) durante varios años,⁵ pero la propuesta fue rechazada en junio de 2005; en junio de 2007 fue propuesta una nueva versión candidata, y ésta actualizada en 2009, pero en diciembre de 2010 fue nuevamente rechazada.
En abril de 2011, CSS 2.1 volvió a ser propuesta como candidata,⁶ y después de ser revisada por el W3C Advisory Committee, fue finalmente publicada como recomendación oficial el 7 de junio de 2011.⁷

CSS3

A diferencia de CSS2, que fue una gran especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados "módulos".
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad.
Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.⁸
Debido a la modularización del CSS3, diferentes módulos pueden encontrarse en diferentes estados de su desarrollo,⁹ de forma que a fechas de noviembre de 2011, hay alrededor de cincuenta módulos publicados,⁸ tres de ellos se convirtieron en recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de nombres" y "Color".
Algunos módulos, como "Fondos y colores", "Consultas de medios" o "Diseños multicolumna" están en fase de "candidatos", y considerados como razonablemente estables, a finales de 2011, y sus implementaciones en los diferentes navegadores son señaladas con los prefijos del motor del mismo.¹⁰

Limitaciones y ventajas de usar CSS

Limitaciones

Algunas limitaciones que se encuentran en el uso del CSS hasta la versión CSS2.1, vigente, pueden ser:

Los selectores no pueden usarse en orden ascendente según la jerarquía del DOM (hacia padres u otros ancestros) como se hace mediante XPath
La razón que se ha usado para justificar esta carencia por parte de la W3C, es para proteger el rendimiento del navegador, que de otra manera, podría verse comprometido. XSLT soporta en la actualidad un mayor número de sistemas operativos. Así mismo, también es mejor para trabajar con la mayoría de buscadores de Internet.¹¹ ^{[cita requerida]}
Dificultad para el alineamiento vertical; así como el centrado horizontal se hace de manera evidente en CSS2.1, el centrado vertical requiere de diferentes reglas en combinaciones no evidentes, o no estándares.
Ausencia de expresiones de cálculo numérico para especificar valores (por ejemplo margin-left: 10% – 3em + 4px;).
Un borrador de la W3C para CSS3, propone calc() para solventar esta limitación.¹²
Las pseudo-clases dinámicas (como :hover) no se pueden controlar o deshabilitar desde el navegador, lo que las hace susceptibles de abuso por parte de los diseñadores en banners, o ventana emergentes.

Ventajas

Algunas ventajas de utilizar CSS (u otro lenguaje de estilo) son:

Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.
Mejora en la accesibilidad del documento, pues con el uso del CSS se evitan antiguas prácticas necesarias para el control del diseño (como las tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.

CSS: diferencias entre atributos class e id

Casi todo el que ha desarrollado un proyecto web (grande o pequeño) conoce ya la exsitencia de los atributos “class” e “id”, pero a menudo nos encontramos con que se usan indiscriminadamente una class o un id para dar formato a las disitntas partes del documento.
Vamos a aclarar algunos puntos al respecto para intentar generar un código css lógico, limpio y más efectivo.
Es obvio que ambos sirven para dar formato a elementos de la página. Ambos utlizan atributos similares y casi la misma sintáxis.
Los atributos id se declaran con el símbolo # delante del identificador, mientras que las classes se declaran anteponiendo el punto . a el identificador de la clase.
Ahora bien, la diferencia real no es la sintaxis sino el ‘cúando’ y ‘donde’ se deben utilizar cada una.
El atributo id está pensado para ser único en la página. Esto es, que solo podrá aparecer una vez en la página. Mientras que las class, más flexibles, están pensadas para dar estilo a distintas partes del mismo documento que comparten diseño.
Veámoslo con un ejemplo:
En nuestra página web ejemplo daremos formato a un menú con CSS. Así, haremos que el ancho del menú sea 960px. Como el menú es único en la página (no se repetirá más que en el encabezado) utilizaremos el atributo id.
En la hoja de estilo declararemos el atributo de la siguiente manera:

#menu { width:960px; }

y en el código HTML definiremos la capa que incluirá al menú de la siguiente forma:

<li>Home</li> | <li>Seccion1</li> | <li>Seccion2</li> | <li>Seccion3</li>

</ul>

Imaginemos ahora que queremos que el texto de las secciones 1 y 3 aparezcan en naranja, y la sección 2 y Home en negro. Estaremos definiendo un diseño que se repetirá, por lo que hay que declarar las classes correspondientes:

.par { color:#ff6633; }
.impar {color:#000000;}

Utilizaremos estas clases en el HTML de la siguiente forma:

<ul id="menu"> <li class="impar">Home</li> | <li class="par">Seccion1</li> | <li class="impar">Seccion2</li> | <li class="par">Seccion3</li> </ul>

Cabe destacar que podremos declarar tantas clases como queramos para una etiqueta. Así, si por ejemplo tenemos una clase como sigue

.textochulo {font-size:20px; font-weight:bold;}

podremos poner un párrafo que aplique este estilo y el .par que definimos antes:
<p class="par textochulo">Este texto tiene un formato muy chulo</p&g

lunes, 4 de mayo de 2015

Colores hexadecimales

Teoría sobre los códigos de colores HTML

Seguramente se está preguntando: « ¿Tiene algún significado esta extraña combinación de letras y números?» Pues la respuesta es «Sí» y así es como funciona:)

Formato de los códigos HTML:
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.

Significado de los símbolos:
Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)

Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:

#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:

#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:

#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:

#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:

RGB

Fundamento teórico

La paleta de colores RGB (RVA en español) consta, básicamente, de tres colores primarios aditivos: Rojo-Verde-Azul. Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: (los colores básicos o primarios, no aquellos que son resultantes de mezclas).

#RRGGBB (= #RRVVAA)

Los valores que puede adaptar cada uno de los tres pares hexadecimales van del 0x00 (0 decimal) al 0xFF (255 decimal). Cuanto mayor sea el valor del par, tanto mayor será también la intensidad (matiz, brillo o claridad) del color correspondiente a ese par (y viceversa). Esto implica que el extremo inferior de la escala cromática parte de una intensidad (grado) de color mínima (nulo = par 0x00), pasa por una intensidad de color media (mediano = par 0x80 [128 decimal]) hasta llegar a una intensidad de color máxima (saturado = par 0xFF). El grado de más alta pureza (absoluto) de un color primario aditivo estará determinado por la presencia total del mismo (saturación = 0xFF) junto con la ausencia total (nulidad = 0x00) de los otros dos colores primarios aditivos.

Además de estos tres colores primarios aditivos (RVA), existen tres colores primarios sustractivos o CMY (CMA en español): Cian-Magenta-Amarillo. Estos colores surgen de la siguiente combinación (mezcla) de los primarios aditivos:

Cian = Verde + Azul

Magenta = Rojo + Azul

Amarillo = Rojo + Verde

En cuanto a su grado de pureza, ocurre algo inverso a los colores primarios aditivos, ya que el grado absoluto estará determinado por la nulidad de uno de sus componentes y la saturación de los otros dos. Los colores complementarios de los primarios, tanto aditivos como sustractivos, serán recíprocamente:

Rojo ↔ Cian

Verde ↔ Magenta

Azul ↔ Amarillo

La combinación simultánea de los tres primarios aditivos saturados produce el blanco (0xFFFFFF). Contrariamente, la combinación simultánea de los tres primarios sustractivos nulos produce el negro (0x000000). Resulta claro también que la combinación de dos colores mutuamente complementarios producirá el blanco, de igual modo que la sustracción (absorción) de ambos dará lugar al negro (ausencia total de color). Así, p. ej., el rojo (0xFF0000) más su complemetario que es el cian (0x00FFFF), generan el blanco (0xFFFFFF). De hecho, el cian no es otra cosa que la sustracción del rojo al blanco. Obsérvense los siguientes gráficos:

Por su parte, el gris mediano (0x808080), que es el exacto término medio entre el negro y el blanco, se obtendrá a partir de la combinación simultánea de los tres primarios aditivos medianos. Análogamente, el gris semisaturado (claro) se obtendrá a partir de la combinación 0xC0C0C0, mientras que el gris seminulo (oscuro) mediante 0x404040. De este modo, tenemos que el resto de los colores, que están comprendidos entre el negro (0x000000) y el blanco (0xFFFFFF), surgen de la combinación de los tres primarios aditivos en distintos grados. En otras palabras: bastará con reemplazar cada uno de los pares 0xHH-HH-HH por un valor comprendido entre 0x00 y 0xFF para obtener cualquiera de los colores posibles.

Existen 16 777 216 combinaciones distintas en el sistema RGB de 24 bits y, por lo tanto, 16 777 216 colores: 256 × 256 × 256 = 16 777 216. En la práctica, sin embargo, puede haber algunas combinaciones que no sean válidas. Eso pasaba antiguamente, cuando la paleta de colores más grande tenía 256 colores (8 bits). Por eso, existen 216 colores seguros, que serán visibles en cualquier dispositivo sin necesidad de tramado, reservándose los otros 40 colores para el sistema, de los cuales algunos se muestran aquí.

En el campo del diseño gráfico, se han definido varios modelos para hacer referencia a los colores. Los dos modelos más conocidos son RGB y CMYK. Simplificando su explicación, el modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. Técnicamente, el modelo RGB es un modelo de tipo "aditivo", ya que los colores se obtienen sumando sus componentes.

Por lo tanto, en el modelo RGB un color se define indicando sus tres componentes R (rojo), G (verde) y B (azul). Cada una de las componentes puede tomar un valor entre cero y un valor máximo. De esta forma, el color rojo puro en RGB se crea mediante el máximo valor de la componente R y un valor de 0 para las componentes G y B.

Si todas las componentes valen 0, el color creado es el negro y si todas las componentes toman su valor máximo, el color obtenido es el blanco. En CSS, las componentes de los colores definidos mediante RGB decimal pueden tomar valores entre 0 y 255. El siguiente ejemplo establece el color del texto de un párrafo:

p { color: rgb(71, 98, 176); }

La sintaxis que se utiliza para indicar los colores es rgb() y entre paréntesis se indican las tres componentes RGB, en ese mismo orden y separadas por comas. El color del ejemplo anterior se obtendría mezclando las componentes R=71, G=98, B=176, que se corresponde con un color azul claro.

Si se indica un valor menor que 0 para una componente, automáticamente se transforma su valor en 0. Igualmente, si se indica un valor mayor que 255, se transforma automáticamente su valor a 255.

3.2.3. RGB porcentual

Las componentes RGB de un color también se pueden indicar mediante un porcentaje. El funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal. La única diferencia es que en este caso el valor de las componentes RGB puede tomar valores entre 0% y 100%. Por tanto, para transformar un valor RGB decimal en un valor RGB porcentual, es preciso realizar una regla de tres considerando que 0 es igual a 0% y 255 es igual a 100%.

El mismo color del ejemplo anterior se puede representar de forma porcentual:

p { color: rgb(27%, 38%, 69%); }

Al igual que sucede con el RGB decimal, si se indica un valor inferior a 0%, se transforma automáticamente en 0% y si se indica un valor superior a 100%, se trunca su valor a 100%.

3.2.4. RGB hexadecimal

Aunque es el método más complicado para indicar los colores, se trata del método más utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método.

Para entender el modelo RGB hexadecimal, en primer lugar es preciso introducir un concepto matemático llamado sistema numérico hexadecimal. Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números (del 0 al 9). Por este motivo, se dice que utilizamos un sistema numérico decimal.

No obstante, el sistema decimal es solamente uno de los muchos sistemas numéricos que se han definido. Entre los sistemas numéricos alternativos más utilizados se encuentra el sistema hexadecimal, que utiliza 16 símbolos para representar sus números.

Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la A a la F) para representar los números. De esta forma, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B equivale al número 11, la C al 12, la D al 13, la E al 14 y la F al número 15.

Definir un color en CSS con el método RGB hexadecimal requiere realizar los siguientes pasos: - Determinar las componentes RGB decimales del color original, por ejemplo: R = 71, G = 98, B = 176 - Transformar el valor decimal de cada componente al sistema numérico hexadecimal. Se trata de una operación exclusivamente matemática, por lo que puedes utilizar una calculadora. En el ejemplo anterior, el valor hexadecimal de cada componente es: R = 47, G = 62, B = B0 - Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores hexadecimales de las componentes RGB en ese orden y se les añade el prefijo #. De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.

Siguiendo el mismo ejemplo de las secciones anteriores, el color del párrafo se indica de la siguiente forma utilizando el formato RGB hexadecimal:

p { color: #4762B0; }

Recuerda que aunque es el método más complicado para definir un color, se trata del método que utilizan la inmensa mayoría de sitios web, por lo que es imprescindible dominarlo. Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales, por lo que no tienes que hacer ninguna operación matemática:

Herramienta de color de Photoshop para definir los colores según los modelos RGB, CMYK, Lab, HSB y RGB hexadecimal

Colores hexadecimales

Nombre del color	Código hex	Color "seguro para web" más cercano
BLANCO	#FFFFFF	#FFFFFF
AZUR	#F0FFFF	#FFFFFF
CREMA	#F5FFFA	#FFFFFF
NIEVE	#FFFAFA	#FFFFFF
MARFIL	#FFFFF0	#FFFFFF
BLANCO FANTASMA	#F8F8FF	#FFFFFF
BLANCO FLORAL	#FFFAF0	#FFFFFF
AZUL ALICIA	#F0F8FF	#FFFFFF
CIAN CLARO	#E0FFFF	#CCFFFF
MELÓN VERDE	#F0FFF0	#FFFFFF
AMARILLO CLARO	#FFFFE0	#FFFFFF
CONCHA	#FFF5EE	#FFFFFF
SONROJO LAVANDA	#FFF0F5	#FFFFFF
HUMO BLANCO	#F5F5F5	#FFFFFF
ENCAJE ANTIGUO	#FDF5E6	#FFFFFF
SEDA DE MAÍZ	#FFF8DC	#FFFFCC
LINO	#FAF0E6	#FFFFFF
AMARILLO ALAMBRE DORADO CLARO	#FAFAD2	#FFFFCC
GASA LIMÓN	#FFFACD	#FFFFCC
BEIGE	#F5F5DC	#FFFFCC
LAVANDA	#E6E6FA	#CCCCFF
BATIDO DE PAPAYA	#FFEFD5	#FFFFCC
ROSA BRUMOSA	#FFE4E1	#FFCCCC
BLANCO ANTIGUO	#FAEBD7	#FFFFCC
BLANCO ALMENDRA	#FFEBCD	#FFFFCC
SOPA	#FFE4C4	#FFFFCC
TURQUESA PÁLIDO	#AFEEEE	#99FFFF
MOCASÍN	#FFE4B5	#FFCCCC
GAINSBORO	#DCDCDC	#CCCCCC
SOPLIDO MELOCOTÓN	#FFDAB9	#FFCCCC
BLANCO NAVAJO	#FFDEAD	#FFCC99
DORADO ALAMBRE PÁLIDO	#EEE8AA	#FFFF99
TRIGO	#F5DEB3	#FFCCCC
POLVO AZUL	#B0E0E6	#CCCCFF
AGUAMARINA	#7FFFD4	#66FFCC
GRIS CLARO	#D3D3D3	#CCCCCC
ROSA	#FFC0CB	#FFCCCC
AZUL CLARO	#ADD8E6	#99CCFF
CARDO	#D8BFD8	#CCCCCC
ROSA CLARO	#FFB6C1	#FFCCCC
AZUL CIELO CLARO	#87CEFA	#99CCFF
VERDE PÁLIDO	#98FB98	#99FF99
AZUL ACERO CLARO	#B0C4DE	#99CCCC
CAQUI	#F0D58C	#FFCC99
AZUL CIELO	#87CEEB	#99CCFF
AGUA	#00FFFF	#00FFFF
CIAN	#00FFFF	#00FFFF
PLATA	#C0C0C0	#CCCCCC
CIRUELA	#DDA0DD	#CC99CC
GRIS	#BEBEBE	#CCCCCC
VERDE CLARO	#90EE90	#99FF99
VIOLETA	#EE82EE	#FF99FF
AMARILLO	#FFFF00	#FFFF00
TURQUESA	#40E0D0	#33CCCC
MADERA FORNIDA	#DEB887	#CCCC99
AMARILLO VERDE	#ADFF2F	#99FF33
BRONCEADO	#D2B48C	#CCCC99
TURQUESA MEDIO	#48D1CC	#33CCCC
SALMÓN CLARO	#FFA07A	#FF9966
AGUAMARINA MEDIO	#66CDAA	#66CC99
GRIS OSCURO	#A9A9A9	#999999
ORQUÍDEA	#DA70D6	#CC66CC
VERDE MAR INTENSO	#8FBC8F	#99CC99
AZUL CIELO INTENSO	#00BFFF	#00CCFF
MARRÓN ARENA	#F4A460	#FF9966
DORADO	#FFD700	#FFCC00
VERDE PRIMAVERA MEDIO	#00FA9A	#00FF99
CAQUI OSCURO	#BDB76B	#CCCC66
ACIANO AZUL	#6495ED	#6699FF
ROSA CALIENTE	#FF69B4	#FF66CC
SALMÓN OSCURO	#E9967A	#FF9966
TURQUESA OSCURO	#00CED1	#00CCCC
VERDE PRIMAVERA	#00FF7F	#00FF66
CORAL CLARO	#F08080	#FF9999
MARRÓN ROSADO	#BC8F8F	#CC9999
SALMÓN	#FA8072	#FF9966
CHARTREUSE	#7FFF00	#66FF00
PÚRPURA MEDIO	#9370DB	#9966CC
VERDE CÉSPED	#7CFC00	#66FF00
AZUL DODGER	#1E90FF	#3399FF
VERDE AMARILLO	#9ACD32	#99CC33
VIOLETA ROJO PÁLIDO	#DB7093	#CC6699
AZUL PIZARRA MEDIO	#7B68EE	#6666FF
ORQUÍDEA MEDIO	#BA55D3	#CC66CC
CORAL	#FF7F50	#FF6666
AZUL CADETE	#5F9EA0	#669999
VERDE MAR CLARO	#20B2AA	#339999
DORADO ALAMBRE	#DAA520	#CC9933
NARANJA	#FFA500	#FF9900
GRIS PIZARRA CLARO	#778899	#669999
FUCSIA	#FF00FF	#FF00FF
MAGENTA	#FF00FF	#FF00FF
VERDE MAR MEDIO	#3CB371	#33CC66
PERÚ	#CD853F	#CC9933
AZUL ACERO	#4682B4	#3399CC
AZUL REAL	#4169E1	#3366CC
GRIS PIZARRA	#708090	#669999
TOMATE	#FF6347	#FF6633
NARANJA OSCURO	#FF8C00	#FF9900
AZUL PIZARRA	#6A5ACD	#6666CC
VERDE LIMA	#32CD32	#33CC33
LIMA	#00FF00	#00FF00
ROJO INDIO	#CD5C5C	#CC6666
ORQUÍDEA OSCURO	#9932CC	#9933CC
AZUL VIOLETA	#8A2BE2	#9933FF
ROSA INTENSO	#FF1493	#FF0099
DORADO ALAMBRE OSCURO	#B8860B	#CC9900
CHOCOLATE	#D2691E	#CC6633
CIAN OSCURO	#008B8B	#009999
GRIS DIFUSO	#696969	#666666
GRIS ACEITUNA	#6B8E23	#669933
VERDE MAR	#2E8B57	#339966
VERDE CERCETA	#008080	#009999
VIOLETA OSCURO	#9400D3	#9900CC
VIOLETA ROJO MEDIO	#C71585	#CC0066
NARANJA ROJO	#FF4500	#FF3300
ACEITUNA	#808000	#999900
SIENA	#A0522D	#996633
AZUL PIZARRA OSCURO	#483D8B	#333399
VERDE ACEITUNA OSCURO	#556B2F	#666633
VERDE BOSQUE	#228B22	#339933
CARMESÍ	#DC143C	#CC0033
AZUL	#0000FF	#0000FF
MAGENTA OSCURO	#8B008B	#990099
GRIS PIZARRA OSCURO	#2F4F4F	#336666
MARRÓN MONTURA	#8B4513	#993300
MARRÓN	#A52A2A	#993333
LADRILLO REFRACTARIO	#B22222	#993333
PÚRPURA	#800080	#990099
VERDE	#008000	#009900
ROJO	#FF0000	#FF0000
AZUL MEDIO	#0000CD	#0000CC
ÍNDIGO	#4B0082	#330099
AZUL MEDIANOCHE	#191970	#000066
VERDE OSCURO	#006400	#006600
AZUL OSCURO	#00008B	#000099
AZUL MARINO	#000080	#000099
ROJO OSCURO	#8B0000	#990000
GRANATE	#800000	#990000
NEGRO	#000000	#000000