Workshop de Firefox OS

560 views

Published on

Workshop realizado na Telefônica VIVO para parceiros.

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

No Downloads
Views
Total views
560
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Bem no início da web tínhamos uma grande variedade de ecossistemas abertos e fechados em torno do PC.Por quase 10 anos o Internet Explorer dominou o mercado.Em 2004, o Firefox, da Fundação Mozilla, apareceu e transformou o panorama da Web.Com a constante inovação promovida pela Fundação Mozilla, novos navegadores surgem mudando completamente o cenário.Graças a esta mudança, a Web transformou-se em um ecossistema aberto e promissor.
  • Workshop de Firefox OS

    1. 1. Centro de Inovação – Telefônica Brasil 16.08.2013 Desenvolvendo para FXOS Firefox OS
    2. 2. Índice Introdução 01 02 03 04 O Início da internet Web móvel Open Web Devices 05 O Firefox OS 06 HTML5 07 Open Web App 08 09 Tipos de Aplicativos WebAPIs e WebActivities 10 Contato
    3. 3. Introdução 01
    4. 4. 4 Centro de Inovação Telefônica Brasil Introdução01 David Ruiz @wupsbr http://wupsbr.com david@telefonicabeta.com Desenvolvedor Evangelista @ Telefônica Digital
    5. 5. O Início da internet 02
    6. 6. 6 Centro de Inovação Telefônica Brasil O Início da internet02
    7. 7. Web móvel 03
    8. 8. 8 Centro de Inovação Telefônica Brasil Web móvel Desde então, a Web está migrando para a mobilidade. 03 Global mobile traffic as % of Total Internet Traffic, 12/08 – 5/12 Sources: StatCounter Global Stats Mary Meeker - KPBC 1% in 12/09 4% in 12/10 10% in 5/12
    9. 9. 9 Centro de Inovação Telefônica Brasil Web móvel Com esta mudança de comportamento, novos sistemas operacionais fechados surgiram. 03 Internet
    10. 10. 10 Centro de Inovação Telefônica Brasil Web móvel Apenas duas plataformas dominam mais de 74% do mercado móvel ... 03 Source: Gartner, Feb 2012 Android + iOS 74.7% of the smarpthone OS Market 50,9% 23,8% 11,7% 8,8% 4,8%Android iOS Symbian RIM Others
    11. 11. 11 Centro de Inovação Telefônica Brasil Web móvel ... passando a controlar ... 03 O HARDWARE OS BROWSERS OS SISTEMAS OPERACIONAIS E OS ECOSSISTEMAS DE APLICATIVOS
    12. 12. 12 Centro de Inovação Telefônica Brasil Web móvel ... e impedindo a concorrência. 03
    13. 13. 13 Centro de Inovação Telefônica Brasil Web móvel Para a Web móvel ser realidade, uma série de pontos precisam ser solucionados: 03 Mecanismos de Monetização para Web Apps Mecanismos de Descoberta de Web Apps Padrões de Web Móvel Suporte a Múltiplas Plataformas Performance nos Browsers Móveis
    14. 14. 14 Centro de Inovação Telefônica Brasil Web móvel Com o HTML5 temos um grande avanço na busca por um framework comum para o desenvolvimento de páginas web universais entre desktop e mobile. 03
    15. 15. Open Web Devices 04
    16. 16. 16 Centro de Inovação Telefônica Brasil Open Web Devices04 Para promover o avançado de um ecossistema móvel e aberto, a Telefônica inicia uma parceria com a Fundação Mozilla por possuir a experiência necessária para transformar novamente a Web. Criando assim o que chamamos de Open Web Devices baseados no Firefox OS Enable a mobile browser to access all devices capabilities extending HTML5 standard to achieve this Improve mobile Web performance via a lighter OS and fast browser to provide the best mobile Web apps experience Offer Web app discoverability and monetization capabilities for developers via operator billing Create a reference implementation to drive advance mobile Web standards in other implementations
    17. 17. 17 Centro de Inovação Telefônica Brasil Open Web Devices04 MOBILE WORLD CONGRESS 2012
    18. 18. 18 Centro de Inovação Telefônica Brasil Open Web Devices04 MOBILE WORLD CONGRESS 2013
    19. 19. 19 Centro de Inovação Telefônica Brasil Open Web Devices04 MOBILE WORLD CONGRESS 2013
    20. 20. O Firefox OS 05
    21. 21. 21 Centro de Inovação Telefônica Brasil O Firefox OS @codepo8 www.icant.co.uk 05 Por Christian Heilmann Principal technical evangelist @ Mozilla
    22. 22. 22 Centro de Inovação Telefônica Brasil O Firefox OS05 O Fusca dos Smartphones!
    23. 23. 23 Centro de Inovação Telefônica Brasil O Firefox OS • Acessível para todos; 05 O Fusca dos Smartphones? • Muitas peças intercambiáveis – Inclusão e atualização fácil; • Construído sobre um motor confiável que não transborda; • Transformando mobilidade e independência acessível. • Baseado em uma tecnologia resistente;
    24. 24. 24 Centro de Inovação Telefônica Brasil O Firefox OS05 Substituir os Feature Phones!
    25. 25. 25 Centro de Inovação Telefônica Brasil O Firefox OS05
    26. 26. 26 Centro de Inovação Telefônica Brasil O Firefox OS • Sistema operacional de nível inferior, que consiste em um kernel Linux e HAL (Hardware Abstraction Layer). • Possibilidade de expor alguma coisa do hardware para o Gecko. 05 Gonk
    27. 27. 27 Centro de Inovação Telefônica Brasil O Firefox OS • O tempo de execução do aplicativo. O mecanismo de renderização no Firefox para HTML5, CSS e JavaScript. Implementa uma série de APIs. 05 Gecko
    28. 28. 28 Centro de Inovação Telefônica Brasil O Firefox OS • A interface de usuário, totalmente construída por APIs de HTML5 e Open Web. 05 Gaia
    29. 29. HTML5 06
    30. 30. 30 Centro de Inovação Telefônica Brasil HTML506
    31. 31. 31 Centro de Inovação Telefônica Brasil HTML506 http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/
    32. 32. 32 Centro de Inovação Telefônica Brasil HTML506
    33. 33. Open Web App 07
    34. 34. 34 Centro de Inovação Telefônica Brasil Open Web App07 Requisitos 1 • Conhecimento em HTML5, CSS & JavaScript. Manifesto 2 • Definir o arquivo de configuração (manifesto) do aplicativo. Publicação 3 • Executa-lo no simulador ou gerar o pacote e enviar para o Marketplace.
    35. 35. 35 Centro de Inovação Telefônica Brasil Open Web App07 Requisitos • Aproveite o website/aplicativo existente ou desenvolva inteiramente do zero; • Utilize recursos do HTML5 como LocalStorage, Manifesto Offline, IndexDB e WebAPIs conforme a necessidade. • Utilize layout responsivo para adaptar-se para os vários tamanhos e rotações de telas.
    36. 36. 36 Centro de Inovação Telefônica Brasil Open Web App07 Requisitos
    37. 37. 37 Centro de Inovação Telefônica Brasil Open Web App07 Manifesto • Crie um arquivo com extensão .webapp • Defina o MIME Type para: application/x-web-app-manifest+json • Evite dor de cabeça! Sempre ao modificar o arquivo verifique se o mesmo está correto: http://appmanifest.org/
    38. 38. 38 Centro de Inovação Telefônica Brasil Open Web App07 { "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" } }}, "default_locale": "en" }
    39. 39. 39 Centro de Inovação Telefônica Brasil Open Web App07 Publicação https://marketplace.firefox.com/developers/
    40. 40. 40 Centro de Inovação Telefônica Brasil Open Web App07 Publicação https://marketplace.firefox.com/developers/
    41. 41. Tipos de Aplicativos 08
    42. 42. 42 Centro de Inovação Telefônica Brasil Tipos de Aplicativos08 Hosted App 1 • Armazenado em seu servidor, fácil de atualizar, acesso limitado. Installed Web App 2 • Aplicativo empacotado revisado pela Marketplace. CertifiedWeb App 3 • Parte do OS, apenas para Mozilla e parceiros. Aplicativos Hospedados vs Armazenados
    43. 43. WebAPIs e WebActivities 09
    44. 44. 44 Centro de Inovação Telefônica Brasil Tipos de Aplicativo • Vibration API • Screen Orientation • Geolocation API • Mouse Lock API • Open WebApps • Network Information API • Battery Status API • Alarm API • Push Notifications API • WebFM API / FMRadio • WebPayment • IndexedDB • Ambient light sensor • Proximity sensor • Notification 08 WebAPIs (Hosted Apps)
    45. 45. 45 Centro de Inovação Telefônica Brasil Tipos de Aplicativo • WebTelephony • WebSMS • Idle API • Settings API • Power Management API • Mobile Connection API • WiFi Information API • WebBluetooth • Permissions API • Network Stats API • Camera API • Time/Clock API • Attention screen • Voicemail 08 WebAPIs (Certified Apps)
    46. 46. 46 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities09 https://developer.mozilla.org/en-US/docs/WebAPI
    47. 47. 47 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities09 var installapp = navigator.mozApps.install(manifestURL); installapp.onsuccess = function(data) { // App is installed }; installapp.onerror = function() { // App wasn't installed, info is in // installapp.error.name }; Solicitando instalação de aplicativo
    48. 48. 48 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities09 "permissions": { "contacts": { "description": "Required for autocomple in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } } Solicitando permissões no manifesto
    49. 49. 49 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities09 var b = navigator.battery; if (b) { var level = Math.round(b.level * 100) + "%", charging = (b.charging) ? "" : "not ", chargeTime = parseInt(b.chargingTime / 60, 10), dischargeTime = parseInt(b.dischargingTime/60,10); b.addEventListener("levelchange", show); b.addEventListener("chargingchange", show); b.addEventListener("chargingtimechange", show); b.addEventListener("dischargingtimechange", show); } Verificando o status da bateria
    50. 50. 50 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities • configure • costcontrol • dial • open • pick • record • save-bookmark • share • view • new, f.e type: “websms/sms” or “webcontacts/contact” 08 WebActivities
    51. 51. 51 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities09 var call = new MozActivity({ name: "dial", data: { number: "+1804100100" } }); Exemplos de Discagem e Câmera
    52. 52. 52 Centro de Inovação Telefônica Brasil WebAPIs e WebActivities09 var getphoto = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } }); getphoto.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; getphoto.onerror = function () { // error }; Exemplos de Discagem e Câmera
    53. 53. Contato 10
    54. 54. 54 Centro de Inovação Telefônica Brasil Contato Links importantes 10 Negocios Documentação e Apresentações 1 • https://marketplace.firefox.com/developers/ • https://developer.mozilla.org/pt-BR/docs/Mozilla/Firefox_OS • http://www.slideshare.net/robhawkes/mobile-app-development-pitfalls-helpers • http://www.youtube.com/user/mozhacks Ferramentas e Grupos 2 Repositórios 3 • https://hacks.mozilla.org/2013/03/firefox-os-simulator-previewing-version-3-0/ • https://addons.mozilla.org/pt-BR/firefox/addon/firefox-os-simulator/ • https://www.facebook.com/groups/ffosbr/ • irc.mozilla.org / #b2g #gaia #introduction #developers • https://github.com/robnyman/Firefox-OS-Boilerplate-App • https://github.com/Jaxo/fxosstub • https://github.com/mozilla-b2g/B2G • https://github.com/mozilla-b2g/gaia Negocios WebAPIs 4 • https://wiki.mozilla.org/WebAPI • https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status • http://www.slideshare.net/robnyman/web-apis-apps-mozilla
    55. 55. 55 Centro de Inovação Telefônica Brasil Contato10 @wupsbr http://wupsbr.com david@telefonicabeta.com David Ruiz Desenvolvedor Evangelista @ Telefônica Digital
    56. 56. 56 Centro de Inovação Telefônica Brasil

    ×