metodologias de diseño web
TRANSCRIPT
-
7/31/2019 Metodologias de Diseo Web
1/40
Metodologas de Diseo Web
Resumen
La creacin de un sitio web, representa avances tecnolgicos que se ven
reflejados como un reto mercadolgico y publicitario para cualquier empresa o
entidad. El correr al margen de stos es una ventaja competitiva, del mismo
modo que el no contar con ellos puede crear desventajas y dificultades a la
misma.
La utilizacin de un medio tan amplio y accesible como lo es el internet y las
pginas electrnicas puede colaborar con las diversas finalidades de la
organizacin. De aqu parte la importancia de contar con ste y otros avances
que le permitan llevar a cabo diferentes funciones de una forma ms rpida,
eficaz y econmica.
El diseo web es un campo interdisciplinar que consta de cuatro elementos
principales: contenido, forma, funcin y finalidad.
El de seguir una metodologa, incluso bsica, de diseo web puede ser
extremadamente til.
Abstract
Creating a website is that technological advances are reflected as a challenge
marketing muscle and advertising for any company or entity. Running outside
-
7/31/2019 Metodologias de Diseo Web
2/40
Metodologas de diseo web
these is a competitive advantage, just as the failure to have them can create
disadvantages and difficulties to it.
The use of half as broad and accessible as is the internet and websites can work
with the various purposes of the organization. From here the importance of this
and other advances that allow you to perform different functions more quickly,
effectively and economically.
Web design is an interdisciplinary field that consists of four main elements:
content, form, function and purpose. The methodology to follow even basic web
design can be extremely useful.
-
7/31/2019 Metodologias de Diseo Web
3/40
Metodologas de diseo web
Introduccin
Esta monografa est orientada a todas aquellas personas que no tengan
conocimientos previos de edicin web, o que utilicen el ordenador nicamente a
nivel de usuario y no de programador. Hoy da publicar contenidos en la web por
motivos profesionales o de ocio es algo habitual, y poseer unos conocimientos al
menos esenciales puede resultarnos de gran ayuda en cualquier momento.
El avance de internet y las comunicaciones ha provocado en los ltimos aos el
nacimiento de nuevas propuestas metodolgicas para la web, sin embargo la
mayora de ellas han centrado su trabajo principalmente en las etapas de diseo
e implementacin.
Existen elementos y pasos bsicos necesarios para el desarrollo de un sitio web.
Primero que todo, la computadora obviamente. Para mostrar nuestra
informacin en un lugar, necesitamos escribir esta informacin, pero como
sabemos que no podemos escribir en un lenguaje normal puesto que la
computadora no lo entender, necesitamos traducirlo al documento HTML. Al
terminar su documento HTML, necesita un lugar donde alojar esta informacin,
por lo que necesitar de un hosting. Significa en espaol un lugar donde alojar
sitios web.
Ahora ya se tiene la "informacin" en la web y en un lugar, pero solo posee
texto, con algunas tablas; No es suficiente si desea algo ms llamativo para
dejar a su sitio ms atractivo, existe una solucin grfica, como por ejemplo las
imgenes, stas ayudan a la presentacin del sitio muchsimo, es ms, creo que
-
7/31/2019 Metodologias de Diseo Web
4/40
Metodologas de diseo web
luego del contenido, la presentacin de un sitio es un factor importantsimo para
atraer visitantes al sitio. Pero as tambin, las imgenes de gran tamao son un
problema para el visitante.
Luego de agregar texto e imagen, faltaba algo ms para maximizar la atencin
del visitante que puede ser buensima presentacin y mucha interactividad, pero
y el sonido y video?. La multimedia: otro elemento que revolucion el mundo del
desarrollo de sitios web. La insercin de este elemento ayud a visitantes como
a creadores de sitios web.
El sitio web est terminado, pero existe un pequeo problema, nadie lo conoce,
los sitios web no son visitados, solo porque al visitante se le ocurre tipear una
direccin y ya lo encuentra. El propio creador debe publicarlo y promocionarlo.
Si el sitio est terminado y listo para ser visitado, ahora, para que el visitante que
ya lo visit vuelva a su web, usted debe hacer una actualizacin de su
informacin, es decir, cada da o semana agregar informacin nueva, y cada
cierto tiempo cambiar el estilo del sitio para que este no sea vuelva montono y
aburrido.
De esta forma le introducimos el proceso de desarrollar un sitio web. Ms
adelante encontrar estos mismo pasos pero de manera mucho ms profunda
para que su sitio sea presentable, interesante, interactivo y divertido.
-
7/31/2019 Metodologias de Diseo Web
5/40
Metodologas de diseo web
Objetivos:
Objetivo general:
Definir una gua metodolgica para (apoyar) el diseo de sitios web, ya
sean en el mbito empresarial o educativo; y que contribuya con criterios
la formulacin de mtodos; o la planificacin de procesos, de acuerdo a la
situacin particular de diseo que se enfrente.
Objetivos especficos:
Desarrollar el contenido apropiado para la creacin de sitios webs
Definir secciones del sitio web, as como la informacin y contenido
relevante del mismo
Conocer acerca de la teora y las tcnicas de diseo de sitios web.
-
7/31/2019 Metodologias de Diseo Web
6/40
Metodologas de diseo web
Justificacin
La finalidad de esta monografa es proporcionar una metodologa para el
desarrollo de una pgina web.
A parte del beneficio personal que pueda aportar a los alumnos, profesores y
dems personas, esta metodologa claro que producir un beneficio global, las
instituciones y organizaciones contarn con una herramienta importante para
llevar a cabo sus estrategias de posicionamiento con el fin de reforzar su imagen
o de publicidad a travs de ste medio.
Dentro de las funciones de esta metodologa estn:
El fcil acceso a la informacin para las personas y entidades
interesadas.
La propuesta de ser un mtodo alternativo para la creacin de pginas
web.
-
7/31/2019 Metodologias de Diseo Web
7/40
Metodologas de diseo web
1. Conceptos fundamentales
1.1. Metodologa
La metodologa representa la manera de organizar el proceso de la investigacin, de
controlar sus resultados y de presentar posibles soluciones a un problema que conlleva
la toma de decisiones.
En trminos simples, quiere decir que la investigacin tiene siempre un objetivo
implcito que de vez en cuando es explicitado por el investigador.
No hay un consenso entre los autores sobre el concepto de metodologa, y por lo tanto
no existe una definicin universalmente aceptada.
Si hay un acuerdo en considerar a la metodologa como Un conjunto de pasos y
procedimientos que deben seguirse para el desarrollo del software.Mario
Generalizando la metodologa es considerada comoUn conjunto de procedimientos,
tcnicas, herramientas, y un soporte documental que ayuda a los desarrolladores a
realizar nuevos software. Mario Piattini (1996)
1.2. Diseo web
El diseo web no solamente consiste en crear un sitio web bonito y atractivo, sino que
debe estar enfocado a la usabilidad y la conversin.
Es un campo interdisciplinario muy centrado en el usuario que incluye influencias de las
artes visuales, la tecnologa, el contenido y la finalidad.
1.3. Caractersticas comunes de la metodologa de diseo
-
7/31/2019 Metodologias de Diseo Web
8/40
Metodologas de diseo web
Independientemente de la metodologa de diseo que se utilice, el desarrollador tiene
que aplicar una serie de conceptos fundamentales al diseo de datos, arquitectnico y
procedimental, todas tienen varias caractersticas comunes:
1) Mecanismo para la traduccin de requisitos de una representacin de diseo
2) Notacin para representar los componentes funcionales y sus interfaces
3) Heursticas para el refinamiento y la particin
4) Criterios para la valoracin de la calidad
2. Planificacin Inicial del sitio Web
2.1. Reunin y anlisis de requisitos
A partir de la informacin los asesores hacen una reunin, se analiza, se determinan
procesos y usuarios del sitio. Se escuchan las necesidades y se solucionan con
propuestas tiles para el proyecto web.
Realmente ayuda a contar con algn modo de visualizar la estructura, ya sea si se est
trabajando solo, con colegas o con profesionales.
2.2 Definicin de la temtica
Se ha de definir los temas que se van a exponer en el sitio web, permitiendo definir
trminos claves de bsqueda para posteriormente realizar una metodologa de
posicionamiento.
-
7/31/2019 Metodologias de Diseo Web
9/40
Metodologas de diseo web
2.3. Planeacin y planificacin Inicial del Sitio Web
Ante todo, se debe determinar a qu pblico se dirige su sitio. Esto es esencial, porque
muchos diseos y contenidos dependen de esto.
Se hace el planeamiento de la informacin que se desea incluir en la web. En este punto
se tendr en cuenta una estructuracin en secciones bien definidas (direccin,
departamentos, alumnado, etc.) que se discutirn con la directiva del centro y donde
aportarn sus ideas los miembros del grupo de trabajo (de ser una sociedad).
Tras este estudio, se realizar un documento en el que aparezca un diagrama con la
estructuracin de dicha web.
En la planificacin se requiere que usuarios con un vasto conocimiento de los procesos
de la institucin determinen cules sern las funciones del sistema. Debe darse una
discusin estructurada sobre los problemas que dicha institucin necesite una solucin.
Por lo general en esta etapa se competa rpidamente cuando se crean equipos con un
conocimiento amplio sobre las necesidades del proyecto a ejecutar.
La planificacin se trata simplemente de planear las etapas de realizacin del proyecto.
Elegimos el tipo de web que queremos crear, es el punto de partida que afecta a todas
las etapas posteriores de creacin.
Para desarrollar y poner en marcha un sitio web se sugiere comenzar por dar respuesta
a un grupo muy concreto de interrogantes, que permitirn aclarar y definir de manera
-
7/31/2019 Metodologias de Diseo Web
10/40
Metodologas de diseo web
1
bsica las expectativas en torno al sistema de informacin e interaccin que se va a
generar.
No hay que olvidar que un sitio web no es un proyecto con fecha de finalizacin, si no
que se trata de un trabajo constante que se realiza por etapas.
Al inicio se plantear un sitio web limitado, pero organizado, y se seguir trabajando
para que evolucione en forma continua.
En esta instancia, se recomienda organizar analizar los siguientes tems:
Dichas preguntas son las siguientes:
- A quin queremos llegar con el sitio? Para qu? Convendra crear un grupo de
inters?
- Cul es el mensaje que se desea transmitir? Cmo hacerlo?
- Qu imagen de la institucin se desea mostrar?
- Qu sector es responsable de cada parte del sitio?
- Cmo atraeremos a los visitantes? Cmo lograremos que retornen?
1. Para qu necesita el sitio web la institucin?
2. Para qu necesita el sitio web la audiencia a la que se dirige?
3. Qu informacin de la organizacin es til para la audiencia?
4. Qu imagen de la organizacin quiero proyectar en mi audiencia?
Las respuestas a estas preguntas permitirn dar forma a los siguientes elementos de
anlisis que seran:
-
7/31/2019 Metodologias de Diseo Web
11/40
Metodologas de diseo web
1
Los objetivos: Los mismos nos definen las metas de dicho proyecto; deben ser generales
y especficos con el fin de conseguir muy detalladamente lo que en realidad se desea
conseguir
La audiencia: Esto nos indica hacia qu grupo de personas va a estar enfocado el sitio.
La tecnologa: Qu servicios interactivos se incorporarn al sitio y qu infraestructura se
necesita para sustentar dichos servicios.
2.4. Definicin de Objetivos
Se han de plantear los objetivos que se quieren alcanzar con la creacin del sitio web,
para posteriormente marcar estrategias funcionales para la consecucin de dichos
objetivos.
En todo proyecto se debe contar con objetivos definidos, contra los cuales pueda
medirse la efectividad de las acciones que se desarrollen.
Resumen de objetivos, donde se establecen tres puntos primordiales para esta
seleccin, los cuales son definir los usuarios, lo que los usuarios esperan de la visita, y
que se pretende comunicar a travs del sitio web(Green, Chilcott y Flick, 2003 p39).
Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos
especficos; no obstante lo anterior, es importante que estos objetivos sean explicitados
adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo (en caso de
serlo) tenga claro el horizonte que debe tener el proyecto.
-
7/31/2019 Metodologias de Diseo Web
12/40
Metodologas de diseo web
1
Una forma de llegar ms concretamente a los objetivos, es revisar la visin y la misin
de la organizacin o institucin, desde la cual se pueden obtener las claves que
permitan definirlos. De ms est decir que los objetivos del sitio debern estar en
concordancia con las necesidades y planificacin que haya hecho la organizacin en sus
planes anuales.
2.5. Seleccin de usuarios o definicin de audiencia
Los usuarios o la audiencia, se refiere a aquella parte de la poblacin a la que se
pretende alcanzar o influir con el sitio web; esto est estrechamente vinculado con la
naturaleza del sitio que se propone. Toda informacin que se obtenga servir para
establecer parte de los criterios de diseo de contenido, lenguajes, esttica, entre otros.
El modelo del usuario se basa en definir clases o perfiles de los usuarios, y as poder
disear con el objetivo de satisfacerlas necesidades propias de cada grupo de
usuarios (Montero, Y. y Martn, F., 2003).
Es esencial a la hora de emprender un diseo web conocer a nuestros usuarios
potenciales: cules son sus objetivos, necesidades y expectativas; cul es su nivel de
experiencia y conocimientos tecnolgicos; qu posibles limitaciones de accesopueden
tener; qu otros sitios web similares pueden estar acostumbrados a usar.
No todos los sitios web se dirigen al mismo pblico, y por tanto un mismo diseo no
puede ser igual de eficaz independientemente del contexto.
-
7/31/2019 Metodologias de Diseo Web
13/40
Metodologas de diseo web
1
Debido a que no contamos con informacin cierta sobre nuestros clientes para generar
algn tipo de anlisis (edad, sexo, estudios, ocupacin) se puede definir que el proyecto
debe enfocarse en forma global hacia:
. Una audiencia local (nuestro pas) de usuarios de internet
Clientes de la institucin (servicio al cliente)
Usuarios de internet de nuestro mercado. El rango de edades se estima entre
los 15 y los 55 aos.
Periodistas y prensa.
Como patrn de comportamiento, el usuario de internet que se dirija al sitio porque los
busca especialmente, debe contar con acceso eficiente a la informacin que requiera.
No es necesario limitarse en la informacin a colocar, es mejor sobren datos (ya que
debido a la flexibilidad del hipertexto, la abundancia no molesta ni satura), pero
asegurarse de que cada visitante encuentre exactamente lo que necesita saber. Un
visitante que no encuentra lo que desea en una visita probablemente no vuelva por un
buen tiempo.
2.5.1. Cmo se llega a establecer la Audiencia? Expectativas de usuario
La organizacin puede o no, ser conocida por los usuarios en potencia del sitio. Al
platearse la puesta en marcha de un sitio web, es necesario conocer hacia quien va
dirigido ste y qu podran esperar dichos usuarios al visitarlo.
-
7/31/2019 Metodologias de Diseo Web
14/40
Metodologas de diseo web
1
Tmese un tiempo para contactar con sus clientes, proveedores y amigos, con el fin
de investigar como haran ellos para encontrar su sitio web y qu les gustara ver en
l. (Morris, S y Dickinson, P., 2002, p.28)
Conocer al usuario normalmente requiere del uso de tcnicas de investigacin como
entrevistas, encuestas, creacin de arquetipos de usuarios (personas), etc. Tcnicas que
normalmente requieren la contratacin de empresas especializadas en servicios de
investigacin de mercados. Hay que considerar que no todos los proyectos tienen la
misma envergadura ni disponen del mismo presupuesto, por lo que, al menos, aunque
no se pueda realizar una investigacin formal de nuestra audiencia potencial,
deberemos cuestionarnos para quin estamos diseando y ponernos en la piel del
usuario final. Hay que ser conscientes que nosotros no somos el usuario final y por tanto
un diseo que nos parezca usable no tiene porqu serlo para nuestros usuarios.
Recordemos que el contenido de las diferentes reas debe estar claramente orientado
al usuario final. Por lo tanto, debemos ser claros y evitar terminologa de uso normal
para el profesional, pero desconocida para el hombre comn.
2.5.2. Encuestas
La realizacin de encuestas es uno de los mtodos ms econmicos para obtener datos
de nuestros usuarios / clientes. Actualmente existen aplicaciones que permiten crear y
publicar encuestas online en cuestin de horas. En el caso que la organizacin no
disponga actualmente de un sitio web otra alternativa es realizarlas en las ubicaciones
fsicas de la organizacin: oficinas, tiendas.
-
7/31/2019 Metodologias de Diseo Web
15/40
Metodologas de diseo web
1
Informacin sobre la experiencia de usuario y grado de satisfaccin en el uso del Sitio
Web actual: diseo, usabilidad, navegacin y acceso a la informacin que buscan, etc.
Informacin sobre funcionalidades /servicios /contenidos a incorporar en el Sitio
Web.
2.6. Definicin de la Infraestructura Tecnolgica
Llegados a este punto se deben especificar las tecnologas que sustentarn el desarrollo,
funcionamiento y mantenimiento del sitio web.
Esta especificacin se realiza en dos niveles:
Hardware: se refiere a los elementos fsicos del sistema. En el caso ms simple lo
compondr el servidor donde quedar alojado el Sitio Web y los elementos de
infraestructura de red.
Software: son los programas y aplicaciones que se necesitan para que el Sitio Web
pueda ejecutar las funciones y tareas que se van a ofrecer a los usuarios del sistema.
Ejemplos de software pueden ser un gestor de contenidos para manejar el proceso de
publicacin y actualizacin de contenidos, el sistema operativo del servidor, programas
de gestin de bases de datos, una tienda virtual, etc.
Los recursos de hardware y software necesarios pueden variar sustancialmente en
funcin de la complejidad de las funcionalidades y servicios que se desean incorporar al
sistema, el volumen de informacin que debe manejar el sistema y el nmero estimado
de usuarios a atender, entre otros factores.
2.6.1. Arquitectura de un sitio web
-
7/31/2019 Metodologias de Diseo Web
16/40
Metodologas de diseo web
1
La arquitectura de un sitio Web tiene tres componentes principales: un servidor Web,
una conexin de red, y uno o ms clientes (navegadores).
El servidor Web distribuye pginas de informacin formateada a los clientes que las
solicitan (navegadores). Los requerimientos son hechos a travs de una conexin de red,
y para ello se usa el protocolo HTTP.
La informacin mostrada en las pginas est tpicamente almacenada en archivos HTML.
Sin embargo, frecuentemente esta informacin est almacenada en una base de datos,
y las pginas son creadas dinmicamente. Los sitios Web que usan este esquema, son
llamados sitios dinmicos.
3. Produccin del sitio web
3.1. Definicin del sitio web
Arquitectura de Informacin.
La arquitectura de la informacin es el conjunto de mtodos y herramientas que
permiten organizar los contenidos, para ser utilizados de manera simple y directa.
Los elementos que se muestran a continuacin constituyen la metodologa de la
arquitectura de Informacin, mediante la cual es posible conseguir las metas de
organizacin y visibilidad de los contenidos. Cada una de ellas debe ser investigada,
desarrollada y documentada adecuadamente:
-
7/31/2019 Metodologias de Diseo Web
17/40
Metodologas de diseo web
1
Definicin de Contenidos del Sitio
Definicin de la Estructura del Sitio
Definicin de los Sistemas de Navegacin
Definicin del Diseo Visual
3.2 Definicin de contenidos del sitio web
Es conveniente presentar un contenido acorde a los objetivos planteados para
desarrollar el sitio, y que la informacin a plasmar cubra las necesidades e intereses del
pblico a quien va dirigido.
Bsicamente el xito de un sitio web se debe a su contenido. El contenido del sitio
ser probablemente una combinacin de la informacin que actualmente se posee y
de la que se tendr que crear (Green, Chilcott y Flick, 2003, p.41)
Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a
hacer las definiciones ms concretas que permitan decidir qu contenidos son los que
va a tener el sitio web que se desarrolle.
3.2.1 Inventario
Al afrontar el diseo de una arquitectura de informacin, la primera tarea que debemos
acometer es analizar e inventariar el contenido que ofrecer el sitio web a sus usuarios.
Si queremos organizar y estructurar informacin, lo primero ser conocer el contenido
de que disponemos, qu volumen tiene, de qu naturaleza es y qu contenidos son ms
relevantes que otros.
-
7/31/2019 Metodologias de Diseo Web
18/40
Metodologas de diseo web
1
En el caso que ya exista el Sitio web y se trate de un proyecto de rediseo, el primer
paso ser la revisin del contenido actual. El anlisis de las estadsticas de trfico de la
web servir en este punto para conocer qu contenidos se visitan con mayor frecuencia
y cules no. De esta manera se podr determinar su relevancia para los usuarios y tomar
decisiones sobre que contenido eliminar o modificar.
Identificar Requerimientos Funcionales
Junto con la bsqueda e identificacin del contenido que deber tener el sitio, se debe
trabajar tambin en la definicin de lo que se busca que el sitio haga, es decir, los
tipos de interaccin que se busca incluir como pueden ser comnmente formularios de
solicitud de informacin, procesos de registro y suscripcin, buscadores de informacin
o documentos, etc.
3.2.2. Clasificacin
La tarea principal en el diseo de arquitecturas de informacin es la clasificacin de los
contenidos. Clasificar consiste en crear grupos de contenidos similares y darle nombre a
esos grupos (rtulos o etiquetas)
Hay en existencia tres esquemas principales de clasificacin:
Clasificacin orientada a la audiencia: cuando el Sitio Web tiene una audiencia
claramente definida y segmentable, y cada uno de esos grupos de usuarios tiene
necesidades diferenciadas, una clasificacin til es la orientada a la audiencia.
Clasificacin orientada a la tarea: si lo que estamos categorizando no son contenidos
informativos, sino funcionalidades del sitio o aplicacin web, o informacin de cmo
-
7/31/2019 Metodologias de Diseo Web
19/40
Metodologas de diseo web
1
utilizar estas funcionalidades, las categoras deben estar orientadas a la accin y
rotuladas en forma verbal.
Clasificacin temtica: es la solucin ms comn, por su efectividad, en la que los
contenidos son agrupados por su similitud semntica, bajo rtulos o categoras en
formas de sustantivos.
Este esquema resulta muy til cuando el usuario tiene una representacin semntica de
su necesidad informativa.
3.3 Definicin de la Estructura del Sitio
Una vez que se ha hecho el trabajo de identificacin y clasificacin de contenidos
reseados en las etapas anteriores, se debe avanzar hacia las definiciones relacionadas
con la forma que tendr el sitio que se est desarrollando. Ello implicar trabajar en tres
reas concretas, a travs de las cuales se definir la estructura del sitio, el rbol de
contenidos y los sistemas de navegacin que se ofrecer a los usuarios para que
avancen a travs de sus contenidos.
En esta fase se realiza el proceso de identificar la forma que tendr el sitio web que se
est desarrollando.
En este sentido es importante hacer una diferencia entre estructura y diseo:
-
7/31/2019 Metodologias de Diseo Web
20/40
Metodologas de diseo web
2
Estructura: se refiere a la forma que tendr el sitio web en trminos generales con sus
secciones, funcionalidades y sistemas de navegacin. No considera ni incluye elementos
grficos (logotipos, vietas, etc.)
Diseo: se refiere a la solucin grfica que se crear para el sitio, en la cual aparecen
colores, logotipos, vietas, y otros elementos de diseo que permiten identificar
visualmente al sitio.
3.3.1. Creacin de la estructura
Clasificar informacin es una forma de estructurarla, en la que los contenidos quedan
relacionados implcitamente por agrupacin. Estructurar informacin significa articular
relaciones, ya sea entre contenidos o categoras de contenido, normalmente en forma
de enlaces o vnculos hipertextuales.
Dicho de otro modo La Estructura del sitio web se refiere a las conexiones y relaciones
entre pginas, a su topologa.
A continuacin se exponen las estructuras ms comunes.
Estructura secuencial: Las pginas se encuentran interrelacionadas de forma lineal.
Esta estructura es recomendable cuando es necesario que el usuario complete cada uno
de los pasos ordenadamente.
Estructura hipertextual: El hipertexto es la base sobre la que se asienta la Web. En una
estructura hipertextual las pginas se enlazan por similitud o relacin directa entre los
contenidos, permitiendo al usuario que se encuentra visualizando una pgina 'saltar'
hacia otras que le puedan interesar por contener informacin relacionada.
-
7/31/2019 Metodologias de Diseo Web
21/40
Metodologas de diseo web
2
Estructura jerrquica: Normalmente, las estructuras jerrquicas se utilizan junto a las
hipertextuales, permitiendo al usuario una vez llegado a una pgina de una rama 'saltar'
hacia pginas de otras ramas pero relacionadas temticamente con la pgina actual.
3.3.2. Mapa del Sitio
Se refiere al proceso de crear un rbol de contenido en el que se muestre de manera
prctica cuntas secciones tendrn el sitio en desarrollo y cuntos niveles habr dentro
de cada uno.
Las recomendaciones para la generacin de este rbol son las siguientes:
Secciones: se debe intentar que sean las menos posibles, con el fin de concentrar las
acciones del usuario en pocas reas; hay que considerar que cada una de las reas a
integrar en el rbol requerir de mantenimiento posterior en contenidos, grfica y
funcionalidad, lo que encarecer el costo final de operacin del sitio. Dado lo anterior,
se recomienda que las secciones se siten entre 5 y 7.
Niveles: se debe intentar que el usuario est siempre a menos de tres clics del
contenido que anda buscando. Por ello no se debera crear ms de tres niveles de
acceso; esto significa una Portada, una Portadilla de Seccin y los Contenidos
propiamente tales.
Contenidos relacionados: se debe considerar que habr funcionalidades que estn
presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas
-
7/31/2019 Metodologias de Diseo Web
22/40
Metodologas de diseo web
2
Frecuentes y Formularios de Contacto. Se recomienda que este tipo de elementos
quede fuera del rbol y floten sobre ste, con el fin de indicar que desde todas las
pginas habr enlaces a ellos.
3.3.3. Definicin de los Sistemas de Navegacin
Una vez que se cuenta con los rboles de contenido desarrollados en el paso anterior,
la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el
sitio web. A travs de estos, los usuarios podrn avanzar por sus diferentes reas, sin
perderse.
En la estructura arquetpica de los sitios web podemos diferenciar entre sistemas de
navegacin global, local y contextual:
Sistemas de navegacin global: son aquellos conjuntos de enlaces que estructuran el
contenido del sitio web en diferentes secciones principales. Su funcin es la de orientar
al usuario acerca de donde se encuentra y qu otras secciones principales puede visitar.
Sistemas de navegacin local: su funcin es ofrecer el acceso a las sub-secciones del
sitio web. En muchas ocasiones estos sistemas son los que incluyen la clasificacin de los
productos o contenidos del sitio web.
Sistemas de navegacin contextual: suelen estar integrados en el propio contenido, en
apartados o bloques de tipo enlaces relacionados, noticias relacionadas, es decir son
aquellos sistemas que permiten la navegacin transversal.
3.3.4. Caractersticas de los Sistemas de Navegacin
-
7/31/2019 Metodologias de Diseo Web
23/40
Metodologas de diseo web
2
Al generar el sistema de navegacin, se deben tener en cuenta las siguientes
caractersticas:
Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicacin y
disposicin en las pginas.
Uniforme: el sistema debe utilizar similares trminos con el fin de que el usuario que
lo vea en las pginas, confe en que sus opciones llevan siempre hacia los mismos
lugares dentro del sitio.
Visible: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el
usuario cuente con l, como si se tratara de una gua permanente en el rea en que se
encuentre del sitio.
4.2.4. Definicin del diseo visual
Hay que tener en cuenta que los webs profesionales tienen una apariencia ms formal, y
que su diseo es tan importante como el de la imagen de una institucin.
Es un plano ms profesional, se debe cuidar la presentacin, manteniendo siempre una
imagen corporativa a lo largo de todas las pginas y un estilo adecuado al perfil de la
institucin. Esto permitir recopilar los materiales que se incluir en ella: imgenes,
grficas, impresos, formularios, logotipos.
Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los elementos
suficientes como para avanzar hacia la generacin del diseo visual de las pantallas del
-
7/31/2019 Metodologias de Diseo Web
24/40
Metodologas de diseo web
2
sitio, momento en que se utilizar la documentacin que se han ido generando en las
etapas anteriores.
Creacin del esqueleto de la web, tablas, encabezados, espacio para imgenes, texto
botones.
Sin importar lo bien organizado e interesante de su contenido, el diseo visual
determina el tono. Se puede crear una buena impresin con algunos grficos bien
diseados en la pgina central.
Existen cuatro etapas que son:
5.2.4.1. Diseo de las Estructuras de Pginas: Wireframes
Los wireframes especifican la arquitectura y organizacin de los contenidos y
navegacin de cada pgina o grupos de pginas. Sirven de vnculo entre la estructura
subyacente del sitio web y su aspecto visual dando respuesta a cuestiones como la
forma y presentacin de los sistemas de navegacin y bsqueda, la ubicacin de los
rtulos y la ordenacin de los contenidos en una perspectiva espacial.
Lo ideal es que estos dibujos no tengan ningn elemento grfico o visual concreto, sino
que slo incluyan lneas y bloques que representen objetos de contenido (como logos,
vietas o fotos). Nuevamente, el uso de estas imgenes ayudar a que la discusin
sobre cada pantalla se centre en la funcionalidad y no en temas ms subjetivos como
colores o calidad de los elementos de diseo en la pgina.
5.2.4.2. Diseo de interaccin
-
7/31/2019 Metodologias de Diseo Web
25/40
Metodologas de diseo web
2
Por diseo de interaccin nos referimos a la actividad y resultado de definir el
comportamiento interactivo del sitio web, es decir, qu acciones se ofrecern al usuario
en cada momento, y cmo responder la aplicacin a las acciones que realice.
Diagramas de flujo
Una de las metodologas ms concretas para asegurar que la experiencia del usuario se
est resguardando adecuadamente, es la generacin de diagramas de flujo mediante
los cuales se representan grficamente las posibilidades de accin que tiene un usuario
enfrentado a tomar una decisin en un Sitio Web.
5.2.4.3. Bocetos de Diseo
Esta etapa consiste en la generacin de dibujos digitales acabados de la forma que
tendrn las pginas principales del sitio que se desarrolla, considerando como tales la
Portada, Portada de Seccin y Pgina de despliegue de contenidos.
Para desarrollar los elementos grficos se utilizan los dibujos de estructura que se han
generado en la etapa anterior. La idea es que en esta etapa se trabaje en software
grfico para facilitar el proceso de correccin, ya que habitualmente habr mucha
interaccin con los usuarios.
5.2.4.4. Borradores de Pgina
Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseo que
hayan sido aprobados y se genera un prototipo (pginas clickeables) mediante el cual
se pueda comprobar directamente la forma en que se desempean, cuando se les aplica
la tecnologa HTML de construccin de pginas web.
-
7/31/2019 Metodologias de Diseo Web
26/40
Metodologas de diseo web
2
La intencin de esta etapa es usar el diseo de pantalla que se ha creado, contando
con enlaces reales que permitan ver la forma de usar sus atributos y revisar la forma en
que se despliegan las pginas que se van a desarrollar.
5. Construccin del Sitio Web
5.1. Maquetacin HTML
En el caso de un Sitio Web esttico, es decir, una coleccin de pginas HTML
estructurada en un directorio, esta etapa corresponder a la construccin del sitio y
consiste en generar todo el sitio en tecnologa HTML utilizando los elementos grficos,
imgenes y contenidos reales.
En el caso de un sitio dinmico, en esta etapa se generan las plantillas HTML que
utilizarn los desarrolladores de software para introducir la programacin que generar
los contenidos de cada pgina. En este caso los contenidos de pgina quedan
almacenados en una base de datos (textos, imgenes, archivos multimedia.)
5.2. Programacin
Los Sitios web han ido evolucionando no slo por la cantidad de datos que contienen.
Poco a poco se ha pasado de modelos basados en pginas estticas a aplicaciones web
de alta complejidad que gestionan contenidos en mltiples idiomas, integran
aplicaciones de colaboracin entre los usuarios, proporcionan contenidos en diversos
formatos para diferentes dispositivos.
-
7/31/2019 Metodologias de Diseo Web
27/40
Metodologas de diseo web
2
Por otro lado estos sistemas permiten tambin manejar la estructura de la web (mens,
secciones, pginas, plantillas) definidos en etapas anteriores, adems de los propios
contenidos, permitiendo la optimizacin de las tareas de mantenimiento y actualizacin
del Sitio Web.
Partiendo de este planteamiento las tareas de programacin se dividen en dos partes:
5.2.1 Programacin Front-end: se trata de la programacin relacionada con el interfaz
de usuario. En este etapa se programan las plantillas HTML definindose las reas de
contendido de cada una de ellas de modo que posteriormente se pueda cargar la
informacin que corresponda a cada rea (texto, imgenes, mens, etc.) a travs del
sistema de administracin del gestor de contenidos.
5.2.2 Programacin Back-end: se refiere a la programacin y configuracin del sistema
de administracin y las bases de datos que soportarn la carga y publicacin de los
contenidos del Sitio Web.
5.3. Pruebas de Usabilidad
Usabilidad es un concepto que se refiere bsicamente a la facilidad de uso de una
aplicacin o producto interactivo. Entre otros fines, la usabilidad debe utilizarse como
un atributo de calidad del sistema.
Durante el proceso de diseo, maquetacin y programacin de las interfaces de un sitio
web, es muy conveniente ir realizando pruebas de usabilidad que permitan realizar las
modificaciones oportunas y asegurarse que los usuarios van a entender la forma en que
-
7/31/2019 Metodologias de Diseo Web
28/40
Metodologas de diseo web
2
est organizada la informacin , los contenidos y funcionalidades que se estn
ofreciendo a travs del Sitio Web.
5.4. Integracin
En esta etapa se ensamblan los distintos componentes del sistema tanto a nivel de
software como de hardware de modo que el Sitio Web quede construido y configurado
en un entorno final listo para su puesta en marcha.
Captulo 4
Mantenimiento y Explotacin
6. Puesta en Marcha del Sitio Web
6.1. Desarrollo de un Plan de Pruebas
Una vez que el sitio se ha construido, es necesario hacerlo pasar por una serie de
pruebas antes de entrar a la fase de explotacin. Mediante dichas pruebas, se medir su
reaccin integral frente a diversas acciones que realizarn los usuarios desde sus
pginas.
6.1.1. Pruebas de Interfaces y Contenidos
Las actividades de esta etapa consisten en hacer revisiones precisas de la forma en que
se despliegan las pginas del sitio. Las acciones de prueba sugeridas para realizar en esta
etapa son las siguientes:
-
7/31/2019 Metodologias de Diseo Web
29/40
Metodologas de diseo web
2
Verificacin de Contenidos: es una prueba bsica para revisar si el Sitio Web
desarrollado incluye todos los contenidos que se hayan definido en el marco del plan de
desarrollo. Se puede hacer en forma manual o automtica, de acuerdo a las siguientes
orientaciones:
1 - Sistema Manual: se refiere a hacer una revisin manual de los contenidos del Sitio
Web a travs de la navegacin de sus pginas.
Los elementos que deben probarse obligatoriamente son:
1. Verificacin de ortografa y redaccin
2. Verificacin de enlaces principales
3. Verificacin de imgenes en pginas
4. Verificacin de existencia de Archivos adjunto
5. Verificacin de la Lista de Chequeo de Accesibilidad del W3C
2 - Sistema Automtico: especialmente orientado a la verificacin de enlaces rotos, lo
cual se puede hacer utilizando sistemas basados en Internet o, bien, software
especializado.
3 - Sistemas Basados en Internet: se recomienda usar el servicio del W3C.
Verificacin de Meta Tags: los meta tags son marcas en lenguaje HTML que van en
la parte superior de cada pgina, a travs de las cuales se entrega a los sistemas de
indexacin y bsqueda.
-
7/31/2019 Metodologias de Diseo Web
30/40
Metodologas de diseo web
3
Validacin de HTML: La realiza el World Wide Web Consortium e indica si el cdigo
usado en la pgina es correcto. Como resultado entrega un reporte con los eventuales
errores para ayudar a su reparacin.
Validacin de CSS: La realiza el World Wide Web Consortium e indica si la Hoja de
Cascada de Estilo cumple con la sintaxis estndar y por lo tanto podr ser visualizada
correctamente en todos lossistemas.
Compatibilidad: aunque la codificacin en los lenguajes soportados por los
navegadores puede apegarse a los estndares, no todos muestran de la misma manera
los sitios web. Dado esto, es necesario revisar el sitio en diferentes tipos de programas.
6.1.2. Pruebas de Funcionalidades y Operacin
Las actividades de esta etapa se refieren a hacer chequeos completos respecto de las
funcionalidades y aplicaciones que ofrece el sitio, ya sean de aplicaciones simples como
formularios hasta ms complejos, como consultas y modificaciones de registros en base
de datos.
En este sentido, las pruebas se deben hacer sobre diferentes elementos, siendo algunos
de los ms importantes los siguientes:
Validacin de Formularios: Si el Sitio Web tiene formularios para el envo o ingreso de
datos, se debe utilizar sistemas de validacin del ingreso de datos para asegurar que
stos sean bien ingresados. En este aspecto, algunas de las validaciones ms
importantes deben ser las siguientes:
-
7/31/2019 Metodologias de Diseo Web
31/40
Metodologas de diseo web
3
Campos Obligatorios: Se debe validar que en los formularios sean ingresados todos
aquellos campos que sean necesarios; stos deben ser marcados de alguna manera
(usualmente con un asterisco) que permita a los usuarios entender la obligatoriedad de
ingresar informacin en ellos; adicionalmente, debe indicarse tal condicin en forma
explcita.
Suscripcin a Servicios: se debe validar que cada vez que se realice la suscripcin a un
servicio que ofrezca el Sitio Web, se enve un e-mail al usuario (para lo cual se debe
necesariamente solicitar su direccin de correo electrnico) en el que se le informe
sobre el resultado de lo realizado.
Ingreso de Datos: si se cuenta con un sistema que permita el ingreso de informacin
hacia una base de datos, se debe revisar en la tabla de destino que efectivamente se
estn enviando los datos de la manera que se ha previsto.
Multiplataforma: se debe comprobar que los formularios funcionan en diferentes
versiones de navegadores, de sistemas operativos y de tipos de conexin a Internet.
Botones de Interaccin:Si se cuenta con botones interactivos que permiten imprimir,
enviar una pgina a un amigo, etc. se debe validar que estn realizando correctamente
la accin indicada.
Sistemas de Bsqueda: Si se cuenta con ellos, se debe validar que efectivamente
permitan encontrar documentos existentes en el sitio; en este sentido se deben ingresar
documentos especficos y luego buscarlos de manera de asegurarse que la funcionalidad
est operando adecuadamente. Si el sistema de bsqueda tiene una versin de
-
7/31/2019 Metodologias de Diseo Web
32/40
Metodologas de diseo web
3
bsqueda avanzada, se debe asegurar de que las opciones ofrecidas encuentren los
documentos de la manera en que se ofrezca.
Administracin del Error 404: Cuando se ingresa una direccin equivocada, el
software del servidor web muestra una pantalla de error anunciando el nmero de
cdigo del problema (Error 404).
6.1.3. Pruebas de Carga
La carga de trabajo se refiere a la capacidad mxima que tiene un servidor web
(hardware y software), para atender a un conjunto de usuarios de manera simultnea.
Las pruebas en este caso consisten en simular una carga de trabajo similar y superior a
la que tendr cuando el sitio est funcionando, con el fin de detectar si el software
instalado (programas y aplicaciones) cumple con los requerimientos de muchos usuarios
simultneos y tambin si el hardware (servidor y el equipamiento de redes y enlace que
lo conecta a Internet) es capaz de soportar la cantidad de visitas esperadas.
6.1.4. Pruebas de Seguridad
Las actividades que se pueden realizar para hacer las pruebas de seguridad son diversas
y se orientan a varios mbitos, como se describe a continuacin. Los temas a tratar son
los siguientes:
Manejo de DNS
Proteccin de Estructura Interna del Sitio Web
Proteccin contra Robots
Manejo de Privacidad
-
7/31/2019 Metodologias de Diseo Web
33/40
Metodologas de diseo web
3
Canales seguros
Mecanismos de Control de Acceso
Proteccin de Programas
6.1.5. Pruebas de Respaldo y Recuperacin
Respaldar la informacin de un Sitio Web se refiere a copiar el contenido completo del
sistema (datos, programacin, imgenes, etc.) a un medio que sea confiable, que est
en un lugar seguro y que permita la recuperacin de manera rpida y eficiente.
6.1.6. Registro y Control de Pruebas y Errores
Para que una prueba sea vlida, debe ser lo ms documentada posible, con el fin de
que, quien deba efectuar la correccin, pueda replicar el error para analizarlo y luego
proceder a tomar medidas correctivas. Para ello se recomienda llevar una plantilla en
que se vayan anotando por columna los datos.
6.2. Derechos del Usuario
Los usuarios que acceden a un Sitio Web de carcter general, tienen derechos y
obligaciones, aunque muchas de ellas existen por un compromiso tcito y basado en la
costumbre, ms que en la existencia de una ley, reglamento o contrato que se refiera a
ellos.
Por lo anterior, se recomienda que todo Sitio Web ofrezca la informacin necesaria para
indicar cules son esos derechos y obligaciones. Dentro de ellos, lo ms importante que
se debe puntualizar se describe en los siguientes apartados.
6.2.1. Poltica de Privacidad
-
7/31/2019 Metodologias de Diseo Web
34/40
Metodologas de diseo web
3
Se trata de incluir, en un solo documento, toda la informacin relativa a los derechos
que tiene una persona frente a la informacin que le ofrece un Sitio Web. Entre los
aspectos ms importantes que debe indicar, se cuentan los siguientes:
Recopilacin de datos: debe indicar si el sitio recopila o no datos de los usuarios (en
forma manual o automtica) y qu es lo que hace con ellos.
Eliminacin de datos: si el sitio recopila datos de usuarios con el fin de guardarlos en
una base de datos, se debe informar de los mecanismos existentes para que puedan
eliminarse de dicha base.
Uso de los datos: debe indicar de qu manera se utilizarn los datos los usuarios
recopilados a travs de las diferentes funcionalidades del Sitio Web, con el fin de que
ellos tengan conocimiento de esas operaciones.
6.2.2. Comercio Electrnico
Estos deben tener obligaciones de Informacin, mencionamos algunas:
Su denominacin social, CIF, domicilio y direccin de correo electrnico, telfono
o fax.
Los datos de inscripcin registral.
Precios de los productos o servicios que ofrecen, con indicacin de impuestos y
gastos de envo.
Si se realizan contratos online.
Trmites que deben seguirse para contratar online.
Si el documento electrnico del contrato se va a archivar y si ste ser accesible,
-
7/31/2019 Metodologias de Diseo Web
35/40
Metodologas de diseo web
3
Medios tcnicos para identificar y corregir errores en la introduccin de datos.
Lengua o lenguas en que podr formalizarse el contrato.
6.3. Plan de lanzamiento
Para hacer el lanzamiento de un nuevo Sitio Web es obligatorio que el nuevo sitio haya
cumplido adecuadamente las pruebas antes descritas, con el fin de que todos los
contenidos prometidos estn incorporados y las funcionalidades realicen todo aquello
que se describe respecto de ellas.
Si hay contenidos o funcionalidades descritas que no pueden estar disponibles para el
momento en que se desea hacer el lanzamiento del Sitio Web, es preferible eliminarlos
en ese momento e incorporarlos cuando estn listos, en lugar de dejarlos en el sitio y
que den una mala imagen sobre el mismo.
6.3.1. Desarrollo de un Plan de Comunicaciones
Una vez que se han hecho las comprobaciones descritas, se est en condiciones tcnicas
de lanzar el sitio. Lo que viene a continuacin es realizar la presentacin e incorporar el
sitio web a las actividades de difusin de la organizacin.
Para hacerlo, se debe contemplar que dicho plan debe tener componentes online y
offline, tal como se indica a continuacin:
Actividades Online: dado que estamos presentando un medio de comunicacin
tecnolgico, es importante cubrir adecuadamente esta rea a travs de las siguientes
actividades:
-
7/31/2019 Metodologias de Diseo Web
36/40
Metodologas de diseo web
3
Registrar el Sitio en Buscadores: es la actividad mediante la cual el Sitio Web comienza
a formar parte de los directorios y buscadores de Internet.
Generar Enlaces con Otros Sitios: varios de los algoritmos que usan los sitios de
bsqueda y los directorios para incluir un sitio y mostrarlo en los primeros lugares,
revisan la cantidad de enlaces desde sitios importantes que llegan al sitio.
Ofrecer Elementos de Fidelizacin: se refiere a ofrecerle a los usuarios motivos diversos
para volver al sitio; puede ser un boletn de noticias en el que se enven enlaces con
contenidos de inters; informacin til de reas relevantes, etc.
Actividades Offline: se refiere a todas las actividades que se realizan fuera del
ambiente Internet, con el fin de consolidar tambin en este mundo la marca Internet
de la organizacin. Incluye las siguientes acciones:
Imagen Corporativa: la direccin del Sitio Web debe incorporarse en la imagen
corporativa de la organizacin para que todo documento la incluya (desde informes
internos, hasta tarjetas de visita).
Actividades de Prensa: en el lanzamiento del Sitio Web se debe ofrecer un elemento
tecnolgico atractivo y no slo confiar en que la aparicin del Sitio
Web sea la noticia.
6.4. Plan de mantenimiento del sitio
Un sitio web necesita un mantenimiento constante. No se debe cometer el error de
asumir que una vez est lista en lnea, todo ya est hecho. Si se desea que las personas
retornen el sitio, se deber aadir material nuevo a la web, actualizar enlaces.
-
7/31/2019 Metodologias de Diseo Web
37/40
Metodologas de diseo web
3
Este mantenimiento de la web, consiste bsicamente en ir revisando y actualizando el
contenido de la misma.
En esta fase tambin se ofrece la posibilidad de modificar algn aspecto de la estructura
general (incluyendo nuevas secciones)
6.5 Difusin y Promocin del sitio Web
Por lo general este es el tema en el que existe mayor confusin. La mayora de las
personas que para poder promocionar eficazmente los servicios de internet, es
suficiente con tener la pgina web y desconocen que sta debe contar con un medio de
difusin o promocin para que las visitas lleguen.
No solo es necesario que su pgina web tenga un diseo agradable. Para que su sitio sea
visitado con frecuencia, los clientes o las personas que se quiere que visiten la web
sepan que la pgina existe y debe haber alguna forma de localizarla fcilmente. Un
cuando existen diversas formas de difusin, actualmente el mtodo ms efectivo es
precisamente por medio de buscadores, ya que es precisamente por medio de los
motores de bsqueda que los usuarios de internet localizan los servicios que requieran.
-
7/31/2019 Metodologias de Diseo Web
38/40
Metodologas de diseo web
3
Conclusiones
Se aprendi a cmo empezar a crear una pgina Web, ya conocemos los pasos
que la crean, ahora solo queda por ampliar nuestra imaginacin y empezar a
generar ideas para darle forma a nuestras futuras pginas, y as mismo invito a
que sigan con este generado de pginas, ya que es de mucha excelencia, y a
seguir investigando par adquirir ms conocimientos.
Recomendaciones
Los sitios web se deben construir de manera tal que su dimensin informacional
sea finita.
Un sitio web no slo se construye para introducir informacin, sino para
satisfacer las necesidades informacionales de sus usuarios potenciales.
Los sitios web deben incluir ms de un idioma para la comunicacin con los
visitantes.
Ten en cuenta que los contenidos del sitio deben entregarse en formato
digital (Word, Excel, etc., o en forma de correo electrnico). Si no tienes textos e
-
7/31/2019 Metodologias de Diseo Web
39/40
Metodologas de diseo web
3
imgenes digitalizados, se te informar el costo extra de los trabajos de
digitalizacin o tipeo para poder usarlos en el sitio.
Si tiene muchas imgenes o videos, es mejor grabar un cd/dvd y enviarlo por
correo tradicional.
-
7/31/2019 Metodologias de Diseo Web
40/40
Metodologas de diseo web
Bibliografa
Guerra A, Ronda Len R. La importancia del diseo en el web. Disponible en:
http://www.itson.mx/dii/igaxiola/articulos/diseoweb.html
Acceso: 2 de febrero del 2003.
Asociacin de Empresarios de Nerja. Consejos para disear nuestro web.
Disponible en:
http://www.webpopulis.com/aen/tutoriales/internet/w_design.htm
Acceso: 4 de febrero del 2003.
http://www.itson.mx/dii/igaxiola/articulos/dise%F1oweb.htmlhttp://www.itson.mx/dii/igaxiola/articulos/dise%F1oweb.htmlhttp://www.webpopulis.com/aen/tutoriales/internet/w_design.htmhttp://www.webpopulis.com/aen/tutoriales/internet/w_design.htmhttp://www.webpopulis.com/aen/tutoriales/internet/w_design.htmhttp://www.itson.mx/dii/igaxiola/articulos/dise%F1oweb.html