Opa, tava quase esquecendo de postar meu BlogDay hehe (ainda bem que a marcita me lembrou no meu post anterior).
Não sabe o que é isso? Bom, eu também não sabia até ontem, quando meu netvibes viu o assunto no blog do Maujor.

É um dia de comemoração. E eu não tive problemas em selecionar sobre quem eu indicaria. Aliás, tive sim: seriam tantos heheh. Mas vou me limitar aos 5 propostos.

Não há muito como eu indicar blogs de outras áreas, pois frequento pouco e assino poucos. Também não postarei blogs já famosos né? hehe

Minha lista:

• Bit Frito dos meus brodis de fóruns Gio e Reges ("nao_sei"). Bobeiras humorísticas em geral, muito bom pra dar um tempo nos conteúdos técnicos e relaxar a cabeça.
• Mah da minha também amiga de fórum Marcinha. Design e outros assuntos mais tranquilos.
• Extensões para Firefox. Esteja por dentro das novas e melhores extensões para o melhor navegador.
• Fator W assuntos de desenvolvimento Web, mais voltados à organização, prática e gerenciamento. Ótimo para quem é freelancer mas só sabe cuspir códigos (como eu) e fica perdido em questões de contrado, gerenciamento, etc.
• RaphaMasters Soluções práticas pra desenvolvimento, coisas de linux e "NETagem" em geral.

Estas foram minhas 5 indicações, faça as suas também. Lembrando que eu assino incontáveis outros blogs interessantes (como estes indicados aí ao lado no menu).

Marcadores: bate-papo

Olá povo.

Tive meio sem postar, meio sem tempo, mas tô de volta.

Hoje vou postar algo que considero bastante útil: Uma função que pega todos os elementos que possuam determinada classe e joga estes elementos em um array.

Conhecem a função getElementsByTagName ? Pois é. O funcionamento é similar.

Apresento abaixo a getElementsByClassName. Versão em JavaScript:

<edit date="31/08/2006">Editado. Coloquei com expressões regulares pra poder encontrar também elementos que tenham mais de uma classe. Ainda não fiz isto na versão em PHP, só nesta em JavaScript.</edit>

function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
                de $node que possuam a classe indicada em $className
   Versão: 1.0 - 30/08/2006
   Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
   Site:   http://elmicox.blogspot.com 
   Não retire estas informações pra não infringir direitos autorais!
*/
var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
$retorno = new Array();
for (var $i=0;$i<$node.childNodes.length;$i++){
            $atual = $node.childNodes[$i];
            if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
                        $classeAtual = $atual.className;                               
                        if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
                                   //testando se tem a classe
                                   $retorno[$retorno.length] = $atual;
                        }
                        if($atual.childNodes.length>0){
                                   $novos = DOMgetElementsByClassName($atual,$className);
                                   if($novos.length>0){
                                               $retorno = $retorno.concat($novos);
                                   }
                        }
            }
}
return $retorno;
}

Exemplos de uso:
Lembram o clássico script pra buscar determinada classe?

destaques = document.getElementsByTagName("div");
for(var i=0; i<destaques.length ; i++ ){
            if(destaques[i].className == "destaques"){
                        //instruções para quem tiver a classe destaque.
            }
}

Que tal eliminar um monte de if e substituir por:

destaques = DOMgetElementsByClassName(document.body,"destaques");

E você ainda terá a vantagem de que a função procurará a classe em TODOS os elementos e não apenas em uma tag específica como uma div no exemplo anterior.

Desenvolvi esta idéia enquanto estava fazendo um script em PHP, ou seja, originalmente esta função foi feita para as DOM Functions do PHP.
Abaixo, a versão em PHP pra quem se interessar:

function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
                de $node que possuam a classe indicada em $className
   Versão: 1.0 - 30/08/2006
   Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
   Site:   http://elmicox.blogspot.com 
   Não retire estas informações pra não infringir direitos autorais!
*/
$retorno = array();
for ($i=0;$i<$node->childNodes->length;$i++){
            $atual = $node->childNodes->item($i);
            if($atual->nodeType==XML_ELEMENT_NODE){
                        $classeAtual = $atual->getAttribute("class");
                        if($classeAtual==$className){
                                   array_push($retorno,$atual);
                        }
                        if($atual->childNodes->length>0){
                                   $novos = DOMgetElementsByClassName($atual,$className);
                                   if(sizeof($novos)>0){
                                               $retorno = array_merge($retorno,$novos);
                                   }
                        }
            }
}
return $retorno;
}

Palavras chave: get elements by class name, pega retorna elementos pelo nome da classe, dom, xml.
Testado em: Op 8.5; FF 1.5; IE 6.0.

Postado também na seção de tutoriais JavaScript do fórum iEvolution.

Marcadores: DOM, javascript

Olá povo.

Nós entusiastas das WebStandards sempre pregamos a acessilidade e usabilidade como uma de nossas bandeiras, mas muitas vezes, ao desenvolvermos nosso site, só lembramos desta acessibilidade apenas no quesito "ser visualizado em diversos navegadores" e nos esqueçemos dos outros dispositivos.

São poucos os que verificam a acessibilidade e usabilidade de seu site lembrando de outros quesitos também como:

1. Navegadores sem suporte a CSS
2. Navegadores sem suporte a imagens
3. Navegadores sem suporte a Javascript
4. Navegadores de dispositivos móveis
5. Navegadores de texto
6. Navegador com letras grandes ativadas
7. Visualização de Impressão

É claro que existem outras verificações que devem ser feitas como a da área útil da tela e contraste de cores, mas nesta postagem, vou focar apenas nos 6 itens acima e mostrar maneiras de testá-los.
O importante não é manter o super-ultra-moderno visual que você fez para seu site, mas sim manter o conteúdo, a navegação e a organização. Para não ter que ficar repetindo estes 3 termos toda hora, vou chamá-los de 3 básicos de um site.

Teste sem suporte a CSS

Este é o teste mais básico.
Para não ter que ficar baixando navegadores antigos só pra testar isto, você pode usar os recursos do seu browser para desabilitar o CSS.
Todo navegador decente possui um menu "Exibir > Estilos > Nenhum estilo" ou algo similar.
Assim você pode desabilitar o CSS e ver se sua página mantém os 3 básicos e permitem que seus visitantes usem o site.

Teste sem suporte a imagens

Para desabilitar as imagens e ver se seu site mantém os 3 básicos da usabilidade, podemos fazer uso da WebDeveloper Toolbar (ou WDT) no Firefox ou do menu "Exibir > Imagens" no Opera.

Teste sem suporte a Javascript

Este aqui acho que é básico para todos. Todos os navegadores modernos possuem mecanismos para desabilitar a execução de Javascript através da configuração de opções. Eu pessoalmente, acho que a dobradinha Firefox/WDT saem na frente por deixarem a tarefa bem mais fácil.

Teste com navegadores de dispositivos móveis

Enquanto estiver desenvolvendo, tenha em mente que estes dispositivos possuem tela pequena (400px ou menos). Não se esqueça também que possuimos o media type handheld como "carta na manga", apesar das media types não estarem completamente habilitadas em todos os dispositivos.
Todos sabemos que o Opera Mini é um navegador que está se popularizando para estes dispositivos. Para não ter que tirar o celular do bolso, você pode usar um simulador online do Opera Mini para PCs (feito em Java).
Na fase de desenvolvimento, podemos ver uma prévia de como está nossa página através da WDT em "Miscellaneous > Small Screen Rendering".

Teste com navegadores de texto

Novamente, pra não ficar baixando navegador demais, eu prefiro utilizar o Opera pra simular a renderização em navegadores de texto. Vou em "Exibir > Estilo > Modo usuário > Emular navegador de texto". Observação:Não sei se o CSS media type "tty" deveria funcionar aqui, só sei que não funcionou.

Teste com letras grandes

Não pense que isto não tem importância. Muitas e muitas pessoas usam sim a configuração para aumentar o tamanho de letras e facilitar a leitura, porém, nós desenvolvedores sempre nos esquecemos disso e nosso layout e os 3 básicos vão por água abaixo. Enfim, trabalhar com letras grandes é algo que pode te trazer muitas dores de cabeça se seu site não estiver bem planejado.
Pra efetuar o teste é fácil: todos os navegadores possuem um menu "Exibir > Tamanho do texto" ou algo similar.

Visualização de impressão

Este também é algo muito importante e agente sempre esquece.
Após desenvolver seu site, não custa nada dar uma passada no visualizador de impressão pra ver se está tudo ok.
Não se esqueça que, pra nos ajudar, há o media type "print" nos navegadores modernos.

Ao desenvolver suas declarações CSS para o media "print", seja bonzinho com seu usuário e com o cartucho de tinta dele: retire imagens desnecessárias, cores desnecessárias, negritos desnecessários, layouts desnecessários e mantenha o foco no conteúdo daquela página apenas, nada de ficar exibindo menus, cabeçalhos e rodapés em excesso, afinal, não há como navegar via folha de papel não é?

Enfim, aqui você acabou seu pequeno teste de acessibilidade e usabilidade. Espero que seu site não tenha dado muitos problemas :) . Lembrando para os que ainda não se converteram, tudo fica mais fácil quando você é adepto dos WebStandards (duvida? faça estes testes com minhas 2 conversões). Não se esqueça que o importante não é seu visual mas sim os 3 básicos citados anteriormente: conteúdo, navegação e organização.

Outras ferramentas úteis pra avaliar sua acessibilidade são: o validador de acessibilidade DaSilva (pra mim é lei) e a Mozilla Accessibility Extension (que eu ainda não testei - testem aí e comentem hehehe ). Editado 04/01/07: Tem também o Examinator que o Henrique indicou nos comments.

Ah, não se esqueçam de assinar a lista de presença quem ainda não assinou.
Este primata se despede aqui. Até o próximo episódio. :)

// Dúvidas? Este artigo também foi postado no fórum iEvolution. Joque suas dúvidas lá!
// Se eu falei alguma bobeira, comente aí :) !!

Marcadores: acessibilidade, webstandards

Olá pessoal

Tive meio sem postar estes dias, mas o estoque de idéias tá cheio, tô cheio de coisas pra postar aqui, o que está me enrolando é a questão do tempo.

Como serão coisas bizarras que postarei aqui (bizarras=muito boas) estou querendo fazer um mapeamento dos meus atuais visitantes/assinantes antes de postar estas coisas que poderão trazer vários outros usuários.

Entre as postagens que estão programadas posso citar:

1. Nova técnica para igualar altura de colunas de divs via CSS - by Micox
2. Série contendo os problemas mais comuns no desenvolvimento com AJAX e como solucionar
3. Passo a passo de 2 conversões de sites sujos pra tableless/web standards

Mâaas, como já falei, antes de começar a postar estas coisas, gostaria de saber quem são meus atuais assinantes.

O feedburner indicou um salto de 20 para 30 assinantes na semana passada. Esta semana já está voltando ao normal de 22, 23 assinantes. Gostaria de conhecer quem são estes fiéis, visto que fiquei sabendo que gente que eu nem imaginava, visitava este blog.

Por favor, assinantes, comentem aí abaixo pra eu conhecer voces. Valeu :) !!!

//Abaixo, deixo um resumo de minhas visitas by Google Analytics no período de 20 de julho a 20 de agosto de 2006:

• Cobertura geral do site:
  
• Conteúdos mais visitados
• Origem dos visitantes
• País dos visitantes (??)
• Navegadores e plataformas
• Resoluções de tela

Mas não esqueçam de comentar aí assinantes !!!

Marcadores: bate-papo

Opa, Bom dia ae povo.

Uma de minhas buscas terminou. Enfim encontrei um depurador Javascript: o FireBug.
Ele é uma extensão para Firefox muito boa. Não tive tempo de testar todas as suas funcionalidades em um script complicado, mas a primeira vista ele me agradou. Permite, entre outras coisas:

• Acompanhar o script passo a passo como voce faz em ferramentas RAD como VB6 e Delphi
• Navegar pelo DOM da página
• Pausar o processamento
• Realizar ações de "Step Over", "Step Into" e "Step Back" (executa o processamento linha a linha)
• Definir BreakPoints (para parar o processamento naquela linha.) (Não consegui fazer funcionar. Resetei a máquina e funcionou)
• Acompanhar requisições especiais como o XMLHttpRequest
• Roda na própria janela/aba da página
• Monitorar eventos
• Monitora erros

Ver telas / previews do FireBug aqui.

Enfim, apesar de alguns bugs, estou satisfeito. É bem melhor que usar o complicado Venkman na minha opinião.
Testem aí e coloquem suas opiniões.

//Extensão descoberta em artigo de Er Galvão.

Marcadores: browsers, firefox, javascript

Bom dia pessoal,
Tô postando demais né? hehe

Seguinte, já tem um tempo que eu estou acompanhando a série de posts Meu último freela, do blog fatorW do Walmar Andrade.
Como o próprio autor definiu, é como um "reality show" do desenvolvimento de um site, deeeesde os primórdios nas reuniões com o cliente, até o desenvolvimento final.
Tá muito bom, aconselho todos a acompanharem. Não percam a oportunidade, o cara é um profissional e eu tô aprendendo muito.

Uma das coisas que eu aprendi que acho interessante postar aqui é com relação a um problema que nós desenvolvedores "nem tão profissionais" temos ao planejar um site. O Walmar me apresentou um esquema que eu não conhecia, o vocabulário visual criado por Jesse James Garret. É como um diagrama, fluxograma de suas páginas Web.
O vocabulário visual feito pelo Walmar especificamente para o site do Café Colombo, pode ser visto aqui. Muito bom, vou usar a partir de agora em meu próximo projeto.

Aproveitando o embalo, gostaria que todos dessem uma olhada em 2 conversões de site que eu fiz para demonstrar melhor as potencialidades das Web Standards para o meu TCC:

1. UME atual e UME convertida
2. CEFET-GO atual e CEFET-GO convertida.

Nã se assustem com o marquee que vocês vêem na primeira conversão. O micox não ficou doido hehe. Aquilo é obra de um javascript desenvolvido por mim. Uma espécie de pseudo-marquee 1.0. Apesar de eu detestar este tipo de recurso, tive de colocar para chegar ao máximo de proximidade com a página não-tableless

Foram respeitadas as 3 premissas do desenvolvimento baseado nos padrões web. Aliás, meu TCC está se baseando nestas 3 premissas que são a alma do desenvolvimento tableless / web standards / padrões web na minha humilde opinião:

1. Respeito aos padrões;
2. Acessibilidade e universalidade;
3. Separação entre conteúdo, apresentação visual e comportamento.

A partir delas é que se derivam todos os demais requisitos e os fantásticos benefícios do desenvolvimento baseado nos padrões.
Passei as duas páginas pelos validadores de HTML e CSS da W3C e pelo validador de acessibilidade DaSilva.

Testei também em divesas mídias/browsers:

1. FF1.5, IE6, Opera 8,5 (OP)
2. Opera modo simulador de navegador textual
3. Simulador do Opera mini (handheld)
4. Visualização de impressão

Futuramente, assim que meu TCC estiver pronto. Posto um passo a passo destas conversões.

Gostaria de opiniões, observações e comentários a respeito destas conversões.
Té a próxima postagem (que não demorará. heheh)...

Marcadores: bate-papo, freela

Pois é pessoal, hoje saiu no site do WASP a notícia do lançamento pré Alpha (?? isso mesmo pré alpha) do navegador Swift, um "Safari for Windows".

Swift is a new open source browser based on Apple’s WebCore & JavaScriptCore rendering and JavaScript engines.

Na hora, me enchi de esperança de poder testar meus sites direto na engine Safari da Apple, mesmo sem ter um MAC (Apple Macintosh) disponível. Vamos em frente ver o que dá.

A engine usada pra desenvolver o bixo foi a WebKit: A Apple Webkit rendering engine.

Apesar dos avisos de que o software tá muito no zero ("it’s marked as 1.0pre alpha, and it is very much an alpha: very rough-looking UI, no scrollwheel support, pathetic form controls and I’ve had reports from colleagues that some folks can’t even get it to install"), é lógico que eu não contive a curiosidade e fui testar o bixo.

Infelizmente, eu fui um dos que tive problemas já logo na instalação. O meu Windows XP não conseguiu registrar o Webkit.dll. Tentei registrar na mão (linha de comando) usando o regsvr32, mesmo assim não obtive êxito. Tristeza.

Bom, pra quem ainda não conheçe, o jeito é continuar usando o Browsrcamp pra visualizar meus sites no Safari 2.0.4. É a vida. hehe. Vamos aguardar o Swift ficar melhor.

Testem aí e me digam se conseguiram. Se eu tiver êxito em minhas tentativas futuras (lá em casa) postarei aqui.
Té mais...

Link original da notícia no WASP: Safari for Windows

Marcadores: bate-papo, browsers

Opa pessoal,

Hoje, como é um post de papo, vou economizar tempo (meu e de vocês) e falar sobre 2 assuntos na mesma postagem: rádio online Pandora e o fim da publicidade principal do Adsense aqui no meu blog.

Pandora - a melhor rádio online que eu já ví.

Bom, uns tempos atrás (janeiro de 2000), um grupo de músicos teve a idéia de criar um tipo de análise para as músicas. Eles queriam capturar a essência da música (mó viagem hehe). Disso nasceu o Music Genome Project. Daí eles criaram o Pandora.

Traduzido by HorphuS:

Pandora é resultado do projeto The Music Genome Project, onde um grupo de músicos e técnicos resolveram, em janeiro de 2000, criar uma ferramenta de análise musical. Juntos eles capturaram a essência da música em seu nível mais fundamental - da melodia, harmonia e ritmo; passando pela instrumentação, orquestração, arranjo, letra e harmonia vocal. Por fim, eles montaram, literalmente, centenas de atributos musicais, ou "gens", em um "Genoma Musical". Desta forma, capturaram a identidade musical única e mágica de cada composição. Passados seis anos e ouvidos cuidadosamente mais de 10.000 diferentes artistas - do mais popular ao mais obscuro - Surge, como resultado deste trabalho, o Pandora. Com ele é possível você selecionar um artista e deixar essa "caixa mágica" selecionar, usando seus algoritmos de análise musical, artistas cujas musicas possuam a mesma "identidade genética sonora". O resultado é surpreendente! Enquanto escrevo estou ouvindo artistas que nunca ouvi falar, na sequência da seleção de meu artista predileto: Eric Clapton. É como uma estação de rádio que só toca músicas que você adora ! Resumidamente, Pandora é um sofisticado serviço "descobridor" de músicas, desenhado par ajudá-lo a descobrir músicas e artistas que você gosta!

Em outras palavras:

Que tal se você pudesse digitar o nome de sua banda favorita e um programa dizer o nome de outras bandas no mesmo estilo? E agora: Que tal se você digitasse o nome de sua banda favorita e um programa encontrasse músicas não apenas com o mesmo estilo, mas com o mesmo GENOMA, tocando as músicas de acordo com o seu gosto musical? - Genoma? Como assim?

Agora minha opinião como user: Nunca curti rádio online, mas tiro o chapéu pro Pandora e já sou usuário registrado! Usem, compensa! É impressionante.

Serviço descoberto através da fantástica indicação do usuário HorphuS do novo fórum (que puxação de saco da minha parte heim. heheh Mas foi o cara que insistiu pra eu blogar sobre o Pandora e ainda fez uma publicidade do meu blog heheh, valeu mesmo HorphuS)

Fim do Google Adsense no meu blog

Vocês devem ter percebido também que eu retirei a chatíssima publicidade do Google Adsense principal que ficava no final dos meus posts.

Bom, motivos não faltaram:

• Ninguém clica nessas porqueira mesmo.
• Acho que publicidade só funciona enquanto o pessoal ainda não acostumou os olhos, depois já era. Ningúem nem passa mais os olhos sobre os textos do Google Adsense. Já filtra automático. Eu nem vejo mais quando entro em algum site, vocês vêem? Se bem que o Google estimula ao webmaster ficar mudando o banner de lugar, mudando de cor, etc. EEEEeeeu é que não vou fazer essa sacanagem com meus visitantes e com meu blog, papagaiada.
• Estava enfeiando meu blog.
• Cansei de mendigar cliques. Em quase 6 meses de blog, só tive uns poucos cliques nesse negócio que totalizaram apenas (pirem) 3 dólares! Bom, como eu não pago hospedagem e este blog é apenas um passatempo, não dependo disso pra viver.
• O espaço poderia ser aproveitado de maneira mais eficiente (vejam lá agora que bonitimm... :) ) e também pra divulgar coisas do meu interesse (no momento o novo fórum iEvolution - sim, eu sei que já estão de saco cheio de verem eu falar disso)

Deixei ainda alguns outros serviços como a busca no site, o incentivo ao Firefox e os links relacionados por achar que isto ainda pode ser útil aos leitores.

É isso aí, agente vê pouquíssimos textos falando mal do Google Adsense e mostrando outras alternativas (este também), mas pense bem: será que seu site/blog precisa disso? Será que tá dando resultado. Se ele for pouco visitado como o meu blog, com certeza, o Adsense não serve pra nada. Poupem os píxels dos seus leitores. Adiós pra ele.

Editado: Iniciei uma discussão aqui, vamo ver o que vira.

Adiós pra vocês. Té o próximo post.

Marcadores: bate-papo, google

Veja a primeira parte deste tutorial de menu semi-transparente com bordas curvas aqui.

2. A Transparência

Agora que já preparamos as bordas curvas do menu, é hora de aplicar o CSS da transparência.
Antes, caso tenha esquecido, veja novamente uma prévia do menu:

Os principais problemas na hora de aplicar transparencias e alpha são as diferenças entre os navegadores.

O Internet Explorer 6.0 entende o filter: alpha(Opacity=60);. Já o Firefox (e imagino que os outros da engine Gecko) entende o opacity: .6;. Há também o -khtml-opacity: .6; usado pela engine KHTML (Safari e Konqueror) (Não abri meu linux pra testar não. Quem puder testar e dar seu depoimento... :) ) .

Como o próprio nome diz, ao se colocar o valor 100 ao filter alpha opacity no IE o elemento não fica transparente. Quanto menor o valor do opacity, mais transparente o elemento.
Da mesma forma, se colocarmos o valor 1 no opacity no Firefox, o elemento não ficará transparente.

Às vezes, o Firefox transmite a transparência aos filhos. Ainda não consegui identificar quando isso acontece. Para que esta característica não nos atrapalhe, escolheremos uma cor de letra que seja parecida com o fundo e contraste bastante com o background-color do LI, reduzindo visualmente esta possível transparência que pode vir a ser herdada.

Como a cor da imagem que escolhemos no post anterior para fazer a borda é branca, a cor de fundo do restante do menu também deve ser branca para que não haja diferenças entre elas.

Para a cor da letra, escolhemos #3C6B97 por ser uma cor que se parece com a cor de fundo e contrasta bem com o branco do background.

Aplicando

Vamos recuperar os estilos aplicados no #nav no post anterior e vamos adicionar estas novas características.

.curva-base {
  height:10px;
  overflow:hidden;
  background-image:url(curva-base.gif);
  opacity: .6; filter: alpha(Opacity=60); -khtml-opacity: .6;
}
#nav {
  width:190px;
  background: url(curva-topo.gif) top no-repeat;
  opacity: .6; filter: alpha(Opacity=60); -khtml-opacity: .6;
  padding-top:10px;
}
#nav li {
  background-color:#FFFFFF;
  border-bottom:1px solid #000000;
}

O XHTML não muda em nada:

<ul id="nav" >
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>
<div class="curva-base"></div>

Seu menu agora deve ter ficado mais ou menos assim:

Pronto. Agora é só estilizar as demais características que desejar.

Este tutorial foi testado no Firefox 1.5; Internet Explorer 6.0 e Opera 8.54. Sendo que neste último, a transparência não funcionou comigo, apesar de com a marcinha ter funcionado.
Quem puder realizar outros testes em outros navegadores e colocar seu depoimento aqui é bem vindo.

Bom, é isso aí. Té mais povo.

Marcadores: menus, webstandards