Subimos README
This commit is contained in:
commit
c80b1f10e5
154
README.md
Normal file
154
README.md
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
# 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 copia dentro de tu nuevo *destino* el fichero `destino.json` 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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user