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

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

5.1 KiB Raw Permalink Blame History