Elaborado por Carolina Zambrano

REPÚBLICA BOLIVARIANA DE VENEZUELAUNIVERSIDAD PEDAGÓGICA EXPERIMENTAL

LIBERTADORINSTITUTO PEDAGÓGICO DE MIRANDA

JOSÉ MANUEL SISO MARTÍNEZCURSO: INFORMÁTICA EDUCTIVA

FACILITADORA: ANA MARÍA ARMENTA

La Urbina, Mayo de 2008

En este sitio encontrarás información acerca del diseño de paginas Web,

conocerás algunos detalles en cuanto al aspecto que debe tener la pagina y algunas recomendaciones para que obtengas el éxito en tus diseños.

Una página Web es una fuente de información

adaptada para la World Wide Web (WWW) y

accesible mediante un navegador de Internet. Esta

información se presenta generalmente en

formato HTML y puede contener hiperenlaces

a otras páginas Web, constituyendo la red enlazada de la World

Wide Web.

El diseño Web se basa en la fusión del diseño (entendido

como tal el arte de la estructuración de los

elementos, de la selección de colores, de la armonía de las formas) con la Web. Con el nacimiento de Internet y la

Web aparecieron las páginas Web, originalmente en texto, a las que se les tenía que dar

un diseño para facilitar la visión del contenido por parte del usuario Web.

Para el diseño de páginas Web debemos tener en cuenta dos etapas:

La primera es el diseño visual de la información que se desea editar. En esta etapa se trabaja en el

papel distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes.

La segunda, una vez que se tiene este boceto se pasa a 'programar' la página Web. Para esto, y

fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de

hipertexto o HTML.

Página Web Estática. Las páginas web estáticas son aquellas realizadas en

HTML que pueden mostrar en alguna parte de la página objetos en movimiento tales como banners,

gifs animados, videos, etc.

Página Web Animada. Las páginas web animadas

son aquellas que se realizan con la tecnología FLASH, ésta permite que una página web presente el contenido con ciertos

efectos animados continuados. El uso de esta tecnología permite

diseños más vanguardistas, modernos y

creativos.

Página Web Dinámica. Existen muchos lenguajes de

programación que son la base para la mayoría de páginas Web dinámicas. Las que destacamos aquí son los lenguajes

PHP y Ruby. Estos lenguajes permiten una perfecta estructuración del contenido. Por una parte crearíamos la estructura de las páginas Web, y por otra almacenaríamos el contenido en determinados archivos. A

partir de ahí, crearíamos el código de llamada que insertaría el contenido en la propia página Web estructurada. Este es

el principio básico que siguen los lenguajes de programación. A partir de aquí se desarrollan aplicaciones para

poder gestionar el contenido a través de un panel de control, dando lugar a nuevos

tipos de página Web que leeremos a continuación.

Portal. Es un sitio web que en su

página principal permite el acceso a múltiples

secciones que, por lo general, son foros, chats,

cuentas de correo, buscador, acceso registrado

para obtener ciertas ventajas, las últimas

noticias de actualidad… un sinfín de recursos para

brindar al usuario la mejor experiencia de búsqueda

para una temática en particular o para una temática muy amplia.

Tienda virtual o Comercio electrónico. Como su nombre indica, se trata de un sitio Web que publica los productos de una tienda en particular en Internet.

Permite la compra on-line a través de VISA, domiciliación bancaria o

transferencia por norma general. Ofrece al administrador un panel de gestión para poder subir los productos, actualizarlos, eliminarlos, etc. Es importante observar cuando realizamos una compra on-line,

que la página donde realizamos la compra muestre un “candado” en la parte inferior derecha o bien en la parte derecha de la barra de navegación. Este detalle indica que la empresa propietaria de la tienda

virtual ha habilitado una zona segura para que los datos no sean copiados por los

hackers.

Un navegador Web puede tener una interfaz gráfica de usuario como

Internet Explorer, Netscape Navigator, Mozilla Firefox, etc. o puede tener una Interfaz en modo texto como Lynx. El más popular es el Internet Explorer de

Microsoft.Los usuarios con navegadores gráficos pueden deshabilitar la visualización de

imágenes y otros contenidos multimedia, para ahorrar tiempo, ancho

de banda o simplemente para simplificar su navegación. También se

puede descartar la información de fuentes, tamaños, estilos y esquemas

de colores de las páginas Web y aplicar sus propias CSS estilizándola a su

gusto.

La combinación de colores es fundamental al momento del diseño, ya que va a tener una

influencia realmente grande en cómo lo perciban los usuarios y la

sensación que les quede después de verlo.

Una de las primeras cosas a tener en cuenta es el número o

cantidad de colores. Es arriesgado establecer una norma estricta, ya que más de 6 colores simultáneos en una composición

pueden ser demasiados si existe un gran contraste entre ellos, pero pueden formar una combinación

agradable si la relación entre ellos es adecuada.

Color Primario: es el tono básico de la página, el que la define, y el que ocupa la gran mayoría de la misma. Sería

el color del atributo "background" de la página.

Color Secundario: es el segundo tono predominante en la página, aunque en mucha menor medida que el

primario. Normalmente debe acotar o resaltar áreas y debe ser bastante próximo en tono al primario.

Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la página. Por definición debe

contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con moderación.

Elección de los colores

Los colores deben corresponderse con los colores de la organización, especialmente los del logotipo, y es

recomendable que expresen una sensación en particular. Sin importar qué colores se elijan, debe elegirse un color dominante y usarse como el color principal de la página Web. Se deben elegir uno o varios colores secundarios más brillantes y dinámicos y usarse en proporciones menores para destacar los elementos de la página.

La tabla que sigue es una lista de los significados que se asocian característicamente con colores específicos:

Color Significado Positivo

Significado Negativo

Áreas

Azul Calma, confianza, autoridad, paz, pacificación, seriedad, amabilidad, agua, cielo, protección.

Frío, sueño. Navegación, nuevas tecnologías, IT, medicina

Violeta Delicadeza, pasión, discreción, modestia, religión.

Melancolía, tristeza, pena, decepción.

Cultura, política.

Rosado Encanto, intimidad, belleza, feminidad.

Ingenuidad. Diarios íntimos, mujer.

Rojo Calor, fuerza, triunfo, dinamismo, amor.

Violencia, rabia, peligro, restricción.

Lujo, moda, deportes, medios.

Color Significado Positivo

Significado Negativo

Áreas

Naranja Tibieza, bienestar, virtud, felicidad, riqueza, energía.

Fuego, advertencia. Entretenimiento, deportes, viajes.

Amarillo Luz, alegría, sol, vida, potencia, riqueza, inmortalidad.

Engaño, egoísmo, celos, soberbia, advertencia.

Turismo.

Verde Naturaleza, vida vegetal, equilibrio, esperanza, tolerancia, juventud.

Descubrimiento, naturaleza, viajes, educación.

Marrón Calma, filosofía, campo.

Suciedad. Medio ambiente.

La tabla que sigue es una lista de los significados que se asocian característicamente con colores específicos: (Continuación)

La tabla que sigue es una lista de los significados que se asocian característicamente con colores específicos: (Continuación)

Color Significado Positivo

Significado Negativo

Áreas

Blanco Pureza, inocencia, nieve, pulcritud, frescura, riqueza.

Modas, noticia.

Gris Neutralidad, respeto.

Diseño, asociaciones, organizaciones sin fines de lucro.

Negro Simpleza, lujo, noche.

Muerte, oscuridad, tristeza, monotonía.

Cine, arte, fotografía, restricción.

Selección de imágenesLas imágenes sirven para darle vitalidad y hacer más alegre un sitio

Web. Tomando eso en cuenta, imágenes mal utilizadas pueden perturbar la comodidad visual como también la descarga de una

página. Colores de fondo

La correcta elección de los colores de fondo es vital ya que un fondo mal elegido puede dificultar la lectura. Es esencial elegir un contraste

apropiado entre el color de primer plano y el color de fondo dominante. Es por esto que se aconseja no elegir un fondo con gráficos, porque puede obstaculizar la lectura y transmitir una

sensación general de amateurismo. Generalmente, el color de fondo debe ser algo pálido.

TipografíaSe recomienda no usar más de dos tipos de fuente en un sitio Web. Las fuentes estilizadas se deben usar con moderación (por ejemplo, para un título) y para la mayor parte del sitio web conviene utilizar

una fuente clásica (arial, verdana, helvética, etcétera).  

Compatibilidad de navegadores (Browsers). Compatibilidad de resoluciones. Facilidad de navegación. Rapidez al cargar páginas y gráficas. Tomar en cuenta las actualizaciones. Siempre es mejor pocos colores antes que muchos. Como mínimo, el riesgo de estridencias es menor. Se puede afirmar que 3 colores en una misma composición sería lo mínimo a utilizar y, en la mayoría de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la página o la imagen sea anodina y aburrida son muy grandes. Evitar colores muy vibrantes como fondo de página. Ejemplo de un pésimo uso de colores y gráficas de fondo: http://www.mewspage.pwp.blueyonder.co.uk/

No usar colores fluorescentes en texto ni en el fondo. Utilizar color para distinguir secciones en la página. http://www.unicef.org/voy/ Seleccionar una paleta de color y mantenerse constante o a ella, utilizar variantes de los colores de esa misma paleta (porcentajes por ejemplo) en vez de introducir nuevos colores. http://www.moma.org Utilizar el espacio VACIO, en blanco, como elemento de diseño. http://www.gsnalliance.net/ww/en/pub/gsn/gsn_entry.htm

(Continuación)