Webmasters al por mayor, llegar y llevar

No es para nadie una novedad: En la labor del Webmaster nos estamos encontrando últimamente con demasiada oferta basura contra la que competir.

No sería un problema si el cliente entendiera algo de todo esto, lamentablemente poco les interesa saber. La mayoría de las veces les basta con tener una presencia en la Web, y si más encima sus páginas son capaces de mostrar un par de gráficos, y que decir si además pueden procesar un formulario de contacto, quedan felices.

Muchos webmasters son diseñadores gráficos, publicistas, expertos en redes, informática en general, o simplemente personas que han profesionalizado sus aficiones, inviertiendo tiempo, dinero y recursos en lo que han querido transformar su medio de subsistencia entregando a los clientes un producto final de calidad.

Pero hoy tenemos en el mercado cientos de ofertas que copan nuestras casillas e-mail, donde por poco menos de veinte dólares, ofrecen el diseño de un “sitio Web profesional, todo incluido”. Todos quienes trabajamos desde hace años en Internet sabemos que esto no es posible, el tiempo a invertir para el desarrollo de un sitio medianamente decente, supera con creces ese valor. A menos, por supuesto, que trabajemos exclusivamente con plantillas con las cuales alimentamos los espacios de nuestros clientes haciendoles creer que su diseño es exclusivo. Aún así, el tiempo que demora personalizar una plantilla para nuestro cliente (logotipo, texto, colores) es caro no solo por que nosotros así lo decidamos, sino por que somos profesionales que debemos aprender a valorar nuestro trabajo como corresponde.

Esta nueva clase de “webmasters” que ha aparecido en Internet regalando prácticamente el trabajo, nos afecta.

Nos afecta por que tenemos que lidiar con este nuevo elemento negativo para convencer al cliente que debe tomar un servicio de diseño con experiencia, que entienda y comprenda sus necesidades, que sepa como concretar sus deseos en la Web, y la única forma de hacerlo es aplicando en cada caso todos nuestros conocimientos y experiencia. Este conocimiento y experiencia no puede ser regalado, después de todo, ese mismo empresario que nos está solicitando el diseño de un sitio, ha tenido que invertir para luego vender sus productos y servicios. nosotros, lo mismo. Hemos invertido y aprendido, y eso debe ser pagado en cada trabajo que presentamos.

¿Cuales son entonces los argumentos que debemos presentar para competir contra quienes regalan su trabajo?

Principalmente CALIDAD y EXPERIENCIA

Ambos factores son decisivos a la hora de tomar una decisión por parte del cliente. Debemos concentrarnos en estos dos puntos en nuestras presentaciones. Como en toda negociación, no es bueno que intentemos manchar la imagen de la competencia, por tanto debemos ir directamente sobre nuestro “plus” y estrujarlo frente a los ojos del cliente para que se convenza de la ventaja de comenzar “en serio” en Internet.

Un Webmaster real es capaz de presentar al cliente un proyecto que le permita en corto plazo insertarse en la mecánica de Internet y logre posicionarse en el más breve tiempo en lugares de privilegio (técnicas de e-marketing, posicionamiento en buscadores, etc). Mientras tanto, una persona que no tiene la experiencia suficiente solo logrará que el cliente no solo pierda su dinero, sino tambien un tiempo precioso. Hoy ninguna empresa puede darse el lujo de estar fuera de Internet, la genta utiliza este medio como el principal para sus consultas superando en mucho a todos los demás medios tradicionales. Si el cliente se decide por el “ofertón”, sencillamente estará arriesgándose a perder muchísimo tiempo y dinero pues finalmente deberá acudir a alguien con experiencia para reparar el daño hecho a su imagen en la Red, y comenzar desde cero nuevamente.

Este es el argumento que se debe utilizar, adecuandolo a cada situación. Por supuesto jamás diciendole al cliente que perderá dinero y que el competidor que entrega ofertones es malo, sino simplemente por que contratarte a ti como Webmaster o diseñador puede resultar en un excelente negocio para el, sin importar que el trabajo tenga un precio mayor, cuando le puedes asegurar un resultado que en nada se parece al de un aficionado.

Autor: Sebastian Cristi
www.aiwh.org

Banners aleatorios en php

En PHP existen complejos sistemas de rotación de banners, basados en bases de datos y estadísticas muy interesantes. Estos sistemas son realmente buenos, pero si tenemos un web site pequeño, y no nos interesa tanto el conteo de clics, etc. Podemos rotar banners sólo con PHP puro y las imágenes requeridas. Aún así, las imágenes no tienen que estar en tu server, pueden estar en donde sea.

Para mostrar la rotación en todas tus páginas, crearemos un archivo llamado ads.php, que contendrá todo lo necesario para mostrar los banners aleatorios, de este modo, lo único que debes hacer es incluir este archivo en todas tus páginas.

¿Cómo hacerlo? Supongamos que en la página index.php, deseas incluir el pequeño sistema de rotación, entonces sólo debes insertar el siguiente código, en el lugar que desees:

<? include(“ads.php”) ?>

La ventaja de nuestro sistema es que las imágenes no deben ser todas del mismo tamaño, podemos crear archivos similares ads.php, pero con diferentes tipos de banners. Por ejemplo, ads_peq.php, para rotación de botones, etc.

Ahora veamos el código del script:

ads.php

<?
$numbanners = 3; //numero de banners que se rotarán
$random = rand(1,$numbanners);

$img = array();
$url = array();
$txt = array();

$img[1] = “archivos/banner1.gif”;
$url[1] = “http://www.enlace1“;
$txt[1] = “Visita el enlace del banner 1″;

$img[2] = “archivos/banner2.gif”;
$url[2] = “http://www.enlace2“;
$txt[2] = “Visita el enlace del banner 2″;

$img[3] = “archivos/banner3.gif”;
$url[3] = “http://www.enlace3“;
$txt[3] = “Visita el enlace del banner 3″;

echo “<a href=’$url[$random]‘ target=’_blank’><img src=’$img[$random]‘ alt=’$txt[random]‘ border=’0′></a>”;
?>

Vamos a aclarar un poco el código. La variable $numbanners, debe contener el número exacto de banners que deseas rotar.

Después $random, se encargará de devolver un número aleatorio entre 1 y el número de banners, es decir, entre el primer banner y el último.

Ahora, por cada banner que desees agregar, debes utilizar la estructura básica:

$img[x] = “banner.gif” //url de la imagen
$url[x] = http://www.enlace //url del sitio web
$txt[x] = “Visitanos!” //texto ALT

La x debe aumentar de acuerdo al número de banners, es decir, si el último fue $img[3], $url[3], $txt[3], el siguiente será con [4]. Como ves este tipo de sistema es muy sencillo, y también se utilizan similares para rotar banners en JavaScript.

Finalmente, debes tener en cuenta que por cada banner que agregues, debes cambiar el valor de $numbanners, sumandole uno, o restándole en caso de que elimines banners.

Es decir, $numbanners, siempre debe contener el valor que corresponda a la cantidad de banners a rotar. Si no es así, el sistema funcionará a la perfección, pero sólo rotará los banners que estén en el intervalo de $numbanners (3 en este ejemplo).

Ahora ya tienes un pequeño sistema de rotación de publicidad en tu sitio web. Pero libera tu imaginación, y especifica nuevas variables y opciones, para que personalices al máximo el script.

Fuente y Autor: Aaron Gómez Pérez para El Gurú Programador

Como usar distintos colores en un select menu con CSS

Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú, como prueba añadiremos distintos colores de fondo en el desplegable.

Primero

Creamos una página nueva HTML.

Segundo

Dentro de las etiquetas HEAD definimos el CSS.

<style type=”text/css”>
body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Recuerda: para definir las clases se coloca un punto delante del nombre*/
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}
</style>

Tercero

Dentro del Body, creamos nuestro formulario, asignando a cada option la clase que le corresponda.

<form method=”post” action=”">
<label for=”color”>Selecciona tu color favorito:</label>
<p>
<select name=”color” id=”color”>
<option value=”">Selecciona Uno</option>
<option value=”amarillo” class=”amarillo”>amarillo</option>
<option value=”rojo” class=”rojo”>rojo</option>
<option value=”verde” class=”verde”>verde</option>
<option value=”azul” class=”azul”>azul</option>
</select>
</p>
<p>
<input type=”submit” name=”submit” id=”submit”
value=”Enviar!” />
</p>
</form>

Cuarto

Guardar y Probar.

Este mismo procedimiento, es suficiente para añadir imágenes en cada option, sólo modificando las clases CSS, de tal manera de poder dejar muy bien personalizado nuestro menú de selección.

Fuente: El Gurú Programador

Opacidad CSS

La opacidad en CSS sirve para definir lo opaco o transparente de un elemento en una página web.

Aunque parezca una contradicción, la opacidad sirve para definir la transparencia de los elementos de la página. Esto es porque todos los elementos de una página son 100% opacos por defecto. Es decir, no se puede ver a través de ellos y por tanto al sobreponerse tapan totalmente lo que haya debajo. Así pues, a través de la opacidad podremos especificar cuanto de opaco será un elemento, o lo que es lo mismo, cuan transparente sea.

La opacidad se trabaja de dos maneras distintas en los navegadores más comunes. Por un lado tenemos a Internet Explorer, y por otro lado a todos los demás navegadores, es decir, Firefox, Opera o Chrome. Por ello, para especificar la opacidad o transparencia tendremos que hacerlo con dos atributos distintos. En DesarrolloWeb.com ya habíamos tratado este tema con anterioridad, pero ahora vamos a ofrecer explicaciones más completas.

Opacidad en Internet Explorer

En Explorer tenemos que indicar el grado de opacidad como un filtro de CSS. Dichos filtros se pueden aplicar con el atributo filter de hojas de estilos. Existen varios filtros disponibles para hacer distintos efectos sobre elementos de la página, en concreto el filtro opacity es el que nos interesa para definir transparencias. Se especifica de la siguiente manera:

.claseopacidad{
   filter:alpha(opacity=25);
}

Con esta declaración de estilos conseguiríamos que los elementos de la clase claseopacidad tuvieran un 25% de opaco, o lo que es lo mismo, un 75% de transparente.

Ahora bien, en Explorer no sé por qué, podemos encontrar un problema al utilizar el filtro opacity. Simplemente en algunos casos no funcionará y no veremos la transparencia que hayamos declarado. Esto se soluciona aplicando algún estilo adicional, aparte del propio filtro CSS. Por ejemplo, ponerle un ancho a la capa bastaría, o también colocarle un float:letf. Es importante saber esto, puesto que es el típico bug que si no lo sabes puedes acabar con un dolor de cabeza antes de dar con él.

Quedaría por ejemplo así:

.claseopacidad {
   filter:alpha(opacity=25);
   width: 120px;
}

Opacidad en Firefox, Opera, Chrome…

En estos navegadores se define la transparencia de una manera más simple. Lo haremos a través del atributo opacity, de esta manera:

. claseopacidad {opacity: .5}

Con esto conseguiremos que la clase sea 50% transparente, o 50% opaca, como prefiramos decir.
Nota: Está bien comentar que en versiones antiguas de Firefox, y productos derivados de Mozilla, este atributo no funcionaba. Hace años que ya está integrado en el navegador y funciona sin problemas, pero durante un tiempo había que utilizar otro atributo propio de Mozilla.

-moz-opacity: .25

Con esto indicamos una transparencia del 75%. Este atributo hoy no hace falta utilizarlo, pero si lo ponemos no es mala idea para aumentar la compatibilidad de la página con versiones anteriores del navegador.

Transparencia para todos los navegadores

Finalizamos este artículo de desarrollo web .com, poniendo todos los conocimientos adquiridos a la vez. Para declarar un estilo de transparencia que sirva para todos los navegadores simplemente tenemos que poner las distintas declaraciones de estilos todas juntas. Cada browser interpretará la que conoce.

.transparencia {
   opacity: .25;
   -moz-opacity: .25;
   filter:alpha(opacity=25);
   float: left;
}

Fuente: http://www.desarrolloweb.com/articulos/opacidad-css.html

Paginas web dinámicas vs. estaticas

Una de las divisiones que podemos realizar entre todos los tipos de páginas Web existentes podría ser entre estáticas y dinámicas.

Una página Web estática presenta las siguientes características:
Ausencia de moviemiento y funcionalidades.
Absoluta opacidad a los deseos o búsquedas del visitante a la página.
Realizadas en XHTML o HTML.
Para cambiar los contenidos de la página, es imprescindible acceder al servidor donde está alojada la página.
El usuario no tiene ninguna posibilidad de seleccionar, ordenar o modificar los contenidos o el diseño de la página a su gusto.
El proceso de actualizacion es lento, tedioso y escencialmente manual.
No se pueden utilizar funcionalidades tales como bases de datos, foros, etc.
Por el contrario, una página Web dinámica tiene las siguientes características:

Gran número de posibilidades en su diseño y desarrollo.
El visitante puede alterar el diseño, contenidos o presentación de la página a su gusto.
En su realización se utilizan diversos lenguajes y tecnicas de programación.
El proceso de actualización es sumamente sencillo, sin necesidad de entrar en el servidor.
Permite un gran número de funcionalidades tales como bases de datos, foros, contenido dinámico, etc.
Pueden realizarse íntegramente con software de libre distribución.
Existe una amplia comunidad de programadores que brinda apoyo desinteresado.
Cuenta con un gran número de soluciones prediseñadas de libre disposición.
En definitiva, el concepto de página Web dinámica se ha impuesto en el mundo del diseño y de la empresa en Internet. Páginas como Yahoo!, Google, Amazon e incluso ésta, son excelentes ejemplosd e páginas Web dinámicas que permiten interactuar con el visitante y le ofrecen posibilidades realmente sorprendente: carritos de compra, posibilidad de incluir sus propias críticas en libros y discos, buscar en base a criterios determinados, participar en discusión…

Autor: Juan Timaná
http://www.ezwp.com/articulos/desarrollo-web/paginas-web-dinamicas-vs.-estaticas/

Columnas de altura 100% con CSS

Cómo maquetar una página con CSS y conseguir que la altura de las columnas ocupe todo el espacio disponible de la página.

05/9/08 – Con CSS podemos hacer muchas cosas de una manera rápida y sencilla. Pero muchas veces tenemos que emplear técnicas, algunas sencillas y otras no tanto, para conseguir efectos que de otra manera son imposibles. Es el caso que nos ocupa en este artículo, conseguir que las columnas en una maquetación CSS ocupen el 100% de la altura disponible. Es decir, tener una página maquetada a varias columnas, donde todas las columnas llegan hasta la parte de abajo de la página.

Quizás hayas llegado a este artículo porque no consigas un height: 100% en una columna al diseñar tu página con CSS y no necesites más explicaciones de lo que pretendemos conseguir. Pero si no es el caso y deseas ver un ejemplo de cómo se haría una maquetación CSS a dos columnas accede al artículo de DesarrolloWeb.com Maquetación CSS a dos columnas. Luego echa un vistazo a la página del ejemplo que se desarrolla en el artículo anterior.

Verás que la columna que tiene una especie de barra de navegación lateral sólo ocupa un área limitada del espacio que hay en vertical. Esto es porque en CSS las capas DIV crecen verticalmente justo lo necesario, atendiendo a los contenidos que se tienen que colocar dentro. Por mucho que intentemos colocar un estilo CSS height:100% a la capa de la columna pequeña, en principio, no conseguiremos que ocupe el mismo espacio que la columna grande. Pero claro, hay una solución a todo esto y podemos estar tranquilos porque es muy simple.

Creamos las columnas con capas flotando a izquerda y derecha

Luego ya sólo sería crear un contenedor que aparezca en el centro de la página y un par de columnas izquierda y derecha, donde estén flotando cada una hacia su lado. En otros artículos de desarrollo web .com hemos visto cómo hacer estas cosas con CSS.

El códido HTML quedaría así:

<div id=”container”>
<div id=”izquierda”>
Columna de la izquierda
</div>
<div id=”derecha”>
Esta columna de la derecha
</div>
</div>

El código CSS del ejemplo sería como este:

body {
background: #f0f0f0 url(fondo.gif) repeat-y 50%;
text-align: center;
}
#container{
margin:auto;
text-align:left;
width: 1000px;
}
#izquierda{
width: 670px;
float: left;
margin: 10px 0px 10px 10px;
}
#derecha{
width: 290px;
float: right;
margin: 10px 5px 10px 0px;
}

No tiene mucho misterio, si es que ya hemos seguido otros talleres publicados en desarrolloweb .com sobre la cómo maquetar webs con CSS. Os aconsejamos seguir la línea de artículos que comienza por el artículo Maquetación CSS.

Fuente: DesarrolloWeb

Como crear nuestra marca

 Difusión Vs. Complejidad, Potencial Vs. Limitaciones, Rigidez Vs Flexibilidad e In House Vs. Outsourcing. 4 reglas sencillas para crear nuestra marca.

1. Difusión Vs. Complejidad gráfica.

Por lo general marcas que van a tener una gran difusión en medios, deben tender a simplificar sus elementos.
Marcas con poca difusión pueden generar formas más complejas.

Esta regla se basa en la idea de no agotar al consumidor.
Si el consumidor se ve bombardeado por una marca compleja de forma constante, se produce un agotamiento que deteriora la marca.

Ejemplo malo: Movistar.
La marca movistar es una forma compleja de la que se abusa en los medios. Al final la marca se convierte en un bloque sin vida, repetido hasta la saciedad. La marca de Movistar debería ser gestionada con algo más de cautela.

Ejemplo bueno: BBVA.
BBVA es una marca azul, de un banco gigante. Podría ser una marca muerta, pero la sobriedad con la que es tratada la salva de quemarse. No habría nada peor que una marca tipo BBVA queriendo ser tu colega (pues eso es un poco lo que le pasa a Movistar).

La complejidad gráfica no solo hace referencia a que el símbolo sea complejo. Podemos trabajar con un símbolo sencillo, legible, etc… pero dotarle de elementos complejos para los faldones, tarjetas, literatura, etc…

2. Potencial Vs. Limitaciones.

Las limitaciones de una marca deben no figurar en la marca. Debemos poner el acento en el potencial.

Este aspecto está muy descuidado en muchas empresas que acuden a “limitaciones” a la hora de designar su marca.

El caso más común es el de la denominaciones de origen que ponen todo el esfuerzo en la región descuidando aspectos potenciales de los productos como el sabor, calidad, origen, autenticidad, etc…

Las marcas de los productos, servicios, deben ser creados atendiendo al potencial real de los mismos. Si el producto es de producción artesanal, o las materias primas son de valor, o se pone especial atención a la atención personal, debemos olvidar “limitaciones” geográficas (o de cualquier otro tipo) y poner el acento en lo que nos puede diferenciar. La localización no nos diferencia de otras localizaciones ya que es, por lo general, un aspecto ajeno al consumidor y requiere de un conocimiento detallado de las circunstancias particulares de la región.

3. Rigidez Vs. Flexibilidad

A la hora de crear una marca se pueden generar reglas extrictas sobre todos los aspectos de la marca creando enormes manuales y guías que cubren todos los aspectos de uso de la marca.

O se pueden crear reglas sencillas que aseguren unos mínimos sobre la integridad de la marca dejando el resto de los elementos al criterio de los colaboradores del proyecto.

Por lo general, un sistema rígido es bueno para:
- Empresas en las que el equipo de branding no intervienen en el equipo de desarrollo o implementación.
- Empresas pequeñas sin recursos. Es mejor tener algo consistente que algo que pueda sufrir mutaciones no controlables.
- Grandes corporaciones. Simple es mejor. Lo contrario suele llevar al caos.
- Arquitecturas de marca monolíticas.

Un sistema flexible es bueno para:
- Empresas que mantienen al equipo creador de la marca como el equipo desarrollador de la marca.
- Empresas con una arquitectura de marca de “producto”. Danone por ejemplo.

Los sistemas flexibles son complejos de desarrollar si el equipo de branding de la empresa no es un equipo con mucha experiencia en el desarrollo de identidades, proceso creativo, producción, etc.

Los sistemas rígidos pueden ser ilusionantes y no convertirse en “obstaculos” para los colaboradores en el proyecto, si se consigue transmitir con claridad los espacios creativos que el sistema ofrece más que hacer énfasis en las limitaciones creativas del sistema (exhibir el potencial y no las limitaciones).

4. In House Vs. Outsourcing

Los únicos casos dónde el “In House” es recomendable es en aquellos en los que la estructura corporativa está claramente definida la estrategia de marca.

Por lo general esto equivale a que junto al Presidente de la compañía exista un líder de “Corporate Communications” claro, visible y con autoridad para llevar este aspecto de la empresa con firmeza.

Si la empresa no tiene en su estructura esta figura, la marca se suele diluir entre departamentos pudiendo acabar en un sistema donde cada división crea su interpretación de la marca acabando con cualquier tipo de consistencia, harmonia, unión, claridad, mensajes…

Si esta figura no existe, lo mejor es sacar fuera la gestión de la marca y que una empresa externa lleve las riendas. Esta empresa puede ser una agencia de identidad, una agencia de publicidad, un estudio de diseño, etc…

Las ventajas del In House son claras frente al Outsorcing ya que la cultura corporativa se puede retroalimentar año a año, las necesidades se pueden comunicar de forma más clara, se puede crecer de forma orgánica, etc…

El Outsorcing es bueno si la empresa no tiene en su marca un claro potencial y es más económico (por tiempo, dinero, etc…) sacarlo fuera que crearlo dentro.
Autor: César Martin
http://alzado.org/articulo.php?id_art=594

Fundamentos básicos sobre el Diseño Web

Muchas son las personas que piensan que el realizar una página web es una tarea simple y sencilla. A este tipo de personas (que la mayoría de las veces son nuestros futuros clientes) hay que hacerles ver que piensan de forma erronea. Solo hay que hacerles navegar un poquito y explicarle un poco sobre el tema y rápidamente esa persona debería de cambiar de opinión. Es ahí donde debería preguntarse: ¿Realmente cuesta tanto hacer algo bueno visualmente?La respuesta a esta pregunta es obvia. El arte del diseño gráfico/web precisa de años de estudio y práctica, es imprescindible el dominio de la tipografía, las simetrías, espaciados, y un sin fín de cosas que la gente ignora conscientemente, pero que agradecen visualmente como no se imaginan.

La mayoría de las personas piensan que el diseño es hacer que nuestras páginas sean visualmente bonitas, pero con eso no basta, nosotros como diseñadores debemos transmitir una idea y un sentimiento al navegante, y que todo esto se produzca de una manera clara y concisa. Para transmitir estos sentimientos deberemos usar correctamente algunas técnicas, entre las que destacan las siguientes:

Tipografía
Teoría del color
Espaciado y composición

TIPOGRAFÍA
La tipografía en un PC no es como en cualquier otro soporte. Además, hay que añadirle que la tipografía en Internte tiene sus propias reglas; aunque como en el diseño gráfico la regla principal es que todo sea legible, es algo así como la regla de oro de las tipografías (si no se puede leer no mola).

Todo texto que veamos en cualquieras de las páginas web se pueden separar en dos grandes grupos: Títulos y Cuerpos de texto o Mensajes.

Los títulos generalmente son letras grandes, gruesas y detalladas. Para este tipo de texto, es esencial que las tipografías elegidas (y el color de estas) estén en consonancia perfectamente con el diseño de la página.

Para los mensajes deberemos usar tipografías Sans Serif (Arial, Verdana), nunca usaremos fuentes Serif (Times).

Las fuentes sans serif incluyen todas las Palo Seco, resultando especialmente indicadas para su visualización en la pantalla de un ordenador, resultando muy legibles a pequeños tamaños y bellas y limpias a tamaños grandes.

En cambio, las tipografías Serif tienen muchos más detalles y a tamaños pequeños se hace poco legible en una pantalla, que no en papel.

Otras de las cosas que debemos a la tecnología Flash principalmente es el nacimiento de las Pixel Fonts, que son unas tipografías especialmente diseñadas para que éstas se viesen bien a un determinado punto, ya que “caían” justo en el píxel del monitor. Éstas fuentes han tenido mucho éxito y son muy recomendables usarlas en Flash, ya que hacen los textos muy legibles y no se ven borrosas las letras.

TEORÍA DEL COLOR

El color es una sensación que se produce en respuesta a una estimulación nerviosa el ojo, causada por una longitud de onda luminosa. El color es un atributo que percibimos de los objetos cuando hay luz. Y es por esto, que los colores sobre los objetos nos producen determinadas sensaciones, por lo que hay que cuidar mucho los colores que elegimos en nuestras composiciones y a la hora de diseñar una web ya que dependerá mucho del color seleccionado la sensación que transmita la web.

El color se estructura en conceptos propios que lo definen según las cualidades que contiene:

Tono, matiz o croma es el atributo que diferencia el color y por la cual designamos los colores en sí.
Saturación es la intensidad cromática o pureza de un color. Por pureza podemos entender la cantidad máxima de pigmentanción sin mezcla.
Valor es la claridad u oscuridad de un color, está determinado por la cantidad de luz que un color tiene. Valor y luminosidad expresan lo mismo.
El brillo es la cantidad de luz emitida por una fuente lumínica o reflejada por una superficie.
Luminosidad es la cantidad de luz reflejada por una superficie en comparación con la reflejada por una superficie blanca en iguales condiciones de iluminación.
El círculo cromático es el esquema resultante de distribuir alrededor de un círculo los colores que conforman el segmento de la luz visible del espectro solar.

Los colores primarios son: amarillo, rojo y azul. Mezclando pigmentos de éstos colores se obtienen todos los demás colores.

Los colores secundarios: verde, violeta y naranja. Los colores secundarios se obtienen de la mezcla en una misma proporción de los colores primarios.

Los colores terciarios: rojo violáceo, rojo anaranjado, amarillo anaranjado, amarillo versoso, azul verdoso y azul voláceo. Los colores terciarios, surgen de la combinación en una misma proporción de un color primario y otro secundario.

Algunas de las cosas más importantes que debemos saber del color son:

Armonía y contraste
El color y su expansión
Significado del color
Armonía y contraste

El color es un factor clave del éxito de un diseño. Existen una infinidad de colores y matices para elegir, lo que hace dificil la elección de colores para un proyecto. De todas formas, existen algunas ideas básicas que deben tenerse claras para poder trabajar con soltura con los diseños a color.

De entrada existen diferentes formas de enfocar el color en un proyecto: un tratamiento monocromo, o a base de grises tintados; colores matizados o apagados; colores pastel; colores vivos … y dentro de cada una de estas posibilidades podemos emplear diferentes combinaciones. Es por esto que cada diseñador debe realizar una paleta de colores armónica a la hora de realizar un proyecto. La selección cromática para un proyecto suele contar con unos pocos colores dominantes que armonizan entre sí. Una gran cantidad de colores diferentes resulta difícil de mantener a lo largo de una serie de páginas o pantallas si se pretende enfocar la atención en algo que no sean las manchas de colores.

Por lo tanto podemos resumir que la armonía consiste en crear una gama de colores para nuestra web que este compuesta por colores de la misma gama o tono.

El contraste de colores consiste en combinar diferentes colores para crear una gama como, por ejemplo, claros y oscuros, cálidos y fríos, etc. El tono es una de las dimensiones del color más importantes. El contraste más efectivo se obtiene combinando los diferentes tonos. Los colores opuestos contrastan mucho más, mientras que los análogos apenas lo hacen, perdiendo importancia visual ambos.

El color y su expansión

El espacio concretado en zonas de color es fundamental dentro de un diseño. Las diferentes tonalidades que se emplean en los elementos y las formas sirven para crear relaciones espaciales y focales, de gran interés para el receptor. se pueden llegar a conseguir efectos muy variados y especiales dependiendo de como se combinene. Por ejemplo, si usamos bastante espacio en blanco, se produce un descanso para el ojo. Si dejamos mucho espacio en blanco alrededor de algún objeto, palabra o imágen, estamos haciendo que destaque del resto de la composición.Los grandes márgenes ayudan a seguir el diseño de una forma más facil.

El texto sobre fondo blanco es más legible y por lo tanto el lector debe forzar menos la vista, sintiéndose agradecido. En cambio, el texto sobre fondo negro a simple vista puede parecer más legible, pero cuando es un texto extenso el cansancio visual se verá reflejado. Esto también lo podemos ver en colores claros y oscuros, no es algo que suceda únicamente en blanco y negro.

Significado del color

Esta es una de las cosas más interesantes con respecto al color, su significado. ¿Algunos pensarán que como puede ser que un color signifique algo? Pues sí, aunque estos significados varían un poco según las culturas, ya que por tradición es posible que el amarillo signifique mala suerte en algunas partes y en otros no o que por ejemplo el blanco signifique y se utilize como “luto” en otras culturas.
Blanco .
Se halla en el extremo de la gama de los grises.. Es un color latente por su capacidad de potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo, puro e inocente. El blanco es el fondo universal de la comunicación gráfica.

Negro
Al igual que el blanco, también se encuentra en el extremo de la gama de grises. Es el símbolo del silencio, del misterio y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante.

Gris

Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía. Los colores metálicos tienen una imagen lustrosa, adoptando las cualidades de los metales que representan. Dan impresión de frialdad metálica, pero también dan sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.

Amarillo
Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos. No es recomendable usarlo como color principal de nuestra página, pues tiene demasiada fuerza y tiende a cansar al visitante.

Naranja
Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética.

Rojo
Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y agresivo. El rojo es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo.

Azul
Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego… y posee la virtud de crear la ilusión óptica de retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el infinito.

Violeta
Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría representar también la introversión. En sus tonos más claros se vuelve un poco triste, en los más oscuros representa grandeza.

Verde
Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo reverdece suscita la esperanza de una vida renovada.

Marrón
Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.

Espaciado y composición

Bueno, esta parte es la más dificil en cuanto a poder ofrecerle datos y recomendarles algo. Puestos a recomendar, les recomiendo de que como diseñadores web, visualicen muchísimas páginas y vean como otros diseñadores plasman las ideas, los conceptos, las formas, composición de sus webs, etc … en sus páginas web. Esta forma es una muy buena forma de crecer como diseñadores. Ver el trabajo de los demás e intentar explicarse uno mismo el porqué ese diseñador que ha realizado esa web que ahora mismo estás visualizando ha hecho las cosas de ese modo. Intentar aprender de la experiencia de los demás es una de las mejores formas (sin duda alguna, también hay que aprender a base de nuestra experiencia).

Fuente: http://www.diseno-flash.com/tutoriales/fundamentos-basicos-sobre-el-diseno-web (Javier España)

Las 8 principales razones por las que la gente abandona una página Web

Si nos permiten hacer uso de la expresión coloquial, “No te dejo por feo, sino mas bien por pobre”, pareciera ser la frase más apropiada para comprender la razón principal por la que las personas que navegan en Internet abandonan o no visitan las páginas Web.

Abandonar un sitio por razones de un mal diseño gráfico no está dentro de las principales razones de por qué la gente decide cambiar de un sitio a otro, según encuestas realizadas en los Estados Unidos en los últimos años. Esto es importante saberlo porque estamos dedicando mucha atención a los aspectos de diseño gráfico del sitio y descuidando factores mucho más importantes como el propio contenido, facilidades de navegación y los tiempos de acceso de las páginas Web.

La razón que está detrás de esta natural tendencia a centrar nuestra atención en aspectos de diseño gráfico, es que estamos todavía muy acostumbrados a la tradicional publicidad en periódicos, revistas y folletos promocionales. Sin embargo, estas técnicas de diseño no son directamente heredables al Web, donde el contenido y la funcionalidad deben estar por encima del diseño gráfico.

Con esto no queremos decir que su Sitio Web no pueda ser estético, sino mas bien que debe Usted preocuparse en primera instancia por satisfacer las necesidades de contenido y funcionalidad, y si los recursos humanos y financieros lo permiten, dedicarse entonces a optimizar el diseño gráfico.

Hace un par de años, Jupiter Research dio a conocer los resultados de un estudio sobre los motivos que conducen a los usuarios de Internet a abandonar un sitio. He aquí un resumen de este reporte:

Páginas lentas o vínculos inexistentes 84%

No se encontró la información requerida 68%

No se encontró la información de la empresa 31%

Facilidades de búsqueda limitadas 23%

Vínculos difíciles de identificar 16%

Información no actualizada 6%

Mapa del sitio demasiado general 4%

El sitio contiene publicidad que abre automáticamente otras ventanas 4%

Otras 3 %

Sin duda interesantes conclusiones las que arroja este estudio. Un punto muy importante es que muchos de estos errores se pueden prevenir a tiempo, pero desafortunadamente la mayoría de los empresarios y directivos toman sus decisiones sin antes consultar a los especialistas.

Páginas pesadas

Un despliegue lento de las páginas puede ser ocasionado por problemas de sobrecarga de trabajo del servidor en el que se hospeda el sitio, pero también puede deberse a páginas que son extremadamente “pesadas” (páginas Web que contienen imágenes, animación gráfica o elementos multimedia de gran dimensión).

Por ser de gran impacto visual, muchos desarrolladores en México están cayendo en un uso indiscriminado de la animación gráfica con la venia de empresarios y ejecutivos responsables de los proyectos, a quienes no parece incomodarles la lentitud de acceso a sus sitios.

Páginas de escaso contenido

No encontrar la información requerida es la segunda razón más frecuente por la que se abandona un sitio. Los usuarios necesitan de información para tomar decisiones y abandonarán de inmediato el sitio si éste parece no ofrecer lo que ellos buscan. No olvidemos entonces la ley cero del marketing en Internet: “Content is King”.

No existe información de la empresa

Cuando los visitantes encuentran una buena fuente de información, como podría ser la documentación técnica publicada en el sitio de su negocio, por lógica ellos desearán determinar si pueden confiar en Usted, cuáles son sus credenciales, quiénes son sus clientes, a quiénes han ayudado y cuánto tiempo han estado en el negocio. No proveer esta información es sinónimo de desconfianza para los visitantes.

Facilidades de búsqueda limitadas

Otro de los motivos por el que en ocasiones se alejan los usuarios, es la falta de una apropiada facilidad de búsqueda. Así como Usted conoce a la perfección el contenido y tiene una clara imagen del mapa de su sitio, es muy importante que la gente pueda localizar rápidamente la información que necesita. Aun en sitios pequeños, que no exceden de las 30 páginas Web, a veces es difícil localizar la información por la pobre organización de sus páginas y la ausencia de un sistema de búsqueda apropiado.

Otros factores en contra

En otras ocasiones el diseño de las páginas se asemeja al juego “¿Y dónde está el vínculo?”, en el que resulta todo un reto identificar en qué parte de la página Web se encuentran los vínculos a las secciones restantes.

Aunque Usted no lo crea, la gente recurre con frecuencia a los mapas de Sitios, los cuales son muy necesarios cuando el sitio comienza a ser robusto (por ahí de las 50 páginas Web en adelante). Muchas gentes abandonan los sitios que no disponen de una función de localización o de un mapa bien estructurado de acuerdo al volumen de contenido publicado.

Por último, queda demostrado que la gente no gusta de la publicidad en línea cuando ésta rebasa los límites razonables. La apertura indiscriminada de ventanas para promoción de bienes y servicios puede ser una razón más para dar un clic y alejarse inmediatamente del sitio.

En resumen, el estudio apunta una vez más a la necesidad por la sencillez, claridad y acceso rápido, como factores clave para un diseño Web exitoso.

www.informaticamillenium.com.mx

Los dos principios básicos del diseño web accesible

Los dos principios básicos del diseño accesible de sitios web son crear páginas que se transformen correctamente y ofrecer el contenido de manera comprensible para facilitar la navegación por el sitio web.

Un sitio web accesible es aquél cuyo contenido puede ser correctamente usado por el mayor número posible de usuarios. Lo más importante para hacer un sitio web accesible es comprender que la gente accede a la Web de modos muy diferentes.

Por tanto, un sitio web accesible deberá presentar la información de tal manera que los usuarios puedan acceder a ella independientemente del equipo físico y los programas que estén usando, e independientemente de qué capacidades físicas y sensoriales utilicen para interactuar con el ordenador.

Distintas formas de navegar
Hay que saber que no todo el mundo utiliza para navegar por Internet los mismos tipos de dispositivos ni de la misma forma. A continuación se exponen unos ejemplos de distintos tipos de usuarios:

Un usuario que utiliza un navegador gráfico con todos los conectores o ‘plug-in’ instalados. El navegador lo controla principalmente mediante el ratón y también esporádicamente con el teclado (teclas rápidas y acceso a formularios). Esta es la situación más habitual, pero no es la única posible.
Un usuario ciego puede usar un programa lector de pantallas para acceder al contenido que muestra el navegador Explorer. Escucha el contenido textual de las páginas web mediante la tarjeta de sonido por síntesis de voz o lo lee por Braille en un dispositivo especial.
Un usuario con deficiencia visual utilizará un magnificador de pantalla para ampliar la imagen y activará el mayor tamaño de fuentes disponible en el navegador. Si puede hacerlo, desactivará los colores definidos en las páginas para mostrarlas con máximo contraste entre el texto y el fondo.
Un usuario puede tener deficiencias motrices que le impiden manejar el ratón. Sin embargo, manejará todos los programas del ordenador, incluido el navegador web, exclusivamente desde el teclado y usando las ayudas de accesibilidad del sistema Windows 98.
Hay otros usuarios con conexiones lentas a Internet, o que utilizan navegadores antiguos o que no tienen instalados los últimos conectores como Flash y otros. Es el caso de algunos usuarios que acceden desde otros países menos desarrollados o usando puestos de acceso en lugares públicos.
Hay usuarios que acceden a la web mediante equipos portátiles ‘palm-top’ y teléfonos móviles de reducidísimas pantallas gráficas.
Transformación correcta
El primer principio del diseño accesible es por tanto crear páginas que se transformen correctamente y cuyo contenido sea correctamente reproducible bajo distintas circunstancias. Hay que crear páginas que sean accesibles a pesar de las deficiencias cognitivas leves, físicas o sensoriales de los usuarios. Hay que considerar también las posibles restricciones debidas al lugar de acceso y las barreras tecnológicas.

En este sentido el texto es siempre lo más accesible. Sin embargo no se trata de crear páginas sólo-texto sin elementos gráficos ni una atractiva maquetación visual. Existen técnicas de HTML para asociar texto alternativo a cada elemento no textual de la página.

Además los elementos gráficos y multimedia correctamente usados contribuyen a mejorar la accesibilidad del sitio web, pues ayudan a conseguir el otro principio importante del diseño accesible: la comprensión del contenido y la navegación fácil por el sitio.

Contenido comprensible y navegable
Esto incluye no sólo la utilización de un lenguaje claro y simple, sino también proporcionar mecanismos comprensibles para navegar dentro de cada página y entre las páginas del sitio web. Al proporcionar herramientas de navegación e información orientativa en las páginas se maximizará la accesibilidad y la usabilidad del sitio web.

Pero como se ha comentado no todos los usuarios pueden utilizar las claves visuales tales como mapas de imagen, colores de fondo, marcos contiguos o imágenes que guían a los usuarios videntes. Algunos usuarios pierden también información del contexto cuando sólo pueden visualizar una parte de la página. Esto sucede si acceden a la página palabra por palabra con sintetizadores de voz, braille o teléfonos WAP o si acceden por partes con pantallas pequeñas o magnificadores de pantalla.

Autor: Rafael Romero Zúnica
http://acceso.uv.es/accesibilidad/artics/01-acces-principios.htm