Posts com Tag ‘Firefox’

1. Introdução
Um favicon (palavra derivada de “favorite” e “icon”) é uma pequena imagem gráfica (icon) com cerca de 16×16 (ou 32×32) pixels, armazenado em uma pasta do servidor de páginas para ser visualizado através do navegador quando o site for carregado. Pode-se definir um “icon” como um pequeno ícone dando uma dica visual de identificação de um Web site ou um conjunto de Web pages. Em navegadores como o Firefox, Iceweasel e Chrome, os favicons podem ser encontrados nas abas e nos favoritos.

2. Método para especificar que uma imagem é para ser usada como um favicon
Originalmente, o arquivo favicon era colocado na pasta raiz (“root”) do site. Mas depois que o W3C padronizou o uso do favicon isso deixou de ser verdade.

Essa padronização do uso do favicon pelo W3C veio através da recomendação HTML 4.01 (dezembro de 1999), e posteriormente através da recomendação XHTML 1.0 (janeiro de 2000). O padrão estipula a obrigatoriedade do uso do elemento “link” com um atributo “rel” na seção do documento, de forma a especificar o formato do arquivo, seu nome e sua localização. Diferentemente do esquema original, o arquivo pode estar em qualquer diretório do Web site e ter uma imagem em um dos 3 formatos permitidos (vide abaixo).

3. A imagem do favicon
Pelo padrão W3C, o formato da imagem do arquivo favicon deve ser PNG, GIF, ou ICO.

Se desejar trabalhar no formato ICO, recomendamos a utilização do aplicativo icotool. Vale salientar que esse programa trabalha apenas com arquivos no formato png. Primeiro faça sua instalação:
# apt-get install icoutils

Para fazer a conversão de um arquivo PNG para ICO, observe o exemplo:
$ icotool -c arquivo.png -o favicon.ico

Se o arquivo PNG não tiver no tamanho recomendado, utilize o GIMP ou o comando “convert”, da suite de aplicativos ImageMagick.

4. Exemplo de especificação
Abaixo um fragmento de codigo de um arquivo HTML exemplificando uma das maneiras de se especificar o favicon:


<head>
<link rel="icon" type="image/x-icon" href="./img/meu_favicon.ico"/>
</head>

Referências:
1- Favicon-Wikipedia
2- W3C: How to Add a Favicon to your Site

1. Visão Geral
Sugerimos inicialmente a leitura do post OpenLayers: objeto Feature. Que bicho é este? que apresenta o conceito de feature. Isto facilitará o entendimento do exemplo disponibilizado a seguir.

2. Um exemplo funcionando


<!DOCTYPE html> 
<html lang='pt'> 
<head> 
  <meta charset='utf-8' />
  <!-- Indicação da localização da bilbioteca OpenLayers -->
  <script type='text/javascript' src='./js/OpenLayers-2.12/OpenLayers.js'></script>
  <script type='text/javascript'>
  var map;
    var map;    
    function init() {
        // Criar o Objeto mapa
	//
        map = new OpenLayers.Map('map_id');
        // Criar o Layer básico raster e adicioná-lo ao mapa
        // Este mapa trabalha com a projeção geográfica (EPSG:4326)
        // que será utilizada diretamente ao longo deste exemplo
    	var wms_layer = new OpenLayers.Layer.WMS(
                'OpenLayers WMS',
                'http://vmap0.tiles.osgeo.org/wms/vmap0',
                {layers: 'basic'},
                {}
        );
        map.addLayer(wms_layer);
	//
        // Adicionar dois controles ao mapa para auxiliar na visualização da localização
        map.addControl(new OpenLayers.Control.LayerSwitcher());
	map.addControl(new OpenLayers.Control.MousePosition({}));
	//
	// Fixar o centro do mapa no Distrito Federal, onde está a capital do Brasil
	// utilizaremos um nível de zoom=11 que dará uma boa aproximação para os propósitos deste exemplo
	map.setCenter(new OpenLayers.LonLat(-47.85,-15.80),11);
	if(!map.getCenter()){
	    map.zoomToMaxExtent();
	}
	// Definir um novo estilo default para as features
	// Não seria obrigatório, apenas um plus a mais.
	var vector_style =  new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
	    pointRadius:22,
	    strokeColor:'red',
	    fillOpacity:0.0,
	    strokeOpacity:1,
	    strokeWidth: 2,
	    fillOpacity:0.1},
	    OpenLayers.Feature.Vector.style["default"]));
	// Criar um layer vetorial para sobrepor o layer raster e adicioná-lo ao mapa
	var layer_vetorial = new OpenLayers.Layer.Vector('Layer Dados Locais');
	layer_vetorial.styleMap = vector_style;  // Necessário se utilizou o vector_style anteriormente
	map.addLayer(layer_vetorial);
	//
	// Criar as features e adicioná-las ao layer vetorial
	var geom_point1 = new OpenLayers.Geometry.Point(-47.86,-15.83);
	var geom_point2 = new OpenLayers.Geometry.Point(-47.886,-15.741);
	var geom_point3 = new OpenLayers.Geometry.Point(-47.811,-15.748);
	var geom_line1  = new OpenLayers.Geometry.LineString(
                          [geom_point1,geom_point2]);
	var geom_line2  = new OpenLayers.Geometry.LineString(
                          [geom_point2,geom_point3]);
	//
	var feature_point1 = new OpenLayers.Feature.Vector(geom_point1,
	                     null,
	                     {
	                     pointRadius:12,
	                     fillOpacity:0.7,
	                     fillColor:"#E31818",
	                     strokeColor:"#18E385",
	                     strokeWidth:8
	                     }
	);
	var feature_point2 = new OpenLayers.Feature.Vector(geom_point2,
                             {title:"Feature-2"});
	var feature_point3 = new OpenLayers.Feature.Vector(geom_point3);
	var feature_line1  = new OpenLayers.Feature.Vector(geom_line1,
	                     null,
	                     {
	                     strokeColor:"#176B44",
	                     strokeWidth:3
	                     }
	);
	var feature_line2  = new OpenLayers.Feature.Vector(geom_line2);
	map.layers[1].addFeatures([feature_point1,feature_point2,feature_point3,
                                   feature_line1,feature_line2]);
	//
/*	Uma outra forma seria substituir esta última instrução acima pelas duas instruções a seguir:
	layer_vetorial.addFeatures([feature_point1,feature_point2,feature_point3,
                                   feature_line1,feature_line2]);
	map.addLayer(layer_vetorial);
*/
        //
	// Calcular a distância em Km entre os pontos 1 e 2
	var dist = geom_point1.distanceTo(geom_point2);
	// Enviar o resultado do cálculo para o console do Firebug
	console.log("distancia(1-2)=",60 * 1.8520 * dist ,"Km");
	// Clonar o ponto 1
	var geom_point4 = geom_point1.clone();
	// Calcular a distância em Km entre os pontos 3 e 4
	// OBS: para este cálculo não há necessidade de criar a feature e adicioná-la ao mapa
	var dist = geom_point3.distanceTo(geom_point4);
	// Enviar o resultado do cálculo para o console do Firebug
	console.log("distancia(3-4)=",60 * 1.8520 * dist ,"Km");
        }
    </script>
</head>
<body onload='init();'>
    <div id='map_id' style='width: 600px; height: 400px;'></div>
</body>
</html>

Referências:
1- OpenLayers: API Documentation
2- OpenLayers Library Documentation
Veja Também:
3- Um pouco de OpenLayers, Geoserver e PostGis

Este post fora feito quando da versão 17.0 do Firefox.

1. Debug de scripts Javascript
O Firefox traz várias falicidades para debug, seja para códigos JavaScript, PHP ou conexões HTTP.

1.1 Console JavaScript
É possível ter um console para debug de scripts JavaScript através do Firefox. Além disso, é possível escrever código JavaScript diretamente para o browser com o Firefox, podendo ser uma maneira fácil de testar o código. No Fierfox, sua console é obtida através do menu Ferramentas -> Desenvolvedor Web -> Console da Web

A janela de console do Firefox será mostrada, conforme a imagem abaixo.

Imagem: console Firefox

Como pode ser visto pela figura anterior, o console exibe quatro tipos diferentes de mensagens, que podem ser ligadas através dos botões – solicitações de rede, mensagens de CSS, mensagens de JavaScript e mensagens ao desenvolvedor web. Mas o que é uma mensagem ao desenvolvedor web? É uma mensagem impressa no objeto “window.console”. Por exemplo, poderíamos executar o código JavaScript window.console.log("Olá Mundo"); no “rascunho” do Firefox (veja mais adiante) para imprimir uma mensagem de desenvolvedor para o console. Os desenvolvedores da Web podem integrar essas mensagens em seu código JavaScript para ajudar na depuração.

O interpretador da linha de comando
Na parte de baixo da janalea do console do Firefox existe uma caixa para o usuário entrar comandos. O desenvolvedor pode utilizar expressões JavaScript que em tempo real serão interpretadas. Qualquer expressão JavaScript que seja digitada será avaliada, e o resultado será enviado para o log do console. Pode-se fazer muitas coisas, como cálculos simples para avaliar expressões complexas, e até mesmo incluir variáveis definidas na página atual. Exemplos de comandos:

> 600+10
  610
>

1.2 JavaScript Scratchpad (Rascunho)
O Scratchpad é obtido através do Firefox seguindo o menu Ferramentas -> Desenvolvedor Web -> Scratchpad
Abaixo, a imagem da tela desta ferramenta de auxílio ao desenvolvimento de código:

Firefox Scratchpad

Exemplo de comandos JavaScript:

alert("Olá mundo");
window.console.log("Esta é uma mensagem enviado do scratchpad");

Para o primeiro comando acima, será aberta uma mensagem popup na tela do navegador. Para o segundo comando será escrito uma mensagem de desenvolvimento no console web (conforme já explicado anteriormente).

2. Debug de scripts JavaScript com Firebug
Logo do FirebugFirebug se integra com Firefox para colocar um conjunto de ferramentas de desenvolvimento nas mãos do usuário enquanto se navega na web. Com ele é possível editar, depurar e monitorar o comportamento de CSS, HTML e JavaScript em qualquer página web. Sem interferir na lógica do programa, com o auxilio do Firebug o programador poderá inserir em seu código JavaScript linhas que o irão ajudar a depurar seu script. São algumas funções que quando chamadas imprimem mensagens com um visual colorido e distinção semântica.

Veja alguns exemplos de mensagens enviadas ao console do Firebug na figura logo a seguir, considerando o recorte de código abaixo:


var mens = "teste de depuração";
var user = "João";
var score = 1000;
console.log("meu primeiro echo do JavaScript");
console.log("meu segundo echo do JavaScript: ",mens);
console.info("meu terceiro echo do JavaScript: ",mens);
console.warn("meu quarto echo do JavaScript: ",mens);
console.error("meu quinto echo do JavaScript: ",mens);
console.warn("%cUsuário %s tem %d pontos", "color:orange; background:blue; font-size: 16pt", user, score);

Onde pode-se utilizar:
%c – Formatar a saída de acordo com o estilo CSS fornecido.
%s – Formatar o valor como uma “string”.
%d – Formatar o valor como um “integer” (poderia também utilizar-se %i).
%f – Formatar o valor como “floating point”.
%O – Formatar o valor como um “expandable JavaScript object”.
%o – Formatar o valor como um “expandable DOM element” (como do painel DOM).

Tela do console do Firebug com mensagens

Firebug adiciona uma variável JavaScript global chamada “console” para todas as páginas carregadas no Firefox. Este objeto contém muitos métodos que permitem ao programa enviar ao console do Firebug informações que estejam fluindo através dos scripts JavaScripts que estejam em execução. Veja informações completas em Console API.

2.1 Configurar pontos de interrupção com o Firebug
É muito fácil configurar pontos de interrupção (“break points”) com o Firebug em códigos JavaScript. Basta ir ao painel “Script”, selecionar o arquivo de script desejado (fazendo o seu código aparecer), e então clicar em cima do número da linha onde se deseja o ponto de interrupção. Uma marca vermelha aparecerá antes do número da linha que contiver um ponto de interrupção. Vários pontos de interrupção podem ser inseridos cumulativamente.

Quando o script for executado e atingir uma linha com ponto de interrupção, o Firebug suspenderá sua execução (antes que o código desta linha seja executada), como ilustra se seguinte figura:

Tela do Firebug mostrando um ponto de interrupção

Note a marca vermelha antes do número da linha 1158 (indicando o ponto de interrupção), e sobreposto a esta marca um pequeno triangulo amarelo. Esta marca amarela indica a próxima linha do script a ser executada, ou seja, o código do script fora executado até a linha imediatamente anterior a que contém o ponto de interrupção.

Na última figura acima duas áreas especiais A e B com elipses vermelhas foram destacadas:
a) área A: 5 botões, com os seguintes significados (nesta ordem):

  • “return” (shift+F8): retorna ao início;
  • “continue” (F8): permite retomar normalmente a execução do script do ponto que fora interrompido (não usa a forma passo-a-passo);
  • “step into” (F11): passo-a-passo, onde se executa também na forma de passo-a-passo o corpo das outra funções que forem encontradas ao longo da execução;
  • “step over” (F10): passo-a-passo, onde NÃO se executa na forma passo-a-passo o código interno das outra funções que forem encontradas ao longo da execução;
  • “step out” (shift+F11): permite retomar a execução do script e vai parar no próximo ponto de interrupção.

b) área B: três janelas estão disponíveis:

  • Observar: pode ser auditado o valor das variáveis do script naquele momento de parada;
  • Pilha: um trace com a pilha de chamadas (semelhante a função console.trace() );
  • Pontos de interrupção: mostra os pontos de interrupção existentes.

2.2 Configurar pontos de interrupção condicionais com o Firebug
Às vezes se deseja fazer uma pausa somente numa condição muito específica. O Firebug permite que se defina pontos de interrupção condicionais, que verificam uma expressão que deve ser verdadeira para que seja interrompida a execução do script.

Para definir um ponto de interrupção condicional, basta clicar com o botão direito em qualquer número da linha. Um formulário será exibido, solicitando que se digite uma expressão JavaScript. Pode-se clicar com o botão direito novamente a qualquer momento para alterar a expressão, ou clique com o esquerdo do mouse para remover definitivamente o ponto de interrupção. A figura abaixo mostra uma tela para inserção de um ponto de interrupção condicional:

Tela do Firebug para inserção de ponto de interrupção condicional

Por exemplo, poderia ser digitado neste formulário: a == 1. Assim, só haveria a interrupção do script se a variável “a” tivesse valor 1. A avaliação é feita antes da execução do código JavaScript da linha em que fora inserido o ponto de interrupção condicional.

2.3 Pontos de interrupção com a instrução “debugger”
A instrução “debugger” do JavaScript atua como um ponto de interrupção: a execução do script é interrompida e se pode utilizar o Firebug para auditar os valores das variáveis, examinar a pilha de chamada, etc. Note que só haverá a interrupção do script se houver um depurador em execução. Abaixo exemplificamos um fragmento de código JavaScript com a instrução debugger:
var mens = "teste de depuração";
var user = "João";
debugger;
var score = 1000;

A instrução debugger fora adicionada formalmente na linguagem por ECMAScript 5.

2.4 Comando “trace” do Firebug
Basta chamar console.trace() e o Firebug irá escrever as informações de um rastreamento (trace) da pilha para o console. Não só ele irá informar quais as funções estão na pilha, mas ele irá incluir também o valor de cada argumento que foi passado para cada função. Você pode clicar nas funções ou nos objetos para inspecioná-los.

Observe o exemplo de recorte de código abaixo e sua respectiva saída no console do Firebug, conforme mostrado a seguir.


function fsis_principal(p_acao, p_indicador) {
'use strict';
function e(){console.trace();}
function d(){ e();}
function c(){ d();}
function b(){ c();}
function a(){ b();}
a();

Tela com saída no console do Firebug para sua função trace.

2.5 Outras facilidades do Firebug
a) Ir diretamente para determinada linha do script
Muitas vezes se deseja visualizar diretamente o código do script a partir de uma determinada linha. Fazer isso não poderia ser mais fácil, basta digitar o número da linha na caixa de pesquisa rápida, precedido pelo sinal “#”, como se vê na captura de tela abaixo.

Tela do Firebug dando opção para mostrar determinada linha do código

3. Debug de scripts PHP com FirePHP
3.1 Introdução

FirePHP iconQuando necessitamos fazer debug de aplicações PHP, a maneira mais imediata é verificar o conteúdo das variáveis do PHP, obtendo seus valores diretamente nas páginas web de saída da plicação através de instruções “echo”, “print_r” ou similares. Outras possibilidades mais potentes, ainda que requeira mais preparação, seria:
(a) utilizar um sistema de Debug, como o que existe no Eclipse ou em outras Integrated Development Environment (IDE) de desenvolvimento de PHP com algum build-in debugger;
(b) registrar os processos de depuração exibindo no próprio navegador (browser).

O que estamos tratando neste post é a opção de se registrar as mensagens de debug dentro do console do próprio navegador. Vamos utilizar o navegador Firefox e as extensões FireBug e FirePHP. Isso será muito vantajoso, observe:
– simples de instalar e de se usar as facilidades de debug;
– não realização de bagunça no código do programa pois não se exige modificações de nada para capturar os erros;
– as mensagens que são criadas são enviadas diretamente para o navegador através de “HTTP response headers”, ou seja, as mensagens de debug não vão “quebrar” as respostas das requisições do programa com mensagens e erros de debug e fazendo parar de funcionar toda a aplicação. Ou seja, as mensagens não aparecem na tela de saída da plicação não molestando a visualizaçao dos resultados dos scripts PHP.
– resposta vem limpa e todo o processo de depuração vem catalogado no console do Firebug.

Como funciona FirePHP
O complemento FirePHP tem a particularidade de enviar mensagens ao console do Firebug, sem que estas apareçam na tela de saída do programa. As mensagens que podem ser enviadas são:
(a) simples log, com o conteúdo de qualquer elemento que necessite ser visualizado (como variáveis criadas no PHP);
(b) mensagens informativas;
(c) mensagens de erro;
(d) mensagens de warning.

3.2 Instalando
3.2.1 Quanto ao ambiente do cliente
Para fazer o FirePHP funcionar é necessário ter instalado:

Tanto Firebug como o FirePHP são instalados como extensões do Firefox através do menu Ferramentas -> Complementos do Firefox.

3.2.2 Quanto ao ambiente do Servidor
(a) Instalar a biblioteca FirePHPCore
Download standalone ou instale pelo PEAR conforme instruções.
Obs:

    • se optou por fazer o download standalone, extraia os arquivos numa pasta auxiliar qualquer:

$ unzip firephp-core-0.4.0.zip (0.4.0 foi a versão existente no momento deste post). Será criada uma pasta firephp-core-0.4.0 onde os arquivos serão extraídos. Os arquivos que serão relacionados neste posto logo adiante estarão contidos no caminho “firephp-core-0.4.0/lib/FirePHPCore/”

  • se utilizar o PEAR, no momento deste post a biblioteca é instalada em /usr/share/php/FirePHPCore/

(b) Fazer uma cópia da biblioteca FirePHPCore
Disponibilize uma cópia da biblioteca FirePHPCore no documentRoot do script a ser depurado. Se for /var/www, a biblioteca deve ficar assim:
/var/www/FirePHPCore/FirePHP.class.php
/var/www/FirePHPCore/FirePHP.class.php4
/var/www/FirePHPCore/fb.php
/var/www/FirePHPCore/fb.php4

Obs:
i. se a instalação fora realizada através do PEAR e se o repositório PEAR estiver no include path este passo pode ser opcional.
ii. a diferença entre fb.php e FirePHP.class.php é que o arquivo fb.php tem o código para poder acionar o FirePHP por meio de funções ou procedimentos e FirePHP.class.php contém uma classe para poder fazer basicamente as mesmas coisas, mas por meio de programação orientada a objetos.

3.3 Utilizando
Veja um pequeno exemplo de arquivo PHP, disponibilizado em /var/www/teste.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
#Include a classe FirePHP
# require_once('FirePHPCore/FirePHP.class.php');
require_once('FirePHPCore/fb.php');
#Start buffering the output. Not required if output_buffering is set on in php.ini file
ob_start();
# buscar variavel de referência do firePHP
$firephp = FirePHP::getInstance(true);
# FB::setEnabled(false);
function testar1() {
echo "que legal-1"."<br>";
}
function testar2() {
echo "que legal-2"."<br>";
}
$todays_date = date('l jS of F Y h:i:s A'); /* data de hoje */
$firephp->log($todays_date, 'Date');
$firephp->log("minha mensagem de log");
$firephp->info("minha mensagem de informação");
$firephp->warn("minha mensagem de warning");
fb("minha nova mensagem de aviso",FirePHP::WARN);
$firephp->error("minha mensagem de alerta de erro");
$var = array('a'=>'pizza', 'b'=>'biscoitos', 'c'=>'doces', 'd'=>'sucos');
$firephp->log($var);
$firephp->info($var);
fb('Hello World!', FirePHP::TRACE);
testar1();
testar2();
?>

A saída do FirePHP para o exemplo acima seria:
Saída do FirePHP

3.4 Observações
a) Sobre FB::setEnabled(true|false)
Se refere a habilitar/desabilitar o registro de logs no Console. Quando o site vai para produção é importante que o FirePHP esteja desabilitado para que cesse o envio das mensagens de depuração. Assim, o código de chamadas do FirePHP escrito para debugar o programa não será necessário retirá-lo (pelo menos no primeiro momento).

b) Janelas com informações adicionais
Quando se passa o mouse em cima de algumas mensagens que foram logadas no console do FirePHP, uma janela aparece com todas as informações logadas, tudo tabulado de forma legível para desenvolvedor. No exemplo acima, é o caso, por exemplo, do log de “info($var)”.

c) Visualização do TRACE
Um click simples no label “Hello World!” do exemplo acima servirá para mostrar o trace inteiro.

3.5 Problemas de cache
O cache do navegador pode ser um problema na visualização dos resultados durante o desenvolvimento. O desenvolvedor poderá estar vendo um resultado no navegador que não corresponde ao código recém modificado. Assim, é recomendado:
a) desativar o cache nas configurações do navegador;
b) desativar o cache através das opções do FirePHP, conforme figura abaixo:
Desabilitar o cache no FirePHP

4. LiveHTTPHeaders
Live HTTP Headers Firefox é um ferramenta que exibe numa janela os cabeçalhos HTTP de cada requisição, auxiliando na verificação de erros de rede. As informações dos cabeçalhos também podem ser exibidas numa barra lateral, e as URLs das requisições que serão analisadas podem ser definidas como expressões regulares.

Tela do LiveHTTPHeaders

Referências:
1- Firebug – Web Development Evolved
2- Install FirePHP
3- Como debugar aplicações AJAX/PHP com FirePHP
4- Variáveis globais do Firebug
5- Live HTTP Headers
6- Debugging PHP Code with FirePHP

Os próprios sites podem disponibilizar pesquisas para o Firefox.  Ao visitar uma página, verifique se o logotipo no campo de pesquisa está realçado (como indicado na imagem abaixo).

Significa que o site possui uma pesquisa para ser instalada no Firefox. Isso ocorre, por exemplo, nas páginas do YouTube ou da Wikipedia Português.  Clique no logotipo realçado e selecione ADICIONAR.

Veja mais:

1- Tudo sobre o campo de pesquisa do Firefox
2- Repositório de motores de busca

Web Developer
A extensão Web Developer adiciona diversas ferramentas de desenvolvedor web para um browser. A extensão está disponível para Firefox e Chrome, e será executado em qualquer plataforma que suporte esses navegadores, incluindo Windows, Mac OS X e Linux.

Firebug
Firebug é uma extensão que integra o navegador Firefox para colocar um conjunto de ferramentas de desenvolvimento na ponta dos dedos enquanto se navega. Você pode editar, depurar e monitorar CSS, HTML e JavaScript em qualquer página web …

PHP Developer Toolbar
Pare de procurar na PHP.net para simplesmente relembrar as funções. Com esta extensão você pode pesquisar rapidamente as funções pela descrição da função oficial diretamente no seu navegador sem necessidade de abrir abas novas.

Video DownloadHelper
O jeito fácil de fazer download de vídeos na Web de centenas de sites tipo YouTube. Este funciona também para sites com galerias de audio e imagens.

Downthemall
Para fazer download de vídeos na web, inclusive Youtube, superando as dificuldades de baixar vídeos em HTML5 do Youtube.
Para help:
– página oficial da extensão: http://www.downthemall.net/howto/features/
– se a extensão já estiver instalada, um help rápido pode ser obtido pela página about:downthemall, através do navegador.

Links
1- Complementos Firefox (Iceweasel)
2- Debug de scripts com Firefox

Este tutorial se refere a instalação do flash-player nos navegadores Iceweasel, Firefox ou Epiphany. Numa máquina Linux com distribuição Debian instalada.

1) Remova o GNU Flash
Remover, caso instalado, o GNU Gnash (um tocador de SWF que possui a licença GPl). Pode-se utilizar o gerenciador de pacotes gráficos Synaptic se isto for um facilitador.

2) Baixe o player do Flash
Baixe o player diretamente do site da adobe. Neste post, vamos utilizar a versão tar.gz disponível para máquinas 64 bits com Linux.

3) Descompacte o arquivo
$ tar -xvzf install_flash_player_11_linux.x86_64.tar.gz
OBS: será gerado, entre outros, o arquivo libflashplayer.so que é o que nos interessa para os propósitos deste post.

4) Mova o driver para a pasta correspondente
Mova o arquivo libflashplayer.so para a pasta:

  • /usr/lib/mozilla/plugins/ , se usas o Iceweasel ou o Firefox;
  • /usr/lib/epiphany-gecko/2.22/plugins/ , se usas Epiphany versão 2.22

OBS: caso a pasta ‘plugins’ ainda não exista, crie a pasta.

Reinicie o navegador.

É isso, muito simples.

Tive a necessidade de substituir o Iceweasel pelo Firefox. A razão principal foi de que o Mozilla Firefox 3.5.6 já traz o suporte ao formato HTML5, linguagem que promete revolucionar a web e arquivos de mídia vinculados a ela. Descrevo aqui como fiz isso, estando instalado o gerenciador de janelas GNOME ou Xfce.

1) Baixar o Firefox
Baixe o Firefox para uma pasta local do usuário. No caso, o arquivo que baixei tinha nome firefox-3.6.3.tar.bz2. Tem diversas versões, uma para cada língua. Baixe a de sua preferência

2) Como administrador, executar:
a) Para desinstalar o iceweasel: apt-get remove iceweasel
b) Copie o firefox: mv firefox-3.6.3.tar.bz2 /usr/lib/
c) Coloque-se na pasta lib: cd /usr/lib
d) Desempacote o firefox: tar -jxvf firefox-3.6.3.tar.bz2
e) Crie um link simbólico: ln -s /usr/lib/firefox/firefox /usr/bin/firefox

3) Sobre os plugins
Para que os plugins do browser Iceweasel que já foram instalados passem a funcionar no Firefox, deve ser criado um link simbólico da seguinte forma (com permissão de root):
a) Remova o link anterior: rm -rf /usr/lib/firefox/plugins
b) Redirecione a pasta de plugin: ln -s /usr/lib/mozilla/plugins /usr/lib/firefox/plugins

4) Criar entrada no menu
Crie uma entrada no menu do seu gerenciador de janelas (Gnome ou Xfce) para o Firefox, criando um arquivo ‘firefox.desktop’ na pasta /usr/share/applications.

a) Para o Gnome, o conteúdo deste arquivo pode estar assim:


[Desktop Entry]
Name=Firefox
Name[en_US]=Firefox
Name[pt_BR]=Firefox
Encoding=UTF-8
Type=Application
Terminal=false
Comment[pt]=Navegar na web
Comment[pt_BR]=Navegar pela web
Comment[en_GB]=Browse the webroot
Exec=/usr/bin/firefox
Icon=/usr/lib/firefox/browser/icons/mozicon128.png
Categories=Network;WebBrowser;
StartupNotify=true

b) Já para Xfce, o conteúdo deste arquivo pode estar assim:


[Desktop Entry]
Name=Firefox Web Browser
Type=Application
Exec=firefox --launch WebBrowser %u
Icon=/usr/lib/firefox/browser/icons/mozicon128.png
StartupNotify=false
Terminal=false
Encoding=UTF-8
## Categories=Network;X-XFCE;X-Xfce-Toplevel;
Categories=Network;X-XFCE;
OnlyShowIn=XFCE;
X-XFCE-MimeType=x-scheme-handler/http;x-scheme-handler/https;
Comment[pt]=Navegar na web
Comment[pt_BR]=Navegar pela web
Comment[en_GB]=Browse the webroot

5) Deixar o Firefox como o navegador padrão
Uma vez que exista mais de um navegador instalado, pode-se selecionar o padrão de todo o sistema usando:
# update-alternatives --config x-www-browser