Update README
This commit is contained in:
María
301
README.md
301
README.md
@@ -0,0 +1,301 @@
|
||||
# 🗺️ BRAVIO - Mapa Interactivo de Universidades
|
||||
|
||||
Una aplicación de mapa interactivo construida con **Nuxt 3** y **Mapbox GL** que muestra universidades de América Latina con el estado de sus oficinas de defensoría. Parte del proyecto Erasmus BRAVIO.
|
||||
|
||||
|
||||
|
||||
## 📋 Tabla de Contenidos
|
||||
|
||||
- [Descripción General](#descripción-general)
|
||||
- [Características](#características)
|
||||
- [Stack Tecnológico](#stack-tecnológico)
|
||||
- [Requisitos Previos](#requisitos-previos)
|
||||
- [Instalación](#instalación)
|
||||
- [Configuración](#configuración)
|
||||
- [Estructura del Proyecto](#estructura-del-proyecto)
|
||||
- [Uso](#uso)
|
||||
- [Estructura de Datos](#estructura-de-datos)
|
||||
- [Personalización](#personalización)
|
||||
- [Contribuir](#contribuir)
|
||||
- [Licencia](#licencia)
|
||||
|
||||
## 🎯 Descripción General
|
||||
|
||||
BRAVIO es una aplicación de mapeo interactivo que ayuda a visualizar y explorar universidades participantes en el proyecto Erasmus BRAVIO. La aplicación proporciona información detallada sobre el estado de la oficina de defensoría de cada institución y permite a los usuarios filtrar y buscar a través de los datos.
|
||||
|
||||
### Objetivos Clave
|
||||
|
||||
- Visualizar ubicaciones de universidades en América Latina
|
||||
- Filtrar universidades por país y estado de la defensoría
|
||||
- Conocer la etapa de desarrollo de la oficina de defensoría de cada institución
|
||||
- Proporcionar soporte multilingüe (español y portugués)
|
||||
- Asegurar diseño responsivo para móvil y escritorio
|
||||
|
||||
## ✨ Características
|
||||
|
||||
### Características Principales
|
||||
|
||||
- **Mapa Interactivo**: Construido con Mapbox GL para navegación fluida con pan, zoom y rotación
|
||||
- **Barras Laterales Duales**:
|
||||
- Barra lateral izquierda para búsqueda y filtrado
|
||||
- Barra lateral derecha para información detallada de la universidad
|
||||
- **Marcadores Codificados por Color**: Indicadores de estado visuales
|
||||
- 🔵 Cian: Defensoría activa
|
||||
- 🟠 Naranja: En desarrollo
|
||||
- 🔴 Rojo: En estudio/Sin defensoría
|
||||
- **Filtrado Avanzado**:
|
||||
- Búsqueda por nombre de universidad o ciudad
|
||||
- Filtro por país
|
||||
- Filtro por estado de la defensoría
|
||||
- **Diseño Responsivo**: Optimizado para móvil, tableta y escritorio
|
||||
- **Soporte Multilingüe**: Español (ES) y Portugués (PT)
|
||||
- **Exportación CSV**: Descarga datos filtrados para análisis adicional
|
||||
|
||||
### Características Específicas para Móvil
|
||||
|
||||
- Gestión automática de barras laterales (la barra izquierda se oculta al ver detalles de universidad)
|
||||
- Controles optimizados para táctil
|
||||
- Ajustes de diseño responsivo
|
||||
|
||||
## 🛠️ Stack Tecnológico
|
||||
|
||||
- **Framework**: [Nuxt 3](https://nuxt.com/) (Vue 3 con Options API)
|
||||
- **Librería de Mapas**: [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/)
|
||||
- **Estilos**: [Tailwind CSS](https://tailwindcss.com/)
|
||||
- **Gestión de Estado**: [Vuex](https://vuex.vuejs.org/)
|
||||
- **Lenguaje**: JavaScript
|
||||
- **Gestor de Paquetes**: npm/yarn/pnpm
|
||||
|
||||
## 📦 Requisitos Previos
|
||||
|
||||
Antes de comenzar, asegúrate de tener instalado lo siguiente:
|
||||
|
||||
- **Node.js**: v16.x o superior
|
||||
- **npm**: v7.x o superior (o yarn/pnpm)
|
||||
- **Cuenta de Mapbox**: [Regístrate gratis](https://account.mapbox.com/auth/signup/) para obtener un token de acceso
|
||||
|
||||
## 🚀 Instalación
|
||||
|
||||
1. **Clona el repositorio**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/tu-usuario/bravio-map.git
|
||||
cd bravio-map
|
||||
```
|
||||
|
||||
2. **Instala las dependencias**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
# o
|
||||
yarn install
|
||||
# o
|
||||
pnpm install
|
||||
```
|
||||
|
||||
3. **Configura las variables de entorno**
|
||||
|
||||
Crea un archivo `.env` en el directorio raíz:
|
||||
|
||||
```env
|
||||
NUXT_PUBLIC_MAPBOX_TOKEN=tu_token_de_acceso_mapbox_aqui
|
||||
```
|
||||
|
||||
4. **Ejecuta el servidor de desarrollo**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# o
|
||||
yarn dev
|
||||
# o
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
5. **Abre tu navegador**
|
||||
|
||||
Navega a `http://localhost:3000`
|
||||
|
||||
## ⚙️ Configuración
|
||||
|
||||
### Token de Acceso de Mapbox
|
||||
|
||||
1. Regístrate en [Mapbox](https://account.mapbox.com/auth/signup/)
|
||||
2. Crea un nuevo token o usa el token público predeterminado
|
||||
3. Añade el token a tu archivo `.env`
|
||||
4. Actualiza el token en tu componente:
|
||||
|
||||
```javascript
|
||||
// En tu componente de mapa
|
||||
data() {
|
||||
return {
|
||||
accessToken: process.env.NUXT_PUBLIC_MAPBOX_TOKEN || 'tu_token_aqui'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Estilo de Mapbox
|
||||
|
||||
La aplicación usa un estilo personalizado de Mapbox. Para cambiarlo:
|
||||
|
||||
```javascript
|
||||
this.map = new mapboxgl.Map({
|
||||
container: 'mapContainer',
|
||||
style: 'mapbox://styles/tu-usuario/tu-id-estilo', // Cambia esto
|
||||
center: [-60, -15],
|
||||
zoom: 2.5
|
||||
})
|
||||
```
|
||||
|
||||
## 📁 Estructura del Proyecto
|
||||
|
||||
```
|
||||
bravio-map/
|
||||
├── assets/ # CSS, imágenes, fuentes
|
||||
├── components/ # Componentes Vue
|
||||
│ └── mapComp.vue # Componente principal del mapa
|
||||
├── data/ # Archivos de datos JSON
|
||||
│ └── universities.json
|
||||
├── layouts/ # Layouts de Nuxt
|
||||
├── pages/ # Páginas/rutas de Nuxt
|
||||
├── public/ # Recursos estáticos
|
||||
│ └── LOGOBraviooB.png
|
||||
├── store/ # Store de Vuex
|
||||
│ └── index.js # Gestión de estado de idioma
|
||||
├── nuxt.config.ts # Configuración de Nuxt
|
||||
├── tailwind.config.js # Configuración de Tailwind
|
||||
├── package.json
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## 📖 Uso
|
||||
|
||||
### Navegación Básica
|
||||
|
||||
1. **Desplazar el mapa**: Clic y arrastrar
|
||||
2. **Zoom**: Usar la rueda del ratón o controles de zoom
|
||||
3. **Seleccionar universidad**: Clic en un marcador o elemento de la lista
|
||||
4. **Ver detalles**: La barra lateral derecha muestra información detallada
|
||||
5. **Cerrar detalles**: Clic en el botón X en la barra lateral derecha
|
||||
|
||||
### Filtrado de Datos
|
||||
|
||||
#### Búsqueda
|
||||
Escribe en el cuadro de búsqueda para filtrar universidades por nombre o ciudad.
|
||||
|
||||
#### Filtro de País
|
||||
Selecciona un país del menú desplegable para mostrar solo universidades en ese país.
|
||||
|
||||
#### Filtro de Estado
|
||||
Filtra universidades por el estado de su defensoría:
|
||||
- **Activa/Ativa**: Defensoría activa
|
||||
- **En desarrollo/Em desenvolvimento**: En desarrollo
|
||||
- **En estudio/Em estudo**: En estudio
|
||||
|
||||
#### Limpiar Filtros
|
||||
Haz clic en el botón "LIMPIAR/LIMPAR" para restablecer todos los filtros.
|
||||
|
||||
### Cambiar Idioma
|
||||
|
||||
Usa el selector de idioma en la esquina inferior derecha para cambiar entre:
|
||||
- 🇪🇸 Español
|
||||
- 🇧🇷 Portugués
|
||||
|
||||
### Exportar Datos
|
||||
|
||||
Haz clic en "Descargar CSV/Baixar CSV" para descargar los resultados filtrados actuales como archivo CSV.
|
||||
|
||||
## 📊 Estructura de Datos
|
||||
|
||||
Las universidades se almacenan en `data/universities.json` con la siguiente estructura:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 1,
|
||||
"university": {
|
||||
"es": "Universidad Carlos III",
|
||||
"pt": "Universidade Carlos III"
|
||||
},
|
||||
"city": {
|
||||
"es": "Buenos Aires",
|
||||
"pt": "Buenos Aires"
|
||||
},
|
||||
"country": {
|
||||
"es": "Argentina",
|
||||
"pt": "Argentina"
|
||||
},
|
||||
"status": "activa",
|
||||
"coordinates": [-58.3816, -34.6037],
|
||||
"web": "https://sitio-universidad.com",
|
||||
"logo": "/logos/logo-universidad.png",
|
||||
"defensor": ["Juan Pérez", "María García"],
|
||||
"campus": [
|
||||
{ "es": "Campus Central", "pt": "Campus Central" }
|
||||
],
|
||||
"contact": ["contacto@universidad.edu"],
|
||||
"telephone": "+54 11 1234 5678",
|
||||
"yearOfCreation": 2020
|
||||
}
|
||||
```
|
||||
|
||||
### Campos Requeridos
|
||||
|
||||
- `id`: Identificador único
|
||||
- `university`: Nombre de la universidad (objeto multilingüe)
|
||||
- `city`: Nombre de la ciudad (objeto multilingüe)
|
||||
- `country`: Nombre del país (objeto multilingüe)
|
||||
- `status`: Uno de `"activa"`, `"en-desarrollo"`, `"en-estudio"`
|
||||
- `coordinates`: Array `[longitud, latitud]`
|
||||
|
||||
### Campos Opcionales
|
||||
|
||||
- `web`: URL del sitio web de la universidad
|
||||
- `logo`: Ruta al logo de la universidad
|
||||
- `defensor`: Array de nombres de defensores
|
||||
- `campus`: Array de ubicaciones de campus (multilingüe)
|
||||
- `contact`: Array de correos electrónicos de contacto
|
||||
- `telephone`: Número de teléfono
|
||||
- `yearOfCreation`: Año de creación de la defensoría
|
||||
|
||||
## 🎨 Personalización
|
||||
|
||||
### Colores
|
||||
|
||||
La aplicación usa un tema de degradado morado. Para personalizar:
|
||||
|
||||
```vue
|
||||
<!-- Fondo de Barra Lateral Izquierda -->
|
||||
<aside class="bg-gradient-to-br from-purple-900 via-purple-950 to-indigo-950">
|
||||
|
||||
<!-- Colores de Estado -->
|
||||
<style>
|
||||
.status-active { background: #22c5c2; } /* Cian */
|
||||
.status-development { background: #ffa500; } /* Naranja */
|
||||
.status-study { background: #ff4560; } /* Rojo */
|
||||
</style>
|
||||
```
|
||||
|
||||
### Vista Inicial del Mapa
|
||||
|
||||
Ajusta la posición inicial del mapa:
|
||||
|
||||
```javascript
|
||||
this.map = new mapboxgl.Map({
|
||||
container: 'mapContainer',
|
||||
style: 'mapbox://styles/mariasaso/cme8hxq2w00cb01sb3jd105ue',
|
||||
center: [-60, -15], // [longitud, latitud]
|
||||
zoom: 2.5 // Nivel de zoom (0-22)
|
||||
})
|
||||
```
|
||||
|
||||
### Estilos de Marcadores
|
||||
|
||||
Personaliza la apariencia de los marcadores en el método `addAllMarkers()`:
|
||||
|
||||
```javascript
|
||||
const el = document.createElement('div');
|
||||
el.style.backgroundColor = statusColor;
|
||||
el.style.width = '20px'; // Tamaño
|
||||
el.style.height = '20px';
|
||||
el.style.borderRadius = '50%'; // Forma
|
||||
el.style.border = '3px solid white'; // Borde
|
||||
```
|
||||
Reference in New Issue
Block a user