Html5 api herói, vilão e sua utilização hoje em aplicações reais

1,302 views

Published on

As novas API’s do HTML5 abriram novas possibilidades como webapps, mobile apps, apps embarcados e outros. Mas como lidar com suporte (ou a falta dele) a API’s em diferentes browsers? Nesta apresentação vou falar sobre lições aprendidas, boas práticas de utilização de HTML5 Progressive Enhancement com falbacks e Gracefull degradation usando HTML5 API’s para melhorar a UX de seu app e como tratar a falta de suporte entre diferentes browsers, minificando impactos. Tudo isso baseado em um exemplo real.

-------------------------------------------------------------------------

The new HTML5 API's opened up new possibilities as webapps, mobile apps, and other embedded apps. But how to handle support (or lack thereof) API's in different browsers? In this presentation I will talk about lessons learned, best practices for using HTML5 with Progressive Enhancement and falbacks Gracefull degradation using HTML5 API's to improve the UX of your app and how to deal with the lack of support among different browsers, minificando impacts. All this based on a real example.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,302
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html5 api herói, vilão e sua utilização hoje em aplicações reais

  1. 1. HTML5 API: Herói, Vilão e sua utilização em aplicações reais Wilson Mendes @willmendesneto
  2. 2. QUEM EU SOU ?
  3. 3. #SQN
  4. 4. Wilson Mendes @willmendesneto #opensource #developer #comunidades Mais? Pergunte ao Google =)
  5. 5. HTML5 === BUZZWORD
  6. 6. Além da VALIDAÇÃO Formulários de
  7. 7. $(this).is(‘sparta!’);
  8. 8. Porque todo mundo um dia... Sofreu com requisições assíncronas…
  9. 9. Promises / Proactor
  10. 10. NaN Porque pode acontecer tudo. Inclusive nada
  11. 11. Array(16).join(‘wat’ - 1) + ‘ Batman!’; Se você sabe tudo... Qual o resultado? https://www.destroyallsoftware.com/talks/wat
  12. 12. Porque todo mundo um dia... Se maravilhou com uma API...
  13. 13. Web Storage Offline Media Web Speech Web Workers Connection Fullscreen Vibration File
  14. 14. Mas quando foi usar... ... se deparou com PROBLEMAS ...
  15. 15. 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
  16. 16. E o Internet Explorer?
  17. 17. Veja bem...
  18. 18. Cenário atual Pré-processadores CLI Frameworks Libs Enterprise Desktop Apps
  19. 19. Javascript pode fazer isso?
  20. 20. ...mas não é tão fácil assim...
  21. 21. Novas API’s Novos problemas API bacana, mas só funciona no …
  22. 22. http://remysharp.com/2010/10/08/what-is-a-polyfill/ Polifylls? SHIM?
  23. 23. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills ...mas...para API’s?
  24. 24. ...mas não é tão fácil assim… [2]
  25. 25. Testando suporte
  26. 26. Feature Detection
  27. 27. @supports
  28. 28. CSS Support Javascript
  29. 29. MAS TEMOS AJUDA
  30. 30. HTML5 please
  31. 31. Frontend-search
  32. 32. So, let’s talk about HTML5 API’s?
  33. 33. Vibration http://embed.plnkr.co/UKYISp/
  34. 34. Web Notification
  35. 35. Offline
  36. 36. !== Offline First! Offline API
  37. 37. Fullscreen
  38. 38. Web Storage http://embed.plnkr.co/iznugnFL8fM3ALhKtBtQ/preview
  39. 39. Usabilidade Acessibilidade HTML5 API’s
  40. 40. Usabilidade Acessibilidade HTML5 API’s
  41. 41. Web Speech
  42. 42. Web Speech http://embed.plnkr.co/D6BVEE/preview
  43. 43. Sensor http://embed.plnkr.co/zKqSLBuI11HoYQLGk1zZ/preview
  44. 44. Como integrar as 2 API’s? NÃO INTEGRA! Bad news...
  45. 45. https://twitter.com/willmendesneto/status/474580225071017984
  46. 46. Arquitetura
  47. 47. O mesmo app em browsers diferentes?
  48. 48. Fullscreen Media Web Storage Vibration Web Notifications API’s utilizadas Speech recognition Battery
  49. 49. KEEP CALM IT’S SHOOOW TIME
  50. 50. Social Share https://github.com/willmendesneto/social-share
  51. 51. LIÇÕES APRENDIDAS
  52. 52. NOVAS RESPONSABILIDADES NOVAS POSSIBILIDADES
  53. 53. BONUS TIME
  54. 54. Text Encoding http://embed.plnkr.co/4INpdt/preview
  55. 55. Web Alarms
  56. 56. Font Load Events
  57. 57. OBRIGADO Wilson Mendes @willmendesneto HTML5 API: Herói, vilão e sua utilização em aplicações reais

×