Desarrollo de la Propuesta. Desarrollo de Versiones

Fase IV: Desarrollo de Versiones

Diseño de la Interfaz

            En la creación de un sistema una de las etapas que tiene gran importancia es el diseño y desarrollo de la interfaz de usuario ya que  es el espacio por medio del cual se pueden comunicar los usuarios con el sistema, y se tiene que prestar gran atención y dedicación ya que es el rostro del programa, a pesar de que cumpla con todas las funciones para el cual fue desarrolla, si la interfaz está mal diseñada  y no cumple con los estándares adecuados puede hacer que el sistema sea rechazado por el usuario.

            Los usuarios que manipulan el sistema poseen diferentes características que se pueden englobar en edad, sexo, conocimientos y hasta discapacidades físicas. Es por ello que al desarrollar una buena interfaz de usuario se debe tomar en consideración dichas diferencias.

Una interfaz debe ser usable y accesible. Para ello debe ser creada por y para los usuarios. Una buena interfaz cumple con varios atributos de usabilidad:

• Facilidad de Aprendizaje: El sistema debe ser fácil de aprender.
• Eficiencia: Al aprender a usar el sistema, el usuario debe tener un nivel de productividad alto.
• Retención sobre el tiempo: El uso del sistema debe ser fácil de recordar.
• Tasas de error por parte de los usuarios: Qué tan frecuentemente el usuario comete errores, y cuáles la gravedad de estos.
• Satisfacción subjetiva: Qué tan placentera es la utilización del sistema para el usuario
• Habilidades: Los usuarios deben sentir que el sistema apoya, complementa y realza sus actividades y experiencia.
• Privacidad: El sistema ayuda a los usuarios a proteger su información y la de sus clientes.

Para el diseño de interfaz se tomo en cuenta los  estándares de accesibilidad 1.0. Esta accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.  Por consiguiente se trabajo con jQuery Mobile que es un framework de javascript para creación de sitios webs optimizados para los dispositivos móviles más populares y cumple dos funciones: optimiza las acciones de jQuery y genera una interfaz adaptada para dispositivos móviles, por eso es que este plugin contiene imágenes y hojas de estilo.

         Aunque jQuery Mobile tiene plantillas predeterminadas, se lograron adaptar al estándar de colores utilizados por la IUTET donde el principal es el azul. Para los reportes se utilizaron los formatos establecidos por la institución ya que estos dependen de las directrices emanadas por el Ministerio y se generaron en formato PDF.

Pantalla principal del sistema

Pantalla con opciones del menú

Diseño de Físico de la BD

       En la ejecución del diseño físico de la base de datos, se utilizó el sistema de Gestión de Base de datos PostgreSQL en su versión 8.4 aunque no es la version actual de dicho gestor, es la que utiliza el SUGAU sistema fuente de los datos para nuestro sistema, como administrador de Base de datos se utilizo la herramienta PGAdmin III.

        Dicho diseño físico fue elaborado utilizando tablas con sus respetivos campos y campos claves, según el diagrama de clases construido para la vista lógica de la arquitectura, con el fin de alcanzar la coherencia de los datos.   

Programación

     Para  el desarrollo del software utilizamos los siguientes programas

• HTML (HyperText Markup Language) y CSS (Cascading Style Sheets) para el diseño de la aplicación.

• PHP y JavaScript para el motor de la aplicación con sus librería jQuery, que nos permiten programar sin preocuparnos del navegador con el que nos está visitando el usuario, ya que funcionan de exacta forma en todas las plataformas más habituales y la  jQuery Mobile, que agrega una capa más al JQuery tradicional que permite la creación de sitios webs optimizados para los dispositivos móviles más populares.

            Motivado a que para todo proyecto, es importante definir, crear y usar una estructura eficiente y coherente para los directorios donde almacenaremos los archivos del sistema. Una buena estructura nos facilitará su gestión, actualización y control. Por tal razón procedimos a realizar el siguiente directorio para guardar y empaquetar   los componentes de tipo .HTML. Tipo. Php y los Base de Objetos.

·         css/ Guardaremos las hojas de estilo

·         img/ Guardaremos imágenes, logotipos

·         lib/ Guardaremos los scripts php, frameworks etc…

·         js/ Guardaremos los scripts de javascript, jquery etc..

·   content/ Guardaremos todo el contenido dinámico del sitio web, si el usuario puede subir algún archivo, lo encontraremos aquí. 

·         admin/ todo el back-end

·         install/ guardamos los scripts esenciales para instalación del sitio web.

         Para cumplir con el atributo de calidad que abarca la seguridad del software se utilizaron los parámetros que se mencionan a continuación con la finalidad de resguardar la integridad de la información.

·        Ocultamiento de URL: Gracias a la tecnología AJAX, se logra ocultar los subdirectorios del sistema en la URL

·        Bloqueo y Redirección: Con el archivo .htaccess (archivo de configuración distribuida) se bloquea la posibilidad de listar un subdirectorio del sistema

·        Criptografía: esta utilidad nos permite encriptar o codificar la información que se transmite desde y para el sistema para protegerlo de cualquier hacker o pirata informático que quiera violentar la integridad del sistema

·        Servicio de Captcha y ReCaptcha: permite asegurarnos que el sistema no pueda ser violentado por los robots informáticos diseñados para hacer daño a los sistemas webs

·        Protocolo HTTPS: es una combinación del protocolo HTTP y protocolos criptográficos. Se emplea para lograr conexiones más seguras en la WWW, generalmente para transacciones de pagos o cada vez que se intercambie información sensible.