Chapter Text

✩~ HTML: Arcaico, Versátil, Sencillo. ~✩

Cuenta la leyenda que antes de la existencia de AO3, Tumblr, Livejournal, e incluso Geocities (las canas dignifican, amigues); la comunidad hechicera que hacía las mismísimas páginas web decidieron que estaría cool estandarizar un lenguaje para que todos los navegadores pudieran leerlas sin morir en el intento.

Corría el año 1991. Y por supuesto, esta manera de hacer código web evolucionó con el tiempo, a medida que el internet lo hacía, pero sus bases básicas, valgan la redundancia, conservaron los elementos que lo hicieron popular: Dar formato al texto, la tabulación, la división de los espacios, y permitir la inserción tanto de enlaces como de imágenes.

AO3, creado por la misma banda que solía publicar en Livejournal hasta que Livejournal purgó el porno, lo gay, y todo lo que valiera la pena (borrando años de trabajo y comunidades sin decir agua va)... Mantuvo asimismo la posibilidad de trabajar con HTML.

Y hey, es verdad, tenemos editor de texto enriquecido! Pero hay cosas que podemos hacer con uno que con el otro no ;3

✨ - Cómo chucha se ve uno de estos códigos siquiera?

Son etiquetitas!

1 - Tienes una etiquetita que abre la instrucción, tipo <haz-esto>

2 - Sueles poner el contenido al medio

3 - Y luego una etiquetita igual, pero que con un slash señala que estás cerrando la instrucción:  </haz-esto>

•    Si estamos hablando de formato de texto, hay etiquetas viejas (como las que aprendí a usar yo) y nuevas (como las que AO3 pone automático). Por ejemplo!

•    Por supuesto, esto significa que puedes poner una etiqueta en mitad de una frase.

( ~ Que sabio el Don Barman circa 1988, truly. ~ )

•    Y hey! es b de "bold" o strong de idem, y luego i de "italics" o em de "emphasis". Échenle un ojo a cómo se ven y como funcionan las otras etiquetas. Puras abreviaciones, para que recordarlas no fuera tan fregado si eres gringo.

✨ - Pero Esperen! Hay Más! </meme>

• No se me vayan, les hice un microfic de ejemplo!

• Si agregas y luego cierras las etiquetas en órden, puedes ponerle más de una al mismo texto!

- He escuchado que es mala educación -le dijo Sueño, pausado- el dejar a los amigos esperando.

Como si Hob no fuese a sonreírle. Como si la Posada Nueva no tuviese ecos de templo, libaciones, treinta y tres¹ años de ofrenda. ¡Que descaro! Jamás había estado tan feliz de escucharle fingir calma.

Jamás había estado tan feliz.

 

-------

1._{(Siglo más, siglo menos.)}

O para mostrarlo con más detalle aún! Tomando como ejemplo el diálogo de Sueño nomás, tenemos:

-  "He escuchado que es mala educación"

-  "El dejar a los amigos esperando"

Pruebe con sus propias mezcolanzas. No sea tímide, que existe esta página web entera gloriosa que te deja testear código y tiene hasta la bondad de mostrarte dónde se le fué un corchete: w3Schools

✨ - "Oiga pero, y para qué todo esto?"

Esta introducción importa! Porque teniendo claro:

• Qué es una etiqueta
  
  
• Cómo se abren
  
  
• Cómo se cierran
  
  
• Y que se pueden colocar unas dentro de otras, como si fueran una matryoshka...

__ Welp. Podríamos ya empezar a hacerlo... Todo ;3 __

Chapter Text

✩~ Tutorial para el Fanart en AO3 ~✩

Archive of Our Own ofrece un montón de posibilidades para modificar una publicación con algo de HTML básico. Por ejemplo, es posible colocar imágenes como si fueran el fanfic, y que así queden archivadas para siempre! Esto include imágenes #sabrosonas, pues la finalidad misma de la página está en la libertad para producir el arte que se te pare la raja hacer.

✨ - PASOS BÁSICOS!

① - Entran a AO3, entran a New Work, arman la nueva publicación como siempre, etc.

② - Elijan un sitio de hosting para la imagen. En este momento estoy recomendando no uno, sino dos, para lo que más les acomode:

•   https://www.imagebam.com/ para imágenes de corte NC-17
•   https://imgbb.com/ si necesitan tener control respecto a borrarla en un futuro o no

③ - En AO3, donde debiera ir el fanfic ("Work Text") está por default en "Rich Text". Hagan click en "HTML" - Si pegan directamente desde Rich Text aunque no lo crean, la funcionalidad es más limitada ;3 Este método permite publicar a Full-Size, que se ajuste automáticamente al ancho del browser (computador y celular); y que si la guardas en tu propio dispositivo, igual conserve la resolución original.

④- Para insertar su imagen, le ponen el código, y el enlace directo de la imagen adentro. El código para insertar es:

<img src="[URL de la imagen va acá]" />

Pista: El enlace directo (URL) tiene que terminar en .jpeg o .png

Y podríamos dejar esto aquí, y todos felices!

✨ - WAIT, PERO. POR QUÉ?

Si se fijan (para que tenga sentido y se acuerden), el signo < abre la instrucción, img src es la abreviación para "image source" y el /> cierra la instrucción.

Por lo mismo, tienen que usar el enlace de la imagen que aparece en el navegador en vez de los que ofrece (por ejemplo), ImgBB: La idea es que la instrucción no se confunda.

Adicionalmente, si subirás más de un fanart en una misma entrada/capítulo, debes colocar siempre sólo una etiqueta de img src por imagen! Y ojalá separado todo con al menos un salto de párrafo (↩) por elemento, ojalá más para que quede ordenado a tu gusto. Dicho esto! Todos los códigos habidos y por haber funcionan separando los elementos con saltos de párrafo/(↩), a menos que quieras pegotearlos adrede (y eso es material para otro capítulo).

✨ -  JUGANDO CON EL TAMAÑO (oiga!) Y LAS ETIQUETAS

"Pero Lynx!", escucho desde el fondo de la sala. "¿Qué weá si no quiero poner mi imágen a tamaño completo?" Y es que en verdad les dijo, hijes míos, que nada más fácil: Ajusten el tamaño colocando la medida o del largo o del ancho en pixeles, y AO3 se encarga de mostrarla proporcionalmente. Usaré el header del desafío como ejemplo (de 470x264)

• Lo vamoh a manipularlo para agrandarlo usando el ancho, por ejemplo:

<img src="[header del desafío]" width="600" />

• O con el alto!:

<img src="[header del desafío]" height="150" />

• Se le puede poner hasta Alt Text a esta weá. Srsly, es magia! Funciona para screenreaders también:

<dfn title="hoverteeeext goes here"/> <img src="[header del desafío]" width="200" alt="repetir! Luego de postear, pónganle el mouse encima o traten de guardarla en el cel lmaooo" /> </dfn>

( Surprise~ )

• "dfn title" siendo el atributo que corresponde al hovertext (el letrerito que sale si colocamos el mouse encima) y "alt" lo que leería un lector de pantallas (o el browser del celular). Por lo general lo que queremos es repetir el texto en ambos, pero no necesariamente tiene que ser así.

Trataré de tener lueguito lo de editar texto ;3 Con cositas básicas se puede hacer un montonazo. Lo del texto por supuesto, si, pero también hacer que esta ensalada de código tenga más sentido (espero), insertar tablas, más sobre el hovertext, listados, notas al pié, emular guiones teatrales, y otros portentos. Les TKM!!11!! ~ ❤