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,992 views

 

Statistics

Views

Total Views
4,992
Views on SlideShare
4,983
Embed Views
9

Actions

Likes
6
Downloads
264
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; View slide
    • Define o formato do documento e as ligações com outros documentos;
  • HTML
    • Desenvolvido originalmente por Tim Berners-Lee; View slide
    • 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/