Y enlaces para toquetear el código que vimos (y el de otras tarjetas).
Prueba a cambiar cosas de mis tarjetas para entender cómo están hechas.
Datos de la tarjeta
{{Campo}}
Escribo {{Capital}} donde quiero que aparezca "París".
Escribe la respuesta
{{type:Campo}}
Si escribo {{type:Capital}} me pedirá que escriba "París".
...no te obliga a escribirlo pero te da espacio para escribir y te corrige lo que escribes.
Condicionales
{{#A}} Cacho que sólo veo si hay A {{/A}}
Si escribo un cacho de la tarjeta entre {{#Campo}} y {{/Campo}},
ese cacho sólo se verá en las tarjetas que tengan algo escrito en "Campo".
Por ejemplo, puedo añadir así un apartado que sólo aparece si hay curiosidades:
{{#Curiosidad}} La curiosidad es: {{Curiosidad}}. {{/Curiosidad}}
Condicional inverso
{{^A}} Cacho que sólo veo si NO hay A {{/A}}
Funciona igual que el condicional normal, pero lleva ^ en lugar de #
{{^Curiosidad}} Esta capital no tiene nada de curioso. {{/Curiosidad}}
Salto de línea
<br>
Aquí está la primera línea,<br>
Y aquí está la segunda.
Línea horizontal
<hr>
Texto antes de la línea<hr>
Negrita
<b>cosas gruesas</b>
Deben rodear <b>el cacho</b> que quieres resaltar.
Cursiva
<i>cosas italianas</i>
El texto que quieras torcido, <i>entre las etiquetas</i>.
Párrafo
<p>texto a su bola</p>
<p>
El texto de aquí dentro tendrá márgenes arriba y abajo.
</p>.
Sección
<div>texto no tan a su bola</div>
<div>
Este texto quería separarlo espiritualmente de lo demás textos.<br>
No cambia nada (va a tener el mismo contacto social con los demás).<br>
...pero como está delimitado podré ponerle nombre para decorar..<br>
</div>.
Texto especialito
<span>palabras distintas de sus vecinas</span>
De esta frase, <span>esto</span> se merecía un trato especial.<br>
No cambia nada (va a tener el mismo contacto social con el resto de la frase).<br>
...pero como está delimitado podré ponerle nombre para decorar..<br>
Tabla
<table>
<tr>
<th>cabecera izquierda</th>
<th>cabecera derecha</th>
</tr>
<tr>
<td>casilla normal izquierda</td>
<td>casilla normal derecha</td>
</tr>
</table>
<table> lo engloba todo,
<tr> engloba las filas.
Dentro de la primera fila las casillas serán <th>.
Dentro de las demás filas las casillas serán <td>.
| cabecera izquierda | cabecera derecha |
|---|---|
| casilla normal izquierda | casilla normal derecha |
Combinar celdas
<table>
<tr>
<th colspan="2">esto ocupa dos columnas</th>
<td rowspan="2">esto ocupa dos filas</th>
</tr>
<tr>
<td>casilla normal izquierda</td>
<td>casilla normal derecha</td>
</tr>
</table>
Podemos hacer que una celda ocupe dos columnas añadiendo colspan="2".
(y por tanto nos saltamos la siguiente columna)
Y podemos hacer lo mismo con las filas poniendo rowspan="2".
(y por tanto en la siguiente fila no ponemos esa columna)
| esto ocupa dos columnas | esto ocupa dos filas | |
|---|---|---|
| casilla normal izquierda | casilla normal derecha | |
Poner nombre a las cosas
<p class="nombre">
Párrafo que tiene nombre
</p>
Cualquier etiqueta puede tener nombre.
Lo típico son cachos de una tabla, secciones, párrafos...
Darle nombre nos permite luego elegir su aspecto desde el CSS.
...y puede tener varios nombres a la vez: class="nombre1 nombre2".
Poner DNI a las cosas
<p id="identificador">
Párrafo que tiene DNI.
</p>
Cualquier etiqueta puede tener identificador.
Darle identificador nos permite hacer trastadas desde JavaScript.
Cada cosa puede tener sólo un id, y nadie más puede tener ese mismo id.
Acceder a las cosas por el tipo
td {
colorinchis-y-cosas;
}
Para cambiar el aspecto de las casillas normales <td> de las tablas.
Cuidado que si es una etiqueta no lleva punto.
Acceder a las cosas por el nombre
.nombre {
colorinchis-y-cosas;
}
Para cambiar el aspecto de algo que tenga class="nombre".
Ojo que si es una clase (un nombre) tiene que llevar punto.
Aspecto general de la tarjeta
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
Anki lleva una clase previa que lo engloba todo .card.
Aquí podemos cambiar las pintas generales de todo antes de meternos a los detalles.
Bordes de las tablas
table, td, th {
border: 1px solid black;
border-collapse: collapse;
}
Podemos aplicar el mismo estilo a varias cosas a la vez: table, td, th.
Si no usamos border: no veremos la tabla (el borde será invisible).
border-collapse: el borde será doble (tendrán borde la tabla y las casillas).
Márgenes
table {
margin-left: auto;
margin-right: auto;
}
Si queremos alinear la tabla en la tarjeta, podemos elegir los márgenes.
Poniendo auto a ambos lados se centra ella sola.
Ancho y alto
.casilla {
width: 300px;
height: 100px;
}
Podemos elegir las medidas de elementos de la tabla (o de la tabla entera).
Ponemos width o height, y la cantidad de píxeles.
Consideraciones previas
Para poder usar esto directamente desde Anki tienes que tener LaTeX en el ordenador.
Eso significa tener descargado MacTeX (Mac) o MiKTeX (Windows).
A pesar de eso, una alternativa fácil es crear las ecuaciones en el editor de codecogs,
en google docs (AutoLaTeX Equations) o en google slides (Equation Editor ++).
...es decir, generar el LaTeX en otro sitio y simplemente copiar y pegar la imagen.
Bloque de ecuación
[$]Ecuación escrita en LaTeX[/$]
Para indicarle a Anki que voy a escribir una ecuación, la rodeo con dólares.
Por ejemplo, escribo [$]3x=4[/$] para dibujar la ecuación $3x = 4$.
Todos los códigos de LaTeX que vemos debajo tienen que estar en una ecuación de estas.
Números y letras
0123..9 abc..z ABC..Z
Los números y letras de la ecuación se escriben tal cual.
Por ejemplo, poniendo 123abc me dibuja $123abc$.
Signos de multiplicar y dividir
\cdot \times \div
Punto de multiplicar: 3\cdot 4=12 nos dibuja $3\cdot 4=12$.
Cruz de multiplicar: 5\times 3=15 nos dibuja $5\times 3=15$.
Signo de división: 6\div 2=3 nos dibuja $6\div 2=3$.
Otro signo útil es \pm, que dibuja $\pm$.
Potencia y subíndice
base^exp cosa_sub
El exponente es como lo escribiríamos: 5^2 nos dibuja $5^2$.
El subíndice va con barra baja: a_1 nos dibuja $a_1$.
Si queremos poner exponentes o subíndices con más de un carácter o cifra,
habrá que agrupar todo el texto (ponerlo entre llaves {}).
Agrupar cosas
{cosas que van juntas}
Siempre que quiera agrupar cosas para que actúen como un solo bloque, uso las llaves.
Por ejemplo, 3^{12} nos dibuja $3^{12}$, y 3^{2^x}_{j,k} nos dibuja $3^{2^x}_{j,k}$.
Fracciones en vertical
\frac{numerador}{denominador}
Si escribo \frac{3x+9}{2x} me dibuja $\frac{3x+9}{2x}$.
Raíz cuadrada
\sqrt{cosas dentro de la raíz}
Si escribo \sqrt{2x^2-8} me dibuja $\sqrt{2x^2-8}$.
También puedo elegir el índice: si escribo \sqrt[3]{27} me dibuja $\sqrt[3]{27}$.
Letras griegas
\pi \Pi \delta \Delta
Se pueden escribir letras griegas poniendo cómo se llaman después de una barra.
El código distingue mayúscula y minúscula, así que el ejemplo de arriba dibujaría $\pi \Pi \delta \Delta$.
Algunas minúsculas, como \phi $\phi$, tienen variante: \varphi $\varphi$.
El infinito se puede hacer así, también: \infty dibuja $\infty$.
Integrales y sumatorios
\int \sum
Los símbolos para integral y sumatorio son \int $\int$ \sum $\sum$.
Para acotar la integral simplemente usamos potencia y subíndice: $\int^3_2$ $\int^3_2$.
Para acotar la suma hay que usar \limits, que sirve para escribir arriba y debajo del anterior.
Por ejemplo: si escribo \sum\limits_{n=1}^{\infty} me dibuja $\sum\limits_{n=1}^{\infty}$
Y bueno, los más friquis podéis hacer integrales cerradas con \oint $\oint$.
Espacios
\, \: \; \ \quad \qquad
Por defecto la fórmula decide ella misma qué espacios hay que poner.
Si quieres forzar espacios a propósito tienes estos cinco para elegir, de estrecho a ancho.
La cuarta opción es la barra seguida de un espacio.
Por ejemplo: si escribo a 2\: b c me separa sólo la b en el dibujo ($a 2\: b c$).
También puedo crear un espacio a medida escribiendo texto transparente con \phantom{texto}.
Por ejemplo, si escribo a\phantom{hola}b me deja lo que ocupa "hola" como espacio ($a\phantom{hola}b$).
Sistemas de ecuaciones
\begin{cases} primera eq \\ segunda eq \end{cases}
Para agrupar cosas en una llave, tenemos que crear un "entorno" de sistema de ecuaciones.
Empezaremos con \begin{cases}, saltamos de línea con \\, y cerramos con \end{cases}.
Por ejemplo, \begin{cases} x+y=5 \\ x\times y=6 \end{cases} nos dará $\begin{cases} x+y=5 \\ x\times y=6 \end{cases}$.
Usar JavaScript
<script>
Código JavaScript
</script>
Para poder usar JavaScript añadiremos al final del html una región de código:
todo el JavaScript que usemos tendrá que estar entre <script> y </script>.
JS sirve para cosas como pintar la respuesta verde si es cierta pero roja si es falsa, por ejemplo.
Acceder a las cosas por el DNI
cosa = document.getElementById("DNI_de_la_cosa");
Usamos document.getElementById para coger del html cosas que tengan DNI.
Lo de cosa = lo que hace es darle un nombre a lo que cogemos para tenerlo a mano después.
Cuidado con el punto y coma que acaba las frases de JavaScript (es obligatorio).
Cambiar el contenido de algo
cosa.innerHTML = "Nuevo contenido";
Usamos .innerHTML para hablar de lo que sea que hay dentro de cosa.
Aquí le damos un nuevo contenido poniendo = seguido del contenido nuevo entre comillas.
El "contenido nuevo" puede ser texto o cualquier cosa que esté en html,
y sustituirá todo lo que había dentro hasta ahora.
Cambiar el aspecto de algo
cosa.style.propiedad = "nuevo valor";
Usamos .style para cambiar el estilo (CSS) de la cosa.
Después de .style ponemos .laPropiedadQueQueremosCambiar.
Y a continuación = y entre comillas el nuevo valor (tal como lo pondríamos en CSS).
Por ejemplo, cosa.style.backgroundColor = "red"; pintará de rojo el fondo de la cosa.
...ojo que en CSS las propiedades eran con guiones (font-size) pero aquí es en camelCase (.fontSize)
Comprobar condiciones
if (tal == cual) {
cambios;
}
Usamos if (condición) para para hacer cambios sólo si la condición se cumple.
Los cambios serán cada uno una línea dentro de los corchetes (acabada en punto y coma).
Como estamos en Anki, a menudo ese "tal" será uno de nuestros campos de la tarjeta:
if ({{Edad}} == 42) {
cartel.innerHTML = "Oh enhorabuena qué edad tan bonita!";
}
También puedo hacer que pase cuando son distintos (tal != cual)
...o cuando uno es mayor que el otro (tal > cual) (si son números, claro!)
...ojo que el igual de comparar es doble (un igual sirve para asignar, dos iguales para comparar).
Comprobar alternativas
if (animal == 'vaca') {
cambios;
} else if (animal == "alcachofa") {
cambios;
} else {
cambios;
}
Usamos else if para comprobar otras condiciones (cuando la primera no se cumple).
Usamos else si queremos cambiar cosas cuando falle todo lo anterior.
Aquí obviamente animal tiene que significar algo para que funcione:
puedo hacer animal = {{Animal}}; al principio (o simplemente usar {{Animal}} en su lugar).
...y vale la pena notar que a diferencia de los números el texto necesita comillas (no importa si simples o dobles).
Comillas en el texto
texto = "este texto tiene 'comillas' dentro"
Si necesito que mi texto tenga un tipo de comillas dentro, lo rodeo con las otras.
Funciona como en el ejemplo y 'también "funciona" al revés'.