#+title: Prueba de exportación a TiddlyWiki
#+author: Notxor
#+tags: Herramientas Contenido
#+date: <2021-12-02 jue>

title: MiExportaciónDos

caption: Exportación hecha con un poco más de cariño

tags: Prueba [[porque sí]]


{{!!caption}}

| Etiqueta | Valor         |
|----------+---------------|
| title    | {{!!title}}   |
| caption  | {{!!caption}} |
| tags     | {{!!tags}}    |
|          |               |

Esto es una prueba de /exportación-importación/ de contenido entre
/Emacs/ y /TiddlyWiki/ con el objetivo de determinar si puedo tener lo
mejor de ambos mundos trabajando conjuntamente. Es decir:

+ /Emacs/ como magnífico editor de contenido con sus infinitas
  posibilidades y herramientas para generarlo.
+ /TiddlyWiki/ como magnífico gestor del contenido con sus infinitas
  posibilidades para buscar, enlazar y mostrar la información.

El asunto es mostrar información compleja en este archivo, guardarlo y
exportarlo como /tiddler/, incrustando código e imágenes. El texto
puede mostrar *negritas*, /itálicas/, +tachados+, _subrayados_,
~fuente fija~ o =verbatim=, como en todos los sistemas de «etiquetado» de
texto.

Bloques de exportación directa a /HTML/:

#+begin_export html
  <h1 align="center">La cuadratura del círculo</h1>
  <!-- Se pueden utilizar estilos para el objeto SVG -->
  <style>
   .verde {
       stroke: #006600;
       fill  : #00cc00;
   }
   .rojo {
       stroke: #660000;
       fill  : #cc0000;
   }
  </style>
  <!-- Se pueden agrupar elementos SVG en otros objetos HTML -->
  <p align="center">
    <svg viewBox="0 0 250 100" width="250" height="100"> 
      <a target="_blank"
         xlink:href="https://www.w3.org/Graphics/SVG/">
        <rect id="circulo" x="50" y="10" rx="40" ry="40" height="80" width="80" stroke-width="4" class="verde"/>
      </a>
      <rect id="cuadrado" x="150" y="10" rx="0" ry="0" height="80" width="80" stroke-width="4" class="rojo"/>
    </svg>
  </p>
#+end_export

También podemos meter /citas/ textuales:

#+begin_quote
En un lugar de la mancha de cuyo nombre no quiero acordarme...

Vale, tampoco voy a escribir el Quijote aquí. Con un par de frases ya
me vale.
#+end_quote

Bloques de código (éste viene con un gráfico /Graphviz/):

#+begin_src dot :file procesos-graphviz.svg :export code :cmdline -Tsvg :exports both
digraph G {

  subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
      a0 -> a1 -> a2 -> a3;
      label = "process #1";
    }

  subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
  }
  start -> a0;
  start -> b0;
  a1 -> b3;
  b2 -> a3;
  a3 -> a0;
  a3 -> end;
  b3 -> end;

  start [shape=Mdiamond];
  end [shape=Msquare];
}
#+end_src

#+RESULTS:
[[file:procesos-graphviz.svg]]

Y ahora un bloque de código sólo para ver cómo se muestra en pantalla:

#+begin_src js
   function cuadratura(value) {
       // Establece el valor de redondeo de las esquinas de los dos
       // objetos del SVG. Obsérvese que se obtienen mediante `Id`
       var circulo = document.getElementById("circulo");
       var cuadrado = document.getElementById("cuadrado");
       var etiqueta = document.getElementById("etiqueta");
       circulo.setAttribute("rx", value);
       circulo.setAttribute("ry", value);
       cuadrado.setAttribute("rx", 40 - value);
       cuadrado.setAttribute("ry", 40 - value);
       etiqueta.innerHTML = value;
   }
#+end_src

Veamos cómo queda todo en un /tiddler/.