Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Aula 3. frameworks front end

1,079 views

Published on

frameworks front end

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Aula 3. frameworks front end

  1. 1. Frameworks Front-end Frameworks para Desenvolvimento Web Prof. MSc. André Costa - andre.costa@unifacs.br
  2. 2. SUMÁRIO • Design de Interface para Web • User Interface (UI) e User Experience (UX) • Frameworks CSS para Front-end • Bootstrap • Atividade Prática Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  3. 3. Design de Interface para Web O que é? • O design de interface é o recurso que conduz a interação do ser humano com um produto físico ou virtual. A interface varia de um brinquedo, aparelho eletrodoméstico, até um aplicativo para smartphone ou uma página na web. • Na prática, o design de interface diz respeito à parte visual, à usabilidade, arquitetura da informação, navegação, transição de telas. Ou seja, todos os recursos que incrementam e melhoram a forma como o usuário lida com o produto. • Tudo deve ser construído em virtude da satisfação do elemento humano! Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  4. 4. Design de Interface para Web Qual a importância? • É o principal meio de comunicação entre o software/dispositivo e o usuário. Tem que tornar o produto atraente. • Uma interface mal projetada pode proporcionar uma má experiência, o que acarreta negativamente na função do software, e claro, se torna uma experiência complicada e frustrante. • Quando bem construída, a interface garante ao utilizador que ele possa realizar todas as ações e tarefas de forma simples e eficiente. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  5. 5. Design de Interface para Web Qual a importância? • Ignorar a importância do design de interface pode ser o fator decisivo na rejeição de uma aplicação. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  6. 6. Design de Interface para Web Impacto num e-commerce • A grande maioria das decisões de compra passa pelo período de cogitação, que frequentemente se inicia com pesquisas na internet. • Um design de interface bem programado facilita a busca de informações e produtos no site e é responsável pelo caminho do usuário até compra. • Quando usuários navegam na página por pouco tempo podem impactar o posicionamento de um site no Google. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  7. 7. Design de Interface para Web Responsividade • Construir sites que se adaptem aos diversos tipos de dispositivos. • Google passará a considerar a responsividade para seu ranqueamento. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  8. 8. Design de Interface para Web Usabilidade • Facilidade de utilização do usuário 1. Aprendizagem (É intuitivo?) 2. Eficiência (Faz o que se espera?) 3. Memorização (Fácil de lembrar como utilizar? 4. Robustez (Funciona sem erros?) 5. Satisfação (causa boa experiência?) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  9. 9. Design de Interface para Web Acessibilidade • Estar disponível para todos • Mitigar barreiras para pessoas com necessidades especiais • Visual • Audição • Motora • Cognitiva Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  10. 10. Design de Interface para Web Designer de Interface • O Designer de Interface é necessário para manter e fidelizar usuários que naveguem nos sites, aplicativos e sistemas de uma empresa. Ele atua na construção da credibilidade até ao convencimento da compra. • As atividades de um especialista na área incluem o levantamento de informações sobre o projeto, a localização das mesmas na interface e a forma de interação com o usuário. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  11. 11. User Interface (UI) e User Experience (UX) User Interface (UI) O User Interface – ou interface do usuário – é tudo aquilo que é perceptível visualmente em alguma plataforma e leva o usuário a uma interação positiva. Pode ser um botão, um menu diferente ou até mesmo um som. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  12. 12. User Interface (UI) e User Experience (UX) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  13. 13. User Interface (UI) e User Experience (UX) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  14. 14. User Interface (UI) e User Experience (UX) User Experience (UX) O User Experience Design – ou design da experiência do usuário – se preocupa com o ponto de contato de um produto/serviço, com as pessoas. Este produto/serviço pode ser um website, um aplicativo, uma máquina, um dispositivo móvel, ponto de venda, entre outras plataformas de interação. UX Design é a ciência que pensa exclusivamente na relação de um produto com o usuário, buscando torná-la mais natural e simples. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  15. 15. User Interface (UI) e User Experience (UX) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  16. 16. User Interface (UI) e User Experience (UX) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  17. 17. User Interface (UI) e User Experience (UX) Mobile First Mobile First é um conceito aplicado em projetos web onde o foco inicial da arquitetura e desenvolvimento é direcionado aos dispositivos móveis e em seguida para os desktops. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  18. 18. Framework CSS para Front-end O que é? • Conjunto de bibliotecas pré-preparadas para facilitar o desenvolvimento de interface de sites e sistemas web. • Estabelece um conjunto de classes em CSS • Estrutura em Grids (Responsividade) • Tipografia Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  19. 19. Framework CSS para Front-end Vantagens • Documentação detalhada • Layout responsivos • Se aplica desde sites a sistemas • Padronização • Cross Browser Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  20. 20. Framework CSS para Front-end Desvantagens • Projetos com aparência parecida • Engessado ao padrão do framework Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  21. 21. Framework CSS para Front-end Materialize (materializecss.com) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  22. 22. Framework CSS para Front-end Foundation (foundation.zurb.com) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  23. 23. Framework CSS para Front-end Semantic UI (semantic-ui.com) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  24. 24. Framework CSS para Front-end Bootstrap (getbootstrap.com) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  25. 25. Bootstrap Estrutura dos Arquivos Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  26. 26. Bootstrap Documento Base (usando CDN) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  27. 27. Bootstrap Template Base Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  28. 28. Bootstrap Entendendo sua Meta Tags e Doctype Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  29. 29. Bootstrap Templates (startbootstrap.com) Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  30. 30. Bootstrap Container Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  31. 31. Bootstrap Grids Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  32. 32. Bootstrap Grids Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  33. 33. Bootstrap Grids Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  34. 34. Bootstrap Grids Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  35. 35. Bootstrap Responsividade Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  36. 36. Bootstrap Responsividade Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  37. 37. Bootstrap Responsividade Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  38. 38. Bootstrap Responsividade Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  39. 39. Bootstrap Navbar Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  40. 40. Bootstrap Tabelas Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  41. 41. Bootstrap Formularios Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  42. 42. Bootstrap Botões Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  43. 43. Bootstrap Modal Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  44. 44. Bootstrap Card Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  45. 45. Atividade Prática Descrição do trabalho em sala.. Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
  46. 46. Prof. MSc. André Costa andre.costa@unifacs.br

×