HTML5 para estudantes universitários

Introdução ao HTML5 e suas novas features.

Transcript

2. PARA ESTUDANTES UNIVERSITÁRIOS
3. Paullo Norato, prazer ;) Desenvolvedor front-end há 5 anos Formado em análise de sistemas Fundador do blog Front-end Para Leigos Participou do Google Developer Bus Desenvolveu seu próprio framework Aprendeu a mexer no Github há alguns dias fb.com/paullonorato github.com/paullonorato instagram.com/paullonorato ou simplesmente Paullo Norato no Google, mas cuidado!
4. Thom
5. ?
6. Tudo começou em 5 de fevereiro de 2004...
8. ...o tempo passou e ela foi lançada em 2008
9. pessoas_aleatorias.jpg
14. http://caniuse.com/#search=html5
16. ...e então, finalizada em 29 de outubro de 2014
20. http://abgocreate.funlearning.com/
21. http://www.marky.pl/vector-field/ http://codepen.io/ma77os/full/spekH
22. http://studio.gootechnologies.com/skazka/
23. www.chromeexperiments.com/webgl
25. - Localização geográfica (GPS) - API de orientação (acelerômetro) - WebGL (GPU) - API de áudio da web (hardware de áudio)
26. http://html5demos.com/geo
27. http://bit.ly/1g0MTFD
28. http://labs.dinahmoe.com/ToneCraft/ http://labs.dinahmoe.com/plink/
30. http://html5-demos.appspot.com/static/getusermedia/photobooth.html
33. - alguns elementos morreram =/ - porém, outros nasceram =) - microdata e microformats *-* - resumindo: ficou mais... sensual <3
34. PRIMEIRAMENTE: o cabeçalho <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
35. PRIMEIRAMENTE: o cabeçalho <!DOCTYPE html>
37. PRIMEIRAMENTE: o cabeçalho <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. w3.org/TR/html4/strict.dtd"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> http://www.w3.org/TR/html401/struct/global.html
39. DE NOVO o cabeçalho <!DOCTYPE html>
40. Deixe que o browser faça o trabalho pesado ;)
41. SEGUNDAMENTE: quem partiu dessa pra melhor <acronym> <applet> <dir> <xmp> <frame> <frameset> <noframes> <basefont> <big> <center> <font> <strike> <tt> { CSS
42. SEGUNDAMENTE: quem nasceu <header> <nav> <menu> <section> <article> <aside> <main> <footer> <strong> <em> <abbr> <address> <figure> <figcapture> <figcapture> <video> <audio> <svg> <canvas> <details>
43. TERCEIRAMENTE: quem nasceu (formulário: tipos de entrada) <color> <date> <datetime> <datetime-local> <email> <month> <number> <range> <search> <tel> <time> <url> <week>
44. TERCEIRAMENTE: quem nasceu (formulário: atributos) autocomplete formnovalidate placeholder required entre outras...
45. MICRODATA
46. http://youtu.be/XPLUH9I_IJs?t=4m55s Dados sobre dados: Microdata e Open Graph
48. More efficient connectivity means more real- time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing data between client and server more efficiently than ever before. Conectividade mais eficiente significa mais chats em tempo real, jogos mais rápidos e uma melhor comunicação. Web Sockets e Eventos enviados pelo servidor estão empurrando dados entre cliente e servidor de forma mais eficiente do que nunca. http://www.w3.org/html/logo/
49. http://html5demos.com/offline
50. http://scrumblr.ca/HTML5
52. CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance CSS3 oferece uma ampla gama de estilização e efeitos, reforçando a aplicação web sem sacrificar a sua estrutura ou desempenho semântico http://www.w3.org/html/logo/
53. IE’ca não é browser MAS LEMBRE-SE:
54. FEATURES: Transform Translate Skew Scale Rotate Transition ... Animation Keyframes (eh tipo Flash só quem sem o Flash) VEREMOS NO PRÓXIMO SLIDE
55. www.raphaelfabeni.com.br/lab-css3
57. Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications Web Apps pode começar mais rápido e trabalhar mesmo se não houver conexão com a internet, graças ao HTML5 App Cache, bem como o armazenamento local, indexad DB e os arquivos de especificações de API http://www.w3.org/html/logo/
58. http://www.html5rocks.com/pt/features/storage
59. http://www.ellipsetours.com/Demos/storage/
61. Performance is a Feature
62. - cada bit vale muito - reaproveite as classes do CSS - comprima os CSSs, JSs, imagens (...tudo) - Elimine redirecionamentos desnecessários - Adote o PageSpeed Insights by Google
63. “Não adianta ter feito um pu*a trampo no back-end se o front ta todo cag*do” Do grande pensador, Paullo Norato
64. Apenas um segundo de atraso no carregamento da página pode causar perda de 7% nas conversões de clientes http://bit.ly/1e6iJiA
65. Como um segundo pode custar para Amazon $1,6 bilhões em vendas http://bit.ly/1ejSNig
66. O PODER ESTÁ NO FRONT https://www.youtube.com/watch?v=cmT3clnhbiQ
68. Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action! O áudio eo vídeo são cidadãos de primeira classe na web HTML5, vivendo em harmonia com seus aplicativos e sites. Luzes, câmera, ação! http://www.w3.org/html/logo/
69. https://www.youtube.com/html5
71. - as tags de áudio e vídeo são iguais ;) - você pode definir mais de uma extensão *-* - caso nenhuma for aceita pelo browser, você pode exibir uma mensagem =O
72. <video src="foo.ogg" controls></video> ou <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Seu navegador não suporta o elemento <code>video</code> </video>
73. ACABOU =}
74. Dúvidas
75. Muito obrigado *agora vcs batem palma*