Capitulo 3 Consejos para escribir aplicaciones crossBrowser con mootools

January 8th, 2010

Bueno ahora toca el tema de escribir codigo mootools de la manera correcta, ya que de lo contrario obtendremos resultados diferentes del desempeño de nuetra aplicacion en los distintos navegadores que existen.

Las viejas costumbres

Bueno pues resulta que leyendo por ahi un ebook que se llama la “biblia de javascript” pues me tope con dos propiedades de los elementos del dom que son: innerText y innerHTML. El caso es lei para que servian y se me hizo facil incluirlar en un codigo de mootools que estaba escribiendo.

1
2
3
4
5
6
7
8

//se me ocurrio esto, no pense que tuviera grandes consecuencias
$('un_textarea').innerHTML = "mi texto";
 
//tambien escribia cosas como esta
$('input_text').innerText = "algo";
 
//inclusive hacia esto 
$('otro_input_text').value = "algo";

mm… mala idea, resulta que las lineas anteriores tienen resultados inesperados en los distintos navegadores, puede que funcionen a la perfeccion sobre algunas versiones de internet Explorer pero ni de risa jalan para mozilla y safari, algo que he notado es que si logras hacer funcionar el codigo sobre el explorer y mozilla es practicamente seguro que tambien funcione en safari.

Bueno pues resulta que esta leccion la he aprendido a la mala. Aqui viene la solucion a los problemas anteriores y tiene que ver con utilizar de forma correcta las funciones de las que me provee mootools.

De ahora en adelante olvidemos las viejas practicas y hagamos uso de los setters y getters que nos ofrece la libreria.

1
2
3
4
5
6

 
//para obtener el valor de una propiedad por ejemplo 'text'
var propiedad = $('miElemento').get('propiedad');
 
//para asignar un valor a una propiedad por ejemplo 'value'
var propiedad = $('miElemento').set('propiedad', 'valor');

Otra forma incorrecta de proceder y su implementacion es la siguiente.

1
2
3
4
5
6

<script>
    function miFuncion(){
    }
</script>
 
<input type="button" onclick="miFuncion()" id="miBoton">

Lo anterior debemos cambiarlo por lo siguiente:

1
2
3
4

function miFuncion(){
}
 
$('miBoton').addEvent( 'click', miFuncion );

El doctype

Por cuestiones de desempeño de nuestra pagina sobre el navegador siempre sin exepcion debemos especificar el tipo de documento por ejemplo un tipo de documento con xhtml strict seria asi


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" dir="ltr">

y cito el mootools essentials:

If you don’t specify a DOCTYPE or if you use one that isn’t XHTML, you’ll get strange results when you try and use several of the classes and effects in MooTools.

En pocas palabras “Si no especificas un doctype o si usas uno que no es XHTML obtendras resultados extraños cuando trates de usar las distintas clases y efectos de mootools”. Bueno pues mas claro ni el agua.

Escribiendo un condicional para cada navegador

bueno ahora veamos una de las clases mas utiles de mootoools en cuanto a compatibilidad de navegadores se refiere. Esta clase nos da informacion sobre el cliente por ejemplo que navegador esta usando y el sistema operativo con el que trabaja, incluso la version del navegador que tiene instalado el ciente, es decir nos permite detectar el navegador que esta usano el usuario.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
//numero de la version del navegador
var version = Browser.Engine.version;
 
//cualquier version de internet explorer
if ( Browser.Engine.trident ) alert('explorer ' + version);
 
//cualquier navegador de mozilla
if ( Browser.Engine.gecko ) alert('firefox '  + version);
 
//safari, google chrome o konqueror
if ( Browser.Engine.webkit ) alert('safari '  + version);
 
//algun navegador con el engine presto como Opera
if ( Browser.Engine.presto ) alert('opera '  + version);

Las funciones anteriores devuelven un boolean a exepcion de la primera que devuelve un number. Tambien podemos conocer la plataforma sobre la cual se ejecuta el navegador.

1
2
3
4
5
6
7
8
9
10
11
12

 
//estas devuelven boolean y detectan el 
//Sistema operativo del usuario
if ( Browser.Platform.win ) alert('S.O. windows');
if ( Browser.Platform.mac ) alert('S.O. Mac');
if ( Browser.Platform.linux ) alert('S.O. Linux');
if (Browser.Platform.ipod) alert(' S.O. iPod Touch/ iPhone '); 
if ( Browser.Platform.other ) alert('S.O. Ninguno de los anteriores');
 
 
//esta devuelve un string con el nombre del S.O.
alert( Browser.Platform.name );

Esta parte la he dejado hasta el final porque actualmente mootools trata de implemetar la compatibilidad de sus funciones con todos los navegadores de manera interna y automatica, pero si te llegas a encontrar con un bloque de codigo bien escrito que tiene resultados diferentes de desempeño en los navegadores la unica opcion seria escribir una condicion basada en alguna de las funciones anteriores ya sea que el problema se genere a partir del navegador o del sistema operativo.

Posted by admin Filed in mootools
No Comments »

Leave a Reply