HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil

Tamanho: px

Começar a partir da página:

Download "HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil"

Juan Medina Bicalho
8 Há anos
Visualizações:

1 HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil

3 Um pouco do W3C

4 O W3C no Brasil

5 Web e W3C 5 Tim Berners-Lee criou / propôs a Web em 1989 (há 23 anos) (URI + HTTP + HTML) HTML5 - Futuro da Web

6 Web em Passado

7 Web em Passado

8 Web em Passado

9 Web e W3C

10 Web e W3C 10 Tim Berners-Lee criou / propôs a Web em 1989 (há 24 anos) (URI + HTTP + HTML) o W3C em 1994 (há 19 anos) 01/10/1994 no MIT, Laboratório de Ciência da Computação HTML5 - Futuro da Web

11 Web e W3C

12 Web e W3C

13 Futuro da Web HTML 5 13 HTML 5 [HyperText Markup Language] HTML5 - Futuro da Web

14 Web e W3C 14 Tim Berners-Lee criou / propôs a Web em 1989 (há 22 anos) (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/ ª Conferência Rio de Janeiro HTML5 - Futuro da Web

15 Web e W3C

16 Web e W3C

20 Porque padrões abertos?

26 26 Web Browsers Motores de busca HTTP HTML HTML HTML HTML hyper links hyper links hyper links A B C D HTML5 - Futuro da Web

27 27 Web browsers dados linkados Motores de busca Mashups de dados linkados HTTP HTTP RDF + HTML5 dados dados dados dados dados dados dados dados dados dados URI link de dados link de dados link de dados link de dados A B C D E HTML5 - Futuro da Web

29 29 WEB 2001 HTML5 - Futuro da Web

30 30 WEB 2011 HTML5 - Futuro da Web

31 HTML5 - Futuro da Web 31

32 HTML5 - Futuro da Web HTML4 XHTML HTML5

33 Futuro da Web - HTML5 33 HTML 5 [HyperText Markup Language] 1991 html tag Tim Berners Lee 1994 HTML 2 - já incluia tag <img> 1997 HTML HTML XHTML XHTML 1.1 CSS Ian Hickson (Opera) propõe estender HTML: Web Forms 2.0, Web Apps Apple, Mozilla e Opera criam WHAT WG (Web Hypertext Application Technology Working Group) 2007 W3C retorna HTML Working Group 2009 W3C descontinua XHTML Apple, Google, Microsoft, Mozilla e Opera implementam HTML5 HTML5 - Futuro da Web

34 Futuro da Web - HTML5

35 Futuro da Web - HTML5

36 Futuro da Web - HTML5

37 Futuro da Web - HTML5 3 grandes atores da web

38 Futuro da Web - HTML5 38 HTML5 - Futuro da Web

40 Futuro da Web - HTML5 40 Html5test.com HTML5 - Futuro da Web

41 Futuro da Web - HTML5 41 Exemplos HTML5 - Futuro da Web

42 Futuro

43 Futuro da Web - HTML5 43 HTML5 - Futuro da Web

45 Mobile Web

46 Mobile Web

49 Concepção de flexibilidade

50 Relembre os princípios da Web

51 Poupe a rede

52 Explore características específicas de dispositivos móveis

53 Otimize o tempo de resposta

54 Deixe os usuários livres

55 Um pouco de código 55

56 56 DOCTYPE

57 HTML5 - Futuro da Web Doctype: HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 57

58 HTML5 - Futuro da Web <!DOCTYPE html> 58

61 Formulários

<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");

63 <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);}

64 <input type="date">

65 <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.

66 <input type= > <input type= url > <input type= tel >

68 Exemplo

69 Exemplo

71 <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>

73 Exemplo

74 Exemplo

75 Exemplo

77 Exemplo

81 @media all and (min-width:500px) { (min-width:500px) { }

82 Exemplo

84 Browsers desktop

85 Browsers mobile

87 E o que ficou de fora do HTML5?

88 Futuro da Web - HTML5 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

89 Futuro da Web - HTML5 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

91 Prefixos -webkit- -moz-

92 Background #example1 { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; }

93 Exemplo

95 Gradiente

96 Bordas arredondadas

97 Exemplo

98 Box Shadow

99 Exemplo

100

101 CSS Sprites

102

103 10 Dicas rápidas para desenvolvimento web mobile Um resumo baseado em

104 Saiba quando usar um framework

105 Não reduza o tamanho do seu site do desktop

106 Utilize a estratégia de Mobile First

107 Estruturação do conteúdo é importante

108 Desenvolva para múltiplas formas de entrada e navegação

109 Mantenha os formulários simples

110 Proporcione link para o site completo

111 Use Feature-detection

112 Otimize performance

113 Use Emuladores para testes

114 Obrigado! Reinaldo Ferraz W3C Escritório Brasil

Documentos relacionados

HTML5 O Futuro da Web Multimídia sem limites Senac Santo André 05 de outubro de 2011 Reinaldo Ferraz W3C.br

HTML5 O Futuro da Web Multimídia sem limites Senac Santo André 05 de outubro de 2011 Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, que conta com: organizações filiadas, uma equipe