Front-end: Diseñar webs rápidas, flexibles y potentes

Presentación de la conferencia "Front-end: Diseñar webs rápidas, flexibles y potentes" impartida en la Tenerife LAN Party 2015.

Herramientas y consejos de front-end relacionados con HTML5 (Jade, LenguajeHTML.com, MinifyHTML, API HTML5...), CSS3 (LESS, LenguajeCSS.com, autoprefixer, cssnext, uncss...), SVG, Javascript (Babel, d3, Coffeescript, jQuery...), datos ligeros (XML, JSON, YAML), editores web y task runners (GulpJS).

Más información relacionada:
http://www.emezeta.com/articulos/10-pasos-para-renovar-el-front-end-del-blog
http://lenguajehtml.com/
http://lenguajecss.com/
http://lenguajejs.com/

Transcript

1. Diseñar webs rápidas, flexibles y potentes
2. twitter.com/manz
3. ¿Qué idea tenemos de una web?
4. > emezeta.com
6. ? > pero… ¿qué ocurre aquí?
7. ¿Cómo funciona una web por dentro ?
8. > front-end
9. > front-end > back-end
10. > back-end > front-end
11. > back-end > servidores web Apache, nginx, LiteSpeed...
12. > back-end > servidores web Apache, nginx, LiteSpeed... > bases de datos MySQL, PostgreSQL, MongoDB...
13. > back-end > servidores web Apache, nginx, LiteSpeed... > bases de datos MySQL, PostgreSQL, MongoDB... > lenguajes PHP, NodeJS, Python, Ruby, Java...
14. Pero en esta ocasión vamos a hablar de front-end...
15. > front-end > Lenguaje HTML Estructura y contenido web
16. > front-end > Lenguaje HTML Estructura y contenido web > Lenguaje CSS Diseño y aspecto visual
17. > front-end > Lenguaje HTML Estructura y contenido web > Lenguaje CSS Diseño y aspecto visual > Lenguaje JS Programación web en front-end
21. Antes de empezar, varios detalles...
22. > Hay 3 formas de hacer una web
23. > Hay 3 formas de hacer una web Llamar al que sabe
24. > Hay 3 formas de hacer una web Pagar al que sabe
25. > Hay 3 formas de hacer una web Hacer que Chuck Norris se sienta orgulloso de nosotros
26. Canary Chrome Firefox Dev Opera Dev
27. > Chrome Dev Tools [CTRL+SHIFT+I]
28. > Aprende a a la terminal
29. > nodejs > (Javascript en el servidor) Node Package Manager
30. ¿Cuál es la peor pesadilla de un diseñador/desarrollador web?
31. ¿Cuál es la peor pesadilla de un diseñador/desarrollador web? (A parte de Internet Explorer)
32. > ¿Consumo de RAM? [SHIFT+ESC] Bueno, podría... pero no...
33. > Fragmentación web En un navegador se ve genial, pero cuando intentamos verlo en otro...
35. > Fragmentación web
36. > Fragmentación web
37. > CanIUse.com
38. HTML TEST.COM
39. CSS TEST.COM
40. > DoIUse.com
41. > objetivos > Rápida Debe cargar lo más rápido posible.
42. > objetivos > Rápida Debe cargar lo más rápido posible. > Flexible Debe ser fácil de mantener.
43. > objetivos > Rápida Debe cargar lo más rápido posible. > Flexible Debe ser fácil de mantener. > Potente y eficiente Usar los recursos a tu alcance.
44. HTML5 Estructura y contenido
45. > HTML5 <div id="panel"> <h3>Selecciona tu opción:</h3> <select id="tipo" class="flat"> <option value="1">Opción #1</option> <option value="2">Opción #2</option> <option value="3">Opción #3</option> </select> </div> lenguajehtml.com
46. > HTML5
47. > Minificación de código Objetivo: Reducir el peso del archivo. Minify, Uglify (minificadores) Prettify, Beautify (desminificadores)
48. > Minificación de código <div class="text"> <h3>Información</h3> <a href="http://twitter.com/Manz">@Manz</a> <a href="http://www.emezeta.com/">Web</a> </div> ... <div class="text"><h3>Infor mación</h3><a href="http:// twitter.com/Manz">@Manz< /a><a href="http://www.eme zeta.com/">Web</a></div> ... 11KB 32KB
49. > Minificación de código - Eliminar (colapsar) espacios y/o saltos de línea. - Eliminar comentarios. - Reducir código (borrar redundancias, usar alternativas...). - Reagrupar selectores CSS. - Redondear unidades a “X” decimales. Objetivo: Reducir el peso del archivo. Minify, Uglify (minificadores) Prettify, Beautify (desminificadores)
50. > npm install -g html-minifier > html-minifier index.html --minify-css --minify-js --remove-script- type-attributes --remove-style-link-type- attributes --use-short-doctype --remove- comments --collapse-whitespace -o index.min.html > cat index.html | html-minifier > Minificación HTML Minifica el CSS o el JS “inline” (requiere cleancss / uglifyjs) Elimina atributos “type” o simplifica DocType (HTML5) Elimina los comentarios HTML del documento Elimina (colapsa) los espacios en blanco del HTML
51. > Selectores CSS div#info div.flat ul.links a <div id="info">Info</div> <div class="flat">...</div> <ul class="links"> <li> <a href="#link">enlace</a> </li> </ul>
52. > EMMET select#tipo>option[value=$]{Opción #$}*3 bit.ly/emmetcheat <select id="tipo"> <option value="1">Opción #1</option> <option value="2">Opción #2</option> <option value="3">Opción #3</option> </select> TAB
53. > HAML > JADE > Slim slim-lang.com jade-lang.com haml.info
54. > HAML #panel %h3 Selecciona tu opción: %select#tipo.flat %option{:value => "1"} Opción #1 %option{:value => "2"} Opción #2 %option{:value => "3"} Opción #3 haml.info
55. > JADE #panel h3 Selecciona tu opción: select#tipo.flat option(value='1') Opción #1 option(value='2') Opción #2 option(value='3') Opción #3 jade-lang.com
56. > JADE include info.include.jade - var title = "Selecciona tu opción" #panel h3= title select#tipo.flat ul each val in [1, 2, 3] option(value=val) Opción ##{val} jade-lang.com Incluir código HTML de forma muy organizada. Variables personalizadas con contenido. Estructuras de control, bucles o facilidades.
57. > APIS de HTML5 WebStorage API Multimedia Geolocalización Vibración
58. michelacosta.com > APIS de HTML5
59. La web debe ser rápida ...para los usuarios ...para los buscadores
60. > emezeta.com DNS Conexión SSL Subida Espera Descarga Dominio Alojamiento Contenido html Redirección Backend ¿Depende del usuario? Se puede optimizar
61. > Velocidad > Fuente: Google Analytics Dominio Conexión Redirección Respuesta Descarga Total Restante 0,02s 0,10s 0,24s 0,30s 0,15s 5,69s 4,88s Dominio Alojamiento Web
62. CSS html PNG PNG JPG JPG JS > esto ocurre por cada recurso de la web al principio al final
63. > Chrome Dev Tools
64. > Pingdom Tools > Google PageSpeed > Web Page Test http://tools.pingdom.com/fpt/ https://developers.google.com/speed/pagespeed/ http://www.webpagetest.org/
65. > Reducir número de peticiones
66. zerosprites.com > Reducir número de peticiones spritecow.com
67. > Reutilizar peticiones cdnjs.com jsdelivr.com caché
68. > Tipo datos > Fuente: http://httparchive.org/ Imágenes Scripts Videos Fuentes CSS HTML 1332KB 337KB 227KB 100KB 64KB 54KB
69. > Imágenes > Fuente: http://httparchive.org/ JPG PNG GIF Otros WebP 46% 29% 23% 2% ~1%
70. > Fuentes > Fuente: http://httparchive.org/ Fuentes Sin fuentes 53% 47%
71. ¿Hay otra forma de reducir peticiones?
72. > FontAwesome fontawesome.io
73. > WebFont PNG A B C
74. > WebFonts > No pierden resolución al ampliar/reducir > Son fuentes, puedes tratarlas con CSS
75. > WebFonts > No pierden resolución al ampliar/reducir > Son fuentes, puedes tratarlas con CSS > Desventaja: Sólo un color > Desventaja: Quiero un icono específico
76. > ¿Solución?
77. > ¿Solución?
78. > IcoMoon icomoon.io/app
79. > Reducir tiempo de descarga Reducir tamaño
80. ¿¿Cómo??
81. > Utilizar compresión HTTP (GZip) GZip? GZip? 15KB 85KB html GZip! 85KB html
82. > curl -L -H Accept-encoding:gzip -I emezeta.com HTTP/1.1 200 OK Server: nginx Date: Thu, 02 Jul 2015 03:28:17 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 20 Connection: keep-alive Vary: Accept-Encoding Content-Encoding: gzip > ¿Usa compresión HTTP? El sitio web comprime en gzip los documentos Sólo algunos formatos pueden usar compresión HTTP: html, json, css, js, xml, svg... Pregunto si el sitio web soporta compresión HTTP
83. > npm install -g imagemin gifsicle@3.0.1 postinstall √ gifsicle pre-build test passed successfully jpegtran-bin@3.0.2 postinstall √ jpegtran pre-build test passed successfully optipng-bin@3.0.2 postinstall √ optipng pre-build test passed successfully imagemin@3.2.0 ├── get-stdin@4.0.1 ├── path-exists@1.0.0 ├── optional@0.1.3 ... > Optimización de imágenes
84. > ls -lh image.png -rw-r--r-- Manz 447k image.png > imagemin image.png > ls -lh build\image.png -rw-r--r-- Manz 369k image.png > Optimización de imágenes
85. > npm install -g jpgo > jpgo image.jpg 䘠 image.jpg before=153.6 kB after=144.93 kB reduced= 8.67 kB > Optimización de imágenes
86. CSS3 Diseño y apariencia
88. > CSS3 button.flat { border: 0; border-radius: 25px; padding: 10px; background: RGBA(0,0,0, 0.5); color: white; transition: all 2s ease-in-out; } button.flat:hover { background: #A00; cursor: pointer; transition: all 1s ease; } lenguajecss.com
89. > CSS3
90. lenguajecss.com/css/
91. #contenedor { border: 4px solid white; padding: 10px; display: flex; } .item { width: 25px; } .item-1 { background: red; order: 1 } .item-2 { background: green; order: 2 } .item-3 { background: blue; order: 3 } 1 2 3 > FlexBox
92. #contenedor { border: 4px solid white; padding: 10px; display: flex; } .item { width: 25px; } .item-1 { background: red; order: 3 } .item-2 { background: green; order: 2 } .item-3 { background: blue; order: 1 } 3 1 2 > FlexBox
93. #contenedor { border: 4px solid white; padding: 10px; display: flex; flex-direction: column; } .item { width: 25px; } .item-1 { background: red; order: 3 } .item-2 { background: green; order: 2 } .item-3 { background: blue; order: 1 } > FlexBox 3 1 2
94. img { border: 2px solid white; width: 300px; margin: .4em; } .original { } .sepia { filter: sepia(1) } .brillo { filter: brightness(1.5) } .contraste { filter: contrast(1.5) } .grayscale { filter: grayscale(1) } .hue { filter: hue-rotate(150deg) } > Filtros CSS Codepen: RPMbbx
95. > CSS es muy potente http://i.imgur.com/47xkq4v.jpg
96. #earth { width: 300px; height: 300px; border-radius: 50%; background: url(http://i.imgur.com/47xkq4v.jpg); background-repeat: repeat-x; margin: 5em auto; animation: rotacion 6s linear infinite; box-shadow: inset 0 0 25px 5px #000; } @keyframes rotacion { 0% { background-position: 620px } 100% { background-position: 0 } } > CSS es muy potente Codepen: OVQYEY
97. > Animaciones CSS bit.ly/animacionescss
98. > npm install -g clean-css > cleancss index.css --keep-line-breaks --rounding-precision 1 --s0 --skip-shorthand-compacting --skip-advanced -o index.min.css > cat index.css | cleancss > Minificación CSS Respeta los saltos de línea (no une en una sola línea) Elimina comentarios CSS. Redondea unidades CSS a 1 decimales (def: 2) Desactiva optimizaciones (shorthands, compresión...)
99. > EMMET animps:r bit.ly/emmetcheat animation-play-state: running;| TAB TAB mr margin-right: |; TAB margin-right: 5px;| mr:5
100. > LESS > SASS > Stylus bit.ly/styluscss sass-lang.com lesscss.org
101. > LESS @import "core.less"; .transition(@time: 1s) { transition: all @time ease; -webkit-transition: all @time ease; } button.flat { border: 0; border-radius: 25px; padding: 10px; background: RGBA(0,0,0, 0.5); color: white; .transition(2s); &:hover { background: #A00; cursor: pointer; .transition; } } lesscss.org
102. > autoprefixer img#mario { image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-pixelated; image-rendering: pixelated; } bit.ly/aprefixer img#mario { image-rendering: pixelated; } (ahora forma parte de postcss)
103. > cssnext a:hover { color: color( red blackness(80%) ); // Oscurecer colores background-color: #44556677; // Soporta c. alfa en hex } :root { --mainColor: red; // Define variable CSS “mainColor” } a { color: var(--mainColor); // Usa variable CSS } img.sepia { filter: sepia(1); // Organiza código (autoprexifer, minify…) } cssnext.io
104. > npm install -g uncss > uncss http://www.emezeta.com/ > out.css > CSS no utilizado Elimina estilos CSS sin utilizar. Guarda los cambios en el archivo out.css
105. > SVG <svg xmlns="http://www.w3.org/2000/svg"> <path d="M9.43 206.88 l35-145 30.7 75.72 30.73-72.86 25.7 139.28 42.15-135.7 42.87 137.85v -135L308 202.6V71.17h 102.14l-89.28 134.28 121.43-.7" /> </svg>
106. > Inkscape 2,1KB
107. > Optimización de SVG > npm install -g svgo > svgo -i manz.svg -p 2 --pretty -o manz.min. svg Done in 72 ms! 2.113 KiB - 88.3% = 0.247 KiB Redondea a 2 decimales las unidades utilizadas. Respeta los saltos de línea y usa indentaciones. 0,2KB
108. > SVG path { fill: none; /* Trazos sin relleno */ stroke: #222; stroke-dasharray: 2000px 2000px; /* line,space */ stroke-dashoffset: 2000px; /* Desplazamiento */ stroke-width: 8px; } /* Al mover sobre la región SVG... */ svg:hover path { stroke-dashoffset: 0; transition: stroke-dashoffset 8s linear; }
109. > SVG+CSS codepen.io/manz/pen/OVQLbG (¡con apenas 4 líneas de código HTML y 9 de CSS!)
110. responsivelogos.co.uk
111. d3js.org > d3
112. Javascript Programación en cliente
113. > JavaScript var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], fives = [] nums.forEach(v => { if (v % 5 === 0) fives.push(v) }) console.log(fives) lenguajejs.com
114. > npm install -g uglifyjs > uglifyjs index.js --comments all --compress --lint -o index.min.js > cat index.min.js | uglifyjs --beautify 2>null > Minificación JS Preserva todos los comentarios JS (permite RegExp) Activa el compresor de código JS. Parsea y avisa de errores Javascript. Des-minifica el código Javascript mostrado con cat.
115. > CoffeeScript var i, j; for (i = j = 0; j <= 10; i = ++j) { alert(i); } coffeescript.org alert i for i in [0..10]
116. También tenemos fragmentación... =
117. Estándar ECMAScript ES5 ES6 ES7 JUN/2015 DIC/2009 En progreso kangax.github.io/compat-table/es6
118. > babel const PI = 3.14 let func = e => console.log(e) func(5) func(`El valor de PI es ${PI}.`) babeljs.io "use strict" var PI = 3.14 var func = function(e) { return console.log(e) } func(5) func("El valor de PI es " + PI + ".")
119. > JQuery jquery.com var request = new XMLHttpRequest(); request.open('GET', '/url', true); request.onreadystatechange = function() { if (this.readyState === 4) if (this.status >= 200 && this.status < 400) var data = JSON.parse(this.responseText); }; request.send(); $.getJSON('/url', function(data) { // código });
120. > Rendimiento codepen.io/manz/pen/JdEXKW
121. youmightnotneedjquery.com $('#users li') document.querySelectorAll('#users li')
122. Datos Formatos ligeros
123. > XML w3.org/XML/ <?xml version="1.0" encoding="UTF-8" ?> <root> <array>1</array> <array>2</array> <array>3</array> <array>4</array> <array>5</array> <booleano>true</booleano> <objeto> <a>4</a> <b>Texto</b> <c /> </objeto> </root>
124. > JSON json.org { "array": [1, 2, 3, 4, 5], "booleano": true, "objeto": { "a": 4, "b": "Texto", "c": null } } ejemplo.json 1 2 3 4 5 䘟 4 Texto Compatible con JS
125. bit.ly/chromejsonview
126. > YAML yaml.org --- array: [1, 2, 3, 4, 5] booleano: true objeto: a: 4 b: 'Texto' c: null
127. jekyllrb.com --- layout: post category: tecnología tags: [web, blogs] --- # Título Esto es un **pequeño ejemplo** de un artículo escrito con *markdown* y *YAML Front Matter*. Nuevos CMS: Generadores estáticos
128. JSON 0,09KB 0,1KB 0,3KB
129. ¡Quiero algo más cómodo! ¡Pero todo esto es mucho trabajo!
130. sitioweb src index.jade menu.include.jade css index.less js index.js lazyload-plugin.js img logo.psd logo.png sitioweb dist index.html css index.css index.min.css js index.js index.min.js img logo.png src: Carpeta fuente dist: Carpeta destino
131. Editores Programas flexibles
132. > Atom atom.io
133. > Sublime Text sublimetext.com
134. > Sublime > Atom > Brackets brackets.io atom.io sublimetext.com
135. Task Runners Programadores de tareas
136. > Grunt > Gulp > Broccoli broccolijs.com gulpjs.com gruntjs.com
137. > Gulp gulpjs.com GULP GULP
138. > Gulp gulpjs.com CSS MIN.CSS LESS
139. > Gulp gulpjs.com > gulp TIDY
140. > gulpfile.js gulpjs.com var gulp = require('gulp') var minifycss = require('gulp-minify-css') var autoprefixer = require('gulp-autoprefixer') var rename = require('gulp-rename') gulp.task('default', function() { return gulp.src('index.css') .pipe(autoprefixer()) .pipe(minifycss()) .pipe(rename('index.min.css')) .pipe(gulp.dest('dist/css')) }) Requiere instalar previamente: npm install -g gulp npm install --save-dev gulp gulp-minify-css gulp-autoprefixer gulp-rename > gulp
141. > plugins gulpjs.com/plugins/ > gulp-minify-css > gulp-autoprefixer > gulp-concat > gulp-coffee > gulp-webserver > gulp-image > gulp-htmlmin > gulp-run > gulp-less > gulp-jade > gulp-babel > gulp-newer (con livereload) (jpg, png, svg...)
142. > ¿Mucha información?
143. bit.ly/aprendehtml5 bit.ly/aprendecss3 > Cursos de CSS3 y HTML5
144. Próximamente > Curso de Javascript
145. > ¡Gracias!