Own the World

Publicadas por Jee Ba

That's is going to be the motto for Xhelos V2.

Yup lets make a game that's is going to make all the people loss their lives playing this game, because it fill them up with happiness. Yeah let's own'em and make this game the best game in earth, at least until somebody copy us.... but maybe, for a split of second,  this game is going to be the most playable thing around here on planet Earth, my megalomaniacal friend.

We change our language from Spanish to English, why not change the game concept in general, iterate the game until we tap the subconscious thingy that make people play games and wake up to look for the perfect moment to attack. We have some games like Ikariam and Ogame that teaches us the way, but they didn't went all-retard (thank you Tropic Thunder movie) to the goal, they just vanished with they long play defects. We have learned from them, and we will not commit the same game design errors that plague those games. We wil start from fresh with a a new and Orphiastic design. This is our goal and this will be done.

Until then, expect more news.

Have the greatest day of your live.

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

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

Crea tu juego Web 11: Maquetacion en HTML y CSS 4

Publicadas por Jee Ba

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

Cuando empezaba a desarrollar paginas webs descubrí este problema. Los contenedores de elementos que han sido flotados no tienen un espacio por si mismos. Lo que es una pena realmente ya que fácilmente podríamos haber terminado el trabajo si el contenedor respetara los margins y paddings que tienen sus hijos. Felizmente nosotros tenemos un hack de CSS que hace precisamente esto, llamado  clearfix. 

Para aplicar clearfix a nuestro codigo tenemos que seguir dos pasos sencillos:
  1. Colocar el codigo de clearfix
  2. Colocar a nuestro contenedor la clase clearfix.

Aqui les paso el codigo, no es necesario que lo entiendan, de hecho yo no lo entiendo muy bien al 100% pero demonios que bien funciona!.

Una ves colocado el codigo al final de nuestro archivo, es hora de colocarle la clase clearfix a nuestro ul. Quedaria asi:

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

Ok, en nuestro diseño usamos un tipo de fuente llamado A Bugs Life (descarguenla, it's an order) que obviamente no se refleja en nuestra pagina web. Para que funcione tenemos que descargar la fuente y configurarla con CSS. Una pequeña nota, el siguiente paso no es compatible con navegadores antiguos como IE6, pero si estas usando IE6 o IE7, no eres digno de mi confianza.

Pero gracias a Thor, en internet existen un monton de herramietas que nos pueden ayudar a colocar fuentes con un resultado optimo, una de estas es Font Squirrel Web Font Generator. Entren a la dirección, coloquenle la opcion de optimal,acepten el Agreement, y subanle la fuente que les pase.  

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

Una ves hecho todo esto haganle click al boton DOWNLOAD YOUR KIT. Descargas el zip y lo descomprimes, encontraras toda una lista de archivos. 



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:


Nos vemos en el próximo episodio!

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

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

Crea tu juego Web 10: Maquetacion en HTML y CSS 3

Publicadas por Jee Ba

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

Hay un estilo en CSS llamado display que nos permite indicar si nuestro elemento sera mostrado como un bloque o como un elemento inline. Hay mas opciones pero estas dos son las principales. Para posicionar elementos tienen que ser del tipo block, ya que con block nos permite ponerle margenes, padding (padding es el espacio entre el borde de nuestro contenedor y su contenido) y border (la linea que rodea a nuestro contenedor). Por defecto todos los divs tienen display:block y son los elementos que usaremos para posicionar mejor el contenido. Para los curiosos encontre esta pagina que puede explicarles mejor este tema.

Los diferentes estilos de CSS que puedes aplicar a un display:block normalmente

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

Una de mis premisas al hacer desarrollo es tratar de eliminar lo máximo en Tags que no nos sirvan, creanme eso nos va a ayudar de sobremanera. Lo primero es crear una ligera estructura de la parte superior de la pagina.

Haremos todo lo verdecito

Entonces empezamos con la estructura del HTML. Antes teniamos:


Pero ahora cambiaremos la estructura a lo siguiente:


Vamos por partes explicando este cambio. Como ven todo lo estamos agrupando dentro del tag header, en realidad podríamos agruparlo dentro de un tag div o si quieren un p y prácticamente renderizaria igual, pero para estar acorde a las nuevas tendencias en HTML5 usaremos este nuevo TAG header.



Después dividimos este header en 3 secciones:

  • Un primer div#trademarkWrapper conteniendo la imagen de nuestro logo (img) y el titulo (h1). Dicho sea de paso, este es el logo, descargatelo y ponlo  dentro de tu carpeta img

  • Un segundo div#loginFormWrapper que contendrá nuestro formulario de ingreso con 3 campos, usuario, password y boton de submit. Noten que todos estos campos estan dentro de un tag form, esto es lo normal cuando tienes campos en tus formularios. En siguientes post nos enfocaremos en el manejo de forms, por ahora solo nos dedicaremos a maquetar nuestra web. El tag legend se usa siempre que quieran poner titulos dentro de un form, esto es un estandar ya que si desean podrían usar el tag span o lo que quieran, igual funcionaria, pero hagamoslo de la manera correcta y pongamos los elementos donde corresponden.
  • Una tercera seccion nav#mainMenuWrapper que tendra una lista de menus a nuestra disposicion. Un ul como explicamos se usa para crear listas sin orden (unordered list), en simples palabras, todos los li apareceran por defecto con un redondo en lugar de con numeros. Igual eliminaremos esto para darle a estos li un aspecto mas de menu.
Muy bien, añadiendo estos cambios la pagina nos quedaría esto:



Posiciones con Flotantes con CSS

Ok, pongamosle la magia del CSS y veamos como nos vamos a ir acercando a nuestro objetivo. Lo primero es colocar el CSS de posiciones:

Lo que estamos haciendo es ponerle posiciones al div#trademarkWrapper para que este a la izquierda y al div#loginFormWrapper para que aparezca a la derecha. Esto lo hacemos con elementos flotantes y muy importante le colocamos espacios de ancho (widths), sin esto los flotantes no funcionarian muy bien en diferentes navegadores.El clear:both lo aplicamos para liberar los estilos flotantes.

Y así tenemos una forma de posicionar elementos con CSS. Esta es una forma natural de posicionar cosas con CSS, existe otra usando los estilos position, top, left

Dudas con estos temas vean esta pagina web floatutorial, se los recomiendo tanto que ya lo recomende en una entrada anterior, serio chequeen ese tutorial si quieren aprender toda la magia de floats en CSS.



Bueno aprendimos a maquetar a punta de floats, y si lo han logrado, dense un abrazo porque el manejo de floats es una de las artes mas difíciles en la maquetación con HTML. Ah pero pequeños saltamontes, aun nos queda por conversar sobre los floats.  Nos vemos en el proximo tutorial donde hablaremos algo mas de los elementos floats y crearemos el menu principal. Saludos!

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

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

Arequipa GameJam 2014

Publicadas por Jee Ba

Bueno rompiendo un poco con la onda de los tutoriales, y para justificar en algo mi injustificada desaparición del blog, quería hablar un poco sobre la experiencia de estar en un GameJam en mi ciudad, Arequipa:


Fue el primer GameJam que hacemos en Arequipa. Logramos traer a 28 Hobbistas en el desarrollo de juegos, desde programadores hasta diseñadores, y entusiastas, que al final aprendieron a programar a la fuerza y en la madrugada :D.

Fueron 2 días que estuvimos entre mañana, tardes y madrugadas diseñando, dibujando y programando lo mas que podíamos. En nuestro caso, como organizadores del evento recién nos dimos tiempo de armar nuestra idea en la primera madrugada, y vaya que salieron las ideas

Porque lo pusimos en ingles? No tengo idea!

Pero lo importante son los 8 proyectos que sacamos los cuales te invito a visitar en la pagina del GameJam

El de nosotros se llama Blind, un Survival en 2D que lo puedes jugar online (en firefox de preferencia, escuche que con chrome se comporta raro) gracias a la magia del Construct2!!!.

Y para terminar, pues fácil saldrá otro GameJam el próximo año y sobretodo dejenme animarlos a que organicen uno en su ciudad. Se los recomiendo totalmente.


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

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

Crea tu juego Web 9: Maquetacion en HTML y CSS 2

Publicadas por Jee Ba

Holas holas castañolas, como diria Flanders, a quien quiero crucificar de tan solo escucharlo, upss lapsus mental, bueno continuamos con el tutorial, esta ves trabajaremos la maquetación de la pagina web, mi objetivo es que conozcan de que va el HTML y el CSS para que vayan preparandose para lo bueno.

Pero primero una ligera novedad, vamos a hacer unos cambios a nuestro diseño inicial. Con ustedes la nueva interfaz que vamos a desarrollar:

El antes y después, pueden lanzar la primera piedra, pero creo que esta mejor y mas directo

El Fondo, donde esta toda la magia

Empezamos colocando el fondo a nuestra pagina web, créanme al decirles que el fondo nos dará una muy buena base para hacer los diseños, para eso ustedes se preguntaran ¿y bueno como lo hacemos tío? Pues primero obtengamos una imagen de lo que seria el fondo de la pagina web: 


Y así obtenemos una imagen que nos servirá como base para el fondo de tu pagina web


Ahora tenemos que trabajar con los bordes de esa imagen para que al repetirla a su lado calce correctamente como mosaicos:

La imagen obtenida colocada una al lado de la otra, ¿ven como quiere calzar?
Estoy seguro que van a sufrir un poco con esto, especialmente en la parte del pasto y la roca de abajo, el truco es usar imagenes prediseñadas que también se repita y un poquito de edición de fotos.

Ahora si coloquemos esa imagen de fondo en nuestra web, para eso coloquen esta imagen dentro de la carpeta css/img y añadan este CSS a su hoja de estilos index.css
Bien prueba ahora y mira lo que se ve:


Que genial, tenemos ya el fondo de la pagina web listo, pruebalo en diferentes navegadores y deleitate con tu creación, pero ve guardando fuerzas que mañana continuamos con lo bueno! Hasta pronto

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

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