Diseñando y Publicando Publicaciones Electrónicas Interactivas en el World Wide Web Curso

Diseñando y Publicando Publicaciones Electrónicas

Interactivas en el World Wide Web

Curso

Instructor

Renato M.E. Sabbatini, PhD

Núcleo de Informática BiomédicaUniversidad Estatal de Campinas

San Pablo, Brasil

sabbatin@nib.unicamp.br

http://nibgw.unicamp.br/~sabbatin

Objetivos Educativos

• Reconocer los problemas principales y técnicas involucradas en la publicación electrónica de periódicos médicos y revistas en el World Wide Web

• Proponer el plan, arquitectura y filosofía de una publicación interactiva sencilla

• Discutir los problemas principales relacionados a la aplicación, mantenimiento, promoción y indexación de una publicación on-line

Temas

• ¿Qué es una publicación electrónica ? • Publicaciónes electrónicas en Internet • ¿Qué es el World Wide Web ?• HTML: el idioma de Internet • Desarrollando un periódico on-line • Herramientas para desarrollo de la publicación • Publicando en el servidor • Promoviendo y poniendo la publicación en los catálogos y

índices

• Recursos y referencias adicionales

Referencias Básicas

• Estas diapositivas disponibles en:www.webpraxis.com/courses/epubs/slides

• Página Web del curso:www.webpraxis.com/courses/epubs/

Parte I

Publicaciónes Electrónicas

¿Qué es una Publicación Electrónica? (o: bits vs. átomos)

• La publicación electrónica es una tecnología para distribuir información en una forma que puede accederse y ser vista por una computadora

• La publicación electrónica usa medios de comunicación digitales y recursos para adquirir, almacenar y transmitir información de computadora a computadora

• La publicación electrónica extiende de varias maneras el concepto y los recursos de los medios de comunicación convencionales y impresos

Tipos de Publicaciones Electrónicas

• En medios de comunicación trasladable• Diskette, CD-ROM, videodisco, DVD, etc.,

• En redes de computadoras – Redes de acceso restringido (ej. intranets)

– Redes globales (ej. Internet)

• Híbridas – CD-ROMs actualizadas via red

– Conexión a una red de computadoras a partir de un CD-ROM

Tipos de Publicaciones On-line

• Publicaciones por tecnología de correo electrónico, vía listas de distribución o grupos de notícias ("broadcasting")

• Publicaciones por tecnología de FTP, vía transferencia de archivos (File Transfer Protocol)

• Publicaciones de tecnología WWW, vía protocolos de hipertexto (HTTP)

• Publicaciones de tecnología "push", vía webcasting

Tipos de Publicaciones On-line

• Publicaciones por tecnología de correo electrónico, vía listas de distribución o grupos de notícias ("broadcasting")

• Publicaciones por tecnología de FTP, vía transferencia de archivos (File Transfer Protocol)

• Publicaciones de tecnología WWW, vía protocolos de hipertexto (HTTP)

• Publicaciones de tecnología "push", vía webcasting

Un Periódico Típico Basado en el WWW

Tabla de Contenido

Un artículo

Las Ventajas de Internet Para el Publicador

• Público potencial grande• Disponibilidad universal • Para todas las plataformas de hardware/software • Bajo costo de producción • Eliminación de reproducción gráfica y correo

• Nuevas formas de presentación- animación gráfica, audio, video, interacción

Las Ventajas de Internet Para el Publicador (2)

• Integración con otros documentos y sitios WWW

• Fácil localización electrónica

• Reducción del retraso de publicación

• Sumisión electrónica de artículos por los autores

• Datos estadísticos extensos sobre accesos

Las Ventajas de Internet Para el Lector

• Costo bajo de acceso • Disponibilidad instantánea y global • Volumen de información más rico • Fácil transmisión y impresión • Información es más actualizada • Información es fácil de encontrar a través los

mecanismos de búsqueda • Interconexión de información en la Web

• Diálogo interactivo con autores y publicadores

Desventajas de Internet

• Problemas de protección de copyright

• Indefinición del modelo económico

• Problemas de seguridad de datos

• Conexiones lentas

• Es cada vez más difícil obtener visibilidad, debido a la cantidad grande de sitios y de información.

Algunos Proyectos de Publicación On-line Académicos

HighWire PressStanford

BioLineInglaterra eCampinas

Algunos Proyectos de Publicación On-line Académicos

e*pubCampinas

Algunos Proyectos de Publicación On-line Académicos

Proyecto e*pubRevistas Própias

www.epub.org.br

• Arquivos Brasileiros de Cardiologia• Revista da Sociedade de Cardiologia do Estado de

São Paulo• Revista Brasileira de Pesquisas Médicas e

Biológicas• Gastroenterologia Contemporânea• Estudos de Psicologia• OnLine Journal of Plastic and Reconstructive

Surgery

Proyecto e*pubRevistas Apoyadas

Parte II

La Tecnología

¿Qué es el WWW?

• Es un servicio disponible a través de Internet que permite la transmisión y acceso a documentos multimediales

• Usa un protocolo especial nombrado HTTP (HyperText Transfer Protocol)

• Usa una convención de direcciones electrónicas para los recursos en la red nombrada URL (Uniform Resource Locator)

¿Qué es un Protocolo?

• Es una convención o lenguaje que permite la comunicación entre cualquier dos computadoras a través de una red

• El protocolo principal usado por Internet es el TCP/IP (Transmission Control Protocol/Internet Protocol)

• Hay muchos otros protocolos que corren bajo el TCP/IP. Ejemplos: – SMTP: el Simple Mail Transfer Protocol

– FTP: el File Transfer Protocol

Uniform Resource Locator

• http://www.nlm.nih.gov/visible/sample.htm

Protocolo Host Directório Archivo

Formato de Dirección para el WWW:

La Arquitectura Cliente-Servidor

ClienteCliente

Computadora que recibe los datos

ServidorServidor

Computadora queenvía los datos

Ired

Software Cliente:Netscape, Internet Explorer

(browser)

Software Servidor:WWW Server

Protocolo

La Tecnología “Pull” (Pujar)

ClienteCliente ServidorServidorIInternet

¿ Qué es el browser ?

Un programa (cliente) que permite leer y extraer el contenido de páginas en el Web, usando el protocolo HTTP.

El programa tambien permite

identificar enlaces dentro de un documento y en otras computadoras, y saltar para otros sítios en Internet

(navegación).

El Software Cliente del WWW (Browser)

MenuHerramientasDirección

Área de exibición

Status

Tipos de Browsers

• Netscape Communicator• Microsoft Internet Explorer• Mosaic• Opera• etc.

Todos funcionan de manera similar y hoy están disponibles gratuitamente a través de Internet

¿ Qué es el enlace (“link”) ?

Es una frase o palabra, usualmente de un color diferente o subrayado, que

permite saltar a otros sitios o páginas en la misma computadora o en otras computadoras. Normalmente lo que se hace es "cliquear" encima de la

frase o palabra.

La Tecnología “Pull”Una Transacción HTTP (1)

ClienteCliente Servidorwww.nlm.nih.gov

Servidorwww.nlm.nih.govIInternet

Software cliente:Netscape, Internet Explorer

Software servidor:WWW Server

HTTP

http://www.nih.nlm.gov/visible/sample.htm BuscarConectarPedír

ClienteCliente Servidorwww.nlm.nih.gov

Servidorwww.nlm.nih.govIInternet

Http://www.nih.nlm.gov/visible/sample.htm ConfirmarTransferirCerrar

sample.htmlogo.gifreturn.gif

La Tecnología “Pull”Una Transacción HTTP (2)

Software cliente:Netscape, Internet Explorer

Software servidor:WWW Server

HTTP

La Esséncia de la Publicación On-line

• Debe producírse texto y imágenes con calidad tipográfica y gráficos on-line y imágenes de resolución alta

• Para reducir el tiempo de la transmisión, el protocolo de HTTP transmite desde el servidor un "script" de especificación de página muy más pequeño, en ASCII

• El browser monta una página gráfica con base en este “script”

Como Funciona el HTTP

ClientClient

Software delbrowser

Http://www.nih.nlm.gov/visible/sample.htm

sample.htmlogo.gifreturn.gif

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visible Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visible Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine

Script en HTML

Visualización hecha por el browser

Interconectando Documentos

• Puesto que una publicación debe subdividirse lógicamente en segmentos separados de información, debe haber una manera de conectarlos entre si, para permitir la navegación

• Esto es cumplido por medio del hipertexto (imágenes o texto que representan enlaces, o "links", a otras imágenes o texto)

¿Qué es el Hipertexto?

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visible Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine<P><A HREF=“imagem.htm”>Amostras</A><P><A HREF=“http://www.who.ch”>WHO</A>

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visible Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine<P><A HREF=“imagem.htm”>Amostras</A><P><A HREF=“http://www.who.ch”>WHO</A>

amostra.htm

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>Visible Human: Amostras</H1><BR>Nesta página você poderá achar algumasamostras de imagens geradas pelo Projeto“Ser Humano Visível” em três dimensões.

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>Visible Human: Amostras</H1><BR>Nesta página você poderá achar algumasamostras de imagens geradas pelo Projeto“Ser Humano Visível” em três dimensões.

imagem.htm

¿Qué es el HTML?

• Es un lenguage para la especificación de documentos (HyperText MarkUp Language)

• Especifica para el browser lo elementos de una página (texto, imágenes, etc.) y donde y cómo ellos deben darse

• Un archivo del texto que tiene la extensión .HTM contiene etiquetas (“tags”) demarcadoras entre los caracteres < y >

• El browser interpreta estas etiquetas y comandos y monta la página en la pantalla.

Los Elementos del HTML

• Etiquetas para la definición del documento: el título, encabece, cuerpo, etc.,

• Etiquetas para la definición del texto: los párrafos, colores, tamaños, conjunto de fuentes de caracteres, énfasis, etc.,

• Etiquetas para poner imágenes, sonidos y películas • Etiquetas para definir enlaces

• Etiquetas para definir tablas, formularios, etc.,

Formatos de Datos Comunes

HTMLHyperText Markup Language

Browser

SGMLStandard Generalized

Markup LanguageAplicaciones Auxiliares

PDFPortable Data Format

Aplicaciones Auxiliares

Formato Visualizado por:

ASCII Browser

PostScript Aplicaciones Auxiliares

RTFRich Text Format

Aplicaciones Auxiliares

TXT

HTM

SGM

PSP

PDF

RTF

Tipo

Ejemplo de Formato de Datos: ASCII

Ejemplo de Formato de Datos: PDF

Preparando los Aplicativos Auxiliares

Las Ventajas del Adobe PDF

• Es un lenguage de descripción de páginas • Permite un control total sobre la formatación de páginas (mucho

mejor que HTML) • Un archivo de PDF puede ser producido automáticamente por el

PageMaker • La visualización fuera de línea o en línea es realizada por el mismo

programa (Acrobat Reader), con muchas funciones adicionales • El Reader está en el dominio público y disponible para bajar via red

• Permite un hardcopy de alta calidad de publicación

Las Desventajas del Adobe PDF

• El usuario debe conseguir y instalar al Acrobat Reader

• El artículo entero se guarda en un solo archivo no comprimido

• Por lo tanto, el usuário debe esperar hasta que todo el sea transmitido

• Las palabras del texto no son puestas en un índice accesible a los mecanismos de búsqueda

Adobe PDF: Conclusiones

• PDF es un método eficaz para obtener calidad de la publicación on-line, con todas las capacidades tipográficas y gráficas del PageMaker

• Es fácil para el productor, pero difícil para el usuario

• Probablemente la mejor manera es ofrecer ambas versiones on-line: HTML y PDF

¿Qué Es el SGML?

• Es un lenguage generalizado de marcación de documentos, mucho más poderoso que el HTML,

• El HTML es un subconjunto del SGML

• Requiere un browser especial o un plug-in para los browsers de HTML existentes

• Difícil de usar, pero muy interesante para definir elementos de la publicación

• Todavía no tiene mucho uso

Otros Formatos Portátiles

• Microsoft Windows HELP

• Word Perfect Envoy

• Farallon Replica

• Common Ground

• Folio VIEWS

• Macromedia Shockwave

• Microsoft Word

Multimedios Interactivos: ShockWave

Multimedios Interactivos: ShockWave Flash

Ejemplo: Un Periódico en

PDF/HTML

Home Page(Tapa)

Tabla de Contenido

Ejemplo: Un Periódico en

PDF/HTML

(2)

Artículo enTexto Completo

Ejemplo: Un Periódico en

PDF/HTML

(3)

Resúmen enHTML

Ejemplo: Un Periódico en

PDF/HTML

(4)

Ejemplo: Un Periódico en PDF/HTML

(5)

Artículo en PDF

Estructura de Interconexión

Tabla deContenido

Tabla deContenido

ResúmenResúmen

Texto HTMLTexto HTML

Texto PDFTexto PDF

Software Cliente:PointCast, BackWeb, etco plug-in para el browser

Software servidor:WWW Push Server

(e.g., NetCaster, Castanet)

La Tecnología “Push” (Empujar)

ClienteCliente ServidorServidorIInternet

La Tecnología “Push”

• El push mas antigo: el email común (SMTP) • Email reforzado: la visualización del HTML • Extensiones Multimediales del Correo Internet

(MIME) • Auxiliares para los browsers: Netscape

NetCaster, Webchannel para el Internet Explorer, etc.

• Clientes especiales: BackWeb, PointCast, etc.,

Technología “Push”: PointCast

PointCast: Personalización de Canales

PointCast: Ahorrador de Pantalla

Tecnologías Activas

• CGI: Common Gateway InterfaceEjecución de programas en el lado del servidor

• JavaScript, Java e ActiveXEjecución de programas (“applets”) en el lado del

cliente

• Dynamic HTML, HTML ScriptExtensiones dinámicas a el HTML

Programación CGI

ClienteCliente ServidorServidor

HTTPHTTPCGI-BIN

HTTPD

HTML

Common Gateway InterfaceUna manera de correr programas en el servidor (ubicados en el

CGI-BIN) e comunicandose con el servidor HTTP

Tareas CGI Comunes en una Publicación Electrónica

• Contestación automática al email y formulários • Generación automática de páginas personalizadas • Acceso a mecanismos de búsqueda internos • Acceso por identificador y contraseña • Acceso y mantenimiento de bancos de datos • Implementación de contadores de acceso • Accesos por cliqueos (ej., estadísticas de anuncios) • Funcionamiento de charlas on-line, subscripción de listas,

etc.

Programación Java

ClienteCliente ServidorServidor

HTTPHTTP

HTTPDHTML

JAVA AppletsPequeños programas escritos en JAVA que se descargan junto com la

página solicitada y que ejecutan en la computadora cliente

JAVA JAVA

JavaScript

Programa interpretado y que es incluso en el código HTML bajolas etiquetas <SCRIPT> y </SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!-- hidevar tot=0;var rt=0;function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr));}</SCRIPT>

Java Applet

Programa compilado (ejecuble) que es bajado junto con la página HTML, como un binário

Tareas JAVA Comunes en una Publicación Electrónica

• Marquesinas, estandartes animadas y gráficos • Mapas sensibles "inteligentes” • Procesamiento de formulários del lado del

cliente • Aprobación de campos en formulários • Encuestas interactivas • Charlas (“chats”) basadas en el Web

Acercamientos Híbridos

• La publicación principal es basada en HTTP, los resumenes y anuncios son enviados a los lectores vía email o webcasting

• La publicación principal es basada en FTP, se colocan los resumenes en un website o se envían los artículos vía email, newsgroups o webcasting

• La publicación principal es basada en email, newsgroups o webcasting, pero un website tiene los sumários y apuntadores.

Ejemplo del Acercamiento Híbrido:Johns Hopkins InteliHealth

Anúncio porEmail

Llamada Directa a el Artículo en el Web

Johns Hopkins InteliHealth

Parte III

Publicando en Internet

Publicando en Internet

es inmediato es global es interactivo es dinámico es multimedial.

Un salto imaginativo es necesario para entender las implicaciones de la publicación en Internet, y requiere la apreciación que:

Tipos de Publicaciones On-Line

• Versión on-line restringida de periódicos impresos

• Texto completo (full text): la versión on-line de periódicos impresos

• Periódicos exclusivamente on-line

Tipos de Publicaciones On-Line (1)

Versión on-line restringida de periódicos impresos

• Tapa, información y tabla de contenido

• Ídem, más los resumenes

• Ídem, más artículos seleccionados

• Casi siempre el acceso es libre

• Actua como “presencia Internet” o anuncio para la versión impresa

Versión on-line en texto completo de periódicos impresos

• Tapa, información y tabla de contenido • Artículos en texto y imágenes completas • Versión parcial, llena o extendida de la forma impresa • Acceso libre o pagado • Pueda actuar como anuncio o ser un emprendimiento

completo en si mismo

Tipos de Publicaciones On-Line (2)

Periódicos exclusivamente on-line

• Tabla de contenido, artículos de texto completo y resúmenes

• Uso de multimedios y interactividade,

• Publicación periódica o en flujo continuo

• Acceso libre o pagado

• Problemas de acceptación por los autores

Tipos de Publicaciones On-Line (3)

Problemas de Periódicos Exclusivamente On-line

• Los autores de buena calidad son duros de encontrar, porque dan preferencia a los periódicos impresos

• El medio es demasiado joven, todavia no bien establecido

• Hay dudas y desconfianza por parte del establecimiento científico

Dudas Principales

• Protección de derechos autorales• Protección de datos• Estabilidad de largo plazo del medio• Temas de revisión por los pares• Reconocimiento de los autores• Metodología de citas• Indexación internacional• Modelo económico

Tipos de Modelos Económicospara Publicaciones Electrónicas

• Acceso totalmente libre y sin restricción • Acceso libre vía registro de lectores, con

acceso por contraseña • El rédito se deriva de patrocinadores directos

y indirectos o por anuncios pagados • Subscripción mensual o anual pagada • Precios por accesos a artículos individuales

Pasos Necesarios para Publicar un Periódico en Internet

• Organizando Ideas

• Desarrollando el Proyecto

• Diseñando la Publicación

• Testeando la Publicación

• Promoviendo la Publicación

• Manteniendo la Publicación

Etapas en el Proyecto

Processo de PublicaciónProcesso de Publicación

Processo de DesarrolloProcesso de Desarrollo

Processo de ComposiciónProcesso de Composición

Etapas en el Proyecto 1. El Proceso de Desarrollo

• Planeamiento y fase de requisitos

• Fase de prototipación rápida

• Fase de especificación

• Fase de diseño

• Fase de aplicación

La Planificación del Proceso de Desarrollo: Las Cinco Preguntas

• ¿Por qué?

• ¿Qué?

• ¿Dónde?

• ¿Cuándo?

• ¿Cómo?

El Proceso de Desarrollo Planificación

• ¿Por qué? Objetivos de la publicación, para que y para quien

• ¿Qué? Medio y estructura, tipo de publicación

• ¿Dónde? La ubicación de la publicación, proveedor de acceso

• ¿Cuándo? La fecha inicial de publicación, fechas críticas, periodicidad

• ¿Cómo? Requisitos y necesidades, personal, presupuesto, etc.

El Proceso de Desarrollo Requisitos de la Publicación

• Propósito

• Alcance

• Público

• La duración de desarrollo, fechas críticas

• Tamaño del proyecto

• Presupuesto del proyecto

Ejemplo: Revista Intermedic

• Propósito: un periódico bimestral, en ediciones on-line y impresa, sobre las aplicaciones y usos de Internet en Medicina y Salud

• Alcance: un proyecto de porte mediano, con un enfoque ancho sobre la tecnología y sus aplicaciones, para no-especialistas,

• Público: los usuarios de Internet, principalmente de la comunidad de salud (profesionales y estudiantes)

Ejemplo: Requisitos para la Revista Intermedic (1)

Ejemplo: Requisitos para la Revista Intermedic (2)

• Duración: no más de 3 meses para el desarrollo. Fecha topada: segunda semana del mayo 1997.

• Tamaño del proyecto: la edición bimestral sin más de 6-7 secciones y nada más de 40 páginas en longitud. Versión impresa con 20 páginas.

• Presupuesto del proyecto: la versión on-line y impresa: US$7,000/edición, no incluyendo impresión y distribución de la versión impresa

Necesidades Inmediatas para Empezar una Publicación

• Capital de trabajo • Tiempo necesário por semana • Hardware para desarrollo • Espacio en disco duro del hardware de desarrollo • Herramientas de software para desarrollo • Recursos on-line

• Personal

Ejemplo para Necesidades Inmediatas: Revista Intermedic

• Capital de trabajo: ninguno (sueldo universitario) • Tiempo necesário: 15-20 horas/semana • Hardware: Pentium PC 166 MHz MMX, 32 Mb RAM,

disco de 2.1 Gb, monitor 17” SVGA en colores, lectora y grabadora de CD-ROM. Escáner de página en colores

• Software: Windows’95, Netscape 3 Gold, Editor FlexEd, PaintShop Pro, WS FTP, PageMaker 6.0

• Personal: editor-jefe, editor asociado, empleado de entrada de datos, diseñador Web, traductor

Elementos de Largo Plazo para una Publicación On-Line

• Web hosting (servidor dónde se ubicarán las páginas)

• Composición de un Consejo Editorial • Patrocinadores y/o anunciantes • Autores fijos y temporarios (contractados) • Fuente financera y asignación del presupuesto • El software y los recursos on-lines para la

promoción del sítio

Ejemplo de Elementos de Largo Plazo: Revista Intermedic (1)

• Web Hosting: servidor de WWW de la universidad. Ningún cargo

• Consejo Editorial: por invitación, representativo, con expertos nacionales y internacionales en Internet,

• Patrocinador: anuncio exclusivo y arreglo de distribución con un laboratório farmacéutico (impreso y on-line)

• Autores: por invitación, algunos componen el consejo editorial. Inicialmente, ningún free-lancer o autores pagados

Ejemplo de Elementos de Largo Plazo: Revista Intermedic (2)

• Financiación: distribución y acceso libres (ninguna subscripción pagada)

• Presupuesto: 70% para redacción y autores, 30% para gastos auxiliares.

• Promoción: herramienta de promoción automatizada (Spider) para 250 directorios generales y mecanismos de búsqueda, labor manual para los directorios especializados y listas del email.

Lo Que Se Debe y No Se Debe Esperar en una Publicación

Electrónica

• No espere fluir fácilmente el proyecto • No espere que los primeros esfuerzos resulten

perfectos • Espere hacer proyectos múltiples • Espere revisar y pruebar el producto muchas veces

hasta que estea listo

• Espere alcanzar un punto donde la mejora adicional no es rentable

El Proceso de DesarrolloPrototipación Rápido

• Defina la estructura global de la publicación – Secciones

– Directorios

– Flujo de navegación

• Lleve a cabo un esqueleto del funcionamiento rápidamente en HTML

• En el protótipo, utilize solamente texto, enlaces simples, texto farsante

• Necesario para deducir las necesidades reales y herramientas de software

• Trampolín para pensar y extender a las fases posteriores

• Propósito de demostración

El Proceso de DesarrolloNecesidad de Prototipación Rápido

Um Prototipo Rápido

La Versión Final

El Proceso de Desarrollo Especificación

• Esquema (layout) • Componentes de la publicación • Índices, páginas auxiliares, páginas de búsqueda y

archivamiento de información• Redactores fijos • Ciclo de producción

• Herramientas de la producción

Basado en el prototipo y su evaluación, el objetivo de esta fase es definir en más detalle:

Ejemplo de EspecificaciónRevista Intermedic (1)

• Sin cuadros ("frames")

• Artículos totalmente contenidos en una página web

• Esquema de una columna de texto

• Estandartes de navegación en el encabece y en el pié de las páginas, usando botones gráficos

• Navegación lineal y no-lineal

• Página inicial (home-page) general

• Una tabla de contenido separada para cada número

• Jerarquía de directorios

Jerarquía de Directorios

Raíz

Número

Sección

ArtículoElementos

Fijos

Estructura de la PublicaciónSecciones del Directorio Raíz

• Página inicial

• Los publicadores y editores

• Lo que es la revista

• Consejo editorial

• Instrucción para los autores

• Página de búsqueda

• Índice cumulativo

• Página de ayuda

• Créditos

• Catálogo de recursos Internet

• Glosario Internet

• Libro de visitas

• Email

• Icono del publicador

• Icono del patrocinador

• Premios y honores

• Lo que hay de nuevo en la publicación

• Aviso de copyright

Estructura de la Publicación: Home Page

• Es la tapa de la revista y la primera página de acceso Web

• Visualiza el logotipo gráfico de la revista • Tiene enlaces a las secciones permanentes al nivel

de la raíz y a los números (fascículos) presentes y pasados

• Identifica el publicador, patrocinadores, organizaciones de apoyo, premios, etc.

• Cambia raramente.

Estructura de la Publicación: Información Permanente

• Los Publicadores: identifica y describe la organización responsable por la publicación, otros proyectos, links, etc.,

• La Publicación: describe objetivos, estructura, secciones, copyright, etc.,

• Consejo Editorial: nombres, funciones, CVs, fotografías, home page, email, etc.,,

• Ayuda: como usar la publicación, botones, navegación, etc.,

• Instrucciones para los Autores

Estructura de la Publicación: Secciones de Acceso

• Fascículos presente y pasados: a través de enlaces de texto o gráficos que permiten la navegación a las tablas de contenido de cada número

• Índice Cumulativo: contiene enlaces de texto a todos los artículos pasados, categorizados en secciones. Si es grande bastante, puede subdividirse en páginas separadas, lógicamente organizadas

• Página de búsqueda: da acceso a un mecanismo de búsqueda local que usa palabras-clave. Puede incluir mecanismos en Internet.

Mecanismo de Búsqueda

Índice Cumulativo

Estructura de la Publicación: Información del Contacto

• Libro de Visitantes: provee un formulário on-line para el registro del lector, envio de comentarios y preguntas, etc.,

• Email: remete a la facilidad de email del browser, con una dirección predeterminada para el contacto con el editor

• Patrocinadores y Anunciantes:logotipos, con respectivos enlaces de texto o imagen a sus sitios en Internet

• Editor y organización responsable:con logotipos y enlaces

Estructura de la Publicación: Información Auxiliar

• Estadísticas de acceso del Web y contador • Glosario de términos técnicos usados en la publicación • Catálogo de enlaces pertinentes a los recursos similares

en el Internet • Lo que hay de nuevo en la revista: una lista identificada

por fechas, con adiciones y modificaciones

• Los premios y reconocimiento recibidos por la revista: los logotipos y enlaces, comentarios de lectores, etc.,

Estadísticas de Acceso

• Archivos, bytes, hits, pageviews por dia, mes, año, etc.

• Archivos más y menos consultados

• Carga horária y semanal, horas de pico

• URLs visitantes• Estadísticas por tipo de

domínio y país

Estadísticas de AccesoProgramas de Análisis

• Basado en los archivos de registro de accesos disponibles en el servidor (logs)

• Softwares comerciales y sharewares– HTTPAnalyze– NetIntellect– etc.

• Servícios on-line de auditoría y análisis

Estructura de la PublicaciónTabla de Contenido

• Logotipo, encabezamiento, fecha

• Lista de todas las secciones y artículos en cada sección

• Enlaces directos para cada artículo

• Título, autores, instituición, contacto

• Patrocinadores, publicadores

• Botones de acceso a otras partes de la publicación

Pasos en el ProyectoDiseño

• Plan visual de la publicación

• Identificación visual (logomarca, fundos, botones, líneas de separación, fuentes de letras)

• Estructuración de cada tipo de página (tapa, índices, artículos, etc.): cuadros, colores, encabezamiento, columnas laterales, etc.)

Diseño de Home Page (1)

Diseño de Tabla de Contenido (2)

Diseño deArtículo (3)

Diseño de Home Page (2)

Diseño de Tabla de Contenido (2)

Diseño deArtículo (1)

Diseño de Home Page (1)

Integrando las Citas Bibliográficas a MEDLINE Referenciade texto

Lista de citas

RegistroMEDLINE

Como Integrarse a PubMed (2)

Formularios on-linepara buscar el UIDde una cita

Como Integrarse a PubMed (3)

http://www.ncbi.nlm.nih.gov/htbin-post/PubMed/wgetcit?journal=Mol.+Gen.+Mikrobiol.+Virusol.&volume=12&page=19&author=Cherepanov+PA&display=citation&format=html

Declaración para link de cita: búsqueda booleana

http://www.ncbi.nlm.nih.gov/htbin-post/Entrez/query?db=m&form=6&uid=88055872&dopt=r

Declaración para link de cita: Unique Identifier (UID)

Etapas en Desarrollo del Proyecto: Proceso de la Composición

• Esquematizar

• Investigar

• Componer

• Evaluar

• Revisar

• Corrigir

Herramientas de Software para Composición HTML

• Editores WYSIWYGNetscape, FrontPage, WebWeaver

• Editores de código HTMLFlexEd, HotDog, HotMetal

• Uso de modelos

• Use of hojas de estilo

Editor WYSIWYG (Netscape)

Editor de Código HTML (FlexEd)

Métodos de Composición

• Composición con un software de procesamiento de palabras, con inserción manual de códigos HTML, o vía RTF

• Conversión de HTML automáticaMS Word Office 97, PageMaker 6/7, etc.

• Composición directa o cut/paste en un editor de HTML o WYSIWYG

Softwares Utilitários

• Validadores e correctores de HTML• Programas para renombramiento, búsqueda y

substitución automática de texto en lote • Herramientas de reducción de tamaño de

texto y imágenes • Programas de diagnóstico de enlaces• Programas de conversión automática de

banco de datos a páginas HTML

Softwares Utilitários (2)

• Consultores de combinación y selección de colores

• Programas para inserción de fechas y control de versiones

• Comprobadores de ortografia y gramática

FILEMOD

Modificación en Lotes

Selección de Colores y Fundos

HTML Color Wizard

Organización de Directórios

LIKSE

Sítios en Internet con Software para Diseñadores Web

• Tucowswww.tucows.com

• Microsoft Site Builder Home Pagewww.microsoft.com/sitebuilder/

• WebGaragewww.webgarage.com

• WebLintwww.weblint.com

Parte IV

Trabajo con Multimedia

Formatos de Imágenes en el Web

Formato Visualizado por:

GIFGraphic Interchange Format

Browser GIF

Tipo

JPEGJournalist’s Photo Experts Group

Browser JPG

PNGPortable Network Graphics

Browser (parcialmente) PNG

PCX, TIF, BMP Aplicativos Auxiliares ---

Adquisición de ImágenesEscáner

• Toma página A4 o mayor

• Resolución ajustable (75 dpi para Web)

• Número de colores ajustable (256 para GIF, millones para JPG)

• Kit de transparenciapara cromos/raios-x

Adquisición de ImágenesCamara Digital

• No es adequada para documentos, fotos existentes, transparencias

• Resolución fija• Para sacar fotos

rapidas, reportaje• Precios y calidad muy

variables

Herramientas de Trabajo con Imágenes

• Creación y edición de imagenes estáticas: Adobe PhotoShop, MS Image Composer, PaintShop Pro, CorelDraw, Corel PhotoPaint

• Edición de imágenes animados:GIF Construction Set, Image Composer

• Conversión de formatos de imágenes:Aardvark, PaintShop Pro

• Edición de mapas sensibles:MapEdit, MapIt!

• Creación y edición de videos:RealPublisher, RealConverter, Adobe

Adobe PhotoShop

Paint Shop Pro

Administración de Catálogos de Imágenes

Softwares que permitem la catalogación de directorios de imágenes de vários tipos e su visualización rápida y selección

• ThumbNail

• PaintShop Pro Browser

• Piccolo

• Corel Multimedia Manager

Paint Shop Image Browser

Map Edit

Animación de GIFs

WWW GIF Animator

Tipos de Imágenes en Línea

• Ninguna imagen in-line, enlace de texto para

llamar el imagen

• Imágenes in-line completas

• Imágenes en miniatura, con enlace para llamar

imágen completa

Link de Texto para Imágen

Texto principal conlink de texto

HTML separadocon imágen

Imágens en Línea Integradas al Texto

Imágenes en Miniatura (Thumbnail)

Texto principalcon imagen miniatura

HTML separadocon imágen mas grande

Imágenes en LíneaUna Comparación

• Sin imágenes en línea, link de texto – Fácil de programar– Acceso más rápido al documento– Estética muy sencilla

• Imágenes integradas al texto– Estética profisional, similar a versión impresa– Acceso más lento al documento

• Imágenes en miniatura– Mejor balance entre velocidad y estética

Formatos de Video en el Web

• AVI: AudioVisual InterchangeFormato própio de MS Windows sin compresión

• MOV, QT: Movie, QuickTimeFormatos no estándar, por Apple

• MPEG: Motion Picture Especialists GroupFormato estándar con compresión hasta 1:30

Formatos de Video en el Web (2)

• RA: RealMediaFormato “streaming” no estándar, con alto nivel de compresión

• Otros formatos “streaming”Vxtreme, etc.

Streaming Media

Visualizacióncontínua de los

paquetes de audio y/ovideo

Envía archivo de audio y/o video

en paquetes pequeños y seriales

Cliente Servidor

Plug-Ins para Videos

Apple QuickTime

Windows Media Player

Plug-Ins para Videos (2)

RealAudio/RealVideo Player

Formatos de Audio

• WAV, AIFF, AUTodo el sonido es digitalizado en un solo archivo, por lo tanto debe esperarse hasta que venga completamente para empezar a tocar. No necesita un plug-in especial, y es muy fácil de producir

• RealAudio (RA)El audio es trasmitido en pequeños segmentos, que se tocam en medida que vienen del servidor. Grado alto de compresión. Necesidade de un servidor especial y plug-in en el cliente

Edición de Sonidos Digitalizados

Softwares para Edición de Sonidos

• Creative WaveStudio

• GoldWave

• Cool Edit

• etc.

Casi todos los kits multimediales para PCs vienen con una o más herramientas.

Audio Player Plug-Ins

Estación Multimedial para Creación de Publicaciones Electrónicas

• Pentium PC 233 o Macintosh con 32 Mb RAM y monitor 17” SVGA en colores

• Conectividade rápida a Internet • Capacidad multimedial completa: CD-ROM, altavoces,

micrófono, etc., • Cámara digital • Escáner de página colorido con equipo de transparencia • Grabador de cintas DAT y SuperVHS

• Registrador de CD-ROM

Parte V

Publicación y Control de Calidad

Pasos en el Desarrollo del Proyecto: El Proceso de la Publicación

• Revisión

• Adición de los enlaces

• Teste de la cópia final (master)

• Uploading (cargando en el servidor)

• Comprobación de la copia del servidor

• Corrección y Refinamiento

El Proceso de Uploading

Estación deDesarrollo

Estación deDesarrollo Servidor WWWServidor WWW

FTP

Cópia Maestra Cópia del Servidor

• Software FTP Dedicado• Mecanismo de Publicación Netscape• Publicación MS FrontPage

AccesoRestringido

WS FTP para Windows 95

WS FTP para Windows 95

Publicación desde el Netscape

El Proveedor de Sítios Internet

• Una computadora conectada permanentemente a Internet, con dirección fija y software completo para servícios (HTTP, FTP, Email, Listserv, etc.)

• Domínio lógico vs. domínio físico– el sítio www.socesp.org.br es lógico– el IP no. 200.134.43.1 es físico– un domínio lógico puede estar en qualquiera

domínio físico

Seleccionando el Proveedor

• Domínio própio– Necesario registro en el InterNIC y en el registro de

domínios del pais– Puede ser qualquiera nombre no registrado

• Web hosting– Seleccionar por ubicación, estabilidad, velocidad,

precio y recursos ofrecidos– Domínios COM muy baratos hoy dia– Número muy grande de proveedores

Búsqueda de Nombres de Domínio

www.internic.net

Ejemplo de Proveedor (1)

• www.ahnet.net: proveedor norteamericano Affinity Corp., con conexión de 166 Mbsec (OC3)

• Precio basico: 19.90/mes a 49.90/mes

• Registro InterNIC: US$ 100 por dos años, US$ 50 por año adicional

• Servicio básico: 25 Mb/disco, 10 Gb transmissión/mes, 10 cuentas de email

Ejemplo de Proveedor (2)

• Servidor Web• Servidor FTP• Mailing lists• Cuentas email• CGI-BIN• Contadores de acceso• Tienda electrónica• Servidor seguro (SSL)

• Soporte técnico• Control panel vía Web• Procesador formularios• Contestadores

automáticos• Estadísticas acceso• Servidor RealAudio• Facturación vía tarjeta de

credito VISA

Pasos en el Proyecto de DesarrolloPruebas de Navegabilidad

• Navegación interna en una página

• Mecanismos para pasar páginas

• Componentes de indice

• Componentes de búsqueda

• Componentes multimediales

• enlaces externos

• Otras referencias cruzadas y enlaces

Prueba de los Componentes de Acceso a Páginas

• Capítulos y secciones previos

• Capítulos y secciones posteriores

• Acceso a home-page

• Página anterior

• Página posterior

• Ultima página

• Vuelver a una página

Metodologias de Prueba de Navegación

• Software de comprobación automático:Para probar enlaces rotos y enlaces a los archivos locales (Ex.: FrontPage, HTML PowerTools, CyberLinks). Informes de errores.

• Comprobación manual: Necesario para ver si los enlaces van a la referencia apropiada. Use un acercamiento sistemático.

• Informes de enlaces rotos hechos por usuarios

Software para Prueba de Links

CyberSpider

Software para Prueba de Links: Resultados

Prueba de Navegabilidad en el Servidor

• Siempre deben probarse dos veces la navegación y los enlaces: primero en la copia de la computadora local de desarollo, después de que se terminó el producto; y después en el servidor donde se provee la publicación.

• Use un acercamiento sistemático y rápido para corregir errores del enlace y republicar el archivo correspondiente. Use un checklist derivado de la comprobación automatizada y manual

• Mantenga una sincronización entre las copias de la computadora de desarollo y servidor

Pasos en el Proyecto de Desarrollo: Prueba en Campo (1)

• Encuesta/QuestionarioObjetivo: Obtener la opinión del públicoMétodos: Formulario on-line o email

• Observación DirectaObjetivo: Mostrar como los usuarios están usando realmente la publicación.Métodos: Narrativa de navegación, esquema de teste, análisis automática de accesos al servidor, reportajes despues del test.

Formulário On-Line de Lector

• Pruebas de LecturaObjetivo: evaluar qué bien los usuarios entienden el contenido de las publicacionesMétodos: encuestas on-line, opinión espontánea

• Revisiones EspecializadasObjetivo: averiguar qué los críticos profesionales piensan de la publicación. Métodos: Revisiones publicadas, inducción.

Pasos en el Proyecto de Desarrollo: Prueba en Campo (2)

Prueba de Usabilidad

• Los usuarios pueden encontrar una sección o artículo específico dentro de un tiempo dado ?

• Los usuarios pueden encontrar información específica dentro de un tiempo dado ?

• Los usuarios pueden navegar o vuelver a determinados puntos, sin se perder ?

• Los usuarios pueden decidir seguir un enlace o no, con base en información del contexto ?

• Los usuarios pueden entender los recursos de la navegación sin leer la textos de ayuda ?

La Ergonomía de una Publicación (1)

• Sobretodo, considere la psicología del lector

• Algunos factores psicológicos para el éxito de una publicación electrónica son: • consistencia

• familiaridad• cierre• donde está el lector, para onde se dirije• quanto falta para terminar algo• debe ser fácil y divertido de usar

La Ergonomía de una Publicación (2)

• El plan visual debe ser limpio, atractivo y simple, • Mantenga consistencia de fondos, botones,

esquema y conjuntos de caracteres a lo largo de toda la interfaz visual

• Mantenga consistencia de navegación • Siempre muestre donde está el lector • Evite usar animaciones y texto cintilante • Evite usar demasiados enlaces

• Evite (ab)usar de cuadros y columnas

• Use fondo blanco y un conjunto de caracteres bien contrastante, cuando posible

• Evite usar conjuntos de caracteres exóticos

• Reduzca los tiempos globales de carga de páginas tanto como posible

• Evite demasiados gráficos

• No segmente la información demasiado

La Ergonomía de una Publicación (3)

Como Hacer que Regresen Siempre los Lectores

• Permita el registro on-line del usuario y use el banco de datos para los anuncios por email

• Ofreza registro automático para servicios de aviso de cambio de páginas

• En caso de que la publicación es periódica, mantenga estricta obediencia a las fechas programadas de publicación

• Anuncie en un número la fecha de publicación del próximo número

• En caso de que la publicación es continua, actualize la publicación siempre en un dia fijo o que sea de fácil recuerdo

• Conteste rapidamente a los emails de los lectores

Como Hacer que Regresen Siempre los Lectores

Anuncios Comerciales

• Debe adaptarse a las peculiaridades del medio • Las formas prevalecientes actuales son los

estandartes y logotipos clickables • Anuncios que toman toda una página o que sean

muy conspicuos son considerados desagradables y menos tolerados

• Las tasas de anuncio varían mucho y dependen del tráfico y de la importancia de la publicación

Anuncio con link

Home pagedel patrocinador

Informaciónde producto

Ejemplos de Anuncios

Nuevas Caracteristicas de los Anuncios On-Line

• enlaces al sitio del anunciante • Anuncios animados (GIFs) • Anuncios funcionales: cajas de búsqueda, mapas

sensibles, etc. • Rotación del anuncio aleatorizada • Anuncios condicionales a palabras-clave o sección • Servicios de intercambio de estandartes

• Pueden ser documentados los accesos a anuncios

Parte VI

Indexación y Promoción de la Publicación

Promoción

• Internet es un mundo completamente distinto de las publicaciones impresas; por consiguiente requiere estrategias y tácticas especializadas de promoción, comercialización y venda de un nuevo periódico

• Las técnicas de promoción sistemáticas son obligatorias y requieren conocimiento y software o servicios especializados

Mecanismo de Búsqueda

por Palavras-

Clave

Catálogo o DirectórioOn-Line

Promoviendo el Periódico

• Anuncio en listas de emailing y grupos de notícias

• Anuncio en otras publicaciones especializadas (impreso o on-line) y sitios

• Anuncio en listas y sitios de novedades en la red

• Sumisión a los catálogos y mecanismos de búsqueda on-line, genéricos y especializados

• Uso de softwares y servicios de promoción (cientos de directorios y mecanismos de búsqueda simultáneamente)

• Estrategias para visibilidad y mantenimiento

Indexando un Periódico On-line

• Indexación automática en mecanismos de búsqueda del Web – Ninguna necesidad de someter, pero es deseable

apresurar el proceso

– Todas páginas en el sitio son indexadas, con todas las palabras del texto, imágenes y enlaces

– La búsqueda es menos ineficaz, por ser basada en texto libre

– Ninguna categorización jerárquica de asuntos

Ejemplo de Sumisión a Mecanismo de Búsqueda

Ejemplos de Mecanismos de Búsqueda Genéricos

• Altavista http://www.altavista.digital.com

• Lycos http://www.lycos.com• WebCrawlerhttp://www.webcrawl.com• HotBot http://www.hotbot.com• Excite http://www.excite.com• InfoSeek http://www.infoseek.com• MetaCrawler http://www.metacrawl.com

Indexando un Periódico On-line (2)

• Sumisión de entradas en los directorios on-line – Entrada de datos basada en formulario on-line – La inclusión no es automática – El enlace se categoriza en un árbol prefijado de

asuntos – No se indexan automáticamente las demás páginas – Hay directorios genéricos y especializados en

muchos dominios del conocimiento

Ejemplo de Formulario de Sumisión

Yahoo!

Ejemplos de Directorios

• Yahoo! http://www.yahoo.com• EINet Galaxy http://www.einet.com• Yellow Pages http://www.riders.com• HealthAtoZ http://www.healthatoz.com• Achoo http://www.achoo.com• MW Search http://www.mwsearch.com• MedHunt http://www.hon.ch/medhunt• MedWeb http://www.gen.emory.edu

Referencia Básica

Http://www.epub.org.br/intermedic/n0101/catalog/catalog_p.htm

Ejemplo de Software de Promoción

Registro descriptivoúnico

Lista de sítiosa sumeter

Ejemplo de Servicio de Promoción

Bibliografia

http://www.epub.org.br/informaticamedica/n0103/sabbatini.htm

Bibliografia

Finis!