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

Cuando empece a desarrollar Xhelos, lo hice manejando una cierta estructura con aun mas ciertos estandares. Es muy importante definir una cierta forma de trabajo al comienzo, aunque duela escribir un poco de mas. Esta profecia la veran cumplida cuando ya esten trabajando en su codigo unos 3 meses y sepan donde dejaron ese objeto en PHP que andan buscando.

Manos a la obra
Lo que voy a enseñar ahora no esta grabado en piedra. Pueden relizar las variaciones que deseen pero siempre, por amor a todo lo que es sano y puro en este mundo (ja), tengan una estructura en su juego. Lo que vamos a hacer a continuacion es definir como sera la estructura de los archivos de su juego. Primero algunos estandares en general, luego la estructura propia de los archivos.

Estandares en General
No, no se asusten, son solo unas cuantas reglas que tendremos que seguir para vivir en paz con nuestro codigo. Las cuales son:

• Todos los archivos son escritos en minuscula
• El tamaño del nombre de los directorios deben de ser maximo de 3 letras. Por ejemplo imagenes se convierte en img (o ima como deseen)
• Si programamos con orientacion a objetos entonces cada clase debera de estar en un archivo diferente, que empezara con su nombre en minuscula, seguido de un. class. Por ejemplo la clase player estara almacenada en el archivo player.class.php
  

Estructura del Directorio del Juego
Cualquier juego web que deseen hacer, ya sea un RPG, uno de estrategia o algo mas depravado, van a necesitar almacenar archivos de imagenes, codigo de javascript y hojas de estilo, muy aparte del codigo del juego mismo. Por lo que aqui les brindo una posible estructura del juego.



De nuevo, esto es no esta grabado en piedra pero puede darle una base de como deberia de estar su codigo. Ahora les explico cada una de las carpeta

• ajx: Aqui almacenamos todas los puntos de acceso de Ajax (si es que usamos ajax por supuesto). Si no sabes lo que es Ajax, no te preocupes ya lo veremos con ejemplo, pero tengan por seguro que no hay aplicacion web moderna que no use Ajax de alguna manera u otra. En aplicaciones mas aburridas esto se conoce como web service, pero ese nombre me da letargo.
• css: Nada magico por aqui, esta carpeta almacenara todas nuestras hojas de estilo. Un punto muy interesante es que hay ciertos framework de css como jquery-ui que vienen con sus propias imagenes, o que tu misma hoja de estilo tenga imagenes. En este caso solo creo una subcarpeta dentro de css, tratando de no modificar nada de lo que el propio framework maneja.
• img: Aqui almaceno todas las imagenes del juego. Generalmente creo un monton de subcarpetas referentes a las imagenes como uni que viene a ser units o ter que viene a ser terreno. Ojo aqui no guardaremos imagenes que sean necesarias para la hoja de estilo, eso va en la carpeta css como ya lo explique.
• lib: En esta carpeta almaceno todas las librerias de codigo que necesite. Ademas aqui es donde estara mi propio codigo que desarrolle. Como ven la dividi en las subcarpetas js y php. En js pondre todo mi codigo javascript y en php todo mi codigo php (si, si esto fue demasiado obvio :P ) . Como nota aparte yo trabajo con la libreria jquery, la cual viene con sus propias extensiones. Yo prefiero separar de js lo que es de jquery (que es una libreria de javascript) pero para el juego lo meteremos todo dentro de la misma carpeta
  
• vis: Esta carpeta contendra lo que yo llamo vistas, que vienen a ser mezclas de PHP y HTML que son reusadas en todo el juego, por lo cual conviene almacenar esto en un solo lugar e insertarlo con un include(), en lugar de estar copiando y pegando en todas nuestras paginas webs. Un caso muy obvio de vistas viene a ser los menus del juego.

La estructura esta lista pero, y ahora que sigue?
Bueno ya con nuestra estructura lista nos toca crear un poco del codigo para probar nuestra estructura. Lo que haremos sera facil, crearemos una pagina inicial y le pondremos un menu y un formulario de registro/login. Veamos

Crear la pagina inicial
Para hacerlo entramos al Netbeans y hacemos click derecho en el nombre de nuestro proyecto, les saldra un menu donde seleccionamos nuevo->Pagina Web de PHP (ojo he dicho Pagina Web de PHP, no Archivo de PHP o Clase de PHP). Les saldra un panel como este:


Le ponemos de nombre index y aceptamos. Listo ya tenemos nuestra pagina inicial creada. Ahora hay que llenarla. Por ahora solo le colocaremos un titulo y un subtitulo, para esto utilizaremos el lenguaje HTML para crear estos items.

NOTA: Si no saben de que trata HTML les sugiero leer este tutorial. Pero basicamente HTML se trata de poner contenido dentro de unos items llamados etiquetas o tags.

Si eligieron la opcion correcta de Netbeans les aparecera algo parecido a esto:


Como ven, NetBeans nos ha creado la estructura normal de un archivo HTML. Ademas en el BODY nos ha insertado las etiquetas de PHP donde podremos escribir codigo PHP que por ahora no lo haremos. Escriban lo siguiente antes de los tags de PHP:

Asi es, el nuevo juego lo llamaremos Insectoides y el titulo esta dentro de un tag H1. El Subtitulo muy sugerente de "Battle Insectos de Batalla Redundantes" lo ponemos dentro de un H2. Ahora presionen F5 (gracias anonimo) y veran su obra de arte en un navegador:



Pondremos nuestro menu en un tag del tipo UL, este se utiliza para cuando usemos listas de cualquier cosa, en nuestro caso una lista de menus. Cada item del menu se coloca dentro de un tag o etiquieta LI. Hemos creado 4 tags LI, veamos que tal se ve!:

Porque se llama Index.php?
Regenial! Ya tenemos la estructura basica ( muy basica ) de nuestro archivo de inicio. Si te preguntas porque lo llamamos index a nuestra pagina web inicial la respuesta es facil. Por defecto nuestro WAMP (Que es realmente un servidor web Apache con PHP) va a ir a la pagina llamada index.php o index.html cuando ingresemos el nombre de nuestra carpeta. Eso significa simplemente que localhost/insectoide/ es igual a localhost/insectoide/index.php, como en la imagen:

Y para coronar mi regreso aqui un pequeño tutorial sobre esta gran herramienta. Este Plugin de Firefox es vital para cualquier chango que quiera desarrollar Paginas Web, incluyendo por supuesto Juegos Web. ¿Y que es lo que hace esta magica herramienta?, Que es lo que no hace deberian de preguntarse. Empezare por lo mas basico:

1) Modificacion de tu HTML
A veces te pasa lo siguiente: Tienes tu HTML generado de forma dinamica y para ver el resultado tienes que ver el codigo tal como te bota en blanco y negro y posiblemente muchos TAG aglomerados en una sola linea, simplemente brutal.

Con Firebug no solo puedo pasearme por el codigo HTML como si fuera un dia de campo y verlo todo coloreado resaltando los datos de los atributos, tambien puedo modificarlo, cambiandole el texto, añadir nuevos atributos, es mas puedo eliminar Tags completos solo por el gusto de ver que pasaria si elimino esa molestosa ventana flotante o ese quisquilloso DIV que me esta tapando la informacion.


3) Cambia tu CSS al vuelo
Ok ya tienes seleccionado tu etiqueta, haz probado eliminarla y se ve bien. ¿Que sigue despues?. Manipula tu CSS on the Fly!!!. ASi es con firebug puedes cambiar tu CSS y ver los cambios al instante, sin necesidad de estar entrando una que otra vez a tu archivo CSS y presionando F5. Tan solo seleccionas tu propiedad y empeizas a manipularlo. Y si eres de gustos exigentes puedes crear nuevas propiedades a cualquier elemento.


Destilado de Awesomeness en este debugeador web. La siguiente entrada hablaremos un poco sobre javascript y ajax asi que stay tune .


PD: Obviamente este plugin solo funciona para Firefox, aunque hay varios debugers que tratan de funcionar asi de bien en otros navegadores.