Desmistificando HTML5 e CSS3

O desenvolvimento da Internet está sempre gerando o surgimento de novas tecnologias, e HTML5 e CSS3 são temas quentes que têm sido discutidos recentemente. Para todos os desenvolvedores da Internet, especialmente os desenvolvedores front-end, eles estão cheios de curiosidade e desejo. Então, quais são as coisas sobre HTML5 e CSS3 que nos fazem brilhar? Eu compartilhei "Revelando os segredos do HTML5 e CSS3 " com você na WebRebuild Beijing Exchange Conference e no Pearl Milk Tea Gang. O PPT está aqui:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

O antecessor do rascunho do HTML 5 foi chamado de Web Applications 1.0. Foi proposto pelo WHATWG em 2004 e aceito pelo W3C em 2007, e uma nova equipe de trabalho em HTML foi estabelecida. Em 22 de janeiro de 2008, foi divulgada a primeira minuta oficial. HTML 5 é o maior avanço nos padrões de desenvolvimento web da última década. Ao contrário das versões anteriores, o HTML 5 não é usado apenas para representar conteúdo da Web. Sua nova missão é transformar a Web em uma plataforma de aplicativos madura. Na plataforma HTML 5, vídeo, áudio, imagens, animações e interações baseadas em computador são padronizadas. . Então, vamos dar uma olhada na visão geral técnica do HTML5:

Elementos novos e removidos do HTML5

HTML5 adiciona muitos novos elementos multimídia e interativos, como vídeo e áudio. No HTML4, se você deseja incorporar um vídeo ou áudio, é necessário introduzir uma grande seção de código e é compatível com vários navegadores. introduza uma tag. É isso, tão conveniente quanto a tag img. Em termos de layout de página e implementação de conteúdo, o HTML5 adicionou muitos novos elementos de tag estruturados, bem como elementos semânticos e de nível de bloco. Se você quiser usar HTML para representar a barra de progresso de upload de um arquivo, no HTML5 você pode usar o progresso. Elemento para representá-lo. Possui um atributo de valor que descreve quantas tarefas foram concluídas e um atributo max descreve quantas tarefas são necessárias no total. Você também pode obter o atributo de posição (somente leitura) desta barra de progresso por meio do DOM. interface, que é a porcentagem de conclusão da tarefa. O Youtube já fez uma tentativa na tecnologia HTML5. http://www.youtube.com/html5 (precisa contornar o firewall ) é uma DEMO feita em HTML5. Claro, o HTML5 também adiciona alguns novos atributos a alguns elementos, como o atributo placeholder de input e textarea, que é equivalente ao prompt de entrada da caixa de entrada. O script possui um atributo assíncrono que afetará o carregamento e a execução do arquivo. roteiro. Para todos os atributos comuns ao HTML, normalmente os chamamos de "atributos globais", como classe, id, tabindex, título. O HTML5 também adiciona alguns novos atributos globais, como contenteditable, contextmenu, hidden e outros atributos. O HTML5 também adiciona suporte para microdados, como os novos atributos do HTML5, como item, itempro e assunto.

É claro que o HTML5 também remove alguns elementos que representam a apresentação da página, como fonte, centro, strike, etc. Isso deveria ser feito por CSS, por isso ainda são fáceis de entender. Ele também remove alguns elementos que afetam a acessibilidade do site. como frame, frameset, noframe e alguns elementos incomuns, como acrônimo, use abbr para representar a abreviatura. O HTML5 também remove alguma familiaridade com o HTML que afeta a compatibilidade do cliente, como o atributo rev do link e o atributo scope do td. O HTML5 também remove alguns atributos que indicam a apresentação da página, como os atributos align e bgcolor de alguns elementos.

Suporte HTML5 para formulários

HTML5 fornece tipos de controle poderosos, como url, email, data, tel, etc., atributos de restrição poderosos, como obrigatório para indicar obrigatório, aceitar atributos para upload de arquivos e suporte para alguns modelos de elementos repetidos de formulário. HTML5 também fornece suporte ao enviar. um formulário. Você pode definir o método de envio para envio XML, para que os dados recebidos pelo servidor estejam no formato XML. Os formulários HTML5 são definidos como "Web Forms 2.0". 2.0.

Clique aqui para ver o Web Forms 2.0 DEMO , requer Opera9.5+

Alterações no DOM HTML5

HTML5 tem muitas interfaces herdadas de HTMLDocument no DOM LEVEL 2 HTML É claro que o HTML5 também tem alguns novos membros notáveis ​​no DOM, como: suporte a getElementsByClassName, que permite selecionar elementos com base em nomes de classes. seleção. Objeto, existem dois métodos querySelector e querySelectorAll no seletor, que podem obter o elemento a ser consultado com base no seletor css, que é equivalente a Y.one e Y.all em YUI3.

API Javascript HTML5

Quais novas APIs o HTML5 adiciona ao Javascript?

• Vídeo/Áudio: HTML5 fornece APIs para vídeo e áudio para permitir que os desenvolvedores controlem sua própria interface de usuário, como reproduzir ou pausar conteúdo de mídia.
• Canvas: Canvas é um novo elemento HTML que pode ser usado para desenhar gráficos usando linguagem Script (geralmente JavaScript). Por exemplo, você pode usá-lo para desenhar imagens, compor imagens ou fazer animações simples (e não tão simples). Canvas é uma coisa mágica. A primeira sensação que me dá é como usar o Photoshop. Cada método é tão semelhante ao Photoshop. Você pode obter a API do canvas por meio de canvas.getContext('2d') , você pode definir sua cor de preenchimento. fillStyle ou defina a cor do traço por meio de strokeStyle Até a operação de desenhar caminhos coincide com a operação da caneta do Photoshop. O Canvas tem sido usado em muitos sites, como as estatísticas de status de download em tempo real do Firefox , e o canvas pode até ser usado para escrever jogos da Web.
• Arrastar e Soltar: Na mídia visual de dispositivos apontadores, a operação de “Arrastar” é o evento de pressionamento do mouse (mousedown) acompanhado do movimento do mouse (mousemove), enquanto “Soltar” é o evento acionado quando o mouse é liberado. As interfaces DataEvent e DataTransfer são definidas em Drag&Drop. Ao mesmo tempo, quando ocorre uma operação de arrastar, eventos como dragstart, dragenter, dragleave, drop e dragend serão acionados.
• Web Workers: Torne o Javascript multithread e possa realizar muito trabalho em segundo plano sem bloquear a operação atual do navegador.
• Geolocalização: Geolocalização. Quando você executa o método navigator.geolocation.getCurrentPosition(success, error), o navegador perguntará se você deseja compartilhar sua localização geográfica. Se você optar por compartilhar, a função de sucesso será chamada de volta. a função de sucesso é o objeto de posição. Este objeto de posição possui um objeto de coordenadas. O objeto de coordenadas contém muitas informações de localização geográfica, como latitude (dimensão) e longitude (longitude), para que você possa saber sua localização específica. já é amplamente utilizado em alguns telefones celulares, como o Iphone Applied.
• Cache de aplicativo: Este é o suporte do HTML5 para aplicativos offline. Ao adicionar um manifesto de atributo ao elemento html, o navegador perguntará se você deseja armazenar os dados em cache para o cliente. lista de arquivos de manifesto. Armazene em cache os arquivos necessários para que você ainda possa usar o aplicativo quando sua rede estiver indisponível. Para aplicativos off-line, o Google também desenvolveu a extensão do navegador Google Gears, mas no final o Google mudou para HTML5 e pode ter visto as vantagens do armazenamento HTML5 e dos aplicativos off-line.
• Armazenamento: o Webkit implementou armazenamento de banco de dados. Você pode consultar dados e executar algumas operações, assim como operações de banco de dados de back-end. Outro tipo de armazenamento é o armazenamento de valores-chave, como sessionStorage e localStorage, que pode armazenar e obter valores por meio de setItem e getItem. Em comparação com o armazenamento de cookies, a capacidade de armazenamento é muito maior.
• Mensagens X-Document: Os navegadores impedem a comunicação de documentos entre diferentes domínios por razões de segurança e privacidade. Embora esta seja uma restrição de segurança, traz muitos problemas à comunicação de documentos em diferentes domínios que não são prejudiciais, mas HTML5 Este documento cruzado. a comunicação pode ser alcançada, permitindo-nos ignorar a origem do domínio de origem e evitando ataques de script.

HTML5 entusiasma você? Então, quando o HTML5 se tornará um padrão? Diz-se que terá que esperar até 2022. Existe um site interessante http://ishtml5readyyet.com/ que informa quantos dias até que o HTML5 realmente chegue.