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

Youtube sem Flash

Tags: , , — May 17, 2010 @ 1:35 pm

Já pensou em poder assistir aos vídeos do Youtube sem precisar instalar um Flash Player? Pois é, até pouco tempo atrás isto era impossível, mas graças a tag HTML5 <video>, agora já podemos assistir a vídeos no Youtube sem Flash.

Como o HTML5 ainda é um Draft, e o uso da tag <video> ainda não é tão comum, a opção de assistir a vídeos sem Flash ainda está em fase beta, precisa ser habilitada, e por enquanto só funciona nos navegadores Apple Safari e Google Chrome.

Para habilitá-la, basta acessar http://youtube.com/html5 e clicar no link “Entrar no HTML Beta” abaixo da página.

Após habilitar o modo HTML5 Beta, os vídeos visualizados passam a utilizar a tag <video> do navegador para serem exibidos, como na imagem abaixo:

É possível notarmos pequenas diferenças na interface, como a inscrição html5 durante o loading, e alguns controles diferenciados. Estas diferenças devem variar dependo do navegador utilizado.

Como ainda é Beta, o modo tem algumas restrições. Não é possível assistir vídeos em tela inteira, e aqueles que contém anúncios ainda são exibidos no Flash Player. Além disso, como comentei anteriormente, apenas o Safari e Chrome podem visualizar os vídeos sem Flash.

Esta limitação de compatibilidade deve-se ao fato do uso da tag <video> não definir o codec que deve ser utilizado, o que deve ficar a cargo dos navegadores. Enquanto o Firefox e Opera suporte o formato Ogg Theora, o Safari e Google Chrome (ambos com a engine webkit) suportam H264, e como o youtube já disponibiliza seus vídeos também em h264 (principalmente para visualização em smartphones), estes últimos são, atualmente, os únicos navegadores suportados.

Embora a opção de assistir vídeos no youtube com a tag <video> ainda seja prematura, não deixa de ser uma boa opção para conhecer o poder do HTML5, e até mesmo pode servir como alternativa para quando instalar um Flash Player não é possível. Em último caso, vale testar pela curiosidade.