Este documento apresenta um trabalho de conclusão de curso sobre o desenvolvimento de sites responsivos utilizando o framework Bootstrap. O trabalho discute as tecnologias para desenvolvimento web, design responsivo, usabilidade, frameworks, e apresenta um estudo de caso de um protótipo desenvolvido com Bootstrap avaliado segundo heurísticas de usabilidade.
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de User Experience.
1. Orientador: Prof. Ms Eduardo Rosalém Marcelino
Flavia de Azevedo e Josélia Costa
TRABALHO DE CONCLUSÃO DE CURSO
TCC – slide 1/34
2. Desenvolvimento de sites responsivos
utilizando o framework Bootstrap com
aplicação de User Experience
TCC – slide 2/34
3. Agenda
• Introdução;
• Metodologia;
• Tecnologias para desenvolvimento Web;
• Design responsivo e suas características;
• Usabilidade;
• Frameworks;
• Estudo de caso;
• Conclusão;
• Trabalhos futuros;
• Agradecimentos.
TCC – slide 3/34
4. Introdução
• Justificativa
• Diversidade de tipos de dispositivos que acessam a internet;
• “Estudo da IDC Brasil aponta que, em 2014, brasileiros compraram cerca de
104 smartphones por minuto”(IDC, 2015)
• Objetivos:
• Pesquisar e analisar frameworks front-end, com foco no desenvolvimento de
sites responsivos.
• Analisar as tecnologias disponíveis;
• Aplicar regras de usabilidade para a modelagem do site;
• Desenvolvimento de um protótipo.
TCC – slide 4/34
5. Metodologia
• Tipo de pesquisa:
• Exploratória
• Etapas:
• Análise das tecnologias envolvidas;
• Avaliação das heurísticas de usabilidade;
• Desenvolvimento do protótipo;
TCC – slide 5/34
11. O que é design responsivo?
• O web design responsivo se baseia no conceito de desenvolver websites que sejam
capazes de se adaptar ao tamanho da tela do dispositivo utilizado.
TCC – slide 11/34
12. Um mesmo arquivo de CSS para diversos dispositivos
TCC – slide 12/34
13. Como funciona a técnica para tornar as páginas responsivas?
TCC – slide 13/34
22. Usabilidade e User Experience
• Escala hierárquica de importância das informações textuais e gráficas do site;
Visualização em 320px de resolução Visualização em 1024px de resolução
TCC – slide 22/34
23. Usabilidade e User Experience
• Otimização de desempenho
TCC – slide 23/34
24. Frameworks para desenvolvimento front-end
• Conjuntos de CSS com Javascript;
• Código estável;
• Atributos como media queries e breakpoints já tratados
TCC – slide 24/34
26. Bootstrap e o desenvolvimento responsivo
• Gama de componentes;
• Ranking do GitHub;
• Comunidade de desenvolvedores;
• Disponibilidade da documentação;
• Customização
• Componentes responsivos.
TCC – slide 26/34
27. Apresentação do protótipo desenvolvido
• Proposta de conteúdo
• Site para instituições de ensino superior;
• Estrutura do desenvolvimento:
• Desktop-first;
• User experience design;
• Bootstrap.
TCC – slide 27/34
28. Avaliação Heurística do protótipo
• Prioridade das informações em
determinados contextos;
• Controle do usuário e liberdade;
• Sistema de busca
• Reconhecimento de padrões;
TCC – slide 28/34
29. Avaliação Heurística do protótipo
• Prioridade das informações em
determinados contextos;
• Controle do usuário e liberdade;
• Sistema de busca
• Reconhecimento de padrões;
TCC – slide 29/34
30. Avaliação Heurística do protótipo
• Prioridade das informações em
determinados contextos;
• Controle do usuário e liberdade;
• Sistema de busca
• Reconhecimento de padrões;
• Ajuda e documentação;
TCC – slide 30/34
32. Conclusões
• Web design responsivo
• Desenvolvimento responsivo por uma web única;
• Foco no usuário;
• Gerências unificadas;
• Framework Bootstrap
• Facilitador genérico;
• Muitas classes e componentes não utilizados;
• Experiência de usuário não complexa;
• Desenvolvimento responsivo contempla apenas tamanhos comuns de dispositivos,
podendo haver exceções.
• Desenvolvimento front-end
• Desenvolver o próprio padrão responsivo, ligado a identidade visual do projeto
TCC – slide 32/34
33. Trabalhos futuros
• Estudos aprofundados em CSS como as técnicas de SASS e LESS;
• HTML5 e Web semântica,
• Acessibilidade.
• Design Thinking;
TCC – slide 33/34
Nosso trabalho vai tratar sobre uma vertente do desenvolvimento para Web e o tema é ~ler o título do trabalho~
Esta é nossa agenda, falaremos um pouco sobre o ínicio e as metodologias que nos guiaram ao longo da pesquisa. Em seguida serão apresentados tópicos sobre as tecnologias envolvidas, usabilidade e frameworks do mercado. Mostraremos a vocês um protótipo desenvolvido a partir das técnicas que pesquisamos e por fim apresentaremos nossas considerações finais.
Como “start” do nosso trabalho, analisamos que hoje existe uma demanda muito alta de aquisições de novos dispositivos que acessam a internet. Pensando mais profundamente, percebmos que além do numero ligeiramente grande de novos dispositivos, existe também uma diversidade imensa dos tipos de dispositivos moveis em geral.
Sendo assim, como objetivo estudo, nos propusemos a analisar conceitos e tecnologias que fossem capazes de atender, de forma eficaz essa nova tendência de mercado, como por exemplo os frameworks mais utilizados pela comunidade dev, as linguagens front-end e regras que melhoram a experiência que o usuário terá ao acessar uma aplicação a partir do dispositivo móvel, que é a usabilidade.
Após isso, desenvolvemos um protótipo de site, com algumas das técnicas e conceitos estudados.
A metodologia utilizada para elaboração deste trabalho foi uma pesquisa do tipo exploratória.
As etapas que percorremos ao longo desta pesquisa foram de análise dos recursos mais recorrentes envolvidos no cenário WEB, analise de avaliações heurísticas acerca da usabilidade e por fim o desenvolvimento de algo prático e tangível, que é o nosso protótipo.
Flavia – sua parte.
O professor pediu para traduzirmos as frases pra piada causar mais efeito..
Aqui é importante brincar e aprofundar sobre o problema: o grande numero de dispositivos e pior a variedade de tipos de dispositivos,
Ou seja é quase impossível testar em um por um, sendo que nessa imagem nem estão elencados todos os tipos existentes.
Então a partir deste problema, vamos estudar como, a partir das tecnologias existentes hoje no mercado de desenvolvimento, podemos
Desenvolver de forma democrática para a maior parte dos usuários de internet, seja ela móvel ou não.
O cenário atual no desenvolvimento para web é sustentado por três linguagens- HTML, CSS e JS.
Trecho de código html5 e resultado do código ao lado
Trecho de código csse resultado do código ao lado
Trecho de código javaScript e resultado do código ao lado
