Manual de Proyectos Web

Manual de Proyectos Web
Escuela Superior de Economía y Negocios

Volumen 3 – Diseño Web
Preparado por Ing. Felipe Torres

Decano de Ingeniería Industrial y de Negocios
Manual de Proyectos WEB
Introducción
Este documento conforma parte de una serie de artículos que han sido preparados como material
académico para el concurso Arroba de Oro y conforman un manual para desarrollar las mejores prácticas
y lograr implementar estándares de clase mundial en los proyectos web y dejar cimientos para los futuros
desarrollos web.
Este manual cubre aspectos administrativos de proyectos y mejores prácticas para la formación del
equipo de trabajo, desarrollo adecuado de los términos de referencia y licitación del desarrollo web o
construcción de la aplicación internamente.
Se introducen conceptos de vanguardia en el diseño, desarrollo e implementación de proyectos web

asociados a la llamada Web 2.0, lo que conlleva más que realizar alguna inversión tecnológica en el
programa , pero escuchar y, sobre todo, conversar y relacionarse con los usuarios. Conlleva una
transformación total de la cultura actual de los clientes o usuarios de los productos o servicios ofrecidos
por la Internet. Atributos derivados de las nuevas tecnologías, como rapidez, colaboración y
transparencia, afectarán a la toma de decisiones del programa. Las propuestas pasarán de generarse
exclusivamente entre las personas que forman parte del equipo directivo a dar entrada a empleados,
proveedores y hasta clientes en los procesos estratégicos de decisión.
La irrupción de las nuevas tecnologías sociales (blogs, wikis, podcast, redes sociales, etc.) ha generado un
alto grado de interconectividad entre las personas, lo que les permite intercambiar todo tipo de opiniones
sobre diferentes productos, servicios y experiencias con otras personas. Cada día más las personas toman
decisiones de compra de productos o servicios orientados o motivados por la información que encuentra
en la web social. Las empresas deben tener muy presente que las conversaciones y recomendaciones que
tienen lugar en la web social ocupan ya más del 15% del tráfico en Internet.
Este manual además presenta las herramientas concretas para verificar la correcta implementación de
todos los estándares asociados a los nuevos proyectos web, así también como pruebas específicas para
controlar y auditar los términos de referencia establecidos en la etapa inicial del proyecto.
El siguiente manual ha sido compilado en base a una serie de recursos disponibles publicamente en la
web y citados en las referencias de cada documento. La compilación del material ha sido desarrollada por
el departamento de Ingeniería Industrial y de Negocios de la Escuela Superior de Economía y Negocios
(ESEN).
2|Página Manual de Proyectos Web

Contenidos
Introducción ........................................................................................................................................ 2
4. Diseño Web ..................................................................................................................................... 4
4.1. ¿Qué es una interface? ...................................................................................................................... 4
4.1.1. Elementos de la interfaz ............................................................................................................. 5
4.1.2. Uso de logotipos ......................................................................................................................... 7
4.1.3. Sistema de navegación ............................................................................................................... 7
4.1.4. Áreas de contenidos ................................................................................................................... 8
4.1.5. Áreas de interacción ................................................................................................................... 9
4.1.6. Experiencia de usuario ................................................................................................................ 9
4.2. Diseño para el Acceso Rápido .......................................................................................................... 11
4.2.1. Buenas Prácticas ....................................................................................................................... 12
REFERENCIAS ..................................................................................................................................... 22

4. Diseño Web
Se entiende por diseño web el conjunto de actividades que permiten avanzar desde el concepto que se
defina para el Sitio Web hasta su realización, por lo que no sólo está referido a las tareas relacionadas con
el diseño gráfico, sino que también aborda otras como las definiciones relativas a usabilidad, interacción,
y también a todas las que están relacionadas con los contenidos propiamente tales.
En ésta sección explicamos la importancia de realizar un diseño de las páginas del Sitio Web de acuerdo
a normas estándares y a la importancia que se le debe conceder a la experiencia que tiene el usuario que
lo visita.
Incluye además información de buenas prácticas sobre accesibilidad y para administrar la

retroalimentación proporcionada por los usuarios, además de metodologías para realizar pruebas de
usuarios orientadas a mejorar el sitio.
Es importante señalar que la clave del éxito de un Sitio Web está dada por la forma en que se presenta la
información a los visitantes. Por ello es que en este capítulo se abordan los elementos necesarios para
que, durante la creación de las interfaces de los Sitios Web (las pantallas que el usuario ve y utiliza), se
cumpla con dichos preceptos y la comunicación fluya más directamente entre el organismo y el usuario
final.
4.1. ¿Qué es una interface?

Cuando se habla de Sitios Web, se denomina interfaz al conjunto de elementos de la pantalla que
permiten al usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo, se considera
parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción.
Todos ellos deben estar preparados para ofrecer servicios determinados al usuario, con el fin de que éste
obtenga lo que vino a buscar cuando visitó el Sitio Web. Por lo anterior, cada uno de los elementos que
sean integrados dentro de la interfaz debe estar pensado para causar un efecto sobre el usuario y deben
ser utilizados con un propósito.
En este sentido, es importante considerar que uno de los autores más citados en cuanto a la usabilidad
de los Sitios Web, destaca que los elementos más importantes de la portada de todo Sitio Web se pueden
resumir en cuatro postulados generales:
1. Dejar claro el propósito del sitio: se refiere a que el sitio debe explicar a quién pertenece y qué
permite hacer a quienes lo visitan; se entiende que debe hacerlo de manera simple y rápida. Por
ejemplo, ayuda en este sentido el cumplimiento de las normas referidas a uso de URLs y logotipos
oficiales.
2. Ayudar a los usuarios a encontrar lo que necesitan: implica que debe contar con un sistema de
navegación visible y completo, pero que además deberá estar complementado por algún sistema
de búsqueda que sea efectivo para acceder al contenido al que no se logra acceder o que no se
encuentra a simple vista.

3. Demostrar el contenido del sitio: significa que el contenido se debe mostrar de manera clara, con
títulos comprensibles por parte del usuario y con enlaces hacia las secciones más usadas que
estén disponibles donde el usuario los busque. Ayudará en este sentido tener un seguimiento de
las visitas para comprender qué es lo más visto y lo más buscado del Sitio Web.
4. Usar diseño visual para mejorar y no para definir la interacción del Sitio Web: se refiere a que
los elementos gráficos del Sitio Web deben estar preparados para ayudar en los objetivos del sitio
y no sólo como adornos utilizados para rellenar espacio. Aunque se trata de uno de los temas más
debatibles, su alcance no es el de restringir el uso de imágenes y elementos gráficos, sino a que
su uso sea adecuado para la experiencia de uso que se desea ofrecer.
Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega como visitante
logre los objetivos que lo trajeron al Sitio Web y que ésta le facilite el acceso a los contenidos que están
incorporados a través de sus pantallas.
Para conseguir esto, es necesario que la interfaz adopte los elementos, que detallamos en este capítulo,
a través de los cuales será posible conseguir el cumplimiento de los postulados antes señalados.
4.1.1. Elementos de la interfaz

La interfaz del Sitio Web, cualquiera sea el objetivo que persiga, debe dar cuenta de normas de carácter
general, que se refieren a sus características como sistema de información y comunicación. Gracias al
cumplimiento de éstas, el usuario logrará acceder a las informaciones que se le ofrecen y, además, podrá
realizar las acciones que el organismo dueño del espacio digital le entrega a través de este sistema.
Dichas características tienen que ver con los elementos de identificación, de navegación, de contenidos y
de acción que el Sitio Web debe contener, todos los cuales se analizan en las siguientes páginas.
La existencia e importancia de dichos elementos, como así mismo la ubicación que deben tener en la
interface, se ha visto comprobada a través de las investigaciones que se han hecho en torno a los Sitios
Web. Con ellas se demuestra que las zonas que normalmente se ven en una visita inicial, están
conformadas por una letra F o bien por un triángulo , cuya sección más revisada es la que se encuentra
en la esquina superior izquierda. Lo anterior se aprecia en esta imagen tomada del Sitio Web de la
consultora de Jakob Nielsen:

Figura 3.1.: Las imágenes muestran lo más visto en los Sitios Web a partir de las investigaciones de J. Nielsen; los colores rojos y
amarillo indican lo más visto; azul y gris, lo menos visto (Copyright imagen: www.useit.com).
Por lo anterior, es importante que las interfaces se construyan tomando en cuenta esta evidencia, con el
fin de asegurar que los visitantes reciban la información en cuanto lleguen al Sitio Web, permitiendo que
el diseño web contribuya al mejor uso de los contenidos y funcionalidad, en lugar de afectar dicho uso.
Respecto de los elementos de la interface, los aspectos más relevantes a tener en consideración son los
siguientes:
• Uso de logotipos
• Sistema de navegación
• Áreas de contenidos
• Áreas de interacción
• Experiencia de usuario
Si se revisa el siguiente esquema, se podrá ver la ubicación relativa de todos ellos:

Figura 3.2.: La imagen muestra un diagrama con los diferentes elementos que dan forma a la interfaz.
4.1.2. Uso de logotipos

Uno de los fines del uso de logotipos es que el usuario que ingrese al Sitio Web entienda a quién
pertenece el Sitio Web de un solo vistazo y no tenga que estar adivinando si ha llegado al lugar que
deseaba visitar. Para enfatizar en esto, es recomendable que el logotipo de identificación se ubique en la
esquina superior izquierda de las páginas por tratarse del lugar que siempre se mira con la mayor
frecuencia y que, por la forma más tradicional de construcción del código HTML, aparecerá como uno de
los primeros elementos de la pantalla.
Siguiendo con la identificación del Sitio Web, otro elemento que ayuda en este aspecto es el correcto uso
de la etiqueta <title> en la cabecera de las páginas web , a través de la cual se define el título que mostrará
el Sitio Web en la parte superior de la ventana del browser utilizado. En las imágenes anteriores se puede
apreciar en la barra azul que aparece al tope de cada imagen. En este sentido se recomienda que lleve el
nombre del Sitio Web más un título que describa el contenido de la página, debido a que dicha
información será la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca
alguna palabra o frase que tenga dicha página.
4.1.3. Sistema de navegación

Se denomina "sistema de navegación" al conjunto de elementos presente en cada una de las pantallas,
que permite a un usuario moverse por las diferentes secciones de un Sitio Web y retornar hasta la
portada, sin sentir la sensación de haberse perdido en ese camino.
Para conseguir este objetivo el diseño web debe contemplar, al menos, que el sistema de navegación
cuente con los siguientes elementos:

• Menú de secciones: es una zona de la interfaz en la que se detallan las secciones o categorías en
las que está dividida la información contenida en el Sitio Web. Normalmente se ubica en la parte
superior de cada página o bien en la zona superior derecha o izquierda. Hasta la aparición de los
últimos estudios basados en "eyetracking" no había una recomendación certera acerca de su
ubicación; tras éstos, parece indicado ubicarlos en la zona superior o en la zona superior izquierda.
Menú de rastros: es el menú que indica mediante los nombres de cada sección o categoría del
menú, la distancia que separa a la página actual de la portada. Por ejemplo, si el usuario está
revisando la página del "Programa A", el menú correspondiente debe indicar Portada > Programas
> "Programa A". Este menú debe ir siempre debajo de la Identificación de la sección o categoría
y sobre el título.
• Identificación de secciones: debe estar en la zona superior de la página, de manera cercana la
zona donde se encuentra el logotipo que se haya elegido para identificar al Sitio Web. Puede ser
gráfico y por lo mismo tener alguna imagen alusiva a la sección o categoría o bien ser una solución
que incorpore sólo texto y color. Sí debe tener en forma destacada el nombre de la sección o
categoría y por lo mismo, debe aparecer en todas las pantallas que pertenezcan a dicha ésta. En
términos de tamaño, su ancho debe ser el de la zona de contenido y su alto, no menor a 100
pixeles (aproximado) para una adecuada visualización.
• Botones de acción: son aquellos elementos que permiten realizar acciones directas relativas a la
navegación y que se muestran como parte de ésta, tales como los correspondientes a "Regreso a
la Portada", "Contacto", "Envío de Mail al Sitio" y "Mapa del Sitio".
• Pie de página: aunque regularmente no se le concede importancia en términos de navegación,
se entiende que la zona inferior de cada pantalla cumple el relevante papel de completar su la
información que se ofrece en las zonas superiores de navegación, al entregar datos relativos a la
organización (nombre, direcciones, teléfonos) y repetir enlaces que se han entregado en la zona
superior, para facilitar el contacto del usuario con el sitio.
4.1.4. Áreas de contenidos

Se entiende por "áreas de contenidos" a las zonas en la que se entrega la información en cada página
web, sin importar el formato o los medios que ésta utilice.
Dentro de la zona de contenido se debe distinguir las zonas de título, resumen e información propiamente
tal.
Para la zona de título, se debe trabajar con las estructuras definidas por las etiquetas <h...> que permiten
indicar hasta seis niveles de importancia de los titulares (incluyendo títulos y subtítulos) utilizados en el
documento. Es imprescindible para efectos de Accesibilidad por parte de personas con discapacidades
físicas, en particular para quienes tienen problemas de visión, que el título principal del contenido se
escriba usando la etiqueta HTML conocida como <h1> debido a que los lectores de pantalla usada por
personas ciegas lo destacan como el título principal de la página.
El resumen en tanto, permitirá explicar en dos o tres líneas el contenido de la página y se podrá utilizar
esa misma información para la etiqueta del encabezado que permite incluir una descripción.

Respecto del contenido o información propiamente tal, se debe privilegiar el uso de textos cortos,
separados por subtítulos significativos que permitan entregar de manera concisa y clarea la información
al usuario. Se debe recordar que las personas no leen en pantalla de la misma forma que en los
documentos impresos, por lo que se debe privilegiar la economía de palabras.
Adicionalmente, como parte de los contenidos, siempre se deberá ofrecer información adicional, recursos
multimediales y otros que aprovechen el hecho de que el usuario accede a la información a través de un
sistema computacional. Nuevamente, se debe recordar que los contenidos que no sean textuales deberán
cumplir con las normas de accesibilidad recomendadas por el W3C.
4.1.5. Áreas de interacción

Se entiende por "áreas de interacción" a las zonas en la que se ofrece realización de acciones por parte
de los usuarios del Sitio Web, a través de las cuales pueden utilizar los servicios de la institución que pone
en marcha el espacio digital. La interacción, en este sentido, va desde acciones menores que pueden ser
enlaces para mayor información o suscripción a servicios informativos periódicos, hasta la realización de
trámites complejos como la obtención de certificados o el pago de obligaciones.
Uno de los elementos que se debe tener en cuenta en este aspecto es que el usuario normalmente
entiende que las zonas de contenidos son para leer y revisar información y las zonas de interacción son
las que muestran botones y en ellas no se lee, sino que se ingresa información y se desarrolla la actividad
que el sitio ofrece llevar a cabo.
Por lo mismo, es necesario que en las zonas de interacción haya la mínima información posible y que
siempre sea la necesaria para llevar a cabo en forma adecuada la acción a que se refiere la interfaz.
Por ejemplo, debido a que normalmente la interacción tendrá lugar a través de un formulario, es
necesario que éste sólo cuente con los datos mínimos para que el usuario ingrese lo solicitado para
activarlo.
4.1.6. Experiencia de usuario

Se entiende por "Experiencia de usuario" a lo que siente y experimenta un usuario que ingresa a cada
página web. Si bien no es fácil de medir y adquiere un tono subjetivo al hablar de sensación, sí es un
elemento que se puede modelar gracias al uso de diferentes elementos que son empleados por el usuario
que visita el Sitio Web.
Además de ser un campo de estudio muy abordado desde diferentes disciplinas, el área de Experiencia
de usuario ha recibido aportes muy notables en el último tiempo gracias a la introducción de tecnologías
de seguimiento de las acciones del usuario en un Sitio Web, tales como las de "eyetracking" mencionada
antes que han permitido entender de manera real y concreta la manera en que los usuarios emplean los
espacios digitales.
En este sentido, se ha observado que los usuarios necesitan confirmaciones visuales de las percepciones
que tienen de los contenidos que revisan. Por ejemplo, la utilización de un lenguaje claro genera una tasa
de respuesta más alta que cuando el lenguaje utiliza palabras que no son tan conocidas para el

usuario. Lo mismo ocurre cuando los elementos interactivos como enlaces, botones y zonas de ingreso
de información no se diagraman con las formas a las que el usuario está acostumbrado.
Debido a lo anterior, a continuación se entregarán recomendaciones acerca de tres elementos que son
claves en la experiencia que tiene el usuario y que se utilizan con gran frecuencia: nos referimos a los
enlaces, botones y formularios.
Uso de botones
Los botones son los elementos que permiten que el usuario realice o confirme acciones solicitadas en las
pantallas del Sitio Web. Por lo mismo, su forma debe ser estándar, similar en todo el sitio y no ofrecer
dudas acerca de su presencia o de la acción a la que invita.
Para ello es necesario que se cuide tanto su aspecto físico como la palabra que contiene, ya que ambos
permitirán que el usuario entienda, sin lugar a dudas, qué ocurrirá si lo presiona.
Otro elemento importante es la palabra que acompaña al botón. Esta necesariamente debe estar
relacionada con la acción a realizar y dicha acción debe ser coherente con lo que se ofrece en la pantalla
en la que se esté trabajando. Además, debe ser una sola palabra y corresponder a un verbo que defina
adecuadamente la acción ofrecida.
Finalmente el último elemento relevante es que el botón debe cambiar de estado cuando el mouse está
sobre él, utilizando alguna tecnología que haga evidente su comportamiento como botón activo.
En conclusión, para que un formulario sea efectivo y apoye la experiencia que tendrá el usuario que visite
el Sitio Web, los botones deben parecer tales (en tamaño, forma, acción y contenido) y deberán estar
ubicados de manera que el usuario sepa qué ocurrirá cuando los presione. Asimismo, deben ser parte
integrante de formularios que logren indicar en una frase breve y explicativa, qué ocurrirá al utilizarlos.
Uso de enlaces
Los enlaces son una de las características esenciales de los Sitios Web, ya que permiten al usuario visitar
otros documentos del mismo o externos, sólo haciendo clic sobre una zona demarcada. En este sentido,
si bien el estándar indica que el enlace debe ser subrayado y de color azul, los cambios tecnológicos han
permitir que haya otras formas de hacerlos evidentes.
No obstante, hay ciertos elementos que siguen siendo esenciales respecto de los enlaces y son los
siguientes:
1. Deben ser diferentes al texto: los enlaces se deben diferenciar del texto que los rodea para
explicar visualmente al usuario que se ofrece una acción a partir de su contenido. La forma de
diferenciarlo puede variar pero al menos se debe procurar que esté subrayado y de color
diferente o bien, si no está subrayado, sí se debe mostrar en otro color.
10 | P á g i n a Manual de Proyectos Web

2. Su estado debe ser visual: los enlaces tienen cuatro estados posibles los que deben visualizarse
de manera simple y directa.
a. Enlace sin visitar: es el color que tiene antes de que se le haga clic encima; su color debe
ser diferente del texto que lo rodea.
b. Enlace destacado: es el color que puede adoptar cuando se le pasa el mouse sobre el
enlace y permite ayudar al usuario a descubrir su existencia.
c. Enlace activo: es el color que tiene cuando se le da clic encima; normalmente es un
color fuerte que permite notar que se le ha activado.
d. Enlace visitado: es el color que tiene el enlace cuando ya ha sido activado y la página a
la que conduce ya ha sido visitada.
3. Su contenido debe ser explicativo: los enlaces deben contener palabras que expliquen hacia
dónde se dirige la acción, de tal manera de evitar que lo enlazado sean frases como "clic aquí" y
otras similares. Adicionalmente y para efectos de aumentar su accesibilidad, la sintaxis HTML de
los enlaces debe contener el modificador "title" de tal manera que se despliegue un recuadro
explicativo acerca del efecto que tendrá hacer clic sobre el enlace elegido.
Uso de elementos específicos
Los restantes elementos interactivos que requieren ser revisados son los que permiten definir el tipo de
interacción que se desea ofrecer a los usuarios del Sitio Web.
El primero de ellos es el llamado "Text Area" que es el que permite que el usuario pueda ingresar
información en los formularios. Respecto de éste, se define como buena práctica ofrecer un espacio
adecuado para escritura (por ejemplo, 500 caracteres que equivalen a seis líneas de texto). Sin embargo,
una práctica más adecuada consiste en emplear un contador reverso que informe el total de caracteres
que se puede escribir y que los vaya restando a medida que el usuario va ingresando la información; de
esa manera se le ofrece una retroalimentación adecuada.
El segundo elemento es el "check button" que permite marcar las opciones que sean las más adecuadas
para la acción que se esté realizando dentro de un formulario. Hay que tener en cuenta que un campo de
este tipo siempre permite la selección múltiple de opciones.
El tercer elemento es el "radio button" que permite marcar la opción más adecuada para la acción que se
esté realizando dentro de un formulario; normalmente se trata de opciones excluyentes entre ellas.
Para efectos de que el usuario tenga una experiencia adecuada al usar el Sitio Web, es imprescindible que
los elementos citados sólo se empleen de la forma señalada.
4.2. Diseño para el Acceso Rápido

Una de las características que hace tan popular a la tecnología web es su facilidad para mostrar contenidos
de manera gráfica y para vincular de manera fácil documentos de diferentes orígenes. No obstante, para
que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollen sitios y contenidos
en esta plataforma, cumplan con ciertos estándares que aseguren que la mayor parte de los usuarios
podrán ver lo que se publica.

Para ello, es de suma importancia que los sitios que se construyan cumplan efectivamente con ciertas
características de publicación que permitan conseguir dos objetivos muy concretos:
• Que las páginas se desplieguen rápidamente y sin dificultades técnicas en los computadores de
los usuarios;
• Que las páginas puedan ser visualizadas por los usuarios de la misma manera en que sus autores
las han construido.
Para conseguir ambos objetivos, es necesario que quienes construyan los Sitios Web hagan uso de un
conjunto de buenas prácticas que se han obtenido de la experiencia en la construcción de este tipo de
contenidos digitales, y también, que se aseguren de cumplir con estándares mundiales en este ámbito.
4.2.1. Buenas Prácticas

Agrupamos en esta área una serie de recomendaciones extraídas de la experiencia en el desarrollo de
Sitios Web de todo tipo, que permiten asegurar una buena experiencia de los usuarios que los visitan.
Normas Mínimas para Facilitar el Acceso Vía Conexión Telefónica
La visualización de los Sitios Web depende de la transmisión de datos entre dos computadores, por lo que
es importante optimizar la cantidad de información que se envía entre ambos, de tal manera que quien
la recibe pueda verla adecuadamente.
Lo anterior se expresa en siete áreas de recomendaciones muy concretas:
1. Peso de las Páginas
Los Sitios Web deben tener un peso máximo permitido por página que no supere una cantidad razonable
de kilobytes (kb) que impidan su visualización. En este sentido, lo razonable dependerá directamente del
tipo de sitio que se esté desarrollando y de la conexión con la que cuente la mayor parte de los usuarios.
Por ejemplo, si se trata de un sitio dedicado a usuarios de zonas rurales alejadas de la capital que tienen
una conexión muy lenta, 50 kb será un tamaño considerable, respecto de si se compara eso con usuarios
que se conecten en la capital. Esto puede variar dependiendo del nivel de acceso a banda ancha de cada
ciudad.
No obstante, se puede estudiar cuánto se demora en que una página llegue completamente al
computador de un usuario si se calcula lo siguiente:
• Si un módem transmite a 56 kbps (kilobits por segundo) significa que por cada segundo de
transmisión, en condiciones ideales, es capaz de enviar 7 kb (kilobytes) de información.
• Si una página pesa 70 kb, en condiciones ideales demorará 10 segundos en aparecer completa en
el computador del usuario.
• Aunque no hay información técnica consistente para establecer la velocidad promedio de un
módem, puesto que depende de diversas variables técnicas, la experiencia indica que éstos se
conectan habitualmente a la mitad de su valor declarado. Entre las variables que afectan la

calidad de la conexión se cuentan la capacidad del computador, la congestión de las redes y el

nivel de visitas del servidor, entre otras.
• Dado lo anterior, la página de 70 kb señalada en el ejemplo anterior, tardaría 20 segundos en
desplegarse completamente.
Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si sus usuarios
estarán dispuestos a esperar todo el tiempo que se demora una página web en bajar completamente.
Como lo más probable es que la paciencia de los usuarios se agotará más rápido que su deseo por acceder
a la página que tarda en desplegarse, es necesario preocuparse de que el tamaño de las páginas siempre
tienda a bajar y no a aumentar.
Las normas internacionales al respecto indican que un usuario no esperará más de:
• 5 segundos para que aparezca algo visible en la pantalla

• 10 segundos para que aparezca algo legible en la pantalla
• 30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio
2. Diagramación de las Páginas
El estándar para la diagramación de páginas web indica que se deben utilizar hojas de estilo en cascada
(CSS por su sigla en Inglés) para separar el contenido, la estructura y la presentación de los primeros.
La diagramación con tablas se usó habitualmente desde el inicio de los Sitios Web y el problema con esta
forma de trabajo se relacionaba con el hecho de que los contenidos se unían con el código utilizado en la
presentación, evitando que el Sitio Web pudiera ser usado en plataformas diferentes sin adecuarlo
previamente.
Gracias al uso de las hojas de estilo en cascada, esta situación pudo mejorarse ya que el contenido se
pudo mantener inalterable y sólo hacer los cambios en la capa a de la presentación, lo que permitió llevar
dichos contenidos a cualquier plataforma, sólo haciendo cambios en el estilo de diagramación, el cual se
define a través del archivo CSS relacionado a la página.
En éste documento explicamos las mejores prácticas para el uso de ambos.
Uso de Hojas de Estilo
La tecnología de las Hojas de Estilo en Cascada (CSS por su sigla en inglés) permiten manejar la
presentación de manera externa al contenido. De esta manera, será posible ofrecer páginas con
diagramación diferente de la plataforma desde la que se acceda o, incluso, contar con la posibilidad de
ofrecer una mejor diagramación para efectos de su impresión.
Usando CSS se puede ofrecer diferentes visiones del mismo contenido sin hacerle cambios a sus páginas.
Lo único que corresponde en dicho caso es modificar el archivo de presentación de los contenidos, lo cual
se hace a través de los archivos de CSS. Entonces al revisar el código de sus páginas se puede encontrar
en la parte del <head> las siguientes líneas:

<link href="../../../styles/main.css" rel="stylesheet" type="text/css" />
<link href="../../../styles/print.css" rel="stylesheet" type="text/css"

media="print" />
Cabe señalar que al avanzar en el uso de CSS se puede ver que este estándar se encuentra preparado para
ofrecer soporte a diferentes tipos de dispositivos entre los que se cuentan aparatos como agendas
móviles, sistemas de proyección, aparatos para lenguaje Braille y otros. Es importante consignar además,
que de momento se encuentra en proceso una versión de CSS para teléfonos móviles por parte de W3C.
Junto con el uso de CSS es importante indicar que la separación de contenidos y presentación debe ir
acompañada por la utilización de varios elementos de la sintaxis XHTML que permiten hacer la
diagramación y presentación final de los contenidos.
Uno de los principales es el elemento <div> que permite señalar los bloques de información y su ubicación
dentro de la pantalla. <div> proviene de la palabra "división" y es utilizada para crear secciones o agrupar
contenidos.
Normalmente este elemento puede llevar la información sobre su presentación en forma local, es decir
en el propio archivo (como en el caso de este ejemplo, usando el atributo style), o bien puede tener
asignado un ID (identificador) mediante el cual se le da un nombre que puede ser referenciado desde CSS
para aplicarle un estilo al bloque.
<div style="border: 1px solid black;">

<h2>Espacio generado por DIV </h2>
<p>
Este es un párrafo creado dentro de un bloque demarcado por DIV.
</p>
</div>
Figura 3.3.: En la imagen se ve la forma en que aparece en la pantalla el código

que se dio como ejemplo en el recuadro anterior.
Adicionalmente el elemento <div> puede recibir como argumento una ubicación espacial dentro de la
pantalla, lo que permite generar una diagramación del Sitio Web controlada sólo por CSS.
Dentro del elemento <div> se pueden utilizar otros dos para asignar tipos de presentación especial a los
contenidos. El primero es el elemento <p> que permite generar párrafos de información textual, a la cual
se le asignan valores mediante atributos de CSS.

El segundo es el elemento <span> que es un contenedor que se utiliza para aplicar estilo en forma directa
al texto.
<div style="border: 1px solid black;">

<h2>Espacio generado por DIV </h2>
<p>
Este es un párrafo creado <span style="color: red;">dentro</span> de un
bloque demarcado por DIV.
</p>
</div>
Figura 3.4.: En la imagen se ve la forma en que aparece en la pantalla el código que se dio como ejemplo en el recuadro
anterior; se aprecia que la palabra dentro está escrita en color rojo.
En el ejemplo anterior se ve cómo el elemento <span> aparece dentro de un párrafo y permite generar
un tipo de presentación específico para una parte del texto.
Uso de Tablas
Cuando los contenidos que se muestran se dispongan en tablas es con el fin de que cada elemento ocupe
el lugar que se le ha asignado dentro de la página.
Al respecto se recomienda construir una estructura de presentación de los contenidos que se pueda
fragmentar en varias tablas:
De esa manera, cuando el sitio se presente en el programa visualizador del cliente, siempre mostrará la
primera tabla (que normalmente llevará el logotipo y la identificación del sitio) de manera rápida, dando
al usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se van poniendo
los restantes elementos del sitio.
En la figura 3.3., se puede ver que el sitio está construido en tres tablas, de acuerdo al siguiente orden:
Tabla 1: Muestra el logotipo de la institución, la fecha y el menú del sitio.
Tabla 2: Muestra las Secciones del Sitio más los contenidos de diferente nivel.
Tabla 3: Muestra el pie de la página con la identificación corporativa de la institución.

Figura 3.3.: Ejemplo de tablas para separar contenidos y conseguir despliegue rápido.
Hay que recordar que los estudios sobre acceso a Sitios Web indican que el usuario espera que al primer
segundo después de haber hecho clic sobre un enlace o haber ingresado una dirección en un programa
visualizador, ya quiere ver alguna reacción y notar que algo está ocurriendo.
Por lo anterior se debe evitar a todo lugar las tablas generales que incluyen en sí mismas a otras (tablas
anidadas), ya que el programa visualizador usará una parte del tiempo en calcular esa relación de
dependencia entre las tablas, antes de mostrar algo útil en la pantalla.
En la figura 3.4. se puede ver que el sitio está construido en tres tablas interiores, que son agrupadas por
una tabla general; también en la zona de Contenido 1 se dispuso una tabla que permite incluir una foto
junto al contenido:
Figura 3.4.: Ejemplo de tablas anidadas que dificultan el despliegue rápido.

3. Uso de Flash
Flash es una tecnología propietaria de la empresa Adobe que tiene como objetivo ofrecer interactividad
en un entorno gráfico mejorado. Debido a que tiene herramientas para hacer un uso especializado de
sonidos, imágenes y video, es el entorno más utilizado cuando se desea ofrecer información de este tipo.
Aun cuando algunos años atrás se recomendaba evitar el uso de esta tecnología en la portada del Sitio
Web, explicándose que "su uso recarga la presentación del sitio y si la presentación no está bien hecha,
puede impedir el acceso de los robots de búsqueda al interior del mismo".
Con el tiempo transcurrido y las sucesivas versiones de esta tecnología, se ha avanzado en la

especificación de su accesibilidad, existiendo variados ejemplos para ofrecer formas de acceso paralelas.
Adicionalmente la propia empresa Adobe ha ofrecido guías para hacer accesibles las aplicaciones hechas
con Flash (desde la versión Flash MX 2004 en adelante) que permiten ofrecer alternativas no gráficas para
sus pantallas gráficas.
Entre las acciones que se deben realizar en este sentido se cuentan las siguientes:
• Utilizar equivalentes de texto: para los elementos gráficos que se incluyan en las escenas de la
película Flash; la aplicación ofrece una paleta de accesibilidad en que se puede realizar esta
operación de manera simple y directa. En todo caso los equivalentes deben ser completos y
descriptivos, no sólo el nombre del objeto gráfico que se incluye.
• Habilitar la accesibilidad para objetos: de esta manera los equivalentes de texto serán utilizados
como las descripciones de texto para botones y otros controles utilizados en la película Flash.
• Ofrecer una descripción para la película: cuando se genera un botón con el nombre "site info"
en la que se describe la escena, los lectores de pantalla reciben la información adecuada para ser
leída por dichos software.
• Entregar controles de teclado: se deben habilitar atajos de teclado que permitan manejar la
película Flash de la misma manera en que se utiliza el mouse.
• Asegurar el contraste de colores: personas con problemas visuales tienen dificultades para ver
determinados contrastes de colores, por lo que los elementos gráficos deben ser tratados de
manera que haya un contraste suficiente que permita su comprensión.
4. Uso de Marcos o Frames
La tecnología de marcos o frames consiste en agrupar varios archivos para que se desplieguen de manera
simultánea, permitiendo a los usuarios ver varios contenidos al mismo tiempo.
En el ejemplo siguiente se puede ver gráficamente cómo se hace el despliegue de dichos archivos:

Figura 3.6.: Ejemplo de uso de frames para desplegar contenidos simultáneos.
Esta tecnología tiene aspectos positivos y negativos, que detallamos brevemente:
Positivos:
• Permite tener ciertos contenidos presentes todo el tiempo, como un cabezal o menú.
• Facilita la navegación ya que el usuario nunca pierde de vista dónde se encuentra.
Negativos:
• Impide que el usuario pueda marcar una página como favorita (bookmark) porque nunca se le
muestra cuál es su dirección web.
• Cuando un usuario llega a un contenido desde un enlace provisto por un buscador, verá el sitio
sin los otros marcos y no sabrá cómo navegar en él.
• La existencia de varios archivos en uno genera una carga mayor para el usuario que llega al sitio;
eso lo obliga a esperar a que aparezcan todos los contenidos de los archivos para poder usarlo.
Debido a lo anterior y salvo que sea muy necesario, esta forma de organizar los Sitios Web debe
desecharse para pasar a sitios de interfaz contenida en un solo archivo.
5. Uso de Imágenes de background
Una tecnología muy popular que se puso de moda en el año 1996 cuando el software Netscape
Navigator lo implementó, fue el uso de imágenes como fondos o backgrounds de las páginas web.

Salvo casos en que sea estrictamente necesario, esta práctica debe ser dejada de lado porque su único
efecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y acceso a la
información.
6. Uso de meta tags adecuados
Los meta tags son marcas en lenguaje HTML que van en la parte superior del código fuente de cada página,
a través de las cuales se entrega a los sistemas de indexación y búsqueda, la información mínima para
hacer una correcta indexación del contenido que incluye.
Los meta tags son un conjunto de elementos que obedecen a un estándar definido por el World Wide
Web Consortium por lo que su uso está regulado y mediante los cuales redescribe información concreta
sobre la página, tal como título, autor, descripción, idioma y otros. Los más importantes, aunque no los
únicos, son los siguientes:
<title>Nombre del Sitio o Institución</title>
<meta name="title" content="Nombre del Sitio o Institución">
<meta name="description" content="Descripción del Sitio o Institución">
<meta name="keywords" content="Palabras claves del Sitio o Institución">
Adicionalmente sobre este tema se ha dado en los últimos años un trabajo de estandarización muy
importante a través del grupo Dublín Core que ha definido los elementos meta tags a usar y que deben
ser consultados en http://www.dublincore.org.
7. Uso de Ajax
Ajax es una combinación de tecnologías que se basa en el lenguaje Javascript para ofrecer una experiencia
de intercambio dinámico de información en Sitios Web, enriqueciendo la experiencia de revisar datos y
conseguir resultados de manera rápida y confiable.
Ajax en sí no es una tecnología, sino que una implementación de varias tecnologías ya existentes tales
como XHTML y CSS para mostrar páginas web; Document Object Model (DOM) para mostrar e interactuar
dinámicamente con la información presentada; el objeto XMLHTTPRequest que permite realizar
peticiones HTTP y HTTPS a servidores WEB de manera asíncrona y XML para intercambio de información
entre el browser del usuario y el servidor que contiene la información.
Debido a que se basa en un lenguaje de scripting como Javascript, el cual se puede usar con fines
maliciosos como extraer información de parte del usuario, muchas veces se puede dar el caso que dicha
capacidad no está habilitada en el browser utilizado. Si este es el caso, la aplicación que utilice Ajax
también quedará desactivada .
En este sentido se sugiere que desde la programación de la aplicación se haga este tipo de detección con
el objetivo de ofrecer una interfaz distinta en dicho caso y, gracias a eso, entregar otra forma de
interactuar con la pantalla que permita utilizar la aplicación que se ofrece.

Es importante señalar que al tiempo de la edición de este documento, la organización W3C está
desarrollando un nuevo estándar orientadas a las aplicaciones de interacción enriquecida con el objetivo
de definir la mejor manera de hacerlas accesibles y que funcionen en los diferentes entornos desde las
cuales son utilizadas.
Normas para Incorporar Elementos Gráficos y Multimediales
Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben seguir normas muy
concretas para evitar que su peso afecte el desempeño de la página cuando sea solicitada por los usuarios
del Sitio Web.
A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta inclusión de

dichos elementos:
• Optimizar el peso de las imágenes: se debe bajar al máximo posible el peso de las imágenes;
cuando esto no sea posible hacerlo por su tamaño, se debe reducir el número de colores
disponibles y la resolución (72 dpi es la norma).
• Elegir el formato adecuado: ante un mismo tamaño de imagen, el peso varía dependiendo de si
son procesadas para desplegarse en formato GIF respecto del formato JPG. Normalmente una
imagen con colores planos (como un icono) tendrá un peso menor si se guarda en GIF respecto
de si es guardada en JPG. Lo contrario ocurrirá con una imagen con muchos colores diversos
(como una foto). Se recomienda probar ambos formatos para determinar el óptimo.
• Ubicación de imágenes: se recomienda usar un solo directorio para almacenar las imágenes
repetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentes
páginas del sitio. Al ubicarlos en un directorio único se puede aprovechar la función de caché del
programa visualizador para mejorar el rendimiento de las páginas. Para efectos de seguridad, se
recomienda impedir que un programa visualizador pueda ver el contenido de dicho directorio o
cualquier otro dentro del sitio.
• Usar el atributo ALT en imágenes: en el código HTML se debe usar el atributo ALT (texto alterno)
en las imágenes para que éste se despliegue antes que las imágenes y facilite de esta forma la
comprensión del contenido a los usuarios.
• Imágenes con alto y ancho: las imágenes (dibujos, fotos, iconos, botones) deben tener tamaño
para el ancho y el alto, para que el programa visualizador pueda dejar reservado el espacio para
dicho contenido antes de que se realice su despliegue visual.
• Ofrecer plug‐ins: cuando se utilizan archivos multimediales que requieren el uso de plugins
(programas visualizadores especiales) para revisarlos, se recomienda poner el programa para ser
bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente válido en sitios que
ofrecen presentaciones de portada en tecnología Flash, las cuales deben ser anunciadas para que
el usuario tenga la opción de verlas o avanzar directo al sitio.
• Indicar el peso de los archivos: cuando se ofrecen elementos gráficos o audiovisuales para que
sean bajados al computador personal por el usuario (especialmente en Video, Audio, Flash u
otros), se recomienda indicar el peso de los mismos, con el objeto de ofrecerle información útil
para efectuar la operación.

Interoperabilidad
Dado que los Sitios Web pueden ser accedidos sin problemas desde computadores que utilizan diferentes
sistemas operativos, en un sitio web se debe cuidar ese aspecto de la diversidad. Para ello se debe
asegurar de que desde la mayor parte de ellos las páginas pueden verse sin mayores contratiempos.
Debido a que los avances de los estándares web son hacia el estándar XML que además es el estándar
elegido para el intercambio de documentos electrónicos se ha privilegiado destacar el trabajo con XHTML
1.0 con el fin de destacar las características de su utilización sobre los estándares anteriores.
Entre las diferencias más relevantes de XHTML respecto de HTML y que deben ser tenidas en cuenta,
aparecen las siguientes:
El documento debe estar bien formado con todas las etiquetas cerradas en el mismo orden en que se
abren, vale decir, en el caso de etiquetas que se abren dentro de otras, deben ser cerradas en el mismo
orden.
• No puede haber elementos vacíos, por lo que las etiquetas que no tienen cierre deben
completarse con un "slash" al final, como en <img ... />, <br /> y <hr />.
• Las etiquetas deben escribirse en minúsculas debido a que XML es sensible a mayúsculas y
minúsculas.
• Los valores de los atributos deben encerrarse entre comillas "dobles".
• La información de scripts como los de Javascript debe ser incluida dentro de marcadores
especiales llamados [CDATA]. Por ejemplo:
<script type="text/javascript">
<![CDATA[
... unescaped script content ...
]]>
</script>
• Los elementos ya no pueden usar el identificador "name" el cual debe ser cambiado por el
identificador ID.
Debido a estas diferencias, los desarrolladores que migren sus Sitios Web hacia el estándar de la W3C
deberán hacer varias modificaciones ya que como se aprecia, el uso de XHTML obliga a ser estricto en el
cumplimiento de la especificación, en especial en el uso de minúsculas y en el cierre de todos los
elementos, tema que en las versiones anteriores de HTML no era tan crucial.

REFERENCIAS
[1] The World Wide Web Consortium (W3C) http://www.w3.org/
[2] Oficina Española del W3C http://www.w3c.es/
[3] Especificación HTML 4.01 http://html.conclase.net/w3c/html401‐es/cover.html
[4] Guía Breve de CSS http://www.w3c.es/Divulgacion/Guiasbreves/HojasEstilo
[5] Hojas de Estilo en Cascada Especificación CSS2.1 http://www.w3.org/Style/css21‐
updates/css2.1_spa.pdf
[6] Programación y Diseño en Entornos Gráficos. Grado Superior ‐ Félix Chamorro Atance ‐ Ed.
McGraw‐Hill
[7] VBScript y programación ASP‐ González Moreno, Óscar ‐ Ed. Anaya Multimedia, 1997
[8] Programación Avanzada Para Internet ‐ Jorge Serrano Pérez ‐ Ed. Anaya Multimedia
[9] Active Server Pages 3. Creación de aplicaciones Web a través de ejemplos. Rodríguez‐
Manzaneque. Ed. RaMa, 2000.
[10] Programación con ASP 3 ‐ Jorge Serrano Perez. Anaya Multimedia
[11] Web 2.0 y Empresa, Manual de aplicación en entornos corporativos, Asociación Nacional de
Empresas Internet, España
[12] PHP Bible. Tim Converse and Joyce Park. Hungry Minds Inc.
[13] Creación de sitios web con PHP 4. Francisco Javier Gil Rubio. Mc.Graw‐Hill.
[14] XML. Iniciación y Referencia ‐ Ramón Montero Ayala – Ed. McGraw‐Hill
[15] Latindex, Sistema regional de información en línea para revistas científicas de América Latina, el
Caribe,España y Portugal. Directorio, catálogo e índice (www.latindex.unam.mx)
[16] DHTML http://www.dhtmlcentral.com
[17] JavaScript http://www.javascript.com/
[18] XML 1.0 (Second Edition), W3C Recommendation http://www.w3.org/TR/2004/REC‐xml‐
20040204
[19] Guía Web (http://www.guiaweb.gob.cl/)
[20] Fundación Sidar ‐ Acceso Universal http://www.sidar.org/index.php
[21] Guía de usabilidad http://www.usability.gov/
[22] Guía de Referencia Rápida CSS2.1 http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
[23] Guía Breve de XHTML http://www.w3c.es/divulgacion/guiasbreves/XHTML
[24] XHTML 1.0: (Second Edition), W3C Recommendation http://www.w3.org/TR/2002/REC‐xhtml1‐
20020801
[25] Client‐Side JavaScript Referente http://docs.sun.com/source/816‐6408‐10/contents.htm
[26] Manual de ASP (http://msdn.microsoft.com/asp)
[27] Manual de PHP (http://www.php.net/)
[28] Programación de Aplicaciones para Internet con ASP 3 ‐ Grupo Eidos
[29] PHP ‐ Guía de aprendizaje ‐ Larry Ullman ‐ Prentice Hall
[30] Guías Breves de Tecnologías W3C (http://www.w3.org/)

[31] Comprendiendo la Accesibilidad: Guía para Lograr Conformidad ‐ R.Yonaitis

[32] Revistas USERS, Power, .Code, TecTimes © MP Ediciones S.A /
(http://www.tectimes.com/magazines/)


Manual de Proyectos Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de Proyectos Web

Cargado por

Copyright:

Formatos disponibles

Manual de Proyectos Web

Escuela Superior de Economía y Negocios

Preparado por Ing. Felipe Torres

Se introducen conceptos de vanguardia en el diseño, desarrollo e implementación de proyectos web

2|Página Manual de Proyectos Web

3|Página Manual de Proyectos Web

Incluye además información de buenas prácticas sobre accesibilidad y para administrar la

4.1. ¿Qué es una interface?

4|Página Manual de Proyectos Web

4.1.1. Elementos de la interfaz

5|Página Manual de Proyectos Web

Si se revisa el siguiente esquema, se podrá ver la ubicación relativa de todos ellos:

6|Página Manual de Proyectos Web

4.1.2. Uso de logotipos

4.1.3. Sistema de navegación

7|Página Manual de Proyectos Web

4.1.4. Áreas de contenidos

8|Página Manual de Proyectos Web

4.1.5. Áreas de interacción

4.1.6. Experiencia de usuario

9|Página Manual de Proyectos Web

10 | P á g i n a Manual de Proyectos Web

Uso de elementos específicos

4.2. Diseño para el Acceso Rápido

11 | P á g i n a Manual de Proyectos Web

4.2.1. Buenas Prácticas

Normas Mínimas para Facilitar el Acceso Vía Conexión Telefónica

Lo anterior se expresa en siete áreas de recomendaciones muy concretas:

1. Peso de las Páginas

12 | P á g i n a Manual de Proyectos Web

calidad de la conexión se cuentan la capacidad del computador, la congestión de las redes y el

• 5 segundos para que aparezca algo visible en la pantalla

2. Diagramación de las Páginas

En éste documento explicamos las mejores prácticas para el uso de ambos.

Uso de Hojas de Estilo

13 | P á g i n a Manual de Proyectos Web

<link href="../../../styles/main.css" rel="stylesheet" type="text/css" />

<link href="../../../styles/print.css" rel="stylesheet" type="text/css"

<div style="border: 1px solid black;">

Figura 3.3.: En la imagen se ve la forma en que aparece en la pantalla el código

14 | P á g i n a Manual de Proyectos Web

<div style="border: 1px solid black;">

Tabla 1: Muestra el logotipo de la institución, la fecha y el menú del sitio.

Tabla 3: Muestra el pie de la página con la identificación corporativa de la institución.

15 | P á g i n a Manual de Proyectos Web

Figura 3.4.: Ejemplo de tablas anidadas que dificultan el despliegue rápido.

16 | P á g i n a Manual de Proyectos Web

Con el tiempo transcurrido y las sucesivas versiones de esta tecnología, se ha avanzado en la

4. Uso de Marcos o Frames

17 | P á g i n a Manual de Proyectos Web

Figura 3.6.: Ejemplo de uso de frames para desplegar contenidos simultáneos.

Esta tecnología tiene aspectos positivos y negativos, que detallamos brevemente:

5. Uso de Imágenes de background

18 | P á g i n a Manual de Proyectos Web

6. Uso de meta tags adecuados

<title>Nombre del Sitio o Institución</title>

<meta name="title" content="Nombre del Sitio o Institución">

<meta name="description" content="Descripción del Sitio o Institución">

<meta name="keywords" content="Palabras claves del Sitio o Institución">

19 | P á g i n a Manual de Proyectos Web

Normas para Incorporar Elementos Gráficos y Multimediales

A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta inclusión de

20 | P á g i n a Manual de Proyectos Web

21 | P á g i n a Manual de Proyectos Web