Click here to load reader

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

  • View
    0

  • Download
    0

Embed Size (px)

Text of LUCAS DOS SANTOS MARTINS · PDF file Elementos que levaram ao design responsivo. 2019. 39 f....

  • 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

Search related