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.
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);
}
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.
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>
