¿Cómo mejorar la posición de su portal en Google?

Hay muchas técnicas para mejorar la posición de su portal en Google pero podríamos dividirlas en tres categorías.

Mejorar la construcción del portal

Mejorar la accesibilidad de los contenidos ofrecidos en nuestro portal repercute positivamente en la posición obtenida dentro de los diferentes buscadores. Evitar el uso de contenidos de difícil acceso para buscadores (ej. Adobe Flash), usar un código HTML semántico, usar atributos como ALT y TITLE en el código de imágenes y enlaces logra que nuestro portal sea más fácil de indexar. Sin embargo, aunque las técnicas mencionadas facilitan la inclusión del contenido de nuestro portal en el índice de Google, no hacen que aparezcan en el mismo en primer lugar.

Los siguientes pasos hacen que Google (u otros motores de búsqueda) descubra el contenido de nuestro portal.

• Crear una jerarquía clara. Cada página tiene que ser accesible al menos desde otra página del portal.
• Usar enlaces textuales. Los enlaces entre páginas deben ser textuales en vez de imágenes, Flash u otras tecnologías de difícil acceso.
• Usar direcciones de Internet (URLs) cortas. - Algunas direcciones de Internet son generadas automáticamente, por ejemplo, en aquellos portales que usan un gestor de contenido (CMS). Los direcciones cortas, con menos parámetros (caracteres después del símbolo ? en la barra de direcciones), son más propensas a ser encontradas por buscadores y usuarios
• Notificar de la existencia del portal y enviar un mapa del mismo a Google. La notificación de la existencia del mismo puede acelerar la inclusión de su portal para ser indexado. Dicha notificación y el envío un mapa del portal ayudan a Google a aprender la estructura del portal y aumentar el número de páginas indexadas.

Llegados al punto que los motores de búsqueda puedan acceder a su portal, necesita ocuparse del contenido del mismo.

Mejorar el contenido del portal

La consideración más importante durante la producción del contenido es la inclusión de términos de búsqueda. Antes de escribir una página debe estar claro lo que queremos transmitir a nuestros visitantes y los posibles términos de búsqueda usados por ellos para encontrar dicho contenido. A continuación, debemos incorporar dichos términos de un modo natural al contenido de la página, atributos ALT de las imágenes y al título de la misma. Es importante no abusar del uso de términos de búsqueda. Dos o tres por página es adecuado. Usar más, puede resultar en un contenido más complejo y de mayor dificultad de lectura. Más aún, el ranking individual de cada término puede verse reducido. No se debe llenar la página de términos de búsqueda, ya que podemos ser penalizados. Los términos de búsqueda deben ser incorporados de un modo natural en el contenido.

Lo más importante es crear contenido de calidad. Si el contenido esta bien escrito y es interesante atraerá a visitantes y por lo tanto a enlaces que redundaran en una mejor posición en los motores de búsqueda.

Fomentar los enlaces de calidad

Probablemente usted haya oído que Google clasifica los portales en función del número de enlaces entrantes. Google clasifica parcialmente los páginas basándose en el número de portales que enlazan a ellas. Pero no sólo en la cantidad de enlaces, también la calidad y relevancia de los mismos. Google analiza un número de factores (temática del portal que enlaza, texto que aparece en el enlace, popularidad del portal que enlaza, reputación del portal que enlaza ...)

Normalmente no merece la pena el intercambio de enlaces con otros portales salvo que éstos vengan de portales de calidad con un contenido relevante respecto al de nuestro portal.

Desconfíe de las empresas que le prometan el Nº 1 en Google

Desconfíe de empresas que le garantizan un ranking concreto. Si una empresa le promete que será número uno en Google, pregunte más información. Es relativamente fácil conseguir que un portal aparezca número uno en Google para un término de búsqueda poco conocido. Sin embargo, es mucho más complicado conseguir ser número uno en Google para algo útil desde una perspectiva de marketing.

Pregunte también, ¿Que pasa si dicha empresa fracasa en dicha promesa? ¿Le devolverá parte del contrato?. La respuesta es probablemente no.

Finalmente, pregunte al encargado de dicha empresa que le explique que técnicas se van a usar. Si son evasivos con las respuestas, desconfíe.

Si descubre las técnicas que van a usar, podrá juzgar si la utilización de dichas técnicas pone a su portal en peligro de ser añadido a la listas negra de Google. La inclusión en dichas listas podría suponer incluso la supresión de su portal en los resultados de búsqueda. Técnicas consideradas ilegales por Google son entre otras:

• Uso de texto y enlaces ocultos.
• Contenido sólo para motores de búsqueda.
• Envío automático de notificaciones a Google.
• Duplicación de contenido.
• Uso masivo de palabras clave.

Etiquetas: google, seo

Ejercicio 1 del curso diseño Web

Esta entrada pretende ser un ejercicio para aquellos que tras leer la primera entrada de la serie Curso de Diseño Web, ¿Cómo funciona la Web?, quieran ejercitar lo aprendido.

Imagine que el dueño del cabaret café (un elegante café situado en el teatro Antonio Buero Vallejo de Guadalajara) le pasa esta servilleta con un listado de los cafes que se ofrecen en su local. Quiere que le hagas una página Web sencilla.

Tareas

• Abrir un archivo en su editor preferido (Notepad, Textmate, ...)
• Escribir dentro del mismo el menú que nos paso el dueño del cabaret Café en la servilleta. Sin la nota en la esquina superior derecha.
• Grabarlo como index.html
• Abrir el archivo index.html en un navegador

Debería ver algo como lo mostrado en la siguiente imagen

Como puede ver es necesario etiquetar nuestra primera página en HTML. Añada HTML a su archivo y debería ver algo así:

Sin no sabe como hacerlo puede descargar un archivo ZIP con el archivo HTML.

La siguiente tarea es añadir algo de estilo. Intente que su página quede como en la siguiente imagen. Puede descargar un archivo ZIP con el archivo HTML que incluye el código CSS con la solución.

Etiquetas: Curso Diseño Web, ejercicio

Curso de Diseño Web X - Tablas

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML, como añadir estilo con CSS , la tipografía, tamaño de letra y colores en CSS y el modelo de caja en CSS. En esta entrada hablamos de como representar información tabular en HTML.

Usamos los siguiente elementos HTML para crear tablas

• Use la etiqueta <table> para empezar una tabla.
• Cada elemento <tr> es una fila.
• Cada elemento <th> es una celda cabecera.
• Cada elemento <td> es una celda.

Mejorar la usabilidad de las tablas

El atributo summary no se muestra en la página Web. Este atributo se usa exclusivamente para mejorar accesibilidad y actúa como un texto alternativo que los lectores de pantalla puede leer en voz alta a un usuario para describir la tabla.

<table summary="Descripción de la tabla" ></table>

El elemento caption, por otro lado, se muestra como pie de tabla; sin embargo por defecto, la mayoría de los navegadores la muestran encima de la tabla. La posición de este elemento la podemos controlar con CSS.

Celdas

El modelo de caja en CSS también tiene se usa para representar tablas tal y como se muestra en el siguiente gráfico.

No existe un margen como en el tradicional modelo de cajas; sin embargo podemos usar la propiedad border-spacing para separar nuestras celdas. A menudo nos va interesar que los bordes de las celdas se representen como uno sólo. Para ello usaremos la propiedad CSS border-collapse.

border-collapse: collapse;

Podemos aplicar otras propiedades CSS para dar estilo a nuestras tablas. Por ejemplo, si queremos que nuestras celdas cabecera tengan un color de fondo escribiríamos:

th { background-color: #cc6600;}

En HTML podemos anidar unas tablas dentro de otras y podemos hacer que celdas ocupen varias filas o columnas gracias a los atributos rowspan y colspan. El siguiente ejemplo, donde se usan los atributos mencionados en este artículo, muestra código HTML, CSS y como quedaría en un navegador.

Código HTML:

 
<table summary="Esta tabla contien los datos adquiridos durante mi viaje para la serie un país en la mochila. He incluido ifnormación sobre las ciudades visitadas, 
la fecha de visita, la altitud, población y un ranking de la calidad de las cenas que allí disfrute."> 
 <caption>Ciudades que visite durante mi viaje por españa</caption> 
 <tr> 
  <th>Ciudad</th> 
  <th>Fecha</th> 
  <th>Temperatura</th> 
  <th>Altitud</th> 
  <th>Población</th> 
  <th>Ranking Cena</th>  
 </tr> 
 <tr> 
  <td rowspan="2">El Baixo Miño (Galicia)</td> 
  <td>Agosto 2, 1995</td> 
  <td>23º</td> 
  <td rowspan="2">200 m</td> 
  <td rowspan="2">2.000</td> 
  <td>5/5</td> 
 </tr> 
 <tr> 
  <td>Septiembre 2, 1995</td> 
  <td>15º</td> 
  <td>4/5</td> 
 </tr> 
 <tr> 
  <td>El Maestrazgo de Teruel</td> 
  <td>Junio 2, 1995</td> 
  <td>20º</td> 
  <td>1.300 m</td> 
  <td>500</td> 
  <td>3/5</td> 
 </tr> 
 <tr> 
  <td>El Priorato Tarragona</td> 
  <td>Mayo 1, 1995</td> 
  <td>18º</td> 
  <td>700m</td> 
  <td>800</td> 
  <td> 
   <table> 
    <tr> 
     <th>Labordeta</th> 
     <td>4/5</td> 
    </tr> 
    <tr> 
     <th>M.Prats</th> 
     <td>2/5</td> 
    </tr>  
   </table>  
  </td> 
 </tr> 
</table> 
 

Código CSS:

 
table {border-collapse: collapse;} 
caption { caption-side: bottom; } 
th {background-color: #c5c5c5;color: black;} 
td, th {border: 1px solid black;padding: 5px;} 
table table th {background-color: #orange;} 

Resultado:

Listas

Con el atributo list-style-type podemos cambiar la representación (una rayita, un circulo ...) que simboliza cada elemento de nuestras listas. Podemos utilizar las siguientes palabras clave:

• disc
• circle
• square
• none

Podemos usar incluso una imagen propia para adornar cada elemento de nuestras listas. Imagine por ejemplo una lista de documentos PDF. Podemos colocar un pequeño icono PDF al comienzo de cada elemento usando la propiedad CSS list-style-image.

li.pdf { list-style-image: url(images/icon_pdf_big.gif; }

Resumen

• Las tablas HTML se usan para estructurar información tabular.
• Use los elementos de tabla HTML: <table>, <tr>, <th> y <td>, juntos para crear una tabla.
• El elemento <table> define y rodea la tabla completa.
• Cada fila contiene una o más celdas de datos definidas con <td>.
• Use el elemento <th> para las celdas de dato que esten en filas o columnas cabeceras.
• Las tablas se trazan en una parrilla. Cada fila corresponde a un <tr>...</tr> en tu HTML, y cada columna corresponde al contenido <td>...</td> en las filas.
• Puede facilitar información adicional sobre sus tablas con el atributo summary y el element <caption>
• Las celdas de las tablas tiene interlineado, espacio entre bordes, que es el espacio entre celdas.
• Del mismo modo que puedes controlar el interlineado, bordes y márgenes de otros elementos, puedes controlar el interlineado, borde y espacio entre bordes de las celdas de una tabla en CSS
• La propiedad border-collapse es una propiedad especial para tablas de CSS que permite combinar los bordes de celda en un borde simple para un aspecto más simple
• Puede cambiar la justificación de los datos en las celdas de sus tablas con las propiedades de CSS text-align y vertical-align
• Puedes añadir color a tus tablas con la propiedad background-color. El color de fondo puede ser añadido a la tabla completa, a una sola fila o a una simple celda
• Si no tiene datos para una celda, no ponga contenido en el elemento <td>. Sin embargo, necesita usar el elemento <td>...</td> para mantener la justificación de la tabla
• Si necesita que una celda ocupe varias filas o columnas, puede usar los atributos rowspan o colspan del elemento <td>
• Puedes anidar tablas dentro de tablas posicionando el elemento tabla y todo su contenido dentro de una celda.
• Las tablas se deben usar para información tabular, no para diseñar sus páginas. Use CSS para lograr posicionamientos con múltiples columnas.
• list-style-type permite cambiar el tipo del marcador que usamos en las listas.
• list-style-image permite especificar una imagen como un marcador de lista.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Tables

Curso de Diseño Web IX - El modelo de Caja

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML, como añadir estilo con CSS y tipografía, tamaño de letra y colores en CSS. En esta entrada hablamos del modelo de caja en CSS.

En la siguiente imagen se muestra el llamado modelo de caja en HTML. Por cada elemento de HTML hay tres características optativas margen, interlineado y borde. Controlamos la visualización de estas características por medio de las propiedades de CSS margin, padding y border. El texto es lo que llamaríamos área de contenido.

Color del border

Use la propiedad border-color para especificar el color del borde. Puedes usar cualquiera de los métodos comunes para definir color. Las siguientes tres lineas de código son equivalentes:

border-color: red;
border-color: rgb(100%,0%,0%);
border-color: #ff0000;

Tipo del borde

Puedes cambiar el tipo del borde con la propiedad border-style. Puedes usar los siguientes valores:

• solid
• double
• groove
• outset
• dotted
• dashed
• inset
• ridge

Ancho del borde

Puedes cambiar el ancho del borde con la propiedad border-width. Puedes fijar el ancho en píxeles o usar las siguientes palabras clave.

• thin
• medium
• thick

Especificamos margenes, interlineados o bordes sólo para un lado:

Podemos fijar determinadas características sólo para un lado. Si queremos fijar únicamente el color, estilo y anchura del borde superior podemos usar:

border-top-color
border-top-style
border-top-width

Si queremos fijar un margen derecho de 50px usaríamos:

margin-right: 50px;

Si queremos fijar un interlineado izquierdo y derecho de 20px, mientras que el superior e inferior permanecen a 0px escribiríamos:

padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;

Las siguientes lineas son equivalente pero usan notación compacta. La notación compacta da cuatro valores que siguen el movimiento de las agujas del reloj (arriba, derecha, abajo, izquierda). Si tanto los valores de arriba y abajo como los de izquierda y derecha son iguales, podemos usar una notación aún más compacta como se muestra abajo.

padding: 0px 20px 0px 20px;
padding: 0px 20px;

Imágenes de fondo

Para lograr unos diseños más impactantes se usan a menudo imágenes de fondo. La propiedad background-image nos permite referenciar la imagen que vamos a usar como fondo. La propiedad background-repeat nos permite indicar si la imagen se va a repetir. Podemos, por ejemplo, repetir un patrón y lograr un efecto muy vistoso. La propiedad background-position nos indica donde posicionar nuestra imagen de fondo (por ejemplo, coloca la imagen arriba a la izquierda). Las siguientes lineas de código muestran como usar estas propiedades.

background-image: url(imagenes/background.gif);
background-repeat: no-repeat;
background-position: top left;

Atributo Class

A menudo necesitamos aplicar a un estilo a varios elementos. Imaginemos que tenemos un listado de nombres de alumnos y direcciones de email. Si queremos que el nombre de los alumnos aparezca en negrita podemos marcar todos los nombres de alumnos como pertenecientes a la clase "nombreDeAlumno" y aplicar un estilo a esta clase. En la vida real podemos asemejar clases con la pertenencia a clubs. Podemos pertenencer a varios (club de montaña, club de cocina) o a ninguno. En HTML usamos el atributo class para designar la pertinencia de un elemento a una clase. Los siguiente puntos describen el uso de este atributo.

• Use el atributo class para añadir elementos a una clase.
• Use en CSS un . entre el nombre del elemento y la clase para especificar el elemento de la clase.
• Use en CSS .nombreDeLaClase para seleccionar todos los elementos que pertenecen a la clase.
• Cualquier elemento puede pertenecer a más de una clase. Para ello colocamos el nombre de las clases separado por espacios en el atributo class.

Atributo ID

Similar al atributo class, se puede usar el atributo ID en todos los elementos HTML. La diferencia es que cada elemento puede tener sólo un id y este deber ser único para la página; sólo puedes tener un elemento en tu página con id "pieDePagina". El atributo id debe empezar con una letra y ser seguido sólo por letras y dígitos. No se permiten espacios o caracteres especiales.

<p id="pieDePagina">Gracias por su visita</p>

Class y ID en CSS

Los siguiente ejemplos muestran el uso de clases y identificadores en CSS.

Selecciona sólo párrafos que pertenecen a la clase oferta

p.ofertas { color: red;}

Selecciona todos los elementos que pertenecen a la clase oferta

.ofertas { color: red;}

Esto selecciona todo los elementos que tengan un id pieDePagina

#pieDePagina { color: red; }

Selecciona un elemento <p> si tiene el id pieDePagina

p#pieDePagina { color: red; }

Elemento DIV

<div> es un elemento que sirve para agrupar elementos de bloque. Normalmente un elemento div viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento div en nuestro CSS. El siguiente ejemplo ilustra el uso de un elemento div. Imagina que estamos construyendo una página Web para un bar de nuestra ciudad. En esta se ofrece un listado de los cocteles que el bar ofrece. Cada coctel tiene una cabecera, una imagen y una descripción. Si quisiéramos dar un estilo común a todos nuestro cócteles. Por ejemplo una imagen de fondo o un borde necesitaríamos agruparlos con un div. El siguiente código ilustra esto:

 
<div id="coctelAmarillo" class="coctel"> 
   <p> 
      <img src="images/yellow.gif" alt="Bebida brisa de limón" /> 
    </p> 
    <h3>Brisa de Limón</h3> 
    <p> 
      Nuestro coctel más sano, combina hierbas, minerales, vitaminas y un toque de limón. Crea 
   un concentrado de limón que nos ayudará a mantener altas las defensas. 
    </p> 
</div> 

Elemento SPAN

<span> es un elemento que sirve para agrupar elementos en linea y texto. Normalmente un elemento span viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento span en nuestro CSS. El siguiente ejemplo, ilustra el uso del elemento span. Imaginemos una lista de artistas y álbumes. Si queremos que el nombre del artista aparezca en negrita y el nombre del álbum en cursiva. Podemos rodear los nombres de artista y álbumes con span y usar clases para referenciar el estilo como se muestra en el siguiente código.

 
<ul> 
 <li><span class="cd">La Carretera</span>, <span class="artist">Julio Iglesias</span></li> 
    <li><span class="cd">Elvis' Christmas album</span>, <span class="artist">Elvis Presley</span></li> 
</ul> 

.artista { font-weight: bold;}
.cd { font-style: italic;}

CSS para diferentes medios

 

Podemos especificar diferentes hojas de estilos dependiendo del medio (teléfono móvil, impresora, pantalla) desde el cual se acceda a nuestra página . El atributo media te permite especificar para que tipo de dispositivo se usará la hoja de estilos referenciada. Si no proporcionamos un atributo media, el estilo se usará para todos los dispositivos.

<link type="text/css" rel="stylesheet" href="pantalla.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="impresora.css" media="print"/>
<link type="text/css" rel="stylesheet" href="movil.css" media="handheld"/>
<link type="text/css" rel="stylesheet" href="estilo.css"/>

Resumen

• CSS usa un modelo de caja para controlar como se muestran sus elementos.
• Las cajas consisten en una área de contenido y un interlineado, borde y margen opcionales.
• El área de contenido contiene el contenido del elemento
• El interlineado se usa para crear espacio visual alrededor del área del contenido.
• Los márgenes que rodean el borde, interlineado y contenido añaden espacio entre este elemento y otros elementos.
• Interlineado, borde y margen son opcionales.
• El fondo de un elemento se mostrará en el área de contenido y el interlineado, pero no en el margen.
• El interlineado y el margen pueden ser declarados en píxeles o porcentajes.
• El ancho de borde puede ser declarado en píxeles o usando las palabras clave thin, medium o thick.
• Hay ocho estilos diferentes para bordes incluyendo solid, dashed, dotted y ridge.
• Cuando fijamos márgenes, interlineados o un borde CSS nos proporciona las herramientas para que fijemos todos los lados (arriba, derecha, abajo o izquierda) a la vez o cada uno de ellos individualmente.
• Usar la propiedad line-height para añadir espacio entre lineas de texto.
• Puede posicionar una imagen como fondo de un elemento con la propiedad background-image
• Use el atributo class para elementos a los que quiera dar estilo juntos, como un grupo.
• Use el atributo id para dar a un elemento un nombre único. Puede usar también el atributo id para dar un estilo único a un elemento.
• Puede seleccionar elementos por su id usando el selector de identificadores #. Ejemplo: #cocteles
• Un elemento puede tener sólo un identificador; sin embargo, puede pertenecer a varias clases.
• Los elementos <div> se usan para agrupar elementos relacionados en secciones lógicas
• Crear secciones lógicas, puede ayudar a identificar las áreas principales de contenido, la cabecera y el pie de tus páginas.
• Puedes usar elementos div para agrupar elementos juntos que necesitan un estilo en común.
• Usar elementos <div> anidados puede añadir más estructura que sirva para aplicar estilo con mayor claridad. Aunque no se debe añadir estructura a no ser que se necesite realmente.
• Una vez que has agrupado juntas secciones de contenido con elementos <div>, puedes aplicar estilo a los <div> del mismo modo que hacías con cualquier otro bloque. Por ejemplo puedes añadir un borde alrededor de un grupo de elementos usando la propiedad borde al <div> que los anida.
• La propiedad width fija el ancho del área de contenido de un elemento.
• El ancho total de un elemento es el ancho del área de contenido, más el ancho del interlineado, borde y márgenes que añadas.
• Una vez que fijas el ancho de un elemento, ya no se expande para ocupar el ancho entero de la ventana del navegador.
• La propiedad text-align es un propiedad para elementos de bloque que centra todo el contenido en línea que hay dentro elemento de bloque. Es heredado por todos los elementos de bloque que estén anidados.
• Puede usar selector descendentes para seleccionar elementos anidados dentro de otros elementos. Por ejemplo, el selector descendente: div h2 { ...} selecciona todo los elementos <h2> dentro de los elementos <div> (incluyendo hijos, nietos, etc).
• Puede usar abreviaciones con propiedades relacionadas. Por ejemplo: padding-top, padding-right, padding-bottom y padding-left están todos relacionados con el indentado, y puede ser especificado con una abreviación: padding
• Las propiedades padding, margin, border, background y font se pueden fijar con abreviaciones.
• El elemento en linea <span> es similar al elemento <div>. Se usa para agrupar elementos en lineas relacionados y texto.
• Como con <div>, puede añadir elementos <span> a clases ( o dar a los elementos <span> un id) para estilizarlos.
• El elemento <a> es un ejemplo de un elemento con diferentes estados. El estados principales de <a> son unvisited, visited y hover.
• Puede estilizar cada uno de estos estados por separado con pseudo-classes. Las pseudo-classes más usadas a menudo con el elemento <a> son :link para enlaces sin visitar, :visited para enlaces visitados y :hover cuando se pone el ratón encima.
• Otros elementos soportan la pseudo-class :hover y algunos navegadores también soportan :first-child, y :focus para otros elementos.
• Puede usar más de una hoja de estilos en su HTML
• Si tiene varias hojas de estilo que crean conflicto, la última en el archivo HTML gana.
• Puede crear estilos para otros dispositivos como dispositivos como impresoras (print) o teléfonos móviles (handset) usando el atributo media del elemento link

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Box Model, Curso Diseño Web, Web Design