lunes, 30 de diciembre de 2013
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".
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:
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.
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:
lunes, 9 de diciembre de 2013
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í:
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.
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.
miércoles, 30 de octubre de 2013
PALETA COLORES WEB
ELECCIÓN DE LA GAMA DE COLORES DE MI WEB:
Para la realización de este apartado voy a tener en cuenta sobre todo el tema de mi página web. Por tratarse de un deporte que se practica en la montaña en un entorno nevado, me parece que los colores que más podrían encajar serían de gama fría.
He usado la técnica de colores análogos, ya que ofrece más matices que el monócromático y no voy a mezclar en ningún momento colores cálidos.
En contraposición, quiero que el logo de mi web destaque en ese entorno frío (lleno de tonos azules y verdes) por lo que me saldŕe de sus colores adyacentes
La gama de colores correspondiente a mi logo viene definida en la siguiente paleta:
Para el segundo estilo de mi pagina web he decidido optar por una gama de colores contrapuestos, dando una imagen más llamativa. En mi caso he decidido superponer colores flúor muy cálidos sobre una tonalidad oscura, que da un buen resultado y destaca los elementos de menú, imágenes y letras. Aquí la paleta en la que me he basado para este nuevo estilo:
Para la realización de este apartado voy a tener en cuenta sobre todo el tema de mi página web. Por tratarse de un deporte que se practica en la montaña en un entorno nevado, me parece que los colores que más podrían encajar serían de gama fría.
He usado la técnica de colores análogos, ya que ofrece más matices que el monócromático y no voy a mezclar en ningún momento colores cálidos.
En contraposición, quiero que el logo de mi web destaque en ese entorno frío (lleno de tonos azules y verdes) por lo que me saldŕe de sus colores adyacentes
Para el segundo estilo de mi pagina web he decidido optar por una gama de colores contrapuestos, dando una imagen más llamativa. En mi caso he decidido superponer colores flúor muy cálidos sobre una tonalidad oscura, que da un buen resultado y destaca los elementos de menú, imágenes y letras. Aquí la paleta en la que me he basado para este nuevo estilo:
miércoles, 18 de septiembre de 2013
Presentación: todo sobre el esquí español
Mi proyecto consiste en crear, dentro de mis limitaciones en conocimientos de desarrollos web, un lugar en internet donde cualquier usuario esquiador pueda acceder a la información más relevante sobre cualquier estación de la Península en una misma página. De una forma clara y resumida, el usuario puede hacerse una idea general de todo el panorama esquiador español sin necesidad de acceder a todas las web oficiales de las distintas estaciones, y pudiendo componer una rápida comparación.
Esta web va dirigida principalmente a gente española aficionada a este deporte, que tenga una idea aproximada de las estaciones más conocidas a nivel nacional y que quiera decidir, por ejemplo, su destino de viaje en un fin de semana de febrero. Por otro lado, la web va a constar tanto de precios de alquileres como de informacion de cursillos para aquellos que aún no conocen el deporte y necesitan hacer una valoración calidad-precio rápida de dónde les gustaría empezar a probarlo. Por último, tambíén va dirigido a un público extranjero que no conoce esta "otra cara" de España, lejos de aquella imagen de únicamente actividades con sol y playa que hay de la Península a nivel europeo. La web va a contar con apartados que les expliquen las distintas formas de llegar y dónde poder alojarse una vez allí.
La página web va a ser un portal de información continuamente actualizado según las publicaciones que vayan haciendo las web oficiales de las estaciones que vaya a comentar. Por ello, crearé una web que tenga acceso directo a todas las webs oficiales de las distintas estaciones de la Península, facilitando al usuario la búsqueda de la información principal de cada pista sin que divague por internet y pierda más tiempo.
Como he remarcado, cada una de las secciones por cordillera va a constar de un parte sobre la calidad de la nieve de la pista y los kilómetros esquiables, así como de la información meteorológica a plazos relativamente largos. Por otro lado, habrá enlaces directos a las distintas webcam que tienen colocadas las pistas en puntos estratégicos para que se puedan ver de primera mano los remontes y la cantidad de gente que hay. Por último, habrá un mapa de remontes y una sección donde permitiremos al usuario ponerse en contacto por nosotros por si quiere añadir alguna pista nueva o tiene alguna sugerencia para mejorar nuestro servicio.
Por último, es imprescindible la sección de precios: ciertamente no todas las estaciones publican con exactitud la cantidad a pagar a la hora de alquileres de equipación o FORFAITS, ya que eso les limita y compromete a exigir ese precio al cliente una vez en la estación. En verdad, las estaciones más pequeñitas se reservan esa información y la deciden según la cota de nieve del año y la demanda según temporada. Por ello, me voy a centrar en las estaciones más grandes, que sí publican todos los precios, tanto de cursillos, como de alquileres (si puedo también con fianzas), y por supuesto de FORFAITS en sus distintas modalidades (mañana, tarde...).
Esta web va dirigida principalmente a gente española aficionada a este deporte, que tenga una idea aproximada de las estaciones más conocidas a nivel nacional y que quiera decidir, por ejemplo, su destino de viaje en un fin de semana de febrero. Por otro lado, la web va a constar tanto de precios de alquileres como de informacion de cursillos para aquellos que aún no conocen el deporte y necesitan hacer una valoración calidad-precio rápida de dónde les gustaría empezar a probarlo. Por último, tambíén va dirigido a un público extranjero que no conoce esta "otra cara" de España, lejos de aquella imagen de únicamente actividades con sol y playa que hay de la Península a nivel europeo. La web va a contar con apartados que les expliquen las distintas formas de llegar y dónde poder alojarse una vez allí.
La página web va a ser un portal de información continuamente actualizado según las publicaciones que vayan haciendo las web oficiales de las estaciones que vaya a comentar. Por ello, crearé una web que tenga acceso directo a todas las webs oficiales de las distintas estaciones de la Península, facilitando al usuario la búsqueda de la información principal de cada pista sin que divague por internet y pierda más tiempo.
Como he remarcado, cada una de las secciones por cordillera va a constar de un parte sobre la calidad de la nieve de la pista y los kilómetros esquiables, así como de la información meteorológica a plazos relativamente largos. Por otro lado, habrá enlaces directos a las distintas webcam que tienen colocadas las pistas en puntos estratégicos para que se puedan ver de primera mano los remontes y la cantidad de gente que hay. Por último, habrá un mapa de remontes y una sección donde permitiremos al usuario ponerse en contacto por nosotros por si quiere añadir alguna pista nueva o tiene alguna sugerencia para mejorar nuestro servicio.
Suscribirse a:
Entradas (Atom)