QuímicaViva -

Laboratory for Biomolecular Modeling and Protein Purification and Structure Facility, School of Life Sciences, École Polytechnique Fédérale de Lausanne; and Swiss Institute of Bioinformatics, Lausanne Suiza

Este artículo tiene como objetivo proveer versiones modernas de los tres pequeños programas provistos en el libro Equilibrios Ácido Base en Solución Acuosa – Aplicaciones de la Condición de Protón, para mantener este material didáctico en un formato vigente que los alumnos puedan hoy en día implementar fácilmente.Las conversiones son al lenguaje HTML + JavaScript, con lo cual los programas pueden ejecutarse en cualquier computadora, tableta o teléfono con un navegador web moderno.

Palabras clave: titulación, ácido-base, condición de protón, JavaScript, programación, métodos numéricos

This article provides modern versions of the three small programs proposed as extension activities in the book Equilibrios Ácido Base en Solución Acuosa – Aplicaciones de la Condición de Protón (Acid-Base Equilibria in Aqueous Solution – Applications of the Proton Condition). The goal is to keep this valuable didactic material in a modern format that students can implement seamlessly today. The conversions are to HTML + JavaScript code, which allows running the programs in virtually any device with a modern web browser.

Keywords: titration, acid-base, proton condition, JavaScript, programming, numerical methods

El libro Equilibrios Ácido Base en Solución Acuosa – Aplicaciones de la Condición de Protón [1](Prof. Alejandro Olivieri,Universidad Nacional de Rosario, Argentina) explora, en secciones tituladas: Para quienes se interesan por la computación, la matemática de equilibrios ácido-base complejos mediante pequeños programas de computadora (también descripta en [2–5]). Estos ejercicios de extensión muestran claramente cómo algunos problemas científicos requieren computadoras para su correcta simulación y resolución, y proveen situaciones concretas donde aquellos alumnos de química interesados en la programación pueden plasmar un algoritmo en un programa funcional.

Los programas provistos en dicho libro están escritos para QBASIC, un intérprete provisto con todos los sistemas operativos basados en MS-DOS, lo cual los hacía accesibles a cualquier alumno con acceso a una computadora personal. Pero casi dos décadas más tarde de la publicación del libro, ni QBASIC ni sus alternativas están fácilmente disponibles. Pero a cambio, los alumnos tienen hoy en día acceso a una herramienta gratuita y muy poderosa que funciona en cualquier computadora e inclusive en teléfonos celulares y otros dispositivos, con la cual pueden aprender programación: los navegadores web. Estos programas (como Google Chrome, Firefox, Edge, Safari, entre los más populares) pueden procesar programas escritos en el lenguaje JavaScript, que provee interactividad y poder de cálculo dentro de páginas web. Con un simple editor de texto, es posible escribir páginas web con contenido estático (código HTML, por HyperText Markup Language) y contenido dinámico (código JavaScript). El objetivo particular de este artículo es proveer todo el código del citado libro transcripto a HTML + JavaScript, para mantener este interesante material didáctico en un formato vigente que los alumnos puedan hoy en día implementar fácilmente. El lector interesado en el poder de JavaScript en el ámbito científico puede remitirse a [6,7]. Un buen punto de entrada más general al mundo de la programación web es la W3schools (https://www.w3schools.com/).

Los requerimientos de estas actividades son muy modestos: una computadora o un teléfono tipo Smartphone o una tablet, que tengan un programa editor de texto (como el bloc de notas en sistemas Windows) y un navegador web funcional. En el editor de texto se escribe el código del programa, creando una página web que incluirá los cálculos y mostrará los resultados. Todo el código HTML de la página se escribe entre tags <html> y </html>, y dentro del mismo, se escribe código JavaScript entre tags<script> y </script> (Figura 1). El archivo de texto debe salvarse con extensión .html para que al efectuar doble click sobre el mismo este se abra directamente en el navegador web predeterminado. Los ejemplos han sido reescritos en la forma más concisa y cercana posibles al original.

Figura 1: Esquema que indica cómo preparar estos programas. Debe escribirse el código dentro de un archivo de texto, salvado con extensión .html. Luego ese archivo se abre en cualquier navegador web moderno, resultando directamente en su ejecución y la presentación de los resultados.

El primer programa, descripto en la sección 1.10 del libro, utiliza un método recursivo para estimar la concentración de protones en una solución conteniendo múltiples especies activas en ácido-base, sin realizar ninguna aproximación acerca de las magnitudes relativas de las constantes de disociación. En particular el ejercicio propone una solución de NH₄H₂PO₄, donde tanto NH₄⁺ como H₂PO₄^- se involucran en procesos ácido-base, y plantea considerar la condición de protón completa. Esto resulta en una ecuación polinómica cuya resolución se logra mediante un método iterativo de aproximaciones sucesivas, ilustrando directamente el potencial de los métodos numéricos ejecutados en computadora. El ejercicio concluye demostrando que aproximando una reacción mucho más desplazada hacia los productos que la otra, resultaría en un pH independiente de la cantidad total de compuesto, mientras que el cálculo preciso basado en la condición de protón completa resulta en valores de pH fuertemente dependientes de la concentración total de compuesto, tal como se observa en la práctica.

Mientras que los detalles matemáticos pueden consultarse en el libro, la conversión de QBASIC a HTML + JavaScript resulta en el código mostrado en la Figura 2 (disponible para su ejecución directa en http://lucianoabriata.altervista.org/jsinscience/protoncondition/programa1.html). En este código, la sección <script> comienza definiendo y asignando valores a las variables a utilizar, mediante el comando var. Luego un bucle while itera en la ecuación del cálculo de pH hasta que se alcance la convergencia dentro de la tolerancia preestablecida. Al final del bucle, el comando document.write escribe al HTML el pH calculado redondeado a dos cifras decimales. Este código de JavaScript se ejecuta al cargar la página, con lo cual abriendo el archivo en un explorador web se mostrará ya el resultado final. El usuario puede modificar las concentraciones y valores de constantes en el archivo de texto y recargar la página para explorar los efectos de las distintas variables, por ejemplo variando la concentración entre 0.0001 y 0.1 como se explora en el libro. O un paso más avanzado, utilizando HTML se podría permitir al usuario indicar la concentración total y luego ejecutar el cálculo mediante un botón.

<html>
<body>
<script>
  var c=0.001
  var tol=0.001
  var phnew = 4.67
  var phold=1
  var k1 = 0.0071
  var k2 = 6.3e-08
  var k3 = 4.2e-13
  var kw = 1e-14
  var kb = 1.8e-05
  var ka = kw / kb

  while ( Math.abs(phnew-phold) > tol ) {
    var phold=phnew
    var h = Math.pow(10, -phold)
	var nh4 = c * h / (h + ka)
	var d = h * h * h + k1 * h * h + k1 * k2 * h + k1 * k2 * k3
	var h2p = c * k1 * h * h / d
	var num = nh4 * ka + h2p * k2 + 2 * h2p * k2 * k3 / h + kw
	var den = 1 + h2p / k1
	var h = Math.sqrt(num / den)
	var phnew = -Math.log10(h)
  }
  document.write("pH = " + Math.round(phnew*100)/100 + "</b>")
</script>
</body>
</html>

Figura 2: Código para el Programa 1. También disponible en: http://lucianoabriata.altervista.org/jsinscience/protoncondition/programa1.html (donde el código puede verse presionando Ctrl+U en la mayoría de los navegadores web).

Los programas 2 y 3 simulan curvas de pH vs. volumen de titulante agregado en titulaciones ácido-base de un ácido fuerte (sección 2.3) o un ácido diprótico débil (sección 3.3). En el libro, estos programas escriben los datos en un archivo para su posterior inspección en un programa de gráficos. Aquí, en cambio, se utiliza la biblioteca de gráficos Google Charts (basada en código JavaScript) para insertar un gráfico interactivo de la titulación directamente en la página web.

El código del programa 2 se muestra en la Figura 3 y puede ejecutarse directamente en http://lucianoabriata.altervista.org/jsinscience/protoncondition/programa2.html. La tercera línea indica al navegador que debe cargar la biblioteca de Google Charts, y la quinta crea un contenedor (div) que alojará al gráfico generado por la biblioteca. Luego, dentro del bloque <script> se definen primero la variable pH y los vectores vols y pHs, inicialmente vacíos pero que más abajo se cargarán con los elementos de la curva de titulación. Esta es una notación compacta donde se definen múltiples variables en una sola línea, que bien podrían definirse en líneas separadas.

<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" ></script>

<div id="chart_div_1" style="width: 500px; height: 500px;" ></div>

<script>
  var pH=0, vols=[], pHs=[]
  for (pH = 0; pH < 14; pH=pH+0.05) {
    var h = Math.pow(10, -pH)
    r = 1e-14/h - h
    v = (20*r+2) / (0.1-r)
    if (v >0 && v<50) {
      document.write("<br >" + Math.round(v*100)/100 + "   " + Math.round(pH*100)/100)
      vols.push(v)
      pHs.push(pH)
    }
  }

  google.charts.load('current', {'packages':['corechart']});  google.charts.setOnLoadCallback(drawCharts);   

  function drawCharts() {
    var Combined1 = new Array();  
    Combined1[0] = ['Vol', 'pH'];

    for (i=0;i<vols.length;i++) {
      Combined1[i+1] = [ parseFloat(vols[i]), parseFloat(pHs[i])]
    }

    var data1 = google.visualization.arrayToDataTable(Combined1, false);
    var options1 = { title: 'Simulacion', hAxis: {title: 'Vol (ml)'}, vAxis: {title: 'pH'}, legend: 'none', pointSize: 1, explorer: {} };
    var chart1 = new google.visualization.LineChart(document.getElementById('chart_div_1'));
    chart1.draw(data1, options1);          
  }
</script>
</body>
</html>

Figura 3: Código para el Programa 2. También disponible en: http://lucianoabriata.altervista.org/jsinscience/protoncondition/programa2.html (donde el código puede verse presionando Ctrl+U en la mayoría de los navegadores web).

Luego de definir las variables, un bucle for itera los valores de pH desde 0 hasta 14 cada 0.05 unidades de pH, calculando los volúmenes correspondientes en base a las ecuaciones descriptas en el libro. En vez de escribir los valores de pH y volumen a un archivo como en el código del libro, este bucle escribe los datos directo al HTML mediante la línea document.write y agrega secuencialmente elementos a los vectores que listan pH y volumen (vols.push y pHs.push).

Después del bucle for, la línea que contiene los comandos google.charts.load y google.charts.set OnLoadCallback prepara primero la biblioteca de gráficos y luego indica que al terminar de cargarse la página debe ejecutar la función drawCharts. Esta función básicamente prepara una variable tipo Array (Combined1) que combina los datos en el formato requerido por la biblioteca de gráficos, y finalmente construye el gráfico con el comando chart1.draw.

El programa 3 sigue la misma base del programa 2, con las modificaciones necesarias para calcular curvas de titulación para un ácido diprótico débil, tal como se explican en el libro. El código se muestra en la Figura 4 y puede accederse en http://lucianoabriata.altervista.org/jsinscience/protoncondition/programa3.html.

<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div_1" style="width: 500px; height: 500px;"></div>

<script>
  var pH=0, vols=[], pHs=[], k1=0.017, k2=6.4e-8
  for (pH = 0; pH < 14; pH=pH+0.05) {
    var h = Math.pow(10, -pH)
    r = 1e-14/h - h
    d=k1*k2 + k1*h + h*h
    a=(2*k1*k2 + k1*h) / d
    if (r<0.1) {
      v = (20*r+2*a) / (0.1-r)
      if (v>0 && v<50) {
        document.write("<br>" + Math.round(v*100)/100 + "   " + Math.round(pH*100)/100)
        vols.push(v)
        pHs.push(pH)
      }
    }
  }

  google.charts.load('current', {'packages':['corechart']});  google.charts.setOnLoadCallback(drawCharts);   

  function drawCharts() {
    var Combined1 = new Array();  
    Combined1[0] = ['Vol', 'pH'];

    for (i=0;i<vols.length;i++) {
      Combined1[i+1] = [ parseFloat(vols[i]), parseFloat(pHs[i])]
    }

    var data1 = google.visualization.arrayToDataTable(Combined1, false);
    var options1 = { title: 'Simulacion', hAxis: {title: 'Vol (ml)'}, vAxis: {title: 'pH'}, legend: 'none', pointSize: 1, explorer: {} };
    var chart1 = new google.visualization.LineChart(document.getElementById('chart_div_1'));
    chart1.draw(data1, options1);          
  }
</script>
</body>
</html>

Figura 4: Código para el Programa 3. También disponible en: http://lucianoabriata.altervista.org/jsinscience/protoncondition/programa2.html (donde el código puede verse presionando Ctrl+U en la mayoría de los navegadores web).

Este artículo presentó versiones HTML + JavaScript de los pequeños programas del libro Equilibrios Ácido Base en Solución Acuosa – Aplicaciones de la Condición de Protón, con la intención de mantener ese material didáctico en un formato actualizado.En caso de problemas o para entender en mayor detalle los programas, el lector puede contactar a este autor en la dirección de email indicada así como referirse al libro (ver Nota luego de las Referencias) y los artículos originales[1–5].

1. Olivieri A (2000) Equilibrios ácido-base en solución acuosa : Aplicaciones de la condición de protón Segunda edición. Buenos Aires: Ediciones Científicas Argentina

2. Olivieri AC (1990) Solution of acid-base equilibria by successive approximations. Journal of Chemical Education 67: 229-237

3. Malinowski ER (1990) Methods for calculating the pH of aqueous solutions of salts of monoprotic acids and bases. Journal of Chemical Education 67: 502-504

4. Campanario JM, Ballesteros R (1990) A short program for the automatic calculation of pH in solutions having many acids or bases. Journal of Chemical Education 67: 1036-1037

5. Willis CJ (1981) Another approach to titration curves: Which is the dependent variable?. Journal of Chemical Education 58, 659-663

6. Abriata LA et al. (2018) Augmenting research, education and outreach with client-side web programming. Trends in Biotechnology 36: 473-476

7. Abriata LA (2017) Web apps come of age for molecular sciences. Informatics 4: 28 doi:10.3390/informatics4030028

La condición de protón como ejercicio introductorio a la programación científica