Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 vs App Nativo

Avatar for mauriliohrc mauriliohrc
February 22, 2013
Programming
0
56

HTML5 vs App Nativo

HTML5 é capaz de aguentar o tranco?

Avatar for mauriliohrc

mauriliohrc

February 22, 2013
Tweet

More Decks by mauriliohrc

See All by mauriliohrc
Dicas para publicar seu app na App Store
Avatar for mauriliohrc mauriliohrc
1
74
Introdução a dispositivos móveis
Avatar for mauriliohrc mauriliohrc
0
46
TCC - Rastreamento com dispositivos móveis
Avatar for mauriliohrc mauriliohrc
1
140
Treinamento iOS ALEGO
Avatar for mauriliohrc mauriliohrc
1
89

Other Decks in Programming

See All in Programming
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
Avatar for Koya Masuda koxya
0
140
ててべんす独演会〜Flowの全てを語ります〜
Avatar for てべすてん tbsten
1
190
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
Avatar for azukiazusa azukiazusa1
12
4.8k
複雑なフォームに立ち向かう Next.js の技術選定
Avatar for Takashi Machinaga macchiitaka
4
1k
2025年版 サーバーレス Web アプリケーションの作り方
Avatar for Hayato Watanabe hayatow
21
24k
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
180
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
Avatar for teamLab teamlab
PRO
3
200
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osk2025-duckdb
Avatar for Takahashi Ikki takahashiikki
1
220
気づいて！アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
Avatar for Wakabayashi Rikuma waka12
0
150
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
Avatar for Naofumi Kagami naofumi
1
290
Model Pollution
Avatar for Henning Schwentner hschwentner
1
170
プログラマのための作曲入門
Avatar for CHEEBOW cheebow
0
440

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.6k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
23k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
110
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k

Transcript

  1. HTML5 vs NATIVO @ m a u r i l

    i o h r c Friday, February 22, 13

  2. Quem é esse cara estranho aqui na frente? Twitter: mauriliohrc

    Github: mauriliohrc Youtube: KiwiOfficeHour Friday, February 22, 13

  3. Friday, February 22, 13

  4. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Friday, February 22,

    13

  5. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Friday, February 22,

    13

  6. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Friday, February 22,

    13

  7. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Cache <!DOCTYPE HTML>

    <html manifest="cache.manifest"> <body> … </body> </html> Friday, February 22, 13

  8. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Cache CACHE MANIFEST

    NETWORK: /checking.cgi FALLBACK: /css/theme.css CACHE: /js/main.js /css/index.css http://files/images/scene.jpg http://files/images/world.jpg Friday, February 22, 13

  9. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Friday, February 22,

    13

  10. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Storage if  (typeof(Storage)!==”undefined”)

     {    //  Disponível }  else  {    //  Não  disponível } localStorage.getItem("bar"); localStorage[“bar”] localStorage.setItem("bar",  obj); localStorage[“bar”]  =  obj Friday, February 22, 13

  11. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Storage var  testObject

     =  {  'one':  1,  'two':  2,  'three':  3  }; //  Put  the  object  into  storage localStorage.setItem('testObject',   JSON.stringify(testObject)); //  Retrieve  the  object  from  storage var  retrievedObject  =   localStorage.getItem('testObject'); console.log('retrievedObject:  ',   JSON.parse(retrievedObject)); Friday, February 22, 13

  12. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Storage 5  megabytes

    Friday, February 22, 13

  13. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Storage Friday, February

    22, 13

  14. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Friday, February 22,

    13

  15. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Network Friday, February

    22, 13

  16. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Network <script type="text/javascript"

    src="http://local/user? id=1234&jsonp=parseResponse"> </script> parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7}); Friday, February 22, 13

  17. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Network var connection

    = new WebSocket('ws:// html5rocks.websocket.org/echo', ['soap', 'xmpp']); // Sending String connection.send('your message'); // Sending canvas ImageData as ArrayBuffer var img = canvas_context.getImageData(0, 0, 400, 320); var binary = new Uint8Array(img.data.length); for (var i = 0; i < img.data.length; i++) { binary[i] = img.data[i]; } connection.send(binary.buffer); // Sending file as Blob var file = document.querySelector('input[type="file"]').files[0]; connection.send(file); Friday, February 22, 13

  18. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Sensores Friday, February

    22, 13

  19. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Sensores GeoLocation <script>

    function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { // não suportado (IE < 9) } function showPosition(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; } </script> Friday, February 22, 13

  20. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Notificações Friday, February

    22, 13

  21. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Notificações if (!!window.EventSource)

    { var source = new EventSource('stream.php'); } else { // Result to xhr polling :( } source.addEventListener('message', function(e) { console.log(e.data); }, false); source.addEventListener('open', function(e) { // Connection was opened. }, false); source.addEventListener('error', function(e) { if (e.readyState == EventSource.CLOSED) { // Connection was closed. } }, false); Friday, February 22, 13

  22. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Notificações <?php header('Content-Type:

    text/event-stream'); header('Cache-Control: no-cache'); function sendMsg($id, $msg) { echo "id: $id" . PHP_EOL; echo "data: $msg" . PHP_EOL; echo PHP_EOL; ob_flush(); flush(); } $serverTime = time(); sendMsg($serverTime, 'server time: ' . date("h:i:s", time())); Friday, February 22, 13

  23. Recursos Internet Armazenamento Conectividade Sensores Notificações Animações Animações - Canvas

    - Prototype - jQuery Friday, February 22, 13

  24. Recursos E agora? Onde devo usar? Friday, February 22, 13

  25. Recursos Friday, February 22, 13