Daniel Cabiscol

Diseñador UX/UI y Desarrollador Web

OutLaw Gaming

 

En este apartado os voy a explicar uno de mis proyecto más ambiciosos de los que pude llegar a convertir en algo más «serio» y que no tiene que ver directamente con el mundo del diseño y la web.

Desde pequeño, uno de mis hobbies siempre han sido los videojuegos. En la época que tenía 18 años, hace unos 8, el mundo de los videojuegos se revolucionó para reconvertir lo que habían sido un mero pasatiempo toda la vida, en algo que puede llegar a ser competitivo y profesional. Muchos videojuegos empezaban a crear alrededor suyo un mundo totalmente diferente a lo convencional: ya no se jugaba para divertirse, sino para ganar.

En esa época, yo jugaba activamente a menudo y junto a unos amigos formamos un equipo para empezar a competir de forma amateur. Poco a poco, las primeras organizaciones de equipos empezaban a asomarse y el mundillo de los deportes electrónicos empezaba a crecer cada vez más rápido. Fue entonces, cuando mi inquietud para hacer cosas nuevas, me llevó a crear una organización llamada OutLaw Gaming, en la que teníamos un par de equipos que competían en la Liga Profesional de Videojuegos española.

Al ver que la cosa funcionaba, cada vez me dediqué más a gestionar la organización y menos a jugar, así que hicimos un gran paso y formamos un Club, con 8 equipos activos jugando semiprofesionalmente en diferentes juegos y plataformas Online. Formé un equipo de STAFFS que nos encargábamos de gestionar los equipos, las inscripciones a los torneos, el diseño gráfico, búsqueda de patrocinador, gestión de redes sociales y márqueting, etc.

Tuvimos la suerte de conseguir varios patrocinadores que ayudaban a pagar los torneos, los viajes de los jugadores, camisetas y material necesario para jugar. Fue una época en la que de la nada, pudimos alzar un proyecto sin a penas recursos ni inversión y disfrutar como niños pequeños.

Durante 3 años, el club tuvo mucha actividad participando en cientos de torneos, asistiendo a eventos importantes por toda España y creanado una red alrededor del club que abarcaba jugadores, entrenadores, diseñadores, promotores, seguidores y mucha gente involucrada en el proyecto. Fue algo muy bonito.

Sin embargo, todo tiene su parte buena, y su parte mala. Hubo un momento, que mantener el club era económicamente difícil con los patrocinadores que teníamos. Fue entonces cuando tuvimos que tomar la decisión de cesar algunos equipos, que fueron fichados por clubes con más potencial económico y donde podían ofrecerle más apoyo. Después de esto, el club se mantuvo durante medio año más, pero al haber perdido presencia en equipos, y de la desmotivación de algunos miembros, decidimos cesar la actividad y terminar la etapa.

Más arriba podéis ver algunos de los diseños corporativos del club, aunque algún día me gustaría enseñaros de más cerca algunas cosas que hicimos.

Personalmente, fue una de mis mejores épocas de la vida. Conocí muchísima gente y lo mejor: estaba haciendo algo que me encantaba, sin pensar en ningún beneficio económico. Dirigir un proyecto tan especial, con decenas de personas y ver que la cosa funcionaba, fue algo totalmente satisfactorio. Mi consejo es que hagáis lo que os gusta. Probablemente, hubiera podido ir mejor si hubiéramos podido invertir algo más de dinero, pero decidimos que «ya nos lo habíamos pasado suficientemente bien».

Como apunte final, para los que no estáis mucho en el mundillo de los deportes electrónicos, decir que hoy en día la cosa ha crecido hasta unos niveles impensables. Esta indústria mueve millones de euros cada año, existen federaciones internacionales de deportes electrónicos, incluso hay países que ya lo reconocen como deporte olímpico. Sin ir más lejos, ya hay más de 20 clubes europeos de deportes convencionales (Bàsquet, Fútbol, etc) que ya tienen sus equipos de deportes eletrónicos. Empresas TOP mundial como son Movistar, Airbus o Samsung han apostado por patrocinar con millones de euros a equipos y jugadores de esta disciplina.

Web SantSalvador

Este proyecto surgió de la necesidad de expandir un negocio como es el de un restaurante. Después de analizar los nuevos requisitos que debería tener la página, se realizaron varios prototipos hasta llegar a la actual página. Contiene una sección donde se puede encontrar información del restaurante, un método de contacto directo via correo electrónico y, lo más importante, un apartado donde los clientes pueden consultar la carta digital del restaurante.

Las tecnologías utilizadas para este proyecto se basan en la gestión de un WordPress instalado en un servidor propio, alimentado de varios plugins que ayudan a mejorar el comportamiento de la página, mejorar el SEO, la seguridad, el control de estadísticas y el control de usuarios. Además, también se han añadido algunas capas externas en HTML5, CSS3 i JavaScript.

www.restaurantsantsalvador.com

Web previsión meteorológica

Esta es una mini aplicación web para saber el tiempo meteorológico de algunas de las principales ciudades del mundo. Este proyecto se realizó con la intención de practicar con APIS externas y trabajar con la información recibida en el cliente.

El funcionamiento es sencillo; el usuario introduce una ciudad y se muestra en pantalla información del tiempo actual en esa ciudad, así como algunos datos sobre temperatura, humedad, precipitaciones, etc. Además, se ofrece la posibilidad de pedir una previsión de los siguientes días.

Las tecnologías y lenguajes para realizar este proyecto son: HTML, CSS3, JavaScript, jQuery, BootStrap, AJAX, JSON.

BeetGig

 

Durante 4 meses, estuve ejerciendo de diseñador y maquetador web junto a otras tareas de frontend y backend, en una startup llamada BeetGig. BeetGig es un marketplace de externalización de proyectos de empresas, para que estudiantes, freelancers y cualquier persona capaz pueda introducirse en el mundo laboral o ganar un dinero extra.

Cuando llegué a la startup, había un buen trabajo de backend ya terminado, pero el frontend y el diseño estaban cogidos con pinzas. Es por eso que se me delegó una remodelación completa y un lavado de cara de toda la aplicación, un reto difícil pero apasionante.

Para ello, hice un completo análisis del estado actual y los requerimientos de la aplicación. Con eso, ya me pude hacer un poco la idea por donde podría tirar. Ya que desde el principio se me confió todo el diseño, quise establecer un objetivo desde el principio, que cumplía unas directrices que yo mismo había marcado; un diseño moderno, plano, con pocos colores, amigable y usable.

Las primeras semanas fueron de hacer pruebas y pruebas con bocetos a mano de la distribución de los elementos. Una vez tenía algunos mockups, los pasé a Photoshop para detallarlos un poco más, aunque en una primera versión. Una vez tenía varios mockups detallados, se analizaron y compartieron con el resto del equipo hasta decidir una versión que evolucionaría hasta lo que son los wireframes finales, que podéis ver un poco más arriba. La intención de hacer los wireframes tan detallados, píxel a píxel, era que después, era mucho más fácil maquetar y estilar, además de ofrecer al resto del equipo incluso a los primeros clientes, una visión de cómo iba a quedar la aplicación exactamente.

La fase de maquetación fue bastante bien. El sistema de grid del framework Bootstrap ayudó bastante, aunque hubieron partes un poco más tediosas de maquetar y estilar. Luego, se testeó la usabilidad en varias fases, retocando la distribución de elementos en varias ocasiones, incluso algunos colores para que la navegación fuera más óptima.

Aunque esta aplicación es un poco excepción del resto, ya que todos los proyectos requieren de un ordenador para realizarlos, y sabíamos que la mayor parte del usuario utilizaría este dispositivo para navegar, la adaptación a dispositivos portátiles también se ha trabajado bastante, sobretodo en móbiles.

Las tecnologías y herramientas utilizadas en este proyecto, en mis tareas, han sido: herramientas de maquetado y diseño (Adobe PhotoShop, Adobe XD), lenguajes como HTML5, CSS3, JavaScript, jQuery, Angular, PHP, BootStrap, etc.

 

Además de encargarme de remodelar por completo el diseño y la maquetación de la plataforma BeetGig, también me enrcargé de el rediseño corporativo de la empresa, diseñando un nuevo logo y aplicandolo en la página web, carteles, flyers y otro material gráfico.

www.beetgig.com

DinoLand

Este fue mi proyecto de final de grado, con la calificación de 10. Dinoland es un juego de navegador multijugador que trata sobre la gestión de un parque de dinosaurios, donde el usuario deberá administrar los recursos, hacer expediciones, interactuar con otros usuarios para avanzar en el juego.

El desarrollo del proyecto duró 6 meses y fue ejecutado por un equipo de 5 personas. El objetivo principal, a parte de hacer un juego de navegador, era investigar y utilizar nuevas tecnologías de programación. Más adelante, os explicaré con más detalles cuáles son.

El desarrollo se basó en una metodología de trabajo SCRUM, dividiendo en «historias verticales» o «Sprints» las diferentes etapas de desarrollo y apoyándonos de herramientas productivas de desarrollo en paralelo, tales como el control de versiones en Git o la gestión de tareas en Trello.

El proyecto terminado es un embrión de lo que podría ser un producto comercial a largo plazo. La idea era construir una aplicación web en forma de juego que tuviera diferentes componentes, no solo el del juego. Para ello, cuenta con un sistema de usuarios completo con un componentes social, donde los jugadores pueden interactuar entre ellos mediante chats, muros públicos, ránkings, alianzas, clanes, etc.

Además, el juego incluye múltiples funcionalidades y mecánicas, tales como niveles de construcción, investigaciones, expediciones y mucho más.

Las tecnologías utilizadas para este proyecto son tecnologías punteras y emergentes en el mundo del desarrollo. Para el motor gráfico del juego, se ha usado Phaser. un framework de HTML5 que trabaja con el elemento Canvas.

Como corazón de la aplicación, se ha usado Meteor como framework full-stack, basándose en el modelo-vista-controlador. Para la gestión de los datos, se ha usado MongoDB, una base de datos orientada a objetos, tratando los datos en archivos JSON. Por último, el juego cuenta con una interfaz en el cliente basada en HTML5, CSS3 y JavaScript, juntamente con Canvas.

github.com/dinolandgame/Dinoland

Web OnlyLoL

 

Este es uno de los proyectos más grandes que he realizado. Durante más de 2 años, un grupo de conocidos apasionados en el mundo de League of Legends y las nuevas tecnologías, decidimos crear una comunidad llama OnlyLoL, con el fin de convertirse en la comunidad hispana más grande del juego más jugado de la historia.

Sin muchos conocimientos de programación, iniciamos el proyecto creando una página web en WordPress y unas redes sociales. Poco a poco, vimos que empezábamos a tener seguidores y repercusión, además de ir empezando a tener algo más de conocimientos de programación, márqueting y otros aspectos relacionados con la comunidad.

Empezamos a aumentar el equipo, y contábamos con casi 10 redactores especializados en temáticas en concreto que hacían que la página sacara contenido a diario y de calidad. Las visitas iban aumentando, así que el equipo de desarrollo nos vimos obligados a renovar la página web y ofrecer mucho más contenido. Para ello, basándonos en una plantilla de WordPress, fuimos añadiendo capas con nuevas funcionalidades utilizando lenguajes y tecnologías ajenas, e incrustando los módulos poco a poco.

La comunidad contaba con más de 15k seguidores y las visitas diarias se contaban con 4 cifras, superando el millón de visitas al cabo de 9 meses. La página cuenta con un sistema de noticias y categorías muy amplio, páginas de información, entrevistas a profesionales, guías, vídeos, enlaces, etc. También cuenta con un sistema de usuarios completo alimentado de una red social interna y apoyada por un foro interno. Además, el sistema de gamificación es uno de los pilares fundamentales, bonificando al usuario con más de 15 acciones disponibles y ofreciéndole una jugosa tienda de recompensas ofrecida por los patrocinadores de la página.

OnlyLoL cuenta también con un gestor de ligas internas, para que los usuarios de la comunidad puedan competir, un sistema de porras de las competiciones más importantes a nivel nacional e internacional y un canal de televisión, donde se alojan vídeos y streamings interesantes.

Por último, la web dispone de un panel de administración para el equipo donde se pueden realizar diferentes gestiones que afectan directamente a la base de datos y a la página, facilitando así las tareas de mantenimiento y gestión de la página.

Actualmente el equipo de desarrollo ha dejado de seguir con la actividad de la comunidad, así como la generación de contenido, así que en Septiembre de 2017 decidimos cerrar definitivament la página.

Las tecnologías utilizadas para este proyecto se basan en la gestión de un WordPress instalado en un servidor propio, alimentado de varios plugins que ayudan a mejorar el comportamiento de la página, mejorar el SEO, la seguridad, el control de estadísticas y el control de usuarios. Para el desarrollo de los módulos se han utilizado lenguajes y tecnologías como: AJAX, PHP, jQuery, etc. Además, también se han añadido algunas capas externas en HTML5, CSS3 i JavaScript.

Web Atlètic Català

 

Este proyecto surgió de la necesidad de renovar el sitio web de un club de futbol sala. Después de analizar los nuevos requisitos que debería tener la página, se realizaron varios prototipos hasta llegar a la actual página. Contiene diferentes secciones para cada uno de los equipos, páginas con información útil del club, un apartado para comprobar los útlimos y próximos resultados de cada partido y un amplio apartado para las notícias que tratan del club. Un sitio completo que además de informar a los jugadores de todo lo que está pasando, es una herramienta para todos los familiares y amigos, incluso equipos rivales.

Además, la página web cuenta con algunas herramientas internas para la fácil gestión de entrenadores y equipo técnico, con funcionalidades para enviar mensajes a un colectivo en concreto y facilitar la comunicación. También está habilitado el registro de usuarios, para que los jugadores y gente ajena al club pueda registrarse en la página, compartir y comentar notícias, interactuar con otros usuarios, etc.

Las tecnologías utilizadas para este proyecto se basan en la gestión de un WordPress instalado en un servidor propio, alimentado de varios plugins que ayudan a mejorar el comportamiento de la página, mejorar el SEO, la seguridad, el control de estadísticas y el control de usuarios. Además, también se han añadido algunas capas externas en HTML5, CSS3 i JavaScript.

www.atleticcatala.cat

Web Loteria La Pepeta

 

Este proyecto surgió de la necesidad de tener un sitio web informativo y poder hacer reserva online de Loteria de Navidad para la administración «La Pepeta». Después de analizar los nuevos requisitos que debería tener la página, se realizaron varios prototipos hasta llegar a la actual página. Contiene una sección donde se puede encontrar información sobre el sorteo y su funcionamiento, un método de contacto directo via correo electrónico y, lo más importante, un apartado donde los clientes pueden reservar su lotería en la misma página web.

Un sistema automatizado gestionado por un panel de administración, avisa de los nuevos pedidos de lotería, así como todos los detalles del mismo.

También es posible gestionar el stock de lotería disponible, teniendo el control de los décimos disponibles en todo momento.

Las tecnologías utilizadas para este proyecto se basan en la gestión de un WordPress instalado en un servidor propio para la parte de información y blog, alimentado de varios plugins que ayudan a mejorar el comportamiento de la página, mejorar el SEO, la seguridad, el control de estadísticas y el control de usuarios.

Para la parte de los pedidos, se ha usado PHP junto a AJAX, conectado a una Base de Datos MysQL. Además, también se han añadido algunas capas externas en HTML5, CSS3 i JavaScript.

www.lapepeta.es

Calendario interactivo

 

Esta es una mini aplicación web de un calendario de adviento navideño. La aplicación pide el nombre al entrar, y una vez en el calendario, el usuario puede ir comiendo candy bars a diario y descubrir las sorpresas que esconden.

Es un proyecto puramente trabajado en el frontend, que se aprovecha del poder de JavaScript y las Cookies del navegador para facilitar y recordar la información al usuario. El usuario puede cerrar la aplicación, y cuando vuelva el día siguiente, puede seguir comiendo candy bars según el día que le corresponde. Una barra de progreso le avisa de su progreso en el calendario. También hay la posibilidad de reiniciarlo, y volver a descubrir de nuevo las sorpresas. Finalmente, debajo de la página, se puede compartir con amigos o familiares el calendario vía email.

Las tecnologías y lenguajes para realizar este proyecto son: HTML, CSS3, JavaScript, jQuery, BootStrap, Cookies.