114
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil

HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

  • Upload
    hamien

  • View
    255

  • Download
    0

Embed Size (px)

Citation preview

Page 1: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

HTML5 e Mobile Web Reinaldo Ferraz – W3C Brasil

Page 2: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 3: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Um pouco do W3C

Page 4: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

O W3C no Brasil

Page 5: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

5

HTML5 - Futuro da Web

Web e W3C

Tim Berners-Lee criou / propôs

• a Web em 1989 (há 23 anos)

– (URI + HTTP + HTML)

Page 6: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Web em 1989

Passado

http://www.w3.org/History/1989/proposal.html

Page 7: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Web em 1989

Passado

http://www.w3.org/History/1989/proposal.html

Page 8: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Web em 1989

Passado

http://www.w3.org/History/1989/proposal.html

Page 9: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Web e W3C

Page 10: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 11: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://web.archive.org/web/19961227091242/http://www19.w3.org/

Web e W3C

Page 12: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://www.w3.org/

Web e W3C

Page 13: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

13

HTML5 - Futuro da Web

Futuro da Web – HTML 5

HTML 5 [HyperText Markup Language]

Page 14: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 15: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://www.w3.org/Talks/WWW94Tim//

Web e W3C

Page 16: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://www2012.org/

Web e W3C

Page 17: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 18: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 19: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 20: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Porque padrões abertos?

Page 21: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 22: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 23: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 24: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 25: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 26: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 27: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 28: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 29: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

29

HTML5 - Futuro da Web

WEB 2001

Page 30: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

30

HTML5 - Futuro da Web

WEB 2011

Page 31: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

31

HTML5 - Futuro da Web

Page 32: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

HTML4 – XHTML – HTML5

HTML5 - Futuro da Web

Page 33: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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]

Page 34: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html

Futuro da Web - HTML5

Page 35: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html

Futuro da Web - HTML5

Page 36: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html

Futuro da Web - HTML5

Page 37: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Futuro da Web - HTML5

3 grandes atores da web

Page 38: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

38

HTML5 - Futuro da Web

Futuro da Web - HTML5

Page 39: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 40: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

40

HTML5 - Futuro da Web

Futuro da Web - HTML5

Html5test.com

Page 41: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

41

HTML5 - Futuro da Web

Futuro da Web - HTML5

Exemplos

Page 42: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Futuro

Page 43: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

43

HTML5 - Futuro da Web

Futuro da Web - HTML5

Page 44: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 45: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Mobile Web

Page 46: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Mobile Web

Page 47: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 48: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://www.w3.org/2010/09/MWABP/mwabp.pdf

Page 49: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Concepção de flexibilidade

Page 50: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Relembre os princípios da Web

Page 51: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Poupe a rede

Page 52: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 53: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Otimize o tempo de resposta

Page 54: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Deixe os usuários livres

Page 55: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

55

Um pouco de código

Page 56: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

56

DOCTYPE

Page 57: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 58: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

58

HTML5 - Futuro

da Web

<!DOCTYPE html>

Page 59: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 60: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 61: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Formulários

Page 62: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 63: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

<SCRIPT LANGUAGE="JavaScript"> var now = new Date(); var month_array = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","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);} } document.write("</select></td></tr><tr><td colspan=2><center>"); document.write("<table bgcolor=white border=0 cellspacing = 0 cellpading = 0 width=100%><tr bgcolor=gray align=center>"); document.write("<td><font color=silver>S</font></td><td><font color=silver>T</td><td><font color=silver>Q</td><td><font color=silver>Q</td><td><font color=silver>S</td><td ><font color=silver>S</td><td ><font color=silver>D</td>"); document.write("</tr><tr>"); for(j=0;j<6;j++) { for(i=0;i<7;i++) { document.write("<td align=center id=d"+i+"r"+j+"></td>") } document.write("</tr>"); } document.write("</table>"); document.write("</center></from></td></tr></table>"); var show_date = new Date(); function set_cal(show_date) { begin_day = new Date (show_date.getYear(),show_date.getMonth(),1); begin_day_date = begin_day.getDay(); end_day = new Date (show_date.getYear(),show_date.getMonth()+1,1); count_day = (end_day - begin_day)/1000/60/60/24; input_table(begin_day_date,count_day); } set_cal(show_date); function input_table(begin,count) { init(); j=0; if (begin!=0){i=begin-1;}else{i=6} for (c=1;c<count+1;c++) { colum_name = eval("d"+i+"r"+j); if ((now.getDate() == c)&&(show_date.getMonth() == now.getMonth())&&(show_date.getYear() == now.getYear())) {colum_name.style.backgroundColor = "blue";colum_name.style.color = "white";}; colum_name.innerText = c; i++; if (i==7){i=0;j++;} } } function init() { for(j=0;j<6;j++) { for(i=0;i<7;i++) { colum_name = eval("d"+i+"r"+j); colum_name.innerText = "-"; colum_name.style.backgroundColor =""; colum_name.style.color =""; } } } function change_month(sel_month) { show_date = new Date(show_date.getYear(),sel_month,1); set_cal(show_date); } function change_year(sel_year) { sel_year = sel_year.value; show_date = new Date(sel_year,show_date.getMonth(),1); set_cal(show_date); } // End --> </script> <!-- Script Size: 3.64 KB -->

Page 64: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

<input type="date">

Page 66: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

<input type=“email”>

<input type=“url”>

<input type=“tel”>

Page 67: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 69: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://robertnyman.com/html5/forms/attributes.html

Page 70: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 71: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 72: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

http://caniuse.com/#search=video

Page 73: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://www.w3.org/2009/02/ThisIsCoffee.html

Page 74: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://conferenciaweb.w3c.br/2012/luli.htm

Page 75: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://html5demos.com/geo

Page 76: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 77: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://html5demos.com/offline

Page 78: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 79: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 80: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 81: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 82: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://www.w3c.br

Page 83: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 84: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Browsers desktop

http://html5test.com/

Page 85: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Browsers mobile

http://html5test.com/

Page 86: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 87: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

E o que ficou de fora do HTML5?

Page 88: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 89: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

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

Page 90: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 91: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Prefixos

-webkit-

-moz-

Page 92: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Background

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

Page 93: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://www.css3.info/preview/multiple-backgrounds/

Page 94: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 95: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Gradiente

Page 96: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Bordas arredondadas

Page 98: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Box Shadow

Page 99: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Exemplo

http://css3gen.com/box-shadow/

Page 100: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 101: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

CSS Sprites

Page 102: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web
Page 103: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

10 Dicas rápidas para

desenvolvimento web mobile

Um resumo baseado em

http://mobilewebbestpractices.com

Page 104: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Saiba quando usar um framework

Page 105: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Não reduza o tamanho do seu site do desktop

Page 106: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Utilize a estratégia de Mobile First

Page 107: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Estruturação do conteúdo é importante

Page 108: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Desenvolva para múltiplas formas de entrada e

navegação

Page 109: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Mantenha os formulários simples

Page 110: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Proporcione link para o site completo

Page 111: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Use Feature-detection

Page 112: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Otimize performance

http://browserdiet.com/pt/

Page 113: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Use Emuladores para testes

http://www.mobilexweb.com/emulators

Page 114: HTML5 e Mobile Web - w3c.br · HTML HTML HTML HTML hyper links hyper links hyper links HTTP . 27 HTML5 - Futuro da Web ... CSS Sprites . 10 Dicas rápidas para desenvolvimento web

Obrigado!

Reinaldo Ferraz W3C Escritório Brasil

www.w3c.br Twitter: @w3cbrasil

[email protected]

Twitter: @reinaldoferraz