Redacción de contenidos para web

3,694 views

Published on

Published in: Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,694
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Redacción de contenidos para web

  1. 1. Redacción de contenidos para web David Maniega Legarda [email_address]
  2. 2. Ideas fuerza <ul><li>Qué implica la escritura para la pantalla </li></ul><ul><li>Decálogo de redacción web (ampliable) </li></ul><ul><li>Los principios básicos de Kilian sobre contenidos </li></ul><ul><li>Aspectos formales de los contenidos </li></ul><ul><li>El poder de la palabra…, contenido y continente </li></ul><ul><li>Análisis web y escribiendo para blogs </li></ul>
  3. 3. Del papel a la pantalla <ul><li>Lectura 25% más lenta en pantalla </li></ul><ul><li>El usuario es más impaciente, no sólo existes tú... </li></ul><ul><li>El potencial del hipertexto, ofreces muchas alternativas </li></ul><ul><li>El poder de la palabra, una tríada mágica: </li></ul><ul><ul><ul><li>Claridad  comprensible en primera lectura </li></ul></ul></ul><ul><ul><ul><li>Sencillez  sin elementos superfluos </li></ul></ul></ul><ul><ul><ul><li>Concreción  directo, sin irse por las ramas </li></ul></ul></ul>
  4. 4. El hipertexto <ul><li>Basado en el pensamiento humano, no lineal </li></ul><ul><li>Sirve para representar, pero ¿qué pasa con la cognición o la asimilación del mismo? </li></ul><ul><li>El hipertexto puede servir para representar pero no para ser entendido, y aquí tenemos un problema </li></ul><ul><li>Si nuestro sistema hipertextual es complejo, la capacidad de abstracción será igualmente indescifrable para el usuario </li></ul>
  5. 5. No me hagas pensar (S. Krug) <ul><li>Nuestro sitio web ha de ser un estímulo </li></ul><ul><li>Que el usuario encuentre lo que busca </li></ul><ul><li>Que sea comprensible con una simple lectura </li></ul><ul><li>Descaradamente breve y conciso </li></ul><ul><li>Con múltiples ganchos para seguir leyendo </li></ul><ul><li>Que no suponga un esfuerzo “No me hagas pensar” ... Porque me iré a otra parte ... </li></ul>
  6. 6. Eyetracking
  7. 7. Eyetracking http://www.youtube.com/watch?v=UXelg0T-iJA
  8. 8. ¿Hay patrones establecidos?
  9. 9. La importancia de la redacción
  10. 10. La redacción digital <ul><li>Partimos de textos...¿ seguro ? </li></ul><ul><ul><li>Contenidos escritos, pensados para papel </li></ul></ul><ul><ul><li>Nuevos contenidos, pensados... ¿para web? </li></ul></ul><ul><ul><li>Nuevos formatos, ¿sólo texto? Podcasts, video </li></ul></ul><ul><ul><li>Enlaces a otros textos, ¿necesario o sobrante? </li></ul></ul><ul><ul><li>¿Para quién “escribimos”? ¿Quién “escribe”? </li></ul></ul><ul><ul><li>Quizás no sea mala idea colgar un PDF... </li></ul></ul>
  11. 11. Decálogo de redacción web <ul><li>1.- Escribir con precisión </li></ul><ul><ul><li>Exponer exactamente lo que queremos decir </li></ul></ul><ul><ul><li>Lenguaje simple e informal , lectura más rápida </li></ul></ul><ul><ul><li>Escoger las palabras sin ambigüedad </li></ul></ul><ul><ul><li>Web 3.0 vs Web semántica </li></ul></ul><ul><ul><li>Tiempo vs Clima </li></ul></ul>
  12. 12. <ul><li>2.- Utilizar frases sencillas </li></ul><ul><ul><li>No crear estructuras complejas </li></ul></ul><ul><ul><li>Una frase es: sujeto + verbo + predicado </li></ul></ul><ul><ul><li>Cada nuevo párrafo una nueva idea </li></ul></ul><ul><ul><li>Nielsen: “recomienda usar el 50% menos de texto que en una publicación impresa”. </li></ul></ul>Decálogo de redacción web
  13. 13. <ul><li>3.- Preferencia por verbos fuertes a débiles </li></ul><ul><ul><li>Debemos evitar la perífrasis verbal (es un mito que suenen mejor o sean más “elegantes”). </li></ul></ul><ul><ul><li>“ Hacer uso de” por “Usar” </li></ul></ul><ul><ul><li>“ Realizar una encuesta” por “Encuestar” </li></ul></ul><ul><ul><li>“ Hacer clic mediante presión” por “Presionar” </li></ul></ul><ul><ul><li>“ Hacer una revisión” por “Revisar” </li></ul></ul>Decálogo de redacción web
  14. 14. <ul><li>4.- Cuidado con otros referentes </li></ul><ul><ul><li>Barbarismos: “geek”, “online”, “postear” </li></ul></ul><ul><ul><li>Engorde de palabras: “compartimentalización” por “dividir”, “reinicializar” por “reiniciar”... </li></ul></ul><ul><ul><li>Juegos de palabras, tecnicismos, localismos y variantes dialectales </li></ul></ul>Decálogo de redacción web
  15. 15. <ul><li>5.- Evitar frases hechas y palabras de moda </li></ul><ul><ul><li>Hay que evitar los clichés , su uso repetido desgasta el poder de la palabra </li></ul></ul><ul><ul><li>Las palabras de moda muchas veces llevan a confusión </li></ul></ul><ul><ul><li>Repositorio, cool, iPhonízate, postear </li></ul></ul>Decálogo de redacción web
  16. 16. <ul><li>6.- Medir las metáforas y comparaciones </li></ul><ul><ul><li>Podemos argumentar mediante comparaciones y/o contrastes para resaltar algo </li></ul></ul><ul><ul><li>No debe existir distancia física entre los elementos, evitar distracción (pensar en el hipertexto, pérdida de contexto) </li></ul></ul>Decálogo de redacción web
  17. 17. <ul><li>7.- Destacar sin abrumar </li></ul><ul><ul><li>Lo más significativo debe sobresalir del resto </li></ul></ul><ul><ul><li>Enfatiza palabras, pero no enfatices todo </li></ul></ul><ul><ul><li>Concadena las ideas , no las esparzas por la página </li></ul></ul>Decálogo de redacción web
  18. 18. <ul><li>8.- Acotar las frases fragmentarias </li></ul><ul><ul><li>Una frase fragmentaria no tiene sujeto o verbo </li></ul></ul><ul><ul><li>Son muy buenas para títulos o explicaciones fuera del contexto </li></ul></ul><ul><ul><li>Son autoexplicables </li></ul></ul><ul><ul><li>Un pie de foto puede ser fragmentario </li></ul></ul><ul><ul><li>“ Alonso realmente demoledor ” </li></ul></ul>Decálogo de redacción web
  19. 19. <ul><li>9.- Aplicar el estilo de pirámide invertida </li></ul><ul><ul><li>La idea principal va al inicio para interesar por la lectura al usuario </li></ul></ul><ul><ul><li>Luego argumentamos a base de razonamientos </li></ul></ul><ul><ul><li>Finalmente aportamos una idea/conclusión </li></ul></ul><ul><ul><li>Logramos que se quede con la idea sin haber leído todo el texto </li></ul></ul>Decálogo de redacción web
  20. 20. <ul><li>10.- Uso de ladillos </li></ul><ul><ul><li>En textos largos hemos de incluir una o varias palabras que representen el contenido posterior </li></ul></ul><ul><ul><li>Breves, directos, muy visuales (abstracción) </li></ul></ul><ul><ul><li>Potencian la relación de ideas entre bloques </li></ul></ul><ul><ul><li>En los titulares las primeras palabras contienen lo esencial de la &quot; acción &quot; </li></ul></ul>Decálogo de redacción web
  21. 21. Armando los contenidos <ul><li>Crawford Kilian establece 3 principios básicos: </li></ul><ul><ul><li>Orientación  el usuario debe ser capaz de interpretar y moverse por el sitio. Saber cómo se estructura, qué es navegación y a dónde puede ir </li></ul></ul><ul><ul><li>Información  debe ser clara, directa. Correcta sintáctica, gramatical y ortográficamente. Aporta información no verbal sobre la calidad </li></ul></ul><ul><ul><li>Acción  espíritu optimista (enfocado a soluciones), lenguaje para el usuario “tú”, web 2.0 </li></ul></ul>
  22. 22. <ul><li>Generando estructuras claras </li></ul><ul><ul><li>Cabecera + menú + cuerpo + pie página </li></ul></ul>¿Cómo seguir estos principios? Finalidad del sitio A dónde voy Qué puedo leer Un recordatorio
  23. 23. <ul><li>Creando una estructura lógica </li></ul><ul><li>Analizamos nuestro target potencial (visitantes, colaboradores, ocasionales) </li></ul><ul><li>Nosotros organizamos el contenido, decidimos si lo troceamos o deslizamos ( scroll ) </li></ul><ul><li>Analizamos los niveles de profundidad del sistema de navegación </li></ul>¿Cómo seguir estos principios?
  24. 24. Títulos y subtítulos <ul><li>Son piezas informativas que complementan el contenido </li></ul><ul><li>Han de “ anunciar ” lo que viene a continuación </li></ul><ul><li>Las tres primeras palabras son la clave </li></ul><ul><li>Los subtítulos representan porciones de ideas , buena adecuación y proporción destacada </li></ul><ul><li>Si partimos un bloque en secciones , hay que establecer un sistema de enlaces internos </li></ul>
  25. 25. Analizad el formato compositivo de estos recursos en grupos de 2 ó 3 personas http://www.elpais.com http://www.elmundo.es http://www.20minutos.es Práctica
  26. 26. Conceptualización formal
  27. 27. Resúmenes y TdC <ul><li>En unidades informativas de gran tamaño conviene crear tablas de contenidos hipertextuales </li></ul><ul><li>Al inicio se presenta el resumen , breve, directo, con las ideas básicas del contenido </li></ul><ul><li>Refuerzan el significado real del título </li></ul>
  28. 28. Uso de listas <ul><li>La representación enumerada en forma de lista es visualmente muy potente </li></ul><ul><li>Alta legibilidad y capacidad de abstracción </li></ul><ul><li>Necesarias para estructurar conceptos </li></ul><ul><li>Refuerzan las relaciones de las partes con el todo </li></ul>
  29. 29. Enlaces correctos <ul><li>Usar lo que funciona mejor , subrayado, pero no necesariamente azul </li></ul><ul><li>El enlace ha de ser predictivo , informativo, explicativo y atractivo, ¡uf, cuántas cosas! </li></ul><ul><li>Nunca ha de ser confuso, por lo tanto, olvidémonos de subrayar texto (uso de <em> y <strong>) </li></ul><ul><li>Etiquetar lo realmente representativo del enlace </li></ul>
  30. 30. Sistema de enlaces <ul><li>El hipertexto puede abrumar a un usuario novel o ser perfecto para uno experto </li></ul><ul><li>Hay que medir la densidad de los enlaces del contenido y del sistema de navegación </li></ul><ul><li>La mejor forma es el sistema cóncavo (6 x 2 x 2) </li></ul><ul><li>Pregunta: ¿limitamos las opciones de usuario? ¿Cuántas líneas argumentales se pueden tener activas? ¿Es necesario enriquecer el contenido a pesar de la potencial pérdida que pueda suponer? </li></ul>
  31. 31. Dónde ubicar los enlaces (I) <ul><li>Integrados en el texto es lo más intuitivo, ¿es lo mejor? </li></ul><ul><li>Desorienta el texto , no el enlace en sí </li></ul><ul><li>Evitar las referencias al pie de página </li></ul>
  32. 32. Dónde ubicar los enlaces (II) <ul><li>Posicionar los enlaces en forma de lista (pocos) reduce la carga cognitiva por la concentración del usuario en la exploración </li></ul><ul><li>Informar de que se abandona el sitio actual </li></ul><ul><li>Olvidarnos de: “Si les doy otros recursos no me visitarán más...” </li></ul>
  33. 33. Una posible solución <ul><li>Reducir la densidad de enlaces a aquellos fundamentales integrados en el texto </li></ul><ul><li>Si necesitamos más para complementar el contenido y aportar riqueza, en un lateral y en formato de lista </li></ul>
  34. 34. Consejos importantes <ul><li>Cuando sean un grupo de enlaces, mostrarlos en formato lista (X)HTML </li></ul><ul><li>No marcar como un enlace todo aquello que no es un enlace </li></ul><ul><li>No hacer enlaces con Javascript </li></ul><ul><li>No variar el tamaño de un enlace al pasar el ratón por encima ( efecto hover ) </li></ul><ul><li>Siempre subrayados , lo repetiré 1000 veces </li></ul><ul><li>Aplicar diferentes colores según el estado </li></ul>
  35. 35. <ul><li>No aislar una página al dejarla sin sistema de navegación (recordad que tenemos muchos niveles de acceso – Google & co.) </li></ul><ul><li>No llevar a páginas sólo con enlaces sin contexto , p.e. “Volver a la página principal” ¿si vengo de Google? </li></ul>Evitar las calles sin salida
  36. 36. Etiquetarlo... todo <ul><li>Cuidado con las pistas exclusivamente gráficas, no siempre son reconocibles </li></ul><ul><li>Evita los sistemas de navegación gráficos , son más confusos que los textuales </li></ul><ul><li>Siempre al lado de una imagen su texto o etiqueta </li></ul><ul><li>Utiliza microformatos, etiquetas semánticas... </li></ul>
  37. 37. <ul><li>Un buen contenido ha de tener una buena legibilidad </li></ul><ul><li>Una mala visualización desmonta el trabajo </li></ul><ul><li>Relación entre contenido y forma </li></ul>Usabilidad y aspectos formales
  38. 38. <ul><li>Orden narrativo: </li></ul><ul><ul><li>Describe un proceso a lo largo del tiempo </li></ul></ul><ul><ul><li>Generalmente se presenta bajo un único texto dividido en secciones </li></ul></ul><ul><ul><li>Podemos ofrecer un formato para su impresión </li></ul></ul><ul><ul><li>Podemos partirlo en porciones (lógicas) </li></ul></ul>Ordenación del contenido (I)
  39. 39. <ul><li>Orden lógico: </li></ul><ul><ul><li>Se presenta un discurso basado en: </li></ul></ul><ul><ul><ul><ul><li>Una afirmación </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Una argumentación </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Una conclusión </li></ul></ul></ul></ul><ul><ul><li>Las referencias se pueden incluir en el texto o al final del mismo </li></ul></ul>Ordenación del contenido (II)
  40. 40. <ul><li>Orden basado en categorías: </li></ul><ul><ul><li>Agrupación por temas, donde se establece una jerarquía </li></ul></ul><ul><ul><li>Altamente estructurados </li></ul></ul><ul><ul><li>Es conveniente crear grandes categorías que se subdividirán en otros temas </li></ul></ul><ul><ul><li>Puede ser rígido y poco efectivo para el usuario </li></ul></ul>Ordenación del contenido (III)
  41. 41. Práctica <ul><li>¿Pensáis que la ordenación por categorías es rígida y poco flexible? </li></ul><ul><li>¿Es necesaria en algunos casos, cuáles? </li></ul><ul><li>¿La estructura jerárquica de un diario (p.e. El País.com), es compleja o necesaria? </li></ul><ul><li>Ante el nuevo paradigma de las nubes de tags, ¿cómo se comporta el autor/usuario/productor? </li></ul>
  42. 42. El poder del contenido
  43. 43. <ul><li>Se recomienda que los bloques de texto sean de no más de 100 palabras </li></ul><ul><li>En cada línea no debe haber más de 12 palabras, un mínimo de 8 (lectura ágil) </li></ul><ul><li>No hacer un mismo texto a dos columnas </li></ul><ul><li>Si se divide que sea en partes significativas , incluyendo un enlace a una versión completa </li></ul>Legibilidad del contenido (I)
  44. 44. <ul><li>Factores que afectan la legibilidad: </li></ul><ul><ul><li>Disposición de los textos y estilo de escritura </li></ul></ul><ul><ul><li>Tamaño de la tipografía (=12 pt texto, 22pt titulares) </li></ul></ul><ul><ul><li>Tipo de familia (serif, sans-serif) </li></ul></ul><ul><ul><li>Interlineado (dos espacios entre párrafos) </li></ul></ul><ul><ul><li>Separación e n t r e c a r a c t e r e s </li></ul></ul><ul><ul><li>CUIDADO CON TODO EL TEXTO EN MAYÚSCULAS, OBLIGA A FORZAR LA VISTA </li></ul></ul>Legibilidad del contenido (II)
  45. 45. <ul><li>Debemos establecer un margen entre el texto y su perímetro. </li></ul><ul><li>Si hay márgenes se lee más lento pero se comprende mejor. </li></ul><ul><li>En caso de un formato para impresión (nativo o PDF) velar por su anchura, no superior a 750 píxeles </li></ul><ul><li>En esta versión hemos de quedarnos sólo con lo necesario y eliminar lo accesorio </li></ul>Legibilidad del contenido (III)
  46. 46. La fuerza de la palabra <ul><li>Siempre que escribimos buscamos “ persuadir ” al usuario </li></ul><ul><li>Hay que demostrarle que te interesas por él, por sus necesidades , por sus dudas... </li></ul><ul><li>Si conseguimos que el usuario reaccione, actuará (p.e. Foros de dudas técnicas) </li></ul>
  47. 47. <ul><li>La argumentación lógica propone y razona sobre ello </li></ul><ul><li>Si los razonamientos no son concluyentes para el usuario o puede desconfiar de ellos, describamos la metodología utilizada... </li></ul><ul><li>...o refirámonos a entes con “ autoridad ” </li></ul>¿Cómo funciona la persuasión?
  48. 48. <ul><li>La atracción emotiva supone aplicar ráfagas de ideas e imágenes que despierten interés </li></ul><ul><li>Las sensaciones tienen que ver con el estado de ánimo del usuario </li></ul><ul><li>Si tienes un sitio web temático que resuelve dudas de Windows, utiliza un discurso basado en el éxito y la resolución de problemas </li></ul>¿Cómo funciona la persuasión?
  49. 49. <ul><li>La credibilidad es el tercer pilar básico </li></ul><ul><li>Lenguaje y tono cómodo para los usuarios. Transmitir sinceridad , si tenemos autoridad o prestigio hay que explotarlo </li></ul><ul><li>Ponerse en la piel del usuario, no marcar distancia , poniéndote de su lado, aumenta la confianza </li></ul>¿Cómo funciona la persuasión?
  50. 50. Análisis de nuestro sitio web
  51. 51. <ul><li>Apliquemos estos criterios para evaluar y detectar problemas en nuestro sitio web: </li></ul><ul><li>Finalidad  ¿Se logra? ¿Cómo lo hace? Si es que no ¿por qué no? ¿Se ha tenido en cuenta a la audiencia? </li></ul><ul><li>Audiencia  ¿Para jóvenes o adultos? ¿Masculina o femenina? ¿Experimentada o novel? </li></ul>Análisis de nuestro sitio web
  52. 52. <ul><li>Contenido  ¿Información abundante o mayoritariamente anuncios? ¿Pensado para imprimir o para leer y seguir? ¿La temática es adecuada al título del sitio? ¿Y al lema? ¿El texto es claro, está bien redactado, hay faltas de ortografía? ¿Tiene un formato coherente? ¿Capta el interés? </li></ul>Análisis de nuestro sitio web
  53. 53. <ul><li>Estructura  ¿Es fácil de navegar por él? ¿Requiere muchos clics? ¿Hay muchos anuncios que entorpecen? ¿Puedes determinar una secuencialidad? </li></ul>Análisis de nuestro sitio web
  54. 54. <ul><li>Aspecto formal  ¿La carga gráfica es adecuada? ¿Están bien utilizados los gráficos? ¿Aportan valor los gráficos o los elementos multimedia? ¿Realzan o complementan el texto?¿Tienen una buena resolución visual? </li></ul>Análisis de nuestro sitio web
  55. 55. <ul><li>Accesibilidad  ¿Descarga rápido la página, menos de 5 segundos? ¿Necesita algún plug-in o complemento? ¿Tiene una buena resolución de contraste? ¿Se imprime correctamente? </li></ul>Análisis de nuestro sitio web
  56. 56. Redactando para blogs
  57. 57. <ul><li>Mantener siempre la temática principal del blog </li></ul><ul><li>Sé cuidados@ con la H ortografía (¿a que duele?) </li></ul><ul><li>Encadena tus ideas, hilo conductor </li></ul><ul><li>Destaca aquellos puntos principales </li></ul><ul><li>Márcate tus intenciones, finalidad de tus escritos </li></ul>Redactando para blogs (I)
  58. 58. <ul><li>Haz un texto claro, directo, pero..., mójate </li></ul><ul><li>Varía tu discurso en función de tu “post” </li></ul><ul><li>No enlaces por enlazar, sólo a lo realmente útil, aunque sea tu “competencia”. Comenta en sus blogs, pero aporta criterio </li></ul>Redactando para blogs (II)
  59. 59. <ul><li>No estés dos meses sin aparecer en escena </li></ul><ul><li>Cuida tu lenguaje, recuerda que has de tener credibilidad (especialmente si eres tecnólogo) </li></ul><ul><li>Renuévate, renueva tu discurso, sé innovador </li></ul>Redactando para blogs (III)
  60. 60. <ul><li>Plasma una idea por párrafo </li></ul><ul><li>Utiliza imágenes para ilustrar lo que comentas </li></ul><ul><li>Repesca tus “mejores” momentos ( lo + leído ) </li></ul><ul><li>No te quedes con un corta y pega, apunta a las fuentes y de nuevo..., ¡mójate! </li></ul>Redactando para blogs (IV)
  61. 61. <ul><li>Piensa en clave web , el procesador de textos no es tu amigo De lo escrito, pon sólo la mitad </li></ul><ul><li>Como vas a dejar los comentarios abiertos..., responde , ¡que sepan que estás ahí! </li></ul><ul><li>Evita escribir para tener posicionamiento ¿qué? Sí, escribe para la gente , no para Google </li></ul>Redactando para blogs (V)
  62. 62. <ul><li>No hagas spam , te puedes enlazar a ti mismo siempre que aportes algo nuevo </li></ul><ul><li>Sindica tu blog , no des trabajo a quién no quiere </li></ul>Redactando para blogs (VI)
  63. 63. Títulos para captar miradas <ul><li>Cómo crear…  representa utilidad </li></ul><ul><li>Secretos sobre…  algo nuevo </li></ul><ul><li>Mitos acerca de…  sabiduría popular </li></ul><ul><li>La forma interrogativa  participación </li></ul><ul><li>Top 10 en…  siempre descubres algo </li></ul><ul><li>Cómo hice…  experiencia – empatía </li></ul><ul><li>Sabías que Steve Jobs…  uso de personajes atrae la atención, despierta interés </li></ul>http://www.trazos-web.com/2007/08/23/7-formas-faciles-de-crear-titulos-atrapa-miradas/
  64. 64. <ul><li>Lo correcto: http://sigt.net/archivo/traduccion-de-20-rules-of-smart-and-successful-web-development.xhtml </li></ul><ul><li>Lo incorrecto: http://www.carlosleopoldo.com/2006/03/21/20-reglas-para-crear-sitios-web-exitosos/ </li></ul>21 reglas para crear sitios exitosos
  65. 65. <ul><li>Qué tiene Yahoo! Indizado de mi sitio web http://siteexplorer.search.yahoo.com/ </li></ul><ul><li>Darte de alta en el directorio por excelencia http://www.dmoz.org/World/Español/add.html </li></ul><ul><li>Haz ping, que te empiecen a conocer http://pingomatic.com/ </li></ul><ul><li>Posicionamiento web en Google (buen tuto) http://google.dirson.com/posicionamiento.net/ </li></ul>Algunos detalles interesantes
  66. 66. <ul><li>77 formas de conseguir tráfico web http://www.scribd.com/doc/42314/77-Formas-de-conseguir-trafico-Web </li></ul><ul><li>Promocionar un weblog http://eltelendro.blogspot.com/2005/05/promocionar-un-weblog.html </li></ul><ul><li>Consejos para bloggers noveles http://www.enriquedans.com/2005/10/consejos-para-bloggers-noveles.html </li></ul>Algunas referencias básicas
  67. 67. ¿Dudas, preguntas, abucheos...? Muchas gracias David Maniega [email_address] Valencia, 2008

×