Upload
rio-info
View
549
Download
1
Embed Size (px)
DESCRIPTION
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09
Citation preview
O papel do "devigner" e as novidades do
HTML5
O novo profissional de Interfaces
O Surgimento da Web
• A web surgiu na década de 80 em um centro de pesquisa científica (CERN)
• Características:› Documentos em formato hipertexto› Arquitetura cliente-servidor› Browser como ferramenta cliente› Protocolo de comunicação (HTTP)› Linguagem de formatação de documentos (HTML)› Localizador universal (URL)
Aplicações na Web
• A web nasceu para oferecer conteúdo estático.
• Entretando, o servidor web foi adaptado para permitir alterar/gerar conteúdo, em tempo real, antes de enviá-lo para o usuário.
CGI
Ajax
• Em 2005 a Web vivenciou a revolução do Ajax› Aplicações Web podem obter dados do servidor
assincronamente, sem interferir no conteúdo que está sendo exibido para o usuário.
• A partir de um conceito simples, um universo de novas oportunidades surgiram.
O Desktop foi para a Web
O novo profissional
• O desenvolvedor de interfaces ganha novas atribuições.
• O profissional passa de apenas um “montador” de HTML, para um desenvolvedor altamente capacitado.
• Tecnologias de interface não param de evoluir:› HTML› CSS› Java Script› Flash / Flex / ActionScript› Silverlight › Frameworks Javascript (jQuery, extJS, prototype, YUI etc)› Padrões web, SEO, Semântica, Acessibilidade,
Mobilidade...
HTML 5
O que as aplicações usam hoje?
• Plugins supriram algumas necessidades: › Video› Animação› Webcam / Microfone› Melhores upload de arquivos› Geolocalização› Armazenamento offline› 3D› Audio› Drag and Drop de arquivos
O novo HTML
• Web Hypertext Application Technology Working Group (WHATWG)› Fundado por Apple, Mozilla Foundation, Opera Software› Liderado por Ian Hickson (atual Google)
• O objetivo do HTML5 é:› Expandir os recursos do HTML e XHTML› Definir as APIs que formam a base da arquitetura Web› Formalizar a especificação de APIs antigas e não
documentadas› Tornar elementos obsoletos (font, center, s, big etc)
• Em 2007, o W3C adotou a especificação criada, como ponto de partida para o HTML5
O que há de novo?
• Novos elementos com valor semântico› section, nav, footer, header, aside, details...
• Novos componentes de formulário› tel, search, url, email, datetime, range, number, color...
• Elemento Canvas• Extensões na API DOM• Video e Audio• Drag and Drop de arquivos• Geolocalização• Gerenciamento de histórico• Armazenamento Offline (Web Storage)• Cache• Threads (Web Worker)• Web Sockets
Já posso usar HTML 5?
• O padrão ainda está no status de “Working Draft”
• Novas versões dos browsers já implementam boa parte da especificação: Firefox 3.5, Opera 10, Safari 5, Chrome 5, IE9› No momento que for finalizada, a especificação já estará
totalmente implementada e utilizável.
• É possível detectar existência da funcionalidade;
• Algumas aplicações oferecem recursos avançados apenas quando há compatibilidade:› Ex: drag and drop de arquivos no Gmail
Canvas
A estrela do HTML 5
O elemento <canvas>
• Grandes estrela do HTML 5
• Uma das primeiras funcionalidades implementada pelos browsers.
• Provê uma área onde é possível criar elementos gráficos › 2D › 3D (WebGL)
• Permite a manipulação de objetos gráficos através de uma API JavaScript› API de baixo nível› Alta performance› Renderizado como um bitmap
Exemplos: Animações
• Audioburst Animation› http://9elements.com/io/projects/html5/canvas
• Ball Pool› http://mrdoob.com/projects/chromeexperiments/ball_pool/
• Liquid Particles› http://spielzeugz.de/html5/liquid-particles.html
• Interactive Polaroid› http://www.addyosmani.com/resources/canvasphoto/
• Kaleidoscope› http://www.chiptune.com/kaleidoscope/
• Starfield› http://www.chiptune.com/starfield/starfield.html
Exemplos: 3D
• Cloth Simulation› http://www.andrew-hoyer.com/experiments/cloth/
• Graphycalc› http://www.graphycalc.com
• Pre3d› http://deanm.github.com/pre3d/monster.html
Exemplos: Aplicações
• Darkroom› http://mugtug.com/darkroom/
• CanvasMol› http://alteredqualia.com/canvasmol/
• Sketchpad› http://mugtug.com/sketchpad
• Smalltalk App› http://smalltalkapp.com
• RGraph› http://www.rgraph.net/
Exemplos: Jogos
• Chain Reaction› http://www.yvoschaap.com/chainrxn/
• Cubeout› http://alteredqualia.com/cubeout
Primeiros passos
<canvas id=“exemplo” width=“300" height=“300">
Texto exibido caso o navegador não seja compatível com Canvas.
</canvas>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
Audio e Video
O novo padrão de audio e video
• Até agora, o Flash era o padrão de video para Web
• HTML 5 propõe:› Entidades simples para reproduzir audio e video› API JS para manipulação› Acesso ao acelerador gráfico em hardware (GPU)
• Ainda não há consenso para o formato a ser adotado:› H.264 (mov, mp4) – Safari, Chrome
• Rápido e eficiente / Proprietário e pago› Ogg (Theora) – Firefox, Opera
• Open source / Inferior e sem suporte em hardware
<audio>
• autoplay: reproduz o arquivo quando a página carrega.
• controls: exibe os controles de reprodução.
• preload: pré-carrega o arquivo (buffer)
• src: caminho para o arquivo
• loop: o audio é sempre reiniciado quando chega ao final
• <source>: variações de formato do mesmo arquivo
<audio autoplay controls> <source src="file.ogg" /> <source src="file.mp3" /> </audio>
<video>
• autoplay: reproduz o video quando a página carrega.
• controls: exibe os controles de reprodução.
• autobuffer: pré-carrega o video (buffer)
<video width=‘400’ height=‘300’ controls autobuffer> <source src=‘video1.mp4' type='video/mp4‘ /> <source src=‘video1.ogv' type='video/ogg‘ /></audio>
<video> API
• Atributos:› duration› volume› currentTime› muted
• Eventos:› progress› ended› Pause
if (video.paused == false) {video.pause();
} else {video.play();
}
Exemplos
• Vimeo› http://vimeo.com/7289439
• Video Destruction› http://craftymind.com/factory/html5video/CanvasVideo.html
• HTML5 video.org› http://www.html5video.org
• Player Sublime Video› http://sublimevideo.net/
Miscelânea
Semântica
• Novas entidas para darem mais entendimento ao conteúdo.
Novos Seletores
• API DOM:
element = document.getElementById('section1');elements = document.getElementsByTagName('div');elements = document.getElementsByClassName(‘p');
• Sintaxe CSS:elements = document.querySelectorAll(‘ul#opcoes li');elements = document.querySelectorAll(‘#content .obs');
elements = document.querySelectorAll(‘div > p');
Armazenamento Local
• Provê uma maneira de armazenar dados no cliente.
• Útil em aplicações que podem rodar offline.
• Duas APIs:› Base de dados (SQL lite database)› Armazenamento estruturado (par chave/valor)
element = document.getElementById('section1');elements = document.getElementsByTagName('div');elements = document.getElementsByClassName(‘p');
Drag and Drop
• Uma nova API de manipulação de arquivos foi criada.
• É possível manipular arquivos provenientes de fora do browser.
• Novas classes:› FileList – Lista de arquivos selecionada do › Blob – Representa dados binários› File – Possui atributos do arquivo (nome, mediatype etc)› FileReader - Permite ler um arquivo
• Novos eventos para capturar as interações de Drag and Drop
Workers
• Aplicações nativas possuem processos e threads.
• Workers permitem criar processamento concorrente.
• Um processamento pesado pode ser colocado em uma thread separada.› A aplicação não fica bloqueada enquanto o cálculo é
realizado.› Util na construção de jogos.› Pode fazer melhor uso de processadores multicore.
Geolocalização
• É possível obter a posição geográfica do usuário.
• A localização pode ser obtida de várias fontes:› GPS› Triangulação de celular› IP Address› WiFi
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(pos){ var lat = pos.coords.latitude;
var lng = pos.coords.longitude; });}
Flash
O futuro do Flash
• O Flash vai morrer?› “Acho que não, não num futuro próximo”
• Vantagens› Multiplataforma e Cross-browser› Actionscript 3 é uma linguagem muito madura.› Acesso a dispositivos (microfone, webcam)› Formato de video consagrado› Facilidade de criar e customizar componentes
• Desvantagens› SEO (Search Engine Optimization)› Incompatibilidade com dispositivos móveis› Tecnologia proprietária
Quando usar Flash?
• O Flash é indicado para criar:› Aplicações, Ferramentas e Jogos
• O Flash não é indicado como ferramenta de conteúdo.› Problemas com SEO e acessibilidade.
• Aplicações Enterprise:› Acesso remoto usando protocolo binário (AMF)› Frameworks MVC : Swiz, Cairngorm, Mate, pureMVC etc
• Benchmarks indicam que o Flash tem performance superior ao Canvas.› http://www.themaninblue.com/writing/perspective/
2010/03/22/
Demonstrações
• Chrome Experiments› http://www.chromeexperiments.com/
• Apple› http://www.apple.com/html5/
• 48 Potential Flash-Killing Demos› http://www.hongkiat.com/blog/48-excellent-html5-demos/