Asignar teclas de acceso rápido a controles web

Hay una forma de acceder a un control de nuestra web mediante teclado de forma rápida. Viene programado que utilizando la combinación ALT + una tecla, accedamos al objeto al que se asigne.

 

Por ejemplo para que al pulsar ALT+C se marque o desmarque un objeto Checkbox usaríamos la propiedad AccessKey de la siguiente forma.

 


<input name="CheckBox2" id="CheckBox2" accessKey="c" type="checkbox"></input>

Podemos asignar una tecla diferente a cada objeto. Incluso podemos asignar la misma tecla a cada objeto. En este caso, irá saltando el foco de un control a otro. No se ejecutan por tanto todos de forma simultánea.

Hay que tener en cuenta, además que no todos los navegadores funcionan de la misma manera. Cada uno, utiliza una combinación de teclas diferente. Por ejemplo, la mayoría usa la tecla ALT, pero Firefox por ejemplo usa, ALT + SHIFT. Incluso Opera antes de la v15, va mas allá y usa la extraña ALT + ESC.

Dentro de las teclas que podemos utilizar, podemos usar cualquier letra o numero, e incluso caractéres que no requieran de otra pulsación de la tecla ALT. Por ejemplo, podemos usar la coma con la combinación ALT + (tecla de la coma)

Y también podemos usar el punto y coma, con la combinación ALT + SHIFT + (tecla de la coma)

Lo que no podríamos usar por ejemplo es el arroba (@), ya que se compone de la combinación ALTGR + 2, y no se permite usar ALT + ALTGR

Problema de canvas duplicado en HTML5

Hay un problema engorroso que sucede con el navegador nativo de Android, y es que trabajando con el canvas de HTML5, realiza un duplicado exacto de los canvas que hayas creado en el document.
Lo añade a la coordenada (0,0) del document y se actualiza en tiempo real, de forma simultánea con el canvas original. Es decir, que cuando muevo una de las fichas en el canvas de la derecha, se mueve por igual en el de la izquierda, pero solo el de la derecha es sensitivo a interacción.
Es por tanto un problema de pintado del navegador. Sólo sucede en los navegadores nativos de Android de versión 4 o superior.

Error de Canvas duplicado
Error de Canvas duplicado

Surge además cuando estos canvas están integrados dentro de DIVs, y estos a su vez dentro de otros DIVs.
Haciendo pruebas con las css de dichos canvas, ví que solo se producía el duplicado cuando la propiedad position del canvas era diferente de fixed. Pero claro, es una solución incómoda, ya que un elemento fixed en medio de la pantalla, no se permitible salvo que esté totalmente integrado. En mi caso particular en esta pantalla, si servía, pero pensando en general, para cualquier sitio mas dinámico respecto al responsive design, no era una opción válida.

Continuando con la búsqueda de una solución, encontré una mejor, al descubrir que si alguno de los objetos contenedores tenía la propiedad overflow: hidden, también se producía. Si se puede permitir la posibilidad de desactivar los scrollbars, ya podemos quitar el fixed al position del canvas.

Elucubro, que de alguna manera internamente, para calcular la porción pintable del canvas, crean una copia temporal en el (0,0), despues la pintan en su coordenada real, pero se han olvidado de borrar la temporal.

RectRound Redondeando tus rectángulos con javascript.

Ojeando por StackOverFlow voy a rescatar una función muy resultona para redondear las esquinas de los rectángulos.

/**
 * Draws a rounded rectangle using the current state of the canvas.
 * If you omit the last three params, it will draw a rectangle
 * outline with a 5 pixel border radius
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate
 * @param {Number} width The width of the rectangle
 * @param {Number} height The height of the rectangle
 * @param {Object} radius All corner radii. Defaults to 0,0,0,0;
 * @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
 * @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true.
 */
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, fill, stroke) {
    var cornerRadius = { upperLeft: 0, upperRight: 0, lowerLeft: 0, lowerRight: 0 };
    if (typeof stroke == "undefined") {
        stroke = true;
    }
    if (typeof radius === "object") {
        for (var side in radius) {
            cornerRadius[side] = radius[side];
        }
    }

    this.beginPath();
    this.moveTo(x + cornerRadius.upperLeft, y);
    this.lineTo(x + width - cornerRadius.upperRight, y);
    this.quadraticCurveTo(x + width, y, x + width, y + cornerRadius.upperRight);
    this.lineTo(x + width, y + height - cornerRadius.lowerRight);
    this.quadraticCurveTo(x + width, y + height, x + width - cornerRadius.lowerRight, y + height);
    this.lineTo(x + cornerRadius.lowerLeft, y + height);
    this.quadraticCurveTo(x, y + height, x, y + height - cornerRadius.lowerLeft);
    this.lineTo(x, y + cornerRadius.upperLeft);
    this.quadraticCurveTo(x, y, x + cornerRadius.upperLeft, y);
    this.closePath();
    if (stroke) {
        this.stroke();
    }
    if (fill) {
        this.fill();
    }
}

Y se usa con:

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
c.fillStyle = "blue";
c.roundRect(50, 100, 50, 100, {upperLeft:10,upperRight:10}, true, true);

También se pueden usar lowers.

Un ejemplo de como funciona, sobre las cuatro esquinas, y admite distintos niveles de redondeo independientes.

 

 

solo con Rect
Solo con Rect

 

 

 

 

 

 

 

 

 

 

Con RoundRect
Con RoundRect

 

 

 

 

 

 

 

 

 

 

 

Podeis ampliar información en : http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas

Ocultar URL de tu página

Salvo que te quieras liar con .htaccess, puedes hacerlo con un iframe.

Creas un iframe dentro de tu página, que contenga la URL en cuestión.

<iframe src="http://mibloggratis.wordpress.com"></iframe>

El problema es que si lo dejas así, solo te mostrará un cuadrito pequeñito con dos barras de desplazamiento.
Puedes evitar esto, dandole al iframe el mismo tamaño de la página.
Esto se haría con esto:

<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>