Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

• 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

Slide 10

Slide 10 text

HTML5 Serialização 10

Slide 11

Slide 11 text

HTML5 Serialização 11

Slide 12

Slide 12 text

HTML5 Serialização 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

HTML5 Novos Elementos de Formulários 15

Slide 16

Slide 16 text

HTML5 Novos Elementos de Formulários 16

Slide 17

Slide 17 text

HTML5 Suporte a Multimídia 17 • Suporte Nativo a Multimídia Áudio e Vídeo • Elementos , , e • 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

Slide 18

Slide 18 text

HTML5 Suporte a Multimídia 18 Elemento Elemento

Slide 19

Slide 19 text

HTML5 Suporte a Multimídia 19 Elemento Elemento

Slide 20

Slide 20 text

HTML5 Suporte a Multimídia 20 Elemento Elemento

Slide 21

Slide 21 text

HTML5 Suporte a Multimídia 21 Elemento • Especifica uma fonte de mídia para ou • Útil para vários codecs

Slide 22

Slide 22 text

HTML5 Suporte a Multimídia 22 Elemento • Especifica uma fonte de dados para ou • Inserção de Subtítulos, Legendas, etc.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

HTML5 MathML e SVL Embutidos 27 • Aplicações XML Amplamente Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos e • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica O sol em SVG

O Sol em SVG

Slide 28

Slide 28 text

HTML5 MathML e SVL Embutidos 28 • Aplicações XML Amplamente Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos e • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica O sol em SVG

O Sol em SVG

Slide 29

Slide 29 text

HTML5 MathML e SVL Embutidos 29 • Aplicações XML Amplamente Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos e • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica O sol em SVG

O Sol em SVG

Função com MathML

Função com MathML:

y = x 2

Slide 30

Slide 30 text

HTML5 MathML e SVL Embutidos 30 • Aplicações XML Amplamente Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos e • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica O sol em SVG

O Sol em SVG

Função com MathML

Função com MathML:

y = x 2

Slide 31

Slide 31 text

HTML5 MathML e SVL Embutidos 31 • Aplicações XML Amplamente Utilizadas em Contextos Científicos • Especificação HTML5 engloba SVG e MathML • Elementos e • Vantagens ‣ Minimização do uso de Imagens (menos carregamento) ‣ Maior Qualidade Gráfica ‣ Mais Semântica O sol em SVG

O Sol em SVG

Função com MathML

Função com MathML:

y = x 2

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

HTML5 Geolocalização 33

Slide 34

Slide 34 text

HTML5 Geolocalização 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

HTML5 Novos Recursos de Acessibilidade 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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)

Slide 42

Slide 42 text

CSS3 Transformações 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Suporte pelos Navegadores 48

Slide 49

Slide 49 text

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 ** Com base no total de 50 funcionalidades sim não parcial ** Com base no total de 18 funcionalidades

Slide 50

Slide 50 text

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 ** Com base no total de 50 funcionalidades sim não parcial

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

• 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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

ESTUDO DE CASO Analisando o HTML 60

Slide 61

Slide 61 text

ESTUDO DE CASO Analisando o HTML 61

Slide 62

Slide 62 text

ESTUDO DE CASO Analisando o HTML 62

Slide 63

Slide 63 text

ESTUDO DE CASO Analisando o HTML 63
Substituir demais
’s internas por

Slide 64

Slide 64 text

ESTUDO DE CASO Analisando o HTML 64

Slide 65

Slide 65 text

ESTUDO DE CASO Analisando o HTML 65

Slide 66

Slide 66 text

ESTUDO DE CASO Analisando o HTML 66

Slide 67

Slide 67 text

ESTUDO DE CASO Analisando o HTML 67

Slide 68

Slide 68 text

ESTUDO DE CASO Analisando o HTML 68

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

CONCLUSÃO 77

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Exemplos Reais 81 Vídeos

Slide 82

Slide 82 text

PERGUNTAS ? 82