Workshop: Front-End Development & HTML5

Entenda como funciona o Front-End Development, como devemos pensar nas particularidades de cada navegador e o que tem dentro do HTML5.

Transcript

1. Workshop Front-End Development & HTML5 segunda-feira, 18 de junho de 12
2. Carlos Souza • Coordenador da equipe de FED na • Autor do webstandards.blog.br • Videos em vimeo.com/frontenddevelopment • Design e desenvolvimento de projetos web desde 2002 segunda-feira, 18 de junho de 12
3. Perguntas • Sinta-se a vontade para fazer suas perguntas a qualquer momento • Ou mande um e-mail para carlos.souza@casa.ag segunda-feira, 18 de junho de 12
4. O que será falado • Definição de Front-End Development • Etapas do processo de trabalho • Possibilidades e limitações da web • O que é HTML5 • Áreas compreendidas • Conclusão segunda-feira, 18 de junho de 12
5. Front-End Development segunda-feira, 18 de junho de 12
6. Design de Interfaces Back-End Development segunda-feira, 18 de junho de 12
7. Camadas de desenvolvimento Conteúdo HTML Estilo CSS Comportamento JavaScript segunda-feira, 18 de junho de 12
8. HTML • Análise da estrutura • Definição do conteúdo - Acessibilidade segunda-feira, 18 de junho de 12
9. segunda-feira, 18 de junho de 12
10. Cabeçalho Conteúdo segunda-feira, 18 de junho de 12
11. segunda-feira, 18 de junho de 12
12. CSS • Definição de padrões de templates • Modularização do layout • Produção das telas - Usabilidade • Responsive Web Design segunda-feira, 18 de junho de 12
13. Template segunda-feira, 18 de junho de 12
14. Modularização do layout segunda-feira, 18 de junho de 12
15. Padrão de elementos segunda-feira, 18 de junho de 12
16. Layout segunda-feira, 18 de junho de 12
17. Responsive Web Design jamus.co.uk/demos/rwd-demonstrations segunda-feira, 18 de junho de 12
18. JavaScript • Programação dos comportamentos das páginas • Pensar sempre na Acessibilidade segunda-feira, 18 de junho de 12
19. segunda-feira, 18 de junho de 12
20. segunda-feira, 18 de junho de 12
21. • A web não é impressa • Cada navegador tem suas possibilidades e limitações Planejar o site para não ser idêntico nos navegadores segunda-feira, 18 de junho de 12
22. Progressive Enhancement segunda-feira, 18 de junho de 12
23. segunda-feira, 18 de junho de 12
24. segunda-feira, 18 de junho de 12
25. A web não é impressa • Nosso meio de consumo são os navegadores, por isso a experiência muda, mas o conteúdo não segunda-feira, 18 de junho de 12
26. segunda-feira, 18 de junho de 12
27. segunda-feira, 18 de junho de 12
28. segunda-feira, 18 de junho de 12
29. segunda-feira, 18 de junho de 12
30. Usar CSS • Cantos arredondados • Sombras • Gradientes segunda-feira, 18 de junho de 12
31. segunda-feira, 18 de junho de 12
32. O que você vê? segunda-feira, 18 de junho de 12
33. segunda-feira, 18 de junho de 12
34. segunda-feira, 18 de junho de 12
35. As pessoas usam um só navegador segunda-feira, 18 de junho de 12
36. segunda-feira, 18 de junho de 12
37. segunda-feira, 18 de junho de 12
38. HTML5 segunda-feira, 18 de junho de 12
39. HTML5 representa uma revolução na web, difundindo recursos que antes só eram possíveis em tecnologias fechadas. segunda-feira, 18 de junho de 12
40. Mas o HTML5 é muito abrangente e pode ficar um pouco complicado entendê-lo! segunda-feira, 18 de junho de 12
41. segunda-feira, 18 de junho de 12
42. Por isso é dividido em 8 áreas, para facilitar a compreensão. segunda-feira, 18 de junho de 12
43. Semântica Dando mais significado ao conteúdo, podemos classificá-lo e dar melhores resultados para o usuário. segunda-feira, 18 de junho de 12
44. google.com/webmasters/tools/richsnippets Rich Snippets segunda-feira, 18 de junho de 12
45. Novos campos de formulário segunda-feira, 18 de junho de 12
46. No mobile também segunda-feira, 18 de junho de 12
47. Offline Permite que dados de aplicações sejam salvos na máquina do usuário, podendo ser acessados sem conexão e tornem o carregamento das informações mais ágil. segunda-feira, 18 de junho de 12
48. goo.gl/MDUWc App salvando informações locais segunda-feira, 18 de junho de 12
49. segunda-feira, 18 de junho de 12
50. Device Access Permite acesso a recursos nativos dos dispositivos como GPS, microfone, câmera, lista de contatos, calendário e até acelerômetro. segunda-feira, 18 de junho de 12
51. goo.gl/SjZgv Exemplos de acesso ao dispositivo segunda-feira, 18 de junho de 12
52. segunda-feira, 18 de junho de 12
53. Conectividade Troca de informações em tempo real, entre cliente e servidor, de maneira mais eficiente. segunda-feira, 18 de junho de 12
54. goo.gl/H0XKT App com conectividade e Web Audio API segunda-feira, 18 de junho de 12
55. segunda-feira, 18 de junho de 12
56. Multimídia Uso de áudio e vídeo sem uso de plugins (ex: Flash) para sua execução. Permite, também, controle e manipulação das informações como gravação de áudio ou legenda nos vídeos. segunda-feira, 18 de junho de 12
57. goo.gl/QpIvI Manipulação de vídeo em Canvas segunda-feira, 18 de junho de 12
58. segunda-feira, 18 de junho de 12
59. 3D/Gráficos Novos recursos como Canvas, Web GL e SVG permitem criar desenhos e interações gráficas diretamente com HTML e JavaScript. segunda-feira, 18 de junho de 12
60. chromeexperiments.com disneydigitalbooks.go.com/tron Manipulação gráfica segunda-feira, 18 de junho de 12
61. browserquest.mozilla.org BrowserQuest segunda-feira, 18 de junho de 12
62. segunda-feira, 18 de junho de 12
63. Performance e integração Aplicações Web com performance similar a aplicativos nativos, graças a diversas técnicas e tecnologias disponíveis no HTML5. segunda-feira, 18 de junho de 12
64. segunda-feira, 18 de junho de 12
65. CSS3 Agora o CSS permite utilizar fontes customizadas, transformações e animações em 2D, além de 3D, tudo sem uso de plugins proprietários. segunda-feira, 18 de junho de 12
66. css3maker.com Efeitos com CSS3 segunda-feira, 18 de junho de 12
67. segunda-feira, 18 de junho de 12
68. segunda-feira, 18 de junho de 12
69. O mais importante é saber que para cada novidade, há muitas tecnologias envolvidas e, dependendo do público-alvo do projeto, pode ser ou não apropriado utilizá-las. segunda-feira, 18 de junho de 12
70. Muito obrigado :) carlos.souza@casa.ag segunda-feira, 18 de junho de 12