lunes, 16 de marzo de 2026

Tp N° 2 -AAT Diseño UI/UX Mockup Figma

  1. UI (User Interface)

La UI es la interfaz visual del sistema: todo lo que el usuario ve y con lo que interactúa.

Incluye:

  • botones

  • formularios

  • menús

  • colores

  • tipografía

  • íconos

  • tablas

  • tarjetas

Ejemplo en un sistema:

Pantalla de login con:

  • campo email

  • campo contraseña

  • botón "Iniciar sesión"

Todo eso es UI.

  1. UX (User Experience)

La UX es la experiencia del usuario al usar el sistema.

No se trata tanto de lo visual, sino de:

  • qué tan fácil es usarlo

  • si el usuario entiende qué hacer

  • cuántos pasos necesita

  • si el flujo es lógico

Ejemplo:

Sistema A:
5 pantallas para registrar un cliente.

Sistema B:
1 pantalla simple para registrar cliente.

El sistema B tiene mejor UX.

  1. Mockup

El mockup es el diseño visual final de la pantalla.

Incluye:

  • colores

  • tipografía

  • iconos

  • espaciados

  • estilos

                                  Photo by Mariia Shalabaieva on Unsplash 

Figma es una herramienta para:

  • Diseñar interfaces de usuario (UI)  Mockups

  • Crear prototipos navegables

  • Colaborar con diseñadores y desarrolladores

  1. Conceptos básicos

Los 5 conceptos principales de Figma son:

  1. Frame
    Es como una pantalla.

Ejemplo:

  • pantalla de login

  • pantalla de dashboard

  1. Shapes (formas)
    Rectángulos, círculos, líneas.

  1. Text
    Para agregar textos a la interfaz.

  2. Components
    Elementos reutilizables.

Ejemplo:

  • botón

  • navbar

  • input

  1. Auto Layout
    Sirve para que los elementos se acomoden automáticamente, parecido a Flexbox en CSS.

    Ejercicio

    Diseñar los mackup de su sitio web en Figma (teniendo en cuenta los wideframes diseñados en el tp anterior)

     Ejemplo de secciones de un sitio web sobre turismo serián: restaurantes, museos, con

viernes, 31 de octubre de 2025

Sistemas de control de versiones GIT

 Los sistemas de control de versiones (VCS) gestionan y rastrean los cambios de código a lo largo del tiempo, lo que facilita una colaboración eficiente. Registran los cambios en los archivos, permiten revertir a versiones anteriores y mantienen el historial de modificaciones. Pueden centralizarse (Subversion) o distribuirse (Git, Mercurial) para facilitar la colaboración y la integridad del código.

Git

Git es un sistema de control de versiones distribuido.
Esto significa que permite guardar el historial completo de los cambios que se hacen en un proyecto (por ejemplo, un sitio web o una aplicación), y además trabajar en equipo sin perder información.

En palabras simples:

Git registra cada cambio que hacés en tus archivos, para que puedas volver atrás, comparar versiones o colaborar con otros sin sobrescribir el trabajo ajeno.

🧩 Características principales:

  • 📜 Historial completo: Guarda todos los cambios realizados, quién los hizo y cuándo.

  • 🔁 Versiones: Podés volver a versiones anteriores del proyecto.

  • 👥 Trabajo colaborativo: Permite que varias personas trabajen sobre el mismo proyecto y luego integren sus aportes.

  • 🌍 Distribuido: Cada desarrollador tiene una copia completa del repositorio, no solo los archivos actuales sino todo el historial.

  • 💾 Seguridad: Los datos se almacenan y verifican mediante un algoritmo (SHA-1), lo que evita pérdidas o corrupción.

 Sitio oficial: https://git-scm.com/

🌐 ¿Qué es GitHub?

● Plataforma para alojar repositorios Git
● Funciona como red social profesional para desarrolladores
● Permite compartir, revisar y colaborar en proyectos
● Repositorios pueden ser públicos o privados

🛠 Herramientas necesarias

  • Editor de código: Visual Studio Code (recomendado), Atom, Sublime Text
  • Terminal: PowerShell, Terminal (Windows), iTerm (Mac), terminal estándar (Linux)
  • Git: Sistema de control de versiones. Descargar desde git-scm.com

📦 Flujo básico de trabajo

1. Crear repositorio local

git init

2. Crear archivo HTML base

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de HTML para Git</title>
</head>
<body>
  <h1>Estoy aprendiendo Git</h1>
</body>
</html>

3. Verificar instalación de Git

git --version

4. Agregar archivo al área de preparación (stage)

git add ejemplo.html

5. Confirmar cambios (commit)

git commit -m "Mi primer commit"

6. Configurar identidad (si es la primera vez)

git config --global user.name "userGithub"
git config --global user.email "mailasdf@asdf.com"

🔄 Conexión con GitHub

  1. Crear repositorio en GitHub (sin README ni licencia)
  2. Conectar repositorio local con remoto
git remote add origin https://github.com/usuario/repositorio.git
git remote -v

3. Enviar cambios (push)

git push -u origin main

📥 Traer cambios del repositorio remoto

git fetch
git pull
git status

🧪 Revertir cambios y ver historial

git log
git revert SHA

📥 Clonar un repositorio existente

git clone https://github.com/usuario/repositorio.git .

El punto (.) evita crear una subcarpeta adicional.


 

🧠 Conceptos clave

  • Commit: Caja cerrada con cambios, mensaje y firma del autor
  • Stage: Área de preparación antes del commit
  • Push: Envío de cambios al repositorio remoto
  • Pull: Descarga de cambios desde el remoto
  • Fetch: Consulta de cambios sin descargarlos
  • Fork: Copia para modificar sin afectar el original
  • Clone: Descarga para trabajar bajo las reglas del proyecto 

 Ejercicios:

1 Versionar su sitio web

📚 Glosario técnico

TérminoDefinición
RepositorioCarpeta que contiene todos los archivos y el historial de cambios
CommitRegistro de cambios con mensaje y autoría
PushEnvío de cambios al repositorio remoto
PullDescarga de cambios desde el repositorio remoto
FetchConsulta de cambios disponibles sin descargarlos
StageÁrea de preparación antes de confirmar cambios
ForkCopia de un repositorio para modificarlo sin afectar el original
GitHub ActionsAutomatizaciones que se ejecutan sobre el código 

martes, 28 de octubre de 2025

🧩 ABM en PHP y MySQL

¿Qué es ABM?

ABM significa Alta, Baja y Modificación — las operaciones básicas que se realizan sobre los datos en una aplicación.
En términos más generales se lo conoce como CRUD: Create (Alta), Read (Consulta/Listar), Update (Modificación) y Delete (Baja).

  • Alta: crear un nuevo registro en la base de datos.

  • Baja: eliminar un registro existente.

  • Modificación: actualizar campos de un registro.

  • Consulta: leer y mostrar los registros.

     Crear 2 ABM cuyos registros esten conectados a dos paginas de su sitio web

    En inglés se lo conoce como CRUD, por las iniciales de:

    Create (Crear → Alta)

    Read (Leer → Consulta o Listado)

    Update (Actualizar → Modificación)

    Delete (Eliminar → Baja) 

    🧱 Estructura básica de un ABM en PHP y MySQL

    Un proyecto típico se compone de varios archivos:

    Archivo    Función
    conexion.php    Contiene los datos y código para conectar a la base de datos.
    listar.php    Muestra todos los registros de una tabla.
    agregar.php    Formulario para insertar nuevos datos (Alta).
    editar.php    Permite modificar los datos existentes (Modificación).
    eliminar.php    Elimina registros seleccionados (Baja).

martes, 14 de octubre de 2025

🧩 Sesiones en PHP

 🔹 ¿Qué es una sesión?

Una sesión en PHP es una forma de almacenar información del usuario mientras navega por un sitio web, permitiendo que los datos persistan entre diferentes páginas.
Por ejemplo, si un usuario inicia sesión, su nombre o ID puede guardarse en la sesión para identificarlo en las demás páginas sin necesidad de volver a iniciar sesión.

🔹 ¿Por qué usar sesiones?

El protocolo HTTP es sin estado, es decir, cada página que se carga se considera independiente de las anteriores.
Las sesiones permiten mantener un estado entre distintas peticiones.

📌 Ejemplos de uso:

  • Guardar datos de inicio de sesión (usuario autenticado).

  • Mantener un carrito de compras activo.

  • Recordar preferencias del usuario (tema, idioma, etc

🔹 ¿Cómo funcionan?

  • PHP crea un identificador único de sesión (session ID).

  • Ese ID se guarda en una cookie en el navegador del usuario o se pasa por la URL.

  • En el servidor, se guarda un archivo temporal con las variables de sesión.

  • Cada vez que el usuario hace una nueva solicitud, PHP recupera los datos asociados a ese ID.

🔹 Sintaxis básica

🧠 Iniciar una sesión

Antes de usar cualquier variable de sesión, siempre debe iniciarse la sesión con:

    <?php
    session_start();
    ?> 
Debe estar al principio del archivo, antes de cualquier salida HTML.
🧠 Crear variables de sesión
    <?php
    session_start();
    $_SESSION["usuario"] = "Humberto";
    $_SESSION["rol"] = "Administrador";
    echo "Sesión iniciada para " . $_SESSION["usuario"];
    ?>
🧠 Cerrar sesión completamente
    <?php
    session_start();
    session_unset();   // elimina todas las variables
    session_destroy(); // destruye la sesión
    echo "Sesión finalizada";
    ?>

🔹 Ventajas de las sesiones

    Los datos no se envían al cliente (más seguridad que cookies).
    ✅ Son fáciles de usar.
    ✅ Permiten mantener datos de usuario entre páginas.

🔹 Desventajas

    ⚠️ Ocupan espacio en el servidor.
    ⚠️ Se eliminan cuando el navegador se cierra o la sesión expira.
    ⚠️ No son adecuadas para almacenar gran cantidad de información.

Ejercicios

Desarrollar un sistema en PHP e incluirlo en su sitio que:

  1. Permita al usuario admin iniciar sesión.

  2. Acceda a un ABM de usuarios solo si está logueado.

  3. Muestre un botón para cerrar sesión.

  4. Permita al resto de los usuarios iniciar sesión.

  5. Permita al resto de los usuarios acceder a los 2 ABM de su sitio

  6. Muestre un botón para cerrar sesión.