CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE LINS PROF. ANTONIO SEABRA CURSO SUPERIOR DE TECNOLOGIA EM BANCO DE DADOS ANA CAROLINA SIMPLICIO BOSCHETE THIAGO HENRIQUE HONORATO DA SILVA APLICAÇÃO WEB EDUCACIONAL DE APOIO À ALFABETIZAÇÃO INICIAL COM ÊNFASE EM PESSOAS COM DEFICIÊNCIA LINS/SP 2º SEMESTRE/2014

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE LINS PROF. ANTONIO SEABRA CURSO SUPERIOR DE TECNOLOGIA EM BANCO DE DADOS ANA CAROLINA SIMPLICIO BOSCHETE THIAGO HENRIQUE HONORATO DA SILVA APLICAÇÃO WEB EDUCACIONAL DE APOIO À ALFABETIZAÇÃO INICIAL COM ÊNFASE EM PESSOAS COM DEFICIÊNCIA Trabalho de Conclusão de Curso apresentado à Faculdade de Tecnologia de Lins para obtenção do Título de Tecnólogo (a) em Banco de Dados. Orientador: Prof. Dr. Paulo Augusto Nardi LINS/SP 2º SEMESTRE/2014

ANA CAROLINA SIMPLICIO BOSCHETE THIAGO HENRIQUE HONORATO DA SILVA APLICAÇÃO WEB EDUCACIONAL DE APOIO À ALFABETIZAÇÃO INICIAL COM ÊNFASE EM PESSOAS COM DEFICIÊNCIA Trabalho de Conclusão de Curso apresentado à Faculdade de Tecnologia de Lins, como parte dos requisitos necessários para a obtenção do título de Tecnólogo (a) em Banco de Dados sob orientação do Prof. Dr. Paulo Augusto Nardi. Data de aprovação: / / Orientador Prof. Dr. Paulo Augusto Nardi Examinador 1 Examinador 2

Aos meus pais Izaias e Cecilia, ao meu irmão André e minha cunhada Mara, por todo apoio e incentivo. Ao meu noivo, Thiago, pela grande honra de realizarmos este trabalho juntos. Posso todas as coisas em Cristo que me fortalece Filipenses 4:13. Ana Carolina

Aos meus pais Valmir e Rose e ao meu irmão Gustavo, pelo incentivo e apoio em todos os momentos. Em especial a minha noiva Ana Carolina, que tive o privilégio de realizar esse trabalho junto. Somos mais que vencedores, por meio daquele que nos amou Romanos 8:37 Thiago Honorato

AGRADECIMENTOS Primeiramente agradecemos a Deus, que nos capacitou para esse momento tão importante em nossas vidas. Em especial, ao nosso orientador Professor Doutor Paulo Augusto Nardi, por toda dedicação, apoio, paciência e incentivo para a realização desse trabalho. Aos professores Fábio Lúcio, Luciane Noronha, Anderson Pazin, Mário Prado, Alexandre Ponce, Adriano Bezerra, Adriana de Bortoli, Rodrigo Ayres, por todo apoio, conhecimentos compartilhados e paciência. Também em especial, ao Professor Adriano Marques, pelo incentivo e apoio em todo o tempo. Aos funcionários do núcleo, Diretora Katia Paixão e professoras Elair Dourado e Giane, pela disponibilidade de materiais pedagógicos, apoio e paciência. Agradecemos especialmente a Professora Doutora Fabiana Sayuri Sameshima, por toda paciência, e disponibilidade de tempo, materiais e amplo apoio, que foi fundamental ao nosso trabalho. Aos colegas da turma, por todo conhecimento compartilhado e incentivo. Em destaque o nosso amigo Gabriel Ribeiro, por ter feito as falas do leão Juba. Também a nossa amiga Natália Miazzo, por nos disponibilizar livros pedagógicos e incentivo. A Terapeuta ocupacional Graziela Caselle Fernandes, que colaborou com conselhos, dicas, apoio e incentivo. Também ao Designer Márcio Coelho, por ter criado o leão Juba e que facilitou a aquisição das imagens. A nossa família por todo carinho, apoio, incentivo e compreensão durante nossa ausência. Enfim, nosso sincero agradecimento a todos, que foram fundamentais para a realização deste trabalho.

RESUMO Atualmente, a informática está ganhando cada vez mais espaço nas escolas, principalmente em relação ao desenvolvimento de atividades educacionais em software e sites. Esse tipo de atividade costuma tornar as aulas mais atraentes e motivadoras para professores e alunos. Ainda, a informática traz benefícios às pessoas com algum tipo de deficiência ao oferecer desde recursos adaptados como, por exemplo, um teclado de diversas formas e tamanhos, até diversos software e sites pedagógicos. Entretanto, nem todas as instituições de ensino dispõem de condições financeiras para comprar software ou licenças de sites, já que poucos desses recursos são de baixo custo ou gratuitos. O objetivo deste trabalho é desenvolver uma aplicação web denominada Juba Esperto que contenha atividades pedagógicas de alfabetização inicial voltadas para pessoas com deficiência. O uso dessa versão será gratuita e disponibilizada para o Núcleo de Apoio Integrado ao A.E.E Prof.ª Elizabeth Guedes Chinali. Além disso, a aplicação possui as páginas de cadastro de alunos, cadastro de professores, cadastro de escolas, cadastro de matrículas, cadastro de equipamentos de Tecnologia Assistiva (TA), e geração de relatórios e consulta de estatísticas com o intuito de identificar a evolução do aprendizado do aluno. As tecnologias utilizadas para o desenvolvimento deste trabalho, foram as linguagens HTML5, CSS3, JavaScript, Java, JSF e JSON, juntamente com as bibliotecas jquery, Bootstrap, Gson e as ferramentas NetBeans, GlassFish e o banco de dados PostgreSQL. Palavras-chave: aplicação web, alfabetização inicial, pessoas com deficiência.

ABSTRACT Currently, computing is gaining more space in schools, especially with regard to the development of educational activities for software and websites. This type of activity usually becomes more attractive and motivating for teachers and students. Likewise, computer technology brings benefits to people with a disability by offering adapted from resources, eg, a keyboard of different shapes and sizes, up to several educational software and websites. However, not all educational institutions have financial conditions to purchase software licenses or sites, since few of these features are low cost or free. Thus, the aim of this work is to develop a web application called Juba Esperto containing educational activities for early literacy geared to people with disabilities. The use of this version will be free and available for the Center for Integrated Support AEE "Prof. Elizabeth Guedes Chinali". In addition, the application has the registration pages of students, registration of teachers, school records, enrollment records, records of equipment Assistive Technology (AT), and generation of reports and query statistics in order to identify the evolution of student learning. The technologies used for the development of this work were HTML5, CSS3, JavaScript, Java, JSF and JSON languages, along with jquery, Bootstrap, Gson tools and NetBeans, GlassFish and PostgreSQL database libraries. Keywords: web application, early literacy, people with disabilities.

LISTA DE ILUSTRAÇÕES Figura 1.1 Estabilizador de Punho e Abdutor de Polegar.... 27 Figura 2.1 Diagrama de Caso de Uso.... 32 Figura 2.2 Diagrama de Classe.... 33 Figura 2.3 Diagrama de Atividade. Consultar Estatística do Aluno... 34 Figura 2.4 MVC. Consultar Estatística do Aluno... 35 Figura 2.5 Diagrama de Sequência. Consultar Estatística do Aluno... 35 Figura 2.6 Diagrama de Atividade. Manter Aluno... 36 Figura 2.7 MVC. Manter Aluno... 37 Figura 2.8 Diagrama de Sequência. Manter Aluno... 37 Figura 2.9 Diagrama de Atividade. Manter Equipamento TA... 38 Figura 2.10 MVC. Manter Equipamento TA... 39 Figura 2.11 Diagrama de Sequência. Manter Equipamento TA... 39 Figura 2.12 Diagrama de Atividade. Manter Escola... 40 Figura 2.13 MVC. Manter Escola.... 41 Figura 2.14 Diagrama de Sequência. Manter Escola.... 41 Figura 2.15 Diagrama de Atividade. Manter Matrícula... 42 Figura 2.16 MVC. Manter Matrícula... 43 Figura 2.17 Diagrama de Sequência. Manter Matrícula... 43 Figura 2.18 Diagrama de Atividade. Manter Professor... 44 Figura 2.19 MVC. Manter Professor... 45 Figura 2.20 Diagrama de Sequência. Manter Professor... 45 Figura 2.21 Diagrama de Atividade. Realizar Atividade... 46 Figura 2.22 MVC. Realizar Atividade... 46 Figura 2.23 Diagrama de Sequência. Realizar Atividade... 47 Figura 2.24 Modelo Relacional... 47 Figura 3.1 Estrutura do object.... 54 Figura 3.2 Estrutura do array.... 55 Figura 3.3 Editor de Texto do NetBeans 7.4.... 58 Figura 3.4 Editor Visual do NetBeans 7.4... 59 Figura 4.1 Login.... 64 Figura 4.2 Menu de atividades.... 65

Figura 4.3 Menu Lateral... 65 Figura 4.4 Atividade Jogo de Rimas... 66 Figura 4.5 Atividade Jogo de Escrita... 67 Figura 4.6 Atividade Manipulação de fonemas... 68 Figura 4.7 Cadastro do Aluno.... 69 Figura 4.8 Pesquisar Aluno.... 69 Figura 4.9 Cadastro do Professor.... 70 Figura 4.10 Pesquisar Professor.... 70 Figura 4.11 Cadastrar Escola.... 71 Figura 4.12 Pesquisar Escola.... 71 Figura 4.13 Cadastrar Matrícula.... 72 Figura 4.14 Pesquisar Matrícula.... 73 Figura 4.15 Transferir matrícula.... 73 Figura 4.16 Cadastrar Equipamento TA.... 74 Figura 4.17 Pesquisar Equipamento TA.... 74 Figura 4.18 Tipos de estatística.... 75 Figura 4.19 Estatística em barra.... 76 Figura 4.20 Estatística em linha.... 76 Figura 4.21 Relatórios.... 77 Figura 4.22 Exemplo de relatório.... 77

LISTA DE CÓDIGO FONTE Código Fonte 3.1 Estrutura Básica do HTML.... 49 Código Fonte 3.2 Utilização da tag canvas.... 49 Código Fonte 3.3 Utilização da tag audio.... 49 Código Fonte 3.4 Utilização da tag video.... 50 Código Fonte 3.5 Link de um arquivo CSS externo.... 50 Código Fonte 3.6 Seletor Encadeado do CSS.... 51 Código Fonte 3.7 Seletor Encadeado do CSS no HTML.... 52 Código Fonte 3.8 Seletor Agrupado do CSS.... 52 Código Fonte 3.9 Exemplo JavaScript para Alterar a Cor de Fundo da Página.... 55 Código Fonte 3.10 Exemplo jquery para Alterar a Cor de Fundo da Página.... 55 Código Fonte 3.11 Estrutura Gson, para criar um modelo.... 57

LISTA DE QUADROS Quadro 1.1 Conceitos de Percepção Visual.... 22 Quadro 3.1 Compatibilidade de Navegadores com jquery.... 56 Quadro 3.2 Navegadores Suportados pelo Bootstrap.... 57 Quadro 3.3 Limites do PostgreSQL... 60 Quadro 3.4 Visão centrada na máquina e visão centrada nas pessoas.... 61

LISTA DE ABREVIATURAS E SIGLAS ACID Atomicity, Consistency, Isolation, Durability AEE Atendimento Educacional Especializado API Application Programming Interface CSS Cascading Style Sheets EE Enterprise Edition HTML Hypertext Markup Language IBGE Instituto Brasileiro de Geografia e estatística IDE Integrated Development Environment IHC Interação Humano-Computador IU Interface de Usuário JSF JavaServer Faces JSON JavaScript Object Notation JSP JavaServer Pages MEC Ministério da Educação MVC Modelo-Visão-Controle OO Orientado a Objeto PC Computador Pessoal SEESP Secretaria da Educação Especial SGBD Sistema de Gerenciador de Banco de Dados SQL Structured Query Language SRMF Sala de Recursos Multifuncionais TA Tecnologia Assistiva UML - Unified Modeling Language W3C World Wide Web Consortium WHATWG Web Hypertext Application Technology Working Group

% - Porcentagem LISTA DE SÍMBOLOS

SUMÁRIO INTRODUÇÃO... 18 1 CONCEITOS GERAIS... 21 1.1 ALFABETIZAÇÃO INICIAL... 21 1.1.1 Habilidades Perceptuais... 21 1.1.2 Habilidades Motoras... 22 1.1.3 Habilidades Linguísticas... 23 1.2 EDUCAÇÃO INCLUSIVA... 24 1.2.1 Atendimento Educacional Especializado... 25 1.3 TECNOLOGIA ASSISTIVA... 26 2 ANÁLISE E PROJETO DE SISTEMA... 28 2.1 O AMBIENTE DO USUÁRIO... 28 2.2 ANÁLISE DE NEGÓCIOS... 29 2.2.1 Instrução do Problema... 29 2.2.2 Análise de Mercado... 29 2.2.3 Usuários... 30 2.3 VISÃO GERAL DO PRODUTO... 30 2.3.1 Perspectiva do Produto... 31 2.3.2 Premissas e Dependência... 31 2.3.3 Funcionalidades... 31 2.4 ANÁLISE DE REQUISITOS... 32 2.4.1 Caso de Uso... 32 2.4.2 Diagrama de Classe... 33 2.4.3 Especificações de Histórias e Diagramas... 34 2.4.3.1 Efetuar Login... 34 2.4.3.2 Consultar Estatística do Aluno... 34 2.4.3.3 Manter Aluno... 36 2.4.3.4 Manter Equipamento TA... 38 2.4.3.5 Manter Escola... 40 2.4.3.6 Gerar Relatório... 42 2.4.3.7 Manter Matrícula... 42 2.4.3.8 Manter Professor... 44

2.4.3.9 Realizar Atividade... 46 2.4.4 Modelo Relacional... 47 3 TECNOLOGIAS UTILIZADAS NO PROJETO... 48 3.1 LINGUAGENS... 48 3.1.1 HTML5... 48 3.1.2 CSS3... 50 3.1.3 JavaScript... 52 3.1.4 Java... 53 3.1.5 JavaServer Faces... 53 3.1.6 JavaScript Object Notation... 54 3.2 BIBLIOTECAS... 55 3.2.1 jquery... 55 3.2.2 Bootstrap... 56 3.2.3 Gson... 57 3.3 FERRAMENTAS... 58 3.3.1 NetBeans... 58 3.3.2 GlassFish... 60 3.3.3 PostgreSQL... 60 3.4 INTERAÇÃO HUMANO-COMPUTADOR... 61 3.4.1 Tecnologias e Pessoas... 61 3.4.2 Desenvolvimento Centrado no Humano... 62 3.4.3 Entendendo a Necessidade das Pessoas... 62 3.4.4 Usabilidade... 63 4 IMPLEMENTAÇÃO... 64 4.1 LOGIN... 64 4.2 MENUS... 64 4.2.1 Menu Atividades... 65 4.2.2 Menu Lateral... 65 4.3 ATIVIDADES... 66 4.3.1 Jogo de Rimas... 66 4.3.2 Jogo de Escrita... 67 4.3.3 Manipulação de fonemas... 67 4.4 CADASTROS... 68 4.4.1 Cadastro do Aluno... 68

4.4.2 Cadastro do Professor... 69 4.4.3 Cadastrar Escola... 71 4.4.4 Cadastrar Matrícula... 72 4.4.5 Cadastrar Equipamento TA.... 74 4.5 ESTATÍSTICA... 75 4.6 RELATÓRIO... 76 CONCLUSÃO... 78 REFERÊNCIAS BIBLIOGRÁFICAS... 79 ANEXO A AUTORIZAÇÃO DO SOFTWARE BOARDMAKER.... 85

18 INTRODUÇÃO A informática de um modo geral, está presente na vida de muitas pessoas, pois o computador tem se tornado indispensável para a realização de várias tarefas na atualidade e ganha cada vez mais espaço nas atividades escolares. Conforme nos apontam Araújo e Benassi (2005) no mercado brasileiro de tecnologia já existem vários software e páginas web com objetivos educacionais que apresentam atividades rotineiras que educadores utilizam em suas aulas. Esses software geralmente tem o objetivo de tornar as aulas e atividades mais atraentes e motivadoras para alunos e professores. Ainda segundo as autoras, a informática traz benefícios às pessoas com algum tipo de deficiência de forma ampla, ao oferecer desde recursos adaptados como por exemplo um mouse ou teclado de vários tamanhos e formas até os diversos software de ensino. Segundo o IBGE (2010), aproximadamente 45 milhões de pessoas declararam ter pelo menos uma deficiência, que corresponde a 23,9% da população brasileira. Já a taxa de alfabetização da população de 15 anos ou mais que possui pelo menos uma deficiência, é de 81,7%, uma diferença de 8,9 pontos percentuais em relação à população total 90,6%. Por outro lado, com a chegada da educação inclusiva, o conceito de ensino a pessoas com deficiência mudou para o direito de todos os alunos aprenderem juntos, sem nenhum tipo de discriminação (MEC/SEESP, 2010a). Sobretudo, a educação inclusiva continua sendo um desafio, pois as escolas precisam de uma reforma e de reestruturação como um todo. Para se entender o processo de educação inclusiva atual e então definir o universo de atuação deste projeto, faz-se saber que em princípio os alunos com deficiência devem estar matriculados na classe comum do ensino regular e no Atendimento Educacional Especializado (AEE) que é um complemento com recursos especiais. O AEE se realiza em todos os níveis, modalidades e etapas de ensino e normalmente é realizado no turno inverso da escolarização. Como prioridade, o atendimento do AEE é realizado na Sala de Recursos Multifuncionais (SRMF) que possui materiais didáticos, pedagógicos e equipamentos específicos, que pode ser na própria escola ou em outra. O AEE também pode ser aplicado nos núcleos, centros

19 de atendimento educacional especializado, classes hospitalares ou nos domicílios. (MEC/SEESP, 2010b) As dificuldades na educação escolar dos alunos com deficiência não são somente baseadas na idade ou em qual deficiência possuem, pois cada um tem um nível intelectual individualizado e desenvolvimentos diferentes. Por isso, o AEE tem a função de identificar e elaborar atividades pedagógicas para facilitar e melhorar o aprendizado. O mesmo possui os recursos adaptados que são materiais adaptados para cada tipo de necessidade e não uma tecnologia necessariamente. Também existe a Tecnologia Assistiva (TA) que são recursos, produtos, atividades, entre outras coisas que visa a independência e melhor qualidade de vida de pessoas com deficiência. (CAT, 2009) Uma das diversas metas na educação escolar é a alfabetização, um processo muito importante para qualquer ser humano. O objetivo geral deste trabalho é desenvolver uma aplicação web de apoio à alfabetização inicial voltada a alunos com deficiência, com o uso de atividades pedagógicas definidas por profissionais especializados. A aplicação chama-se Juba Esperto e é baseada nas necessidades dos alunos atendidos pelo Núcleo de Apoio Integrado ao A.E.E Prof.ª Elizabeth Guedes Chinali, fundado em 2010 pela Secretaria Municipal de Educação de Lins. Este núcleo foi criado com o objetivo principal de aprimorar e garantir o processo de inclusão escolar dos alunos com qualquer deficiência e/ou necessidades educacionais especiais matriculados no município. Nele é oferecido apoio às unidades escolares e às famílias. A justificativa deste trabalho deve-se ao fato de que existe uma deficiência de programas ou sites que sejam de baixo custo ou mesmo gratuitos, que possuam atividades pedagógicas que possam atender as necessidades dos alunos com deficiências no processo de inicialização de alfabetização. Também, a aplicação possui páginas de cadastros de alunos, professores, escolas, matrículas e equipamentos TA, para que com os dados possa gerar estatísticas e relatórios. O desenvolvimento da aplicação é apoiado por métodos da Interação Humano- Computador (IHC). O IHC é um estudo que procura exemplificar maneiras de desenvolver aplicações centradas no humano, onde o mais importante são as pessoas e não a tecnologia. Ser centrado no humano é colocar as pessoas em

20 primeiro lugar; é projetar sistemas interativos que favoreçam as pessoas e dos quais elas possam usufruir. (BENYON, 2011, p. 6) Também, realizou-se entrevistas com os funcionários e professores do Núcleo, com o intuito de conhecer as reais necessidades e atividades que precisam ser feitas para atingir o objetivo da inicialização da alfabetização para alunos com deficiência. As atividades foram elaboradas pela aluna Daiyane Akemi Morimoto e orientadora responsável Professora Doutora Fabiana Sayuri Sameshima no projeto de iniciação científica do UNISALESIANO, do curso de pedagogia. A fim de obter atividades funcionais e didáticas para os alunos do núcleo. O logo e as imagens do leão Juba Esperto, foram criadas e compradas do designer Márcio Coelho. As tecnologias utilizadas no desenvolvimento da aplicação são as linguagens HTML5, CSS3, JavaScript, Java, JSF e JSON, juntamente com as bibliotecas jquery, Bootstrap, Gson. Como também as ferramentas NetBeans, GlassFish e o banco de dados PostgreSQL. Este trabalho é estruturado em quatro capítulos. No primeiro capítulo, são apresentados os principais conceitos da alfabetização inicial, educação inclusiva e tecnologia assistiva. No segundo capítulo, são apresentadas a análise de negócio, a análise de requisitos, o caso de uso e diagramas, que possibilitam uma visão mais ampla dos problemas e melhores soluções para os mesmos. No terceiro capítulo, é abordada a descrição de cada tecnologia utilizada, explicando-se qual a função desempenhada por cada uma delas. Dentre elas, destacam-se as linguagens de programação, as bibliotecas, as ferramentas, o banco de dados e o método IHC. Por fim, no quarto capitulo, contém as páginas da aplicação e suas principais funcionalidades.

21 1 CONCEITOS GERAIS Atualmente, atividades pedagógicas realizadas no computador por meio de software ou páginas web tem auxiliado pessoas com algum tipo de deficiência no início da alfabetização, de uma forma mais efetiva e assim obtendo os resultados com mais sucesso. (ARAÚJO; BENASSI, 2005) Neste capítulo, é feita uma apresentação dos principais conceitos da alfabetização inicial, educação inclusiva e tecnologia assistiva aplicados neste projeto. 1.1 ALFABETIZAÇÃO INICIAL O processo da alfabetização é muito importante para qualquer pessoa, que permite o domínio da leitura e escrita. Esta etapa da vida é indispensável e importante no nosso dia-a-dia. (BELLI, 2004) De acordo com Abreu (2000), a alfabetização é considerada pela pedagogia brasileira como uma etapa escolar anterior ao ensino da língua portuguesa e é uma aprendizagem ampla e complexa. O termo alfabetização não ultrapassa o significado de levar à aquisição do alfabeto, ou seja, ensinar o código da língua escrita, ensinar as habilidades de ler e escrever. (SOARES, 1985, p. 20) Os pré-requisitos necessários para a alfabetização são as habilidades: perceptuais, motoras e linguísticas. (OLIVEIRA, 2009) 1.1.1 Habilidades Perceptuais A habilidade perceptual envolve a capacidade de distinguir as formas, cores detalhes, sensações táteis, sons, cheiros e gostos. Em prioridade são as capacidades de percepção auditiva e visual. (SANTOS, 2004) Segundo Belli (2004) a percepção auditiva é fundamental para aprendizagem da escrita, por que a partir dos sons da fala que o aluno deverá relacionar com o que ele irá escrever. Alguns exemplos de atividades que podem ser utilizadas: a) Identificar objetos cujas sílabas iniciais tenham o mesmo som; b) Dizer o nome de objetos, apenas pelo som produzido por esse objeto, (tambor, chocalho, buzina, violão, piano, pandeiro,

22 etc.); c) Imitar vozes de animais; d) Cantar músicas infantis em que existam palavras de sons parecidos ou rimados; e) Imitar sons produzidos pela professora (palmas, apitos, campainhas, etc.) (CAMERA PRO, 2012) Para que os alunos dominem conceitos de percepção visual o professor deverá desenvolver atividades relacionadas com os conceitos conforme o Quadro 1.1: Quadro 1.1 Conceitos de Percepção Visual. Semelhança e Diferença Entre pessoas, objetos, cores e formas Distância Posição Forma Tamanho Quantidade Fonte: Camera Pro, 2012. Perto e longe A frente, atrás, ao lado, entre, embaixo, em cima, primeiro e último Retângulo, triângulo, círculo, quadrado e redondo Grande, pequeno, alto, baixo, comprido, curto, maior e menor Muito, pouco, menos, mais, coleção e unidade O conceito de direita e esquerda também é muito importante, para o aluno distinguir os lados em si e nas outras pessoas, nas imagens, e objetos. (SANTOS, 2004) 1.1.2 Habilidades Motoras Há dois tipos de habilidades motoras: a coordenação motora ampla ou grossa que trabalha a movimentação ampla de todo o esquema corporal e a coordenação motora fina que trabalha os movimentos mais elaborados de dedos, mãos e braços. (PELLEGRINI et al, 2003) Na coordenação motora ampla ou grossa é necessário que os alunos controle seus movimentos, que eles conheçam seu próprio corpo e suas possibilidades de movimento, que ele seja capaz de movimentar apenas uma parte do corpo por exemplo ou que seja capaz de iniciar e interromper adequadamente os movimentos. E com algumas atividades poderá ajudá-lo a desenvolver a coordenação tais como saltar obstáculos, pular corda, pular amarelinha, fazer movimentos ao som de músicas lentas ou de animais e entre outras. (PELLEGRINI et al, 2003) A coordenação motora fina é fundamental para a aprendizagem da escrita, pois

23 se utiliza os movimentos dos dedos, mãos e braços. Umas das dificuldades é a velocidade na manipulação de objetos, a postura da mão de como usar uma tesoura, um lápis e escrever. (OKUDA, 2010) 1.1.3 Habilidades Linguísticas Além de treinar as habilidades perceptuais e motoras do aluno, o professor deve desenvolver juntamente a linguística, por meio de atividades que despertem o gosto da leitura e escrita. Nesta Seção, são apresentados conceitos básicos e definições de Linguística envolvidos no projeto. A palavra Linguística é o nome da ciência que se dedica ao estudo da linguagem. (SAUSSURE, 2006) O significado de linguagem é a capacidade do homem comunicar seus sentimentos, ideias e expressões, por meio da escrita, da fala e outras formas como gestos, símbolos, sons, imagens, etc. Assim, linguagem é qualquer sistema em que pessoas possam se comunicar. (FERREIRA, 2000) Ademais, a linguagem pode ser verbal (em que se faz o uso das palavras) por exemplo diálogo, bilhete, texto narrativo, carta, entrevista, jornal escrito, etc. Como também, pode ser não verbal (em que se utiliza outros métodos de comunicação que não são as palavras) por exemplo imagens, desenhos, símbolos, placas, linguagem corporal, gestos, entre outros. (VILARINHO, 2014) Também, existe a linguagem mista que simultaneamente utiliza a linguagem verbal e não verbal. Por exemplo, histórias em quadrinhos, charges, anúncios publicitários que possuem diálogos, imagens e símbolos. (VILARINHO, 2014) Gerber (1996) afirma que a linguagem é um sistema estruturado de regras e princípios para relacionar som e significado, contendo quatro subsistemas de regras, descritos brevemente: a) Fonológicas: classifica e combina os sons da linguagem; b) Morfológicas: determina a estrutura interna e a formação de palavras; c) Semânticas: define os significados da produção e interpretação de palavras e frases; d) Sintáticas: combina palavras e frases formando sentenças. A habilidade linguística proporciona o domínio da leitura e da escrita, ampliando conhecimentos, vocabulário e facilidade na comunicação. (GOULART, 2010)

24 1.2 EDUCAÇÃO INCLUSIVA O conceito de Educação Inclusiva teve início com a Declaração de Salamanca, em junho de 1994. A declaração reconhece a necessidade e urgência da educação para crianças, jovens e adultos com necessidades educacionais especiais dentro do sistema regular de ensino. Além disso, reafirma o compromisso com a educação para todos, que garante a Estrutura de Ação em Educação Especial, que tem como objetivo informar organizações e instituições que implementam a declaração sobre princípios, políticas e práticas em Educação Especial. (SALAMANCA, 1994) A Educação Inclusiva é uma ação política, cultural, social e pedagógica em defesa dos alunos com deficiência de estarem aprendendo junto aos outros alunos, sem qualquer discriminação. A Educação Inclusiva baseia-se na Declaração dos Direitos Humanos onde todos são iguais, sem qualquer distinção e plena igualdade em direitos. (MEC/SEESP, 2010a) Há tempos, no Brasil, utilizou-se escolas especiais como um meio de adaptação de ensino a alunos com deficiência, assumindo o compromisso da escola comum. Acreditava-se que esses alunos careciam de condições escolares especializadas, o que os dirigia a ensinos adaptados, turmas com número reduzido de alunos, professores especializados e outras condições que envolviam o processo educacional. (BATISTA, 2006) O direito a participar envolve que todos os alunos tenham direito a aprender nas escolas, que participe das atividades e no currículo comum tanto quanto seja possível. Todos alunos têm direito a educarem-se em um âmbito comum, que assegure sua participação na sociedade. (GUIJARRO, 2005) O objetivo da Educação Inclusiva é a construção de escolas receptivas a alunos com deficiência, onde não existem exigências de natureza alguma e descriminação para o acesso e permanências dos alunos. (BATISTA, 2006) Mantoan (2003) diz que a inclusão não acontecerá enquanto as pessoas se sentirem no direito de escolherem quem será incluso. Existem muitos preconceitos que precisam ser vencidos, pois a inclusão é sempre um debate e não é uma tarefa fácil. É preciso novas atitudes, práticas pedagógicas reflexivas, que buscam uma educação comprometida com a realidade.

25 É importante frisar que o artigo 4º da Convenção sobre os Direitos das Pessoas com Deficiência, destaca que é compromisso do Estado assegurar os direitos da pessoa com deficiência. Neste mesmo artigo, é declarada a proibição de qualquer tipo de discriminação em todos os aspectos da vida, como saúde, educação, transporte e acesso à Justiça. (BRASIL, 2009) O Brasil faz parte do processo de construção da Convenção, que apoia e contribui em todas as etapas da elaboração desse tratado (BRASIL, 2007). Também, a Política Nacional de Educação Especial na Perspectiva da Educação Inclusiva garante o acesso, a participação e a aprendizagem dos alunos com deficiência nas escolas regulares, desde o ensino infantil até o ensino superior. (MEC/SEESP, 2010a) 1.2.1 Atendimento Educacional Especializado Conforme Batista (2006) é um dever das escolas em não se contentar com o que o aluno já sabe, incentivando-o a avançar no entendimento de um fenômeno, ou de um objeto e de torna-lo capaz de diferenciar o que estuda do que já sabe. Entretanto, as escolas terão limitações naturais no que se trata a alunos com deficiência, ainda mais com alunos com deficiência mental. Essa realidade, demonstra a necessidade de um espaço que não possua características clínicas, e sim, que resguarde características educacionais. (BATISTA, 2006) Em virtude disso, está previsto na Constituição de 1998 o Atendimento Educacional Especializado (AEE) para as pessoas com deficiência, onde esse atendimento seja preferencialmente na rede regular de ensino. Ainda segundo Batista (2006) o AEE tem como objetivo complementar e suplementar a formação do aluno com disponibilização de serviços, recursos de acessibilidade e estratégias que eliminam as barreiras para sua inclusão na sociedade e desenvolvimento de sua aprendizagem. Para que o aluno tenha o atendimento educacional especializado, basta estar matriculado na rede ensino público. O aluno tem acesso a Sala de Recursos Multifuncionais (SRMF) ou em centros de AEE da rede pública. O AEE também pode ser aplicado nos núcleos, classes hospitalares ou nos domicílios normalmente são realizadas no turno inverso da escolarização. (MEC/SEESP, 2010b)

26 As SRMF são espaços físicos realizados nas escolas públicas onde se aplica o AEE, possuem matérias didáticas, mobiliário, recursos pedagógicos e de acessibilidade e equipamentos específicos. (MEC/SEESP, 2010b) 1.3 TECNOLOGIA ASSISTIVA A evolução tecnológica tem proporcionado inúmeras ferramentas e aparatos que ajudam e facilitam as atividades do cotidiano, como talheres, canetas, computadores, controles remotos, automóveis, telefones celulares, relógios, enfim, uma lista imensa de recursos que fazem parte da vida do ser humano. (BERSCH, 2013) De acordo com Galvão Filho (2009) o termo Tecnologia Assistiva (TA) surgiu pela primeira vez em 1988, como importante elemento jurídico dentro da legislação norte-americana. Segundo Bersch (2013) TA é um termo usado para identificar todo conteúdo de recursos e serviços, que ajudam no desenvolvimento das habilidades funcionais de pessoas com deficiência e promover autonomia e inclusão. Do mesmo modo, a TA busca melhorar o cotidiano das pessoas com deficiência, tornando-as independentes e ativas. De acordo com Radabaugh (1993) Para as pessoas sem deficiência a tecnologia torna as coisas mais fáceis. Para as pessoas com deficiência, a tecnologia torna as coisas possíveis. A TA inclui recursos de comunicação alternativa, atividades cotidianas, acessibilidade ao computador, adaptação de veículos, próteses e entre outros para qualidade de vida. (ALVES, 2006) Segundo Galvão Filho (2013) a construção do conceito de TA tem passado por diversas fases e etapas, embora essa construção seja bastante curta e recente. A expressão TA é nova e está passando por um processo de formulação. Os recursos de TA estão presentes no nosso dia-a-dia, sua utilização é bem simples e prática como por exemplo uma bengala, que proporciona uma segurança e conforto no caminhar, bem como um aparelho de amplificação utilizado por pessoas com deficiência auditiva. (MANZINI, 2005) Da mesma forma, utiliza-se recursos pedagógicos adaptados para auxiliar na alfabetização de alunos de acordo com cada deficiência ou necessidade, tanto ao

27 professor quanto ao educando. Esses recursos facilitam o acesso à educação escolar, contribuindo na diminuição das limitações do aluno. (UTA et al, 2013) Na Figura 1.1 é ilustrado um recurso de TA, para auxiliar alunos com deficiência motora a utilizarem os recursos da computação. Este aparelho é utilizado para posicionar o punho e polegar de forma que a pessoa consiga pressionar uma tecla do teclado. Figura 1.1 Estabilizador de Punho e Abdutor de Polegar. Fonte: Galvão Filho; Damasceno, 2008. A TA surgiu por meio de avanços tecnológicos de diversas áreas já estabelecidas. São métodos de domínio de profissionais de várias áreas, que interagem para restauração da função humana. Tecnologia Assistiva significa pesquisa, fabricação, uso de equipamentos, recursos ou estratégias utilizadas para tornar eficaz as habilidades funcionais de pessoas com deficiência. (CAT, 2009) Portanto, a tecnologia assistiva diferencia-se de toda tecnologia médica ou de reabilitação, onde seus objetivos visam o diagnóstico ou tratamento na área da saúde. Seus objetivos apontam para recursos que geram autonomia pessoal e vida independente. (BERSCH, 2013)

28 2 ANÁLISE E PROJETO DE SISTEMA Este capítulo, descreve as principais informações do ambiente onde será utilizado a aplicação. Também é apresentado a análise de negócios e análise de requisitos, juntamente com os casos de uso e demais diagramas utilizados neste projeto, para facilitar a visão dos problemas e possíveis soluções. 2.1 O AMBIENTE DO USUÁRIO Criado em 2010, o Núcleo de Apoio Integrado ao Atendimento Educacional Especializado Prof.ª Elizabeth Guedes Chinali, no Município de Lins/SP, que atende alunos com deficiência e/ou necessidades educacionais especiais de todas as modalidades de ensino ofertadas pela Rede Municipal de Ensino e segue o calendário escolar, não funcionando em período de férias e recesso escolar. Atualmente, a composição da equipe do núcleo é a Diretora Prof. Me. Katia de Moura Graça Paixão, contendo aproximadamente 7 professoras do atendimento educacional especializado. Juntamente com os funcionários de apoio, motorista e musicoterapeuta. Também os supervisores de diversas áreas, dentre elas de pedagogia a Professora Doutora Fabiana Sayuri Sameshima, de psicologia, de educação física, de fisioterapia, de terapia ocupacional, um coordenador de área de enfermagem, e uma fonoaudióloga juntamente com os estagiários de cada área. Até o primeiro semestre de 2014, cerca de 80 alunos estavam matriculados no núcleo. Com diversos tipos de deficiência. Dentre elas: deficiência múltipla, autismo, deficiência visual, deficiência auditiva, deficiência física, deficiência intelectual, transtornos desintegrativos da infância (semelhante ao autismo, ambos têm uma perda da linguagem, social e habilidades motoras) e entre outros. Entre os objetivos do núcleo, destaca-se: oferecer aos alunos atendimento compatíveis com suas necessidades individuais, proporcionar a continuidade de escolarização nos níveis mais elevados do ensino, melhorar a qualidade do ensino inclusivo por meio do aprimoramento do processo pedagógico no âmbito escolar e considerar o aluno com deficiência como sujeito do processo de aprendizagem e ser de possibilidades.

29 2.2 ANÁLISE DE NEGÓCIOS A análise de negócios, procura as melhores soluções que atendam às necessidades dos clientes, para promover produtos e serviços da melhor forma. (BABOK, 2014) Nesta sessão, são apresentadas as instruções do problema, a análise de mercado e quais são os usuários que utilizara a aplicação desse projeto. 2.2.1 Instrução do Problema Por conta da dificuldade de alguns alunos no processo inicial de alfabetização, surgem outros mecanismos de aprendizagem para motivação como software e sites educativos. Além do fato de que alunos com deficiência possuem dificuldades de atenção, falta de habilidades com o computador, preferências, aptidões e entre outras coisas, algumas pessoas sem deficiência também possuem dificuldades semelhantes, necessitando apenas de oportunidades para desenvolver seus potenciais e expandir suas habilidades educacionais através da informática. (OLIVEIRA, 2011) No núcleo, as maiores dificuldades dos alunos estão em entender como as letras representam os sons e que esses sons formam as palavras. E muitos também tem a dificuldade de fala e na coordenação motora para escrever ou utilizar o computador. Mais para algumas das dificuldades em utilizar o computador, existe diversos equipamento de TA para auxilia-lo. Para que o núcleo possua um mecanismo a mais para utilizar na educação dos alunos, propôs-se desenvolver uma aplicação web com atividades pedagógicas de alfabetização inicial voltada a pessoas com deficiência. 2.2.2 Análise de Mercado É perceptível que, nas últimas décadas, os computadores estão sendo mais utilizados nas escolas, seja para o uso de pesquisas, elaboração de avaliações, elaboração de atividades, controle de presença, para uso em sala de aula e entre outras coisas.

30 Como também, os profissionais da educação, têm buscado alternativas inclusivas para ensinar seus alunos de uma forma mais dinâmica, interativa, participativa e inovadora, com atividades no computador. (PEDRO, 2012) Hoje existe inúmeros software e sites voltados a educação para pessoas com deficiência, de diversas formas, valores e poucos gratuitos. O núcleo já utiliza alguns software, dentre eles: alfabetização fônica, coleção fono na escola, Boardmaker, que são pagos e o Participar que é gratuito. Sendo assim, a aplicação visa atender as necessidades dos alunos do núcleo gratuitamente nesta versão, com atividades iniciais de alfabetização. Ressalta-se que a aplicação é apenas um complemento, que não pretende substituir as aulas em sala de aula com o professor. 2.2.3 Usuários Na aplicação apenas os professores podem efetuar o login, mas existem dois tipos de usuários: professores administradores e professores comuns. Os professores administradores tem acesso a todos os recursos da aplicação, como cadastros, atividades, estatísticas e relatórios. Os professores comuns apenas não podem efetuar o cadastro de novos professores, escolas e matrículas. Os alunos serão usuários indiretos, que não fazem o login, mas utilizam a aplicação realizando as atividades com o auxílio de algum professor. 2.3 VISÃO GERAL DO PRODUTO A aplicação Juba Esperto tem atividades baseadas no desenvolvimento da consciência fonológica, aspecto importante para que o aluno possa fazer relação dos sons da fala em palavra escrita ou imagens. De fato, algumas pessoas com deficiência apresentam dificuldades com a consciência fonológica, por isso as atividades são baseadas em: a) identificar os fonemas; b) trabalhar sílabas em diferentes partes da palavra; c) reconhecer palavras que comecem ou terminem com o mesmo som; d) se conscientizar da extensão e partes das palavras; e) manipular as sílabas para a formação de palavras.

31 As atividades foram elaboradas em conjunto ao projeto de iniciação científica do UNISALESIANO pela aluna Daiyane Akemi Morimoto e orientadora responsável Professora Doutora Fabiana Sayuri Sameshima, do curso de pedagogia, a fim de obter atividades funcionais e didáticas para os alunos do núcleo. O logo e as imagens do leão Juba Esperto, foram criadas e compradas do designer Márcio Coelho. Também, solicitamos a autorização da utilização de 30 símbolos PCS em algumas atividades do software Boardmaker com todos os direitos reservados 2014 Tobii - DynaVox - Mayer-Johnson, conforme autorização no Anexo A. 2.3.1 Perspectiva do Produto A proposta é que a aplicação seja utilizada no núcleo, por seus alunos, visando atender às dificuldades de alfabetização inicial, com atividades mais dinâmicas e objetivas. As atividades serão realizadas no computador, sendo assim deverão ser adaptadas a cada usuário, conforme suas necessidades para utilização. 2.3.2 Premissas e Dependência Para a utilização desta aplicação, o usuário deve estar no núcleo em um computador que tenha um browser instalado. Vale ressaltar que a aplicação não está disponível na Internet, inicialmente está hospedada em servidor local. 2.3.3 Funcionalidades A aplicação tem as seguintes funcionalidades descritas: a) Cadastros: possui de alunos, professores, escolas, matrículas e equipamentos de Tecnologia Assistiva. b) Atividades: Possui a Manipulação de fonemas, Jogo de Escrita e Jogo de Rimas, cada atividade possui números de acertos e erros. c) Estatísticas: mostra o total de acertos e erros das atividades realizadas pelo aluno, possibilitando a visualização por dia, semana ou mês. d) Relatórios: cadastro de alunos, cadastro de professores, cadastro de escolas, cadastro de matrículas e cadastro de equipamentos de Tecnologia Assistiva.

32 2.4 ANÁLISE DE REQUISITOS Para este trabalho, o desenvolvimento da arquitetura baseia-se na Unified Modeling Language (UML). Utilizou-se a ferramenta Astah, para criar os diagramas de caso de uso, classe, atividades, Modelo-Visão-Controle (MVC) e o de sequência. E o modelo relacional do banco de dados, utilizou-se a ferramenta pgmodeler. 2.4.1 Caso de Uso Segundo Leal, Mâcedo e Spinola (2014), o diagrama de caso de uso é utilizado normalmente nas fases de levantamento e análise de requisitos do sistema. Ele apresenta uma linguagem simples para que o usuário possa compreender o funcionamento do sistema. Este diagrama procura identificar atores (usuários, outros sistemas etc.) que utilizaram o software, e os serviços que o sistema disponibilizará para eles. Figura 2.1 Diagrama de Caso de Uso.

33 2.4.2 Diagrama de Classe O diagrama de classe, permite a visualização das classes que compõe o sistema, com seus respectivos atributos e também como as classes se relacionam. (LEAL; MÂCEDO; SPINOLA, 2014) Figura 2.2 Diagrama de Classe.

34 2.4.3 Especificações de Histórias e Diagramas Nesta subseção, são apresentadas as especificações de histórias representando as funcionalidades da aplicação, contendo os diagramas de atividade, MVC e de sequência. 2.4.3.1 Efetuar Login A página de login é o primeiro passo para que o usuário tenha acesso a aplicação. Neste passo o usuário deve informar seu nome identificador e senha, em seguida é feita a verificação e autorização de acesso do usuário. Após a autorização a aplicação é redirecionada para a página de menu de atividades. Caso contrário o usuário é informado de que não possui autorização de acesso. 2.4.3.2 Consultar Estatística do Aluno Todos usuários professores, podem consultar as estatísticas dos alunos em relação as atividades realizadas. Nessa estatística, é possível visualizar os erros e acertos dos alunos. Figura 2.3 Diagrama de Atividade. Consultar Estatística do Aluno

35 Figura 2.4 MVC. Consultar Estatística do Aluno Figura 2.5 Diagrama de Sequência. Consultar Estatística do Aluno

36 2.4.3.3 Manter Aluno No cadastro de aluno, todos os professores podem visualizar, incluir novos alunos e alterar informações. Também, tem a opção de excluir o aluno, mais antes é feita uma verificação se existe vínculos de dados, se existir, não poderá excluir, apenas terá a opção de mudar a situação para inativo. Figura 2.6 Diagrama de Atividade. Manter Aluno

37 Figura 2.7 MVC. Manter Aluno Figura 2.8 Diagrama de Sequência. Manter Aluno

38 2.4.3.4 Manter Equipamento TA Nesse cadastro, todos os professores podem incluir novos equipamentos de TA, alterar, excluir ou apenas inativar. Figura 2.9 Diagrama de Atividade. Manter Equipamento TA

39 Figura 2.10 MVC. Manter Equipamento TA Figura 2.11 Diagrama de Sequência. Manter Equipamento TA

40 2.4.3.5 Manter Escola Nesse cadastro, somente o professor Administrador, pode incluir novas escolas, alterar, excluir ou apenas inativar. É preciso que a escola esteja cadastrada primeiro para que as matrículas possam ser cadastradas. Os professores do tipo de usuário comum, podem apenas visualizar o cadastro. Figura 2.12 Diagrama de Atividade. Manter Escola

41 Figura 2.13 MVC. Manter Escola. Figura 2.14 Diagrama de Sequência. Manter Escola.

42 2.4.3.6 Gerar Relatório A aplicação, disponibiliza relatórios de cadastros de alunos, professores, escolas e matrículas. 2.4.3.7 Manter Matrícula No cadastro de matrícula, apenas os professores com o usuário administrador podem incluir novas matrículas, alterar dados, excluir ou mudar a situação (se está cursando, concluído, transferido ou cancelado). Para cadastrar uma nova matrícula é necessário ter um aluno e escola cadastrados na aplicação. Os professores do tipo de usuário comum, podem apenas visualizar o cadastro das matrículas. Figura 2.15 Diagrama de Atividade. Manter Matrícula

43 Figura 2.16 MVC. Manter Matrícula Figura 2.17 Diagrama de Sequência. Manter Matrícula

44 2.4.3.8 Manter Professor No cadastro do professor, apenas o usuário administrador pode incluir novos professores e alterar informações. Também, poderá excluir, mais antes é feita uma verificação se existe vínculos de dados, se tiver não poderá excluir, apenas poderá alterar a situação para inativo. Os usuários do tipo comum, podem apenas alterar o próprio cadastro, com exceção do campo tipo de usuário, os demais cadastros pode apenas visualizar. Figura 2.18 Diagrama de Atividade. Manter Professor

45 Figura 2.19 MVC. Manter Professor Figura 2.20 Diagrama de Sequência. Manter Professor

46 2.4.3.9 Realizar Atividade O professor, deve selecionar o aluno que irá realizar a atividade. Depois, o aluno realizará a atividade, juntamente com um professor para auxilia-lo. Logo depois, de realizar a atividade, a aplicação armazena informações dos acertos e erros do aluno. Figura 2.21 Diagrama de Atividade. Realizar Atividade Figura 2.22 MVC. Realizar Atividade

47 Figura 2.23 Diagrama de Sequência. Realizar Atividade 2.4.4 Modelo Relacional Figura 2.24 Modelo Relacional

48 3 TECNOLOGIAS UTILIZADAS NO PROJETO Neste capítulo são apresentadas as linguagens, tecnologias e ferramentas utilizadas no desenvolvimento da aplicação desse projeto e suas principais características. São ainda apresentados os métodos e conceitos do IHC que apoiam a construção desse projeto. 3.1 LINGUAGENS Esta sessão apresenta as linguagens utilizadas no desenvolvimento da aplicação desse projeto. Segundo Dershem e Jipping (1995) uma linguagem de programação é um método padronizado para comunicar instruções para o computador. É um conjunto de regras sintáticas e semânticas usadas para definir um programa de computador. (FISCHER; GRODZINSKY, 1993) 3.1.1 HTML5 Segundo Ferreira e Eis (2010) o Hypertext Markup Language (HTML) foi desenvolvido por Tim Berners-Lee na década de 90 e atualmente é regida pelo World Wide Web Consortium (W3C). O HTML é uma linguagem de marcação de hipertexto, na qual são escritas as páginas web através de marcações que definem o tipo de letra, tamanho, espaçamento e outros aspectos do site, que são interpretados pelo navegador. O HTML5 surgiu a partir de um consórcio entre a W3C e a Web Hypertext Application Technology Working Group (WHATWG). As principais mudanças são: mais tags para substituir scripts, melhor tratamento de exceção, redução da necessidade de plugins externos e independência de plataforma. (DEVMEDIA, 2013) A estrutura onde é montada a página HTML se chama tag, no qual, o navegador é responsável por interpretar o que está entre elas. (CAELUM, 2014a) No Código Fonte 3.1, são mostradas as principais tags para a construção de uma página HMTL.

49 Código Fonte 3.1 Estrutura Básica do HTML. Fonte: Caelum, 2014a. Novas características do HTML5 que se destacam são os elementos canvas, audio e video. (DEVMEDIA, 2013) O Canvas permite desenhar gráficos em uma página web utilizando JavaScript, como por exemplo círculos, retângulos, linhas, imagens, etc. O Código Fonte 3.2 é um exemplo do canvas, que cria uma linha diagonal. Código Fonte 3.2 Utilização da tag canvas. Fonte: W3Schools, 2014b. O HTML5 dá suporte para a reprodução de áudio e vídeo, sem a necessidade de utilizar mecanismos externos, apenas incluindo a tag especifica no documento. Código Fonte 3.3 Utilização da tag audio. Fonte: W3Schools, 2014a.

50 Código Fonte 3.4 Utilização da tag video. Fonte: W3Schools, 2014c. O Código Fonte 3.3 é um exemplo da tag audio que permite a execução de arquivos de áudio e o Código Fonte 3.4 um exemplo da tag video que permite a execução de arquivos de vídeo. 3.1.2 CSS3 Criado no final de 1996, o Cascading Style Sheets (CSS) é uma folha de estilo em cascata, que formata a informação entregue pelo HTML, como por exemplo uma imagem, um texto ou qualquer outro elemento. Foi desenvolvido para habilitar o formato de um documento e a separação de algum conteúdo proporcionando flexibilidade e controle das características. (PEREIRA, 2009) Ainda segundo o autor, o CSS pode ser utilizado para padronizar a formatação e estilo de diversas páginas de um site. Isso acontece pela criação de um arquivo externo que possui todas as regras aplicadas, desta forma, todas as páginas HTML do site podem utilizar o mesmo arquivo e assim terem a mesma formatação e estilo. O Código Fonte 3.5 é um exemplo de como uma página HTML pode utilizar a formatação e estilo de um arquivo CSS externo. Código Fonte 3.5 Link de um arquivo CSS externo. Fonte: Elaborado pelos autores, 2014.

51 De acordo com Alvarez (2004) com o CSS pode-se criar formatações e estilos para a página HTML, como por exemplo incluir margens, cores, tipos e tamanhos de letras e etc. O CSS é simples de escrever, reduz tempo de criação e manutenção. De acordo com o W3C (2010) com os novos recursos do CSS3 há funcionalidades que permitem: a) seleção de elementos específicos de um determinado grupo de elementos; b) bordas arredondadas; c) sombra em texto e elemento; d) animações; e) seleção de elementos pares ou ímpares; f) controle de rotação; g) manipulação de opacidade, entre outros recursos. Ainda segundo o W3C (2010) o CSS possui os seletores encadeados e seletores agrupados que são a base, que representa uma estrutura, que é usada como uma condição para decidir quais elementos serão formatados. Segundo Barcellini (2001) há vários tipos de seletores, dentre eles: a) seleção por class, que pode especificar múltiplas classes, exemplo: div.rodape {...}; b) seleção por id, que somente um elemento pode ter um único atributo id e o atributo id deve ser único no documento, exemplo: div#rodape{...}; c) seleção encadeada; d) seleção por agrupado e entre outros. O Código Fonte 3.6 é um exemplo de seletor encadeado do CSS, que formata o link a, que está dentro de um strong, que está dentro de p e que está dentro de um div. Código Fonte 3.6 Seletor Encadeado do CSS. Fonte: Elaborado pelos autores, 2014. No Código Fonte 3.7 é apresentado a aplicação do CSS no próprio documento HTML, onde todos os seletores devem ficar entre a tag style. A formatação CSS utilizada é a mesma apresentada no Código Fonte 3.6, que faz com que o link do site da Fatec fique com a fonte da cor azul e fundo cinza. O link do site da Google não sofreu nenhuma alteração pois não está na mesma estrutura do seletor encadeado do CSS.

52 Código Fonte 3.7 Seletor Encadeado do CSS no HTML. Fonte: Elaborado pelos autores, 2014. O Código Fonte 3.8 é um exemplo de seletor agrupado, onde os elementos são selecionados em conjunto, separados por vírgula para que herdem a mesma formatação. Código Fonte 3.8 Seletor Agrupado do CSS. Fonte: Elaborado pelos autores, 2014. No Código Fonte 3.8 os elementos strong, em e span do documento HTML ficam com a fonte de cor azul aço, fundo cinza e bordas arredondadas. 3.1.3 JavaScript O JavaScript é uma linguagem de programação com suporte a características de Orientado a Objeto (OO) para criação de scripts. Surgiu no início de dezembro de 1995, desenvolvido pelo Netscape, que fornece níveis de interatividade para páginas Web e a mesma não faz parte da plataforma Java. (JAVA, 2014)

53 De acordo com Goodman (2001) o JavaScript utiliza a estrutura de hierarquia do HTML para permitir que os scripts entrem em contato com qualquer objeto em um documento. Ainda segundo o autor Goodman (2001) o JavaScript transforma informações estáticas em informações interativas e obtém um melhor resultado do que seria somente com o HTML. 3.1.4 Java Java é uma linguagem de programação orientada a objetos, que foi criada no início dos anos 90, pela antiga Sun Microsystems e mantida através de um comitê. (CAELUM, 2014b) As principais características e vantagens desta linguagem são: suporte à orientação a objetos; portabilidade; segurança; linguagem simples; alta performance; dinamismo; interpretada (o compilador pode executar os bytecodes do Java diretamente em qualquer máquina); independente de plataforma; etc. (DEVMEDIA, 2014) Além disso, há uma ampla quantidade de bibliotecas gratuitas para realizar os mais diversos trabalhos (tais como relatórios, gráficos, geração de código de barra, sistemas de busca, manipuladores de texto, persistência transparente, etc.) é um ponto fortíssimo para usar o Java, criando uma aplicação sofisticada, usando diversos recursos. (CAELUM, 2014b) Atualmente, o Java não só permeia a Internet, mas também é a força invisível por trás de muitas das aplicações e dispositivos que alimentam nossas vidas do diaa-dia. A partir de telefones móveis para dispositivos portáteis, jogos e sistemas de navegação para e-business Solutions, Java está em todo lugar. (ORACLE, 2014) 3.1.5 JavaServer Faces O JavaServer Faces (JSF) é um framework de Interface de Usuário (IU) para aplicações Java Web. Com a finalidade de facilitar a tarefa de escrever e manter as aplicações, obtendo componentes de IU reutilizáveis, gerencia o estado da IU nas solicitações do servidor, simples migração de dados da aplicação para IU e permite personalizar os componentes de IU para facilmente construir e reutilizar. (NETBEANS, 2014c)

54 Nesta aplicação será utilizada a versão 2.2 do JSF. Algumas novidades foram incorporadas a essa nova versão, dentre elas o Facelets, gerenciamento de recursos e o ciclo de vida para o processamento de requisições. (MEDEIROS, 2014) Segundo Medeiros (2014), o Facelets é uma tecnologia de template para JSF e uma substituição para o JSP, que atualmente é aplicado para fins de compatibilidade com sistemas legados. Nesta versão 2.2, algumas novidades são a composição de componentes e Ajax. Também, o JSF permite o gerenciamento de recursos como: imagens, arquivos JavaScript ou arquivos CCS. Os recursos podem ser empacotados no diretório /META-INF/resources no classpath ou /resources na aplicação Web. (MEDEIROS, 2014) Conforme Medeiros (2014), o JavaServer Faces também define um padrão para as fases do ciclo de vida no processamento de requisições que permite saber informações a respeito de validações, conversões e eventos. 3.1.6 JavaScript Object Notation O JavaScript Object Notation (JSON) é uma estrutura para transporte de dados em formato texto independente da linguagem. Constituído em duas estruturas: a) Uma coleção de pares nome/valor: caracterizado como um object, struct, record, dicionário, etc.; b) Uma lista ordenada de valores: caracterizado como uma array, vetor, sequência ou lista. (JSON, 2014) O object começa e termina com { } (chaves), cada nome é seguido por: (dois pontos) e os pares nome/valor são seguidos por, (virgula). (GONÇALVES, 2014) Figura 3.1 Estrutura do object. Fonte: JSON, 2014. O array começa e termina com [ ] (colchete) e os valores são separados por, (virgula). (GONÇALVES, 2014)

55 Figura 3.2 Estrutura do array. Fonte: JSON, 2014. 3.2 BIBLIOTECAS Nesta sessão, são apresentadas as bibliotecas utilizadas no desenvolvimento da aplicação desse projeto. 3.2.1 jquery jquery é uma biblioteca JavaScript, rica em recursos que torna mais simples a implementação de eventos e animações (JQUERY, 2014) Todos os recursos disponíveis no jquery podem ser feitos utilizando apenas JavaScript, a diferença está na quantidade de linhas utilizadas para implementar eventos e animações. O Código Fonte 3.9 é um exemplo do código JavaScript e o Código Fonte 3.10 é um exemplo do uso do jquery: Código Fonte 3.9 Exemplo JavaScript para Alterar a Cor de Fundo da Página. Fonte: Elaborado pelos autores, 2014. Código Fonte 3.10 Exemplo jquery para Alterar a Cor de Fundo da Página. Fonte: Elaborado pelos autores, 2014. Os Código Fonte 3.9 e 3.10 alteram a cor de fundo da página web, o código JavaScript utiliza quatro linhas, enquanto o código jquery utiliza apenas uma linha, o que torna o desenvolvimento mais simples e ágil.

56 Outra grande vantagem do jquery é a compatibilidade entre os diversos navegadores. No Quadro 3.1, é apresentada a compatibilidade dos principais navegadores com suas respectivas versões. Quadro 3.1 Compatibilidade de Navegadores com jquery. IE Chrome Firefox Safari Opera ios Android jquery 1.x jquery 2.x 6+ 9+ (Atual - 1) ou Atual Fonte: jquery, 2014. (Atual - 1) ou Atual 5.1+ 12.1x, (Atual - 1) ou Atual 6.0+ 4.0+ No Quadro 3.1 as versões (atual - 1) ou atual indicam que o jquery apoia a versão estável atual do navegador e a versão que o precedeu. Por exemplo, se a versão atual de um navegador é 24.x, apoiamos a 24.x e 23.x. (JQUERY, 2014) O jquery conta com mais duas bibliotecas que aprimoram o estilo de desenvolvimento, desde um simples site até sites interativos e também dispositivos móveis, são elas o jquery UI e jquery Mobile. O jquery UI conta com recursos voltados para a interface do usuário, efeitos e temas com base na biblioteca jquery. (JQUERY UI, 2014) O jquery Mobile é um sistema de interface de usuário baseado em HTML5 para facilitar o acesso a sites e aplicativos por meio de dispositivos móveis. (JQUERY MOBILE, 2014) Para o desenvolvimento da aplicação, serão utilizas as bibliotecas jquery e jquery UI para eventos e animações na interface com o usuário. 3.2.2 Bootstrap O Bootstrap é uma biblioteca rica em recursos CSS3 combinados com a utilização do HTML5 e jquery. Sua principal característica é a facilidade de desenvolver sites responsivos, onde todo conteúdo se ajusta ao tamanho da tela do dispositivo que está acessando, tornando fácil a visualização e utilização por meio de quaisquer dispositivos com navegadores atuais. (ZEMEL, 2012) O Bootstrap foi desenvolvido para diversos navegadores e plataformas. No Quadro 3.2, são apresentadas informações de suporte específico.

57 Quadro 3.2 Navegadores Suportados pelo Bootstrap. Chrome Firefox IE Opera Safari Android x x N/D ios N/D N/D x Mac OS X Windows x Fonte: Bootstrap, 2014. Sua construção é baseada nas versões mais recentes dos navegadores para desktop e dispositivos móveis, os navegadores mais antigos podem sofrer alguma modificação nos estilos, mas são totalmente funcionais. (BOOTSTRAP, 2014) 3.2.3 Gson Gson foi criado pela Google, é uma a biblioteca Java utilizada para converter objetos Java em sua representação JSON. (CODE GOOGLE, 2014) As suas principais metas são representações personalizadas para objetos; facilidade em usar mecanismos para converter objetos Java para JSON e vice-versa; permitir objetos pré-existente não-modificáveis converter-se de e para JSON, etc. (GSON, 2014) Código Fonte 3.11 Estrutura Gson, para criar um modelo. Fonte: Elaborado pelos autores, 2014.

58 No Código Fonte 3.11 é apresentado um exemplo da utilização da biblioteca Gson para criar um modelo Java através de uma estrutura JSON. Explicação do Código Fonte: a) É o SQL para consulta ao banco de dados, que retorna as informações da consulta na estrutura JSON através da função row_to_json nativa do PostgreSQL. b) Nesse ponto o Gson é instanciado com duas configurações básicas. A primeira configuração é o formato padrão dos elementos do tipo Date e a segunda é o registro do tipo de objeto que o Gson irá manipular. c) O método fromjson do objeto Gson é responsável por criar o modelo Java através da estrutura JSON, de acordo com as configurações citadas anteriormente no ponto B. 3.3 FERRAMENTAS Nesta sessão são apresentas as ferramentas utilizadas no desenvolvimento da aplicação desse projeto. 3.3.1 NetBeans O Integrated Development Environment (IDE) NetBeans é um ambiente de desenvolvimento integrado gratuito para desenvolvedores de software e sites nas linguagens Java, C/C++, XML, HTML, PHP, Groovy, Javadoc, JavaScript, JSP, JSF e entre outras. Figura 3.3 Editor de Texto do NetBeans 7.4.

59 Explicação da Figura 3.3: a) É apresentado os projetos já criados, em estrutura de árvore. b) É o local de edição dos códigos. c) São apresentados em forma de abas os arquivos para edição. Seu editor de texto possui reconhecimento de linguagens que detecta erros durante a digitação do código. Além disso, o editor de texto do IDE NetBeans possui outros recursos como recuo de linhas, comparação de palavras, auto completar e destaque de código de linguagem de programação. (NETBEANS, 2014a) O NetBeans possui ainda um editor visual, onde pode-se criar aplicações na linguagem Java que utilizam janelas, como por exemplo um formulário de cadastro. Segundo Gonçalves (2006) nesse editor o usuário não tem contato direto com a linguagem Java para criar sua aplicação, nele pode-se criar o layout apenas clicando e arrastando os componentes, como botões, campos de texto, tabelas e entre outros. Na Figura 3.4, é apresentado um exemplo do editor visual do NetBeans 7.4. Figura 3.4 Editor Visual do NetBeans 7.4. Explicação da Figura 3.4: a) É apresentado os projetos já criados, em estrutura de árvore. b) É o editor visual das telas. c) São apresentados em forma de abas os