Introdução ao HTML5 (Tableless)

Embed or link this publication

Popular Pages


p. 1

html5 curso w3c escritório brasil

[close]

p. 2

autores elcio ferreira e diego eis

[close]

p. 3

Índice 1 visãogeraldohtml5 hypertexto o começo e a interoperabilidade what working group o html5 e suas mudanças o que é o html5 o desenvolvimento modular motores de renderização compatibilidade com html5 técnicas de detectação utilizando o modernizr o doctype o elemento html head metatag charset tag link categorias metadata content flow content sectioning content heading content phrasing content embedded content interactive content atributos 7 7 8 8 9 9 2 análisedosuporteatualpelosnavegadoreseestratégiasdeuso 11 11 11 12 13 14 15 16 16 16 17 19 20 20 22 23 23 24 24 30 31 32 3 estruturabásica,doctypeecharsets 15 4 modelosdeconteúdo 19 5 6 novoselementoseatributos elementosmodificadoseausentes elementos modificados elementos ou atributos descontinuados 27 31

[close]

p. 4

7 novostiposdecampos novos valores para o atributo type tel search email url datas e horas number range color formulários vitaminados autofocus placeholder text required maxlength validação de formulários pattern novalidate e formnovalidate custom validators ainda mais formulários detalhes e sumário conteúdo editável 33 33 33 33 33 33 34 34 35 36 37 37 37 38 38 38 39 39 40 43 43 44 45 46 47 49 49 50 50 53 54 54 55 56 8 tiposdedadosevalidadores 37 9 detalheseconteúdoeditável 43 10 drag-n-dropecorreçãoortográfica drag and drop detalhes importantes revisão ortográfica e gramatical Áudio 45 11 elementosaudioevideo,ecodecs origens alternativas de áudio vídeo codecs 49 12 elementodeviceestreamapi o elemento device streams peer-to-peer mathml svg 53 13 mathmlesvg 55

[close]

p. 5

14 canvasapi o elemento canvas canvas e svg eventsource o protocolo de comunicação dom e html5 por quê dom vamos às diferenças getelementsbyclassname innerhtml activeelement e hasfocus getselection intervalos de seleção document.head selector api características especiais de domnodelist datasets uma palavra sobre eventos elementos multimídia eventos em campos de formulário eventos gerais drag-and-drop atributos de evento o elemento menu tipos de comando o elemento command prefira não usar command por enquanto links 59 59 61 63 63 65 65 65 65 66 66 67 68 68 69 70 70 71 71 72 72 73 73 75 75 76 76 79 79 80 81 83 85 87 15 server-sentevents 63 16 domehtml5 65 17 novoseventosdom 71 18 menusetoolbars 75 19 tiposdelinks metadados de navegação metadados da página comportamento dos links na página 79 20 microdata semântica adicional diferentes tipos de dados falando um idioma comum 83

[close]

p. 6

21 históricodesessãoeapistorage histórico de sessão e api storage histórico de sessão localstorage e sessionstorage caching o objeto applicationcache controle de status da aplicação scrolling into view hidden hidden e javascript 89 89 89 91 95 96 97 99 99 99 22 aplicaçõesoffline 95 23 scrollintoviewehidden 99 24 geolocationapi métodos de geolocalização tratando erros não trate a resposta do usuário como um erro o objeto de configuração watchposition o objeto undomanager respondendo às ações de undo e redo disparando as ações de undo e redo 101 101 102 103 103 103 105 106 106 25 undo 105

[close]

p. 7

1 visÃogeraldohtml5 de acordo com o w3c a web é baseada em 3 pilares · um esquema de nomes para localização de fontes de informação na web esse esquema chama-se uri · um protocolo de acesso para acessar estas fontes hoje o http · uma linguagem de hypertexto para a fácil navegação entre as fontes de informação o html vamos nos focar no terceiro pilar o html hypertexto html é uma abreviação de hypertext markup language linguagem de marcação de hypertexto resumindo em uma frase o html é uma linguagem para publicação de conteúdo texto imagem vídeo áudio e etc na web o html é baseado no conceito de hipertexto hipertexto são conjuntos de elementos ­ ou nós ­ ligados por conexões estes elementos podem ser palavras imagens vídeos áudio documentos etc estes elementos conectados formam uma grande rede de informação eles não estão conectados linearmente como se fossem textos de um livro onde um assunto é ligado ao outro seguidamente a conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados organizando conhecimentos e guardando informações relacionadas para distribuir informação de uma maneira global é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso o html se propõe a ser esta linguagem desenvolvido originalmente por tim berners-lee o html ganhou popularidade quando o mosaic browser desenvolvido por marc andreessen na década de 1990 ganhou força a partir daí desenvolvedores e fabricantes de browsers utilizaram o html como base compartilhando as mesmas convenções markup html 5 curso w3c escritório brasil 7

[close]

p. 8

o começo e a interoperabilidade entre 1993 e 1995 o html ganhou as versões html html2.0 e html3.0 onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem contudo até aqui o html ainda não era tratado como um padrão apenas em 1997 o grupo de trabalho do w3c responsável por manter o padrão do código trabalhou na versão 3.2 da linguagem fazendo com que ela fosse tratada como prática comum você pode ver http www.w3.org/tr/html401/appendix/changes.html desde o começo o html foi criado para ser uma linguagem independente de plataformas browsers e outros meios de acesso interoperabilidade significa menos custo você cria apenas um código html e este código pode ser lido por diversos meios ao invés de versões diferentes para diversos dispositivos dessa forma evitou-se que a web fosse desenvolvida em uma base proprietária com formatos incompatíveis e limitada por isso o html foi desenvolvido para que essa barreira fosse ultrapassada fazendo com que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes não importando o tamanho da tela resolução variação de cor dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis o html deve ser entendido universalmente dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso what working group enquanto o w3c focava suas atenções para a criação da segunda versão do xhtml um grupo chamado web hypertext application technology working group ou whatwg trabalhava em uma versão do html que trazia mais flexibilidade para a produção de websites e sistemas baseados na web o whatwg http www.whatwg.org foi fundado por desenvolvedores de empresas como mozilla apple e opera em 2004 eles não estavam felizes com o caminho que a web tomava e nem com o rumo dado ao xhtml por isso estas organizações se juntaram para escrever o que seria chamado hoje de html5.

[close]

p. 9

entre outros assuntos que o whatwg se focava era web forms 2.0 que foi incluído no html5 e o web controls 1.0 que foi abandonado por enquanto a participação 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é então trabalhavam separadamente que reconheceu todo o trabalho do grupo em outubro de 2006 tim berners-lee anunciou que trabalharia juntamente com o whatwg na produção do html5 em detrimento do xhtml 2 contudo o xhtml continuaria sendo mantido paralelamente de acordo comas mudanças causadas no html o grupo que estava cuidando especificamente do xhtml 2 foi descontinuado em 2009 o html5 e suas mudanças quando o html4 foi lançado o w3c alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side desde este tempo assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores contudo o html4 ainda não trazia diferencial real para a semântica do código o html4 também não facilitava a manipulação dos elementos via javascript ou css se você quisesse criar um sistema com a possibilidade de drag n drop de elementos era necessário criar um grande script com bugs e que muitas vezes não funcionavam de acordo em todos os browsers o que é o html5 o html5 é a nova versão do html4 enquanto o whatwg define as regras de marcação que usaremos no html5 e no xhtml eles também definem apis que formarão a base da arquitetura web essas apis são conhecidas como dom level 0 markup html 5 curso w3c escritório brasil 9

[close]

p. 10

um dos principais objetivos do html5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final ao contrário das versões anteriores o html5 fornece ferramentas para a css e o javascript fazerem seu trabalho da melhor maneira possível o html5 permite por meio de suas apis a manipulação das características destes elementos de forma que o website ou a aplicação continue leve e funcional o html5 também cria novas tags e modifica a função de outras as versões antigas do html não continham um padrão universal para a criação de seções comuns e específicas como rodapé cabeçalho sidebar menus e etc não havia um padrão de nomenclatura de ids classes ou tags não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites há outros elementos e atributos que sua função e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz por exemplo elementos como b ou i que foram descontinuados em versões anteriores do html agora assumem funções diferentes e entregam mais significado para os usuários o html5 modifica a forma de como escrevemos código e organizamos a informação na página seria mais semântica com menos código seria mais interatividade sem a necessidade de instalação de plugins e perda de performance É a criação de código interoperável pronto para futuros dispositivos e que facilita a reutilização da informação 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 compatível com os browsers recentes possibilitando a utilização das novas características imediatamente.

[close]

p. 11

2 anÁlisedosuporteatualpelos navegadoreseestratÉgiasdeuso o desenvolvimento modular antigamente para que uma nova versão do html ou do css fosse lançada todas as ideias listadas na especificação deveriam ser testadas e desenvolvidas para então serem publicadas para o uso dos browsers e os desenvolvedores esse método foi mudado com o lançamento do html5 e o css3 a partir de agora as duas tecnologias foram divididas em módulos isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utilizarem as novidades das linguagens as propriedades do css3 por exemplo foram divididas em pequenos grupos há um grupo cuidando da propriedade background outro da propriedade border outro das propriedades de texto e etc cada um destes grupos são independentes e podem lançar suas novidades a qualquer momento logo o desenvolvimento para web ficou mais dinâmico 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 não ou um browser pode escolher suportar um api diferente do api que o concorrente implementou contudo os browsers tem mostrado grande interesse em se manterem atualizados em relação aos seus concorrentes motores de renderização há uma grande diversidade de dispositivos que acessam a internet entre eles há uma série de tablets smartphones pc s e etc cada um destes meios de acesso utilizam um determinado browser para navegar na web não há como os desenvolvedores manterem um bom nível de compatibilidade com todos estes browsers levando em consideração a particularidade de cada um uma maneira markup html 5 curso w3c escritório brasil 11

[close]

p. 12

mais segura de manter o código compatível é nivelar o desenvolvimento pelos motores de renderização cada browser utiliza um motor de renderização que é responsável pelo processamento do código da página abaixo segue uma lista dos principais browsers e seus motores motor webkit gecko trident presto browser safari google chrome firefox mozilla camino internet explorer 4 ao 9 opera 7 ao 10 É interessante que você faça código compatível com estes motores focando a compatibilidade nos motores de renderização você atingirá uma amplitude maior de browsers por exemplo se seu código funcionar no webkit você alcançará o safari e o chrome dois dos principais browsers do mercado para desktops além disso você também alcança aparelhos como blackberry iphone ipod touch ipad e dispositivos que rodam android compatibilidade com html5 atualmente o webkit é o motor mais compatível com os padrões do html5 como a apple tem interesse que seus dispositivos sejam ultracompatíveis com os padrões ela tem feito um belo trabalho de atualização e avanço da compatibilidade deste motor contudo o firefox e o opera já estão compatíveis com grande parte da especificação do html5 e css3 e a cada upgrade eles trazem mais novidades e atualização dos padrões o que pode te preocupar de verdade é a retrocompatibilidade com versões antigas de browsers como o internet explorer a microsoft está fazendo um bom trabalho com o ie9 mas as versões 8 e 7 não tem quase nenhum suporte ao html5 o que é um problema sério para aplicações web baseadas em tecnologias mais recentes mas que a base de usuários utiliza as versões antigas do internet explorer.

[close]

p. 13

abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns módulos do html5 localstorage históricodesessão aplicaçõesoffline novostiposdecampos form:autofocus form:autocomplete form:required safari sssssns chrome opera sssssnssssnsssss firefox sssnnnns ie8 ssnnnnnn ie9 ssnnnnns video,audioecanvastext s técnicas de detectação pode ser que o usuário não utilize um browser que suporta html5 neste caso você pode redirecioná-lo para uma versão do site mais simples ou talvez apenas mostrar uma mensagem alertando o usuário sobre a importância da atualização do browser para isso temos algumas técnicas de detectação para conferir se o browser suporta ou não html5 quando o browser visita um website ele constrói uma coleção de objetos que representam elementos html na página cada elemento no código é representado no dom como um objeto diferente todo objeto dom tem propriedades em comum mas alguns objetos tem características específicas usaremos estes objetos para fazermos a detectação abaixo segue 4 meios que você poderá utilizar para detectar o suporte do browser markup html 5 curso w3c escritório brasil 13

[close]

p. 14

1 verifique se uma determinada propriedade existe em objetos globais como window ou navigator nesse caso verificamos o suporte a geolocalização 2 crie um elemento e verifique se uma determinada propriedade existe neste elemento 3 crie um elemento e verifique se um determinado método existe neste elemento então chame o método e verifique se o valor retorna por exemplo teste quais formatos de vídeo são suportados 4 crie um elemento e defina um atributo com um determinado valor então verifique se o atributo suporta este valor por exemplo crie um input e verifique quais types são suportados utilizando o modernizr o modernizr http www.modernizr.com é uma biblioteca de detectação que lhe permite verificar o suporte da maioria das características 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 geolocalização por exemplo basta inserir este script na página se o browser suportar a feature testada ele retornará true if modernizr.geolocation aceita a feature else não aceita a feature testada }

[close]

p. 15

3 estruturabÁsica,doctypee charsets a estrutura básica do html5 continua sendo a mesma das versões anteriores da linguagem há apenas uma excessão na escrita do doctype segue abaixo como a estrutura básica pode ser seguida arquivo exemplos/3/estruturabasica.html 1 doctype html 2

[close]

Comments

no comments yet