Haz clic para llenar formulario (Todos los Grupos)
Conoce los Acuerdos de Académia
👨💻 Desarrollo del maquetado con Moqups
En esta etapa de sexto semestre, aprenderás a utilizar Moqups para crear el ecosistema visual de tu aplicación. Aquí no solo diseñarás pantallas; activarás tu visión estratégica y tu atención al detalle para transformar una idea abstracta en un esquema funcional sólido, la idea que tenemos en nuestra mente hacerla posible a traves del manejo de objetos. Al explorar este entorno, implementarás habilidades de arquitectura de información y diseño de experiencia de usuario (UX), utilizando herramientas clave que harán que tu proyecto destaque:
🚀 ¡Es momento de prototipar como un profesional!
🔖 Stencils & Widgets: Dominarás la biblioteca de componentes inteligentes (botones, barras de búsqueda, interruptores) para dar forma a la interfaz en segundos.
🔖 Interactividad y Hotspots: Aprenderás a crear enlaces entre pantallas para simular el flujo real de navegación, permitiéndote probar la lógica de tu app antes de tocar un solo bloque.
🔖 Iconografía y Tipografía: Utilizarás fuentes y sets de iconos integrados para garantizar una estética coherente y moderna.
🔖 Grillas y Guías de Precisión: Entrenarás tu ojo para la alineación perfecta, asegurando que cada elemento esté exactamente donde debe estar.
Dominar estas funciones te permitirá establecer un plano maestro de diseño. Recuerda: la disciplina y creatividad que apliques hoy en Moqups serán la garantía de que tu construcción final en Kodular sea fluida, profesional y visualmente impactante. ✨📱
A continuación se presenta un cuadro con tres pestaña de las cuales se diversifica la información relacionada a la práctica, entrega de producto y retroalimentación que realizaras en esta semana, considera que para desplazarte de manera correcta solo basta con dar clic en cada una de ellas para ver el contenido que el profesor te facilita para desarrollar el material electrónico solicitado.
El estudiante iniciará un maquetado en el sitio web Moqups con el propósito de desarrollar habilidades en el manejo de objetos, menús y cuadros de diálogo. La meta es diseñar una propuesta innovadora para el nivel preescolar en la asignatura de inglés, dirigida a niños que interactúan con el reconocimiento de colores en ese idioma. La finalidad es crear dicho diseño a traves de metricas estandarizadas y adaptarlo posterioremnte a una una aplicación que garantice un aprendizaje significativo y duradero.
Instrucciones I: Accede al sitio web Moqups a través del enlace: https://moqups.com/es/ con tu navegador web preferente. Al estar dentro del portal se tendrá que crear y/o asociar por necesidad de trabajo tu cuenta de correo electrónica institucional, para lograrlo tendrásque dar un clic en la parte superior derecha Iniciar sesión, tal como se observa en la ilustración inferior:
Cuando se haya realizado un clic observaras la ventana que te indicara el procedimiento para vincularte con tu cuenta del Colegio de Bachilleres (No es necesario crear una cuenta en el sitio web), simplemente selecciona la opción “Iniciar sesión con Google” tal como se señala en la ilustración del lado izquierdo.
NOTA. Solo en el caso de que tu cuenta institucional no funcione tendras que hacer el proceso con tu cuenta personal
La importancia de crear una cuenta es de almacenar el material que se desarrollara, recuerda que solo tienes la oportunidad de crear dos diseños por cuenta asociada de manera gratuita.
Una vez que hayas accedido con tus credenciales de Usuario y Contraseña, podrás desarrollar el contenido solicitado por tu profesor es decir un nuevoproyecto, es importante señalar que encontraras la opción básica que es un “Proyecto en Blanco”, con el que comenzaremos a trabajar pero también el mismo entorno de inicio te da la oportunidad como usuario de seleccionar una plantilla dependiendo de la integridad del desarrollo de la App, por lo que encontraras diversos Wireframes gratis y de prepago destinados para desarrollo de lógica de Negocios, Diagramas de Flujo de Datos y Maquetados Diversos.
Como lo indique anteriormente comienza seleccionando la opción Popular + Proyecto en Blanco, tal como se observa en la ilustración de la parte inferior.
Al acceder encontrar la interfaz grafica de desarrollo diversificada en distintas columnas cuyos contenedores con nombres exclusivos muestran un sin número de herramientas adaptadas con diversos objetos que se pueden plasmarde manera Drag and Drop (arrastrado y soltando), sobre el área de trabajo quese puede representar como hoja blanca o de forma de celular obteniendo el objeto, te recuerdo que como se esta trabajando con una cuenta gratuita algunos de los objetos y funciones que se pudiesen implementar estarán con opción depago, por lo que no podremos acceder a ellas, pero eso no importara ya que el diseño de las aplicaciones que desarrollaremos serán de manera básica, acontinuación se te muestra una pantalla.
Este icono te ayudara a designar un nombre al proyecto y a su vez indicará el número de página, donde te encuentras ubicado da el indicativo si tu proyecto está siendo creado de manera privada y si lo desbloqueas puedes compartirlo para que otro usuario distinto a ti pueda accedera tu desarrollo este icono te dará acceso general a la aplicación de Moqups para ver todos tus proyectos o algunas otras funciones. En la siguiente barra encontraras algunos de los contenedores principales quetraen consigo variadas herramientas para desarrollar el contenido de objetos necesarios con los cuales contara la aplicación del móvil y con los que interactuara el usuario final.
En la siguiente barra encontraras algunos de los contenedores principales que traen consigo variadas herramientas para desarrollar el contenido de objetos necesarios con los cuales contara la aplicación del móvil y con los que interactuaras al momento de maquetar.
Iconografía Movil. - En este punto encontraremos objetos que nosservirán para controlar la información que se suministrara aldispositivo móvil, objetos como botones, combo box, etiquetas,botones de radio, cajas de selección, tablas, imágenes, etc...
Paginas – Mostrar el total de páginas utilizadas por el usuario final,es decir que si el proyecto es demasiado amplio se puede diversificarel proyecto creando secciones de este.
Capas – Una vez que se insertan uno o más objetos al proyectoen este lugar el usuario final podrá cambiar el nombre, enviar hacia adelnate o atras en relación a otros objetos integrados al espacio de trabajo, así mismo hacerlos visibles u ocultarlos.
Plantillas – Aquí el usuario puede disponer de la creación deplantillas existentes, organizarlas en folders y/o contenedores oborrarlas.
Imágenes – Todo objeto externo que se quiera conectar al diseño dela App, se podrá realizar subiendo contenido en formato de imagen*.png o *.bmp, según desee el usuario final.
Iconos. – El usuario tiene la libertad de seleccionar variados tipos deiconos a su desarrollo, donde estos están ajustados por categoríaspara su correcta disposición.
Comentarios. – El usuario puede categorizar diversos comentariosdel funcionamiento de los objetos de la App en desarrollo.
Mediante está ventana que estará en constate cambio dependiendo de los objetos a insertar en la plataforma de desarrollo de la App en Moqups, el usuario final puede arrastra y soltar el objeto que deseé en el área de trabajo, para colocarlo en la mejor forma según convenga al diseño.
En la imagen del extremo de la derecha aparecerá el avatar del usuario según lo personalices, así mimo aparecerá el tipo de plan que se estará utilizando y una barra de incremento de los objetos utilizados que si los excedes estara solicitándote la versión de pago para continuar con el servicio o-line.
La barra que se muestra en la parte superior tiene diversas opciones de menú, con la finalidad de incorporar geometrías extras al diseño de tu App, Notas, Compartir la publicación entre otros, en la parte inferior se definen detalles y contenido de los mismos.
Es muy importante que la opción de Sharing “Compartir”, será pieza fundamental para que tu profesor acceda al diseño de tu App, mediante ellink de carácter público que se genere, es por ello que será muy necesarioatender con cuidado la siguiente ilustración si es que dispones de hacerlo.
Es imperativo modificar esta opción a la que se muestra enpantalla para que el enlace cualquier persona lo pueda ver...
Esta opción permitirá abrir tu diseño de manera full, es decir en pantalla completa.
En esta serie de opciones que se muestra en la parte de la superior derecha de la interfaz gráfica, encontraras eventos de actualización de pago, especificaciones del tipo de formato de la hoja de trabajo.
como dimensiones de alto, ancho, color de fondo entre otros, interacciones para la creación de prototipos en función a la experiencia del usuario y un preview es decir una vista previa del trabajo desarrollado porcompleto, esto es muy útil cuando ya se haya terminado de realizartodos el prototipo.
NOTA. Se recomienda al usuario tener activa la rejilla para mejorar el posicionamiento de los objetos al momento de construir el prototipo, lo anterior da certeza a la correcta alineación vertical y horizontal de los componentes.
Ventana de Propiedades. - Esta ventana estará en constante cambio en función del objeto que se este seleccionando en el momento, aquí es donde el usuario pude interactuar con atributos muy específicos de cada objeto como, cambio de nombre, colores,anchura, colores y tipos de bordes, tipografía con variados efectos especiales, tipos de vistas, agrupación y posición de objetos, entre otros, en la parte de la izquierda se te comparte una ilustración reerente a la selección de un cuadro de texto y emancipa todas y cada una de sus propiedades que puedes personalizar.
Finalmente, al centro de la GUI (Interfaz Gráfica de Usuario), tendremos el área de trabajo que en su momento se presentara como una hoja de color blanco que pude personalizar elusuario final según convenga en cuanto a color de fondo, ancho y largo, para el desplazamiento vertical y horizontal cuenta con los scroll ́s populares (Superior- Inferior) e (Izquierdo -Derecho).
Instrucciones II. Maquetado de la 1er. App
1. Una vez que el profesor te mostro la forma de como darte de alta en el sitio web y de haber realizado un reconocimiento de la aplicación estarás listo paracomenzar a maquetar tu 1er. App.
2. Considera que para hacerlo deberás arrastrar diversos objetos al área de trabajo y de integrar las ilustraciones convenidas, las cuales son muy necesarias para colocarlas a manera de encabezado y pie de página.
IMPORTANTE... La App se llamará “Proyecto de Colores”, por lo que te recomiendo que para su realización identifiques los objetos que se presentan en la ilustración inferior, para que tú mismo logres crear el concepto de diseño en la Interfaz y te familiarices con la inserción de los mismos, por otro lado, es importante aclarar que se recomienda que los tipos de colores y tipo de fuentes, así como el color de fondo del proyecto, están totalmente a tu cargo es decir, a gusto del usuario, con la finalidad de diferenciarlos con respecto a los demás compañeros de clase y muy importante se comparta tu proyecto a traves de este sitio web, en la sección "Sube tu Archivo"
