36

Capítulo 3 Diseño y Desarrollo Diseño de Base de Datos En este sistema es muy importante el diseño de una buena base de datos ya que si

no se hace de la manera correcta puede causar errores con el tiempo. En resumen

mencionarles para que sirve el diseño de las bases de datos, él porque es

importante para cualquier sistema y sus etapas del diseño.

Como sabemos hoy en día las empresas manejan una gran cantidad de datos.

Cualquier empresa debe tener almacenados todos estos datos en una base de

datos para poder realizarlos mediante una aplicación profesional; sin esta

funcionalidad resultaría imposible tratar y manejar en su totalidad los datos que lleva

a cabo la empresa y se perdería un tiempo y un dinero muy valioso.

Uno de los pasos cruciales en la construcción de un sistema que maneje una base

de datos, es sin duda, el diseño de la base de datos, donde si las tablas no son

definidas apropiadamente, podemos tener muchos dolores de cabeza al momento

de ejecutar consultas a la base de datos para tratar de obtener algún tipo

de información.

El diseño de una BD consiste en definir la estructura de los datos que debe tener la

base de datos de un sistema de información determinado. En el caso relacional,

esta estructura será un conjunto de esquemas de relación con sus atributos,

dominios de atributos, claves primarias, claves foráneas, etc.

Dependiendo de los requerimientos de la base de datos, el diseño puede ser algo

complejo o algo sencillo, pero siempre es mejor tener algunas reglas simples en la

cabeza para que este proceso sea mucho más fácil y podamos crear una base de

datos perfecta para cualquier proyecto.

Un buen diseño de base de datos es, por tanto, aquél que:

Divide la información en tablas basadas en temas para reducir los datos

redundantes.

Proporciona a Access la información necesaria para reunir la información de

las tablas cuando así se precise.

37

Ayuda a garantizar la exactitud e integridad de la información.

Satisface las necesidades de procesamiento de los datos y de generación de

informes.

Son muchas las consideraciones a tomar en cuenta al momento de hacer el diseño

de la base de datos, quizá las más fuertes sean:

La velocidad de acceso,

El tamaño de la información,

El tipo de la información,

Facilidad de acceso a la información,

Facilidad para extraer la información requerida,

El comportamiento del manejador de bases de datos con cada tipo de

información.

No obstante que pueden desarrollarse sistemas de procesamiento de archivo e

incluso manejadores de bases de datos basándose en la experiencia del equipo

de desarrollo de software logrando resultados altamente aceptables, siempre es

recomendable la utilización de determinados estándares de diseño que garantizan el

nivel de eficiencia más alto en lo que se refiere a almacenamiento y recuperación de

la información. De igual manera se obtiene modelos que optimizan el

aprovechamiento secundario y la sencillez y flexibilidad en las consultas que pueden

proporcionarse al usuario.

El diseño de una base de datos no es un proceso sencillo, habitualmente, la

complejidad de la información y la cantidad de requisitos de los sistemas de

información hacen que sea complicado. Por este motivo, cuando se diseñan bases

de datos es interesante aplicar la vieja estrategia de dividir para vencer. Por lo

tanto, conviene descomponer el proceso del diseño en varias etapas; en cada una

se obtiene un resultado intermedio que sirve de punto de partida de la etapa

siguiente, y en la última etapa se obtiene el resultado deseado. De este modo no

hace falta resolver la problemática que plantea el diseño, sino en cada etapa se

afronta un solo tipo de sub-problema. Así se divide el problema y, al mismo tiempo,

se simplifica el proceso.

38

Etapas del diseño de una BD. Etapa del diseño conceptual: en esta etapa se obtiene una estructura de la

información de la futura BD independiente de la tecnología que hay que emplear.

No se tiene en cuenta todavía qué tipo de base de datos se utilizará –relacional,

orientada a objetos, jerárquica, etc., en consecuencia tampoco se tiene en cuenta

con qué SGBD ni con qué lenguaje concreto se implementará la base de datos. Así

la etapa del diseño conceptual nos permite concentrarnos únicamente en la

problemática de la estructuración de la información, sin tener que preocuparnos al

mismo tiempo de resolver cuestiones tecnológicas.

Etapa del diseño lógico: esta etapa parte del resultado del diseño conceptual, que

se transforma de forma que se adapte a la tecnología que se debe emplear. Más

concretamente, es preciso que se ajuste al modelo de un Sistema de Gestión de

Bases de Datos (SGBD) con el que se desea implementar la base de datos. Por

ejemplo, si se trata de un SGBD relacional, esta etapa obtendrá un conjunto de

relaciones con sus atributos, claves primarias y claves foráneas. Esta etapa parte el

hecho de que ya se ha resuelto la problemática de la estructuración de la

información en un ámbito conceptual, y permite concentrarnos en las cuestiones

tecnológicas relacionadas con el modelo de base de datos.

Etapa del diseño físico: en esta etapa se transforma la estructura obtenida en la

etapa del diseño lógico, con el objetivo de conseguir una mayor eficiencia; además,

se completa con aspectos de implementación física que dependerán del SGBD.

En la etapa del diseño físico tiene como objetivo conseguir un buen rendimiento de

la base de datos, se deben tener en cuenta las características de los procesos que

consultan y actualizan la base de datos, como por ejemplo los caminos de acceso

que utilizan y las frecuencias de ejecución. También es necesario considerar los

volúmenes que se espera tener de los diferentes datos que se quieren almacenar.

39

Construcciones básicas para un diseño de BD.

Entidades, atributos e interrelaciones.

Ejemplos de entidad: un empleado, un producto o un despacho. También son

entidades otros elementos del mundo real menos tangibles pero igualmente

diferenciables del resto de objetos como: una asignatura impartida en una

Universidad, Un préstamo bancario y un pedido de un cliente, etc.

El término entidad se utiliza tanto para denominar objetos individuales como para

hacer referencia a conjuntos de objetos similares de los que nos interesan los

mismos atributos, más concretamente, el término entidad se puede referir a

instancias u ocurrencias concretas (empleados concretos) o a tipos o clases de

entidades (el conjunto de todos los empleados).

Ejemplos de atributo: Registros de DNI, su NSS, su nombre, su apellido y su sueldo

como atributos.

Los atributos tienen que ser uní-valuados, es decir si tiene un único valor para cada

ocurrencia de una entidad. Ejemplo: El atributo sueldo de la entidad empleado, por

ejemplo, toma valores del dominio de los reales y únicamente toma un valor para

cada empleado concreto; por lo tanto, ningún empleado puede tener más de un

valor para el sueldo. Como ya hemos comentado anteriormente, una entidad debe

ser distinguible del resto de objetos del mundo real.

Interrelaciones: Esta se representan en los diagramas del modelo ER mediante un

rombo e indica el nombre con letras mayúsculas. Ejemplo: Consideremos una

entidad empleado y una entidad despacho y supongamos que a los empleados se

les asignan despachos donde trabajar. Esta interrelación, que podríamos denominar

asignación, asocia a los empleados con los despachos donde trabajan.

El término interrelación se puede utilizar tanto para denominar asociaciones

concretas u ocurrencias de asociaciones como para designar conjuntos o clases de

asociaciones similares. Se define interrelación como una asociación entre

entidades.

40

Modelo de Entidad Relación.

El Modelo de Entidad Relación es un modelo de datos basado en una percepción

del mundo real que consiste en un conjunto de objetos básicos llamados entidades

y relaciones entre estos objetos, implementándose en forma gráfica a través del

Diagrama Entidad Relación.

Tipos de Relaciones:

Relación Uno a Uno: Cuando un registro de una tabla sólo puede estar

relacionado con un único registro de la otra tabla y viceversa.

Relación Uno a Muchos: Cuando un registro de una tabla (tabla secundaria)

sólo puede estar relacionado con un único registro de la otra tabla (tabla

principal) y un registro de la tabla principal puede tener más de un registro

relacionado en la tabla secundaria. En este caso la clave foránea se ubica en

la tabla secundaria.

Relación Muchos a Muchos: Cuando un registro de una tabla puede estar

relacionado con más de un registro de la otra tabla y viceversa. En este caso

las dos tablas no pueden estar relacionadas directamente, se tiene que

añadir una tabla entre las dos (Tabla débil o de vinculación) que incluya los

pares de valores relacionados entre sí. El nombre de tabla débil se deriva de

que con sus atributos propios no se puede encontrar la clave, por estar

asociada a otra entidad. La clave de esta tabla se conforma por la unión de

los campos claves de las tablas que relaciona.

Imagen 3.1 Explicación de los tipos de relaciones.

41

Diseño de Interfaces.

El diseño de interfaz de usuario sirve para ya sea diseño de computadoras,

aplicaciones, máquinas, dispositivos móvil, aplicaciones de software, y sitios web

enfocado en la experiencia de usuario y la interacción con los software.

Normalmente es una actividad multidisciplinar que involucra a varias ramas es decir

al diseño y el conocimiento como el diseño gráfico, industrial, web y de todo tipo de

software donde su objetivo es que las aplicaciones o los objetos sean más atractivos

y además, hacer que la interacción con el usuario sea lo más intuitiva posible,

conocido como el diseño centrado en el usuario. En este sentido las disciplinas del

diseño industrial y gráfico se encargan de que la actividad a desarrollar se

comunique y aprenda lo más rápidamente, a través de recursos como la gráfica, los

pictogramas, los estereotipos y la simbología, todo sin afectar el funcionamiento

técnico eficiente.

Es importante entender que la capa de presentación de una aplicación web

es tan importante como el código que la hace funcionar, por lo que sabemos la

interfaz de usuario se refiere a los elementos y características específicas de una

aplicación web, incluyendo los aspectos funcionales y visuales. El diseño de interfaz

de usuario de cualquier aplicación web puede hacer la diferencia entre una

experiencia inteligente, agradable o que frustra a los usuarios, por lo cual antes de

iniciar el software es importante determinar los requisitos funcionales, el análisis de

usuario, arquitectura de la información, el flujo de publicación, facilidad de uso, para

en definitiva, crear una interfaz de usuario que proporcione una experiencia

gratificante, y cumpla con sus objetivos de negocio.

Imagen 3.2 Importancia de hacer un Diseño agradable y fácil de entender para el

usuario.

42

Diseño de Interfaces para aplicación web de negocios. La evolución de las herramientas de desarrollo web y navegadores cada vez más

poderosos permiten desarrollar páginas y sitios con niveles de funcionalidad

impresionantes, altamente flexibles y robustos. Podemos encontrar administradores

de documentos como Google Docs, aplicaciones contables, de multimedia, agendas

entre otros.

Las aplicaciones web permiten desplegar a un bajo costo de gastos, con un software

a una gran cantidad de equipos. Se eliminan los costos de instalación y es posible

acceder a estas aplicaciones en diferentes navegadores que corran en diferentes

sistemas operativos, como así las empresas se ahorran bastante dinero en

empleados, facilitando el proceso de trabajo que la empresa maneja.

Este tipo de aplicaciones son cada vez más populares en las empresas aunque

siempre descuidan el aspecto del diseño de la aplicación, este diseño debe estar

orientado específicamente para una aplicación de negocio lo cual puede diferir de un

sitio Web.

El diseño impacta sobre la productividad, uso del sistema y aceptación del mismo ya

que un mal diseño puede provocar que un desarrollo sea inservible aunque tenga

toda la funcionalidad requerida y que las empresas pierdan productividad de trabajo

y de ganancias.

Siempre cuando se desarrolla un software es importante detallar por ejemplo la

importancia de detectar quien es el usuario (que suele nos ser el mismo que el

cliente), retroalimentación de la interface y procesos de diseño; aunque no olvidemos

siempre que es más importante que la aplicación funcione como debe a que se vea

“bonita”, pero estas aplicaciones orientadas a negocio son usadas 8 horas al día por

lo que es nuestra obligación hacer la experiencia productiva y agradable para que

los usuarios trabajen con satisfacción.

43

Técnicas de Diseño de Interfaces

Muchas veces al desarrollar una aplicación web le prestamos mucha atención a su

estética para satisfacer la experiencia del usuario, pero esto no es una garantía para

que el producto resulte “utilizable”.

Para lograr una buena interfaz de usuario en nuestras aplicaciones web utilizamos

también conceptos y reglas básicas de usabilidad.

1. Resaltar los cambios importantes

Uno de los elementos más significativos de una buena interfaz de usuario es la

visibilidad del estado del sistema; el usuario debe notar inmediatamente qué es lo

que está sucediendo detrás de escenas y si sus acciones han llevado a los

resultados esperados.

Para lograr esto hoy en día se utiliza mucho AJAX, que permite a los usuarios

actualizar parte de una página en cualquier momento sin tener que actualizar la

página completa.

2. Habilita los atajos del teclado en tu aplicación web

Esta pequeña funcionalidad puede mejorar significativamente el flujo de trabajo de

los usuarios y hacerles más fácil sus tareas.

Para implementar esto, básicamente se debe utilizar el evento onKeyPress-DOM y

manipular la apariencia del documento utilizando la función JavaScript

window.scrollTo.

3. Promociona las características de la aplicación

Describe las nuevas propiedades que incluyas en la aplicación en algún lugar muy

visible para los usuarios, como por ejemplo la barra lateral o sidebar.

4. Utiliza navegación por pestañas

Este recurso no sólo es bonito a la vista, sino que mejora notablemente la usabilidad

de la web porque la metáfora visual es fuerte y clara.

44

5. Ofrece opciones de personalización

La personalización es uno de los métodos más simples y efectivos de atraer a los

usuarios a tu servicio y hacer que se sientan más cómodos con el mismo.

Esto se puede lograr dándole al usuario la posibilidad de personalizar la apariencia

de la interfaz de la aplicación, dejándole seleccionar el color del tema, los colores del

link y del fondo de la página, etc.

6. Muestra mensajes de ayuda que llamen la atención

Para ayudar a la gente que no está muy segura sobre lo que está haciendo, es

necesario que muestren mensajes de ayuda que capten su atención.

7. Diseña con cuidado los mensajes con respuestas a acciones

Estos mensajes de respuesta aparecen en respuesta a alguna acción (buena o

mala) del usuario dentro de la aplicación web. Un ejemplo de esto es al ingresar una

contraseña errónea en el inicio de sesión. En este caso necesitamos advertirle al

usuario que se ha equivocado.

8. Oscurece el fondo debajo de las ventanas modal

En algunas aplicaciones es común que se quiera mostrar un pequeño formulario o

sección que no merece realmente una página nueva. Estas ventanas tienen la

particularidad de ser pequeñas ventanas que se abren en la misma página “sobre” el

contenido. Para avanzar es necesario que el usuario haga lo que tiene que hacer

antes de proseguir.

9. Lightboxes y Slideshows

Si tu aplicación incluye imágenes que los usuarios podrán ver, estos sistemas suelen

funcionar sin necesidad de abrir una ventana nueva. Por ejemplo, al hacer clic sobre

un thumbnail (o imagen en miniatura) una Lightbox abrirá la versión ampliada de la

imagen en una ventana modal, por encima del contenido. Eso significa menos

consumo para el servidor y una acción mucho más rápida y sencilla para los

usuarios.

45

BOOTSTRAP

Para el desarrollo de este sistema administrativo se tuvo que investigar sobre este

gran framework, que nos ayudó bastante con el diseño y así poder hacer un sistema

interactivo para los usuarios.

Bootstrap es un framework originalmente creado por Twitter, que permite crear

interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz

del sitio web al tamaño del dispositivo en que se visualice y este framework usa

varias librerías para el desarrollo de interfaces, las cuales guiaban a inconsistencias

y a una carga de trabajo alta en su mantenimiento. Es decir, el sitio web se adapta

automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de

diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.

El beneficio de usar responsive design en un sitio web, es principalmente que el sitio

web se adapta automáticamente al dispositivo desde donde se acceda. Lo que se

usa con más frecuencia, y que a mi opinión personal me gusta más, es el uso

de media queries, que es un módulo de CSS3 que permite la representación de

contenido para adaptarse a condiciones como la resolución de la pantalla y si

trabajas las dimensiones de tu contenido en porcentajes, puedes tener una web muy

fluida capaz de adaptarse a casi cualquier tamaño de forma automática.

Pero si no quieres nada que ver con los media queries, otra muy buena opción es el

uso del framework de Bootstrap, que como te dije te ayudará a desarrollar tus sitios

adaptativos.

Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear

interfaces web, los diseños creados con Bootstrap son simples, limpios e intuitivos,

esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos.

El Framework trae varios elementos con estilos predefinidos fáciles de configurar:

Botones, Menús desplegables, Formularios incluyendo todos sus elementos e

integración jQuery para ofrecer ventanas y tooltips dinámicos.

46

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es

compatible con la mayoría de los navegadores web. La información básica de

compatibilidad de sitios web o aplicaciones está disponible para todos los

dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace

disponible la información básica de un sitio web para todos los dispositivos y

navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas

redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de

soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta,

pero no es requerida para su uso.

Características.

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es

compatible con la mayoría de los navegadores web. La información básica de

compatibilidad de sitios web o aplicaciones está disponible para todos los

dispositivos y navegadores.

Existe un concepto de compatibilidad parcial que hace disponible la información

básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las

propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y

sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores

antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para

su uso.

Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el diseño

gráfico de la página se ajusta dinámicamente, tomando en cuenta las características

del dispositivo usado (Computadoras, tabletas, teléfonos móviles).

Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores

están motivados a participar en el proyecto y a hacer sus propias contribuciones a la

plataforma.

47

Estructura y Funcionalidad de Bootstrap.

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo

LESS que implementan la variedad de componentes de la herramienta. Una hoja de

estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los

desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los

componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de

configuración central. Los cambios más profundos son posibles mediante las

declaraciones LESS.

El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y

operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción

especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores

eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los

valores de varias opciones a sus necesidades. El paquete consecuentemente

generado ya incluye la hoja de estilo CSS pre-compilada.

Sistema de cuadrilla y diseño sensible.

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho.

Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para

ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas

resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje,

tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el

ancho de las columnas automáticamente.

Entendiendo la hoja de estilo CSS.

Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones

básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad

al navegador y al sistema de anchura, da una apariencia moderna para el formateo

de los elementos de texto, tablas y formularios.

48

Componentes re-usables.

En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de

elementos comúnmente usados. Ésta incluye botones con características avanzadas

(grupo de botones o botones con opción de menú desplegable, listas de navegación,

etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas,

capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de

alerta y barras de progreso.

Plug-ins de JavaScript.

Los componentes de JavaScript para Bootstrap están basados en la

librería jQuery de JavaScript y los plug-ins se encuentran en la herramienta de plug-

in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos,

tooltips y carruseles. También extienden la funcionalidad de algunos elementos de

interfaz existentes, incluyendo por ejemplo una función de auto-completar para

campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de

JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button,

Collapse, Carousel y Typeahead.

Imagen 3.3 Ejemplo de diseño de páginas con Bootstrap.

49

Desarrollo del Sistema Administrativo.

La Empresa SERVICRECE & BIT S.A. DE C.V. se dedica a realizar sistemas para

las aduanas de la región de Jalisco, ya sean sistemas administrativos, de

pedimentos y Web Services, también realiza redes y soporte a diferentes empresas

y a la sociedad en general.

EL proyecto que se realizo es un sistema administrativo para uso de la empresa,

donde se requiere un sistema que facilite los procesos que la empresa maneja en

Excel al guardar la información de venta o servicio, donde se implementara un

sistema de ticket en el mismo sistema y se busca que el sistema sea interactivo con

el usuario.

Primeramente se analizó como almacenaban los procesos de información (ventas y

servicios de desarrollo), donde observé que diferentes trabajadores hacían los

procesos en Work y después pasaban a mano de la gerente para que registrara en

Excel y en el sistema c#. Por lo que se llegó a la conclusión de hacer un sistema

web, donde puedan hacer todos los trabajadores sus procesos y puedan observar

los procesos en línea, así como actualizar el sistema en c# que la gerente utilizaba y

enlazarlo con la misma base de datos del sistema Web para que los procesos de la

gerente estén actualizados.

Es un riesgo para la empresa manejar su información en Excel, bien Excel es un

gran sistema que maneja Windows pero es un muy difícil de almacenar la

información de los procesos que la empresa realiza, en los cual con el paso del

tiempo iban perdiendo información y se iban retrasando en los registros porque era

mucho trabajo para la gerente que al final ella actualizaba toda la información.