Archivo por meses: diciembre 2013

Comentario tipo facebook utilizando jQuery

Muchas veces mientras desarrollamos una aplicación web nos vemos en la necesidad de implementar algo que permita a los usuarios involucrarse en lo que sea que estemos haciendo, los sistemas de comentarios son una parte muy común en toda plataforma web de hoy en día, se trata de una de las características principales que no pueden faltar en ningún sitio, blog o red de noticias, básicamente un sistema de comentarios abre un canal de comunicación entre nosotros y los visitantes. Teniendo esto en cuenta no está de más mencionar que existen muchos servicios gratuitos en la red que nos permiten implementar un sistema de comentarios de forma muy rápida como por ejemplo Disqus.

En principio lo mínimo que tiene que tener un sistema de comentarios es un nombre de quien comenta, avatar y texto del comentario, entonces siguiendo este principio básico hoy vamos a implementar una interfaz de sistema de comentarios tipo Facebook utilizando HTML y jQuery. Los comentarios en Facebook tienen una característica muy particular, ha diferencia de muchos otros, Facebook no recarga la página una vez que escribimos y presionamos enter, esto es posible gracias al uso de Ajax, a grandes rasgos Ajax es una tecnología que permite que nuestro navegador (Chrome, Firefox, safari, etc) pueda mandar petición al servidor de manera asíncrona, dándonos después la posibilidad de modificar ciertas secciones de nuestra pagina usando JavaScript.

Echemos un vistazo a como lucen los comentarios en Facebook, después podremos comenzar a desarrollar nuestra copia (y aprender de ello en el proceso :))

facebook_comments

Como mencionaba más arriba, básicamente se compone de, un cuadro de texto para escribir el comentario, y cada comentario tiene nombre, avatar y texto, pues manos a la obra.

Paso 1: Crear la estructura en HTML

Usando HTML vamos a comenzar a crear lo que será nuestro formulario y una lista de comentarios de ejemplo, para esto utilizaremos divs.
El formulario para escribir comentarios puede ser muy sencillo y constar solo de 2 campos, el texto y el nombre de usuario:

<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
   <input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
   <input type="hidden" name="username" id="username" value="Alevsk"></input>
</form>

Y nuestro “modelo” de comentario estará conformado solamente por una imagen y un espacio que mostrara texto, algo como:

<div class="comment">
     <div class="avatar">
         <img src="img/1.png" />
     </div>
     <div class="autoComment">
         <span>Alevsk </span>
         Comentario de ejemplo	    	
     </div>
</div>

Ok, entonces ahora combinando ambas cosas el código completo de nuestro index.html se tendría que ver más o menos así.

<!DOCTYPE html>
	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
    	<title>Comentarios tipo facebook con jQuery</title>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript" src="jquery.validate.js"></script>
	</head>
  	<body>
  		<div id="container">
	  		<div id="comments">
	  			<div class="comment">
					<div class="avatar">
						<img src="img/1.png" />
					</div>

				    <div class="autoComment">
				    	<span>Alevsk </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/2.png" />
					</div>

				    <div class="autoComment">
				    	<span>Chell </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/3.png" />
					</div>

				    <div class="autoComment">
				    	<span>Calorine </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  		</div>
	  		<div id="commentBox">
	    		<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
	  				<input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
	  				<input type="hidden" name="username" id="username" value="Alevsk"></input>
	  			</form>
	  		</div>
  		</div>
  	</body>
</html>

Notaran que el Head he agregado de una vez la librería de jQuery y un plugin de validación, estos los necesitaremos más adelante ya que nos facilitaran bastante el trabajo :), con el código anterior llevamos algo como la siguiente imagen, ¿no se ve muy lindo verdad?, eso es porque nos falta agregarle un poco de estilos.

facebook_comments_1

Paso 2: Agregar estilos

Agregamos el siguiente código CSS en cualquier lugar dentro de las etiquetas de head (lo correcto sería tener el css en un archivo aparte, pero para fines demostrativos está bien así por ahora).

    	<style type="text/css">
    		body
    		{
    			font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
				font-size: 11px;
    		}
    		#container
    		{
				width: 290px;
				margin: 0 auto;
				height: auto;
				overflow: auto !important;
    		}
    		#commentBox
    		{
				background: #edeff4;
				height: 25px;
				overflow: hidden;
				display: block;
				padding: 10px;
    		}
	    	#postComment input
	    	{
				width: 100%;
	    	}
	    	#postComment .enviar
	    	{
	    		clear: both;
				float: left;
	    	}

	    	#comments
	    	{
				margin-top: 15px;
				float: left;
				width: 100%;
				background: #edeff4;
				overflow: auto;
	    	}
	    	#comments .comment
	    	{
				padding: 10px;
				border-bottom: 1px solid #fff;
				overflow: auto;
	    	}
	    	#comments .comment .avatar
	    	{
				float: left;
				margin-right: 10px;
	    	}
	    	#comments .comment .avatar img
	    	{
	    		width: 32px;
	    		height: 32px;
	    	}
	    	#comments .comment .autoComment
	    	{
				float: right;
				width: 225px;
	    	}
	    	#comments .comment .autoComment span
	    	{
	    		font-weight: bold;
	    		color: #3b5998;
	    		cursor:pointer;
	    	}
    	</style>

Recargamos la página y como por arte de magia esto se va pareciendo un poco más a los comentarios de facebook

facebook_comments_2

ijCBM2h1of0vE

En este punto tenemos algo ya muy bonito, lamentablemente no hace nada!, pero no nos desesperemos ya que solo nos falta una cosa :).

Paso 3: Utilizar jQuery para agregar los nuevos comentarios

Lo que tendremos que hacer ahora será que cuando el usuario escriba su comentario y pulse la tecla enter este sea enviado de manera asíncrona (utilizando Ajax) al servidor, después tendremos que dibujar en la pantalla de alguna manera lo que el visitante acaba de comentar, todo esto sin recargar la página. Esto puede sonar más complicado de lo que es, sobre todo si eres nuevo con jQuery. Por suerte jQuery nos permite manipular el DOM, podemos incluir elementos diatónicamente en nuestro sitio de manera muy sencilla.

¿Recuerdan el plugin de validación que había agregado en un inicio?, bueno pues ahora viene la parte interesante, el plugin nos permite agregar validaciones de todo tipo en los campos y capturar ciertos eventos que ocurren en un formulario, por ahora utilizaremos uno llamado submitHandler. submitHandler nos permite indicar código para ser ejecutado una ves que el formulario ha activa el disparador submit, esto es especialmente util a la hora de validar campos y mostrar información en la pantalla. De nuevo, este código va en cualquier parte de nuestro index.html pero lo recomendable es que este colocado entre las etiquetas head y después de haber includio la libreria jQuery y el plugin de validation.

		<script type="text/javascript">
			$(document).ready(function(){
				$('#postComment').validate({
					submitHandler: function(form) {
		    			
		  			},
			        errorPlacement: function(error,element) {
			          return;
			        },
		      	});
			});
		</script>

Después el bloque de código que se ejecutara dentro del submitHandler será una petición post al servidor utilizando ajax.

$.ajax({
						      type: "POST",
						      contentType: "application/json; charset=utf-8",
						      url: $(form).attr('action'),
						      data: $(form).serialize(),
						      success: function (result) {

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);
						           $('#newComment').val('');
						      }
						 });

Por el momento el formulario está mandando una petición al archivo post.php que no tiene nada, pero sería posible agregar código en este archivo que permitiera guardar los comentarios una base de datos (tal vez muestre como hacer eso en un artículo futuro)

<?php 
	// Guardar el contenido en una base de datos
	// O lo que quieras
	echo "Ok"; 
?>

Ok, continuamos, lo verdaderamente importante aquí es el siguiente código:

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);

Como mencionaba más arriba jQuery nos permite manipular el DOM, con las instrucciones anteriores estamos creando los divs necesarios con el texto y el nombre del visitante que después serán agregados a la lista de comentarios existentes, esto nos dará la ilusión de que el comentario fue agregado inmediatamente después de ser escrito (aunque podría ser el caso de que la información no haya terminado de ser procesada en el servidor).

Combinando el HTML, el CSS y el javascript nuestro archivo index.html tendría que verse de la siguiente manera:

<!DOCTYPE html>
	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
    	<title>Comentarios tipo facebook con jQuery</title>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript" src="jquery.validate.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#postComment').validate({
					submitHandler: function(form) {
		    			
		    			 $.ajax({
						      type: "POST",
						      contentType: "application/json; charset=utf-8",
						      url: $(form).attr('action'),
						      data: $(form).serialize(),
						      success: function (result) {

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);
						           $('#newComment').val('');
						      }
						 });
		  			},
			        errorPlacement: function(error,element) {
			          return;
			        },
		      	});
			});
		</script>
    	<style type="text/css">
    		body
    		{
    			font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
				font-size: 11px;
    		}
    		#container
    		{
				width: 290px;
				margin: 0 auto;
				height: auto;
				overflow: auto !important;
    		}
    		#commentBox
    		{
				background: #edeff4;
				height: 25px;
				overflow: hidden;
				display: block;
				padding: 10px;
    		}
	    	#postComment input
	    	{
				width: 100%;
	    	}
	    	#postComment .enviar
	    	{
	    		clear: both;
				float: left;
	    	}

	    	#comments
	    	{
				margin-top: 15px;
				float: left;
				width: 100%;
				background: #edeff4;
				overflow: auto;
	    	}
	    	#comments .comment
	    	{
				padding: 10px;
				border-bottom: 1px solid #fff;
				overflow: auto;
	    	}
	    	#comments .comment .avatar
	    	{
				float: left;
				margin-right: 10px;
	    	}
	    	#comments .comment .avatar img
	    	{
	    		width: 32px;
	    		height: 32px;
	    	}
	    	#comments .comment .autoComment
	    	{
				float: right;
				width: 225px;
	    	}
	    	#comments .comment .autoComment span
	    	{
	    		font-weight: bold;
	    		color: #3b5998;
	    		cursor:pointer;
	    	}
    	</style>
	</head>
  	<body>
  		<div id="container">
	  		<div id="comments">
	  			<div class="comment">
					<div class="avatar">
						<img src="img/1.png" />
					</div>
				    <div class="autoComment">
				    	<span>Alevsk </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/2.png" />
					</div>

				    <div class="autoComment">
				    	<span>Chell </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/3.png" />
					</div>

				    <div class="autoComment">
				    	<span>Calorine </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  		</div>
	  		<div id="commentBox">
	    		<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
	  				<input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
	  				<input type="hidden" name="username" id="username" value="Alevsk"></input>
	  			</form>
	  		</div>
  		</div>
  	</body>
</html>

Bueno con este concluye este corto y básico tutorial, les pueda servir como base a la hora de implementar sus sistemas de comentarios y como siempre en los siguientes enlaces pueden descargar el codigo fuente y ver un ejemplo funcionando. Cualquier duda pueden escribirla en la sección de comentarios xD.

salu2

Juegos en la nube utilizando Dropbox

blog-11

Hace 10-12 años nadie hubiera imaginado que podríamos comenzar a escribir un documento en nuestra computadora personal, guardarlo, y luego continuar en la computadora de la oficina, todo de forma totalmente automática. El concepto de almacenamiento en la nube era algo muy nuevo que apenas se estaba desarrollando, reservado únicamente para grandes compañías, universidades e instituciones del gobierno. Afortunadamente hoy en día el almacenamiento de archivos en la nube es ya una realidad, muchas compañías como Dropbox o Microsoft (Skydrive) han sido lo bastante flexibles como para permitir que cualquier persona tenga la oportunidad de utilizar sus servicios y disponer de sus archivos en cualquier lugar y en cualquier momento y de manera gratuita.

Hoy en día la industria de los videojuegos ha evolucionado bastante, plataformas como Steam y Origin nos permiten utilizar nuestros juegos en cualquier computadora, guardar nuestro progreso y continuar justo donde nos quedamos en cualquier otra computadora que tenga el cliente instalado, todo esto haciendo uso del almacenamiento en la nube :), por supuesto hoy en día solo los juegos más modernos tienen incluida esta característica, pero ¿qué pasa con los juegos viejos que no tienen esta funcionalidad implementada?, en lo personal es bastante molesto empezar una historia (si nuestro juego es de historias, etc) en la computadora que llevamos a la universidad, y al regresar a nuestra casa utilizar la computadora de escritorio y darnos cuenta que tenemos que jugar de nuevo la historia. Es aqui donde entran a nuestro rescate servicios gratuitos como Dropbox :).

Para que un videojuego utilice el “almacenamiento en la nube” en lugar del almacenamiento local tenemos que hacer básicamente 2 cosas.

  • Encontrar la carpeta donde el juego almacena nuestro progreso
  • Engañar de alguna manera al juego para que utilice nuestra carpeta de dropbox

El primer punto requiere un poco de investigación, muchas veces en las FAQ o en foros se indican cuáles son las carpetas que el juego utiliza para almacenar los avances, siempre podemos dar una revisada a los archivos del juego y tratar de entender cómo se comporta y utilizar google para obtener esta información. El segundo punto es bastante interesa y se puede realizar de varias formas, podemos complicar tanto esta parte como queramos, desde hacer ingeniería inversa al juego y forzar para que escriba directamente en la carpeta que queramos, utilizar enlaces simbólicos para “engañarlo” o cambiar la ruta por defecto si el juego nos lo permite :).

Para este ejemplo utilizare un videojuego (novela visual) llamada Katawa Shoujo, es un buen ejemplo puesto que el juego es multiplataforma (Windows, Linux y MAC OSX), asumiendo que tienen instalado Dropbox en todas las maquinas donde tendrán sus partidas sincronizadas comenzamos.

Primero tenemos que crear una carpeta en dropbox donde se almacenaran y sincronizaran nuestros datos para el juego

ks_dropbox

Como se ve en la imagen la carpeta se llama Renpy, respetando el nombre original, si tenemos progreso local de una vez copiarlo manualmente para que se vaya sincronizando con la nube de dropbox, las rutas de dropbox tanto en windows como en mac quedaron de la siguiente forma

  • Mac OS X: /Users/alevsk/Dropbox/games/katawa_shoujo/RenPy
  • Windows 8: C:\Users\Alevskey\Dropbox\games\katawa_shoujo\RenPy

Es importante guardar estas rutas en algún lado ya que más adelante las necesitaremos. Ahora, como mencionaba anteriormente tenemos que conocer es el directorio en donde Katawa Shoujo guarda el progreso de los jugadores, así que vamos a buscar esa información en el foro oficial del juego y en menos de 5 minutos encontramos que los directorios son:

  • Mac OS X: /Users/usuario/Library/RenPy
  • Windows 8: C:\Users\usuario\AppData\Roaming\RenPy

Bien, ahora tenemos que engañar al programa, como el juego no nos da la libertad de modificar la ruta del directorio donde guarda los progresos y hacerle ingeniería inversa seria tardado optamos por crear enlaces simbólicos, tanto en Windows como en sistemas basados en Unix esto es muy sencillo de realizar.

En Mac OSX lo que tendríamos que hacer seria abrir nuestra terminal y escribir los siguiente comandos

# Nos movemos al directorio donde está la carpeta Renpy
$ cd /Users/usuario/Library
# Si no hiciste un respaldo de tu avance con anterioridad ahora es un buen momento, ya que el siguiente comando borrara la carpeta Renpy
$ rm -rf Renpy
# Ahora creamos un enlace simbólico llamado Renpy que apunta a nuestra carpeta sincronizada en dropbox
$ ln -s /Users/usuario/Dropbox/games/katawa_shoujo/RenPy RenPy

Listo terminamos con la versión Mac de KS, ahora vamos a Windows y hacemos lo mismo, los enlaces simbólicos son creados desde la consola (CMD) utilizando el comando mklink.

# Nos movemos al directorio donde está la carpeta Renpy
> cd C:\Users\usuario\AppData\Roaming
# Si no hiciste un respaldo de tu avance con anterioridad ahora es un buen momento, ya que el siguiente comando borrara la carpeta Renpy
> rmdir RenPy /s /q
# Ahora creamos un enlace simbólico llamado Renpy que apunta a nuestra carpeta sincronizada en dropbox
> mklink /D RenPy C:\Users\usuario\Dropbox\games\katawa_shoujo\RenPy

Y listo con esto Katawa Shoujo ya utiliza la nube, ahora podemos tener sincronizado nuestro progreso de manera automática en todas nuestras computadoras :).

Avance guardado en Windows

Avance guardado en Windows

Avance del juego guardado en Mac

Avance del juego guardado en Mac

Siguiente estos sencillos pasos podemos tener la mayoría de nuestros juegos no tan modernos utilizando la nube en un abrir y cerrar de ojos, con esto quiero que se den cuenta que dropbox no está solo limitado a sincronizar documentos de ofimática, las posibilidades son infinitas :).

OSU! Juego rítmico musical de habilidad

Hola estimados lectores, en esta ocasión quiero compartir con ustedes uno de mis juegos favoritos de los últimos meses (estoy seguro que los workaholics o la gente que trabaja largas jornadas me lo agradecerán :p), probablemente muchos ya lo conozcan, otros tal ves no y algunos otros solo han escuchado hablar de el pero nunca lo han jugado, el juego en cuestión se llama OSU!. OSU! es un juego rítmico free-to-play mantenido por una comunidad bastante cooperativa y amigable, lo que significa que cualquier persona además de disfrutar del juego puede involucrarse directamente en su “desarrollo” (realmente es en el desarrollo de beatmaps). En la actualidad OSU! esta disponible para Windows, MAC OSX, IOS y Android (ya es posible jugar en el smarthphone).

screenshot005

¿Que significa que sea un juego rítmico?

Básicamente el objetivo del juego es hacer clic en los círculos que aparecen mientras escuchas música de fondo, esto en un inicio no suena tan woooow pero después verán lo que lo hace interesante, el principio es bastante parecido al juego de baile que era muy popular en el 2000 donde tenías que pisar flechas en el suelo conforme te lo iba indicando la pantalla.

OSU! en un inicio fue desarrollado como un juego casual, aquí viene la parte interesante para los workaholics, ya que una partida no toma mas de 5 minutos, lo que es ideal para cuando queremos tomar un pequeño descanso (y créanme que después de pasar largas sesiones programando despejar la mente ayuda un poco). Para comenzar a jugar tan solo hace falta descargarlo y crear una cuenta. La creación de la cuenta es opcional (altamente recomendado) y nos permitirá llevar un registro de nuestras partidas y posicionarnos en un ranking general, así como ir ganando experiencia y subiendo de nivel conforme jugamos. La parte interesante de esto es que OSU! cuenta con una especie de tienda en línea en donde es posible descargar beatmaps (mapas musicales para jugar) de forma totalmente gratuita (necesitas tener una cuenta), como mencionaba anteriormente estos mapas son creados mayormente por miembros de la comunidad utilizando el propio editor de OSU! que viene incluido en el juego. La tienda de OSU! es gigantesca y puede ser explorada mediante género musical (hay música de todo tipo, rock, pop, jazz, metal y un laaaaaaaargo etc.) así que puedes armar una lista en base a tus gustos melómanos sin ningún problema :p.

Agregar nuevos beatmaps es bastante sencillo, tan solo tienes que descargarlos de la tienda y hacer doble clic para instalarlos, OSU! se encargara del resto y en pocos segundos estará listo para ser jugado, algo importante que debo mencionar es que la mayoría de las veces cuando descargamos los beatmaps estos vienen “repetidos” 3 o más veces, esto es porque los desarrolladores les pueden asignar niveles de dificultad diferentes. La dificultad de un beatmap es representada mediante estrellas y en general va desde 1 a 5 (Easy, Normal, Hard, Insane). Otra característica atractiva que implementa OSU! es su sistema multijugador basado en salas de tipo chat donde el host elije un beatmap que será jugado por todos los participantes, de esta manera todos pueden compartir su score al final.

Para finalizar puedo decir que estado jugando OSU! desde hace varios meses ya (para distraer un poco la mente xD), y ya soy capas de jugar los mapas de nivel hard (5 estrellas), incluso grabe una pequeña partida como demostración para este post hace un tiempo, espero les guste.

Como recomendación pueden empezar a jugar los mapas básicos (hay un foro y una comunidad muy amigable dispuesta a ayudar a todos los newbies), no se frustren si no pueden completar un beatmap, como todo en la vida esto requiere practica para ser dominado, claro, eso sin dejar de lado el trabajo y las obligaciones :p.