9. Experimentos
• Google http://mrdoob.com/projects/chromeexperiments/
google_gravity/
• Mario Kart http://www.nihilogic.dk/labs/mariokart/
• Trail http://www.hakim.se/experiments/html5/trail/03/
• Bakemono http://www.hakim.se/experiments/html5/
bakemono/01/
• Ball Pool http://mrdoob.com/projects/chromeexperiments/
ball_pool/
• Canvas Experiment http://9elements.com/io/projects/html5/
canvas/
MercadoLibre.com – Julio 2010
9
10. The Front End Engineers Playground
HT
MercadoLibre.com – Julio 2010
10
11. The Front End Engineers Playground
HT
¿De que se trata?
MercadoLibre.com – Julio 2010
11
12. The Front End Engineers Playground
HT
Peligro
MercadoLibre.com – Julio 2010
12
13. The Front End Engineers Playground
HT
Adrenalina
MercadoLibre.com – Julio 2010
13
14. The Front End Engineers Playground
HT
Aventura
MercadoLibre.com – Julio 2010
14
15. The Front End Engineers Playground
"A long time ago, in a galaxy far far away"
MercadoLibre.com – Julio 2010
15
16. The Front End Engineers Playground
¿Frontend Engineer?
MercadoLibre.com – Julio 2010
16
17. ¿Frontend Engineer?
• “Frontend engineers focused at the
intersection of design and development is a
best practice.”
• “We write software in JavaScript, CSS and
HTML, & more...”
• “We tell browsers what to do.”
• “We’re responsible for view source.”
MercadoLibre.com – Julio 2010
17
18. ¿Frontend Engineer?
• “Frontend engineers focused at the
intersection of design and development is a
best practice.”
• “We write software in JavaScript, CSS and
Nate Koechley
HTML, & more...”
http://video.yahoo.com/watch/4671445/12486762
• “We tell browsers what to do.”
Professional Frontend Engineering
• “We’re responsible for view source.”
MercadoLibre.com – Julio 2010
18
19. ¿Frontend Engineer?
Los responsables del -view source-
MercadoLibre.com – Julio 2010
19
21. Pila de tecnologías
• Device x plataform x tech x api
• Touch screen, Motion capture, Acelerometer
• Demand of a better experience
MercadoLibre.com – Julio 2010
21
40. Progressive Enhancement
Funcionalidad principal solo con HTML
• El contenido es lo principal
• + mejoras con CSS
• + mejoras con JavaScript
MercadoLibre.com – Julio 2010
40
45. Optimización
From Velocity 2009
• The major search engines measured how much
web site slowdowns hurt their business
metrics:
• Bing -2 seconds slower = 4.3% drop in revenue/user.
• Google 400 millisecond delay = 0.59% drop in searches/user.
• Yahoo! 400 milliseconds slowdown = 5-9% drop in full-page
traffic.
MercadoLibre.com – Julio 2010
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ 45
46. Optimización
From Velocity 2009
• On the faster side, companies from a variety of
vertical markets had praise for the benefits
gained from improving performance:
• Shopzilla – Speeding up their site by 5 seconds increased the
conversion rate 7-12%, doubled the number of sessions from
search engine marketing, and cut the number of required
servers in half.
• Mozilla – Shaving 2.2 seconds off their landing pages increased
MercadoLibre.com – Julio 2010
download conversions by 15.4%, which they estimate will
result in 60 million more Firefox downloads per year.
• Netflix – Adopting a single optimization, gzip compression,
resulted in a 13-25% speedup and cut their outbound network
traffic by 50%.
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ 46
47. Optimización
Reglas para optimizar
• Evita el DNS Lookup y cualquier tipo de re-dirección.
• Reduce la cantidad de peticiones al servidor al mínimo.
• Utiliza dominios que no transmitan cookies en sus cabeceras.
• Utiliza nombres de dominios amigables en especial para recursos
estáticos como imágenes.
• Enlaza las hojas de estilo en el <head> y los scripts al fondo de
la página.
• Utiliza compresión GZip y un control de caché para los recursos.
• No mezcles código HTML con CSS o con JavaScript, separalo en
MercadoLibre.com – Julio 2010
distintos capas.
• Reduce la cantidad de elementos y accesos al DOM.
• No cambies el tamaño de las imágenes con HTML.
• ¡Utilizar CDN!
47
48. Optimización
Reglas para optimizar
• Especifica siempre un doctype! <!doctype html>
• Valida tu código generado contra la w3c
• Utiliza la menor cantidad de elementos HTML
• Hacé valer la semántica
• Puedes obviar cerrar algunos elementos <br> <img> <input>
• Todos los atributos en minúsculas con comillas dobles
• Ninguna declaración CSS en tags
• Ninguna declaración JS en tags
MercadoLibre.com – Julio 2010
• Separa el CSS en capas, typo, layout, color, reset...
• Utiliza un mismo criterio para la nomenclatura de clases
• Saca provecho de la cascada
• Especifica solo cuando es necesario
• Ordena alfabéticamente las propiedades
• Utiliza sprites para los UI assets 48
49. Optimización
Por sobre todo...
MercadoLibre.com – Julio 2010
49
50. Optimización
¡No rompas la web!
<a href=”#”>
<a href=”javascript:alert();”>
<div onclick=”dosomething();”>
MercadoLibre.com – Julio 2010
50
51. Optimización
Herramientas para optimizar
• http://developer.yahoo.com/yslow/
• http://code.google.com/intl/es-ES/speed/page-speed/
MercadoLibre.com – Julio 2010
51
53. Créditos
• Nate Koechley http://video.yahoo.com/watch/
4671445/12486762
• Victoria spinning http://www.flickr.com/photos/phitar/
400727610/
• ¡Arréglate Matungo! http://www.flickr.com/photos/bombeador/
3184725934/in/photostream/
• Urban zen http://www.flickr.com/photos/sigikolbe/
3795014021/
• Hippie Bus http://www.flickr.com/photos/alories/3378756332/
MercadoLibre.com – Julio 2010
• Microbia III, Crustaceapods http://www.flickr.com/photos/
connett/2948230658/
• The Godfather by Kurre
• Peanuts illustration by Dave Stuart
53