O documento discute as tecnologias da Web, com foco em HTML5. Apresenta as novas tags, APIs e estilos em CSS3 introduzidos pelo HTML5. Explica que HTML5 é o padrão atual para desenvolvimento web e que tem suporte em diversos dispositivos. Também discute o uso crescente de JavaScript em aplicações web, mobile e desktop.

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?