HTML5 Curso W3C Escritrio Brasil

  • Published on
    15-Dec-2016

  • View
    215

  • Download
    2

Transcript

  • HTML5

    Curso W3C Escritrio Brasil

  • Autores: Elcio Ferreira e Diego Eis

  • NDICE1. VisogeraldoHTML5 7

    Hypertexto 7O comeo e a interoperabilidade 8WHAT Working Group 8O HTML5 e suas mudanas 9

    O que o HTML5? 9

    2. Anlisedosuporteatualpelosnavegadoreseestratgiasdeuso 11O desenvolvimento modular 11Motores de Renderizao 11Compatibilidade com HTML5 12Tcnicas de detectao 13

    Utilizando o Modernizr 14

    3. Estruturabsica,DOCTYPEecharsets 15O Doctype 15O elemento HTML 16HEAD 16

    Metatag Charset 16Tag LINK 17

    4. Modelosdecontedo 19Categorias 19Metadata content 20Flow content 20Sectioning content 22Heading content 23Phrasing content 23Embedded content 24Interactive content 24

    5. Novoselementoseatributos 27Atributos 30

    6. Elementosmodificadoseausentes 31Elementos modificados 31Elementos ou atributos descontinuados 32

  • 7. Novostiposdecampos 33Novos valores para o atributo type 33

    tel 33search 33email 33url 33Datas e horas 34number 34range 35color 36

    8. Tiposdedadosevalidadores 37Formulrios vitaminados 37

    autofocus 37Placeholder text 37required 38maxlength 38

    Validao de formulrios 38pattern 39novalidate e formnovalidate 39Custom validators 40

    9. Detalhesecontedoeditvel. 43Ainda mais formulrios 43

    Detalhes e sumrio 43Contedo editvel 44

    10. Drag-n-dropecorreoortogrfica 45Drag and Drop 45Detalhes importantes: 46Reviso ortogrfica e gramatical 47

    11. Elementosaudioevideo,ecodecs 49udio 49

    Origens alternativas de udio 49Vdeo 50Codecs 50

    12. ElementodeviceeStreamAPI 53O elemento device 53Streams 54Peer-to-peer 54

    13. MathMLeSVG 55MathML 55SVG 56

  • 14. CanvasAPI 59O elemento canvas 59

    Canvas e SVG 61

    15. Server-SentEvents 63EventSource 63

    O protocolo de comunicao 63

    16. DOMeHTML5 65DOM e HTML5 65

    Por qu DOM? 65Vamos s diferenas 65

    getElementsByClassName 65innerHTML 66activeElement e hasFocus() 66getSelection() 67Intervalos de seleo 68document.head 68Selector API 69Caractersticas especiais de DomNodeList 70Datasets 70

    17. NovoseventosDOM 71Uma palavra sobre eventos 71

    Elementos multimdia: 71Eventos em campos de formulrio: 72Eventos gerais: 72Drag-and-drop: 73

    Atributos de evento 73

    18. Menusetoolbars 75O elemento menu 75

    Tipos de comando 75O elemento command 76Prefira no usar command, por enquanto 76

    19. Tiposdelinks 79Links 79

    Metadados de navegao 79Metadados da pgina 80Comportamento dos links na pgina 81

    20. Microdata 83Semntica adicional 83Diferentes tipos de dados 85

    Falando um idioma comum 87

  • 21. HistricodesessoeAPIStorage 89Histrico de Sesso e API Storage 89

    Histrico de Sesso 89localStorage e sessionStorage 91

    22. Aplicaesoffline 95Caching 95O objeto ApplicationCache 96Controle de status da aplicao 97

    23. Scrollintoviewehidden 99Scrolling into view 99hidden 99

    hidden e Javascript 99

    24. GeolocationAPI 101Mtodos de Geolocalizao 101

    Tratando erros 102No trate a resposta do usurio como um erro 103O objeto de configurao 103watchPosition 103

    25. Undo 105O objeto UndoManager 105

    Respondendo s aes de undo e redo 106Disparando as aes de undo e redo 106

  • HTML 5 - Curso W3C Escritrio Brasil 7Markup

    1. VISOGERALDOHTML5De acordo com o W3C a Web baseada em 3 pilares:

    Um esquema de nomes para localizao de fontes de informao na Web, esse esquema cha-ma-se URI.

    Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fcil navegao entre as fontes de informao: o HTML.

    Vamos nos focar no terceiro pilar, o HTML.

    HypertextoHTML uma abreviao de Hypertext Markup Language - Linguagem de Marcao de Hypertexto.

    Resumindo em uma frase: o HTML uma linguagem para publicao de contedo (texto, imagem,

    vdeo, udio e etc) na Web.

    O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de elementos ou ns

    ligados por conexes. Estes elementos podem ser palavras, imagens, vdeos, udio, documentos

    etc. Estes elementos conectados formam uma grande rede de informao. Eles no esto conecta-

    dos linearmente como se fossem textos de um livro, onde um assunto ligado ao outro seguida-

    mente. A conexo feita em um hipertexto algo imprevisto que permite a comunicao de dados,

    organizando conhecimentos e guardando informaes relacionadas.

    Para distribuir informao de uma maneira global, necessrio haver uma linguagem que seja

    entendida universalmente por diversos meios de acesso. O HTML se prope a ser esta linguagem.

    Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o

    Mosaic - browser desenvolvido por Marc Andreessen na dcada de 1990 - ganhou fora. A partir

    da, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as

    mesmas convenes.

  • O comeo e a interoperabilidadeEntre 1993 e 1995, o HTML ganhou as verses HTML+, HTML2.0 e HTML3.0, onde foram propostas

    diversas mudanas para enriquecer as possibilidades da linguagem. Contudo, at aqui o HTML ain-

    da no era tratado como um padro. Apenas em 1997, o grupo de trabalho do W3C responsvel por

    manter o padro do cdigo, trabalhou na verso 3.2 da linguagem, fazendo com que ela fosse tratada

    como prtica comum. Voc pode ver: http://www.w3.org/TR/html401/appendix/changes.html.

    Desde o comeo o HTML foi criado para ser uma linguagem independente de plataformas, bro-

    wsers e outros meios de acesso. Interoperabilidade significa menos custo. Voc cria apenas um

    cdigo HTML e este cdigo pode ser lido por diversos meios, ao invs de verses diferentes para

    diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprie-

    tria, com formatos incompatveis e limitada.

    Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a in-

    formao publicada por meio deste cdigo fosse acessvel por dispositivos e outros meios com ca-

    ractersticas diferentes, no importando o tamanho da tela, resoluo, variao de cor. Dispositivos

    prprios para deficientes visuais e auditivos ou dispositivos mveis e portteis. O HTML deve ser

    entendido universalmente, dando a possibilidade para a reutilizao dessa informao de acordo

    com as limitaes de cada meio de acesso.

    WHAT Working GroupEnquanto o W3C focava suas atenes para a criao da segunda verso do XHTML, um grupo

    chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em

    uma verso do HTML que trazia mais flexibilidade para a produo de websites e sistemas basea-

    dos na web.

    O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como

    Mozilla, Apple e Opera em 2004. Eles no estavam felizes com o caminho que a Web tomava e nem

    com o rumo dado ao XHTML. Por isso, estas organizaes se juntaram para escrever o que seria

    chamado hoje de HTML5.

  • HTML 5 - Curso W3C Escritrio Brasil 9Markup

    Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi includo no HTML5

    e o Web Controls 1.0 que foi abandonado por enquanto.

    A participao no grupo livre e voc pode se inscrever na lista de email para contribuir.

    Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente

    pelo W3C - que at ento trabalhavam separadamente - que reconheceu todo o trabalho do grupo.

    Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na

    produo do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo man-

    tido paralelamente de acordo comas mudanas causadas no HTML. O grupo que estava cuidando

    especificamente do XHTML 2 foi descontinuado em 2009.

    O HTML5 e suas mudanasQuando o HTML4 foi lanado, o W3C alertou os desenvolvedores sobre algumas boas prticas que

    deveriam ser seguidas ao produzir cdigos client-side. Desde este tempo, assuntos como a sepa-

    rao da estrutura do cdigo com a formatao e princpios de acessibilidade foram trazidos para

    discusses e ateno dos fabricantes e desenvolvedores.

    Contudo, o HTML4 ainda no trazia diferencial real para a semntica do cdigo. o HTML4 tam-

    bm no facilitava a manipulao dos elementos via Javascript ou CSS. Se voc quisesse criar um

    sistema com a possibilidade de Dragn Drop de elementos, era necessrio criar um grande script,

    com bugs e que muitas vezes no funcionavam de acordo em todos os browsers.

    O que o HTML5?

    O HTML5 a nova verso do HTML4. Enquanto o WHATWG define as regras de marcao que

    usaremos no HTML5 e no XHTML, eles tambm definem APIs que formaro a base da arquitetura

    web. Essas APIs so conhecidas como DOM Level 0.

  • Um dos principais objetivos do HTML5 facilitar a manipulao do elemento possibilitando o

    desenvolvedor a modificar as caractersticas dos objetos de forma no intrusiva e de maneira que

    seja transparente para o usurio final.

    Ao contrrio das verses anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript faze-

    rem seu trabalho da melhor maneira possvel. O HTML5 permite por meio de suas APIs a mani-

    pulao das caractersticas destes elementos, de forma que o website ou a aplicao continue leve

    e funcional.

    O HTML5 tambm cria novas tags e modifica a funo de outras. As verses antigas do HTML

    no continham um padro universal para a criao de sees comuns e especficas como rodap,

    cabealho, sidebar, menus e etc. No havia um padro de nomenclatura de IDs, Classes ou tags.

    No havia um mtodo de capturar de maneira automtica as informaes localizadas nos rodaps

    dos websites.

    H outros elementos e atributos que sua funo e significado foram modificados e que agora po-

    dem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram des-

    continuados em verses anteriores do HTML agora assumem funes diferentes e entregam mais

    significado para os usurios.

    O HTML5 modifica a forma de como escrevemos cdigo e organizamos a informao na pgina.

    Seria mais semntica com menos cdigo. Seria mais interatividade sem a necessidade de instalao

    de plugins e perda de performance. a criao de cdigo interopervel, pronto para futuros dispo-

    sitivos e que facilita a reutilizao da informao de diversas formas.

    O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site dever ter de

    ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 est sendo criado

    para que seja compatvel com os browsers recentes, possibilitando a utilizao das novas caracte-

    rsticas imediatamente.

  • HTML 5 - Curso W3C Escritrio Brasil 11Markup

    2. ANLISEDOSUPORTEATUALPELOS

    NAVEGADORESEESTRATGIASDEUSO

    O desenvolvimento modularAntigamente, para que uma nova verso do HTML ou do CSS fosse lanada, todas as ideias listadas

    na especificao deveriam ser testadas e desenvolvidas para ento serem publicadas para o uso dos

    browsers e os desenvolvedores.

    Esse mtodo foi mudado com o lanamento do HTML5 e o CSS3. A partir de agora, as duas tec-

    nologias foram divididas em mdulos. Isso quer dizer que a comunidade de desenvolvedores e os

    fabricantes de browsers no precisam esperar que todo o padro seja escrito e publicado para utili-

    zarem as novidades das linguagens.

    As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. H um grupo cui-

    dando da propriedade Background, outro da propriedade Border, outro das propriedades de Texto

    e etc. Cada um destes grupos so independentes e podem lanar suas novidades a qualquer mo-

    mento. Logo, o desenvolvimento para web ficou mais dinmico, com novidades mais constantes.

    O ponto negativo nesse formato, que problemas de compatibilidade podem ocorrer com mais

    frequencia. Por exemplo, um browser pode adotar bordas arredondadas e outro no. Ou um bro-

    wser pode escolher suportar um API diferente do API que o concorrente implementou. Contudo,

    os browsers tem mostrado grande interesse em se manterem atualizados em relao aos seus

    concorrentes.

    Motores de RenderizaoH uma grande diversidade de dispositivos que acessam a internet. Entre eles, h uma srie de ta-

    blets, smartphones, pcs e etc. Cada um destes meios de acesso utilizam um determinado browser

    para navegar na web. No h como os desenvolvedores manterem um bom nvel de compatibilida-

    de com todos estes browsers levando em considerao a particularidade de cada um. Uma maneira

  • mais segura de manter o cdigo compatvel, nivelar o desenvolvimento pelos motores de rende-

    rizao. Cada browser utiliza um motor de renderizao que responsvel pelo processamento do

    cdigo da pgina.

    Abaixo, segue uma lista dos principais browsers e seus motores:

    Motor Browser

    Webkit Safari, Google Chrome

    Gecko Firefox, Mozilla, Camino

    Trident Internet Explorer 4 ao 9

    Presto Opera 7 ao 10

    interessante que voc faa cdigo compatvel com estes motores. Focando a compatibilidade nos

    motores de renderizao voc atingir uma amplitude maior de browsers.

    Por exemplo, se seu cdigo funcionar no Webkit, voc alcanar o Safari e o Chrome, dois dos

    principais browsers do mercado para desktops. Alm disso, voc tambm alcana aparelhos como

    Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.

    Compatibilidade com HTML5Atualmente o Webkit o motor mais compatvel com os Padres do HTML5. Como a Apple tem

    interesse que seus dispositivos sejam ultracompatveis com os Padres, ela tem feito um belo traba-

    lho de atualizao e avano da compatibilidade deste motor.

    Contudo o Firefox e o Opera j esto compatveis com grande parte da especificao do HTML5 e

    CSS3 e a cada upgrade eles trazem mais novidades e atualizao dos padres.

    O que pode te preocupar de verdade a retrocompatibilidade com verses antigas de browsers

    como o Internet Explorer. A Microsoft est fazendo um bom trabalho com o IE9, mas as verses

    8 e 7 no tem quase nenhum suporte ao HTML5, o que um problema srio para aplicaes web

    baseadas em tecnologias mais recentes, mas que a base de usurios utiliza as verses antigas do

    Internet Explorer.

  • HTML 5 - Curso W3C Escritrio Brasil 13Markup

    Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns mdulos do

    HTML5:

    Safari Chrome Opera Firefox IE8 IE9

    LocalStorage s s s s s s

    HistricodeSesso s s s s s s

    AplicaesOffline s s n s n n

    Novostiposdecampos s s s n n n

    Form:Autofocus s s s n n n

    Form:Autocomplete n n s n n n

    Form:Required s s s n n n

    Video,AudioeCanvasText s s s s n s

    Tcnicas de detectaoPode ser que o usurio no utilize um browser que suporta HTML5. Neste caso, voc pode redire-

    cion-lo para uma verso do site mais simples, ou talvez apenas mostrar uma mensagem alertando

    o usurio sobre a importncia da atualizao do browser. Para isso temos algumas tcnicas de de-

    tectao para conferir se o browser suporta ou no HTML5.

    Quando o browser visita um website, ele constri uma coleo de objetos que representam ele-

    mentos HTML na pgina. Cada elemento no cdigo representado no DOM como um objeto

    diferente. Todo objeto DOM tem propriedades em comum, mas alguns objetos tem caractersticas

    especficas. Usaremos estes objetos para fazermos a detectao. Abaixo segue 4 meios que voc

    poder utilizar para detectar o suporte do browser:

  • 1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou

    NAVIGATOR. Nesse caso, verificamos o suporte a geolocalizao.

    2. Crie um elemento e verifique se uma determinada propriedade existe neste elemento.

    3. Crie um elemento e verifique se um determinado mtodo existe neste elemento, ento cha-

    me o mtodo e verifique se o valor retorna. Por exemplo, teste quais formatos de vdeo so

    suportados.

    4. Crie um elemento e defina um atributo com um determinado valor, ento verifique se o atri-

    buto suporta este valor. Por exemplo, crie um input e verifique quais types so suportados.

    Utilizando o Modernizr

    O Modernizr (http://www.modernizr.com/) uma biblioteca de detectao que lhe permite veri-

    ficar o suporte da maioria das caractersticas do HTML5 e CSS3.

    O Modernizr roda automaticamente assim que voc o adiciona no head do documento. Assim, se

    voc quiser verificar se o browser suporta Geolocalizao, por exemplo, basta inserir este script na

    pgina. Se o browser suportar a feature testada, ele retornar true:

    if (Modernizr.geolocation) { // Aceita a feature} else { // No aceita a feature testada. }

  • HTML 5 - Curso W3C Escritrio Brasil 15Markup

    3. ESTRUTURABSICA,DOCTYPEE

    CHARSETS

    A estrutura bsica do HTML5 continua sendo a mesma das verses anteriores da linguagem, h

    apenas uma excesso na escrita do Doctype. Segue abaixo como a estrutura bsica pode ser seguida:

    Arquivo: exemplos/3/estruturabasica.html

    1 2 3 4 5 6 7 8 910 11

    O DoctypeO Doctype deve ser a primeira linha de cdigo do documento antes da tag HTML.

    O Doctype indica para o navegador e para outros meios qual a especificao de cdigo utilizar. Em

    verses anteriores, era necessrio referenciar o DTD diretamente no cdigo do Doctype. Com o

    HTML5, a referncia por qual DTD utilizar responsabilidade do Browser.

    O Doctype no uma tag do HTML, mas uma instruo para que o browser tenha informaes

    sobre qual verso de cdigo a marcao foi escrita.

  • O elemento HTMLO cdigo HTML uma srie de elementos em rvore onde alguns elementos so filhos de outros e

    assim por diante. O elemento principal dessa grande rvore sempre a tag HTML.

    O atributo LANG necessrio para que os user-agents saibam qual a linguagem principal do

    documento.

    Lembre-se que o atributo LANG no restrito ao elemento HTML, ele pode ser utilizado em qual-

    quer outro elemento para indicar o idioma do texto representado.

    Para encontrar a listagem de cdigos das linguagens, acesse:

    http://www.w3.org/International/questions/qa-choosing-language-tags.

    HEADA Tag HEAD onde fica toda a parte inteligente da pgina. No HEAD ficam os metadados.

    Metadados so informaes sobre a pgina e o contedo ali publicado.

    Metatag Charset

    No nosso exemplo h uma metatag responsvel por chavear qual tabela de caractres a pgina est

    utilizando.

    Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo:

  • HTML 5 - Curso W3C Escritrio Brasil 17Markup

    Essa forma antiga ser tambm suportada no HTML5. Contudo, melhor que voc utilize a nova

    forma.

    A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e

    pessoas de outros pases algo que vai contra a tradio e os ideais da internet. Por isso, foi cria-

    do uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode

    suporta algo em torno de um milho de caracteres. Ao invs de cada regio ter sua tabela de ca-

    racteres, muito mais sensato haver uma tabela padro com o maior nmero de caracteres poss-

    vel. Atualmente a maioria dos sistemas e browsers utilizados por usurios suportam plenamente

    Unicode. Por isso, fazendo seu sistema Unicode voc garante que ele ser bem visualizado aqui, na

    China ou em qualquer outro lugar do mundo.

    O que o Unicode faz fornecer um nico nmero para cada caractere, no importa a plataforma,

    nem o programa, nem a lngua.

    Tag LINK

    H dois tipos de links no HTML: a tag A, que so links que levam o usurio para outros documen-

    tos e a tag LINK, que so links para fontes externas que sero usadas no documento.

    No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina:

    O atributo rel=stylesheet indica que aquele link relativo a importao de um arquivo

    referente a folhas de estilo.

    H outros valores para o atributo REL, como por exemplo o ALTERNATE:

    Neste caso, indicamos aos user-agents que o contedo do site poder ser encontrado em um cami-

    nho alternativo via Atom FEED.

  • No HTML5 h outros links relativos que voc pode inserir como o rel=archives que indica uma

    referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um

    blog pode ser referenciada nesta tag.

  • HTML 5 - Curso W3C Escritrio Brasil 19Markup

    4. MODELOSDECONTEDOH pequenas regras bsicas que ns j conhecemos e que esto no HTML desde o incio. Estas

    regras definem onde os elementos podem ou no estar. Se eles podem ser filhos ou pais de outros

    elementos e quais os seus comportamentos.

    Dentre todas as categorias de modelos de contedo, existem dois tipos de elementos: elementos de

    linha e de bloco.

    Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong,

    em, img, input, abbr, span.

    Os elementos de blocos so como caixas, que dividem o contedo nas sees do layout.

    Abaixo segue algumas premissas que voc precisa relembrar e conhecer:

    Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a no pode conter o elemento label.

    Os elementos de linha nunca podem conter elementos de bloco. Elementos de bloco sempre podem conter elementos de linha. Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se

    encontra. Por exemplo, um pargrafo no pode conter um DIV. Mas o contrrio possvel.

    Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo

    de contedo o elemento trabalha e como pode ser seu comportamento.

    CategoriasCada elemento no HTML pode ou no fazer parte de um grupo de elementos com caractersticas

    similares. As categorias esto a seguir. Manteremos os nomes das categorias em ingls para que haja

    um melhor entendimento:

    Metadata content Flow content Sectioning content Heading content Phrasing content

  • Embedded content Interactive content

    Abaixo segue como as categorias esto relacionadas de acordo com o WHATWG:

    Metadata contentOs elementos que compe a categoria Metadata so:

    base command link meta noscript script style title

    Este contedo vem antes da apresentao, formando uma relao com o documento e seu conte-

    do com outros documentos que distribuem informao por outros meios.

    Flow contentA maioria dos elementos utilizados no body e aplicaes so categorizados como Flow Content.

    So eles:

    a abbr address area (se for um decendente de um elemento de mapa) article aside

  • HTML 5 - Curso W3C Escritrio Brasil 21Markup

    audio b bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link (Se o atributo itemprop for utilizado) map mark math menu meta (Se o atributo itemprop for utilizado) meter nav noscript object ol

  • output p pre progress q ruby samp script section select small span strong style (Se o atributo scoped for utilizado) sub sup svg table textarea time ul var video wbr Text

    Por via de regra, elementos que seu modelo de contedo permitem inserir qualquer elemento que

    se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento des-

    cendente que faa parte da categoria embedded.

    Sectioning contentEstes elementos definem um grupo de cabealhos e rodaps.

    article aside nav section

    Basicamente so elementos que juntam grupos de textos no documento.

  • HTML 5 - Curso W3C Escritrio Brasil 23Markup

    Heading contentOs elementos da categoria Heading definem uma seo de cabealhos, que podem estar contidos

    em um elemento na categoria Sectioning.

    h1 h2 h3 h4 h5 h6 hgroup

    Phrasing contentFazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos

    que marcam este texto dentro do elemento de pargrafo.

    a abbr area (se ele for descendente de um elemento de mapa) audio b bdo br button canvas cite code command datalist del (se ele contiver um elemento da categoria de Phrasing) dfn em embed i iframe img input ins (se ele contiver um elemento da categoria de Phrasing) kbd keygen label link (se o atributo itemprop for utilizado) map (se apenas ele contiver um elemento da categoria de Phrasing) mark math

  • meta (se o atributo itemprop for utilizado) meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr Text

    Embedded contentNa categoria Embedded, h elementos que importam outra fonte de informao para o documento.

    audio canvas embed iframe img math object svg video

    Interactive contentInteractive Content so elementos que fazem parte da interao de usurio.

    a audio (se o atributo control for utilizado) button details embed

  • HTML 5 - Curso W3C Escritrio Brasil 25Markup

    iframe img (se o atributo usemap for utilizado) input (se o atributo type no tiver o valor hidden) keygen label menu (se o atributo type tiver o valor toolbar) object (se o atributo usemap for utilizado) select textarea video (se o atributo control for utilizado)

    Alguns elementos no HTML podem ser ativados por um comportamento. Isso significa que o

    usurio pode ativ-lo de alguma forma. O incio da sequencia de eventos depende do mecanismo

    de ativao e normalmente culminam em um evento de click seguido pelo evento DOMActivate.

    O user-agent permite que o usurio ative manualmente o elemento que tem este comportamento

    utilizando um teclado, mouse, comando de voz etc.

  • HTML 5 - Curso W3C Escritrio Brasil 27Markup

    5. NOVOSELEMENTOSEATRIBUTOSA funo do HTML indicar que tipo de informao a pgina est exibindo. Quando lemos um

    livro, conseguimos entender e diferenciar um ttulo de um pargrafo. Basta percebermos a quan-

    tidade de letra, tamanho da fonte, cor etc. No cdigo isso diferente. Robs de busca e outros

    user-agents no conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor marcar a

    informao para que elas possam ser diferenciadas por diversos dispositivos.

    Com as verses anteriores do HTML ns conseguimos marcar diversos elementos do layout, estru-

    turando a pgina de forma que as informaes ficassem em suas reas especficas. Conseguimos

    diferenciar por exemplo, um pargrafo de um ttulo. Mas no conseguamos diferenciar o rodap

    do cabealho. Essa diferenciao era apenas percebida visualmente pelo layout pronto ou pela po-

    sio dos elementos na estrutura do HTML. Entretanto, no havia maneira de detectar automatica-

    mente estes elementos j que as tags utilizada para ambos poderiam ser iguais e no havia padro

    para nomenclatura de IDs e Classes.

    O HTML5 trouxe uma srie de elementos que nos ajudam a definir setores principais no documen-

    to HTML. Com a ajuda destes elementos, podemos por exemplo diferenciar diretamente pelo c-

    digo HTML5 reas importantes do site como sidebar, rodap e cabealho. Conseguimos seccionar

    a rea de contedo indicando onde exatamente o texto do artigo.

    Estas mudanas simplificam o trabalho de sistemas como os dos buscadores. Com o HTML5 os

    buscadores conseguem vasculhar o cdigo de maneira mais eficaz. Procurando e guardando infor-

    maes mais exatas e levando menos tempo para estocar essa informao.

  • Abaixo segue uma lista dos novos elementos e atributos includos no HTML5:

    section A tag section define uma nova seo genrica no documento. Por exemplo, a home

    de um website pode ser dividida em diversas sees: introduo ou destaque, novida-

    des, informao de contato e chamadas para contedo interno.

    nav O elemento nav representa uma seo da pgina que contm links para outras partes

    do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles

    grupos que contm links importantes. Isso pode ser aplicado naqueles blocos de links

    que geralmente so colocados no Rodap e tambm para compor o menu principal do

    site.

    article O elemento article representa uma parte da pgina que poder ser distribudo e

    reutilizvel em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comen-

    trios de usurios ou apenas um bloco de texto comum.

    aside O elemento aside representa um bloco de contedo que referncia o contedo que

    envolta do elemento aside. O aside pode ser representado por contedos em side-

    bars em textos impressos, publicidade ou at mesmo para criar um grupo de elementos

    nav e outras informaes separados do contedo principal do website.

    hgroup Este elemento consiste em um grupo de ttulos. Ele serve para agrupar elementos de

    ttulo de H1 at H6 quando eles tem mltiplos nveis como ttulo com subttulos e etc.

    header O elemento header representa um grupo de introduo ou elementos de navegao.

    O elemento header pode ser utilizado para agrupar ndices de contedos, campos de

    busca ou at mesmo logos.

    footer O elemento footer representa literalmente o rodap da pgina. Seria o ltimo ele-

    mento do ltimo elemento antes de fechar a tag HTML. O elemento footer no pre-

    cisa aparecer necessariamente no final de uma seo.

    time Este elemento serve para marcar parte do texto que exibe um horrio ou uma data

    precisa no calendrio gregoriano.

  • HTML 5 - Curso W3C Escritrio Brasil 29Markup

    Este atributos foram descontinuados porque modificam a formatao do elemento e suas funes

    so melhores controladas pelo CSS:

    align como atributo da tag 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 da tag 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. 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 da tag col, colgroup, tbody, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e pre.

    Alguns atributos do HTML4 no so mais permitidos no HTML5. Se eles tiverem algum impacto

    negativo na compatibilidade de algum user-agent eles sero discutidos.

    rev e charset como atributos da tag link e a. shape e coords como atributos da tag a. longdesc como atributo da tag img and iframe. target como atributo da tag link. nohref como atributo da tag area. profile como atributo da tag head. version como atributo da taghtml. name como atributo da tag img (use id instead). scheme como atributo da tag meta. archive, classid, codebase, codetype, declare e standby como atributos da

    tag object. valuetype e type como atributos da tag param. axis e abbr como atributos da tag td e th. scope como atributo da tag td.

  • AtributosAlguns elementos ganharam novos atributos:

    O atributo autofocus pode ser especificado nos elementos input (exceto quando h atri-buto hidden atribudo), textarea, select e button.

    A tag a passa a suportar o atributo media como a tag link. A tag form ganha um atributo chamado novalidate. Quando aplicado o formulrio pode

    ser enviado sem validao de dados. O elemento ol ganhou um atributo chamado reversed. Quando ele aplicado os indica-

    dores da lista so colocados na ordem inversa, isto , da forma descendente. O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos

    de fieldset so desativados. O novo atributo placeholder pode ser colocado em inputs e textareas. O elemento area agora suporta os atributos hreflang e rel como os elementos a e link O elemento base agora suporta o atributo target assim como o elemento a. O atributo

    target tambm no est mais descontinuado nos elementos a e area porque so teis para aplicaes web.

    Os atributos abaixo foram descontinuados:

    O atributo border utilizado na tag img. O atributo language na tag script. O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name. O atributo summary na tag table.

    O W3C mantm um documento atualizado constantemente nesta pgina:

    http://www.w3.org/TR/2010/WD-html5-diff-20100624/.

  • HTML 5 - Curso W3C Escritrio Brasil 31Markup

    6. ELEMENTOSMODIFICADOSE

    AUSENTESExistiam no HTML alguns elementos que traziam apenas caractersticas visuais e no semnticas

    para o contedo da pgina. Esses elementos anteriormente foram descontinuados porque atrapa-

    lhavam o cdigo e tambm porque sua funo era facilmente suprida pelo CSS. Contudo, alguns

    destes elementos voltaram tona com novos significados semnticos. Outros elementos que no

    descontinuados, mas seus significados foram modificados.

    Elementos modificados O elemento B passa a ter o mesmo nvel semntico que um SPAN, mas ainda mantm o estilo

    de negrito no texto. Contudo, ele no d nenhuma importncia para o text marcado com ele. O elemento I tambm passa a ser um SPAN. O texto continua sendo itlico e para usurios de

    leitores de tela, a voz utilizada modificada para indicar nfase. Isso pode ser til para marcar frases em outros idiomas, termos tcnicos e etc.

    O interessante que nestes dois casos houve apenas uma mudana semntica. Provavelmente voc

    no precisar modificar cdigos onde estes dois elementos so utilizados.

    O elemento a sem o atributo href agora representa um placeholder no exato lugar que este link se encontra.

    O elemento address agora tratado como uma seo no documento. O elemento hr agora tem o mesmo nvel que um pargrafo, mas utilizado para quebrar

    linhas e fazer separaes. O elemento strong ganhou mais importncia. O elemento head no aceita mais elementos child como seu filho.

  • Elementos ou atributos descontinuadosOs elementos abaixo foram descontinuados por que seus efeitos so apenas visuais:

    basefont big center font s strike tt u

    Os elementos abaixo foram descontinuados por que ferem os princpios de acessibilide e usabilidade:

    frame frameset noframes

    Os elementos abaixo no foram includos na especificao porque no tiveram uso entre os desen-

    volvedores ou porque sua funo foi substituda por outro elemento:

    acronym no foi includo porque criou um bocado de confuso entre os desenvolvedores que preferiram utilizar a tag abbr.

    applet ficou obsoleto em favor da tag object. isindex foi substitudo pelo uso de form controls. dir ficou obsoleto em favor da tag ul.

  • HTML 5 - Curso W3C Escritrio Brasil 33Formulrios e Multimdia

    7. NOVOSTIPOSDECAMPOS

    Novos valores para o atributo typeO elemento input aceita os seguintes novos valores para o

    atributo type:

    tel

    Telefone. No h mscara de formatao ou validao, pro-

    positalmente, visto no haver no mundo um padro bem

    definido para nmeros de telefones. claro que voc pode

    usar a nova API de validao de formulrios (descrita no captulo 8) para isso. Os agentes de usu-

    rio podem permitir a integrao com sua agenda de contatos, o que particularmente til em

    telefones celulares.

    search

    Um campo de busca. A aparncia e comportamento do campo pode mudar ligeiramente depen-

    dendo do agente de usurio, para parecer com os demais campos de busca do sistema.

    email

    E-mail, com formatao e validao. O agente de usurio pode inclusive promover a integrao

    com sua agenda de contatos.

    url

    Um endereo web, tambm com formatao e validao.

    Opera10

    Enquanto escrevo, o Opera 10 o nico navegador Desktop que fez um bom trabalho implementando os novos recursos de formulrio do HTML5. Se voc instal-lo, poder testar quase tudo deste e dos prxi-mos dois captulos.

  • Datas e horas

    O campo de formulrio pode conter qualquer um desses

    valores no atributo type:

    datetime date month week time datetime-local

    Todos devem ser validados e formatados pelo agente de usurio, que pode inclusive mostrar um

    calendrio, um seletor de horrio ou outro auxlio ao preenchimento que estiver disponvel no

    sistema do usurio.

    O atributo adicional step define, para os validadores e auxlios ao preenchimento, a diferena m-

    nima entre dois horrios. O valor de step em segundos, e o valor padro 60. Assim, se voc usar

    step=300 o usurio poder fornecer como horrios 7:00, 7:05 e 7:10, mas no 7:02 ou 7:08.

    number

    Veja um exemplo do tipo number com seus atributos opcionais:

    Arquivo: exemplos/7/number.html

    1 2 3 4 5 Number type6 78 910 1314 1516 17

    datetime-local

    O tipo de campo datetime-local tra-ta automaticamente as diferenas de fusos horrios, submetendo ao servi-dor e recebendo dele valores GMT. Com isso voc pode, com facilidade, construir um sistema que ser usado em diferentes fusos horrios e per-mitir que cada usurio lide com os valores em seu prprio fuso horrio.

  • HTML 5 - Curso W3C Escritrio Brasil 35Formulrios e Multimdia

    O Opera 10 nos d uma excelente visualizao do que um agente de usurio pode fazer nesse caso:

    range

    Vamos modificar, no exemplo acima, apenas o valor de type, mudando de number para range:

    Arquivo: exemplos/7/range.html

    1 2 3 4 5 Range type6 78 910 1314 1516 17

    Novamente, Opera 10:

  • color

    O campo com type=color um seletor de cor. O agente de usurio pode mostrar um con-

    trole de seleo de cor ou outro auxlio que estiver disponvel. O valor ser uma cor no formato

    #ff6600.

  • HTML 5 - Curso W3C Escritrio Brasil 37Formulrios e Multimdia

    8. TIPOSDEDADOSEVALIDADORES

    Formulrios vitaminadosConforme voc deve ter percebido no ltimo captulo, o HTML5 avanou bastante nos recursos

    de formulrios, facilitando muito a vida de quem precisa desenvolver aplicaes web baseadas em

    formulrios. Neste captulo vamos avanar um pouco mais nesse assunto e, voc vai ver, a coisa vai

    ficar ainda melhor.

    autofocus

    Ao incluir em um campo de formulrio o atributo autofocus, assim:

    O foco ser colocado neste campo automaticamente ao carregar a pgina. Diferente das solues

    em Javascript, o foco estar no campo to logo ele seja criado, e no apenas ao final do carregamen-

    to da pgina. Isso evita o problema, muito comum quando voc muda o foco com Javascript, de o

    usurio j estar em outro campo, digitando, quando o foco mudado.

    Placeholder text

    Voc j deve ter visto um placeholder. Tradicionalmente, vnhamos fazendo isso:

    Arquivo: exemplos/8/placeholderold.html

    1 2 3 4 5 Placeholder, the old style6 78 9 11 1213

  • HTML5 nos permite fazer isso de maneira muito mais elegante:

    Arquivo: exemplos/8/placeholder.html

    1 2 3 4 5 Placeholder, HTML5 way6 78 9 10 1112

    required

    Para tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em

    HTML5, incluir o atributo required:

    maxlength

    Voc j conhecia o atributo maxlength, que limita a quantidade de caracteres em um campo de

    formulrio. Uma grande lacuna dos formulrio HTML foi corrigida. Em HTML5, o elemento tex-

    tarea tambm pode ter maxlength!

    Validao de formulriosUma das tarefas mais enfadonhas de se fazer em Javascript validar formulrios. Infelizmente,

    tambm uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulrios, tornando

    automtica boa parte do processo. Em muitos casos, todo ele. Voc j viu que pode tornar seus

    campos espertos com os novos valores para o atributo type, que j incluem validao para datas,

    emails, URLs e nmeros. Vamos um pouco alm.

  • HTML 5 - Curso W3C Escritrio Brasil 39Formulrios e Multimdia

    pattern

    O atributo pattern nos permite definir expresses regulares de validao, sem Javascript. Veja um

    exemplo de como validar CEP:

    Arquivo: exemplos/8/pattern.html

    1 2 3 4 5 O atributo pattern6 78 910 11 CEP:12 13 14 15 1617 1819 20

    novalidate e formnovalidate

    Podem haver situaes em que voc precisa que um formulrio no seja validado. Nestes casos,

    basta incluir no elemento form o atributo novalidate.

    Outra situao comum querer que o formulrio no seja validado dependendo da ao de submit.

    Nesse caso, voc pode usar no boto de submit o atributo formnovalidate. Veja um exemplo:

  • Arquivo: exemplos/8/formnovalidate.html

    1 2 3 4 5 Salvando rascunho6 7 label{display:block;}8 9 1011 1213 14 nome: 15 email: 16 mensagem: 17 18 19 2021 2223 24

    Custom validators

    claro que as validaes padro, embora atendam a maioria dos casos, no so suficientes para

    todas as situaes. Muitas vezes voc vai querer escrever sua prpria funo de validao Javascript.

    H alguns detalhes na especificao do HTML5 que vo ajud-lo com isso:

    1. Onovoeventooninput disparado quando algo modificado no valor de um campo de

    formulrio. Diferente de onchange, que disparado ao final da edio, oninput disparado

    ao editar. diferente tambm de onkeyup e onkeypress, porque vai capturar qualquer modi-

    ficao no valor do campo, feita com mouse, teclado ou outra interface qualquer.

    2. O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma string. Se a string

    for vazia, o campo ser marcado como vlido. Caso contrrio, ser marcado como invlido.

  • HTML 5 - Curso W3C Escritrio Brasil 41Formulrios e Multimdia

    Com isso, voc pode inserir suas validaes no campo de formulrio e deixar o navegador fazer o

    resto. No mais preciso capturar o evento submit e trat-lo. Veja, por exemplo, este formulrio

    com validao de CPF:

    Arquivo: exemplos/8/customvalidator.html

    1 2 3 4 5 Custom validator6 8 9 10 function vCPF(i){11 i.setCustomValidity(validaCPF(i.value)?:CPF invlido!)12 }13 14 1516 17 18 CPF: 19 20 21 2223 24

  • HTML 5 - Curso W3C Escritrio Brasil 43Formulrios e Multimdia

    9. DETALHESECONTEDOEDITVEL.

    Ainda mais formulriosVejamos mais duas coisas que voc certamente j fez mais de uma vez e foram simplificadas pelo

    HTML5.

    Detalhes e sumrio

    Veja um exemplo de uso dos novos elementos details e summary:

    Copiando 37,5% Tamanho total: 39.248KB Transferido: 14.718 Taxa de transferncia: 127KB/s Nome do arquivo: HTML5.mp4

    Veja como um agente de usurio poderia renderizar isso:

    E ao clicar:

  • Contedo editvel

    Para tornar um elemento do HTML editvel, basta incluir nele o atributo contenteditable, assim:

    Edite-me...

    Voc pode ler e manipular os elementos editveis normalmente usando os mtodos do DOM. Isso

    permite, com facilidade, construir uma rea de edio de HTML.

  • HTML 5 - Curso W3C Escritrio Brasil 45Formulrios e Multimdia

    10. DRAG-N-DROPECORREO

    ORTOGRFICA

    Drag and DropA API de Drag and Drop relativamente simples. Basicamente, inserir o atributo

    draggable=true num elemento o torna arrastvel. E h uma srie de eventos que voc pode

    tratar. Os eventos do objeto sendo arrastado so:

    dragstartO objeto comeou a ser arrastado. O evento que a funo recebe tem um atributo target, que contm o objeto sendo arrastado.

    dragO objeto est sendo arrastado

    dragendA ao de arrastar terminou

    O objeto sobre o qual outro arrastado sofre os seguintes eventos:

    dragenterO objeto sendo arrastado entrou no objeto target

    dragleaveO objeto sendo arrastado deixou o objeto target

    dragoverO objeto sendo arrastado se move sobre o objeto target

    dropO objeto sendo arrastado foi solto sobre o objeto target

  • Detalhes importantes:A ao padro do evento dragover cancelar a ao de dragging atual. Assim, nos objetos que de-

    vem receber drop, preciso setar uma ao de dragover com, no mnimo, return false.

    Selees de texto so automaticamente arrastveis, no precisam do atributo draggable. E se

    voc quiser criar uma rea para onde selees de texto possam ser arrastadas, basta tratar esses

    mesmos eventos.

    Por fim, todas funes de tratamento de evento de drag recebem um objeto de evento que contm

    uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operao

    de drag.

    Arquivo: exemplos/10/drag.html

    1 2 3 4 5 HTML5 Drag and drop demonstration6 7 #boxA, #boxB {8 float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%;9 }10 #boxA { background-color: blue; }11 #boxB { background-color: green; }1213 #drag, #drag2 {14 width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px;15 }16 #drag { background-color: red;}17 #drag2 { background-color: orange;}18 19 2021 // Quando o usurio inicia um drag, guardamos no dataset do evento22 // o id do objeto sendo arrastado23 function dragStart(ev) {24 ev.dataTransfer.setData(ID, ev.target.getAttribute(id));25 }2627 // Quando o usurio arrasta sobre um dos painis, retornamos28 // false para que o evento no se propague para o navegador, o29 // que faria com que o contedo fosse selecionado.30 function dragOver(ev) { return false; }3132 // Quando soltamos o elemento sobre um painel, movemos o33 // elemento, lendo seu id do dataset do evento34 function dragDrop(ev) {

  • HTML 5 - Curso W3C Escritrio Brasil 47Formulrios e Multimdia

    35 var idelt = ev.dataTransfer.getData(ID);36 ev.target.appendChild(document.getElementById(idelt));37 }3839 40 41 42 43 46 47 drag me49 50 drag me52 5354 55 58 5960 61

    Exemplo

    Segue um exemplo de drag-and-drop, baseado no excelente exemplo de Laurent Jouanneau

    (http://ljouanneau.com/lab/html5/demodragdrop.html).

    Reviso ortogrfica e gramaticalOs agentes de usurio podem oferecer recursos de reviso ortogrfica e gramatical, dependendo

    do que houver disponvel em cada plataforma. Os desenvolvedores podem controlar o compor-

    tamento dessa ferramenta atravs do atributo spellcheck. Inserir spellcheck=true num

    elemento faz com que a reviso esteja habilitada para ele. Voc tambm pode desabilitar a reviso

    para determinado elemento, inserindo spellcheck=false.

  • HTML 5 - Curso W3C Escritrio Brasil 49Formulrios e Multimdia

    11. ELEMENTOSAUDIOEVIDEO,E

    CODECS

    udioPara inserir udio em uma pgina web, basta usar o elemento audio:

    O valor de controls define se um controle de udio, com botes de play, pause, volume, barra de

    progresso, contador de tempo, etc. ser exibido na tela. Se for setado como false, ser preciso con-

    trolar o player via javascript, com mtodos como play() e pause(). O valor de autoplay define

    se o udio vai comear a tocar assim que a pgina carregar.

    Origens alternativas de udio

    Todo agente de usurio deveria suportar o codec livre OggVorbis, mas, infelizmente, pode aconte-

    cer de seu arquivo oga no tocar no computador ou celular de algum. Quem sabe do seu chefe ou

    seu cliente. Ento preciso saber como oferecer um formato alternativo de udio. Fazemos assim:

    Claro, o agente de usurio pode ainda no saber tocar nenhum desses formatos, ou sequer ter su-

    porte a udio. Para esses casos, oferea um contedo alternativo:

    Faa o download da msica.

  • VdeoO uso de vdeo muito semelhante ao de udio:

    E com vrios elementos source:

    Faa o download do vdeo.

    Codecs muito importante que voc inclua, nos seus elementos source de udio e vdeo, informao a res-

    peito do container e codecs utilizados. Isso vai evitar que

    o navegador tenha que baixar, pelo menos parcialmente, o

    arquivo de mdia para, depois, descobrir que no consegue

    toc-lo. importante lembrar que a extenso do arquivo

    no informao relevante para isso, pelo contrrio, no

    significa nada. Uma URL pode no ter extenso de arquivo

    e pode levar a um redirecionamento.

    Para indicar ao navegador o container e codecs de determinado arquivo, usa-se o atributo type,

    no formato:

    type=MIME-type do container; codecs=codec de vdeo, codec de udio

    Por exemplo, um vdeo em Ogg, usando os codecs Theora e Vorbis, ter seu source assim:

    Com MPEG-4 a coisa um pouco mais complicada, por que preciso indicar ao navegador tam-

    bm o profile do codec de vdeo utilizado. Veja um exemplo:

    Oquefuncionanaweb

    Mark Pilgrim est escrevendo um livro muito interessante (em ingls) chamado Dive Into HTML 5. O ca-ptulo sobre Vdeo a referncia de que voc precisa para publicar vdeo na web com HTML5.

  • HTML 5 - Curso W3C Escritrio Brasil 51Formulrios e Multimdia

  • HTML 5 - Curso W3C Escritrio Brasil 53Formulrios e Multimdia

    12. ELEMENTODEVICEESTREAMAPI

    O elemento deviceVoc pode inserir em seu HTML um elemento de acesso

    webcam do usurio, assim:

    Isso vai exibir uma interface solicitando ao usurio aces-

    so a sua webcam. Se ele tiver mais de uma, tambm ser

    permitido que ele escolha que webcam usar. O atribu-

    to media tambm pode conter o valor fs, que vai abrir

    uma caixa de seleo no sistema de arquivos, permitindo ao usurio escolher um arquivo para fazer

    stream.

    O passo seguinte conectar o stream desse seu elemento device a alguma coisa. Veja, por exemplo,

    como conect-lo a um elemento video na prpria pgina, fazendo com que o usurio possa ver a

    imagem de sua prpria webcam:

    Arquivo: exemplos/12/videochat.html

    1 2 3 4 5 Videochat, step 167 8 function update(stream) {9 document.getElementsByTagName(video)[0].src = stream.url;10 }11 1213 1415 1617

    To start chatting, select a video camera:

    18 19

    WorkingDraft

    O contedo desse captulo est baseado numa especificao que ainda est em status de Working Draft. Ou seja, as coisas ainda podem mudar bastante. Fique de olho no que vai acontecer com o elemento device e a Stream API, aces-sando (em ingls):

    http://dev.w3.org/html5/html-device/

  • 20 2122 23

    StreamsVoc deve ter notado, no script acima, que a funo de update recebe um parmetro stream. Trata-

    se de um objeto da classe Stream, que possui uma propriedade url, que j usamos acima, e um

    mtodo record. O mtodo record inicia a gravao do stream e retorna um objeto StreamRecorder.

    Esse ltimo possui um mtodo stop, que retorna o arquivo que foi gravado.

    Peer-to-peerCuidado! O W3C ainda est trabalhando nessa especificao, e tudo aqui pode mudar. Por isso,

    no se preocupe em entender as mincias. Saiba apenas que HTML5 prev que os agentes de usu-

    rio tenham uma interface de comuicao P2P, que permite a troca de texto, imagem, vdeo e arqui-

    vos. Por enquanto, a especificao deste item est sendo escrita junto da do elemento device, mas

    isso deve ganhar uma pgina prpria em breve. Fique de olho.

  • HTML 5 - Curso W3C Escritrio Brasil 55A nova gerao de aplicaes web I

    13. MATHMLESVG

    MathMLO HTML5 incorpora o padro MathML. Trata-se de uma linguagem de marcao, baseada

    em XML, para representao de frmulas matemticas. Voc pode ler mais sobre MathML em

    http://www.w3.org/Math/. Para incorporar cdigo MathML em seu documento HTML5, no pre-

    ciso fazer declaraes especiais. Basta escrever normalmente o cdigo, iniciando com um elemento

    math. Veja este exemplo:

    Arquivo: exemplos/13/mathml.html

    1 2 3 4 5 MathML6 7 89 10 11 x12 =13 14 15 16 b17 ±18 19 20 b21 222 23 24 425 ⁢26 a27 ⁢28 c29 30 31 32 233 ⁢34 a35 36 37 38

  • 3940 41

    Veja como esse exemplo renderizado no navegador:

    Mesmo que voc nunca tenha visto MathML, e este cdigo parea um pouco assustador, d uma

    olhada com calma no cdigo, comparando com a imagem do resultado, e voc vai perceber que

    muito simples. Talvez algo que possa deix-lo confuso a entidade ⁢, que

    aparece algumas vezes no cdigo. Ela est l para separar os fatores 4ac, por exemplo. Esses valores

    so multiplicados, o que a frmula representa, mas no queremos colocar um operador de mul-

    tiplicao entre eles, porque por conveno se simplesmente escrevemos 4ac qualquer leitor saber

    que isso uma multiplicao.

    Por que ento se preocupar em inserir ⁢? Voc vai notar que se remover a enti-

    dade e a tag mo correspondente o resultado visual ser o mesmo. Colocamos ⁢

    porque MathML no s visual, semntica. Um outro agente de usurio pode ter recursos de im-

    portar essa frmula para uma ferramenta de clculo, por exemplo.

    SVGAssim como MathML, SVG uma outra linguagem XML que pode ser incorporada com facilidade

    em HTML5. Voc pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/. SVG uma

    linguagem para marcao de grficos vetoriais. Vejamos um exemplo bem simples:

  • HTML 5 - Curso W3C Escritrio Brasil 57A nova gerao de aplicaes web I

    Arquivo: exemplos/13/svg.html

    1 2 3 4 5 SVG6 7 89 1011 12 1314 15 1920 21 2223 2425 26

    E veja como isso renderizado no navegador:

  • possvel fazer muito mais com SVG. A maioria dos editores de grficos vetoriais hoje exporta e

    importa automaticamente SVG, permitindo a um designer construir um grfico em seu editor ve-

    torial predileto e export-lo diretamente. Em seguida, um programador pode construir javascript

    que manipula esse SVG, usando os mtodos do DOM. Com isso voc pode ter grficos dinmicos,

    com animao, escalveis e com excelente qualidade visual, programveis em Javascript, sem tec-

    nologias proprietrias e plugins.

  • HTML 5 - Curso W3C Escritrio Brasil 59A nova gerao de aplicaes web I

    14. CANVASAPI

    O elemento canvasA 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. Veja como inse-

    rir o elemento canvas numa pgina:

    Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho,

    com Javascript:

    context=document.getElementById(x).getContext(2d)

    Agora que temos um contexto, podemos desenhar nele.

    Vamos comear com um simples retngulo:

    context.fillRect(10, 10, 50, 150)

    Simples, no? Que tal tentarmos algo um pouco mais

    complexo? D uma olhada no exemplo:

    Arquivo: exemplos/14/canvas.html

    1 2 3 4 5 Canvas API6 7 89 10 desenhar1112 13 function desenhar(){14 // Obtemos o contexto15 context=document.getElementById(x).getContext(2d)1617 //Iniciamos um novo desenho

    Existeumcontexto3D?

    Ainda no. Existem vrias implemen-taes de contexto 3D, e cada fabrican-te de navegador tem criado a sua, mas ainda no h um padro do W3C sobre esse assunto.

  • 18 context.beginPath()1920 //Movemos a caneta para o inicio do desenho21 context.moveTo(150,50)2223 //Desenhamos as linhas24 context.lineTo(220,250)25 context.lineTo(50,125)26 context.lineTo(250,125)27 context.lineTo(80,250)28 context.lineTo(150,50)2930 //O desenho no de verdade enquanto voc31 //no mandar o contexto pint-lo.3233 //Vamos pintar o interior de amarelo34 context.fillStyle=#ff035 context.fill()3637 //Vamos pintar as linhas de vermelho.38 context.strokeStyle=#f0039 context.stroke()4041 }42 4344 45

    E veja o que acontece quando se clica no boto:

    H muito mais para voc estudar se quiser se aprofundar na Canvas API. Apenas para que voc

    tenha uma idia, possvel desenhar texto, sombras, gradientes, incluir imagens no canvas, mani-

    pular os pixels, rotacionar e transformar os objetos.

  • HTML 5 - Curso W3C Escritrio Brasil 61A nova gerao de aplicaes web I

    Canvas e SVG

    Uma dvida muito comum quando usar Canvas, quando usar SVG. Para saber escolher, preci-

    so entender as diferenas entre um e outro. SVG vetorial, e baseado em XML, logo, acessvel via

    DOM. Canvas desenhado pixel a pixel, via Javascript.

    Assim, as vantagens do SVG so:

    1. O contedo acessvel a leitores de tela

    2. O grfico escalvel, no perde resoluo ou serrilha ao redimensionar

    3. O contedo acessvel via DOM

    E as vantagens do Canvas:

    1. A performance muito superior ao SVG na maioria dos casos

    2. fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever XML para voc.

    Com Canvas voc s manda desenhar, e pronto.

  • HTML 5 - Curso W3C Escritrio Brasil 63A nova gerao de aplicaes web I

    15. SERVER-SENTEVENTS

    EventSourceA Server-Sent Events API uma maneira de inverter o fluxo das aplicaes Ajax, fazendo com que

    o servidor possa disparar o envio de dados ao agente de usurio. Para isso, cria-se, no agente de

    usurio, um objeto EventSource:

    es=new EventSource(comm.php)

    Isso vai abrir uma conexo HTTP para comm.php e mant-la escutando. Cada vez que o servidor

    enviar eventos para esse cliente, ser disparado o evento message do objeto EventSource. Veja um

    exemplo:

    es.onmessage=function(e){ alert(Chegaram dados: +e.data)}

    Isso pode ser usado, por exemplo, para implementar uma interface de chat ou um monitor de status

    de alguma operao demorada ocorrendo no servidor.

    O protocolo de comunicao

    Em nosso exemplo acima, a pgina comm.php envia eventos para o agente de usurio. Voc no pre-

    cisa se preocupar em saber como isso funciona do lado do cliente, uma vez que o agente de usurio faz

    todo o trabalho. Mas importante que saiba como isso deve funcionar do lado do servidor. A URL de

    comunicao deve devolver ao cliente um header Content-type: text/event-stream. Em se-

    guida, envia as mensagens, que so blocos de texto separados um do outro por uma linha em branco:

    data: mensagem 1

    data: a mensagem 2 temdata: mais de uma linha

    data: mensagem 3

  • O prefixo data: indica que o que segue so os dados da mensagem. Voc tambm pode usar o pre-

    fixo id:

    data: mensagem 1id: 1

    data: a mensagem 2 temdata: mais de uma linhaid: 2

    data: mensagem 3id: 3

    Se voc enviar prefixos id em suas mensagens e o agente de usurio perder a conexo, ao tentar

    reconectar ele vai enviar o valor do ltimo id no header HTTP Last-Event-ID. Com isso voc

    pode, por exemplo, enviar as mensagens do chat do ponto em que parou.

  • HTML 5 - Curso W3C Escritrio Brasil 65A nova gerao de aplicaes web I

    16. DOMEHTML5

    DOM e HTML5O Modelo de Objetos do Documento (DOM, na sigla em ingls) a interface entre a linguagem

    Javascript e os objetos do HTML. DOM o mtodo padro para construo de aplicaes ricas

    com Javascript e amplamente conhecido e utilizado. Neste captulo, supondo que voc j conhece

    DOM para HTML 4 ou XHTML, vamos nos focar na diferena entre as verses anteriores do DOM

    e a do HTML 5.

    Por qu DOM?

    Os primeiros navegadores a incorporar um motor de Javascript tinham alert, prompt, document.

    write e mais meia dzia de maneiras de se interagir com o usurio. E s. A idia de acessar a rvore

    de objetos do HTML trouxe poder s interfaces com o usurio na web. A idia era to boa que os

    fabricantes de navegadores no puderam esperar at que tivssemos uma especificao padro que

    atendesse suas necessidades, e criaram cada um seu prprio mtodo de resolver o problema. Isso

    resultou em anos e anos de incompatibilidade, em que era preciso escrever uma verso de seus

    scripts para cada navegador.

    Queremos, com certeza, evitar uma nova guerra de padres. Por isso recomendamos a voc, por

    mais sedutor que parea utilizar um recurso proprietrio Javascript, que se atenha ao DOM.

    Vamos s diferenas

    getElementsByClassName

    Esse um sonho antigo de todo desenvolvedor Javascript. Com HTML5 voc pode fazer:

    destaques = document.getElementsByClassName(destaque)

  • E isso retornar todos os elementos do HTML que possuem a classe destaque.

    innerHTML

    Outro sonho antigo que se torna realidade. A propriedade innerHTML uma idia to boa que

    todos os navegadores atuais j a suportam h muito tempo e todo desenvolvedor web sabe us-la.

    Apesar disso, ela nunca havia sido descrita como um padro.

    Se porventura voc nunca viu a propriedade innerHTML em ao (puxa, onde voc estava nos l-

    timos dez anos?) saiba que ela contm uma string, o contedo HTML da pgina. E voc tem acesso

    de leitura e escrita a essa propriedade.

    Veja um exemplo de innerHTML:

    function adicionaItem(nome){ document.getElementById(lista).innreHTML += +nome+}

    activeElement e hasFocus()

    O documento HTML5 tem uma nova propriedade, activeElement, que contm o elemento que

    possui o foco no momento. O documento tambm possui o mtodo hasFocus(), que retorna true

    se o documento contm o foco. Seu usurio pode estar trabalhando com mltiplas janelas, abas,

    frames, ou mesmo ter alternado para outro aplicativo deixando o navegador com sua aplicao

    Javascript rodando em segundo plano. O mtodo hasFocus() uma conveniente maneira de tratar

    aes que dependem do foco na aplicao atual.

    Veja um exemplo de script dependente de foco:

  • HTML 5 - Curso W3C Escritrio Brasil 67A nova gerao de aplicaes web I

    Arquivo: exemplos/16/focusNotify.html

    1 2 3 4 5 Notifier6 78 function notify(text){9 document.getElementById(msg).innerHTML+=

    +text+

    10 titleFlick()11 }1213 function titleFlick(){14 if(document.hasFocus()){15 document.title=Notifier16 return17 }18 document.title=document.title==Notifier?* Notifier:Notifier19 setTimeout(titleFlick(),500)20 }2122 23 2425 26 28 29 3031

    getSelection()

    Os objetos document e window possuem um mtodo getSelection(), que retorna a seleo atual,

    um objeto da classe Selection. A seleo tem, entre ou-

    tros, os seguintes mtodos e propriedades:

    anchorNodeO elemento que contm o incio da seleo

    focusNodeO elemento que contm o final da seleo

    selectAllChildern(parentNode)Seleciona todos os filhos de parentNode

    UsandogetSelection()hoje

    A maioria dos navegadores ainda no teve tempo de se atualizar em relao especificao e, retorna uma string quando voc chama document.getSelection() e um objeto Selection quando voc chama window.getSelection(). Como esperamos que num futuro prximo o comportamen-to de document.getSelec-tion() mude, sugerimos que voc prefira usar o mtodo de window por enquanto.

  • deleteFromDocument()Remove a seleo do documento

    rangeCountA quantidade de intervalos na seleo

    getRangeAt(index)Retorna o intervalo na posio index

    addRange(range)Adiciona um intervalo seleo

    removeRange(range)Remove um intervalo da seleo

    Intervalos de seleo

    Voc deve ter notado acima que uma seleo um conjunto de intervalos, da classe Range. Cada

    intervalo possui, entre outros, os seguintes mtodos e propriedades:

    deleteContent()Remove o contedo do intervalo

    setStart(parent,offset)Seta o incio do intervalo para o caractere na posio offset dentro do elemento DOM parent

    setEnd(parent,offset)Seta o final do intervalo para o caractere na posio offset dentro do elemento DOM parent

    Tanto os objetos Selection quanto os objetos Range retornam o texto da seleo quando converti-

    dos para strings.

    document.head

    O objeto document j possua uma propriedade body, uma maneira conveniente de acessar o ele-

    mento body do HTML. Agora ele ganhou uma propriedade head, maneira tambm muito conve-

    niente de acessar o elemento head.

  • HTML 5 - Curso W3C Escritrio Brasil 69A nova gerao de aplicaes web I

    Selector API

    A Selector API no novidade do HTML5, anterior a ele. Mas como ainda desconhecida de

    parte dos desenvolvedores, convm dizer que ela existe, e que continua funcionando no HTML5.

    Com a selector API voc pode usar seletores CSS para encontrar elementos DOM.

    A Selector API expe duas funes em cada um dos ele-

    mentos DOM: querySelector e querySelectorAll. Ambas

    recebem como argumento uma string com um seletor

    CSS. A consulta sempre feita na subtree do elemento

    DOM a partir do qual a chamada foi disparada. A query-

    Selector retorna o primeiro elemento que satisfaz o sele-

    tor, ou null caso no haja nenhum. A querySelectorAll

    retorna a lista de elementos que satisfazem o seletor.

    Veja, neste exemplo, um script para tabelas zebradas com

    Selector API:

    Arquivo: exemplos/16/zebra.html

    1 2 3 4 5 Zebra6 7 .zebraon{background:silver}8 9 10 window.onload=function(){11 var zebrar=document.querySelectorAll(.zebra tbody tr)12 for(var i=0;i

  • 24 Manoel 12.300,0025 26 Joaquim 21.300,0027 28 Maria 13.200,0029 30 Marta 32.100,0031 32 Antonio 23.100,0033 34 Pedro 31.200,0035 36 37 38

    Caractersticas especiais de DomNodeList

    As listas de elementos retornadas pelos mtodos do DOM no so Arrays comuns, so objetos

    DomNodeList, o que significa que, entre outros mtodos especiais, voc pode usar list[0] ou

    list(0) para obter um elemento da lista. Tambm pode usar list[name] ou list(name)

    para obter um objeto por seu nome. Duas adies interessantes do HTML5 ao usar este ltimo mtodo:

    1. O objeto buscado pelos atributos name ou id.

    2. Uma lista de campos de formulrio com o mesmo valor no atributo name (uma lista de radio

    buttons, por exemplo) ser retornada caso mais de um objeto seja encontrado. Essa lista con-

    tm um atributo especial, value, muito conveniente. Ele contm o valor do radio marcado e,

    ao ser setado, marca o radio correspondente.

    Datasets

    Voc pode atribuir dados arbitrrios a um elemento HTML qualquer, prefixando seus atributos

    com data-. Por exemplo:

    Voc pode acessar esses valores via Javascript, atravs do atributo dataset, assim:

    var img=document.getElementById(c1)proc=img.dataset.processor

    As propriedades de dataset tm permisso de leitura e escrita.

  • HTML 5 - Curso W3C Escritrio Brasil 71A nova gerao de aplicaes web I

    17. NOVOSEVENTOSDOM

    Uma palavra sobre eventosO suporte ao tratamento de eventos disparados pelo usurio parte essencial do DOM. HTML5 ofe-

    rece a voc um extenso conjunto de novos eventos. Vamos dar uma olhada nos mais interessantes:

    Elementos multimdia:

    oncanplayO elemento audio ou video j tem dados suficientes no buffer para comear a tocar.

    oncanplaythroughO elemento audio ou video j tem dados suficientes no buffer para comear a tocar e, se a tranferncia de dados continuar no ritmo em que est ocorrendo, estima-se que tocar at o final sem interrupes.

    ondurationchangeO elemento audio ou video teve seu atributo duration modificado. Isso acontece, por exem-plo, ao alterar a origem da mdia.

    onemptiedO elemento audio ou video teve um erro de retorno vazio de dados da rede. O retorno vazio acontece quando, por exemplo, voc tenta invocar o mtodo play de um elemento que ainda no tem uma origem de mdia definida.

    onendedO vdeo ou udio chegou ao fim.

    onloadeddataOs dados comearam a ser carregados e a posio atual de playback j pode ser renderizada.

    onloadedmetadataOs metadados foram carregados. J sabemos as dimenses, formato e durao do vdeo.

    onloadstartOs dados comearam a ser carregados.

    onpauseO usurio clicou em pause.

  • onplayO usurio clicou em play ou o playback comeou por causa do atributo autoplay

    onplayingO vdeo ou udio est tocando.

    onprogressO agente de usurio est buscando dados do vdeo ou udio.

    Eventos em campos de formulrio:

    oninputO usurio entrou com dados no campo

    oninvalidO campo no passou pela validao

    Eventos gerais:

    oncontextmenuO usurio disparou um menu de contexto sobre o objeto. Na maioria dos sistemas Desktop, isso significa clicar com o boto direito do mouse ou segurando uma tecla especial.

    onmousewheelA rodinha do mouse foi acionada.

    onbeforeprintDisparado antes da impresso da pgina. Voc pode us-lo para modificar, esconder ou exi-bir elementos, preparando a pgina para impresso.

    onafterprintDisparado aps a impresso da pgina. Voc pode us-lo para reverter o status anterior impresso.

    onhashchangeA ltima poro da URL, aps o hash (#), foi modificada.

    onoffline O agente de usurio ficou offline.

    ononline O agente de usurio est novamente conectado.

  • HTML 5 - Curso W3C Escritrio Brasil 73A nova gerao de aplicaes web I

    onredoO usurio disparou a ao de Refazer.

    onundoO usurio disparou a ao de Desfazer.

    Drag-and-drop:

    Vimos a definio desses eventos no Captulo 10:

    ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop

    Atributos de eventoA especificao do HTML5 padronizou um formato de atribuio de eventos que j era ampla-

    mente utilizado. Voc pode atribuir eventos atravs de atributos HTML com o nome do evento.

    Por exemplo:

    claro que voc pode continuar usando o mtodo do DOM addEventListener, com a vanta-

    gem de poder atribuir vrios listeners ao mesmo evento.

  • HTML 5 - Curso W3C Escritrio Brasil 75A nova gerao de aplicaes web I

    18. MENUSETOOLBARS

    O elemento menuO elemento menu usado para definir menus e barras de ferramenta. Dentro do menu, voc pode

    inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu. Para

    definir comandos, voc pode inserir:

    1. Um link, um elemento a com atributo href;

    2. Um boto, um elemento button;

    3. Um boto, um elemento input com o atributo type contendo button, submit, reset ou

    image;

    4. Um radiobutton, um elemento input com o atributo type contendo radio;

    5. Um checkbox, um elemento input com o atributo type contendo checkbox;

    6. Um elemento select, contendo um ou mais options, define um grupo de comandos

    7. Um elemento qualquer com o atributo accesskey

    8. Um elemento command

    Tipos de comando

    H trs tipos de comando:

    commandUma ao comum;

    checkboxUma ao que pode estar no status de ligada ou desligada, e alterna entre esses dois stauts quando clicada;

  • radioUma ao que pode estar no status de ligada ou desligada, e quando clicada vai para o status de ligada, deligando todas as aes com o mesmo valor no atributo radiogroup;

    Da lista de elementos possveis para definir comandos, os trs primeiros, link, button e input but-

    ton, definem comandos do tipo command. O quarto elemento, radiobutton, define um comando

    do tipo radio. O quinto, checkbox, define um comando do tipo checkbox.

    O sexto elemento, o select, vai definir um grupo de comandos. Se o select tiver o atributo multiple,

    definir uma lista de comandos do tipo checkbox. Caso contrrio, os comandos sero do tipo radio,

    tendo o mesmo radiogroup.

    No stimo caso, um elemento qualquer com tecla de acesso, o tipo de comando vai depender do

    tipo de elemento que recebeu accesskey.

    O elemento command

    Por fim, temos o oitavo mtodo, o elemento command. Neste caso o tipo de comando depender do

    valor do atributo type. Veja um exemplo de como us-lo:

    Prefira no usar command, por enquanto

    Por que a especificao permite que se use o novo elemento command para definir comandos, e ao

    mesmo tempo permite que se use os velhos elementos como input, button e select para isso? Para

    possibilitar ao desenvolvedor oferecer alguma compatibilidade com navegadores antigos. Veja este

    exemplo:

  • HTML 5 - Curso W3C Escritrio Brasil 77A nova gerao de aplicaes web I

    Arquivo: exemplos/18/command.html

    1 2 3 4 5 Menus6 78 910 11 12 13 New...14 Open...15 Save16 Save as...17 18 19 20 21 Copy22 Cut23 Paste24 25 26 27 28 Help29 About30 31 32 3334 3536

    O agente de usurio deveria renderizar algo como:

  • Um agente de usurio que no conhece o novo elemento menu vai entender esse cdigo como listas

    aninhadas com botes e links. E vai renderizar isso assim:

    No est bonito, mas perfeitamente acessvel. E o visual pode ser bem trabalhado com CSS. A

    mesma coisa poderia ser escrita com o elemento command:

    Arquivo: exemplos/18/command2.html

    1 2 3 4 5 Menus6 78 910 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2728 2930

    Mas um agente de usurio que no conhece os elementos menu e command no vai mostrar abso-

    lutamente nada.

  • HTML 5 - Curso W3C Escritrio Brasil 79A nova gerao de aplicaes web I

    19. TIPOSDELINKS

    LinksA possibilidade de linkar documentos o que torna a Web o que ela . Existem duas maneiras

    principais de linkar documentos, os elementos a e link. O elemento a cria um link no contedo

    da pgina. Voc conhece sua sintaxe:

    Visie

    O elemento link, por sua vez, cria um metadado, um link que no mostrado no contedo, mas

    o agente de usurio usa de outras maneiras. O uso mais comum vincular um documento a uma

    folha de estilos:

    Note o atributo rel=stylesheet. O atributo rel pode estar presente nos elementos a e link,

    e ter uma srie de valores:

    Metadados de navegao

    archivesos arquivos do site

    authora pgina do autor do documento atual

    bookmarko permalink da seo a que este documento pertence

    firsto primeiro documento da srie a qual este pertence

    helpajuda para esta pgina

  • indexo ndice ou sumrio que inclui o link para esta pgina

    lasto ltimo documento da srie a qual este pertence

    licensea licensa que cobre este documento

    nexto prximo documento da srie a qual este pertence

    prefetcho agente de usurio deve fazer cache desse link em segundo plano to logo o documento atual tenha sido carregado. O autor do documento indica que este link o provvel prximo destino do usurio.

    prevo documento anterior da srie a qual este pertence

    searcha busca deste site

    upO documento um nvel acima deste

    O Opera nos d um interessante exemplo de como um agente de usurio pode exibir estes links:

    Metadados da pgina

    alternateum formato alternativo para o contedo atual. Precisa estar acompanhado do atributo type, contendo o tipo MIME do formato. Por exemplo, para indicar o RSS da pgina atual usamos:

    icono cone que representa esta pgina

    pingbacka URL de pingback desta pgina. Atravs desse endereo um sistema de blogging ou gerencia-dor de contedo pode avisar automaticamente quando um link para esta pgina for inserido.

  • HTML 5 - Curso W3C Escritrio Brasil 81A nova gerao de aplicaes web I

    stylesheeta folha de estilo linkada deve ser vinculada a este documento para exibio

    Comportamento dos links na pgina

    externalindica um link externo ao domnio do documento atual

    nofollowindica que o autor do documento atual no endossa o contedo desse link. Os robs de in-dexao para motores de busca podem, por exemplo, no seguir este link ou levar em conta o nofollow em seu algoritmo de ranking.

    noreferrero agente de usurio no deve enviar o header HTTP Referer se o usurio acessar esse link

    sidebaro link deve ser aberto numa sidebar do navegador, se este recurso estiver disponvel

  • HTML 5 - Curso W3C Escritrio Brasil 83A nova gerao de aplicaes web II

    20. MICRODATA

    Semntica adicionalD um olhada no seguinte cdigo:

    Arquivo: exemplos/20/microdata1.html

    1 2 3 4 5 Microdata 16 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34 35 3637 38

    A Microdata API nos permite tornar esta estrutura semntica um pouco mais especfica, definindo

    o que o contedo de cada elemento. Veja este outro exemplo:

  • Arquivo: exemplos/20/microdata2.html

    1 2 3 4 5 Microdata 26 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34 35 3637 38

    Adicionamos atributos especias, itemscope e itemprop. Cada elemento itemscope define um item

    de dados. Cada itemprop define o nome de uma propriedade. O valor da propriedade o contedo

    da tag HTML. A Microdata API nos fornece acesso especial a esses dados. Veja como acessar esses

    dados:

    resultados=document.getItems()for(var i=0;i

  • HTML 5 - Curso W3C Escritrio Brasil 85A nova gerao de aplicaes web II

    Diferentes tipos de dadosNo exemplo acima, temos uma listagem de pessoas. Agora imagine que voc precise ter, no mesmo

    documento, uma listagem de pessoas e carros. Poderia escrever assim:

    Arquivo: exemplos/20/microdata3.html

    1 2 3 4 5 Microdata 36 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34 35 3637 Carros mais vendidos38 39 40 41 nome Fusca42 total 38243 44 45 46 47 nome Braslia48 total 29849 50

  • 51 52 53 nome Corcel54 total 10255 56 57 5859 60

    Note que pessoas e carros tem propriedades em comum, nome e total. Quando voc executar

    document.getItems() vai obter uma lista de todos os elementos com itemscope. Como obter

    uma lista apenas de pessoas ou de carros? Voc pode adicionar a cada item um atributo itemtype,

    que diz de que tipo de entidade so aqueles dados:

    Arquivo: exemplos/20/microdata4.html

    1 2 3 4 5 Microdata 46 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34

  • HTML 5 - Curso W3C Escritrio Brasil 87A nova gerao de aplicaes web II

    35 3637 Carros mais vendidos38 39 40 41 nome Fusca42 total 38243 44 45 46 47 nome Braslia48 total 29849 50 51 52 53 nome Corcel54 total 10255 56 57 5859 60

    Agora voc pode executar: document.getItems(carro) para obter s os carros, por

    exemplo.

    Falando um idioma comum

    Voc deve ter notado que pode definir seus prprios padres de metadados com microdata.

    Recomendo que, antes de criar seu prprio formato, verifique se o mesmo problema no j foi

    resolvido por algum. O site www.data-vocabulary.org contm alguns desses formatos padroniza-

    dos. Por exemplo, para descrever os dados de sua empresa ou organizao, no invente seu prprio

    formato, use o formato definido em http://www.data-vocabulary.org/Organization. O valor de

    itemtype deve ser a prpria URL que documenta o formato. Veja como fica:

  • Arquivo: exemplos/20/visie.html

    1 2 3 4 5 Visie Padres Web6 7 89 10 Visie Padres Web11 12

    Alameda dos Ubiatans, 257 - Planalto Paulista

    13

    14 So Paulo -15 SP -16 Brasil17

    18

    04070-030

    19 20 +55.11.3477-334721 2223 24

    Claro que a vantagem de usar o formato padronizado ao invs de inventar o seu no apenas no

    ter o trabalho de pensar os nomes das propriedades. Os sistemas de busca, e outros sistemas que

    acessem seu site, podem entender e tratar esses dados. O Google j faz isso, veja neste endereo:

    http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861

  • HTML 5 - Curso W3C Escritrio Brasil 89A nova gerao de aplicaes web II

    21. HISTRICODESESSOEAPI

    STORAGE

    Histrico de Sesso e API StorageUm dos grandes desafios de usabilidade ao se construir aplicaes web com a tecnologia atual

    apresentar um modelo de navegao consistente para o usurio. Duas grandes lacunas nos impe-

    diam de faz-lo:

    1. No havia uma forma simples de fazer com que as aes locais do usurio numa pgina

    fossem refletidas na prxima. Por exemplo, se o usurio abre e fecha itens em um menu em

    rvore e em seguida navega para a prxima pgina, era muito difcil fazer com que o menu

    aparece no mesmo estado na segunda pgina.

    2. No havia uma forma simples de fazer com que as aes do usurio numa pgina Ajax res-

    pondessem corretamente aos botes de controle de histrico do navegador (voltar e avanar).

    HTML5 traz formas simples de solucionar os dois problemas.

    Histrico de Sesso

    Voc provavelmente conhece o objeto history do na-

    vegador e seus mtodos go, back e forward. Ele nos

    permite, via javascript, um controle bsico do histrico

    de navegao. O mesmo controle que o usurio, voltar e

    avanar.

    O objeto history foi vitaminado no HTML5 com dois novos mtodos:

    Segurana

    Claro, se seu script tentar associar uma URL fora do domnio do script lista de histrico, isso vai resultar numa ex-ceo de segurana.

  • 1. pushState(data,title[,url]): acrescenta uma entrada na lista de histrico.

    2. replaceState(data,title[,url]): modifica a entrada atual na lista de histrico.

    Com isso, voc pode acrescentar itens lista de histrico, associando dados ou mesmo uma URL a

    eles. Por exemplo, digamos que voc tenha trs elementos de contedo em sua pgina e um script

    que exiba um por vez de acordo com os cliques do usurio no menu:

    function showContent(n){

    // Escondemos todos os elementos de contedo for(var i=1;i

  • HTML 5 - Curso W3C Escritrio Brasil 91A nova gerao de aplicaes web II

    usando o boto de voltar do navegador. Cada vez que ele usar o histrico, ser disparado um evento

    popstate. Assim, para que nosso script esteja completo, basta tratar esse evento:

    function showPage(n){

    // Escondemos todos os elementos de contedo for(var i=1;i

  • 1. Interfacecomplexa: o cdigo para armazenar Cookies envolve complexos clculos com da-

    tas e controle do nome de domnio.

    2. Limitedearmazenamento: alguns agentes de usurio permitiam o armazenamento de no

    mximo 20 Cookies, com apenas 4KB cada.

    HTML5 traz uma nova maneira de armazenar dados no client, a API Storage. Um objeto Storage

    possui os mtodos:

    1. getItem(key): obtm um valor armazenado no Storage

    2. setItem(key,value) guarda um valor no Storage

    3. removeItem(key) exclui um valor do Storage

    4. clear() limpa o Storage

    Esto disponveis dois objetos no escopo global (win-

    dow): localStorage e sessionStorage. O objeto localStora-

    ge armazena os dados no client sem expirao definida.

    Ou seja, se o usurio fechar o navegador e voltar ao site

    semanas depois, os dados estaro l. O sessionStorage

    armazena os dados durante a sesso atual de navegao.

    O cdigo para armazenar um valor na Storage se parece

    com isso:

    localStorage.setItem(userChoice,33)

    E quando voc precisar desse valor, em outra pgina:

    localStorage.getItem(userChoice)

    Serializar

    Uma outra complicao dos Cookies resolvida pela API Storage o fato de Cookies s armazenarem strings, nos obrigando a serializar arrays e obje-tos javascript. A especificao da API Storage rege que qualquer valor ja-vascript pode ser armazenado e recu-perado. Infelizmente, em alguns dos navegadores em que testamos, os valo-res so convertidos para strings assim como nos Cookies. Toramos para que os agentes de usurio implementem corretamente esse recurso.

  • HTML 5 - Curso W3C Escritrio Brasil 93A nova gerao de aplicaes web II

    Essa interface j muito mais simples que a de Cookies. Mas pode ficar melhor. Voc pode usar o

    Storage como um array. Por exemplo:

    if(!sessionStorage[theme]){ sessionStorage[theme]=oldfurniture;}

    No h como isso ser mais simples! Alm disso, o espao de armazenamento sugerido pela docu-

    mentao de 5MB para cada domnio, resolvendo, acredito que por mais uma dcada, o problema

    de espao de armazenamento local.

  • HTML 5 - Curso W3C Escritrio Brasil 95A nova gerao de aplicaes web II

    22. APLICAESOFFLINE

    CachingHTML5 prov uma maneira de se indicar ao navegador que elementos so necessrios e devem ser

    postos em cache para que uma aplicao funcione offline. O exemplo da documentao oficial

    bastante esclarecedor. D uma olhada na seguinte pgina:

    Arquivo: exemplos/22/clock.html

    1 2 3 4 Clock5 6 7 8 9

    The time is:

    10 11

    Trata-se de um widget de relgio. Para funcionar, este HTML depende dos arquivos clock.js e

    clock.css. Para permitir que o usurio acesse esta pgina offile, precisamos escrever um arquivo de

    manifesto, indicando que URLs devem ser postas em cache. Vamos preparar uma nova verso do

    widget, contendo o manifesto, que um arquivo com a extenso .manifest e que deve ser servido

    com o tipo MIME text/cache-manifest. Em nosso caso, o arquivo vai se chamar clock.mani-

    fest e ter o seguinte contedo:

    CACHE MANIFESTclock1.htmlclock.cssclock.js

    Agora veja o HTML com o arquivo de manifesto linkado:

  • Arquivo: exemplos/22/clock1.html

    1 2 3 4 Clock5 6 7 8 9

    The time is:

    10 11

    Note que recomendado que voc insira o prprio HTML principal na lista de URLs do arquivo

    de manifesto, embora no seja necessrio. Ao encontrar uma pgina com um arquivo de manifesto

    vinculado, o navegador far cache das URLs listadas no manifesto e da prpria pgina.

    Note tambm que no necessrio que todas as URLs para cache estejam importadas no documnto

    atual. O arquivo de manifesto pode contar todas as pginas de sua aplicao que forem necessrias

    para permitir o funcionamento offline, inclusive a navegao entre pginas.

    O objeto ApplicationCacheO objeto ApplicationCache controla o status e operaes de caching da pgina. Ele pode ser aces-

    sado via javascript, assim:

    window.applicationCache

    Seu mtodo mais interessante o update(), que faz com que o agente de usurio recarregue o cache

    da aplicao. Alm disso, ele possui a propriedade status, cujo valor numrico pode ser um dos

    seguintes:

    0-UNCACHEDNo h um arquivo de manifesto nesta pgina ou apontando para ela

    1-IDLEO objeto ApplicationCache est ocioso. O cache est atualizado.

  • HTML 5 - Curso W3C Escritrio Brasil 97A nova gerao de aplicaes web II

    2CHECKINGO arquivo de manifesto est sendo baixado e conferido.

    3-DOWNLOADINGAs URLs vinculadas no manifesto esto sendo baixadas.

    4-UPDATEREADYO cache antigo, mas ainda no foi marcado como obsoleto.

    5-OBSOLETEO cache foi marcado como obsoleto e precisa ser atualizado assim que possvel.

    O objeto ApplicationCache tambm possui os seguintes eventos, relacionados a sua mudana de

    status:

    onchecking onerror onnoupdate ondownloading onprogress onupdateready oncached onobsolete

    Como voc pode ver, alm de onerror, temos um evento para cada um dos status da lista acima.

    Controle de status da aplicaoNo exemplo do relgio acima no h formulrios ou submisses Ajax. O agente de usurios no

    troca dados com o servidor. Assim muito fcil fazer sua aplicao rodar offline, mas essa no a

    realidade da maioria das aplicaes. Vimos no captulo anterior como fazer armazenamento local

    de dados. Com isso, voc pode armazenar os dados que o navegador deveria enviar para o servidor

    enquanto a aplicao estiver offline e, to logo ela esteja online, enviar tudo.

  • Para saber se a aplicao est online, basta acessar a propriedade onLine do objeto window.

    navigator:

    function salva(dados){ if(window.navigator.onLine){ enviaAjax(dados) }else{ salvaLocal(dados) }}

    E para disparar o envio quando a aplicao estiver online e avisar o usurio quando ela estiver offli-

    ne, usamos os eventos ononline e onoffline do objeto window:

    window.ononline=function(){ enviaAjax(obtemLocal()) document.getElementById(warning).innerHTML=}

    window.onoffline=function(){ document.getElementById(warning).innerHTML=Aplicao offline.}

  • HTML 5 - Curso W3C Escritrio Brasil 99A nova gerao de aplicaes web II

    23. SCROLLINTOVIEWEHIDDEN

    Scrolling into viewUm truque simples, mas muito til. Voc pode fazer:

    document.getElementById(aviso).scrollIntoView()

    Isso vai rolar a pgina at que o elemento com o id aviso esteja visvel no topo do viewport. Voc

    pode passar um parmetro opcional top:

    document.getElementById(aviso).scrollIntoView(false)

    O valor default true. Se voc passar false, a rolagem vai deixar o objeto visvel na base do viewport.

    hiddenOcultar e exibir elementos uma das tarefas mais comuns em Javascript. Em HTML5 existe um

    atributo especfico para isso, o atributo hidden. Ao inser-lo em um elemento assim:

    Xi, se esconde!

    Ou assim:

    Xi, se esconde!

    O elemento estar oculto.

    hidden e Javascript

    Acessar o atributo hidden em Javascript muito conveniente:

    function switchElement(elm){

  • if(elm.hidden) elm.hidden=false else elm.hidden=true}

    Claro, voc pode fazer:

    function switchElement(elm){ elm.hidden=!elm.hidden}

    Sugiro que voc sempre use o atributo hidden. Descobrir se o elemento est oculto lendo as pro-

    priedades display e visibility do CSS, alm de dar mais trabalho, pode gerar confuso.

  • HTML 5 - Curso W3C Escritrio Brasil 101A nova gerao de aplicaes web II

    24. GEOLOCATIONAPI

    Mtodos de GeolocalizaoH trs populares maneiras de um agente de usurio descobrir sua posio no globo:

    GeolocalizaoIP o mtodo usado pela maioria dos navegadores web em computadores. Atravs de consultas whois e servios de localizao de IP, vai determinar a cidade ou regio em que voc est.

    TriangulaoGPRSDispositivos conectados a uma rede de celulares e sem um GPS, ou com o GPS desligado, podem determinar sua posio pela tringulao das antenas GPRS prximas. bem mais preciso que o mtodo baseado em IP, vai mostrar em que parte do bairro voc est.

    GPS o mtodo mais preciso. Em condies ideais, a margem de erro de apenas 5 metros.

    Embora essas sejam as trs maneiras mais populares de se resolver o problema, podem no ser as

    nicas. Alguns agentes de usurio podem usar uma combinao desses mtodos, ou mesmo um

    novo mtodo que venha a ser inventado. Por isso, a Geolocation API agnstica em relao ao

    mtodo usado. H apenas uma maneira de ligar e desligar o modo de alta preciso, o que vai ter

    significado diferente em cada agente de usurio.

    Para obter a posio do usurio, basta executar o script:

    navigator.geolocation.getCurrentPosition(showpos)

    Onde showpos uma funo callback, que vai receber um objeto de posicionamento. Veja um

    exemplo:

    function showpos(position){ lat=position.coords.latitude lon=position.coords.longitude alert(Your position: +lat+,+lon)}

  • Claro, voc pode fazer o que quiser, abrir um mapa, submeter a posio via Ajax, enviar os dados

    para um webservice, etc.

    O mtodo getCurrentPosition recebe dois outros parmetros. O primeiro uma funo para trata-

    mento de erro. O segundo, um objeto de configurao.

    Tratando erros

    Quando o script tenta acessar o posicionamento, o navegador exibe uma barra como esta:

    O usurio pode ento escolher se deseja ou no compartilhar sua posio com o site. Alm de o

    usurio poder dizer no, muita coisa pode dar errado na hora de obter a geolocalizao. Para tratar

    isso, voc pode passar o segundo parmetro a getCurrentPosition:

    navigator.geolocation.getCurrentPosition(showpos,erropos)

    Caso algo d errado, a funo erropos vai receber um objeto PositionError, que tem o atributo

    code, que pode ter um dos seguintes valores:

    1-PermissonegadaO usurio clicou em no compartilhar.

    2-PosioindisponvelO agente de usurio est desconectado, os satlites de GPS no puderam ser alcanados ou algum erro semelhante.

    3-TimeoutTempo esgotado ao obter uma posio. Voc pode definir o tempo mximo ao chamar getCurrentPosition.

    0-ErrodesconhecidoAlguma outra coisa impediu o agente de usurio de obter uma posio.

  • HTML 5 - Curso W3C Escritrio Brasil 103A nova gerao de aplicaes web II

    No trate a resposta do usurio como um erro

    Em sua funo de tratamento de erro, se obtiver o cdigo de erro 1, por favor, no incomode o usu-

    rio com mensagens de erro. Ele escolheu no compartilhar sua posio com o site. Talvez a melhor

    atitude seja no fazer nada nesse momento.

    O objeto de configurao

    O terceiro parmetro de getCurrentPosition um objeto de configurao, que pode ter as seguintes

    propriedades:

    enableHighAccuracySe true, liga o modo de alta preciso. Num celular isso pode instruir o navegador, por exem-plo, a usar o GPS ao invs da triangulao GPRS

    timeoutO tempo em milissegundos que o agente do usurio vai esperar pela posio antes de dispa-rar um erro tipo 3.

    maximumAgeO tempo, em milissegundos, que o navegador pode cachear a posio.

    watchPosition

    Se o que voc deseja rastrear a posio do usurio continuamente, pode usar, ao invs de getCur-

    rentPosition, o mtodo watchPosition. Ele tem a mesma assinatura de getCurrentPosition:

    w=navigator.geolocation.watchPosition(showpos,erropos)

    A diferena que a funo showpos ser chamada toda vez que a posio do usurio mudar. O

    valor de retorno um nmero, que pode ser usado posteriormente para cancelar o watcher:

    navigator.geolocation.clearWatch(w)

  • HTML 5 - Curso W3C Escritrio Brasil 105A nova gerao de aplicaes web II

    25. UNDO

    O objeto UndoManagerO agente de usurio deve armazenar um histrico de alteraes para cada documen-

    to carregado. Esse histrico controlado pelo objeto UndoManager, acessvel atravs de

    window.undoManager. O histrico guarda dois tipos de alteraes:

    AlteraesDOMO prprio histrico de alteraes do navegador, as alteraes DOM so inseridas automati-camente no histrico quando o usurio usa um campo de edio.

    ObjetosundoOs objetos undo so inseridos no histrico e controlados pelos seus scripts. Por exemplo, uma aplicao de e-mail pode guardar um objeto undo representando o fato de que o usurio moveu um e-mail de uma pasta para outra.

    O objeto UndoManager possui os seguintes mtodos e propriedades:

    lengtho nmero de entradas no histrico

    positiono nmero da entrada atual no histrico

    add(data,title)adiciona uma entrada especfica no histrio. data pode ser um objeto literal com dados ar-bitrrios. title como essa entrada vai aparecer descrita na lista do histrico

    remove(index)remove uma entrada especfica do histrico

    clearUndo()remove todas as entradas antes da atual no histrico

    clearRedo()remove todas as entradas aps a atual no histrico

    Alm disso, os itens no histrico podem ser acessados com window.undoManager[index].

  • Respondendo s aes de undo e redo

    Cada vez que o usurio disparar uma ao de undo ou redo, e o item do histrico for um objeto

    undo, ser disparado o evento correspondente, window.onundo ou window.onredo. As funes

    associadas a estes eventos recebero como parmetro um objeto event, contendo uma propriedade

    data, cujo valor o objeto undo que voc inseriu no histrico.

    Veja o exemplo:

    window.onundo=function(e){ alert(Refazer a alterao: +e.data)}

    Disparando as aes de undo e redo

    Se voc quiser oferecer em sua aplicao botes para undo e redo, basta que eles executem:

    document.execCommand(undo)

    Ou:

    document.execCommand(redo)

    1.Viso geral do HTML5HypertextoO comeo e a interoperabilidadeWHAT Working GroupO HTML5 e suas mudanasO que o HTML5?

    2.Anlise do suporte atual pelos navegadores e estratgias de usoO desenvolvimento modularMotores de RenderizaoCompatibilidade com HTML5Tcnicas de detectaoUtilizando o Modernizr

    3.Estrutura bsica, DOCTYPE e charsetsO DoctypeO elemento HTMLHEADMetatag CharsetTag LINK

    4.Modelos de contedoCategoriasMetadata contentFlow contentSectioning contentHeading contentPhrasing contentEmbedded contentInteractive content

    5.Novos elementos e atributosAtributos

    6.Elementos modificados e ausentesElementos modificadosElementos ou atributos descontinuados

    7.Novos tipos de camposNovos valores para o atributo typetelsearchemailurlDatas e horasnumberrangecolor

    8.Tipos de dados e validadoresFormulrios vitaminadosautofocusPlaceholder textrequiredmaxlength

    Validao de formulriospatternnovalidate e formnovalidateCustom validators

    9.Detalhes e contedo editvel.Ainda mais formulriosDetalhes e sumrioContedo editvel

    10.Drag-n-drop e correo ortogrficaDrag and DropDetalhes importantes:Reviso ortogrfica e gramatical

    11. Elementos audio e video, e codecsudioOrigens alternativas de udio

    VdeoCodecs

    12.Elemento device e Stream APIO elemento deviceStreamsPeer-to-peer

    13. MathML e SVGMathMLSVG

    14. Canvas APIO elemento canvasCanvas e SVG

    15. Server-Sent EventsEventSourceO protocolo de comunicao

    16. DOM e HTML5DOM e HTML5Por qu DOM?

    Vamos s diferenasgetElementsByClassNameinnerHTMLactiveElement e hasFocus()getSelection()Intervalos de seleodocument.headSelector APICaractersticas especiais de DomNodeListDatasets

    17. Novos eventos DOMUma palavra sobre eventosElementos multimdia:Eventos em campos de formulrio:Eventos gerais:Drag-and-drop:

    Atributos de evento

    18. Menus e toolbarsO elemento menuTipos de comandoO elemento commandPrefira no usar command, por enquanto

    19.Tipos de linksLinksMetadados de navegaoMetadados da pginaComportamento dos links na pgina

    20. MicrodataSemntica adicionalDiferentes tipos de dadosFalando um idioma comum

    21. Histrico de sesso e API StorageHistrico de Sesso e API StorageHistrico de SessolocalStorage e sessionStorage

    22. Aplicaes offlineCachingO objeto ApplicationCacheControle de status da aplicao

    23. Scroll in to view e hiddenScrolling into viewhiddenhidden e Javascript

    24.Geolocation APIMtodos de GeolocalizaoTratando errosNo trate a resposta do usurio como um erroO objeto de configuraowatchPosition

    25. UndoO objeto UndoManagerRespondendo s aes de undo e redoDisparando as aes de undo e redo