Guía: Código HTML para el nuevo foro

UN CLAUDIO DE LA VIDA

Guía: Código HTML para el nuevo foro

Capítulo -1: Introducción

Buenas, queridos foreros. En esta ocasión les armo una guía que puede ser útil no solo ahora que el foro está con las funcionalidades al mínimo (eso significa que más adelante, cuando se implemente lo que falta en el foro, no será tan necesario el contenido de esta guía) sino también cuando estemos creando nuevos hilos en este nuevo foro de Tuenti, en el que se hizo un paso desde el VBulletin del que estábamos acostumbrados a Vanilla Forums.
Al momento de crear posts o hilos, el editor se nota bastante intuitivo a simple vista: podemos elegir el formato del texto (B = negrita, I = Italic o cursiva, S = Strikethrough o tachado), diferentes tipos de listas (ordenadas con números o solo con viñetas), tenemos un menú para emoticons, la posibilidad de agregar links, subir imágenes, archivos o definir la alineación del texto, entre otras herramientas. Pero, como dije antes, por ahora el foro cuenta con las funcionalidades al mínimo por lo que a través del editor no podemos hacer algunas cosas que sí podíamos hacer en el otro foro, como por ejemplo escribir texto en color, subrayarlo, cambiar la tipografía o el tamaño. Pero no todo está perdido: se puede hacer a través de la vista HTML.

Capítulo 0: La vista HTML y dónde encontrarla 

La vista HTML podríamos decir que es, haciendo analogía a nuestro foro anterior, lo que antes llamábamos la vista de código pero con algunas diferencias que tienen que ver con que antes tratábamos con BBCode y ahora con un HTML + CSS reducido. Antes, si escribíamos en la vista de codigo [B]TEXTO[/B] eso nos resultaba en la palabra TEXTO en negrita. La estructura era la de un texto encerrado entre etiquetas (o tags, en este caso [B] y [/B]). Etiquetas que abrían, etiquetas que cerraban, que a la vez podían anidarse y formarse diferentes combinaciones. Con HTML, la estructura es parecida, porque en pocas palabras HTML es un lenguaje de etiquetas usado para crear páginas web. Entonces, si escribimos algún texto, lo seleccionamos, le damos el formato de texto en negrita y abrimos la vista HTML (que se abre con el ícono </> del editor de texto del foro), lo que veremos es lo siguiente: <b>TEXTO</b>. Es la palabra texto rodeado de etiquetas <b> y </b>. Etiquetas que abren, etiquetas que cierran. Bastante similar a lo que estábamos acostumbrados, ¿no?. Podemos resumir en que b es un elemento HTML, que en <b>TEXTO</b> se trata de la palabra TEXTO en negrita, y consta de sus etiquetas de apertura (<b>) y de cierre (</b>), y cada elemento HTML tiene diferentes características: el elemento HTML b indica que el texto en cuestión debe estar en negrita (la b es por bold).

Capítulo 1: La vista HTML y el código HTML

Activar la vista HTML luego de usar el editor de texto fue lo que me llevó a investigar cómo usar el código HTML para darle al texto las propiedades que no nos permite dar el editor: Si todo a lo que le damos formato con el editor resulta en un determinado código en la vista HTML, es posible que si editamos ese código podamos obtener nuevos resultados. Lo primero que hice fue probar la alineación del texto. Seleccioné algo, le di alineación centrada, vi el código y me encontré con lo siguiente:
<div class="post-text-align-center">TEXTO</div>.Estamos ante un texto encerrado en el elemento HTML div, que a su vez mediante el atributo class se le asigna una clase cuyo nombre es post-text-align-center. El elemento HTML div genera una sección, así que todo lo que está dentro de <div> y </div> es una sección en sí. Div, a su vez tiene como atributo class a post-text-align-center. Eso significa que lo que vuelve centrado a ese texto es esa clase. Me acordé que existía la alineación justificada y que no figura entre las opciones del editor de texto del foro. Entonces, en vista HTML modifiqué center por justify y... funcionó: <div class="post-text-align-justify">TEXTO</div> en vista HTML provoca que "Texto" tenga alineación justificada. La explicación es que el foro debe poseer uno o varios archivos de estilos CSS que el foro usa por defecto. Hay clases predeterminadadas en ese o esos archivos y cada clase posee dentro determinada o determinadas propiedades. Entonces, dentro del archivo de estilos CSS que el foro usa, post-text-align-center es una clase que posee como propiedad es que la alineación de texto sea centrada (específicamente, esa clase posee como única propiedad text-align: center) y análogamente sucede lo mismo con text-align-justify (es una clase cuya única propiedad es text-align:justify).

En realidad, en lo que respecta a lo más básico de diseño web usando archivos de estilos CSS, uno puede crear sus propios estilos, allí enumerar, entre otras cosas, distintas clases e ID y darle a ellas las propiedades que uno quiera. El problema es que desde el foro no podemos crear o editar las propiedades de las clases, ID o elementos HTML del archivo de estilos del foro... si se pudiera, sería solo cuestión de crear/editar una clase/id o elemento HTML y darle como propiedad color: #F00; y listo, con eso asignaríamos el color rojo. O también se podría usarle a cada elemento HTML el atributo style y que quede algo así como <div style="color: #F00">TEXTO</div> para que lo que esté entre esas etiquetas <div> y </div> tenga texto en rojo, pero no funciona.

Probé entonces usar la etiqueta b para poner algo en negrita, asignarle la clase post-text-align-center y también funcionó, resultando en texto con alineación centrada y en negrita: <b class="post-text-align-center">PEPE</b> en la vista HTML produce PEPE. Solo restaba googlear el resto de las clases si es que existían o si en algún lado estaban listadas...

Capítulo 2: A los bifes

La primera página que encontré fue esta: Listado de varias clases y propiedades en foro de Oculus . Veamos algunas de las clases que enumeran, como para entender el resto de las clases:

.post-font-size-h1 {
  font-size: 21px;
  font-weight: bold;
  line-height: 31px !important;
}

Eso de arriba significa lo siguiente: como hay un punto al comienzo es una clase. La clase se llama post-font-size-h1. Lo que está entre las llaves son las propiedades en una regla de estilos que, al asignar esa clase a algo le da estas propiedades: font-size: 21px significa que el texto estará con un tamaño de fuente de 21, o sea, relativamente grande; font-weight: bold significa texto en negrita (en inglés: bold); line-height: 31px es el interlineado (en diseño web, para que no esté muy separado el texto, suele coincidir line-height con font-size, así que como line-height es mayor a font-size, el texto estará con un interlineado que lo dejará bastante separado entre sus diferentes líneas) y la declaración !important sirve para que la propiedad en cuestión (line-height), si se superpone con otra clase/id que también dé la propiedad line-height, prevalezca la que tiene !important. Analicemos otras clases:

.post-color-blue {
  color: #0074d9;
}

.post-color-blue es una clase porque hay un punto antes. Esa clase da como propiedad color: #0074d9. La propiedad color significa color de fuente (porque color de fondo es la propiedad background-color).

La combinación de colores está en hexadecimal (16 valores, desde el 0 hasta la F), con los 2 primeros dígitos para rojo, los 2 siguientes para verde y los últimos 2 para azul. Es que así se definen los colores en RGB (red, green, blue) en base a la intensidad de la luz y todo a tope da blanco. Entonces, #0074d9 significa Rojo 0 (00 es 0x16 + 0 = 0), verde 116 (74 es 7x16 + 4 = 116) y azul 217 (d9 es 13 x 16 + 9 = 217). Eso da como resultado un celeste oscuro.

Y hay otras clases con nombres muy parecidos, que son las que son para dar color al texto: En Listado de clases y elementos HTML dentro de la documentación de Vanilla , de la línea 31 a la 47 son clases que dan color al texto, porque son las clases cuyo nombre son post-color-{color}
Volviendo a la página anterior, si queremos ver qué clase sirve para resaltar con algún color de fondo al texto o a algo, debemos buscar alguna clase que posea la propiedad background-color. Una de ellas es .post-highlightcolor-black :

.cell-color-black,
.post-highlightcolor-black {
  background-color: #111111;
}

En ese caso, hay 2 clases distintas (cell-color-black y post-highlightcolor-black) que, use cual use de las 2, la propiedad obtenida es background-color: #111111 , que background-color es color de fondo, y 111111 se corresponde con el color negro (ok, 000000 sería más negro que ese, pero bueno). En Listado de clases y elementos HTML dentro de la documentación de Vanilla pueden buscar el resto de las clases que empiecen con post-highlightcolor- para generar otros colores de fondo. En esa página o en la otra, cuando encuentren las clases que empiecen con post-fontfamily- son para cambiar la tipografía.

Capítulo 3: A los bifes, parte 2. Ejemplos

Ahora, algunos ejemplos de texto con diferentes formatos, por medio de usar varias clases a la vez. Quiero obtener un texto con alineación justificada, color rojo, color de fondo negro, tipografía Comic Sans y subrayado. Entonces, en vista HTML el código podría ser algo así:
<div class="post-color-red post-text-align-justify post-highlightcolor-black post-fontfamily-comicsansms"><u>¡Hola, foreros!</u></div>
Es un elemento HTML div, en donde uso las clases post-color-red, post-text-align-justify, post-highlightcolor-black y post-fontfamily-comicsansms. Dentro de las etiquetas <div y </div>está el texto ¡Hola foreros! entre los tags <u> y </u>, porque el elemento HTML u produce que lo que tenga dentro esté subrayado. Este es el resultado de poner lo de arriba en vista HTML:

¡Hola, foreros!

Todo el renglón se ve con fondo negro porque div crea una sección y las secciones ocupan renglones enteros. Si en vez de a div, todas esas clases se las asignara al elemento HTML u, todo el texto (y no todo el renglón) tendría esas mismas propiedades anteriores, y en la vista HTML deberíamos escribir algo así: 
<u class="post-color-red post-text-align-justify post-highlightcolor-black post-fontfamily-comicsansms">¡Hola, foreros!</u>

Capítulo 4: Fuentes tipográficas, tamaño de fuente y OJO con la superposición de tags

Dentro de Listado de clases y elementos HTML dentro de la documentación de Vanilla vemos que desde la línea 61 se ven clases que empiezan por post-fontfamily-. Dichas clases asignan la propiedad de cambiar la tipografía. Lamentablemente, solo vamos a poder elegir entre unas pocas fuentes tipográficas: post-fontfamily-arial, post-fontfamily-comicsansms, post-fontfamily-couriernew, post-fontfamily-default, post-fontfamily-georgia, post-fontfamily-impact, post-fontfamily-timesnewroman, post-fontfamily-trebuchetms, y post-fontfamily-verdana. Por si las moscas, un ejemplo de aplicación en vista HTML sería así:
<b class="post-font-family-comicsansms">TEXTO</b>

Lo de arriba genera "TEXTO" en negrita y en fuente Comic Sans MS.
También, desde la línea 50 a la 60 hay clases relacionadas al tamaño de fuente, que empiezan con post-font-size- . Podemos comparar el tamaño de fuente que generan mostrando el texto resultante en una lista. Y antes de eso, comento cómo se ve una lista en vista HTML: Todo lo que es lista va entre los tags <ol></ol> o los tags <ul></ul>. OL para lista ordenada, como en el caso de la siguiente lista, o UL para una lista no ordenada. Luego, cada elemento de la lista va entre los tags <li> y </li>. Para el ejemplo de abajo, voy a darle a cada elemento HTML li la clase para tamaño de fuente correspondiente.
Por ejemplo, el cuarto elemento de nuestra lista se verá así:
 <li class="post-font-size-larger">000000000000000000000000000000EJEMPLO con post-font-size-larger</li>

El séptimo elemento de la lista, se verá así: 
<li class="post-font-size-smaller">000000000000000000000000000000EJEMPLO con post-font-size-smaller</li>.

---

1. 000000000000000000000000000000EJEMPLO con post-font-size-h1
2. 000000000000000000000000000000EJEMPLO con post-font-size-h2
3. 000000000000000000000000000000EJEMPLO con post-font-size-large
4. 000000000000000000000000000000EJEMPLO con post-font-size-larger
5. 000000000000000000000000000000EJEMPLO con post-font-size-medium
6. 000000000000000000000000000000EJEMPLO con post-font-size-small
7. 000000000000000000000000000000EJEMPLO con post-font-size-smaller
8. 000000000000000000000000000000EJEMPLO con post-font-size-x-large
9. 000000000000000000000000000000EJEMPLO con post-font-size-x-small
10. 000000000000000000000000000000EJEMPLO con post-font-size-xx-large
11. 000000000000000000000000000000EJEMPLO con post-font-size-xx-small

---

Con respecto a la custión "Superposición de tags", es un tema que podría merecer un capítulo aparte, pero creo que con solo hacer este comentario puede bastar. Habrán notado que para cada capítulo uso un color distinto y con el texto en cursiva. Eso es porque todo el texto del capítulo lo encierro entre tags i para italic o cursiva, y a ese elemento HTML le asigno la clase correspondiente para los colores. Peeeeeero, pueden haber problemas cuando dentro de ese texto se encuentran otros elementos HTML. Por ejemplo, la lista anterior la tuve que dejar sin el color correspondiente al capítulo 4 y sin italic y recién ahí se mostró como lista (sino no se veían), y también se mostraron las líneas horizontales al comienzo y final de la lista (que se hacen con <hr> ). Cosas así pueden pasarles al momento de hacer posts o hilos... si algo no se ve, corroboren que puede tratarse de eso.

Capítulo 5: Cierre

Mi recomendación es que citen posts de otros, o posts que vean en color, o donde hayan links, o citen esta misma guía y vayan analizando el código en la vista HTML. Citen también posts donde hayan citas anidadas (varias citas una dentro de la otra) y vayan analizando la estructura. Yo voy aprendiendo así. Y si ven que una propiedad se superpone con otra, prueben de cambiar los elementos HTML afectados por las clases, o sea, en vez de aplicarle las clases a div aplíquensela a <b>, <i>, <u>, <p> o a cualquier otro elemento HTML, vayan probando. Y cuéntenme qué otras clases encuentran que no haya nombrado
También pueden pasarse por la guía HTML de @betobendos donde se ven en acción varias clases!!


Links útiles:

Listado de varias clases y propiedades en foro de Oculus
Listado de clases y elementos HTML dentro de la documentación de Vanilla
Elementos HTML y para qué sirven en español en MDN Web Docs de Mozilla

GUSTAVOPAPASERGIO

Impresionante tutorial ???

UN CLAUDIO DE LA VIDA

Esperando por el Service Pack 1 de @betobendos (que no puedo agregarlo como ampliación de mi hilo por superar el límite de caracteres)

BETOBENDOS

Hola, aca vamos a ver unos ejemplos de lo que podemos hacer para dar formato en el foro, pero primero hay que leer el hilo de @un claudio de la vida suscribirse y darle like
Guía: Código HTML para el nuevo foro : https://foro.tuenti.com.ar/discussion/322/guia-codigo-html-para-el-nuevo-foro

Como ahí dice se puede algunas etiquetas de HTML y las clases pre-diseñadas para dar formato

Nota: para cambiar a vista HTML hay que hacer click en este botón

Un ejemplo, si escribimos en vista HTML esto:

<div class="post-color-green">Letras en color verde</div>

Al publicar el comentario lo veremos asi:

Letras en color verde

div es la etiqueta
class es el atributo
post-color-green es la clase

A continuacion se veran algunos ejemplos de las clases

Clases	Ejemplo
<div class="post-color-green">Letras en color green</div>	Letras en color green
<div class="post-color-aqua">Letras en color aqua</div>	Letras en color aqua
<div class="post-color-black">Letras en color black</div>	Letras en color black
<div class="post-color-blue">Letras en color blue</div>	Letras en color blue
<div class="post-color-gray">Letras en color gray</div>	Letras en color gray
<div class="post-color-fuchsia">Letras en color fuchsia</div>	Letras en color fuchsia
<div class="post-color-lime">Letras en color lime</div>	Letras en color lime
<div class="post-color-maroon">Letras en color maroon</div>	Letras en color maroon
<div class="post-color-navy">Letras en color navy</div>	Letras en color navy
<div class="post-color-olive">Letras en color olive</div>	Letras en color olive
<div class="post-color-black">Letras en color negro</div>	Letras en color negro
<div class="post-color-orange">Letras en color orange</div>	Letras en color orange
<div class="post-color-purple">Letras en color purple</div>	Letras en color purple
<div class="post-color-red">Letras en color red</div>	Letras en color red
<div class="post-color-silver">Letras en color silver</div>	Letras en color silver
<div class="post-color-teal">Letras en color teal</div>	Letras en color teal
<div class="post-color-white">Letras en color white</div>	Letras en color white
<div class="post-color-yellow">Letras en color yellow</div>	Letras en color yellow
<div class="post-highlightcolor-green">Fondo en color green</div>	Fondo en color green
<div class="post-highlightcolor-aqua">Fondo en color aqua</div>	Fondo en color aqua
<div class="post-highlightcolor-black">Fondo en color black</div>	Fondo en color black
<div class="post-highlightcolor-blue">Fondo en color blue</div>	Fondo en color blue
<div class="post-highlightcolor-gray">Fondo en color gray</div>	Fondo en color gray
<div class="post-highlightcolor-fuchsia">Fondo en color fuchsia</div>	Fondo en color fuchsia
<div class="post-highlightcolor-lime">Fondo en color lime</div>	Fondo en color lime
<div class="post-highlightcolor-maroon">Fondo en color maroon</div>	Fondo en color maroon
<div class="post-highlightcolor-navy">Fondo en color navy</div>	Fondo en color navy
<div class="post-highlightcolor-olive">Fondo en color olive</div>	Fondo en color olive
<div class="post-highlightcolor-black">Fondo en color negro</div>	Fondo en color negro
<div class="post-highlightcolor-orange">Fondo en color orange</div>	Fondo en color orange
<div class="post-highlightcolor-purple">Fondo en color purple</div>	Fondo en color purple
<div class="post-highlightcolor-red">Fondo en color red</div>	Fondo en color red
<div class="post-highlightcolor-silver">Fondo en color silver</div>	Fondo en color silver
<div class="post-highlightcolor-teal">Fondo en color teal</div>	Fondo en color teal
<div class="post-highlightcolor-white">Fondo en color white</div>	Fondo en color white
<div class="post-highlightcolor-yellow">Fondo en color yellow</div>	Fondo en color yellow
<div class="post-text-align-center">Texto centrado</div>	Texto centrado
<div class="post-text-align-left">Texto a la izquierda</div>	Texto a la izquierda
<div class="post-text-align-right">Texto a la derecha</div>	Texto a la derecha
<div class="post-font-size-xx-small">Texto con tamaño xx-small</div>	Texto con tamaño xx-small
<div class="post-font-size-x-small">Texto con tamaño x-small</div>	Texto con tamaño x-small
<div class="post-font-size-small">Texto con tamaño small</div>	Texto con tamaño small
<div class="post-font-size-smaller">Texto con tamaño smaller</div>	Texto con tamaño smaller
<div class="post-font-size-medium">Texto con tamaño medium</div>	Texto con tamaño medium
<div class="post-font-size-large">Texto con tamaño large</div>	Texto con tamaño large
<div class="post-font-size-larger">Texto con tamaño larger</div>	Texto con tamaño larger
<div class="post-font-size-x-large">Texto con tamaño x-large</div>	Texto con tamaño x-large
<div class="post-font-size-xx-large">Texto con tamaño xx-large</div>	Texto con tamaño xx-large
<div class="post-font-size-h2">Texto con tamaño h2</div>	Texto con tamaño h2
<div class="post-font-size-h1">Texto con tamaño h1</div>	Texto con tamaño h1
<div class="post-fontfamily-arial">Texto con fuente arial</div>	Texto con fuente arial
<div class="post-fontfamily-comicsansms">Texto con fuente comicsansms</div>	Texto con fuente comicsansms
<div class="post-fontfamily-couriernew">Texto con fuente couriernew</div>	Texto con fuente couriernew
<div class="post-fontfamily-default">Texto con fuente default</div>	Texto con fuente default
<div class="post-fontfamily-georgia">Texto con fuente georgia</div>	Texto con fuente georgia
<div class="post-fontfamily-impact">Texto con fuente impact</div>	Texto con fuente impact
<div class="post-fontfamily-timesnewroman">Texto con fuente timesnewroman</div>	Texto con fuente timesnewroman
<div class="post-fontfamily-trebuchetms">Texto con fuente trebuchetms</div>	Texto con fuente trebuchetms
<div class="post-fontfamily-verdana">Texto con fuente verdana</div>	Texto con fuente verdana

• Hasta aca con la etiqueta <div>, pero también se puede usar otras: <p> <b> <u> <i> etc

Si escribimos en vista HTML esto: 

<b class="post-color-red"> Clase en la etiqueta b</div>

Al publicar el comentario lo veremos asi:

Clase en la etiqueta b

• Y por ultimo se pueden combinar las etiquetas y las clases:

Si escribimos en vista HTML esto:

<h1><i><u><b class="post-color-green post-fontfamily-couriernew post-highlightcolor-black">Combinando las clases y etiquetas</b></u></i></h1>

Al publicar el comentario lo veremos asi:

Combinando las clases y etiquetas

<h1> : agranda la letra
<i> : para la cursiva
<u> : para el subrayado
<b> : para la negrita

BETOBENDOS

un claudio de la vida dijo:

Esperando por el Service Pack 1 de @betobendos (que no puedo agregarlo como ampliación de mi hilo por superar el límite de caracteres)

Listo, tarde pero seguro

UN CLAUDIO DE LA VIDA

Me gusta, me gusta! Ideal para quien no quiera demasiadas explicaciones y quiera ir directo a los bifes . Buen trabajo!

GUSTAVOPAPASERGIO

IMPRESIONANTE.  ??????????Tanto para @un claudio de la vida como para @betobendos