Haz que la Web Trabaje para Todos

 

Haz que la Web Trabaje para Todos

 

Millones de sitios web tienen problemas de compatibilidad con uno o más de los navegadores web más populares, produciendo una pobre experiencia al usuario, pero la comunidad de desarrollo web puede solucionar esto.

La web ha cambiado inmensamente en los últimos 20 años. En 1996 había aproximadamente un millón de sitios web; ahora hay más de mil millones. Antes había aproximadamente 50 millones de usuarios de Internet; hoy hay más de 3 mil millones. Tenemos más contenido del que jamás hubiésemos imaginado posible. Las personas están disfrutando este contenido en 8.1 mil millones de dispositivos conectados, incluyendo más de 24,000 tipos diferentes tipos de dispositivos móviles.

Este explosivo crecimiento en contenido, dispositivos y usuarios ha hecho a la compatibilidad entre navegadores más esencial incluso de lo que fue en 1996. Stack Overflow tiene casi 55,000 preguntas que incluyen la palabra “cross-browser”, y cientos de miles de preguntas acerca de cosas que funcionan bien en (X Navegador). Cualquier pregunta acerca como un navegador en particular maneja un sitio web en particular es potencialmente una pregunta de compatibilidad.

Así que sí, la compatibilidad entre navegadores es aún un problema. Un problema del que nos preocupamos en Mozilla, y pensamos que tú también deberías preocuparte también. ¿Por qué? Bien, probablemente tus usuarios no usan el mismo navegador que tú. Ellos tienen diferentes habilidades y necesidades de las que tú piensas. Ellos no cambiarán de navegador si tu sitio web no funciona en ellos. Funcionando bien es una manera de demostrar dominio en el arte. Y las herramientas modernas hacen esto más fácil que nunca.

¿Qué causa incompatibilidad entre navegadores? Es complicado. Aquí hay algunas de las principales causas:

Desarrolladores que usan características específicas de un solo navegador (por ejemplo: prefijos del fabricante del navegador) para lograr ciertos efectos, sin respaldos o polyfills para otros navegadores.

Fabricantes de navegadores los cuales se apresuran a implementar características que desean los desarrolladores antes de que estén estandarizadas.

Fabricantes de navegadores los cuales se retrasan en implementar estándares y corregir problemas en sus navegadores.

Sitios web que emplean agentes de detección para mostrar diferente contenido para diferentes navegadores.

Desarrolladores que son demasiado dependientes de un único conjunto de herramientas (los cuales algunas veces solo soportan un único navegador) y pueden omitir problemas de compatibilidad entre navegadores.

Crecimiento en la industria, la intensa demanda ha animado muchos nuevos desarrolladores web a adentrarse en el campo, lo cual significa que los desarrolladores en general están menos experimentados en promedio de lo que lo estaban unos pocos años atrás.

Algunos de estos retos han estado con nosotros desde los primeros días de la web. Pero desde esos días, el desarrollo web  ha hecho grandes progresos. Las buenas prácticas y las herramientas modernas pueden ayudarnos a construir vibrantes experiencias en cada navegador.

Así que, desarrolladores, aquí tienen algunas cosas para inspirarlos a hacer que su próximo sitio web trabaje para todos.

Más personas de las que tú piensas usan ese otro navegador

 

Muchos desarrolladores creen que el navegador que ellos usan es el único navegador que cualquiera realmente usa, por lo tanto, deberían desarrollar solo para él. En datos, 70% de los desarrolladores web usan Chrome en su equipo de escritorio. Pero solo cerca del 45% de la población en general usa Chrome en cualquier tipo de dispositivo, y solo cerca del 57% de la población en general usa Chrome en su equipo de escritorio. Desarrollando y probando solo en Chrome ignora a casi la mitad de los usuarios globales. (Es importante señalar aquí que existen diversas páginas de medición para las cuotas de mercado de cada navegador web, las cuales usan diferentes metodologías y producen diferentes números, y estos números cambian rapida y constantemente.)

Y el uso de los navegadores varía de acuerdo a la ubicación geográfica. Chrome, Firefox y IE/Edge son los navegadores más populares en muchos lugares, pero la proporción de usuarios de cada uno varía. Los usuarios alemanes prefieren Firefox por encima Chrome. IE es más popular en Japón. Un gran número de australianos prefieren Safari. Más de uno de cada cinco usuarios vietnamitas corre un fork de Chromium llamado Cốc Cốc. Desarrollando y probando en un solo navegador ignoras este tipo de diferencias en el mercado.

Finalmente, algunas características de tu navegador pueden no estar presentes en otros navegadores. Los fabricantes de navegadores implementan características a diferentes ritmos, así que una genial nueva API en tu navegador favorito puede no estar disponible para muchos usuarios.

Estos factores se combinan de formas inesperadas: Eligiendo una API la cual no es soportada en todos los navegadores, probando tu sitio web en un solo navegador, y lanzándolo en un mercado donde ese navegador no es dominante puede significar excluir sustancialmente more de la mitad de tu público potencial. Dejando dinero sobre la mesa. Dejando clientes afuera en el frío. Es por esto que vale la pena hacer el esfuerzo con tal de evitarlo.

La compatibilidad se cruza con la accesibilidad

Desarrollando un sitio web compatible entre navegadores significa diseñar y programar para ambientes de clientes desconocidos, a fin de hacer disponible el contenido para la mayor cantidad de público posible. Y ese público indudablemente incluye personas con alguna discapacidad, probablemente más de las piensas. Si tu sitio web trabaja en cualquier navegador, pero falla notablemente en un lector de pantallas, estás desperdiciando una poderosa oportunidad.

Las personas con alguna discapacidad representan una parte importante del mercado. Por ejemplo, en USA únicamente, hay más usuarios de internet con alguna discapacidad visual que todos los usuarios combinados en Canadá. Las características de la web moderna manejan las necesidades de este público; tu solo debes implementarlas.

Las técnicas de accesibilidad no solo ayudan a personas con alguna discapacidad únicamente, por ejemplo:

• Los sitios web que son más accesibles para los lectores de pantalla, lo son también para los algoritmos de los motores de búsqueda. Sencillas técnicas de optimización como usar el atributo alt-text en imágenes, usar descripciones en los enlaces, usar CSS solo para estilos (nunca para dar sentido), y usar las etiquetas semánticas de HTML5 mejoran el posicionamiento en buscadores de la página en general.
• Transcripciones del contenido de videos no solo son provechosas para personas con alguna discapacidad auditiva, estas también son útiles para usuarios en dispositivos móviles en áreas con poco ancho de banda los cuales no pueden descargar el video, y personas en ambientes ruidosos que no pueden escuchar el video. Y más contenido textual significa más oportunidades para palabras claves, así que una vez más, mejor posicionamiento en buscadores.

Los usuarios no cambiarán de navegador, ellos cambiarán de sitio web

Tu podrías pensar que los usuarios cambiarán de navegador para usar tu sitio web. Pero muchos de ellos no lo harán o no pueden hacerlo.

Los usuarios no tienen paciencia con las cosas que no funcionan, y ellos en vez de esperar se irán al sitio web de la competencia. Fallando en un punto clave el cual podría alejar a un cliente potencial para siempre. De acuerdo a Akamai,

• 32% de los usuarios que se encontraron con un problema en tu sitio web están menos interesados en hacer transacciones en línea con tu compañía
• 35% tendrán una percepción más negativa de tu compañía
• 45% están menos interesados en visitar tu sitio web nuevamente
• Y más de 1 de cada 5 usuarios (22%) lo dejará para siempre.

Lo que es más, muchos usuarios no saben cómo instalar un nuevo navegador web, o incluso no saben lo que es un navegador web (muchos usuarios no saben la diferencia entre un navegador web, un motor de búsqueda, y un sitio web).

E incluso si los usuarios supieran cómo instalar un nuevo navegador web, y quisieran hacerlo, ellos podrían no ser capaces de hacerlo. Muchas compañías eligen qué navegador web tienen sus permitido ocupar sus empleados, y muchas personas usan computadoras públicas en sitios como bibliotecas.

Por ejemplo, Microsoft dio como fecha límite el 12 de enero de 2016 a los usuarios para cambiar a la más reciente versión de su navegador, pero en marzo de 2016 más de la tercera parte de los usuarios de IE seguían en una versión desactualizada la cual ya no recibirá más actualizaciones de seguridad. Durante el año pasado (junio 2015 – mayo 2016) 2.07% usaban IE8, un navegador al cual Microsoft ya no le da soporte; lo mismo sucede con más de tres cuartas partes del 1.59% en IE9 y virtualmente todo el 10.95% que usa IE10 (aunque hay que señalar que el uso de estos navegadores ha reducido significativamente desde marzo).

Malas experiencias llevan a los usuarios a alejarse. Si la mitad de los usuarios de tu sitio usan un navegador diferente, y tú quieres conservarlos, probar tu sitio en ese otro navegador es esencial.

Compatibilidad=== Arte

La creación de la web es una disciplina especializada, no solo una tarea doméstica. Todos nosotros queremos sentirnos orgullosos de lo que hacemos, perfeccionar nuestro arte, y demostrar nuestra maestría en ello. Esto involucra:

• Estar al día con las últimas tecnologías, frameworks, y técnicas.
• Probar cuidadosamente e implementar la compatibilidad entre navegadores y plataformas de aplicaciones incluyendo respaldos para navegadores menos poderosos. ¿La experiencia es aceptable?
• Asegúrate que el contenido de tu sitio web esté accesible para personas con alguna discapacidad.
• Asegúrate que el aspecto en general y la experiencia de usuario de tus creaciones es agradable y se ajusta contigo y/o con la marca de tu cliente.

Así que, como desarrollador web, tus sitios creados son tu resumé. Una alta experiencia de uso es importante para tus usuarios, para tus compañeros y para tus actuales y futuros empleadores.

Pero muy a menudo, el tiempo y las restricciones comerciales se interponen en el camino de tales cosas. Tienes una fecha límite complicada a la cual llegar. Tu jefe solo está interesado en cómo el sitio web trabaja en su iPad y no quiere escuchar de accesibilidad. No tienes tiempo para arreglar ese error en IE con tanta prisa. Hacemos lo que podemos la mayoría de las veces, en lugar de lo que realmente nos hubiera gustado hacer.

Puede ser tentador dejar las pruebas de compatibilidad entre navegadores como algo para eliminar cuando la fecha límite llegue, esperando que las pruebas en el framework que elegimos nos ayuden. Pero tu sitio web no es completamente código del framework, y tú eres responsable por todo el código. Las pruebas para asegurarse de que tu código trabaja bien en todos los navegadores web es algo que debes tratar fuertemente de evitar.

Escribir código que perdure a través del tiempo; entregar información a quien la solicita; creando una rica funcionalidad que trabaje para todos: Estas son nobles metas de un magnífico desarrollador web.

Las herramientas modernas pueden ayudarte

Ahora ya sabes algunas estupendas razones para hacer tu sitio web más compatible. Pero, ¿cómo lo haces?

• Si has encontrado un error en el sitio web de alguien más, ¡regístralo en ¡webcompat.com! Si estás depurando tu propio sitio web, continúa leyendo.
• Prueba tu sitio web en diferentes navegadores web y muévete a través de él como lo haría un usuario. Analiza la consola de desarrollo en las herramientas de desarrollador del navegador en busca de errores (la mayoría de los navegadores web de escritorio modernos cuentan con increíbles herramientas de desarrollador incluidas que son capaces de ayudarte a depurar problemas, incluso en dispositivos móviles):
• • Firefox dev tools
  • Chrome dev tools
  • IE/Edge dev tools
  • Safari dev tools
  • Opera dev tools
• Si encuentras un error el cual no es generado por tu sitio web, ¡quizás es un error en el navegador web! Registra un reporte de error, así los desarrolladores de tu navegador web pueden solucionarlo:
• • Mozilla Bugzilla
  • Chrome issue tracker
  • IE/Edge
  • Safari/Webkit
  • Opera
• Integrar una herramienta de prueba de compatibilidad entre navegadores en tu proceso de desarrollo, para hacer la prueba entre navegadores de forma automática:
  • BrowserStack
  • Sauce Labs
  • Browserling
• Saber cuáles navegadores han implementado características web antes de usarlas en tu sitio.
• • Caniuse
  • Tablas de compatibilidad de MDN
  • Tablas de compatibilidad de Kangax ECMAScript
• Investigar herramientas de código que pueden mejorar la compatibilidad entre navegadores.
• • Autoprefixier, CSSNext, Oldie y otros PostCSS plugins hacen posible escribir completamente, modernos CSS que no fallan en navegadores antiguos.
  • Modernizr te ayuda a identificar y manejar las diferencias de implementación de características web entre navegadores (utiliza esto en vez de agentes de detección del navegador)
  • @supports te ayuda a crear avanzadas mejoras en la experiencia de navegación para los navegadores más poderosos
• Ve más allá. Aprende acerca de las muchas características y peculiaridades de la web. Entre más sepas acerca de ella, más la querrás.
• • MDN
  • Google Developers
  • W3C Developers

Cumpliendo con la promesa de la web

La promesa de la web es que cualquiera pueda acceder al contenido usando cualquier navegador en cualquier dispositivo. Incluidas dentro de esta promesa están algunas de las más grandes aspiraciones de la humanidad, autodeterminación, libertad, educación y descubrimiento. Diseñar para tener compatibilidad entre navegadores abre tu trabajo al mayor público y mercado posible, mejora tu maestría en el arte, y es un noble fin por sí mismo.

Mientras el paisaje de los dispositivos modernos y de los navegadores presenta muchos desafíos, las herramientas modernas ofrecen muchas soluciones. Más de 3 mil millones de personas están allá afuera buscando un sitio web, ¿estás listo para ellos?

Acerca de
Justin Crawford

Justin Crawford es un ingeniero de producción en Mozilla, trabaja en desarrollo de marketing y crecimiento. Le gusta pensar en el futuro, construir cosas y andar en bicicleta.

Más artículos escritos por Justin Crawford …

Acerca de
Chris Mills

Chris Mills es un escritor de tecnología Senior en Mozilla, donde él escribe documentos y demostraciones sobre web apps abiertas, Firefox OS, y temas relacionados. El ama reparar cosas relacionadas con HTML, CSS, JavaScript y otras tecnologías web, el da ocasionalmente charlas sobre tecnología en conferencias y universidades. El solía trabajar para Opera y W3C, disfruta tocar heavy metal en la batería y beber buena cerveza. Él vive cerca de Manchester, Reino Unido, con su esposa y tres hermosos hijos.

Más artículos escritos por Chris Mills …

Acerca de
Ali Spivak

@alispivak. Ali se desempeña como Desarrollador de Marketing en Mozilla, y ha estado desarrollando y administrando sitios web por tanto tiempo que ella se preocupa por admitirlo en público. Ella es una apasionada por mantener la web libre y trabaja en cosas que los desarrolladores aman (como MDN). También ama viajar, cocinar, y crear cosas.

Más artículos escritos por Ali Spivak …

 

Gracias a las 6 propuestas que recibimos, finalmente después de que la comunidad votara por su logo favorito. Tenemos ganador.

Muchas felicidades a Juan Carlos González. Sin más te presentamos el logo de la comunidad de WoMoz México

 

Invitamos a todos a participar en el Testday para Firefox 48 Beta 3 el día viernes 24 de Junio.

El objetivo es: New Awesomebar feature (Nueva característica de Awesomebar), bug verifications (verificaciones de errores) y bug triage (Triage de errores).

No se requiere experiencia de Testing para participar en el testday. Los interesados pueden obtener más información en el siguiente enlace: https://public.etherpad-mozilla.org/p/testday-20160624

¡IMPORTANTE registrar sus actividades en el etherpad con su nombre o nick para así poder darle seguimiento a las actividades que cada quien realice y de igual forma Mozilla sepa quien esta colaborando para futuros eventos!

Más información: Mozilla Quality Assurance

Pueden consultar el link del tutorial para el test day: https://foro.mozilla-hispano.org/t/tutorial-de-testdays/22365/2

Traducción de https://blog.mozilla.org/blog/2014/11/19/promoting-choice-and-innovation-on-the-web/

Hace diez años construimos Firefox para mantener el Internet en nuestras manos – crear una elección y poner a las personas en el control de sus vidas “en línea”. Nuestra atención se ha centrado en construir productos que impulsen la competencia, energía e innovación. Necesitamos todos mantener la Web abierta, en todas partes e independiente.

Buscar es parte fundamental de la experiencia en línea para todo el mundo – solo los usuarios de Firefox buscan en la Web más de 100 mil millones de veces por año -.

Con Firefox popularizamos la integración de buscar en el navegador. Nos asociamos con compañías de Internet, incluyendo a Google, Yahoo y otras compañías para dar una mejor experiencia de búsqueda y generan ingresos para avanzar en nuestramisión

Cuando instituimos una opción de búsqueda por default, rompimos el estándar de la industria al rehusarnos términos comerciales que exigían exclusividad. Y a lo largo de los últimos 10 años siempre hemos proporcionado alternativas pre-instaladas, y maneras sencillas para nuestros usuarios de cambiar, añadir o eliminar los motores de búsqueda.

Google ha sido el motor de búsqueda default desde el 2004. El acuerdo llegó el momento de renovar este año, y lo tomamos como una oportunidad para revisar nuestra estrategia de competitividad y explorar nuestras opciones.

Promoviendo la elección y la innovación

Hoy anunciamos un cambio en nuestra estrategia para Firefox con respecto a los motores de búsqueda. Estamos terminando nuestra práctica de tener un único motor de búsqueda predeterminado global. Estamos adoptando un enfoque más local y flexible para aumentar la elección y la innovación en la web, con nuevas y más amplias alianzas de búsqueda por país:

Estados Unidos

• Yahoo se convertirá en el motor de búsqueda por default para Firefox en los EE.UU.
• Comenzando en Diciembre los usuarios de Firefox serán introducidos en una nueva experiencia del buscador Yahoo mejorado, dentro de las características es que es limpio, con una interfaz moderna que trae lo mejor de la Web.
• Bajo esta asociación, Yahoo soportará la opción “No quiero ser rastreado” en Firefox.
  Google, Bing, DuckDuckGo, eBay, Amazon, Twitter y Wikipedia continuarán incorporados como buscadores alternativos.

Rusia

• El buscador Yandex se convertirá en el buscado por defecto para Firefox en Rusia.
• Google, DuckDuckGo, OZON.ru, Price.ru, Mail.ru y Wikipedia continuarán incorporados como buscadores alternativos.

China

• Baidu continuará siendo el buscador por defecto para Firefox en China.
• Google, Bing, Youdao, Taobao y otras opciones locales continuarán incorporados como buscadores alternativos.

Todos los países

• Firefox es un navegador para todo el mundo, independientemente de preferencias de búsqueda.
• Ahora Firefox tendrá más opciones en proveedores de búsqueda que cualquier otro buscador. Con 61 proveedores de búsqueda preinstalados en Firefox a través de 88 diferentes idiomas.
• Google continuará siendo una opción de búsqueda preinstalada .
• Google también continuará proveyendo las características de navegación segura y geolocalización de Firefox

El día de hoy se ha lanzado el concurso Game Creator Challenge junto con Goo Tecnologías. El concurso se centra en la participación tanto de los desarrollador y los usuarios para impulsar la Web como una plataforma de juegos.

Puedes encontrar más detalles en el blog de Mozilla.
https://blog.mozilla.org/blog/2013/12/05/unleash-the-game-creator-in-you-by-entering-our-holiday-gaming-competition/

Estamos colaborando con Goo Tecnologías en este concurso, dado a su tecnología basada en el navegador, Goo permite que cualquier persona (sin experiencia necesidad de codificación) pueda crear un escena de juego en 3D (http://www.gootechnologies.com/products/create/) y para los más avanzados crear un juego más sofisticado.

 

El Santa Jetpack (http://goote.ch/RgiK2QYGSKG9akETHjLSwA/) es una escena que hemos creado como plantilla para ayudar a que la gente no inicie desde cero. Los concursantes pueden mezclar esta y otras plantillas y elementos de biblioteca en la herramienta de Goo.

Hay premios en efectivo y dos viajes a GDC en San Francisco y GameCom en Cologne.

El concurso se realizará el 14 de enero.

El Centro de Tecnología e Innovación ha ofrecido a la comunidad de Mozilla México becas para desarrollar apps para Firefox OS, por lo tanto se invitan a jóvenes responsables, centrados, a quienes les apasiona lo que hacen, comprometidos con su país, que serán el motor de cambio, sin miedo a aprender, a fallar, dispuesta a afrontar retos y además con la capacidad de reconocer y superar sus errores, con un deseo ferviente de contribuir a la sociedad e interesados por la tecnología, a participar en tres proyectos de alcance Nacional durante tres meses.

Seguir leyendo Becas – CTIN – Mozilla México →

 

Con el objetivo de fomentar el desarrollo de Firefox OS en México previo a su futuro lanzamiento, el 31 de Julio se lanzará un reto en la Campus Party México enfocado a la creación de apps para Firefox OS.

El día 31 se tendrá un “Hack Day Firefox OS” en los siguientes horarios: 10:00 – 12:00, 14:00 – 15:00 y 21:00 – 23:00.

Posteriormente a este Hack Day, se invitará al Hackaton que se realizará durante la campus existiendo 4 categorías para la realización de las apps, como son:

-Juegos
Objetivo: el desarrollo de juegos basados en el poder de HTML5

-Productividad
Objetivo: el desarrollo de aplicaciones para el uso cotidiano:

Aplicaciones como: Bloc de notas, calculadora, visor de archivos, etc.

-Redes sociales/entretenimiento
Objetivo: el desarrollo de aplicaciones orientadas al entretenimiento y redes sociales como:

Aplicación para la mensajería instantánea como: Line o Whatsapp.
Aplicaciones divertidas para pasar el tiempo de forma divertida.

-Aplicaciones usando Opendata
Objetivo: el desarrollo de aplicaciones basadas en Datos Abiertos (de cualquier tema o institución) que permitan a los usuarios conocer o interactuar con diferentes temas. A continuación algunos temas guía para las aplicaciones:

Aplicación para la localización de puntos de interés tales como: museos, monumentos históricos, oficinas gubernamentales, entre otros, para los ciudadanos.
Reportar servicios urbanos o acontecimientos relevantes de un punto en específico

O si ya tienes pensada qué aplicación te gustaría idear, desarrollar, continuar o mejorar durante el evento, contáctanos.

Es necesario registrarse para este evento en: Registro.

Los participantes al Hackaton pueden asistir o no asistir al Hack Day y aun así poder participar en el concurso con sus aplicaciones. Pero es importante que tengan en cuenta las recomendaciones y lineamientos que estipula Mozilla en las apps como es el manifiesto.

El registro puede ser individual o en grupo de 3 a 5 personas; Las personas o equipos que terminen la aplicación y ésta sea funcional, respetando los lineamientos de Mozilla, se evaluarán para poder ser ganadoras dentro de cada una de las categorías existentes y poder hacerse acreedores a un teléfono con Firefox OS donados por Telefónica México, así como ser parte de la elite para seguir siendo invitado a más hackatones.

El sábado se presentará a los medios una Introducción del sistema operativo Firefox OS y a la par se presentarán las aplicaciones ganadoras a los medios de comunicación, invitando a desarrolladores a crear más apps.

Les dejamos algunos recursos para que vayan preparándose para ese día:
* Introducción a Firefox OS Link
* Documentación sobre Firefox OS  Link
* Guía rápida para crear una aplicación web Link
* Centro de desarrolladores de Firefox Marketplace Link
* Firefox OS Simulator Link  (”Indispensable traerlo instalado en su navegador Firefox para que puedan ver el desarrollo de su app).

El 31 de julio tenemos una cita para cambiar el panorama de las plataformas móviles y devolver a la web la importancia que se merece.

¡Nos vemos!