O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Html5 para estudantes universitários

541 visualizações

Publicada em

Introdução ao HTML5 e suas novas features.

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Html5 para estudantes universitários

  1. 1. PARA ESTUDANTES UNIVERSITÁRIOS
  2. 2. 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!
  3. 3. Thom
  4. 4. ?
  5. 5. Tudo começou em 5 de fevereiro de 2004...
  6. 6. ...o tempo passou e ela foi lançada em 2008
  7. 7. pessoas_aleatorias.jpg
  8. 8. http://caniuse.com/#search=html5
  9. 9. ...e então, finalizada em 29 de outubro de 2014
  10. 10. http://abgocreate.funlearning.com/
  11. 11. http://www.marky.pl/vector-field/ http://codepen.io/ma77os/full/spekH
  12. 12. http://studio.gootechnologies.com/skazka/
  13. 13. www.chromeexperiments.com/webgl
  14. 14. - Localização geográfica (GPS) - API de orientação (acelerômetro) - WebGL (GPU) - API de áudio da web (hardware de áudio)
  15. 15. http://html5demos.com/geo
  16. 16. http://bit.ly/1g0MTFD
  17. 17. http://labs.dinahmoe.com/ToneCraft/http://labs.dinahmoe.com/plink/
  18. 18. http://html5-demos.appspot.com/static/getusermedia/photobooth.html
  19. 19. - alguns elementos morreram =/ - porém, outros nasceram =) - microdata e microformats *-* - resumindo: ficou mais... sensual <3
  20. 20. PRIMEIRAMENTE: o cabeçalho <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
  21. 21. PRIMEIRAMENTE: o cabeçalho <!DOCTYPE html>
  22. 22. 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
  23. 23. DE NOVO o cabeçalho <!DOCTYPE html>
  24. 24. Deixe que o browser faça o trabalho pesado ;)
  25. 25. SEGUNDAMENTE: quem partiu dessa pra melhor <acronym> <applet> <dir> <xmp> <frame> <frameset> <noframes> <basefont> <big> <center> <font> <strike> <tt> {CSS
  26. 26. SEGUNDAMENTE: quem nasceu <header> <nav> <menu> <section> <article> <aside> <main> <footer> <strong> <em> <abbr> <address> <figure> <figcapture> <figcapture> <video> <audio> <svg> <canvas> <details>
  27. 27. TERCEIRAMENTE: quem nasceu (formulário: tipos de entrada) <color> <date> <datetime> <datetime-local> <email> <month> <number> <range> <search> <tel> <time> <url> <week>
  28. 28. TERCEIRAMENTE: quem nasceu (formulário: atributos) autocomplete formnovalidate placeholder required entre outras...
  29. 29. MICRODATA
  30. 30. http://youtu.be/XPLUH9I_IJs?t=4m55s Dados sobre dados: Microdata e Open Graph
  31. 31. 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/
  32. 32. http://html5demos.com/offline
  33. 33. http://scrumblr.ca/HTML5
  34. 34. 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/
  35. 35. IE’ca não é browser MAS LEMBRE-SE:
  36. 36. FEATURES: Transform Translate Skew Scale Rotate Transition ... Animation Keyframes (eh tipo Flash só quem sem o Flash) VEREMOS NO PRÓXIMO SLIDE
  37. 37. www.raphaelfabeni.com.br/lab-css3
  38. 38. 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/
  39. 39. http://www.html5rocks.com/pt/features/storage
  40. 40. http://www.ellipsetours.com/Demos/storage/
  41. 41. Performance is a Feature
  42. 42. - 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
  43. 43. “Não adianta ter feito um pu*a trampo no back-end se o front ta todo cag*do” Do grande pensador, Paullo Norato
  44. 44. Apenas um segundo de atraso no carregamento da página pode causar perda de 7% nas conversões de clientes http://bit.ly/1e6iJiA
  45. 45. Como um segundo pode custar para Amazon $1,6 bilhões em vendas http://bit.ly/1ejSNig
  46. 46. O PODER ESTÁ NO FRONT https://www.youtube.com/watch?v=cmT3clnhbiQ
  47. 47. 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/
  48. 48. https://www.youtube.com/html5
  49. 49. - 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
  50. 50. <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>
  51. 51. ACABOU =}
  52. 52. Dúvidas
  53. 53. Muito obrigado *agora vcs batem palma*

×