156 lines
5.0 KiB
Markdown
156 lines
5.0 KiB
Markdown
# Blog de Viajes Personales
|
||
|
||
## Captura de ejemplo
|
||
|
||
|
||
|
||
|
||
## 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, 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
|
||
|
||
|
||
|
||
|
||
|
||
|