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.
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 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...
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,
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:
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
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.htmlExemplos: 3D
•
Cloth Simulation
› http://www.andrew-hoyer.com/experiments/cloth/•
Graphycalc
› http://www.graphycalc.com•
Pre3d
› http://deanm.github.com/pre3d/monster.htmlExemplos: 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/cubeoutPrimeiros 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);
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 › Pauseif (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/
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
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
