2009 09 21 Optimizacioncodigofuente V1
Upcoming SlideShare
Loading in...5
×
 

2009 09 21 Optimizacioncodigofuente V1

on

  • 2,048 views

 

Statistics

Views

Total Views
2,048
Views on SlideShare
2,047
Embed Views
1

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

2009 09 21 Optimizacioncodigofuente V1 2009 09 21 Optimizacioncodigofuente V1 Presentation Transcript

  • 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=&quot;vevent&quot;> <a class=&quot;url&quot; href=&quot;http://www.web2con.com/&quot;> http://www.web2con.com/ </a> <span class=&quot;summary&quot;> Web 2.0 Conference </span>: <abbr class=&quot;dtstart&quot; title=&quot;2007-10-05&quot;> October 5 </abbr> - <abbr class=&quot;dtend&quot; title=&quot;2007-10-20&quot;> 19 </abbr>, at the <span class=&quot;location&quot;> 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=&quot;hcard-Rafael-Pedraza&quot; class=&quot;vcard&quot;>
    • <span class=&quot;fn&quot;> Rafael Pedraza </span>
    • <div class=&quot;org&quot;> Universitat Pompeu Fabra </div>
    • <a class=&quot;email&quot; href=&quot;mailto:rafael.pedraza@upf.edu&quot;> [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 &quot;buscar&quot; del menú &quot;Edición&quot; 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/