lunes, 27 de agosto de 2012

DM Tools - Android app

¿Qué es? Se trata de una aplicación/herramienta, para acompañar al juego de d&d, entre otras cosas permite llevar la iniciativa, crear hojas de personaje, saber la experiencia que te corresponde, generar nombres, saber el peso que puedes llevar, caracterizar pnj's, generar trampas, buscar información sobre d&d...


Disponible aqui: https://play.google.com/store/apps/details?id=casa.javimorenovignote&feature=search_result


Aqui unas imágenes del programa:



 
 









jueves, 22 de diciembre de 2011

Proyecto del Curso (IV): Web estática versión final: mejorando el menú e iconos

Usamos superfish para obtener un bonito menú desplegable. En la siguiente página web encontramos el script con instrucciones sencillas de uso. Además viene con un ejemplo para ver saber como usarlo.

 http://users.tpg.com.au/j_birch/plugins/superfish/

Vamos a usar el superfish para crear un menu desplegable horizontal. El primer problema será aplicarlo de forma que quede atractivo para la web, el segundo será como hacer que solo afecte a uno de los estilos dado que contamos con style switcher.

Sin tocar mucho nos queda algo así:

El background del menú debería ser igual que el de las otras pantallas, así que lo arreglamos tocando el css del estilo sf-menu para que nos quede con el background que queremos.
Podemos ver unos iconos en el menu un poco feos que más alante serán mejorados.

 Al igual que antes, queremos ahora que el submenu, tenga un background similar a las otras mantallas y que además salga con sombreado.


Falta algún retoque... modificamos el padding y el margin del menu para que quede mejor. Mejoramos también los iconos y nos queda algo así.


Faltará aun dejar bien el menú vertical.

Veamos ahora que pasa si cambiamos de estilo:

  

Queda feo. Mejor si no se aplican las propiedades del style sf-menu. Veremos si podemos aprovechar el superfish que hemos puesto en el otro estilo horizontal.

En el script que antes se usaba para inicializar el superfish, ahora metemos alguna cosa más:


Más o menos lo que hacemos es que cuando estemos en el estilo blue, no se aplique el css del superfish, y que cuando se esté en el otro estilo si que se aplique... además inicializamos. El resto de código es para tener en cuenta posibles clicks. Nos queda esto:






lunes, 19 de diciembre de 2011

Proyecto del Curso (IV): Web estática versión final


Novedades:
  1. Script para que en uno de los estilos la imagen de fondo cambie y en el otro estilo no.
  2. Creación de pantallas y un menu transparente y separación de los menús.
  3. Sombras de menús y logo.
  4. Creación de favicon
  5.  Reducción de peso de las imágenes de la web. Conversión de png's. a jpgs


1. Script de cambio de fondo.

Buscando por la web encontré un ejemplo en el que cambiaban el background mediante js:
http://www.forosdelweb.com/f13/hacer-que-background-cambie-imagen-cada-cierto-tiempo-894861/

Aplicado a mi web sería algo así:



Intentando llevarla a mi web surgió ante todo un problema, el style switcher. Si se utiliza  una función para cambiar el estilo de la página, sin tener en cuenta nada más. Por lo tanto al meterlo en mi página, estuvieses en el estilo que estuvieses el fondo era el mismo, el dado por este script.

Usando las cookies, e identificando en cuál de los dos estilos se está se puede empezar a trabajar.

Si estamos originalmente en el estilo que no queremos cambiar, existe la posibilidad de que se haga un cambio de estilo al hacer click en el switcher [$(".colororange").click(function(){...});]
Cuando se hace click se entra en el bucle do-while, pero ¿qué pasa si se hace click en el blue otra vez?
Hay que romper el bucle. Para esto usamos el valor de la cookie, dado que al hacer click en el blue otra vez, el colorchanger apunta a blue.css [if($.cookie("colorchanger") == "./css/blue.css"){break;}]. También hay que poner la imagen de fondo que tenía que haber en el estilo estático.


Si estamos originalmente en el estilo que queremos cambiar usamos la función directamente de cambio de fondo y usamos un evento de click para que cuando hagan click en el switcher estático cambie el fondo y se haga un break en el bucle do-while de esta última función. El código quedaría de la siguiente forma:








Funcionalidad: http://www.youtube.com/watch?v=_FUsYgEtfjs&feature=youtu.be


2. Creación de pantallas y un menu transparente y separación de los menús.

 La idea vino de http://cssround.com/, donde aprendí sobre los menús y como hacerlos menos opacos, quedando más elegante la página:
 En la página de estilo se escribe
background:rgba(207,219,227,0.7);  por ejemplo. El 0.7, da idea del nivel de opacidad del fondo. varía entre 0 y 1.
La separación de los menus se crea con margin.


3. Sombras en menú y logo

 Dan impresión de volumen. Utilizadas en el estilo yellowing.css:
  En menús:
   box-shadow: 3px 3px 5px #333;
  En logo:
   text-shadow: 0.1em 0.1em 0.2em black

4. Favicon:

Creado a través del programa IcoFX


5. Reducción llevada a cabo con pixlr, el fondo ha sido alterado y alguna png eliminada. Se ha ahorrado más de 3 mb de tamaño.


Aqui unas imágenes de como va quedando la web:




miércoles, 23 de noviembre de 2011

Proyecto del Curso (II-III): Web estática versión dual

La idea de este tramo del proyecto es la creación de una web elegante, y que exista la posibilidad de cambiar el estilo. Empezamos utilizando una página de estilo sencillo como modelo.

Contamos ya con el conmutador de estilos, un menu horizontal sencillo, una imagen en el header que le da color y un par de imágenes sobre la versión de navegador.


Hacemos tres columnas nuevas y las colocamos de tal forma que en el centro quede hueco por si quisieramos poner algo. Las otras dos columnas son de enlaces. Se ha puesto también color al footer de forma temporal.

  

 Le damos algo de orden a los elementos del header, el menu horizontal ahora es más pequeño, y menos llamativo, el cambiador de estilo ahora está a la derecha en una esquina junto a las imágenes de versión, trabajo posible gracias a firebug, identificando los efectos de paddings, margins y floats fácilmente. Se añade también copyright.
  

Se crea a partir de una foto el footer mediante la herramienta pixlr (www.pixlr.com), de una imagen obtenida del banco de imágenes gratuitas: http://joseluisavilaherrera.blogspot.com/


 De modo idéntico, creamos la imagen del header, con la diferencia de añadir nubes con pixlr para evitar bordes que estropeen la página. También se cambian los iconos que cambian el estilo de la página, intentando hacerlos más atractivos.

jueves, 3 de noviembre de 2011

Trabajando con los colores

Elegimos una imagen y observamos los colores que le pueden ir bien. Para ello utilizamos la página http://kuler.adobe.com/


Gracias a las opcion "mood" obtenemos los colores adecuados dependiendo del estilo que queramos, por ejemplo para el estilo Dark son distintos:


Con otras herramientas como Photocopa de la web colourolvers se pueden ver los colores análogos, los más brillantes y más oscuros (como en kuler)


lunes, 19 de septiembre de 2011

Proyecto de Curso (I) - Planificación de la Web.

1. Qué se va a hacer.
    La Web será un juego online. Se creará la interfaz de usuario, con las opciones que pudiera tener cada uno de ellos, entre las que se encontrarían el cambio de contraseña de acceso, nombre de jugador, correo asignado por el jugador, así como los elementos obtenidos en el juego, ya sea experiencia del jugador, riquezas, etc.

    Además se creará la aplicación en la que el usuario podrá conocer su localización en el mundo del juego, sus opciones, y las consecuencias de sus aciones en cualquier acción realizada, así como ver en esta aplicación las opciones de los menus como el cambio de contraseña y demás.

    El motivo de la creación del juego, es la diversión del propio creador.

2. Objetivos y público de la web.
    El objetivo principal de la web, será la diversión del usuario, la creación de un mundo fantástico, cuya historia será alterada por las acciones de los jugadores.
    El público de la web constará de personas de 12 o más años, indiferentemente del sexo.

3. URL de la misma temática.
    http://holy-war.net/

4. Estructura de las secciones
    La estructura de la página será más sencilla que en el ejemplo ofrecido. Se dispondrá de un menú con pocas opciones, en las cuales se compactará información. Datos del personaje (nivel, fuerza, habilidades, opción de subida de nivel...), objetos del personaje, alianza o reino al que pertenece el personaje en caso de que sea así, sistema de mensajes entre jugadores, opción de buscar aventuras, configuración de cuenta (correo, contraseña, etc.).

    Para poder acceder al juego, se deberá dar un proceso de registro, opción que estará disponible en la página principal de la web. Sin embargo, no se creará el proceso de registro.