Especificar Modelo

Conceptual

Ing. Angélica Isabel Ochoa

Herrera- SENA
BUCARAMANGA
El aprendiz abordará temáticas que le
permitirán de acuerdo con su proyecto
formativo, elaborar el modelo conceptual del
sistema de información a desarrollar teniendo
en cuenta los requerimientos obtenidos en la
actividad de proyecto 1 y el análisis de los
mismos con casos de uso realizados en la
actividad de proyecto 2.
Un modelo conceptual de un sistema
permitirá al analista de sistemas realizar un
diseño adecuado del SI. Por el contrario, un
deficiente modelado hará que se presenten
rediseños que pueden retrasar el proyecto
o aumentar su costo.
UML es una herramienta usada por analistas
funcionales (aquellos que definen qué debe hacer un
programa sin entrar a escribir el código) y analistas-
programadores (aquellos que dado un problema, lo
estudian y escriben el código informático para
resolverlo en un lenguaje como Java, C#, Python o
cualquier otro). 
Un animal debe representarse con su nombre escrito enteramente en
minúsculas enmarcado dentro de un rectángulo doble. Encima del
nombre debe etiquetarse el tipo de animal así: <<Tipo de Animal>>.
Por ejemplo, <<Gato>>.
TIPOS DE DIAGRAMAS EN UML

Diagramas de casos de
uso: representan a los actores y casos
de uso (procesos principales) que
intervienen en un desarrollo de
software.
Diagramas de secuencia: suelen usarse para
representar objetos software y el intercambio de
mensajes entre ellos, representando la aparición
de nuevos objetos de izquierda a derecha.
Diagramas de clases: para UML una clase es una entidad, no una clase
software. Un diagrama de clases UML puede ser un diagrama del dominio o
representación de conceptos que intervienen en un problema, o también un
diagrama de clases software. El sentido de un diagrama UML se lo da la persona
que lo construye.
Diagramas de colaboración: suelen
usarse para representar objetos o
clases y la forma en que se transmiten
mensajes y colaboran entre ellos para
cumplir un objetivo.
Diagramas de estados: suelen usarse para
representar cómo evoluciona un sistema
(cómo va cambiando de estado) a medida que
se producen determinados eventos.

Otros diagramas: diagramas de actividad,

diagramas de paquetes, diagramas de
arquitectura software, etc.
https://www.youtube.com/watch?v=Z0yLerU0g-Q
Ejemplo Entidad Bancaria
ASOCIACIONES, MULTIPLICIDADES
a. 1 → 1..*
b. * → 1..2
c. 2..* → *
d. 4 → 1
e. 2 → 2
Relaciones de agregación presentes en un hospital
relaciones de herencia presentes en una droguería.
Actividades: acción requerida para llevar a cabo un proceso.
Actor: se emplea para indicar el tipo de usuario del sistema que
podrá ejecutar
alguna función.
Asociación: relación que se da entre elementos de los diagramas, por
ejemplo,
entre los actores y el caso de uso o entre las clases.
Atributos: características de una Clase, son datos específicos que
interesa
guardar de cada entidad.
Cardinalidad: indica la participación que tiene una entidad en la
relación.
Caso de Uso: indica una función que el sistema debe proveer.
Clases: unidad básica que agrupa una colección de objetos.
Entidad: elemento del sistema de los cuales interesa almacenar
información.
 Preguntas
¿Cómo se crea un modelo conceptual?
- ¿Qué ventajas tiene apoyarse en modelos
conceptuales?
- ¿Existen herramientas informáticas que
ayuden al levantamiento de modelos
conceptuales?
- ¿El aprendiz ha tenido que crear un modelo
de alguna situación de la vida real?
- ¿Cuáles pueden ser las dificultades para elaborar el modelo
conceptual de una empresa?
- ¿Conoce algo sobre desarrollo de software orientado a
objetos?
- ¿Qué ventajas ofrece las metodologías de desarrollo
orientadas a objetos?
- ¿Tiene conocimiento de cómo se modela una base de datos?
- ¿Ha diseñado alguna base de datos que le haya sido útil
para solucionar un problema?
- ¿Cómo trabajar eficientemente en un equipo de desarrollo
de software?
- ¿Qué genera conflicto cuando se trabaja en un equipo de
desarrollo de software?
- ¿Ha tenido que participar en la resolución de un conflicto?
Diagrama de Flujo
ESPECIFICACIÓN DE REQUERIMIENTOS DE
SOFTWARE

Requerimientos funcionales y no funcionales

https://www.youtube.com/watch?v=tF88eNhNSb4
Modelo Entidad-Relación
 MODELO E-R
• Elementos esenciales:
• Entidad: Clase de objetos relevantes y distinguibles del
mundo, que son los sujetos de interés para una organización.
Ej: Cliente, Empleado, Pedido, Sucursal, Factura, etc.
• Relación: Conexión, asociación entre dos entidades (relación
binaria)
• Atributo: Propiedad esencial o característica interesante (para
la organización) de una entidad

05/19/2021 Curso Bases de Datos 74

 Entidades
• Clases de objetos de importancia en el dominio de
estudio
• Interesan algunas de sus propiedades  Atributos
• A veces NO es fácil distinguir si un elemento es un
atributo o una entidad. Ej: ¿Barrio es un atributo de
persona o es una entidad en sí misma? ¿Apellido es
siempre un atributo de persona o puede llegar a ser
una entidad? ¿De qué depende la elección?

05/19/2021 Curso Bases de Datos 75

 Entidades
• Representación:
• Caja con bordes redondeados
• Su tamaño no importa
• Nombre único (cada entidad solo aparece una vez en el
modelo) en mayúsculas y en singular
• Un nombre sinónimo para una entidad puede ir entre
paréntesis o separado por /.

05/19/2021 Curso Bases de Datos 76

Entidades
Ejemplos de entidades usuales:
• Personas: Alumno, Pasajero, Profesor, Cliente
• Instituciones: Banco, Empresa, Universidad
• Unidades organizacionales: Departamento, Sucursal, Planta,
Línea
• Clasificaciones, agrupaciones y jerarquías: Tipo, Clase, Marca,
Grupo, Género
• Documentos: Factura, Pedido, Orden, Cheque
• Objetos (físicos o abstractos): Material, Producto, Asignatura,
Habilidad
05/19/2021 Curso Bases de Datos 77
 Relaciones- Cardinalidad
• Uno a Uno: (1:1) Un registro de una entidad A se relaciona con solo un registro en una entidad B.
(ejemplo dos entidades, profesor y departamento, con llaves primarias, código_profesor y
jefe_depto respectivamente, un profesor solo puede ser jefe de un departamento y un
departamento solo puede tener un jefe).
• Uno a Varios: (1:N) Un registro en una entidad en A se relaciona con cero o muchos registros en
una entidad B. Pero los registros de B solamente se relacionan con un registro en A. (ejemplo: dos
entidades, vendedor y ventas, con llaves primarias, código_vendedor y venta, respectivamente, un
vendedor puede tener muchas ventas pero una venta solo puede tener un vendedor).
• Varios a Uno: (N:1) Una entidad en A se relaciona exclusivamente con una entidad en B. Pero una
entidad en B se puede relacionar con 0 o muchas entidades en A (ejemplo empleado-centro de
trabajo).
• Varios a Varios: (N:M) Una entidad en A se puede relacionar con 0 o con muchas entidades en B y
viceversa (ejemplo asociaciones-ciudadanos, donde muchos ciudadanos pueden pertenecer a una
misma asociación, y cada ciudadano puede pertenecer a muchas asociaciones distintas).

05/19/2021 Curso Bases de Datos 78

 Relaciones
La otra dirección de la relación:
Opcionalidad: opcional (puede)
Grado: uno
leyenda 1

ENTIDAD 1 ENTIDAD 2
leyenda 2

Una dirección de la relación:

Opcionalidad: obligatoria (debe)

Grado: muchos

05/19/2021 Curso Bases de Datos 79

 Relaciones
Lectura desde la ENTIDAD1 a la ENTIDAD2:

Un(a)
debe ser leyenda un(a)
ENTIDAD 1 1 ENTIDAD 2
puede estar mucho(a)s

Nota: Si la ENTIDAD2 es precedida por muchos, su

nombre se pluraliza en la lectura

05/19/2021 Curso Bases de Datos 80

Relaciones
Lectura desde la ENTIDAD 2 a la ENTIDAD 1:

Un(a)
debe ser leyenda un(a)
ENTIDAD 2 2 ENTIDAD 1
puede estar mucho(a)s

Nota: Si la ENTIDAD1 es precedida por muchos, su

nombre se pluraliza en la lectura

05/19/2021 Curso Bases de Datos 81

 Relaciones
Nota: Una lectura de relación SIEMPRE inicia en singular (Un(a)), JAMÁS con la
palabra mucho(a)s.

dictado por

CURSO PROFESOR
encargado
de
Lecturas:
De CURSO a PROFESOR:
- Un CURSO debe ser dictado por un PROFESOR
De PROFESOR a CURSO:
- Un PROFESOR puede estar encargado de muchos CURSOS

05/19/2021 Curso Bases de Datos 82

Relaciones
Tipos de relaciones:
• Uno a muchos:

de
DETALLE compuesta de
FACTURA

Nota: Sobre las relaciones “debe-debe”

• Uno a uno:
encargado de
CHOFER CAMIÓN
conducido por

05/19/2021 Nota: Aquí solo interesa Curso

guardar
Bases deel chofer actual de un camión
Datos 83
 Relaciones
• Muchos a muchos:

surtidor de
PROVEEDOR PRODUCTO
suministrado por

Transformación:
surtido por de
PROVXPROD/ENVIO

surtidor de suministrado en

PROVEEDOR PRODUCTO

05/19/2021 Curso Bases de Datos 84

Ejemplo Modelo E-R
comprado
en
ARTÍCULO ORDEN
compuesta
almacenado de hecha
en para
el sitio de el
almacenamiento generador
de de

BODEGA CLIENTE

05/19/2021 Curso Bases de Datos 85

Atributos

• Características, propiedades que describen a una

entidad
• Identifican, califican, cuantifican, clasifican o
expresan el estado de la entidad
• Nombres claros, completos y preferiblemente sin
incluir el nombre de la entidad

05/19/2021 Curso Bases de Datos 86

Atributos
• El nombre de los atributos se escribe en minúscula
dentro de la caja de la entidad
• Ejemplo: En una entidad ESTUDIANTE con
un atributo fecha de nacimiento NO es
necesario tener un atributo edad, si se
tienen FACTURAS y sus DETALLES de
productos vendidos NO es necesario tener
un atributo para el total de productos
vendidos en la factura

05/19/2021 Curso Bases de Datos 87

Atributos Identificadores
Identificador (único) de una entidad:
Conjunto de atributos y/o relaciones que identifican de manera
única una entidad. Ejemplos:
• Entidad con un solo identificador: ALUMNO con atributos
cédula, nombre y año nacimiento
• Entidad con varios identificadores candidatos: ELEMENTO
QUÍMICO con número, símbolo, nombre, temp_ebullición.
• Entidad con un identificador compuesto por dos atributos*:
VEHÍCULO donde la placa se representa con dos atributos así:
letras, dígitos, color, modelo.

* Se podría representar también mediante un solo atributo

Ambos conforman el
05/19/2021 Curso Bases de Datos 88
identificador
 Atributos Identificadores
• Entidad con un identificador compuesto por un
atributo y una relación: CUENTA(1) con número
cuenta (atributo) y cod_sucursal (relación), saldo.
• Entidad con un identificador compuesto por un
atributo y dos relaciones: Ej: PEDIDO(2) con la fecha
(atributo), cod_producto (relación) y el
cod_proveedor (relación), nro_unidades

(1) Dos sucursales pueden tener números de cuenta iguales, pero

una misma sucursal no puede tener dos números de cuenta
iguales.
(2) Es decir, aquí a un mismo proveedor se le puede pedir el mismo
producto en fechas diferentes

05/19/2021 Curso Bases de Datos 89

 Atributos Identificadores Identificador
Identificador compuesto
de para cuenta
Computador
COMPUTADOR CUENTA
# referencia # número
* marca * saldo
* fecha de compra
* número de serie adscrita a
* chip procesador
* velocidad procesador el lugar de apertura de
chip coprocesador
SUCURSAL
Identificador Identificador
alternativo (no hay una # código de
notación especial para * nombre Sucursal
ellos) * ciudad
05/19/2021 Curso Bases de Datos 90
Atributos Identificadores

CHOFER encargado de CAMIÓN

# cédula conducido por # placa
* nombre * valor

Aquí es posible también: Identificador

alternativo

CHOFER encargado de CAMIÓN

# cédula * placa
conducido por
* nombre * valor
05/19/2021 Curso Bases de Datos 91
 Un ejemplo de otra notación para el
modelo E-R:

nombre cédula número valor

prestatario
CLIENTE PRÉSTAMO

• Aquí las flechas azules indican una relación de uno a uno

• Los óvalos representan atributos, los cuadros entidades y
el rombo relación
No se trabajará en el curso esta notación

05/19/2021 Curso Bases de Datos 92

CLASIFICACIÓN DE LOS SITIOS
WEB SEGÚN SU TECNOLOGIA
TIPOS DE SITIOS WEB
Sitios informativos
Sitios personales
Sitios de autor-blog

Sitios comerciales

Redes sociales-comunidades
Directorios y portales

Sitios transaccionales
Tips Diseño de su Página
SITIOS PERSONALES
• Uso personal (Actualmente se usa a
nivel profesional). • Ejemplos:
• Publicar información a amigos, relativos Sitio web
o futuros clientes.
personales:
• Álbum de fotos.
• Populares antes de la era de redes https://www.
sociales pero ahora se están
convirtiendo en nuestra entrada al
facebook.com/
entorno digital. angelica.ochoaherrer
• Hoy en día: a
• Personal: Facebook / About me www.linkedin.com/in
Profesional: LinkedIn / Twitter
/angelica-isabel-ocho
a-herrera Volver al árbol
SITIOS DE AUTOR-BLOG
• Ejemplos:
• Uso personal o profesional. Sitios de autor - blog
• Publicación de contenidos
editoriales.
• De uso público.
• Actualización constante.
• Plataformas:
• Blogger, Wordpress.
• Blogs de medios de comunicación.

Volver al árbol
Redes Sociales (Comunidades)
Ejemplos:
• Uso personal o profesional Redes sociales –
• Diseño estandarizado
comunidades
• Desarrolladas para Juego de Tronos- Jag
compartir y conectar Duran
personas
• Información generado sin
filtro
• Plataformas:
• Facebook, Youtube,
Twitter, LinkedIn,
Instagram. Snapchat.
Volver al árbol
SITIOS INFORMATIVOS
• Ejemplos:
• Desarrollo profesional para la
opinión pública. • El Tiempo
http://www.eltiempo.com/
• Reúnen información. • New york times
• Editores que curan el contenido para • https://www.nytimes.com/
la audiencia. es/
• Generan dinero vía banners. • Wikipedia
• Medios de comunicación • https://es.wikipedia.org/wi
reconocidos. ki/Wikipedia:Portada
• Las dos orillas
• https://www.las2orillas.co/

Volver al árbol
SITIOS COMERCIALES
• Uso profesional. Orientado • Ejemplos:
a generar negocios. • La quinta centro comercial
• Informativos, no hay (eventos- tiendas-servicios-blog-revista-clientes Gold)
transacción dentro del sitio.
• http://laquinta.com.co/
• Transcripción de
información de catálogos y • Renault Colombia (Vehículos-
folletos. servicios-financiación-Multimedia )

• https://www.renault.com.
c
• Constructora HG (Quienes somos-
proyectos-servicios-contacto)

• https://www.hgconstructo
ra.com/ Volver al árbol
Directorios y portales
especializados • Ejemplos:
• Recopilan información de • Buscadores: Google –Bing - yahoo.
otros sitios. (Buscadores especializados de info mediante algoritmos y
palabras claves)
• Punto de inicio de navegación • www.google.com
para usuarios. • Directorios: Paginas amarillas,
Ciudad gurú. (sitios especializadas en paginas web de
establecimientos comerciales y asesorías)

• http://www.paginasamarillas.com/
• Viajes: despegar, Viájala. (Sitios
especializados en asesorías para toures y planes turísticos,
cruceros )
• https://www.despegar.com.co/
• Compras: (Sitios especializado en compra-venta de
diferentes productos por categorías)

• www.mercadolibre.com.co
• www.tucarro.com.co
• www.Olx.com
Volver al árbol
SITIOS TRANSACCIONALES
Ejemplos:
• Transacciones en línea.
• Easy taxi
• Compras.
(Sitio para pedir taxis libres de manera
segura, descargar la App para el móvil)
• http://www.easytaxi.com/bo
• Reservar hoteles, dapp
tiquetes. • Secretaría Distrital de Hacienda:
• Taxis, transporte. (Pago de servicios- impuestos- industria y comercio)
• http://www.shd.gov.co/shd/p
• Pagar impuestos. agos-y-servicios

• Catálogo de productos. Tiquetes baratos : (Reserva de tiquetes

baratos aéreos-terrestres y marítimos)
• Pagos en línea. https://www.tiquetesbaratos.co
m/
• Bricks & Clicks

Volver al árbol
https://youtu.be/oikrPD8IxxQ

TIPS PARA CREAR UNA WEB

EXITOSA
CREACIÓN EN 6 PASOS
1. Recolección de Plan de marketing digital Necesidades y capacidades
información

2. Planeación Arquitectura de información Prototipos

3. Diseño Aspecto gráfico Piezas de contenido

4. Desarrollo Códificación HTML / CSS Programación

5. Pruebas y montaje Compatibilidad Desempeño

6. Mantenimiento Revisión métricas Actualizaciones

1. LA RECOLECCIÓN DE LA
INFORMACIÓN 7 Contenidos que no deben faltar en
tu pagina web empresarial:

- Descripción de la actividad
del negocio en tu sitio
Propósito / Tipo de sitio
web empresaria
Metas y objetivos
- Testimonios de clientes
Público objetivo
Estrategia de contenido - Página de contacto
- Política de privacidad
- Descripción detallada de
productos o servicios
- Blog
- Calendario de eventos
2. Planeación – Mapas del sitio
2.1 Planeación – Maquetación – Wireframes

Siempre es importante escoger una

témplate cuya organización se ajuste a
cualquier tipo de dispositivo.
Como: Tablet, PC, laptop, Smartphone Un wireframe o prototipo no es más
esto es que sea reponsive. que un boceto donde se representa
Ejemplo: http://www.starbucks.es/ visualmente, de una forma muy sencilla
https://www.samsung.com/es/smartphon y esquemática la estructura de una
es/galaxy-note/ página web.
3. Diseño Vs Programación
Diseño ?
Apariencia Diseño Programación

Logo Programación ?
Diseño grafico
Funciones Características

Navegación Detrás de cámaras

Bases de datos
Registros en el sistema

Comercio
Colores electrónico
Chats
3.1. Las 6 estrellas del diseño
Hacer contenido tan conciso como sea
posible.

Partir grandes contenidos de artículos EXPERIENCIA

con subtítulos.
DEL USUARIO
Navegación sencilla de recorrer. UX
Iconos y señalización.

Mapa del sitio a la vista.

Apoyarse de contenido interactivo.

En los procesos transaccionales,

aislar las distracciones.
4. Desarrollo
JavaScript C# Ruby PHP Objective C

Dificultad ⋆⋆ ⋆⋆⋆ ⋆⋆ ⋆⋆ ⋆⋆⋆

Interfaces más Framework .NET Popular por el Veloz en desarrollo Solo para productos
amigables Similar a Java (pero framework Ruby on Soportado por toda Apple
Se conecta con HTML de Microsoft) rails plataforma web Será reemplazado
Características CSS Ideal para por Swift
emprendimientos

Paypal, Front End de Aplicaciones Hulu, Groupon, Wordpress, Apps de iOS y Mac
Ejemplos mayoría de sitios corporativas en Slideshare Wikipedia, Flickr
Windows

Python Java C C++

Dificultad ⋆ ⋆⋆⋆ ⋆⋆⋆ ⋆⋆⋆⋆

- Para - Multiplataforma - Lengua franca de - Desarrollo industrial y juegos
“principiantes” - Gran comunidad desarrollo - Más complejo y completo que C
Características - Campo académico de desarrolladores - Más antiguos y
y científico usados
Youtube, Instagram, Gmail, Minecraft, Sistemas operativos Navegadores, sistemas operativos y
Spotify Apps de Android, y hardware hardware
Ejemplos Aplicaciones corp.
5. Pruebas y Montaje
Compatibilidad entre dispositivos y
navegadores.
Herramientas de medición y mercadeo.
Tiempo de respuesta del sitio.
Vulnerabilidad a ataques

•Registro de dominio.
(.com, .com.co, .edu.co, Montaje
org.co, .net, .Tv, .gov, .info,
.biz, .ws, .mil, .coop, •Montaje de
.museum, .travel etc….) contenido definitivo.
Contenido
•Publicación en servidores. •Revisión de
•Salida al aire. ortografía y estilo.
•Microetiquetado para
SEO.
DISEÑO INTERFACES
Una parte fundamental en todo software es
la interfaz de usuario, quien es la encargada
de interactuar el software con el usuario
Antes de iniciar el proceso de diseño de la interfaz de usuario, es
bueno hacernos las siguientes preguntas:

• ¿Cómo debe interactuar el usuario con el sistema informático?

• ¿Cómo debe presentar la información del sistema informático al
usuario?

Una muy buena interfaz de usuario debe integrar los dos elementos
relacionados en las preguntas, la interacción del usuario y la
presentación de la información.
TIPOS INTERFAZ DE USUARIO
3. El proceso de diseño de la interfaz de
usuario
 3.2. Prototipo de la interfaz de usuario
• Se elaboran formatos de pantalla donde se incluyan menús, ubicación de íconos, texto
descriptivo, nombres de ventanas.
• se recomienda realizar prototipos evolutivos o exploratorios con la implicación de los
usuarios finales
• El propósito de realizar prototipos es permitir a los usuarios adquirir una experiencia
directa con la interfaz
• Iniciar con prototipos en papel, maquetas de los diseños de las pantallas y mostrarlos a
los usuarios finales.
• • Después se perfecciona el diseño y se desarrollan los prototipos automatizados
y se ponen a disposición de los usuarios para realizar pruebas y simulación de actividades.
3.3. Evaluación de la interfaz
• Se realizan pruebas y validaciones de las interfaces previas a la
liberación.
• La evaluación de la interfaz es el proceso de evaluar la forma en que
se utiliza una interfaz y verificar que cumple los requerimientos del
usuario. La evaluación se debe llevar a cabo contra una especificación
de la usabilidad basada en atributos de la usabilidad.
• Cabe resaltar que el usuario debe estar involucrado en el proceso de
diseño para facilitar que acepte el producto final.
Existen algunas técnicas sencillas para la evaluación de interfaces que pueden
identificar deficiencias específicas en el diseño tales como:

• Cuestionarios que recopilan información de lo que opinan los usuarios de la

interfaz.
• La observación de los usuarios cuando trabajan con el sistema y piensan en voz
alta, de como tratan de utilizar el sistema para llevar a cabo alguna tarea.
• Instantáneas de vídeos del uso típico del sistema.
• La inclusión de código en el software que recopila información de los recursos
más utilizados y de los errores más comunes.
4. Herramientas software para el diseño de
interfaces
• Adobe Dreamweaver
• http://www.balsamiq.com
• https://balsamiq.com/download/
• https://gomockingbird.com/
5. Ejemplos diseño interfaces casos de uso
• Caso de uso: autenticar usuario.
• Sistema: gestión odontológica.
LABORATORIO
OBJETIVO GENERAL:
Diseñar interfaces de usuario utilizando las herramientas Balsamiq Mockups
y Gomockingbird.

OBJETIVOS ESPECÍFICOS:
• Identificar los pasos a seguir para la construcción del
diseño de la interfaz de usuario.
• Hacer el diseño en la herramienta Balsamiq Mockups o
Gomockingbird.
• Identificar los datos de entrada y salida que se utilizan en
el diseño de la interfaz.
• Aplicar las estructuras de programación de acuerdo con la
situación presentada.
• diseñar la interfaz de usuario para la captura de los datos de un
libro que debe ser registrado en la biblioteca.