una web más Alejandro Hidalgo Fernández buenas prácticas 4/1/2017 6:51 PM una web más buenas prácticas Alejandro Hidalgo Fernández MVP Internet Explorer. Development Advisor, Plain Concepts © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

!Un aplauso para vosotros!

Muchos navegadores diferentes Muchas versiones diferentes Nuevas versiones constantemente Objetivo Mejorar 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

Experiencia multinavegador SAME MARKUP Experiencia 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 Estables Perecederas (Sólo si son necesarias) Nuevas (Cuidado con ellas)

Detección del NAVEGADOR Experiencia multinavegador

Técnicas de detección // User Agents navigator.userAgent // Comentarios condicionales <!--[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 */

Condicionales en CSS <!--[if IE]> // nuestro código para IE 4/1/2017 6:51 PM 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 <!--[if IE]> // nuestro código para IE <[endif]--> <!--[if IE lte 7]> // nuestro código para IE7 Condicionales en CSS © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

if( jQuery.browser.msie ) { Código específico } jQuery.browser.version Con jQuery if( jQuery.browser.msie ) { Código específico } jQuery.browser.version webkit safari opera msie mozilla

Interacciones con los navegadores Windows 7 | Presenter Mode Saturday, April 01, 2017 Interacciones con los navegadores Estructura de código Resultado en el navegador = Punto de comprobación = Código alternativo Microsoft Confidential

Interacciones con los navegadores Windows 7 | Presenter Mode Saturday, April 01, 2017 Interacciones con los navegadores Estructura de código Resultado en el navegador = Punto de comprobación = Código alternativo Microsoft Confidential

Tipos de problemas Un navegador añade una capacidad estándar 4/1/2017 6:51 PM 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. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Debes actualizar tu sitio constantemente. Muchos navegadores 4/1/2017 6:51 PM ¿En qué nos afecta? Debes actualizar tu sitio constantemente. Muchos navegadores IE, Firefox, Chrome, Safari, Opera, more… Muchas versiones Alto coste de tiempo. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Detección del navegador DEMO Detección del navegador

detección de capacidades Experiencia 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 Capacidad vs Navegador

Interacciones con los navegadores Windows 7 | Presenter Mode Saturday, April 01, 2017 Interacciones con los navegadores Comprobación de navegador Comprobación de características = Punto de comprobación = Codigo alternativo Microsoft Confidential

Interacciones con los navegadores Windows 7 | Presenter Mode Saturday, April 01, 2017 Interacciones con los navegadores Detección del navegador Detección de capacidades = Punto de comprobación = Código alternativo Microsoft Confidential

Interacciones con los navegadores Windows 7 | Presenter Mode Saturday, April 01, 2017 Interacciones con los navegadores Detección del navegador Detección de capacidades = Punto de comprobación = Código alternativo Microsoft Confidential

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; }

Detección de bugs // Crea un test para comprobar el bug var testPassed = runTest(); // Comprueba si el test ha pasado if(!testPassed) { // Si no, aplica un workaround }

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

Cómo jQuery detecta getElementById 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 ) ) { …

Usando Modernizr // Comprobando HTML5 Canvas if (Modernizr.canvas) { var c = document.createElement('canvas'); var context = c.getContext('2d'); } // Comprobando formatos de HTML5 Video if (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 Geolocalización Comprobar si una propiedad existe en un objeto global Geolocalización function supports_geolocation() { return !!navigator.geolocation; } Modernizr.geolocation

A tener en cuenta Canvas 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

A tener en cuenta Formatos de HTML5 Video 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; } var v = document.createElement("video"); return v.canPlayType('video/ogg; codecs="theora, vorbis"'); }

A tener en cuenta Tipos Input 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

Detección de capacidades DEMO Detección de capacidades

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

Detección de capacidades Detección del navegador En resumen Same Markup Detección de capacidades Buena Práctica Same Markup Detección del navegador Mala Práctica

www.beautyoftheweb.com msdn.com/ie empieza con descarga IE9 4/1/2017 6:51 PM www.beautyoftheweb.com empieza con descarga IE9 adapta tus sitios web msdn.com/ie http://ietestdrive.com http://geeks.ms/blogs/intensificatuexplorer/ © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

ahidalgo@plainconcepts.com Gracias a todos.