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

En el mundo de la web todo evoluciona rapidamente. Ciertamente uno de estos aspectos es la creacion de imagenes dinamicamente con puro Javascript. Entre los mejores metodos para hacer esto (ademas de usar tecnolgias de terceros como Flash o Silverlight) tenemos a dos grandes ganadores SVG y Canvas.

Algo Sobre SVG:
Acronimo de Scaleable Vector Graphic, es simplemente nuevas etiquetas html etiquetas XML que definen rectas, circulos y demas cosas graficas. Como es codigo HTML XML, en teoria podrias usar una libreria como jquery para darle programabilidad a cada objeto por medio de funciones DOM. En castellano, si haces click en un circulo que has creado en svg, que tiene el id = 'circulo123', haces que desaparezca con un simple hide() en jquery.

Yo no he trabajado directamente con SVG, pero si he usado la libreria Raphael, que me permitio hacer los graficos en movimiento del Metacañon en mi juego Xeno. La curva de aprendizaje es relamente facil si conoces que es un cuadrado y un circulo ^^.

El soporte en Browser pues casi todos los navegadores soportan SVG salvo como de costumbre el escandaloso IE en todas sus versiones. Pero si usas la libreria Raphael, puedes rendear sin problemas en IE, ya que usa VML que es como el SVG de microsoft. Gracias Microsoft por ahcernos la vida tan facil.

UPDATE: Tal parece que IE se sube al carro del SVG. Parece que su version 9 traera soporte nativo para SVG, algo es algo.

Resumiendo SVG es codigo html que te permite hacer dibujos. les aconsejo cheken la pagina de Raphael para que se den cuenta del poder que tiene esta libreria.

Y Algo Sobre Canvas:
Canvas es codigo interpretado Javascript para hacer bitmaps, no es html como SVG no es un lenguaje de marcacion como SVG, si no que tienes que crear y llamar funciones de javascript para crear imagenes. En teoria es mas rapido que SVG para graficos en movimiento. Ahora de Canvas he tocado poco pero tambien tiene su libreria estrella Processing.js, creada por el popular John Resig, autor de Jquery.

Canvas funciona en una etiqueta Xhtml5 del mismo nombre, es ahi donde se aplican todas las funciones en javascript para aplicarle.

Ahora Canvas a pesar de ser un estandar de HTML5 no esta completamente definida en todos los navegadores. Ya ni quiero mencionar al IE, simplemente apesta en cualquier cosa referente a Html5. En este caso Processing.js no puede hacer mucho al respecto. Por supuesto hay un emulador de Canvas en IE, pero es recontra lento. Microsoft por supuesto apunta a que usen su silverlight.

Y Ahora que hacemos?
Bueno, lo mejor no es competir, si no complementar, mientras SVG sirve perfecto para graficos vectoriales, Canvas es mejor para trabajar en bitmaps.

Aunque si yo creara un juego de estrategia o un rpg, usaria extra SVG debido a que me es mas facil programar el mouse para trabajr con imagenes y sus subsecciones. Ahora he visto juegos de accion creados con Canvas, que seria lo ideal ya que Canvas es de hecho, mas rapido.

Pero recuerden que Canvas no funciona en IE, SVG tampoco pero la libreria Raphael si, asi que entre Canvas y SVG, por ahora me quedo con Raphael :P


Y para termiar les dejo este excelente Paper sobre un programa de dibujo grafico que usa estos dos metodos. Las comparaciones simplemente los dejaran atonitos.