maquetacion

Lunes, 14 d diciembre d 2009.

Guía de Maquetación SEO

Después de la elección de palabras clave y la estructura web creo que la maquetación es el tercero de los puntos más importantes en el SEO. Y lo es porque esta es una de las partes menos visibles por el usuario en una web, maquetas muy distintas pueden dar lugar a webs exactamente iguales y eso históricamente ha llevado a que la mayor parte de las webs estén realmente mal maquetadas. Cómo SEOs y a sabiendas de que todo esto no es más que una competencia entre webs por ser mejor que las demás este es un punto en el que es posible e importante destacar.

En este post intentaré hacer un resumen sobre los puntos más importantes a tener en cuenta en la maquetación seo... es un post, no puedo explicarlo todo ni entrar a discutir porque una opción es mejor que otra pero espero al menos marcar el camino para aquellos que estén interesados en el tema. Empecemos...

[...]

¿Te interesa? Sigue leyendo...

3 Comentarios, leelos

Temas Relacionados: maquetacion seo

Autor:

Martes, 10 d noviembre d 2009.

Seo OnPage: Cómo usar los textos y titles en los links

En una web no todo es visible en primera instancia. Hay ciertas informaciones que a primera vista no son percibidas por los usuarios y sin embargo forman tan parte del contenido de la web como muchas otras. Algunos atributos de las etiquetas html forman parte de este conjunto de elementos.

Al trabajar el SEO OnPage de una web debemos dedicar una atención especial a los links. Estos son la base de las relaciones en SEO. Comunican las páginas y al hacerlo les traspasan autoridad y significado semántico. Y esto es tan valido para links internos como externos.

Todo link lleva a una url de destino (salvo salvajadas creadas con javascript intrusivo que no deberíamos permitir en nuestras webs). Cada una de estas urls en una página con el Seo OnPage trabajado se orienta hacia el posicionamiento de una keyword concreta, aquella de la búsqueda por la que queremos posicionarla en los buscadores. Si decimos que al crear un link traspasamos una parte de significado semántico a la web de destino, lo lógico es que este significado sea lo más acorde posible a la keyword que posicionamos.

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: maquetacion seo

Autor:

Miércoles, 04 d noviembre d 2009.

Seo OnPage: Uso de los h2 y h3 en las maquetas seo

En una correcta maquetación web los distintos elementos de una página se indican con etiquetas html que informan de que tipo de elemento es el que debe mostrarse. Así para incluir imágenes usamos la etiqueta "img", para links la "a", etc. Estas etiquetas, cuando son bien usadas, son tenidas en cuenta por los buscadores que las usan para averiguar que es lo que realmente representa cada texto de la página.

Esta forma de entender las páginas es lo que usamos en Seo OnPage para "manipular" lo que entiende el buscador sobre la página y hacerle creer que la página trata realmente sobre un término concreto (la keyword posicionada) de lo que puede entender si analiza todo el texto por igual de la página. Para ello el primer paso a dar es manipular las etiquetas "title" y "h1" que representan el nombre de la página y el titular principal de esta. Sobre el uso de estas etiquetas hay mucha documentación y posts escritos.

Yo voy a tratar el tema de los titulares de segundo y tercer nivel, que no son ni mucho menos tan importantes como los de primer nivel pero que nos ayudan a redondear un poco más la página...

[...]

¿Te interesa? Sigue leyendo...

4 Comentarios, leelos

Temas Relacionados: maquetacion seo

Autor:

Viernes, 30 d octubre d 2009.

Seo OnPage: Cómo usar los meta-tags en SEO

Los meta-tags son unas etiquetas html que permiten incluir en la cabecera de la página una serie de informaciones útiles para configurar la página y dar cierta información extra sobre la misma. Su contenido no aparece representado en la visualización de la página y esto los hace muy manipulables y adaptables, es por este motivo que para muchos han sido históricamente el primer punto donde hacer optimizaciones para conseguir un mejor posicionamiento en los buscadores.

A destacar: Los meta-tags no son "todo el SEO OnPage", son solo una pequeña (muy pequeña, pequeñísima, ínfima, ...) parte de la información de una página y en SEO OnPage miramos toda estas partes por pequeñas que sean. Hoy en día encuentras muchas páginas con unos metatags muy trabajados pero que van acompañados de una web muy mal maquetada lo cual es totalmente ilógico e inútil. Va a aportarnos muchísimo más cuidar el contenido real, la maqueta, la estructura de la web o incluso las urls concretas de cada página que los meta-tags.

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: maquetacion seo

Autor:

Sábado, 03 d octubre d 2009.

revisiones de productos en microformatos xhtml

Este fin de semana me puse a maquetar una serie de fichas de un proyecto propio. Ya que tenía que volver a empezar las maquetas desde cero me propuse subir un grado la calidad, es decir, introducir microformatos. Cada vez parece que falta menos para que sean tenidos en cuenta por todos los buscadores y hay que empezar a tomarselos en serio.

Los microformatos son unas normas a seguir a la hora de realizar la maqueta de un tipo de contenido concreto. Básicamente se nos obliga a usar unos nombres de clases concretos para marcar ciertos datos y a incluir los contenidos dentro de contenedores también con clases concretas. Así si quiero incluir información sobre una persona deberé crear un contenedor "vcard" (tarjeta de visita) que puede ser cualquier elemento html y dentro ir detallando la información de esa persona (nombre, telefono, mail, etc...) usando clases especiales para que los buscadores puedan extraer precisamente esos datos.

[...]

¿Te interesa? Sigue leyendo...

2 Comentarios, leelos

Temas Relacionados: maquetacion seo

Autor:

Miércoles, 29 d julio d 2009.

texto vertical con css

Leo en Ajaxian una entrada que nos explica como conseguir con los motores de los navegadores más comunes escribir texto en vertical sólo con css. Esta es una limitación que en ocasiones obliga a pasar a imagen los textos verticales de los diseños.

Lo dejo aquí como apunte, ya que no es algo tan común como para memorizar, espero que le saquéis partido:

span#myText{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

[...]

¿Te interesa? Sigue leyendo...

4 Comentarios, leelos

Temas Relacionados: maquetacion

Autor:

Martes, 24 d marzo d 2009.

editor de código web en php y opensource (.php, .js, .css y .html) | ecoder

Ecoder es un editor de código desarrollado en php que nos permite disponer de una forma cómoda y rápida de editar nuestros archivos en cualquier parte sin disponer de un ide ni ningún tipo de herramienta de edición.

El sistema es totalmente gratuíto y podemos instalarlo en cualquier host con soporte php. Básicamente, se trata de un sistema por el cual poder acceder a nuestros archivos y poder cambiarlos usando un editor con resaltado de sintaxis y otras opciones básicas para una edición cómoda (undo, respeto de las tabulaciones, etc...)

Por el momento, es el más cómodo de cuantos productos de este típo he probado

[...]

¿Te interesa? Sigue leyendo...

2 Comentarios, leelos

Temas Relacionados: Enlaces maquetacion programacion

Autor:

Sábado, 14 d febrero d 2009.

html semantico

¿Qué es html semántico? ¿No es todo el html igual? Cuando hablamos de html semántico no nos referimos a ninguna nueva tecnología, ni siquiera aportamos ninguna regla nueva al html. Simplemente nos referimos a una página web en la que la estructura html está bien hecha, aprovechando la semántica que brinda el html, y por tanto dota por si sola a los contenidos de significado.

En las especificaciones html del W3C se nos indica una colección de etiquetas que podemos usar a la hora de generar nuestra web. Pero estas etiquetas historicamente se han usado más por la apariencia que adquirían en la pantalla de los navegadores que por su significado real. Así, la web vivió muchos años con maquetas llenas de tablas y atributos que permitían a los diseñadores y maquetadores colocar cada elemento donde les apetecía.

Más adelante, cuando el uso del css 2.1 empezó a hacerse común estas tablas pasaron a ser sustituidas por divs, un elementeo sin ningún significado semántico que solo debe usarse como bloque agrupador de otros.

El html semántico se hace posible en un tiempo en el que la información sobre el propio html y el css en los distintos navegadores ha llegado a ser tan completa que nos permite, con algo de experiencia, empezar a preocuparnos por que nuestro código use realmente las etiquetas html que aportan al contenido el significado real que tienen. En una página con html semántico las tablas solo tienen sentido para mostrar datos tabulados, los divs solo se usan como bloques contenedores como pueden ser la cabecera o pie de la página, la barra lateral, etc... El resto de elementos deben incluirse con las etiquetas html que los representan: titulares, parrafos, listas, citas, estilos de letra, etc...

Seguidamente una mini guía muy básica de como representar con etiquetas html distintos elementos en una web.

  • Bloques bien diferenciados en la página  (Cabecera, barra lateral, etc... ) : Único caso en el que contendremos los elementos dentro de una etiqueta <div/>.
  • Titulares, titulos de sección, subtitulos : Usaremos las etiquetas <hX/> que nos permiten marcar  titulos. El titular principal de la página será la etiqueta <h1/>, los titulos de secciones los <h2/>, distintos titulos de partes del contenido los <h3/>, subtutitulos <h4/>, etc... y así hasta el nivel de títulos que necesitemos.
  • Menús, Pestañas, listas de links, footers de links, etc. : Usaremos las etiquetas de listado no numerado <ul/> para contener el elemento y luego para cada link usaremos <li><a/><li> marcando que cada link es en realidad un elemento de listado que solo contiene un link.
  • Contenido : Para redactar el contenido debemos usar etiquetas enfunción de lo escrito en el contenido. Para parrafos normales, usaremos <p/>para cada parrafo. Para listados ordenados <ol/>, sin orden definido <ul/>. Aparte tenemos la posibilidad de usar otras etiquetas para contenidos especiales: <pre/>, <blockquote/>, etc.

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Temas Relacionados: maquetacion

Autor:

Jueves, 12 d febrero d 2009.

Etiquetas doctype

EL W3C (World Wide Web Consortium) indica entre sus reglas que los ficheros en formato HTML, XML y derivados deben incluir en su comienzo una etiqueta especial que defina la estructura de su contenido. Esta etiqueta es la famosa doctype y viene a marcar las reglas con las que está creada una página concreta.

¿Reglas distintas? ¿No son todas las páginas iguales por dentro? No, aunque lentamente el código HTML ha ido evolucionando con el tiempo y aunque los navegadores hacen lo que pueden por representar siempre las páginas lo mejor posible si les ayudamos indicándoles con que versión estamos trabajando nuestras posibilidades de conseguir una correcta visualización en todos los navegadores aumentarán muchísimo.

Actualmente existen una gran cantidad de doctypes pero debemos centrarnos en aquellos que podemos querer usar o que podemos encontarnos en la web actual. Para cada doctype existen 3 variantes posibles:

  • Strict : Cuando se van a seguir las especificaciones de ese doctype al 100%
  • Transitional : Cuando se permiten ciertos "errores" comunmente aceptados en versiones anteriores de esa especificacion.
  • Frameset : Cuando se trata de una declaración de Frames (esto no deberíamos usarlo nunca).

Etiquetas Doctype Html 4.01

Doctype Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

Doctype Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Doctype Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

Etiquetas Doctype XHTML 1.0

Doctype Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: maquetacion

Autor:

Sábado, 07 d febrero d 2009.

Diferenciar css entre navegadores (firefox, explorer y explorer 7)

Una información que muchos conocen pero que siempre viene bien recordar y organizar. ¿Como diferenciar el css entre navegadores?

La opción más aconsejada es empezar a maquetar siempre en un navegador que cumpla suficientemente bien los estándares y no hacerle un css demasiado complejo. A partir de ahí los descuadres en la maqueta, que deberían producirse solo en internet explorer,  se pueden arreglar con otros archivos css que podemos cargar como condicionales de explorer:

<link   rel="stylesheet" href="css/cssNormal.css" type="text/css" />
<!--[if IE]><link   rel="stylesheet" href="css/cssParaExplorer.css" type="text/css" /><![endif]-->

Con este tipo de códigos el css solo será cargado por navegadores explorer.

Una segunda opción también válida es la de utilizar formas válidas de definir los elementos del css pero que solo entienden algunos navegadores. De esta forma podemos añadir pequeños arreglos en un mismo archivo css sin que por ello nuestro código deje de validar.

#miDiv { código todos los navegadores }
* html #miDiv { solo lo entenderá IE6 }
*:first-child+html #miDiv{ solo lo entenderá IE7} 
html>/**/body #miDiv { solo lo entenderá FF }

Por último la forma más rápida de corregir un pequeño defecto es usando carácteres delante de propiedades de una misma definición css.

#miDiv { 
  margin:20px; /* para todos los navegadores */
  #margin:25px; /* para todos los internet explorer */
  -margin:30px;  /* solo para internet explorer 6 */
}

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Temas Relacionados: maquetacion

Autor: