Mostrando entradas con la etiqueta jmol. Mostrar todas las entradas
Mostrando entradas con la etiqueta jmol. Mostrar todas las entradas

11 de febrero de 2011

Cómo insertar una molécula interactiva en una página web con Jmol

Jmol es un visor de estructuras químicas y moléculas en 3D, está programado en Java y su código es libre.

Jmol se puede descargar aquí, es aconsejable descargar la última versión estable y existen 2 opciones, descargar todo el código (sólo para programadores) o descargar sólo los archivos binarios para ejecutarlo.

Una vez descargado, hay que descomprimirlo (si se ha descargado el archivo .tar.gz, ejecutar: tar -xzf archivo.tar.gz). Jmol se inicia ejecutando jmol.bat si usamos Windows y jmol.sh si usamos  Linux. Ni que decir que Jmol necesita que tengamos una versión de Java Runtime instalada en nuestro sistema operativo.

Una vez iniciado Jmol, el programa nos ofrece un interfaz gráfico donde podemos abrir archivos de moléculas fácilmente y visualizarlas. En el siguiente enlace hay diversos tutoriales para manejar Jmol: http://wiki.jmol.org/index.php/Jmol_Tutorials.

Jmol ofrece una interesante característica, nos permite insertar fácilmente estructuras de moléculas en páginas web y visualizarlas de forma interactiva.
Para ello hay que copiar la carpeta de Jmol en nuestro servidor e insertar el siguiente código dentro de nuestra web:
 <html>  
      <head>  
           <script type="text/javascript" src="./jmol/Jmol.js"></script>  
      </head>  
      <body>  
           <script type="text/javascript">  
                jmolInitialize("./jmol", "JmolAppletSigned.jar");  
                jmolApplet(800, "load 1je8_AB.pdb; spacefill off; wireframe off; select all; cartoon; color structure;");  
           </script>  
      </body>  
 </html>  

En primer lugar se indica en la sección <head> de la página web la ruta a la librería JavaScript de Jmol: "<script type="text/javascript" src="./jmol/Jmol.js"></script>", en nuestro caso la librería está en el directorio 'jmol' en la misma ruta que nuestra página web.

En segundo lugar se inicializala librería anterior (dentro de la sección </body> de la página web): "jmolInitialize("./jmol", "JmolAppletSigned.jar");". El segundo parámetro (JmolAppletSigned.jar) sólo es necesario si el servidor web es nuestro propio ordenador.

Finalmente se ejecuta la miniaplicación (applet) indicando el tamaño de la molécula y los comandos de Jmol que queremos ejecutar antes de mostrar la molécula: "jmolApplet(800, "load 1je8_AB.pdb; spacefill off; wireframe off; select all; cartoon; color structure;");". En este caso se ha borrado la visualización previa de la molécula y se ha representado en modo 'cartoon' (utilizado para visualizar fácilmente estructuras secundarias de proteínas).

Así es como se vería en nuestro navegador: