📘

Manual de Ayuda

Webs de apartamentos · Formación Line House

1

Introducción

Qué es este manual y para qué sirve

Este manual te explica paso a paso cómo crear y mantener las 10 webs de tus apartamentos (V1, V2, V3... V10). Cada web es independiente y se envía al inquilino correspondiente.

💡 Idea clave: Solo tienes UN archivo que modificar por cada piso: el index.html. Todo lo demás (fotos, logo, documentos) se sube una sola vez.

¿Qué necesita cada web?

📍 Información fija

  • • Dirección exacta del piso
  • • Enlace de Google Maps
  • • Coordenadas GPS (para el tiempo)
  • • Teléfono del anfitrión

🏠 Información variable

  • • Fotos del apartamento
  • • Comodidades (WiFi, AC, etc.)
  • • Bares y supermercados cercanos
  • • Farmacia y hospital de la zona
2

Estructura de carpetas

Cómo deben organizarse los archivos en Hostinger

Así debe quedar la estructura dentro de cada subdominio. Copia esta misma estructura para V1, V2, V3... V10:

📁 v1.formacionlinehouse.es/ (carpeta creada por Hostinger)
📄 index.html ← El código de la web
📁 img/ ← Todas las imágenes
🖼️ logo.png ← El logo (mismo en todos)
️ salon.jpg
🖼️ habitacion.jpg
🖼️ cocina.jpg
️ terraza.jpg
🖼️ restaurante.jpg
📁 docs/ ← Documentos PDF
📄 normas-casa.pdf
📄 clave-wifi.pdf

⚠️ Importante: Los nombres de archivo deben estar en minúsculas y sin espacios. Usa guiones: salon-principal.jpg ✅ (no Salon Principal.jpg ❌)

3

Crear subdominios en Hostinger

Paso a paso en el panel de control

1

Entra en tu panel de Hostinger (hPanel)

Ve a Sitios web → Administrar en tu dominio principal formacionlinehouse.es

2

Busca "Subdominios"

En el menú lateral izquierdo: Dominios → Subdominios

3

Crea el primer subdominio

Escribe v1 en el campo. El dominio principal se rellena solo. Haz clic en Crear.

4

Repite para los 10 pisos

Crea v2, v3... hasta v10. Hostinger creará automáticamente 10 carpetas separadas.

✅ Resultado: Tendrás 10 URLs listas: v1.formacionlinehouse.es, v2.formacionlinehouse.es, etc.

5

Subir fotos y documentos

Cómo organizar el contenido de cada piso

📸 Fotos del apartamento (carpeta img/)

Sube todas las fotos que quieras mostrar. Te recomiendo estas como mínimo:

salon.jpg - Foto principal (la que se ve al entrar)
habitacion.jpg - Dormitorio principal
cocina.jpg - Cocina
banio.jpg - Baño
terraza.jpg - Terraza o vistas
fachada.jpg - Exterior del edificio

⚠️ Consejo importante: Comprime las fotos antes de subirlas. Usa tinypng.com (gratis). Una foto debe pesar menos de 500KB para que la web cargue rápido en el móvil del inquilino.

📄 Documentos (carpeta docs/)

Opcional pero recomendado. Sube aquí:

  • • normas-casa.pdf - Normas de la vivienda (horarios, basura, etc.)
  • • clave-wifi.pdf - Nombre y contraseña del WiFi
  • • check-in.pdf - Instrucciones de llegada y llaves

💡 Para enlazar un documento: Si en el futuro quieres añadir un botón de descarga en la web, la ruta sería: docs/normas-casa.pdf

6

Modificar el código (lo más importante)

Qué cambiar en el archivo index.html para cada piso

⚠️ Regla de oro: Solo modifica el bloque APARTMENT_DATA al principio del archivo. No toques nada más. El resto del código es el "motor" que funciona solo.

📝 Ejemplo: Configuración para el Piso V2

Así debe quedar el bloque cuando prepares la web del V2 (cambia los valores por los reales):

// =====================================================
// CONFIGURACIÓN DEL APARTAMENTO (MODIFICA SOLO ESTO)
// =====================================================
const APARTMENT_DATA = {
  id: "V2",
  name: "Apartamento Tamaduste V2",
  description: "Amplio dúplex con terraza y vistas a la montaña.",
  address: "Calle La Restinga, 42, 38917 El Pinar",
  mapsLink: "https://maps.google.com/?q=...",
  heroImage: "img/salon.jpg",

  weather: {
    lat: 27.7333,
    lon: -18.0000,
    locationName: "El Pinar"
  },

  amenities: [
    { name: "WiFi Gratis", icon: "wifi" },
    { name: "Calefacción", icon: "ac" }
    // ... añade o quita según el piso
  ],

  nearby: [
    {
      name: "Restaurante El Mar",
      type: "Restaurante",
      distance: "300m (5 min)",
      desc: "Especialidad en pescados.",
      mapsLink: "https://maps.app.goo.gl/...",
      image: "img/restaurante.jpg"
    }
    // ... más lugares cercanos
  ],

  emergencies: [
    { name: "Anfitrión (Carlos)", phone: "+34 600 999 888", type: "host" }
    // ... más contactos de urgencia
  ]
};

Iconos disponibles para "amenities"

Usa estos nombres en el campo icon:

wifi - WiFi
ac - Aire Acond./Calef.
kitchen - Cocina
bed - Cama/Dormitorio
tv - Televisión
terrace - Terraza

🔧 Tipos para "emergencies"

host - Anfitrión
emergency - 112
medical - Hospital
police - Policía
7

Obtener coordenadas GPS

Para que el widget del tiempo funcione correctamente

El widget del tiempo necesita las coordenadas exactas de cada piso. Así las obtienes:

1

Abre Google Maps

Ve a maps.google.com en tu ordenador.

2

Busca la dirección del piso

Escribe la dirección exacta (ej: "Calle Tamaduste 15, Valverde").

3

Haz clic derecho sobre el marcador rojo

Aparecerán dos números arriba del todo, algo como: 27.8167, -17.9167

4

Copia los números en el código

El primero es lat (latitud), el segundo es lon (longitud).

// Ejemplo para el Piso V1 en El Hierro
weather: {
  lat: 27.8167,    // ← Primer número
  lon: -17.9167,   // ← Segundo número
  locationName: "Valverde" // ← Nombre de la zona
}

Nota: Si varios pisos están en la misma zona (ej: todos en Valverde), puedes usar las mismas coordenadas para todos. El tiempo será prácticamente igual.

8

Obtener enlaces de Google Maps

Para los botones "Cómo llegar" y los lugares cercanos

1

Busca el lugar en Google Maps

Ej: "Farmacia Central Valverde" o la dirección de tu piso.

2

Haz clic en "Compartir"

Aparece un botón azul con el icono de compartir.

3

Elige "Copiar enlace"

Se copiará algo como: https://maps.app.goo.gl/AbCdEfGh123

4

Pégalo en el código

En el campo mapsLink correspondiente.

📋 Dónde usar cada enlace:

  • mapsLink principal → Dirección de tu apartamento (botón grande "Abrir en Google Maps")
  • mapsLink en "nearby" → Cada restaurante, farmacia, supermercado...
  • mapsLink en "emergencies" → Hospital, centro de salud, comisaría
9

Checklist antes de publicar

Marca cada tarea completada (se guarda en tu navegador)

Repite esta lista para cada uno de los 10 pisos:

10

Problemas comunes y soluciones

Si algo no funciona, mira aquí primero

❓ El logo no se ve ▼

Causas más frecuentes:

  • El archivo no se llama exactamente logo.png (revisa mayúsculas)
  • No está en la carpeta img/ sino en la raíz
  • El archivo está corrupto. Vuelve a subirlo.
❓ Las fotos no cargan ▼

Revisa que en el código pongas la ruta correcta:

heroImage: "img/salon.jpg" // ✅ Correcto
heroImage: "salon.jpg" // ❌ Falta "img/"
El tiempo no aparece ▼

Causas:

  • Las coordenadas lat y lon están mal escritas
  • El inquilino tiene bloqueador de anuncios (raro)
  • El servicio Open-Meteo está caído (muy raro, vuelve a cargar la página)
❓ La web se ve rara en el móvil ▼

Soluciones:

  • Borra la caché del navegador del móvil
  • Asegúrate de que el archivo se llama index.html (no "Index.html" ni "inicio.html")
  • Prueba en modo incógnito
❓ El enlace de Google Maps no abre ▼

Asegúrate de que el enlace empieza por https://. Si copiaste mal, pégalo otra vez desde Google Maps.

✅ ¿Todo funciona? ¡Enhorabuena! Ya puedes enviar la URL al inquilino. Ejemplo: https://v1.formacionlinehouse.es