Desenvolver para a web é um desafio, quando se trata de deixar o projeto compatível com todas as formas de acesso possível que o usuário final pode usar. Na minha opinião, o correto mesmo é utilizar os padrões W3C e tentar “re-ensinar” ao usuário a usar os navegadores que seguem esses padrões, pois assim “obrigamos” os fabricantes que não seguem, a seguirem o W3C Standards na hora de desenvolver e atualizar os seus navegadores.

Abaixo está uma explicação mais simples e objetiva dessa idéia, escrita por Nilton Américo, no Profissionais TI.

Os serviços de TI cresceram muito nos últimos 10 anos. Hoje, podemos contar com uma grande variedade de ferramentas disponíveis e algumas delas são os navegadores de internet que, com o crescimento da rede, a cada ano vem tendo mais e mais empresas interessadas em seu desenvolvimento.

Podem notar que no artigo do nosso amigo Jackson que existem muitos navegadores de internet disponíveis para todos os gostos, porém, temos 2 campeões de usuários: o Internet Explorer e o Firefox. Ambos são diferentes em alguns pontos na hora de interpretar os códigos HTML e por isso, comprometem o design e funcionalidades de sites. A situação fica ainda pior quando você tem sistema web que, por exemplo, vai gerar um erro ao concluir um cadastro porque os desenvolvedores utilizaram como padrão apenas o Internet Explorer, principalmente quando usam programação Microsoft, onde alegam que a maioria dos usuários de seus sistemas utilizam apenas o navegador “Microsoftiano”. Será que é essa a nossa realidade?

Claro que não! Hoje temos mais opções de escolha (Firefox, Chrome, Opera e etc) onde o usuário pode optar por usar navegadores que ele se sentir mais seguro e confiante, portanto, quando forem iniciar um projeto ou implantar alguma ferramenta na web, certifiquem-se que o site/sistema esteja compatível com pelo menos os 2 principais navegadores do mercado. Pode dar mais trabalho desenvolver desta forma, mas depois de implantado você pode trocar de navegador quando for necessário, tendo a certeza de que o usuário verá exatamente o que você quis que ele visse.

E você, desenvolvedor, testa seus sites e sistemas em quantos navegadores? Como é sua forma de trabalho? Deixe seu complemento para os iniciantes na área

Estou iniciando hoje uma série de posts com dicas para quem trabalha com webdesign e/ou programação.

A primeira dica é a escolha e personalização do navegador. Escolher um navegador para se trabalhar com a web exige considerar alguns aspectos, como: a forma como meu site será exibido para o usuário final, a compatibilidade com as tecnologias utilizadas e a compatibilidade com as exigências da W3C (Consórcio que cria e gerencia as regras de desenvolvimento para web).

Essas exigências deveriam ser obedecidas a risca por todos os navegadores, mas na prática não é isso que acontece. O Internet Explorer, do nosso tio Bill Gates, é o mais rebelde de todos, pois tem suas próprias regras que entram em conflito com a W3C. Apesar de as versões mais atuais estarem mais adaptados, deve-se lembrar que a maior parte dos usuários ainda utilizam a versão 6.0 deste navegador, versão esta mais rebelde de todas.

Por isso, ao desenvolver para a web, não se esqueça de verificar como está seu site ou projeto em mais de um navegador. O recomendado pelos grandes mestres do webdesign é desenvolver um projeto em um navegador o mais compatível possível com as regras da W3C e corrigir os bugs que aparecem nos demais navegadores, principalmente no Internet Explorer 6.

Eu, particularmente, utilizo o Firefox, por ser o mais compatível com as tecnologias que utilizo (CSS, HTML, JavaScript, PHP, MySQL, AJAX, entre outras) e principalmente porque ele me oferece uma série de ferramentas de auxílio para o desenvolvimento e programação. Depois, sempre repasso o projeto corrigindo os bugs do IE e outros navegadores.

Sendo assim, vou iniciar essa série de posts falando sobre essas ferramentas que me auxiliam na produção. Começando pela versão do Firefox, sei que muitos preferem sempre utilizar a versão mais atual, porém prefiro a versão 3.0 do firefox, por ser compatível com a maioria dos complementos que vamos ver a seguir. As demais versões são muito boas, porém ao utilizá-las, sou obrigado a abrir mão da utilização de alguns desses complementos. Então, toda a lista apresentada abaixo foi testada e aprovada pela versão 3.0 do Firefox e logo abaixo da lisa está a galeria de imagens de todos os complementos, ok. Vamos lá:

Firebug: Esta é uma ferramenta nos exibe o código fonte das páginas web, debugando-as e localizando erros e bugs existentes durante a programação e estruturação dos projetos.

Web Developer: Considero este e o firebug os dois mais importantes dessa lista. O Web Developer é uma barra de ferramentas com uma enorme coleção de recursos muito úteis para a valição de nossos códigos HTML, CSS, JavaScript com a W3C, além de ajudar e muito com a estruturação de projetos, a exibição de diferentes resoluções de tela e muito mais. Com certeza essa é a ferramenta mais essencial para qualquer webdesigner ou programador, em conjunto com o Firebug, é claro!

ColorZilla: Este complemento ajuda na hora de verificar quais as cores utilizadas em um site, por exemplo. Ele fica escondidinho no canto inferior-esquedo do navegador, na barra de status. Nos dá apenas com 2 cliques os códigos RGB e hexadecimal da cor que clicamos. Daí basta clicar com o botão direito do mouse sobre seu ícone e mandar copiar para utilizar a cor no photoshop ou no CSS do projeto.

MeasureIt: Este complemento ajuda muitíssimo quando o trabalho é estruturação, seja de um site ou de um sistema on-line. Ele consegue nos dar a medida exata de qualquer elemento na tela, bastando para isso clicar em seu icone e clicar e arrastar sobre o elemento desejado.

ScreenGrab: Se você precisa capturar imagens ou telas para seu projeto ou se você gosta de manter seu portfólio atualizado sempre que termina um novo projeto, então essa é a ferramenta que você precisa. Sua função é capturar parte da tela do navegador ou a tela inteira ou ainda apenas a area que você selecionar. Meu portfólio neste blog foi feito por ela.

Chrome View: Abra a página que você está visualizando no GoogleChrome, sem precisar iniciar o navegador separadamente e dar ctrl+c e ctrl+v na barra de endereços. Claro que é necessário ter o Chrome instalado no pc.

IE View: Abra a página que você está visualizando no Internet Explorer, sem precisar iniciar o navegador separadamente e dar ctrl+c e ctrl+v na barra de endereços.

OperaView: Abra a página que você está visualizando no Opera, sem precisar iniciar o navegador separadamente e dar ctrl+c e ctrl+v na barra de endereços. Logicamente é necessário ter o Opera instalado para que funcione.

SpeedDial: Ótimo complemento para quem gosta de organização e controle sobre todos os seus links mais utilizados. Ele oferece uma pagina onde podemos guardar os sites mais utilizados em forma de miniaturas. Além disso, pode-se organizá-lo por grupo e aumentar/diminuir a quantidade de miniaturas de um grupo. Se você encontrar um site e quiser adicioná-lo, não é necessário copiar seu endereço, basta deixar na sua barra de ferramentas um botão onde estão listados todos os grupos existentes no SpeedDial. Navegue até o grupo desejado e clique em um dos itens chamados de “Anônimo”.

Google Notas: Já se sentiu totalmente perdido dentro das pastas e links que cria nos favoritos de seu navegador? Acha complicado organizar seus links preferidos? Esta é a solução!! O complemento GoogleNotas insere na barra de status do firefox um atalho para o aplicativo notebook do Google, onde você pode (e deve) criar ilimitados notebooks, subdivididos por seção, para guardar seus links com comentários próprios e úteis para localizá-los depois. Essa é a melhor parte: o complemento sempre abre os blocos de notas em uma pequena janela no canto inferior-esquerdo do navegador, mas quando precisar fazer uma busca por uma anotação, basta clicar no seu link no titulo do app que ele abrirá em nova guia/janela do navegador, permitindo fazer a busca por todos os blocos de notas existentes.

OBS: Infelizmente a única versão compatível do firefox com esse complemento é a 3.0 pois a Google parou de atualizá-lo para substituí-lo pelo Google Bookmarks, que também é uma boa opção. Se você não utiliza ainda o Google Notas, a dica é utilizar o GB, pois o GN pode deixar de existir a qualquer momento, uma vez que foi descontinuado. Inclusive eu tenho centenas de sites guardados no meu, os quais terei que migrar todos para o GB.

KPICASA_GALLERY(ComplementosFirefox#Gv1sRgCJDz4KSaxK6tnwE)

Bom, até aqui os complementos indicados foram para os desenvolvedores web. Segue abaixo uma segunda lista de complementos úteis para a organização de projetos e conteúdos e para o recebimento de twittadas e emails, mas esses já são opcionais. Lembre-se de um detalhe muito importante: instalar muitos complementos no Firefox vai deixá-lo pesado, principalmente para iniciar o programa, então procure utilizar somente os mais importantes e que você usa com frequência.

Segue a lista dos opcionais:

Gmail Manager: Complemento de utilização bem simples, mas que faz uma boa diferença. Sua função é gerenciar contas do Gmail.  Após sua instalação, basta ir configurar quantas contas do gmail você quiser e, sempre que receber uma nova mensagem, você será avisado pelo firefox. O interessante é que você pode configurar de quanto em quanto tempo o app deve verificar se há novas mensagens e ainda quais as pastas ele deve monitorar: cx de entrada, spam ou marcadores. Além disso, existem configurações gerais e configurações específicas para cada conta de email que você adicionar.

Echofon (antigo TwitterFox): Se você gosta de se manter atualizado em relação ao que seus

amigos estão fazendo, além de também receber notícias atualizadas de sites e blogs preferidos, essa é uma ferramenta muitíssimo útil. Com o twitterfox você recebe as twitadas na hora sem precisar manter o site do Twitter aberto o tempo todo. Além disso, a ferramenta permite que você se conecte até a mais de um twitter. Essa é impressendível.

ShowIP: Exibe em qual endereço IP o site que você está visualizando está hospedado. Serve principalmente para verificarmos se o site está em servidores no Brasil ou nos EUA por exemplo.

Download StatusBar: Pequeno gerenciador de download que, na verdade apenas indica quais downloads estão sendo executados, qual a porcentagem, o tempo restante entre outras informações. Ideal para quem gosta de fazer vários downloads ao mesmo tempo. OBS: Ele não gerencia o download, apenas exibe os arquivos que estão sendo baixados junto à barra de status do navegador.

ReminderFox: Se você está precisando organizar suas tarefas, lembrar de compromissos e datas importantes e você passa o dia trabalhando/navegando no Firefox, esse complemento vai ajudá-lo muito! Seu principal objetivo é não nos deixar esquecer daquelas tarefas paralelas do dia-a-dia, como por exemplo: “ir ao banco”, “renovar emprestimo de livro”, “pagar boleto da mensalidade tal”. São tarefas simples que, na concentração de nosso trabalho, muitas vezes esquecemos de cumprir e no final do dia temos problemas com isso. Porém o ReminderFox oferece recursos suficientes para adicionarmos até mesmo tarefas corriqueiras do nosso trabalho, fazendo com que nossos horários sejam organizados e o dia bastante proveitoso. Esperimente, garanto que vai ajudar bastante a organizar seu dia.

FEBE: Este complemento é um que recomendo muitissimo, independente de você ser ou não um desenvolvedor web. Sua funcionalidade é fazer um backup de todos os plugins, complementos e temas instalados no seu firefox. É isso mesmo! Eu mesmo já tive que reinstalar várias vezes os mesmos complementos no firefox exclusivamente por ter tido problemas no computador e ter que formatá-lo. Daí vem a maratona de reinstalações. Este complemento vai fazer o backup e vai restaurá-lo sempre que preciso. Uma dica em relação a ele é fazer o backup e depois desativá-lo, pois você não o usará com muita frequência, apenas quando adicionar novos complementos importantes, não é mesmo?

Lembrando que todos os complementos citados são de responsabilidade de seus respectivos desenvolvedores e podem ser encontrados devidamente atualizados no site oficial do firefox. Para acessá-lo, entre no menu ferramentas e em complementos. Lá existe um link para acessar o site com centenas de apps. Basta utilizar a ajuda para encontrar os apps desejados.

Bom, os complementos estão aí. Estes são os que mais utilizo diariamente. Claro que, ao encontrar alternativas melhores, procuro migrar, pois muitos complementos e extensões podem deixar seu Firefox muitíssimo pesado.

A dica é: pensar bem na utilidade de cada complemento antes de instalá-los e analisar se realmente vai utilizá-lo ou não. E caso perceba problemas com o navegador após a instalação, não deixe de comunicar ao desenvolvedor, pois só assim este poderá fazer as correções necessárias e disponibilizar apps realmente úteis e seguros.

Caso utilizem algum app interessante e muito útil, por favor, deixe no comentário. Poderei acrescentá-lo aqui com os devidos créditos, ok.

Nos próximos posts, vou escrever sobre os principais programas utilizados no mundo web e nas principais linguagens de programação que fazem os milagres da Internet. Conteúdo importante para você que está iniciando como webdesigner e programador.

Não deixem de visitar.

É incrível como o pessoal ainda tem muita dúvida em relação à codificação utilizada em sites e/ou sistemas em PHP que utilizem MySQL como banco de dados. Geralmente ao criar um banco de dados MySQL deixamos as codificações padrão do phpmyadmin. O problema é que mesmo utilizando nas páginas HTML/PHP o UTF-8, os navegadores ainda mostram dados truncados ao se fazer consultas de dados no banco.

Como não poderia ser diferente, há tempos procuro por uma solução que resolva meus problemas em relação a isso e hoje, ao iniciar o desenvolvimento de um novo sistema, me deparei com este problema novamente.

No meu banco de dados, a tabela está com a seguinte configuração:

Bom, a primeira coisa que fiz foi alterar a codificação do firefox que estava também em UTF-8 para ISO-8851-9. Porém isso resolveu o problema com o banco de dados mas me trouxe o mesmo problema com o restante do texto.

A segunda tentativa foi direto ao banco de dados e tentar encontrar outra codificação. Pesquisei no nosso amigo GOOGLE e encontrei posts de outros blogs e fóruns dizendo que a codificação deveria ser essa:

Character set: UTF-8 Unicode
Collation: latin1_general_ci

Fiz essa alteração na tabela envolvida, mas nada resolveu. Foi aí que alterei a minha busca no Google para “codificação mysql php” e encontrei três ótimas referências ao mesmo problema.

No blog do Willian Vieira (http://willianvieira.wordpress.com) o autor sugeriu a seguinte alternativa:

function abreconexao() {
$dbname = "inventario";
$usuario = "inventario";
$password = "123abc";
$id = mysql_connect("localhost", $usuario, $password);
$con = mysql_select_db($dbname, $id);
mysql_query("SET NAMES utf8",$id);
return ($id);
}

Como o sistema não está orientado a objetos, não utilizei essa função, mas sabia que a linha 09 era a minha solução. No sistema, a conexão com o banco de dados está em um arquivo chamado conectadb.php, o qual está incluso no arquivo head.php que, por sua vez, está incluso na página principal do sistema. Sendo assim, teria apenas que adicionar a linha 09 no meu arquivo de conexão, ficando assim:

$host	= "localhost";
$usuario	= "user_banco_sistema";
$senha		= "aaabbb1112222";
$nome_banco	= "banco_sistema";
if (!($conexao = @mysql_connect("$host","$usuario","$senha")))
{
echo "<p align="center">Erro conectando ao MYSQL!</p>";
exit;
}
if (!($nome_banco=@mysql_select_db("$nome_banco",$conexao))) {
echo "<p align="center">Erro selecionando a base de dados<strong> $nome_banco </strong></p>";
exit;
}
mysql_query("SET NAMES utf8",$conexao);
?>

E…. EUREKAAAA!!!! Tudo certo com a codificação. Claro que voltei ao normal as configurações da tabela do banco de dados e também do firefox. Para quem quiser dar uma olhada, os blogs que encontrei a referência são estes:

>> Willian Vieira – http://willianvieira.wordpress.com/2008/09/18/codificao-utf-8-em-mysql-e-php-2/

>> Alberane Lúcio – http://alberane.wordpress.com/2008/02/14/problemas-com-uft-8-e-iso8859-1-em-phpmysql/

>> WeBr T.I. – http://weber.eti.br/2009/04/28/erro-mysql-codificacao-caracteres-banco/

Espero ter ajudado mais uma vez… Se gostaram do post, comentem.