INTERFACE WEB UTILIZANDO DESIGN RESPONSIVO: UM smartphone, tablets e atأ© mesmo televisores com acesso

  • View
    2

  • Download
    0

Embed Size (px)

Text of INTERFACE WEB UTILIZANDO DESIGN RESPONSIVO: UM smartphone, tablets e atأ© mesmo televisores com...

  • UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ

    DEPARTAMENTO ACADÊMICO DE INFORMÁTICA

    ESPECIALIZAÇÃO EM TECNOLOGIA JAVA E DESENVOLVIMENTO PARA

    DISPOSITIVOS MÓVEIS

    MARCELA ELOISA PROSTT

    INTERFACE WEB UTILIZANDO DESIGN RESPONSIVO: UM ESTUDO

    DE CASO APLICADO A SMARTPHONES, TABLETS,

    COMPUTADORES E TELEVISORES

    MONOGRAFIA DE ESPECIALIZAÇÃO

    CURITIBA

    2013

  • MARCELA ELOISA PROSTT

    INTERFACE WEB UTILIZANDO DESIGN RESPONSIVO: UM ESTUDO

    DE CASO APLICADO A SMARTPHONES, TABLETS,

    COMPUTADORES E TELEVISORES

    Monografia de Especialização apresentada ao Departamento Acadêmico de Informática, da Universidade Tecnológica Federal do Paraná como requisito parcial para obtenção do título de Especialista em Tecnologia Java e Desenvolvimento para Dispositivos Móveis.

    Orientadora: Prof.ª Dr.ª Marília A. Amaral

    CURITIBA

    2013

  • AGRADECIMENTOS

    Certamente estes parágrafos não irão atender a todas as pessoas que

    fizeram parte dessa importante fase de minha vida. Portanto, desde já peço

    desculpas àquelas que não estão presentes entre essas palavras, mas elas podem

    estar certas que fazem parte do meu pensamento e de minha gratidão.

    Reverencio a Professa Dra. Marília A. Amaral pela sua dedicação e pela

    orientação deste trabalho e, por meio dele, eu me reporto a toda a comunidade da

    Universidade Tecnológica Federal do Paraná (UTFPR) pelo apoio incondicional.

    Agradeço a Prefeitura Municipal de São José dos Pinhais pela oportunidade

    de trabalhar o tema dessa monografia no estudo de caso.

    A todos os ex-colegas de trabalho da Prefeitura gostaria de externar minha

    satisfação de poder conviver com eles durante boa parte da realização deste estudo.

    Gostaria de deixar registrado também, o meu reconhecimento à minha

    família, principalmente ao meu esposo Antonio Rodrigues Barros, pelo carinho,

    amor, compreensão, sem o apoio deles seria muito difícil vencer esse desafio.

  • RESUMO

    PROSTT, Marcela E. Interface Web utilizando Design Responsivo: um estudo de caso aplicado a smartphones, tablets e televisores. 2013. Monografia (Especialização em Tecnologias Java e Desenvolvimento para Dispositivos Móveis) - Universidade Tecnológica Federal do Paraná. Curitiba, 2013.

    A crescente evolução da Internet móvel aquece cada vez mais o mercado dos dispositivos móveis, porém a carência no desenvolvimento de aplicações mobile para plataformas operacionais específicas e para aplicações web, também cresceu junto com este avanço tecnológico. Uma experiência, não tão agradável, nesta era pós-PC é acessar uma aplicação web em um dispositivo com tela pequena e perceber que todo o seu conteúdo também é reduzido, ilegível e de difícil navegação. Desenvolver uma aplicação web que seja adaptativa para dispositivos como smartphone, tablets e até mesmo televisores com acesso à Internet sem perder a navegabilidade, legibilidade do conteúdo e que seja de fácil manutenção, ou seja, que permita criar uma única aplicação para a enorme variedade de dispositivos existentes é algo ainda desconhecido para muitos desenvolvedores e gestores de TI e, este foi o foco deste trabalho, descobrir tecnologias de desenvolvimento web que auxiliem neste processo de adaptação de conteúdo e layout web convencionais para navegadores de dispositivos móveis de diversos tamanhos, focando em linguagens comumente utilizadas por programadores da área, buscando um método facilitador de manutenções sem o uso de grandes soluções extraordinárias ou frameworks complexos. Um estudo de caso foi desenvolvido para aplicar os conceitos obtidos, onde teve resultados bastante satisfatórios em diversos dispositivos, inclusive em televisores, e fez-se uso de métodos e tecnologias simples e bem conhecidas por desenvolvedores web.

    Palavras-chave: Dispositivos móveis. Design responsivo. Mobilidade. Interface

    Web.

  • ABSTRACT

    PROSTT, Marcela E. Web Interface using Responsive Design: a case study applied to smartphones, tablets, and televisions. 2013. Monografia (Especialização em Tecnologias Java e Desenvolvimento para Dispositivos Móveis) - Universidade Tecnológica Federal do Paraná. Curitiba, 2013.

    The growing trend of mobile Internet increasingly heated market of mobile devices , though the deficiency in the development of mobile applications for specific operating platforms and web applications has also grown along with this technological advancement. An experience, not so nice, in this post-PC is accessing a web application on a device with small screen and realize that all your content is also reduced, unreadable and difficult to navigate. Develop a web application that is adaptive devices like smartphone, tablets and even televisions with Internet access without losing navigability, readability of the content and it is easy to maintain, in order to create a single application for the huge variety of existing devices is something still unknown to many developers and managers, and this was the focus of this work, discovering web development technologies that assist in the process of adapting content and layout for conventional web browsers of mobile devices of various sizes, focusing on languages commonly used by programmers of the area, seeking a method of facilitating maintenance without the use of extraordinary solutions large or complex frameworks. A case study was developed to apply the concepts obtained, which had satisfactory results in various devices, including televisions, and made use of methods and technologies simple and well known to web developers.

    Keywords: Mobile devices. Responsive design. Mobility. Web Interface.

  • LISTA DE ILUSTRAÇÕES

    Figura 1 - Comportamento de um site responsivo ........................................ 18

    Figura 2 - Resoluções de telas ..................................................................... 19

    Figura 3 - A Casa do Código - Página web acessada através de um computador convencional.......................................................................................... 20

    Figura 4 - A Casa do Código - Página web acessada através de um dispositivo móvel ...................................................................................................... 21

    Figura 5 - Fork-CMS - Acesso à página web por diferentes dispositivos ...... 21

    Figura 6 - Mr. Simon Collison - Página web simples e responsiva ............... 22

    Figura 7 - Exemplo de atributos e valores em CSS ...................................... 24

    Figura 8 - Exemplo de estilo CSS para fontes, cores e tamanhos ................ 25

    Figura 9 - Medidas flexíveis no CSS ............................................................. 27

    Figura 10 - Layout flexível - Proporção dos elementos ................................... 28

    Figura 11 - Definindo um box-sizing ............................................................... 29

    Figura 12 - Limitando um layout fluido com max-width ................................... 30

    Figura 13 - Exemplo do funcionamento do viewport ....................................... 31

    Figura 14 - Comparativo entre Layout viewport e Visual viewport .................. 32

    Figura 15 - Testando a largura da página web com a mesma largura que tamanho real do dispositivo móvel ............................................................................ 33

    Figura 16 - Aplicação da metatag viewport para 320 pixels de largura ........... 34

    Figura 17 - Resultado do uso da metatag viewport com 320px de largura ..... 34

    Figura 18 - Aplicação da metatag viewport sem especificação da largura...... 35

    Figura 19 - Aplicação da metatag viewport com valor de escala .................... 35

    Figura 20 - Parâmetros do viewport ................................................................ 35

    Figura 21 - Viewport definido no CSS ............................................................. 36

    Figura 22 - Exemplo de inserção de um imagem com largura fixa ................. 36

    Figura 23 - Implementação da classe figure no CSS ...................................... 37

  • Figura 24 - Exemplo de uma imagem de grande resolução com largura fixa . 37

    Figura 25 - Propriedade CSS Max-width ......................................................... 37

    Figura 26 - Adequando a imagem ao elemento que a contem ....................... 38

    Figura 27 - Exemplo de implementação do atributo srcset do HTML5 ........... 38

    Figura 28 - Exemplo de implementação da função image-set() no CSS ......... 39

    Figura 29 - Layout fluido sem Media Queries ................................................. 40

    Figura 30 - Implementando o exemplo com media queries ............................ 40

    Figura 31 - Resultado do uso de Media Queries ............................................. 41

    Figura 32 - Exemplo de breakpoint definido para largura máxima de 600px .. 42

    Figura 33 - Implementação de breakpoint para medidas intermediárias......... 42

    Figura 34 - Esboço de interface para smartphone na orientação retrato com menu retraído ..........................................................................................