Sitios compatibles entre navegadores

Alcanzar el éxito sin morir en el intento

Navegadores en pugna

Sitios Compatibles entre navegadores

Pablo Luis Botta

MCT - UTN FRRO

2011 - Rosario

Sitios compatibles entre navegadores

Que son los sitios compatibles entre navegadores?

Un sitio compatible entre navegadores es aquel que se visualiza y funciona de forma correcta en todos los navegadores presentes en el mercado.

Pero que vendría a ser esto?

  • Visible: Significa que el contenido pueda ser leído y comprendido desde cualquier navegador. Esto sin embargo no implica que tenga que verse igual en todos ellos.
  • Funcional: Significa que la funcionabilidad ofrecida está disponible en todos los navegadores. Esto sin embargo no implica que la interacción será la misma.

Ejemplo de sitio compatible entre navegadores:

Facebook IE 6 - Facebook IE 7

Ejemplo de sitios NO compatible entre navegadores:

Google + IE 6 - Google IE 7

Sitios compatibles entre navegadores

Dispersión del Mercado Mundial de navegadores

Dispersión del mercado mundial de navegadores (Año 2001)

Browser Market Share

Sitios compatibles entre navegadores

Por que la batalla entre los navegadores? Que implicancias tiene?

¿Por qué?

  • Definición de estánderes: Implementación de tecnologías que se vuelven estandar.
  • Implementación de estándares: Definir como se implementan.
  • Codecs: Ventaja competitiva y patentes.
  • Promoción de propios productos online (Google y Microsoft): Ejemplo: Google Docs, Office 365
  • Estadísticas de uso: Como se utiliza el navegador

Sitios compatibles entre navegadores

Conocer y entender nuestra audiencia

  • Ejecutivos y oficinistas
  • Usuarios
  • Geeks
  • Bebes
  • Hasta las abuelas usan facebook

Sitios compatibles entre navegadores

Estrategias para lograr la compatibilidad

Desde la exploción de la web, diseñadores y desarrolladores han buscado la forma de alcanzar que sus sitios sean compatibles entre navegadores.

  • Varias versiones:El mismo "look" en todos los navegadores.
  • Graceful Degradation o "Degradación elegante": Sitio tolerante a fallas la visualización se va degradando cuanto peor es el navegador.
  • Progressive Enhancement o "Mejora Progresiva": Construido en capas que se van añadiendo cuanto mejor es el soporte

Sitios compatibles entre navegadores

Varias versiones

Varias versiones - Inconvenientes:

Escalabilidad y mantenimiento.

Problemas de escalabilidad

Sitios compatibles entre navegadores

Degradación elegante

Degradación elegante:

En muchos sistemas e incluso en la web se ha usado este pricipio de diseño.

La tolerancia a los fallos.

Sitios compatibles entre navegadores

Degradación elegante y varias versiones.

Proponen un pensamiento hacia el pasado para solucionar problemas existentes y actuales, pero ...

... se olvidan del FUTURO

La WEB es algo cambiante que está creciendo y seguirá haciendolo. Debemos evitar diseñar sitios pensando en el presente y en los problemas pasados y comenzar a pensarlo adaptables.

Sitios compatibles entre navegadores

Degradación elegante y varias versiones.

¿Tienen los sitios que verse igual en todos los navegadores?

Sitios compatibles entre navegadores

Degradación elegante y varias versiones.

Sitios compatibles entre navegadores

Degradación elegante y varias versiones.

Así se ven los sitios que desarrollamos hace unos años atrás en la web de hoy.

No No

Sitios compatibles entre navegadores

Degradación elegante y varias versiones.

Así se ven los sitios que desarrollamos hace unos años atrás en la web de hoy.

No

Sitios compatibles entre navegadores

Mejora progresiva.

ALTO! Tenemos que pensar distinto. Tenemos que pensar al reves.

No

Sitios compatibles entre navegadores

Mejora progresiva.

PENSAR HACIA EL FUTURO.

No

Sitios compatibles entre navegadores

Mejora progresiva.

Hacia sitios adaptables, accesibles y inostrusivos.

No No

Sitios compatibles entre navegadores

Mejora progresiva. ¿Por qué?

Los navegadores están evolucionando mucho más rápido . . . versiones nuevas con nuevas carácteristicas cada 6 semanas.

No

Sitios compatibles entre navegadores

Mejora progresiva. ¿Por qué?

Los Web está cambiando ...

Nuevas tecnologías y nuevos estándares están surgiendo.

HTML 5, CSS 3, WebGL, Geolocalization, etc . . .

Sitios compatibles entre navegadores

Mejora progresiva. ¿Por qué?

No sabemos en el futuro con que dispositvos se va interactuar con la web.

No

Sitios compatibles entre navegadores

Mejora progresiva. Como aplicarla.

Todo muy lindo! Pero como hago para desarrollar utilizando mejora progresiva?

No

Sitios compatibles entre navegadores

Mejora progresiva.







HTML

Sitios compatibles entre navegadores

Mejora progresiva.

Igual punto de partida.

  • Validación del marcado HTML: Obtener un marcado libre de errores y evitar que los navegadores entren en "quirskmode" o modo de correción de errores.
  • HTML semántico: Mejora el SEO y permite que los navegadores provean una mejor experiencia de usuario.
  • Utilizar sintaxis estricta: Elimina potenciales errores al programar.

Sitios compatibles entre navegadores

Mejora progresiva.

El contenido es el rey.

  • Escribir el marcado de acuerdo al contenido y no de acuerdo al estilo a aplicar.
  • Reducir y minimizar al mínimo el número de etiquetas.
  • No utilizar etiquetas para dar estilo únicamente.
  • Agregar elementos extras para estilar mediante Javascript o CSS.

Sitios compatibles entre navegadores

Mejora progresiva.

HTML 5

  • Contenido multimedia Canvas, Audio, Video
  • Mejoras en los formularios: required, pattern, placeholder, etc.
  • Etiquetas semánticas: Section, Article, Header, Footer, Aside, Figure
  • Otras tecnologías: Geolocalizacion, Local Storage, Web Workers, etc.

Se pueden utilzar hoy?

  • Polyfills
  • Otras alternativas flash o java.
  • No todas tienen una alternativa

Sitios compatibles entre navegadores

Mejora progresiva.







CSS

Sitios compatibles entre navegadores

Mejora progresiva.

Igual punto de partida.

  • Resetear o Normalizar: Reducir las diferencias existente entre los navegadores al estilar.
  • Reglas que funcionan: Hay estilos que sabemos son puramente compatible entre navegadores, utilizar estos para evitar problemas y aplicar parches.

Sitios compatibles entre navegadores

Mejora progresiva.

CSS 3

  • Bordes redondeados
  • Sombras
  • Rotaciones y transiciones
  • Más y nuevas fuentes
  • Mejoras en los fondos y mejoras en los colores

Sitios compatibles entre navegadores

Mejora progresiva.

¿Se puede aplicar hoy?

Si! Recordemos como funciona las reglas de CSS. En cascada y tolerante a fallos.

reglas css

Si alguna propiedad falla el selector se sigue aplicando, si algún selector de la lista de selectores falla no se aplica la regla.

Sitios compatibles entre navegadores

Mejora progresiva.

Entonces podríamos aplicar CSS progresivamente de la siguiente forma

/*RECORDAR LA CASCADA*/
.work-slider-container {
	background:#334B01;
	background-image: url('images/gradient.png') repeat-y top left;
	background-image: linear-gradient(top, #334B01, #B4DC00);
}

.works img
{
	border: solid #FFFFFF; /*BLANCO*/
	border: solid rgba(255, 255, 255, .4); /*BLANCO TRANSPARENTADO*/
	border-width:9px 0;
}

/*OJO CON ESTO*/
p.language, p[lang] {
	color:red;
}
/*ALGUNOS NABEGADORES NO VAN A APLICARLA*/

Sitios compatibles entre navegadores

Mejora progresiva.

Medias Query

Media Query definida por la W3C
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

Las caracteristicas que se pueden detectar son: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

El primer filtro es si el navegador la soporta o no la soporta (El mismo orden que las reglas).

@media screen and (min-width: 1270px) {
	.inner
	{
		width:80%;
		margin:auto;
	}
}
@media screen and (orientation: landscape) {
	.inner
	{
		width:50%;
		margin:auto;
	}
}

Sitios compatibles entre navegadores

Mejora progresiva.

Detección de Funcionalidades: Modernizr

Modernizr
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Uso en CSS:

.fontface .header h1, .fontface header h1{
	font-family: 'Yellowtail', cursive;
}
.no-cssgradients .work-slider-container {
	background-image: url('images/gradient.png') repeat-y top left;
}
.cssgradients .work-slider-container {
	background-image: linear-gradient(top, #334B01, #B4DC00);
}

Uso en Javascript:

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Sitios compatibles entre navegadores

Mejora progresiva.







Javascript

Sitios compatibles entre navegadores

Mejora progresiva.

Igual punto de partida.

Entre cada uno de los distintos navegadores existen distintos tipos de implementaciones del estandar ECMAscript (en la jerga Javascript). Estas diferencias hacen que sea complicado la codificación e incluso el testeo.

Un buen punto de partido es trabajar sobre algunos de los frameworks de Javascript que nos ahorran los problemas de las distintas implementaciones.

Frameworks:

  • Jquery
  • Mootools

Sitios compatibles entre navegadores

Mejora progresiva.

Ser inostrusivo

La ausencia de Javascript no debe convertir nuestro sitio en inútil.

if (jQuery) {  	
	$(document).ready(function(){
		$('.flexslider').flexslider({controlNav: false, pauseOnHover: true   });
		$('.scrollPage').click(function() {
			var elementClicked = $(this).attr("href");
			var destination = $(elementClicked).offset().top;
			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-50}, 500 );
			window.location.hash = '#'+ elementClicked.split('#')[1];
			return false;
		});
		
		$('a[rel=external]').click(function (event){
			event.preventDefault();
			window.open($(this).attr('href'));
		});
	});
}

Sitios compatibles entre navegadores

Mejora progresiva.







Últimas Consideraciones

Sitios compatibles entre navegadores

Mejora progresiva.

Navegadores compatibles

  • Firefox 3.6 +
  • Internet Explorer 9 +
  • Chrome 1 +
  • Opera 9.5 +
  • Safari 3 +

Sitios compatibles entre navegadores

Mejora progresiva.

Navegadores a FIXEAR

  • Internet Explorer 8 -

Sitios compatibles entre navegadores

Material Interesante

Material interesante

A list apart - http://www.alistapart.com

Smashing Magazine Network - http://network.smashingmagazine.com

Can I use - http://caniuse.com

HTML 5 Boilerplate - http://html5boilerplate.com/

Sitios compatibles entre navegadores

Mejora progresiva.