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:
Copiar texto/enlace
Clic para abrir la "Extensión"
Pegar texto en un formulario
Clic para generar el código
Demasiado extenuante para un simple código, en mi extensión ideal solo se necesita:
Los que me conocen saben que estoy interesado en una variedad de cosas, pero suelo distraerme con facilidad, y lo que mas me distrae (o ¿en lo que mas me concentro?) es el anime.
De tiempo en tiempo me engancho tanto con alguna serie que termino buscando de todo sobre ésta: Fondos de pantalla, openings/endings, AMV, posters motivacionales (tengo alrededor de 20.000 en mi pc) y noticias entre otros. El problema es que no se de ningún sitio que contenga todo este material, todo lo recolecto de diferentes lugares como foros, youtube, google images... y esto me quita mucho tiempo.
Alguien dirá que la solución es muy simple: que deje de buscar pendejadas y me ponga a trabajar. Pero el anime es una forma de distraerme del día a día, ademas el contenido de estos (historia/humor/personajes...) es mucho mas rico que el de muchas películas y programas de televisión, incluso hay algunos que dejan enseñanzas sobre la vida y esas cosas u_u.
Si saben de algún un sitio donde se pueda encontrar este contenido concentrado, con animes/manga clasificados por géneros (gore, echi, shounen...) Dejen el link en los comentarios.
Dividir un string en caracteres parece una tarea sencilla, y lo es. mientras un carácter sea solo un carácter.
Como así?
En unicode existen caracteres que se combinan con otros, ejemplo de estos son los caracteres de acento. De esta forma a simple vista un carácter puede parecer un solo símbolo pero estar formado por dos o mas.
Por ejemplo la letra "a" con tilde puede ser un solo carácter (u+00e1), pero puede darse el caso que sea una letra a + una tilde (a+') que son dos caracteres (u+0061 y u+0301 respectivamente).
Esto es un problema, en especial para una aplicación que necesite acceder a cada uno de los caracteres de una palabra como en los crucigramas, ahorcado, sopas de letras, etc.
Por ejemplo en mi juego de sopa de letras a veces las palabras en la cuadricula quedaban en la posición incorrecta. El problema, algunas palabras usaban mas espacio debido a los caracteres de combinación (eje. "mamá" ocupando 5 cuadros = m | a | m | a | ' |).
Que puede salir mal
Para conocer el largo de una cadena de texto normalmente usamos la propiedad length... error, ésta solo da resultados correctos si cada carácter en el texto esta formado por un solo codepoint.
Gracias a un enlace en MDN (Mozilla Developer Network) encontre esta solución. para obtener el largo correcto del string contamos los caracteres que no son marcas de combinación. a continuación la función (con algunas modificaciones).
// regexp = rangos de caracteres correspondientes a marcas de combinación
rCombiningMarks = /[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F\u0483-\u0489\u0591-\u05BD]/g;
function stringLength(string) {
// iniciar un contador de caracteres en 0
var length = 0;
// por cada caracter en string
for (var i = 0, l = string.length; i < l; i++) {
// si no es una marca de combinación
if (! rCombiningMarks.test(string.charAt(i)) )
// incrementar el contador de caracteres
length += 1
}
return length;
}
// regexp = rangos de caracteres correspondientes a marcas de combinación
rCombiningMarks = /[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F\u0483-\u0489\u0591-\u05BD]/g;
function splitString(string) {
// iniciar un array de caracteres
var chars = [],
lastChar;
// por cada caracter en string
for (var i = 0, l = string.length; i < l; i++) {
// si no es una marca de cominación
if (! rCombiningMarks.test(string.charAt(i)) ) {
// Agregar al array de caracteres
chars.push(string.charAt(i));
}
// de lo contrario
else {
// Concatenar con ultimo caracter en el array
var lastChar = chars[chars.length - 1];
chars[chars.length - 1] = lastChar + string.charAt(i);
}
}
return chars;
}
// TEST
alert("con string.split: "+("mamá".split("").join(" | ")));
alert("con splitString: " + splitString("mama").join(" | "));
Conclusión
Aun cuando javascript nos provee varios métodos útiles para el manejo de strings, números, arrays y objetos, estos no siempre nos darán los resultados deseados. debemos probar nuestro código para estar seguros que se comporta de la forma correcta.
Algún otro método/función nativa de javascript de la que no hay que confiar. Déjalo en los comentarios.
El elemento canvas es una gran herramienta para crear juego, animaciones y manipular imágenes, aun así no todos los navegadores soportan esta etiqueta, por tanto, es necesario contar con alternativas para no dejar de lado a los usuarios de dichos navegadores.
En esta primera parte veremos dos de estas alternativas así como algunas particularidades de la etiqueta canvas.
Compatibilidad
En la actualidad los únicos navegador que no cuentan con soporte para el elemento canvas son Internet Explorer 6, 7 y 8; no obstante existen soluciones (polyfills) que emulan su funcionalidad, entre los que se destacan:
excanvas: utiliza VML, una tecnología propietaria de Microsoft similar al svg y no necesita de plugins, pero carece de
algunos métodos (getImageData, toDataURL...).
flashcanvas: utiliza flash (duh), es mas rápido que excanvas (a mi parecer) y soporta mas características, pero hay que comprar una licencia para poder desarrollar aplicaciones de comerciales.
La etiqueta canvas
El elemento canvas cuenta con una etiqueta de apertura y una de cierre, pero a diferencia de otras etiquetas, su contenido solo es visible en navegadores antiguos (ya que estos ignoran las etiquetas desconocidas) lo cual nos permite mostrar un contenido alternativo a los usuarios de dichos navegadores.
<!-- contenido a mostrar si el navegador no soporta canvas -->
<img src="/images/imagen-estatica.jpg" />
</canvas>
<canvas height="150" id="canvas" width="300">
<!-- contenido a mostrar si el navegador no soporta canvas -->
<img src="/images/imagen-estatica.jpg" />
</canvas>
Otro hecho a destacar es que sus medidas se declaran mediante los atributos width/height y no a través css. al usar css se escala el elemento, así, si el canvas mide 300x150 y cambiamos sus medidas por 600x300 los pixeles "medirán el doble" y la imagen se verá borrosa.
Por ejemplo, los siguientes cuadros se dibujaron en la mismas posición (10, 10) y tienen las mismas medidas (30x30) pero el canvas de la derecha fue escalado 6x usando css.
Note el borde borroso el la segunda imagen
Detectar soporte
Antes de empezar a usar el canvas necesitamos saber si el navegador siquiera soporta
dicho elemento, para esto:
Creamos un elemento canvas y comprobamos si cuenta con el método getContext
De lo contrario verificamos que exista un Polyfill
if (! document.createElement("canvas").getContext || ! window.G_vmlCanvasManager )
alert("Actualize su navegador");
if (! document.createElement("canvas").getContext || ! window.G_vmlCanvasManager )
alert("Actualize su navegador");
Accediendo desde javascript
Para poder acceder al elemento desde javascript hay esperar que el DOM este listo, para esto puedes utilizar
la función ready de jQuery o colocar el script justo antes de </body>.
A continuación obtenemos una referencia al contexto de dibujo del canvas utilizando el método getContext:
Antes de poder acceder al contexto del canvas en IE<9 (usando excanvas/FlashCanvas) debemos inicializarlo, para esto, en lugar de usar el método getContext podemos usar la siguiente función:
if (! canvas.getContext && window.GV_ContextCanvas) {
G_vmlCanvasManager.init(canvas);
} else {
thrownew Error("El navegador no soporta el elemento canvas");
}
return canvas.getContext("2d");
}
function getContext(canvas) {
if (! canvas.getContext && window.GV_ContextCanvas) {
G_vmlCanvasManager.init(canvas);
} else {
throw new Error("El navegador no soporta el elemento canvas");
}
return canvas.getContext("2d");
}
Conclusión
Finalizando esta primera parte tenemos todo listo para empezar a trabajar con el canvas. con suerte ahora podrás mostrar contenido alternativo para usuarios con navegadores antiguos, detectar el soporte del elemento canvas ya sea de forma nativa o mediante un polyfill y obtener el contexto de dibujo.
No te pierdas la siguiente parte en la que veremos el sistema de coordenadas y como dibujar formas básicas.
Si te gusto el tutorias compartelo en twitter o subscribete y te avisare cuando esté disponible la siguiente parte.
Si llevas tiempo con ganas de aprender a usar el canvas o quieres refrescar tus conocimientos,
no puedes perderte esta serie de tutoriales que arranca el día de hoy, donde no solo se explicara
como usar x función sino que desarrollaremos programas reales donde podrás aplicar lo aprendido.
y quien es usted para decirme que hacer
Soy un tipo al que le gusta la programación, en especial todo lo relacionado con la web (javascript *¬*)
y desde que conocí el elemento canvas quede fascinado con la idea de poder dibujar en navegador.
si bien no soy un experto y aun sigo aprendiendo, ya llevo tiempo trabajando con este elemento
y he aprendido mucho gracias a la comunidad y esta es mi forma de contribuir en algo.
algunos de los trabajos que he hecho:
canvas-event: un framework para interactuar con el canvas.
conceptmapp: una herramienta para crear mapas conceptuales
Soy estudiante de sistemas, me gusta el anime, juegos de vídeo, cine y mi gran sueño es que algún día alguien deje un comentario en este blog. Twitter | Github | Mis Gist |
Google+
