Diseño y desarrollo de sistemas de información Web (página 2)

Enviado por Jes�s Humberto Mart�nez Obreg�n

Partes: 1, 2

+ La conectividad con la que cuenta, así como la velocidad.

+ si ya cuenta con página web

+ si se desea utilizar bases de datos para el sistema y que información utilizará.

- Documentar las entrevistas, cuestionarios y toda información útil para que el diseño sea más fácil de realizar la información a cerca del proyecto esté disponible y para futuras contingencias en cuanto a una reingeniería o ajuste a la aplicación.

- Interactuar con los usuarios para conocer mejor los procesos.

- Dejar que los usuarios participen dentro del proceso de análisis del sistema, ya que ellos pueden aportar grandes ideas debido a su interacción con la realidad, la presencia del usuario es relevante para que nuestro sistema se adapte bien a las situaciones cotidianas que se susciten.

Recordemos el análisis bien formulado y estructurado nos dará muchas satisfacciones dentro de un proyecto, ya que este será el cimiento para una estructura informática poderosa como es un sistema dentro de la supercarretera de la información.

Capítulo 2.

Diseño de interfases

Ahora entremos a esta etapa en la cual es donde todo lo que se ha analizado será aterrizado a la realidad. Para ello debemos tomar en cuenta los puntos expuestos dentro del análisis, pues dentro de esta etapa debemos realizar:

Boceto de las pantallas así como la secuencia de flujo con la que se desplegarán según las opciones que se integren al sistema.
El código fuente de cada programa realizado para el sistema, incluyendo nombre de archivo, función que realiza, autor y fecha de creación.
Diccionario de datos, donde se incluya la descripción de cada estructura de las tablas o bases de datos que interactuarán con el sistema. Debe llevar, nombre del archivo, fecha de creación, nombre de campo, tipo de campo, longitud del campo, relaciones con otras bases de datos y nombrar los campos clave.
Si la aplicación va a tener interacciones con otros sistemas.
Opcionalmente podemos recurrir a cualquiera de los dos tipos de diseño estructurado o de prototipos utilizados para el diseño de cualquier tipo de sistema. Generalmente en este tipo de sistemas es bien socorrido el diseño por prototipos ya que en ocasiones se requiere que los proyectos se realicen rápidamente y esto nos sirve como una herramienta útil para ello. Recordemos que el diseño por prototipo de aplicaciones, es en el cual las evaluaciones para el sistema se realizar mediante una aplicación creada con anticipación y con ella se realizara la evaluación para ver si el sistema nuevo se puede implementar o requiere de mejoras y ajustes de acuerdo a las necesidades de la organización
Documentar todo debidamente.
Someter a evaluación en juntas con las partes interesadas en el proyecto.

Tomemos en cuenta que en esta parte de este proceso es también importante la participación del usuario ya que recordemos que toda pantalla que realicemos debe ser funcional y amigable, ellos son los que nos proporcionarán las ideas para realizar un diseño con características amigables y además de ello que sean útiles y aplicables para proyectos posteriores.

Además de ello en este diseño hay que tener más en cuenta las combinaciones de colores, normatividad y políticas de la organización, recordemos que el principal objetivo de un sistema web es que llegue a la gente o usuarios de Internet y claro vender. Esto es primordial ya que de ello depende el éxito tanto de la página como del sistema web que se va a implementar.

Debemos ver también de no saturar la pantalla con información innecesaria, tomar en cuenta fuentes, tamaños de la misa color, para que estas sean también aptas para que sean reconocidas por software para personas con problemas de debilidad visual, por lo que también debemos no abusar mucho de los diseños en programas de animación. Seamos cuidadosos también en el manejo de la información verificando la capacidad del servidor, si es posible implementar el proyecto en el, si no hay que hacer la observación para que se actualice el equipo, para que al momento de implementar no tengamos que detener el proyecto por esta causa.

Capítulo 3.

Selección de lenguaje y desarrollo de la aplicación

Una vez superada la etapa de diseño y que haya sido evaluada, procederemos a realizar la selección de la plataforma o lenguaje de programación en la que va a ser desarrollada la aplicación.

Para seleccionar la plataforma para el desarrollo de la aplicación debemos tomar en cuenta las funciones que se vana realizar, equipo con el que contamos, sistema operativo, conectividad con la que se cuenta, plataformas de datos con las que cuentan los sistemas actuales ( en el dado caso que la aplicación vaya a interactuar con otros sistemas), tomar en cuenta las bondades que ofrece el lenguaje de programación, en cuanto a manejo de datos, capacidad de ejecución de los programas, recordemos que estos lenguajes con ejecuciones de lado del servidor por lo que debemos tomar en cuenta el tiempo de respuesta para los usuarios, recordemos que en estos programas importa mucho la rapidez con la que realicemos un procesos, pues como bien se ha comentado atrás son aplicaciones diseñadas para tener mejores condiciones de mercadotecnia; aplicaciones para diseño de páginas web; en la actualidad hay muchas herramientas visuales que nos ayudan a la tarea de diseñar las páginas sin necesidad de escribir el código HTML, XML, SHTML. En cuanto a lenguajes de programación para aplicaciones web hay también varios lenguajes, algunos muy conocidos como PERL, PHP, VBScript, C#, Java, que nos ayudan a estas tareas, son flexibles e interactúan con lenguajes como HTML para generar salida de datos y darle el formato deseado y pueda ser visible al usuario, tienen la gran ventaja que son lenguajes muy ligeros al ejecutarse procesar información por lo que nos brindan grandes ventajas para este tipo de aplicaciones, así como el software para el servicio web, los hay nativos como es el IIS (Internet Information Service de Microsoft), Apache Web Server que puede obtenerse de la página web de la empresa del mismo nombre o bien hay sistemas operativos que ya lo incluyen dentro de sus funciones.

Después de configurar y tener todo listo, procedemos al desarrollo de la aplicación, la cual se realizará de acuerdo a los procedimientos y condiciones establecidas en la etapa de diseño, cada programa debemos poner, autor, nombre del programa, fecha en la que se realizó y la función del programa.

Recordemos que es bueno no abusar de imágenes y animaciones, esto puede hacer pesada nuestra aplicación y además si queremos llegar a personas con capacidades diferentes como los débiles visuales el no abusar de ello ayuda a sus software de voz para manejar el equipo de cómputo.

Debemos tener en cuenta que dentro del servidor web debemos tener bien organizada la carpeta contenedora ya que es una sola carpeta contenedora para el servicio web dentro de esta tendremos muchas cosas que servir a los usuarios, por lo que debemos destinar una carpeta para nuestra aplicación.

Al realizar esta fase también debemos someter a una evaluación el desarrollo para ver si requieren ajustes o bien van quedando correctos los programas.

Claro que hay que tener en cuenta que debemos tener personal capacitado con el lenguaje o bien capacitar al personal encargado del desarrollo de la aplicación en el lenguaje de programación seleccionado, esto con el fin de garantizar el desarrollo de las aplicaciones web de una manera profesional.

Capítulo 4.

Implementación

En esta fase procederemos a poner en función nuestra aplicación para ello podemos recurrir a las técnicas de implementación que conocemos como:

La implementación directa: es decir se va a proceder a trabajar directamente con la aplicación, ya sea porque no existe aplicación alguna o bien se sustituye directamente la anterior por el nuevo sistema y en la práctica se evaluará para mejoras y ajustes a la aplicación .

Implementación en paralelo: En esta se van a trabajar con las dos aplicaciones, la nueva y la anterior, comparando resultados para ir evaluando la nueva y revisar que esté correcta o bien requiera de mejoras.

En la actualidad en este tipo de sistemas se recurre más a la implementación directa ya que regularmente se recurren a aplicaciones diseñadas a innovar, para que la relación entre la aplicación y el usuario final sea amigable, es decir que el usuario se sienta cómodo con la aplicación y fácil de utilizar.

Cuando se va a implementar un sistema integral como ejemplo de ello de administración, contabilidad, sistemas de seguimiento educativo, con los cuales ya se contaba con un sistema anterior es recomendable utilizar la implementación en paralelo, ya que esto permite que la nueva aplicación se vaya ajustando para que sea confiable y robusta.

Debemos establecer también políticas para cualquier cambio o ajuste que requiera la aplicación, es decir, un formato de requerimientos para cambios, así como ir documentando cada cambio que se realice, errores y resultados obtenidos con el nuevo sistema.

Aunque el trabajo no termina ahí pues debemos estar en una constante supervisión de la aplicación para asegurar el éxito de la misma.

Capítulo 5.

Mantenimiento

Al implementar una aplicación web, hablemos desde una página hasta una aplicación administrativa o de la índole que sea, debemos tener en cuenta que debemos tener cuidados tanto con la aplicación, el servidor donde se hospedan las aplicaciones, por lo que debemos considerar actividades que se deben realizar para mantener el sistema en óptimo funcionamiento:

Depuración de archivos basura: eliminar de nuestro servidor periódicamente archivos temporales, archivos que ya no se utilicen, aplicaciones innecesarias, utilizar los optimizadotes de espacio para asegurar un servidor funcional y sin problemas de software.

Respaldos: realizar periódicamente respaldos de la aplicación y bases de datos cuando se va a someter a mantenimiento el equipo, se realizan ajustes o cambios a la aplicación, se realice la sustitución de la misma por una nueva, es importante para cualquier contingencia tener siempre un respaldo de las aplicaciones web que se manejen, que no sean muy alejadas procurar hacerlo por lo menos una vez por semana.

Mantenimiento preventivo: recordemos de realizar la limpieza del servidor periódicamente, que se encuentre libre de polvo para evitar malfuncionamiento del equipo por falta de limpieza, realizar esto al menos cada 2 meses para mantener el equipo en excelentes condiciones.

Formatos para modificaciones al sistema: realizar un formato con el cual se tenga un registro de los cambios que se realizarán a la aplicación, de preferencia en donde se haga referencia a que proceso se va a modificar y porqué, es importante la justificación para someter esta a una evaluación de viabilidad para dicho ajuste y una bitácora donde se anote los cambios que se realizaron con fecha, proceso que se modifica y describir el proceso que se modificó.

Revisar constantemente las condiciones de instalación eléctrica y mantener el equipo en una temperatura ambiente, ya que estos factores pueden acarrearnos serios problemas con el equipo para nuestra aplicación.

Las actividades como depuración de archivos, mantenimiento y respaldos recaen sobre el administrador de servidor o webmaster, mientras que para la instalación eléctrica y climas se pueden recurrir a instancias externas a los departamentos de informática.

Capítulo 6.

Estándares y Documentación para la aplicación

Principal objetivo de esto es lograr:

- Estandarizar los procedimientos de desarrollo y realización de la documentación de las aplicaciones web.

- Establecer métodos de comunicación con las demás áreas que participan en el desarrollo de las aplicaciones que se desean.

- Motivar al personal de forma ordenada, metódica y disciplinada.

- Establecer procedimientos de revisión y aprobación de los resultados obtenidos en cada fase de desarrollo de la aplicación.

- Establecer una forma estándar al desarrollar los programas que se realizarán, por ejemplo, como nombrar variables, organización de código, de archivos, etc..

Por lo que dentro de la documentación de soporte debemos incluir:

- Narración del análisis previo.

- Diagramas de flujo.

- Diccionario de datos.

- Diseño de pantallas.

- Descripciones de las entradas y salidas

- Los programas desarrollados.

- Manual de Usuario.

Los documentos deben ser referenciados con el nombre del proyecto que conforma la aplicación.

Caso Práctico

Entraremos a realizar un proyecto para poner en práctica la teoría expuesta en las páginas anteriores, para ello pondremos el caso práctico de una aplicación web en donde se tenga la plantilla de empleados del Instituto Estatal de Educación para Adultos en el Estado de Coahuila, México.

Análisis.

Se solicitó a la subdirección de informática por parte de la Dirección General una entrevista para solicitar se apoye con el desarrollo de una aplicación web en donde se muestre los datos de los empleados que trabajan dentro del instituto, además de esto dentro de se debe poder realizar, altas, bajas, cambios de la información, la idea central de esto es tener la información en el servidor web, para que solo para el Director General, Director de Administración, Subdirector de Personal y la persona encargada de alimentar el sistema, piden cuente una autentificación de usuario y contraseña para que solo sea accesado de ésta manera el sistema. El objetivo de esta aplicación es la de tener un manera rápida de consultar los datos del empleado para analizar su situación dentro del instituto, es decir si solicita aumento de sueldo, si solicita cambios de adscripción, reportes; se pretende tener un control en la información, conformar una ficha técnica electrónica con la información de los empleados, ya que no se cuenta un controlo y lo importante que pueda acceder a este desde cualquier parte donde estas figuras de alta dirección se encuentren. Se debe tomar en cuenta que existe una aplicación de este tipo que se opera en mono usuario y se debe utilizar esta información dentro de esta aplicación.

Nota: en este caso práctico se desarrollará una aplicación para sustituir una anterior.

Se procedió a realizar una entrevista con el Subdirector de Personal para detalles de la información necesaria para poder realizar el sistema, así como el acceso a la información dentro del sistema previo por lo que la información recabada dentro de este departamento fue:

- Se cuenta con un sistema previo con el que llevan una ficha técnica del personal del Instituto Estatal de Educación para Adultos de Coahuila.

- Los requerimientos de los datos serán en base a las estructuras de datos con que cuenta el sistema que opera actualmente.

- Debe contar con autentificación de usuario y contraseña para que no sea accesado el sistema fácilmente como el que opera actualmente.

- El sistema debe realizar Altas, Cambios, Bajas y Consultas de los empleados.

- Debe la aplicación desarrollada debe sustituir al sistema que opera actualmente.

- Al igual que en el sistema anterior la información debe ser desplegada acompañada por la fotografía del empleado.

Ahora procederemos a ver los datos con los que cuenta el sistema que opera actualmente y dentro de él se encuentra que:

- El sistema cuenta con módulos de Altas, bajas, cambios y consultas.

- Cuenta con dos catálogos, uno de adscripciones que es donde se engloban las áreas mayores como las direcciones y las coordinaciones regionales. Otro donde se tienen Subdirecciones, departamentos y coordinaciones que son las áreas que siguen.

- Cuenta con datos generales del empleado que son: Nombre completo, domicilio, colonia, código postal, ciudad y Estado de residencia, nombre y teléfono de un familiar directo.

- Dentro de los datos nominales del empleado se encuentran: Adscripción, departamento, Descripción del puesto, sueldo ganado por los rubros, INEA, Patronato, honorarios, burócrata, así como su total por sueldo quincenal y mensual.

- No cuenta con seguridad por usuario y contraseña.

- El sistema esta diseñado con Visual Fox Pro de Microsoft por lo que sus bases de datos son tablas DBF formato que maneja dicho software.

Ahora un a análisis de hardware y software para el servicio web:

- El instituto cuenta con Enlace E1 de 1 Mbps de velocidad y Firewall para protección de la red.

- Servidor IBM con dos Procesadores de 700 Mhz y 1 GB de Memoria RAM, Windows 2000 server de Microsoft.

- El software de servicio para servidor web es Internet Information Service que viene instalado con el sistema operativo Windows 2000 server de Microsoft.

- Previamente tiene instalado el lenguaje de programación PHP ver 5.0

Nota importante: Recurrir a la documentación previa del sistema que opera actualmente para revisar procesos, diccionarios de datos y demás información necesaria.

Aquí termina el análisis de requerimientos por lo que se procederá a la fase de diseño.

Selección de lenguaje de programación y Diseño.

En cuanto al lenguaje de programación esta aplicación será desarrollada en el lenguaje PHP ver 5.0, previamente instalado en el servidor, porque es un lenguaje para desarrollar aplicaciones de lado del servidor, además puede manejar datos en varias plataformas de datos, dentro de las cuales se encuentran Microsoft Access que es en la cual se va a transportar la información del sistema actual al nuevo ya que es mucho más fácil manipular los datos con este paquete que con la tradicional DBF.

Se recurrió a la documentación del sistema anterior para poder revisar procesos, gracias a esta documentación es posible realizar más fácilmente el trabajo para el diseño.

El modelo se acopla bien a las necesidades los procedimientos están bien establecidos. Por lo que el significado de estos diagramas es:

La aplicación contará con un formulario para Altas donde se capturen los datos generales y nominales del empleado, el cual se alimentará de los catálogos para poder obtener las adscripciones y departamentos. Para Cambios se tendrá otro formulario y se recurrirá a las tablas de los catálogos para complementar la información necesaria de datos nominales y se extraerá la información para modificarla, Bajas de los empleados se realizar un formulario para poder realizar esta actividad, las consultas se realizarán desde un formulario para consultar por nombre completo, todos estos estarán activos en un formulario que se llamará menú principal para poder llamarlos.

Diseño de Archivos.

Recurriendo a los diccionarios de datos antes establecidos podemos ver que hay un problema con el manejo de fechas con PHP, por lo que las fechas se tienen que desglosar en un campo para el día, uno para el mes y uno para el año, es el único cambio que presentará las estructuras de datos por lo que quedarán diseñadas de la siguiente manera en el manejador de datos Microsoft Access.

Así de esta manera estará conformadas las tablas que formarán el archivo de MS-Access de Base de Datos que se llamará Personal.MDB.

Ahora que ya tenemos listo el diseño de las bases de datos, se debe realizar el bosquejo de las pantallas para el sistema web, como se muestra a continuación, mostraremos algunas:

Pantalla de acceso al sistema

Pantalla de Menú

Pantalla de consulta de un empleado

Pantalla de para agregar nuevo empleado.

A continuación se documentarán los códigos fuente de los programas para cada pantalla del sistema web.

Acceso al Sistema

Archivo Iniciar.htm

Fecha de Creación: 25/06/2008

Autor:

Función: Mostrar la Pantalla para pedir Usuario y contraseña de Acceso al sistema

<HTML>

<HEAD>

<TITLE>INSTITUTO ESTATAL DE EDUCACION PARA ADULTOS–Coahuila de Zaragoza–</TITLE>

<tr>

<!–

d=weekday(date)

if d = 1 then

today="Domingo"

elseif d = 2 then

today="Lunes"

elseif d = 3 then

today="Martes"

elseif d = 4 then

today="Miercoles"

elseif d = 5 then

today="Jueves"

elseif d = 6 then

today="Viernes"

elseif d = 7 then

today="Sábado"

end if

m=month(date)

if m=1 then

mon="Enero"

elseif m=2 then

mon="Febrero"

elseif m=3 then

mon="Marzo"

elseif m=4 then

mon="Abril"

elseif m=5 then

mon="Mayo"

elseif m=6 then

mon="Junio"

elseif m=7 then

mon="Julio"

elseif m=8 then

mon="Agosto"

elseif m=9 then

mon="Septiembre"

elseif m=10 then

mon="Octubre"

elseif m=11 then

mon="Noviembre"

elseif m=12 then

mon="Diciembre"

end if

Document.Write "Saltillo,Coah.," & today & " " & " de" & " " & day(now) & " " & mon & " " & "de" & " " & year(date)

–>

</script>

</strong>

</font>

</td>

</tr>

</table>

</Font>

</HEAD>

<!– URL's used in the movie–>

<!– text used in the movie–>

<!–INSTITUTO ESTATAL DE EDUCACION PARA ADULTOSPor un Coahuila sin Rezago Educativo–><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

WIDTH="685" HEIGHT="120" id="cabecera" ALIGN="top">

<PARAM NAME=movie VALUE="cabecera.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="cabecera.swf" quality=high scale=exactfit bgcolor=#FFFFFF WIDTH="550" HEIGHT="105" NAME="cabecera" ALIGN="top"

TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

<td>

<font face="Arial" size=2><strong><center>.:Plantilla de Personal—->Inicio de Sesión:.</center></strong></font>

</fieldset>

<br>

<tr><td align="right">Usuario:</td><td><Input name="usr" size=25></td></tr>

<tr><td Align="right">Clave:</td><td><input name="pwd" type=password size=25></td></tr>

</tr>

</table>

</form>

</font>

</td>

<!–FIN PARTE CENTRAL–>

</tr>

</table>

<font face="Arial" size=1 color="white"> Torreón 1479, Colonia República Oriente C.P. 25280<br>Saltillo,Coah., México.

<br>Elaboró:Jesús Humberto Martínez Obregón<br>Soporte Técnico IEEA <br> Marzo de 2008.</font>

</center>

</td>

</table>

</body>

</html>

Pantalla de Bienvenida:

Archivo: Login.php

Fecha de Creación: 20/06/2008

Partes: 1, 2

Página anterior

Volver al principio del trabajo

Página siguiente