martaadom

[martaadom]

Importante

Se me había olvidado añadir que desde la página principal de mi web se puede acceder al listado de escapadas a través del siguiente botón:

[martaadom]

ENTREGA 2ªPARTE (TRAVELSUR)

https://tavelsurtewc.000webhostapp.com/index.phpEn esta última parte del proyecto he añadido una serie de cosas que voy a especificar a continuación.

En primer lugar, he pasado toda mi web a PHP.

Después, he convertido mi formulario de contacto en un formulario avanzado usando bootstrap validator. 

1. He modificado contacto.php de la siguiente manera:

He cambiado el <form> 

y he añadido el siguiente código a cada campo que quería que se validase antes de enviar el correo. Se lo he añadido a nombre, a correo electrónico y a mensaje.

Por último he añadido una serie de scripts para que el formulario se pueda validar correctamente.

Adjunto una imagen de el mensaje de alerta que salta si no rellenas algún campo:

En cambio, si rellenas correctamente todos los campos del formulario te redirige a procesaform.php que también lo he modificado añadiéndole el siguiente código. 

He definido el nombre del destinatario, en este caso TRAVELSUR, con su dirección de correo electrónico y el asunto del mensaje.

Luego he recuperado los valores de name, email y message del formulario y les he pasado una condiciones de validación. Dejo un ejemplo del nombre:

También he recogido todos los valores para que si han sido rellenados correctamente se envíe el correo:

Una vez enviado el mensaje, si todo va bien, te aparecería este texto en procesaform.php:

Adjunto aquí el código de éxito y de fracaso:

Además de estos dos ficheros .php he creado otro nuevo llamado validateField.php que es el encargado de la validación:

Ahora pasamos a otro tema. Travelsur tiene acceso a base de datos.

He creado una base de datos con una tabla llamada lugares. Para conectarme con mi base de datos y realizar el  formulario que inserte en la dicha base de datos y la página que liste, he añadido los siguientes archivos:

He creado la demo_travelsur.sql con 3 escapadas por defecto en la tabla ‘lugares’  y la he añadido a mi base de datos. También he rellenado conectar.php con mis respectivos datos. 

Por otro lado, he modificado el resto de los ficheros necesarios para adaptarlos a esta base de datos.

Voy a explicar principalmente dos de ellos. La idea es que los “Travelsurers” puedan ir añadiendo sitios que les hayan gustado de Sevilla y Granada dejando además un comentario o recomendación sobre ellos

1. listado_json.php: página donde se listan las escapadas y donde se van añadiendo nuevas a medida que se van insertando desde el formulario.

Le puesto el estilo de mi página web, tanto el navbar como el color de fondo o de letra.

En el navbar le he añadido el botón de Contacto, que te redirige al formulario de contacto. Además he creado otro botón nuevo, Crear Nueva, que te lleva a formulario_lugar.php (formulario que inserta escapadas en la base de datos).

Le he añadido un título con el siguiente estilo:

Adjunto código del estilo de este listado de escapadas.

2. formulario_lugar.php: formulario que inserta en la base de datos más escapadas.

El formulario tiene la siguiente estructura:

La persona que quiera añadir una nueva escapada a la lista deberá rellenar su nombre, el nombre del lugar, insertar una foto de éste, y una recomendación/comentario. 

Su código:

El estilo y distribución del formulario es igual al del formulario de contacto que ya adjunte en la entrega de la parte 1. También, como se puede apreciar, he añadido el botón de Contacto y un nuevo botón, Vuestros Lugares, que te redirige a la página de escapadas.

Cuando rellenas el formulario, por ejemplo, como en la foto anterior y le das al botón Añádelo!! te lleva a listado_json.php apareciendo la nueva escapada en la lista. 

dejo por aquí el link de mi web:

https://tavelsurtewc.000webhostapp.com/index.php

[martaadom]

ENTREGA DEFINITIVA 1ª PARTE (PROYECTO TEWC-TRAVELSUR)

Como he realizado bastantes cambios en mi página web desde el último post que publiqué, voy a hacer un resumen general de todo el desarrollo, partes, elementos y código de ella.

En primer lugar, elegí esta plantilla: https://colorlib.com/preview/#safario   y en vez de modificar esa web, decidí partir del bs4-template-starter y coger los trozos que me gustaban y adaptarlos a mi gusto acorde con la temática de mi web. 

Toda la web tiene la fuente “Rockwell”.

Resumen de TravelSur:  web diseñada para aquellas personas que quieran visitar Andalucía (en concreto, Sevilla y Granada). En ella podrás encontrar información de ambos destinos como por ejemplo: monumentos que visitar, restaurantes u opiniones de otros viajeros. No es una web que te organice el viaje sino que te ofrece todo lo que necesitas para organizar tu viaje a tu gusto y medida. También tiene una página de contacto para cualquier duda o sugerencia.

PARTES DE TRAVELSUR:

1. Navbar de la Página Principal

Consiste en el logo de la web y dos botones(Contacto y Escapadas). Dentro de las escapadas podemos encontrar otros dos botones, Sevilla y Granada.

-el logo:

que actúa como un botón para volver a la página principal.

con su color de fondo:

-botón Contacto:

-botón Escapadas( con Sevilla y Granada):

Como se aprecia en las 2 fotos anteriores, al pasar sobre uno de los dos botones cambia de color:

Pero también ocurre lo mismo con la pestaña que despliega las Escapadas:

Por otro lado, al hacer pequeña la ventana, los dos botones desaparecen. En su lugar aparece uno a la derecha que despliega todo el navbar.

el despliegue:

Además le he dado nombre y estilo a la pestaña de mi página web:

2. Página principal

Compuesta de dos partes:

-Parte de arriba(header): formada por el eslogan y una foto de fondo.

y con este estilo:

Para que se aprecie mejor el texto, le he puesto opacidad a la foto de la siguiente manera:

-Parte de abajo: formada por un esquema con los dos destinos.

Está dentro de una sección y se compone de un título y una breve descripción debajo de éste.

Más abajo nos encontramos con el nombre y una foto de cada destino:

Sevilla

Granada

El título con este estilo:

y las imágenes con este:

Como se puede apreciar, toda esta página la he metido en un div llamado “pag” con el siguiente estilo:

Al pulsar sobre los botones de Sevilla y Granada del navbar te redirige a esta sección de la página principal. 

En la segunda parte de este proyecto pretendo desarrollar cada destino con detalle y así completar la página web.

3. Página de Contacto

Al pinchar en el botón Contacto del navbar de la página principal te lleva a “contacto.html”. Esta página está formada por un formulario de contacto y un apartado de información:

Como se puede apreciar en el navbar de esta página he quitado los botones Contacto y Escapadas. El resto es igual.

El recuadro granate que engloba las dos partes de esta página tiene el siguiente estilo:

Por un lado nos encontramos el formulario con:

-Nombre e input:

-Correo electrónico e input:

-Teléfono e input:

-Destino a seleccionar(marcado por defecto Granada):

-Espacio para el mensaje:

-Interesado en recibir(2 opciones):

en el que se pueden marcar ambas opciones

-Botones:

El de Enviar mensaje: que te lleva al resultado del formulario “envioformulario.html.”

El de Reestablecer: que te reestablece el formulario para rellenarlo de nuevo.

Ambos botones tienen el siguiente estilo:

Los inputs, el textarea y el formulario tienen este estilo:

Por otro lado nos encontramos la información de contacto:

Formado por un título (Contacto), 3 apartados (Calle, Teléfono de contacto y Correo electrónico) y un mensaje final.

Como se puede apreciar, si pulsas en la dirección te redirige a la página de Google Maps para que puedas encontrar la calle. También, al pulsar sobre el correo electrónico te lleva a la página de Gmail por si quieres contactar con nosotros de esta forma. 

Adjunto de los estilos del email, teléfono y calle:

Estas dos partes que forman la página de contacto las he metido dentro de un div llamado “pag” con el siguiente estilo:

También se puede apreciar el color de fondo del navbar además del estilo de todo el body.

4. Resultado del formulario

Al rellenar el formulario y pulsar sobre el botón Enviar, llegamos a “envioformulario.html”. Esta última página incluye el navbar anterior (sin botones) y un mensaje:

código del mensaje:

estilo de toda la página:

Por último dejo por aquí el link de TravelSur:

https://tavelsurtewc.000webhostapp.com/index.html

[martaadom]

22/03/2020

He realizado una serie de cambios para ir mejorando la apariencia de mi página web puesto que ya he logrado toda la funcionalidad obligatoria de esta primera parte del proyecto (página principal, formulario y página de respuestas guardadas del formulario).

En primer lugar, he centrado la web únicamente en Sevilla y Granada ya que considero que son los dos destinos más visitados de Andalucía. Por tanto, todo lo relacionado con Córdoba lo he borrado.

He conseguido poner el texto de la pantalla principal sobre un recuadro semitransparente para que se lea a la vez que se intuye la imagen de detrás. También, he cambiado el color de los botones del navbar con el tono granate de mi paleta. Además le he cambiado la fuente predefinida por ‘Calibri’. 

Adjunto foto:

Cuando pasas sobre alguno de los botones del navbar he puesto el tono amarillo claro de la paleta. He hecho lo mismo con el apartado de escapadas. Cuando lo seleccionas, aparecen Sevilla y Granada en un tono rojizo claro, pero si te pones encima de alguno de ellos se ponen del color amarillo anteriormente mecionado.

Estos cambios los he realizado con el siguiente código modificando los estilos:

El texto con la caja transparente:

y el navbar con los botones:

Por otro lado, la página de Contacto con el formulario en principio estaría así:

He decidido quitarle la imagen de fondo porque cuando reduces la página a media pantalla no se veía claro el texto y creo que es mejor de esta manera.

código del estilo:

código de la página contacto.html :

Además, como se pide, al pulsar sobre el botón “Enviar Mensaje” del formulario, nos redirige a una página llamada ‘envioformulario.html’ con un mensaje.

Adjunto foto de esta página.

Adjunto código de la página:

He puesto el blog lo máximo que se puede de ancho, espero que se puedan apreciar mejor las fotos.

Hasta aquí los cambios por hoy.

[martaadom]

20/03/2020

Hoy he cambiado el diseño de mi página principal. He decidido cambiar el color del navbar y quitar el mapa de Andalucía a cambio de poner una foto de fondo. Más adelante, cuando ya tenga toda la página bien montada, me gustaría que esa foto de fondo fuera un carrusel de fotos que puedas ir pasando.

Adjunto foto

Todavía tengo que cambiar el color, la fuente y el tamaño de los botones de Contacto, Escapadas y el de Buscar.

Aquí tengo un problema. Como se puede apreciar en la siguiente foto, el texto que aparece en esta página queda camuflado y quiero encuadrarlo con un fondo amarillo semitransparente para que se pueda leer bien además de intuirse la foto por detrás. No encuentro forma de hacerlo. Subrayo el texto para que se pueda apreciar:

Además, he añadido el icono de la web formado por una estrellita y el nombre de la web. También he puesto el icono de la estrella en la pestaña de Internet.

Como se puede apreciar en la foto anterior, he quitado el botón de registro porque me parecía innecesaria. Además, le he puesto funcionalidad al botón de Contacto. Ahora, cuando pulsas sobre él, te lleva a “contacto.html”. Adjunto foto:

Por ahora la página de contacto tiene este aspecto. En ella he incluido esa imagen de fondo acorde con la función de la página y los colores de la web. También he añadido este formulario. El navbar se compone únicamente del icono de la web con el cual se puede volver a la página principal.

Todas las fotos que estoy metiendo en mi web las estoy cogiendo de un banco de fotos gratuito. 

La paleta de colores definitiva que voy a utilizar es la siguiente:

Por último, voy a dejar alguna captura del código nuevo que he desarrollado además del que adjunté el otro día ya que no se podía apreciar bien.

Página principal:

Este es parte del estilo que le he añadido.

navbar:

el botón del logo.

el botón de Contacto, Escapadas y Buscar.

Código la parte de abajo donde desarrollo brevemente las 3 ciudades:

Página de Contacto:

Estilo que he añadido en esta página:

formulario:

Espero que se aprecien bien las imágenes donde aparece el código mas borroso. 

Hasta aquí por hoy.

[martaadom]

17/03/2020

Como ya dije en el anterior post, hice una serie de cambios. 

En primer lugar, me creé una plantilla predefinida de bootstrap 4 y la empecé a modificar basándome en la plantilla de la web sobre la que me voy a inspirar (puse el link en el anterior post). Mi web se va a llamar TravelSur ya que está basada en los viajes por el sur de España, en concreto por Andalucía.

Voy a ir poniendo los cambios realizados adjuntando fotos (de la plantilla sobre la que me baso y debajo la de mi página web):

1. Navbar

A la izquierda del todo pondré el logo de mi web cuando lo cree. Este logo es como un botón de refresh, así, cuando se pulse volverá a la página principal. Después, encontramos un botón de Registro que te redirige a una página donde te da la opción de registrarte en la web; a continuación, un apartado de Contacto en caso de posibles dudas, sugerencias, etc.; y por último, un apartado de Escapadas en el que mostramos los 3 destinos que ofrece la web (Sevilla, Granada y Córdoba) que según cual pulses te lleva al apartado sobre ese destino. 

También, a la derecha se puede observar un input por si se desea buscar algo en particular sobre la web rápidamente.

2. Página inicial

3. Aparado de destinos

En esta sección de la web, observamos los diferentes servicios que ofrecen a sus clientes pero yo lo he querido enfocar en los destinos que ofrece mi web, quedando de esta manera:

La paleta de colores que voy a utilizar para el diseño de mi web es una mezcla de colores cálidos y en tono pastel.

Probablemente algunos de los cambios o estructuras que he hecho los cambiaré más adelante cuando vaya dando la forma que realmente me guste a mi web.

Para realizar todo esto, he cogido los trozos del código de la plantilla y los he ido colocando en mi web. Adjunto algunas capturas del código que he añadido:

estilos

navbar

página principal

sección de destinos

[martaadom]

14/03/2020

He estado dándole vueltas a mi página web y creo que es mejor idea centrarla en un único destino, Andalucía. 

Cotilleando las diferentes plantillas creo que la más adecuada con lo que quiero hacer es esta:

 https://colorlib.com/preview/#safario

Voy a cambiar la paleta de colores de esta web para adaptarla mas a mi gusto y que pegue con los diferentes sitios de Andalucía. También cambiaré las opciones del Navbar, el logo y un poco lo que es en sí la página principal.

[martaadom]

Mi página web TEWC

1. Quiero hacer una web de viajes para que las personas que quieran planificar su próximo viaje puedan informarse de la mejor manera posible del sitio que van a visitar.

2. Será una web dirigida para todo el público. Podrás encontrar diferentes lugares del mundo con recomendaciones y críticas de otros viajeros además de subapartados tipo: restaurantes, rutas, monumentos, sitios que ver, pubs, etc. para ir directos a lo que estamos buscando.

3. En esta web puedes informarte y conocer más de tus próximos destinos y a partir de ahí organizarte tú tu propio viaje. No te busca vuelos ni hoteles ni te organiza el viaje.

Cada vez que planeo una escapada me gusta investigar mucho sobre el sitio y organizar cada uno de los días que voy a pasar allí a mi gusto, por ello quiero crear una pagina web que recoja todos los lugares del mundo con la info necesaria para poder hacerlo.

No conozco ninguna página web parecida a la que quiero crear ya que la mayoría son de comparadores de precios, buscador de hoteles y vuelos, etc.

4. Tendrá una página inicial en la que podrás buscar los destinos. Quiero que se asemeje a la de El Viajero Fisgón

Ésta te redirige a otra página con el destino buscado en el que aparecerán las valoraciones y comentarios de otras personas. También, aparecerán los subapartados mencionados en el punto  2. De cada subapartado sale una nueva página con info sobre lo que estamos buscando.