Desenvolvimento de sites responsivos com Bootstrap

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

1
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

2
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

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.

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 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

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

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

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

9
LISTA DE TABELAS
Tabela 1 - Constituição de uma regra de CSS..................................................................... 27
Tabela 2: Tipos de medias existentes.................................................................................. 44

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

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

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

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.

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.

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%.

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

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.

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:

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.

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.

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.

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.

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

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

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>

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.

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:

28
Quadro 3 - Exemplo de aplicação de uma regra CSS em um parágrafo
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;
}

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.

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.

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

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.

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

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
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

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)

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

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

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.

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

40
Figura 11 - Exemplo de layout fluido aberto em uma largura de 1600px
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.

41
Figura 12 - Um exemplo de conversão de pixel para “em”, em uma largura de 960px
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”.

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

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">

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

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:

46
Quadro 5 - Exemplo de estilo para dispositivos de 320px de tamanho
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
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)">

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; }
}

48
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

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.

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

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.
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%;
}

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.

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
É 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%;
}

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

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

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.

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.

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

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.

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.

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).

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

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.

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)

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

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

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
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.

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

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

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.

Desenvolvimento de sites responsivos com Bootstrap

Desenvolvimento de sites responsivos com Bootstrap

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (15)

Semelhante a Desenvolvimento de sites responsivos com Bootstrap

Semelhante a Desenvolvimento de sites responsivos com Bootstrap (20)

Desenvolvimento de sites responsivos com Bootstrap