Agilidade e Semântica com HTML5 e CSS3

As novas features que essas duas tecnologias trouxeram para o mundo da Web. Formas de se ter agilidade com elas e a semântica ao documento. Bem-vindo ao mundo do HTML5 e CSS3!

Transcript

4. O QUE É? Ahhh... essa é fácil... HTML5 é a nova versão do HTML, apenas colocaram umas “tagzinhas” a mais.
6. O QUE É? HTML5 é o novo padrão HTML. Ok. HTML5 são novas tags. Ok. HTML5 deu semântica ao code. Ok. Mas o HTML5 vai um “pouco” além disso, existe um mundo por trás
7.  Suporte CSS3 completa  Áudio e Vídeo(SIM! Sem flash!)  Gráficos 2D/3D(canvas, SVG)  Geolocalização  Armazenamento local  Cache  Web Workers  Microdata
8.  Novos elementos para cabeçalhos, rodapés, menus, seções e artigos  Novos elementos de formulário, novos atributos, novos tipos de entrada, validação automática.
11. PROCESSOS DO W3C A recomendação progride através de cinco níveis de maturidade: 1.Working Draft (WD) 2.Last Call Working Draft 3.Candidate Recommendation (CR) 4.Proposed Recommendation (PR) 5.W3C Recommendation (REC)
12. Working Draft (WD) A Working Draft é um documento que o W3C publica para a comunidade, incluindo membros do W3C, o público e outras organizações técnicas. Essa é a fase onde ocorre opiniões, debates, e definições sobre a recomendação. Anúncio: O Diretor deve anunciar o primeiro projeto de trabalho da publicação a outros grupos do W3C e para o público. Objetivo: A primeira publicação para o público é um sinal para a comunidade começar a rever o documento.
13. Last Call Working Draft Anúncio: O Grupo de Trabalho deve anunciar a última chamada para outros grupos do W3C e para o público. Um anúncio Last Call deve : • especificar o prazo para comentários de revisão; • identificar dependências conhecidas e solicitar a revisão de todos os grupos de trabalho dependente; • solicitar revisão pública. Objetivo: Última Chamada anúncio de um Grupo de Trabalho é um sinal de que:
14. Candidate Recommendation (CR) A Recomendação Candidate é um documento que acredita W3C tem sido amplamente revisto e satisfaz os requisitos técnicos do Grupo de Trabalho. W3C publica uma recomendação Candidate para reunir a experiência de implementação.
15. Proposed Recommendation (PR) A recomendação proposta é um relatório técnico madura que, após uma ampla revisão de solidez técnica e exequibilidade, W3C enviou ao Comitê Consultivo do W3C para aprovação final.
16. W3C Recommendation (REC) A Recomendação do W3C é uma especificação ou um conjunto de diretrizes que, após uma extensa formação de consenso, recebeu o aval de membros do W3C e do Diretor. W3C recomenda a ampla implementação das suas recomendações
17. SEMÂNTICA
18. POR QUE SE PREOCUPAR COM A SEMÂNTICA?  Dar significado ao documento  Fácil de encontrar determinada informação  Padrão para ferramentas de acessibilidade  Informação consistente para os mecanismos de buscas ...
19. ONDE O HTML5 ME AJUDA COM A SEMÂNTICA?
21. header, nav, article, sidebar, footer... Tantos ids/classes em comum... então quer dizer que eles tem um uso constante, se tornou um padrão essa nomenclatura na web, por quê não criar tags com esses nomes mais utilizados??? Então...
23. FORMULÁRIOS
24. HTML5 tem vários novos tipos de entrada. Esses novos recursos permitem um melhor controle de entrada e validação dos dados. Vamos então a lista desses novos tipos:  color  date  datetime  email  month  number  range  search  tel  time  url  week
25. Assim como os tipos surgiram também alguns novos atributos... Input  height and width  list  pattern (regexp)  placeholder  required … Form  autocomplete  novalidate
27. AGILIDADE
30. Fonte: http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png
31. Fonte: http://html5boilerplate.com/
32. Fonte: http://www.initializr.com/
34. Faça as ferramentas trabalharem ao seu favor, automatizar tarefas, criar templates, etc.
35. Depois de decidir quais ferramentas utilizar, e deixar o ambiente de desenvolvimento configurado, é só alegria!
37. COLOR
38. Transparência Valores: 0.0 significa totalmente transparente 1.0 significa totalmente opaco. opacity
39. RGB com canal alpha (opacidade/transparência) Valores: 0.0 significa totalmente transparente 1.0 significa totalmente opaco. rgba
40. HSL (hue,saturation,lightness) com canal alpha (opacidade/transparência) Valores percentuais de 0 a 360. Alpha igual ao RGBA. HSL/A Color
41. BACKGROUNDS
42. background-image Possibilidade de incluir mais de um background no mesmo elemento. As imagens devem ser separadas por vírgula(,)
43. BORDERS
44. border-color Permite colocar mais de uma borda na mesma definição. Devem ser separados por espaço.
45. border-radius Arredondamento de bordas.
46. box-shadow Sombreamento do elemento. Ordem: espaçamento horizontal, espaçamento vertical, blur, cor da sombra.
47. TEXT
48. text-shadow Sombreamento do texto. Ordem: espaçamento horizontal, espaçamento vertical, blur, cor da sombra.
49. @font-face Permite associar fontes diferentes das existentes do SO. Após associado estará disponível na propriedade font-family. Obs.: IE suporta apenas .eot e os outros browsers suportam além do .eot o .ttf e o .otf
50. TRANSFORMATION
51. rotate Possibilidade de rotacionar um elemento em determinado ângulo.
52. scale Dimensionar a escala de um elemento com base nas posições X e Y. Ordem: X,Y Caso seja passado apenas um parâmetro o mesmo será aplicado em X e Y.
53. skew Inclinar um elemento com base nas posições X e Y. Ordem: X,Y Caso seja passado apenas um parâmetro o valor de Y assumirá o valor 0.
54. translate Mover um objeto ao longo do eixo especificado. É aceito em px, em, %, etc.
56. Can I use... Support tables for HTML5, CSS3, etc Fonte: http://caniuse.com/
57. Nossaaa! Que tanta coisa! Não precisa aprender tudo de uma vez só, vá com calma.
58. And on the next episode…
59. http://commons.wikimedia.org/wiki/File:HTML5-APIs-and-related-technologies-by- Sergey-Mavrody.png http://www.w3schools.com/html/html5_intro.asp http://www.slideshare.net/1Marc/html5-essentials http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.w3schools.com/html/html5_form_input_types.asp REFERÊNCIAS