top of page
image.png

👨‍💻 2DA. pROPUESTA DE DISEÑO con Moqups

Imagen_7.png

En este nuevo reto, construirás tu segunda aplicación móvil enfocada en formularios de datos 📝, integrando funciones de ubicación en tiempo real 🛰️ y captura de fotos 📸. Para lograrlo, aplicarás tu experiencia en el maquetado con Moqups 🎨, incorporando componentes como bloques de texto 🔤, imágenes 🖼️, geolocalización 📍 y selectores 🔘, asegurando siempre una interfaz profesional mediante el cuidado extremo en la alineación y el espaciado de cada elemento 📏⚖️. ¡Atrévete a crear una experiencia digital impecable y funcional! 🚀🔥💻

A continuación, se muestra el diseño a desarrollar en la parte de la derecha, considera que los colores que se vayan a implementar quedan totalmente a gusto del usuario solo se te pide ubicar los objetos tal cual como se muestran en la parte de la derecha por otro lado, la obtención de la ilustración (carita) se te comparte en la sección inferior de este material, para que la puedas descarga e incluirla en Moqups. Al terminar el prototipo no olvidar guardar el proyecto con el nombre de: “Formulario de Captura”, para que posteriormente se comparta el material en el formulario de entrega correspondiente en la sección ya conocida. 

Recordándote que para hacerlo de manera correcta tendrás que ajustar algunos cambios de Privados a Públicos realizando los cambios respectivos en la ventana que te aparezca.

Nota: Considera que de acuerdo a tu experiencia en el desarrollo anterior, se seguirá tomando alineación de componentes, posición y creatividad en el diseño, recuerda que él uso de colores puedes decidirlos, pero va a depender mucho el uso de la herramienta de la rejilla para adecuar el lugar de los objetos.

Al obtener el link cópialo y colócalo en el formulario de entrega que se encuentra en la parte inferior, solo se te pide que pegues el link del desarrollo y escribas una breve reflexión de lo aprendido en el desarrollo del diseño.

Considera la Ilustración de la parte de la izquierda para que puedas cambiar y seleccionar los campos correspondientes para compartir de manera adecuada tú prototipo.

🔗 Recurso...

Obtención de la Ilustración de la Imagen para modelar el rostro de la persona capturada en el formulario

😀 Consideraciones para su construcción.

Para elaborar de manera correcta deberás de contemplar el uso de los siguientes objetos de la paleta de componentes Stencils, por lo que se te comparte el propósito que tedrán en el proyecto e ilustración para que los ubiques de manera clara.

Rectángulo: Servirá de nueva a cuenta para colocar el borde del "Encabezado/Pie de Página", sugerido en el prototipo


Title: Elemento que al ser arrastrado al área de trabajo permitirá adecuar el titulo de nuestra App.


Etiqueta: Objeto que utilizaras para a creación de los campos del formulario en cuestión, datos como Nombre, Ap_Paterno, Ap_Materno, Edad, etc... 


Text Input: Herramienta que utilizaras para diseñar el borde de captura del prototipo, esto indica el espacio total que tiene el usuario final para capturar información desde el móvil.


Select: Componente de la paleta de objetos cuyo propósito sera la selección de un solo dato entre varios elementos a los que el usuario puede acceder.


Images: Este elemento forma parte de la paleta de componentes, y deberás insertar las ilustraciones de la "Carita", "Usuario(a)" y respectivos logotipos solicitados, para establecerlo en las secciones de la parte superior derecha e izquierda, ligados al Encabezado y Pie de Página respectivamente.


Boton: Componente fundamental que servirá para plasmar el lugar adecuado de donde el usuario tendrá que crear un evento en particular con el uso de bloques, para abrir el servicio de la "toma de Fotografía", "borrado de Imagen", "Ubicación de Geolocalización" y del "Envió de datos".


Área de Texto: Este elemento será importante solo para el almacenamiento de caracteres de manera masiva (Párrafos), donde se solicitara la captura del domicilio particular de la persona.


Mapa. Simulación que forma parte importante en el desarrollo del prototipo para geolocalizar en tiempo real la ubicación de la persona al usar su dispositivo móvil.

A continuación se muestra el producto terminado en la ilustración de la parte inferior,

👋 Saludos, jóvenes...

Una vez finalizado el maquetado de nuestro siguiente proyecto en Moqups 🚀, habiendo validado la posición, tamaño y tipos de los componentes visibles en el área de trabajo. Cada estudiante deberá Compartir la URL dicho archivo y obtener una impresión de pantalla para guardarla en tu equipo y subirlo a la plataforma indicada para su recepción y revisión integral por parte del profesor.

Para obtener la URL y saber Compartir el diseño elaborado, sigue los siguientes pasos:

1. Selecciona de la barra de iconos de la parte superior el icono de Intercambio o Compartir:

2. Aparecera un cuadro de dialogo  por lo que deberas ajustar la sección "Compartir enlace del Proyecto" y el "Agregado de Personas"

a) Cambiar en el apartado compartir enlace del proyecto a: Cualquiera que tenga el enlace puede verlo, con las opciones en activo de:

🏷️Comience con la Página Actual

🏷️Abrir en modo de Pantalla Completa

🏷️Ajustar la página al Ancho de la Página

NOTA: No olvides Copia y Pega el URL gestionado en el formulario de entega.

b) Capturar en la sección de agregar personas la cuenta institucional del profesor: [israelalejandro.pimentel@bachilleres.edu.mx], validando la opción ¿Puede comentar?, para que despues se de clic en el botón "Compartir", para que después apliques un clic en el boton: "Hecho", tal como se muestra  en la siguiente ilustración.

 

 

 

 

 

 

 

 

 

 

 

3. Utiliza la tecla [Impr Pant], para obtener una imágen completa y guardarla en algúna carpeta de tu PC (Computadora Personal), y compartelo támbien en el formulario de entrega, accediendo con tu cuenta institucional.

NOTA: Recuerda revisar bien con responsabilidad el trabajo a entregar y de su composición, ya que solo cuantas con 1 solo envío.

​​📝 Instrucciones de entrega:

  1. Comienza dando clic con el botón izquierdo del mouse en: "Entregar" 🖱️.

  2. Accederás a un formulario de google que deberás llenar con los siguientes datos:

    • 👤 Nombre

    • 👥 Grupo

    • 🪪 Asignatura*

      • 📲​Desarrollo de Aplicaciones

    • 📄Producto a Entregar*

      • 🔗URL

    • 📤Entrega de Producto​

      • Impresión de pantalla del diseño completo.​

image.png
image.png

Al finalizar el maquetado 👀observa que todas las indicaciones se hayan cumplido de manera satisfactoria para poder acceder a una buena interpretación visible del producto y tener una buena evaluación. Guarda el documento elaborado antes que lo descargues con la siguiente nomenclatura en el sitio de Moqups: 

📑 Diseño de un Formulario de Datos

Se recomienda ampliamente que el estudiante almacene una copia en el sitio web para no perderlo y si se puede descargar a una USB, o en su PC (Computadora Personal), seria bueno como parte de su respaldo personal.

Para realizar la entrega efectiva del documento electrónico deberas acceder con un clic en el siguiente boton:

Colegio de Bachilleres Planel 16 Tláhuac

Manuel Chavarría Chavarría 

Profesor del Área de Informática

Desarrollador: TSU. Israel Alejandro Pimentel García

¡ Somos lobos Grises somos bachilleres !

Clave de Centro de Trabajo (CCT) 09DCB0027Q

Ubicación: San Francisco Tlaltenco, Alcaldía Tláhuac, Ciudad de México.

bottom of page