Post on 10-Aug-2015
Diseñar webs rápidas, flexibles y potentes
¿Qué idea tenemos de una web?
> emezeta.com
?> pero… ¿qué ocurre aquí?
¿Cómo funciona una web 茜por dentro穐?
> front-end
> front-end > back-end
> back-end> front-end
> back-end> servidores webApache, nginx, LiteSpeed...
> back-end> servidores webApache, nginx, LiteSpeed...
> bases de datosMySQL, PostgreSQL, MongoDB...
> back-end> servidores webApache, nginx, LiteSpeed...
> bases de datosMySQL, PostgreSQL, MongoDB...
> lenguajesPHP, NodeJS, Python, Ruby, Java...
Pero en esta ocasión vamos a hablar de front-end...
> front-end > Lenguaje HTMLEstructura y contenido web
> front-end > Lenguaje HTMLEstructura y contenido web
> Lenguaje CSSDiseño y aspecto visual
> front-end > Lenguaje HTMLEstructura y contenido web
> Lenguaje CSSDiseño y aspecto visual
> Lenguaje JSProgramación web en front-end
Antes de empezar, varios detalles...
> Hay 3 formas de hacer una web
> Hay 3 formas de hacer una web
Llamar al que sabe
> Hay 3 formas de hacer una web
Pagar al que sabe
> Hay 3 formas de hacer una web
Hacer que Chuck Norris se sienta orgulloso de nosotros
Canary ChromeFirefox Dev Opera Dev
> Chrome Dev Tools[CTRL+SHIFT+I]
> Aprende a a la terminal
¿Cuál es la peor pesadilla de un diseñador/desarrollador web?
¿Cuál es la peor pesadilla de un diseñador/desarrollador web?
(A parte de Internet Explorer)
> ¿Consumo de RAM? [SHIFT+ESC]
Bueno, podría... pero no...
> Fragmentación web
En un navegador se ve genial, pero cuando intentamos verlo en otro...
> Fragmentación web
> Fragmentación web
> CanIUse.com
HTML TEST.COM
CSS TEST.COM
> DoIUse.com
> objetivos > RápidaDebe cargar lo más rápido posible.
> objetivos > RápidaDebe cargar lo más rápido posible.
> FlexibleDebe ser fácil de mantener.
> objetivos > RápidaDebe cargar lo más rápido posible.
> FlexibleDebe ser fácil de mantener.
> Potente y eficienteUsar los recursos a tu alcance.
HTML5Estructura y contenido
> 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
> HTML5
> Minificación de códigoObjetivo: Reducir el peso del archivo.
Minify, Uglify (minificadores)Prettify, Beautify (desminificadores)
> 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
> 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)
> 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
> 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>
> 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
> HAML > JADE > Slim
slim-lang.comjade-lang.comhaml.info
> 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
> 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
> 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.
> APIS de HTML5
WebStorage
API MultimediaGeolocalización
Vibración
michelacosta.com
> APIS de HTML5
La web debe ser rápida
...para los usuarios...para los buscadores
> emezeta.com
DNS ConexiónSSL Subida Espera Descarga
Dominio Alojamiento Contenido
html
Redirección
Backend ¿Dependedel usuario? Se puede optimizar
> Velocidad
> Fuente: Google Analytics
DominioConexiónRedirecciónRespuestaDescargaTotalRestante
0,02s0,10s0,24s0,30s0,15s5,69s4,88s
Dom
inio
Aloj
amie
nto
Web
CSS
html
PNG
PNG
JPG
JPG
JS
> esto ocurre por cada recurso de la web
al principio
al final
> Chrome Dev Tools
> Pingdom Tools
> Google PageSpeed
> Web Page Test
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
http://www.webpagetest.org/
> Reducir número de peticiones
zerosprites.com
> Reducir número de peticiones
spritecow.com
> Reutilizar peticiones
cdnjs.com jsdelivr.com
caché
> Tipo datos
> Fuente: http://httparchive.org/
ImágenesScriptsVideosFuentesCSSHTML
1332KB337KB227KB100KB
64KB54KB
> Imágenes
> Fuente: http://httparchive.org/
JPGPNGGIFOtrosWebP
46%29%23%
2%~1%
> Fuentes
> Fuente: http://httparchive.org/
FuentesSin fuentes
53%47%
¿Hay otra forma de reducir peticiones?
> WebFont
PNG A B C
> WebFonts
> No pierden resolución al ampliar/reducir
> Son fuentes, puedes tratarlas con CSS
> 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
> ¿Solución?
> ¿Solución?
> Reducir tiempo de descarga
Reducir tamaño
¿¿Cómo??
> Utilizar compresión HTTP (GZip)
GZip? GZip?
15KB
85KBhtml
GZip!85KB
html
> 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
> npm install -g imagemin
gifsicle@3.0.1 postinstall √ gifsicle pre-build test passed successfullyjpegtran-bin@3.0.2 postinstall √ jpegtran pre-build test passed successfullyoptipng-bin@3.0.2 postinstall √ optipng pre-build test passed successfullyimagemin@3.2.0├── get-stdin@4.0.1├── path-exists@1.0.0├── optional@0.1.3...
> Optimización de imágenes
> 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
> 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
CSS3Diseño y apariencia
> 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
> CSS3
#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
#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
#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
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
> CSS es muy potente
http://i.imgur.com/47xkq4v.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
> 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...)
> EMMETanimps:r
bit.ly/emmetcheat
animation-play-state: running;|
TAB TABmr
margin-right: |;
TAB
margin-right: 5px;|
mr:5
> LESS > SASS > Stylus
bit.ly/styluscsssass-lang.comlesscss.org
> 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
> 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)
> 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
> 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
> 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>
> Inkscape
2,1KB
> 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
> 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;}
> SVG+CSS
codepen.io/manz/pen/OVQLbG
(¡con apenas 4 líneas de código HTML y 9 de CSS!)
JavascriptProgramación en cliente
> 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
> 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.
> CoffeeScript
var i, j;
for (i = j = 0; j <= 10; i = ++j) { alert(i);}
coffeescript.org
alert i for i in [0..10]
También tenemos fragmentación...
=
Estándar ECMAScript
ES5 ES6 ES7JUN/2015DIC/2009 En progreso
kangax.github.io/compat-table/es6
> 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 + ".")
> 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});
> Rendimiento
codepen.io/manz/pen/JdEXKW
youmightnotneedjquery.com
$('#users li')
document.querySelectorAll('#users li')
DatosFormatos ligeros
> 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>
> 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
> YAML
yaml.org
--- array: [1, 2, 3, 4, 5] booleano: true objeto: a: 4 b: 'Texto' c: null
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
JSON
0,09KB0,1KB0,3KB
¡Quiero algo más cómodo!¡Pero todo esto es mucho trabajo!
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
EditoresProgramas flexibles
> Sublime > Atom > Brackets
brackets.ioatom.iosublimetext.com
Task RunnersProgramadores de tareas
> Grunt > Gulp > Broccoli
broccolijs.comgulpjs.comgruntjs.com
> 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
> 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...)
> ¿Mucha información?
bit.ly/aprendehtml5bit.ly/aprendecss3
> Cursos de CSS3 y HTML5
Próximamente
> Curso de Javascript
> ¡Gracias!