HTML5, Mobile Web e além
Computer on the Beach
Março - 2015
Reinaldo Ferraz
W3C Brasil
Mobile Web
A Web é uma ótima
plataforma para
desenvolvimento de software
10 Dicas rápidas para
desenvolvimento web mobile
Um resumo baseado em
http://mobilewebbestpractices.com
Saiba quando usar um framework
Não reduza o tamanho do seu site do desktop
Utilize a estratégia de Mobile First
Estruturação do conteúdo é importante
Desenvolva para múltiplas formas de entrada e
navegação
Mantenha os formulários simples
Proporcione link para o site completo
Use Feature-detection
Otimize performance
http://browserdiet.com/pt/
Use Emuladores para testes
http://www.mobilexweb.com/emulators
Markup básico
e mobile web
23
DOCTYPE
24
Doctype:
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTM...
25
<!DOCTYPE html>
Formulários
<SCRIPT LANGUAGE="JavaScript">
var now = new Date();
var month_array = new
Array("Janeiro","Fevereiro","Março","Abril","Ma...
<input type="date">
<input type=“email”>
<input type=“url”>
<input type=“tel”>
<input type=“text” placeholder=“texto”>
<input type=“url” required>
<input type=“range”>
<input type=“color”>
Elementos multimídia
@media all and (min-width:500px)
{ … }
@media (min-width:500px)
{ … }
@media (orientation: portrait)
{ ...}
@media (orientation: landscape)
{ ...}
CSS Sprites
.logo01, .logo02, .logo03 {
background-image: url('../images/logos.png');
background-repeat: no-repeat;
}
.logo01 {
height...
Acessibilidade e Mobile Web
<img src="img-slides/w3clogo.png" alt="Logo
do W3C">
<div class="foto" role="img" aria-label="Logo
do W3C"></div>
Contraste
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"
APIs para a Web móvel
Vibration API
A especificação tem como objetivo definir uma API
que fornece acesso ao mecanismo de vibração do
dispositivo...
Ambient Light Events
Define um meio para tratar os eventos que
correspondem à detecção de luz por sensores. A
documentação...
HTML Media Capture
O documento define uma extensão do HTML que
facilita o acesso do usuário ao mecanismo de
captura de míd...
Battery Status API
A especificação de status da bateria define um meio
para os desenvolvedores web determinarem
programati...
Geolocation API
Velha conhecida dos desenvolvedores, essa
documentação define uma API que fornece acesso
via script para i...
Mobile Web pode ser o
novo toca fitas de carro
A Internet das Coisas
tem um enorme potencial.
http://share.cisco.com/internet-of-things.html
E estão cada vez mais
presentes na nossa vida
Muito além dos sensores
Web das Coisas
A Web das Coisas é
essencialmente sobre o papel das
tecnologias da Web para facilitar o
desenvolvimento de aplicações e
se...
Camada de aplicação e serviços
Padronização é a chave da
Internet das Coisas
Garantir que os padrões W3C sejam
implementados “royalty free”,
incentivando a inovação e a
disponibilidade da comunidade ...
Data Formats
Interface
Definitions
Security Privacy
...
http://www.w3.org/community/wot/
http://www.w3.org/WoT/
http://www.w3.org/standards/semanticweb/data
http://www.w3.org/Privacy/
http://www.w3.org/Security/
http://www.w3.org/auto/wg/
http://www.w3.org/community/web-bluetooth/
Alguns exemplos
http://www.harvestgeek.com/
http://www.streetline.com/parking-analytics/
http://www.onfarm.com/
Eternas preocupações
Privacidade
Segurança
As máquinas vão dominar o mundo
Participe da construção da
Web dentro do W3C
Tks
reinaldo@nic.br @reinaldoferraz
w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
Próximos SlideShares
Carregando em…5
×

HTML5, Mobile Web e além - Computer on the beach 2015

682 visualizações

Publicada em

Palestra feita no Computer on the beach 2015 sobre HTML5, Mobile web e Web das coisas.

Publicada em: Internet
  • Seja o primeiro a comentar

HTML5, Mobile Web e além - Computer on the beach 2015

  1. 1. HTML5, Mobile Web e além Computer on the Beach Março - 2015 Reinaldo Ferraz W3C Brasil
  2. 2. Mobile Web
  3. 3. A Web é uma ótima plataforma para desenvolvimento de software
  4. 4. 10 Dicas rápidas para desenvolvimento web mobile Um resumo baseado em http://mobilewebbestpractices.com
  5. 5. Saiba quando usar um framework
  6. 6. Não reduza o tamanho do seu site do desktop
  7. 7. Utilize a estratégia de Mobile First
  8. 8. Estruturação do conteúdo é importante
  9. 9. Desenvolva para múltiplas formas de entrada e navegação
  10. 10. Mantenha os formulários simples
  11. 11. Proporcione link para o site completo
  12. 12. Use Feature-detection
  13. 13. Otimize performance http://browserdiet.com/pt/
  14. 14. Use Emuladores para testes http://www.mobilexweb.com/emulators
  15. 15. Markup básico e mobile web
  16. 16. 23 DOCTYPE
  17. 17. 24 Doctype: HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. 18. 25 <!DOCTYPE html>
  19. 19. Formulários
  20. 20. <SCRIPT LANGUAGE="JavaScript"> var now = new Date(); var month_array = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Out ubro","Novembro","Dezembro"); document.write("<form name=date_list><table bgcolor=silver><tr><td>"); document.write("<select name=month onchange=change_month(this.options.selectedIndex)>"); for(i=0;i<month_array.length;i++) { if (now.getMonth() != i) {document.write ("<option value="+i+">"+month_array[i]);} else {document.write ("<option value="+i+" selected>"+month_array[i]);} } document.write("</select>"); document.write("</td><td>"); document.write ("<select name=year onchange=change_year(this.options[this.options.selectedIndex])>"); for(i=1950;i<3000;i++) { if (now.getYear() != i) {document.write("<option value="+i+">"+i);} else {document.write("<option value="+i+" selected>"+i);} }
  21. 21. <input type="date">
  22. 22. <input type=“email”> <input type=“url”> <input type=“tel”>
  23. 23. <input type=“text” placeholder=“texto”> <input type=“url” required> <input type=“range”>
  24. 24. <input type=“color”>
  25. 25. Elementos multimídia
  26. 26. @media all and (min-width:500px) { … } @media (min-width:500px) { … }
  27. 27. @media (orientation: portrait) { ...} @media (orientation: landscape) { ...}
  28. 28. CSS Sprites
  29. 29. .logo01, .logo02, .logo03 { background-image: url('../images/logos.png'); background-repeat: no-repeat; } .logo01 { height: 100px; weight: 60px; background-position: -5px -5px; } .logo02 { height: 122px; weight: 60px; background-position: -5px -143px; } .logo03 { height: 145px; weight: 60px; background-position: -5px -288px; }
  30. 30. Acessibilidade e Mobile Web
  31. 31. <img src="img-slides/w3clogo.png" alt="Logo do W3C"> <div class="foto" role="img" aria-label="Logo do W3C"></div>
  32. 32. Contraste
  33. 33. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  34. 34. APIs para a Web móvel
  35. 35. Vibration API A especificação tem como objetivo definir uma API que fornece acesso ao mecanismo de vibração do dispositivo. A vibração é uma forma de feedback tátil e que pode ser controlada e manipulada conforme a necessidade. Em setembro de 2014, o status dessa documentação dentro do W3C era “W3C Candidate Recomendation”. http://www.w3.org/TR/2014/CR-vibration-20140909/
  36. 36. Ambient Light Events Define um meio para tratar os eventos que correspondem à detecção de luz por sensores. A documentação aborda o viés técnico e questões interessantes como a preocupação com segurança e considerações sobre privacidade. Também é uma “W3C Candidate Recomendation”. http://www.w3.org/TR/2013/CR-ambient-light- 20131001/
  37. 37. HTML Media Capture O documento define uma extensão do HTML que facilita o acesso do usuário ao mecanismo de captura de mídia de um dispositivo, como uma câmera ou um microfone, utilizando simples formulários. Isso pode facilitar muito aquela selfie para uma aplicação de compartilhamento de fotos, por exemplo. É importante não confundir essa API com a especificação Media Capture and Streams, que possibilita uma manipulação mais complexa e refinada do acesso à câmera e microfone do usuário. http://www.w3.org/TR/2014/CR-html-media-capture- 20140909/
  38. 38. Battery Status API A especificação de status da bateria define um meio para os desenvolvedores web determinarem programaticamente o estado da bateria do dispositivo que hospeda a aplicação. Sabendo o estado da bateria, os desenvolvedores são capazes de criar conteúdo web e aplicações que são eficientes em termos de energia, levando a uma melhor experiência do usuário. http://www.w3.org/TR/2012/CR-battery-status- 20120508/
  39. 39. Geolocation API Velha conhecida dos desenvolvedores, essa documentação define uma API que fornece acesso via script para informações de localização geográfica associada ao dispositivo. A documentação sobre geolocalização é uma Recomendação do W3C desde outubro de 2013. Esse documento é o único da lista que não foi criado pelo Device APIs Working Group, e sim pelo W3C Geolocation Working Group. http://www.w3.org/TR/geolocation-API/
  40. 40. Mobile Web pode ser o novo toca fitas de carro
  41. 41. A Internet das Coisas tem um enorme potencial.
  42. 42. http://share.cisco.com/internet-of-things.html
  43. 43. E estão cada vez mais presentes na nossa vida
  44. 44. Muito além dos sensores
  45. 45. Web das Coisas
  46. 46. A Web das Coisas é essencialmente sobre o papel das tecnologias da Web para facilitar o desenvolvimento de aplicações e serviços para as coisas e sua representação virtual http://www.w3.org/community/wot/wiki/Main_Page
  47. 47. Camada de aplicação e serviços
  48. 48. Padronização é a chave da Internet das Coisas
  49. 49. Garantir que os padrões W3C sejam implementados “royalty free”, incentivando a inovação e a disponibilidade da comunidade de desenvolvedores Web. http://www.w3.org/community/wot/wiki/Main_Page
  50. 50. Data Formats Interface Definitions Security Privacy ...
  51. 51. http://www.w3.org/community/wot/
  52. 52. http://www.w3.org/WoT/
  53. 53. http://www.w3.org/standards/semanticweb/data
  54. 54. http://www.w3.org/Privacy/
  55. 55. http://www.w3.org/Security/
  56. 56. http://www.w3.org/auto/wg/
  57. 57. http://www.w3.org/community/web-bluetooth/
  58. 58. Alguns exemplos
  59. 59. http://www.harvestgeek.com/
  60. 60. http://www.streetline.com/parking-analytics/
  61. 61. http://www.onfarm.com/
  62. 62. Eternas preocupações
  63. 63. Privacidade
  64. 64. Segurança
  65. 65. As máquinas vão dominar o mundo
  66. 66. Participe da construção da Web dentro do W3C
  67. 67. Tks reinaldo@nic.br @reinaldoferraz w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil

×