HTML

Transcript

1. 1 rohersmoura@gmail.com danielrohers Daniel Röhers Moura Software Engineer @ HandsOn.TV
2. HTML o que? HTML5 é a nova versão do HTML, simples assim! :) Foi lançada em 2008 e traz consigo importantes mudanças quanto ao papel do HTML na Web, através de novas funcionalidades como semântica, acessibilidade e diversas API’s. 2015 reconhecido pela W3C 2
3. Por que usar? 3
4. 4 Semântica
5. 5 Exemplificando…
6. 6 Semântica, só para isso?
7. 7 45.623.910 pessoas </censo-2010>
8. 8 Não faça: <h1 role="button">heading button</h1> Faça: <h1> <button>heading button</button> </h1>
9. 9 Não faça: <a href="#” class="btn">heading button</a> Faça: <button>heading button</button>
11. 11 Performance
12. 12 SEO Search Engine Optimization
13. 13 API's Conectividade • Web Sockets • Server-sent events • WebRTC Offline e Armazenamento Validação de formulários Geolocalização Áudio Vídeo Drag and Drop Gráficos e efeitos 3D e muito, muito mais…
15. Algumas tags <!DOCTYPE html> – Específica que iremos utilizar HTML5 ao browser <header> – Serve para marcar o cabeçalho do documento ou seção. <nav> – Como o nome já sugere, essa tag é utilizada para navegação, ou seja, nela irá conter links de navegação externa ou interna a página. <main> – Essa tag pode ser usada para identificar o conteúdo principal da página. Por exemplo, o conteúdo de um artigo pode estar dentro da tag main. <section> – A section serve para separar as seções genésicas de uma página e para identificar abordagens diferentes de uma página. <article> – Usado para representar conteúdos independentes de uma página. Como um post de um blog. 15
16. <aside> – Essa tag é usada para a identificação de um conteúdo secundário que não seja parte da seção principal. Ela é bastante usada como uma sidebar, alocadas em uma coluna esquerda ou direita de uma página. <footer> – Usada para identificar o rodapé da página ou seção. <audio> – É uma maneira simples e eficiente de inserirmos um arquivo de áudio na página. <video> – É usada para inserirmos arquivos de vídeo na página. Existem muitas atributos que complementam essa tag, como inserir legenda por exemplo. 16
17. Estruturação básica 17
18. Novos Input Types • color <input type="color" name="favcolor"> • date <input type="date" name="bday"> • datetime <input type="datetime" name="bdaytime"> • email <input type="email" name="email"> • month <input type="month" name="bdaymonth"> • number <input type="number" name="quantity" min="1" max="5"> • range <input type="range" name="points" min="1" max="10"> • time <input type="time" name="usr_time"> • url <input type="url" name="homepage"> • week <input type="week" name="week_year"> 18
19. Bye :) <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> 19
20. 20 Mais algumas mudanças…
21. 21 Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML <!DOCTYPE html> HTML5
22. 22 Language < html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > HTML <html lang="en"> HTML5
23. 23 Character Encoding <meta http-equiv="Content-Type" content=“text/ html;charset=UTF-8"> HTML <meta charset="UTF-8"> HTML5
24. 24 CSS <link rel="stylesheet" type="text/css" href="theme.css"> HTML <link rel="stylesheet" href="theme.css"> HTML5
25. 25 JavaScript <script type="text/javascript" src="javascript.js"> HTML <script src="javascript.js"> HTML5
26. 26 Alguns exemplos…
27. < audio > 27
28. < video > 28
29. < svg > 29
30. geolocation 30
31. getUserMedia 31
32. getUserMedia 32
33. http://goo.gl/vc4d9W 33
34. 34 https://goo.gl/h4aLfR
35. 35 http://goo.gl/41pAgH
36. 36 https://goo.gl/sthD9B
38. http://mobilehtml5.org 38
39. http://diveintohtml5.com.br 39
40. http://html5test.com 40
41. http://goo.gl/wl3OBo 41
42. http://www.html5rocks.com 42
43. 43 https://github.com/danielrohers/faccat-examples
44. Obrigado ;D 44