Jornada “Marketing en buscadores en el mundo digital” Rafael Pedraza Jiménez Departament de Comunicació Universitat Pompeu...
Factores de posicionamiento (I)‏ <ul><li>Internos : </li></ul><ul><ul><ul><li>URL: dirección del sitio (p.e. www. museo .c...
Factores de posicionamiento (II)‏ <ul><li>Externos : </li></ul><ul><ul><ul><li>Número de enlaces de entrada.  </li></ul></...
Dimensiones en la calidad del código fuente <ul><li>Código libre de errores:  documentos bien formados </li></ul><ul><li>S...
Código libre de errores <ul><li>Casuística: </li></ul><ul><ul><li>Elementos no cerrados </li></ul></ul><ul><ul><li>Element...
<ul><li>Ejemplo de los errores más comunes: </li></ul><ul><li><!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN” “http://ww...
Elementos depreciados <ul><li>applet </li></ul><ul><li>basefont </li></ul><ul><li>center </li></ul><ul><li>dir </li></ul><...
Atributos depreciados <ul><li>align </li></ul><ul><li>alink </li></ul><ul><li>background </li></ul><ul><li>bgcolor </li></...
Separación de contenido y presentación <ul><li>Problemas típicos: </li></ul><ul><ul><li>Uso de tablas para estructurar la ...
Buenas prácticas <ul><li>Codificación semántica: </li></ul><ul><ul><li>Uso de metadatos. Ejemplos: </li></ul></ul><ul><ul>...
Palabras clave, metadatos y código fuente <ul><li>Título de la página  <title> </li></ul><ul><li>Metadatos  <meta name=“” ...
Elementos semánticos <ul><li>abbr </li></ul><ul><li>*acronym </li></ul><ul><li>address </li></ul><ul><li>blockquote </li><...
Elementos semánticos - II <ul><li>El  <abbr> W3C </abbr>  define la  <dfn> accesibilidad web </dfn>  como  <blockquote> ”e...
Atributos semánticos <ul><li>alt </li></ul><ul><li>cite </li></ul><ul><li>class </li></ul><ul><li>hreflang </li></ul><ul><...
<ul><li><img src=“ catedralNotreDame.jpg ”   alt=“Vista aérea de la Catedral de Notre Dame de París”   /> </li></ul><ul><l...
Microformatos <ul><li>hCalendar </li></ul><ul><li>hCard </li></ul><ul><li>rel-license  </li></ul><ul><li>rel-nofollow  </l...
Microformatos - II <ul><li><div class=&quot;vevent&quot;> <a class=&quot;url&quot; href=&quot;http://www.web2con.com/&quot...
Prácticas desaconsejadas <ul><li>Las  técnicas de posicionamiento fraudulentas  (black hat SEO)  sólo funcionan a corto pl...
Conclusiones - I <ul><li>La calidad del código fuente se consigue mediante el  respeto de los estándares . Esto implica: <...
Conclusiones - II <ul><li>Ventajas generales: </li></ul><ul><ul><li>Contenido compatible con: </li></ul></ul><ul><ul><ul><...
Conclusiones - III <ul><li>Requerimientos: </li></ul><ul><ul><li>Familiaridad con los estándares web: </li></ul></ul><ul><...
Fuentes: Selección básica <ul><li>John Allsopp .  Microformats: Empowering your markup for Web 2.0.  Berkeley: Friendsof, ...
Sitios web significativos <ul><li>The Web Standard Project http :// www.webstandards.org / </li></ul><ul><li>A List Apart ...
Práctica 1 <ul><li>En esta práctica nos familiarizaremos con algunas herramientas para la edición de metadatos. </li></ul>...
Práctica 2 <ul><li>Práctica 2: Presencia de las palabras clave en nuestro código fuente </li></ul><ul><li>Escoja un domini...
Upcoming SlideShare
Loading in …5
×

2009 09 21 Optimizacioncodigofuente V1

1,421 views
1,374 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,421
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2009 09 21 Optimizacioncodigofuente V1

  1. 1. 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
  2. 2. Factores de posicionamiento (I)‏ <ul><li>Internos : </li></ul><ul><ul><ul><li>URL: dirección del sitio (p.e. www. museo .com). </li></ul></ul></ul><ul><ul><ul><li>Contenido : </li></ul></ul></ul><ul><ul><ul><ul><li>Texto. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Multimedia, pero solo metadatos. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Navegación: texto de los enlaces. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Código fuente: código estándar y de calidad . </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Actualización. </li></ul></ul></ul></ul><ul><ul><ul><li>Reputación: </li></ul></ul></ul><ul><ul><ul><ul><li>Antigüedad URL, evolución de los enlaces de entrada. </li></ul></ul></ul></ul>
  3. 3. Factores de posicionamiento (II)‏ <ul><li>Externos : </li></ul><ul><ul><ul><li>Número de enlaces de entrada. </li></ul></ul></ul><ul><ul><ul><li>Reputación de los enlaces. </li></ul></ul></ul><ul><ul><ul><li>Texto de los enlaces. </li></ul></ul></ul>
  4. 4. Dimensiones en la calidad del código fuente <ul><li>Código libre de errores: documentos bien formados </li></ul><ul><li>Separación de contenido y presentación: documentos compatibles y fácilmente transformables </li></ul><ul><li>Buenas prácticas: documentos con marcado semántico </li></ul>
  5. 5. Código libre de errores <ul><li>Casuística: </li></ul><ul><ul><li>Elementos no cerrados </li></ul></ul><ul><ul><li>Elementos mal anidados </li></ul></ul><ul><ul><li>Ausencia de elementos obligatorios </li></ul></ul><ul><ul><li>Uso de elementos depreciados </li></ul></ul><ul><li>Chequeo: </li></ul><ul><ul><li>Editores de páginas web </li></ul></ul><ul><ul><li>Validadores en línea </li></ul></ul>
  6. 6. <ul><li>Ejemplo de los errores más comunes: </li></ul><ul><li><!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> </li></ul><ul><li><html xmlns=” http://www.w3.org/1999/xhtml ” lang=” es ” xml:lang=” es ”> </li></ul><ul><li><head> </li></ul><ul><li><meta name=“ author ” content=“ Pepito Grillo ”> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><center><h1> No mientas Pinocho </center></h1> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Código libre de errores (II)‏
  7. 7. Elementos depreciados <ul><li>applet </li></ul><ul><li>basefont </li></ul><ul><li>center </li></ul><ul><li>dir </li></ul><ul><li>font </li></ul><ul><li>isindex </li></ul><ul><li>menu </li></ul><ul><li>s </li></ul><ul><li>strike </li></ul><ul><li>u </li></ul>Alternativas: usar elementos XHTML o CSS http :// www.codehelp.co.uk / html / deprecated.html
  8. 8. Atributos depreciados <ul><li>align </li></ul><ul><li>alink </li></ul><ul><li>background </li></ul><ul><li>bgcolor </li></ul><ul><li>clear </li></ul><ul><li>compact </li></ul><ul><li>color </li></ul><ul><li>border </li></ul><ul><li>hspace </li></ul><ul><li>Link </li></ul><ul><li>name </li></ul>Alternativas: CSS for deprecated attributes http :// www.punkchip.com /2007/02/ css - deprecated - attributes -1/ <ul><li>noshade </li></ul><ul><li>nowrap </li></ul><ul><li>size </li></ul><ul><li>start </li></ul><ul><li>text </li></ul><ul><li>type </li></ul><ul><li>value </li></ul><ul><li>vlink </li></ul><ul><li>width </li></ul><ul><li>vspace </li></ul>
  9. 9. Separación de contenido y presentación <ul><li>Problemas típicos: </li></ul><ul><ul><li>Uso de tablas para estructurar la presentación (layout)‏ </li></ul></ul><ul><ul><li>Uso de elementos semánticos para dar formato (<blockquote>). </li></ul></ul><ul><li>Estándar recomendado: </li></ul><ul><ul><li>XHTML: contenido </li></ul></ul><ul><ul><li>CSS: presentación </li></ul></ul><ul><li>Chequeo: </li></ul><ul><ul><li>Editores </li></ul></ul><ul><ul><li>Validadores en línea </li></ul></ul>
  10. 10. Buenas prácticas <ul><li>Codificación semántica: </li></ul><ul><ul><li>Uso de metadatos. Ejemplos: </li></ul></ul><ul><ul><ul><li>Elementos: title , meta , DC , … </li></ul></ul></ul><ul><ul><ul><li>Atributos: id , alt , cite , class , name , rel , rev, summary , … </li></ul></ul></ul><ul><ul><ul><li>Metadatos vinculados: RDF </li></ul></ul></ul><ul><ul><li>Marcado semántico. Ejemplos: </li></ul></ul><ul><ul><ul><li>abbr , address , acronym , blockquote , … </li></ul></ul></ul><ul><ul><ul><li>h1 , h2 , ... </li></ul></ul></ul><ul><li>Chequeo: </li></ul><ul><ul><li>Análisis automático </li></ul></ul><ul><ul><li>Análisis “manual” </li></ul></ul>
  11. 11. Palabras clave, metadatos y código fuente <ul><li>Título de la página <title> </li></ul><ul><li>Metadatos <meta name=“” content=“” /> </li></ul><ul><li>Encabezamientos <h1> , <h2> … </li></ul><ul><li>*Texto de los enlaces <a href=“” title=“”> Texto </a> </li></ul><ul><li>Atributos de texto alternativo/descriptivo title , alt , summary </li></ul><ul><li>Resaltado del texto más significativo <strong> , <em> </li></ul>
  12. 12. Elementos semánticos <ul><li>abbr </li></ul><ul><li>*acronym </li></ul><ul><li>address </li></ul><ul><li>blockquote </li></ul><ul><li>caption </li></ul><ul><li>cite </li></ul><ul><li>code </li></ul><ul><li>dd </li></ul><ul><li>dfn </li></ul><ul><li>dl </li></ul><ul><li>dt </li></ul><ul><li>h n </li></ul><ul><li>label </li></ul><ul><li>legend </li></ul><ul><li>link </li></ul><ul><li>meta </li></ul><ul><li>option </li></ul><ul><li>q </li></ul><ul><li>select </li></ul><ul><li>thead </li></ul><ul><li>tfoot </li></ul><ul><li>title </li></ul>
  13. 13. Elementos semánticos - II <ul><li>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> . </li></ul><ul><li>Otros términos relacionados con la accesibilidad web son: </li></ul><ul><li><dl> </li></ul><ul><li><di><dt> Usabilidad web: </dt> <dd> es la disciplina… </dd></di> </li></ul><ul><li><di><dt> Arquitectura de la información: </dt> <dd> es la ciencia… </dd></di> </li></ul><ul><li></dl> </li></ul><ul><li>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> . </li></ul>
  14. 14. Atributos semánticos <ul><li>alt </li></ul><ul><li>cite </li></ul><ul><li>class </li></ul><ul><li>hreflang </li></ul><ul><li>id </li></ul><ul><li>label </li></ul><ul><li>lang </li></ul><ul><li>longdesc </li></ul><ul><li>rel </li></ul><ul><li>rev </li></ul><ul><li>summary </li></ul><ul><li>title </li></ul>
  15. 15. <ul><li><img src=“ catedralNotreDame.jpg ” alt=“Vista aérea de la Catedral de Notre Dame de París” /> </li></ul><ul><li><a href=“http://www.notredamedeparis.fr/” title=“Sitio web oficial de la Catedral de Notre Dame” > Catedral de Notre Dame </a> </li></ul>Atributos semánticos - II
  16. 16. Microformatos <ul><li>hCalendar </li></ul><ul><li>hCard </li></ul><ul><li>rel-license </li></ul><ul><li>rel-nofollow </li></ul><ul><li>rel-tag </li></ul><ul><li>VoteLinks </li></ul><ul><li>XFN </li></ul><ul><li>XMDP </li></ul>Lista de microformatos: http://microformats.org/wiki/Main_Page
  17. 17. Microformatos - II <ul><li><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> </li></ul><ul><li>http :// www.web2con . com /   Web 2.0 Conference: October 5- 19, at the Argent Hotel, San Francisco, CA </li></ul><ul><li>-- </li></ul><ul><li><div id=&quot;hcard-Rafael-Pedraza&quot; class=&quot;vcard&quot;> </li></ul><ul><li><span class=&quot;fn&quot;> Rafael Pedraza </span> </li></ul><ul><li><div class=&quot;org&quot;> Universitat Pompeu Fabra </div> </li></ul><ul><li><a class=&quot;email&quot; href=&quot;mailto:rafael.pedraza@upf.edu&quot;> [email_address] </a> </li></ul><ul><li></div> </li></ul><ul><li>Rafael Pedraza </li></ul><ul><li>Universitat Pompeu Fabra </li></ul><ul><li>[email_address] </li></ul>
  18. 18. Prácticas desaconsejadas <ul><li>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: </li></ul><ul><ul><li>Spamming keywords </li></ul></ul><ul><ul><li>Texto oculto </li></ul></ul>
  19. 19. Conclusiones - I <ul><li>La calidad del código fuente se consigue mediante el respeto de los estándares . Esto implica: </li></ul><ul><ul><li>La creación de páginas se aleja de los usuarios: Deben ser conscientes de aspectos técnicos que antes podían obviar. </li></ul></ul><ul><ul><li>Obliga a actualizar el software </li></ul></ul><ul><ul><li>Conversión retrospectiva: </li></ul></ul><ul><ul><ul><li>Dificultades técnicas </li></ul></ul></ul><ul><ul><ul><li>Altos costes en tiempo o en dinero (o ambos)‏ </li></ul></ul></ul><ul><li>Imperativo para nuevos sitios nuevos: asegura la inversión, facilita el mantenimiento, etc. </li></ul><ul><li>Recomendable para sitios anteriores. </li></ul>
  20. 20. Conclusiones - II <ul><li>Ventajas generales: </li></ul><ul><ul><li>Contenido compatible con: </li></ul></ul><ul><ul><ul><li>Diferentes agentes de usuario </li></ul></ul></ul><ul><ul><ul><li>Futuros agentes de usuario </li></ul></ul></ul><ul><ul><ul><li>Futuras formas de procesamiento y explotación </li></ul></ul></ul><ul><ul><li>Extraordinaria facilidad de mantenimiento </li></ul></ul><ul><ul><li>Optimización SEO </li></ul></ul><ul><ul><li>Accesibilidad </li></ul></ul><ul><li>Para el profesional: </li></ul><ul><ul><li>Plus de competitividad diferencial </li></ul></ul>
  21. 21. Conclusiones - III <ul><li>Requerimientos: </li></ul><ul><ul><li>Familiaridad con los estándares web: </li></ul></ul><ul><ul><ul><li>Lenguajes de marcado (XML, XHTML)‏ </li></ul></ul></ul><ul><ul><ul><li>Formatos de presentación (XSL, CSS)‏ </li></ul></ul></ul><ul><ul><ul><li>Metadatos </li></ul></ul></ul><ul><ul><ul><li>Validación </li></ul></ul></ul><ul><ul><li>Uso de tecnologías adecuadas: </li></ul></ul><ul><ul><ul><li>Producen código fuente sin errores </li></ul></ul></ul><ul><ul><ul><li>Analizan el código fuente </li></ul></ul></ul><ul><ul><ul><li>Separan contenido de presentación </li></ul></ul></ul><ul><ul><li>Políticas de control de calidad: </li></ul></ul><ul><ul><ul><li>Libros de estilo </li></ul></ul></ul><ul><ul><ul><li>Auditorias y evaluación </li></ul></ul></ul>
  22. 22. Fuentes: Selección básica <ul><li>John Allsopp . Microformats: Empowering your markup for Web 2.0. Berkeley: Friendsof, 2007 </li></ul><ul><li>Rachel Andrew & Dan Shafer. HTML Utopia: Designing without tables using CSS. Collingwood: Sitepoint, 2006 </li></ul><ul><li>Andy Budd. CSS Mastery: Advanced Web Standarsd Solutions . Berkeley: Friendsof, 2006 </li></ul><ul><li>Nigel Chapman; Jenny Chapman . Web Design: A complete introduction. Chichester: Wiley, 2006 </li></ul><ul><li>Paul Haine. HTML Mastery: Semantics, Standars, and Styling. Berkeley: Friendsof, 2006. </li></ul><ul><li>Rob Huddleston . XML . Hoboken: Wiley, 2007 </li></ul><ul><li>Shirley Kaiswer. Deliver First Class Web Sites: 101 Essential checklists . Collingwood: Sitepoint, 2006 </li></ul><ul><li>Abdrew Kirkpatrick . Web Accessibility: Web Standards and Regulatory Compliance . Berkeley: Friendsof, 2006 </li></ul><ul><li>Jesús Tramullas (coord.). Tendencias en documentación digital . Gijón: Trea, 2006 </li></ul><ul><li>Ed Tittel et al. Mastering XHTML. San Francisco: Sybex, 2002. </li></ul><ul><li>Christopher Walton . Agency and the Semantic Web . New York: Oxford, 2007 </li></ul><ul><li>Jeffrey Zeldman . Designing with web standards (second edition). Berkeley: New Riders, 2007 </li></ul>
  23. 23. Sitios web significativos <ul><li>The Web Standard Project http :// www.webstandards.org / </li></ul><ul><li>A List Apart http :// www.alistapart.com / </li></ul><ul><li>CSS Zen Garden http :// www.csszengarden.com / </li></ul><ul><li>Microformats http :// microformats.org / </li></ul>
  24. 24. Práctica 1 <ul><li>En esta práctica nos familiarizaremos con algunas herramientas para la edición de metadatos. </li></ul><ul><li>EDITOR DE METADATOS </li></ul><ul><li>DigiDocMeta: extracción automática de metadatos </li></ul><ul><li>http://www.observaweb.upf.edu/digidocmeta/digidocmetaeditor.pl?idi=es </li></ul><ul><li>EDITORES DE MICROFORMATOS </li></ul><ul><li>a. Creación de una tarjeta de presentación - hCard: </li></ul><ul><li>http://microformats.org/code/hcard/creator </li></ul><ul><li>b. Creación de un evento en un calendario - hCalendar: </li></ul><ul><li>http://microformats.org/code/hcalendar/creator </li></ul><ul><li>c. Relaciones personales - XFN: </li></ul><ul><li>http://gmpg.org/xfn/creator-es </li></ul>
  25. 25. Práctica 2 <ul><li>Práctica 2: Presencia de las palabras clave en nuestro código fuente </li></ul><ul><li>Escoja un dominio que le sea familiar </li></ul><ul><li>Seleccione una palabra clave de este dominio </li></ul><ul><li>Compruebe que la palabra clave aparece en el dominio utilizando un buscador (Yahoo!). Para ello realice la consulta: </li></ul><ul><li>site:dominio palabraClave </li></ul><ul><li>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 </li></ul><ul><li>¿Se están siguiendo las recomendaciones y pautas más apropiadas en la codificación de las páginas de su dominio? </li></ul><ul><li>Este proceso se puede hacer automáticamente con herramientas como: </li></ul><ul><li>http://www.keyworddensity.com/ </li></ul>

×