Download Faustino Hermoso Ruiz

DISEÑO Y DIRECCIÓN DE SITIOS WEB
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 1
cada una.
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
Debemos revisar las páginas con la atención puesta en los puntos siguientes:
¿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.
© Faustino Hermoso Ruiz
2
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
Debemos revisar las páginas con la atención puesta en los puntos siguientes:
¿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:
3
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
Debemos revisar las páginas con la atención puesta en los puntos siguientes:
¿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.
4
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
Debemos revisar las páginas con la atención puesta en los puntos siguientes:
¿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.
5
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
Debemos revisar las páginas con la atención puesta en los puntos siguientes:
¿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
6
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
 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
7
nuestro sitio Web.
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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.
© Faustino Hermoso Ruiz
8
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•Añadir metadatos:
Añadir palabras clave
. 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.
© Faustino Hermoso Ruiz
9
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•Añadir metadatos:
Añadir palabras clave
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
10
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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
..
© Faustino Hermoso Ruiz
11
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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.
© Faustino Hermoso Ruiz
12
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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
13
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
14
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•Obtener informes
•Verificar la reacción de los navegadores
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
© Faustino Hermoso Ruiz
15
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•Obtener informes
•Verificar la reacción de los navegadores
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.
© Faustino Hermoso Ruiz
16
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•Obtener informes
•Verificar la reacción de los navegadores
 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?
17
No necesariamente.
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•Obtener informes
•Verificar la reacción de los navegadores
 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.
© Faustino Hermoso Ruiz
18
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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.
© Faustino Hermoso Ruiz
19
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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

© Faustino Hermoso Ruiz
20
DISEÑO Y DIRECCIÓN DE SITIOS WEB
21
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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.
22
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
23
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
24
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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.
25
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
PONER PUNTO, PROBAR Y SUBSANAR
•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.© Faustino Hermoso Ruiz
26
DISEÑO Y DIRECCIÓN DE SITIOS WEB
27
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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
28
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
Cuáles son los motores y directorios “que
importan”
• Motores de búsqueda:
–
–
–
–
Google
Yahoo
Windows Live
AskJeeves
• Directorios:
– Yahoo
– Dmoz
29
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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 …
30
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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
© Faustino
Hermoso Ruiz
31
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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”
32
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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
33
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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
34
© Faustino Hermoso Ruiz
DISEÑO Y DIRECCIÓN DE SITIOS WEB
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
•
© Faustino Hermoso Ruiz
35
DISEÑO Y DIRECCIÓN DE SITIOS WEB
Fuentes de información
• Hipertext.net
www.hipertext.net
• Search Engine Watch
www.searchenginewatch.com
• Axandra
www.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.
36
© Faustino Hermoso Ruiz