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:

• 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:

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 :).

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!

Como estan muchachos, me acaba de llegar una promocion del Forum de Coderanch (un antro de locos por Java), donde estan regalando 4 copias del libro Learning HTML5 Game Programming a ser sorteadas el dia Viernes 13 de Agosto a todas las personas que hagan preguntas sobre juegos en HTML5 (Canvas y esas cosillas Avant Garde de HTML5) en su seccion de Javascript. El Foro por siacaso esta en ingles, asi que obviamente hay que explayarse en ese lenguaje pero es una buena oportunidad de matar dos pajaron de un tiro.

Para mas informacion visiten la pagina de promociones que tiene Coderanch.

PD: Nop, no gano nada avisando sobre esto, pero coderanch es un foro que estimo mucho, asi que a probar suerte muchachos!

Que tal muchachos, solo queria desearles un feliz año nuevo y este año vamos con todo en ganas de hacer las cosas. Tengo 3 objetivos para este año y uno de ellos es sacar Xhelos!.

¿Y ustedes que objetivos tienen?

Saludos

PD: Si , el CSS de la pagina se me esta rayando, ha investigar lo sucedido