Mobile Web e HTML5

736 views

Published on

Breve tutorial sobre Mobile Web e HTML5 no CONIP 2013 em São Paulo - 20 de agosto de 2013

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

  • Be the first to like this

No Downloads
Views
Total views
736
On SlideShare
0
From Embeds
0
Number of Embeds
356
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web e HTML5

  1. 1. HTML5 e Mobile Web Reinaldo Ferraz – W3C Brasil
  2. 2. Um pouco do W3C
  3. 3. O W3C no Brasil
  4. 4. 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)
  5. 5. Web em 1989 Passado http://www.w3.org/History/1989/proposal.html
  6. 6. Web em 1989 Passado http://www.w3.org/History/1989/proposal.html
  7. 7. Web em 1989 Passado http://www.w3.org/History/1989/proposal.html
  8. 8. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Web e W3C
  9. 9. 10 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 24 anos) – http://www.w3.org/History/1989/proposal.html – (URI + HTTP + HTML) • o W3C em 1994 (há 19 anos) – 01/10/1994 no MIT, Laboratório de Ciência da Computação
  10. 10. http://web.archive.org/web/19961227091242/http://www19.w3.org/ Web e W3C
  11. 11. http://www.w3.org/ Web e W3C
  12. 12. 13 HTML5 - Futuro da Web Futuro da Web – HTML 5 HTML 5 [HyperText Markup Language]
  13. 13. 14 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 22 anos) – http://www.w3.org/History/1989/proposal.html – (URI + HTTP + HTML) • o W3C em 1994 (há17 anos) – 01/10/1994 no MIT, Laboratório de Ciência da Computação • Web Semântica – 1a. Conferência Internacional WWW – 25 a 27/05/1994 – http://www.w3.org/Talks/WWW94Tim/ – 22ª Conferência – Rio de Janeiro - 2013
  14. 14. http://www.w3.org/Talks/WWW94Tim// Web e W3C
  15. 15. http://www2012.org/ Web e W3C
  16. 16. Porque padrões abertos?
  17. 17. 26 HTML5 - Futuro da Web Web Browsers Motores de busca A B C D HTML HTML HTML HTML hyper links hyper links hyper links HTTP
  18. 18. 27 HTML5 - Futuro da Web RDF + HTML5 URI Web browsers dados linkados Motores de busca A B C D link de dados Mashups de dados linkados dados dados dados dados dados dados dados dados E dados dados link de dados link de dados link de dados HTTP HTTP
  19. 19. 29 HTML5 - Futuro da Web WEB 2001
  20. 20. 30 HTML5 - Futuro da Web WEB 2011
  21. 21. 31 HTML5 - Futuro da Web
  22. 22. HTML4 – XHTML – HTML5 HTML5 - Futuro da Web
  23. 23. 33 HTML5 - Futuro da Web Futuro da Web - HTML5 1991 – html tag – Tim Berners Lee 1994 – HTML 2 - já incluia tag <img> 1997 – HTML 3.2 1999 – HTML 4.01 2000 – XHTML 1.0 2001 – XHTML 1.1 – CSS 20... – Ian Hickson (Opera) propõe estender HTML: Web Forms 2.0, Web Apps 1.0 2004 – Apple, Mozilla e Opera criam WHAT WG (Web Hypertext Application Technology Working Group) 2007 – W3C retorna HTML Working Group 2009 – W3C descontinua XHTML 2010-2011 – Apple, Google, Microsoft, Mozilla e Opera implementam HTML5 HTML 5 [HyperText Markup Language]
  24. 24. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html Futuro da Web - HTML5
  25. 25. http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html Futuro da Web - HTML5
  26. 26. http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html Futuro da Web - HTML5
  27. 27. Futuro da Web - HTML5 3 grandes atores da web
  28. 28. 38 HTML5 - Futuro da Web Futuro da Web - HTML5
  29. 29. 40 HTML5 - Futuro da Web Futuro da Web - HTML5 Html5test.com
  30. 30. 41 HTML5 - Futuro da Web Futuro da Web - HTML5 Exemplos
  31. 31. Futuro
  32. 32. 43 HTML5 - Futuro da Web Futuro da Web - HTML5
  33. 33. Mobile Web
  34. 34. Mobile Web
  35. 35. http://www.w3.org/2010/09/MWABP/mwabp.pdf
  36. 36. Concepção de flexibilidade
  37. 37. Relembre os princípios da Web
  38. 38. Poupe a rede
  39. 39. Explore características específicas de dispositivos móveis
  40. 40. Otimize o tempo de resposta
  41. 41. Deixe os usuários livres
  42. 42. 55 Um pouco de código
  43. 43. 56 DOCTYPE
  44. 44. 57 HTML5 - Futuro da Web 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">
  45. 45. 58 HTML5 - Futuro da Web <!DOCTYPE html>
  46. 46. Formulários
  47. 47. <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);}
  48. 48. <input type="date">
  49. 49. <input type=datetime>, <input type=month>, <input type=week>, <input type=time>, <input type=datetime-local> Correm o risco de ficar fora da especificação final.
  50. 50. <input type=“email”> <input type=“url”> <input type=“tel”>
  51. 51. Exemplo http://robertnyman.com/html5/forms/input-types.html
  52. 52. Exemplo http://robertnyman.com/html5/forms/attributes.html
  53. 53. <video controls=“controls” autoplay=“autoplay” > <source src=“video.OGV” type=“video/ogg”> <source src=“video.webm" type="video/webm"> <source src=“video.MP4” type=“video/mp4”> </video>
  54. 54. http://caniuse.com/#search=video
  55. 55. Exemplo http://www.w3.org/2009/02/ThisIsCoffee.html
  56. 56. Exemplo http://conferenciaweb.w3c.br/2012/luli.htm
  57. 57. Exemplo http://html5demos.com/geo
  58. 58. Exemplo http://html5demos.com/offline
  59. 59. @media all and (min-width:500px) { … } @media (min-width:500px) { … }
  60. 60. Exemplo http://www.w3c.br
  61. 61. Browsers desktop http://html5test.com/
  62. 62. Browsers mobile http://html5test.com/
  63. 63. E o que ficou de fora do HTML5?
  64. 64. abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing, classid, clear, code, codetype, color, compact, frameborder, height, hspace, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign, valuetype, version, vlink, vspace, width Futuro da Web - HTML5
  65. 65. abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing, classid, clear, code, codetype, color, compact, frameborder, height, hspace, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign, valuetype, version, vlink, vspace, width Futuro da Web - HTML5
  66. 66. Prefixos -webkit- -moz-
  67. 67. Background #example1 { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; }
  68. 68. Exemplo http://www.css3.info/preview/multiple-backgrounds/
  69. 69. Gradiente
  70. 70. Bordas arredondadas
  71. 71. Exemplo http://border-radius.com/
  72. 72. Box Shadow
  73. 73. Exemplo http://css3gen.com/box-shadow/
  74. 74. CSS Sprites
  75. 75. 10 Dicas rápidas para desenvolvimento web mobile Um resumo baseado em http://mobilewebbestpractices.com
  76. 76. Saiba quando usar um framework
  77. 77. Não reduza o tamanho do seu site do desktop
  78. 78. Utilize a estratégia de Mobile First
  79. 79. Estruturação do conteúdo é importante
  80. 80. Desenvolva para múltiplas formas de entrada e navegação
  81. 81. Mantenha os formulários simples
  82. 82. Proporcione link para o site completo
  83. 83. Use Feature-detection
  84. 84. Otimize performance http://browserdiet.com/pt/
  85. 85. Use Emuladores para testes http://www.mobilexweb.com/emulators
  86. 86. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz

×