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