ROTEIRO VISÃO GERAL FORMULÁRIOS MULTIMÍDIA A NOVA GERAÇÃO DE APLICAÇÕES WEB CSS 3 DEMONSTRAÇÕES

Transcrição

1

2 SOBRE O PALESTRANTE Desenvolvedor Web e líder técnico do projeto ICD (Intercâmbio de Conteúdos Digitais) pela Dynavideo Mestrando em Informática pela UFPB Tecnólogo em Sistemas para Internet pelo IFPB

3 ROTEIRO VISÃO GERAL FORMULÁRIOS MULTIMÍDIA A NOVA GERAÇÃO DE APLICAÇÕES WEB CSS 3 DEMONSTRAÇÕES

4 VISÃO GERAL

5 1. Histórico de versões

6 1. Histórico de versões

7 2. HTML 5 e suas mudanças Lançado o HTML a W3c alertou sobre as boas práticas; Como separação da estrutura do código e formatação; Porém, HTML4 não trazia diferença real para semântica; HTML4 também não facilitava manipulação de elementos via Javascript ou CSS Ex.: Drag and drop

8 2. HTML 5 e suas mudanças Criação de APIs que formarão a base da arquitetura Web Fácil manipulação de objetos de forma transparente ao usuário Ferramentas para CSS e Javascript Novas tags e recursos Seções, componentes de formulário, gráficos, multimídia, etc Maior semântica, código interoperável Retrocompatibilidade

9 3. ESTRUTURA BÁSICA <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" ref="estilo.css"> <title></title> </head> <body> </body> </html> Doctype: indica a especificação em uso ao browser ou dispositivo HTML: lang é necessário para que os user-agents saibam a linguagem principal do documento Link: rel pode assumir outros valores como ALTERNATE, mapeando por exemplo um feed como (application/atom+xml)

10 4. Novos elementos e atributos elementos; HTML deve indicar o tipo da informação exibida; Quando lemos um livro é fácil identificar os tipos; Robôs de busca não conseguem diferenciá-los. Em versões anteriores, era possível diferenciar um parágrafo de um título, mas não o rodapé do cabeçalho; Cabe ao desenvolvedor marcar a informação; Essa diferenciação era percebida apenas visualmente; Não havia maneira de detectar automaticamente estes elementos

11 5. Novos elementos e atributos Como era... <div id="header"> <div class="article"> <div id="nav"> <div id="content"> <div id="right"> <div id="footer">

12 5. Novos elementos e atributos Como será... <header> <article> HTML 5 trouxe elementos que ajudam a definir setores principais; <nav> <section> <footer> <aside> Pode-se diferenciar áreas como sidebar, rodapé, cabeçalho; Tais mudanças simplificam o trabalho dos sistemas de busca;

13 5. Novos elementos e atributos

14 6. Elementos descontinuados

15 7. SUPORTE ATUAL PELOS BROWSERS Desenvolvimento Modular Motores de renderização: Motor Webkit Gecko Browser Safari, Google Chrome Firefox, Mozilla, Camino Trident Internet Explorer 4 ao 9 Presto Opera 7 ao 10 Webkit alcança aparelhos como Blackberry, iphone, ipod Touch, ipad e dispositivos que rodam Android

16 8. COMPATIBILIDADE COM HTML5 Atualmente Webkit é o motor mais compatível Firefox e opera já estão compatíveis com boa parte

17 FORMULÁRIOS

18 1. Novos valores para o atributo type tel search Não há máscara ou validação; Integração com agenda de contatos, útil em celulares. Muda ligeiramente de acordo com o navegador. url datetime number range color Formatação e validação; Integração com agenda de contatos Endereço web com formação e validação; Validação, formatação e calendários; Usa-se também: date, month, week, time e datetime-local Validação e formatação; Componente personalizado. Componente personalizado para números. Seletor de cores

19 2. Datas e Horas <input type= datetime step= 10 /> Outros tipos disponíveis: datetime date month week time datetime-local

20 3. Números <input value= 7 type= number step= 1 min= 1 max= 20 /> <input value= 7 type= range step= 1 min= 1 max= 20 />

21 4. TIPOS DE DADOS E VALIDADORES Foco automático antes do carregamento da página: <input name= login type= autofocus /> Suporte a placeholder: <input placeholder= Seu login aqui /> Required: <input name= login required /> Max-length para textarea: <textarea maxlength= 50 ></textarea>

22 4. TIPOS DE DADOS E VALIDADORES Validação com REGEX: <input name= CEP pattern= \d{5}-?\d{3} /> Submeter sem validação: <input type= submit formnovalidate /> Validador personalizado: function vcpf(i){ i.setcustomvalidity(validacpf(i.value)?'':'cpf inválido!') } <input name= cpf oninput= vcpf(this) />

23 5. COMPONENTES WEB APPLICATION Barra de progresso <progressbar max= 100 value= 75 /> Detalhes e sumário <details> <summary>copiando <progress max="39248" value="14718"> 37,5%</summary> <dl> <dt>tamanho total:</dt> <dd>39.248kb</dd> <dt>transferido:</dt> <dd>14.718</dd> <dt>taxa de transferência:</dt> <dd>127kb/s</dd> <dt>nome do arquivo:</dt> <dd>html5.mp4</dd> </dl> </details>

24 5. COMPONENTES WEB APPLICATION Conteúdo editável <div contenteditable= true >Edite-me</div> Revisão ortográfica e gramatical spellcheck= true Utiliza o revisor ortográfico disponível na plataforma Controle pode ser feito individualmente para cada elemento

25 5. COMPONENTES WEB APPLICATION Drag and Drop Eventos do objeto arrastado : Dragstart, drag, dragend Eventos do objeto que recebe o outro: dragenter, dragleave, dragover, drop <div id="box" ondrop="return dragdrop(event)" ondragover="return dragover(event)"> <div id="drag" draggable="true" ondragstart="return dragstart(event)"> drag me</div> <div id="drag2" draggable="true" ondragstart="return dragstart(event)">drag me</div> </div>

26 MULTIMÍDIA

27 1. ÁUDIO <audio src= musica.oga controls= true autoplay= true /> Se controls for desabilitado será preciso controlar as operações do player via javascript

28 1. ÁUDIO Nem todo browser suporta o codec livre OggVorbis É preciso oferecer um formato alternativo de áudio Ou até mesmo uma opção para baixar o conteúdo <audio controls= true autoplay= true /> <source src= musica.oga /> <source src= musica.mp3 /> <source src= musica.wma /> <p>faça o download <a href= musica.mp3 >da música</a>.</p> </audio>

29 2. VÍDEO <video src= video.ogv width= 400 height= 300 />

30 2. VÍDEO Também suporta controle com vários sources <video controls= true autoplay= true /> <source src= video.ogg /> <source src= video.mp4 /> <source src= video.wmv /> <p>faça o download <a href= video.mp4 >do vídeo</a>.</p> </video>

31 2. VÍDEO - CODECS É importante incluir informações a respeito do container e codecs utilizados Isso antecipa a detecção de alguma incompatibilidade A extensão do arquivo não é relevante para isso Para indicar essas informações usa-se o atributo type Para OGG usando os codecs Theora e Vorbis: <source src= video.ogv type= video/ogg; codecs= theora,vorbis /> Para MPEG-4: <source src= video.mp4 type= video/mp4; codecs= mp4v , mp4a.40.2 />

32 2. VÍDEO ELEMENTO DEVICE É possível inserir no HTML um elemento de acesso à Webcam do usuário Solicita confirmação do usuário para acesso Em caso de mais de um dispositivo, será possível escolher um para fazer stream <script> function update(stream) { document.getelementsbytagname( video )[0].src = stream.url } </script> <device type= media onchange= update(this.data) /> <video widht= 400 height= 300 />

33 A NOVA GERAÇÃO DE APLICAÇÕES WEB

34 1. MATHML O HTML5 incorpora a linguagem de marcação MathML <math xmlns=" <mrow> <mi>x</mi> <mo>=</mo><mfrac> <mrow><mo form="prefix"> </mo><mi>b</mi> <mo>&plusminus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> </mo> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>a</mi> <mo>&invisibletimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn> <mo>&invisibletimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

35 2. SVG Linguagem para marcação de gráficos vetoriais Também pode ser incorporada com facilidade <svg width= 400 height= 400 > <rect x= 10 y= 10 width= 150 height= 50 stroke= # stroke-width= 5 fill= #FF0000 /> <circle cx="70" cy="240" r="60" stroke="#00ff00" strokewidth="5" fill="#ffffff" /> </svg>

36 2. SVG A maioria dos editores gráficos vetoriais exporta e importa automaticamente SVG Pode-se construir javascript para manipular SVG, usando métodos do DOM Isso possibilita gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em javascript e sem tecnologias proprietáris e plugins

37 3. CANVAS API Permite desenhar na tela do navegador via Javascript O único elemento HTML existente para isso é o canvas: <canvas id= x width= 400 height= 400 /> Para desenhar: <script> function desenhar() { context=document.getelementbyid('x').getcontext('2d'); context.fillrect(10, 10, 50, 150); //x,y,w,h context.fillstyle='#ff0 ; context.fill(); } </script>

38 3. CANVAS API

39 3. CANVAS X SVG SVG: O Conteúdo é acessível a leitores de tela O gráfico é escalável, não perde resolução ou serrilha ao redimensionar O conteúdo é acessível via DOM Canvas: A performance é muito superior ao SVG É fácil desenhar via Javascript. Em SVG é preciso escrever XML.

40 4. SERVER-SENT EVENTS Maneira de inverter o fluxo das aplicações Ajax Servidor dispara o envio de dados ao cliente Cria-se em javascript um objeto EventSource: es = new EventSource( messages.php ); es.onmessage=function(e){ alert( Chegaram dados: "+e.data) } Isso vai abrir uma conexão HTTP com messages.php O cliente se mantém escutando e cada vez que o servidor enviar dados, o evento message será disparado Pode ser utilizado para implementar chat ou monitor de status de alguma operação demorada que esteja ocorrendo no servidor

41 4. SERVER-SENT EVENTS Protocolo de comunicação A página messages.php deve enviar mensagens no seguinte formato: data: mensagem 1 id: 1 data: mensagem com duas data: linhas id: 2 data: mensagem 3 id: 3 Pelo ID é possível recuperar a última mensagem enviada através do valor no header HTTP Last-Event-ID

42 5. MENUS E TOOLBARS <menu type= toolbar > <menu label="file > <command onclick="fnew()" label="new..." /> <command onclick="fopen()" label="open..." /> [ ] </menu> </menu>

43 6. MICRODATA Permite tornar a estrutura semântica um pouco mais específica, definindo o que é o conteúdo de cada elemento. <dl itemscope temtype= notas"> <dt>nome</dt><dd itemprop="nome">diego</dd> <dt>total</dt><dd itemprop="total">9.7</dd> </dl> <script> resultados=document.getitems( notas ); for(var i=0;i<resultados.length;i++){ alert(resultados[i].properties.nome[0].content+": R$ "+ resultados[i].properties.total[0].content) } </script>

44 6. MICRODATA Já existem vários padrões de metadados prédefinidos: <section itemscope itemtype=" <h1 itemprop="name">diego Ernesto Rosa Pessoa</h1> <h2 itemprop= nickname">diego Pessoa</h2> <a itemprop= url href= >diegopessoa.com</a> </section> Usar formatos padronizados ajuda os sistemas de busca a tratar e entender esses dados Mais informações em: wer.py?hl=en&answer=146861

45 7. HISTÓRICO DE SESSÃO Um grande desafio de aplicações web é apresentar um modelo de navegação consistente para o usuário. Famoso problema do back-button O objeto history foi vitaminado no HTML5 com dois novos métodos: pushstate(data,title[,url]): acrescenta uma entrada na lista de histórico. replacestate(data,title[,url]): modifica a entrada atual na lista de histórico. Com isso, pode-se acrescentar itens à lista de histórico, associando dados ou mesmo uma URL;

46 8. STORAGE API Nova maneira de armazenar dados no cliente (alternativa aos cookies) Objeto Storage possui os métodos: getitem(key); setitem(key); removeitem(key); clear(); Dois objetos disponíveis: localstorage sessionstorage

47 9. APLICAÇÕES OFF-LINE HTML5 provê uma maneira de se indicar ao navegador que elementos devem ser postos em cache para que uma aplicação funcione offline. Para permitir que o usuário acesse uma página offiline é preciso escrever um arquivo de manifesto, indicando que URLs devem ser postas em cache. CACHE MANIFEST meu.html meu.css meu.js <html manifest= meu.manifest">

48 10. GEOLOCATION API Três métodos: Geolocalização IP: localização através de consultas whois Triangulação GPRS: rede de celulares sem GPS ou GPS desabilitado GPS: método mais preciso, margem de erro de apenas 5 metros navigator.geolocation.getcurrentposition(showpos); function showpos(position){ lat=position.coords.latitude lon=position.coords.longitude alert('your position: '+lat+','+lon) } Watch Position (rastrear a posição continuamente)

49 11. UNDO Navegador guarda um histórico de alterações para cada documento; Histórico controlado pelo objeto UndoManager, acessível através de window.undomanager. O histórico guarda dois tipos de alterações: Alterações DOM Objetos undo Ex.: uma aplicação de pode guardar um objeto undo representando o fato do usuário mover um de uma pasta para outra. document.execcom mand('undo') document.execcom mand('redo')

50 CSS 3

51 1. BORDAS ARREDONDADAS

52 2. SOMBRAS Regular box-shadow: -3px -3px 10px #212121; Interna box-shadow: 0px 0px 10px #212121;

53 2. SOMBRAS Compatibilidade dos navegadores:

54 3. MÚLTIPLOS BACKGROUNDS background: url(body-top.gif) top left no-repeat, url(banner.jpg) top 11px no-repeat, C url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y; Suporte atual apenas dos navegadores baseados em Webkit

55 4. FONTES { font-family: SketchRockwell; src: url( SketchRockwell.ttf ); }.my_css3_class { font-family: SketchRockwell; font-size: 3.2em; text-shadow: 3px 3px 7px #111; }

56 4. E MUITO MAIS... Bordas com imagem Degradê em background Transparência de elementos Layouts multi-ccolunas Transformações 2D e 3D de imagens (girar, perspectiva, etc) Animações Controle do conteúdo de um elemento Etc... Mais informações em:

57 DEMONSTRAÇÕES

58 1. Recursos / APIs HTML5 Canvas animation WebSocket (Chat)

59 2. JOGOS Legend of Sadness Adventure Game PACMAM Torus (Tetris 3D)

60 Perguntas? Contato: Referências: