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/
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.
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 MultimediaGeolocalización
Vibración
59. La web debe ser rápida
...para los usuarios
...para los buscadores
60. > emezeta.com
DNS ConexiónSSL Subida Espera Descarga
Dominio Alojamiento Contenido
html
Redirección
Backend ¿Depende
del usuario?
Se puede optimizar
64. > Pingdom Tools
> Google PageSpeed
> Web Page Test
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
http://www.webpagetest.org/
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
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
});