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

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

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

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

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

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)

INTRODUÇÃO Vantagens do Flash 6 • Suporte Multimídia (áudio e
vídeo) • Animações Gráﬁcas Avançadas • Aplicações com mais Usabilidade • Aplicações Interativas • Sem Incompatibilidades entre os Navegadores

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

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

• 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

HTML5 Serialização 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>

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>

HTML5 Novos Elementos Estruturais 13 • Conteúdo com mais Semântica

HTML5 Novos Elementos Estruturais 14 • Conteúdo com mais Semântica

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

<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

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

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>

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> • Especiﬁca uma fonte de mídia para <audio> ou <video> • Útil para vários codecs

HTML5 Suporte a Multimídia 22 Elemento <track> • Especiﬁca 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>

HTML5 Canvas 23 • Tecnologia que torna possível desenho de
Gráﬁcos 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

HTML5 Canvas 24 • Tecnologia que torna possível desenho de
Gráﬁcos 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

HTML5 WebGL 25 • API JavaScript Baseada no OpenGL •
Plataforma Web • Desenha no elemento <canvas> • Contexto 2D e 3D • Aceleração Gráﬁca

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

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>

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>

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>

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

HTML5 Geolocalização 33

HTML5 Geolocalização 34

HTML5 Novos Recursos de Acessibilidade 35 • Edição de Conteúdo
‣ Propriedade contenteditable • Veriﬁcação Ortográﬁca Gramatical ‣ Propriedade spellcheck • Drag & Drop: ‣ Propriedade draggable ‣ Manipuladores de Eventos: dragstart, dragenter, dragover, dragleave, drag, drop, dragend

HTML5 Novos Recursos de Acessibilidade 36

CSS 3 37 Roteiro • Novas Funcionalidades • Transformações •
Transições • Animações • Vantagens

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

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

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

CSS3 Transformações 41 • Transformações Gráﬁcas: 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)

CSS3 Transformações 42

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 modiﬁcados ao Longo do Tempo • São Deﬁnidas 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; }

CSS3 Transições 44 a { color: blue; } a:hover {
color: black; transition: color 1s linear; }

CSS3 Animações 45 • Mais Controle sobre Animações ‣ Deﬁniçã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; }

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

CSS3 Vantagens 47 • Minimização do Uso de Recursos ‣
Imagens ‣ Scripts (JavaScript) ‣ Flash • Qualidade Gráﬁca Otimizada • Diminuição do Tamanho em bytes • Menos uso de Banda da Conexão • Carregamento Mais Rápido • Melhor Manutenibilidade

Suporte pelos Navegadores 48

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

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

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

• 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

AVALIAÇÃO DE DESEMPENHO HTML 53 FPS Qnt. Partículas Canvas

AVALIAÇÃO DE DESEMPENHO HTML 54 FPS Qnt. Partículas Canvas SVG

Flash

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

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

ESTUDO DE CASO Analisando o HTML 59 • Análise da
Estrutura • Identiﬁcar Áreas e Seções comuns • Fazer Substituição Pelos Novos Elementos

ESTUDO DE CASO Analisando o HTML 60 <div id=”header”> <header>

ESTUDO DE CASO Analisando o HTML 63 <div id=”middle”> <section
id=”middle”> Substituir demais <div>’s internas por <section>

ESTUDO DE CASO Analisando o HTML 64 <div id=”postagem”> <article>

ESTUDO DE CASO Analisando o HTML 65 <div id=”postagem”> <article>
<ul> <nav> <ul>

ESTUDO DE CASO Analisando o HTML 66 <div id=”footer”> <footer>

ESTUDO DE CASO Analisando o HTML 67 <div id=”footer”> <footer>
<ul> <nav> <ul>

ESTUDO DE CASO Analisando o HTML 68 <img src=”logo.jpg”> <svg>

ESTUDO DE CASO CSS 69 • Identiﬁcar possibilidades de uso
das novas funcionalidades CSS3 • Minimização do uso de imagens • Códigos HTML e CSS mais limpos

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

Imagem de Fundo: linear-gradient() • Aplicação de Efeito Sombra: box-shadow

Imagem de Fundo: linear-gradient() • Aplicação de Efeito Sombra: box-shadow • Fonte Embutida: @font-face

ESTUDO DE CASO CSS 73 • Cantos de Bordas Arredondados:
border-radius

ESTUDO DE CASO Testes 74 • Testes de Carregamento em
Pingdom.org

ESTUDO DE CASO Testes 75 • Testes de Carregamento em
Pingdom.org

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

CONCLUSÃO 77

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 eﬁciente para empresas • Melhores Soluções Atualmente

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

CONCLUSÃO 80 • Maiores Diﬁculdades para Para Uso dos Novos
Padrões • O Legado • Falta de Ferramentas de Autoria Adequadas • Suporte Incompleto dos Navegadores • Incompatibilidades entre os Navegadores

Exemplos Reais 81 Vídeos

PERGUNTAS ? 82

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

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

More Decks by Almir Filho

Other Decks in Technology

Featured

Transcript