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 > 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

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.

Há alguns dias criei um plugin para jQuery, para desenhar medidores no estilo barômetros ou marcadores de velocidade, utilizando o elemento <canvas>.

Como um plugin requer uma atenção especial e atualizações periódicas, dediquei para ele uma página deste blog. E também o wave jQuery.canvasmetter, para o pessoal poder participar. Mais informações podem ser encontrados nestes.

Links:
página jQuery.canvasmetter
página de download do plugin jQuery.canvasmetter
wave jQuery.canvasmetter

A web e seus navegadores já evoluíram muito desde sua concepção em tratando-se de recursos mas ainda há gente que acredita que sobrecarregar páginas com imagens *.GIF e Flash são os únicos métodos de exibir animações na web.

Eu, particularmente, desgosto muito de GIFs animados, acho algo irritante e ultrapassado, e Flash, apesar de seus excelentes recursos, tem três pontos negativos: os arquivos costumam ser demasiado grandes, é necessário um plugin proprietário para exibí-los e os usuários não tem acesso aos fontes.

Mas diferente do que muitos acham, a linguagem HTML também evoluiu muito e, sendo integrada com outras linguagens como XML e Javascript, dispõe de outras alternativas.

Imagens SVG são hoje um padrão que deve ser exibido por qualquer navegador web recente, e estas também aceitam animações. Como SVGs são basicamente arquivos XML, elas tendem a ser, desde que usem traços simples, extremamente menores que imagens binárias, e suas animações são implementadas alterando as coordenadas das imagens, e não duplicando-as, como acontece com GIFs.

E existe também o elemento <canvas> (que é onde quero chegar), que pode exibir gráficos criados em tempo real e até mesmo animações interativas no navegador. Atualmente compatível com Firefox 1.5+ e Safari.

<canvas> é um novo elemento HTML especificado na documentação do que deverá ser o HTML 5, e pode ser usado para desenhar imagens usando linguagens de scripts (geralmente Javascript). Podendo criar composições de fotos e animações simples e até interativas. Veja um exemplo simples a seguir e seu respectivo código:

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Desenvolvido originalmente pela Apple para seu Dashboard (os widgets de desktop do Mac OS X) e posteriormente implementado no Safari. Navegadores baseados na engine Gecko 1.8 e posterior também suportam o elemento <canvas>.

Executar Javascript constantemente em uma página deixa a navegação extremamente lenta, estão, o simples relógio exibido na imagem a direita prejudica bastante a navegação, quando em execução. Assim vale lembrar que apesar da praticidade, utilizar o elemento <canvas> pode não ser a melhor opção em alguns casos, mas de qualquer modo é impressionante o que pode-se fazer com ele. Veja alguns exemplos nos links abaixo:

Um labirinto interativo feito em <canvas>

Um efeito de reflexão tipo água de imagens

Um editor de imagens como o Ms Paint

O melhor. Um clone do jogo Mario, do Nintendinho, que um amigo divulgou aqui, feito inteiramente com <canvas> (ele também tem uma versão usando DIVs, para funcionar no IE), e sem nenhuma imagem.

Vale lembrar que estes demos só funcionam no Firefox e Safari.

Fonte: MDC: Canvas Tutorial