Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)

Charla presentada en la Tenerife LAN Party 2016, en el auditorio, zona TLP Innova. Novedades de front-end de tecnologías como CSS3, HTML5 y API Javascript.

https://lenguajecss.com/

Transcript

2. twitter.com/manz
5. > Algunas de las funciones que vas a ver, son experimentales... ¡Debes activarlas!
6. > Elementos flexibles CSS Flexbox
7. > 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
8. > 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
9. > 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
10. > 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 Puedo cambiar el ancho del padre y los hijos se adaptan
11. > 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
12. > 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
13. > 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
14. Flexbox CSS
15. > Cuadrículas CSS Grid
16. > 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
17. > 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 1 fila 2
18. > 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 50px auto 100px
19. > 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 50px 200px 50px 200px
20. > 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 50px 200px 25px 50px 50px 10px auto rows
21. > 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
22. Grids CSS
23. > Battery API
24. > 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
25. > Battery API
26. Battery API
27. > Formas y máscaras CSS Formas
28. > 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; }
29. > Formas CSS
30. > Formas CSS #cat { shape-outside: polygon(125px 0, 160px 100px, 248px 250px, 125px 250px); }
31. > Formas CSS
32. > Formas CSS
33. Formas CSS
34. > Máscaras CSS <img id="cat" src="http://i.imgsafe.org/5db73ca36b.jpg" alt="Gato"> #cat { border:5px solid green; } CSS HTML
35. > Máscaras CSS
36. > 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
37. > Máscaras CSS #cat { border:5px solid green; clip-path: polygon(0 0, 100px 125px, 500px 125px, 0 600px); } CSS
38. > ellipse() > inset() > circle()
39. > Máscaras CSS
40. Máscaras CSS
41. HTTP/2 HTTP/2 HTTP/0.9 HTTP/1 HTTP/1.1 HTTP/2 1991 1996 2006 2016
42. Ventajas de HTTP/2 - Una sola conexión TCP - Eliminación de redundancia/latencia - Compresión de cabeceras - Compatible con HTTP/1.1
44. HTTP/2
45. Fonts -> WOFF -> WOFF2
46. Open Sans 212KB 97,2KB 60,3KB
47. TTF: WOFF: WOFF2:
48. > Custom Properties CSS Variable s
49. > 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
50. > Variables CSS (Custom Prop) A A
51. #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
52. > Variables CSS (Custom Prop) A A
53. :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
54. > Variables CSS (Custom Prop) A A
55. Variables CSS (Custom Prop)
56. > Web Animations API
57. 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
58. 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++;
59. > Web Animations
60. Web Animation API
61. > Beacon API Beacon
62. document.addEventListener('visibilitychange', function(){ if (document.visiblityState === 'hidden') { var sessionData = generateSessionData(); navigator.sendBeacon('/collector', sessionData); } }); JS
63. Beacon API
64. Blend modes > Modos de fusión CSS
65. > Modos de fusión CSS
66. Blend modes CSS
67. > Web Audio API Web Audio
68. Acid Defender
69. Web Audio API
70. > Acceder a inscripciones
73. > ¡Gracias!