¿Somos compatibles? : No soy yo, eres tú IEllos.
Esta relación Developer → Cliente Web → Usuario puede ser una de las más complicadas durante el desarrollo de un producto web.
¿A qué nos referimos? Los clientes web evolucionaron pero nosotr@s como developers debemos ser conscientes de que no solo existe Google Chrome o Mozilla Firefox, también existen otros clientes web que sumados son aproximadamente 50, ¿puedes creerlo?
Y si que pueden causarnos dolores de cabeza y el principal caso aún en el 2017 es que nuestros usuarios todavía usan Internet Explorer.
Las herramientas como CSS3 y jQuery también cuentan con diferentes versiones pero ¿cómo sabemos que podemos ser compatibles?
Ahí es donde entra la práctica de Cross Browser Testing .
[Off Topic]
Y traducido a Español (España): “Pruebaz cruzadaz del ordenador” 😂
[End Off Topic]
Esto se refiere a la practica de asegurarnos que tanto el website o web app que creamos sea aceptado por la mayoría de browsers existentes, ya que como developer es tu responsabilidad que funcione para todos tus usuarios, incluyendo tablets, smartphones, Smart TVs, etc.
Hint 💡:
Remember that you are not your users — just because your site works on your Macbook Pro, Laptop or high-end Galaxy and Iphone, doesn’t mean it will work for all your users — there’s a whole lot of testing to be done!
Traducción:
Recuerda que tú no eres el usuario — solo porque el sitio web funcione en tu Macbook Pro, Laptop o último Galaxy o Iphone, no significa que va a funcionar para todos — ¡hay un montón de pruebas que hacer!
Web Engine y JavaScript Engine :
Web Browser Engine :
Un Web Browser Engine (llamado a veces Web Layout Engine o Web Rendering Engine) es un programa de computadora que renderiza contenido como MARKUP (HTML,XML, Imagenes, etc.) y formatos como CSS o XSL. Un Layout Engine es un típico componente de Web Browsers, email clients o e-book readers u otras aplicaciones de que requieren mostrar o editar contenido de la web page.
Engine puede esperar por toda la data para ser recibida antes de renderizar la página o puede renderizar antes de que toda la data sea recibida, esto puede reflejar un cambio en las páginas.
Can I use nos muestra un cuadro de como los nuevos elementos en HTML5 están siendo soportados y las versiones desde las cuales están siendo soportadas:
Podemos notar que parcialmente IE soporta HTML5 desde la versión 11, en este caso hay que ser demasiado precavido en que debemos utilizar para que pueda funcionar en versiones anteriores a la 11 incluso sin afectar las versiones actuales.
JavaScript Engine :
JavaScript Engine es un programa o interprete que ejecuta el código de JavaScript. Puede ser un intérprete tradicional o puede ser utilizado como “just in time compilation” para el bytecode, que es una forma de instrucción diseñada para una ejecución eficiente del software que interprete el código.
¿Qué más debemos tener en consideración?
Para comenzar debemos averiguar que versiones soportan las herramientas que quisiéramos utilizar para armar una estructura sólida, también es super importante tener en cuenta siempre las restricciones de los usuarios. Si la empresa/organización ve que muchos usuarios entran desde IE8, deberías soportar desde esa versión de IE. Igual en el caso de móviles. En el caso de webs ya existentes, o con nicho de mercado conocido, puedes valerte de la data de Analytics.
A continuación tendremos una lista de herramientas que van a facilitar nuestro trabajo.
Google Analytics: Es una herramienta de analítica web de la empresa Google. Ofrece información agrupada del tráfico que llega a los sitios web según la audiencia, la adquisición, el comportamiento y las conversiones que se llevan a cabo en el sitio web.
Bootstrap: En el caso de usar este framework debemos considerar que navegadores y desde que versión es soportada, para esto ellos cuentan con documentación sobre soporte de Browsers and devices:
Flexbox: Este Layout de CSS3 se ha vuelto muy recomendado ya que nos permite tener una mejor control de estructura en diferentes dispositivos. Aún así debemos recordar que este web layout model solo es soportado por ciertos navegadores.
Internet Explorer 8 y 9 : “El lado oscuro del Front End”
Los navegadores Internet Explorer 8 y 9 también están soportados, pero debes tener en cuenta que muchas propiedades de CSS3 y elementos de HTML5 no funcionan en estos navegadores. Además, Internet Explorer 8 requiere el uso de la librería respond.js para que el diseño web responsive funcione bien.
Hacks para IE y otros navegadores:
Existen Hacks que nos pueden ayudar a que nuestros estilos funcionen en Internet Explorer y otros navegadores como Opera.
En CSS existen hacks específicos para IE( 6, 7 y 8), Mozilla y Opera:
Estos se pueden agregar en nuestra hoja de estilo o podemos crear una hoja aparte. Si quisiéramos hacer esto último, existen condicionales que se puede agregar en nuestro html para que el navegador los detecte y pueda usarlos.
Herramientas de testing:
BrowserStack:
Es una herramienta de prueba de navegador cruzada basada en nube que permite a los desarrolladores probar sus sitios web a través de varios navegadores en diferentes sistemas operativos y dispositivos móviles, sin necesidad de que los usuarios instalen máquinas virtuales, dispositivos o emuladores.
Can I Use:
Es una herramienta que nos ayuda a saber que herramientas podemos usar para armar nuestro proyecto, nos indica el soporte de cada una.
Browserhacks:
Esta es una joya que acabo de descubrir, que es bien similar a Can I use. Acá escribimos la versión del web browser y este automáticamente nos mostrará los hacks que podemos usar para browsers como IE6.
