Área de Informática na Educação por Fabrício Osvaldo da ...siaibib01.univali.br/pdf/Fabricio...
115
UNIVERSIDADE DO VALE DO ITAJAÍ CENTRO DE CIÊNCIAS TECNOLÓGICAS DA TERRA E DO MAR CURSO DE CIÊNCIA DA COMPUTAÇÃO FERRAMENTA PARA CRIAÇÃO DE WEBSITES POR CRIANÇAS VOLTADA A WEB Área de Informática na Educação por Fabrício Osvaldo da Silva André Luis Alice Raabe, Dr Orientador Itajaí (SC), novembro de 2010
Transcript of Área de Informática na Educação por Fabrício Osvaldo da ...siaibib01.univali.br/pdf/Fabricio...
UNIVERSIDADE DO VALE DO ITAJAÍ
CENTRO DE CIÊNCIAS TECNOLÓGICAS DA TERRA E DO MAR CURSO DE CIÊNCIA DA COMPUTAÇÃO
FERRAMENTA PARA CRIAÇÃO DE WEBSITES POR CRIANÇAS
VOLTADA A WEB
Área de Informática na Educação
por
Fabrício Osvaldo da Silva
André Luis Alice Raabe, Dr
Orientador
Itajaí (SC), novembro de 2010
ii
UNIVERSIDADE DO VALE DO ITAJAÍ
CENTRO DE CIÊNCIAS TECNOLÓGICAS DA TERRA E DO MAR CURSO DE CIÊNCIA DA COMPUTAÇÃO
FERRAMENTA PARA CRIAÇÃO DE WEBSITES POR CRIANÇAS
VOLTADA A WEB
Área de Informática na Educação
por
Fabrício Osvaldo da Silva
Relatório apresentado à Banca Examinadora do
Trabalho de Conclusão do Curso de Ciência da Computação para análise e aprovação. Orientador: André Luis Alice Raabe, Dr.
Itajaí (SC), novembro de 2010
iii
SUMÁRIO
LISTA DE ABREVIATURAS....................................................................... v
LISTA DE FIGURAS.....................................................................................vi
LISTA DE TABELAS ................................................................................. viii
RESUMO ..........................................................................................................ix
ABSTRACT ...................................................................................................... x
INTRODUÇÃO ................................................................................................ 1
1.1 PROBLEMATIZAÇÃO ............................................................................... 3
1.1.1 Formulação do Problema ........................................................................... 3
1.1.2 Solução Proposta ........................................................................................ 4
1.2 OBJETIVOS ................................................................................................. 5
1.2.1 Objetivo Geral ............................................................................................ 5
1.2.2 Objetivos Específicos .................................................................................. 5
1.3 METODOLOGIA ......................................................................................... 5
1.4 ESTRUTURA DO TRABALHO................................................................... 7
FUNDAMENTAÇÃO TEÓRICA ................................................................ 8
1.5 INFORMÁTICA NA EDUCAÇÃO .............................................................. 8
1.6 WEB 2.0 ...................................................................................................... 10
1.6.1 Educação e Web 2.0 .................................................................................. 13
1.7 INTERFACES PARA CRIANÇAS ............................................................ 15
1.8 TRABALHOS RELACIONADOS.............................................................. 16
1.8.1 Kidlink ...................................................................................................... 17
1.8.2 Kidweb...................................................................................................... 18
DESENVOLVIMENTO ............................................................................... 23
1.9 REQUISITOS ............................................................................................. 23
1.10 REGRAS DE NEGÓCIO ............................................................................ 24
1.11 MODELO DE CASO DE USO ................................................................... 24
1.11.1 Descrição dos Casos de Uso do módulo Administrativo ........................... 26
1.12 DIAGRAMA DE ATIVIDADES................................................................. 35
1.13 DIAGRAMA DE CLASSES ....................................................................... 37
1.14 IMPLEMENTAÇÃO .................................................................................. 39
1.15 TESTES ...................................................................................................... 57
1.15.1 Analise dos testes ...................................................................................... 59
1.16 SUGESTÕES PARA TRABALHOS FUTUROS ........................................ 60
CONCLUSÕES .............................................................................................. 61
REFERÊNCIAS BIBLIOGRÁFICAS ...................................................... 64
Conteúdo do projeto ...................................................................................... 68
iv
A.1 DESCRIÇÃO DOS CASOS DE USO ......................................................... 68
A.1.1 PCT01 - Administrativo ........................................................................... 68
A.1.2 PCT02 – Visitante ..................................................................................... 72
A.2 PROTÓTIPOS DE TELAS DO SISTEMA ................................................ 74
A.3 DIAGRAMA DE ATIVIDADES................................................................. 97
A.4 DIAGRAMA DE CLASSES ..................................................................... 104
A.4.1 Diagrama de Classes (negocio/domínio) ................................................. 104
A.4.2 Diagrama de objetos ............................................................................... 105
v
LISTA DE ABREVIATURAS
AJAX Asynchronous Javascript And XML CERN Conseil Européen pour la Recherche Nucléaire
EA Enterprise Architect FTP File Transfer Protocol
HTML HyperText Markup Language PDAs Personal Digital Assistants PHP Hypertext Preprocessor
RIA Rich Internet Applications RSS Really Simple Syndication
TCC Trabalho de Conclusão de Curso UML Unified Modeling Language UNIVALI Universidade do Vale do Itajaí
XML Extensible Markup Language WYSIWYG What You See Is What You Get
WWW World Wide Web
vi
LISTA DE FIGURAS
Figura 1. Tags de assuntos mais buscados do site Globo.com........................................................... 13 Figura 2. Tela inicial da ferramenta Kidweb...................................................................................... 19
Figura 3. Escolha da atividade: (a) Tipo de ação a ser desenvolvida; (b) Tipo de trabalho a ser desenvolvido............................................................................................................................... 20
Figura 4. Ambiente de criação de websites do Kidweb .................................................................... 21 Figura 5. Casos de Uso do módulo administrativo da Ferramenta WebArt ...................................... 25 Figura 6. Caso de Uso do módulo de visualização da ferramenta WebArt ....................................... 26
Figura 7. Tela para escolha de templates ........................................................................................... 28 Figura 8. Área de criação de páginas ................................................................................................. 29
Figura 9. Tela de opções de imagens ................................................................................................. 30 Figura 10. Tela para a escolha de imagem ......................................................................................... 30 Figura 11 Tela para edição de imagem .............................................................................................. 31
Figura 12. Tela com texto adicionado ................................................................................................ 31 Figura 13. Tela para edição do texto .................................................................................................. 32
Figura 14. Tela com uma página criada para ser salva ...................................................................... 32 Figura 15. Tela para escrever o nome da página ................................................................................ 33 Figura 16. Tela com a confirmação de página salva. ......................................................................... 34
Figura 17. Tela mostrando uma lista de páginas criadas pelo aluno.................................................. 34 Figura 18.Tela de confirmação de exclusão de página ...................................................................... 35
Figura 19. Diagrama de Atividades do UC01.02 Administra Página ................................................ 36 Figura 20. Fluxo da atividade Cria Página ......................................................................................... 37 Figura 21. Diagrama contendo as classes do sistema......................................................................... 38
Figura 22. Figura demonstrando o funcionamento básico do sistema ............................................... 40 Figura 23. Tela inicial do sistema ...................................................................................................... 41 Figura 24. Tela com opções para cadastro de um novo usuário ........................................................ 42
Figura 25. Tela de cadastro de um novo aluno .................................................................................. 43 Figura 26. Tela principal do sistema para crianças ............................................................................ 44
Figura 27. Tela de alteração de informações pessoais ....................................................................... 45 Figura 28. Lista de páginas criadas .................................................................................................... 46 Figura 29. Visualização da página ..................................................................................................... 47
Figura 30. Editar uma página ............................................................................................................. 48 Figura 31. Escolha do template .......................................................................................................... 49
Figura 32. Tela com botões para escolha de imagens ........................................................................ 50 Figura 33. Escolha de imagens........................................................................................................... 51 Figura 34. Imagem adicionada na área de criação ............................................................................. 52
Figura 35. Tela com escolhas a tomar ................................................................................................ 53 Figura 36. Editar imagem ................................................................................................................... 54
Figura 37. Ícone para gerar o XML para um template ....................................................................... 55 Figura 38. XML gerado...................................................................................................................... 56 Figura 39. Trecho de código XML de um template ........................................................................... 57
Figura 40. Tela principal do formulário de Login.............................................................................. 74 Figura 41. Opções de cadastro ........................................................................................................... 75
Figura 42. Tela de cadastro do aluno ................................................................................................. 76 Figura 43. Tela de confirmação de cadastro ...................................................................................... 77 Figura 44. Tela de cadastro do colaborador ....................................................................................... 77
Figura 45. Tela de alteração de dados ................................................................................................ 78
vii
Figura 46. Tela de confirmação de alteração ..................................................................................... 79
Figura 47. Tela principal da administração de páginas ...................................................................... 80 Figura 48. Tela principal da administração de templates. A tela de Imagens segue o mesmo estilo 80
Figura 49. Tela pedido de senha......................................................................................................... 81 Figura 50. Tela de senha enviada ....................................................................................................... 81 Figura 51. Tela campo inválido 1....................................................................................................... 82
Figura 52. Tela campo inválido 2....................................................................................................... 83 Figura 53. Área para criação de páginas ............................................................................................ 84
Figura 54. Tela escolher template ...................................................................................................... 84 Figura 55. Tela adicionando imagens a página .................................................................................. 85 Figura 56. Tela salvar página ............................................................................................................. 86
Figura 57. Tela confirmação de página criada ................................................................................... 86 Figura 58. Tela com lista de páginas criadas ..................................................................................... 87
Figura 59. Tela de confirmação de exclusão de página ..................................................................... 88 Figura 60. Tela de cadastro de template............................................................................................. 89 Figura 61. Mensagem de confirmação de cadastro de template ........................................................ 89
Figura 62. Tela de cadastro de imagem.............................................................................................. 90 Figura 63. Mensagem de confirmação de cadastro de imagem ......................................................... 90
Figura 64. Tela com uma lista de pessoas cadastradas no sistema .................................................... 91 Figura 65. Janela Escolha Modelos.................................................................................................... 92 Figura 66. Editor de texto................................................................................................................... 93
Figura 67. Página criada por aluno..................................................................................................... 94 Figura 68. Formulário de Pesquisa e lista de páginas ........................................................................ 94
Figura 69. Visitante vê página criada ................................................................................................. 95 Figura 70. Formulário de Comentário................................................................................................ 96 Figura 71. Diagrama de Atividades Principal do Sistema ................................................................. 97
Figura 72. Diagrama de Atividades da Administração de Páginas pelo aluno .................................. 98 Figura 73. Diagrama de Atividades do Aluno Criando Página.......................................................... 99
Figura 74. Diagrama de Atividades do Cadastro de Usuário ........................................................... 100 Figura 75. Diagrama de Atividades da Gerência de Imagens .......................................................... 101 Figura 76. Diagrama de Atividades do Gerenciamento de Inscrições ............................................. 102
Figura 77. Diagrama de Atividades do Gerenciamento de Templates ............................................. 103 Figura 78. Diagrama de Classes do Projeto ..................................................................................... 104
Figura 79. Diagrama de Classe de Objeto........................................................................................ 105
viii
LISTA DE TABELAS
Tabela 1. Comparativo entre as ferramentas analisadas e a ferramenta proposta .............................. 22 Tabela 2. Cenário Criação de Páginas do UC01.02 ........................................................................... 27
Tabela 3. Cenário Alteração de Página do UC01.02.......................................................................... 34 Tabela 4. Cenário Exclusão de Página ............................................................................................... 35
Tabela 5. UC01.01 - Realiza Inscrição .............................................................................................. 68 Tabela 6. UC01.02 - Administra Páginas........................................................................................... 70 Tabela 7. UC01.03 - Gerencia de Templates ..................................................................................... 71
Tabela 8. UC01.04 - Gerencia de Imagens ........................................................................................ 71 Tabela 9. UC01.05 - Gerencia Inscrições .......................................................................................... 72
Tabela 10. UC01.06 - Área para usuários .......................................................................................... 72 Tabela 11. UC02.01 Visualiza páginas Criadas ................................................................................. 72
ix
RESUMO
SILVA, Fabrício Osvaldo da,. Ferramenta para criação de websites por crianças voltada a
Web. Itajaí, 2010. 62 f. Trabalho de Conclusão de Curso (Graduação em Ciência da Computação)–
Centro de Ciências Tecnológicas da Terra e do Mar, Universidade do Vale do Itajaí, Itajaí, 2010.
A informática na educação tem grande importância no processo de ensino-aprendizagem, sendo assim, este trabalho apresenta o desenvolvimento de um software educacional denominado Web Art, e tem como público-alvo, crianças alfabetizadas com idades entre seis e dez anos. A ferramenta
permite a criança criar páginas e posteriormente publicá- las na rede, utilizando tecnologias para a Internet e alguns dos conceitos relacionados à Web 2.0, o que proporcionará a ampliação da
comunicação entre professores e alunos de todo o mundo. A proposta de criação do Web Art teve como ponto de partida a análise de outras ferramentas já existentes, como a ferramenta Kidweb (Criminácio, 2001; Pereira, 2002) e está sendo concebido visando atender ao público do projeto
Kidlink. O sistema foi concebido utilizando ferramentas para desenvolvimento de aplicações para a Internet como o PHP, o JavaScript e o Adobe Flex. O desenvolvimento do Web Art busca
solucionar as principais limitações existentes nas ferramentas analisadas, além de permitir uma experiência de composição de páginas pelas crianças mais interativa.
Palavras-chave: Web 2.0. Informática na Educação. Websites.
x
ABSTRACT
The information technology in education has great importance in the teaching-learning process, so this monograph presents the development of an educational software called Web Art, focuses on
literate children aged between six and ten years. The tool allows the children to create pages and then publish them on the Web, using Internet technologies and some of the concepts related to Web
2.0, allowing for the expansion of communication between teachers and students around the world. The proposed creation of Web Art had starting point the analysis of other existing tools, like tool Kidweb (Criminácio, 2001; Pereira, 2002) and this software is being designed in order to attend
the public of Kidlink project. The system was designed using tools for developing Internet applications such as PHP, JavaScript, and Adobe Flex. The development of Web Art seeks to solve
limitations in existing tools reviewed, besides allowing a composition experience more interactive of composing pages for children.
Keywords: Web 2.0. Computers in Education. Webpages.
INTRODUÇÃO
Com o avanço da Internet, as aplicações desenvolvidas para a Web tornam-se mais ricas e
dinâmicas em conteúdo aproveitando-se, segundo Murugesan (2007 apud BITTENCOURT et. al.,
2009) da colaboração e interação social para criar e compartilhar informações.
A Internet na atualidade é largamente usada na área da educação e possui diversas
ferramentas para interação entre alunos e professores com o uso da web. Estas, muitas vezes
facilitam o processo ensino-aprendizagem por encurtar o espaço entre aluno e professor. Muitas
destas ferramentas, segundo Murugesan (2007 apud BITTENCOURT et. al., 2009) estão hoje sob
conceitos do termo originado em 2005 denominado Web 2.0, onde transforma o antigo modelo da
Web em um novo modelo tratado como uma plataforma social para troca e compartilhamento de
informações.
Alem disso, existem fatores positivos que ajudam no desenvolvimento cognitivo da criança,
mas ainda há dificuldades para utilizar todo o potencial da Internet na educação para contribuir na
construção do conhecimento. Dificuldades estas, encontradas em torno da falta de aplicativos que
os auxiliem na autoria da informação na forma de websites, pois em sua grande maioria, estes
aplicativos são destinados à um público mais experiente.
Por conta de problemas como os citados anteriormente, Criminác io (2001) propôs uma
ferramenta de autoria onde as crianças podem produzir suas atividades na forma de páginas Web.
Pereira (2002) propôs melhorias para suprir necessidades que ficaram na primeira versão. Ainda
assim a ferramenta apresenta deficiências como (i) a ferramenta deve ser instalada em cada
computador; (ii) o professor deve cadastrar os novos templates1 ou modelos de páginas em cada
ferramenta instalada para serem usados pelas crianças; e (iii) dificuldade em publicar paginas
criadas. Além disso, análises feitas na ferramenta Kidweb, mostram que não há uma interface
adequada para crianças, pois a mesma apresenta janelas com cores e formas que desestimulam a
criança a realizar ações oferecidas pela ferramenta.
1 Templates são modelos base utilizados em websites. São constituídos normalmente de cores e imagens que tornam os
websites mais atrativos
2
Outra ferramenta analisada foi o Kidlink, que foi criado em 1990 por uma organização sem
fins lucrativos da Suécia e mantém projetos em vários países, portanto, foi analisado juntamente o
Kidlink Brasil. Estas ferramentas foram analisadas a fim de ajudar na definição dos requisitos
necessários para o desenvolvimento deste sistema, mas podem-se observar algumas deficiências
como (i) apresentar conteúdo em inglês, o que dificulta o acesso por parte de usuários que não
compreendem o idioma; (ii) alguns links no Kidlink Brasil estavam indisponíveis; e (iii) para ter
acesso a todas as áreas do site é necessário aguardar a avaliação da inscrição realizada, o que
demonstrou muita demora para recebê- la.
Analisando as deficiências supracitadas, foi desenvolvida uma ferramenta voltada ao publico
infantil, utilizando alguns dos conceitos da chamada Web 2.0. O desenvolvimento de tal sistema
traz a facilidade para professores (colaboradores) e alunos, pois para todos os efeitos estarão
acessando uma única aplicação disponível na Internet. Por se tratar de um sistema desenvolvido
para a Internet, não é necessário ser instalada em outros computadores, facilitando principalmente
para os professores (colaboradores), pois os mesmos precisam cadastrar os templates somente uma
vez e o mesmo estará disponível para todos os usuários. Outro benefício da ferramenta é estimular a
criatividade e motivar a criança na produção de conteúdo e publicação de trabalhos realizados na
escola.
Foram utilizadas ferramentas e tecnologias de desenvolvimento de sistemas para a Internet
como o PHP, o JavaScript e o Adobe Flex. Foram realizadas pesquisas na Internet para obter um
framework em PHP para agilizar o desenvolvimento do sistema. Nesta pesquisa foi encontrado o
Yii Framework que possui várias funções JavaScript em seu núcleo e possibilita uma curva de
aprendizagem rápida e eficiente, pois é uma ferramenta de fácil utilização. Portanto, o mesmo foi
utilizado no desenvolvimento do sistema. A escolha do Adobe Flex foi importante para desenvolver
a área de criação das páginas, uma vez que este é destinado ao desenvolvimento de aplicações ricas
para a Internet e, traz uma maior facilidade na criação de interfaces.
Com o desenvolvimento desta ferramenta, pretende-se alcançar alguns benefícios como
auxiliar o desenvolvimento cognitivo da criança e fazer com que a criança utilize a ferramenta
como um meio de reforçar seu aprendizado escolar, auxiliar a criança a ser autora de conteúdos para
a Internet, criar páginas de forma divertida e disponibilizar os trabalhos realizados a um público
mais amplo, ou seja, os usuários da Internet.
3
Alem dos benefícios citados e tendo em vista todas as possíveis formas de utilização da
Internet no contexto escolar, espera-se ampliar a interatividade entre crianças e Internet, ajudando-
as de alguma forma, na construção e publicação de páginas por estes e no auxilio ao aprendizado da
criança.
1.1 PROBLEMATIZAÇÃO
1.1.1 Formulação do Problema
A Internet favorece o processo de construção do conhecimento, de forma com que o aluno
se torne o protagonista do processo, ou seja, nela – Internet – são encontradas várias opções de
ferramentas de aprendizagem, onde o aluno se torna sujeito ativo, tudo isto contribuindo para o seu
desenvolvimento cognitivo. Porém, a utilização da Internet não está vinculada somente à Educação.
Ela é usada também como uma ferramenta de trabalho e lazer para todas as faixas etárias. Mas em
se tratando na área pedagógica, ainda há obstáculos para saber utilizar seu potencial de forma
benéfica como, construir seu próprio conteúdo, reprimindo a idéia em que o aluno se torne um mero
consumidor. Estes obstáculos estão em torno de aplicativos ou ferramentas que os auxiliem na
autoria de websites, por exemplo, uma vez que a maioria destes aplicativos, são basicamente
elaborados para um público com um nível de experiência mais amplo, como o público adulto.
Criminácio (2001) descreve que o modelo pedagógico tradicional utilizado nas escolas, faz
com que as crianças sejam incentivadas em grande parte das atividades a gerar produtos finais
como, cartazes, textos ou desenhos. Estes produtos ficam na maioria das vezes restritos a unidade
escolar, mas Raabe et. al. (2007) ainda destaca que é importante para a criança divulgar e
comunicar os resultados dos trabalhos concluídos. A utilização de conceitos da Web 2.0 possibilita
superar tais restrições, levando os trabalhos criados pelas crianças a um patamar mais alto como a
Internet, onde fica visível a um público mais amplo.
Por conta de problemas como os supracitados, Criminácio (2001), propôs uma ferramenta
que posteriormente obteve algumas melhorias por Pereira (2002), o KidWeb, para auxiliar as
crianças a produzirem suas atividades e como conseqüência publicá- las na Web, para que um
público maior tivesse acesso ao conteúdo produzido pelas crianças.
Partindo da analise de tal ferramenta, o KidWeb, e de uma outra na Internet, o Kidlink,
decidiu-se por fazer uma ferramenta para posterior disponibilização na Internet, que unisse o que há
4
de melhor em ambas as ferramentas analisadas, com o objetivo de utilizar o potencial da Internet e
consequentemente a Web 2.0, para suprir algumas das necessidades encontradas como a criação de
conteúdos feitos por crianças para a Internet.
1.1.2 Solução Proposta
A proposta do projeto é desenvolver uma ferramenta para criação de páginas Web tendo
como publico alvo crianças alfabetizadas com idade entre seis e dez anos, seguindo princípios de
outras ferramentas WYSIWYG (What You See Is What You Get). Segundo o site Wikipedia (2009),
ferramentas WYSIWYG são programas que permitem que um documento manipulado na tela do
computador tenha a mesma aparência na sua utilização como, por exemplo, o aplicativo Microsoft
Word.
A ferramenta foi desenvolvida com o intuito de disponibilizá- la na Internet como forma de
facilitar o acesso a seu conteúdo, eliminando algumas restrições como, por exemplo, a necessidade
de outros aplicativos para sua utilização e, a necessidade de instalar o software em outros
computadores.
A ferramenta foi dividida em dois módulos, um administrativo utilizado por professores,
colaboradores e alunos, e outro destinado aos visitantes, onde podem ser visualizadas as páginas
criadas. O modulo administrativo tem como objetivo dar acesso a professores ou colaboradores para
cadastrar, por exemplo, imagens e Web templates2 para a realização de trabalhos futuros pelas
crianças. Ainda no módulo administrativo as crianças podem confeccionar seus websites que serão
posteriormente publicados na própria ferramenta.
Com esta ferramenta prevêem-se alguns benefícios como, tornar a criança autora de
conteúdos para a Internet, criando websites de forma divertida e, levar os trabalhos realizados
2 Web templates, ou modelos de páginas, são documentos sem conteúdo utilizados para separar a apresentação do
conteúdo e contém instruções sobre onde e qual tipo de informação deve conter cada parte da apresentação
(WIKIPEDIA, 2009).
5
dentro das escolas a um nível mais alto disponibilizando todos os trabalhos realizados pelas crianças
para uma visualização pública.
1.2 OBJETIVOS
1.2.1 Objetivo Geral
O objetivo geral deste trabalho é desenvolver uma nova ferramenta para autoria de websites
voltado ao público infantil já alfabetizado, e disponibilizar a ferramenta na Internet.
1.2.2 Objetivos Específicos
Os objetivos específicos deste projeto de pesquisa são:
Aplicar conceitos e respectivas tecnologias/ferramentas da Web 2.0;
Pesquisar e analisar soluções similares;
Pesquisar e documentar diretrizes para construção de interfaces para o público infantil;
Definir os requisitos da ferramenta;
Implementar e testar o sistema com um grupo de usuários; e
Documentar o projeto.
1.3 Metodologia
Após a realização de pesquisas para definir melhores práticas no desenvolvimento do
projeto, definiu-se que as ferramentas utilizadas para este projeto foram:
PHP: Linguagem de programação amplamente utilizada para construção de websites que
necessitem de comunicação com outras ferramentas como banco de dados;
Adobe Flex: Empregada no projeto por seu grau de desenvolvimento de aplicativos RIA
para a Internet;
XML: Utilizado na Internet como forma de comunicação de dados e também é a
linguagem padrão para gerar interfaces de aplicativos criados no Adobe Flex;
MySql: Sistema de gerenciamento de dados utilizado para armazenamento de
informações dos usuários do sistema, bem como as páginas criadas; e
6
UML: Utilizadas para definição dos modelos referentes ao sistema.
Foram pesquisados alguns softwares similares como o Kidlink e o Kidweb, na tentativa de
extrair requisitos que poderiam ser utilizados para o desenvolvimento do sistema. Foi observado a
partir desta pesquisa que, o Kidweb não disponibilizava a opção de enviar a página criada para um
servidor na Internet. Por outro lado, o Kidlink atendia a este requisito, mas, não apresentava uma
área onde a criança pudesse criar suas páginas e, ao mesmo tempo, disponibilizá- la na Internet.
A partir de uma ferramenta para criação de UMLs (Unified Modeling Language), foram
especificados os requisitos do sistema, os modelos de casos de uso e alguns modelos de objetos e
classes a fim de demonstrar como foi desenvolvido o sistema.
A implementação do sistema foi realizada baseando-se nos requisitos e modelos definidos
anteriormente, bem como a utilização das ferramentas necessárias ao desenvolvimento como
descrito também anteriormente.
7
1.4 Estrutura do trabalho
Este documento está organizado sob a forma de capítulos, onde abordam conceitos ou
tecnologias empregadas no desenvolvimento do sistema.
O capitulo de Fundamentação Teórica, engloba assuntos relacionados ao projeto como:
Informática na educação;
Web 2.0;
Educação e Web 2.0;
Interfaces para Crianças; e
Trabalhos Relacionados (Kidlink e o Kidweb).
Na seção de desenvolvimento, é apresentado detalhadamente o desenvolvimento do sistema.
Neste capitulo, mostram-se detalhes dos diagramas UML utilizados no projeto bem como os casos
de uso e os requisitos funcionais do sistema. Ainda temos nesta seção, detalhes da implementação
como detalhes de ferramentas e tecnologias utilizadas no desenvolvimento do sistema bem como as
dificuldades encontradas na etapa de implementação.
Por fim, são apresentadas as conclusões finais deste projeto de acordo com os objetivos
propostos.
FUNDAMENTAÇÃO TEÓRICA
Neste capítulo é abordada a fundamentação teórica contendo os principais conceitos
relacionados ao projeto como o emprego da informática na educação, a Web 2.0, educação e a Web
2.0 e diretrizes para construção de interface para crianças. Ainda neste capitulo é abordado uma
análise em trabalhos similares como o Kidlink e o Kidweb.
1.5 Informática na educação
Atualmente, a educação ainda segue uma linha tradicional de ensino, de forma com que o
processo de ensino-aprendizagem torna-se cansativo e desgastante tanto ao educador quanto para o
educando. Já que esta linha tradicional, “atribui exclusivamente ao ambiente, a constituição das
características humanas e privilegia a experiência como fonte de conhecimento e de formação de
hábitos de comportamentos” (Godoy, et. al. p. 3, 2001).
Partindo deste pressuposto, acredita-se que o aluno é um receptor de informações e
conhecimentos, e que seu desenvolvimento cognitivo se dá somente por fatores extrínsecos.
Para mudar esta realidade, devido à evolução tecnológica, houve a necessidade de
modernizar os recursos utilizados no ambiente escolar, introduzindo tecnologias como ferramenta
de auxílio no processo de elaboração de atividades curriculares. Para Finger, Silveira e Pinheiro
(2008),
(...) é visível a necessidade de adequações didáticas de ensino/aprendizagem que alcancem
a tais expectativas, criando condições que permitam interconexões com o processo
educacional e a evolução de recursos tecnológicos como meios para alcançar uma
aprendizagem d iferenciada e significativa.
Diante destas necessidades, um dos recursos tecnológicos implantados nas escolas foi o
computador. Segundo os estudos realizados por Romero (2006), “os registros apontam como
instituição pioneira na utilização do computador em atividades acadêmicas a Universidade Federal
do Rio de Janeiro, através do Departamento de Cálculo Cientifico, criado em 1966, e que deu
origem ao NCE Núcleo de Computação Eletrônica”.
Durante muitos anos discutiu-se sobre o uso de computadores nas escolas. Mas foi “o
projeto EDUCOM realizado em Brasília no ano de 1981 que foi o primeiro e principal projeto
9
público a tratar da informática educacional, originou-se do 1º Seminário Nacional de Informática na
Educação realizado na Universidade de Brasília em 1981” (ROMERO, 2006).
A Informática na educação é uma forma de dinamizar o processo de ensino-aprendizagem e
incluir o aluno nesta sociedade tecnológica e globalizante. Dessa forma, o uso de tecnologias nas
escolas faz com que o aluno se torne sujeito ativo no processo de ensino-aprendizagem, pois ao
utilizar estes recursos de forma correta, ele passa a ser o protagonista no processo educativo, não
fazendo parte de uma linha tradicional de ensino, onde este era somente o receptor de informações.
De acordo com os pensamentos de Almeida (2000 apud FINGER; SILVEIRA; PINHEIRO,
2008), devido a esta inovação na sociedade, houve a necessidade da criação de cursos de
informática como atividade extracurricular, para a capacitação profissional. Esta foi a primeira
grande linha conceitual do uso da Informática na Educação. A segunda grande linha, utilizava o
computador como ferramenta para o desenvolvimento do ensino de diferentes áreas do
conhecimento.
Pode-se verificar que a introdução do computador nas escolas se deu após o início da
primeira linha conceitual descrita, esta que, inicialmente teve por objetivo a capacitação de
profissionais na área inclusive à docência.
Posteriormente à introdução da informática no ambiente escolar, surgiu a implantação da
Internet nas escolas. Esta contribui com a quebra de barreiras entre as pessoas, devido a esta ampla
rede de comunicação. O que era longe, hoje se torna perto e dinâmico, permitindo as pessoas
conhecer os diversos cantos do mundo, culturas e lazer.
Atualmente, as pessoas utilizam a Internet de forma muito ampla. Mas em se tratando do uso
desta no contexto escolar, de acordo com Moran (1997) “na Internet, encontramos vários tipos de
aplicações educacionais: de divulgação, de pesquisa, de apoio ao ensino e de comunicação”.
Segundo o autor, em relação à divulgação, esta pode ser institucional, ou seja, divulgar as
ações, visões da escola, bem como projetos desenvolvidos, entre outros. Esta divulgação pode ser
também pessoal, ou seja, alunos e professores criam espaços onde possam divulgar produções
significativas. Em relação à pesquisa, o aluno tende a pesquisar na Internet temas solicitados ou
não, seja atividade em grupo ou individual. Nas atividades de apoio ao ensino, o aluno utiliza esta
ferramenta como fonte de informações, sejam elas textos, imagens entre outros, além da utilização
de outros recursos como ferramenta (revistas, jornais, etc.). Já a comunicação, pode acontecer entre
10
várias pessoas da instituição e do mundo, sejam eles professores e alunos, visando a ampliação de
cultura e conhecimento.
Tendo em vista a importância da Informática na Educação, a utilização da Internet no
ambiente escolar torna-se de várias formas uma aliada no processo de ensino-aprendizagem. Uma
das formas são construtores de sites para crianças. Com estes, há uma interação maior com o mundo
ao redor, permitindo assim a aprendizagem de forma autônoma e dinâmica, desenvolvendo sua
intelectualidade.
1.6 Web 2.0
A Web passou de uma ferramenta de trabalho dos cientistas do CERN (Conseil Européen
pour la Recherche Nucléaire) em um espaço global onde bilhões de usuários acessam informações
de todas as partes do planeta a partir de seus computadores pessoais, (ANDERSON, 2007).
Durante este período, a Web começou a ser moldada para uma nova fase, hoje, conhecida
como Web 2.0, que segundo O‟Reilly (2007), passa a ser vista como uma plataforma de tecnologia.
Anderson (2007) descreve que a Web 2.0 baseia-se em aplicativos ou serviços, hoje, comuns
como redes sociais, blogs, compartilhamento de vídeos, serviços RSS3 (Really Simple Syndication),
dentre outros, onde as pessoas são capazes de adicionar, editar e utilizar seus conteúdos.
Desde a invenção da WWW (World Wide Web) por Berners-Lee a Web passou por várias
melhorias até chegar ao que conhecemos nos dias atuais como Web 2.0. Segundo Berners-Lee
(1999 apud ANDERSON, 2007) o inventor da Internet é contrário aos conceitos da Web 2.0, pois,
segundo ele uma das idéias principais da Internet era conectar as pessoas e que as idéias e
características presentes na Web 2.0 já estavam subentendidos na chamada Web 1.0, apenas não
foram incluídas pelo fato de acelerar o processo de adoção da tecnologia pelos profissionais do
CERN.
Ainda que Berners-Lee não concorde com alguns aspectos da Web 2.0, Mikroyannidis
(2007 apud BITTENCOURT et. al., 2009) cita que através de tecnologias para colaboração entre
3 RSS é um recurso desenvolvido em XML que permite a divulgação de notícias ou novidades de um site. Pode ter mais
de um significado como RDF Site Summary, Really Simple Syndication ou Rich Site Summary ALECRIM (2008).
11
pessoas, a Web 2.0 dá liberdade aos usuários de serem autores de informações, e liberdade para
criar conteúdos de forma coletiva e não individual.
O termo Web 2.0 foi criado por Dale Doughert durante uma conferência entre as empresas
norte-americanas O‟Reilly Media e a MediaLive International, se consagrando no ano de 2004 com
mais de 9,5 milhões de citações no site de buscas Google 4, apesar de existir grande desacordos
sobre o significado da Web 2.0 com algumas empresas tratando o termo Web 2.0 como sendo um
marketing sem sentido e outras como uma nova forma de conhecimento, (O‟REILLY, 2007).
Segundo Povoa (2006), o termo Web 2.0 está relacionado a um conjunto de padrões em
comum de negócio e tecnologia em diversos projetos voltados para a Internet. Alguns dos padrões
encontrados em projetos para Web são descritos a seguir:
A Web como Plataforma: Os sites deixam de ter uma aparência estática, tornando-se
aplicativos poderosos e sofisticados, similares a softwares produzidos e que rodam em
desktops dos computadores pessoais mas, com a diferença que rodam em servidores.
Com protocolos como AJAX (Asynchronous Javascript And XML – Extensible Markup
Language) passa a ter uma integração mais poderosa e eficiente com a interface do
cliente, além de gerar usabilidade mais intuitiva como as interfaces dos softwares para
desktop.
O beta eterno: Ao contrário de aplicativos tradicionais que evoluíam na forma de versões
(1.0, 1.1, 1.5, etc.), os aplicativos e softwares para a Internet nunca chegam a uma versão
final pelo simples fato de estar em rede, ter feedback de usuários e constante teste de
funcionalidades. Apesar do termo fazer sentido no ponto de vista tecnológico, é muitas
vezes questionável no ponto de vista de marketing, pois, o consumidor necessita de uma
percepção clara de valor agregado para justificar usar mais ou até gastar mais neste
produto.
Redes sociais: Atualmente há um crescimento considerável em sites que formam
comunidades como Orkut, MySpace, Twitter5 dentre outros. Sites ou aplicativos como
estes já existiam na Internet e tem seu crescimento devido a aceleração no numero de
4 Estes dados são de 2005, ano em que O‟Reilly escreveu seu artigo. Uma nova pesquisa no site de buscas Google em
2009 resultou em aproximadamente 377.000.000 de citações para web 2.0. 5 Orkut, MySpace e Twitter são redes de relacionamentos sociais.
12
usuários destas comunidades devido a sofisticações e riquezas tecnológicas destes
aplicativos somados a disseminação da Internet banda larga.
Flexibilidade no conteúdo: As informações e suas publicações passam a ser flexíveis
sendo de fácil utilização por editores profissionais ou usuários comuns. Um exemplo na
área jornalística é a utilização de dispositivos como celulares ou PDAs (Personal Digital
Assistants), que geram poder e eficiência através de ferramentas de publicação multi-
plataforma. O usuário comum passa a gerar conteúdo para a Internet como, por exemplo,
o YouTube6, além de classificá- los ou editar parcialmente usando formatos como RSS e
as Wikis onde qualquer pessoa pode melhorar a qualidade de determinado conteúdo,
como por exemplo a Wikipedia.
Tags: Nos modelos tradicionais de páginas Web, o administrador ou mantenedor das
páginas tem que classificar os conteúdos em categorias pré-definidas, como por
exemplo, produtos mais procurados ou assuntos mais buscados. Este novo padrão traz
uma taxonomia inversa, ou seja, a própria aplicação classifica os conteúdos em
categorias como no exemplo anterior, mas com a diferença de ser automatizado, sendo
classificado a partir da navegação do usuário o que O‟Reilly (2005) chama de novo Intel
Inside. Vimos exemplos claro deste padrão em sites como o del.icio.us, onde sites ou
assuntos favoritos são classificados pela própria comunidade de usuários e em portais
eletrônicos como a Globo.com mostrado na Figura 1. Esse padrão é importante também
pois propicia uma melhora considerável no ranking da página em sites de buscas como o
Google.
6 YouTube é um site que utiliza uma ferramenta onde as pessoas podem enviar v ídeos para visualização públic a.
13
Figura 1. Tags de assuntos mais buscados do site Globo.com
Desta forma, para O‟Reilly (2007) a Internet é uma plataforma de tecnologia, onde há certas
regras de negócios e tendo como regra mais importante, usuários acrescentando valores e
desenvolvendo aplicações que aproveitem os efeitos da rede para se tornarem melhores conforme as
pessoas os usam.
1.6.1 Educação e Web 2.0
Ao analisar a geração que antecede a Web 2.0, também conhecida como Web 1.0, pode-se
verificar que esta não era apropriada como recurso no processo educacional, pois além de não ser
uma tecnologia de utilização prática, era necessária a compra dos serviços para a criação e
manutenção de sites (COUTINHO e JUNIOR, 2007).
Porém, com o avanço das tecnologias destinadas à Internet, surgiu o termo Web 2.0 que dá
possibilidades as pessoas interferirem nas informações na Internet, pois ela oferece ferramentas que
14
permitem maior interatividade para as pessoas que desejam explorar as diversidades existentes,
ampliando assim a construção do conhecimento.
Tendo em vista todos os benefícios que a Internet pode oferecer, a Escola buscou utilizá-la,
de forma com que o aluno sinta-se incluído nesta era tecnológica digital, além de provocar o
desenvolvimento cognitivo individual e coletivo.
Para Barcellos (1999 apud PEREIRA 2002),
(...) no contexto educacional, a tecnologia computacional das ferramentas de comunicação
on-line pode levar as crianças a participarem mais ativamente dos processos comunicativos.
Através do estímulo à troca de conhecimentos e à interação baseada no uso de espaços
compartilhados, as possibilidades de acesso a informações s ão ampliadas.
Partindo deste pressuposto, o uso da Internet na educação permite ao aluno, se tornar um
sujeito autônomo de forma com que este elabore pensamentos críticos a respeito de todo o universo
que o rodeia. Esta autonomia permite o desenvolvimento do aluno como cidadão em relação à
sociedade no qual ele encontra-se inserido, além de estimulá- lo no processo de ensino-
aprendizagem. No ambiente escolar, o professor torna-se mediador do processo, auxiliando,
orientando, sugerindo a utilização da ferramenta. Jamais o professor deverá impor o que o aluno
deverá fazer, ou seja, o aluno deve ocupar o lugar de autor no processo. Esta idéia está de acordo
com o que aponta Carvalho (2007) onde diz que,
(...) o professor tem um novo papel a desempenhar: o de facilitador da aprendizagem,
apoiando o aluno na sua construção individual e colaborativa do conhecimento;
proporcionando-lhe autonomia na aprendizagem, incentivando ao desenvolvimento de
pensamento crít ico, à capacidade de tomada de decisão e à aprendizagem de nível elevado
A Web 2.0 possibilita maior interação e comunicação, pois esta possui uma série de
ferramentas, fazendo com que as pessoas deixem de ser meros espectadores e consumidores de
informações e que agora passam a ser sujeitos ativos “participando de sites de serviços online mais
elaborados e que permitem uma comunicação bidirecional mais significativa (SANT‟ANA, 2008).
Desta forma, o aluno pode realizar ações que possibilitem seu crescimento pessoal, como por
exemplo, desenvolver trabalhos, realizar pesquisas, modificar conteúdos na Internet, além de estar
em rede com várias pessoas, num processo interativo dinâmico e atrativo. Com a Web 2.0, o aluno
tem a autonomia de pesquisar e compartilhar informações, além de se comunicar com outras
pessoas de vários lugares do mundo, sem mesmo sair do lugar. Tudo isso visando a busca
incessante do conhecimento.
15
1.7 Interfaces para crianças
A interface é uma das partes essenciais para o funcionamento de um software, pois é ela que
realiza o contato e comunica as informações passadas pela aplicação ao usuário e deve se ajustar
com o perfil de quem irá utilizá- la, ainda deve ser de fácil utilização, suprir as necessidades e evitar
que o usuário se confunda e cometa erros (BENITTI; FERNANDES; RAABE, 2004).
Nielsen (2000) propõe que um site deve conter algumas características como: facilidade de
aprendizado; objetividade e agilidade ao realizar uma tarefa; feedback, informando ao usuário onde
o mesmo se encontra; adaptar a linguagem utilizada para os usuários; entre outros.
As interfaces gráficas se tornam mais importantes quando utilizadas em websites, pois os
mesmos devem passar ao usuário suavidade, interesse, evitar que o usuário se perca em meio a
muitas informações e ainda evitar que os mesmos demorem a chegar a um objetivo desejado no
website.
Na imensa rede de informações – Internet – há muitos websites disponibilizando todo tipo
de conteúdo e dentre estes há uma quantidade considerável de websites destinadas ao publico
infantil. Segundo Mano (2005) deve-se tomar certo cuidado no designer destas interfaces, pois na
maioria dos casos, embora sua capacidade motora o permita, a criança não consegue utilizar o
computador sozinha e muitas das interfaces são mal adaptadas impedindo sua utilização sem a
supervisão de um adulto.
As crianças se diferenciam dos adultos no modo de utilização e percepção das interfaces.
Para tanto, existem estudos na tentativa de descobrir como as crianças de várias idades se deparam
com as características das interfaces e, o que os designers de interfaces devem fazer para atingir a
satisfação dos futuros usuários de uma aplicação educacional, por exemplo. Alguns destes estudos
mostram que ações como arrastar ícones com o mouse, textos ou ícones pequenos e duplos cliques
devem ser evitados em softwares infantis. Ainda demonstram que nem todas as crianças são
capazes de ler e entender instruções e mensagens de erros geradas pelos softwares e sua capacidade
de manter a atenção na tarefa a realizar é tanto quanto reduzido MANO (2005).
16
1.8 Trabalhos relacionados
Foi realizada uma pesquisa em sites de buscas a fim de encontrar trabalhos relacionados à
proposta deste projeto. A pesquisa não retornou muito sucesso, pois existem poucos trabalhos
direcionados ao público infantil relacionados a este projeto. Os resultados mais aproximados ao
projeto foram o HotDog Junior criado pela Sausage Software, o Kidlink, e o Kidweb.
O software HotDog Junior demonstrou vários erros após instalado mesmo após vários
downloads de diferentes versões, por tanto foi descartado da análise por ser um software em Inglês
e antigo também.
Durante a pesquisa foram retornados vários construtores de sites direcionados ao público
adulto, muitos destes disponibilizados por empresas que trabalham na área de criação de sistemas
para a Internet. Estes construtores também foram descartados, pois utilizam muitos formulários para
criar a página o que para a criança torna-se desagradável e pouco interessante.
Para definir os requisitos deste projeto, foram realizadas análises em sites e softwares
similares ao projeto. Alguns destes sites voltados à criação de conteúdo como páginas Web, são
voltados para um publico adulto devido à forma de concepção das páginas, que é dada através de
preenchimento de formulários. Este método dificulta para a criança, pois, se faz necessário um
menor número de formulários para preenchimento e um maior número de interação com o sistema
como produção de conteúdo de forma visual.
Ainda se faz necessário o sistema ter cores, formas e ícones voltados ao público infantil para
que a criança se sinta bem e tenha facilidade em utilizar o sistema.
Desta forma foram analisadas duas ferramentas voltadas ao publico infantil o site Kidlink e
o Kidweb. Este último se refere a um software acadêmico desenvolvido por Simone Criminácio em
2001 e que foi melhorado por Fábio Roberto Pereira em 2002. A seguir é apresentado um breve
histórico sobre estas duas ferramentas, Kidlink e Kidweb..
17
1.8.1 Kidlink
O Kidlink foi criado em 1990 por uma organização sem fins lucrativos situada na Suécia.
Este site é aberto a todos, porém, foram registrados na sua maioria usuários entre 10 e 15 anos de
idade, residentes em 176 paises desde a sua criação. É uma ferramenta que disponibiliza além de
conteúdos criados por crianças, bate-papo – mantendo um diálogo global entre os alunos – e
espaços interativos entre alunos e professores. Seus programas educacionais gratuitos motivam a
aprendizagem e ajudam os professores a relacionar diretrizes curriculares com interesses e objetivos
dos alunos. O Kidlink ainda mantém projetos educacionais em vários países (KIDLINK, 2009).
O projeto do Kidlink7 no Brasil segundo Pereira (2002) é um ambiente motivador onde as
crianças trocam informações de forma interativa. A ferramenta oferece diversas opções para a
criança como:
1. KEscola: Também é chamado Kidcafé-Escola. Este espaço funciona como uma sala de
aula interativa, onde professores e alunos de diversas escolas podem interagir,
compartilhando informações, ampliando desta forma a construção do conhecimento;
2. Bate-Papo: Esta ferramenta permite que o usuário estabeleça uma relação mais direta
com outros usuários, a fim de trocar idéias e conhecer novas pessoas ;
3. KidArt: Este link estava indisponível, impedindo o acesso a partir deste site. Para acessar
esta área, foi necessário acessar o link “Projetos” e em seguida o link “KidSpace” para
ser redirecionado ao site do Kidlink.org. Após o login, o usuário acessa uma área onde
pode criar suas páginas e publicar trabalhos e imagens;
4. KFamília: Segundo Pereira (2002), esse projeto promove a inclusão digital de idosos que
buscam resgatar sua auto-estima, bem como a adoção virtual de jovens carentes
participantes de KHouses;
5. KHouse: É um projeto social de inclusão digital da PUC-Rio, que tem como objetivo
disponibilizar para grupos de pessoas o acesso à computadores e à Internet para quem
não tem acesso à esse tipo de tecnologia na escola ou em casa; e
7 O pro jeto Kidlink no Brasil pode ser acessado através do endereço eletrônico http://wwwusers.rdc.puc-
rio.br/kids/kid link/
18
6. Projetos: Este espaço está direcionado à professores e alunos que buscam conhecer
projetos já publicados, desta forma, enriquecendo seus planejamentos.
Foi realizado um contato com a equipe do projeto Kidlink a fim de oferecer parceria e pedir
auxilio na definição dos requisitos. Porém, este contato não foi respondido, então, foi realizada uma
análise da ferramenta Kidlink e, pode-se observar as seguintes deficiências:
1. O site Kidlink apresenta o seu conteúdo em inglês, dificultando o acesso por parte dos
usuários que não compreendem este idioma;
2. Alguns links no Kidlink Brasil estavam indisponíveis, impedindo o acesso à algumas
áreas do site; e
3. Para concluir o processo de inscrição e posteriormente o acesso a todas as áreas do site, é
preciso aguardar a avaliação da inscrição.
1.8.2 Kidweb
O Kidweb é um software educacional voltado para crianças de 3ª e 4ª séries. Foi
desenvolvido por Simone Criminacio no ano de 2001, e tem por objetivo auxiliar a criança na
autoria de documentos multimídias como páginas HTML (PEREIRA, 2002). Entende-se por
software educacional, uma ferramenta tecnológica no qual auxilia o processo de ensino-
aprendizagem de forma dinâmica e prazerosa, estimulando o aluno a desenvolver a criatividade e
também o raciocínio lógico (ROMERO, 2006).
Dentre as ferramentas encontradas no software, vale destacar a presença de um personagem
gráfico denominado “Izinho” (I relacionado à Internet), que auxilia no processo de execução das
ações como recortar, colar, salvar, entre outros. De acordo com Raabe (2003) o personagem Izinho
é importante também para que a criança se identifique com a ferramenta Kidweb.
O Kidweb em sua primeira versão obteve boa aceitação nas escolas, porém Pereira (2002)
apontou algumas deficiências como um número restrito de templates disponíveis, a necessidade de
outros softwares instalados para o correto funcionamento da ferramenta além da dificuldade de
publicação dos websites na Internet.
19
Partindo deste pressuposto o autor propôs algumas melhorias para a ferramenta como editor
de templates, modulo para a publicação dos websites criados e propôs também eliminar a
dependência de outros softwares.
Ao analisar a ferramenta na sua segunda versão, pode-se observar que:
1. ao iniciar o software, não há uma interface gráfica adequada para crianças a qual foi
planejada. Esta se apresenta com janelas de diálogo padrão, sem cores e formas
diferentes, o que ajudaria a estimular o aluno a realizar as ações oferecidas pela
ferramenta. Além da padronização das janelas, o software não apresenta uma tela de
“Boas Vindas”, por exemplo, o que poderia ajudar a reforçar a interação entre aluno e
ferramenta;
2. todas as telas que antecedem a criação dos websites, além de ser padronizadas e sem
cores diferenciadas, são realizadas muitas perguntas para chegar ao objetivo e
possibilitar o aluno à criação de seus trabalhos. Este processo acaba se tornando
cansativo para a criança, desestimulando-a. A Figura 2 apresenta a tela inicial do sistema
pedindo antes de tudo, que o aluno faça login na ferramenta;
Figura 2. Tela inicial da ferramenta Kidweb
3. O processo de criação do documento inicia-se com a escolha da atividade a qual a
criança deseja realizar como demonstrado na Figura 3;
20
(a)
(b)
Figura 3. Escolha da atividade: (a) Tipo de ação a ser desenvolvida; (b) Tipo de trabalho a ser
desenvolvido
4. Após a escolha da atividade a ser desenvolvida, a ferramenta apresenta algumas opções,
como clicar em uma área onde contenha o personagem da ferramenta para adicionar uma
imagem ao documento, salvar, imprimir ou visualizar o documento que está sendo
criado, edição de texto e opção para colorir a página. Não há ajuda alguma para indicar a
criança que deve ser clicado no personagem para adicionar imagens ao documento;
5. As barras de ferramentas estão ocultas por padrão, o que dificulta o acesso as opções
descritas anteriormente. A criança precisa habilitá-las para tornarem-se mais acessíveis.
A Figura 4 apresenta o ambiente de criação das páginas Web do Kidweb; e
21
Figura 4. Ambiente de criação de websites do Kidweb
6. O software não possibilita ao aluno a publicação na Internet das páginas criadas por este.
Este processo de publicação é interessante, pois ampliaria a interatividade do aluno à
Internet e possibilitaria a construção de uma rede de comunicação entre alunos e
professores de todo o mundo.
De acordo com a analise realizada nas ferramentas Kidweb e Kidlink, pode-se propor novas
idéias para o desenvolvimento de uma nova ferramenta de autoria para crianças, como a que se
destina este projeto, baseado em conceitos utilizados atualmente na Internet. A Tabela 1 apresenta
um comparativo entre as ferramentas analisadas e a ferramenta proposta.
22
Tabela 1. Comparativo entre as ferramentas analisadas e a ferramenta proposta
Kidweb Kidlink Web Art
Interface de criação em modo gráfico Sim N/A8 Sim
Ferramenta disponível na Internet Não Sim Sim
Publicação de websites na Internet N/A N/A Sim
Disponibilidade de websites criados
pelos alunos
N/A Sim Sim
Dicas na tela demonstrando a ação a ser tomada
Não N/A Não
Comentários dos websites criados por
usuários visitantes
N/A Sim Sim
Interface com tema infantil Não Sim Parcialmente
Disponibilidade de imagens e templates para serem usados na criação de
websites em um único lugar
Não N/A Sim
Possibilidade de o aluno escolher outras imagens
Não Sim Sim
Como podemos observar na Tabela 1, a proposta de desenvolvimento do Web Art é suprir
algumas das necessidades deixadas por outras ferramentas similares bem como utilizar de ações
importantes que as mesmas oferecem aos alunos.
Podemos observar na Tabela 1 que quase todos os itens relacionados foram cumpridos neste
sistema. Apenas o item de „Dicas na tela demonstrando a ação a ser tomada‟ não pode ser cumprida
e o item „Interface com tema suave e infantil‟ que foi parcialmente desenvolvido. Assim, a correção
e desenvolvimento destes itens ficam sugeridos como trabalhos futuros.
8 N/A – Lê-se Não Acessível
DESENVOLVIMENTO
O sistema webart foi desenvolvido a partir de necessidades encontradas na análise das
ferramentas similares (Kidweb e Kidlink) e com o objetivo principal de proporcionar à criança a
facilidade de interagir com sistema para criar páginas mesmo que simples, e publicá- los de forma
fácil na Internet para que estejam disponíveis a um publico mais amplo.
Neste capitulo estão descritos os tópicos referentes a modelagem do sistema desenvolvido e,
contem artefatos da UML confeccionados para caracterizar e ajudar na representação do sistema
desenvolvido.
1.9 Requisitos
Requisitos Funcionais
Nesta seção são apresentados os Requisitos Funcionais levantados na etapa inicial do
projeto:
RF01. O sistema deve permitir a criança solicitar sua inscrição;
RF02. O sistema deve permitir a criança cadastrar suas informações pessoais, inclusive a
escola na qual estuda para obter acesso ao sistema de criação de websites;
RF03. O sistema deve permitir a criança criar e editar suas páginas de forma visual;
RF04. O sistema deve permitir a criança carregar outras imagens para a elaboração de
sua página;
RF05. O sistema deve permitir inscrição de novos colaboradores;
RF06. O sistema deve permitir o colaborador cadastrar templates e imagens; e
RF07. O sistema deve permitir aos outros usuários visualizar e comentar as páginas
criadas.
Requisitos Não Funcionais
Nesta seção são apresentados os requisitos não funcionais, que apresentam de forma clara
como o sistema foi desenvolvido:
24
RNF01. O editor das páginas deve ser gráfico;
RNF02. O sistema deve permitir redimensionar imagens na elaboração das páginas;
RNF03. A interface do sistema deve ser desenvolvida com tema infantil;
RNF04. O sistema deve fornecer um acervo prévio de imagens e templates classificados
conforme suas características;
RNF05. O sistema utilizará o banco de dados MySql; e
RNF06. O sistema será desenvolvido para a Internet, utilizando tecnologias como PHP,
Javascript, XML e Flex.
1.10 Regras de Negócio
Algumas regras de negócio foram definidas também para o sistema como ferramentas para
seu desenvolvimento. As regras de negócio (RN) podem ser vistas a seguir:
RN01. É obrigatório o aluno escolher a escola na qual estuda, no ato de sua inscrição.
1.11 Modelo de Caso de Uso
Neste tópico serão apresentados os modelos de casos de uso que representa o ambiente do
sistema em questão.
A ferramenta WebArt está dividida em dois módulos que possuem todas as funções do
sistema, um módulo administrativo e um módulo para visualização dos trabalhos realizados.
O módulo administrativo ainda divide-se em três partes sendo determinadas através de
permissões concedidas aos usuários do sistema conforme mostra o caso de uso apresentado na
Figura 5.
25
Figura 5. Casos de Uso do módulo administrativo da Ferramenta WebArt
O modulo de visualização apresentado na Figura 6 é apresentado em detalhes no apêndice
A.1.2 PCT02 – Visitante.
26
Figura 6. Caso de Uso do módulo de visualização da ferramenta WebArt
Após logar-se ao sistema através de um formulário apresentado na página inicial onde o
usuário informa seu login e sua senha, o sistema verifica as permissões e mostra as opções
destinadas a cada usuário.
1.11.1 Descrição dos Casos de Uso do módulo Administrativo
1.11.1.1 Descrição dos atores
Aluno: Este ator tem controle sobre o gerenciamento do seu conteúdo como criação,
visualização, edição e exclusão de páginas bem como cadastro de imagem se forem
necessário.
Colaborador: Este ator tem controle sobre os templates e imagens que foram cadastrados
no sistema.
Administrador: Este ator tem controle total ao sistema como controle sobre inscrições de
usuários, cadastro e exclusão de templates e imagens.
27
1.11.1.2 Descrição dos Casos de Uso
Neste tópico é abordado o caso de uso referente ao sistema desenvolvido (UC01.02
Administra Páginas). A descrição dos demais casos de uso será abordada no apêndice no final deste
documento.
UC01.02 – Administração de Páginas
Este caso de uso descreve as funcionalidades a qual o aluno encontra ao acessar o site a
partir das permissões concedidas ao grupo de alunos. Na área de administração de páginas o aluno
encontra funcionalidades como listar páginas criadas por ele, criar uma nova página, alterar ou
excluir uma pagina criada por ele. As funcionalidades de criação e alteração de páginas dar-se-á de
modo visual. A Tabela 2 descreve os cenários referentes à criação de páginas para este caso de uso.
A Tabela 3 apresenta o cenário para a alteração da página e a Tabela 4 apresenta os cenários para a
exclusão de uma página criada.
Tabela 2. Cenário Criação de Páginas do UC01.02
Passo Descrição
1 O aluno acessa o link Páginas em seguida clica no ícone para nova página.
2 O sistema apresenta uma tela para a escolha do template. Após escolher, a criança clica no botão Salvar template conforme Figura 7.
3 O sistema apresenta uma área para a elaboração da página apresentado na
Figura 8.
4 A criança clica em um dos ícones na barra de ferramentas no topo da área de criação para inserir uma imagem ou um texto. Se for Imagem o sistema
apresenta uma tela com botões para escolha entre as imagens cadastradas ou uma nova. Figura 9.
5 A criança clica no botão Imagens para carregar as imagens cadastradas
organizadas por classificações Figura 10
6 Após escolher a figura a criança clica no botão Salvar Imagem e, a imagem é adicionada na área de criação. Para editar a imagem basta clicar uma vez sobre a imagem e o sistema
apresenta as opções da imagem. Se a opção for Editar, o sistema apresenta uma tela Figura 11, onde pode-se
alterar o tamanho da imagem. Após isso clicar no botão Salvar Imagem.
7 A criança clica em Escrever texto na sua página e, uma caixa de texto é adicionada na área de criação Figura 12.
Para editar o texto, basta clicar sobre a caixa de texto e o sistema apresenta as opções do texto. Se a opção for Editar, o sistema apresenta uma tela Figura 13, onde pode-se
alterar o texto bem como seu estilo.
8 Após página criada Figura 14, o aluno clica no link Salvar Página em seguida no botão Sim.
28
O sistema apresenta uma tela para digitar o nome da página Figura 15. Após digitar o nome da página, clicar no botão Salvar para finalizar a criação
da página.
10 O sistema retorna uma mensagem avisando que a criação foi bem sucedida Figura 16.
A Figura 7 apresenta uma tela onde o aluno pode escolher dentre vários templates para
confeccionar sua página. Após a escolha do template, o sistema apresenta a tela de criação Figura 8,
já com o template carregado. Os ícones dispostos em uma barra de ferramentas situada no topo da
área de criação disponibiliza informações que pode-se adicionar a pagina. O ícone com um conjunto
de imagens representa adicionar uma nova imagem na pagina. O ícone na forma de um balão de
texto representa adicionar um novo texto na sua página. O ícone de uma página colorida representa
a alteração de cor de fundo da sua página. E por ultimo, o ícone de um disquete verde representa
salvar a página criada.
Figura 7. Tela para escolha de templates
29
Figura 8. Área de criação de páginas
A Figura 8 apresenta a área de criação de páginas com os ícones dispostos no topo conforme
mencionado anteriormente.
A Figura 9 apresenta uma tela contendo as opções de Imagens onde há uma lista de imagens
cadastradas no sistema ou uma nova imagem para colocar na página.
30
Figura 9. Tela de opções de imagens
A Figura 10 demonstra uma tela com as imagens cadastradas no sistema conforme sua
classificação, para ser adicionada a página.
Figura 10. Tela para a escolha de imagem
A Figura 11 apresenta uma tela onde se pode editar a imagem adicionada a pagina.
31
Figura 11 Tela para edição de imagem
A Figura 12 apresenta uma tela com o texto adicionado na página a ser criada.
Figura 12. Tela com texto adicionado
32
Figura 13. Tela para edição do texto
A Figura 13 apresenta uma tela onde a criança pode editar o texto inserido na página.
A Figura 14 apresenta um exemplo de página criada para ser salva no sistema.
Figura 14. Tela com uma página criada para ser salva
33
A Figura 15 apresenta uma tela onde a criança pode digitar o nome à sua página.
Figura 15. Tela para escrever o nome da página
A Figura 16 apresenta uma tela com uma confirmação de que a página foi salva no sistema.
34
Figura 16. Tela com a confirmação de página salva.
A Tabela 3 apresenta os cenários referentes à alteração de uma página.
Tabela 3. Cenário Alteração de Página do UC01.02
Passo Descrição
1 O aluno clica no link Páginas em seguida no ícone para ver a lista de páginas
criadas.
2 O sistema apresenta uma tela com a listagem das páginas criadas mostrada na Figura 17.
3 O aluno escolhe a página que deseja alterar clicando no ícone representado por
um lápis.
4 O aluno executa os passos da Tabela 2. Cenário Criação de Páginas do UC01.02.
5 O sistema retorna uma mensagem avisando que a alteração foi bem sucedida.
Figura 17. Tela mostrando uma lista de páginas criadas pelo aluno
A Figura 17 apresenta uma listagem das páginas criadas pelo aluno. Nesta listagem o aluno
tem a opção de visualizar, editar ou excluir uma página já criada.
A Tabela 4 apresenta os cenários referentes à exclusão de uma página.
35
Tabela 4. Cenário Exclusão de Página
Passo Descrição
1 O aluno executa o passo 1 descrito no cenário da Tabela 3. Cenário Alteração
de Página do UC01.02
2 O aluno clica no ícone da página que deseja excluir.
3 O sistema retorna uma mensagem para confirmar a exclusão, apresentado na Figura 18.
4 O aluno confirma a exclusão.
5 O sistema retorna para listagem de páginas.
Figura 18.Tela de confirmação de exclusão de página
A tela representada pela Figura 18 apresenta uma mensagem para o aluno confirmar a
exclusão de uma página.
1.12 Diagrama de atividades
Esta seção apresenta outro artefato da UML o Diagrama de Atividades da Administração de
páginas pelo aluno. Este diagrama tem como objetivo entender o fluxo das funcionalidades do
sistema para a área de administração de páginas. O diagrama de atividades mostrado na Figura 19
também pode ser considerado um complemento para a Tabela 2, Tabela 3 e Tabela 4.
36
Figura 19. Diagrama de Atividades do UC01.02 Administra Página
A Figura 20 apresenta uma continuação do diagrama de atividades representado pela Figura
19, mostrando o fluxo da atividade Cria Página:
37
Figura 20. Fluxo da atividade Cria Página
1.13 Diagrama de classes
Este diagrama demonstrado na Figura 21 apresenta uma visão geral de classes lógicas
utilizadas como base para o desenvolvimento do sistema.
38
Figura 21. Diagrama contendo as classes do sistema
A tabela “Permissões” não foi utilizada no desenvolvimento do sistema. Apenas foi
atribuído um item na tabela pessoas para determinar qual o grupo de usuários do sistema.
A tabela “Pessoas” é responsável pela manipulação das informações pessoais dos usuários
do sistema.
A tabela “Países” é utilizada para armazenar as informações sobre países.
A tabela “Estados” é utilizada para armazenar informações sobre os estados referentes a um
pais.
A tabela “Escolas” é utilizada para armazenar algumas informações sobre escolas de uma
região. É utilizada como cadastro de um aluno pois é um dado obrigatório no cadastro.
39
A tabela “Imagens” é utilizada para armazenar informações sobre as imagens que podem ser
utilizadas nas páginas criadas pelas crianças.
A tabela “Templates” é utilizada para armazenar informações sobre os templates cadastrados
no sistema para a utilização em páginas criadas pelas crianças.
A tabela “Páginas” pode ser considerada uma das principais tabelas do sistema, pois é
responsável por armazenar as informações das páginas criadas pelas crianças.
Por último a tabela “Comentários” é responsável por armazenar os comentários feitos por
visitantes à uma determinada página.
1.14 Implementação
O sistema foi desenvolvido utilizando todas as ferramentas propostas anteriormente (PHP,
Adobe Flex, XML e MySql) e serão melhor detalhadas nesta seção.
Foi utilizado o framework PHP denominado Yii Framework de uso público, para agilizar no
processo de construção de classes e funções especificas do sistema, pois, traz em seu núcleo
diversas funções necessárias a um bom desenvolvimento de um sistema web. Este framework pode
ser encontrado em http://www.yiiframework.com. Este framework também se destaca por utilizar
diversas funções javascript sem que precisemos programá-los.
Para o armazenamento dos dados do sistema, foi utilizado o Sistema Gerenciador de Banco
de Dados MySql, amplamente usado em desenvolvimento de sistemas para a Internet. O MySql é
gratuito e pode ser encontrado em http://www.mysql.com.
Para desenvolver a área de criação, foi utilizado o Adobe Flex, uma vez que concede uma
maior facilidade em criar a parte gráfica. Apesar do Flex não ser uma tecnologia gratuita, pois, é de
propriedade da Adobe Systems, vem sendo normalmente utilizado para desenvolvimento de
aplicações RIA. O Flex é destinado à interfaces e não faz acesso a banco de dados ou sistema de
arquivos, portanto, se faz necessário o uso de outras linguagens de programação como o PHP para
esta finalidade.
Um dos pontos importantes é que sua linguagem nativa para a programação do Flex é o
XML, portanto, foi necessário o uso deste também no desenvolvimento do sistema, pois a forma
como o Flex se comunica com o PHP é por meio de um XML na forma de um WebService gerado
40
pelo framework Yii. Além disso, o XML foi utilizado como objeto gerado a partir da criação da
página e salvo no banco de dados do sistema para uso posterior.
O seu uso se dá na visualização da pagina, onde, um componente criado em Flex lê este
dado de um banco de dados através do PHP e remonta a pagina na tela para sua visualização.
A Figura 22 demonstra como é o funcionamento básico do sistema como mencionado
anteriormente.
Figura 22. Figura demonstrando o funcionamento básico do sistema
Na Figura 22, podemos observar como se dá o funcionamento básico do sistema. O cliente
ou criança acessa o sistema em um servidor web, após, acessa a área de criação, cria e salva a
página em formato XML via WebService no banco de dados. Da mesma forma, para visualizar a
página criada, o cliente acessa o sistema via Internet e através de um WebService, carrega a página
salva em XML e mostra ao visitante.
A seguir são apresentadas algumas das principais telas do sistema para dar-nos uma maior
noção do sistema:
41
Figura 23. Tela inicial do sistema
A Figura 23 apresenta a tela inicial do sistema. Nesta tela podemos observar alguns itens
importantes como um formulário para acesso ao sistema ou cadastro de um novo usuário. Também
podemos observar que temos em uma área algumas das páginas mais visitadas no site. Esta é uma
informação que se utiliza da contribuição dos visitantes, pois, a cada visualização de uma página,
ela recebe um ponto a mais. Este item pode ser considerado um dos itens da Web 2.0, pois, é o
42
usuário que determina a organização e disposição das páginas mais visitadas em uma espécie de
ranking.
Figura 24. Tela com opções para cadastro de um novo usuário
Na Figura 24 é apresentada uma tela apenas com as opções de cadastro para um novo aluno
ou um novo colaborador que tem permissões distintas no sistema.
43
Figura 25. Tela de cadastro de um novo aluno
Na Figura 25 é apresentada a tela de cadastro do novo aluno. Esta tela possui dados
importantes no cadastro como nome e a escola do aluno que está se cadastrando. Após preenchidas
todas as informações obrigatórias, deve-se pressionar o botão Salvar Dados para que os dados
pessoais sejam guardados no banco de dados do sistema.
Após se cadastrar no sistema e fazer o login no formulário para acesso ao sistema, a criança
visualiza a tela inicial do sistema que por sua vez determina através do tipo de usuário que está
acessando o sistema qual deverá ser a página principal. Esta tela pode ser observada na Figura 26.
44
Figura 26. Tela principal do sistema para crianças
Nesta tela podemos observar uma barra de tarefas onde possui alguns links de acesso a
outras áreas do sistema, um link para sair do sistema, uma saudação e o nome do usuário online no
momento com data e hora do último acesso no canto superior direito da tela e na imagem ao centro,
placas contendo links para alteração dos dados pessoais, acesso as páginas criadas e para sair do
sistema. Vale lembrar que ao clicar no seu nome no canto superior direito da tela, o sistema irá
mostrar uma tela com as informações do usuário online para alteração. Esta tela pode ser vista na
Figura 27.
45
Figura 27. Tela de alteração de informações pessoais
Na Figura 28 é apresentada uma listagem das páginas criadas pela criança com opções para
visualizar, editar e excluir a pagina respectivamente. Nesta tela pode-se observar dois links acima
da listagem das páginas, um serve para acessar a área de criação de novas páginas e o outro é para
uma pesquisa avançada, onde, podemos encontrar mais rapidamente uma dada pagina.
46
Figura 28. Lista de páginas criadas
Clicando no ícone para visualizar a página (ícone de lupa), o sistema chama um método que
passa as informações via WebService para um componente Flex para visualização da página,
conforme Figura 28.
47
Figura 29. Visualização da página
Clicando no ícone de um lápis (vide Figura 28), o sistema abre a opção para editar a página
conforme Figura 30. Neste ponto a criança pode apagar ou adicionar mais componentes na área de
criação.
48
Figura 30. Editar uma página
Acessando o link nova página, o sistema abre a tela para criação de uma nova página
trazendo uma pequena tela para escolha do template que a criança deseja utilizar. Esta tela pode ser
observada na Figura 31. Após escolher o template a criança já pode confeccionar sua página de
forma visual adicionando e editando imagens ou textos conforme Figura 32, Figura 33, Figura 34.
49
Figura 31. Escolha do template
50
Figura 32. Tela com botões para escolha de imagens
Na Figura 32 podemos escolher entre imagens já cadastradas no sistema ou uma nova
imagem. Ao clicar em Imagens o sistema chama um método do PHP através de um WebService que
traz todas as imagens organizadas por classificações para facilitar na escolha das mesmas. Esta tela
pode ser observada na Figura 33. Após escolher a imagem desejada basta clicar em Salvar imagem
para que seja adicionada na área de criação como na Figura 34.
51
Figura 33. Escolha de imagens
52
Figura 34. Imagem adicionada na área de criação
Após a imagem ser adicionada na área de criação ela pode ser editada, bastando apenas
clicar uma vez sobre a imagem para que o sistema mostre uma tela com as opções que você deve
tomar. Podemos ver esta tela na Figura 35. Nesta tela é apresentada três opções: Editar, Apagar e
Cancelar. A opção Editar nos mostra uma tela com a imagem atual para que seja editada. A
principio, somente foi desenvolvido a opção de redimensionamento da imagem, ficando outros tipos
de edições para trabalhos futuros. Esta tela pode ser vista na Figura 36. A opção Apagar, apenas
apaga a referencia da imagem da área de criação. Já a opção Cancelar apenas fecha a tela sem
causar alterações na imagem. Após editar a imagem basta clicar em Salvar Imagem para que a
mesma apareça na área de criação com as novas propriedades.
53
Figura 35. Tela com escolhas a tomar
54
Figura 36. Editar imagem
Ainda na área de criação podemos escolher a opção de mudar a cor da pagina apenas
clicando no ícone de uma página colorida.
Após ter criado a página, podemos clicar no ícone de um disquete verde para salvar-mos a
página em questão.
Até agora vimos as opções de criação de páginas por parte de uma criança mas, o mesmo
editor de páginas para crianças pode ser usado para criar templates para serem utilizados
posteriormente. Esta funcionalidade gera um XML que pode ser salvo em um arquivo para ser
enviado ao sistema. Atualmente a funcionalidade de salvar em arquivo não está desenvolvida,
55
portanto, um colaborador e somente o colaborador ou o administrador do sistema deve copiar o
código gerado e salvar em um arquivo para ser enviado. Esta funcionalidade está ativa somente para
este grupo de usuários e pode ser vista na Figura 37 e Figura 38.
Figura 37. Ícone para gerar o XML para um template
56
Figura 38. XML gerado
A seguir na Figura 39 é demonstrado um pequeno trecho de código XML como exemplo
para montar um template para uma página. Algumas das tags que estão entre as tags <texto> por
exemplo, são geradas pelo próprio componente TextArea do Flex, mas, não impede de criarmos o
texto usando tags normais do HTML.
57
<webart color="#cae8ff" width="888" height="478"> <imagem x="138" y="53" src="http://localhost:8080/webart/images/e19.jpg" width="200"
height="204" /> <texto x="372" y="98.5" width="331" height="214.5">
<TEXTFORMAT LEADING="1"> <P ALIGN="LEFT"> <FONT FACE="Comic Sans MS" SIZE="12" COLOR="#000000"
LETTERSPACING="0" KERNING="0"> Este é um código de exemplo para uma página de exemplo
</FONT> </P> </TEXTFORMAT>
<TEXTFORMAT LEADING="1"> <P ALIGN="LEFT">
<FONT FACE="Comic Sans MS" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0"> demonstrando como funciona a geração de templates no webart.
</FONT> </P>
</TEXTFORMAT> </texto> </webart>
Figura 39. Trecho de código XML de um template
1.15 TESTES
Nesta seção são apresentados os testes realizados no sistema com um grupo reduzido de
usuários de idades variadas, às quais a ferramenta destina-se.
Os testes foram realizados com crianças com idades variadas entre seis e dez anos, com o
intuito de testar a utilização da ferramenta pelos mesmos.
Inicialmente, foi realizada uma apresentação da ferramenta, demonstrando às crianças, os
objetivos e como a mesma deve ser utilizada. Em seguida, foi apresentado o módulo pertinente ao
objetivo específico deste trabalho, ou seja, o espaço da criança. Neste espaço, foi explicado o que
significam cada ícone e quais ações podemos executar com eles.
Após as primeiras instruções de como funciona a ferramenta e o que ela possui, as crianças
foram convidadas a criar algo, seguindo as instruções do autor, como forma de facilitar o
ensinamento e a utilização da ferramenta.
58
Foram instruídos a clicar no ícone “Minhas Páginas” e em seguida no ícone “Nova Página”,
onde o sistema apresenta a tela para criação das páginas iniciando com a escolha do modelo da
página.
Após o sistema apresentar a tela para criação de páginas, foram apresentadas as ações que a
criança poderia tomar para criar sua página. Novamente as crianças foram instruídas a clicar no
ícone para mudar a cor de fundo do seu trabalho.
Outra orientação dada às crianças foi adicionar uma imagem no corpo de seu trabalho.
Foram instruídas a clicar no ícone “Imagens” para abrir a tela de escolha de imagens. Nesta tela, há
opções para adicionar uma imagem previamente cadastrada no ambiente, opção de cadastrar uma
nova imagem e salvar a imagem escolhida. Foi solicitado então que clicassem em “Imagens” onde o
sistema apresenta a tela para escolher uma das imagens que estão agrupadas conforme sua
classificação. Após a escolha da imagem foram instruídas a clicar no ícone “Salvar Imagem” para
que a imagem seja adicionada à área de desenho. Neste ponto, foi demonstrado que as dimensões da
imagem podem ser editadas bastando apenas clicar na imagem e escolher a opção “Editar”.
Também foi demonstrado que a criança tinha total liberdade para posicionar a imagem na área de
desenho, bastando somente arrastá- la para a posição desejada.
Após a inserção de imagem na página, foram solicitados a adicionar um texto em sua pagina
seguindo os mesmos passos da inserção de imagem, apenas clicando em “Escrever na sua página”.
Após o término da criação do conteúdo, as crianças foram orientadas a salvar a página
criada por elas clicando no ícone de um disquete que representa a ação “Salvar Página” e, escrever
um nome para a mesma na tela que solicita a ação, para identificá- las no sistema.
Depois deste procedimento, foi solicitado aos alunos a fazerem uma página de forma
autônoma, apenas esclarecendo dúvidas quanto à construção do conteúdo. Esta ação teve como
objetivo, analisar o uso da ferramenta e detalhar as dificuldades e erros obtidos.
Nesta etapa da aplicação dos testes, pode-se observar que a diferença entre as faixas etárias
foi crucial para a análise da interface escolhida para o desenvolvimento do Web Art pois, a tentativa
de escolher uma interface mais sóbria e que atendesse tanto o público adulto quanto o público
infantil, não foi totalmente contemplada e, que certamente necessita de melhorias por parte de
especialistas na área de design de interfaces e da área da educação infantil. Esta análise deu-se a
59
partir do momento em que as faixas etárias tornaram-se dispersas uma das outras, pois, interfaces
para crianças de seis a oito anos são diferentes de interfaces para crianças de nove e dez anos.
Após a realização dos testes foram realizadas algumas perguntas as crianças de forma oral
afim de retirar algumas idéias e, para que sugerissem algo a mais na ferramenta.
1.15.1 Analise dos testes
Analisando as crianças enquanto usavam a ferramenta, observou-se que crianças de oito
anos ou menos tiveram dificuldades em acessar os itens pertinentes a criação de uma página, uma
vez que não associavam o ícone destinado a ação “Nova Página” para criar uma nova página e, os
demais ícones como o de inserção de imagens. Estas crianças necessitaram de um acompanhamento
maior para conseguir achar as ações à qual desejavam, pois estão em fase de alfabetização e há uma
dificuldade maior em ler e escrever textos.
Também foi observado que textos pequenos e ícones que não eram facilmente associados a
ação geraram uma dificuldade maior na utilização da ferramenta por parte das crianças de menor
idade.
Seguindo na mesma linha, observou-se que a ação de escolher imagem e editá- las não ficou
muito clara gerando dificuldades para executar a ação.
Diferentemente, as crianças maiores de nove anos tiveram uma facilidade maior quanto ao
uso da interface, pois os mesmos já sabem ler, conseguindo achar as ações à qual desejavam.
Algumas dúvidas quanto a apagar ou editar uma imagem ou texto adicionado a área de criação
foram levantadas e rapidamente foram sanadas, pois assimilaram mais rapidamente a ação.
Após a análise dos resultados e das questões levantadas às crianças, observou-se que há
melhorias importantes a fazer na ferramenta tanto em questões de interface quanto usabilidade.
Observou-se também que a utilização da ferramenta se encaixa melhor em uma faixa etária acima
dos nove anos, uma vez que o nível de alfabetização é mais avançado.
Das sugestões levantadas pelas crianças, as mais pedidas foram adição de uma área
contendo jogos online, histórias infantis e vídeos como desenhos.
60
1.16 Sugestões para trabalhos futuros
A partir da análise dos resultados obtivemos várias sugestões para trabalhos futuros. Dentre
estas sugestões estão:
Melhorar a interface, a fim de deixá- la mais infantil para que possa atender as
crianças de oito anos ou menos;
Rever os itens que devem conter uma maior usabilidade;
Adicionar áreas de jogos online de cunho educativo, histórias infantis e vídeos de
caráter educativo;
Melhorar a ação de escolher uma imagem e adicioná- la na área de criação;
Melhorar a ação de editar uma imagem, redimensionando a imagem na própria área
de criação;
Adicionar mais opções a área de criação de páginas para aumentar o grau de
interesse por parte da criança na ferramenta;
Desenvolvimento de temas para que cada usuário do sistema tenha opções de escolha
de interface;
Incluir permissões para edição de páginas criadas pelas crianças;
Tutoriais na forma de vídeo demonstrando a utilização da ferramenta.
CONCLUSÕES
A partir da análise das ferramentas similares, foi possível verificar características relevantes
para a composição deste projeto, assim como na elaboração dos requisitos necessários para o
desenvolvimento da ferramenta. Um estudo sobre o que realmente significa Web 2.0 também
auxiliou na especificação de como uma ferramenta deste porte poderia ser desenvolvido para a
Internet, fazendo com que os usuários do sistema pudessem interagir com o mesmo, para criar suas
páginas ou até mesmo organizar dados em uma espécie de ranking, como demonstrado na página
principal da ferramenta.
Além de possibilitar a criação de páginas, o WebArt, trás a vantagem de ser disponibilizado
na Internet, vantagem esta que uma das ferramentas analisadas e que mais se aproxima desta
ferramenta desenvolvida - o KidWeb - não tinha, uma vez que eram instalados em computadores
diferentes e, para todos os efeitos todos os usuários estarão acessando o mesmo sistema.
Um levantamento sobre possíveis ferramentas e tecnologias que poderiam fazer parte ou
seriam usadas no desenvolvimento da ferramenta, levou-se a escolher as que ofereciam maior
agilidade na hora do desenvolvimento, pois o projeto inicial abordava vários módulos e, faria com
que o desenvolvimento sofresse um grande atraso.
Após a análise das ferramentas e o levantamento dos requisitos, definiu-se que seriam
utilizados o PHP, o JavaScript, e o Adobe Flex, bem como o HTML no desenvolvimento das
interfaces do sistema.
Uma vez definidas as ferramentas que seriam utilizadas no desenvolvimento do sistema,
iniciou-se uma pesquisa para encontrar um framework em PHP que atendesse o máximo de
requisitos necessários no que diz respeito ao PHP. Esta pesquisa nos revelou o Yii Framework, um
framework robusto em PHP que integra diversas funções em JavaScript em seu núcleo e, além do
mais tem uma rápida curva de aprendizado.
Para tornar a troca de mensagens entre o PHP e o Adobe Flex o mais simples possível, o Yii
Framework mais uma vez se tornou eficaz, pois traz em seu núcleo uma forma de gerar
WebService, uma das formas de comunicação entre o Flex e o PHP.
62
O desenvolvimento da interface da ferramenta se deu com base na prototipação de ba ixa
fidelidade realizada anteriormente na etapa de levantamento dos requisitos. Algumas modificações
foram realizadas para fornecer a usabilidade à ferramenta. Por se tratar de um desenvolvimento sem
o acompanhamento dos usuários finais, se faz necessária a ajuda de um especialista em desenhos de
interfaces para softwares infantis a fim de desenvolver interfaces que se adéque aos usuários finais.
Analisando alguns dos princípios de Nielsen, pode-se verificar que a ferramenta Web Art foi
desenvolvida atendendo parcialmente ao que ele propõe, como por exemplo, informações de onde o
usuário se encontra e a linguagem utilizada para os usuários, esta última com uma dificuldade
maior, pois, deveria atender o público adulto e o público infantil ao mesmo tempo. A partir destas
análises observa-se que itens da usabilidade empregados no Web Art devem ser melhorados.
Os testes realizados na ferramenta foram essenciais para obtenção de dados que irão ajudar
nas melhorias propostas na ferramenta. Estas melhorias serão necessárias para que a ferramenta seja
utilizada de forma ideal em escolas e fora dela. Neste teste, foram detectadas dificuldades em
executar algumas ações pertinentes a criação das páginas como incluir e editar imagens, que devem
ser melhoradas de modo a facilitar a ação. Também pode-se observar que houve uma facilidade
maior na utilização da ferramenta por parte das crianças maiores de nove anos.
Após a aplicação dos testes foram realizadas algumas perguntas as crianças que participaram
do mesmo e, dentre suas respostas, o pedido de ter espaços para jogos, histórias e vídeos infantis se
sopre puseram, uma vez que há uma facilidade maior por parte das crianças em utilizar estes tipos
de aplicativos tanto por parte de crianças menores de oito anos quanto para maiores de nove anos.
Analisando as respostas dadas pelas crianças, podemos observar que surgiram algumas
idéias para um aprimoramento da ferramenta, para melhor utilização e com objetivo de aumentar o
desenvolvimento cognitivo da criança. Desta forma, um dos conceitos da Web 2.0, o Beta Eterno,
seria largamente utilizado, pois, a ferramenta passa a sofrer alterações constantes visando o
melhoramento de suas funções, interface e usabilidade.
Uma das questões levantadas às crianças com idade acima dos nove anos foi a opção de
trocar algumas provas ou trabalhos normalmente aplicadas em uma sala de aula por um trabalho
realizado e avaliado na ferramenta, ao que as crianças com um avançado nível de alfabetização
responderam que era mais intuitivo realizar a prova criando uma pagina na ferramenta do que as
63
normalmente aplicadas em sala de aula. As crianças menores de oito anos preferiam pintar desenhos
em papéis.
Desta forma, uma das opções levantadas inicialmente, é modificar a faixa etária da aplicação
para crianças acima de nove anos, uma vez que a ferramenta foi melhor utilizada por estes.
Todo o processo envolvido neste projeto, contribuiu para a aquisição de conhecimentos
sobre desenvolvimento de sistemas para crianças e pode-se perceber também que desenvolver
interfaces infantis é uma tarefa que envolve a percepção de diversos fatores multidisciplinares e,
necessita de profissionais que tenham experiência na área da informática na educação e
principalmente profissionais que tenham experiência em prover interfaces para um público infantil.
REFERÊNCIAS BIBLIOGRÁFICAS
ADOBE Systems incorporated. Adobe Flex 3. Criar aplicações ricas para a Internet interativas e compatíveis com várias plataformas. 2009. Disponível em:
<http://www.adobe.com/br/products/flex/?promoid=BOZRZ>. Acesso em: 30 out. 2009.
ALECRIM, Emerson. O Que é RSS? 2008. Disponível em: <http://www.infowester.com/rss.php>.
Acesso em: 21 out. 2009.
ALMEIDA, Maria Elizabeth de. ProInfo: informática e formação de professores. Brasília: MEC/ Secretaria de Educação à Distância, 2000. v.1. 192 p.
ANDERSON, Paul. What is Web 2.0? Ideas, technologies and implications for education. JIISC Technology and Standards Watch, fev. 2007. Disponível em: <
http://www.jisc.ac.uk/media/documents/techwatch/tsw0701b.pdf>. Acesso em: 15 set. 2009.
BENITTI, Fabiane Barreto Vavassori; FERNANDES, Luciana Soares; RAABE, André Luis Alice. Interface de software educacional: desafios de design gráfico. In: CONGRESSO BRASILEIRO DE
COMPUTAÇÂO, IV, 2004, Itajaí. Anais eletrônicos do Congresso Brasilieiro de Computação. Itajaí: CBCOMP, 2004. Anais do IV Congresso Brasileiro de Computação. Disponível em:
<http://www.niee.ufrgs.br/eventos/CBCOMP/2004/pdf/Informatica_Educacao/t170100308_3.pdf>. Acesso em: 07 dez 2009.
BITTENCOURT, Ig Ibert et. al. Estado da arte em Web semântica e Web 2.0: potencialidades e
tendências da nova geração de ambientes de ensino na Internet. Revista Brasileira de Informática
na Educação, v. 17, n. 1, p.30-42, jan./mar. 2009.
CARVALHO, Ana Amélia Amorin. Rentabilizar a Internet no ensino básico e secundário: dos recursos e ferramentas online aos LMS. Sísifo – Revista de ciências da educação, n. 3, p. 25-39, mai./ago. 2007. Disponível em: <http://sisifo.fpce.ul.pt/pdfs/sisifo03PT02.pdf >.Acesso em: 31 out.
2009.
COUTINHO, Clara Pereira; BOTTENTUIT JUNIOR, João Batista. Blog e Wiki: os futuros professores e as ferramentas da Web 2.0. In: Simpósio internacional de informática educativa, 9.,
2007, Porto. Actas do Simpósio Internacional de Informática Educativa, Porto – Portugal: Instituto Politécnico do Porto, 2007. p. 199-204. Disponível em: <
http://hdl.handle.net/1822/7358>. Acesso em: 31 nov. 2009.
CRIMINACIO, Simone. Kidweb – Ferramenta para criação de websites por crianças. 2001. Disponível em: <http://www.inf.ufes.br/~sbie2001/figuras/artigos/a024/A024.htm> Acesso em: 27
set. 2009.
FINGER, Johanna Emile; SILVEIRA, Jonathan Dos Santos da; PINHEIRO, Soraia Gracelides.
Recursos Tecnológicos como Estratégias de Aprendizagem no Ensino de Ciências e Biologia. 2008. Disponível em: <http://www.webartigos.com/articles/17705/1/recursos-tecnologicos-como-estrategias-de-aprendizagem-no-ensino-de-ciencias-e-biologia/pagina1.html>. Acesso em: 29 out.
2009.
65
GODOY, Ana Paula et al. O Saber e o Sabor. 2001. Disponível em: <
http://www.cce.ufsc.br/~fialho/ergcog/trab_alunos/T2001A/ArtSem/SabereSabor.doc >. Acesso em: 25 out. 2009.
KIDLINK. About Kidlink. 2009. Disponível em: <http://www.kidlink.org/kidspace/start.php?HoldNode=26745>. Acesso em: 25 out. 2009.
MANO, Alexandre Sérgio. Interfaces de computador para crianças - avaliação e construção.
2005. 113 f. Tese (Mestrado) - Curso de Mestrado em Informática, Escola de Engenharia, Universidade do Minho, Portugal, 2005. Disponível em: <www.di.uminho.pt/~jfc/pub/Mano.pdf>.
Acesso em: 07 dez. 2009.
MORAN, José Manuel. Como utilizar a Internet na educação. Ciência da Informação, v. 26, n. 2, Brasília maio/ago. 1997. Disponível em: <
http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-19651997000200006 >. Acesso em: 13 ago. 2009.
NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Elsevier, 2000. PÓVOA, Marcello. Anatomia da Internet: investigações estratégicas sobre o universo digital. Rio de Janeiro: Casa da Palavra, 2000. 112 p.
O'REILLY, Tim. What is Web 2.0: design patterns and business models for the next generation of software. Communications & Strategies, Ca - Usa, n. 65, p.17, jan./abr. 2007.
PEREIRA, Fabio Roberto. Kidweb - Ferramenta para Criação de Websites por Crianças –
Fase II. 2002. 124 f. Trabalho de Conclusão de Curso (Bacharel) – Curso de Ciência da Computação, Universidade do Vale do Itajaí, Itajaí, 2002.
PÓVOA, Marcello. O que é Web 2.0?: uma visão pragmática do termo que define a segunda
geração da Internet. 2006. Disponível em: <http://webinsider.uol.com.br/index.php/2006/10/30/o-
que-e-web-20/>. Acesso em: 21 out. 2009.
RAABE, André Luis Alice et. al. Oficinas de utilização de software educacional: um relato de experiência. In: WORKSHOP SOBRE INFORMATICA NA ESCOLA, 13, 2007, Rio de Janeiro.
Anais eletrônicos da Sociedade Brasileira de Computação. Rio de Janeiro: SBC, 2007. Anais do XXVII Congresso da Sociedade Brasileira de Computação. Disponível em:
<http://www.de9.ime.eb.br/~sousamaf/cd/pdf/arq0030.pdf>. Acesso em: 21 out. 2009.
RAABE, André Luis Alice. Uma Ferramenta de Autoria para Criação de Websites por
Crianças. 2003. Disponível em:
<http://www.cinted.ufrgs.br/renote/set2003/artigos/ferramentadeautoria.pdf>. Acesso em: 29 out. 2009.
ROMERO, Claudia Severino. Recursos tecnológicos nas instituições de ensino: planejar aulas
de matemática utilizando softwares educacionais. 2006. Disponível em: <http://www.inf.unioeste.br/~claudia/texto2.pdf>. Acesso em: 28 out. 2009.
SANT'ANA, Alex Sandro C. A Web 2.0, a educação e as novas tecnologias da informação e comunicação: novas possibilidades de aprendizagem na pós-modernidade. In: ENCONTRO
NACIONAL DE DIDATICA E PRATICA DE ENSINO, 14, 2008, Porto Alegre. Trajetórias e
Processos de Ensinar e Aprender: lugares, memórias e culturas . Porto Alegre: EDIPUCRS,
66
2008. XIV Encontro Nacional de Didática e Prática e Ensino. Disponível em:
<prof.alexsantana.googlepages.com/poster_1_web_20_ntic_alex_sandro_c_s.pdf>. Acesso em: 30 out. 2009.
WIKIPEDIA. WYSIWYG. 2009. Disponível em: < http://pt.wikipedia.org/wiki/WYSIWYG>. Acesso em: 13 set. 2009.
APÊNDICES
CONTEÚDO DO PROJETO
Nesta seção é apresentada uma descrição de todos os artefatos gerados na etapa de projeto
com a ferramenta EA, referente à solução proposta. Os nomes de pacotes, casos de uso e telas,
seguem o padrão gerado pela ferramenta EA.
A.1 DESCRIÇÃO DOS CASOS DE USO
Neste tópico é apresentado uma descrição de todos os casos de uso utilizados para o projeto.
Os casos de uso estão separados em dois pacotes PCT01 – Administrativo e PCT02 - Visitantes
A.1.1 PCT01 - Administrativo
Permite o aluno criar, editar e excluir páginas de modo visual, permite também o
colaborador cadastrar novos templates e novas imagens e permite também o administrador do
sistema ter controle sobre as inscrições realizadas no sistema. As descrições dos casos de uso serão
apresentadas nos tópicos a seguir:
A.1.1.1 UC01.01 – Realiza Inscrição
Permite o aluno ou o colaborador informar seus dados pessoais ao sistema, escolher a escola
na qual o aluno estuda, e permite os usuários alterarem suas informações.
Tabela 5. UC01.01 - Realiza Inscrição
Cenários Passos
1. Quero me cadastrar (Novo Aluno)
{Principal}
1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06 - Área para usuários. 2. O aluno escolhe a opção Novo Aluno (Figura 41).
3. O sistema apresenta uma tela para cadastro do aluno (Figura 42). 4. O aluno informa seus dados pessoais.
5. O aluno informa a escola na qual estuda. 6. O aluno informa o e-mail do pai/mãe/responsável. 7. O aluno informa um login para ter acesso ao sistema.
8. O aluno informa uma senha para ter acesso ao sistema. 9. O aluno envia os dados ao sistema.
10. O sistema verifica se e-mail já existe. 11. O sistema verifica se o login já existe. 12. O sistema valida as informações passadas pelo aluno.
13. O sistema grava as informações e retorna uma mensagem de confirmação (Figura 43).
2. Quero me 1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06
69
cadastrar (Colaborador)
{Principal}
- Área para usuários. 2. O colaborador escolhe a opção Novo Colaborador (Figura 41).
3. O sistema apresenta uma tela para cadastro do colaborador (Figura 44). 4. O colaborador informa seus dados pessoais.
5. O colaborador informa um login para ter acesso ao sistema. 6. O colaborador informa uma senha para ter acesso ao sistema. 7. O colaborador envia os dados ao sistema.
8. O sistema verifica se e-mail já existe. 9. O sistema verifica se o login já existe.
10. O sistema valida as informações passadas pelo colaborador. 11. O sistema grava as informações e retorna uma mensagem de confirmação (Figura 43).
3. Alterar meus dados {Alternativo}
1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06 - Área para usuários. 2. O usuário clica no ícone verde ou no seu nome no canto superior direito da
página. 2. O sistema apresenta uma tela contendo as informações do usuário para
serem alteradas se necessário (Figura 45). 3. O usuário edita seus dados com novas informações. 4. O usuário envia seus dados ao sistema.
5. O sistema valida as informações passadas pelo usuário. 6. O sistema atualiza as informações do usuário e retorna uma mensagem de confirmação (Figura 46).
4. Entrar no site (Aluno) {Alternativo}
1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06 - Área para usuários. 2. O aluno digita seu login.
3. O aluno digita sua senha. 4. O aluno envia seus dados ao sistema.
5. O sistema valida as informações passadas pelo aluno. 6. O sistema mostra a tela principal da administração de páginas do aluno (Figura 47).
5. Entrar no site
(Colaborador) {Alternativo}
1. O colaborador executa os passos do UC01.06 apresentado na Tabela 10.
UC01.06 - Área para usuários. 2. O colaborador digita seu login.
3. O colaborador digita sua senha. 4. O colaborador envia seus dados ao sistema. 5. O sistema valida as informações passadas pelo colaborador.
6. O sistema mostra a tela principal da administração de templates e imagens do colaborador (Figura 48).
6. Esqueci minha
senha {Alternativo}
1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06
- Área para usuários. 2. O usuário escolhe a opção Esqueci minha senha. 3. O sistema apresenta uma tela com um campo onde o usuário informa o e-
mail cadastrado no sistema, para receber sua senha (Figura 49). 4. O usuário envia o pedido de sua senha.
5. O sistema valida o e-mail do usuário. 6. O sistema envia a senha para o e-mail do usuário. 7. O sistema apresenta uma tela com a mensagem confirmando que a senha foi
enviada ao e-mail cadastrado (Figura 50).
70
7. Dados inválidos {Exceção}
1. No passo 1.10, 1.11, 1.1.8, 1.1.9 caso já existe e-mail ou apelido cadastrados o sistema retorna uma mensagem que estas informações já estão
cadastradas no sistema. 2. No passo 1.12, 1.1.10, 2.5, 3.5, 3.1.5, 4.5 caso não sejam informados todos
os dados obrigatórios o sistema retorna uma mensagem informando que há campos inválidos (Figura 51 e Figura 52).
A.1.1.2 UC01.02 Administra Páginas
O aluno gerencia suas páginas, tendo uma lista das páginas criadas, criar ou alterar páginas
de modo visual, visualizar as páginas criadas ou excluir páginas.
Tabela 6. UC01.02 - Administra Páginas
Cenários Passos
1. Criação de Páginas {Principal}
1. O aluno acessa o link Páginas em seguida clica no ícone para Nova página.
2. O sistema apresenta uma tela para a escolha do template (Figura 54). 3. Após a escolha do template o sistema apresenta a área de criação de páginas (Figura 53).
4. O aluno clica no ícone Imagens para inserir uma imagem na página. 5. O sistema apresenta uma janela com as imagens cadastradas no sistema
organizadas por categoria (Figura 55). 6. O aluno clica no ícone para adicionar um texto na página e, o texto é inserido na área de criação.
7. Clicando sobre o texto o sistema apresenta uma janela com as opções de Editar, Apagar, e cancelar. Clicando em Editar, o sistema apresenta um
pequeno editor de texto (Figura 66). 8. Após página criada (Figura 67), o aluno clica no link Salvar Página em seguida digita um nome para a página e clica no ícone Salvar para finalizar a
criação da página (Figura 56). 9. O sistema retorna uma mensagem avisando que a criação foi bem
sucedida (Figura 57).
2. Alteração de Páginas {Alternativo}
1. O aluno clica no link Páginas em seguida no ícone para ver a lista de páginas criadas. 2. O sistema apresenta uma tela com a listagem das páginas criadas (Figura
58). 3. O aluno escolhe a página que deseja alterar clicando no ícone de um lápis.
4. O aluno executa os passos do cenário Criação de Páginas a partir do item 1.4. 5. O sistema retorna uma mensagem avisando que a alteração foi bem
sucedida (Figura 57).
3. Exclusão de Páginas
{Alternativa}
1. O aluno executa o passo 1 do cenário Alteração de Páginas. 2. O aluno clica no ícone da página que deseja excluir.
3. O sistema retorna uma mensagem para confirmar a exclusão (Figura 59). 4. O aluno confirma a exclusão.
5. O sistema retorna para listagem de páginas.
71
A.1.1.3 UC01.03 Gerencia Templates
O administrador pode cadastrar um novo template no sistema.
Tabela 7. UC01.03 - Gerencia de Templates
Cenários Passos
1. Cadastra
Template {Principal}
1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06 -
Área para usuários. 2. O colaborador acessa o link Templates e em seguida Cadastrar Templates. 3. O sistema apresenta uma tela para cadastro do template (Figura 60).
4. O colaborador informa os dados do template. 5. O colaborador informa arquivo de configuração do template.
6. Ocolaborador escolhe a imagem contendo o layout do template. 7. O colaborador envia as informações ao sistema. 8. O sistema valida as informações do template.
9. O sistema grava as informações e retorna uma mensagem de confirmação (Figura 61).
A.1.1.4 UC01.04 Gerencia Imagens
O administrador pode cadastrar novas imagens inserindo em categorias.
Tabela 8. UC01.04 - Gerencia de Imagens
Cenários Passos
1. Cadastra
Imagem {Principal}
1. O aluno executa os passos do UC01.06 apresentado na Tabela 10. UC01.06 -
Área para usuários. 2. O colaborador acessa link Imagens em seguida Cadastrar Imagens.
3. O sistema apresenta uma tela para o cadastro da imagem (Figura 62). 4. O colaborador informa a imagem. 5. O colaborador informa os dados da imagem.
6. O colaborador informa a classificação da imagem. 7. O colaborador envia os dados da imagem ao sistema.
8. O sistema valida as informações passadas pelo colaborador. 9. O sistema apresenta uma tela de confirmação de cadastro (Figura 63).
72
UC01.05 Gerencia Inscrições
O administrador gerencia alunos ou colaboradores cadastrados. Pode listar e desativar
alunos bem como colaboradores, bastando apenas visualizar os dados da pessoa e desativá- la do
sistema.
Tabela 9. UC01.05 - Gerencia Inscrições
Cenários Passos
1. Pessoas
{Principal}
1. O administrador faz o login no sistema.
2. O administrador acessa link Pessoas. 3. O sistema apresenta uma tela com uma lista de pessoas (Figura 64).
4. O administrador pode escolher entre os ícones para visualizar ou excluir usuários.
A.1.1.5 UC01.06 Área para Usuários
Este caso de uso traz informações que são usadas em mais de um cenário do UC01.01
Realiza inscrição e nos casos de uso UC01.03 Gerencia de Templates e UC01.04 Gerencia de
Imagens. Para diminuição de passos nos cenários foi gerado este caso de uso.
Tabela 10. UC01.06 - Área para usuários
Cenários Passos
1. Ações para
Usuários {Principal}.
1. O sistema apresenta um pequeno formulário no canto superior esquerdo, para
acesso ao sistema com as opções de Entrar, Quero me cadastrar e Esqueci minha senha (Figura 40).
A.1.2 PCT02 – Visitante
Permite o visitante visualizar websites criados pelas crianças.
A.1.2.1 UC02.01 Visualiza páginas criadas
O visitante pode visualizar as páginas criadas pelos alunos. Pode listar as páginas por alunos
ou por escolas. Além de visualizar as páginas o visitante pode deixar um comentário para o aluno.
Tabela 11. UC02.01 Visualiza páginas Criadas
Cenários Passos
1. Visualiza
Página
1. O visitante acessa a área de visualização das páginas clicando no link
Páginas.
73
{Principal} 2. O sistema apresenta uma tela com a listagem das páginas criadas. Clicando no link Pesquisa avançada, abre-se um pequeno formulário de pesquisa, onde o
visitante pode escolher visualizar trabalhos de um aluno específico (Figura 68).
2. Comenta Página
{Alternativo}
1. O visitante executa os passos do cenário Visualiza Página. 2. O visitante escolhe o trabalho que deseja visualizar clicando no ícone de uma
lupa. 3. O sistema apresenta uma tela com a página criada pelo aluno (Figura 69).
4. O visitante preenche um pequeno formulário ao final da página deixando um comentário para o aluno (Figura 70).
74
A.2 PROTÓTIPOS DE TELAS DO SISTEMA
Figura 40. Tela principal do formulário de Login
75
Figura 41. Opções de cadastro
76
Figura 42. Tela de cadastro do aluno
77
Figura 43. Tela de confirmação de cadastro
Figura 44. Tela de cadastro do colaborador
78
Figura 45. Tela de alteração de dados
79
Figura 46. Tela de confirmação de alteração
80
Figura 47. Tela principal da administração de páginas
Figura 48. Tela principal da administração de templates. A tela de Imagens segue o mesmo estilo
81
Figura 49. Tela pedido de senha
Figura 50. Tela de senha enviada
82
Figura 51. Tela campo inválido 1
83
Figura 52. Tela campo inválido 2
84
Figura 53. Área para criação de páginas
Figura 54. Tela escolher template
85
Figura 55. Tela adicionando imagens a página
86
Figura 56. Tela salvar página
Figura 57. Tela confirmação de página criada
87
Figura 58. Tela com lista de páginas criadas
88
Figura 59. Tela de confirmação de exclusão de página
89
Figura 60. Tela de cadastro de template
Figura 61. Mensagem de confirmação de cadastro de template
90
Figura 62. Tela de cadastro de imagem
Figura 63. Mensagem de confirmação de cadastro de imagem
91
Figura 64. Tela com uma lista de pessoas cadastradas no sistema
92
Figura 65. Janela Escolha Modelos
93
Figura 66. Editor de texto
94
Figura 67. Página criada por aluno
Figura 68. Formulário de Pesquisa e lista de páginas
95
Figura 69. Visitante vê página criada
96
Figura 70. Formulário de Comentário
97
A.3 DIAGRAMA DE ATIVIDADES
As figuras a seguir mostram os diagramas de atividades relacionadas à solução proposta.
Estes artefatos foram gerados para um melhor entendimento do fluxo do sistema para cada ator.
Figura 71. Diagrama de Atividades Principal do Sistema
98
Figura 72. Diagrama de Atividades da Administração de Páginas pelo aluno
99
Figura 73. Diagrama de Atividades do Aluno Criando Página
100
Figura 74. Diagrama de Atividades do Cadastro de Usuário
101
Figura 75. Diagrama de Atividades da Gerência de Imagens
102
Figura 76. Diagrama de Atividades do Gerenciamento de Inscrições
103
Figura 77. Diagrama de Atividades do Gerenciamento de Templates
104
A.4 DIAGRAMA DE CLASSES
A seguir são apresentados dois tópicos demonstrando os diagramas de classes do projeto.
Esses diagramas foram gerados com o software EA para demonstrar as possíveis classes de
negócio/domínio e objeto do projeto.
A.4.1 Diagrama de Classes (negocio/domínio)
Figura 78. Diagrama de Classes do Projeto
105
A.4.2 Diagrama de objetos
A Figura 79 apresenta o diagrama de objeto. Este diagrama demonstra um exemplo de como
é preenchido as informações dos objetos do sistema.
Figura 79. Diagrama de Classe de Objeto
![Pax Managed Applications [PMA]](https://static.fdocumentos.com/doc/165x107/55b3f652bb61eb7f708b477b/pax-managed-applications-pma.jpg)
