fateclins.edu.brfateclins.edu.br/v4.0/trabalhograduacao/gszdep3... · centro estadual de educaÇÃo...
TRANSCRIPT
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA
PAULA SOUZA
FACULDADE DE TECNOLOGIA DE LINS PROF. ANTONIO SEABRA
CURSO SUPERIOR DE TECNOLOGIA EM BANCO DE DADOS
DENIS DOS SANTOS
THIAGO FARIAS
A ARTE NA WEB: GALERIA VIRTUAL DE ARTE COMO FORMA DE INCLUSÃO SOCIAL
LINS/SP 2º SEMESTRE/2013
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA
PAULA SOUZA
FACULDADE DE TECNOLOGIA DE LINS PROF. ANTONIO SEABRA
CURSO SUPERIOR DE TECNOLOGIA EM BANCO DE DADOS
DENIS DOS SANTOS
THIAGO FARIAS
A ARTE NA WEB: GALERIA VIRTUAL DE ARTE COMO FORMA DE INCLUSÃO SOCIAL
Trabalho de Conclusão de Curso apresentado à Faculdade de Tecnologia de Lins para obtenção do Título de Tecnólogo em Banco de Dados.
Orientador: Prof. Me. Adriano Bezerra
LINS/SP 2º SEMESTRE/2013
DENIS DOS SANTOS
THIAGO FARIAS
A ARTE NA WEB:
GALERIA VIRTUAL DE ARTE COMO FORMA DE INCLUSÃO SOCIAL
Trabalho de Conclusão de Curso apresentado à
Faculdade de Tecnologia de Lins, como parte dos
requisitos necessários para a obtenção do título de
Tecnólogo em Banco de Dados sob orientação do
Prof. Me. Adriano Bezerra.
Data de aprovação: 10 de Dezembro de 2013
________________________________
Orientador: Prof. Me. Adriano Bezerra
_______________________________
Profa. Me. Gisele Molina Becari
_______________________________
Prof. Me. Rodrigo Moura J. Ayres
Minha formação não poderia ser
consumada sem a ajuda de minha amável mãe
Edna Farias e irmãos Lucas Farias, Aline Farias e
Gisele Farias, que nos momentos mais difíceis
sempre acreditaram em mim, e me deram forças
para continuar e enfrentar os desafios encontrados
durante a execução deste trabalho. A minha
namorada e futura mulher Haina Fanali, que
vivenciou todos os altos e baixos ao decorrer
deste curso, me apoiando sempre com muito
carinho e atenção nos momentos mais turbulentos
que passei. Por esta razão dedico e reconheço a
vocês muita gratidão.
Ao meu amigo e companheiro de trabalho
Denis dos Santos, que mesmo quando o
desinteresse surgia nunca mudou seu foco e
sempre me ajudou a retomar a atenção com
cobranças que me ajudaram a buscar cada vez
mais o conhecimento necessário para concluir
esta etapa em minha vida acadêmica.
Thiago Farias
AGRADECIMENTOS
Agradeço a Deus por ter me concedido persistência e êxito nas escolhas
durante este período de estudos. Assim como a minha mãe Tânia Maria dos Santos
e irmãos, que sempre estiveram ao meu lado em forma de apoio e compreensão as
abdicações e esforços.
Também sou grato a minha namorada, que compartilhou de minhas principais
decisões ao longo deste ciclo de estudos.
O presente trabalho não seria possível sem a orientação do Prof. Me. Adriano
Bezerra, ao qual agradeço, pela contribuição no direcionamento e ensinamentos
fundamentais para minha formação acadêmica.
Por fim, agradeço ao meu amigo Thiago Farias por fazer parte desta
importante etapa, sempre acreditando que seriamos capazes de alcançar nossos
objetivos.
Denis dos Santos
AGRADECIMENTOS
A Deus, meu maior agradecimento, quando algumas vezes sentia vontade de
desistir, uma força maior surgia e me ajudava a levantar.
Ao Prof. Me. Adriano Bezerra, pela ajuda e orientação no decorrer deste
trabalho.
Aos meus amigos incansáveis que me incentivaram, sendo com críticas ou
brincadeiras, sempre buscaram me ajudar a vencer.
Aos professores da instituição que no decorrer do curso contribuíram
transmitindo seus conhecimentos a nós alunos.
Ao amigo e companheiro de trabalho Denis dos Santos, pela grande
contribuição e dedicação ao trabalho.
In memorian de minha avó Tereza Fernandes Farias, que em vida contribuiu e
muito, em fazer a pessoa que sou hoje.
A todos que fazem parte da minha família, que sempre serão importantes em
todos os passos que eu der em minha vida.
A todos um muito obrigado.
Thiago Farias
RESUMO
O homem ao longo da história sempre teve por costume o hábito de se expressar e comunicar, a primeira forma de comunicação foi à pintura rupestre, esta característica da pré-história. Atualmente o principal meio de comunicação é a internet. O comportamento humano transcorreu inúmeras mutações ao longo das civilizações, no entanto, a essência de se comunicar permanece presente. Devido a isso, este trabalho tem como objeto de pesquisa a arte como a primeira forma de comunicação e suas características na sociedade contemporânea, mais especificamente a mescla da pintura com a internet, evento este resultado da imersão da arte na web, passando esta a usufruir do ambiente digital como um espaço para novos modelos de interação com seu público. Para a realização do estudo foram pesquisados e analisados o princípio da relação da arte com a internet, esta ligação ocorre desde as primeiras redes locais de computadores. A partir da idealização dos entusiastas da arte de vinculá-la à web é perceptível a intenção de exaurir as barreiras de acesso à cultura. Em decorrência da necessidade de inclusão cultural por meio da internet, a pesquisa resultou no protótipo do site “Crie arte – reinventando a Arte”, no qual todo o conteúdo é centrado no usuário, isto foi possível com a aplicação de estudos da área de interação humano-computador e arquitetura de informação em resposta as exigências da web 2.0, que requer ambientes de multicolaboração entre proprietários de sites e seu público de usuários. Entretanto, a concepção de conteúdo colaborativo não é o suficiente para a universalização do acesso a arte, visando isto foram inseridos no projeto os conceitos de acessibilidade e design responsivo, pois assim toda informação vigente no site provém experiência de navegação adaptável as singularidades de cada usuário, visto que, cada indivíduo contextualiza com o ambiente e interage de forma particular. Palavras-chave: Arte na web. Acessibilidade. Design responsivo. Interações centradas no usuário.
ABSTRACT
The man throughout history always had how usual the habit to express themselves and transmit, the first form of communication was painting in the caves, characteristic of prehistory. Currently the main device of communication is the internet. The human behavior suffered several changes throughout of civilizations, However, the gist of communicating remains present. Due to that, this research had as object the art as the first form of communication and its characteristics in society contemporary, more specifically the mixture of painting with the internet, this event is the result of immersion of art in web, passing this the enjoy of ambience digital as an space for models of interaction News with its public. For the study were surveyed and analyzed the principle of the relation of art to the internet , this binding occurs from the first local computer networks. From the idealization of art enthusiasts to the web link it is noticeable intend to exhaust the barriers of access to culture . Due to the need for cultural inclusion through the internet , the search resulted in the prototype site " Create art - Reinventing the Art " , in which all content is user-centric , this was achieved with the application of studies in the area of interaction human-computer and information architecture in response to the demands of Web 2.0, which requires environments multicolaboração between website owners and their audience of users. However , the design of collaborative content is not enough for universal access to art , this order was entered into the design concepts of accessibility and responsive design , as well as all existing information on the site comes from adaptive navigation experience the uniqueness of each user , since each individual in context with the environment and interacts in a particular way . keywords: Art on the web. Accessibility. Design responsive. User-centered
interactions.
LISTA DE ILUSTRAÇÕES
Figura 1.1 - Galeria de arte DaVinci...........................................................................24
Figura 1.2 - Galeria22.................................................................................................25
Figura 2.1 - Relacionamento dos componentes web.................................................33
Figura 3.1 - Medidas Fixas (não responsiva) ............................................................49
Figura 3.2 - Medidas Flexíveis (responsiva)...............................................................50
Figura 3.3 - Medidas em Pixel (visualizada em resolução 800 x 600).......................53
Figura 3.4 - Medidas em Pixel (visualizada em resolução 320 x 240).......................53
Figura 3.5 - Medidas em Pt (visualizada em resolução 800 x 600)............................54
Figura 3.6 - Medidas em Pt (visualizada em resolução 320 x 240)............................54
Figura 3.7 - Medidas Em % (visualizada em resolução 800 x 600)...........................55
Figura 3.8 - Medidas em % (visualizada em resolução 320 x 240)............................55
Figura 3.9 - Imagem não responsiva (visualizada em resolução 800 x 600).............57
Figura 3.10 - Imagem não responsiva (visualizada em resolução 320x 240)............57
Figura 3.11 - Imagem responsiva (visualizada em resolução 800 x 600)..................58
Figura 3.12 - Imagem responsiva (visualizada em resolução 320 x 240)..................58
Figura 4.1 - Web 1.0 X Web 2.0.................................................................................75
Figura 4.2 - Processo de inclusão por meio da AI......................................................85
Figura 4.3 - Regra CSS..............................................................................................95
Figura 4.4 - Exemplo de MER..................................................................................110
Figura 4.5 - Exemplo de Diagrama DER..................................................................111
Figura 4.6 - Modelo Físico........................................................................................111
Figura 4.7 - Elementos da Tecnologia Java.............................................................114
Figura 5.1 - Casos de uso de Cadastro....................................................................127
Figura 5.2 - Casos de uso do Artista........................................................................127
Figura 5.3 - Casos de uso do Cliente.......................................................................127
Figura 5.4 - Diagrama de Atividade de Login...........................................................128
Figura 5.5 - Diagrama de Atividade de Cadastro de Artista.....................................128
Figura 5.6 - Diagrama de Atividade de Cadastro de Cliente....................................129
Figura 5.7 - Diagrama de Atividade do Cadastro de Obras.....................................129
Figura 5.8 - Diagrama de Atividade de Pesquisa de Artistas...................................130
Figura 5.9 - Diagrama de Atividade de Publicação de Artigos.................................130
Figura 5.10 - Diagrama de Atividade de Compra de Obras.....................................131
Figura 5.11 - Diagrama de Atividade de Mensagem................................................131
Figura 5.12 - Diagrama de Atividade de Interação na área ateliê............................132
Figura 5.13 - Diagrama de Sequência de Login.......................................................132
Figura 5.14 - Diagrama de Sequência de Cadastro de Artista.................................133
Figura 5.15 - Diagrama de Sequência de Cadastro de Cliente................................133
Figura 5.16 - Diagrama de Sequência de Pesquisa de Artistas...............................134
Figura 5.17 - Diagrama de Sequência de Publicação de Artigos.............................134
Figura 5.18 - Diagrama de Sequência de Compra de Obras...................................135
Figura 5.19 - Diagrama de Sequência de Envio de Mensagem...............................135
Figura 5.20 - Diagrama de Sequência de Interação com a Área Ateliê...................136
Figura 5.21 - Diagrama de Classes..........................................................................136
Figura 6.1 - Desenvolvimento em Camadas............................................................137
Figura 6.2 - Controles de Manipulação das Páginas................................................138
Figura 6.3 - Texto Visualizado em Fonte Padrão no Protótipo................................138
Figura 6.4 - Texto Visualizado em Fonte Aumentada no Protótipo..........................138
Figura 6.5 - Links de Saltos pela Página..................................................................139
Figura 6.6 - Atalho para o Topo da Página..............................................................139
Figura 6.7 - Página com alto-contraste....................................................................139
Figura 6.8 - Auxilio a Localização Espacial..............................................................140
Figura 6.9 - Dicas de Interações com os Formulários..............................................140
Figura 6.10 - Dicas de Preenchimento dos Formulários..........................................140
Figura 6.11 - Mensagens de Validação....................................................................141
Figura 6.12 - Contagem de Caracteres em Textarea...............................................141
Figura 6.13 - Página Visualizada em Celulares Antigos..........................................142
Figura 6.14 - Página Visualizada em Smartphones com Baixa Resolução.............142
Figura 6.15 - Página Visualizada em Smartphones com Alta Resolução................143
Figura 6.16 - Página visualizada em resoluções a partir de 1024x768....................143
LISTA DE QUADROS
Quadro 1.1 – Comparação das Funcionalidades Providas pelas Galerias................26
Quadro 3.1 – Técnicas Front-end para Acessibilidade..............................................37
Quadro 5.1 – Lista de Casos de Uso.......................................................................122
LISTA DE ABREVIATURAS E SIGLAS
AI - Arquitetura de Informação
AOL - American Online
API - Application Programming Interface
ASF - Apache Software Foundation
ATAG - Authoring Tool Accessibility Guidelines
CSS - Cascading Style Sheets
DER - Diagrama de Entidade-Relacionamento
E-MAG - Modelo de Acessibilidade do Governo Brasileiro
GIF - Graphics Interchange Format
HTML - Hypertext Markup Language
HTTP - HyperText Transfer Protocol
IBGE - Instituto Brasileiro de Geografia e Estatística
IE - Internet Explorer
IHC - Interação Humano Computador
JDBC - Java Database Connectivity
JDK - Java Development Kit
JEE - Java Enterprise Edition
JME - Java Micro Edition
JPEG - Joint Photographic Experts Group
JRE - Java Runtime Enviroment
JSE - Java Standard Edition
JSP - Java Server Pages
JVM - Java Virtual Machine
MAM - Museu de Arte Moderna de São Paulo
MER - Modelo de Entidade e Relacionamento
MVC - Model View Controller
OMT- Object Modeling Technique
OOSE - Object – Oriented Software Engineering
PNG - Portable Network Graphics
PT - Pontos
PX - Pixels
RENAPI - Rede de Pesquisa e Inovação em Tecnologias Digitais
SDK - Software Development Kit
SEO - Search Engine Optimization
SERP - Search Engine Results Page
SGBD - Sistema Gerenciador de Banco de Dados
SLTI - Secretaria de Logística e Tecnologia da Informação
SVG - Scalable Vector Graphics
TI - Tecnologia da Informação
UACG - User Agent Accessibility Guidelines
UFRJ - Universidade Federal do Rio de Janeiro
UML - Unified Modeling Language
União das Repúblicas Socialistas Soviéticas URSS
URL - Uniform Resource Locator
WAI - Web Accessibility Initiative
WCAG - Web Content Accessibility Guidelines
W3C - World Wide Web Consortium
XML - Extensible Markup Language
SUMÁRIO
INTRODUÇÃO .......................................................................................................... 16
1 A ARTE NA INTERNET.......................................................................................... 19
1.1 NOVOS MODELOS DE ARTE ............................................................................ 19
1.2 A IMPORTÂNCIA DA INTERAÇÃO VIRTUAL .................................................... 21
1.3 CENÁRIOS VIRTUAIS DE ARTE EM EXPANSÃO ............................................. 23
2 ACESSIBILIDADE .................................................................................................. 29
2.1 ACESSIBILIDADE NA WEB ................................................................................ 30
2.1.1 Componentes Web .......................................................................................... 32
2.1.2 Diretrizes W3C ................................................................................................. 33
2.1.3 Modelo de Acessibilidade do Governo Brasileiro (E- MAG) ............................. 35
2.1.4 Interfaces e Informações Acessíveis ................................................................ 36
2.1.5 Validadores de Código e Acessibilidade .......................................................... 44
3 WEB DESIGN RESPONSIVO ................................................................................ 47
3.1 WEB MÓBILE ...................................................................................................... 47
3.2 PLATAFORMAS FLEXÍVEIS ............................................................................... 49
3.3 WEB RESPONSIVA ............................................................................................ 51
3.3.1 Layout Fluído .................................................................................................... 51
3.3.2 Imagens Flexíveis ............................................................................................ 56
3.3.3 Media Types ..................................................................................................... 62
3.3.4 Media Queries .................................................................................................. 65
3.3.5 Testes em Design Responsivo ......................................................................... 68
4 REVISÃO BIBLIOGRÁFICA ................................................................................... 70
4.1 INTERNET .......................................................................................................... 70
4.2 WEB .................................................................................................................... 71
4.3 WEB 2.0 .............................................................................................................. 72
4.3.1 Web 1.0 x Web 2.0 ........................................................................................... 74
4.4 INTERAÇÃO HUMANO-COMPUTADOR (IHC) .................................................. 75
4.5 UNIFIED MODELING LANGUAGE (UML) .......................................................... 81
4.6 ARQUITETURA DE INFORMAÇÃO (AI) ............................................................. 83
4.7 GESTALT ............................................................................................................ 88
4.7.1 Lei da Proximidade ........................................................................................... 89
4.7.2 Lei da Continuidade ......................................................................................... 90
4.7.3 Lei da Semelhança ........................................................................................... 90
4.7.4 Lei da Experiência Passada ............................................................................. 91
4.7.5 Lei de Fechamento ........................................................................................... 91
4.8 HTML................................................................................................................... 92
4.8.1 HTML5 .............................................................................................................. 92
4.9 CSS ..................................................................................................................... 95
4.9.1 CSS3 ................................................................................................................ 96
4.10 JAVASCRIPT .................................................................................................... 99
4.11 JQUERY .......................................................................................................... 100
4.12 USABILIDADE ................................................................................................. 102
4.12.1 Diretrizes de Usabilidade na Web ................................................................ 104
4.13 SEARCH ENGINE OPTIMIZATION (SEO) ..................................................... 107
4.13.1 Técnicas de SEO ......................................................................................... 108
4.14 BANCO DE DADOS ........................................................................................ 110
4.15 SISTEMA GERENCIADOR DE BANCO DE DADOS (SGBD) ........................ 112
4.15.1 MySQL Server ............................................................................................. 112
4.16. JAVA .............................................................................................................. 112
4.16.1 Edições do Java ........................................................................................... 115
4.16.2 A Linguagem de Programação Java ............................................................ 115
4.16.3 Servlet .......................................................................................................... 116
4.16.4 Java Server Pages ....................................................................................... 117
4.17 DESENVOLVIMENTO EM CAMADAS............................................................ 118
4.17.1 Model View Controller (MVC) ....................................................................... 118
4.18 APACHE TOMCAT ......................................................................................... 119
4.19 JAVA DATABASE CONNECTIVITY (JDBC) ................................................... 120
4.20 NETBEANS ..................................................................................................... 120
5 ANÁLISE E PROJETO DO SISTEMA .................................................................. 121
5.1 CASOS DE USO ............................................................................................... 122
5.2 DIAGRAMAS DE ATIVIDADE ........................................................................... 128
5.3 DIAGRAMAS DE SEQUÊNCIA ......................................................................... 132
6 DESENVOLVIMENTO ......................................................................................... 137
CONCLUSÃO .......................................................................................................... 144
REFERÊNCIAS BIBLIOGRÁFICAS ........................................................................ 145
16
INTRODUÇÃO
A arte é mais antiga que a própria civilização, faz parte do comportamento e
cultura da humanidade desde o período pré-histórico, época na qual o homem ainda
não vivia em uma estrutura de sociedade. Neste período o modo de vida era
nômade, ou seja, os indivíduos não habitavam por longos períodos o mesmo local,
pois usufruíam o máximo possível dos recursos de determinada região, e com a
escassez deste o abandonava em busca de outro território habitável. (AGUIAR,
2013)
Apesar do modo de vida itinerante, o homem desta época adquiriu por
costume o hábito de registrar o seu cotidiano, tais registros eram feitos na forma de
pinturas nas paredes das cavernas as quais usava como moradia, este tipo de
pintura atualmente é classificado como rupestre. O papel desta era unicamente o de
expressar as atividades diárias, visto que, neste período ainda não exista a escrita,
desse modo a pintura surgiu como a primeira forma de expressão e comunicação do
homem. (AGUIAR, 2013)
Ao longo da existência da humanidade, com o surgimento das civilizações, o
homem criou diversos meios de se comunicar, todos característicos ao
comportamento social de cada época, sendo atualmente a internet o principal meio
de comunicação.
Na atualidade, a arte sendo a primeira forma de comunicação da humanidade
juntou-se à internet, o atual principal meio de comunicação, com isso percebe-se
que apesar da evolução do homem e mudanças de seu comportamento, um hábito
ainda permanece imutável, que consiste em seu constante anseio de se comunicar,
expressar sua cultura.
A junção da arte com a internet se faz por meio da criação de galerias virtuais
de arte, sites de museus visando a universalização da arte, assim como a criação de
obras específicas para a web. Dessa forma a aliança dos dois meios de
comunicação ocorre pela imersão da arte à web.
Em decorrência da informatização, não apenas da internet como ferramenta
de comunicação, mas também de sistemas interativos que auxiliem as ações e
tarefas do cotidiano, a sociedade aos poucos transformou sua cultura, o modo de
aprendizado, trabalho e socialização, por conseguinte sofrendo influências
provenientes da atual cultura globalizada. Nesta tornou-se fundamental a concepção
17
de uma comunicação alicerceada em praticidade e agilidade, por consequência
disso a internet instaurou-se presente em simples ações do cotidiano, assim como
em grandes transações mediadas por empresas. (PRADO, 1997)
A agregação da internet às principais ações das pessoas, tanto no cotidiano
social quanto empresarial, tornou a tecnologia da informação (TI) mais presente e
dinâmica frente aos diversos tipos de usuários e tarefas requisitadas por estes, isso
porque a internet se comparada a outros meios de comunicação possibilita maior
agilidade e abrangência. Em contrapartida, aos responsáveis pela criação e
manutenção das ferramentas e serviços disponíveis na web, gerou-se uma
obrigatoriedade de constante atualização, que propicie cada vez mais interatividade
e acessibilidade para os seus usuários.
Atualmente as aplicações web têm por essência a mescla de conceitos, com
o intuito de possibilitar o desenvolvimento de conteúdos interativos e inovadores
para o usuário, estabelecendo como objetivo facilitar e agilizar a manipulação das
funcionalidades inerentes a sites e sistemas web, para assim possibilitar
experiências de uso intuitivos e transparentes a seu público.
O contexto de estudo deste trabalho aborda as transformações da arte
influenciada pelos novos costumes sociais radicados da cultura digital, mais
especificamente a pintura, com isso como objeto de pesquisa são abordados os
novos modelos de arte oriundos das possibilidades que a TI dispõem, dentre estas,
mais especificamente a web, dado que, esta possibilita a concepção de ambientes
interativos aptos a corresponder às atuais necessidades da sociedade.
Assim como outros fatores que compõem a cultura, a pintura na sociedade
contemporânea também requer maior agilidade em sua divulgação e disseminação,
além disso, também carece de formas de interação com seu público, a fim de
estreitar as barreiras de acesso à cultura.
Com o objetivo de estudar a essência do comportamento humano de se
expressar e comunicar, neste trabalho são apresentadas as mudanças mais
relevantes da primeira forma de comunicação do homem, a pintura. Nesta pesquisa
denota-se como a arte se relaciona com a TI desde as primeiras concepções de
redes de computadores, mesmo antes da existência da web, sendo assim é
explanado o interesse dos envolvidos com a arte em acompanhar os costumes
contemporâneos da humanidade, não deixando que esta se perca ao longo da
história, por consequência evitando sua obsolescência.
18
Para aliar a primeira forma de expressão ao atual principal meio de
comunicação, junto à pesquisa foi elaborado um protótipo de galeria virtual de arte, é
intitulado “Crie arte – Reinventando a Arte”, com a finalidade de promover um
ambiente que corresponda aos preceitos da arte e comportamento contemporâneo,
ou seja, um espaço que propicie aos artistas plásticos a exposição e divulgação de
quadros, e aos apreciadores o acesso a estas, assim como a possibilidade de
discussão a respeito da arte por meio de exposição de artigos direcionados a este
assunto. Entretanto, considera-se que apenas criar um espaço de exposição e
divulgação não é suficiente, por isso usufrui-se de conceitos e tecnologias que
provenham ao site o acesso a diferentes pessoas, respeitando a singularidade de
cada indivíduo.
O trabalho segue como roteiro no primeiro capítulo a explanação dos novos
modelos de arte, galerias e museus virtuais resultantes das mutações da cultura,
sendo apresentadas as necessidades e limitações dos ambientes digitais atualmente
disponíveis.
O segundo capítulo contextualiza o acesso à web como uma forma de
inclusão social ao cidadão. Neste é destacado a importância de garantir o acesso de
todo indivíduo a todo e qualquer tipo de conteúdo, para isso é apresentado o
conceito de acessibilidade, que notifica a obrigação de adequações a todos os
setores da sociedade, direcionados às pessoas com limitações decorrentes de
deficiências físicas ou mentais, assim como causadas por idade ou temporárias
resultados de acidentes.
No terceiro capítulo é exposto o avanço das tecnologias que possuem acesso
à internet, e como estas influenciam na forma de exibição de conteúdo na web, pois
resulta em diferentes públicos caracterizados pelo tipo de dispositivo no momento de
acesso, desse modo é importante adequar as páginas as características de cada
navegação, isso é aplicado por meio do conceito de design responsivo.
O quarto e quinto capítulo são destinados a demais conceitos e
documentação que contribuíram para a produção centrada no usuário, destacam-se
os estudos de web 2.0, interação humano-computador (IHC), arquitetura de
informação (AI) e usabilidade. E, concluindo, o último capítulo é de caráter prático
voltado a exibir o processo de desenvolvimento do site “Crie arte”.
19
1 A ARTE NA INTERNET
A sociedade atual está totalmente imersa na comunicação de diferentes
formas e através dos mais distintos meios. Por conseguinte, as ações cotidianas
estão em constante mudança devido às intervenções feitas pela internet, que
transforma e cria novos conceitos e hábitos de comportamento rapidamente em
grande escala, se constituindo de forma sólida como o principal meio de
comunicação, seja para entretenimento ou cunho empresarial. (PRADO, 1997)
A internet constitui-se como a maior rede de comunicação global, presente
nos mais diversos pontos do planeta, possibilitando alcance ilimitado para os mais
variáveis fins. Sendo utilizada como ambiente para todos os tipos de aplicações e
manifestações culturais, sejam eles, com caráter de entretenimento, educacional,
informativo, etc. (PRADO, 1997)
Em decorrência da consolidação da internet como principal tecnologia da
comunicação, não ocorreram apenas mudanças de comportamento social e
empresarial, mas também cultural, pois, de acordo com Laraia (2001), a cultura é
composta pelo conjunto de conhecimento, experiência e comportamento de um
grupo ou civilização, presente em todos os elementos que estruturam a sociedade,
sendo eles: leis, religião, ciência e todo âmbito social de valores e crenças obtidos
por vivência ou aprendizado, originando assim a cultura, a qual é desenvolvida por
relações sociais, incapaz de ser adquirida individualmente.
A arte sendo umas das principais manifestações do homem, paralelamente
aos outros elementos de cultura, também sofreu influências das possibilidades
atuais de comunicação providas pela internet. Visto que, segundo Gasparetto e
Santos (2010), a arte não apenas acompanhou a evolução da internet e adaptações
do comportamento social, mas também, utilizou-a para a elaboração de novos
conceitos e principalmente difundir os já existentes anteriormente.
1.1 NOVOS MODELOS DE ARTE
A arte ao agregar uma variedade de estilos e manifestações artísticas,
sempre presente nas sociedades ao longo das civilizações, se adapta e retrata o
comportamento e cotidiano estando em constante reformulação, fator que ocorreu e
ocorre paralelamente as novas rotinas estabelecidas pelo uso da internet.
20
A velocidade com a qual este século criou um planeta eletronicamente conectado reflete-se na rápida expansão das práticas artísticas que vão além da escultura e pintura tradicionais, até a inclusão quase frenética de objetos do cotidiano no cenário da arte. (RUSH, 2006, p.1 apud GASPARETTO e SANTOS, 2010, p.2)
A relação da arte com a comunicação sempre existiu, não sendo algo
concebido recentemente, ao contrário, conforme Prado (1997), na década de 70, os
artistas já possuíam o interesse de desenvolver um tipo de arte que se comunicasse
de forma instantânea com seu público.
Algo mais concreto em relação ao uso de computadores para a arte surgiu
apenas em 1980, ao ser realizado um evento nomeado Artbox, que consistia na
formação de uma rede artística. Ainda na década de 80, outros eventos de arte
integrada a computadores foram organizados, acontecendo em 1989 o de maior
destaque, evento esse chamado Aspects of Gaia, composto por uma rede de
artistas de diferentes localidades interligados, com transferências de imagens
digitais, textos e sons. Por parte do público, a visualização do conteúdo
desenvolvido para o evento, era feita em uma instalação pública, caracterizada por
ser um ambiente interativo. (PRADO, 1997)
Os eventos que eram realizados na década de 80 já eram vinculados por
redes de computadores, ou seja, os interessados em arte sempre utilizaram das
diversas possibilidades de meios de comunicação, para se manifestarem e
produzirem obras. Todavia, apesar de esses eventos serem executados em redes
de computadores, estas eram estruturadas apenas para funcionarem ao longo do
acontecimento, e ao término desses eventos toda a estrutura era desfeita, não
permanecendo as obras criadas. Ao contrário de hoje, visto que, a internet torna a
propagação da obra perpétua, uma vez que independente do ciclo de vida do
evento, a obra continua disponível a acesso, desde que o site em que esteja
hospedada permaneça em funcionamento. (PRADO, 1997)
Em suma, com a facilidade e inúmeras possibilidades que o ambiente virtual
proporciona a propagação de conteúdo, novos conceitos são formados em virtude
destes, não sendo somente utilizado para divulgação e exposição, mas também
para criações.
[...] este espaço de encontro, de presenças simultâneas como espaço de divulgação/exposição para as produções artísticas (independente da linguagem utilizada) e como sistema de criação/exposição para a produção de arte e tecnologia (obras interativas ou não). (SANTOS, 2009, p.66 apud GASPARETTO e SANTOS, 2010, p.5)
21
Segundo Gasparetto e Santos (2010), com o uso da web como plataforma
para os artistas, rompe-se a dimensão de tamanho da obra física, pois o uso do
ambiente virtual possibilita aos artistas desenvolverem obras que não dependem de
extensões reais, uma vez que, estas podem ser especificas para o ambiente virtual.
Desse modo, são estruturados diferentes tipos de ligações entre o público que a vê,
pois estabelece uma relação de interatividade entre a arte caracterizada pelo artista
e seu público. Por conseguinte, o público e os estudiosos dos novos moldes de arte,
solicitam cada vez mais obras que se comuniquem de forma interativa com o usuário
desses ambientes, que não sejam apenas visualizadas, mas sim, disseminadas por
um conjunto de interações entre artista e usuário.
Na visão de Gasparetto e Santos (2010), diante do crescimento de novos
modelos de arte e público interessado, surgiu a necessidade de novas vitrines para
divulgá-los, pois os artistas adeptos a esses conceitos de arte em mídias digitais
buscam meios de divulgação e publicação não convencionais, posto que, os meios
convencionais são caracterizados por apenas exporem o trabalho. Ou seja, não
correspondem as novas práticas, dado que, os adeptos desejam plataformas
adequadas a seus novos moldes de arte, focados em ambientes que torne possível,
não apenas o acesso simultâneo de diferentes localidades à obra do artista, mas
que também interaja com o usuário, que estabeleçam uma relação mais intrínseca
entre artistas e apreciadores, de modo que o processo de criação e exposição seja
de colaboração entre estes.
1.2 A IMPORTÂNCIA DA INTERAÇÃO VIRTUAL
Grande parte dos usuários que navegam na internet, espera interagir de
alguma maneira com os sites que costumam visitar, estes, por sua vez,
disponibilizam ferramentas visando garantir essa interação, como por exemplo:
mecanismos de pesquisas destinadas aos usuários, downloads de arquivos, jogos
online, players de vídeo e música, entre alguns outros.
Seguindo o raciocínio de Lippman (1998), pesquisador do Instituto de
Tecnologia de Massachusetts, podemos entender que essas ferramentas são
aplicativos recheados com comandos pré-determinados pelo desenvolvedor, que
induzem o usuário a seguir uma sequência de passos, antes definida por ele.
22
O conceito de interatividade não se traduz em forçar uma direção a ser
seguida pelos usuários, e sim na inexistência de um padrão determinado de
comandos que caracterizem a falta de liberdade dos participantes, ou seja, destina-
se a deixá-los fazer parte de sua experiência, permitir que modifiquem o ambiente
no qual estão presentes de forma que o torne de seu agrado. (LIPPMAN, 1998)
Em conformidade, segundo Prado (2003), a amplitude da interação é
determinada pela quantidade de atributos do ambiente que pode ser manipulado
pelo usuário e variações possíveis em cada atributo. Portanto, amplitude se refere à
quantidade de modificações que podem ter efeito no ambiente, atendendo as
necessidades do usuário.
Atualmente os websites especializados em divulgar obras de arte, deixam
muito a desejar quando o assunto se trata de interatividade. Ao darem ênfase
excessiva à apresentação de imagens, esquecem o propósito principal do site, que
tem como objetivo chamar a atenção de um público específico e atrair potenciais
clientes.
Por ser um fator de extrema importância para tornar a ferramenta mais
atrativa e agradável ao usuário, um website voltado para esta área não deve deixar
de possuir recursos que o qualifiquem como interativo, pois o usuário procura nesse
ambiente um engajamento de diversas culturas. Todavia, é surpreendente a
quantidade de sites de exposição de arte que não possuem um ambiente para
discussões (fórum), ou mesmo para comentários de obras expostas para venda.
Focando neste ponto negativo dos sites que divulgam galerias de arte, é que
objetiva-se no presente trabalho, desenvolver um protótipo de um ambiente virtual
para suprir essas deficiências e torná-lo inovador no que se diz do conceito de
interação homem-máquina.
Para o desenvolvimento do trabalho foi pesquisado e estudado diferentes
cenários das práticas de arte atuais, contextualizando os fatores positivos e
negativos relativos a cada especificidade dos objetos de análise, estabelecendo
dessa forma, as características e requisitos necessários para o protótipo de uma
galeria virtual de arte. Agregada a pesquisa dos sistemas existentes atualmente na
web, definiu-se como objetivo, não apenas elaborar e desenvolver uma galeria
virtual mais acessível e ao alcance de um maior público, mas também, desenvolver
uma aplicação que contribua com a transformação no modo de divulgar e vincular
arte pelos ambientes virtuais.
23
1.3 CENÁRIOS VIRTUAIS DE ARTE EM EXPANSÃO
Atualmente existe uma crescente de galerias de arte ambientadas na web,
sejam elas, exclusivamente para o ambiente digital ou site de uma galeria física. De
acordo com Gasparetto e Santos (2010), não somente galerias, os museus também
estão surgindo como tendência de divulgações internacionalizando as amostras de
obras, independente do local físico em que essa se encontre. Por outro lado, em sua
maioria apresentam em comum a mesma falha, que consiste na falta de criação de
um ambiente de interação entre o usuário e o artista. Em grande parte dos sites, as
obras são apresentadas por meio de imagens com informações de dimensões e
ficha técnica do artista, tanto em galerias virtuais, quanto museus.
[...] a maior parte dos museus chamados virtuais nada tem de virtual: eles apenas permitem visualizar uma sequência de fotografias e de visões panorâmicas; neste caso, o que se chama de “virtual” é a possibilidade que tem o visitante de escolher o que ver clicando um nome em um menu. (CAUQUELIN, 2008, p.130 apud GASPARETTO e SANTOS, 2010, p.10)
Para elaboração de uma análise de galerias virtuais de arte, foram
selecionados dois sites de galerias, para assim, contextualizar as ferramentas e
serviços disponíveis aos três papéis envolvidos na relação da arte com os ambientes
virtuais. Sendo eles: os proprietários de galerias físicas, com interesse em
estabelecerem também uma veiculação de sua marca à web. Artistas plásticos que
almejam expandir o alcance e a acessibilidade de suas obras, e também, os
apreciadores de obras de arte, que com a expansão de galerias virtuais na web
passaram a ter mais opções de escolha, assim como, tornaram-se um público mais
diversificado, devido às novas possibilidades de criações de modelos de arte
oriundos dos ambientes de mídias virtuais.
A galeria virtual de arte DaVinci foi o primeiro site analisado, esta divulga e
vende quadros de vários artistas de diversas nacionalidades Possui opções de
visualização do conteúdo em três idiomas, são eles: português, inglês e espanhol,
desta forma provém uma acessibilidade maior aos interessados em arte, não
limitando seu público a apenas um idioma.
Caracterizada por ser uma plataforma voltada para artistas e apreciadores de
arte, é constituída apenas de ambiente virtual, não existindo uma galeria física.
Possui um layout bem simples e padronizado com outros sites especializados,
24
expondo o fraco empenho de seus desenvolvedores em criar interfaces
personalizadas e interativas.
A figura 1.1 exibe a página inicial do site:
Figura 1.1 – Galeria de arte DaVinci Fonte: DAVINCI, 2012.
A plataforma, apesar de ser apresentada em layout modesto, torna a relação
entre artista e cliente mais estreita, pois conta com um fórum que permite a interação
entre os usuários que possuem cadastro ativo no ambiente. Além do fórum existe
um espaço destinado à publicação de artigos, fator que agrega valor de
conhecimento ao website e seus visitantes. Bem como, oferece serviço de consulta
para auxílio na busca de obras de determinados estilos, temáticas ou técnica.
Também disponibiliza uma agenda de eventos, que publica informações
sobre exposições de obras realizadas em ambientes físicos, que estejam expostas
no website.
O site não trabalha diretamente com a venda das obras, somente divulga
imagens destas e informações sobre o artista de como contatá-lo, podendo assim,
tornar o processo de compra mais demorado, contudo abre a possibilidade de
negociar o preço de venda da obra diretamente com o artista.
25
No aspecto segurança, o site deixa a desejar, pois não se responsabiliza por
vendas mal sucedidas, ou mesmo ilegalidades das obras, fator que pode causar o
desinteresse de usuários visitantes, devido à falta de garantias oferecidas. Assim
como, pode diminuir o número de artistas interessados a vincular seu nome e
trabalhos ao ambiente virtual, uma vez que, este não provém segurança a seus
compradores.
O segundo site analisado foi a Galeria22, este atua com a venda e compra de
obras de arte, é destinado a colecionadores de artistas renomados, visando uma
variação em seu público, divulga quadros e esculturas. O website pertence a uma
conceituada empresa do ramo, possui um grande e diversificado acervo de obras.
Ambientado em um layout bem simplório, deixa a desejar no que se refere à
interatividade, pois não possui nenhum mecanismo para realizar a interação com os
usuários, senão os tradicionais módulos de leitura e contato por e-mail.
A figura 1.2 é referente à página inicial do site:
Figura1. 2 – Galeria22 Fonte: GALERIA22, 2012.
A galeria detém um sistema de busca, fator que facilita a pesquisa de obras
por parte do cliente, no entanto, esta ferramenta não possui filtros, o que torna o
sistema não tão efetivo, contém também uma sessão de login para usuários
cadastrados.
26
Na venda de obras a seus clientes, as negociações são feitas por e-mail, ficha
de interesse, ou telefone, a empresa assegura ao comprador uma política de
privacidade em relação aos dados coletados, também garante ao cliente segurança
na entrega do produto requisitado, porém não arca com o frete. Demonstrado o
interesse em alguma das obras, basta preencher uma ficha de interesse e aguardar
o contato da empresa.
Na compra não proporciona espaço a artistas em inicio de carreira, pois atua
somente com negociações de obras de arte produzidas por artistas de renome, a
galeria avalia a obra oferecida e de acordo com os seus valores, coloca sua
porcentagem para obter seu lucro.
Para melhor detectar as necessidades atuais de artistas e apreciadores de
obras de arte, realizou-se um estudo fundamentado na análise das possibilidades
providas ao usuário encontradas nas galerias virtuais, comparadas com os novos
conceitos sugeridos por estudiosos e artistas inseridos na arte virtual. O objetivo em
questão consiste em detectar possíveis mecanismos falhos, ou inexistentes.
Visando facilitar a compreensão e documentar as funcionalidades
encontradas em cada ambiente, juntamente com as não existentes, em relação aos
conceitos de arte virtual, foi elaborado o quadro 1.1 que ilustra todos os dados
diagnosticados.
Quadro 1.1 – Comparação das Funcionalidades Providas pelas Galerias
Funcionalidades DaVinci galeria Galeria22
Layout Desatualizado as novas tecnologias Desatualizado as novas tecnologias
Opção de cadastro Possibilita cadastro Possibilita cadastro
Interação nas obras Parcial, permite comentários Não contém a funcionalidade
Ferramenta de busca Possibilita filtragem nas buscas Simples, sem filtros
Fórum Compartilhado aos cadastrados Não contém a funcionalidade
Publicação de artigos Espaço para publicações Não contém a funcionalidade
Agenda de eventos Desorganizada, usabilidade ruim Página em construção
Opção de venda Direta ao artista, este informa a galeria Negociação diretamente a galeria
Opção de compra Não contém a funcionalidade Após análise da obra
Segurança Não garante Garante política de segurança
Custo para artistas 5% aplicado às vendas das obras Varia conforme relevância da obra
Fonte: Elaborado pelos autores, 2012.
27
Após o estudo, conclui-se que ambos os sites, apesar de possuírem
funcionalidades que contribuem o acesso aos interessados em arte, não estão
adaptados aos novos modelos de arte digital, que buscam maior enfoque em relação
com o usuário, de forma que este possa estar diretamente em contato com o
ambiente em que o artista cria.
É relevante também o fator segurança, não inserido em ambientes destinados
a exibição e venda de obras, elemento esse, que pode influenciar negativamente no
aumento de desenvolvimento de novas plataformas e público para esse tipo de
consumo de arte, referente a mídias digitais.
Para uma definição de um ambiente virtual inerente as tendências vigentes na
arte contemporânea, também foram estudados outros espaços que fazem uso da
web para disseminar a arte, desta forma, a pesquisa e estudo abrangeram distintos
cenários atuais de arte na web.
O processo de mudança e adaptação da arte devido ao cotidiano
contemporâneo é constante, assim como o comportamento social transmuta, a arte
também se transforma. Devido a isso, acompanhando a mudança do
comportamento social, especificamente no que se refere à comunicação, cada vez
mais atrelada à web, são ajustados os meios de veiculação de arte.
Desse modo, exposição em museus, que é a forma mais popular de exibição
de arte, também se reformula. Conforme Marin (2011), a partir da década de 90,
sites de museus passam a ter maior presença na rede, com o objetivo de informar e
buscar novos públicos usufrui da principal característica da web, que consiste em
tornar qualquer conteúdo acessível, independente de localidade.
Os museus virtuais, em sua maioria, não provêm conteúdo diferenciado e
ajustado aos recursos que a web possibilita. Estes sites são estruturados com layout
similar ao ambiente físico, não disponibilizando nada, além de acervos digitalizados
e agendas de exposições, juntamente ao endereço físico do museu respectivo ao
site. (MARIN, 2011)
Há uma preocupação em torno dessa manifestação da arte em museus
virtuais, sendo inclusive realizados eventos a respeito do tema do advento de
museus na web, com o enfoque de estabelecer modelos que usufruam de toda sua
potencialidade disponibilizada. Dessa forma, em 1997, Los Angeles, Califórnia,
aconteceu uma conferência a respeito de museus e internet, esta atualmente é
ministrada anualmente. (HENRIQUES, 2004)
28
É perceptível a importância e evolução que a arte tem obtido junto a sua
manifestação ligada à web, independente do modelo de site elaborado por cada
museu, o fator em comum entre eles é a intenção de utilizar o principal meio de
comunicação presente em nossa sociedade atual, a internet.
Assim como museus e galerias, empresas consolidadas no mercado de
tecnologia também estão voltando atenção para sistemas e ferramentas que
satisfaçam essa procura por arte na web. Exemplo disso é o Art Project, da Google,
projeto elaborado para disseminar arte pela web, este possui agregado a seu site
acervos de inúmeros museus do mundo, em alguns casos, agrega a opção de
visitas virtuais por instalações físicas destes (ARTPROJECT, 2012).
Conforme Galastri (2012), o site do projeto apresenta um grande acervo dos
museus parceiros, além da variedade de obras, o principal atrativo é a qualidade
apresentada nas imagens, estas em alta resolução, algumas peças selecionadas
possibilitam a aplicação de zoom de 7 bilhões de pixels em sua digitalização. Por
outro lado, devido a esta alta qualidade das imagens, o site ocasiona lentidão no
carregamento das páginas. Neste projeto, atualmente dois museus brasileiros estão
vinculados, Pinacoteca e Museu de Arte Moderna de São Paulo (MAM).
Um atrativo interessante do site é a opção de cadastro ao usuário, este
possibilita interatividade, disponibilizando aos cadastrados a opção de formarem
suas próprias galerias de imagens, selecionando dentre o acervo de obras do
projeto.
Neste primeiro capítulo foi visto que os atuais meios de veiculação de arte,
assim como a web visam elaborar conteúdos acessíveis, que proponham interação
com o público que a consome. Para isto, trabalham em um processo de
aperfeiçoamento constante, junto aos recursos que propiciam interatividade ao
acesso de informação, estes cada vez mais adaptados as mudanças de
comportamento da sociedade contemporânea, centrados em praticidade e agilidade
na comunicação.
No próximo capítulo será abordado como os sites e sistemas web necessitam
estarem acessíveis a todo e qualquer cidadão, não limitando acesso, e que para
provir isso, fabricantes de ferramentas de desenvolvimento e desenvolvedores de
conteúdo web necessitam da compreensão de que toda informação deve estar
acessível a todo tipo de público.
29
2 ACESSIBILIDADE
O termo acessibilidade tem sido abordado constantemente como um critério
de inclusão em todos os âmbitos da sociedade, não só no Brasil, mas em diversos
países. No atual momento, existe uma preocupação significativa em relação à
abrangência e aplicação de seus conceitos. Soluções estão sendo inseridas, dentre
as quais: leis estão sendo ajustadas, com o objetivo de possibilitar e tornar eficaz a
inclusão social de todo e qualquer cidadão. (NICÁCIO, 2010)
Referente a leis, no Brasil um decreto foi regulamentado em 2004, visando
atualizações voltadas à acessibilidade. O decreto datado do mês de dezembro, nº
5.296, apresenta especificações obrigatórias para todos os setores da sociedade,
entre eles: urbanística, habitação, serviços de transportes, informação e
comunicação. Em relação a TI, o decreto remete a obrigatoriedade de adequações a
portais e sites da administração pública. (BRASIL, 2004)
De acordo com Nicácio (2010), na sociedade contemporânea, o conceito de
acessibilidade está muito atrelado às pessoas com necessidades físicas, todavia,
este conceito engloba um conjunto de pessoas maior, apresentando como
significado, algo que seja passível de: alcançar, tratar e aproximar.
Outra definição que demonstra a amplitude do conceito de acessibilidade, não
o restringindo a deficiências visuais e sensoriais, pode ser encontrada na cartilha de
acessibilidade. Define Gameleira (2009), acessibilidade está inerente ao direito de ir
e vir, sem empecilhos, independente do ambiente.
A acessibilidade inclui não somente problemas relacionados a dificuldades
físicas e mentais, mas sim, todo o indivíduo que possui alguma dificuldade para
interagir com determinado mecanismo. Logo, uma criança que ainda não apresenta
conhecimento e similaridade com determinado conteúdo ou um deficiente visual, que
não consegue usufruir determinada informação por não a enxergar, são exemplos
nos quais pode ser aplicado este conceito. (NICÁCIO, 2010)
Todo local, objeto ou direito para denominar-se acessível, deve possibilitar
que qualquer pessoa, independente da idade, necessidades ou limitações, possa o
desfrutar.
A acessibilidade, conceito indispensável em qualquer sociedade para
propiciar inclusão a todo cidadão, está vigente na TI, sendo de extrema importância
na web. Visto que, a web dentre seus conceitos, tem como principal fator definido,
30
que seus serviços devem facultar em tempo real, integralmente, sendo acessível a
qualquer pessoa. (NICÁCIO, 2010)
2.1 ACESSIBILIDADE NA WEB
A web disponibiliza serviços a locais e pessoas distintas, não limitando o
conteúdo a determinada faixa etária, nacionalidade, capacidade física ou intelectual.
Nesse contexto, os sistemas web facilitam o cotidiano da sociedade atual, poupando
serviços e simplificando algumas ações, que antes eram realizadas apenas em
espaço físico e com maior desprendimento de tempo. Para as pessoas com
deficiências, o uso da web, não apenas auxilia ou agiliza tarefas cotidianas, mas em
muitos casos, tornam praticáveis ações antes inviáveis devido a dificuldades ou
limitações. (W3C, 1999)
É notório o poder de inclusão da web a qualquer pessoa, no entanto, apesar
da facilidade e praticidade que esta possibilita, seu uso em determinados momentos
pode ser dificultoso, caso o usuário em questão apresente alguma limitação em
movimentos, visão, audição ou similaridade com o conteúdo apresentado. Por tudo,
é de sumária importância desenvolver conteúdos que facilitem o acesso, não criando
obstáculos ou restringindo usabilidade. (MP et al, 2011)
Imprescindivelmente a web deve vincular conteúdos que sejam projetados e
desenvolvidos com o conceito de acessibilidade inserido, para assim, prover sites e
sistemas compreensíveis, intuitivos e interativos a todo usuário. (SANTOS, 2012)
Todo desenvolvedor, geralmente ao projetar um site ou sistema web, faz
estudos de caso, destinando-se a desenvolvê-lo com o perfil do público alvo. No
entanto, a falha desse procedimento é que normalmente só é avaliado no estudo de
caso o perfil ilustrativo e informativo do site, ou seja, seu design e conteúdo,
deixando de lado a acessibilidade e usabilidade por todo e qualquer tipo de usuário.
Todavia, ao projetar um sistema web, o correto não é somente projetar o conteúdo e
forma de apresentação para um determinado público, mas sim, torná-lo funcional a
todo tipo de pessoa, independente se o indivíduo possui algum tipo de deficiência.
(SPELTA, 2012)
Conforme Spelta (2012), o erro de definir um público alvo a sites, é a falta de
associações de público de interesse a grupos de funcionalidade, ela cita alguns
exemplos:
31
Um homem com baixa visão que entra no site de um fabricante de automóveis, para escolher um modelo para a sua mãe. Uma jovem surda que entra numa loja virtual de CDs, para escolher um presente para o seu namorado. Um menino de 11 anos que entra num site direcionado à terceira idade, para pegar uma informação para a sua avó. Uma estudante cega que entra numa livraria virtual, para comprar livros que serão escaniados por ela própria e lidos com o seu programa leitor de telas. (SPELTA, 2012, p.1)
Ao definirmos nosso sistema em relação a características do público alvo, não
estamos abrangendo nosso público, mas sim, limitando-o. (SPELTA, 2012)
Projetar um modelo para a transmissão de informação na web fazendo uso de
público alvo pode contribuir para inacessibilidade, ainda que esta informação seja
totalmente direcionada a um grupo especifico de pessoas, pois é impossível vincular
informações de modo uniforme, uma vez que, o modo de compreensão e interação
de uma informação varia de pessoa, seja ela em modo de leitura, auditiva ou
assistiva, isso porque cada indivíduo vivencia a experiência de forma individual.
Independente do público, a presença de pessoas com alguma dificuldade de acesso
pode existir.
Nos jogos olímpicos de Sidney ocorreu o primeiro processo oficial,
contextualizado no caráter de inacessibilidade digital, neste o comitê de organização
dos jogos foi processado sob a acusação de falta de acessibilidade em seu site.
(VINICIUS, 2012)
Em relação à relevância da acessibilidade na web por todos os grupos de
pessoas, pautados por Spelta (2012) e W3C (1999), é nítida a importância de
desenvolver conteúdos acessíveis para todos os cidadãos, não apenas para
expandirmos nosso mercado de usuários, mas também, para contribuirmos com o
desenvolvimento da sociedade e inclusão de todos. Em virtude disso, a seguir são
apresentados dados que denotam o número de pessoas que por algum tipo de
deficiência, caso não seja aplicada a acessibilidade de forma adequada, não terão
acesso à web.
Segundo o Instituto Brasileiro de Geografia e Estatística (IBGE), cerca de
6,7% da população brasileira sofrem de deficiência severa, estas são classificadas
nos dados como: visual, auditiva, motora e mental, sendo a visual com maior índice,
atingindo 2,3% das pessoas. (IBGE, 2010)
Em escala global, estatísticas apontam que existam aproximadamente 600
milhões de pessoas que sofrem com algum tipo de deficiência física, esse número
32
reflete em 10% da população mundial. (ONUBR, 2012).
É indiscutível o alto número de pessoas que possuem alguma dificuldade ou
sofrem de inacessibilidade. Por outro lado, soluções para a falta de acessibilidade
têm sido criadas, não somente por leis, mas também por órgãos e fabricantes de
serviços na web, todos ambientados em padrões, destinados a possibilitar e
organizar todo conteúdo desenvolvido. Contudo, para ser possível a realização da
acessibilidade, as regras devem ser aplicadas não somente por desenvolvedores de
aplicações, como também aos fabricantes de plataformas de criação, navegadores,
entre outros componentes que compõem a web. (NICÁCIO, 2010)
2.1.1 Componentes Web
O World Wide Web Consortium (W3C) consórcio internacional tem suas
atividades voltadas para o aperfeiçoamento da web, este mantém como intuito
prover padrões de qualidade que garantam a todos de forma igualitária o acesso à
web. Desse modo, formula padrões específicos a cada um de seus componentes.
(W3CBR, 2012)
Define W3C (2005), que a web é formada por componentes e que para se
manter adequada a acessibilidade, tais componentes precisam manter-se
relacionados, estes por sua vez, necessitam de melhorias contínuas em suas
especificidades, no que se refere à acessibilidade. Os componentes são:
Conteúdo – toda informação veiculada em sites ou sistemas web.
Navegadores, players de mídia – propiciam aos usuários o acesso ao
conteúdo.
Tecnologia assistiva – possibilita forma alternativa de acesso a usuários com
deficiência visual, exemplos desta tecnologia: leitores de tela, software de
digitalização.
Usuários – que usufruem de conteúdos na web.
Desenvolvedores - responsáveis por criarem conteúdos para web.
Ferramentas de criação – plataformas utilizadas por desenvolvedores para
criarem conteúdo.
Ferramentas de validação – validam tecnologias e semânticas utilizadas no
desenvolvimento.
A figura 2.1 representa a relação entre os componentes apresentados:
33
Figura 2.1 – Relacionamento dos Componentes Web Fonte SILVA, 2005, p.1.
De acordo com Nicácio (2010), as principais falhas na relação dos
componentes web, normalmente acontecem entre o relacionamento dos
componentes de conteúdo e os usuários. Isso ocorre, porque em sua maioria, o
conteúdo disponibilizado na web, não está ajustado a qualquer tipo de usuário que o
acesse. Por isso a melhor forma encontrada para garantir que esta relação tenha
êxito, é estabelecer regras que vigem e padronizem todos os fatores inclusos na
acessibilidade.
No tempo presente, existem diretrizes que estabelecem regras e padrões
para acessibilidade na web, os principais documentos internacionais se remetem ao
W3C que possui como diretor o fundador da web, além disso, conta com
colaboração integral de organizações e desenvolvedores. (NICÁCIO, 2010)
2.1.2 Diretrizes W3C
O W3C tem reconhecimento mundial, isso devido a seus padrões voltados
para tecnologias referentes à web, bem como, Hyper Text Markup Language
(HTML), Cascading Style Sheets (CSS), dentre outras. (NICÁCIO, 2010)
A W3C tem como principal objetivo, viabilizar o acesso à web, por todo e
qualquer usuário, independente de software ou hardware que a utilize, assim como,
capacidade física e mental, plena ou limitada (W3CBR, 2012). Desta forma, a W3C
se preocupa em manter a web, uma ferramenta de serviços e comunicação irrestrita,
34
de livre acesso, interativa e confiável. (W3CBR, 2012)
A W3C permeio a Web Accessibility Initiative (WAI), estabelece diretrizes
destinadas à acessibilidade, dividindo-as em grupos, de acordo com os
componentes web. (W3C, 2005)
Conforme Nicácio (2010), os grupos de diretrizes da WAI, possuem regras
especificas para cada grupo pertencente ao relacionamento de componentes web,
responsáveis por tornar possível o acesso de conteúdo. Abaixo veremos os grupos
e suas respectivas diretrizes:
Authoring Tool Accessibility Guidelines (ATAG) – referente aos fabricantes de
ferramentas de criação, utilizado por desenvolvedores para desenvolver o conteúdo.
Pauta que estes fabricantes devem fabricar tais ferramentas, com o contexto de
acessibilidade presente, possibilitando que os desenvolvedores de conteúdo web,
possam desenvolver de forma acessível.
Web Content Accessibility Guidelines (WCAG) – destinado a desenvolvedores
de sites e sistemas web, auxilia no desenvolvimento de conteúdo acessível. Essas
diretrizes também são consultadas por fabricantes, tanto de ferramentas de criação,
quanto de validação, com o objetivo de melhor detectar as necessidades por parte
dos desenvolvedores, em relação a desenvolver conteúdo acessível.
User Agent Accessibility Guidelines (UACG) – voltada para fabricantes de
browsers e mídias players, assistivas. Com especificações para garantir que estas
mídias disponibilizem acesso a todo tipo de usuário.
As diretrizes descritas acima são fundamentadas em todas as tecnologias
destinadas a criação de conteúdo web, contendo especificações diferentes para
cada tipo de tecnologia, sejam elas: HTML, CSS, Extensible Markup Language
(XML), dentre outras. (NICÁCIO, 2010)
Referente a esse contexto, o guia WCAG possui 14 diretrizes, devido a sua
extensa documentação, para facilitar sua usabilidade, tais diretrizes são
classificadas por prioridade, divididas em 3 níveis:
O primeiro nível é responsável por apontar as verificações necessárias, para
provir que todos os usuários possam acessar o conteúdo web desenvolvido.
O segundo nível apresenta especificações, que caso não aplicadas,
determinados grupos de usuários, podem encontrar dificuldade em conseguir
acessar o conteúdo publicado.
O último nível de prioridade consiste em verificações, para que todos os
35
grupos de usuários não sintam algum tipo de dificuldade, ao fazer acesso as
informações de conteúdo. (NICÁCIO, 2010)
Existe uma versão mais recente do guia WCAG, pois a primeira versão
apresentava maior foco em deficientes físicos, diferentemente da atual versão 2.0,
que engloba um conceito de acessibilidade mais abrangente, elaborada em um
documento contendo especificidades para aplicações a diferentes tecnologias da
web. (NICÁCIO, 2010)
Apesar de a WAI ser o conjunto de diretrizes diretamente ligado ao consórcio
W3C, existem outras normas que auxiliam no desenvolvimento de conteúdo web. O
Brasil possui um modelo nacional que é uma iniciativa do Ministério do
Planejamento. (NICÁCIO, 2010)
2.1.3 Modelo de Acessibilidade do Governo Brasileiro (E- MAG)
O E-MAG em sua versão inicial era estruturado em dois documentos, sendo
um deles tratado com visão técnica, destinado a profissionais da área de TI, e o
outro com linguagem mais clara direcionado a qualquer cidadão que auxilie no
entendimento das diretrizes de acessibilidade. As principais fontes para a
elaboração do modelo brasileiro foram normas internacionais, principalmente as do
modelo WCAG, estas foram adaptadas as necessidades brasileiras. (MP et al, 2011)
Conforme consta no E-MAG versão 3.0, para o modelo brasileiro em suas
primeiras versões, foram adotados os mesmos níveis de prioridade presentes no
WAI, sendo bastante semelhante a sua versão 1.0. (MP et al, 2011)
Atualmente o E- MAG encontra-se na versão 3.0, desenvolvida em conjunto,
tendo como colaboradores: o Departamento de Governo Eletrônico, a Secretaria de
Logística e Tecnologia da Informação (SLTI) do Ministério do Planejamento, e o
projeto de acessibilidade virtual da Rede de Pesquisa e Inovação em Tecnologias
Digitais (RENAPI), nesta atual versão foi descontinuada a estrutura de divisão de
documentos, antes parte destinada a profissionais específicos de informática, e
outra a cidadão, usuário. Desta forma foi elaborado um único documento contendo
todas as normas e orientações, também foi retirada a classificação de níveis de
prioridade, pois concluiu-se que todos os sites e portais não devem adequar-se a
padrões cabíveis a determinados grupos de inclusão, e sim tornar acessível todo
conteúdo, sem restrições. (MP et al, 2011)
36
2.1.4 Interfaces e Informações Acessíveis
Conforme Spelta (2012), grande parte dos desenvolvedores e provedores de
conteúdo na web, mantém mitos em relação à aplicação do conceito de
acessibilidade, apesar da frequente discussão e determinação de se desenvolver
toda informação de forma acessível. Ainda assim, é comum desenvolvedores ou
contratantes do serviço não se preocuparem em atender especificações e normas
destinadas ao desenvolvimento de conteúdo acessível. Por motivos diferentes, mas
que em sua maioria, justificam que tal adequação pode aumentar o custo do projeto,
assim como o ciclo de desenvolvimento, além de resultar um produto final com
qualidade inferior aos demais, no que se refere à aparência do layout.
Elaborar conteúdos web centrados em acessibilidade não significa perder
sofisticação em layout, adaptações criativas estruturadas em usabilidade podem
mantê-lo atrativo em relação a efeitos visuais. Entretanto, o principal a ressaltar é o
ganho em qualidade na transmissão da informação, uma vez que, um número maior
de pessoas a compreenderão. (SANTOS, 2012)
De acordo com Nicácio (2010), preocupar-se com a dificuldade, custo e
produto final da aplicação de acessibilidade, é um equivoco, posto que, ao início do
projeto, se este for elaborado fundamentado nos atuais padrões de desenvolvimento
web, já estará mais usual e acessível. Tendo em vista, que estes possuem como
principal objetivo proverem conteúdos dinâmicos e de fácil interação ao usuário,
junto a isso, acrescentar adequações de usabilidade e funcionalidade perante a
acessibilidade requer esforço mínimo e provém um resultado final satisfatório, tanto
para usuários, pois um grupo maior será apto a navegar nas informações
publicadas, assim como ao desenvolvedor e contratante, que com isso ampliarão
seu mercado.
Caso o escopo de planejamento do projeto não seja elaborado com o
conceito de acessibilidade presente, sua implantação posterior ao término do
desenvolvimento de conteúdo acarreta maior dificuldade, no entanto, ainda assim,
não se caracteriza por algo de complexidade, pois o acréscimo de algumas técnicas
e práticas de desenvolvimento já tornaria o conteúdo mais acessível. Todavia, é
importante ressaltar, que apesar da possibilidade de adicionar acessibilidade e maior
usabilidade após o ciclo de desenvolvimento, isto só é indicado em reestruturação
de sites, visto que, todas as funcionalidades devem ser pensadas e projetadas para
37
todos os usuários e seus contextos de uso durante o planejamento inicial do
conteúdo do site e suas interações com o usuário. (NICÁCIO, 2010)
A tecnologia não é o fator primordial de um site, mas sim a informação a ser
veiculada, o conteúdo a ser apresentado é o fator indispensável. Este só obtém seu
objetivo, seja informar, entreter, quando é compreensível a todos de forma plena.
(SANTOS, 2012)
“Um site bem desenhado e eficiente não é um site cheio de efeitos visuais,
mas um site que informa, se faz entender, se faz navegar e trás resultados sem
excluir nenhum perfil de pessoa.” (SANTOS, 2012, p.1)
Ao elaborar a estrutura de um conteúdo web, seja sistema ou site, é
fundamental estruturá-lo com clareza, possibilitar uma navegação intuitiva. Este é o
princípio necessário para propiciar uma boa acessibilidade. (SANTOS, 2012)
Alguns preceitos são essenciais para o desenvolvimento de um site acessível,
Santos (2012) realça as seguintes diretrizes apresentadas no quadro 3.1:
Quadro 3.1 – Técnicas Front-end para Acessibilidade
Técnicas de Acessibilidade
Conteúdos em texto personalizáveis, que permita aumento e redução de fonte.
Links preferencialmente em textos, com destaque visual.
Títulos realçados para softwares leitores de tela.
Layout configurável, que possibilite ao usuário a opção de contraste.
Fonte: SANTOS, 2012. Adaptado pelos autores.
Nicácio (2010), também cita algumas técnicas importantes para facilitar a
acessibilidade :
Manter o código HTML sempre válido e semanticamente correto;
Desenvolver o conteúdo de forma organizada, apresentando todas as
informações de forma relacionada, com nexo;
Aplicar textos e links claros e concisos;
Assim como existem premissas a serem seguidas para garantir
acessibilidade, também existem técnicas que geram inacessibilidade, estas devem
ser evitadas, pois restringem o acesso e compreensão da informação. Santos (2012)
aconselha a evitar as seguintes práticas:
38
Menus totalmente codificados em flash;
Imagens sem declaração de texto alternativo ou descritivo;
Páginas repletas de animações em flash;
Cores e elementos do layout sem contraste;
Com o uso das práticas apresentadas, o site já se demonstra mais
compreensível e acessível a um conjunto maior de pessoas, todavia, estas técnicas
não são o suficiente para produzir conteúdo adequado às diretrizes do conceito de
acessibilidade. (NICÁCIO, 2010)
Um fator simples, mas imprescindível para conteúdos acessíveis, é a
definição da linguagem a ser utilizada no documento, linguagem aqui caracterizada
não por tecnologia, mas sim, linguagem de idioma. O uso dessa técnica facilita a
identificação de informações por sistemas de busca e leitores de tela (software
utilizado por usuários cegos). (NICÁCIO, 2010)
A definição do idioma da página faz-se importante devido aos seguintes
motivos:
Possibilita melhora na pronunciação dos textos por leitores de tela;
Otimiza a indexação da página por buscadores, pois desse modo o site é
ranqueado de acordo com o seu idioma;
A página é renderizada mais rápido, isso porque browsers precisam detectar
o idioma da página antes de carregá-la; (EIS, 2012)
Dessa forma ao empregar a técnica de declaração de idioma nas páginas,
obtém-se ganho tanto no conceito de acessibilidade, pois usuários com deficiências
visuais terão uma navegação mais agradável, assim como também é aperfeiçoado o
Search Engine Optimization (SEO) do site, tendo em vista que este será mais
facilmente detectado pelos sistemas de busca (Google, Yahoo, dentre outros). Com
isso, consequentemente o site será mais acessado, isso porque propiciará
satisfação a usuários que necessitam desta inclusão digital, e também porque será
mais divulgado, uma vez que será melhor posicionado nos principais sites
buscadores.
A estrutura de todo site deve ser dividida em dois arquivos distintos: o
primeiro destinado exclusivamente as marcações dos conteúdos que serão
publicados nas páginas, estas devem ser feitas por linguagem de marcação de texto
HTML, que tem unicamente como função apenas referenciar o conteúdo a ser
apresentado. A outra é destinada as características de apresentação que devem ser
39
estilizadas em arquivos CSS. (NICÁCIO, 2010)
As características de apresentação das páginas consistem em todas as
formas dos elementos que a compõe, dentre estes: formas geométricas da estrutura,
cores, tamanho, tipo de fonte e disposição dos elementos na tela (NICÁCIO, 2010)
O conceito de divisão do código em camadas, ou seja, divido em arquivos
diferentes, tendo responsabilidades distintas é denominado tableless. A ideia do
nome, surgiu em relação a prática de muitos desenvolvedores estruturarem todo o
código em um único arquivo, contendo marcação de conteúdo e forma de
apresentação, isto era feito em tabelas, fator que dificultava muito o trabalho do
desenvolvedor, assim como o resultado final restringia acessibilidade. (NICÁCIO,
2010)
O conceito de tableless já é adotado por alguns leitores de tela, estes já
conseguem detectar informações de modo de apresentação especificados em
arquivos CSS, por isso a aplicação deste tipo de arquivo não tem por objetivo
apenas tornar o layout mais atrativo e sim mais funcional, compreensível. (FERRAZ,
2013)
Um dos elementos principais do design de um site são as cores aplicadas nas
páginas, isso porque estas são utilizadas tanto para tornar o conteúdo mais atrativo,
quanto para dar similaridade ou dissimilaridade entre as informações contidas no
site, além disso, em geral estão associadas à logomarca. Entretanto, ao ser
elaborado o layout é imprescindível que as cores sejam usadas de forma que o
conteúdo não se torne inacessível, ou seja, que estas não sejam um empecilho para
uma navegação agradável.
As cores pertencentes ao layout devem ser aplicadas contendo contraste
entre o elemento de fundo e o de primeiro plano, somente assim o conteúdo
possibilitará uma boa navegação a usuários com problemas visuais. (MP et al, 2011)
É importante ressaltar que a transmissão de informações não deve restringir-
se a cores, estas também devem estar acessíveis por outros modos. Sendo assim,
avisos, mensagens e alertas não podem ser informados apenas por cores, mas sim
textualmente. (FERRAZ, 2013)
Atualmente é impossível imaginar o uso da web sem a existência de imagens,
tornou-se fundamental, principalmente para fortalecer o apelo visual e aproximar-se
aos meios de veiculação impresso. Contudo, assim como é necessário atenção ao
uso de cores em sites, algumas técnicas são essenciais para garantir que a inserção
40
de imagens não torne o site inacessível.
Conforme (NICÁCIO, 2010), a utilização do parâmetro “ALT”, pertencente à
tag “IMG”, possibilita que a informação transmitida com a imagem seja acessível a
deficientes visuais, pois como valor para o parâmetro “ALT”, podemos definir um
texto alternativo, acionado por softwares leitores de tela.
<img src=”/img/Acessibilidade.jpg” alt=”Site acessível”/>
A não utilização da técnica produz conteúdo inacessível, pois ao carregar a
página o leitor de tela não identificará a imagem. Todavia, apesar de a técnica
possibilitar inclusão acessível a usuários cegos, esta deve ser aplicada com cautela
em relação à relevância da imagem contida na página web. Visto que, é
desnecessário textos para imagens meramente ilustrativas, nestes casos o
parâmetro deve ser colocado, contudo, sem o preenchimento de valor. (NICÁCIO,
2010)
<img src=”/imagens/contornoSuperior.jpg” alt=” “/>
O conceito de acessibilidade na web visa facilitar o acesso, para isso não
deve existir nenhum tipo de barreira ou dificuldade à navegação pelo conteúdo.
Entretanto, propiciar conteúdos acessíveis não é o suficiente, também se faz
necessário possibilitar aos usuários uma navegação ágil e intuitiva. (QUEIROZ,
2008)
Para garantir rapidez no acesso provido a usuários cegos as informações
contidas nas páginas web, é importante a inserção de técnicas que possibilitem o
salto por elementos na página, formando-se atalhos para o teclado. (NICÁCIO,
2010)
O salto entre conteúdos de uma mesma página é possível perante a
implementação da técnica Skip links, mediante o uso desta, torna-se ágil a
navegação por usuários cegos, uma vez que, não é necessária a leitura de todos os
links e menus para se chegar ao conteúdo principal, pois ao entrar na página o
usuário poderá escolher saltar para os elementos em destaque contidos nesta.
(NICÁCIO, 2010)
Assim que a página é carregada pelo leitor de tela são apresentadas as
41
opções de saltos da página. Isto é feito usando-se links internos. (QUEIROZ, 2008)
<a href=”#1s” title=”Skip link para o conteúdo principal”>
Ir para o conteúdo</a>
No conteúdo da página a marcação é feita da seguinte forma:
<a name=”1s”> Título do conteúdo principal</a>
Alguns leitores de tela possuem de forma nativa o uso de saltos por letras de
tag, estes possibilitam ao usuário a navegação por títulos, quando pressionada a
tecla H, F para formulários, T para tabelas, L para listas e I para itens de uma lista.
(QUEIROZ, 2008)
Com a aplicação das técnicas de salto é perceptível a importância de ater-se
aos padrões de desenvolvimento web. Isto percebe-se em sites mal desenvolvidos,
aos quais a estrutura da página foi toda codificada em tabelas. Nestes o uso de
saltos na página é impossível, visto que, usuários cegos normalmente utilizam a
tecla T para a navegação em tabela, no entanto, o leitor de tela não conseguirá
adequar-se à navegação, uma vez que, o site todo estará contido em tags com a
inicial T, sendo assim composto pela tag <table>. (QUEIROZ, 2008)
A existência de formulários em páginas web é um dos principais fatores que
estabelece a interatividade entre conteúdo e usuário, ou seja, seu uso torna-se cada
vez mais indispensável, tendo em vista que esse é um dos preceitos da atual web
2.0, que de modo geral, sites e portais provenham conteúdos dinâmicos e
interativos. (PORTA; QUEIROZ, 2008)
A navegação e preenchimento de dados em formulários web tornou-se ato
corriqueiro, é parte da experiência do dia a dia de internautas. No entanto, acessá-lo
apenas por teclado e desprovido de visão, pode não ser tão simples assim. (PORTA;
QUEIROZ, 2008)
O principal cuidado ao se desenvolver formulários, é a realização de testes
que verifiquem se todas as funcionalidades estão acessíveis tanto por mouse quanto
teclado. (PORTA; QUEIROZ, 2008)
A estrutura de formulários deve priorizar clareza e organização na disposição
dos dados a serem preenchidos. O estudo de interação humano-computador orienta
42
a organização de modo que a informação venha primeiro, e a seguir o campo de
preenchimento referente aquela informação, leitores de tela baseiam-se neste modo
para a leitura do formulário. (LLOYD, 2006 apud SILVA 2011)
Para tornar formulários visualmente mais organizados, quando estes são
muito extensos é interessante dividir os dados em grupos, isto não apresentará
apenas ganho em acessibilidade, mas também em usabilidade, visto que, o
preenchimento a qualquer usuário será mais claro e compreensível. (LLOYD, 2006
apud SILVA 2011)
Para auxiliar o usuário a forma correta do preenchimento dos dados do
formulário, anteriormente a estes devem ser emitidos avisos, por exemplo: campos
com o caractere * é de preenchimento obrigatório. Também é necessário o uso de
validações nos inputs, de modo que ao usuário clicar no botão para enviar os dados,
caso haja algum erro no preenchimento, o envio não pode ser concluído e o usuário
precisa ser notificado o porquê da ocorrência, isto é essencial que seja feito de
forma clara. (MP et al, 2011)
Algumas empresas e desenvolvedores fazem o uso de captcha em
formulários, este é um teste que tem por objetivo detectar se o usuário é um humano
ou computador. Isto é feito para provir segurança, com o intuito de barrar invasões e
envios de spam. No entanto, esta prática deve ser feita com atenção, de modo que
seu uso não implique em inacessibilidade, ou seja, a realização do teste deve ser
passível a todo tipo de usuário, independente de limitações visuais, auditivas ou
motoras. (SOARES; SPELTA, 2012)
Ao ser desenvolvido formulários, caso a equipe responsável tenha interesse
no uso de captcha, é essencial que este seja aplicado com o uso de perguntas
simples, que dependam da interpretação humana, entretanto, comum a qualquer
cultura e nível de instrução. Para isso soluções matemáticas podem ser
empregadas, nestas pode ser solicitado ao usuário digitar por extenso o resultado de
determinado cálculo. (MP et al, 2011)
O uso de tabelas em HTML para sites, originalmente foi inserido para
apresentar dados tabulados, no entanto, alguns desenvolvedores passaram a utilizá-
la na estruturação das páginas, desse modo o site todo é construído por tabelas.
Esta técnica de estruturar o layout do site é contra os principais padrões de
desenvolvimento web, ao qual é especificado que tabelas são unicamente para
dados tabulados e HTML é somente para marcação de texto, ou seja, indica o que
43
será apresentado na página, e não como esta deverá ser apresentada. (NICÁCIO,
2010)
A utilização de tabelas para apresentar dados tabulados não significa que
estas sejam acessíveis, por isso é essencial o conhecimento dos seguintes atributos
e tags:
Summary – atributo que contém conteúdo que será apresentado somente a
leitores de tela, este serve para notificar alguma característica da tabela;
Caption – tag que contém o título da tabela, deve ser inserida abaixo da tag
table;
Th – marcação que indica quais células são cabeçalhos na tabela;
Headers – atributo da tag td, referencia a qual cabeçalho determinada célula
de dado pertence; (NICÁCIO, 2010)
Com a aplicação das tags e atributos especificados torna-se possível a
concepção de tabelas realmente acessíveis, estas serão claras e organizadas para
todo tipo de usuário. (NICÁCIO, 2010)
Para uma experiência agradável durante a navegação em um site, uma leitura
confortável é fundamental. Por isso é essencial que o usuário possa configurar o
tamanho da fonte utilizada na página, tendo em vista que usuários com baixa visão
podem sentir dificuldade dependendo do tamanho de fonte utilizado no corpo da
página. (NICÁCIO, 2010)
Os browsers disponibilizam a opção de controle de fonte, todavia, ao utilizar
esta opção nativa do navegador a estrutura da página pode ser desconfigurada,
deste modo não só a leitura, como também a compreensão da página como um todo
será prejudicada. Devido a este fator é importante o desenvolvedor acrescentar na
própria página a opção de ajuste da fonte. (NICÁCIO, 2010)
Sempre que utilizado vídeos no conteúdo das páginas, em caso de não
possuírem áudio, é essencial que o desenvolvedor disponibilize alternativa textual.
Para todo vídeo com recurso de áudio é importante que seja disponibilizado
legendas. Seguindo estas diretrizes o vídeo estará passível a usuários com
deficiência auditiva, visual, assim como usuários que não tenham caixa de som no
momento do acesso. (MP et al, 2011)
O uso de alternativa textual não se restringe a imagens e vídeos, também se
faz importante a inserção de texto para conteúdos que estejam apenas vinculados
por arquivos de áudio, para assim provir a mesma informação a usuários com
44
deficiência auditiva. (MP et al, 2011)
Em disponibilizações de áudio, é requerido ao desenvolvedor que seja
provido o controle sob o recurso ao usuário, sendo assim, deve ser possível o ajuste
de volume, pausa e interrupção da reprodução. (MP et al, 2011)
Quando ocorrer o uso de animações nas páginas, estas precisam estar
passíveis de pausa e interrupção por parte do usuário. (MP et al, 2011)
Um site contendo as técnicas abordadas anteriormente são necessárias para
possibilitar uma boa acessibilidade. Entretanto, tê-las contidas no site não é o
suficiente, também é preciso disponibilizá-las com um bom destaque visual, de
modo que estas sejam de fácil localização em qualquer página. Deste modo, é
interessante que no topo de todas as páginas esteja disponível uma barra contendo
os controles de acessibilidade, que permitiam ao usuário adaptações características
a sua dificuldade. (MP et al, 2011)
O E-MAG versão 3.0, orienta a utilização dos seguintes itens na barra de
acessibilidade:
Controle de fonte (aumento, diminuição, normal);
Alto contraste;
Atalhos (para saltos dentro do conteúdo da página);
Acessibilidade do site (link para página que especifique toda a acessibilidade
provida); (MP et al, 2011)
Ao término do desenvolvimento de um site ou sistema web, ainda que o
desenvolvedor tenha utilizado as recomendações e padrões de desenvolvimento e
acessibilidade, é necessário aplicar testes a fim de verificar se o conteúdo está
realmente cumprindo todas as normas e recomendações, dessa forma, serão
obtidos resultados explanando se o conteúdo está realmente acessível. (MP et al,
2011)
A validação de conteúdo web pode ser feita por diversas ferramentas e sites
que testam todo o código do projeto, verificando se este está ajustado a todos os
tipos de usuários. (MP et al, 2011)
2.1.5 Validadores de Código e Acessibilidade
Os validadores de código e acessibilidade podem apresentar funcionalidades
diferentes umas das outras, assim como, possibilitam sua utilização de maneiras
45
distintas, visto que, alguns propiciam testes apenas a conteúdos já hospedados na
web, entretanto, algumas ferramentas e sites facilitam o trabalho do desenvolvedor,
pois permitem testar o código durante todo o desenvolvimento, não sendo
necessário o conteúdo estar hospedado, dessa forma torna o conceito de
acessibilidade mais inerente a todo o projeto. (NICÁCIO, 2010)
Dentre os validadores de código, existem específicos para HTML, XHTML,
CSS, todos destinados a avaliar as diferentes versões existentes de cada tecnologia.
Estas ferramentas analisam a sintaxe do código, com isso auxiliam o desenvolvedor
a criar conteúdos semanticamente corretos, fator que facilita no desenvolvimento de
sites e sistemas web mais acessíveis aos diferentes tipos de mídias existentes,
propiciando assim, acesso a todo tipo de público (NICÁCIO, 2010).
Os validadores de código e acessibilidade podem validar um conteúdo como
sendo acessível e padronizado, no entanto, isso não garante que o site ou sistema
web esteja realmente acessível, pois as normas e padrões orientam no
desenvolvimento, contudo, é preciso também analisar o contexto ao qual está
inserido o conteúdo, sendo dessa forma necessário aplicar outros tipos de testes.
(NICÁCIO, 2010)
Ao realizar testes complementares de acessibilidade, podem ser utilizados
softwares leitores de tela, estes tornam possível a navegação na web por usuários
cegos, ou seja, cabe a desenvolvedores simularem o acesso ao conteúdo por
usuários com deficiência visual. O DosVox sistema gratuito da Universidade Federal
do Rio de Janeiro (UFRJ) pode ser usado para tal simulação.(NICÁCIO, 2010).
Testes de acessibilidade também podem ser realizados manualmente, o
governo eletrônico brasileiro elaborou um material de apoio, que consiste em um
checklist de acessibilidade, este tem por objetivo auxiliar no cumprimento e
aplicação da acessibilidade a todos os envolvidos no desenvolvimento de projetos
web. (MP et al, 2011).
Atualmente a aplicação do conceito de acessibilidade deveria ser fundamental
em sites, isto porque acarreta fatores positivos para todos os lados interessados, ou
seja, usuários se sentiriam mais capazes e ativos, tendo em vista que muitas
pessoas com algum tipo de deficiência passariam a usufruir sem maiores
dificuldades dos conteúdos providos na web. Assim como, empresas e
desenvolvedores ganhariam um maior público em seus serviços. Prova disto é o fato
46
do google, buscador de conteúdo mais consultado, priorizar sites que estejam
organizados em diretrizes acessíveis, em detrimento dos estruturados fora dos
padrões de desenvolvimento e acessibilidade. (VINICIUS, 2012)
Neste capítulo foi abordado o conceito de acessibilidade, sendo apresentadas
suas normas, conceituações e aplicações, especificamente na web, denotando que
todos os interessados em conteúdo web: governos, empresas, desenvolvedores e
usuários, devem estar cientes à abrangência e importância de estabelecer uma web
cada vez mais acessível, para assim revigorarem seus direitos, consolidando
usabilidade a todo tipo de usuário.
O próximo capítulo será destinado ao conceito design responsivo, este visa
facilitar o uso de sites e sistemas web em qualquer tipo de dispositivo, desta forma
contribui com a acessibilidade, pois auxilia na independência e universalização do
acesso a internet.
47
3 WEB DESIGN RESPONSIVO
A web popularizou-se junto à popularização dos desktops e posteriormente
com o advento dos notebooks, até pouco tempo, este era o principal cenário a qual
estava vinculada. Visualizada em telas de tamanhos similares a pequenos
televisores, manuseada por teclados e mouses, estas eram as principais
características de aparelhos que possibilitavam acessá-la. (ZEMEL, 2012)
O uso da web transformou-se acompanhando os costumes e necessidades
atuais da sociedade, com isso, acessá-la por celulares, smartphones, tablets e
televisores, dentre outros aparelhos que atualmente possibilitam navegá-la, tornou-
se hábito do cotidiano. Isso porque, dessa forma, seu uso é feito independente do
local que o usuário esteja. Entretanto, esses novos meios de usabilidade mudaram o
cenário. (ZEMEL, 2012)
A transitoriedade é presente em todas as áreas da TI, nos seguimentos
vinculados à web isso ocorre ainda mais rápido, seja por ajustes ou substituições de
conceitos e tecnologias que a compõe. No entanto, tais mudanças ganharam âmbito
maior, pois ao estar acessível a novos meios, sua elaboração também necessita de
adaptações que atendam as especificidades de cada aparelho. (MARCOTTE, 2010)
O acesso a web feito por distintos aparelhos atenuou o cuidado em relação as
interfaces e funcionalidades inerentes a esta, pois adequações fizeram-se
necessárias, isso devido principalmente aos diferentes tamanhos e resoluções de
tela atualmente existentes nos dispositivos. Desenvolver telas especificas para cada
tipo de agente de usuário, aos poucos tornou-se inviável. (MARCOTTE, 2010)
Os cenários atuais da web, apesar de serem parte imprescindível do
comportamento da sociedade, são recente, a web móvel ainda mais, isso tudo
encontra-se no início, grande parte da web não está devidamente ajustada a essa
nova perspectiva. Contudo, sua elaboração não deve ter como foco apenas os
novos dispositivos, ao contrário, é indispensável projetar sem restrições a
determinadas tecnologias, pois, só assim a web será realmente acessível a qualquer
pessoa e independente de hardware e software. (ZEMEL, 2012)
3.1 WEB MÓBILE
Atualmente existe uma separação de formatos no desenvolvimento de
48
páginas web, dividida em versões especificas para formato desktop, e outra
referente a móbile. Isso a torna dependente de linguagens diferentes, ocasiona o
uso de subdomínios, porém a web tem como princípio ser única, o que não acontece
no presente momento, uma vez que, ao ser acessado páginas via móbile, o usuário
é redirecionado. (ZEMEL, 2012)
O redirecionamento de usuários móbile na web é prática frequente, consiste
na técnica de criar e utilizar subdomínios contendo “m.” no início da Uniform
Resource Locator (URL), a sintaxe fica desse modo: (m.website.com), dessa forma a
usabilidade deixa a desejar, posto que, o usuário necessita digitar URLs diferentes
dependendo de seu dispositivo de acesso. (ZEMEL, 2012)
O W3C é contra a prática de classificar e disseminar a web em tipos, este
orienta o uso do conceito One Web, a qual denota que as informações e serviços
devem ser acessíveis a todo e qualquer dispositivo sem limitação de uso, acessados
por uma única URL. É definido que projetos com base nesse conceito devem
propiciar usabilidade satisfatória, independente de hardware. (FARIA, 2007)
É notável a preocupação em disponibilizar conteúdos para tecnologia móbile,
por isso é crescente o surgimento de técnicas e conceitos centrados nesse contexto.
Isso é consequente da cultura contemporânea cada vez mais habituada ao uso de
celulares. (ZEMEL, 2012)
O mercado de celulares e smartphones têm crescido abruptamente. No ano
de 2010, em escala mundial, a venda de smartphones foi superior a de
computadores pessoais, números do último trimestre deste ano de 2010 denotam a
superioridade: 100,9 milhões de smartphones aumento de 87% em relação ao ano
anterior, contra 91,2 milhões de computadores aumento de 3%. (TECNOTÍCIAS,
2011)
No Brasil, ainda em 2010, o número de linhas móveis ultrapassou a marca de
200 milhões. (LOPES, 2012)
Em 2011 a diferença nas vendas global foi ainda maior, pois smartphones
atingiram a faixa de 400 milhões de unidades vendidas, enquanto foram vendidos
350 milhões de PCs. (TECTERRA, 2012)
Para 2013, a expectativa é que a venda de tablets prevaleça sobre a de
computadores, especialistas de mercado sustentam essa hipótese fundamentando
que em 2010 a cada 20 computadores vendidos, 1 tablet era comercializado. Já em
2011 a diferença foi mínima, 6 computadores para cada tablet. (SORG, 2012)
49
3.2 PLATAFORMAS FLEXÍVEIS
Estruturada em um ambiente com formas fixas, esta é uma das atuais
características da web, fator este, que dificulta sua veiculação por aparelhos que
possuem resoluções diferentes das normalmente utilizadas. Isso ocorre, porque
todo conteúdo desenvolvido em medidas fixas, não se ajusta a janelas de
navegadores que possuam medidas diferentes das especificadas. (ZEMEL, 2012)
Um exemplo de site estruturado com medidas fixas é exposto na figura 3.1:
Figura 3.1 – Medidas Fixas (não responsiva) Fonte: GLOBO, 2013.
O oposto acontece ao serem elaborados designs flexíveis, estes não se
restringem a medidas, adaptam-se a janelas de navegadores de qualquer
50
dispositivo, esteja este em modo de uso retrato ou paisagem. (MARCOTTE, 2010)
A figura 3.2 exibe a página inicial do site casa do código, este possui uma
estrutura flexível:
Figura 3.2 – Medidas Flexíveis (responsiva) Fonte: CDC, 2013.
O conceito de ambientes flexíveis não foi formulado voltado especificamente
para web, este já foi pensado e aplicado em outras áreas. Formas fixas já foram
questionadas na área de arquitetura, uma vertente intitulada arquitetura responsiva,
criada por Nicholas Negroponte arquiteto e cientista, idealizou espaços que
interagem com pessoas, contendo componentes de robótica e materiais elásticos,
possibilitou-se criar ambientes com paredes dobráveis. Estas paredes se movem à
presença de pessoas. (MARCOTTE, 2010)
“Um múltiplo sistema de circuito em que uma pessoa participa da conversa,
uma contínua e construtiva troca de informação”. (FOX; KEMP, 2009 apud
MARCOTTE, 2010, p.1)
51
A filosofia de estruturas flexíveis e adaptáveis também está contida nos
princípios da web, ainda que no presente momento, seu uso esteja ambientado em
medidas fixas, este não foi seu propósito inicial. Sendo assim, experiências mutáveis
necessitam de ambientes diferentes dos preponderantemente estabelecidos
atualmente, imutáveis devido as suas formas definidas por medidas fixas.
(MARCOTTE, 2010)
3.3 WEB RESPONSIVA
A flexibilidade na web é a essência do design responsivo, pensado para
habituar-se a qualquer dispositivo que provenha acesso a esta. É importante
ressaltar que o conceito de responsividade não se restringe a possibilitar interfaces
ajustáveis a diferentes formatos de tela, mas também, que estejam aptas para
serem manuseadas por mouse ou touch da mesma forma. (ZEMEL, 2012)
Para tornar possível que os conteúdos hospedados na web estejam
adaptáveis, não devemos apenas nos ater a elaborar e desenvolver de forma flexível
e de fácil manuseio. Outro fator primordial consiste na atenção a forma de
apresentação que deve ser feita particularmente a cada dispositivo, pois, somente
assim toda experiência de interação entre o usuário e a plataforma web será de uma
interatividade e personalização agradável. (MARCOTTE, 2010)
Ao projetar o layout de um site, é essencial refletir em relação a qual forma de
estrutura utilizar, cabe à equipe conhecer as características do projeto, assim como
as atuais técnicas front-end especificas a cada tipo de layout. (GOMES, 2008)
O conceito de design responsivo, para prover que todo o conteúdo de
determinado site ou sistema web, possibilite usabilidade agradável a todo tipo de
dispositivo, estrutura-se em três princípios: apresentar layout fluído, conter imagens
e recursos flexíveis, ser desenvolvido com o uso de media queries. (ZEMEL, 2012)
3.3.1 Layout Fluído
Durante o processo de elaboração do front-end do projeto, o desenvolvedor
deve sempre priorizar o conceito de layout fluído, para isso deve optar pela
utilização de medidas flexíveis em todos os elementos da página a ser desenvolvida.
Dessa forma, a página se adaptará automaticamente a resolução do dispositivo
52
utilizado no momento do acesso. (ZEMEL, 2012)
O futuro da web demonstra ser a estrutura de layouts fluídos, denominado
grid flexível. Isso porque nossas páginas não possuem uma apresentação uniforme.
Ao contrário, é dobrável, levando-se em conta que o usuário pode redimensionar a
janela de seu navegador ao modo que lhe convenha, assim como pode visualizá-la
em tamanhos menores ou maiores, dependendo do dispositivo adotado para a
navegação. (MARCOTTE, 2011)
Para que a web se torne realmente responsiva, é necessário o uso de
medidas relativas nos arquivos CSS dos projetos. (ZEMEL, 2012)
Na fase de elaboração do front-end das páginas é primordial conhecer os
principais tipos de medidas CSS, para assim fazer o uso correto destes. Atualmente
são quatro os tipos de medidas mais populares: percentagens, ems, pixels e pontos.
Estes são divididos em dois grupos: medidas relativas e absolutas. (ZEMEL, 2012)
Conforme Silva (2011), unidades de medidas relativas baseiam-se sempre em
outra medida, ou seja, adaptam-se em relação a algum outro elemento. Portanto a
aplicação de medidas relativas é essencial para a concepção do design responsivo,
visto que, páginas estruturadas desse modo serão ajustáveis a diferentes tipos de
mídias, uma vez que, estas serão relativas a proporção da tela do dispositivo
utilizado durante o acesso.
Um elemento declarado com uma unidade de media absoluta torna-se fixo, ou
seja, uma vez referenciado terá sempre a mesma proporção na exibição, pois esta
não se baseia em outros elementos, com isso sua exibição não é adaptável aos
dispositivos e sim é visualizado sempre do mesmo tamanho, sendo assim, em telas
menores ocasionará barras de rolagem na horizontal, fator este que dificulta a
usabilidade. (SILVA, 2011)
Pixel (px): medida mais comumente utilizada em projetos web tem como
característica principal ser uma unidade de medida absoluta, ou seja, um elemento
especificado com essas medidas possuirá sempre o mesmo tamanho, desse modo,
não é adaptável. Tecnicamente um pixel é caracterizado como um ponto indivisível
na tela de exibição. (ZEMEL, 2012)
#conteudo{
background-color: red;
width: 700px; height: 500px;
53
left: 50%; margin-left: -350px;
top: 50%; margin-top: -250px;
}
O trecho de código CSS exemplificado mostra o uso da medida pixel, estas
são para especificar o tamanho de uma div codificada em HTML denominada
conteúdo, as outras especificações feitas são para estilizar a cor de fundo e
centralizar a div ao ser visualizada em um navegador. Com isso podemos ver o
resultado da aplicação de medidas pixel em dois tipos diferentes de resolução de
tela, como mostram as figuras 3.3 e 3.4.
Figura 3.3 – Medidas em Pixel (visualizada em resolução 800 x 600) Fonte: Elaborada pelos autores, 2013.
Figura 3.4 – Medidas em Pixel (visualizada em resolução 320 x 240) Fonte: Elaborada pelos autores, 2013.
Ao analisar as figuras acima, é perceptível que elementos especificados com
medidas pixel no CSS, não provem uma navegação agradável, tendo em vista que
surge barra de rolagem na horizontal, isso ocorre caso usuários acessem a página
fazendo-se uso de dispositivos de baixa resolução.
Ponto (pt): a medida ponto, geralmente é utilizada por desenvolvedores para
54
estilizar elementos de uma página destinada a impressão. Esta medida também
pertence ao grupo de medidas absolutas, um ponto é o mesmo que 1/72 polegadas.
(ZEMEL, 2012)
Para obter um resultado prático do uso da unidade de medida ponto, será
utilizado o mesmo exemplo de código CSS explanado na exemplificação de medidas
pixel, modificando apenas os responsáveis pela especificação da medida a ser
utilizada.
#conteudo{
position: absolute;
background-color: red;
width: 450pt; height: 300pt;
left: 50%; margin-left: -225pt;
top: 50%; margin-top: -150pt;
}
Figura 3.5 – Medidas em pt (visualizada em resolução 800 x 600) Fonte: Elaborada pelos autores, 2013.
Figura 3.6 – Medidas em pt (visualizada em resolução 320 x 240) Fonte: Elaborada pelos autores, 2013.
55
O resultado obtido como visto nas figuras 3.5 e 3.6, é idêntico ao exemplo que
foi utilizado unidade de medida pixel, ou seja, sua navegação em telas de baixa
resolução dificulta a usabilidade do usuário.
Percentagem (%): a unidade percento é a indicada para produzir páginas
responsivas, isso porque esta é uma unidade de medida relativa. Isso significa que
elementos definidos fazendo-se uso desta, automaticamente se ajustarão a janela
do navegador, seja em ações de redimensionamento de tela ou acesso em
resoluções inferiores. (ZEMEL, 2012)
Em prática a aplicação da unidade de medida percento:
#conteudo{
position: absolute; background-color: red;
width: 80%; height: 80%;
left: 50%; margin-left: -40%;
}
Figura 3.7 – Medidas em % (visualizada em resolução 800 x 600) Fonte: Elaborada pelos autores, 2013.
Figura 3.8 – Medidas em % (visualizada em resolução 320 x 240) Fonte: Elaborada pelos autores, 2013.
56
Com o uso de uma unidade relativa fica nítido o ganho de usabilidade por
parte do usuário, independente da qualidade de resolução do dispositivo utilizado no
momento do acesso a página, isto pôde ser visto nas figuras 3.7 e 3.8.
Ems (em): unidade de medida indicada basicamente para a especificação do
tamanho de fontes utilizadas na página, esta unidade possui como fator principal ser
escalável, sempre se baseia no elemento pai, ou seja, seu tamanho baseia-se ao
tamanho da div a qual ela se encontra. Exemplificando: uma fonte inserida em um
elemento com tamanho especificado em 30pt, caso a fonte receba a medida 1em,
isso é o mesmo que 30pt, logo, se ao invés de 1em fosse especificado 2em seu
tamanho seria o mesmo que 60pt. (ZEMEL, 2012)
Ao compreender as unidades de medidas CSS mais usuais, conclui-se que o
ideal é utilizar a unidade de percentagem para elementos do layout (margens,
espaçamentos, larguras, etc), e ems para especificar o tamanho de fontes. Com
isso, o layout proporcionará navegação agradável a qualquer tipo de dispositivo,
propiciando maior usabilidade ao usuário. (ZEMEL, 2012)
3.3.2 Imagens Flexíveis
Ao desenvolver páginas com o objetivo responsivo, fazendo-se uso de
medidas relativas já deixará o grid flexível, no entanto, não é o suficiente para deixar
as páginas responsivas. Pois estas também são compostas por imagens, vídeos,
dentre outros elementos que compõem um site. (ZEMEL, 2012)
Durante a inserção de imagens no código HTML, normalmente o
desenvolvedor colocará o tamanho em pixels e a posicionará de acordo com as
regras de layout estabelecidas no projeto. Alguns desenvolvedores têm por hábito
especificarem o tamanho no HTML de inserção e o posicionamento no arquivo CSS,
outro modo bastante usual é especificar tanto tamanho quanto posicionamento no
CSS.
#conteudo img{
position: absolute;
width: 243px;
height: 87px;
}
57
Figura 3.9 – Imagem não responsiva (visualizada em resolução 800 x 600) Fonte: Elaborada pelos autores, 2013.
Figura 3.10 – Imagem não responsiva (visualizada em resolução 320x 240) Fonte: Elaborada pelos autores. 2013.
Mediante os resultados demonstrados nas figuras 3.9 e 3.10, decorrentes do
trecho de código CSS que especifica o tamanho da imagem com uso da unidade de
medida pixel, é notório que a imagem não se adapta a resoluções baixa, pois é
perceptível que a imagem ultrapassa a largura do contêiner conteúdo. Isso ocorre
porque o contêiner se adapta a resolução de forma responsiva, entretanto, a
imagem se mantém no mesmo tamanho. Devido a isso toda a estrutura da página é
desfeita.
A solução para flexibilidade de imagens em páginas web é simples, o uso de
CSS já é o suficiente para torná-la responsiva, outro fator satisfatório é a
compatibilidade dos navegadores a técnica que a torna responsiva. (ZEMEL, 2012)
#conteudo img{
position: absolute;
max-width: 100%; max-height: 40%;
}
58
Figura 3.11 – Imagem responsiva (visualizada em resolução 800 x 600) Fonte: Elaborada pelos autores, 2013.
Figura 3.12 – Imagem responsiva (visualizada em resolução 320 x 240) Fonte: Elaborada pelos autores, 2013.
No código transcrito que resultou nas figuras 3.11 e 3.12, ao invés de
especificar um tamanho absoluto para imagem, isto é, referenciar seu tamanho
original em pixels, especificou-se uma largura máxima de 100%, e altura máxima de
40%. Desse modo, se obtém um layout que mantém a ordem dos elementos,
independente da resolução. O uso de altura e largura máxima é em relação ao
contêiner em que a imagem está, sendo assim, caracterizar 40% como altura
máxima, significa que a imagem ocupará no máximo 40% da altura da div conteúdo,
que é o contêiner a qual a imagem está inserida. (ZEMEL, 2012)
A técnica de classificar altura e largura máxima não se restringe a imagens,
esta pode ser aplicada a qualquer outro elemento: vídeos, ou mesmo divs internas.
Dessa forma já é garantido responsividade dos elementos internos nas páginas web,
contudo, ater-se a visibilidade da imagem não deve ser a única medida a ser
aplicada. Outro fator atenuante é o peso desta, visto que, é necessário pensar no
59
tempo médio de carregamento da página pelos diferentes tipos de dispositivo a qual
o acesso é provido. (ZEMEL, 2012)
Em 2011, conforme dados coletados do acesso a internet, constatou-se que
no Brasil, o acesso via desktop ou notebook proporciona uma velocidade média que
varia entre (512Kbps a 2Mbps). Sendo que 31% navega em uma faixa considerada
lenta, 512Kbps. Apenas 6% dos usuários possuem uma conexão veloz. (ARRUDA,
2011)
É habitual na atualidade acessar a web via móbile, esse é um fator
preocupante em relação ao carregamento de páginas, posto que, a conexão 3G
mais comumente utilizada no Brasil em aparelhos móveis, possui uma velocidade
média inferior aos outros meios de conexão. (ZEMEL, 2012)
A aplicação da técnica de referenciar imagens com altura máxima possibilita
que estas se adaptem a resolução de tela, entretanto, a mesma imagem é carregada
em todo dispositivo que acesse a página. Consequentemente o acesso via
dispositivos móveis acarretará lentidão na renderização das imagens, por
conseguinte o usuário poderá perder o interesse em navegar pelo site. (ZEMEL,
2012)
Para tornar uma imagem flexível inerente a um layout responsivo, deixá-la
ajustável a diferentes resoluções não é o suficiente. Prover um carregamento ágil
independente de tipo de conexão é fundamental, existem frameworks que buscam
suprir esse problema. (ZEMEL, 2012)
O Riloadr é um framework criado para carregar imagens responsivas,
objetiva-se a otimizar imagens para possibilitar velocidade na renderização destas. É
composto pelo uso de JavaScript, HTML e CSS. O desenvolvedor detém controle
total quanto a quais imagens serão processadas, assim como, especifica o máximo
e mínimo que a imagem deverá se ajustar. Nesse contexto o framework provém ao
desenvolvedor praticidade e personalização na customização das imagens nas
páginas. (MARTIN, 2013)
A técnica do framework consiste em não utilizar o atributo src nas inserções
das imagens na marcação de texto HTML, este é substituído pelo atributo data-src.
A tag noscript só é ativada para navegadores com JavaScript desabilitado. (ZEMEL,
2012)
<img data-src=”pessoa.jpg”>
60
<noscript>
<img src=”img/small/pessoa.jpg”>
</noscript>
O Riloadr possui características interessantes não apenas direcionadas ao
design responsivo vinculado a usabilidade, este também pensou no conceito de
acessibilidade, visto que, apresenta condição para navegadores com JavaScript
desabilitado, no entanto, seu grande diferencial está no ganho em desempenho,
porque não faz múltiplas requisições para a mesma imagem. (ZEMEL, 2012)
Existe uma solução de framework codificada em Jquery, o plugin jQuery
Picture, este concede suporte para imagens responsivas, uma vantagem expressa-
se em seu peso, pois possui apenas 2kb. (ABBAN, 2013)
<figure class=”responsive”>
data-media440=”assets/img/medium.png”
data-media600=”assets/img/large.png”
<noscript>
<img src=”assets/img/large.png” alt=””>
</noscript>
</figure>
Nos códigos HTML sempre que for utilizado o plugin jQuery Picture a imagem
será inserida pela tag figure, caso o usuário esteja com o JavaScript desabilitado
este plugin também ativa o noscript, a diferença é que a tag noscript está contida
dentro do bloco da tag figure. (ZEMEL, 2012)
A chamada para inicializar o plugin é simples e de fácil compreensão:
$(function(){
$('figure.responsive').picture();})
Este plugin jQuery Picture dá suporte aos principais navegadores, o maior
empecilho está em relação a usuários do Internet Explorer (IE), dado que, o plugin
só funciona a partir do IE9. (ZEMEL, 2012)
61
Outro modo de otimizar imagens responsivas é o Picturefill, esta abordagem
só têm suporte em navegadores que funcione Media Queries. Seu funcionamento
obtém melhor desempenho em browsers que suportam CSS3. (JEHL, 2012)
<div data-picture data-alt=" Descrição da imagem ">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg"
data-media="(min-width: 400px)">
</div>
<div data-src="large.jpg"
data-media="(min-width: 800px)">
</div>
<div data-src="extralarge.jpg"
data-media="(min-width: 1000px)">
</div>
<noscript>
<img src=" img/small.jpg" alt="Descrição da imagem">
</noscript>
</div>
O uso do Picturefill é feito com a aplicação de uma div contêiner e divs
internas, sendo que cada div interna é destinada a um tipo de resolução de tela,
estas são especificadas referenciando largura mínima.
Presentemente existem muitas técnicas que auxiliam na responsividade de
imagens, tanto para adaptá-las a resoluções de tela de forma visual, mantendo uma
boa apresentação, quanto para prover renderizações ágeis contribuindo para o
desempenho das páginas. Optar por qual técnica utilizar depende do contexto do
projeto, se é necessário código válido com padrão W3C, se este deve dar suporte à
acessibilidade. (ZEMEL, 2012)
Dentre as soluções para provir imagens flexíveis existem pontos falhos, isso
ocorre porque o conceito de design responsivo é recente, por outro lado, o W3C já
apresenta esforços destinados a tornar esse conceito uma rotina e realidade dentro
62
dos projetos web. Elabora como proposta o uso do atributo srcset no código HTML,
e a propriedade image-set para CSS. (ZEMEL, 2012)
Independente da técnica escolhida para tornar imagens flexíveis, se faz
necessário, que desenvolvedores front-end conheçam os formatos de imagens e
suas características. Na web contemporânea, existem três formatos de imagens
mais comumente utilizados. (ZEMEL, 2012)
Graphics Interchange Format (GIF): formato com capacidade limitada a 256
cores, ou seja, 8 bits. Sua aplicação normalmente é feita em ícones e logomarcas,
tem como principal característica possibilitar animações. Dois fatores positivos em
relação a este tipo de formato são: arquivos leves e sem perda de qualidade após
alterações. (ZEMEL, 2012)
Joint Photographic Experts Group (JPEG): bastante aplicado atualmente, isso
devido ao formato gerar imagens de excelente qualidade gráfica, providas por 24
bits, que significa um total de 16 milhões de cores. O fator negativo deste formato
consiste na perda de qualidade toda vez que este é salvo, isso porque esse ato
requer nova compressão do arquivo. (ZEMEL, 2012)
Portable Network Graphics (PNG): dos três mais utilizados, este é o formato
mais recente, possui como objetivo agregar os pontos positivos dos outros dois
tipos, dessa forma, é disponível em duas versões: 8 bits e 24 bits, estes sendo
específicos a cada necessidade de uso. (ZEMEL, 2012)
A versão PNG 8 bits é voltada para ícones, possui as mesmas 256 cores do
formato GIF, no entanto, oferece como vantagem a criação de arquivos mais leves
que os originados do uso de GIF. Enquanto a versão PNG 24 bits visa substituir a
utilização do formato JPEG, isso porque também possui 16 milhões de cores,
entretanto, diferentemente do JPEG seus arquivos não apresentam perda de
qualidade. (ZEMEL, 2012)
Um formato que é atribuído ao futuro de elementos gráficos na web é o
Scalable Vector Graphics (SVG), este não é um tipo de imagem, mas sim uma
linguagem XML voltada para marcação de gráficos vetoriais, que recentemente pode
ser inserida em marcações HTML5, versão mais recente da linguagem de marcação
de texto. (EIS; FERREIRA, 2012)
3.3.3 Media Types
Para a concepção de sites estruturados com o conceito de design responsivo,
63
não basta à elaboração de layouts automaticamente redimensionáveis, mas sim,
conceber interfaces que sejam especificas aos diferentes recursos disponibilizados
nos dispositivos. Essas especificidades consistem em designs característicos a cada
tamanho de tela, desse modo significa que dependendo do tamanho de tela do
dispositivo, o usuário terá acesso a determinado tipo de layout, isto é feito para
garantir uma experiência de navegação usualmente mais simples e ágil. (ZEMEL,
2012)
A elaboração de layouts diferentes para um mesmo site, característicos a
diferentes tipos de experiência, ocasionadas por acesso de dispositivos com telas de
tamanhos diversos, se faz possível com a aplicação da técnica Media Queries.
Entretanto, para melhor compreensão desta técnica é necessário conhecimento a
respeito de Media Types. (ZEMEL, 2012)
O uso de Media Types é recomendação do W3C, este foi inserido em seus
padrões na versão do CSS2, tem por objetivo exibir interfaces diferentes,
características a Media Type especificada. Com isso externa experiência particular
ao dispositivo usado no momento do acesso, ou seja, provem visualizações
especificas a impressão, sintetizadores de voz, televisores, ou qualquer outro
dispositivo que seja definido. (ZEMEL, 2012)
Na concepção do HTML foi principiado que este deve ser de uso universal,
acessível a qualquer dispositivo que detenha acesso a internet, por sua vez, o CSS
tem como função moldar a forma de apresentação do conteúdo marcado em HTML,
sendo possível especificar formas de exibição diferentes, referente ao dispositivo de
acesso, isto é possível com o uso de vários arquivos CSS para uma mesma página
HTML. Todavia, para diferenciar os dispositivos durante o acesso é aplicada a
técnica de Media Types, isto porque essa direciona ao browser qual arquivo CSS é o
indicado para cada mídia. (EIS, 2009)
Existe uma lista que define os tipos existentes e a quais dispositivos estes são
destinados:
All: referente a todos os dispositivos;
Braile: especifico para dispositivos de uso tátil, estes são utilizados por
usuários cegos;
Embossed: destinado a impressoras em braile;
Handheld: para dispositivos móveis;
Print: usado para modo de visualização de impressão;
64
Projection: voltado para exibição em projetores;
Screen: para visualização em computadores;
Speech: específicos para sintetizadores de voz;
Tty: para exibição de caracteres em terminais, dentre outros;
TV: voltado para dispositivos Televisores; (EIS, 2009)
Quando declaradas estas especificações de Media Types, a página é exibida
contendo características especificas ao dispositivo de acesso do usuário. Desse
modo é renderizado o CSS que foi criado para a experiência inerente a determinado
device. (ZEMEL, 2012)
De acordo com EIS (2009), as marcações de especificações de Media Types
podem ser feitas dentro do bloco da tag <head> do código HTML, esta especificação
é indicada na tag <link>, que por sua vez detém o link com o arquivo CSS destinado
a determinado device.
<link rel=”stylesheet” media=”braile” href=”braile.css”>
Conforme Zemel (2012) pode ser de interesse do desenvolvedor que o
mesmo estilo de layout seja aplicado a diferentes devices, para isto a especificação
deve conter todas as mídias e dispositivos de destino.
<link rel=”stylesheet” type=”text/css” media=”screen, print”
href=”screen_print.css”>
A declaração de estilos referentes a cada device não precisa
necessariamente ser marcada pela tag <link> na página HTML, estas especificações
podem ser feitas em um mesmo arquivo CSS. (ZEMEL, 2012)
@media print{
body{font-size: 10pt;}
}
@media screen{
body{font-size: 12px;}
}
65
O problema de construir páginas com experiência especifica para cada tipo de
dispositivo, é o surgimento crescente de novos devices, muitos destes com
configurações parecidas com desktops, por isso contemporaneamente é inviável a
criação de várias folhas de estilo centradas neste objetivo. (EIS, 2009)
3.3.4 Media Queries
Devido as muitas semelhanças entre os dispositivos atuais, conceber folhas
de estilo baseadas em tamanhos de tela, provem resultados mais satisfatórios em
relação aos fornecidos por estruturas características a cada dispositivo. (LOPES,
2012)
A atual versão CSS3 contém recursos interessantes que facilitam a criação de
designs responsivos, dentre estes, destacam-se os parâmetros de mínimo e máximo
tanto para altura, quanto largura. Desse modo, podem ser aplicados trechos de
estilização específicos a dispositivos com determinadas medidas de tela. (LOPES,
2012)
<link rel=”stylesheet” media=”screen
and (max-width:320px)” href=”320.css”>
Assim como é possível declarar vários Media Types em um único arquivo, o
mesmo acontece com Media Queries. (ZEMEL, 2012)
@media screen and (min-width:320px){
body{font-size: 80%;}
}
@media screen and (min-width:480px){{
body{font-size: 90%;}
}
O uso de Media Queries não se restringe a declarar estilizações focadas em
tamanhos de tela dos dispositivos, estes também contém uma lista de parâmetros
que podem ser aplicados, de modo que estabeleça experiências cada vez mais
66
especificas para as capacidades e limitações de cada dispositivo. (ZEMEL, 2012)
Presentemente a navegação na web, fazendo-se o uso de tablets é cada vez
mais popular, uma de suas particularidades é seu manuseio tanto em modo
paisagem, quanto retrato. Este aspecto possibilita que o usuário mude sua forma de
navegar, pois dependendo o modo de uso que o dispositivo esteja, a tela terá
largura ou altura mais ampla, com isso se faz interessante que os desenvolvedores
provenham nos sites adaptações referentes a estas especificidades. (ZEMEL, 2012)
Segundo Zemel (2012), dentre os parâmetros de Media Queries, um deles
possui como função declarar estilizações de CSS especificas ao modo de uso do
dispositivo:
orientation: neste parâmetro, no atributo valor deve ser declarada a qual
particularidade a estilização será destinada, os valores a serem declarados
são landscape (paisagem) ou portrait (retrato).
@media all and (orientation: landscape)
Junto ao uso de parâmetros é interessante a aplicação de operadores lógicos,
visto que, estes possibilitarão maior diversidade nos Media Queries aplicados, são
quatro os operadores existentes: and, or, not e only. (EIS, 2009)
and: quando aplicado denota que determinado arquivo ou trecho CSS é
especifico a duas características. (ZEMEL, 2012)
<link rel=”stylesheet” media=”all
and (max-width:320px)” href=”320.css”>
or: operador declarado pelo uso de vírgula, este quando utilizado significa
que caso dentre as especificações uma for verdadeira, o mesmo acontecerá
com as demais. (ZEMEL, 2012)
@media screen and (color), print and (color)
not: possui como função negar determinada declaração, ou seja, quando
aplicado ao início de uma consulta, caso esta seja verdadeira, torna-se falsa,
o processo inverso também ocorre. (ZEMEL, 2012)
67
<link rel=”stylesheet” media=”not screen
and(color)” href=”estilo.css”>
only: com uso deste, browsers mais antigos que não dão suporte a técnica de
Media Queries não detectarão o arquivo CSS especificado. (EIS, 2009)
<link rel=”stylesheet” media=”only screen
and(color)” href=”estilo.css”>
Os parâmetros mais aplicados atualmente são os referentes à largura e altura
dos dispositivos, isto porque cada vez mais os dispositivos assemelham-se nos
recursos, por isso não convêm a declaração de vários parâmetros, tendo em vista
que apenas o uso de especificação de largura e altura já provêm experiência
satisfatória ao usuário. (ZEMEL, 2012)
Conhecer os parâmetros e suas aplicações não é o suficiente para provir um
site responsivo, aplicá-los com atenção as necessidades do projeto é essencial. Por
conseguinte, se faz fundamental estipular quais serão as interrupções que indicarão
qual estilização será indexada em relação ao momento do acesso. (ZEMEL, 2012)
Os pontos de interrupção podem ser aplicados em forma crescente, desse
modo, é especificado determinado trecho CSS para a mais baixa resolução a qual o
site dará suporte, sendo continuado por outros pontos de interrupção, tendo como
término a mais alta resolução a qual o site será melhor navegável. (ZEMEL, 2012)
@media only screen and (min-width: 480px)
@media only screen and (min-width: 600px)
@media only screen and (min-width: 768px)
@media only screen and (min-width: 992px)
@media only screen and (min-width: 1382px)
A aplicação do conceito de Media Queries não requer apenas atenção às
interrupções feitas no CSS, mas também a tomada de decisão a qual forma
disponibilizar Media Queries, sendo assim, se faz necessário decidir entre a
utilização de vários arquivos CSS, ou especificar todas as interrupções em um único
arquivo. (ZEMEL, 2012)
68
A decisão de como aplicar os Media Queries implica nos seguintes fatores: a
aplicação de vários arquivos será prejudicada, quando o site for acessado via
browsers antigos, uma vez que, estes não interpretarão as Media Queries, logo, os
arquivos CSS não serão indexados. Outro fator atenuante é o fato de que
navegadores que interpretam Media Queries irão baixar todos os arquivos CSS,
ainda que apenas um seja realmente utilizado pelo dispositivo no momento do
acesso, desse modo serão várias requisições HyperText Transfer Protocol (HTTP)
desnecessárias. (ZEMEL, 2012)
A estilização declarada em um único arquivo CSS, detém como principal
vantagem a necessidade de apenas uma requisição HTTP, por outro lado ocasiona
o uso de JavaScript, tendo em vista que versões mais antigas do IE não interpretam
Media Queries. (ZEMEL, 2012)
O browser IE comparado aos demais navegadores é o que apresenta maior
empecilho em relação ao conceito de design responsivo, isso porque este só provem
suporte a Media Queries a partir de sua versão IE9. No Brasil ainda se faz presente
o uso de versões antigas do IE, para solucionar esse fator atenuante é preciso
utilizar comentários condicionais na declaração do arquivo CSS, ou aplicar
JavaScript. (ZEMEL, 2012)
3.3.5 Testes em Design Responsivo
Desenvolver interações adaptáveis aos recursos e limitações referentes as
mídias de cada usuário, não tem como término o desenvolvimento front-end, pois
após a concepção da marcação e estilização de conteúdo, é imprescindível a
realização de testes funcionais, aos quais são exibidas e navegadas todas as
páginas que compõe o site, nas mais variáveis resoluções de tela. Desse modo,
todos os cenários serão testados em suas particularidades.
A aplicação de testes funcionais após a conclusão do desenvolvimento é
indispensável. Entretanto, é interessante verificar possíveis erros e falhas ao longo
de todo o processo, isso porque os ajustes e aprimoramentos são feitos
acompanhando a elaboração dos cenários especificados, sendo assim, as
experiências serão concebidas de modo mais característico, intrínseco.
Executar testes funcionais não requer complexidade, o simples ato de
visualizar todas as funcionalidades contidas no conteúdo em telas com medidas
69
diferentes já é satisfatório. Para isso não é necessário a navegação em dispositivos
distintos, ao browser Google Chrome é possível adicionar o plugin resolution test,
este provem a visualização de páginas web em qualquer resolução de tela, pois
contém algumas resoluções, que ao serem selecionadas a janela do navegador é
redimensionada, também possibilita ao desenvolvedor acrescentar outras
resoluções que sejam de seu interesse.
Neste capítulo foi visto que o conceito de design responsivo se faz
fundamental na web contemporânea, assim como denota ser o futuro do
desenvolvimento front-end para sites, portais e sistemas web, visto que a fabricação
dos mais diversos dispositivos provendo acesso à internet só aumenta. Paralelo a
este aumento está a necessidade e cobrança por uma web interativa, sendo assim é
essencial a elaboração de aplicações cada vez mais personalizáveis a experiência
do usuário, centradas em usabilidade.
No próximo capítulo serão apresentados os demais conceitos e tecnologias
que serviram como base para a fundamentação teórica e prática do presente
trabalho.
70
4 REVISÃO BIBLIOGRÁFICA
O presente capítulo é destinado a apresentar todos os conceitos objetos de
pesquisa e estudo que contribuíram para a concepção do protótipo de galeria virtual
de arte: Crie arte, assim como, todas as ferramentas e tecnologias que auxiliaram
em seu desenvolvimento. Esta elaboração foi fundamentada nos preceitos sugeridos
e inerentes aos atuais modelos de arte e web, desse modo, junto à acessibilidade na
web e o design responsivo, foram aplicados conceitos que em conjunto podem
contribuir para a universalização da arte, ou seja, estreitar as barreiras físicas e
sociais do acesso a um dos elementos correlatos a humanidade e estruturação da
sociedade, que desde seu inicio, obteve nas manifestações artísticas um
instrumento de comunicação.
4.1 INTERNET
A criação da internet foi uma iniciativa militar do governo dos Estados Unidos,
a ideia surgiu a partir do conflito contra a antiga União das Repúblicas Socialistas
Soviéticas (URSS). (ABREU, 2009) Neste período ambos disputavam à supremacia
mundial no campo tecnológico, devido a isso em 1962 a força militar norte-
americana solicitou a universidades de seu país que estudassem e elaborassem
uma infraestrutura de comunicação inatingível a ataques nucleares, ou seja, que
esta continuasse em funcionamento mesmo sendo alvo de ataques, ou que
provesse fácil recuperação das informações. (MUNÕZ; TURNER, 2002 apud
ABREU, 2009)
Em 1972, pela primeira vez a internet interligou quatro computadores, estes
localizados em universidades distintas dos Estados Unidos. Com um avanço
relativamente rápido, no ano seguinte já disponibilizava acesso a cem usuários,
estes compostos por professores e pesquisadores. (CUSTÓDIO; SILVA, 2009) Em
1975 detinha em torno de dois mil usuários, seu uso havia sido intensificado por
pesquisadores, isso porque estes detectaram na nova tecnologia uma possibilidade
de disseminar e compartilhar suas pesquisas. (ABREU, 2009)
Aos poucos algumas empresas identificaram que a internet poderia ser
atrativa do ponto de vista comercial, dessa forma a partir de 1979 foi disponibilizado
o CompuServe, primeiro provedor comercial. Logo em seguida surgiu outro grupo
71
empresarial interessado no novo modelo de comunicação, desse modo foi lançado
um segundo provedor, este fabricado por um grupo de empresas alemãs e
francesas associadas à American Online (AOL). Neste período inicial da internet
comercial outro provedor foi estabelecido, sendo este o Prodigy, especulasse que
em 1993 o montante de usuários clientes dos três provedores girava em torno de 3,5
milhões. (BRIGGS; BURKE apud ABREU, 2009)
No período inicial de concepção da internet, esta era estruturada de forma
precária, isso se comparada aos dias atuais, pois era composta por uma interface
puramente textual, manipulada por meio de comandos UNIX. (CUSTÓDIO; SILVA,
2009)
As funcionalidades presentes na internet eram limitadas, sendo possível
apenas o acesso a sessões instauradas por máquinas remotas e troca de
mensagens entre estas. (MATTOSO, 2003)
Em paralelo a consolidação dos primeiros provedores online, no ano de 1989,
na Suíça, o pesquisador inglês Tim Berners-Lee idealizou em pesquisas a
elaboração da web. Este pesquisador visava à concepção de uma rede mundial que
estabelecesse uma comunicação interligada por computadores em qualquer parte
do mundo, de forma aberta, ou seja, sem proprietários, devido a isso foi aplicado o
nome web, pois simboliza uma teia de computadores. No entanto, esta iniciativa era
contrária aos interesses das empresas que detinham o controle da internet, isso
porque estas ambicionavam apenas o lucro, não tinham a intenção de tornar a
internet aberta a qualquer usuário. (ABREU, 2009)
4.2 WEB
Somente com a aprovação do conceito idealizado por Tim Berners-Lee que a
internet aos poucos passou a ser do modo como a conhecemos hoje, isso porque
devido à inserção da web foi possibilitada a aplicação de outras funcionalidades,
dentre estas: textos, imagens e outros arquivos multimídia. (MATTOSO, 2003)
Os paradigmas da internet mudaram com o surgimento do Mosaic, o primeiro
navegador funcional da web em modo gráfico, que passou a oferecer suporte ao uso
de imagens, com isso tornou a internet mais amigável, que, por conseguinte facilitou
sua comercialização a usuários comerciais. (CUSTÓDIO; SILVA, 2009)
O surgimento da web contribuiu enormemente para a proliferação da internet,
72
pois com esta as limitações foram estreitadas, isso devido ao principal preceito da
web, que consiste em estabelecer um meio de comunicação acessível e de
qualidade, com isso sua estrutura desde o início é independente de plataforma,
podendo assim ser utilizada em qualquer sistema operacional. (MATTOSO, 2003)
É importante diferenciar a web dos primórdios da internet, pois enquanto a
internet tinha a capacidade de interligar computadores pertencentes a uma mesma
rede, a web não só interliga computadores, como também engloba inúmeros
softwares, desse modo esta pode ser melhor caracterizada por ser um ambiente,
uma plataforma digital. (MATTOSO, 2003)
A web provém inteligência a internet, haja vista que esta é a responsável pela
interligação de páginas e sites por meio de links contidos nas marcações hipertexto.
Devido a essa capacidade de interligação é que se faz possível a comunicação por
computadores a qualquer parte do mundo. (CUSTÓDIO; SILVA, 2009)
4.3 WEB 2.0
A partir do ano 2000, mais precisamente em 2001 a web se popularizou,
ocasionando um notório aumento na quantidade de sites, neste período distintos
modelos de negócios foram criados estritamente para a web. Este fenômeno digital
ficou conhecido por estouro da bolha das empresas ponto-com, o cenário passou a
ser conturbado, tendo em vista, que muitas empresas não habituadas aos padrões
de negócios vinculados a plataforma web inseriram-se sem conhecimento
específico. Entretanto, apesar das convergências resultantes do aumento
desenfreado e não apropriado, alguns fatores benéficos foram obtidos, pois isso
possibilitou que a web alcançasse um maior patamar de visualização e participação
em relação à sociedade. (REILLY, 2005)
Com o advento de novos serviços fazendo-se uso da web como plataforma,
novos conceitos surgiram, assim como, seu uso de modo geral iniciou um processo
de reformulação, isso porque se instaurou uma mudança no modo de comunicação
dos sites com o usuário. Nestes novos conceitos eclodidos dessa mudança
comportamental dos criadores e desenvolvedores de conteúdo web, originou-se o
conceito de web 2.0. (REILLY, 2005)
A discussão em torno do conceito de web 2.0 teve início em uma conferência
organizada pelas empresas O’ Reilly e MediaLive International. Esta ocorreu em San
73
Francisco no ano de 2004, na qual foi debatida a concepção de uma web mais
dinâmica e interativa junto aos usuários. Sendo assim, que não apenas
disponibilizasse e direcionasse informações a seu público, mas sim, que ao invés
disso estabelecesse uma comunicação multidirecional, propiciando a estes não
apenas a visualização e leitura de informações, mas que também tivessem a
possibilidade de efetuar publicações nos sites. (BLATTMANN; SILVA, 2007)
O novo modelo de comunicação dos sites acompanhou uma necessidade
histórica dos costumes sociáveis, isso porque a web com a consolidação do conceito
de web 2.0 tornou-se uma plataforma descentralizada, diferente de seus primórdios,
onde as informações eram vinculadas totalmente centralizadas, pois alguns poucos
autores tinham o total controle da disseminação da informação. Diferentemente de
hoje, que em grande parte dos sites disponíveis é possível não apenas ser um
indivíduo passivo que se remete a “assistir” o conteúdo disponibilizado, ao contrário,
pois ao usuário agora não só é permitido, como também é incentivado participar
ativamente dos conteúdos inerentes aos sites. (BLATTMANN; SILVA, 2007)
A transmissão de informação padronizada vinculada de modo generalizado na
web encontra-se cada vez mais em desuso, esta fora substituída por um modelo de
mídia de informação mais característico aos aspectos e necessidades de seu
público. (REED, 2012)
Devido à inserção de sites dinâmicos e quase extinção dos estáticos
característicos da web antecedente ao ano 2000, se proliferou páginas web mais
personificadas, características e adaptadas ao seu mercado e público, providas de
questões e respostas imediatas, tanto para as necessidades das empresas
proprietárias de sites, quanto de seus usuários. Este novo paradigma de web
assumiu um papel mais social, agregando participações dos mais diferentes públicos
presentes na plataforma digital, por meio do compartilhamento de informações.
(SOUZA, 2012)
Apresentando como caráter principal a multicolaboração e participação de
visitantes e colaboradores de conteúdo dos sites, o conceito web 2.0 não só
converteu o modelo de negócio da web, como transpôs as barreiras da internet, esta
ascendeu outras mídias, sendo hoje, vinculadas campanhas publicitárias
complementares na televisão, revistas e jornais. Este modelo de propaganda é
denominado de ação cross-media, nesta uma campanha de marketing pode iniciar
na televisão influenciando o telespectador a acessar determinado site, que, por
74
conseguinte conclui a campanha, sendo assim um comercial multiplataforma.
(SOUZA, 2012)
Um bom exemplo da ação cross-media são os comerciais do site mercado
livre, estes atualmente transmitidos na televisão, pois é intencionalmente externado
o objetivo de influenciar o usuário a acessar o site, tanto é que a propaganda
televisiva a todo instante apresenta indivíduos acessando-o ou sendo motivados a
acessá-lo. Ou seja, trata-se de uma campanha publicitária multiplataforma iniciada
em uma mídia e concluída em outra.
A falta de barreira presente na web contemporânea estimulou e tem
estruturado a sociedade centrada em informação, que por sua vez é alentada por
seus próprios consumidores, isto é, formou-se um ciclo de sustentação da
informação, onde os usuários acessam determinado site, e consomem a informação
ao mesmo tempo em que também contribuem com novas informações ou opinião a
respeitos das adquiridas. Esta relação multidirecional não apenas gera uma
sociedade mais informativa, como também suscita uma inteligência coletiva,
sapiente dos diversivos elementos da cultura, tratando-se de práticas sociais,
política, entretenimento, manifestações artísticas, dentre outros. (BLATTMANN;
SILVA, 2007)
4.3.1 Web 1.0 x Web 2.0
A proposta de mudança da web moldada no conceito de web 2.0 não foi um
projeto de mera transformação das tecnologias vigentes, mas sim modificar o modo
de pensá-la, substituindo seu antigo modelo de distribuição de conteúdo para a
elaboração de uma plataforma de publicação, recepção e compartilhamento.
(BLATTMANN; SILVA, 2007)
Esta configuração do conceito de uma web plataforma deu origem a
empresas nativas da internet, criadas com o perfil característico da web 2.0, ou seja,
concebidas em estruturas de serviços disponíveis e compartilhados. Ao contrário
das principais empresas da web 1.0, que em sua maioria a ascendeu com o intuito
de expansão de um negócio já existente fora da plataforma digital. (REILLY, 2005)
Dentre os atuais sites e serviços online mais populares, todos possuem uma
característica comum, que consiste no agrupamento das especificidades do conceito
de web 2.0, mantendo como fator principal a criação de redes de conteúdos criadas,
75
atualizadas e mantidas por seus próprios usuários. Nestes destacam-se a Google
uma das empresas mais valiosas do mundo que detém uma série de serviços
providos online, o Youtube portal de hospedagem e compartilhamento de vídeos,
Flickr serviço voltado ao compartilhamento de fotos, Wikipédia enciclopédia online
de conteúdo mais vasto, Facebook atualmente a principal rede social, Linkedin rede
social de caráter profissional e as plataformas de criação de blogs: Blogger e
Wordpress, entre tantos outros serviços centrados em uma comunicação
multidirecional com seus usuários. (SOUZA, 2012)
A figura 4.1 faz um comparativo entre alguns sites, serviços e ferramentas
correspondentes à web 1.0 e web 2.0
Figura 4.1 – Web 1.0 x Web 2.0 Fonte: BLATTMANN; SILVA, 2007, p. 198.
Para a compreensão a respeito de um serviço, site, ou empresa online ser ou
não estruturada no conceito de web 2.0 é fundamental que algumas diretrizes sejam
seguidas, tais como: plena confiança em seu público de usuários, mantendo-os com
o papel de desenvolvedores adjuntos do conteúdo disponível. A formação de uma
rede de inteligência coletiva, originada do compartilhamento e troca de experiências
e conhecimentos da rede de usuários. O serviço ou site estar acessível não
exclusivamente a computadores, mas sim a qualquer dispositivo provido de internet.
(REILLY, 2005)
4.4 INTERAÇÃO HUMANO-COMPUTADOR (IHC)
As tecnologias de informação e comunicação estão cada dia mais presentes
no cotidiano de toda a sociedade. Isto porque o uso de sistemas interativos já se
76
tornou hábito entre a maioria das pessoas, isso devido ao fato de auxiliarem em
grande parte das atividades realizadas diariamente, aliando fatores computacionais
e de comunicação. (BARBOSA; SILVA, 2010)
Atualmente os sistemas interativos não exercem apenas o papel de
ferramentas para realizarmos nossas atividades, seu uso implica em mudanças
significativas em nosso modo de trabalhar, estudar e principalmente nos relacionar
com outras pessoas. Sendo assim, devemos nos ater ao fato de que as tecnologias
de informação e comunicação transformaram os papéis e ações do que se faz, como
se faz, quem as faz, quando, onde e por quê. (BARBOSA; SILVA, 2010)
A interação entre sistemas e pessoas intermediada por interfaces não fornece
apenas ícones, informações, links e opções de cliques, estas são parte da conversa
entre pessoas, constituem as mensagens entre os emitentes e remetentes.
(AGNER, 2011)
As barreiras de tempo e distância encontram-se cada vez mais ínfimas, não
se caracterizando mais como empecilhos para a comunicação entre as pessoas.
Visto que, serviços de e-mail, softwares para troca de mensagens, sites de
publicação já se apresentam indispensáveis na cultura contemporânea, pois
permitem a comunicação independente de distância geográfica, com serviços que
suportam envio de mensagens textuais, imagens, vídeos e sons. (BARBOSA;
SILVA, 2010)
Comumente ocorrem problemas nas relações entre pessoas, ainda que já
tenhamos atingido milênios da existência de civilizações, sendo assim, se em
relações entre nós acontecem divergências, não é diferente em relações compostas
por interações entre pessoas e sistemas computacionais. (BARBOSA; SILVA, 2010)
É fundamental analisarmos com cautela os ganhos e implicações
consequentes da consolidação de sistemas interativos na sociedade, tendo em vista
que o comportamento e cultura têm mudado continuamente em função destes. Pois
independente da razão e enraizamento das mudanças é necessário nos atermos às
individualidades de cada pessoa, ainda que a tecnologia se mostre vantajosa a um
grande grupo de pessoas. (BARBOSA; SILVA, 2010)
Com o intuito de analisar a qualidade de uso dos sistemas interativos e suas
consequências surgiu à área de IHC, esta visa à concepção de sistemas mais
adequados aos contextos de ambiente, cultura e indivíduos a qual serão inseridos.
Para isto designa que o desenvolvimento de sistemas interativos deve facultar em
77
um processo centrado no usuário, ou seja, seu contexto, experiência de uso,
habilidade e, limitações motoras e cognitivas, para somente depois realizar o
desenvolvimento das funcionalidades, pois estas devem ser aplicadas de acordo
com seu público de usuários. (HEWETT et al, 1992 apud BARBOSA; SILVA, 2010)
Os estudos de IHC objetivam prover aos envolvidos na produção de sistemas
computacionais explicações e previsões referentes as relações de interação
humano-computador, almejando resultados práticos que contribuam para a
elaboração de designs de interface amigáveis para os usuários. (ACM SIGCHI, 1992
apud SOUZA et al, 1999)
De acordo com Hewett (1992) apud BARBOSA e SILVA (2010), a IHC pode
ser dividida em 5 subáreas de estudo: natureza da interação humano-computador;
uso de sistemas interativos e contexto ao qual se aplica; características humanas;
arquitetura de sistemas computacionais e da interface com usuários; processos de
desenvolvimento centrado no usuário.
Natureza da interação: aborda estudos destinados ao que procede enquanto
as pessoas realizam tarefas por meio de sistemas interativos.
Contexto de uso: averigua a influência da interação entre pessoas e
computadores, destacando que cada pessoa possui particularidades, que por sua
vez são decorrentes de sua cultura.
Características humanas: estuda como as características humanas interferem
na interação humano-computador, visto que a interação demanda capacidade
cognitiva para o processamento e aprendizado das funcionalidades. (REEVES;
NASS, 2003 apud BARBOSA; SILVA, 2010). Também analisa as características
físicas, bem como: tato, visão, audição e capacidade motora. Esta subárea visa
usufruir das características humanas para a elaboração de sistemas que as
favoreçam, respeitando particularidades de limitações que possam ocorrer durante a
interação. (BARBOSA; SILVA, 2010)
Arquitetura de sistemas computacionais: busca provir a construção de
sistemas que beneficiem a experiência de uso. (JOHN et al, 2004 apud BARBOSA;
SILVA, 2010)
Processo de desenvolvimento: influencia a qualidade do sistema, devido a
isso é de grande importância a aplicação de abordagens de IHC. (BARBOSA;
SILVA, 2010)
A área de IHC não contempla apenas pesquisas da área de computação. Ao
78
contrário, esta engloba diversas áreas, tais como: psicologia, sociologia e
antropologia. Pois somente com esta composição de ligações multidisciplinares é
possível construir uma base de conhecimento a respeito da cultura do usuário e seu
comportamento. Após traçado o perfil de usuário, a IHC se beneficia das áreas de
design, ergonomia, linguística e semiótica para a construção prática. (BARBOSA;
SILVA, 2010)
Dentre os estudos de IHC os seguintes critérios são empregados: usabilidade,
experiência dos usuários, acessibilidade e comunicabilidade. (BARBOSA; SILVA,
2010) Comunicabilidade consiste na capacidade de transmissão do sistema ao
usuário, revelando de forma eficaz os objetivos inerentes ao design e
funcionalidades do sistema, a qualidade desta transparência dos objetivos está
diretamente ligada a eficiência de uso do usuário. (SOUZA et al, 1999)
Outro fator objeto de estudo da IHC é a affordance, este é um termo referente
as características dos objetos que auxiliam na interpretação dos usuários, em suas
operações e manipulações sobre os elementos da interface. (NORMAN, 1988 apud
BARBOSA; SILVA, 2010)
Segundo Norman (1988) apud SOUZA et al (1999), as affordances
estabelecem auxílios visuais, pois fortalecem a percepção do usuário indicando o
que este deve fazer de acordo com as características de cada elemento. Por
exemplo: um botão na interface remete ao usuário a ação de clique.
Para a aplicação dos estudos de IHC é importante o conhecimento e
compreensão de seus objetos de pesquisa, sendo assim é imprescindível a
compreensão do termo interface. Pois, ainda que esta seja uma palavra popular em
grande parte de usuários de computadores, seu significado e função são mais
abrangentes do que normalmente lhe é atribuído.
Conforme Norman (1986) apud SOUZA et al (1999), o termo interface é
designado ao objeto de interligação dos sistemas. Compreende-se que uma
interface é parte de um todo destinado ao usuário para controle e avaliação de
funcionamento do sistema, este é acionado por dispositivos passivos a ações e
percepções do usuário. A interface não corresponde apenas à interligação de
sistemas e sites, mas também máquinas, o que as difere, é uma aplicação maior da
cognição para interpretação das funcionalidades e informações que os sistemas
interativos disponibilizam.
A interface de usuário é caracterizada como sendo o elo entre um sistema e
79
uma pessoa, tendo como função estabelecer o contato físico perceptivo e conceitual.
Nesta definição o contato físico é atribuído aos elementos manipuláveis pelo
usuário, enquanto o termo conceitual refere-se à interpretação, processamento e
raciocínio do usuário perante a interface. (MORAN, 1981 apud SOUZA et al, 1999)
Uma interface não é apenas o meio de interação entre usuário e sistema, mas
sim, um instrumento que estabelece a comunicação entre os serviços providos pelo
sistema e as vontades e necessidades dos usuários, desse modo conclui-se que a
interface é um sistema de comunicação. (SOUZA et al, 1999)
A interface é a responsável por estabelecer as possíveis interações, assim
como, especifica suas funções, comportamento e sequência. Portanto, a forma
como a interface será estruturada corresponde a restrição e limites da interação do
sistema com o usuário. (BARBOSA; SILVA, 2010)
O grau de semelhança das interfaces com as características humanas reflete
diretamente no êxito do sistema, pois, quanto mais similar uma interface for ao
comportamento humano, mais fácil será o processo de interação entre usuários e
sistema, isso porque as pessoas tendem a agirem em qualquer situação do mesmo
modo que se relacionam com outras pessoas. (AGNI. 2011)
Ao longo dos estudos de IHC, houve mudanças no significado de interação,
isso porque inicialmente esta era classificada basicamente como uma sequência de
estímulos e respostas. Entretanto, com os avanços da IHC, aos poucos foram
inseridas pesquisas de base cognitiva, com isso foi realçada a interação como um
processo de comunicação dos indivíduos com as máquinas, em detrimento dos
estudos iniciais que fundamentavam a interação como um processo de operação de
máquinas. (CARD, MORAN e NEWELL, 1983 apud BARBOSA; SILVA, 2010)
A interação pode ser descrita como um processo referente ao usuário, ao qual
é composto de intenção, planejamento de ações e atuação sobre a interface,
percepção e interpretação da resposta resultante da ação. (NORMAN, 1986 apud
BARBOSA; SILVA, 2010). Desse modo, o processo de interação é compreendido
como manipulação e comunicação do usuário com o sistema intermediado pela
interface. (BARBOSA; SILVA, 2010)
A interação pode ser classificada em estilos de interação, um estilo consiste
em todos os modos aos quais usuários estabelecem comunicação com sistemas
computacionais, estes podem ser: linguagem natural; linguagens de comando;
menus; preenchimento de formulário e manipulação direta, entre outros. (PREECE
80
et al, 1994, SHNEIDERMAN, 1998 apud SOUZA et al, 1999)
Linguagem natural: interações deste estilo são estabelecidas por meio do
idioma que o usuário domina, ou seja, português, inglês, de acordo com o público de
usuário. Aplicações que façam uso desse estilo implicam em alta complexidade no
desenvolvimento, isso porque são necessárias análises gramaticais e verificações
de ambiguidades. (SOUZA et al, 1999)
Linguagem de comando: este estilo de interação possibilita o manuseio do
sistema por meio de comandos específicos. (PREECE et al, 1994 apud SOUZA et
al, 1999). Estes comandos podem variar de combinações de teclas, palavras,
abreviações, ou até mesmo um único caractere.
Menus: consiste em um conjunto de opções expostos na tela, este pode ser
de uma ou múltiplas escolhas, estas provocam as mudanças de estado da interface.
(PAAP; ROSKE-HOFSTRAND, 1988 apud SOUZA et al, 1999) Este é o principal
estilo de interação utilizado em sites, que por sua vez estão entre os sistemas
interativos mais populares atualmente.
Preenchimento de formulários: estes são bastante utilizados em sistemas e
sites que dependem dos dados de seus usuários. A interface de um formulário
remete o usuário aos modelos de formulários impressos, isto é feito com a intenção
de agilizar o processo de aprendizado do usuário, para assim prevenir erros de
interação. (SOUZA et al, 1999)
Manipulação direta: estabelece a interação sem a necessidade de linguagens.
Para isto faz uso de objetos gráficos que dependam da ação do cursor mediado pela
ação de movimento da mão. (SOUZA et al, 1999)
No tempo presente duas abordagens destacam-se nos estudos de IHC, são
elas: engenharia cognitiva e engenharia semiótica. Nos estudos cognitivos são
analisados os processos de aprendizagem humana, objetivando-se as
compreensões mentais inerentes aos usuários durante as interações. Já a corrente
semiótica estuda signos, os sistemas semióticos e comunicação. (AGNER, 2011)
Um signo é algo que estabeleça algum significado para alguém. (PIERCE,
1931 apud SOUZA et al, 1999). Logo, no idioma português, a palavra casa contém o
mesmo significado para as pessoas dominantes do idioma, que a ilustração ou
fotografia de uma casa. (SOUZA et al, 1999)
A aplicação da engenharia semiótica se comparada a cognitiva, requer maior
atenção, pois tanto quem elabore a mensagem, quanto as pessoas receptoras
81
desta, devem ter ciência dos signos aplicados na interface, não podendo haver
ambiguidades. (SOUZA et al, 1999)
O comportamento do usuário não pode ser previsto integralmente, isso
porque cada indivíduo possui experiência e características próprias, dessa forma
interage de modo particular com os sistemas. Todavia, um estudo e planejamento
fundamentado em IHC possibilita a concepção de sistemas interativos que
minimizem as limitações e dificuldades de uso. (BARBOSA; SILVA, 2010)
4.5 UNIFIED MODELING LANGUAGE (UML)
A UML é uma linguagem visual destinada à modelagem gráfica de softwares
estruturados no conceito de orientação a objetos. (GUEDES, 2011). Esta possui
como funções: especificar, construir e documentar artefatos inerentes ao sistema,
desse modo auxilia a esmiuçar todas as suas características. (LARMAN, 2007)
Em 1996 foi disponibilizada a primeira versão da UML, esta originou-se da
união de três métodos de modelagem: método BOOCH, Object Modeling Technique
(OMT) e o Object – Oriented Software Engineering (OOSE), tais métodos eram os
mais utilizados da época. Em 2005 foi lançada a versão 2.0 da UML, atualmente
encontra-se em especificação a versão beta 2.3. (GUEDES, 2011)
A aplicação da UML no desenvolvimento de softwares é independente de
linguagens de programação, pois esta não é direcionada a nenhuma linguagem
especifica, também não implica em dependência a processos de desenvolvimento.
Deve ser aplicada no início do projeto, acompanhada, revisada e atualizada ao longo
de todo o ciclo. (GUEDES, 2011)
O cérebro humano dispõe de alta capacidade de processamento e
armazenamento de informações, entretanto, o projeto de um sistema pode acarretar
mudanças de complexidade e quantidade de informações incessantemente, devido
a isso, é aconselhado o uso da modelagem para facilitar o detalhamento e
arquivamento de todo o processo de desenvolvimento. Com a aplicação da UML
para a criação de modelos é possível minimizar os problemas restringindo a atenção
a cada particularidade por vez. (LARMAN, 2007)
Independente da complexidade de cada sistema, sua documentação é
essencial, isso porque com o avanço das tecnologias de informação, os sistemas
não tendem a manter uma mesma quantidade de recursos por um longo período, ao
82
contrário, estes mudam continuamente. (GUEDES, 2011)
O processo de modelagem influi em todas as atividades relativas ao sistema,
sendo primordial em todo o seu ciclo. Os modelos são construídos com o intuito de
facilitar a comunicação e compreensão da visão de estrutura e comportamento do
projeto a ser elaborado. (LARMAN, 2007)
A prototipagem de um modelo objetiva simplificar o processo, isto é feito por
meio de quatro funções: facilitar a visualização de como pretende-se que o sistema
seja; detalhar sua estrutura e comportamento; agregar informações para auxiliar em
dúvidas e acompanhamento durante o processo de desenvolvimento; documentar
todas as decisões intrínsecas ao ciclo de produção do sistema. (LARMAN, 2007)
Os recursos disponíveis pela UML contemplam desde diagramas com função
de especificar características estruturais do sistema, a especificações que detalhem
seu modelo comportamental. (GUEDES, 2011)
A especificação caso de uso pode ser considerada de caráter narrativo
textual, tem como função detectar e documentar os requisitos que compõe o
sistema. (LARMAN, 2007). Sua aplicação possibilita uma compreensão melhor de
todos os requisitos indispensáveis para o desenvolvimento. (GUEDES, 2011)
Casos de uso são habitualmente elaborados no início da documentação de
um projeto, pois estes possibilitam uma visão geral do sistema, seus usuários, suas
funcionalidades, restrições e especificidades comportamentais. (GUEDES, 2011)
Um caso de uso é formado por um ator e cenário, sendo que o ator simboliza
um usuário a qual é atribuído um papel no sistema. Um cenário é constituído de uma
sequência de ações e interações estabelecidas entre atores e sistema. Todo cenário
aborda uma “história”, esta pode ser um cadastro de usuário, efetuação de compra,
em ambos os cenários os atores seriam os usuários. (LARMAN, 2007)
Nas especificações de caso de uso podem ser declarados fluxos básicos e
fluxos alternativos. Em um fluxo básico, também conhecido como cenário do
caminho correto, é descrito um percurso que realize com sucesso uma ação
esperada tanto pelo usuário quanto pelos envolvidos no desenvolvimento do
software. No fluxo alternativo é especificado um cenário alternativo ao fluxo básico,
este pode, por exemplo, indicar uma falha na efetuação de compra devido à recusa
de crédito. (LARMAN, 2007)
Outro diagrama que compõem o grupo comportamental é o diagrama de
sequência, este é voltado para a modelagem dos eventos de entrada e saída.
83
(LARMAN, 2007) Sua atenção principal é destinada a ordem temporal dos eventos,
pois visa à detecção do agente gerador desse evento, ou seja, o ator que o iniciou,
assim como especifica o ciclo do processo encadeado pelo evento, sua sequência e
término. Isto é feito com uso de chamadas de métodos acionados por mensagens
enviadas entre os objetos (GUEDES, 2011)
O diagrama de atividade é utilizado para ilustrar os fluxos de trabalho relativos
ao sistema. (LARMAN, 2007) Este descreve todos os passos inerentes a alguma
ação especifica do software, pode especificar tanto processos simples, quanto ações
complexas. (GUEDES, 2011)
Dentre os diagramas que especificam a estrutura do sistema, existe o
diagrama de classes, este é destinado a modelar as classes, interfaces e
associações do sistema. (LARMAN, 2007) Detém como função estipular a estrutura
das classes inerentes ao software, especificando seus atributos e métodos, assim
como seus relacionamentos. (GUEDES, 2011)
4.6 ARQUITETURA DE INFORMAÇÃO (AI)
Atualmente uma das principais características da sociedade contemporânea é
a facilidade de prover informação, isso devido principalmente à globalização da web,
uma vez que, esta se expande rapidamente, contendo uma grande quantidade de
sites, que por sua vez contém diferentes tipos de conteúdos. Entretanto, uma
sociedade repleta de informação de fácil acesso, não significa conhecimento.
(AGNER, 2012)
O crescimento sem precedentes do acumulo de informações correntes na
web, gera a formação de uma desorganização compartilhada. Isso porque, nesta
diariamente é disponibilizado um enorme volume de informações, tornando-se uma
tarefa árdua discernir o que é relevante. (AGNER, 2012)
Com a consolidação da web para o uso de publicação e transmissão de
informações, formou-se o simbolismo de que vivemos na sociedade do
conhecimento, o que atenua esse pensamento é a nossa constante recorrência à
informação. Todavia há a necessidade de a transformarmos em um real
conhecimento. (AGNER, 2012)
A problemática da ininterrupta crescente de disponibilização de conteúdo em
sites ocasiona aos usuários uma dificuldade demasiada em seu uso. Posto que, aos
84
poucos a demanda de tempo em pesquisas e leituras de informações pertinentes
aos interessados, prolonga-se mais que a própria absorção do conhecimento contido
nos dados apresentados (MEMORIA, 2013)
Um fator que contribui ao excesso de informações irrelevantes é a facilidade
com a qual atualmente é possível publicar informações na web, seja uma pessoa
física ou jurídica. Desse modo, conteúdos dos mais diversos temas produzidos por
diferentes autores encontram-se disponíveis, o que não acarreta apenas benefícios,
haja vista que a informação publicada pode não ser verídica ou relevante
(CUSTÓDIO; SILVA, 2009)
A popularização da web como instrumento de consulta e comunicação para
uso pessoal, acadêmico e profissional, indiretamente impôs a necessidade de as
empresas também estarem online ao alcance de seus clientes. Pois com isso estas
podem estabelecer e manter um vínculo com seu público alvo. (SANTOS; SILVA,
2013)
O problema mais atenuante às empresas ao vincularem conteúdos em sites
consiste na transformação de dados e informações em mensagens claras o
suficiente para propiciar uma fácil e rápida assimilação. Este pode ser atribuído ao
egocentrismo de algumas empresas que insistem em focar suas convicções e
normas internas, remetendo a segundo plano as possíveis vontades de seus
clientes. (AGNER, 2012)
Os interessados em publicarem conteúdos na web não necessitam apenas de
conhecimentos técnicos, visto que, estes não são suficientes para a concepção de
um site satisfatório do ponto de vista de seus usuários. Faz-se fundamental que
seus autores concentrem-se nas informações referentes à mensagem que o site
quer comunicar aos seus visitantes. (MARTINEZ, 2003)
O sucesso de um site ou sistema de informação é atribuído a qualidade de
seu conteúdo e a praticidade com a qual este é manuseado, sendo assim é
essencial que seus dados sejam mais que informações, que formem mensagens,
uma conversa com seus usuários. (SANTOS; SILVA, 2013)
Com o avanço da TI a dificuldade de controlar e emitir informações de um
modo adequado é agravado. Dado que, a web em seus primórdios era simples,
possibilitava a aplicação de poucos recursos, mantinha uma relação mais estreita
aos meios de comunicação impressa, pois não existiam páginas dinâmicas de
comunicação multidirecional com o usuário, ao contrário, somente o autor transmitia
85
a informação, ao visitante era reservado apenas o papel de receptor. (FERRERA,
2010)
A web atual implica a autores e desenvolvedores de conteúdo a problemática
de apresentar tantas informações em telas relativamente pequenas, ainda mais se
pensarmos na velocidade com a qual o uso de dispositivos móveis para acesso
virtual se populariza. (MEMORIA, 2013)
De acordo com Ferrera (2010), para organizar o incessante volume de
informações despejados na web foi concebida a AI, esta é voltada para o
planejamento e organização das páginas dos sites. Proposta por Wurman foi
elaborada com o intuito de erradicar a forma desestruturada e excessiva de
disponibilizar informação. (FERREIRA; REIS, 2008)
A AI consiste no mapeamento das informações contidas nas páginas dos
sites, de modo que estas sejam estruturadas com dicas e direcionamentos que
auxiliem os usuários a traçarem seus próprios percursos ao conhecimento. (AGNER,
2012)
O principal objetivo da AI é organizar sites para que estes sejam claros o
suficiente para seus usuários, desse modo tornar de fácil percepção as informações
contidas nas páginas, para assim o visitante encontrar com maior agilidade e êxito o
que procura. Sendo assim, foca na necessidade de equilibrar usabilidade e estética
visando conceber que as informações sejam mais acessíveis. (AGNER, 2012)
Ao propiciar recursos mais acessíveis, os autores dos sites possibilitam que
as informações sejam de fácil acesso a usuários com algum tipo de deficiência, isto
porque com o conteúdo melhor organizado, ferramentas de tecnologia assistiva
podem auxiliar mais satisfatoriamente seus usuários durante a navegação.
Figura 4.2 – Processo de inclusão por meio da AI Fonte: SANTOS; SILVA, 2013, p. 8.
86
A figura 4.2 ilustra a relação da AI com a acessibilidade, usabilidade e
usuários, desse modo estabelecendo um processo de inclusão. Com isso a AI não
só contribui para uma melhor varredura de conteúdo, como também torna o
ambiente digital mais inclusivo. (SANTOS; SILVA, 2013)
O planejamento de conteúdo fundamentado por uso da AI possibilita mais
comodidade aos usuários, deixa-os mais confiantes durante a navegação pelas
páginas dos sites, provoca a sensação de que podem não só encontrar as
informações que procuram, como também os persuade a retornarem em futuras
buscas por novas informações. (NIELSEN; LORANGER, 2007)
Por outro lado, um site elaborado sem as diretrizes e estudos da AI
normalmente é mais inacessível a seus visitantes. Posto que, está é centrada na
compreensão do comportamento e necessidades de seus usuários, objetiva
simplificar a navegação pelos sites, de modo que seja gasto mais tempo adquirindo
conhecimento, minimizando longas buscas por informações de fácil leitura e
conteúdo relevante. (SANTOS; SILVA, 2013)
É frequente a não aplicação da AI em sites projetados rapidamente sem
prévio planejamento, todavia isto implica na criação de páginas mal estruturadas,
que ao invés de satisfazer as expectativas de seus visitantes acabam gerando
incomodo e repulsa ao site, devido a dificuldade imposta aos usuários durante a
busca e leitura de informações. Isto normalmente prossegue com sua saída do site.
(NIELSEN; LORANGER, 2007)
Os usuários que não encontrarem as informações objetos de suas pesquisas
tendem a pensar que estas não estejam disponíveis no site em questão,
independente se este divulgue que possua as informações. Por isso é essencial que
as páginas sejam projetadas com o intuito de salientar no momento certo cada
conteúdo, por sua vez, isto é possível caso sua elaboração seja centrada nas
expectativas de seu público. (NIELSEN; LORANGER, 2007)
O principal objetivo da AI é possibilitar a projeção de informações contidas em
páginas que deem mecanismos a seus usuários para que adquirem informações e
as processem em conhecimento. (AGNER, 2012)
Não existe um modelo de AI padrão para todos os sites, isso porque cada um
possui propósitos específicos contendo conteúdos diferentes uns dos outros, exceto
sites em que objetivam o mesmo nicho de mercado. Portanto, a aplicação da AI
deve ser feita mesclando as características da empresa e seu público alvo, de modo
87
que seja baseada nas tarefas e modo de pensar do usuário. (NIELSEN;
LORANGER, 2007)
O design do site e suas páginas deve ser produzido com foco na
comunicação do produto, na informação que o site tem a oferecer a seu público,
sendo assim, este essencialmente deve ser projetado influenciado pela linguagem
mental de seus usuários. Ao fazer uso dessa projeção do fluxo de pensamento dos
usuários, os autores tendem a abdicarem de um antigo e déficit costume de
desenvolver conteúdos centrados em si próprios, empresa e funcionalidades, para
um site centrado em seu usuário. Entretanto, para isso é fundamental que os
autores conheçam seu público e suas vontades. (AGNER, 2012)
Para um conhecimento adequado das expectativas dos usuários em relação
aos sites, é primordial a realização de estudos que analisem o comportamento e o
modo do pensamento humano. Dentre estes estudos a AI faz uso da psicologia,
utilizando como objeto de pesquisa a neurolinguística a fim de compreender o modo
de memorização do cérebro humano. (FERRERA, 2010)
De acordo com Atkinson e Shiffrin apud Ferrera 2010, são três os tipos de
memória:
Memória sensorial: está é responsável por nossa percepção de ambiente e
indivíduos, entretanto é esquecida em pouquíssimos segundos. Apesar de
ser extremamente curta possui como função ser um estágio inicial da
memória, caso algo ao redor chame a atenção do indivíduo a memória é
armazenada e enviada para outro estágio, do contrário, se algo não o atrair a
percepção é descartada.
Memória de curto prazo: esta recebe as informações oriundas da memória
sensorial, contudo também é limitada, nesta as informações são mantidas de
15 a 20 segundos. Assim como na memória sensorial, se o indivíduo
mantiver interesse em alguma informação, esta é armazenada e enviada ao
último estágio da memória.
Memória de longo prazo: a informação ao atingir o último estágio da memória
tende a ser fixada, um fator que facilita esta fixação é a assimilação de tal
informação ao que já é de conhecimento do indivíduo.
Com um estudo adequado do processo de memorização do ser humano é
perceptível à necessidade de tornar toda informação suficientemente atraente e
compreensível para que este possa absorvê-la. (FERRERA, 2010)
88
O processo de navegação dos usuários por sites pode ser facilmente
compreendido se analisado junto aos estágios da memória, isso porque um design
que não seja atrativo ou organizado tende a não prender a atenção do usuário,
consequentemente este o abandona. Entretanto, um site com informações
devidamente organizadas, que facilite a percepção dos conteúdos disponíveis
provavelmente fixará a atenção do usuário, sendo assim este o memorizará como
uma boa fonte de informações. (FERRERA, 2010)
A falha na concepção da organização dos recursos dos sites tem sido a não
aplicação de modelos que se assemelhem com o pensamento humano, isso
acontece em razão de muitos autores de conteúdo disponibilizarem os sites como
sendo listas de funcionalidades, quando deveriam estabelecer uma interação do
conteúdo com o usuário. (AGNER, 2012)
Uma interação eficaz do usuário com o site só acontece quando este é
estruturado visando um mapeamento cognitivo, que por sua vez consiste na
representação mental correlato a um mapa físico. Isso porque a navegação em sites
decorre de uma locomoção por espaços cognitivos, é importante ater-se ao fato de
que os usuários não apenas leem as informações, mas sim interagem com estas,
em um processo semelhante ao espaço físico, onde os indivíduos interagem com o
ambiente e outros indivíduos que os cercam. (AGNER, 2012)
Ao projetarmos sites não devemos conceber ícones e funcionalidades, mas
sim experiência, pois somente assim o conteúdo será compreendido e melhor
aproveitado transformando-se em conhecimento. (AGNER, 2012)
4.7 GESTALT
A capacidade da inteligência humana é atribuída a eficiência de distinguir
padrões, sendo o sistema visual o principal responsável por essa detecção. Desse
modo é caracterizada a importância de conceber representações visuais que
transformem dados em formas visuais características a capacidade de percepção
humana. (WARE, 2003 apud BARBOSA; SILVA, 2010)
De acordo com Barbosa e Silva (2010) a psicologia Gestalt foi fundada em
1912. Esta é classificada como a psicologia da forma e tem por objetivo analisar o
processo das formas, suas configurações e como estas são refletidas na percepção
humana. Conceitua que a forma vista como um todo é maior que a soma das partes
89
analisadas individualmente. (IEIRI; COLE, 2011)
O campo de estudo da Gestalt na psicologia foca a relação do homem com as
formas e o ambiente que o cerca, como este percebe o que há ao seu redor. Analisa
todos os elementos como um todo, ou seja, uma forma única, a fim de averiguar
suas influências no homem. (ZEMEL, 2008a)
A informática nas áreas que contemplam o processo de criação de interfaces
faz uso dos estudos da Gestalt com o intuito de elaborar elementos visuais que
sejam de fácil percepção, para que assim sites e sistemas consigam estabelecer
uma melhor comunicação com o usuário. (ZEMEL, 2008a)
Uma boa compreensão e aplicação dos estudos da Gestalt possibilita a
concepção de formas visuais salientadas em equilíbrio, clareza e harmonia, fatores
estes intrínsecos a qualquer elemento que dependa da percepção visual para seu
entendimento. (WACHOWICZ; ARBIGAUS, 2003)
A aplicação da Gestalt na criação de elementos gráficos é fundamentada em
leis, sendo que estas possuem características próprias, com objetivos distintos,
entretanto, complementares. (IEIRI; COLE, 2011)
4.7.1 Lei da Proximidade
O princípio da proximidade fundamenta que quando elementos estão
posicionados próximos uns aos outros constituem uma única forma, aparentando
formarem uma unidade e não um grupo de unidades dispersas. Sendo assim, o
indivíduo não distingue os elementos como unitários independentes, mas sim os
enxerga como dependentes ou ligados. (ZEMEL, 2008b)
Na concepção de layouts de páginas web a aplicação da proximidade é feita
agrupando informações similares, isto é bastante aplicado nas áreas destinadas a
login de usuário. Pois nestes normalmente são disponibilizados campos reservados
ao login, link direcionado a registro, assim como links para recuperação de senha.
Todos costumam ser inseridos em um mesmo espaço tendo um retângulo que os
cerca, com isso inibem os usuários a perceberem todas as informações como
unitárias, externando a sensação de um grupo de informações. (ZEMEL, 2008b)
A estruturação de áreas com informações próximas umas das outras facilita a
percepção dos usuários, pois estes costumeiramente tendem a pensar que
informações relacionadas estejam disponíveis em um mesmo local. (NIELSEN;
90
LORANGER, 2007)
4.7.2 Lei da Continuidade
O princípio da continuidade também chamado de alinhamento denota a
importância de toda representação visual ser formada por elementos que possuam
algum tipo de ligação entre si. (ZEMEL, 2008c)
O alinhamento de elementos conectados é empregado fazendo-se uso de
formas que explicitem se completarem. Dessa forma é transmitida ao usuário a ideia
de que elementos ainda que distantes possuam algo em comum. (IEIRI; COLE,
2011)
Conforme Barbosa e Silva (2010), formas construídas com traços contínuos
atingem a percepção de forma mais instantânea se comparada a traços incontínuos,
ou seja, formas que mudam de direção abruptamente.
Elementos visuais inter-relacionados transparecem organização e clareza
visual aos usuários, por conseguinte a mensagem é melhor interpretada. Pois ainda
que informações estejam distantes umas das outras, apresentam-se organizadas em
um mesmo conceito. (ZEMEL, 2008c)
O conceito de continuidade é bastante aplicado em cabeçalhos de sites,
nestes normalmente a logomarca é posicionada no canto esquerdo superior, do lado
oposto é disponibilizado um campo de busca, com isso ambos são ajustados em
uma linha reta. Dessa forma o cabeçalho se apresenta mais atrativo ao usuário, pois
as informações são exibidas de forma simétrica, como também indica ao usuário
que a busca destina-se ao conteúdo de todo o site, uma vez que o mecanismo de
pesquisa está localizado a uma hierarquia próxima a logomarca.
4.7.3 Lei da Semelhança
Conforme Ieiri e Cole (2011), a lei da semelhança estabelece que elementos
que possuam características similares sejam agrupados. A similaridade pode existir
por fator de cor, tamanho ou forma. Objetos similares naturalmente são percebidos
como um grupo. (BARBOSA; SILVA, 2010)
O princípio de similaridade é aplicado com frequência em homepages de
portais de notícias, nestes são associadas cores a cada tipo de matéria, podendo
91
ser utilizada determinada cor para chamadas de textos referentes a esportes e outro
tipo de cor para manchetes de entretenimento. Com isso visitantes assíduos de um
portal que utilize este princípio percebem rapidamente a que grupo de notícias
determinada matéria pertence. (IEIRI; COLE, 2011)
4.7.4 Lei da Experiência Passada
O princípio da experiência passada também conhecido como princípio da
aprendizagem baseia-se nas experiências vivenciadas pelos indivíduos, e como
estas afetam ou contribuem para sua percepção e interpretação. ( ZEMEL, 2008d)
A lei da experiência passada possui caráter mais subjetivo se comparada às
outras formadas pela Gestalt, visto que cada indivíduo possui sua vivência, assim
como as relaciona de modo particular, isso porque uma experiência comum a duas
pessoas pode ocasionar significados distintos. (ZEMEL, 2008d)
A aplicação da aprendizagem é feita por meio de associações que visam
estimular a percepção dos usuários, isto ocorre com a inserção de elementos visuais
inerentes a vida física. Estas associações tendem a facilitar o reconhecimento e
interpretação, pois constituem uma interação humano-computador semelhante a
interações dos indivíduos com objetos físicos nos ambientes. (ZEMEL, 2008d)
Homepages de sites de restaurante podem beneficiar-se de associações que
estimulem o apetite de seus visitantes. Isto pode ser feito inserindo imagens de
talheres, pratos e pessoas à mesa se alimentando.
4.7.5 Lei de Fechamento
O princípio de fechamento formula a tese de que a mente humana tende a
perceber com clareza objetos e formas que possuam contornos fechados, quando o
mecanismo visual detecta formas incompletas, ou seja, que não possuem total
contorno, a mente inclina-se a completá-las. (BARBOSA; SILVA, 2010)
Em páginas web na concepção do layout é possível beneficiar-se da
percepção de fechamento, disponibilizando grupos de informações em blocos, isso
porque desse modo ficará claro para o usuário onde começa e termina cada
conteúdo. (IEIRI; COLE, 2011)
92
4.8 HTML
A linguagem de marcação HTML tem como função marcar a inserção de todo
conteúdo referente a uma página web, sendo assim, determina quais informações
serão apresentadas, sua principal característica é interligar fragmentos e páginas.
(SILVA, 2011) Esta linguagem é responsável pela organização do conteúdo, para
que este seja hierarquizado de forma não linear, ou seja, sua navegação deve ser
independente de direção, desse modo, o usuário pode navegar por qualquer área do
site, sem a necessidade de percorrer inúmeras páginas para somente
posteriormente acessar a de seu interesse. (EIS; FERREIRA, 2012)
A primeira versão da HTML foi criada por Tim Berners-Lee, esta se
popularizou nos anos 90 junto a popularização do navegador Mosaic. Por
conseguinte, a linguagem passou a ser bastante aplicada por desenvolvedores e
fabricantes de ferramentas voltadas para web. Entretanto, apenas em 1997 foi
adotada como padrão. (EIS; FERREIRA, 2012)
4.8.1 HTML5
Em determinado período do avanço da web, o W3C decidiu descontinuar a
linguagem HTML, ou seja, o suporte a esta seria mantido, entretanto não seriam
desenvolvidas novas versões. Esta iniciativa visava favorecer a linguagem XHTML,
a qual passaria a ser o principal padrão sugerido pelo consórcio. (EIS; FERREIRA,
2012)
No ano de 2004, algumas empresas descontentes com a falta de
continuidade do HTML se uniram com o objetivo de formular uma nova versão da
linguagem. Desta iniciativa originou-se o grupo WHATWG, este composto pela
Apple, Opera e Mozilla. (EIS; FERREIRA, 2012)
Ao decorrer do projeto da nova versão para a HTML, o W3C se interessou
pelas formulações propostas. Dessa forma, em 2006 o consórcio passou a ser
colaborador da iniciativa. Por consequência, a pesquisa de aprimoramento da
XHTML foi encerrada em 2009. (EIS; FERREIRA, 2012)
As versões anteriores da HTML não possibilitavam a elaboração de uma
marcação de código semântico, isso porque toda a estrutura dos blocos de conteúdo
eram aplicados pela tag div. Isto acarretava no uso excessivo de ids, pois não exista
93
um outro modo de identificar as áreas do conteúdo. Neste modelo, todo bloco, seja
ele destinado a cabeçalho ou conteúdo principal eram marcados na tag div. (EIS;
FERREIRA)
A HTML5 trouxe significado semântico à elaboração de marcação do
conteúdo. Com esta é possível identificar as áreas da página, sendo cada uma delas
apresentadas por uma tag especifica, dentre as quais:
Header: destinada a inserção do cabeçalho da página;
Nav: para aplicação dos links de navegação do site;
Section: sessões da página;
Aside: barra de navegação direcionada a conteúdo secundário, aplicável as
propagandas contidas nas páginas;
Article: nesta é indicado o artigo da página, ou seja, o conteúdo principal;
Footer: o rodapé da página. (SILVA; 2011)
Os avanços da HTML5 não somente proporcionaram significado semântico,
mas também facilitaram a criação das páginas. Visto que, algumas informações
obrigatórias foram resumidas na atual versão da linguagem. (EIS; FERREIRA, 2012)
O primeiro elemento que compõem uma página web é o Doctype, este é o
responsável por indicar ao browser o tipo de documento a ser carregado. Existe um
Doctype referente a cada versão da HTML, desse modo, assim que este é
identificado pelo navegador é detectada a versão da linguagem aplicada ao site.
(SILVA, 2011)
Exemplo de Doctype característico a HTML4:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EM”
http://www.w3.org/TR/html4/stic.dtd>
Exemplo de Doctype característico a HTML5:
<! DOCTYPE HTML>
Durante a concepção de uma página web, é necessário inserir informações
que indiquem ao navegador a tabela de caracteres utilizada como padrão no site.
Esta é informada no corpo da tag head. (EIS; FERREIRA, 2012)
94
Exemplo de informação da tabela de caractere na versão HTML4:
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8”>
</head>
Exemplo de informação da tabela de caractere na versão HTML5:
<head>
<meta charset=”utf-8”>
</head>
A linguagem HTML5, assim como propiciou facilidade e organização na
estrutura das páginas web, também aprimorou o desenvolvimento de formulários, de
modo que estes sejam mais ágeis nas respostas às interações e mais específicos a
cada tipo de informação inserida. (SILVA, 2011)
Os formulários estão presentes em toda a web, atualmente se caracteriza por
ser uma das principais formas de interação entre o usuário e o site. Todavia, a
disponibilização de formulários requer cuidados em relação à veracidade e
segurança das informações. (SILVA, 2011)
Atualmente é possível realizar a validação de alguns campos de entrada dos
formulários sem a necessidade de arquivos JavaScript. Isto porque foram
desenvolvidos novos elementos para linguagem HTML, de modo que passou a ser
possível a aplicação de validações client-side sem o uso de scripts. (SILVA, 2011)
Em decorrência da possibilidade de validações via HTML, as interações entre
usuário e formulário tendem a ficarem mais rápidas e intuitivas. Posto que, os
navegadores não precisarão renderizar scripts destinados a esta tarefa.
Dentre os novos atributos referentes a formulários, destacam-se:
placeholder: possibilita a transmissão de dicas características ao campo a ser
preenchido;
required: torna o preenchimento obrigatório;
pattern: propicia a elaboração de expressões regulares, com isso possibilita a
criação de modelos de preenchimento;
95
4.9 CSS
A CSS é a responsável pela estilização do conteúdo marcado por HTML,
nesta é possível aplicar desde formatações mais simples as mais complexas. Com
isso, qualquer conteúdo que faça uso de marcação HTML pode ser aplicado
instruções CSS. (EIS; FERREIRA, 2012)
A CSS foi criada com o objetivo de facilitar a criação de páginas web, visando
à importância de desenvolver em camadas. Neste processo de desenvolvimento em
camadas, o HTML é encarregado apenas de marcação da informação, enquanto a
CSS tem como função formatá-la. (SILVA, 2012)
Em 1994 foi elaborada a primeira proposta da instauração da CSS, antes
disso pensava-se que os navegadores que deveriam ficar a cargo da formatação de
exibição do conteúdo. Nesta época os recursos de estilização eram mínimos, pois só
eram realizáveis formatações de tipos de fontes e cores. Entretanto, apesar dessa
sugestão de uma linguagem exclusivamente para a formatação, apenas em 1996 o
W3C a tornou recomendação para o processo de desenvolvimento web. (SILVA,
2012)
O processo de formatação é feito com a inserção de regras CSS, uma regra
CSS é a menor fração de código capaz de executar mudanças na exibição de
informações. Esta é constituída de um seletor, sendo que este indica qual elemento
é o designado para a estilização, ou seja, o que estiver como seletor na regra será o
alvo da transformação. A outra parte da regra é classificada como declaração, esta
por sua vez é subdividida em duas partes, onde a primeira indica uma propriedade e
a segunda um valor destinado a esta propriedade, A figura 4.3 ilustra a composição
da regra. (SILVA, 2012)
Figura 4.3 – Regra CSS Fonte: SILVA, 2012, pg.26.
Uma única regra CSS pode conter inúmeras declarações, sendo assim um
bloco destinado a conteúdo pode possuir a seguinte formatação:
96
#conteudo{
width: 70%;
height: 40%;
border: 2px #f00 solid;
}
Na regra exemplificada o alvo da transformação seria uma div identificada
pelo id conteúdo, ou seja, este exerce o papel de seletor da regra, nesta estão
sendo declarados: largura, altura e borda, sendo width, height e border as
propriedades seguidos por seus valores respectivos, é importante ressaltar que um
valor pode ser uma quantificação ou qualificação. (SILVA, 2012)
A aplicação de estilização por CSS não é feita apenas com o intuito de criar
páginas mais atraentes com designs mais sofisticados, isso porque esta linguagem
de formatação é fundamental para a concepção de páginas inerentes a usabilidade
e acessibilidade. (EIS; FERREIRA, 2012)
Uma regra CSS pode contribuir com a usabilidade destacando informações
relevantes e auxiliando na arquitetura de informação, pois os conteúdos podem ser
formatados de modo que cada informação tenha sua própria hierarquia e forma. Isto
pode ser feito aplicando determinada cor e formato a menus, assim como tornando
títulos e palavras chave mais destacados em relação ao restante do texto.
A acessibilidade pode ser auxiliada com a inserção de regras que possuam
declarações que estabeleçam um contraste entre a cor de fundo de um conteúdo
com a cor da fonte da informação. Outra contribuição consiste na organização de
dados a serem preenchidos em formulários, pois campos de preenchimento
obrigatório podem ser indicados por cores que simbolizem avisos, assim como todos
os campos podem ser divididos em grupos para melhor reconhecimento dos dados a
serem preenchidos, isto é possível com a aplicação da tag fieldset, neste caso a
função do CSS seria indicar seu formato e cor.
4.9.1 CSS3
CSS3 é a atual versão da folha de estilos, nesta os recursos foram
extensamente aprimorados, sendo otimizado o processo de formatação de páginas
web, visto que foi atenuado o uso excessivo de imagens destinadas exclusivamente
97
a detalhes gráficos, dessa forma foram ajustadas técnicas voltadas para SEO,
usabilidade e acessibilidade, pois com os novos recursos de formatação, cada vez
mais as páginas tendem a ter apenas informações textuais e imagens referentes ao
conteúdo, estes devidamente marcados por tags HTML. (EIS; FERREIRA, 2012)
A atual versão da CSS, diferentemente das anteriores foi lançada sem estar
completa, pois esta ainda está em processo de desenvolvimento e testes para
tornar-se recomendada. Todavia, o W3C, dividiu a versão em módulos, sendo assim
cada módulo será disponibilizado de forma independente, ou seja, assim que
determinado módulo é finalizado prontamente este é liberado, com isso o prazo para
recomendação da versão CSS3 é indeterminado. (SILVA, 2012)
Dentre os novos recursos oriundos da atual versão destaca-se a regra @font-
face esta tem por objetivo extinguir o uso de imagens para a substituição de textos,
técnica bastante aplicada para a produção de páginas contendo informações
textuais com fontes diferentes, habitualmente não encontradas nos sistemas
operacionais de usuários. (EIS; FERREIRA, 2012)
Normalmente os designers para não abdicarem de um layout mais criativo,
tendem a gerar imagens com texto e inseri-las nas páginas em detrimento de
informações inseridas por tags particulares a produção textual. No entanto, esta
prática afeta drasticamente a acessibilidade, isso porque leitores de tela não
interpretam imagens, com isso também é prejudicada a usabilidade, pois quanto
mais acessível, mais usável um site é. Além disso, também é depreciado o SEO,
visto que os robôs de busca assim como leitores de tela não interpretam imagens.
A regra @font-face funciona de modo que qualquer tipo de fonte pode ser
aplicada na formatação de uma página, sem atribuir preocupação de compatibilidade
a equipe de desenvolvimento em relação ao sistema operacional do usuário, isso
porque a técnica possibilita a importação de fontes nas folhas de estilo. Desse modo
assim que a página é carregada pelo navegador do usuário, caso este não tenha a
fonte em questão, está é exibida normalmente, pois junto as demais regras de
exibição contidas nas folhas de estilo também são carregadas as fontes inexistentes
no sistema. (EIS; FERREIRA, 2012)
É comum designers durante a concepção de layouts inserirem imagens para
criarem efeitos de contraponto de cores, apesar desta técnica tornar as páginas
mais adaptáveis as cores que realcem a marca, a usabilidade é danificada. Isso
porque o uso excessivo de imagens meramente decorativas aumenta o peso do
98
arquivo CSS, consequentemente é prolongado o tempo de download das páginas.
Um dos novos recursos providos pela CSS3 é a possibilidade de manipulação
de cores a fim de criar contrapontos sem a necessidade de imagens, pois o efeito
gradiente possibilita a inserção de cores de modo que sejam indicados intervalos
para início e fim de cada cor. Este efeito é aplicado na propriedade background.
(EIS; FERREIRA, 2012)
A aplicação de sombras em formas ou textos é comum em qualquer meio de
representação visual, seja impresso ou em mídias digitais, na web isto acontecia
com o auxilio de softwares para edição de imagens, pois tornar textos ou blocos de
conteúdo com efeitos de sombra só era possível com a inserção de imagens
previamente tratadas com a aplicação de filtros de sombreamento.
Uma nova propriedade da CSS3 permite a aplicação de sombras a textos e
contêineres de conteúdo, com isso, assim como a @font-face, esta também contribui
com a extinção da prática de inserção de imagens como textos. A propriedade text-
shadow é destinada ao efeito de sombreamento em textos, enquanto a box-shadow
é voltada para sombras em elementos. (EIS; FERREIRA, 2012)
Em sites que seja necessário uma apresentação de páginas mais estilizadas
com mescla de cores e imagens de fundo, é comum a criação de divs em HTML sem
atribuição semântica, isso porque para conceber tais mesclas pode ser criada uma
div para determinada imagem de fundo, enquanto em outra div é aplicada uma
formatação de cor, sendo que pode ocorrer de ambas não possuírem informações,
ou seja, terem sido criadas apenas para uso decorativo.
A partir do surgimento da CSS3 tornou-se possível criar diversos backgrounds
sem a necessidade de criar divs extras, pois a propriedade background deixou de
permitir a atribuição de um único valor, agora é cabível a inserção de múltiplos
valores, sejam diversas imagens, ou mescla de imagens e cores, sendo que é
realizável a indicação de qual parte da div cada valor deve formatar. (EIS;
FERREIRA, 2012)
Em alguns layouts de páginas pode haver a necessidade de apresentar
elementos com bordas arredondadas, esta prática com as versões anteriores da
CSS só era realizável fazendo-se uso de imagens com funções meramente
decorativas.
Na nova versão da CSS foi incluída a propriedade border-radius, esta é
responsável por arredondar bordas, sua aplicação permite especificar quanto cada
99
superfície da borda deve ser inclinada, podendo ser atribuídos valores diferentes
para cada lado do elemento, assim como as partes inferiores e superiores. (EIS;
FERREIRA, 2012)
Apesar dos avanços obtidos com a mais recente versão da CSS, é de
extrema importância que seus novos recursos sejam aplicados com cautela e com o
acompanhamento de testes, pois estes funcionam apenas em navegadores
modernos. Dito isto, é de responsabilidade dos envolvidos no desenvolvimento das
páginas terem a preocupação de fornecerem suporte a usuários que possuam
navegadores antigos, isto pode ser realizado com a aplicação de testes nas páginas
que direcionem arquivos CSS específicos aos recursos que cada navegador detém.
(SILVA, 2012)
4.10 JAVASCRIPT
A linguagem JavaScript foi concebida com o intuito de possibilitar
interatividade às páginas web, a sua criação é derivada de uma parceria entre as
empresas Netscape e Sun Microsystems, sendo Brendan Eich o responsável por
sua concepção. A primeira versão da linguagem ocorreu em 1995, em março do ano
seguinte, o extinto navegador Netscape Navigator 2.0 implementou suporte a
linguagem, neste período este navegador dominava o mercado de browsers.
(SILVA, 2010)
A elaboração da JavaScript é alicerceada em uma mescla de conceitos
oriundos das linguagens C e Self. (REMOALDO, 2008) A aplicação desta é
direcionada ao desenvolvimento client-side, ou seja, sua implementação é destinada
as ações visíveis ao usuário. Dessa forma, a execução de scripts necessita de
suporte por parte do navegador utilizado durante a navegação do usuário.
Atualmente todos os principais navegadores possuem um interpretador de
JavaScript. (SILVA, 2010)
O comportamento da navegação do usuário pode ser toda manipulável por
uso de scripts, sendo possível: interferências nos aspectos visuais das páginas,
ocorrência de pop-ups, mensagens de alerta e avisos, assim como, alterações de
dimensões do navegador. (SILVA, 2010)
O desenvolvimento front-end encontra como principal problema em relação a
desempenho, a execução de JavaScript, este dependendo do modo ao qual seja
100
aplicado pode prejudicar a usabilidade do usuário. Isso porque alguns scripts podem
bloquear a renderização da página, ou seja, enquanto o script não terminar de ser
interpretado, nenhuma outra informação é carregada. (ZAKAS, 2010)
O processo de espera nas renderizações das páginas é decorrente do modo
de funcionamento dos atuais navegadores, pois em sua maioria, estes mantêm
apenas um fluxo de funcionamento que é orientado tanto as atualizações da
interface, quanto para a interpretação e execução de scripts. Por conseguinte,
enquanto determinado elemento da página é renderizado, outro é mantido em
espera. (SILVA, 2010)
A forma de inserção de scripts não difere em sua interferência na
renderização, pois assim que um script é detectado, seja ele inserido por arquivo
externo ou transcrito na página, o carregamento dos demais elementos desta não
prossegue enquanto o script não for interpretado. A interrupção do carregamento
ocorre porque não existe uma forma do navegador identificar as alterações
aplicáveis pelo script, esta compreensão somente é possível com o término da
interpretação de todo o script. (ZAKAS, 2010)
Em virtude da importância do desempenho de aplicações web é ressaltada a
atenção ao posicionamento de scripts nas páginas. Presentemente, o W3C orienta
que todo script deve ser inserido no corpo da tag head ou body. É habitual a
realização de inserções na tag head, isso porque as equipes de desenvolvimento
tendem a posicionar chamadas a scripts, folhas de estilo e metatags em um mesmo
trecho da página, com o intuito de facilitar a localização de todas as chamadas e
descrições referente à página em questão. (ZAKAS, 2010)
No entanto, todo conteúdo contido na tag body não é carregável enquanto as
informações presentes na tag head não forem interpretadas, sendo assim, convém
aos responsáveis pela elaboração das páginas inserirem os scripts próximos ao
fechamento da tag body. Visto que, desse modo será obtido ganho de desempenho
no carregamento das páginas, pois quando o primeiro script for localizado, toda a
informação já terá sido apresentada ao usuário. (ZAKAS, 2010)
4.11 JQUERY
Em 2006 foi lançado o primeiro plugin da biblioteca jQuery, este é estruturado
na biblioteca JavaScript. Possui como objetivo simplificar a inserção de conteúdo
101
inteligente em páginas web, ou seja, o comportamento dos elementos das páginas,
esta simplificação é sintetizada em códigos relativamente curtos se comparados a
funções JavaScript que objetivam o mesmo resultado. (SILVA, 2010)
A aplicação do jQuery em páginas web visa auxiliar as etapas de
desenvolvimento, faz isto com a disponibilização de funcionalidades que facilitem
tanto a elaboração do projeto quanto a usabilidade do usuário. Esta biblioteca é
baseada nos padrões web estabelecidos pelo W3C, desse modo prioriza
compatibilidade com todos os sistemas operacionais atualmente disponíveis, assim
como os navegadores, por estar em constante aprimoramento e em adequação aos
padrões web, encontrasse compatível as principais práticas atuais de
desenvolvimento, dentre elas seletores de CSS3. (SILVA, 2010)
O foco da jQuery é prover técnicas que estabeleçam o controle
comportamental sobre os elementos HTML. Por conseguinte é entendível que o
êxito desta biblioteca se deve a sua capacidade e simplicidade com a qual possibilita
a localização e manipulação de marcações HTML. (SILVA, 2010)
O uso da jQuery é feito por meio de seletores CSS, estes são os
responsáveis por localizarem os elementos contidos na marcação HTML. Sua
estrutura é constituída de compatibilidade com outras bibliotecas JavaScript, além
disso é configurável, sendo assim permite atualizações e acréscimo de novas
funcionalidades. (SILVA, 2010)
Um fator interessante da jQuery consiste em sua estrutura não permitir a
inserção de códigos HTML em trechos de script, com isso contribui ao
desenvolvimento em camadas, pois separa a camada inteligente da marcação
HTML. (SILVA, 2010)
A biblioteca jQuery trabalha na árvore DOM dos arquivos, isso porque seu
funcionamento é exercido por buscas a elementos contidos na marcação HTML.
Devido a isso, a execução de um script só é possível após o carregamento completo
do código HTML. (SILVA, 2010)
De acordo com Murphey (2010), os scripts jQuery podem ser inseridos nas
páginas de duas formas, são elas: inline e em arquivo externo.
No modelo de inserção inline o código é aplicado dentro da própria página,
isto é realizado da seguinte forma:
102
<script type=”text/javascript”>
$(document).ready(function(){
$().fontSize({
alvo: ‘#pagina’
});
});
</script>
Caso o modelo de inserção inline seja adotado é orientado que o script seja
aplicado no fim do código HTML, isto garante melhor desempenho aos
carregamentos das páginas, visto que, o script só será acionado após todo o
conteúdo ser indexado pelo navegador, sendo assim a apresentação da página não
será interferida com requisições que não serão utilizadas em sua indexação inicial.
(MURPHEY, 2010)
Conforme Murphey (2010), um arquivo externo pode ser inserido dentro do
trecho de código head ou body da pagina HTML. Esta inserção é feita do seguinte
modo:
<script type=”text/javascript” src=”lib/font_size.js”>
</script>
É aconselhável que seja utilizado o carregamento de arquivos externos, pois
isso garante a reusabilidade, tendo em vista que um mesmo arquivo pode ser
chamado em diversas páginas. (SILVA, 2010)
4.12 USABILIDADE
Assim como na televisão os usuários da web possuem o controle sobre suas
ações, se ao assistir a televisão estes controlam a ação alternando entre os canais
disponíveis. Na web seu controle principal consiste na navegação por links
direcionados a fragmentos ou páginas internas de um mesmo site, além disso,
também podem mudar de um site para outro, decisão semelhante à troca de canais.
Todavia, apesar da semelhança, a web disponibiliza escolhas incalculáveis, tendo
em vista que o número de sites aumenta desenfreadamente a cada dia. (NIELSEN;
103
LORANGER, 2007)
As possibilidades de controle e interação providas pela web faz desta um
meio de comunicação e informação único, isso devido às diversas opções de
conteúdo. Por outro lado, seu vasto conteúdo implica em complexidade maior para
seus usuários, dificuldades estas superiores aos demais meios de comunicação,
pois junto a um horizonte de opções vem uma série de obstáculos. (IEIRI; COLE,
2011)
A informação não é apenas para ser ouvida, vista e lida, mas sim
compreendida. Sendo assim, quanto melhor a qualidade da informação e seu modo
de exibição, mais facilidade terão os interessados em compreenderem suas
mensagens (NIELSEN; LORANGER, 2007)
Conforme Krug (2011), as pessoas ao interagirem com os sites, não se
preocupam em como suas funcionalidades são realizáveis, o que lhes interessa é se
podem usufruí-las e de que modo estas são praticáveis. Exatamente por isso,
segundo Nielsen e Loranger (2007) os autores de conteúdos de sites devem
priorizar a qualidade das interações com os usuários, visando que as informações
sejam facilmente alcançáveis.
Para tornar o uso de sites simplificado é aplicado o conceito de usabilidade,
que de acordo com a norma ISO 9241-11, designa que a usabilidade consiste na
eficiência, agrado com que as pessoas alcançam objetivos específicos em
ambientes característicos. (MARTINEZ, 2003)
O conceito de usabilidade denota que é impreterível que algo tenha bom
funcionamento, para com isso possibilitar que pessoas com diferentes graus de
habilidades e experiência possam fazer uso de um objeto ou conteúdo de modo
satisfatório. (KRUG, 2011)
Uma boa usabilidade implica em qualidade destinada a facilidade de
manuseio, rapidez e habilidade, com a qual indivíduos possam aprender a utilizar
algo. Desse modo, é essencial que o aprendizado seja de fácil memorização e
reconhecimento em novas experiências, pois com isso é atenuada a propensão a
erros. (NIELSEN; LORANGER, 2007)
A usabilidade aplicada com sucesso beneficia o proprietário do site e seus
usuários, isso porque os autores do conteúdo conseguem transmitir com êxito a
informação que possuem, assim como seu público sente-se mais a vontade a
interagir com o site, uma vez que assimilam com facilidade suas funcionalidades e
104
conteúdo. (NIELSEN; LORANGER, 2007)
De acordo com Nielsen e Loranger (2007) com o aperfeiçoamento dos sites
fazendo-se uso da usabilidade, as pessoas menos íntimas às tecnologias são
beneficiadas, sejam estas de baixo grau de instrução ou privadas de acesso. Este
beneficiamento possibilita melhores oportunidades de emprego aos menos
instruídos e idosos, assim como aos com algum tipo de deficiência, visto que o uso
de sites e sistemas de informação tornam-se mais amigáveis e fáceis de utilização.
Com isso é estabelecida uma contribuição à sociedade uma vez que é facilitada a
inclusão.
O conceito de usabilidade só é completo quando aliado a acessibilidade,
tendo em vista que algo complexo confunde usuários de um modo geral,
impossibilita ainda mais os que sofrem de alguma limitação. (KRUG, 2011)
Os principais problemas de uso ocorrentes na web possuem em comum a
falha ou não existência da usabilidade. Sendo encontrada como a maior dificuldade
a percepção e reconhecimento das informações e funcionamento da navegação pelo
excesso de informações. Referente a estas questões é que se apresenta cada vez
mais importante a necessidade de aplicar diretrizes de usabilidade ao longo do
desenvolvimento de sites. (NIELSEN; LORANGER, 2007)
4.12.1 Diretrizes de Usabilidade na Web
As pessoas gostam de atingir resultados sem se esforçarem, na web isto não
é diferente, pelo contrário, está ainda mais implícito, tendo em vista a existência de
diversos sites voltados para um mesmo tipo de conteúdo. Desse modo se algo
apresenta-se minimamente complicado de manusear ou compreender, o usuário não
se aplica em tentar entendê-lo, ao invés disso abandona o site se direcionando a
outro que forneça as mesmas informações de modo mais compreensível.
(NIELSEN; LORANGER, 2007)
O uso da web é repleto de escolhas, com isso qualquer tempo perdido em
uso da compreensão de alguma possibilidade é enfadonho. Por isso é importante
prover a sensação de despreocupação aos usuários, levá-los a não se preocuparem
em como funcionam as escolhas e sim em que resultam, pois somente assim os
visitantes se manterão estimulados a navegarem pelo conteúdo do site. (KRUG,
2011)
105
Segundo Krug (2011) os usuários não costumam ler na íntegra as
informações contidas nas páginas, ao invés disso olham rapidamente as partes que
julgam serem mais interessantes a procura de algo que os atraia. Conclui Nielsen e
Loranger (2007) que é fundamental que cada página justifique sua relevância
quando acessada.
O conceito de usabilidade aplicado à web é fundamentando em diretrizes que
são sintetizadas em três objetivos:
Facilidade de usar: ou seja, conteúdo simplificado e intuitivo, de fácil
compreensão;
Facilidade de aprender: todo elemento da interface deve ser de fácil
reconhecimento;
Atenuar os erros dos usuários: para isso é imprescindível auxiliar os usuários
com mensagens e dicas visuais. (PAGANI, 2011)
Todas as páginas devem ser desenvolvidas com as diretrizes de usabilidade,
sendo ainda mais crucial a formulação de boas homepages, haja vista que a maioria
dos usuários tende a utilizá-las como ponto de partida em suas visitas aos sites.
(NIELSEN; LORANGER, 2007)
Para a concepção de uma homepage satisfatória as informações inseridas
nestas devem transparecer mensagens claras e diretas, e isso só é possível com a
formatação de parágrafos curtos, posto que, os usuários analisam rapidamente os
textos a procura de palavras chave. (NIELSEN; LORANGER, 2007)
Afirmam Nielsen e Loranger (2007) que a homepage tem como objetivo
apresentar aos visitantes o site a qual estes acessarem, destacar os seus pontos
mais representativos, sejam estes de informações ou produtos e, exibir links
direcionados as principais seções. A estrutura e organização devem prover
percepção e reconhecimento dos pontos chave. (KRUG, 2011)
As informações e links da homepage devem ser concisos e autoexplicativos
para que esta apresente seus principais conteúdos de modo claro, fácil de identificar
e sem poluição visual. Assim sendo, é fundamental fornecer dicas visuais sem
ambiguidade, denotar claramente para qual tipo de conteúdo cada um é direcionado.
(KRUG, 2011)
A popularização da web produziu nos usuários algumas expectativas em
relação a padrões de posicionamento dos elementos nas páginas dos sites, uma
destas é a localização de sua logomarca, pois já é prática corrente esta estar
106
localizada no canto superior esquerdo denotando que é o ponto mais alto da
hierarquia formada pelos conteúdos das páginas. (KRUG, 2011)
Durante a navegação pelas páginas internas do site a todo momento é
necessário que seja de fácil reconhecimento a página na qual o usuário se encontra,
a logomarca de identificação do site, assim como um campo destinado a busca, este
por padrão é comumente disponibilizado no canto superior direito de todas as
páginas, pois assim é facilmente perceptível a sua experiência. (NIELSEN;
LORANGER, 2007)
Os menus não devem ter estruturas muito sensíveis, posto que, isto implica
em dificuldade a usuários com limitação de percepção, seja por alguma deficiência
ou fator decorrente da idade. (NIELSEN; LORANGER, 2007)
Todas as páginas devem manter em sua apresentação conteúdos sucintos,
ou seja, textos que sejam diretos, que agilizem a leitura, pois assim como faz parte
dos hábitos dos usuários a não leitura linear das páginas, textos longos implicam no
uso excessivo de barra de rolagem, elemento esse que a maioria dos usuários não
costuma utilizar. (NIELSEN; LORANGER, 2007)
Conforme Nielsen e Loranger (2007) é interessante conceber o design das
páginas provocando três níveis emocionais nos usuários, que são: visceral, este é
provocado pela aparência, tem por característica ser imediatista. Nível
comportamental: é fundamentado na usabilidade de algo, consiste em qual
sentimento é provocado no indivíduo durante a experiência de uso, se este é
agradável. O último nível é denominado reflexivo, que por sua vez possui foco na
forma do indivíduo pensar em relação a algo, se este objeto de análise apresenta
benefícios ou malefícios.
A usabilidade se mostra de caráter comportamental, isto fica nítido mediante o
fato de que ao longo da existência da web não ocorreram grandes mudanças nas
principais diretrizes de usabilidade. Isto ocorre porque os sites são para o uso de
pessoas, ou seja, correspondem ao comportamento e costume de uma época e, o
comportamento humano costuma levar algum tempo para consolidar mudanças
efetivas. (NIELSEN; LORANGER, 2007)
As sensações resultantes da experiência do uso de algo esclarecem a
importância de tornar as páginas usualmente fáceis, isso porque por mais que a
sofisticação e criatividade da interface atraiam, somente uma usabilidade eficaz e
agradável fidelizará seu público. (NIELSEN; LORANGER, 2007)
107
4.13 SEARCH ENGINE OPTIMIZATION (SEO)
Desde os primórdios das civilizações o homem busca estabelecer relações
sociais uns com os outros. Isto porque intuitivamente é de conhecimento que tanto
para a sobrevivência, quanto para uma vida mais cômoda o homem necessita da
busca por novas informações e conhecimentos, que por sua vez, torna-se bem mais
prático e fácil serem adquiridos em trocas de aprendizagem e experiência inerentes
aos relacionamentos sociais dos indivíduos. (OLIVEIRA, 2013)
A busca por informações e conhecimentos faz parte da evolução da
humanidade, na época atual, caracterizada como a era da informação, as buscas
apresentam-se ainda mais indispensáveis para a aquisição de aprendizado sólido.
Em consequência da globalização e intensivo uso de tecnologias de informação é
destacado o comportamento de busca dos indivíduos, estes cada vez mais ávidos
por novas informações vastamente acessíveis na web. (OLIVEIRA, 2013)
O infindável número de conteúdos publicados diariamente na web expõe uma
vastidão de possibilidades, todavia, quanto maior o número de escolhas mais
complicado será alcançar seu objeto de pesquisa. (OLIVEIRA, 2013) Sendo assim,
faz-se importante a utilização de mecanismos de busca que facilitem localizar e
discernir sites com conteúdo relevante dentre a enorme quantidade atualmente
existentes. (ALVAREZ, 2011)
Os primeiros serviços de busca foram concebidos em contrapartida a esta
imposição de filtrar conteúdos da web, no entanto, estes não eram tão eficazes
devido à lentidão das conexões de internet dos usuários. Todavia, com o avanço das
tecnologias e surgimento da banda larga, os serviços de busca também foram
aprimorados e consequentemente se estabeleceram como parte do comportamento
dos internautas. (OLIVEIRA, 2013)
Os sites de busca são basicamente compostos de três mecanismos:
Rastreamento: é voltado a coleta de informações na web;
Indexação: designado a separar todo o conteúdo coletado;
Ranqueamento: as páginas são categorizadas de acordo com sua relevância.
No cenário da crescente de uso de sistemas para pesquisa web, o serviço
que mais se destaca é o provido pela Google, esta desde sua criação mudou
significativamente a forma de uso da web pelos usuários. Isso porque grande parte
de seu público, antes do acesso a qualquer site faz uma pesquisa prévia sobre o
108
tema ou serviço a qual lhe interessa, para somente depois, com os resultados
fornecidos acessarem determinado site. (OLIVEIRA, 2013)
De acordo com IBOPEMEDIA (2011) apud Oliveira (2013), a cada 60
segundos 694.445 buscas são realizadas no Google. No Brasil, mensalmente 41
milhões de pessoas acessam sites de busca. (IBOPEMEDIA, 2011 apud OLIVEIRA,
2013) Destes usuários brasileiros 98% utiliza o Google. (OLIVEIRA, 2013)
Os internautas basicamente realizam três tipos de busca:
Busca navegacional: nesta é digitado o nome de determinada empresa ou
marca a qual o usuário tem interesse;
Busca informacional: é pesquisado um tema genérico;
Busca transacional: é indicada a intenção do usuário, seja comprar, abrir uma
conta em banco, etc. (SOUZA, 2012)
Em função do hábito dos usuários de consultarem sites de pesquisa para
acessarem conteúdo, todos os envolvidos no desenvolvimento de sites devem ater-
se a necessidade de possibilitarem com que suas páginas web sejam facilmente
detectadas por estes sites de busca. Pois com isso, a empresa obterá uma presença
mais ativa na web, visto que, seu conteúdo será classificado como resultado nas
buscas. (ALVAREZ, 2011)
Tornar o site encontrável por buscadores não apenas atrai um maior público,
mas também é obtido um público mais engajado no conteúdo disponibilizado, pois o
usuário originado de links fornecidos por buscadores tende a realmente estar
interessado nas informações oferecidas, posto que, o site foi selecionado entre os
vários resultados inerentes a pesquisa. (SOUZA, 2012)
O processo de desenvolvimento de um site deve conter a aplicação de
técnicas que possibilite uma boa colocação deste em resultados de buscadores. As
páginas de resultados dos sites de pesquisa são nomeadas de Search Engine
Results Page (SERP), para que um site seja exibido entre os seus primeiros
resultados é necessário o uso de técnicas de SEO. (SOUZA, 2012)
4.13.1 Técnicas de SEO
O conceito de SEO consiste na aplicação de técnicas de otimização nos sites,
com o intuito destes adquirirem um bom posicionamento em resultados de
pesquisas de buscadores. (OLIVEIRA, 2013) A otimização é realizada com o
109
emprego de um conjunto de procedimentos, estes por sua vez são divididos em dois
grupos: internos e externos. (OLIVEIRA; et al, 2011)
As diretrizes de SEO internas são destinadas ao conteúdo das páginas, deste
modo, são aprimorados os títulos das URLs, as palavras chaves nos títulos e blocos
de conteúdo. Já as técnicas externas investigam a quantidade de links de outros
sites que interliguem ao site em questão, assim como a audiência que este obtém,
quais os horários de maior acesso, as características do público: sistema
operacional, navegador. (OLIVEIRA; et al, 2011)
A inserção de técnicas de SEO no processo de desenvolvimento exige da
equipe do projeto uma compreensão do público alvo do site, isso porque é primordial
que este seja otimizado visando o interesse do usuário, pois somente assim será
localizado com maior frequência em pesquisas. (OLIVEIRA, 2013) Para isso é
fundamental que os responsáveis pela redação dos textos redijam com atenção ao
vocabulário de seu público. (NIELSEN; LORANGER, 2007)
A marcação HTML do conteúdo deve ser padronizada, ou seja, esta deve ser
aplicada seguindo os padrões e funções a qual cada tag pertence, Desse modo,
toda página deve conter uma tag title, esta é destinada ao título, sendo que cada
página necessita ter um título único. Também é fundamental a inserção da tag
description que tem como função descrever o conteúdo da página. Todo título de
matéria, artigo ou bloco de texto deve ser hierarquizado por tags heading, estas tags
iniciam no h1, que é aplicado ao título principal da página e, termina no h6 que é o
menor nível de heading. (ALVAREZ, 2011)
Para realçar trechos dos textos é utilizado o negrito ou itálico, os buscadores
interpretam que palavras destacadas merecem maior atenção. (OLIVEIRA, 2013) É
importante ressaltar que os buscadores não interpretam imagens, ou seja, só
compreendem texto, fator que contribui à acessibilidade, pois desse modo os
buscadores valorizam sites compostos por páginas que tenham textos relevantes.
(NIELSEN; LORANGER, 2007)
As técnicas de SEO são mais abrangentes que ajustes nas tags utilizadas e
conhecimento do público alvo, no entanto, estes procedimentos são fundamentais
para a concepção de sites que visam um bom posicionamento nos buscadores. O
foco principal da equipe de projeto deve ser criar conteúdo interessante e único, ou
seja, relevante e que tenha particularidade. (OLIVEIRA, 2013)
Os procedimentos de SEO não devem ser aplicados apenas ao longo do
110
desenvolvimento, estes necessitam de constante acompanhamento e ajustes, tendo
em vista que os sites buscadores estão sempre sendo ajustados. (OLIVEIRA; et al,
2011)
4.14 BANCO DE DADOS
Banco de dados é um sistema de arquivos integrados que atende a um
conjunto de dados devidamente relacionados, cujo propósito é criar uma
representação instantânea do estado do mundo real usando coleções de fatos
registrados no momento em que ocorrem. (MACHADO, 2004)
“Cada mudança ocorrida em algum item do banco de dados reflete uma
mudança ocorrida na realidade.” (MACHADO, 2004, p.23) Sendo assim um banco
de dados pode ser modelado a vários níveis de abstração, variando de acordo com
a intenção do modelador, este deve escolher pelo modelo que melhor satisfaça a
situação de uso. Seguindo o modelo que servirá como explicação a um usuário
sobre a organização das informações na base de dados, muito provavelmente não
deve possuir os detalhes sobre uma representação física da operação, desse modo
é importante a utilização de um modelo de representação para cada etapa do
processo de desenvolvimento. (HEUSER, 1998)
O modelo conceitual é o responsável pela primeira fase do projeto de
desenvolvimento do banco de dados, que conforme Machado (2004) tem por
objetivo criar uma descrição em alto nível das informações contidas em uma
realidade com o intuito de representar de forma global o ambiente da situação a ser
resolvida, busca descobrir os principais dados e relacionamentos existentes, sendo
independente de restrições de implementação. Este modelo é representado na
figura 4.4 a qual representa um diagrama Modelo de Entidade e Relacionamento
(MER).
Figura 4.4 – Exemplo de Diagrama MER Fonte: Elaborada pelos autores, 2013.
111
O modelo lógico é uma forma continua do conceitual, exerce como função a
descrição da estrutura do banco de dados na visão do usuário. Este modelo fornece
detalhes a respeito de como o armazenamento interno será realizado, porém não
influencia diretamente na implementação da aplicação no banco, pois resulta apenas
em um esquema lógico de organização dos dados. Nesta etapa da modelagem é
necessário optar pelo tipo de abordagem que será utilizado na aplicação, este pode
ser: hierarquia, rede, relacional ou orientada a objetos. (MACHADO, 2004)
Este modelo é representado na figura 4.5 a qual exibe um Diagrama de
Entidade-Relacionamento (DER).
Figura 4.5 – Exemplo de Diagrama DER Fonte: Elaborado pelos autores, 2013
O modelo físico é gerado a partir do sistema lógico, detêm como função
representar a modelagem física de armazenamento na base de dados. Esta etapa
esmiúça detalhes a respeito das informações de tamanho dos campos, assim como
quais informações devem receber nomenclaturas, etc. (MACHADO, 2004)
A figura 4.6 demonstra um exemplo de modelo físico:
Figura 4.6 – Modelo Físico Fonte: Elaborado pelos autores, 2013
112
4.15 SISTEMA GERENCIADOR DE BANCO DE DADOS (SGBD)
O conceito de SGBD surgiu em meados da década de 70, este é responsável
pela gerencia da base de dados, objetiva facilitar a interação da aplicação junto a
base de dados. Em sua origem, este tipo de sistema era de difícil acesso, isso
devido à complexidade em sua manipulação, assim como o alto valor a qual era
comercializado. Todavia, com o passar do tempo foram surgindo novas tecnologias
para os SGBDs, estas os tornou mais acessíveis e compreensíveis a
programadores, dessa forma, não só foi simplificado seu uso, como também foram
criados sistemas a preços mais baixos, assim como alguns de licença gratuita.
Atualmente os mais populares são: Postgree, Firebird, MySQL, Oracle, SQLServer,
DB2. (MACHADO, 2004)
4.15.1 MySQL Server
O SGBD MySQL Server tem sua origem na Suécia, fora desenvolvido pelo
finlandês Michael Monty Widenius e os suecos David Axmark e Allan Larsson em
meados dos anos 90, quando a MySQL AB, empresa desenvolvedora nascia para o
mundo. Já em 2008 a empresa foi adquirida pela Sun Microsystems pelo valor de 1
bilhão de dólares, que logo após, em abril de 2009 foi adquirida pela Oracle.
(MILANI, 2007)
Em sua atual versão, o MySQL Server 5.6, traz algumas novidades visuais
que visam facilitar sua manipulação, também foi aprimorado o seu gerenciamento,
provendo melhorias em desempenho, escalabilidade, flexibilidade e disponibilidade.
Tais aperfeiçoamentos resultam na otimização de consultas, assim como no suporte
ao particionamento, no modelo de replicação de dados em servidores e no
monitoramento de performance . (BIANCHI, 2011)
4.16. JAVA
A empresa Sun Microsystems é a responsável pela criação da tecnologia
Java. Os estudos em torno desta se iniciaram em 1991, no qual foram investidos
recursos com o intuito de elaborar uma linguagem de programação semelhante ao
funcionamento da C++, a criação ficou a cargo de James Gosling, que inicialmente a
113
batizou de Oak, entretanto, posteriormente descobriu-se que outra linguagem já
utilizava o mesmo nome, por conseguinte, esta foi renomeada para Java. (DEITEL;
DEITEL, 2010)
Em determinado momento, a pesquisa em torno do objetivo de uso da
linguagem sofreu alguns impasses, isso porque os responsáveis por sua elaboração
não souberam ao certo como direcioná-la a comunidade de programação. No
entanto, no mesmo período, ocorreu um marco na história da tecnologia de
informação, pois em 1993 a web iniciou seu processo de popularização que permeia
até os dias atuais. (DEITEL; DEITEL, 2010)
A Sun soube detectar uma oportunidade de crescimento junto à web, devido a
isso, a empresa decidiu centrar seus esforços na nova plataforma que ascendia,
com isso em maio de 1995 ocorreu o lançamento da linguagem Java. Para atrair a
atenção dos responsáveis por criarem conteúdo web, esta passou a produzir
tecnologias que propiciassem dinamismo e interatividade às aplicações
disponibilizadas na plataforma virtual. (DEITEL; DEITEL, 2010)
Durante o período de seu lançamento ao presente momento, a linguagem
Java não somente foi aperfeiçoada, como também expandiu sua área de atuação,
sendo hoje não apenas destinada a programação web, mas também a aplicações
mobile, cartões inteligentes, vídeo games, dentro outros. Atualmente esta não é
caraterizada unicamente como uma linguagem, mas sim pode ser classificada por
ser uma tecnologia. (COSTA, 2008)
O Java pode ser definido em vários contextos, aos quais se integram
formando mais que uma linguagem de programação, dessa forma compõe uma
plataforma de desenvolvimento de software alicerceada no conceito de orientação a
objetos, seguindo as seguintes classificações:
Tecnologia: em virtude da existência de conjuntos compostos por ferramentas
que agregam funcionalidades e métodos voltados ao processo de
desenvolvimento.
Plataforma de desenvolvimento: ambiente que possibilita a concepção e
execução de sistemas computacionais.
Linguagem de programação: consiste em regras sintáticas e semânticas
aplicáveis para a elaboração de softwares. Ou seja, por meio de uma
linguagem os desenvolvedores atribuem às funcionalidades, e seu modo de
funcionamento. (COSTA, 2008)
114
A consolidação da tecnologia Java pode ser atribuída a sua portabilidade,
posto que, esta pode ser inserida em qualquer sistema operacional sem a
necessidade de exaustivos ajustes de código. Isto é possível em virtude de sua
estrutura conter elementos responsáveis pela compilação, interpretação e execução
das implementações inseridas por meio da linguagem. (COSTA, 2008)
A tecnologia Java é portável aos diversos sistemas operacionais existentes
em virtude da Java Virtual Machine (JVM), software responsável pela interpretação
do bytecode, desse modo possibilita a execução de sistemas desenvolvidos em
linguagem Java. É importante ressaltar que cada sistema operacional requer uma
JVM especifica. (COSTA, 2008)
Dentre os elementos que compõe a estrutura Java existe um conjunto de
bibliotecas que contém uma diversidade de funcionalidades prontas para uso, estas
são embutidas no Java Application Programming Interface (API), que visa facilitar o
processo de desenvolvimento, posto que, trechos de código prontos podem ser
aplicados por desenvolvedores. (COSTA, 2008)
O Java para ser executável dispõe de seu próprio ambiente, o Java Runtime
Enviroment (JRE), que por sua vez engloba as funcionalidades da Java API e JVM.
Um software implementado na linguagem Java só é passível de execução com a
JRE instalada no computador servidor da aplicação. (COSTA, 2008)
A comunidade de desenvolvedores Java dispõe de um kit de
desenvolvimento, o Java Development Kit (JDK), a partir da segunda geração Java
este foi renomeado para Software Development Kit (SDK). O SDK é uma plataforma
composta por um conjunto de ferramentas, sendo eles: o compilador javac; o
interpretador java; javadoc gerador de documentação, entre outros. (COSTA, 2008)
A figura 4.7 exemplifica a relação dos elementos que integram a tecnologia
Java:
Figura 4.7 - Elementos da Tecnologia Java
Fonte: COSTA, 2008, p.10.
115
4.16.1 Edições do Java
Em virtude da abrangência de aplicações possíveis por meio da tecnologia
Java, esta é distribuída em edições, que por sua vez são direcionadas a
determinados cenários de uso, sendo eles: desktop, web, mobile, cartões
inteligentes. (ORACLE, 2013)
A distribuição JEE é designada ao desenvolvimento web, esta é aplicável
tanto à rede internet, quanto a redes internas de intranet. Em defluência da incisiva
presença da internet na sociedade contemporânea, a JEE é amplamente utilizada.
(COSTA, 2008)
A estrutura da JEE é composta por camadas, estas são acessíveis por um
uso de um web container. Este modelo de distribuição é composto por pacotes com
código Java, páginas com trechos (X)HTML, dentre outros arquivos característicos
às páginas web. (SAMPAIO, 2011)
A JME é destinada a aplicações com caráter de mobilidade, direcionadas a
dispositivos mobile ou portáteis, dentre os quais: celulares, pagers, palmtops, PDA’s.
(COSTA, 2008)
A edição JSE é voltada ao desenvolvimento desktop, esta distribuição é
integrada a JDK e JRE. (COSTA, 2008)
A edição JavaCard é direcionada a implementação de aplicações executáveis
em cartões inteligentes, estes basicamente utilizados em cartões de banco. Assim
como outros dispositivos que se assemelhem em recurso de memória, tais como:
chips de aparelhos celulares GSM. (COSTA, 2008)
4.16.2 A Linguagem de Programação Java
O acesso à linguagem de programação Java é livre, ou seja, esta é de uso
aberto à comunidade de desenvolvedores. (COSTA, 2008) A sua aplicação é
realizável na estrutura do conceito de orientação a objetos, ao qual é composto por
objetos, atributos e métodos. (DEITEL; DEITEL, 2010) É a partir das interações
entre objetos que ocorrem a execução das funcionalidades dos sistemas
fundamentados em Java. (COSTA, 2008)
Os objetos Java representam entidades referentes à existência externa
computacional, ou seja, pessoas, animais, países, etc. A representação de uma
116
entidade é designada por modelos nomeados de classes, neste contexto uma classe
é especifica a uma entidade, por sua vez, cada classe pode gerar de zero a vários
objetos. (COSTA, 2008)
As pessoas, animais e objetos possuem características. Dessa forma, as
classes também necessitam de representações que as simbolizem, isto é possível
com a aplicação de atributos. (DEITEL; DEITEL, 2010)
As características dos objetos são representadas por atributos, aos quais,
cada atributo se refere a uma característica. De modo que, uma classe carro pode
conter os seguintes atributos: cor, ano, modelo, dentre outros. (DEITEL; DEITEL,
2010)
Os softwares funcionam por meio de interações entre usuário e sistema, na
linguagem Java está relação é estabelecida por métodos. Sendo assim, cada
método é uma ação de comportamento do sistema. (COSTA, 2008)
Por tudo, conclui-se que na linguagem Java, cada entidade é representada
por uma classe, que por sua vez, contém atributos referentes às características da
entidade simbolizada pela classe. A relação de classes com o sistema é
intermediada por métodos, ou seja, estes intermediam todo o comportamento da
classe, sua estrutura é composta por trechos de código com instruções referentes à
ação a qual ele realiza. (DEITEL; DEITEL, 2010)
Um cenário de aplicação da linguagem Java pode ser explanado na ação de
cadastro de cliente em um software. Neste o cliente é representado por uma classe
Cliente, que contém atributos referentes a cada informação preenchida no formulário
de cadastro. A ação de cadastro é executada por meio de um método que
implementa a operação. (DEITEL; DEITEL, 2010)
4.16.3 Servlet
A primeira tecnologia desenvolvida pela Sun Microsystems direcionada a
plataforma web é o servlet, sua especificação foi elaborada em 1997. Neste período
a distribuição Java EE ainda não havia sido criada. (SAMPAIO, 2011)
A estrutura dos servlets é herdada da classe javax.servlet.http.HttpServlet,
esta é localizada no pacote Container Java EE. (SAMPAIO, 2011) A função de um
servlet é tratar requisições de hosts clientes, ou seja, toda requisição do usuário ao
browser realizada em uma página Java Server Pages (JSP) é encaminhada a um
117
servlet especifico que a redireciona a uma resposta. (GONÇALVES, 2007)
O direcionamento de uma requisição é executado por meio de um pedido http
ao servidor, no qual é especificado uma url, esta contém o nome do servlet que
atenderá a requisição. Uma requisição pode ser enviada via get ou post, de acordo
com o pedido o servlet a trata por um método doGet ou doPost, sendo doGet relativo
a pedidos via get e doPost para post. (SAMPAIO, 2011)
Os servlets possuem um ciclo que é divido em três fases: inicialização,
processamento das requisições e finalização. (GONÇALVES, 2007)
Em sua primeira fase, a inicialização, o servlet é carregado no Servlet
Container, este processo ocorre durante a inicialização do servidor, do contrário, o
servlet é iniciado assim que receber a primeira requisição. (GONÇALVES, 2007)
Assim que o servlet termina o processo de inicialização, este passa a estar
apto a receber pedidos. Uma vantagem deste modo de funcionamento da tecnologia
Servlet aliada a JSP, consiste na predisposição de receber várias requisições que
sejam atendidas por variáveis já pré-carregadas durante a inicialização.
(GONÇALVES, 2007)
O ciclo de vida de um servlet se conclui quando o Servlet Container considera
a aplicação inativa, ou quando o servidor é interrompido. (GONÇALVES, 2007)
4.16.4 Java Server Pages
A distribuição JEE faz uso de arquivos que possibilitem o desenvolvimento de
códigos estáticos e dinâmicos em uma mesma página web. Um dos primeiros
modelos com esse tipo de suporte foi a JSP, nesta é possível a criação de páginas
com estrutura (X)HTML para a marcação de conteúdo e a disponibilização de
informação dinâmica inserida por trechos de código Java. (GONÇALVES, 2007)
Os trechos de código Java inclusos por meio de uma JSP são nomeados de
scriplets. O nome scriplet é originado da palavra script, ou seja, uma linguagem de
script, o sufixo let representa pequeno, sendo assim, scriplets são considerados
fragmentos de scripts. (GONÇALVES, 2007)
A criação da JSP teve como propósito facilitar o desenvolvimento web por
meio da linguagem Java, visto que, anteriormente a esta tecnologia, a única forma
de desenvolver aplicações web em Java era com o uso de servlets. (COSTA, 2008)
O suporte oferecido com a tecnologia Servlet aos poucos gerou um
118
problema, isso porque o gerenciamento de conteúdo apresentava-se cada vez mais
complexo, em virtude do avanço dos sistemas na plataforma web, pois tanto os
pedidos dos browsers, quanto as respostas a estas requisições eram tratadas nos
servlets, em função disto os arquivos passaram a ser muito extensos e de difícil
criação e manutenção. (COSTA, 2008)
A inserção da JSP no cenário de programação Java, possibilitou que as
requisições fossem recebidas por esta tecnologia e direcionadas a servlets
específicos a cada requisição, por tudo, o processo de desenvolvimento foi
simplificado e passou a ser concebido em camadas. (COSTA, 2008)
4.17 DESENVOLVIMENTO EM CAMADAS
A aplicação de softwares as mais diversas tarefas da sociedade tem exigido
que estes sejam cada vez mais completos, ou seja, aptos a executarem o maior
número possível de ações. Em contrapartida, isto implica complexidade ao processo
de desenvolvimento. (BAPTISTELLA, 2013)
A complexidade na codificação de sistemas pode ser atenuada dependendo
do modelo de desenvolvimento aplicado pela equipe responsável pelo projeto. Posto
que, elaborar um código organizado é significativo para simplificação do processo.
Isto pode ser concebido efetuando uma divisão do código em camadas.
(BAPTISTELLA, 2013)
O modelo de divisão empregado em projetos de software, normalmente
consiste na separação do código que contém a visão do usuário, das demais partes
relativas à lógica de negócios. (BAPTISTELLA, 2013)
4.17.1 Model View Controller (MVC)
No período da década de 70, o padrão de arquitetura de projeto MVC foi
elaborado com o intuito de auxiliar o desenvolvimento de sistemas codificados na
linguagem Smalltalk. Apesar deste padrão ter sido criado em um contexto diferente
dos dias atuais, visto que, a web ainda não existia, ainda assim, atualmente o MVC
é bastante aplicado em projetos direcionados a plataforma web. (BAPTISTELLA,
2013)
O modelo MVC é um paradigma que visa à separação em camadas do código
119
de uma aplicação. Neste conceito são criadas três camadas: Model, View e
Controller, sendo cada uma responsável por uma parte especifica do sistema.
(GONÇALVES, 2007)
A camada Model é responsável por toda a parte lógica da aplicação, nesta
são inseridas as regras de negócios. (BAPTISTELLA, 2013) Esta é representada por
classes com a função de armazenamento e busca de dados. (GONÇALVES, 2007)
A visualização do usuário é codificada na View, ou seja, esta é encarregada
de apresentar todos os dados contidos nas classes da camada Model.
(GONÇALVES, 2007) A View em projetos web normalmente é desenvolvida em
código HTML. (BAPTISTELLA, 2013)
A camada Controller recebe toda requisição realizada por usuários na View,
esta camada direciona o pedido ao Model que o corresponde, posteriormente
redireciona a resposta a View responsável pela exibição da resposta a requisição.
(GONÇALVES, 2007) Dessa forma, conclui-se que o Controller é designado a
organizar o funcionamento do sistema, dado que, este realiza a intermediação das
apresentações e pedidos da View, junto ao armazenamento e busca da Model.
(BAPTISTELLA, 2013)
Uma explanação do funcionamento de MVC: o administrador solicita a
visualização de todos os clientes cadastrados, esta solicitação ocorre na View. O
Controller recebe a solicitação e a direciona ao Model que contém os registros dos
clientes, que por sua vez devolve ao Controller, na sequência este encaminha os
registros a View encarregada da listagem. (GONÇALVES, 2007)
4.18 APACHE TOMCAT
O primeiro contêiner Servlet desenvolvido pela Sun Microsystems foi o Java
Web Server, esta concepção objetivava a criação de um servidor voltado a
aplicações robustas. Em paralelo a isso, o Apache Software Foundation (ASF)
elaborou o JServ, este era um Servlet Engine integrado ao servidor Web Apache.
(GONÇALVES, 2007)
A Sun em virtude do suporte disponibilizado pela ASF, em 1999 decidiu
conceder o código fonte do Java Web Server a ASF. (GONÇALVES, 2007) Desta
doação surgiu o Tomcat, que consiste em um contêiner Java e um servidor web a
fim de propiciar um ambiente para tecnologia Java, sua estrutura é destinada ao
120
suporte as suas tecnologias, dentre elas: Servlet e JSP. (LUCKOW; MELO, 2010)
4.19 JAVA DATABASE CONNECTIVITY (JDBC)
O JDBC é uma API Java que possibilita a conexão de uma aplicação codifica
na linguagem Java a um SGBD. (ORACLE, 2013) Esta API é composta por classes
e interfaces abstratas que permitem a inserção de código SQL, desse modo é
aplicável aos principais SGBDs. (GONÇALVES, 2007)
Em função do código font do JDBC ser em Java, este agrega a principal
característica da linguagem, que consiste em portabilidade independente de
plataforma. Entretanto, apesar da portabilidade da API, para cada SGBD ele
necessita de um driver especifico. (GONÇALVES, 2007)
4.20 NETBEANS
É um ambiente de desenvolvimento integrado também conhecido como
Integrated Development Environment (IDE). Criado em 1996 por dois universitários
tchecos era denominado como projeto Xelfi, logo, em 1999 o protótipo se consolidou
como uma poderosa IDE, por tudo, foi adquirida pela empresa Sun Microsystems,
que o mantém sob licença de código fonte aberto. (JAVAFREE, 2011)
Atualmente o ambiente de desenvolvimento NetBeans é bastante popular,
este dispõem portabilidade a várias plataformas, tais como Windows, Linux, Solaris
e MacOS, isto é possível porque o código fonte da IDE foi desenvolvido em Java.
Dessa forma, sua dependência é somente de suporte a JVM. (JAVAFREE, 2011)
A plataforma disponibiliza suporte a desenvolvedores que utilizam as
linguagens de programação Java, C, C++, PHP e também a linguagens de
marcação de texto: HTML e XML. Em virtude destas características, ao longo dos
anos o NetBeans tornou-se o IDE mais utilizado por desenvolvedores, seja para o
desenvolvimento de aplicativos moveis, desktop ou web. (JAVAFREE, 2011)
Neste capítulo foram apresentadas todas as tecnologias e conceitos que
contribuíram para o desenvolvimento do protótipo da galeria virtual Crie arte.
O capítulo seguinte é destinado ao processo de análise do site desenvolvido,
desse modo são abordados os requisitos necessários para a sua elaboração, assim
como os usuários e cenários existentes no sistema.
121
5 ANÁLISE E PROJETO DO SISTEMA
O protótipo de galeria virtual de arte elaborado neste trabalho visa
fundamentalmente garantir um espaço para o relacionamento do artista com o seu
público. Por conseguinte, o site é estruturado de modo que facilite o acesso a
qualquer pessoa, seja ela leiga ou ciente da história da arte.
Em virtude do apoio à inclusão do acesso a arte, o site é destinado aos
seguintes usuários:
Artista plástico: interessado em divulgar suas obras;
Colecionadores de arte: interessados em pintura brasileira;
Interessados em arte: todo entusiasta da arte;
As funcionalidades, cenários de uso e seus usuários foram elaborados com
embasamento nas necessidades e aspirações dos envolvidos com a arte
contemporânea citados no primeiro capítulo do presente trabalho, ou seja, os
artistas e apreciadores de arte, interessados em vinculá-la à web de modo mais
dinâmico e interativo, de modo que seja estabelecido um espaço para relações de
divulgação, compra e debate a respeito dos novos modelos e costumes do atual
estado da arte.
Conforme a presente pesquisa denotou, os atuais espaços virtuais para
divulgação de obra, em sua maioria não estão aptos a atenderem as requisições dos
interessados em arte. Visto que, estes espaços não possibilitam uma interação entre
o artista, seu trabalho e os interessados neste, pois as galerias virtuais, e até mesmo
museus tendem a exporem apenas uma ficha técnica do artista, contendo
informações a respeito deste, assim como suas obras e respectivas descrições.
Os atuais modelos de exposição de arte limitam a transição desta aos atuais
hábitos de expressão da presente sociedade, posto que, atualmente as pessoas
usufruem da internet não somente com o intuito de terem acesso com maior
facilidade a informação, mas também interagirem com esta, isso porque
diferentemente dos demais meios de comunicação, a internet possibilita que um
número ilimitado de pessoas participe da construção de um mesmo conteúdo, isto é
possível por meio de expressões de opinião, edições, debates, que atualmente a
internet torna possível. Sendo assim esta se consolida como um meio de
comunicação de todos para todos, onde todas as pessoas emitem e recebem
122
informação.
A elaboração do protótipo consiste no objetivo de promover um espaço que
integre divulgação e comercialização de obras de arte, assim como o
compartilhamento de artigos visando o enriquecimento das manifestações artísticas
no país e acesso a cultura. Em decorrência disto, a formação dos requisitos é
baseada nos fatores positivos encontrados nas atuais galerias e museus virtuais e
as falhas presentes nestas.
Para realizar a análise de requisitos do site, sua estrutura e comportamento,
foram selecionados os diagramas de caso de uso, atividade, sequência e classes.
5.1 CASOS DE USO
Os cenários e usuários do sistema foram especificados em uma lista de casos
de uso que esmiúça o funcionamento do protótipo. O quadro 5.1 contém a lista com
os casos de uso:
Quadro 5.1 Lista de Casos de Uso
Nº Descrição Evento Caso de uso
UC1 Usuário solicita uma conexão ao site DadosLogin Conectar-se ao site
UC2 Usuário solicita cadastro de artista DadosUsuarioArtista Cadastrar usuário artista
UC3 Usuário solicita cadastro de cliente DadosUsuarioCliente Cadastrar usuário cliente
UC4 Usuário artista solicita publicar uma obra DadosObra Cadastrar Obra
UC5 Usuário cliente solicita uma busca de
artistas DadosUsuariosArtistas Buscar artistas
UC6 Usuário artista solicita publicar um artigo DadosArtigo Cadastrar artigo
UC7 Usuário cliente solicita comprar uma obra DadosVenda Cadastrar venda
UC8 Usuário solicita envio de mensagem ao
administrador DadosMensagem Enviar mensagem
UC9 Usuário cliente solicita interagir no ateliê DadosObras Editar e baixar obra
Fonte: Elaborado pelos autores, 2013.
Caso de uso UC1: conectar-se ao site. Este caso de uso é responsável pela
conexão entre usuários e o site.
Curso Normal:
123
UC 1.1: o usuário solicita realizar o login ao site.
UC 1.2: o sistema exibe os campos: usuário e senha para validação dos
dados.
UC 1.3: o sistema envia os dados para validação.
UC 1.4: o sistema realiza a conexão com o site.
UC 1.5: o caso de uso é encerrado.
Cursos alternativos:
UC 1.3.1: os dados são inválidos.
UC 1.3.1.1: o sistema exibe a mensagem ”Nome do usuário ou senha
inválido”.
UC 1.3.1.2 O caso de uso é encerrado.
Caso de Uso UC2: cadastrar usuário artista. Este caso de uso é responsável pelo
cadastro de um usuário artista.
Curso normal:
UC 2.1 : o usuário solicita cadastro
UC 2.2: o sistema verifica se o usuário já está cadastrado.
UC 2.3: o sistema adiciona um novo usuário e exibe a mensagem “Usuário
cadastrado com sucesso!”.
UC 2.4: o caso de uso é encerrado.
Cursos alternativos:
UC 2.2.1: o artista já consta cadastrado.
UC 2.2.1.2: o sistema oferece a opção de atualizar cadastro.
UC 2.2.1.3: o sistema obtém os dados do usuário.
UC 2.2.1.4: o sistema atualiza os dados do usuário e exibe a mensagem
“Artista atualizado com sucesso!”.
UC 2.2.1.5: o caso de uso é encerrado normalmente.
UC 2.2.2: caso o usuário exista no cadastro e deseja excluí-lo.
UC 2.2.2.1: o sistema excluí o usuário e exibe a mensagem “Artista excluído
com sucesso”.
UC 2.2.2.2: o caso de uso é encerrado.
Caso de Uso UC3: cadastrar usuário cliente. Este caso de uso é responsável
pelo cadastro de um usuário cliente.
Curso Normal:
124
UC 3.1: o usuário solicita cadastro
UC 3.2: o sistema verifica se o usuário já está cadastrado.
UC 3.3: o sistema adiciona um novo usuário e exibe a mensagem “Usuário
cadastrado com sucesso!”.
UC 3.4: o caso de uso é encerrado.
Cursos Alternativos:
UC 3.2.1: o usuário já consta cadastrado.
UC 3.2.1.2: o sistema oferece a opção de atualizar cadastro.
UC 3.2.1.3: o sistema obtém os dados do usuário.
UC 3.2.1.4: o sistema atualiza os dados do usuário e exibe a mensagem
“Usuário atualizado com sucesso!”.
UC 3.2.1.5: o caso de uso é encerrado.
UC 3.2.2: caso o usuário exista no cadastro e deseja excluí-lo.
UC 3.2.2.1: o sistema exclui o usuário e exibe a mensagem “Usuário excluído
com sucesso”.
UC 3.2.2.2: o caso de uso é encerrado.
Caso de Uso UC4: publicar obra. Este caso de uso é responsável por publicar
obras de um artista.
Curso Normal:
UC 4.1: o artista solicita publicar uma obra
UC 4.2: o sistema verifica se o usuário está conectado ao site.
UC 4.3: o sistema publica uma nova obra e exibe a mensagem “obra
publicada com sucesso!”.
UC 4.4: o caso de uso é encerrado..
Cursos Alternativos:
UC 4.2.1: o usuário não está conectado ao site.
UC 4.2.1.2: o sistema exibe a mensagem “Para realizar publicações é
necessário logar no site”
UC 4.2.1.3: o sistema direciona o usuário para o caso de uso UC1.
UC 4.2.1.4: o caso de uso é encerrado.
UC5: buscar artistas. Este caso de uso é responsável por solicitações de
consultas sobre artistas.
Curso Normal:
125
UC 5.1: o usuário solicita uma busca
UC 5.2: o sistema solicita o nome a ser pesquisado.
UC 5.3: o sistema verifica se o nome existe no banco de dados.
UC 5.4: o sistema retorna a busca com todos os dados relativos ao artista
encontrado.
UC 5.5: o caso de uso é encerrado.
Cursos Alternativos:
UC 5.3.1: o nome do artista não existe no banco de dados.
UC 5.3.2: o sistema envia a mensagem “Artista não encontrado, favor verificar
o nome”.
UC 5.3.3: o caso de uso é encerrado.
UC6: publicar artigo. Este caso de uso é responsável por publicar artigos de
artistas.
Curso Normal:
UC 6.1: o artista solicita publicar um artigo.
UC 6.2: o sistema verifica se o usuário está conectado ao site.
UC 6.3: o sistema publica um novo artigo e exibe a mensagem “Artigo
publicado com sucesso”.
UC 6.4: o caso de uso é encerrado.
Cursos Alternativos:
UC 6.2.1: o usuário não está conectado ao site.
UC 6.2.1.2: o sistema exibe a mensagem “Para realizar publicações é
necessário logar no site”
UC 6.2.1.3: o sistema direciona o usuário para o caso de uso UC 1.
UC 6.2.1.4: o caso de uso é encerrado.
Caso de Uso UC 7: cadastrar venda. Este caso de uso é responsável por
realizar a venda de uma obra
Curso Normal:
UC 7.1: o cliente solicita comprar uma obra
UC 7.2: o sistema verifica se o usuário está conectado ao site.
UC 7.3: o sistema comunica o artista sobre a venda.
UC 7.4: o caso de uso é encerrado.
. Cursos Alternativos:
126
UC 7.2.1: o usuário não está conectado ao site.
UC 7.2.1.2: o sistema exibe a mensagem “Para realizar compras é necessário
logar no site”
UC 7.2.1.3 O sistema direciona o usuário para o caso de uso UC 1.
UC 7.2.1.4 Caso de uso é encerrado.
Caso de uso UC8: enviar mensagem. Este caso de uso é responsável pelo
envio de mensagens de usuários cadastrados e visitantes ao administrador.
Curso Normal:
UC 8.1: o usuário solicita o envio de mensagem.
UC 8.2: o sistema exibe os campos a serem preenchidos
UC 8.3: o sistema verifica se os campos obrigatórios foram preenchidos.
UC 8.4: o sistema envia a mensagem.
UC 8.5: o caso de uso é encerrado.
Cursos alternativos:
UC 8.2.1: alguns dados não foram informados.
UC 8.2.1.1: o sistema informa quais dados não foram informados.
UC 8.2.1.2 O caso de uso é encerrado.
Caso de Uso UC9: editar e baixar obra. Este caso de uso é responsável pela
edição e download de obras.
Curso Normal:
UC 9.1: o usuário cliente solicita interagir com uma obra.
UC 9.2: o sistema verifica se o cliente está conectado ao site.
UC 9.3: o sistema disponibiliza a obra para edição.
UC 9.4: o sistema disponibiliza a obra para download.
UC 9.5: o caso de uso é encerrado.
Cursos Alternativos:
UC 9.2.1: o usuário não está conectado ao site.
UC 9.2.1.2: o sistema exibe a mensagem “Para interagir com as obras é
necessário logar no site”
UC 9.2.1.3: o sistema direciona o usuário para o caso de uso UC1.
UC 9.2.1.4: o caso de uso é encerrado.
Os casos de uso especificados textualmente também foram elaborados em
diagramas para facilitar a compreensão dos cenários e atores existentes no sistema.
127
A figura 5.1 ilustra os casos de uso de cadastro de artista e usuário:
Figura 5.1 - Casos de uso de Cadastro Fonte: Elaborada pelos autores, 2013.
A figura 5.2 ilustra todos os casos de uso em que o ator é o artista.
Figura 5.2 - Casos de uso do Artista. Fonte: Elaborada pelos autores, 2013.
A figura 5.3 ilustra todos os casos de uso em que o ator é o cliente:
Figura 5.3 - Casos de uso do Cliente. Fonte: Elaborada pelos autores, 2013.
128
5.2 DIAGRAMAS DE ATIVIDADE
Para ilustrar todos os fluxos de trabalho contidos no sistema foram
desenvolvidos diagramas de atividade.
A figura 5.4 ilustra o diagrama de atividade de login no site:
Figura 5.4 -Diagrama de Atividade de Login. Fonte: Elaborada pelos autores, 2013.
A figura 5.5 ilustra o diagrama de atividade de cadastro do artista no site:
. Figura 5.5 - Diagrama de Atividade de Cadastro de Artista Fonte: Elaborada pelos autores, 2013.
129
A figura 5.6 ilustra o diagrama de atividade de cadastro do cliente no site:
Figura 5.6 - Diagrama de Atividade de Cadastro de Cliente. Fonte: Elaborada pelos autores, 2013.
A figura 5.7 ilustra o diagrama de atividade do cadastro de obras:
Figura 5.7 - Diagrama de Atividade do Cadastro de Obras. Fonte: Elaborada pelos autores, 2013.
130
A figura 5.8 ilustra o diagrama de atividade de pesquisa de artistas:
Figura 5.8 - Diagrama de Atividade de Pesquisa de Artistas. Fonte: Elaborada pelos autores, 2013.
A figura 5.9 ilustra o diagrama de atividade de publicação de artigos:
Figura 5.9 - Diagrama de Atividade de Publicação de Artigos. Fonte: Elaborada pelos autores, 2013.
131
A figura 5.10 ilustra o diagrama de atividade de compra de obras:
Figura 5.10 - Diagrama de Atividade de Compra de Obras. Fonte: Elaborada pelos autores, 2013.
A figura 5.11 ilustra o diagrama de atividade de envio de mensagem:
Figura 5.11 - Diagrama de Atividade de Mensagem Fonte: Elaborada pelos autores, 2013.
132
A figura 5.12 ilustra o diagrama de atividade de interação do cliente com a
área ateliê:
Figura 5.12 - Diagrama de Atividade de Interação na área ateliê Fonte: Elaborada pelos autores, 2013.
5.3 DIAGRAMAS DE SEQUÊNCIA
Os processos de entrada e saída do sistema, assim como a ordem temporal
destes e seu agente causador foram especificados nos diagramas de sequência.
A figura 5.13 ilustra o diagrama de sequência de login no site:
Figura 5.13 - Diagrama de Sequência de Login. Fonte: Elaborada pelos autores, 2013.
133
A figura 5.14 ilustra o diagrama de sequência de cadastro de artista:
Figura 5.14 - Diagrama de Sequência de Cadastro de Artista. Fonte: Elaborada pelos autores, 2013.
A figura 5.15 ilustra o diagrama de sequência de cadastro de cliente:
Figura 5.15 - Diagrama de Sequência de Cadastro de Cliente. Fonte: Elaborada pelos autores, 2013.
134
A figura 5.16 ilustra o diagrama de sequência de pesquisa de artistas:
Figura 5.16 - Diagrama de Sequência de Pesquisa de Artistas. Fonte: Elaborada pelos autores, 2013.
A figura 5.17 ilustra o diagrama de sequência de publicação de artigos:
Figura 5.17 - Diagrama de Sequência de Publicação de Artigos. Fonte: Elaborada pelos autores, 2013.
A figura 5.18 ilustra o diagrama de sequência de compra de obras:
135
Figura 5.18 - Diagrama de Sequência de Compra de Obras. Fonte: Elaborada pelos autores, 2013.
A figura 5.19 ilustra o diagrama de sequência de envio de mensagem ao
administrador:
Figura 5.19 - Diagrama de Sequência de Envio de Mensagem. Fonte: Elaborada pelos autores, 2013.
A figura 5.20 ilustra o diagrama de sequência de interação do cliente com a
área ateliê:
136
Figura 5.20 - Diagrama de Sequência de Interação com a Área Ateliê. Fonte: Elaborada pelos autores, 2013.
Com o intuito de auxiliar a estrutura e desenvolvimento das classes e
funcionalidades do sistema, também foi elaborado um diagrama de classes. A figura
5.21 demonstra o diagrama de classes do protótipo:
Figura 5.21 - Diagrama de Classes. Fonte: Elaborada pelos autores, 2013.
137
6 DESENVOLVIMENTO
O desenvolvimento do presente trabalho foi fundamentado no conceito de
MVC, desse modo toda a estrutura do sistema está divida da seguinte forma:
Figura - 6.1 Desenvolvimento em Camadas. Fonte: Elaborada pelos autores, 2013.
Conforme a figura 6.1, o código da aplicação foi divido em três partes:
Controle: nesta é realizada toda a comunicação do usuário com o sistema,
pois o pacote contém todos os servlets, estes recebem as requisições dos
usuários e realizam o redirecionamento as respostas;
DAO: este pacote contém as classes responsáveis pela persistência dos
dados, neste também foi inserida a fábrica de conexão.
Modelo: contém todas as classes que realizam o armazenamento dos dados.
O conceito que recebeu maior ênfase durante todo o processo de
desenvolvimento é o de acessibilidade na web, desta forma, este está presente em
todas as páginas do site, isso porque o objetivo principal dos estudos aos conceitos
de desenvolvimento web e inserção da arte na plataforma digital, foi conceber um
ambiente que seja agradável a qualquer pessoa que se interesse pelo conteúdo do
site.
Independente da página de entrada do usuário ao site, este terá suporte a
acessibilidade, pois em todas as páginas foram disponibilizados mecanismos que
possibilitam a adaptação e controle as configurações da página, assim como ao seu
modo de navegação. Posto que, foram aplicadas técnicas que auxiliem a usuários
com deficiência motora, ou seja, que necessitam da navegação por teclado; assim
como a pessoas com algum tipo de deficiência visual.
A figura 6.2 ilustra os controles de acessibilidade destinados a manipulação
138
da fonte e cores de contraste:
Figura 6.2 - Controles de Manipulação das Páginas Fonte: Elaborada pelos autores, 2013.
A barra de ferramenta de controles de manipulação permite o ajuste do
tamanho da fonte aplicada ao site, sendo assim, é estabelecido auxílio a pessoas
com limitações visuais.
A figura 6.3 ilustra um trecho de conteúdo com o tamanho de fonte padrão:
Figura 6.3 - Texto Visualizado em Fonte Padrão no Protótipo Fonte: Elaborada pelos autores, 2013.
O resultado de aplicação de aumento da fonte disponível na barra de
ferramentas do site é ilustrado na figura 6.4:
Figura 6.4 - Texto Visualizado em Fonte Aumentada no Protótipo Fonte: Elaborada pelos autores, 2013.
No topo das páginas também estão contidos links que agilizam a navegação
139
via teclado, dessa forma, indivíduos com deficiência motora sentem-se mais a
vontade durante o acesso as informações presentes em todas as áreas do site. Visto
que, este ao entrar na página é possível escolher a qual área se direcionar, sem a
obrigatoriedade de percorrer toda a página.
A figura 6.5 demonstra os links aplicados no topo das páginas do site.
Figura 6.5 - Links de Saltos pela Página Fonte: Elaborada pelos autores, 2013.
Ao final de toda página também é disponibilizado um link que propicia
automaticamente o retorno ao topo da página, mais precisamente, a barra de
acessibilidade.
A figura 6.6 exibe o atalho para o topo da página, este presente em toda a
parte inferior das páginas do site.
Figura 6.6 - Atalho para o Topo da Página Fonte: Elaborada pelos autores, 2013.
As páginas também são adaptáveis a pessoas que necessitam da
visualização de conteúdos em alto contraste. A figura 6.7 apresenta uma
visualização do site em alto contraste.
Figura 6.7 - Página com alto-contraste Fonte: Elaborada pelos autores, 2013.
140
Visando facilitar a navegação de todo usuário, foram aplicadas indicações
referentes à localização espacial da página acessada.
A figura 6.8 apresenta os auxílios de localização espacial presentes nas
páginas do site.
Figura 6.8 - Auxilio a Localização Espacial fonte: Elaborada pelos autores, 2013.
A usabilidade também foi aplicada ao auxílio às interações do usuário com
formulários.
A figura 6.9 ilustra as dicas de interações com os formulários:
Figura 6.9 - Dicas de Interações com os Formulários Fonte: Elaborada pelos autores, 2013.
Todos os campos que necessitam ser preenchidos em um determinado
padrão foram apresentados contendo o modelo de preenchimento exigido.
A figura 6.10 apresenta uma demonstração de padrão a ser seguido no
preenchimento de e-mails:
Figura 6.10 - Dicas de Preenchimento dos Formulários Fonte: Elaborada pelos autores, 2013.
141
O conceito de usabilidade também está presente nas validações dos campos
dos formulários, pois as mensagens de validação são emitidas na tela assim que o
usuário se direciona a outro campo. Desse modo, é atenuada a ocorrência de erros
de preenchimento, posto que, não será necessário o usuário preencher todo o
formulário para somente ao clicar no botão de envio dos dados, saber se os mesmos
estão corretos.
A figura 6.11 ilustra a forma de avisos se determinado campo foi preenchido
de forma errada:
Figura 6.11 - Mensagens de Validação Fonte: Elaborada pelos autores, 2013.
O erro de preenchimento de campos do tipo textarea foi atenuado com a
disponibilização de recursos que demonstram o máximo de caracteres permitidos,
assim como quantos ainda são possíveis após o início de preenchimento.
A figura 6.12 exibe a contagem de caracteres durante o preenchimento de
uma mensagem:
Figura 6.12 - Contagem de Caracteres em Textarea Fonte: Elaborada pelos autores, 2013.
142
As páginas foram desenvolvidas de modo independente de forma de acesso,
ou seja, são acessíveis a qualquer aparelho apto a navegação na internet. Isto
porque o layout se adapta de acordo com a resolução de tela utilizado durante a
interação com o site.
A figura 6.13 demonstra o cabeçalho do site visto em uma resolução de tela
com 320 pixels de largura, esta é presente nos modelos de celulares mais antigos
com acesso a web:
.
Figura 6.13 - Página Visualizada em Celulares Antigos Fonte: Elaborada pelos autores, 2013.
A figura 6.14 exibe o cabeçalho do site visualizado em smartphones com
resolução de tela a partir de 480 pixels de largura:
Figura 6.14 - Página Visualizada em Smartphones com Baixa Resolução Fonte: Elaborada pelos autores, 2013.
143
A figura 6.15 exibe o cabeçalho do site visualizado em smartphones com
resolução de tela a partir de 768 pixels de largura:
Figura 6.15 - Página Visualizada em Smartphones com Alta Resolução
Fonte: Elaborada pelos autores, 2013.
A figura 6.16 ilustra o cabeçalho do site acessado por aparelhos com
resolução de tela a partir de 1024 pixels.
Figura 6.16 - Página visualizada em resoluções a partir de 1024x768. Fonte: Elaborada pelos autores, 2013.
Neste capítulo foram apresentados os resultados obtidos da pesquisa que
possibilitou o desenvolvimento do protótipo do site: Crie arte. Mediante os recursos
demonstrados no presente capítulo, é perceptível que o acesso ao conteúdo
disponibilizado não se limitada a pessoas acostumadas com o uso da web, assim
como é garantido o auxílio a diferentes tipos de deficiências que poderiam limitar a
usabilidade do usuário, sendo assim, qualquer pessoa que tenha interesse voltado à
arte terá uma navegação agradável por todo o conteúdo vinculado nas páginas do
site.
144
CONCLUSÃO
O presente trabalho priorizou a inclusão social a todo indivíduo, fez isto por
meio da quebra de barreiras do acesso a cultura, mais especificamente a pintura.
Para esta inserção foram aplicados conceitos e tecnologias que tornam a web mais
dinâmica e acessível a qualquer usuário. Destes destacam-se: os estudos de IHC
que propiciam o aprimoramento da relação homem máquina, não concebendo
apenas funcionalidades, mas sim interações entre sistema e usuário, de modo que
este se relacione da mesma forma que interage no ambiente real.
Os estudos aplicados à área de IHC possibilitou que o site fosse projetado se
assemelhando o máximo possível a ambientes aos quais os interessados em arte
estão acostumados, ou seja, museus, galerias, visando que não fosse apenas um
ambiente de exposições, mas sim um espaço para a troca de aprendizagens e
experiência, de forma que se estabeleça uma rede de informações em torno do tema
arte. Este processo de troca de experiências também transcorreu a elaboração
centrada no conceito de web 2.0, sendo assim, a participação do público do site é
fundamental, pois esta agrega valor ao conteúdo, pois quanto mais interessados no
assunto participarem, mais diversidade de informação será disponibilizada.
Durante a elaboração das páginas, os conceitos de acessibilidade e
usabilidade sempre estiveram presentes, para assim propiciar o acesso a toda
pessoa, independente de limitações oriundas de deficiências, ou falta de
similaridade com o ambiente virtual. Com isso, foi aplicado o principal preceito
corrente na internet, que desde a sua concepção objetiva disponibilizar informações
de modo universal.
Por fim, Conclui-se que o ambiente digital proporciona a vivência de
experiências muitas vezes inconcebíveis por diversas razões, tais como: distância
geográfica e falta de recursos. Empecilhos estes não mais presentes, em
decorrência da imersão da sociedade na internet, seja por acesso a celulares,
tablets ou computadores.
Ao realizarmos um processo contínuo de otimização dos recursos da web e
as tecnologias que a fazem uso, estaremos contribuindo não somente para a
vivência de novas experiências, mas também para o aprimoramento pessoal e
profissional de cada indivíduo.
145
REFERÊNCIAS BIBLIOGRÁFICAS
ABBAN. Jquery plugin to handle responsive images, 2013. Disponível em:
<https://github.com/Abban/jQuery-Picture>. Acesso em: 12 out. 2013.
ABREU, K. C. K. Histórias e usos da internet, 2009. Disponível em:
<http://www.bocc.ubi.pt/pag/abreu-karen-historia-e-usos-da-internet.pdf> Acesso em:
02 mar. 2013.
AGNER, L. Em busca de um olhar interdisciplinar sobre a arquitetura de informação,
a usabilidade e a metacomunicação em dispositivos móveis com interfaces gestuais.
In: SIMPÓSIO NACIONAL ABCIBER, 5., 2011, Florianópolis. Anais... Florianópolis:
UDESC/UFSC, 2011.
______. Ergodesign e arquitetura de informação: trabalhando com o usuário. 3.
ed. Rio de Janeiro: Quartet, 2012.
AGNI, E. Social interface design: um olhar para além da usabilidade, 2011.
Disponível em: <http://imasters.com.br/artigo/20163/usabilidade/social-interface-
pensando-alem-da-usabilidade-parte-01/> Acesso em: 10 jun. 2013.
AGUIAR, L. A arte na pré-história nos períodos paleolítico e neolítico, 2013.
Disponível em: <http://www.brasilescola.com/historiag/a-arte-prehistoria-nos-
periodos-paleolitico-neolitico.htm>. Acesso em: 10 out. 2013.
ALVAREZ, B. Z. Cartilha de recomendações de SEO para jornalistas online.
2011, 23p. Universidade Católica do Rio Grande do Sul Faculdade de Comunicação
Social.
ARRUDA, F. A velocidade média da internet no Brasil [infográfico], 2011.
Disponível em: <http://www.tecmundo.com.br/infografico/9683-a-velocidade-media-
da-internet-no-brasil-infografico-.htm>. Acesso em: 7 jun. 2013.
146
ARTPROJECT. Google cultural institute, 2012. Disponível em:
<http://www.google.com/culturalinstitute/project/art-project?hl=pt-BR> Acesso em: 20
jun. 2012.
BAPTISTELLA, A. J. Abordando a arquitetura MVC, e design patterns: observer,
composite, strategy, 2013. Disponível em: <
http://www.linhadecodigo.com.br/artigo/2367/abordando-a-arquitetura-mvc-e-design-
patterns-observer-composite-strategy.aspx> Acesso em: 02 nov. 2013.
BARBOSA, S. D. J.; SILVA, B. S. Interação humano-computador. 1. ed. Rio de
Janeiro: Elsevier, 2010.
BIANCHI, W. MySQL 5.6, o que há de novidade?, 2011. Disponível em:
<http://imasters.com.br/artigo/20748/mysql/mysql-56-o-que-ha-de-novidade/>.
Acesso em: 28 out. 2013.
BLATTMANN, U.; SILVA, F. C. C. Colaboração e interação na web 2.0 e biblioteca
2.0. ACB: Biblioteconomia em Santa Catarina. Florianópolis. v.12, n.2, p.191-215,
jul. 2007.
BRASIL. Decreto-Lei nº 5296, de 2 de dezembro de 2004. Diário Oficial da
República Federativa do Brasil. Brasília, DF, p. 5.·
CDC. Casa do Código: livros para o programador, 2013. Disponível em:
<http://www.casadocodigo.com.br/>. Acesso em: 29 mar. 2013.
COSTA, D. G. Java em rede: recursos avançados de programação. 1. ed. Rio de
Janeiro: Brasport, 2008.
COSTA, R. G. P. Universo java: domine os principais recursos oferecidos por esta
linguagem de programação. 1. ed. São Paulo: Digerati Books, 2008.
CUSTÓDIO, D. M.; SILVA, J. C. P. Design de homepage: a usabilidade na web. In:
MENEZES, M. S.; PASCHOARELLI, L. C. (Org.). Design e planejamento: aspectos
tecnológicos. 1. São Paulo: UNESP, 2009. p.179-210.
147
DAVINCI. DaVinci galeria de arte, 2012. Disponível em:
<http://davincigallery.net/art/welcome.do> Acesso em: 15 nov. 2012.
DEITEL, P.; DEITEL H. Java: como programar. Tradução Edson Furmankiewicz. 8.
ed. São Paulo: Pearson, 2010.
EIS, D. Introdução sobre media queries, 2009 Disponível em:
<http://tableless.com.br/introducao-sobre-media-queries/#.UW6OgqJwqTw>. Acesso
em: 15 out. 2013.
______. Declarando Idiomas no HTML, 2012. Disponível em: <
http://tableless.com.br/declarando-idiomas-no-html/#.UnLX6_mkofT> Acesso em: 26
out. 2012.
EIS, D.; FERREIRA, E. HTML5 e CSS3: com farinha e pimenta. 1. ed. São Paulo:
Tableless, 2012
FARIA, M. L. L. Regras práticas para apresentação de páginas web em
dispositivos fixos e móveis. 2007. Tese de Mestrado (Mestrado em Engenharia
Eletrônica e Computação) – Instituto Tecnológico de Aeronáutica, São José dos
Campos.
FERRAZ, R. CSS e acessibilidade na web, 2013. Disponível em: <
http://blog.w3c.br/css-e-acessibilidade-na-web/> Acesso em: 06 abr. 2013.
FERREIRA, S. M. S. P.; REIS G. A prática de arquitetura de informação de websites
no Brasil. TransInformação. Campinas. v.20, n.3, p. 285-307, set. 2008.
FERRERA, I. Conteúdo de um site e seus efeitos na memória, 2010. Disponível
em: <http://imasters.com.br/artigo/18283/arquitetura-da-informacao/conteudo-de-um-
site-e-seus-efeitos-na-memoria/>. Acesso em: 5 mai. 2013.
GALASTRI, L. Museus brasileiros entram no google art project, 2012. Disponível
em: <http://revistagalileu.globo.com/Revista/Common/0,,EMI301125-17770,00-
148
MUSEUS+BRASILEIROS+ENTRAM+NO+GOOGLE+ART+PROJECT.html>. Acesso
em: 20 jun. 2012.
GALERIA22. Galeria22 arte brasileira, 2012. Disponível em:
<http://galeria22.com.br/> Acesso em: 15 mar. 2012.
GAMELEIRA, F. A. B. Cartilha de acessibilidade, 2009. Disponível em:
<http://www.lupadigital.info/>. Acesso em: 15 jul. 2012.
GASPARETTO, D. A.; SANTOS, N. C. Galerias virtuais de arte digital no
ciberespaço: possibilidades para o sistema da arte contemporânea. In: ENCONTRO
DA ASSOCIAÇÃO NACIONAL DE PESQUISADORES EM ARTES PLÁSTICAS, 19,
2010, Cachoeira. Anais... Cruz das Almas: UFRB, 2010.
GLOBO. Absolutamente tudo sobre notícias, esportes e entretenimento, 2013.
Disponível em: <http://www.globo.com/>. Acesso em: 29 mar. 2013.
GOMES, I. Web: layout fixo, liquido ou elástico?, 2008. Disponível em:
<http://www.acessibilidadelegal.com/13-layout.php > Acesso em: 22 jul. 2012.
GONÇALVES, E. Desenvolvendo aplicações web com jsp, servlets, javaserver
faces, hibernate, ejb3 persistence e ajax. 1. ed. Rio de Janeiro: Ciência Moderna,
2007
GUEDES, G. T. A. UML 2: uma abordagem prática. 2. ed. São Paulo: Novatec,
2011.
HENRIQUES, R. Memória, museologia e virtualidade: um estudo sobre o Museu
da Pessoa. 2004. Dissertação (Mestrado em Museologia) – Universidade Lusófona
de Humanidades e Tecnologia, Lisboa.
HEUSER, C. A. Projeto de banco de dados. 4. ed. Porto Alegre: Sagra Luzzato,
1998.
149
IEIRI, A. Y.; COLE, A. D. webdesign: a usabilidade e a percepção visual da internet
aplicada ao webdesign, 2011. Disponível em:
http://www.mackenzie.com.br/fileadmin/Pesquisa/pibic/publicacoes/2011/pdf/dsn/alin
e_yuri.pdf>. Acesso em: 15 jun. 2013.
Instituto Brasileiro de Geografia e Estatística. Censo demográfico 2010:
características gerias da população, religião e pessoas com deficiência, 2010. Rio de
Janeiro, 215 p.
JAVAFREE. O IDE NetBeans, 2011. Disponível em: <
http://javafree.uol.com.br/artigo/882453/O-IDE-NetBeans.html >. Acesso em: 16 nov.
2013.
JEHL, S. Picturefill: a responsive images approach that you can use today!, 2012.
Disponível em: <https://github.com/filamentgroup/picturefill>. Acesso em: 12 out.
2013.
KRUG, S. Não me faça pensar. Tradução Acauan Pereira Fernandes. 2. ed. Rio de
Janeiro: Alta Books, 2011.
LARAIA, R. B. Cultura: um conceito antropológico. 14. ed. Rio de Janeiro: Jorge
Zahar Editor, 2001.
LARMAN, C. Utilizando UML e padrões: uma introdução à análise e ao projeto
orientados a objetos e ao desenvolvimento iterativo. Tradução Bookman. 3. Ed. São
Paulo: BOOKMAN, 2007.
LIPPMAN, E. O arquiteto do futuro. Meio & mensagem. São Paulo. n.792, 26 jan.
1998.
LOPES, S. 2012 é o ano do mercado mobile no Brasil, 2012. Disponível em:
<http://blog.caelum.com.br/2012-e-o-ano-do-mercado-mobile-no-brasil/> Acesso em:
28 mar. 2013.
150
______. Flexibilidade em páginas para dispositivos móveis com media queries,
2012. Disponível em: <http://blog.caelum.com.br/flexibilidade-em-paginas-para-
dispositivos-moveis-com-media-queries/>. Acesso em: 10 out. 2013.
LUKOW, D. H.; MELO, A. A. Programação Java para a web. 1. ed. São Paulo:
Novatec, 2010.
MACHADO, F. Projeto de banco de dados: visão prática. 11. ed. São Paulo: Érica,
2004.
MARCOTTE, E. Web design responsive. Tradução Curso iLearn, 2010. Disponível
em <http://www.ilearn.com.br/artigos/design-responsivo/> Acesso em: 20 mar. 2013.
______. Responsive web design. 1. ed. New York: A book Apart, 2011.
MARIN, S. P. Comunicação visual de museus. 2011. Dissertação (Pós-graduação
stricto sensu em Estética e História da Arte) – Universidade de São Paulo, São
Paulo.
MARTIN, T. Riloadr: A cross-browser framework-independent responsive images
loader written in Javascript, 2013. Disponível em:
<https://github.com/tubalmartin/riloadr>. Acesso em: 12 out. 2013.
MARTINEZ, M. L. Um método de web design baseado em usabilidade. In:
SIMPÓSIO NACIONAL DE GEOMETRIA DESCRITIVA E DESENHO TÉCNICO, 16.,
2003, Santa Cruz do Sul. Anais... Santa Cruz do Sul: UNISC, 2003.
MATTOSO, G. Q. Internet, jornalismo e weblogs: uma nova alternativa de
informação. 2003. Disponível em: <http://www.bocc.ubi.pt/pag/mattoso-guilherme-
webjornalismo.pdf> Acesso em: 05 marc. 2013.
MEMORIA, F. F. P. Usabilidade de interfaces e arquitetura da informação:
navegação estrutural, 2013. Disponível em:
<http://www.fmemoria.com.br/artigos/nav_estr.pdf >. Acesso em: 8 marc. 2013.
151
MILANI, A. MySQL: guia do programador. 1. ed. São Paulo: Novatec, 2007.
Ministério do Planejamento, Orçamento e Gestão; et al. E-MAG versão 3.0: modelo
de acessibilidade em governo eletrônico, 2011. Brasil, 74 p.
MURPHEY, R. Fundamentos de jQuery. Tradução Herberth Amaral; Diego
Guimarães; Diego Caxito. 2010.
NICÁCIO, J. M. Técnicas de acessibilidade: criando uma web para todos. 2. ed.
Maceió: Edufal, 2010.
NIELSEN, J.; LORANGER, H. Usabilidade na web: projetando websites com
qualidade. Tradução Edson Furmankiewicz; Carlos schafranski; Docwarare
traduções técnicas. 5. Ed. Rio de Janeiro: Elsevier, 2007.
OLIVEIRA, A. M. et al. Search Engine Optimization – SEO: a contribuição do
bibliotecário na otimização de websites para os mecanismos de busca. CRB-8
Digital.São Paulo. v.4, n.1, p.64-77, abr. 2011.
OLIVEIRA. N. SEO na prática: como gerar negócios para sua empresa através da
internet. 1. ed. Fortaleza: Quartel Digital, 2013.
ORACLE. Why java?, 2013 Disponível: <
http://www.oracle.com/us/technologies/java/overview/index.html>. Acesso em: 10
nov. 2013.
ONUBR. A ONU e as pessoas com deficiência, 2012. Disponível em: <
http://www.onu.org.br/a-onu-em-acao/a-onu-e-as-pessoas-com-deficiencia/>. Acesso
em: 15 mar. 2012.
PAGANI, T. O que é usabilidade?, 2011. Disponível em: <http://tableless.com.br/o-
que-e-usabilidade/#.UpZo0sRDte8>. Acesso em: 10 mai. 2013.
PRADO, G. Os sites de arte na rede internet. In: ENCONTRO ANUAL DA COMPÓS,
6. 1997, São Leopoldo. Anais... São Leopoldo: UNISINOS, 1997.
152
______. Arte telemática: dos intercâmbios pontuais aos ambientes virtuais
multiusuário. 1. Ed. São Paulo: Itaú Cultural, 2003.
PORTA, G.; QUEIROZ, M. A. Formulários em uma web para todos, 06 out. 2008.
Disponível em: <http://www.acessibilidadelegal.com/13-formularios.php> Acesso em:
5 nov. 2012.
______. Saltos: facilidade de navegação na web, 2008. Disponível em:
<http://www.acessibilidadelegal.com/13-saltos.php> Acesso em: 30 out. 2012.
REED, J. Marketing online: como usar sites, blogs, redes sociais e muito mais.
Tradução Carlos Szlak. 1. ed. São Paulo: Lafonte, 2012.
REILLY, T. O’. What is web 2.0: design patterns and business models for the next
generation of software, 2005. Disponível em: <http://oreilly.com/web2/archive/what-
is-web-20.html> Acesso em: 10 fev. 2013.
REMOALDO, P. O guia prático do dreamweaver CS3 com PHP, javaScript e
ajax. 1. ed. Lisboa: Centro Atlântico, 2008.
SAMPAIO, C. Java enterprise edition 6: desenvolvendo aplicações corporativas. 1.
ed. Rio de Janeiro: Brasport, 2011.
SANTOS, R. L. Acessibilidade web é um dever cívico, 2012. Disponível em:
<http://imasters.com.br/artigo/16960/acessibilidade/acessibilidade-web-e-um-dever-
civico/>. Acesso em: 23 jul. 2012.
SANTOS, F. R.; SILVA, E. F. A importância da arquitetura da informação no
planejamento de ambientes digitais inclusivos, 2013. Disponível em:
<http://repositorio.ufrn.br:8080/jspui/bitstream/1/6229/1/Fernanda_CCSA%5B1%5D.
pdf>. Acesso em: 10 jun. 2013.
SILVA, M. S. Componentes essenciais para acessibilidade à web, 2005.
Disponível em: <http://www.maujor.com/w3c/wcacomponents.html>. Acesso em: 13
mar. 2012.
153
______. JavaScript: guia do programador. 1. ed. São Paulo: Novatec, 2010.
______. JQuery: a biblioteca do programador JavaScript. 2. ed. São Paulo: Novatec,
2010.
______. HTML 5: a linguagem de marcação que revolucionou a web. 1. ed. São
Paulo: Novatec, 2011.
______. Construindo formulários HTML/XHTML acessíveis – 1ª Parte, 2011.
Disponível em: <http://www.maujor.com/tutorial/formac-a.php> Acesso em: 5 nov.
2012.
______. CSS3: desenvolva aplicações web profissionais com uso dos poderosos
recursos de estilização das CSS3. 1. ed. São Paulo: Novatec, 2012.
______. As medidas CSS de comprimento, 2011. Disponível em:
<http://maujor.com/tutorial/medidascss.php>. Acesso em: 5 jun. 2013.
SOARES, H.; SPELTA, L. Captcha, herói ou vilão?, 2012. Disponível em: <
http://acessodigital.net/art_captcha-heroi-ou-vilao.html> Acesso em: 9 nov. 2012
SORG, L. Tablets podem ultrapassar o mercado de computadores já em 2013,
2012. Disponível em: <http://economia.estadao.com.br/noticias/economia,tablets-
podem-ultrapassar-o-mercado-de-computadores-ja-em-2013,105181,0.htm> Acesso
em: 28 marc. 2013.
SOUZA, B. Marketing Digital 2.0: como sair na frente da concorrência. 2012.
SOUZA, C. S.; et al. Projeto de Interfaces de Usuário: perspectivas cognitiva e
semiótica, In: CONGRESSO DA SOCIEDADE BRASILEIRA DE COMPUTAÇÃO,
19., 1999, Rio de Janeiro. Anais... Rio de Janeiro, 1999.
SPELTA, L. Acessibilidade web: 7 mitos e um equívoco, 2012, Disponível em:
<http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html>.
Acesso em: 10 jun. 2012.
154
TECNOTÍCIAS. Venda de smartphones ultrapassa a de pcs pela 1ª vez, 2011.
Disponível em: <http://www1.folha.uol.com.br/tec/872915-venda-de-smartphones-
ultrapassa-a-de-pcs-pela-1-vez.shtml> Acesso em: 28 marc. 2013.
TECTERRA. Smartphones superam computadores em vendas no mundo. 2012.
Disponível em: <http://tecnologia.terra.com.br/smartphones-superam-computadores-
em-vendas-no-mundo,9c0833983a35b310VgnCLD200000bbcceb0aRCRD.html>
Acesso em: 28 mar. 2013.
WACHOWICZ, L. A.; ARBIGAUS, M. L. Aprendizagem por meio da Gestalt na
formação de competências do profissional de desenho industrial. Diálogo
Educacional. Curitiba: Maio-agosto, n.9, p. 1-14. 2003
W3C. Web Content Accessibility Guidelines 1.0, 1999. Disponível em:
<http://www.w3.org/TR/WAI-WEBCONTENT/>. Acesso em: 22 jul. 2012.
W3C. Essential Components of Web Accessibility, 2005. Disponível em: <
http://www.w3.org/WAI/intro/components.php> Acesso em: 25 out. 2012.
W3CBR. Missão do W3C, 2012, Disponível em:
<http://www.w3c.br/Sobre/MissaoW3C >. Acesso em: 20 out. 2012.
VINICIUS, S. Por que devo estudar acessibilidade digital?, 2012. Disponível em:
<http://imasters.com.br/artigo/24491/acessibilidade/por-que-devo-estudar-
acessibilidade-digital/>. Acesso em: 10 out. 2012.
ZAKAS, N. C. JavaScript de alto desempenho. Tradução Rafael Zanolli. 1. ed. São
Paulo: Novatec, 2010.
ZEMEL, T. Gestalt aplicado ao design web (parte 1): origem do termo, significado
e utilidade, 2008a. Disponível em:
<http://desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-
1-origem-do-termo-significado-e-utilidade/>. Acesso em: 04 ago. 2013.
______. Gestalt aplicado ao design web (parte 2): princípio da proximidade,
2008b. Disponível em: http://desenvolvimentoparaweb.com/design/gestalt-aplicado-
ao-design-web-parte-2-principio-da-proximidade/ >. Acesso em: 04 ago. 2013.
155
______. Gestalt aplicado ao web design (parte 4): princípio da boa continuidade
ou princípio do alinhamento, 2008c. Disponível em:
<http://desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-
4-principio-da-boa-continuidade-ou-principio-do-alinhamento/>. Acesso em: 04 ago.
2013.
______. Gestalt aplicado ao design web (parte 6): princípio da experiência
passada, 2008d. Disponível em:
<http://desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-
6-principio-da-experiencia-passada/>. Acesso em 04 ago. 2013.
______. Web design responsivo: páginas adaptáveis para todos os dispositivos. 1.
ed. São Paulo: Casa do Código, 2012.