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