O papel do "devigner" e as novidades do HTML5

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
•
Novos componentes de formulário
•
•
•
•
•
•
•
•
•
•
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
› section, nav, footer, header, aside, details...
› tel, search, url, email, datetime, range, number, color...
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>
<audio autoplay controls>
<source src="file.ogg" />
<source src="file.mp3" />
</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
<video>
<video width=‘400’ height=‘300’ controls autobuffer>
<source src=‘video1.mp4' type='video/mp4‘ />
<source src=‘video1.ogv' type='video/ogg‘ />
</audio>
• autoplay: reproduz o video quando a página
carrega.
• controls: exibe os controles de reprodução.
• autobuffer: pré-carrega o video (buffer)
<video> API
if (video.paused == false) {
video.pause();
} else {
video.play();
}
• Atributos:
›
›
›
›
duration
volume
currentTime
muted
• Eventos:
› progress
› ended
› Pause
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/2
2/
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/
Ricardo Paiva
[email protected]
Twitter: @werneckpaiva