HTML5, CSS3 e o futuro da web
Upcoming SlideShare
Loading in...5
×
 

HTML5, CSS3 e o futuro da web

on

  • 1,622 views

 

Statistics

Views

Total Views
1,622
Views on SlideShare
1,622
Embed Views
0

Actions

Likes
0
Downloads
55
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5, CSS3 e o futuro da web HTML5, CSS3 e o futuro da web Presentation Transcript

    • 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
    • VISÃO GERAL
    • 1. Histórico de versões
    • 1. Histórico de versõ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
      • elementos;
    • 5. Novos elementos e atributos
      Como era...
      <divid="header">
      <div
      id="nav">
      <divid="content">
      <divid="right">
      <divclass="article">
      <divid="footer">
    • 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
    • 6. Elementos descontinuados
    • 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
    • FORMULÁRIOS
    • 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
      • 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:
      <textareamaxlength=“50”></textarea>
    • 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:
      functionvCPF(i){
      i.setCustomValidity(validaCPF(i.value)?'':'CPF inválido!')
      }
      <input name=“cpf” oninput=“vCPF(this)” />
    • 5. COMPONENTES WEB APPLICATION
      • Barra de progresso
      <progressbarmax=“100“ value=“75“/>
      • Detalhes e sumário
      <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
      • 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
    • 5. COMPONENTES WEB APPLICATION
      • DragandDrop
      Eventos do objeto arrastado :
      Dragstart, drag, dragend
      Eventos do objeto que recebe o outro:
      dragenter, dragleave, dragover, drop
      <div id="box" ondrop="returndragDrop(event)" ondragover="returndragOver(event)"><div id="drag" draggable="true" ondragstart="returndragStart(event)">drag me</div> <div id="drag2" draggable="true" ondragstart="returndragStart(event)">drag me</div> </div>
    • MULTIMÍDIA
    • 1. ÁUDIO
      <audiosrc=“musica.oga“ controls=“true”autoplay=“true” />
      • Se controls for desabilitado será preciso controlar as operações do player via javascript
    • 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
      <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
      • Também suporta controle com vários sources
      <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
      • É 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 codecsTheora e Vorbis:
      <source src=“video.ogv” type=‘video/ogg; codecs=“theora,vorbis”’ />
      • Para MPEG-4:
      <source src=“video.mp4” type=‘video/mp4; codecs=“mp4v.20.240, mp4a.40.2”’ />
    • 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>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
      • O HTML5 incorpora a linguagem de marcação MathML
      <mathxmlns="http://www.w3.org/1998/Math/MathML"><mrow> <mi>x</mi> <mo>=</mo><mfrac><mrow><moform="prefix">&minus;</mo><mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</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>
    • 2. SVG
      • Linguagem para marcação de gráficos vetoriais
      • 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>
    • 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
    • 3. CANVAS API
      • Permite desenhar na tela do navegador via Javascript
      • O único elemento HTML existente para isso é o canvas:
      <canvasid=“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>
    • 3. CANVAS API
      www.effectgames.com/demos/canvascycle/
    • 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.
    • 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 = newEventSource(‘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
    • 4. SERVER-SENT EVENTS
      • Protocolo de comunicação
      • A página “messages.php” deve enviar mensagens no seguinte formato:
      data: mensagem 1id: 1data: mensagem com duasdata: linhasid: 2data: mensagem 3id: 3
      • Pelo ID é possível recuperar a última mensagem enviada através do valor no header HTTP Last-Event-ID
    • 5. MENUS E TOOLBARS
      <menu type=“toolbar”> <menu label="File”> <command onclick="fnew()" label="New..." /> <command onclick="fopen()" label="Open..." /> […] </menu> </menu>
    • 6. MICRODATA
      • Permite tornar a estrutura semântica um pouco mais específica, definindo o que é o conteúdo de cada elemento.
      <dl itemscopetemtype=“notas">
      <dt>nome</dt><dditemprop="nome">Diego</dd>
      <dt>total</dt><dditemprop="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>
    • 6. MICRODATA
      • Já existem vários padrões de metadados pré-definidos:
      <sectionitemscopeitemtype="http://data-vocabulary.org/Person">
      <h1itemprop="name">Diego Ernesto Rosa Pessoa</h1>
      <h2itemprop=“nickname">Diego Pessoa</h2>
      <a itemprop=“url”href=http://diegopessoa.com “>diegopessoa.com</a></section>
      • Usar formatos padronizados ajuda os sistemas de busca a tratar e entender esses dados
      • Mais informações em:
      http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861
    • 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;
    • 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
    • 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.cssmeu.js<html
      manifest=“meu.manifest">
    • 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);
      functionshowpos(position){
      lat=position.coords.latitude lon=position.coords.longitude
      alert('Yourposition: '+lat+','+lon)
      }
      • WatchPosition (rastrear a posição continuamente)
    • 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 e-mail pode guardar um objeto undo representando o fato do usuário mover um e-mail de uma pasta para outra.
      document.execCommand('undo')
      document.execCommand('redo')
    • CSS 3
    • 1. BORDAS ARREDONDADAS
    • 2. SOMBRAS
      • Regular
      • Interna
      box-shadow: -3px -3px 10px #212121;
      box-shadow: 0px 0px 10px #212121;
    • 2. SOMBRAS
      • Compatibilidade dos navegadores:
    • 3. MÚLTIPLOS BACKGROUNDS
      C
      background: url(body-top.gif) top leftno-repeat, url(banner.jpg) top 11px no-repeat, url(body-bottom.gif) bottomleftno-repeat, url(body-middle.gif) leftrepeat-y;
      Suporteatualapenas dos navegadoresbaseadosemWebkit
    • 4. FONTES EMBUTIDAS
      @font-face {
        font-family: SketchRockwell;
        src: url(‘SketchRockwell.ttf’);
      }
      .my_CSS3_class {
        font-family: SketchRockwell;
        font-size: 3.2em;
        text-shadow: 3px 3px 7px #111;
      }
    • 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:
      http://www.css3.com/
    • DEMONSTRAÇÕES
    • 1. Recursos / APIs
      • HTML5 Canvasanimation
      • WebSocket (Chat)
    • 2. JOGOS
      • LegendofSadness
      • PACMAM
      • Adventure Game
      • Torus (Tetris 3D)
    • Perguntas?
      Contato:
      E-mail: diegopessoa12@gmail.com
      Twitter: @diegopessoa
      Referências:
      http://tableless.com.br/html5/http://dev.w3.org/html5/spec/Overview.html