Advertisement
  1. Web Design
  2. Cross-Browser

5 Formas de Tener Listo Tu Sitio para Microsoft Edge y Otros Navegadores Modernos

by
Difficulty:BeginnerLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Edge es el nuevo navegador web de Microsoft que luce un nuevo motor de renderizado-EdgeHTML-y un Sistema Operativo fundmental para arrancar en Windows 10. Ya que las actualizaciones desde Windows 7, 8 y 8.1 serán gratuitas para la mayoría, puedes esperar una enorme afluencia de usuarios de Edge para visitar sitios en los próximos meses.

Edge es un punto de rompimiento con el pasado, actualmente una completa reescritura de versiones anteriores de Internet Explorer, y estoy seguro que muchos desarrolladores le darán la bienvenida a eso. Con ello en mente, quería compartir cinco formas en las que puedes preparar tu sitio para la interoperabilidad web moderna y también probar Microsoft Edge en paralelo.

1. Actualiza tus Librerías JavaScript

Librerías comunes como jQuery son con frecuencia actualizadas para atender fallas cuando son lanzadas nuevas versiones de navegador. Al simplemente actualizar tus frameworks JS, puedes evitar muchas fallas de compatibilidad con Edge.

En nuestra investigación interna encontramos que 57% de los 20,000 sitios principales estan usando frameworks JavaScript que tienen problemas que han sido solucionados en versiones más nuevas de la misma librería. Puedes usar el análisis rápido del sitio para determinar si estás usando frameworks JavaScript obsoletos en tus sitios.

2. Evita Prefijos CSS

Prefijos CSS son utilizados por navegadores para implementar nuevas y emergentes características de CSS antes de que sean totalmente ratificadas por el W3C. Si un navegador implementa un prefijo CSS, se observará como el ejemplo de abajo (éste es una implementación específica para IE de la característica "guiones" para unir texto con guiones en líneas múltiples):

Es realmente común para sitios perder prefijos específicos de navegadores, o haber implementado prefijos específicos de navegadores cuando no son requeridos en propiedades CSS comunes. Ésto podría causar que una página web se renderiza incorrectamente en Microsoft Edge u otros navegadores modernos.

Los navegadores están usando prefijos mucho menos ahora debido al manejo de problemas asociados con ellos. Algunos navegadores, incluído Microsoft Edge, raramente si no es que nunca utilizan prefijos.

Donde sea posible, evita el uso de prefijos específicos para navegadores. Sin embargo, si absolutamente debes usar prefijos, utiliza Grunt PostCSS para automatizar el manejo de prefijos en tu CSS.

3. Evita Detección de Navegador

Algunas páginas web usan técnicas de detección de navegador para determinar como debería renderizarse la página web en muchas diferentes versiones de navegadores. Recomendamos usar detección de características, una práctica que primero determina si un navegador o dispositivo soporta una característica específica y luego elige la mejor experiencia para renderizar basandose en ésta información.

La detección de características es una gran alternativa para detección de navegador y es comúnmente usada a través de populares librerías JavaScript como Modernizr, o a través de código de detección de características. Detección de características es con frecuencia usada con Polyfills para implementar características modernas en navegadores antiguos que no la soportan nativamente.

Para más detalles sobre cómo usar Modernizr, Polyfills y otras técnicas de compatibilidad, lee el artículo 'Afina, moderniza y optimiza tu sitio web' de Martin Kearn.

4. Libérate de Plugins

Edge no soporta plugins, asi que es un buen momento para considerar como alejarte de plugins propietarios como Flash o Silverlight. Edge no soporta Flash, pero mejor que usar arquitectura de plugin, Flash es proporcionado por el navegador, y es actualizado y corregido  por el equipo de Edge en colaboración con Adobe.

Para algunos sitios, alejarse de plugins es muy sencillo. Sin embargo, muchos sitios encontrarán ésto difícil, particularmente esos que están proporcionando contenido de medios. El equipo de Edge ha proporcionado guías sobre cómo trasladar a HTML para contenido premium en el Blog de Edge.

5. Asegura el Modo de Renderizado de Edge

Si la directiva <!DOCTYPE> falta o no especifica un tipo de documento basado en estándares, Edge puede mostrar incorrectamente tu página. El analizador ejecuta un simple test para determinar que tu sitio se establezca correctamente, asi que ingresa la URL de tu sitio y encuentra rápidamente si pasa. Si quieres ver como se ve el testeo actual, puedes ver el código para el analizador en Github.

Recursos

Más Práctica con JavaScript

Éste artículo es parte de la serie de desarrollo web de evangelistas tecnológicos de Microsoft sobre aprendizaje práctico de JavaScript, proyectos de código abierto, y mejores prácticas de interoperabilidad, incluyendo el navegador Microsoft Edge y el nuevo motor de renderizado EdgeHTML.

Te animamos a probar múltiples navegadores y dispositivos incluyendo Microsoft Edge-el navegador predeterminado para Windows 10-con herramientas gratuitas en dev.modern.IE:

Aprendizaje de tecnología profundo en Microsoft Edge y la Plataforma Web de nuestros ingenieros y evangelistas:

Más herramientas y recursos gratuitos para múltiples plataformas para la Plataforma Web:

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.