sábado, 13 de julio de 2013

Paint con Canvas y HTML 5

Hoy os traigo un pequeño código que estuve probando para quien quiera descargarlo. Es un simple paint hecho con Canvas, HTML5 y JavaScript.



He utilizado la librería BootStrap para los botones y farbastic para la elección de los colores.

Lo que puedes hacer es pintar seleccionando el color que uieras y también el grosor que quieras. Cada vez que aprietas el botón del ratón y lo sueltas, la imagen pintada se guarda en un array lo que permite que luego se pueda recuperar para poder rehacer, deshacer o eliminar el dibujo.

Para ver la demo funcionando online haz click aqui.

Puedes descargar todo el código aquí.

Si tienes alguna duda de su funcionamiento puedes dejarnos un comentario y trataremos de ayudarte.

jueves, 27 de junio de 2013

Tutorial Google App Script: envio de emails con hojas de cálculo y gmail

Lo que haremos en este tutorial de Google App Script será crear una hoja de cálculo con usuarios en los que aparezcan su nombre, apellidos y su email. Lo que hará el script será enviar un correo a cada uno de los usuarios con el mensaje que queramos.

Lo primero que tenemos que hacer es crear una hoja de cálculo. Para ello nos vamos a Google Drive y seleccionamos Crear > Hoja de cálculo (Spreadsheet):
Damos un nombre a nuestra hoja de cálculo y le metemos algunos usuarios (yo he puesto 3 con emails de ejemplo pero convendría poner alguno válido para comprobar que nos llega el correo y funciona):

miércoles, 26 de junio de 2013

Código para banear ip con PHP

Lo que quiero mostrarles a continuación es un pequeño código en php que les servirá por si quieren evitar el acceso de usuarios a sus páginas, es decir, banearles.

El código es este:

<?php
$ip=$_SERVER['REMOTE_ADDR'];
$valid = preg_match('/^11.111.11.\d{1,3}\z/', $ip);
if($valid){
echo 'Estas baneado';
}else{
echo 'No estas baneado';
}
?>

Lo que hacemos es obtener en la variable ip la ip del visitante y luego comprobarla mediante una expresion regular, si coincide haremos un cosa y sino no, haremos otra.

En este código concretamente estaríamos mostrando un mensaje de "estas baneado" a todos los usuarios que tuviesen la ip 11.111.11.XXX donde XXX sería cualquier combinación de 3 números.

Si quisiésemos banear varias ips concretas, podríamos hacer un array con esas ips e ir recorriendolo comprobando si coinciden.

domingo, 23 de junio de 2013

Tutorial transferir blog wordpress a Banahosting

En este tutorial os enseñaré como transferir un sitio creado en wordpress a Banahosting de forma rápida, sencilla y sin perder visitas ni posiciones.

Lo primero que tenemos que hacer es descargar nuestro sitio completo (carpetas wp-admin, wp-content, wp-includes, archivos index.php, wp-config.php... todos los archivos y carpetas) y base de datos en formato sql de nuestro host actual para pasarlo a Banahosting.

Una vez descargado todo, creamos un archivo .zip con todos los archivos que hemos descargado de nuestra web (menos base de datos).

Accedemos a nuestro cpanel de Banahosting y hacemos click en la opción "Addon Domains":
En la siguiente tendremos que rellenar los datos con nuestro nombre de dominio (lo que hará que nos rellene automáticamente el usuario de ftp y ubicación de nuestro sitio) y password:

Hola Mundo con Box2D, tutorial básico para principiantes

En este sencillo tutorial flash de ActionScript 3.0 queremos hacer una muy breve demostración de como empezar a utilizar Box2DFlash

Video con la explicación paso a paso:
 Enlace para descargar de Box2DFlash: Box2dFlash.org

Código:


package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import Box2D.Dynamics.*;
    import Box2D.Collision.*;
    import Box2D.Collision.Shapes.*;
    import Box2D.Common.Math.*;
    public class demo extends Sprite {
        public var the_world:b2World;
        var time_count:Timer=new Timer(1000);
        public function demo() {
            var environment:b2AABB = new b2AABB();
            environment.lowerBound.Set(-100.0, -100.0);
            environment.upperBound.Set(100.0, 100.0);
            var gravity:b2Vec2=new b2Vec2(0.0,10.0);
            the_world=new b2World(environment,gravity,true);
            var debug_draw:b2DebugDraw = new b2DebugDraw();
            var debug_sprite:Sprite = new Sprite();
            addChild(debug_sprite);
            debug_draw.m_sprite=debug_sprite;
            debug_draw.m_drawScale=30;
            debug_draw.m_fillAlpha=0.5;
            debug_draw.m_lineThickness=1;
            debug_draw.m_drawFlags=b2DebugDraw.e_shapeBit;
            the_world.SetDebugDraw(debug_draw);
            var final_body:b2Body;
            var the_body:b2BodyDef;
            var the_box:b2PolygonDef;
            the_body = new b2BodyDef();
            the_body.position.Set(8.5, 13);
            the_box = new b2PolygonDef();
            the_box.SetAsBox(8.5, 0.5);
            the_box.friction=0.3;
            the_box.density=0;
            final_body=the_world.CreateBody(the_body);
            final_body.CreateShape(the_box);
            final_body.SetMassFromShapes();
            addEventListener(Event.ENTER_FRAME, on_enter_frame);
            time_count.addEventListener(TimerEvent.TIMER, on_time);
            time_count.start();

        }
        public function on_time(e:Event) {
            var final_body:b2Body;
            var the_body:b2BodyDef;
            var the_box:b2PolygonDef;
            the_body = new b2BodyDef();
            the_body.position.Set(Math.random()*10+2, 0);
            the_box = new b2PolygonDef();
            the_box.SetAsBox(Math.random()+0.1,Math.random()+0.1);
            the_box.friction=0.3;
            the_box.density=1;
            final_body=the_world.CreateBody(the_body);
            final_body.CreateShape(the_box);
            final_body.SetMassFromShapes();
        }
        public function on_enter_frame(e:Event) {
            the_world.Step(1/30, 10);
        }
    }
}



 Agradecimiento del código a Emanuele Fenorato

viernes, 21 de junio de 2013

Tutorial ActionScript 3.0 Eventos: Controlar las teclas que pulsamos

En el siguiente tutorial flash ActionScript 3.0 lo que quiero es enseñar a controlar las teclas que pulsamos desde nuestro teclado. El objetivo es hacer algo sencillo que muestre la flecha de dirección que pulsamos y cuantas veces hemos pulsados las teclas, como esto:

Lo primero que tenemos que hacer es crear un nuevo documento ActionScript 3.0
En este documento crearemos con la herramienta de texto, una caja de la siguiente manera:
Nos vamos a las propiedades de nuestro texto. En nombre de instancia le pondremos cajaTexto y en tipo: Texto dinámico:
Guardaremos el archivo como teclas en formato .fla donde queramos:
Una vez guardado crearemos un nuevo documento pero esta vez Clase de ActionScript 3.0 con el nombre codigo:
Este archivo nos creará un pequeño código como este:
package  {
public class codigo {
public function codigo() {
// constructor code
}
}
}
Vamos a modificar el código que quede de esta forma:
package  {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.KeyboardEvent;
public class codigo extends MovieClip {
public function codigo() {
stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPulsada);
}
function teclaPulsada(e:KeyboardEvent):void{
switch(e.keyCode)
{
case 38 :
cajaTexto.text=("Superior");
break;
case 40 :
cajaTexto.text=("Inferior");
break;
case 39 :
cajaTexto.text=("Derecha");
break;
case 37 :
cajaTexto.text=("Izquierda");
break;
default:
cajaTexto.text=("Ninguna");
break;
}
}
}
}
Si observamos un poco el código:
Hicimos 3 importaciones al código y extendimos la clase codigo de MovieClip
En el constructor añadimos un evento para que cada vez que presionemos una tecla se llame a la función teclaPulsada:
stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPulsada);
La función tecla pulsada lo que tiene es un switch, dependiendo de la tecla que hayamos pulsado (teclas por código, el 38 equivale a la flecha superior, el 40 a la tecla inferior...) nos escribirá en nuestra caja de texto superior, inferior, derecha... en caso de haber pulsado otra tecla nos escribirá ninguna.
Una vez tenemos el codigo lo guardaremos en la misma carpeta donde anteriormente habíamos guardado nuestro archivo.fla Lo guardaremos con el nombre codigo en formato .as
Nos volvemos a nuestro archivo.fla y abrimos las propiedades del documento (no las de la caja de texto). Le añadiremos la clase codigo que hemos creado antes:
Guardamos todo y pulsamos Ctrl + Enter para probar nuetro programa. Cada vez que pulsemos una tecla de dirección nos tendrá que escribir cual hemos pulsado.
Para hacer un contador de todas las teclas que pulsamos, en nuestra clase teclas añadiremos la variable:
var contadorTeclas:Number = 0;
y dentro de la función teclaPulsada añadiremos:
contadorTeclas++;
cajaContador.text=String(contadorTeclas);
Solo nos queda volver a nuestro documento archivo.fla y hacer una nueva caja de texto en la que tenga por nombre de instancia cajaContador y el tipo de texto sea dinámico, al igual que hicimos en la primera caja de texto que creamos.
El código completo quedaría de la siguiente manera:
package  {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.KeyboardEvent;
public class codigo extends MovieClip {
var contadorTeclas:Number = 0;
public function codigo() {
stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPulsada);
}
function teclaPulsada(e:KeyboardEvent):void{
contadorTeclas++;
cajaContador.text=String(contadorTeclas);
switch(e.keyCode)
{
case 38 :
cajaTexto.text=("Superior");
break;
case 40 :
cajaTexto.text=("Inferior");
break;
case 39 :
cajaTexto.text=("Derecha");
break;
case 37 :
cajaTexto.text=("Izquierda");
break;
default:
cajaTexto.text=("Ninguna");
break;
}
}
}
}