O W N
¡Conéctate y ven a divertirte con nosotr@s! :)
Si no estás registrado, hazlo y forma parte de nuestra gran comunidad.
¡La administración ha modificado otra vez el foro, y los Invitados ya pueden ver todas las secciones! Aún así, para comentar y crear temas debes tener una cuenta.

Cualquier duda, queja o sugerencia que quieras darle al staff, éste es nuestro facebook: https://www.facebook.com/onlywebnovels

¡IMPORTANTE!, los Mensajes Privados de los Invitados no serán respondidos por la administración. Te esperamos en nuestro facebook (:

Atte: Staff OnlyWns.
Conectarse

Recuperar mi contraseña

Últimos temas
» ♡ snow flower.
Hoy a las 6:35 pm por sagittarius

» the code; audiciones abiertas
Hoy a las 5:57 pm por Litten

» Dinos como te sientes con un gif
Hoy a las 5:49 pm por Someone

» Proyecto muggle (Inscripciones abiertas)
Hoy a las 5:11 pm por Carstairs

» ALIADOS: ENTRE EL CIELO Y LA TIERRA
Hoy a las 4:33 pm por candymalik

» Instituto Fénix | Muro
Hoy a las 4:22 pm por lovesick

» cokehq cay {muro interactivo.
Hoy a las 3:51 pm por hypatia.

» Instituto Fénix | N. C.
Hoy a las 3:51 pm por Carstairs

» ¿Es posible el amor? Draco y tú
Hoy a las 3:03 pm por Butterfly199225

novedades

00 . 01 Anuncios del mes febrero.
00 . 02 Actualización del PROTOCOLO, nueva medida obligatoria de avatares.
00 . 03 Remodelación del foro febrero del 2017.
00 . 00 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
administradora
Rumplestiltskin. ϟ Jenn.
miembros del staff
Beta readers
ϟ hypatia.
aka Kate.
MP ϟ Ver perfil.
ϟ dépayser
aka Lea.
MP ϟ Ver perfil.
ϟ youngjae
aka .
MP ϟ Ver perfil.
ϟ Stark.
aka Cande.
MP ϟ Ver perfil.
Equipo de Baneo
ϟ Ariel.
aka Dani.
MP ϟ Ver perfil.
ϟ ceonella.
aka Cami.
MP ϟ Ver perfil.
Equipo de Ayuda
ϟ Ritza.
aka Ems.
MP ϟ Ver perfil.
ϟ Charlie.
aka idk.
MP ϟ Ver perfil.
Equipo de Limpieza
ϟ Legendary.
aka Steph.
MP ϟ Ver perfil.
ϟ chihiro
aka Zoe.
MP ϟ Ver perfil.
ϟ Kurisu
aka Teph.
MP ϟ Ver perfil.
ϟ Calore
aka idk.
MP ϟ Ver perfil.
Equipo de Eventos
ϟ ego.
aka Kalgh/Charlie.
MP ϟ Ver perfil.
ϟ Asclepio.
aka Gina.
MP ϟ Ver perfil.
ϟ mieczyslaw
aka Alec.
MP ϟ Ver perfil.
Equipo de Tutoriales
ϟ Kida.
aka Ally.
MP ϟ Ver perfil.
ϟ Spencer.
aka Angy.
MP ϟ Ver perfil.
Equipo de Diseño
ϟ insxne.
aka Mile.
MP ϟ Ver perfil.
ϟ yoongi.
aka Valu.
MP ϟ Ver perfil.
créditos.
Skin hecho por Hardrock de Captain Knows Best. Personalización del skin por Insxne.

Gráficos por y codes hechos por Kaffei e Insxne.

¿Como hacer tu propia tablilla?

Ver el tema anterior Ver el tema siguiente Ir abajo

¿Como hacer tu propia tablilla?

Mensaje por Invitado el Sáb 03 Mayo 2014, 9:06 am

Hola!!, me llamo Eugenia, pero pueden decirme Wenner, hice este tema para los usuarios que quieren aprender a hacer tablillas, también pueden visitar este otro que lo hicieron las chicas del staff Click, primero que nada quiero aclarar que el tutorial NO es mío, es de una chica de oursourcecode Click


Espero que les ayude de mucho, -como a mi-. En el tutorial se explica bien los pasos, pero si no entienden algo solo pregunten (nomuerdo:$).
Invitado



Invitado

Volver arriba Ir abajo

Re: ¿Como hacer tu propia tablilla?

Mensaje por Invitado el Sáb 03 Mayo 2014, 9:34 am

♠ ¿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 





Tutorial echo por; Oyuki
Invitado



Invitado

Volver arriba Ir abajo

Re: ¿Como hacer tu propia tablilla?

Mensaje por Invitado el Sáb 03 Mayo 2014, 11:39 am


John Green
Invitado



Invitado

Volver arriba Ir abajo

Re: ¿Como hacer tu propia tablilla?

Mensaje por Invitado el Sáb 03 Mayo 2014, 12:12 pm

Tigers
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

Invitado



Invitado

Volver arriba Ir abajo

Re: ¿Como hacer tu propia tablilla?

Mensaje por Invitado el Sáb 03 Mayo 2014, 12:32 pm

Scodelario
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
Invitado



Invitado

Volver arriba Ir abajo

Re: ¿Como hacer tu propia tablilla?

Mensaje por Contenido patrocinado

Contenido patrocinado



Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


Permisos de este foro:
No puedes responder a temas en este foro.