Cuarta parte de la presentación que sirvió de base para las sesiones de introducción a la edición en línea de los másteres de edición de la Universitat Autònoma de Barcelona y de Editrain/Universidad de Alcalá (2009) Texto. Escribir para la web. Recursos tipográficos para la web.

1. WWW
para editores
Xavier Badosa
2009
(4)

2. multimedia

3. texto
multimedia
imagen estática
vídeo, audio

7. Escribir para la web
Crawford Kilian

9. mirada pasiva mirada activa

10. mirada pasiva mirada activa
lectura inmersiva vistazo general rápido

11. Jakob Nielsen, “F-Shaped Pattern For Reading Web Content”

12. lentitud cansancio impaciencia
Jakob Nielsen, “F-Shaped Pattern For Reading Web Content”

13. Brevedad y claridad en la redacción

14. Brevedad y claridad en la redacción
• Objetividad, evitar estilo promocional

15. Brevedad y claridad en la redacción
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla

16. Brevedad y claridad en la redacción
“Hit and run text”
Crawford Kilian
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla
• Redacción para la acción: activa, no pasiva. “Tú”, no “nosotros”

17. Brevedad y claridad en la redacción
“Hit and run text”
Crawford Kilian
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla
• Redacción para la acción: activa, no pasiva. “Tú”, no “nosotros”
• Pirámide invertida del periodismo: primero la conclusión

18. Brevedad y claridad en la redacción
“Hit and run text”
Crawford Kilian
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla
• Redacción para la acción: activa, no pasiva. “Tú”, no “nosotros”
• Pirámide invertida del periodismo: primero la conclusión
• Uso limitado de metáforas o de la ironía, o de pronombres

19. Brevedad y claridad en la redacción
“Hit and run text”
Crawford Kilian
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla
• Redacción para la acción: activa, no pasiva. “Tú”, no “nosotros”
• Pirámide invertida del periodismo: primero la conclusión
• Uso limitado de metáforas o de la ironía, o de pronombres
• Evitar localismos, uso de un castellano internacional

20. Brevedad y claridad en la redacción
“Hit and run text”
Crawford Kilian
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla
• Redacción para la acción: activa, no pasiva. “Tú”, no “nosotros”
• Pirámide invertida del periodismo: primero la conclusión
• Uso limitado de metáforas o de la ironía, o de pronombres
• Evitar localismos, uso de un castellano internacional
España / Extranjero

21. Brevedad y claridad en la redacción
“Hit and run text”
Crawford Kilian
• Objetividad, evitar estilo promocional
• Las frases deben ser necesarias, claras y de estructura sencilla
• Redacción para la acción: activa, no pasiva. “Tú”, no “nosotros”
• Pirámide invertida del periodismo: primero la conclusión
• Uso limitado de metáforas o de la ironía, o de pronombres
• Evitar localismos, uso de un castellano internacional
España / Otros países

22. Estructura a la vista

23. Estructura a la vista
• Párrafos cortos y bien separados

24. Estructura a la vista
• Párrafos cortos y bien separados

25. Estructura a la vista
• Párrafos cortos y bien separados

26. Estructura a la vista
• Párrafos cortos y bien separados
• Encabezar los fragmentos con títulos indicativos de su contenido

27. Estructura a la vista
• Párrafos cortos y bien separados
• Encabezar los fragmentos con títulos indicativos de su contenido
• Destacar los conceptos importantes

28. Estructura a la vista
• Párrafos cortos y bien separados
• Encabezar los fragmentos con títulos indicativos de su contenido
• Destacar los conceptos importantes
• Dar a las enumeraciones forma de lista

29. Estructura a la vista: párrafos cortos y bien separados,
encabezar los fragmentos con títulos indicativos de su
contenido, destacar los conceptos importantes, dar a
las enumeraciones forma de lista

30. Estructura a la vista
• Párrafos cortos y bien separados
• Encabezar los fragmentos con títulos indicativos de su contenido
• Destacar los conceptos importantes
• Dar a las enumeraciones forma de lista
• Si el texto es largo, incluir al principio un resumen
con la estructura general

31. División de la información extensa

32. División de la información extensa
• Uso de fragmentos coherentes

33. División de la información extensa
• Uso de fragmentos coherentes

34. División de la información extensa
• Uso de fragmentos coherentes

36. Recursos tipográficos

37. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)

38. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)

39. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)

40. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas

41. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas

42. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas

45. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces

46. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
Le animamos a darnos su opinión en
nuestra página de atención al
cliente, que puede encontrar aquí.

47. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
Le animamos a darnos su opinión en
nuestra página de atención al cliente.

48. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
Le animamos a darnos su opinión en
nuestra página de atención al cliente.

49. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
Le animamos a darnos su opinión.

53. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
• Cuidado con el justificado

54. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
• Cuidado con el justificado
El presente trabajo tiene por objeto dar a
conocer el efecto de las circunstancias
socioeconómicas en la calidad de la
información financiera.

56. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
• Cuidado con el justificado
• Evitar líneas de texto demasiado largas

57. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
• Cuidado con el justificado
• Evitar líneas de texto demasiado largas
Cuando el tren mixto descendente, núm. 65 (no es preciso nombrar la línea), se detuvo en la pequeña estación situada entre los kilómetros 171 y 172, casi todos los
viajeros de segunda y tercera clase se quedaron durmiendo o bostezando dentro de los coches, porque el frío penetrante de la madrugada no convidaba a pasear por
el desamparado andén. El único viajero de primera que en el tren venía bajó apresuradamente, y dirigiéndose a los empleados, preguntóles si aquél era el apeadero
de Villahorrenda. (Este nombre, como otros muchos que después se verán, es propiedad del autor.)

58. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
Cuando el tren mixto descendente, núm.
65 (no es preciso nombrar la línea), se
• Evitar las cursivas detuvo en la pequeña estación situada
entre los kilómetros 171 y 172, casi todos
los viajeros de segunda y tercera clase se
quedaron durmiendo o bostezando dentro
• No emplear subrayados si no es para enlaces
de los coches, porque el frío penetrante
de la madrugada no convidaba a pasear
por el desamparado andén. El único
viajero de primera que en el tren venía
bajó apresuradamente, y dirigiéndose a
• Cuidado con el justificado los empleados, preguntóles si aquél era
el apeadero de Villahorrenda. (Este
nombre, como otros muchos que después
se verán, es propiedad del autor.)
• Evitar líneas de texto demasiado largas
Cuando el tren mixto descendente, núm. 65 (no es preciso nombrar la línea), se detuvo en la pequeña estación situada entre los kilómetros 171 y 172, casi todos los
viajeros de segunda y tercera clase se quedaron durmiendo o bostezando dentro de los coches, porque el frío penetrante de la madrugada no convidaba a pasear por
el desamparado andén. El único viajero de primera que en el tren venía bajó apresuradamente, y dirigiéndose a los empleados, preguntóles si aquél era el apeadero
de Villahorrenda. (Este nombre, como otros muchos que después se verán, es propiedad del autor.)

59. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
• Cuidado con el justificado
• Evitar líneas de texto demasiado largas
• Familias sans serif se visualizan mejor que las con serif

60. Recursos tipográficos
Times New Roman 10
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
Cuando el tren mixto descendente, núm. 65
(no es preciso nombrar la línea), se detuvo
en la pequeña estación situada entre los
• Evitar las cursivas
kilómetros 171 y 172, casi todos los viajeros
de segunda y tercera clase se quedaron
durmiendo o bostezando dentro de los
coches, porque el frío penetrante de la
• No emplear subrayados si no es para enlaces
madrugada no convidaba a pasear por el
desamparado andén. El único viajero de
primera que en el tren venía bajó
• Cuidado con el justificado
apresuradamente, y dirigiéndose a los
empleados, preguntóles si aquél era el
apeadero de Villahorrenda. (Este
nombre, como otros muchos que después se
• Evitar líneas de texto demasiado largas
verán, es propiedad del autor.)
• Familias sans serif se visualizan mejor que las con serif

61. Recursos tipográficos
Times New Roman 10 Verdana 9
Cuando el tren mixto
descendente, núm. 65 (no es preciso
• Tipografía negra (u oscura) se detuvo en la
nombrar la línea), sobre fondo blanco (o claro)
Cuando el tren mixto descendente, núm. 65
(no es preciso nombrar la línea), se detuvo
pequeña estación situada entre los
en la pequeña estación situada entre los
kilómetros 171 y 172, casi todos los
• Evitar las cursivasviajeros de segunda y tercera clase se
kilómetros 171 y 172, casi todos los viajeros
de segunda y tercera clase se quedaron
quedaron durmiendo o bostezando
durmiendo o bostezando dentro de los
dentro de los coches, porque el frío
coches, porque el frío penetrante de la
• No emplear subrayadosade la madrugada no
penetrante
si no es para enlaces
madrugada no convidaba a pasear por el
convidaba pasear por el
desamparado andén. El único viajero de
desamparado andén. El único viajero
primera que en el tren venía bajó
de primera que en el tren venía bajó
• Cuidado con el justificado y dirigiéndose a los
apresuradamente, y dirigiéndose a los
apresuradamente,
empleados, preguntóles si aquél era el
empleados, preguntóles si aquél era el
apeadero de Villahorrenda. (Este nombre,
apeadero de Villahorrenda. (Este
como otros muchos que después se verán,
• Evitar líneas de texto demasiadoquedel
es propiedad del autor.)
nombre, como otros muchos
largas
después se verán, es propiedad
autor.)
• Familias sans serif se visualizan mejor que las con serif

62. Recursos tipográficos
Times New Roman 10 Verdana 9 Georgia 10
Cuando el tren mixto Cuando el tren mixto
descendente, núm. 65 (no es preciso descendente, núm. 65 (no es preciso
• Tipografía negra (u oscura) se detuvo en la
nombrar la línea), sobre fondo blanco (o claro)
Cuando el tren mixto descendente, núm. 65
(no es preciso nombrar la línea), se detuvo
nombrar la línea), se detuvo en la
pequeña estación situada entre los pequeña estación situada entre los
en la pequeña estación situada entre los
kilómetros 171 y 172, casi todos los kilómetros 171 y 172, casi todos los
• Evitar las cursivasviajeros de segunda y tercera clase se
kilómetros 171 y 172, casi todos los viajeros
viajeros de segunda y tercera clase se
de segunda y tercera clase se quedaron
quedaron durmiendo o bostezando quedaron durmiendo o bostezando
durmiendo o bostezando dentro de los
dentro de los coches, porque el frío dentro de los coches, porque el frío
coches, porque el frío penetrante de la
• No emplear subrayadosade la madrugada no
penetrante
si no es para enlaces
madrugada no convidaba a pasear por el
convidaba pasear por el
penetrante de la madrugada no
convidaba a pasear por el desamparado
desamparado andén. El único viajero de
desamparado andén. El único viajero andén. El único viajero de primera que
primera que en el tren venía bajó
de primera que en el tren venía bajó en el tren venía bajó
• Cuidado con el justificado y dirigiéndose a los
apresuradamente, y dirigiéndose a los
apresuradamente,
empleados, preguntóles si aquél era el
apresuradamente, y dirigiéndose a los
empleados, preguntóles si aquél era el empleados, preguntóles si aquél era el
apeadero de Villahorrenda. (Este nombre,
apeadero de Villahorrenda. (Este apeadero de Villahorrenda. (Este
como otros muchos que después se verán,
• Evitar líneas de texto demasiadoquedel
es propiedad del autor.)
nombre, como otros muchos
largas
después se verán, es propiedad
nombre, como otros muchos que
después se verán, es propiedad del
autor.) autor.)
• Familias sans serif se visualizan mejor que las con serif

63. Recursos tipográficos
• Tipografía negra (u oscura) sobre fondo blanco (o claro)
• Evitar las cursivas
• No emplear subrayados si no es para enlaces
• Cuidado con el justificado
• Evitar líneas de texto demasiado largas
• Familias sans serif se visualizan mejor que las con serif

66. El texto en la WWW
Recursos tipográficos. Elementos, entidades, estilos. Ejemplos
1. Guiones
Raya: — – Menos: − Guión blando: ­
2. Puntos
Punto alto, medio o centrado; topo: • · ‧ ⋅
Puntos suspensivos: …
3. Espacios
Espacio duro:   (CSS: white-space: nowrap)
Espacios de diversa extensión:      
4. Comillas
Latinas: « » Inglesas: “ ”
Simples: ‘ ’ Angulares: ‹ ›
Minutos (pies) y segundos (pulgadas): ′ ″
5. Caja alta
Versalita: <small>, CSS: font-variant: small-caps
Inicios: CSS :first-letter :first-line

67. WWW
para editores
Fin de la cuarta parte