# Blog de Viajes Personales

## Captura de ejemplo

![Blog de Viajes](capturas-web/pagina-principal.png)

## Lenguaje de Programación

Un blog muy sencillo desarrollado con:

* PHP
* CSS
* Javascript

## Que necesitas para que funcione

Solamente un servidor que soporte `PHP` (con el módulo/extensión `php-curl` instalado) 
y subir el contenido del directorio `web` al raiz del servidor web.

Puedes probarlo en local en tu equipo usando **Docker** ó *Podman*.

### Docker/Podman

Instala docker o podman en tu equipo, puedes leer como hacerlo en 
mi blog [Docker en Debian](https://soloconlinux.org.es/instalar-docker-en-debian/)

Luego solo tienes que crear la imagen en tu equipo local y usarla.

Te dejo el script `crear-imagen.sh` para que sólo tengas que ejecutarlo para crear la imagen.

Para **iniciar el contenedor** y ver la aplicacion ejecutándose usa el script `iniciar.sh`

Para **detener el contenedor** simplemente usa el script `parar.sh`

## Directorio Web del Blog de Viajes

El directorio `web` es el raíz de la aplicación web.

Dentro de este directorio `web` esta el *código PHP* de la aplicación, el *CSS* para dar formato 
y el código *JavaScript* para poner las *chinchetas* en el mapa.


La estructura básica es la siguiente

```
. 
├── index.php
├── detalle.php
├── mapa.php
├── favicon.ico
├── css
│   ├── detalle.css
│   └── index.css
├── js
│   ├── leaflet.js
│   └── mapa.js
│
└── destinos
    ├── dir_destino_001
    │   ├── curiosidades.txt
    │   └── destino.json
    ├── ....
    └── dir_destino_NNN
 
```

### Como añadir nuevos "Destinos"


#### Datos del Destino

Simplemente debes de crear un nuevo directorio dentro de `destinos`

Dentro de él deja todas las fotos que quieras (solo se verán las que tu escojas)
Luego crea dentro de tu nuevo *destino* el fichero `destino.json`, 
puedes usar como ejemplo cualquier fichero del directorio `plantillas`.

Deberás editar el fichero `destino.json` para incluir los datos que quieras 
que se muestren, tanto en la página principal, como en el detalle de cada destino.

Formato del fichero `destino.json`:

**Formato simple** (sin latitud/longitud)

Usa este formato sólo si el nombre del destino es una ciudad, calle o algo que se pueda encuentrar 
al realizar una búsqueda en los mapas on-line de OpenStreet.

```
{
    "Destino": "Nombre del destino",
    "Fecha_Visita": "2022-07-03",
    "Foto_Principal": "foto-principal.jpg",
    "Mapa": "mapa.png",
    "Fotos": ["foto-001.png", "foto-002.jpg","foto-003.jpg"],
    "Descripcion_Fotos": ["Descripcion Foto 1", "Descripcion Foto 2","Descripcion Foto 3"],
    "Alojamiento": "Hotel ....",
    "Comida": ["Plato tipico AAAAA", "Plato tipico BBBBB"],
    "Zonas_Visitadas": ["Castillo de ...", "Pueblo de .....", "Museo de ....", "Barrio de ...."]
}
```

Detalle de cada campo:

* `Destino`: Se utiliza como texto en la foto de la pagina inicial 
y para realizar la búsqueda en el mapa y poder poner la chincheta.
* `Fecha_Visita`: Usala en formato Año-Mes-Día
* `Foto_Principal`: La foto que se muestra en la página inicial y al inicio del detalle de ese destino.
* `Mapa`: Si dispones de un mapa de la zona, del recorrido, etc. 
* `Fotos`: Array de todas las fotos que quieres que se muestren en el carrusel de fotos.
* `Descripcion_Fotos`: Array del texto de las fotos del carrusel. 
Si no quieres texto en alguna de ellas simplemente escribe `""`. Las fotos y textos van *emparejadas* por la posición en el array.
* `Alojamiento`: Escribe el texto del lugar en donde te alojaste.
* `Comida`: Otro array con los platos tipicos que comiste.
* `Zonas_Visitadas`: Es también un array en el que poner los lugares que visitaste.

**Formato avanzado** (con latitud y longitud)

Usa este formato si deseas poner un nombre *particular* al destino. 
Deberás indicar a mano la `Latitud` y la `Longitud`:

```
{
    "Destino": "Nombre del destino",
    "Latitud": 42.3592683,
    "Longitud": -71.0936210,
    "Fecha_Visita": "2022-07-03",
    "Foto_Principal": "foto-principal.jpg",
    "Mapa": "mapa.png",
    "Fotos": ["foto-001.png", "foto-002.jpg","foto-003.jpg"],
    "Descripcion_Fotos": ["Descripcion Foto 1", "Descripcion Foto 2","Descripcion Foto 3"],
    "Alojamiento": "Hotel ....",
    "Comida": ["Plato tipico AAAAA", "Plato tipico BBBBB"],
    "Zonas_Visitadas": ["Castillo de ...", "Pueblo de .....", "Museo de ....", "Barrio de ...."]
}
```

#### Curiosidades y Anecdotas

Simplemente crea un fichero de texto con el nombre `curiosidades.txt` dentro del subdirectorio 
del destino en que quieras que se muestre.
Puedes usar texto simple o incluso darle *formato* usando etiquetas HTML dentro del fichero .txt

> Nota: Para conseguir una línea en blanco (salto de línea), simplemente deja un espacio en blanco entre una línea y otra.

#### Formato de las fotos

Puedes usar cualquier formato de fotos que soporte cualquier navegador (.png, .jpg, .gif, .webp, .tiff, etc)

Si quieres cambiar el tamaño de visualización de las fotos tendrás que *jugar* con los valores del CSS