Nociones de reglas de usabilidad y accesibilidad en aplicaciones

independientes, móviles GA5-220501095-AA1-EV06.

Elaboración de interfaz gráfica y mapa de navegación cumpliendo con reglas
de usabilidad y accesibilidad app móvil GA5-220501095-AA1-EV07.

Jhon Faber Herrera García

Andersson Yesid Figueroa Vargas

Aprendices

Jairo Antonio Muñoz Arango

Instructor

Centro Agropecuario la Granja

SENA Regional Tolima
Tecnólogo Análisis y Desarrollo de Software
Ficha 2721407
2024
INTRODUCCION
En esta actividad se da a conocer todo lo relacionado con la programación móvil
entre otros aspectos como lo son la web, el conocimiento básico de cómo va
enlazada la programación con la actualidad la cual es todo lo relacionado con los
smartphone y iPhone lo cual se ha vuelto indispensable en la actualidad.
USABILIDAD MOVIL: La usabilidad móvil se aplica al concepto de facilidad de
uso (usabilidad) en servicios online con dispositivos móviles como smartphone o
tablets. El objetivo es tratar las características particulares de los dispositivos,
como pantallas más pequeñas o recursos más pequeños en comparación con los
ordenadores de sobremesa o portátiles, y diseñar o implementar la página móvil
teniendo en cuenta estos aspectos.
Hace unos años los usuarios sólo utilizaban el escritorio para navegar por internet.
En los últimos años se ha producido un rápido aumento del número de usuarios
que navegan por Internet en sus smartphones. Una de las razones de ello es el
continuo desarrollo de los dispositivos móviles, así como la infraestructura de
datos necesaria para ello. Un smartphone en 2018 tiene mucha más potencia
informática que un PC de escritorio de la década de 1990. Lo mismo se aplica a
las conexiones de datos móviles. Gracias a UMTS y LTE, incluso los sitios más
complejos pueden cargarse fácilmente.

ALGUNAS REGLAS DE USABILIDAD

1. Visibilidad del estado del sistema: Cuando hacemos una opción en

nuestra App, el sistema nos informa de lo que ocurre y de cuál es su estado
actual. Por ejemplo, cuando vas a rellenar un formulario.
2. Relación entre el sistema y el mundo real: Si tenemos una aplicación que
conecta con el contexto que ya conocemos, estamos generando una mejor
experiencia de usuario. Por ejemplo: una agenda digital se asemeja mucho
a cómo es una agenda en el mundo real. En definitiva, es importante tener
en cuenta que el usuario debe estar familiarizado con el producto y que ya
lo ha utilizado previamente. Solo así seremos capaces de presentarle una
opción que no se aleja de lo que ya conoce.
3. Libertad de usuario: Cuando una aplicación le da al usuario la oportunidad
de hacer una opción, debe tener todo el control sobre ella. Por ejemplo: si
está subiendo un archivo, debe saber que puede guardarlo, cancelar la
subida, borrarlo o editarlo. Es importante que no se sienta sometido, sino
que tiene el control sobre lo que hace en la App.
4. Consistencia y coherencia: Significa que, cuando diseñamos una
aplicación, cada botón debe estar relacionado con una ubicación, una
forma, un tamaño, un color, etc. Solo así, el usuario podrá entender y
vincular dicho botón con una acción determinada. Sabrá dónde va a estar el
CTA, la barra de búsqueda u otras opciones, lo que le facilitará el uso del
sistema y las posibilidades de volver a usarlo.
 5. Prevención de errores: Nuestro diseño de aplicaciones debe realizarse
pensando en los supuestos errores que puede cometer el usuario. De esta
manera, podremos presentarle diferentes maneras de resolverlo y que no
sea tan fácil equivocarse.
6. Reconocer rápidamente las funciones: Cuando tenemos una interfaz
digital resulta mucho más fácil mostrar iconos que palabras. Los recordarán
fácilmente y mejorarán la usabilidad.
7. Flexibilidad y eficiencia: Brinda la posibilidad de atajar algunas funciones
cuando aprendan a manejar bien la aplicación. Los usuarios con mucha
experiencia en la misma podrán realizar sus funciones de una manera
mucho más rápida.
8. Estética y diseño de aplicaciones minimalista: Es decir, no le muestres
al usuario más cosas de las que necesita. Presenta lo básico y necesario
en una sola pantalla y no le bombardees con demasiada información.
9. Ayúdale a reconocer y recuperarse de errores: Imagina que el usuario
ha borrado un archivo por error. Debes encontrar maneras de que pueda
volver al estado original, y para ello puedes mostrarle la posibilidad de
verificar acciones antes de realizarlas definitivamente. Aumentará su
confianza en el producto y en la marca.
10. Ayuda y documentación: Puede que sea la primera vez que se enfrenta a
una aplicación como la tuya. Entonces, va a necesitar algún tipo de ayuda,
y para ello puedes disponer de un soporte técnico para facilitar el primer
acercamiento. Todo depende del tipo de App.

ACCESIBILIDAD: La accesibilidad es el grado en que todos pueden usar un

objeto, visitar un lugar o acceder a un servicio. la accesibilidad móvil generalmente
se refiere a hacer que las aplicaciones sean más accesibles para las personas con
discapacidades cuando usan dispositivos móviles. El trabajo de WAI en esta área
incluye personas que utilizan una amplia gama de dispositivos para interactuar con
la web: teléfonos, tablets, televisores y más. La accesibilidad móvil nos afecta a
todos. Por ejemplo, sentimos el impacto cuando tenemos un nivel bajo de visión,
estamos usando nuestro teléfono con una sola mano, estamos en un lugar con
mala iluminación, cuando tenemos los dedos hinchados o grandes, o estamos en
lugares ruidosos.
Conceptos erróneos sobre Mobile Accessibility

 Es difícil y compleja.
 Las discapacidades solo afectan a un pequeño número de usuarios.
 Tienen un costo elevado.
 Solo afecta a las personas no videntes.
 Ofrece opciones de diseño limitadas o solo texto sin formato, etc.
Ninguna de estas afirmaciones es cierta. Hacer que las aplicaciones sean más
accesibles para las personas con discapacidades no solo mejora la experiencia
para ellos, sino para todos.

Pautas para la Accesibilidad Móvil

Existen cuatro principios de diseño accesible aplicables a cualquier tecnología que
rigen las WCAG 2.0 del W3C. A continuación, explicamos brevemente cada una:
1. Perceptibilidad
Los tamaños de pantalla son pequeños, por lo que es mejor no incluir demasiada
información a la vez. Adapta el diseño al tamaño de pantalla adecuado e intenta
eliminar la necesidad de desplazamiento horizontal.
Asegúrate de que la opción de zoom o ampliación ayude a que la información sea
más legible, y que la aplicación esté optimizada para la funcionalidad de zoom de
cada navegador.
Usa una cantidad adecuada de contraste en el diseño ya que es más probable que
las personas estén en aplicaciones móviles al aire libre, que en aplicaciones de
escritorio.
2. Operabilidad
Usa el control del teclado para dispositivos con pantalla táctil, optimiza el tamaño y
el espaciado del objetivo táctil, usa gestos de pantalla táctil idóneos, haciéndolos
obvios y fáciles de realizar. Coloca los botones donde sean de fácil acceso cuando
el dispositivo se sostiene en diferentes posiciones.
3. Comprensibilidad
Admite múltiples orientaciones de diseño que cambian automáticamente cuando el
usuario cambia la forma en que coloca o sostiene el dispositivo, ya sea en formato
horizontal o vertical.
Mantén un diseño uniforme en todas las páginas de la aplicación. Asegúrate de
colocar los elementos más importantes encima del pliegue, antes de la necesidad
de desplazarte. Esto hace que sea más fácil para las personas con discapacidad
visual.
Agrupa elementos operables que realizan la misma acción juntos. Esto hará que el
espacio del objetivo táctil sea más grande, lo que beneficiará a las personas con
problemas de destreza. Asegúrate de que quede claro que un elemento se puede
accionar mediante el uso de formas de cuadro convencionales o casillas de
verificación, colores, conveniente posición. llamadas a la acción, etc.
Proporciona consejos e instrucciones para los gestos de la pantalla táctil que
expliquen cómo usarlos cuando el usuario necesite aprenderlos por primera vez, y
mantenlos al alcance para que el usuario pueda volver a consultarlos.
4. Robustez
Configura el teclado para que coincida con el tipo de datos requeridos en el
campo. Por ejemplo, si se le pide a un usuario que ingrese su dirección de correo
electrónico, tenga un teclado que incluya un guion bajo, así como otros símbolos
típicos que se usan en las direcciones de correo electrónico.
Esto facilita la entrada de datos para el usuario y ayuda a prevenir errores y
garantiza formatos adecuados. Proporciona métodos múltiples y convenientes
para la entrada de datos. Una de esas formas podría ser habilitar el habla para
completar una entrada. No es aconsejable que se solicite ingresar más texto del
necesario

APLICACIÓNES INDEPENDIENTES
Las Aplicaciones Independientes aplican el enfoque de «empresa componible»,
que se basa en la creación de aplicaciones de negocio a partir de componentes
interoperables, combinando las ventajas de los enfoques y tecnologías de
contenerización para el despliegue y la gestión con la potencia de las tecnologías
BPM para el desarrollo de aplicaciones.
Sobre el concepto de «empresa componible», Gartner afirma: «A medida que
cambian las necesidades empresariales, las organizaciones deben ser capaces de
ofrecer innovación con rapidez y adaptar las aplicaciones de forma dinámica, re
ensamblando capacidades de dentro y fuera de la empresa. Para ello, deben
comprender y aplicar el concepto de empresa componible”.
En un contexto en el que los líderes de TI y CIOs deben responder rápidamente a
la necesidad de innovación, las Aplicaciones Independientes se adaptan
particularmente bien a esta necesidad de capacidad de respuesta al proporcionar
una forma más rápida y eficaz de desplegar aplicaciones de procesos de negocio
totalmente integradas.

APLICACIONES MOBILES
Una aplicación móvil, también llamada app móvil, es un tipo de aplicación
diseñada para ejecutarse en un dispositivo móvil, que puede ser un teléfono
inteligente o una tableta. Incluso si las aplicaciones suelen ser pequeñas unidades
de software con funciones limitadas, se las arreglan para proporcionar a los
usuarios servicios y experiencias de calidad.
A diferencia de las aplicaciones diseñadas para computadoras de escritorio, las
aplicaciones móviles se alejan de los sistemas de software integrados. En cambio,
cada aplicación móvil proporciona una funcionalidad aislada y limitada. Por
ejemplo, puede ser un juego, una calculadora o un navegador web móvil.
Debido a los recursos de hardware limitados de los primeros dispositivos móviles,
las aplicaciones móviles evitaban la multifuncionalidad. Sin embargo, incluso si los
dispositivos que se utilizan hoy en día son mucho más sofisticados, las
aplicaciones móviles siguen siendo funcionales. Así es como los propietarios de
aplicaciones móviles permiten a los consumidores seleccionar exactamente las
funciones que deben tener sus dispositivos.

DIFERENCIAS
Es una aplicación que se ejecuta de forma autónoma en el ordenador y no
necesita nada más para ser utilizable. Software se puede ejecutar fuera de línea,
Software que no forma parte de los paquetes de aplicaciones, un software que se
ejecuta como un complemento a un proceso existente, una aplicación portátil que
se puede realizar sin un procedimiento de instalación.
Las aplicaciones por lo general comparten la pantalla del teléfono con las webs
móviles, las aplicaciones tienen que ser descargadas e instaladas antes de usar
una web, pueden accederse simplemente usando internet y un navegador; sin
embargo, no todas pueden verse correctamente desde una pantalla generalmente
más pequeña que la de un ordenador de escritorio.

APLICACIONES HIBRIDAS
Una (aplicación híbrida) es una aplicación de software que combina elementos de
aplicaciones nativas y aplicaciones web. Las aplicaciones híbridas son
esencialmente aplicaciones web que se han colocado en un Shell de aplicación
nativo. Una vez que se descargan de una tienda de aplicaciones y se instalan
localmente, el Shell puede conectarse a cualquier capacidad que brinde la
plataforma móvil a través de un navegador integrado en la aplicación. El
navegador y sus complementos se ejecutan en el back-end y son invisibles para el
usuario final. Las aplicaciones híbridas son populares porque permiten a los
desarrolladores escribir código para una aplicación móvil una vez y aún se
adaptan a múltiples plataformas. Debido a que las aplicaciones híbridas agregan
una capa adicional entre el código fuente y la plataforma de destino, pueden
funcionar un poco más lento que las versiones nativas o web de la misma
aplicación.
CARACTERÍSTICAS DE LAS APLICACIONES HÍBRIDAS
Las características de las aplicaciones híbridas incluyen:
 La capacidad de funcionar esté o no conectado el dispositivo.
 Integración con el sistema de archivos del dispositivo móvil.
 Integración con servicios basados en web.
 Un navegador integrado para mejorar el acceso a contenido dinámico en
línea.

PROS Y CONTRAS DE LAS APLICACIONES HÍBRIDAS

Las ventajas de las aplicaciones híbridas incluyen:

 Operar en diferentes plataformas.

 Tiempos de compilación más rápidos en comparación con las aplicaciones

nativas.

 Más barato de desarrollar en comparación con la creación de dos versiones

de una aplicación nativa para dos plataformas diferentes.

 Es más fácil lanzar parches y actualizaciones.

 Puede trabajar en línea y sin conexión.

Sin embargo, algunas desventajas incluyen:

 Variaciones debidas al desarrollo inclinado en una plataforma; por ejemplo,

si un equipo de desarrollo inclina su trabajo hacia una plataforma, otra
plataforma admitida puede carecer de calidad o sufrir errores.

 La apariencia de una aplicación puede variar de una plataforma a otra.

 La necesidad de probar la aplicación en una variedad de dispositivos para

garantizar un funcionamiento adecuado.
  La experiencia del usuario (UX) puede caer si la interfaz de usuario (UI) no
es similar a los navegadores a los que el usuario está acostumbrado y está
lo suficientemente bien diseñada.

VENTAJAS:
- Es posible distribuirla en las tiendas iOS y Android
- Instalación nativa pero construido con JavaScript, HTML y CSS
- Acceso a parte del hardware del dispositivo
DESVENTAJAS:
- Experiencia del usuario más propia de la aplicación web que de la app nativa.

APLICACIONES NATIVAS
El término aplicación nativa hace referencia a una aplicación que puede descargar
e instalar en un dispositivo. Una aplicación móvil nativa se desarrolla
específicamente para un dispositivo móvil. Los términos aplicación nativa,
aplicación móvil nativa y aplicación móvil se suelen usar indistintamente para
referirse al mismo tipo de software.
VENTAJAS:
- Acceso completo al dispositivo
- Mejor experiencia del usuario
- La actualización de la app es constante
DESVENTAJAS:
- Tienden a ser más caras de desarrollar
- El código del cliente no es reutilizable entre las diferentes plataformas.
DIFRENCIAS
Una aplicación híbrida es un tipo concreto de aplicación nativa. Igual que con las
aplicaciones nativas, los usuarios pueden descargar e instalar una aplicación
híbrida desde las tiendas de aplicaciones. Sin embargo, la estructura interna de
las aplicaciones híbridas y nativas es muy distinta. Internamente, las aplicaciones
híbridas se parecen más a las aplicaciones web. Las aplicaciones híbridas se
encuentran entre las aplicaciones web y las aplicaciones nativas.
Desarrollo de aplicaciones
En una aplicación nativa, los desarrolladores tienen que reescribir y rediseñar toda
la funcionalidad de la aplicación con el lenguaje de desarrollo nativo. Una
aplicación híbrida permite escribir la funcionalidad de la aplicación con un solo
código base. A continuación, puede incluir el código en un contenedor o shell de
aplicación nativa ligero. El contenedor le permite aprovechar las características
nativas de los dispositivos móviles, como hardware, calendarios y notificaciones.
Rentabilidad
Las aplicaciones híbridas tienen el mismo rendimiento y la misma experiencia de
usuario que las aplicaciones nativas, pero con un costo inferior. Los
desarrolladores pueden crearlas con tecnologías y lenguajes de desarrollo de
aplicaciones de uso común, como JavaScript, CSS y HTML5. A continuación,
pueden integrarlas con marcos de desarrollo de aplicaciones híbridas, como Ionic,
Cordova o React Native. Tanto el tiempo como el costo de desarrollo son
inferiores, pero puede subirlas igualmente a una tienda de aplicaciones para
obtener el mismo alcance y la misma visibilidad.
ECOSISTEMAS DE LOS DISPOSITIVOS MOBILES
El ecosistema de dispositivos móviles (o ecosistema de productos) permite a una
compañía mejorar el valor de su teléfono inteligente a través de la integración de
otros elementos. Para ello, hacen que otras aplicaciones puedan usar su interfaz
central y, así, mejoran a este último.
Otra ventaja de esos ecosistemas reside en que facilitan al usuario la utilización de
todos esos productos. Al estar interconectados, resulta muy fácil pasar de uno a
otro y, del mismo modo, al complementarse le ofrecen mejores prestaciones.
Gracias a todo ello, las compañías fidelizan a sus clientes. Precisamente en los
ecosistemas creados, respectivamente, por Motorola, Samsung y Apple se
integran sus aplicaciones o funciones de intercambio de archivos.
QUÉ ES UN IDE PARA PROGRAMACIÓN
Un IDE (Entorno de Desarrollo Integrado) es una herramienta de software que
proporciona un entorno de programación completo para los desarrolladores de
software. Este conjunto de herramientas es utilizado para ayudar al desarrollo de
software desde un mismo techo.
Los programadores las emplean para escribir, probar y depurar sus programas de
acuerdo con normas precisas. Para esto, incluye diferentes herramientas como
editores de texto, depuradores o interfaces visuales adaptadas a varios lenguajes
de programación.
En su esencia más básica, un IDE es un editor de texto. Aquí tienes algunos
ejemplos de archivos que puedes editar con un IDE:
  .txt
 . json
 .js
 .ts
 .java
 . kt
 .md
 .html
También puede ser una aplicación independiente que sirve de entorno para otras
herramientas basadas en la línea de comandos, como compiladores e intérpretes.
Características y Componentes de un IDE
Un IDE usualmente está compuesto por:
Un editor de código
Herramientas de automatización
Depurador o debugger
La mayoría de los IDEs modernos ahora cuentan con un completador de código
inteligente. El caso más sonado de esta funcionalidad es el nuevo Github Copilot,
que usa inteligencia artificial para ayudarte a terminar tu código.
Adicionalmente, algunos IDE contienen un compilador, un intérprete o ambos. El
límite entre un entorno de desarrollo integrado y otras partes del entorno de
desarrollo de software más amplio no está claramente definido. A veces se integra
un sistema de control de versiones (como GIT), o varias herramientas para
simplificar la construcción de una interfaz gráfica de usuario (GUI).
Ejemplos de IDE más populares
Algunos IDE más populares entre los programadores son:
 Visual Studio Code
 Sublime Text
 Atom
 Vim
 Eclipse
 Android Studio
 NetBeans
 JetBrains IntelliJ
 Apple Xcode
 Komodo
Elaboración de interfaz gráfica y mapa de navegación cumpliendo con reglas
de usabilidad y accesibilidad app móvil GA5-220501095-AA1-EV07.

INTRODUCCION
Hay que tener en cuenta requisitos funcionales y no funcionales para llevar a cabo
un adecuado análisis y programación del software que construiremos para la
empresa JAIME DUQUE, ya que el área más extensa será la de facturación se
deberán realizar protocolos de seguridad, tiempos, un funcionamiento ágil, que el
software tenga una fácil interacción con el cliente u usuario, teniendo en cuenta y
agregando que se deben aclarar al cliente algunas restricciones sobre el producto
que se está ofreciendo.
PERSPECTIVA DEL PRODUCTO
Teniendo en cuenta el software que se realizara, se tiene como perspectiva un
funcionamiento integro en el cual el cliente pueda suplir todo el trabajo manual que
se está realizando en la empresa JAIME DUQUE, en el área de contabilidad en la
cual se evidencio como núcleo de la empresa, al igual reducir trabajo en el área de
bodega la cual esta enlazada con contabilidad en el tema de facturación, el
producto será un beneficio practico, ya que realizara funciones relacionado con
nomina, facturación y control del personal que tiene la empresa.
FUNCIONES DEL PRODUCTO
El producto tendrá 03 usuarios los cuales tendrán como nombres, facturación
en el cual tendrá la potestad total del sistema, en el cual podrá subir facturas a
la nube, crear usuarios, enviar facturación con todo los protocolos de la DIAN,
descargar facturas, tendrá el otro usuario llamado bodega en el cual solo podrá
subir facturas y tendrá la opción de revisar que facturas tiene en su nube de
almacenamiento, y otro usuario llamado gerencia en el cual por petición del
dueño de la empresa solo tendrá la opción de visualizar que consiste en tener
un listado de todas las facturas que se han subido a la nube con su respectivo
orden, este producto tendrá como objetivo minimizar el trabajo manual que se
esta llevando y reemplazar el software que en el momento se encuentra
obsoleto.

CARACTERISTICAS DE LOS USUARIOS

 Usuario de contabilidad
Sera el usuario principal el cual tendrá control de los dos usuarios más que
tendrá el producto, solo este usuario tendrá la potestad de modificar,
descargar, enviar, bloquear, crear usuarios.

 Usuario de gerencia
Solo podrá visualizar todo lo que contabilidad y bodega manejan en el
producto no podrá modificar nada de la interfaz.

 Usuario de bodega
Podrá realizar cargue de facturas las cuales son cruzadas con el área de
contabilidad y tendrá un listado para ver sus facturas.
RESTRICCIONES
Se aclara que el producto que se realizara al cliente JAIME DUQUE, será
específicamente para el área de facturación principalmente, teniendo en cuenta
que facturación tiene un lazo con bodega; se le creara un usuario, y por tema
del dueño de la empresa anteriormente mencionada también se le creara un
usuario. Aclarando se realizará un producto de tres usuarios con
funcionalidades de facturas, creación de usuarios, listados de facturas, envió
de contabilidad, de igual forma el código es expresamente de la empresa
SISTEMAS JJ, en lo consecuente no se podrá facilitar para otra empresa o
área, de exclusividad de JAIME DUQUE y áreas anteriormente descritas.
 PROTOTIPOS DE APP MOVIL

FACTURACION
BODEGA
GERENCIA
MAPA DE NAVEGACION
BIBLIOGRAFIA

https://www.occamagenciadigital.com/blog/diseno-de-aplicaciones-usabilidad-y-
experiencia-de-usuario
https://es.ryte.com/wiki/Usabilidad_M%C3%B3vil
https://digitalinnovationnews.es/aplicaciones-independientes/#:~:text=Las
%20Aplicaciones%20Independientes%20aplican%20el,de%20las%20tecnolog
%C3%ADas%20BPM%20para
https://www.computerweekly.com/es/definicion/Aplicacion-hibrida-o-app-hibrida
https://aws.amazon.com/es/compare/the-difference-between-web-apps-native-
apps-and-hybrid-apps/#:~:text=El%20t%C3%A9rmino%20aplicaci%C3%B3n
%20nativa%20hace,e%20instalar%20en%20un%20dispositivo.
https://player8.org/ecosistemas-de-dispositivos-moviles-ventajas-y-desventajas/
https://platzi.com/blog/que-es-ide-editor-de-texto/