Creación de páginas web para protocolos experimentales con HTML/CSS
¿Alguna vez ha compartido un protocolo experimental en Word o PDF? Las versiones se desorganizan, el formato se corrompe y terminan acumulándose archivos como "final_final_verdadFinal.docx".
Las páginas web son diferentes. Con una sola URL, cualquiera puede acceder a la versión más reciente, y esta se mostrará de forma clara en cualquier dispositivo. Desde el cuaderno de laboratorio hasta el navegador web: esta es la evolución del protocolo.
HTML: El esqueleto del documento
HTML es un lenguaje de marcado que le indica al navegador "esto es un título", "esto es una lista", etc. De forma similar a como los codones en una secuencia de ADN especifican aminoácidos, las etiquetas HTML especifican la función del contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Protocolo de Western blot</title>
</head>
<body>
<h1>Protocolo de Western blot</h1>
<p>Diana: EGFR (receptor del factor de crecimiento epidérmico)</p>
<p>Última actualización: 2026-06-27</p>
</body>
</html>Resumen de las etiquetas clave:
<h1>~<h6>: Título (h1 es el tamaño más grande) — Equivalente a las secciones y subsecciones de un artículo.<p>: Párrafo — Texto principal.<ul>,<ol>: Lista no ordenada/ordenada — Lista de materiales, pasos del experimento.<strong>: Texto en negrita — Se utiliza para resaltar concentraciones y temperaturas importantes.<a href="...">: Enlace — Enlaza a artículos de referencia o páginas de productos.
Organizar los materiales y los pasos mediante listas
El elemento central de un protocolo experimental es la lista de materiales y el procedimiento paso a paso.
<h2>Materiales necesarios</h2>
<ul>
<li>Anticuerpo primario: anti-EGFR (dilución 1:1000)</li>
<li>Anticuerpo secundario: anti-conejo HRP (1:5000)</li>
<li>Membrana de PVDF (0,45 μm)</li>
<li>Tampón de transferencia: 25 mM Tris, 192 mM glicina, 20 % metanol</li>
</ul>
<h2>Pasos del experimento</h2>
<ol>
<li>Preparar el gel SDS-PAGE (gel separador al 10 % + gel concentrador al 5 %)</li>
<li>Cargar <strong>30 μg</strong> de proteína en cada pocillo</li>
<li>Electroforesis: <strong>120 V, 90 min</strong></li>
<li>Transferir a una membrana de PVDF: <strong>100 V, 60 min</strong> (sobre hielo)</li>
<li>Bloqueo: leche desnatada al 5 %/TBST, <strong>1 h a temperatura ambiente</strong></li>
<li>Incubación con anticuerpo primario: 4 °C, <strong>durante la noche</strong></li>
<li>Lavado: 5 min × 3 con TBST</li>
<li>Incubación con anticuerpo secundario: 1 h a temperatura ambiente</li>
<li>Detección por ECL</li>
</ol><ul> se utiliza para elementos en los que el orden no es relevante, como los materiales, mientras que <ol> se usa para elementos en los que el orden es importante, como las etapas de un experimento.
CSS: Aplicar estilos a un documento
CSS es el "atuendo" de HTML. De la misma manera que la misma secuencia de ADN puede tener un aspecto completamente diferente según el método de visualización, el mismo HTML puede cambiar por completo según el CSS aplicado.
<style>
body {
font-family: 'Pretendard', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
line-height: 1.7;
color: #1a1a1a;
}
h1 {
color: #2d5a3d;
border-bottom: 3px solid #2d5a3d;
padding-bottom: 8px;
}
h2 {
color: #3d7a5a;
margin-top: 32px;
}
strong {
color: #c0392b;
background: #fef3f2;
padding: 1px 4px;
border-radius: 3px;
}
li {
margin-bottom: 8px;
}
</style>Propiedades CSS clave:
font-family: Fuente: el punto de partida para la legibilidad.max-width+margin: 0 auto: Alineación central: un ancho cómodo para facilitar la lectura.line-height: Interlineado: 1.7 es el valor óptimo para documentos académicos.color: Color del texto: útil para resaltar valores importantes.border-bottom: Línea inferior: para separar las secciones.
Organizar las condiciones en una tabla
Organizar las condiciones experimentales en una tabla permite compararlas fácilmente.
<h2>Resumen de las condiciones de los anticuerpos</h2>
<table>
<thead>
<tr>
<th>Anticuerpo</th>
<th>Dilución</th>
<th>Condiciones de incubación</th>
<th>Tiempo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anti-EGFR (primario)</td>
<td>1:1000</td>
<td>4°C</td>
<td>Overnight</td>
</tr>
<tr>
<td>Anti-conejo HRP (secundario)</td>
<td>1:5000</td>
<td>Temperatura ambiente</td>
<td>1 hora</td>
</tr>
</tbody>
</table>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
th, td {
border: 1px solid #ddd;
padding: 10px 14px;
text-align: left;
}
th {
background: #f0f7f4;
font-weight: 600;
color: #2d5a3d;
}
tr:hover {
background: #f9fafb;
}
</style>Crear un cuadro de advertencias
Haz que las advertencias importantes del protocolo sean más visibles y llamativas.
<div class="warning">
<strong>Advertencia:</strong> La transferencia debe realizarse siempre sobre hielo.
El tampón de transferencia con metanol genera calor;
el sobrecalentamiento desnaturaliza las proteínas.
</div>
<div class="tip">
<strong>Consejo:</strong> Antes de usarla, la membrana de PVDF debe activarse
durante 30 segundos en metanol. Las proteínas no se adhieren a una membrana seca.
</div>
<style>
.warning {
background: #fef3f2;
border-left: 4px solid #e74c3c;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
line-height: 1.6;
}
.tip {
background: #f0f7f4;
border-left: 4px solid #2d5a3d;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
line-height: 1.6;
}
</style>Prueba tú mismo (Ejemplo descolorido)
Completa los espacios en blanco para completar la lista de materiales del experimento en HTML.
<h2>Materiales necesarios</h2>< ><li>PBS buffer (pH 7.4)</li><li>Trypsin-EDTA (0.25%)</li><li>FBS (10%)</li></ >
Errores comunes y soluciones
P: El texto es demasiado pequeño y no se ve bien.
Establezca un valor mayor o igual a body en font-size: 16px. Aunque el valor predeterminado del navegador es 16px, es mejor especificarlo explícitamente.
P: ¿Qué ocurre si no cierro las etiquetas HTML?
HTML es tolerante y no mostrará errores, pero el diseño podría no ser el esperado. Si utiliza una etiqueta de apertura (<ul>), asegúrese de utilizar la etiqueta de cierre correspondiente (</ul>).
P: Los estilos CSS no se aplican.
Verifique que la etiqueta <style> esté dentro de <head> y que la ortografía del selector sea correcta. Los selectores de clase comienzan con un punto (.), como en .warning.
P: ¿<script> debe estar únicamente dentro de <head>? ¿No se puede incluir en <body>?
Ambas opciones son posibles, pero en la práctica, suele colocarse al final de <body>. Esto se debe a dos razones:
- Los navegadores leen el HTML de forma secuencial, de arriba hacia abajo. Si hay un script (
<script>) dentro de<head>, este se ejecutará antes de que se dibuje la página, lo que puede ralentizar la carga. - Si el código como
document.getElementById("result")se ejecuta en<head>, los elementos de<body>aún no se habrán creado, lo que provocará un error ennull.
Si desea mantenerlo dentro de <head>, agregue el atributo defer: <script defer src="app.js"></script>. De esta manera, se ejecutará después de que se haya completado la interpretación del HTML.
P: ¿Cuál es la diferencia entre las rutas absolutas (/page) y las rutas relativas (page)?
- Ruta absoluta: Comienza con
/y se basa en la raíz del servidor./samples/listsiempre apunta ahttp://dominio/samples/list. - Ruta relativa: No comienza con
/y se basa en la ubicación del documento actual. Si la página actual eshttp://dominio/admin/dashboard, entonceslistapunta ahttp://dominio/admin/list.
Si una ruta en el atributo action de un enlace o formulario no funciona como se espera, es probable que la causa sea la confusión entre rutas absolutas y relativas.
P: Subí el sitio a GitHub Pages, pero aparece un error 404.
GitHub Pages busca por defecto el archivo index.html como página principal. Si el nombre del archivo es diferente, como my_page.html, deberá ingresar el nombre del archivo directamente en la URL. Además, si el nombre del archivo contiene espacios, estos deben codificarse como %20 en la URL. Siempre que sea posible, evite los espacios en los nombres de archivo y utilice index.html para la página principal.