diseño web
TRANSCRIPT
República Bolivariana de Venezuela
Ministerio del Poder Popular Para la Educación Universitaria
Instituto Universitario de Tecnología del Oeste “Mariscal Sucre”
Electiva III Tecnología de la Internet
Autores:
Irina Rivas
Madelyn Villamizar
Tutora:
Shirley Castro
Caracas, Noviembre del 2014
2
Índice
pp
Introducción....................................................................................................3
Diseño web......................................................................................................4
Historia del Diseño Web................................................................................5
Generación del Diseño Web..........................................................................5
Tipos de Diseño Web.....................................................................................6
Objetivo del Diseño Web...............................................................................8
Etapas del Diseño Web..................................................................................8
Fundamentos del Diseño Web....................................................................10
Qué es la Usabilidad y Cuál es su Importancia en el Diseño Web..........11
Implementación de un Diseño Web............................................................14
Conclusión....................................................................................................28
Referencias Bibliográficas..........................................................................30
3
Introducción
La expresión del diseño web se concentra en la persona cuyo trabajo
es diseñar sitios web, no es más que una actividad que consiste en
estructurar los elementos gráficos de un sitio web, expresa estéticamente la
identidad visual de una compañía u organización. Tratándose mas de un
diseño virtual que de un diseño funcional (ergonomía, navegación). Su
objetivo es realizar la imagen a través de elementos gráficos con el objeto de
reforzar su identidad visual y despertar una sensación de confianza en el
usuario. Aun así y junto al criterio de ergonomía, un sitio web debe, sobre
todo, cubrir las expectativas del usuario y permitir encontrar fácilmente la
información que se busca. Por tal motivo el diseño web consiste en encontrar
un término entre una presentación que tengas gráficos impresionantes y que
proporcionen la credibilidad, una presentación simple sencilla para los
usuarios.
La evolución de la tecnología y de su introducción en la vida diaria,
también ha aumentado la calidad de las transmisiones a través Internet y ha
bajado su precio. A medida que la tecnología ha solventado estas
dificultades, ya no nos encontramos con problemas de forma sino de
contenido. A raíz de estos estudios se puede entender la necesidad de
concentrar los esfuerzos para atraer y mantener la atención de los usuarios,
junto con un desarrollo efectivo de la estructura web contenido y del diseño.
Por ende, diseñar una página web es principalmente un atarea de artística
que combina inventiva y creatividad. El objetivo de esta investigación es
conocer más sobre el diseño web, su historia, los avances que ha
presentado la web en sus generaciones, los tipos de diseños que existen,
objetivos, etapas, fundamentos, usabilidad e importancia.
4
Diseño web
Consiste en encontrar un término medio entre una presentación que
tenga gráficos impresionantes y que le proporcione a la compañía tanto
credibilidad como imagen de marca y una presentación simple y sencilla que
permita a los usuarios encontrar lo que están buscando.
Historia del Diseño Web
En un principio era sólo texto, pero a medida que ha evolucionado la
tecnología, tanto los ordenadores como las redes de telecomunicaciones, se
ha generado nuevas formas de desarrollar la web. La inclusión de imágenes
fue la más significativa, pero también debemos mencionar el vídeo y la
animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y
de interactividad jamás imaginados antes.
El diseño de páginas web se ha desarrollado a medida que ha
evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web.
Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los
8.000 millones de sitios, a los que diariamente se les suma a raíz de 4400
por día.
Rápidamente, su importancia alcanzará las mismas cuotas que la
televisión o el teléfono. Datos recientes estiman que hay alrededor de 2 mil
millones de páginas colgadas y se espera que en los próximos años llegue a
los 8 mil millones, excediendo el número de habitantes del planeta. Sin
embargo, sólo una fracción de este número es visitado habitualmente por la
mayoría de los usuarios (sólo alrededor de 15.000 sitios webs, el 0,4% del
total).
5
A partir de estos datos se puede entender la necesidad de concentrar
los esfuerzos para atraer y mantener la atención de los usuarios. Junto con
un desarrollo efectivo de la estructura web y del contenido, el diseño y el uso
del color son la llave para atraer y ser identificado, formando vínculos en el
subconsciente del usuario y generar esquemas para captar y fidelizar a
nuevos visitantes.
Al mismo tiempo que la evolución de los aparatos y de su introducción
en los hogares, también ha aumentado la calidad de las transmisiones a
través Internet y ha bajado su precio. A medida que la tecnología ha
solventado estas dificultades, ya no nos encontramos con problemas de
forma sino de contenido.
Generación del Diseño Web
En 1997, David Siegel en Técnicas avanzadas para el diseño de
páginas web distinguía 3 generaciones en el desarrollo de las interfaces de la
WWW:
Webs de primera generación:
estructura lineal
eventual inserción de fotografías y líneas de separación
baja definición (proyectados para terminales ASCII en blanco y
negro)
Webs de segunda generación:
iconos en vez de palabras subrayadas con azul
menú de opciones
fondos coloreados o con imágenes
bordes azules alrededor de las figuras interactivas
Webs de tercera generación:
hegemonía del diseño sobre la tecnología
6
utilización de metáforas
uso de un layout tipográfico y visual para la descripción de una
página bidimensional
estructura entrada -área central- salida
Sin embargo, hoy podemos hablar de una cuarta generación de webs
en las que prima tanto el diseño gráfico como la tecnología. Los webmasters
ya no son sólo diseñadores gráficos, sino expertos informáticos que han de
conocer los nuevos lenguajes, dominar las nuevas herramientas de
programación, conectividad a base de datos, seguridad, etc. El hipertexto ya
no es una colección de textos enlazados, sino un espacio de intercambio de
servicios de todo tipo: culturales, informativos, comerciales, sociales, etc.
Son muchos los factores que hay que tener en cuenta a la hora de
diseñar un sitio web. Sin embargo, dos factores destacan sobre los demás:
su contenido y el diseño de la interfaz. Los arquitectos de la información se
ocupan ahora del diseño centrado tanto en el uso, como en el usuario para
hacerle a éste las tareas lo más sencillas posibles.
Tipos de Diseño Web
El diseño y programación de una página web para negocios u
organizaciones puede realizarse con diferentes tecnologías. Estas
tecnologías se clasifican en dos grupos: los sitios web estáticos y los sitios
web dinámicos.
El sitio web estático: Es aquel cuyo contenido no se cambia con
frecuencia y se actualiza de forma manual por alguna persona o
personas a través de programas editores de páginas web.
En este tipo de web la información actualizable son pequeños detalles
como sustitución de fotos, o de teléfono, dirección.
7
El sitio web dinámico: Es aquel que necesite cambios frecuentes en
la información. Suelen ser secciones de noticias, ofertas, boletines.
Entre los tipos de programación dinámica, destacan la programación
en PHP, Active Server Pages (ASP), y Java Server Pages (JSP).
Los sitios dinámicos a menudo incluyen contenido que se recupera de
una o más bases de datos o usando tecnologías basadas en XML como por
ejemplo el RSS.
Existen también contenidos activos mostrados mediante Flash, Shockwave o
Java.
Páginas Web para Pymes, Empresas, Autónomos: Este tipo de
página es utilizada para promover los productos y servicios de una
empresa o negocio.
Contiene este tipo de secciones:
Información de empresa, negocio, fundación, etc
Catálogo de los productos o servicios que se ofrecen.
Formas de contacto.
Sitios web de Comercio Electrónico
Son las tiendas virtuales o tiendas online y ofrece la venta de productos con
pago online o a través de pedidos.
Contiene este tipo de secciones:
Catálogo de productos y precios.
Carro de compras.
Opciones de cobro/pago, mediante transferencias, contra
reembolso o pago online.
Secciones para informar sobre garantías, forma de entregas,
etc
Administrador online para control de stock, dar seguimiento a
las compras, ventas, facturación y distribución.
8
Páginas web para publicitar una Imagen Corporativa: Este tipo de
página está pensada para aquellos que desean promocionar una
marca o producto en el mercado.
Otros tipos de páginas web pueden ser:
Portales online.
Sitios para búsquedas y almacenamiento de datos.
Directorios.
Portales de anuncios.
Sitios de música, videos, juegos, chat, blogs
Sitios para realizar descargas
Páginas web Informativos, utilizadas por ejemplo para
enciclopedias o para noticias.
Objetivo del Diseño Web
Es realzar la imagen de una compañía u organización a través de
elementos gráficos con el objeto de reforzar su identidad visual y despertar
una sensación de confianza en el usuario. Aún así y junto con el criterio de
ergonomía, un sitio web debe, sobre todo, cubrir las expectativas del usuario
y permitirle encontrar fácilmente la información que busca.
Etapas del Diseño Web
Para el diseño de páginas web debemos tener en cuenta tres etapas:
1. El diseño visual de la información que se desea editar. En esta etapa
se trabaja distribuyendo el texto, los gráficos, los vínculos a otros
documentos y otros objetos multimedia que se consideren
pertinentes. Es importante que antes de trabajar sobre el computador
9
se realice un boceto o pre diseño sobre el papel. Esto facilitará tener
un orden claro sobre el diseño.
2. Estructura y relación jerárquica de las páginas del sitio web. Una vez
que se tiene el boceto se pasa a 'escribir' 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. Los enlaces que
aparecen subrayados en este documento y otros de Wikipedía son
ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a
otras páginas con información relacionada. La importancia de la
estructura y arborescencia web radica en que los visitantes no
siempre entran por la página principal o inicial y en ese caso el sitio
debe darle la respuesta a lo que busca rápido, además permitirle
navegar por el sitio.
3. Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la
estructura del contenido para mejorar la posición en que aparece la
página en determinada búsqueda. Etapa no gustosa por los
diseñadores gráficos, porque a diferencia del texto, aún para el año
2014 no se pueden tener nuevos resultados en los buscadores con
sitios muy gráficos.
El HTML consta de una serie de elementos que estructuran el texto y
son presentados en forma de hipertexto por agente de usuario o
navegadores. Esto se puede hacer con un simple editor de textos
Aprender HTML es relativamente fácil, así que es sencillo crear páginas
web de este modo. Esta era la única manera de generarlas hasta que
aparecieron, a mediados de 1996, algunos editores visuales de HTML, como
MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es
necesario aprender HTML, con lo cual el desarrollador se concentra en lo
más importante, el diseño del documento.
10
Todo esto teniendo en cuenta el nivel de programación en el diseño de
las aplicaciones y del impacto visual que se quiere generar en el usuario.
Fundamentos del Diseño Web
Un correcto diseño web implica conocer cómo se deben utilizar cada
uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto
de este lenguaje dentro de los estándares establecidos por la W3C y en lo
referente a la web semántica. Debido a la permisibilidad de algunos
navegadores web como Internet Explorer, esta premisa original se ha
perdido. Por ejemplo, este navegador permite que no sea necesario cerrar
las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese
documento web sea universal e independiente del medio que se utilice para
ser mostrado.
La web semántica, por otra parte, aboga por un uso lógico de los
elementos según el significado para el que fueron concebidas. Por ejemplo
se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular
datos. En su última instancia, esto ha supuesto una auténtica revolución en
el diseño web puesto que apuesta por separar totalmente el contenido del
documento de la visualización.
De esta forma se utiliza el documento HTML únicamente para contener,
organizar y estructurar la información y las hojas de estilo CSS, para indicar
como se mostrará dicha información en los diferentes medios (como por
ejemplo, un monitor de computadora, un teléfono móvil, impreso en papel,
leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia
enormemente la accesibilidad del documento.
También existen páginas dinámicas, las cuales permiten interacción
entre la web y el visitante, proporcionándole herramientas tales como
buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel
11
de control de administración de contenidos. Este permite crear, actualizar y
administrar cantidades ilimitadas de contenido en la misma.
Qué es la Usabilidad y Cuál es su Importancia en el Diseño Web
En el diseño de sitios web la usabilidad tiene relación con la facilidad de
uso de los sitios en Internet así como la capacidad de que los usuarios y
visitantes puedan navegar por el mismo de una forma práctica, útil y sencilla.
En principio, la Usabilidad no es algo que normalmente se maneje
correctamente por parte de los programadores de aplicaciones web ni por los
diseñadores gráficos. En el caso de los primeros, aunque puedan crear sitios
web que funcionen técnicamente bien, no necesariamente son fáciles de
entender por parte de los usuarios. En el segundo caso, aunque los
diseñadores gráficos puedan hacer que las cosas se visualicen de la mejor
manera (bonito, elegante, etc.), no necesariamente eso significa que la forma
como se diagrama y se presenta la información es completamente útil y
accesible para los usuarios.
La Usabilidad es un área del diseño web que debe ser manejada por
especialistas en diagramación, generación de contenidos y análisis funcional
en base al comportamiento humano. Esta área del diseño web es mejor
abordada (por ejemplo) por los especialistas del área de mercadeo y/o
comunicadores sociales especializados en Internet.
Cuando se habla de la Usabilidad, los diseñadores de contenidos deben
crear bocetos (wire-frames en inglés) que reflejen la diagramación y
ubicación de los diversos elementos de información e interacción que los
usuarios van a manejar. Para hacer esto se requiere de aplicaciones de
software especializadas en el manejo de este tipo de bocetos. A su vez, los
diseñadores de contenidos deben tener muy claras las técnicas que permitan
12
transmitir el mensaje comunicacional adecuado para que el sitio web logre
los objetivos planteados, incluyendo las técnicas de mercadeo y ventas.
Para que en un Sitio Web pueda existir una adecuada Usabilidad, que
garantice una excelente experiencia del usuario, deben cumplirse algunos
principios básicos, como son:
La Facilidad del Aprendizaje, que representa la facilidad con la que
los nuevos visitantes desarrollan una interacción efectiva con el sitio
web, siendo capaces de predecir las interacciones y familiarizarse
rápidamente con las mismas en base a su consistencia y coherencia
lógica.
La Facilidad de Uso: Representa la facilidad con la que el visitante
hace uso del sitio web, con la menor cantidad de pasos posible y de la
forma más natural posible, determinando así la eficacia y eficiencia del
sitio web.
La Flexibilidad: Es relativa a la variedad de posibilidades con las que
el visitante y el sitio web pueden interactuar. Esto incluye los distintos
diálogos, la diversidad de vías para realizar las funciones, la similitud
con otras funcionalidades y la optimización.
La Robustez: Es el nivel de apoyo al usuario por parte de la
plataforma web que garantiza su confiabilidad y disponibilidad en
línea, facilitándole el cumplimiento de sus objetivos.
Además de los bocetos que diagraman las diversas páginas del sitio
web, es necesario diseñar toda la navegabilidad del mismo, a través de
diagramas de bloques que indiquen cómo funcionarán los menús y
submenús, y como será el mapa de navegación del mismo.
Para que el sitio web pueda diagramarse y navegarse de la mejor forma
posible, el diseñador de contenidos debe conocer diversos aspectos
fundamentales incluyendo: ¿Quién es el público objetivo?, ¿Cuál será la
función del sitio web? , ¿Qué nivel de conocimientos tendrán los usuarios
13
que navegarán en el sitio web?, ¿Cuáles serán los elementos
diferenciadores que lograrán la mejor experiencia del usuario al navegar en
el sitio web?, ¿Qué factores de influencia lograrán convertir a los visitantes
en compradores?, entre otros.
Existen otros factores que influyen en forma importante en la Usabilidad
de un sitio web, tales como: la velocidad de descarga para mostrarse en
pantalla, los colores usados que permitan una lectura adecuada, el manejo
equilibrado de las imágenes, el uso de animaciones con criterio de escasez,
el minimalismo, la adaptabilidad a los diversos dispositivos fijos o móviles
desde los cuales se conectan los usuarios y a los distintos tipos de
navegadores, el tamaño de las letras y el tipo de letras a utilizar, la
jerarquización de la información, la minimización de los clics necesarios para
lograr las acciones, la minimización del uso de las barras de desplazamiento
(scroll), entre otros.
Cuando una empresa o institución decide tener presencia en Internet, y
se asegura de que su proveedor garantice una excelente Usabilidad, obtiene
diversos beneficios, incluyendo: disminución de costos de producción,
disminución de los costos de mantenimiento y soporte al cliente,
mejoramiento de la imagen de la organización frente al, aumento de las
ventas, aumento de la satisfacción del usuario, entre otros beneficios.
El desarrollo del software web para su correcta funcionalidad y nivel
tecnológico, y los aspectos gráficos que hacen que los sitios web se
visualicen adecuadamente, son necesarios más no suficientes para una
excelente Usabilidad. Además de esto es necesario que el sitio web sea
entendible, innovador, sencillo, inteligente y atractivo.
Finalmente, en la medida en que un sitio o portal web tenga mayor
cantidad de páginas y opciones de navegación, mayor será la necesidad de
que su Usabilidad sea mejor diseñada de tal forma que los usuarios no se
pierdan entre sus enlaces internos.
14
Implementación de un Diseño Web
A diferencia de la publicación de un libro, o la producción de un material
para ser emitido por televisión, la implementación de una página en la Web,
para que pueda ser visualizada eventualmente por millones de usuarios, es
algo relativamente simple si se dispone de las herramientas adecuadas. Por
otra parte, el costo que demande esta acción es en la actualidad
relativamente bajo como se señalará más adelante. Ante todo es importante
destacar que el proceso de desarrollo de una página en la Web se compone
de tres etapas fundamentales:
1. Pre diseño o Conceptualización: Etapa primordial en la cual se
definen los objetivos básicos que darán sentido al hecho de conformar
una página en la Web y se establecen las características que tendrá la
página, tanto en su contenido como en su estética.
2. Construcción: En la cual se "da forma" a la página, de modo tal que
pueda ser interpretada convenientemente por un visualizador web,
básicamente mediante las etiquetas correspondientes al lenguaje
HTML.
3. Implementación: En un servidor Momento en el cual se establece el
espacio físico donde residirá la página.
1. Pre diseño o Conceptualización
Podemos sintetizar el proceso que va desde el momento que decidimos
hacer una página para la Web hasta que la tenemos finalizada para su
implementación en un servidor
El punto de vista desde el cual analizamos el proceso de diseño es el
de pensar la Web no como la interrelación usuario-tecnología, sino como
15
interacción humana, mediatizada por la tecnología. Es decir, entender la Web
como medio de comunicación entre personas. Estas ideas deberían
servirnos como brújula durante todo el proceso del diseño y ayudarnos a
pensar permanentemente en “el otro”, la persona invisible y desconocida
para quien hacemos nuestra página web.
De todas las palabras que utilizamos para hablar de Internet, la que
más deberíamos tener en cuenta los diseñadores es la que designa al acto
de instalar un sitio web en un servidor: la palabra publicar. Publicar, hacer
público un sitio, pensar en el público, pensar en cómo piensa el público,
como veremos enseguida.
La etapa de pre diseño o conceptualización puede, a su vez, dividirse
en cinco componentes, lo que facilitará nuestro análisis. Ellos son: objetivos,
público, contenidos, estructura y visualización. No se trata de etapas, sino de
elementos del pre diseño que interactúan entre sí y se condicionan
mutuamente
1.1 Objetivos
De estos cinco elementos hay uno que “manda”, que determina al resto:
los objetivos de la Web.
Hay que responder a la pregunta: ¿para qué se publica esta página web?, o,
dicho en otros términos: ¿qué deseamos que suceda a raíz de la publicación
de una página web?
En la elaboración del objetivo (si existe más de uno hay que listarlos a
todos y jerarquizar) conviene que participen todas las personas que tienen
que ver o están interesadas en el éxito del proyecto. Y conviene que lo
acordado se escriba, negro sobre blanco, ya que debería ser la referencia
obligada para tomar decisiones de diseño en cualquier momento del proceso.
En este momento habría que validar si las aspiraciones expresadas en
los objetivos son compatibles con el funcionamiento de Internet. Por ejemplo,
16
si bien es posible vender libros, discos, pizzas o corbatas a través de
Internet, posiblemente no funcione con calzado, que necesita ser
“físicamente probado”.
Aunque la principal “materia” que se trabaja en el ámbito educativo es la
información, no siempre la Web es el ámbito adecuado. Por ejemplo: los
cambios de último momento en la programación de un evento educativo no
llegarán a todos los interesados si sólo se publican en la página web, ya que
la misma no es -habitualmente- un material de consulta diaria.
1.2 Público
Cuando hablamos de públicos no nos referimos a cualquier persona
que recorriendo la Red llegue a nuestra página, sino a aquella parte de la
población a la que pretendemos alcanzar e influir con el mensaje. Esto está
estrechamente vinculado con los objetivos establecidos y la naturaleza del
sitio que nos proponemos.
Necesitamos construir un identi-kit de nuestro público, tratando de
definir sus intereses, inclinaciones, gustos, preferencias, etc., en general, y
en particular como usuarios de Internet. Tenemos que dar respuesta -lo más
concreta y específicamente posible- a la pregunta: esa gente, ¿qué busca en
mi página? Porque la página web debería dar respuesta a esa respuesta.
Todo lo que sepamos (o supongamos) sobre el público-target (el que
nos interesa) servirá además para establecer parte de los criterios de diseño
de contenidos, lenguajes y estética.
1.3 Contenidos
Será necesario, luego, listar la información que se desea incluir en la
página web.
17
Esta información debería ser significativa, interesante, útil, para el
público-target. Teniendo en cuenta lo que a ellos les interesa, y no lo que a
nosotros nos gustaría que les interese.
En el caso de que existan otras formas de acceso a información
disponible para esas mismas personas, el contenido de la página web
deberá ser superado de esos otros materiales. Es decir que, si los clientes de
una firma reciben un folleto en el que se describen los servicios que se
prestan, la página web a la que accederán luego no puede repetir
simplemente lo que allí se dice.
Información, y no textos redundantes sobre la importancia de esa
información es lo que debería contener la página web. Si un link nos deriva a
una página referenciada como “seminarios de verano”, en la misma el
usuario debería encontrar información, lo más detallada posible sobre dichos
seminarios. Un texto que cuente que “se realizan seminarios de verano, los
cuales son muy buenos, etc.” resulta sumamente frustrante. El usuario ya
sabe eso antes de entrar a la página y no fue allí en busca de nuevas
autoalabanzas.
El lenguaje utilizado para brindar la información en Internet debería ser
sobrio, conciso, concreto. No funciona bien el lenguaje insinuante y ambiguo
que puede ser perfecto para avisos gráficos.
Recordemos, de paso, que todo lo que hacemos contribuye a formar la
imagen que tiene el público de la empresa, marca, producto, institución o
servicio. La Web no es una excepción y cualquier sentimiento de frustración
que experimente el usuario no se canalizará hacia el o los autores de la Web,
sino hacia la imagen que mencionamos.
1.4 Estructura
La organización de la información es un tema clave para asegurar el
buen funcionamiento de un sitio. El primer elemento organizador son las
18
páginas. Conviene incluir en cada una de ellas una unidad de información
autónoma, completa.
En el caso de que el volumen sea excesivo para ello, dividir esa unidad
de información en sub-unidades más pequeñas, coherentes, completas cada
una en sí misma. Una unidad de información es un tema o sub-tema.
Las relaciones de las páginas entre sí configuran la estructura del sitio.
A partir de la página principal u HomePage se vinculan mediante links el
resto de las páginas. Esto es bastante sencillo realizarlo desde el punto de
vista del HTML. Lo más complicado es decidir de qué manera, en qué orden,
con qué configuración se establece la cadena de vínculos.
Ante todo hay que tener en cuenta que la estructura debe responder a
los criterios de búsqueda. Hay que hacerse la pregunta (y contestarla) acerca
de ¿cómo se intentará encontrar esta información? Los criterios “naturales”
de clasificación pueden no ser adecuados. Por ejemplo, es común que
quienes venden repuestos acomoden los mismos por tipo: juntas por aquí,
poleas por allí, resortes de este lado. El usuario, a su vez, necesita el
repuesto para una máquina o artefacto determinado, y en su imaginario la
jerarquía es, más o menos: tipo de máquina o artefacto, marca, modelo,
función del repuesto que busca. Los links y la estructura del sitio tendrán que
tener en cuenta estas cuestiones.
El otro tema es que los usuarios recorren las páginas de la Web
utilizando como guía “palabras-clave” colocadas en botones, barras de
control, gráficos mapeados o utilizadas como marcas de hipertexto; palabras
que por su significado indican o sugieren el contenido de las páginas a las
que derivan. Es sabido que los significados de las palabras no son unívocos,
y la ambigüedad puede ser importante. El conocimiento de la cultura y usos
lingüísticos del público-target nos será sin duda de gran utilidad a la hora de
elegir las palabras que titularán nuestros botones o identificarán los links de
derivación a otras páginas del sitio.
19
Hay que tener en cuenta también que el usuario no tiene manera de
saber cómo sigue la cadena de links, más allá de las páginas a las que
puede entrar directamente desde el lugar donde se encuentra.
Recordemos la imagen de la habitación con puertas que dan a otras
habitaciones. Uno puede sólo imaginar lo que hay más allá de esas
habitaciones inmediatas. Cuando organicemos la información deberemos
tener esto en cuenta. Que el usuario no encuentre la información buscada
después de recorrer cuatro o cinco páginas encadenadas puede significar
que el mismo abandone el sitio con la no deseada sensación de frustración,
que nos interesa evitar.
Un tema relacionado a este es el de los mecanismos de identificación y
de recorrido del sitio. Los mismos deberían permitir al usuario saber en todo
momento el lugar o zona del sitio donde se encuentra, así como desplazarse
hacia cualquier otra página sin necesidad de recorrer toda la cadena en
sentido inverso. Los “paneles de control” son una buena ayuda para eso.
También la tecnología de frames puede ayudar a estructurar sistemas
de identificación y navegación eficaces. También es amabilidad para con el
usuario colocar botones para subir a la cabecera de la página, en el caso de
que la misma sea extensa y deba ser recorrida mediante el scroll.
1.5 Visualización
Un sitio web no es una torta. No se decora. Lamentablemente es muy
frecuente escuchar las expresiones “decorar” y “adornar” en referencia a los
aspectos de visualización de una página web.
La gráfica (incluida elementos multimedia) de una página web es (debería
ser) una herramienta de comunicación al servicio de los objetivos planteados,
y condicionada por las pautas culturales (preferencias, gustos) del público-
target.
20
Esto significa que tampoco es un espacio de lucimiento del diseñador,
ni la estética debe adecuarse a los gustos y preferencias de los responsables
o decisores del sitio.
Una vez más los objetivos trazados y el perfil del público-targetdeberían
ser los instrumentos para tomar decisiones de diseño gráfico y multimedia.
Además de los criterios estéticos y comunicacionales del diseño gráfico, es
importante respetar otros criterios técnicos específicos:
Que cada página sea fácil de cargar.
La velocidad de carga de una página es función del estado de
las líneas y de la cantidad de información que contiene. Sobre
el primer parámetro no hay nada que podamos hacer desde el
diseño, pero sí sobre el segundo: establecer para cada página
un máximo de bytes y no sobrepasar el mismo.
Realizar los gráficos del tamaño más chico posible.
Repetir los íconos siempre que sea posible. El browser los leerá
del cache a partir de la segunda vez que deba colocarlos en la
página.
Grabar cada gráfico en formato GIF y JPG, verificando cuál
resulta más pequeño y descartando el otro.
Reducir la cantidad de colores de cada gráfico al mínimo
indispensable. De todos modos la mayor parte de los usuarios
no pueden visualizar más de 256.
Reflexionar cuidadosamente sobre la utilización de recursos
multimedia: ¿agregan realmente algo a la página?
Que las páginas sean fáciles de leer.
Resolver el contraste texto fondo con valores de luminosidad y
no sólo de color. Eliminar el color del monitor, si el mismo tiene
esa posibilidad, o imprimir la página en una láser monocroma
para verificar esto.
21
Tener cuidado con las texturas del fondo (background). Las
mismas no deben tener un dibujo excesivamente nítido que
perjudique la lectura. Tampoco es conveniente que sean
motivos muy contrastados (con tonos claros y oscuros) ya que
se verán mal tanto los textos oscuros como los claros. En caso
de utilizar texturas “fuertes” agrandar bastante el tamaño de la
tipografía.
El tamaño de la tipografía debe ser suficiente para ser leído sin
dificultad aún en computadoras con altas resoluciones de
pantalla.
Es importante jerarquizar títulos y subtítulos, manteniendo la
coherencia de estilos en todo el sitio. Para eso es una buena
ayuda escribir una pequeña “norma” que establezca el tamaño
relativo de tipografía para cada categoría de títulos y subtítulos,
así como si los mismos van centrados, alineados, con “bullets”,
etc.
Establecer guías visuales que permitan saber que cada página
pertenece al mismo sitio. La coherencia visual ayuda en ese sentido.
Un sitio en el que cada página tiene un fondo diferente, varían los
íconos y cambian otros componentes de la composición visual,
desconcierta al usuario, el cual no sabe si está en la misma página
web o el último link lo llevó a la otra punta del mundo.
2. Construcción
Una vez definidos los contenidos, y la forma en que éstos se
presentarán -tanto estética como funcionalmente- a los ocasionales visitantes
de la página web, es necesario codificar esta información de modo tal que
pueda ser interpretada por un visualizador Web, por ejemplo.
22
Como se señaló oportunamente en el Capítulo 2, dedicado al
funcionamiento de la Web, HTML (HyperText Markup Language, o Lenguaje
de Marcado para Hipertexto) es el lenguaje con el cual están escritos los
documentos para la Web. HTML no es más que un gran conjunto de "tags" o
etiquetas, las cuales se enmarcan dentro de una signo < (menor) y un signo
>(mayor), como por ejemplo:
<ETIQUETA1>
En general, salvo algunas excepciones, las etiquetas de HTML se
incluyen de a pares, la primera para abrir, y la segunda para cerrar. Para
diferenciar su acción, a la segunda se la antecede por una barra diagonal (/),
como se indica a continuación:
<ETIQUETA1> Etiqueta de apertura
</ETIQUETA1> Etiqueta de cierre
La estructura básica de un documento HTML (que no tenga marcos o
frames, como se verá más adelante), puede sintetizarse de la siguiente
forma:
Donde:
<html> y </html> indican que el documento está escrito en HTML.
<head> y </head> definen el encabezamiento del documento, que
básicamente incluye el titulo de la página (el cual se coloca entre las
etiquetas <title> y </title>); y eventualmente alguna otra etiqueta, como las
“meta name”, que indican una breve descripción del contenido de la página
y/o palabras clave de la misma que ayudan a las máquinas buscadoras de
información en Internet
23
<body> y </body> es el lugar donde se introduce el contenido
propiamente dicho de la página Web.
La siguiente lista, a modo de ejemplo, señala algunas de las etiquetas
más comunes de HTML:
Asimismo, y dado que los caracteres superiores a 127 del código
ASCII son específicos para cada lenguaje, se debe utilizar una secuencia de
símbolos para definir los caracteres acentuados propios de nuestro idioma y
la letra ñ, como así también para caracteres especiales como los de apertura
de exclamación e interrogación. A continuación se indican estas secuencias
para cada uno de los caracteres:
Ahora bien, ¿cómo y dónde se adosan estas etiquetas al contenido
específico de una página web? En su versión más "rudimentaria", se puede
trabajar con un editor de texto cualquiera, por ejemplo el Bloc de Notas de
Windows, donde se irá incorporando el contenido del documento
24
acompañado de las etiquetas correspondientes, para luego observar los
resultados desde el visualizador.
Los editores HTML
La codificación de páginas Web en formato HTML puede resultar una
tarea laboriosa y tediosa -aunque no extremadamente difícil- para el
ocasional usuario que desee llevar adelante la construcción de una página
en la Web. Imaginemos la página en cuestión en un estado avanzado, y su
correspondiente "esqueleto" en etiquetas HTML introducidas "a mano".
Seguramente nos demandaría largas jornadas de trabajo en algo que,
más que inteligencia y habilidad, requiere paciencia y minuciosidad. A
efectos de salvar este inconveniente comenzaron a aparecer los llamados
"Editores HTML", cuya función principal es la de ayudar al diseñador de una
página web en el aspecto de la introducción de las etiquetas.
Los primeros y más simples editores (actualmente hay más de un
centenar, la mayoría de los cuales se comercializa bajo la modalidad
shareware), poseían una barra de herramientas entre las cuales se
encontraban los iconos de las etiquetas más usuales.
Dos ejemplos de este tipo de programas, HTML Assistant yWebEdit,
muestran la forma similar de trabajo: un gran sector dedicado a la
introducción del contenido y sus respectivas etiquetas, y una zona superior
con la barra de herramientas. Como bien puede suponerse, se trata de un
Bloc de Notas mejorado a tal fin, pero que en definitiva no permiten ir viendo
cómo va quedando la página en cuestión.
Para salvar este inconveniente surgieron los "Editores HTML
WYSIWYG". Este extraño acrónimo (pronúnciese "guaisiguai") proviene de
las primeras letras de la frase "What You See Is What You Get", lo cual
significa "Lo que ve es lo que obtiene", y es una conocida filosofía de diseño
para los programas de procesamiento de texto y de autoedición
25
fundamentalmente, donde la acción de los comandos de formateo sobre el
texto que se ven en la pantalla del monitor, producen el mismo efecto, o
apariencia final, con la cual se imprimirá el documento.
En el caso específico de las páginas web, este tipo de editores permiten
ir formateando el contenido, de tal forma que lo que allí se vaya creando sea
prácticamente lo que luego se observe desde el visualizador. Y decimos
"prácticamente" y no "exactamente", porque existen algunas pequeñas
diferencias, inclusive vistas con distintos visualizadores, que hacen que el
documento creado sobre el Editor
HTML sea muy parecido, pero no igual, al observado desde el
visualizador. Como puede suponerse, este tipo de editores hacen más
"transparente" al usuario la creación de páginas web, evitándole la ardua
tarea de conocer las etiquetas HTML y de introducirlas adecuadamente, lo
cual muchas veces lleva a errores. De todas formas, algunos conocimientos
básicos de HTML nunca están de más, sobre todo a la hora de introducir
manualmente alguna línea de comando no prevista por el Editor (como por
ejemplo la correspondiente a un "Contador de visitantes", la cual se verá más
adelante), o para analizar cómo se resolvió una página web que nos haya
resultado interesante.
Dentro de la gama de editores de estas características se encuentran
Dreamweaver (Macromedia), quizás el más sofisticado y empleado por los
profesionales del sector, GoLive (Adobe) y FrontPage 2000, de Microsoft.
FrontPage Express, también de Microsoft, se incluye en forma gratuita en la
suite Internet Explorer, y si bien es una versión simplificada de FrontPage
2000, es una herramienta muy útil y sencilla para quienes deseen dar los
primeros pasos en la construcción de páginas web
26
3. Implementación
Una vez que se ha construido la página Web, y en función de que el
propósito fundamental es el de ponerla a consideración del resto de los
usuarios de Internet, el paso siguiente consiste en ubicar el lugar donde se
hospedará a la misma.
Dado que disponer de un servidor propio con una conexión permanente
a la Red supone una gran inversión económica, a la par de un alto grado de
conocimientos técnicos en lo que se refiere a la instalación y mantenimiento
del servidor, la solución más simple estriba en colocar la página en algún
servidor que ya esté conectado a la Red, y que ofrezca este servicio, sea en
forma gratuita o paga.
Las diferentes posibilidades en este sentido son las siguientes:
Algunos organismos académicos (por ejemplo las universidades) o
gubernamentales (por ejemplo Ministerio de Educación) ofrecen a sus
miembros en forma gratuita un espacio físico para situar su página,
siempre y cuando se adecuen a ciertas normas éticas y no persigan
un objetivo comercial.
Los proveedores de servicios de Internet (ISP) ponen a disposición de
sus clientes el espacio que éstos requieran, con un costo variable por
cada Mb de información. En algunos proveedores este servicio está
incluido en el abono mensual de conexión, con un tope máximo,
debiéndose pagar una tarifa extra por cada Mb adicional. Asimismo,
algunos proveedores también ofrecen la posibilidad de colocar la
página en cuestión no sólo en el servidor local sino también en un
servidor "mirror" (espejo) situado en los Estados Unidos, con la
ventaja de acceder más rápidamente tanto desde Estados Unidos
como desde otros lugares del mundo.
Ciertas empresas comerciales dedicadas al "hosting" (hospedaje), que
ofrecen servicios más avanzados y profesionales, con la posibilidad
27
del dominio propio, servidor de Real Audio, CGI's propios, estadísticas
de acceso, etc.
Algunos provedores de "hosting"
En inglés:
Apollo Hosting http://www.apollohosting.com
Your-Site http://www.your-site.com
Blue Domino http://www.bluedomino.com
Radiant http://www.radiant.net
En español:
Hosting-Dominios http://www.hosting-dominios.com/hd/ha/
Towebs http://www.towebs.com
MediaWeb http://www.mediawww.com.ar/hosting.html
Mihosting http://www.mihosting.net
Ideas Múltiples http://www.ideasmultiples.com/
28
Conclusión
El Diseño web es un tema complejo, en el que no sólo intervienen
procesos de Diseño gráfico, sino que también son imprescindibles los
aspectos como arquitectura de la información, navegación, usabilidad,
funcionalidad, programación en cliente, entre otros.
El diseño web tras su historia se ha visto en la necesidad de cambiar
su estilo, se ha visto obligada a avanzar a la par de las tecnologías, a medida
de la evolución del internet este evoluciona con él, aumentando cada día
más la existencia de sitios web, convirtiéndola en la preferida de los usuarios,
atrayendo su atención siendo los sitios más visitados, todo lo que representa
el poder del diseño web. Tres grandes generaciones web desde el año 1997,
se le ha ido incorporando características para su mejor construcción, tanto
que se has dado inicio hoy en día a lo que diseñadores llamarían la cuarta
generación, el intercambio cultural, informativo, comerciales, sociales, etc., lo
han llevado a sobrepasar los límites, cada vez incentivando al usuario a
entrar una y otra vez a estos sitios web.
De la misma forma permite elegir el tipo de diseño web, si solo se
desea dejar una información que no cambie con frecuencia, o aquellas que
suelen ser secciones que requieren de cambios constantes, todo
dependiendo de lo que atrape en su objetivo para reforzar su identidad visual
y despertar nuevas sensaciones al usuario. Sin embargo no es de entrar
diseñar, dejando listo sitio web a disposición de los usuarios, no, se debe
tener en cuenta que existen etapas y fundamentos específicos para iniciar un
diseño que será visto por millones de usuarios en la web, consta de una serie
de elementos que la estructuran, teniendo en cuenta el nivel de
programación en el diseño de las aplicaciones ya que, un correcto diseño
web implica conocer cómo se debe utilizar los distintos elementos y
herramientas.
29
Se puede finalizar con decir que el diseño web es una actividad que
consiste en la planificación, diseño e implementación de sitios web. No es
simplemente una aplicación de diseño convencional, ya que requiere tener
en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la
información y la interacción de medios como el audio, texto, imagen, enlaces
y video. La unión de un buen diseño con una jerarquía bien elaborada de
contenidos, aumenta la eficiencia de la web como canal de comunicación e
intercambio de datos, que brinda posibilidades como el contacto directo entre
el productor y el consumidor de contenidos. A esto se le atribuye su
importancia, la aplicación se basa en que éste será el que modele la
interacción entre usuario y aplicación, y por tanto posibilitará o no la
consecución de los objetivos perseguidos por el usuario (encontrar
información, comprar, comunicarse, aprender). El diseño de páginas web se
trata básicamente de realizar un documento con información híper enlazado
con otros documentos y asignarle una presentación para diferentes
dispositivos de salida.
30
Referencias Bibliográficas
Fuentes Electrónicas
Diseño de una página web. Generación diseño web. Documento en línea. Disponible en: http://www.hipertexto.info/documentos/diseg_web.htm. [Consulta: 14 de Octubre del 2014]
Educoas. Implementación de un Diseño Web. Docimento en Linea.
Disponible en: http://www.educoas.org/portal/bdigital/contenido/valzac chi/valzacchicapitulo-15new.pdf. [Consulta: 14 de Octubre del 2014]
Negocios en Internet. Que es la usabilidad y cuál es su importancia en el
diseño web. Documento en Línea. Disponible en: http://www.negocioseninternet.com.ve/2012/10/22/que-es-la-usabilidad-y-cual-es-su-importancia-en-el-diseno-web/. [Consulta: 14 de Octubre del 2014]
Webmastering. Objetivo del diseño web. Documento en línea. Disponible en:
http://es.kioskea.net/contents/781-webmastering-diseno-web. [Consulta: 14 de Octubre del 2014]
Webmastering. Que es un diseño web. Documento en línea. Disponible en:
http://es.kioskea.net/contents/781-webmastering-diseno-web. [Consulta: 14 de Octubre del 2014]
Web Mediterránea. Tipos de Diseños Web. Documento en Línea. Disponible
en: http://www.webmediterranea.com/tecnologia-pagina-web.htm. [Consulta: 14 de Octubre del 2014]
Wikipedia. Etapas del diseño web. Documento en línea. Disponible en: http://es.wikipedia.org/wiki/Dise%C3%B1o_web#etapas. [Consulta: 14 de Octubre del 2014]
Wikipedia. Fundamentos del diseño web. Documento en línea. Disponible en:
http://es.wikipedia.org/wiki/Dise%C3%B1o_web#fundamentos. [Consulta: 14 de Octubre del 2014]
Wikipedia. Historia del diseño web. Documento en línea. Disponible en:
http://es.wikipedia.org/wiki/Dise%C3%B1o_web#Historia. [Consulta: 14 de Octubre del 2014]