martes, 30 de junio de 2015

[Fecha de publicacion 2015-06-30]










































































































































































































Ahora, cuando naveguéis por la web buscando ideas de colores y diseños, tened a mano la rueda de colores para aprender más cosas sobre cómo los diseñadores utilizan las combinaciones de colores en vuestras webs preferidas.
Resumen
Aunque las combinaciones de colores pueden parecer complicadas, todas suponen ciertas "reglas". Estas directrices facilitan la comprensión de qué colores funcionan entre ellos para añadir interés y contraste a una web.
El motivo por el que existen las ruedas de color es que la gente las utilice. Las ruedas y herramientas de colores como el Color Generator en línea facilitan la elección del color, incluso a diseñadores sin experiencia.
Las cuatro combinaciones de colores que se tratan en este apartado son monocromáticas, complementarias, triádicas y tetrádicas. Aunque existen otras combinaciones de colores, estas cuatro combinaciones son las más fáciles de entender e implementar.

TOMADO DE: http://mosaic.uoc.edu/ac/le/es/m2/ud3/ (es de España por eso tiene taantos españolismos)

 Teoría del Color

Podemos escribir una Biblia acerca de la teoría del color, en este artículo el objetivo es acercar la teoría del color al diseño gráfico y al diseño web.
Antes que nada hay que hacer una salvedad importante, y tiene que ver con la diferencia de un diseño para ser visto en pantalla y un diseño para ser impreso. Las cosas que nosotros vemos en una pantalla se generan a partir de luces, a diferencia de las cosas que vemos impresas que se obtienen a partir de pigmentos (tintas). Esto significa que es muy difícil que los colores que veamos en una pantalla sean el fiel reflejo de algo que luego se verá impreso o viceversa.
La separación de colores en un monitor es RGB (R=Red, G=Green, B=Blue), rojo, verde y azul respectivamente. Supongamos que queremos generar el color Negro, eso significa que no habrá luz, o sea, cero de luz roja, cero de luz verde y cero de luz azul, la oscuridad equivale al color Negro (R=0, G=0, B=0). Veamos como se genera este color Negro a partir de tintas en un diseño impreso. La separación de colores en un elemento impreso es CMYK (C=Cian, M=Magenta, Y=Yellow, K=Negro), cian, magenta, amarillo y negro respectivamente; es bueno aclarar que la letra “K” significa el color Negro, se le llama key al negro, en vez de usar la letra B, por ser un nombre corto del término key plate utilizado en la impresión. Esta placa maestra imprimía el detalle artístico de una imagen, usualmente en tinta negra.”
Veamos ahora como generamos el color Negro en CMYK. A diferencia de las luces, los pigmentos necesitan su totalidad para generar el color negro, por ello podemos generar ese color con C=100, M=100, Y=100. Y K?, eso mismo, que pasa con “K”, en CMYK ya existe un pigmento o tinta negra, que nos permite generar este color a través de una única tinta. Si hacemos la prueba en algún programa de diseño, vamos a ver que si utilizamos el máximo de Cian, Magenta y Amarillo, obtendremos el color Negro, pero un tanto más pálido. Si hacemos la prueba de aplicar la totalidad del valor a las cuatro tintas (C=100, M=100, Y=100, K=100), obtendremos un color Negro mucho más brillante, el cual se vera reflejado en cualquier impresión.
Hechas estas importantes aclaraciones, vayamos como un niño a meter las manos en los colores y ver características interesantísimas de sus aplicaciones.
Soy de los creyentes que no existen recetas para hacer buenas combinaciones de colores, y que el conocimiento teórico no es directamente proporcional a la aplicación práctica; pero también es cierto que conocer las propiedades de los colores nos van ha ayudar a no cometer barbaridades en el manejo de los colores a la hora de diseñar.
Como todos ya conocemos (eso creo) los colores básicos en la naturaleza a partir de los cuales se generan el resto de los colores son el Rojo, Amarillo y Azul. Por ejemplo, si mezclamos Rojo con Amarillo obtenemos Naranja, si lo hacemos con Azul y Amarillo obtenemos verde, y de esta manera podemos seguir jugando con diferentes combinaciones y en diferentes cantidades para obtener más y más resultados de colores.
El mundo del color es realmente basto y hay infinidad de temas realmente importantes para charlar, los cuales vamos a dejar de lado para dedicarnos a otros temas de aplicación más práctica.
El círculo cromático
El círculo cromático es una excelente herramienta para establecer diferentes características de los colores.
¿Que es un matiz?
Apuesto que estamos aburridos a escuchar esta palabra pero muy pocos sabemos que es un matiz exactamente. Un matiz es el estado puro de un color, sin el blanco o negro agregados. Si observamos en el círculo cromático, los matices son aquellos que se generaran a los extremos de los colores puros, si a un color puro le agregamos otro color puro, vamos a generar un matiz, por ejemplo, un verde azulado o un verde amarillento, serán matices del verde, y se enconaran a los costados de este.
¿Qué es un tono?
Aquí olvidémonos de la mezcla de dos colores puros; un tono se genera a partir de la variación hacia blanco o hacia negro de un único color, por ejemplo, si a un verde le vamos agregando distintas cantidades de blanco de forma progresiva, decimos que vamos aumentando la intensidad de luz del verde y generando diferentes tonos hacia blanco; si en cambio agregamos diferentes dosis de negro a este verde, estaríamos bajando la intensidad de luz de este verde y generando distintos tonos hacia negro.
¿Qué son los colores complementarios?
Como la palabra lo dice, Son los colores que se complementan, ya sea en RGB para llegar a formar la luz como en CMYK para formar la oscuridad.
Hemos escuchado que popularmente se dice, “Esa pareja se complementa”, bueno, de alguna manera se está diciendo que son muy diferentes y que por eso se están complementando.
Si observamos nuevamente el círculo cromático, los colores complementarios son siempre los que se encuentran enfrentados, ejemplos de colores complementarios son el Amarillo – Violeta, Rojo – Verde y Azul – Naranja.
Son colores que utilizamos cuando queremos generar mucho contraste.

¿Se puede mezclar la matemática y el color?
“Yo no creo en Brujas, pero que las hay las hay” jejejeje. Esta es una buena frase para explicar este mito.
De todas maneras creo que la hipótesis es bastante fácil de comprobar científicamente; píenselo de esta forma, si la informática representa los colores a través de números y letras, el manejo y la combinación de estos números y letras estarán generando nuevos, y el sabio manejo de estas combinaciones ayudará a la generación de sabias paletas de colores; ¿a ustedes que les parece?.
( Este es un articulo que me llamo la atención, recomiendo ir al link y verlo usted mismo)

lunes, 29 de junio de 2015

[Fecha de publicacion 2015-06-29]

TEORÍA DEL COLOR Y SU APLICACIÓN EN DISEÑO WEB

Dicen que la primera impresión lo es todo. Cómo te ves y cómo te muestras determinará cómo te perciben los demás. Lo mismo es aplicable al diseño web de nuestro sitio. La impresión que generemos en nuestros usuarios dependerá de muchos factores, y uno de los más importantes es el color.
El color genera sensaciones y emociones, incluso recuerdos. Por tanto es importante conocer los fundamentos de la teoría del color y que si la conoces te ayudará a transmitir el mensaje que deseas en tu sitio web o bien generar nuevas ideas.
Averiguar qué colores funcionan bien con los demás no es sólo una cuestión de suerte. En realidad, existen muchos estudios sobre los efectos que provocan los colores en las personas.
En la teoría del color existen diversas combinaciones de colores que se agrupan por catogías y que van muy bien para lograr un objetivo concreto en el diseño web de tu página.
Empecemos con los fundamentos básicos de la teoría del color y luego pasaremos a las combinaciones más avanzadas.

LA RUEDA DE COLORES Y COMBINACIONES

COLORES PRIMARIOS

 Los colores primarios son aquellos que no se pueden obtener de la mezcla de ningún otro. Son los colores básicos que mezclados darán lugar al resto de colores de la gama cromática. Estos son el rojo, amarillo y azul. Sin embargo, si estamos hablando de colores de pantalla, tanto en dispositivos móviles como en monitores de sobremesa, los colores primarios son el rojo, verde y azul (RGB).

COLORES SECUNDARIOS






Si mezclamos a partes iguales los colores primarios, es decir, el rojo con el amarillo, el amarillo con el azul, y el azul con el rojo, se crean los colores secundarios, que son el naranja, verde y magenta. La combinación de estos colores en diseño web generan una gran variedad de contrastes.

COLORES TERCIARIOS






Los colores terciarios se consiguen si mezclamos a partes iguales un color primario junto con uno secundario, es decir, rojo con magenta, azul con verde, amarillo con verde, rojo con naranja y amarillo con naranja.
Asi que, ahora que ya conoces cómo se crean los colores, podrás entender mejor cómo trabajan las combinaciones de colores en el modelo de rueda de colores.
Entender los principios de la combinación de colores te ayudará a elegir las combinaciones de colores que funcionan bien juntas, generar las emociones adecuadas, y crear una adecuada cantidad de contrastes en tu diseño web.
A continuación te mostramos las combinaciones de colores básicos derivados de la rueda de color.
COLORES COMPLEMENTARIOS







Los colores complementarios son colores que están situados uno frente al otro en la rueda de color. Ejemplos de ello serían el el rojo y el verde, azul y el naranja, el amarillo y el púrpura, etc. Las combinaciones de colores complementarios crean un gran contraste entre sí al usarlos a la vez.
COLORES ANÁLOGOS






Los colores análogos son colores que están uno justo al lado del otro en la rueda de color. Es buena idea elegir un conjunto de colores análogos para crear una sensación de variedad en el diseño de tu página web. Ejemplos de estos serían el azul con el verde, el azul con el azul-violeta o amarillo-verde, el amarillo con el amarillo-naranja.
TRÍADAS DE COLORES

Una tríada de colores es un conjunto de tres colores que están dispuestos uniformemente alrededor de la rueda de color. Una tríada contiene una buena variedad de colores bien equilibrados. En el ejemplo de arriba, el cian, el naranja y el morado crean un bonito contraste balanceado entre ellos.
COMPLEMENTARIOS DIVIDIDOS
 Los complementarios divididos parten de toman un color y – en lugar de elegir el color complementario que le corresponde en la rueda de color – tomamos los dos situados en posiciones inmediatamente adyacentes. En el ejemplo anterior, si elegimos el amarillo, el color opuesto en la rueda de color es el morado, pero en vez elegir este, cogemos el azul-morado y rojo-morado, que crearán un gran contraste con el amarillo y entre ellos serán colores muy cooperativos.
CUADRADO DE COLORES

 El modelo de cuadrado de color tiene cuatro colores uniformemente espaciados alrededor de la rueda de color. En el ejemplo anterior, los colores son azul, naranja, rojo-violeta, y amarillo-verde. Estos esquemas de color son muy bonitos y funcionan bien con un color fuerte y versiones más aclaradas de los otros tres colores.

TETRÁDICA (DOBLE COMPLEMENTARIO)

Los esquemas de color en tetrádica se construyen mediante la creación de un rectángulo en la rueda de color. Selecciona dos opuestos en la rueda de color y a continuación seleccionamos otro color desplazándonos dos espacios en la rueda y más su color complementario.
ACLARADOS Y OSCURECIDOS







El aclarado un color es cuando tomas un color, como el azul en el ejemplo anterior, y agregas blanco al mismo. Un oscurecido es un color al que se le ha añadido negro. Puedes crear un gran esquema de colores monocromáticos con aclarados y oscurecidos del mismo tono de color.
COLORES CÁLIDOS






Los colores cálidos crean una sensación de calidez y calor en una imagen o un diseño. Cuando vemos colores cálidos, pensamos en el sol, el calor, el fuego y el amor (la pasión). El rojo es el color de la sangre, que es caliente, y naranja y amarillo están más relacionados con el verano. La adición de un filtro anaranjado a una fotografía hace que se vea más cálida y más alegre.
COLORES FRÍOS






Los colores fríos llevan connotaciones de climas fríos, invierno, la muerte, la tristeza, el hielo, la noche y el agua. Los colores fríos se pueden asociar con la calma, la tranquilidad, la confianza, la limpieza. El morado está asociada con la realeza, ya que socialmente se supone que está reservado a ellos.

Tambien esta otro pagina que habla muy bien de la teoria del color y en terminos mas informaticos y es: http://mosaic.uoc.edu/ac/le/es/m2/ud3/

domingo, 28 de junio de 2015

[Fecha de publicacion 2015-06-28]

Continuando con la segunda parte del curso de inicios en programación HTML, se trabajarán las etiquetas html; cómo usarlas y su estructura, empezando por la estructura:

La estructura general de un HTML es:






































Esas tres etiqueta html, head y body; siempre irán en un documento html, y recordar que dentro de el body se incluye lo fundamental e nuestra página..


Tomado de: http://www.blogginred.com/2012/08/etiquetas-html-principales-y-basicas.html#.VY7CEht_NHw (pagina que también  habla de otros temas informáticos muy interesantes)



Etiquetas básicas del HTML :
Texto:
<p> Esto es un texto </p>Escribimos <p> antes del texto y </p> para finalizar el párrafo.
Enlace(link):
<a href=”http://www.nombredominio.com” target=”_blank”> Nombre del enlace</a>
Se debe cambiar ‘www.nombredominio.com’ por el dominio elegido y ‘Nombre del enlace’ por el nombre que desees.
Imagen sin enlace:
<img src=”http://www.dominio.com/imagen.gif” alt=”descripción imagen”>
Cambiamos ‘www.dominio.com/imagen.gif’ por la dirección URL de la imagen elegida y ‘descripción de la imagen’ por los comentarios deseados.
Imagen con enlace:
<a href=”http://www.dominio.com” target=”_blank”> <img src=”http://www.dominio.com/imagen.gif” alt=”descripción de la imagen”></a>
Hacemos los cambios mencionados anteriormente.
Correo electrónico:
<a href=”mailto:tuemail@tuemail.com”> Contactarme </a>
Sustituimos ‘tuemail@tuemail.com’ por la verdadera dirección de correo electrónico y ‘Contactarme’ por el texto que queramos.
Alinear a la izquierda:
<div align=”left”> Texto alineado a la izquierda. </div>
Escribimos <div align=”left”> antes del texto que alinearemos a la izquierda y finalizamos el texto con </div>.
Centrar:
<div align=”center”>Texto centrado </div>
Actuamos de forma análoga al apartado anterior.
Alinear a la derecha:
<div align=”right”>Texto alineado a la izquierda </div>
Actuamos de forma análoga al apartado anterior.
Salto de línea
<br> o <br />
Si queremos insertar una línea en blanco escribiremos <br> o <br />
Tipo de letra: <font face=”verdana”>Texto escrito en verdana </font>
Utilizamos <font face=”verdana”> antes del texto elegido y acabamos con </font>.
Negrita:
<strong>Texto </strong>
Actuamos de forma similar al caso anterior y los casos que vienen a continuación.
Cursiva:
<em>Texto </em>
Texto subrayado
<u>Texto subrayado </u>
No es recomendable utilizar esta etiqueta puesto que los navegantes de la web pueden confundir el subrayado con un enlace a otra pagina.
Tamaño de letra:
<font size=”3″>Texto </font>
Subíndice:
<sub>Número2 </sub>
Superíndice:
<sup>Número2 </sup>
Color de letra:
<font color=”blue”>Texto de color azul </font>
Escribimos <font color=”blue”> si hemos elegido el color azul y acabamos con </font>.
También podemos utilizar el siguiente formato:
<font face=”Arial” size=”3″ color=”navy”> Texto escrito en arial, tamaño 3 y color azul marino. </font>
Color de la tabla:
<td bgcolor=”white”> </td>
Ancho de la tabla:
<td width=”750″> </td>
Ajuste superior en la tabla:
<tr valign=”top”> </tr>
Eliminar la separación entre las columnas y filas de la tabla, espesor y separación texto y borde de la celda:
<table width=”750″ CELLSPACING=”0″ CELLPADDING=”0″ BORDER=”0″> </table>
Color del fondo de pantalla:
<body bgcolor=”white”></body>