Descripción: Se busca proporcionar una comprensión sólida de Git como software de control de versiones y GitHub como plataforma, junto con análisis y diseño de funcionalidades, así como maquetación con Figma, abarcando desde comandos básicos de Git, funcionalidades de GitHub hasta la creación de prototipos UI móviles con Figma.
Conceptos: control de versiones, git, github, maquetacion web, maquetacion movil, figma, proyecto informático.
-
Introducción a Git y GitHub
- Introducción al control de versiones
- Comandos básicos de Git
- Configuraciones básicas de Git
- GitHub como plataforma
- Breve vistazo
- Repositorio de ayudantía
- Proyecto de ayudantía
- Crear cuenta GitHub
- Canjear beneficios de estudiante
- Introducción al control de versiones
-
Análisis y diseño de funcionalidades
- Analizar problemática a atacar
- Analizar y describir funcionalidades de un sistema web/móvil
-
Maquetación con Figma
- Introducción a Figma
- Crear cuenta en Figma
- Funcionalidades básicas
- Maquetación de pantallas móviles
- Prototipado
- Crear prototipo UI móvil
- Introducción a Figma
Git es un sistema de control de versiones distribuido, que permite llevar un registro de los cambios en los archivos de un proyecto, así como coordinar el trabajo entre varias personas. Utiliza el concepto de repositorios para almacenar los archivos y su historial de cambios, y ramas para trabajar en paralelo.
Los comandos básicos de Git son:
| Comando | Descripción | Ejemplo |
|---|---|---|
git init |
Inicializa un repositorio Git en el directorio actual | git init |
git status |
Muestra el estado actual del repositorio | git status |
git clone |
Clona un repositorio remoto en el directorio actual | git clone https://ruta-a-repositorio |
git add |
Agrega archivos al área de preparación | git add . |
git commit |
Guarda los cambios en el repositorio | git commit -m "Mensaje de commit" |
git push |
Sube los cambios al repositorio remoto | git push origin main |
git pull |
Descarga los cambios del repositorio remoto | git pull origin main |
GitHub es una plataforma de desarrollo colaborativo que utiliza Git como sistema de control de versiones. Permite alojar proyectos de software, control de versiones y colaboración. Además, ofrece funcionalidades como issues, pull requests, actions, pages, projects, wiki, security, entre otros.
| Nombre repositorio | Descripción | Enlace |
|---|---|---|
ayudantia-ici4247-012024 |
Repositorio con el proyecto de ayudantía | Ir al repositorio |
proyecto-base-ici4247 |
Repositorio con el template del proyecto base para desarrollar | Ir al template |
ICI4227 - Ayudantía |
GitHub Project de la ayudantía | Ir al proyecto |
Para crear una cuenta en GitHub, se debe seguir los siguientes pasos:
- Ingresar al registro en GitHub.
- Completar el formulario de registro.
- Verificar la cuenta a través del correo electrónico.
- Canjear los beneficios de estudiante con el correo institucional, siguiendo los pasos en GitHub Education.
Figma es una herramienta de diseño de interfaces de usuario (UI) y experiencia de usuario (UX) basada en la web. Permite a los diseñadores, desarrolladores y equipos de trabajo crear, colaborar y presentar prototipos de diseño de aplicaciones web y móviles.
Para crear una cuenta en Figma, se debe seguir los siguientes pasos:
- Ingresar al registro en Figma.
- Completar el formulario de registro.
- Verificar la cuenta a través del correo electrónico.
- Comenzar a utilizar Figma.
Los conceptos básicos de Figma son:
-
Estructura
- Página (Page): Es el contenedor principal de un archivo de Figma. Un archivo puede tener múltiples páginas, y estas pueden estar anidadas entre sí. La versión gratuita de Figma permite tener hasta 3 páginas por archivo.
- Frame: Es el contenedor principal de un archivo de Figma. Es el espacio en dónde se pueden crear los diseños y prototipos. Un archivo puede tener múltiples frames, y estos pueden estar anidados entre sí.
- Section: Es un contenedor de elementos dentro de un frame. Permite agrupar elementos de manera lógica, y facilita la organización de los elementos dentro de un frame.
- Componente: Es un elemento que puede ser reutilizado en múltiples frames. Permite mantener la consistencia de los elementos en un diseño, y facilita la actualización de los mismos. Por ejemplo, si se tiene un componente "padre" de un botón, y se actualiza el color de fondo del botón, todos los botones que utilicen ese componente (hijos) se actualizarán automáticamente. Cabe destacar que los componentes hijos pueden tener propiedades que los diferencien de los componentes padres, como por ejemplo, el texto que contienen, y no se verán afectados por los cambios realizados en el componente padre.
-
Elementos
- Formas: Son elementos básicos que permiten crear diseños y prototipos. Pueden ser de distintos tipos, como por ejemplo: rectángulos, círculos, triángulos, etc.
- Textos: Son elementos que permiten agregar texto a un diseño o prototipo. Pueden ser de distintos tipos, como por ejemplo: títulos, subtítulos, párrafos, etc.
- Imágenes: Son elementos que permiten agregar imágenes a un diseño o prototipo. Pueden ser de distintos tipos, como por ejemplo: imágenes, íconos, etc.
-
Prototipado
- Flow: Es la navegación entre las distintas vistas de un prototipo. Por ejemplo, si se tiene un prototipo de una aplicación web, y se tiene una vista de login, y una vista de registro, el flow sería la navegación entre la vista de login y la vista de registro.
- Hotspot: Es un elemento que permite simular la interacción con un elemento de un prototipo. Por ejemplo, si se tiene un prototipo de una aplicación web, y se tiene una vista de login, y una vista de registro, se puede agregar un hotspot en el botón de "Registrarse" de la vista de login, que permita navegar a la vista de registro.
- Link: Es un elemento que permite simular la interacción con un elemento de un prototipo. Por ejemplo, si se tiene un prototipo de una aplicación web, y se tiene una vista de login, y una vista de registro, se puede agregar un link en el botón de "Registrarse" de la vista de login, que permita navegar a la vista de registro.