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

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

Diseño de interfases

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

Implementación

Mantenimiento

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

Caso Práctico

Diseño de
interfases

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

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