universidade federal de pernambuco centro … · 2019. 10. 26. · agradeço aos meus professores...
TRANSCRIPT
UNIVERSIDADE FEDERAL DE PERNAMBUCO
CENTRO ACADÊMICO DO AGRESTE
NÚCLEO DE DESIGN E COMUNICAÇÃO
CURSO DE DESIGN
O USO DO DESIGN RESPONSIVO NO DESENVOLVIMENTO DE WEBSITES:
aplicação dos métodos na construção de um website
ALYSON WEGILLES DE SOUZA CAMPOS
Caruaru, 2017
ALYSON WEGILLES DE SOUZA CAMPOS
O USO DO DESIGN RESPONSIVO NO DESENVOLVIMENTO DE WEBSITES:
aplicação dos métodos na construção de um website
Monografia apresentada como pré-requisito
para a conclusão do curso de Design, da Universidade Federal de Pernambuco,
orientado pelo Prof. Fábio Caparica de Luna.
Caruaru, 2017
Catalogação na fonte:
Bibliotecária – Marcela Porfírio – CRB/4-1878
C198u Campos, Alyson Wegilles de Souza.
O uso do design responsivo no desenvolvimento de websites : aplicação dos métodos na construção de um website. / Alyson Wegilles de Souza Campos. – 2017.
61f. : il. : 30 cm. Orientador: Fábio Caparica de Luna. Monografia (Trabalho de Conclusão de Curso) – Universidade Federal de Pernambuco,
CAA, Design, 2017. Inclui Referências. 1. Sites da Web – Projetos. 2. Projeto gráfico (Tipografia). 3. Desenho
(Projetos). I. Luna, Fábio Caparica de (Orientador). II. Título.
740 CDD (23. ed.) UFPE (CAA 2017-129)
Alyson Wegilles De Souza Campos
“O USO DO DESIGN RESPONSIVO NO DESENVOLVIMENTO DE WEBSITES: Aplicação dos métodos na construção de um website”
A comissão examinadora composta pelos membros abaixo, sob a presidência do
primeiro, considera o aluno Alyson Wegilles De Souza Campos, APROVADO.
Caruaru, 18 de julho de 2017.
______________________________
Fábio Caparica de Luna
UFPE
______________________________
Ricardo Augusto de Azevedo Marcelino
UFPE
______________________________
Renato José Araújo de Albuquerque
FIBAM
À minha família e a Deus
AGRADECIMENTOS
Gostaria de agradecer primeiramente aos meus pais por terem me dado o melhor
que puderam oferecer e fazer pelo meu próprio bem pensando sempre no meu
futuro, como uma pessoa de bem e aos meus irmãos que estão do meu lado dando
apoio desde sempre em seja ela em qualquer aspecto.
Agradeço aos meus professores do curso de Design por terem me passado o
melhor deles em questão de conhecimentos e que suas perspectivas de como
enxergar o mundo do design fizeram com que eu pudesse olhar para os mínimos
detalhes nas coisas e enxergar que por mais simples que uma coisa seja, ela pode
fazer diferença.
Agradeço também ao meu professor orientador, Fábio Caparica de Luna, pela
sua espontaneidade e que com seu senso de humor me mostrou que este trabalho
não é nenhum “bicho de sete cabeças”.
A todos os meus amigos que ganhei nessa trajetória de todo o curso, dos
conhecimentos trocados com todos eles no dia a dia. Aos meus parceiros diários do
PET – Programa de Ensino Tutorial e Extensão, Amanda Sobral e Renata Ribeiro, que
me ensinou que trabalhar em equipe pode ser uma alternativa melhor para o
desenvolvimento de projetos e atividades e que eles fizeram meus dias mais
importantes.
Uma chamada em destaque à minha namorada Thais Tainan Santos da Silva,
que desde que a conheço que me apoia e que deseja o meu melhor e sempre presente
em todas as etapas dessa trajetória.
Agradeço a Universidade Federal de Pernambuco, a melhor do Nordeste e
também à internet que de forma indireta consegui tudo que desejei adquirir e
aprender para o meu conhecimento e experiência, agradeço a todos aqueles que tem
vídeos no Youtube, blogs e sites de design transmitindo conhecimentos gratuitos.
RESUMO
Este projeto de pesquisa tem como objeto de estudo o uso do design responsivo no
desenvolvimento de websites para a aplicação em diferentes plataformas de acesso
digital, tendo como propósito a usabilidade e a experiência do usuário. O design
responsivo é uma solução técnica usada para que um website possa adaptar os
elementos automaticamente à largura do dispositivo no qual ele está sendo
visualizado, sem restrições a modelos específicos. No cenário atual é indispensável
o uso da ferramenta, pois ela facilita a navegação em outros aparelhos que não sejam
apenas o notebook ou o computador como as televisões, os celulares e os tablets.
Palavras-chave: Design responsivo. Websites. Design.
ABSTRACT
This research project aims to study the use of responsive design in the
development of websites for the application in different platforms of digital access,
having as purpose the usability and the user experience. Responsive design is a
technical solution used so that a website can automatically adapt the elements to
the width of the device on which it is being viewed, without restrictions to specific
models. In the current scenario it is indispensable to use the tool because it
facilitates navigation on devices other than just the notebook or the computer such
as televisions, cell phones and tablets.
Keywords: Responsive design. Websites. Design.
LISTA DE FIGURA
Figura 1 - Evolução de acessos do SMP (serviço móvel pessoal) ........................ 15
Figura 2 - Estatísticas sobre o acesso à internet .......................................... 16
Figura 3 - Navegador WordWideWeb ........................................................ 18
Figura 4 - Primeira versão do Mosaic, lançada em 1992. ................................ 19
Figura 5 - A Listapart-blog .................................................................... 20
Figura 6 - A importância do uso de “grids” em websites ................................ 22
Figura 7 - Layout fluido ........................................................................ 23
Figura 8 - Media Queries ....................................................................... 25
Figura 9 - Como usar as Media Types ........................................................ 26
Figura 10 - História da HTML5 ................................................................ 27
Figura 11 - Estrutura básica html5 ........................................................... 28
Figura 12 - Captura de tela hierarquia estruturada ...................................... 29
Figura 13 - Website do The Boston Globe em dispositivos diferentes ................. 31
Figura 14 - Captura de tela do Boston Globe .............................................. 32
Figura 15 - Website do Alura em diferentes tipos de dispositivos ..................... 32
Figura 16 - Público alvo ........................................................................ 35
Figura 17 - Aplicação da marca .............................................................. 35
Figura 18 - Estudos de alternativas para o símbolo ....................................... 36
Figura 19 - Geração de alternativas ......................................................... 36
Figura 20 - Resultado final .................................................................... 36
Figura 21 - Logotipo ............................................................................ 37
Figura 22 - Diagrama construtivo da marca ................................................ 37
Figura 23 - Margem de segurança ............................................................ 37
Figura 24 - Paleta de cores.................................................................... 38
Figura 25 - Tipografia em caixa baixa ....................................................... 38
Figura 26 - Tipografia em caixa alta ........................................................ 39
Figura 27 - Tela inicial do website da Sabor Verde ....................................... 39
Figura 28 - Wireframe do blog sabor verde ................................................ 40
Figura 29 - Adaptação do layout em dispositivos diferentes ............................ 41
Figura 30 - Sistema de grid utilizado no projeto .......................................... 42
Figura 31 - Representação da quantidade de colunas utilizadas do total ............ 42
Figura 32 - Quantidade em pixels que cada coluna preenche .......................... 43
Figura 33 - Exemplo de adaptação do conteúdo e da organização das colunas ..... 44
Figura 34 - Área de início e menu de navegação .......................................... 44
Figura 35 -Área de receitas ................................................................... 45
Figura 36 - Área de dicas de saúde .......................................................... 45
Figura 37 - Área de notícias ................................................................... 46
Figura 38 - Rodapé.............................................................................. 46
Figura 39 - Captura de tela de notebook ................................................... 47
Figura 40 - Iphone-4 ............................................................................ 48
Figura 41 - Iphone-6 ............................................................................ 49
Figura 42 - Ipad ................................................................................. 50
Figura 43 - Ipad Pro ............................................................................ 51
Figura 44 - Ipad Pro ............................................................................ 52
Figura 45 - Smartv .............................................................................. 53
Figura 46 - smartv de 40 polegadas ......................................................... 54
Figura 47 - smartv de 32 polegadas ......................................................... 54
Figura 48 - estatística dos gerenciadores de conteúdo mais utilizados ............... 55
Figura 49 - Painel do wordpress .............................................................. 56
SUMÁRIO
1 INTRODUÇÃO .................................................................................. 12
1.1 Objetivos.................................................................................. 13
1.1.1 Objetivo geral ...................................................................... 13
1.1.2 Objetivos específicos .............................................................. 13
2 JUSTIFICATIVA................................................................................. 14
3 METODOLOGIA DE PESQUISA ................................................................ 17
4 FUNDAMENTAÇÃO TEÓRICA ................................................................. 18
4.1 A história da web ........................................................................ 18
4.2 O surgimento do design responsivo .................................................. 19
4.3 Elementos do design responsivo (rwd) .............................................. 21
4.4 Grid fluido ................................................................................ 21
4.5 Imagens e mídia flexíveis .............................................................. 23
4.6 Media queries ............................................................................ 24
4.7 Pilares do design responsivo (rwd) ................................................... 26
4.8 Tipografia para a web .................................................................. 28
4.9 Usabilidade ............................................................................... 29
5 TRABALHOS RELACIONADOS ................................................................ 31
5.1 The Boston Globe ....................................................................... 31
5.2 Alura – cursos online de tecnologia .................................................. 32
6 APRESENTAÇÃO E DISCUSSÃO DOS RESULTADOS ........................................ 34
6.1 Projeto gráfico ........................................................................... 34
6.1.1 A empresa ........................................................................... 34
6.1.2 Público alvo ......................................................................... 34
6.1.3 A marca .............................................................................. 35
6.1.4 Símbolo .............................................................................. 36
6.1.5 Logotipo ............................................................................. 37
6.1.6 Diagrama construtivo .............................................................. 37
6.1.7 Margem de segurança ............................................................. 37
6.1.8 Cores ................................................................................. 38
6.1.9 Tipografia ........................................................................... 38
6.1.10 Website ............................................................................. 39
6.1.11 Layout .............................................................................. 39
6.1.12 Sistema De Grids .................................................................. 41
6.1.13 Media queries ..................................................................... 43
6.1.14 Navegação ......................................................................... 44
6.1.15 Testes realizados ................................................................. 47
6.1.16 Cms ................................................................................. 54
7 CONCLUSÃO.................................................................................... 57
REFERÊNCIAS..................................................................................... 59
12
1 INTRODUÇÃO
A década de 1990 tornou-se a era de expansão da Internet. O surgimento
acelerado dos provedores de acesso e portais de serviços online contribuíram para
este crescimento. A internet passou a ser utilizada por vários segmentos sociais. Os
estudantes passaram a buscar informações para pesquisas escolares, enquanto alguns
jovens utilizavam para pura diversão em sites de jogos.
A experiência de acessar uma página web não adaptativa em dispositivos como
os celulares que podem ser tão pequenos em comparação aos computadores
convencionais, tornou-se algo desagradável e até mesmo frustrante para seus
usuários. Isto ocorre porque a falta de um layout adequado para estes aparelhos
implica numa visualização e navegação precária, afetando até mesmo o desempenho
da aplicação.
A internet se proliferou pelo mundo graças aos avanços de banda larga e os diversos dispositivos capazes de navegar pela rede - celulares, tablets1, televisões e videogames. Diversas empresas do mundo digital impulsionam a evolução das tecnologias que usamos para criar uma web melhor. Profissionais em empresas como Google, Microsoft, Apple e Facebook trabalham exclusivamente em melhorias para os navegadores mais utilizados, além de participar da definição de novos padrões e disseminam bastante conhecimento junto à comunidade de desenvolvedores. (MAZZA, 2012, p. 9).
Tudo teve início com um artigo do blog A List Apart, assinado por Ethan
Marcotte no ano de 2010. O autor enfatiza no início do texto uma breve comparação
de que a arquitetura é mais imutável do que o trabalho na web, suas decisões de
como moldar um espaço físico podem perdurar décadas ou até séculos. Já o trabalho
na Web é transitório. Suas ideias e métodos de design duram no máximo dois anos.
[...] logo no início do artigo somos apresentados a Christopher Wren, um arquiteto inglês. Christopher disse uma vez que a arquitetura é uma arte que objetiva a eternidade. Afinal, todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos… Quer um exemplo prático? O coliseu de Roma foi construído no ano 79 e ainda é uma das maiores atrações turísticas do mundo (MARCOTTE, 2010)
1 Tablet é um tipo de computador portátil, de tamanho pequeno, fina espessura e com tela sensível ao toque
(touchscreen). É um dispositivo prático com uso semelhante a um computador portátil convencional, no entanto,
é mais destinado para fins de entretenimento que para uso profissional.
13
1.1 Objetivos
1.1.1 Objetivo geral
Desenvolver um website responsivo, funcional e que se adapte a qualquer tela
de dispositivo, seja ele um smartphone2 até telas de smartv´s3.
1.1.2 Objetivos específicos
1. Criar um layout simples e intuitivo;
2. Entender os princípios do design responsivo;
3. Investigar como a estrutura do website se comporta em diferentes
dispositivos;
4. Aplicar os métodos do design responsivo para todos os dispositivos;
2 Smartphone significa telefone inteligente, em português, e é um termo de origem inglesa. O smartphone é um
celular com tecnologias avançadas, o que inclui programas executados um sistema operacional, equivalente aos
computadores. 3 Smart TV é uma expressão do âmbito da tecnologia e que significa "televisão inteligente". A Smart TV também
é conhecida como TV conectada ou TV Híbrida, porque é uma junção da televisão com a internet.
14
2 JUSTIFICATIVA
Com a massificação de compra dos aparelhos portáteis (smartphones e
tablets) a forma de acessar a internet mudou drasticamente desde a época em que
a web, segundo Zemel, “significava um navegador instalado num Desktop controlado
por mouse e teclado numa tela de tamanho confortável” (Zemel, 2013, p. 01).
Com o surgimento de vários tamanhos de tela e formas de acessar uma página
na internet, a estrutura e a construção de um site não é mais uma página previsível,
limitada apenas ao browser dos desktops, é pensar em páginas flexíveis e que seja
vista em qualquer tipo de tela de forma aprazível.
Web Design Responsivo é a reposta para essa nova web, é a ferramenta feita
para adaptar páginas (layout) de acordo com a resolução do dispositivo,
redimensionar imagens, ocultar elementos desnecessários e adaptar o tamanho de
botões e tipografias.
O design responsivo pode ser aplicado em qualquer site, seja ele para sites e-
commerce, portais de notícias, redes sociais e etc. O objetivo dele é trazer facilidade
na navegação, bem como fazer com que todos os usuários de diferentes plataformas
se sintam integrados.
Sites responsivos adequamos seus elementos e o seu comportamento para cenários, como disponibilizando fluxo de navegação que se adequará ao tamanho da tela utilizada ou mudando as interações do usuário caso ele use um dispositivo sensível a toque ou não. Além de precisar identificar o tamanho, capacidade e funcionalidades disponíveis, é importante que a disposição dos elementos seja flexível o bastante para se adequar a qualquer dispositivo. (MAZZA, 2012, p. 184).
De acordo com dados do Instituto Brasileiro de Geografia e Estatísticas (IBGE)4
o acesso à Internet no Brasil em 2014 correspondia a 54,4% da população brasileira
(acima de 9 anos). De acordo com o mesmo estudo realizado pelo IBGE em 2014,
77,9% dos brasileiros (acima de 9 anos) acessaram a Internet através de um aparelho
smartphone.
Segundo dados da Agência Nacional de Telecomunicações (Anatel) registrados
em 6 de setembro de 2016, em julho de 2016, 252,5 milhões de acessos ativos na
4 Fonte: Pnad, 2014 - IBGE.
15
telefonia móvel e teledensidade5 1, de 123,52 acessos por 100 habitantes. No sétimo
mês do ano, os acessos pré-pagos totalizavam 177,42 milhões (70,24% do total) e os
pós-pagos, 75,16 milhões (29,76%).
Figura 1 - Evolução de acessos do SMP (serviço móvel pessoal)
Fonte: http://www.anatel.gov.br/dados/index.php/destaque-1/270-destaques-smp (ANATEL -
2016)
Segundo a Folha de São Paulo, baseado nos dados da 27ª Pesquisa Anual de
Administração e Uso de Tecnologia de Informação nas Empresas, o número de
aparelhos smartphones em uso no Brasil chegou a 168 milhões em maio de 2016. Em
relação ao ano de 2015 do mesmo mês houve uma alta de 9%, ficando o respectivo
ano em 151,5 milhões. Este número leva em consideração as mudanças
comportamentais da população, quanto mais jovem a pessoa, mais ela está fazendo
tudo “na palma da mão”.
5 Índice de distribuição dos acessos à rede telefónica numa determinada região, que revela o número de linhas telefónicas ativas por cada 100 habitantes.
16
Figura 2 - Estatísticas sobre o acesso à internet
Fonte: br.pinterest.com/pin/188588303124136275/
17
3 METODOLOGIA DE PESQUISA
Esta é uma pesquisa de base projetual, que sugere a realização prática de um
projeto; é Analítica e Qualitativa por analisar os estudos já realizados na área;
Monodisciplinar por se tratar de assuntos ligados apenas ao design e objetiva por
tratar de dados diretos e impessoais.
Será utilizado o método de abordagem dedutivo para aplicar os conhecimentos
a um caso específico. São usados os métodos de procedimentos Funcionalista.
Os dados desta pesquisa têm origem em Pesquisas Bibliográficas, Observação
sistemática e Testes.
Dos procedimentos de pesquisa e ferramentas conceituais:
• Geração/Seleção de alternativas
• Refino e testes;
• Implementação da solução.
18
4 FUNDAMENTAÇÃO TEÓRICA
4.1 A história da web
Tim Berners Lee, foi o inventor da web e também do primeiro protótipo de
um navegador para rodar em computadores da NeXT, no ano de 1990. Inicialmente
foi dado o nome de WorldWideWeb, entretanto, para evitar confusões entre a rede
de servidor e o software de navegação ele foi chamado, posteriormente, de Nexus
(figura 3). O navegador funcionava em duas vias, permitindo ao usuário ler e editar
as páginas ao mesmo tempo dispensando o usuário/editor de mexer no código HTML,
fazendo a alteração direto do navegador.
Figura 3 - Navegador WordWideWeb
Fonte: https://tecnologia.terra.com.br/internet/primeiro-navegador-da-internet-completa-20-
anos,d7495295fb6ea310VgnCLD200000bbcceb0aRCRD.html (TERRA, 2010)
A finalidade da invenção era de compartilhar documentos, na sua maioria de
caráter científico, entre os cientistas ao redor do mundo. Não havia preocupação
com layouts, e os conteúdos, inteiramente textuais, eram mostrados em apenas um
layout de uma coluna.
Em 1992 foi desenvolvido a primeira versão do navegador gráfico popular da
internet, chamado de Mosaic.
O navegador Mosaic (figura 4) foi o primeiro navegador capaz de produzir
imagens e textos em uma mesma página, tornando a internet mais atraente e mais
19
simples de usar, deixando de lado um formato de documento de texto para um layout
mais parecido com o que temos atualmente.
Figura 4 - Primeira versão do Mosaic, lançada em 1992.
Fonte: http://tecnologia.terra.com.br/internet/mosaic-ha-20-anos-era-lancado-o-1-navegador-
grafico-da-web,6f3289d31f13e310VgnVCM3000009acceb0aRCRD.html (TERRA, 2013)
Em 1997, foi lançada a HTML3.2 com a criação do elemento table que
revolucionaria a web, com desenvolvimentos de layouts complexos e de grande
impacto visual, onde era visto apenas conteúdos textuais e em uma única coluna.
As tabelas continuam sendo uma fantástica ferramenta para criar layouts, os mais complexos que o leitor possa imaginar, mas que apesar de ser uma ferramenta incrível, vários fatores impedem, nos dias atuais, o uso de tabelas para criação de layouts. SILVA (2014, p. 29)
4.2 O surgimento do design responsivo
A primeira vez que se ouviu falar no termo design responsivo foi no dia 25 de
maio de 2010, por Ethan Marcotte que escreveu uma matéria no site, A List Apart,
que mudaria de vez toda a estrutura do desenvolvimento de layouts. A matéria cita
ALLSOPP (2010):
O controle que os designers têm sobre conteúdos publicados na mídia impressa e tão desejado para aplicação na web é, simplesmente, consequência das restrições que a página impressa impõe. Nós devemos nos conscientizar de que a web não impõe as restrições da
20
mídia impressa, ela necessita de design flexível. (ALLSOPP, John (2010), apud MARCOTTE, Ethan 2010).
Figura 5 - A Listapart-blog
Fonte: http://www.t3-kindler.de/loesungen/responsive-webdesign-rwd.html (KINDLER, 2013)
Silva (2014), cita que pensar e desenvolver formas e objetos adaptáveis exige
uma solução que combine uma aplicação tecnológica com uma excelente qualidade
final do produto. De acordo com o autor:
Para criar um projeto responsivo, é necessário avaliar tantas variáveis que exige uma gama de disciplinas envolvidas comprometidas a trabalhar nas mais diversas camadas do produto como arquitetura, engenharia, eletrônica, psicologia, química, entre outras, podendo criar estruturas otimizadas e sustentáveis. (SILVA, 2014, p.0 4).
Construir para a web é totalmente transitório, seus métodos de design duram
no máximo dois anos. Sendo assim, podemos utilizar o modelo responsivo para
desenvolver interfaces sensíveis aos dispositivos, ao tamanho e orientação de tela,
assim como a facilidade de navegar em qualquer dispositivo, tudo isso sem danificar
a leitura.
Segundo o site teraware6 – 7 tendências de web design para 2016, se o site
não é responsivo, ele está ficando para trás, ou seja, os consumidores tendem a sair
da sua respectiva página e buscar outro website que se ajuste ao tamanho do seu
6 TERAWARE, 7 Tendências de web design para 2016. Disponível em <http://portal.teraware.com.br/7-tendencias-de-web-design-para-2016/>. Acesso em 02 de junho de 2016.
21
dispositivo. Desde 21 de abril de 2015, o Google passou a dar prioridade para todos
os domínios que sejam responsivos a qualquer tipo de tela. Estas são algumas delas:
Usos criativos de cor: Cores são elementos fundamentais para um bom projeto
de web design. É a tendência monocromática, que usa o mesmo tom de cor
em toda a página para evitar distrações. É importante manter a unidade na
identidade visual dos seus projetos, mas sem deixá-los monótonos;
Fontes como recurso gráfico: A utilização de fontes é um recurso cada vez
mais criativo e, em alguns casos, tem um grande peso na resolução de sites
que utilizam caracteres tipográficos;
Melhor experiência para o usuário.
Contar com um design responsivo significa pensar nas fontes que darão uma
melhor leitura nas telas de pequenas dimensões, escolher imagens que carregarão
mais rapidamente e usar cores que priorizem a experiência do usuário. Com esses e
tantos outros cuidados, o design responsivo faz do seu site um ambiente bem mais
intuitivo em comparação a tantos outros, o que certamente será notado pelo
visitante em dois tempos.
4.3 Elementos do design responsivo (rwd)
Para que seja possível a construção de um layout responsivo faz-se necessário
a utilização de algumas tecnologias, são elas:
Grid fluído;
Imagens e mídia flexíveis;
Media queries.
4.4 Grid fluido
De acordo com Pacheco (2014), em - Um guia completo sobre grids para design
responsivo - grid é uma malha que divide a tela em partes proporcionais e possibilita
a distribuição do conteúdo de forma uniforme, proporcionando equilíbrio visual e
estrutural. Construir um Design Responsivo se torna muito mais fácil se ele for
apoiado em um Grid Flexível.
22
Figura 6 - A importância do uso de “grids” em websites
Fonte: http://arquiteturadeinformacao.com/design-de-interacao/guia-completo-sobre-grids-para-
design-responsivo/ (SMARTKISS, 2014)
Benefícios do Grid para os usuários:
Facilitar a leitura e o escaneamento dos elementos;
Melhorar a experiência visual;
Minimizar o esforço cognitivo para interpretar o conteúdo;
Fazer com que o olho humano perceba a distribuição proporcional dos
elementos e associe as informações com maior facilidade.
Benefícios do Grid para o designer:
Rapidez para adicionar, alterar e mover elementos;
Padrões de espaçamento e alinhamento proporcionam uma linha de trabalho
uniforme;
Linguagem visual comum em toda a página;
Mantém a consistência do trabalho caso outro designer mexa no arquivo.
Benefícios do Grid para o desenvolvimento de websites:
Proporcionar ao layout que irá ao ar que fique o mais “pixel” perfeito possível;
Atualização do layout de maneira mais consistente;
23
Rapidez na construção do front-end do site.
O layout fluido é aquele cujas medidas CSS são definidas em unidade relativas,
tais como, porcentagens (%) e ems, que são as mais usadas.
Figura 7 - Layout fluido
Fonte: http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido (BARROS, 2010)
Lopes (2012) afirma:
Fazer um design totalmente fluído é o único jeito de atacar os múltiplos tamanhos de tela dos vários dispositivos diferentes de hoje. Mas, muitas vezes, deixar a página toda ocupar 100% do navegador pode não atingir resultados tão interessantes, principalmente nos extremos, em telas muito grandes ou pequenas. (Lopes, 2012, p.56).
4.5 Imagens e mídia flexíveis
Silva (2014), define que imagens e mídias flexíveis são importantes para um
bom desenvolvimento porque elas se comportam de acordo com as dimensões dos
dispositivos e com isto elas se contraem ou expandem, “[...] as mídias mais comuns
presentes em layouts são vídeos, áudios e widgets em geral. ” (Silva, 2014, p. 36).
Por consequência, como as imagens precisam ser de alta qualidade para serem
vistas em telas de maior resolução, não seria conveniente aos dispositivos de
24
tamanho menor carregar o mesmo tamanho da imagem, podendo causar um
sobrecarregamento, se esta conexão estiver sendo feita através de uma internet 3g7.
Esse é o grande problema a resolver com relação a servir imagens flexíveis.
As imagens podem ser inseridas de dois modos: com uso de CSS
(background:url), como imagem de fundo, ou diretamente na marcação HTML, com
o uso do elemento img.
De modo geral, as imagens de fundo são inseridas com uso de CSS, quando se
trata de imagens apenas decorativas, que não faz parte do conteúdo. Já as imagens
que fazem parte do conteúdo e que são elementos essenciais no layout para
transmitir ou complementar informações, são inseridas com a marcação HTML com
uso do elemento img.
4.6 Media queries
Media queries. Uma peça chave no quebra-cabeça. É possível ajustar a largura
dos elementos e chegar a vários tamanhos de telas somente com o layout fluido. Mas
para que se tenha um site adaptável a todo e qualquer dispositivo é preciso que seus
elementos possam variar de posição (ver figura 7), tamanho, que se adapte de acordo
com as características do navegador, para que o design do site se ajuste.
Media Types é uma recomendação da W3C (http://ow.ly/cQìMF) desde o CSS2. Com Media Types, é possível apresentar o site de maneira diferente, dependendo da media. É possível uma apresentação diferenciada (através de folhas de estilo) quando a página está sendo vista de um projetor, que pode ser diferente de quando se usa uma impressora, um sintetizador de voz, uma TV, dentre outros. (Zemel, 2012, p. 82).
7 [...]3G é apenas um uma sigla que representa a terceira geração (daí o nome 3G) de padrões e tecnologias da telefonia móvel, substituindo o 2G (HAMMERSCHMIDT, o que é 3g. Disponível em < https://www.tecmundo.com.br/celular/226-o-que-e-3g-.htm>. Acesso em 13 de dez. 2016)
25
Figura 8 - Media Queries
Fonte: http://tutorialesenlinea.es/142-media-query.html (TUTORIALESENLINEA, 2013)
Lopes (2012), destaca a importância do uso desta ferramenta nos dias atuais,
para o desenvolvimento web:
Media queries são o ponto central da capacidade de adaptação dos designs responsivos. São essenciais em projetos que envolvem dispositivos móveis mas ganharam seu espaço até em soluções puramente Desktop. São uma das principais ferramentas do desenvolvimento Web moderno. (LOPES, 2012, p. 62).
Antes das media queries surgirem, eram usadas primeiramente as media types,
que foram utilizadas na versão do CSS2 e que basicamente definiam qual tipo de
media o CSS seria direcionado para seu website (para cada dispositivo, um CSS
diferente). Além das telas mais comuns, que são os desktops, tablets e smartphones,
existem outras medias, algumas delas são:
All: Para todos os dispositivos;
Screen: Para monitores ou outros dispositivos com telas coloridas e com
resolução adequada;
Handheld: Para dispositivos de mão. Normalmente com telas pequenas e
banda limitada;
Embossed: Para dispositivos que “imprimem” em braile;
26
Tty: Para dispositivos que utilizam uma grade fixa para exibição de
caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis
com display limitado;
Print: Para impressão em papel;
Braille: Para dispositivos táteis;
Projection: Para apresentações, como PowerPoint;
TV: Para dispositivos como televisores, ou seja, com baixa resolução,
quantidade de cores e scroll limitado;
Speech: Para sintetizadores de voz.
Figura 9 - Como usar as Media Types
Fonte: próprio autor (2016)
Na medida em que a época passava, mais dispositivos de diversos tamanhos
surgiam e o desempenho dos hardwares eram comparados aos de desktops, o que
desencadeou a dúvida sobre qual tipo de media aplicar, já que a capacidade de
navegar por um smartphone, estava comparada com as de um desktop, sendo que
não deixaram de ser um handeld, mas com desempenho de um screen.
4.7 Pilares do design responsivo (rwd)
27
As tecnologias que constituem os pilares de sustentação do design responsivo
segundo Silva (2012, p. 37) são:
1. HTML5;
2. JavaScript para compatibilidades;
3. CSS3.
O HTML5 é a nova versão do HTML4. Essa escolha dá-se devido as vantagens que
essa tecnologia tem sobre a HTML4 e a XHTML. A HTML5 logo de início foi
desenvolvida pela WHATWG1, empresa criada por desenvolvedores de empresas
como Mozilla, Apple e Opera em 2004. “O WHATWG se focava em um padrão
chamado Web Forms 2.0, que se propunha a modificar os formulários do HTML, ele
foi incluído no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto” (EIS,
2012, p. 28).
Figura 10 - História da HTML5
Fonte: http://pt.slideshare.net/moyanoalexis/html-5-historia-y-principales-novedades (MOYANO,
2012)
Entre as inúmeras vantagens da HTML5 para desenvolvimento de sites
responsivos, existem (SILVA, 2014):
Performance;
Multimídia;
Acessibilidade;
Acesso a funcionalidades nativas;
Formulários.
28
Figura 11 - Estrutura básica html5
Fonte: Próprio Autor (2016)
4.8 Tipografia para a web
Segundo um artigo postado no site ia.net no ano de 2006, o texto ressalta que
95% da web é composta apenas de textos. Para que se tenha um layout visualmente
atrativo é necessário que se tenha a tipografia como parte fundamental na interface
e que seja fácil de ler.
A primeira coisa a saber é que a tipografia para a web é diferente para a
impressa, que os tipos têm que ser escolhidos de forma sensata. Todo projeto precisa
de uma escala tipográfica que deverá ser seguida durante sua construção, que para
isto, é necessário avaliar todo o conteúdo textual apresentado: escala, altura da
linha, contraste, hierarquia, legibilidade e alinhamentos.
Steve Krug (2014), especialista em usabilidade, afirma na “terceira lei sobre
usabilidade de Krug”, que “livre-se de metade das palavras de cada página. Depois,
livre-se de metade das que restaram”, a qual ele explica com mais detalhes:
Não vejo grandes dificuldades em se livrar de metade das palavras na maioria das páginas web sem perder algo de valor. A ideia de remover metade das palavras, entretanto, é apenas minha maneira de tentar encorajar as pessoas a serem implacáveis quanto a isso (KRUG, 2014, p. 47).
Livrar-se de todas as palavras que ninguém lerá:
Reduz o nível do ruído ou da interferência da página;
Confere maior destaque ao que realmente importa;
29
Torna as páginas menores, o que permite aos usuários visualizar mais
de cada página sem precisar rolar.
Definir uma escala tipográfica também é importante. Seis escalas diferentes
são suficientes (11, 14, 18, 24, 36, 48) para trabalhar a hierarquia de um site. Definir
um contraste também é de suma importância.
Figura 12 - Captura de tela hierarquia estruturada
Fonte: https://www.weblounge.be/ (Weblounge)
- Cabeçalhos intercalados e bem escritos deixam o autor mais atraídos a fazer
a leitura. “Eles dizem a você o que cada seção aborda ou, se forem menos literais,
o deixarão intrigado sobre isso. ” (KRUG, 2014, p. 37).
- Manter os parágrafos curtos ajuda o leitor a se encontrar nas leituras;
- Usar listas com marcadores;
- Destacas palavras-chaves.
4.9 Usabilidade
Segundo Krug (2014), quando o assunto se trata sobre a usabilidade, a coisa
mais importante que o mesmo ressalta para que um site ou aplicativo seja fácil de
usar, é que “nada que seja importante deve estar a mais de dois cliques de distância
‘ou’ fale a língua do usuário ‘ou ainda’, seja consistente” (Krug, 2014, p. 9).
30
A primeira Lei de Krug (2014) é totalmente clara quanto a usabilidade e ao
bom senso: “Não me faça pensar! ”. Este argumento é essencial e de suma
importância na aplicação de um site responsivo. A capacidade de introduzir
informações numa tela de smartphone ou tablet é limitada, quando comparada a
uma tela de quatorze polegadas (14”). As informações precisam ser claras,
autoexplicativas, “ser evidentes por si só” (Krug, 2014, p. 09).
De acordo com Rocha e Barnauskas (2003), construir um projeto interativo
capaz de atender as necessidades de seus usuários é uma missão desafiadora, pois,
além da preocupação com o projeto, há diversos outros fatores, como facilidade de
uso e de aprendizagem e a satisfação e emoção envolvidas na realização de tarefas.
O autor Don Norman (2006), O Design do Dia-a-dia, baseia-se em sua
experiência de observar os usuários em suas experiências frustradas de utilização de
objetos.
Visibilidade – quanto mais visíveis forem as funções do sistema, mais os
usuários saberão o que fazer.
Feedback – refere-se ao retorno que o usuário recebe após suas ações,
permitindo que ele continue suas atividades.
Restrições – diz respeito ao especificar quais áreas e quais funções o usuário
pode utilizar, desativando opções impossíveis ou, em casos de sites ou
softwares, sombreando botões que não podem ser clicados.
Mapeamento – diz respeito à relação entre os controles e seus efeitos,
geralmente seguindo uma convenção, como no caso dos botões de controle de
som.
Consistência – diz respeito à projeção de interfaces que possuam operações
comuns entre si, utilizando elementos semelhantes para a realização de
tarefas parecidas.
Affordance – refere-se ao atributo de um objeto que permite às pessoas saber como
utilizá-los, ou seja, significa “dar uma pista” (NORMAN, 2066).
Acessibilidade vai além do conceito de desenvolvimento de websites
responsivos. Ela garante que em qualquer situação, com qualquer dispositivo, se
torne uma alternativa a mais de tornar as páginas acessíveis e fáceis dos usuários
navegarem, fazer com que uma simples busca dentro do sistema não se transforme
em problema, uma barreira de acesso.
31
5 TRABALHOS RELACIONADOS
5.1 The Boston Globe
Figura 13 - Website do The Boston Globe em dispositivos diferentes
Fonte: http://filamentgroup.com/lab/introducing_the_new_responsive_designed_bostonglobecom/
O redesign do site do jornal “The Boston Globe” teve como participação no
projeto, Ethan Marcote, fundador do conceito do design responsivo. Boston Globe
(https://www.bostonglobe.com/) foi um dos pioneiros a adotar a ferramenta para
atender seus assinantes e seguidores com os novos dispositivos disponíveis no
mercado. Atualmente a página do Boston Globe permanece exibindo seus conteúdos
na melhor forma do design responsivo e que mostra que esta prática é efetiva e que
trouxe benefícios para os leitores na usabilidade como num todo. O layout da página
é constituída por três quebras (breakpoints) de conteúdos que atende desde
dispositivos pequenos como os smartphones, até telas de resoluções maiores.
32
Figura 14 - Captura de tela do Boston Globe
Fonte: http://www.bostonglobe.com/
5.2 Alura – cursos online de tecnologia
Figura 15 - Website do Alura em diferentes tipos de dispositivos
Fonte: Próprio autor (2016)
33
Atualmente, a empresa (https://www.alura.com.br/) passou por um processo
de redesign de todo o website e construiu uma nova plataforma de ensino, para que
todos os alunos da empresa possam assistir suas vídeo aulas de qualquer lugar e
aparelho, sem falar também da velocidade em que os conteúdos são carregados com
toda a questão dos elementos visuais e com uma ótima a usabilidade.
34
6 APRESENTAÇÃO E DISCUSSÃO DOS RESULTADOS
No desenvolvimento do website, a proposta de desenvolver uma página
totalmente adaptada para qualquer tipo de dispositivo foi obtida com êxito, tanto o
uso apenas de informações relevantes quanto a velocidade de carregamento da
página, a otimização dos dados na utilização de internet móvel e a otimização dos
conteúdos. Para ser possível chegar a este propósito, houve a necessidade de criar
uma empresa fictícia, visto que a procura por um projeto real demandaria a busca
por parceiros e também a autorização de uso da imagem do mesmo.
O desenvolvimento da plataforma começa pela criação da identidade visual,
a definição da empresa, o ramo de negócio, o logotipo, as cores, o símbolo, a
tipografia e por fim, a ideia de se criar um blog para divulgar receitas de comida e
dicas de saúde.
6.1 Projeto gráfico
6.1.1 A empresa
A Sabor Verde – Restaurante é uma empresa de alimentos fictícia criada para
o desenvolvimento deste trabalho. Caracteriza-se como uma empresa que busca
fornecer o melhor da culinária, tendo como ponto forte suas comidas naturais, que
são as saladas. O projeto baseia-se na execução de um blog para notícias na área de
saúde, receitas de alimentação natural, dicas de saúde e bem estar.
6.1.2 Público alvo
O público alvo da empresa são pessoas que frequentam restaurantes que
contenham em seu cardápio comidas vegetarianas dos mais variados pratos e que
prezam pelo o melhor da culinária, mas que as vezes preferem fazer comida caseira
sem perder o bom gosto. Não só consomem comidas vegetarianas, mas também tudo
que é novo, comidas exóticas. São pessoas que vivem conectadas o dia inteiro,
resolvem tudo na palma da mão, pelo aparelho celular e que gostam de praticidade,
cada tempo é precioso e perde-lo não é uma opção.
35
Figura 16 - Público alvo
Fonte: próprio autor (2017)
6.1.3 A marca
A marca tem como resultado de trabalho final os princípios da empresa como
inspiração, que são o respeito e a preservação do meio ambiente, a importância e o
bom uso dos recursos naturais (que são finitos), e a alimentação saudável de todos.
Figura 17 - Aplicação da marca
Fonte: Próprio autor (2016)
36
6.1.4 Símbolo
O ícone desenvolvido visa passar simplicidade com uma forma minimalista,
mas que sua imagem transcenda elegância e sofisticação, levando em consideração
a forma em que a estética das folhas das árvores criam com seus formatos orgânicos,
e a sua importância para o meio ambiente, pois elas são responsáveis pela realização
da fotossíntese, processo que garante a sobrevivência da planta.
Para isto o símbolo foi criado a partir do exemplo das formas das folhas, que
criam um movimento contínuo, ligando suas extremidades uma com a outra e com
isso forma a representação da letra S do nome do restaurante.
Figura 18 - Estudos de alternativas para o símbolo
Fonte: Próprio autor (2016)
Figura 19 - Geração de alternativas
Fonte: Próprio autor (2016)
Figura 20 - Resultado final
Fonte: Próprio autor (2016)
37
6.1.5 Logotipo
Para a logotipo foi utilizada a fonte Nirmala UI, uma fonte legível, sem serifa,
o que facilita em sua leitura e na legibilidade no nome da marca.
Figura 21 - Logotipo
Fonte: Próprio autor (2016)
6.1.6 Diagrama construtivo
Figura 22 - Diagrama construtivo da marca
Fonte: Próprio autor (2016)
6.1.7 Margem de segurança
Figura 23 - Margem de segurança
Fonte: Próprio autor (2016)
38
6.1.8 Cores
A paleta de cores foi baseada nas cores que prevalecem na natureza. As cores
primárias são as cores verde e marrom, que prevalecem dando destaque na
identidade da empresa. O verde, que significa esperança, liberdade, saúde e
vitalidade. O marrom, que significa conforto, segurança e simplicidade. É a cor da
terra e da madeira e por isso está também associada à natureza. E em seguida tem
o preto e o branco como cores secundárias que complementam e criam um contraste
entre elas.
Figura 24 - Paleta de cores
Fonte: Próprio autor (2016)
6.1.9 Tipografia
Para compor o website, no título dos textos, foi utilizada a fonte Satisfy,
extraída do Google Fonts, página diretamente criada para a composição de fontes
para a web que também pode ser baixada e utilizada nos impressos da empresa. Esta
fonte tem como característica um estilo cursivo, caligráfica, que se assemelha a uma
letra manuscrita.
Figura 25 - Tipografia em caixa baixa
Fonte: Próprio autor (2016)
39
Figura 26 - Tipografia em caixa alta
Fonte: Próprio autor (2016)
6.1.10 Website
Para este projeto, foi criado o website da Sabor Verde focado num blog. O
endereço do website foi hospedado com um subdomínio da empresa hostinger
(https://www.hostinger.com.br). Endereço do website:
http://saborverde.alysoncampos.com.br/.
Figura 27 - Tela inicial do website da Sabor Verde
Fonte: Próprio auto (2016)
6.1.11 Layout
Foi levado em consideração todo o aspecto dos princípios do design
responsivo, com o uso de um grid para estruturar os elementos numa ordem de
navegação quando houver a quebra dos elementos em dispositivos de telas com
tamanhos diferentes. Para essas mudanças foram adaptados três layouts diferentes,
o primeiro corresponde a telas de até 480px de largura, o segundo de até 768px e o
terceiro para telas maiores que 769px de largura.
40
Figura 28 - Wireframe do blog sabor verde
Fonte: próprio autor (2016)
41
Figura 29 - Adaptação do layout em dispositivos diferentes
Fonte: próprio autor (2016)
6.1.12 Sistema De Grids
Os sistemas de grids são utilizados para criar layouts de páginas através de
uma série de linhas e colunas que abrigam o seu conteúdo de forma organizada.
O sistema utilizado para o projeto foi baseado no modelo 960 Grid System
(http://960.gs/), criado por Nathan Smith, designer e desenvolvedor front-end. A
grade é formada por doze (12) colunas, cada uma com 60 pixels (px) de largura e
com espaçamento nas laterais esquerda e direita de 10 pixels (px) cada.
42
Figura 30 - Sistema de grid utilizado no projeto
Fonte: próprio autor (2016).
Figura 31 - Representação da quantidade de colunas utilizadas do total
Fonte: próprio autor (2016)
43
Figura 32 - Quantidade em pixels que cada coluna preenche
Fonte: http://960.gs/demo.html (960 gryd system)
6.1.13 Media queries
As media queries aplicadas no site ficaram definidas em quatro extensões,
cada uma com um estilo diferente: a primeira com até 767 pixels de largura,
atendendo a todos os tamanhos de smartphones, a segunda, maior ou igual a 768
pixels de largura, formando o grupo dos tablets, a terceira, maior ou igual a 992px,
que corresponde aos desktops e por fim, maior ou igual a 1200px, que corresponde
aos computadores de mesa, TVs com acesso à internet e outros aparelhos de grande
resolução.
44
Figura 33 - Exemplo de adaptação do conteúdo e da organização das colunas
Fonte: próprio autor (2016)
6.1.14 Navegação
A página do blog Sabor Verde foi desenvolvida para agregar todas as categorias
na página inicial em forma de rolagem e os conteúdos vistos são as últimas postagens
de cada tema. No topo da página são exibidos três links8, que correspondem ao menu
de navegação e que direcionam diretamente para a categoria de cada conteúdo.
Figura 34 - Área de início e menu de navegação
Fonte: próprio autor (2016)
8 No âmbito da informática, a palavra link pode significar hiperligação, ou seja, uma palavra, texto ou imagem
que quando é clicada pelo usuário, o encaminha para outra página na internet, que pode conter outros textos ou imagens.
45
Na área das postagens, ainda na página inicial, cada categoria exibe as novas
publicações e também um botão que direcionará para a todas elas.
Figura 35 -Área de receitas
Fonte: Próprio autor (2016)
Figura 36 - Área de dicas de saúde
Fonte: Próprio autor (2016)
A seção de notícias corresponde as últimas postagens e as últimas notícias na
área de saúde e uma exibição com vídeos que exibirá semanalmente dicas de saúde
e/ou alimentos saudáveis e os seus benefícios.
46
Figura 37 - Área de notícias
Fonte: Próprio autor (2016)
A área do rodapé será integrada com um tópico com os posts mais vistos, a
área das redes sociais, o item de adicionar uma conta de e-mail para receber novas
notícias, um tópico com as últimas postagens e os ícones das redes sociais, que ao
passar o mouse sobre eles, cria uma transição de animação mudando de cor,
identificando que se trata de um link.
Figura 38 - Rodapé
Fonte: Próprio autor (2016)
47
6.1.15 Testes realizados
Os testes realizados em smartphones de diferentes tamanhos, notebooks e em
televisores com acesso à internet, foram feitos para avaliar o comportamento do
blog buscando verificar possíveis falhas em suas estruturas. A partir da resolução
1200 pixels em diante, a estrutura do blog se mantem estático, isto se dá devido a
configuração de resolução fixada anteriormente no momento da distribuição dos
tamanhos das telas (item 8.2.2) fazendo com que aparelhos de resoluções maiores
fixem o conteúdo no centro da tela, gerando um espaço vazio nas áreas laterais.
Figura 39 - Captura de tela de notebook
Fonte: Próprio autor (2017)
48
Figura 40 - Iphone-4
Fonte: Próprio Autor (2017)
49
Figura 41 - Iphone-6
Fonte: Próprio Autor (2017)
50
Figura 42 - Ipad
Fonte: Próprio Autor (2017)
51
Figura 43 - Ipad Pro
Fonte: Próprio Autor (2017)
52
Figura 44 - Ipad Pro
Fonte: Próprio Autor (2017)
53
Figura 45 - Smartv
Fonte: Próprio Autor (2017)
54
Figura 46 - smartv de 40 polegadas
Fonte: Próprio Autor (2017)
Figura 47 - smartv de 32 polegadas
Fonte: Próprio Autor (2017)
6.1.16 Cms
CMS – Content Management System (Sistema de Gerenciamento de Conteúdo)
é um aplicativo usado para criar, editar, gerenciar e publicar conteúdo de forma
organizada e dinâmica através de acesso via internet permitindo que o mesmo seja
55
modificado, removido e adicionado com facilidade. Esta ferramenta é muito utilizada
para divulgar notícias, artigos, sistemas de vendas online, compartilhamento de
imagens, vídeos e áudios e galerias de imagens.
Para poder exibir as notícias da página com novas informações, receitas e
dicas, na proposta de sempre deixar o blog atualizado, foi integrado com um sistema
de gerenciamento de conteúdo conhecido como wordpress.
Segundo dados coletados pela w3techs.com, empresa especializada em
fornecer informações sobre o uso de vários tipos de tecnologia na web, o gerenciador
de conteúdo mais utilizado é o wordpress. Entre ele, existem outros gerenciadores
de conteúdo, como o Joomla, Drupal, Magento, Blogger, Shopify.
Figura 48 - estatística dos gerenciadores de conteúdo mais utilizados
Fonte: https://w3techs.com/technologies/overview/content_management/all (w3techs, 09 de abril
de 2017)
Conforme mostra a imagem acima (figura 37), 52,8% dos websites não utilizam
nenhum dos sistemas de gerenciamentos de conteúdo que monitoram. O wordpress
é usado 27,8% de todos os websites, seguido pelo Joomla, com 3,3% e Drupal, com
2,2%.
56
Wordpress é um aplicativo de sistema de gerenciamento de conteúdo para
web, escrito em linguagem PHP9 com banco de dados MYSQL10, voltado
principalmente para criação de sites e blogs. Seu suporte vai desde a criação do mais
simples blog, até o mais completo site de e-commerce, gerenciamento de imagens,
como portfólios, área de conteúdo em formato de vídeo ou áudio, ou uma simples
página de uso pessoal, com área de contatos e informações sobre você e para que é
direcionado a página.
Existem duas variações do gerenciador de conteúdo, o wordpress.org e o
wordpress.com. Neste projeto, o gerenciador utilizado é o wordpress.org, por ser
mais completo, personalizável e profissional, porém, para que o gerenciador
funcione é necessário um servidor, hospedagem de sites para alocar o website. Um
dos fatores para tornar o gerenciador wordpress mundialmente conhecido e se tornar
o mais utilizado, é a sua plataforma gratuita e simples de manusear.
Figura 49 - Painel do wordpress
Fonte: https://en.blog.wordpress.com/2013/04/19/preview-our-future-design/
9 PHP é uma linguagem que permite criar sites WEB dinâmicos, possibilitando uma interação com o usuário através de formulários, parâmetros da URL e links. 10 MySQL é um sistema gerenciador de banco de dados relacional de código aberto usado na maioria das aplicações gratuitas para gerir suas bases de dados. O serviço utiliza a linguagem SQL (Structure Query Language – Linguagem de Consulta Estruturada), que é a linguagem mais popular para inserir, acessar e gerenciar o conteúdo armazenado num banco de dados.
57
7 CONCLUSÃO
Este trabalho buscou investigar o uso do design responsivo e identificar
problemas de navegação em websites que não possuem a ferramenta para facilitar
a interação do usuário junto com os sistemas. Este estudo ocorreu por meio da
observação de dados analíticos capturados, chegando à conclusão de que atualmente
as pessoas usam com mais frequência os celulares como meio de pesquisa e de
comunicação do que os computadores, deixando este como uso secundário, para fins
acadêmicos ou algo de uso mais complexo.
Atualmente o uso do design responsivo tornou-se uma ferramenta essencial no
desenvolvimento de novos sites. Os que possuem grande tráfego na sua página já
buscaram implantar o método para que os usuários possam navegar de forma rápida
e dinâmica. Apesar de a técnica ser recente, algumas falhas já foram consertadas e
o melhoramento da ferramenta já é perceptível, com o surgimento de ferramentas
prontas que ajudam na otimização do desenvolvimento dos websites.
Para se entender melhor das técnicas não só do Web Design, mas também do
design responsivo, é preciso dedicação fora da grade de ensino da universidade,
buscando cursos extensivos seja presencial ou à distância, pois o mercado de
trabalho exige do profissional de Design o mínimo de conhecimento na área de
programação e codificação, como HTML, CSS, PHP e JAVASCRIPT, o que poderia ser
atendido com a inserção de disciplinas na grade curricular do curso.
Tanto o profissional de Design, como as instituições de ensino sairiam
contemplados com a inserção do Web Design, podendo ser inserida como algumas
disciplinas, pois assim como eu tive dificuldade em adquirir esse aprendizado, outras
pessoas também gostariam de encontrar incluído na grade curricular de seus cursos
e poder aprender, os futuros alunos aprenderiam mais uma área e o curso ganharia
pessoas com capacidade de atender às necessidades de poder fazer uma site seja
para poder divulgar notícias ou para atrair o público para dentro da universidade,
mostrando os talentos dos alunos para o mundo e também atender as demandas do
mundo atual, como o alto crescimento de pessoas que trabalham com redes sociais,
administrando as páginas das empresas.
A execução desse trabalho é de grande relevância para minha experiência
tanto acadêmica, como profissional, pois exigiu de mim adquirir conhecimento fora
58
da sala de aula e que pude ver que é possível atingir e aprender aquilo que se gosta
sem esperar que as coisas aconteçam por si só. O desejo de executar um trabalho
real foi um objetivo que não pude realizar, gerando um obstáculo na conclusão do
projeto, em razão disso houve a necessidade de se criar uma empresa fictícia e
também a dificuldade em encontrar aulas e conteúdos com qualidade das linguagens
de programação e de codificação o que demandou tempo para aprender.
59
REFERÊNCIAS
AGNER, Luiz. Ergodesign e arquitetura de informação: trabalhando com o
usuário. 2. ed. Rio de Janeiro: Quartet, 2009.
ANATEL. Telefonia Móvel - Acessos. Publicado em: 24 de fev. 2015, atualizado em
08 de ag. 2016. Disponível em
<http://www.anatel.gov.br/dados/index.php/destaque-1/270-destaques-smp>. Acesso em 06 de outubro de 2016.
ANATEL. Brasil registra 26,3 milhões de acessos em julho. Publicado em: 12 de set. 2016. Disponível em <http://www.anatel.gov.br/dados/index.php/destaque-
1/269-bl-acessos>. Acesso em 06 de outubro de 2016.
BARROS, Bruno. Design adaptável. Layout Fluido ou Líquido. Publicado em: 8
nov. 2010. Disponível em <http://www.designadaptavel.com.br/artigos/layout-
fluido-ou-liquido>. Acesso em 05 de abril de 2016.
EIS, Diego; FERREIRA, Elcio. HTML5 e CSS3 – com farinha e pimenta. São Paulo:
Tableless, 2012.
ETHAN, Marcotte. A list apart, Responsive Web Design. Publicado em: 25 mai.
2010. Disponível em <http://alistapart.com/article/responsive-web-design>.
Acesso em 05 de abril de 2016.
ESSAY. iA. Web design is 95% typography. Publicado em: 19 out. 2006. Disponível
em <https://ia.net/know-how/the-web-is-all-about-typography-period>. Acesso em
10 de dezembro de 2016.
Folha. Número de smartphones em uso no Brasil chega a 168 milhões, diz
estudo. Publicado em: 15 de abril de 2016. Disponível em <http://www1.folha.uol.com.br/mercado/2016/04/1761310-numero-de-
smartphones-em-uso-no-brasil-chega-a-168-milhoes-diz-estudo.shtml>. Acesso em
08 de outubro de 2016.
GUERRATO, Dani. Tableless. Um guia completo de tipografia para a web.
Publicado em: 12 dez. 2012. Disponível em <http://tableless.com.br/um-guia-
completo-de-tipografia-para-a-web/>. Acesso em 15 de junho de 2016.
LAKATOS, Eva Maria. Fundamentos de metodologia científica. 5. ed. São Paulo:
Atlas, 2003.
LOPES, Sérgio. A Web mobile: Programe para um mundo de muitos dispositivos.
São Paulo: Casa do código, 2012.
OMEGAYALFA. Tutoriales em Llinea. Media query. Publicado em: 24 abr. 2013.
Disponível em < http://tutorialesenlinea.es/142-media-query.html>. Acesso em 08
de jun. 2016.
60
MAZZA, Lucas. HTML5 e CSS3. Domine a web do futuro. São Paulo: Casa do
código, 2012.
MOYANO, André. Slide Share. Html 5 - Historia y principales novedades.
Publicado em: 22 de out. 2012. Disponível em <
http://pt.slideshare.net/moyanoalexis/html-5-historia-y-principales-novedades>. Acesso em 05 de maio 2016.
NORMAN, Donal A. O design do dia a dia/ Donald A. Norman: Tradução de Ana
Deiró. – Rio de Janeiro: Rocco, 2006.
OFICINA DA NET. O que é Wordpress? Publicado em: 09 abr. 2014. Disponível em
https://www.oficinadanet.com.br/post/13817-o-que-e-wordpress>. Acesso em 20 de novembro de 2016.
PACHECO, Andrea. Arquitetura de informação. 9 princípios básicos de Design
Responsivo em GIF’s. Publicado em: nov. 2014. Disponível em <http://arquiteturadeinformacao.com/design-de-interacao/9-principios-basicos-
de-design-responsivos-em-gifs/>. Acesso em 07 de junho de 2016.
PACHECO, Andrea. Arquitetura de informação, Um guia completo sobre grids
para design responsivo. Publicado em: out. 2014. Disponível em
<http://arquiteturadeinformacao.com/design-de-interacao/guia-completo-sobre-grids-para-design-responsivo/>. Acesso em 05 de maio de 2016.
ROCHA, Heloísa Vieira; BARNAUSKAS, Maria Cecília Calani. Design e avaliação de
interfaces humanocomputador. 2000. Disponível em: <http://pan.nied.unicamp.br/download_livro/livro-design-aval.zip>. Acesso em 27
de junho de 2016.
SIGNIFICADOS. Significado da Cor Marrom - O que significa a Cor Marrom.
Disponível em <https://www.significados.com.br/cor-marrom/>. Acesso em 04 de
outubro de 2016.
SIGNIFICADOS. Significado da Cor verde - O que significa a Cor verde. Disponível
em <https://www.significados.com.br/cor-verde/>. Acesso em 04 de outubro de
2016.
SIGNIFICADOS. Significado de Tablet. Disponível em
<https://www.significados.com.br/tablet/>. Acesso em 08 de outubro de 2016.
SIGNIFICADOS. Significado de Smartphone. Disponível em
<https://www.significados.com.br/smartphone/>. Acesso em 08 de outubro de
2016.
SIGNIFICADOS. Significado de Smartv. Disponível em
<https://www.significados.com.br/smart-tv/>. Acesso em 08 de outubro de 2016.
61
SILVA, Maurício Samy. Web Design Responsivo. Aprenda a criar sites que se
adaptam automaticamente a qualquer dispositivo, desde desktops até
telefones celulares. São Paulo: Novatec Editora LTDA,2014.
TEIXEIRA, Fabricio. Arquitetura de informação. Métodos e ferramentas de UX
para criação de interfaces responsive. Publicado em: 2013. Disponível em <http://arquiteturadeinformacao.com/user-experience/metodos-e-ferramentas-
de-ux-para-criacao-de-interfaces-responsive/>. Acesso em 07 de junho de 2016.
TERAWARE. Entenda as 5 maiores vantagens de um design responsivo. Publicado em: 25 set.2015. Disponível em <http://portal.teraware.com.br/entenda-as-5-
maiores-vantagens-de-um-design-responsivo/>. Acesso em 01 de junho de 2016.
TERAWARE. 7 Tendências de web design para 2016. Publicado em: 27 jan.2016.
Disponível em <http://portal.teraware.com.br/7-tendencias-de-web-design-para-
2016/>. Acesso em 02 de junho de 2016.
TERRA. Primeiro navegador da internet completa 20 anos. Publicado em: 26
dez.2010. Disponível em https://tecnologia.terra.com.br/internet/primeiro-
navegador-da-internet-completa-20-anos,d7495295fb6ea310VgnCLD200000bbcceb0aRCRD.html>. Acesso em 07 de junho
de 2016.
TERRA. Mosaic: há 20 anos, era lançado o 1º navegador gráfico da web.
Publicado em: 22 abr.2013. Disponível em
<http://tecnologia.terra.com.br/internet/mosaic-ha-20-anos-era-lancado-o-1-
navegador-grafico-da-web,6f3289d31f13e310VgnVCM3000009acceb0aRCRD.html>. Acesso em 02 de junho de 2016.
W3TECHS.COM, Web Technology Surveys. Usage of content management systems for websites. Disponível em
<https://w3techs.com/technologies/overview/content_management/all>. Acesso
em 09 de abril de 2017.
VASCONCELOS, Priscila. Design Culture, Tipografia para web. Publicado em: 19
mar.2015. Disponível em <http://www.designculture.com.br/tipografia-para-
web/>. Acesso em 15 de junho de 2016.
ZEMEL, Tárcio. Web Design Responsivo. Páginas adaptáveis a todos os
dispositivos. São Paulo: Casa do código, 2014.