Mozilla Ubiquity - Faça os seus próprios Mashups
Novo projeto da Mozilla anunciado esta semana, o Ubiquity parece ser uma ótima idéia. Basicamente, ele permitirá que o usuário automatize algumas tarefas no browser, usando linguagens de programação. e compartilhe-as com outras pessoas.
Algo como as extensões do Firefox, porém com uma liberdade muito maior, podendo até mesmo criar Mashups integrando o conteúdo de sites diferentes. uma idéia interessante.
Via Google Discovery
Converta vídeos do YouTube em arquivos MP3
Uma dica simples, pra pegar aquele clipe bacana do YouTube e transformá-lo num MP3 sem ter que se aventurar nos torrents da vida. Pegue o endereço do vídeo (ex. http://www.youtube.com/watch?v=eBGIQ7ZuuiU), cole no formulário abaixo e dê um “Download”.
Importante: Se você acessa a versão brasileira do YouTube troque o http://br.youtube no início do link por http://www.youtube.
O formulário usa o engine do site Vid to MP3, que, mesmo de não sendo tão bonito, funciona bem.
CSS Hacks - IE6, IE7, Firefox
Infelizmente ainda tem muita gente usando Internet Explorer 6 por aí.
Nos grandes portais brasileiros, segundo as últimas pesquisas, esse número chega a perturbantes 40% dos usuários. Ou seja, o seu site precisa ser exibido corretamente no IE6. E seria fácil se o IE7 renderizasse o htm da mesma maneira, assim você faria seu código para o Firefox e precisaria de apenas um hack: que funcionasse no IE6 e IE7. O famoso underline (’_') antes dos seletores (’_width:’) resolveria. Mas isso não acontece, pois essa última versão do IE corrigiu algumas falhas na interpretação dos padrões, não aceita o hack do underline e renderiza os estilos de maneira diferente da versão anterior.
Ou seja, muitas vezes o seu layout aparece de 3 maneiras diferentes dependendo do browser onde está sendo exibido: no Firefox [e outros browsers Standards compliants], no IE7 ou no IE6.
Como isso acontece com frequência (eu já tive esse problema em vários sites) segue uma maneira simples de resolver:
Hacks específicos para cada navegador.
Acima vocês podem ver a mesma página sendo exibida de forma diferente em cada um dos três navegadores (em cada um deles o box aparece de uma cor diferente). Isso acontece porque estou usando o seguinte código:
#box {
width:100px;
height:100px;
border:2px solid #ddd;
background-color:red; /* Todos os navegadores interpretam essa linha: Firefox, IE7 e IE6 */
*background-color:blue; /* Apenas IE7 e IE6 */
_background-color:green; /* Apenas IE6 */
}
As quatro primeiras linhas são interpretadas por todos os navegadores.
A 5ª linha, com o asterisco (’*') na frente do seletor, é interpretada apenas pelo IE7 e IE6, então o Firefox mantém o background vermelho.
E a 6ª linha, com o “_” na frente, é reconhecida apenas pelo IE6, então o IE7 mantém o bg blue.
Isso já resolveu muitos problemas beeem chatos.
Escolhendo o framework JS - Mootools
Pretendo usar o blog para fazer algumas experiências e postar referências, tutoriais e códigos úteis. Para os códigos JavaScript vou utilizar a biblioteca Mootools que é uma das melhores que eu conheço e possui muitas extensões e bibliotecas desenvolvidas. Vamos ver se consigo cumprir a promessa e escrever alguma coisa que preste.
Como editar o conteúdo de qualquer site
Essa eu não conhecia.
Com apenas um link javascript é possível deixar o conteúdo de qualquer site editável. Qual-quer!
Experimente:
1 - Copie o link abaixo:
javascript:document.body.contentEditable='true'; document.designMode='on'; void(0)
2 - Vá até o site que você quer editar, cole o link na barra de endereços e dê um ‘Enter’..
Agora tente selecionar um trecho de texto e editá-lo. Sensacional não? Pra que serve eu não sei, mas gostei.
Você pode até adicionar o link aos favoritos e usar sempre que precisar [IE e Firefox]:
Twiddla - Desenhe com seus amigos
O Twiddla é basicamente um quadro branco online no qual você pode desenhar, escrever, pintar, etc. A sua principal característica é a possibilidade de convidar outras pessoas para participar do quadro passando apenas um link, sem a necessidade de se cadastrar ou mesmo usar qualquer senha. Os desenhos vão sendo atualizados em real time, é o que eles chamam de “Team WhiteBoarding”.
Kuku Klok - Despertador Online
Dreamweaver CS4 Beta
Resolvi fazer o download da versão beta do novo Dreamweaver CS4 pra ver o que a Adobe tinha feito pra melhorar o software.
Confesso que gostei bastante. Praticamente todas as novas features realmente ajudam a melhorar a o fluxo de trabalho, não são apenas pra inglês ver.
Mais Espaço
Uma das novidades que mais gostei foi a nova interface do programa. A barra de título foi retirada e os botões de minimizar, maximizar e fechar foram integrados ao menu, o que favorece a viewport, que ganhou mais espaço para visualização do código e layout.
Live View
Além das visualizações “Code”, “Split” e “Design” agora existe a “Live View”. Uma nova maneira de exibição da página que usa a engine WebKit e renderiza exatamente como a página será vista no browser, mantendo o acesso ao código. Velha solicitação dos usuários finalmente atendida pela Adobe.
Arquivos relacionados a um clique de distância
Agora, logo abaixo da aba com o nome do arquivo que está sendo editado, existe uma lista de todos os arquivos relacionados a ele, incluindo JS’s, CSS’s, XML’s ou mesmo PHP’s. Basta clicar no nome para abrí-lo. E o que é melhor: mesmo que o arquivo não esteja na sua máquina, sendo chamado via endereço absoluto direto da net, você pode também clicar sobre o seu nome e visualizar o conteúdo na hora. Por exemplo, não será mais preciso ficar baixando vários JS’s para saber o que cada um deles faz. Muito bom!
Há muitas outras novas funcionalidades, você pode ver a lista completa aqui.
Tendências
Algumas coisas já podemos afirmar, outras especular.
1. Abas - Acho que elas realmente vieram pra ficar. Toda a interface é baseada nelas, que foram levemente simplificadas.
2. Espaço e customização- Cada vez mais o espaço para edição ganha importância na interface juntamente com a possibilidade de customização. Prova disso é que agora, ao invés de 2, temos 8 configurações diferentes para a workspace.
3. Acredito que as próximas versões da suíte Adobe acompanharão essas mudanças. Tomara.
Dê adeus ao Print Screen!
Se durante o seu trabalho você frequentemente precisa usar imagens de sites, páginas, etc, para fazer apresentações, benchmarking ou mesmo para usar como referência, você também sabe como é chato ficar dando o famoso Print Screen na tela, abrir o editor de imagens, colar, salvar, etc… Se você precisar da página inteira e não apenas da área visível na tela piorou, vai ter que dar vários “prints” e ficar ‘emendando’.
Existem várias formas de facilitar esse processo, vários programas e até web services, como o ótimo Thumbalizr.
Mas pode ter certeza que nehuma delas é tão fácil, simples e eficiente como a extensão ScreenGrab! para Firefox. Basta clicar com o botão direito e selecionar no menu contextual a opção de salvar ou copiar a página toda ou apenas a área visível na tela. Pronto! Imagem salva em formato PNG, alta qualidade.
Instale agora!
Ahhh.. e se você faz parte da vanguarda, não se preocupe. A extensão já foi atualizada e é compatível com o FF3.
2 Extensões para Firefox que você ainda não tem, mas precisa ter
Eu acho que a maior sacada do pessoal da Mozilla Foundation em relação ao Firefox foi permitir aos próprios usuários uma maneira fácil e inteligente de desenvolver e distribuir add-ons. E claro, a facilidade que se tem em instalar, atualizar e desativar estas extensões em poucos cliques. Ou seja, o navegador da raposa tem um exército de desenvolvedores trabalhando de graça, dia e noite, criando novas features pra ele.
E aqui vão duas que descobri recentemente e já não sei como consegui viver tanto tempo sem:
1. Hyperwords
Essa extensão adiciona várias opções ao menu contextual do Firefox [aquele que aparece quando você clica com o botão direito do mouse]. Você acaba ganhando muito tempo com ela.
Por exemplo: Está no site de um bar e quer saber como chegar até ele? Basta selecionar o trecho de texto com o endereço, clicar com o botão direito e selecionar, adivinha, Google Maps. Pronto! E muito mais: procurar uma palavra no dicionário, traduzir um trecho de texto, buscar referências sobre um assunto na Wikipedia.. Enfim, instale.
Twistori - O que as pessoas estão sentindo agora? Via twitter
Twistori é basicamente um mashup que importa dados do Twitter em tempo real usando o engine do Summize. Ele busca e categoriza tweets que contenham as palavras love, hate, think, believe, feel e wish.
Ficou interessante pela maneira como os resultados vão sendo exibidos.
PSD2CSS - Converta seu layout PSD em HTML e CSS
É exatamente isso que você está pensando! No PSD2CSS você faz o upload do seu layout no formato PSD [PhotoShop Document] e… voila! O site o converte automaticamente para HTM e CSS!!
Ok, ok… o resultado não chega a ser perfeito. Todo o layout é montado com imagens, cada layer é transformada num arquivo PNG. Máscaras não funcionam muito bem e as layers de texto não são reconhecidas, o que é uma pena. O código gerado é parecido com o que se obtém usando a exportação diretamente no Photoshop, mas não igual.
Como disse, o resultado não é ideal, está longe ainda do que se espera de uma página bem estruturada semanticamente e CSS bem escrito. Mas ainda assim, talvez em alguns casos possa ser útil, pra alguém que está começando a aprender a escrever HTML e CSS ou até para layouts bastante simples por exemplo.
Drop.io. Compartilhe arquivos facilmente
Muitas vezes precisamos compartilhar arquivos com outras pessoas. Calma, eu sei, existem vários sites onde você pode criar o seu “disco virtual” para fazer isso
Drop.io é mais um deles, só que com algumas funcionalidades muito interessantes.
Em primeiro lugar, o básico: você cria sua conta rapidamente e já envia todos seus documentos. O upload é rápido e permite selecionar todos os arquivos de uma só vez. Tudo fica acessível através da URL drop.io/nomedaconta e pode ser protegido por senha.
Agora algumas coisas interessantes:
» Você pode receber um fax através da sua conta, que terá um número próprio. O fax será transformado em imagem e armazenado.
» É possível deixar mensagens de voz na sua conta, também há um número de telefone para isso.
» Você pode fazer uma conference call através da sua conta. Ela terá outro número de telefone só dela para isso.
» Interface multimidia para acesso á arquivos de audio e vídeo.
» RSS com os ultimos arquivos incluídos.
» Salve facilmente anotações ou URLs e compartilhe.
» Receba um email quando um novo arquivo for salvo.
» Envie um email com o arquivo anexado para nomedaconta@drop.io. Pronto, está salvo e compartilhado.
E tem muitas outras coisas, com tudo funcionando muito bem.
The Hobnox Audiotool
Simuladores online de equipamentos para músicos e DJs não são novidade, se você gosta do assunto provavelmente já deve ter visto e brincado com algum ou até alguns deles.
Mas acredite, o Hobnox Audiotool é acima da média. Sem dúvida o melhor que testei até agora.
Ele coloca na sua mão três clássicos da Roland, um TR-808, um TR-909 e um TB-303, e mais alguns effect floorboards como reverb, delay, equalizer etc. Os botões e controles são fiéis aos originais. Pra ligar basta conectá-los à mesa de som. Cada um deles tem entrada [input] e saída [output] e podem ser plugados uns aos outros. Ou seja, o número de combinações é impressionante.
Tudo isso com uma interface muito boa, é possível mover os equipamentos pra qualquer lugar da tela e interagir facilmente com os controles.
Caso não tenha muita intimidade com os equipamentos, dê uma olhada no vídeo tutorial. Vai te ajudar bastante.
Mesmo com tudo isso esta é só a versão demo, que inclusive acabou de ser liberada, pois antes era preciso de convite para ter acesso a ela. Os desenvolvedores prometem para breve um novo release com ainda mais recursos e a possibilidade de salvar as faixas criadas. Estou esperando!
Post dedicado aos meus amigos Renats e Ants, simplesmente os dois melhores DJs de São Paulo 
Forvo
Esse site faz algo que sempre procurei. Sabe quando bate aquela dúvida sobre a pronúncia correta de alguma palavra? Você tinha que procurar nos malditos dicionários fonéticos e ficava ainda mais perdido com todos aqueles códigos.
But.. tks god! We got the internet!
Seus problemas acabaram! Forvo é um dicionário online de pronunciação. Isso mesmo! Ao invés de informar a definição, ele reproduz a palavra falada. São os próprios usuários que vão cadastrando e gravando as palavras, divididas por língua e assunto.
Já favoritei!