CENTRO EDUCACIONAL DA FUNDAÇÃO SALVADOR ARENA
FACULDADE DE TECNOLOGIA TERMOMECANICA
FLAVIA DE AZEVEDO MARQUES MIGUEL
JOSÉL...
1
FLAVIA DE AZEVEDO MARQUES MIGUEL
JOSÉLIA LEITE COSTA
DESENVOLVIMENTO DE SITES RESPONSIVOS UTILIZANDO O
FRAMEWORK BOOTSTR...
2
FLAVIA DE AZEVEDO MARQUES MIGUEL
JOSÉLIA LEITE COSTA
DESENVOLVIMENTO DE SITES RESPONSIVOS UTILIZANDO O
FRAMEWORK BOOTSTR...
3
AGRADECIMENTOS
Nossos agradecimentos mais sinceros a todos que contribuíram para que
esta pesquisa fosse realizada.
Agra...
4
“Ei, já que é para fazer coisas na vida, que sejam bonitas.”
Steve Jobs
5
RESUMO
A maneira que se navega na Internet mudou. Para atender essa mudança e
oferecer experiências de utilização consis...
6
ABSTRACT
The way to browse the Internet changed. To meet this change and provide
consistent user experiences for a wide ...
7
LISTA DE QUADROS
Quadro 1 - Tag <font> que é usada para definir atributos de cor, tamanho e família das
fontes.............
8
LISTA DE IMAGENS
Figura 1 - Comparação entre nascimentos de bebês, com a produção de aparelhos Android
e iPhones, Fonte:...
9
LISTA DE TABELAS
Tabela 1 - Constituição de uma regra de CSS...............................................................
10
LISTA DE SIGLAS
AWD - Adaptive Web Design
CGI – Comitê Gestor da Internet
CSS – Cascading Style Cheet
HTML – Hypertext ...
11
SUMÁRIO
LISTA DE QUADROS..................................................................................................
12
3.6. Media Types.................................................................................................43
3.7...
13
1. INTRODUÇÃO
Durante anos, as páginas web tiveram tamanho fixo e comportamento
previsível. Os layouts, antes estáticos...
14
Para se tornar um desenvolvedor web com domínio em responsividade,
demanda-se um tempo considerável de estudos nas técn...
15
1.1. Objetivo geral
Pesquisar e analisar frameworks front-end, com foco no desenvolvimento de
sites responsivos.
1.2. O...
16
Em relação ao cenário nacional, de acordo com o IDC Brasil (2014), a venda
de celulares inteligentes no Brasil cresceu ...
17
consiste em projetar a interface do site de forma que ela se adapte aos diversos
tamanhos de tela. Dessa maneira, é cri...
18
A metodologia define o tipo de pesquisa que se pretende fazer e as teorias
metodológicas que se pretende utilizar, esta...
19
No Capítulo 2 foi feita uma introdução à Internet e a evolução da Web,
levando até o cenário atual, que possibilita o d...
20
O capítulo 4 abordará o tema usabilidade. Uma das regras de usabilidade
mencionada diz que um site responsivo é uma boa...
21
2. CENÁRIO WEB ATUAL E AS TECNOLOGIAS DE DESENVOLVIMENTO
FRONT-END
Neste capítulo será apresentado uma breve descrição ...
22
2.2. A evolução Web
A Internet se expandiu pelo mundo graças aos avanços de banda larga e dos
diversos dispositivos cap...
23
Figura 2 - Site adaptado ao tamanho da tela, sem técnicas responsivas aplicadas
Fonte: Autoria Própria
2.4.HTML
2.4.1. ...
24
navegador como a informação deve ser apresentada ao usuário. O HTML não é
mais o responsável por definir a aparência em...
25
códigos gerados pelos programadores possam ficar mais organizados, bem
estruturados e com a utilização correta das marc...
26
pois a marcação de conteúdos deve ter um significado claro, ou seja, o valor
semântico do código deve ser respeitado.
2...
27
2.6.CSS
2.6.1. Definição
De acordo com Frain (2012) e o Grupo de Trabalho da W3C (2011), o
Cascading Style Sheets é uma...
28
Quadro 3 - Exemplo de aplicação de uma regra CSS em um parágrafo
Fonte: Autoria Própria
Nesse exemplo identificam se os...
29
Mixins são as funções que o Less permite que sejam criadas. Elas são úteis
quando a mesma coisa é usada repetidamente, ...
30
De acordo com o TIOBE (2015), a linguagem JavaScript é uma das nove
linguagens de programação mais utilizadas no mundo ...
31
Balduino (2015) relata que, aproveitando-se do iminente sucesso do Java,
que vinha conquistando cada vez mais espaço no...
32
desenvolvimento que usam dessas tecnologias para desenvolver sites e aplicações
aderentes aos novos requisitos dos nove...
33
3. WEB DESIGN RESPONSIVO
Neste capítulo será apresentado o conceito de desenvolvimento responsivo e
as técnicas e padrõ...
34
móvel, facilitando o uso, como por exemplo, para pessoas que tinham problemas ao
usar um computador, que são capazes de...
35
desenvolvimento, é possível utilizar melhor os espaços extras, pensando na melhor
maneira de dispor o conteúdo, aprovei...
36
De acordo com a definição de Gustafson (2011), O design adaptivo se trata
da criação de interfaces que se adaptem tanto...
37
O consenso é que ambas as tecnologias têm sua aplicabilidade. Há casos em
que AWD é preferível à RWD e vice-versa. Na E...
38
ofereça a melhor experiência para o maior número de usuários, atendendo desde
pessoas com necessidades especiais até li...
39
Figura 9 - Exemplo de um layout fixo de 960px de largura, modelo de layout fixo
3.4.2. Layout Fluido
Os layouts fluidos...
40
Fonte: Fielding, 2014, p. 83.
Figura 11 - Exemplo de layout fluido aberto em uma largura de 1600px
Fonte: Fielding, 201...
41
Figura 12 - Um exemplo de conversão de pixel para “em”, em uma largura de 960px
Fonte: Fielding, 2014, p. 80.
3.5. Grad...
42
De acordo com alguns autores, o uso de grids inibe ou limita a criatividade
dos designers. Por outro lado, outros autor...
43
Figura 14 - Grid Fluida
3.6. Media Types
De acordo com Caelum (2014), as media types permitem que se use estilos
difere...
44
Todos os navegadores modernos suportam esse media type print. Alguns
celulares antigos suportavam também o tipo de medi...
45
Se não for definido um tipo de mídia, será utilizado um padrão, porém, o
comportamento pode variar conforme o navegador...
46
Quadro 5 - Exemplo de estilo para dispositivos de 320px de tamanho
Fonte: Autoria Própria
Existem diversas opções de me...
47
Figura 15 - Demonstração do foco de uso das telas de acordo com a orientação
Fonte: Blog da Caelum, 2015
Além de declar...
48
Fonte: Autoria Própria
A grande maioria dos navegadores, independente do dispositivo, já oferecem
suporte para as media...
49
A página funciona como se tivesse 980px disponíveis. Quando é determinado
“245px” no CSS, é equivalente a 1/4 dessa tel...
50
3.9. Imagens e mídias flexíveis
3.9.1. Imagens Flexíveis
Conforme Kadlec (2013), atualmente existem três maneiras de se...
51
detalhes e que mesmo perdendo seu tamanho total, não perde o significado nem o
sentido proposto inicialmente.
Segundo F...
52
Figura 18 - Exemplo de imagem sem estilo max-width: 100%
Fonte: Marcotte, 2010, p. 45.
Figura 19 - Exemplo de imagem co...
53
Ainda conforme Marcotte (2010), os navegadores modernos já têm a função
de redimensionar as imagens, sem alterar seu fo...
54
Silva (2014a), também mostra que um conceito simples que pode ser aplicado
é o de redimensionar o vídeo conforme o tama...
55
os dados e as ações mais importantes do aplicativo. É necessário priorizar as
necessidades e funções e eliminar element...
56
maneira possível, para os mais diversos navegadores antigos ou mais limitados, é o
momento de acrescentar as funcionali...
57
4. USABILIDADE
Neste capítulo, será abordada a usabilidade. Quando se trata de
responsividade e do potencial de adaptaç...
58
De acordo com Krug (2006), uma interface pode apresentar um problema de
usabilidade, quando um determinado usuário ou u...
59
gerais do bom design de interface, pode aprimorar a usabilidade do artefato. A priori,
são utilizadas 10 heurísticas:
1...
60
7. Flexibilidade e eficiência de utilização: as ações de interface devem
ter diferentes formas de ser acionadas, dispor...
61
De acordo com Teixeira (2013) a experiência do usuário trata sobre definir as
razões pelas quais um problema precisa se...
62
Figura 20 - Áreas-chave para a metodologia de projeto centrada nos usuários
Ao pensar em um produto ou sistema deve-se ...
63
E durante a implementação, o profissional de UX faz uma interface entre o
time de designers e desenvolvimento. Enquanto...
64
5. FRAMEWORKS
A Web Responsiva já é uma realidade nos dias de hoje e já se tornou um
requisito essencial para muitas em...
65
5.2.Frameworks de front-end para desenvolvimento responsivo
5.2.1. Pure
De acordo com Dutson (2015), Pure está entre os...
66
O Pure tem a opção de personalização de componentes, pois, ao invés de
fornecer varios estilos, que teriam de ser reesc...
67
De acordo com Silva (2014b), o Foundation possui diversos diferenciais, entre
eles a semântica aplicada é um dos destaq...
68
O foco do Gridless é na compatibilidade com todos os navegadores. Por isso,
foi construído com base no princípio de pro...
69
Criado em 2010 hoje é open source, hospedado no GitHub que é um serviço
de compartilhamento de código e versionamento d...
70
Neste capítulo foram apresentados quatro frameworks que auxiliam no
desenvolvimento de sites responsivos. Os frameworks...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience
Próximos SlideShares
Carregando em…5
×

Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience

1.260 visualizações

Publicada em

A maneira que se navega na Internet mudou. Para atender essa mudança e oferecer experiências de utilização consistentes para um grande número de contextos, é necessário buscar as tecnologias de desenvolvimento que atendam a esses requisitos. Uma possibilidade de se adequar ao novo ambiente é utilizando o web design responsive. Ele é um conceito que possibilita à página web criada se adapte em qualquer tamanho de tela. Os componentes que tornam possível a responsividade são: o sistema de grids fluídas, imagens flexíveis e as media queries. Visando contribuir para que o design responsivo se integre cada vez mais, começaram a surgir frameworks que prometem facilitar o desenvolvimento de sites responsivos, levando em conta diferentes padrões de desenvolvimento e técnicas. O objetivo dos frameworks é facilitar o trabalho de designers e desenvolvedores, fornecendo componentes já tratados e prontos para utilização dentro de um contexto de desenvolvimento responsivo. Nesta monografia será demonstrado um referencial teórico que serve de embasamento para a demonstração da técnica de desenvolvimento responsivo e um protótipo de site com o uso do framework Bootstrap.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.260
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de user experience

  1. 1. CENTRO EDUCACIONAL DA FUNDAÇÃO SALVADOR ARENA FACULDADE DE TECNOLOGIA TERMOMECANICA FLAVIA DE AZEVEDO MARQUES MIGUEL JOSÉLIA LEITE COSTA DESENVOLVIMENTO DE SITES RESPONSIVOS UTILIZANDO O FRAMEWORK BOOTSTRAP COM APLICAÇÃO DE USER EXPERIENCE São Bernardo do Campo 2015
  2. 2. 1 FLAVIA DE AZEVEDO MARQUES MIGUEL JOSÉLIA LEITE COSTA DESENVOLVIMENTO DE SITES RESPONSIVOS UTILIZANDO O FRAMEWORK BOOTSTRAP COM APLICAÇÃO DE USER EXPERIENCE Trabalho de Conclusão de Curso, realizado sob orientação do Prof. Ms Eduardo Rosalém Marcelino, apresentado à Faculdade de Tecnologia Termomecanica como requisito para obtenção do título de Tecnólogo. SÃO BERNARDO DO CAMPO 2015
  3. 3. 2 FLAVIA DE AZEVEDO MARQUES MIGUEL JOSÉLIA LEITE COSTA DESENVOLVIMENTO DE SITES RESPONSIVOS UTILIZANDO O FRAMEWORK BOOTSTRAP COM APLICAÇÃO DE USER EXPERIENCE Trabalho de Conclusão de Curso – Faculdade de Tecnologia Termomecanica Comissão Julgadora Professor Ms. Eduardo Rosalém Marcelino Professor Ms. Flávio Viotti Denis Raison dos Santos São Bernardo do Campo 2015
  4. 4. 3 AGRADECIMENTOS Nossos agradecimentos mais sinceros a todos que contribuíram para que esta pesquisa fosse realizada. Agradecemos nossas famílias e amigos próximos pelo apoio e paciência durante toda essa etapa em nossas vidas, sempre nos incentivando com muito amor, carinho e compreensão. Em especial a família Magnani pelo acolhimento e incentivo a realização e conclusão deste trabalho. Ao nosso orientador, o professor Ms. Eduardo Rosalém Marcelino, pela dedicação, incentivo e confiança que tornaram possível a conclusão desta monografia, sempre nos honrando com seu conhecimento, experiência e mostrando o excelente profissional que é. À Faculdade de Tecnologia Termomecanica e todo seu corpo docente pelo suporte educacional oferecido ao longo de toda nossa jornada acadêmica. Aos convidados da banca por terem aceitado o convite de nos honrar com sua presença durante a defesa desta monografia.
  5. 5. 4 “Ei, já que é para fazer coisas na vida, que sejam bonitas.” Steve Jobs
  6. 6. 5 RESUMO A maneira que se navega na Internet mudou. Para atender essa mudança e oferecer experiências de utilização consistentes para um grande número de contextos, é necessário buscar as tecnologias de desenvolvimento que atendam a esses requisitos. Uma possibilidade de se adequar ao novo ambiente é utilizando o web design responsive. Ele é um conceito que possibilita à página web criada se adapte em qualquer tamanho de tela. Os componentes que tornam possível a responsividade são: o sistema de grids fluídas, imagens flexíveis e as media queries. Visando contribuir para que o design responsivo se integre cada vez mais, começaram a surgir frameworks que prometem facilitar o desenvolvimento de sites responsivos, levando em conta diferentes padrões de desenvolvimento e técnicas. O objetivo dos frameworks é facilitar o trabalho de designers e desenvolvedores, fornecendo componentes já tratados e prontos para utilização dentro de um contexto de desenvolvimento responsivo. Nesta monografia será demonstrado um referencial teórico que serve de embasamento para a demonstração da técnica de desenvolvimento responsivo e um protótipo de site com o uso do framework Bootstrap. Palavras Chave: Design responsivo, Frameworks para desenvolvimento web, User Experience
  7. 7. 6 ABSTRACT The way to browse the Internet changed. To meet this change and provide consistent user experiences for a wide range of contexts, it is necessary to seek the development technologies that meet these requirements. One possibility to adapt to the new environment is using the responsive web design. It is a concept that allows creating web pages that adapt to any screen size. The components which make responsiveness possible are: fluid grid system, flexible images and medias queries. Aiming contribute to the responsive design integration increase, began to emerge frameworks that promise to facilitate the development of responsive sites, taking into account different development patterns and techniques. The goal of the frameworks is to facilitate the work of designers and developers, providing components already processed and ready for use within a responsive development context. Keywords: Responsive Design, Frameworks for Web development, User Experience
  8. 8. 7 LISTA DE QUADROS Quadro 1 - Tag <font> que é usada para definir atributos de cor, tamanho e família das fontes.................................................................................................................................................... 25 Quadro 2 - Tag <center> que é usada para alinhar de forma centralizada parágrafos.......... 25 Quadro 3 - Exemplo de aplicação de uma regra CSS em um parágrafo.................................. 28 Quadro 4 - Exemplo de definição de media................................................................................... 43 Quadro 5 - Exemplo de estilo para dispositivos de 320px de tamanho..................................... 46 Quadro 6 - Exemplo de estilo para dispositivos com tamanho de 320px, na orientação retrato ............................................................................................................................................................... 46 Quadro 7 - Exemplo de arquivo de CSS utilizando os diferentes estilos para medias de diferentes tamanhos........................................................................................................................... 47 Quadro 8 - declaração de tamanho máximo de uma imagem no CSS. .................................... 51 Quadro 9 - Declaração que tem mesma função do max-width, para navegadores mais antigos.................................................................................................................................................. 53 Quadro 10 - Definição de tamanho máximo com CSS................................................................. 53
  9. 9. 8 LISTA DE IMAGENS Figura 1 - Comparação entre nascimentos de bebês, com a produção de aparelhos Android e iPhones, Fonte: Wroblewski, 2012.................................................................................... 16 Figura 2 - Site adaptado ao tamanho da tela, sem técnicas responsivas aplicadas ............. 23 Figura 3 - Ranking das 10 linguagens de programação mais utilizadas nos últimos 2 anos. 30 Figura 4 - Resoluções dos diversos dispositivos Apple........................................................ 35 Figura 5 - Diferenças entre Design Responsivo e Design Adaptivo ..................................... 36 Figura 6 - Diferenças entre design adaptivo......................................................................... 37 Figura 7 - Diferença entre design responsivo....................................................................... 37 Figura 8 - Exemplo de um layout fixo de 960px de largura, modelo de layout fixo ............... 39 Figura 9 - Exemplo de Layout fluido aberto em uma largura de 960px ................................ 39 Figura 10 - Exemplo de layout fluido aberto em uma largura de 1600px.............................. 40 Figura 11 - Um exemplo de conversão de pixel para “em”, em uma largura de 960px......... 41 Figura 12 - Grid Fixa............................................................................................................ 42 Figura 13 - Grid Fluida......................................................................................................... 43 Figura 14 - Demonstração do foco de uso das telas de acordo com a orientação ............... 47 Figura 15 - Exemplo do resultado do uso da metatag viewport............................................ 48 Figura 16 - Site sem a metatag viewport.............................................................................. 49 Figura 17 - Exemplo de imagem sem estilo max-width: 100% ............................................. 52 Figura 18 - Exemplo de imagem com estilo max-width: 100% ............................................. 52 Figura 19 - Áreas-chave para a metodologia de projeto centrada nos usuários................... 62 Figura 20 - Exemplo de um site construído pelo Pure.......................................................... 65 Figura 21 - Exemplo de site construído pelo Foundation ..................................................... 66 Figura 22 - Exemplo de site construído pelo Gridless .......................................................... 67 Figura 23 - Exemplo de site construído pelo Bootstrap........................................................ 68 Figura 24 - Protótipo acessado em diferentes tipos de dispositivosFonte: Autoria Própria... 72 Figura 25 – Homepage do protótipo..................................................................................... 73 Figura 26 - Página com formulário de contatoFonte: Autoria Própria................................... 74 Figura 27 - Menu navegável do protótipo............................................................................. 75 Figura 28 - Comportamento do menu em resolução inferior a 768 pixelsFonte: Autoria PrópriaAo clicar no ícone, visando a adaptação ao display, ele não se apresenta como na forma retratada pela Figura 26 e sim de maneira distinta e responsiva................................ 76 Figura 29 - Comportamento do menu expandido em resolução inferior a 768 pixels ........... 77 Figura 30 - Formulário de contato acessado em resolução inferior a 768 pixels ................. 78 Figura 31 - Componente Breadcrumb.................................................................................. 79 Figura 32 - Formulário de busca disponível em resolução superior ou igual a 768 pixels .... 79 Figura 33 - Formulário de busca disponível em resolução igual a 320 pixels e inferior a 768 pixels ................................................................................................................................... 80
  10. 10. 9 LISTA DE TABELAS Tabela 1 - Constituição de uma regra de CSS..................................................................... 27 Tabela 2: Tipos de medias existentes.................................................................................. 44
  11. 11. 10 LISTA DE SIGLAS AWD - Adaptive Web Design CGI – Comitê Gestor da Internet CSS – Cascading Style Cheet HTML – Hypertext Markup Language IDC – International Data Corporation IHC – Interação Humano-Computador RWD – Responsive Web Design SASS - Syntactically Awesome Stylesheets SCSS - Sassy CSS SGM – Standard Generalized Markup Language UX – User Experience W3C – World Wide Web Consortium XML – Extensible Markup Language
  12. 12. 11 SUMÁRIO LISTA DE QUADROS.................................................................................................7 LISTA DE IMAGENS ..................................................................................................8 LISTA DE TABELAS ..................................................................................................9 LISTA DE SIGLAS....................................................................................................10 SUMÁRIO .................................................................................................................11 1. INTRODUÇÃO ..................................................................................................13 1.1. Objetivo geral ...............................................................................................15 1.2. Objetivos específicos ...................................................................................15 1.3. Justificativa...................................................................................................15 1.4. Metodologia..................................................................................................17 1.5. Estrutura do trabalho....................................................................................18 1.6. Hipóteses de pesquisa.................................................................................19 2. CENÁRIO WEB ATUAL E AS TECNOLOGIAS DE DESENVOLVIMENTO FRONT-END .............................................................................................................21 2.1. A Internet......................................................................................................21 2.2. A evolução Web ...........................................................................................22 2.3. Aumento do uso de dispositivos móveis ......................................................22 2.4. HTML ...........................................................................................................23 2.4.1. Definição................................................................................................23 2.4.2. Histórico.................................................................................................24 2.5. HTML5 e a semântica ..................................................................................26 2.6. CSS..............................................................................................................27 2.6.1. Definição................................................................................................27 2.6.2. Histórico.................................................................................................27 2.6.3. Less e Sass ...........................................................................................28 2.7. JavaScript ....................................................................................................29 2.7.1. Histórico.................................................................................................30 2.7.2. O Padrão ECMA....................................................................................31 2.8. Conclusão ....................................................................................................31 3. WEB DESIGN RESPONSIVO ............................................................................33 3.1. Definição ......................................................................................................33 3.2. Histórico .......................................................................................................33 3.3. Design Responsivo X Design Adaptivo........................................................35 3.4. Tipos de layout.............................................................................................37 3.4.1. Layout Fixo ............................................................................................38 3.4.2. Layout Fluido .........................................................................................39 3.4.3. Layout Elástico ......................................................................................40 3.5. Grades flexíveis ...........................................................................................41
  13. 13. 12 3.6. Media Types.................................................................................................43 3.7. Media queries...............................................................................................45 3.8. Viewports .....................................................................................................48 3.9. Imagens e mídias flexíveis...........................................................................50 3.9.1. Imagens Flexíveis..................................................................................50 3.9.2. Mídias Flexíveis.....................................................................................53 3.9.2.1. Vídeos ...................................................................................................53 3.9.2.2. Publicidade ............................................................................................54 3.10. Mobile first....................................................................................................54 3.11. Progressive enhancement............................................................................55 3.12. Conclusão ....................................................................................................56 4. USABILIDADE ...................................................................................................57 4.1. Definição ......................................................................................................57 4.2. Heurísticas ...................................................................................................58 4.3. Avaliação Heurística.....................................................................................58 4.4. User Experience...........................................................................................60 4.5. Conclusão ....................................................................................................63 5. FRAMEWORKS .................................................................................................64 5.1. Definição ......................................................................................................64 5.2. Frameworks de front-end para desenvolvimento responsivo .......................65 5.2.1. Pure.......................................................................................................65 5.2.2. Foundation.............................................................................................66 5.2.3. Gridless .................................................................................................67 5.2.4. Bootstrap ...............................................................................................68 5.3. Conclusão ....................................................................................................69 6. DESENVOLVIMENTO DE UM SITE UTILIZANDO O FRAMEWORK BOOTSTRAP............................................................................................................71 7. CONCLUSÕES ..................................................................................................81 8. TRABALHOS FUTUROS...................................................................................84 9. REFERÊNCIAS ..................................................................................................85
  14. 14. 13 1. INTRODUÇÃO Durante anos, as páginas web tiveram tamanho fixo e comportamento previsível. Os layouts, antes estáticos, eram totalmente controlados pelos designers e webmasters, já que o tamanho da resolução de tela dos dispositivos era semelhante, não havia a possibilidade dos elementos fugirem do controle dos mantenedores dos sites. Contudo, à medida que a tecnologia evolui, nota-se o questionamento de conceitos que por anos pareciam absolutos e imutáveis. O Comitê Gestor de Internet no Brasil (CGI.br), em junho de 2014, estimou que 42,5 milhões de brasileiros acessam a Internet usando celulares. Este número faz os desenvolvedores para aplicações web repensarem os conceitos e métodos que estão em pleno funcionamento, pois o cenário agora é ainda mais dinâmico, uma vez que existe uma gama de produtos móveis com diversos tamanhos e resoluções de tela. Vale lembrar que o fato desses dispositivos existirem realça a ideia de que o consumidor ganhou outros hábitos, se tornou mais exigente e tem comportamentos diferentes daquele antigo usuário que estava acostumado a uma única maneira de acessar a internet e consumir serviços tecnológicos. Dada essa exigência, faz-se necessário um desenvolvimento para web de forma mais complexa, mais voltada às necessidades comportamentais do usuário atual. Ao mesmo tempo que os dispositivos evoluem, também evoluem os conceitos de desenvolvimento de páginas web e novas técnicas para desenvolver para os mais diversos contextos e dispositivos. Tecnologias como a detecção do tamanho dos displays em conjunto com outras técnicas de desenvolvimento, recomendação feita pela World Wide Web Consortium (W3C), resultam no web design responsivo, um termo concebido por Ethan Marcotte (2010). Com o uso das novas técnicas e recursos de desenvolvimento, é possível desenvolver para os mais variados tamanhos de displays.
  15. 15. 14 Para se tornar um desenvolvedor web com domínio em responsividade, demanda-se um tempo considerável de estudos nas técnicas e novidades das ferramentas de desenvolvimento. Todavia, já existem alguns recursos que auxiliam no desenvolvimento de sites responsivos. Estes recursos, popularmente chamados de frameworks, são compostos por estruturas de código em CSS (Cascade Style Sheets), JavaScript e HTML (Hypertext Markup Language). De acordo com Lopes (2013), os frameworks otimizam/reduzem o tempo que o desenvolvedor terá que se especializar. Ao invés de ter de se especializar e rever a utilização de vários elementos que podem conter em um site, o desenvolvimento com frameworks evita que o desenvolvedor necessite de conhecimentos específicos e avançados em HTML, CSS e JavaScript. Sendo assim, mesmo com conhecimento básico já será possível compreender o framework e trabalhar com ele sem uma longa curva de aprendizado. Eeste trabalho analisará a utilização dos componentes do framework Bootstrap. Segundo Cochran (2012), o repositório de projetos on-line GitHub já possui mais de 33 mil pessoas desenvolvendo projetos com Bootstrap. Esse expressivo número concede ao framework a fama que faz parte de seu slogan publicado em sua página oficial, que é “O framework HTML, CSS e JavaScript mais popular em desenvolvimento responsivo e projetos web com mobile-first”. Sendo assim, devido ao seu prestígio na comunidade de desenvolvimento web atual, este trabalho analisará alguns aspectos da estrutura do Bootrstrap, como por exemplo a sua capacidade de fornecer os recursos do design responsivo assim como a capazes de auxiliar o desenvolvedor de um projeto de pequeno a médio porte a manter a produtividade de codificação e a aderência do usuário nos mais diversos tipos de dispositivos móveis, sem necessariamente depender exclusivamente de um especialista em tecnologias de desenvolvimento de design responsivo.
  16. 16. 15 1.1. Objetivo geral Pesquisar e analisar frameworks front-end, com foco no desenvolvimento de sites responsivos. 1.2. Objetivos específicos Fazer uma revisão bibliográfica para levantar as principais tecnologias para desenvolvimento de sites responsivos. Estudar o framework Bootstrap de forma que o aprendizado deste possa esclarecer o seu auxílio no desenvolvimento de sites responsivos. Analisar o que é a experiência de usuário no que tange o desenvolvimento de Websites. Desenvolver um protótipo de um site institucional que atenda a instituições de ensino superior, projetado com base nas práticas de experiência do usuário por intermédio do framework responsivo Bootstrap. 1.3. Justificativa Uma pesquisa realizada por WMcCann Brasil (2011) menciona que 33% das pessoas já tinham celulares smartphones e 20% tinham celular convencional avançado (com Wi-fi, GPS etc). Destes, 41% acessava a Internet no celular (83% entre os donos de Smartphone) e 15% já tinha efetuado alguma compra via celular (63% entre usuários de iPhone). Mais da metade das pessoas tinham um celular com menos de seis meses de uso e 40% das pessoas pretendiam trocar de aparelho nos seis meses seguintes. O Google (2012), em uma de suas publicações de análises de dados citou que nos últimos meses de 2011 o número de usuários de dispositivos móveis cresceu 40%.
  17. 17. 16 Em relação ao cenário nacional, de acordo com o IDC Brasil (2014), a venda de celulares inteligentes no Brasil cresceu 49% entre julho e setembro de 2014. Comparando com o mesmo período no ano de 2013, este crescimento significa 15,1 milhões de unidades a mais no mercado brasileiro. Na figura 1 abaixo, Wrobleswski (2011) demonstra o crescimento de aparelhos com sistema operacional Android e iPhones em relação ao número de nascimentos de seres humanos ao redor do mundo. Figura 1 - Comparação entre nascimentos de bebês, com a produção de aparelhos Android e iPhones, Fonte: Wroblewski, 2012 Tendo em vista que a maior parte dos dispositivos móveis oferece recursos para que o usuário acesse a Internet, e que a maior parte desses aparelhos é utilizada para este fim, faz-se necessário pensar a forma que se devem desenvolver as páginas e serviços que serão executadas a partir de dispositivos móveis. Dessa forma, torna-se imprescindível um estudo que avalie quais são as melhores formas de prosseguir com o desenvolvimento de páginas que se adaptem aos usuários de dispositivos móveis. Este estudo está vinculado a um termo já conhecido no mercado como Responsive Web Design (Web Design Responsivo). Desenvolver um site responsivo
  18. 18. 17 consiste em projetar a interface do site de forma que ela se adapte aos diversos tamanhos de tela. Dessa maneira, é criado apenas um site e o mesmo consegue ser acessado por dispositivos de diversos tamanhos, entre eles celulares, tablets, computadores de mesa e smart TVs. As atualizações de versão do HTML, CSS e o surgimento de bibliotecas de JavaScript se tornaram facilitadores para o desenvolvimento responsivo. Estas novidades têm mantido uma vasta documentação disponível na Internet, de forma aberta e organizada. Além da documentação é possível encontrar em fóruns e comunidades de desenvolvimento como no caso da Mozilla, amplas discussões sobre as novas utilizações e implementação das novidades tecnológicas para o desenvolvimento atual. No entanto, mesmo com vasta documentação disponível para consulta, a técnica de aplicação das ferramentas na projeção de um site responsivo demanda uma curva grande de aprendizado e domínio. Os frameworks de desenvolvimento de sites têm sido uma alternativa de grande utilidade para as empresas que já se preocupam em oferecer sites Responsivos, pois otimizam o tempo utilizado no desenvolvimento. Isso é importante uma vez que o processo de estudo sobre os diversos tamanhos de tela e a codificação para tornar possível a adaptação total do layout fica a cargo da empresa desenvolvedora do framework. 1.4. Metodologia De acordo com Caregnato et al. (2004) a pesquisa acadêmica é a que tem como base o método científico e caracteriza-se pela produção desenvolvida na instituição universitária (academia). Esse tipo de pesquisa define-se como um processo de busca de conhecimento a partir de instrumentos e metodologias. Sua função é de qualificar e acrescentar novos pontos de vista, que serão tratados como problemas de investigação.
  19. 19. 18 A metodologia define o tipo de pesquisa que se pretende fazer e as teorias metodológicas que se pretende utilizar, estabelecendo o seu delineamento. O tipo de pesquisa, da qual se trata esta monografia, se encaixa na definição de exploratória, devido os procedimentos adotados para a realização dos objetivos. Segundo Cervo (2007) e A.C. (2008), a pesquisa exploratória, pode auxiliar na formulação de novas hipóteses para pesquisas futuras. O resultado de pesquisas exploratórias podem ser novos objetivos de pesquisa mais fundamentados. Podem gerar novas percepções e pontos de vista em torno do projeto de pesquisa inicial e trazer novas ideias. Inicialmente, foi desenvolvida uma pesquisa bibliográfica sobre os conceitos e tecnologias envolvidas no projeto de pesquisa, com o objetivo de identificar os meios que possibilitam que a Responsividade seja praticada. Após serem identificadas as tecnologias envolvidas, iniciou-se a pesquisa sobre o desenvolvimento responsivo com o auxílio de frameworks de CSS que implementam o conceito de design responsivo em páginas para Internet. Nesta etapa foi utilizado o método indutivo, de forma que se pode analisar as vantagens em se utilizar algum framework para essa construção. Com o auxílio do framework Bootstrap e conhecimentos sobre a estrutura de HTML, CSS e conceitos de usabilidade, foram aplicadas regras de usabilidade de forma que foi possível o desenvolvimento de um protótipo funcional de um site institucional para uma universidade. Este protótipo é a implementação dos conceitos apresentados por este trabalho, desde a construção estrutural da página até a implementação do framework para tornar a página adaptável a diferentes tamanhos de tela e os testes em diversos dispositivos. 1.5. Estrutura do trabalho Esta monografia está dividida em 9 capítulos, detalhados a seguir:
  20. 20. 19 No Capítulo 2 foi feita uma introdução à Internet e a evolução da Web, levando até o cenário atual, que possibilita o desenvolvimento Responsivo. No Capítulo 3 são apresentadas as tecnologias envolvidas no desenvolvimento de páginas para a Web. No Capítulo 4 foi abordado o conceito de responsividade e seus elementos. No Capítulo 5 são abordadas as técnicas de desenvolvimento de sites responsivos. No Capítulo 6 foi analisado o conceito de usabilidade, sua aplicação e o conceito de experiência do usuário. No Capítulo 7 foram analisados os conceitos de framework e os frameworks existentes que auxiliam no desenvolvimento de sites responsivos. No Capítulo 8 foi descrito o desenvolvimento de um protótipo de site Responsivo, desenvolvido com o auxílio do framework Bootstrap. No Capítulo 9 são expostas as conclusões acerca do trabalho desenvolvido. 1.6. Hipóteses de pesquisa Existem diversos tipos de especialistas que tratam exclusivamente das interfaces em sua estrutura visual, por exemplo:  User Interface Developers  Desenvolvedores Front-end  User Experience Designers. Este trabalho tem como objetivo demonstrar o desenvolvimento de site responsivo por meio de um framework de código CSS. Espera-se, com isso, apresentar brevemente ao leitor o panorama de técnicas necessárias para tornar a responsividade possível e quais os frameworks mais utilizados atualmente.
  21. 21. 20 O capítulo 4 abordará o tema usabilidade. Uma das regras de usabilidade mencionada diz que um site responsivo é uma boa prática para se obter uma melhor experiência do usuário. Porém, como foi mencionado na justificativa do trabalho, a curva de aprendizado de técnicas para o desenvolvimento de sites responsivos é muito alta e pode exigir profissionais específicos que não sejam necessariamente desenvolvedores, que não são especialistas em HTML, CSS e JavaScript. A hipótese deste trabalho é que a utilização um framework de front-end para a criação de um layout de site com design responsivo pode ser feito de forma mais produtiva em relação ao tempo de codificação e mais abrangente em relação ao funcionamento em diversos tamanhos de tela. Embora um framework não isente o desenvolvedor de ter conhecimento em HTML, CSS e JavaScript, a hipótese se fundamenta a partir do ponto de vista de que o framework oferece estruturas já prontas para uso. Essas estruturas, geralmente, são compostas por componentes (botões, títulos) já estilizados, layouts pré-definidos (layout fluído) e atributos de CSS que permitem a adaptação do layout criado ao contexto em que foi acessado (media queries e breakpoints). Sendo assim, entende-se que ao oferecer esse tipo de estrutura ao desenvolvedor não especialista em desenvolvimento de interfaces, pode ajudá-lo a desenvolver seus projetos web de forma responsiva, dinâmica e congruente.
  22. 22. 21 2. CENÁRIO WEB ATUAL E AS TECNOLOGIAS DE DESENVOLVIMENTO FRONT-END Neste capítulo será apresentado uma breve descrição do cenário da web atualmente e as principais tecnologias para desenvolvimento do front-end. A internet sofreu diversas mudanças, tanto no ambiente de hardware, que muda a maneira com que se acessa a web com as diversas opções de dispositivos, como também na área de desenvolvimento, que precisa se atualizar para atender as novidades e manter a qualidade de acesso, nos mais diversos dispositivos. Com base nestes conceitos, o capítulo demonstrará um levantamento sobre as principais tecnologias envolvidas no desenvolvimento web levando em consideração o que há de mais atual e suas evoluções durante as mudanças no seu ambiente. Dentre as tecnologias de desenvolvimento, estão o HTML e CSS, que recentemente passaram por atualizações importantes em suas especificações. Também será apresentado a linguagem de programação JavaScript, com suas definições e histórico de evolução no ambiente de desenvolvimento web. 2.1. A Internet Segundo Forouzan (2010) e Ross (2010), a Internet, rede que interconecta milhões de equipamentos de computação em todo o mundo, revolucionou muitos aspectos do dia a dia. A Internet é um sistema de comunicação organizado e estruturado, que dá acesso a uma ampla gama de informações a partir de um computador. Esses equipamentos são essencialmente estações de trabalho e servidores que armazenam e transmitem informações. Os sistemas são conectados entre si por links de comunicação. A Internet usa uma técnica conhecida como comutação de pacotes que permite que vários sistemas finais compartilhem ao mesmo tempo um caminho ou partes dele.
  23. 23. 22 2.2. A evolução Web A Internet se expandiu pelo mundo graças aos avanços de banda larga e dos diversos dispositivos capazes de navegar pela rede, tais como celulares, tablets, televisões e videogames. Diversas empresas do mundo digital também impulsionaram a evolução das tecnologias utilizadas para criar uma web melhor. Novas empresas, novos padrões, novos dispositivos. A indústria da Internet está em contínuo crescimento. (MAZZA, 2014). Profissionais em empresas como Google, Microsoft, Apple e Facebook trabalham exclusivamente em melhorias para os navegadores mais utilizados, além de participarem da definição de novos padrões e disseminarem bastante conhecimento junto à comunidade de desenvolvedores. E tudo continuará a se expandir. 2.3. Aumento do uso de dispositivos móveis Segundo Frain (2012), até pouco tempo atrás, conseguia-se obter uma experiência consistente para todos os usuários com a largura dos sites fixa em 960 pixels. Dependendo do tamanho da resolução da tela de notebooks e monitores grandes, a largura fixa gerava uma margem abundante nas laterais da página, mas o conteúdo, ainda assim, permanecia fácil de ser navegado. Hoje em dia, as pessoas navegam na internet a partir de seus aparelhos smartphones. É um fato que o uso dos dispositivos de tela pequena é crescente, assim como o uso de monitores maiores que 27 ou 30 polegadas. Ainda conforme Frain (2012), os navegadores dos dispositivos móveis são feitos de maneira que os sites já existentes funcionem neles sem problemas. Assim, os sites só se adaptam ao tamanho da tela, deixando o conteúdo mais próximo ao que o usuário espera ter conforme a Figura 2. Porém, é tedioso ter que movimentar os dedos em forma de pinça na tela dos smartphones e tablets para conseguir ler o conteúdo ou clicar no lugar correto. Com a percepção desses incômodos, os desenvolvedores front-end adotaram, então, o conceito de Web design responsivo.
  24. 24. 23 Figura 2 - Site adaptado ao tamanho da tela, sem técnicas responsivas aplicadas Fonte: Autoria Própria 2.4.HTML 2.4.1. Definição HyperText Markup Language (HTML) é a linguagem principal de quase todo o conteúdo da Web. A maioria do que você vê na tela de seu navegador está descrita, fundamentalmente, usando HTML. Mais precisamente, o HTML é a linguagem que descreve a estrutura e o conteúdo semântico de um documento da Web. O conteúdo em uma página da Web é marcado com elementos HTML, como <img>, <title>, <p>, <div>, e assim por diante. (MOZILLA, 2015) De acordo com Castro e Hyslop (2013), Hypertext Markup Language é a marcação mais usada para exibir páginas da Web na Internet. Ele é usado para exibir texto, imagens e outros recursos no navegador. Os arquivos com a extensão .htm ou .html geram um documento HTML (também conhecido como páginas da Web). Ao abrir um documento HTML, nota-se que eles são construídos com a ajuda das chamadas "tags" (<>), que mostram ao
  25. 25. 24 navegador como a informação deve ser apresentada ao usuário. O HTML não é mais o responsável por definir a aparência em que o conteúdo aparecerá no navegador, essa é a função do CSS. O HTML mostra a estrutura em que o conteúdo aparecerá nos navegadores. 2.4.2. Histórico A primeira versão do HTML foi concebida por Tim Berners-Lee, baseado na especificação SGM (Standard Generalized Markup Language) A partir de um protótipo de navegador criado por ele em 1990, Tim acreditava na possibilidade de interligar hipertextos em diferentes computadores, a partir do uso de links globais, que são chamados por hiperlink. (Silva, 2012). A proposta de Tim Berners-Lee inspirou outros cientistas a continuarem os estudos que aprimoraram a linguagem HTML e a deixaram mais elaborada e enriquecida. No mês de outubro de 1994, foi criado o World Wide Web Consortium (W3C), um consórcio internacional formado por empresas, instituições, pesquisadores, desenvolvedores e público em geral, com a finalidade de desenvolver a Web a seu potencial máximo, criando normas e especificações aplicáveis aos diversos segmentos e setores da Web, desde tecnologias e softwares até fabricantes e fornecedores. (SILVA, 2011, p.26). Segundo Silva (2011), a criação do W3C foi importante, pois a partir do consórcio foram estabelecidos padrões para a criação e a interpretação dos conteúdos da Web, afim de garantir que qualquer aplicação desenvolvida, segundo esses padrões, pudesse ser acessada e visualizada por outro criado no mesmo modelo. Atualmente, o HTML está em sua 5ª versão conhecida também como HTML5. Ela é uma versão aprimorada do HTML 4.01 que evoluiu para permitir que os
  26. 26. 25 códigos gerados pelos programadores possam ficar mais organizados, bem estruturados e com a utilização correta das marcações. Quadro 1 - Tag <font> que é usada para definir atributos de cor, tamanho e família das fontes As versões anteriores ao HTML5 permitiam que formatações ligadas ao estilo do conteúdo fossem aplicadas com atributos apropriados a isso. No Quadro 1 pode- se notar que é possível adicionar linhas de estilo ao conteúdo a partir de uma tag específica. Dentro de uma tag para designar títulos é adicionada outra tag que fará o tratamento do estilo. Percebe-se o mesmo efeito no Quadro 2, porém tratando de uma outra função, que no caso seria o alinhamento. Quadro 2 - Tag <center> que é usada para alinhar de forma centralizada parágrafos. Contudo, como parte de uma filosofia que o HTML5 vem idealizando, segundo Ferreira (2013), a página de HTML deve conter marcações referentes apenas ao conteúdo, não ao estilo. Com o HTML5, o uso destas tags não é mais permitido, pois pela própria definição de HTML, segundo Mazza (2013), ele é uma linguagem composta por tags responsáveis pela marcação do conteúdo de uma página no navegador. O estilo do conteúdo fica sob responsabilidade do CSS, que é encarregado de implementar os ajustes visuais dos conteúdos. Respeitar a verdadeira função das tags é importante, Exemplo da tag font <h1> <font color="red" size="12" face="Arial" >Exemplo da tag font </font> </h1> Esta frase foi alinhada com auxílio da tag center. <p> <center>Esta frase foi alinhada com auxílio da tag center. </center> </p>
  27. 27. 26 pois a marcação de conteúdos deve ter um significado claro, ou seja, o valor semântico do código deve ser respeitado. 2.5.HTML5 e a semântica Ao procurar no dicionário Aurélio a palavra semântica, encontra-se “ramo da linguística que estuda o significado das palavras” ou também “a ciência das significações”. Segundo a W3C, a web semântica oferece às pessoas a capacidade de criarem repositórios de dados na web, construírem vocabulários e escreverem regras para interoperarem com esses dados. O principal objetivo da web semântica é tornar as informações disponíveis na Web mais acessíveis em relação ao conteúdo, ou seja, possibilitar que os computadores consigam entender o que os usuários desejam, em termos de linguagem. Programar em HTML5 exige uma nova maneira de se pensar. Ao escrever uma página para web, tudo que for criado deverá ter significado. Essa página possuirá cabeçalhos, menus, artigos, seções relacionadas e rodapé. Cada parte dessa página possuirá novas tags que as identificam categoricamente no código. Conforme Ferreira (2013), programar dessa forma, torna o código mais limpo e organizado. O autor também ressalta que a interpretação passa a ser mais fácil e intuitiva, pois o programador irá identificar e entender com mais rapidez cada parte de cada tag dentro do código. Além do fator humano, os sistemas que são baseados na web também passam a ser beneficiados. Buscadores como o Google, Achei, Alta vista, Bing, entre outros, de acordo com Ferreira (2013), encontrarão de forma mais fácil as informações, pois elas estarão distribuídas em partes específicas do código e dessa forma, um conteúdo específico da tag de cabeçalho ou rodapé, por exemplo, será indexado e apresentado de forma muito mais precisa.
  28. 28. 27 2.6.CSS 2.6.1. Definição De acordo com Frain (2012) e o Grupo de Trabalho da W3C (2011), o Cascading Style Sheets é uma linguagem que descreve o estilo de linguagem de marcação de apresentação (como HTML). 2.6.2. Histórico No início da década de 90, os projetos eram baseados em tabela e os estilos se misturavam com o conteúdo do site. O CSS veio como uma alternativa de separar o conteúdo de um site, de suas configurações de estilo. Segundo Silva (2012), o CSS possui a menor porção de código capaz de produzir efeito de estilização chamada de regra CSS. Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um valor. A sintaxe para se escrever uma regra CSS é mostrada na Tabela 1. Definição dos componentes de uma regra CSS: Tabela 1 - Constituição de uma regra de CSS Componente Descrição Seletor É o alvo da regra CSS Declaração Determina os parâmetros de estilização. Compreende a propriedade e o valor Propriedade Define qual será a característica do seletor a ser estilizada Valor É a quantificação ou a qualificação da propriedade Uma regra CSS poderá conter várias declarações separadas por ponto e vírgula. Exemplo demonstrado no quadro 3:
  29. 29. 28 Quadro 3 - Exemplo de aplicação de uma regra CSS em um parágrafo Fonte: Autoria Própria Nesse exemplo identificam se os seguintes componentes da regra CSS: • Seletor: é o elemento p. Seletores para elementos da marcação são denominados seletores tipos. • Declarações: são três – color: red; background-color: black; font-size: 12px;. • Propriedades: são três – color, que define a cor dos textos contidos em p, background-color, que define a cor de fundo do elemento p e font-size, que define o tamanho da fonte para o elemento p. Assim como o HTML5 e sua relação com versões anteriores de HTML, o CSS3 é uma extensão natural dos níveis anteriores de CSS que o precederam. O CSS3 é mais poderoso do que suas versões anteriores e introduz inúmeros efeitos visuais, como sombras de texto, cantos arredondados e gradientes. Com isso a tendência é diminuir o uso de imagens no desenvolvimento das páginas, o que gera benefícios na acessibilidade, otimiza os mecanismos de busca e a velocidade de carregamento das páginas. 2.6.3. Less e Sass Less é uma linguagem de estilo dinâmica que pode ser compilado em CSS, criado por Alexis Sellie. Ele usa sintaxe CSS-like e oferece muitas melhorias sobre o CSS. Ele adiciona funcionalidades que permitem variáveis, mixins, funções e muitas outras técnicas que permitem que seja escrito o código CSS, sendo mais fácil de manter, personalizar e reutilizar. p { color: red; background-color: black; font-size: 12px; }
  30. 30. 29 Mixins são as funções que o Less permite que sejam criadas. Elas são úteis quando a mesma coisa é usada repetidamente, assim como nas propriedades do CSS3 que precisam de prefixo, como por exemplo, uma borda redonda. O mixin recebe um argumento, como o tamanho de uma borda e retorna as versões para diversos navegadores. O Less é compilável, mas para que seja possível compilar o arquivo Less para o formato “.css”, é necessário utilizar o Node.JS, ou até mesmo utilizar o site LessTester.com (LESS, 2013). Sass é uma extensão do CSS que permite utilização de, regras aninhadas, mixins, import inline, e muito mais, tudo com uma sintaxe totalmente CSS compatível. Sass ajuda a manter grandes folhas de estilo bem organizadas e ajuda obter pequenas folhas de estilo em funcionamento rapidamente. O Sass já é mais maduro que o Less e está em sua terceira versão. As sintaxes do Less e do Sass são parecidas, porém, o Less foi absorvido mais rápido por ser mais parecido com o CSS. Originalmente o Sass tinha sua sintaxe baseada em espaços em branco e identação, mas posteriormente a sintaxe foi substituída pelo chamado Sassy CSS (SCSS). O SCSS é semelhante ao Less, pois é estruturado como no CSS, visualmente o SCSS possui mais chaves, enquanto a sintaxe anterior era somente identação e atualmente se usam ponto e vírgula. Funcionalmente, o Less e o Sass são bem semelhantes, porém o Sass traz muito mais funções e é mais abrangente que o Less (SASS, 2015). 2.7. JavaScript Segundo a Mozilla (2015), JavaScript (às vezes abreviado para JS) é uma linguagem leve, interpretada e baseada em objetos com funções de primeira classe, mais conhecida como a linguagem de script para páginas Web. É uma linguagem de script multi-paradigma e com suporte ao paradigma de programação orientada a objetos.
  31. 31. 30 De acordo com o TIOBE (2015), a linguagem JavaScript é uma das nove linguagens de programação mais utilizadas no mundo e se pode verificar, na Figura 3 a seguir, os seus índices de utilização ao longo dos anos. Figura 3 - Ranking das 10 linguagens de programação mais utilizadas nos últimos 2 anos. Fonte: Tiobe, 2015 2.7.1. Histórico Assim como já foi abordado anteriormente, no início da Internet as páginas tinham pouca ou nenhuma interatividade. Existiam algumas tecnologias para a geração de páginas no lado do servidor, mas havia limitações no que diz respeito a como o usuário consumia aquele conteúdo. Navegar por meio de links e enviar informações por intermédio de formulários era basicamente tudo o que se podia fazer. Silva (2012) comenta que tendo em vista o potencial que a Internet poderia oferecer para o público geral e a necessidade de haver uma interação maior do usuário com as páginas, a Netscape, criadora do navegador (de mesmo nome) mais popular do início dos anos 90, criou o Livescript, uma linguagem simples que permitia a execução de scripts contidos nas páginas dentro do próprio navegador.
  32. 32. 31 Balduino (2015) relata que, aproveitando-se do iminente sucesso do Java, que vinha conquistando cada vez mais espaço no mercado de desenvolvimento de aplicações corporativas, a Netscape logo rebatizou o Livescript como JavaScript num acordo com a Sun para alavancar o uso de ambas as linguagens. A então vice- líder dos navegadores, Microsoft, adicionou ao Internet Explorer o suporte a scripts escrito em VBScript e criou sua própria versão de JavaScript, o JScript. Apesar da sintaxe de ambas as versões lembrarem um pouco da sintaxe do Java, não havia qualquer outra semelhança entre elas. A interação do código com o navegador, o nome das funções nativas dos navegadores, algumas possibilidades de utilizar recursos mais avançados, tudo era feito de maneira diferente nas duas plataformas, muitas vezes, propositadamente. 2.7.2. O Padrão ECMA Após diversas tentativas de padronização da linguagem, em 1997, surgiu o padrão ECMA-262, ou ECMAScript. Apesar do incentivo da comunidade para difundir o padrão, os navegadores demoraram para aderi-lo, e ainda hoje não há nenhum navegador que o tenha feito completamente. Conforme a ECMA (2015), a última versão do documento ECMA-262 data de junho de 2011. Uma vez que cada navegador acabou adotando partes diferentes da especificação, a incompatibilidade entre alguns é bem aparente. 2.8.Conclusão Neste capítulo foram mostradas as características e algumas estatísticas que comprovam que as novidades no cenário web trouxeram novas necessidades e requisitos na hora de desenvolver páginas e sites. Devido aos avanços e descobertas nas tecnologias de desenvolvimento front- end, foi possível dar continuidade a pesquisa, acerca das técnicas e padrões de
  33. 33. 32 desenvolvimento que usam dessas tecnologias para desenvolver sites e aplicações aderentes aos novos requisitos dos noves meios de acesso à Internet. Como será abordado nos capítulos seguintes, as novidades em técnicas e padrões de desenvolvimento voltado para dispositivos móveis, já são conhecidas e utilizadas. O nome que se dá para a técnica que desenvolve sites para serem acessados nos mais diversos dispositivos e tamanhos é web design responsivo.
  34. 34. 33 3. WEB DESIGN RESPONSIVO Neste capítulo será apresentado o conceito de desenvolvimento responsivo e as técnicas e padrões de desenvolvimento que possibilitam que os sites atendam este conceito. Além da introdução a tecnologia responsiva, neste capítulo, mostra-se a outra maneira de diagramação de componentes e como adapta-la aos mais diversos contextos de dispositivos móveis. 3.1.Definição A definição de responsivo, conforme Figueiredo (2010), é um adjetivo que vem do latim responsivus, que significa que envolve resposta. No contexto da web, a resposta seria na mudança do layout se adaptando aos dispositivos, no momento em que se acessa a página de diferentes dispositivos. O web design responsivo se baseia no conceito de desenvolver websites que sejam capazes de se adaptar ao tamanho da tela do dispositivo usado. Para isso são necessárias três noções para sua implementação: layouts flexíveis, mídias flexíveis e media queries. 3.2.Histórico De acordo com Marcotte (2010) e Frain (2012), até pouco tempo atrás os sites poderiam ser desenvolvidos com largura fixa de aproximadamente 960 pixels. Até então essas medidas satisfaziam aos usuários finais que acessavam os sites utilizando-se de monitores ou notebooks, nos quais não havia alterações drásticas do layout de um modelo para outro. Com a chegada dos dispositivos móveis e seu crescimento constante, o acesso à web mudou. Segundo Fielding (2014), os dispositivos móveis têm potencial de atingir uma onipresença como não havia acontecido com os desktops e notebooks. As razões para esse potencial são: o custo bem mais acessível para se adquirir um aparelho
  35. 35. 34 móvel, facilitando o uso, como por exemplo, para pessoas que tinham problemas ao usar um computador, que são capazes de interagir com a plataforma móvel. Sites responsivos permitem ao usuário uma experiência otimizada independente do meio pelo qual ele o acessa, facilitando sua navegação, independentemente de estar usando um desktop com tela de resolução de 1024×780 pixels, ou um dispositivo móvel com tela de 320×480 pixels. Figura 4 - Demonstração de uma página acessada de diferentes resoluções Fonte: Autoria Própria O design de um site responsivo tem a capacidade de se adequar perfeitamente a qualquer tela ou espaço, sem perda de conteúdo ou informação necessária ao usuário. Marcote (2010) notou que o Design Responsivo é construído sobre uma combinação de três peças centrais, as quais se originam do uso de HTML5 e CSS3, são elas: grades flexíveis, imagens flexíveis e media queries. Fielding (2014), afirma que não são apenas os dispositivos móveis que se beneficiam da web responsiva, alguns serviços de televisão baseados na web como iPlayer, Netflix, e Lovefilm da Amazon, garantem que a TV ainda seja bastante utilizada. Com isso, as telas com maior resolução e telas maiores estão se tornando mais comuns. Anteriormente, as larguras mais comuns que eram utilizadas eram 1024 por 800 pixels, no entanto, a partir de março 2012 as telas coma resolução de 1366 por 768 pixels se tornaram mais comuns. Com as novas técnicas de
  36. 36. 35 desenvolvimento, é possível utilizar melhor os espaços extras, pensando na melhor maneira de dispor o conteúdo, aproveitando o máximo da resolução, e deixando mais atrativo para o usuário. A Erro! Fonte de referência não encontrada. mostra as diferentes resoluções de tela dos dispositivos móveis, juntamente com a resolução de tela mais comum e uma resolução de televisão comum da Apple. Figura 5 - Resoluções dos diversos dispositivos Apple Fonte: Fielding, 2014, p. 5. 3.3. Design Responsivo X Design Adaptivo Segundo Silva (2014a), as definições de Adaptive Design são: “O termo Adaptive Web Design (AWD) foi criado por Aaron Gustafson, autor do livro "Adaptive Web Design – Crafting Rich Experiences with Progressive Enhancement", no qual descreve o conceito e as técnicas de criação de layout que se adaptem às características e às capacidades do dispositivo do usuário. Citamos esse tipo de design neste livro com a finalidade de informar ao leitor sobre sua existência e alertar que o termo não deve ser tomado como sinônimo do Responsive Web Design (RWD), embora o propósito de ambas as tecnologias, seja o de servir layouts para desktop e dispositivos móveis, fazendo com que sejam tecnologias paralelas e não divergentes. A diferença entre ambas está antes de tudo nas premissas de desenvolvimento.“ (SILVA, 2014, p. 42)
  37. 37. 36 De acordo com a definição de Gustafson (2011), O design adaptivo se trata da criação de interfaces que se adaptem tanto em sua forma como em suas funções, às capacidades do usuário. É também conhecido como sendo o progressive enhancement (melhoria progressiva), só que considerando o modo como as funcionalidades individuais das capacidades interagem entre si para determinar o comportamento do todo, uma vez que leva em conta variados níveis de marcação HTML, CSS, JavaScript e suporte para tecnologias assistivas. Um exemplo da aplicação do AWD é sua conveniência para transformar um layout existente para desktop para servir em dispositivos móveis, podendo reduzir drasticamente a necessidade de se alterar códigos e marcação, com aproveitamento total do que já existe. RWD, como já visto anteriormente, diz respeito à criação de interfaces baseadas em grids fluídos, imagens e mídia flexíveis e media queries. As discussões em torno do emprego e as vantagens e desvantagens de cada uma dessas duas tecnologias é extensa, na Figura 5, são demonstradas algumas delas. Figura 6 - Diferenças entre Design Responsivo e Design Adaptivo
  38. 38. 37 O consenso é que ambas as tecnologias têm sua aplicabilidade. Há casos em que AWD é preferível à RWD e vice-versa. Na Erro! Fonte de referência não encontrada. e Erro! Fonte de referência não encontrada., mostra-se a diferença no CSS: Figura 7 - Diferenças entre design adaptivo Figura 8 - Diferença entre design responsivo 3.4. Tipos de layout De acordo com Fielding (2014) existem três principais tipos de layouts: o fixo, o fluido e o elástico. Para saber qual o mais adequado para cada projeto é importante considerar a experiência do usuário. Por exemplo, se a necessidade for um site ágil que esteja acessível na maior parte do tempo e com bom desempenho, o layout a ser escolhido deve trabalhar bem em vários dispositivos. Se for um site para atender um grande número possível de usuários, deve-se escolher um site que
  39. 39. 38 ofereça a melhor experiência para o maior número de usuários, atendendo desde pessoas com necessidades especiais até limitações de hardware. Deve-se considerar também se o site poderá ser acessado desde a menor a maior resolução e ao tamanho físico de tela. Cada um dos layouts possui suas vantagens e desvantagens, analisando melhor cada um deles, é possível saber qual aplicar e o melhor de cada um. Segundo Kadlec (2013), compreender quando um tipo de layout pode ser a melhor escolha, exige conhecimento das outras opções disponíveis. Somente por meio da compreensão que cada tipo de layout pode oferecer, toma-se a decisão certa para que o site seja o melhor em meio as outras opções. 3.4.1. Layout Fixo Conforme Kadlec (2013), os layouts de largura fixa usam a medida em pixel de 960px, como no exemplo mostrado na Erro! Fonte de referência não encontrada., apesar de alguns avanços dos navegadores e dos tamanhos de tela, que deixavam o valor alternado em 1024px e 984px. O valor de 960px foi o que se tornou mais fácil de adaptar em layouts baseados em grade, por ser divisível pelos números que fazem parte do sistema de colunas das grades fixas (3, 4, 5, 6, 8, 10, 12 e 15). Os layouts de largura fixa ainda são os mais comuns na Web, pois fornecem uma sensação de controle das medidas e permite que sejam criados projetos mais intensos graficamente. Porém, nos sites de largura fixa deve se trabalhar supondo muitas das dimensões em que o site será exibido e esse problema já vem antes mesmo dos smartphones, pois mesmo os navegadores e telas existentes já podiam variar o tamanho em que o conteúdo era mostrado, seja por plug-ins dos navegadores ou por tamanhos de tela diferenciados.
  40. 40. 39 Figura 9 - Exemplo de um layout fixo de 960px de largura, modelo de layout fixo 3.4.2. Layout Fluido Os layouts fluidos são layouts baseados em grade, eles dividem o layout em um número específico de colunas. Os layouts baseados em grade originais foram criados usando colunas com larguras fixas em pixels. No entanto, a fim de criar um site responsivo as colunas precisam ser especificadas usando um valor relativo, o que é feito definindo a largura de uma coluna como uma porcentagem da largura dele que contém o elemento. Isso cria uma grade que é flexível, que se redimensiona automaticamente, de acordo com o tamanho da janela conforme Erro! Fonte de referência não encontrada. e 10. Figura 10 - Exemplo de Layout fluido aberto em uma largura de 960px
  41. 41. 40 Fonte: Fielding, 2014, p. 83. Figura 11 - Exemplo de layout fluido aberto em uma largura de 1600px Fonte: Fielding, 2014, p. 83. 3.4.3. Layout Elástico De acordo com Kadlec (2013), Layouts elásticos são bem semelhantes aos fluidos, porém as limitações são determinadas pelo tamanho na medida “em”, conforme ilustrado na Figura 11. Um “em” é a medida padrão da fonte de um site, ou seja, 1em equivale a 16px, 2em equivale a 32px e assim por diante. Os layouts elásticos fornecem maior controle da tipografia do site. O comprimento de linha recomendado fica entre 45 e 70 caracteres, visando facilitar a leitura. Definindo o tamanho do contêiner em 55em, assegura-se que a largura se mantenha no comprimento adequado. Conforme um visitante aumentar ou diminuir a fonte, os elementos definidos como elásticos também serão aumentados proporcionalmente a fonte. Isso pode acabar gerando a barra de rolagem horizontal pois o tamanho do recipiente será aumentado também.
  42. 42. 41 Figura 12 - Um exemplo de conversão de pixel para “em”, em uma largura de 960px Fonte: Fielding, 2014, p. 80. 3.5. Grades flexíveis De acordo com Marcotte (2010), a técnica de grades flexíveis é somente a base para o Design Responsivo. A técnica de grades flexíveis dá uma melhor consciência da diagramação e das relações de proporção entre os elementos da página. É necessário ter consciência da matemática que é necessária para a construção de grades flexíveis, pois sabendo manusear a matemática envolvida, fica mais fácil articular as proporções quando forem se adaptar as telas em que será acessado. Para as grades flexíveis serem, de fato, uma composição relativa, é necessário trocar as medidas de pixels para “ems”. Para fazer isso é necessário um pouco de matemática. Pode-se obter a medida dos elementos em “em”, pegando o valor em pixels do conteúdo alvo e dividir pelo tamanho em pixels do contêiner que o conteúdo irá aparecer, ou seja: Contexto ÷ alvo = Resultado em “em”.
  43. 43. 42 De acordo com alguns autores, o uso de grids inibe ou limita a criatividade dos designers. Por outro lado, outros autores defendem o uso de grids, afirmando tornar mais rápido o design das páginas e proporciona uma coerência visual entre as páginas relacionadas (BOULTON, 2014). O uso de sistema de grids, estão na origem do RWD. Com a exploração de grids, descobriu-se que é possível transformar a base estrutural (antes medida em pixels – Erro! Fonte de referência não encontrada.) em um componente fluido (com medidas em porcentagem – Figura ). Figura 13 - Grid Fixa
  44. 44. 43 Figura 14 - Grid Fluida 3.6. Media Types De acordo com Caelum (2014), as media types permitem que se use estilos diferentes em situações diferentes. Permite que o site desenvolvido possa adaptar seu conteúdo ao tipo de necessidade ou finalidade que for definido na media type. O Quadro 4 ilustra um exemplo de utilização de estilos de acordo com o media type utilizado. Caso seja utilizado em tela, o sistema irá utilizar o media=”screen”. Caso seja utilizado em uma impressão, o media será “print”. Quadro 4 - Exemplo de definição de media Fonte: Autoria própria <link rel="stylesheet" href="estilos.css" media="screen"> <link rel="stylesheet" href="impressao.css" media="print">
  45. 45. 44 Todos os navegadores modernos suportam esse media type print. Alguns celulares antigos suportavam também o tipo de media handheld que era usado para estilos específicos para sites móveis. Os smartphones modernos, porém, ignoram o media type handheld pois são capazes de exibir sites completos e não apenas as versões simples feitas para os celulares antigos. Hoje utilizam-se as media queries, ao invés das media types handheld. De acordo com Fielding (2014), além das media types já citadas (screen e print), existem vários outros tipos de medias, que dão suporte a uma vasta variedade de dispositivos e necessidades, conforme a Tabela 2, estão entre elas: Tabela 2: Tipos de medias existentes Media Types Descrição All Todos os dispositivos Aural Sintetizadores de voz Braile Dispositivos braile de feedback tátil Embossed Impressoras paginadas braile Handheld Dispositivos pequenos ou portáteis Print Impressoras Projection Apresentações projetadas, como projetores e slides projetados Screen Telas de computador Tty Mídia usando uma grade de caracteres de passo fixo, como teletipos e terminais Tv Televisores
  46. 46. 45 Se não for definido um tipo de mídia, será utilizado um padrão, porém, o comportamento pode variar conforme o navegador. Apesar da variedade de medias, as mais utilizadas são a print e screen. Muitos desenvolvedores ainda usam a screen, ao invés de utilizar as especificas como: handheld e tv. Isso acontece porque até então os sites não possuíam requisitos de diferentes telas e dispositivos. Os tipos de mídia, já tornam as páginas abrangentes a uma boa faixa de dispositivos, (KADLEC, 2013). 3.7. Media queries De acordo com Kadlec (2013), Media queries permitem definir quais estilos devem ser aplicados em circunstâncias específicas, permitindo-lhe consultar os valores de recursos, como resolução, cor, profundidade, altura e largura, definindo- os a melhor maneira para cada tamanho de tela. Marcotte (2011) identificou um conjunto de pontos de parada para diferentes tipos de dispositivos, mas estas definições se tornam desatualizadas à medida que novos dispositivos surgem, o que acontece constantemente. As Media queries permitem que o navegador utilize diferentes folhas de estilo, ou regras, dependendo de certas condições. O navegador exibe o Layout de acordo com o dispositivo que está acessando o site, ou seja, o navegador interpreta o tamanho de tela que foi configurado na Media querie e exibe o Layout que foi definido no CSS para aquela resolução. Conforme a Caelum (2014),ao invés de separar os dispositivos em desktop (screen) e mobile (handheld), as novas media queries permitem que o foco seja no tamanho da tela onde o conteúdo será exibido. É possível criar um CSS que só se aplique a tamanhos de tela de, no máximo, 320px (como um iPhone em modo retrato) como mostrado no exemplo do Quadro 5:
  47. 47. 46 Quadro 5 - Exemplo de estilo para dispositivos de 320px de tamanho Fonte: Autoria Própria Existem diversas opções de media queries com bastante suporte. Além da max-width, pode se usar min-width, width e device-width – e todas as variações delas com height. A diferença entre width e device-width é se definir por pixels ou pelo tamanho do viewport. Geralmente não é boa prática depender do tamanho físico do aparelho então o device-width não é tão utilizado. O max é indicado para um layout Desktop pronto que será adaptado para outros dispositivos móveis. Já o min pode ser útil quando um site que só será utilizado em dispositivos mobile é criado ou quando o desenvolvimento se inicia no mobile. Além das media queries de tamanho, aparelhos mais modernos suportam também a media querie que pega a orientação do dispositivo, conforme o exemplo do Quadro 6: Quadro 6 - Exemplo de estilo para dispositivos com tamanho de 320px, na orientação retrato Fonte: Autoria Própria A media que verifica a orientação do dispositivo é útil para a análise e customização da experiência do usuário, pois se sabe que de acordo com a posição do aparelho o foco de uso da tela é diferenciado, como mostrado na Erro! Fonte de referência não encontrada.. <link rel="stylesheet" href="iphone.css" media="screen and (max-width: 320px)"> <link rel="stylesheet" href="phones.css" media="screen and (min-width: 320px) and (orientation: portrait)">
  48. 48. 47 Figura 15 - Demonstração do foco de uso das telas de acordo com a orientação Fonte: Blog da Caelum, 2015 Além de declarar as media queries na tag <link> no HTML, pode-se também fazer direto dentro do arquivo CSS (pode-se juntar tudo num arquivo CSS só economizando requests, que são requisições feitas para o servidor Web), conforme é mostrado no exemplo do Quadro 7: Quadro 7 - Exemplo de arquivo de CSS utilizando os diferentes estilos para medias de diferentes tamanhos /* regra aplicada em todo lugar */ body { background: blue; } /* aplicasomente a partir de 320px */ @media screen and (min-width: 320px) { body { font-size: 80%; } } /* aplica somente a partir de 480px em landscape */ @media screen and (min-width: 480px) and (orientation: landscape) { nav { float: left; } }
  49. 49. 48 Fonte: Autoria Própria A grande maioria dos navegadores, independente do dispositivo, já oferecem suporte para as media queries, o que torna possível a abrangência da responsividade. 3.8.Viewports De acordo com Kadlec (2013), o conceito de um viewport é simples de se entender quando analisado em sites exibidos em Desktop: o viewport é a área visível do navegador, é a largura do navegador. Se for considerar as telas dos dispositivos móveis, o site passa a ser exibido em toda a extenção da tela. A definição da Caelum (2014) para viewports, é que a medida de pixels que é usada no HTML/CSS, para estruturar o conteúdo do site, difere do tamanho em pixels real da tela em que ele será exibido. O navegador do iPhone, por exemplo, se comporta como se tivesse 980px de largura, embora o aparelho tenha apenas 320px. Isso é feito para que o usuário possa ver páginas feitas para Desktop, adaptadas ao display, sem problemas. A Figura exemplifica a diferença entre o uso e o não uso da viewport. Figura 16 - Exemplo do resultado do uso da metatag viewport
  50. 50. 49 A página funciona como se tivesse 980px disponíveis. Quando é determinado “245px” no CSS, é equivalente a 1/4 dessa tela imaginária de 980px. Porém, na hora de exibir, os 980px serão encaixados nos 320px reais, aplicando um zoom out, que irá mostrar todo o site na pequena tela do dispositivo, como mostrado na Figura . Essa tela imaginária de 980px é o chamado layout viewport. É o tamanho com o qual se trabalha o HTML/CSS, sem se preocupar com a exibição no aparelho. Um pixel no layout viewport tem outro significado do pixel físico do aparelho. É comum chamá-lo de CSS pixel. Figura 17 - Site sem a metatag viewport Declarar o viewport é fundamental para o funcionamento das media queries. Uma media querie que atue com max-width: 400px, tratam-se dos pixels de largura do viewport. Ou seja, quando o viewport for menor que 400px, ele irá ler os comandos de CSS da media querie. Se for declarado que a largura do viewport é a mesma largura do dispositivo móvel, quer dizer que o tamanho do CSS pixel é o mesmo do pixel físico do aparelho. Assim é garantido que 16px em uma tela desktop terá o mesmo tamanho em tablets e smartphones.
  51. 51. 50 3.9. Imagens e mídias flexíveis 3.9.1. Imagens Flexíveis Conforme Kadlec (2013), atualmente existem três maneiras de se manipular imagens responsivamente, sendo elas:  Combate ao navegador;  Renúncia;  Ida para o servidor. Na estratégia de combate ao navegador, o desenvolvedor, tenta mudar a imagem a ser baixada antes que seja carregada a imagem errada, mais pesada para um dispositivo com baixa memória, ou de baixa resolução para dispositivos desktop por exemplo. Na estratégia de renúncia, o site a princípio, carregará a imagem que é utilizada na menor tela, depois se necessário ele irá carregar, também, a imagem para telas maiores. Essa estratégia não é a mais adequada, pois o site acaba fazendo duas requisições quando for exibido em telas maiores, quando uma só, neste caso, já resolveria. A estratégia de ida ao servidor funciona com detecção de tela, o que visa determinar o tamanho de tela antes que o site inicie as requisições no servidor, garantindo assim que seja baixada a imagem adequada de uma só vez. A detecção é feita por meio de lógica executada antes do navegador iniciar a leitura do HTML. Essa estratégia também tem seus contras, pois manter uma listagem atualizada dos mais diversos tamanhos e dispositivos pode ser difícil considerando as recorrentes inovações no mercado de dispositivos móveis. As imagens flexíveis permitem que o navegador utilize a imagem de tamanho mais adequado ao dispositivo que será exibido. Consequentemente, o tamanho do arquivo de uma imagem é o mesmo, independentemente do dispositivo que é usado. A imagem precisa conter pixels suficientes para ser processada em grandes telas mantendo sua qualidade. Uma alternativa para a ampliação é remover parte da imagem como um zoom, porém, esse método é mais eficaz em imagens com
  52. 52. 51 detalhes e que mesmo perdendo seu tamanho total, não perde o significado nem o sentido proposto inicialmente. Segundo Frain (2012), deixar imagens flexíveis em um layout fluido é simples e pode ser alcançado com uma declaração de CSS simples, conforme o exemplo do Quadro 8: Quadro 8 - declaração de tamanho máximo de uma imagem no CSS. Fonte: Autoria Própria Essa declaração faz com que todas as imagens se tornem flexíveis, indo até 100 por cento de seu tamanho. Porém, essa técnica exige análise e planejamento do tamanho máximo de viewport, no qual a imagem será exibida. Deve-se também considerar que a imagem será baixada, mesmo que o viewport só exiba 25 por cento da grande imagem e nem sempre o usuário terá banda suficientemente para não travar o site. De acordo com Marcotte (2010), a regra citada no parágrafo acima foi descoberta pelo designer Richard Rutter1 . Esta regra faz com que a imagem do site seja agora processada em qualquer tamanho de dispositivo, desde que ela tenha sua largura menor que o elemento que a contém. E se ocorrer da imagem ser maior o max-width: 100%, obrigará a imagem a se adaptar a largura de seu recipiente. Pode-se observar o uso da tag na Erro! Fonte de referência não encontrada. e na Figura . 1 Saiba mais sobre Richard Rutter em http://bkaprt.com/rwd/11/ img{ max-width: 100%; }
  53. 53. 52 Figura 18 - Exemplo de imagem sem estilo max-width: 100% Fonte: Marcotte, 2010, p. 45. Figura 19 - Exemplo de imagem com estilo max-width: 100% Fonte: Marcotte, 2010, p.46.
  54. 54. 53 Ainda conforme Marcotte (2010), os navegadores modernos já têm a função de redimensionar as imagens, sem alterar seu formato. Porém, se o cliente especificar que o site deve ser feito para acesso em IE6, surge um problema pois as versões do IE 6 e menores não dão suporte ao max-width, isso pode ser resolvido especificando um estilo separado para os navegadores que sejam IE 6 ou menores, conforme exemplificado no Quadro 9: Quadro 9 - Declaração que tem mesma função do max-width, para navegadores mais antigos Fonte: Autoria Própria É importante destacar que as regras max-width: 100%; e width: 100%: são diferentes. O max-width, instrui as imagens a não passar do limite de largura de seu container e o width, força a imagem a ter o tamanho do container onde está inserida. 3.9.2. Mídias Flexíveis 3.9.2.1. Vídeos O mesmo atributo max-width, também pode ser utilizado para outros tipos de mídia e funciona da mesma maneira. No Quadro 10, um exemplo das mídias que também funcionam com o max-width: Quadro 10 - Definição de tamanho máximo com CSS img, incorporar, objeto, vídeo{ width: 100%; } img, objeto, vídeo, inserir{ max-width: 100%; }
  55. 55. 54 Silva (2014a), também mostra que um conceito simples que pode ser aplicado é o de redimensionar o vídeo conforme o tamanho de seu contêiner, o único problema será criar um contêiner flexível, que mantenha o aspecto do vídeo, ou seja, ele deve diminuir e aumentar mas manter a proporção em 4:3 ou 16:9. Para que isso ocorra, basta dividir a largura pela altura (no caso 9/16 = 0,5625) e o valor obtido convertido em porcentagem (0,5625 equivale a 56,25%) será o valor que deve-se declarar no padding-bottom do contêiner, isso fará com que expandir ou recolher o contêiner mantenha ele com a mesma razão de aspecto. 3.9.2.2. Publicidade De acordo com Kadlec (2013), outro conteúdo que necessita de atenção especial, para se tornar responsivo, são as publicidades. Muitas empresas dependem da receita gerada pela publicidade On-line, então nada mais justo que deixa-las igualmente adaptáveis. Uma das maneiras de fazer a publicidade se adaptar é utilizando JavaScript, mas caso o JavaScript esteja sendo evitado, pode-se utilizar HTML e CSS. Porém, quando se trata da venda de anúncios, deve-se lembrar de que eles são cobrados por tamanho, então como cobrar por um anuncio que varia seu tamanho? Isso tem sido resolvido com a venda de um “Kit” – chamado de Premier Group – que fornece ao cliente alguns tamanhos de publicidade, é uma maneira de tentar facilitar o trabalho dos designers e desenvolvedores, os quais terão de pensar na melhor maneira para aplica-los nas quebras de tamanho. 3.10. Mobile first Conforme Wrobleswski (2011), projetar inicialmente para os dispositivos móveis, deixa o desenvolvedor mais preparado para o crescimento e novidades no meio mobile, exige maior análise do conteúdo e como ele será disposto na página e permite inovações que antes não eram possíveis. Ou seja, para desenvolver aplicativos e sites para as telas de 320 por 480 pixels é necessário focar em extrair
  56. 56. 55 os dados e as ações mais importantes do aplicativo. É necessário priorizar as necessidades e funções e eliminar elementos desnecessários. Ao pensar primeiramente no projeto mobile, se tem um resultado mais focado nas tarefas principais, sem desvios nem conteúdo desnecessário, conseguindo-se assim uma boa experiência para o usuário. De acordo com Fielding (2014), os navegadores dos dispositivos móveis, tem suas limitações de tamanho e performance, mas por outro lado, possui recursos adicionais como, os eventos de toque e informações geolocalização. Quando o projeto para exibição em dispositivos mobile atingir seu máximo em performance e experiência, é o momento de ir adiante com a melhoria do site para sua exibição nos demais dispositivos e tamanhos. 3.11. Progressive enhancement Segundo Fielding (2014), com o surgimento do conceito de responsividade, veio a abordagem de projetar os sites inicialmente para desktops e depois adaptá- los para os dispositivos móveis por intermédio das media queries. Isso se dá, pelo fato de que os desenvolvedores, até então, estavam acostumados a desenvolver apenas para desktop e notebook. Essa metodologia leva o nome de Degradação Progressiva e consiste em projetar o site com a melhor experiência possível e, então, começar a remover conteúdo e funcionalidades, conforme as capacidades e limitações dos navegadores, essa técnica obriga que os usuários tenham de atualizar os navegadores para ter acesso ao site, o que não é uma vantagem ao usuário e, por isso, a técnica de melhoria progressiva, também conhecida como progressive enhancement, começou a ser mais utilizada. De acordo com Gustafson (2011), a melhoria progressiva é uma filosofia que visa a elaboração de experiências que servem seus usuários, dando-lhes o acesso aos conteúdos, sem restrições tecnológicas. O site construído com a melhoria progressiva começa a ser projetado, levando em consideração as funcionalidades e em comum, entre os navegadores. Conforme o site vai ficando funcional da melhor
  57. 57. 56 maneira possível, para os mais diversos navegadores antigos ou mais limitados, é o momento de acrescentar as funcionalidades que só são possíveis nos navegadores mais atuais. O fato dos navegadores serem tolerantes à falhas, pode provocar falhas na formatação. Dado que o navegador não é capaz de processar os formatos que ele não suporta, a qualidade da interface é prejudicada. O progressive enhacement visa resolver esse problema: iniciando das formatações básicas e avançar para as mais complexas, assegura-se a formatação adequada para os elementos da página independente do navegador. 3.12. Conclusão Ao longo deste capítulo foram descritas algumas soluções que resolvem as necessidades adaptivas das interfaces web, de acordo com o tamanho da tela do dispositivo. O objetivo da responsividade em sites é manter o conteúdo acessível a qualquer dispositivo que esteja acessando ao site, com isso garantir que o acesso de uma maior gama de dispositivos. As técnicas de desenvolvimento responsivo oferecem aos designer e programadores a possibilidade de agilizar a construção de páginas e sites que atendam o maior número de dispositivos e resoluções. O capítulo seguinte analisará a importância da usabilidade e a forma como a utilização de sites responsivos influenciam a user experience.
  58. 58. 57 4. USABILIDADE Neste capítulo, será abordada a usabilidade. Quando se trata de responsividade e do potencial de adaptação dos sites, não se pode deixar de pensar em como o site será exibido em telas menores, sem que seu uso fique prejudicado por ser ilegível ou por conter informações demais para uma tela tão pequena. A usabilidade trata de analisar a disposição e a qualidade da informação que o site precisa ter para não atrapalhar na boa compreensão do usuário. Deve-se pensar na percepção dos componentes e o quão intuitivas suas funções podem ser, por meio do uso de botões, ícones. Para alcançar uma boa usabilidade e consequentemente garantir uma boa experiência ao usuário, basta seguir algumas indicações básicas, como as que procedem explicadas no decorrer deste capítulo. 4.1.Definição De acordo com a norma técnica ISO/IEC 9126 (1991), o termo usabilidade pode ser definido como: Um conjunto de atributos relacionados com o esforço necessário para o uso de um sistema interativo, e relacionados com a avaliação individual de tal uso, por um conjunto específico de usuários. Segundo Nielsen (1993), a usabilidade para uma determinada interface pode ser avaliada pelos seguintes princípios:  Facilidade de aprendizado;  Facilidade de lembrar como realizar uma tarefa após determinado tempo;  Rapidez no desenvolvimento de tarefas;  Baixa taxa de erros;  Satisfação subjetiva do usuário.
  59. 59. 58 De acordo com Krug (2006), uma interface pode apresentar um problema de usabilidade, quando um determinado usuário ou um conjunto de usuários tem dificuldades para realizar uma tarefa dentro dela. Essas dificuldades podem ter diversas e variadas origens e podem causar os mais diversos ruídos na execução da tarefa, como por exemplo diminuição ou perda de dados, produtividade ou rejeição total ao software pelos usuários. Na área de Interação Humano-Computador e User Experience a usabilidade geralmente aponta para que as interfaces de sites, aplicativos, programas de computador, games, etc. sejam simples e fáceis de serem compreendidas e utilizadas. Atualmente termo vem ganhando notoriedade conforme os profisionais e e empresas tem demonstrado preocupação em analisar a criação de interfaces. Hoje em dia, a usabilidade é priorizada pois ela pode ser um fator decisivo para o sucesso ou o fracasso de um produto digital. (TEIXEIRA, 2013). 4.2.Heurísticas Heurística é um método baseado em um conhecimento prático (sem comprovação científica), que vem da experiência cotidiana continuada. (Raposo, 2012). Raposo (2012) também define heurística como um método de inspeção, pois não envolve usuários. Ele é realizado a partir de uma análise realizada por especialistas que advogam pelo usuário. Em outras palavras, a partir do conhecimento dos anseios e necessidades dos usuários e conhecendo as técnicas possíveis de Interação Humano-Computador (IHC), analisam-se um determinado artefato computacional oferece uma boa experiência para o usuário. 4.3.Avaliação Heurística Considerando a heurística como um método de inspeção indireto, Nielsen (1995) propôs uma avaliação guiada por heurísticas que, somada aos princípios
  60. 60. 59 gerais do bom design de interface, pode aprimorar a usabilidade do artefato. A priori, são utilizadas 10 heurísticas: 1. Visibilidade de status do sistema: o sistema deve sempre manter os usuários informados sobre o que está acontecendo, através de feedback apropriado num prazo razoável. 2. Compatibilidade do sistema com o mundo real: O sistema deve falar a linguagem dos usuários, com palavras, frases e conceitos familiares para o usuário, em vez de termos orientados ao sistema. Siga as convenções do mundo real, fazendo com que as informações aparecem em uma ordem natural e lógica. 3. Controle do usuário e liberdade: usuários costumam escolher as funções do sistema por engano e podem precisar de algo que esteja claramente marcado como uma "saída de emergência" para sair do estado indesejado sem ter que passar diversas páginas ou etapas. Também é interessante haver suporte às funções de desfazer e refazer. 4. Consistência e padronização: os usuários não devem ter que se perguntar se diferentes palavras, situações ou ações significam a mesma coisa. Deve-se adotar as convenções de padrão da plataforma. 5. Prevenção de erros: ainda melhor do que boas mensagens de erro, é um projeto cuidadoso que impede que um problema ocorra em primeiro lugar. Pode-se, também, esforçar-se para eliminar as condições passíveis de erros, ou verificá-los e apresentar aos usuários uma opção de confirmação antes de se comprometer com a ação. 6. Reconhecimento, ao invés de recordação: é importante minimizar a carga de memória do usuário, fazendo objetos, ações e opções visíveis. O usuário não deve ter que decorar informações a partir de uma ação anterior. As instruções para utilização do sistema devem estar visíveis ou facilmente recuperáveis sempre que necessário.
  61. 61. 60 7. Flexibilidade e eficiência de utilização: as ações de interface devem ter diferentes formas de ser acionadas, dispor de teclas que funcionem como atalhos e também deve ser possível customizar as interfaces para acionar ações frequentes. 8. Estética e design minimalista: a interface não deve conter informações que são irrelevantes ou raramente necessárias. Cada unidade extra de informação em uma interface, compete com as unidades de informação relevantes e diminui a sua visibilidade relativa. Além disso, o layout deve ser agradável e leve (seguindo os princípios do bom design). 9. Ajudar os usuários a reconhecer, diagnosticar e recuperar-se de erros : as mensagens de erro devem ser expressas em linguagem simples (sem códigos), indicar com precisão o problema e sugerir uma solução construtiva. 10.Ajuda e documentação: mesmo que seja melhor que o sistema seja usado sem um manual, pode ser necessário existir uma documentação para fornecer ajuda aos usuários. Qualquer informação deve ser fácil de pesquisar, com foco na tarefa do usuário, a lista de medidas concretas a realizar, e não ser muito grande. Hoje em dia, também é muito importante oferecer suporte online eficiente e eficaz. 4.4. User Experience O termo User Experience foi cunhado por Donald Norman na década de 90, porque ele acreditava que definições como interface de usuário e usabilidade limitavam o entendimento sobre o que o trabalho dele representava. Sua ideia era cobrir todos os aspectos da experiência da pessoa com o sistema, incluindo gráficos, interface, interação física e manual.
  62. 62. 61 De acordo com Teixeira (2013) a experiência do usuário trata sobre definir as razões pelas quais um problema precisa ser resolvido, para quem essa resolução é importante e como isso precisa acontecer. Isso vai além de encontrar a melhor solução para os usuários. Com as interfaces digitais dominando cada vez mais os novos aspectos de nossas rotinas, aumenta, também, a procura por profissionais especializados em design da experiência do usuário (UX Design) para garantir que esses produtos sejam, acima de tudo, fáceis e agradáveis de usar. Em um mercado cada vez mais competitivo, diferenciam-se os produtos e empresas que colocam o usuário no centro do processo de design, envolvendo-os desde as etapas de estratégia e concepção até as etapas de desenvolvimento e testes. (TEIXEIRA, 2013, p.155) Segundo a ISO 9241-2101 o termo experiência do usuário pode ser definido como um conjunto de percepções e reações de uma pessoa que porém resultar no uso de um produto, sistema ou serviço. Ainda de acordo com a definição da ISO, a experiência do usuário engloba todas as emoções, preferências, crenças, respostas físicas e/ou psicológicas, comportamentos e realizações do usuário que acontecem antes, durante e após a utilização. Existem também lista três fatores que inspiram a experiência do usuário: o sistema, usuário e do contexto de utilização. De acordo com Teixeira (2013) a experiência do usuário trata sobre definir as razões pelas quais um problema precisa ser resolvido, para quem essa resolução é importante e como isso precisa acontecer. Isso vai além de encontrar a melhor solução para os usuários. A crescente demanda tecnológica e as metodologias de desenvolvimento ágil incorporaram a experiencia do usuário como parte importante dentro do processo de desenvolvimento de software, de forma que o usuário passe a figurar no centro do projeto de desenvolvimento, como pode ser observado na Figura 20 (Memória, 2005).
  63. 63. 62 Figura 20 - Áreas-chave para a metodologia de projeto centrada nos usuários Ao pensar em um produto ou sistema deve-se projetá-lo com o intuito de otimizar as relações de uso entre o usuário e o produto, aumentando assim a satisfação e fidelização dos clientes. Melhorar a relação com o consumidor são pequenas ações que fazem com que o produto ou sistema não precise de esforço extra de aprendizado, fazendo do sistema um sucesso. Conforme Teixeira (2013) um profissional de UX deve ser alocado em todas as etapas do projeto, começando pelo briefing ou levantamento de requisitos onde o profissional de UX ajuda a realizar entrevistas, conhecer os investidores e até mesmo observar as expectativas de cada área envolvida no projeto. Passando pelo planejamento estratégico voltado à criação de produtos centrados no usuário, entendendo como o público vê e se relaciona com a sua marca através de pesquisas. Na fase do design este profissional pode ajudar a organizar o fluxo e estrutura do produto, como a interação deve ser e principalmente garantir a usabilidade. Design centrado no usuário Facilidade de uso Conteúdo Performance Satisfação Valor da marca
  64. 64. 63 E durante a implementação, o profissional de UX faz uma interface entre o time de designers e desenvolvimento. Enquanto isso o profissional aplica testes de usabilidade com usuários, adiantando assim, o escopo para a fase de Quality Assurance, onde propõe melhorias encontradas nos testes de usabilidade. 4.5.Conclusão O capítulo de usabilidade expõe as definições básicas do termo e busca contextualizar o leitor sobre quais requisitos um produto digital deve apresentar para que não haja dúvidas quanto a sua utilização. A aplicação das heurísticas potencializa a experiência do usuário, pois gera uma percepção positiva do produto e aumentam as chances de prestigio do mesmo, pois um site com uma boa usabilidade desperta a visita e o retorno de seus usuários. O processo de pesquisa da experiência de usuário pode por vezes ser complexo pois envolve reuniões com desenvolvedores, usuários e gestores. No entanto existem produtos hoje que atendem aos requisitos de avaliação heurística e disponibilizam estes componentes de forma adequada. Estes produtos são chamados de frameworks e serão melhor abordados no capítulo seguinte.
  65. 65. 64 5. FRAMEWORKS A Web Responsiva já é uma realidade nos dias de hoje e já se tornou um requisito essencial para muitas empresas, na hora de desenvolver um site ou solicitar um site ou aplicação. O mercado precisa se encaixar e se adaptar aos novos requisitos com a mesma velocidade que eles aparecem e evoluem. Uma solução para empresas que querem se encaixar no mercado responsivo de maneira praticamente instantânea, é utilizando frameworks. Existem diversos frameworks, que oferecem suporte a estrutura responsiva, facilitando e agilizando o desenvolvimento de sites responsivos, além da estrutura responsiva eles oferecem bibliotecas de componentes que também atendem a estrutura responsiva. Após a apresentação da definição de frameworks serão expostos quatro dos frameworks que são mais aconselhados para o desenvolvimento responsivo. 5.1.Definição O reuso de software e sistema está geralmente vinculado à redução de custos, prazos e consequentemente aumento da qualidade. Reunir um conjunto de de funcionalidades pertencentes ao mesmo padrão é popularmente conhecido como framework. Um framework é um projeto de subsistema, composto por um conjunto de classes abstratas e concretas e as interfaces entre elas (PROJETO DE SOFTWARE ORIENTADO A OBJETO, 2015). Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação. (VERGILIO, 2013)
  66. 66. 65 5.2.Frameworks de front-end para desenvolvimento responsivo 5.2.1. Pure De acordo com Dutson (2015), Pure está entre os frameworks CSS mais populares. Seu objetivo é fornecer aos desenvolvedores e designers as ferramentas necessárias para iniciar um sistema modular. O Pure é baseado em sistema de grids, só que, ao invés de utilizar a configuração de numeros de colunas, ele usa frações. O Pure trabalha bem com layouts ágeis e adaptáveis, o que permite a mistura e a combinação de acordo com as necessidades do projeto. O Pure é facil de utilizar tanto no sistema de grids, como utilizando sua biblioteca e folhas de estilo. Ele também permite que sejam feitos seus próprios grids e breakpoints. Conforme Patel (2014), o Pure é um Framework de CSS desenvolvido pela Yahoo Inc. Ele é uma estrutura ágil e leve, possui uma biblioteca pequena, que tem como alvo o desenvolvimento para dispositivos móveis. O núcleo de sua biblioteca é a Normalize.css, que fornece layout e estilos para os elementos HTML (Figura 21). Figura 21 - Exemplo de um site construído pelo Pure
  67. 67. 66 O Pure tem a opção de personalização de componentes, pois, ao invés de fornecer varios estilos, que teriam de ser reescritos, gerando código sobressalente, é possivel inserir suas próprias regras. 5.2.2. Foundation Segundo Dutson (2015), Foundation é um projeto da Zurb. Orginalmente, a Zurb lançou soluções modais/ light-boxe de conteúdos deslizantes, posteriormente a Zurb resolveu agrupar seu kit de componentes e ferramentas e disponibilizar aos desenvolvedores e designers. Atualmente, ZURB permite o download de quaisquer componentes ou todo o kit. O sistema de grids, com 12 colunas é um dos componentes do kit. O sistema de grid é semelhante aos demais sistemas de grid existentes, é possível compensar as colunas, agrupá-las e personalizá-las. A personalização é baseada em Sass, na Erro! Fonte de referência não encontrada. pode-se observar o resultado de um modelo de página feita com o Foundation. Figura 22 - Exemplo de site construído pelo Foundation Fonte: Autoria Própria
  68. 68. 67 De acordo com Silva (2014b), o Foundation possui diversos diferenciais, entre eles a semântica aplicada é um dos destaques, a marcação HTML é toda pensada no valor semântico dos elementos, isso acaba otimizando o carregamento e gera uma estrutura mais limpa. Outro diferencial é o uso da técnica de desenvolvimento Mobile First2 . Silva (2014b) também cita como diferenças, a personalização como já foi mencionado e o profissionalismo, pois a Zurb oferece suporte comercial, treinamento e consultoria relacionados ao framework. 5.2.3. Gridless O framework Gridless pode ser visto como um ponto de partida para projetos Web. Ele é baseado na abordagem mobile First. Não traz classes semânticas pré- definidas e diferente dos demais, não inclui um sistema de grids, dando ao utilizador a flexibilidade de usar um próprio. As características apresentadas tornam o Gridless adaptável aos diversos projetos (Erro! Fonte de referência não encontrada.). Figura 23 - Exemplo de site construído pelo Gridless Fonte: Autoria Própria 2 Mobile First é concepção de seu site ou aplicativo para os dispositivos moveis em primeiro lugar, e, em seguida, expansão que para incluir telas maiores e mais dispositivos com recursos mais completos.
  69. 69. 68 O foco do Gridless é na compatibilidade com todos os navegadores. Por isso, foi construído com base no princípio de progressive enhancement e Integra Respond.js como ferramenta auxiliar que garante que navegadores que não suportam CSS3 tenham o suporte de media queries. 5.2.4. Bootstrap Desenvolvido pelos funcionários do Twitter, o Bootstrap é uma forte ferramenta para criação de interfaces que oferece um desenvolvimento Web rápido e fácil. Bootstrap vem com um grande número de componentes (tais como guias, cabeçalhos, menus), CSS que estão preparados para a Web responsiva, JavaScript, plug-ins e muito mais. Visando resolver o problema das telas que se adaptem com os mais diversos dispositivos, ele fornece uma vasta biblioteca de componentes que podem ser aplicados ao desenvolvimento nas mais diversas linguagens e técnicas de Web design otimizando o workflow (Erro! Fonte de referência não encontrada.). Figura 24 - Exemplo de site construído pelo Bootstrap Fonte: Autoria Própria
  70. 70. 69 Criado em 2010 hoje é open source, hospedado no GitHub que é um serviço de compartilhamento de código e versionamento de documento, e é o projeto mais popular. As técnicas de Web design responsivo foram incluídas desde a versão 2 e, em seguida, foi opcional a partir de seu lançamento, portanto por meio do Bootstrap é possível desenvolver layouts Fixos e layouts Fluidos. Durante a segunda metade de 2011 até o mais recente lançamento, a versão 3, trouxe a opção de uso do padrão de desenvolvimento mobile first. Hoje o Bootstrap não é apenas um framework com design responsivo eficaz, mas oferece todos os tipos de opções de funcionalidade e estilo. Seus arquivos CSS e JavaScript podem ser incluídos em um projeto para ajudar na criação de elementos como por exemplo pop ups, menus e slide shows. Para utilizar o Bootstrap e qualquer um dos demais framworks responsivos é de suma importância que se tenha um bom entendimento sobre o sistema de Grids, pois é a base da estrutura que o Bootstrap utiliza. Outro conceito que o Bootstrap utiliza é o conceito de container. O container é uma div, que garante que o seu layout vai ficar alinhado na página, e com margens para as laterais. Ele também centraliza o conteúdo na tela do browser. Dependendo do tamanho da tela, o container definirá automaticamente as larguras do seu layout, para que o conteúdo seja melhor visualizado. Deve-se usar um container para englobar o posicionamento de todos os elementos do layout da página. Para utilizar o Bootstrap basta fazer o download no site oficial e descompactar os arquivos para iniciar o projeto. Em seguida é só criar um arquivo HTML, e o próprio site já fornece uma estrutura básica do HTML. O código declara o HTML5, carrega os arquivos necessários (CSS + JavaScript) e define uma estrutura básica para o projeto. Feito isso o Bootstrap estará configurado e pronto para receber as demais customizações. O site oficial disponibiliza alguns templates de exemplo que são bastante úteis, principalmente para quem começa a se aventurar agora. 5.3.Conclusão
  71. 71. 70 Neste capítulo foram apresentados quatro frameworks que auxiliam no desenvolvimento de sites responsivos. Os frameworks são ferramentas facilitadoras, que acabam por minimizar o tempo de desenvolvimento, devido a oferta de facilidade de uso. O número de opções em frameworks, é grande, pois existem frameworks, com diferentes focos de finalidade. Há frameworks que focam na semântica, outros focam no sistema de grades e estrutura dos sites, alguns mantem o foco nos componentes. Há frameworks que servem para a responsividade da tipografia. Enfim é uma grande variedade de finalidades. Os frameworks apresentados, são completos no que se trata da combinação de estrutura e componentes e garantem ser de fácil aplicação, otimizando tempo de desenvolvimento e inserção no mercado de sites responsivos. Os frameworks oferecem a opção de personalização garantindo que possam ser feitos trabalhos originais, evitando uma padronização e desvalorização do produto para os clientes. No próximo capítulo será apresentado o desenvolvimento de um protótipo de site responsivo com o uso do framework Bootstrap. Serão mostradas as características dos componentes e sua adaptação nos dispositivos. Serão analisadas também, as heurísticas da usabilidade que auxiliam na boa experiência do usuário.

×