App SAE · UTN.BA
Web app mobile-first con los servicios de la Secretaría de Asuntos Estudiantiles de la UTN,
Facultad Regional Buenos Aires. Pensada para que los aspirantes la abran desde el celular durante
la Expo Carreras.
Hecha con Astro · sitio 100 % estático, sin base de datos ni backend.
Poner en marcha
npm install
npm run dev # http://localhost:4321 (también accesible desde el celular en la misma red)
npm run build # genera dist/
npm run preview # sirve dist/ para revisar el build final
npm run dev levanta con --host, así que podés abrirlo desde el teléfono usando la IP que
imprime la consola. Útil para probarlo tal como lo van a ver los chicos.
Cómo está organizado
src/
data/
areas.ts ← las 8 áreas de la SAE: descripción, servicios, mails, teléfonos
deportes.ts ← oferta deportiva 2026: días, horarios, sede de cada entrenamiento
sedes.ts ← direcciones y links a Google Maps
lib/icons.ts ← set de íconos SVG (trazo 1.6, 24×24)
components/ ← Icon, AreaCard, Contacto
layouts/Base.astro
pages/
index.astro → /
areas/[slug].astro → /areas/salud, /areas/becas, …
deportes.astro → /deportes
contacto.astro → /contacto
Convocatorias
Un área puede declarar una convocatoria (ver Intercambios). Mientras exista, se muestra como
bloque destacado en la página del área y como aviso al tope de la home, con un punto que late.
Para darla de baja cuando cierre, se borra ese campo del área: el aviso de la home desaparece solo.
Para actualizar contenido no hace falta tocar HTML: todo vive en src/data/. Agregar un
deporte es sumar un objeto a DEPORTES; agregar un área, uno a AREAS (su página se genera sola).
Campos de un deporte
dias usa los identificadores lun | mar | mie | jue | vie | sab y es lo que alimenta el filtro
por día. horario es el texto que se muestra tal cual, así que puede describir combinaciones
(por ejemplo, martes y jueves con horarios distintos).
Página para empresas
/empresas es la única página dirigida a empresas y no a estudiantes: cómo publicar búsquedas en
la bolsa de trabajo y cómo formalizar un convenio de pasantías. Se llega desde la ficha de
Desarrollo Profesional, no desde la barra inferior, que es para estudiantes.
El contenido sale de frba.utn.edu.ar/estudiantes/adp-empresas. Los modelos de convenio se
enlazan al archivo que publica la Facultad, así que si ahí suben una versión nueva hay que
actualizar la URL acá: lleva la fecha en el nombre del archivo.
Viajes y eventos
/viajes es la categoría y /viajes/<slug> la ficha de cada viaje, generada desde
src/data/viajes.ts. Para sumar uno nuevo alcanza con agregar un objeto a VIAJES: aparece en la
categoría, se le arma la ficha y, si lleva estado: 'abierta' y destacadoEnHome: true, se
anuncia en el inicio arriba de los avisos de convocatoria.
Cuando una convocatoria termina, cambiá estado a 'cerrada' y el destacado del inicio desaparece
solo, sin tocar la home.
Actividades de las áreas
src/data/actividades.ts guarda las charlas, jornadas y talleres puntuales. Cada una genera su
ficha en /actividades/<slug> y, con estado: 'abierta' y destacadaEnHome: true, aparece en el
inicio entre el viaje destacado y los avisos de convocatoria. Al pasar la fecha, poné
estado: 'cerrada' y desaparece sola.
Vencimiento automático
Cada actividad y cada convocatoria puede llevar venceISO, el último día en que se muestra.
Pasada esa fecha desaparecen solas del inicio y de la ficha de su área, sin tocar nada.
La página de una actividad vencida no se borra: los mailings enlazan ahí. En su lugar avisa que
ya pasó y deja de ofrecer la inscripción, para que nadie se anote a algo que no existe.
Lo que no lleva venceISO no vence nunca — una encuesta abierta, por ejemplo. Y estado: 'cerrada'
sigue sirviendo para bajar algo antes de tiempo.
Como el sitio es estático, esto se evalúa al compilar. Cada push dispara un deploy, así que en la
práctica se recalcula con cada cambio de contenido; si pasa mucho tiempo sin publicar, un Redeploy
en Vercel lo depura.
Si hay varias abiertas, se ordenan por fechaISO: primero la más próxima. Cada una también se
lista sola en la página de su área, según areaSlug.
Es un módulo aparte de viajes.ts a propósito: un viaje tiene costo, cupos y orden de mérito; una
charla tiene disertante y temario. Mezclarlos obligaría a que la mitad de los campos quedara
vacía en cada caso.
Sección temporal: Ingreso 2027
/ingreso existe solo mientras duren las fechas de inscripción. Está hecha para borrarse sin
dejar rastro: todo su contenido vive dentro de src/pages/ingreso.astro, no en src/data/.
Incluye la subpágina /ingreso/carreras, con las nueve ingenierías: un párrafo sobre qué hace
cada una y los links al plan de estudios y al sitio de la carrera. No lleva videos ni nombres de
autoridades a propósito: ese material queda viejo cuando cambian los directores de departamento.
Para darla de baja:
- Borrá
src/pages/ingreso.astro, src/pages/ingreso/carreras.astro y src/data/carreras.ts.
- Sacá la entrada
Ingreso del array nav en src/layouts/Base.astro (está comentada).
La barra inferior se adapta sola a la cantidad de pestañas, así que no hay que tocar CSS.
Identidad
Colores y tipografías tomados del mailing institucional de la UTN.BA:
| Token | Valor | Uso |
|---|
--rojo | #C8102E | color institucional, acentos y CTA |
--dorado | #B8933E | acento secundario, pregrado y deportes selectivos |
--tinta | #111827 | fondos oscuros de hero |
--panel | #F8F9FC | bloques secundarios |
Tipografías: Montserrat (títulos) y Open Sans (texto), cargadas desde Google Fonts.
El favicon en public/favicon.svg es un placeholder tipográfico. Si tenés el isologo oficial de
UTN.BA en SVG o PNG, reemplazalo ahí y en public/manifest.webmanifest.
Publicar
El build es estático, así que anda en cualquier hosting. En Vercel se importa el repo desde
vercel.com/new y no hay nada que configurar: detecta Astro solo y usa estos valores.
| Ajuste | Valor |
|---|
| Framework Preset | Astro |
| Build Command | npm run build |
| Output Directory | dist |
| Install Command | npm install |
Queda con deploy automático: cada push a main republica el sitio.
Si en cambio va a vivir en un subdirectorio (por ejemplo GitHub Pages o un servidor de la
facultad), completá site y base en astro.config.mjs antes de buildear.
Para la expo conviene generar un QR apuntando a la URL final y pegarlo en el stand de la SAE.
Correcciones sobre el material de origen
areas_sae.md traía dos mails repetidos de otras áreas, marcados ahí mismo como dudosos:
También se unificó el conteo: la SAE lista 9 disciplinas, y la oferta 2026 tiene 10
entrenamientos semanales repartidos en 6 grupos. El botón de la home ya no da un número que
choque con el de la tarjeta de Deportes.
Pendiente de confirmar
- Tenis de mesa y Running + Funcional aparecen en el listado de deportes de la SAE pero no
tienen horario en la oferta 2026; se muestran aparte, como "a confirmar".
