Servidor Host

http://javea.site11.com

PHP

Para introducir el PHP en la página web he seguido los mismos pasos del ejemplo que estaba en moodle. Para ello he utilizado lo mismo que venia hecho y lo he incorporado a mi web de la mejor manera posible y que quedara conforme con lo que buscaba tener, que en mi caso es una lista de calas que están en Jávea.

Esto es lo que sale cuando pinchas en el menu la pestaña de calas. Esto solo te aparecera si esta subido al servidor host. Si lo habres teniendo el fichero en el ordenador y no lo has subido te deberia aparecer algo como esto:

He utilizado el PHP que venia de ejemplo pero como he tenido problemas a la hora de renombrar los ficheros, la mayoria se llama igual que en el ejemplo. Todos los ficheros PHP estan incluidos en la carpeta editorCalas que esta en el zip.

Para modificar las cosas he utilizado el phpMyAdmin que esta el el servidor.

http://www.000webhost.com 

Aquí he cambiado el numero de caracteres que debian tener los respectivos campos como pueden ser el de acrónimo, que yo lo he utilizado de nombre de las calas. Tenia puesto que solo podia tener 10 caracteres y lo modifique para que me pudiera entrar el nombre de las calas completo. Y así en los sucesivos campos.

También cambié el nombre de la base de datos que la llamé noticias y deje los mismos campos que venían en el ejemplo. He utilizado JSON y MYSQL para poder hacer la lista de las calas.

Formatos de la imagenes

En la pagina web como podrás observar, hay muchas imágenes introducidas por toda la pagina, y un problema que tenia era poder cuadrar las imágenes. para ello utilice el programa online "pixlr" para poder cambiar el numero de pixeles que quería que tuviese etc.. .

 Con este programa también  fui capaz de recortar el logo que tenia en forma de circulo para que quedase mas cool. Este programa me ha ayudado bastante porque si no hubiera podido cambiar el numero de pixeles en las imágenes no se que hubiera hecho.

Y así es como ha quedado mi galería de fotos:

 

Y si pinchas en una imagen , la imagen se hace mas grande.

Una vez subida la galería al host, a la primera no me suele funcionar, pero si le das a actualizar una segunda vez ya podrás ver la galería como debería ser. Es decir, dividida en las secciones del margen que son: arenal, varios y calas/puerto.

Load de jQuery

El load de jQuery me funcionó perfectamente. Lo que hice fue introducir todos los enlaces que necesitaban utilizar este load en un fichero llamado mi-jquery.js.

Para que quedara mas bonito le introduje varias cosas a la hora de cambiar de pestaña en el menu. Una de las cosas que cambie fue la de eliminar la parte de la portada en la que salen las fotos de javea para que al cambiar de tema no apareciesen y tuvieras mas hueco para escribir. Y la otra cosa que introduje (ya que al quitar las fotos el contenido se subía hasta arriba del todo) fue fue poner un margen superior que hiciera que no solapara el menú con el nuevo contenido introducido.

Quise introducir una imagen como fondo del menú de arriba al cambiar de pestaña, ya que quedaba un poco soso. Pero al intentar cambiar el elemento de background en jQuery e introducir la imagen, no lo detectaba.

Conmutador de estilos

El conmutador de estilos me dio muchos problemas en esta nueva plantilla. Lo primero que hice fue mirarme el ejemplo que había en moodle e intentarlo hacerlo igual. Al principio todo parecía que iba bien porque me salían los cuadraditos para cambiar de color pero eso no cambiaba. Entonces fue cuando vi que me faltaban algunos scripts, pero al introducirlos todo el formato de la pagina se descuadraba y no se veia nada.

Al no encontrar el error de lo que pasaba, fui a una tutoría y vi que tenia que introducir las cookies y borrar el script del estilo original e introducir el nuevo con el colorchanger, al fin me funcionó. 

Ya por ultimo al cambiar al color amarillo, solo me cambiaba la pagina principal y no cuando cambiaba de pestaña en el menú. Lo que pasaba es que tenia que borrar otra vez en cada pestaña el estilo que venia y un sript de reset.css que hacia que no funcionara.

Así es como a quedado mi segundo estilo. He cambiado el tipo de letra para que se notara el cambio significativo, el menú lo he puesto vertical como se sugería, he cambiado el fondo del contenido con el mismo fondo el body. Y por último pequeños detalles que hacen que sea distinto. 

Comienzos con la nueva plantilla

Lo primero que he hecho en la pagina web es crearme un logo que se correspondiera con mis gustos, para ello he utilizado un programa llamado logo creator y este es el resultado:

Una vez que ya tengo el logo, lo he introducido en el programa que usted facilito (la paleta de colores) para sacar los distintos colores del mismo y así poder aplicarle los colores correspondientes a la pagina web. Todo esto sirve para poder aplicarle los colores adecuados a la pagina web y que todo cuadre y quede lo más profesional posible.

He utilizado el estilo inicial que venia en la plantilla al principio para hacer el estilo verde. Solo he cambiado un par de cosas como las zonas donde venia texto, algunos enlaces que he introducido nuevos y ciertas cosas que he quitado porque no las necesitaba.

Plantilla definitiva

Esta es la nueva plantilla que he usado para hacer la página web, porque las otras 2 que probé anteriormente no me convencieron del todo.

Esta fue una de las que probé, y que estuve varias semanas trabajando.

Pero al final cambié de plantilla porque no me convencía y perdía mucho tiempo para solucionar varios problemas que me surgían. A pesar de que me funcionaba el conmutador de estilos y el load de jQuery perfectamente.