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

1. una web más buenas prácticas Alejandro Hidalgo Fernández MVP Internet Explorer. Development Advisor, Plain Concepts

2. !Un aplauso para vosotros!

3. Objetivo Mejorar tus desarrollos web para adaptarlos a los cambios constantes de la propia web.

4. ¿Qué vamos a ver?

5. SAME MARKUP Experiencia multinavegador

6. ¿En qué consiste? • El mismo HTML, CSS y JavaScripttienen el mismo comportamiento en todos los navegadores. • Basado en estándares • Los navegadores antiguos pueden necesitar código extra para emular este comportamiento.

7. Diferentes interpretaciones de los estándares

8. 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.

9. Categorizar las capacidades

10. Detección del NAVEGADOR Experiencia multinavegador

11. Técnicas de detección // User Agents navigator.userAgent // Comentarioscondicionales <!--[if IE]><![endif]--> // Objetosúnicos if(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 */

12. Condicionales en CSS IE Cualquier versión de IE ltIE X Inferiores a X lteIE X Inferiores o iguales a X IE X Solo para la version X gteIE X Superiores o iguales a X gtIE X Superiores a X

13. Con jQuery if( jQuery.browser.msie ) { Códigoespecífico } jQuery.browser.version webkit safari opera msiemozilla

14. Interacciones con los navegadores Resultado en el navegador Estructura de código = Código alternativo = Punto de comprobación

15. Interacciones con los navegadores Resultado en el navegador Estructura de código = Código alternativo = Punto de comprobación

16. 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.

17. ¿En qué nos afecta? • Debes actualizar tu sitio constantemente. • Muchos navegadores • IE, Firefox, Chrome, Safari, Opera, more… • Muchas versiones • Alto coste de tiempo.

18. Detección del navegador DEMO

19. detección de capacidades Experiencia multinavegador

20. ¿En qué consiste? 1. Compruebosisoporta la capacidad 2. Si esasíhagouso de ella 3. Si no usounasoluciónalternativa

21. A tener en cuenta Compruebosólo las capacidades usadas Primero los estándares Sólocompruebo una capacidad

22. Capacidadvs Navegador DEMO

23. Interacciones con los navegadores Comprobación de características Comprobación de navegador = Codigoalternativo = Punto de comprobación

24. Interacciones con los navegadores Detección de capacidades Detección del navegador = Códigoalternativo = Punto de comprobación

25. Interacciones con los navegadores Detección de capacidades Detección del navegador = Códigoalternativo = Punto de comprobación

26. Comprobación de capacidades en Markup <videosrc="test.video"> <objectsrc="test.video"> <ahref="test.video"> Descarga el video </a> </object> </video>

27. Detección de capacidades en CSS .target { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; }

28. 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

29. Cómo jQuery detecta getElementById varform = document.createElement("div"), id = "script" + (new Date).getTime(); form.innerHTML = "<a name='" + id + "'/>"; varroot = document.documentElement; root.insertBefore( form, root.firstChild ); if ( document.getElementById( id ) ) { …

30. Usando Modernizr // Comprobando HTML5 Canvas if(Modernizr.canvas) { varc = document.createElement('canvas'); varcontext = c.getContext('2d'); } // Comprobando formatos de HTML5 Video if (Modernizr.video && Modernizr.video.ogg){ // preloadogg video assets } elseif (Modernizr.video && Modernizr.video.h264){ // preload h264 assets }}

31. 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

32. A tener en cuenta Comprobar si una propiedad existe en un objeto global Geolocalización function supports_geolocation() { return!!navigator.geolocation; } Modernizr.geolocation

33. A tener en cuenta Crear un elemento y comprobar si existe una determinada propiedad Comprobar si una propiedad existe en un objeto global Canvas function supports_canvas() { return!!document.createElement('canvas').getContext; } Modernizr.canvas

34. A tener en cuenta Crear un elemento y comprobar si cierto método existe y cual es el valor devuelto Crear un elemento y comprobar si existe una determinada propiedad Formatos de HTML5 Video function supports_ogg_theora_video() { if(!supports_video()) { return false; } varv = document.createElement("video"); returnv.canPlayType('video/ogg; codecs="theora, vorbis"'); }

35. A tener en cuenta Crear un elemento y ponerle cierto valor a una propiedad, luego comprobar si retiene ese valor Crear un elemento y comprobar si cierto método existe y cual es el valor devuelto Tipos Input var i = document.createElement("input"); i.setAttribute("type", "date"); return i.type !== "text"; !Modernizr.inputtypes.date

36. Detección de capacidades DEMO

37. Por qué no funciona en vez de en Dónde no funciona CONSEJO

38. En resumen

39. www.beautyoftheweb.com empieza con descarga IE9 adaptatussitios web msdn.com/ie http://ietestdrive.com http://geeks.ms/blogs/intensificatuexplorer/

40. ahidalgo@plainconcepts.com Gracias a todos.