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

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

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

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

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

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 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 Diseño Gráfico en páginas web

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

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” 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”

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 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

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 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 Organización de la información en la Página

Tipografia Diferencias entre documentos impresos y web 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 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 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

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

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

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

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 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

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

Tipos de Documentos HTML, PDF, MSWord Imagenes Multimediales HTML, PDF, MSWord Imagenes Multimediales

Tipos de navegación Linear Jerarquico Grade Red Linear Jerarquico Grade Red

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 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

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