Uso Básico de Chime 
Introducción a Chime
Aplicaciones Básicas
Uso de Frames

Original de Alexander García y Janneth Vásquez.



Antes de iniciar:


 

Introducción a Chime
 

Chime es un programa (plug-in) desarrollado a partir de RasMol, con el fin de permitir la implementación de los scripts o animaciones moleculares a nivel de Web. Lo que hace el plug-in es "explicarle" al navegador (Netscape o Explorer) la forma de presentar y ejecutar los archivos "pdb", "scr" o "spt" generados por RasMol.

Una vez instalado el plug-in Chime en su computador, su navegador estará en capacidad de visitar diferentes websites con animaciones y tutoriales, construídos con el lenguaje de RasMol y con las ventajas de los archivos HTML. Estas ventajas incluyen la inclusión de diferentes formatos y colores de texto, la posibilidad de detenerse, devolverse en cualquier punto dentro del script y la posibilidad de incluir gráficos, sonido, tablas, hipertextos, etc.

Chime permite la manipulación interactiva la molécula, para ello sólo es necesario hacer click con el botón derecho del mouse sobre la molécula, enseguida se desplegará un menú emergente en donde encontrará la mayoría de las opciones del Menú de Herramientas de RasMol. Ud. podrá cambiar la representación de la molécula, los esquemas de color, seleccionar regiones particulares de la molécula, visualizar puentes de hidrógeno, dots, labels, etc; sin alterar de ninguna manera la estructura del script. Así mismo, podrá modificar la posición y el tamaño de la molécula utilizando los botones del mouse, para ello consulte:
 
 

Utilidades del Ratón



¡Ud. descubrirá las posibilidades, en la médida en que se adentre en el conocimiento de ambos programas, tenga  siempe en cuenta que RasMol y Chime son herramientas complementarias!
 
 

Aplicaciones Básicas
 

El lenguaje con el que se construten los Websites o sitios de Internet es el HTM o HTML. Este un pseudo lenguaje de marcas, en si mismo no es un lenguaje de programación, su finalidad es la de presentar información de distintas clases a través de una unica interface.

Para explicar como se incluyen dentro del lenguaje HTML las aplicaciones de RasMol, tomaremos el ejemplo del archivo Chime_1.htm, este es el archivo de entrada para el tutorial de Chime que se encuentra en

www.mdli.com<>

Con este archivo explicaremos como interpretar el código fuente del archivo, una vez que Ud. comprenda los pasos generales de este código, Ud. podrá entender cómo se insertan las moléculas dentro de una página, como se crean los botones que definen funciones y comandos de RasMol, una vez que comprenda como funciona Chime, podrá crear sus propias páginas con las moléculas y apliaciones de su interés.

Para empezar se muestra el archivo de ejemplo Chime_1.htm, tal como se observa desde el navegador.
 


Chime: Simplest Web Page

This page illustrates the simplest use of Chime, that is, HTML with neither frames* nor javascript. The molecule displayed is one chain of oxyhemoglobin from 1HHO.PDB.
What can I do in Chime with the mouse ?
How do I make Chime show a molecule?
How do I show the view I want?
Try clicking these buttons:
Heme only       Heme + protein 
How do I make a push-button?
Alpha Helix CONFe
The color key legend is implemented as a one-cell table.
*It will probably be easier to control the layout of your Chime pages by using frames with Chime. This is especially true if your pages will have more content or complexity than this one. After you have examined all of the above How? pages, you may wish to use your browser's option to view the source for this entire page. (In Netscape, open the View menu, and select Source).

You can download a copy of these pages for local use/study.
This page was created by Eric Martz, who wishes to thank Tim Maffett, MDLI's principal architect of Chime, for generous help and access to pre-release versions of Chime. Tested with Netscape 3.0 full-screen under Windows 3.1 with minimum screen resolution of 640 x 480 pixels, using Chime 0.99.



Este esquema ilustra la pantalla de arranque para el tutorial de Chime, tenga en cuenta que todo archivo ".htm" es editable y por tanto susceptible de modificación por parte del usuario.

Para editar un archivo ".htm" existen varias herramientas, la más es simple el BLOC DE NOTAS, una aplicación presente un todos los ambientes Windows de Microsoft, otra herramienta de edicíon es el NESTCAPE COMPOSER un programa que hace parte del paquete Nestcape Communicator 4.5. En este caso usaremos el Bloc de Notas, con el fin de trabajar directamente sobre el código fuente de la página de ejemplo.

El NESTCAPE COMPOSER se recomienda para personalizar la presentación de su página, en este programa Ud. encontrará herramientas que le permitirán escoger el formato del texto, insertar imagenes, tablas, etc. y editar de forma sencilla el contenido de su página. Así mismo el NESTCAPE COMPOSER  le permite crear vínculos o "Links" entre archivos con lo cual podrá encadenar varios archivos a su presentación inicial, lo que le permitira enriquecer visualmente su website.

Al abrir con el Bloc de Notas el archivo Chime_1.htm se conoce su código fuente, esta es su estructura :

 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.5 [en] (Win95; I) [Netscape]">
   <title>Chime: Simplest Web Page</title>
</head>
<body bgcolor="#FFFFFF">
<!-- guarantee white background --><!-- guarantee standard-sized font -->
<center>
<h2>

Chime: Simplest Web Page</h2></center>
&nbsp;<font size=+1>This page illustrates the simplest use of <a href="chime.htm">Chime</a>,
that is, <a href="html.htm">HTML</a> with neither frames<a href="#frames">*</a>
nor javascript. The molecule displayed is one chain of <b>oxyhemoglobin</b>
from <a href="pdb.htm">1HHO.PDB</a>.</font>

<p><!-- START THE CHIME PLUG-IN GRAPHIC -->

<embed src="1hhoxgz.pdb" bgcolor="#000000" align="left" HEIGHT="75%%" width="50%" hspace="10" name="chime_graphics" script="
wireframe off
select protein
trace 0.7
color structure
select hem
color cpk
spacefill
select all
rotate y -20
">
<p><font size=+1>
<a href="chimehow.htm">What can I do in Chime with themouse and Chime's menus?</a></font>
<br><font size=+1><a href="chimeup.htm">How do I make Chime show a molecule?</a></font>
<br><font size=+1><a href="fs_cmdln.htm">How do I show the view I want?</a></font>
<p><font size=+1>Try clicking these buttons:</font>
<center>

<embed type="application/x-spt" width=12 height=12 button=push
target="chime_graphics" script="
reset
restrict not protein
center selected
zoom 200
rotate y -55
#translate x 35
"><font size=+1>
Heme only&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Heme + protein&nbsp;</font>

<embed type="application/x-spt" width=12 height=12 button=push
target="chime_graphics" script="
reset
zoom 100
select protein
spacefill off
trace 0.7
color structure
">

</center>
<font size=+1><a href="button.htm">How do I make a push-button?</a></font>
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<p><!-- force what follows to start below the Chime graphic -->
<table ALIGN=LEFT BORDER=0 WIDTH="50%" hspace="10" >
<tr>
<td BGCOLOR="#000000"><!-- tt = teletype font --><!-- 4 sizes above default --><!-- bold on -->
<center><b><tt><font size=+2><font color="#FF0080">Alpha Helix</font> </font><font size=+3><font color="#A0A0A0">C</font><font color="#FF0000">O</font><font color="#8080FF">N</font><font color="#FFB000">F</font></font><font color="#FFB000"><font size=+2>e</font></font></tt></b></center>
</td>
</tr>
</table>

<p><font size=+1>The color key legend is implemented as a <a href="tables.htm">one-cell
table</a>.</font>
<p><a NAME="frames"></a><font size=+1>*It will probably be easier to control
the layout of your Chime pages by <b><a href="chime_2.htm">using frames
with Chime</a></b>. This is especially true if your pages will have more
content or complexity than this one. After you have examined all of the
above <i>How?</i> pages, you may wish to use your browser's option to <b>view
the source</b> for this entire page. (In Netscape, open the View menu,
and select Source).</font>
<p><font size=+1>You can
<a href="http://www.umass.edu/microbio/chime/regisfrm/index.htm">download
a copy of these pages</a> for local use/study.</font>
<center><form><!--<input type=button value="Back" onClick="history.back()">--><input type=button value="Back" onClick="location='chimake.htm'"><input type=button value="Next" onClick="location='chime_2.htm'"></form></center>

<hr><font size=+1>This page was created by <a href="http://www.umass.edu/microbio/rasmol/emartz.htm">Eric
Martz</a>, who wishes to thank Tim Maffett, <a href="http://www.mdli.com">MDLI</a>'s
principal architect of Chime, for generous help and access to pre-release
versions of Chime. Tested with Netscape 3.0 full-screen under Windows 3.1
with minimum screen resolution of 640 x 480 pixels, using Chime 0.99.</font>
</body>
</html>
 


Por ser un lenguaje de marcas en el HTML se define el inicio y el final de cada comando o sección de la página, así, en este caso concreto se define el inicio del archivo html, su finalización despues de n pasos, luego el inicio del encabezamiento, todo archivo htm tiene un encabezamiento, y su correspondiente finalización.

 
 
<html> 
<head> 
<title>Chime: Simplest Web Page</title> 
</head> 


<html>
Después de las definiciones del color de fondo (gcolor=white), y de la fuente a usar, se define también el hipervínculo sobre el cual sera posible conseguir el archivo pdb de trabajo, en este caso es el 1HHO.PDB.
 
 
 
<body bgcolor=white><!-- guarantee white background --> 
<basefont size=3><!-- guarantee standard-sized font -->

<div align=center> 
<h2>Chime: Simplest Web Page</h2> 
</div> 

This page illustrates the simplest use of <a href="chime.htm"> 
Chime</a>, that is, <a href="html.htm">HTML</a> with neither 
frames<a href="#frames">*</a> nor javascript.

The molecule displayed is one chain of <b>oxyhemoglobin</b> 
from <a href="pdb.htm">1HHO.PDB</a>. 

<p>

Esta línea marca el llamado a Chime, de esta manera se invocan los comandos propios del pulg-in y su respectivo procesamiento por parte navegador en uso. Se define entonces, la molécula a presentar con el archivo 1hhoxgz.pdb, el área de la presentación "chime_graphics", el tamaño y el color de fondo.

Para más informacion acerca de las claves de colores HTML en puede consultar el Manual de RasMol.
Sección Colores y Esquemas de Color
 
 

 
<p>
<!-- START THE CHIME PLUG-IN GRAPHIC -->
<embed src="1hhoxgz.pdb" bgcolor="#000000"
align=left
height=55% width=50%
hspace=10
name="chime_graphics" 

Aquí se inicia el script propiamente dicho, al verlo inmediatamente es posible identificar los comandos de RasMol que se aplican sobre la molécula cargada.
 
 
 

 
name="chime_graphics" 
script="
wireframe off
select protein
trace 0.7
color structure
select hem
color cpk
spacefill
select all
rotate y -20
">

A continuación se defienen Hipervínculos en la presentación, observe como cada frase esta referida a un archivo "htm". Estos hipenvínculos se generan de manera más sencilla utilizando el Nestcape Composer, no es necesario manejar el código fuente para hacerlo, simplemente se debe definir el archivo (target) al que debe desplazarce el navegador una vez se de click sobre la frase deseada (link).
 
 

 
<a href="chimehow.htm">What can I do in Chime with the mouse and Chime's menus?
</a><br>
<a href="chimeup.htm">How do I make Chime show a molecule?</a><br>
<a href="fs_cmdln.htm">How do I show the view I want?</a><br>

Ahora se defienen los Botones de la presentación, en Chime, cada botón se define como un script de RasMol, el cual se ejecutará sobre la regíon predefinida para la presentación de la molécula (chime_graphics).
 
 

 
<p>
Try clicking these buttons:

<div align=center>
<embed type="application/x-spt" width=12 height=12 button=push
target="chime_graphics" script="
reset
restrict not protein
center selected
zoom 200
rotate y -55
#translate x 35
">

Heme only
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Heme + protein

<embed type="application/x-spt" width=12 height=12 button=push
target="chime_graphics" script="
reset
zoom 100
select protein
spacefill off
trace 0.7
color structure
">

</div>


 

Observe que los comandos se ejecutarán sobre la molécula cargada, en este cado la 1hhoxgz.pdb, en cada caso se mantiene la sintaxis utilizada en la Línea de Comandos de RasMol. El script se inicia con el comando script=" y termina con ">, las comillas se usan para delimitar los comandos del botón y el símbolo (>) para indicar la finalización del llamado al plug-in. Luego se define el texto que acompaña el botón, el cual obviamente indica la acción del script definido para dicho botón. De esta forma es posible modificar la acción del botón y el titulo que lo acompaña, de forma que es posible definir otras aplicaciones.

¡Siempre en lenguaje RasMol!
 
 

Uso de Frames

La mayoría de los desarrollos en Chime usan marcos o FRAMES, esto se debe a que al dividir la pantalla en dos o en tantas partes como se quiera, se facilita la visualización de los scripts y la lectura de los textos explicativos. Generalemente a un lado de  la pantalla se define la presentación de la molécula (chime_graphics)
y al otro lado se presentan los indices y textos del script.
 
 

Estas presentaciones se defienen con un archivo "manejador de frames", en este archivo se define el tipo de división de la pantalla, el porcentaje de cada uno de los frames y los archivos HTML que corresponden a cada lado de la pantalla.

Nuevamente para comprender como se construye un archivo HTML utilizando frames, usaremos un ejemplo con el cual explicaremos el código fuente. El archivo de está imagen corresponde al archivo Frames.htm del tutorial de Estructura de Proteínas.


 

Este es su código fuente, aquí usamos el Bloc de notas para abrirlo :
 
 

 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.5 [en] (Win95; I) [Netscape]">
   <title>Proteinas</title>
<!-- A simple 2-frame page -->
<frameset cols="*,*">
<!-- "*,*" means 2 equal-sized columns -->
<frame src="prot1.htm" name="c2_left">
<frame src="prot_text.htm"  name="c2_right
borderwidth="10">
</frameset>
<!-- The names allow targeting 'a href=' links to a specific frame.-->
</head>
<body>
<a NAME="esenciales"></a>
</body>
</html>
 


Como vimos anteriormente, el HTML inicia definiendo las marcas de inicio y fin para cada comando, en este caso el código fuente indica, en las primeras líneas la ubicación del archivo.
 
 

 
<frameset cols="*,*">
<!-- "*,*" means 2 equal-sized columns -->
<frame src="prot1.htm" name="c2_left">
<frame src="prot_text.htm"  name="c2_right
borderwidth="10"">
 
En esta linea se inicia la definición de los marcos, el comando <frameset cols="*,*"> indica al navegador si se van a usar filas o columnas, en este caso se específica que las columnas van a ocupar el 100% de la pantalla, con la misma anchura. El astérisco podría reemplazarse por un valor numérico entre 0-100%, obviamente asignando al otro frame el área restante de la pantalla, por ejemplo <frameset cols="30%, 70%"> donde se indica que las columnas seran dos, una ocupara el 70% de la pantalla y la otra el 30%  restante.  De esta forma se fijará el espacio ocupado por cada Frame, en nuestro caso este valor no se específica lo que permite que el usuario desplace libremente los frames.

Luego se definen los archivos que se van a presentar a lado y lado de la pantalla, de esta manera tenemos: prot1.htm y prot_text.htm los cuales se presentan a la izquierda y a la derecha de la pantalla respectivamente, ocupando los porcetajes definidos en las líneas anteriores. El comando borderwidth="10" indica el grosor de la línea que separa los dos archivos.

Una vez que se conocen los archivos que conforman los frames de la pantalla, es posible diseñar la presentación de la molécula de interes. Tenga en cuenta que los botones que se ejecutan en un lado de la pantalla prot_text.htm deben producir alguna modificación de la molécula que se visualiza en el otro lado de la pantalla prot1.htm, por ello es necesario tener en cuenta que cada botón debe definir la ventana de visualización (Chime_graphics) y que los comandos definidos en cada script deben digitarse de forma correcta y lógica, de manera que permitan ver el efecto buscado.

Este es el código fuente de prot1.htm el archivo que se carga a la izquierda.
 
 

 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="Janneth Vasquez">
   <meta name="GENERATOR" content="Mozilla/4.5 [en] (Win95; I) [Netscape]">
   <title>proteinas</title>
</head>
<body text="#000000" bgcolor="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">

<embed src="1atom.pdb" align="center"bgcolor="#000000"WIDTH="99%%" HEIGHT="87%%" name="chime_graphics" script="
select atomno=1
label Click sobre algun Link o Boton del Menu Principal
set fontsize 
translate x -48">
 

Este archivo define al zona de visualización de las moléculas (chime_graphics), define la presentación en fondo negro, el mismo fondo utilizado para el archivo bgcolor="#000000" y define que ocupe el  99% del espacio de la pantalla asignado. Inicialemente se carga el pbd de 1 átomo (1atom.pdb) sobre este archivo se crea una marca o label con el cual se indica al usuario la forma de iniciar la visulailzación de los Aminoácidos Esenciales.
 

Ahora un segmento del código fuente de Prot_tex1.htm en el que se define el boton que carga y presenta a la Glicina. La acción del botón se ejecutará en la ventana de grafícos predefinida target="chime_graphics en este caso particular, se necesita que cada botón presenta un aminoácido por ello el script se inicia con zap y luego carga la molécula a presentar con el comando  de RasMol "load glycine.pdb".

Al igual que en el caso de los scripts de RasMol, en la creación de scripts con Chime se requiere una copia de los archivos PDB de trabajo en la misma carpeta que contiene los todos los archivos htm.
 
 

 
<html>
<head>
</head>
<td>

<embed type="application/x-spt" width=15 height=15 button=push
target="chime_graphics"script="
zap
load glycine.pdb
color cpk
wireframe 0.2
spacefill 0.5
">

<font size=+2>
<a href="prot_text1a.htm#g"><b>Glicina</a></font></td></body>
</html>

 


De esta forma se van adicionando más botones dentro del menú, todo depende de la finalidad del script y de las propiedades de la molécula. Una vez que Ud. pueda identificar el código HTML, podrá utilizar los archivos como plantillas sobre los cuales Ud. introducirá modificaciones según su interés.

Para facilitar la edición y creación de tutoriales en Chime puede emplear el Netscape Composer, para ello puede editar algun archivo HTML que contenga alguna zona de visualización o algun botón definido. Identifique los iconos "tags" que definen botones, cópielos, cámbielos de posición, haga doble click sobre ellos para editarlos, intente modificar el script con los comandos que usted conoce, o intente cambiar al archivo pdb de trabajo, poco a poco irá descubriendo que es una labor sencilla, solamente se requiere que Ud. conozca cuales son las partes de código fuente que debe modificar.
 

Una vez que Ud. conozca la forma de modificar estos archivos podrá crear sus propias páginas, definir su esquema de presentar la información, los menús, textos e imagenes a incluir dentro de su tutorial.

Lo invitamos a que nos participe sus inquietudes, dudas o comentarios, nuestro interés es el de crear una comunidad de usuarios y creativos de RasMol y Chime, y compartir con todos ellos los desarrollos logrados.
 
 

Escríbanos
acad@accefyn.org.co


RasMol y Chime