Como van muchachos, en la anterior entrada conversamos acerca del posicionamiento con Floats. Me toca mostrarles un truco mas para que puedan continuar por sus propias manos.

Nos quedamos aquí haciendo el menú.

Estilizando el Menú Principal

Lo primero es decirle a nuestros tags li que se comporten . Quitaremos los redondos al lado de cada li y lo pondremos en linea, usando nuestro popular display:float

Añade este CSS al final de tu archivo index.css. Con el haremos que nuestros tags li osea nuestros items del menu, aparezcan de izquierda a derecha en lugar de arriba a abajo, que tengan un tamaño de fuente potente, le quitaremos los redondos que aparecen por defecto a cada tag li, y pondremos algunos paddings para que se vea bonito.

Pero que Dioses que somos

Ok pusimos el CSS y nos vamos acercando a nuestro objetivo, solo nos falta ponerle el bloque de fondo y añadir un par de margin y padding para separar bonito nuestro contenido. Poniendo el siguiente estilo:

Y actualizamos la pagina y....


No pasa absolutamente nada!. ¿Pero que caraxos? se preguntaran mientras ven homicidamente la pantalla de su computadora, si hemos puesto un estilo a nuestro ul que contiene a todos nuestros li, este no se pinta, ni siquiera el fondo que le pusimos!. Porque los dioses conspiran contra nuestras ganas de desarrollar juegos?

Con ustedes el hack de clearfix

Ahora si, CTRL + F5 y veamos a este hack corriendo:


Hermoso!. ¿Ahora ven lo necesario de aplicar este hack? Creanme les sacara de muchos apuros cuando este maquetando.

Estilo Border Radius

Los que hayan chekado con detenimiento notaran que las esquinas de nuestro ul aparecen redondeadas. Esto es gracias al estilo  border-radius, que como su nombre lo indica le da un borde redondo a cada una de las esquinas de nuestro contenedor. ¿Sabias que puedes darle un redondeo diferente a cada una de las esquinas? Solo necesitas especificarlas una por una. Aqui un esquema:

Desde arriba a la izquierda, vas en el sentido de las agujas del reloj.

Añadiendo la Fuente

Y donen muchachos, nunca cae mal una donación :D

La carnecita por así decirlo esta en el archivo stylesheet.css. Copiate todos los archivos que estoy seleccionando en verde a la carpeta css de tu proyecto, estos son los archivos necesarios para que funcione. Despues renombra stylesheet.css como font.css


Y no nos olvidemos de añadir este nuevo archivo CSS a nuestro index.php, ponlo antes de definir nuestro index.css

Después de toda esta agotadora jornada, al fin podemos indicar donde queremos que se muestre esta fuente. Para eso abre font.css y añade este estilo de #mainMenuWrapper:

Ahora si, CTRL+F5 y veamos que tal esta quedando!


No hay duda, los estoy volviendo Tigres en Desarrollo Web, dense otro abrazo porque conocer el manejo de los floats y el añadir fuentes a una pagina web, es un level bien pro en diseño de paginas webs.

Y así es como se maqueta una Pagina Web

A partir de ahora creo que ya tienen los conocimientos básicos como para que puedan continuar por ustedes mismos. Por supuesto no duden en comentarme sobre sus dudas que tendrán, háganme caso esto es solo el comienzo, aunque uno muy auspicioso. Espero se hayan divertido tanto como yo.

En nuestros siguientes tutoriales vamos a ver ya temas de programación en servidor y cliente y también entrar al tema del manejo de base de datos. Traten con sus conocimientos actuales de terminar nuestra interfaz:

En los dos ultimos episodios por asi decirlo, creamos un div que iba a contener a todos los demas divs y asi atarlos en las tinieblas, al mejor estilo del señor de los añillos, y tambien le colocamos un fondo bonito, hell yeah.

Hora de mas lecciones de maquetacion de HTML5 para crear nuestro superjuego!.

Nociones Básicas para maquetar en HTML5

Ahora normalmente los display block son colocados de arriba a abajo. Un item a la vez.

Sin Float

Osea normalmente no podemos colocar un tag con display:block al lado de otro, a menos que usemos el magico estilo float.

Con Float

Creando la estructura del Header con HTML

Continuando con la parte de diseño, en el anterior tutorial vimos como tomar inspiración de varios recursos para tener una idea del diseño del juego. Hicimos ya nuestra lluvia de ideas y tenemos algunos colores fuentes para trabajar, ademas de eso seleccionamos un tipo de estructura fusión de otros juegos webs, como dark orbit y goblin keeper. Aqui una idea de lo que se va a lograr (claro dentro de nuestro poder en diseño...)

Tareas a Finalizar

En el anterior tutorial nos quedamos en desarrollar la idea del juego y teniamos la siguiente lista, en negrita estan las que desarrollaremos ahora.

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 Ponerle sus  Detalles
   

Continuemos entonces:

Ver que contenido tendrá la pagina

Retomando el blog señores. Gracias por sus comentarios, sobretodo del tutorial de desarrollos de juegos PBBG que aun falta terminar. Bueno para comentarles los siguientes planes en la agenda:

Acerca de Xhelos:

Como saben, también estoy desarrollando un juego que quiero que sea genial. Este ultimo año lo he avanzado bastante y ya tengo el camino definido para finalizar el juego. Aunque no tengo fechas calculo que me demorare unos 6 meses mas en dejar el juego en Beta, pero quisiera aumentar la velocidad de desarrollo, no se si contratando desarrolladores o haciendo el juego open source para que gente con interés me ayude.

Mas bien, no puedo creer que vaya ya mas de 6 años desarrollando el juego, pero puedo decir concientemente que este año es el año donde he avanzado mas, ya sea porque agarre mas experiencia o porque se me hace mas fácil programar mis ideas que al comienzo.

Acerca del Tutorial:

Bueno he recibido varios comentarios para continuar el tutorial, lo deje, debo de ser sincero, a medio camino para enfocarme en Xhelos y en actividades del mundo real, y ademas de Lol, muchas dosis de Lol, ese juego es un vicio pero aprendí a balancear las horas de juego. Voy a continuar algunos capítulos mas del tutorial para no dejarlos colgados, sobretodo finalizar la parte de diseño. Su feedback es muy importante ya que nos guiara hacia donde deberiamos de trabajar el juego.

Acerca de Tauren Create:

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:

UPDATE 02 dic 2012: Pongo el link del poderoso plugin de firefox colorzilla :)

A pasado algo de tiempo desde el primer tutorial, pero continuaremos con los mismos :).

Ahora que tengo un poco mas de tiempo voy a organizar todos los tutoriales que han sido escritos en Tauren Create. Por ahora he creado esta pagina donde estaran los tutoriales. Saludos!

Bueno muchachos, ya que finalice la semana pasada el sistema de batalla por turnos del juego, ahora estoy tomandome un break, traduciendo la pagina oficial de Xhelos al ingles, aprovechando la buena cantidad de visitas que tengo desde el mundo entero gracias al concurso Game On (les mencione que no deben de olvidarse de votar por mi juego?). Y no no se preocupen tambien sigue en español. Pueden elegir el idioma que quieran

Ademas acabo de terminar el super tutorial del juego. Muchos de mis amigos me dicen que es un poco (mas bien recontra) dificil de entender, la razon es que el juego todavia no esta completo al 100%. Pero no se preocupen estoy al 50% de mi tiempo invertido en el mismo.

Saludos!

Actualmente tenemos muchisimas opciones de tecnologias webs que nos pueden ayudar a crear un juego web. Pero siendo esto un tutorial, les dire la receta secreta para hacer un juego, rapido, facil y lo mejor con muchas posibilidades para crecer.

Nota Importante: Al final explicare una forma sencilla de instalar todas estas tecnologias en casi un solo click, asi que no te preocupes por ahora si no sabes mucho de que esta tratando la cosa.

Lenguaje Principal de Programacion: PHP

Osea el lenguaje con que programaremos la mayor parte de la logica de nuestro super juego. Fuera de gustos personales, PHP nos da los siguientes beneficios

• Es gratuito y lo consigues facilmente
  
• Es muy, muy , muy facil de aprender.
  
• Es orientado a objetos, err nos da un mejor chance de tener nuestro codigo ordenadito y mantenible a futuro.
• Es mucho mas facil ponerlo Online que otros lenguajes. (Que servicio de hosting no maneja PHP?)
  

Otros lenguajes interesantes podrian ser Python, y nada mas =D . Es posible que sea por ignorancia de otros lenguajes que digo esto, pero de los 20 lenguajes de programacion que me se, nadie supera hasta ahora a PHP en facilidad de desarrollo para crear aplicaciones web, ademas como esto es un tutorial, y soy el amo y señor del tutorial, vamos a usar PHP.

La Persistencia de tu Informacion: Mysql

Necesitamos alguna forma de trabajar con los datos del juego. Cada ataque, cada personaje, cada mapa del juego tiene informacion, y esta informacion es cambiante. Ya existen tecnologias que nos permiten guardar, mostrar, eliminar y actualizar informacion, se llaman Bases de Datos.

La que usaremos, Mysql, es simple de usar y tienes un mogollon de tutoriales en internet. Mi base de datos favorita es otra, Postgres, el problema es que no es tan facil de instalar y no hay muchos servicios de hosting que usen Postgres, pero si el hosting es un problema, por amor a todo lo que es bueno y puro en este mundo, Usen Postgres!.

No se preocupen por ahora si no saben de que va la cosa hasta ahora, una ves que entremos a programar esto se entendera mucho mas facilmente.

La interfaz del Juego: HTML

Piensen en HTML como la parte visual de nuestra aplicacion, si Mysql me devuelve cuanto de daño hace mi espada y cuantos puntos de vida tiene mi enemigo, PHP cogera estos 2 datos y calculara cuanto de daño recibe mi enemigo, el problema es como le muestro a mi usuario visualmente que mi enemigo esta muerto, aqui entra a tallar HTML


HTML es un lenguaje de etiquetas, basicamente una etiqueta es cualquier cosa que este entre el signo <>, ahora HTML define sus propias etiquetas como div e img, que sirven para mostrar informacion en la pagina web.

OJO: Si buscan tutoriales de HTML pueden confundirse facilmente entre lo que es HTML4, HTML5 , tambien hay un XHTML, osea nos hacen la vida mas dificil. Je les aconsejo que busquen tutoriales sobre XHTML, con esto sera suficiente.


Colores y Sabores: Javascript, HTML y CSS

Bueno ya tenemos todo lo basico y necesario para crear un juego persistente. Lo unico que faltaria quizas sea mejorar la interfaz de nuestro programa, hacerla mas amigable al usuario.

• Css se encargara de maquillar nuesto HTML, le podnra colores, tamaño del texto, largos, anchos a nuestros sectores de la pagina y un largo etcetera.
• Javascript se encargara de la funcionalidad de la interfaz, si hago click en un sitio entonces se realiza una accion, esto lo hago con Javascript
• O mucho mejor, usen Jquery, se van a ahorrar un monton de problemas con jquery. Jquery es una libreria de Javascript que te permite realizar muchas cosas que hace javascrit pero de una forma mas sencilla.

No se preocupen estas tecnologias las veremos luego, por ahora solo es necesario que sepan que existen.


Muy bueno y ahora que hago?

Ya sabiendo las tecnologias que vamos a usar te enseñare una forma sencilla de instalar todo esto si estas usando Windows, en el caso de que uses linux ubuntu entonces puedes ver este tutorial en español. Si usas otro Linux dudo mucho que necesites algun manual, de hecho ya deberias de haber creado uno.

En fin les presento a WAMP. Wamp es un programa que te instala todo lo necesario para poder empezar a trabajar con PHP y Mysql en Windows Xp, Vista y 7. Simplemente descargatelo (tienes de 32 y 64 bits, sugiero usar la de 32 por mas que tengas un procesador de 64), instalalo (solo te preguntara que navegador utilizar) y ejecutalo.

Una ves instalado, y ejecutado te aparecera un icono en la parte de abajo donde podremos administrar nuestro WAMP, ese velocimetro aparecera en amarillo si todavia esta cargando, en rojo si tiene problemas, en blanco cuando esta en su estado normal para desarrollo, y en verde si es que lo haces publico para internet (pero no te preocupes siempre aparecera en blanco)

Una ves que ya este en blanco el velocimetro, entra a tu navegador favorito y andate a la direccion http://localhost, asi como lo ves sin www ni nada de eso, simplemente escribe http://localhost y listo, te debe de aparecer una pagina como la que sigue:

Esto es lo que aparece en la direccion http://localhost

Algo acerca de Paginas y Servidores Web
En realidad, cuando llamas a la direccion web localhost, estas llamando a un programa que se instala en tu PC con Wamp que se llama Apache Server. El Apache Server que te viene en Wamp te "crea" una direccion web llamada localhost que solo funcionara en tu maquina.
Enteder como funciona esto es algo ligeramente complejo pero que no nos sera de gran ayuda por ahora, lo importante es solo saber que existe un Servidor Apache en tu maquina y que te permite acceder a la direccion localhost cuando tu wamp esta activo.

Otra cosa, esta version de Apache Server viene con soporte para manejar el lenguaje PHP por defecto, genial asi no tendremos que configurar nada.


Probando el PHP
Y ya para finalizar probaremos algo de codigo PHP, para ver que tal anda el funcionamiento de tu servidor web. Sigue estas instrucciones para maximo placer:

• Entra a la carpeta www dentro de la directorio donde instalaste wamp. Por defecto lo instala en c:/wamp, pero puedes haber elegido otra direccion, quien sabe. Esta carpeta es importante ya que aqui es donde pondras todos los archivos de tu juego.

• Crea con el block de notas o lo que desees un archivo llamado probando.php Es importantisimo que el archivo termine en .php y no .txt, ojo con eso guardalo con la extension .php y no con .txt, si no lo haces entonces no funcionara, el block de notas por defecto te lo guardara con .txt aunque le pongas .php si no seleccionas en Tipo: Todos los archivos
  

Primero le pones que termine con .php, despues le cambias a Tipo: Todos los archivos, y si te aparece la opcion de codificacion lo mejor es que uses UTF-8 Siempre.

• Ponle el siguiente texto a tu archivo recien creado:

Esta imagen te cambiara la vida!

• Entra a tu navegador y tipea http://localhost/probando.php, si te aparece algo como esto felicitaciones, eres el feliz dueño de un servidor web local con PHP.

Puedes ser feliz si ves esto

Y listo, ya tenemos todo lo basico para poder empezar a programar nuestro juego. Si eres nuevo en la programacion web estoy seguro que este tutorial te servira de ayuda. Si no no desesperes, el proximo tutorial hablare algo acerca de herramientas que nos hagan la vida mas facil para programar. En fin el siguiente tuto se viene la proxima semana! Hasta pronto