Your SlideShare is downloading. ×
Web e HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web e HTML5

111

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.

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
111
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web e HTML5 Bruno Orlandi
  • 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. Motivação
  • 4. Por que HTML5? ● A Web desenvolveu seu padrão ● Qualquer dispositivo “inteligente” terá suporte
  • 5. Por que HTML5?
  • 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. Por que HTML5? ● Firefox OS (Web Nativo)
  • 8. Por que HTML5?
  • 9. Por que HTML5?
  • 10. Por que HTML5?
  • 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. Extensões Chrome ● nCage
  • 13. Extensões Chrome ● nPokemon ● http://tinyurl.com/o58ffvz
  • 14. O Básico
  • 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. Linguagens ● PHP, Java EE, Ruby on Rails, Python, ASP, Perl… : Linguagem de programação (Servidor) ● SQL : Linguagem de Banco de Dados ● BACK-END
  • 17. HTML
  • 18. CSS
  • 19. JavaScript
  • 20. JavaScript http://tinyurl.com/lbgx2r7
  • 21. jQuery ● Biblioteca Javascript ● Facilitar o desenvolvimento de JavaScript. ○ Eventos ○ Animações ○ Ajax
  • 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. Bootstrap ●
  • 24. Bootstrap ●
  • 25. KickStart ●
  • 26. Foundation ●
  • 27. jQuery Mobile ●
  • 28. Mão na Massa
  • 29. A Calculadora http://tinyurl.com/kqbxuhc
  • 30. HTML5
  • 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. Audio e Video ● <audio src=”musica.mp3” controls></audio> ● <video src=”video.mp4” controls width=”320” height=”240”> </video>
  • 33. Geolocalização http://html5demos.com/geo
  • 34. Geolocalização ● Latitude ● Longitude ● Precisão ● Altitude ● Direção ● Velocidade ● getCurrentPosition ● watchPosition
  • 35. WebStorage ● localStorage.setItem(‘chave’,’valor’); ● localStorage.getItem(‘chave’); ● http://playground.html5rocks.com/
  • 36. Canvas http://www.mutantzombiemonsters.com/ http://jogandoeaprendendo.com.br/ http://plaev.github.io/skel/ http://nihas.com.br/amazing.html
  • 37. Outras ● Drag and Drop nativo ● Application Cache ● Notificações
  • 38. Dúvidas?

×