martes, 7 de julio de 2015

CAMBIOS

Para empezar, he decidido añadir BS3 a mi web y tras un buen rato mirando plantillas me decidí por ésta ( http://startbootstrap.com/template-overviews/agency/ ) ya que su funcionalidad encaja con mi idea y se parecía a la anterior que había hecho por lo que no ha supuesto mucha complicación.
¨
Ésta es la pantalla principal de mi web con la plantilla sin cambiar y he decidido poner una imagen más acorde a mi tema. Después de buscar en Internet fotos y luego probarlas para ver cuál queda mejor, con cuál el texto se visualiza correctamente, cuál no se pixela etc.. Mi decisión final ha sido ésta, el momento de salida de un triatlón donde intentamos empezar con fuerza para buscar una buena posición sin nadie que nos de patadas o codazos(siempre sin querer claro está), así intento captar al lector con fuerza desde el momento que empieza a navegar por mi web.

Las secciones originales son services, portfolio, about, team y contact. Las cuales he cambiado y adaptado a mi web pensando en el orden en el que aparecen a carreras, multimedia, logros, club y contacto. El orden está pensado para atraer al lector de manera que sepa al principio cuáles son mis siguientes objetivos más próximos. Luego había pensado añadir inmediatamente después las carreras pasadas pero me parecía que podia resultar aburrido de tanta carrera por lo que entre medias puse una parte multimedia donde he subido unas fotos mías llegando a meta y otra entrenando en bici con un amigo.


 Además, pinchando en cualquiera de las imágenes aparece un breve texto donde hablo de cómo me inicié en el triatlón. Está puesto así para sorprender al lector ya que en ningún lado comento que pinchando se accede a otra recurso. Nada más abrirse aparece antes del texto la foto de mi debut donde se aprecian un poco los nervios ya que para un debutante genera bastante estrés el tema de las transiciones ya que cualquier fallo puede ser motivo de descalificación y estropear tu primer día en la disciplina.




Antes de multimedia, en el apartado de carreras anticipo una breve información (fecha, precio, lugar) de las 3 próximas. Incluso, añado un mapa heredado de Google por si algún seguidor le apetece venir a verme así le facilito la localización de donde se celebra el evento.

 Inmediatamente después aparece la sección de logros, la cual mediante burbujas y a modo cronólogico van apareciendo las carreras ya pasadas. Había pensado hacer como en la sección de multimedia, me refiero a que si pincho se acceda a otro recurso para comentar las sensaciones durante la carrera y el tiempo total ya que se haría igual que el anterior pero no me ha dado tiempo, en un futuro no lejano acabaré implementándolo.

La parte de club comento un poco cómo es la estructura por medio de imagénes de las cabezas mas visibles igual que añado una cita del fundador y el logo del club. Espero en unos años ya cuando termine la carrera y tenga más tiempo para dedicarme al triatlón, si el trabajo me lo permite, que la gente me tenga como persona motivante igual que yo tengo a estos tres, ya que soy seguidor activo de cualquiera de sus redes sociales igual que me he leído los libros que han sacado.


Me ha parecido super interesante la manera de enlazar directamente sus perfiles de todas las redes sociales que tienen, ya sea Facebook, Instagram, Twitter o Youtube(de hecho al final de la web enlazo yo también mis redes sociales igual que un link directo al blog) ya que son medios gratuitos a traves de los cuales puedes conseguir una parte muy importante de publicidad para tu empresa igual que interaccionar con tus seguidores. Además, añado un link a la web del club por si consigo atraer algún seguidor más, pues bienvenido sea!


Finalmente, en la sección de contacto se implementa 4 cuadros de texto para añadir tu comentario junto con tu nombre, teléfono y email para una comunicación más fluida. De igual manera seguidamente añado un formulario hecho con PHP por si se quiere suscribir a un boletín de noticias donde añado planes de entrenamiento a seguir en función de la modalidad elegida.






miércoles, 24 de junio de 2015

tewc final

Finalmente, la web consta de lo siguiente:


  • NOTICIAS: esta es la sección principal, en ella aparece información sobre próximas carreras y noticias de carreras pasadas, con enlaces a otras secciones donde todo viene más detallado.
  • COMIENZOS: aquí se narra un breve resumen de mis inicios ene l triatlón.
  • MULTIMEDIA: en esta sección encontramos fotos mías entrenando o en carreras solo o con amigos.
  • CLUB: biografía del club al que pertenezco.
  • CARRERAS: muestra información sobre futuras carreras. Lugar, precio, fecha, hora... Además cuenta con un mapa para la localización.
  • CONTACTO: incluye un formulario para contactar conmigo además de otras formas como twitter, facebook, etc.

explicaciones

Lo primero que hice tras tener claras las secciones y la forma que quería que tuviese mi página, me dispuse a elegir la plantilla, algo que no fue fácil debido a la gran variedad que encontré. Finalmente me decanté por esta: plantilla.
A continuación empecé a recopilar fotos, enlaces y vídeos que suponía que necesitaría, y las fui guardando en los directorios 'images' .
Con esto hecho me dispuse a leer por encima el código para enterarme un poco de qué iba y cómo estaba hecha cada cosa y cada sección. Cada sección era un archivo .html diferente, lo que decidí dejar así solo que cambiándoles el nombre, y por lo tanto cambiando posteriormente el enlace dentro de cada archivo que cambiaba de sección al pulsar sobre él.
Este mismo cambio lo hago en los .html de todas las demás secciones.  Al enlace correspondiente a la sección en la que se está se le pone class="active", ya que el css retoca los enlaces de esta clase poniéndolos de un color distinto.


Tras cambiar el <title> de cada sección y añadir el tipo de documento, la codificación, etcétera; analicé la forma de los archivos .html. Todos se dividen de la misma forma: primero tenemos el head, donde simplemente cambié el <title> mencionado anteriormente por 'Triatlón'; luego tenemos el body, donde se incluyen header, content y footer. En el header cambiamos los enlaces como he explicado previamente, y añado las imágenes que quiero que se vean en el 'slider'(NO CONSEGUÍ HACERLO, TUVE PROBLEMAS PARA IMPLEMENTARLO), y que he elegido previamente. Cada imagen es un elemento de una lista <ul>.

En 'content' simplemente cambio los textos ya que me gusta la organización que tiene. Además, añado un link en cada 'titular' de las noticias que te lleva a la noticia ampliada que quieres leer; lo mismo con los carreras.

Tras esto, creé una especie de 'noticiario extendido' donde explica más detalladamente cada noticia. Este apartado es completamente nuevo ya que no aparecía en la plantilla. Lo creé con un <div> dentro de un <article> para seguir con la misma organización que traía la plantilla, y a ambos les puse un atributo 'class' para retocarlos después con el .css. Añadí aquí todas las noticias, con vídeos, imágenes, etcétera; y también un botón 'Subir' que te lleva a la parte de arriba de la página. Antes de cada titular puse un enlace con atributo 'name' (distinto en cada noticia) para que los lleve hasta cada una de ellas al pulsar sobre el enlace 'Leer más' que puse en el apartado anterior.
Continué retocando el código de la plantilla para incluir unos apartados que me parecían convenientes, como el de  'Frases de Motivación' para que nunca pierdas las ganas por entrenar.


Por último, me dispuse a modificar el 'footer'; en el que suprimí la publicidad de la plantilla, añadí a cada icono (Facebook, Twitter, Youtube) un enlace que llevase a nuestra cuenta de los distintos sitios, y creé un icono nuevo para que llevase a este blog. Lo hice cogiendo una imagen del icono de 'blogspot', y mediante el pixlr, tras copiar uno de los demás iconos, conseguí meter el icono del blog dentro del círculo en el que aparecían los demás.En un principio ésta era mi idea pero tampoco pude implementarlo.

Para finalizar la he subido a un sitio de host gratuito, así que se puede ver el resultado final en el siguiente enlace: http://pedroignaciomora.neocities.org/tewcfinal.html

domingo, 14 de junio de 2015

PROYECTO FINAL

De las secciones que más orgulloso estoy es de la de "Comienzos" ya que escribo sobre algo que nunca había hecho antes para acercarme a mis seguidores y de la sección "Carreras" ya que gracias al mapa es más sencillo para la gente saber dónde corro y poder venir a verme, a ver si alguno se anima ;)

Durante la realización de la página web me he encontrado con varios errores que he sido incapaz de solucionar por mucho que he buscado en foros.

A la hora de diseñar mi página principal tenía pensado enlazar varios fotos para que vayan pasando automáticamente que es un estilo que suele quedar muy bien y bastante usado en webs de este tipo y a pesar de probar unos códigos y otros he sido incapaz de mostrar las fotografías.

En el apartado multimedia, donde cuelgo 5-6 fotos mías entrenando o en medio de alguna carrera debido a algún error que no consigo entender no sé si del css del tamaño de la foto o qué, sólo aparecen las dos primeras. De nuevo mirando en Internet y preguntando a amigos que estudian Ingeniería Informática tampoco hemos dado con ello.

Por último, quería añadir en el footer un apartado de redes sociales debido a su auge en estos momentos y su facilidad para comunicarse con los seguidores los típicos iconos de Instagram, Facebook, Twitter o canal de Youtube para que con simplemente pinchar se redireccionase a mis cuentas.

De todos modos, creo que he conseguido una web bastante decente y puliendo estos fallos podemos empezar a movernos en la world wide web.

PLANIFICACIÓN

TIPO DE WEB
Mi propósito es crear una web que me pueda ser de utilidad en un futuro, por ello me dispongo a crear una página de mi afición por el triatlón algo que llevaba queriendo hacer mucho tiempo ya que así unía parte de mi carrera con mi ocio personal.

OBJETIVO
Me servirá para contar mis experiencias y sobretodo, para que la gente que quiera tenga un lugar donde seguir mi actividad y mis logros. Iré colgando fotos de entrenamientos como de carreras pasados e info de las carreras futuras. También dejo mis direcciones de Facebook, Twitter o Instagram por si algún novato(entre los que yo me incluyo aún) tiene alguna duda que pueda resolver.

PÁGINAS WEB SIMILARES
Hay numerosas páginas webs de la misma temática, ya que la mayoría de clubs de triatlón que se lo pueden permitir la tienen, por ser algo de muchísima utilidad tanto para mí como para los seguidores. Algunas en las que tenía pensado inspirarme son:

http://whereisthelimit.com/
http://www.triatlonmadrid.org.es/
http://www.marlinstriatlon.es/

SECCIONES DE DICHA WEB Y SERVICIOS OFRECIDOS

En todas las páginas webs mencionadas previamente encontramos más o menos la misma organización y ofrecen servicios similares, los que debe ofrecer toda web de cualquier club de triatlón.

Todas ellas disponen de una sección especial, una especie de noticiario, donde van colgando experiencias sobre carreras pasadas e información sobre carreras futuras pero sin demasiada información porque para eso ya hay otra sección, simplemente a modo de anuncio.

También encontramos otra sección dedicada al apartado de multimedia donde se puede ver fotos de gente tanto compitiendo como entrenando,

Incluso existe una sección que consiste en una biografía del club en la que cuenta cómo se formó y cuáles fueron los inicios e influencias.

La mayoría de estas secciones son las que se encuentran en la mayoría de páginas webs de clubs de triatlón son las que tengo pensadas añadir a la mía, más alguna que se me pueda ir ocurriendo a lo largo de la realización de la página.