front-end: diseñar webs rápidas, flexibles y potentes
TRANSCRIPT
![Page 1: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/1.jpg)
Diseñar webs rápidas, flexibles y potentes
![Page 3: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/3.jpg)
¿Qué idea tenemos de una web?
![Page 4: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/4.jpg)
> emezeta.com
![Page 5: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/5.jpg)
![Page 6: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/6.jpg)
?> pero… ¿qué ocurre aquí?
![Page 7: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/7.jpg)
¿Cómo funciona una web 茜por dentro穐?
![Page 8: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/8.jpg)
> front-end
![Page 9: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/9.jpg)
> front-end > back-end
![Page 10: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/10.jpg)
> back-end> front-end
![Page 11: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/11.jpg)
> back-end> servidores webApache, nginx, LiteSpeed...
![Page 12: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/12.jpg)
> back-end> servidores webApache, nginx, LiteSpeed...
> bases de datosMySQL, PostgreSQL, MongoDB...
![Page 13: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/13.jpg)
> back-end> servidores webApache, nginx, LiteSpeed...
> bases de datosMySQL, PostgreSQL, MongoDB...
> lenguajesPHP, NodeJS, Python, Ruby, Java...
![Page 14: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/14.jpg)
Pero en esta ocasión vamos a hablar de front-end...
![Page 15: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/15.jpg)
> front-end > Lenguaje HTMLEstructura y contenido web
![Page 16: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/16.jpg)
> front-end > Lenguaje HTMLEstructura y contenido web
> Lenguaje CSSDiseño y aspecto visual
![Page 17: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/17.jpg)
> front-end > Lenguaje HTMLEstructura y contenido web
> Lenguaje CSSDiseño y aspecto visual
> Lenguaje JSProgramación web en front-end
![Page 18: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/18.jpg)
![Page 19: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/19.jpg)
![Page 20: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/20.jpg)
![Page 21: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/21.jpg)
Antes de empezar, varios detalles...
![Page 22: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/22.jpg)
> Hay 3 formas de hacer una web
![Page 23: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/23.jpg)
> Hay 3 formas de hacer una web
Llamar al que sabe
![Page 24: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/24.jpg)
> Hay 3 formas de hacer una web
Pagar al que sabe
![Page 25: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/25.jpg)
> Hay 3 formas de hacer una web
Hacer que Chuck Norris se sienta orgulloso de nosotros
![Page 26: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/26.jpg)
Canary ChromeFirefox Dev Opera Dev
![Page 27: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/27.jpg)
> Chrome Dev Tools[CTRL+SHIFT+I]
![Page 28: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/28.jpg)
> Aprende a a la terminal
![Page 30: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/30.jpg)
¿Cuál es la peor pesadilla de un diseñador/desarrollador web?
![Page 31: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/31.jpg)
¿Cuál es la peor pesadilla de un diseñador/desarrollador web?
(A parte de Internet Explorer)
![Page 32: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/32.jpg)
> ¿Consumo de RAM? [SHIFT+ESC]
Bueno, podría... pero no...
![Page 33: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/33.jpg)
> Fragmentación web
En un navegador se ve genial, pero cuando intentamos verlo en otro...
![Page 34: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/34.jpg)
![Page 35: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/35.jpg)
> Fragmentación web
![Page 36: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/36.jpg)
> Fragmentación web
![Page 37: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/37.jpg)
> CanIUse.com
![Page 38: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/38.jpg)
HTML TEST.COM
![Page 39: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/39.jpg)
CSS TEST.COM
![Page 40: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/40.jpg)
> DoIUse.com
![Page 41: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/41.jpg)
> objetivos > RápidaDebe cargar lo más rápido posible.
![Page 42: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/42.jpg)
> objetivos > RápidaDebe cargar lo más rápido posible.
> FlexibleDebe ser fácil de mantener.
![Page 43: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/43.jpg)
> objetivos > RápidaDebe cargar lo más rápido posible.
> FlexibleDebe ser fácil de mantener.
> Potente y eficienteUsar los recursos a tu alcance.
![Page 44: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/44.jpg)
HTML5Estructura y contenido
![Page 45: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/45.jpg)
> 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
![Page 46: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/46.jpg)
> HTML5
![Page 47: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/47.jpg)
> Minificación de códigoObjetivo: Reducir el peso del archivo.
Minify, Uglify (minificadores)Prettify, Beautify (desminificadores)
![Page 48: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/48.jpg)
> 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>Información</h3><a href="http://twitter.com/Manz">@Manz</a><a href="http://www.emezeta.com/">Web</a></div>...
11KB32KB
![Page 49: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/49.jpg)
> 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)
![Page 50: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/50.jpg)
> 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
![Page 51: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/51.jpg)
> Selectores CSSdiv#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>
![Page 52: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/52.jpg)
> EMMETselect#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
![Page 53: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/53.jpg)
> HAML > JADE > Slim
slim-lang.comjade-lang.comhaml.info
![Page 54: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/54.jpg)
> 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
![Page 55: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/55.jpg)
> 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
![Page 56: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/56.jpg)
> JADEinclude 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.
![Page 57: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/57.jpg)
> APIS de HTML5
WebStorage
API MultimediaGeolocalización
Vibración
![Page 58: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/58.jpg)
michelacosta.com
> APIS de HTML5
![Page 59: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/59.jpg)
La web debe ser rápida
...para los usuarios...para los buscadores
![Page 60: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/60.jpg)
> emezeta.com
DNS ConexiónSSL Subida Espera Descarga
Dominio Alojamiento Contenido
html
Redirección
Backend ¿Dependedel usuario? Se puede optimizar
![Page 61: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/61.jpg)
> Velocidad
> Fuente: Google Analytics
DominioConexiónRedirecciónRespuestaDescargaTotalRestante
0,02s0,10s0,24s0,30s0,15s5,69s4,88s
Dom
inio
Aloj
amie
nto
Web
![Page 62: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/62.jpg)
CSS
html
PNG
PNG
JPG
JPG
JS
> esto ocurre por cada recurso de la web
al principio
al final
![Page 63: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/63.jpg)
> Chrome Dev Tools
![Page 64: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/64.jpg)
> Pingdom Tools
> Google PageSpeed
> Web Page Test
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
http://www.webpagetest.org/
![Page 65: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/65.jpg)
> Reducir número de peticiones
![Page 66: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/66.jpg)
zerosprites.com
> Reducir número de peticiones
spritecow.com
![Page 67: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/67.jpg)
> Reutilizar peticiones
cdnjs.com jsdelivr.com
caché
![Page 68: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/68.jpg)
> Tipo datos
> Fuente: http://httparchive.org/
ImágenesScriptsVideosFuentesCSSHTML
1332KB337KB227KB100KB
64KB54KB
![Page 69: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/69.jpg)
> Imágenes
> Fuente: http://httparchive.org/
JPGPNGGIFOtrosWebP
46%29%23%
2%~1%
![Page 70: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/70.jpg)
> Fuentes
> Fuente: http://httparchive.org/
FuentesSin fuentes
53%47%
![Page 71: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/71.jpg)
¿Hay otra forma de reducir peticiones?
![Page 73: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/73.jpg)
> WebFont
PNG A B C
![Page 74: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/74.jpg)
> WebFonts
> No pierden resolución al ampliar/reducir
> Son fuentes, puedes tratarlas con CSS
![Page 75: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/75.jpg)
> 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
![Page 76: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/76.jpg)
> ¿Solución?
![Page 77: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/77.jpg)
> ¿Solución?
![Page 79: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/79.jpg)
> Reducir tiempo de descarga
Reducir tamaño
![Page 80: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/80.jpg)
¿¿Cómo??
![Page 81: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/81.jpg)
> Utilizar compresión HTTP (GZip)
GZip? GZip?
15KB
85KBhtml
GZip!85KB
html
![Page 82: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/82.jpg)
> curl -L -H Accept-encoding:gzip -I emezeta.com
HTTP/1.1 200 OKServer: nginxDate: Thu, 02 Jul 2015 03:28:17 GMTContent-Type: text/html; charset=UTF-8Content-Length: 20Connection: keep-aliveVary: Accept-EncodingContent-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 soportacompresión HTTP
![Page 83: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/83.jpg)
> npm install -g imagemin
[email protected] postinstall √ gifsicle pre-build test passed [email protected] postinstall √ jpegtran pre-build test passed [email protected] postinstall √ optipng pre-build test passed [email protected]├── [email protected]├── [email protected]├── [email protected]...
> Optimización de imágenes
![Page 84: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/84.jpg)
> 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
![Page 85: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/85.jpg)
> 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
![Page 86: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/86.jpg)
CSS3Diseño y apariencia
![Page 87: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/87.jpg)
![Page 88: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/88.jpg)
> CSS3button.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
![Page 89: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/89.jpg)
> CSS3
![Page 91: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/91.jpg)
#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
![Page 92: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/92.jpg)
#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 12
> FlexBox
![Page 93: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/93.jpg)
#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
12
![Page 94: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/94.jpg)
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
![Page 95: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/95.jpg)
> CSS es muy potente
http://i.imgur.com/47xkq4v.jpg
![Page 96: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/96.jpg)
#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
![Page 98: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/98.jpg)
> 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...)
![Page 99: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/99.jpg)
> EMMETanimps:r
bit.ly/emmetcheat
animation-play-state: running;|
TAB TABmr
margin-right: |;
TAB
margin-right: 5px;|
mr:5
![Page 100: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/100.jpg)
> LESS > SASS > Stylus
bit.ly/styluscsssass-lang.comlesscss.org
![Page 101: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/101.jpg)
> 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
![Page 102: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/102.jpg)
> 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)
![Page 103: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/103.jpg)
> 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
![Page 104: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/104.jpg)
> 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
![Page 105: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/105.jpg)
> 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>
![Page 106: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/106.jpg)
> Inkscape
2,1KB
![Page 107: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/107.jpg)
> 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
![Page 108: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/108.jpg)
> 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;}
![Page 109: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/109.jpg)
> SVG+CSS
codepen.io/manz/pen/OVQLbG
(¡con apenas 4 líneas de código HTML y 9 de CSS!)
![Page 112: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/112.jpg)
JavascriptProgramación en cliente
![Page 113: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/113.jpg)
> 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
![Page 114: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/114.jpg)
> 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.
![Page 115: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/115.jpg)
> CoffeeScript
var i, j;
for (i = j = 0; j <= 10; i = ++j) { alert(i);}
coffeescript.org
alert i for i in [0..10]
![Page 116: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/116.jpg)
También tenemos fragmentación...
=
![Page 117: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/117.jpg)
Estándar ECMAScript
ES5 ES6 ES7JUN/2015DIC/2009 En progreso
kangax.github.io/compat-table/es6
![Page 118: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/118.jpg)
> babelconst PI = 3.14let func = e => console.log(e)func(5)func(`El valor de PI es ${PI}.`)
babeljs.io
"use strict"var PI = 3.14var func = function(e) { return console.log(e) }func(5)func("El valor de PI es " + PI + ".")
![Page 119: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/119.jpg)
> 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});
![Page 120: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/120.jpg)
> Rendimiento
codepen.io/manz/pen/JdEXKW
![Page 121: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/121.jpg)
youmightnotneedjquery.com
$('#users li')
document.querySelectorAll('#users li')
![Page 122: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/122.jpg)
DatosFormatos ligeros
![Page 123: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/123.jpg)
> 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>
![Page 124: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/124.jpg)
> 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
![Page 126: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/126.jpg)
> YAML
yaml.org
--- array: [1, 2, 3, 4, 5] booleano: true objeto: a: 4 b: 'Texto' c: null
![Page 127: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/127.jpg)
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
![Page 128: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/128.jpg)
JSON
0,09KB0,1KB0,3KB
![Page 129: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/129.jpg)
¡Quiero algo más cómodo!¡Pero todo esto es mucho trabajo!
![Page 130: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/130.jpg)
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
![Page 131: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/131.jpg)
EditoresProgramas flexibles
![Page 134: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/134.jpg)
> Sublime > Atom > Brackets
brackets.ioatom.iosublimetext.com
![Page 135: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/135.jpg)
Task RunnersProgramadores de tareas
![Page 136: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/136.jpg)
> Grunt > Gulp > Broccoli
broccolijs.comgulpjs.comgruntjs.com
![Page 140: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/140.jpg)
> 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 gulpnpm install --save-dev gulp gulp-minify-css gulp-autoprefixer gulp-rename
> gulp
![Page 141: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/141.jpg)
> 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...)
![Page 142: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/142.jpg)
> ¿Mucha información?
![Page 143: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/143.jpg)
bit.ly/aprendehtml5bit.ly/aprendecss3
> Cursos de CSS3 y HTML5
![Page 144: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/144.jpg)
Próximamente
> Curso de Javascript
![Page 145: Front-end: Diseñar webs rápidas, flexibles y potentes](https://reader034.vdocuments.net/reader034/viewer/2022042511/55c8012bbb61eb610d8b4608/html5/thumbnails/145.jpg)
> ¡Gracias!