Web e HTML5

423 views
307 views

Published on

Apresentação para motivar o estudo de Web com HTML5 e um pequeno exemplo prático de como começar a desenvolver aplicações Web.

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
423
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web e HTML5

  1. 1. Web e HTML5 Bruno Orlandi
  2. 2. Web e HTML5 ● Web: HTML, JavaScript, CSS, JSON, PHP… ● HTML5 = HTML + JS + CSS3 ● HTML5 : ○ Novas tags ○ Novas APIs Javascript ○ Novos estilos em CSS3
  3. 3. Motivação
  4. 4. Por que HTML5? ● A Web desenvolveu seu padrão ● Qualquer dispositivo “inteligente” terá suporte
  5. 5. Por que HTML5?
  6. 6. Por que HTML5? ● Aplicações Web ● Aplicações Mobile ○ Dois modos de desenvolver: ○ Aplicação totalmente Web (Browser) ○ Aplicação Web embarcada na Nativa ■ Offline ■ Sensação de Nativa
  7. 7. Por que HTML5? ● Firefox OS (Web Nativo)
  8. 8. Por que HTML5?
  9. 9. Por que HTML5?
  10. 10. Por que HTML5?
  11. 11. JavaScript: da Web ao Infinito ● V8 JSEngine ● on{x} ● Google Apps Script ● Aplicações Desktop (Windows 8 e Linux) ● Extensões GNOME ● Extensões Chrome
  12. 12. Extensões Chrome ● nCage
  13. 13. Extensões Chrome ● nPokemon ● http://tinyurl.com/o58ffvz
  14. 14. O Básico
  15. 15. Linguagens ● HTML: Linguagem de descrição de conteúdo. ● CSS: Linguagem de descrição de estilo. ● JavaScript: Linguagem de Programação. (Cliente) ○ Surgiu para manipular páginas Web e torná-las mais dinâmicas. ○ Hoje possui muito mais usos. ○ Orientado à Eventos ● FRONT-END ● Linguagens Interpretadas (não compiladas)
  16. 16. Linguagens ● PHP, Java EE, Ruby on Rails, Python, ASP, Perl… : Linguagem de programação (Servidor) ● SQL : Linguagem de Banco de Dados ● BACK-END
  17. 17. HTML
  18. 18. CSS
  19. 19. JavaScript
  20. 20. JavaScript http://tinyurl.com/lbgx2r7
  21. 21. jQuery ● Biblioteca Javascript ● Facilitar o desenvolvimento de JavaScript. ○ Eventos ○ Animações ○ Ajax
  22. 22. Frameworks ● Conjunto de código pronto ○ HTML + CSS + JS ● Facilita e Agiliza o desenvolvimento ● Responsivos ● Menus, Botões, Icones, etc… ● Existem também os Frameworks back-end
  23. 23. Bootstrap ●
  24. 24. Bootstrap ●
  25. 25. KickStart ●
  26. 26. Foundation ●
  27. 27. jQuery Mobile ●
  28. 28. Mão na Massa
  29. 29. A Calculadora http://tinyurl.com/kqbxuhc
  30. 30. HTML5
  31. 31. O que há de novo? ● Vários recursos e APIs ● Interoperabilidade entre dispositivos ● Gráficos 2D e 3D ● Multimídia ● Performance ● Semântica ● Conectividade em Tempo Real ● Armazenamento offline
  32. 32. Audio e Video ● <audio src=”musica.mp3” controls></audio> ● <video src=”video.mp4” controls width=”320” height=”240”> </video>
  33. 33. Geolocalização http://html5demos.com/geo
  34. 34. Geolocalização ● Latitude ● Longitude ● Precisão ● Altitude ● Direção ● Velocidade ● getCurrentPosition ● watchPosition
  35. 35. WebStorage ● localStorage.setItem(‘chave’,’valor’); ● localStorage.getItem(‘chave’); ● http://playground.html5rocks.com/
  36. 36. Canvas http://www.mutantzombiemonsters.com/ http://jogandoeaprendendo.com.br/ http://plaev.github.io/skel/ http://nihas.com.br/amazing.html
  37. 37. Outras ● Drag and Drop nativo ● Application Cache ● Notificações
  38. 38. Dúvidas?

×