Post on 11-Jul-2022
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.