HTML5 & CSS3                             Jonas Keizo Hirata                                      TREINAMENTOSWednesday, Ma...
TREINAMENTOS          O QUE VEREMOS?         Uma breve história do HTML         Estrutura de um documento HTML5         Co...
TREINAMENTOS          O QUE NÃO VEREMOS?     Código e mais código     Explicação detalhada de uso das APIs     Exemplos de...
TREINAMENTOS           HTML5: UM POUCO DE HISTÓRIA   1998: HTML 4.01   2000: XHTML                  Transitional          ...
TREINAMENTOS          HTML5: UM POUCO DE HISTÓRIA   2006: W3C cai na real (XHTML 2.0)                      W3C            ...
TREINAMENTOS                HTML5: ESTRUTURA   Vamos começar pelo começo e por aquilo que ninguém lembra   de cabeça como ...
TREINAMENTOS                HTML5: ESTRUTURA   Vamos começar pelo começo e por aquilo que ninguém lembra   de cabeça como ...
TREINAMENTOS          HTML5: ESTRUTURA   Vamos começar pelo começo e por aquilo que ninguém lembra   de cabeça como se ecr...
TREINAMENTOS           HTML5: ESTRUTURA   Outro elemento importante em qualquer documento HTML   (HTML 4.01/XHTML/HTML5): ...
TREINAMENTOS           HTML5: ESTRUTURA   Outro elemento importante em qualquer documento HTML   (HTML 4.01/XHTML/HTML5): ...
TREINAMENTOS           HTML5: ESTRUTURA   Outro elemento importante em qualquer documento HTML   (HTML 4.01/XHTML/HTML5): ...
TREINAMENTOS            HTML5: ESTRUTURA   Hora de juntar tudo...   <!doctype html>   <html lang="pt-BR">     <head>      ...
TREINAMENTOS          HTML5: ESTRUTURA   E aquele negócio de SGML e XML?Wednesday, May 25, 2011
TREINAMENTOS          HTML5: ESTRUTURA   E aquele negócio de SGML e XML?                   HEIN?!Wednesday, May 25, 2011
TREINAMENTOS           HTML5: ESTRUTURA   E aquele negócio de SGML e XML?       <!doctype html>              <html xmlns="...
TREINAMENTOS                      HTML5: ESTRUTURA   E aquele negócio de SGML e XML?       <!doctype html>                ...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Como um blog se parece?Wednesday, May 25, 2011
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Como um blog se parece? Um possível wireframe seria...                ...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   E em HTML, como ficaria?Wednesday, May 25, 2011
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   E em HTML, como ficaria? Provavelmente assim...   <div id="header">    ...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Apenas para visualizarmos o HTML em nosso wireframe...                ...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG               Que diabos é esse tal                    <div>?!Wednesday,...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   De acordo com a especificação do HTML 4.01:    “The DIV and SPAN elemen...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   De acordo com a especificação do HTML 4.01:    “The DIV and SPAN elemen...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Uma palavrinha sobre semântica HTML...   A semântica HTML é o uso da l...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Uma palavrinha sobre semântica HTML...   A semântica HTML é o uso da l...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG                  OK, mas e aquele tal                       <div>?!Wedne...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Apenas para visualizarmos o HTML em nosso wireframe...                ...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG     O elemento <div> não possui significado e, por padrão,               ...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG                          Voltando ao nosso blog...Wednesday, May 25, 2011
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Não seria perfeito se fosse assim?                                   <...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG                            Por quê?Wednesday, May 25, 2011
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG                            Por quê?   Dois motivos bem simples:   1 - ob...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Legal... e daí?Wednesday, May 25, 2011
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Legal... e daí? É aí que entre o HTML5!   Um dos objetivos do HTML5 é ...
TREINAMENTOS                HTML5: ESTRUTURA   Vamos ver como poderia ficar o nosso blog em HTML5:   <header>     <h1>Meu B...
TREINAMENTOS          ESTRUTURA BÁSICA DE UM BLOG   Apenas para visualizarmos o HTML5 em nosso wireframe...               ...
TREINAMENTOS                  UM POUCO DE ESTATÍSTICA         Analysis of Variance                            ___        2...
UM POUCO DE ESTATÍSTICA                                                                                               ?!  ...
TREINAMENTOS                  UM POUCO DE ESTATÍSTICA         Analysis of Variance                            ___        2...
TREINAMENTOS              UM POUCO DE ESTATÍSTICA                          Valores populares para o atributo id           ...
TREINAMENTOS                UM POUCO DE ESTATÍSTICA                          Valores populares para o atributo class      ...
TREINAMENTOS          UM POUCO DE ESTATÍSTICA          Coincidência alguns desses nomes serem os         mesmos que os uti...
TREINAMENTOS          UM POUCO DE ESTATÍSTICA          Coincidência alguns desses nomes serem os         mesmos que os uti...
TREINAMENTOS          UM POUCO DE ESTATÍSTICA   Lembra que eu disse que o processo de especificação do   HTML5 era diferent...
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   De marcação:   <article>                      <nav>   <aside>              ...
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   De marcação:   <article>                      <nav>   <aside>              ...
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   Mídia:   <audio>   <video>                          Safari 5.0.5   <source>...
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   Gráfico:   <canvas>Wednesday, May 25, 2011
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   Gráfico:                // Get the canvas element.                          ...
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   Gráfico:   <canvas>                                Bibliotecas para manipula...
TREINAMENTOS          HTML5: NOVOS ELEMENTOS   Formulário:   <datalist>   <keygen>   <output>Wednesday, May 25, 2011
TREINAMENTOS          HTML5: ELEMENTOS REDEFINIDOS   <ol>   <dl>   <cite>   <address>   <em>, <i>   <strong>, <b>   <hr>  ...
TREINAMENTOS          HTML5: ELEMENTOS REDEFINIDOS   <input type=”TIPO”>   button                                     pass...
TREINAMENTOS          HTML5: ELEMENTOS REDEFINIDOS   <input>     Alguns dos novos atributos para o <input>:     list     a...
TREINAMENTOS          HTML5: ELEMENTOS REDEFINIDOS   <input>     Alguns dos novos atributos para o <input>:     list     a...
TREINAMENTOS          HTML5: ATRIBUTOS GLOBAIS   contenteditable                                   setAttribute()   data-*...
TREINAMENTOS          HTML5: ARMAZENAMENTO   Hoje em dia, como armazenamos dados localmente   através de um documento HTML...
TREINAMENTOS          HTML5: ARMAZENAMENTO   Hoje em dia, como armazenamos dados localmente   através de um documento HTML...
TREINAMENTOS                 HTML5: ARMAZENAMENTO   Hoje em dia, como armazenamos dados localmente   através de um documen...
TREINAMENTOS          HTML5: ARMAZENAMENTO   Quais as opções do HTML5?             COOKIES             Web Storage        ...
TREINAMENTOS          HORA DE DAR UMA BROCHADA     E aí, já posso sair usando o HTML5?!                                Sim...
TREINAMENTOS          HORA DE DAR UMA BROCHADA     E aí, já posso sair usando o HTML5?!                          Sim... e ...
TREINAMENTOS          HORA DE DAR UMA BROCHADA     E aí, já posso sair usando o HTML5?!                          Sim... e ...
TREINAMENTOS                CSS3   Temos vontade de matar o designer quando ele pede para...Wednesday, May 25, 2011
TREINAMENTOS                     CSS3   Temos vontade de matar o designer quando ele pede para...        Fazer caixinhas c...
TREINAMENTOS          CSS3: BORDAS ARREDONDADAS       1                                                       2           ...
TREINAMENTOS                       CSS3: SOMBRAS                          box-shadow: inset 5px 5px 5px #ff0000;          ...
TREINAMENTOS          CSS3: BACKGROUND GIGANTE   Qual o problema do background gigante?Wednesday, May 25, 2011
TREINAMENTOS          CSS3: BACKGROUND GIGANTE   Qual o problema do background gigante?Wednesday, May 25, 2011
TREINAMENTOS          CSS3: BACKGROUND GIGANTE   Qual o problema do background gigante?   Solução:   SVG + background-size...
TREINAMENTOS          CSS3: BACKGROUND COMPOSTO   Como resolvemos hoje o problema dos backgrounds   compostos?Wednesday, M...
TREINAMENTOS          CSS3: BACKGROUND COMPOSTO   Como resolvemos hoje o problema dos backgrounds   compostos?        <div...
TREINAMENTOS          CSS3: BACKGROUND COMPOSTO   Como resolvemos hoje o problema dos backgrounds   compostos?   Solução: ...
TREINAMENTOS          CSS3: PÁGINA ADAPTÁVEL   Como resolvemos o problema das páginas com   aparências diferentes para tam...
TREINAMENTOS          CSS3: PÁGINA ADAPTÁVEL   Como resolvemos o problema das páginas com   aparências diferentes para tam...
TREINAMENTOS          CSS3: PÁGINA ADAPTÁVEL   Como resolvemos o problema das páginas com   aparências diferentes para tam...
TREINAMENTOS          CSS3: FONTES “STYLE”   E as fontes diferentes das que não são as do padrão web?Wednesday, May 25, 2011
TREINAMENTOS          CSS3: FONTES “STYLE”   E as fontes diferentes das que não são as do padrão web?   Como era feito até...
TREINAMENTOS          CSS3: FONTES “STYLE”   E as fontes diferentes das que não são as do padrão web?   Como era feito até...
TREINAMENTOS          CSS3: FONTES “STYLE”   E as fontes diferentes das que não são as do padrão web?   Com CSS3 fica assim...
TREINAMENTOS          CSS3: FONTES “STYLE”   Padrões de formatos de fonte:   WOFF (webfonts)   TTF (Truetype)   OTF (Opent...
TREINAMENTOS          CSS3: SELETORES   Novos seletores de atributo:   E[foo^="bar"]   E[foo$="bar"]   E[foo*="bar"]Wednes...
TREINAMENTOS           CSS3: SELETORES   Seletor de “irmao” genérico:   E~F   Funciona exatamente como o E + F, porém F nã...
TREINAMENTOS           CSS3: PSEUDO-CLASSES   Novas pseudo-classes:   E:root   E:nth-child(n)   E:nth-last-child(n)   E:nt...
Wednesday, May 25, 2011
HTML5 & CSS3                                Jonas Keizo Hirata                                         TREINAMENTOS       ...
Upcoming SlideShare
Loading in...5
×

Html5 & CSS3

15,431

Published on

Apresentação sobre HTML5 e CSS3 feita pela K19. História, estrutura de um documento, exemplo e novos elementos do HTML5. Alguns dos problemas cotidianos que o CSS3 resolveu.

Published in: Technology
2 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,431
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
501
Comments
2
Likes
13
Embeds 0
No embeds

No notes for slide

Html5 & CSS3

  1. 1. HTML5 & CSS3 Jonas Keizo Hirata TREINAMENTOSWednesday, May 25, 2011
  2. 2. TREINAMENTOS O QUE VEREMOS? Uma breve história do HTML Estrutura de um documento HTML5 Comparação entre HTML4/XHTML e HTML5 Apresentar a especificação Descobrir as novas possibilidadesWednesday, May 25, 2011
  3. 3. TREINAMENTOS O QUE NÃO VEREMOS? Código e mais código Explicação detalhada de uso das APIs Exemplos de Elementos e ou APIs que não foram implementados por nenhum browser Explicações passo a passo de técnicas de como tentar tornar um browser compatível com o HTML5Wednesday, May 25, 2011
  4. 4. TREINAMENTOS HTML5: UM POUCO DE HISTÓRIA 1998: HTML 4.01 2000: XHTML Transitional Geração de desenvolvedores Strict preocupados com código Frameset válido e bem estruturado. 2002: XHTML 2.0 Quebraria a Prometia uma revolução compatibilidade com na linguagem browsers mais antigos 2004: Web Forms 2.0 X WHATWG Web Hypertext Application Technology Working Group www.whatwg.orgWednesday, May 25, 2011
  5. 5. TREINAMENTOS HTML5: UM POUCO DE HISTÓRIA 2006: W3C cai na real (XHTML 2.0) W3C WHATWG Processo de especificação totalmente diferente: aberto e empírico 2009: W3C direciona os esforços para o HTML5 2010 ~ 2011: Suporte ao HTML5 aumenta a cada release dos browsers. 2012: O mundo acaba :PWednesday, May 25, 2011
  6. 6. TREINAMENTOS HTML5: ESTRUTURA Vamos começar pelo começo e por aquilo que ninguém lembra de cabeça como se ecreve: DOCTYPE HTML 4.01 <!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"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Wednesday, May 25, 2011
  7. 7. TREINAMENTOS HTML5: ESTRUTURA Vamos começar pelo começo e por aquilo que ninguém lembra de cabeça como se ecreve: DOCTYPE HTML 4.01 <!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"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 <!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"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Wednesday, May 25, 2011
  8. 8. TREINAMENTOS HTML5: ESTRUTURA Vamos começar pelo começo e por aquilo que ninguém lembra de cabeça como se ecreve: DOCTYPE HTML5 <!doctype html>Wednesday, May 25, 2011
  9. 9. TREINAMENTOS HTML5: ESTRUTURA Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META HTML 4.01 <meta http-equiv="content-type" content="text/html;charset=UTF-8">Wednesday, May 25, 2011
  10. 10. TREINAMENTOS HTML5: ESTRUTURA Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META HTML 4.01 <meta http-equiv="content-type" content="text/html;charset=UTF-8"> XHTML <meta http-equiv="content-type" content="text/html;charset=UTF-8" />Wednesday, May 25, 2011
  11. 11. TREINAMENTOS HTML5: ESTRUTURA Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META HTML 4.01 <meta http-equiv="content-type" content="text/html;charset=UTF-8"> XHTML <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> HTML5 <meta charset="utf-8">Wednesday, May 25, 2011
  12. 12. TREINAMENTOS HTML5: ESTRUTURA Hora de juntar tudo... <!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Título da página</title> </head> <body> <!-- Conteúdo aqui --> </body> </html>Wednesday, May 25, 2011
  13. 13. TREINAMENTOS HTML5: ESTRUTURA E aquele negócio de SGML e XML?Wednesday, May 25, 2011
  14. 14. TREINAMENTOS HTML5: ESTRUTURA E aquele negócio de SGML e XML? HEIN?!Wednesday, May 25, 2011
  15. 15. TREINAMENTOS HTML5: ESTRUTURA E aquele negócio de SGML e XML? <!doctype html> <html xmlns="http://www.w3.org/ <html lang="pt-BR"> 1999/xhtml" xml:lang="pt-BR"> <head> <head> <meta charset="utf-8"> <meta charset="utf-8" /> <title>Título</title> <title>Título</title> </head> </head> <body> <body> <p>Texto simples. <p>Texto simples.</p> </body> </body> </html> </html>Wednesday, May 25, 2011
  16. 16. TREINAMENTOS HTML5: ESTRUTURA E aquele negócio de SGML e XML? <!doctype html> <html xmlns="http://www.w3.org/ <html lang="pt-BR"> 1999/xhtml" xml:lang="pt-BR"> <head> <head> <meta charset="utf-8"> <meta charset="utf-8" /> <title>Título</title> <title>Título</title> </head> </head> <body> <body> <p>Texto simples. <p>Texto simples.</p> </body> </body> </html> </html> text/html application/xhtml+xml HTML XML Página Parser/Serializer Parser/SerializerWednesday, May 25, 2011
  17. 17. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Como um blog se parece?Wednesday, May 25, 2011
  18. 18. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Como um blog se parece? Um possível wireframe seria... Cabeçalho (header) Post Menu lateral (sidebar) Post Rodapé (footer)Wednesday, May 25, 2011
  19. 19. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG E em HTML, como ficaria?Wednesday, May 25, 2011
  20. 20. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG E em HTML, como ficaria? Provavelmente assim... <div id="header"> <h1>Meu BLOG</h1> </div> <div id="sidebar"> <ul> <li><a href="maio-2011.html">Maio 2011</a></li> <li><a href="abril-2011.html">Abril 2011</a></li> <li><a href="marco-2011.html">Marco 2011</a></li> <li><a href="fevereiro-2011.html">Fevereiro 2011</a></li> <li><a href="janeiro-2011.html">Janeiro 2011</a></li> </ul> </div> <div class="post"> <h2>Título do Post 1</h2> <p>Texto do Post 1</p> </div> <div class="post"> <h2>Título do Post 2</h2> <p>Texto do Post 2</p> </div> <div id="footer"> <p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p> </div>Wednesday, May 25, 2011
  21. 21. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Apenas para visualizarmos o HTML em nosso wireframe... <div id=”header”> <div class=”post”> <div id= ”sidebar”> <div class=”post”> <div id=”footer”>Wednesday, May 25, 2011
  22. 22. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Que diabos é esse tal <div>?!Wednesday, May 25, 2011
  23. 23. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG De acordo com a especificação do HTML 4.01: “The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.”Wednesday, May 25, 2011
  24. 24. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG De acordo com a especificação do HTML 4.01: “The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.” HEIN?! Inline?! Block-level?! Calma...Wednesday, May 25, 2011
  25. 25. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Uma palavrinha sobre semântica HTML... A semântica HTML é o uso da linguagem de marcação HTML para dar significado ao conteúdo de um documento ao invés de definir a sua apresentação (aparência).Wednesday, May 25, 2011
  26. 26. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Uma palavrinha sobre semântica HTML... A semântica HTML é o uso da linguagem de marcação HTML para dar significado ao conteúdo de um documento ao invés de definir a sua apresentação (aparência). Exemplo: <i>: formata um texto em itálico apresentação <em>: indica que o texto deve ser enfatizado significado <cite>: indica uma citação significadoWednesday, May 25, 2011
  27. 27. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG OK, mas e aquele tal <div>?!Wednesday, May 25, 2011
  28. 28. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Apenas para visualizarmos o HTML em nosso wireframe... <div id=”header”> <div class=”post”> <div id= ”sidebar”> <div class=”post”> <div id=”footer”>Wednesday, May 25, 2011
  29. 29. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG O elemento <div> não possui significado e, por padrão, não afeta a apresentação. Mais uma olhadinha na especificação do HTML 4.01: “The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.”Wednesday, May 25, 2011
  30. 30. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Voltando ao nosso blog...Wednesday, May 25, 2011
  31. 31. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Não seria perfeito se fosse assim? <header> <post> <sidebar> <post> <footer>Wednesday, May 25, 2011
  32. 32. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Por quê?Wednesday, May 25, 2011
  33. 33. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Por quê? Dois motivos bem simples: 1 - obviamente, escreve-se menos 2 - traria significado ao conteúdoWednesday, May 25, 2011
  34. 34. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Legal... e daí?Wednesday, May 25, 2011
  35. 35. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Legal... e daí? É aí que entre o HTML5! Um dos objetivos do HTML5 é trazer uma semântica maior aos elementos da linguagem. Para isso foram introduzidos novos elementos e alguns já existentes foram alterados semanticamente.Wednesday, May 25, 2011
  36. 36. TREINAMENTOS HTML5: ESTRUTURA Vamos ver como poderia ficar o nosso blog em HTML5: <header> <h1>Meu BLOG</h1> </header> <aside> <nav> <ul> <li><a href="maio-2011.html">Maio 2011</a></li> <li><a href="abril-2011.html">Abril 2011</a></li> <li><a href="marco-2011.html">Marco 2011</a></li> <li><a href="fevereiro-2011.html">Fevereiro 2011</a></li> <li><a href="janeiro-2011.html">Janeiro 2011</a></li> </ul> </nav> </aside> <article> <h2>Título do Post 1</h2> <p>Texto do Post 1</p> </article> <article> <h2>Título do Post 2</h2> <p>Texto do Post 2</p> </article> <footer> <p><small>Meu BLOG 2011. Nenhum direito reservado.</small></p> </footer>Wednesday, May 25, 2011
  37. 37. TREINAMENTOS ESTRUTURA BÁSICA DE UM BLOG Apenas para visualizarmos o HTML5 em nosso wireframe... As tags <post> e <header> <sidebar> que utilizamos na nossa “situação perfeita” não existem. <article> No lugar delas utilizamos as tags <article> e <aside> <aside> que são mais genéricas, afinal seria <article> impossível existirem tags para para todo tipo de site com diversos temas diferentes, não é mesmo? <footer>Wednesday, May 25, 2011
  38. 38. TREINAMENTOS UM POUCO DE ESTATÍSTICA Analysis of Variance ___ 2 2 2 BSS nj X j M Xj nj XT N ___ 2 2 2 2 WSS = X ij Xj nj 1 s j X Xj nj 2 2 2 2 TSS = N -1 s T X ij M X T XT N BSS k 1 NOTE: T = Total F df ,dfb w WSS n k M = Grand Mean df b k 1, df w n k, df t n 1 N = Overall N TSS = BSS + WSSWednesday, May 25, 2011
  39. 39. UM POUCO DE ESTATÍSTICA ?! TREINAMENTOS Analysis of Variance ___ 2 2 2 BSS nj X j M Xj nj XT N ___ 2 2 2 2 WSS = X ij Xj nj 1 s j X Xj nj 2 2 2 2 TSS = N -1 s T X ij M X T XT N BSS k 1 NOTE: T = Total F df ,dfb w WSS n k M = Grand Mean df b k 1, df w n k, df t n 1 N = Overall N TSS = BSS + WSSWednesday, May 25, 2011
  40. 40. TREINAMENTOS UM POUCO DE ESTATÍSTICA Analysis of Variance ___ 2 2 2 BSS nj X j M Xj nj XT N ___ 2 2 2 2 WSS = X ij Xj nj 1 s j X Xj nj 2 2 2 2 TSS = N -1 s T X ij M X T XT N BSS k 1 NOTE: T = Total F df ,dfb w WSS n k M = Grand Mean df b k 1, df w n k, df t n 1 N = Overall N TSS = BSS + WSSWednesday, May 25, 2011
  41. 41. TREINAMENTOS UM POUCO DE ESTATÍSTICA Valores populares para o atributo id Total: 1.782.769 Valor Frequência Valor Frequência Valor Frequência footer 288.061 table1 101.677 wrapper 66.730 content 228.661 menu 96.161 top 66.615 header 223.726 layer1 93.920 table2 57.934 logo 121.351 autonumber1 77.350 layer2 56.823 container 119.877 search 74.887 sidebar 52.416 main 106.327 nav 72.057 image1 48.922 Fonte: Opera MAMA crawler http://dev.opera.com/articles/view/mama-common-attributes/ MAMA - Metadata Analysis and Mining ApplicationWednesday, May 25, 2011
  42. 42. TREINAMENTOS UM POUCO DE ESTATÍSTICA Valores populares para o atributo class Total: 2.139.184 Valor Frequência Valor Frequência Valor Frequência footer 179.528 style2 89.851 nav 68.634 menu 146.673 header 89.274 clear 68.571 style1 138.308 copyright 86.979 search 59.802 msonormal 123.374 button 81.503 style4 56.032 text 122.911 main 69.620 logo 48.831 content 113.951 style3 69.349 body 48.052 title 91.957 small 68.995 left 47.822 Fonte: Opera MAMA crawler http://dev.opera.com/articles/view/mama-common-attributes/ MAMA - Metadata Analysis and Mining ApplicationWednesday, May 25, 2011
  43. 43. TREINAMENTOS UM POUCO DE ESTATÍSTICA Coincidência alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5?Wednesday, May 25, 2011
  44. 44. TREINAMENTOS UM POUCO DE ESTATÍSTICA Coincidência alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5? NãoWednesday, May 25, 2011
  45. 45. TREINAMENTOS UM POUCO DE ESTATÍSTICA Lembra que eu disse que o processo de especificação do HTML5 era diferente? Eu disse que era: Aberto Qualquer um pode participar da lista de e-mail do WHATWG Empírico Os responsáveis pela especificação não levaram em conta apenas o que era discutido nas listas de e-mail ou o que eles achavam melhor. Eles observaram o comportamento dos desenvolvedores, ou seja, analisaram páginas e mais páginas em busca de um padrão.Wednesday, May 25, 2011
  46. 46. TREINAMENTOS HTML5: NOVOS ELEMENTOS De marcação: <article> <nav> <aside> <progress> <figure> <ruby> <figcaption> <rt> <footer> <rp> <header> <section> <hgroup> <time> <mark> <wbr>Wednesday, May 25, 2011
  47. 47. TREINAMENTOS HTML5: NOVOS ELEMENTOS De marcação: <article> <nav> <aside> <progress> <figure> <ruby> X <figcaption> <rt> Ruby: Linguagem de Programação <footer> <rp> <header> <section> <hgroup> <time> <mark> <wbr>Wednesday, May 25, 2011
  48. 48. TREINAMENTOS HTML5: NOVOS ELEMENTOS Mídia: <audio> <video> Safari 5.0.5 <source> <embed> Firefox 4.0.1 Chrome 11.0.696.68 Opera 11.11Wednesday, May 25, 2011
  49. 49. TREINAMENTOS HTML5: NOVOS ELEMENTOS Gráfico: <canvas>Wednesday, May 25, 2011
  50. 50. TREINAMENTOS HTML5: NOVOS ELEMENTOS Gráfico: // Get the canvas element. var elem = document.getElementById(myCanvas); if (!elem || !elem.getContext) { <canvas> } return; // Get the canvas 2d context. var context = elem.getContext(2d); if (!context) { return; } context.fillStyle = #00f; context.strokeStyle = #f00; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath();Wednesday, May 25, 2011
  51. 51. TREINAMENTOS HTML5: NOVOS ELEMENTOS Gráfico: <canvas> Bibliotecas para manipular o canvas: gury - http://guryjs.org/ EaselJS - http://easeljs.com/ RGraph - http://www.rgraph.net/ Processing.js - http://processingjs.org/Wednesday, May 25, 2011
  52. 52. TREINAMENTOS HTML5: NOVOS ELEMENTOS Formulário: <datalist> <keygen> <output>Wednesday, May 25, 2011
  53. 53. TREINAMENTOS HTML5: ELEMENTOS REDEFINIDOS <ol> <dl> <cite> <address> <em>, <i> <strong>, <b> <hr> <small>Wednesday, May 25, 2011
  54. 54. TREINAMENTOS HTML5: ELEMENTOS REDEFINIDOS <input type=”TIPO”> button password checkbox radio color range date reset datetime search datetime-local submit email tel file text hidden time image url month week numberWednesday, May 25, 2011
  55. 55. TREINAMENTOS HTML5: ELEMENTOS REDEFINIDOS <input> Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max stepWednesday, May 25, 2011
  56. 56. TREINAMENTOS HTML5: ELEMENTOS REDEFINIDOS <input> Alguns dos novos atributos para o <input>: list autofocus * The off state indicates either that the controls input placeholder data is particularly sensitive (for example the required activation code for a nuclear weapon); or that multiple it is a value that will never be reused (for example a pattern one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, autocomplete* instead of being able to rely on the UA to prefill the min value for him; or that the document provides its own max autocomplete mechanism and does not want the user step agent to provide autocompletion values.Wednesday, May 25, 2011
  57. 57. TREINAMENTOS HTML5: ATRIBUTOS GLOBAIS contenteditable setAttribute() data-* getAttribute() draggable=”true” spellcheck tabindex=”-1”Wednesday, May 25, 2011
  58. 58. TREINAMENTOS HTML5: ARMAZENAMENTO Hoje em dia, como armazenamos dados localmente através de um documento HTML?Wednesday, May 25, 2011
  59. 59. TREINAMENTOS HTML5: ARMAZENAMENTO Hoje em dia, como armazenamos dados localmente através de um documento HTML? Uma dica... sWednesday, May 25, 2011
  60. 60. TREINAMENTOS HTML5: ARMAZENAMENTO Hoje em dia, como armazenamos dados localmente através de um documento HTML? COOKIES Compartilhado com o servidor através do cabeçalho de requisição Chato de criar, chato de manter e chato de remover Para armazenar estruturas de dados um pouco mais complexas, deve ser serializado primeiroWednesday, May 25, 2011
  61. 61. TREINAMENTOS HTML5: ARMAZENAMENTO Quais as opções do HTML5? COOKIES Web Storage Web SQL DatabasesWednesday, May 25, 2011
  62. 62. TREINAMENTOS HORA DE DAR UMA BROCHADA E aí, já posso sair usando o HTML5?! SimWednesday, May 25, 2011
  63. 63. TREINAMENTOS HORA DE DAR UMA BROCHADA E aí, já posso sair usando o HTML5?! Sim... e Não Utilize o bom sensoWednesday, May 25, 2011
  64. 64. TREINAMENTOS HORA DE DAR UMA BROCHADA E aí, já posso sair usando o HTML5?! Sim... e Não Utilize o bom sensoWednesday, May 25, 2011
  65. 65. TREINAMENTOS CSS3 Temos vontade de matar o designer quando ele pede para...Wednesday, May 25, 2011
  66. 66. TREINAMENTOS CSS3 Temos vontade de matar o designer quando ele pede para... Fazer caixinhas com bordas arredondadas Colocar uma sombrinha nos textos/caixas Utilizar um background gigante Utilizar um background composto Fazer uma página adaptável ao tamanho da tela Fazer os títulos das páginas ter uma fonte mais “style”Wednesday, May 25, 2011
  67. 67. TREINAMENTOS CSS3: BORDAS ARREDONDADAS 1 2 border-radius: 10px; border-radius: 5px 10px 15px 20px; -moz-border-radius -webkit-border-radius 4 3Wednesday, May 25, 2011
  68. 68. TREINAMENTOS CSS3: SOMBRAS box-shadow: inset 5px 5px 5px #ff0000; -moz-box-shadow -webki-box-shadow box-shadow: 10px 10px 10px #000000;Wednesday, May 25, 2011
  69. 69. TREINAMENTOS CSS3: BACKGROUND GIGANTE Qual o problema do background gigante?Wednesday, May 25, 2011
  70. 70. TREINAMENTOS CSS3: BACKGROUND GIGANTE Qual o problema do background gigante?Wednesday, May 25, 2011
  71. 71. TREINAMENTOS CSS3: BACKGROUND GIGANTE Qual o problema do background gigante? Solução: SVG + background-sizeWednesday, May 25, 2011
  72. 72. TREINAMENTOS CSS3: BACKGROUND COMPOSTO Como resolvemos hoje o problema dos backgrounds compostos?Wednesday, May 25, 2011
  73. 73. TREINAMENTOS CSS3: BACKGROUND COMPOSTO Como resolvemos hoje o problema dos backgrounds compostos? <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>Wednesday, May 25, 2011
  74. 74. TREINAMENTOS CSS3: BACKGROUND COMPOSTO Como resolvemos hoje o problema dos backgrounds compostos? Solução: Múltiplas declarações de background.Wednesday, May 25, 2011
  75. 75. TREINAMENTOS CSS3: PÁGINA ADAPTÁVEL Como resolvemos o problema das páginas com aparências diferentes para tamanhos diferentes de tela?Wednesday, May 25, 2011
  76. 76. TREINAMENTOS CSS3: PÁGINA ADAPTÁVEL Como resolvemos o problema das páginas com aparências diferentes para tamanhos diferentes de tela? Antes do CSS3: @media screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." />Wednesday, May 25, 2011
  77. 77. TREINAMENTOS CSS3: PÁGINA ADAPTÁVEL Como resolvemos o problema das páginas com aparências diferentes para tamanhos diferentes de tela? Antes do CSS3: @media screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." /> CSS3: @media all and (min-width:500px) { ... } @media print and (orientation: portrait) { ... } <link rel="stylesheet" media="print and (min-width: 25cm)" href="..." />Wednesday, May 25, 2011
  78. 78. TREINAMENTOS CSS3: FONTES “STYLE” E as fontes diferentes das que não são as do padrão web?Wednesday, May 25, 2011
  79. 79. TREINAMENTOS CSS3: FONTES “STYLE” E as fontes diferentes das que não são as do padrão web? Como era feito até hoje? Imagem estática SIFR (Scalable Inman Flash Replacement) Cufón Imagem dinâmica (ex: FLIR)Wednesday, May 25, 2011
  80. 80. TREINAMENTOS CSS3: FONTES “STYLE” E as fontes diferentes das que não são as do padrão web? Como era feito até hoje? Imagem estática SIFR (Scalable Inman Flash Replacement) Cufón Imagem dinâmica (ex: FLIR)Wednesday, May 25, 2011
  81. 81. TREINAMENTOS CSS3: FONTES “STYLE” E as fontes diferentes das que não são as do padrão web? Com CSS3 fica assim: @font-face { font-family: nomeDaFonte; src: url(/local-da-fonte/arquivo-da-fonte) format("tipo-da-fonte"); } Na hora de usar: ELEMENTO { font-family: nomeDaFonte, verdana, helvetica; }Wednesday, May 25, 2011
  82. 82. TREINAMENTOS CSS3: FONTES “STYLE” Padrões de formatos de fonte: WOFF (webfonts) TTF (Truetype) OTF (Opentype) SVG (Scalable Vector Graphic) → iPhone/iPad/WebKitWednesday, May 25, 2011
  83. 83. TREINAMENTOS CSS3: SELETORES Novos seletores de atributo: E[foo^="bar"] E[foo$="bar"] E[foo*="bar"]Wednesday, May 25, 2011
  84. 84. TREINAMENTOS CSS3: SELETORES Seletor de “irmao” genérico: E~F Funciona exatamente como o E + F, porém F não precisa estar imediatamente precedido de EWednesday, May 25, 2011
  85. 85. TREINAMENTOS CSS3: PSEUDO-CLASSES Novas pseudo-classes: E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:enabled E:checked E:not(s)Wednesday, May 25, 2011
  86. 86. Wednesday, May 25, 2011
  87. 87. HTML5 & CSS3 Jonas Keizo Hirata TREINAMENTOS www.k19.com.br twitter: @k19treinamentos contato@k19.com.brWednesday, May 25, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×