About

En esta página se podrá encontrar todo tipo de guías, consejos y trucos para aprovechar al máximo la experiencia de conocer una de las mayores ciudades del mundo, Londres.

Objetivos y público objetivo

Nuestro público es toda la población que vaya a visitar la ciudad, ajustándose a todas las modalidades de viaje, es decir, habrá sugerencias para los más fiesteros, los apasionados de los museos, etc.

Nuestro objetivo es descubrir al público los cientos de secretos que alberga esta ciudad, además de informarles sobre las opciones más turísticas y demandadas.

Competencia

Las páginas alternativas a la mía son cualquiera que se dedique a viajes,ya sea Booking, Tripadvisor, Civitatis, etc.

La diferencia es que nosotros nos centramos más en los pequeños secretos que esconde la ciudad, más que en paquetes turísticos con las atracciones más conocidas.

https://www.tripadvisor.es/Tourism-g186338-London_England-Vacations.html

https://www.civitatis.com/es/londres/

https://www.londres.es/

Layout

Por lo general todas estas páginas siguen el mismo formato, un header que es una imagen, que ocupa bastante si no toda la pantalla. Un título pero no demasiado llamativo, superpuesto encima de la imagen. Una barra de navegación, que a veces está oculta hasta que se hace scroll, y se descubren las secciones. Después del header, tienes cada una de las secciones, con más imágenes que texto, con opciones de pinchar en cada imagen y que te lleve a leer más sobre la imagen.

Mi intención es seguir un estilo similar, prestando atención a los detalles, usar colores «británicos», que encajen con mi tema, y que todo sea coherente.

La manera en que pretendo organizarla es la siguiente: una página principal con el header y la navbar, unas pocas secciones, cada una que sirva a un contenido diferente y que se distinga esa diferenciación, ya sea por el color de fondo, el uso de títulos, etc; y luego una sección final de sugerencias para incoporar el formulario, y un pie de página.

Criterios de calidad

En lo primero que nos fijamos es en el diseño de la página, tanto estéticamente como de facilidad para encontrar las cosas. Una vez visto eso, nos centramos en que sea un diseño profesional, que otorgue sensación de confianza.

Cuaderno de bitácora

20/03/20

Comienzo el diseño de mi página. Inicialmente tenía otra idea para la misma, (transacciones dentro de videojuegos), pero he tenido que cambiar, así que el nuevo enfoque es desarrollar una página sobre Londres.

Comencé buscando plantillas, y de hecho probé unas cuantas, quedándome casi satisfecho con la siguiente: https://graygrids.com/item/engage-free-bootstrap-4-template/

El problema que encontré, y que me hizo decantarme por no usar ninguna plantilla y hacer yo la página desde cero, era la complejidad y la extensión de la plantilla (3400 líneas de código el css).

De esta forma, he estado implementando la barra de navegación. He encontrado la opción de que sea sticky, y lo he incorporado:https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

Además, he estado peleándome con la imagen de la cabecera, y un cuadro de búsqueda en la página, con un botón.

21/03/20

Comienzo tratando e quitar un hueco en blanco que tengo en la parte superior de mi página:

Para ello, hice uso de la herramienta Inspeccionar del navegador, y vi que era problema del título, que tenía un margen que sobresalía del header:

Una vez que lo solucione, utilicé el grid system de bootstrap y coloqué tres columnas, e inserte Lorem ipsum para ver cómo quedaría.

22/03/20

Revisando páginas similares (tripadvisor, etc), me intenté fijar en el patrón de diseño que seguían, así que trato de incorporar una barra superior, con el logo a la izquierda, y cuatro botones a la derecha, todo esto encima del header. Este era el diseño inicial:

La parte más complicada ha sido incluir en una misma línea el logo y los cuatro botones, porque se me ponían en la línea siguiente. Para eso he usado display: inline (lo he encontrado aquí: https://stackoverflow.com/questions/10451445/two-div-blocks-on-same-line).

Luego he incorporado la primera de las secciones de la página (Top 5), mediante el sistema de rejilla de Bootstrap. En la primera de las columnas he incluido un mapa de la ciudad, mediante la herramienta que proporciona Google para incorporar Maps a páginas web. Además, le he incorporado un color de fondo.

No me convence el diseño, pero no tengo mejores ideas y no veo cómo hacerlo bonito.

23/03/20

Comienzo intentando solucionar el problema de que el mapa me ocupa más que el propio mapa, lo cual provoca que se monte en la siguiente columna:

Esto es cómo va quedando la página. El problema que tengo ahora es que la barra de navegación se me posiciona detrás de las imágenes al hacer scroll.

24/03/20

He encontrado una solución para lo de que las imágenes se me superpongan a la barra de navegación, la opción z-index. Con esto, otorgo mayor jerarquía a la barra de navegación.

A propósito de la barra de navegación, he encontrado otra que me parece más adecuada, y la he implementado. Como ahora la navbar se me sitúa en la parte superior de la página, me inutiliza los botones y el logo que tenía diseñados de días anteriores. El logo lo he borrado y lo he colocado en la nueva navbar, pero los botones para no perderlos, he buscado en bootstrap y he usado esto: https://getbootstrap.com/docs/4.0/components/button-group/

Como se me situaban debajo de la imagen, y lo tengo con position:fixed, lo coloqué en el mismo div que el header, para que esté algo más arriba en la página cuando se hace scroll. También tuve que ajustar el logo, porque me salía primero como si no fuera un png, pese a serlo, y después de unas dimensiones totalmente desmesuradas:

A continuación, he completado las dos secciones que tenía ya en la navbar, con el sistema grid system de boostrap, y he incluido títulos, imágenes y textos:

Finalmente, he incorporado el footer y una última sección para sugerencias:

He modificado su css para que resulte más agradable a la vista:

25/03/20

He completado la sección de sugerencias, tanto en formato como en los campos que la componen. Además, he ajustado el formato de todas las secciones, para que los títulos, imágenes y textos sigan la misma estructura.

29-03-20

He reestructurado la página, para tener tres secciones de contenido, y un apartado final de sugerencias. Hoy me he centrado en el header.

Primero he cambiado de imagen a una que se ajuste a toda la pantalla, y para que cuando se haga zoom (tanto aumentar como reducir), se mantenga el tamaño de la misma. Además, he ajustado el título en relación a la imagen. Para estos aspectos, me he fijado en cómo está diseñada la siguiente página: https://colorlib.com/preview/#travelo

Seguidamente, me he vuelto a poner con la barra de navegación. He encontrado una que me gustaba, y he trabajado a partir de la misma, para adecuarla a mi página y que funcionara como yo deseaba, por ejemplo que pasase de ser transparente a tener un fondo sólido cuando se hace scroll y se rebasa la imagen de cabecera. Esta es la fuente: https://codepen.io/sonorangirl/pen/XmRBjq

Este es parte del código que afecta a lo arriba descrito:

Así es como queda actualmente la página:

30-03-20

He estado reescribiendo el código, para que el encabezado ocupe toda la página tal y como se accede a la página. Ésto junto a los cambios de ayer, hacen que de por (medio) finalizado por ahora lo que es el header. Tanto el título como el subtítulo se leen bien, y tienen una respuesta responsiva ahora mismo, para ajustarse a cualquier resolución.

También he estado poniendo uniformes tanto los títulos de cada sección (h2), la breve descripción de cada uno (h3), y sus textos.

He encontrado un botón de leer más/menos en una página, que me ha gustado, he tratado de implementarlo pero no me funciona por ahora, el problema es del javascript pero no acabo de verlo.

31-03-20

Estoy intentando implementar una flecha que me haga scroll a la siguiente sección, y la he situado en la cabecera. En principio quiero basarme en esta: https://www.solodev.com/blog/web-design/adding-a-scroll-down-anchor-to-your-website.stml

Inicialmente no me funciona, pero creo que es problema de jQuery, que no me carga, por lo que veo en la consola de Chrome. Además sigo sin lograr que funcione el botón de leer más; sí que me cambia el contenido del mismo (Leer más a Leer menos, y viceversa), pero no me despliega el contenido. He buscado y encontrado esta opción más simple que la que pretendía implementar, pero que la probaré a ver si logro que funcione: https://www.w3schools.com/howto/howto_js_read_more.asp

También he limpiado mucho código que tenía de versiones anteriores que se me ha quedado obsoleto y solo me engordaba el código.

Ésta es la función de JS para la flecha:

01-04-20

Sigo con el problema de los scripts, que no me funcionan. He seguido reescribiendo código para que esté todo ya organizado, tengo un archivo .css aparte para los títulos y texto, y luego el script de la flecha en un archivo aparte también.

02-04-20

Gracias a la ayuda del profesor, me ha indicado cómo solucionar el problema del scroll, por un lado tenía que el selector afectaba a ‘arrow’, en vez de a la clase ‘#arrow’. Con esto ya funciona. Además, cargaba el archivo de estilos antes que BS4, lo cual hacía que mis cambios no tuvieran efecto en algunos casos.

He buscado estilos de botón para Leer más, y he encontrado este que me ha gustado: https://codepen.io/andreasstorm/pen/oqKbLq

Lo he implementado, y este es el resultado:

Además, he puesto un fondo a la primera sección, para identificarla y separarla del resto, de manera que facilite su lectura:

He añadido una página estática, a la cual se llega una vez se completa el formulario. Le he añadido estilo propio, y un botón para volver a la página de inicio.

También he eliminado el color de fondo de la sección de sugerencias, y he cambiado las fuentes de los títulos, y ajustado su tamaño. Ahora mismo luce así:

Por último, he modificado la barra de navegación. Ahora el fondo es rojo, y cuando se pasa el ratón por encima de los enlaces, éstos aparecen encuadrados en negro.

06-04-20

He cambiado el estilo del botón de leer más. He encontrado este otro que me convence más: https://codepen.io/ainalem/pen/NyVmwm

El único problema que hay, que ya tenía antes, es que una vez que se usa el botón, deja de funcionar el estilo, es necesario recargar a página para volverlo a tener.

A continuación, he estado cambiando el estilo de las secciones, en concreto he usado este de bootstrap: https://getbootstrap.com/docs/4.0/examples/album/#

De momento tengo esto, he modificado para tener las imágenes manteniendo su ratio original, para que no se distorsione, pero entonces cada tarjeta tiene unas dimensiones distintas. Voy a ver cómo arreglarlo.

Para la segunda sección, he cogido el estilo carousel de Bootstrap: https://getbootstrap.com/docs/4.0/examples/carousel/#

Por ahora así es como lo tengo, cuando he mudado todo lo que tenia en la section a esta plantilla:

Ahora tengo que ajustar los estilos de las dos secciones, por un lado la resolución de las imágenes, y por otro lado los márgenes, para que esté centrado siempre, independientemente del zoom de la pantalla.

He visto que con la herramienta display: flex, consigo lo que buscaba. Además, he separado el estilo de cada una de las secciones para que no haya problemas, porque la segunda sección al ponerle display, se me montaba todo en una misma fila, solapándose los contenidos. Así se ve con el zoom al 25%.

Como las soluciones de css que he encontrado no acababan de funcionar como yo deseaba, he editado las imágenes en https://pixlr.com/e/ y he conseguido que tengasn las mismas dimensiones, de manera que ahora todas las tarjetas miden lo mismo. El resultado es el siguiente:

07-04-20

He cambiado el estilo del botón view en la primera sección, para que por defecto sea rojo con las letras blancas, y al pasar el ratón por encima el fondo sea azul:

Quito el primer apartado dentro de las comidas, la fila con las tres imágenes y el resumen debajo, para no poner la misma información dos veces. Elimino el siguiente contenido:

Y finalmente queda así:

He añadido un fondo al apartado de sugerencias, y he puesto color de fondo al pie.

He reducido el tamaño del botón de leer más, para que no resulte tan llamativo. Además he ajustado la posición del texto «Leer más», para que se ajuste al nuevo tamaño.

También he alargado y engordado la línea que tengo bajo el primer título.

He modificado el footer, cambiándolo por una plantilla de Bootstrap (https://mdbootstrap.com/docs/jquery/navigation/footer/), y he añadido algunos enlaces a los logos, que pueden resultar de interés.

Estoy tratando por un lado de reducir las dimensiones de las secciones, pero de momento no lo estoy logrando. He probado tanto con las opciones de css como con las clases de bootstrap (https://getbootstrap.com/docs/4.0/utilities/sizing/).

Además, quiero ver porqué el botón de leer más pierde el estilo una vez se usa. Se supone que es por el estilo que tiene cuando se usa (active) y cuando ya se ha usado (visited), pero las soluciones que estoy encontrando no me funcionan (p.ej. https://stackoverflow.com/questions/4764236/why-does-css-button-lose-its-style-when-clicked).

08-04-20

He eliminado el botón de leer más/menos, por cuestiones de estética; sin embargo, como le he dedicado bastante tiempo, adjunto su código, por si le pudiera encontrar una utilidad más adelante.

Por consiguiente, ajusto el texto que se encontraba antes en el desplegable. Queda de la siguiente manera:

De igual manera que la primera sección, he añadido una raya roja debajo del título de Gastronomía.

He reducido el tamaño de las imágenes de la sección Top 5, y he ajustado para que el ratio de las mismas se mantenga. Además he añadido estilo para que el contenido esté centrado.

He retocado también la sección de gastronomía, reduciendo el tamaño de las imágenes para que la sección ocupe menos.

Estoy ahora implementando flechas para moverse de una sección a otra. Primero había pensado en una flecha fija en el margen, pero por simplicidad comienzo por una flecha dentro de cada sección, que me lleve a la siguiente o a la anterior, si la hubiera. Para ello me baso en la flecha que ya tengo en el header. El principio es el mismo, luego me toca situarla en la posición que me interese con respecto a su sección. En el caso de la primera sección queda así:

Hacemos lo mismo en las tres secciones. Para la sección Top 5, queda de la siguiente forma:

He intentado meterle la misma animación que ya tiene la primera flecha, pero no me funciona y me deja de funcionar la referencia hacia la que tiene que llevar. Además, he buscado alguna animación de hacer scroll hacia arriba, pero solo he encontrado opciones que te llevan a la parte superior (https://codepen.io/rdallaire/pen/apoyx).

Por ahora lo dejo como está, para que funcione, y voy a retocar las fuentes.

He modificado las fuentes del título del header y del contenido de cada sección.

09-04-20

Por último, ajusto para que las flechas para navegar entre secciones se encuentren exactamente en la misma posición con respecto a la pantalla. Además, he vuelto a reducir el tamaño de las imágenes, tanto el que ocupan en la carpeta (rondan los 15-20 kB) como el que ocupan en cada sección, para que entre más contenido en la pantalla. También he añadido un sexto elemento en la segunda sección, para que queden iguales las dos filas.

Ésta sería la versión definitiva de mi página (respecto a la entrega intermedia).

Entrega final (PHP + BBDD)

19/05/20

Para comenzar, procedo con la corrección de los apartados comentados en la realimentación de la entrega intermedia.

En ésta se mencionan la posición de las flechas, para que coincidan en la pantalla en todas las secciones. Esto se hace fijando una de ellas, en este caso he escogido la de la primera sección, y a partir de la misma, ajustar la posición del resto.

Una vez hecho esto, el segundo comentario es sobre el estilo del formulario. He probado con algunas plantillas, pero de momento no me acaba de convencer ninguna, seguiré mirando pero por ahora lo dejo apartado.

20/05/20

Hoy comienzo con la transformación de la página web estática a una dinámica, con php y base de datos. En mi caso, la única sección en la que habría que implementar la BBDD sería en el formulario. Ya que se me ha dicho que modifique el estilo de la misma, pero no el formato, puedo comenzar con la base de datos. Para ello creo una en la página de hosting (000webhost), con ayuda de las diapositivas publicadas en el curso. Debido al diseño de mi formulario, ésta deberá tener 7 columnas, siendo una el id, campo necesario que se utilizará como clave primaria para identificar cada una de las filas de la BBDD, y el resto los 6 valores que tiene mi formulario (nombre, apellido, usuario, ciudad, postal y texto). En función de la naturaleza de cada uno de los campos, se diseña de tal manera, asignando el tipo VARCHAR a todos los campos menos al id que será INT, al igual que postal (código postal) y texto, que será TEXT.

Una vez que se ha creado la base de datos, tengo que lograr que se conecte con mi página. Para ello, y de nuevo fijándome en la documentación sobre BBDD publicada,veo que necesito importar y adaptar tres de los ejemplos disponibles, concretamente el conectar.php, insertar.php y listar.php. Modifico los parámetros para que se ajusten a mi formulario, pero antes de poder finalizarlo, veo que en insertar.php debo introducir los REQUEST del formulario, por lo que tengo que adaptar éste a php, para que pueda mandar los parámetros de interés a la bbdd.

Para eso, creo un archivo form.php, y copio el código html que estaba en form.html. Además, tengo que incluir el código php que me «exporte» los parámetros que quiero (los 6 campos del formulario).

Por ahora estos son los tres archivos antes mencionados:

Me daba fallo al probar la bbdd, y era porque el nombre que teia puesto en los archivos php era form en vez de form_db. Una vez que lo he cambiado, ya funciona, tal y como puedo comprobar aqui:

Como ahora solo está el esqueleto, tengo que modificar la página del formulario, para que tenga un estilo bonito, además de volver a retomar el punto de mejorar el estilo del formulario en el index.

22/05/20

He añadido el estilo a la pagina del formulario (form.php), y he cambiado los href para que me vuelvan a la página inicial, que por ahora sigue siendo index.html.

El siguiente paso es transformar la página principal (index.html) a php. Para ello la idea es coger todas aquellas partes que se podrían repetir en sucesivas páginas, y pasarlas a código html más simple, de manera que se transforme index de html a php, y ahí simplemente se llame (require_once) a las partes html. Pruebo inicialmente con el footer, que es una sección que estará en todas las páginas, y vemos el resultado.

Vemos que en apariencia está igual, pero hemos conseguido por un lado simplificar la página inicial, y por otro facilitar si queremos hacer cualquier cambio en el footer.

Me he dedicado a separar cada una de las secciones de la página principal en partes más pequeñas en html, para simplificar su posible edición, y mediante php he logrado que se muestren en la página de inicio, que ahora es index.php, y ocupa una sexta parte que inicialmente. Además he reorganizado la estructura de carpetas, de cara nuevamente a simplificar la mejora de código en un futuro.

El siguiente paso en que me voy a centrar es por un lado mejorar estéticamente el formulario, tal y como se me comentó en la realimentación, y en embellecer la página que lista la BBDD, que actualmente no tiene ningún estilo. La idea es que sea fácil de leer, pues tampoco interesa decorarla en exceso.

28/05/20

He estado los últimos días puliendo detalles del formulario, para que si no completas ciertos campos te avise y no te deje avanzar. Queda así:

Respecto a la página que permita visualizar los datos almacenados en la BBDD, es accesible, pero he decidido no darle estilo puesto que en la realidad esta página no estaría ni siquiera disponible, ya que supone un gran problema de privacidad y seguridad. Ésta sería la vista de las pruebas realizadas.

Finalmente, voy a dar los últimos detalles relativos a la realimentación de la entrega intermedia, y ya se cierra esta versión. Como apunte, y de cara al futuro me gustaría modificar el estilo del formulario, de cara a tener una apariencia más profesional, pero por falta de tiempo ahora mismo no puedo implementarlo en estos momentos.

Como resumen de esta entrega final, se ha creado la BBDD de acuerdo a las necesidades de mi formulario, se han desarrollado los archivos que permiten tanto incluir nuevos datos en la tabla como visualizarlos, se han pulido detalles de la página y se ha hecho la transformación de html a php, simplificando enormemente el código y facilitando la futura modificación de las distintas secciones.

---

Sigue mi blog

Recibe nuevo contenido directamente en tu bandeja de entrada.