Charla en UBA FrontEnd Engineering

“HTML5, CSS3 y JavaScript”
MercadoLibre.com – Julio 2010

Julio de 2010

Agenda

• HTML5 Rápido

• Revisión

• Experimentos

• Ingeniería de Front End

• Pila de tecnologías

• Crossbrowsing

• Mejora Progresiva

• Reglas para optimizar

• Recursos

2

http://slides.html5rocks.com/

HT

3


Media Queries

http://www.w3.org/TR/css3-mediaqueries/

4

Media Queries

<link rel="stylesheet" type="text/css"
media="screen"
href="core.css" />

5

Media Queries

media="screen"
href="core.css" />

media="screen and (max-device-width: 480px)"
href="iphone.css" />

6

Media Queries

media="screen"
href="core.css" />

media="screen and (max-device-width: 480px)"
href="iphone.css" />

7


Experiments
8

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/

9

The Front End Engineers Playground

HT

10


HT
¿De que se trata?

11


HT
Peligro

12


HT
Adrenalina

13


HT
Aventura

14


"A long time ago, in a galaxy far far away"

15


¿Frontend Engineer?

16


• “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.”

17


• “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.”

18


Los responsables del -view source-

19

Pila de tecnologías

20


• Device x plataform x tech x api
• Touch screen, Motion capture, Acelerometer
• Demand of a better experience

21


+ la transferencia
de datos

Frontend vs Backend

• No compila
• No se puede confiar
• No se puede predecir
• No se puede esconder!

24


25

“The most hostile software development
environment imaginable.”

Douglas Crockford
from Yahoo!

26


Si tu negocio es online... la diferenciación
depende de la ingeniería de frontend.

27

Crossbrowsing

"Web browsers should render
the same markup"
from IEBlog

http://blogs.msdn.com/b/ie/

28

Crossbrowsing

“Get your browsers close,
but your apis closer.”

29

Crossbrowsing

“Get your browsers close,
but your apis closer.”

Vito Corleone
30

Crossbrowsing

• Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/

• A- Grade
• C- Grade
• X- Grade
• Browser detection
•

31

Crossbrowsing


• A- Grade
• C- Grade
• X- Grade
• Browser detection Feature Detection
•

32

Crossbrowsing
Browser Detection Snippet
if((userAgent.indexOf('webtv') < 0) &&
(userAgent.indexOf('hotjava') < 0)){
• A- Grade
if(userAgent.indexOf('Opera') >= 0){
var ind = (userAgent.indexOf('Opera')+6);
• C- Grade
if(((ind+1) < userAgent.length)&&(ind >= 6)){
•isOpera = true;
X- Grade
var bsVersion =
parseInt(userAgent.substring(ind, ind+1));
• if(!isNaN(bsVersion)){
operaVersion = bsVersion;
if(operaVersion >= 6){
isOpera6p = true;

}else if(operaVersion >= 5){
isOpera5 = true;
}
}
}
}else if(appName.indexOf('Microsoft Internet
Explorer') >= 0){ 33

Crossbrowsing
Browser Detection Snippet
if((userAgent.indexOf('webtv') < 0) &&

NO
(userAgent.indexOf('hotjava') < 0)){
• A- Grade
if(userAgent.indexOf('Opera') >= 0){
var ind = (userAgent.indexOf('Opera')+6);
• C- Grade
if(((ind+1) < userAgent.length)&&(ind >= 6)){
•isOpera = true;
X- Grade
var bsVersion =
parseInt(userAgent.substring(ind, ind+1));
• if(!isNaN(bsVersion)){
operaVersion = bsVersion;
if(operaVersion >= 6){
isOpera6p = true;

}else if(operaVersion >= 5){
isOpera5 = true;
}
}
}
}else if(appName.indexOf('Microsoft Internet
Explorer') >= 0){ 34

Crossbrowsing
Feature Detection Snippet
• A- Grade
if (document.addEventListener) {
...
• C- Grade
} else if (document.attachEvent) {
...
} • X- Grade
•
if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position
) {

var lat = position.coords.latitude;
var lng = position.coords.longitude;
var options = { position: new google.maps.LatLng(lat,
lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
} 35

Crossbrowsing


• A- Grade
• C- Grade
• X- Grade
• Support !== Identical Design

36

Crossbrowsing


• A- Grade
• C- Grade

CrossDevice
• X- Grade
• Suppor !== Identical Design

37


38
Progressive Enhancement


• Concepto

39


Funcionalidad principal solo con HTML

• El contenido es lo principal
• + mejoras con CSS
• + mejoras con JavaScript

40

Optimización

41

Optimización

42

Optimización

¿Porque necesitamos
optimizar? 43


¿Porque necesitamos
optimizar? 44

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.

http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ 45

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

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

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

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

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

• 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

Optimización

Por sobre todo...

49

Optimización

¡No rompas la web!

<a href=”#”>
<a href=”javascript:alert();”>
<div onclick=”dosomething();”>

50

Optimización

Herramientas para optimizar

• http://developer.yahoo.com/yslow/
• http://code.google.com/intl/es-ES/speed/page-speed/

51

Recursos

• http://www.html5rocks.com/
• http://html5readiness.com/
• http://www.focus.com/images/view/11905/
• http://diveintohtml5.org/
• http://www.modernizr.com/
• http://code.google.com/p/html5shiv/

52

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/

• Microbia III, Crustaceapods http://www.flickr.com/photos/
connett/2948230658/
• The Godfather by Kurre
• Peanuts illustration by Dave Stuart

53


54


Gracias!
55

Charla en UBA FrontEnd Engineering

Charla en UBA FrontEnd Engineering

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Charla en UBA FrontEnd Engineering

Notes de l'éditeur