PONER PUNTO, PROBAR Y SUBSANAR. POSICIONAMIENTO...

1

DISEÑO Y DIRECCIÓN DE SITIOS WEB

© Faustino Hermoso Ruiz

PONER PUNTO, PROBAR Y SUBSANAR.

POSICIONAMIENTO WEB

•Antes de publicar el sitio en la Web, debemos evaluar el trabajo realizado hasta

ahora y verificar si las páginas están realmente listas para su publicación.

Debemos revisar las páginas con la atención puesta en los puntos siguientes:

¿Hemos puesto un título a todas las páginas?

¿Hemos dado un título diferenciado a todas las páginas?: En un sitio Web

basado en plantillas, es fácil asignar un título de página genérico al documento de

plantilla pero, con la misma facilidad, puodemos olvidar cambiar o modificar ese

título en cada página que hayamos producido a partir de ella. Nos aseguramos de

que los títulos de todas las páginas describen con precisión el contenido propio de

cada una.

2



PONER PUNTO, PROBAR Y SUBSANAR


¿Hemos practicado una revisión ortográfica?: Dreamweaver tiene

incorporado un programa de revisión ortográfica. COMANDOS>ORTOGRAFÍA

¿Hemos proporcionado un texto alternativo a todas las imágenes que

suministran información?: El texto alternativo es el mejor medio para que las

imágenes sean útiles a aquellos que no pueden verlas y para mejorar la

clasificación de las páginas en los motores de búsqueda, al facilitar que se

cataloguen debidamente. Podemos omitir el texto alternativo en imágenes

puramente decorativas, como la asignada a la base de la barra de navegación pero

cualquier imagen que aporte algo al contenido de nuestro sitio Web, necesita una

descripción textual.

3





¿Hemos asignado un número de orden de tabulación a todos los elementos

selec cionables de las páginas? Los elementos seleccionables incluyen todos los

objetos interactivos de la página: vínculos, botones de navegación, imágenes

vinculadas, regiones de mapa de imagen, campos de formulario y películas Flash.

Les debemos asignar valores lógicos de índice de tabulación, especialmente si

hemos construido el diseño con tablas. Una buena manera de verificar lo que

hemos hecho, es visualizar una página en un navegador y seleccionar elementos

con el tabulador. Si no siguen un orden aceptable, necesitaremos modificar sus

índices de tabulación:

4





¿Hemos eliminado las reglas de estilo no utilizadas? En realidad no importa

demasiado si conservamos las reglas de estilo obsoletas en un archivo CSS

externo, a menos que tengamos tal cantidad que pueda aminorar la velocidad de

descarga. PANEL Estilos CSS, seleccionamos los estilos no utilizados y hacemos

clic en el icono de ppelera ubicado en la parte inferior del panel.

5





¿Tenemos ubicados en la carpeta raíz local todos los scripts, imágenes,

películas y hojas de estilos? Es crucial que estén ahí. De no ser así (o de estar en

ella, pero haber colocado elementos en nuestras páginas desde otra ubicación), no

aparecerían en las páginas una vez publicadas. La función Buscar y reemplazar de

Dreamweaver, nos puede ayudar. Edición>Buscar y reemplazar y ajustamos la

búsqueda para que los resultados se refieran al Código fuente del Sitio local actual

completo, especificando como objeto de la búsqueda file://. Su ausencia del código

fuente significa que todos los archivos se encuentran en una carpeta del sitio local.

6





¿Hemos quitado los valores de altura de las celdas en las tablas de su diseño?:

Esto es opcional y sólo puede tener importancia para aquellos que no gusten tener

trozos de HTML flotando por cualquier lugar en sus páginas. El navegador

determina los valores adecuados basándose en el contenido alojado en ellas y

cuando el sitio Web está acabado, los valores de las alturas que especificamos al

principio ya no importan tanto. Dejarlos donde están tampoco molesta así que

quizás para los de nivel muy básico sea mejor dejarlo como está.

Para los que quieran MODIFICAR>TABLA>BORRAR ALTO DE CELDA

7




Los anchos de celda no se borran. Estos son muy importantes para

mantener la estructura del diseño, de modo que tenga cuidado de no escoger

Modificar> Tabla>Borrar ancho de celda, por error.

• Añadir metadatos:

Reciben ese nombre algunos elementos invisibles (recogidos por las etiquetas

<meta> en la parte Head de la página, que proporcionan información de alto nivel

acerca del contenido, a la atención de los motores de búsqueda. Un buen conjunto

de metadatos puede mejorar el orden de colocación de nuestras páginas en los

resultados de búsqueda, de manera que nunca es mala idea añadir algunos a

nuestro sitio Web.

8




•Añadir metadatos:

Hay cuatro tipos de metadatos interesantes . Los tres primeros (palabras clave y

etiquetas descriptivas y otros meta) son los que atañen a los motores de

búsqueda. El cuarto tipo (etiqueta de actualización) no tiene que ver con los

motores de búsqueda, pero es excelente para actualizar o redirigir una página.

Añadir palabras clave

Se entiende por tales los temas de encabezado de una página Web. Imaginamos

que somos el visitante a nuestra página, abrimos la página de Google u otro motor

de búsqueda en el navegador y escribimos una palabra o una frase corta en el

campo de búsqueda. ¿Qué palabras o frase pondríamos para que nuestra página

apareciese en los resultados? Esencial mente, esas son las palabras clave que

debemos incorporar a su página.

.

9






. La cantidad no es el factor más importante para determinar la calidad de un

buen con junto de palabras clave. Cada motor de búsqueda es distinto, por

supuesto, y los propietarios de cada uno de ellos guardan los secretos de sus

algoritmos de indización , clasificación y orden de recuperación.

Pero, por regla general, funcionan más o menos así: el motor de búsqueda realiza

un análisis y compara los metadatos con el texto de la página. Si la comparación es

positiva y los metadatos están relacionados con el contenido, nuestras páginas

subirán de nivel en la base de datos del motor, pero también pueden descender en

la clasificación en caso de no coincidir metadatos y contenido.

10






Como tenemos un sitio Web basado en una plantilla, una buena estrategia de

palabras clave podría ser:

1. • En el documento de plantilla, añadimos palabras clave aplicables a todas las

páginas del sitio.

2. • Implementamos en cada página del sitio las palabras clave generadas por la

plantilla con otras específicas correspondientes a esa página en concreto.

INSERTAR>HTML>ETIQUETAS HEAD>PALABRAS CLAVE

En el campo Palabras clave, escribimos la lista de palabras clave generales,

separándola, con comas y luego hacemos clic en Aceptar. ARCHIVO>GUARDAR

11




•Añadir metadatos

•Añadir descripciones:

Una descripción es un resumen corto, de no más de un párrafo, del contenido de

la página. Algunos motores de búsqueda la utilizan para exhibir ese texto

juntamente con el vínculo a nuestra página en la lista de resultados.

Como todas las páginas de un sitio Web son distintas, lo mejor es escribir una

descripción específica para cada página del sitio. La brevedad es capital: no

utilicéis más de tres frases cortas.

INSERTAR>HTML>ETIQUETAS HEAD>DESCRIPCIÓN

. .

12




•Añadir metadatos

• Actualizar la página o redirigir el navegador

La etiqueta de metadatos actualizar provoca que el navegador recargue la página

actual para saltar a otra página, después de transcurridos unos segundos

predeterminados.

INSERTAR>HTML>ETIQUETAS HEAD>ACTUALIZAR

•Obtener informes

Dreamweaver nos proporciona varias maneras de verificar la consistencia e

integridad de las páginas, antes de publicarlas. Podemos ver dónde pueden fallar

algunos navegadores, limpiar código para que se ajuste a estándares

internacionales, encontrar y reparar vínculos rotos, así como localizar archivos

sueltos y usarlos o suprimirlos.

13




•Obtener informes

•Verificar la reacción de los navegadores

Distintos navegadores interpretan el mismo código Web de modos diferentes.

Muchas veces, esas diferencias son ligeras y apenas molestas, pero otras veces

pueden causar problemas. La verificación de navegadores comprueba esas

peculiaridades, referentes muy en concreto a las páginas de nuestro sitio,

escaneándolas y mar cando los tramos de código que no son aceptados por un

navegador concreto.

En el menú Comprobar página tenemos todos los comandos para hacerlo. Hay

uno de configuración que nos muestra para que navegadores lo hace dreamweaver

14




15




•Obtener informes


Son rarísimas las páginas Web que puedan salir airosas de la inspección de todos

los navegadores designados y, normalmente, se trata de páginas con muy escaso

contenido. Para la mayoría de ellas, cuantos más navegadores se prueben, más

probabilidades de encontrarse con que arreglar un error de código para un

navegador, produzca un error con respecto a otro navegador. Por lo tanto,

limitemos los navegadores de destino a sólo los más utilizados por los usuarios.

Para seleccionar navegadores de destino, abrimos cualquier página del sitio,

hacemos clic en el botón Comprobación de navegador en la parte superior de la

ventana de documento y seleccionamos Configuración en el menú emergente

16




•Obtener informes


Seleccionamos los nombres y versiones de los navegadores que queramos

utilizar y hacemos clic en Aceptar.

Por defecto, Dreamweaver realiza la comprobación de navegadores cada vez

que se abre una ventana de documento. Para ver los resultados, hacemos clic en el

botón Comprobación de página y escoja Mostrar todos los errores, en el menú

emergente. Dreamweaver abrirá el panel Resultados ubicado en la parte inferior

del espacio de trabajo. Localizamos los signos de advertencia rojos que aparecen

en la lista y anotamos los nombres y versiones de los navegadores que tendrán

problemas, de acuerdo con la predicción de Drearnweaver.

17




•Obtener informes


la mayoría de las ocasiones presentan errores que realmente no tienen

importancia pues los navegadores los ignoran.

Por ejemplo: ¿que ocurriría si obtuviesemos un mensaje de advertencia como este?

“The tag name: “embed" Not found in currently active versions. [XHTM 1.0

transitional]”

(El nombre de la etiqueta: "incrustar" no se encuentra en las versiones activas

actuales. [XHTML 1.0 de transición]).

Horrorizados, comprobamos que esa etiqueta marca una película Flash o cualquier

otro elemento multimedia de nuestra página. ¿Tenemos que descartar la película?

No necesariamente.

18




•Obtener informes


Comprobamos si la página funciona correctamente en el navegador de destino y,

si lo hace, no tenemos por qué preocuparnos.

•Validación

Validar la página web es compararla con los estándares oficiales.

Una página Web que cumpla con los estándares Web, no se verá necesariamente

igual en todos los navegadores. Incluso puede que no funcione correctamente en

algunos, especialmente si contienen hojas de estilo en cascada (CSS). Infinidad de

definiciones de estilo oficiales están en espera de ser admitidas por algún

dispositivo de exploración Web.

19




•Validación

De igual forma, una página Web que suspenda miserablemente la prueba de

comparación con los estándares, puede tener un aspecto espectacular, mantener un

nivel razonable de accesibilidad y funcionar respetablemente bien en todos los

navegadores de primera línea. Si hay que escoger entre aprobar la

comprobación de navegadores y la validación, sin duda alguna debemos

escoger la primera.

Eso no quiere decir que el cumplimiento de las normas estándar no sea

importante. LaWeb necesita estándares. El código que los cumple es menos

dependiente de las particularidades de navegadores y, por consiguiente, menos

propenso a cambios cuando Microsoft edita una versión nueva de h Explorer.

20




•Validación

El código sancionado oficialmente también tiende a funcionar mejor en una gran

variedad de dispositivos (muchos de los cuales no se han inventado todavía). Pero

dado que vivimos en el presente, no en el futuro, y la mayor parte de la

exploración Web realizada en el planeta se hace con “Iexplorer” de Microsoft,

Windows, nuestro sitio Web tiene muchas más posibilidades de atraer un mayor

porcentaje de audiencia en línea, si diseñamos el sitio Web simplemente para ese

navegador.

No os sugiero que vayáis tan lejos sin que intentéis validar el sitio, pero no

cedáis en cuanto a diseño Web .

Para validar la composición del sitio ver la siguiente captura de pantalla

21



22




•Localizar y reparar vínculos rotos

Se entiende por vínculos rotos aquellos que no pueden localizar sus páginas de

destino. O las páginas no existen o no están ubicadas en el lugar al que el vínculo

está dirigido. Dreamweaver es capaz de detectar vínculos rotos internos pero no

los externos (si no tenemos conexión a internet, sobre todo). Os sugiero que

comprobéis los vínculos externos periódicamente y verifiquéis si las páginas y

sitios de destino continúan siendo los mismos.

23



24



25




•Localizar y reparar vínculos rotos

Si el mismo vínculo roto se repite a menudo, lo podemos cambiar de una sola

vez, sean cuales sean las páginas del sitio en que se encuentre.

En la barra de menús, escogemos Sitio>Cambiar vínculo en todo el sitio, para

abrir el cuadro de diálogo del mismo nombre, En el campo Cambiar todos los

vínculos a, escribimos el vínculo tal y como aparece en el panel Resultados, con la

barra inclinada al principio. Luego hacemos clic en el icono de carpeta adyacente

al campo Por vínculos a y navegamos hasta la página a la debe ir dirigido el

vínculo. Hacemos clic en Aceptar para realizar el cambio.

26




•Localizar archivos huérfanos

El nombre está referido a archivos residentes en nuestra carpeta raíz que no

aparecen en ninguna página de nuestro sitio. Podemos moverlos a una carpeta

exterior al sitio, pero no los borraremos a menos que estemos absolutamente

seguro de no necesitarlos en un futuro. Recuerdad que vuestros datos son valiosos

y el almacenamiento es barato.

Para localizar archivos huérfanos, hacemos clic en la pestaña Verificador de

vínculos del panel Resultados y seleccione Archivos huérfanos en el menú

emergente. No tireís los archivos huérfanos, guardadlos en otro sitio de vuestro

ordenador, fuera del sitio web.

27



28



Qué es el posicionamiento Web

Posicionar:

Colocar una cosa en un lugar óptimo

Posicionamiento web:

Lo esencial: Aparecer en la primera página de resultados de los

motores de búsqueda

Adicionalmente: Aparecer en directorios y portales

El contexto de los motores de búsqueda

•Hasta un 70 por ciento del tráfico de un sitio web puede proceder de los motores

•El 90 por ciento de los usuarios se detiene en la tercera página de resultados de

los motores de búsqueda

29



Cuáles son los motores y directorios “que

importan”

• Motores de búsqueda:

– Google

– Yahoo

– Windows Live

– AskJeeves

• Directorios:

– Yahoo

– Dmoz

30



El error de cálculo

• La idea intuitiva: “Ser el tercero o el cuarto no es tan diferente de ser el segundo o el primero”

• La realidad:

– Solamente el 20 por ciento de los usuarios llega a la segunda página

– Solamente el 10 por ciento a la tercera página

– Menos del 3 por ciento a la cuarta página …

31



Factores que benefician el

posicionamiento• Principales factores internos:

– Contenido textual

– Actualizaciones

– URL

– Texto de los enlaces de navegación

– Metadatos (title, alt, meta)

• Principales factores externos:

– Número de enlaces de entrada “de buena reputación”

– Texto de los enlaces de entrada

– Profundidad de indización en los motores

– Presencia en directorios y portales

32



Factores que perjudican el

posicionamiento• Factores internos:

– Diseño de la página (p.e. frames)

– Uso inadecuado de gráficos y animaciones

– Contenido no enfocado en el tema del sitio

– Enlaces de salida “endogámicos”

• Factores externos:

– Ausencia de enlaces de entrada

– Enlaces de entrada endogámicos y/o de “mala reputación”

33



El problema esencial

• Inadecuada comprensión de cómo “piensan”

los motores de búsqueda:

– En términos de código fuente y no de la

interpretación final del navegador

– En términos de la palabras clave del contenido

– En términos de reputación: enlaces procedentes

de páginas que, a su vez, son muy enlazadas

34



Elementos clave de una campaña de

posicionamiento

• Cambios en el contenido: páginas de contenido orientado a los

temas del sitio

• Cambios en el código fuente: eliminación de barreras técnicas

• “Aprovisionamiento” de enlaces: portales y guías temáticas

• Altas: en motores de búsqueda y directorios

• Planificación: futuros contenidos y actualizaciones

35



Instrumentos de medida de coste cero

• PageRank

toolbar.google.com

• TrafficRank

toolbar.alexa.com

• Profundidad de indización

Comando site

• Número de enlaces de entrada

Comando link

• Presencia en Yahoo

es.dir.yahoo.com

• Presencia en Dmoz

www.dmoz.org > España

http://www.dmoz.org/

36



Fuentes de información

• Hipertext.netwww.hipertext.net

• Search Engine Watchwww.searchenginewatch.com

• Axandrawww.axandra.com > Boletín

• Bibliografía técnica actualizada sobre posicionamiento web o posicionamiento en buscadores

• Búsquedas en la Web: “posicionamiento web”, “web positioning”, etc.

http://www.hipertext.net/

http://www.searchenginewatch.com/

http://www.axandra.com/

PONER PUNTO, PROBAR Y SUBSANAR. POSICIONAMIENTO...

Documents

Transcript of PONER PUNTO, PROBAR Y SUBSANAR. POSICIONAMIENTO...