LUCAS DOS SANTOS MARTINS Elementos que levaram ao design responsivo. 2019. 39 f. Trabalho de Conclus££o

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