¿Cómo bloquear el botón de regresar del navegador con javascript?

El siguiente código sirve para que puedas bloquear desde una web por medio de javascript el botón de regresar que tiene el navegador.

El código funciona con Chrome, Firefox, Edge, Opera (quizá con otros navegador, pero con estos lo probe).

Solo basta que pongan las 3 líneas siguientes al finalizar de cargar su DOM.


window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//esta linea es necesaria para chrome
window.onhashchange=function(){window.location.hash="no-back-button";}

Video demostrándolo

Curso gratis para crear el archivo PDF a partir de un XML 3.3 ya timbrado. C# .Net #SAT #cfdi




Con este curso de 4 videos te enseño como crear el archivo pdf a partir de un XML ya timbrado con C# .Net.

Te invito a que te suscribas a mi canal de youtube para mas videos interesantes sobre programación.

La ventaja que tiene ese curso, es que haremos el archivo pdf a partir de un archivo HTML, esto es útil para cuando el cliente pide muchos cambios en su formato (es más fácil capacitarlo a que el mismo mueva el archivo html que capacitarlo en crystal reports por ejemplo).

Me enfoco para crear el archivo PDF con un proyecto simple de consola, para que así veas que puedes implementarlo en cualquier tipo de proyecto de C# .Net: mvc .net, asp, Windows form, WPF, WCF etc.

1.- En el primer video nos enfocaremos a obtener la información del xml 3.3 en un objeto, y para ello te muestro como es posible hacer el parseo de los datos del xml para posterior poder manipularlos.

2.- En este segundo video nos centraremos en convertir un archivo html a pdf, y de igual manera te mostrare como ejecutar Razor para que nuestro html sea manipulado dinámicamente (no importa que el proyecto no sea web, yo te muestro como hacerlo).

3.- En este video te muestro como crear el código QR como el SAT lo requiere.

4.- En este video, te muestro como hacer el archivo PDF conforme al anexo 20, al igual veremos cómo crear el texto de la cantidad total de la factura con letra.

5.- Por último, te enseño como puedes navegar a elementos mas profundos, en este caso los impuestos, y de esta manera puedas representarlos en tu pdf.

Con estos 5 videos seras capaz de crear el archivo PDF sin problemas.

 

¿Cómo crear el archivo pdf a partir de un xml timbrado 3.3 C# .Net? | Anexo 20 | SAT #4

En este cuarto y último video de este curso veremos como crear el pdf a partir del anexo 20, a parte veremos como introducir la cantidad total con letra.

Código del video: clic aquí

Primer video: https://www.youtube.com/watch?v=gHSC8GrEC5g

Segundo video: https://www.youtube.com/watch?v=ZppyFAM2JQM

Tercer video: https://www.youtube.com/watch?v=2l9y_dbguaQ

Curso para que aprendas a crear el xml 3.3 desde cero: https://www.youtube.com/watch?v=XlTz0NRQLm4&list=PLWYKfSbdsjJg-yuu9K53GwthkEE8lkXDL

Catálogos sat mysql: https://hdeleon.net/catalogos-para-facturar-3-3-sat-en-mysql/

¿Cómo crear el archivo pdf a partir de un xml timbrado 3.3 C# .Net? | Convertir Html a PDF con ayuda de Razor | SAT #2

En este segundo video te mostrare una forma fácil de crear un archivo PDF a partir de un archivo HTML, y con ayuda de Razor poder incrustar nuestro objeto Comprobante obtenido en el primer video.

Código del video: clic aquí

Video 1: https://hdeleon.net/como-crear-el-archivo-pdf-a-partir-de-un-xml-timbrado-3-3-c-net-xml-a-clase-objeto-sat-1/

Video 3: https://hdeleon.net/como-crear-el-archivo-pdf-a-partir-de-un-xml-timbrado-3-3-c-net-creacion-de-qr-sat-3/

Curso para que aprendas a crear el xml 3.3 desde cero: https://hdeleon.net/curso-para-crear-la-factura-electronica-3-3-cfdi-del-sat-gratis-en-c-net/

Catálogos sat mysql: https://hdeleon.net/catalogos-para-facturar-3-3-sat-en-mysql/

¿Cómo copiar el contenido al portapapeles de un elemento HTML al dar clic en él?

Para que el contenido que tiene un elemento sea copiado automáticamente al portapapeles del usuario, anexo la siguiente función en javascript ayudándome de los selectores de jquery.

Cada paso esta comentado, para en caso de utilizarla con un distinto elemento puedas modificarla sin dificultad.

En el ejemplo realizo la copia del contenido html que existe dentro de un elemento td de una tabla.

HTML


<table>
      <tr>
           <td onclick="Copiar(this)">Hola soy un texto que se copia al darle clic</td>
           <td onclick="Copiar(this)">Hola yo soy otro texto que se copia al darle clic</td>
      </tr>
</table>


JAVASCRIPT


 function Copiar(element) {
        //creamos un input que nos ayudara a guardar el texto temporalmente
        var $temp = $("<input>");
        //lo agregamos a nuestro body
        $("body").append($temp);
        //agregamos en el atributo value del input el contenido html encontrado
        //en el td que se dio click
        //y seleccionamos el input temporal
        $temp.val($(element).html()).select();
        //ejecutamos la funcion de copiado
        document.execCommand("copy");
        //eliminamos el input temporal
        $temp.remove();
    }

Borrar el cache al subir una imagen y mostrarla en el navegador en MVC .Net #Razor

Cuando hacemos un módulo para actualizar una imagen, ya sea el logotipo o una galería, muchas veces tenemos el problema de que sigue saliendo en el navegador la imagen vieja hasta que borramos el cache del navegador.

Lamentablemente los usuarios no saben que es el cache y esperan ver su imagen nueva, al seguir viendo la imagen vieja, el usuario piensa que no se ha subido con éxito la nueva imagen.

En el caso de Mvc .Net esto re se resuelve con un truco, e igual puede resolverse con su equivalencia en cualquier otro lenguaje de programación.

Para esto vamos a hacer uso de la funcionalidad Random, funcionalidad que existe en todo lenguaje de programación y basta con hacerlo de la siguiente manera, en el caso de MVC .Net lo haremos en razor (en la vista):


@{
    //creamos el objeto random y asignamos a una variable string
    Random r = new Random();
    string a = r.Next().ToString();
}

<img src='http://unsitio.com/unaimagen.jpg?a=@a'>

Al poner una variable con un valor nuevo al final de nuestra url de la imagen, obligamos al navegador a volver a cargarla y no utilizar la que tiene en cache.

Un truco viejo, pero que pocos conocen.

¿Como dar el ancho o el alto a un div en relación a nuestra pantalla? #html5 #css3

Hace tiempo para poner a un div o a un elemento HTML el tamaño a relación del monitor donde es mostrado teníamos que hacer uso de javascript, pero gracias a CSS3 ahora se puede hacer por medio de 2 nuevas unidades de medida llamadas VH y VW.

VH= su unidad equivale al 1% del alto del tamaño del dispositivo donde se muestra el elemento.

VW= su unidad equivale al 1% del ancho del tamaño del dispositivo donde se muestra el elemento.

De esta manera podemos hacer que un div crezca dependiendo donde es mostrado, por ejemplo si deseamos que se vea al 80% de alto y al 50% de ancho de nuestra pantalla basta hacerlo de la siguiente manera:


<div style="height:80vh;width:50vw;"></div>

Crear sonido con el navegador con javascript, #HTML5, sin mp3, ni wav

Una forma para crear sonido sin utilizar una pista de sonido es utilizando la interface OscillatorNode la cual sirve para reproducir frecuencias en específico, esta interface nos ofrece algunos tipos de sonido y solo basta con crear el objeto y poner los atributos deseados, en el siguiente ejemplo tengo un arreglo el cual tiene las frecuencias de las notas musicales (hay unas redondeadas espero que no me crucifiquen los músicos) y dependiendo el botón presionado se ejecuta el sonido:

Demo:

Código HTML


<div>
    <button onclick="Sonido(0)">DO</button>
    <button onclick="Sonido(1)">DO#</button>
    <button onclick="Sonido(2)">RE</button>
    <button onclick="Sonido(3)">RE#</button>
    <button onclick="Sonido(4)">MI</button>
    <button onclick="Sonido(5)">FA</button>
    <button onclick="Sonido(6)">FA#</button>
    <button onclick="Sonido(7)">SOL</button>
    <button onclick="Sonido(8)">SOL#</button>
    <button onclick="Sonido(9)">LA</button>
    <button onclick="Sonido(10)">LA#</button>
    <button onclick="Sonido(11)">SI</button>
</div>

Código JS


    //contiene la vibración por segundo de la nota
    //posición en el arreglo: do=0,do#=1,re=2........
    var Sonidos= [261,277,293,311,329,349,369,392,415,440,466,493];

    //creamos contexto
    var context = new (window.AudioContext || window.webkitAudioContext)();

    function Sonido(nota){
         //creamos oscilador
        var osc = context.createOscillator();

        // admite: sine, square, sawtooth, triangle
        osc.type = 'sawtooth'; 

        osc.frequency.value=Sonidos[nota];

        //asignamos el destino para el sonido
        osc.connect(context.destination);
        //iniciamos la nota
        osc.start();
        //detenemos la nota medio segundo despues
        osc.stop(context.currentTime + .5);

    }

¿Cómo enviar un archivo por Ajax de #jquery?

Para enviar un archivo por medio de Ajax en realidad es muy fácil, sobre todo con la función Ajax de jquery, para ello lo demuestro a continuación:
Primero tenemos el código html siguiente, el cual tiene un formulario con un campo de texto y un input file, es importante que el atributo del form enctype sea multipart/form-data, si no es asi no se enviara el archivo.


<form id="frmFormulario" enctype="multipart/form-data">
    <input type="text" name="uncampo">
    <input type="file" name="archivo">
    <input type="submit" value="Enviar">
</form>

Ahora tenemos que seleccionar(selectores de jquery) el formulario para que haga el envió por Ajax (Ver: ¿Cómo hacer una petición Ajax por medio de submit?) y para ello utilizo el siguiente código en javascript el cual esta comentado a detalle:


  $(document).ready(function () {

        //sobreescribimos el metodo submit para que envie la solicitud por ajax
        $("#frmFormulario").submit(function (e) {

            //esto evita que se haga la petición común, es decir evita que se refresque la pagina
            e.preventDefault();

            //ruta la cual recibira nuestro archivo
            url="@Url.Content("~/Archivo/Recibe")"

            //FormData es necesario para el envio de archivo,
            //y de la siguiente manera capturamos todos los elementos del formulario
            var parametros=new FormData($(this)[0])

            //realizamos la petición ajax con la función de jquery
            $.ajax({
                type: "POST",
                url: url,
                data: parametros,
                contentType: false, //importante enviar este parametro en false
                processData: false, //importante enviar este parametro en false
                success: function (data) {

                   alert("Se capturo el archivo con éxito")
                },
                error: function (r) {

                    alert("Error del servidor");
                }
            });

        })

    })

Y este es el trabajo que se hace en el front-end, ahora solo queda hacer el método en el back-end el cual capture el archivo y lo guarde o realice la acción deseada con el fichero; por ejemplo en Mvc.Net seria de la siguiente manera:

//controlador de mvc.net
public class Archivo : Controller{
  public ActionResult Recibe(string uncampo, HttpPostedFileBase archivo)
        {

          //aqui va el codigo que deseemos para manipular el archivo

       }
}

Y así de fácil se envía un archivo por medio de Ajax. Dudas o comentarios pueden hacérmelos llegar y yo les respondo en breve.

Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.

Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, se puede recorrer una imagen y a su vez obtener pixel a pixel de esta.

A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.

Y podemos ver en esta imagen que son divs sin duda:

div clonados con canvas

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

 
.pixel{			
float:left;			
width:1px;			
height:1px;		  
}

HTML

 <img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />

<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>

<div id="imagenHTML"></div>

Javascript

//función que ejecuta el botón
function dibuja(){
	$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");

	//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
	setTimeout(dibujar,1000)

}

//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
	//guardamos la imagen en una variable
	var img = $('#imagen')[0];

	//creamos un canvas y le definimos el mismo tamaño a la imagen
	var canvas = $('<canvas/>')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
	canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

	//definimos el tamaño del div para que sea el mismo ancho de la imagen
	//de esta manera al pintar los divs hijos que representaran los pixeles
	//formen la imagen y den el salto automatico cuando corresponda
	$("#imagenHTML").html("")
	$("#imagenHTML").css({"width":canvas.width+"px"})

	//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
	for(y=0;y<canvas.height;y++){

		//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
		for(x=0;x<canvas.width;x++){
			//obtenemos el color en rgb del pixel actual
			var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
			//obtenemos el rojo verde y azul del rgb anterior
			 var red = quitaCero(rgb[0].toString(16), 2);
             var green = quitaCero(rgb[1].toString(16), 2);
             var blue = quitaCero(rgb[2].toString(16), 2);

			 //obtenemos el hexadecimal con lso colores anteriores
             var hex = red + green + blue;

			 //y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
			$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
		}

	}

	//se termino de pintar y borramos el mensaje de texto que se puso al inicio
	$("#mensaje").html("");
}

//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
    return Array(longitud + 1 - (num + '').length).join('0') + num;
}

Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.