html - quimico - prueba de alcohol en leches norma

Desbordamiento del navegador... Cómo garantizar el navegador cruzado, las pruebas de plataforma cruzada y la compatibilidad

Question

Mi equipo está trabajando en un nuevo sitio que debe ser compatible con varios navegadores (IE 8+, Chrome, Safari, Firefox, Opera) y compatible con plataformas cruzadas (escritorio, tableta, teléfono inteligente).

Hemos estado analizando muchas de las nuevas metodologías para lograr esto, como HTML 5, diseño receptivo, utilizando bibliotecas JS que abstraen mucho del desorden del navegador lejos del usuario pero desde los navegadores e incluso MVVM, pero el principal El problema al que me he enfrentado es qué tan rápido cambian los navegadores. Con Chrome y Firefox utilizando un modelo de entrega continua, cada vez es más difícil de probar. Y desde el punto de vista de esto, otros sitios tienen el mismo problema (parece que hoy en día no se sabe si un sitio funcionará en un navegador en particular).

• ¿Qué sugerencias tienen usted o su equipo para probar nuevos navegadores a medida que salen?
• ¿Qué cosas haces durante el desarrollo para disminuir la posibilidad de romper el código cuando sale una actualización del navegador?
• ¿Y cómo decide cuándo retirará soporte para una versión de navegador?

Answer 1

¿Qué sugerencias tienen usted o su equipo para probar nuevos navegadores a medida que salen?

Como parte de nuestra definición de hecho , admitimos los siguientes navegadores de escritorio:

• IE8 +
• Firefox 3.6
• Firefox (último)
• Chrome (último)
• Safari 6

El soporte de las últimas versiones de Firefox / Chrome está bien porque ambos proporcionan actualizaciones automáticas, por lo que si alguien tiene un problema con una versión anterior del navegador, está fuera de nuestras manos y deberían actualizarse.

La mayoría de las pruebas de Firefox / Chrome se pueden realizar en nuestras máquinas, pero obviamente existen discrepancias con la forma en que manejan las diferentes fuentes del sistema operativo y algunas peculiaridades con elementos de formulario nativos que pueden o no transferirse a versiones en Windows.

Para probar las versiones de Firefox en OS XI, utilizo el script " Instalar todos los Firefox " que creé, para permitirme ejecutar varias versiones de Firefox una al lado de la otra.

Nuestro equipo de desarrollo usa Ubuntu y Mac OS como sus entornos, por lo que tenemos una máquina dedicada con máquinas virtuales para cada versión de IE, y Chrome / Firefox en Windows y Safari 6 en OS X.

Estas máquinas virtuales se configuraron utilizando las imágenes proporcionadas por modern.ie . Estamos accediendo remotamente a la máquina con las máquinas virtuales activadas para que no tengamos que interrumpir nuestro flujo de trabajo e ir a otra máquina.

¿Qué cosas haces durante el desarrollo para disminuir la posibilidad de romper el código cuando sale una actualización del navegador?

Las cosas obvias son evitar los hackers de CSS y asegurarse de que el HTML / CSS / JavaScript escrito cumpla con nuestros estándares de código y nuestra definición de hecho.

Si utilizamos funciones de CSS experimentales, nos aseguramos de proporcionar las definiciones de propiedades del prefijo de un proveedor y, por último, w3:

-moz-foo: bar;
-ms-foo: bar;
-o-foo: bar;
-webkit-foo: bar;
foo: bar;

Obviamente, esto introduce cierta deuda técnica, pero si está utilizando un preprocesador para su CSS, la sobrecarga de esto se puede reducir.

Mantenemos una hoja de estilos separada para IE y la cargamos con comentarios condicionales, para que podamos solucionar problemas en IE sin afectar la integridad del resto del front-end para otros navegadores. Últimamente, hay un movimiento para cambiar esto a shame.css , que puedes leer aquí: http://csswizardry.com/2013/04/shame-css/

¿Y cómo decide cuándo retirará soporte para una versión de navegador?

Google analitico. La segmentación por tipo de navegador en Google Analytics es muy útil. Cuando el uso de un navegador en particular cae por debajo del 10%, es un buen momento para dejar de desarrollar nuevas funciones para él.

Podrías hacer algo tan radical como tirar todos tus hacks / styles para ese navegador también, pero para una transición más suave (y para animar a las personas a actualizar) es mejor simplemente dejar de desarrollar para el navegador anterior, y tal vez mostrar un mensaje condicionalmente. .

Recientemente, dejamos de admitir IE7, y ahora los visitantes que utilizan IE7 recibirán un mensaje indicándoles que realicen una actualización, y no obtendrán más arreglos ni funciones adicionales.

El móvil es un hervidero de peces, y si tu sitio responde por completo, es una capa adicional de dolor.

Tenemos una gran cantidad de dispositivos Android con diferentes tamaños / versiones, un par de iPhones antiguos y un iPad pateando la oficina que usamos para probar la mayoría de los navegadores móviles.

Obviamente, existen diferencias con el tamaño de la pantalla, DPI, versión del navegador, etc. Lo mejor que puede hacer al respecto es atender el caso más común y solucionar cualquier problema a medida que surgen.

Answer 2

NOTA : He alterado el orden de sus preguntas para dejar la respuesta más larga al final.

Tus preguntas

¿Qué sugerencias tienen usted o su equipo para probar nuevos navegadores a medida que salen?

En realidad, como dijiste, Chrome y Firefox ofrecen continuamente, por lo que facilita el proceso. La última versión que tiene es principalmente la versión que tiene el usuario.

Para cualquier otro navegador (y versiones anteriores de Chrome y Firefox) solo seleccione una versión de cada uno y actúe como un "filtro de paso alto", probando cualquier versión desde la que seleccionó.

¿Cómo decide cuándo dejará de recibir soporte para una versión de navegador?

Echa un vistazo a las estadísticas del uso del navegador. Hay muchos recursos como statcounter , w3counter , w3cschools o wikimedia . Si es posible, agregue un rastreador de análisis a su página y tendrá datos sobre qué dispositivos, plataformas, navegadores y versiones de ellos usan los visitantes para acceder al sitio.

¿Qué cosas haces durante el desarrollo para disminuir la posibilidad de romper el código cuando sale una actualización del navegador?

La clave es usar una metodología bien definida, basada en los estándares existentes. Continúa leyendo para una recomendación personal.

Flujo de trabajo para facilitar la navegación cruzada

Paso 1: Bootstrapping

Al principio, decida: Gradación elegante versus mejora progresiva . Ambas son técnicas válidas, pero tiene sentido usar la primera para arreglar proyectos existentes y la segunda para proyectos recientemente creados.

A continuación, seleccione las bibliotecas para evitar escribir el código existente , centrándose en los 3 idiomas: JavaScript, CSS y HTML. HTML5 (+ CSS3) es la mejor opción hoy en día, pero se debe proporcionar compatibilidad con navegadores más antiguos. Las siguientes bibliotecas facilitan su soporte:

• modernizr para detección de características y carga condicional de js o css.
• jQuery para tareas relacionadas con ajax y dom.
• normalize.css para normalizar los estilos de navegador predeterminados, en lugar de simplemente "restablecerlos".

Tenga en cuenta que todas las bibliotecas js enumeradas anteriormente permiten compilaciones personalizadas , algo importante cuando el rendimiento importa.

Html5 Boilerplate proporciona una plantilla fuerte desde la cual comenzar el diseño. Incluye modernizr, jQuery y normalize.css. Su repositorio github es un buen recurso para aprender mucho sobre las técnicas de navegación cruzada. Este artículo en su wiki tiene un buen conjunto de enlaces para comenzar a aprender.

Paso 2: haz el trabajo

Los diseños deben ser móviles primero y receptivos. Este artículo sobre html5rocks presenta bien por qué y cómo.

Mientras "hace el trabajo":

• Sigue los estándares w3c . Evita el uso de hacks, especialmente los hacks de CSS, cuando sea posible. Revise a menudo la especificación de HTML5 ya que es bastante inestable.

• Cuide las funciones de ECMAScript 5 al escribir javascript. Confíe en las bibliotecas para evitar los cortes de código causados ​​por las implementaciones deficientes del navegador. No extiendas el DOM .

• Automatice las pruebas cuando sea posible. El diseño y el pulido especial del diseño, incluidas las animaciones, se prueban manualmente porque es más rápido, pero las funcionalidades de la interfaz de usuario, como la sumisión del formulario, se pueden probar perfectamente con pruebas automatizadas.

• Use herramientas para facilitar las tareas. Chrome + devtools o Firefox + firebug son los elementos básicos que se deben usar, pero hay muchas herramientas para facilitar las pruebas de exploración cruzada, incluso la automatización de esas pruebas.

Anexo: Herramientas y recursos

Prueba de navegador cruzado

• Browserstack es simplemente increíble. Permite realizar pruebas en todos los dispositivos, plataformas, navegadores y versiones.

• Browserling es una alternativa a browserstack. Está desarrollado y mantenido por Peteris Krumins y James Halliday, ambos miembros reconocidos de la comunidad node.js y desarrolladores conocidos. También publicaron una herramienta para automatizar el proceso llamado testling-ci , pero esto solo es relevante si se usa node.js en el back-end.

• modern.ie proporciona herramientas para facilitar las pruebas en Internet Explorer. Desarrollado por Microsoft, el sitio ofrece pruebas en vivo a través de browserstack y descarga de imágenes de máquinas virtuales con software preinstalado.

pruebas de adaptabilidad para "diseño receptivo"

• respon.si es una herramienta en línea destinada a probar la apariencia visual de los diseños. Permite seleccionar una resolución por lo que es útil para pruebas de diseños receptivos. Tenga en cuenta que cualquier otra herramienta para seleccionar una resolución puede hacer lo mismo.

Answer 3

diseñar y desarrollar con estándares web. validar la plataforma web. todas las libs / solutions / etc., ya enumeradas son fenomenales y bastante útiles, pero si se apega a los estándares, encontrará que necesita esas librerías cada vez menos ... al menos para la degradación graciosa del soporte del agente de usuario. Me parece que los uso cada vez más para la mejora progresiva.