Your SlideShare is downloading. ×
Autenticação Visual - EspWeb 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Autenticação Visual - EspWeb 2010

545
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
545
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UEM - UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB SERVIÇO WEB 2.0 AUTENTICAÇÃO VISUAL Claudia Heidemann de Santana Elton F. Xavier José Edmilson da Fonseca Joyce Milani Mathias Regis da Silva Avansini Renan Honorato MARINGÁ 2010
  • 2. UEM - UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB SERVIÇO WEB 2.0 AUTENTICAÇÃO VISUAL Trabalho de pós-graduação apresentado à disciplina de Design de Interação, ministrada pelo professor Frederick VanAmstel. MARINGÁ 2010 2
  • 3. INTRODUÇÃO Com o avanço da tecnologia nos últimos anos a utilização de computadores para a realização de tarefas tem se tornado cada vez mais presente, além disso, devido a diversidade tecnológica existente acabamos nos sobrecarregando com a enorme variedade de criação de usuários, sendo assim temos a árdua tarefa de memorizar diferentes senhas para acessar as mais variadas contas de usuário. Nota-se a principio que uniformizar as diferentes contas de usuário de uma pessoa para acesso a diferentes sistemas de autenticação pode aumentar a vulnerabilidade, pois a quebra do sigilo de uma única conta de usuário acarretará na quebra de todas as contas deste mesmo usuário. Surgindo assim uma demanda para suprir este problema sem que afeta seu nível de confiança. Tomando como modelo de técnicas adotadas por grandes empresas, não necessariamente empresas de segurança de T.I., como por exemplo, a Bradesco S.A., no qual recentemente tem adotado de forma gradativa o escaneamento do formato da palma da mão para autenticação em seus caixas eletrônicos, observamos que o uso deste tipo de recurso poderia suprir o problema de memorizar diferentes senhas e garantir que a vulnerabilidade não seja afetada uma vez que aspectos biométricos são únicos a cada ser humano. A Autenticação Visual permitirá aos usuários do Word Wide Web, a realizar autenticação em diferentes sites de forma única e indivisível, não obrigando a memorizar a grande variedade de usuários e senhas. O serviço de autenticação oferecido permitirá que empresas que possuem sites ou sistemas on-line possam incorporá-lo em seus sistemas de autenticação, sem que seja necessário realizar uma reestruturação, não sendo afetados e permitindo a estes usuários que se vinculem ao novo sistema de autenticação a qualquer momento. 3
  • 4. Figura 1. Autenticação Visual através da Iris. 2. OBJETIVO DO PROJETO O projeto de Autenticação Visual funcionará como um serviço para os mais variados sistemas online, podendo ser incorporado de forma simples, pois a arquitetura do projeto garante que ao decorrer de todos os processos de implantação não afete os atuais sistemas de autenticação presentes, pois estes serão mantidos, A Autenticação Visual é uma alternativa que tende a ser a principal forma do usuário a logar em diversos sites, uma vez que trará maior comodidade ao usuário. Ao incorporar o serviço não será necessário alterar as regras de negócio da empresa. Os principais objetivos da Autenticação Visual, é propiciar conforto, segurança e garantir a atomicidade de cada usuário. Todo o projeto de criação deste serviço se consiste na utilização da biometria (medida da vida), atualmente existem diferentes características pessoais que nos diferem uns dos outros, para exemplificar temos a impressão digital,leitura da palma da mão, reconhecimento facial, autenticação de voz, leitura de Iris e leitura de retina, este ultimo 4
  • 5. adotado como padrão para a Autenticação Visual, não impedindo que seja incorporado novos recursos que permitam ao usuário escolher o tipo de autenticação biométrica que ele deseja utilizar. Inicialmente a Autenticação Visual, será baseada em padrões, ou seja, o usuário necessitará realizar ao menos três vezes a leitura de sua retina, para que seja estabelecidos padrões de coloração e formato que o difere de outros usuários. O Serviço de Autenticação Visual não fará essa análise, esta por sua vez será terceirizada por outros softwares, contudo a geração de um arquivo XML, com estes dados e a comparação no ato da autenticação ficará a cargo do serviço da Autenticação Visual, para isso será feito a comunicação entre o cliente e servidor do sistema, toda essa comunicação estará incluso no serviço, a figura 2 ilustra o processo do funcionamento do serviço de Autenticação Visual, dentro de um site. Os pré-requisitos são uma WebCam com infra-vermelho e a instalação do software que realizará o processamento da imagem da retina capturada pela webcam, o software será gratuito e estará disponível para download como formato de plugin aos navegadores, funcionando de forma analógica ao plugin do flash. Figura 2. Funcionamento do Serviço de Autenticação Visual em sites. 5
  • 6. 3. ORDENAÇÃO DO PROJETO A idéia a princípio foi de elaborar um serviço de autenticação que venha a padronizar as diferentes contas de usuários na web, ainda com a idéia crua e documentada de forma grosseira em cartolina identificamos parceiros na turma para darmos continuidade ao projeto, inclusive parceiros com idéias semelhantes, com o apoio de toda a equipe utilizando o Brainstorming identificamos uma forma inovadora e avançada de realizar a autenticação através do uso da biometria mais especificamente através do uso da Autenticação Visual que efetua a leitura da retina. Antes de dar continuidade ao projeto foi necessário averiguar sua aceitação perante os usuários e qual o nível de acesso destes usuários aos recursos necessários para utilização da Autenticação Visual para isso elaboramos um questionário para criação do mesmo utilizamos os métodos Personas e Análise de Contexto de Uso para elaborar questões coesas e relevantes. Cada membro ficou responsável em aplicar o questionário em pelo menos cinco pessoas diferentes, para que o resultado demonstre algo relevante para analisarmos a aceitação e a disponibilidade dos usuários a utilizar nosso serviço de Autenticação Visual. Após a aplicação do questionário foi criado uma apresentação para divulgar o serviço a turma, onde caracterizamos os objetivos do projeto, seu funcionamento dentro de uma aplicação web, suas vantagens com relação aos sistemas de autenticação utilizados e principalmente os resultados obtidos no questionário, o que demonstrou um nível de aceitação considerável. Definido o escopo do projeto e suas principais características foi dado inicio ao processo de criação, a principio foi elaborado o mapa mental do projeto para organizar as informações obtidas até então, para isso utilizamos recursos online encontrados no http://www. Mindmeister.com/pt/home. Após a elaboração do mapa mental, utilizamos a técnica de “Cart-Sorting”, a principio aplicada entre os participantes do projeto e em seguida a possíveis usuários, para elaboração e teste deste método utilizamos uma ferramenta online disponível em http://websort.net/. Aplicando os resultados do Card-Sorting através do site http://writemaps.com/ definimos a estrutura dos menus necessários para gerenciar a aplicação de nossos serviços na web 6
  • 7. Como todos os recursos e atividades definidas elaboramos o esboço de identidade visual através de ferramentas de design como o photoshop, e com auxilio de recursos para definição de coloração obtidos no site http://colorschemedesgner.com/. Com o esboço em mãos e com os padrões de coloração definidos foi dado inicio a criação dos Wireframes, utilizando recursos obtidos em http://gp,pckingbirf.com/, podendo assim visualizar as estruturas das paginas e posicionamento de seus respectivos conteúdos, lembrando que para essas tarefas foi pensado sempre com relação ao serviço oferecido e não com relação a definição de sites que o utiliza. 4. APLICAÇÃO DA ENTREVISTA A realização de entrevistas com os usuários em potencial permitiu levantar informações relevantes, porém adotamos a idéia durante a entrevista de aplicarmos um questionário que nos permita averiguar a relevância da nossa proposta, este questionário foi elaborado com o auxilio de métodos apresentado a nós, pelo site http://www.faberludens.com.br/pt-br/node/26, no qual nos baseamos a descrição e definição destes métodos que nos utilizamos foi os métodos; Personas e Análise de Contexto de Uso, para melhor elaborar o questionário. O questionário aplicado nos permitiu principalmente averiguar a aceitação do projeto, e se os usuários em questão teriam como obter os requisitos mínimos para seu funcionamento, o questionário esta em anexo ao trabalho (Anexo 1). A Figura 2.A, 2.B e 2.C ilustra de forma agrupada o resultado obtido de algumas questões. 7
  • 8. Figura 3 – Gráficos / Resultados das entrevistas Nota-se que a grande maioria das pessoas, cerca de 75% possuem de dois a quatro logins diferentes, se analisarmos que um usuário possua quatro contas onde o nome de usuário e senha de todas essas contas se diferem, logo identificamos que poderá haver 24 combinações diferentes ou 4! para seus logins e senhas, notamos ainda que 80% possuem dificuldade em lembrar suas contas de login, e o fator que mais destacamos é a disponibilidade dos usuários de obterem ou já possuir um dispositivo de webcam, o que é fundamental para a Autenticação Visual, desta forma conseguimos viabilizar o início do projeto. 8
  • 9. 5. MAPEAMENTO MENTAL O método WriteMaps é uma ferramenta que auxilia no desenvolvimento do percurso (ou do processo) de navegação dentro do sites. Essa ferramenta nos permitiu realizar o mapeamento de uma navegação prática e ágil ao o usuário do serviço de Autenticação Visual. Esse método de mapeamento do site foi utilizada através do site http://writemaps.com/. Figura 4 - Mapeamento Mental 6. CARD SORTING O método Card Sort utilizado através do site http:www.websort.net permitiu analisar a estrutura do serviço de Autenticação Visual para sites na web. Através desse recurso foi proposto um projeto inicial realizado pelos desenvolvedores do serviço de Autenticação Visual onde foram classificados os itens e suas respectivas categorias disponíveis no sistema de Autenticação Visual. Esses itens deveriam ser classificados posteriormente pelo usuário para podermos coletar os resultados, analisar e compará-los com os dados classificados no projeto inicial. Com isso podemos analisar e verificar que os dados informados pelos usuários foram classificados de forma diferente da proposta no projeto inicial e através desses resultados foi percebido que uma possível reorganização dos itens poderia ser realizada melhorando a estrutura e organização do serviço de Autenticação Visual para sites na web. 9
  • 10. Figura 5 - Resultado do CardSorting – Itens Agrupados pelos usuários 7. MAPEAMENTO DO SITE Figura 6 - Resultado final do mapa do site – produzido no WriteMaps 10
  • 11. 8. WIREFRAMES Aliado ao sitemap, o wireframes é um documento que se torna cada vez mais importante para o trabalho de desenvolvedores de web sites. Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo. Também cabe ao wireframes indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade. De acordo com todos os processos anteriores, foi feita a elaboração dos wireframes, disponibilizando os layouts das páginas para validação com os usuários. Após sucessivas validações com os usuários e discussões internas entre os integrantes do projeto, os layouts foram definidos conforme as imagens dispostas a seguir. Figura 7 - Telas do wireframes produzidas no Mockingbird (www.mockingbird.com) 11
  • 12. Figura 8 - Tela login usuário; Figura 9 - Tela de autenticação. 12
  • 13. Figura 10 - Tela de cadastro 9. ESTUDOS DO LAYOUT – CORES E TIPOGRAFIA Na hora construir um site a primeira coisa que temos que ter claro é a gama de cores que vamos empregar em suas diferentes partes, e para isso devemos começar sempre com selecionar uma cor ou cores base, que será o que dará um espírito próprio ao site. Para isto é importante a escolha desta gama, que, por regra geral, será conveniente manter em todas as páginas do site, conseguindo com isso estabelecer uma identidade própria e uma continuidade entre todas as páginas que a formam. Se tivermos escolhido ou imposto um logotipo, suas cores serão as que marquem como guia o resto da página, trabalhando nas diferentes partes da página com os degrades claros e escuros destas cores base. Por ser necessária a introdução de outras cores (uma ou duas), teremos que escolher estas de forma que sejam equilibradas com as do logotipo e trabalhem juntas em boa harmonia. 13
  • 14. Quanto a tipografia, verificamos que todos os grandes blocos de texto devem definidos em um tipo sem serifa, tornando-se muito mais fácil de ler. Títulos e outros pequenos blocos de texto podem ser numa fonte serifada, criando um equilíbrio entre os dois. Para isto fizemos um estudo das cores e da tipografia a ser utilizada no serviço de autenticação visual, no qual utilizamos o site www.kuler.adobe.com, para fazer o estudo das cores. Que nos deu o seguinte resultado como estudo de cores. Figura 11 - Estudo das cores e logomarca desenvolvida em corel draw. 14
  • 15. Figura 12 - Resultado do layout do trabalho CONCLUSÃO Durante todos os processos que envolveu este projeto, notou-se que a cada etapa em que este era submetido, obteve-se uma considerável melhoria em qualidade, usabilidade e design. Percebemos que temos ao nosso alcance diversas ferramentas que permitem o trabalho online em grupo mesmo que a distancia, e também facilitam o trabalho de desenvolvimento de um web site. Partindo do principio de propiciar comodidade ao usuário chegou a utilização de recursos que garante tal objetivo, propiciando um aumento considerável com relação a segurança durante um processo de autenticação. Concluindo, observa-se a necessidade de planejar e organizar as informações relacionadas ao projeto antes de dar inicio a fase de implementação. 15
  • 16. Contatos da Equipe: Claudia: chsantana@gmail.com Edmilson: edmilsonfej@hotmail.com Elton: elton_fx@hotmail.com Joyce: milanimaringa22@hotmail.com Regis: regisvansini@hotmail.com Renan: renan102@hotmail.com 16
  • 17. Anexo 17
  • 18. Questionário aplicado em entrevista com usuário. 1) Qual o seu nome? _____________________________________ 2) Qual a sua idade? [ ] 10 a 20 anos [ ] 21 a 30 anos [ ] 31 – 40 anos [ ] 41 – 50 anos [ ] + de 51 anos 3)Qual seu grau de escolaridade? [ ] 1 a 4 serie [ ] 5 a 8 série [ ] Segundo grau incompleto [ ] Segundo grau completo [ ] Superior incompleto [ ] Superior completo [ ] Outros 4)Onde você usa internet? [ ] Casa [ ] Trabalho [ ] Escola/faculdade [ ] Lan house [ ] Casa de amigo [ ] Outro local 5)Para que você mais usa a internet? [ ] Jogos [ ] Pesquisas [ ] Sites de relacionamento [ ] Acesso a bancos [ ] Entretenimento 6)Com qual freqüência você utiliza a internet? [ ] Todos os dias [ ] Toda semana [ ] Uma vez a cada 15 dias [ ] Raramente 7)Quantos logins diferentes você possui? [ ] Nenhum [ ] Apenas 1 [ ] De 2 a 4 [ ] Mais que 4 18
  • 19. 8)Você acha a internet segura? [ ] Sim [ ] Não 9)Você costuma alterar suas senhas para prevenir invasões? [ ] Nunca [ ] As vezes [ ] Quase Sempre [ ] Sempre 10)Com qual freqüência você esquece seu login e ou senha? [ ] Nunca [ ] As vezes [ ] Quase Sempre [ ] Sempre 11)Nos sites que você utiliza atualmente você realizaria o seu login pelo reconhecimento da Iris? (através da tecnologia biometria) [ ] Sim [ ] Não 12)Classifique suas condições de acesso a dispositivos como Webcam, Microfones e scanners? [ ] Inacessível (não tenho) [ ] Pouco acessível (algumas vezes) [ ] Acessível (tenho mas não funciona ou não sei usar) [ ] Muito acessível (tenho e uso sempre) 19