Preparación de textos HTML, PDF y MSWord

1. Preparación de textos HTML, PDF y MSWord Julio Takayama Silvia de Medeiros Cabral Oficina de Comunicación y Marketing BIREME - OPAS - OMS

2. Diseño Gráfico en páginas web • Clareza • Orden • Confiabilidad a las fuentes de información

3. Direccionar la atención • Priorizar información • Interacción mas eficiente Organización de gráficos y textos

4. Diseño Gráfico en páginas web La tarea básica del Diseño Gráfico es crear una jerarquía visual en la cual elementos son enfatizados y contenidos son organizados de forma logica y previsible

5. Diseño Gráfico es la administración de la información visual, utilizando herramientas de layout, tipografía e ilustración para conducir los ojos del lector a través de las páginas

6. Diseño Gráfico en páginas web • Consistencia en el diseño • Dimensiones de las páginas • Organización de la información en la página • Tipografia • Formatación de textos para web • Cascading Style Sheets (css) • Tipos de documentos y Tipos de navegación • Organización del sitio • Creación de archivos PDF

7. Consistencia en el diseño Establezca un esquema para guiar la inclusión de textos y gráficos, y lo utilice para crear ritmo y unidad visual en las páginas del sitio

8. Dimensiones de la página Area segura • Formate el documento para una pantalla de 640X480 pixels • La información principal debe estar disponible en el inicio de la página, para que el usuario no utilice las “scroll bars”

9. Dimensiones de la página Extensión de la página • Relación entre la página y el tamaño de la pantalla • Contenido del documento • ¿El usuario va quedar en linea, imprimir o bajar el documento? • ancho de banda disponible

10. Organización de la información en la Página Elementos indispensables • Título • Destaques • Navegación entre páginas • Título de la página • Contenido • Navegación en la página • Informaciones acerca de la página

11. Tipografia Diferencias entre documentos impresos y web P A P E L • 1200 dpi • Mas opciones de tipos • Resultado totalmente previsible • Muchos recursos Tipográficos W E B • 85 dpi • Menos opciones de tipos • resultado parcialmente previsible • Pocos recursos Tipográficos Todos los recursos tipográficos fueron desarrollados para papel y ahora son adaptados para web

12. Font Face Aa Aa S e r i f S a n s - S e r i f

13. Font Face S e r i f Times New Roman Arial S a n s - S e r i f Courrier Helvetica Serifa Verdana Georgia Monospace

14. Font Face Énfasis • Italico • Bold • Subrayado • Colores • Mayúsculas y minúsculas

15. Formatación de textos para web Excesivo Markup • La utilización excesiva de links, diferentes tipos de letras, colores y estilos puede destruir la homogeneidad que caracteriza el buen diseño gráfico

16. Cascading Style Sheets (css) Hojas de Estilo “Cascading Style Sheets” proporcionan control de • Textos • Destaques • Listas • y otros elementos de la página

17. Tipos de Documentos • HTML, PDF, MSWord • Imagenes • Multimediales

18. Tipos de navegación • Linear • Jerarquico • Grade • Red

19. Organización del sitio • No utilice los caracteres diacríticos para los nombres de archivos y directorios • Utilice solamente • las letras de A a Z, los números de 0 a 9, underscore y hifen • Nombre de archivos iguales para directorios de los diferentes idiomas • Observe que UNIX es “Case Sensitive” • Organice la estructura de directorios de forma lógica • Documentos y Aplicaciones en directorios diferentes

20. Documento en Papel Creación de archivos PDF Scanning Archivo Texto Bitmap Archivo Post Script Digital Sender Conversión PS - PDF Archivo PDF