HTML5 & CSS3

Aula de introdução ao HTML5 e CSS3 no Instituto Mauá de Tecnologia (http://www.maua.br/)

Transcript

1. & Vitor Leal - 2014
2. O que é? HTML é a abreviação de HyperText Markup Language.! É uma linguagem de marcação utilizada para criar páginas Web. HTML CSS é a abreviação de Cascading Style Sheets. É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação. CSS 2
3. Conteúdo/Informação Estilo/Apresentação 3 O que é?
5. 5 Qual a diferença? Quais são as principais diferenças do HTML5 para suas versões anteriores? offline & storage semântica dispositivos • Novas tags • Microdata • Microformat • App Cache • Local Storage • Indexed DB • File API • Geolocation • Microfone • Camera • Posição da tela
 Landscape/Portrait
6. 6 multimedia conectividade css3 Quais são as principais diferenças do HTML5 para suas versões anteriores? Qual a diferença? • WebSockets • Real-time • Audio • Video • Efeitos • Animações • Fontes • Responsive
7. Compatibilidade Como testar a compatibilidade do HTML5 e CSS3 no navegador do seu computador e celular.
8. Compatibilidade Como comparar o suporte do HTML5 e CSS3 entre os navegadores mais utilizados no mercado. 8
9. Compatibilidade Links para úteis para testar a compatibilidade: • http://haz.io/ • http://caniuse.com/ • http://fmbip.com/litmus/ 9
10. Estrutura básica 10 Semântica
11. 11 <div id=“header”></div> <div id=“nav”></div> <div id=“main”></div> <div id=“sidebar”>! </div> <div id=“footer”></div> Semântica
12. 12 <header></header> <nav></nav> <article></article> <aside>! </aside> <footer></footer> Semântica
13. 13 Semântica
14. 14 Mozilla Developer Network Semântica https://developer.mozilla.org http://mzl.la/1hwSa6H
15. 15 Semântica Porque dar tanta importância para a Semântica? • Para dar um significado ao documento • Informação consistente para
 os mecanismos de busca • Padrão para ferramentas de acessibilidade
17. 17 Qual a diferença? Quais são as principais diferenças do CSS para suas versões anteriores? • cores • transparência • múltiplos backgrounds • bordas arredondadas • fontes
18. 18 Qual a diferença? - Cores rgb(255, 255, 255);! rgba(255, 255, 255, 1);! ! !
19. 19 Qual a diferença? - Transparência opacity: 0 = totalmente transparente ! ! ! ! 1 = totalmente opaco
20. 20 Qual a diferença? - Múltiplos backgrounds background: url(url da imagem) eixo-X eixo-Y repete-?,! ! ! ! ! url(outra imagem) eixo-X eixo-Y repete-?,
21. 21 Qual a diferença? - Bordas arredondadas border-radius: media! border-eixoY-eixoX-radius: medida
22. 22 Qual a diferença? - Fontes
23. 23 Qual a diferença? - Fontes Google fontes tem + de 600 fontes open source para inserir rapidamente no seu projeto. https://www.google.com/fonts
24. 24 Só tem isso de novo no CSS3? Qual a diferença?
25. 25 Qual a diferença? - Transformações e Animações • transformações: • animações: …
26. 26 Qual a diferença? - Media Queries Como faço para ter um site “responsivo”, que se adapte ao tamanho da tela do usuário, seja no desktop, tablet ou celular? desktop tablet mobile
27. 27 • media queries: Qual a diferença? - Media Queries
28. 28 Qual a diferença? - Media Queries Como eu posso testar minhas media queries sem ter que ficar alterando o tamanho do browser? http://www.responsinator.com/
29. 29 Referência CSS-Tricks é um ótimo site para consultas de como utilizar as propriedades do CSS. http://css-tricks.com/
30. 30 CrossBrowser Mas como nem tudo é perfeito ainda temo que lidar com as diferentes implementações de cada navegador. -webkit-border-radius -moz-border-radius -o-border-radius -ms-border-radius
31. 31 Debug Como eu consigo fazer o debug do HTML e do CSS que estou criando para o meu projeto?
32. 32 CodeStyle Ao trabalhar em equipe o ideal é que o código escrito por todos pareça que foi escrito por uma só pessoa. http://vitorleal.com/frontend-styleguide/
33. Vitor Leal http://vitorleal.com github.com/vitorleal @vitorleal github: twitter: