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

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.

]]> http://blog.diovani.com/2010/05/17/youtube-sem-flash/feed/ 1 http://blog.diovani.com/2010/01/24/jquery-canvasmetter-plugin/ http://blog.diovani.com/2010/01/24/jquery-canvasmetter-plugin/#comments Sun, 24 Jan 2010 15:22:25 +0000 diovani http://blog.diovani.com/?p=324 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

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

O AcidTests trata-se de um projeto do webstandards.org para testar o comportamento e eficiência dos navegadores frente aos padrões web.

O primeiro Acid (Acid1) testava os navegadores quanto a apresentação e exibição de páginas HTML 4.0 e CSS 1, o Acid2, criado em 2005, queria fazer os navegadores “sorrirem” testando as capacidades deste de exibirem imagens PNG e CSS2.

Agora, o Acid3 vai além, exigindo dos navegadores renderização de imagens SVG animadas e Javascript.

Eis a lista de especificações testadas:

• DOM2 Core
• DOM2 Events
• DOM2 HTML
• DOM2 Range
• DOM2 Style (getComputedStyle, …)
• DOM2 Traversal (NodeIterator, TreeWalker)
• DOM2 Views (defaultView)
• ECMAScript
• HTML4 (<object>, <iframe>, …)
• HTTP (Content-Type, 404, …)
• Media Queries
• Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
• XHTML 1.0
• CSS2 (@font-face)
• CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…)
• CSS3 Color (rgba(), hsla(), …)
• CSS3 UI (’cursor’)
• data: URIs
• SVG (SVG Animation, SVG Fonts, …)

Segundo o desenvolvedor Ian Hickson, a internet não se resume mais a apenas designs HTML/CSS, assim é importante testar também as capacidades dos navegadores de DOM e Javascript.

O autor do Site DrunkenFist.Com fez uma série de teste e divulgou os resultados. Vou postá-los aqui tb:

• Camino 1.51 Mac OS 10.5 [49/100]
• Firefox 2 Mac OS 10.5 [50/100]
• Firefox 3 Mac OS 10.5 [53/100]
• Internet Explorer 6 Windows XP [11/100]
• Internet Explorer 7 Windows Vista [12/100]
• Internet Explorer 7 Windows XP [12/100]
• Firefox 2 Windows XP [50/100]
• Firefox 3 Windows XP [59/100]
• Safari 3 Mac OS 10.5 [39/100]
• Safari 3 Mac OS 10.5 Latest [87/100] (incrível!)
  
• Opera 9.24 Windows Vista [46/100]
• Konqueror built from SVN 2008.03.06 [63/100]
• IE8 Beta [17/100]
• Opera 9.5 [61/100]
• Firefox 3 Beta 4 on Windows XP [67/100]

Fontes: http://info.abril.com.br/blog/juliano/20080306_listar.shtml, http://www.drunkenfist.com/304/2008/03/04/acid3-test-released-
i-took-some-screen-captures-lots-of-fail/, http://www.webstandards.org/action/acid3/

Link com ajudaA ajuda de contexto vai aqui,
aparecendo somente quando o
usuário passa o mouse sobre o link

Existem várias bibliotecas JavaScript para utilizar este efeito, como a Overlib e também script.aculo.us, que tem um efeito parecido. Utilizando Js você tem efeitos mais interessantes, com a ajuda seguindo o mouse, etc, mas se precisar apenas de uma ajuda de contexto simples e leve, podemos fazê-lo apenas com CSS.

O conteito é bem simples…
Crie uma âncora <a>, com um span <span> dentro dela, que não é exibido (display:none), no estado Hover da âncora, o <span> terá ‘display:block’.

Como “um código vale mais que mil palavras”, aqui vai um exemplo:

/* Este é o estilo da âncora e span para o efeito */
 
a.help
{
    text-decoration:underline;
} 
 
a.help span
{
    position:absolute; /* para não alterar o
                         posicionamento da ancora */
    display:none;
} 
 
a.help:hover
{
    background-color:black; /* devido a um bug
                         no ie6 você deve alterar o
                         fundo (na verdade pode usar
                         a mesma cor, mas deve declará-la
                         aqui) do link ao passar o
                         mouse (???),
                         caso contrário o <span> não
                         aparecerá no ie6 */
} 
 
a.help:hover span
{
    display:block; /* por último, o <span>,
                        dentro do </span></span>,
                        fica com 'display:block' ao
                        passar do mouse */
 
     /* os demais estilos deste elemento não são
    necessários, apenas para melhorar o visual
    e você pode alterá-los a vontade*/
    margin-top: 0px;
    margin-left: 10px;
    border:1px solid white;
    background-color:#ffa303;
    color:white;
    text-decoration:none;
    font-size:12px;
}

Após definir o estilo, o código HTML para usá-lo é ainda mais simples:

<a href="#" class="help">
    Link com ajuda
    <span>
        A ajuda de contexto vai aqui,
 
        aparecendo somente quando o
 
        usuário passa o mouse sobre o link
    </span>
</a>