Blog de wleagues

Colores, imágenes

Escrito por wleagues 13-04-2018 en fondo. Comentarios (0)

Los colores elegidos son tonos oscuros (negro, gris) ya que pega con los logos de la LCS y la LVP. Por tanto, tras hacer el menú en tonos oscuros, con un degradado, a la hora de escoger el color del footer me decanto por un lightgrey.

Las imágenes están todas cogidas del flickr de lolsports y están editadas con Adobe Photoshop para dejarlas más transparentes, permitiendo que se lean las letras de la página web y para reducir el peso. A continuación dejo el antes y después de una de las fotos. Esta foto está escogida para la pantalla de "agradecimiento por contactar" pensando en que representa a una persona en el ordenador, centrada en responder lo antes posible el mensaje que el usuario acaba de enviarnos.




Formulario - Agradecimiento

Escrito por wleagues 13-04-2018 en formulario. Comentarios (0)

Para hacer la sesión de contacto me basé en un formulario estándar de Bootstrap, añadiendo un campo de múltiple opción. Los campos necesarios están marcados como required para que no se vaya a la página de agradecimiento sin haber rellenado los datos. El método utilizado es un método "get" ya que con "post" Neocities (sitio web elegido para el hosting) daba errores. 




Comenzando la web

Escrito por wleagues 13-04-2018 en web. Comentarios (0)

Llega el momento de dar los primeros pasos con la página web. Para ello empiezo a mirar plantillas de Bootstrap a ver cuál encaja más con mi idea. 

Al ir a hablar de dos ligas, lo primero que pienso es en hacer un carrusel al principio del index en el que haya dos fotos, una de cada liga. No tenía muy claro cómo seguir pero tras ver un par de plantillas y de páginas webs, me gusta la idea de explicar las secciones en grupos de a 3 con la estructura icono-heading-explicación. Una de las plantillas en las que más me fijo es colorlib


Portada colorlib


El menú con el carrusel no me convencía y decidí usar el predeterminado de Bootstrap, tocando un poco los ajustes para hacer un degradado en el color de fondo. Los iconos de los grupos de 3, los cojo de la biblioteca font-awesome y les aplico un CSS para que cuando se pasa por encima (hover) para que se hagan más grandes. También aplico un hover a los enlaces del menú, por el cual cuando el ratón pasa por encima, la opción es envuelta por una cápsula de borde negro, fondo blanco y las letras se ponen blancas para contrastar.

captura-de-pantalla-2018-04-13-a-las-20.08.54.png1ª foto del carrusel, en la que se observa el hover del menú.

2ª foto del carrusel.

A toda la sección de los emoticonos, además, le añado un plugin jQuery (waypoints) que permite detectar cuando se hace scroll hacia arriba y hacia abajo, para poderles añadir una clase fadeIn (aparecen cuando haces scroll hacia abajo) y fadeOut (desaparecen cuando haces scroll hacia arriba) según navegas por la página. También empleé una hoja de css externa para ello, AnimateCss.

Finalmente, para el footer, escojo hacer un modelo visto en la web de la lvp y hacer 3 columnas: una explicando el proyecto, otra con la navegación por la página, y otra con las redes sociales de la página web. Adjunto primero el footer de la lvp y posteriormente el mío.

captura-de-pantalla-2018-04-13-a-las-20.21.37.png


+


Investigando por bootstrap, descubrí los "modal" y se me ocurrió utilizarlo para la ventana de login. Aun es una ventana muy precaria cuyo principal problema fue darme cuenta de que el contenido del modal había que definirlo fuera del navbar para que se visualizase correctamente al pulsar el botón (sino se quedaba la pantalla oscura y no se desplegaba la ventana). Como dije, todavía es una ventana muy básica, pero que dejo para ir avanzando.


Por otra parte, utilice un plugin de jquery que es una cuenta atrás. La idea era hacer una página que dijera "la página web estará lista en x días y minutos z segundos" pero tras probar con dicho plugin en pantallas pequeñas, me di cuenta de que no era responsive y se metía en el footer y por eso lo quité.


Yo estuve ahí

Escrito por wleagues 28-02-2018 en foto. Comentarios (0)

Este post va creado a explicar el proceso de creación del siguiente fotomontaje en el que aparecemos Camila Cabello y yo en la puerta de la ETSIT.


El fotomontaje parte de las siguientes fotos:


Con photoshop, abrimos la foto de la ETSIT y posteriormente las otras dos como elementos incrustrados. En dichas fotos, colocadas como capas superiores al fondo, creamos una máscara vectorial negra, lo que hace que solo se vea aquello que se pinta en color negro con el pincel. Con cuidado y con pinceles de diferente tamaño, vamos coloreando solamente la parte en la que salimos ambas personas, para para que solo se nos vea a nosotros. En el caso de que por error aparezca el fondo, con cambiar el color de pincel de negro a blanco, se invierte y en vez de que aparezca la máscara, desaparece (una acción de borrar). Esta es una técnica utilizada en Photoshop para diferentes cosas como este tipo de montajes, o hacer desaparecer gente de fotos con documentos siempre que se tengan varias tomas en las que las personas se vayan moviendo. Finalmente, con la herramienta de texto de Adobe Photoshop, incluimos lo que queramos, en este caso, mi nombre.


Bienvenida

Escrito por wleagues 14-02-2018 en esports. Comentarios (0)

Bienvenidos a WLeagues.

En este blog iremos siguiendo la planificación de un sitio web  (WeLeagues) en el que podremos seguir la información de las Ligas profesionales del videojuego League of Legends (en las que participa España, EU-W(Europa Oeste, por sus siglas en inglés) y LVP).

El objetivo de esta página web es proveer información a los usuarios del funcionamiento de ambas ligas, de calendarios y resultados, noticias, apuestas y una sección para poder conocer más a cada equipo y a personas conocidas dentro de este universo.

Otra idea es que los usuarios puedan votar un quintento de mejores jugadores cada jornada y liga y un MVP global en cada jornada y liga.

Dos webs relacionadas con estas competiciones son las siguientes:

LolSports 

LVP

Dichas páginas webs tienen una estructura con diferentes secciones. Lo que menos me gusta de la primera, LolSports, es la gran saturación de información que hay en una misma pantalla. Por lo demás, ambas me parecen dinámicas y muy visuales, sin embargo, no fui capaz de encontrar una sección en la que los aficionados puedan votar a los mejores jugadores o a sus favoritos. También pienso que tienen un menú poco intuitivo, que para ir de algunas secciones a otras tienes que volver muy atrás (por ejemplo de la información de un equipo a otro en LolSports).

En la de LolSports también es difícil encontrar información del funcionamiento de la Liga, una información que debería estar más accesible, como si lo está en la LVP.



El público al que está dirigido esta dirigido WeLeagues es a todos los seguidores del videojuego League of Legends y su competición profesional. Dicho público se espera que crezca exponencialmente en los próximos años. De hecho, ya se observó un increíble crecimiento en estos últimos años. Por otra parte, también me gustaría tener una sección en la que se explique cómo funciona el juego para gente que se inicie desde cero.

El objetivo es conseguir una web muy intuitiva, en la que los usuarios puedan interactuar y ser partícipes. Una web en la que no haya que hacer mil clicks y buscar en mil sitios para encontrar las bases de competición o para poder saltar desde un equipo a otro para poder compararlos y ver sus estadísticas, tiene que ser una página fácil y entretenida para los visitantes.

En un principio, la página web contará con las siguientes secciones:

  1. Explicación del juego.
  2. Explicación del funcionamiento de las ligas.
  3. Noticias, rumores.
  4. Calendarios y resultados.
  5. Equipos: Jugadores, estadísticas.
  6. Comparador de equipos.
  7. MVP´s y votaciones.
  8. Apuestas: dónde informarse y dónde votar.
  9. Fases presenciales: información, fechas, localización, entradas.