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> <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 werneck.paiva@gmail.com Twitter: @werneckpaiva