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/

Ricardo Paiva

werneck.paiva@gmail.com

Twitter: @werneckpaiva