una web más Alejandro Hidalgo Fernández buenas prácticas

Presentación del tema: "una web más Alejandro Hidalgo Fernández buenas prácticas"— Transcripción de la presentación:

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

2 !Un aplauso para vosotros!

3 Muchos navegadores diferentes
Muchas versiones diferentes Nuevas versiones constantemente Objetivo Mejorar tus desarrollos web para adaptarlos a los cambios constantes de la propia web.

4 ¿Qué vamos a ver? Same Markup Detección del navegador Detección de capacidades

5 Experiencia multinavegador
SAME MARKUP Experiencia multinavegador

6 ¿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.

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

10 Detección del NAVEGADOR
Experiencia multinavegador

11 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: # /* IE7 e inferiores */ _background: #CCCCCC; /* Sólo IE6 */

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

13 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

14 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

15 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

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

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

18 Detección del navegador
DEMO Detección del navegador

19 detección de capacidades
Experiencia multinavegador

20 ¿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

21 A tener en cuenta Compruebo sólo las capacidades usadas
Primero los estándares Sólo compruebo una capacidad

22 Capacidad vs Navegador
DEMO Capacidad vs Navegador

23 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

24 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

25 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

26 Comprobación de capacidades en Markup
<video src="test.video"> <object src="test.video"> <a href="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 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 }

29 Si no tienes tiempo Detección del navegador es más rápido.
Usa un Framework jQuery – Modernizr – ie7-js - HTML5 Cross Browser Polyfills - Los Frameworks nos son perfectos

30 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 ) ) { …

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

32 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

33 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

34 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

35 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"'); }

36 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

37 Detección de capacidades
DEMO Detección de capacidades

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

39 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

40 www.beautyoftheweb.com msdn.com/ie empieza con descarga IE9
4/1/2017 6:51 PM empieza con descarga IE9 adapta tus sitios web msdn.com/ie © 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.

41 Gracias a todos.