Crea tu Juego Web 4: Ordenando el (futuro) Codigo

Publicadas por Jose Carlos Tamayo

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:


Genial!, ya crearon una pagina inicial de su juego. Ahora le pondremos un menu tan solo para no perder el momento:


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:

El mismo mono con el mismo traje de seda

Hoy hemos aprendido lo basico de la estructura de nuestro archivos y ademas hemos creado nuestra primera pagina inicial del juego con HTML!. Um pero no se ve muy bonito verdad? En blanco y negro no vamos a cautivar a muchos usuarios, ademas yo no llamaria a eso un menu del juego.

Pero no os preocupeis, en el proximo capitulo hablaremos un poco sobre HTML con Hojas de Estilo o CSS como para poner mas decente el juego.

PD: Para los que ya saben PHP y HTML, empezaremos a tocar temas de programacion Hardcore en alrededor de 3 entradas mas. Recuerden que este tutorial empieza desde un nivel muy basico para llegar hasta un intermedio/avanzado, mientras tanto pueden ir haciendo sus preguntas de lo que quisieran ver a futuro, por ahora creo que hare una especie de Ogame pero con insectos. Hasta entonces!

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

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

9 comentarios:

  1. Anónimo dijo...

    hola el tutorial es exelente pero c me complico con la tecla f6 no me muestra la pagina por que sera? graias por todo

  2. Jose Carlos Tamayo dijo...

    Jejej hubo un error de Tipografia, deberias de usar la tecla f5!

  3. Anónimo dijo...

    amigo.. estoy muy interesado.. por favor sigue con el tutorial

  4. Jose Carlos Tamayo dijo...

    Gracias por el interes, ahorita estoy ajustado con mis tiempos, pero terminal el tutorial, o continuar con el blog es una idea que me ronda la cabeza. Hare al menos un juego minimo pero que sea interesante de usar!

  5. Anónimo dijo...

    Si, estaria muy bien que pudieras seguir, es el mejor tutorial que encontre para iniciarse. Espero que puedas encontrar tiempo pronto. Un saludo y gracias por el tuto.

  6. Anónimo dijo...

    Hola Carlos, estoy siguiendo tu tutorial, aunque ya he utilizado todas estas consas con anterioridad, pero no consigo enlazar la hoja de estilos con el php, y no entiendo por que ya que todo esta tal como lo indicaste en el tutorial!
    Dame alguna idea por lo que pueda fallar... lo he intentado TODO! :S
    Gracias!
    Un saludo y animo con este pedazo tutorial que estas haciendo! Es muy interesante!

  7. Jose Carlos Tamayo dijo...

    Gracias amigo, haber veamos, podría ser parte del codigo. Te sugiero esto que hago cuando algo me falla, instala el Firebug en tu navegador y cheka la linea donde esta tu enlace hacia el css, cuando llegues ahi veras que tiene un +, hazle click y verifica si esta jalando el contenido, si ves algo con file not found significa que no esta chapando tu codigo. Seria interesante si pudieras subir tu ejemplo en algun lado para poder ayudarte, por ejemplo en fiddle: http://jsfiddle.net/

  8. Anónimo dijo...

    Buenas, nose si vereis esto pero en primer lugar os felicito por el tutorial. En segundo lugar queria preguntar si la pagina web de inicio se podria hacer en word. Gracias!

  9. Jose Carlos Tamayo dijo...

    Que tal estimado, creo que Word te permite exportar a HTML (de hecho acabo de probar y si pones en GUARDAR COMO, seleccionas el tipo de archivo como *.html). Peeeeero no te aconsejo, si te gusta usar un entorno visual, quizas te sea util Dreamweaver, es rapido para crear y bueno y es mas para jalar y usar.

    De todas formas en los siguientes tutoriales tratamos el tema de codificacion en HTML, te aconsejo usarlo! Suerte.

Publicar un comentario