lucas dos santos martins · elementos que levaram ao design responsivo. 2019. 39 f. trabalho de...

36
Brasília 2019 LUCAS DOS SANTOS MARTINS ELEMENTOS QUE LEVARAM AO DESIGN RESPONSIVO

Upload: others

Post on 22-Sep-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

Brasília 2019

LUCAS DOS SANTOS MARTINS

ELEMENTOS QUE LEVARAM AO DESIGN RESPONSIVO

Page 2: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

Brasília 2019

ELEMENTOS QUE LEVARAM AO DESIGN RESPONSIVO

Trabalho de Conclusão de Curso apresentado à Anhanguera como requisito parcial para a obtenção do título de graduado em sistemas de informação.

Orientador: Mariana Nunes

LUCAS DOS SANTOS MARTINS

Page 3: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

LUCAS DOS SANTOS MARTINS

ELEMENTOS QUE LEVARAM AO DESIGN RESPONSIVO

Trabalho de Conclusão de Curso apresentado à Anhanguera, como requisito parcial para a obtenção do título de graduado em sistemas de informação.

BANCA EXAMINADORA

Prof(a). Titulação Nome do Professor(a)

Prof(a). Titulação Nome do Professor(a)

Prof(a). Titulação Nome do Professor(a)

Brasília, 28 de dezembro de 2019

Page 4: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

Dedico este trabalho primeiramente aos

meus pais, que contribuíram

financeiramente para que eu pudesse

cursar o ensino superior. Além deles,

também aos amigos que fiz e em especial

a minha namorada que cursou junto

comigo e me incentivou para que eu não

viesse a desistir.

Page 5: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

AGRADECIMENTOS

Agradeço a minha namorada que diante da minha dificuldade de encontrar

material para escrever, me ajudou a realizar pesquisas e encontrar conteúdos

relacionados ao meu tema principal, além de me explicar algumas regras e normas

da língua portuguesa, as quais me deram uma luz nas correções. Por outro lado,

gostaria de poder agradecer também aos professores que me auxiliaram, deram

dicas e me ajudaram neste trabalho. Em especial, minha orientadora que me auxiliou

nas eventuais correções e me aconselhou durante todas as etapas deste trabalho.

Por último, mas sendo o mais importante, agradeço a Deus por me dar paciência e

força para que eu pudesse pesquisar, raciocinar, relacionar e escrever este trabalho.

Page 6: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

MARTINS, Lucas dos Santos. Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera - Facnet, Brasília, 2019.

RESUMO

É evidente que o surgimento do design responsivo se deu pela constante evolução da internet e dos dispositivos utilizados para acessá-la. Visto que a internet é uma tecnologia que cresceu surpreendentemente e em pouco tempo se tornou o maior veículo de comunicação global. Por outro lado, acompanhando esse crescimento da web, surgiu a necessidade dos internautas utilizarem esse meio de comunicação com mais facilidade. Diante disso, foram criados e comercializados diversos dispositivos usados para acessar a internet, que se tornaram gradativamente mais populares ao longo dos anos. Assim, instaurou-se uma grande dificuldade nesse meio, dado que existe uma extensa quantidade de aparelhos que possuem diferentes características, onde as diversas resoluções de tela fazem com que os layouts das páginas web se comportem de forma diferenciada em cada um, muitas vezes tornando-se ilegível ou não harmonioso, fugindo completamente do conceito de usabilidade. Como uma solução para este problema, são abordados assuntos relacionados ao design responsivo, que traz consigo uma padronização para adaptação de diferentes resoluções de tela. Este trabalho foi desenvolvido utilizando a metodologia de referencia bibliográfica com pesquisas qualitativas e descritivas. Ao final, denota-se que o design responsivo de fato é uma solução para a problemática proposta deste trabalho de pesquisa.

Palavras-chave: Design Responsivo; Layout Responsivo; Responsividade;

Dispositivos Móveis.

Page 7: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

MARTINS, Lucas dos Santos. Elements that led to responsive design. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera - Facnet, Brasília, 2019.

ABSTRACT

Clearly, the emergence of responsive design was due to the constant evolution of the internet and the devices used to access it. Since the internet is a technology that has grown surprisingly and soon became the largest vehicle of global communication. On the other hand, following this growth of the web, the need arose for Internet users to use this means of communication more easily. Given this, several devices used to access the Internet were created and marketed, which became gradually more popular over the years. Thus, a great difficulty has arisen in this environment, since there is an extensive amount of devices that have different characteristics, where the different screen resolutions make the layouts of the web pages behave differently in each one, often making it different. become unreadable or unharmonious, completely evading the concept of usability. As a solution to this problem, issues related to responsive design, which brings standardization for adapting different screen resolutions, are addressed. This work was developed using the bibliographic reference methodology with qualitative and descriptive research. In the end, it is noted that responsive design is indeed a solution to the problematic proposal of this research work.

Key-words: Responsive Design Responsive Layout; Responsiveness; Mobile devices.

Page 8: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

LISTA DE ILUSTRAÇÕES

Figura 1 – Pessoas que possuem ou não um smartphone e/ou tablet. ................... 24

Figura 2 – Alteração da percentagem de sessões de visualização em computadores

e dispositivos móveis de 2016 a 2017 ...................................................................... 26

Page 9: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

LISTA DE ABREVIATURAS E SIGLAS

ARPA Agência de Projetos Avançados de Defesa

BBN Bolt, Beranekand Newman

CERN Organização Europeia para a Pesquisa Nuclear

CGI Comitê Gestor da Internet

CSS Cascading Style Sheets

FAPESP Fundação de Amparo à Pesquisa do Estado de São Paulo

HTML Hypertext Markup Language

PDA Personal Digital Assistants

PSI PageSpeed Insights

RNP Rede Nacional de Pesquisa

W3C World Wide Web Consortium

Page 10: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

13

SUMÁRIO

1. INTRODUÇÃO ................................................................................................... 14

2. SURGIMENTO E EVOLUÇÃO DA INTERNET ................................................. 16

2.1 A ORIGEM DA INTERNET .................................................................................. 16

2.2 CONTEXTO HISTÓRICO DA INTERNET NO BRASIL ....................................... 18

2.3 ASPECTOS RELACIONADOS A ESTRUTURA DA REDE ................................ 19

2.4 FATORES QUE INFLUENCIARAM O CRESCIMENTO DA INTERNET............. 19

2.5 O AUMENTO DO USO DA INTERNET ............................................................... 19

2.6 BENEFÍCIOS ADVINDOS DO SURGIMENTO DA INTERNET ........................... 20

3. OS DISPOSITIVOS MÓVEIS E SUAS PARTICULARIDADES ......................... 22

3.1 DEFINIÇÕES DE DISPOSITIVOS MÓVEIS ....................................................... 22

3.1 EVOLUÇÃO DOS DISPOSITIVOS MÓVEIS ....................................................... 22

3.3 A INFLUENCIA DOS DISPOSITIVOS MÓVEIS NA VIDA DAS PESSOAS ........ 24

3.4 DADOS QUE EVIDENCIAM O AUMENTO DO USO DOS DISPOSITIVOS

MÓVEIS .................................................................................................................... 25

4. CARACTERISTICAS DO DESIGN RESPONSIVO ........................................... 29

4.1 CONTEXTO HISTÓRICO DO DESIGN RESPONSIVO ...................................... 29

4.2 ESTRUTURA DE UM LAYOUT PARA WEB ....................................................... 30

4.2.1 O hypertext markup language (html) ................................................................ 30

4.2.2 A folha de estilo css ....................................................................................................................... 31

4.2.3 O conceito de layout fluído ......................................................................................................... 32

4.2.4 As media queries ............................................................................................................................. 32

4.2.5 Introdução ao bootstrap................................................................................................................ 33

4.3 FERRAMENTAS DE TESTE ............................................................................... 33

5. CONSIDERAÇÕES FINAIS ............................................................................... 35

REFERÊNCIAS ......................................................................................................... 37

Page 11: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

14

1. INTRODUÇÃO

O uso de dispositivos móveis no acesso à internet vem sendo visivelmente

perceptível no ano de 2019. Esta utilização vem sendo evidenciada por meio do uso

demasiado da internet, que vem por consequência das facilidades impostas por esta

tecnologia na realização de atividades cotidianas.

Portanto, a atualização constante das tecnologias, linguagens de

programação, dispositivos móveis e até mesmo boas práticas fazem com que

empresas refaçam suas estratégias e se reinventem nos meios digitais. Deste modo,

tem-se como exemplo os websites que estão se revolucionando de forma que se

adéquem aos dispositivos utilizados pelos visitantes por meio do design responsivo

(SILVA, 2014).

Diante deste cenário contextualizado no parágrafo anterior, fica evidente a

necessidade de que todas as aplicações web sejam desenvolvidas de modo que se

adaptem a todos os dispositivos, ou melhor, todas as resoluções de tela. Existem

frameworks que auxiliam os programadores nesta árdua missão, afinal imagine

como seria desenvolver um projeto com versões exclusivas para todos os

dispositivos. De acordo com esse contexto, tem-se como pergunta para esta

monografia, quais aspectos influenciaram para a criação do design responsivo?

O objetivo principal deste trabalho de pesquisa é apresentar a importância do

design responsivo como uma solução para a constante evolução tecnológica

instaurada no âmbito dos dispositivos que possuem acesso à internet. Para atingir

este objetivo, faz-se necessário a exploração de três objetivos secundários, tais

como: contextualizar o surgimento e fatores que levaram ao crescimento da internet;

apresentar os dispositivos móveis e seus principais atributos; mostrar as

características e soluções advindas do design responsivo.

O tipo de pesquisa que conduzirá o desenvolvimento deste trabalho é a

revisão bibliográfica, sendo exclusivamente de forma qualitativa e descritiva. As

pesquisas serão realizadas em livros, sites com banco de informações, publicações,

artigos e dentre outros meios. O material que será pesquisado deverá ter sido

publicado nos últimos 15 anos. Os principais termos que serão utilizados na

pesquisa são: design responsivo, layout responsivo, adaptação mobile, framework

Page 12: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

15

csseframework bootstrap. Os principais autores que contribuíram para elaboração

deste trabalho de pesquisa foram: Ferraz (2017), Santos (2010) e Côrrea (2013).

Page 13: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

16

2. SURGIMENTO E EVOLUÇÃO DA INTERNET

2.1 A ORIGEM DA INTERNET

Para Santos (2010), o primeiro satélite artificial nomeado “Sputnik” foi enviado

ao espaço pela União Soviética no ano de 1957. De acordo com Bresolin e Santim

(2013) o lançamento desse satélite veio como consequência da disparada corrida

armamentista que teve início no final da década de 1940 que ocorria entre os

estadunidenses e os soviéticos. Como consequência deste acontecimento os norte-

americanos sentiram-se abalados, os quais pensaram que diante deste grande feito,

os soviéticos provavelmente também teriam a capacidade de atirar um míssil contra

a América do Norte. Mediante essa circunstância a guerra fria encontrava-se em seu

ápice, assim tornou-se evidente que os estadunidenses e os soviéticos passaram a

se considerarem adversários (SANTOS, 2010).

Por conseguinte, ao encontrar-se neste cenário, os Estados Unidos

rapidamente deram início a Agência de Projetos Avançados de Defesa (ARPA) em

1958, que tinha como objetivo principal garantir ao país superioridade tecnológica

militar em relação a outros países (CASTELLS, 2003). Santos (2010) complementa

afirmando que uma das missões da ARPA era prover evoluções na área de ciência

da computação.

A ARPA com auxílio da companhia Bolt, Beranekand Newman (BBN),

elaboraram um projeto de rede de computadores como afirma Santos (2010). O

autor explica como funcionava este projeto, quando assegura que o escopo desta

era interligar quatro computadores com sistemas operacionais diferentes e em

localidades distintas, além de garantir que a comunicação e as informações não

fossem perdidas caso uma dessas regiões fossem atingidas por ataques inimigos. O

sucesso advindo do desenvolvimento deste projeto deu origem ao conceito de Inter

Networking que posteriormente se popularizou como Internet.

Ferraz (2017) corrobora com o conteúdo supracitado e complementa

reiterando que a necessidade de comunicação no período da guerra fria, que

ocorreu entre os anos de 1947 e 1991, foi o maior fator histórico que incentivou o

surgimento da internet por volta de 1969.

Page 14: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

17

Já Lessig (2004) discorda dos pensamentos dos autores acima citados, visto

que ele acredita que a internet não surgiu em uma data e nem mesmo em uma

década específica, pois declara que a Internet não possuiu um criador ou se quer

uma data exata em que esta tecnologia fora inventada.

De acordo com Ferraz (2017), em meados dos anos 1990 a internet

basicamente era usufruída quase que exclusivamente em ambiente acadêmico.

Entretanto, um cientista da computação chamado de Tim Berners-Lee apresentou

uma ideia que seria uma transformação na maneira de expor e acessar conteúdos,

ele a intitulou de hipertexto, está solução permitia que fosse possível abrir e ler

documentos interligados por uma rede de computacional. Posteriormente este

cientista criou e expôs o primeiro navegador chamado WordWideWeb e determinou

que esta invenção seria de uso gratuito, esta provavelmente foi a decisão que mais

impactou e contribuiu para o sucesso da Internet.

Ferraz (2017) afirma que logo em seguida, no ano de 1991 a Organização

Europeia para a Pesquisa Nuclear (CERN) publicou a primeira página na web que

apresentava essa recente invenção. Deste modo, com o intuito de também prestigiar

o cientista responsável por essa inovação, o título desta página era “a Word Wide

Web”.

Castells (2003) complementa afirmando que a partir do lançamento do

navegador/editor de hipertexto proposto por Tim Berners-Lee, outros

desenvolvedores tentaram modificá-lo para criar seus próprios navegadores, mas as

versões apresentadas não obtiveram sucesso. Entretanto em 1993 um estudante

chamado Marc Andreessen criou uma versão modificada que nomeou de Mosaic,

este navegador ganhou mercado, pois apresentou um avanço tecnológico em sua

interface gráfica, isto tornou possível o compartilhamento de imagens e dentre outros

arquivos de multimídias na internet.

À medida que a Internet se desenvolvia e proliferava, tornou-se necessário o

acréscimo no número de pessoas empenhando-se para o seu crescimento e

manutenção. Diante disso, mais precisamente no ano de 1994 o cientista Tim

Berners-Lee fundou o World Wide Web Consortium, que popularmente ficou

conhecido como W3C. Para melhor entendimento, diz-se que a W3C é um grupo

formado de órgãos governamentais, organizações e empresas, que foi fundado com

o objetivo de definir padrões para aplicações web (FERRAZ, 2017).

Page 15: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

18

Castells (2003) afirma que as raízes da internet podem ser buscadas na

Arpanet, uma rede computacional criada pela ARPA. Ferraz (2017) complementa

alegando que a história da internet é rápida e dinâmica, assim como sua capacidade

de proporcionar transformações em escala global, emergiu como uma solução de

comunicação para a segurança nacional e tornou-se uma ferramenta capaz de

interligar pessoas em todo o mundo, através de sua camada web.

2.2 CONTEXTO HISTÓRICO DA INTERNET NO BRASIL

Ferraz (2017) aponta interessantes marcos históricos que retratam a evolução

da internet no Brasil, em 1989 o registro de domínio .br foi concedido ao Brasil por

John Postel, este foi agraciado a Fundação de Amparo à Pesquisa do Estado de

São Paulo (FAPESP), em seguida no ano de 1991 foi realizada a primeira conexão

TCP/IP, que conectava a internet no território brasileiro. Castells (2003)

complementa afirmando que a FAPESP era responsável por gerir os endereços de

IP atribuídos aos domínios, contanto que os interessados passassem por uma

avaliação de necessidade, estes endereços eram atribuídos sem custo.

Ainda sobre as palavras de Ferraz (2017), ele certifica que o ministério da

ciência e tecnologia foi responsável pela criação da Rede Nacional de Pesquisa

(RNP) em 1992, que tinha como finalidade criar uma infraestrutura de rede

conectada à internet de amplitude nacional para uso limitado ao meio acadêmico.

Entretanto, no ano de 1994 esta realidade mudou, pois neste ano a Embratel

estreou e passou a comercializar seus serviços de internet no país, este fato foi um

grande passo para evolução tecnológica do pais.

Posteriormente, foi constituído o Comitê Gestor da Internet (CGI) fundado no

Brasil no ano de 1995, o qual se tornou responsável pela distribuição de endereços

de IP relativos aos domínios no Brasil (CASTELLS, 2003). Além disto, Ferraz (2017)

complementa que o CGI tinha como objetivo principal estruturar e auxiliar o

desenvolvimento de projetos relativos ao desempenho do funcionamento da internet

no Brasil.

Page 16: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

19

2.3 ASPECTOS RELACIONADOS A ESTRUTURA DA REDE

Em relação a infra-estrutura um detalhe interessante é que ninguém é dono

da internet, essa tecnologia simplesmente funciona a partir de redes computacionais

distintas, sejam grandes ou pequenas e até residenciais ou comerciais. Deste modo,

tem-se que qualquer computador que esteja conectado a um modem comece a fazer

parte de uma rede, definida pelo seu provedor de acesso, estas redes por sua vez

se conectam de formas diferentes. É válido ressaltar que conforme supracitado, tudo

começou com quatro computadores interligados e se tornaram dezenas de milhões.

Logo, tem-se em resumo quede modo geral a internet pode ser definida como uma

rede composta de redes (SANTOS, 2010).

2.4 FATORES QUE INFLUENCIARAM O CRESCIMENTO DA INTERNET

Santos (2010) afirma que o estouro da internet em todo o mundo ocorreu por

causa do barateio das comunicações que se instaurou durante o século XX e em

poucas décadas, este benefício tornou possível que centenas de milhares de

pessoas tivessem acesso a essa tecnologia.

Por outro lado, Marinho (2016) complementa alegando que a internet obteve

tantos usuários pelo fator de ser sob requisição, você consome o conteúdo que

quiser, onde e quando desejar, basta acessar através dos hiperlinks ou procurar por

meio dos buscadores, em outras palavras, essa tecnologia é diferente das outras,

como exemplo o autor cita a televisão onde as pessoas precisam aguardar o horário

da programação ou o rádio em que é preciso aguardar que toque a música que o

indivíduo gostaria de ouvir. Antônio Lopes Marinho (2016) ainda ressalta outro

motivo que levou ao crescimento maçante dessa tecnologia, sendo ele o fato de que

todos os dias são desenvolvidas e publicadas novas aplicações web de domínio

público ou privado.

2.5 O AUMENTO DO USO DA INTERNET

De acordo com Ferraz (2017), por meio deste instrumento de comunicação

atingiu-se o marco de 50 milhões de usuários em menos de quatro anos após o seu

Page 17: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

20

lançamento, o que enfatiza o potencial desta tecnologia, pois segundo o autor,

quando comparado ao telefone observa-se uma diferença, visto que este meio de

comunicação levou 75 anos para obtenção do mesmo número de usuários e ainda,

se equiparado ao rádio é notório uma disparidade, dado que levou 38 anos para

alcançar esta mesma quantidade de ouvintes. Cavallini (2008) corrobora e

complementa, afirmando que a tecnologia que mais aproximou-se deste marco foi a

televisão, está por sua vez levou 13 anos para conquistar esta quantidade de

telespectadores, ainda relata que até mesmos os celulares levaram 52 anos.

Cavallini (2008) atribui o crescimento da internet ao fato de que as gerações

atuais de pessoas já nascem convivendo com a tecnologia, desta forma se tornam

capazes de aprender e utilizar com mais facilidade, então este concluí que a própria

tecnologia por si só, se auxilia a propagar-se. Considerando este contexto, nota-se

que esta linha de raciocínio tem sentido, afinal indivíduos de gerações anteriores

apresentam uma maior dificuldade frente às inovações.

Entretanto, Ferraz (2017) alega que a internet ainda é considerada uma

tecnologia jovem e recente que independente do tempo está em constante mutação,

então esta camufla bem sua idade, pois existe desde o século XX e apesar da

quantidade de usuários ter crescido de forma demasiada e levando em consideração

que continue crescendo ao longo do tempo, ainda há quem não possua acesso a

este instrumento de comunicação.

Segundo o pensamento de Cavallini (2008) mesmo com o demasiado

crescimento da internet, ainda se encontram desafios pertinentes a sua

implementação em meio a sociedade, esse pensamento é enfatizado quando o autor

declara que um grande desafio é levar a internet até os consumidores e não apenas

apresentá-la a eles.

2.6 BENEFÍCIOS ADVINDOS DO SURGIMENTO DA INTERNET

Santos (2010) afirma que inúmeras pessoas, empresas, organizações e

governos se favoreceram do surgimento dessa tecnologia e da evolução deste meio

de comunicação eletrônico, dentre os benefícios é importante citara facilidade de

conseguir informações rapidamente, comprar ou expor seus produtos em uma loja

Page 18: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

21

online, pagar contas através do site ou aplicativo do banco, tudo isto instaurou uma

comodidade e melhor qualidade de vida.

Lessing (2004) corrobora com o pensamento acima, quando assegura que a

internet se tornou parte do cotidiano das pessoas, ou melhor, integrou-se as no dia a

dia da humanidade, trazendo comodidade através de uma comunicação veloz e

além de tudo, ainda reduziu despesas, pois facilitou o acesso a informações e tal

facilidade está ocasionando mudanças no mundo. Outro diferencial desta tecnologia,

mencionado por este autor é o fato de a internet possibilitar que algo seja

compartilhado com uma quantidade inúmera de pessoas de modo imediato, isto

ocorre ao publicar ou compartilhar algo.

Cavallini (2008) relata que outro benefício advindo do avanço tecnológico da

internet é que esta trouxe consigo a possibilidade do consumidor fazer pesquisas

para obter informações a respeito de produtos ou serviços, desta forma é possível se

informar previamente e pressionar a concorrência, afinal existem inúmeras lojas/sites

online ao alcance deste, como se já não bastasse, ainda existem sites

desenvolvidos com o objetivo de realizar comparação de valores, estando de acordo

ou não as empresa têm de se adequar a este cenário, pois diante desta facilidade os

consumidores se tornaram mais exigentes, afinal para encontrar um concorrente são

necessários apenas uns cliques, mas por outro lado isto traz um pequeno problema

que afeta as empresas, o fato de que essa disputa no mercado acaba esmagando e

diminuindo gradativamente a margem de lucro dos negócios.

Page 19: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

22

3. OS DISPOSITIVOS MÓVEIS E SUAS PARTICULARIDADES

3.1 DEFINIÇÕES DE DISPOSITIVOS MÓVEIS

Silva (2016) define que independente da quantidade de modelos e versões de

aparelhos existentes, praticamente todos os dispositivos móveis podem ser

subdivido em três extensos grupos, são eles: computadores móveis, tabletes e

celulares. Garcia (2017) corrobora que os dispositivos móveis podem ser subdividos

desta forma, entretanto este autor complementa que estes dispositivos podem ser

caracterizados como aparelhos portáteis que possuem conexão com a internet.

Entretanto, Santos (2013) alega que os dispositivos móveis são simplesmente

tecnologias portáteis que denotam mobilidade ao serem transportadas por seus

usuários. Em outras palavras, o autor afirma que os dispositivos móveis podem ser

conceituados como uma ferramenta de comunicação de qualquer local a qualquer

horário com um indivíduo qualquer ou até mesmo ter acesso a diferentes

informações ou conectar-se aos websites da internet.

Silva (2016) corrobora com o pensamento acima, pois este assegura que os

dispositivos móveis são aparelhos aos quais as pessoas podem levar para todos os

lugares, por este motivo são chamados de “dispositivos móveis”. Embora o conceito

de dispositivos móveis esteja diretamente relacionado aos aparelhos celulares, estes

não são os únicos desta categoria, pois até mesmo um rádio de pilha pode ser

carregado por uma pessoa, portanto também poderiam ser visto como um

dispositivo móvel.

3.1 EVOLUÇÃO DOS DISPOSITIVOS MÓVEIS

Os smartphones originaram-se da junção de duas tecnologias diferentes, são

elas: os telefones celulares que existem desde 1980 e os Personal Digital Assistants

mais conhecidos como PDA’s que se tornaram mais populares por volta da década

de 1990. Os telefones celulares eram responsáveis pela comunicação com

mobilidade, já os PDA’s por sua vez funcionavam como assistentes pessoais ou

corporativos que serviam pata armazenar informações (QUEIROZ, 2018).

.

Page 20: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

23

Em relação ao contexto histórico dos celulares, de acordo com Garcia (2017)

a companhia Erickson em 1956 apresentou o primeiro conceito de celular, essa ideia

deu introdução ao desenvolvimento dos dispositivos móveis. Entretanto, apenas no

ano de 1973 foi produzido o primeiro dispositivo celular e este somente passou a ser

fabricado em grande escala para comercialização em 1983. Silva (2016)

complementa que em 1993 a IBM lançou o “Simon”, este foi o primeiro telefone

móvel que possuía uma tela com percepção de toques, esta evolução ficou

popularmente conhecida como touch-screen. Outro fator interessante é que o Simon

também foi o primeiro celular capaz de enviar e receber e-mails, comumente

conhecido como correio eletrônico.

Logo, no ano de 2007 o Iphone foi lançado pela empresa Apple. Segundo

Pereira (2014) esta foi a primeira espécie de smartphone que de fato conquistou o

mercado. Como evolução, este telefone celular veio com funções que

impressionaram as pessoas da época, pois o dispositivo realizava reproduções

audiovisuais, possuía câmera digital, acessava a internet, enviava mensagem de

texto (SMS) e continha até mesmo suporte a vídeo chamadas, comumente

chamados de “FaceTime”. É válido ressaltar que houve um avanço na interação com

os usuários, pois esta passou a acontecer por meio de uma tela com sensibilidade

ao toque e por meio de um teclado virtual. Como consequência deste lançamento,

uma revista de notícias de nome “Time”, que teve sua publicação nos Estados

Unidos, anunciou o “iPhone” como a melhor invenção do ano de 2007. Deste modo,

a fabricante deste dispositivo, a Apple, alegou ter reinventado o telefone em seu

discurso de apresentação do produto.

Em 2008 a Google fez o lançamento do Andoid, caracterizado como um

sistema operacional para mobile. A empresa possuía a intenção de propagar a

utilização da internet por meio do celular, que a partir daí passou a ser considerado

pela Google como um dispositivo integrado aos serviços que a mesma oferece.

Posteriormente, ainda no ano de 2008, a Apple inaugurou sua loja de aplicativos,

que possibilitou a prestação de suporte de software, que podia ser acessada por

meio do próprio Iphone (GARCIA, 2017).

Por fim, Pereira (2014) alega que em outubro do ano de 2011 houve o

lançamento do Iphone modelo 4S. Esse dispositivo apresentado pela Apple contava

Page 21: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

24

com um assistente de voz, chamado de Siri. Já no ano de 2013, a empresa lançou

também uma modelo de Iphone de custo mais baixo, denominado 5C.

Para Mateus e Brito (2011) os tablets foram uma importante tendência da

tecnologia para uso pessoal que surgiu mais precisamente em 2010. Deste modo,

para melhor entendimento, os tablets são conceituados como computadores em

formato eletrônico de prancheta compostos por teclado virtual e tela com

sensibilidade a toques. Segundo os autores dentre as infinidades de funcionalidades

apresentadas por este dispositivos destacam-se o tamanho de sua tela, que vão de

sete a dez polegadas, o que permite a leitura de e-Books com maior comodidade,

além de possuir uma característica bem sugestiva que é ser de peso leve, o que

remete ao formato de um livro.

Já no que se refere à evolução da tecnologia do notebook tem-se que ele

surgiu no ano de 1981, criado por Adam Osborne e foi lançado com o intuito de ser

um computador capaz de caber embaixo do assento de um avião. Desde a sua

criação em 1981 até a tecnologia utilizada atualmente em 2019 houve um avanço

significativo tanto no âmbito do hardware quanto em termos de usabilidade e

funcionalidade (SANTOS, 2013).

3.3 A INFLUENCIA DOS DISPOSITIVOS MÓVEIS NA VIDA DAS PESSOAS

Garcia (2017) afirma que ao longo do tempo, os dispositivos utilizados para

comunicação se tornaram móveis, isto advém do grande avanço tecnológico que

evolucionou estes aparelhos e também o fato destes serem portáteis, essa facilidade

em transportá-los trouxe consigo novas formas de se comunicar, relacionar e

compartilhar informações. O autor ainda complementa que essa mobilidade originou

novos costumes e desencadeou uma mudança comportamental em todo o mundo,

pois transformou as pessoas em usuários on-line. Deste modo, originou-se o que ele

intitulou de sociedade mobile, mas anteposto ele destaca que a invenção da

tecnologia smart, que por sua vez foi responsável por tornar os celulares conectados

a internet e que deu origem ao conceito de ‘smartphone’, este foi o feito que teve

maior contribuição para essa transformação supracitada.

De acordo com Knittel (2014), os celulares tornaram-se ferramentas cruciais

para uso diário das pessoas, por meio disso, houve uma mudança na conduta dos

Page 22: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

25

usuários, pois tornou possível navegar pelo mundo através desse dispositivo sem

sequer sair do lugar. Além disto, nota-se uma modificação no padrão de consumo,

pois segundo o autor os consumidores realizam suas compras online, mas não antes

de pesquisar sobre o produto que pretende adquirir e posteriormente consultá-lo em

inúmeros anunciantes.

3.4 DADOS QUE EVIDENCIAM O AUMENTO DO USO DOS DISPOSITIVOS

MÓVEIS

Segundo os dados divulgados pela Agência Nacional de Telecomunicações

somente referente ao mês de agosto do ano de 2017, a telefonia móvel atingiu a

marca de 242.167.504 linhas móveis em funcionamento (ANATEL, 2017). Isso indica

que é notoriamente grande o número de pessoas que possuem acesso a um

telefone móvel, seja para realizar ligações, ou até mesmo usufruir de outros

benefícios destes dispositivos.

Para Webshoppers (2018) houve mudanças no comportamento das pessoas,

o que evidencia as migrações dos usuários das lojas físicas para as lojas virtuais e,

certamente, a ampliação do número de usuários dos dispositivos móveis. Por isso,

essencialmente no ano de 2017 foi observado que 27,3% das compras online foram

efetuadas por meio de smartphones ou tablets. Entretanto, já no ano de 2019 as

compras realizadas através de um dispositivo móvel simbolizam 42,8% do total de

pedidos efetivados no Brasil via comércio eletrônico (WEBSHOPPERS, 2019).

Figura 1 – Pessoas que possuem ou não um smartphone e/ou tablet.

Fonte: Hernandez et al. (2012, p. 21)

Page 23: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

26

A Figura 1 mostra uma pesquisa realizada para demonstrar a quantidade de

pessoas em uma determinada amostra que possuem um dos dois dispositivos

móveis (smartphone ou tablet) ou que não possuem nenhum deles. Deste modo, é

possível observar que cerca de 41% dos participantes possuem pelo menos um

smartphone, ou ainda melhor, 14% das pessoas afirmaram ter os dois dispositivos e

4% disseram ter um tablet. Ao analisar o gráfico da Figura 1 também é possível

observar que somado as porcentagens das pessoas que possuem um smartphone

e/ou tablete tem-se que 59% dos indivíduos que participaram desta pesquisar

possuem ao menos um destes dois dispositivos.

Já Webshoppers (2019) traz um dado que evidencia o quanto os dispositivos

móveis vêm aumentando o seu potencial, pois até chegou a ultrapassar os números

que caracterizam o crescimento do próprio e-commerce tradicional. Visto que, ao

analisar o progresso referente ao ano de 2018, tem-se que o comércio eletrônico

total, obteve um aumento de 12%, enquanto o m-commerce (Mobile Commerce)

teve o crescimento de 41% no mesmo período.

Entretanto, Guerrero (2017) apresenta um diferente contexto, relatando um

avanço ainda maior nas tecnologias voltadas para dispositivos móveis que

contribuem para a disseminação destes dispositivos. O autor assegura que com o

surgimento da Inteligência Artificial (IA) o modo como os usuários interagem com os

seus dispositivos está mudando e que no ano de 2019, 20% das pessoas que

compram pela internet interagem com seus smartphones por meio de Assistentes

Pessoais Virtuais (APV) como a Siri que somente pode ser usada por smartphones,

computadores e tablets da empresa Apple ou a Alexa que foi lançada no ano de

2014 pela Amazon (MAIOLINO, 2017).

Webshoppers (2018) declara que ao comparar o primeiro semestre do ano de

2017 com o mesmo período do ano de 2018 é possível notar que houve um

aumento de 30% no faturamento das vendas realizadas por meio dos dispositivos

móveis, dado que, nos primeiros seis meses do ano de 2017 o faturamento foi de R$

5,2 bilhões. Já no primeiro semestre de 2018 foi constatado que 32% do total de

transações comerciais realizadas via comércio eletrônico foram efetuadas através de

dispositivos móveis, e ainda, com o faturamento de R$ 6,7 bilhões somente neste

período.

Page 24: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

27

Na Figura 2 é possível observar a porcentagem de acessos realizados por

meio de dispositivos móveis (sessões) e por meio de computadores em comparação

aos anos de 2016 e 2017 em diferentes países. O aumento do uso de dispositivos

móveis em relação aos computadores é notório em todos os países apresentados no

gráfico presente na Figura 2. Entretanto, o Reino Unido e a Itália foram os dois

países que demonstraram o maior crescimento no uso dos dispositivos móveis,

ultrapassando a marca de 50% no ano de 2017.

Figura 2 – Alteração da percentagem de sessões de visualização em

computadores e dispositivos móveis de 2016 a 2017.

Fonte: Guerrero (2017, p. 8)

Page 25: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

28

Por fim, Webshoppers (2018) afirma que a cada 10 (dez) brasileiros, 7 (sete)

já possuem um smartphone. Esse dado contribui para a disseminação do uso dos

dispositivos móveis em dois aspectos diferentes, visto que, ao possuir um

smartphone, além de contribuir para o aumento das vendas da categoria de

Telefonia/Celulares (que representam 18,2% do total de faturamento do comércio

eletrônico em 2019), ainda colabora para a ampliação do Mobile Commerce (m-

commerce) que é caracterizado por compras efetuadas através de dispositivos

móveis, tais como: celulares, tablets.

Page 26: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

29

4. CARACTERISTICAS DO DESIGN RESPONSIVO

O design responsivo unifica um projeto, deste modo não é necessário criar

versões do projeto especificas para cada dispositivo, portanto tem-se um menor

custo no desenvolvimento, torna-se mais simples fazer manutenção, garante uma

melhor experiência de navegação aos usuários e os mecanismos de pesquisas,

como o Google, Bing e Yahoo, priorizam sites que utilizam essa tecnologia, os

atribuindo posições superiores em pesquisas, desta forma esse conceito se tornou

um diferencial competitivo para as organizações que almejam conquistar posições

melhores nos buscadores (GOMES, 2014).

4.1 CONTEXTO HISTÓRICO DO DESIGN RESPONSIVO

No que tange as pesquisas em relação às origens do design responsivo, de

acordo com a reflexão de Tomazini e Lopes (2019) nota-se que o precursor do termo

“design reponsivo” foi Ethan Marcotte, que publicou em 2010 um artigo que reuniu

os conceitos já existentes na época e lhes deu uma nova definição e com base nisto

ele mudou o pensamento dos desenvolvedores web que se voltaram para essa

evidente tendência, ou melhor, necessidade do mercado.

Corrêa (2013) corrobora com o pensamento supracitado e explica mais

detalhadamente, alegando que a ideia de adaptação a diferentes dispositivos partiu

de um site que desde o ano de 1998 realiza publicações de livros e artigos,

chamado “A List Apart”. Entretanto, foi em 2010 que o escritor Ethan Marcotte trouxe

para a sociedade um conceito inovador que carregou consigo uma mudança no

modo de enxergar a web em um artigo simples e envolvente para a realidade da

época.

Após o pronunciamento de Ethan, surgiu a ideia de adaptação de layout das

páginas web de acordo com a resolução de tela do dispositivo que está sendo

utilizado, por meio do redimensionamento de imagens de forma automática para que

se tornasse possível caber na tela sem sobrecarregar a transferência de dados.

Sucedeu-se também a idealização de simplificar elementos da tela para dispositivos

móveis, com a adaptação de tamanho nos botões e links para interfaces (CORRÊA,

2013).

Page 27: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

30

Assim, Gomes (2014) assegura que as técnicas para o desenvolvimento de

sites, ou mais precisamente, o desenvolvimento de layouts para a web é

caracterizado como um processo evolutivo iniciado desde a invenção da internet.

Diante disso, é notório que a utilização de telefones móveis e tablets como

dispositivos de navegação web é frequente, o que traz como consequência a

necessidade de projetar páginas para a internet com sua devida adaptação para

estes diferentes dispositivos móveis. E então, como uma solução para esses

problemas de diferentes tamanhos de interface, surge o design responsivo.

4.2 ESTRUTURA DE UM LAYOUT PARA WEB

Para entender como funciona a estrutura básica para um site com layout

responsivo é preciso conhecer as tecnologias, linguagens e frameworks que são

responsáveis pela aparência de um website, tais como: HTML, CSS, Layout Fluído,

media queries e Bootstrap. Para maior entendimento, estes assuntos serão melhor

abordados nos próximos parágrafo.

Previamente, precisa-se quebrar o paradigma de que design responsivo é

exclusivamente tornar um layout ajustável a múltiplas resolução de tela, pois este

conceito vai além disto, esclarecendo-se como um design capaz de facilitar a

interação do usuário, independentemente das características do dispositivo utilizado

pelo mesmo, de modo que expanda ou contraia, mantendo-se sempre acessível e

usável (SILVA, 2014).

4.2.1 O hypertext markup language (html)

Madeira (2007) alega que no ano de 1995, nasceu o primeiro navegador web.

Juntamente com ele, foi inventado o protocolo HTML. O autor assegura que a

linguagem HTML (Hypertext Markup Language), mais conhecida no o português

brasileiro por linguagem de marcação para hipertexto, é definida como uma

linguagem padronizada para a escrita apresentada nas páginas da internet.

Portanto, ao que se refere ao lado do servidor, é indiferente se as páginas são

construídas de forma estática ou dinâmica, pois no computador do usuário, o

Page 28: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

31

navegador sempre irá se comportar da mesma forma, visto que, ele opera com uma

sequência de caracteres que retornam elementos escritos em HTML.

No entanto Corrêa (2013) apresenta um conceito mais resumido quando

afirma que o HTML é uma linguagem de marcação que possui o objetivo principal de

facilitar a manipulação de elementos contidos em um website, dando a possibilidade

ao desenvolvedor de realizar modificações nas características de objetos de modo

não intrusivo e que seja capaz de transmitir transparência aos internautas. O autor

afirma que a característica principal dessa linguagem são as “tags”, que se

caracterizam como marcações que servem para a inserção de tipos de objeto ou

atributos de um objeto por intermédio de comandos escritos em língua estrangeira

(em inglês) e em números.

4.2.2 A folha de estilo css

De acordo com Corrêa (2013) o CSS (Cascading Style Sheets) é conceituado

como uma "folha de estilo" que contém diferentes “camadas” que servem para

definirem a aparência em páginas web que utilizam linguagens específicas de

marcação como o HTML. Deste modo, é possível observar que o CSS é responsável

por definir o modo como serão mostrados os elementos presentes no código de uma

página da rede mundial de computadores e seu maior benefício, segundo o autor, é

realizar a distinção entre o conteúdo de uma página web e o formato de sua

apresentação.

Diante deste cenário, é notório que o surgimento da CSS ocasionou

consequências, tais como: o desenvolvimento de códigos de maior simplicidade

tanto na manutenção quanto na atualização, vistos com melhores olhos pelos

mecanismos de busca e indexação como o Google, e principalmente capazes de se

comportarem de forma fluída ou fixa, tudo a depender do dispositivo do usuário.

Além disso, as CSS3 (versão mais atual do CSS em 2019) conseguiram criar

funcionalidades de estilização que causam impacto visual, e trouxeram facilidades

para os desenvolvedores, como por exemplo, reduzir consideravelmente a marcação

em HTML que era preciso com a finalidade de conseguir criar bordas mais

arredondadas (SILVA, 2014).

Page 29: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

32

4.2.3 O conceito de layout fluído

Um layout fluído advém de uma teoria em que não há medidas específicas

em um layout, assim, essa ferramenta fica responsável por realizar os ajustes

necessários de forma “natural” e automática, em outros termos, seja qual for a

resolução da tela, o ideal é que não haja barra de rolagem e nem conteúdos

“cortados”. Deste modo, entende-se que a adaptação das telas ocorre consoante

com a largura que o dispositivo suporta, assegurando todos os elementos e

classificando aqueles que podem ou não ter o seu tamanho modificado. O layout

fluído opera por meio de grids que servem para posicionar e alinhar os blocos de

conteúdos presentes em um website (CORRÊA, 2013).

Silva (2014) anuncia que assim como o nome revela, o layout fluído diz

respeito a atuação com fluidez advinda de projetos responsivos independente do

navegador ao qual o usuário acessa, desempenhando o seu papel por meio de

porcentagens e adequando o seu conteúdo a qualquer resolução de tela. Em outras

palavras, o layout fluído é definido como um recurso onde os valores CSS são

declarados em medidas relativas como porcentagem e ems e não como comumente

ocorre nos dispositivos de acesso a internet que utilizam medidas absolutas como

pixeis e mm.

4.2.4 As media queries

Somente na terceira versão do CSS, ou ainda no CSS3, que a empresa

responsável pela manutenção e atualização desse recurso, a W3C, lançou as media

queries. Para melhor entendimento, define-se que uma media queries não permite

apenas atingir a adaptação para distintas resoluções, como também tem como

objetivo obter as características físicas do dispositivo que está sendo utilizado pelo

usuário. (CORRÊA, 2013).

Tomazini e Lopes (2019) declaram que as media queries são uma solução

para problemas relacionados a não suficiência do layout fluído. Deste modo,

observa-se que as media queries possibilitam a capacidade de mostrar, ocultar e

redimensionar os elementos de acordo com a resolução do dispositivo que esteja em

uso no momento de visitação da página web. O autor complementa afirmando que

Page 30: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

33

essa ferramenta surgiu por meio de um recurso chamado media types que já existia

no CSS, entretanto dessemelhante as media types que tratam do tipo de dispositivo,

as media queries atuam no âmbito da resolução de tela.

4.2.5 Introdução ao Bootstrap

Para Siqueira (2017) o Bootstrap surgiu em 19 de agosto do ano de 2011,

quando Mark Otto e Jacob Thorton fizeram um pronunciamento por meio de um

artigo publicado no Twitter, anunciando o lançamento do framework alegando ser a

solução para o problema ocorrido na parte front-end no momento do

desenvolvimento da rede social Twitter. Entretanto somente entre

22 e 29 de outubro de 2011 foi oficialmente lançada uma versão completa e pronta

para ser usada do Bootstrap.

O surgimento dessa ferramenta é justificado de forma mais detalhada,

segundo a explicação de Corrêa (2013), pois ele afirma que antes da implementação

do Bootstrap, inúmeras bibliotecas eram utilizadas no desenvolvimento de páginas

web, o que ocasionava inconsistências e uma frequência recorrente de manutenção.

O Bootstrap é um framework que utiliza as linguagens HTML, CSS e

JavaScript, sendo uma referência quando tratasse de responsividade e adaptação

em navegadores, dentre suas características mais relevantes estão a praticidade,

facilidade de uso e entendimento, uma vez que possui vasta documentação e

comunidades de suporte. Esta ferramenta é um dos principais frameworks utilizados

para desenvolvimento front-end no mundo, além de ter boa receptividade no Brasil

também, isso atribui-se ao fato de ser uma ferramenta gratuita e de código aberto

(SIQUEIRA, 2017).

4.3 FERRAMENTAS DE TESTE

Tratando-se de projetos web com design responsivo os testes podem ser

realizados por meio dos próprios navegadores, de forma simples, apenas

redimensionando a janela e avaliando o comportamento do site, os navegadores até

possuem ferramentas nativas para que desenvolvedores possam utilizar e realizar

teste (SILVA, 2014).

Page 31: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

34

Outra ferramenta que testa funcionalidades de websites por meio de métricas

é o PageSpeed Insights (PSI, em inglês) da empresa Google, esse instrumento de

teste serve para informar o real desempenho de uma página web tanto para os

dispositivos móveis quanto para os computadores, avaliando fatores como

velocidade e otimização, em outros termos, este recurso da Google analisa

aspectos como as configurações do servidor, a estruturação do HTML e a utilização

de recursos externos, tais como: imagens, CSS e JavaScript, e mais, a ferramenta

ainda dá sugestões de melhorias que podem ser realizadas com a finalidade de

aprimorar o website que está sendo testado (GOOGLE, 2019).

Page 32: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

35

5. CONSIDERAÇÕES FINAIS

O objetivo principal deste trabalho foi atingindo, visto que, o intuito deste era

fazer com que as pessoas tomassem conhecimento das técnicas propostas pelo

design responsivo, que advém como uma solução para o desenvolvimento de

aplicações que pudessem se adaptar para qualquer dispositivo, desta forma não é

necessário acompanhar todas as evoluções tecnológicas e novas resoluções que

surgirem.

Na seção 2, o primeiro objetivo secundário foi atingindo, este contextualizou

que o surgimento da internet nasceu da necessidade de comunicação no período da

guerra fria e mais adiante se popularizou com o barateamento da rede, isto tornou

possível que pessoas comuns tivessem acesso a essa tecnologia. Entretanto, o fator

que mais contribuiu para o crescimento e propagação da internet é dado ao fato de

funcionar sob requisição, em outros termos, os internautas podem acessar o que

desejam quando quiserem. Deste modo, é possível observar os aspectos que

contribuíram para a disseminação da rede mundial de computadores.

Já na seção 3, o segundo objetivo secundário foi atingindo, nesta foi

apresentado que os dispositivos móveis são aparelhos são portáteis que possuem

mobilidade ao serem transportados, além de possuírem conexão com a internet.

Diante da crescente necessidade das pessoas de se conectarem a internet, houve

um aumento no número de produção de dispositivos móveis que atendessem a essa

exigência do mercado. Assim, é possível observar a constante evolução e utilização

dos aparelhos mais populares como celulares, tablets e notebooks, que acarretaram

um maior enfoque no desenvolvimento de páginas web que fossem capazes de

adaptar-se a qualquer um desses dispositivos.

Por fim, na seção 4 o terceiro objetivo secundário foi parcialmente atingindo,

visto que houve uma grande dificuldade em encontrar conteúdos de fontes

confiáveis, atuais e no idioma brasileiro. Diante deste cenário, ainda assim, este

capitulo apresenta os principais conceitos relativos ao design responsivo, apontando

que em uma sociedade onde as pessoas estão sempre em contato com a internet

através dos dispositivos móveis, em destaque os celulares, evidencia-se que todas

as aplicações necessitam se adaptarem a essa nova demanda, surgindo assim o

conceito de design responsivo, que traz consigo soluções para padronizar a

Page 33: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

36

programação para múltiplos dispositivos. O desenvolvimento de forma responsiva

pode ser feito de forma facilitada através frameworks como o Boostrap ou utilizando

as media queries que é uma solução nativa da linguagem CSS, desde que

compreenda o conceito de layout fluído.

Para concluir, como recomendação de tema para futuros trabalhos

acadêmicos, os quais apesar de não terem sido abordados nesta, são de grande

relevância para esse ramo do design responsivo, são eles: o conceito de mobile-first,

a importância do design responsivo em termos de usabilidade e design responsivo

para aplicativos.

Page 34: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

37

REFERÊNCIAS

ANATEL. Telefonia móvel registra aumento de 156.155 linhas em agosto. Disponível em: <https://www.anatel.gov.br/institucional/component/content/article/46-noticias/1769-telefonia-movel-registra-aumento-de-156-155-linhas-em-agosto>. Acesso em: 4 out. 2019.

BRESOLIN, Letícia; SANTIM, Itacir José.A Era da Astronáutica: Breve História da Corrida Espacial. 2013. 17 f. Dissertação (Graduação em História) - Centro Universitário Univates, Universidade do Vale do Taquari, Lajeado, 2013.

CASTELLS, Manuel. A galáxia da internet: reflexões sobre a internet, os negócios e a sociedade. Rio de Janeiro: Zahar, 2003.

CAVALLINI, Ricardo. O marketing depois de amanhã : explorando novas tecnologias para revolucionar a comunicação. São Paulo, Ed. do Autor, 2008.

CORRÊA, Gabriel Gonçalves. Aplicações Empresariais Adaptativas ao Dispositivo. 2013. 39 f. Trabalho de Conclusão de Curso (Bacharelado em Ciência da Computação) - Fundação Educacional do Município de Assis, Assis, 2013.

CRUZ, Sarah Cristina Silva. Estudo comparativo entre frameworks de front-end. 2017. 70 f. Trabalho de conclusão de curso (Bacharelado em ciência da computação) - Universidade Federal de Pernambuco, Recife, 2017.

FERRAZ, Reinaldo. Tendências da web. São Paulo, Editora Senac, 2017.

GARCIA, Marilene Santana dos Santos. Mobilidade teológica e planejamento didático. São Paulo: Editora Senac de São Paulo, 2017.

GOMES, Cláudia Raquel Castro. Responsive Web Design: um novo modelo integrador para a informação de hoje. 2014. 84 f. Relatório de Estágio (Mestrado em Design Editorial) – Escola Superior de Tecnologia de Tomar, Instituto Politécnico Tomar, Tomar, 2014.

GOOGLE. Sobre o PageSpeed Insights. 2019. Disponível em: < https://developers.google.com/speed/docs/insights/about>. Acesso em: 07 out. 2019.

GUERRERO, Marcos. Dispositivos Móveis: A derradeira companhia de viagem. Disponível em: <https://www.edreamsodigeo.com/wp-content/uploads/sites/19/2016/12/eDreamsODIGEO_Trends_Mobile_POR.pdf>. Acesso em: 4 out. 2019.

HERNANDEZ, Daniel Monteiro. et al. A Popularização dos Smartphones e Tablets. 2012. 38 f. Trabalho de Pesquisa (Técnico em Informática) - Etec de Hortolândia, Centro Estadual de Educação Tecnológica Paula Souza, Hortolândia, 2012.

Page 35: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

38

KNITTEL, Tânia F. A utilização de dispositivos móveis como ferramenta de ensino aprendizagem em sala de aula. 2014. 167 f. Dissertação (Mestrado em Tecnologia da Inteligência e Design Digital) – Pontifícia Universidade Católica de São Paulo, São Paulo, 2014.

LESSIG, Lawrence. Cultura Livre. Disponível em: <http://www.mariopersona.com.br/ebook/empresa.pdf>. Acesso em: 5 set. 2019.

MADEIRA, Mauro N. Comércio Eletrônico: livro didático. Palhoça: Unisul Virtual, 2007.

MAIOLINO, Thais Maximus. Automatizando tarefas por voz. 2017. 52 f. Projeto Final (Bacharelado em Ciência da Computação) – Universidade Federal Fluminense, Niterói, 2017.

MARINHO, Antônio Lopes. Desenvolvimento de aplicações para a internet.São Paulo, Pearson Education do Brasil, 2016.

MATEUS, Marlon de Campos; BRITO, Gláucia da Silva. Celulares, Smartphones e Tablets na Sala de Aula: Complicações Ou Contribuições? Disponível em: < https://educere.bruc.com.br/CD2011/pdf/5943_3667.pdf> . Acesso em: 4 out. 2019.

PEREIRA, Liliane Aparecida Pellegrini. O “iPhone” como objeto da sociedade de consumo. Disponível em: <http://www.portalintercom.org.br/anais/sudeste2014/resumos/R43-1452-1.pdf>. Acesso em: 3 out. 2019.

PERSONA, Mario. Sua empresa na Internet. Disponível em: <http://www.mariopersona.com.br/ebook/empresa.pdf>. Acesso em: 5 set. 2019.

QUEIROZ, L. R. IPhone, Android, e a consolidação da cultura do smartphone: o papel do IPhone e do Sistema Operacional Android como catalisadores da consolidação no mercado de smartphones em escala global. Revista Tecnologia e Sociedade. v. 14, n. 30, p. 47-70, jan./abr. 2018.

ROVAI, Kleber Ricardi. Tecnologias para web e para dispositivos móveis. Londrina : Editora e Distribuidora Educacional S.A., 2018.

SANTOS, Jefferson. Interface para Dispositivos Móveis. Dissertação de mestrado em tecnologia da inteligência e design digital. PUCSP, São Paulo, 2013.

SANTOS, Tamires dos. Exploração Sexual Via Rede de Internet. 2010. 94 f. Trabalho de Curso (Graduação em Direito) Fundação de Ensino Eurípides Soares da Rocha, Centro Universitário Eurípides de Marília – UNIVEM, Marília, 2010.

SILVA, Arthur de Almeida Pereira da. Design Resposivo: Técnicas, Frameworks e Ferramentas. 2014. Projeto de Graduação (Graduação) - Escola de Informática Aplicada da Universidade Federal do Estado do Rio de Janeiro (UNIRIO), Rio de Janeiro, 2014.

Page 36: LUCAS DOS SANTOS MARTINS · Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclusão de Curso (Graduação em Sistemas de Informação) – Faculdade Anhanguera

39

SILVA, Diego. Desenvolvimento para dispositivos móveis. São Paulo: Pearson Education do Brasil, 2016.

SILVA, Maurício Samy. Web Design Responsivo. São Paulo: Novatec Editora Ltda, 2014.

TOMAZINI, Marcos; LOPES, Luiz Fernando Braga. Web design responsivo – Bootstrap. Disponível em: < http://fcv.edu.br/admin/assets/repositorio_arquivo/014529452c44398122c6a634ad4e1755.pdf >. Acesso em: 7 out. 2019.

WEBSHOPPERS. Webshoppers: O mais completo relatório sobre o mercado de e-commerce. 37ª ed. 2018. Disponível em: <https://www.ebit.com.br/webshoppers/webshoppersfree> Acesso em: 04 out. 2019.

WEBSHOPPERS. Webshoppers: O mais completo relatório sobre o mercado de e-commerce. 38ª ed. 2018. Disponível em: <https://www.ebit.com.br/webshoppers/webshoppersfree> Acesso em: 04 out. 2019.

WEBSHOPPERS. Webshoppers: O mais completo relatório sobre o mercado de e-commerce. 39ª ed. 2019. Disponível em: <https://www.ebit.com.br/webshoppers/webshoppersfree> Acesso em: 04 out. 2019.