PUBLICACIÓN

    Para la publicación de mi web, he usado el dominio proporcionado por "http://www.000webhost.com/" a través de FILEZILLA. He introducido los datos de mi dominio (servidor, usuario y contraseña) y lo he subido de forma pública en una carpeta llamada "web".

¡¡¡Si quieres visitarla, simplemente pulsa en este enlace!!!

PHP DE CONTACTO

    La página dispone también de una sección de contacto mediante la cual se hace posible que los visitantes de la web puedan mandar comentarios directamente a mi correo. Para ello me he descargado una plantilla que consta de un documento .php y de unas líneas de código para el html que comportan el formulario completo.

PHP

HTML

RESULTADO

DOMINIO Y BASE DE DATOS

    El siguiente paso a seguir es la creación de un "dominio" web que nos permita subir la página a internet y que ésta sea visitable, así como la asociación de una base de datos. Yo me he basado en una práctica que hice en mi clase de TEWC, en la cual los pasos a seguir eran muy sencillos: te loggeas y rellenas una serie de datos ("http://www.000webhost.com/"), y automáticamente se te proporcionará un sitio web:

    Es importante, sobretodo, tu dominio, tu usuario y tu contraseña, ya que van a ser necesarios para la creación de la base de datos.

    En mi caso, y analizando el servicio puramente informativo de mi web, he decidido usar ésta para que me facilitara la tarea de exposición de cada una de las pistas de esquí. Me explico: mi base de datos es de inserción, y va a ser la encargada de "rellenar" la información de cada una de mis secciones cuando el usuario abra la página; ésto me ahorrará tiempo (no lo tengo que redactar en el html) y además, me permite ordenarlo mejor debido a su  estructura de tablas.

   En primer lugar, he creado una tabla llamada "estaciones" dentro de una base de datos facilitada por mi profesor ("a9414963") importando un archivo .sql (en mi caso llamado miSQL.sql) que refleja el número de filas de mi tabla a rellenar. He includo una primera fila llamada ID y una última que contiene una imagen.

        En mi archivo .sql he introducido absolutamente toda la información de mi web: las pistas están ordenadas según la cordillera en la que se encuentran (secciones de menú en mi web), la URL de su web oficial y una imagen de la pista asociada.

    Para la puesta en marcha de la base de datos, he tomado como referencia dos ficheros .php que nos ha proporcionado el profesor de TEWC en un ejemplo que nos ha colgado en la plataforma moodle.

            

       Y he añadido un sencillo código php a mis distintos apartados html para que "imprima" por pantalla su contenido correspondiente de la base de datos. Éste es el html del apartado "Pirineo aragonés"

Tras la creación de estos códigos, mi base de datos está sincronizada con la página web:

           Y éste es el resultado al cargar la página:

                                                                          

CONMUTADOR DE ESTILO

    La página consta de un único código html que cambiará su aspecto visual a partir de dos hojas de estilo css (style.css, style2.css) que ofrecerán un aspecto completamente distinto frente a un mismo contenido.

     Para que fuera posible, en un primer momento decidí dotar a mi página de un sencillo scrip con la siguiente forma:

<script>
function loadCss(css) {
    if(document.getElementById('estilos'))
        document.getElementsByTagName('head')[0].removeChild(document.getElementById('estilos'));
      var x = document.createElement("link");
    x.rel="stylesheet";
    x.href=css;
    x.id="estilos";
      document.getElementsByTagName('head')[0].appendChild(x);  
}
window.onload=function(){loadCss('estilos_1.css');}  
</script>

      El compañero que me recomendó este método no fue consciente de que no "guardaba" el estilo que se estaba ejecutando, un problema básicamente de cookies. Por ello me descargué un ejemplo visto en mi clase de TEWC y lo tomé de modelo: copié y modifiqué los js cookie.js y mijquery.js en base a mi página e indiqué en cada uno de mis documentos html lo que había que importar.

Encabezado de mi código html de INDEX:

    En la vista en web simplemente aparece indicado así:

    El primer estilo es el que está depurado y trabajado, el segundo estilo ha quedado más "feo", pero he preferido centrarme más en un css.

DESARROLLO WEB

        En este apartado hablaremos paso a paso de la creación del contenido de la página web. Para empezar, decidí buscar una plantilla que se adecuara al diseño que mejor me cuadrada: la conseguí de www.freecsstemplates.org/  .La elegida fue una sencilla, una escructura muy limpia y sin demasiados apartados, un css "corto" y bastante intuitivo y un unos elementos js no demasiado enrevesados.

       Comencé editanto mi INDEX (la página central). Para ello me creé un logo: obtuve la imagen principal de google.com y la edité junto con el nombre de mi página TODOESQUI.es. Este logo tiene un enlace asociado que consigue que al pulsarlo te lleve siempre a la página principal.  El resto de imágenes han sido descargadas y retocadas con ayuda del editor fotográfico PIXLR

       La web presentará un script "carrusel" que se encargará de ir rotando tres fotos y un "footer" donde podemos encontrar un enlace que redirecciona directamente a este blog.

Aquí el aspecto principal de mi página web:









He indicado el scrip que permite dicha rotación (código visto desde NOTEPAD++)









        

      Lo siguiente fue editar cada página del menú: creé un nuevo documento html para cada apartado (cada uno indicando una cordillera), los vacié enteros según venía en la plantilla y les puse un menú vertical-horizontal que complementé con un css encontrado en http://www.w3schools.com/css/css_image_gallery.asp que creo que va muy acorde. Cada imagen de este menú es una foto de la pista y un enlace directo a la página oficial de cada estacíón.

    Cada contenido de pistas de las distintas secciones se completará mediante el uso de una base de datos asociada, que explicaremos más adelante.