Tag: padrões abertos

DOM: id dos elementos são variáveis globais

Vi no twitter e no facebook, algumas pessoas falando que para mostrar um elemento do HTML no Console do Groogle Chrome, você precisa apenas escrever o ID desse elemento. O @johnjbarton esclareceu que isso acontece porque todos os IDs dos elementos SÃO variáveis globais no javascript. Veja mais detalhes abaixo:

O Padrão:

O HTML5 especifica que o objeto window pode ter uma chave de propriedade na qual o valor dela é um elemento html se:

  • Existe exatamento 1 elemento DOM em que a propriedade ‘id’ tem o valor da chave
  • Existe exatamente 1 elemento DOM que a propriedade ‘name’ tem o valor da chave. O elemento deve ser um tipo: a, applet, area, embed, form, frame, frameset, iframe, img, object.

Exemplo, no site da Tribo do CI  você pode abrir o console do chrome e digitar: window[‘branding’] ou simplesmente branding. Aparecerá a tag header com id=’branding’. Se existe mais de uma tag encontrada, regras diferentes são aplicadas. Com isto em mente, veja outro exemplo abaixo:

<div id=”foo”></div>

O elemento acima pode ser acessado via window.foo ou, como todas as propriedades de window, apenas foo. Por exemplo, no console do Chrome, você pode fazer:

> "foo" in window
    true
> foo
    <div id=?"foo">?</div>?

Firefox

No firefox funciona um pouco diferente

> "foo" in window
    false
> typeof foo  // Essa variável existe?
    object
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> foo
    [object HTMLDivElement]
    Element referenced by ID/NAME in the global scope.
    Use W3C standard document.getElementById() instead.

> "foo" in window
    true

O que aconteceu? inicialmente não existe a propriedade window.foo. Mas após a primeira chamada, seja diretamente ou pela variável global, a propriedade é criada.

Conclusão

Existe uma padronização do HTML5 na qual os ID’s dos elementos se tornam propriedades de window, por isso que essa facilidade é uma novidade para nós. Cabe agora, aos maníacos de boas práticas, nos dizer qual seria a maneira mais correta de utilizar essa feature.

Esse post é uma versão brasileira de 2ality – DOM: elemtn IDs are global variables.

Microsoft, Google e demais empresas apoiam o HTML5

No início de 2008 o W3C – consórcio de empresas de tecnologia para levar a Web ao seu máximo potencial – anunciou a primeira especificação do HTML5 (Ouça nosso Podcast – HTML5). O HTML (Hypertext Markup Language) ainda na versão 4, continua evoluindo. Após cinco anos de trabalho, esta ainda é apenas uma versão de testes do HTML5, enquanto a versão final está prometida para 2012. Foram feitas grandes alterações, que incluem:

  • novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais e tridimensionais,
  • controle embutido de conteúdo multimídia,
  • aprimoramento do uso off-line,
  • melhoria na depuração de erros

Uma das promessas do HTML5 é a não-necessidade de se usar plug-ins para aplicações multimídia (Flash, Java, Silverlight, dentre outros). A primeira coisa a se pensar, é que o HTML5 será o “Flash Killer”, apesar de que o presidente da Adobe jura de pé junto que o HTML5 não abalará o mercado do flash.

Em 2010 o HTML5 cresceu assutadoramente, contando com o apoio dos principais navegadores web e das Grandes empresas, como Microsoft, Google e Apple. Por falar em Apple, O Ipad, grande gadget do ano lançado pela empresa, não roda flash, como uma forma de apelo ao desenvolvimento urgentemente necessário do HTML5.

Está acontecendo uma revolução no modo como a internet é. Esta evolução acontece desde sua criação, mas nunca esteve tão forte, com o HTML5 e a Web Semântica em desenvolvimento, os olhos de todos os desenvolvedores do mundo se voltam para a web, que deixa de ser vista como um conjunto de páginas, e trata-se agora de um web software.

Como o Bill Gates quebrou a cara não apostando na internet quando ela começou, agora a Microsoft quer recuperar o prejuízo, anunciando então o HTML5 Labs, um site de testes para os programadores experimentarem com as especificações iniciais das tecnologias emergentes com base no HTML5. Gerido pelo Interoperability Strategy Group da Microsoft, os HTML5 Labs serão onde a Microsoft irá testar protótipos com especificações das normas de organismos de normalização como o World Wide Web Consortium, que apoia o HTML5.

A microsoft lança também faz demonstrações usando as capacidades do HTML5 para testar velocidade de navegadores compatíveis e também do PC. Como estamos no natal, um dos aplicativos é: Santa’s Workshop, onde a velocidade do navegador de seu PC determina quantos elfos ajudam o Papai Noel, e quão rápido eles trabalham. Outro aplicativo é o HTML5 Blizzard, os usuários assistem flocos de neve caindo. “Quanto mais flocos de neve você vê, mais rápido são seu navegador e computador. Veja mais em: Internet Explore Test Drive.



O Google também não ficou para traz. O site divulgado é HTML5 Rocks, que traz exemplos e tutoriais diversos. Para quem quer começar no HTML 5 uma boa sugestão do site é o livro virtual Dive Into HTML 5, que começa contando a história de alguns elementos do HTML e a forma que eles adotam na versão 5. Uma apresentação interativa mostra exemplos rápidos dos novos recursos. Na verdade ao ouvir “HTML 5” pensa-se apenas em “HTML”. Mas não é bem assim, JavaScript e CSS 3 estão bem unidos no HTML 5.

E também tem aplicativos. O Google Labs lançou na quinta-feira o Google Body Browser, espécie de Google Earth do corpo humano baseado na tecnologia WebGL e HTML5. No experimento, o navegante pode explorar um modelo tridimensional do corpo humano e controlar a transparência de diversas camadas – pele, músculos, ossos, sistema digestivo, circulatório ou nervoso – com direito a zooms e a destacar determinado órgão. Tudo usando apenas as tecnologiasHTML5 e WebGL, plataforma aberta multi plataforma ainda em testes, desenhada para oferecer suporte 3D à web e que, portanto, dispensa a instalação de plugins ou outros recursos para funcionar.


Enfim, se você quer se destacar na web, PARE TUDO e comece a aprender HTML5. #fikdik