Crear un piano con sonido en Javascript en menos de 10 minutos ?

En este video te mostrare como crear un piano en menos de 10 minutos utilizando javascript, sin la necesidad de tener un mp3 o wav, y solo con un navegador y código.

Piano (pícale a las teclas)

CSS


* { box-sizing:border-box; }

body{ margin:0; background:#222; }
ul {
	height:18.875em; width:34em;
  margin:5em auto; padding:3em 0 0 3em; position:relative; 
  border:1px solid #160801; border-radius:1em; 
  background:-webkit-gradient(linear, right bottom, left top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0))), url('https://f.cl.ly/items/2q1f3t0C3R1b0g081w3n/vwood.png');
box-shadow:0 0 50px rgba(0,0,0,0.5) inset, 0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5); }
li { margin:0; padding:0; list-style:none; position:relative; float:left; }

ul .white {
	height:16em; width:4em; z-index:1;
	border-left:1px solid #bbb;
	border-bottom:1px solid #bbb;
	border-radius:0 0 5px 5px;
	box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset, 0 0 5px #ccc inset, 0 0 3px rgba(0,0,0,0.2);
	background: linear-gradient(top, #eee 0%,#fff 100%);
}

ul .white:active {
	border-top:1px solid #777;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
	background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
}

.black {
	height:8em; width:2em; margin:0 0 0 -1em; z-index:2;
	border:1px solid #000;
	border-radius:0 0 3px 3px;
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -5px 2px 3px rgba(0,0,0,0.6) inset, 0 2px 4px rgba(0,0,0,0.5);
	background:linear-gradient(45deg, #222 0%,#555 100%);
}

.black:active {
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
	background:linear-gradient(left, #444 0%,#222 100%);
}

.a,.g,.f,.d,.c { margin:0 0 0 -1em;  }

ul li:first-child { border-radius:5px 0 5px 5px; }
ul li:last-child { border-radius:0 5px 5px 5px; }

HTML

<ul class="set">
        <li onclick=" jsNota(174.614)" class="white b"></li>
        <li onclick=" jsNota(184.997)" class="black as"></li>
        <li onclick=" jsNota(195.998)" class="white a"></li>
        <li onclick=" jsNota(207.652)" class="black gs"></li>
        <li onclick=" jsNota(220.000)" class="white g"></li>
        <li onclick=" jsNota(233.082)" class="black fs"></li>
        <li onclick=" jsNota(246.942)" class="white f"></li>
        <li onclick=" jsNota(261.626)" class="white e"></li>
        <li onclick=" jsNota(277.183)" class="black ds"></li>
        <li onclick=" jsNota(293.665)" class="white d"></li>
        <li onclick=" jsNota(311.127)" class="black cs"></li>
        <li onclick=" jsNota(329.628)" class="white c"></li>
</ul>

Javascript


var context= new AudioContext();

function jsNota(frecuencia){
        var o= context.createOscillator();
        g=context.createGain();
        o.connect(g);
        o.type="sawtooth";
        o.frequency.value=frecuencia;
        g.connect(context.destination);
        o.start(0);
        g.gain.exponentialRampToValueAtTime(0.00001,context.currentTime +1.5);
    }

Aprende a programar desde Cero, sin censura

Esta es una serie de videos que hice para que cualquier persona afín o no afín al desarrollo de software, pueda aprender a programar.

Aviso: el siguiente contenido contiene sátira y majaderías, ya que fue hecho con ese fin.

Curso de C# .Net

En este curso me enfoco a los aspectos de C# .Net directamente sin tanta teoria. El curso es grabado en vivo como los mejores programas de la televisión, en vivo y con errores.

Aquí no veras Programación Orientada a Objetos, que son las sentencias if o while, estos conceptos ya los debes conocer, e igual hay miles de sitios aburridos que te lo enseñan.

Yo me enfocare a enseñarte C# .Net de una manera original, directo al grano, todo con el fin de que te sirva como una herramienta real de trabajo.

A partir del video 2 comenzaremos a realizar un chat multiplataforma, el cual estará conectado por medio de un servicio web al cual se comunicara un sistema hecho en MVC y otro en Windows Form.

La lista de videos esta ordenada conforme van saliendo y se encuentran aquí abajo. (Igual puedes dar clic a uno y seguir la lista de reproducción)

Código del curso (se actualiza cada que hay nuevos videos): clic aquí

1. Introducción

2. Entornos y arquitectura (Windows Form, MVC, MVC Api)

3. Publicación y configuración de IIS

4. Json a Objeto, recibir datos por POST

5. Serializar y deserializar objetos, generics, enviar datos por POST

6. Creación de librerías, ¿Que es el administrador de paquetes NuGet?, appsettings

7. Vistas en MVC .Net, Razor

8. Validaciones con DataAnnotatios en MVC .Net

9. Autentificación en MVC API .Net

10. Autentificación en MVC .Net utilizando servicio web, filtros, seguridad

11. Solicitudes remotas en tiempo real con SignalR

12. Verificar Access Token, regresar listado en json

13. Utilizar if y try catch en LINQ con Lambda

14. Enviar y recibir datos en tiempo real con SignalR

15. Seguridad y grupos en SignalR

16. Introducción a Windows Forms

17. Sesiones en windows forms

18. Creación de elementos dinámicamente en windows forms

¿Cómo utilizar serialize de jquery en un elemento que no es form? #js #jquery

Para utilizar serialize() de jquery en un conjunto de elementos que estén dentro de un padre que no sea un formulario puede ser posible, para ello te muestro un ejemplo suponiendo que el padre se llama «PadreQueNoEsForm»:


var parametros=$("#PadreQueNoEsForm :input").serialize();

¿Cómo crear el archivo pdf a partir de un xml timbrado 3.3 C# .Net?, Impuestos, SAT #5

En este quinto video te muestro como obtener los impuestos del xml para imprimirlos en el archivo pdf

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

Cuarto video: https://www.youtube.com/watch?v=0nmqpoCTUuM

Código del video: aquí

Crear un Chat con SignalR, Javascript y C# MVC .Net

En este video introductorio a SignalR te enseñare la facilidad con que se trabaja con SignalR y un proyecto web MVC .Net.

En este video haremos un chat sencillo para comprender como funciona SignalR.

¿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/