lunes, 30 de marzo de 2026

Como funciona la web

 1. Los protagonistas de la comunicación

La web opera mediante una interacción constante entre dos entidades:

    El Cliente (Navegador): Representa al usuario. Es el software (Chrome, Safari, etc.) que realiza la petición para ver un sitio web.
    
    El Servidor: Es una computadora remota configurada para alojar los archivos del sitio. Este espera  a que alguien le solicite información para entregarla.

                                           Photo by JJ Ying on Unsplash

2. El Ciclo de Solicitud y Respuesta

Cuando un usuario escribe una dirección en su navegador, se activa una cadena de eventos:

    Búsqueda DNS: El navegador actúa como un buscador que consulta el sistema DNS para traducir el nombre de dominio (ej. midominio.com) a la dirección IP numérica del servidor.

    La Petición (Request): Una vez localizada la IP, el navegador envía una solicitud HTTP al servidor preguntando por el contenido de la página.
    
    Procesamiento : Al recibir la petición, el servidor ejecuta los archivos de escritos en PHP o en el lenguaje de servidor correspondiente. Este sistema consulta una Base de Datos para recuperar el contenido exacto (textos, configuraciones y rutas de imágenes) y ensambla la página en tiempo real.
    
    La Respuesta (Response): El servidor entrega el resultado ensamblado al navegador en forma de código HTML, CSS y JavaScript.
    
    Renderizado: Finalmente, el navegador interpreta ese código y lo traduce en la interfaz visual que el usuario puede leer e interactuar.

Ejercicios

1. Abrir un sitio web desde tu navegador.
Sacar una captura de pantalla.
Responder en base a esa captura:
¿Qué navegador estás usando?
¿Qué URL aparece?

2. Entrar a cualquier sitio web.
Presionar F12 → pestaña Network (Red).
Recargar la página.

Responder:
¿Qué tipo de archivos ves? (mínimo 3 ejemplos reales)
Elegr uno y anotar:
Nombre del archivo
Tipo (HTML, CSS, JS, etc.)
Sacar captura


lunes, 16 de marzo de 2026

Tp N° 3 -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 

 Diseño en Figma

Una vez definidos los bocetos, se pasa al diseño digital usando Figma una herramienta gratuita que permite crear los respectivos mockups.

Con Figma se puede:

    Diseñar la estructura visual de un sitio web o aplicación.

    Prototipar: crear una versión de prueba que simula cómo funcionaría el sitio real.

    Colaborar en equipo: varios usuarios pueden trabajar al mismo tiempo en el mismo proyecto.

  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

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).