De Psd a Html: Tus páginas más arriba en los buscadores (los textos)

Seguramente alguna vez te habrás preguntado ¿porqué los buscadores indexan mejor y más rápido ciertas páginas que otras?
O…¿porqué ciertas páginas aparecen antes en los resultados de Google, utilizando la misma frase de búsqueda?

Al finalizar este artículo aprenderás uno de los mejores trucos para hacer para que tus páginas se indexen mejor en los buscadores.

Ya he comentado en otros artículos, la importancia de incluir los textos de nuestro sitio, con texto nativo de Html utlizando las etiquetas <p>, y <h1> al <h6>.
Esto es fundamental porque en esas etiquetas es donde justamente se enfocan los buscadores a la hora de recopilar los contenidos de cada una de nuestras páginas.
Por eso es que NO debes incluir NUNCA los textos en formato de imagen. (de ser posible)

Por suerte, CSS dispone de muchisimas propiedades para manipular nuestros textos en Html, permitiéndonos reproducirlos de formá idéntica al diseño,  al convertir nuestro Psd a Html.

Para ayudarte a que estilices tus textos HTML de forma correcta, te muestro aquí las propiedades y valores que se le pueden aplicar a los textos mediante CSS.
Recordemos que las propiedades de las fuentes de texto se asignan asi :

<p>
propiedad: valor;
</p>

* En este ejemplo estaríamos asigandole propiedades a las etiqueta <p>, pero podríamos aplicarsela a una etiqueta de titulos <h1> al <h6> o a una clase que nosotros mismos creemos (véase Creación de Clases CSS)

Propiedades de las fuentes

font-family
Se utiliza para determinar la fuente tipográfica o familia que se va a utilizar.
Ej:
font-family: courier;

font-style
Determina el formato del texto. Puede ser italic, oblique, normal.
Ej:
font-style: italic;

font-weight
Determina el grosor o la anchura de la tipografía.
Los valores pueden ser: normal, bold, bolder, lighter, o números en centenas comprendidos entre 100 y 900. El valor normal numérico sería 400, y el bold sería 700.
Ej:
font-weight: bold;

font-size
Especifica el tamaño de la fuente.
Estos valores pueden ser absolutos (xx-small, x-small, small, medium, large, x-large, xx-large),  relativos (larger, smaller), o en puntos tipográficos (pt).
Ej:
font-size: 20pt;
font-size: large;

Los tamaños que asignan los navegadores por defecto a las etiquetas de titulares <h1> al <h6>, son los siguientes:

xx-large = h1
x-large = h2
large = h3
medium = h4
small = h5
xx-small = h6

word-spacing
Determina el espaciado entre las palabras.
Ej:
word-spacing: 3em;

letter-spacing
Especifica el espaciado entre letras. Un valor en 0 , es el valor normal.
Ej:
letter-spacing: 4em;

text-decoration
Aplica distintos efectos a los textos. Pueden ser: none, underline, overline, line-through y blink. (traducidos serían: ninguno, subrayado, sobre-rayado, tachado y titilando)
Ej:
text-decoration: none;

vertical-align
Especifica la alineación vertical. El valor se puede especificar en porcentaje o en una palabra clave como baseline, middle, sub, super, text-top, text-bottom, top, bottom.
Ej:
vertical-align: middle;

text-align
Determina la alineacion horizontal del texto dentro del bloque. Las opciones serían left, right, center y justify.
Ej:
text-align: left;

line-height
Determina el espacio entre las lineas base de los textos. Los valores de porcentaje son relativos al tamaño de la fuente del elemento en cuestión.
Ej:
line-height: 12pt;
line-height: 100%;

text-indent
Sirve para establecer tabulaciones en la primera letra del párrafo, es decir, se aplica a la primera línea. Puede ser longitud o porcentaje.
text-indent: 10px;
text-indent: 6em;

text-transform
Aplica más efectos visuales a los textos. Pueden ser capitalize, uppercase, lowercase, none.
Ej:
text-transform: none;

Unidades de Medida

Las unidades de medidas que puede adoptar un valor aplicado a una propiedad CSS, puede ser relativo o absoluto.

Unidades de medida relativas:

em = Un em es igual al tamaño de la fuente del elemento actual.
ex = Un ex es x-altura de un conjunto de caracteres.
px = Pixeles.

Unidades de medida absolutas:

in = pulgadas
cm = centímetros
mm = milímetros
pt = puntos (1 pt = 1/72 pulgada)
pc = picas (1 pc = 12pt)

Hasta aquí hemos visto casi todas las propiedades que le podemos aplicar a los textos Html, mediante CSS. Es una herramienta sumamente poderosa a la hora de pasar nuestro Psd a Html.

TE PROPONGO QUE…
Ahora que sabes el truco para que los buscadores indexen mejor tus contenidos, te aconsejo que practiques aplicando y cambiando las diferentes propiedades de los textos.
Para ello te propongo un ejercicio simple: abre un archivo HTML nuevo, y coloca solo un párrafo de texto con las correspondientes etiquetas <p>. Luego crea tu archivo CSS y linkéalo a tu HTML como ya te enseñe (mira esta artíiculo)
Por último, juega con el CSS, aplicándole a tus textos de etiqueta <p>, las diferentes propiedades que te mostré aquí.
Verás lo simple y poderoso que es.

En los próximos artículos, te estaré enseñando más propiedades que podrás aplicar a diferentes elementos de tu documento, y que te ayudarán muchisimo a la hora de convertir correctamente, tu Psd a Html.

————————————————————————–
Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
YO personalmente estaré contestando tus preguntas y comentarios para ayudarte.

Anuncios

Un pensamiento en “De Psd a Html: Tus páginas más arriba en los buscadores (los textos)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s