Archive for 'firefox'
Firefox como aliado ao desenvolvedor web - código fonte
January 19th, 2007. Published under firefox, mozilla. No Comments.
Particularmente sou um viciado em olhar códigos fonte de um site. Não consigo me controlar, ainda mais quando o site está devidamente dentro dos padrões da web.
De qualquer forma - por vício ou não - todo desenvolvedor vive atrelado a códigos fonte, mesmo quando precisa ir dormir para descansar, uma vez que algo que precisa ser corrigido e melhorado.
No Firefox há um visualizador de código fonte nativo acessado através do menu View > Page Source (Ctrl + U), o qual é aberto em uma nova janela - dando ao desenvolvedor uma maior visibilidade do código em si - e com o recurso de colorir as tags HTML. Portanto é agradável visualizar o código fonte no Firefox, ou não? Se você acha que não, talvez você queria Alterar o visualizador de código fonte do Firefox.
O Firefox além de destacar a sintaxe dos códigos e colorí-lo, permite que você analise somente uma parte do código fonte desejado. Por exemplo, selecione através da página uma parte dos elementos nela exibidos; posteriormente clique com o botão direito do mouse e selecione a opção View Selection Source. O que aconteceu? Exatamente, foi exibido no código fonte somente o código HTML dos elementos que você selecionou. Isso facilita a localização de uma parte da página entre todo o código fonte.
Na minha opinião, o grande problema do visualizador de código fonte do Firefox está relacionado com o fato dele exibir apenas o código fonte que foi carregado quando você abriu a página, e não o que o código fonte realmente é - na maioria da vezes.
Deixa eu me explicar melhor, você abre uma página e exibe o código fonte; até esse momento ambos estão condizentes um com outro. Mas, se você utilize algum recurso oferecido pela página que insira/altere ou exclua algum elemento através do DOM, por exemplo. O Firefox já não exibe o código fonte com tais modificações e sim o mesmo quando a página foi carregada.
A solução para termos um código fonte sempre sincronizado com o real estado da página é a utilizar a opção View Generated Source disponível no Firefox através da extensão Web Developer. Esse recurso também é encontrado na extensão Firebug.
Alterar o visualizador de código fonte do Firefox
January 5th, 2007. Published under dreamweaver, firefox, microsoft. 15 Comments.
Você pode utilizar o Bloco de notas - Notepad, o Dreamweaver, ou qualquer outro programa para visualizar o código fonte de uma página web aberta no Firefox.
O Firefox por padrão exibe o código fonte de uma página web através de um visualizador próprio. Eu o adoro, pela sua simplicidade e pela coloração nos códigos.
O problema do visualizador de código fonte padrão do Firefox está na impossibilidade de editar e salvar o código que estamos visualizando. Então se você deseja alterar o visualizador de código fonte do Firefox por algum outra programa externo é possível.
Para realizar essa alteração é super simples, digite na barra de endereços - Address bar - do Firefox o seguinte: about:config. Após procure por: view_source.editor.external e altere o valor para true - para alterar dê dois cliques sobre a linha informada. Com isso, você está dizendo ao Firefox para abrir o código fonte da página em um programa externo.
Mas o Firefox não irá adivinhar qual o programa a ser utilizado na exibição do código fonte, então você irá informá-lo através do seguinte comando view_source.editor.path informando como valor o endereço para o programa desejado.
Por exemplo, para usar o Notepad informe o seguinte valor: C:\Windows\NOTEPAD.exe ou para usar o Dreamweaver informe: C:\Arquivos de programas\Macromedia\Dreamweaver 8\Dreamweaver.exe - é claro se você tiver tal programa instalado 
Diferenças entre os browsers ao interpretar JavaScript #1
December 21st, 2006. Published under IE, crossbrowser, firefox, javascript, opera. 2 Comments.
Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui
Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:
// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
// Selecionamos o atributo rel do link em questão
var objLinkAttRel = objLink.getAttribute(’rel’);
// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
alert(’Tipo: ‘ + typeof(objLinkAttRel));
}
Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:
- Tipo: string = Internet Explorer 6
- Tipo: object = Firefox 2.0.0.1
- Tipo: object = Opera 9
Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:
...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
// Faz alguma coisa
}
Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores - como o Firefox e o Opera - você terá uma mensagem de erro - objLinkAttRel has no properties. Isto por que você está utilizando um método - substring - para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.
Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:
// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
// Selecionamos o atributo rel do link em questão
var objLinkAttRel = new String(objLink.getAttribute(’rel’)); // Observe: new String()
if ( objLinkAttRel.substring(0,3) == ‘foo’ ) {
// Faz alguma coisa
}
}
}
Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser
Lançado o Firefox 2.0.0.1
December 19th, 2006. Published under firefox. No Comments.
Foi exatamente nesta data: 14-Dec-2006 17:59 que o Firefox 2.0.0.1 chegou aos servidores de FTP Mozilla. E só fiquei sabendo hoje :< através deste post.
Sinceramente, eu já estava esperando por ele. O Firefox aqui estava se apresentando instável algumas vezes. Mas também, veja o que a versão 2.0.0.1 veio corrigir:
- Aproximadamente 183 bugs no total;
- 42 “crashers”;
- 3 estouros de memória;
- 41 regressões;
- 4 bugs relacionados a privacidade
Mais informações a respeito, confira no Fórum da MozillaZine neste post Firefox 2.0.0.1 fixlist
Faça o download do Firefox 2.0.0.1 nas versões para Win, Mac ou Linux. Escolha o idioma desejado
Firefox 2.0 e o atributo HTML Accesskey
December 5th, 2006. Published under firefox, html, web 2.0, web standards. 7 Comments.
Alguns sites que eu visito regularmente disponibiliza algumas “hotkeys” através do atributo HTML accesskey, mas, de uns dias pra cá eu notei que tal recurso não estava funcionando mais e ao observar o código fonte das páginas que oferecia tal recurso, o atributo continuava configurado da mesma forma.
Nota: Se você não não conhecia a serventia do atributo HTML accesskey: Leia.
Ao me deparar com um post no blog do Newshutch descobri o por que disso tudo. O Firefox mudou sua maneira de interpretar o accesskey.
Na versão 2.0 do Firefox, ele interpreta o atributo assim:
Alt + Shift + hotkey definida
Em versões anteriores sua interpretação era assim:
Alt + hotkey definida
E a configuração do atributo é feito assim:
... accesskey="z" ...
O porque da modificação foi para evitar conflitos entre as hotkeys do navegador e as definidas na página. Por exemplo, imagine que você tenha definido o seguinte: accesskey=”s” para acessar o campo de busca, mas Alt + S acessa o menu History (no Firefox 2.0 em inglês).
Agora venhamos, o atributo accesskey não é muito utilizado, acredito que agora menos ainda.
Outro detalhe importante que os desenvolvedores precisam saber que agora qualquer accesskey com números, tipo: accesskey=”3″ será ignorado.
Pesquisei em alguns artigos sobre o assunto, se lhe interessar:
Para os amantes do Firefox, uma boa notícia.
December 4th, 2006. Published under IE, firefox, rapidinhas. No Comments.
O Firefox subiu 0,46 ponto percentual e chegou a 13,5% de participação de mercado em novembro. Enquanto nosso “amigo” Internet Explorer recuou de 81,28% para 80,56%. Isto é, segundo uma pesquisa da NetApplications.
Veja mais detalhes em Participação do browser Firefox aumenta para 13,5% em novembro
Camada de comportamento - visão geral
November 27th, 2006. Published under firefox, javascript. No Comments.
A camada de comportamento é utilizada para acessar/modificar/criar/excluir os elementos de uma página web. Isto significa que a camada de comportamento tem em “mãos” todas as tags, atributos e conteúdos de uma página e com isso ela poderá manipulá-los como você desejar.
Como expliquei em um artigo anterior a camada de conteúdo é que a responsável em anexar a ela a camada de comportamento. Uma vez que a camada de conteúdo trabalha sem a camada de comportamento e não vice e versa.
Para você comprovar que o JavaScript pode acessar todo o conteúdo de uma página web, faça o seguinte:
Na barra de endereço (Address Bar) do seu navagador (browser) digite o seguinte:
javascript:alert(document.body.innerHTML);
Será exibido um Alert Box com todo o conteúdo da página, isto é, se dentro da tag body tiver algum conteúdo, é claro.
Isto é muito útil quando inserimos novos elementos em uma página ou quando o removemos ou o alteramos. Uma vez que a exibição do código fonte de uma página mostra-nos apenas o conteúdo que foi carregado quando acessamos a página e não o conteúdo modificado como ele está em seu estágio atual.
Então, exibir o código fonte - neste caso da tag body, apenas - da forma como apresentei acima é a solução. Mas, você concordará comigo no seguinte ponto: ver o conteúdo de uma página dentro de um Alert Box é totalmente desagradável e limitado.
Então, a melhor solução - que conheço até o momento - é a utilização da extensão Web Developer - somente para o Firefox - uma vez que com ela nós temos o seguinte recurso: View Generated Source localizado dentra da opção View Source.
Essa opção, View Generated Source, mostra o código fonte de uma página em seu estado atual, ou seja, se alguns dos elementos da página foi modificado/excluído pelo JavaScript você verá tal modificação. Algo que não acontece quando utilizamos a simples opção: View Source ou Exibir código fonte.
Até o próximo post sobre camadas de desenvolvimento web.
JSLint - Verificador de códigos JavaScript
November 22nd, 2006. Published under IE, firefox, javascript. 1 Comment.
Conheci recentemente o JSLint, um verificador de códigos JavaScript. Sua utilização é bem simples. Você cola seu código JavaScript no verificador e pede a ele para verificar o código colado, somente.
Nem sempre nosso amigo Firefox ou nosso outro “amigo” Internet Explorer fazem uma verificação 100% dos nossos códigos JavaScript, então, é bom verificar o código para evitar problemas em navegadores, nos seus sistemas, com seus clientes, e claro, evitar dor de cabeça.
Por isso, meu caro, estou sugerindo a você a visitar o JSLint e conhecê-lo. O autor da aplicação Douglas Crockfords disponibilizou também uma convenção de códigos em JavaScript.