2009 09 21 Optimizacioncodigofuente V1

Jornada “Marketing en buscadores en el mundo digital” Rafael Pedraza Jiménez Departament de Comunicació Universitat Pompeu Fabra [email_address] Taller “Search Engine Optimization” Optimización del código fuente

Factores de posicionamiento (I)‏
Internos :
URL: dirección del sitio (p.e. www. museo .com).
Contenido :
Texto.
Multimedia, pero solo metadatos.
Navegación: texto de los enlaces.
Código fuente: código estándar y de calidad .
Actualización.
Reputación:
Antigüedad URL, evolución de los enlaces de entrada.

Factores de posicionamiento (II)‏
Externos :
Número de enlaces de entrada.
Reputación de los enlaces.
Texto de los enlaces.

Dimensiones en la calidad del código fuente
Código libre de errores: documentos bien formados
Separación de contenido y presentación: documentos compatibles y fácilmente transformables
Buenas prácticas: documentos con marcado semántico

Código libre de errores
Casuística:
Elementos no cerrados
Elementos mal anidados
Ausencia de elementos obligatorios
Uso de elementos depreciados
Chequeo:
Editores de páginas web
Validadores en línea

Ejemplo de los errores más comunes:
<!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=” http://www.w3.org/1999/xhtml ” lang=” es ” xml:lang=” es ”>
<head>
<meta name=“ author ” content=“ Pepito Grillo ”>
</head>
<body>
<center><h1> No mientas Pinocho </center></h1>
</body>
</html>
Código libre de errores (II)‏

Elementos depreciados
applet
basefont
center
dir
font
isindex
menu
s
strike
u
Alternativas: usar elementos XHTML o CSS http :// www.codehelp.co.uk / html / deprecated.html

Atributos depreciados
align
alink
background
bgcolor
clear
compact
color
border
hspace
Link
name
Alternativas: CSS for deprecated attributes http :// www.punkchip.com /2007/02/ css - deprecated - attributes -1/
noshade
nowrap
size
start
text
type
value
vlink
width
vspace

Separación de contenido y presentación
Problemas típicos:
Uso de tablas para estructurar la presentación (layout)‏
Uso de elementos semánticos para dar formato (<blockquote>).
Estándar recomendado:
XHTML: contenido
CSS: presentación
Chequeo:
Editores
Validadores en línea

Buenas prácticas
Codificación semántica:
Uso de metadatos. Ejemplos:
Elementos: title , meta , DC , …
Atributos: id , alt , cite , class , name , rel , rev, summary , …
Metadatos vinculados: RDF
Marcado semántico. Ejemplos:
abbr , address , acronym , blockquote , …
h1 , h2 , ...
Chequeo:
Análisis automático
Análisis “manual”

Palabras clave, metadatos y código fuente
Título de la página <title>
Metadatos <meta name=“” content=“” />
Encabezamientos <h1> , <h2> …
*Texto de los enlaces <a href=“” title=“”> Texto </a>
Atributos de texto alternativo/descriptivo title , alt , summary
Resaltado del texto más significativo <strong> , <em>

Elementos semánticos
abbr
*acronym
address
blockquote
caption
cite
code
dd
dfn
dl
dt
h n
label
legend
link
meta
option
q
select
thead
tfoot
title

Elementos semánticos - II
El <abbr> W3C </abbr> define la <dfn> accesibilidad web </dfn> como <blockquote> ”el conjunto de técnicas que permiten a las personas con discapacidades utilizar la web” </blockquote> .
Otros términos relacionados con la accesibilidad web son:
<dl>
<di><dt> Usabilidad web: </dt> <dd> es la disciplina… </dd></di>
<di><dt> Arquitectura de la información: </dt> <dd> es la ciencia… </dd></di>
</dl>
Puede encontrar más información sobre la accesibilidad web en la <cite cite=“http://www.w3.org/WAI/”> Iniciativa para la accesibilidad Web </cite> .

Atributos semánticos
alt
cite
class
hreflang
id
label
lang
longdesc
rel
rev
summary
title

<img src=“ catedralNotreDame.jpg ” alt=“Vista aérea de la Catedral de Notre Dame de París” />
<a href=“http://www.notredamedeparis.fr/” title=“Sitio web oficial de la Catedral de Notre Dame” > Catedral de Notre Dame </a>
Atributos semánticos - II

Microformatos
hCalendar
hCard
rel-license
rel-nofollow
rel-tag
VoteLinks
XFN
XMDP
Lista de microformatos: http://microformats.org/wiki/Main_Page

Microformatos - II
<div class="vevent"> <a class="url" href="http://www.web2con.com/"> http://www.web2con.com/ </a> <span class="summary"> Web 2.0 Conference </span>: <abbr class="dtstart" title="2007-10-05"> October 5 </abbr> - <abbr class="dtend" title="2007-10-20"> 19 </abbr>, at the <span class="location"> Argent Hotel, San Francisco, CA </span> </div>
http :// www.web2con . com / Web 2.0 Conference: October 5- 19, at the Argent Hotel, San Francisco, CA
--
<div id="hcard-Rafael-Pedraza" class="vcard">
<span class="fn"> Rafael Pedraza </span>
<div class="org"> Universitat Pompeu Fabra </div>
<a class="email" href="mailto:rafael.pedraza@upf.edu"> [email_address] </a>
</div>
Rafael Pedraza
Universitat Pompeu Fabra
[email_address]

Prácticas desaconsejadas
Las técnicas de posicionamiento fraudulentas (black hat SEO) sólo funcionan a corto plazo y son penalizadas . Aún así, estas prácticas son habituales. En relación al código fuente es necesario tener cuidado con:
Spamming keywords
Texto oculto

Conclusiones - I
La calidad del código fuente se consigue mediante el respeto de los estándares . Esto implica:
La creación de páginas se aleja de los usuarios: Deben ser conscientes de aspectos técnicos que antes podían obviar.
Obliga a actualizar el software
Conversión retrospectiva:
Dificultades técnicas
Altos costes en tiempo o en dinero (o ambos)‏
Imperativo para nuevos sitios nuevos: asegura la inversión, facilita el mantenimiento, etc.
Recomendable para sitios anteriores.

Conclusiones - II
Ventajas generales:
Contenido compatible con:
Diferentes agentes de usuario
Futuros agentes de usuario
Futuras formas de procesamiento y explotación
Extraordinaria facilidad de mantenimiento
Optimización SEO
Accesibilidad
Para el profesional:
Plus de competitividad diferencial

Conclusiones - III
Requerimientos:
Familiaridad con los estándares web:
Lenguajes de marcado (XML, XHTML)‏
Formatos de presentación (XSL, CSS)‏
Metadatos
Validación
Uso de tecnologías adecuadas:
Producen código fuente sin errores
Analizan el código fuente
Separan contenido de presentación
Políticas de control de calidad:
Libros de estilo
Auditorias y evaluación

Fuentes: Selección básica
John Allsopp . Microformats: Empowering your markup for Web 2.0. Berkeley: Friendsof, 2007
Rachel Andrew & Dan Shafer. HTML Utopia: Designing without tables using CSS. Collingwood: Sitepoint, 2006
Andy Budd. CSS Mastery: Advanced Web Standarsd Solutions . Berkeley: Friendsof, 2006
Nigel Chapman; Jenny Chapman . Web Design: A complete introduction. Chichester: Wiley, 2006
Paul Haine. HTML Mastery: Semantics, Standars, and Styling. Berkeley: Friendsof, 2006.
Rob Huddleston . XML . Hoboken: Wiley, 2007
Shirley Kaiswer. Deliver First Class Web Sites: 101 Essential checklists . Collingwood: Sitepoint, 2006
Abdrew Kirkpatrick . Web Accessibility: Web Standards and Regulatory Compliance . Berkeley: Friendsof, 2006
Jesús Tramullas (coord.). Tendencias en documentación digital . Gijón: Trea, 2006
Ed Tittel et al. Mastering XHTML. San Francisco: Sybex, 2002.
Christopher Walton . Agency and the Semantic Web . New York: Oxford, 2007
Jeffrey Zeldman . Designing with web standards (second edition). Berkeley: New Riders, 2007

Sitios web significativos
The Web Standard Project http :// www.webstandards.org /
A List Apart http :// www.alistapart.com /
CSS Zen Garden http :// www.csszengarden.com /
Microformats http :// microformats.org /

Práctica 1
En esta práctica nos familiarizaremos con algunas herramientas para la edición de metadatos.
EDITOR DE METADATOS
DigiDocMeta: extracción automática de metadatos
http://www.observaweb.upf.edu/digidocmeta/digidocmetaeditor.pl?idi=es
EDITORES DE MICROFORMATOS
a. Creación de una tarjeta de presentación - hCard:
http://microformats.org/code/hcard/creator
b. Creación de un evento en un calendario - hCalendar:
http://microformats.org/code/hcalendar/creator
c. Relaciones personales - XFN:
http://gmpg.org/xfn/creator-es

Práctica 2
Práctica 2: Presencia de las palabras clave en nuestro código fuente
Escoja un dominio que le sea familiar
Seleccione una palabra clave de este dominio
Compruebe que la palabra clave aparece en el dominio utilizando un buscador (Yahoo!). Para ello realice la consulta:
site:dominio palabraClave
A continuación visualice el código fuente y utilice la herramienta "buscar" del menú "Edición" para encontrar los lugares en los que aparece nuestra palabra clave
¿Se están siguiendo las recomendaciones y pautas más apropiadas en la codificación de las páginas de su dominio?
Este proceso se puede hacer automáticamente con herramientas como:
http://www.keyworddensity.com/

2009 09 21 Optimizacioncodigofuente V1

by crovira on Sep 22, 2009

Accessibility

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

2009 09 21 Optimizacioncodigofuente V1 — Presentation Transcript