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/04/14/novo-arquivo-de-snapshots-do-debian/ http://blog.diovani.com/2010/04/14/novo-arquivo-de-snapshots-do-debian/#comments Thu, 15 Apr 2010 01:22:41 +0000 diovani http://blog.diovani.com/?p=363 Novidade para usuários do Debian GNU/Linux e administradores de servidores. Agora é possível instalar facilmente pacotes de versões antigas do Debian GNU/Linux com uso do apt-get pelo arquivo de snapshots do Debian.

http://snapshot.debian.org/

Lançado na última Segunda-feira, dia 12, o serviço é uma “máquina do tempo” que permite o acesso a pacotes e códigos fonte por versões ou datas, e é composto por pacotes antigos e atuais do Debian.

Praticamente todos (alguns pacotes foram removidos devido a licenças de software) os pacotes, desde Março de 2005, estão disponíveis, incluindo alguns repositórios adicionais como debian-volatile, debian-ports e backports.org, contanto com cerca de 6,5 terabytes, que devem aumentar constantemente.

O serviço é uma ótima ferramenta, especialmente para desenvolvedores resolver problemas de regressão de pacotes. Mas também para usuários que necessitem de pacotes em alguma versão anterior para que certa aplicação funcione.

A grande facilidade do arquivo é que qualquer pacote pode ser instalado com o apt-get ou aptitude normalmente, bastando adicionar a respectiva linha em /etc/apt/sources.list.

Para saber que linha adicionar, primeiramente navegue até umas das seguintes categorias:

• backports.org
• debian
• debian-archive
• debian-ports
• debian-security
• debian-volatile

Após acessar uma das categorias, selecione o ano, mês e finalmente, dia e hora do snapshot. Esta url completa é a url a ser adicionada em /etc/apt/sources.list, logo após a palavra-chave deb e seguida da versão e sessão desejadas. Ou seja, cada uma destas urls corresponde a uma cópia completa de um repositório do Debian no devido momento, e pode ser usada como tal.

Segue um exemplo…

caminho seguido: debian -> 2007: 06 -> 2007-06-21 00:00:00
url resultante:  http://snapshot.debian.org/archive/debian/20070621T000000Z/

linha do sources.list:
deb http://snapshot.debian.org/archive/debian/20070621T000000Z/ stable/ main

Deste modo, fica extremamente fácil instalar pacotes de qualquer versão do Debian.

Fonte: http://www.debian.org/News/2010/20100412.en.html

Usuários da internet, como um todo, podem ser divididos em duas categorias distintas: um é o usuário que usufrui diariamente de serviços, mídia digital e aplicativos distribuidos gratuitamente pela internet e o outro é aquele que cria e publica estes serviços, mídia e aplicativos.

Segundo Sunde, o problema está quando o primeiro usuário deseja, de algum modo, recompensar o segundo. Hoje, não existe uma maneira eficaz de garantir que os esforços de quem publica algo, sejam convertidos em dinheiro a partir daqueles que usufruem deste trabalho. Uma opção seriam os métodos tradicionais de doações (transferências online, PayPal, PagSeguro…), estes, contudo, são pouco práticos ou flexíveis.

O Flattr propõe resolver este problema de uma maneira simples e transparente.

Os interessados, devem pagar, mensalmente, uma quantia fixa, que será distribuída posteriormente. A partir daí, seu funcionamento se assemelha muito ao Digg, ou Tweetmeme. Os criadores de conteúdo incluem um botão do Flattr em seu website, e quando um usuário clica neste botão, uma parte de sua quantia é destinada ao dono daquele site.

As partes são divididas igualmente para cada criador que o usuário decide recompensar. Ou seja, se o usuário clicou em 10 ícones do Flattr em um mês, um décimo de sua quantia mensal é destinada a estes criadores. Assim, o usuário terá certeza de que seu investimento será distribuído para aqueles que ele deseja.

Como o projeto ainda está em fase beta, estão sendo distribuídos alguns convites para usuários dispostos a testar o sistema. Quem tiver interesse, basta cadastrar seu e-mail no website Flattr.com, o qual inclui um vídeo explicativo do mecanismo do sistema.

A pouco tempo o Flattr fez seu primeiro cálculo dos pagamentos. Detalhes podem ser vistos no blog do projeto (em inglês).

[updated] novo logo.

O resultado pode ser visto no painel lateral do blog, no Widget Share, onde coloquei botões para compartilhar no Digg, Tweememe e ainda um botão de Follow para o novíssimo Twitter do blog. Ainda falta o botão para o Delicious, mas este fica para mais tarde.

Para quem quiser fazer o mesmo, basta adicionar fragmentos HTML e JavaScript no seu tema do WP, ou dentro de um Text Widget, seguindo os tutoriais a seguir. O máximo que precisa ser configurado é o nome de usuário do twitter.

Botão Digg: http://about.digg.com/button
Botão Retweet: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/
Botão Follow: http://help.tweetmeme.com/2010/02/23/follow-button/

Como comentei acima, criei também um twitter para o blog, @SamuraiDio, e adicionei o plugin WP to Twitter. Agora cada novo post vai também aparecer no twitter, facilitando para quem quiser “seguir” o blog mas não costuma usar feeds.

[updated]

Por motivos de performance (criados com JavaScript os botões demoram alguns segundos a mais para serem exibidos) procurei por uma solução em PHP, e encontrei combinando os plugins Digg Digg e PHP Code Widget.

O primeiro é um plugin que adiciona botões para diversos serviços de compartilhamento, e o segundo é um Widget identico ao Text Widget do WP, mas que aceita também códigos PHP.

Para adicionar os botões no Widget, e não nos posts, eu desabilitei as exibições padrão do Digg Digg, e criei um PHP Code Widget com o seguinte código fonte:

<center><div id="dd_before" style="height:80px; width:190px;"><ul>
<li class="li_horizontal">
<?php digg_digg_generate('Normal'); ?>
</li>
<li class="li_horizontal">
<?php digg_digg_reddit_generate('Normal'); ?>
</li>
<li class="li_horizontal">
<?php digg_digg_twitter_generate('Normal','SamuraiDio'); ?>
</li>
</ul></div></center>

Os métodos digg_digg_*_generate() são fornecidos pelo plugin Digg Digg, e podem ser usados também em qualquer lugar do template.

Também desisti de usar o botão para o Delicious, e adicionei um para o Reddit.

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

Como comemoração pelo dia de lançamento, o time do jQuery colocou no ar um hot-site, 14 dias de jQuery, que divulgará a cada dia, uma das novas melhorias da versão 1.4, e ainda terá promoções para os desenvolvedores que usam e apoiam a biblioteca. Visite o site http://jquery14.com/ para maiores informações. O download da nova versão pode ser feito no site oficial: http://jquery.com.

Não vou me estender muito neste post, visto que estou alguns dias atrasado, e outros blogueiros já o fizeram. Então vou apenas adicionar alguns links blogs de alguns amigos que falaram sobre o lançamento. Não deixem de ler os posts, e baixarem a nova versão.

Links:

http://ruancarlos.com.br/Blog/jquery-1-4-e-lancado/

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

Qualquer designer CSS que se preze conhece a propriedades de numeração das listas (tags <li>), poucos mas sabem que os mesmos tipos de numerações podem ser adicionadas a qualquer conjunto de elementos, inclusive adicionando estilos personalizados aos contadores.

Veja o exemplo a seguir:

A lista acima, foi criada utilizando apenas elementos div, e os seguintes estilos:

div.list {
    counter-reset: my-list;     /* inicializa o contador */
}
div.list div {
    counter-increment: my-list; /* incrementa */
}
div.list div:before {
    content: counter(my-list) ". "; /* imprime */
}

A propriedade counter-reset inicializa a contagem com o identificador my-list a cada vez que um elemento <div> com a classe list é exibido. Já a propriedade counter-increment, incrementa este contador a cada elemento <div> “filho” do primeiro.

A partir daí, podemos utilizar os pseudo-elements :before, ou :after, para adicionar o valor do contador na propriedade content, utilizando a função counter(). A propriedade content, pode também receber qualquer string adicional, permitindo o uso de separadores diversos do contador para o conteúdo do elemento.

O fragmento HTML utilizado no exemplo acima está a seguir:

<div class="list">
    <div>foo bar</div>
    <div>foo bar</div>
    <div>foo bar</div>
</div>

As propriedades counter-reset e counter-increment aceitam também um segundo valor, numérico, usado, respectivamente, para definir o início da contagem (padrão 0) e o valor de incremento (padrão 1).

Veja o mesmo exemplo, iniciando o contador com -4, com incremento de 2:

div.list {
    counter-reset: my-list -4;  /* inicializa o contador */
}
div.list div {
    counter-increment: my-list 2;   /* incrementa */
}

A função counter() também aceita um segundo parâmetro, definindo o tipo de contador utilizado. Todos os tipos usados na propriedade list-style-type dos elementos <ul>, <ol> e <li> são suportados.

Para finalizar, vamos alterar os estilos e separadores dos nossos contadores, utilizando também um tipo diferente:

div.list div:before {
    content: "[" counter(my-list, lower-alpha) "]";
    font-family: monospace;
    padding: 0 10px 0 0;
    font-weight: bold;
    color: red;
}

…e o resultado:

Embora eu tenha utilizados elementos <div> nos meus exemplos, contadores podem ser adicionados a qualquer lista de elementos, incluindo as linhas ou colunas de uma tabela, por exemplo.

Todas as propriedades acima fazem parte das recomendações da W3C para CSS nível 2, que podem ser encontradas em http://www.w3.org/TR/CSS2/generate.html, e são suportadas pelos navegadores Firefox 3.0, MSIE 8, Google Chrome 2.0, Safari 3.0 e Opera 9.0, ou superiores.

Fonte: http://www.w3.org/TR/CSS2/generate.html

A cerca de dois anos, o E17 podia ser instalado no Debian através de repositórios não-oficiais, porém estes repositórios foram descontinuados, permitindo aos usuários obterem e instalarem o Desktop Shell apenas via svn (como eu tenho feito desde então) ou pelos snapshots disponibilizados periodicamente.  Porém, felizmente para os usuários do Debian e do E17, desde Julho, o E17 está oficialmente disponível entre os pacotes do Debian Sid (http://packages.debian.org/sid/e17), podendo ser instalado facilmente pelo aptitude.

Para tanto, basta que você tenha os repositórios do Debian Sid em seu /etc/apt/sources.list:

deb http://ftp.debian.org/debian/ unstable main

…e instalar, utilizando os comandos:

# aptitude update && aptitude install e17

:D

Trata-se de um ponto de vista bem-humorado, de um usuário GNU/Linux ao tentar migrar para windows…

“Eu compreendo o indivíduo que declarou ter problemas em passar do Windows para o Linux. Senti o mesmo ao experimentar o Windows. Decidi experimentá-lo, depois de alguns amigos que o usam a toda a hora me dizerem que era ótimo.

Fui até ao site da Microsoft para baixá-lo mas não estava lá disponível. Fiquei frustrado porque não consegui descobrir como se baixava o mesmo. Por fim tive que perguntar a um amigo e ele disse-me que tinha de o comprar.

De carro, fui até à Staples e pedi a um dos vendedores uma cópia do Windows. Ele perguntou-me qual, eu disse-lhe: “Quero a mais completa, por favor” e ele respondeu: “São $599, por favor…”. Soltei um palavrão e voltei para casa de mãos abanando.

Um dos meus amigos deu-me uma cópia do Windows XP mas disse-me para não dizer nada a ninguém. Achei estranho porque faço sempre cópias do Linux para qualquer pessoa que me peça e digo sempre para passar essa cópia a qualquer outra pessoa que esteja interessada, uma vez que já precisem dela. De qualquer forma coloquei o CD no leitor e esperei que iniciasse o sistema do “Live CD”. Não funcionou. A única coisa que fazia era perguntar-me se o queria instalar. Telefonei para um dos meus amigos, para saber se estava a fazer alguma asneira, mas ele disse-me: “O XP não roda o sistema diretamente do CD”.

Decidi, então, instalá-lo. Segui as instruções que apareciam na tela mas comecei a ficar nervoso porque não perguntou nada sobre os outros sistemas operacionais. Quando instalei o Linux, ele reconheceu que tinha outros sistemas operacionais na máquina e perguntou-me se queria criar uma nova partição e instalar o Linux lá. Voltei a ligar para o meu amigo e ele disse-me que o Windows elimina qualquer outro sistema operacional que encontra, ao instalar-se.

Fiz uma cópia de segurança das minhas coisas e joguei-me de cabeça na instalação. A instalação foi bastante simples, tirando a parte em que tive que escrever umas letras e um código. Tive de ligar outra vez para o meu amigo mas ele ficou chateado e veio escrever ele próprio o código. Voltou a dizer-me para não dizer nada a ninguém (!!!).Depois de reiniciar o computador, dei corrida de olhos pelo sistema.

Fiquei chocado quando me deixou mudar as configurações do sistema sem pedir o acesso de root. O meu amigo começou a ficar um bocado irritado quando liguei outra vez para ele, mas acabou por aparecer em minha casa. Disse-me que o acesso de root era dado logo na inicialização. Tratei logo de fazer outra conta de usuário normal e passei a usá-la.
Comecei a ficar confuso quando tentei fazer mudanças e o sistema, ao invés de pedir acesso de root, disse-me que tinha que fechar a sessão
de utilizador normal e abrir uma sessão como administrador. Comecei, então, a perceber porque é que tantas pessoas entram sempre como root e tive um arrepio na espinha.

Bom, mas já era hora de trabalhar. Fui ao menu “Iniciar -> Programas”, para abrir uma planilha que eu precisava terminar, mas não consegui encontrar a aplicação de planilhas. O meu amigo
disse-me que o Windows não trazia nenhuma aplicação dessas e que eu teria que a baixar da Internet. “Oh…”, pensei, “uma distribuição
básica”. Fui ao “Adicionar/Remover Programas” do painel de controle
(tal como no Linux), mas não havia lá programas para adicionar. Apenas deixava remover os programas. Não consegui encontrar o botão para adicionar aplicações. O meu amigo disse-me que eu tinha que procurar as aplicações por minha conta. Depois de muita pesquisa no Google, lá encontrei, descarreguei e instalei o OpenOffice.org.

Para dizer a verdade, diverti-me à brava com o Windows. Não entendi muito da terminologia… porque é que há um drive A, depois um C… onde é que está o drive B? Achei a distribuição demasiado básica, não
inclui nenhuma aplicação que seja verdadeiramente de produtividade e torna-se muito confuso procurá-la. O meu amigo disse-me que eu precisava de software anti-vírus e anti-spyware, mas o Windows não
vinha com nada disso.

Achei-o difícil, confuso e demasiado trabalhoso para mim. Pode ser bom para uma pessoa que seja do tipo técnico, como o meu amigo, mas eu fico-me pelo Linux, obrigado.”