Opa.

Seguindo uma postagem do Julio Greff sobre o velho problema (bug) do IE ao trabalhar com innerHTML e a tag select, vou mostrar aqui minha solução que eu já tinha feito na época da minha função simples pra ajax.

Edit 28/08/2007: Segunda versão corrigindo bugs pra ativar o selected, classes e styles no IE também

Pequena explicação do problema: às vezes, é necessário agente preencher uma tag select com options através de innerHTML. Pra variar, o IE dá problema com isso. Tá certo que innerHTML não é uma propriedade DOM padrão, mas se o Internet Explorer decidiu implementar ela, deveria, pelo menos, ter implementado direito hehe. Bah, deixa de reclamação mico.

Exemplo:

document.getElementById("meu_select").innerHTML = "<option value='1'>não</option> <option value='2'>funfa</option>"; 

O script acima deveria colocar dentro da select chamada "meu_select" duas opções ("não" e "funfa"). Só que isso não funfa no IE. O jeito certo então é adicionar através de appendChild!!!

Mas, calma, não se desespere, não será necessário você ficar quebrando a cabeça com infinitos appendChild. O Mico resolveu o problema pra você. Basta adicionar minha função abaixo no seu script e chamá-la passando 2 parâmetros: o ID do select que você quer preencher e o innerHTML que você quer colocar dentro deste select.

A função vai cuidar de tudo, como se você estivesse setando através da propriedade innerHTML mesmo, inclusive os atributos do option.

Exemplo de uso (baseado no exemplo anterior que não funfava):

var inner = "<option value='1'>Agora</option> <option value='2'>funfa</option>"; 

select_innerHTML(document.getElementById("meu_select"),inner);

A função mágica que faz isso. Adicione copie no seu script:

function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - corrige o bug do InnerHTML em selects no IE
* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Versão: 2.1 - 04/09/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* @objeto(tipo HTMLobject): o select a ser alterado
* @innerHTML(tipo string): o novo valor do innerHTML
*******/
    objeto.innerHTML = ""
    var selTemp = document.createElement("micoxselect")
    var opt;
    selTemp.id="micoxselect1"
    document.body.appendChild(selTemp)
    selTemp = document.getElementById("micoxselect1")
    selTemp.style.display="none"
    if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
        innerHTML = "<option>" + innerHTML + "</option>"
    }
    innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span")
    selTemp.innerHTML = innerHTML
      
    
    for(var i=0;i<selTemp.childNodes.length;i++){
  var spantemp = selTemp.childNodes[i];
  
        if(spantemp.tagName){     
            opt = document.createElement("OPTION")
    
   if(document.all){ //IE
    objeto.add(opt)
   }else{
    objeto.appendChild(opt)
   }       
    
   //getting attributes
   for(var j=0; j<spantemp.attributes.length ; j++){
    var attrName = spantemp.attributes[j].nodeName;
    var attrVal = spantemp.attributes[j].nodeValue;
    if(attrVal){
     try{
      opt.setAttribute(attrName,attrVal);
      opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
     }catch(e){}
    }
   }
   //getting styles
   if(spantemp.style){
    for(var y in spantemp.style){
     try{opt.style[y] = spantemp.style[y];}catch(e){}
    }
   }
   //value and text
   opt.value = spantemp.getAttribute("value")
   opt.text = spantemp.innerHTML
   //IE
   opt.selected = spantemp.getAttribute('selected');
   opt.className = spantemp.className;
  } 
 }    
 document.body.removeChild(selTemp)
 selTemp = null
}

Bugs? Grita nos comments ae. Dúvidas? Joga no fórum e me avisa.
Não se esqueça de conferir também a solução do Julio para este problema.

Marcadores: DOM, javascript

Oooaa.

Bom, já terminei de responder todos os comentários/emails/perguntas feitas na minha ausência (acho, se eu tiver esquecido alguma comentem ae), então navegando no meu netvibes eu descobri qual será meu primeiro post pós-férias: fui tagueado pelo brodi Bruno Dulcetti.

Achei que não ia entrar na brincadeira, mas acabei sendo convidado a aumentar o monstro criado pelo Bruno Alves.

Fiquei honrado em ter sido citado ao lado de power blogueiros que eu admiro muito e agora vou fazer parte da árvore também hehe.

Bom, chega de papo. Tão aí meus objetivos pra 2007. Tomara que eu consiga:

• Desenvolver meus diversos outros projetos para a internet
• Ter uma festa de casório tranquila (sim, sim, to indo... hehe)
• Transformar o iEvolution no fórum de desenvolvimento Web mais forte da net.
• Aprender a organizar melhor meu tempo (o principal).
• Pro blog (me permitam detalhar):
  • Implantar o novo layout
  • Versão em inglês
  • Inúmeras postagens que eu tenho na cabeça
  • Inúmeros códigos pra postar

Agora vou indicar uma galera muito boa que eu leio e recomendo:

• Julio Greff
• Sem Janelas
• Viche - NGHorta
• O fim da várzea Vinícius Krolow
• Raphamaster

Tá um pouco atrazado (já devia ser resoluções pro carnaval hehe) mas bora lá.

Marcadores: bate-papo, meme, objetivos2007, resolucoes2007

Ae pessoal,

Após umas regenerativas férias e após conseguir um modem emprestado da LGCom (sim, emprestado por tempo indeterminado), o mico tá voltando aos poucos ao trabalho.

Tá cheio de email pra ler, feeds pra ler, mensagens em diversos fóruns pra ler, comentários aqui no blog esperando resposta, dúvidas, etc.

Peço paciência de quem me mandou algum email ou mensagem no blog. Tô lendo aos poucos.

Também gostaria de informar que já fiz o novo visual do blog, agora é só implantar no blogger. Até que ficou bonitim.

Já já eu volto com tudo nos tutoriais. Calma ae povo. :)

Marcadores: bate-papo

Marcadores: bate-papo

Opa pessoal, como prometido vou postar finalmente meu Trabalho de Conclusão de Curso (TCC) de Tecnologia em Redes de Comunicação do CEFET-GO sobre Padrões Web.

Editado 18/10/07: Corrigindo o link.

Vale lembrar que já re-aprendi melhor muitos dos conceitos escritos no trabalho. Ênfase na parte do Histórico da Web e do HTML que foi uma das partes mais difíceis de fazer e organizar (eu já havia apresentado uma prévia deste histórico em um dos meus primeiros posts aqui no El Micox).

De forma a facilitar o entendimento, tentei dividir/basear a metodologia Web Standards através de três pilares principais:

• Utilização dos padrões definidos pela W3C;
• Acessibilidade e universalidade;
• Separação entre conteúdo (XHTML), apresentação visual (CSS) e comportamento (JavaScript/ECMAScript);

O Resumo / Abstract do trabalho foi:

O trabalho apresenta a metodologia Web Standards para o desenvolvimento de páginas Web. Tal metodologia baseia-se no uso correto dos padrões definidos pela W3C (World Wide Web Consortium). Esta forma de desenvolvimento se contrapõe a um método de desenvolvimento bastante comum atualmente, que utiliza tabelas para montar a estrutura da página. Na metodologia dos padrões Web os elementos da página são utilizados com o propósito definido pela W3C. É prezada usabilidade e a separação entre elementos de conteúdo, visuais e de comportamento. Como, neste modelo de desenvolvimento, as tabelas não são utilizadas para montar a estrutura da página, mas apenas em dados tabulares, criou-se o termo Tableless, em contrapartida à técnica que utiliza tabelas.

O trabalho está organizado em 8 capítulos:

1. No cap. 1 é feita a introdução do trabalho e uma breve descrição de cada capítulo.
2. No segundo capítulo apresentamos alguns conceitos sobre a Web, bem como o seu histórico. E, por fim, as principais diferenças entre o HTML e o XHTML.
3. No terceiro capítulo descrevemos o método de desenvolvimento que utiliza tabelas na montagem da estrutura da página e seus principais problemas.
4. No quarto capítulo apresentamos a solução para estes problemas utilizando a metolodogia Web Standards, seus princípios básicos e seus benefícios.
5. No quinto capítulo exemplificamos o desenvolvimento de uma página baseada nos padrões Web.
6. No sexto capítulo apresentamos uma comparação entre o método de desenvolvimento com tabelas e o método baseado na metodologia Tableless.
7. No sétimo capítulo descrevemos as principais dificuldades para uma maior adoção dos padrões Web.
8. No oitavo capítulo apresentamos as conclusões e as sugestões para trabalhos futuros.

A apresentação do trabalho vocês já conheceram, agora o link para o texto em PDF é este aqui:

Web Standards - Os Benefícios do desenvolvimento Web baseado na metodologia Tableless.

Até que enfim terminei essa guerra do TCC. Ufs carambolas.

Vocês já sabem né? Críticas, dúvidas, sugestões é só comentar que eu sempre vejo e respondo. Té.

Marcadores: acessibilidade, bate-papo, história da web, tcc, webstandards

Movimento a favor da pontuação negativa no Rec6, já!

Motivos - não - faltam.

Espero que eu não seja o único que queira este recurso. Então votem aí!!

//Aos meus visitantes que não querem nem saber do Rec6, mas sim dos meus códigos ajax, javascript, WS e dicas, me desculpem. :-) Logo logo tô de volta.

Marcadores: bookmarks

Sim, bugs mesmo, e não falta de suporte aos padrões (isso todo mundo já sabe).

Uma listinha:

• Não renderiza z-index alterado por li:hover
• Itálicos com position:absolute
• Problema com botão
• Problemas com lista com position:absolute
• Listinha do google

O mais legal é que a página de feedback do IE tá fora do ar. Eles realmente se importam com os desenvolvedores.

Bom, eu não baixei o Internet Explorer 7 por pura preguiça e falta de necessidade. Também tem a questão que eu não quero perder meu IE6, mas não tô afim de fazer aquelas mágicas complicadas pra usar o IE6 e o IE7 ao mesmo tempo (se alguém souber uma mágica facim e que funcione, me passa ae :-) ).

Quem achava que o IE7 viria nos salvar do IE6 deve estar muito triste. Agora, em vez de ter que se preocupar só com um (1) navegador ruim, temos que nos preocupar com dois (adiciona 1 à conta aí quem testa pro IE5 também).

Só nos resta torcer pro IE7 ser pouco baixado. Assim teremos que fazer menos testes e teremos menos preocupações.

Força para o mundo não-IE! Mesmo que o povo do FireFox seja só 14%, estes 14% fazem muito mais barulho na web pois são hard-users de tecnologia e internet, como disse o Elcio do Tableless.

Marcadores: browsers