Taller Escribir Para El Web Webprendedor

1

Tienes 5 Segundos:del libro a la práctica

Juan C. [email protected]

www.usando.infowww.tienes5segundos.cl

2Juan C. Camus | [email protected] | www.usando.info

Tienes 5 Segundos: del libro a la práctica

Agenda

Elementos de los Contenidos Digitales1. Características de las comunicaciones digitales2. Elementos del modelo Margarita3. Eyetracking

Redacción de Contenidos Digitales1. Características de la redacción para el Web2. Elementos de los Contenidos3. Contenidos Asociados4. Accesibilidad

Validación1. Herramientas

Agenda



¿Quién me lee? ¿Desde dónde me lee?

Características de las comunicaciones digitales




• Características propias de la comunicación vía web– Interactiva– Actualizada– Multimedial– No lineal– Personal





• Jean-François Fogel– “El texto al pasar del papel a la pantalla, no gana nada". – El libro al pertenecer a una biblioteca digital hacia la cual hay múltiples

referencias desde sus páginas, debido a las anotaciones que han hecho otras personas o las menciones que hace el propio texto, ofrece mucho más que el libro de papel.

• El iPod sólo fue un éxito cuando apareció iTunes

– Presentando: • Lectura vertical• Lectura horizontal




• Contenidos Estáticos vs Dinámicos• ...dejar que la audiencia haga algo y sea parte de la noticia, es algo que

otros medios generalmente no pueden hacer. La Internet y el web son interactivos por naturaleza, y para que Internet tenga éxito como medio masivo, debe aprovechar sus fortalezas sobre los otros medios”. – Steve Outing

Steve Outing





• Modelos– Representación de la realidad

• Aplicado a comunicaciones– Describir el proceso completo de la actividad de crear contenidos

interactivos.

Modelos de Comunicaciones Digitales




Un modelo: La Margarita y el Ecosistema

• Los contenidos digitales forman un ecosistema que busca el equilibrio y que requiere de diversos elementos y participantes para conseguirlos.

• Para definir dichos elementos se ha definido un modelo que tiene un diseño semejante a una flor (margarita) sólo por necesidad de representación, dado que permite entender de mejor manera sus interacciones y correlaciones.

• Este ecosistema cuenta con siete elementos o áreas de trabajo, cada una de ellas con sus tareas y su contribución al área siguiente.




El modelo Margarita




Elementos del Modelo Margarita

Los elementos o áreas de trabajo definidas son:

• Definir• Crear• Mediatizar• Interactivar• Envasar• Publicar• Gestionar




El modelo Margarita - Definir

• Establecer la Política Editorial• Generar la Política Comercial• Revisar el feedback de

contenidos anteriores• Definir la estrategias de

contenidos• Modelar la Experiencia de

usuario• Posicionamiento en

Buscadores• Posicionamiento de Marketing




El modelo Margarita - Crear

• Búsqueda de elementos digitales

• Búsqueda de oferta de “conexión social”

• Utilización de Taxonomía• Redacción basada en keywords

para encontrabilidad• Definición de contenidos

relacionados externos• Preparar “formas” alternativas

de entrega




El modelo Margarita - Mediatizar

• Audio y Video• Rich Internet Applications• Navegación mediante

teclado• Propiedad Intelectual• Información sobre Plug-in

utilizado




El modelo Margarita - Interactivar

• Acciones Comerciales• Visualizaciones Gráficas• Taxonomía y Contenidos

Relacionados• Acceso a Bases de Datos

Relacionadas• Enlaces Relacionados• Comunicación vía Mail para

Difusión (interno y externo)




El modelo Margarita - Envasar

• Integración de los elementos desarrollados en etapas previas:

• Prueba de funcionalidades• Prueba de estándares• Prueba de Accesibilidad• Prueba de plataformas• Revisión de ortografa




El modelo Margarita - Publicar

• Estrategia de marketing

• Registro en directorios y buscadores:

• Gestión del archivo Sitemap.xml

• Difundir por Mail• Difundir por Redes

Sociales• Definición de Propiedad

Intelectual




El modelo Margarita - Gestionar

• Monitoreo del sitio• Minería web• Acciones contextuales• Participación en la

comunidad• Posicionamiento web




Desafíos del modelo Margarita

• Para que el modelo sea validado, se parte de la idea de que la plataforma digital es creada con un propósito.

• Dado lo anterior, los contenidos del sitios deben cumplir con ayudar a dicho propósito.

• Por eso, cada contenido nace por razones fundadas y puede ser dotado de los elementos que se le ofrecen en cada área para asegurar que el propósito pueda ser alcanzado.




Características de la redacción para el Web

• Cómo leemos• Cómo presentamos• Cómo interactuamos

Características de la Redacción Web



Características de la redacción para el Web

• Primero: Cómo leemos…– Se lee mediante saltos entre los temas más importantes, no

palabra a palabra (Morkes, 1979)– El 79% va saltando entre párrafos y que sólo el 6% lee palabra a

palabra (Nielsen 1997)– Se lee siguiendo el “aroma” de la información que permite predecir la

calidad de lo que se encontrará (Pirolli 2002)– La credibilidad de un sitio se construye con medidas concretas

relacionadas con la forma de presentar la información (Stanford 2002)




Los hallazgos basados en Eyetracking

• Test Interactivo de Eyetracking:– http://poynterextra.org/eyetrack2004/FQ.htm


http://poynterextra.org/eyetrack2004/FQ.htm




• Eyetracking: qué miran cuando nos visitan?– El área cubierta por la mirada (que tiene la forma de un triángulo) es lo

que existe para el usuario y lo demás, simplemente no se ve.




Cómo presentamos…

• Portada• Títulos• Bajadas• Redacción en general• Textos Cortos• Textos Largos• Fotografías• Interacción• Tipografía




• Cómo presentamos: Portada– Gracias a Google, la página de inicio ya no tiene validez como la única

zona de acceso al sitio web.– Por lo tanto hay que preparar en cada página:

• Contexto institucional• Navegación• Ofertas de otros contenidos• Elementos de contacto

Cómo presentamos…




Cómo presentamos: Títulos





• El título debe ser comprensible “para” el web: debe entenderse fuera de contexto

• Las palabras del título deben apoyar el “click” del usuario• El título debe sostenerse en el tiempo





1

2

Dos títulos para el mismo contenido

Cuatro versiones: cuál es mejor?





• En resumen:– crear titulares autoexplicativos, – que no requieran de contexto para ser entendidos y– que le den ganas al usuario de hacer click para saber más

• Dato:– No más de 64 caracteres




Cómo presentamos: Bajadas

• Son un resumen del texto• ¿Son necesarias?

– Para apoyar la lectura rápida– Para apoyar la Encontrabilidad– Para generar datos de meta información– Para ayudar en desarrollo de gadgets

• RSS• Newsletters• Feeds




Cómo presentamos: Bajadas

• La bajada como apoyo a la lectura




Cómo presentamos: Redacción

• Si no nos leen, para qué insistimos en escribir… tanto?– Por ello es necesario:

• Destacar palabras significativas• Subtítulos destacados• Listas (no más de siete elementos)

• Una idea por párrafo

• Pirámide invertida: lo importante primero• Escribir con la mitad de las palabras




Cómo presentamos: Textos Cortos

• Es necesario que la redacción sea corta, que enfatice en las ideas centrales y que guíe la lectura utilizando elementos claves (negritas, enlaces, etc).




Cómo presentamos: Textos Cortos

• Estilos: Bitácora vs Último Minuto




Cómo presentamos: Textos Largos

• Preferentemente, evitarlos.• Si deben ser incluidos, evitar las “sábanas”.• Preferir:

– Subtítulos– Listas– Imágenes– Cuadros o Tablas

• Ofrecer alternativas:– PDF– Impresión amistosa– Texto dividido en varios títulos




Cómo presentamos: Fotografías

• La imagen siempre tiene lectura. Punto.




Cómo presentamos: Tipografía

• Tipografía para la pantalla• Elegir la que se ha diseñado para ese efecto: Verdana

• ¿Se pueden usar otras?• La importancia del CSS• Cambiar tipografía dependiendo del medio utilizado: pantalla,

impresora, televisión, celular




• Contenidos Asociados (Ayer…)– Ayudan a crear usuarios leales

• Wallpapers (Fondos)• Screensavers (Salva Pantallas)• Postales• Enviar a un amigo

Ofertas para generar lealtad

Acciones Contextuales

Acciones Contextuales / Comunidad



• Contenidos Asociados (Hoy…)• Participar en redes sociales• Comentar• Participar

Acciones Contextuales + Comunidad




• Contenidos Asociados (Hoy…)• Bloggers





• Contenidos Asociados (Hoy…)• Herramientas de interacción





• “Click trigger”– La habilidad que tiene un sitio web para ofrecer enlaces en cada

página al visitante, a partir de los cuales pueda participar de manera más concreta en los contenidos del sitio web.





• Ejemplos de “Click trigger”– Preocuparse de crear contenidos que generen más clicks (Ejemplo:

Lo + … en NYT)– Evitar la navegación de rebote y tener siempre una oferta asociada

(Ejemplo: acciones a realizar El Mundo)





Cómo presentamos: Móviles

• Para presentar en dispositivos móviles hay que preocuparse de:• Contexto de presentación

• Desde qué aparato nos miran• Para qué nos miran• Quiénes nos miran

• Ver la diferencia entre:• Miniaturizar

• Restringir el contenido, apto para una pantalla mínima

• Movilizar• Dejarlo disponible para el contexto en que nos visitan




• Accesibilidad = Accessibility– Capacidad de un sitio web de ser usado por personas con

discapacidades físicas– ¿Normas?

• Decreto Supremo 100• Guía Sitios Web del Gobierno – 2004• W3C - WAI

Accesibilidad

Accesibilidad



• Validador online– http://www.sidar.org/hera/– Valida según las normas de la W3C - WAI

Accesibilidad

Accesibilidad



Accesibilidad: un ejemplo

Accesibilidad



• Validador online– http://validador.w3.org/– Valida según las normas de la W3C

Accesibilidad

Estándares Web



Herramientas

• El browser a usar– FireFox: http://www.mozilla.org/products/firefox/central.html– Opera: http://www.opera.com/download/

• Herramientas de apoyo:– IE

• http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

– FF • http://www.chrispederick.com/work/firefox/webdeveloper/

• Links e Imágenes no existentes– Xenu

• http://home.snafu.de/tilman/xenulink.html

– Link Checker de W3C• http://validator.w3.org/checklink

• Peso de las páginas– Page Size

• http://www.numion.com/Stopwatch/index.html– Web Site Optimization

• http://www.websiteoptimization.com/services/analyze/



Herramientas

• Revisión desde los buscadores– El sitio visto por un robot

• http://www.webconfs.com/search-engine-spider-simulator.php• http://www.webmaster-toolkit.com/search-engine-simulator.shtml

• Links al sitio– Google, Yahoo! Site Explorer y Altavista– link:url-sitioweb

• Validaciones de Estándares de w3c.org– HTML

• http://validator.w3.org/– CSS

• http://jigsaw.w3.org/css-validator/

• Visibilidad en browsers– Tamaño de ventanas

• http://www.w3schools.com/browsers/browsers_stats.asp – Visión en Sólo texto (Lynx)

• http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php– Visión en celulares

• http://ready.mobi/launch.jsp?locale=en_EN



Herramientas

• Revisión desde los buscadores– El sitio visto por un robot

• http://www.webconfs.com/search-engine-spider-simulator.php• http://www.webmaster-toolkit.com/search-engine-simulator.shtml• http://www.googlemania.com/tracking.php• http://www.websiteoptimization.com/services/analyze/

• Links al sitio– Google, Yahoo! Site Explorer y Altavista– link:url-sitioweb

• Validaciones w3c.org– HTML

• http://validator.w3.org/– CSS

• http://jigsaw.w3.org/css-validator/

Posicionamiento en buscadores

http://www.webconfs.com/search-engine-spider-simulator.php










http://www.webmaster-toolkit.com/search-engine-simulator.shtml










http://www.googlemania.com/tracking.php




http://www.websiteoptimization.com/services/analyze/







51

Tienes 5 Segundos:del libro a la práctica

Juan C. [email protected]

www.usando.info

Taller Escribir Para El Web Webprendedor

Technology

Transcript of Taller Escribir Para El Web Webprendedor