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).
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
Á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
/> <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
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>
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
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
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
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; }
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
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
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
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
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
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
Autoria Flash Desempenho Flash Suporte Flash Público Potencial Flash • Flash ainda é uma opção mais eficiente para empresas • Melhores Soluções Atualmente