FrexusActividad diagnostica
Objetivo:Identificar los conocimientos previos de los estudiantes en HTML, CSS y lógica básica de diseño web.Instrucciones:Crea una página web simple con un archivo index.html.La página debe contener:Un título principal con tu nombre.Un párrafo donde describas qué entiendes por "aplicaciones web progresivas".Una lista (puede ser ordenada o no ordenada) con 3 aplicaciones web que uses en tu día a día.Una imagen (puede ser de internet o de tu computadora).Aplica algo de estilo con CSS interno o...
FrexusApp móvil con CRUD conectado a servidor LAMP
Objetivo generalDesarrollar una app móvil en React Native (Expo) capaz de conectarse a una API PHP que realiza operaciones CRUD sobre una tabla en MySQL, todo dentro de una red local.Herramientas necesariasMySQ: Base de datosPHP (Apache o XAMPP): API en backendReact Native + ExpoApp: móvil frontendPostman (opcional): Prueba de endpoints APIVS Code: Editor de códigoExpo Go: Pruebas en el móvil (iOS/Android)Parte 1: Crear la base de datosEn phpMyAdmin o línea de comandos de MySQL:CREATE DATABAS...
FrexusLa señal que nunca llegó
Lucas tenía una visión: crear una app que ayudara a pequeños productores locales a vender sus cosechas directamente a consumidores urbanos. Nada de intermediarios, solo conexión. La llamó Raíz. Desde su pequeño estudio en Oaxaca, con más corazón que presupuesto, construyó una app limpia, intuitiva y optimista. El diseño estaba listo. Las funciones estaban listas. Los productores estaban listos. Solo faltaba que el mundo se conectara con ella. El día del lanzamiento fue como un amanecer. Lucas...
FrexusActividad diagnostica
Objetivo:Identificar los conocimientos previos de los estudiantes en HTML, CSS y lógica básica de diseño web.Instrucciones:Crea una página web simple con un archivo index.html.La página debe contener:Un título principal con tu nombre.Un párrafo donde describas qué entiendes por "aplicaciones web progresivas".Una lista (puede ser ordenada o no ordenada) con 3 aplicaciones web que uses en tu día a día.Una imagen (puede ser de internet o de tu computadora).Aplica algo de estilo con CSS interno o...
FrexusApp móvil con CRUD conectado a servidor LAMP
Objetivo generalDesarrollar una app móvil en React Native (Expo) capaz de conectarse a una API PHP que realiza operaciones CRUD sobre una tabla en MySQL, todo dentro de una red local.Herramientas necesariasMySQ: Base de datosPHP (Apache o XAMPP): API en backendReact Native + ExpoApp: móvil frontendPostman (opcional): Prueba de endpoints APIVS Code: Editor de códigoExpo Go: Pruebas en el móvil (iOS/Android)Parte 1: Crear la base de datosEn phpMyAdmin o línea de comandos de MySQL:CREATE DATABAS...
FrexusLa señal que nunca llegó
Lucas tenía una visión: crear una app que ayudara a pequeños productores locales a vender sus cosechas directamente a consumidores urbanos. Nada de intermediarios, solo conexión. La llamó Raíz. Desde su pequeño estudio en Oaxaca, con más corazón que presupuesto, construyó una app limpia, intuitiva y optimista. El diseño estaba listo. Las funciones estaban listas. Los productores estaban listos. Solo faltaba que el mundo se conectara con ella. El día del lanzamiento fue como un amanecer. Lucas...
Subscribe to Frexus
Subscribe to Frexus
Share Dialog
Share Dialog
<100 subscribers
<100 subscribers
Objetivo: Diseñar y prototipar una pantalla de inicio de sesión para una aplicación móvil, demostrando el flujo de usuario y los elementos interactivos básicos, utilizando el software gratuito y de código abierto Pencil.
Recurso indispensable: Antes de iniciar, asegúrate de tener instalado el programa Pencil. Si aún no lo tienes, sigue las instrucciones de descarga e instalación detalladas en este enlace:
https://www.frexus.dev/articulo/pencil-y-el-diseno-web/
Se Va a diseñar las pantallas clave de una aplicación móvil para un club de lectura ficticio. El objetivo es que un usuario pueda iniciar sesión y ser dirigido a la página principal. No nos enfocaremos en la estética, sino en la funcionalidad y el flujo.
Paso 1: Configuración del Lienzo (Canvas)
Abre el programa Pencil.
En la columna izquierda, en el panel de "Collections" (Colecciones), busca el apartado iOS GUI o Android GUI. Si no lo ves, haz clic en el ícono de colecciones (dos carpetas) en la parte superior para buscar y agregar la colección adecuada.
Desde la colección de iOS o Android, arrastra el iPhone 6 (o cualquier otro modelo de teléfono) a tu área de trabajo. Este será el lienzo (canvas) sobre el que construiremos nuestro diseño.
Paso 2: Creación de la Pantalla de Inicio de Sesión
Barra Superior (Header): Busca en la colección de GUI una barra de título o "Header" y arrástrala a la parte superior de tu lienzo. Cambia el texto a "Iniciar Sesión". Puedes hacer esto haciendo doble clic en el texto o modificándolo en el panel de "Properties" (Propiedades) de la derecha.
Título de la Aplicación: En la colección de "Common Shapes" (Formas Comunes), arrastra un Text (Texto) y colócalo en el centro de la pantalla. Escribe el nombre de nuestra app: "El Rincón del Lector".
Campos de Entrada:
Busca en la colección iOS GUI (o Android GUI) el componente Input Text (Campo de Texto).
Arrastra dos de estos campos al lienzo.
En el panel de propiedades, en la sección de "Text", cambia el texto del primer campo a "Usuario" o "Correo electrónico" y el del segundo a "Contraseña".
Botón de Acción:
Busca el componente Button (Botón) y arrástralo debajo de los campos de texto.
Cambia el texto del botón a "Entrar".
Otros Elementos:
Agrega un enlace para recuperar la contraseña. Arrastra un componente Link (Enlace) y escribe "Olvidé mi contraseña".
Paso 3: Creación de la Pantalla Principal (Dashboard)
En la parte inferior de tu área de trabajo, haz clic en el ícono "Add New Page" (Agregar nueva página).
Arrastra un nuevo lienzo de teléfono a esta nueva página.
Diseña la Pantalla Principal: Crea una interfaz sencilla para la página de inicio. Por ejemplo:
Una barra superior con el texto "Mi Biblioteca".
Un título central que diga "Bienvenido/a, [Nombre de Usuario]".
Rectángulos que simulen las portadas de libros.
Un botón o enlace que diga "Explorar Libros".
Paso 4: Creación del Flujo Interactivo (Prototipado)
Regresa a la Página 1.
Selecciona el botón que creaste con el texto "Entrar".
En el panel de "Properties" (Propiedades) de la derecha, busca la sección "Link to Page" (Enlazar a página).
Haz clic en el menú desplegable y selecciona la Página 2 (nuestra pantalla principal). Esto crea un enlace interactivo.
Repite el proceso para otros elementos si lo deseas (por ejemplo, el botón de "Explorar Libros" podría ir a una página de búsqueda).
Paso 5: Visualización y Exportación del Prototipo
Para ver tu prototipo en acción, en la barra de herramientas superior, haz clic en el ícono de "Play" (Reproducir) o presiona el botón "Preview" (Vista Previa). El programa te mostrará una versión navegable. Haz clic en el botón de "Entrar" para ver cómo te lleva a la siguiente página.
Para compartir tu prototipo, ve al menú File (Archivo) y selecciona Export (Exportar).
Pencil te permite exportar el prototipo como un archivo PDF o incluso como páginas web HTML. Elige una de estas opciones, guárdala en tu escritorio y ábrela. Verás que los enlaces que creaste son funcionales.
Para más información:
https://www.frexus.dev/post/prototipos-de-aplicaciones-software-exitoso/
Objetivo: Diseñar y prototipar una pantalla de inicio de sesión para una aplicación móvil, demostrando el flujo de usuario y los elementos interactivos básicos, utilizando el software gratuito y de código abierto Pencil.
Recurso indispensable: Antes de iniciar, asegúrate de tener instalado el programa Pencil. Si aún no lo tienes, sigue las instrucciones de descarga e instalación detalladas en este enlace:
https://www.frexus.dev/articulo/pencil-y-el-diseno-web/
Se Va a diseñar las pantallas clave de una aplicación móvil para un club de lectura ficticio. El objetivo es que un usuario pueda iniciar sesión y ser dirigido a la página principal. No nos enfocaremos en la estética, sino en la funcionalidad y el flujo.
Paso 1: Configuración del Lienzo (Canvas)
Abre el programa Pencil.
En la columna izquierda, en el panel de "Collections" (Colecciones), busca el apartado iOS GUI o Android GUI. Si no lo ves, haz clic en el ícono de colecciones (dos carpetas) en la parte superior para buscar y agregar la colección adecuada.
Desde la colección de iOS o Android, arrastra el iPhone 6 (o cualquier otro modelo de teléfono) a tu área de trabajo. Este será el lienzo (canvas) sobre el que construiremos nuestro diseño.
Paso 2: Creación de la Pantalla de Inicio de Sesión
Barra Superior (Header): Busca en la colección de GUI una barra de título o "Header" y arrástrala a la parte superior de tu lienzo. Cambia el texto a "Iniciar Sesión". Puedes hacer esto haciendo doble clic en el texto o modificándolo en el panel de "Properties" (Propiedades) de la derecha.
Título de la Aplicación: En la colección de "Common Shapes" (Formas Comunes), arrastra un Text (Texto) y colócalo en el centro de la pantalla. Escribe el nombre de nuestra app: "El Rincón del Lector".
Campos de Entrada:
Busca en la colección iOS GUI (o Android GUI) el componente Input Text (Campo de Texto).
Arrastra dos de estos campos al lienzo.
En el panel de propiedades, en la sección de "Text", cambia el texto del primer campo a "Usuario" o "Correo electrónico" y el del segundo a "Contraseña".
Botón de Acción:
Busca el componente Button (Botón) y arrástralo debajo de los campos de texto.
Cambia el texto del botón a "Entrar".
Otros Elementos:
Agrega un enlace para recuperar la contraseña. Arrastra un componente Link (Enlace) y escribe "Olvidé mi contraseña".
Paso 3: Creación de la Pantalla Principal (Dashboard)
En la parte inferior de tu área de trabajo, haz clic en el ícono "Add New Page" (Agregar nueva página).
Arrastra un nuevo lienzo de teléfono a esta nueva página.
Diseña la Pantalla Principal: Crea una interfaz sencilla para la página de inicio. Por ejemplo:
Una barra superior con el texto "Mi Biblioteca".
Un título central que diga "Bienvenido/a, [Nombre de Usuario]".
Rectángulos que simulen las portadas de libros.
Un botón o enlace que diga "Explorar Libros".
Paso 4: Creación del Flujo Interactivo (Prototipado)
Regresa a la Página 1.
Selecciona el botón que creaste con el texto "Entrar".
En el panel de "Properties" (Propiedades) de la derecha, busca la sección "Link to Page" (Enlazar a página).
Haz clic en el menú desplegable y selecciona la Página 2 (nuestra pantalla principal). Esto crea un enlace interactivo.
Repite el proceso para otros elementos si lo deseas (por ejemplo, el botón de "Explorar Libros" podría ir a una página de búsqueda).
Paso 5: Visualización y Exportación del Prototipo
Para ver tu prototipo en acción, en la barra de herramientas superior, haz clic en el ícono de "Play" (Reproducir) o presiona el botón "Preview" (Vista Previa). El programa te mostrará una versión navegable. Haz clic en el botón de "Entrar" para ver cómo te lleva a la siguiente página.
Para compartir tu prototipo, ve al menú File (Archivo) y selecciona Export (Exportar).
Pencil te permite exportar el prototipo como un archivo PDF o incluso como páginas web HTML. Elige una de estas opciones, guárdala en tu escritorio y ábrela. Verás que los enlaces que creaste son funcionales.
Para más información:
https://www.frexus.dev/post/prototipos-de-aplicaciones-software-exitoso/
Puedes añadir una forma de Rectangle (Rectángulo) y, dentro, una imagen para darle un toque visual a la pantalla.
Puedes añadir una forma de Rectangle (Rectángulo) y, dentro, una imagen para darle un toque visual a la pantalla.
No activity yet