1. MAPAS DE NAVEGACIÓN de una app móvil

 MAPAS DE NAVEGACIÓN 

DE UNA APLICACIÓN MÓVIL

Crear un mapa de navegación para una aplicación móvil es crucial para asegurar una experiencia de usuario intuitiva y fluida. Esencialmente, un mapa de navegación es un diagrama que visualiza todas las pantallas de tu aplicación y cómo los usuarios pueden moverse entre ellas. 

 Ejemplo DE APLICACIONES

     

1. Entiende a tu Usuario y Define Objetivos

Antes de dibujar cualquier cosa, necesitas saber para quién estás construyendo la aplicación y qué quieres que logre el usuario.

·        ¿Quién es tu usuario?

Cuáles son sus necesidades, sus hábitos, sus intereses.

·        ¿Cuál es el objetivo principal de la aplicación?

Los clientes desean Comprar, aprender, conectar, etc.

·        ¿Cuáles son las tareas clave que el usuario debe poder realizar?

Por ejemplo, si estás diseñando una aplicación de entrega de comida, las tareas clave podrían ser: buscar restaurantes, ver el menú, añadir artículos al carrito, pagar, rastrear el pedido.

2. Haz una Lluvia de Ideas de las Pantallas.

Una vez que tengas claros tus objetivos y usuarios, empieza a listar todas las pantallas que crees que necesitará tu aplicación. No es necesario organizar en orden las pantallas.

Ejemplos de pantallas:

·        Pantalla de inicio/Bienvenida

·        Pantalla de registro/Inicio de sesión

·        Pantalla principal/Dashboard

·        Pantallas de categoría/listado

·        Pantallas de detalle de producto/elemento

·        Pantalla de perfil de usuario

·        Pantalla de configuración

·        Carrito de compras/Checkout

·        Pantalla de búsqueda

·        Pantalla de notificaciones

·        Pantalla de contacto

  

3. Organiza las Pantallas en una Jerarquía Lógica

Aquí es donde empiezas a darle forma a tu mapa. Piensa en cómo las pantallas se relacionan entre sí. La mayoría de las aplicaciones tienen una estructura jerárquica, donde una pantalla principal lleva a sub-pantallas.

Tipos de estructuras de navegación comunes:

• Jerárquica: El usuario navega hacia abajo a través de niveles de información y debe retroceder para subir. Es como un árbol de decisiones.

 

• Plana: Todas las secciones principales son accesibles desde la pantalla principal, usualmente a través de una barra de pestañas (tab bar) o un menú de hamburguesa. El usuario puede cambiar fácilmente entre secciones.

 

 

 

• Secuencial o lineal: El usuario se mueve a través de una serie de pantallas en un orden fijo, como un proceso de registro o un tutorial.

 

 

 

• Matriz: El contenido se organiza en una cuadrícula, y el usuario puede seleccionar elementos de la cuadrícula para ver más detalles.

 

 

• Red: Las páginas o nodos están conectados entre sí de forma mas libre y flexible. No existe orden jerárquico estricto.

Los usuarios pueden saltar de un punto a cualquier otro punto relacionado, creando múltiples caminos de navegación.

 

4. Dibuja el Mapa de Navegación

Puedes usar diversas herramientas para dibujar tu mapa, desde un simple lápiz y papel hasta software especializado.

Herramientas populares:

• Lápiz y papel/Pizarra: Ideal para las primeras etapas, es rápido y flexible.
• Herramientas de diagramación:
• Miro, Figma, Balsamiq, Adobe XD: Excelentes para crear wireframes y flujos de usuario más detallados.

 

 

• Lucidchart, draw.io (diagrams.net): Herramientas generales de diagramación que funcionan muy bien para mapas de navegación.
• Whimsical: Especialmente diseñado para flujos de usuario y mapas mentales.

Elementos a incluir en tu mapa:

• Nombres de las pantallas: Nombra claramente cada pantalla.
• Conexiones/Flechas: Usa flechas para mostrar cómo los usuarios se mueven entre las pantallas.
• Tipos de interacción (Opcional pero útil): Puedes añadir notas sobre cómo se produce la transición (por ejemplo, "tocar", "deslizar", "después de X segundos").
• Puntos de decisión (Opcional): Si hay diferentes caminos que un usuario puede tomar, indícalos.

Ejemplo de un Mapa de Navegación Simple 

para una Aplicación de Recetas

 IR A MIRO

Ejemplo de un Mapa de Navegación 

para una Tienda de Ropa Online

5. Valida y Refina

Una vez que tengas tu mapa, revísalo críticamente:

• ¿Es lógico el flujo? ¿Hay rutas innecesarias o pasos faltantes?
• ¿Puede el usuario encontrar fácilmente lo que busca?
• ¿Existen callejones sin salida? (Es decir, pantallas de las que el usuario no puede salir o avanzar).
• ¿Cubre todos los casos de uso importantes?
• Pruébalo con usuarios reales (incluso si es solo un dibujo): Observa si entienden el flujo y dónde se confunden.

El mapa de navegación es una herramienta viva. Es probable que lo ajustes a medida que desarrolles la aplicación y recibas retroalimentación. Un buen mapa de navegación sienta las bases para una experiencia de usuario sobresaliente.

Pagina web - Redes sociales

PUBLICAR PÁGINAS WEB

REDES SOCIALES

Las redes sociales son cada día más utilizadas por los usuarios y han trasladado a Internet el boca a boca de toda la vida. Según los últimos datos del IV Estudio Anual de Redes Sociales realizado por IAB Spain, asociación que representa al sector de la publicidad, el marketing y la comunicación digital, el 80% de los internautas españoles ya las emplea.

Por todo ello, cualquier empresa con página web debe tener en cuenta la posibilidad de incluir los denominados “botones sociales”, que pueden llegar a multiplicar por siete las visitas a una página web.

Los botones sociales son, por tanto, una forma de promocionar nuestra web y compartir el contenido de nuestro site  a través de las redes sociales más fácilmente y hacerlo a través de cualquier dispositivo, facilitando la interactividad del usuario. Hablamos, por ejemplo, del ‘Me gusta’ de Facebook, el ‘Tweet’ de Twitter, el ‘+1’ de Google+…

A.      COMPARTIR VIDEO DE YOUTUBE

1.       Como primer paso debes hacer clic en icono compartir ubicado debajo del video de YOUTUBE.

2.       Luego debes hacer clic en insertar de la opción compartir un enlace.

3.       El código aparece debajo de Embed Video, como se muestra en la imagen.

4.       Se pueden realizar modificaciones en el tiempo de reproducción y mostrar videos de sugerencia.

5.       Pegar el código generado en tu página web, entre las etiquetas .

B.       COMPARTIR EN FACEBOOK

Para agregar un botón de Facebook

Crear el siguiente código en la página web adecuada, en este caso será redes.html
  La imagen de Facebook debe estar guardada en el mismo lugar que el archivo redes.html

C.       DERECHOS DE AUTOR

El Autor es el titular del Derecho de Autor desde el mismo momento de la creación del recurso Web (artículo, animación, sonido...). Es el simple hecho de su creación, elaboración o composición el que nos confiere la propiedad intelectual sobre el recurso.

DERECHOS MORALES

Son derechos no económicos, personales, sobre el recurso.

·         DERECHO DE DIVULGACIÓN: Facultad del autor de decidir si pública (divulga) su obra (recurso) o no, y en qué forma lo hará.

·         DERECHO DE PATERNIDAD: Derecho de exigir la paternidad, reconocimiento como autor del recurso.

·         DERECHO DE REVELACIÓN Y OCULTACIÓN: El autor puede decidir divulgar una obra con su nombre, con un seudónimo (nick) o signo, o de forma anónima. Esto no quiere decir que renuncie a la autoría de la obra.

·         DERECHO DE INTEGRIDAD: Facultad de impedir cualquier deformación de la obra que pueda perjudicar el honor y reputación del autor. En un entorno como la Web, este derecho cobra especial importancia, debido a la facilidad con la que se pueden manipular y deformar los recursos electrónicos.

·         DERECHO DE ARREPENTIMIENTO Y MODIFICACIÓN: Derecho del autor de retirar la obra del Medio, o modificarla.

DERECHOS PATRIMONIALES

Los Derechos Patrimoniales o de Explotación representan el derecho del autor de beneficiarse económicamente de su producción intelectual.

·         DERECHO DE REPRODUCCIÓN: El autor puede obtener beneficio económico de las reproducciones o copias que se realicen de su obra o recurso. Reproducir o copiar un recurso sin consentimiento del autor es ilegal.

·         DERECHO DE DISTRIBUCIÓN: Puesta a disposición del público del original o copias de la obra mediante su venta, alquiler, préstamo, o de cualquier otra forma.

·         DERECHO DE COMUNICACIÓN PÚBLICA: La comunicación pública es todo un acto por el que una pluralidad de personas puede tener acceso a la obra sin previa distribución de ejemplares a cada una de ellas. La discusión en este sentido sería, ¿puede considerarse la publicación web como Comunicación Pública?.

·         DERECHO DE TRANSFORMACIÓN: Derecho del autor para autorizar y obtener una remuneración por las transformaciones que se hagan sobre la obra, como por ejemplo las traducciones.

PRÁCTICA DIRIGIDA

Copiar el siguiente código para mejorar la presentación de la página web, con el nombre index.html