¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 [Tutorial] Crea Flat Posts el Jue Ene 30, 2014 2:41 am

Razor

avatar
Pues este es un breve tutorial para enseñaros a hacer “flat posts” como los que he hecho últimamente, ¿quieren ver una preview? Este será el resultado:

Preview:
TITULO PRINCIPAL
Se ajustan a cualquier ancho Ópalo Contento
Aquí va tu subtitulo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed dictum ante, at pellentesque nisl. Nam tempor risus nec massa tempor rhoncus. Quisque non mauris lobortis, pretium velit eget, dictum justo. Phasellus dictum justo magna. Integer tincidunt lectus ac turpis pellentesque sodales. Curabitur nec ipsum sapien. Aliquam sit amet elit nisi. Pellentesque in quam ullamcorper, lobortis augue nec, bibendum neque.

Pellentesque id lorem mi. Donec posuere mollis velit. Vivamus porttitor odio vitae est faucibus, ac fermentum magna tincidunt. Fusce venenatis lorem id sem elementum, at venenatis nunc sagittis. Aliquam et lorem orci.
Sí, puedes seguir agregando tantos como quieras:
Nam commodo lacus at euismod aliquet. Curabitur nisl nibh, condimentum ut gravida sed, interdum ut magna. Nam in justo nec nisl vulputate elementum. Donec lectus orci, aliquet vulputate metus a, aliquam facilisis metus.

Duis non rhoncus sem. Maecenas faucibus vitae ante eget accumsan. Mauris vitae purus ut nibh elementum feugiat a fermentum ipsum. Vestibulum pulvinar luctus massa sit amet aliquam. In ac ultricies lacus.
Hasta puedes cambiarles el color con un pequeño agregado:
Nam commodo lacus at euismod aliquet. Curabitur nisl nibh, condimentum ut gravida sed, interdum ut magna. Nam in justo nec nisl vulputate elementum. Donec lectus orci, aliquet vulputate metus a, aliquam facilisis metus.

Duis non rhoncus sem. Maecenas faucibus vitae ante eget accumsan. Mauris vitae purus ut nibh elementum feugiat a fermentum ipsum. Vestibulum pulvinar luctus massa sit amet aliquam. In ac ultricies lacus.

Agradézcanle a Leda que me dio la idea de hacer este tutorial, vi un comentario donde quería aprender, así que, ¿Por qué no?

Y para hacerles la vida más sencilla les hice todas las clases CSS en la StyleSheet del foro, así que no necesitan nada de escribir códigos raros, con un poco de buena memoria para aprenderte las clases basta.

Bien, antes de iniciar es necesario decirles que trabajaremos con HTML y no con BBCode, porque es muy feo. :'C Así que tendrás que ir abriendo las balizas de tablas, columnas y filas manualmente, atento con el cierre también. :'D Por eso les hago una pequeña introducción al trabajo con tablas en HTML:

  • ► Table: Indica que se va a empezar a abrir una tabla y dentro de ella se abrirán las filas y columnas. El "<*asdf>" es la etiqueta de inicio y el "<*/asdf>" es de cierre, esto es universal.
    Código:
    <table></table>

  • ► TR: Indica que se abre una fila en una tabla (las horizontales) y se soportarán las columnas dentro de estas balizas. Quedando así:
    Código:
    <table><tr></tr></table>

  • ► TD: Indica que se abre una columna dentro de una fila (las verticales) dentro de estas balizas irá el contenido.
    Código:
    <table><tr><td>CONTENIDO :D</td></tr></table>



Bien, iniciemos a aprender algo sobre las clases:

  • ► ¿Qué es una clase?: Es una propiedad de estilo que se le aplica a una baliza HTML, se llama por medio del comando class="NOMBRE_DE_LA_CLASE", como veis el nombre de la clase nunca lleva espacios, es como la ID de tu personaje en la Base de Datos del RPG Maker. La clase se pone luego de la etiqueta de apertura de una baliza HTML, quedando algo como <*etiqueta class="NOMBRE_CLASE"> (ignoren el asterisco, es para que no se desconfigure el foro con mis ejemplos :V)
  • post_base: Esta es la ID de la clase que creé para la tabla en general, es decir la aplicarás en la etiqueta de apertura TABLE, quedando algo como
    <*table class="post_base">.
  • post_title: Esta es la ID de la clase que da formato al texto principal, aplicalo en la primera etiqueta TD de la tabla, quedaría algo como
    <*table class="post_base"><*tr><*td class"post_title">
  • decoration: Esta es la ID de la clase que da formato a la descripción del texto principal, aplicalo con un span en las lineas de texto de descripción, como no te interesa saber que es un span no le pongas mente y hazlo así:
    <*table class="post_base"><*tr><*td class"post_title">TITULO
    <*span class="decoration">tus lineas de descripción.
  • post_subtitle: Esta es la ID de la clase que da formato a los subtitulos de la tabla (mira el preview para saber cual es), se aplica en la columna principal de la siguiente fila, o sea después de haber cerrado las etiquetas anteriores y haber abierto una nueva fila. Siguiendo el ejemplo anterior:
    <*table class="post_base"><*tr><*td class"post_title">TITULO
    <*span class="decoration">tus lineas de descripción.<*/span><*/td><*/tr>aqui se cerro la anterior fila y todos sus comandos, ahora tienes que abrir la siguiente fila que dara lugar al subtitulo junto con su respectiva columna, es decir, el TR y TD (este ultimo con tu nueva clase post_subtitle).<*tr><*td class="post_subtitle">TU SUBTITULO<*/td><*/tr><*/table>
  • post_content: No desmayes, esto es lo ultimo. :'D Esta ID aplica a la columna de la siguiente fila (mismo procedimiento, asegúrate de haber cerrado la anterior fila y sus columnas y abrir la nueva fila y su nueva columna con esta propiedad).
    <*table class="post_base"><*tr><*td class"post_title">TITULO
    <*span class="decoration">tus lineas de descripción.<*/span><*/td><*/tr>cierra y abre.<*tr><*td class="post_subtitle">TU SUBTITULO<*/td><*/tr>cierra y abre.<*tr><*td class="post_content">TU CONTENIDO<*/td><*/tr><*/table>


Eso es todo, si seguiste bien los anteriores pasos, felicidades, siéntete como un diseñador web dando sus primeros pasos. :V

Notas
  • ► Si gente, si, las comillas en la propiedad de CLASS=”” son importantes. :V
  • ► No gente, no, el texto en color rojo que puse anteriormente no va en el codigo, es solo para indicarles mas especificidades. :V
  • ► Para cambiar el color a las clases post_title, post_subtitle y post_content solo hace falta agregar una propiedad de estilo, tiene el mismo procedimiento de aplicacion de CLASS="" luego de las comillas de cierre has un espacio y pon STYLE="background-color: #FFFFFF" sustituye el #FFFFFF por el codigo en formato hexadecimal de tu color deseado.
    PD: No gente, no, las mayúsculas en STYLE y CLASS no son obligatorias, solo las pongo para que destaquen.
  • ► Si le pillas a esto de los códigos te darás cuenta que solo trabaje con una linea de columnas, porque así queda mejor, pero puedes probar con diferentes propiedades de estilo en una columna extra para obtener un abanico de posibilidades mas amplio en tus posts. No lo hago porque no tengo tanto tiempo. Pero si me piden que les haga un tutorial más extenso, les trataré de hacer más clases en cuando lo tenga. :'D

Y como punto final les dejo a los vagos el código HTML para que solo copy-pasteen y sustituyan el contenido. :V
Código:
<table class="post_base"><tr><td class="post_title">TITULO PRINCIPAL
<span class="decoration">TU DESCRIPCION</span></td></tr><tr><td class="post_subtitle">TU SUBTITULO1</td></tr><tr><td class="post_content">T CONTENIDO1</td></tr><tr><td class="post_subtitle">TU SUBTITULO2</td></tr><tr><td class="post_content">TU CONTENIDO2</td></tr><tr><td class="post_subtitle" style="background-color: #ED9940;">TU SUBTITULO CON COLOR ESPECIAL</td></tr><tr><td class="post_content" style="background-color: #C99053;">TU CONTENIDO CON COLOR ESPECIAL.</td></tr></table>





Todos mis aportes por Mediafire tienen contraseña, esa es: www.universomaker.net
Esto es para evitar plagio, asegúrense de copiar y pegar la contraseña.

#2 Re: [Tutorial] Crea Flat Posts el Vie Ene 31, 2014 8:05 pm

orochii

avatar
Jajajaja, ok, cuando quiera hacerme uno, me copio el código de vagos :V... xDD.
Pues está guay el tutorial. A poco hasta le sirve a algunos como una mini-introducción al HTML. Al menos los conceptos de las balizas, clases y tal.

#3 Re: [Tutorial] Crea Flat Posts el Vie Ene 31, 2014 10:53 pm

Cuervoso

avatar
Se ve bien, seguro si algún día publico algo importante me daré el tiempo de hacer un diseño de esos xD.

Saludos.






Cuervoso! No te pases ¬_¬

#4 Re: [Tutorial] Crea Flat Posts el Sáb Feb 01, 2014 6:09 pm

Ledai

avatar
Gracias por el tuto... trataré de revisarlo cuando saque un ratito, me gustan estas cosas personalizadas.
gracias!!!!!!




Entérate de todas las novedades

#5 Re: [Tutorial] Crea Flat Posts el Mar Feb 04, 2014 3:40 pm

Razor

avatar
De nada gente. C:

Orochii, tu ya sabes de esto me imagino de todos modos. e__e jajajaa

Dark, si alguna vez lo haces. :V





Todos mis aportes por Mediafire tienen contraseña, esa es: www.universomaker.net
Esto es para evitar plagio, asegúrense de copiar y pegar la contraseña.

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

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