• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Introdução a HTML5

on

  • 4,803 views

 

Statistics

Views

Total Views
4,803
Views on SlideShare
4,794
Embed Views
9

Actions

Likes
6
Downloads
256
Comments
0

2 Embeds 9

http://localhost 5
http://www.edmodo.com 4

Accessibility

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

    Introdução a HTML5 Introdução a HTML5 Presentation Transcript

    • INTRODUÇÃO A HTML5
      Salvador Torres
      @ssatorres
    • HTML
      • HTML = Hypertext Markup Language (Linguagem de Marcação de Hipertexo);
      • Linguagem Interpretada por um Browser;
      • Define o formato do documento e as ligações com outros documentos;
    • HTML
      • Desenvolvido originalmente por Tim Berners-Lee;
      • Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0;
      • Ainda não era um padrão;
    • HTML
      • Em 1997 o W3C criou a versão 3.2;
      • A partir daí HTML se tornou um padrão;
      • Em 1999 saiu a especificação do HTML4.
    • HTML
      • Tags básicas:
      • <a></a>;
      • <p></p>;
      • <img/>;
      • <div></div>
      • <table></table>
      • <iframe></iframe>
      • <br/>
    • HTML
      • Trocando em miúdos:
      • “O HTML é uma linguagem para publicação de conteúdo na Web (texto, imagem, vídeo, áudio, etc.)”.
    • W3C
    • W3C
      • World Wide Web Consortium;
      • Fundado por Tim Berners-Lee;
      • Visa levar a Web ao seu potencial máximo;
      • Fóruns abertos que promovam a sua evolução e assegurem a sua interoperabilidade.
    • W3C
      • Padrões:
      • CSS
      • DOM(JavaScript)
      • XML
      • XHTML 1.0
    • HTML5
    • HTML5
      • É a nova versão do HTML4;
      • Necessidade de criar elementos semânticos;
      • Ainda está em testes e a versão final é prometida para 2012;
    • HTML5
      • Cria novas tags e muda a função de outras;
      • Padrão para criação de sessões comuns como rodapé, cabeçalho, sidebar e menus.
    • HTML5
      • Muda a forma de escrever código e organizar a informação:
      • Mais semântica e menos código;
      • Mais interatividade sem plugins e perda de performance;
      • Código interoperável, pronto para futuros dispositivos;
      • Facilita a reutilização da informação de diversas formas.
    • HTML5 vs XHTML2
    • HTML5 vs XHTML2
      • WHATWG vs W3C;
      • WHATWG (Mozilla, Apple e Opera em 2004);
      • W3C -> XHTML2;
      • WHATWG -> HTML5
      • Mais flexibilidade;
      • Integrar Web Forms 2.0 e abandonar o Web Controls 1.0;
      • Retrocompatibilidade.
    • HTML5 vs XHTML2
      • Em 2006 a W3C reconheceu as vantagens do HTML5;
      • W3C e WHATWG passaram a trabalhar em conjunto;
    • Conhecendo HTML5
    • Novos Recursos
      • Controle embutido de conteúdo multimídia (Áudio e Vídeo);
      • Desenvolvimento de gráficos bidimensionais;
      • Aprimoramento do uso off-line;
      • Geolocalização;
      • Validação de Formulários nativa;
      • DragandDrop.
    • Estrutura Básica
      • XHTML
    • Estrutura Básica
      • HTML5
      • O atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
    • Estrutura Interna
      • XHTML
    • Estrutura Interna
      • HTML5
    • Novos Elementos
      • <section>
      •  define uma nova seção genérica no documento (introdução ou destaque, novidades, etc.);
      • <nav>
      • seção da página que contém links (importantes) para outras partes do website;
    • Novos Elementos
      • <article>
      • parte da página que poderá ser distribuída e reutilizada em FEEDs por exemplo (post, artigo, um bloco de comentários de usuários, etc.);
      • <aside>
      • define uma área de conteúdo relacionado ao seu conteúdo principal (sidebars em textos impressos, publicidade, etc.);
    • Novos Elementos
      • <hgroup>
      • agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis de títulos;
      • <time>
      • marcar parte do texto que exibe um horário ou uma data;
    • Novos Elementos
      • <header>
      • grupo de introdução ou elementos de navegação (índices de conteúdos, campos de busca ou até mesmo logomarcas);
      • <footer>
      • representa literalmente o rodapé da página.
    • Novos Elementos
      • Os novos elementos possibilitaram uma nitidez maior no código;
      • É possível diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho;
    • Novos Elementos
      • Os buscadores conseguem vasculhar o código de maneira mais eficaz;
      • Guardando informações mais exatas e levando menos tempo para estocar essa informação.
    • Elementos removidos
      • <frame>
      • Fere princípios de acessibilidade;
      • <basefont>,<big>,<center>,<font>,<s>,<strike>,<tt>,<u>
      • Efeito somente visual;
    • Elementos Alterados
      • <address>
      • agora é tratado como uma seção no documento;
      • <hr>
      • mesmo nível que um parágrafo;
      • <strong>
      • ganhou mais importância.
    • Web Semântica
    • Suporte dos Browsers
      • http://html5test.com/
    • Suporte dos Browsers
    • Formulários
      • <input />
      • Novos valores para type
      • tel (sem formatação ou mascara);
      • search (mudar a aparência para parecer com os demais do sistema);
      • email (validação do email podendo ainda integrar com a agenda de contatos);
      • url (formatação e validação de endereços web);
    • Formulários
      • <input />
      • Novos valores para type
      • Datas e horas (calendário, um seletor de horário ou outro auxílio ao preenchimento);
      • Number (aceita somente numeros);
      • range (valores numéricos porém com uma barra de seleção);
      • color (paleta de cores com resultado #000FFF)
    • Formulários
      • Mais recursos
      • autofocus
      • o foco será colocado neste campo automaticamente ao carregar a página;
      • <input name="login" autofocus/>
      • Placeholdertext
      • texto padrão do campo antes do foco ir para ele;
      • <input name="q" placeholder="Pesquisa"/>
    • Formulários
      • Mais recursos
      • required
      • transformar o campo em obrigatório;
      • <input name="login" required/>
      • maxlength
      • o atributo agora também está disponível no textarea;
    • Formulários
      • Mais recursos
      • Customvalidators
      • definir expressões regulares de validação, sem Javascript;
      • <input name="cpf" oninput="vCPF(this)"/>
      • contenteditable
      • tornar um elemento do HTML editável.
      • <div contenteditable="true">
      Edite-me...
      </div>
      http://html5demos.com/contenteditable
    • Formulários
      • Mais recursos
      • pattern
      • definir expressões regulares de validação, sem Javascript;
      • <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" />
    • Formulários
      • Todos os recursos:
      • http://slides.html5rocks.com/#slide21
    • API Storage
      • Um dos grandes desafios de usabilidade é criar uma navegação consistente
      • ações locais do usuário numa página fossem refletidas na próxima.(Menu em árvore);
      • histórico com o uso de Ajax.
    • API Storage
      • Soluções:
      • Histórico de Sessão
      • elemento history;
      • localStorage e sessionStorage
      • Antes
      • Cookies (Interface complexa e Limite de armazenamento);
      • Agora
      • localStorage(armazena os dados no client sem expiração definida) ;
      • sessionStorage(armazena os dados durante a sessão atual de navegação).
    • API Storage
      • Exemplo
      • http://slides.html5rocks.com/#slide7
    • Drag and Drop
      • Exemplo
      • http://slides.html5rocks.com/#slide13
    • Midias com HTML5
      • Áudio
      • <audiocontrols="true" autoplay="true">
      <source src="mus.oga" />
      <source src="mus.mp3" />
      <source src="mus.wma" />
      <p>Faça o <a href="mus.mp3">download da música</a>.</p>
      </audio>
      • O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela;
      • O estilo dos botões é definido pelo browser.
    • Midias com HTML5
      • Vídeo
      • <videocontrols="true" autoplay="true" width="400“ height="300">
      <source src="u.ogv" />
      <source src="u.mp4" />
      <source src="u.wmv" />
      <p>Faça o <a href="u.mp4">download do vídeo</a>.</p>
      </video>
    • Midias com HTML5
      • Youtube (http://youtube.com/html5)
    • Midias com HTML5
      • Sublime http://sublimevideo.net/demo)
    • Midias com HTML5
      • Exemplo
      • http://slides.html5rocks.com/#slide22
    • Midias com HTML5
      • Elemento device
      • Webcam
      • <devicetype="media">
      • interface solicitando ao usuário acesso a sua webcam. Se ele tiver mais de uma, também será permitido que ele escolha que webcam usar;
      • Stream
      • basta trocar o valor “media” por “fs”.
    • Canvas
      • A Canvas API permite a você desenhar na tela do navegador via Javascript. O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript. 
      • <canvas id="x" width="300" height="300"></canvas>
    • Canvas
      • Com a tagcanvas é possível criar gráficos, games, aplicações web, etc.
    • Canvas
      • Exemplos
      • http://mugtug.com/sketchpad/
      • http://media.chikuyonok.ru/ambilight/
      • http://html5demos.com/canvas-grad
      • http://slides.html5rocks.com/#slide23
    • SVG
      • SVG é uma linguagem para marcação de gráficos vetoriais.  
      • Retângulo
      • <rect x="10" y="10" width="150" height="50" stroke="#000" stroke-width="5" fill="#FF0000" />
      • Circulo
      • <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
    • SVG
      • Exemplos
      • http://slides.html5rocks.com/#slide26
      • http://slides.html5rocks.com/#slide27
    • SVG
      • Logomarca da Wikipedia
    • Geolocation
      • Há três maneiras populares programa descobrir sua posição global:
      • Geolocalização IP
      • É o método usado pela maioria dos navegadores web em computadores. Através de consultas whois e serviços de localização de IP, vai determinar a cidade ou região em que você está.
      • Triangulação GPRS
      • Dispositivos conectados a uma rede de celulares podem determinar sua posição pela triangulação das antenas GPRS próximas. É bem mais preciso que o método baseado em IP, vai mostrar em que parte do bairro você está.
      • GPS
      • É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5 metros.
    • Geolocation
      • navigator.geolocation.getCurrentPosition(showpos)
      • Onde showpos é uma função callback, que vai receber um objeto de posicionamento. Veja um exemplo:
      • functionshowpos(position){
      lat = position.coords.latitude
      lon = position.coords.longitude
      alert('Yourposition: '+lat+','+lon)
      }
    • Geolocation
      • Exemplos
      • http://html5demos.com/geo
      • http://slides.html5rocks.com/#slide14
    • Sites interessantes
      • http://html5demos.com/
      • http://html5-showcase.com/
      • http://html5rocks.com/
    • Referências
      • http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
      • http://pt.wikipedia.org/wiki/HTML5
      • http://w3c.br/cursos/html5/conteudo/