Responsividade e html5

342 visualizações

Publicada em

Palestra dada no Conexão KingHost 2015 sobre responsividade, HTML5 e o universo multiplataforma de desenvolvimento mobile. Os assuntos abordados foram:

- Responsividade - feel faster - adaptação os diversos devices
- Sites responsivos, uma solução temporária para o crescimento mobile
- Adaptação
- Atomic Design
- Frameworks
- Bootstrap
- Mobile First
- Necessidade de repensar o design focado em Mobile
- Simplicidade
- Diferença na prática (pequeno trecho)
- Fluxo do desenvolvimento
- Fluidez
- Unidades relativas
- Explosão das App's
- App pra tudo
- One API to rule them all
- Web Mobile x App
- Presença de mercado
- Link Building
- Apps HTML5
- Integração maior com o Browser
- Integração simples como número de telefone
- API's
- Geolocation
- Image upload
- LocalStorage
- Battery Status
- WebSocket
- Além da responsividade
- Perfomance
- Acessibilidade
- Dispositivos “desconhecidos”
- Funções do aparelho
- Javascript - aprimorando o comportamento
- Exemplo prático de um Carrossel Touch
- Exemplos multiuso
- Trello

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Responsividade e html5

  1. 1. Responsividade e HTML Alexandre Magno
  2. 2. Quem sou eu?
  3. 3. FISLFront ins QCon Desenvolvedor Web
  4. 4. Livro
  5. 5. ● Como escrever sites responsivos com o Bootstrap usando Mobile First ● O que o Bootstrap ganhou sendo Mobile First ● Processo de construção de um site Mobile First com o Bootstrap ● Exemplo real de como pensar Mobile First
  6. 6. Responsividade? Porquê?
  7. 7. 1/3 de usuários de internet nos EUA usam o celular como primeiro dispositivo de acesso a internet
  8. 8. Recomendações do Google
  9. 9. Responsividade ● Responsividade ○ Técnicas que não fisicamente aumentam a habilidade da sua app de responder ○ Não temos controle da velocidade de conexão do usuário ● Responsividade (Responsive web design) ○ Se adaptar as diferentes telas
  10. 10. Responsividade - percepção
  11. 11. Responsividade - adaptação RWD ::: Fluid ::: Mobile First
  12. 12. Além da responsividade
  13. 13. Mobile First RWDPE
  14. 14. Conteúdo e disposição ?
  15. 15. content first
  16. 16. codigo desktop first vs mobile first
  17. 17. backend
  18. 18. <meta name="viewport" content=" width=device-width, initial-scale=1"/>
  19. 19. <? if($device->isIphone()) { $html->render(‘Im a phone!’); } ?>
  20. 20. BREAKPOINTS
  21. 21. Modularidade
  22. 22. Atomic Design
  23. 23. Bootstrap
  24. 24. responsividade não é só design...
  25. 25. apps híbridas x html5
  26. 26. Por que Web?
  27. 27. A internet é feita de links
  28. 28. E links levam para browsers
  29. 29. Por que nativo?
  30. 30. O celular é nossa extensão
  31. 31. Mas...
  32. 32. Como ser multiplataforma?
  33. 33. Trello
  34. 34. API e Device API
  35. 35. Device API
  36. 36. HTML5
  37. 37. <p> To make a booking, call <a href="tel:+13174562564"> 317-456-2564 </a> </p> Solução simples e elegante
  38. 38. GEOLOCATION navigator.geolocation.getCurrentPosition(function(position) { do_something(position.coords.latitude, position.coords. longitude); });
  39. 39. var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; function updateBatteryStatus() { console.log("Status da bateria: " + battery.level * 100 + " %"); if (battery.charging) { console.log("A bateria está carregando"); } } battery.addEventListener("chargingchange", updateBatteryStatus); battery.addEventListener("levelchange", updateBatteryStatus); updateBatteryStatus();
  40. 40. Upload API localStorage Acelerômetro E mais...
  41. 41. content everywhere
  42. 42. venha trabalhar na Globo.com
  43. 43. venha trabalhar na Globo. com
  44. 44. @alexanmtz alexandre.zimerer alexandremagno.net github.com/alexanmtz

×