Upload
juan-aguillon
View
292
Download
0
Embed Size (px)
Citation preview
1
Principios Básicos de
Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 2
ObjetivoConocer acerca de la teoría y las
técnicas de diseño de sitios web.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 3
El diseño web
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 4
Temática El diseño web. Concepto. Características. Construcción de sitios webs. Ingeniería Web. Requisitos de Calidad. Modelo del proceso de desarrollo web. Principios esenciales de un diseño web eficaz.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 5
El diseño web. Concepto.
Principios Básicos de Diseño de Sitios Web
Que es? Diseño gráfico
Programación
Cliente/Servidor
Comercio Electrónico
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 6
El diseño web. Concepto.Es un campo interdisciplinario muy
centrado en el usuario que incluye influencias de las artes visuales, la tecnología, el contenido y la finalidad.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 7
Características. Contenido(informa o persuade al usuario). Tecnología(da funcionalidad al sitio). Aspectos visuales(forma visual del sitio). Aspectos económicos(beneficios).
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 8
Características.Principios Básicos de Diseño de Sitios Web
DiseñadoresUsuarios
Forma(Visual) Función(Tecnología)
Finalidad(Económica)
Contenido
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 9
Construcción de sitios webs.Tendencias(errores comunes):
Construir a partir de los aspectos visuales(resulta en un folletoware o panfletoware).
Enfoque tecnológico(diseño arbol de navidad).
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 10
Construcción de sitios webs.Errores imperdonables en los sitios webs: Usar gráficas demasiado grandes. Emplear fondos inapropiados. No ofrecerles algo gratuito a los visitantes. No darles motivos para regresar al sitio. No cambiar la apariencia del sitio ocasionalmente. No ofrecer contenido interesante. No llevar un registro de visitantes. No promover el sitio.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 11
Ingeniería Web. Toma prestado muchos de los conceptos y principios básicos de
la Ingeniería del Software, dando importancia a las mismas actividades técnicas y de gestión.
No es un clónico perfecto de la Ingeniería del Software. La filosofía principal es la aplicación de un enfoque disciplinado
para el desarrollo de un sistema basado en computadora. La Ingeniería Web aplica un enfoque genérico que se suaviza con
estrategias, tácticas y métodos especializados. La Ingeniería Web está relacionada con el establecimiento y
utilización de principios científicos, de ingeniería y de gestión, y con enfoques sistemáticos y disciplinados del éxito del desarrollo, empleo y mantenimiento de sistemas y aplicaciones basados en Web de alta calidad.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 12
Requisitos de Calidad. La calidad se refiere a las características mensurables, que se
pueden comparar con estándares conocidos como longitud, color, propiedades eléctricas, maleabilidad, otros.
A nivel de software, existen unas métricas técnicas que proporcionan una manera sistemática de valorar la calidad basándose en un conjunto de reglas claramente definidas.
Las métricas o requisitos de calidad mas relevantes para evaluar la calidad de los sistemas basados en Web son:
a. Usabilidad.b. Funcionalidad. c. Fiabilidad.d. Eficiencia. e. Capacidad de mantenimiento.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 13
Modelo del proceso de desarrollo web.
Principios Básicos de Diseño de Sitios Web
Especificación y análisisde los requisitos
Diseñode prototipos
Materialización y Pruebas unitarias
Integración y pruebadel sistema
Entrada en funcionamiento,operación y mantenimiento
Definición del problema.Exploración conceptual
Modelo en Cascada
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 14
Principios esenciales de un diseño web eficaz. Usted no es el USUARIO. Los usuarios no son diseñadores. Diseñe para el usuario medio, pero tenga en cuenta
las diferencias. La ejecución de un sitio tiene que rayar la perfección. Conoce y respeta las restricciones de la web y del
medio Internet.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 15
Principios esenciales de un diseño web eficaz. Los sitios web deberán respetar los principios GUI siempre
que sean apropiados. La navegación es solamente un medio para conseguir un
resultado final. Los elementos visuales influirán en gran medida en la
percepción inicial del interés del sitio por parte del usuario. No invente interfaces para crear marca. Lo que ve es lo que desea(WYSIWYW).
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 16
Principios esenciales de un diseño web eficaz. El valor permanente del sitio viene determinado por
los aspectos visuales, el contenido, la tecnología, la facilidad de empleo y la consecución del objetivo.
No existe una única forma “correcta” de diseño web que se adapte a todos los sitios.
El control debería estar en manos del usuario o al menos debería parecerlo.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 17
Resumen. El diseño web es un campo interdisciplinar que
consta de cuatro elementos principales: contenido, forma, función y finalidad.
El de seguir una metodología, incluso básica, de diseño web puede ser extremadamente útil.
No existe una única forma “correcta” de diseño web que se adapte a todos los sitios.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 18
El proceso de
diseño web
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 19
Temática Método web ad hoc. Modelo en cascada. Modelo en cascada modificado. Diseño de aplicación conjunta(JAD). Modelo de proceso IWeb. Enfoque de un proyecto de un sitio web.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 20
Método web ad hoc. Similar al método codificación y prueba. Diseño al vuelo(realizar y publicar). Método informal(diseña según vas avanzando). Planificación escasa y limitada. Adecuado para proyectos pequeños con
escaso mantenimiento.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 21
Modelo en cascada.
Principios Básicos de Diseño de Sitios Web
Especificación y análisisde los requisitos
Diseñode prototipos
Materialización y Pruebas unitarias
Integración y pruebadel sistema
Entrada en funcionamiento,operación y mantenimiento
Definición del problema.Exploración conceptual
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 22
Modelo en cascada modificado.
Principios Básicos de Diseño de Sitios Web
Especificación y análisisde los requisitos
Diseñode prototipos
Materialización y Pruebas unitarias
Integración y pruebadel sistema
Entrada en funcionamiento,operación y mantenimiento
Definición del problema.Exploración conceptual
Análisis de riesgos
en “remolino”
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 23
Diseño de aplicación conjunta(JAD, Joint Application Design).
Principios Básicos de Diseño de Sitios Web
El diseñador habla con los clientes para conocer sus requisitos. Realiza el primer prototipo.
El cliente prueba el prototipo y sugiere cambios y ampliaciones. Si es correcto se publica.
1
2
El diseñador prepara un nuevo prototipo.
Volver al paso 2.
3
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 24
Modelo de proceso IWebPrincipios Básicos de Diseño de Sitios Web
Formulación
Planificación
Análisis
IngenieríaEvaluación del cliente
Generación de páginas y pruebas
Diseño del contenido
Diseño arquitectónico
Diseño de la interfaz
Producción
Diseño denavegación
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 25
Enfoque de un proyecto de un sitio web. Objetivos y problemas. Audiencia – perfil del usuario. Análisis de requisitos. Planificación del sitio. Fase de diseño. Pruebas. Puesta en funcionamiento. Mantenimiento.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 26
Objetivos y problemas.Deben ser claros.Medibles.Para determinarlos se realiza una
“Tormenta de Ideas” (BrainStorming).Deben refinarse.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 27
Objetivos y problemas.Objetivos poco claros: “Proporcionar un mejor servicio al
cliente”. “Conseguir más dinero abriendo un
mercado interactivo”.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 28
Objetivos y problemas.Objetivos bien declarados: Desarrollar un sitio Web de ayuda y soporte técnico que aumente la satisfacción
del cliente, permitiendo un acceso 24/7 para cuestiones comunes y disminuyendo en un 25 por 100 la atención telefónica prestada.
Crear un almacén interactivo de recambios de automóvil que venda directamente al consumidor productos por un valor mínimo de 10.000 dólares al mes.
Desarrollar un sitio Web que proporcione a los potenciales clientes de un restaurante de comida japonesa cierta información importante, tal como horario, menú, ambiente y precios, y les anime a visitar el lugar o a hacer su pedido por teléfono.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 29
Audiencia – perfil del usuario. Cual es la audiencia potencial del sitio y sus motivos para
acceder al sitio. Preguntas básicas tales como: Dónde viven? Que edad tienen? Hombres o
mujeres? Que idioma hablan? Que conocimientos técnicos poseen? Que obtienen del sitio? Que desean ejecutar en el sitio? Cuando visitarán el sitio?
Para la mayoría de los sitios hay muchos tipos de usuarios, cada uno con diferentes características y objetivos.
Se recomienda elaborar un perfil del usuario.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 30
Análisis de requisitos.Clase de contenido a publicar.Cual sería el aspecto del sitio.Tecnología a utilizar.Restricciones técnicas.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 31
Planificación del sitio.Es plasmar en papel las especificaciones del sitio. Puede contener las siguientes secciones:Declaración y análisis de objetivos.Análisis de la audiencia.Requisitos de contenido, técnicos y visuales.Diagrama de la estructura del sitio.Personal requerido.Duración.Presupuesto.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 32
Fase de diseño. Recopile el contenido, antes de abordar el diseño. El diseño visual debe realizarse de arriba abajo(Top-
Down). Realice prototipos en papel o en pantalla. Tenga en cuenta el explorador(browser) a utilizar y las
dimensiones de la pantalla. Realice un sitio simulado.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 33
Pruebas. Los sitios siempre tienen errores, de modo que
pruebe bien su sitio. Las pruebas deben tener en cuenta todos los
aspectos del sitio, incluyendo el contenido, la apariencia visual, la función y la finalidad.
Las pruebas más importantes son las realizadas por el usuario, y deberían realizarse en último lugar.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 34
Puesta en funcionamiento y mantenimiento.El desarrollo de un sitio web es un
proceso continuo: planificación, diseño, desarrollo, entrega y vuelta a empezar.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 35
Resumen. Los diseñadores de sitios Web deben adoptar
una metodología o modelo de procedimiento que les guíe durante el proceso de desarrollo y les ayude a minimizar riesgos, a gestionar la complejidad del proyecto y, en general, a mejorar el resultado final.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 36
Diseño para los
usuarios
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 37
Temática Facilidad de empleo. Los usuarios. Características comunes de los usuarios. Entornos del usuario. Tipos comunes de usuarios. Convenios Web. Accesibilidad.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 38
Facilidad de empleo. Es la facilidad con la que un grupo de usuarios
puede utilizar un sitio para conseguir objetivos determinados con efectividad, eficacia y satisfacción en un contexto concreto de empleo(según norma ISO).
Varía tanto como los usuarios que acceden al sitio. Depende del tipo de sitio y de la familiaridad que
tenga el usuario con él.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 39
Facilidad de empleo.Tenga en cuenta las siguientes directrices: Sea consistente(interfaz sencilla de usar). Simplifique al máximo el sitio y sus páginas. Confíe en la acción de reconocer, no en recordar. Intente prevenir o corregir errores. Proporcione información. Concéntrese en la velocidad. No suponga que los usuarios leerán las
instrucciones.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 40
Los Usuarios. Tratar de satisfacer sus necesidades. Tenga en cuenta el usuario común(no irse a los
extremos: novatos o expertos). Los exploradores no utilizan los sitios, los utilizan las
personas. No existe un tipo genérico de persona, pero suelen
tener características físicas similares: visión, memoria y reacción a los estímulos.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 41
Características comunes de los usuarios: Visión. Es la forma en que reciben la información del sitio Web. Existen tres factores que afectan a la forma en que se
percibe el color: Matiz, saturación y tonalidad. Matiz: Grado de similitud entre un color y los colores
básicos(rojo, verde y azul) o algunas de sus combinaciones.
Saturación: Hasta que punto un color difiere del acromático(blanco, gris o negro).
Tonalidad: Hasta que punto un color es más claro o más oscuro que otro bajo las mismas condiciones visuales.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 42
Características comunes de los usuarios: Visión. Evite el uso de texto, gráficos y fondos de matices similares(en
vez de utilizar azul claro y azul oscuro, utilice en su lugar azul y amarillo, o blanco).
Evite combinar texto, gráficos y fondos con saturaciones similares(en vez de utiliza un texto gris sobre un fondo rosado, utilice un texto de color blanco sobre un fondo rosado, o viceversa).
Ponga un contraste alto. Evite el uso de texto, gráficos o fondos de tonalidad similar(nunca utilice texto oscuro sobre fondo oscuro o texto brillante sobre fondo brillante).
Asegúrese que los colores que utilice para diferenciar elementos, tales como vínculos, difieran claramente en dos atributos: matiz y tonalidad(evite los vínculos que cambian de rojo a rosado).
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 43
Características comunes de los usuarios: Memoria. Los usuarios tienen tendencia a maximizar las ganancias y a
minimizar el trabajo. El reconocimiento resulta más sencillo que la memorización, de
modo que no obligue a los usuarios a memorizar información. No utilice el mismo color para resaltar los vínculos visitados de
los que no lo han sido todavía. Elabore páginas que incluyan importantes diferencias visuales
con el resto de páginas. Limite el número de opciones de importancia similar, tales como
vínculos, a grupos entre 5 y 9 elementos. Póngase por objetivo la memorización de sólo tres elementos o
páginas secuenciales.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 44
Características comunes de los usuarios: Respuesta y tiempo de reacción. El tiempo que un usuario esperará es
proporcional al beneficio obtenido. Cuando los tiempos de respuesta para la
descarga de páginas sean superiores a 30 segundos, trate de proporcionar al usuario su propia información del progreso, por ejemplo, una barra de progreso del tiempo de descarga.
Esfuércese en conseguir que el usuario conozca lo más importante del contenido de una página en un tiempo máximo de un minuto de carga.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 45
Características comunes de los usuarios: Respuesta y tiempo de reacción. Intente optimizar el acceso por teclado para
todas las páginas y no solamente para las páginas de formulario.
Minimice la distancia que el usuario tiene que desplazar el ratón entre elecciones sucesivas.
Minimice el desplazamiento del ratón entre la zona de actuación en la página principal y el botón Atrás del explorador.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 46
Entornos del usuario. Cuando diseñe para los usuarios piense siempre
desde dónde están accediendo al sitio. Entre los entornos posibles se tienen: Oficina,
Casa, Cibercafé, puesto público(kiosko), PDA(Asistente Personal).
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 47
Tipos Comunes de usuarios. Desde el punto de vista de la utilización de un sitio Web,
existen tres tipos de usuarios: novatos, intermedios y expertos.
Un usuario novato es el que tiene poco conocimiento de un sitio, incluso, de cómo funciona la Web. Requiere ayuda extra.
Los usuarios expertos, son los que comprenden muy bien la Web o el sitio. Requieren relativamente pocas ayudas y preferirán hacer menos clics y consumir más.
Los usuarios intermedios, son realmente el grupo más numeroso de usuarios de la Web. Entienden cómo funciona la Web, pero no saben navegar de una manera eficiente.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 48
Tipos Comunes de usuarios. Trate de crear un sitio Web adaptable que
cumpla con los requisitos de los usuarios noveles, de los intermedios y de los expertos.
Diseñe para el usuario intermedio si no es posible desarrollar una interfaz Web adaptable.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 49
Convenios Web. No se desvíe de los convenios utilizados de
forma habitual en el desarrollo de interfaces presentes en los sitios Web más populares.
Algunas normas Web más comunes son: El logotipo situado en la esquina superior
izquierda le permitirá volver a la página principal. Los vinculos de texto se repiten en la parte
inferior de la página. Vínculo para volver a la parte superior de la
página utilizado en páginas largas. Los elementos sobre los que se puede hacer clic
son azules y se encuentran subrayados.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 50
Convenios Web. Los elementos secundarios de exploración, tales
como un plano del sitio o un buscador, se presentan de forma separada al resto de elementos de exploración.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 51
Accesibilidad.El World Wide Web Consortium(W3C) ha promulgado unas cuantas sugerencias para mejorar la accesibilidad(http://www.w3c.org/wai) :Proporcione alternativas equivalentes para los contenidos auditivo y visual.Aclare el uso del lenguaje natural(abreviaturas, definiciones, citas, etc).Garantice que las páginas que utilicen nuevas tecnologías se transforman adecuadamente.Garantice la accesibilidad de las interfaces de usuario incrustadas.Diseñe con independencia de los dispositivos.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 52
Resumen. La facilidad de empleo es uno de los aspectos de un sitio
que no siempre se advierte a primera vista, pero que influye enormente en la comodidad con que un usuario puede realizar una determinada tarea cuando utiliza el sitio.
Intente crear una interfaz adaptable que pueda ser utilizada por los tres grupos comunes de usuarios(novatos, intermedios y avanzados), con el fin de obtener un sitio funcional.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 53
Tipos de sitios y Arquitectura
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 54
TemáticaCategorías generales de sitios Web.Estructura del sitio.Tipos especificos de sitios Web.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 55
Categorías generales de sitios Web. Sitio público: es un sitio cuyo acceso no está
restringido explícitamente a ningún tipo de usuarios. Sitio intranet: es un sitio que está reservado a una
determinada organización y generalmente funciona dentro de una red privada.
Sitio extranet: es un sitio Web al que puede acceder una clase limitada de usuarios a través de Internet.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 56
Categorías generales de sitios Web. Sitios estáticos: es aquel cuyo contenido es relativamente fijo,
en el que los usuarios no pueden modificar ni el aspecto ni el ámbito de los datos que observan.
Sitios interactivos: es aquel en el que los usuarios pueden actuar directamente sobre el contenido del sitio o con otros usuarios del mismo.
Sitios dinámicos: es aquel que sus páginas se generan en el momento de la solicitud por parte del usuario.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 57
Estructura del sitio.Hay dos tipos de estructuras en cualquier sitio Web: Lógica: es la forma como se relacionan entre sí los documentos y define
los vínculos entre documentos. Física: describe dónde se encuentra realmente un documento,
mostrando, por ejemplo, el camino al directorio del documento en un servidor Web o su situación en una base de datos(por ejemplo, c:\inetpub\wwwroot\default.htm).
La estructura lógica de un sitio Web es más importante para el usuario que su estructura física.
Siempre que sea posible, evite dar a conocer la estructura física de los archivos del sitio.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 58
Estructura del sitio(Modelos).Existen cuatro formas de organización lógica de los sitios Web: Lineal: es una estructura secuencial similar a la que sigue la
información impresa(revistas, periódicos, etc). Rejilla: es una estructura lineal doble, en la que sus elementos se
relacionan tanto vertical como horizontalmente. Jerárquica: es la más común en la Web, similar a la estructura de
un árbol. Tela de araña(Web): no sigue ninguna de las estructuras
anteriores y contiene muchos vínculos cruzados y saltos hacia delante.
Principios Básicos de Diseño de Sitios Web
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 59
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Página Principal Página 1 Página 2 Página 3
Página Principal
Página 1
Página 2Página 3
Página 4
Página 5
Lineal
Lineal con alternativas
Página Principal Página 1 Página 2 Página 3
Lineal con opciones
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 60
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Camisas
Manga Corta
Manga Larga
Pantalones
Rejilla
Lino
Dril
Chaquetas
Cuero
Lana
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 61
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Empleos
Oferta
Hombres
Demanda
Jerarquía estrecha
Mujeres Ing. de Sistemas Contadores
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 62
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Página Principal
Servicios NoticiasPortales
Jerarquía ancha
Banca Viajes
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 63
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Página Principal
Servicios Portales
Jerarquía mixta
Banca
Descargas E-mail Todo en Uno InternacionalNacional
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 64
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Servicios
Presentación
Personales
Arbol con entrada lineal
CorporativosProductos
Staff
Mision, Vision
Catalogo
OnlinePágina PrincipalVerdadera
Página de entrada o de bienvenida
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 65
Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web
Servicios
Productos
Web Pura
Mapa del Sitio
Principal
Contactos
Buscador
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 66
Tipos específicos de sitios Web.Principios Básicos de Diseño de Sitios Web
Los sitios públicos se pueden clasificar en: Comerciales: su finalidad principal es servir al usuario, de modo
que, de manera directa o indirecta, se beneficie a la empresa(transacción comercial).
Informátivos: su finalidad general es la distribución de información(los de grupos religiosos, organizaciones sin ánimo de lucro, los de noticias, los educativos, sitios del gobierno).
Entretenimiento: su finalidad es simplemente entretener a sus visitantes. Tratan de vender una experiencia agradable.
Navegacionales: es el que tiene como finalidad ayudar a la gente a no perderse en Internet(portales).
Comunidad: su finalidad es crear un punto central para que los miembros de una determinada comunidad se congreguen y se relacionen.
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 67
Tipos específicos de sitios Web.
Principios Básicos de Diseño de Sitios Web
Los sitios públicos se pueden clasificar en: Artístico: su finalidad es inspirar, iluminar o entretener a los
espectadores. Personal: su finalidad es personificar al individuo en la Web.
Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 68
Resumen. Los sitios Web se pueden clasificar según su
audiencia(públicos, intranet y extranet) o finalidad(comerciales, informativos, personales, artísticos,entretenimiento, navegacionales y comunidad).
La elección de la estructura correcta para un determinado sitio es compleja y puede estar influida por varios factores.
Principios Básicos de Diseño de Sitios Web