Blog

  • Aprende a programar desde cero: Condicionales

    Esta es una serie de artículos donde discutimos conceptos básicos de programación de una forma intuitiva, por medio de ejemplos.

    En esta ocasión aprenderemos sobre los condicionales, para que sirven y como usarlos.

    Que son los condicionales

    Los condicionales nos permiten escoger entre diferentes acciones según la respuesta a un interrogante.

    Por ejemplo:

    • Si cuesta menos de $10.000 me lo compro.
    • Si no llueve me pongo el vestido rojo.

    En estos ejemplos la acción a seguir depende de la respuesta a un interrogante, por lo que la acción cambia si la respuesta es si (Verdadera/True) o no (Falsa/False).

    Las partes de una condición son:

    • La incógnita: si pasas el curso
    • La acción que tomamos si la respuesta es verdadera: comprar bicicleta
    • Opcional: una consecuencia si no se cumple: te quedas sin TV 1 mes.

    enter image description here

    Podemos hacer preguntas mas complicadas uniendo varias preguntas mas pequeñas con los conectores Y y O, como por ejemplo:

    Si me pagan y no llueve vamos a piscina

    Si no paga no se va a piscina
    Si llueve tampoco se va a piscina
    Solo si las dos se cumplen

    Condiciones en programación

    Las condiciones nos permiten inspeccionar las variables de nuestro programa con el fin de responder preguntas necesarias para resolver un problema.

    Por ejemplo, si estamos haciendo una calculadora; casi todas las operaciones matemáticas básicas se pueden realizar entre cualquier numero, menos la división, la cual no se puede hacer entre cero.

    Ya que las entradas a nuestra calculadora son hechas por el usuario, no hay nada que podamos hacer para impedir que este ingrese el numero que quiera.

    Lo que si podemos hacer es inspeccionar dichos números para verificar que las condiciones necesarias para la correcta ejecución de nuestro programa se cumplan:

    int dividendo = 10;
    int divisor = 0; // imagina que lo ingreso el usuario
    
    if (divisor === 0) {
    	// mostrar mensaje de error
    } else {
    	// el divisor no es cero por lo que se puede proceder
    	float resultado = dividendo / divisor;
    	// mostrar resultado
    }
    

    Sintaxis de un condicional

    La forma de escribir el condicional varia dependiendo del lenguaje, pero por lo general tienen la siguiente forma:

    Lenguajes con sintaxis similar a c (java, c#, c++, php, javascript…)

    if (condición dentro de paréntesis) {
      // lo que se ejecuta si es cierta la condición
      // va dentro de corchetes/llaves
    } else { // <-- opcional
      // lo que se desea ejecutar si es falsa
      // también va dentro de corchetes/llaves
    }
    

    En caso de que existan múltiples condiciones podemos usar un else if (sino si). En este caso se ejecutara el primer bloque cuya condición sea cierta y se descartaran los demás.

    if (<primera-condición>) {
    	// acciones
    } else if (<segunda-condición>) {
    	// acciones
    } else { // ninguna de las condiciones se cumple
       // acciones
    }
    

    Como hacemos “preguntas” en un condicional

    Existen diferentes operadores que nos permiten hacer preguntas acerca de las variables con el fin de tomar una decisión.

    símbolo significado
    == Compara si dos valores son iguales
    != Compara si dos valores son diferentes
    > Compara si el valor de la izquierda es mayor que el de la derecha
    < ¿Es el valor de la izquierda menor que el de la derecha?
    >= ¿Es el valor de la izquierda mayor o igual al de la derecha?
    <= ¿Es el valor de la izquierda menor o igual al de la derecha?

    Si queremos crear una pregunta mas compleja podemos conectar varias preguntas mas pequeñas usando conectores lógicos como:

    Símbolo significado
    && Tanto la parte izquierda como derecha son verdaderas
    || Alguna o ambas partes de la condición son verdaderas

    Nota: en algunos lenguajes como python se usa or y and en lugar de || y &&

    Como podemos ver, en programación el significado de O (||) es muy diferente al que usamos al hablar.

    Cuando usamos el conector O al hablar, se debe elegir una sola opción entre varias, por ejemplo: “Puedes comer pollo o carne”, Quieren decir que solo podemos comer una de ellas, pero no las dos.

    En programación cuando usamos O (||), la condición se cumple si una o varias de las “incógnitas” individuales se cumplen:

    int a = 3
    // dos de las tres "incógnitas" se cumplen
    // por lo que la condición se cumple
    if (a < 3 || a < 5 || a > 10) {
    	// acciones
    }
    

    Ejemplo practico

    Imagina que estas creando un juego de pocker y deseas calcular los puntos que obtiene un jugador.

    Para simplificar las cosas descartemos los tipos y solo verifiquemos los valores, existen varios tipos de mano:

    • Pares
    • Full
    • Escalera

    ¿Como sabes el puntaje de un jugador? usando condicionales

    // las cartas están guardas en variables c1, c2... hasta la cinco
    // para facilitar las cosas se encuentran ordenadas de mayor a menor
    if (c1 == c2 && c2 == c3 && c3 == c4) {
       // poker
    } else if (c1-c2 == 1 && c2-c3 == 1 && c3-c4 == 1 && c4-c5 == 1) {
       // escalera
    } else if (<?>) {
       // doble pares
    }
    

    ¿Que condición debe ir en el ultimo else if para saber si es un doble par?

    Conclusión

    Con esto concluimos la parte dedicada a los condicionales, si tienes alguna pregunta no dudes en dejarla en los comentarios.

  • Variables

    Aprende a programar desde cero: Variables

    Esta es una serie de artículos donde discutimos los conceptos básicos de la programación de una forma intuitiva, por medio de ejemplos.

    En esta ocasión aprenderemos sobre las variables, para que sirven y como usarlas en la practica.

    [toc]

    Que son las variables

    Las variables son una especie de contenedor que nos permite guardar un dato para luego poder recuperarlo de forma fácil y rápida por medio del nombre que le asignamos.

    En este sentido las variables se asemejan mucho a una caja con una etiqueta.

    Variables

    Imagina lo siguiente:

    Tu cuarto es un desorden y hay un montón de cosas que ya no usas, así que decides guardarlas.

    Tienes dos alternativas:

    1. Amontonar todo en un solo sitio.
    2. Usar cajas marcadas según su contenido

    El problema con la primera opción es que si luego quieres volver a utilizar, por ejemplo, tu viejo gameboy, tendrás que sacar cosa por cosa para encontrar lo que deseas.

    Si en lugar de eso acomodas las cosas en cajas marcadas, luego sera mucho mas fácil encontrarlas lo que deseas.

    Las variables guardan datos y se identifica por medio de un nombre.

    Para que sirven

    Las variables nos permiten reutilizar una solución.

    Una vez encontramos la solución a un problema, muy seguramente podemos aplicar la misma solución a problemas similares si identificamos las partes que cambian (varían) y las sustituimos.

    Un ejemplo de esto son las formulas matemáticas.

    Pitagoras halló la forma de calcular la hipotenusa de un triangulo rectángulo, con su teorema podemos resolver cualquier triangulo rectángulo con solo sustituir las variables con nuevos valores.

    Teorema de Pitágoras

    Un ejemplo “mas practico” son los formatos de documentos, donde solo debemos sustituir los campos en blanco con los datos requeridos.

    Aquí podemos identificar otra parte importante de las variables: el tipo de dato.

    El tipo de dato es el conjunto de valores que una variable puede tomar. Si vemos el siguiente formato de permiso, solo ciertos valores tienen sentido en cada campo.

    Formato de permiso

    En los campos de nombres y motivo no tiene sentido escribir puros números, así como en los de día, año curso y teléfono puras letras.

    Las variables solo tienen un conjunto de valores posibles (tipo de dato)

    Una definición informal

    Con lo visto anteriormente podemos decir que:

    Una variable nos permite almacenar un valor de cierto tipo para su posterior recuperación por medio de su nombre.

    Variables en la practica

    Ahora que tenemos una idea mas clara sobre que es una variable, es momento de ponerlo en practica.

    Como crear una variable

    La creación de una variable se divide en:

    • Definición: le damos un nombre y especificamos el tipo de dato.
    • Inicialización: Asignamos un valor a la variable.

    Como crear una variable

    En los lenguajes de tipado dinámico no se especifica un tipo de dato he incluso podemos cambiar el contenido de una variable de un entero a un float o un string – Aunque no deberíamos hacerlo, ya que ésto genera confusión.

    Ejemplos de lenguajes de tipado dinámico son son javascript, php y python.

    Tipos de datos

    Si bien los tipos de datos dependen del lenguaje que estemos utilizando, existen algunos tipos básicos que siempre encontraremos:

    TIPO DE DATO DESCRIPCIÓN
    int Números enteros
    float Números con decimales
    boolean Valor logico (vardadero o falso)
    string Texto
    Arreglos Conjunto de datos del mismo tipo

    En lenguajes con tipado estático es necesario especificar que tipo de dato deseamos guardar en la variable y no es posible almacenar un dato que no sea del tipo que especificamos:

    int entero = 10;
    float decimal = 1.3;
    String texto = "hola mundo!"
    // Esto genera un error
    texto = 10;
    

    En lenguajes de programación con tipado dinámico no es necesario especificar el tipo de variable.

    // javascript
    var entero = 10;
    var decimal = 1.23
    var texto = "hola mundo!"
    // es posible cambiar el tipo de dato, pero no deberíamos hacerlo
    texto = 10;
    

    Nombres de las variables

    Las reglas para la creación de nombre de variables dependen del lenguaje, por lo que debes consultar la documentación del mismo para estar seguro; pero por lo general:

    • Tienen que empezar con una letra o un guion bajo. Algunas excepciones:
      • En PHP tienen que empezar con el signo $
      • En javascript pueden empezar con el signo $.
    • No pueden contener espacios
    • Solo puede contener letras, números y el guion bajo (_)
      • En javascript también pueden contener el signo $

    Ejemplo:

    // lenguaje java
    int edad = 10;
    String nombre_completo = "John Smith";
    // Incorrecto
    String Nombre completo = "foo"; // contiene espacios
    float 3pedro = 10.1; // empieza con un numero
    
    

    Buenas practicas

    Cualquier tonto puede escribir código que un ordenador entienda. Los buenos programadores escriben código que los humanos pueden entender. Martin Fowler

    Gran parte de nuestra vida como desarrolladores la pasaremos corrigiendo errores (bugs), agregando nuevas características y en general manteniendo programas existentes. Es por esto que debemos hacer que nuestros programas sean fáciles de entender.

    • Los nombres de las variables deben ser descriptivos, incluso si esto significa que sean largos (sin excederse).
    // que ~%$*#@ hace esta función
    function f(a, c, m) {
    	return a * Math.pow(1 + c, m);
    }
    

    Puede que en el momento nos parezca obvio lo que hace esta función, pero ¿lo seguirá siendo 1 mese después?, ¿que tal 10 meses después? o ¿seguiremos siendo nosotros los que mantengamos el código?.

    Recuerda:

    Codifica siempre como si la persona que fuera a mantener tu código fuera un asesino en serie maníaco que sabe donde vives

    // mucho mejor
    function interesCompuesto(capital_inicial, porcentaje, tiempo) {
    	return capital_inicial * Math.pow(1 + porcentaje, tiempo);
    }
    
    • Ser consistentes a la hora de nombrar nuestras variables. Si los nombres de nuestras variables siguen un patrón predecible, serán mucho mas fácil de recordar y disminuiremos la posibilidad de cometer errores.
    int Mi_Entero = 10;
    String miString = "Hola ";
    float mifloat = 10.1;
    // varias lineas mas abajo o incluso en otro archivo
    // no recordamos como llamamos a nuestra variable
    mostrarMensaje(mistring + " Juan");
    

    Conclusión

    Con esto concluimos la primera parte de este “mini-curso” sobre programación, en el proximo articulo hablaremos sobre las iteraciones.

    Si te gusto no olvides compartirlo, y si tienes alguna pregunta déjala en los comentarios.

  • Introducción canvas

    El elemento canvas nos permite crear gráficos de forma dinámica directamente en el navegador, algo que en el pasado solo era posible mediante el uso de plugins como flash.

    A lo largo de este tutorial encontraras una serie de ejercicios interactivos, que tiene como objetivo explicar de forma clara los conceptos tratados.

    La etiqueta canvas

    Al insertar la etiqueta <canvas>, se crea un área rectangular transparente con un tamaño por defecto de 300×150 pixeles.

    El elemento cuenta con los atributos width y height que permiten cambiar su ancho y alto respectivamente.

    Un atributo importante es el id, que si bien no es obligatorio, hace mas fácil el acceder al elemento mediante javascript.

    Ejercicio

    Crea el siguiente documento html y ábrelo en tu navegador

    <!DOCTYPE html>
    <html>
        <head>
            <title>Canvas desde cero</title>
            <style>
                canvas { border: 1px dotted black; }
            </style>
        </head>
    <body>
        <canvas id="canvas" width="400" height="500"></canvas>
    </body>
    </html>
    

    Navegadores antiguos

    Con el fin de brindar una mejor experiencia es necesario mostrar un contenido alternativo a los usuarios de navegadores antiguos, de lo contrario verán un espacio en blanco en donde debería estar nuestra aplicación.

    Dicho contenido debe ser insertado en medio de la etiqueta canvas.

    Los navegadores antiguos ignoraran la etiqueta canvas (ya que para ellos no es una etiqueta valida) e interpretaran su contenido.

    Ejemplo

    <canvas id="canvas">
        <!-- Este contenido es mostrado solo si el navegador no soporta <canvas> -->
        <h1>Actualiza tu navegador, para disfrutar de una mejor experiencia</h1>
        <img src="/imagen/estática/no/tan/llamativa.jpg>
    </canvas>
    

    El contexto de dibujo

    El <canvas> se compone de dos partes:

    • Lo que vemos en el navegador (el elemento).
    • El contexto de dibujo: contiene los métodos y propiedades usados para dibujar.

    Para acceder al contexto usamos el método getContext del elemento canvas, éste recibe como argumento un string que identifica el tipo de contexto que deseamos obtener, en este caso "2d" (también existe un contexto 3d).

    Una vez obtenemos el contexto, podemos utilizar sus métodos para dibujar.

    Obtén el contexto 2d

    Llena los espacios en blanco para obtener el contexto 2d del elemento canvas

    <canvas id="canvas"><canvas>
    
    // 1) Obtén una referencia al elemento canvas (usando su id) 
    var canvas = document.getElementById("");
    // 2) Usa el método getContext para obtener el contexto 2d
    var ctx = canvas.getContext("");
    
    
    // 3) Utiliza los métodos del API
    ctx.fillRect(20, 20, 40, 30);
    

    Sistema de coordenadas

    El sistema de coordenadas del canvas se asemeja a un plano cartesiano, con la diferencia que el eje y aumente hacia abajo.

    Ejercicio

    Modifica las coordenadas para mover el punto rojo


    Coordenadas(X=, Y=)

    Dibujando en el canvas

    Rectángulos

    Existen tres métodos para dibujar rectángulos (en realidad son tres):

    fillRect(x, y, ancho, alto)
    dibuja un rectángulo con el color de relleno.
    strokeRect(x, y, ancho, alto)
    dibuja el contorno de un rectángulo.
    rect(x, y, ancho, alto)
    A diferencia de los métodos anteriores, rect solo traza el rectangulo, debemos llamar a los métodos fill y/o stroke para ver el resultado.

    Experimenta

    1. Cambia la posición y tamaño del rectángulo.
    2. Dibuja solo el contorno

    on jsbin.com

    Rutas

    Las rutas nos permiten dibujar formas complejas mediante una seria de lineas interconectadas.

    ¿Qué es una ruta?

    ¿Alguna vez jugaste a unir los puntos?

    conectar puntos

    Las rutas son similares, solo que en este caso somos nosotros quienes definimos los puntos.

    La creación de una ruta se divide en:

    // iniciar una ruta nueva
    ctx.begintPath();
    
    // .. trazar la ruta
    ctx.moveTo(10, 10);
    ctx.lineTo(100, 100);
    ctx.lineTo(200, 100);
    
    // cerrar la ruta (opcional)
    ctx.closePath();
    
    // rellenar de color y/o trazar el contorno
    ctx.fill();
    ctx.stroke();
    

    A continuación describiremos cada uno de estos métodos

    Iniciando y cerrando una ruta

    ctx.beginPath()
    inicia una ruta nueva. Recuerda llamar este método siembre que vayas a crear una figura o pueden ocurrir cosas extrañas.

    Ejercicio: Borra la linea que dice ctx.beginPath().

    JS Bin on jsbin.com

    ¿Que sucedió?

    Al no iniciar una nueva ruta, todos los puntos que se crean terminan perteneciendo a la misma ruta, por lo que al usar stroke todos vuelven a ser trazados.

    ctx.closePath()
    Cierra la ruta actual mediante una linea recta entre el ultimo punto marcado y el punto inicial.

    La diferencia entre usar closePath y no usarlo solo es visible al delinear (usando stroke)
    ya que fill() “traza” la linea de todas formas.

    • Comenta la linea del closePath
    • Sustitulle closePath con el lineTo equivalente

    JS Bin on jsbin.com

    Dibujando la ruta

    una vez trazada la ruta es necesario llamar uno de los siguientes métodos con el fin de ver el resultado.

    • stroke: delinea el contorno de la ruta con el color de delineado actual
    • fill: rellena el interior de la ruta con el color de relleno actual

      Importante

      agrega ctx.fill() al final del script, luego cámbialo por ctx.stroke()

      JS Bin on jsbin.com

    Lineas

    lineTo(x, y)

    moveTo(x, y)

    Si estuviéramos usando un lápiz, lineTo sería cuando rayamos y moveTo cuando levantamos el lápiz para ubicarnos en una nueva posición.


    ctx.moveTo(10, 75);
    ctx.lineTo(60, 75);
    ctx.moveTo(110, 75);
    ctx.lineTo(160, 75)
    ctx.moveTo(210, 75);
    ctx.lineTo(260, 75);
    ctx.stroke();
    

    Arcos

    arc(x, y, radio, angulo_inicial, angulos_final, sentido_antihorario)
    Crea un arco en entre los ángulos inicial y final. Si sentido_antihorario es true
    el arco se traza entre el ángulo final e inicial

    Importante

    los ángulos se expresan en radianes

    ctx.arc(150, 75, 70, 0, Math.PI / 3, false);
    

    Círculos

    Para crear un circulo debemos trazar un arco entre los ángulos 0 y 2π, en este caso sentido_antihorario no es relevante ya que el arco esta cerrado:

    ctx.arc(x, y, radio, 0, Math.PI * 2, false);
    

    Agregando estilo

    Hasta el momento todo ha sido en blanco y negro, es momento de darle un poco de vida a nuestros dibujos.

    Color

    strokeStyle
    fillStyle
    Estas dos propiedades permiten controlar el color de las lineas y el de relleno respectivamente.
    Los colores pueden ser dados en cualquiera de los siguientes formatos:

    • hexadecimal: #fff, #ac43de.
    • rgb: rgb(255, 255, 255).
    • rgba: rgba(20, 40, 50, .5).
    • por nombre: red, blue, orange...

    Ejercicio

    Dibuja una bandera

    JS Bin on jsbin.com

    Ajustando las lineas

    Existen tres atributos que controlan la forma en que se dibujan las lineas:  

    lineWidth
    El ancho de la linea.
    lineCap
    La terminación de la linea (redondeada o cuadrada).
    lineJoin
    La terminación del ángulo formado al “doblar” una linea (cuadrado, redondeado, triangular)

    Ejercicio   Cambia las valores de las propiedades usando el formulario bajo el canvas



    Sombras

    Cuatro atributos controlan la forma en que se dibuja la sombra:

    shadowOffsetX
    shadowOffsetY

    valor numérico para el desplazamiento horizontal y vertical de la sombra (puede ser negativo).

    shadowBlur

    valor numérico que indica el grado de desenfoque.

    shadowColor
    un color.
    Por defecto es completamente transparente por lo que no veras nada a menos que lo cambies.

    Ejercicio: Agrega sombra a las figuras

    JS Bin on jsbin.com

    Advertencia   El dibujar sombras con blur es una operación muy costosa, así que es mejor no excedernos con su uso en las animación.

    Opacidad

    Si bien podemos usar un color rgba para dibujar una figura semi-transparente. cuando dibujamos una imagen o un frame de un vídeo es necesario cambiar la opacidad global.

    Para esto debemos cambiar la propiedad globalAlpha el cual acepta un valor entre 0 y 1.

    El estado del canvas

    Todos los cambios realizados en color, sombra, tipo de linea, rotación... se preservan.

    Por lo tanto, a menos que queramos aplicar el mismo estilo a todas las figuras dibujadas, es necesario revertir estos cambios.

    Hacer esto de forma manual podría introducir errores (por ejemplo si olvidamos algún atributo). es por esto que existen dos métodos muy útiles:

    ctx.save()

    ctx.restore()

    Estos dos métodos permiten guardar el estado actual del contexto de dibujo y restaurarlo posteriormente.

    Al llamar el método save, el estado actual de los atributos es guardado.

    Una vez terminemos de dibujar podemos llamar el método restore, con el fin de revertir los cambios realizados.

    Una operación muy común es encerrar las operaciones de dibujo de cada figura en los métodos save y restore, de esta forma podemos tener varios objetos que representan las figuras junto con sus propiedades y aplicar sus propiedades sin preocuparnos de alterar el estado de las demás.

    Ejercicio

    Borra la linea linea donde se usa save()

    Nota: llamar a restore sin antes utilizar save, no tiene ningún efecto.

    JS Bin on jsbin.com

    Al no guardar y restaurar el estado del contexto, el color y rotación del primer rectángulo se mantienen, afectando al segundo rectángulo.

    Transformaciones

    El canvas cuenta con cuatro métodos que permiten manipular el sistema de coordenadas.

    Debemos recordar usar save y restore siempre que usemos alguna transformación en el canvas,
    ya que es mas fácil restaurar el estado anterior del canvas que recordar realizar las operaciones
    inversas en el orden correcto.

    A continuación analizaremos cada uno en detalle

    Trasladar

    ctx.translate(x, y)
    este método nos permite mover el origen del sistema de coordenadas

    por lo general el origen se encuentra en la parte superior izquierda del canvas, la posición de todas las operaciones de dibujo se basan en este punto.

    Por lo tanto la posición real en el canvas se da por la suma del origen del sistema de
    coordenadas y la posición que pasamos a la operación de dibujo:

    Por ejemplo:

    // trasladamos las coordenadas
    ctx.translate(100, 100);
    // la posicion real de este rectangulo es 110, 110
    ctx.strokeRect(10, 10, 20, 20);

    Rotar

    ctx.rotate(angulo)
    rota el sistema de coordenadas alrededor del punto de origen

    Al contrario de lo que se podría pensar, la rotación se realiza con respecto al origen del sistema de coordenadas y no con respecto a cada figura.

    Para girar una figura con respecto a ella misma, debemos:

    • Trasladar el origen a la posición deseada
    • Rotar
    • Dibujar con respecto a (0, 0).
    // rotar rectángulo
    // por la esquina superior izquierda
    ctx.save();
    ctx.translate(50, 50);
    ctx.rotate(Math.PI / 2);
    ctx.fillRect(0, 0, 20, 20);
    ctx.restore();
    

    Ejercicio

    has que el rectángulo gire por su centro

    JS Bin on jsbin.com

    Escalar

    ctx.scale(escalaX, escalaY)

      Escala las unidades usadas en los métodos de dibujo de la siguiente forma:  

    • valores mayores a 1 aumentan el tamaño.
    • valores entre 0 y 1 reducen el tamaño.
    • Si la escala es negativa, el sentido de las coordenadas se invierte, lo que permite por ejemplo dibujar texto al revés.

    Experimenta: Modifica la escala usando diferentes valores

    JS Bin on jsbin.com

  • Tablet nueva, juegos rotos.

    Hace pocos días llego por fin mi tableta (una gallaxy tab 2) y como podrán imaginar lo primero que hice fue probar los juegos que he desarrollado y para mi sorpresa varios de ellos no funcionaban correctamente; en algunos se veía un segundo canvas con la misma imagen y en otros el contenido previo no se borraba. Al parecer es un problema ya viejo con clearRect que afecta a android 4.1. Lo primero que se me ocurrió para solucionar el problema fue el viejo truco de re-definir el tamaño del canvas:
    [js]canvas.width = canvas.width;[/js]
    Ahora si que funcionaban, pero algunas acciones como el arrastrar eran realmente lentas (especialmente al arrastrar y soltar); el problema con este método es que ademas de borrar el contenido del canvas, también restablece su estado (fillStyle, clearStyle, scale, translate, shadowColor….) lo que al parecer influye en el rendimiento (al menos en el gallaxy tab – único dispositivo que tengo para hacer pruebas). Otra de las soluciones sugeridas para eliminar el problema del canvas duplicado que encontré era el quitar el estilo overflow: hidden de todos los elementos padres del canvas, aunque el problema desapareció al igual que en el método anterior el rendimiento era pésimo.

    Solución

    Hasta el momento la solución con los mejores resultados es la de usar un color solido como fondo para el canvas y al momento de borrar el contenido usar fillRect en lugar de clearRect
    [html]<canvas style="background: #fff;"></canvas>[/html]
    [js]function clear(ctx) {
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }[/js]
    El aumento en rendimiento es considerable, sobre todo en juegos que requieren arrastrar y soltar (como el solitario). Aun así esta no es una solución definitiva ya que al usar un color solido no es posible apilar canvas para crear capas.

    ¿Conoces alguna mejor solución? déjala en los comentarios.
  • Easy QR Code: Mi primera extensión para chrome

    Easy QR Code: Mi primera extensión para chrome


    tltr: Hice una extensión para chrome que genera códigos QR con tan solo dos clics (descarguen aquí). Si les gusta compartan/comenten en twitter/facebook (quiero ser famoso *¬*).

    Los códigos QR son una forma de almacenar información en un código de barras en dos dimensiones, y son una muy buena forma de copiar enlaces y texto a nuestros dispositivos móviles en lugar de tener que copiarlos a mano.

    En la tienda de extensiones de chrome no encontré ninguna que cumpliera mis necesidades (rápido y simple de usar), mucha de las “extensiones” son simples enlaces a paginas y requieren muchos pasos:
    1. Copiar texto/enlace
    2. Clic para abrir la “Extensión”
    3. Pegar texto en un formulario
    4. Clic para generar el código
    Demasiado extenuante para un simple código, en mi extensión ideal solo se necesita:
    1. Clic derecho sobre texto/enlace
    2. Seleccionar generar código
    Listo. adicionalmente el código debe generarse rápidamente. con estas especificaciones y armado con una librería para generar códigos QR y la documentación del API de extensiones de chrome y dos cojones nació mi primera extensión para google chrome: Easy QR Code.
    A continuación el enlace a la extensión y un corto vídeo de su funcionamiento.