Tecnicas de Diseño de Diagramas de Flujo

DISEÑO

EQUIPO 6:

BARCENA ORTEGA GENARO GALINDO GARCIA RODRIGO GARCIA GONZALEZ LEONARDO CONTRERAS RICARDO

¿DEFINICIÓN DE DISEÑO? Un diseño es el resultado final de un proceso, cuyo objetivo es buscar una solución idónea a cierta problemática particular, pero tratando en lo posible de ser práctico y a la vez estético en lo que se hace.

Para poder llevar a cabo un buen diseño es necesario la aplicación de distintos métodos y técnicas de modo tal que pueda quedar plasmado bien sea en bosquejos, dibujos, bocetos o esquemas lo que se quiere lograr para así poder llegar a su producción y de este modo lograr la apariencia más idónea y emblemática posible.

MAPA DE SITIO Es la organizaciรณn lรณgica y estructurada de los contenidos que se van a presentar en el sitio web y no necesariamente guarda la misma estructura.

COMO CREAR UN MAPA DE SITIO Mediante el siguiente ejemplo se crea el siguiente mapa de sitio.

• Coloca el nombre de tu sitio en la parte superior del mapa.

• Debajo de el nombre del sitio, coloca los títulos de cada grupo, uno alado del otro.

• Los grupos deben estar ordenados de izquierda a derecha, con los más importantes primero.

• Estos grupos se convertirán en las categorías principales de tu sitio web o aplicación.

OBJETIVO La importancia de elaborar un mapa del sitio radica en la comprensión del orden de presentación de las pantallas con los contenidos (páginas web, aplicación etc) y la flexibilidad de moverse entre ellas (hipervínculos).

EN EL DISEÑO DEL MAPA DE NAVEGACIÓN SE DEBE: • Seleccionar la pantalla de entrada al sitio web presentación (página web: index.html).

• Ordenar de manera jerarquizada las pantallas con los contenidos (por niveles o categorías).

• Establecer los vínculos entre pantallas (páginas web) permitiendo una navegación hipertextual.

EJEMPLO 1:

• En esta estructura de mapa de navegación (sitio Web) tenemos dos niveles: • El primero, la navegación es posible entre las actividades e index de manera hipertextual.

• El segundo, la navegación hipertextual es posible entre actividad y sus páginas correspondientes (contenido teórico, laboratorio, aplicación, evaluación, glosario y enlaces); por otro lado, permite ir desde cualquiera de estas páginas hasta las otras actividades entrando en el primer nivel de navegación.

EJEMPLO 2:

HERRAMIENTAS (SOFTWARE)PARA REALIZAR: Gliffy • Es una impresionante herramienta para crear diagramas de Venn, gráficos circulares, gráficos de barras, wireframes, análisis FODA y otros tipos de diagramas.

• Se pueden crear hasta 5 funciones completas con diagramas gratis. Sin embargo, la cuenta gratuita permite a un usuario, almacenamiento de 2mb.

WriteMaps

• permite crear, editar y compartir tus sitemaps en línea y acceder a ellos desde cualquier lugar.

• Dia es una aplicación informática de propósito general para la creación de diagramas está diseñado como un sustituto de la aplicación comercial Visio de Microsoft.

• Se puede utilizar para dibujar diferentes tipos de diagramas.

• Actualmente se incluyen diagramas entidad-relación, diagramas UML, diagramas de flujo, diagramas de redes, diagramas de circuitos eléctricos, etc.

• Nos permite crear diagramas para iPhone, iPad, Android, Windows pone, Surface y web.

• Es fácil de usar, no requiere un instalador se trabaja desde internet.

• Reduce tiempo de diseño y reduce costos de proyectos.

• Es gratuito y versión de paga.

• Contiene una caja de herramientas utilizados en aplicaciones web, también nos permite crear nuestras propias herramientas.

• Permite crear anotaciones del proyecto • Permite guardar el proyecto en formato pdf para poder imprimir, enviar por correo o mostrar al cliente.

ArgoUML • Es una herramienta de código abierto que permite la creación de modelos uml.

• Permite crear diagramas de clases, estados, casos de usos, actividad, colaboración, desarrollo, secuencia.

• Es una herramienta para el modelamiento de software basado en los estándares UML (Unified Modeling Language) y MDA (Model Driven Arquitecture), • – Diagrama de casos de uso • – Diagrama de clase • – Diagrama de secuencia • – Diagrama de colaboración.

• – Diagrama de estados • – Diagrama de actividad.

• – Diagrama de componentes • – Diagrama de despliegue.

• Bibliografia: • https://cursoweb20.net/2012/08/03/que-es-un-mapa-del-sitio-o-sitemap-de-una-web/ • http://www.sitemaps.org/es/protocol.html

• https://mx.godaddy.com/help/que-es-un-mapa-de-sitio-3643 • http://www.guiadigital.gob.cl/guiaweb_old/guia/capitulos/dos/estructura.htm • http://dia-installer.de/index.html.es • http://www.pcwebtips.com/2012/10/paginas-crear-driagramas-graficos-online.html • https://ninjamock.com/ • http://staruml.io/download • http://dia-installer.de/ • https://ninjamock.com/