Desarrolladores Havana2007 Bir

795 views

Published on

Modelo de Interfaces de la BVS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
795
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desarrolladores Havana2007 Bir

  1. 1. Interface BVS-Site Julio Takayama [email_address] Supervisor DGI-GA Unidad de Diseño Gráfico e Interfaces BIREME - OPS - OMS
  2. 2. Arquitectura de la BVS 3 camadas independientes e interoperantes.
  3. 3. Modelo de Interfaces de la BVS <ul><li>Presentación </li></ul><ul><li>CSS </li></ul><ul><li>XHTML standard </li></ul><ul><li>XSLT </li></ul><ul><li>XML component </li></ul>
  4. 4. BVS-Site Servicios XSLT Modelo de Interfaces de la BVS XML componente XHTML Template CSS presentación
  5. 5. CSS - Cascading Style Sheets <ul><li>Lenguage padronizado por el W3C </li></ul><ul><ul><li>Nivel 1, Nivel 2, Nivel 3 </li></ul></ul><ul><li>Son documentos que describen como la información marcada en el XHTML se presenta en la pantalla de las computadoras, en los dispositivos aurales, teléfonos y otros dispositivos móbiles. </li></ul>
  6. 6. Investigación para el uso de CSS <ul><li>AJAX </li></ul><ul><li>SVG </li></ul><ul><li>Java Applets (Visual Thesaurus™) </li></ul>
  7. 7. Web Standards <ul><li>Estabelecidos por el W3C y otras entidades reguladoras, son un conjunto de normas y padrones para crear e interpretar contenido para la Web </li></ul>
  8. 8. Web Standards <ul><li>Lenguages Estruturales </li></ul><ul><ul><li>Extensible Hypertext Markup Language (XHTML) 1.0 </li></ul></ul><ul><ul><li>XHTML 1.1 </li></ul></ul><ul><ul><li>Extensible Markup Language (XML) 1.0 </li></ul></ul><ul><li>Lenguages de Presentación </li></ul><ul><ul><li>Cascading Style Sheets (CSS) nivel 1 </li></ul></ul><ul><ul><li>CSS nivel 2 </li></ul></ul><ul><ul><li>CSS nivel 3 </li></ul></ul><ul><li>Object Models </li></ul><ul><ul><li>Document Object Model (DOM) nivel 1 (Core) </li></ul></ul><ul><ul><li>DOM nivel 2 </li></ul></ul>
  9. 9. Web Standards <ul><li>Propician benefício y accesibilidad a un número más grande de usuários </li></ul><ul><li>Simplifican los procesos y bajan los costos de producción </li></ul><ul><li>Aseguran la correcta visualización a la medida que los navegadores evolucionan y nuevos dispositivos de acceso surgen en el mercado </li></ul><ul><li>Facilita implementación de Servicios Web </li></ul>
  10. 10. Web Standards - Check List <ul><li>Calidad de código </li></ul><ul><li>Grado de separación de contenido y presentación </li></ul><ul><li>Accesibilidad para los usuarios </li></ul><ul><li>Accesibilidad para dispositivos </li></ul><ul><li>Usabilidad básica </li></ul><ul><li>Administración del sitio </li></ul><ul><li>Validación </li></ul><ul><li>¿El sitio utiliza Doctype correto? </li></ul><ul><li>¿El sitio utiliza un - Character set - de codificación de caracteres correcto? </li></ul><ul><li>¿El sitio utiliza (X)HTML válido? </li></ul><ul><li>¿La CSS utilizada es válida? </li></ul><ul><li>¿El sitio utiliza CSS para todos los elementos de la presentación (fuentes, colores, bordes, etc)? </li></ul><ul><li>¿Las imagenes estan todas inclusas en la CSS, o son inseridas via (X)HTML? </li></ul><ul><li>¿El atributo &quot;alt&quot; es utilizado para todas las imagenes? </li></ul><ul><li>¿El sitio utiliza unidades de medida relativas para tamaños de texto? </li></ul><ul><li>¿Los formularios y tablas son accesibles? </li></ul><ul><li>¿El sitio es visualizado correctamente tanto en los navegadores antíguos como que en los nuevos? </li></ul><ul><li>¿El sitio es visualizado correctamente en dispositivos portables? </li></ul><ul><li>¿La jerarquía visual es clara y bien definida? </li></ul><ul><li>¿Hay enlaces para la portada en todas las páginas? </li></ul><ul><li>¿Los enlaces visitados entan claramente identificados? </li></ul><ul><li>¿Hay página de error tipo 404 que funciona en todos los niveles? </li></ul><ul><li>XHTML, CSS, Versión texto, colores, … </li></ul>
  11. 11. BVS-Site 4.0 <ul><li>Padrón de Conformidad AA - WAI* </li></ul>Web Standards + Código estruturado en Tableless * Web Accessibility Initiative todos los requisitos essenciales asi como los que debrian ser atendidos estan implementados
  12. 12. Table X Tableless <ul><li>Abordaje con tablas </li></ul><ul><ul><li>Tablas como recurso de layout </li></ul></ul><ul><ul><li>Utilización de gifs como recurso para delimitar tablas </li></ul></ul><ul><ul><li>Utilización excesiva de “nested tags” </li></ul></ul><ul><ul><li>Exceso de código para construcción de elementos sencillos </li></ul></ul><ul><ul><li>Código sin semántica </li></ul></ul><ul><ul><li>Baja acesibilidad </li></ul></ul>
  13. 13. Abordaje Tableless Diseño sin recursos de tablas <ul><ul><li>Markup basado en el significado, no en el diseño </li></ul></ul><ul><ul><li>Código sencillo y comprensible </li></ul></ul><ul><ul><li>Apropiado para la lectura de los buscadores </li></ul></ul><ul><ul><li>Downloads más rápidos </li></ul></ul><ul><ul><li>Facilidad para la aplicación de las hojas de estilo </li></ul></ul><ul><ul><li>Tablas sólo para datos tabulares </li></ul></ul>
  14. 15. Innovaciones <ul><li>Interface y operación del Portal </li></ul><ul><li>Interface de Búsqueda </li></ul><ul><li>Interface de Administración </li></ul>
  15. 16. Innovación Interface del Portal Regional <ul><li>Registro de usuarios integrado con las redes BVS, SciELO, ScienTI, TDR, GHL, ePORTUGUESe… </li></ul><ul><li>Perfil de usuario </li></ul><ul><li>Servicios personalizados: mi colección, mis links… </li></ul><ul><li>Alertas: Que hay de nuevo sobre mi perfil… </li></ul>
  16. 17. Propuesta de Renovación Interface del Portal Regional
  17. 18. Innovaciones <ul><li>Interface y operación del Portal </li></ul><ul><li>Interface de Búsqueda </li></ul><ul><li>Interface de Administración </li></ul>
  18. 19. Estado Actual Interface de búsqueda <ul><li>Excesivos pasos para el acceso a un documento </li></ul><ul><li>Falta de uniformedad en la presentación </li></ul><ul><li>Curva de aprendizaje lento </li></ul><ul><li>Elevado costo de mantenimiento para los produtos </li></ul><ul><li>Falta de servicios personalizados </li></ul>
  19. 20. Estado Atual <ul><li>Como obtener información sobre Dengue? </li></ul>
  20. 21. Innovación Interface de búsqueda <ul><li>Interface integrada </li></ul><ul><li>Búsqueda por FI o por Tipo de FI </li></ul><ul><li>Organización del resultado por relevancia, fecha, orden alfabético, etc </li></ul><ul><li>Formato de salida padrón con opciones para visualización detallada, similares, CV… </li></ul><ul><li>Histórico de búsqueda </li></ul><ul><li>RSS de la búsqueda </li></ul><ul><li>AJAX e otras tecnologias </li></ul>
  21. 22. Innovación Interface de búsqueda
  22. 23. Innovaciones <ul><li>Interface del Portal </li></ul><ul><li>Interface de Búsqueda </li></ul><ul><li>Interface de Administración </li></ul>
  23. 24. Estado Actual Interface de administración <ul><li>Interface ADM es una abstración de la Interface Pública </li></ul><ul><li>Problemas en la usabilidad del sistema </li></ul><ul><li>Inconsistencias en los flujos </li></ul><ul><li>Falta de significado en los rótulos </li></ul>
  24. 25. Estado Atual
  25. 26. Innovación Interface de Administración <ul><li>Grupo Focal </li></ul><ul><li>Interface WYSIWYG </li></ul><ul><li>Directorio de FI’s (FIFI) </li></ul><ul><li>Integración con Sistema de Produción de FI </li></ul><ul><li>CSS unificada para Portal y Produtos </li></ul><ul><li>Revisión en la usabilidad del sistema </li></ul>
  26. 27. Innovación Interface de Administración BVS-Site
  27. 28. <ul><li>¡Muchas Gracias! </li></ul><ul><li>Participe de la Red de Desarrolladores - Interface de la BVS </li></ul><ul><li>http://www.cv-interfacebvs.bvsalud.org/ </li></ul>

×