Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
twitter.com/manz
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
> Algunas de las funciones que vas a ver,
son experimentales... ¡Debes activarlas!
Slide 6
Slide 6 text
> Elementos flexibles CSS
Flexbox
Slide 7
Slide 7 text
> Block CSS
#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
Slide 8
Slide 8 text
> Flexbox CSS (hijos tamaño fijo)
#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
Slide 9
Slide 9 text
> Flexbox CSS (altura flexible)
#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
Slide 10
Slide 10 text
> Flexbox CSS (anchura flexible)
#falcon {
width:500px;
margin:6em auto;
min-height:100px;
background:#AAA;
display:flex;
}
#falcon div {
width:100%;
margin:5px;
background:blue;
}
CSS
HTML
Puedo
cambiar
el ancho
del padre
y los
hijos se
adaptan
Slide 11
Slide 11 text
> Flexbox CSS (centrar eje primario)
#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
Slide 12
Slide 12 text
> Flexbox CSS (centrar eje secundario)
#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
Slide 13
Slide 13 text
> Star Wars CSS
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
Slide 14
Slide 14 text
Flexbox CSS
Slide 15
Slide 15 text
> Cuadrículas CSS
Grid
Slide 16
Slide 16 text
> Grid de elementos específicos
.grid {
display:grid;
grid-template-columns:
50px 100px 150px 200px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px 100px 150px 200px
1
2
3
4
Slide 17
Slide 17 text
> Grid de elementos específicos
.grid {
display:grid;
grid-template-columns:
50px 200px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px 200px
fila 1
fila 2
1
2
3
4
Slide 18
Slide 18 text
> Grid de elementos específicos
.grid {
display:grid;
grid-template-columns: 100px;
grid-template-rows:
50px 100px 50px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px
50px
auto
100px
1
2
3
4
Slide 19
Slide 19 text
> Grid de elementos cíclicos
.grid {
display:grid;
grid-template-columns:
repeat(2, 200px 50px);
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px
200px 50px
200px
1
2
3
4
Slide 20
Slide 20 text
> Grid automáticos (con hueco)
.grid {
display:grid;
grid-template-columns:200px 50px;
grid-auto-rows: 50px;
grid-gap: 25px 10px;
}
.grid div {
background:grey;
color:white;
}
CSS
HTML
50px
200px
25px
50px
50px
10px
auto
rows
1
2
3
4
Slide 21
Slide 21 text
> Grid por áreas
.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
1
2
3
4
Slide 22
Slide 22 text
Grids CSS
Slide 23
Slide 23 text
> Battery API
Slide 24
Slide 24 text
> Battery API
navigator.getBattery().then(
function(battery) {
console.log(battery.level); // 0..1
console.log(battery.charging); // true / false
battery.onlevelchange = function() {
// ha cambiado el nivel de carga
}
battery.onchargingchange = function() {
// se ha conectado/desconectado el dispositivo
}
}
);
JS
Slide 25
Slide 25 text
> Battery API
Slide 26
Slide 26 text
Battery API
Slide 27
Slide 27 text
> Formas y máscaras CSS
Formas
Slide 28
Slide 28 text
> Formas CSS
El ronroneo suele ser signo de satisfacción. Algunos gatos lo hacen simplemente para tratar de calmarse a sí mismos.
p { width:400px; font-size:22px; padding:20px; } CSS HTML #cat { width:400px; float:left; }Slide 29
Slide 29 text
> Formas CSS
Slide 30
Slide 30 text
> Formas CSS
#cat {
shape-outside: polygon(125px 0, 160px 100px, 248px 250px,
125px 250px);
}
Slide 31
Slide 31 text
> Formas CSS
Slide 32
Slide 32 text
> Formas CSS
Slide 33
Slide 33 text
Formas CSS
Slide 34
Slide 34 text
> Máscaras CSS
#cat {
border:5px solid green;
}
CSS
HTML
#cat {
border:5px solid green;
}
CSS
HTML
Slide 35
Slide 35 text
> Máscaras CSS
Slide 36
Slide 36 text
> Máscaras CSS
#cat {
border:5px solid green;
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
HTML
#cat {
border:5px solid green;
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
HTML
Slide 37
Slide 37 text
> Máscaras CSS
#cat {
border:5px solid green;
clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px);
}
CSS
Slide 38
Slide 38 text
> ellipse() > inset() > circle()
Slide 39
Slide 39 text
> Máscaras CSS
Slide 40
Slide 40 text
Máscaras CSS
Slide 41
Slide 41 text
HTTP/2
HTTP/2
HTTP/0.9 HTTP/1 HTTP/1.1 HTTP/2
1991 1996 2006 2016
Slide 42
Slide 42 text
Ventajas de HTTP/2
- Una sola conexión TCP
- Eliminación de redundancia/latencia
- Compresión de cabeceras
- Compatible con HTTP/1.1
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
HTTP/2
Slide 45
Slide 45 text
Fonts
-> WOFF -> WOFF2
Slide 46
Slide 46 text
Open Sans
212KB 97,2KB 60,3KB
Slide 47
Slide 47 text
TTF:
WOFF:
WOFF2:
Slide 48
Slide 48 text
> Custom Properties CSS
Variable
s
Slide 49
Slide 49 text
> Variables CSS (Custom Prop)
A
A
#box, #revbox {
width:200px;
height:200px;
display:inline-flex;
flex-direction:column;
justify-content:center;
font-size:142px;
text-align:center;
}
CSS
HTML
Slide 50
Slide 50 text
> Variables CSS (Custom Prop)
A A
Slide 51
Slide 51 text
#box {
background:var(--fondo); // no hay variable
color:var(--texto); // no hay variable
}
#revbox {
--fondo: steelblue;
background:var(--texto); // no hay variable
color:var(--fondo); // steelblue
border:1px solid var(--fondo); // steelblue
}
CSS
Slide 52
Slide 52 text
> Variables CSS (Custom Prop)
A A
Slide 53
Slide 53 text
:root {
--fondo: red;
--texto: white;
}
#box {
background:var(--fondo); // red
color:var(--texto); // white
}
#revbox {
background:var(--texto); // white
color:var(--fondo); // red
border:1px solid var(--fondo); // red
}
CSS
Slide 54
Slide 54 text
> Variables CSS (Custom Prop)
A A
Slide 55
Slide 55 text
Variables CSS (Custom Prop)
Slide 56
Slide 56 text
> Web Animations API
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
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++;
Slide 59
Slide 59 text
> Web Animations
Slide 60
Slide 60 text
Web Animation API
Slide 61
Slide 61 text
> Beacon API
Beacon
Slide 62
Slide 62 text
document.addEventListener('visibilitychange', function(){
if (document.visiblityState === 'hidden') {
var sessionData = generateSessionData();
navigator.sendBeacon('/collector', sessionData);
}
});
JS
Slide 63
Slide 63 text
Beacon API
Slide 64
Slide 64 text
Blend
modes
> Modos de fusión CSS
Slide 65
Slide 65 text
> Modos de fusión CSS
Slide 66
Slide 66 text
Blend modes CSS
Slide 67
Slide 67 text
> Web Audio API
Web Audio
Slide 68
Slide 68 text
Acid Defender
Slide 69
Slide 69 text
Web Audio API
Slide 70
Slide 70 text
> Acceder a inscripciones
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
> ¡Gracias!