Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Os Novos Padrões para Desenvolvimentos de Aplic...

Os Novos Padrões para Desenvolvimentos de Aplicações Web: HTML5 e CSS3

Minha defesa de monografia no Curso de Ciência da Computação (UFMA). Logicamente não deu para abordar todo o assunto HTML5 – bem pouco na verdade (Julho de 2011).

Almir Filho

July 14, 2011
Tweet

More Decks by Almir Filho

Other Decks in Technology

Transcript

  1. Os Novos Padrões para Desenvolvimento de Aplicações Web: HTML5 e

    CSS3 Almir Galindo Florêncio Filho Orientador: Mário Antônio Meireles Teixeira
  2. ROTEIRO 1. Introdução 2. HTML5 3. CSS3 4. Suporte pelos

    Navegadores 5. Avaliação de Desempenho 6. Estudo de Caso: Reestruturação de Site 7. Conclusão 8. Vídeos de Exemplos 2
  3. INTRODUÇÃO • 1989: Compartilhamento de Documentos Hipertexto • 1991: HTML

    - Linguagem de Marcação de Hipertexto ‣ Aceita como Padrão • 1993: Alto Índice de Crescimento Histórico da Web 3
  4. INTRODUÇÃO Crescimento da Web 4 0 350 700 1.050 1.400

    1.750 2.100 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2.050 1.802 1.574 1.319 1.093 1.018 817 719 587 513 361 248 147 70 36 16 Quantidade de usuários (milhões) dados de internetwordstats.com
  5. INTRODUÇÃO Inovações da Web 5 • Aplicações e Serviços Web

    • A Web deixa de ser um simples Conjunto de Documentos Interligados • Mecanismos de Busca (Search Engines) • Flash ‣ Aplicação Ricas da Internet (RIA)
  6. INTRODUÇÃO Vantagens do Flash 6 • Suporte Multimídia (áudio e

    vídeo) • Animações Gráficas Avançadas • Aplicações com mais Usabilidade • Aplicações Interativas • Sem Incompatibilidades entre os Navegadores
  7. INTRODUÇÃO Web 2.0 7 • Conceito: RIA e Interatividade •

    Mídias Sociais e Elevada Quantidade de Conteúdo Multimídia • Limitações dos Padrões ‣ Alto Grau de Incompatibilidade pelos Navegadores ‣ Recursos RIA não suportados pelos Padrões Atuais • Soluções • Flash e JavaScript
  8. HTML 5 8 Roteiro • Serialização • Novos Elementos Estruturais

    e de Formulários • Suporte Multimídia • Canvas e WebGL • MathML e SVG Embutidos • Geolocalização • Novos Recursos de Acessibilidade
  9. • Serialização • Novos Elementos Estruturais e de Formulários •

    Suporte Multimídia • Canvas e WebGL • MathML e SVG Embutidos • Geolocalização • Novos Recursos de Acessibilidade HTML 5 9 Roteiro
  10. HTML5 Serialização 11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
  11. HTML5 Serialização 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
  12. <input type=”datetime”> <input type=”datetime-local”> <input type=”date”> <input type=”month”> <input type=”week”>

    <input type=”time”> HTML5 Novos Elementos de Formulários 15 <input type=”search”> <input type=”url”> <input type=”email”> <input type=”tel”> <input type=”number”> <input type=”range”> <input type=”color”>
  13. <input type=”search”> <input type=”url”> <input type=”email”> <input type=”tel”> <input type=”number”>

    <input type=”range”> <input type=”color”> <input type=”datetime”> <input type=”datetime-local”> <input type=”date”> <input type=”month”> <input type=”week”> <input type=”time”> HTML5 Novos Elementos de Formulários 16
  14. HTML5 Suporte a Multimídia 17 • Suporte Nativo a Multimídia

    Áudio e Vídeo • Elementos <audio>, <video>, <source> e <track> • Controles Nativos Customizáveis • API JavaScript para Controle e Manipulação • Interação com a Página • Sem necessidade de instalação de plug-ins e players
  15. HTML5 Suporte a Multimídia 18 <audio src=”caminho/audio.mp3” controls=”controls”></audio> Elemento <audio>

    <video src=”caminho/video.mpg” controls=”controls”></video> Elemento <video>
  16. HTML5 Suporte a Multimídia 19 <audio src=”caminho/audio.mp3” controls=”controls”></audio> Elemento <audio>

    <video src=”caminho/video.mpg” controls=”controls”></video> Elemento <video>
  17. HTML5 Suporte a Multimídia 20 <audio src=”caminho/audio.mp3” controls=”controls”></audio> Elemento <audio>

    <video src=”caminho/video.mpg” controls=”controls”></video> Elemento <video>
  18. HTML5 Suporte a Multimídia 21 <video controls=”controls”> <source src=”caminho/video.mpg” type=”video/mpeg”

    /> <source src=”caminho/video.mov” type=”video/quicktime” /> </video> Elemento <source> • Especifica uma fonte de mídia para <audio> ou <video> • Útil para vários codecs
  19. HTML5 Suporte a Multimídia 22 Elemento <track> • Especifica uma

    fonte de dados para <audio> ou <video> • Inserção de Subtítulos, Legendas, etc. <video src=”caminho/video.avi” controls=”controls”> <track kind=”subtitles” src=”sub_pt.srt” srclang=”pt” label=”Português” /> <track kind=”subtitles” src=”sub_en.srt” srclang=”en” label=”English” /> </video>
  20. HTML5 Canvas 23 • Tecnologia que torna possível desenho de

    Gráficos 2D • Manipulação a nível de Pixel • Novo Elemento <canvas> • Operações de desenho realizadas através de API JavaScript • Manipuladores de Eventos JavaScript
  21. HTML5 Canvas 24 • Tecnologia que torna possível desenho de

    Gráficos 2D • Manipulação a nível de Pixel • Novo Elemento <canvas> • Operações de desenho realizadas através de API JavaScript • Manipuladores de Eventos JavaScript
  22. HTML5 WebGL 25 • API JavaScript Baseada no OpenGL •

    Plataforma Web • Desenha no elemento <canvas> • Contexto 2D e 3D • Aceleração Gráfica
  23. HTML5 WebGL 26 • API JavaScript Baseada no OpenGL •

    Plataforma Web • Desenha no elemento <canvas> • Contexto 2D e 3D • Aceleração Gráfica
  24. HTML5 MathML e SVL Embutidos 27 • Aplicações XML Amplamente

    Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos <svg> e <math> • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica <!DOCTYPE html> <html> <head> <title>O sol em SVG</title> </head> <body> <h1>O Sol em SVG</h1> <svg style="width:300px; height:300px;"> <radialGradient cx="0.5" cy="0.5" r="0.5" id=”sol”> <stop stop-color="rgb(255, 255, 0)" offset="0" /> <stop stop-color="rgb(255, 221, 51)" offset="0.6917" /> <stop stop-color="rgb(254, 140, 25)" offset="0.7083" /> <stop stop-color="rgb(0, 0, 0)" offset="1" /> </radialGradient> <rect width="100%" height="100%" fill="url(#sol)"/> </svg> </body> </html>
  25. HTML5 MathML e SVL Embutidos 28 • Aplicações XML Amplamente

    Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos <svg> e <math> • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica <!DOCTYPE html> <html> <head> <title>O sol em SVG</title> </head> <body> <h1>O Sol em SVG</h1> <svg style="width:300px; height:300px;"> <radialGradient cx="0.5" cy="0.5" r="0.5" id=”sol”> <stop stop-color="rgb(255, 255, 0)" offset="0" /> <stop stop-color="rgb(255, 221, 51)" offset="0.6917" /> <stop stop-color="rgb(254, 140, 25)" offset="0.7083" /> <stop stop-color="rgb(0, 0, 0)" offset="1" /> </radialGradient> <rect width="100%" height="100%" fill="url(#sol)"/> </svg> </body> </html>
  26. HTML5 MathML e SVL Embutidos 29 • Aplicações XML Amplamente

    Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos <svg> e <math> • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica <!DOCTYPE html> <html> <head> <title>O sol em SVG</title> </head> <body> <h1>O Sol em SVG</h1> <svg style="width:300px; height:300px;"> <radialGradient cx="0.5" cy="0.5" r="0.5" id=”sol”> <stop stop-color="rgb(255, 255, 0)" offset="0" /> <stop stop-color="rgb(255, 221, 51)" offset="0.6917" /> <stop stop-color="rgb(254, 140, 25)" offset="0.7083" /> <stop stop-color="rgb(0, 0, 0)" offset="1" /> </radialGradient> <rect width="100%" height="100%" fill="url(#sol)"/> </svg> </body> </html> <!DOCTYPE html> <html> <head> <title>Função com MathML</title> </head> <body> <h1>Função com MathML:</h1> <math style="font-size: 36px; color: red;"> <mrow> <mi>y</mi> <mo>=</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html>
  27. HTML5 MathML e SVL Embutidos 30 • Aplicações XML Amplamente

    Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos <svg> e <math> • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica <!DOCTYPE html> <html> <head> <title>O sol em SVG</title> </head> <body> <h1>O Sol em SVG</h1> <svg style="width:300px; height:300px;"> <radialGradient cx="0.5" cy="0.5" r="0.5" id=”sol”> <stop stop-color="rgb(255, 255, 0)" offset="0" /> <stop stop-color="rgb(255, 221, 51)" offset="0.6917" /> <stop stop-color="rgb(254, 140, 25)" offset="0.7083" /> <stop stop-color="rgb(0, 0, 0)" offset="1" /> </radialGradient> <rect width="100%" height="100%" fill="url(#sol)"/> </svg> </body> </html> <!DOCTYPE html> <html> <head> <title>Função com MathML</title> </head> <body> <h1>Função com MathML:</h1> <math style="font-size: 36px; color: red;"> <mrow> <mi>y</mi> <mo>=</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html>
  28. HTML5 MathML e SVL Embutidos 31 • Aplicações XML Amplamente

    Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos <svg> e <math> • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica <!DOCTYPE html> <html> <head> <title>O sol em SVG</title> </head> <body> <h1>O Sol em SVG</h1> <svg style="width:300px; height:300px;"> <radialGradient cx="0.5" cy="0.5" r="0.5" id=”sol”> <stop stop-color="rgb(255, 255, 0)" offset="0" /> <stop stop-color="rgb(255, 221, 51)" offset="0.6917" /> <stop stop-color="rgb(254, 140, 25)" offset="0.7083" /> <stop stop-color="rgb(0, 0, 0)" offset="1" /> </radialGradient> <rect width="100%" height="100%" fill="url(#sol)"/> </svg> </body> </html> <!DOCTYPE html> <html> <head> <title>Função com MathML</title> </head> <body> <h1>Função com MathML:</h1> <math style="font-size: 36px; color: red;"> <mrow> <mi>y</mi> <mo>=</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html>
  29. HTML5 Geolocalização 32 • Identificação da Localização Geográfica • Crescimento

    Elevado de Aplicações • Principal Uso em Dispositivos Móveis (PDAs, Smartphones, ect) • API JavaScript provê Interface de Acesso • GPS, Triangulação de Antenas, Rede wi-fi, identificação de IP • Autorização do Usuário é Necessária • Exemplo 1: Foursquare – Recomendações nas Proximidades • Exemplo 2: Stalqer – Localização de Amigos
  30. HTML5 Novos Recursos de Acessibilidade 35 • Edição de Conteúdo

    ‣ Propriedade contenteditable • Verificação Ortográfica Gramatical ‣ Propriedade spellcheck • Drag & Drop: ‣ Propriedade draggable ‣ Manipuladores de Eventos: dragstart, dragenter, dragover, dragleave, drag, drop, dragend
  31. CSS 3 37 Roteiro • Novas Funcionalidades • Transformações •

    Transições • Animações • Vantagens
  32. CSS 3 38 Roteiro • Novas Funcionalidades • Transformações •

    Transições • Animações • Vantagens
  33. CSS3 Novas Funcionalidades 39 • Modelos de Cores ‣ RGB:

    rgb(r, g, b) ‣ RGBA: rgba(r, g, b, a) ‣ HSL: hsl(h, s, l) ‣ HSLA: hsla(h, s, l, a) • Imagens de Fundo ‣ Múltiplas Imagens: background-image separadas por “,” ‣ Tamanho da Imagem: background-size • Fontes textuais embutidas: Regra @font-face
  34. CSS3 Novas Funcionalidades 40 • Bordas ‣ Cantos Arredondados: border-radius

    ‣ Imagens de Borda: border-image • Efeito Sombra ‣ Em Elementos: box-shadow ‣ Em Texto: text-shadow • Gradientes ‣ Linear: linear-gradient() ‣ Radial: radial-gradient()
  35. CSS3 Transformações 41 • Transformações Gráficas: Propriedade transform ‣ Translação,

    escala, rotação, cisalhamento e matriz ‣ Qualquer Elemento • Contexto 2D ‣ translate(x,y), scale(x,y), rotate(a), skew(x,y) e matrix(n1,...,n6) • Contexto 3D ‣ translate3d(x,y,z), scale3d(x,y,z), rotate3d(x,y,z) e matrix3d(n1,...,n16)
  36. CSS3 Transições 43 • Animação de Mudança de Estado ‣

    Valor de Propriedade • Interpolação Entre valor Inicial e valor Final ‣ Valores calculados e modificados ao Longo do Tempo • São Definidas pela Propriedade transition ‣ transition: property duration effect delay; • Podem ser Aplicadas às Transformações a { color: blue; } a:hover { color: black; transition: color 1s linear; }
  37. CSS3 Transições 44 a { color: blue; } a:hover {

    color: black; transition: color 1s linear; }
  38. CSS3 Animações 45 • Mais Controle sobre Animações ‣ Definição

    de animação Customizada: Regra @keyframes ‣ animation: name duration effect delay iterations direction; @keyframes move-cor { 0% { color: black; left: 0px; } 30% { left: 100px; } 100% { color: red; } } div.animada { animation: move-cor 1s ease-in; }
  39. CSS3 Animações 46 @keyframes move-cor { 0% { color: black;

    left: 0px; } 30% { left: 100px; } 100% { color: red; } } div.animada { animation: move-cor 1s ease-in; }
  40. CSS3 Vantagens 47 • Minimização do Uso de Recursos ‣

    Imagens ‣ Scripts (JavaScript) ‣ Flash • Qualidade Gráfica Otimizada • Diminuição do Tamanho em bytes • Menos uso de Banda da Conexão • Carregamento Mais Rápido • Melhor Manutenibilidade
  41. 8 9 4 12 11 5 Modelos de Cores magens

    de Fundo ordas feitos Sombra ontes Embutidas Gradientes ransformações 2D ransformações 3D ransições nimações TOTAL (~) ** 6% 56% 87% 100% 87% 100% 8 9 4 12 11 5 Elem. Estruturais Elem. Formulários Multimídia* Desenhos SVG MathML Microdata Geolocalização Elem. Interativos Drag n’ Drop TOTAL (~) ** 8% 37% 66% 71% 71% 62% SUPORTE 49 HTML5 CSS3 * Desconsiderando <track> ** Com base no total de 50 funcionalidades sim não parcial ** Com base no total de 18 funcionalidades
  42. 8 9 4 12 11 5 Modelos de Cores Imagens

    de Fundo Bordas Efeitos Sombra Fontes Embutidas Gradientes Transformações 2D Transformações 3D Transições Animações TOTAL (~) ** 6% 56% 87% 100% 87% 100% CSS3 ** Com base no total de 18 funcionalidades 8 9 4 12 11 5 Elem. Estruturais Elem. Formulários Multimídia* Desenhos SVG MathML Microdata Geolocalização Elem. Interativos Drag n’ Drop TOTAL (~) ** 8% 37% 66% 71% 71% 62% SUPORTE 50 HTML5 * Desconsiderando <track> ** Com base no total de 50 funcionalidades sim não parcial
  43. Avaliação de Desempenho 51 • Unidade de Medida: Quadros por

    segundo (FPS) • Algoritmo de Geração de Partículas ‣ 250 a 4000 partículas • Tecnologias ‣ HTML, Canvas, SVG e Flash • Navegadores ‣ Mozilla Firefox, Opera, Google Chrome, Internet Explorer e Safari • Sistemas Operacionais ‣ Mac OS X 10.6.8 e Windows 7
  44. • Unidade de Medida: Quadros por segundo (FPS) • Algoritmo

    de Geração de Partículas ‣ 250 a 4000 partículas • Tecnologias ‣ HTML, Canvas, SVG e Flash • Navegadores ‣ Mozilla Firefox, Opera, Google Chrome, Internet Explorer e Safari • Sistemas Operacionais ‣ Mac OS X 10.6.8 e Windows 7 Avaliação de Desempenho 52
  45. Estudo de Caso: Reestruturação de Site 57 • Reestruturação de

    Template HTML com os Novos Padrões ‣ XHTML para HTML5 ‣ CSS2 para CSS3 • Comparativos ‣ Tamanho ‣ Velocidade de Carregamento
  46. Estudo de Caso: Reestruturação de Site 58 • Reestruturação de

    Template HTML com os Novos Padrões ‣ XHTML para HTML5 ‣ CSS2 para CSS3 • Comparativos ‣ Tamanho ‣ Velocidade de Carregamento
  47. ESTUDO DE CASO Analisando o HTML 59 • Análise da

    Estrutura • Identificar Áreas e Seções comuns • Fazer Substituição Pelos Novos Elementos
  48. ESTUDO DE CASO Analisando o HTML 61 <div id=”header”> <header>

    <div id=”logo”> <section id=”logo”> <div id=”painel”> <section id=”painel”>
  49. ESTUDO DE CASO Analisando o HTML 62 <div id=”header”> <header>

    <div id=”logo”> <section id=”logo”> <div id=”painel”> <section id=”painel”> <ul> <nav> <ul>
  50. ESTUDO DE CASO Analisando o HTML 63 <div id=”middle”> <section

    id=”middle”> Substituir demais <div>’s internas por <section>
  51. ESTUDO DE CASO CSS 69 • Identificar possibilidades de uso

    das novas funcionalidades CSS3 • Minimização do uso de imagens • Códigos HTML e CSS mais limpos
  52. ESTUDO DE CASO CSS 70 • Aplicação de Gradiente como

    Imagem de Fundo: linear-gradient()
  53. ESTUDO DE CASO CSS 71 • Aplicação de Gradiente como

    Imagem de Fundo: linear-gradient() • Aplicação de Efeito Sombra: box-shadow
  54. ESTUDO DE CASO CSS 72 • Aplicação de Gradiente como

    Imagem de Fundo: linear-gradient() • Aplicação de Efeito Sombra: box-shadow • Fonte Embutida: @font-face
  55. ESTUDO DE CASO Testes 76 • Tempo de Carregamento Total:

    Redução de 60% • Quantidade de Objetos: 1/3 do total • Quantidade de Imagens: Redução de 81% (22 imagens) • Economia de 79,8Kb (sem fontes) ‣ Redução de mais de 34% do tamanho total
  56. CONCLUSÃO 78 Acessibilidade Padrões Interatividade Padrões / Flash Ferramentas de

    Autoria Flash Desempenho Flash Suporte Flash Público Potencial Flash • Flash ainda é uma opção mais eficiente para empresas • Melhores Soluções Atualmente
  57. CONCLUSÃO 79 • Maiores Vantagens • Web Preparada para o

    Futuro ‣ Maioria do Conteúdo será Interativo e Multimídia ‣ Semântica e Acessibilidade • Código Aberto • Grande Potencial de Crescimento
  58. CONCLUSÃO 80 • Maiores Dificuldades para Para Uso dos Novos

    Padrões • O Legado • Falta de Ferramentas de Autoria Adequadas • Suporte Incompleto dos Navegadores • Incompatibilidades entre os Navegadores