HTML5, CSS3 e o futuro da web

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

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

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.: Draganddrop

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

3. ESTRUTURA BÁSICA <!DOCTYPE HTML> <htmllang="pt-br"> <head> <metacharset="UTF-8"> <linkrel="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)

Flow Interactive Phrasing Heading Embedded Sectioning Metadata Flow: a abbraddressarea* articleasideaudio b bdoblockquotebrbuttoncanvas cite codecommanddatalistdeldetailsdfn div dl em embedfieldset figure footerform h1 h2 h3 h4 h5 h6 header hgrouphr i iframeimg input inskbdkeygenlabel link* mapmarkmath menu meta* meter navnoscriptobjectol output p preprogress q rubysamp script sectionselect small spanstrong style* sub supsvgtabletextarea time ul var videowbr PhrasingContent: a* abbrarea* audio b bdobrbuttoncanvas cite codecommanddatalistdel* dfn em embed i iframeimg input ins* kbdkeygenlabel link* map* markmath meta* meter noscriptobject output progress q rubysamp script select small spanstrong sub supsvgtextarea time var videowbrText* * Sob algumas circunstâncias. Embedded: Audio, canvas, embed, iframe, img, math, object, svg, video Metadata: Base, command, link, meta, noscript, script, style, title Interactive: a, audio*, button, details, embed, iframe, img*, input*, keygen, label, menu*, object*, select, textarea, video* * Sob algumas circunstâncias. Heading: h1, h2, h3, h4, h5, h6, hgroup Sectioning: Article, aside, nav, section

4. Novos elementos e atributos HTML deve indicar o tipo da informação exibida; 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; Quando lemos um livro é fácil identificar os tipos; Cabe ao desenvolvedor marcar a informação; Essa diferenciação era percebida apenas visualmente; Não havia maneira de detectar automaticamente estes elementos ,[object Object],[object Object]

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

5. Novos elementos e atributos

7. SUPORTE ATUAL PELOS BROWSERS Desenvolvimento Modular Motores de renderização: Webkit alcança aparelhos como Blackberry, iPhone, iPodTouch, iPad e dispositivos que rodam Android

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

1. Novos valores para o atributo type

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

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” />

4. TIPOS DE DADOS E VALIDADORES ,[object Object],<input name=“login“ type=“autofocus“/> ,[object Object],<input placeHolder=“Seu login aqui”/> ,[object Object],<input name=“login” required/> ,[object Object],<textareamaxlength=“50”></textarea>

4. TIPOS DE DADOS E VALIDADORES ,[object Object],<input name=“CEP“ pattern=“{5}-?{3}“/> ,[object Object],<input type=“submit” formnovalidate/> ,[object Object],functionvCPF(i){ i.setCustomValidity(validaCPF(i.value)?'':'CPF inválido!') } <input name=“cpf” oninput=“vCPF(this)” />

5. COMPONENTES WEB APPLICATION ,[object Object],<progressbarmax=“100“ value=“75“/> ,[object Object],<details> <summary>Copiando <progressmax="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>

5. COMPONENTES WEB APPLICATION ,[object Object],<div contenteditable=“true“>Edite-me</div> ,[object Object],spellcheck=“true“ ,[object Object]

Controle pode ser feito individualmente para cada elemento,[object Object]

1. ÁUDIO <audiosrc=“musica.oga“ controls=“true”autoplay=“true” /> ,[object Object],[object Object]

É preciso oferecer um formato alternativo de áudio

Ou até mesmo uma opção para baixar o conteúdo<audiocontrols=“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>

2. VÍDEO <videosrc=“video.ogv“ width=“400” height=“300” />

2. VÍDEO ,[object Object],<videocontrols=“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>

2. VÍDEO - CODECS ,[object Object]

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 codecsTheora e Vorbis: <source src=“video.ogv” type=‘video/ogg; codecs=“theora,vorbis”’ /> ,[object Object], <source src=“video.mp4” type=‘video/mp4; codecs=“mp4v.20.240, mp4a.40.2”’ />

É 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>functionupdate(stream) {document.getElementsByTagName(‘video’)[0].src = stream.url }</script> <devicetype=“media” onchange=“update(this.data)” /><videowidht=“400” height=“300” />

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

1. MATHML ,[object Object],<mathxmlns="http://www.w3.org/1998/Math/MathML"><mrow> <mi>x</mi> <mo>=</mo><mfrac><mrow><moform="prefix">−</mo><mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo> <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn> <mo>⁢</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

Também pode ser incorporada com facilidade<svgwidth=“400” height=“400”><rectx=“10” y=“10” width=“150” height=“50” stroke=“#000000” stroke-width=“5” fill=“#FF0000” /> <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" /> </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,[object Object]

O único elemento HTML existente para isso é o canvas:<canvasid=“x” width=“400” height=“400” /> ,[object Object],<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>

3. CANVAS API www.effectgames.com/demos/canvascycle/

3. CANVAS X SVG ,[object Object]

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

A performance é muito superior ao SVG

É fácil desenhar via Javascript. Em SVG é preciso escrever XML.,[object Object]

Servidor dispara o envio de dados ao cliente

Cria-se em javascript um objeto EventSource:es = newEventSource(‘messages.php’); es.onmessage=function(e){ alert(“Chegaram dados: "+e.data) } ,[object Object]

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,[object Object]

HTML5, CSS3 e o futuro da web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Destaque

Destaque (6)

Semelhante a HTML5, CSS3 e o futuro da web

Semelhante a HTML5, CSS3 e o futuro da web (20)

HTML5, CSS3 e o futuro da web