anotaciones que no quiero recordar, ni olvidar

me

CSS - HTML

Cómo centrar una imagen dentro de un div con CSS

Ratio: 5 / 5

Iniciar activoIniciar activoIniciar activoIniciar activoIniciar activo

En ocasiones cuestiones sencillas se hacen difíciles, si has llegado hasta aquí es por que intentas centrar verticalmente una imagen, de tamaño automático (con un máximo) dentro de una capa div.
La solución es usar la el evento :before de CSS sobre nuestro div, y otorgar éstas propiedades al img:

Mostrar/Ocultar código css

Ver código
 div.clasediv:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
 
img.claseimagen {
    vertical-align: middle;
    max-height: 100px;
    max-width: 100px;
}

Dibujando con HTML5: interactuar con canvas para dibujar en tiempo real a modo de lapiz o lienas rectas

Ratio: 3 / 5

Iniciar activoIniciar activoIniciar activoInicio inactivoInicio inactivo

Hoy un cliente nos ha pedido la posibilidad de que sus navegantes web puedan dibujar lineas rectas en tiempo real para poder comprar mejor los datos que en la web se mostraban. Algo muy sencillo a lo que no le hemos dicho no. Conocíamos la posibilidad en HTML5, concretamente con CANVAS, pero al ponernos a buscar en la red como se interactúa no hemos encontrado documentación; todo lo relativo en castellano habla de el renderizando durante la carga web, así que la aportamos nosotros aquí un pequeño y sencillo ejemplo para interactuar con el dibujado.
Puedes ver un ejemplo aquí.
Este es el código javascript del head:

Mostrar/Ocultar código javascript

Ver código
 function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } var iniciodibujo=true; function dibujar(event){ x=event.clientX; y=event.clientY; var lienzo=retornarLienzo("lienzo1"); if (lienzo){ lienzo.strokeStyle = "#FF8000"; if (iniciodibujo==true){ lienzo.beginPath(); lienzo.moveTo(x,y); iniciodibujo=false; } if (iniciodibujo==false){ lienzo.lineTo(x,y); lienzo.stroke(); } } } 

Y esto el canvas en el body:

Mostrar/Ocultar código php

Ver código
<canvas id="lienzo1" width="400" height="300" onmousemove="dibujar(event)"> Su navegador no permite utilizar canvas.</canvas>

Y listo ya puedes ejecutarlo y pintar como en el paint!
(Si quieres sólo lineas rectas sustituye el onMouseMove por un onClick)

Actualuzación: Si desas ver un ejemplo más completo sigue este enlace: dibujar lineas con canvas