Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de User Experience.
Ähnlich wie Desenvolvimento de sites responsivos utilizando o framework Bootstrap com aplicação de User Experience. (20)
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
- 6. TCC – slide 6/34
- 7. Cenário Web Atual • Principais linguagens para desenvolvimento front-end: TCC – slide 7/34
- 8. HTML5 – Foco no conteúdo TCC – slide 8/34
- 9. CSS3 – Foco na formatação visual TCC – slide 9/34
- 10. JavaScript – Foco nas interações TCC – slide 10/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
- 14. Componentes principais para o desenvolvimento responsivo • Media queries TCC – slide 14/34
- 15. Componentes principais para o desenvolvimento responsivo • Grades flexíveis TCC – slide 15/34
- 16. Componentes principais para o desenvolvimento responsivo • Grades flexíveis TCC – slide 16/34
- 17. Componentes principais para o desenvolvimento responsivo • Imagens e mídias flexíveis TCC – slide 17/34
- 18. • Imagens e mídias flexíveis Componentes principais para o desenvolvimento responsivo Unidades estáticas TCC – slide 18/34
- 19. TCC – slide 19/34
- 20. Usabilidade e User Experience • Contexto TCC – slide 20/34
- 21. Usabilidade e User Experience • Contexto TCC – slide 21/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
- 25. Principais frameworks para desenvolvimento front-end TCC – slide 25/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
- 31. Vídeo de demonstração do protótipo TCC – slide 31/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
- 34. Agradecimentos TCC – slide 34/34 http://www.prototipotcc.esy.es
Hinweis der Redaktion
- Boa noite! Apresentação
- 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
- INSERIR CÓDIGO