O papel do "devigner" e as novidades do HTML5. O novo profissional de Interfaces

Transcrição

1 O papel do "devigner" e as novidades do HTML5 O novo profissional de Interfaces

2 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

3 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

4 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

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

6 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, , 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

7 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

8 Exemplos: Animações Audioburst Animation Ball Pool Liquid Particles Interactive Polaroid Kaleidoscope Starfield Exemplos: 3D Cloth Simulation Graphycalc Pre3d

9 Exemplos: Aplicações Darkroom CanvasMol Sketchpad Smalltalk App RGraph Exemplos: Jogos Chain Reaction Cubeout

10 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

11 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

12 <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

13 Exemplos Vimeo Video Destruction HTML5 video.org Player Sublime Video Miscelânea

14 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');

15 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

16 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; }); }

17 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

18 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. 2/ Demonstrações Chrome Experiments Apple 48 Potential Flash-Killing Demos

19 Ricardo Paiva