¡Hola a todos!, soy Rosa-Sama y estaré encantada de enseñarles tal y como dice el titulo, firmas desde cero. Al leer esta guía, no necesitaras pedirle prestados sus códigos a tu amigo con firma nunca mas. ¡Ahora empecemos la clase!.
¿Que es una firma?
En si una firma es un plantilla que funciona como atajo para los demás usuarios y asi accesar mas fácil tu perfil o tu muro de mensajes. La firma usualmente se usa en discusiones, foros y blogs al comentar. La base de una firma debe tener un enlace a tu muro y otro a tu perfil, así como esta:
Puedes agregarle otro enlace si lo deseas, como a tus entradas de blos de la wikia, contribuciones locales, globales.... En mi caso, adicione mi pagina de DeviantArt.
El articulo de tu firma debe llamarse así:
(es un ejemplo...tu no te llamas Rosaotaku)
Y así se podrá usar como una plantilla cualquiera, para agregarla a donde tu quieras, la tienes que poner como si enlazaras cualquier articulo. Pero ojo ya que en lugar de agregar estas [[ ]] a cada lado, tienes que poner estas {{ }}. Al agregarlas, la magia se hace:
Ross Dejame un mensajito |
La parte divertida de la firma es que podemos hacerla como nosotros queramos y darle un toque de nosotros mismos. Ahora que sabes que debe tener tu firma, pasemos a...
¿Como hago que mi firma se vea realmente cool?
Hay varios métodos para hacer que nuestra firma se vea cool. Empezare con una técnica super sencilla.
Usar una imagen
Este es el mas sencillo de todos:
1 Elegir mi imagen
Puedes elaborar tu propia imagen, algún collage de tu personaje favorito o tus propios dibujos.
2 Ponerla en mi plantilla
Solo agregas la imagen como si pusieras cualquier otra imagen. Pero esta vez usando este formulario:
[[Archivo:FirmaJunio.png|300px|link=Muro:Rocalia]]
El cual incluye únicamente el tamaño de tu archivo y un link a tu muro. De modo que para cuando lo apliques, saldrá la imagen. ¿Que fácil no?.
Ok aquí la cosa se pone mas larga y detallada (por eso use un tabber para este tutorial). He de recalcar que los codigos que quieras usar aqui son a tu criterio. Es decir si piensas que se vera muy naco o corriente poner letras de colores, imágenes o un fondo de color...tranquilo, eres libre de no hacerlo y seleccionar los códigos que desees. El chiste es que uses tu creatividad para hacer la firma.
Para empezar,crearemos nuestro articulo de la firma:
tomaremos nuestra estructura inicial y la agregaremos a la pagina:
Ahora procedemos a agregar nuestros códigos.Tenemos que usar una etiqueta, la cual puede ser span style o su hermana div style. Yo en este momento usare a Span ya que trabaje con las letras. Primero cambiaremos las letras de color colocando este código de este modo:
[[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]]
Y queda así:
Si solo querías cambiarle las letras de color, hasta aquí queda el tutorial. Largo de aquí. Espera, ¿quieres algo mas?, en ese caso sigue leyendo.
Pondremos el color de fondo, para esto yo usare a span otra vez. Solo agregaremos a nuestro código que ya teníamos, otro código el cual es:
<span style="background:Yellow">
Al incorporarlo a nuestra estructura, queda algo así:
<span style="background:Yellow"> [[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]] </span>
Y tenemos algo como esto ahora:
Rosaotaku | Mi muro nenes Ahora si, acá esta otro fin, Fin del tutorial. Pero en todo caso si no te gusta que pareciera que le hubieses puesto marca-texto a tu firma, agregaremos otras propiedades para hacerla mas chida
Para hacer que se vea mas separada y menos flaca, puedes agregar esta propiedad: padding,el cual escribimos en el mismo codigo donde pusimos el color, añadiendo el grosor que deseamos. Pero ojo!!!, para que funcione bien, tienes que poner esto ; después del color (en este caso, yellow). Tendremos algo así:
<span style="background:Yellow;padding:5px"> [[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]] </span>
Que se ve así:
Ahora solo parece una linea amarilla de marcatexto...Por eso si no te gusta como se ve, se puede añadir otra propiedad llamada border-radius, el cual podrá redondear nuestra firma y que no parezca un rectángulo fofo. Se agrega tal y como hicimos con el padding. Ah, no olvides el punto y coma ; :
<span style="background:Yellow;padding:5px;border-radius:10px"> [[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]] </span>
Y he aquí el resultado:
Ahora se ve mas redondo, en todo caso si quieres puedes añadir un borde. El código border tienes que añadirlo agregando el grosor que quieres de borde, el tipo de borde y por ultimo el color (si, en este orden). Usare de ejemplo el borde solid(puedes ver los.demas tipos de bordes aqui bordes. Entonces al agregarlo queda así:
<span style="background:Yellow;padding:5px;border-radius:10px;border:3px solid red"> [[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]] </span>
Pero puedes añadirle todos los bordes que quieras, bastan con añadir el codigo border, pero por separado. De esta manera:
<span style="border:6px solid green;padding:5px"> <span style="background:Yellow;padding:5px;border-radius:10px;border:3px solid red"> [[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]] </span> </span>
El chiste es que experimentes, nuestra firma ya tiene muchas cositas bonitas... y aun se le pueden agregar mas. Ya tenemos borde, fondo... podemos ponerle imágenes!. Para ponerle una imagen se debe hacer lo siguiente.
[[Archivo:21409db5-066e-44b4-9004-713de81dc0cf.png|30px]]
Como pueden oservar, solo pude el tamaño de la imagen y no la orientacion, esto es para poderla poner en cualquier parte de mi firma. La pondré en los cuatro lugares donde puedes agregar imagen.
[[Archivo:21409db5-066e-44b4-9004-713de81dc0cf.png|20px]] <span style="border:6px solid green;border-radius:10px;padding:4px"> <span style="background:Yellow;padding:5px;border-radius:10px;border:3px solid red"> [[Archivo:21409db5-066e-44b4-9004-713de81dc0cf.png|20px]] [[Usuario:Rosaotaku|<span style="color:HotPink">Rosaotaku |</span>]] [[Archivo:21409db5-066e-44b4-9004-713de81dc0cf.png|20px]] [[Muro: Rosaotaku|<span style="color:HotPink">Mi muro nenes</span>]] [[Archivo:21409db5-066e-44b4-9004-713de81dc0cf.png|20px]] </span> </span>
y tendremos esto: 20px 20px Rosaotaku | 20px Mi muro nenes 20px
Acomode las imágenes de modo que quedasen alineadas bien con mi firma y no se salgan por los lados, pero queda en ti. --- Ahora tenemos todo para hacer una firma, experimenta, juega con las formas y colores. Si quieres saber mas tips para hacer una firma...Pasa la la siguiente sección. (la cual puede no ser agradable para muchos).
Bien, acá seré muy honesta y lamento si lastimo a alguien. Como aclaración, no estoy tirandole indirectas a usuarios que tengan estos errores en sus firmas. Solamente doy consejos para que la firma sea mas estética y como corregir estos errores que a veces suelen dar problemas. Poner colores que no se puedan leer Incluso yo he cometido este error, a veces nosotros ponemos colores que según se pueden leer, pero otros no pueden y tienen que luchar para poder leer nuestra firma.
20px
20px
Rosaotaku |
20px
Mi muro nenes
20px
trata de crear un buen contraste. Sigue esta pequeña norma: que las letras sean mas oscuras que el fondo o al revés. Depende de los colores que uses.
20px 20px Rosaotaku | 20px Mi muro nenes 20px
Imágenes colosales en nuestra firma
Este es bastante comun. Es normal que algunas imagenes nos queden grandes pero se vean bien...pero no hay que exagerar como en este ejemplo:
Rosaotaku | Mi muro nenes 150px
A simple vista no se ve mal. Pero siendo detallistas, al ponerlo en cualquier mensaje quedara un espacio colosal entre tu mensaje y la firma. Tampoco se ve bien ya que hay una diminuta barra en donde van los datos de nuestra firma... que se supone es lo que debe resaltar. La mejor forma de corregirlo es reducir el tamaño de la imagen y aumentar el padding. Mostrare el código para se entienda lo que digo:
<span style="border:6px solid orange;border-radius:10px;padding:4px"> <span style="background:orangered;padding:10px;border-radius:10px;border:3px solid red"> [[Usuario:Rosaotaku|<span style="color: orange">Rosaotaku |</span>]] [[Muro: Rosaotaku|<span style="color: orange">Mi muro nenes</span>]] [[Archivo:Renakit6.png|100px]] </span> </span>
Ajustando estos datos, quedara así:
Rosaotaku | Mi muro nenes 100px
Tanto la imagen como nuestra información ahora se ven bien de forma equilibrada.
Llenar de imágenes nuestra firma ¿Haz escuchado eso de menos es mas?, las personas que cometen este error no lo han hecho:
150px
150px
Rosaotaku |
Mi muro nenes
100px
Y dirás... ¿bueno pero que tiene de malo agregar todas las imágenes gigantes que yo quiera >:v?. Lo que pasa es que si agregas tantas imágenes , imágenes gigantes o combinado...para esto:
Rosaotaku |250px
Mi muro nenes
100px250px
250px
Tu firma se partirá por la mitad. Lo peor es que cuando estas editandola en tu plantilla de firma, muchas veces no notaras que esto ocurre. Sucederá cuando la pongas en un comentario o hilo.. y pasaras vergüenza.
La mejor forma de corregir esto, es usando pocas imágenes de tamaño proporcional para lograr buen contraste. Pero si quieres poner todas las imágenes que desees... recuerda esto mientras mas imágenes agregues, deben ser mas pequeñas.
Rosaotaku | Mi muro nenes 60px60px
Por eso mismo, procura que sean imágenes bonitas de alta calidad, y si quieres pueden ser en fondo transparente.
Trucos y consejos de Rosa-Sama
- Si no sabes de colores, puedes usar estos sitios para guiarte: https://html-color-codes.info/codigos-de-colores-hexadecimales/ https://www.cdmon.com/es/tabla-colores
- La etiquetas que se ven al final de los códigos (</span>), no son adornos... si no las usas, tu firma se derramara.
- Por favor, no uses imágenes gigantes.
Bien, es todo por el momento, si tienes alguna duda, responderé tus preguntas en el hilo y si quieres accesoria directa. Consulta en mi muro.