DISEÑO DE INTERFAZ

Diseño

En esta etapa es donde la información que se recolectó se tornará a la realidad, es decir aquí se le dará forma al nuevo sistema, en documentos, diagramas de flujo de procesos, diseños de entradas y salidas, seleccionar dispositivos de almacenamiento, la lógica que llevará el sistema, diseño de archivos maestros, de trabajo, flujo de los datos determinar volúmenes de información, pantallas, menús, submenús, mensajes, reportes, mantenimiento, ajustes; Todo lo que conformará el nuevo sistema de almacen.

Para ello existen dos tipos de diseño para pasmar el análisis al nuevo sistema: Diseño por análisis estructurado y por aplicaciones de prototipo. Pueden tomarse cualquiera de los dos métodos según las necesidades de cada organización y tomando en cuenta el tiempo para poder realizar el sistema, algunas veces se cuenta con poco tiempo para las actividades.

Diseño de estructura 

Flujo de datos: representa la dirección en que los datos se moverán desde el origen hasta un destino, esto también representa un paquete de datos.

 

Procesos: este representa los procedimientos, personas, dispositivos que transforman datos.

 

Fuente o destino de datos: Representan personas, dispositivos, programas, organizaciones o cualquier otra entidad  de la cual van a surgir datos o bien van a recibirlos.

A cada uno se le pondrá una etiqueta de lo que representará, esta debe ser un nombre descriptivo acompañados de un número para darle secuencia lógica en el diagrama. A continuación se ejemplificará

Las ventajas que ofrece este tipo de diseño es que puede ser comprendido por otras personas que estén involucradas en el proceso del análisis y desarrollo del sistema, además gracias a esto se pueden involucrar a más personas, sobre todo los usuarios, para ver que procesos necesitan una modificación  y se pueden realizar sugerencias para mejorarlo, es decir ayuda a que se viva una participación activa dentro del proceso de creación del nuevo sistema. Además como es gráfico ofrece una mejor perspectiva y con ello localizar rápidamente errores y corregirlos, se pueden aislar áreas para ver con detalle los procesos, datos que entran en este mismo, es decir ayuda a comprender mejor los procesos, a la integración de este con otros sistemas, esto porque puede haber procesos que de este mismo que puedan interactuar entre si con otro sistema.

Diseño de prototipos

Dentro de las técnicas de diseño de desarrollo de sistemas existe el desarrollo por prototipo de aplicaciones, este consiste en definir requerimientos y evaluación de procesos por medio de un sistema que funciona antes de que la aplicación sea implementada en su totalidad, es decir no es un sistema desarrollado en su totalidad, solo tiene las características necesarias para ver el sistema propuesto antes de que como se mencionó anteriormente antes de presentar el sistema final. Es probar varias suposiciones, además los prototipos se crean con rapidez, evolucionan de acuerdo a los avances en la evaluación cuando se le van  haciendo modificaciones y mejoras, además de que ofrecen bajo costes de desarrollo.

Desarrollo

En este capítulo veremos la transición del proceso de diseño al de desarrollo del sistema, es decir, aquí en ésta fase se realizará el sistema en una computadora de acuerdo a estas actividades previas:

-    Las especificaciones que provienen del análisis y diseño previo para su codificación en un lenguaje de programación, además utilización de otras herramientas necesarias para el desarrollo del sistema.

-    Crear archivos los archivos de datos según  lo antes diseñado en la fase anterior, que serán utilizados en el sistema.

-    Realizar la documentación del sistema, esta debe incluir además los programas que conforman el sistema.

-    Verificar que se cuente con los equipos suficientes para la implementación del sistema.

-    Capacitar a los usuarios y al personal de sistemas en las actividades de procesamiento de datos y mantenimiento.

-    Establecer estrategias para la implementación del nuevo sistema.

En esta parte del procedimiento es donde suelen aparecer errores del análisis y diseño, pero esto es debido a una falta de planeación y control, algunas de las situaciones que se puedan presentar  pueden ser: que algún proceso no haya sido bien interpretado por el analista, dificultades para realizar los archivos de datos, la elaboración de programas con errores que para el usuario son difíciles de operar. Así que hay que establecer una planeación y un control para evitar estas contingencias y si aparecen saber como actuar evitando que el proyecto pierda seriedad, definir claramente las funciones de las personas involucradas en el proceso de desarrollo para que así al surgir problemas, sea de manera oportuna y que todo el desarrollo sea llevado sin contratiempos.

Durante este proceso se deben también probar los módulos que se van desarrollando para ver si funcionará correctamente, verificar cada datos que va generando para ver si son correctos y corresponden a las especificaciones, durante esta prueba hay que utilizar datos como verificados de veracidad de los datos. Dentro de este proceso de prueba se pueden incluir al personal que interactuará con el nuevo sistema. Para que antes de su liberación vaya lo más libre de errores, además cuando participan los usuarios surgen errores inesperados que se pueden atacar en el momento y así depurar cada vez más el sistema, lo que como resultado nos dará un sistema robusto y amigable.

interfaz gráfica principal de técnico de almacén en no atendidos 

El enlace para la interfaz de en atención

El enlace para la interfaz de listos para envío

Dentro de la interfaz en de la coinsulta de pedidos no atendidos que se puede realizar desde la pestaña de no atendidos

El enlace para la interfaz de atender pedido

Mantenimiento 

este debe tener un seguimiento durante su ciclo de vida, ya que vivimos en un medio que esta en constante movimiento y cambios, esto afecta a los sistemas computacionales; ya que deben de ser actualizados de acuerdo a los requerimientos que van sugiriendo dichos cambios, e inclusive el realizar ajustes durante la vida útil del sistema ya sea por:

-    Descuidos en las fases del análisis y diseño del sistema.

-    Las pruebas al sistema no son suficientes.

-    Cambios en los procedimientos dentro de la organización.

-    Cambios también en las políticas de la empresa, tales como cambios de precios, políticas de crédito, compras, entre muchas otras cosas.

-    Y cambios en ámbitos legales.

A veces se realizan cambios innecesarios que como consecuencias traen consigo fallas en el control del sistema y esto causa incrementos en los costos, lo que puede causar un estado de ineficiencia al sistema.

Por lo que se recomienda que al hacer un proceso de mantenimiento y ajustes, se tome en cuenta al usuario ya que es quien interactúa con el sistema y es la principal fuente para detectar errores.

Que el sistema sea modular, tenerlo en segmentos fácilmente identificables puede ahorrar tiempo y

costos al realizar el mantenimiento del sistema, recordemos que entre más precisos sean nuestros procesos de control sobre los ajustes, evitaremos demoras, y por ende pérdidas en la organización y hablará de un sistema robusto y adaptable. Además tener procesos de control en los cambios, para prevenir cambios innecesarios, a veces el usuario son quienes no tienen idea de las implicaciones para un cambio, por lo que debemos someter estas solicitudes en primer lugar a que se hagan por escrito, luego evaluarlas de acuerdo a viabilidad, prioridad y consumo de tiempo, costo/beneficio de los recursos informáticos (analistas, programadores, operadores) además de que sea justificada y que los cambios sean autorizados por la alta dirección.

La organización es de suma importancia, es decir tener bien definidas las funciones de cada persona que participa dentro de todo el proceso de desarrollo  y mantenimiento del sistema, aclarar las funciones  de personal, recursos informáticos, objetivos fijados, para así tener un control muy eficiente de los cambios. Para reforzar todo esto el departamento de informática deberá ser independiente de las demás actividades de la organización, separar las funciones dentro del departamento.

Códigos de HTML

estos son códigos que utilizamos para la creación de interfaz

Tablas 

<table border=1><td>Aqui va el contenido de la tabla, texto, imágenes, etc.</td></table>

Resultado:

Aqui va el contenido de la tabla, texto, imágenes etc.

Además de una simple tabla podemos adjudicar varios códigos para obtener una tabla dividida en columnas y encasillados. Veamos los siguientes ejemplos.

Código:

<table border=1><td>Columna #1</td><td>Columna #2</td></table>

Resultado:

Columna #1

Columna #2

Fíjate que antes de cerrar la tabla con el código de </table> añadimos un set de códigos <td></td> para insertar la seguna columna. ¿Pero que tal si queremos añadir contenido debajo de estas columnas? Veamos el siguiente ejemplo:

Código:

<table border=1><td>Columna #1</td><td>Columna #2</td><tr><td>Contenido Bajo Columna#1<td>Contenido Bajo Columna#2</td></table>

Resultado:

Columna #1	Columna #2
Contenido Bajo Columna#1	Contenido Bajo Columna#2

Si queremos añadir más columnas o encasillados solo tenemos que añadir más códigos <td></td> para columnas y <tr> para encasillados. Fíjate que para añadir encasillados no tienes que cerrar el código <tr>, solo lo escribes donde quieres que vaya el espacio y listo.

---

Otro efecto que podemos aplicar a una tabla es el color de los bordes de la tabla y el color de fondo. Esto se hace añadiendo los códigos de <bordercolor="red"> para el color de borde y <bgcolor="black"> para el color de fondo. Veamos el siguiente ejemplo:

Código:

<table border=1 bordercolor="silver" bgcolor="black"><td><font color="white">Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font color) es blanco</font></td></table>

Resultado:

Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font color) es blanco

Para programar HTML, los hipervínculos se indican con la etiqueta <a>.

Dicha etiqueta <a> deberá incluir el atributo href para especificar el destino del hipervínculo, y luego, como todas las etiquetas de HTML, se deberá cerrar de la manera </a> para indicar el fin del texto o de la imagen que contiene el hipervínculo.

Entonces, el hipervínculo en HTML luce de la siguiente manera:

<a href=”dirección del sitio”>Texto del Hipervínculo</a>

Ejemplo:

<a href=www.basekit.com.mx>BaseKit México</a>

Hipervínculos dentro de una misma página:

Para crear un hipervínculo que vaya a una sección dentro de la misma página, debemos hacer uso del atributo “id”. El título de la sección a la que queramos ir deberá tener este atributo para que después podamos crear un hipervínculo hacia ella.

Por ejemplo, el título luciría así:

<h2 id="conclusion">Conclusión del Debate</h2>

Y después, el hipervínculo hacia dicha sección luciría de esta manera:

<p>Vaya a la sección <a href="#conclusion">Conclusión del Debate</a> para leer las conclusiones y comentarios finales.

Hipervínculos con imágenes:

Para crear un hipervínculo en una imagen, de manera que cuando la gente de click a una imagen se le envíe a algún sitio, simplemente hay que incluir la imagen dentro de la etiqueta <a>, como en el siguiente ejemplo:

Acá tenemos una imagen sin hipervínculo:

<img src="pastel.jpg" alt="Pasteles" width="150" height="125" />

Ahora, si queremos que esta imagen tenga un hipervínculo, lo debemos especificar así:

<a href="pasteles.html"> <img src="pastel.jpg" alt="Pasteles" width="150" height="125" /> </a>