Download - Cómo titular para Web
![Page 1: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/1.jpg)
1
Tienes 5 Segundos:Cómo titular para la Web
Juan C. [email protected]
www.usando.infowww.tienes5segundos.cl
![Page 2: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/2.jpg)
2| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
El ciclo virtuoso
Características de las comunicaciones digitales
• La clave es transformar la información en acción
![Page 3: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/3.jpg)
3| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción WebCaracterísticas de las comunicaciones digitales
![Page 4: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/4.jpg)
4| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción WebCaracterísticas de las comunicaciones digitales
![Page 5: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/5.jpg)
5| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción WebCaracterísticas de las comunicaciones digitales
![Page 6: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/6.jpg)
6| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción WebCaracterísticas de las comunicaciones digitales
![Page 7: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/7.jpg)
7| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
El ciclo virtuoso
Características de las comunicaciones digitales
• La clave es transformar la información en acción
![Page 8: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/8.jpg)
8| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Las bases
• Características propias de la comunicación vía web– Interactiva– Actualizada– Multimedial– No lineal– Personal
Características de las comunicaciones digitales
![Page 9: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/9.jpg)
9| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• 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
Las bases
Características de las comunicaciones digitales
![Page 10: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/10.jpg)
10| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Las bases
• 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
Características de las comunicaciones digitales
![Page 11: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/11.jpg)
11| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Las bases
• 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.
Características de las comunicaciones digitales
![Page 12: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/12.jpg)
12| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Las bases
• Test Interactivo de Eyetracking
Características de las comunicaciones digitales
![Page 13: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/13.jpg)
13| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
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
![Page 14: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/14.jpg)
14| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – 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)
Características de la Redacción Web
![Page 15: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/15.jpg)
15| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos…
• Portada• Títulos• Bajadas• Redacción en general• Textos Cortos• Textos Largos• Fotografías• Interacción• Tipografía
Características de la Redacción Web
![Page 16: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/16.jpg)
16| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• 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 (logotipo, dirección física, contacto)• Navegación (sección, breadcrumbs, menú)• Ofertas de otros contenidos (Vea además)• Compartir (comentarios, envíos por mails, redes sociales)
Cómo presentamos…
Características de la Redacción Web
![Page 17: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/17.jpg)
17| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• Cómo presentamos: Portada– Funciona su dominio sin las www?– Ha comprado los nombres parecidos
• Google• Gooogle• Gogle
– Un problema de marketing y DNS
Cómo presentamos…
Características de la Redacción Web
![Page 18: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/18.jpg)
18| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Títulos
Características de la Redacción Web
![Page 19: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/19.jpg)
19| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Títulos
• El título debe ser comprensible “para” el web: debe entenderse fuera de contexto
– Sujeto + Predicado– Títulos fomes para Internet– Títulos con estándar web (<h1>)
• Las palabras del título deben apoyar el “click” del usuario– Verbos activos– Invitaciones a la acción
• El título debe sostenerse en el tiempo– Hoy, Ayer, Mañana– Pasado, Presente y Futuro
• El título no debe medir más de 64 caracteres de largo– Google, Yahoo, Bing permiten máximo 70 caracteres
Características de la Redacción Web
![Page 20: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/20.jpg)
20| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Títulos
1
2
Dos títulos y dos soportes para el mismo contenido
Cuatro versiones:
¿cuál es mejor?
Características de la Redacción Web
![Page 21: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/21.jpg)
21| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Títulos
Características de la Redacción Web
![Page 22: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/22.jpg)
22| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Títulos
El largo de los títulos es de...– Inauguran museo de Carabineros en honor a general Bernales
• (59)
– Presidenta Bachelet inauguró el centro cultural en honor al ... • (60)
– Bachelet inaugura Centro Cultural de Carabineros "General ... • (58)
– Carabineros inaugura centro cultural en memoria de general José ... • (64)
– Presidenta inaugura centro cultural General Bernales • (53)
– Inauguran Centro Cultural General Bernales • (43)
Características de la Redacción Web
![Page 23: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/23.jpg)
23| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Bajadas
• Son un resumen del texto– Apoyan el contenido del título
• ¿Son necesarias?– Para apoyar la lectura rápida (negritas, destacados)– Para apoyar la Encontrabilidad (más términos, sinónimos)– Para generar datos de meta información (<h2>, meta
description)– Para ayudar en desarrollo de gadgets:• Contenido para RSS• Contenido para newsletters• Contenido para widgets
Características de la Redacción Web
![Page 24: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/24.jpg)
24| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Bajadas
• La bajada como apoyo a la lectura
Características de la Redacción Web
![Page 25: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/25.jpg)
25| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
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
Características de la Redacción Web
![Page 26: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/26.jpg)
26| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
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).
Características de la Redacción Web
![Page 27: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/27.jpg)
27| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Textos Cortos
• Estilos: Bitácora versus Visión Editorial
Características de la Redacción Web
![Page 28: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/28.jpg)
28| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
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
Características de la Redacción Web
![Page 29: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/29.jpg)
29| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Cómo presentamos: Fotografías
• La imagen siempre tiene lectura. Punto.
Características de la Redacción Web
![Page 30: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/30.jpg)
30| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
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
Características de la Redacción Web
![Page 31: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/31.jpg)
31| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• Contenidos Asociados (Ayer…)– Ayudan a crear usuarios leales
• Wallpapers (Fondos)• Screensavers (Salva Pantallas)• Postales• Enviar a un amigo
Ofertas para generar lealtad
Acciones Contextuales
Características de la Redacción Web
![Page 32: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/32.jpg)
32| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• Contenidos Asociados (Hoy…)• Participar en redes sociales• Comentar• Participar
Acciones Contextuales + Comunidad
Características de la Redacción Web
![Page 33: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/33.jpg)
33| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• Contenidos Asociados (Hoy…)• Bloggers
Acciones Contextuales + Comunidad
Características de la Redacción Web
![Page 34: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/34.jpg)
34| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• Contenidos Asociados (Hoy…)• Herramientas de interacción
Acciones Contextuales + Comunidad
Características de la Redacción Web
![Page 35: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/35.jpg)
35| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
• “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.
Acciones Contextuales
Características de la Redacción Web
![Page 36: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/36.jpg)
36| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción 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)
Acciones Contextuales
Características de la Redacción Web
![Page 37: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/37.jpg)
37| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
¿Quién me lee? ¿Desde dónde me lee?
Características de la Redacción Web
![Page 38: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/38.jpg)
38| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
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
• No es lo mismo:• Miniaturizar
• Mantener lo actual pero mostrarlo en una pantalla de menor tamaño
• Movilizar• Dejarlo disponible para el contexto en que nos visitan
Características de la Redacción Web
![Page 39: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/39.jpg)
39| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción 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
![Page 40: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/40.jpg)
40| Juan C. Camus | [email protected] | www.usando.info
Tienes 5 Segundos – Redacción Web
Herramientas
• 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
![Page 41: Cómo titular para Web](https://reader036.vdocuments.co/reader036/viewer/2022081413/5492bda8b4795907368b4608/html5/thumbnails/41.jpg)
41
Tienes 5 Segundos:Cómo titular para la Web
Juan C. [email protected]
www.usando.infowww.tienes5segundos.cl