¿Como hacer tu propia tablilla?

♠ ¿Que es esto?


Muchos miráis los templates que se hacen como si fuera cosa de magia, o tenéis unas pequeñas nociones de como funcionan el CSS y el HTML pero no sabéis ni por donde empezar a la hora de hacer un código. O simplemente queréis dejar de depender del resto y empezar a hacer vuestros propios códigos. Para eso sirve esto. Voy a hacer paso por paso una tabla muy sencilla, para que os sirva como orientación de cómo se hacen los códigos. Espero que os sea de ayuda.



♠ Primer Paso; La idea.



Diseñar a ciegas es complicado. Lo mejor es pensar primero ¿Qué es lo que quiero hacer? ¿Que tipo de ficha? ¿Que secciones necesito que tenga? ¿Cuantas imagenes? ¿Qué colores? hay que pensarlo todo bien. Aunque luego vayas cambiando de idea sobre la marcha, al menos es necesario tener una idea base.

Algo que a mi me ayuda mucho es dibujar las ideas primero en un papel, hace un boceto a lápiz de como quiero más o menos las cosas. Esto no es obligatorio, claro, pero a mi dibujar me ayuda a tener las cosas más claras.

También suele ser interesante elegir la combinación de colores con la que queréis trabajar. Si no os creéis muy diestros a la hora de combinar colores, podéis usar páginas que generan paletas, como http://colorschemedesigner.com/ o http://www.colourlovers.com 

No hace falta ser un genio del dibujo, ni mucho menos. Simplemente es orientativo. Este es con el que voy a trabajar en este tutorial.





¿En que se basa el dibujo? En rectangulos. Todo está dentro de un rectangulo, incluso los textos. Esta es la forma más sencilla de diseñar.



♠ Segundo Paso; Transformar la idea a un código.



Vale, ya tenemos más o menos pensado loq ue queremos hacer. Ahora ¿cómo lo transformamos en un código HTML? Es más sencillo de lo que parece. Simplemente hay que tener una idea principal en la cabeza: cada rectángulo es un div.

Tan simple como eso. Cada uno de los rectangulos que hemos dibujado será un div. Cada uno de esos div tendrá sus estilos. Por ejemplo, nuestra imagen se transformará en lo siguiente. 



Ahora podemos escribir ya el esqueleto del código, que será del estilo siguiente





Y el "esqueleto" ya está listo. Podéis escribir el codigo en el Word o en el Bloc de notas por ejemplo y usar los colores como guía como he hecho yo, para saber qué cosas están dentro de cada recuadro. Ahora falta lo más divertido: darle formato a los divs.



♠ Tercer Paso; Darle formato y colores al código.



Lo que tenemos es solo una estructura muy básica. Hace falta darle formato. Este es el código que tenemos del paso anterior:

Código:

<div style="Propiedades">[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
<div style="Propiedades">Nombre</div>[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
<img src="Link" style="Propiedades" />[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
<div style="Propiedades">Datos básicos</div>[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
<div style="Propiedades">Descripción</div>[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
<div style="Propiedades"><div style="Propiedades"> Texto aqui </div></div>[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
<div style="Propiedades"> Credito </div>[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
[size=12][color=#7a7a7a][font=Calibri, Helvetica, sans-serif][/font][/color][/size]
</div>

¿Veis todos esos sitios donde dice Propiedades? Ahí es donde agregaremos las propiedades CSS que queremos que tenga cada uno de los div. Podéis consultar esta página para ver todas las propiedades CSS que existen, aunque seguro que de ver otros códigos ya os sabéis unas cuantas.

Empezamos, por ejemplo por el div que contiene al resto (que aparece con color rojo en el código). Yo le voy a agregar estas propiedades:


width: 400px; /*** Ancho del cuadro ***/
padding: 10px; /*** Lo que se separa el contenido del borde ***/
margin: 0 auto; /*** Esto sirve para que la tabla aparezca centrada. ***/
background-color: #F2E9E1; /*** Color de fondo. ***/
border: double 6px #CBE86B; /*** Borde ***/


Estas propiedades se agregan entre las dos comillas. Mucho cuidado con no quitar sin querer una de las comillas porque se desconfiguraría todo. Así debe estar por el momento el código.





Y esta sería la previsualización del mismo





Ahora simplemente tenemos que hacer lo mismo para cada uno de los div o recuadros. Por ejemplo, yo voy a usar estas propiedades para el nombre.


text-align: center; /*** Texto centrado ***/
font-size: 36px; /*** Tamaño de texto ***/
font-family: Yanone Kaffeesatz; /*** Fuente escogida. Si ponéis una fuente personalizada hay que incluirla en la tablilla. Si no sabéis como, tenéis este tutorial. ***/
color: #1C140D; /*** Color de texto ***/
text-transform:uppercase; /*** Hace que todas las letras se conviertan en mayusculas ***/
letter-spacing: 2px; /*** Separación entre las letras ***/
padding-bottom:10px; /*** Separación entre el texto y lo que irá debajo ***/


Estas otras propiedades para la imagen




width: 394px; /*** Ancho ***/
height: 150px; /*** Alto ***/
border-style: solid dashed; /*** Estilo de borde. La primera palabra es para los bordes de "arriba y abajo" y la segunda para los de la "derecha e izquierda ***/
border-width: 3px; /*** Ancho de borde ***/
border-color: #CBE86B; /*** Color de borde ***/




Y así va nuestro código





Y esta sería la previsualización del mismo





Como véis, a partir de aquí es todo lo mismo. Agregar propiedades a cada div. Podeis ir previsualizando el codigo para ver como queda e ir acomodandolo mientras lo hacéis. Os dejo el resto de propiedades que he usado.

Para el título de las Descripción he usado el mismo que para el nombre de personaje. (Copiar y pegar)

Para el fondo de la descripción he usado



background: #CBE86B; 
color: #1C140D; 
font-size: 10px; 
text-align: justify; 
font-family: tahoma;
line-height: 115%; /*** Distancia de interlineado ***/
padding:15px;




Como el formato de texto lo he definido en el cuadro anterior, aquí solo defino el scroll



max-height: 250px; /*** Es necesario establecer una altura máxima para poner un scroll ***/
padding:5px;
overflow: auto; /*** Esto hará que salga la barra de scroll ***/
opacity: 0.8; /*** Me gusta ponerle transparencia a los cuadros que tienen scroll para que la barra destaque menos, tu puedes quitarselo. ***/



Para la barra de crédito he usado lo mismo que para la barra de datos básicos (Copiar y pegar otra vez)





♠ Cuarto y último paso; Probar el código para que no tenga errores.



Hemos terminado de darle formato a todos los div. Esto es lo que me ha quedado a mí







Para comprobar que nuestro código no tenga errores, lo copiamos en un post cualquiera y previsualizamos o enviamos. Si se ve sin ningun problema y no mueve el perfil de sitio, es que lo hemos hecho bien.

Si el código nos da algún error, puede deberse a

Nos hemos olvidado de cerrar un div. La forma más rápida de comprobar esto es contando que haya el mismo número de < div style... > que de < / div > (le pongo espacios para que no de error ahora)


Nos hemos comido alguna comilla de los style="propiedades"


Algun div está cerrado en mal orden. Los div son como cajas, van unos dentro de otros. Fíjate en mi ejemplo. El div rojo es el primero que se abre y por tanto, el último que se cierra.

Hasta aquí el tutorial. Espero que os haya gustado, os sirva para empezar a crear vuestros propios códigos y, por favor, si no entendéis algo o tenéis alguna duda, preguntadme [Tienes que estar registrado y conectado para ver esa imagen]