Brasília
2019
LUCAS DOS SANTOS MARTINS
ELEMENTOS QUE LEVARAM AO DESIGN RESPONSIVO
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
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
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.
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.
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.
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.
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
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
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
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
