La fatiga del Geek » HTML http://nauj27.com/blog Reflexiones y cacharreos de nauj27 Fri, 09 Mar 2012 08:14:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 HTML5 Canvas http://nauj27.com/blog/2010/12/10/html5-canvas/?utm_source=rss&utm_medium=rss&utm_campaign=html5-canvas http://nauj27.com/blog/2010/12/10/html5-canvas/#comments Thu, 09 Dec 2010 23:06:57 +0000 nauj27 http://nauj27.com/blog/?p=837 Me he decidido a echarle un vistazo al HTML5 y a la representación de una superficie Canvas para dibujar en 2D. Este tipo de superficie permitirá en un futuro que ya está aquí hacer juegos para la web en HTML real que se puedan usar en cualquier dispositivo sin necesidad de complementos de terceros, léase Adobe Flash.

La verdadera utilidad y potencia es poder dibujar en tiempo real sobre la superficie y a provechar todas las características de dibujo que nos proporciona, cosas que no he usado en mi ejercicio particular. Sin embargo me ha servido como introducción al uso de canvas en HTML y aquí queda como ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<html>
  <head>
    <title>HTML 5 Canvas example</title>
    <script type="text/javascript">
        var x = 50;
        var y = 50;
        var dx = 1;
        var dy = 1;
 
        var myCanvas;
        var myContext;
 
        var pelota;
        var fondo;
 
        var main = function() {
            // Se inicializa el canvas
            myCanvas = document.getElementById("mycanvas");
            myContext = myCanvas.getContext("2d");
 
            // Se cogen los elementos de imagen para pintar
            pelota = document.getElementById("pelota");
            fondo = document.getElementById("fondo");
 
            // Se pinta el fondo y la pelota en el canvas
            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);
            myContext.drawImage(pelota, x, y);
 
            window.setInterval("moverPelota()", 10);
        };
 
        var moverPelota = function() {
            if ((x > myCanvas.width - pelota.width) || (x < 0)) {
                dx = -dx;
            }
 
            if ((y > myCanvas.height - pelota.height) || (y < 0)) {
                dy = -dy;
            }
 
            x += dx;
            y += dy;
 
            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);
            myContext.drawImage(pelota, x, y);
        };
 
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
      canvas#mycanvas { width: 320px; height: 170px; }
      img { display: none; }
    </style>
  </head>
  <body onload="main();">
 
    <canvas id="mycanvas">
        Aquí debería de aparecer un balón rebotando.
    </canvas>
 
    <img id="pelota" src="pelota.png" width="49px" height="49px" />
    <img id="fondo" src="fondo.jpg" width="320px" height="170px" />
 
  </body>
</html>

El resultado puede verse en la web del ejemplo de uso de canvas.

Las imágenes se precargan ocultas (con display: none) porque según la especificación del HTML5 si la imagen no ha sido completamente cargada no se pintará nada. Cargándolas de este modo nos aseguramos de que se han leído completamente antes de su uso en el canvas.

Las pruebas las he realizado sobre Mozilla Firefox 4.0 Beta 7. En cualquier navegador que implemente canvas sobre html5 debería de representarse correctamente. Entre estos navegadores se incluyen Safari, Opera o Chrome. Si eres usuario de Internet Explorer ¿a qué esperas para cambiar a un navegador real?

]]> http://nauj27.com/blog/2010/12/10/html5-canvas/feed/ 3 Pifeb en cualquier navegador http://nauj27.com/blog/2009/09/28/pifeb-en-cualquier-navegador/?utm_source=rss&utm_medium=rss&utm_campaign=pifeb-en-cualquier-navegador http://nauj27.com/blog/2009/09/28/pifeb-en-cualquier-navegador/#comments Mon, 28 Sep 2009 10:30:03 +0000 nauj27 http://nauj27.com/blog/?p=681 Pifeb es un script para GreaseMonkey que hice hace algún tiempo para poder usar iconos personalizados en Plurk. Parecen un montón de palabras raras sin sentido y sin embargo lo son, pero si vas a cada uno de los enlaces puedes saber de qué estoy hablando.

Si conoces twitter, plurk viene a ser algo similar pero con una línea temporal horizontal, respuestas ordenadas y posibilidad mantener un control de lo que has leído y lo que tienes pendiente.

enlavin decició hacer  que funcionase en cualquier navegador y aunque hay que hay que cargarlo manualmente cada vez que se abre plurk la verdad es que viene genial.

Para poder usarlo tan solo hay que abrir este documento simple y arrastrar el enlace a la barra de marcadores del navegador. Una vez hecho esto con Plurk abierto tan solo hay que hacer clic en el bookmarklet y esperar cinco segundos a que aparezca PIFEB vX.X en la barra de plurk arriba a la derecha.

Más información en la web de Pifeb.

]]> http://nauj27.com/blog/2009/09/28/pifeb-en-cualquier-navegador/feed/ 6 Mozilla Labs Jetpack http://nauj27.com/blog/2009/05/25/mozilla-labs-jetpack/?utm_source=rss&utm_medium=rss&utm_campaign=mozilla-labs-jetpack http://nauj27.com/blog/2009/05/25/mozilla-labs-jetpack/#comments Mon, 25 May 2009 09:16:09 +0000 nauj27 http://nauj27.com/blog/?p=610 Imagina algo tan sencillo y potente como la extensión Greasemonkey pero que en lugar de permitirte modificar el sitio web que estás visitando te permita modificar el mismo navegador. Esto es una realidad, y su nombre es Jetpack.

Jetpack es un nuevo projecto de Mozilla Fundation para escribir extensiones para el navegador de una manera muy rápida y sencilla haciendo uso de las herramientas más comunes. Estas herramientas incluyen librerías como jQuery o incluso otras extensiones como es Firebug.

En la web podrás encontrar varios ejemplos de cómo en unas pocas líneas de código se pueden escribir extensiones para el navegador tan interesantes como un notificador de nuevos mensajes de GMail o un gráfico canvas sobre el uso de solapas a modo de ejemplo.

Para más información echar un vistazo al tutorial.

]]> http://nauj27.com/blog/2009/05/25/mozilla-labs-jetpack/feed/ 1 Wonder wheel http://nauj27.com/blog/2009/05/15/wonder-wheel/?utm_source=rss&utm_medium=rss&utm_campaign=wonder-wheel http://nauj27.com/blog/2009/05/15/wonder-wheel/#comments Fri, 15 May 2009 08:25:41 +0000 nauj27 http://nauj27.com/blog/?p=600

Hoy he visto por primera vez que después de buscar en Google aparece una opción encima de los resultados que dice “Show options…”

Haciendo clic en esta opción me muestran a la izquierda una serie de opciones para operar en función de la búsqueda realizada. Lo que más me ha gustado ha sido la etiqueta Wonder Wheel. Aparece una rueda que enlaza temas relacionados y con la que se puede ir navegando para refinar la búsqueda. Por supuesto los resultados a la derecha se van actualizando dinámicamente. Haciendo clic en la imagen se puede ver una captura de pantalla.

Wonder Wheel

Wonder Wheel

Esta gente sabe cómo aprovechar el tiempo que les dan para inventar nuevas cosillas.

Nota: Solo lo he probado en la versión en inglés, ¿aparece en otros idiomas?

]]> http://nauj27.com/blog/2009/05/15/wonder-wheel/feed/ 1 Detectar código de teclado con Javascript http://nauj27.com/blog/2009/03/02/detectar-codigo-de-teclado-con-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=detectar-codigo-de-teclado-con-javascript http://nauj27.com/blog/2009/03/02/detectar-codigo-de-teclado-con-javascript/#comments Mon, 02 Mar 2009 13:55:51 +0000 nauj27 http://nauj27.com/blog/?p=574 Me ha hecho falta conocer el código de teclado de la tecla de imprimir pantalla, que por cierto es el 44, y esta es la manera más rápida que se me ha ocurrido para encontrarlo:

1
2

<body onload="document.getElementById('input').addEventListener('keyup', function(e) {alert(e.keyCode);}, false); "> 
<input id="input" type="text" />

Aunque hay cientos de ejemplos en internet, aquí dejo el mio que para eso me lo he currado en el menor número de líneas que he podido.

Para probarlo tan solo hay que guardarlo en un fichero y abrirlo con un navegador web.

]]> http://nauj27.com/blog/2009/03/02/detectar-codigo-de-teclado-con-javascript/feed/ 0 Iconos de plurk navideños http://nauj27.com/blog/2008/12/08/iconos-de-plurk-navidenos/?utm_source=rss&utm_medium=rss&utm_campaign=iconos-de-plurk-navidenos http://nauj27.com/blog/2008/12/08/iconos-de-plurk-navidenos/#comments Mon, 08 Dec 2008 17:23:56 +0000 nauj27 http://nauj27.com/blog/?p=521 Después de Plurk Icons For Everybody 2.0 os presento la versión 2.2 con los siguientes cambios:

  • Corregido bug que hacía que no aparezcan los nuevos iconos para la casilla grande de plurkear.
  • Reestructuración interna que permite añadir tantas solapas como se deseen, refactorización de camino a la actualización automática.
  • ¡Emoticonos navideños!
Conjunto de iconos navideños para Plurk

Conjunto de iconos navideños para Plurk

Como las otras veces, clic aquí para actualizar o instalar. Felices fiestas y feliz plurkeo.

Editado 10/12/2008 – 11:29: Se ha corregido un bug que hacía fallar algunas funciones de plurk como editar el perfil o ver imágenes en grande. Gracias a draxus por el aviso.

]]> http://nauj27.com/blog/2008/12/08/iconos-de-plurk-navidenos/feed/ 6 PlurkIconsForEverybody 2.0 http://nauj27.com/blog/2008/12/02/plurkiconsforeverybody-20/?utm_source=rss&utm_medium=rss&utm_campaign=plurkiconsforeverybody-20 http://nauj27.com/blog/2008/12/02/plurkiconsforeverybody-20/#comments Mon, 01 Dec 2008 23:14:30 +0000 nauj27 http://nauj27.com/blog/?p=510

Plurk.com es como twitter pero con una línea temporal y respuestas ordenadas: un sistema de microblogging dentro de las redes sociales. Hace unas semanas publiqué un complemento para GreaseMonkey que añadía iconos adicionales pero ahora han cambiado la web de plurk.com y había dejado de funcionar como debía.

Debido al nuevo formato me han ahorrado parte del trabajo que había pensado, han separado los iconos en varias solapas por lo que ahora añado una solapa con iconos personalizados. Esto hace que la carga sea menos pesada y la lista de iconos esté más limpia.

Plurk Icons For Everybody 2.0

Plurk Icons For Everybody 2.0

Para instalar PlurkIconsForEverybody 2.0 tan solo hay que instalar greasemonkey y finalmente hacer clic en el siguiente enlace, dando a instalar cuando sea necesario:

Editado: Se ha corregido un bug que hacía que no se pudiese usar a veces si la primera vez después de cargar la página se utilizaba el recuadro grande de plurkear. Vuelve a instalarlo para actualizar a la última versión.

]]> http://nauj27.com/blog/2008/12/02/plurkiconsforeverybody-20/feed/ 1 La era de la web 0.2 http://nauj27.com/blog/2008/11/25/la-era-de-la-web-02/?utm_source=rss&utm_medium=rss&utm_campaign=la-era-de-la-web-02 http://nauj27.com/blog/2008/11/25/la-era-de-la-web-02/#comments Tue, 25 Nov 2008 07:50:11 +0000 nauj27 http://nauj27.com/blog/?p=498 Y es que del tiempo de la web 0.2 (que no web 2.0) debe de ser ésta página a juzgar por su código y su aspecto visual. Se recomienda al valiente que pulse en el enlace que no permanezca mirando la web durante más de diez segundos. Dios santo (nunca mejor dicho).

La fatiga del Geek no cubrirá los gastos del hospital donde atiendan al visitante del posible ataque epiléptico sufrido.

]]> http://nauj27.com/blog/2008/11/25/la-era-de-la-web-02/feed/ 2 Iconos de Plurk.com con GreaseMonkey http://nauj27.com/blog/2008/10/20/iconos-de-plurkcom-con-greasemonkey/?utm_source=rss&utm_medium=rss&utm_campaign=iconos-de-plurkcom-con-greasemonkey http://nauj27.com/blog/2008/10/20/iconos-de-plurkcom-con-greasemonkey/#comments Sun, 19 Oct 2008 22:21:06 +0000 nauj27 http://nauj27.com/blog/?p=466 GreaseMonkey es un añadido para el navegador web Mozilla Firefox que permite insertar código JavaScript en cualquier sitio web. Hay montones de scripts listos para ser usados en la web añadiendo funcionalidades de lo más variopintas.

Esta tarde he estado jugando con GreaseMonkey y he hecho mi primer script. Consiste en un script que añade en el sitio de microblogging llamado Plurk todos los iconos destinados a la élite. Es decir, añade todos los iconos que en principio solo están disponibles para aquellos que han logrado que gracias a ellos más de diez personas se hayan apuntado a Plurk.

Si no tienes instalado GreaseMonkey lo puedes instalar desde aquí:

Una vez instalado tan solo hay que abrir el siguiente enlace y permitir la instalación cuando aparezca la ventana de diálogo:

¡Feliz plurkeo!

]]> http://nauj27.com/blog/2008/10/20/iconos-de-plurkcom-con-greasemonkey/feed/ 9 Nuevo diseño http://nauj27.com/blog/2008/07/07/nuevo-diseno/?utm_source=rss&utm_medium=rss&utm_campaign=nuevo-diseno http://nauj27.com/blog/2008/07/07/nuevo-diseno/#comments Mon, 07 Jul 2008 21:02:43 +0000 nauj27 http://nauj27.com/blog/?p=458 Por fin me he decidido a cambiar el diseño por el nuevo que he estado preparando en las últimas semanas. Tan solo he comprobado que se ve correctamente en Internet Explorer 7 y en Mozilla Firefox 3.0. En Safari 3.1.2 aparece mal estructurado y aún no he encontrado por qué, tendré que seguir investigando y por supuesto se aceptan todo tipo de consejos y sugerencias.

]]> http://nauj27.com/blog/2008/07/07/nuevo-diseno/feed/ 3