Uma ferramenta acessível de apoio à
 modelagem de software na Web
         Exame de qualificação de mestrado




             Candidato: Filipe Del Nero Grillo

   Orientadora: Profª. Drª. Renata Pontin de Mattos Fortes




                       12 de abril de 2012
SUMÁRIO

1. Introdução

2. MDD

3. Acessibilidade Web

4. Trabalhos relacionados

5. Proposta de trabalho e avaliações

6. Referências bibliográficas
                               2
INTRODUÇÃO

• Programação  de computadores sempre foi uma área onde
 deficientes visuais, por exemplo, puderam trabalhar;

• Ferramentas
            como leitores de tela e IDE’s como Eclipse e
 NetBeans auxiliam esses usuários;

• Desenvolvimento   orientado a modelos vem ganhando espaço
 na indústria (Lucrédio, 2009);

• Modelos visuais se apresentam como uma barreira para
 usuários com deficiência.
                             3
INTRODUÇÃO


• Censo2000: 24,6 milhões de deficientes (14,5% da
 população);

• Censo2010: 45,6 milhões de deficientes (23,9% da
 população);

• Pessoas
       com deficiência visual ou motora graves e sem visão
 nenhuma: 10,3 milhões.

                             4
INTRODUÇÃO
                                                             Lei 10.
                                                             O Poder
                                                             estabelec
                                                             sistemas
                                                             sensorial
                                                             acesso à

• Lei   10.098 de 19 Dezembro de 2000;

• Decreto    Nº 5.296, de 2 dezembro de 2004;
                                                             Decret
                                                             No praz
                                                             deste D
                                                             sítios ele
                                                             computa
                                                             de defic
• Portaria   Nº 3, de 7 de Maio de 2007;

•A  Convenção sobre os Direitos das Pessoas com Deficiência     Porta
                                                               As po
 foi assinada pelo Brasil em 2007, ratificada em 2008 e         serão
                                                               “Mode

 publicada no Diário Oficial da União em 2009.                  adoção
                                                               Sistem
                                                               Inform
                                                               janeiro



                                 5
OBJETIVO

• Técnica    textual;

• Interação   com diagramas;

• Colaboração     acessível;

• Projetos   de software.




                               6
MDD
• Desenvolvimento       orientado a modelos;

• Abordagem    de engenharia de software;

• Modelo   como principal artefato.
                                   Modelos
      Requisitos




                   Engenheiro de                     Linguagem de
                                      Código fonte      máquina
                     software
                                        7
Requisitos                       MDD



              Engenheiro de                    Código fonte   Linguagem de
                                 Modelos                         máquina
                software

• Principais     vantagens:
  •   Redução do fardo da modelagem;
  •   Melhoria na comunicação;
  •   Evitar repetições;
  •   Padronização.                        8
ACESSIBILIDADE WEB
• WAI(Web Accessibility Initiative): Esforço da W3C para tornar
 a Web acessível.

   • WCAG;

   • ATAG;

   • UAAG;

   • WAI-ARIA.




                                                     (W3C, WAI)
                               9
PRINCIPAIS DIRETRIZES A SEREM
          ATENDIDAS
• WCAG

 1.1 - Fornecer alternativas textuais para conteúdos não textuais;
 1.3 - Conteúdos que podem ser representados de formas diferentes;
 4.1 - Maximizar compatibilidade entre agentes de usuário.

• ATAG

 3 - Apoiar a criação de conteúdo acessível;
 5 - Integrar soluções de acessibilidade na aparência e funcionamento.



                                          10
PRINCIPAIS DIRETRIZES A SEREM
          ATENDIDAS

• WAI-ARIA:

    •   Papéis;
    •   Estados.
                                                               <ul role="menubar">...</ul>




                     <li role="menuitem">Visão textual</li>

  <li role="menuitem" aria-checked="true">Visão Gráfica</li>




                                                    11
TRABALHOS RELACIONADOS




• GEMSJax: Implementação Web    da ferramenta GEMS (Generic
 Eclipse Modeling System) (Farwick et al., 2010)
                             12
TRABALHOS RELACIONADOS




• SLIM
     (Synchronous Lightweight Modeling): Ambiente Web para
 modelagem colaborativa síncrona. (Thum et al., 2009)
                             13
TRABALHOS RELACIONADOS
• GEMS     - Generic Eclipse Modeling System (White et al., 2007)
• COMA      - COllaborative Modeling Architecure tool (Rittgen, 2008)
• Diagramas para deficientes visuais por meio de hierarquias
 (Metatla et al., 2007) e interfaces de áudio (Metatla et al.,
 2008).
• Ensino   de grafos para deficientes visuais (Cohen et al., 2006).
• Visualizaçãoe navegação em UML por meio de joystick e
 leitores de tela. (King et al., 2004)
                                  14
PROPOSTA
                                     Ferramenta Proposta
                Visão gráfica


                                           Modelo          Metamodelo



                Visão textual
Engenheiro de
  software




                                15
REQUISITOS INICIAIS
• Visão    gráfica:                            • Visão   textual:
  •   Menu para seleção de elementos;           • Cores na sintaxe do texto;
  •   Posicionamento por meio de                • Sugestões na sintaxe do texto;
      arrastar-e-soltar dos elementos;          • Auto-indentação;
  •   Facilitadores nos pontos de               • Exportar código.
      conexão entre elementos;
  •   Zoom-in / zoom-out;                     • Ambas:
  •   Exportar imagem do modelo.
                                                • Exportar modelo XMI;
                                                • Importar modelo XMI;
                                                • Documentação acessível.


                                         16
ENTREVISTA COM USUÁRIOS


• Questionário/Roteiro   do anexo melhorado após uma
 primeira avaliação;

• Foco em entrevistas exploratórias para levantamento e
 validação dos requisitos iniciais;

• Pessoas   com e sem deficiência.


                                17
PROPOSTA
                     Engenheiro de
                       software        Visão gráfica


                                                       Modelo


  Engenheiro de
software deficiente   Leitor de tela    Visão textual




                                  18
MOCKUPS


              Diagrama: Escola
Elementos

    Classe

    Herança




                                 19
MOCKUPS


              Diagrama: Escola
Elementos

    Classe

    Herança




                                 20
MOCKUPS


Diagrama: Escola

classe Pessoa {

    atributo nome;

    metodo setNome {
        parametro: nome;
    }

}




                           21
MOCKUPS


Diagrama: Escola

classe Pessoa {

    atributo nome;

    metodo setNome {
        parametro: nome;
    }

}

classe Aluno {

    atributo: nota;

    metodo getNota {
    }

}




                           22
MOCKUPS


              Diagrama: Escola
Elementos

    Classe

    Herança




                                 23
MOCKUPS


Diagrama: Escola

classe Pessoa {

    atributo nome;

    metodo setNome {
        parametro: nome;
    }

}

classe Aluno {

    herda: Pessoa;

    atributo: nota;

    metodo getNota {
    }

}




                           24
MOCKUPS


              Diagrama: Escola
Elementos

    Classe

    Herança




                                 25
ARQUITETURA
                   XHTML                JavaScript             CSS

     View
             JSP           UI Components                    Servlets




Controller                          Faces Servlets




                                                     xText Library

    Model          Managed Beans
                                                      Metamodel




                      Data

                                   26
AVALIAÇÕES

• Ferramentas   automáticas como DaSilva e HERA;

• Testescom usuários para avaliar quesitos de usabilidade e
 acessibilidade;

• Ferramenta   Morae para realização de testes com usuários.




                                27
EXPERIMENTOS

• Experimento          1:
 •   Acessibilidade;

 •   Colaboração.

• Experimento          2:
 •   Comparação entre as visões.




                                   28
CRONOGRAMA




    29
REFERÊNCIAS
•   Cohen, R. F.; Meacham, A.; Skaff, J. Teaching graphs to visually impaired students using an active auditory interface. SIGCSE Bull., v. 38,
    p. 279–282, 2006.
•   Farwick, M.; Agreiter, B.; White, J.; Forster, S.; Lanzanasto, N.; Breu, R.	

 A web-based collaborative metamodeling environment with
    secure remote model access.	

 Pro- ceedings of the 10th international conference on Web engineering, ICWE’10, Berlin,
                                    In:
    Heidelberg: Springer-Verlag, 2010, p. 278–291 (ICWE’10, ).
•   King, A.; Blenkhorn, P.; Crombie, D.; Dijkstra, S.; Evans, G.; Wood, J.	

  Presenting UML Software Engineering Diagrams to Blind
    People.	

 In: Miesenberger, K.; Klaus, J.; Zagler, W.; Burger, D., eds. Computers Helping People with Special Needs, v. 3118 de Lecture
    Notes in Computer Science, Springer Berlin / Heidelberg, p. 626–626, 2004.
•   Lucrédio, D.	

 Uma Abordagem Orientada a Modelos para Reutilização de Software. Ph.d. thesis, Universidade de São Paulo,
    Instituto de Ciências Matemáticas e de Computação – ICMC/USP. São Carlos SP., 2009. Disponível em http://www.teses.usp.br/teses/
    disponiveis/55/55134/ tde-02092009-140533/
•   Metatla, O.; Bryan-Kinns, N.; Stockman, T.	

 Using hierarchies to support non-visual access to relational diagrams. In: Proceedings of
    the 21st British HCI Group An- nual Conference on People and Computers: HCI...but not as we know it - Volume 1, BCS-HCI ’07,
    Swinton, UK, UK: British Computer Society, 2007, p. 215–225 (BCS-HCI ’07, ).
•   Metatla, O.; Bryan-Kinns, N.; Stockman, T.	

 Comparing interaction strategies for constructing diagrams in an audio-only
    interface.	

In: Proceedings of the 22nd British HCI Group Annual Conference on People and Computers: Culture, Creativity,
    Interaction - Volume 2, BCS-HCI ’08, Swinton, UK, UK: British Computer Society, 2008, p. 65–69 (BCS-HCI ’08, ).
•   Rittgen, P.	

 COMA: A tool fro collaborative modeling. In: CAiSE Forum, 2008, p. 61 – 64.
•   Thum, C.; Schwind, M.; Schader, M. SLIM - A Lightweight Environment for Synchronous Collaborative Modeling.	

 In: Proceedings of
    the 12th International Conference on Model Driven Engineering Languages and Systems, MODELS ’09, Berlin, Heidelberg: Springer-
    Verlag, 2009, p. 137–151 (MODELS ’09, ).
•   White, J.; Schmidt, D. C.; Mulligan, S.	

The Generic Eclipse Modeling System.	

In: Model-Driven Development Tool Implementer’s
    Forum at 45th International Conference on Objects, Models, Components and Patterns, 2007.

                                                                     30
OBRIGADO!




    31

Qualificação Mestrado

  • 1.
    Uma ferramenta acessívelde apoio à modelagem de software na Web Exame de qualificação de mestrado Candidato: Filipe Del Nero Grillo Orientadora: Profª. Drª. Renata Pontin de Mattos Fortes 12 de abril de 2012
  • 2.
    SUMÁRIO 1. Introdução 2. MDD 3.Acessibilidade Web 4. Trabalhos relacionados 5. Proposta de trabalho e avaliações 6. Referências bibliográficas 2
  • 3.
    INTRODUÇÃO • Programação de computadores sempre foi uma área onde deficientes visuais, por exemplo, puderam trabalhar; • Ferramentas como leitores de tela e IDE’s como Eclipse e NetBeans auxiliam esses usuários; • Desenvolvimento orientado a modelos vem ganhando espaço na indústria (Lucrédio, 2009); • Modelos visuais se apresentam como uma barreira para usuários com deficiência. 3
  • 4.
    INTRODUÇÃO • Censo2000: 24,6milhões de deficientes (14,5% da população); • Censo2010: 45,6 milhões de deficientes (23,9% da população); • Pessoas com deficiência visual ou motora graves e sem visão nenhuma: 10,3 milhões. 4
  • 5.
    INTRODUÇÃO Lei 10. O Poder estabelec sistemas sensorial acesso à • Lei 10.098 de 19 Dezembro de 2000; • Decreto Nº 5.296, de 2 dezembro de 2004; Decret No praz deste D sítios ele computa de defic • Portaria Nº 3, de 7 de Maio de 2007; •A Convenção sobre os Direitos das Pessoas com Deficiência Porta As po foi assinada pelo Brasil em 2007, ratificada em 2008 e serão “Mode publicada no Diário Oficial da União em 2009. adoção Sistem Inform janeiro 5
  • 6.
    OBJETIVO • Técnica textual; • Interação com diagramas; • Colaboração acessível; • Projetos de software. 6
  • 7.
    MDD • Desenvolvimento orientado a modelos; • Abordagem de engenharia de software; • Modelo como principal artefato. Modelos Requisitos Engenheiro de Linguagem de Código fonte máquina software 7
  • 8.
    Requisitos MDD Engenheiro de Código fonte Linguagem de Modelos máquina software • Principais vantagens: • Redução do fardo da modelagem; • Melhoria na comunicação; • Evitar repetições; • Padronização. 8
  • 9.
    ACESSIBILIDADE WEB • WAI(WebAccessibility Initiative): Esforço da W3C para tornar a Web acessível. • WCAG; • ATAG; • UAAG; • WAI-ARIA. (W3C, WAI) 9
  • 10.
    PRINCIPAIS DIRETRIZES ASEREM ATENDIDAS • WCAG 1.1 - Fornecer alternativas textuais para conteúdos não textuais; 1.3 - Conteúdos que podem ser representados de formas diferentes; 4.1 - Maximizar compatibilidade entre agentes de usuário. • ATAG 3 - Apoiar a criação de conteúdo acessível; 5 - Integrar soluções de acessibilidade na aparência e funcionamento. 10
  • 11.
    PRINCIPAIS DIRETRIZES ASEREM ATENDIDAS • WAI-ARIA: • Papéis; • Estados. <ul role="menubar">...</ul> <li role="menuitem">Visão textual</li> <li role="menuitem" aria-checked="true">Visão Gráfica</li> 11
  • 12.
    TRABALHOS RELACIONADOS • GEMSJax:Implementação Web da ferramenta GEMS (Generic Eclipse Modeling System) (Farwick et al., 2010) 12
  • 13.
    TRABALHOS RELACIONADOS • SLIM (Synchronous Lightweight Modeling): Ambiente Web para modelagem colaborativa síncrona. (Thum et al., 2009) 13
  • 14.
    TRABALHOS RELACIONADOS • GEMS - Generic Eclipse Modeling System (White et al., 2007) • COMA - COllaborative Modeling Architecure tool (Rittgen, 2008) • Diagramas para deficientes visuais por meio de hierarquias (Metatla et al., 2007) e interfaces de áudio (Metatla et al., 2008). • Ensino de grafos para deficientes visuais (Cohen et al., 2006). • Visualizaçãoe navegação em UML por meio de joystick e leitores de tela. (King et al., 2004) 14
  • 15.
    PROPOSTA Ferramenta Proposta Visão gráfica Modelo Metamodelo Visão textual Engenheiro de software 15
  • 16.
    REQUISITOS INICIAIS • Visão gráfica: • Visão textual: • Menu para seleção de elementos; • Cores na sintaxe do texto; • Posicionamento por meio de • Sugestões na sintaxe do texto; arrastar-e-soltar dos elementos; • Auto-indentação; • Facilitadores nos pontos de • Exportar código. conexão entre elementos; • Zoom-in / zoom-out; • Ambas: • Exportar imagem do modelo. • Exportar modelo XMI; • Importar modelo XMI; • Documentação acessível. 16
  • 17.
    ENTREVISTA COM USUÁRIOS •Questionário/Roteiro do anexo melhorado após uma primeira avaliação; • Foco em entrevistas exploratórias para levantamento e validação dos requisitos iniciais; • Pessoas com e sem deficiência. 17
  • 18.
    PROPOSTA Engenheiro de software Visão gráfica Modelo Engenheiro de software deficiente Leitor de tela Visão textual 18
  • 19.
    MOCKUPS Diagrama: Escola Elementos Classe Herança 19
  • 20.
    MOCKUPS Diagrama: Escola Elementos Classe Herança 20
  • 21.
    MOCKUPS Diagrama: Escola classe Pessoa{ atributo nome; metodo setNome { parametro: nome; } } 21
  • 22.
    MOCKUPS Diagrama: Escola classe Pessoa{ atributo nome; metodo setNome { parametro: nome; } } classe Aluno { atributo: nota; metodo getNota { } } 22
  • 23.
    MOCKUPS Diagrama: Escola Elementos Classe Herança 23
  • 24.
    MOCKUPS Diagrama: Escola classe Pessoa{ atributo nome; metodo setNome { parametro: nome; } } classe Aluno { herda: Pessoa; atributo: nota; metodo getNota { } } 24
  • 25.
    MOCKUPS Diagrama: Escola Elementos Classe Herança 25
  • 26.
    ARQUITETURA XHTML JavaScript CSS View JSP UI Components Servlets Controller Faces Servlets xText Library Model Managed Beans Metamodel Data 26
  • 27.
    AVALIAÇÕES • Ferramentas automáticas como DaSilva e HERA; • Testescom usuários para avaliar quesitos de usabilidade e acessibilidade; • Ferramenta Morae para realização de testes com usuários. 27
  • 28.
    EXPERIMENTOS • Experimento 1: • Acessibilidade; • Colaboração. • Experimento 2: • Comparação entre as visões. 28
  • 29.
  • 30.
    REFERÊNCIAS • Cohen, R. F.; Meacham, A.; Skaff, J. Teaching graphs to visually impaired students using an active auditory interface. SIGCSE Bull., v. 38, p. 279–282, 2006. • Farwick, M.; Agreiter, B.; White, J.; Forster, S.; Lanzanasto, N.; Breu, R. A web-based collaborative metamodeling environment with secure remote model access. Pro- ceedings of the 10th international conference on Web engineering, ICWE’10, Berlin, In: Heidelberg: Springer-Verlag, 2010, p. 278–291 (ICWE’10, ). • King, A.; Blenkhorn, P.; Crombie, D.; Dijkstra, S.; Evans, G.; Wood, J. Presenting UML Software Engineering Diagrams to Blind People. In: Miesenberger, K.; Klaus, J.; Zagler, W.; Burger, D., eds. Computers Helping People with Special Needs, v. 3118 de Lecture Notes in Computer Science, Springer Berlin / Heidelberg, p. 626–626, 2004. • Lucrédio, D. Uma Abordagem Orientada a Modelos para Reutilização de Software. Ph.d. thesis, Universidade de São Paulo, Instituto de Ciências Matemáticas e de Computação – ICMC/USP. São Carlos SP., 2009. Disponível em http://www.teses.usp.br/teses/ disponiveis/55/55134/ tde-02092009-140533/ • Metatla, O.; Bryan-Kinns, N.; Stockman, T. Using hierarchies to support non-visual access to relational diagrams. In: Proceedings of the 21st British HCI Group An- nual Conference on People and Computers: HCI...but not as we know it - Volume 1, BCS-HCI ’07, Swinton, UK, UK: British Computer Society, 2007, p. 215–225 (BCS-HCI ’07, ). • Metatla, O.; Bryan-Kinns, N.; Stockman, T. Comparing interaction strategies for constructing diagrams in an audio-only interface. In: Proceedings of the 22nd British HCI Group Annual Conference on People and Computers: Culture, Creativity, Interaction - Volume 2, BCS-HCI ’08, Swinton, UK, UK: British Computer Society, 2008, p. 65–69 (BCS-HCI ’08, ). • Rittgen, P. COMA: A tool fro collaborative modeling. In: CAiSE Forum, 2008, p. 61 – 64. • Thum, C.; Schwind, M.; Schader, M. SLIM - A Lightweight Environment for Synchronous Collaborative Modeling. In: Proceedings of the 12th International Conference on Model Driven Engineering Languages and Systems, MODELS ’09, Berlin, Heidelberg: Springer- Verlag, 2009, p. 137–151 (MODELS ’09, ). • White, J.; Schmidt, D. C.; Mulligan, S. The Generic Eclipse Modeling System. In: Model-Driven Development Tool Implementer’s Forum at 45th International Conference on Objects, Models, Components and Patterns, 2007. 30
  • 31.