Archivo de la categoría: Snippets

StringTransformer: the transformation tool

st

Hola lectores, en esta ocasión me gustaría compartir con ustedes una herramienta opensource que he publicado en mi repositorio de github, se trata de StringTransformer, un script desarrollado en python cuya finalidad es tomar una cadena de texto y transformarla a distintas representaciones equivalentes de la misma, por ejemplo binario, hexadecimal, octal, md5, sha256, etc. Las funciones de transformación son clases separadas del script principal por lo que la herramienta es modular, esto significa que es bastante fácil para cualquier programador (que sepa python) crear sus propias transformaciones y extender la funcionalidad de la herramienta.

Esta herramienta les puede ser útil cuando están jugando Capture the flags y necesitan una forma rápida de analizar cadenas de texto (o al menos esa es su finalidad), la herramienta sigue en desarrollo, corrigiendo bugs e implementando nuevas funcionalidades.

Instalación

Su instalación es bastante sencilla, primero deben de clonar el repositorio usando git

$ git clone https://github.com/Alevsk/stringTransformer.git

Una vez descargado el repositorio acceden a la carpeta del proyecto, dan los permisos de ejecución necesarios y lanzan el script:

$ cd stringTransformer
$ chmod +x stringTransformer.py
$ ./stringTransformer.py
                  
              _______         
       _____ |   _   |  ____  
      |    |  \  V  /  |    | 
      |   \ \  \_ _/  / /   | 
      \  \ \ \   '   / / /  / 
       \  \   | 'V' |   /  /  
     |\ \_____| \ / |_____/ /|
     | \        | |        / |
     |  |    ,/|| ||\,    |  |
     |   `| '  || ||  ' |`   |
     |    | |  || ||  | |    |
     \    | |  || ||  | |    /
      \.  | |  ||_||  | |  ./ 
       \  | |  |___|  | |  /  
         \' ,  _____  , '/    
             \/ ___ \/        
               /___\          
                           

stringTransformer v0.1 (https://github.com/alevsk/stringTransformer/)

Usage: stringTransformer.py -i INPUT_STRING | --input INPUT_STRING | --load FILE

stringTransformer.py: error: Required argument is missing. Use '-h' for help.

Con el comando -h o –help podran ver el menu de ayuda:

Options:
  -h/--help             show this help message and exit
  -i/--input=INPUT      set the input string to test with
  -l/--load=LOAD_FILE   load list of input strings (one per line)
  -x/--exclude=EXCLUDE  exclude this representations
  -o/--only=ONLY        transform input only to this representations
  -O/--output=OUTPUT    generate an output file
  -p/--params=PARAMS    use custom parameters on transformation functions
  --list                list available input representations
  --update              update from the official git repository

Examples:
./stringTransformer.py -i [STRING]
./stringTransformer.py -i [STRING] --exclude "hexa, octal"
./stringTransformer.py -i [STRING] --only "hexa, octal"
./stringTransformer.py -i [STRING] --params "rot.cipher=13,rot.encoding=utf-8"
./stringTransformer.py --load list.txt
./stringTransformer.py --list

Para ver las funciones de transformación actualmente disponibles pueden utilizar –list:

stringTransformer v0.1 (https://github.com/alevsk/stringTransformer/)

- sha1
- octal
- binary
- sha256
- html_entities_decode
- html_entities_encode
- md5
- base64_encode
- base64_decode
- ascii
- slug
- rot_encode
- hexa
- urlencode

Puedes ayudar a crear más funciones de transformación para la herramienta, para eso sugiero lean la documentación en la página principal del repositorio (o en el archivo README.md) https://github.com/Alevsk/stringTransformer

Ejemplos de uso

Queremos aplicar una transformación hexadecimal, rot 13 encode y ascii a la cadena de texto “The transformation tool”

$ ./stringTransformer.py -i "The transformation tool" -o "hexa,rot_encode,ascii"

Obtenemos como resultado:

stringTransformer v0.1 (https://github.com/alevsk/stringTransformer/)

[i] Loaded 3 representations to apply.
[i] Starting tests at: "23:54:04"

The transformation tool

[i] applying transformation...

ascii:

84 104 101 32 116 114 97 110 115 102 111 114 109 97 116 105 111 110 32 116 111 111 108

rot_encode:

Gur genafsbezngvba gbby

hexa:

54 0x68 0x65 0x20 0x74 0x72 0x61 0x6e 0x73 0x66 0x6f 0x72 0x6d 0x61 0x74 0x69 0x6f 0x6e 0x20 0x74 0x6f 0x6f 0x6c 

==================================

Incluso podemos pasar parámetros a las funciones de transformación que lo soporten, rot_encode por defecto utilizar 13 posiciones de desplazamiento pero aquí indicamos que use 51

$ ./stringTransformer.py -i "The transformation tool" -o "rot_encode" --params="rot_encode.cipher=51"

stringTransformer v0.1 (https://github.com/alevsk/stringTransformer/)

[i] Loaded 1 representations to apply.
[i] Starting tests at: "23:58:11"

The transformation tool

[i] applying transformation...

rot_encode:

Sgd sqzmrenqlzshnm snnk

==================================

La herramienta cuenta con muchísimos otros parámetros que los invito a explorar.
saludos

Tutorial Material Design en Android #3

Agregando iconos (actions) al ToolBar

Hola lectores programadores :), continuamos con la serie de tutoriales de Material Design en Android, siguiendo con los post anteriores ahora toca agregar algunos elementos a nuestra Toolbar personalizada, pero primero nos encargaremos de un pequeño “bug estético”, actualmente nuestra app luce así y si hacemos tap en el icono superior derecho (3 puntos) veremos que la letra del popupMenu es apenas visible. Corrijamos eso.
popupmenu_bug

Nos vamos a nuestros ya conocidos archivos styles.xml

  • /app/src/main/res/values/styles.xml
  • /app/src/main/res/values-21/styles.xml (api 21)

Y vamos a agregar un nuevo item con nombre popupTheme, quedando de la siguiente forma

values/style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="popupTheme">@style/Base.ThemeOverlay.AppCompat.Dark</item>
    </style>

</resources>

values-21/style.xml (api 21)

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:colorPrimary">@color/primaryColor</item>
        <item name="android:colorPrimaryDark">@color/primaryColorDark</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:colorAccent">@color/colorAccent</item>
        <item name="android:popupTheme">@style/Base.ThemeOverlay.AppCompat.Dark</item>
    </style>

</resources>

Guardamos y corremos la aplicación de nuevo y ahora veremos algo como lo siguiente, ¿Mucho mejor cierto?

popupmenu_dark

Es posible personalizar aún mas este elemento del ToolBar, estos son algunos de los atributos que podemos utilizar

  • popupMenuStyle
  • textColorPrimary
  • popupAnimationStyle>
  • popupBackground

Se puede personalizar prácticamente cualquier aspecto del menú, por ejemplo:

popupmenu_custom2

Les dejo de tarea hacer su propio menú custom 🙂 y bueno ahora que tenemos resuelta esa parte del popupMenu toca agregar los iconos, en nuestro proyecto de Android Studio, en la carpeta res (resources) dentro del apartado de menú encontramos un archivo llamado menu_main.xml (si por algún motivo no está entonces deberán crearlo /res/menu/menu_main.xml).

Como en todos los tutoriales les dejo la documentación oficial sobre los lineamientos sobre los iconos, sus dimensiones y formas aqui y aca.

Por default nuestro menú solo tiene 1 elemento como podemos ver en el siguiente código

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.alevsk.materialdesignapp.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

El elemento item tiene algunos atributos, por ejemplo app:showAsAction puede tomar tres valores:

  • never: No mostrara el icono
  • ifRoom: Si hay espacio mostrara el icono
  • always: Siempre mostrara el icono

android:title es el atributo donde definimos el nombre de la acción (si por ejemplo deciden no mostrar un icono o mostrarlo solo si hay espacio, por default el título de la acción será el que definan con este atributo).

Por el momento vamos a definir 3 acciones (conforme avance esto los remplazaremos), quedando el código del archivo menu_main.xml de la siguiente manera.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.alevsk.materialdesignapp.MainActivity">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
        android:orderInCategory="1"
        android:title="Busqueda"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_copy"
        android:icon="@drawable/abc_ic_menu_copy_mtrl_am_alpha"
        android:orderInCategory="2"
        android:title="Copiar"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_selectall"
        android:icon="@drawable/abc_ic_menu_selectall_mtrl_alpha"
        android:orderInCategory="3"
        android:title="Seleccionar todo"
        app:showAsAction="always" />
</menu>

Corremos la app y veremos algo como esto

toolbar_icons

¿Los iconos no son muy visibles verdad?, podemos arreglar esto rápidamente, el tema por default de nuestra aplicación es texto oscuro sobre fondos claros, esa es la razón por la que los iconos tienen un color oscuro, sin embargo podemos modificar nuestro archivo app_bar.xml e indicar que queremos que esa parte especifica de la app (ToolBar) utilice el tema de textos claros sobre fondos oscuros, así que editamos /app/src/main/res/layout/app_bar.xml y definimos el tema Holo como se muestra a continuación.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    app:theme="@style/Theme.AppCompat.NoActionBar"
    android:layout_height="wrap_content"
    android:background="@color/primaryColor">

</android.support.v7.widget.Toolbar>

toolbar_icons3

Eso es todo por ahora, en el siguiente tutorial vamos a definir de que va a tratar nuestra app y aprenderemos a implementar desde cero unos de los elementos más poderosos de Android, el NavigationDrawer 🙂 salu2

50% de descuento para Campus Party 2014!

cover2

Uno de los eventos más importantes de Tecnología y ambiente tecnológico del mundo se celebrará en nuestro país en Zapopan, hablamos de CPMX5 y hoy te mostraremos la oportunidad de como obtener tus entradas con el 50 de descuento.

  • Deben registrarse como campusero en www.campus-party.com.mx.
  • Si ya tienes usuario solo debes hacer login.
  • Una vez hecho login en el panel de usuario deben seleccionar la opción «Comprar entrada». (http://www.campus-party.com.mx/webapp/fichaUsuario/pago)
  • Elegir la opción «Comprar con descuento».
  • En el proceso deben usar el siguiente código de descuento: CD501ihw35hi (copia y pega).
  • Una vez elegido el tipo de entrada se procede al pago de la cantidad vía PayPal.

¡Y listo! solo faltaría esperar a que llegue el día de comienzo de #CPMX5 para disfrutar de una semana de contenidos para los fans de la tecnología y lo que esto implica.

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

@Chopapp para compartir código fuente

Después de un largo descanso …. Chop es una curiosa herramienta desarrollada por ZURB que te permite compartir snippets (trozos de código fuente) y recibir retro alimentación, si quieren saber por que esta app es bastante interesante les recomiendo seguir leyendo :).

chop

La idea es bastante simple y divertida, en el caso de querer mostrar nuestro codigo a alguna otra persona (similar a otros servicios como copypastecode o pastebin) y recibir algun tipo de retroalimentación tan solo tenemos que copiarlo en el formulario, elegir el lenguaje de programación adecuado y usar el botón de Chop It!, ejemplo:

chop_example1

Una vez hecho esto la aplicación nos pedirá un nombre de usuario y a continuación nos dará un link con el cual nuestros amigos podrán ver y opinar sobre nuestro código :), lo mas interesante de esta aplicación a diferencia de muchas otras que existen en el mercado es que nos permite realizar comentarios sobre el código línea por línea y no un comentario general, desde mi punto de vista es una forma bastante interesante de innovar y mejorar respecto a servicios ya existentes. El resultado final es algo como esto:

chop_example_2

Si quieren mantenerse informados sobre el desarrollo de esta aplicación pueden seguir a @chopapp