Inicio Off Topic
Encuesta de satisfaccionEncuesta de satisfaccion

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

UnClaudioDeLaVidaUnClaudioDeLaVida Publicaciones: 70 Stormtrooper
editado 24 de enero en Off Topic

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 si se implementen las funcionalidades que faltan en el foro, no será tan necesario el contenido de esta guía) sino también cuando estén nuevos hilos o posts en este nuevo foro, en el que se pasó desde el VBulletin al que estaban 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 para negrita, I para Italic o cursiva, S por 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, con color de fondo, 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 2: 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 en el formato, 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 <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 o propiedades: el elemento HTML b indica que el texto en cuestión debe estar en negrita (la b es por bold), y que la vista HTML hace que podamos ver el código HTML de nuestro post o hilo.

Capítulo 3: El código HTML y las clases

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 podemos darle con el editor: Si todo a lo que le damos formato con el editor resulta en un determinado código HTML que podemos ver en la vista HTML, es posible que si editamos ese código podremos 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>, en donde div es un elemento HTML que crea un contenedor genérico sin significado semántico al que se le dan propiedades por medio de clases, class es un atributo que se le da a ese elemento HTML y post-text-align-center es la clase elegida en ese atributo que se le da al elemento HTML div. 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, que entonces hay clases predeterminadadas en ese o esos archivos y que 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 la clase 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 y 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, los 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 y un valor, por ejemplo, color: #F00; y listo, con eso asignaríamos el color rojo. O también se podría asignarle 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.
Entonces, a cualquier elemento HTML se le puede asignar una clase mediante el atributo class. Solo restaba googlear si el resto de las clases existían o si en algún lado estaban listadas...

Capítulo 4: A los bifes

La primera página que encontré fue un listado de varias clases y sus respectivas propiedades en foro de Oculus. Veamos algunas de las clases que enumeran, como para entender el resto de las clases de esa página:
.post-font-size-h1
{
font-size: 21px;
font-weight: bold;
line-height: 31px !important;
}
Eso de arriba significa lo siguiente: como hay un punto antes de post-font-size-h1, eso último se trata de una clase que se llama post-font-size-h1. Lo que está entre las llaves son las propiedades (en una regla de estilos) que se le dará a un elemento HTML al asignarle como atributo class dicha clase: font-size: 21px significa que el texto estará con un tamaño de fuente de 21 pixels, 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... en este caso el interlineado (line-height) es mayor al tamaño de fuente (font-size) por lo que el texto tendrá bastante separadas sus 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 tiene un punto antes) que otorga esta propiedad: color: #0074d9. La propiedad color significa color de fuente (porque color de fondo es la propiedad background-color) y #0074d9 es el color asignado, en RGB
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 en la página que les pasé antes hay otras clases con nombres muy parecidos, que son las que son para dar color al texto:
.post-color-red
{
color: #ff4136;
}
es una clase que da la propiedad de color de texto rojo. A ver otras clases...
.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 que otorgan es background-color: #111111. Background-color es la propiedad para color de fondo, y #111111 se corresponde con el color negro (ok, 000000 sería más negro que ese, pero bueno). Googleando encontré otro link: Listado de clases y elementos HTML dentro de la documentación de Vanilla Forums. Ahí, desde la línea 15 a la 102 hay un listado de clases, y desde la 107 a la 140, de elementos HTML. Allí se encontrarán con diferentes clases: Las que empiezan con post-color- dan como propiedad algún color de fuente; las que empiezan con post-font-size dan como propiedad un determinado tamaño de fuente; las que empiezan con post-fontfamily- son para cambiar la tipografía; las que empiezan con post-highlightcolor son para diferentes colores de fondo y las que empiezan con post-text-align son para la alineación del texto.

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

Ahora voy a generar texto con diferentes formatos. Para lograrlo, voy a combinar varias clases a la vez. Quiero obtener un texto en negrita con alineación justificada, color de fuente rojo, color de fondo negro, tipografía Comic Sans y subrayado, por ejemplo esto: ¡Hola, foreros!. Entonces, en vista HTML el código podría ser algo así: <b class="post-color-red post-text-align-justify post-highlightcolor-black post-fontfamily-comicsansms"><u>¡Hola, foreros!</u></b>, donde B lo uso como elemento HTML (que da la propiedad negrita) al que como atributo uso class para usar varias clases: post-color-red, post-text-align-justify, post-highlightcolor-black y post-fontfamily-comicsansms. Dentro de las etiquetas <b> y </b> está el texto ¡Hola foreros! entre los tags <u> y </u>, porque el elemento HTML u produce como propiedad el subrayado. Esto podría funcionar también con el siguiente código: <u class="post-color-red post-text-align-justify post-highlightcolor-black post-fontfamily-comicsansms"><b>¡Hola, foreros!</b></u> . Si afuera usara div en vez de u o b el efecto sería el mismo, pero con todo el renglón con color de fondo negro porque div crea un contenedor vacío, una sección y las secciones ocupan renglones enteros:
¡Hola, foreros!

Capítulo 6: Comparativo entre las clases para tamaño de fuente

En el listado de clases y elementos HTML dentro de la documentación de Vanilla Forums vemos que desde la línea 50 a la 60 hay clases relacionadas al tamaño de fuente, que empiezan con post-font-size-. Vamos a comparar el tamaño del texto generado por cada una de esas clases:
Texto con clase post-font-size-xx-large
Texto con clase post-font-size-x-large
Texto con clase post-font-size-h1
Texto con clase post-font-size-larger
Texto con clase post-font-size-h2
Texto con clase post-font-size-large
Texto con clase post-font-size-smaller
Texto con clase post-font-size-medium
Texto con clase post-font-size-small
Texto con clase post-font-size-x-small
Texto con clase post-font-size-xx-small
Texto con clase (ninguna)

Capítulo 7: Tablas

Otra de las características que no tenemos en el editor estándar es la de hacer tablas. Un ejemplo de tablas es la que hice en mi Guía de Emojis del foro y cómo invocarlos. Básicamente, la estructura de una tabla es la siguiente:
  • Está entre los tags <table></table>
  • Dentro de <table> tenemos <thead></thead> y <tbody></tbody>
  • Dentro de estos 2 últimos hay <tr>
  • El <tr> dentro de <thead> tiene adentro <th>
  • El <tr> dentro de <tbody> tiene dentro <td>
Dentro de table está toda la tabla, thead representa el encabezado de la tabla y tbody su cuerpo; tr representa cada fila (horizontal), td representa una celda dentro del cuerpo de la tabla y th representa una celda que opera como encabezado. Entonces, un ejemplo extraído de mi otro hilo:
EmojiForma 1Forma 2Forma 3
:smile::smile;: )
:smiley::smiley;= )
:grin::grin;:grinning;
:mrgreen::mrgreen;
::blush::blush;: 3

Comparen la tabla con el código:
<table>
<thead class="post-highlightcolor-black post-color-white">
<tr><th>Emoji</th><th>Forma 1</th><th>Forma 2</th><th>Forma 3</th></tr>
</thead>
<tbody class="post-highlightcolor-gray post-color-black">
<tr><td>:smile:</td><td>:smile;</td><td>: )</td><td></td></tr>
<tr><td>:smiley:</td><td>:smiley;</td><td>= )</td><td></td></tr>
<tr><td>:grin:</td><td>:grin;</td><td>:grinning;</td><td></td></tr>
<tr><td>:mrgreen:</td><td>:mrgreen;</td><td></td><td></td></tr>
<tr><td>:blush:</td><td>:blush;</td><td>: 3</td><td></td></tr>
</tbody>
</table>

Capítulo 8: Cierre

Mi recomendación es que citen posts de otros o citen esta misma guía (o la de los emojis para ver lo de las tablas) y vayan analizando el código HTML 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. Saludos!

Links útiles:

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

Esta es la guía que @guidob estaba esperando que comparta :wink:

Comentarios

Inicia Sesión o Regístrate para dejar un comentario.