🧱 ¿Qué son las breadcrumbs?

Las breadcrumbs son una barra de navegación secundaria (como un sidebar) que muestra la ubicación jerárquica del contenido actual. Por ejemplo:

Inicio > Blog > Psicología > 2025 > Ello, yo y el superyó

Este patrón es común en blogs, documentación técnica y sitios académicos. Por defecto, Quarto permite la generación de breadcrumbs de forma automática utilizando el contenido definido en el archivo _quarto_yml dentro los parámetros de navegación en la barra lateral de una página web (website > sidebar > contents). El resultado son breadcrumbs aparecen encima del título de la página.

Sin embargo, es posible crear breadcrumbs y ubicarlos en cualquier sección de nuestra página de forma automática utilizando únicamente metadatos del documento. Así, es posible incluir breadcrumbs a todos los posts clasificados en diversas categorías dentro del mismo blog.

✅ Objetivo

Crear un breadcrumb automático como el siguiente:

Inicio > Blog > [Categoría] > [Título del Post]

Donde:

• [Categoría] viene del primer elemento de categories en el YAML.
  
• [Título del Post] viene del campo title.

Además, se define una estructura de blog ordenado mediante subcarpetas para un aislamiento de contenido, escalabilidad y compatibilidad con Quarto. No obstante, la lógica funciona para cualquier otra estructura.

mi-pagina-web/
├── index.qmd
├── _includes/
│   └── breadcrumb.qmd
├── blog/
│   ├── index.qmd
│   ├── astrobiologia/
│   │   └── vida-en-marte/
│   │       └── vida-en-marte.qmd
│   ├── neurociencia/
│   │   └── cerebro-plastico/
│   │       └── cerebro-plastico.qmd
│   ├── fisica-cuantica/
│   │   ├── fisica-cuantica.qmd
│   │   └── entrelazamiento/
│   │       └── entrelazamiento.qmd
│   ├── biotecnologia/
│   │   └── edicion-genetica/
│   │       └── edicion-genetica.qmd

💡 Solución basada en metadata

Como ejemplo, se define el siguiente post sobre Entrelazamiento Cuántico con la siguiente YAML

---
title: "Entrelazamiento Cuántico"
description: "Explorando uno de los fenómenos más misteriosos de la física moderna."
date: 2025-06-03
categories: ["Física Cuántica"]
tags: ["fisica-cuantica", "cuántica", "entrelazamiento", "mecánica-cuántica"] # ← En minúsculas, para rutas
image: images/thumbnail-entrelazamiento.png
---

_include/breadcrumb.qmd

<div class="breadcrumbs">
  [Inicio](../../../index.qmd) > 
  [Blog](../../index.qmd) > 
  [{{< meta categories.1 >}}](../{{< meta tags.1 >}}.qmd) > 
  <span>{{< meta title >}}</span>
</div>

<div class="breadcrumbs">
  <a href="../../../index.qmd">Inicio</a> > 
  <a href="../../index.qmd">Blog</a> > 
  <a href="../{{< meta tags.1 >}}.qmd">{{< meta categories.1 >}}</a> > 
  <span>{{< meta title >}}</span>
</div>

title: "Entrelazamiento Cuántico"
categories: ["Física Cuántica"]
tags: ["fisica-cuantica", "entrelazamiento", "mecánica-cuántica"]

<div class="breadcrumbs">
  <a href="../../../post_principal.qmd">Inicio</a> > 
  <a href="../../blog/index.qmd">Blog</a> > 
  <a href="../fisica-quantica.qmd">Física Cuántica</a> > 
  <span>Entrelazamiento Cuántico</span>
</div>

🎨 Estilo opcional (CSS)

Agrega este CSS a tu styles.css para mejorar la apariencia:

.breadcrumbs {
  font-size: 0.9rem;
  color: #666;
  margin: 1.5rem 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.breadcrumbs a {
  color: #006AD4;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span {
  color: #333;
  font-weight: 600;
}

✅ Ventajas de esta solución

🔄 Alternativas consideradas (y por qué no las usé)

🏁 Conclusión

Crear breadcrumbs dinámicos en Quarto es posible y simple, si sabes cómo aprovechar los metadatos del documento. Mi solución combina:

• tags para controlar rutas (quarto.qmd)
• categories para mostrar nombres legibles (Quarto)
• {{< meta >}} dentro de enlaces Markdown

Esta técnica mejora significativamente la usabilidad de tu blog o sitio académico.

🔗 Recursos relacionados

• Quarto Documentation – Includes
• Quarto Documentation – Metadata
• La Tercera Fundación – Sobre mí

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

Tragedia de una Muerte No Anunciada

“Tragedia” es una pieza de una intensidad brutal que captura un momento de encuentro y dolor extremo. Danteva intenta utilizar el contraste de forma magistral: la joven es “fuerte como piedra” con el “corazón petrificado”, pero su mirada es un “grito de su cuerpo.” Pero sobre todo, se enfoca en el concepto del alma y la existencia, preguntándose si el sujeto del poema realmente posee una, dado su sufrimiento.

El clímax llega con la irrupción del narrador en el “circo de las pulgas” (una metáfora de la sociedad que observa y se burla), ofreciendo una mano. Este simple acto detiene el mundo, invirtiendo el orden natural: “el cielo se detuvo, la tierra se partió” 😔.

Desde mi perspectiva actual, lo más potente es la transferencia del dolor. El acto de bondad de extender la mano se convierte en una vía de contagio. El contacto de la piel no sana, sino que envenena o contagia, quemando los nervios del narrador. El sol que ríe al final subraya la indiferencia cósmica ante esta “torpe tragedia” humana (cuando escribí esta parte tenía al creepy sol que ilumina el mundo de Soul Eater). Es un poema sobre la empatía llevada al límite y el costo de tomar el dolor ajeno.

← Volver a Archivo Danteva

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

La Frontera Onírica: La Realidad Aumentada del Sueño

“Sueño” explora la línea difusa entre el deseo y la realidad, donde el plano onírico se convierte en la única verdad viable. Danteva se autodenomina el “bellaco de un cuento,” una figura que vive su plenitud emocional en el subconsciente, un “sueño azul” que es al mismo tiempo felicidad y tormento.

De este poema me quedo con la intensidad física de la pasión adolescente. De algun modo, intenté describir esa fascinación amorosa descrita como una mezcla de épica y ternura (ahora agradezco esa influencia de Pablo Neruda en mi forma de escribir sobre el amor, un claro punto de partida). Visto desde ahora, recordar esas palabras me genera un sentimiento conmovedor de cómo me ilusionaba las cosas, las personas y como algo muy cotidiano como dormir, se volvía muy importante y necesario para buscar consuelo y prepararte para el nuevo día (vaya mecanismo de autoprotección y cuidado tenía 😲).

← Volver a Archivo Danteva

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

El Tema de Fondo: La Trascendencia

“Tragedia de un Nombre” toca directamente la ambición de la memoria y la frustración de la invisibilidad (“Fantasma era, olvidada así permaneció”). Danteva aborda la necesidad de tener un propósito y ser un recuerdo, resumiendo el deseo universal de ser “inmortal” (incluso mejor que la de Dorian Gray).

Me gusta pensar en este poema hoy y trazar un paralelo con mi trabajo actual. Al final, “La Tercera Fundación” (este sitio web si te perdiste) es precisamente un proyecto sobre la trascendencia y la preservación del conocimiento. Por aquellos días, mi empeño estaba puesto en alcanzar la inmortalidad literaria, un sueño que me otorgó, aunque de manera efímera, cierta notoriedad en diversos eventos de poesía 😏; hoy, busco la inmortalidad del conocimiento útil y reproducible (jajaja ya quisiera). La invocación a Julieta 🥰 al final eleva la ambición personal a una escala dramática conocida por todos.

← Volver a Archivo Danteva

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

El Encanto de la Idealización: Pureza y Pasión

“Encanto” representa la inmersión de Danteva en la lírica amorosa, una alabanza a la amada. El joven poeta eleva a la mujer a un ideal casi divino, usando una imaginería barroca y dulce (“flor del naranjo”, “perfumadas y emplumadas por los dioses”). Es un cambio de tono que muestra la amplitud emocional que buscaba explorar en aquella época.

Hoy me causa gracia y ternura la dualidad que se teje: una alabanza a la pureza (como las musas que tenían Dante Alighieri o el propio Don Quijote) coexistiendo con el reconocimiento de la pasión física. La metáfora final de la fusión de las almas “de día somos dos, de noche solo uno” encapsula perfectamente la intensidad y el carácter absoluto del primer amor juvenil, y que decidí incluir debido a que estos versos iban a ser leídos frente a un público femenino durante un evento público 😛 (obviamente, lo escribí con pocas horas antes 😁).

← Volver a Archivo Danteva

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

El Contexto y el Conflicto

En esta pieza, Danteva se adentra en un territorio emocional sombrío, explorando la culpa, la desesperación y la muerte como una posible liberación. El autor de entonces recurre a una atmósfera onírica y pesada, donde el conflicto interno se proyecta en la naturaleza (“pesadas mareas del fango” o “llanto de los peces”).

Recuerdo que este fue uno de los poemas que más me costó estructurar, buscando ese tono elevado y casi épico. Recuerdo que en ese momento tenía bien estudiado las figuras retóritcas y queria impresionar a mi profesora de Lenguaje. Me fascina hoy la forma en que el poema, después de toda una batalla cósmica de “cielos lloraban” y “tierra se partía”, concluye con una resolución sorprendentemente simple: el perdón es tan “Simple como una lámpara” (esa antigua lámpara que miraba y miraba mientras escribía aquellos versos). Es un buen recordatorio de que a veces, las soluciones más profundas son las menos complejas.

← Volver a Archivo Danteva

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

Los Agujeros del Alma

En esta pieza, Danteva explora el despojo emocional y la fragilidad del hogar. El autor de entonces recurre a la personificación para dar cuerpo al vacío, manifestándolo como una figura “escuálida, triste y funesta de los mares” que recorre una casa 🏡(y la vida de otras personas). Este es uno de los poemas más oscuros de la colección, donde el miedo se convierte en algo físico y tangible.

Lo que más me llama la atención hoy es cómo la esperanza es vista no como una luz, sino como un grillete: “la esperanza que me encadena”. Esta idea de que la vida se sostiene por una obligación, no por un deseo puro, me parece una reflexión muy avanzada para la edad y que ahora me resulta muy comprensible debido a una extraña infancia. Sin embargo, si algo debo destacar es que en este poema intenté plasmar esa sensación de pequeñez que me daba la casa donde crecí pero en el transcurso, me desvié de tema al escribir 😅.

← Volver a Archivo Danteva

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

¿Qué es URDF?

El Formato Unificado de Descripción de Robótica (URDF) es un archivo XML que incluye la descripción física de un robot. Básicamente, es un modelo 3D con información sobre articulaciones, motores, masa, etc. Para más detalles sobre cómo crear tu propio robot en formato URDF, revisa nuestro post anterior.

¿Por dónde empezar?

Para crear nuestra aplicación y alojarla en un host web para presentar nuestro robot, utilizaremos las herramientas creadas con Three.js de gkjohnson/urdf-loaders. Es necesario tener conocimientos básicos sobre Three.js y cómo instalarlo localmente en nuestra PC. Puedes comenzar con este ejemplo básico desde su documentación oficial. Este demo fue realizado en un entorno Windows, pero se puede replicar en otros sistemas operativos. Al final de este post, dejaré algunos recursos útiles para usuarios de Windows que se utilizaron en este tutorial.

Para verificar una correcta instalación, basta con ejecutar en el terminal. Deberá devolver una salida con la versión como 10.7.0.

npm -v

your-project/
├── docs/                    # Carpeta de salida para GitHub Pages
│   ├── index.html           # ¡Contenido creado automáticamente!
│   └── ...                  # Otros archivos generados por Parcel
├── urdf/                    # Carpeta de archivos URDF
│   ├── robot/
│   │   ├── urdf/
│   │   │   ├── meshes/      # Archivos de malla para el robot
│   │   │   └── urdf/        # Archivos URDF del robot
│   │   └── ...              # Otros robots generados
├── src/                     # Código fuente de tu aplicación
│   ├── index.html           # Archivo HTML principal
│   ├── main.js              # Archivo JS principal
│   └── styles.css           # Archivo CSS principal
├── utils/                    # Código fuente de tu aplicación
│   ├── urdf-viewer-element.js  # Archivo del paquete urdf-loaders
│   └── ...                 # Otros archivos el paquete
├── test/                   # Carpeta de pruebas para compilar y servir
│   ├── index.html          # ¡Contenido creado automáticamente!
│   └── ...                 # Otros archivos generados por Parcel durante las pruebas
├── package.json            # Archivo de configuración de npm
└── .gitignore              # Archivos a ignorar por Git

"devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@types/three": "^0.164.0",
    "@webcomponents/webcomponentsjs": "^2.4.4",
    "babel-jest": "^29.5.0",
    "concurrently": "^6.2.1",
    "cssnano": "^7.0.4",
    "eslint": "^7.10.0",
    "eslint-plugin-jest": "^24.1.0",
    "jest": "^27.1.1",
    "jest-cli": "^27.1.1",
    "jsdom": "^17.0.0",
    "node-fetch": "^3.0.0",
    "nyc": "^15.1.0",
    "parcel-bundler": "^1.12.5",
    "postcss": "^8.4.39",
    "rollup": "^2.29.0",
    "static-server": "^3.0.0",
    "three": "^0.164.1",
    "typescript": "^4.4.3",
    "http-server": "^14.1.1"
  },
  "dependencies": {
    "parcel": "^2.12.0"
  }

"scripts": {
    "start": "concurrently \"parcel watch ./src/index.html --dist-dir ./test/ --public-url . --no-cache\" \"http-server ./\"",
    "build": "parcel build ./src/index.html --dist-dir ./docs/ --public-url ./ --no-cache --no-source-maps --no-content-hash"
}

/* globals */
...
import URDFManipulator from '../utils/urdf-manipulator-element.js';

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    ...
    <link href="styles.css" type="text/css" rel="stylesheet">
</head>

<body>
    ...
    <script type="module" src="./index.js"></script>
</body>'

npm start

initCamera() {
        this.camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        this.camera.position.z = 7;
        this.camera.zoom = 8;
    }

npm run build

<li urdf="./urdf/UR5/urdf/UR5.URDF" color="#37B7C3"><b>UR5</b></li>

your-project/
├── docs/                    # Carpeta de salida para GitHub Pages
│   ├── index.html
│   ├── urdf/                # Carpeta de archivo del robot
│   └── ...                  # Otros archivos creados al compilar

Recursos recomendados

1. Instalador de Node.js y npm según su página oficial mediante un gestor de versiones de Node como coreybutler/nvm-windows.

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

¿Qué es URDF?

El formato unificado de descripción de robótica (URDF) es un tipo de archivo XML que incluye la descripción física de un robot. Es básicamente un modelo 3D con información sobre articulaciones, motores, masa, etc. Estos archivos se ejecutan a través del Sistema Operativo de Robots (ROS). Los datos del archivo informan al operador humano sobre el aspecto y las capacidades del robot antes de que comiencen a operarlo.

Estos archivos también se utilizan en simuladores para probar el comportamiento del robot antes de su despliegue en el mundo real, o en la creación de un gemelo digital para la visualización en tiempo real y bidireccional del estado de un dispositivo robótico.

 1 <robot name="test_robot">
 2   <link name="link1" />
 3   <link name="link2" />
 4   <link name="link3" />
 5   <link name="link4" />
 6 
 7   <joint name="joint1" type="continuous">
 8     <parent link="link1"/>
 9     <child link="link2"/>
10     <origin xyz="5 3 0" rpy="0 0 0" />
11     <axis xyz="-0.9 0.15 0" />
12   </joint>
13 
14   <joint name="joint2" type="continuous">
15     <parent link="link1"/>
16     <child link="link3"/>
17     <origin xyz="-2 5 0" rpy="0 0 1.57" />
18     <axis xyz="-0.707 0.707 0" />
19   </joint>
20 
21   <joint name="joint3" type="continuous">
22     <parent link="link3"/>
23     <child link="link4"/>
24     <origin xyz="5 0 0" rpy="0 0 -1.57" />
25     <axis xyz="0.707 -0.707 0" />
26   </joint>
27 </robot>

Creando tu robot

Consideraciones CAD

Ya sea que dibujes desde cero o que reutilices archivos, deberás adaptar el modelado de tu dibujo teniendo en cuenta los requisitos solicitados en el paso de conversión o generación de nuestro archivo URDF (que dependerá del código del autor del script). Además, según el diseño CAD (por ejemplo, como “top-down” y “bottom-up”) esto será más o menos difícil en algunos casos dependiendo del proceso de modelado según el programa utilizado. En este caso, con ayuda de Fusion 360 con un diseño top-down, es necesario que los elementos de nuestro robot (eslabones y articulaciones o “links” y “joints” como se referirá a partir de ahora respectivamente) se conserve la siguiente distribución:

La Figura 4 ejemplifica que es necesario que en Fusion 360, las partes principales del robot se definan como componentes, creados a partir de subpartes (cuerpos). Manteniendo esta relación en todo momento, se garantiza y facilita la definición de links y joints de forma correcta.

En esta oportunidad, se utilizó como ejemplo el robot colaborativo UR5 de Universal Robots a lo largo de todo el post. Así, en la Figura 5 se aprecia la jerarquía de los componentes y cuerpos creados durante el dibujo. Por ejemplo, el segundo eslabón se compone de 9 subpartes (de tipo “body” en Fusion 360), evitando la anidación de componentes en todo momento.

Exportando un archivo URDF

Luego de realizar nuestro dibujo CAD, se recomienda utilizar un plugin para generar de forma automática y bajo la mesa, todo el código necesario para la descripción gráfica de nuestro robot. Esto nos permite centrarnos principalmente en lo importante durante el modelado. Sin embargo, dado que cada plugin disponible depende del software utilizado, como Solidworks, FreeCAD o Fusion360.

Para ello, se utilizó el plugin dheena2k2/fusion2urdf-ros2 para generar archivos URDF orientado a ROS2, el mismo que se basó en otro plugin de syuntoku14/fusion2urdf orientado a ROS1.

Importando a tu simulador

Finalmente, dependiendo del simulador a utilizar, se requerirán ciertos parámetros o configuraciones para importar correctamente el robot en formato URDF. En cualquier caso, se debe verificar siempre la relación entre links y joints y cómo reaccionan al movimiento de los joints.

Para CoppeliaSim

1. Dirigirse a la opción de importación según Modules -> Importers -> URDF importer.
2. Seleccionar la opción Convex hull of non-convex collision links para mejorar el rendimiento de simulación según la Figura 6.

3. Finalmente, el resultado se aprecia en la siguiente figura. Nótese la jerarquía de los elementos del robot, de forma secuencial, correspondiente a un robot de cadena abierta como el robot cooperativo UR5 en la Figura 7.

Por otro lado, CoppeliaSim ofrece una gran cantidad de robots comerciales incluidos en el programa para arrastrar al espacio de trabajo y comenzar a trabajar. Esto reduce el tiempo de creación del modelo cuando se pretende utilizar algún robot comercial disponible, como Sawyer, Kuka LBR4, Franka Emika Panda, etc. La Figura 8 muestra la simulación cinemática por defecto luego de importar el robot desde el panel navegador de robots.

¡Y ahí lo tienes! Siguiendo estos sencillos pasos, puedes crear y exportar tus propios archivos URDF desde Fusion 360, y usarlos para simular tus robots en CoppeliaSim o cualquier otro simulador compatible con URDF. ¡Feliz simulación!

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

Grados de libertad

Notas claves:

• Grados de libertad : Degree of Freedom en inglés se abrevia como DOF, dof, Dof, etc.
• Espacio de configuración: Configuration Space en ingés se abrevia com C-space. Es el conjunto de configuraciones o posturas posibles del robot en el espacio. Esto dependerá de la dimensión del espacio conocido como grados de libertad.
  
• Dimensiones del espacio comunes de un cuerpo rígido:
  • En el espacio: 6
    • Posición del cuerpo: Las coordenadas
    • Orientación del cuerpo: Por ejemplo, los ángulos rall, pitch y yaw.
  • En el plano: 3

Movimiento de Cuerpos Rígidos

• Representación implícita: Usamos esta representación para el C-space ya que al usar matrices de rotación y transformación de matrices, donde se utilizan mayor cantidad de variables sujetas a restricciones, para eliminar singularidades en la representación de orientacion y permitir operaciones algebraicas como parte del modelado.

• Sistema de referencia conectada a un cuerpo en movimiento: Se considera esta referencia, por ejemplo el frame , de tipo estacionario ya que es coincidente (en un instante particular) con la referencia conectada al cuerpo en movimiento.

Rotación de matrices

• 6 Restricciones en matrices de rotación : Ortogonalidad de vectores

  • Restriciones en las columnas: Los vectores unitarios deben ser unitarios: 3
  • El producto punto de alguno de dos de los vectores columna debe ser ser 0: 3
  • En consecuencia, se cumple que:
    • lo que conlleva a (regla de la mano derecha)
    • Lo que se agrupa en el conjunto de matrices reales 3x3 denominado Special orthogonal group SO(3)
    • Algunas propiedades relevantes:
      • Inversa:
        • Por lo tanto la inversa de es también .
      • Cierre:
      • Finalmente:

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

Sistemas de Referencia (Reference Frames)

Notar que:

• Sistema de referencia normalmente se abrevia como “frame”.

Sistema de Referencia no Inercial (Non-Inertial Reference Frame)

Pero que pasa si no es una constante?

Importante

El sistema de referencia tiene una aceleración relativa a S.

Por lo tanto,

Donde:

• es la fuerza físicamente aplicada al cuerpo.
  
• . Dado un observador en el sistema de referencia o frame que desea explicar el comportamiento de las fuerzas de un cuerpo, no solo debe invocar todas las fuerzas físcias sobre un objeto, como la gravedad, fuerza de impulsión, etc; sino que es necesario considerar una fuerza aparente o ficticia. Esta fuerza es un artefacto debido al sistema de coordenadas no inerciales ().

Tip

Considerando el moviendo de rotación “circular” de un objeto alrededor de algún punto central implica la presencia de acelearaciones hacia el interior (centro del círculo). Como consecuencia de ello, un sistema de referencia no inercial en rotación alrededor de la tierra es acelerado respecto de un sistema inercial lo que genera en una fuerza ficticia de dos tipos: Fuerza centrífuga y Fuerza de Coriolis.

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

Propósito de la plantilla de la Revista

Este artiículo facilita y agiliza el proceso de edición de los artículos mediante el uso de un formato basado en código . Aunque su correcto manejo requiere cierto conocimiento de instrucciones básicas, este artículo proporciona una guía didáctica destinada a usuarios no familiarizados con . El objetivo es que estos usuarios puedan faciliar la edición de la plantilla por parte de la Revista utilizando herramientas ampliamente disponibles, lo que garantiza un envío exitoso de sus artículos para revisión y publicación.

En este caso particular, se ha considerado esta guía en base a los requisitos de publicación en la revista universitaria Norte Médico de la Universidad Nacional de Cajamarca.

Vista previa de la plantilla

knitr::include_graphics("images/1_revistaVistaPrevia.png")

Consideracions esenciales para envio del formato

knitr::include_graphics("images/1_10_EditorEcuacionesOffline.png")

knitr::include_graphics("images/1_20_EditorEcuacionesOnline.png")

knitr::include_graphics("images/3_10_Tabla1.png")

knitr::include_graphics("images/3_20_Tabla2.png")

knitr::include_graphics("images/4_10_SoloFigura_excel.png")

knitr::include_graphics("images/4_20_Tabla2ConFigura.png")

knitr::include_graphics("images/4_30_GuardarTablasExcel.png")

Manejo de Bibliografía

Para la bibliografía se utiliza el programa administrador de citas conocido como Zotero. Ver la siguiente guía.

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

Modificar el tamaño de tablas

Muchas veces el contenido de una tabla sobrepasa los límites de la hoja como el ancho del formato utilizado en una o dos columnas. Para ello, existen múltiples maneras de adaptar el extenso contenido de una celda en múltiples lineas utilizando el entorno básico \begin{tabular}...\end{tabular}. Sin embargo, resulta tedioso realizar el mismo tratamiento para cada tabla y ni que decir en diversos archivos. Así que una solución práctica es dejar que calcule el ancho de las columnas de forma automática y se ajuste al contenido deseado, definiendo el tipo de alineación de las columnas y ancho máximo de la tabla. Para ello, se recomienda el uso del entorno \begin{tabularx}…\end{tabularx} luego de cargar el paquete \usepackage{tabularx} en el encabezado del archivo .tex.

Pero antes de presentar los ejemplos, es necesario mostrar las diferencias entre la terminología utilizada para definir la longitud de una línea de texto (\textwidth) y columna (\linewidth) cuando se utiliza una configuración en una o dos columnas, incluido en un entorno de lista.

Ajustando al ancho de la hoja

Una sola columna

Utilizando el entorno de tablas por defecto \begin{tabular}...\end{tabular}, el resultado es el siguiente:

knitr::include_graphics("images/30.png")

\begin{table}[h]
  \centering
  \caption{Casos de conducta suicida}
  \begin{tabular}{ccccc}
    \toprule
    Caso  & Edad  & Sexo  & Tóxico & Conducta Suicida \\
    \midrule
    1     & 19    & Masculino & Raticida & Suicidio \\
    2     & 14    & Femenino & Indeterminado & Suicidio \\
    3     & 16    & Femenino & Indeterminado & Suicidio \\
    4     & 26    & Masculino & Raticida & Intento de suicidio \\
    5     & 18    & Masculino & Órgano fosforado & Intento de suicidio \\
    6     & 50    & Masculino & Órgano fosforado y etanol & Intento de suicidio \\
    \bottomrule
  \end{tabular}
  \label{tab:Tabla0}
\end{table}

Importante

En la sentencia \begin{tabular}{ccccc}, cada valor de c indica la alineación ordenada de las columnas. En este caso, la tabla tiene cinco columnas con el contenido centrado c. Otros valores como l y r indican una alineación a la izquierda y derecha respectivamente.

Por otro lado, el ancho de la tabla anterior puede modificarse de forma intuitiva utilizando el paquete tabularx que trabaja con el espaciado horizontal.

Importante

A diferencia de las alineaciones c, l y r, tabularx ofrece una nueva alineación por defecto X que permite justificar el contenido de la columna. Siendo muy útil para contenidos extensos.

Para ello se modifica el entorno de tabla \begin{tabular}...\end{tabular} por \begin{tabularx}...\end{tabularx}.

1. Al ancho total de una línea de texto. Para ello se utiliza el comando \begin{tabularx}{\linewidth}{cccXX}. Donde {\textwidth} indica que el ancho máximo de la tabla es el ancho total de la hoja (configuración de una columna) según se aprecia en la Tabla ?@fig-tabla1.
   
2. A la mitad de la ancho de una línea de texto. Para ello se especifica la proporción deseada respecto del ancho base \textwidth. La Tabla Figura 1 utiliza un ancho reducido al 80% de la tabla anterior definiendo \begin{tabularx}{0.8\textwidth}{cccXX}.
   
3. Cuidado!!! Disminuir demasiado el ancho puede superponerse el contenido de las celdas en la tabla. La tabla ?@fig-tabla3 muestra una reducción del 50% según \begin{tabularx}{0.5\textwidth}{cccXX}.

knitr::include_graphics("images/40.png")

knitr::include_graphics("images/60.png")

Dos columnas

En un formato de dos columnas, el ancho de cada tabla esta restringido al ancho de cada columna definida por \linewidth.

1. Utilizando la configuración de centrado X para columnas con contenido extenso. En la Figura 1.5, la configuración de centrado de columnas centro-centro-centro-X-X ordena el contenido de las columnsas por defecto. No obstante existe superposición de contenido entre celdas contiguas. Haciendo uso del siguiente comando \begin{tabularx}{\linewidth}{cccXX}.
   

2. Modificando la separación entre columnas. Es posible modificar el espacio entre columnas por defecto y ajustar más el contenido de la Tabla 1.6 de ser necesario. Haciendo uso del siguiente comando \setlength\tabcolsep{0.7mm}.
   

3. Creación de nuevos argumentos para el control y alineación de columnas. La distribución del contenido de las columnas puede mejorarse aun más si se combina con la creación de nuevos argumentos para ajustar el contenido. Así, utilizando el comando \newcolumntype{nombre}[argumento]{Definición} se definieron tres alineaciones automáticas basadas en X utilizando los criterios de centrado (\centering), a la derecha (\raggedleft) e izquierda (\raggedright). Así, la configuración para la Figura 1.7 fue \begin{tabularx}{\linewidth}{cccXC{1}}. Donde las nuevas alineaciones se definieron como:

    ```
    \newcolumntype{L}[1]{>{\hsize=#1\hsize\raggedright\arraybackslash}X}
    \newcolumntype{R}[1]{>{\hsize=#1\hsize\raggedleft\arraybackslash}X}
    \newcolumntype{C}[1]{>{\hsize=#1\hsize\centering\arraybackslash}X}
    ```

   Donde el parámetro C{1} indica la proporción respecto del ancho base de la columna. En este caso, el valor 1 indica el ancho por defecto.
   

4. Utilizando la configuración \begin{tabularx}{\linewidth}{cccC{1}C{1}} en la Tabla 1.8.
   

5. Utilizando la configuración \begin{tabularx}{\linewidth}{cccR{1}R{1}}en la Tabla 1.9.

knitr::include_graphics("images/700.png")

6. Modificando el propio ancho de la columna. Utilizando el comando \begin{tabularx}{\linewidth}{L{1} L{0.7} R{0.7} C{1.6}}. Por lo tanto, la cuarta columna se adapta mejor un contenido más extenso a comparación con las otras columnas.

knitr::include_graphics("images/120.png")

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

¿A quien va dirigido?

La presente guía tiene como objetivo presentar un flujo de trabajo para la generación de reportes universitarios, literarios, científicos y más de alta calidad, bajo la modalidad colaborativa en la nube utilizando la plataforma web Overleaf y el administrador de referencias Zotero. Esta guía es útil para nuevos usuarios que desean comenzar en el mundo de o buscan una alternativa práctica y open-source a editores de texto comerciales. Siendo su principal ventaja, centrarse menos en la forma del documento y más en el fondo del mismo. Pero sobre todo, para todos aquellos estudiantes y profesionales que prefieren aprender lo básico en idioma español.

Gestor de Referencias

En esta oportunidad, se recomienda el uso de Zotero por la evidente ventaja y flexibilidad sobre otros programas en el mercado gracias a la gran cantidad de plugins o extensiones que mejoran, simplifican y enlazan el manejo de referencias bibliográficas, tanto para editar libros, páginas web, blogs, etc.

1. Crearse una cuenta de forma gratuita en su página oficial.

2. Descargar el programa e instalar según tu sistema operativo de preferencia. La pantalla principal se verá así.

   

3. Descargar e instalar el plugin Zotero Better Bibtex más reciente (desde Github) para el control y creación de etiquetas automáticas (identificador que deberás escribir para especificar una referencia particular) para citar de forma fácil y ordenada durante la redacción de documentos.

   1. Ir a la pestaña de Herramientas, luego a Complementos que abrirá una nueva ventana.

      

   2. Ir a Configuración ⚙️ y escoger instalar desde un archivo (install Add-on From File). Buscar y seleccionar el archivo previamente descargado (por ejemplo zotero-better-bibtex-6.7.1.xpi). Reiniciar el programa.

      

   3. Repetir el paso 1 y el plugin ahora debe aparecer instalado así.

      

   4. Ahora lo más importante es modificar la configuración por defecto de las etiquetas de citación (citation key). Término que tal vez te resulte familiar si tienes experiencia con , Markdown, Rmarkdown o Quarto. En cualquier caso, una etiqueta es la palabra clave por el que identificarás una fuente específica a la hora de relacionar y crear una cita para algún documento científico, libro, página web, etc. Dependiendo del formato de etiqueta que desees por comodidad, el parámetro a modificar será diferente. Por conveniencia, se utiliza el formato APA compuesto por el primer apellido del autor principal y el año de publicación¹.

   5. Ir a la pestaña Editar y luego a Preferencias que abrirá una nueva ventana. Ir a la opción Better BibTex y a la subpestaña Citation keys.

      En el espacio New citation key format modificar a auth.capitalize+year .

      

   6. En este punto, cualquier archivo nuevo que se agregue a tu biblioteca, estará asociado a una etiqueta reconocible para su fácil manejo y memorización a la hora de buscar alguna cita. En caso de repetirse citas, el plugin tiene la capacidad de diferenciarlos por letras al final de la etiqueta según su antiguedad, por ejemplo, Cryan2019a, Cryan2019b, etc.

      

4. Armar tu biblioteca Zotero

   Antes de explicar como agregar nuevas fuentes, es necesario saber dos aspectos importantes:

   • Tu biblioteca puede organizarse como cualquier organizador de archivos: Carpetas y subcarpetas 📁.

   • Existen dos bibliotecas principales: Mi biblioteca y Bibliotecas de grupo. La primera es para tu manejo personal y los documentos agregados solo podrán ser manipulados por ti. Por el contrario, los de tipo grupal pueden compartirse con otros usuarios de Zotero, incluso con privilegios de modificación (agregar notas 📔, adjuntar archivos 🔗, comentar 📝, etc.). En pocas palabras, investigación colaborativa 🧑‍🤝‍🧑.

   1. Desde la aplicación de escritorio 🖥️

      1. Método 1 (El mejor método 😃): La forma más elegante es buscar los códigos de la publicación como DOI, ISBN, PMID, arXiv, etc. En el caso de artículos científicos, el código está casi siempre en la página de publicación. Solo basta con copiar, pegar, presionar enter y voilà : Toda la información ha sido agregado. Si tienes suerte (o mejor dicho si la publicación es open-access), el archivo pdf aparecerá como adjunto . Sino adjuntarlo de forma manual click derecho a tu cita agregada -> Añadir adjunto -> Añadir copia guardada.

         

         

         

      2. Método 2 (Cuando no tienes opción 😑): El ingreso se realiza de forma manual y según el tipo de fuente bibliográfica (revista, libro, etc.), los datos requeridos pueden variar (al menos un autor y el título son necesarios).

   2. Desde tu navegador de búsqueda 🌐

      La magia de utilizar una extensión (add-on) desde tu navegador favorito, es que Zotero Connector permite guardar la información de la página web con un solo click (utilizando metadata) a tu biblioteca.

      

Entorno colaborativo para creación de documentos

Si bien existen múltiples editores o aplicaciones web de moda para escribir documentos de forma colaborativa en tiempo real como GoogleDocs, Microsoft Office 365, Jupyter, la mayoría de ellos siguen el estilo de redacción “What you see, what you get” , que en otras palabras, la configuración y personalización de los estilos de texto se realizan mediante la interfaz del programa al presionar botones (por ejemplo, la clásica justificación de texto en Microsoft Word que todos hemos realizado alguna vez). Sin embargo, existen otros editores que utilizan código plano mediante instrucciones específicas (algunas palabras claves que hay que memorizarse 😢) que pueden realizar lo mismo o incluso, mayor personalización.

Tal es el caso de los editores que trabajan como entornos para la preparación de artículos científicos. Si bien su uso desde una aplicación de escritorio implica la instalación de algunos programas, editores y paquetes desde un super repositorio, en esta oportunidad, se recomienda el uso de editores online que se encargan de todo ese trabajo aburrido y concentrarte principalmente en escribir , que es para lo que estamos aquí. Así, la mejor opción que te recomiendo es comenzar con Overleaf, ya que cuenta con más de 15 000 plantillas, desde como hacer un currículum vitae profesional hasta utilizar los formatos de publicación de las revistas indexadas más conocidas. En cualquier caso, la creación de una nueva plantilla establece la configuración mínima reproducible para generar tu documento en formato pdf (curiosamente es el único formato que puede exportarse pero el más utilizado para compartir en la nube ☁️😂☁️).

1. Crearse una cuenta desde la página oficial. Por recomendación, utilizar el mismo correo electrónico de su cuenta Zotero.

   

2. Escoger alguna plantilla para comenzar a escribir. Una vez seleccionada, se abrirá el entorno de edición. Para seleccionar otra plantilla, ir a Templates o si prefieres escoger alguno otro previamente creado, ir a Projects o presionar .

   

3. El editor se compone de cuatro paneles principales según:

   

   Donde,

   1. El administrador de archivos. Contiene distintos ficheros para la creación del documento, como el fichero base (.tex), los distintos estilos de la plantilla si existen (.cls, ⚠️ no modificar a menos que tengas conocimiento previo), el archivo de referencias (.bib), figuras, etc.

   2. El editor de documentos. Todo el texto deseado se escribe dentro de los límites definidos por las sentencias \begin{document} … \end{document}.

   3. Salida del documento. El documento es creado por la compilación del código y su exportación en formato pdf, al presionar el botón superior derecho Recompile.

   4. Chat. Para la comunicación entre colaboradores.

Sentencias necesarias

Código	Salida
\section{Título 1} \subsection{Título 2} \subsubsection{Título 3} \subsubsection{Título 4}
\begin{figure} \centering \includegraphics[width="valor"]{cat.jpg} \caption{A cat.} \label{fig:etiqueta1} \end{figure} Donde “valor” puede ser: Ancho máximo de la hoja para escribir: \textwidth. Ancho máximo de una columna: \linewidth. Ancho por unidades métricas: 2cm, 20mm, 40em, 1in.

Tip

Para leer más sobre \linewdith y \textwidth y sus diferencias, revisar aquí.

\documentclass{article}
\usepackage{subfig}
\begin{document}
\begin{figure}
  \centering
  \subfloat[Un lemur.]{\includegraphics[width=0.4\linewidth]{lemur.jpg}}
  \subfloat[Un lobo.]{\includegraphics[width=0.4\linewidth]{fox.jpg}}
  \caption{Animales random.}
  \label{fig:etiqueta2}
\end{figure}
\end{document}

\begin{table} \centering \begin{tabular}{l|r} \hline Variable & Cantidad \\ \hline Presión & 0.5 kPa \\ Fuerza & 2 N \\ Masa & 5 kg\\ \hline \end{tabular} \caption{Ejemplo de una tabla.} \label{tab:Tabla1} \end{table}

\begin{equation}
  F = G\left[{\frac{{{m_1}{m_2}}}{{{r^2}}}}\right]
  \label{eq:Eq1}
\end{equation}

Tip

Para crear las ecuaciones de forma rápida y fácil se recomienda el uso páginas web gratis para escribir de forma gráfica (símbolos, texto, etc.) como latex.codecogs, latexeditor, latex4technics y más; o en forma offline, con programas como MathType para insertar el código directamente entre los entornos de ecuaciones \begin{equation} … \end{equation} o a nivel del texto usando $ … $ o \( … \). Por ejemplo, esta ecuación de aquí se escribe como $\sum a^{i} + \epsilon$.

Mayor información acerca de los entornos de ecuaciones, símbolos matemáticos (, etc.) y sus ejemplos pueden encontrarse en esta corta pero útil guía (en inglés).

\begin{enumerate} \item Monday \item Tuesday \end{enumerate} \begin{itemize} \item Twitter \item Discord \end{itemize}

\section{Como referenciar una figura, una tabla y citar}
Realizando una referencia cruzada a la Figura \ref{fig:Figura1}. A la Tabla \ref{tab:Tabla1}.

\section{Como citar y agregar una lista de referencias}
Aquí va una cita textual \cite{Abbasi2019} y otra de tipo indirecta \citep{Anwar2020} en formato APA7.

\printbibliography[heading=bibintoc, title={Referencias Bibliográficas}]

TipMás allá de esta guía

Overleaf ofrece las herramientas básicas para un trabajo colaborativo en la nube, con las ventajas de crear reportes de alta calidad en de forma sencilla, sin tener que preocuparte por su instalación y actualización de paquetes (códigos específicos para modificar el formato como figuras, colores, formas geométricas, encabezados, bloques de código de programación, anexos, tablas, etc.), y aumentar la productividad de tu escritura. Y que junto al gestor de referencias de Zotero, puede obtenerse un fácil guardado, modificación y exportación de referencias bibliográficas correctamente formateadas para su trabajo desde Overleaf o con cualquier otro editor disponible.

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí

A quien va dirigido?

A todas los profesionales en nutrición que desean planificar o programar sus dietas nutricionales en base a la composición nutricional de diversos alimentos en la cocina peruana según la cantidad deseada.

Implementación

Versión 2 ✅:

• Se incluyeron alimentos compuestos como platos de entrada y almuerzo.
  
• Se incluyó la tabla de anexos de codigos de componentes.
  
• Se centró el contenido de las tablas.
• Se mejoró la salida luego de seleccionar cada tabla principal y se incluyó una opción de copiado.

Versión 1 :

• Es posible calcular cualquier composición en base a la cantidad ingresada por el usuario en gramos.

• Solo se incluyeron alimentos individuales y no compuestos.

setwd("Ruta/a/tu/proyecto/")

library(shiny)
library(DT) # Manejo de tablas en formato Data Frame
library(shinyjs)

# Cargar datos para alimentos individuales
1alimentos <- read.csv("alimentos.csv")
colnames(alimentos) <- c(
    "COD", "NUM", "ALIMENTO", "ENERCKCAL", "ENERCKJ", "WATER", "PROCNT",
    "FAT", "CHOCDF", "ZN", "K", "P", "FE", "VITA",
    "ACFOLIC", "VITC", "NA"
)
alimentos <- alimentos[, c(
    "COD", "NUM", "ALIMENTO", "ENERCKCAL", "ENERCKJ", "WATER", "PROCNT",
    "FAT", "CHOCDF", "ZN", "K", "P", "FE", "VITA", "ACFOLIC", "VITC", "NA"
)]

# Cargar datos para alimentos compuestos
2platos <- read.csv("alimentosCompuestos.csv")
colnames(platos) <- c(
    "COD", "NUM", "ALIMENTO", "ENERCKCAL", "ENERCKJ", "WATER", "PROCNT",
    "FAT", "CHOCDF", "CHOAVL", "FIBTG", "ASH", "CA", "P", "ZN", "FE", "VITA", "THIA",
    "RIBF", "NIA", "VITC", "ACFOLIC", "NA", "K", "ESTRATO"
)
platos <- platos[, c(
    "COD", "NUM", "ALIMENTO", "ENERCKCAL", "ENERCKJ", "WATER", "PROCNT", "FAT", "CHOCDF",
    "ZN", "K", "P", "FE", "VITA", "ACFOLIC", "VITC", "NA"
)]


# Creamos tablas de Anexo
3codigo <- c("A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "Q", "T", "U", "SE", "SS")
categoria <- c(
    "Cereales y derivados", "Verduras, hortalizas y derivados", "Frutas y derivados",
    "Grasas, aceites y oleaginosas", "Pescados y mariscos", "Carnes y derivados",
    "Leche y derivados", "Bebidas (alcohólicas y analcohólicas)", "Huevos y derivados",
    "Productos azucarados", "Misceláneos", "Alimentos infantiles", "Leguminosas y derivados",
    "Tubérculos, raíces y derivados", "Alimentos preparados (entrada)",
    "Alimentos preparados (segundo)"
)
codigoGrupo <- data.frame(codigo, categoria)
colnames(codigoGrupo) <- c("Código", "Categoría")


# Cargas coódigos de componentes - Anexo
4anexoCodigo <- read.csv("anexosCodigoComponentes.csv")
colnames(anexoCodigo) <- c("Componente", "Identificador INFOODS", "Unidad", "Comentario")

# Definir interfaz
5ui <- fluidPage(
6    includeCSS("styles.css"),
    titlePanel("TABLAS PERUANAS DE COMPOSICIÓN DE ALIMENTOS - 2017"),
    h2(tags$a("Fuente: Centro Nacional de Alimentación y Nutrición, 2017, Ministerio de Salud del Perú, Lima.",
        href = "https://www.gob.pe/institucion/ins/informes-publicaciones/4231115-tablas-peruanas-de-composicion-de-alimentos"
    )),
    h3("Modificado para uso particular en planificación de dietas. Basado en la experiencia de Rosa Zavaleta Gavidia (Nutricionista CNP: 5681)."),
    h3(class = "bold-text", "Nota: Composición en 100 g de alimento"),
7    numericInput("proportion", "Nueva composición (gramos)?", value = 100, min = 1, max = 500),
8    useShinyjs(),
9    tabsetPanel(
        tabPanel(
            "Alimentos individuales",
            dataTableOutput("foodTable1"),
            h4(class = "bold-text", "Componentes seleccionados:"),
            tableOutput("selectedData1"),
            actionButton("copyButton1", "Copiar datos seleccionados")
        ),
        tabPanel(
            "Alimentos en platos",
            dataTableOutput("foodTable2"),
            h4("Componentes seleccionados:"),
            tableOutput("selectedData2"),
            actionButton("copyButton2", "Copiar datos seleccionados")
        ),
        tabPanel(
            "Códigos y grupos",
            tableOutput("codigoGrupos"),
            tableOutput("codigoComponentes")
        )
    ),
    hr(),
10    tags$div(
        class = "footer",
        style = "text-align: center; background-color: #333; color: #fff; padding: 20px;",
        tags$h4("¿Te ha gustado esta App?"),
        tags$p(
            "¡Esta aplicación ha sido desarrollada con ",
            tags$a(
                href = "https://shiny.rstudio.com/",
                style = "color: #ffcc00; font-weight: bold;",
                "R Shiny"
            ),
            "!"
        ),
        tags$p(
            "Si quieres aprender más sobre Shiny y crear tus propias aplicaciones interactivas, ",
            tags$a(
                href = "https://shiny.rstudio.com/tutorial/",
                style = "color: #ffcc00; font-weight: bold;",
                "haz clic aquí"
            ),
            " para acceder al tutorial oficial."
        ),
        tags$p(
            "¡Comienza a explorar el poder de Shiny hoy mismo!",
            style = "font-weight: bold;"
        )
    )
)

# Definir server
server <- function(input, output, session) {
11    getComposition <- function(input_table) {
        proportionConversion <- input$proportion
        idx <- input[[input_table]]
        selectedRow <- alimentos[idx, c("PROCNT", "FAT", "CHOCDF", "ZN", "K", "P", "FE", "VITA", "ACFOLIC", "VITC", "NA")]
        selectedRow <- selectedRow * proportionConversion / 100
        rownames(selectedRow) <- NULL
        selectedRow
    }

12    output$foodTable1 <- renderDataTable(
        alimentos,
        server = FALSE, selection = "single",
        options = list(
            pageLength = 15,
            columnDefs = list(
                list(
                    targets = "_all",
                    className = "dt-center"
                )
            )
        )
    )

13    output$selectedData1 <- renderTable({
        getComposition("foodTable1_rows_selected")
    })

    output$foodTable2 <- renderDataTable(
        platos,
        server = FALSE, selection = "single",
        options = list(
            pageLength = 15,
            columnDefs = list(
                list(
                    targets = "_all",
                    className = "dt-center"
                )
            )
        )
    )

    output$selectedData2 <- renderTable({
        getComposition("foodTable2_rows_selected")
    })

14    output$codigoGrupos <- renderTable(codigoGrupo)

    output$codigoComponentes <- renderTable(anexoCodigo)

15    observeEvent(input$copyButton1, {
        selectedData <- getComposition("foodTable1_rows_selected")
        if (length(input$foodTable1_rows_selected) > 0) {
            clipboard <- apply(selectedData, 2, paste, collapse = " ")
            writeClipboard(clipboard)
            shinyjs::alert("Datos copiados al portapapeles")
        } else {
            shinyjs::alert("Selecciona una fila para copiar los datos")
        }
    })

    observeEvent(input$copyButton2, {
        selectedData <- getComposition("foodTable2_rows_selected")
        if (length(input$foodTable2_rows_selected) > 0) {
            clipboard <- apply(selectedData, 2, paste, collapse = " ")
            writeClipboard(clipboard)
            shinyjs::alert("Datos copiados al portapapeles")
        } else {
            shinyjs::alert("Selecciona una fila para copiar los datos")
        }
    })
}

# Ejecutar la aplicación Shiny
16shinyApp(ui, server)

El demo ⏩

TipMás allá de esta guía

Revisar la página oficial para obtener las Tablas de Composición completas

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí