Estructuras web De navegación Y Visual. Investigación de requerimientos ¿Qué es lo que quiere el cliente? – ¿Qué desea comunicar?, y ¿Cómo? – ¿Qué información.

Slides:



Advertisements
Presentaciones similares
Support.ebsco.com EBSCOadmin Personalización Tutorial.
Advertisements

Estadísticas en Moodle
INGENIERIA DE SOFTWARE
PORTAL WEB Manual de Usuario Perfil Autorizador
Arquitectura de la información en sitios web y Usabilidad
La sede Web Sede de un sitio Web En todos los proyectos en los que el diseño es parte fundamental, es importante tener las ideas claras desde el principio.
Propuesta Gráfica de Website
Tu , un sitio web R e d d e P r o f e s o r e s I n n o v a d o r e s Módulo: Tu , un sitio web.
GUÍA DEL POSTULANTE Esta Guía le proporcionará ayuda para realizar de manera efectiva, postulaciones a Concursos de Alta Dirección Pública.
Tema: Técnicas Básicas Excel (III) Trucos, opciones y personalización de Excel Índice: 1 Vínculos absolutos y relativos, conectando datos de Excel con.
SISTEMA DE NACIMIENTOS MANUAL DEL USUARIO. El objetivo del presente manual es servir de guía al usuario final para interactuar con el Sistema, permitiéndole.
ESTRUCTURA DEL SITIO Usabilidad Web.
Sistema Dinámico de Optimización de Rutas mediante dispositivos Smartphone SmartRut.
Qué es una ventana En informática, una ventana es un área visual, normalmente de forma rectangular, que contiene algún tipo de interfaz de usuario, mostrando.
En esta presentación se llevara acabo una explicación en la cual, se define que es la WEBNODE, con el fin de dar un entendimiento claro de este sitio.
CURSO DE OFIMATICA BASICA
Como usar el Catálogo Bello Guía práctica Acceso al catálogo  Se puede acceder al catálogo desde cualquier parte del mundo por Internet.  Es posible.
POWER POINT Ing. Evelyn Riveros H..
Interfaces Humano-Computador. Introducción n Se refiere al medio por el cual un usuario interactúa con el computador n Involucra las instrucciones que.
Ingeniero Anyelo Quintero
Departamento de Referencia CPICM_C [Hoja Informativa No. 8; 2012]
DIRECTORA REGIONAL SII DEL MAULE
Manual de Ayuda para el usuario del ing Explorer.
Grupo N° 5 Integrantes: Kathia Mariela Carrillo William Alexis Mendoza
Registro Único Tributario
Sólo debe ingresar al siguiente link
Botón de office John Alexander Vélez y..
Ingreso y Navegación inicial en SugarCRM
Google Docs y Talk. Vamos a hacer una pequeña presentación de google docs y google talk en la que hablaremos de: Historia Historia Ventajas y desventajas.
¿QUE ES LA INTERNET? Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta computadoras, sino que interconecta.
MICROSOFT OFFICE Power Point.
Yusley Contreras COD: Lizeth Fuente Rico COD:
NUEVO DISEÑO SITIO WEB EXPLORA REGIÓN METROPOLITANA Resultados en cuanto a tráfico, posicionamiento y nuevas herramientas.
PARCIAL 2.
Es un conjunto de redes: redes de ordenadores y equipos físicamente unidos mediante cables que conectan puntos de todo el mundo. Estos cables se presentan.
Microsoft power point Giancarlo ciani.
Contactos Todos los días, se contactan clientes, proveedores y asociados. En SugarCRM, cada una de estas personas es un contacto. También puede conectar.
1) ¿Qué es una Página Web? Una página web es un documento electrónico diseñado para el World Wide Web (Internet) que contiene algún tipo de información.
¿Qué es Outlook?Qué ¿Qué es Outlook?Qué Características Características principales de Outlook Características Características principales de Outlook Descripción.
Realizado por: Prof. Luis Vallenilla. En el reto anterior cambiamos aspectos esenciales en el diseño del blog. Ahora incluiremos algunos elementos a ese.
MANUAL DE USUARIO DE WORDPRESS. 1. CREAR EL BLOG  En la página Wordpress.com elegimos comenzar un blog y vamos siguiendo los pasos de registro: Rellenamos.
Unidad 7 Escritorio de Windows.
Elementos Tipicos de las Interfaces Graficas de usuario.
1.- ¿Qué es Outlook? 1.- ¿Qué es Outlook? 2.-Características principales de Outlook 2.-Características principales de Outlook 3.-Descripción de la pantalla.
Support.ebsco.com Búsqueda avanzada guiada de EBSCOhost Tutorial.
Nombre de la Institución evaluada:Tesorería General de la República (TGR) URL de su sitio web: Evaluador:Héctor Monsalve Fecha y.
1
PRÁCTICA 3: DISEÑO CENTRADO EN EL USUARIO Pedro Rivero Barrera Gonzalo Serrano Espada.
Guía de uso de e-Libro.
Creación y publicación de sitios web R e d d e P r o f e s o r e s I n n o v a d o r e s Módulo: Creación y publicación de sitios web.
¿Qué es un ? El correo electrónico o fue una de las primeras aplicaciones creadas para Internet y de las que más se utilizan. Éste medio.
Nombre de la Institución evaluada: Becas y créditos URL de su sitio web: l=74# Evaluador: Rodrigo Astudillo.
Nombre de la Institución evaluada:Programa: Vacaciones Tercera Edad URL de su sitio web: Evaluador:Héctor Monsalve.
Nombre de la Institución evaluada: Becas Chile URL de su sitio web: Evaluador:Mathias Gómez Fecha y hora inicio de Evaluación:Evaluador.
Nombre de la Institución evaluada: Servicio de Salud Ñuble URL de su sitio web: php Evaluador: Rodrigo.
Nombre de la Institución evaluada: SENDA URL de su sitio web: Evaluador:Mathias Gómez Fecha y hora inicio de Evaluación:Evaluador.
Página Web Programa de Educación Alimentaria en Acción.
Nombre de la Institución evaluada:Gobierno Regional de Tarapacá URL de su sitio web: Evaluador:Héctor Monsalve Fecha y hora.
Ricardo Ovalle Navarro Isi Suriel Ponce Misael Arvizu Monserrate Contreras.
Nombre de la Institución evaluada:Fundación para la Innovación Agraria (FIA) URL de su sitio web: Evaluador:Héctor Monsalve Fecha y hora.
Nombre de la Institución evaluada: SIMCE URL de su sitio web: Evaluador:Mathias Gómez Fecha y hora inicio de Evaluación:Evaluador.
Macromedia Dreamweaver es un editor profesional de páginas Web. Permite crear sitios tanto escribiendo directamente el código en HTML, como diseñando de.
Tipos y ámbitos de grupo (Windows server)
¿ QUÉ ES UN NAVEGADOR? Es un software que permite recorrer la internet, ver la información, y las distintas páginas que contiene. Posee una interfaz gráfica:
Es un servicio de red que permite a los usuarios enviar y recibir mensajes y archivos rápidamente mediante sistemas de comunicación electrónicos. Correo.
¿Internet? Es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes.
Tutorial Rehabilitation Reference Center support.ebsco.com.
MANUAL DE USO WORDPRESS. 1. CREAR EL BLOG En la página Wordpress.com elegimos comenzar un blog y vamos siguiendo los pasos de registro: Rellenamos el.
Impartido por: SONIA SANTED OLIVÁN. 1. ¿Qué es un Blog? Un blog, que también se conoce como weblog o bitácora, es un sitio web que recopila cronológicamente.
Unidad 7: Programas de presentaciones multimedia y hojas de cálculo
Transcripción de la presentación:

Estructuras web De navegación Y Visual

Investigación de requerimientos ¿Qué es lo que quiere el cliente? – ¿Qué desea comunicar?, y ¿Cómo? – ¿Qué información tiene? ¿Quién es el público objetivo? Actuar como asesores, NO mercenarios.

Estructura del Sitio Una vez que se ha hecho el trabajo de obtención de Requerimientos. Se debe avanzar hacia las definiciones relacionadas con la forma que tendrá el sitio. – Estructura: El árbol de contenidos y los sistemas de navegación. – Diseño visual

Estructura del Sitio Estructura: se refiere a la forma que tendrá el Sitio Web en términos generales con sus secciones, funcionalidades y sistemas de navegación. No considera ni incluye elementos gráficos (logotipos, viñetas, etc.). – Programa a usar “Freemind” Diseño: se refiere a la solución gráfica que se creará para el sitio, en la cual aparecen colores, logotipos, viñetas, y otros elementos de diseño que permiten identificar visualmente al sitio. – Programa a usar “Illsutrator”

Árbol de contenidos Árbol de contenido: se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irán incorporando.

Árbol de contenidos

Estructura de sitio 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, gráfica y funcionalidad, lo que encarecerá el costo final de operación del sitio. Dado lo anterior, se recomienda que las secciones se sitúen entre 5 y 7. Niveles: se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. Por ello no se debería crear más de tres niveles de acceso; esto significa una Portada, una Portadilla de Sección y los Contenidos propiamente tales. Contenidos relacionados: se debe considerar que habrá funcionalidades que estén presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas 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 páginas habrá enlaces a ellos.

Sistemas de Navegación Una vez que se cuenta con los árboles de contenido. Lo siguiente es generar los sistemas de acceso a dichos contenidos en el Sitio Web. A través de estos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse.

Sistemas de Navegación En la generación de dichos sistemas se debe atender a dos elementos que serán muy importantes Textual Contextual

Sistemas de Navegación Textual: Menús, guías, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Para generarlos se debe conseguir que cada uno de ellos represente claramente la función para la que fueron designados y no dejar lugar a dudas sobre su función ni sobre la acción que desarrollarán al ser usados. Es decir, un botón debe parecer tal y no sólo un parche de color sobre la pantalla. Adicionalmente, es muy importante que las palabras escogidas para indicar acciones, sean claras y precisas. En este sentido, si un botón necesita ser explicado, es mejor desecharlo y buscar otra solución.

Sistemas de Navegación Contextual: es todo lo referido a cómo se presenta la información, utilizando para ellos elementos basados en texto, gráficos o bien de entorno. Los elementos relevantes en este caso, serán todos aquellos que permiten mostrar la navegación en la pantalla. Entre ellos, la gráfica utilizada, la redacción de los textos que se muestran e incluso el nombre del dominio (URL) que permitirá que el usuario sienta que está en el lugar indicado.

Características de los Sistemas de Navegación Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas. Esto se aplica también a aquellas instituciones que pueden tener más de un Sitio Web. Uniforme: el sistema debe utilizar términos similares con el fin de que el usuario confíe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio. Visible: visualmente usable.

Referencia: /estructura.htm

Elementos de los Sistemas de Navegación Entre los elementos más relevantes que conforman el sistema de navegación se cuentan los siguientes: Menú General: siempre presente en todo el sitio, permite el acceso a cada una de las áreas del sitio. Pie de Página: usualmente ubicado en la parte inferior de cada página, indica el nombre de la institución, teléfonos, dirección física y de correo electrónico. Barra Corporativa: ofrece diversas opciones de información respecto del sitio y tal como el anterior, se muestra en todas las páginas. Ruta de Acceso: listado que aparece en la parte superior de cada página y que muestra el trazado de páginas que hay entre la Portada del sitio hasta la página actual que se esté revisando; cada una de ellas debe tener un enlace, para acceder al área de la cual depende la página. Cada uno de los elementos que conforman este camino debe tener un enlace que permita el acceso a esas áreas. En la literatura internacional en inglés sobre este tema, se llama a este elemento como breadcrumbs. Fecha de publicación: para saber la vigencia de publicación del contenido desplegado. Botón Home: para ir a la portada Botón Mapa del sitio: para ver el mapa del Sitio Web Botón Contacto: para enviar un mensaje al encargado del sitio (o, de existir, a la OIRS). Buscador: presente en cada página si es que la funcionalidad existe en el sitio. Botón Ayuda: para recibir ayuda sobre qué hacer en cada pantalla del sitio. Botón Imprimir: para imprimir el contenido de la página; se espera que el formato de impresión del documento que se muestra en pantalla sea más simple que la página normal del Sitio Web, para dar la impresión al usuario de que hay una preocupación por ayudarle en la tarea de llevar impreso el contenido.