10 Atributos poco conocidos de HTML

HTML es una herramienta muy extensa y hay un conjunto de atributos poco conocidos que he agrupado para mostrarte con ejemplos en el siguiente video.

HTML es una herramienta muy extensa y hay un conjunto de atributos poco conocidos que he agrupado para mostrarte con ejemplos en el siguiente video.

El conocerlos puede ahorrarte trabajo innecesario que recae muchas veces en JavaScript.

¿Cómo comenzar a Programar Frontend?

Es por ello que hice un video con cosas básicas que debes conocer y darte una idea de que que es lo que hace un programador frontend.

Una de las preguntas que más me hacen es como comenzar a programar en el frontend.

Es por ello que hice un video con cosas básicas que debes conocer y darte una idea de que que es lo que hace un programador frontend.

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í