Compendio 3interfaces

Unidad 4.
Evaluación centrada en el usuario
Este compendio recoge textualmente documentos e información de varias fuentes

debidamente citadas, como referencias elaboradas por el autor para conectar los diferentes
temas. Se lo utilizará únicamente con fines educativos.
Página | 2
TABLA DE CONTENIDO
TEMA 1 :Técnicas de evaluación heurística y test de usuario 4
1.1 Análisis Heurísticos 5
1.2 Test con usuarios 8
TEMA 2 :Técnicas de evaluación de ley de Fitts, Cards Sorting e ISO 11
2.1 Ley de Fitts 12
2.2 Card Sorting 14
2.3 Norma ISO respecto a la usabilidad 15
TEMA 3 :Resultados del diseño posterior a la evaluación 20
3.1 Definir los entregables según el perfil 21
3.2 Preparación lo entregables 22
PREGUNTAS DE COMPRENSIÓN 23
MATERIAL COMPLEMENTARIO 24
REFERENCIAS 24
Página | 3
TEMA 1 :Técnicas de evaluación heurística y
test de usuario
Subtema 1: Análisis Heurísticos
Subtema 2: Test con usuarios
Objetivo
Participa activamente en equipo de trabajo, analizando y diseñando interfaces gráficas para

aplicaciones mutimediales interactivas
Introducción
Un método de evaluación de la usabilidad de interfaces es el análisis heurístico por

medio del enfoque a través de un experto, basado principalmente en las normas de la
disciplina de la interacción persona-ordenador (Giménez, 2017)..
La evaluación consiste en una secuencia de comprobaciones que aseguran la

usabilidad y el cumplimiento de los objetivos empresariales del software, obteniendo
conclusiones y sugerencias para el desarrollo, lo que debería implementarse (Giménez,
2017).
Página | 4
DESARROLLO DE LOS SUBTEMAS
1.1 Análisis Heurísticos
En un análisis heurístico es una metodología que comprueba si existe usabilidad en

una interface, es realizada por un experto, se basa especialmente en las leyes y principios de la
interacción persona-equipo, este análisis reside en una sucesión de pruebas que aseguran el
cumplimiento de los objetivos trazados y la usabilidad, además se obtienen sugerencias de que
mejorar en el producto digital (Giménez, 2017).
Los criterios que se la mayoría de veces son evaluados es a nivel de información e
identificación, las expresiones e idioma, la forma de escritura, el rotulado o etiquetado, la
estructura de la información, la navegación, el formato, los patrones utilizados, la búsqueda, la
multimedia, la asistencia, la accesibilidad, el feedback y la manipulación, todos estos criterios
son analizados desde nuestro contexto (Giménez, 2017).
Ventajas y desventajas del análisis heurístico.

Entre las muchas ventajas que nos da aplicar esta metodología del análisis heurístico en los
productos digitales podemos enlistar las siguientes:
● La rapidez y la efectividad de un análisis heurístico nos permite no perder tiempo y
recursos económicos;
● En este análisis no se requiere de la participación de los usuarios;
● Es ideal para conocer los problemas de usabilidad y sugerir mejoras al producto digital
(Giménez, 2017).
Entre las desventajas que podríamos mencionar al usar esta metodología heurística en los
productos digitales, tenemos las siguientes:
● En ocasiones se detectan errores falsos que al final no son problemas de usabilidad,
por esta razón Nielsen Norman Group sugiere realizar la evaluación con más de 3
expertos sin exceder a 5 esta cantidad;
● Pueden llegar a ser muy costosos por la cantidad de expertos que se requieren para la
evaluación;
● No se identifica de forma fácil y en ocasiones clara los problemas de usabilidad
(Giménez, 2017).
Página | 5
Principios heurísticos de Jakob Nielsen
Los principios heurísticos contemplados por Jakob Nielsen son seguramente los más usados
para evaluar la usabilidad de la UI de un producto digital.
Figura 1
Principios del análisis heurístico de Jakob Nielsen.
Nota: Fuente:(Prado, 2020a), Análisis heurístico de la interfaz, Obtenido de:

http://www.uxables.com/investigacion-ux/analisis-heuristicos-mas-alla-de-jakob-nielsen/
Una descripción breve de cada uno de los principios del análisis heurístico que se va evaluar en
un producto digital son los siguientes:
1. Visibilidad del estado del sistema, el producto digital debe mostrar al usuario en todo
momento lo que está ocurriendo y en qué lugar del sitio o aplicación se encuentra,
además las respuestas tienen que ser en el menor tiempo que sea posible;
2. Relación entre el dispositivo y el global real, el idioma debe ser el mismo que el del
usuario, evitando lenguajes técnicos o utilizar frases, términos o estándares
coloquiales;
3. Manipulación y libertad del usuario, es fundamental que el usuario pueda deshacer
las tareas realizadas porque la web o el aplicativo corre el riesgo de cometer errores;
4. Coherencia y requisitos, es conveniente mantener el mismo estilo y patrones en el
diseño del producto digital para evitar una confusión por parte de los usuarios;
Página | 6
5. Fomentar la prevención de errores, los errores presentados deben ser tratados de
forma anticipada, por esta razón deben ser detectados con la finalidad de ser
solucionados por el mismo producto digital, evitando enviar mensajes de alarma que a
veces el usuario no sabe qué hacer;
6. Reconocer con preferencia a tener en cuenta, suele ser mejor ir aprendiendo lo que
va realizando el usuario;
7. Flexibilidad y rendimiento de uso, debemos considerar en el diseño del producto
digital todo tipo y estilo de usuarios, considerando desde el más experimentado hasta
el máximo principiante, la edad o algún problema de habilidades especiales;
8. Diseño minimalista, Proporcionar al usuario información relevante y diseño exacto es
decir sin desperdicios, esto evita que se distraigan;
9. Dar a los clientes una ayuda para entender, aclarar o diagnosticar los errores
presentados, al emitir un mensaje de algún error no debe ser confusos deben tener la
finalidad de que el usuario entienda cual es el problema;
10. Ayuda y documentación, debe ser clara, comprensible y fácilmente disponible para el
usuario, hoy en día no solo se usa documentación de ayuda escrita sino también en
video (Prado, 2020a).
1.2 Test con usuarios
Se podría definir como una prueba o evaluación basado principalmente en el análisis y

la observación; la forma de realizar esta metodología es por medio de un conjunto de usuarios
reales dentro de un laboratorio que evaluaran un producto digital, ellos indicaran los
problemas de usabilidad y que experiencia tuvieron con la finalidad que posteriormente
permita resolver problemas y mejorar la experiencia de los usuarios, si se ejecuta
efectivamente será complemento perfecto del Análisis Heurístico (Prado, 2020b).
¿Cuándo realizar un test con usuarios?
Es recomendable llevar a cabo este tipo de prueba al término de la etapa del diseño,
por ejemplo, a los prototipos y preferentemente después de un análisis heurístico, ya que nos
Página | 7
ayuda a identificar los problemas o errores, su aplicación es en cualquier tipo de diseño de
productos digitales sin importar si son nuevos o mejorados (Prado, 2020b).
Cómo llevar a cabo un test con usuarios
Debemos comenzar teniendo adecuada una lugar específico para esta evaluación, siendo de
importancia la presencia del dueño o responsable del producto en todo tiempo que dure las
pruebas (Prado, 2020b), la preparación para ejecutar un test de usuario se considera los
siguientes pasos:
1. Seleccionar a los miembros. - Para la prueba debería seleccionar al menos 5 personas,

con esta cantidad se recoge más del 75% de información, se debe considerar el
arquetipo de individuo definido previamente - prototipo personaje -, los participantes
e no deben estar relacionados con la empresa;
2. El laboratorio e implementos. – Debe ser un lugar donde no exista interrupciones,
libre de ruidos y de alguna distracción, también es importante implementos para
anotar como puede ser una libreta física o digital y un bolígrafo esto nos permitirá
anotar todo lo que el usuario realiza al ejecutar las actividades; es importante anotar
su tonalidad de voz, sus expresiones o reacciones del rostro, es ventajoso utilizar un
software que nos permita recoger datos sobre la navegación del usuario sobre el
producto digital que está siendo evaluado;
3. Planificar la prueba. - Es necesario definir dentro de una lista de actividades o pauta
del test las tareas que debe completar el usuario, para esto debemos describir los
escenarios de uso y redactar las narraciones para contextualizar lo que se enmarcan
las tareas a realizar; no debemos olvidar que no se está evaluando al usuario sino el
diseño del producto digital por esta razón el evaluador de ninguna manera ayudará a
los usuarios en la relación de las actividades;
4. Realización del informe. - Al haber terminado la toma de las pruebas con todos los
usuarios citados, es preciso realizar un informe en el cual esté registro una resumen
que descubra los problemas de usabilidad y sus propuestas de solución, así también
calificar su nivel de experiencia al usar el producto digital; dentro del documento
podemos anotar lo siguiente: tareas realizadas, problemas de usabilidad que
ocurrieron en el momento de ejecutar las tareas y como respondieron a ellas, tareas
Página | 8
no ejecutadas y el motivo; y el las conclusiones de las tareas programas (Prado,
2020b).
Debemos considerar el argumento de Nielsen (2000) en que se debe realizar los tests de
usuarios o de usabilidad con 5 personas, con esa cantidad de usuarios se puede obtener una
identificación de alrededor del 85% de los problemas de usabilidad o del uso del producto
digital; sin embargo, hasta el día de hoy existe un amplio debate en relación a la veracidad y
precisión de lo argumentado por Nielsen (Exss, 2016).
Figura 2
Argumento de Nielsen
Página | 9
TEMA 2 :Técnicas de evaluación de ley de
Fitts, Cards Sorting e ISO
Subtema 1: Ley de Fitts
Subtema 2: Card Sorting
Subtema 3: Norma ISO respecto a la Usabilidad
Objetivo

Introducción
Otras de las técnicas de la evaluación de UI desde los prototipos diseñados hasta la

puesta en producción trata actualmente con la experiencia del usuario (UX), por esta razón
se debe conocer la Ley de Fitts, esta norma aplicada a la maquetación de Internet está
relacionada con el movimiento del usuario a través de los factores que componen la interfaz;
así también podemos aplicar el método de Card Sorting que se basa en el análisis de la
estructura de la información en que los usuarios intuyen, asocian y jerarquizan un número
predeterminado de tarjetas etiquetadas con las categorías temáticas específicas del
producto digital que se está diseñando (Bravo, 2020).
El mundo de las ISO también saco su norma para evaluar la usabilidad, la norma a
aplicar es norma ISO 9241-11.
2.1 Ley de Fitts
La experiencia del usuario (UX) se fundamenta en hacer que el uso y la interacción

entre el usuario y el producto digital diseñado sea una experiencia agradable, la teoría más
usada por los expertos de UX es la Ley de Fitts, el psicólogo Paul Fitts la creó en 1954, es
aplicada a la maquetación de Internet, está relacionada con los movimientos que realiza el
usuario a través de los elementos que forman parte de la interfaz, en resume es el lapso de
tiempo que demora una persona en llegar a un componente mediante un rápido movimiento,
esto dependerá también de las dimensiones y de la distancia que tenga el y entre
componentes (Bravo, 2020). Debemos considerar las siguientes relaciones y tamaños:
● La relación entre tamaño y posición, los componentes como los botones o las
acciones sobre ellos como al hacer un clic, deben estar situados lo más cerca posible
del cursor, y deben ser de un tamaño estándar considerable ese componente, por
ejemplo, en una forma el botón de "Guardar" debe estar justo después de la última
opción o campo a rellenar, y debe ser más grande que los otros campos y un color que
llame a la acción;
● ¿Anchos o altos de los componentes?, depende de la dirección en que el usuario
requiera hacer clic, por ejemplo, en la imagen siguiente el movimiento del usuario es
de forma horizontal (Bravo, 2020).
Figura 3
Ejemplo 1
Nota: Fuente:(Bravo, 2020), Ejemplo de navegación horizontal, Obtenido de: https://t-position.com/ux-

la-ley-de-fitts/
Página | 11
En este siguiente ejemplo la navegación estará de forma vertical por esta razón el
ancho del botón será más amplio.
Figura 4
Ejemplo 2
Nota: Fuente:(Bravo, 2020), Ejemplo de navegación vertical, Obtenido de: https://t-position.com/ux-la-

ley-de-fitts/
Menús desplegables, no debieran ser demasiados grandes, esto es debido a que no

deben ocupar toda la pantalla del usuario, se sugiere que debe estar en lo posible el menú
desplegable más cerca de la categoría de inicio, un ejemplo del formato del menú vertical
podría ser el mostrado a continuación (Bravo, 2020):
Figura 5
Ejemplo 3
Nota: Fuente:(Bravo, 2020), Ejemplo de menú desplegables, Obtenido de: https://t-position.com/ux-la-

ley-de-fitts/
Página | 12
Un menú horizontal puede ser una causa de falta de espacio y dificultaría al usuario en
ocasiones la navegación.
Figura 6
Ejemplo 4
Nota: Fuente:(Bravo, 2020), Ejemplo de navegación horizontal, Obtenido de: https://t-position.com/ux-

la-ley-de-fitts/
La ley de Fitt, tiene una formulación matemática la cual indica que cada vez que
aumenta de tamaño un componente, su interacción gradualmente mejora, sin embargo
siempre en un nivel inferior; esto nos indica que no necesariamente se debe seguir esta ley
todo lo que ella indica, ya que podría dificultar en ocasiones la navegación del usuario (Bravo,
2020). Un ejemplo de la fórmula es la siguiente:
A es la trayecto de la actividad, W es el tamaño del componente e ID, el resultando,

esto es el índice de dificultad, cuanto mayor sea el trayecto y menor sea el tamaño del
componente, requiere de más tiempo (Brantes, 2018).
Figura 7
Ejemplo clásico de la ley de Fitts
Página | 13
2.2 Card Sorting
Se fundamenta en el análisis en que los usuarios intuyen, asocian y jerarquizan una

cantidad de tarjetas escritas con las categorías o temáticas específicas del producto digital, con
esta metodología es posible clasificar las categorías de un menú o secciones del producto
digital en armonía con su visión (Hassan Montero & Martín Fernández, 2014).
Card Sorting es utilizado en el diseño de la experiencia del usuario para evaluar una
relación jerárquica de categorías con sus subcategorías o secciones, es decir, se vuelve una
prueba sencilla de lo realizado o analizado previamente de la información diseñadas en los
prototipos o en el producto final (Fernández, 2014).
Figura 8
Ejemplo de Card Sorting realizado con OptimalSort
Nota: Fuente:(Fernández, 2014),Card sorting realizado con OptimalSort, Obtenido de:

https://www.saraclip.com/que-es-el-card-sorting/
Este método permite alinear las expectativas de los usuarios con el equipo de UX
encargado de la arquitectura de la información, creando así una correcta categorización y
jerarquía de los menús o secciones.
La forma más sencilla para realizar esta evaluación es registrar en unos pos-its o
tarjetas con la descripción o nombres que tenemos en nuestra mente para estructurar la
información es decir, los nombres de los menús o secciones y pedir a los usuarios que los
organice y jerarquice considerando la relación de cada elemento (Fernández, 2014).
Página | 14
2.3 Norma ISO respecto a la usabilidad
El termino usabilidad viene del anglosajón - usability -, indica que algo se puede
utilizar; la Organización Internacional de Estándares por sus siglas en inglés – ISO – elaboró la
norma ISO 9241-11 con la finalidad de evaluar la usabilidad que tiene el alcance de un
producto digital, su utilización es para usuarios especifico y que sean expertos en evaluar la
usabilidad con la finalidad de alcanzar objetivos específicos con efectividad en el uso del
producto (Martínez, 2003)
Criterios de usabilidad
Para considerar usable a un producto digital se debe considerar criterios como el
poder ser utilizado en forma adecuada, eficiente y satisfactoria por todos tipos de usuarios
incluidos personas de diferentes edades, culturas o con habilidades especiales o diferentes
(Martínez, 2003).
La experiencia de usuario desde el punto de vista de la norma ISO 13407 se caracteriza
por involucrar a los usuarios claves, determinar los requerimientos principales, distribuir las
funciones entre el usuario y la tecnología además de interacciones adecuadas.
La usabilidad es parte del diseño con enfoque en experiencia de usuario, por esta
razón la usabilidad se considera en todas las fases del proceso de diseño del producto digital,
desde la ideación hasta el desarrollo, incluso una vez puesto en producción el producto para
evaluar que se ha cubierto todos los requerimientos claves hechos por los usuarios (Martínez,
2003).
Principios generales de usabilidad

Los principios de usabilidad de un producto digital que podemos destacar están los
siguientes:
● Debe anticipar las acciones del usuario;
● Debe tener colores que no dificulten a personas con problemas visuales;
● Deben ser equilibrados entre las expectativas y el aprendizaje previo que tengan los
usuarios;
● Deben estar centrados en la productividad del usuario, no en el propio producto;
Página | 15
● Debe permitir que el usuario pueda deshacer las acciones ejecutada de forma errónea,
o el sistema podrá solucionar el error o proponer alguna solución, y no sólo comunicar
del error;
● Debe considerarse que los elementos estén a menor distancia y mayor tamaño para
que sean alcanzados por los usuarios;
● Debe reducirse el tiempo de espera y comunicar al usuario del tiempo que resta para
finalizar la tarea;
● Debe requerir el usuario un proceso mínimo de aprendizaje;
● Uso de metáforas;
● Proteger al usuario de perdidas lo realizado por resultado de un error;
● Legibilidad en el texto, imágenes, colores entre otros elementos multimedia;
● Debe poder conocer y almacenar información referente al comportamiento del
usuario;
● Se deben evitar elementos ocultos para la navegación;
● No se debe hacer sufrir de sobrecarga de información al usuario (Martínez, 2003).
Métodos de prueba y evaluación de usabilidad para sitios web

Existen algunos métodos de prueba y evaluación de usabilidad para productos
digitales entro los que podemos mencionar:
● Observación de campo, se lo realiza en el análisis de los requisititos, actividades y en la
última fase del proyecto e inclusive durante la puesta en producción;
● Test entre 5 a 6 usuarios, se lo aplica especialmente en la fase de análisis de tareas y
determinación de requerimientos las que son puestas en los prototipos;
● Análisis heurísticos, aplicable al diseño y en la etapa anterior a la producción, esta
evaluación solo se lo realiza con expertos (Martínez, 2003).
Beneficios de la evaluación de usabilidad

Los beneficios al realizar una evaluación de la usabilidad durante el diseño no solo son
económicos también es de tiempo, esto proporciona mayor utilidad a los diseñadores o
desarrolladores y a los usuarios o dueño del proyecto, podemos considerar beneficios tales
como los siguientes:
Página | 16
● Desde los usuarios el beneficio estaría en experimenta un ahorro en el tiempo que se
llevan en aprender a manejar, ejecutar las tareas dentro del producto digital, esto hace
que tengan una excelente experiencia de usuario y a su vez conseguir los objetivos
trazados;
● Desde el dueño del producto digital los beneficios estarían enmarcados en disminuir el
tiempo y costos en poner en producción el producto, en un incremento de la tasa de
conversión si es un producto digital en la web, disminución de costos en atención al
cliente, ventaja competitiva, fortalecer la fidelidad de los usuarios y la imagen de la
marca (Martínez, 2003).
Página | 17
TEMA 3 :Resultados del diseño posterior a la
evaluación
Subtema 1: Definir los entregables según el perfil
Subtema 2: Preparación los entregables
Objetivo

Introducción
La última etapa del diseño de UI es de la entrega formal del diseño del producto digital,
claro está se lo realiza posterior a la evaluación con las técnicas pertinentes, para la entrega
debemos tomar en cuenta que se cumpla con todos los objetivos trazados, requerimientos y que los
resultados de evaluaciones hayan sido satisfactorios o que se realizó las correcciones sugeridas
(Félix, 2012).
3.1 Definir los entregables según el perfil
Según la Guía del PMBOK, cuarta edición, lo define como “Cualquier producto,
resultado o capacidad del proveedor, único y verificable, que necesita ser producido para
completar un procedimiento, fase o proyecto” (Project Management Institute, 2017). Entre los
diferentes tipos de entregables pueden ser los siguientes: Un sistema revisado,
especificaciones, prototipos, diseños de interfaces, manuales de usuarios, diccionario de datos,
entre otros (Félix, 2012).
La Estructura de Desglose de trabajo - EDT usada en la metodología PMP o en SCRUM
es una lista que se basa en entregables, en el proyecto se puede anexar también los
entregables de tipo producto, proveedor y resultado final, así por ejemplo, una empresa
proveedora de internet quiere implementar una mesa de servicios, la EDT debe contener entre
otros entregables los siguientes:
● Documento de requerimientos;
● Prototipos;
● Pruebas y evaluación del diseño de los prototipos;
● Intereses;
● Aplicación (código);
● Manual de usuario y video;
● Estructura de los datos;
● Pruebas y evaluación luego de la implementación (Félix, 2012).
3.2 Preparación lo entregables
Al inicio del proyecto de diseño de un producto digital se debe planificar y desglosar el

trabajo a realizar y analizar que entregables va resultar de cada actividad, entre las principales
actividades podríamos indicar las siguientes:
● Identificar y cuantificar los objetivos de negocio;
● Definir el alcance del diseño;
● Definir las funciones y responsabilidades del equipo de diseño y desarrollo;
Página | 19
● Preparar el entorno del diseño y desarrollo del proyecto;
● Diseñar el prototipo;
● Probar y evaluar el prototipo
● Desarrollar la aplicación;
● Poner en producción
● Probar y evaluar la aplicación
● Diseñar y entregar documentación (SAP Activate - Actividades y Entregables de la Fase
de Preparación - blog.zanzivar.com, s/f).
PREGUNTAS DE COMPRENSIÓN
1. ¿Cuáles son los métodos de evaluación de usabilidad y cuáles son las de

aceptación de usuarios?
2. Describa el método de evaluación por medio del método de Análisis
Heurísticos
3. Describa el método de evaluación por medio del método de Test con usuarios
4. ¿Qué es la Ley de Fitts y describala?
5. Describa el método de evaluación por medio del método de Card Sorting
6. Describa los puntos importantes de la Norma ISO 9241-11 respecto a la
Usabilidad
Página | 20
MATERIAL COMPLEMENTARIO
● Test de Usabilidad vs Prueba de Aceptación de Usuario (UAT),
https://www.youtube.com/watch?v=f3HEjDZz1bc
● El "Card Sorting" en el Diseño UX con Diego Guajardo,
https://www.youtube.com/watch?v=elewUJQzFgs
● Ley de Fitts, https://www.youtube.com/watch?v=M-9FbUJk6tI
● Sintaxis de programación https://www.w3schools.com
REFERENCIAS
Brantes, A. (2018). Hablemos de… Usabilidad y Factores Humanos I: Ley de Fitts | by Alexis Brantes
 ???????? | Posmo CX Consulting & Research | Medium. https://medium.com/posmo-cx-
consulting-research/hablemos-de-usabilidad-y-factores-humanos-i-ley-de-fitts-80bcd7d93a73
Bravo, M. (2020). UX: La Ley de Fitts. https://t-position.com/ux-la-ley-de-fitts/
Exss, K. (2016). ¿Cuántos usuarios necesito para un test de usabilidad? - Blog IDA Chile | Estrategia para
el éxito de tu negocio. https://blog.ida.cl/experiencia-de-usuario/usuarios-necesarios-test-
usabilidad/
Félix, V. (2012). Gerencia de Proyectos: Entregables.
https://proyectics.blogspot.com/2012/07/entregables.html
Fernández, Y. H. M. y F. J. M. (2014). ¿Qué es el card sorting? - Diseño centrado en el usuario | Saraclip.
https://www.saraclip.com/que-es-el-card-sorting/
Giménez, M. (2017). Análisis Heurístico para UX: evalua la usabilidad de tu web - Blog de Hiberus
Tecnología. https://www.hiberus.com/crecemos-contigo/analisis-heuristico-para-ux-evalua-la-
usabilidad-de-tu-web/
Martínez, G. M. (2003). USABILIDAD Y ACCESIBILIDAD EN WEB. http://www.semac.org.mx/archivos/6-
11.pdf
Prado, J. A. Del. (2020a). Análisis heurísticos. Más allá de Jakob Nielsen - UXABLES | Blog.
http://www.uxables.com/investigacion-ux/analisis-heuristicos-mas-alla-de-jakob-nielsen/
Prado, J. A. Del. (2020b). Qué es un Test con usuarios y sus pasos claves - UXABLES | Blog.
http://www.uxables.com/investigacion-ux/que-es-un-test-con-usuarios-y-sus-pasos-claves/
SAP Activate - Actividades y Entregables de la Fase de Preparación - blog.zanzivar.com. (s/f). Recuperado
el 20 de agosto de 2021, de http://blog.zanzivar.com/2018/05/19/sap-activate-actividades-y-
entregables-de-la-fase-de-preparacion/
Página | 21
Interfaces y Multimedia Página | 1
Unidad 3. Aplicaciones multimedia


TABLA DE CONTENIDO
TEMA 1: Diseño de productos digitales 4
1.1 El rol del diseñador en un sitio web o App 5
1.2 Principios y sistematización del diseño gráfico aplicados en productos digitales 7
1.3 Patrones de diseño 10
REFERENCIAS 12

TEMA 1: Diseño de productos digitales
Subtema 1: El rol del diseñador en un sitio web o App
Subtema 2: Principios y sistematización del diseño gráfico aplicados a productos digitales
Subtema 3: Patrones de diseño
Objetivo
Identifica el ámbito de producción de aplicaciones multimediales interactivas,

diseñando aplicaciones eficaces orientadas a perfiles de usuario.
Introducción
El diseñador de interfaces de productos digitales es un profesional con

condiciones técnicas y creativas que conoce ampliamente la metodología de experiencia
de usuario. Logra equilibrar lo que requiere la organización contra lo que desea como
experiencia el usuario al usar el producto digital diseñado.
El conocimiento de este tipo de profesional va desde el diseño gráfico, edición de

elementos multimedia, lenguaje de programación, tecnología web.

1.1 El rol del diseñador en un sitio web o App
El diseñador de interfaces de productos digitales es el profesional que cumple con la

experiencia esencial para crear sitios web con las funciones y necesidades vitales para
representar y proteger a una empresa, organización o interés en Internet. Pero, además, su
reputación de diseñadores le permite ofrecer el conjunto de las páginas de una cosa
personalizada y diferencial del sitio web, algo muy importante. (Arcones, n.d.).
¿Qué proporciona un diseñador web?
● Tienen una gran cantidad de experiencia técnica y creativa.
● Usan equipos de diseño y prototipos, marcos, administradores de contenido, editores o

diseños visuales, y todos los estilos de módulos y componentes. Además de usar con
gran experticia lenguajes de programación, que consisten en HTML, CSS, JavaScript o
PHP, entre otros.
● Están conectados a evaluar, buscar y eliminar contenido innecesario o redundante.
● Se conecta con el dueño y los usuarios del producto digital. Lo hace de acuerdo con lo
que transmiten, asesorar sobre las opciones agradables y otorgar un sello de identidad
al producto.
● Los diseñadores web, mientras tanto, deben tener una lucidez estética muy buena y uso
de herramientas de edición de multimedia como video, sonido, imagen, entre otros.
Además de tener en cuenta las tendencias modernas de los días en el diseño y podrá
hacer propuestas útiles y atractivas que despierten el pasatiempo de los usuarios.
(Arcones, n.d.)

Otras funciones del diseñador web.
● El diseñador de interfaces de productos digitales también puede reproducir la

característica del webmaster, o incluso las tareas y actualizaciones de mantenimiento.
● Pueden realizan sus diseños a niveles exclusivos de mejora, y deben dominar las artes
de SEO.
● Ir un paso más allá, podría ser capaz de trabajar en la subcontratación del material de
contenido de la red (Arcones, n.d.).

1.2 Principios y sistematización del diseño gráfico
aplicados en productos digitales
Ya no tenemos que perder de vista el motivo del diseño, el intercambio verbal. Para
obtener una transmisión correcta del mensaje, debemos practicar ciertos principios que hacen
que el conjunto de factores de nuestro diseño de interface (Kendall, 2018).
Lo más importante es la consistencia, estandarizar estilos gráficos, los títulos, subtítulos,

los elementos y el tamaño deben ser lo siguiente. luego de eso se debe tener una relación con
cada elemento es decir no se puede tener un subtítulo si no se tiene un título o texto. o los
elementos secundarios debe ser acompañante de un elemento principal como de un subtítulo
a eso se quiere decir norma de relación.
Los componentes de un diseño es un elemento que se pueda utilizar en múltiples

ocasiones y en múltiples pantallas de un producto digital pero que conserva el mismo estilo,
aunque el contenido cambia (Atomic design) Analogía del mundo de diseño de Interfaces
digitales con el mundo real.
Imagen 1. Representación gráfica de la construcción sistemática de una

interfaz - Atomic design
Nota: metodología creada por Brad Frost - https://bradfrost.com/
Átomos: Son elementos que no se pueden desglosar o separar en otros sin dejar de ser
funcionales. Pero hay que aclarar que cada átomo tiene una funcionalidad básica. Un ejemplo
de esto sería un Botón. (Frost, n.d.)

Moléculas: Resulta de varios átomos unidos para componer una unidad funcional. Si lo
llevamos al sistema de diseño son grupos relativamente sencillos de elementos UI. Por ejemplo
un buscador básico, compuesto por una etiqueta o un ícono más un botón (Frost, n.d.).
Organismos: En esta etapa podemos hablar de componentes UI relativamente

complejos. Estos organismos estarían formados de Moléculas y/o Átomos u otro organismo, los
que formarían distintas secciones de una interfaz. Un ejemplo de organismo podría ser el Header
de un sitio, el que se compone de logo, íconos, botones y buscadores (Frost, n.d.).
Templates: En esta etapa es donde nos comenzamos a fijar más en la estructura de la

página, que es donde vamos a situar todo los componentes dentro de un layout. Esto es muy
útil y nos ayudará, por ejemplo, a contrastar tamaños de imágenes, verificar que las longitudes
de los textos y títulos sea la correcta, revisar el tamaño de las cajas, entre otros (Frost, n.d.).
Página: Esta es la etapa más específica del Template, donde podemos ver el diseño y
contenido final. Aquí es donde se puede visualizar como será la UI del producto digital que
comenzamos a crear al inicio con el átomo. Es la etapa más concreta, donde los usuarios
interactúan con el diseño final del producto (Frost, n.d.).
Para entender la base del Atomic Design tenemos que tener muy claro estas cinco
etapas, de esta manera creamos librerías con pequeños componentes que serán reutilizables y
combinables, obteniendo un sistema de diseño rápido, uniforme, escalable y empático.
Debemos siempre recordar como diseñadores UX/UI, que nuestros primeros usuarios
que interactúan con nuestro producto digital son los desarrolladores de nuestros equipos.

Gráfico 2. Ejemplo del uso del método Atomic design
Nota: diseño adaptado de Atomic design
Gráfico 3. Ejemplo de Sistematización con metodología Adobe.
Nota: https://spectrum.adobe.com/

1.3 Patrones de diseño
¿Qué es un patrón de diseño?

Los patrones de diseño no son respuestas inusuales a los problemas que surgen a
menudo en el diseño del programa de software. Son como planos prefabricados que pueden
personalizarse para resolver una molestia de diseño ordinaria en su código (Zhart, 2014a).
No puede seleccionar un patrón y duplicarlo en este sistema como si hubiera sido

características o bibliotecas ya preparadas. El patrón no es una parte particular de código, sin
embargo, una idea de moda para aclarar una molestia seleccionada. Puede seguir la información
del patrón y poner en vigor una solución que encaje con las realidades de su propia aplicación
(Zhart, 2014a).
A menudo, los estilos se presionan con algoritmos porque cada idea describe las
respuestas normales a los problemas conocidos. Si bien un conjunto de reglas define
continuamente un grupo de acciones claras para obtener un propósito, una muestra es una
mejor descripción de la etapa de una respuesta. El código de la misma muestra aplicada a 2
aplicaciones únicas puede ser distintivo (Zhart, 2014a).
Una analogía de un conjunto de reglas puede ser una receta de cocción: cada una tiene
pasos limpios para alcanzar un objetivo. Por su parte, una muestra es más como un avión,
teniendo en cuenta que puede examinar cuál es su resultado final y sus características, pero el
orden preciso de la implementación se basa en usted (Zhart, 2014a).
¿En qué consiste el patrón?
La mayoría de los estilos se describen con un montón de formalidad para que las
personas puedan reproducirlas en muchos contextos. Aquí tiene las secciones que normalmente
pueden estar presentes en la descripción de una muestra:
● El motivo del patrón en breve explica el problema y la respuesta.

● La motivación explica con más detalle la molestia y la solución que proporciona la
muestra.

● La estructura de las clases muestra cada uno de los elementos de muestra y la manera
en que pueden estar asociados.
● La instancia de código en uno de los famosos lenguajes de programación ayuda a la
asimilación del concepto que está ocultado detrás de la muestra (Zhart, 2014a).
Clasificación de los patrones.
Los patrones máximos fundamentales y de menor grado se conocen normalmente como

idiomas. Generalmente siguen a un lenguaje de programación (Zhart, 2014b).
Los patrones más normales y más altos son los estilos de arquitectura. Los
desarrolladores pueden implementar esos estilos casi en cualquier idioma. A diferencia de otros
estilos, se pueden usar para diseñar la estructura de una utilidad completa (Zhart, 2014b).
Además, todos los patrones pueden ser categorizados por su motivo:
● Los patrones creacionales proporcionan mecanismos de creación de objetos que

incrementan la flexibilidad y la reutilización de código existente.
● Los patrones estructurales explican cómo ensamblar objetos y clases en estructuras
más grandes a la vez que se mantiene la flexibilidad y eficiencia de la estructura.
● Los patrones de comportamiento se encargan de una comunicación efectiva y la
asignación de responsabilidades entre objetos (Zhart, 2014b).

1. ¿Describa el rol de los diseñadores de interfaces de productos digitales?
2. ¿Qué son los componentes de un diseño de interfaz?
3. ¿Describa la metodología de Atomic Design de Brad Frost?
4. ¿Qué son los patrones de diseño?
5. ¿Describa algunos patrones de diseño?
 ¿Qué es Adobe XD? - Primeros Pasos en Experience Design,
https://www.youtube.com/watch?v=il3KnscoeOE
 User Interface Design patterns, http://ui-patterns.com/
 Meet Spectrum, Adobe’s design system, https://spectrum.adobe.com/
 Los mejores patrones de diseño web para comunicar tu mensaje con éxito,
https://es.wix.com/blog/2020/05/los-mejores-patrones-de-diseno-web/
 Atomic design, https://bradfrost.com/
REFERENCIAS
Arcones, J. (n.d.). ¿Qué es un diseñador web y cuáles son sus funciones? - ingeniovirtual.com. Retrieved
July 28, 2021, from https://www.ingeniovirtual.com/que-es-un-disenador-web/
Kendall, A. (2018). Principios del Diseño Gráfico aplicados al Diseño Web - DonWordPress.
https://www.donwordpress.com/blog/diseno/principios-del-diseno-grafico-aplicados-al-diseno-web
Zhart, D. (2014a). ¿Por qué debería aprender sobre patrones? https://refactoring.guru/es/design-
patterns/what-is-pattern
Zhart, D. (2014b). Clasificación de los patrones. https://refactoring.guru/es/design-patterns/classification
Brad Frost. (n.d). Atomic design. https://bradfrost.com/

Unidad 3. Aplicaciones multimedia


TABLA DE CONTENIDO
TEMA 2 Elementos multimediales de texto e imagen 4
2.1 Consideraciones en el uso del texto usado para la web y aplicaciones 5
2.2 Tipos de imagen usados para la web y aplicaciones 10
2.3 Herramientas para la edición de imagen 16
2.4 Edición de imagen 18
TEMA 3 Elementos multimediales de video 1
3.1 Tipos de videos usados para la web y aplicaciones 2
3.2 Herramientas para la edición de video 4
3.3 Edición de video 5
TEMA 4 Elementos multimediales de audio y animaciones 1
4.1 Tipos de audio usados para la web y aplicaciones 2
4.2 Herramientas para la edición de audio 4
4.3 Edición del audio 5
4.4 Consideraciones del uso de animaciones para la web y aplicaciones 9
REFERENCIAS 11

TEMA 2 Elementos multimediales de texto e
imagen
Subtema 1: Consideraciones en el uso del texto usado para la web y aplicaciones
Subtema 2: Tipos de audio usados para la web y aplicaciones
Subtema 3: Herramientas para la edición de imagen
Subtema 4: Edición de imagen
Objetivo
Identifica el ámbito de producción de aplicaciones de multimedia interactivas,

Introducción
Al desarrollar productos digitales eficientes se debe considerar integrar el

uso de elementos de multimedia como son el tipo de texto más conveniente
utilizar y las imágenes. Para su uso se debe realizar un tratamiento a cada
elemento en lo que respecta a la edición considerando los parámetros, tipos y
formatos de cada elemento multimedia.

2.1 Consideraciones en el uso del texto usado para la web y
aplicaciones
La paleta de colores y las tipografías de una aplicación son factores que deben
seleccionarse y estructurarse cuidadosamente. Estos son factores que facilitan la usabilidad y
legibilidad de la aplicación y si se utilizan adecuadamente, favorecen el crecimiento de las
descargas, la tecnología de comentarios maravillosos y el engagement, entre otros efectos de
alta calidad. Para ello, debemos tener en cuenta algunas ideas de imagen como forma de hacer
que la navegación a través de la app sea adecuada para el consumidor.(Pickaso, 2017)
Tipografía soporte digital
Para facilitar el estudio en medios virtuales, a diferencia de los medios corporales y

revelados, se recomienda aplicar fuentes "Sans-Serif" y elegir otras que consisten en Open Sans,
Roboto, San Francisco, incluso Helvetica para modernillos. Por otro lado, ahora es muy
importante no usar más de dos fuentes de diferente estilo para diferenciar títulos, subtítulos del
contenido textual.(Pickaso, 2017)
Imagen 1: Ejemplo de tipografía soporte digital
Fuente: (Pickaso, 2017). Tipografía Soporte Digital. Obtenido de: https://pickaso.com/2017/consejos-color-

tipografia-apps

Si apuesta por el uso de una sola fuente, es muy recomendable no exceder de tres
(Ligero, Regular, Negrita, o en otras frases Fina, Normal y Negrita). Por el contrario, en caso de
que use fuentes distintivas, hay menos espacio para usarlas.
En el caso de tener una app con mucho texto es importante asegurarnos que estén todos
los caracteres (ó, ò, á, à, etc), ya que en algunas tipografías que se ofrece gratuitamente en la
web, no se han creado aún alguno de estos caracteres con lo cual acabaríamos descartando esa
tipografía.(Pickaso, 2017)
Qué fuentes elegir para las aplicaciones
El uso de las fuentes predeterminadas del dispositivo en ejecución tiene sus ventajas
(sin valor de licencia ni peso de la aplicación), pero no siempre es la solución ideal para cada
persona. Ciertas necesidades relacionadas con la marca, la identidad visible y el tipo de
contenido requieren diferentes alternativas. Los factores que deben tenerse en cuenta al elegir
una fuente para una pantalla ahora no difieren mucho de los que podrían elegirse para el diseño
impreso. Es necesario evaluar lo siguiente:(Ciro, 2018)
 en cuántos pesos está disponible un carácter;

 el pico de la "x" (el pico del caso de disminución);
 evaluación (la distinción de grosor entre trazos gruesos y delgados en una letra)
 la forma de las letras (capacidad para distinguir sin dificultad las letras que incluyen la
"e" y la "c" o la "l" minúscula y la "I" mayúscula);
 el ancho de las letras.
Cuanto mejor sea la minúscula, mejor será la legibilidad, en particular en tamaños

reducidos. No hace falta decir que, en una pantalla pequeña, junto con la de un teléfono
inteligente, esta característica es vital, porque es muy importante que las letras tengan un
contraste impresionante.(Ciro, 2018)
Al explorar algunas de las aplicaciones más populares y descargadas, tanto en Play Store
como en App Store, puede ver con qué frecuencia la fuente utilizada es la predeterminada. En
el caso de programas con numerosos millones de descargas, se debe considerar adicionalmente

el impacto que puede tener la tarifa de licencia por el uso de una fuente. En estándar, para una
utilidad, los precios son mucho mejores que para la impresión o la red. En esos casos, como regla
estándar, si desea evitar la fuente predeterminada y no desea aplicar fuentes gratuitas, debe
tener su fuente personal. Recientemente, cada Netflix y Airbnb han abandonado las fuentes
utilizadas durante años (Gotham para Netflix, Circular para Airbnb) y han cambiado a fuentes
patentadas.(Ciro, 2018)
Imagen 2: Ejemplo de fuente Netflix Sans
Fuente:(Ciro, 2018). Netflix Sans. Obtenido de: https://www.pixartprinting.es/blog/elegir-fuente-aplicacion/
Imagen 3: Ejemplos de uso de la fuente Cereal de Airbnb
Fuente:(Ciro, 2018). Cereal de Airbnb. Obtenido de: https://www.pixartprinting.es/blog/elegir-fuente-aplicacion/

Paleta de color
Normalmente proponemos la mayoría de los tres colores primarios y normalmente

mantenemos el equilibrio de color. Este equilibrio se puede realizar a través de contrastes,
coloraciones análogas o extraordinarias tonalidades solares de igual coloración. Los contrastes
(haciendo uso de colores opuestos en la rueda de colores) suelen ser beneficiosos para resaltar
algunos elementos de la aplicación, aunque deben usarse con moderación para no saturar la
pantalla. Las coloraciones análogas son aquellas que mantienen un equilibrio cromático lineal,
de idéntica saturación, aunque variando el tono.(Pickaso, 2017)
El uso de distintos tonos (niveles de luminosidad o saturación) del mismo color es muy
recomendable para aquellas aplicaciones que pueden dejar muy claro que ese color es suyo y
nada más. La "escala de grises" de ese color puede ser un buen deseo, incluso suponiendo que
se necesite algún rastro de tono alternativo, puede optar por una coloración opuesta al tono
primario utilizado.(Pickaso, 2017)
Imagen 4: Paleta de colores
Fuente:(Pickaso, 2017). Paleta de Colores. Obtenido de: https://pickaso.com/2017/consejos-color-

tipografia-apps
Otra forma de encontrar una paleta de colores adecuada para tu aplicación es echar un
vistazo a los colores que nos da la naturaleza. En ellos descubrimos una concordia general con
matices que básicamente se integran a la perfección, así que mientras no descubras el

pensamiento, busca instantáneas de paisajes, atardeceres, mañanas dentro de la montaña, y
descubre los colores que se entrelazan en los paisajes.(Pickaso, 2017)
Imagen 5: Ejemplo de paleta de colores
Fuente:(Pickaso, 2017). Paleta de Colores. Obtenido de: https://pickaso.com/2017/consejos-color-tipografia-apps
Proporciones del esquema de color: 60-30-10
Para organizar y decidir la cantidad de sombra en una aplicación, estas 3 proporciones

pueden ser de gran ayuda: 60-30-10. Este es un bien conocido que los diseñadores de interiores
y los diseñadores de interiores utilizan regularmente para elegir, dar forma y dar porcentaje a
los colores elegidos. En esta situación, podemos usarlo para diseñar el "interior" de nuestra
aplicación.
Imagen 6: Ejemplo esquema de color:60-30-10
Fuente:(Pickaso, 2017). Ejemplo Esquema de Color:60-30-10. Obtenido de: https://pickaso.com/2017/consejos-

color-tipografia-apps

 El 60% es la participación del tono dominante, en nuestro caso llegaría a ser la coloración
histórica, en muchos casos, blanco o gris suave.
 30% de proporción de la sombra secundaria, la más replanteada en la aplicación
 10% el "color de acento", para ofrecer un toque de coloración variado y complementario
/ contrario a los demás, normalmente utilizado para botones de confirmación o para
destacar un elemento.(Pickaso, 2017)
2.2 Tipos de imagen usados para la web y aplicaciones
Formatos de imagen para mapas de bits
Las imágenes de trama se utilizan con más frecuencia que las fotografías vectoriales, a
pesar de sus desventajas en relación con el escalado, debido a que pueden generarse
rápidamente y son adecuadas para casi cualquier tipo de situación. Así es como los elementos
fotográficos de las páginas web se pueden guardar en formatos de píxeles que consisten en
formato JPG o PNG de la misma manera que las fotos más complicadas.(Guiones, 2020)
La electricidad de la representación de píxeles, pero, reside en la presentación de

imágenes, que desempeñan una función destacada en el diseño de redes actual. Es lo que le
permite probar imágenes y digitalizarlas como mapas de bits o, además, editarlas. Además de
los formatos de fotografía ya mencionados, existen otros formatos libres y patentados, a pesar
de que solo algunos pueden usarse de manera preferida.(Guiones, 2020)
Diseño JPG
El diseño de compresión JPG modifica la forma estándar de las instantáneas de píxeles

para que cada ocho x 8 píxeles se agrupen en un bloque que se recalcula como fijo en cada paso.
De esta manera, como ejemplo, hay una conversión del espacio de sombra RGB al esquema de
sombra YCbCr y el conocido como filtro de paso bajo, en el que se filtran las mejores frecuencias
para reducir la escala de los archivos. (Guiones, 2020)
Dependiendo del título de compresión seleccionado, la forma está vinculada a una

pérdida de primer nivel, debido a que no se pueden mantener todas las estadísticas dentro de
la imagen. Según las estadísticas de W3Techs, las tres cuartas partes de las páginas web utilizan

el diseño JPG, que se atribuye al rendimiento del tamaño del informe relacionado con la
compresión.(Guiones, 2020)
Formato PNG
Otro de los formatos más populares en Internet es PNG (Portable Network Graphics),
un formato de imagen general reconocido por medio del World Wide Web Consortium (W3C)
que se lanzó por primera vez en Internet en 1996. Como alternativa a GIF (Graphic Interchange
Formato) en la actualidad y sin desafío a ninguna patente, el diseño PNG destaca por la
oportunidad de comprimir instantáneas sin pérdida y ofrecer una profundidad de color de hasta
24 bits de acuerdo con el píxel (16.7 millones de coloraciones) con un 32- canal alfa de bits. A
diferencia de GIF, el diseño PNG no puede generar animaciones.(Guiones, 2020)
PNG admite tanto la transparencia como la semitransparencia (camino al canal alfa

incluido), que se puede realizar para todo tipo de imágenes, y debido al entrelazado, que
permite una composición ampliada de documentos con imágenes en alguna etapa del
procedimiento de adición. Los mecanismos de corrección de color o brillo aseguran que los
documentos con imágenes en formato PNG se vean más o menos iguales en sistemas únicos. Se
pueden usar herramientas que incluyen pngcrush para comprimir una foto en formato PNG.
Debido a la forma de compresión sin pérdida, los archivos son bastante más grandes, por lo que
el diseño no es tan adecuado para mostrar imágenes como, por ejemplo, JPG. El diseño PNG
también ofrece la posibilidad de reducir el área de color (de 1 a 32 bits en línea con el
píxel).(Guiones, 2020)
Diseño GIF
El portal en línea CompuServe creó el formato de intercambio de gráficos, GIF, en 1987

como una oportunidad de color para el diseño de X BitMap (XBM) en blanco y negro. A diferencia
de las diferentes soluciones del momento, junto con PCX o MacPaint, los archivos GIF requerían
menos área de almacenamiento debido a la compresión LZW verde (compresión de datos con
el algoritmo Lempel-Ziv-Welch), es por eso que el diseño disfrutó de un reconocimiento
extraordinario en los primeros días de La Internet. JPG y PNG han tomado la delantera como
formatos de fotografía y fotografía, aunque debido al modelo GIF89a (1989), el diseño puede
institucionalizar un par de fotografías en un archivo aislados, convirtiéndolo en el formato
preferido para desarrollar pequeñas animaciones.(Guiones, 2020)

Todos los datos de color GIF se encuentran en una tabla, la paleta de colores. Esta tabla
contiene hasta 256 colores (8 bits), por lo que este formato de fotografía no siempre es
adecuado para ver fotografías. Cada uno de los registros también se puede definir como
transparente, aunque, a diferencia del formato PNG actual adicional, la semitransparencia no es
posible.(Guiones, 2020)
Formato TIFF
TIFF (Tagged Image File Format) es un formato de imagen que se utiliza para la
transmisión de datos impresos y de fotografías de resolución excesiva. Se transformó en
avanzado en 1986 por Microsoft en colaboración con Aldus, que hoy en día pertenece a Adobe,
y se ha optimizado para combinar la separación de tonos y los perfiles de color (perfiles ICC) de
las fotos escaneadas. TIFF también es compatible con la versión de tono CMYK y permite una
profundidad de coloración de hasta dieciséis bits para cada canal de color (la intensidad total es
de 48 bits). Desde 1992, el diseño sin pérdidas se puede comprimir con la ayuda del algoritmo
LZW mencionado anteriormente, que también se utiliza en GIF.(Guiones, 2020)
Gracias a sus características, TIFF se ha instalado como una moda no inusual para
fotografías en las que lo satisfactorio juega un papel más importante que la longitud del informe.
Es por ello que es utilizado por editoriales y medios impresos, además de dentro del archivo de
imágenes monocromas, como podría ser el caso de los dibujos técnicos. Para el almacenamiento
y presentación de información geográfica basada principalmente en cuadrículas (mapas, vistas
aéreas, etc.), se ha conectado el diseño Geo TIFF, que se suministra con etiquetas
adicionales.(Guiones, 2020)
Diseño PSD
Adobe ofrece, entre otros, el diseño patentado PSD (Documento de Photoshop) para
almacenar iniciativas gráficas avanzadas con Photoshop. Esto se destaca por la realidad de
asegurar los hechos relacionados con las capas, canales o vectores, lo que permite su siguiente
mejora. De esta forma podrá editar las capas que se han agregado, duplicado, ocultado, movido
o eliminado, además de cada uno de los elementos. Ambas capas y los datos fotográficos
correspondientes pueden almacenarse en un informe PSD de solteros sin pérdida. Este diseño
de fotos es especialmente útil para imágenes enormemente reconocibles, junto con marcas

comerciales o pancartas, que deben adaptarse rápidamente y según sea necesario a cada
plataforma y longitud de pantalla de visualización.(Guiones, 2020)
Las imágenes en formato PSD se pueden abrir mejor con Adobe Photoshop sin ninguna
limitación, por lo que el intercambio entre paquetes de Windows y macOS funciona
perfectamente. De esta manera, este diseño de imagen se puede conocer, en cierto modo, como
un formato que funciona en cualquier dispositivo. PSD funciona principalmente como formato
de almacenamiento en alguna etapa del método de modificación. (Guiones, 2020)
Para realizar la edición en Internet, el registro correspondiente debe transformarse al

formato PNG o JPG antes de subirlo al servidor, por lo que el almacenamiento sin pérdidas de
las estadísticas de las fotografías y de todas las etapas permite modificarlas de manera eficiente,
pero también se combina con una gran cantidad de registros. Para convertir una foto PSD, es
mucho más eficaz tener un dispositivo de Internet como Zamzar.(Guiones, 2020)
Formato BMP
BMP (mapa de bits de Windows) fue avanzado para los sistemas en ejecución de
Microsoft e IBM y se lanzó en 1990 con Windows 3.0 como el diseño de garaje para mapas de
bits con una intensidad de color de hasta 24 bits de acuerdo con el píxel. El diseño de la foto sin
comprimir asigna a cada píxel un costo de color, por lo que los documentos suelen ser muy
masivos, por lo que el formato no es apropiado para su uso en páginas de Internet.(Guiones,
2020)
Formatos de imágenes vectoriales
Las fotos vectoriales son especialmente apropiadas para la utilidad en las páginas de
Internet, debido al hecho de que ya no requieren un área de garaje completa como mapas de
bits. Los formatos para esto no describen los porcentajes de color que tiene un píxel en cada
fotografía, sin embargo, como alternativa los elementos que componen la imagen. Esto incluye
superficies esféricas y torcidas, texto, líneas inmediatas y dobladas, y muchas otras, y su función,
dimensiones, coloraciones y diferentes rasgos. (Guiones, 2020)
Combinado con el aspecto antes mencionado de escalado sin pérdidas, el crecimiento

de elementos de red receptivos y sin barreras se convierte en un juego de niños pequeños.
Además, en archivos con formatos vectoriales, los ajustes se pueden realizar en cualquier

momento, aunque el nivel de complejidad aumenta notablemente con la dificultad progresiva
de los documentos con imágenes. Otra ventaja sobre los mapas de bits es la capacidad de
generar animaciones JavaScript.(Guiones, 2020)
Diseño EPS
En colaboración con los productores de programas de software Aldus y Altsys, Adobe

desarrolló y publicó el formato de fotografía vectorial EPS (Encapsulated PostScript) en 1987. El
llamado de este formato está asociado con la realidad de que los archivos se guardan dentro del
lenguaje de descripción de página PostScript, lo que hace Es viable editar páginas complicadas
en impresoras láser y en dispositivos publicitarios. Para estos fines, PostScript describe los
elementos de la página web impresa como líneas, círculos, imágenes y muchos otros, y
proporciona información sobre su posición. (Guiones, 2020)
EPS también amplía estos registros sobre las fotos con registros únicos en la longitud de
salida, lo que se conoce como contenedor delimitador. Opcionalmente, los documentos EPS
incluyen una vista previa de resolución reducida que podría funcionar como marcador de
posición. El formato de imagen de Adobe describe cada uno de los objetos independientemente
de los dispositivos de salida posteriores, lo que permite el intercambio entre medios de salida
únicos.(Guiones, 2020)
EPS se utilizó específicamente en medios impresos, pero se reemplazó a través del

sucesor PDF (Portable Document Format), que es más adecuado para enviar correos
electrónicos debido a los tamaños de archivo más pequeños. Para proyectos en red, tanto el EPS
histórico como el PDF de última generación son igualmente apropiados, que se utiliza
adicionalmente para el comercio o la presentación de documentos de texto.(Guiones, 2020)
Formato SVG
Si bien muchos formatos de imágenes vectoriales diferentes, junto con el diseño Al

(ilustraciones de Adobe Illustrator), no son apropiados para el entorno de Internet, el diseño
SVG (Scalable Vector Graphics), respaldado con la ayuda de W3C, confirma los beneficios
alucinantes de la fotografía vectorial. archivos. La especificación para el esquema vectorial
bidimensional, que se basa totalmente en el lenguaje XML, se convierte en una oportunidad
crítica para los gráficos rasterizados estándar debido a que muchos navegadores ayudan a
HTML5, particularmente en el caso de las páginas web móviles y receptivas. En este sentido, los

archivos SVG ofrecen, además de una escalabilidad sin pérdidas y, con frecuencia, un alcance de
datos muy bajo, esas ventajas que poseen son:(Guiones, 2020)
 Todos los atributos de presentación, que consisten en colores, fuentes, etc., pueden
manipularse con CSS.
 Los scripts pueden acceder al contenido a través de la interfaz DOM (Document Object
Model).
 Las máquinas pueden leer gráficos SVG.
 El código correspondiente se puede marcar y adaptar como un registro separado o
directamente en el registro HTML.
 Se pueden animar en enfoques excepcionales (SMIL, JavaScript, CSS).
El formato SVG es una elección extraordinaria, especialmente para gráficos que

comprenden símbolos (por ejemplo, marcas comerciales) o que deben reaccionar a solicitudes
de personas (diagramas dinámicos) en la página web. Este formato de imagen vectorial también
es ideal para imágenes técnicas. La estadística de W3Techs mencionada anteriormente muestra
que SVG no siempre se utiliza en la mayoría de los proyectos web, a diferencia de los gráficos
rasterizadas. Para obtener registros especiales sobre cómo funciona la integración de fotografías
vectoriales SVG, consulte nuestra guía.(Guiones, 2020)
Imagen 8: Tabla de formatos populares de la Web
Fuente:(Guiones, 2020). Tabla de Formatos Populares de la Web. Obtenido de:

https://www.ionos.es/digitalguide/paginas-web/diseno-web/cuales-son-los-formatos-de-imagen-mas-importantes/

2.3 Herramientas para la edición de imagen
Existen muchas herramientas de edición de imagen, continuación se nombrarán las más famosas
y usadas:
Paquetes de retoque fotográfico profesional
Adobe Photoshop
Photoshop es, verdaderamente, el programa de retoque de imágenes estrella. Se utiliza

para modificar fotografías escaneadas, que consisten en fotografías. También se utiliza para
crear y editar fotos e imágenes. Son muchas las alternativas que este dispositivo te permite
editar, entre ellas están el color, la luz o el patrimonio entre muchas otras.
Sistema operativo: forma Windows y Mac OS.(Inacio, 2021)
Características:
 Ayuda a muchos tipos de documentos fotográficos, junto con JPG, PNG, GIF y muchos
más.
 Conjunto multicapa, en el que podrás regular, transformar y deformar fotos.
 Permite un gran tratamiento de las imágenes, incluido el control y el retoque de la
sombra.
 Tiene numerosos engranajes de autocorrección adelantados.
 Tiene un grupo de filtros de desenfoque que le permite agregar numerosos resultados
de desenfoque.
 Detección de tono de piel.(Inacio, 2021)

PhotoScape
Photoscape es uno de los mejores editores de fotos gratuitos para principiantes. Es un

dispositivo sencillo y fluido que le permite corregir y mejorar rápidamente sus imágenes.
Dispositivo operativo: Windows y Mac OS.
Características:
 Tiene un editor de fotos, en el que puede ajustar las dimensiones, accesorios de
iluminación precisos, agregar contenido textual, etc.
 Un editor de efectos, para incluir marcos o plantillas en sus imágenes.
 Editor de ajustes, para intercambiar el tono de la fotografía.
 Conversor de formato RAW a otros como JPEG.
 Creador de animaciones GIF, también es un capturador de pantalla, etc.(Inacio, 2021)
Paint.Net
Paint.net es un programa de software de edición de imágenes eficaz y simple. Tiene una

interfaz de usuario intuitiva y moderna, con asistencia para capas, gráficos por computadora y
una forma extensa de equipo de modificación de imágenes beneficioso y efectivo.(Inacio, 2021)

Dispositivo operativo: Windows.
Características
 Permite operar con más de una capa, filtros y efectos especiales.
 Tiene un equipo de dibujo muy fácil de usar.
 Tiene una ayuda para la compra de fotografías de cámaras o escáneres.
2.4 Edición de imagen
Pasos para la edición de imagen:
1. Abrir imágenes
Al momento de nuestra edición de imágenes, tenemos que tener en cuenta las imágenes
ya seleccionadas. Para cumplir con nuestra respectiva edición.
2. Recortar
Esta opción nos permite quitar imperfecciones de nuestra imagen, y poder ensamblar en
nuestra edición como queremos.
3. Capas
Las capas se utilizan para realizar una expansión de obligaciones, incluida la composición
de varias imágenes, incluido el contenido textual de una imagen, o la adición de formas de fotos
vectoriales. La aplicación de un estilo de capa facilita la presentación de gráficos de computadora
como sombras paralelas o algún tipo de brillo. Cada nueva fotografía tiene una capa más efectiva.
4. Máscaras de capa
Puede agregar una máscara a una capa y usarla para ocultar ciertos componentes de la
capa y mostrar las capas debajo. La introducción de la máscara de capa es muy beneficiosa para
combinar un par de fotos directamente en una sola foto o para alejar a una persona u objeto de
una imagen.

5. Pincel corrector
El dispositivo pincel corrector te permite corregir imperfecciones para que desaparezcan

de la fotografía. Al igual que el equipo de clonación, el dispositivo Pincel corrector se utiliza para
pintar con píxeles muestreados de una imagen o inquietud.
6. Selecciones
Esta herramienta ayuda hacer manipulaciones de las imágenes.
7. Rellenar según contenido

Sirve para eliminar de una foto algún objeto que no queramos con solo un clic.
8. Objetos inteligentes
Los objetos inteligentes son capas que contienen registros fotográficos de imágenes
rasterizadas o vectoriales, como archivos de Photoshop o Ilustrador.
9. Filtros inteligentes
Los filtros inteligentes, aplicados a los objetos inteligentes, le ayudan a utilizar filtros no
destructivos. Los filtros inteligentes se almacenan como efectos de capa dentro del panel Capas y
se pueden reajustar en cualquier momento desde los registros de fotos originales que incorporan
el objeto inteligente.
10. Guardar
Sirve para guardar nuestro proyecto donde hemos editado nuestra imagen.

TEMA 3 Elementos multimediales de video
Subtema 1: Tipos de videos usados para la web y aplicaciones
Subtema 2: Herramientas para la edición de video
Subtema 3: Edición de video
Objetivo
Identifica el ámbito de producción de aplicaciones de multimedia interactivas,

Introducción
Al desarrollar productos digitales eficientes se debe considerar integrar el uso de

elementos de multimedia como es el video. Para su uso se debe realizar un tratamiento a
cada elemento en lo que respecta a la edición considerando los parámetros, tipos y
formatos de cada elemento multimedia.
3.1 Tipos de videos usados para la web y aplicaciones
Códecs de video
Un códec es el orden utilizado para distribuir los registros en un informe de audio o
video de tal manera que se pueda usar para reproducir, editar o cambiar a otros códecs
(transcodificación). Los códecs se utilizan para preparar hechos en los medios, sin embargo, las
estadísticas se mantienen dentro de un campo. Hay muchas formas extraordinarias de códecs
de audio y video, y cada una tiene sus propias ventajas.
Se utiliza un códec para comprimir y luego descomprimir un documento de video. Esta

compresión puede tener pérdidas o no tener pérdidas.(Gonzalez, 2020)
La extensión de archivo de un video generalmente se refiere a la caja. Algunos

contenedores tienen códecs que usan casi continuamente y otros contenedores se usan a
menudo con muchos códecs diferentes.
Los códecs con pérdida crea documentos más pequeños, pero omite parte de la
información, lo que da como resultado una mejor reproducción de vídeo de menor tamaño. Esto
es especialmente evidente con las compresiones repetidas que conducen a una pérdida
acumulativa de grandes cantidades de datos.
Los códecs sin pérdida, alternativamente, continúa con todos los registros del registro
auténtico. Esto hace que el video sea más agradable y evita la degradación moderna de múltiples
guardados. Sin embargo, llega a tener archivos más grandes.
Tipos de formato de video
MP4
Esta forma de maquetación de video es uno de los formatos más utilizados en la
actualidad, en particular en el tema de compartir contenido en línea. En realidad, YouTube
recomienda cargar documentos en formato. Mp4 para obtener un excelente video excepcional.

Además de las estadísticas de video y audio, también se puede usar para guardar cosas
como subtítulos y, sin embargo, instantáneas. Por lo general, se mezcla con H.264 o H.265.
Los videos en los que se usa el contenedor .MP4 pueden tener un tamaño de informe
tremendamente pequeño y, al mismo tiempo, conservar una precisión excesiva.
Avi: Uno de los tipos de diseño de video populares más antiguos y típicos
universalmente es .AVI. Puede utilizar un gran estilo de códecs, lo que da como resultado una
gran variedad de configuraciones de informes. Si bien los videos .AVI se pueden realizar en una
amplia variedad de jugadores, los tamaños de los documentos tienden a ser grandes, lo que los
hace menos perfectos para la transmisión o descarga. Es una alternativa increíble para las
películas que planeas mantener en una computadora.
MKV: El formato de vídeo experto MKV es un formato abierto, para el que no

tienes que pagar cuotas, y cuyo nombre completo es Matroska, como las tradicionales muñecas
rusas. Surgió a finales de 2002 y se ha hecho famoso gracias a que en un solo informe MKV
podemos guardar, junto con el canal de audio, numerosos canales o pistas de audio y numerosas
pistas de subtítulos.
Al igual que MP4, presenta excelente video y audio de alta calidad en un área pequeña.
Y como curiosidad, el formato WebM que te permite integrar video online vía HTML, está
inspirado en Matroska.
FLV Entre los tipos de formato de video que existen, FLV se convirtió en creado
para el participante de Adobe Flash, los videos .FLV fueron extremadamente comunes durante
varios años hasta su tamaño de documento muy pequeño y una amplia variedad de
complementos de navegador y reproductor.

MOV: Entre los tipos de diseño de video para Apple, está muy bien. Apple avanzó
el contenedor .MOV para su uso con su participante QuickTime. Los videos que usan .MOV
suelen ser los mejores, pero también tienen un tamaño de documento bastante grande. Las
películas de QuickTime no se adaptan tan bien a los jugadores que no son de QuickTime, aunque
hay jugadores de fiestas de tercer cumpleaños con el propósito de estudiarlas.
Este formato es útil en caso de que desee archivar un video espléndido en una
computadora Apple.(Gonzalez, 2020)
OGG
Este formato fue desarrollado, entre otras cosas, para inyectar algo de flexibilidad en la
estructura del mercado. Se convirtió en uno de los primeros formatos compatibles con los
populares entornos Linux (Gonzalez, 2020)
3.2 Herramientas para la edición de video
Existen muchas herramientas de edición de video en las cuales se proyectan algunos editores
conocidos:
Adobe Premiere Pro

Es un software de edición de video experto. Tiene una interfaz personalizable, en la
que puede organizar los paneles o espacios de trabajo de una manera que le resulte cómoda
para los diferentes grados del sistema de mejora: montaje, edición, color, efectos, audio y
títulos. Además, tiene una biblioteca de resultados.(Chaves, 2020)
Canva
Puede crear espléndidas películas en línea sin tener estudios de producción. Puede ser
muy sencillo e intuitivo, tiene un dispositivo de arrastrar y soltar y un montón de plantillas
prediseñadas, que le permiten crear atractivas películas breves en minutos.(Chaves, 2020)

Camtasia
Camtasia es una grabadora de pantalla y un editor de video. Es una herramienta
razonablemente simple y beneficiosa si no tiene conocimientos de producción de envío.
Tiene plantillas personalizadas, que simplifican la llegada de videos, una biblioteca de pistas y
resultados de sonido, puede incluir títulos, resultados, transiciones y cuestionarios. Además,
alguna otra de sus funcionalidades predominantes es la grabación de la pantalla de visualización.
Wodershare Filmora
Este dispositivo de cierre se define como un editor de video para todos los creadores.
Ofrece a sus usuarios multitud de funcionalidades para adquirir efectos realmente
emocionantes.
Posee una interfaz similar a la de iMovie y entre sus funciones encontramos ajustes de
recorte, sombra, brillo y evaluación de clips y otras más superiores que incluyen reproducción
de video opuesto, transiciones entre clips o grabación de pantalla de visualización. También
tiene otros extras básicos como edición de audio, corte o separación de pistas, fade-inside y
outside, y voces en off grabadas.(Chaves, 2020).
3.3 Edición de video
Importar Contenido
Al transferir contenido tenga en cuenta lo siguiente:
Transferir todas las fuentes relacionadas con los documentos del proyecto.
Mantenga los documentos del desafío y sus fuentes relacionadas en la computadora de destino en
carpetas que tengan nombres y estructuras idénticas a las de la computadora de origen.

Trabajar con Videos Pesados (Proxy)
Cuando pasamos por ralentizaciones mientras mejoramos un video, o inmediatamente,

nuestra PC falla incluso mientras realizamos la mejora, es casi seguro que la causa es que nuestro
grupo está intentando lidiar con un archivo que es demasiado pesado. Debido a obstáculos en ram,
cpu, gpu, etc., no es capaz de pasarlo fácilmente.
Cuando usamos proxys para la mejora de video, estamos ejecutando con archivos de menos peso,
por lo tanto, nuestro disfrute mejorado será mucho más fluido que si editáramos sin demora el
registro original.
Cortar
Tratar de ser los más minucioso posible, para cortar el video el tiempo exacto. Y que el
video salga con la exactitud precisa con la que deseamos.
Grabar desde Webcam y Grabar pantalla del PC
Hay que tener en cuenta los dispositivos de grabación que se utilizaran para la posterior
edición del video y poder lograr un acabado perfecto. Tener en perfecto estado óptimo nuestras
cámaras. Y que posean una buena proyección.
Títulos
Tener un título que llame la atención del espectador, ya que el marco de un buen título
atrae visualizaciones a nuestro contenido.
Subtítulos y créditos
Importante señalar las participaciones o personas que estuvieron en el desarrollo de

nuestro video, y dar los créditos a la culminación del video.
Transiciones
Una buena transición se regula con el tiempo donde vamos a poner las partes del video,
que estamos editando, ya que esta debe posee un tiempo lógico y exacto en cada parte que se une
los fragmentos de los videos. Y darle la historia que deseamos proyectar.
Efectos

Algo muy llamativo a la hora de la edición de los videos, es darles los efectos exactos y
medidos a nuestros videos. Para que estos logren el objetivo de atraer al espectador.
Elementos
Los elementos deben ser seleccionador desde el principio para que exista una
organización eficaz a la hora de crear nuestro video.
Transformar Clips
Importante a la hora de editar videos, es asegurarnos de que posean el mismo formato a

la hora de concatenarlos, y que posean un buen formato a la hora de su descarga.
Pantalla Verde
Su uso es muy optimo a la hora de la creación de los videos ya que poseen las
características llamativas que atraen al espectador. Siempre y cuando selecciones pantallas verdes
que vayan acorde al video de nuestra edición.
Corrector de Distorsión de Lente
Esta base de la edición de video es fundamental, ayuda a corregir esos errores e

imperfecciones, que no son óptimos a la hora de la edición del video.
Ajustes de Velocidad
Aquí se requiere una medida de proyección de lo que queremos trasmitir y en el tiempo

que le queremos dar. Pero es de fundamental importancia dar un ajuste equilibrado a la velocidad
de nuestro video.
LUTS y Corrección de Color
Es un documento que lleva una cadena de valores pre calculados, que se aplica a ciertos
colores de la imagen, matemáticamente podría ser similar a una característica, en la que algunos
valores de cierto color aplicamos algunos cambios predefinidos mediante la tabla de aparición.
Otras Herramientas
Es importante proyectarse el uso de varias herramientas para poder conocer mejor

nuestro editor de videos.
Exportar Proyecto

Esta opción nos permite llevar el archivo a la carpeta que elijamos. Ya sea en nuestro
ordenador, o en carpetas vía online.

TEMA 4 Elementos multimediales de audio y
animaciones
Subtema 1: Tipos de audio usados para la web y aplicaciones
Subtema 2: Herramientas para la edición de audio
Subtema 3: Edición del audio
Subtema 4: Consideraciones del uso de animaciones para la web y aplicaciones
Objetivo
Integra elementos multimediales como video en el diseño de los productos digitales.
Introducción
Los archivos de audio tienen diferentes formatos y tamaños. Comúnmente estamos
más familiarizados con tipos MP3 o WMA pero en realidad existen muchos otros
formatos. Estos formatos
¿Por qué existen tantos estándares de audio?

¿Existe un mejor formato de audio?
¿Cuáles son importantes y cuáles puedes ignorar?
En este post te damos respuesta a todas estas preguntas y explicamos los principales
tipos de formato de audio
El diseño de bits de los datos de audio se denomina formato de codificación de audio

y se puede descomprimir o comprimir para reducir el tamaño del archivo; por lo tanto, los
formatos de archivo de audio se pueden dividir en compresión con pérdida y compresión sin
pérdida. Pero lo que usamos a menudo es la compresión con pérdida. Dado que hay pérdida
de datos en el proceso de audio digital, no podemos llegar a los que realmente no tienen
pérdidas.
No todos los formatos de archivos de audio son iguales. La frecuencia de muestreo y

la profundidad de bits determinan la resolución, el rango de frecuencia y el rango dinámico
del audio. El estándar para audio con calidad de CD es una frecuencia de muestreo de 44,1
kHz y una profundidad de bits de 16 bits.
Cualquier cosa por debajo de esto y su audio no se considera alta definición (HD) o
alta resolución. Muchos formatos de archivo de audio utilizan configuraciones inferiores a las
que se consideran HD.
4.1 Tipos de audio usados para la web y aplicaciones
Formato de audio
Los códecs de audio digital son básicamente contenedores. Y las diferencias entre ellos
están fundamentalmente en:
 Ya sea que estén comprimidos o no.
 Si pueden estar comprimidos, dentro de la compresión de primera clase.
 El tipo de etiquetado que podrían ayudar.
Características de los archivos de audio

 La velocidad es llamada frecuencia de muestreo o sample rate, su medida es en
kilohercios.
 El ancho de banda máximo es de 20 KHz.
 La frecuencia está entre 40 y 50 KHz.
 Las opciones que se ve en el DAW (equipo o aplicación para edición de
video), promedio (44,1 kHz, 48 kHz)
Formato de audio sin comprensión
Formato WAV: uno de los tipos de formato de audio más comunes es WAV, que
son las siglas de Waveform Audio File Format. El formato de audio WAV fue desarrollado por
Microsoft e IBM en 1991.
El formato MIDI que son las siglas de Musical Instrument Digital Interface
almacena información acerca del instrumento usado y de la forma en que se ha tocado. Es
considerado el formato estándar en música electrónica.

Formatos de audios comprimidos sin perdidas
FLAC, que viene de las siglas en inglés Free Lossless Audio Codec, es un formato
de archivos de audio que puede comprimirlos hasta, aproximadamente, un 50%, sin perder
información, por lo que mantiene la calidad de audio fiel al archivo original.
ALAC, La extensión de archivo ALAC es un formato de datos asociada a Apple

Lossless Audio Codec (ALAC). Archivos ALAC fueron desarrollados por Apple. Estos archivos
utilizan el formato M4A porque ALAC es un códec utilizado para codificar los datos de audio.
Formato de audio comprimido con perdida
MP3, Es el formato de compresión más extendido y utilizado, en sus diversas

variantes. La pérdida de información que supone el formato mp3 pasa (casi) desapercibida al
oído humano.
Un archivo mp3 puede llegar a ocupar hasta 15 veces menos que su original conservando una
gran calidad.
WMA, Recientemente, Microsoft ha desarrollado una variante del formato WMA

con compresión, pero sin pérdida. Fue ideado para su reproducción con el programa Windows
Media Player. Es el competidor directo en calidad y en compresión del mp3 con la diferencia de
que añade información del autor.
Ogg Vorbis, es un formato contenedor desarrollado en código abierto, de libre

distribución y sin patente. Esta es la mayor diferencia con el resto de archivos de audio
comprimidos.
Tasa que afecta la calidad de sonido

320 kbps – audio que no se diferencia de la calidad de un CD;
192 kbps – sin pérdidas significativas para la mayoría de las personas;
128 kbps – pérdidas ligeramente perceptibles; (Estéreo)
96 kbps – calidad similar a la radio FM;
64 kbps – sin banda sonora en mono para podcast
32 kbps – similar a la radio AM;
16 kbps – similar a la radio de ondas cortas (“walkie-talkie”).
4.2 Herramientas para la edición de audio
Se presentará una herramienta muy popular:
AUDACITY
Autor:(Webedia, 2014). AUDACITY. Obtenido de: https://www.xatakawindows.com/bienvenidoawindows8/las-11-

mejores-aplicaciones-de-edicion-de-sonido-para-windows
Audacity es el editor de sonido gratuito más popular. Le permite editar documentos de

audio en todos los códecs más famosos. Con este programa podrás importar documentos de

sonido y canciones, además de agregar resultados a las pistas de audio y formar parte, como
instancia, de canciones o podcasts.
Audacity ofrece muchas capacidades de grabación y mejora de nivel experto. Le permite
realizar grabaciones en vivo, así como regular pistas de audio. A continuación, puede almacenar
los cambios en uno de los muchos formatos de audio compatibles. Además, Audacity consta de
un sinfín de equipos, que incluyen efectos, un ecualizador y un analizador de espectro.(Webedia,
2014)
4.3 Edición del audio
1. Reducción de ruido
Obtener perfil de ruido: Ayuda a limpiar el ruido de ambiente dentro de la pista de

audio. Seleccionando el fragmento de audio que se desee limpiar.
Reducción de ruido (dB): Se establecen parámetros dependiendo de la magnitud del

ruido para la reducción de este, pero no exagerar el nivel para que audacity no haga una
cancelación de ruido ambiente.
Sensibilidad: Los parámetros de sensibilidad es recomendable que tenga un ajuste

medio para solventar el ruido ambiente.

Suavizado de frecuencia (bandas): Ayuda a tener frecuencia estable en el sonido
modificado, recomendable que siempre este en niveles bajos para que no existan ninguna
cancelación de ruido ambiente.
Ruido: Nos da la opción de seleccionar reducir o residuo dependiendo del sonido

ambiente del audio que queremos alterar.(VicHaunter, n.d.)
2. Ecualizador de curvas de filtro
100Hz Rumble: Este ajuste aumenta la banda de frecuencia de 100 Hz, lo que le da al
sonido unos graves muy distinguidos., esta es una puesta en uso útil porque automáticamente
empuja el bajo hacia arriba.
Radio AM: Esta colocación corta frecuencias más bajas y mejores de 20 db, emulando
los rasgos sónicos de una radio AM impresa. Debido a que la parte superior y la parte trasera del
sonido se han reducido. Funciona con calidad mientras se usa con moderación, como una
instancia en una avería o una parte silenciosa de la melodía.
Realce de graves: Realce de graves es un efecto de reembolso de sistemas estéreo

universal. Tan bien como aumentar las frecuencias bajas, los ajustes de mejora de graves
atenúan regularmente algunas de las mejores frecuencias que engañarán al oído para que no
escuche más graves de los que claramente hay. Esta elección es beneficiosa si la grabación
auténtica tiene bajos débiles.
Recorte de graves: El recorte de bajo hace lo contrario que realce de graves. Si

encuentra que la disminución de la salida en la mezcla es demasiado prominente, los graves con

calma y rapidez reducen la ventaja de las frecuencias ofensivas, dejando más espacio en la
mezcla de medios bajos.
Atenuación progresiva para locuciones: Ayuda disminuir la intensidad del sonido

para dar un sonido claro y preciso en los dispositivos de entradas que sirven para emitir la voz.
RIAA: Sirve para aplicar los efectos de audacity en una pista existente.
Teléfono: Es más útil como efecto, combinando la elección en lugar de un todo. Al

deshacerse de todos los bajos y medios bajos, este ecualizador reproduce el sonido distintivo de
una voz en una línea telefónica. Solo funcionará con sonidos que sean fácilmente audibles a
través de una línea telefónica, que consisten en voz.
Relace de agudos: Si la combinación es extremadamente turbia o falta de claridad,

realce de agudos puede restaurar rápidamente esta molestia. Al aumentar frívolamente las
frecuencias superiores.
Recorte de agudos: Cuando en una mezcla de audio existen bastante toppy, que es
cuando un sonido de gama alta está demasiado fuerte creando un efecto débil. Recorte de
agudos ayuda a que la mezcla de audio sea suave y lisa.(Ircservices, 2018)
3. Compresor

Umbral: Es la extensión en dB a partir de la cual se empezará a aplicar la compresión,
es decir, a bajar el volumen de forma rutinaria.
Límite inferior de ruido: Nos ayuda con la indicación del ruido electrónico y a la vez
ambiental de la pista, y que esta no suba más del nivel dB que le indiquemos.
Proporción: Es la cantidad de compresión que se aplicará. Si, como ejemplo, hemos

establecido el borde en -12dB y aplicamos una proporción de 2: 1 y nuestro audio tiene un pico
de 0dB, con esto poniendo esa altura podría reducirse a -6dB. Para reconocer que amplitud
puede que tenga cierta altura en nuestro audio antes de hacer uso de la compresión, podemos
hacerlo con un método como el que les muestro a continuación:
((p - u) / r) + u = a
Donde p es el pico de amplitud que vamos a calcular (en dB), u es el borde (en dB), r es
el rango primario del porcentaje y a es cómo podría aparecer el nuevo pico de amplitud después
de hacer uso del compresor.
Tiempo de ataque: Normalmente, en cualquier compresor, este es el tiempo que

tomará practicar completamente el impacto de la compresión después de detectar que se ha
pasado el límite. Esto significa que el compresor aparece hacia adelante en el tiempo y puede
haber una amplitud que exceda el umbral, comenzará a aplicar el efecto de acuerdo a lo que
hayamos puesto en este parámetro para que cuando la amplitud está por encima del borde y el
impacto se aplica en su plenitud. Esto podría ser muy beneficioso para evitar que tengamos
picos que superen el umbral y que nos impidan lograr la dinámica que queremos para la pista.
Tiempo de decaimiento: Es el tiempo que pasa desde que el audio no supera el umbral
y hasta que la compresión ya no se aplica en absoluto.
Composición de ganancia para 0 db tras compresión: Al marcar esta casilla, todo el

audio se amplifica de tal manera que la amplitud máxima del audio final permanece en 0dB y,
en consecuencia, no se distorsiona.
Compresión basada en picos: Al marcar esta casilla en realidad los cálculos

funcionarán para por la razón que el compresor comenzará a tomar los valores de altura como
referencia y ahora no el RMS para hacer mediciones y aplicar compresión.(Lormez, 2019)

4. Normalizador
Eliminar desplazamiento DC: Esta es una herramienta para eliminar una molestia que
ocurre de vez en cuando durante la digitalización de sonidos, cuando el centro de la onda no
siempre está en el factor 0, sino acciones hacia arriba o hacia abajo, en consecuencia, bajando el
volumen.
Normalizar pico de amplitud: Se establece un pico de amplitud según la pista lo

requiera, este nos dirá el nivel más alto que alcanzara la pista en sus picos.
Normalizar canales estéreo independientemente: Este método si tenemos un audio

estéreo, mientras ajustamos la extensión para que llegue a un cierto máximo sin sobrepasarlo,
esta operación se realiza uno a la vez en cada canal: por un lado, el izquierdo y por otro el
derecho, con el que se puede hacer más grande o menos y se amplifiquen a la par.(Audacity,
n.d.)
4.4 Consideraciones del uso de animaciones para la web y

aplicaciones
HTML5 CANVAS
 Incluye nuevas etiquetas semánticas que nos ayudan a delinear la estructura. Por
ejemplo <footer>, para el pie de página.
 Nuevos controles para formularios que antes eran más efectivos viables con JavaScript
o CSS.
 Admite audio y video de forma nativa.
 Ahora no es esencial aplicar costos dobles en atributos, algo como: <div id =
container> Esto es un div </div>.

 No existe una sintaxis tan estricta y no es necesario cerrar las etiquetas vacías, por lo
que <br> sería legítimo.
 Etiqueta de tipo de documento simplificada.
 Podemos dibujar con etiquetas como <canvas>.
 Se han eliminado las etiquetas y atributos innecesarios que incluyen <frames>.
 Ahora las etiquetas html, head y frame no son necesarias.
 Las etiquetas de tablas thead, tbody y tfoot tampoco son necesarias.
 Aquí veremos la documentación del W3C en la versión de lanzamiento actual,
actualmente 5.2.(Canvas, n.d.)

1. ¿Cuáles son las fuentes que se deben usar en el producto digital?
2. Describa el método 60-30-10
3. ¿Cuáles son los formatos de imágenes?
4. Enumere 3 tipos de herramientas para edición de imágenes
5. Practique la edición de imagen
6. ¿Cuáles son los formatos de videos?
7. Enumere 3 tipos de herramientas para edición de videos
8. Practique la edición de videos
9. ¿Cuáles son los formatos de sonido?
10. Enumere 3 tipos de herramientas para edición de sonido
11. Practique la edición de sonido
 Como usar Photoshop Curso básico aprende gratis de las herramientas conceptos retoques
adobe, https://www.youtube.com/watch?v=FB4DdUfvfwM
 Cómo EDITAR VIDEOS en Filmora, https://www.youtube.com/watch?v=VxY6yzjecX0
 Wondershare Filmora Video Editor Español,
https://www.youtube.com/channel/UCsnZpPm4ZJBbJppruuYm7Sw
 Curso Audacity Completo, https://www.youtube.com/watch?v=YhU8R08H1R8
REFERENCIAS
Audacity. (n.d.). Video Tutorial de Audacity: Niveles. Manual Básico en Español. Retrieved July
31, 2021, from https://danivoiceovers.com/audacity-tutorial-guide-beginners/
Canvas. (n.d.). HTML Canvas. Retrieved July 31, 2021, from
https://www.w3schools.com/html/html5_canvas.asp
Chaves, A. (2020). Los mejores editores de vídeo: +20 herramientas y programas de edición
para impulsar tu video marketing. https://marketing4ecommerce.net/editores-de-video-
mejores-herramientas-edicion-video/
Ciro, E. (2018). Apps y fuentes: ¿cómo elegir la fuente adecuada? | Pixartprinting.
https://www.pixartprinting.es/blog/elegir-fuente-aplicacion/
Gonzalez, Y. (2020). ▷Los 10 tipos de formato de vídeo más utilizados | Grupo Atico34.

https://protecciondatos-lopd.com/empresas/tipos-formato-video/
Guiones, I. (2020). Formatos de imagen | ¿Cuáles son los formatos de imagen más
importantes? - IONOS. https://www.ionos.es/digitalguide/paginas-web/diseno-
web/cuales-son-los-formatos-de-imagen-mas-importantes/
Inacio, C. (2021). 30 Programas y herramientas para retocar fotos e imágenes.
https://aulacm.com/programas-para-editar-imagenes/
Ircservices. (2018). Ajustes del ecualizador bueno de Audacity - Ircservices.com.
http://www.ircservices.com/ajustes-del-ecualizador-bueno-de-audacity_jnj2M4yn/
Lormez. (2019). El compresor, ¿temido u odiado? | Unión Podcastera.
https://unionpodcastera.com/2019/10/20/el-compresor-temido-u-odiado/
Pickaso. (2017). ¿Qué colores y tipografías elijo para el diseño de mi app?
https://pickaso.com/2017/consejos-color-tipografia-apps
VicHaunter. (n.d.). Cómo eliminar ruido ambiente de una pista de audio con Audacity -
VicHaunter.org. Retrieved July 31, 2021, from https://www.vichaunter.org/como-se-
hace/como-eliminar-ruido-ambiente-de-una-pista-de-audio-con-audacity
Webedia. (2014). Las 11 mejores aplicaciones de edición de sonido para Windows.
https://www.xatakawindows.com/bienvenidoawindows8/las-11-mejores-aplicaciones-
de-edicion-de-sonido-para-windows

NOMBRE DE LA MATERIA
Unidad # 3
APLICACIONES MULTIMEDIA
Tema # 4
ELEMENTOS MULTIMEDIALES DE AUDIO
Ing. Mgs Cristian Bermeo

Subtemas
» Subtema 1: Tipos de audio usados para la web y aplicaciones
» Subtema 2: Herramientas para la edición de audio
» Subtema 3: Edición del audio
» Subtema 4: Consideraciones del uso de animaciones para la web y aplicaciones
Objetivo
Identifica el ámbito de producción de aplicaciones de multimedia interactivas de

edición de audio para el diseño de aplicaciones eficaces orientadas a perfiles de usuario..
Introducción
Los archivos de audio tienen diferentes formatos y tamaños. Comúnmente estamos más familiarizados con tipos MP3 o WMA pero en realidad existen
muchos otros formatos. Estos formatos
¿Por qué existen tantos estándares de audio?

¿Existe un mejor formato de audio?
¿Cuáles son importantes y cuáles puedes ignorar?
En este post te damos respuesta a todas estas preguntas y explicamos los principales tipos de formato de audio
El diseño de bits de los datos de audio se denomina formato de codificación de audio y se puede descomprimir o comprimir para reducir el tamaño del archivo;
por lo tanto, los formatos de archivo de audio se pueden dividir en compresión con pérdida y compresión sin pérdida. Pero lo que usamos a menudo es la
compresión con pérdida. Dado que hay pérdida de datos en el proceso de audio digital, no podemos llegar a los que realmente no tienen pérdidas.
No todos los formatos de archivos de audio son iguales. La frecuencia de muestreo y la profundidad de bits determinan la resolución, el rango de frecuencia y
el rango dinámico del audio. El estándar para audio con calidad de CD es una frecuencia de muestreo de 44,1 kHz y una profundidad de bits de 16 bits.
Cualquier cosa por debajo de esto y su audio no se considera alta definición (HD) o alta resolución. Muchos formatos de archivo de audio utilizan
configuraciones inferiores a las que se consideran HD.
Subtema 1: Tipos de audio usados para la web y
aplicaciones
¿Qué es formato de audio?
Es un tipo de archivo para almacenar datos de audio

digital en un sistema informático
aplicaciones
Uno de los tipos de formato de audio más comunes es WAV,

que son las siglas de Waveform Audio File Format.
El formato de audio WAV fue desarrollado por Microsoft e
IBM en 1991.
Formato de audio
sin compresión
El formato MIDI que son las siglas de Musical Instrument

Digital Interface almacena información acerca del
instrumento usado y de la forma en que se ha tocado. Es
considerado el formato estándar en música electrónica.
aplicaciones
Formato de audio
comprimido sin
pérdidas
FLAC, que viene de las siglas en inglés Free La extensión de archivo ALAC es un formato
Lossless Audio Codec, es un formato de de datos asociada a Apple Lossless Audio
archivos de audio que puede comprimirlos hasta, Codec (ALAC). Archivos ALAC fueron
aproximadamente, un 50%, sin perder desarrollados por Apple. Estos archivos
información, por lo que mantiene la calidad de utilizan el formato M4A porque ALAC es un
audio fiel al archivo original. códec utilizado para codificar los datos de
audio
aplicaciones
Es el formato de compresión más extendido y
utilizado, en sus diversas variantes. La pérdida de
información que supone el formato mp3 pasa (casi)
desapercibida al oído humano.
Un archivo mp3 puede llegar a ocupar hasta 15 veces
menos que su original conservando una gran calidad.
Formato de audio Recientemente, Microsoft ha desarrollado una variante

comprimido con del formato WMA con compresión, pero sin pérdida.
Fue ideado para su reproducción con el programa
pérdida Windows Media Player. Es el competidor directo en
calidad y en compresión del mp3 con la diferencia de
que añade información del autor.
Ogg Vorbis es un formato contenedor desarrollado

en código abierto, de libre distribución y sin patente.
Esta es la mayor diferencia con el resto de archivos
de audio comprimidos.
aplicaciones
Tasa que afecta la calidad del sonido:
320 kbps – audio que no se diferencia de la calidad de un CD;
192 kbps – sin pérdidas significativas para la mayoría de las personas;
128 kbps – pérdidas ligeramente perceptibles; (Estéreo)
96 kbps – calidad similar a la radio FM;
64 kbps – sin banda sonora en mono para podcast
32 kbps – similar a la radio AM;
16 kbps – similar a la radio de ondas cortas (“walkie-talkie”).

Subtema 2: Herramientas para la edición de
audio
Comparaciones
https://www.softwareadvice.com/ie/audio-editing/adobe-
audition-profile/vs/audacity/
Convertir en MP3
Ejemplo:
Paso. 1 Reducción de ruido
Paso. 2 Compresor
Paso. 3 Ecualizador de curvas de filtro
Paso. 4 Normalizador
Subtema 4: Consideraciones del uso de
animaciones para la web y aplicaciones
HTML Canvas
Graphics
El <canvas>elemento HTML se utiliza para dibujar gráficos en una

página web.
El gráfico de la izquierda se crea con <canvas>. Muestra cuatro

elementos: un rectángulo rojo, un rectángulo degradado, un
rectángulo multicolor y un texto multicolor.
https://www.w3schools.com/html/html5_canvas.a
sp
Bibliografía
» Ircservices. (Enero de 2018). Ircservices. Obtenido de Ajuste de ecualizador bueno en AUDACITY:

http://www.ircservices.com/ajustes-del-ecualizador-bueno-de-audacity_jnj2M4yn/
» Marcos. (20 de Octubre de 2019). unionpodcastera. Obtenido de https://unionpodcastera.com/2019/10/20/el-compresor-
temido-u-odiado/
» Vichauter. (2018). Vichaunter. Obtenido de Como eliminar ruido ambiente de una pista : https://www.vichaunter.org/como-se-
hace/como-eliminar-ruido-ambiente-de-una-pista-de-audio-con-audacity
» voice, D. (2017 ). danivoiceovers. Obtenido de https://danivoiceovers.com/audacity-tutorial-guide-
beginners/#:~:text=La%20herramienta%20normalizar%20es%20muy,una%20ventana%20con%20tres%20opciones.
Unidad # 3
APLICACIONES MULTIMEDIA
Tema # 3
ELEMENTOS MULTIMEDIALES DE VIDEO

Subtemas
» Subtema 1: Tipos de video usados en los productos digitales
» Subtema 2: Herramientas para la edición de video
» Subtema 3: Edición de video
Objetivo
Identifica el ámbito de producción de aplicaciones de multimedia interactivas de

edición de video para el diseño de aplicaciones eficaces orientadas a perfiles de usuario..
Introducción
Al desarrollar productos digitales eficientes se debe considerar integrar el uso
de elementos de multimedia como es el video. Para su uso se debe realizar un
tratamiento a cada elemento en lo que respecta a la edición considerando los
parámetros, tipos y formatos de cada elemento multimedia.

Subtema 1: Tipos de video usados en los productos
digitales.
La extensión de archivo de un video

generalmente se los conoce como los
contenedores, algunos son usados con códecs.
Amplíe lo aprendido leyendo el compendio 4

– páginas 2
digitales.
LOS CODEC
Un Codec es una pedazo de software capaz de convertir una

señal analógica a una digital para transmitirla sobre una red
de datos

– páginas 2
digitales.
Retienen toda la información contenida en la

Los códecs
sin pérdida transmisión original preservando la calidad de la
señal audio/video.
Los códecs
con
Reducen la calidad para lograr compresión y así
pérdida reducir el consumo de ancho de banda.

– páginas 2
digitales.
Uno de los formatos más utilizados en la actualidad,

especialmente cuando se trata de compartir contenido en
línea.
Si se combina con H.264 o H.265, también se puede usar para

almacenar cosas como subtítulos e imágenes fijas

– páginas 2
digitales.
Uno de los formato de vídeo estándar más antiguos y

universalmente aceptados. Puede utilizar una enorme
variedad de códecs.

– páginas 2
digitales.
Es uno de los formatos de vídeo para Apple. Usado para

su reproductor Quicktime. Los videos que usan este
formato por lo general tienen una calidad muy alta, pero
también tamaños de archivo bastante grandes.

– páginas 2
digitales.
Este formato tienden a tener el tamaño de archivo más pequeño,

sin embargo, esto viene con la compensación de tener una caída
significativa en la calidad

– páginas 2
digitales.
Un formato que usa compresión con pérdida y es un formato

universal de video de uso común.

– páginas 2
digitales.
Este formato fue desarrollado, entre otras cosas, para inyectar algo
de flexibilidad en la estructura del mercado. Se convirtió en uno de
los primeros formatos compatibles con los populares entornos
Linux.

– páginas 2
digitales.
Este formato fue desarrollado, entre otras cosas, para inyectar algo
de flexibilidad en la estructura del mercado. Se convirtió en uno de
los primeros formatos compatibles con los populares entornos
Linux.

– páginas 2
digitales.

– páginas 2
Subtema 3: Herramientas para la edición de video
DaVinci Resolve
Adobe Premiere Pro
Our score: 9.5 Our score: 9.5 Our score: 9.2 Our score: 9.0
https://financesonline.com/

– páginas 2
Subtema 3: Edición de video
Importar Contenido
Trabajar con Videos Pesados (Proxy)
Cortar
Grabar desde Webcam y Grabar pantalla del PC
Títulos
Subtítulos y créditos
Transiciones
Efectos
Elementos
Transformar Clips
Pantalla Verde
Corrector de Distorsión de Lente
Ajustes de Velocidad
LUTS y Corrección de Color
Otras Herramientas
Exportar Proyecto
https://www.youtube.com/watch?v=VxY6yzjecX0
– páginas 2
Bibliografía
Gonzalez, Y. (2020). ▷ Los 10 tipos de formato de vídeo más utilizados | Grupo Atico34.
https://protecciondatos-lopd.com/empresas/tipos-formato-video/
Chaves, A. (2020). Los mejores editores de vídeo: +20 herramientas y programas de edición para
impulsar tu video marketing. https://marketing4ecommerce.net/editores-de-video-mejores-
herramientas-edicion-video/
Unidad # 4
Tema # 1
Técnicas de evaluación heurística y test de usuario

Subtemas
» Subtema 1: Análisis Heurísticos
» Subtema 2: Test con usuarios
Objetivo
Participa activamente en equipo de trabajo, analizando y diseñando interfaces

gráficas para aplicaciones mutimediales interactivas
Introducción
de elementos de multimedia como son el tipo de texto más conveniente y las
imágenes a utilizar. Para su uso se debe realizar un tratamiento a cada elemento en
lo que respecta a la edición considerando los parámetros, tipos y formatos de cada
elemento multimedia.
Subtema 1: Evaluación Heurísticos

– páginas 5 - 8
Subtema 1: Principios heurísticos de Jakob Nielsen

– páginas 5 - 8
Subtema 2: Test de Usuario
Seleccionar a los miembros.
El laboratorio y los instrumentos
Planificar la prueba
Realización del informe

– páginas 5 - 8
Subtema 2: Test de Usuario

– páginas 8 - 10
Unidad # 4
Tema # 2
Técnicas de evaluación de ley de Fitts, Cards Sorting e ISO

Subtemas
» Subtema 2.1: Ley de Fitts
» Subtema 2.2: Card Sorting
» Subtema 2.3: Norma ISO respecto a la Usabilidad
Objetivo

Introducción
Subtema 2.1: Ley de Fitts
La experiencia del usuario (UX) se basa totalmente en
hacer que la navegación y la interacción entre el
consumidor y el dispositivo sean de primera clase. En
esta experiencia, una de las teorías que más acompañan
a los diseñadores de UX es la Ley de Fitts.

– páginas 2
13
La Ley de Fitts implica numerosas Ahora en este caso la navegación
conclusiones que pondremos en estará de forma vertical, donde el
práctica fácilmente en el diseño web: ancho del botón será más amplio.
Relación entre tamaño y posición Ejemplo de imagen de navegación vertical
¿Botones anchos o altos?
Ejemplo de imagen de navegación horizontal
Fuente:(Bravo, 2020), Ejemplo de navegación horizontal, Obtenido de: https://t-

position.com/ux-la-ley-de-fitts/
Fuente:(Bravo, 2020), Ejemplo de navegación vertical, Obtenido de:
https://t-position.com/ux-la-ley-de-fitts/

– páginas 12 - 14
Menús desplegables La disposición horizontal es motivo de
Ejemplo de menú desplegable vertical falta de espacio y dificulta la navegación
del usuario.
Ejemplo de menú desplegable horizontal
Fuente:(Bravo, 2020), Ejemplo de navegación horizontal, Obtenido de: https://t-

position.com/ux-la-ley-de-fitts/
Fuente:(Bravo, 2020), Ejemplo de menú desplegables,

Obtenido de: https://t-position.com/ux-la-ley-de-fitts/

Subtema 2.2: Card Sorting

Subtema 2.2: Card Sorting

Resumen
Evalúa aspectos del usuario desde
Card Sorting
la estructura de la información
Evalúa aspectos del

Producto Digital usuario
Test de Usuario
Evaluación heurística
Evalúa la Norma ISO 9241-11

usabilidad
Subtema 2.3: Norma ISO respecto usabilidad
USABILIDAD
Usabilidad es un término adaptado de la palabra en inglés “usability”,
para indicar que algo se puede usar; la norma ISO 9241-11 dice que la
usabilidad se refiere al alcance en el que un producto puede ser utilizado por
usuarios específicos para alcanzar metas específicas con efectividad,
eficiencia y satisfacción en un contexto específico de uso.

Unidad # 4
Tema # 2
Resultados del diseño posterior a la evalución

Subtemas
» Subtema 3.1: Definir los entregables según el perfil
» Subtema 3.2: Preparación los entregables
Objetivo

Introducción
Subtema 3.1: definir los entregables según el perfil
Entregables
La Guía del PMBOK(r), cuarta edición, lo define como:
Cualquier producto, resultado o capacidad del proveedor, único y verificable, que
necesita ser producido para completar un procedimiento, fase o proyecto. A
menudo se utiliza mayor principalmente en términos de un entregable externo, que
es el desafío a la aprobación por medio del patrocinador de la misión o el cliente.

Subtema 3.2: preparación los entregables
Durante la fase de preparación el equipo de proyecto inicia con la planificación y

preparación de las actividades para arrancar de la mejor forma.
• Definir el alcance y el plan del proyecto
• Identificar y cuantificar los objetivos de negocio de la empresa a desarrollar.
• Asegurar la participación de un patrocinador del reto de alto nivel.
• Establecer el gobierno de la misión y la empresa

– páginas 22
Subtema 3.2: preparación los entregables
• Establecer la "gestión del proyecto", cómo se podría realizar el seguimiento de la

misión y el enfoque para informar a la corporación sobre el desarrollo y el envío
de costes del reto.
• Comenzar con el entorno del equipo
• Preparar el entorno del emprendimiento, tanto virtual (repositorio, portal, etc.)
como físico (oficinas, salas, etc.)
• Organizar el grupo de emprendimiento
• Si el emprendimiento está dentro de la nube, lograr los accesos
correspondientes

– páginas 22
Bibliografía
Ciro, E. (2018). Apps y fuentes: ¿cómo elegir la fuente adecuada? | Pixartprinting.
https://www.pixartprinting.es/blog/elegir-fuente-aplicacion/
Guiones, I. (2020). Formatos de imagen | ¿Cuáles son los formatos de imagen más importantes? -
IONOS. https://www.ionos.es/digitalguide/paginas-web/diseno-web/cuales-son-los-formatos-
de-imagen-mas-importantes/
Pickaso. (2017). ¿Qué colores y tipografías elijo para el diseño de mi app?

https://pickaso.com/2017/consejos-color-tipografia-apps
TEST_1: Revisión del intento https://pregradovirtual.unemi.edu.ec/mod/quiz/review.php?attempt=150...
Área personal / Mis cursos / INTERFACES Y MULTIMEDIA,[INTF MULT VIR] - C1[37378] - P / Actividades contacto con el docente / TEST_1
Comenzado el lunes, 21 de junio de 2021, 21:53

Estado Finalizado
Finalizado en lunes, 21 de junio de 2021, 22:18
Tiempo 25 minutos 1 segundos
empleado
Calificación 10,75 de 15,00 (72%)
Pregunta 1
Parcialmente correcta
Puntúa 1,75 sobre 3,00
SELECCIONE LAS RESPUESTAS CORRECTAS. Un experto en UX fue contratado para el diseño de la interfaz de un producto digital ¿Qué
elementos de la organización debe considerar primero antes de iniciar el diseño del prototipo?
a. Oportunidad de mejora
b. UX/UI
c. Objetivos 
d. Patrones de diseño
e. Contexto
f. Negocio
Compendio 1 - página 5-6 - Semana 1.
Pregunta 2
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Cúal es el modelo de interacción que siguió el programador para diseñar el interfaz del
producto digital y que tiene como prioridad el cumplimiento de la funcionalidad?
a. Modelo Mental
b. Modelo de Interacción
c. Modelo de implementación 
d. Modelo funcional
Compendio 1 - página 13 - Semana 1.
1 de 3 13/9/2021 18:54
Pregunta 3
Incorrecta
SELECCIONE LAS RESPUESTAS CORRECTAS. De acuerdo a la siguiente imagen, indique porque razón la barra de busqueda siempre va
en la parte superior de los sitios web?
a. Ley de Gestalt 
b. Patrones de diseño o universales
c. Configuración de búsqueda
d. Ley de semejanza
Pregunta 4
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Qué escenario es la interfaz donde interactuamos con el resto de participantes de la reunión
en el sistema de video conferencia zoom?
a. Escenario de uso diario 

b. Escenario de uso híbrido
c. Escenario de uso esporadíco o de unica vez
d. Escenario de uso necesario
Compendio 1 - página 8-9 - Semana 1.
2 de 3 13/9/2021 18:54
Pregunta 5
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Qué elemento de la metodología para diseñar las personas tienden a ser pocos y estables en
el tiempo?
a. Objetivos 
b. UX/UI
c. Tareas o actividades
d. Escenarios
◄ S15-ANÁLISIS DE CASOS_3
Ir a...
TEST_2 ►
3 de 3 13/9/2021 18:54
Comenzado el martes, 13 de julio de 2021, 09:53

Estado Finalizado
Finalizado en martes, 13 de julio de 2021, 10:08
Tiempo 15 minutos
empleado
Pregunta 1
Parcialmente correcta
SELECCIONE LAS RESPUESTAS CORRECTAS. ¿Cuáles de los siguientes elementos se considera para el diseño con UX?
a. Las limitaciones técnica

b. Lo que se trazó el negocio
c. Lo que el usuario necesita 
d. El costo del producto o servicio digital
Compendio 3 - página 5
Pregunta 2
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿cuál es la definición de sub-hipótesis en el UX?
a. Permite que el trabajo de todo el equipo esté correctamente centrado. Además, permite definir las restricciones y límites vitales
para que el grupo diseñe sin perder de vista el objetivo
b. Cuando el enunciado es muy largo es beneficioso dividir en elementos más pequeños y específicos. 
c. Es un ejercicio grupal, la función es de tratar de reconocer cosas importantes para el diseño.
d. El enunciado de algo con lo se está de acuerdo en que sea genuino y un enunciado sobre los comentarios del mercado
1 de 3 13/9/2021 18:54
Pregunta 3
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Cuál son las variables para priorizar los supuestos?
a. A. Riesgo alto B. Conocido C. Riesgo bajo D. Conocido

b. A. Riesgo alto B. Desconocido C. Conocido D. Riesgo bajo
c. A. Riesgo alto B. Desconocido C. Riesgo bajo D. Conocido 
d. A. Riesgo alto B. Riesgo bajo C. Desconocido D. Conocido
Compendio 3 - página 9-10
Pregunta 4
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿En qué se enfoca el diseño UX?
a. En el producto y servicio digital

b. En el producto digital
c. En el servicio digital
d. En las personas 
2 de 3 13/9/2021 18:54
Pregunta 5
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Cuál es la estructura del diseño UX?
a. El UI es parte del UX 
b. Los patrones de interacción.
c. El SCRUN es parte del UI
d. El UX es parte del UI
◄ TEST_1
Ir a...
TEST_3 ►
3 de 3 13/9/2021 18:54
Comenzado el martes, 24 de agosto de 2021, 22:07

Estado Finalizado
Finalizado en martes, 24 de agosto de 2021, 22:22
Tiempo 15 minutos 28 segundos
empleado
Pregunta 1
Incorrecta
SELECCIONE LA RESPUESTA CORRECTA. ¿Qué tipo de combinación de colores está utilizándola la siguiente imagen?
a. Colores opuestos
b. Tonalidades 
c. Colores igualitarios
d. Colores análogos
Pregunta 2
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Cuál es el formato de audio con perdida?
a. FLAC
b. MP3 
c. ALAC
d. AVI
Diapositiva 12
1 de 3 13/9/2021 18:54
Pregunta 3
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Qué tipo de combinación de colores es el segmento A de la paleta de colores siguiente?
a. Colores opuestos
b. Colores igualitarios
c. Colores análogos 
d. Tonalidades
Pregunta 4
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Cuál es uno de los formatos de vídeo estándar más antiguos y universalmente aceptados que
puede utilizar una enorme variedad de Codec?
a. MP4
b. BMP
c. AVI 
d. MP3
Diapositiva 11
2 de 3 13/9/2021 18:54
Pregunta 5
Correcta
RELACIONE los términos con sus respectivas definiciones correcto
Página: Esta es la etapa más específica del Template, donde podemos ver el diseño y contenido final. 
Átomos: Son elementos que no se pueden desglosar o separar en otros sin dejar de ser funcionales. 
Organismos: En esta etapa podemos hablar de componentes UI relativamente Complejos. 
Moléculas: Resulta de varios átomos unidos para componer una unidad funcional. 
Compendio 5 - página 7-9
Pregunta 6
Correcta
SELECCIONE LA RESPUESTA CORRECTA. ¿Cuál es el formato de audio sin perdida?
a. MP4
b. ALAC 
c. AVI
d. BMP
Diapositiva 12
◄ TEST_2
Ir a...
S15-TALLER_1 ►
3 de 3 13/9/2021 18:54

Compendio 3interfaces

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Compendio 3interfaces

Cargado por

Copyright:

Formatos disponibles

Unidad 4.

Evaluación centrada en el usuario

Este compendio recoge textualmente documentos e información de varias fuentes

TEMA 1 :Técnicas de evaluación heurística y test de usuario 4

1.1 Análisis Heurísticos 5

1.2 Test con usuarios 8

TEMA 2 :Técnicas de evaluación de ley de Fitts, Cards Sorting e ISO 11

2.1 Ley de Fitts 12

2.2 Card Sorting 14

2.3 Norma ISO respecto a la usabilidad 15

TEMA 3 :Resultados del diseño posterior a la evaluación 20

3.1 Definir los entregables según el perfil 21

3.2 Preparación lo entregables 22

Participa activamente en equipo de trabajo, analizando y diseñando interfaces gráficas para

Un método de evaluación de la usabilidad de interfaces es el análisis heurístico por

La evaluación consiste en una secuencia de comprobaciones que aseguran la

En un análisis heurístico es una metodología que comprueba si existe usabilidad en

Ventajas y desventajas del análisis heurístico.

Nota: Fuente:(Prado, 2020a), Análisis heurístico de la interfaz, Obtenido de:

1.2 Test con usuarios

Se podría definir como una prueba o evaluación basado principalmente en el análisis y

¿Cuándo realizar un test con usuarios?

Cómo llevar a cabo un test con usuarios

1. Seleccionar a los miembros. - Para la prueba debería seleccionar al menos 5 personas,

Participa activamente en equipo de trabajo, analizando y diseñando interfaces gráficas para

Otras de las técnicas de la evaluación de UI desde los prototipos diseñados hasta la

2.1 Ley de Fitts

La experiencia del usuario (UX) se fundamenta en hacer que el uso y la interacción

Nota: Fuente:(Bravo, 2020), Ejemplo de navegación horizontal, Obtenido de: https://t-position.com/ux-

Nota: Fuente:(Bravo, 2020), Ejemplo de navegación vertical, Obtenido de: https://t-position.com/ux-la-

Menús desplegables, no debieran ser demasiados grandes, esto es debido a que no

Nota: Fuente:(Bravo, 2020), Ejemplo de menú desplegables, Obtenido de: https://t-position.com/ux-la-

Nota: Fuente:(Bravo, 2020), Ejemplo de navegación horizontal, Obtenido de: https://t-position.com/ux-

A es la trayecto de la actividad, W es el tamaño del componente e ID, el resultando,

Se fundamenta en el análisis en que los usuarios intuyen, asocian y jerarquizan una

Nota: Fuente:(Fernández, 2014),Card sorting realizado con OptimalSort, Obtenido de:

Principios generales de usabilidad

Métodos de prueba y evaluación de usabilidad para sitios web

Beneficios de la evaluación de usabilidad

Participa activamente en equipo de trabajo, analizando y diseñando interfaces gráficas para

3.1 Definir los entregables según el perfil

3.2 Preparación lo entregables

Al inicio del proyecto de diseño de un producto digital se debe planificar y desglosar el

1. ¿Cuáles son los métodos de evaluación de usabilidad y cuáles son las de

Este compendio recoge textualmente documentos e información de varias fuentes

Interfaces y Multimedia Página | 2

TEMA 1: Diseño de productos digitales 4

1.1 El rol del diseñador en un sitio web o App 5

1.2 Principios y sistematización del diseño gráfico aplicados en productos digitales 7

1.3 Patrones de diseño 10

Interfaces y Multimedia Página | 3

Identifica el ámbito de producción de aplicaciones multimediales interactivas,

El diseñador de interfaces de productos digitales es un profesional con

El conocimiento de este tipo de profesional va desde el diseño gráfico, edición de

Interfaces y Multimedia Página | 4

1.1 El rol del diseñador en un sitio web o App

El diseñador de interfaces de productos digitales es el profesional que cumple con la

¿Qué proporciona un diseñador web?

● Tienen una gran cantidad de experiencia técnica y creativa.

● Usan equipos de diseño y prototipos, marcos, administradores de contenido, editores o

● Están conectados a evaluar, buscar y eliminar contenido innecesario o redundante.

Interfaces y Multimedia Página | 5

● El diseñador de interfaces de productos digitales también puede reproducir la