O documento discute o uso de APIs HTML5 em aplicações reais, destacando suas vantagens e desvantagens. Apresenta exemplos de APIs como Vibration, Web Notifications, Offline e Fullscreen e discute como integrá-las em diferentes navegadores. Também aborda temas como usabilidade, acessibilidade e arquitetura para aplicações multiplataforma.

1. HTML5 API:
Herói, Vilão e sua utilização
em aplicações reais
Wilson Mendes
@willmendesneto

2. QUEM
EU
SOU
?

3. #SQN

4. Wilson Mendes
@willmendesneto
#opensource
#developer
#comunidades
Mais? Pergunte ao Google =)

5. HTML5 === BUZZWORD

6. Além da
VALIDAÇÃO
Formulários
de

7. $(this).is(‘sparta!’);

10. Porque todo
mundo um dia...
Sofreu com requisições
assíncronas…

11. Promises / Proactor

12. NaN
Porque pode acontecer
tudo.
Inclusive nada

14. Array(16).join(‘wat’ - 1) + ‘ Batman!’;
Se você sabe tudo...
Qual o resultado?
https://www.destroyallsoftware.com/talks/wat

15. Porque todo
mundo um dia...
Se maravilhou com uma API...

16. Web Storage
Offline
Media
Web Speech
Web Workers
Connection
Fullscreen
Vibration
File

17. Mas quando foi usar...
... se deparou com PROBLEMAS ...

19. http://loopinfinito.com.br/2012/09/05/entendendo-as-diferentes-distribuicoes-dos-browsers/
Stable
channel
Beta channel
Dev channel
Canary build
Release
Beta
Aurora
Nightly
Estável
Next
Browsers distribution

20. E o Internet Explorer?

21. Veja bem...

22. Cenário atual
Pré-processadores
CLI
Frameworks
Libs
Enterprise
Desktop Apps

23. Javascript pode fazer isso?

24. ...mas não é tão fácil assim...

25. Novas API’s
Novos problemas
API bacana, mas só funciona no …

26. http://remysharp.com/2010/10/08/what-is-a-polyfill/
Polifylls? SHIM?

27. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
...mas...para API’s?

28. ...mas não é tão fácil assim…
[2]

29. Testando suporte

30. Feature Detection

31. @supports

32. CSS Support Javascript

33. MAS TEMOS AJUDA

35. HTML5 please

37. Frontend-search

38. So, let’s talk about
HTML5 API’s?

39. Vibration
http://embed.plnkr.co/UKYISp/

40. Web Notification

41. Offline

42. !==
Offline First!
Offline API

43. Fullscreen

44. Web Storage
http://embed.plnkr.co/iznugnFL8fM3ALhKtBtQ/preview

45. Usabilidade
Acessibilidade
HTML5 API’s

46. Usabilidade
Acessibilidade
HTML5 API’s

47. Web Speech

48. Web Speech
http://embed.plnkr.co/D6BVEE/preview

50. Sensor
http://embed.plnkr.co/zKqSLBuI11HoYQLGk1zZ/preview

51. Como integrar as 2 API’s?
NÃO INTEGRA!
Bad news...

52. https://twitter.com/willmendesneto/status/474580225071017984

53. Arquitetura

54. O mesmo app em
browsers diferentes?

55. Fullscreen
Media
Web Storage
Vibration
Web Notifications
API’s utilizadas
Speech recognition Battery

56. KEEP
CALM
IT’S
SHOOOW
TIME

57. Social Share
https://github.com/willmendesneto/social-share

58. LIÇÕES
APRENDIDAS

59. NOVAS RESPONSABILIDADES
NOVAS POSSIBILIDADES

60. BONUS
TIME

61. Text Encoding
http://embed.plnkr.co/4INpdt/preview

62. Web Alarms

63. Font Load Events

64. OBRIGADO
Wilson Mendes
@willmendesneto
HTML5 API: Herói, vilão e sua utilização em aplicações reais