Cómo crear estrategias de reserva efectivas

Los usuarios pueden explorar la Web con una variedad de exploradores web conocidos y sofisticados, cada uno con enfoques de desarrollo y estrategias de lanzamiento únicas. Como consecuencia, es probable que los sitios web sean visitados con exploradores que no son compatibles con el mismo conjunto de estándares o características. Por ende, es prudente crear estrategias de reserva para exploradores web que no son totalmente compatibles con las técnicas basadas en estándares. (Una estrategia de reserva es un enfoque alternativo que debe usarse si el enfoque basado en estándares preferente no es compatible).En este artículo se muestra cómo crear estrategias eficaces que permiten que las páginas web se muestren correctamente cuando se ven con exploradores web que no admiten características definidas por estándares estables aceptados ampliamente.

Reserva de elemento HTML

Es posible que estés familiarizado con la reserva de elemento HTML, que permite especificar lo que sucede si una determinada tecnología no es compatible. En el siguiente ejemplo, se usa la reserva de objeto para mostrar una imagen tradicional cuando Scalable Vector Graphics (SVG) no es compatible.


<object data="vectorPanda.svg" type="image/svg+xml">
   <img src="pandaFallbackImage.png">
</object>


Al crear páginas web que incluyen elementos HTML que posiblemente no sean compatibles con los exploradores en los que se ven esas páginas web, ten cuidado de definir correctamente estrategias de reserva, aunque la estrategia de reserva sea mostrar un mensaje en el que se indique que usando otro explorador web la experiencia será más enriquecedora, como se muestra en el siguiente ejemplo.


   <audio id="myAudio" src="audiofile.wav">
      The audio element is not supported by your browser.
   </audio>

En este ejemplo, se muestra un mensaje para exploradores que no son compatibles con el elemento audio. Es una estrategia de reserva simple que proporciona información que el usuario puede usar para determinar el siguiente curso de acción.

Reserva de JavaScript

Cuando crees estrategias de reserva con JavaScript, usa la detección de características para probar los enfoques preferidos frente a los más limitados, como se muestra en la siguiente muestra de código.


function registerEvent( sTargetID, sEventName, fnHandler ) 
{
   var oTarget = document.getElementById( sTargetID );
   if ( oTarget != null ) 
   {
      if ( oTarget.addEventListener ) {   
         oTarget.addEventListener( sEventName, fnToBeRun, false );
      } else {
        var sOnEvent = "on" + sEventName; 
        if ( oTarget.attachEvent ) 
        {
           oTarget.attachEvent( sOnEvent, fnHandler );
        }
      }
   }
}

En este ejemplo, se muestra una función que usa la detección de características para registrar eventos de una página web y se analiza más detalladamente en Cómo detectar características en lugar de exploradores. Usa la alternativa basada en estándares preferente en vez de una alternativa propietaria. Este enfoque significa que la característica funciona en exploradores modernos que son compatibles con la norma Document Object Model (DOM) de eventos de nivel 3 y con otras versiones de Windows Internet Explorer que no son compatibles con la norma. En esta versión del ejemplo se agrega compatibilidad para otros exploradores web que no entran en ninguna de las otras categorías.

Cuando crees estrategias de reserva de JavaScript, diseña primero la solución basada en estándares y después ofrece compatibilidad para otros exploradores. Esto ayuda a garantizar que tus páginas web se comportarán como quieres en gran medida y reduce el impacto negativo en exploradores más antiguos o no tradicionales.

Reserva de Hojas de estilo CSS

Debes usar también estrategias de reserva cuando crees reglas de CSS, especialmente cuando uses propiedades CSS quizás aún no tengan una amplia difusión. Para crear estrategias de reserva de CSS efectivas, define las reglas de reserva antes de definir la regla preferente.

Por ejemplo, la especificación CSS define la propiedad opacity para controlar la transparencia de los objetos mostrados en una página web. Como Windows Internet Explorer 9 admite la propiedad opacity, puedes usarla para controlar el aspecto de un elemento div, tal y como se presenta en la muestra de código siguiente.


  #css3filter {      
    opacity: 0.5;
  }

En este ejemplo, los objetos con un valor de atributo id de #css3filter se muestran con un 50% de transparencia. Este ejemplo funciona en Internet Explorer 9 y otros exploradores modernos. No obstante, para controlar la transparencia en versiones anteriores de Internet Explorer, necesitas usar el filtro alpha, tal y como se presenta en la muestra de código siguiente.


  #alphafilter {      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
  }

Para crear una estrategia de reserva de CSS, combina los ejemplos anteriores tal y como se muestra en la muestra de código siguiente.


  #combined {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    opacity: 0.5;
  }

En este ejemplo, se usan varias reglas para especificar la opacidad de un objeto determinado. El enfoque menos deseado, un comportamiento originalmente compatible con Microsoft Internet Explorer 5.5, garantiza que la opacidad se mostrará cuando una página web se vea en versiones anteriores de Internet Explorer. Si la página web que contiene la regla se muestra en un explorador web que es compatible con la norma de Hojas de estilo CSS de nivel 3 (CSS3), usará la propiedad opacity para mostrar la página e ignorar la regla que contiene el filtro alpha.

 

 

Mostrar:
© 2014 Microsoft