DISEÑO DE PAGINAS WEB Elaborado por Carolina Zambrano REPÚBLICA BOLIVARIANA DE VENEZUELA UNIVERSIDAD PEDAGÓGICA EXPERIMENTAL LIBERTADOR INSTITUTO PEDAGÓGICO DE MIRANDA JOSÉ MANUEL SISO MARTÍNEZ CURSO: INFORMÁTICA EDUCTIVA FACILITADORA: ANA MARÍA ARMENTA DISEÑO DE PAGINAS WEB Elaborado por Carolina Zambrano La Urbina, Mayo de 2008

Bienvenid@s 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.

PÁGINA WEB 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.

DISEÑO 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.

TIPOS DE PÁGINAS WEB 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.

TIPOS DE PÁGINAS WEB 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.

TIPOS DE PÁGINAS WEB 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.

TIPOS DE PÁGINAS WEB 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. TIPOS DE PÁGINAS WEB 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.

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

USO DE COLORES 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.

ESTRUCTURA BÁSICA DE UNA COMPOSICIÓN 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 ASPECTOS A CONSIDERAR 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.

ASPECTOS A CONSIDERAR 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.

ASPECTOS A CONSIDERAR 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 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.

ASPECTOS A CONSIDERAR 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.

ASPECTOS A CONSIDERAR Selección de imágenes Las 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ía Se 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).  

RECOMENDACIONES 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/

RECOMENDACIONES (Continuación) 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