Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
73
-
Upload
roman-hernandez -
Category
Technology
-
view
364 -
download
0
Transcript of Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
> Algunas de las funciones que vas a ver, son experimentales... ¡Debes activarlas!
> Elementos flexibles CSS
Flexbox
> Block CSS
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
#falcon {width:500px;margin:6em auto;min-height:100px;background:#AAA;display:block;
}#falcon div {
width:75px;height:50px;margin:5px;background:blue;
} CSS
HTML
> Flexbox CSS (hijos tamaño fijo)
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
#falcon {width:500px;margin:6em auto;min-height:100px;background:#AAA;display:flex;
}#falcon div {
width:75px;height:50px;margin:5px;background:blue;
} CSS
HTML
> Flexbox CSS (altura flexible)
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
#falcon {width:500px;margin:6em auto;min-height:100px;background:#AAA;display:flex;
}#falcon div {
width:75px;height:50px;margin:5px;background:blue;
} CSS
HTML
> Flexbox CSS (anchura flexible)
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
#falcon {width:500px;margin:6em auto;min-height:100px;background:#AAA;display:flex;
}#falcon div {
width:100%;margin:5px;background:blue;
}
CSS
HTML
Puedocambiarel anchodel padrey los hijos se adaptan
> Flexbox CSS (centrar eje primario)
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
#falcon {width:500px;margin:6em auto;min-height:100px;background:#AAA;display:flex;justify-content:center;
}#falcon div {
width:75px;height:50px;margin:5px;background:blue;
} CSS
HTML
> Flexbox CSS (centrar eje secundario)
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
#falcon {width:500px;margin:6em auto;min-height:100px;background:#AAA;display:flex;justify-content:center;align-items:center;
}#falcon div {
width:75px;height:50px;margin:5px;background:blue;
} CSS
HTML
> Star Wars CSS
<div id="falcon"> <div id="luke"></div><div id="leia"></div><div id="solo"></div><div id="chewy"></div>
</div>
div #luke {background:linear-gradient(
#8b6e5a 25%, #f5e7e5 25%); }div #leia {
background:linear-gradient(#331f24 25%, #fff6e6 25%); }
div #solo {background:linear-gradient(to left,
#190f17 25%, #f0dbd1 25%,75%,#190f17 75%); }
div #chewy { background:linear-gradient(-25deg,
#5e473c 50%, #f6f1f3 50%,55%,#5e473c 55%); }
CSS
HTML
Flexbox CSS
> Cuadrículas CSS
Grid
> Grid de elementos específicos
<div class="grid"> <div class="a">1</div><div class="b">2</div><div class="c">3</div><div class="d">4</div>
</div>
.grid {display:grid;grid-template-columns:
50px 100px 150px 200px;}
.grid div {background:grey;color:white;
}
CSS
HTML
50px 100px 150px 200px
> Grid de elementos específicos
<div class="grid"> <div class="a">1</div><div class="b">2</div><div class="c">3</div><div class="d">4</div>
</div>
.grid {display:grid;grid-template-columns:
50px 200px;}
.grid div {background:grey;color:white;
}
CSS
HTML
50px 200px
fila 1fila 2
> Grid de elementos específicos
<div class="grid"> <div class="a">1</div><div class="b">2</div><div class="c">3</div><div class="d">4</div>
</div>
.grid {display:grid;grid-template-columns: 100px;grid-template-rows:
50px 100px 50px;}
.grid div {background:grey;color:white;
}
CSS
HTML
50px
50pxauto
100px
> Grid de elementos cíclicos
<div class="grid"> <div class="a">1</div><div class="b">2</div><div class="c">3</div><div class="d">4</div>
</div>
.grid {display:grid;grid-template-columns:
repeat(2, 200px 50px);}
.grid div {background:grey;color:white;
}
CSS
HTML
50px200px 50px200px
> Grid automáticos (con hueco)
<div class="grid"> <div class="a">1</div><div class="b">2</div><div class="c">3</div><div class="d">4</div>
</div>
.grid {display:grid;grid-template-columns:200px 50px;grid-auto-rows: 50px;grid-gap: 25px 10px;
}
.grid div {background:grey;color:white;
}
CSS
HTML
50px200px
25px50px
50px
10px
auto rows
> Grid por áreas
<div class="grid"> <div class="a">1</div><div class="b">2</div><div class="c">3</div><div class="d">4</div>
</div>
.grid {display:grid;grid-auto-rows: 75px;grid-template-areas: "head head" "menu main"
"foot foot";}.a { grid-area:head; background:blue }.b { grid-area:menu; background:red }.c { grid-area:main; background:green }.d { grid-area:foot; background:orange }
CSS
HTML
Grids CSS
> Battery API
> Battery API
navigator.getBattery().then(function(battery) {
console.log(battery.level); // 0..1 console.log(battery.charging); // true / falsebattery.onlevelchange = function() {
// ha cambiado el nivel de carga}battery.onchargingchange = function() {
// se ha conectado/desconectado el dispositivo }
});
JS
Battery API
> Formas y máscaras CSS
Formas
> Formas CSS
<img id="cat" src="http://i.imgsafe.org/5ef91780a2.png" alt="Gato">
<p>El ronroneo suele ser signo de satisfacción. Algunos gatos lo hacen simplemente para tratar de calmarse a sí mismos.</p>
p {width:400px;font-size:22px;padding:20px;
}
CSS
HTML
#cat {width:400px;float:left;
}
> Formas CSS
> Formas CSS
#cat {shape-outside: polygon(125px 0, 160px 100px, 248px 250px,
125px 250px);}
> Formas CSS
Formas CSS
> Máscaras CSS
<img id="cat" src="http://i.imgsafe.org/5db73ca36b.jpg" alt="Gato">
#cat {border:5px solid green;
}
CSS
HTML
> Máscaras CSS
> Máscaras CSS
<img id="cat" src="http://i.imgsafe.org/5db73ca36b.jpg" alt="Gato">
#cat {border:5px solid green;clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
HTML
> Máscaras CSS
#cat {border:5px solid green;clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
> ellipse() > inset() > circle()
HTTP/2HTTP/2HTTP/0.9 HTTP/1 HTTP/1.1 HTTP/2
1991 1996 2006 2016
Ventajas de HTTP/2
- Una sola conexión TCP- Eliminación de redundancia/latencia
- Compresión de cabeceras- Compatible con HTTP/1.1
HTTP/2
Fonts
-> WOFF -> WOFF2
Open Sans
212KB 97,2KB 60,3KB
TTF:
WOFF:
WOFF2:
> Custom Properties CSS
Variables
> Variables CSS (Custom Prop)
<div id="box">A</div> <div id="revbox">A</div>
#box, #revbox {width:200px;height:200px;display:inline-flex;flex-direction:column;justify-content:center;font-size:142px;text-align:center;
}
CSS
HTML
> Variables CSS (Custom Prop)
A A
#box {background:var(--fondo); // no hay variablecolor:var(--texto); // no hay variable
}
#revbox {--fondo: steelblue;background:var(--texto); // no hay variablecolor:var(--fondo); // steelblueborder:1px solid var(--fondo); // steelblue
}
CSS
> Variables CSS (Custom Prop)
A A
:root {--fondo: red;--texto: white;
}#box {
background:var(--fondo); // redcolor:var(--texto); // white
}#revbox {
background:var(--texto); // whitecolor:var(--fondo); // redborder:1px solid var(--fondo); // red
}
CSS
> Variables CSS (Custom Prop)
A A
Variables CSS (Custom Prop)
> Web Animations API
var face = document.querySelector('#face');
anim = face.animate([{ transform: 'translate(0, 0)', opacity: 1 },{ transform: 'translate(20px, 5px)', opacity: .75 },{ transform: 'translate(0, 0)', opacity: 1 }
], {duration: 1000,easing: 'ease',iterations: 5,direction: 'alternate',
});
anim.play();
JS
var face = document.querySelector('#face');
anim = face.animate([{ transform: 'translate(0, 0)', opacity: 1 },{ transform: 'translate(20px, 5px)', opacity: .75 },{ transform: 'translate(0, 0)', opacity: 1 }
], {duration: 1000,easing: 'ease',iterations: 5,direction: 'alternate',
});
anim.play();
JS
anim.play();anim.pause();anim.cancel();anim.finish();anim.reverse();anim.playbackRate++;
Web Animation API
> Beacon API
Beacon
document.addEventListener('visibilitychange', function(){if (document.visiblityState === 'hidden') {
var sessionData = generateSessionData();navigator.sendBeacon('/collector', sessionData);
}});
JS
Beacon API
Blendmodes
> Modos de fusión CSS
Blend modes CSS
> Web Audio API
Web Audio
Acid Defender
Web Audio API
> Acceder a inscripciones
> ¡Gracias!
