Introdução ao Front End

375 visualizações

Publicada em

Introdução ao Front End

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
375
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao Front End

  1. 1. Front End Developer Quem são? Onde vivem? O que comem?
  2. 2. “As far as the customer is concerned, the interface is the product.” - Jef Raskin
  3. 3. O que é um Front End Developer? • Front End Enginner • UI Engineering • Markup Developer • Client Side Developer • Web Designer • Front Ender • Coder • HTMLer Front End? Fim do começo? Ou o começo do fim? Enfim. É o profissional responsável por projetar, construir e otimizar a parte dos projetos web que interagem diretamente com o usuário.
  4. 4. Um termo recente:
  5. 5. As interfaces de projetos web se tornaram cada vez mais complexas e por isso surgiu a necessidade de alguém altamente especializado em sua construção. O Front End Developer, também por vezes chamado Front End Enginner.
  6. 6. Engineering DESIGN ART LAYOUT PERFORMACE HTTP SEGURANÇA ACESSIBILIDADE USABILIDADE PSICOLOGIA LOCALIZAÇÃO LINGUÍSTICA
  7. 7. Duties (dotes/funções/obrigações): • UX • Design gráfico • Conhecimentos multimídia • UI Design • Programming design • Hierarquia de dados • Utilização de APIs • Heurística • Compatibilidade entre browsers • Mobile, tablets e outros devices • Tecnologias emergentes • Usability performace • Web standards (W3C) • Web 2.0 • Otimização de códigos • SEO • VSEO • Proof Reader (otimização) • Mashups • SOA (Service-Oriented Architecture) • Copywrite Todos estes conhecimentos podem ser utilizados durante o desenvolvimento de um produto.
  8. 8. Mas e como se dá este desenvolvimento? UI Design • Guia de estilo de criação • Arquitetura da informação • Mock-ups / wireframes • Logos e ícones • Licença de imagens • Prototipação Front End Dev • Implementação de wireframes/protótipos (HTML) • Guia de estilo técnico (CSS) • Desenvolver a interatividade (CSS3, jQuery, Flash, ... ) • Comunicação com “Middle Tier Dev” • Verificar e eventualmente solucionar os gaps de desenvolvimento UI Design » Front End Developer » Middle Tier Developer » Back End Developer Middle Tier Dev • Tradução de front-end para estruturas DB • Workflow • Nível de segurança de objetos de usuários • Validação de lógica de negócio • Encaminhar informações ao back end dev • Tasks de automação do front end Back End Dev • Tradução de objetos do middle tier dev para objetos DB • Operações CRUD x DB • Implementação de regra de negócio com integridade dos dados • Pensar em segurança DB (SQL Injection, etc...)
  9. 9. Desafios: • É a natureza do ser humano procurar por algo “bom o suficiente para se trabalhar”. – Projetos – Browsers – Devices – Softwares e hardwares • JavaScript não é facil. – jQuery e a interatividade • CSS não é fácil. Não, não é. – CSS3 e a interatividade – Novidades e atualizações (Less CSS) • HTML não é facil. – OK, HTML até que é fácil mas existem alguns macetes e conhecimentos que são indispensáveis. – O HTML 5
  10. 10. User Interface Design X Front End Dev: • Usabilidade • Testes de usabilidade X Padrões de boas práticas • UX (*não* usabilidade) • Heurística • O usuário deve determinar a interface, e não a informação. Problematizando: • A interface do usuário pode ser difícil de usar! • A interface do usuário pode ser impossível de usar!
  11. 11. Usabilidade: Na Interação humano- computador e na Ciência da Computação, usabilidade se refere à simplicidad e e facilidade com que uma interface, um programa de computador ou um website pode ser utilizado. Por quem? PELO USUÁRIO
  12. 12. Usabilidade: A usabilidade é definida em 5 dimensões: • Aprendizagem: Quão fácil é para os utilizadores realizarem tarefas básicas no primeiro contato que têm com a interface? • Eficiência: Depois dos utilizadores se tornarem experientes na utilização da interface, quão rápido conseguem realizar as tarefas? • Memorização: Depois de um longo período de ausência, quão facilmente conseguem os utilizadores restabelecer o seu nível de proficiência? • Robustez: Quantos erros cometem os utilizadores, quão severos são esses erros, e quão facilmente conseguem recuperar dos erros? • Satisfação: Quão agradável é a utilização do sistema?
  13. 13. Decreto Lei 6.949 (ago/09) http://presrepublica.jusbrasil.com.br/legislacao/818741/decreto-6949-09 Convenção da ONU http://vimeo.com/11784148
  14. 14. "Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade."
  15. 15. Acessibilidade: Design Universal Design de produtos e ambientes para serem usados por todas as pessoas, na maior extensão possível, sem a necessidade de adaptação ou design especializado. Princípios de Connell 1997 – Design Universal 1. Uso equitativo 2. Flexibilidade no uso 3. Simples e intuitivo 4. Informação perceptível 5. Tolerância ao erro 6. Baixo esforço físico 7. Tamanho e espaço para aproximação e uso HTML é a solução de 80% deste quesito
  16. 16. “Browsers are the most hostile software engineering environment possible.” - Douglas Crockford
  17. 17. Browsers: Fonte: W3C
  18. 18. Browsers: Fonte: StatCounter
  19. 19. Mobile e o Front End: • CSS - Media Queries • Simplificação da interface • Adaptação de conteúdo
  20. 20. Linguagens | HTML & HTML5:
  21. 21. Linguagens | CSS & CSS3:
  22. 22. Linguagens | Javascript (jQuery):
  23. 23. Testes, otimização e performace:
  24. 24. Referências: (e maneiras de se tornar um ninja do Front End) SITES: • Maujor.com • Tableless.com.br • Jquery.org • W3.org LIVROS: • jQuery: A Biblioteca do Programador JavaScript – Maurício Samy Silva • Designing with Web Standards – Jeffery Zeldman • Não me faça pensar – Steve Krug LISTAS DE DISCUSSÃO: • Jquery-br • Webstandards-br • Frontend-br • Html5-css3-br
  25. 25. FLÁVIO DE HOLANDA flavioc@gazetadopovo.com.br cargocollective.com/flaviodeholanda

×