Html5 - Notas de aula

815 visualizações

Publicada em

Notas de aula da disciplina Design para Web

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
815
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
35
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html5 - Notas de aula

  1. 1. N O T A S D E A U L AM A R Ç O / 2 0 1 3
  2. 2. Resumo de vários artigos encontrados na internet:Introdução a HTML5 ssatorres (Salvador Torres)http://www.slideshare.net/ssatorres/introduo-a-html5Minicurso HTML5 Manoel dos Santoshttp://www.slideshare.net/manoeldossantos/minicurso-html5Taking Advantage of HTML5 and CSS3 with Modernizr FARUK ATEŞhttp://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizrHabilitar HTML5 no Internet Explorer Pedro Rogériohttp://www.pinceladasdaweb.com.br/blog/2010/09/10/habilitar-html5-no-internet-explorer/Tableless.com.brhttp://tableless.com.br/html5/HTML5
  3. 3.  De acordo com o W3C a Web é baseada em 3 pilares: Um esquema de nomes para localização de fontesde informação na Web, esse esquema chama-seURI. Um Protocolo de acesso para acessar estas fontes,hoje o HTTP. Uma linguagem de Hypertexto, para a fácilnavegação entre as fontes de informação: o HTML.
  4. 4.  Conjunto de especificações técnicas e guidelines parainterpretação e criação de web sites W3C - World Wide Web Consortium SEOArquivos menoresAcessibilidadeCompatibilidadeFácil manutençãoFlexibilidade de layoutWeb Standards
  5. 5.  W3C - World Wide Web ConsortiumPadrões: CSS DOM(JavaScript) XML XHTML 1.0Web Standards
  6. 6.  HTML4 - boas práticas que deveriam ser seguidas aoproduzir códigos client-side.A separação da estrutura do código com a formatação eprincípios de acessibilidade HTML4 ainda não trazia diferencial real para asemântica do código. HTML4 também não facilitava a manipulação doselementos via Javascript ou CSS.O HTML5 e suas mudanças
  7. 7.  HTML5 fornece ferramentas para a CSS e o Javascript fazerem seutrabalho da melhor maneira possível. HTML5 facilita a manipulação dos elementos possibilitando aodesenvolvedor modificar as características dos objetos de forma nãointrusiva e de maneira que seja transparente para o usuário final. HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal paraa criação de seções comuns e específicas como rodapé, cabeçalho,sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs,Classes ou tags. Não havia um método de capturar de maneiraautomática as informações localizadas nos rodapés dos websites.O HTML5 e suas mudanças
  8. 8. O HTML5 e suas mudanças
  9. 9.  Há uma grande diversidade de dispositivos que acessam a internet.Entre eles, há uma série de tablets, smartphones, pcs e etc. Cada umdestes meios de acesso utilizam um determinado browser para navegarna web.Motores de RenderizaçãoMotor BrowserWebkit Safari, Google ChromeGecko Firefox, Mozilla, CaminoTrident Internet Explorer 4 ao 9Presto Opera 7 ao 10
  10. 10. Motores de Renderização
  11. 11. Técnicas de detecção Pode ser que o usuário não utilize um browser que suporta HTML51. Mensagem alertando o usuário sobre a importância da atualização dobrowser2. Empregar hacks CSS e usar browser sniffing. Prática não confiável3. Usando detecção manual fica cansativoFerramentas de detecção
  12. 12. Técnicas de detecçãoFerramentas de detecção HTML5 shivPara habilitar as novas tags do HTML5 no InternetExplorer, você precisa inserir um simples códigojavascript na sua página para que o IE possa entender asnovas tags. O código responsável é o seguinte:<!--[if lt IE 9]><scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>< ![endif]-->
  13. 13. Técnicas de detecçãoFerramentas de detecção Google Chrome FrameUma ferramenta criada pelo Google para dar um „up‟no Internet Explorer.http://code.google.com/chrome/chromeframe/
  14. 14. Técnicas de detecçãoFerramentas de detecção ModernizrModernizr é uma biblioteca criada para detectarsuporte a HTML5 e CSS3 no browser, e caso omesmo não possua suporte, proporcione o mesmovia JavaScript.http://www.modernizr.com/
  15. 15. Modernizr Ao incorporar o script Modernizr na sua página,ele detecta se o navegador atual suporta recursoscomo CSS3@font-face, border-radius, border-image,box-shadow, rgba()e assim por diante, bem como recursos HTML5como áudio, vídeo, localStorage, e osnovos <input> tipos de elementos e atributos.
  16. 16. Modernizr Assim, se você quiser verificar se o browser suporta Geolocalização, porexemplo, basta inserir este script na página.Se o browser suportar a feature testada, ele retornará true:if (Modernizr.geolocation) {// Aceita a feature}else {// Não aceita a feature testada.}
  17. 17. HTMLTags básicas:• <a></a>;• <p></p>;• <img/>;• <div></div>• <table></table>• <iframe></iframe>• <br/>• Etc ...
  18. 18. HTML5Muda 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.
  19. 19. XHTML
  20. 20. HTML5Muda a forma de escrever código e organizar a informação: O atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado emqualquer outro elemento para indicar o idioma do texto representado. O atributo LANG é necessário para que os user-agents saibam qual a linguagemprincipal do documento.
  21. 21. HTML5HEADA Tag HEAD é onde fica toda a parte inteligente da página. No HEADficam os metadados. Metadados são informações sobre a página e oconteúdo ali publicado.Metatag CharsetNo nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres apágina está utilizando.<meta charset="utf-8">Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  22. 22. HTML5<div id=“header”><divid=“nav”><div id=“footer”><divid=“sidebar”><div class=“section”><div class=“article”>
  23. 23. HTML5<header><nav><footer><aside><section><article>
  24. 24. <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) paraoutras partes do website;HTML5
  25. 25. <article> parte da página que poderá ser distribuída e reutilizadaem FEEDs por exemplo (post, artigo, um bloco decomentários de usuários, etc.);<aside> define uma área de conteúdo relacionado ao seu conteúdoprincipal (sidebars em textos impressos, publicidade,etc.);HTML5
  26. 26. <hgroup> agrupar elementos de título de H1 até H6 quando eles temmúltiplos níveis de títulos;<time> marcar parte do texto que exibe um horário ou uma data;HTML5
  27. 27. <header> grupo de introdução ou elementos de navegação (índices deconteúdos, campos de busca ou até mesmo logomarcas);<footer> representa literalmente o rodapé da página.HTML5
  28. 28. Os novos elementos possibilitaram uma nitidezmaior no código;É possível diferenciar diretamente pelo códigoHTML5 áreas importantes do site como sidebar,rodapé e cabeçalho;HTML5
  29. 29. Os buscadores conseguem vasculhar o código demaneira mais eficaz;Guardando informações mais exatas e levandomenos tempo para estocar essa informação.HTML5
  30. 30. Elementos descontinuados align como atributo datag caption, iframe, img, input, object, legend, table, hr, div,h1, h2, h3, h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. alink, link, text e vlink como atributos da tag body. background como atributo da tag body. bgcolor como atributo da tag table, tr, td, th e body. border como atributo da tag table e object. cellpadding e cellspacing como atributos da tag table. char e charoff como atributos datag col, colgroup, tbody, td, tfoot, th, thead e tr. clear como atributo da tag br. compact como atributo da tag dl, menu, ol e ul.HTML5
  31. 31. Elementos descontinuados frame como atributo da tag table. frameborder como atributo da tag iframe. height como atributo da tag td e th. hspace e vspace como atributos da tag img e object. marginheight e marginwidth como atributos da tag iframe. noshade como atributo da tag hr. nowrap como atributo da tag td e th. rules como atributo da tag table. scrolling como atributo da tag iframe. size como atributo da tag hr. type como atributo da tag li, ol e ul. valign como atributo datag col, colgroup, tbody, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e preHTML5
  32. 32. Elementos removidos<frame> <frameset> <noframes> Fere princípios de acessibilidade;<basefont>,<big>,<center>,<font>,<s>,<strike>,<tt><u> Efeito somente visual;HTML5
  33. 33. Elementos modificados O elemento B passa a ter o mesmo nível semânticoque um SPAN, mas ainda mantém o estilo denegrito no texto. Contudo, ele não dá nenhumaimportância para o texto marcado com ele. O elemento I também passa a ser um SPAN. Otexto continua sendo itálico e para usuários deleitores de tela, a voz utilizada é modificada paraindicar ênfase. Isso pode ser útil para marcarfrases em outros idiomas, termos técnicos e etc.HTML5
  34. 34. Elementos Alterados<address> agora é tratado como uma seção no documento;<hr> mesmo nível que um parágrafo;<strong> ganhou mais importância.<a> sem o atributo href agora representa um placeholder no exatolugar que este link se encontra<head> não aceita mais elementos child como seu filhoHTML5
  35. 35. HTML5Suporte dos Browsershttp://html5test.com/
  36. 36. HTML5http://slides.html5rocks.com/#semantic-tags-1
  37. 37. HTML5http://slides.html5rocks.com/#semantic-tags-2
  38. 38. HTML5Tag LINKHá dois tipos de links no HTML: a tag A, que são links que levam o usuário para outrosdocumentos e a tag LINK, que são links para fontes externas que serão usadas no documento.No nosso exemplo há uma tag LINK que importa o CSS para nossa página:<link rel="stylesheet" type="text/css" href="estilo.css">O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a folhas deestilo.Há outros valores para o atributo REL, como por exemplo o ALTERNATE:<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em umcaminho alternativo via Atom FEED.No HTML5 há outros links relativos que você pode inserir como o rel="archives" que indica uma referência auma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode serreferenciada nesta tag.
  39. 39. HTML5http://slides.html5rocks.com/#link-relations
  40. 40. HTML5http://slides.html5rocks.com/#new-form-types
  41. 41. HTML5required Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido) basta,em HTML5, incluir o atributo required: <input name="login" required>email E-mail, com formatação e validação. O user-agent pode inclusive promover a integraçãocom sua agenda de contatos.dataO campo de formulário pode conter qualquer um desses valores no atributo type: datetime date month week time datetime-loca
  42. 42. HTML5Number
  43. 43. HTML5Range
  44. 44. HTML5color O campo com type="color" é um seletor de cor. O agente de usuário podemostrar um controle de seleção de cor ou outro auxílio que estiver disponível. Ovalor será uma cor no formato #ff6600search mudar a aparência para parecer com os demais do sistemaurl formatação e validação de endereços web
  45. 45. HTML5autofocus o foco será colocado neste campo automaticamente ao carregar a página; <input name="login" autofocus/>Placeholder texttexto padrão do campo antes do foco ir para ele;<input name="q" placeholder="Pesquisa"/>
  46. 46. HTML5
  47. 47. HTML5
  48. 48. HTML5maxlength o atributo agora também está disponível no textarea;pattern O atributo pattern nos permite definir expressões regulares de validação, semJavascript. Veja um exemplo de como validar CEP:
  49. 49. HTML5Custom validatorsdefinir expressões regulares de validação, sem Javascript; <input name="cpf" oninput="vCPF(this)"/>contenteditabletornar um elemento do HTML editável. <div contenteditable="true">Edite-me...</div>http://html5demos.com/contenteditable (ver em ação)
  50. 50. HTML5
  51. 51. Midias com HTML5Áudio <audio controls="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.
  52. 52. Midias com HTML5http://slides.html5rocks.com/#video-audio
  53. 53. HTML5Todos os recursos: http://slides.html5rocks.com/#slide21

×