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)