APRENDAMOS A DISEÑAR

APRENDAMOS A DISEÑAR

Buenas, queridos usuarios.

Con el permiso adecuado por parte del staff y la líder de nuestro equipo (Winter Bones), entre Vir (irwin.) y mi persona (Sykesual.) hemos creado este tema para explicarles, desde lo más básico, la creación de firmas con atributos HTML y CSS, incluyendo la creación de un avatar proporcionado correctamente (es decir, que no luzca estirado).

Se decidió hacer esto por simples razones:
1. Mejorar la estética del foro.
2. Por pedido de varios usuarios.
3. Para que olvidemos las firmas extensas (fotos/gifs agresivamente grandes).
4. Evitar la deformación de páginas a causa de chicas que creen saber de HTML y, sin embargo, olvidan cerrar balizas o algo por el estilo y arruinan algunos temas. Podemos verlo cuando el avatar aparece abajo, el fondo desaparece o se desproporciona.
5. Disminuir los pedidos de códigos hacia personas como nosotras. No nos malentiendan, nos encanta ayudar pero debéis saber que ninguna es una fábrica de codes. Además, con esto aprendido podrán dejar volar su imaginación y crear las firmas y avatars a su gusto, con cada ínfimo detalle que deseen.
6. Impedir infracciones y problemas con Source Code ya que algunas comentan al azar sin respetar las reglas solo para tener el code que se os ha hecho mono a simple vista olvidando el trabajo y crédito de sus creadores.

Iremos subiendo las cosas por partes. Inclusión de textos con fonts especiales, bordes, efectos, etc. Queremos ver sus avances.

Se aceptan sugerencias. Cualquier duda, por favor coméntenla en este tema.

Abajo os encontraras con tres cajas que contienen los tutoriales correspondientes según la categoría: HTML, CSS y Photoshop.

ESTRUCTURA BÁSICA.

CREACIÓN DE UNA FIRMA HTML.

Hola, para quienes no saben me llamo Milenka pero decidme Mily o Mile. Por favor. Iniciaremos conmigo armando la estructura de vuestra firma. Vamos a divertirnos, anda, no muerdo.
1. Les voy a presentar al elemento imprescindible de la estructura de la firma. Con ustedes el importantísimo “< div >” Pero ¿de qué sirve? Simple. El “< div >” se emplea para definir una sección de contenido. Mediante este “< div >” vamos a poder agregarle los atributos deseados a la firma. Cada “< div >” es una sección diferente, una división. He tenido que separar los div así pues se tomaría como un div más y se me va a desconfigurar la página. Pero a la hora de crear la firma lo ponen junto.
No vayamos a olvidarnos de sus compañeros “<>” estás flechitas son completamente importantes pues si las eliminamos u obviamos no va a resultar nada, no importarán los cambios o atributos que le añadiesen al code, simplemente no saldrá nada.
Iniciemos abriendo un “< div style >” El “style” se refiere a los propiedades que poseerá esta sección.

Código:

<div style=” ”></div>

Lo cerramos con un simple “< / d i v >” He tenido que separarlo así pues se tomaría como un div más y se me va a desconfigurar la página. Pero a la hora de crear la firma lo ponen junto.
2. Vale. Cuando se crea un “< div >”, se le puede poner o bien un color de fondo (background-color) o una imagen (background-image). En esta firma vamos a usar una imagen porque no creo que quieran una firma con un simple bloque de color. Cuando ya tengáis la imagen, copiamos el URL de la misma y la insertamos entro del div style con el "background-image" añadiendo URL entre paréntesis. ESTA es la que voy a usar.

Código:

<div style="background-image: url(link)"></div>

Insertando la imágen el code nos queda así:

Código:

<div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png)"></div>

3. Es importante ponerle las medidas de la imagen al code. Así también se puede cambiarlas. Ahora hay que darle los valores de ancho (width) y alto (height) que queramos. Es recomendable colocarle los del tamaño original de la imagen elegidaya que como fondo no se reduce el tamaño al reducir los valores, es decir, si nuestra imagen es de 100px de alto y 100px de ancho al cambiarle a 90px no se hará más pequeña sino que se recortará la imagen.
En este caso sí quiero recortar la imagen así que la pondré de 500px de ancho por 200px de alto.

Código:

<div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div>

Es importante separar cada atributo con punto y coma porque de igual forma que con las “<>” flechitas y las comillas, si no las pones no hay efecto.
4. Finalmente nos queda centrar la imagen. Esto se hace simplemente agregándole el “center” al inicio (antes del div) y al final (después del div cerrado). Si quieren ponerla a la derecha o izquierda reemplacen el “center” por el “right” (derecha) o el “left” (izquierda).

Código:

<center><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></center>

Y listo, ya tenemos la estructura básica. Ahora vamos a agregarle un título.
¿Preguntas? ¿Dudas? Por favor, dejadlas abajo.

INCLUSIÓN DEL TÍTULO

¡Buenos días, tardes, o noches, sweetie! Mi compañera y buena amiga Milenka ha dado una muy buena explicación sobre los primeros pasos a hacer una firma HTML y el uso de los códigos. Ahora, yo me haré cargo de la inclusión de los llamados fonts. Pero, primero en principal: ¿qué es un Font y para que serviría, en todo caso? Un font es lo que vendría a ser la ‘letra’, tanto del título como cualquier texto que se le quiera agregar a nuestro trabajo. Y es increíblemente fácil ponerlas, pero muchas veces se comete un muy pequeño error y puede costar que ese pequeño trabajo sea en vano. Y ya no tienes por qué preocuparte por ello; ¡estoy aquí para resolver tus dudas!


En este paso, podría proporcionarles algunos, pero ¿por qué hacerlo si puedo proporcionarles una página entera, con mucho más de cien fonts? Y, literalmente hablando, más de cien fonts. Utilizaremos la página ‘Google Web Fonts’, click (PEQUEÑA ACLARACIÓN: No es común, pero hace mucho que no entro a la página y por lo que veo han actualizado, ya que observo fonts que antes no habían. Así que, actualizan de vez en cuando), allí puedes elegir la que más sea de tu estilo o que vaya con el tipo de firma. Naturalmente y para que la firma quede bellísima, conviene guiarse por la clase –lo digo por experiencia propia–.


Una vez seleccionado el font, damos click en la pequeña flechita que se encuentra un poco por debajo, del lado derecho (ésta [Tienes que estar registrado y conectado para ver esa imagen]). Nos redirigirá a una nueva página. Ahí bajaremos hasta el final de la página, y nos encontraremos con un código.




Ese código lo copiarán entero sí o sí, no debe faltar absolutamente nada. Luego, se van a la firma, y pegan el code recientemente copiado en el inicio –puede ser también el final, como no–.


Ya tenemos todo casi listo; ahora viene la parte de la magia.
Para poner el texto, debemos abrir un nuevo div. Existe también el atributo ‘Font Style’. Pero suelo guiarme mejor con el bien conocido ‘Div’ y opino que se les hará mucho más fácil a ustedes para entenderlo.




Así es como se agrega un font, ¿entendido? Eso tiene que aparecer, sea como sea, tiene que estar sí o sí para que aparezca el font correctamente. ¿Cómo ponerlo encima o debajo de la caja? Simplemente debes ubicar el código del font donde quieres que aparezca; si quieres que aparezca encima de la caja, colocas el código antes de la firma. Y si lo quieres por debajo, luego.


Dejaré aquí algunos atributos, como se utilizan, la definición y de ser necesario, al final mostraré un pequeño code completamente editado.

Size: Con este atributo se le asigna el tamaño del font. Puedes ponerlo tan grande como quieras; de 10 a 70, simplemente a tu gusto. Para que funcione correctamente debe teber un 'px' al final. Ejemplo: font-size: 54px.
Color: Aquí se le asigna el color al font. Se utilizan los números hexadecimales, mejores conocidos como "Colores HTML". Se le coloca en el principio un numeral, y luego se pone un color que se componga por números y letras, o simplemente números. Ejemplo: #000000.
Text-Shadow: La sombra. Éste atributo se usa mucho para destacar, y se le puede poner una sombra blanca -colocando simplemente un 'text-shadow:'- o una sombra color negra -colocando simplemente 'text-shadow: black'-. Se le puede poner también una sombra de otro color, haciendo como anteriormente expliqué con la sombra color negro, pero colocando otro color en vez de 'black'.
Letter-Spacing: Éste atributo permite hacer un 'espacio' entre letras. Ejemplo: letter-spacing: 5px. También se pueden acercar más las letras, colocando un menos (-). Ejemplo: letter-spacing: -5px.
Text-Align: Alinear el texto, puede ser en justificado (justify), centrado (center), izquierda (left) y derecha (right).
Text-Transform: Con éste atributo se puede transformar el texto para que se vea en mayúscula completamente (uppercase) o minúscula (lowercase).


No olvidaré, que también existe un segundo texto. Éste vendría a ser el que normalmente, se coloca por debajo de la caja; ese texto pequeño, en el que escribes todo lo que quieras, aunque no todo, claro. Los atributos no cambian; son exactamente igual que los anteriores. Pero, para que quede perfectamente a tono con la caja, crearemos otra de manera que dentro de ella proporcionaremos absolutamente toda la información que se nos antoje. Ejemplo: