Sexta-feira, Abril 29, 2005

Como ser um WebDesigner [no Linux]: Extensões para o Firefox

[ da série Como ser um WebDesigner no Linux ]

Existem ótimas - e eu diria até imprescindíveis - extensões para o Firefox para quem é WebDesigner. Como o Firefox é multi-plataforma, este artigo se aplica aos usuários de Windows e Mac também; mas meu enfoque é mostrar ainda que o Linux é uma excelente plataforma para Webdesigners.

WebDeveloper, o carro-chefe
Essa extensão é simplesmente fantástica! É aquela que todos concordam que é necessário ter. É uma barra de ferramentas com opções diversas voltadas para os desenvolvedores Web. São tantas opções que seria necessário um artigo só pra falar disso.
Eu destacaria a opção de edição de CSS na Sidebar. É fantástico: você abre o CSS da página na Sidebar e edita em real-time; as modificações vão sendo aplicadas na hora.
Há trocentas outras opções, como validação do código, desabilitar recursos como JavaScript ou Java, informações sobre a página, recursos de manipulação de formulários e imagens e etc.
http://chrispederick.com/work/firefox/webdeveloper/

ColorZilla, ajudando nas cores
Também considero a ColorZilla indispensável. Ela permite você pegar a cor de qualquer coisa numa página, dar zoom na página inteira, tem paleta de cores, um inspetor DOM voltado pra cores e algumas opçõezinhas.
http://www.iosart.com/firefox/colorzilla/

Aardvak, uma novidade interessante
Esse extensão de nome difícil também é bem nova mas bastante útil. Permite selecionar elementos ao apontá-los, mostrando a tag, o id e o class. Selecionado, esse elemento pode ser retirado, pintado; ainda é possível selecionar o elemento que o contém, ver seu código-fonte, e muitas outras coisas. Os planos para as próximas versões prometem muitas funcionalidades bem interessantes.
Uma coisa legal é que no site deles, você pode rodar a extensão direto antes de instalá-la, através de uma demonstração em JavaScript. Vale a pena uma conferida pra entender dir
http://karmatics.com/aardvark/

MeasureIt para medir qualquer coisa
Uma extensãozinha nova e simples mas bem legal: disponibiliza uma régua com a qual você pode medir qualquer coisa no navegador. É bem útil pra ajudar a posicionar as coisas no seu Site quando elas mão estão encaixando.
http://www.kevinfreitas.net/extensions/measureit/

Venkman, Javascript Debugger
Esse debugger existe há muito tempo, antes do Firefox. É extremamente completo e utilíssimo pra quem desenvolve aplicações complexas com JavaScript. Só um porém: ela é bastante pesada, motivo pelo qual eu não a uso e não sei muitos detalhes :-P
http://www.hacksrus.com/~ginda/venkman/

Javascript Console
Não é uma extensão, já vem com o Firefox, só tenha o cuidado de instalar junto. Mostra os erros de JavaScript de forma bastante detalhada, informando com exatidão qual é o erro e até a linha onde ela está. Pra quem tentava desenvolver no IE, é um grande avanço frente àqueles erros bizarros, incompreensíveis e inexatos.

DOM Inspector
Também faz parte do Firefox. Exibe toda a árvore DOM do documento, com os valores dos atributos e tudo mais. Você pode inspecionar cada elemento daquele momento; ou seja, se você usa um JavaScript que altera a sua página, essas alterações estão no DOM Inspector (diferente do "Ver código-fonte" que não exibe essas modificações).

Atualização 30/04:
Não sei como fui me esquecer do JavaScript Shell (só fui lembrar dele quando fui usá-lo hoje). Na verdade nem é uma extensão, é um bookmarklet. Mas é absolutamente fantástico. Abre um shell onde você pode fazer qualquer coisa em JavaScript praquela página. O shell é tão completo que tem até auto-completar com a tecla tab!
Se você faz qualquer coisa com JavaScript, é um bookmarklet essencial!

Terça-feira, Abril 26, 2005

IEs4Linux - Instalação AUTOMÁTICA dos Internet Explorers no Linux

Ok, eu realmente me empolguei! O sucesso (pra mim) do artigo sobre como instalar os Internet Explorer 6, 5.5 e 5 no Linux foi tanto que criei um projeto chamado IEs4Linux!

É um programinha que faz tudo aquilo automaticamente e você precisa de apenas 2 cliques para instalar os 3 IEs!

A primeira versão já está disponível aqui e, se você puder me ajudar a testá-la, serei eternamente grato. Quero aperfeiçoar esse negócio pra fazê-lo funcionar no maior número de versões do Wine possíveis e sem a menor interferência do usuário.

Por enquanto, só testei na versão 20041019 do Wine no Gentoo. Teste e me conte os resultados!

Atualização: o programa foi atualizado! Contém melhorias e tem suporte para [possivelmente] mais versões do Wine. Foi testado com sucesso no Wine 20050111 no Gentoo e no Wine 20050301 no Kurumin (baseado no Debian).
Se você testou ou vai testar o programa, por favor me conte os resultados (coloque um comentário aqui, mande um e-mail, icq, msn etc).

There is an English version of IEs4Linux too.

Quarta-feira, Abril 20, 2005

Como ser um WebDesigner no Linux: Editores HTML

[ da série Como ser um WebDesigner no Linux ]

Resolvido o problema dos IEs no Linux, um WebDesigner recém chegado do Windows pergunta: e o Dreamweaver? como sobreviver no Linux sem ele?

Antes de responder a isso (e adianto que há ótimas opções para Linux), já vou dizendo: eu não gosto de Dreamweavers da vida que geram código pra mim. Vejo o WebDesign como uma arte e um belo código só sai das mãos de um bom WebDesigner. Gosto de código limpo, bem estruturado, semântico e legível; logo, gosto de escrevê-lo.

Mas, como muita gente curte um bom editor WYSIWYG, vou apresentar algumas boas opções:
  • NVU - É o editor do Mozilla, baseado no Gecko. Está quase na versão 1.0 final e é muito bom. É extremamente completo, com FTP, editor CSS e até Tags Technorati. A grande vantagem é rodar em cima do Gecko, o motor de renderização do Firefox.

  • Quanta - É o editor do KDE e, portanto, usa o motor KHTML (do Konqueror e do Safari da Apple). Também é muito bom.

  • Amaya - É o editor "oficial" do W3C. Pessoalmente não gosto dele, mas tem suas vantagens, como implementar extremamente à risca os padrões. [Eu tive dificuldades em compilá-lo; só consegui instalar pelo rpm]
Baixe os 3 e teste-os! É a melhor forma de escolher e ver qual se encaixa melhor no seu gosto e nas suas necessidades. Eu pessoalmente ficaria com o NVU; ele é excelente e usa o Gecko o que é uma tremenda vantagem.

Editores sem WYSIWYG
Para os que curtem o bom e velho HTML sem WYSIWYG como eu, boas opções são:
Minha escolha pessoal é o Eclipse com alguns plugins; em especial, o phpeclipse, pois programo muitos sites em PHP. Reforço o link do blog do Diego que conta como ele escolheu o Eclipse e tem muitas informações pra quem quiser adotar essa forma de desenvolvimento.

Flash
E, aproveitando o ensejo, podemos falar da outra pergunta muito comentada: e Flash?

Bom, isso já é mais complicado. Ainda não há um bom programa para animações Flash no Linux. Muitos estão em desenvolvimento, como o Flash4Linux - F4L (http://f4l.sf.net/), mas nada chega aos pés da suíte de desenvolvimento que é o Flash MX 2004 com seu ActionScript 2.0.

Devo dizer que nada disso é problema pra mim. Eu, como já disse, adoro HTML e códigos elegantes, limpos e semânticos. Odeio sites em Flash. Acho que Flash deve ser usado para Aplicações como o mal-sucedido Applet Java. Nada de Sites. Portanto, tecnicamente, um WebDesigner não deve usar Flash na minha concepção; apenas programadores dessas Aplicaçoezinhas.

Mas, devo dizer que o Macromedia Flash roda no Linux usando o CodeWeaver. Aliás, o Dreamweaver também.

------

PS: Se você está curioso como eu estava, o Dreamweaver MX 2004 usa o engine do Opera; portanto, temos Gecko no NVU, KHTML no Quanta e Opera no Dreamweaver. O Trident (motor do IE) ficou de fora; deve ser usado apenas no Visual Studio :-P

Sucesso e continuação

Estou muito feliz com a repercussão do meu artigo sobre instalação dos IEs no Linux. Os acessos no blog quintuplicaram por causa dele!

Fui linkado em diversos lugares. No NoticiasLinux, no Br-Linux, no VivaLinux (argentino), no LinuxHispano e em mais alguns sites e blogs. Por causa desse relativo sucesso (novidade pra mim), traduzi o artigo para o inglês, já que estava sendo linkado de sites estrangeiros. E agora que o Google achou o artigo em inglês, muita gente tem chegado.

Se você leu o artigo e fez alguma das instalações com sucesso, me conte! E, se teve algum problema, também pode entrar em contato comigo e eu posso tentar te ajudar.

Na série sobre WebDesign no Linux, há um artigo sobre Navegadores; quais você deve instalar e porque o Linux é a melhor plataforma para testar Sites. Os próximos artigos serão: um sobre Editores HTML e outro sobre ferramentas de desenho.

E aproveito pra falar pro pessoal que tem chegado aqui pela primeira vez que, se gostarem do blog, podem assinar o feed xml (atom)! Além disso, tenho um linkblog no del.icio.us.

Como ser um WebDesigner no Linux: Navegadores

[ da série Como ser um WebDesigner no Linux ]

Um ponto fundamental para os WebDesigners é testar seu Site nos mais variados navegadores. No Linux, isso é muito mais fácil que no Windows.

Hoje, pode-se dizer que você cobrirá todo o mercado de navegadores se levar em conta: Gecko (Firefox, Mozilla), KHTML (Konqueror, Safari/Mac, OmniWeb/Mac) , Opera, Internet Explorer (Win/5+, Mac/5+) e navegadores modo texto (lynx, links); a navegação por outros dispositivos (celulares, PDAs) geralmente implica num navegador (X)HTML, portanto, um navegador modo texto te dará uma boa impressão de como eles ficarão nesses dispositivos [*].

No Linux, você pode instalar um browser Gecko, um KHTML, o Opera, os 3 IEs para Windows e o lynx/links. E pode rodá-los todos simultaneamente para testar seus Sites! No Windows, você não rodaria um KHTML e ainda teria muita dificuldade em rodar 3 IEs.
Ou seja, você pode testar seu Site no Linux usando os navegadores de 99% do mundo!! [**]

Navegadores Gecko, você tem o Firefox, o Mozillão, o Netscape, o Galeon, o Epiphany, o Kazehakase e o SkipStone.
Para KHTML, temos o Konqueror do KDE.
Os IEs 6, 5.5 e 5 você aprende a instalar no Linux através desse outro artigo da série.
Para o Opera, recomendo ter duas versões: a 7.0 e a novíssima 8.0.
E os navegadores modo texto mais usados: lynx, links, links2 e elinks.

Se você for bem chato e quiser o máximo de compatibilidade, rode algumas versões do Gecko. Em especial, algum Netscape 4, e algum Firefox (e talvez uma versão do Mozilla anterior à 1.0 ou o Netscape 6). Você pode ver também essa lista de browsers, com comentários sobre a atividade de cada um ainda hoje. E não deixe de visitar o Arquivo de Browsers do Evolt; lá você pode encontrar versões antigas de praticamente qualquer browser que existe.

Ah, se você quiser ser bastante chato, pode testar também seu site no Amaya, que é o Navegador e Editor HTML do W3C. Mas ninguém usa isso pra navegar, garanto... ;-)

-----

[*] Há navegadores mais espertos rodando nos bolsos por aí. O Opera roda no PocketPC e o Firefox possui uma versão em desenvolvimento para esse fim, o Minimo. Mas ambos os navegadores no desktop possuem possuem visualizações de como funcionariam nesses dispositivos.

[**] A única lacuna que fica são os pouquíssimo usuários do IE no Mac. Infelizmente, o IE no Mac roda um motor que difere em muitas coisas do IE do Windows. Portanto, para testar, só usando um Mac mesmo. Mas fique tranquilo, muito pouca gente usa o IE no Mac. Os browsers mais usados no Mac hoje são Safari (KHTML), Firefox (Gecko), Opera e Camino (Gecko).

E, por falar em poquíssimos, podemos lembrar dos raríssimos IE 4 e IE 3. Se procurar muito, talvez chegue a dez pessoas no mundo usando-os ainda; mas tem gente que usa...

[***] Curioso pra saber o que eu tenho aqui na minha máquina? Bom, hoje, tenho:
Firefox 1.0.3, Mozilla, Konqueror, Opera 7.54, Opera 8, Netscape 4.8, IE 6, IE5.5, IE 5, lynx, links, links2, elinks

Domingo, Abril 10, 2005

Como ser um WebDesigner no Linux: Instalando os Internet Explorer 6, 5.5 e 5

english version

[ da série Como ser um WebDesigner no Linux ]

Um bom WebDesigner, além de programar dentro dos padrões, não pode estar alheio aos usuários que infelizmente estão contaminados com o IE. É preciso fazer Sites que, além de respeitarem os padrões, sejam compatíveis com o IE 5+ (no mínimo).

Isso costuma ser um grande problema aos WebDesigners que trabalham com o Linux. Porém, é possível ter o Internet Explorer rodando perfeitamente no Linux com o auxílio do Wine. Este artigo apresenta o IEs4Linux, um projeto pessoal meu que instala as 3 versões principais do IE (5, 5.5 e 6) no Linux automaticamente.

É muito simples: basta abrir o Site do Projeto e baixar o arquivo. É um simples Bash Script. Execute-o , escolha o tipo de instalação, dê 2 cliques, espere um pouco e pronto; os 3 IEs estão instalados e funcionando!

Depois, por favor, venha aqui e coloque um comentário me avisando se funcionou pra você e colocando sua versão do Wine e sua distro.

--------------------

Atualizado em 3 de maio de 2005
O original deste post mostrava uma passo-a-passo de como instalar manualmente os IEs. Esse post deu origem ao IEs4Linux e portanto não há mais necessidade de fazer nada na mão. Mas se, mesmo assim, você quiser ver, o passo-a-passo está aqui em inglês.

Sábado, Abril 09, 2005

A volta do sumiço repentino

Pois é, sumi. Várias coisas aconteceram e sumi um tempão do blog. Mas, calma, estou de volta!! :-P

Volto cumprindo uma dívida milenar (desculpem pela imensa demora): fiz o tutorial de como rodar o Internet Explorer nas versões 6, 5.5 e 5 simultanemente no Linux via Wine. É o tutorial perfeito pra os WebDesigners que estavam querendo mudar de vez para Linux.

Aliás, estou preparando uma série de posts sobre Como ser um WebDesigner no Linux.O primeiro, é este dos IEs. Os outros vêm nos próximos dias.

-----
Novas do Blog Cultural: