• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Semântica do HTML5
 

A Semântica do HTML5

on

  • 10,840 views

Palestra ministrada no dia 28 de janeiro de 2010 na Campus Party Brasil....

Palestra ministrada no dia 28 de janeiro de 2010 na Campus Party Brasil.
"Como a Web Semântica (Web 3.0) vem se tornando cada vez mais realidade com a chegada do HTML5; O que essa nova versão da linguagem de marcação tem de diferente das anteriores, e quais vantagens nos trazem; HTML5 na prática: Cases com exemplos de utilização da nova versão."

Statistics

Views

Total Views
10,840
Views on SlideShare
9,912
Embed Views
928

Actions

Likes
11
Downloads
362
Comments
2

17 Embeds 928

http://www.agni.art.br 486
http://tecnobloggeroff.blogspot.com.br 199
http://www.frontend.blog.br 116
http://www.slideshare.net 42
http://www.thiagorsr.net 41
https://cursosrapidosonline.com.br 10
http://tecnobloggeroff.blogspot.com 9
http://brunosanc8.wordpress.com 6
http://www.edmodo.com 5
http://bitly.com 4
http://sistemasdoctum.blogspot.com 3
http://webcache.googleusercontent.com 2
https://www.cursosonlinecursos.com.br 1
http://us-w1.rockmelt.com 1
http://tecnobloggeroff.blogspot.pt 1
http://tecnobloggeroff.blogspot.de 1
https://www.xn--cursosonlinedaeducao-7yb1g.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

12 of 2 previous next

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

    A Semântica do HTML5 A Semântica do HTML5 Presentation Transcript

    • O que são os Padrões W eb? es, Padrões Web são um conjunto de normas, diretriz de recomendaçõ es, notas, artigos, tutoriais e afins . caráter técnico, produzidos pelo W3C É destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a dos. criação de uma Web acessível a to
    • A Web sem padrões... Código e Dificudade d Incompreensíve l Desen volvimento Para máquinas ção E Manuten Excesso de código Sem signi ficado e tação s Forma junta <table> a Estrutur
    • Div isão em Camadas... Javascript XHTML CSS CSS CSS
    • Anotem isso... Trabalhar com Web Standards não é uma questão de trocar tabelas por div's, é um a questão de Semântica!
    • Tableless Vs Web Stand ards r no Tableless é um termo que ficou muito popula Bras il, e que acaba por confundir muita gente. Tableless sig nifica um site desenvolvido sem o uso do da s tabelas para organizar o layout, e sim usan CSS. ja Cr iar um site Tableless não significa que este ém de se guindo os Padrões Web, que vão muito al um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade
    • Caso Mike Davidson foi o responsável pelo Rede sign do site da ESPN, seguindo os Padrões Web Média de redução de 50Kb por página Com isso, a economia de banda foi de: 2 Terabytes/dia 61 Terabytes/mês 730 Terabytes/ano
    • Caso uzidos Um dos primeiros sites acessíveis prod por uma empresa comercial ra Todo o Rede sign foi baseado nas Diretivas pa da W3C a acessi bilidade de conteúdo da Web, Com isso, as taxas de conversão aumentaram 300%, l custos de manuten ção caíram 66%, listagem natura nas buscas aumentou 50 %, e o tempo de carregamento da página caiu 75%
    • Estrutura... informação, como Uma estrutura de M L, deve conter documento s escritos em HT rcações com devido apenas ma marcações sem signifi cado. Adicionar e ser comparado a od significa do em um site p b ranco a um livro adicionar div ersas páginas em
    • Um código Semântico. .. Semântica refere-se ao estudo do significado. Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico” Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação” Criar uma “Marcação com Significado”
    • Compreensivel para humanos e máquinas Isso possibilitaria que informações úteis em diferentes sistemas fossem integradas para facilitar a vida das pessoas. Interoperabilidade
    • Marcação Semântica res Usar <tab le></table> apenas para dados tabula Usar <h1></h1> até <h6></h6> para títulos Usar <ol></ol> para Listas Ordenadas e <ul></ul> para Listas Não Ordenadas, seguidos do elemento <li></li> Usar <em></em> para Enfase, e <strong></strong> para Enfase Forte Usar <label></label> para identificar campos em formulários
    • Mas não é o suficiente
    • HTML5 ● Ian Hickson é o editor do HTML5 ● Desde 2008 vêm sendo apresentados rascunhos (Working Draft) ● Espera-se que essa nova versão seja liberada ainda em 2010 ● A previsão para que se torne uma “recomendação” é para 2012 ● Já é compreendido pelas versões mais recentes dos Browsers
    • HTML5 Browser como o Google Chrome, Firefox 3.5, Internet Explorer 8 e Safari 4 já dão suporte ao HTML5, e com isso algumas páginas já vão aderindo a nova versão
    • HTML5 API's para a criação de Gráficos 2D, controle de conteúdo multimídia, melhor depuração de erros e aprimoramento do uso offline são algumas das novidades da nova versão
    • HTML5 Novos elementos para identificar melhor os conteúdos, como <header> e <footer> para cabeçalho e rodapé, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.
    • HTML5 <header> Para definir onde será o cabeçalho da página <footer> Para definir onde será o rodapé da página ou da sessão
    • HTML5 <aside> Informações relativas ao conteúdo principal, como um menu ou campo de busca <dialog> Será usada para descrever dialogos, usando tags de termos de definição
    • HTML5 <figure> Para a inserção de imagens com legenda <figure id="1"> <img src="imagem.jpg" alt="descrição"> <legend>Legenda da Imagem</legend> </figure>
    • HTML5 <audio> Exibe qualquer elemento de streaming de áudio, com atributos para exibição de controles ou execução automatica. <audio src="horse.ogg" controls="controls"> Seu Navegador não suporta esse recurso </audio>
    • HTML5 <video> Exibe vídeos na página, com exibição de controles e de uma imagem enquanto o vídeo é carregado. <video src="movie.ogg" controls="controls"> Seu navegador não suporta esse recurso </video>
    • HTML5 <nav> Sessão de navegação, para links 'lado a lado'. <nav> <a href="default.asp">Home</a> <a href="tag_meter.asp">Anterior</a> <a href="tag_noscript.asp">Próximo</a> </nav>
    • HTML5 <menu> Serve para gerar um menu, com o auxílio da marcação <li>. <menu> <li><input type="checkbox" />Vermelho</li> <li><input type="checkbox" />Azul</li> </menu>
    • Para referência sobre todas as tag's http://www.w3schools.com/html5/html5_reference.asp Recomendo a leitura de “Refletindo sobre Semântica” http://tinyurl.com/beervb Acesso aos canais de participação dos grupos de trabalho http://www.whatwg.org/
    • Muito Obrigado :) os de Agni é diretor de arte online, trabalha com projet in terface, web standards e criação. www.twitter.com/eduagni www.formspring.me/eduagni www.a gni.art.br