Tuesday, September 3, 2013

Teoría del color para Web

Sirve para genera una identidad gráfica según los intereses de la página,  el color puede llegar a ser el elemento principal en su identidad empresarial. 

Podemos establecer diversas clasificaciones de color. Por ejemplo la clasificación de  "Grafismo Funcional"

Colores luz: pantalla
Colores pigmento: impresos

Los policromos o gama cromática compuesta por colores diversos que encuentran su unidad en la común saturación de los colores.


Mose identifica:

Los camafeos o matizaciones al rededor de una coloración principal puede haber tantos camafeos como colores.
Camafeo calido de rojo a naranja y blancos
Camafeo frío: alrededor dle azul y el verde en el círculo cromático
Camafeos neutros nefros: negro, blanco y grises

El círculo cromático

Sirve ara observar la organizacion básica y la relación entre los colores
la suma de todos los colores es el negro
la ausencia de todos los colores da el blanco

Dentro de la misma gama cromática: 

Todos estos son compatibles
colores primarios: rojo azul y amarillo
secundarios: verde, violeta y naranja
terciarios: rojo naranja, azul violáceo y amarillo

colores primarios:

son absoltos y no se pueden generar con la combinación de ningun color.

secundarios: 

combinación de primarios

terciarios:

 mezcla de los secundarios 

Al mezclar los primarios en combinaciones diversas crea un número infinito de colores.
Las tonalidades de una pantalla : 17 millones de colores.

1) los artistas y diseñadores parten del rojo amarillo y azul
2) el segundo es el rojo, verde y azul


Los colores que se usan para impresión, magenta, cuan y amarillo (junto con el negro)
Se trata de los primarios sustractivos

La propiedad ás determinandte del color es su carácter relativo. Ningun color puede ser evaluado al margen de su entorno.



Libro "type and color" impreso en acetatos para registrar y probar los colores.

Existen 2 formas básicas compositivas del color. Una de ellas es la armonía.
Armonización:  coordinar los diferentes valores que el color adquiere en una composición, todos los colores poseen una parte común con los otros.


Contrastes: 


*contraste de tono: distintos tonos cromáticos dentro de la misma gama.
*contraste claro oscuro: de negros y blancos
*contraste entre tonos cálidos y fríos: azul y naranja, contrastes entre el círculo cromático.

Escalas y Gamas

Escalas cromáticas:
valores que se obtienen añadiendo blanco y negro

escala acromática:
siempre van a grises en esta combinación.




TAREA:

investigar "psicología del color" para nuestro micro sitio


PURPURA
Actúa sobre el corazón, los pulmones y los vasos sanguíneos. Aumenta la resistencia de los músculos y tejidos. Expande el poder creativo desde cualquier ángulo. Tiene buen efecto sobre los problemas de ciática. Disminuye la angustia, las fobias y el miedo. Una luz color violeta aún a el efecto estimulante del rojo y el tónico del azul.
Representa el misterio, se asocia con la intuición y la espiritualidad, influenciando emociones y humores. También es un color algo melancólico. Antaño a causa de su elevado precio se convirtió en el color de la realeza y por ello, aún en nuestros días, parece impresionante pomposo y magnífico.
Es un tono muy complejo para utilizar en decoración ya que resulta ambiguo e incierto. No es aconsejable pintar el ambiente entero en este color, en cambio una sola pared, puede dar un cambio sorprendente a un ambiente cargado de colores cálidos. En un tono más azulado es ideal para sitios de meditación.



AZUL

Es el color que con su efecto tónico, eleva la presión de la sangre por contracción de las arterias. Actúa como antiséptico, antifebril y astringente. También demuestra su eficacia en los estados reumáticos. Para un individuo emotivo el azul es más calmante que el verde. Abre la mente, brindando paz y tranquilidad.
El azul es el más sobrio de los colores fríos, transmite seriedad, confianza y tranquilidad. Se le atribuye el poder para desintegrar las energías negativas.
Favorece la paciencia amabilidad y serenidad, aunque la sobreexposición al mismo produce fatiga o depresión.
Es uno de los colores preferidos, pero resulta difícil de utilizar en la decoración de los ambientes. Es ideal para el cuarto de los niños ya que ayuda a apaciguar su energía. También se aconseja para balancear el uso de los colores cálidos.
Clasificación de los colores en base al efecto psicológico sobre el espectador. Como elegir los colores para su producto. Importancia de saber las reacciones del consumidor sobre este tema. 

BLANCO
Su significado es asociado a la paz, pureza, fe. Alegría y pulcritud. Es la fusión de todos los colores y la absoluta presencia de la luz. Para los orientales es el color que simboliza el más allá o el cambio de una vida a la otra.
Es un color purificador, brinda sensación de limpieza y claridad. Ayuda a alejarse de lo sombrío y triste.
Representa el amor divino, estimula la humildad y la imaginación creativa.
Se puede utilizar en la decoración de un ambiente en grandes cantidades sin sobrecargar el ambiente. Luce moderno y fresco, pero hay que recordar que refleja el 80% de la luz, por eso es aconsejable usar menos luz que con el resto de los colores o bien entonarlo levemente.
El blanco es óptimo para que los ambientes luzcan amplios e iluminados.


NEGRO

Tradicionalmente el negro se relaciona con la oscuridad, desespero, dolor, formalidad y solemnidad. Es la ausencia del color y de toda impresión luminosa, es lo opuesto a la luz ya que concentra todo sí mismo. Es el color de la tristeza y puede determinar todo lo que está escondido y velado.
Es un color que también denota poder y en la era moderna comenzó a denotar el misterio y el estilo.
El negro se debe utilizar en cantidades pequeñas como accesorios, detalles y espacios dónde no se permanezca por mucho tiempo. Si se usa en grandes cantidades puede resultar agobiante y dado que absorbe la luz se debe contemplar la instalación de luz adicional.


GRIS
Iguala todas las cosas y no influye en los otros colores. Puede expresar elegancia, respeto, desconsuelo, aburrimiento, vejez.
Es un color neutro y en cierta forma sombrío. Ayuda a enfatizar los valores espirituales e intelectuales.
Si se utiliza en exceso en un ambiente, lo hará parecer monótono y aburrido. Es muy interesante utilizarlo en una decoración complementándolo con colores contrastantes y luminosos.





Generar 3 gamas en Kules para tu micrositio:








Tuesday, August 13, 2013

Diseño de páginas WEB

Diseño de páginas Web


4 aspectos a considerar:

1) resolución de monitores:
  •  600 x 800px, 1024 x 768, 1280 x 960 (es importante conocer el tamaño de las pantallas y el navegador para que la página quede bien).
2) Navegadores
3) velocidad de conexión (módem y banda ancha) 
4) Uso de Plug Ins


Aspectos de imágen y de comunicación visual:

  • tipografía: La lectura en la pantalla no es igual que en una impresión. En el monitor se cansa mucho la vista entonces hay que poner el máximo de información con el mínimo de fatiga.                                                a)Es importante trabajar con tipografía sin patines                                                                          b) hay tipografías especiales para la web com Georgia o Verdana.               

  • Color e imagen en la web:                                                               
a) GIF: es recomendable para imágenes con un área de color homogénea y sin texturas complejas. 

b) JPG: comprime mucho la imágen (hasta 100 veces más pequeña)     utilizado en gráficos con textura, es el más comunmente utilizado. (formato de visualización, no para imprimir)

c) PNG: especialmente para desempeño en la WEB, mismas cualidades y sistema de compresión del formato GIF.
(aún está en mejoramiento, sigue siendo incompatible con varios navegadores)

  • Sonido:
* No se debe usar cualquier formato. Hay 4 opciones:

a) MIDI: derivación de música sintetizada, se traslada digitalmente, pesa poco convirtiéndolo en una buena opción. Sin embargo no es 100% compatible.
b) AIFF: diseñados para Mac (no compatible con PC) pesa bastante
c) WAV: provee una gran cantidad en los archivos,compatible sólo con Windows. 
d) MP3: revolución en cuanto a calidad y comprensión de los archivos, compatible con todos los sistemas operativos.

  • Formas de composición:
a) composición Radial: manera en que se acomodan los elementos en la pantalla alrededor de un punto central. Elementos van de menor a mayor 

b) composición axial:
el equilibrio visual está presente, caracterizado por le uso e uno o varios ejes de composición que equilibran el diseño.

c) composición simétrica: se logra variando elementos y posiciones de manera que se equilibren los pesos. Todo es un msj, no hay un centro


d) composición espiral: elementos del diseño dan vueltas respecto a la axialidad de un eje.





11 mandamientos del diseño WEB:
 
LINK video:


  • Navegabilidad: (cómo acomodas los botones para la comprensión del usuario)

  • diagramación lineal: una serie de pasos para llegar al destino.
  • diagramación dinámica (tipo telaraña, puedes explorar cómo quieras)


  • Las composiciones tienen que ser "armónicos" están diseñados en sección aurea.
como este ejemplo de Twitter.



Las páginas están divididas en "canales" lo equivalente a las secciones de una revista. 
  • siempre debe de haber un "HOME" (donde está toda la información) puede o no haber una página de bienvenida, ya sea una animación o música.
  • ¿quiénes somos y qué hacemos?
  • el producto
  • diferentes variables de nuestros productos.





Thursday, August 8, 2013

comentarios videos tecnológicos


Productivity Future Vision (2011)



Es difícil pensar que esta visión futurista tiene 2 años y por lo menos un 20% de las cosas que idealizan ya están a nuestro alcance o están a unos pocos meses de salir al mercado. 

El futuro nos esta alcanzando muy rápido y cada idealización o proyecto  por más descabellado que suena con los materiales y patrocinadores correctos puede ser real.





GOOGLE GLASSES PROJECT


Podría parecer un poco exagerado que un par de anteojos se tengan tantas funciones, pero realmente es algo muy parecido a las funciones que ofrecen ya múltiples smartphones. Es más bien una combinación de manos libres y una computadora extra pequeña. 

Y siendo realistas es cuestión de tiempo para que google ocupe la 1ra plana de los periódicos con la noticia de los nuevos google glasses (claro que falta mucho más que eso para que el público promedio podamos adquirirlos jej pequeño detalle)

.


@ (arroba) antes del email





 LOS MIL USOS DEL ARROBA 

A pesar de lo cotidiano que pueda resultar para nosotros en la actualidad usar el símbolo @ e incluso podría llevarnos a pensar que su uso es equivalente al tiempo de vida del correo electrónico, pero si pensáramos así estaríamos en un error. A continuación una breve historia en la que conoceremos el obscuro pasado de este pequeño símbolo. 

ORÍGENES:
Este símbolo se remonta a la antigüedad y sus principales usos no tienen nada que ver con tecnología.
Primero que nada es importante saber que es una palabra de origen árabe ("ar-roub", que significa cuatro).

Una leyenda cuenta que el orígen de este signo se lo debemos a los copistas de la Edad Media que lo usaban como unión entre las letras a y d formando la palabra "ad" significa Hasta o Hacia.
otro uso que se asemeja más a su uso actual es el que tenían en las cartas oficiales redactadas en latín que usaban para anteponerla al nombre del destinatario.

Incluso existe una carta veneciana que data de 1536 en el que ya aparece dicho signo.-------


DIFERENTES USOS, MISMO SIGNO: 

Anteriormente también fue utilizada por griegos y romanos como unidad de medida. (equivalía a un cuarto de ánfora) 

Pero como todo en la vida este uso paso de moda y ya sólo se utilizaba en América del norte para definir el registro de los precios en una factura (10 gramos @ 3 dólares) y gracias a esto no desapareció en las primeras máquinas de escribir. 

Más tarde arroba se convirtió en una unidad de medida y peso que ya no sólo era utilizada en América, si no también en Europa (principalmente España) por sus continuos intercambios comerciales. 

Muchos, pero muchísimos años después cuando nació el internet y posteriormente el correo electrónico se le dio un giro de 180 grados al uso del "@" y comenzó a ser utilizado para dividir el nombre del destinatario y el del servidor de correo.

Sin embargo en la batalla entre compañías y el creciente mercado no todos quisieron adaptarse a esta nueva modalidad de separar el correo electrónico y fue así que empresas como "Digital" comenzaron a utilizar 4 puntos (::) en lugar del @ con un propósito básicamente igual.

y en el caso de otros rebeldes como IBM optaron por algo más sencillo y comenzaron a utilizar "AT" pero no tardaron mucho en darse cuenta de que por practicidad era más conveniente utilizar el famoso @. 


EL "@" SIGNO  ÚNICO E IRREEMPLAZABLE: 

No fue casualidad que su inventor Ray Tomlinson lo escogiera ya que al no tener ningun otro uso y estar presente en todos los teclados le daba un sello único y evitaba confusiones. 

Y finalmete para evitar confusiones entre usuarios, empresas y servidores en los 80´s optaron por generalizar este nombre para todos los correos electrónicos y desde ese día todos usamos el famoso formato: usuario + @ + máquina. 



Ya es común incluso verlo en palabras que no quieren especificar el género del destinatario, por ejemplo: 
Señor@, niñ@s.







referencias: Otero J. Historia de la arroba @. Odontología Ejercicio Profesional 2003;4(9):        http://www.odontomarketing.com (10.09.2003)


Tuesday, August 6, 2013

El lenguaje de Internet




EL LENGUAJE DE INTERNET



Todos aquellos que hayan tenido acceso a una pagina de internet han tenido que escribir forzosamente y sin importar el lugar 3 peculiares letras en la barra de direcciones: www. (actualmente es menos común, ya que la barra lo completa automáticamente pero sigue presente en absolutamente TODAS las páginas de internet ¿de dónde viene todo eso? y ¿por qué www?


www es la abreviación de "World Wide Web" que si lo tradujeramos sería algo como la gigantesca telaraña mundial (suena mejor en inglés) y a pesar de que la tenemos muy

relacionada con internet no debemos confundirnos ya que distan muchísimo de ser la misma cosa.

Para comenzar www fue desarrollado en 1989 (20 años después que la 1era conexión) y el gobierno de USA no estuvo relacionado para nada, este maravilloso desarrollo (y básicamente nuestra adicción a facebook y semejantes se lo debemos a 2 hombres muy brillantes llamados Tim Berners Lee y Robert Cailliau. Curiosamente el funcionamiento para abrir estas páginas con www es muy parecido a la labor de un "mensajero" por así decirlo y es el siguiente: 

1) el "mensajero" intoduce una página en la barra de direcciones, esta traduce el nombre del servidor que anotamos   (es como el código postal del sistema de correos) con este pueden contactar al servidor web que están buscando

2) el siguiente paso es mandar una solicitud al servidor solicitado para que nos "acepte" y despliegue el contenido ya sea texto o gráficos. 
3) al ser "aceptados" por el servidor el navegador lleva a cabo un proceso llamado "renderización" (como en la edición de vídeos) y traduce el código HTML, el CSS y otros que se presenten.
4) finalmente se incorpora todo junto y voila! tenemos acceso a una pantalla que despliega la información solicitada y la labor del "mensajero" es completada.


¿Qué es internet?


La mejor manera de poder comprender qué es internet y cómo funciona es imaginando una telaraña
cuyo centro o araña creadora fue el Departamento de Defensa de USA en 1969.

El principal objetivo de esta araña no era cazar la primera mosca que se quedara pegada ni que todos los bichos del pantano tuvieran acceso a ella (como ocurre en la actualidad, cualquiera con conocimientos básicos puede tener acceso a la infinita red de conocimientos que ofrece internet)
el propósito inicial de esta araña era encontrar un medio alternativo para comunicarse (recordemos que la araña estaba en plena guerra del pantano) lo que sucedió es que esta brillante idea 3 años más tarde llevó a 3 universidades de distintos pantanos a que sus arañas hicieran nuevas telarañas para conectarse entre todas, la primera vez que esto sucedió fue entre 2 universidades de California y una de Utah lograron conectarse (crearon una enoooorme telaraña de miles de km de distancia) y a esta memorable conexión se le denominó Arpanet.


Esta "telaraña" funciona gracias a  un conjunto de protocolos  que son conocidos como TCP/IP (en inglés significa transmission control protocol)
y estos son como traductores que ayudan a que se codifique la información correctamente.

Todo en internet tiene su propio lenguaje como HTML,Java Flash etc.. entre más compatible sea es más posible que cualquier computadora pueda leerlo.
pero no todos los "traductores" funcionan en todas las páginas a continuación presentamos un pequeño glosario que explica los códigos más básicos de esta interesante y compleja red.



Glosario para entender un poco mejor los códigos que maneja internet:

HTML: este es el acrónimo de Hypertext Markup Language (acrónimo es usar las primeras letras de una palabra para formar otra) pero en inglés los acrónimos no coinciden con la traducción al español.

CSS:  también son conocidas como "hojas de estilo en cascada" y en pocas palabras sirve para personalizar la página web, osea darle una "identidad visual" y así diferenciar si se trata de un catálogo, de una página de consulta etc..

Flash: se refiere a 2 cosas: 1 puede ser cuando el servidor te niega un servicio y te avisa llenando toda tu pantalla con texto.  o también se refiere a  una animación que se mueve al momento de abrir la página (la desarrollo una compañía llamada Macromedia) pero no se mueve en todas las computadoras si no tiene instalado un plug-in.

XHTML:  (extensible hypertext markup language)  es la versión nueva del antes HTML(este era Hi5), funciona como el nuevo lenguaje (ahora usamos Facebook osea xhtml)

XML: otra vez nos encontramos con un acrónimo para referirnos a extensible Markup Language, que si lo traducimos significa Lenguaje de mercado extensible y es utilizado para almacenar datos en forma legible

FTP: (protocolo de transferencia de archivos) es una especie de mensajero entre los protocolos TCP y su tarea es transferir archivos entre los nodos de red.

GIF: al leer esto lo más importante es que seguro tendrá el fondo blanco o no lo tendrá, osea que es excelente para el intercambio de gráficos y fotomontajes.

Hosting: como su nombre lo dice el hosting es como un hotel para la información, asegura a los archivos que pertenecen a otras compañías para que no anden "danzando" libremente en internet. (entre más sofisticada sea la compañía mejor hosting tendrá y más seguros estarán los datos)

Dominio: estos son como los "niknames" que se les da a una secuencia complicada  para identificar direcciones de computadoras conectadas a Internet, así son más sencillas de recordar y reconocer.  Por ejemplo, no es lo mismo llamarse 3848484999...333 que www.google.com

Navegador: este nombre se le da a un programa que se dedica a solicitar archivos a un servidor y darles el formato adecuado para ser vistos por el usuario y en caso de ser hipervinculos los lanza en un listado para que con un solo click se despliegue la información solicitada. (funciona con imágenes y texto).

Buscador: su nombre lo delata ya que su labor consiste en buscar las direcciones de internet que le solicitemos ( el mejor ejemplo es Google)

Intranet: es como un club de redes super exclusivo al que no pueden acceder los usuarios que no pertenezcan al club.

Java Script: es un lenguaje de programación que sirve para facilitar la interacción del usuario con su entorno cuando los programas de Java son
introducidos en las páginas WEB y ejecutados posteriormente, hace cosas como cambiar el aspecto de una página y que haya una interacción con el click del ratón.

JPEG: (Joint Photographic Experts Group) este nombre se le da a a las imágenes de mapa de bits que contienen mas de 16 millones de colores. Esta terminación nos indica que la imagen es compleja.

Motor de búsqueda: es una herramienta cuya misión consiste en buscar información existente en internet 
y está conformada por un interface, un robot y una base de datos.



Y otros datos que vale la pena saber


  • Mosaic: fue uno de los primeros navegadores desarrollado por National Center for Supercomputing Aplications. Fue el primero en incorporar una interfaz común para varias plataformas distintas y por eso se le recuerda como un adelanto histórico en la historia de la tecnología.



  • Netscape: en su momento fue el navegador que libró la "guerra de los navegadores" con microsoft, extremadamente popular en su momento. Desarrollado por Netscape Co. De esa guerra derivó la creación de Internet Explorer.


¿Quién fue Tim Berners-Lee? 

lo más importante de este hombre es que  fue un científico de la computación británico,  y es conocido por ser el padre de la Web
El fue el que realizó la primera conexión usando el protocolo HTTP en 1989.
es el fundador del Consorcio de la World Wide Web
Él y sus creativos son los responsables del famoso Lenguaje HTML

¿quién fue Marc Andressen?

lo más importante de su vida y por lo que es recordado es por que fue el cofundador de Netscape Communications Corporation y coautor de Mosaic.


Referencias: 

 Diccionario de internet (1999). Editorial Complutense Madrid España
http://www.w3.org/People/Berners-Lee/ consultado 6 Agosto 5:55 pm
http://www.biography.com/people/marc-andreessen-9542208  consultado 6 agosto 6:00 



Redactador por Fernanda J. Herrera