Click here to load reader
View
0
Download
0
Embed Size (px)
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