Crea tu Juego Web 6: Diseño antes del CSS

Publicadas por Jose Carlos Tamayo

Continuamos con nuestro Tuto. Antes de meter garra a la parte de CSS con HTML se me olvidaba algo muy importante: diseñar de tu web, osea crear el arte y los bocetos de como se vera tu pagina web. Claro y esque no podemos andar a ciegas por ahi armando las cosas. Así que hoy nos enfocaremos en que pasos seguir para tener el diseño de tu Web.

Tu Diseño en Imagen

Les voy a enseñar unos pasos que tengo al momento de armar paginas webs (y por ende juegos webs) de una forma fácil y sencilla (que cliché):
  1. Lluvia de Ideas del diseño
  2. Tomar Inspiracion de otras paginas
  3. Ver que contenido tendrá la pagina
  4. Armar la estructura del diseño
  5. Colocarle un Fondo de Pantalla alucinante.
Por supuesto esta es mi receta y ustedes pueden tratar de investigar su propia forma de diseñar las partes interiores de la pagina, o mejor aun convencer a un diseñador amigo que sea tigre en estos menesteres, porque vamos, puede ser que seamos una sola persona desarrollando el juego pero nunca hay que obviar la ayuda exterior que podamos obtener.

En fin aquí vamos...

Lluvia de Ideas del Diseño

Es importante hacer la lluvia de ideas del diseño, aunque sea una lluvia de ideas general.

  • Empezamos por palabras que tengan que ver con nuestra onda. Nos basamos en la idea del juego primero "Insectos que pelean entre ellos para proteger y aumentar su colonia". Entonces tenemos : insectos, batalla, colonia, juego web,turn based strategy, diversión, en fin todas las palabras que se les pueda ocurrir, no hay palabra mala recuerden. Aquí les hago un collage de estas ideas en forma de imágenes:

Evidentemente, al final no todas las palabras claves serán usadas para  nuestros viles propositos

  • Ok, una vez con esta lluvia de ideas inicial, continuaremos eligiendo algunos colores que sean mas representativos de nuestra lluvia de ideas. Palabras como azul cielo, verde pasto, gris metal, cafe tierra, colores terreos me vienen a la mente!. Interesante ya tenemos una buena selección de colores para nuestro juego. Ahora aprovechemos el internet para ayudarnos. Un buen sitio de donde sacar inspiración en colores es en design-seeds.com. De aqui saque las siguientes colecciones de colores:
lake tones, frosted autumn, pasture hues, mossy tones , y si algo de ingles nos serviría.


Tomar Inspiración de otras paginas

Esta es fácil y tiene mucho que ver  con plantillas ya usadas en otras paginas webs. Lo que sugiero es que visiten otras paginas webs y saquen los esquemas de diseño que ellos tienen, especialmente juegos mas antiguos que hayan resideñado su pagina web. Asi que ... pirateemos :D

1) Goblin Keeper: Aparte de ser un juego que me gusta, tiene un diseño muy bueno en su frontpage. Les recomiendo verlo. Tiene la tipica interfaz de menu superior, junto con una cabecera que generalmente es solo una pieza aqui son dos cosas, y la tipica division en 3 partes. Es tan tipico que he dicho tipico como 4 veces, y sin embargo funciona!. Definitivamente tomaremos algo de aquí.

Otra cosa muy importante son los botones de accion. En tu juego debe de haber estos botones de accion para que intenten probar el juego. El color verde es demasiado bueno ya que aunque no combina con la pagina web, genera una atención immediata. Tienes que poner uno si quieres que tus jugadores entren al toque a probar tu juego.


Morado: LogosAzul: MenusVerde:ContenidoAmarillo: Botones de Acción


2) Ikariam: Su interfaz es un poco extraña ya que no es algo común poner al lado izquierdo el formulario de registro. Su botón de acción  tampoco es muy llamativo que digamos pero en fin es una opción mas. Esta es una estructura de 2 columnas común y como añadido el formulario de registro. El formulario parece demasiado serio, casi casi  una aplicación web ( y he visto aplicaciones webs con una interfaz mas divertida).   pero tiene el beneficio de que es recontra fácil de registrarte. Sugeriria que le hagan un retoque a ese formulario, como poner bordes redondeados y hacer mas grandes los campos, fácil que atraerían mas gente.


Morado: LogosAzul: MenusVerde:ContenidoAmarillo: Botones de Acción, Celeste: Formulario

3) Imperia Online: Directa al grano a mas no poder, Imperia online de frente te indica registrate, logeate o get the f@ck outta of here. Ellos deben de tener alguna necesidad de hacerlo tan simple. Me extraña que no haya información acerca del juego, como fotos e imagenes pero ellos han estado en este negocio por mucho tiempo, así que porque no tenerlos en cuenta. Notan el detalle ademas de que detras del Aguila esta la Bandera de mi Pais? Interesante derrepente hara sentir a la gente mas apegado al juego por el sentimiento que hay entre Imperio y Patria, en fin...



Morado: LogosAzul: MenusVerde:ContenidoAmarillo: Botones de Acción, Celeste: Formulario

3
4) Dark Orbit: Esto chicos prefirieron el diseño a la funcionalidad. La verdad es que de todas las interfaces esta me parece la mas atractiva (por supuesto la elfa vestida de santa no tiene nada que ver al respecto).   Lo que mas me encanta de Dark Oribit es el uso de bloques con transparencias que definitivamente dan un aspecto genial a ese formulario, aunque los campos pequeños y ese texto de ahi realmente malograron lo que pudo ser una obra de arte. Nota lo Obvio que es el Botón de Acción, verde y llamativo, esta pidiendo a gritos que le hagas click!.

Ahora lo que la pagina gana en diseño lo pierde en la forma. Notas mi diagrama y veras que hay un agujerazo en la parte superior derecha (donde esta la elfa). Ademas de que en la parte inferior como que los hackearon o se les olvido colocar algún contenido. Sin embargo se nota el trabajo en arte gráfico de la pagina.




Morado: LogosAzul: MenusVerde:ContenidoAmarillo: Botones de Acción, Celeste: Formulario



Break Temporal: Que hemos aprendido?


Algo acerca de los Formularios
Algo que deben de tomar en cuenta son los bordes redondeados y los formularios grandes. Aprovechemos estos pantallazos y hagamos una comparación:


¿Verdad que el primero? Los bordes redondeados y los botones grandes son un WIN para cualquier pagina que trate de ser amigable al usuario. También el texto grande y que se pueda leer fácilmente por ejemplo lo veo mas legible al boton de registrarte que al de Entrar. 

¿Es necesario tener los formularios en la Pagina Inicial?
Pues yo sugiero que se haga así. Lo importante es facilitarle la vida al usuario y si tiene que esperar menos con menos clicks, entonces porque no!. Ahora poner formularios en la pagina inicial va a malograr tu diseño si se ve como una aplicación de contabilidad. Trata de que haya los menos campos posibles, de hecho esta va a ser tu nueva regla: No pondré campos innecesarios en el registro de usuario, mas de 3 es demasiado incluyendo tu checkbox de "aceptar las condiciones". No te preocupes, acuérdate que puedes obtener sus datos luego si te son muy necesarios. 

Nota acerca de los Checkboxs
 Ustedes creen que son necesarios? Para mi es casi obvio de que si te registras estas aceptando las condiciones de uso. Estos checkbox vienen de una era donde era necesario ser obvio pero ahora, podrias obviar este boton, siempre y cuando pongas en algun lugar legible que registrarse en tu juego significa aceptar las condiciones.

Algo acerca de tipos de fuentes
El tipo de fuente también influye bastante. Imperia Online se ha decantado por fuentes con Serifs, es decir que tiene adornos entre las letras, mientras que Ikariam se ha decantado por fuentes San Serifs, que no tienen adornos en las letras. Yo considero mas legible para títulos generalmente las San Serifs, y para contenido las Serifs, pero tomen este consejo mio, todo esto es relativo a tus gustos, pero asegurense de hacer algunas pruebas con amigos mostrandoles que tipo de letra les parece mas interesantes.

Algo acerca de la estructura
Como han podido aprecio hay muchas formas de diagramar una pagina web, hemos visto 4 de las cuales tratare de usar una combinación de las transparencias de Dark Orbit con la estructura de Goblin Keeper... y porque no los colores y demás también. 


Bueno creo que me extendi algo en este tutorial, asi que lo dividiremos en dos. Lo siguiente que tomaremos sera armar la estructura de tu diseño teniendo en cuenta el contenido que tendra la pagina. 

Hasta la proxima!

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

Crea tu Juego Web 5: HTML y CSS Basico 1

Publicadas por Jose Carlos Tamayo


A pasado tiempo pero lo prometido es deuda asi que continuaremos con la creacion de este fabuloso tutorial. Recuerden el objetivo es crear un juego web que sea persistente.

Asi que manos a la obra. Hoy dia veremos como podemos usar las populares Hojas de Estilo en el Desarrollo del juego. Crearemos una interfaz basica para logearse a la pagina web y le pondremos algunas cosas vistosas para que realmente el juego se vea de clase A1+1..

El Objetivo de Hoy

Pues vamos a aprender de que trata las hojas de estilo en cascada, A.K.A CSS. El CSS nos servira a la larga para hacer mucho mas vistoso nuestro juego pero como buen saltamontes que son, vamos a ir poco a poco. Paciencia muchachos.

Entrandole al CSS

Las hojas de estilo o CSS, son archivos o codigo que permiten poner colores, tamaños y formas a casi todas los elementos de nuestras paginas web. No teman, tiene su sencillez este tema.

Manos a la obra. Se acuerdan la pagina index.php que creamos en nuestro anterior tutorial?, bueno antes de tocar el CSS haremos una sencilla interfaz de logeo con puro HTML y despues le pondremos un mucho de swing (hold out nazis grammars) con CSS.

Primer Paso: Crear nuestro Login en HTML

Como conversamos en el anterior tutorial armaremos la estructura de la pagina con HTML. Para crear un Login usaremos los tags form e input que son casi por defecto la forma mas facil de crear formularios. No se preocupen aun por el funcionamiento, lo pondremos primero bonito y en el siguiente tutorial crearemos la parte funcional.

Primero añadiremos el siguiente codigo a nuestro index.php. Primero borra todo lo que haya dentro de nuestros tags body y coloca dentro de los mismos el siguiente codigo:

Insectoides

Battle Insectos de Batalla Redundandes

  • Inicio
  • Registrate
  • Imagenes
  • Quien soy
Logeate

Muy bien, ya tenemos una estructura simple de html, lo siguiente que haremos sera ahora si, usar CSS para maquillar esto.

Segundo Paso: Añadir y Probar nuestro CSS

Hay 3 formas de colocar CSS:
  •  Archivos Externos: La forma ideal para proyectos grandes, el codigo CSS esta en archivos externos fuera de nuestro HTML.
  • Cabecera de la pagina: Esta era la forma preferida hace como 10 años.Ahora no le encuentro mucho sentido asi que .. DONT!.
  • Dentro de cada tag: Asi es podemos colocar CSS en cada tag de HTML, tiene su utilidad para ciertos casos (como por ejemplo usar un javascript para cambiarle el color de fondo a algo que hayas hecho click, mas de eso en nuestro siguiente post), pero no aconsejo usarlo manualmente.
Entonces lo haremos por  inserción de un archivo externo:
  1. Dentro de nuestra carpeta CSS (recuerda, orden sobre todo) crea un archivo que se llame index.css. Este archivo contendra todo nuestro codigo basico de CSS
  2. Ingresa el siguiente codigo en el archivo:

    body{
    background:black;
    color:white;
    } 


    Este codigo basicamente indica que nuestro tag body se tenga de fondo el color negro y que las letras sean de color blanco.
  3. Entra a tu archivo index.php y coloca lo siguiente debajo de tu tag title dentro de la cabecera:

    
    

  4. Excelente ahora maravillemonos con el resultado:

Genial no? Tranquilo saltamontes, pronto lograremos algo mas interesante.

Tercer Paso: Selector ID

En nuestro primer CSS hemos cambiado los fondos al elemento body. En cualquier pagina html bien escrita , solo existe un tag body, pero que pasaria si queremos seleccionar solo un elemento de la pagina web que se repita, digamos un div en lugar de todos? Para eso existe en HTML lo que se conoce como ID.  Fijense bien en el div que contiene a nuestro formulario, tiene un parametro llamado id con el valor de loginFormWrapper., aqui una imagen de lo que digo:


Pues bien, que les parece si le ponemos un color tierra de fondo? Entremos a nuestro archivo index.css y debajo de tu codigo coloca lo siguiente:

#loginFormWrapper{
background:#845942;
color:white;
}

Notas el # en el codigo antes de loginFormWrapper? Con ese #, estamos indicando que ponga el css entre llaves a cualquier elemento que tenga el ID loginFormWrapper. Actualicemos nuestra pagina y veamos el resultado:



Algo sobre colores en CSS

 Los colores en CSS se pueden escribir en ingles ( como black, white, brown, yellow) o usar codigo RGB. Este codigo significa Red, Green, Blue y son valores hexadecimales, osea que van desde el 0 al 9 y de ahi sigue el A, B,C,D,E, F. Son 6 cifras, las primeras 2 son para el rojo, las siguientes cifras son para el verde y las siguientes cifras son para el azul.

No se si se acuerden de teoria de colores, pero bueno en la teoria, valga la redundancia, el negro es la ausencia de colores, por lo que su valor en RGB es #000000, y el blanco es la combinacion de todos los colores, por lo que su valor en RGB es #FFFFFF.  Si queremos sacar un rojo puro usariamos #FF0000, y asi uno puede mezclar sus colores como por ejemplo el amarillo que es la mezca de rojo con verde seria #FFFF00, podriamos sacar naranja usando un verde menos fuerte como #FFAA00. He actualizado mi tutorial 3 con las herramientas a usar con un programa muy util para estos temas de colores llamado ColorZilla, excelente plugin de Firefox.Tienen que instalarlo si o si y chekar la seccion del tutorial al respecto.

Y bueno, que es un selector en CSS?

 J@der que emocion!. Hemos aprendido entonces a colocar CSS a un solo elemento mediante su ID. Ahora presta atencion a lo que te voy a decir, todo elemento HTML bien escrito puede tener un ID unico, es decir que no se va a repetir en todo tu HTML. Por supuesto puedes escribir codigo con id que se repitan pero no te compliques la vida, para eso existe otro parametro que te voy a contar al rato.

Muy bien, ahora hemos visto que podemos cambiar el fondo de cualquier cosa por su tag (body) o por su ID. A este tipo de selección se llama Selectores en CSS, ya que nos permite seleccionar con que elementos de la pagina trabajaremos. Nos falta un selector mas, el mitico selector llamado clase.

Cuarto: Selectores de Clase

Ok digamos que estamos contento con este tipo de selector, pero quiero hacer que ciertos divs tengan caracteristicas iguales. Podriamos ponerle a cada div un id y repetir el codigo o podemos usar lo que se llama clases. Para eso escribamos primero un poco mas de HTML ;)

        
Esta es mi columna 1
Esta es mi columna 2
Esta es mi supercolumna 3

Copien ese codigo en tu archivo index.html y coloquenlo antes del cierre de su tag body, como muestra la imagen:
Ok se abran dado cuenta de que hemos colocado un nuevo parametro a nuestros div llamado class, cada uno de ellos tiene el valor llamado columna, y el tercero ademas tiene un ID llamado supercolumna.

Graba tu archivo y entra a index.css, preparte para el show con este codigo:

.columna{
    background:#C67927;
    width: 200px;
    margin:10px;
}

Buena voz, graba tu archivo css de nuevo ( si estas usando netbeans presiona CTRL+S, y salvate el trabajo de ir hasta el menu). Veamos el resultado:


¿Te fijaste en el . (el punto) que pusimos antes de la palabra columna en nuestro CSS? Pues ese punto indica que cualquier elemento que tenga el parametro class con el nombre columna tendra los estilos que colocamos dentro de las llaves { }, en este caso un background medio naranja, un width (ancho) de 200 pixeles y un margen de 10 pixeles. No te preocupes entraremos a ver estas caracteristicas en un proximo tutorial.


¿Que tal un combo de ID con Class?

Muy bien, y que pasaria si desearamos que el objeto con clase columna pero que tenga un id llamado supercolumna tenga un fondo diferente? Bueno se puede hacer coloquemos el siguiente codigo:

#supercolumna.columna{
    background:green;
}


Actualicemos la pagina y veamos el resultado:


Verdeyeah!, ahora sabemos como usar el combo ID + Clase

Finalizamos la clase Yehhh! 

Ok repasando la clase hemos visto 3 selectores que son los mas importantes
  • Por tags como body o html
  • Por ID usando el indicador #
  • Por Clase usando el indicador .
Ahora antes de terminar, te has puesto a pensar cual es la diferencia entre class y id? Pues si no te diste cuenta te lo aclaro (tranquilo yo me confundia al comienzo)
  • ID sirve para indicar UN solo elemento dentro de toda tu pagina
  • class sirve para señalar a varios elementos dentro de tu pagina
 La siguiente entrada trataremos acerca de posicionamiento de elementos con CSS y algo, alguito de CSS3. Pero si te fascino esto del CSS, estudialo, CSS es mi parte favorita con respecto a la creación de paginas webs en general y para juegos webs online, le veo un potencial terrorifico.

Espero que les haya gusta el tutorial. No te olvides de dejar comentarios y sugerencias, son la inspiracion que me hace continuar con los tutos. Hasta pronto :).

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

Redes Sociales de Desarrolladores

Publicadas por Jose Carlos Tamayo

Que tal muchachos, aqui una entrada pequeña para postear sobre una red social de desarrolladores de juegos en Perú, les recomiendo entrar. casi siempre se encuentra cosas interesantes por ahi:

IGDA Peru: Desarollladores de Juegos Web Peruanos

Tiene bastante enfasis en lo que es desarrollo para moviles pero en general se puede conversar de todo, ademas de que siempre salen reuniones en Peru.

Conoces alguno de tu ciudad o pais? Consigamos 5 links y hago de esta entrada una pagina fija para los que buscan :)

PD: Gracias por los mensajes con respecto al tutorial, ya estoy preparando una nueva entrada sobre CSS, ademas de que ya tengo una idea muy clara de que ira el juego, estoy subiendo una version del juego a GIT, para tener todos los avances en un solo sitio.

Saludos!




¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me