firefox-os-front-end

499 visualizações

Publicada em

Slides da minha apresentação na Mobileconf (http://mobile.com.br) 2014. Aproveite sua expertise em front-end numa plataforma que fala sua língua, o FirefoxOS. HTML5, CSS3 e JavaScript conversando nativamente com seu dispositivo. Faço uma introdução ao FirefoxOS, analisando a estrutura de uma aplicação, permissionamento e o uso de algumas APIs exclusivas da plataforma, inclusive a integração com bibliotecas front-end reconhecidas pela comunidade.

Publicada em: Celular
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
499
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

firefox-os-front-end

  1. 1. ! FLÁVIO  ALMEIDA                                  flavio.almeida@caelum.com.br                                  @      flaviohalmeida                                                flaviohenriquealmeida/firefox-­‐os-­‐angularjs
  2. 2. FirefoxOS   ! Seu  talento  front-­‐end   direto  no  celular
  3. 3. FirefoxOS Em  breve  também  no   tablet h"p://goo.gl/KsJCSz
  4. 4. Firefox  OS •NÃO  é  uma  RAPOSA   •hNps://github.com/mozilla-­‐b2g/B2G                B2G:  boot  to  gecko   •UTILIZA  o  KERNEL  do    AOSP  
            (Android  Open  Source  Project) •BILLING  diferenciado   •APP`S  com  CRÉDITO  do  celular   •OPERADORAS  lucram   •PREÇO  acessível*
  5. 5. Flame   Mozilla/T2Mobile   ! Referência  para             desenvolvedores   ! 4.5”  dual-­‐core   1  GB  M/8  GB
  6. 6. Camadas     do  SO  
  7. 7. Gonk: sistema de baixo nível do B2G. Compatível com ADB (Android Debug Bridge) Gecko: ambiente de execução da aplicação (HTML, CSS e JavaScript) Gaia: interface do Usuário
  8. 8. Versão  1.3  (14/05)     hNp://www.mozilla.org/en-­‐US/firefox/os/notes/1.3/ WebGL   asm.js   WebAudio   WebNFC    
  9. 9. Desenvolvedor Front-­‐end Firefox  OS
  10. 10. HTML5 Javascript CSS3 NATIVOS ESPERE UM POUCO… KIMOSABE!
  11. 11. phonegap.com www.appcelerator  (Titanium) cordova.apache.org Frameworks   Plataformas
  12. 12. Windows                                        Phone  8  
  13. 13. Firefox  OS REAPROVEITA*  SEU   WORKFLOW     ! ! ! FRONT-­‐END   *  com  pouquíssimas  mudanças
  14. 14. Entendeu agora KIMOSABE?
  15. 15. ESTRUTURA   DA     APLICAÇÃO  
  16. 16. {      "version":  "1.0",      "name":  "Exemplo",      "launch_path":  "/index.html",      "icons":  {          "128":  "/img/icon-­‐128.png"      }   } manifest.webapp   Ícone da app Nome abaixo do ícone Chamar quem? JSON  
  17. 17. Tipos  de  aplicauvo  
  18. 18. Armazenado  mum  servidor  web.   Quando  uulizado  é  feito     um  acesso  ao  servidor     remoto  caso  o     aplicauvo  não  esteja  no  cache. Hospedado
  19. 19. Distribuídos  através  de  um  zip  que   é  copiado  na     instalação  do     aplicauvo. Empacotado
  20. 20. Permissionamento
  21. 21. Normal {      "version":  "1.0",      "name":  "Exemplo",      "launch_path":  "/index.html",      "icons":  {          "128":  "/img/icon-­‐128.png"      }   }
  22. 22. Privilegiada …   "type":  "privileged",   "permissions":  {                "contacts":  {                                "descripuon":  "msg",                                "access":  "readcreate"                }   }   …
  23. 23. Ceruficada {      "version":  "1.0",      "name":  “Exemplo",      "type":"cerufied",      "launch_path":  "/index.html",      "icons":  {          "128":  "/img/icon-­‐128.png"      }   }
  24. 24. Como   começar?
  25. 25. Simulador
  26. 26. •Instalação   como   plugin   do   Firefox   ! ! •Inicia  em  aprox.  5  segundos   ! ! •Rápido,  mesmo  em  
 máquinas  modestas hNps://|p.mozilla.org/pub/mozilla.org/labs/fxos-­‐simulator
  27. 27. Tudo  uma   maravilha  né?   Porém…
  28. 28. Firefox  OS Aplicauvo  é  themeless
  29. 29. Firefox  OS Não  é  responsivo   por  padrão
  30. 30. Firefox  OS Manipulação  de   DOM
  31. 31. Firefox  OS getbootstrap.com angular.org Bootstrap  mobile  first,    Media  Query,       Fluid  Grid,  Responsive  Images  …                              Todas  boas  práucas  que  o   desenvolvedor  front-­‐end  deveria  saber
  32. 32. Firefox  OS SHOW ME THE SOURCE YOU MUST

×