Zen-Coding – Um novo jeito de escrever HTML

Tags: , — May 27, 2010 @ 9:11 pm

Uma coisa que desenvolvedores web sabem, é que não há nada mais demorado e cansativo do que escrever HTML. Diferente de linguagens de programação, um código HTML (e também XML e seus derivados) é pouco intuitivo e muito repetitivo, e mesmo as melhores IDEs do mercado não ajudam muito.

Já que nenhum desenvolvedor web que se preze utiliza Dreamweaver ou outros editores WYSIWYG, devido aos códigos sujos e de difícil manutenção gerados, uma ótima solução é utilizar o Zen-Coding.

O Zen-Coding não se trata de uma nova IDE, mas sim de um plugin, ou melhor, uma coleção de scripts, disponível para uma grande quantidade de IDEs, incluindo Eclipse e NetBeans, que permite a digitação rápida de HTML, XML e XSL, por meio de abreviações, muito semelhantes a seletores CSS, o que torna a curva de aprendizagem realmente pequena.

Com o Zen-Coding você digita algo como:

div#page>div.logo+ul#navigation>li*5>a

E obtém:

<div id="page">
    <ul id="navigation">
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</div>

Para conhecer a sua sintaxe, visite a lista de seletores HTML do Zen-Coding.

Agora vamos a um breve tutorial para instalar e utilizar o Zen-Coding no Eclipse (o que inclui ZendStudio for Eclipse e Aptana Studio).

  1. Primeiramente, será necessário instalar o plugin Eclipse Monkey, que pode ser instalado pelo Update Manager, a partir do update site http://download.eclipse.org/technology/dash/update.
  2. Crie um projeto em sua worspace com o nome zencoding.
  3. Crie um diretório scripts em seu projeto recém criado.
  4. Baixe o pacote Zen Coding for Aptana da página de downloads do projeto e descompacte seu conteúdo no diretório scrips.

  5. Reinicie o Eclipse.

Agora você deve ter um menu scripts, com o sub-menu zencoding nele. Para transformar as abreviações em códigos HTML, basta utilizar a opção Expand Abbreviation após digitá-las.

Para cada opção no menu zencoding será exibido o respectivo atalho ao lado desta. Caso algum dos atalhos não esteja visível, provavelmente é porque o Eclipse já tem aquele atalho definido para outro comando. Para resolver isso há duas opções: Alterar o atalho do Eclipse (Window -> Preferences -> General -> Keys) ou alterar o atalho do Zen-Coding.

Para a segunda opção, localize o script da função que deseja alterar o atalho na pasta scripts que você criou e edite o atalho no comentário do script, na linha escrito * Key:.

Ex:

/*
 * Menu: Zen Coding &gt; Expand Abbreviation
 * Kudos: Sergey Chikuyonok (http://chikuyonok.ru)
 * License: EPL 1.0
 * Key: M3+E
 * DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript
 *
 * @include "/EclipseMonkey/scripts/monkey-doc.js"
 * @include "lib/core.js"
 * @include "settings.js"
 */

Após salvar, o novo atalho já estará disponível.

Fonte: http://code.google.com/p/zen-coding/wiki/AptanaHowToEn

Zend Studio para Eclipse

Tags: , , , — October 3, 2008 @ 4:41 pm

É isso mesmo, você não leu errado. A nova versão do Zend Studio, provavelmente a melhor IDE para PHP existente no mercado, é agora um plugin para o Eclipse.

Enquanto a Zend se prontifica a continuar dando suporte aos usuários do Zend 5.5, a versão 6 foi totalmente reescrita como um Plugin para o Eclipse, adicionando uma série de plugins existentes para desenvolvimento web e propondo-se a criar uma ferramenta IDE completa.

Zend Studio for Eclipse Splash ScreenNa página do Zend Studio, está disponível um comparativo de suas características com as do Eclipse PDT, onde destacam-se algumas características como um editor WYSIWYG para PHP/HTML, possibilidade de ver elmentos JavaScript dentro dos editores PHP e HTML, suporte ao PHPDocumentor e integração com Zend Framework e outros produtos da Zend.

Aproveitando-se das capacidades multiplataforma do Eclipse, o Zend Studio agora está disponível para MS Windows®, Mac OS X® e GNU/Linux. Tenho a dizer que a versão Linux está ótima (novamente, graças ao Eclipse) utilizando o Tollkit GTK2, o que é uma grande melhora ao antigo Zend Studio que era apenas passável para Linux. Infelizmente (e sabe-se lá porque) está disponível apenas para arquitetura x86, o que significa que usuários de Plataforma 64 bits devem continuar com Eclipse + PDT.

Sobre os Plugins… Dei uma rápida olhada nos plugins já instalado no Zend Studio for Eclipse e me deparei com vários nomes conhecidos, como o WTP (web tools plataform), DTP (data tools plataform), GEF (graphical editing framework), Subversive e até mesmo o PDT (PHP development tools). Isso significa que além de seus próprios plugins, a Zend está incluindo no “pacote” uma série de plugins Livres já conhecidos, e isso não é, de forma alguma, um ponto negativo, uma vez que eles estão dando valor e utilizando plugins estáveis e muito já usados por desenvolvedores PHP.

Zend Studio for Eclipse “about” Dialog

Como ponto negativo, a inclusão de uma série de plugins e, inclusive, conectores para diversas bases de dados, torna o instalador um pacote de mais de 320MB, e também o deixa um pouco mais lento que o Eclipse normalmente seria.

Obviamente, o Zend Studio continua sendo Pago (o que não é exatamente um ponto negativo, visto que paga-se pelo suporte e atualizações constantes). Uma versão de avaliação pode ser baixada, ficando disponível por 30 dias.

Resumindo, o Zend Studio for Eclipse torna-se uma ótima opção para desenvolvedores PHP que estejam dispostos a pagar certa quantia pelo software e pelo suporte da Zend, e também para aqueles que utilizam com frequência o Zend Framework e produtos como Zend Debugger e Zend Guard, beneficiando-se da integração da IDE com estes produtos. Quanto aos demais, seria melhor continuar com Eclipse + PDT, ou procurar uma das distribuições do Eclipse que ofereça o que deseja, pelo simples fato de não serem necessários todos os recursos que o Zend Studio for Eclipse oferece.

Cake Bake no Eclipse

Tags: , — August 12, 2008 @ 4:56 pm

O Eclipse é sem dúvida uma IDE completa e multiuso. Com um pouco de dedicação podemos adicionar plugins para qualquer funcionalidade que precisemos.

Nas próximas linhas vou mostrar como configurar de forma rápida e fácil o Cake Bake para ser utilizado a partir do Eclipse, agilizando muito os projetos de quem trabala com CakePHP.

Para quem não sabe, o Cake Bake é um script utilizado para criar automaticamente a estrutura básica das aplicações para o CakePHP, incluindo controllers com os métodos mais utilizados (index, view, add, edit, delete), models e configuração com a base de dados, e encontra-se no diretório cake/console (shell script cake, ou cake.bat para Win/DOS).

Para utilizá-lo a partir do Eclipse, vá em Run -> External Tool -> Open External Tool Dialog, dê dois cliques em Program e coloque em Location o caminho completo para o script executável cake. Coloque ${resource_loc} em Working Directory (esta variável corresponde a pasta ou arquivo selecionado no Navegador do Eclipse) e bake em Arguments:

eclipse_and_bake1.jpg

Após isto basta selecionar o seu projeto onde deseja executar o Cake Bake, eclicar em Run -> External Tool -> [nome que vc colocou], ou no botão External Tools na barra de ferramentas, e utilizar o Cake Bake normalmente pelo console do Eclipse.

eclipse_and_bake2.jpg

 

eclipse_and_bake3.jpg

Configurando Eclipse PDT + XDebug

Tags: , , — August 10, 2008 @ 3:20 pm

O XDebug é um alternativa livre e bem completa para depurar aplicações em PHP. Com ele é possível verificar em tempo de execução o valor de todas as variáveis durante erros, assim como em breakpoints pré-definidos.

Estarei demonstrando neste post como configurar o XDebug para ser utilizado em conjunto com o Eclipse PDT (former PHPIDE) no Debian testing (outras distribuições, e até mesmo Windows e Mac OS X  tem a mesma configuração, diferenciando-se apenas na instalação do XDebug e caminho do arquivo de configuração deste). O que deve salvar horas de depuração de seus aplicativos e extingir o uso das funções print_r() ou var_dump().

As versões mais recentes do Eclipse PDT já vem com suporte ao XDebug, como alternativa ao Zend Debugger, então, caso você já tenho o Eclipse PDT instalado em sua máquina, deve precisar, no máximo, atualizar a instalação com o update-manager. Para os demais, basta baixar da página de downloads do Eclipse PDT.

Mesmo para quem utilize Debian ou Ubuntu, recomendo baixar e instalar o Eclipse PDT manualmente pelo site, ao invés de utilizarem o gerenciador de pacotes (aka. aptitude ou apt-get), é apenas necessário ter o pacote sun-java5-bin instalado.

Para instalar o XDebug verifique os pacotes disponíveis para sua distribuição, ou faça o download dos binários (para Windows e Mac) do site. Para usuários do Debian ou Ubuntu basta instalar via apt:

# aptitude install php5-xdebug

Após concluída e instalação, edite o arquivo xdebug.ini (no Debian ele deve estar em /etc/php5/conf.d/xdebug.ini), mantenha a linha com a opção ‘zend_extension=’ e adicione as linhas abaixo e reinicie seu servidor web (apache, lighttpd, etc.):

xdebug.remote_enable=1
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"

Para saber detalhes sobre estar opções, ou outras disponíveis, veja a documentação do XDebug.

Já no Eclipse, vá em Window -> Preferences -> PHP -> Debug -> Installed Debuggers e verifique se o XDebug está configurado na porta correta (9000, como colocamos no xdebug.ini):

2008-08-10_144020.png

Depois vá em  Window -> Preferences -> PHP -> PHP Executables (mesma Janela) e edite/adicione o caminho correto para seu executável PHP, selecionando XDebug como PHP debugger:

2008-08-10_144336.png

Então vá em  Window -> Preferences -> PHP -> Debug (mesma janela) e selecione o XDebug como seu PHP debugger padrão e seus executável PHP. Também desmarque a opção Break at first line, pois esta poderá ser adicionada mais tarde.

2008-08-10_144004.png

Após definir as configurações gerais, feche a janela e vá em Run -> Open Debug Dialog e de dois cliques em PHP Web Page. Nesta janela basta configurar o XDebug como Server Debugger o servidor web (Apache, Lighttpd, etc.) onde será acessada a aplicação, em PHP Server, o arquivo que iniciará aplicação (geralmente algum index.php, obrigatoriamente dentro de um projeto previamente configurado), em file, e a url para este arquivo, é qual pode ser configurada automaticamente, ou definida manualmente. Note também a opção Break at First Line que pode ser definida para a aplicação ser debugada logo na primeira linha:

2008-08-10_144124.png

Também deve ser necessário definir o navegador onde as páginas serão exibidar em Window -> Preferences -> General -> Web Browser. Selecione User external Web browser e escolha o navegador de sua preferência (Iceweasel ou Firefox, no meu caso).

Perspectiva PHP Debug, exibindo variáveis atuais, com XDebugApós concluída a configuração, basta clicar no botão Debug da barra de ferramentas e a sessão será iniciada. Sempre que houver algum erro na aplicação, ou esta atingir um breakpoint definido por você, a perspectiva deverá mudar para a PHP Debug, pausando a aplicação, e exibindo todas as variáveis (inclusive parametros enviados por GET ou POST e variáveis de sessão) definidas atualmente.

Fonte: http://www.starbowconsulting.com/blog/tao/setting-eclipse-pdt-and-xdebug

Next Page >>>