Alejandro Hidalgo FernándezMVP Internet Explorer.Development Advisor, Plain Concepts

una web másbuenas prácticas

!Un aplauso para vosotros!

Muchos navegadores

diferentes

Muchas versiones diferentes

Nuevas versiones

constantemente

ObjetivoMejorar tus desarrollos web para adaptarlos a los cambios constantes de la propia web.

¿Qué vamos a ver?

Same Markup

Detección del navegador

Detección de capacidades

SAME MARKUPExperiencia multinavegador

¿En qué consiste?• El mismo HTML, CSS y JavaScript tienen

el mismo comportamiento en todos los navegadores.

• Basado en estándares

• Los navegadores antiguos pueden necesitar código extra para emular este comportamiento.

Diferentes interpretaciones de los estándares

Validando nuestro markup

• Importancia para Multinavegador

• Importancia del SEO

• No es oro todo lo que reluce. No implica ser malos si no se pasa en verde el validador.

• Importancia de validar el código estático.

Categorizar las capacidades

EstablesPerecederas (Sólo si son necesarias)Nuevas (Cuidado con ellas)

Detección del NAVEGADORExperiencia multinavegador

Técnicas de detección// User Agentsnavigator.userAgent

// Comentarios condicionales<!--[if IE]><![endif]-->

// Objetos únicosif(document.all) …if(window.attachEvent) …if(window.ActiveXObject) …

// Comportamientos únicos(CSS Hacks, etc.)background: #FFFFFF /* Firefox y los demás */ *background: #000000 /* IE7 e inferiores */ _background: #CCCCCC; /* Sólo IE6 */

<!--[if IE]>

// nuestro código para IE

<[endif]-->

<!--[if IE lte 7]>

// nuestro código para IE7

<[endif]-->

IE Cualquier versión

de IE

lt IE X Inferiores a X

lte IE X Inferiores o iguales

a X

IE X Solo para la version

X

gte IE X Superiores o iguales

a X

gt IE X Superiores a X

Condicionales en CSS

Con jQuery

if( jQuery.browser.msie ){

Código específico}jQuery.browser.version

webkit safari opera msie mozilla

Interacciones con los navegadores

= Punto de comprobación = Código alternativo

Estructura de código Resultado en el navegador

Interacciones con los navegadores

= Punto de comprobación = Código alternativo

Estructura de código Resultado en el navegador

Tipos de problemas• Un navegador añade una capacidad

estándar• Ejemplo. Usar SVG o VML

• Un navegador elimina una capacidad perecedera• Ejemplo. -moz-opacity

• Un navegador corrige un bug que yo había parcheado.

¿En qué nos afecta?• Debes actualizar tu sitio

constantemente.

• Muchos navegadores• IE, Firefox, Chrome, Safari, Opera, more…• Muchas versiones

• Alto coste de tiempo.

Detección del navegador

DEMO

detección de capacidadesExperiencia

multinavegador

¿En qué consiste?

1. Compruebo si soporta la capacidad

2. Si es así hago uso de ella

3. Si no uso una solución alternativa

A tener en cuenta

Compruebo sólo las capacidades usadas

Primero los estándares

Sólo compruebo una capacidad

Capacidad vs Navegador

DEMO

= Punto de comprobación = Codigo alternativo

Comprobación de característicasComprobación de navegador

Interacciones con los navegadores

= Punto de comprobación = Código alternativo

Detección de capacidadesDetección del navegador

Interacciones con los navegadores

= Punto de comprobación = Código alternativo

Detección de capacidadesDetección del navegador

Interacciones con los navegadores

Comprobación de capacidades en Markup

<video src="test.video"><object src="test.video"><a href="test.video">Descarga el video</a></object></video>

Detección de capacidades en CSS.target{

border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;

}

Si no tienes tiempo

• Detección del navegador es más rápido.

• Usa un Framework• jQuery – http://jquery.com/ • Modernizr – http://www.modernizr.com• ie7-js - http://code.google.com/p/ie7-js/ • HTML5 Cross Browser Polyfills - http://

bit.ly/ddLS2d

• Los Frameworks nos son perfectos

var form = document.createElement("div"),id = "script" + (new Date).getTime();form.innerHTML = "<a name='" + id + "'/>";

var root = document.documentElement;root.insertBefore( form, root.firstChild );

if ( document.getElementById( id ) ) {…

Cómo jQuery detecta getElementById

Usando Modernizr// Comprobando HTML5 Canvasif (Modernizr.canvas) { var c = document.createElement('canvas'); var context = c.getContext('2d');}

// Comprobando formatos de HTML5 Videoif (Modernizr.video && Modernizr.video.ogg){ // preload ogg video assets } else if (Modernizr.video && Modernizr.video.h264){

// preload h264 assets }}

A tener en cuenta

Comprobar si una propiedad existe en un objeto global

Crear un elemento y comprobar si existe una determinada propiedad

Crear un elemento y comprobar si cierto método existe y cual es el valor devuelto

Crear un elemento y ponerle cierto valor a una propiedad, luego comprobar si retiene ese valor

A tener en cuenta

Comprobar si una propiedad existe en un objeto global

Geolocalizaciónfunction supports_geolocation() {

return !!navigator.geolocation;

}

Modernizr.geolocation

A tener en cuenta

Comprobar si una propiedad existe en un objeto global

Canvasfunction supports_canvas() {

return !!document.createElement('canvas').getContext;

}

Modernizr.canvas

Crear un elemento y comprobar si existe una determinada propiedad

Crear un elemento y comprobar si existe una determinada propiedad

Crear un elemento y comprobar si cierto método existe y cual es el valor devuelto

A tener en cuenta

Formatos de HTML5 Videofunction supports_ogg_theora_video() {

if (!supports_video()) { return false; }

var v = document.createElement("video");

return v.canPlayType('video/ogg; codecs="theora, vorbis"'); }

Crear un elemento y comprobar si cierto método existe y cual es el valor devuelto

Crear un elemento y ponerle cierto valor a una propiedad, luego comprobar si retiene ese valor

A tener en cuenta

Tipos Inputvar i = document.createElement("input");

i.setAttribute("type", "date");

return i.type !== "text";

!Modernizr.inputtypes.date

Detección de capacidades

DEMO

Por qué no funciona

en vez de en

Dónde no funciona

CONSEJO

Same Markup

Detección de capacidades

Buena Práctic

a

Same Markup

Detección del navegador

Mala Práctic

a

En resumen

msdn.com/ie http://ietestdrive.com

http://geeks.ms/blogs/intensificatuexplorer/

empieza conwww.beautyoftheweb.com

descarga IE9adapta tus sitios web

ahidalgo@plainconcepts.com

Gracias a todos.