Entradas etiquetadas ‘web’

Diseño Minimalista de páginas Web – ¿Por qué menos es realmente más?

4 de Septiembre de 2012

El dicho de que menos es más se ha aplicado a todo, desde arte a la publicidad. Cuando se trata de diseño web, nunca ha sido más cierto de lo que es hoy en día.

Con toda la tecnología de vanguardia y tantos y fabulosos gráficos para elegir o crear, a menudo los diseñadores quieren tirar de todo lo que puede para crear un sitio web.  El resultado, más que impresionante, suele ser caótico. No hay ningún centro de coordinación o de fácil uso incluso para localizar barra de navegación, el usuario se confunde y a menudo son incapaces de navegar por el sitio fácilmente o les es imposible. Se van y el propietario del sitio web pierde no sólo un visitante, sino un posible cliente.

Un sitio web minimalista, por otro lado, ofrece a los usuarios un sitio web que es fácil de usar y de navegar. Con una buena página web de diseño minimalista, los visitantes pueden fácilmente y rápidamente encontrar exactamente lo que estás buscando. Encontrar un sitio como este es como encontrar un oasis en medio del desierto.

Piense en Google, por ejemplo. Simple, básico y muy eficiente. Nada podría ser más fácil de usar? Es el perfecto ejemplo de cuán eficaz puede ser un sitio web minimalista.

Los sitios web minimalistas pueden ser muy bellos cuando están bien diseñados y rezuman clase. Gran color y gráficos lo suficiente combinados con la cantidad correcta de los espacios en blanco hacen un sitio menos ocupado, por lo que es más sencillo para un visitante para navegar. Es un calmante y refrescante cambio para un usuario, y hace que el sitio se aprecie y quieran visitarlo a menudo.

Este contenido ha de ser claro y conciso. Si bien todos hemos escuchado que el contenido es el rey, esto no significa que tengan que haber toneladas y toneladas de contenido, especialmente si se tiene poca sustancia. La información que es de fácil acceso y, precisamente por escrito es mucho más eficaz que tenga demasiado contenido para cribar a encontrar la información necesaria.

Algunos diseñadores, por desgracia, pasan por alto esta necesidad para una navegación fácil. El esfuerzo para obtener o encontrar lo que buscas está agotador y por lo general no vale la pena el esfuerzo.

Sin embargo una precisión mínima ofrece a los visitantes muchos beneficios, principalmente la ventaja de ser capaz de leer en la pantalla la información sin demasiados elementos que compiten por su atención.

COLOR

10 de Julio de 2012

PARTE 1: INTRODUCCIÓN
El color puede ser un tema delicado. A veces los artistas utilizan colores que evocan ciertas emociones. Otras veces los artistas utilizan los colores, simplemente porque les gusta su aspecto. Mientras que cualquier profesor de diseño te dirá que la última razón está completamente equivocada. En mi opinión personal, el color siempre tiene un sentido. Este significado puede ser, como he mencionado, de tipo emocional o puede ser una preferencia personal por parte del propio artista, pero siempre tiene un propósito detrás de él.

No hay nada malo con la elección de un color porque te guste, sin embargo, al elegir un color hay que asegurarse de que su uso no está en contradicción con lo que estamos tratando de decir. El uso adecuado de la teoría básica del color puede ayudar a decidir qué colores coinciden, así como lo que cada color hace que la gente se siente.

PARTE 2: LA RUEDA
La construcción de la rueda es en realidad bastante simple. Tú tienes tus 6 colores básicos: rojo, naranja, amarillo, verde, azul y morado. Después, dependiendo de que rueda estés mirando, tienes extras, entre los colores que son mezclas de los colores básicos.

Hay nombres de todos estos colores, que son importantes saber. La siguiente es una lista de todos los nombres de los colores y lo que es bueno para ellos.

Los colores primarios: rojo, amarillo, azul. Estos 3 colores son los colores base para cada color en la rueda. Es por eso los llaman “primarios”. Cuando se mezclan dos colores primarios, se obtiene un color secundario. También hemos de tener en cuenta la posición triangular de los colores primarios en la rueda de color, y cómo los colores secundarios están junto a ellos.
Los colores primarios son útiles para el diseño o el arte, son los colores más vivos cuando se colocan uno junto al otro, por lo que notaremos que la mayoría de los restaurantes de comida rápida utilizan colores primarios en sus logos, ya que evoca la velocidad.

Colores secundarios:
Naranja, verde, morado. Estos 3 colores son los que se obtienen cuando se mezclan los colores primarios. Observemos cómo el verde se encuentra entre el amarillo y el azul. Los colores secundarios son generalmente más interesantes que los colores primarios, pero no evocan rapidez y urgencia.

Los colores terciarios: Estos son los colores como el amarillo-verde y rojo-violeta. Están hechos mediante la mezcla de un color primario y un color secundario.

Los colores complementarios: rojo y verde, azul y naranja, púrpura y amarillo. No nos dejemos engañar por el nombre porque, rara vez se ven bien cuando se usan juntos. Se llaman “complementarios”, porque, se vuelven muy vibrantes y con un contraste fuerte. Los colores complementarios son útiles cuando se quiere hacer que algo destaque.

Colores análogos:
rojo y naranja, azul y verde, etc. Por lo general, coinciden muy bien, pero no crean grandes cambios. Son buenos para emitir sentimientos de serenidad en diseños y obras de arte en la que deseamos que los espectadores se sientan cómodos.

PARTE 3: OTROS TÉRMINOS
Hay un montón de nombres que se refieren a diferentes aspectos del color, pero aquí es donde empieza a ser complejo. Si deseáis saber más acerca del color, seguir leyendo.

Los colores cálidos: Son colores como el rojo, amarillo y naranja. Estos colores evocan calidez, ya que nos recuerdan cosas como el sol o el fuego.

Cool Colores: Colores como el violeta, azul, verde y púrpura. Estos colores evocan una sensación de frescura, ya que nos recuerdan cosas como el agua o la hierba.

Los colores neutros: gris, marrón. Estos no aparecen en la mayoría de las ruedas de color, son considerados neutrales, ya que no contrastan mucho con nada. Son demasiado tranquilos.

Valor: Generalmente se refiere a la cantidad de negro en un color. Cuanto más negro tiene un color, más oscuro es su valor.

Brillo: Se refiere a la cantidad de blanco en un color. Cuanto más tiene un color blanco, más brillante es.

Saturación:
Se refiere a la cantidad de un color usado. Cuando un color está en la saturación completa, es muy vibrante. Cuando un color es “no saturado”, una gran cantidad de color se ha eliminado. El desaturado de los colores tiende a hacerlos más neutrales, porque hay mucho gris en ellos.

PARTE 4: TIPOS DE COLOR
Como cabe suponer, hay diferentes tipos de color. Ahora es cuando se puede lanzar la rueda de colores por la ventana.

Color RGB: El nombre de RGB significa rojo, verde y azul, que son los 3 colores primarios. Este un modelo de color basado en lo q se conoce como síntesis aditiva, con lo que es posible representar a un color por la mezcla por adición de los tres colores luz primarios.

Color CMYK: Este es el método de color basado en pigmentos. CMYK significa Cyan, Magenta, Amarillo y Key-plate (la key-Plate corresponde a la plancha negra, y se llamaba así porque dicha plancha conteniene la mayor parte de la información de la imagen.). Lamentablemente, CMYK no puede reproducir la misma cantidad de colores que RGB. Este es el método utilizado por las impresoras de todo el mundo, y es también una forma inteligente de mezcla de pinturas.

Color Pantone (PMS): Este es otro método de impresión a color. PMS significa “Pantone Matching System”, y tiene una gran lista de colores especialmente mixta realizada por la Corporación de Pantone. En lugar de utilizar CMYK para crear colores, los pigmentos se crean de forma individual para la pureza. Por ejemplo, si queremos utilizar un color rojo-violeta, me quedaría con el PMS 233M. El color se hace exclusivamente para mi proyecto y siempre se imprimirá tal y como yo quiero. El único inconveniente de utilizar colores PMS es que sólo son útiles para los proyectos con pocos colores. También son más caros.

Top Programas de gráficos Web para Macintosh

8 de Abril de 2011

Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.

1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.

2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver.  Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.

3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.

4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,

Descripción y esquemas de color Web

16 de Enero de 2011

Hay cuatro colores básicos que se pueden utilizar para un sitio Web. Vamos a ir mostrando con imágenes la combanización de colores y cómo puede generar un esquema similar en Photoshop.

  • Monocromáticos
    Es el uso de colores de la misma tonalidad. Pueden tener diferentes matices o tonalidades dependiendo de la cantidad de blanco o negro que podamos añadir.
  • Análogos
    Son aquellos colores que se encuentran a ambos lados de cualquier color en el círculo cromático.
  • Complementarios
    Los colores complementarios son los que quedan en el lado contrario del circulo cromático.
  • Triádicos
    Estos colores están uniformemente espaciados en la rueda de color.

Vamos a utilizar como color base en todas las combinaciones el color amarillo.

amarillo


Combinación de colores monocromáticos

monocromaticos

Esta combinación de colores utiliza el amarillo mostaza de color base y se añade algo de blanco y negro al color y a la sombra.

  • Superior izquierda – base de color # ffe500
  • Superior derecha – se ha añadido un relleno de 50% de blanco para conseguir # fff280
  • Abajo a la izquierda – se ha agregado un relleno de 75% de blanco para obtener fff8bf #
  • Abajo a la derecha – se ha añadido un relleno de 50% de negro para obtener # 7f7200

Utilizar el esquema de color monocromático hará que un sitio web parezca más fluido y controlado.

Más
esquemas monocromáticos
monocromaticos_2

Se ha añadido a un cuadrado el 20% de negro para obtener más colores en el esquema. La adición de color negro o blanco a los colores puede crear un nuevo color a la paleta sin ensuciar el tono de la página.

Combinación de colores análogos
analogos

Este esquema de color toma el color base el amarillo y suma y resta 30 grados de la tonalidad en la paleta de color de Photoshop.

  • Superior izquierda – base de color # ffe500
  • Superior derecha – 30 grados para conseguir # 99ff00
  • Abajo a la izquierda – 30 grados para conseguir # FF6600
  • Inferior derecha – 100% blanco # ffffff

Los colores análogos pueden trabajar muy bien juntos, pero a veces puede entrar en conflicto.

Más colores análogos
analogos_2

Se ha añadido un cuadrado de 20% de negro para obtener más colores en el esquema.

Combinación de colores complementarios
complementarios

A diferencia de otros esquemas de color normalmente sólo tienen dos colores. El color base y su opuesto en la rueda de color. Photoshop hace que sea fácil obtener el color complementario, sólo tiene que seleccionar el área de color que desea como complemento de y pulsar Ctrl-I. Photoshop lo invertira por nosotros. Asegúremonos de hacer esto en una capa duplicada, para no perder el color base.

  • A la izquierda – base de color # ffe500
  • Derecha – el complemento # 001aff

Los planes complementarios de color son a menudo mucho más llamativos que otros esquemas de color, por lo que hay que usarlos con cuidado. Suelen ser más utilizados para sobresaltar.

Más esquemas de colores complementarios.
complementarios_2
Para obtener esta versión, de ha añadido un 50% blanco a la mitad inferior de los colores y el 30% de negro a la plaza central. Como podemos ver, nos da algunas opciones mas pero sigue siendo una combinación de colores complementarios.

Combinación de colores triádicos
triadicos

Los esquemas triádicos color se componen de 3 colores más o menos equidistantes alrededor de la rueda de color.

  • Superior izquierda – base de color # ffe500
  • Superior derecha – 120 grados para obtener # e500ff
  • Abajo a la izquierda – -120 grados para conseguir # 00ffe6
  • Inferior derecha – 100% blanco # ffffff

Los esquemas triádicos color producen a menudo unas páginas web muy vibrantes. Pero al igual que las combinaciones de colores complementarios estos pueden afectar a las personas de manera diferente.

También podemos crear esquemas de color tetrádicos o 4 colores, donde los colores están igualmente espaciados alrededor de la rueda de color.

Más esquemas triádicos
triadicos_2

Al igual que con los otros ejemplos, hemos añadido un cuadrado negro al 30% de los colores para obtener los tonos adicionales.

Esquemas de colores discordantes
discordantes

Recordemos que la belleza siempre está en los del espectador. Los colores discordantes son colores que están más lejos que cerca de 30 grados de diferencia en la rueda de colores y no son complementarios o parte de una tríada.

Los esquemas de colores discordantes puede ser muy impactantes y sólo debemos utilizarlos para generar atención. Recordemos que estos colores suelen crear un choque para atraer la atención del espectador, pero no debemos olvidar que quien lo  reciba no sea lo que exactamente está buscando.

Los elementos de diseño. Construcción del Diseño

11 de Enero de 2011

Los elementos del diseño son los pilares del diseño. Estos elementos son los que componen cada página que se genera. Y comprender estos elementos básicos nos hará capaces de elaborar más páginas web de gran alcance y mayor calidad.

Hay cinco elementos básicos de diseño:

Líneas y línea de trabajo

Las líneas son las fronteras y las reglas. Pueden ser horizontales o verticales y ayudar a delinear los espacios alrededor de los elementos en las páginas Web. La línea de trabajo aumenta la legibilidad del diseño. Pueden mejorar la comprensión y la legibilidad de un diseño, pueden ser utilizadas como un borde alrededor de elementos o un divisor entre los elementos.

Las líneas en el diseño web se pueden utilizar de muchas maneras:

  • Fronteras alrededor de los elementos
  • Líneas divisorias entre los elementos
  • Contornos alrededor de los elementos
  • Decoración

Hay tres maneras de incluir las líneas de trabajo de diseño Web:

1. La etiqueta <hr/> son líneas horizontales en los documentos de la página web. El estilo de la etiqueta <hr/> puede mejorar las líneas a futuro.
2. CSS ofrece muchas maneras de agregar bordes a los elementos. Con las fronteras de una o dos caras de un elemento, podemos crear líneas que son un poco más interesantes que un borde cuadrado simple.
3. Las ideas pueden ser utilizadas como líneas y bordes para crear efectos más decorativos.


Forma

Formas para hacer cualquier contorno cerrado en el diseño. Las formas en la mayoría de las páginas Web son cuadradas o rectangulares. No siempre tiene que ser así, se pueden utilizar  imágenes para generar otras formas dentro de los diseños. Se utilizan para transmitir el significado y organizar la información. Las formas pueden ser de 2 dimensiones o 3 dimensiones.

Hay tres tipos básicos de formas:

  • Formas geométricas
  • Formas naturales
  • Formas abstractas

Las formas en el diseño web se puede utilizar de muchas maneras:

  • Agregar interés a un diseño
  • Mantener el interés
  • Organizar elementos separados
  • Dirigir la vista a través del diseño

Figuras geométricas:

Las formas geométricas son lo que la mayoría de la gente piensa cuando piensa en las formas. La mayoría de las formas geométricas en las páginas web se crean a través de la disposición y CSS. Algunas formas geométricas comunes que se ve en las páginas Web son:

  • Cuadrados y rectángulos
  • Círculos
  • Triángulos
  • Diamantes

Las formas naturales:

Las formas naturales son formas que se encuentran en la naturaleza, y también suelen ser formas de objetos hechos por el hombre. La mayoría de las formas naturales en las páginas web se crean con imágenes. Algunos ejemplos de las formas naturales son:

  • Hojas
  • Charcos

Resumen formas:

Las formas abstractas son las que tienen una forma reconocible, pero no son “reales” de la misma manera que las formas naturales. Por ejemplo, un dibujo de palo de la figura de un perro es un perro de forma abstracta, un perro en una foto es una forma natural. Las formas abstractas en el diseño Web se agregan generalmente a través de imágenes.

Algunos ejemplos de formas abstractas son las siguientes:

  • Alfabeto glifos
  • Iconos
  • Símbolos


Textura

La textura es lo que le da un diseño de la sensación de una superficie. Es el sentido del tacto de los elementos en el diseño. En el diseño web, la textura es visual. Algunas texturas más comunes son:

  • En bruto
  • Suave
  • Dura

La textura en el diseño web se puede utilizar de muchas maneras:

  • Fondos
  • Énfasis
  • Diseños estilizados, como grabados o aguafuertes

La manera más común para incorporar la textura en los diseños Web es con la propiedad de estilo background-image. Podemos poner imágenes de fondo en la mayoría de los elementos a nivel de bloque, que nos permite agregar textura a lo largo de las páginas web.


Color

El color es el elemento de diseño en el que la mayoría de diseñadores de páginas web son muy conscientes, aunque es muy importante, el color no es un elemento necesario en cualquier diseño. De hecho, un buen plan de diseño no usa el color en primer lugar, sino que lo va añadiendo poco a poco y a medida para mejorar el diseño.
Algunos de los mejores diseños se hacen con sólo en blanco y negro o un toque de un solo color.

El color en el diseño web se puede utilizar de muchas maneras:

  • Fondos
  • Texto en primer plano
  • Imágenes

El color es muy fácil de añadir a las páginas Web. Hay muchas propiedades de estilo para añadir color, incluyendo:

  • El color de primer plano, como las fuentes y texto
  • El color de fondo, que cambia el color de fondo del elemento
  • Las fronteras de color para cambiar el color de los bordes alrededor de los elementos

También puede añadir color a su diseño a través de sus imágenes. Imágenes JPEG para las fotografías y GIF para imágenes de color plano.


Dirección

La dirección le da movimiento a los diseños web, le proporciona el estado de ánimo y la atmósfera. La dirección da la ilusión de movimiento dentro de un diseño. En la mayoría de los diseños hay una sensación de movimiento en una dirección a través del mismo. Los buenos diseños dirigen la vista a través del diseño de una manera deliberada para que el espectador vea lo que el diseñador quiere.

Hay tres direcciones básicas en el diseño:

  • Horizontal
  • Vertical
  • Diagonal

En el diseño web, la dirección es más a menudo retratada por las imágenes en la página. Pero se puede imponer dirección a través de la colocación de elementos de la página, y con líneas especialmente cuando tienen puntas de flechas sobre ellas.

Se puede incorporar la dirección en los diseños web de las siguientes maneras:

  • Miramos las imágenes para determinar la dirección a la que los sujetos se enfrentan. Si la gente en la foto están mirando hacia la derecha, entonces debemos colocar la imagen en el lado izquierdo de la página. En caso contrario la dirección de los ojos en la foto dirigirá los ojos de los lectores fuera de la página.
  • Utilizaremos su disposición para sugerir la dirección. La posición de los elementos densos, como las fotos, en las líneas horizontales, verticales o diagonales. Mientras que los elementos menos densos, como el texto, los rodeen.
  • Utilizaremos las líneas, ya sea imágenes o etiquetas de recursos humanos, para sugerir el movimiento y la dirección.

Colores corporativos

1 de Agosto de 2010

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 Facebook

facebook

Colores:

  • # 3b5998
  • # 8b9dc3
  • # F7f7f7
  • # Dfe3ee

Descripción:

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 MySpace

mySpace

Colores:

  • # 2358b8
  • # 82aad3
  • # 313246
  • # c9d0d6

Descripción:

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.

Paleta Youtube

youtube

Colores:

  • # D02525
  • # 595757
  • # 0033cc
  • # Ebebeb

Descripción:

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.

Paleta Flickr

flirk

Colores:

  • # 0063dc
  • # Ff0084
  • # 999999

Descripción:

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.

Paleta Adobe

adobe

Colores:

  • # Ff0000
  • # 343434
  • # 454545
  • # E9e9e9

Descripción:

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.

Paleta Apple

apple

Colores:

  • # 979797
  • # 666666
  • # Eeeeee
  • # 000000
  • # 0088cc

Descripción:

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.

Paleta Microsoft

microsoft

Colores:

  • # 5ca5d8
  • # 013655
  • # F0f8fc
  • # 4e7dc2
  • # 007734

Descripción:

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.

¿Es la paleta de colores web del navegador realmente necesaria?

31 de Julio de 2010

¿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.

colores_seguros

Formatos gráficos

1 de Marzo de 2010

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.

Optimización de Páginas Web

27 de Febrero de 2010

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:

  1. No hacer cortes grandes que contiengan gran cantidad de colores diferentes. Utilizaremos un pequeño número de cortes en cada porción contieniendo un número limitado de colores.
  2. No haremos una gran parte que contenga la estructura del mismo gráfico. Cortarmeos una pequeña parte de él y se repetirá en el código. Esto suele ser un error muy común que los webmasters / programadores hacen cuando se trata de fondo de color degradado.
  3. No usaremos el formato de archivo JPEG siempre. En algunos casos, un formato GIF será mucho menor en tamaño. Una regla de oro – un segmento con un elevado número de colores será más pequeño de tamaño con el formato JPEG en lugar del formato GIF, y lo contrario también es cierto. Comprobaremos cada opción por separado. Cada 1KB que nos permita reducir el tamaño de archivo de la imagen finalmente se sumará a una reducción significativa en el tamaño de página.
  4. Si tenemos texto sobre un fondo de color sólido, utilizaremos el código para crear el fondo en su lugar. Recordemos que se puede definir tanto el estilo de fuente y color de fondo de la zona utilizando CSS.

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, el juego de los navegadores en JS

4 de Septiembre de 2009

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í